/* ==========================================================================
   CARTAGENA FOR YOU — Stylesheet
   ========================================================================== */

:root{
  --navy: #0e3049;
  --navy-2: #123c5c;
  --navy-soft: #16496b;
  --gold: #f2a900;
  --gold-2: #ffc94d;
  --coral: #ef7a3c;
  --turquoise: #1fb6c9;
  --sand: #faf3e6;
  --sand-2: #f3e6cc;
  --ink: #163044;
  --muted: #5c7284;
  --white: #ffffff;
  --whatsapp: #25d366;

  --font-head: "Poppins", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, sans-serif;

  --radius: 18px;
  --radius-sm: 10px;
  --shadow: 0 14px 34px rgba(14, 48, 73, .14);
  --shadow-lg: 0 26px 60px rgba(14, 48, 73, .22);
  --container: 1180px;
  --nav-h: 96px;
}

@font-face{
  font-family:"Poppins";
  src: local("Poppins");
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ font-family:var(--font-head); margin:0; line-height:1.15; color:var(--navy); }
p{ margin:0; }
button{ font-family:inherit; cursor:pointer; }
section{ position:relative; }
.container{ width:100%; max-width:var(--container); margin:0 auto; padding:0 24px; }

/* ---------- Utility ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.78rem; letter-spacing:.14em; font-weight:700;
  text-transform:uppercase; color:var(--coral);
  margin-bottom:14px;
}
.eyebrow::before{ content:""; width:22px; height:2px; background:var(--gold); display:inline-block; }
.section-head{ max-width:640px; margin-bottom:44px; }
.section-head.center{ margin-inline:auto; text-align:center; }
.section-head h2{ font-size:clamp(1.7rem, 3.4vw, 2.5rem); }
.section-head p{ margin-top:14px; color:var(--muted); font-size:1.02rem; line-height:1.65; }
.pad{ padding:96px 0; }
.pad-sm{ padding:64px 0; }
.bg-sand{ background:var(--sand); }
.bg-navy{ background:var(--navy); color:var(--white); }
.bg-navy h2,.bg-navy .section-head p{ color:var(--white); }
.bg-navy .section-head p{ color:#c9dbe6; }

.btn{
  --btn-bg: var(--navy);
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 28px; border-radius:100px; font-weight:600; font-size:.96rem;
  border:2px solid transparent; background:var(--btn-bg); color:var(--white);
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-3px); box-shadow:0 14px 26px rgba(0,0,0,.18); }
.btn-whatsapp{ --btn-bg: var(--whatsapp); }
.btn-gold{ --btn-bg: var(--gold); color:var(--navy); }
.btn-outline{
  background:transparent; border-color:currentColor; color:inherit;
}
.btn-outline.on-dark{ border-color:rgba(255,255,255,.55); color:var(--white); }
.btn-outline.on-light{ border-color:var(--navy); color:var(--navy); }
.btn svg{ width:19px; height:19px; flex:none; }
.btn-sm{ padding:11px 20px; font-size:.86rem; }

.chip{
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25);
  color:var(--white); padding:8px 16px; border-radius:100px; font-size:.82rem;
}

/* ---------- Reveal animation ---------- */
[data-reveal]{
  opacity:0; transform:translateY(28px);
  transition:opacity .8s cubic-bezier(.19,1,.22,1), transform .8s cubic-bezier(.19,1,.22,1);
}
[data-reveal].in-view{ opacity:1; transform:translateY(0); }
[data-reveal="zoom"]{ transform:scale(.92); }
[data-reveal="zoom"].in-view{ transform:scale(1); }
[data-reveal="left"]{ transform:translateX(-40px); }
[data-reveal="left"].in-view{ transform:translateX(0); }
[data-reveal="right"]{ transform:translateX(40px); }
[data-reveal="right"].in-view{ transform:translateX(0); }

/* stagger children */
[data-stagger] > *{ opacity:0; transform:translateY(24px); transition:opacity .7s cubic-bezier(.19,1,.22,1), transform .7s cubic-bezier(.19,1,.22,1); }
[data-stagger].in-view > *{ opacity:1; transform:translateY(0); }
[data-stagger].in-view > *:nth-child(1){ transition-delay:.03s; }
[data-stagger].in-view > *:nth-child(2){ transition-delay:.11s; }
[data-stagger].in-view > *:nth-child(3){ transition-delay:.19s; }
[data-stagger].in-view > *:nth-child(4){ transition-delay:.27s; }
[data-stagger].in-view > *:nth-child(5){ transition-delay:.35s; }
[data-stagger].in-view > *:nth-child(6){ transition-delay:.43s; }

/* ==========================================================================
   PRELOADER
   ========================================================================== */
#preloader{
  position:fixed; inset:0; z-index:9999; background:var(--sand);
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap:18px;
  transition:opacity .6s ease, visibility .6s ease;
}
#preloader.done{ opacity:0; visibility:hidden; pointer-events:none; }
#preloader .pl-logo{ width:min(78vw,320px); position:relative; display:flex; align-items:center; justify-content:center; }
#preloader .pl-logo img{ width:100%; height:auto; animation:plPulse 1.6s ease-in-out infinite; filter:drop-shadow(0 6px 18px rgba(14,48,73,.18)); }
#preloader .pl-bar{ width:180px; height:3px; background:rgba(14,48,73,.12); border-radius:10px; overflow:hidden; }
#preloader .pl-bar::after{
  content:""; display:block; height:100%; width:40%; background:linear-gradient(90deg,var(--gold),var(--coral));
  animation:plLoad 1.1s ease-in-out infinite;
}
#preloader .pl-text{ color:var(--navy); font-size:.8rem; letter-spacing:.18em; text-transform:uppercase; }
@keyframes plLoad{ 0%{ transform:translateX(-100%);} 100%{ transform:translateX(280%);} }
@keyframes plPulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.08); } }

/* ==========================================================================
   SCROLL PROGRESS
   ========================================================================== */
#scroll-progress{
  position:fixed; top:0; left:0; height:3px; width:0%; z-index:1001;
  background:linear-gradient(90deg,var(--gold),var(--coral)); transition:width .1s linear;
}

/* ==========================================================================
   HEADER
   ========================================================================== */
header.site{
  position:fixed; top:0; left:0; right:0; z-index:900;
  height:var(--nav-h); display:flex; align-items:center;
  background:rgba(255,255,255,.97); backdrop-filter:blur(6px);
  box-shadow:0 6px 24px rgba(14,48,73,.1);
  border-bottom:2px solid transparent; border-image:linear-gradient(90deg,var(--gold),var(--coral),var(--gold)) 1;
  transition:background .35s ease, box-shadow .35s ease, height .35s ease;
}
header.site .container{ display:flex; align-items:center; justify-content:space-between; gap:20px; }
header.site.scrolled{ height:74px; background:rgba(255,255,255,.99); box-shadow:0 10px 30px rgba(14,48,73,.14); }

.brand{ display:flex; align-items:center; gap:10px; }
.brand img{ height:64px; width:auto; transition:height .35s ease; }
header.site.scrolled .brand img{ height:52px; }

nav.main-nav{ display:none; }
nav.main-nav ul{ display:flex; align-items:center; gap:30px; }
nav.main-nav a{
  font-weight:600; font-size:.92rem; color:var(--navy); position:relative; padding:6px 0;
  opacity:.92;
}
nav.main-nav a::after{
  content:""; position:absolute; left:0; bottom:0; height:2px; width:0%; background:var(--gold);
  transition:width .3s ease;
}
nav.main-nav a:hover::after{ width:100%; }

.header-actions{ display:flex; align-items:center; gap:14px; }
.header-actions .btn{ display:none; }
.hamburger{
  width:44px; height:44px; border-radius:12px; border:1px solid rgba(14,48,73,.25);
  background:rgba(14,48,73,.05); display:flex; align-items:center; justify-content:center;
  flex-direction:column; gap:5px;
}
.hamburger span{ display:block; width:20px; height:2px; background:var(--navy); transition:transform .3s ease, opacity .3s ease; }
.hamburger.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2){ opacity:0; }
.hamburger.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* mobile drawer */
#mobile-menu{
  position:fixed; inset:0; z-index:890; background:linear-gradient(160deg,var(--navy),#0a2233);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  overflow-y:auto; padding:24px 20px;
  /* si el navegador no soporta env(), esta línea es inválida y se ignora, quedando el padding de arriba */
  padding:calc(24px + env(safe-area-inset-top)) calc(20px + env(safe-area-inset-right))
          calc(24px + env(safe-area-inset-bottom)) calc(20px + env(safe-area-inset-left));
  transform:translateY(-100%); transition:transform .45s cubic-bezier(.7,0,.3,1);
  visibility:hidden; pointer-events:none;
}
#mobile-menu.open{ transform:translateY(0); visibility:visible; pointer-events:auto; }
#mobile-menu a{
  font-family:var(--font-head); font-size:1.5rem; color:#fff; padding:14px 0; font-weight:600;
}
#mobile-menu .btn{ margin-top:20px; flex:none; }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  min-height:100vh; display:flex; align-items:center; position:relative; color:#fff;
  padding-top:var(--nav-h);
}
.hero-bg{ position:absolute; inset:0; overflow:hidden; }
.hero-bg img, .hero-bg video{ width:100%; height:100%; object-fit:cover; transform:scale(1.08); animation:heroZoom 16s ease-in-out infinite alternate; }
@keyframes heroZoom{ from{ transform:scale(1.08);} to{ transform:scale(1.18);} }
.hero-bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(9,28,42,.72) 0%, rgba(9,28,42,.45) 42%, rgba(9,28,42,.85) 100%);
}
/* padding-top/bottom (no shorthand): así no pisa el padding lateral que da .container,
   que era el bug real detrás de los títulos y textos pegados a los bordes en el hero. */
.hero-content{ position:relative; z-index:2; max-width:760px; padding-top:60px; padding-bottom:60px; }
.hero-content .eyebrow{ color:var(--gold-2); }
.hero-content .eyebrow::before{ background:var(--gold-2); }
.hero-content h1{
  color:#fff; font-size:clamp(2.2rem, 5.6vw, 3.8rem); font-weight:700; letter-spacing:-.01em;
}
.hero-content h1 span{ color:var(--gold-2); }
.hero-content .lead{ margin-top:22px; font-size:1.14rem; color:#e6eef2; max-width:560px; line-height:1.7; }
.hero-cta{ display:flex; gap:16px; margin-top:36px; flex-wrap:wrap; }
.hero-stats{ display:flex; gap:34px; margin-top:52px; flex-wrap:wrap; }
.hero-stats div{ min-width:110px; }
.hero-stats strong{ display:block; font-family:var(--font-head); font-size:1.9rem; color:#fff; }
.hero-stats span{ font-size:.8rem; color:#cfe0ea; letter-spacing:.03em; }

.scroll-cue{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%); z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:8px; color:#dce9ef; font-size:.72rem;
  letter-spacing:.14em; text-transform:uppercase;
}
.scroll-cue .mouse{ width:22px; height:34px; border:2px solid rgba(255,255,255,.6); border-radius:14px; position:relative; }
.scroll-cue .mouse::after{
  content:""; position:absolute; top:6px; left:50%; width:4px; height:8px; margin-left:-2px;
  background:#fff; border-radius:4px; animation:scrollDot 1.6s ease infinite;
}
@keyframes scrollDot{ 0%{ opacity:1; transform:translateY(0);} 70%{ opacity:0; transform:translateY(10px);} 100%{opacity:0;} }

/* ==========================================================================
   TRUST BAR
   ========================================================================== */
.trust{ background:var(--navy); padding:38px 0; color:#fff; }
.trust-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:22px;
}
.trust-item{ display:flex; align-items:flex-start; gap:12px; min-width:0; }
.trust-item .ic{
  flex:none; width:40px; height:40px; border-radius:11px; background:rgba(255,255,255,.1);
  display:flex; align-items:center; justify-content:center;
}
.trust-item .ic svg{ width:20px; height:20px; color:var(--gold-2); }
.trust-item strong{ display:block; font-size:.92rem; }
.trust-item span{ font-size:.78rem; color:#a9c1cd; }
.trust-legal{
  margin-top:28px; padding-top:22px; border-top:1px solid rgba(255,255,255,.14);
  display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:space-between;
  font-size:.78rem; color:#a9c1cd;
}
.trust-legal .badge{
  background:rgba(255,255,255,.08); padding:6px 14px; border-radius:100px; border:1px solid rgba(255,255,255,.15);
}

/* ==========================================================================
   EXPERIENCES
   ========================================================================== */
.exp-grid{ display:grid; grid-template-columns:1fr; gap:26px; }
.exp-card{
  position:relative; border-radius:var(--radius); overflow:hidden; height:380px;
  box-shadow:var(--shadow); isolation:isolate;
}
.exp-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.19,1,.22,1); }
.exp-card:hover img{ transform:scale(1.08); }
.exp-card::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(9,28,42,.05) 30%, rgba(9,28,42,.92) 100%);
}
.exp-card .exp-body{
  position:absolute; z-index:2; left:0; right:0; bottom:0; padding:26px; color:#fff;
}
.exp-card .exp-tag{
  display:inline-block; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; font-weight:700;
  background:rgba(255,255,255,.14); padding:5px 12px; border-radius:100px; margin-bottom:12px; backdrop-filter:blur(3px);
}
.exp-card h3{ color:#fff; font-size:1.4rem; margin-bottom:8px; }
.exp-card p{ font-size:.9rem; color:#dce9ef; line-height:1.55; margin-bottom:16px; max-width:400px; }
.exp-card .exp-link{
  display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:.85rem; color:var(--gold-2);
}
.exp-card .exp-link svg{ width:16px; height:16px; transition:transform .3s ease; }
.exp-card:hover .exp-link svg{ transform:translateX(5px); }

/* ==========================================================================
   PLAN IDEAL
   ========================================================================== */
.plan-grid{ display:grid; grid-template-columns:1fr; gap:22px; }
.plan-card{
  background:#fff; border-radius:var(--radius); padding:32px 28px; box-shadow:var(--shadow);
  border:1px solid #eef1f3; transition:transform .35s ease, box-shadow .35s ease;
}
.plan-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.plan-card .emoji{
  width:58px; height:58px; border-radius:16px; display:flex; align-items:center; justify-content:center;
  font-size:1.7rem; background:linear-gradient(135deg,var(--gold-2),var(--coral)); margin-bottom:18px;
}
.plan-card h3{ font-size:1.15rem; margin-bottom:10px; }
.plan-card p{ color:var(--muted); font-size:.92rem; line-height:1.6; margin-bottom:20px; }

/* ==========================================================================
   BIG CTA / 100+ EXPERIENCIAS
   ========================================================================== */
.cta-banner{
  background:linear-gradient(120deg,var(--navy) 0%, var(--navy-soft) 60%, #0a2942 100%);
  color:#fff; border-radius:26px; padding:56px 44px; display:flex; align-items:center; justify-content:space-between;
  gap:40px; flex-wrap:wrap; position:relative; overflow:hidden;
}
.cta-banner::before{
  content:""; position:absolute; right:-60px; top:-60px; width:280px; height:280px; border-radius:50%;
  background:radial-gradient(circle,rgba(242,169,0,.35),transparent 70%);
}
.cta-banner .num{ font-family:var(--font-head); font-size:clamp(2.6rem,6vw,4.2rem); font-weight:700; color:var(--gold-2); }
.cta-banner .num sup{ font-size:.4em; top:-1.2em; }
.cta-banner-text{ max-width:480px; position:relative; z-index:1; }
.cta-banner-text h3{ color:#fff; font-size:1.5rem; margin-bottom:10px; }
.cta-banner-text p{ color:#c9dbe6; line-height:1.6; }
.cta-banner-side{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:flex-start; gap:16px; }

/* ==========================================================================
   WHY US
   ========================================================================== */
.why-grid{ display:grid; grid-template-columns:1fr; gap:20px; }
.why-card{ display:flex; gap:16px; padding:26px; border-radius:var(--radius-sm); background:#fff; box-shadow:var(--shadow); }
.why-card .ic{
  flex:none; width:48px; height:48px; border-radius:14px; background:linear-gradient(135deg,var(--turquoise),var(--navy));
  display:flex; align-items:center; justify-content:center;
}
.why-card .ic svg{ width:22px; height:22px; color:#fff; }
.why-card h4{ font-size:1.02rem; margin-bottom:6px; }
.why-card p{ color:var(--muted); font-size:.88rem; line-height:1.55; }

/* ==========================================================================
   STEPS
   ========================================================================== */
.steps{ display:grid; grid-template-columns:1fr; gap:0; position:relative; }
.step{ display:flex; gap:20px; padding:26px 0; position:relative; }
.step:not(:last-child)::before{
  content:""; position:absolute; left:27px; top:64px; bottom:-6px; width:2px;
  background:repeating-linear-gradient(to bottom, var(--gold) 0 6px, transparent 6px 12px);
}
.step .num{
  flex:none; width:54px; height:54px; border-radius:50%; background:var(--navy); color:var(--gold-2);
  display:flex; align-items:center; justify-content:center; font-family:var(--font-head); font-weight:700; font-size:1.1rem;
  box-shadow:0 8px 18px rgba(14,48,73,.28);
}
.step h4{ font-size:1.06rem; margin-bottom:6px; }
.step p{ color:var(--muted); font-size:.92rem; line-height:1.6; max-width:480px; }

/* ==========================================================================
   REVIEWS
   ========================================================================== */
.reviews-head{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:20px; margin-bottom:36px; }
.google-badge{ display:flex; align-items:center; gap:12px; background:#fff; padding:12px 18px; border-radius:14px; box-shadow:var(--shadow); }
.google-badge .stars{ color:var(--gold); font-size:1rem; letter-spacing:2px; }
.google-badge small{ color:var(--muted); display:block; font-size:.74rem; }
.reviews-track{ display:grid; grid-template-columns:1fr; gap:20px; }
.review-card{ background:#fff; border-radius:var(--radius-sm); padding:26px; box-shadow:var(--shadow); position:relative; }
.review-card .stars{ color:var(--gold); font-size:.95rem; letter-spacing:2px; margin-bottom:12px; }
.review-card p{ color:var(--ink); font-size:.92rem; line-height:1.6; margin-bottom:18px; }
.review-card .who{ display:flex; align-items:center; gap:12px; }
.review-card .avatar{
  width:38px; height:38px; border-radius:50%; background:linear-gradient(135deg,var(--turquoise),var(--navy));
  color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.85rem; flex:none;
}
.review-card .who strong{ font-size:.86rem; display:block; }
.review-card .who span{ font-size:.74rem; color:var(--muted); }
.review-note{
  margin-top:20px; font-size:.76rem; color:var(--muted); background:#fff6e6; border:1px dashed #eecb85;
  padding:12px 16px; border-radius:12px;
}

/* ==========================================================================
   GALLERY
   ========================================================================== */
.gallery-grid{
  display:grid; grid-template-columns:repeat(2,1fr); grid-auto-rows:150px; gap:12px;
}
.gallery-grid figure{ margin:0; border-radius:14px; overflow:hidden; position:relative; cursor:zoom-in; }
.gallery-grid img{ width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.gallery-grid figure:hover img{ transform:scale(1.1); }
.gallery-grid figure::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 60%, rgba(0,0,0,.55)); opacity:0; transition:opacity .3s ease; }
.gallery-grid figure:hover::after{ opacity:1; }
.gallery-grid figcaption{
  position:absolute; left:12px; bottom:10px; color:#fff; font-size:.74rem; font-weight:600; z-index:1;
  opacity:0; transform:translateY(6px); transition:opacity .3s ease, transform .3s ease;
}
.gallery-grid figure:hover figcaption{ opacity:1; transform:translateY(0); }
.gallery-grid .tall{ grid-row:span 2; }
.gallery-grid .wide{ grid-column:span 2; }

#lightbox{
  position:fixed; inset:0; background:rgba(6,18,28,.94); z-index:1200; display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s ease; padding:26px;
}
#lightbox.open{ opacity:1; visibility:visible; }
#lightbox img{ max-width:min(92vw,1100px); max-height:86vh; border-radius:12px; box-shadow:0 30px 70px rgba(0,0,0,.5); }
#lightbox .lb-close{
  position:absolute; top:22px; right:26px; width:42px; height:42px; border-radius:50%; background:rgba(255,255,255,.12);
  color:#fff; display:flex; align-items:center; justify-content:center; font-size:1.4rem; border:1px solid rgba(255,255,255,.25);
}
#lightbox .lb-nav{
  position:absolute; top:50%; transform:translateY(-50%); width:52px; height:52px; border-radius:50%;
  background:rgba(255,255,255,.12); color:#fff; display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,.25); transition:background .2s ease, transform .2s ease;
}
#lightbox .lb-nav:hover{ background:rgba(255,255,255,.24); }
#lightbox .lb-nav svg{ width:22px; height:22px; }
#lightbox .lb-nav.prev{ left:14px; }
#lightbox .lb-nav.next{ right:14px; }
#lightbox .lb-count{
  position:absolute; left:50%; bottom:20px; transform:translateX(-50%); color:#fff; font-size:.8rem;
  font-weight:600; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25);
  padding:5px 14px; border-radius:999px; letter-spacing:.02em;
}
#lightbox[data-single] .lb-nav, #lightbox[data-single] .lb-count{ display:none; }
@media (max-width:640px){
  #lightbox .lb-nav{ width:42px; height:42px; }
  #lightbox .lb-nav.prev{ left:6px; }
  #lightbox .lb-nav.next{ right:6px; }
}

/* ---- item detail page: gallery as a draggable/swipeable carousel ---- */
.item-gallery-carousel{ max-width:1000px; margin:0 auto 44px; }
.item-gallery-carousel .carousel-track{ padding:4px 2px 14px; }
.item-slide{
  width:280px; height:250px; border-radius:14px; overflow:hidden; position:relative; margin:0;
  cursor:zoom-in; box-shadow:var(--shadow);
}
.item-slide img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.item-slide:hover img{ transform:scale(1.06); }
@media (max-width:640px){ .item-slide{ width:76vw; max-width:280px; height:220px; } }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq-list{ max-width:760px; margin:0 auto; }
.faq-item{ border-bottom:1px solid #e7ecef; }
.faq-q{
  width:100%; text-align:left; background:none; border:none; padding:22px 0; display:flex;
  align-items:center; justify-content:space-between; gap:16px; font-family:var(--font-head); font-weight:600;
  font-size:1.02rem; color:var(--navy);
}
.faq-q .plus{
  flex:none; width:30px; height:30px; border-radius:50%; border:1.5px solid var(--navy); position:relative;
  transition:transform .35s ease, background .35s ease;
}
.faq-q .plus::before,.faq-q .plus::after{
  content:""; position:absolute; background:var(--navy); left:50%; top:50%; transform:translate(-50%,-50%);
}
.faq-q .plus::before{ width:12px; height:2px; }
.faq-q .plus::after{ width:2px; height:12px; transition:opacity .3s ease; }
.faq-item.open .plus{ background:var(--navy); transform:rotate(180deg); }
.faq-item.open .plus::before,.faq-item.open .plus::after{ background:#fff; }
.faq-item.open .plus::after{ opacity:0; }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .4s ease; }
.faq-a p{ padding:0 0 22px; color:var(--muted); font-size:.94rem; line-height:1.65; max-width:640px; }

/* ==========================================================================
   FINAL CTA
   ========================================================================== */
.final-cta{
  position:relative; padding:130px 0; text-align:center; color:#fff; overflow:hidden;
}
.final-cta .hero-bg img{ animation:heroZoom 20s ease-in-out infinite alternate; }
.final-cta .fc-inner{ position:relative; z-index:2; max-width:680px; margin:0 auto; }
.final-cta h2{ color:#fff; font-size:clamp(1.8rem,4vw,2.7rem); }
.final-cta p{ margin-top:16px; color:#e6eef2; font-size:1.05rem; line-height:1.65; }
.final-cta .hero-cta{ justify-content:center; margin-top:34px; }

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact-grid{ display:grid; grid-template-columns:1fr; gap:34px; }
.contact-list{ display:flex; flex-direction:column; gap:20px; }
.contact-row{ display:flex; gap:16px; align-items:flex-start; }
.contact-row > div{ min-width:0; }
.contact-row .ic{
  flex:none; width:46px; height:46px; border-radius:13px; background:var(--sand-2);
  display:flex; align-items:center; justify-content:center;
}
.contact-row .ic svg{ width:21px; height:21px; color:var(--navy); }
.contact-row strong{ display:block; font-size:.95rem; margin-bottom:3px; }
.contact-row span, .contact-row a{ color:var(--muted); font-size:.9rem; line-height:1.5; overflow-wrap:anywhere; }
.map-wrap{ border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); height:340px; }
.map-wrap iframe{ width:100%; height:100%; border:0; }
.social-row{ display:flex; gap:12px; margin-top:6px; }
.social-row a{
  width:42px; height:42px; border-radius:50%; background:var(--navy); color:#fff; display:flex;
  align-items:center; justify-content:center; transition:transform .3s ease, background .3s ease;
}
.social-row a:hover{ transform:translateY(-3px); background:var(--coral); }
.social-row svg{ width:19px; height:19px; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
footer.site{ background:var(--sand); color:var(--muted); padding:64px 0 0; }
.footer-grid{ display:grid; grid-template-columns:1fr; gap:36px; padding-bottom:44px; border-bottom:1px solid rgba(14,48,73,.1); }
.footer-brand img{ height:56px; margin-bottom:14px; }
.footer-brand p{ font-size:.88rem; line-height:1.6; color:var(--muted); max-width:320px; }
.footer-col h5{ color:var(--navy); font-size:.85rem; letter-spacing:.06em; text-transform:uppercase; margin-bottom:16px; }
.footer-col ul{ display:flex; flex-direction:column; gap:10px; }
.footer-col a{ font-size:.88rem; color:var(--muted); transition:color .25s ease; }
.footer-col a:hover{ color:var(--coral); }
.footer-bottom{
  display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:space-between;
  padding:22px 0; font-size:.78rem; color:#8a9aa5;
}

/* ==========================================================================
   FLOATING WHATSAPP
   ========================================================================== */
#wa-float{
  position:fixed; bottom:24px; right:22px;
  /* si el navegador no soporta env(), esta línea es inválida y se ignora, quedando el bottom/right de arriba */
  bottom:calc(24px + env(safe-area-inset-bottom)); right:calc(22px + env(safe-area-inset-right));
  z-index:950; width:60px; height:60px; border-radius:50%;
  background:var(--whatsapp); display:flex; align-items:center; justify-content:center; box-shadow:0 12px 26px rgba(0,0,0,.28);
  transition:transform .3s ease;
}
#wa-float:hover{ transform:scale(1.08); }
#wa-float svg{ width:30px; height:30px; color:#fff; }
#wa-float::before{
  content:""; position:absolute; inset:0; border-radius:50%; background:var(--whatsapp); opacity:.55;
  animation:waPulse 2.2s ease-out infinite;
}
@keyframes waPulse{ 0%{ transform:scale(1); opacity:.55;} 100%{ transform:scale(1.9); opacity:0;} }
.wa-tooltip{
  position:absolute; right:72px; top:50%; transform:translateY(-50%) translateX(6px);
  background:#fff; color:var(--navy); padding:10px 14px; border-radius:10px; font-size:.8rem; font-weight:600;
  white-space:nowrap; box-shadow:var(--shadow); opacity:0; transition:opacity .3s ease, transform .3s ease; pointer-events:none;
}
#wa-float:hover .wa-tooltip{ opacity:1; transform:translateY(-50%) translateX(0); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (min-width: 620px){
  .trust-grid{ grid-template-columns:repeat(3,1fr); }
  .plan-grid{ grid-template-columns:repeat(2,1fr); }
  .why-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (min-width: 860px){
  nav.main-nav{ display:block; }
  .header-actions .btn{ display:inline-flex; }
  .hamburger{ display:none; }
  .exp-grid{ grid-template-columns:repeat(3,1fr); }
  .exp-card:nth-child(1),.exp-card:nth-child(4){ grid-row: span 1; }
  .reviews-track{ grid-template-columns:repeat(3,1fr); }
  .steps{ grid-template-columns:repeat(2,1fr); gap:0 40px; }
  .step:nth-child(2)::before,.step:nth-child(4)::before{ display:none; }
  .contact-grid{ grid-template-columns:1fr 1fr; }
  .footer-grid{ grid-template-columns:1.4fr 1fr 1fr 1fr; }
}
@media (min-width: 1040px){
  .trust-grid{ grid-template-columns:repeat(5,1fr); }
  .why-grid{ grid-template-columns:repeat(5,1fr); }
  .why-card{ flex-direction:column; }
}
@media (max-width: 619px){
  .gallery-grid{ grid-auto-rows:130px; }
  .cta-banner{ padding:40px 26px; flex-direction:column; align-items:flex-start; }
}
/* .btn tiene white-space:nowrap (pensado para textos cortos como "Reservar por WhatsApp"),
   pero algunos botones llevan textos más largos (ej. "Preguntar por todas estas opciones")
   que en pantallas angostas no cabían en una sola línea y desbordaban el contenedor. */
@media (max-width: 480px){
  .btn{ white-space:normal; text-align:center; max-width:100%; }
}
/* En pantallas muy angostas (iPhone SE, Android gama baja) 2 columnas dejaban muy poco
   espacio a los textos del bloque de confianza y el grid se desbordaba (1fr no encoge
   por debajo del contenido mínimo) — de ahí letras que quedaban apretadas/cortadas. */
@media (max-width: 399px){
  .trust-grid{ grid-template-columns:1fr; }
}

@media (prefers-reduced-motion: reduce){
  [data-reveal],[data-stagger] > *{ transition:none !important; opacity:1 !important; transform:none !important; }
  .hero-bg img{ animation:none; }
}

/* ==========================================================================
   CATEGORY / SUBCATEGORY PAGES (Fase 2)
   ========================================================================== */
.cat-hero{ min-height:64vh; padding-top:calc(var(--nav-h) + 20px); }
.cat-hero .stub-badge{
  display:inline-block; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.32);
  padding:7px 15px; border-radius:100px; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  margin-bottom:16px; backdrop-filter:blur(3px);
}
.cat-hero h1{ color:#fff; font-size:clamp(2.1rem,5vw,3.4rem); }
.cat-hero .lead{ max-width:620px; }
.cat-crumb{ font-size:.82rem; color:#cfe0ea; margin-bottom:14px; }
.cat-crumb a{ color:var(--gold-2); font-weight:600; }

.cat-intro{ max-width:760px; margin:0 auto 10px; text-align:center; }

.subcat{ margin-top:0; padding:52px 0; border-bottom:1px solid #eef1f3; }
.subcat:last-of-type{ border-bottom:none; }
.subcat-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:26px; }
.subcat-head h3{ font-size:1.5rem; }
.subcat-head .subcat-count{ font-size:.78rem; color:var(--muted); background:var(--sand-2); padding:5px 13px; border-radius:100px; font-weight:600; }
.subcat-lead{ color:var(--muted); font-size:.95rem; max-width:620px; margin-bottom:22px; line-height:1.6; }

.subgroup{ margin-bottom:26px; }
.subgroup:last-child{ margin-bottom:0; }
.subgroup h4{
  font-size:.78rem; letter-spacing:.09em; text-transform:uppercase; color:var(--coral); margin-bottom:14px;
  display:flex; align-items:center; gap:10px;
}
.subgroup h4::after{ content:""; height:1px; flex:1; background:#eef1f3; }

.chip-list{ display:flex; flex-wrap:wrap; gap:10px; }
.chip-item{
  display:inline-flex; align-items:center; gap:7px; padding:10px 16px; border-radius:100px;
  background:#fff; border:1.5px solid #e7ecef; font-size:.86rem; font-weight:600; color:var(--navy);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease;
}
.chip-item:hover{ transform:translateY(-3px); box-shadow:0 10px 20px rgba(14,48,73,.12); border-color:var(--turquoise); background:#f3fbfc; }
.chip-item svg{ width:14px; height:14px; color:var(--whatsapp); flex:none; }

.note-price{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap; background:linear-gradient(120deg,var(--sand-2),var(--sand));
  border:1px dashed #e0c98a; border-radius:16px; padding:20px 24px; margin-top:8px;
}
.note-price strong{ font-size:1.05rem; color:var(--navy); }
.note-price span{ color:var(--muted); font-size:.88rem; }

.subcat-cta{ margin-top:20px; }

.cat-photo-strip{
  display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin:56px 0;
}
.cat-photo-strip img{ width:100%; height:220px; object-fit:cover; border-radius:16px; }

.cat-final{ text-align:center; padding:70px 0; }

.back-link{ display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:.88rem; color:var(--navy); margin-bottom:20px; }
.back-link svg{ width:16px; height:16px; }

@media (min-width: 720px){
  .cat-photo-strip{ grid-template-columns:repeat(4,1fr); }
}
@media (min-width: 860px){
  .subcat-head h3{ font-size:1.7rem; }
}

/* ==========================================================================
   ITEM PAGES (Fase 3 — una página por experiencia)
   ========================================================================== */
.chip-link{ cursor:pointer; }
.chip-link svg{ color:var(--turquoise); }

.item-lead{ max-width:700px; margin:0 auto; }

.pending-banner{
  display:flex; gap:14px; align-items:flex-start; background:#fff6e6; border:1px dashed #eecb85;
  border-radius:16px; padding:18px 20px; margin-bottom:36px; max-width:760px; margin-inline:auto;
}
.pending-banner svg{ flex:none; width:22px; height:22px; color:#c98a1a; margin-top:1px; }
.pending-banner p{ font-size:.88rem; color:#6b5a30; line-height:1.6; }
.pending-banner strong{ color:#4a3c17; }

.info-grid{
  display:grid; grid-template-columns:1fr; gap:16px; max-width:900px; margin:0 auto 44px;
}
.info-card{
  background:#fff; border:1px solid #eef1f3; border-radius:14px; padding:20px 22px; box-shadow:var(--shadow);
}
.info-card .lbl{ font-size:.72rem; letter-spacing:.09em; text-transform:uppercase; color:var(--coral); font-weight:700; display:block; margin-bottom:8px; }
.info-card .val{ font-size:.92rem; color:var(--muted); line-height:1.55; }

.related-wrap{ max-width:900px; margin:0 auto; text-align:center; }
.related-wrap h3{ font-size:1.1rem; margin-bottom:18px; }
.related-wrap .chip-list{ justify-content:center; }

.item-crumb{ font-size:.8rem; }
.item-crumb a{ color:var(--gold-2); font-weight:600; }
.item-crumb span.sep{ opacity:.5; margin:0 2px; }

@media (min-width: 640px){
  .info-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (min-width: 900px){
  .info-grid{ grid-template-columns:repeat(4,1fr); }
}

/* ---- price pills ---- */
.price-pills{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; max-width:900px; margin:0 auto 40px; }
.price-pill{
  background:#fff; border:1px solid #eef1f3; border-radius:16px; padding:16px 24px; box-shadow:var(--shadow);
  text-align:center; min-width:150px;
}
.price-pill .pp-label{ display:block; font-size:.76rem; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); margin-bottom:6px; }
.price-pill .pp-price{ display:block; font-family:var(--font-head); font-weight:700; font-size:1.35rem; color:var(--navy); }
.price-pill.featured{ background:linear-gradient(135deg,var(--navy),var(--navy-soft)); border-color:transparent; }
.price-pill.featured .pp-label{ color:#a9c1cd; }
.price-pill.featured .pp-price{ color:var(--gold-2); }
.price-note-banner{
  max-width:700px; margin:0 auto 40px; text-align:center; background:var(--sand-2); border-radius:14px;
  padding:18px 24px; color:var(--navy); font-size:.92rem; line-height:1.6;
}

/* ---- incluye / no incluye ---- */
.pros-cons{ display:grid; grid-template-columns:1fr; gap:20px; max-width:900px; margin:0 auto 44px; }
.pros-cons .box{ background:#fff; border:1px solid #eef1f3; border-radius:16px; padding:26px; box-shadow:var(--shadow); }
.pros-cons h4{ font-size:.95rem; margin-bottom:16px; display:flex; align-items:center; gap:8px; }
.check-list, .cross-list{ display:flex; flex-direction:column; gap:11px; }
.check-list li, .cross-list li{ display:flex; align-items:flex-start; gap:10px; font-size:.9rem; color:var(--ink); line-height:1.5; }
.check-list li svg{ flex:none; width:18px; height:18px; color:var(--whatsapp); margin-top:1px; }
.cross-list li svg{ flex:none; width:18px; height:18px; color:#c96a4a; margin-top:1px; }
.cross-list li{ color:var(--muted); }

/* ---- item gallery ---- */
.item-gallery{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; max-width:900px; margin:0 auto 44px; }
.item-gallery figure{ margin:0; border-radius:14px; overflow:hidden; cursor:zoom-in; height:220px; }
.item-gallery img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.item-gallery figure:hover img{ transform:scale(1.06); }
.item-gallery figure:first-child{ grid-column:1 / -1; height:320px; }

/* ==========================================================================
   GOLD ACCENTS — decorative corner motifs (brand gold, used sparingly)
   ========================================================================== */
.hero-gold-corner{
  position:absolute; z-index:2; pointer-events:none; width:260px; height:260px;
  opacity:.55; mix-blend-mode:screen;
}
.hero-gold-corner.tl{ top:0; left:0; background:radial-gradient(circle at 0 0, rgba(242,169,0,.55), transparent 70%); }
.hero-gold-corner.br{ bottom:0; right:0; width:340px; height:340px; background:radial-gradient(circle at 100% 100%, rgba(242,169,0,.4), transparent 70%); }

.gold-wave{
  position:absolute; left:0; right:0; width:100%; height:64px; line-height:0; pointer-events:none; z-index:1;
}
.gold-wave.top{ top:-1px; }
.gold-wave.bottom{ bottom:-1px; transform:scaleY(-1); }
.gold-wave svg{ display:block; width:100%; height:100%; }

.gold-rule{
  width:64px; height:3px; border-radius:3px; margin:0 auto 18px;
  background:linear-gradient(90deg,var(--gold),var(--coral));
}
.section-head.center .gold-rule{ margin-inline:auto; }

.corner-flourish{
  position:absolute; width:120px; height:120px; pointer-events:none; opacity:.5; z-index:0;
}
.corner-flourish.top-right{ top:18px; right:18px; }
.corner-flourish.bottom-left{ bottom:18px; left:18px; transform:rotate(180deg); }
.corner-flourish svg{ width:100%; height:100%; }

.bg-sand{ position:relative; }

/* ==========================================================================
   CAROUSELS (fotos + videos) — swipe / drag / autoplay
   ========================================================================== */
.carousel-section .container{ margin-bottom:8px; }
.video-carousel-section{ background:linear-gradient(180deg,var(--navy) 0%, #0a2233 100%); color:#fff; }
.video-carousel-section .section-head h2{ color:#fff; }
.video-carousel-section .section-head p{ color:#c9dbe6; }

.carousel-wrap{ position:relative; }
/* Estos 2 carruseles del inicio (fotos y videos) van fuera de .container para verse a pantalla completa;
   sin este padding, el margen negativo de .carousel-track los desbordaba 24px fuera del viewport
   (por eso "el inicio salía mocho": la primera foto se veía cortada y la página se corría horizontalmente). */
.carousel-section > .carousel-wrap, .video-carousel-section > .carousel-wrap{ padding:0 24px; }
.carousel-track{
  display:flex; gap:16px; overflow-x:auto; scroll-snap-type:none;
  -webkit-overflow-scrolling:touch; scrollbar-width:none; cursor:grab;
  padding:4px 24px 22px; margin:0 -24px; user-select:none;
}
.carousel-track::-webkit-scrollbar{ display:none; }
.carousel-track.dragging{ cursor:grabbing; }
.carousel-track.snap-on{ scroll-snap-type:x proximity; }
.carousel-track > *{ scroll-snap-align:start; flex:none; }

.photo-slide{
  width:78vw; max-width:300px; height:380px; border-radius:18px; overflow:hidden;
  position:relative; margin:0; box-shadow:var(--shadow); isolation:isolate;
}
.photo-slide img{ width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.photo-slide::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%,rgba(9,28,42,.85)); }
.photo-slide figcaption{
  position:absolute; left:18px; bottom:16px; right:18px; z-index:1; color:#fff; font-weight:700;
  font-size:.92rem; text-shadow:0 2px 10px rgba(0,0,0,.4);
}

.video-slide{
  width:56vw; max-width:220px; height:390px; border-radius:18px; overflow:hidden; position:relative;
  background:#0a2233; box-shadow:0 20px 40px rgba(0,0,0,.35); cursor:pointer;
}
.video-slide video{ width:100%; height:100%; object-fit:cover; display:block; }
.video-slide .play-badge{
  position:absolute; top:14px; right:14px; width:36px; height:36px; border-radius:50%;
  background:rgba(9,28,42,.55); border:1px solid rgba(255,255,255,.35); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:.8rem; backdrop-filter:blur(2px);
  transition:opacity .25s ease, transform .25s ease;
}
.video-slide.playing .play-badge{ opacity:0; transform:scale(.8); }
.video-slide .vcap{
  position:absolute; left:14px; bottom:14px; right:14px; color:#fff; font-weight:700; font-size:.85rem;
  text-shadow:0 2px 10px rgba(0,0,0,.5); z-index:1;
}
.video-slide::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 60%,rgba(0,0,0,.65)); pointer-events:none; }

.carousel-arrow{
  position:absolute; top:calc(50% - 11px); z-index:3; width:44px; height:44px; border-radius:50%;
  background:#fff; border:1px solid #eef1f3; box-shadow:var(--shadow); display:flex; align-items:center;
  justify-content:center; color:var(--navy); transition:transform .25s ease, background .25s ease;
}
.carousel-arrow:hover{ transform:translateY(-2px); background:var(--sand-2); }
.carousel-arrow svg{ width:18px; height:18px; }
.carousel-arrow.prev{ left:6px; }
.carousel-arrow.next{ right:6px; }
.video-carousel-section .carousel-arrow{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.25); color:#fff; }
.video-carousel-section .carousel-arrow:hover{ background:rgba(255,255,255,.22); }

@media (max-width: 640px){
  .carousel-arrow{ display:none; }
}
@media (min-width: 720px){
  .photo-slide{ width:300px; }
  .video-slide{ width:220px; }
}

/* ==========================================================================
   TEAM PHOTO PLACEHOLDER (sección Nosotros)
   ========================================================================== */
.team-photo-slot{
  position:relative; margin-top:40px; border-radius:22px; overflow:hidden; height:320px;
  box-shadow:var(--shadow-lg);
}
.team-photo-slot img{ width:100%; height:100%; object-fit:cover; filter:saturate(.75) brightness(.7); }
.team-photo-overlay{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:8px; padding:24px; background:linear-gradient(180deg, rgba(14,48,73,.35), rgba(14,48,73,.72));
}
.team-photo-icon{
  width:56px; height:56px; border-radius:50%; border:2px dashed rgba(255,255,255,.7);
  display:flex; align-items:center; justify-content:center; color:#fff; margin-bottom:6px;
}
.team-photo-icon svg{ width:26px; height:26px; }
.team-photo-overlay strong{ color:#fff; font-family:var(--font-head); font-size:1.15rem; }
.team-photo-overlay span{ color:#e6eef2; font-size:.86rem; max-width:420px; line-height:1.5; }

@media (min-width: 720px){
  .team-photo-slot{ height:380px; }
}

/* ==========================================================================
   PARTNER / TOURISM AUTHORITY LOGOS (footer)
   ========================================================================== */
.partners-strip{
  padding:30px 0; margin-top:8px; border-top:1px solid rgba(14,48,73,.1);
  border-bottom:1px solid rgba(14,48,73,.1);
  display:flex; flex-direction:column; align-items:center; gap:16px; text-align:center;
}
.partners-label{
  font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; font-weight:700; color:var(--muted);
}
.partners-logos{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:16px; }
.partner-badge{
  display:flex; align-items:center; justify-content:center; background:#fff; border:1px solid rgba(14,48,73,.08);
  border-radius:12px; padding:12px 18px; height:56px; box-shadow:var(--shadow);
}
.partner-badge img{ max-height:28px; max-width:150px; width:auto; height:auto; object-fit:contain; }
.partner-badge.dark{ background:var(--navy); border-color:var(--navy); }
.partner-badge.dark img{ max-height:32px; }

/* ==========================================================================
   COTIZACIONES — formulario grupos & empresas
   ========================================================================== */
.quote-wrap{ max-width:760px; margin:0 auto 56px; }
.quote-card{
  background:#fff; border:1px solid rgba(14,48,73,.09); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:34px 30px;
}
.quote-grid{ display:grid; grid-template-columns:1fr; gap:18px; }
@media (min-width:640px){ .quote-grid{ grid-template-columns:1fr 1fr; } .quote-field.full{ grid-column:1 / -1; } }
.quote-field{ display:flex; flex-direction:column; gap:7px; }
.quote-field label{
  font-size:.78rem; letter-spacing:.06em; text-transform:uppercase;
  font-weight:700; color:var(--navy);
}
.quote-field label .req{ color:var(--coral); }
.quote-field input,
.quote-field select,
.quote-field textarea{
  font-family:var(--font-body); font-size:.98rem; color:var(--ink);
  background:var(--sand); border:1.5px solid rgba(14,48,73,.12);
  border-radius:var(--radius-sm); padding:13px 14px; width:100%;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.quote-field textarea{ min-height:132px; resize:vertical; }
.quote-field input:focus,
.quote-field select:focus,
.quote-field textarea:focus{
  outline:none; background:#fff; border-color:var(--turquoise);
  box-shadow:0 0 0 4px rgba(31,182,201,.15);
}
.quote-field input::placeholder, .quote-field textarea::placeholder{ color:#9db0bd; }
.quote-field.invalid input,
.quote-field.invalid textarea{ border-color:#e05252; background:#fff6f6; }
.quote-error{ font-size:.8rem; color:#c0392b; display:none; }
.quote-field.invalid .quote-error{ display:block; }
.quote-actions{ margin-top:26px; text-align:center; }
.quote-actions .btn{ width:100%; justify-content:center; }
@media (min-width:640px){ .quote-actions .btn{ width:auto; } }
.quote-note{
  margin-top:14px; font-size:.86rem; color:var(--muted); line-height:1.6; text-align:center;
}
.quote-note a{ color:var(--navy); font-weight:600; }

/* ==========================================================================
   TEAM PHOTO CAROUSEL (Nosotros)
   ========================================================================== */
.team-carousel{ position:relative; margin:0 auto 46px; max-width:980px; }
.team-carousel .carousel-track{ gap:14px; }
.team-slide{
  position:relative; flex:none; width:min(78vw, 460px); aspect-ratio:4 / 3;
  border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); margin:0;
}
.team-slide img{ width:100%; height:100%; object-fit:cover; display:block; }
.team-slide figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:26px 18px 14px; color:#fff;
  font-size:.9rem; font-weight:600;
  background:linear-gradient(180deg, transparent, rgba(14,48,73,.82));
}
.team-carousel-note{
  max-width:620px; margin:0 auto 46px; text-align:center;
  font-size:.88rem; color:var(--muted); line-height:1.6;
}