/* ============================================================================ IA² WEEK — estilos de la landing. Los colores, las tipografias, el reset y los anchos de caja estan en ia2week-tokens.css, que se encola ANTES que este archivo. Aqui no se escribe ni un hexadecimal: todo sale de las variables --iaw-*. COMO SE LEE ESTE ARCHIVO. La maqueta original (IA2 Week Landing) llevaba los estilos escritos a mano en el atributo style de cada etiqueta. Aqui esta lo mismo, en clases con prefijo iaw-, en el orden en que las secciones aparecen en la pagina: 0 · Piezas comunes cajas, rotulos, titulares, parrafos, botones 1 · Barra superior la unica cosa fija de la pagina 2 · Hero titular, datos del evento y formulario 3 · Las tres preguntas seccion oscura con tarjetas de vidrio 4 · El concepto seccion clara con las dos IA 5 · Agenda lo que se demuestra + para quien es 6 · Preguntas frecuentes 7 · Cierre 8 · Pie 8B · La pagina de gracias (/thank-you-page-aiweek/) 8C · La pagina 404 9 · Boton fijo de movil 10 · Animaciones TODO cuelga de .ia2week-landing, la clase del — que la llevan LAS DOS paginas del paquete, la landing y la de gracias: es la clase del paquete y de ella cuelgan el reset y la paleta. No es cosmetico: este CSS pinta el body entero, asi que si se colara en otra pagina se la comeria. La clase es lo que garantiza que no pueda pasar. La pagina de gracias lleva ademas .ia2week-gracias, y de ahi cuelga solo lo que en ella es distinto (seccion 8B). ============================================================================ */ /* ═══════════════════════════════════════════════════════════════════════════ 0 · PIEZAS COMUNES Las secciones alternan fondo claro y fondo oscuro. En vez de duplicar cada componente en dos versiones, los componentes se definen para fondo CLARO y las secciones oscuras llevan la clase .iaw-oscuro, que reasigna los colores. Un componente nuevo solo tiene que declarar su color claro y, si va a aparecer sobre morado, su linea correspondiente en el bloque de .iaw-oscuro. ═══════════════════════════════════════════════════════════════════════════ */ /* La caja de contenido de una seccion. 96px arriba y abajo es el ritmo de toda la pagina; en movil baja a 64 (ver el bloque responsive al final). */ .ia2week-landing .iaw-caja{ max-width:var(--iaw-caja); margin:0 auto; padding:96px 24px; display:flex; flex-direction:column; gap:40px; } /* Encabezado de seccion: rotulo, titular y parrafos de entrada. Se limita el ancho a 760px porque un titular de 3rem a todo lo ancho de 1080 se lee de lado a lado y cansa. */ .ia2week-landing .iaw-intro{ max-width:760px; display:flex; flex-direction:column; gap:18px; } .ia2week-landing .iaw-rotulo{ font-size:13px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--iaw-vio); } .ia2week-landing .iaw-titulo{ font-weight:700; font-size:clamp(2rem, 4vw, 3rem); line-height:1.15; letter-spacing:-.02em; color:var(--iaw-ink); text-wrap:pretty; /* evita la palabra huerfana en la ultima linea */ } .ia2week-landing .iaw-parrafo{ font-size:18px; line-height:1.6; color:var(--iaw-tinta); } /* Fondo morado: los mismos componentes, otros colores. */ .ia2week-landing .iaw-oscuro .iaw-rotulo{ color:var(--iaw-vio-hi); } .ia2week-landing .iaw-oscuro .iaw-titulo{ color:var(--iaw-blanco); } .ia2week-landing .iaw-oscuro .iaw-parrafo{ color:var(--iaw-crema); } /* Realces dentro de un titular o un parrafo. El "fuerte" ademas pone negrita: se usa para la sigla IA², que es marca y no enfasis. */ .ia2week-landing .iaw-realce{ color:var(--iaw-vio-hi); } .ia2week-landing .iaw-realce-fuerte{ color:var(--iaw-vio-hi); font-weight:700; } /* El 2 de IA². Va en ^{real y no como texto "IA2" para que un lector de
pantalla lo lea bien y para que se pueda copiar. El tamaño relativo es el de
la maqueta: .65em dentro de texto y .7em en la barra. */
.ia2week-landing .iaw-exp{ font-size:.65em; }

/* Cita al pie de seccion, en lila. Es un remate, no un parrafo mas: por eso va
en un tono mas bajo que el cuerpo. */
.ia2week-landing .iaw-nota{
font-size:18px;
line-height:1.6;
color:var(--iaw-lila);
max-width:720px;
}

/* ── Botones ────────────────────────────────────────────────────────────────
Tres variantes y ninguna es un}