/* ==========================================================================
   VOLCANO ACQUA PARK — S00153
   main.css — variables globales, reset, tipografía y utilidades base
   Rediseño "Místico-Hídrico": fondo multicapa, vidrio mojado, tipografía
   de leyenda. Las 3 fuentes están auto-hospedadas en assets/fonts/ (ver
   CLAUDE.md sección "Sin dependencias externas") — ya no dependen de
   Google Fonts CDN ni de conexión a internet.
   ========================================================================== */

@font-face {
  font-family: "Cinzel Decorative";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/cinzel-decorative-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Cinzel Decorative";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/cinzel-decorative-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Cinzel Decorative";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("../fonts/cinzel-decorative-900-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Cinzel Decorative";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("../fonts/cinzel-decorative-900-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/plus-jakarta-sans-300-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/plus-jakarta-sans-300-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/plus-jakarta-sans-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/plus-jakarta-sans-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/plus-jakarta-sans-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/plus-jakarta-sans-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/plus-jakarta-sans-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/plus-jakarta-sans-600-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/plus-jakarta-sans-800-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/plus-jakarta-sans-800-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* ---- Paleta: fondos (abismo marino -> teal místico) ---- */
  --abismo-profundo: #030712;
  --abismo: #050914;
  --teal-mistico: #0f172a;
  --teal-mistico-alt: #0e1f2e;
  --azul-medianoche: #0b0f19;
  --gris-mistico: #080a10;
  --superficie: #10162a;
  --superficie-alt: #161d33;

  /* ---- Paleta: acento cian (agua / LED) ---- */
  --cian-neon: #2767ec;
  --cian-neon-dark: #063390;
  --cian-tenue: rgba(39, 103, 236, 0.14);
  --cian-tenue-fuerte: rgba(39, 103, 236, 0.28);

  /* ---- Paleta: acento oro (VIP / premium) ---- */
  --oro-satinado: #f2591a;
  --oro-satinado-dark: #b8390a;
  --oro-claro: #ffb98f;
  --oro-tenue: rgba(242, 89, 26, 0.14);
  --oro-tenue-fuerte: rgba(242, 89, 26, 0.3);

  /* ---- Paleta: texto ---- */
  --blanco: #e2e8f0;
  --blanco-puro: #ffffff;
  --niebla: rgba(226, 232, 240, 0.82);
  --niebla-tenue: rgba(226, 232, 240, 0.55);

  /* ---- Paleta: vidrio mojado / bordes de reflejo ---- */
  --vidrio-fondo: rgba(15, 35, 66, 0.4);
  --vidrio-fondo-fuerte: rgba(15, 35, 66, 0.62);
  --vidrio-blur: 16px;

  /* Borde sólido simple (single-edge: border-bottom, border-top, dashed, etc.) */
  --borde-cristal: rgba(39, 103, 236, 0.16);
  --borde-cristal-fuerte: rgba(255, 255, 255, 0.22);
  --borde-oro-solido: rgba(242, 89, 26, 0.28);

  /* Borde-gradiente "reflejo en el agua" — para el truco de doble background-image
     (background-origin: border-box + padding-box) sobre paneles de vidrio completos */
  --borde-reflejo: linear-gradient(
    155deg,
    rgba(39, 103, 236, 0.4) 0%,
    rgba(39, 103, 236, 0.05) 32%,
    rgba(255, 255, 255, 0.16) 50%,
    rgba(39, 103, 236, 0.05) 68%,
    rgba(39, 103, 236, 0.4) 100%
  );
  --borde-reflejo-oro: linear-gradient(
    155deg,
    rgba(242, 89, 26, 0.55) 0%,
    rgba(242, 89, 26, 0.08) 32%,
    rgba(255, 185, 143, 0.4) 50%,
    rgba(242, 89, 26, 0.08) 68%,
    rgba(242, 89, 26, 0.55) 100%
  );

  /* ---- Semánticos ---- */
  --exito: #2ed9a8;
  --error: #ff5d6c;
  --whatsapp: #25d366;

  /* ---- Sombras y resplandores orgánicos ---- */
  --sombra-sm: 0 4px 16px rgba(0, 0, 0, 0.35);
  --sombra-md: 0 16px 40px rgba(0, 0, 0, 0.45);
  --sombra-lg: 0 32px 80px rgba(0, 0, 0, 0.55);
  --resplandor-cian: 0 0 0 1px rgba(39, 103, 236, 0.12) inset, 0 8px 32px rgba(39, 103, 236, 0.16),
    0 0 48px rgba(39, 103, 236, 0.2);
  --resplandor-oro: 0 0 0 1px rgba(242, 89, 26, 0.18) inset, 0 8px 32px rgba(242, 89, 26, 0.18),
    0 0 48px rgba(242, 89, 26, 0.24);

  /* ---- Tipografía: leyenda serif + UI geométrica (Google Fonts, ver nota) ---- */
  --font-display: "Cinzel Decorative", Georgia, "Times New Roman", serif;
  --font-accent: "Cormorant Garamond", Georgia, serif;
  --font-body: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
    sans-serif;
  --ls-display: 0.04em;
  --ls-display-ancho: 0.12em;

  --fs-xs: clamp(0.76rem, 0.73rem + 0.15vw, 0.85rem);
  --fs-sm: clamp(0.88rem, 0.85rem + 0.15vw, 0.95rem);
  --fs-base: clamp(1rem, 0.96rem + 0.2vw, 1.08rem);
  --fs-md: clamp(1.15rem, 1.08rem + 0.35vw, 1.35rem);
  --fs-lg: clamp(1.4rem, 1.25rem + 0.75vw, 1.9rem);
  --fs-xl: clamp(1.6rem, 1.35rem + 1.1vw, 2.3rem);
  --fs-2xl: clamp(2rem, 1.6rem + 1.8vw, 2.9rem);
  --fs-3xl: clamp(2.4rem, 1.8rem + 2.6vw, 3.6rem);
  --fs-hero: clamp(2.4rem, 1.7rem + 3.2vw, 4.3rem);

  /* ---- Espaciado ---- */
  --sp-3xs: 0.25rem;
  --sp-2xs: 0.5rem;
  --sp-xs: 0.75rem;
  --sp-sm: 1rem;
  --sp-md: 1.5rem;
  --sp-lg: clamp(2rem, 1.6rem + 2vw, 3.5rem);
  --sp-xl: clamp(3rem, 2rem + 5vw, 6rem);
  --sp-2xl: clamp(4rem, 2.5rem + 8vw, 10rem);

  /* ---- Formas / movimiento ---- */
  --radio-sm: 8px;
  --radio-md: 14px;
  --radio-lg: 24px;
  --radio-pill: 999px;
  --contenedor: 1360px;
  --transicion: 260ms cubic-bezier(0.2, 0.7, 0.3, 1);
  --transicion-lenta: 650ms cubic-bezier(0.16, 0.8, 0.24, 1);
  --transicion-inercia: 420ms cubic-bezier(0.16, 1, 0.3, 1);
  --transicion-elastica: 480ms cubic-bezier(0.34, 1.56, 0.64, 1);
  --header-h: 84px;
  /* Alto estimado del anuncio superior (una línea, ancho de escritorio) —
     .hero lo usa para garantizar que su padding-bottom absorba el espacio
     que header+anuncio ya consumen en el flujo antes de min-height:100svh. */
  --anuncio-h: 40px;
}

/* ==========================================================================
   Reset
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

html,
body {
  overflow-x: hidden;
  width: 100%;
}

body {
  position: relative;
  min-height: 100vh;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.55;
  color: var(--blanco);
  background-color: var(--abismo);
  background-image:
    radial-gradient(ellipse 90% 60% at 50% -10%, rgba(39, 103, 236, 0.1), transparent 62%),
    radial-gradient(ellipse 70% 45% at 88% 12%, rgba(242, 89, 26, 0.05), transparent 55%),
    radial-gradient(ellipse 120% 80% at 50% 120%, var(--teal-mistico), transparent 70%),
    linear-gradient(180deg, var(--abismo-profundo), var(--abismo) 45%, var(--teal-mistico) 100%);
  background-attachment: fixed;
}

/* ---- Auroras: niebla translúcida en movimiento lento (GPU-barato, sin repintado) ---- */
body::before,
body::after {
  content: "";
  position: fixed;
  inset: -20%;
  z-index: -3;
  pointer-events: none;
  background-repeat: no-repeat;
  filter: blur(60px);
  will-change: background-position;
}

body::before {
  background-image: radial-gradient(ellipse 40% 30% at 20% 30%, rgba(39, 103, 236, 0.1), transparent 70%),
    radial-gradient(ellipse 35% 25% at 80% 70%, rgba(242, 89, 26, 0.06), transparent 70%);
  background-size: 200% 200%;
  animation: aurora-deriva-1 46s ease-in-out infinite alternate;
}

body::after {
  background-image: radial-gradient(ellipse 30% 40% at 70% 20%, rgba(6, 51, 144, 0.08), transparent 70%);
  background-size: 220% 220%;
  animation: aurora-deriva-2 62s ease-in-out infinite alternate;
}

@keyframes aurora-deriva-1 {
  from {
    background-position: 0% 0%;
  }
  to {
    background-position: 100% 60%;
  }
}

@keyframes aurora-deriva-2 {
  from {
    background-position: 100% 40%;
  }
  to {
    background-position: 0% 100%;
  }
}

/* ---- Textura de grano: ruido SVG estático, look analógico premium ---- */
.textura-grano {
  position: fixed;
  inset: 0;
  z-index: 1002;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
}

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
}

button {
  cursor: pointer;
}

ul,
ol {
  list-style: none;
  padding: 0;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: var(--ls-display);
  color: var(--blanco-puro);
  text-shadow: 0 0 14px rgba(39, 103, 236, 0.3), 0 0 34px rgba(39, 103, 236, 0.14);
}

:focus-visible {
  outline: 2px solid var(--cian-neon);
  outline-offset: 3px;
  border-radius: var(--radio-sm);
}

::selection {
  background: var(--cian-tenue-fuerte);
  color: var(--blanco-puro);
}

/* Scrollbar general oscuro */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: var(--gris-mistico);
}
::-webkit-scrollbar-thumb {
  background: var(--superficie-alt);
  border-radius: var(--radio-pill);
  border: 2px solid var(--gris-mistico);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--cian-neon-dark);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  html {
    scroll-behavior: auto;
  }
  body::before,
  body::after {
    animation: none;
  }
}

/* ==========================================================================
   Utilidades de layout
   ========================================================================== */

.contenedor {
  width: 100%;
  max-width: var(--contenedor);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 1rem + 2vw, 3rem);
}

.seccion {
  padding-block: var(--sp-2xl);
  position: relative;
}

.seccion--ajustada {
  padding-block: var(--sp-xl);
}

.skip-link {
  position: fixed;
  top: -100%;
  left: var(--sp-sm);
  z-index: 1001;
  background: var(--cian-neon);
  color: var(--gris-mistico);
  font-weight: 700;
  padding: 0.75rem 1.25rem;
  border-radius: var(--radio-sm);
  transition: top var(--transicion);
}

.skip-link:focus {
  top: var(--sp-sm);
}

.cabecera-seccion {
  max-width: 720px;
  margin-bottom: var(--sp-lg);
}

.cabecera-seccion--centro {
  margin-inline: auto;
  text-align: center;
}

.etiqueta-seccion {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cian-neon);
  margin-bottom: var(--sp-sm);
}

.etiqueta-seccion::before {
  content: "";
  width: 22px;
  height: 2px;
  background: currentColor;
  border-radius: var(--radio-pill);
}

.cabecera-seccion h2 {
  font-size: var(--fs-3xl);
  margin-bottom: var(--sp-sm);
}

.cabecera-seccion p {
  color: var(--niebla);
  font-size: var(--fs-md);
}

.nota-imagen {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  color: var(--niebla-tenue);
  margin-top: var(--sp-xs);
}

.texto-degradado {
  background: linear-gradient(120deg, var(--blanco) 20%, var(--cian-neon) 55%, var(--cian-neon-dark) 80%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.texto-degradado--oro {
  background: linear-gradient(120deg, var(--oro-satinado) 10%, var(--oro-claro) 45%, var(--oro-satinado) 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---- Máscara de agua: el titular parece contener agua en movimiento ---- */
.texto-degradado--animado {
  background: linear-gradient(
    115deg,
    var(--blanco) 0%,
    var(--cian-neon) 18%,
    var(--blanco) 32%,
    var(--cian-neon-dark) 50%,
    var(--blanco) 68%,
    var(--cian-neon) 82%,
    var(--blanco) 100%
  );
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: agua-en-texto 9s ease-in-out infinite;
}

@keyframes agua-en-texto {
  0%,
  100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .texto-degradado--animado {
    animation: none;
    background-position: 30% 50%;
  }
}

.sr-solo {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   Reveal en scroll — patrón seguro, upgrade cinematográfico
   Visible por defecto; el JS arma el estado oculto (con blur + escala) solo
   si confirma que IntersectionObserver funciona y no hay preferencia de
   movimiento reducido, así el contenido nunca queda invisible.
   ========================================================================== */

.fade-in {
  opacity: 1;
  transform: none;
  filter: none;
}

.fade-in--armed {
  opacity: 0;
  transform: translateY(28px) scale(0.97);
  filter: blur(6px);
  transition: opacity var(--transicion-lenta), transform var(--transicion-lenta), filter var(--transicion-lenta);
  transition-delay: calc(var(--i, 0) * 70ms);
}

.fade-in--armed.fade-in--visible {
  opacity: 1;
  transform: none;
  filter: blur(0);
}