/**
 * Base — reset, tipografía (§3) y utilidades de retícula/ritmo vertical (§2).
 * Depende de tokens.css (custom properties).
 *
 * Los @font-face de abajo esperan los ficheros en /assets/fonts/. Regular de
 * ambas familias ya está; faltan los pesos SemiBold/Bold/ExtraBold de
 * Bricolage Grotesque y Medium/SemiBold de Geist — ver assets/fonts/README.txt
 * para la lista exacta y el nombre de fichero esperado. Hasta que estén,
 * esos pesos caen al fallback del stack (no rompe nada, solo se ve con la
 * fuente del sistema).
 */

/* ---------- Fuentes ---------- */

@font-face {
	font-family: 'Bricolage Grotesque';
	src: url('../fonts/BricolageGrotesque-Regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Bricolage Grotesque';
	src: url('../fonts/BricolageGrotesque-SemiBold.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Bricolage Grotesque';
	src: url('../fonts/BricolageGrotesque-Bold.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Bricolage Grotesque';
	src: url('../fonts/BricolageGrotesque-ExtraBold.woff2') format('woff2');
	font-weight: 800;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Geist';
	src: url('../fonts/Geist-Regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Geist';
	src: url('../fonts/Geist-Medium.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Geist';
	src: url('../fonts/Geist-SemiBold.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

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

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--lgzm-paper);
	color: var(--lgzm-ink);
	font-family: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
	/* Body M móvil (§3). Sube a la escala desktop en el media query de
	   tipografía, junto con el resto de clases t-*. */
	font-size: clamp(14px, 13.30px + 0.188vw, 16px);
	line-height: clamp(21px, 19.59px + 0.376vw, 25px);
}
img, picture, svg, video, canvas { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4, p, figure { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }

:focus-visible {
	outline: 2px solid var(--lgzm-accent);
	outline-offset: 2px;
}

/* Skip link (§10, accesibilidad): oculto hasta que recibe el foco por
   teclado, entonces aparece fijo arriba a la izquierda. */
/* Visible solo para lectores de pantalla. Se usa en encabezados que la
   maqueta no pinta pero que el documento necesita (p. ej. el <h1> de
   /premios-tiktok/, cuya cabecera visible empieza en <h2>).
   clip-path + 1px y no display:none ni visibility:hidden: esos dos lo
   sacarían también del árbol de accesibilidad, que es justo lo contrario
   de lo que se busca. */
.lgzm-solo-lectores {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.lgzm-skip-link {
	position: absolute;
	top: -100px;
	left: 12px;
	z-index: 200;
	padding: 12px 20px;
	background: var(--lgzm-accent);
	color: var(--lgzm-on-ink);
	border-radius: var(--lgzm-radius-8);
	text-decoration: none;
	font-family: 'Geist', sans-serif;
	font-weight: 600;
	font-size: 15px;
	transition: top var(--lgzm-dur-fast) var(--lgzm-ease-out);
}
.lgzm-skip-link:focus-visible {
	top: 12px;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
	.lgzm-btn:active,
	.lgzm-header-bar__cta:active,
	.lgzm-header-bar__toggle:active,
	.lgzm-carousel__arrow:active,
	.lgzm-lightbox__close:active,
	.forminator-button-submit:active {
		transform: none;
	}
	.lgzm-lightbox__arrow:active {
		transform: translateY(-50%);
	}
}

/* ---------- Retícula y ritmo vertical (§2) ---------- */

.lgzm-container {
	width: 100%;
	max-width: var(--lgzm-container);
	margin-inline: auto;
	padding-inline: var(--lgzm-margin-mobile);
}

/* Entre 600 y 1023px el contenedor se quedaba con los 20px de margen de
   móvil, dejando líneas de 120+ caracteres. Por encima de 1024 no hace
   falta: max-width: 1200px ya deja aire a los lados, y tocarlo ahí
   cambiaría el frame de escritorio de Figma. */
@media (min-width: 600px) and (max-width: 1023.98px) {
	.lgzm-container {
		padding-inline: clamp(20px, 5vw, 56px);
	}
}

/* Paneles a sangre que necesitan el gutter grande de escritorio (p. ej. contenido
   dentro de un fondo full-bleed que no usa .lgzm-container). */
.lgzm-inset {
	padding-inline: var(--lgzm-margin-mobile);
}

/* Cada sección lleva este padding arriba y abajo: 80px entre dos secciones en
   móvil, 128px en desktop (§2). No usar otros valores. */
.lgzm-section {
	padding-block: var(--lgzm-section-mobile);
}

@media (min-width: 1024px) {
	.lgzm-inset { padding-inline: var(--lgzm-gutter-desktop); }
	.lgzm-section { padding-block: var(--lgzm-section-desktop); }
}

/* La cabecera es position: fixed y su borde inferior queda a ~90px del
   borde superior de la ventana en móvil y ~83px en escritorio. Sin esto,
   cualquier salto de ancla (#grupos, #faq, los enlaces del footer…)
   deja el título de la sección de destino tapado por la barra. */
.lgzm-section,
.lgzm-hero,
#main {
	scroll-margin-top: 96px;
}

/* ---------- Tipografía (§3) ---------- */
/* Bricolage Grotesque: siempre en caja mixta, nunca en versales. */

/* Los tamaños interpolan linealmente entre los dos frames de Figma: cada
   clamp() da exactamente el valor móvil a 375px y el de escritorio a
   1440px, y algo razonable en todo el rango intermedio. Antes saltaban de
   golpe en 1024px y a 768px el H1 se quedaba a 34px sobre una línea de
   728px de ancho. letter-spacing y font-weight no interpolan: son ajustes
   ópticos discretos y siguen en el media query del final del fichero. */

.t-display-h1 {
	font-family: 'Bricolage Grotesque', serif;
	font-weight: 700;
	font-size: clamp(34px, 20.62px + 3.568vw, 72px);
	line-height: clamp(36px, 23.32px + 3.38vw, 72px);
	letter-spacing: -0.02em;
}
.t-display-h2 {
	font-family: 'Bricolage Grotesque', serif;
	font-weight: 700;
	font-size: clamp(28px, 18.85px + 2.441vw, 54px);
	line-height: clamp(31px, 22.20px + 2.347vw, 56px);
	letter-spacing: -0.02em;
}
.t-display-h3 {
	font-family: 'Bricolage Grotesque', serif;
	font-weight: 600;
	font-size: clamp(21px, 16.42px + 1.221vw, 34px);
	line-height: clamp(25px, 20.42px + 1.221vw, 38px);
	letter-spacing: -0.015em;
}
.t-number {
	font-family: 'Bricolage Grotesque', serif;
	font-weight: 800;
	font-size: clamp(40px, 35.77px + 1.127vw, 52px);
	line-height: clamp(40px, 35.77px + 1.127vw, 52px);
	letter-spacing: -0.02em;
}
.t-card {
	font-family: 'Bricolage Grotesque', serif;
	font-weight: 600;
	font-size: clamp(17px, 15.94px + 0.282vw, 20px);
	line-height: clamp(22px, 20.59px + 0.376vw, 26px);
	letter-spacing: -0.005em;
}
.t-row {
	font-family: 'Bricolage Grotesque', serif;
	font-weight: 600;
	font-size: clamp(15px, 14.30px + 0.188vw, 17px);
	line-height: clamp(21px, 19.94px + 0.282vw, 24px);
	letter-spacing: -0.005em;
}
.t-body-l {
	font-family: 'Geist', sans-serif;
	font-weight: 400;
	font-size: clamp(15px, 13.94px + 0.282vw, 18px);
	line-height: clamp(23px, 21.24px + 0.470vw, 28px);
}
.t-body-m {
	font-family: 'Geist', sans-serif;
	font-weight: 400;
	font-size: clamp(14px, 13.30px + 0.188vw, 16px);
	line-height: clamp(21px, 19.59px + 0.376vw, 25px);
}

/* Sin variante móvil definida en la especificación: mismo tamaño en ambos breakpoints. */
.t-body-s {
	font-family: 'Geist', sans-serif;
	font-weight: 400;
	font-size: 14px;
	line-height: 21px;
}
.t-nav {
	font-family: 'Geist', sans-serif;
	font-weight: 500;
	font-size: 15px;
	line-height: 15px;
}
.t-button {
	font-family: 'Geist', sans-serif;
	font-weight: 600;
	font-size: 15px;
	line-height: 15px;
}
.t-micro {
	font-family: 'Geist', sans-serif;
	font-weight: 400;
	font-size: 12px;
	line-height: 18px;
}

@media (min-width: 1024px) {
	/* Solo lo que no interpola: ajustes ópticos discretos. Los tamaños los
	   resuelve el clamp() de la escala móvil. */
	.t-display-h1 {
		letter-spacing: -0.025em;
	}
	.t-display-h3 {
		font-weight: 700;
	}
	.t-card {
		letter-spacing: -0.01em;
	}
}

/* ---------- Revelado al entrar en pantalla (reveal.js) ---------- */

/* El estado oculto cuelga de .lgzm-reveal-ready, que pone reveal.js en
   <html> nada más arrancar. Si el script no corre (error, bloqueador,
   navegador antiguo) esta regla no aplica y la página se ve entera: el
   contenido nunca depende de que el JS funcione. */
.lgzm-reveal-ready [data-lgzm-reveal] {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 550ms var(--lgzm-ease-out), transform 550ms var(--lgzm-ease-out);
}
.lgzm-reveal-ready [data-lgzm-reveal].is-revealed {
	opacity: 1;
	transform: none;
}

/* El escalonado es decorativo: 90ms entre tarjetas, y nunca bloquea la
   interacción porque las tarjetas ya están en su sitio y son pulsables
   desde el primer fotograma (solo cambian opacidad y desplazamiento). */
.lgzm-reveal-ready [data-lgzm-reveal] .lgzm-carousel__item:nth-child(2),
.lgzm-reveal-ready [data-lgzm-reveal] .lgzm-nivel:nth-child(2) {
	transition-delay: 90ms;
}
.lgzm-reveal-ready [data-lgzm-reveal] .lgzm-carousel__item:nth-child(3),
.lgzm-reveal-ready [data-lgzm-reveal] .lgzm-nivel:nth-child(3) {
	transition-delay: 180ms;
}
.lgzm-reveal-ready [data-lgzm-reveal] .lgzm-carousel__item:nth-child(4) {
	transition-delay: 270ms;
}

@media (prefers-reduced-motion: reduce) {
	.lgzm-reveal-ready [data-lgzm-reveal] {
		opacity: 1;
		transform: none;
		transition: none;
	}
}