/* Braap - mejoras estéticas compartidas (Ola 1). Se carga DESPUÉS del CSS inline y refina por cascada/variables.
   Una sola fuente para es/en/fr/zh. Quitar este <link> revierte todo. */
@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700&display=swap');

/* ===== tokens refinados (los hereda todo lo que usa var()) ===== */
:root{
  --shadow:0 22px 55px -26px rgba(11,62,104,.34);
  --shadow-sm:0 10px 26px -16px rgba(11,62,104,.24);
  --shadow-lg:0 34px 80px -30px rgba(11,62,104,.42);
  --snow:#FBFCFE;
}
[data-theme="dark"] body{
  --shadow:0 22px 55px -26px rgba(0,0,0,.62);
  --shadow-sm:0 10px 26px -16px rgba(0,0,0,.5);
  --shadow-lg:0 34px 80px -30px rgba(0,0,0,.68);
  --snow:#142433;
}

/* ===== tipografía: cuerpo con más carácter, Anton menos apretado, números tabulares ===== */
body{font-family:'Hanken Grotesk','Inter',system-ui,sans-serif}
h1,h2,h3,.display,.sec-title{letter-spacing:.006em}
.stat .num,.route-foot .price,.price,.sf-day b,.vol-altitud{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* ===== superficies elevadas: blanco-nieve cálido + sombras tintadas en 2 niveles ===== */
.card,.route{background:var(--snow)}
.card{box-shadow:var(--shadow-sm);transition:transform .4s cubic-bezier(.2,1,.24,1),box-shadow .4s,border-color .4s}
.card:hover{box-shadow:var(--shadow-lg);transform:translateY(-8px)}
.route{box-shadow:var(--shadow-sm)}
.route:hover{box-shadow:var(--shadow-lg)}
/* vidrio: highlight interno en tarjetas oscuras translúcidas */
.t-card{box-shadow:0 24px 60px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.09)}

/* ===== radios unificados (mismo lenguaje de esquina) ===== */
.card,.route,.gallery figure,.reel-grid .clip,.info-item .ic{border-radius:16px}

/* ===== feedback táctil en todo lo clickeable ===== */
.btn:active,button:active,.card-cta:active,.wa-float:active,.t-chip:active{transform:translateY(0) scale(.97)}

/* ===== micro-interacción: la flecha de los CTA de texto empuja al hover ===== */
.card-cta{display:inline-flex;align-items:center;gap:6px;transition:gap .3s cubic-bezier(.2,1,.24,1),color .3s}
.card-cta:hover{gap:12px}

/* ===== foco accesible de marca + inputs ===== */
:focus-visible{outline:2px solid var(--ice);outline-offset:3px;border-radius:8px}
input:focus,textarea:focus,select:focus{border-color:var(--ice)!important;box-shadow:0 0 0 3px rgba(79,184,232,.2)!important}

/* ===== FAQ: animación de altura más suave ===== */
.qa .ans{transition:max-height .45s cubic-bezier(.4,0,.2,1)}
.qa.open .ans{max-height:480px}

/* ===== footer: hover de marca ===== */
footer a:hover{color:var(--ice)}

/* ===== modo oscuro: más contraste en secundarios + fotos que no quemen ===== */
[data-theme="dark"] .card p,[data-theme="dark"] .route-body p,[data-theme="dark"] .info-item p,[data-theme="dark"] .stat .lab{color:#b3c2d1}
[data-theme="dark"] .gallery img,[data-theme="dark"] .route-img img{filter:brightness(.93) saturate(1.02)}

/* ===== móvil: respiro vertical + tap targets 44px ===== */
@media(max-width:560px){
  section.block{padding:64px 0}
  .btn,.card-cta{min-height:44px}
}

/* ===== volver arriba (creado por JS) ===== */
.to-top{position:fixed;left:20px;bottom:20px;z-index:90;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--line);background:var(--snow);color:var(--blue-deep);box-shadow:var(--shadow-sm);
  opacity:0;transform:translateY(12px) scale(.92);pointer-events:none;transition:opacity .35s,transform .35s,border-color .3s}
.to-top.show{opacity:1;transform:none;pointer-events:auto}
.to-top:hover{border-color:var(--ice);transform:translateY(-2px)}
.to-top svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
[data-theme="dark"] .to-top{color:var(--ice)}
body.mcta-visible .to-top{bottom:84px}

/* ===== WhatsApp: pulso una sola vez (no infinito) ===== */
@keyframes waPulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.5)}100%{box-shadow:0 0 0 20px rgba(37,211,102,0)}}
.wa-float.pulse-once{animation:waPulse 2s ease-out 2}

@media (prefers-reduced-motion:reduce){
  .wa-float.pulse-once{animation:none}
  .card,.route,.to-top{transition:opacity .2s}
}

/* ============================ OLA 2 ============================ */
:root{ --sunset:#E8865A; }

/* nieve sutil en el hero (canvas creado por JS) */
.hero-snow{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.7}
.hero .hero-content{position:relative;z-index:5}
.hero .hero-fade{z-index:4}

/* tilt 3D: transición snappy mientras se inclina (JS pone transform inline) */
.card,.route{transform-style:preserve-3d}

/* franja de cierre con foto + CTA (antes del footer) */
.closing{position:relative;min-height:60vh;display:grid;place-items:center;text-align:center;overflow:hidden;isolation:isolate;
  padding:96px 22px;background:#08131d url("/assets/g-salto-atardecer.jpg") center/cover no-repeat}
.closing::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(8,19,29,.5),rgba(8,19,29,.82))}
.closing::before{content:"";position:absolute;left:0;right:0;top:0;height:46px;transform:translateY(-99%);pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 48' preserveAspectRatio='none'%3E%3Cpath fill='%2308131d' d='M0 48 L0 32 L120 10 L240 30 L360 8 L480 28 L600 6 L720 26 L840 12 L960 30 L1080 14 L1200 28 L1200 48 Z'/%3E%3C/svg%3E") no-repeat center bottom/100% 100%}
.closing .closing-in{max-width:760px}
.closing .kick{display:inline-block;font-size:13px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--sunset);margin-bottom:14px}
.closing h2{color:#fff;font-size:clamp(2.4rem,6vw,4.6rem);line-height:1.04;text-shadow:0 6px 40px rgba(0,0,0,.55)}
.closing p{color:rgba(255,255,255,.86);margin:16px auto 30px;max-width:52ch;font-size:1.05rem;text-shadow:0 2px 16px rgba(0,0,0,.5)}
.closing .btn{box-shadow:0 16px 40px -16px rgba(0,0,0,.65)}
[data-theme="dark"] .closing::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 48' preserveAspectRatio='none'%3E%3Cpath fill='%2308131d' d='M0 48 L0 32 L120 10 L240 30 L360 8 L480 28 L600 6 L720 26 L840 12 L960 30 L1080 14 L1200 28 L1200 48 Z'/%3E%3C/svg%3E")}

@media (prefers-reduced-motion:reduce){ .hero-snow{display:none} }