/* =========================================================================
   MIAMI · CRUCERO · NUEVA YORK — Smile Travel
   Web GENERADA desde itinerario.json (render genera-web-viaje).
   Esqueleto FIJO (calcado de la web de Tailandia) + PALETA "Del Caribe a la
   Gran Manzana": base noche-océano, acento coral/flamingo (neón Art Déco de
   Miami) y acento turquesa (mar Caribe / La Habana). Legibilidad con scrim.
   Los 7 roles salen de viaje.tema.paleta; el resto del CSS los referencia.
   Forma ADAPTATIVA: home + una página por parada (viaje pequeño).
   ========================================================================= */

:root{
  /* ---- PALETA DEL VIAJE (viaje.tema.paleta) — los 7 roles fijos ---- */
  --bg:#0a0f1d;
  --text:#f4f1ea;
  --text-dim:#9fb0c3;
  --accent:#ff7a6b;
  --accent-2:#18c3c9;
  --surface:#131a2c;
  --scrim:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.72) 100%);

  /* ---- variables internas del esqueleto, re-vinculadas a la paleta ----
     (mismo CSS de siempre; sólo cambia de dónde sale cada color) */
  --teal:var(--accent-2);
  --teal-deep:var(--accent-2);
  --teal-dark:#0e7e83;
  --ink:var(--surface);
  --ink-soft:var(--text-dim);
  --blue:var(--accent);
  --blue-dark:#d4564a;
  --cream:#111831;
  --cream-deep:#080d18;
  --white:var(--text);
  --line:rgba(244,241,234,.45);
  --radius:22px;
  --serif:'Playfair Display',Georgia,'Times New Roman',serif;

  /* base oscura del scrim/gradientes (noche-océano = --bg en rgb) */
  --d:10,15,29;       /* = --bg #0a0f1d en rgb, para los rgba(var(--d),a) */
  --accent-rgb:255,122,107;
  --accent2-rgb:24,195,201;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--bg);color:var(--text);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;line-height:1.55;
}
h1,h2,h3,.display{font-family:'Outfit',sans-serif;letter-spacing:-.02em;line-height:1.02}
img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}
.wrap{width:min(1180px,92vw);margin-inline:auto}

/* ====================================================== HERO ====================================================== */
.stage{padding:16px}
.hero{
  position:relative;height:calc(100svh - 32px);min-height:560px;
  border-radius:var(--radius);overflow:hidden;
  box-shadow:0 40px 80px -30px rgba(0,0,0,.55);
  background:var(--teal-dark);
}
.slide .grad,.hero>.grad{position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(90deg,rgba(var(--d),.82) 0%,rgba(var(--d),.5) 38%,rgba(var(--d),.14) 62%,rgba(var(--d),.34) 100%),
    linear-gradient(to top,rgba(var(--d),.6),transparent 45%);
}

/* top bar */
.topbar{position:absolute;top:0;left:0;right:0;z-index:5;
  display:flex;align-items:center;justify-content:space-between;
  padding:clamp(16px,2.4vw,30px) clamp(18px,3vw,40px);color:var(--text);
}
.logo{display:flex;align-items:center;gap:.6em;font-family:'Outfit';font-weight:800;font-size:1.15rem;letter-spacing:.01em;color:var(--text)}
.logo .mark{width:32px;height:32px;border-radius:9px;background:linear-gradient(135deg,var(--accent),var(--blue-dark));display:grid;place-items:center;flex-shrink:0}
.logo .mark svg{width:18px;height:18px;color:var(--bg)}
.logo small{display:block;font-family:'Outfit';font-weight:600;font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;opacity:.7;margin-top:1px}
.logo .logo-txt{display:flex;flex-direction:column;line-height:1}
.menu{display:none;gap:2rem;font-family:'Outfit';font-weight:600;font-size:.95rem}
.menu a{opacity:.85;transition:opacity .2s;position:relative}
.menu a:hover{opacity:1}
.menu a::after{content:"";position:absolute;left:0;bottom:-6px;height:2px;width:0;background:var(--text);transition:width .25s}
.menu a:hover::after{width:100%}
.topright{display:flex;align-items:center;gap:.9rem;font-family:'Outfit';font-weight:600;font-size:.9rem}
.topright .who{display:none}
@media(min-width:880px){.menu{display:flex}.topright .who{display:block}}

/* hero content (centro) del HOME del viaje */
.hcontent{position:absolute;z-index:5;left:clamp(20px,7vw,108px);top:50%;transform:translateY(-50%);
  color:var(--text);max-width:min(92%,640px)}
.kick{display:inline-block;font-family:'Outfit';font-weight:600;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;
  opacity:.92;border:1px solid rgba(244,236,224,.45);border-radius:999px;padding:.45em 1em;margin-bottom:1.1rem}
.dest-name{font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(3rem,9vw,5.8rem);text-shadow:0 8px 40px rgba(0,0,0,.45);line-height:1.02}
.dest-sub{font-size:clamp(.98rem,2.4vw,1.18rem);max-width:46ch;margin:1.1rem 0 .6rem;color:rgba(244,236,224,.92)}
.dest-client{font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(1.15rem,3vw,1.5rem);color:var(--accent);margin:.4rem 0 1.7rem}
.hero-cta{display:flex;flex-wrap:wrap;gap:.8rem}
.explore{display:inline-flex;align-items:center;gap:.7em;font-family:'Outfit';font-weight:700;font-size:1rem;
  background:var(--blue);color:var(--bg);padding:1.05em 2em;border-radius:14px;cursor:pointer;border:none;
  box-shadow:0 16px 34px -14px rgba(var(--accent-rgb),.9);transition:transform .25s,background .25s}
.explore:hover{transform:translateY(-3px);background:var(--blue-dark)}
.explore svg{width:18px;height:18px;transition:transform .25s}
.explore:hover svg{transform:translateX(4px)}
.explore.ghost{background:rgba(244,236,224,.1);color:var(--text);border:1.5px solid rgba(244,236,224,.5);box-shadow:none;backdrop-filter:blur(6px)}
.explore.ghost:hover{background:rgba(244,236,224,.2)}

@media(max-width:879px){
  .hero:not(.parada){height:auto;min-height:calc(100svh - 32px);
    display:flex;flex-direction:column;justify-content:flex-end;
    padding:clamp(74px,13vh,104px) clamp(18px,5vw,34px) clamp(48px,8vh,72px)}
  .hcontent{position:static;transform:none;max-width:none}
  .hero-cta .explore{flex:1 1 auto;justify-content:center}
}

/* ====================================================== SECTIONS (home) ====================================================== */
.section{padding:clamp(70px,11vw,130px) 0}
.eyebrow{display:inline-block;font-family:'Outfit';font-weight:700;text-transform:uppercase;letter-spacing:.16em;
  font-size:.72rem;color:var(--teal-deep);background:rgba(var(--accent2-rgb),.14);padding:.5em 1.1em;border-radius:999px}
.s-head h2{font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(2rem,6vw,3.4rem);margin:.4em 0 .3em;color:var(--text);line-height:1.04}
.s-head p{color:var(--ink-soft);max-width:54ch;font-size:1.05rem}

.reveal{opacity:0;transform:translateY(34px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}

footer{background:var(--ink);color:rgba(244,236,224,.55);text-align:center;padding:2.6rem 1.2rem;font-size:.85rem;line-height:1.7}
footer b{color:var(--text);font-family:'Outfit'}
footer a{color:var(--accent-2)}
footer .fcredit{display:block;max-width:62ch;margin:1rem auto 0;font-size:.74rem;color:rgba(244,236,224,.38)}
footer .fbrand{display:inline-flex;align-items:center;gap:.5em;font-family:'Outfit';font-weight:800;color:var(--text);font-size:1.05rem;margin-bottom:.6rem}
footer .fbrand .mark{width:26px;height:26px;border-radius:8px;background:linear-gradient(135deg,var(--accent),var(--blue-dark));display:grid;place-items:center}
footer .fbrand .mark svg{width:15px;height:15px;color:var(--bg)}

/* =========================================================================
   HOME: TARJETAS DE ZONA (2 grandes paneles de entrada)
   ========================================================================= */
.zones{background:var(--ink);position:relative;overflow:hidden;padding:clamp(64px,9vw,120px) 0}
.zones-intro{width:min(1180px,92vw);margin:0 auto clamp(28px,4vw,52px)}
.zones-intro h2{font-family:var(--serif);font-style:italic;font-weight:500;color:var(--text);
  font-size:clamp(2.2rem,6vw,3.8rem);margin-top:.35rem;line-height:1.04}
.zones-intro p{color:var(--ink-soft);max-width:56ch;margin-top:.8rem;font-size:1.05rem}
.zonegrid{width:min(1180px,92vw);margin:0 auto;display:grid;grid-template-columns:1fr;gap:18px}
@media(min-width:860px){.zonegrid{grid-template-columns:1fr 1fr}}
.zonecard{position:relative;display:block;min-height:clamp(380px,52vw,520px);border-radius:24px;overflow:hidden;
  box-shadow:0 36px 70px -34px rgba(0,0,0,.8);color:var(--text)}
.zonecard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .9s}
.zonecard:hover img{transform:scale(1.06)}
.zonecard .zc-ov{position:absolute;inset:0;
  background:linear-gradient(to top,rgba(var(--d),.92) 0%,rgba(var(--d),.42) 45%,rgba(var(--d),.18) 100%);transition:opacity .4s}
.zonecard:hover .zc-ov{opacity:.9}
.zonecard .zc-inner{position:relative;z-index:2;height:100%;min-height:inherit;display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(24px,4vw,42px)}
.zonecard .zc-kick{font-family:'Outfit';font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:.74rem;
  color:rgba(244,236,224,.85)}
.zonecard .zc-name{font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(1.9rem,4.5vw,2.9rem);line-height:1.04;margin:.45rem 0 .9rem}
.zonecard .zc-stops{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.2rem}
.zonecard .zc-stops span{font-family:'Outfit';font-weight:600;font-size:.78rem;color:var(--text);
  background:rgba(244,236,224,.14);border:1px solid rgba(244,236,224,.22);padding:.4em .9em;border-radius:999px;backdrop-filter:blur(4px)}
.zonecard .zc-go{display:inline-flex;align-items:center;gap:.5em;align-self:flex-start;
  font-family:'Outfit';font-weight:700;font-size:.95rem;color:var(--text);
  border-bottom:1.5px solid rgba(244,236,224,.5);padding-bottom:.2em;transition:gap .25s,border-color .25s}
.zonecard:hover .zc-go{gap:.9em;border-color:var(--text)}
.zonecard .zc-go svg{width:16px;height:16px}

/* =========================================================================
   HOME: BANDA COMERCIAL DISCRETA (colocacion: discreta-final, Ley 6)
   ========================================================================= */
.deal{background:var(--bg);padding:clamp(48px,7vw,80px) 0 clamp(36px,5vw,60px)}
.deal .wrap{display:flex;flex-direction:column;gap:1.6rem}
.deal-band{display:grid;grid-template-columns:1fr;gap:1.4rem;align-items:center;
  background:var(--surface);border:1px solid rgba(244,236,224,.1);border-radius:22px;
  padding:clamp(1.6rem,3vw,2.4rem) clamp(1.6rem,3.4vw,2.8rem)}
@media(min-width:760px){.deal-band{grid-template-columns:auto 1fr auto;gap:2.4rem}}
.deal-price{display:flex;flex-direction:column;gap:.15rem}
.deal-price .dp-from{font-family:'Outfit';font-weight:600;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-2)}
.deal-price .dp-num{font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(2.4rem,6vw,3.4rem);color:var(--text);line-height:1}
.deal-price .dp-base{color:var(--ink-soft);font-size:.88rem}
.deal-note{color:var(--ink-soft);font-size:.95rem;max-width:42ch}
.deal-note b{color:var(--text);font-family:'Outfit';font-weight:700}
.deal-actions{display:flex;flex-wrap:wrap;gap:.7rem}
.deal details{background:var(--surface);border:1px solid rgba(244,236,224,.1);border-radius:16px;overflow:hidden}
.deal details+details{margin-top:.7rem}
.deal summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:.8rem;
  padding:1.05rem 1.4rem;font-family:'Outfit';font-weight:700;font-size:1rem;color:var(--text)}
.deal summary::-webkit-details-marker{display:none}
.deal summary .chev{margin-left:auto;width:18px;height:18px;color:var(--accent-2);transition:transform .25s}
.deal details[open] summary .chev{transform:rotate(90deg)}
.deal summary .stag{font-family:'Outfit';font-weight:600;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--bg);background:var(--accent-2);border-radius:6px;padding:.2em .55em}
.deal summary .stag.no{background:var(--blue)}
.deal summary .stag.co{background:rgba(244,236,224,.2);color:var(--text)}
.deal .dcontent{padding:0 1.4rem 1.3rem;color:var(--ink-soft);font-size:.95rem}
.deal .dcontent ul{list-style:none;display:flex;flex-direction:column;gap:.6rem}
.deal .dcontent li{display:grid;grid-template-columns:auto 1fr;gap:.7rem;align-items:start}
.deal .dcontent li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent-2);margin-top:.55em}
.deal .dcontent li.no::before{background:var(--blue)}
.deal-disc{color:rgba(244,236,224,.42);font-size:.8rem;text-align:center;max-width:60ch;margin:.4rem auto 0}

/* =========================================================================
   PÁGINAS DE ZONA — hero de zona + secciones de parada apiladas
   ========================================================================= */
.phero{position:relative;min-height:min(72svh,640px);display:flex;align-items:flex-end;overflow:hidden;color:var(--text);border-radius:0}
.phero>img,.phero>video.bgvideo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.phero .pov{position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(var(--d),.9),rgba(var(--d),.28) 55%,rgba(var(--d),.42))}
.phero .pin{position:relative;z-index:2;padding:clamp(28px,6vw,72px) clamp(20px,5vw,52px);width:min(1180px,100%);margin-inline:auto}
.peyebrow{display:inline-block;font-family:'Outfit';font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-size:.78rem;
  background:rgba(244,236,224,.16);border:1px solid rgba(244,236,224,.35);padding:.45em 1.05em;border-radius:999px}
.phero h1{font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(2.6rem,9vw,5.4rem);margin:.55rem 0 .35rem;text-shadow:0 8px 40px rgba(0,0,0,.45);line-height:1.04}
.phero .psub{max-width:50ch;color:rgba(244,236,224,.92);font-size:clamp(1rem,2.4vw,1.12rem)}

/* topbar de zona (volver + encadenar) */
.topbar .tb-back{display:inline-flex;align-items:center;gap:.45em;font-family:'Outfit';font-weight:700;font-size:.92rem;color:var(--text);transition:gap .2s}
.topbar .tb-back:hover{gap:.75em}
.topbar .tb-back svg{width:17px;height:17px}

/* ---- SECCIÓN DE PARADA (apilada). Tres tratamientos por tier ---- */
.stopsec{position:relative}
.stopsec+.stopsec{border-top:1px solid rgba(244,236,224,.08)}

/* tier HÉROE: a pantalla completa con vídeo en bgstack + flashcards */
.stopsec.heroe{height:auto}
.stopsec.heroe .pstage{padding:16px}
.stopsec.heroe .hero.parada{display:block;position:relative;height:calc(100svh - 32px);min-height:600px;
  border-radius:var(--radius);overflow:hidden;box-shadow:0 40px 80px -30px rgba(0,0,0,.55);background:var(--teal-dark)}

/* tier NORMAL: cabecera sobre poster estático + tarjetas de actividad */
.stopsec.normal .nhead{position:relative;min-height:clamp(320px,46vw,440px);display:flex;align-items:flex-end;overflow:hidden;color:var(--text)}
.stopsec.normal .nhead>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.stopsec.normal .nhead .pov{position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(var(--d),.92),rgba(var(--d),.3) 60%,rgba(var(--d),.45))}
.stopsec.normal .nhead .pin{position:relative;z-index:2;padding:clamp(26px,5vw,56px) clamp(20px,5vw,52px);width:min(1180px,100%);margin-inline:auto}
.stopsec.normal .nhead h2{font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(2rem,6vw,3.4rem);line-height:1.04;text-shadow:0 8px 40px rgba(0,0,0,.45)}
.stopsec.normal .nbody{background:var(--cream);padding:clamp(40px,6vw,72px) 0}

/* tier MENOR: compacta */
.stopsec.menor{background:var(--cream-deep);padding:clamp(40px,6vw,72px) 0}
.stopsec.menor .mhead{display:flex;align-items:center;gap:1.2rem;margin-bottom:1.6rem;flex-wrap:wrap}
.stopsec.menor .mhead .mthumb{width:84px;height:84px;border-radius:18px;overflow:hidden;flex-shrink:0;box-shadow:0 16px 34px -20px rgba(0,0,0,.7)}
.stopsec.menor .mhead .mthumb img{width:100%;height:100%;object-fit:cover}

/* cabecera de zona-interior reutilizada */
.skick{display:inline-block;font-family:'Outfit';font-weight:700;text-transform:uppercase;letter-spacing:.16em;font-size:.72rem;
  color:var(--teal-deep);background:rgba(var(--accent2-rgb),.14);padding:.5em 1.1em;border-radius:999px}
.stitle{font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(1.6rem,4.5vw,2.4rem);margin:.5rem 0 .3rem}
.slead{color:var(--ink-soft);max-width:58ch;margin-bottom:2rem}

/* hero de parada (vídeo a pantalla completa + flashcards abajo) */
.hero .vscrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(var(--d),.74),rgba(var(--d),.3) 46%,rgba(var(--d),.14) 72%),
            linear-gradient(to top,rgba(var(--d),.9),rgba(var(--d),.16) 52%)}
.phero-content{position:absolute;z-index:5;left:clamp(20px,7vw,108px);top:clamp(92px,16vh,150px);max-width:min(92%,580px);color:var(--text)}
.phero-content .kick{display:inline-block;font-family:'Outfit';font-weight:600;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;
  opacity:.92;border:1px solid rgba(244,236,224,.45);border-radius:999px;padding:.45em 1em;margin-bottom:1rem}
.phero-content h1{font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(2.8rem,8vw,5.2rem);text-shadow:0 8px 40px rgba(0,0,0,.45);line-height:1.04}
.phero-content .psub{font-size:clamp(1rem,2.4vw,1.18rem);max-width:44ch;margin:.9rem 0 1.1rem;color:rgba(244,236,224,.92)}
.phero-content .phint{display:inline-flex;align-items:center;gap:.5em;font-family:'Outfit';font-weight:600;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(244,236,224,.85)}
.phero-content .phint svg{width:15px;height:15px}

.hero-cards{position:absolute;z-index:5;left:0;right:0;bottom:clamp(12px,4vh,40px);
  display:flex;gap:14px;justify-content:flex-start;align-items:flex-end;
  padding:40px clamp(16px,4vw,40px) 8px;overflow-x:auto;overflow-y:visible;scrollbar-width:none;scroll-snap-type:x mandatory}
.hero-cards::-webkit-scrollbar{display:none}
@media(min-width:1100px){.hero-cards{justify-content:center}}
.hcard{position:relative;flex:0 0 auto;width:clamp(150px,15vw,196px);height:clamp(196px,26vh,256px);
  border-radius:18px;overflow:hidden;cursor:pointer;border:none;padding:0;scroll-snap-align:center;will-change:transform;
  box-shadow:0 22px 44px -22px rgba(0,0,0,.75);transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s}
.hcard:hover,.hcard:focus-visible{transform:translateY(-20px) scale(1.06);box-shadow:0 44px 64px -22px rgba(0,0,0,.85);outline:none}
.hcard img{width:100%;height:100%;object-fit:cover;border-radius:inherit;transition:transform .6s}
.hcard:hover img{transform:scale(1.07)}
.hcard .hc-grad{position:absolute;inset:0;z-index:1;border-radius:inherit;background:linear-gradient(to top,rgba(var(--d),.84),transparent 58%)}
.hcard .hc-tag{position:absolute;top:11px;left:11px;z-index:2;font-family:'Outfit';font-weight:700;font-size:.66rem;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink);background:rgba(244,236,224,.92);padding:.35em .7em;border-radius:999px}
.hcard .hc-name{position:absolute;left:13px;right:13px;bottom:12px;z-index:2;color:var(--text);
  font-family:var(--serif);font-style:italic;font-weight:500;font-size:1.22rem;line-height:1.05;text-align:left}

/* enlace directo a la siguiente / anterior parada (borde del hero) */
.next-parada{position:absolute;z-index:6;right:clamp(12px,2vw,30px);top:calc(50% - 44px);transform:translateY(-50%);
  display:flex;align-items:center;gap:.75rem;color:var(--text)}
.next-parada .np-lab,.prev-parada .np-lab{display:flex;flex-direction:column;align-items:flex-end;line-height:1.12;text-align:right}
.next-parada .np-lab small,.prev-parada .np-lab small{font-family:'Outfit';font-weight:600;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;opacity:.82}
.next-parada .np-lab b,.prev-parada .np-lab b{font-family:var(--serif);font-style:italic;font-weight:500;font-size:1.18rem}
.next-parada .np-circle,.prev-parada .np-circle{width:56px;height:56px;border-radius:50%;flex-shrink:0;
  border:1.5px solid rgba(244,236,224,.55);background:rgba(244,236,224,.1);backdrop-filter:blur(6px);
  display:grid;place-items:center;transition:background .25s,transform .25s}
.next-parada:hover .np-circle,.prev-parada:hover .np-circle{background:rgba(244,236,224,.22);transform:scale(1.08)}
.next-parada .np-circle svg,.prev-parada .np-circle svg{width:21px;height:21px;transition:transform .25s}
.next-parada:hover .np-circle svg{transform:translateX(2px)}
.prev-parada{position:absolute;z-index:6;right:clamp(12px,2vw,30px);top:calc(50% + 44px);transform:translateY(-50%);
  display:flex;flex-direction:row-reverse;align-items:center;gap:.75rem;color:var(--text)}
.prev-parada:hover .np-circle svg{transform:translateX(-2px)}
@media(max-width:760px){
  .next-parada{top:clamp(64px,11vh,100px);bottom:auto;transform:none}
  .prev-parada{top:clamp(64px,11vh,100px);bottom:auto;right:calc(clamp(12px,2vw,30px) + 66px);transform:none}
  .next-parada .np-lab,.prev-parada .np-lab{display:none}
}

/* ---- tarjetas de actividad para tier NORMAL/MENOR (foto + modal cover) ---- */
.acts-grid{display:grid;grid-template-columns:1fr;gap:1.2rem}
@media(min-width:680px){.acts-grid{grid-template-columns:repeat(2,1fr)}.acts-grid.three{grid-template-columns:repeat(3,1fr)}}
.acard{position:relative;border-radius:20px;overflow:hidden;aspect-ratio:4/3;cursor:pointer;border:none;padding:0;
  box-shadow:0 20px 44px -26px rgba(0,0,0,.7);width:100%;display:block}
.acard img{width:100%;height:100%;object-fit:cover;transition:transform .8s}
.acard:hover img,.acard:focus-visible img{transform:scale(1.07)}
.acard:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px}
.acard .acap{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;padding:1.15rem;
  background:linear-gradient(to top,rgba(var(--d),.86),transparent 58%);color:var(--text);text-align:left}
.acard .acap .at{font-family:'Outfit';font-weight:700;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-2);margin-bottom:.3rem}
.acard .acap b{font-family:var(--serif);font-style:italic;font-weight:500;font-size:1.2rem;line-height:1.08}

/* =========================================================================
   SECCIÓN "EL PLAN" — fichas de actividad que fluyen (ADAPTATIVO por densidad)
   Sustituye a las flashcards flotando en el hero: hero limpio (impacto) +
   fichas debajo, en rejilla que se ve bien con 1, 2 o muchas actividades.
   ========================================================================= */
.plan{background:var(--bg);padding:clamp(44px,6vw,80px) 0}
.plan .slead{margin-bottom:1.6rem}
/* pista de scroll en el hero limpio (invita a bajar al plan) */
.phero-scroll{position:absolute;z-index:6;left:50%;transform:translateX(-50%);bottom:clamp(16px,4vh,34px);
  display:inline-flex;flex-direction:column;align-items:center;gap:.35rem;color:var(--text);
  font-family:'Outfit';font-weight:600;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;opacity:.9}
.phero-scroll svg{width:20px;height:20px;animation:bob 1.9s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
/* 1 actividad → ficha ANCHA editorial (no un cuadradito perdido) */
.acard.feature{aspect-ratio:16/10}
@media(min-width:760px){.acard.feature{aspect-ratio:2.5/1}}
.acard.feature .acap{padding:clamp(1.2rem,3vw,2rem)}
.acard.feature .acap .at{font-size:.7rem}
.acard.feature .acap b{font-size:clamp(1.5rem,3.6vw,2.3rem)}

/* ---- bloques de transporte + alojamiento dentro de cada parada ---- */
.stopsec .pmove{margin-top:2rem}
.minigrid{display:grid;grid-template-columns:1fr;gap:1rem;margin-top:1.2rem}
@media(min-width:700px){.minigrid{grid-template-columns:repeat(2,1fr)}.minigrid.three{grid-template-columns:repeat(3,1fr)}}
.tcard{position:relative;border-radius:18px;overflow:hidden;min-height:clamp(210px,28vh,264px);
  display:flex;align-items:flex-end;color:var(--text);box-shadow:0 26px 50px -26px rgba(0,0,0,.72)}
.tcard-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;background:var(--teal-dark);transition:transform .9s}
.tcard:hover .tcard-media{transform:scale(1.05)}
.tcard-scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,rgba(var(--d),.94),rgba(var(--d),.34) 56%,rgba(var(--d),.12))}
.tcard-body{position:relative;z-index:2;padding:clamp(18px,2.4vw,26px)}
.tcard-body .tc-ic{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:50%;margin-bottom:.7rem;
  border:1.5px solid rgba(244,236,224,.5);background:rgba(244,236,224,.12);backdrop-filter:blur(4px)}
.tcard-body .tc-ic svg{width:18px;height:18px}
.tcard-body .tc-tag{display:block;font-family:'Outfit';font-weight:700;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-2)}
.tcard-body h4{font-family:var(--serif);font-style:italic;font-weight:500;font-size:1.4rem;margin:.15rem 0 .35rem;line-height:1.12}
.tcard-body p{font-size:.94rem;color:rgba(244,236,224,.9);max-width:34ch;line-height:1.45}
.tcard-body .legs{display:flex;flex-direction:column;gap:.2rem;margin-top:.5rem;font-size:.88rem;color:rgba(244,236,224,.82)}
.tcard-body .legs span b{font-family:'Outfit';font-weight:700;color:var(--text);font-style:normal}

/* línea de transporte NO épico (traslado): callout sobrio */
.callout{display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:start;
  background:rgba(var(--accent-rgb),.1);border:1px solid rgba(var(--accent-rgb),.28);border-radius:16px;padding:1.1rem 1.3rem;margin-top:1.2rem}
.callout .ci{width:34px;height:34px;border-radius:10px;background:var(--blue);display:grid;place-items:center;flex-shrink:0}
.callout .ci svg{width:19px;height:19px;color:var(--bg)}
.callout b{font-family:'Outfit';font-weight:700}
.callout p{color:var(--ink-soft);font-size:.93rem;margin-top:.15rem}

/* alojamiento SECUNDARIO (todos): "Duermes en…", sin carrusel */
.stay-line{display:grid;grid-template-columns:auto 1fr;gap:1.1rem;align-items:center;
  background:rgba(244,236,224,.05);border:1px solid rgba(244,236,224,.14);border-radius:18px;
  padding:1.2rem 1.4rem;margin-top:1.2rem;color:var(--text)}
.stay-line .sl-ic{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;flex-shrink:0;background:rgba(var(--accent2-rgb),.16)}
.stay-line .sl-ic svg{width:22px;height:22px;color:var(--accent-2)}
.stay-line .sl-tag{font-family:'Outfit';font-weight:700;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-2)}
.stay-line h4{font-family:var(--serif);font-style:italic;font-weight:500;font-size:1.3rem;margin:.1rem 0 .25rem;line-height:1.1}
.stay-line p{color:rgba(244,236,224,.82);font-size:.92rem;line-height:1.45}

/* régimen de comidas: iconito en cabecera de la parada */
.meals{display:inline-flex;align-items:center;gap:.5em;font-family:'Outfit';font-weight:600;font-size:.82rem;
  color:var(--text);background:rgba(244,236,224,.08);border:1px solid rgba(244,236,224,.14);
  padding:.4em .9em;border-radius:999px;margin-top:1rem}
.meals svg{width:15px;height:15px;color:var(--accent-2)}

/* =========================================================================
   MODAL de flashcard (compartido por página)
   ========================================================================= */
.cmodal{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;perspective:1700px;
  padding:clamp(14px,4vw,40px);background:rgba(var(--d),.5);backdrop-filter:blur(7px);
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .35s ease,visibility .35s ease}
.cmodal.open{opacity:1;visibility:visible;pointer-events:auto}
.cmodal-box{position:relative;width:min(75vw,920px);height:min(75vh,640px);border-radius:26px;overflow:hidden;
  box-shadow:0 50px 110px -30px rgba(0,0,0,.85);transform-origin:center 80%;
  transform:rotateX(16deg) translateY(46px) scale(.93);opacity:0;
  transition:transform .8s cubic-bezier(.2,.8,.2,1),opacity .6s ease}
.cmodal.open .cmodal-box{transform:rotateX(0deg) translateY(0) scale(1);opacity:1}
.cmodal-bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:blur(10px) brightness(.6);transform:scale(1.14)}
.cmodal-tint{position:absolute;inset:0;background:linear-gradient(150deg,rgba(var(--accent2-rgb),.3),rgba(var(--d),.66))}
.cmodal-inner{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:center;gap:.7rem;
  padding:clamp(28px,5vw,68px);color:var(--text)}
.cmodal-inner .cm-tag{font-family:'Outfit';font-weight:700;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-2)}
.cmodal-inner h3{font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(2rem,5vw,3.2rem);line-height:1.05}
.cmodal-inner p{font-size:clamp(1.05rem,2.4vw,1.3rem);line-height:1.55;color:rgba(244,236,224,.92);max-width:42ch}
.cmodal-close{position:absolute;top:14px;right:14px;z-index:3;width:44px;height:44px;border-radius:50%;cursor:pointer;
  border:1.5px solid rgba(244,236,224,.5);background:rgba(var(--d),.35);color:var(--text);font-size:1.4rem;line-height:1;
  display:grid;place-items:center;transition:background .25s,transform .25s}
.cmodal-close:hover{background:rgba(var(--d),.6);transform:scale(1.06)}
@media(max-width:760px){.cmodal-box{width:92vw;height:auto;max-height:85vh;min-height:60vh}}

/* Modal enriquecido: foto nítida + datos (data-rich). Si no hay foto_modal, el JS deja cm-photo vacío y se oculta. */
.cm-body{display:flex;flex-direction:column;gap:.7rem}
.cm-photo{display:none}
.cm-facts{display:none}
.cmodal.rich .cmodal-box{width:min(88vw,1000px);height:min(80vh,600px)}
.cmodal.rich .cmodal-inner{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(22px,3vw,46px);align-items:center;padding:clamp(22px,3.6vw,52px)}
.cmodal.rich.nophoto .cmodal-inner{grid-template-columns:1fr}
.cmodal.rich .cmodal-inner h3{font-size:clamp(1.8rem,3.4vw,2.6rem)}
.cmodal.rich .cm-body p{font-size:clamp(1rem,1.8vw,1.12rem);max-width:42ch}
.cmodal.rich:not(.nophoto) .cm-photo{display:block;border-radius:18px;overflow:hidden;aspect-ratio:4/3;box-shadow:0 30px 60px -28px rgba(0,0,0,.85)}
.cmodal.rich .cm-photo img{width:100%;height:100%;object-fit:cover;display:block}
.cmodal.rich .cm-facts{display:flex;flex-direction:column;gap:.55rem;margin-top:.4rem}
.cm-facts .cm-fact{display:grid;grid-template-columns:118px 1fr;gap:.8rem;align-items:baseline}
.cm-facts .cf-k{font-family:'Outfit';font-weight:700;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-2)}
.cm-facts .cf-v{color:rgba(244,236,224,.92);font-size:.98rem}
@media(max-width:760px){
  .cmodal.rich .cmodal-box{width:92vw;height:auto;max-height:88vh}
  .cmodal.rich .cmodal-inner{grid-template-columns:1fr;gap:16px;overflow-y:auto}
  .cmodal.rich .cm-photo{aspect-ratio:16/10}
  .cm-facts .cm-fact{grid-template-columns:100px 1fr}
}

/* =========================================================================
   VÍDEO DE FONDO + crossfade
   ========================================================================= */
.bgvideo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;background:var(--teal-dark)}
.bgstack{position:absolute;inset:0;z-index:0}
.bgstack .bgvideo{opacity:0;transition:opacity 1.6s ease}
.bgstack .bgvideo.on{opacity:1}

@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
}