/* ============================================================
   GSNA FRAMEWORK v2.0
   Design system del sitio Gimnasio Superior Nuevos Andes.
   Réplica fiel de la estructura del template Bobolobo (BYQ
   Framework v4.0, licencia comprada) con la dirección de color
   aprobada por el colegio: multicolor cálido sobre crema; el
   navy/rojo de marca queda para el logo y acentos puntuales.
   Guía completa: /FRAMEWORK.md
   ============================================================ */

/* ---------- Fuente ---------- */
@font-face {
  font-family: 'Parkinsans';
  src: url('../assets/fonts/Parkinsans-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 300 800;
  font-display: swap;
}

/* ---------- Tokens: primitivos ---------- */
:root {
  /* Neutros (estructura Bobolobo: base crema + tinta oscura) */
  --cream: #F6F3F0;
  --cream-deep: #ECE9E6;   /* crema neutro para tiles/secciones (sin tinte amarillo) */
  --white: #FFFFFF;
  --ink: #0E235F;            /* azul oscuro de marca: texto, botones, bandas */
  --ink-soft: color-mix(in srgb, var(--ink) 64%, transparent);
  --ink-subtle: color-mix(in srgb, var(--ink) 40%, transparent);

  /* Marca GSNA (solo logo y acentos puntuales) */
  --gsna-navy: #0E235F;
  --gsna-red: #E7313E;
  --gsna-gold: #BDAF89;

  /* Paleta multicolor (referencias del colegio) — par light/strong */
  --mustard: #E9B438;   --mustard-light: #F7E5B5;
  --coral: #E56A4B;     --coral-light: #F8D8CB;
  --mint: #7FB89B;      --mint-light: #D9EFE1;
  --sky: #7FA5DC;       --sky-light: #DCE6F5;
  --lilac: #B48CD9;     --lilac-light: #E9DCF6;
  --peach: #E0A377;     --peach-light: #FBE5CB;

  /* UI */
  --ui-error: #C94040; --ui-success: #2AD87F; --ui-warning: #C56A21;

  /* ---------- Semánticos (modo claro) ---------- */
  --bg-base: var(--cream);
  --bg-lift: var(--white);
  --tone-strong: var(--ink);
  --tone-medium: var(--ink-soft);
  --tone-subtle: var(--ink-subtle);
  --border-subtle: color-mix(in srgb, var(--ink) 12%, transparent);
  --border-medium: color-mix(in srgb, var(--ink) 32%, transparent);
  --accent: var(--gsna-red);   /* rojo de marca: transiciones y rellenos animados */

  --btn-primary-bg: var(--ink);
  --btn-primary-text: var(--cream);
  --btn-primary-bg-hover: color-mix(in srgb, var(--ink) 84%, black);
  --btn-secondary-bg: color-mix(in srgb, var(--ink) 6%, transparent);
  --btn-secondary-text: var(--ink);
  --btn-secondary-bg-hover: color-mix(in srgb, var(--ink) 13%, transparent);

  /* ---------- Radios (escala Bobolobo) ---------- */
  --radius-small: 8px;
  --radius-default: 20px;
  --radius-large: 32px;
  --radius-full: 100vw;
  --radius-button: 32px;
  --radius-input: 20px;
  --radius-tag: 16px;

  /* ---------- Espaciado ---------- */
  --sp-4: 4px; --sp-8: 8px; --sp-12: 12px; --sp-16: 16px;
  --sp-20: 20px; --sp-24: 24px; --sp-32: 32px; --sp-48: 48px;
  --sp-64: 64px; --sp-80: 80px; --sp-120: 120px;
  --section-xs: 32px; --section-s: 80px; --section-m: 120px;
  --section-l: 160px; --section-xl: 200px;

  /* ---------- Grid ---------- */
  --container-main: 1800px;
  --container-small: 912px;
  --page-padding: 32px;
  --grid-gap: 16px;

  /* ---------- Tipografía (escala Bobolobo) ---------- */
  --font-sans: 'Parkinsans', Arial, sans-serif;
  --w-body: 400; --w-medium: 500; --w-heading: 600; --w-bold: 700;
  --fs-h0: 68px;  --lh-h0: 70px;  --ls-h0: -2px;
  --fs-h1: 50px;  --lh-h1: 56px;  --ls-h1: -1.5px;
  --fs-h2: 36px;  --lh-h2: 42px;  --ls-h2: -1px;
  --fs-h3: 28px;  --lh-h3: 34px;  --ls-h3: -.5px;
  --fs-h4: 23px;  --lh-h4: 30px;  --ls-h4: -.25px;
  --fs-h5: 19px;  --lh-h5: 26px;  --ls-h5: 0px;
  --fs-h6: 16px;  --lh-h6: 20px;  --ls-h6: .5px;
  --fs-body-1: 20px; --lh-body-1: 28px;
  --fs-body-2: 16px; --lh-body-2: 24px;
  --fs-body-3: 14px; --lh-body-3: 20px;
  --fs-button: 14px; --lh-button: 20px;
  --fs-label: 13px;  --lh-label: 16px; --ls-label: .75px;

  /* ---------- Navbar ---------- */
  --nav-height: 72px;
  --nav-height-compact: 56px;
}

/* tablets: entre 768 y 1024 usaba los valores de desktop, que ahi quedan
   grandes. Un escalon intermedio. */
@media (min-width: 768px) and (max-width: 1024px) {
  :root {
    --page-padding: 28px;
    --section-s: 68px; --section-m: 96px; --section-l: 128px; --section-xl: 160px;
    --sp-120: 100px; --sp-80: 68px;
  }
}
@media (max-width: 767px) {
  :root {
    /* Aire en movil (Seb: "todo esta muy apretado"). Los margenes laterales
       pasan de 16 a 22px y el respiro entre secciones de 64 a 84: en una
       pantalla angosta el aire es lo que separa una idea de la siguiente. */
    --page-padding: 22px; --grid-gap: 14px;
    --section-xs: 28px; --section-s: 60px; --section-m: 84px;
    --section-l: 112px; --section-xl: 132px;
    --sp-120: 88px; --sp-80: 64px; --sp-64: 52px; --sp-48: 36px;
    --radius-default: 16px; --radius-large: 24px;
    --fs-h0: 44px; --lh-h0: 46px; --ls-h0: -1.5px;
    --fs-h1: 34px; --lh-h1: 38px; --ls-h1: -1px;
    --fs-h2: 27px; --lh-h2: 32px; --ls-h2: -.5px;
    --fs-h3: 23px; --lh-h3: 28px; --ls-h3: -.25px;
    --fs-h4: 20px; --lh-h4: 25px;
    --fs-h5: 17px; --lh-h5: 23px;
    --fs-h6: 14px; --lh-h6: 18px; --ls-h6: .25px;
    --fs-body-1: 16px; --lh-body-1: 24px;
    --fs-body-2: 14px; --lh-body-2: 20px;
    --fs-body-3: 12px; --lh-body-3: 16px;
    --fs-label: 10px; --lh-label: 12px;
    --nav-height: 60px;
  }
}

/* Tema oscuro (footer / secciones ink) */
.theme-ink {
  --bg-base: var(--ink);
  --bg-lift: color-mix(in srgb, var(--ink) 86%, white);
  --tone-strong: var(--cream);
  --tone-medium: color-mix(in srgb, var(--cream) 64%, transparent);
  --tone-subtle: color-mix(in srgb, var(--cream) 44%, transparent);
  --border-subtle: color-mix(in srgb, var(--cream) 14%, transparent);
  --border-medium: color-mix(in srgb, var(--cream) 40%, transparent);
  --btn-primary-bg: var(--cream);
  --btn-primary-text: var(--ink);
  --btn-primary-bg-hover: var(--white);
  --btn-secondary-bg: color-mix(in srgb, var(--cream) 8%, transparent);
  --btn-secondary-text: var(--cream);
  --btn-secondary-bg-hover: color-mix(in srgb, var(--cream) 16%, transparent);
  background-color: var(--bg-base);
  color: var(--tone-strong);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  font-family: var(--font-sans);
  font-size: var(--fs-body-2);
  line-height: var(--lh-body-2);
  font-weight: var(--w-body);
  background-color: var(--bg-base);
  color: var(--tone-strong);
  -webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; background: none; border: none; cursor: pointer; color: inherit; }

/* ---------- Tipografía ---------- */
.h0, .h1, .h2, .h3, .h4, .h5, h1, h2, h3, h4, h5 {
  font-weight: var(--w-heading);
  color: var(--tone-strong);
  text-wrap: balance;
}
.h0 { font-size: var(--fs-h0); line-height: var(--lh-h0); letter-spacing: var(--ls-h0); }
.h1, h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); }
.h2, h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); }
.h3, h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); }
.h4, h4 { font-size: var(--fs-h4); line-height: var(--lh-h4); letter-spacing: var(--ls-h4); }
.h5, h5 { font-size: var(--fs-h5); line-height: var(--lh-h5); letter-spacing: var(--ls-h5); }
.h6, h6 { font-size: var(--fs-h6); line-height: var(--lh-h6); letter-spacing: var(--ls-h6); }
.body-1 { font-size: var(--fs-body-1); line-height: var(--lh-body-1); }
.body-2 { font-size: var(--fs-body-2); line-height: var(--lh-body-2); }
.body-3 { font-size: var(--fs-body-3); line-height: var(--lh-body-3); }
.label {
  font-size: var(--fs-label); line-height: var(--lh-label);
  letter-spacing: var(--ls-label); font-weight: var(--w-medium);
  text-transform: uppercase;
}
.text-medium { color: var(--tone-medium); }
.text-center { text-align: center; }
.max-ch { max-width: 62ch; }

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: var(--container-main);
  margin-inline: auto;
  padding-inline: var(--page-padding);
}
.container-small { max-width: var(--container-small); }
.section { padding-block: var(--section-m); position: relative; }

/* ---------- Botones (pill, estructura Bobolobo) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-8);
  font-size: var(--fs-button); line-height: var(--lh-button);
  font-weight: var(--w-heading);
  padding: 14px 28px;
  border-radius: var(--radius-button);
  transition: background-color .25s ease, color .25s ease, transform .25s ease;
  white-space: nowrap;
}
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--btn-primary-bg); color: var(--btn-primary-text); }
.btn-primary:hover { background: var(--btn-primary-bg-hover); }

/* ---------- Animación de texto rodando (técnica del template) ----------
   El texto lleva una copia de sí mismo 1.5em abajo hecha con text-shadow.
   Al hover sube 1.5em: la copia entra por abajo y parece un rodillo. */
.btn-text-mask {
  display: block;
  overflow: hidden;
  height: var(--lh-button);
  pointer-events: none;
}
.btn-text {
  display: block;
  text-shadow: 0 1.5em 0 currentColor;
  transition: transform .45s cubic-bezier(.3,.7,.2,1);
}
.btn:hover .btn-text,
.nav-link:hover .btn-text { transform: translateY(-1.5em); }

/* Todos los botones: el relleno rojo crece desde abajo mientras el texto rueda.
   La copia que entra es crema, que contrasta sobre el rojo en cualquier variante. */
.btn-anim { position: relative; overflow: hidden; isolation: isolate; }
.btn-anim .btn-text-mask,
.btn-anim .btn-arrow { position: relative; z-index: 2; }
.btn-anim .btn-text { text-shadow: 0 1.5em 0 var(--cream); }
.btn-anim .btn-bg {
  position: absolute; inset: 0; z-index: 1;
  background: var(--accent);
  border-radius: inherit;
  transform: translateY(101%);
  transition: transform .45s cubic-bezier(.3,.7,.2,1);
}
.btn-anim:hover .btn-bg { transform: translateY(0); }
/* el fondo propio del botón no cambia: el color lo pone .btn-bg */
.btn-anim:hover { background: var(--btn-primary-bg); }
.btn-anim.btn-on-video:hover { background: var(--cream); }
.btn-anim.btn-secondary:hover { background: var(--btn-secondary-bg); }
.btn-anim.btn-ghost-light:hover {
  background: color-mix(in srgb, white 14%, transparent);
  border-color: color-mix(in srgb, white 32%, transparent);
}
/* la flecha se va a crema junto con el texto que entra */
.btn-anim:hover .btn-arrow { color: var(--cream); transform: translateX(4px); }
.btn-arrow { transition: transform .25s ease, color .35s ease; }

/* los nav-link usan la misma máscara pero con el line-height del menú */
.nav-link .btn-text-mask { height: 1.35em; }

/* Botones circulares (flechas): la flecha sale y su copia entra por el otro lado */
.btn-circle { position: relative; overflow: hidden; }
.btn-circle .btn-arrow-mask {
  display: grid; place-items: center;
  overflow: hidden;
  width: 1.2em; height: 1.2em;
}
.btn-circle .btn-arrow-slide {
  display: block;
  text-shadow: -1.2em 0 0 currentColor;
  transition: transform .42s cubic-bezier(.3, .7, .2, 1);
}
.btn-circle:hover .btn-arrow-slide { transform: translateX(1.2em); }
/* la flecha "anterior" viaja al revés */
.btn-circle[data-slide="-1"] .btn-arrow-slide { text-shadow: 1.2em 0 0 currentColor; }
.btn-circle[data-slide="-1"]:hover .btn-arrow-slide { transform: translateX(-1.2em); }
.btn-secondary { background: var(--btn-secondary-bg); color: var(--btn-secondary-text); }
.btn-secondary:hover { background: var(--btn-secondary-bg-hover); }
.btn-ghost-light {
  background: color-mix(in srgb, white 14%, transparent);
  color: white;
  border: 1px solid color-mix(in srgb, white 32%, transparent);
  backdrop-filter: blur(6px);
}
.btn-ghost-light:hover { background: color-mix(in srgb, white 26%, transparent); }
.btn-on-video { background: var(--cream); color: var(--ink); }
.btn-on-video:hover { background: var(--white); }
.btn-arrow { display: inline-block; transition: transform .25s ease; }
.btn:hover .btn-arrow { transform: translateX(4px); }
.btn-circle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--btn-secondary-bg);
  transition: background .25s ease, transform .25s ease;
}
.btn-circle:hover { background: var(--btn-secondary-bg-hover); }

/* ---------- Tag / chip ---------- */
.tag {
  display: inline-flex; align-items: center; gap: var(--sp-8);
  font-size: var(--fs-label); letter-spacing: var(--ls-label);
  font-weight: var(--w-medium); text-transform: uppercase;
  padding: 6px 14px;
  border-radius: var(--radius-tag);
}
.tag-solid { background: var(--bg-lift); color: var(--tone-strong); }
.tag-outline { border: 1px solid var(--border-subtle); color: var(--tone-medium); }

/* ---------- Card ---------- */
.card {
  background: var(--bg-lift);
  border-radius: var(--radius-large);
  padding: var(--sp-32);
  position: relative;
  overflow: hidden;
}
.tint-mustard { background: var(--mustard-light); }
.tint-coral { background: var(--coral-light); }
.tint-mint { background: var(--mint-light); }
.tint-sky { background: var(--sky-light); }
.tint-lilac { background: var(--lilac-light); }
.tint-peach { background: var(--peach-light); }

/* ---------- Reveals al entrar en pantalla ----------
   Solo se ocultan si el JS está vivo (clase .js en <html>), así una falla
   del script nunca deja contenido invisible. Los dispara IntersectionObserver
   añadiendo .is-visible; la animación es CSS, no depende de GSAP. */
.js .reveal, .js .reveal-scale {
  opacity: 0;
  transition: opacity .8s cubic-bezier(.2, .7, .2, 1),
              transform .8s cubic-bezier(.2, .7, .2, 1);
  transition-delay: var(--reveal-delay, 0s);
  will-change: opacity, transform;
}
.js .reveal { transform: translateY(28px); }
.js .reveal-scale { transform: scale(.94); }
.js .reveal.is-visible, .js .reveal-scale.is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .js .reveal, .js .reveal-scale { opacity: 1; transform: none; transition: none; }
}

/* ---------- Utilidades ---------- */
.flex { display: flex; } .flex-col { flex-direction: column; }
.items-center { align-items: center; } .justify-between { justify-content: space-between; }
.gap-8 { gap: var(--sp-8); } .gap-16 { gap: var(--sp-16); }
.gap-24 { gap: var(--sp-24); } .gap-32 { gap: var(--sp-32); } .gap-48 { gap: var(--sp-48); }
.mt-8 { margin-top: var(--sp-8); }
.mt-16 { margin-top: var(--sp-16); } .mt-24 { margin-top: var(--sp-24); }
.mt-32 { margin-top: var(--sp-32); } .mt-48 { margin-top: var(--sp-48); } .mt-64 { margin-top: var(--sp-64); }
@media (max-width: 767px) { .hide-mobile { display: none !important; } }
@media (min-width: 768px) { .only-mobile { display: none !important; } }


/* ============================================================
   RED DE SEGURIDAD: proporcion de las imagenes
   Los atributos width/height del <img> existen para que el navegador reserve
   el hueco y no salte el layout, pero si el CSS fija el ancho y NO dice nada
   del alto, el atributo se aplica LITERAL y deforma la imagen. Paso con el
   dibujo de la filosofia: 760x760 se pintaba 279x760.
   El selector es `img` a secas A PROPOSITO: pesa menos que cualquier regla
   con clase, asi `.hz-photo img { height: 100% }` y demas siguen mandando,
   pero pesa mas que el atributo del HTML, que es solo una sugerencia. Con
   `img[width][height]` la regla ganaba a las clases y rompia las fotos que
   llenan su caja.
   ============================================================ */
img { max-width: 100%; height: auto; }

/* El navegador trae `[hidden] { display: none }`, pero pesa menos que CUALQUIER
   regla de autor: `.btn { display: flex }` le ganaba y los botones ocultos se
   veian igual. En el formulario salian los tres a la vez (Atras, Continuar y
   Enviar solicitud) aunque el JS los ocultaba bien. El !important aqui es
   correcto: hidden significa oculto, no "oculto salvo que alguien opine". */
[hidden] { display: none !important; }


/* ---------- Enlace terciario ----------
   Lo usa "Leer el articulo" en /noticias. Existia en el HTML pero no tenia
   NINGUNA regla: se pintaba como texto plano y no se leia como accion.
   No es un boton solido a proposito: es un enlace de salida a un medio
   externo, no la accion principal de la pagina. */
.btn-tertiary {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--gsna-red);
  font-weight: var(--w-heading);
  text-decoration: none;
  padding: 4px 0;
  position: relative;
}
.btn-tertiary::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1.5px; background: currentColor;
  transform: scaleX(0); transform-origin: right;
  transition: transform .45s cubic-bezier(.3, .7, .2, 1);
}
.btn-tertiary:hover::after { transform: scaleX(1); transform-origin: left; }
.btn-tertiary:hover { color: var(--ink); }