/*
  Base: variables de color, reset y tipografía.

  Los colores salen del CSS publicado de Webflow y están documentados en la
  sección 4 de CLAUDE.md. Si hay que cambiar un color, se cambia aquí y en
  CLAUDE.md, nunca suelto dentro de un componente.
*/

:root {
  /* Fondos */
  --bg-dark: #0A0E22;          /* páginas oscuras; era #181C39 hasta el 28/09/2026 (decisión de la directora) */
  --bg-light: #F0F0F0;
  --bg-white: #FBFBFB;

  /* Marca y acentos */
  --logo-blue: #007FFF;
  --cta: #0B81AA;
  --cta-shadow: rgba(11, 129, 170, 0.50);
  --accent-cyan: #01FDFD;
  --hover-cyan: #0EBBE3;
  --blue-mid: #3389C1;
  --blue-pale: #DCE8FF;
  --cyan-pale: #D2F7FF;
  --warm-grey: #E4E0E0;

  /* Texto */
  --text-1: #FFFFFF;
  --text-1-50: rgba(255, 255, 255, 0.50);
  --text-2: #F0F0F0;
  --text-3: #C2C2C2;
  --text-4: #6E6E6E;

  /* Superficies translúcidas */
  --glass: rgba(255, 255, 255, 0.10);
  --pill-light: rgba(240, 240, 240, 0.25);
  --pill-light-veil: rgba(240, 240, 240, 0.18);
  --border-light: rgba(255, 255, 255, 0.20);
  --hover-warm-20: rgba(228, 224, 224, 0.20);

  /*
    El brillo de las tarjetas: una sombra de color claro, sin desplazamiento,
    que rodea la tarjeta como un halo. Medido del mockup: llega a #F0F0F0 al
    20 % justo en el borde y se apaga en unos 20 px.
  */
  --brillo-tarjeta: 0 0 24px rgba(240, 240, 240, 0.44);

  /*
    Header de Miembros: blanco a --cta, como estaba en Webflow.

    ⚠️ Los mockups son capturas en Display P3, no en sRGB. Al muestrear sus
    píxeles, los azules y cianes saturados salen con demasiado rojo: este
    degradado parecía terminar en #3B82A8 cuando en realidad termina en
    #0B81AA. Convertido de P3 a sRGB, el degradado medido cae sobre la recta
    blanco → #0B81AA con menos de 5 niveles de diferencia en todo su recorrido.
    Cualquier color saturado que se mida de un mockup hay que convertirlo.
  */
  --grad-miembros: linear-gradient(180deg, #FFFFFF, #0B81AA);

  /*
    Los tres círculos de las membresías de la cabecera de Nosotros. Medidos
    del mockup y ya convertidos de P3 a sRGB; son los tonos de las tres
    credenciales (fundadores, honorarios y asociados).
  */
  --membresia-fundadores: #090A5A;
  --membresia-honorarios: #2C6797;
  --membresia-asociados: #A5A5A5;

  /*
    La banda de Misión y Visión, medida del mockup (ya en sRGB): azul
    noche a la izquierda, azul medio a la mitad y el celeste pálido de las
    credenciales al final. La tarjeta de cristal difumina ese final.
  */
  --grad-proposito: linear-gradient(90deg, #22274F 0%, #1F5589 48%, #D9E9F0 100%);

  /*
    El final de la agenda de Encuentros: del azul noche de la página a un
    azul medio justo donde empieza el pie, que lo corta en seco. Medido del
    mockup (ya en sRGB).
  */
  --agenda-fin: #3182B8;

  /*
    Celeste claro de la palabra "aula" en la landing de noviembre. Es el de
    los contornos del globo; el mockup de la landing lo usa también aquí.
  */
  --celeste-claro: #82DBFA;

  /* Azul acero de la landing de noviembre: la franja de la cuenta regresiva y los íconos de los ejes. */
  --azul-acero: #5C94AC;

  /* Tarjeta de "20+ Conferencistas" en la landing de noviembre. */
  --celeste-hielo: #D9E9F0;

  /* El panel celeste del formulario de Contáctanos. Medido del mockup y pasado a sRGB. */
  --panel-contacto: #AED0E0;

  /*
    Sombra de las tarjetas sobre fondo claro. Medida del mockup: oscurece un
    12 % justo en el borde y se apaga en unos 8 px.
  */
  --sombra-tarjeta-clara: 0 1px 10px rgba(0, 0, 0, 0.25);

  /* Sombra de las fotos del Comité, más suave que la de las tarjetas: medida del mockup. */
  --sombra-foto: 0 2px 12px rgba(0, 0, 0, 0.12);

  /* Medidas compartidas */
  --container-width: 90vw;
  --container-max: 1440px;
  --navbar-h: 90px;          /* alto real de la barra; se ajusta por breakpoint */
  --button-height: 42px;
  --radius-pill: 100px;

  /* Tipografía */
  --font-body: 'Fira Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --text-body: 1rem;
  --leading-body: 1.6;
}

/* ---------- Reset ---------- */

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

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd {
  margin: 0;
}

html {
  /* Que el ancla de un enlace no quede tapada por el navbar pegajoso. */
  scroll-padding-top: 6rem;
  -webkit-text-size-adjust: 100%;
}

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

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

/* ---------- Tipografía ---------- */

body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: 1.3;
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

a {
  color: inherit;
}

/* ---------- Los dos tipos de página ---------- */

/*
  El tipo lo pone rial_page_type() como clase del <body>. El fondo va en
  <html> además de en <body> para que, al rebotar el scroll en iOS, no
  asome una franja blanca.
*/

html:has(body.page-dark),
body.page-dark {
  background-color: var(--bg-dark);
  color: var(--text-2);
}

html:has(body.page-light),
body.page-light {
  background-color: var(--bg-light);
  color: var(--bg-dark);
}

/* Respaldo para navegadores sin :has() */
body.page-dark {
  background-color: var(--bg-dark);
}

body.page-light {
  background-color: var(--bg-light);
}

/* ---------- Accesibilidad ---------- */

/* Salto al contenido: invisible hasta que se enfoca con el teclado. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 2000;
  padding: 0.75rem 1.25rem;
  background-color: var(--bg-dark);
  color: var(--text-1);
  border-radius: 0 0 8px 0;
}

.skip-link:focus {
  left: 0;
}

/* Foco visible y consistente en todo el sitio. */
:focus-visible {
  outline: 2px solid var(--accent-cyan);
  outline-offset: 3px;
}

/* Solo para lectores de pantalla. */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/*
  Quien pidió menos movimiento en su sistema, recibe menos movimiento.
  Las animaciones del sitio son la última fase del proyecto, pero la regla
  queda puesta desde el principio para no olvidarla.
*/
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}