/* =========================================================================
   ESTUDANZA — Gran Gala Classique
   Landing informativa · mobile only
   ========================================================================= */

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

/* Display / serif. OJO: la versión DEMO de Juana Alt no trae glifos
   acentuados (á é í ó ú ñ ¡ ¿). El navegador sustituye esos caracteres
   por la siguiente fuente de la pila, por eso Georgia va inmediatamente
   después: es la serif que menos desentona en la sustitución. */
@font-face {
	font-family: "Juana Alt";
	src:
		url("../assets/fonts/juana-alt-regular.woff2") format("woff2"),
		url("../assets/fonts/juana-alt-regular.woff") format("woff");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/* Gotham: los tres pesos que usa el diseño. */
@font-face {
	font-family: "Gotham";
	src:
		url("../assets/fonts/gotham-light.woff2") format("woff2"),
		url("../assets/fonts/gotham-light.woff") format("woff");
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Gotham";
	src:
		url("../assets/fonts/gotham-book.woff2") format("woff2"),
		url("../assets/fonts/gotham-book.woff") format("woff");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Gotham";
	src:
		url("../assets/fonts/gotham-medium.woff2") format("woff2"),
		url("../assets/fonts/gotham-medium.woff") format("woff");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
/*
@font-face {
	font-family: "Gotham";
	src:
		url("../assets/fonts/gotham-book.woff2") format("woff2"),
		url("../assets/fonts/gotham-book.woff") format("woff");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Gotham";
	src:
		url("../assets/fonts/gotham-medium.woff2") format("woff2"),
		url("../assets/fonts/gotham-medium.woff") format("woff");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
*/

/* ---------- Tokens ----------------------------------------------------- */

:root {
	/* Paleta muestreada del arte del header */
	--mint: #e4f1eb; /* fondo de toda la pieza */
	--mint-deep: #d5e7df; /* respaldo fuera de la columna */
	--green-deep: #2e6a5c;
	--green: #6c9c8e; /* barra del programa */
	--green-soft: #a8c4bb; /* filete bajo el titulo */
	--green-meta: #7ba99b; /* fecha y teatro */
	--coral: #dd4a2d;
	--ink: #353131; /* del inspector del diseño */
	--ink-soft: #55605b;
	--ink-faint: #8b9a93;

	--font-display: "Juana Alt", Georgia, "Times New Roman", serif;
	--font-sans: "Gotham", Arial, Helvetica, sans-serif;

	/* Ritmo vertical */
	--gap-xs: 0.5rem;
	--gap-sm: 1rem;
	--gap-md: 2rem;
	--gap-lg: 3.25rem;
	--gap-xl: 4.5rem;

	--shell: 433px; /* ancho nativo del arte */
	/* 39px exactos a 433px de ancho (9vw); en pantallas menores cede
	   en proporcion para no comerse la columna. */
	--pad: clamp(1.25rem, 9vw, 2.4375rem);
}

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

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

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

body {
	margin: 0;
	background: var(--mint-deep);
	color: var(--ink);
	font-family: var(--font-sans);
	font-size: 100%;
	line-height: 1.75;
	text-align: center;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img {
	display: block;
	max-width: 100%;
	height: auto;
}

h1,
h2,
h3,
p,
figure,
figcaption {
	margin: 0;
}

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

/* ---------- Contenedor ------------------------------------------------- */

.shell {
	max-width: var(--shell);
	margin-inline: auto;
	background: var(--mint);
	overflow-x: hidden;
}

/* En pantallas anchas la columna móvil se sostiene sola, con un borde
   suave que la separa del fondo. */
@media (min-width: 560px) {
	.shell {
		box-shadow: 0 0 3rem rgb(46 106 92 / 0.12);
	}
}

/* ---------- Hero ------------------------------------------------------- */

.hero img {
	width: 100%;
}

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

.display {
	font-family: var(--font-display);
	font-weight: 400;
	color: var(--green-deep);
	line-height: 1.15;
	letter-spacing: 0.01em;
}

.display--lg {
	font-size: clamp(1.75rem, 8vw, 2.15rem);
}

.display--md {
	font-size: clamp(1.5rem, 6.8vw, 1.85rem);
}

/* ---------- Introducción ---------------------------------------------- */

/* Filete corto bajo el título */
.rule {
	width: 7rem;
	height: 0;
	margin: 1.6rem auto 0;
	border: 0;
	border-top: 1px solid var(--green-soft);
}

.intro {
	padding: var(--gap-lg) var(--pad) var(--gap-md);
}

.intro p {
	margin-top: 2.25rem;
	font-size: 1.125rem; /* 18px */
	line-height: 1.5556; /* 28px */
	color: var(--ink);
	text-wrap: pretty;
}

/* Va con la especificidad subida: `.intro p` pesa mas que una clase
   suelta y le pisaba el tamaño. */
.intro p.intro__thanks {
	margin-top: 2.25rem;
	font-size: 0.875rem; /* 14px */
	line-height: 1.5714; /* 22px */
	color: var(--ink);
}

/* Firma / logo */
.brand {
	display: block;
	margin-top: 3rem;
	text-decoration: none;
	color: inherit;
}

.brand img {
	width: 9rem;
	margin-inline: auto;
}

.brand__url {
	display: block;
	margin-top: 0.9rem;
	font-size: 0.875rem; /* 14px */
	line-height: 1.5714; /* 22px */
	color: var(--ink);
}

/* ---------- Barra del programa ---------------------------------------- */

.billboard {
	margin-top: 1.5rem;
}

.billboard__bar {
	display: grid;
	gap: 0;
	margin-inline: clamp(1.5rem, 10vw, 2.7rem);
	padding: 1.2rem 1rem;
	background: var(--green);
	color: #fff;
	font-family: var(--font-sans);
	font-size: 1.25rem; /* 20px */
	font-weight: 400;
	line-height: 1.3; /* 26px */
	text-transform: uppercase;
}

.billboard__meta {
	display: grid;
	gap: 0;
	padding: 2.4rem var(--pad) 0;
	color: var(--green-meta);
	font-size: 1.375rem; /* 22px */
	font-weight: 300; /* Gotham Light */
	line-height: 1.2727; /* 28px */
	text-transform: uppercase;
}

/* ---------- Programa --------------------------------------------------- */

.program {
	padding: 0 var(--pad) var(--gap-lg);
	counter-reset: piece;
}

.piece {
	counter-increment: piece;
	padding-top: 2.6rem;
}

/* Número de orden, sobre cada pieza */
.piece::before {
	content: counter(piece);
	display: block;
	margin-bottom: 2.1rem;
	font-family: var(--font-sans);
	font-size: 1.125rem; /* 18px */
	line-height: 1;
	color: var(--ink-faint);
}

.piece__title {
	font-family: var(--font-sans);
	font-weight: 500; /* Gotham Medium */
	font-size: 1.375rem; /* 22px */
	line-height: 1.2727; /* 28px */
	text-transform: uppercase;
	color: var(--coral);
}

.piece__subtitle {
	margin-top: 0.2rem;
	font-size: 1.125rem; /* 18px */
	font-weight: 500; /* Gotham Medium */
	line-height: 1.5556; /* 28px */
	color: var(--ink);
}

.cast {
	margin-top: 1.15rem;
	font-size: 1.125rem; /* 18px */
	line-height: 1.5556; /* 28px */
	color: var(--ink);
}

/* Los dos primeros bailarines de Paquita van destacados */
.cast--leads {
	color: var(--ink);
	font-weight: 700;
}

.cast--leads + .cast {
	margin-top: var(--gap-sm);
}

/* ---------- Foto grupal ------------------------------------------------ */

.groupshot img {
	width: 100%;
}

.groupshot figcaption {
	padding: var(--gap-sm) var(--pad) 0;
	font-size: 0.875rem; /* 14px */
	line-height: 1.5714; /* 22px */
	color: var(--ink);
	text-wrap: pretty;
}

.groupshot figcaption b {
	font-weight: 700;
	color: var(--ink-soft);
}

/* ---------- Cierre ----------------------------------------------------- */

.outro {
	padding: var(--gap-md) var(--pad) var(--gap-xl);
	padding-bottom: calc(var(--gap-xl) + env(safe-area-inset-bottom));
}

/* ---------- Reveal on scroll ------------------------------------------ */

/* Estado inicial sólo cuando el JS confirma soporte, para que el contenido
   siga siendo visible si el script falla o está bloqueado. */
.js-reveal [data-reveal] {
	opacity: 0;
	transform: translateY(0.75rem);
	transition:
		opacity 0.7s ease-out,
		transform 0.7s ease-out;
}

.js-reveal [data-reveal].is-visible {
	opacity: 1;
	transform: none;
}

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

/* ---------- Impresión -------------------------------------------------- */

@media print {
	body {
		background: #fff;
	}

	.shell {
		max-width: none;
		box-shadow: none;
	}

	.js-reveal [data-reveal] {
		opacity: 1;
		transform: none;
	}

	.piece {
		break-inside: avoid;
	}
}