/* =========================================================================
   TESORA TOURS · IGUAQUE — Hoja de estilos compartida
   Sistema de diseño: "Oro muisca en el páramo de niebla"
   Ver docs/design-system.md
   ========================================================================= */

*{ margin:0; padding:0; box-sizing:border-box; }

:root{
  /* Oro (acción) */
  --gold:#d6b46b; --gold-soft:#f1d59a; --gold-deep:#b28a3f;
  /* Verde (valor) */
  --green:#9ee6ae; --green-soft:#d7ffe0; --emerald:#46b17f; --green-deep:#2f6b48;
  /* Noche / superficies */
  --ink:#0d130f; --ink-2:#111814;
  --card:rgba(20,26,21,.72); --line:rgba(214,180,107,.20);
  /* Texto */
  --txt:#fff; --txt-soft:rgba(255,255,255,.78); --txt-dim:rgba(255,255,255,.55);
  /* WhatsApp */
  --wa:#25d366;
  /* Gradientes / sombras */
  --grad-gold:linear-gradient(135deg,#f3d89c 0%,#d6b46b 55%,#b28a3f 100%);
  --grad-accent:linear-gradient(90deg,var(--gold),var(--green),var(--gold));
  --shadow-card:0 25px 70px rgba(0,0,0,.55);
  --shadow-gold:0 10px 28px rgba(214,180,107,.28);
  --maxw:1160px;
}

html{ scroll-behavior:smooth; }
body{ font-family:'Inter',sans-serif; background:var(--ink); color:var(--txt); overflow-x:hidden; -webkit-font-smoothing:antialiased; }
img{ display:block; max-width:100%; }
a{ color:inherit; }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 22px; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }

/* NÚMEROS (Outfit, tabular) */
.price, .fact .n, .trust-item .n, .stat .n{
  font-family:'Outfit','Inter',sans-serif; font-variant-numeric:tabular-nums;
}

/* ---------------------------------------------------------------- NAV */
.nav{ position:fixed; top:0; left:0; width:100%; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:16px 26px; transition:.35s; }
.nav.scrolled{ background:rgba(9,13,10,.82); backdrop-filter:blur(14px); border-bottom:1px solid var(--line); padding:12px 26px; }
.brand{ font-family:'Cormorant Garamond',serif; font-size:22px; font-weight:700; color:#fff; display:flex; align-items:center; gap:9px; text-decoration:none; }
.brand span{ color:var(--gold-soft); }
.nav-right{ display:flex; align-items:center; gap:10px; }
.language-switch{ display:flex; gap:6px; }
.lang-btn{ background:rgba(214,180,107,.12); color:var(--gold-soft); border:1px solid rgba(214,180,107,.28); padding:7px 12px; border-radius:999px; cursor:pointer; font-size:11px; font-weight:600; letter-spacing:1px; transition:.25s; }
.lang-btn.active{ background:var(--gold); color:#1a1206; border-color:var(--gold); }
.lang-btn:hover{ background:rgba(214,180,107,.28); }
/* CTA de nav: DORADO (como el backup) */
.nav-cta{ display:inline-flex; align-items:center; gap:8px; padding:9px 18px; border-radius:999px; background:var(--grad-gold); color:#141414; text-decoration:none; font-weight:700; font-size:13px; transition:.25s; box-shadow:var(--shadow-gold); }
.nav-cta:hover{ transform:translateY(-2px); filter:brightness(1.04); }
.nav-cta svg{ width:16px; height:16px; fill:#141414; }

/* ---------------------------------------------------------------- BOTONES */
.btn{ display:inline-flex; align-items:center; gap:10px; padding:16px 30px; border-radius:16px; font-weight:700; font-size:15px; text-decoration:none; cursor:pointer; transition:.3s; border:none; }
/* Primario DORADO */
.btn-gold{ background:var(--grad-gold); color:#141414; box-shadow:var(--shadow-gold); }
.btn-gold:hover{ transform:translateY(-3px); filter:brightness(1.05); }
.btn-gold svg{ width:20px; height:20px; fill:#141414; }
/* Secundario VERDE contorno */
.btn-ghost{ background:rgba(158,230,174,.06); color:var(--green-soft); border:1px solid rgba(158,230,174,.45); font-weight:600; }
.btn-ghost:hover{ background:rgba(158,230,174,.14); transform:translateY(-2px); }
/* WhatsApp verde (para páginas de contacto) */
.btn-wa{ background:var(--wa); color:#04270f; box-shadow:0 12px 30px rgba(37,211,102,.32); }
.btn-wa:hover{ transform:translateY(-3px); box-shadow:0 18px 40px rgba(37,211,102,.4); }
.btn-wa svg{ width:20px; height:20px; fill:#04270f; }

/* ---------------------------------------------------------------- HERO (home) */
.hero{ position:relative; min-height:100svh; display:flex; align-items:center; justify-content:center; text-align:center; padding:110px 22px 70px; overflow:hidden; }
.hero-bg{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(9,13,10,.5) 0%, rgba(9,13,10,.35) 40%, rgba(9,13,10,.94) 100%), url('../img/iguaque3.webp') center/cover no-repeat; transform:scale(1.05); z-index:0; animation:heroZoom 24s ease-in-out infinite alternate; }
@keyframes heroZoom{ from{transform:scale(1.05);} to{transform:scale(1.14);} }
.spores{ position:absolute; inset:0; width:100%; height:100%; z-index:1; pointer-events:none; }
.mist{ position:absolute; inset:-20% -10%; z-index:1; pointer-events:none; overflow:hidden; }
.mist span{ position:absolute; border-radius:50%; filter:blur(60px); opacity:.16; background:radial-gradient(circle, #dff5e2 0%, rgba(158,230,174,0) 70%); }
.mist span:nth-child(1){ width:420px; height:420px; top:10%; left:-8%; animation:drift1 34s ease-in-out infinite; }
.mist span:nth-child(2){ width:520px; height:520px; bottom:-6%; right:-6%; background:radial-gradient(circle,#f1d59a 0%,rgba(214,180,107,0) 70%); opacity:.12; animation:drift2 42s ease-in-out infinite; }
.mist span:nth-child(3){ width:360px; height:360px; top:40%; left:55%; animation:drift1 38s ease-in-out infinite reverse; }
@keyframes drift1{ 0%,100%{transform:translate(0,0);} 50%{transform:translate(60px,-30px);} }
@keyframes drift2{ 0%,100%{transform:translate(0,0);} 50%{transform:translate(-50px,20px);} }

.hero-inner{ max-width:900px; position:relative; z-index:2; }
.hero .badge{ display:inline-block; padding:9px 18px; border-radius:999px; background:rgba(214,180,107,.14); border:1px solid rgba(214,180,107,.34); color:var(--gold-soft); font-size:11.5px; letter-spacing:2.5px; text-transform:uppercase; margin-bottom:22px; backdrop-filter:blur(6px); }
.hero h1{ font-family:'Cormorant Garamond',serif; font-size:clamp(50px, 8.5vw, 96px); line-height:.92; font-weight:700; margin-bottom:12px; text-shadow:0 4px 40px rgba(0,0,0,.55); }
.hero .oracle{ font-family:'Cormorant Garamond',serif; font-style:italic; color:var(--gold-soft); font-size:clamp(18px,2.5vw,24px); line-height:1.4; margin-bottom:16px; text-shadow:0 2px 20px rgba(0,0,0,.5); }
.hero .lede{ max-width:620px; margin:0 auto 18px; font-size:clamp(14px,1.8vw,16px); line-height:1.7; color:rgba(255,255,255,.9); text-shadow:0 2px 14px rgba(0,0,0,.4); }

/* HERO HOST + DOORS */
.hero-host{ margin:6px auto 2px; }
.hero-host img{ width:clamp(84px,13vw,132px); height:auto; margin:0 auto; filter:drop-shadow(0 10px 22px rgba(0,0,0,.5)); animation:floaty 4.5s ease-in-out infinite; }
@keyframes floaty{ 0%,100%{transform:translateY(0) rotate(-1.5deg);} 50%{transform:translateY(-10px) rotate(1.5deg);} }
.door-prompt{ font-family:'Cormorant Garamond',serif; font-style:italic; color:#fff; font-size:clamp(17px,2.3vw,22px); margin-bottom:16px; text-shadow:0 2px 16px rgba(0,0,0,.5); }
.doors{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-bottom:26px; }
.door{ position:relative; min-width:250px; text-align:left; padding:18px 22px; border-radius:18px; background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.28); backdrop-filter:blur(10px); cursor:pointer; color:#fff; transition:.3s; display:flex; align-items:center; gap:14px; text-decoration:none; }
.door:hover{ transform:translateY(-4px); background:rgba(255,255,255,.16); border-color:var(--gold); }
.door.active{ border-color:var(--gold); box-shadow:0 12px 30px rgba(214,180,107,.28); }
.door .dnum{ font-family:'Cormorant Garamond',serif; font-size:30px; color:var(--gold-soft); line-height:1; flex:0 0 auto; }
.door .dk{ font-family:'Cormorant Garamond',serif; font-size:21px; font-weight:700; line-height:1.05; display:block; }
.door .ds{ font-size:12px; color:rgba(255,255,255,.75); margin-top:3px; display:block; }
.door .darrow{ margin-left:auto; color:var(--gold-soft); font-size:20px; transition:.3s; }
.door:hover .darrow{ transform:translateX(4px); }

.stars{ display:inline-flex; align-items:center; gap:10px; font-size:13px; color:var(--txt-soft); }
.stars .s{ color:var(--gold); letter-spacing:2px; font-size:15px; }
.scroll-hint{ position:absolute; bottom:20px; left:50%; transform:translateX(-50%); z-index:2; color:rgba(255,255,255,.55); font-size:11px; letter-spacing:2px; text-transform:uppercase; animation:bob 2s ease-in-out infinite; }
@keyframes bob{ 0%,100%{transform:translate(-50%,0);} 50%{transform:translate(-50%,8px);} }

/* --------------------------------------------------- HERO interior (rutas/contacto) */
.pagehero{ position:relative; padding:130px 22px 60px; text-align:center; overflow:hidden; }
.pagehero-bg{ position:absolute; inset:0; z-index:0; background:linear-gradient(180deg, rgba(9,13,10,.62), rgba(9,13,10,.92)), url('../img/iguaque2.webp') center/cover no-repeat; }
.pagehero > *{ position:relative; z-index:2; }
.breadcrumb{ font-size:12px; color:var(--txt-dim); letter-spacing:1px; margin-bottom:14px; }
.breadcrumb a{ color:var(--gold-soft); text-decoration:none; }
.breadcrumb a:hover{ text-decoration:underline; }
.pagehero h1{ font-family:'Cormorant Garamond',serif; font-size:clamp(38px,6vw,66px); font-weight:700; line-height:1; margin-bottom:14px; text-shadow:0 4px 30px rgba(0,0,0,.5); }
.pagehero p{ max-width:640px; margin:0 auto; color:rgba(255,255,255,.88); font-size:16px; line-height:1.75; }

/* ---------------------------------------------------------------- SPLIT HERO (elige rápido) */
.split{ display:flex; height:100svh; min-height:520px; position:relative; overflow:hidden; }
.split-half{ position:relative; flex:1; min-width:0; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; text-align:center; padding:90px 26px 60px; text-decoration:none; color:#fff; overflow:hidden; transition:flex .55s cubic-bezier(.4,0,.2,1); }
.split-half .sh-bg{ position:absolute; inset:0; z-index:0; background-size:cover; background-position:center; transform:scale(1.05); transition:transform .7s ease; }
.split-half .sh-grad{ position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(9,13,10,.22) 0%, rgba(9,13,10,.5) 55%, rgba(9,13,10,.9) 100%); transition:opacity .4s; }
.split-half > *{ position:relative; z-index:2; }
/* Divisor central dorado→verde (empieza debajo del título/subtítulo) */
.split-divider{ position:absolute; left:50%; top:49%; bottom:3%; width:3px; transform:translateX(-50%); z-index:4; border-radius:3px; background:linear-gradient(180deg, var(--gold) 0%, var(--green) 50%, var(--gold) 100%); box-shadow:0 0 18px rgba(214,180,107,.45), 0 0 26px rgba(158,230,174,.25); pointer-events:none; }
.split-half:hover .sh-bg,.split-half:focus-visible .sh-bg{ transform:scale(1.12); }
.split-half:hover .sh-grad{ background:linear-gradient(180deg, rgba(9,13,10,.12) 0%, rgba(9,13,10,.38) 55%, rgba(9,13,10,.88) 100%); }
.sh-num{ font-family:'Cormorant Garamond',serif; font-size:clamp(28px,4vw,42px); color:var(--gold-soft); line-height:1; margin-bottom:6px; opacity:.9; }
.sh-name{ font-family:'Cormorant Garamond',serif; font-size:clamp(34px,5.2vw,58px); font-weight:700; line-height:1; margin-bottom:12px; text-shadow:0 4px 30px rgba(0,0,0,.55); }
.sh-sub{ max-width:340px; font-size:14.5px; line-height:1.6; color:rgba(255,255,255,.9); margin-bottom:18px; text-shadow:0 2px 14px rgba(0,0,0,.5); }
.sh-price{ font-family:'Outfit',sans-serif; font-weight:700; color:var(--green-soft); font-size:20px; margin-bottom:20px; }
.sh-price small{ font-family:'Inter',sans-serif; font-weight:400; color:var(--gold-soft); font-size:11px; letter-spacing:1px; display:block; margin-top:2px; }
.sh-go{ display:inline-flex; align-items:center; gap:9px; background:var(--grad-gold); color:#141414; font-weight:700; font-size:14px; padding:12px 24px; border-radius:14px; box-shadow:var(--shadow-gold); transition:.3s; }
.split-half:hover .sh-go{ transform:translateY(-3px); filter:brightness(1.05); }
/* Marca / título flotante sobre la división */
.split-brand{ position:absolute; top:0; left:0; width:100%; z-index:5; text-align:center; padding:92px 20px 0; pointer-events:none; }
.split-brand .badge{ display:inline-block; padding:8px 16px; border-radius:999px; background:rgba(9,13,10,.5); border:1px solid rgba(214,180,107,.4); color:var(--gold-soft); font-size:11px; letter-spacing:2.5px; text-transform:uppercase; margin-bottom:14px; backdrop-filter:blur(6px); }
.split-brand h1{ font-family:'Cormorant Garamond',serif; font-size:clamp(38px,6.4vw,82px); line-height:1; font-weight:700; text-shadow:0 6px 44px rgba(0,0,0,.7); margin:0 auto; white-space:nowrap; }
.split-brand .brand-oracle{ font-family:'Cormorant Garamond',serif; font-style:italic; color:var(--gold-soft); font-size:clamp(15px,2vw,20px); line-height:1.4; max-width:540px; margin:14px auto 0; text-shadow:0 2px 18px rgba(0,0,0,.75); }
.split-brand .prompt{ font-family:'Cormorant Garamond',serif; color:#fff; font-size:clamp(16px,2.2vw,22px); margin-top:14px; text-shadow:0 2px 18px rgba(0,0,0,.7); }
.split-scroll{ position:absolute; bottom:16px; left:50%; transform:translateX(-50%); z-index:6; color:rgba(255,255,255,.6); font-size:11px; letter-spacing:2px; text-transform:uppercase; pointer-events:none; animation:bob 2s ease-in-out infinite; }

/* ---------------------------------------------------------------- INTRO (la historia) */
.intro{ background:var(--ink); text-align:center; padding:88px 22px; position:relative; overflow:hidden; }
.intro .mist{ opacity:.7; }
.intro-inner{ max-width:760px; margin:0 auto; position:relative; z-index:2; }
.intro .lede{ font-size:clamp(15px,2vw,17px); line-height:1.85; color:var(--txt-soft); margin-bottom:30px; }
.intro .oracle{ font-family:'Cormorant Garamond',serif; font-style:italic; color:var(--gold-soft); font-size:clamp(22px,3.4vw,32px); line-height:1.4; margin-bottom:22px; }
.intro .strong{ font-family:'Cormorant Garamond',serif; font-size:clamp(26px,4vw,40px); line-height:1.3; font-weight:600; }
.intro .strong b{ color:var(--green-soft); font-weight:700; }

/* ---------------------------------------------------------------- TRUST */
.trust{ background:linear-gradient(180deg,var(--ink),var(--ink-2)); border-bottom:1px solid var(--line); }
.trust .wrap{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; padding-top:34px; padding-bottom:34px; }
.trust-item{ text-align:center; }
.trust-item .n{ font-size:32px; font-weight:700; color:var(--gold-soft); line-height:1; }
.trust-item .l{ font-size:12px; color:var(--txt-dim); margin-top:8px; }

/* ---------------------------------------------------------------- SECTIONS */
section.block{ padding:84px 0; background:var(--ink-2); position:relative; }
section.block.alt{ background:var(--ink); }
.eyebrow{ text-align:center; color:var(--gold-soft); font-size:12px; letter-spacing:3px; text-transform:uppercase; margin-bottom:14px; }
.h2{ text-align:center; font-family:'Cormorant Garamond',serif; font-size:clamp(34px,5vw,52px); font-weight:700; line-height:1.05; margin-bottom:16px; }
.sec-lede{ text-align:center; max-width:640px; margin:0 auto 40px; color:var(--txt-soft); font-size:16px; line-height:1.75; }
.subhead{ text-align:center; font-family:'Cormorant Garamond',serif; font-size:clamp(24px,3.4vw,32px); font-weight:600; margin:54px 0 26px; }

/* FACTS */
.facts{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.fact{ background:var(--card); border:1px solid var(--line); border-left:3px solid var(--gold); border-radius:14px; padding:20px 22px; }
.fact .n{ font-size:23px; font-weight:700; color:var(--green-soft); line-height:1.1; }
.fact .l{ font-size:12.5px; color:var(--txt-dim); margin-top:6px; letter-spacing:.3px; }

/* TIMELINE */
.timeline{ max-width:760px; margin:0 auto; position:relative; }
.timeline::before{ content:""; position:absolute; left:19px; top:8px; bottom:8px; width:2px; background:linear-gradient(180deg,var(--gold),var(--green)); opacity:.5; }
.step{ display:flex; gap:22px; padding-bottom:28px; position:relative; }
.step:last-child{ padding-bottom:0; }
.step .dot{ flex:0 0 auto; width:40px; height:40px; border-radius:50%; background:var(--ink-2); border:2px solid var(--gold); display:flex; align-items:center; justify-content:center; color:var(--gold-soft); font-weight:700; font-size:13px; z-index:1; }
.step .body h4{ font-size:17px; margin-bottom:6px; }
.step .body p{ color:var(--txt-soft); font-size:14.5px; line-height:1.65; }

/* ============================ CINEMÁTICA PANTALLA COMPLETA (Espeletio narra) */
body.cine-lock{ overflow:hidden; }
.cine{ position:fixed; inset:0; z-index:200; display:flex; flex-direction:column; justify-content:flex-end; overflow:hidden; visibility:hidden; opacity:0; transition:opacity .5s ease; }
.cine.open{ visibility:visible; opacity:1; }
.cine-bg{ position:absolute; inset:0; z-index:0; background-size:cover; background-position:center; transform:scale(1.08); animation:heroZoom 22s ease-in-out infinite alternate; }
.cine-veil{ position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(9,13,10,.5) 0%, rgba(9,13,10,.35) 38%, rgba(9,13,10,.96) 100%); }
.cine .mist{ z-index:1; }
.cine-spores{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.cine-close{ position:absolute; top:16px; right:16px; z-index:6; background:rgba(9,13,10,.55); border:1px solid var(--line); color:var(--txt-soft); border-radius:999px; padding:9px 16px; font-size:12px; letter-spacing:1px; cursor:pointer; backdrop-filter:blur(6px); font-family:'Inter',sans-serif; }
.cine-close:hover{ color:#fff; border-color:var(--gold); }

/* ESCENARIO: Espeletio protagonista, grande y centrado */
.cine-stage{ position:relative; z-index:3; flex:1; display:flex; align-items:center; justify-content:center; width:100%; padding:70px 16px 0; cursor:pointer; }
/* GESTO DE ENTRADA (una sola vez por paso; termina en su sitio) */
/* Pivote en la BASE: la rotación del saludo mece desde los pies (saludo
   natural) en vez de girar por el centro, donde parecía negar con la cabeza. */
.cine-charstage{ position:relative; will-change:transform; transform-origin:50% 100%; }
.cine-charstage.enter-hop{ animation:enterHop .6s cubic-bezier(.3,.7,.3,1); }
@keyframes enterHop{ 0%{transform:translateY(24px) scale(.86); opacity:.4;} 55%{transform:translateY(-14px) scale(1.05);} 100%{transform:translateY(0) scale(1); opacity:1;} }
.cine-charstage.enter-pop{ animation:enterPop .5s ease; }
@keyframes enterPop{ 0%{transform:scale(.8); opacity:.4;} 60%{transform:scale(1.06);} 100%{transform:scale(1); opacity:1;} }
.cine-charstage.enter-hello{ animation:enterHello 1.6s ease; }
@keyframes enterHello{ 0%{transform:translateY(30px) scale(.85); opacity:.3;} 24%{transform:translateY(-14px) scale(1.06); opacity:1;} 40%{transform:translateY(0) rotate(-6deg);} 56%{transform:rotate(6deg);} 70%{transform:rotate(-4deg);} 84%{transform:rotate(2.5deg);} 100%{transform:rotate(0);} }
/* RESPIRACIÓN (siempre, EN SU SITIO: solo escala, no se desplaza) */
.cine-charwrap{ animation:cineBreathe 3.8s ease-in-out infinite; will-change:transform; }
@keyframes cineBreathe{ 0%,100%{transform:scale(1);} 50%{transform:scale(1.035);} }
.cine-char{ height:min(52vh,470px); width:auto; display:block; filter:drop-shadow(0 22px 42px rgba(0,0,0,.6)); transform-origin:50% 100%; }
/* Bucle opcional EN SU SITIO (p. ej. golpetear el piso contando los segundos) */
.cine-char.loop-tap{ animation:loopTap .5s ease-in-out infinite; transform-origin:50% 100%; }
@keyframes loopTap{ 0%,100%{transform:scaleY(1);} 50%{transform:scaleY(.965) translateY(2px);} }
/* Caminata EN SU SITIO: bamboleo + rebote (parece dar pasos) */
.cine-char.loop-walk{ animation:loopWalk .64s ease-in-out infinite; transform-origin:50% 100%; }
@keyframes loopWalk{
  0%   { transform:translateY(0)    rotate(-2.6deg); }
  25%  { transform:translateY(-7px) rotate(0deg); }
  50%  { transform:translateY(0)    rotate(2.6deg); }
  75%  { transform:translateY(-7px) rotate(0deg); }
  100% { transform:translateY(0)    rotate(-2.6deg); }
}

/* ---- VFX de la cinemática: reacciones, lluvia, rayos de sol ---- */
/* Capa de partículas (chispas + ondas de impacto) sobre el personaje */
.cine-fx{ position:absolute; inset:0; z-index:5; pointer-events:none; overflow:hidden; }
.cine-spark{ position:absolute; width:9px; height:9px; border-radius:50%;
  background:radial-gradient(circle, #ffffff 0%, var(--green-soft) 55%, rgba(158,230,174,0) 72%);
  box-shadow:0 0 8px rgba(158,230,174,.85); will-change:transform,opacity; }
.cine-spark.gold{ background:radial-gradient(circle, #ffffff 0%, var(--gold-soft) 55%, rgba(214,180,107,0) 72%);
  box-shadow:0 0 10px rgba(240,200,120,.9); }
.cine-ring{ position:absolute; width:120px; height:120px; border-radius:50%;
  border:2px solid rgba(158,230,174,.5); will-change:transform,opacity; }
.cine-ring.gold{ border-color:rgba(214,180,107,.6); box-shadow:0 0 18px rgba(214,180,107,.35); }

/* Lluvia (delante del personaje, debajo del subtítulo) */
.cine-rain{ position:absolute; inset:0; z-index:3; pointer-events:none; overflow:hidden; opacity:0; visibility:hidden; transition:opacity .55s ease, visibility 0s linear .55s; }
.cine-rain.on{ opacity:1; visibility:visible; transition:opacity .55s ease; }
.cine-rain i{ position:absolute; top:-14%; width:2px; border-radius:2px;
  background:linear-gradient(to bottom, rgba(190,214,236,0), rgba(196,220,240,.7));
  animation-name:cineRainFall; animation-timing-function:linear; animation-iteration-count:infinite; }
@keyframes cineRainFall{ to{ transform:translateY(120vh); } }

/* Rayos de sol girando detrás del personaje + halo cálido */
.cine-sun{ position:absolute; inset:0; z-index:2; pointer-events:none; opacity:0; visibility:hidden; transition:opacity .7s ease, visibility 0s linear .7s; }
.cine-sun.on{ opacity:1; visibility:visible; transition:opacity .7s ease; }
.cine-sun .sun-glow{ position:absolute; left:50%; top:28%; width:min(82vw,760px); height:min(82vw,760px); border-radius:50%;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(255,226,152,.5) 0%, rgba(255,212,124,.18) 34%, rgba(255,200,110,0) 62%); }
.cine-sun .sun-rays{ position:absolute; left:50%; top:24%; width:min(120vmax,1400px); height:min(120vmax,1400px);
  transform:translate(-50%,-50%);
  background:repeating-conic-gradient(from 0deg, rgba(255,229,160,.17) 0deg 3deg, rgba(255,229,160,0) 3deg 13deg);
  -webkit-mask:radial-gradient(circle, #000 0%, rgba(0,0,0,.5) 32%, transparent 60%);
          mask:radial-gradient(circle, #000 0%, rgba(0,0,0,.5) 32%, transparent 60%); }
/* Solo gira cuando el paso del sol está activo (evita rasterizar oculto) */
.cine-sun.on .sun-rays{ animation:cineSunSpin 26s linear infinite; }
@keyframes cineSunSpin{ from{ transform:translate(-50%,-50%) rotate(0); } to{ transform:translate(-50%,-50%) rotate(360deg); } }

/* Ambiente según el clima del paso */
.cine.mood-rain .cine-veil{ background:linear-gradient(180deg, rgba(24,40,58,.55) 0%, rgba(16,28,42,.5) 38%, rgba(9,13,18,.96) 100%); }
.cine.mood-rain .cine-char{ filter:drop-shadow(0 22px 42px rgba(0,0,0,.6)) brightness(.92) saturate(.92); }
.cine.mood-sun .cine-char{ filter:drop-shadow(0 22px 46px rgba(90,60,10,.5)) brightness(1.08) saturate(1.06); }

/* SUBTÍTULO tipo película: texto grande, centrado, legible */
.cine-caption{ position:relative; z-index:4; max-width:840px; width:100%; margin:0 auto; padding:0 24px; text-align:center; }
.cine-name{ font-family:'Cormorant Garamond',serif; color:var(--gold-soft); font-size:clamp(19px,2.6vw,24px); font-weight:700; margin-bottom:6px; letter-spacing:.5px; }
.cine-title{ font-size:clamp(18px,2.8vw,26px); font-weight:700; margin-bottom:10px; color:#fff; display:flex; gap:12px; align-items:center; justify-content:center; text-shadow:0 2px 16px rgba(0,0,0,.75); }
.cine-k{ flex:0 0 auto; width:36px; height:36px; border-radius:50%; background:rgba(13,19,15,.7); border:2px solid var(--gold); color:var(--gold-soft); display:inline-flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; }
.cine-text{ color:#f5f8f4; font-size:clamp(17px,2.5vw,23px); line-height:1.6; min-height:3.2em; max-width:720px; margin:0 auto; text-shadow:0 2px 14px rgba(0,0,0,.85); }
.cine-text b{ color:var(--green-soft); }
.cine-caret{ display:inline-block; color:var(--gold-soft); animation:caretBlink .7s steps(1) infinite; }
@keyframes caretBlink{ 50%{opacity:0;} }
.cine-taphint{ position:relative; z-index:4; text-align:center; margin:12px auto 0; color:rgba(255,255,255,.5); font-size:11px; letter-spacing:2px; text-transform:uppercase; pointer-events:none; animation:bobY 2s ease-in-out infinite; }
@keyframes bobY{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(5px);} }
.cine-bottom{ position:relative; z-index:5; max-width:900px; width:100%; margin:10px auto 0; padding:14px 22px 26px; }
.cine-dots{ display:flex; gap:7px; justify-content:center; margin-bottom:14px; }
.cine-dot{ width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.28); cursor:pointer; transition:.25s; }
.cine-dot.on{ background:var(--gold); transform:scale(1.35); }
.cine-controls{ display:flex; align-items:center; justify-content:space-between; gap:14px; max-width:560px; margin:0 auto; }
.cine-skip{ background:none; border:none; color:var(--txt-dim); font-size:13px; cursor:pointer; text-decoration:underline; text-underline-offset:3px; font-family:'Inter',sans-serif; padding:8px 4px; }
.cine-skip:hover{ color:var(--gold-soft); }
.cine-next{ padding:13px 30px; font-size:15px; }
@media(max-width:640px){
  .cine-stage{ padding-top:58px; }
  .cine-char{ height:min(40vh,330px); }
  .cine-text{ font-size:16px; }
}
@media(prefers-reduced-motion:reduce){
  .cine-charstage[class*="enter-"], .cine-charwrap, .cine-char[class*="loop-"], .cine-bg{ animation:none !important; }
  .cine-rain, .cine-sun, .cine-fx{ display:none !important; }
}

/* Póster para revivir la cinemática (en la página de ruta) */
.cine-poster{ max-width:640px; margin:0 auto; display:flex; align-items:center; gap:18px; padding:20px 22px; background:var(--card); border:1px solid var(--line); border-radius:20px; cursor:pointer; transition:.3s; position:relative; overflow:hidden; }
.cine-poster::before{ content:""; position:absolute; top:0; left:0; width:100%; height:3px; background:var(--grad-accent); }
.cine-poster:hover{ border-color:var(--gold); transform:translateY(-3px); }
.cine-poster img{ width:74px; height:auto; flex:0 0 auto; filter:drop-shadow(0 6px 12px rgba(0,0,0,.5)); }
.cine-poster .cp-title{ font-family:'Cormorant Garamond',serif; font-size:21px; font-weight:700; margin-bottom:4px; }
.cine-poster .cp-sub{ font-size:13px; color:var(--txt-soft); line-height:1.5; }
.cine-poster .cp-play{ margin-left:auto; flex:0 0 auto; width:44px; height:44px; border-radius:50%; background:var(--grad-gold); color:#141414; display:flex; align-items:center; justify-content:center; font-size:16px; box-shadow:var(--shadow-gold); }
@media(max-width:560px){ .cine-poster .cp-play{ display:none; } }

/* PACK */
.pack{ background:var(--card); border:1px solid var(--line); border-radius:22px; padding:30px; max-width:820px; margin:0 auto; }
.pack h3{ font-size:20px; margin-bottom:6px; }
.pack .psub{ font-size:12.5px; color:var(--txt-dim); margin-bottom:20px; }
.pack ul{ list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:10px 16px; }
.pack li{ font-size:14px; color:var(--txt-soft); padding-left:26px; position:relative; line-height:1.4; }
.pack li::before{ content:"✓"; position:absolute; left:0; top:1px; color:var(--green); font-weight:700; }
.pack .warn{ margin-top:20px; padding-top:16px; border-top:1px solid var(--line); font-size:12.5px; color:var(--gold-soft); line-height:1.6; }

/* PRICING */
.pricing{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:stretch; }
.pricing.single{ grid-template-columns:1fr; max-width:420px; margin:0 auto; }
.price-card{ background:var(--card); border:1px solid var(--line); border-radius:24px; padding:34px 28px; text-align:center; position:relative; display:flex; flex-direction:column; overflow:hidden; }
.price-card::before{ content:""; position:absolute; top:0; left:0; width:100%; height:3px; background:var(--grad-accent); }
.price-card.featured{ border-color:rgba(214,180,107,.6); background:rgba(30,34,24,.85); box-shadow:0 24px 60px rgba(0,0,0,.5); padding-top:56px; }
.ribbon{ position:absolute; top:0; left:0; width:100%; background:var(--grad-gold); color:#1a1206; font-size:11px; font-weight:700; letter-spacing:2px; text-transform:uppercase; padding:9px 10px; text-align:center; border-radius:24px 24px 0 0; z-index:2; }
.price-card h3{ font-size:21px; margin-bottom:6px; }
.price-card .people{ font-size:13px; color:var(--txt-dim); margin-bottom:20px; }
.price-card .price{ font-size:48px; font-weight:700; color:var(--green-soft); line-height:1; text-shadow:0 0 26px rgba(158,230,174,.22); }
.price-card .per{ font-size:12px; color:var(--gold-soft); letter-spacing:1.5px; margin:6px 0 22px; }
.price-card ul{ list-style:none; text-align:left; margin-bottom:22px; }
.price-card li{ font-size:14px; color:var(--txt-soft); padding:7px 0 7px 26px; position:relative; line-height:1.5; }
.price-card li::before{ content:"✓"; position:absolute; left:0; top:6px; color:var(--green); font-weight:700; }
.price-card .note{ font-size:12px; color:var(--txt-dim); line-height:1.55; margin-bottom:22px; padding-top:16px; border-top:1px solid var(--line); }
.price-card .btn{ margin-top:auto; justify-content:center; width:100%; }
.discount{ margin-top:36px; text-align:center; }
.discount .pill{ display:inline-block; background:rgba(158,230,174,.1); border:1px solid rgba(158,230,174,.3); color:var(--green-soft); border-radius:999px; padding:12px 22px; font-size:14px; line-height:1.5; }
.prfoot{ text-align:center; max-width:640px; margin:22px auto 0; font-size:13.5px; color:var(--txt-dim); line-height:1.7; }

/* MYSTIC BAND */
.mysticband{ position:relative; padding:92px 22px; text-align:center; overflow:hidden; background:var(--ink); }
.mysticband .mist{ opacity:.8; }
.mysticband .q{ position:relative; z-index:2; max-width:820px; margin:0 auto; font-family:'Cormorant Garamond',serif; font-size:clamp(28px,4.4vw,44px); line-height:1.3; font-weight:600; }
.mysticband .q b{ color:var(--green-soft); font-weight:700; }
.mysticband .qsub{ position:relative; z-index:2; margin-top:20px; color:var(--gold-soft); letter-spacing:3px; text-transform:uppercase; font-size:12px; }

/* VALUES (Espeletio) */
.values{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.value{ background:var(--card); border:1px solid var(--line); border-radius:22px; padding:32px 26px; text-align:center; }
.value .por{ width:124px; height:124px; margin:0 auto 16px; display:flex; align-items:flex-end; justify-content:center; }
.value .por img{ max-width:100%; max-height:100%; object-fit:contain; filter:drop-shadow(0 8px 14px rgba(0,0,0,.5)); }
.value h3{ font-size:19px; margin-bottom:10px; font-weight:600; }
.value p{ color:var(--txt-soft); font-size:14.5px; line-height:1.7; }

/* ROUTE CARDS (home → páginas de ruta) */
.routecards{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.routecard{ position:relative; border-radius:24px; overflow:hidden; min-height:300px; display:flex; flex-direction:column; justify-content:flex-end; padding:28px; text-decoration:none; color:#fff; border:1px solid var(--line); transition:.3s; }
.routecard::after{ content:""; position:absolute; inset:0; z-index:0; transition:.6s; }
.routecard .rc-bg{ position:absolute; inset:0; z-index:-1; background-size:cover; background-position:center; transition:.6s; }
.routecard:hover .rc-bg{ transform:scale(1.06); }
.routecard .rc-grad{ position:absolute; inset:0; z-index:0; background:linear-gradient(180deg, rgba(9,13,10,.15) 0%, rgba(9,13,10,.55) 55%, rgba(9,13,10,.92) 100%); }
.routecard > *{ position:relative; z-index:1; }
.routecard:hover{ border-color:var(--gold); transform:translateY(-4px); }
.rc-tag{ font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--gold-soft); margin-bottom:8px; }
.rc-title{ font-family:'Cormorant Garamond',serif; font-size:30px; font-weight:700; line-height:1.05; margin-bottom:8px; }
.rc-sub{ font-size:14px; color:rgba(255,255,255,.85); line-height:1.6; margin-bottom:14px; }
.rc-cta{ display:inline-flex; align-items:center; gap:8px; color:var(--gold-soft); font-weight:700; font-size:14px; }
.rc-price{ position:absolute; top:20px; right:20px; z-index:1; background:rgba(13,19,15,.7); border:1px solid var(--line); backdrop-filter:blur(6px); border-radius:14px; padding:8px 14px; text-align:right; }
.rc-price .pv{ font-family:'Outfit',sans-serif; font-weight:700; color:var(--green-soft); font-size:18px; line-height:1; }
.rc-price .pl{ font-size:10px; color:var(--gold-soft); letter-spacing:1px; }

/* FAQ */
.faq{ max-width:780px; margin:0 auto; }
.faq details{ border:1px solid var(--line); border-radius:16px; margin-bottom:12px; background:var(--card); overflow:hidden; }
.faq summary{ cursor:pointer; padding:20px 24px; font-weight:600; font-size:16px; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; color:var(--gold-soft); font-size:24px; transition:.3s; flex:0 0 auto; }
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq .ans{ padding:0 24px 22px; color:var(--txt-soft); font-size:14.5px; line-height:1.7; }
.faq .ans b{ color:var(--gold-soft); }

/* FINAL CTA */
.finalcta{ position:relative; text-align:center; padding:100px 22px; overflow:hidden; }
.finalcta-bg{ position:absolute; inset:0; z-index:0; background:linear-gradient(180deg, rgba(9,13,10,.78), rgba(9,13,10,.9)), url('../img/iguaque1.webp') center/cover no-repeat; }
.finalcta .spores{ z-index:1; }
.finalcta > *{ position:relative; z-index:2; }
.finalcta h2{ font-family:'Cormorant Garamond',serif; font-size:clamp(36px,6vw,60px); font-weight:700; line-height:1.05; margin-bottom:18px; max-width:760px; margin-inline:auto; }
.finalcta p{ max-width:560px; margin:0 auto 30px; color:rgba(255,255,255,.85); font-size:17px; line-height:1.7; }

/* ---------------------------------------------------------------- CONTACTO / FORM */
.reserva{ max-width:560px; margin:0 auto; background:var(--card); border:1px solid var(--line); border-radius:24px; padding:34px 30px; }
.reserva .field{ margin-bottom:18px; text-align:left; }
.reserva label{ display:block; font-size:13px; color:var(--gold-soft); margin-bottom:8px; letter-spacing:.5px; }
.reserva input, .reserva select, .reserva textarea{
  width:100%; background:rgba(9,13,10,.6); border:1px solid var(--line); border-radius:12px;
  padding:13px 15px; color:#fff; font-family:'Inter',sans-serif; font-size:15px; transition:.25s;
}
.reserva input:focus, .reserva select:focus, .reserva textarea:focus{ outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(214,180,107,.15); }
.reserva select option{ background:#111814; color:#fff; }
.reserva textarea{ min-height:88px; resize:vertical; }
.reserva .row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.reserva .btn{ width:100%; justify-content:center; margin-top:6px; }
.reserva .hint{ font-size:12px; color:var(--txt-dim); margin-top:14px; line-height:1.6; text-align:center; }
.contact-alt{ text-align:center; margin-top:28px; font-size:14px; color:var(--txt-soft); }
.contact-alt a{ color:var(--green-soft); text-decoration:none; font-weight:600; }

/* ---------------------------------------------------------------- FOOTER */
footer{ background:var(--ink); border-top:1px solid var(--line); padding:40px 22px; text-align:center; }
.foot-brand{ font-family:'Cormorant Garamond',serif; font-size:20px; color:var(--gold-soft); margin-bottom:10px; }
.foot-nav{ display:flex; gap:18px; justify-content:center; flex-wrap:wrap; margin-bottom:16px; }
.foot-nav a{ font-size:13px; color:var(--txt-soft); text-decoration:none; }
.foot-nav a:hover{ color:var(--gold-soft); }
.foot-line{ font-size:12px; color:var(--txt-dim); letter-spacing:1px; line-height:1.8; }
.foot-line a{ color:var(--green-soft); text-decoration:none; }

/* ---------------------------------------------------------------- FLOATING WA */
.wa-float{ position:fixed; bottom:20px; right:20px; z-index:90; width:58px; height:58px; border-radius:50%; background:var(--wa); display:flex; align-items:center; justify-content:center; box-shadow:0 10px 28px rgba(37,211,102,.45); animation:pulse 2.4s infinite; transition:.3s; }
.wa-float:hover{ transform:scale(1.08); }
.wa-float svg{ width:30px; height:30px; fill:#fff; }
@keyframes pulse{ 0%{box-shadow:0 0 0 0 rgba(37,211,102,.5);} 70%{box-shadow:0 0 0 16px rgba(37,211,102,0);} 100%{box-shadow:0 0 0 0 rgba(37,211,102,0);} }

/* ---------------------------------------------------------------- ESPELETIO MASCOT */
.frai{ position:fixed; bottom:14px; left:16px; z-index:95; width:104px; cursor:pointer; user-select:none; -webkit-tap-highlight-color:transparent; }
.frai img{ width:100%; height:auto; filter:drop-shadow(0 8px 16px rgba(0,0,0,.5)); animation:sway 5s ease-in-out infinite; transform-origin:50% 92%; }
@keyframes sway{ 0%,100%{transform:rotate(-2deg);} 50%{transform:rotate(2deg);} }
.frai.jump img{ animation:jumpA .7s ease; }
@keyframes jumpA{ 0%{transform:translateY(0) scale(1);} 30%{transform:translateY(-16px) scale(1.05,.95);} 55%{transform:translateY(0) scale(1.02,.98);} 100%{transform:translateY(0) scale(1);} }
.frai .glow{ position:absolute; inset:2px 6px 8px 6px; z-index:-1; background:radial-gradient(circle, rgba(241,213,154,.45) 0%, rgba(241,213,154,0) 68%); animation:glowP 4s ease-in-out infinite; }
@keyframes glowP{ 0%,100%{opacity:.45;} 50%{opacity:.95;} }
.frai-bubble{ position:absolute; bottom:100%; left:0; margin-bottom:8px; width:214px; background:rgba(18,24,18,.95); border:1px solid var(--line); color:#fff; padding:12px 14px; border-radius:14px 14px 14px 4px; font-size:13px; line-height:1.5; backdrop-filter:blur(8px); box-shadow:0 12px 30px rgba(0,0,0,.5); opacity:0; transform:translateY(8px) scale(.96); transition:.3s; pointer-events:none; }
.frai-bubble.show{ opacity:1; transform:translateY(0) scale(1); }
.frai-bubble b{ color:var(--green-soft); }
.frai-close{ position:absolute; top:2px; left:-6px; background:var(--ink-2); border:1px solid var(--line); color:var(--txt-soft); width:22px; height:22px; border-radius:50%; font-size:13px; line-height:1; display:none; align-items:center; justify-content:center; }
.frai-hi{ position:absolute; top:2px; right:-4px; background:var(--gold); color:#1a1206; font-size:11px; font-weight:700; padding:3px 7px; border-radius:999px; animation:pulse2 2s infinite; }
@keyframes pulse2{ 0%,100%{transform:scale(1);} 50%{transform:scale(1.15);} }
.spark{ position:fixed; width:8px; height:8px; border-radius:50%; background:var(--gold-soft); pointer-events:none; z-index:96; }

/* ---------------------------------------------------------------- 404 */
.err{ min-height:100svh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:40px 22px; position:relative; overflow:hidden; }
.err-bg{ position:absolute; inset:0; z-index:0; background:linear-gradient(180deg, rgba(9,13,10,.8), rgba(9,13,10,.95)), url('../img/iguaque4.webp') center/cover no-repeat; }
.err > *{ position:relative; z-index:2; }
.err img.host{ width:clamp(120px,20vw,180px); margin:0 auto 20px; filter:drop-shadow(0 10px 22px rgba(0,0,0,.5)); animation:floaty 4.5s ease-in-out infinite; }
.err h1{ font-family:'Cormorant Garamond',serif; font-size:clamp(48px,10vw,90px); line-height:1; margin-bottom:10px; }
.err p{ color:var(--txt-soft); font-size:16px; max-width:420px; margin:0 auto 26px; line-height:1.7; }

/* ---------------------------------------------------------------- REVEAL */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:none; }
@media(prefers-reduced-motion:reduce){
  .hero-bg,.frai img,.frai .glow,.wa-float,.mist span,.hero-host img,.err img.host{ animation:none !important; }
  html{ scroll-behavior:auto; }
}

/* ---------------------------------------------------------------- RESPONSIVE */
@media(max-width:900px){
  /* Móvil: se mantiene dividido en DOS verticalmente (como en PC) */
  .split{ height:100svh; }
  /* Títulos centrados (para que no los tapen WhatsApp ni Espeletio abajo) */
  .split-half{ justify-content:center; padding:70px 12px 20px; }
  .split-divider{ top:42%; bottom:3%; }
  .split-half .sh-sub{ display:none; }
  .split-half .sh-num{ font-size:clamp(22px,6vw,32px); }
  .split-half .sh-name{ font-size:clamp(21px,6vw,32px); margin-bottom:8px; }
  .split-half .sh-price{ font-size:16px; margin-bottom:12px; }
  .split-half .sh-price small{ font-size:9px; }
  .split-half .sh-go{ padding:10px 15px; font-size:12px; gap:6px; }
  .split-brand{ padding-top:60px; }
  .split-brand h1{ font-size:clamp(34px,9.5vw,52px); white-space:normal; max-width:12ch; margin:0 auto; }
  .split-brand .badge{ font-size:9px; padding:6px 11px; margin-bottom:9px; letter-spacing:1.5px; }
  .split-brand .prompt{ font-size:14px; }
  .trust .wrap{ grid-template-columns:repeat(2,1fr); gap:26px 18px; }
  .values, .facts, .pricing, .routecards{ grid-template-columns:1fr; }
  .price-card.featured{ transform:none; }
  .pack ul{ grid-template-columns:1fr; }
  .reserva .row{ grid-template-columns:1fr; }
  .nav-cta span{ display:none; }
  .brand{ font-size:19px; }
  .frai{ width:78px; }
  .frai-bubble{ width:168px; font-size:12px; }
  .door{ min-width:min(88vw,320px); }
}
@media(max-width:560px){ section.block{ padding:60px 0; } }