/* =============================================================
   TA Travels and Tours — hoja única.
   Oscuro cinematográfico sobre el rojo y el plata del logo.
   Secciones: 1 tokens · 2 reset · 3 utilidades · 4 tipografía
   5 componentes · 6 secciones · 7 efectos · 8 responsive
   9 menos-movimiento
   ============================================================= */

/* =============================================================
   1. Tokens
   ============================================================= */
:root {
  /* Fondo: negro cálido con tinte rojo, nunca #000. */
  --fondo:        #0a0605;
  --fondo-2:      #120c0a;
  --tarjeta:      #15100e;
  --tarjeta-alta: #1c1512;

  /* Texto: crema, nunca blanco puro. 17:1 sobre el fondo. */
  --texto:        #f3ebe4;
  --texto-2:      #b3aca7;   /*  9.0:1  */
  --texto-3:      #9a9693;   /*  6.9:1 — el plata del logo */

  /* Rojo de marca. El exacto (#b12523) da 3.0:1 sobre el fondo:
     sirve para rellenos y brillos, NO para texto. Para texto se
     usa --rojo-txt, que da 5.5:1. */
  --rojo:         #b12523;
  --rojo-hov:     #c93430;
  --rojo-txt:     #e05a4f;
  --rojo-suave:   rgba(177, 37, 35, 0.16);

  --linea:        rgba(243, 235, 228, 0.12);
  --linea-fuerte: rgba(243, 235, 228, 0.22);

  /* Grotesca pesada para titulares, grotesca neutra para leer y una
     mono con carácter para datos. Deliberadamente SIN serif y SIN
     cursiva: el titular serif con una palabra en cursiva de color es
     la firma visual que delata una página hecha por IA. */
  --display: "Bricolage Grotesque", "Arial Black", sans-serif;
  --sans:    "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono:    "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --suave:  cubic-bezier(0.16, 1, 0.3, 1);
  --entra:  cubic-bezier(0.7, 0, 0.84, 0);
  --calma:  cubic-bezier(0.25, 0.46, 0.45, 0.94);

  --gutter: clamp(1.25rem, 5vw, 4rem);
  --alto-nav: 68px;
}

/* =============================================================
   2. Reset
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  tab-size: 2;
  overflow-x: clip;              /* clip, no hidden: hidden rompe sticky */
  scroll-behavior: smooth;
}

body {
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  overscroll-behavior-y: none;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
a { color: inherit; text-decoration: none; }
p { text-wrap: pretty; }
ol, ul { list-style: none; padding: 0; }

::selection { background: var(--rojo); color: #fff; }

:focus-visible {
  outline: 2px solid var(--rojo-txt);
  outline-offset: 3px;
  border-radius: 4px;
}

/* =============================================================
   3. Utilidades
   ============================================================= */
.skip-link {
  position: fixed; top: -100px; left: 1rem; z-index: 10001;
  padding: .7rem 1.1rem; border-radius: 10px;
  background: var(--texto); color: var(--fondo);
  font-weight: 600;
}
.skip-link:focus { top: 1rem; }

.envoltura {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
/* Ya no se usa un contenedor centrado más angosto: todas las
   secciones comparten el mismo margen izquierdo y es cada bloque de
   texto el que limita su medida de línea. Si no, "La casa" arrancaba
   200 px más adentro que "Cerca" y se notaba. */
.acordeon { max-width: 62rem; }

.mono {
  font-family: var(--mono);
  font-size: .6563rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--texto-3);
  font-weight: 400;
}

/* =============================================================
   4. Tipografía
   ============================================================= */
h1, h2, h3 {
  font-family: var(--display);
  font-weight: 800;
  line-height: 1.0;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
/* El acento es de color y de peso, nunca de cursiva: Bricolage no
   tiene itálica real y el navegador se inventaría una oblicua. */
h1 em, h2 em, h3 em {
  font-style: normal;
  font-weight: 500;
  color: var(--rojo-txt);
}

.titulo-grande {
  font-size: clamp(2.1rem, 6.2vw, 4.3rem);
  max-width: 20ch;
}

.rotulo {
  font-family: var(--mono);
  font-size: .6563rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--texto-3);
  display: flex; align-items: center; gap: .9rem;
  margin-bottom: 1.4rem;
}
.rotulo span {
  color: var(--rojo-txt);
  padding-right: .9rem;
  border-right: 1px solid var(--linea);
}

.seccion-nota {
  margin-top: 1.5rem;
  max-width: 52ch;
  color: var(--texto-2);
  font-size: 1.0625rem;
}

/* =============================================================
   5. Componentes
   ============================================================= */

/* --- botones --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .55rem;
  padding: 1rem 1.9rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: .9375rem;
  letter-spacing: .005em;
  cursor: pointer;
  position: relative;
  transition: transform .28s var(--suave), background-color .28s var(--suave),
              border-color .28s var(--suave), box-shadow .28s var(--suave),
              color .28s var(--suave);
}
.btn-sm { padding: .65rem 1.15rem; font-size: .8125rem; }
.btn-ancho { width: 100%; }

/* Rojo de marca con texto blanco: 6.65:1. */
.btn-rojo {
  background: var(--rojo);
  color: #fff;
  box-shadow: 0 10px 30px -14px rgba(177, 37, 35, .9);
}
.btn-linea {
  border: 1px solid var(--linea-fuerte);
  color: var(--texto);
}
.btn-wa { border: 1px solid var(--linea-fuerte); color: var(--texto); padding: .6rem 1.1rem; font-size: .8125rem; }

@media (hover: hover) {
  .btn:hover { transform: translateY(-2px); }
  .btn-rojo:hover { background: var(--rojo-hov); box-shadow: 0 16px 38px -14px rgba(201, 52, 48, 1); }
  .btn-linea:hover, .btn-wa:hover { border-color: var(--rojo-txt); color: var(--rojo-txt); }
}
.btn:active { transform: translateY(0); }

/* --- navegación --- */
.nav {
  position: fixed; inset-inline: 0; top: 0; z-index: 100;
  height: var(--alto-nav);
  display: flex; align-items: center; gap: 1.5rem;
  padding-inline: var(--gutter);
  transition: background-color .45s var(--suave), backdrop-filter .45s var(--suave),
              border-color .45s var(--suave);
  border-bottom: 1px solid transparent;
}
.nav.es-scroll {
  background: rgba(10, 6, 5, .82);
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  border-bottom-color: var(--linea);
}

.nav-marca { display: flex; align-items: center; gap: .6rem; margin-right: auto; }
.nav-marca img { width: 38px; height: auto; }
.nav-marca-txt {
  display: none;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1;
  letter-spacing: -0.025em;
}
.nav-marca-txt i {
  display: block;
  font-family: var(--mono);
  font-style: normal;
  font-size: .5625rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--texto-3);
  margin-top: .3rem;
}

.nav-links { display: none; gap: 1.9rem; }
.nav-links a {
  font-size: .875rem;
  font-weight: 500;
  color: var(--texto-2);
  position: relative;
  padding-block: .3rem;
  transition: color .25s var(--suave);
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: var(--rojo-txt);
  transform: scaleX(0); transform-origin: right;
  transition: transform .35s var(--suave);
}
@media (hover: hover) {
  .nav-links a:hover { color: var(--texto); }
  .nav-links a:hover::after { transform: scaleX(1); transform-origin: left; }
}
.nav-links a.es-activo { color: var(--texto); }
.nav-links a.es-activo::after { transform: scaleX(1); }

.nav-cta { display: none; }

.nav-burger {
  width: 42px; height: 42px;
  display: grid; place-content: center; gap: 6px;
  border: 1px solid var(--linea); border-radius: 50%;
}
.nav-burger span {
  display: block; width: 16px; height: 1.5px; background: var(--texto);
  transition: transform .4s var(--suave), opacity .3s;
}
.nav-burger[aria-expanded="true"] span:first-child { transform: translateY(3.75px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:last-child { transform: translateY(-3.75px) rotate(-45deg); }

.menu-movil {
  position: fixed; inset: 0; z-index: 95;
  background: var(--fondo);
  display: flex; flex-direction: column; justify-content: center;
  gap: 2.5rem;
  padding: var(--alto-nav) var(--gutter) 3rem;
  clip-path: inset(0 0 100% 0);
  transition: clip-path .62s var(--calma);
}
.menu-movil[aria-hidden="false"] { clip-path: inset(0 0 0 0); }
.menu-movil nav { display: flex; flex-direction: column; gap: .4rem; }
.menu-movil nav a {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -0.038em;
  font-size: clamp(2rem, 9vw, 2.75rem);
  line-height: 1.18;
  transition: color .25s var(--suave), transform .35s var(--suave);
}
@media (hover: hover) { .menu-movil nav a:hover { color: var(--rojo-txt); transform: translateX(8px); } }
.menu-movil-pie { color: var(--texto-3); font-size: .875rem; line-height: 1.8; }
.menu-movil-pie a { color: var(--texto-2); }

/* --- puntos laterales --- */
.puntos {
  position: fixed; top: 50%; right: 1.6rem; z-index: 80;
  display: none; flex-direction: column; gap: .85rem;
  transform: translateY(-50%);
}
.puntos a {
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: flex-end;
  position: relative;
}
.puntos a span {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(243, 235, 228, .28);
  transition: width .35s var(--suave), height .35s var(--suave), background-color .35s var(--suave);
}
.puntos a.es-activo span { width: 11px; height: 11px; background: var(--rojo-txt); }
.puntos a::before {
  content: attr(data-nombre);
  position: absolute; right: calc(100% + .7rem); top: 50%;
  transform: translateY(-50%) translateX(6px);
  font-family: var(--mono); font-size: .625rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--texto-2);
  white-space: nowrap; opacity: 0; pointer-events: none;
  transition: opacity .3s var(--suave), transform .3s var(--suave);
}
@media (hover: hover) {
  .puntos a:hover::before { opacity: 1; transform: translateY(-50%) translateX(0); }
  .puntos a:hover span { background: var(--texto-2); }
}

/* --- fichas de paquete --- */
.rejilla {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  margin-top: 3.5rem;
}

.ficha {
  position: relative;
  display: flex; flex-direction: column;
  padding: 1.6rem 1.5rem 1.4rem;
  border: 1px solid var(--linea);
  border-radius: 18px;
  background: rgba(21, 16, 14, .72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow: hidden;
  transition: border-color .4s var(--suave), background-color .4s var(--suave),
              transform .5s var(--calma);
}
@supports not (backdrop-filter: blur(10px)) {
  .ficha { background: #15100e; }
}
.ficha-oscura { background: rgba(12, 8, 7, .78); }

/* El halo rojo que sigue al cursor dentro de la ficha. */
.ficha::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(
    15rem 15rem at var(--mx, 50%) var(--my, 0%),
    rgba(224, 90, 79, .14), transparent 70%);
  opacity: 0; transition: opacity .4s var(--suave);
}
@media (hover: hover) {
  .ficha:hover { border-color: rgba(224, 90, 79, .4); transform: translateY(-4px); }
  .ficha:hover::before { opacity: 1; }
}

.ficha-top {
  display: flex; justify-content: space-between; gap: 1rem;
  padding-bottom: 1.1rem; margin-bottom: 1.1rem;
  border-bottom: 1px solid var(--linea);
}
.ficha-top span:last-child { color: var(--rojo-txt); }

.ficha h3 {
  font-size: clamp(1.5rem, 3.6vw, 2rem);
  line-height: 1.05;
}
.ficha h3 em {
  display: block;
  font-size: .5em;
  margin-top: .45rem;
  color: var(--texto-3);
  font-style: normal;
  font-weight: 500;
  letter-spacing: -0.015em;
}

.ficha-texto {
  margin-top: 1rem;
  max-width: 54ch;
  color: var(--texto-2);
  font-size: .9375rem;
  line-height: 1.68;
}
.ficha-salidas {
  margin-top: 1.1rem;
  color: var(--texto-2);
  font-size: .625rem;
}
.ficha-salidas::before {
  content: ""; display: inline-block;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--rojo-txt); margin-right: .55rem;
  vertical-align: .14em;
}

.ficha-pie {
  margin-top: auto; padding-top: 1.5rem;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem;
  flex-wrap: wrap;
}
.precio { line-height: 1.2; }
.precio b {
  font-family: var(--display);
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.035em;
}
.precio span {
  display: block;
  font-family: var(--mono);
  font-size: .5625rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--texto-3);
  margin-top: .2rem;
}
.precio-cotizar {
  font-family: var(--mono);
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--rojo-txt);
}

/* --- lista de destinos --- */
.lista-destinos { margin-top: 3rem; border-top: 1px solid var(--linea); }
.lista-destinos li { border-bottom: 1px solid var(--linea); }
.lista-destinos button {
  width: 100%;
  display: grid;
  grid-template-columns: 2.6rem 1fr;
  grid-template-areas: "n nombre" ". region";
  align-items: baseline;
  gap: .1rem .6rem;
  padding: 1.15rem .4rem;
  text-align: left;
  transition: background-color .35s var(--suave), padding-left .35s var(--suave);
}
.ld-n { grid-area: n; color: var(--texto-3); }
.ld-nombre {
  grid-area: nombre;
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -0.035em;
  font-size: clamp(1.35rem, 4.2vw, 1.9rem);
  line-height: 1.1;
  transition: color .3s var(--suave);
}
.ld-region { grid-area: region; }

@media (hover: hover) {
  .lista-destinos button:hover { background: rgba(224, 90, 79, .06); padding-left: 1rem; }
  .lista-destinos button:hover .ld-nombre { color: var(--rojo-txt); }
}
.lista-destinos button.es-activo { background: rgba(224, 90, 79, .09); }
.lista-destinos button.es-activo .ld-nombre { color: var(--rojo-txt); }
.lista-destinos button.es-activo .ld-n { color: var(--rojo-txt); }

.destino-detalle {
  margin-top: 1.8rem;
  max-width: 54ch;
  color: var(--texto-2);
  font-size: 1.0625rem;
  min-height: 3.4em;
  transition: opacity .3s var(--suave);
}
.destino-detalle.cambiando { opacity: 0; }

/* --- acordeón --- */
.acordeon { margin-top: 3rem; border-top: 1px solid var(--linea); }
.acordeon details { border-bottom: 1px solid var(--linea); }
.acordeon summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1.3rem .2rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.03em;
  font-size: clamp(1.15rem, 3.2vw, 1.5rem);
  line-height: 1.25;
  transition: color .3s var(--suave);
}
.acordeon summary::-webkit-details-marker { display: none; }
@media (hover: hover) { .acordeon summary:hover { color: var(--rojo-txt); } }
.acordeon summary i {
  position: relative; flex: none;
  width: 16px; height: 16px;
}
.acordeon summary i::before,
.acordeon summary i::after {
  content: ""; position: absolute; inset: 50% 0 auto 0;
  height: 1.5px; background: var(--rojo-txt);
  transition: transform .4s var(--suave);
}
.acordeon summary i::after { transform: rotate(90deg); }
.acordeon details[open] summary i::after { transform: rotate(0deg); }
.acordeon details p {
  padding: 0 .2rem 1.5rem;
  max-width: 62ch;
  color: var(--texto-2);
}

/* --- formulario --- */
.forma {
  padding: 1.75rem 1.5rem;
  border: 1px solid var(--linea);
  border-radius: 20px;
  background: rgba(21, 16, 14, .78);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex; flex-direction: column; gap: 1.05rem;
}
@supports not (backdrop-filter: blur(12px)) { .forma { background: #15100e; } }

.forma-titulo { color: var(--rojo-txt); margin-bottom: .2rem; }

.campo { display: flex; flex-direction: column; gap: .45rem; }
.campo > span {
  font-family: var(--mono);
  font-size: .625rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--texto-3);
}
.campo input,
.campo select,
.campo textarea {
  width: 100%;
  padding: .8rem .9rem;
  border: 1px solid var(--linea);
  border-radius: 10px;
  background: rgba(10, 6, 5, .6);
  color: var(--texto);
  font: inherit;
  font-size: .9375rem;
  transition: border-color .3s var(--suave), background-color .3s var(--suave);
}
.campo textarea { resize: vertical; min-height: 4.5rem; }
.campo input::placeholder, .campo textarea::placeholder { color: #7d7571; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  border-color: var(--rojo-txt);
  background: rgba(10, 6, 5, .85);
}
.campo.es-error input, .campo.es-error textarea { border-color: var(--rojo-txt); }

.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.forma-nota { font-size: .75rem; color: var(--texto-3); line-height: 1.6; }

/* --- WhatsApp flotante --- */
.wa-flotante {
  position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 90;
  width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--rojo); color: #fff;
  box-shadow: 0 14px 34px -12px rgba(177, 37, 35, .95);
  transition: transform .3s var(--suave), background-color .3s var(--suave);
}
@media (hover: hover) { .wa-flotante:hover { transform: scale(1.07); background: var(--rojo-hov); } }

/* =============================================================
   6. Secciones
   ============================================================= */

/* --- la escena 3D y sus capas de contraste --- */
.escena {
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.4s var(--suave);
}
.escena.lista { opacity: 1; }
.escena canvas { width: 100% !important; height: 100% !important; }
/* Sin WebGL queda un halo rojo, no un hueco negro. */
.escena.sin-webgl {
  opacity: 1;
  background: radial-gradient(42% 38% at 50% 42%, rgba(177, 37, 35, .3), transparent 72%);
}

.capa-scrim {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: rgba(10, 6, 5, .3);
}
.capa-vineta {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse at center, transparent 28%, rgba(10, 6, 5, .45) 68%, rgba(10, 6, 5, .88) 100%),
    linear-gradient(180deg, rgba(10, 6, 5, .62) 0%, transparent 26%, transparent 72%, rgba(10, 6, 5, .78) 100%);
}
.capa-grano {
  position: fixed; inset: 0; z-index: 2; pointer-events: none;
  opacity: .055; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.86' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.52 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 190px 190px;
}

main { position: relative; z-index: 3; }

/* --- hero --- */
.hero {
  min-height: 100vh;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: calc(var(--alto-nav) + 2rem) var(--gutter) 1.6rem;
  position: relative;
  /* Stacking context propio: así el video de portada tapa el globo
     fijo del fondo sin necesidad de z-index altos por toda la hoja. */
  isolation: isolate;
  overflow: hidden;
}

/* La Tierra desde el espacio abre la página. El globo de puntos
   aparece después, al bajar: primero el planeta real, luego el mismo
   planeta convertido en rutas. */
.hero-video {
  position: absolute; inset: 0; z-index: -3;
  width: 100%; height: 100%;
  object-fit: cover;
  /* El plano cruza nubes y amaneceres: en esos tramos se lava y
     arrastra toda la portada a marrón. Un punto de contraste y
     saturación lo devuelve al negro cálido de la marca. */
  filter: saturate(1.12) contrast(1.1);
}
.hero-tinte {
  position: absolute; inset: 0; z-index: -2;
  background:
    linear-gradient(180deg, rgba(10, 6, 5, .86) 0%, rgba(10, 6, 5, .34) 26%, rgba(10, 6, 5, .52) 58%, rgba(10, 6, 5, .96) 100%),
    linear-gradient(90deg, rgba(10, 6, 5, .9) 0%, rgba(10, 6, 5, .74) 30%, rgba(10, 6, 5, .34) 62%, rgba(10, 6, 5, .1) 100%);
}
.hero-inner { max-width: 1280px; margin-inline: auto; width: 100%; position: relative; }
.hero-inner::before {
  content: ""; position: absolute; inset: -8% -6% -10% -6%;
  z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, transparent 0%, rgba(10, 6, 5, .72) 22%, rgba(10, 6, 5, .86) 100%);
}
@media (min-width: 720px) {
  .hero-inner::before { display: none; }
}

.kicker {
  display: flex; align-items: flex-start; gap: .6rem;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: .625rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--texto-2);
  margin-bottom: 1.6rem;
}
.kicker strong { color: var(--texto); font-weight: 500; }
.kicker-punto {
  width: 6px; height: 6px; border-radius: 50%;
  flex: none; margin-top: .42em;
  background: var(--rojo-txt);
  box-shadow: 0 0 0 0 rgba(224, 90, 79, .7);
  animation: latido 2.6s infinite;
}
@keyframes latido {
  0%   { box-shadow: 0 0 0 0 rgba(224, 90, 79, .6); }
  70%  { box-shadow: 0 0 0 9px rgba(224, 90, 79, 0); }
  100% { box-shadow: 0 0 0 0 rgba(224, 90, 79, 0); }
}

.hero-titulo {
  font-size: clamp(2.7rem, 10.2vw, 6.8rem);
  line-height: .92;
  letter-spacing: -0.042em;
  max-width: 14ch;
  /* Legibilidad sobre la escena 3D: sombra + halo detrás. */
  text-shadow: 0 2px 26px rgba(0, 0, 0, .8), 0 1px 4px rgba(0, 0, 0, .85);
  position: relative;
}
.hero-titulo::before {
  content: ""; position: absolute; inset: -14% -10% -18% -8%;
  background: radial-gradient(ellipse at 36% 50%, rgba(10, 6, 5, .8) 0%, rgba(10, 6, 5, .45) 58%, transparent 100%);
  filter: blur(10px); z-index: -1;
}

.hero-bajada {
  margin-top: 1.7rem;
  max-width: 44ch;
  font-size: clamp(1rem, 2.2vw, 1.125rem);
  color: var(--texto-2);
  text-shadow: 0 1px 14px rgba(0, 0, 0, .8);
}

.hero-acciones {
  margin-top: 2.2rem;
  display: flex; flex-wrap: wrap; gap: .75rem;
}

.hero-pie {
  max-width: 1280px; margin: 3.5rem auto 0; width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--linea);
}
.hero-pie .mono { color: var(--texto-2); }
.hero-pie i { color: var(--texto-3); font-style: normal; padding-inline: .5rem; }
.hero-scroll { display: none; }
@media (min-width: 720px) { .hero-scroll { display: block; } }
.hero-scroll span { display: inline-block; animation: baja 2.4s var(--calma) infinite; }
@keyframes baja {
  0%, 100% { transform: translateY(0); opacity: .55; }
  50%      { transform: translateY(5px); opacity: 1; }
}

/* --- secciones genéricas --- */
.seccion { padding-block: clamp(5rem, 13vw, 9.5rem); position: relative; }
[id] { scroll-margin-top: calc(var(--alto-nav) + 12px); }
.seccion-cab { max-width: 46rem; }

.casa-texto {
  margin-top: 2rem;
  display: grid; gap: 1.2rem;
  max-width: 58ch;
  font-size: 1.0625rem;
  color: var(--texto-2);
}
.casa-texto p:first-child {
  color: var(--texto);
  font-size: clamp(1.1rem, 2.6vw, 1.3rem);
  line-height: 1.6;
}

.pilares {
  margin-top: 3.2rem;
  display: grid; gap: 1.6rem;
  border-top: 1px solid var(--linea);
  padding-top: 2rem;
}
.pilares li { display: grid; gap: .5rem; }
.pilares .mono { color: var(--rojo-txt); }
.pilares p { color: var(--texto-2); font-size: .9375rem; max-width: 34ch; }

/* --- bandas de video --- */
.banda {
  position: relative;
  z-index: 4;
  height: 78vh;
  min-height: 420px;
  overflow: hidden;
  display: flex; align-items: flex-end;
  isolation: isolate;
}
.banda-corta { height: 62vh; min-height: 340px; }
.banda-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -2;
}
.banda-tinte {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(10, 6, 5, .78) 0%, rgba(10, 6, 5, .18) 34%, rgba(10, 6, 5, .2) 56%, rgba(10, 6, 5, .92) 100%),
    radial-gradient(70% 60% at 50% 50%, transparent 30%, rgba(10, 6, 5, .5) 100%);
}
.banda-texto {
  width: 100%; max-width: 1280px; margin-inline: auto;
  padding: 0 var(--gutter) clamp(2.2rem, 6vw, 4rem);
}
.banda-texto .mono { color: var(--texto-2); margin-bottom: .9rem; }
.banda-frase {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -0.038em;
  font-size: clamp(1.75rem, 6vw, 3.6rem);
  line-height: 1.05;
  max-width: 17ch;
  text-shadow: 0 2px 22px rgba(0, 0, 0, .75);
}
.banda-frase em { font-style: normal; font-weight: 500; color: var(--texto-2); }

/* --- contacto --- */
.contacto-rejilla { display: grid; gap: 3rem; }
.datos {
  margin-top: 2.6rem;
  display: grid; gap: 1.4rem;
  border-top: 1px solid var(--linea);
  padding-top: 1.8rem;
}
.datos dt { margin-bottom: .35rem; }
.datos dd { color: var(--texto-2); line-height: 1.7; font-size: .9375rem; }
.datos dd a { color: var(--texto); border-bottom: 1px solid var(--linea-fuerte); transition: color .25s, border-color .25s; }
@media (hover: hover) { .datos dd a:hover { color: var(--rojo-txt); border-color: var(--rojo-txt); } }

/* --- pie --- */
.pie {
  position: relative; z-index: 3;
  border-top: 1px solid var(--linea);
  background: rgba(10, 6, 5, .9);
  padding-block: 3rem 2.2rem;
}
.pie-rejilla { display: grid; gap: 2.2rem; }
.pie-logo { width: 150px; opacity: .92; }
.pie-legal { margin-top: 1rem; color: var(--texto-3); font-size: .8125rem; line-height: 1.7; }
.pie-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem 1.5rem; }
.pie-links a { font-size: .875rem; color: var(--texto-2); transition: color .25s var(--suave); }
@media (hover: hover) { .pie-links a:hover { color: var(--rojo-txt); } }
.pie-copy { font-size: .625rem; }

/* =============================================================
   7. Efectos
   ============================================================= */
.splash {
  position: fixed; inset: 0; z-index: 10000;
  background: var(--fondo);
  display: grid; place-items: center;
  transition: opacity .9s var(--suave), clip-path 1.1s var(--calma);
  /* Red de seguridad: si el JS falla, se va sola a los 4.5 s. */
  animation: splashSeguro .01s 4.5s forwards;
}
.splash.se-va { opacity: 0; pointer-events: none; clip-path: inset(0 0 100% 0); }
@keyframes splashSeguro {
  to { opacity: 0; pointer-events: none; clip-path: inset(0 0 100% 0); }
}
.splash-inner { display: grid; justify-items: center; gap: 1.5rem; }
.splash-marca { width: 90px; height: auto; animation: splashEntra 1.1s var(--suave) both; }
@keyframes splashEntra { from { opacity: 0; transform: translateY(10px) scale(.95); } }
.splash-barra { display: block; width: 110px; height: 1px; background: var(--linea); overflow: hidden; }
.splash-barra i { display: block; height: 100%; width: 100%; background: var(--rojo-txt); transform-origin: left; animation: splashCarga 2.1s var(--calma) forwards; }
@keyframes splashCarga { from { transform: scaleX(0); } to { transform: scaleX(1); } }

[data-reveal] {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .9s var(--calma), transform .9s var(--calma);
}
[data-reveal].se-ve { opacity: 1; transform: none; }
/* Defensa: si un elemento lleva reveal y partido de texto a la vez,
   que nunca quede invisible (gotcha A.4.5). */
[data-reveal][data-split] { opacity: 1; transform: none; }
/* Sin JS no se oculta nada. */
.sin-js [data-reveal] { opacity: 1; transform: none; }

/* =============================================================
   8. Responsive
   ============================================================= */
@media (min-width: 540px) {
  .rejilla { gap: 1.1rem; }
  .pilares { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
}

@media (min-width: 720px) {
  .nav-marca-txt { display: block; }
  .rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ficha-ancha { grid-column: span 2; }
  .ficha-ancha {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    grid-template-areas: "top top" "titulo texto" "titulo salidas" "titulo pie";
    align-content: start;
    column-gap: 2.5rem;
  }
  .ficha-ancha .ficha-top { grid-area: top; }
  .ficha-ancha h3 { grid-area: titulo; align-self: start; font-size: clamp(2rem, 4.4vw, 2.9rem); }
  .ficha-ancha .ficha-texto { grid-area: texto; margin-top: 0; }
  .ficha-ancha .ficha-salidas { grid-area: salidas; align-self: start; }
  .ficha-ancha .ficha-pie { grid-area: pie; }
  .ficha { padding: 1.9rem 1.8rem 1.6rem; }
  .pilares { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pie-rejilla { grid-template-columns: 1fr auto; align-items: start; }
  .pie-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pie-copy { grid-column: 1 / -1; padding-top: 1.6rem; border-top: 1px solid var(--linea); }
  .lista-destinos button {
    grid-template-columns: 3.4rem 1fr auto;
    grid-template-areas: "n nombre region";
    align-items: center;
    padding-block: 1.35rem;
  }
  .ld-region { text-align: right; }
}

@media (min-width: 960px) {
  .nav-links { display: flex; }
  .nav-cta { display: inline-flex; }
  .nav-burger { display: none; }
  .menu-movil { display: none; }
  .contacto-rejilla { grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; }
  .forma { padding: 2.2rem 2rem; }
  .rejilla-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rejilla-3 .ficha-ancha { grid-column: span 1; }
  .wa-flotante { right: 1.6rem; bottom: 1.6rem; }
}

@media (min-width: 1280px) {
  .puntos { display: flex; }
  .ficha-ancha { grid-column: span 2; }
  .hero { padding-bottom: 2.2rem; }
}

@media (min-width: 1600px) {
  .envoltura { max-width: 1400px; }
}

/* =============================================================
   9. Menos movimiento
   Solo lo intrusivo. Los hovers, los reveals, el tilt y los
   contadores siguen funcionando: Windows trae esta preferencia
   activada de fábrica en muchos equipos y apagarlo todo deja
   la página muerta.
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .kicker-punto { animation: none; }
  .hero-scroll span { animation: none; }
  .hero-video, .banda-video { /* los videos se pausan desde JS */ }
  .splash-marca, .splash-barra i { animation-duration: .01s; }
}