/* ==========================================================================
   Craftsman School — Dirección visual "Cercano Editorial"
   Paleta: navy + dorado cálido + arena · Tipografía: Nunito
   NOTA: los códigos de color son una interpretación de la dirección
   aprobada por el director. Ajustar contra el boceto original si difieren.
   ========================================================================== */

:root {
	--color-navy: #1F2E4A;
	--color-navy-deep: #16233A;
	--color-gold: #C89B3C;
	--color-gold-light: #E0B65C;
	--color-sand: #F5EFE3;
	--color-sand-deep: #ECE1CC;
	--color-cream: #FBF8F2;
	--color-text: #26303F;
	--color-text-muted: #5B6472;
	--color-white: #FFFFFF;

	--font-body: 'Nunito', system-ui, sans-serif;

	--radius-md: 14px;
	--radius-lg: 22px;
	--shadow-soft: 0 12px 30px rgba(31, 46, 74, 0.10);
	--container-width: 1140px;
}

/* ---- Reset básico ---- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	font-family: var(--font-body);
	color: var(--color-text);
	background: var(--color-cream);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3 { font-family: var(--font-body); color: var(--color-navy); line-height: 1.2; margin: 0 0 0.5em; }
h1 { font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 800; }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 800; }
h3 { font-size: 1.25rem; font-weight: 700; }
p { margin: 0 0 1em; }

.screen-reader-text {
	position: absolute; width: 1px; height: 1px; overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}
.skip-link:focus {
	position: fixed; top: 1rem; left: 1rem; width: auto; height: auto;
	background: var(--color-navy); color: var(--color-white); padding: 0.75rem 1.25rem;
	border-radius: var(--radius-md); z-index: 999;
}

.container {
	max-width: var(--container-width);
	margin: 0 auto;
	padding: 0 1.5rem;
}

.eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 700;
	font-size: 0.8rem;
	color: var(--color-gold);
	margin-bottom: 0.5rem;
}

/* ---- Botones ---- */
.btn {
	display: inline-block;
	padding: 0.85rem 1.6rem;
	border-radius: 999px;
	font-weight: 700;
	transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.btn--gold {
	background: var(--color-gold);
	color: var(--color-navy-deep);
	box-shadow: var(--shadow-soft);
}
.btn--gold:hover { background: var(--color-gold-light); transform: translateY(-2px); }
.btn--outline {
	background: transparent;
	color: var(--color-navy);
	border: 2px solid var(--color-navy);
}
.btn--outline:hover { background: var(--color-navy); color: var(--color-white); }

/* ---- Barra superior de contacto ----
   Reskineada en la feature 78 (27 ago 2026, `web-reskin-topbar-y-marca`):
   el estilo arena de aquí se retiró entero, mismo tratamiento que ya
   tuvieron .header/.logo/.nav en la feature 70. Reglas nuevas junto a las
   de esa feature, más abajo, bajo el prefijo --cx-*. ---- */

/* ---- Hero ----
   Feature 71 (26 ago 2026): el hero viejo de la portada se retiro de aqui. Sus
   clases (.hero, .hero__grid, .hero__lead, .hero__actions, .hero__media,
   .hero__media-placeholder, .hero__text) las usaba SOLO front-page.php,
   comprobado con grep sobre todo el tema antes de borrarlas, y esa plantilla se
   reescribio entera en esa feature. El hero nuevo vive en el bloque "RE-SKIN
   PORTADA" al final de este archivo, bajo el ambito .cx-home. */

/* ---- Secciones genéricas ---- */
.section { padding: 4rem 0; }
.section--alt { background: var(--color-sand); }

.page-hero {
	background: var(--color-navy);
	color: var(--color-white);
	padding: 3rem 0;
}
.page-hero h1 { color: var(--color-white); margin: 0; }
.page-hero .eyebrow { color: var(--color-gold-light); }

.page-content { max-width: 760px; }
.page-content h2 { margin-top: 1.5em; }
.single-noticia__thumb { margin-bottom: 2rem; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-soft); }
.single-noticia__thumb img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }

/* Meta (fecha + etiqueta) sobre el hero del post */
.single-noticia__meta { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1rem; }
.single-noticia__date,
.single-noticia__tag {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.35rem 0.9rem;
	border-radius: 999px;
	font-size: 0.85rem;
	font-weight: 700;
}
.single-noticia__date { background: rgba(200, 155, 60, 0.18); color: var(--color-gold-light); }
.single-noticia__date .cs-icon { width: 14px; height: 14px; }
.single-noticia__tag { background: rgba(255, 255, 255, 0.1); color: var(--color-sand); }

/* Cuerpo del artículo: mejor jerarquía de lectura */
.noticia-content { font-size: 1.05rem; line-height: 1.8; }
.noticia-content > p:first-of-type {
	font-size: 1.3rem;
	line-height: 1.6;
	color: var(--color-navy);
	margin-bottom: 1.5rem;
}
.noticia-content strong { color: var(--color-navy); }
.noticia-content ul {
	display: grid;
	gap: 0.75rem;
	margin: 1.5rem 0;
	padding: 1.5rem 1.75rem;
	background: var(--color-white);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-soft);
	border-left: 4px solid var(--color-gold);
}
.noticia-content li { padding-left: 1.5rem; position: relative; }
.noticia-content li::before {
	content: '';
	position: absolute; left: 0; top: 0.6rem;
	width: 8px; height: 8px; border-radius: 50%;
	background: var(--color-gold);
}
.noticia-content a {
	color: var(--color-gold);
	font-weight: 700;
	border-bottom: 2px solid rgba(200, 155, 60, 0.35);
	transition: border-color 0.15s ease;
}
.noticia-content a:hover { border-color: var(--color-gold); }
.noticia-content > p:last-of-type {
	margin-top: 2rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--color-sand-deep);
}

.lead { max-width: 760px; font-size: 1.1rem; color: var(--color-text-muted); }
.eyebrow-sub { font-weight: 700; color: var(--color-navy); margin: -0.5rem 0 0.75rem; }

/* ---- Director ----
   Feature 71 (26 ago 2026): el mensaje de direccion viejo se retiro de aqui.
   Sus clases (.director__grid, .director__panel, .director__portrait,
   .director__text, .director__firma) las usaba SOLO front-page.php, comprobado
   con grep antes de borrarlas. El bloque nuevo vive al final de este archivo,
   bajo el ambito .cx-home. La bateria del sitio publico usaba
   .director__panel como marcador de la portada en su caso SP-01; ese marcador
   se cambio a .cx-home en la misma feature, con su porque anotado alli. */

/* ---- Tarjetas ---- */
.cards-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 1.75rem;
	margin-top: 2rem;
}
.card {
	background: var(--color-white);
	border-radius: var(--radius-md);
	padding: 1.75rem;
	box-shadow: var(--shadow-soft);
	border-top: 4px solid var(--color-gold);
	display: flex;
	flex-direction: column;
}
.card__thumb { display: block; margin: -1.75rem -1.75rem 1rem; overflow: hidden; border-radius: var(--radius-md) var(--radius-md) 0 0; }
.card__thumb img { width: 100%; height: 100%; aspect-ratio: 16/10; object-fit: cover; object-position: center; }
.card__btn { align-self: flex-start; margin-top: auto; padding: 0.6rem 1.4rem; }
.card--noticia .card__btn { align-self: center; }

.empty-state { color: var(--color-text-muted); font-style: italic; }

/* ---- Niveles (Oferta educativa) ---- */
.nivel__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.nivel__grid--reverse .nivel__media { order: 2; }
.nivel__media {
	aspect-ratio: 4/3;
	border-radius: var(--radius-lg);
	background: repeating-linear-gradient(135deg, var(--color-sand-deep), var(--color-sand-deep) 12px, var(--color-sand) 12px, var(--color-sand) 24px);
	overflow: hidden;
	box-shadow: var(--shadow-soft);
}
.nivel__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nivel__lista li { padding: 0.35rem 0 0.35rem 1.5rem; position: relative; }
.nivel__lista li::before {
	content: '';
	position: absolute; left: 0; top: 0.85rem;
	width: 8px; height: 8px; border-radius: 50%;
	background: var(--color-gold);
}

@media (max-width: 780px) {
	.nivel__grid, .nivel__grid--reverse { grid-template-columns: 1fr; }
	.nivel__grid--reverse .nivel__media { order: -1; }
}

/* ---- CTA ---- */
.section--cta { background: var(--color-navy); color: var(--color-white); }
.cta__box { text-align: center; }
.cta__box h2 { color: var(--color-white); }

/* ---- Galería ---- */
.gallery-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 1rem;
	margin-bottom: 2rem;
}
.gallery-grid__item {
	display: block;
	border-radius: var(--radius-md);
	overflow: hidden;
	aspect-ratio: 4/3;
	box-shadow: var(--shadow-soft);
}
.gallery-grid__item img { width: 100%; height: 100%; object-fit: cover; }

.gallery-grid--captioned { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.gallery-item { margin: 0; background: var(--color-white); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-soft); }
.gallery-item .gallery-grid__item { border-radius: 0; box-shadow: none; }
.gallery-item figcaption { padding: 1rem 1.25rem 1.25rem; }
.gallery-item__title { font-size: 1.05rem; margin-bottom: 0.35rem; }
.gallery-item__desc { color: var(--color-text-muted); font-size: 0.92rem; margin: 0; }

/* ---- Contacto ---- */
.contacto__grid { display: grid; grid-template-columns: 1.3fr 0.7fr; gap: 3rem; }
.contacto__form form { display: flex; flex-direction: column; gap: 0.35rem; }
.contacto__form label { font-weight: 700; margin-top: 0.75rem; }
.contacto__form input,
.contacto__form textarea {
	font-family: var(--font-body);
	padding: 0.75rem 1rem;
	border: 1px solid var(--color-sand-deep);
	border-radius: var(--radius-md);
	background: var(--color-white);
}
.contacto__form button { margin-top: 1.25rem; align-self: flex-start; }
.notice { padding: 1rem 1.25rem; border-radius: var(--radius-md); margin-bottom: 1rem; }
.notice--success { background: #E4F3E1; color: #1F5E1B; }

@media (max-width: 780px) {
	.contacto__grid { grid-template-columns: 1fr; }
}

/* ---- Iconos SVG ---- */
.cs-icon { display: inline-block; vertical-align: middle; width: 20px; height: 20px; }

/* ---- Footer ----
   Feature 70 (25 ago 2026): las reglas .footer, .footer__grid, .logo y
   similares del re-skin viven en el bloque "RE-SKIN CABECERA Y PIE" al
   final de este archivo, junto con las de .header, .nav y .hamburger. Aquí
   sólo queda .footer__list, que page-contacto.php sigue usando para su
   propia lista y que esta feature NO toca. */
.footer__list li { padding: 0.2rem 0; opacity: 0.9; }
.footer__list a:hover { color: var(--color-gold-light); }

/* ---- Botones flotantes (matrícula + redes) ---- */
.float-stack {
	position: fixed;
	bottom: 1.5rem;
	right: 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	z-index: 200;
}
.float-btn {
	width: 54px;
	height: 54px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-white);
	box-shadow: 0 8px 20px rgba(0,0,0,0.25);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
	position: relative;
}
.float-btn:hover { transform: translateY(-3px) scale(1.05); }
.float-btn .cs-icon { width: 28px; height: 28px; }

.float-btn--whatsapp { background: #25D366; }
.float-btn--instagram { background: linear-gradient(45deg, #f09433, #e6683c 30%, #dc2743 55%, #cc2366 75%, #bc1888); }
.float-btn--facebook { background: #1877F2; }
.float-btn--matricula { background: var(--color-gold); color: var(--color-navy-deep); }

/* Etiqueta "Matrícula" que se despliega al pasar el cursor */
.float-btn__label {
	position: absolute;
	right: calc(100% + 10px);
	background: var(--color-navy-deep);
	color: var(--color-white);
	padding: 0.4rem 0.8rem;
	border-radius: 999px;
	font-size: 0.85rem;
	font-weight: 700;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transform: translateX(6px);
	transition: opacity 0.15s ease, transform 0.15s ease;
}
.float-btn--matricula:hover .float-btn__label { opacity: 1; transform: translateX(0); }

@media (max-width: 520px) {
	/* Feature 80 (29 ago 2026): antes esta zona ocultaba Instagram y
	   Facebook porque "ya estan en el pie", dejando solo WhatsApp y
	   Matricula visibles - asimetria que el cliente pidio quitar. Los 4
	   flotantes quedan visibles en movil; aqui solo se ajusta su tamano. */
	.float-stack { bottom: 1rem; right: 1rem; gap: 0.6rem; }
	.float-btn { width: 44px; height: 44px; }
	.float-btn .cs-icon { width: 22px; height: 22px; }
}

/* ---- Misión / Visión ---- */
.mv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.mv-card {
	background: var(--color-white);
	border-radius: var(--radius-lg);
	padding: 2.25rem;
	box-shadow: var(--shadow-soft);
	border-top: 4px solid var(--color-gold);
}
.mv-card h3 { margin-top: 0.2rem; font-size: 1.4rem; }

@media (max-width: 780px) {
	.mv-grid { grid-template-columns: 1fr; }
}

/* ---- Valores ---- */
.valores-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.75rem;
	margin-top: 2rem;
}
.valor {
	background: var(--color-white);
	border-radius: var(--radius-md);
	padding: 1.75rem;
	text-align: center;
	box-shadow: var(--shadow-soft);
}
.valor__word {
	display: block;
	font-size: 1.4rem;
	font-weight: 800;
	color: var(--color-gold);
	margin-bottom: 0.5rem;
	letter-spacing: 0.02em;
}
.valores-nota { text-align: center; margin-top: 2rem; color: var(--color-text-muted); font-weight: 700; }

@media (max-width: 700px) {
	.valores-grid { grid-template-columns: 1fr; }
}

/* ---- Admisiones ---- */
.adm-grid { display: grid; grid-template-columns: 1.3fr 0.7fr; gap: 3rem; align-items: start; }
.adm-steps { list-style: none; margin: 1rem 0 2rem; padding: 0; display: grid; gap: 1rem; }
.adm-steps li { display: flex; align-items: flex-start; gap: 1rem; }
.adm-steps li span {
	flex-shrink: 0;
	width: 34px; height: 34px;
	border-radius: 50%;
	background: var(--color-gold);
	color: var(--color-navy-deep);
	font-weight: 800;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.adm-req {
	background: var(--color-sand);
	border-radius: var(--radius-lg);
	padding: 2rem;
	border-top: 4px solid var(--color-gold);
}
.adm-req h3 { margin-top: 0.2rem; }

@media (max-width: 780px) {
	.adm-grid { grid-template-columns: 1fr; }
}

/* ---- 404 ---- */
.section--404 { text-align: center; padding: 6rem 0; }

/* ==========================================================================
   Portal — vistas *-front autenticadas (feature 25, 10 ago 2026).
   Ninguna de estas rutas pasa por get_header()/wp_head() (template_redirect
   corta el ciclo antes), así que este CSS se enlaza con un <link> directo
   en el envoltorio HTML de cada vista, no vía wp_enqueue_style().

   FEATURE 51 (codex-sistema-visual-y-shell, 14 ago 2026) — el shell pasa a
   ser el sistema visual del prototipo de Codex. Decisión D-R2
   (progress/portal/decisiones-integracion-codex.md): el marcado y el CSS de
   Codex se PORTAN a este tema; el prototipo se lee y NUNCA se edita ni se
   despliega. Sustituye a las clases `.cs-shell-*` de la feature 43 (borradas
   de aquí porque ningún renderizador las emite ya — todo pasa por
   CS_Portal_Shell).

   TODO EL BLOQUE DE CODEX ESTÁ ACOTADO A `body.cs-shell-body`, y eso NO es
   cosmética, es lo que impide una regresión en el sitio público:
   - Codex declara sus tokens (--navy, --gold, --sand, --ink, --line,
     --surface, semáforo, --shadow) en `:root`, y este archivo ya tiene en su
     propio `:root` (líneas 8-25) el juego --color-* que consume TODO el sitio
     público institucional. Ese `:root` no se toca ni una línea.
   - Los nombres de clase de Codex son genéricos: .brand, .badge, .button,
     .table-wrap y sobre todo `.empty-state`, que YA existe más arriba en este
     mismo archivo para el sitio público. Portarlos sin acotar sería una
     regresión visual inmediata del sitio público.
   `cs-shell-body` la lleva el <body> de las 13 pantallas del portal desde la
   feature 43 y ninguna página pública: por eso es el gancho de acotación.

   `.cs-portal__main` SOBREVIVE en el <main> junto a `.content-area` a
   propósito: de esa clase cuelga el estilado del CONTENIDO de las 13
   pantallas (tablas, formularios, listas, semáforo, tabla N1..N12), y las
   features 52-58/60 lo sustituyen pantalla por pantalla. Aquí sólo se le
   quita el "chrome de tarjeta" (fondo, radio, sombra, filete dorado), porque
   la tarjeta blanca redondeada pasa a ser `.portal-shell` y dos tarjetas
   anidadas se verían como un error.

   SIGUEN EXCLUIDOS A PROPÓSITO los dos documentos imprimibles (boletín de
   primaria / Informe Anual de preescolar, print-first): no enlazan esta hoja
   (cero riesgo de que un cambio aquí altere lo que sale por Ctrl+P). Traen
   su propia copia mínima del CSS del shell en su <style> embebido; la
   feature 51 decidió ACTUALIZAR esa copia, no desacoplarla — ver el docblock
   de render_boletin_documento()/render_informe_html().
   ========================================================================== */

/* Tokens del bloque :root de styles.css de Codex, acotados al portal.
   Los valores son los del prototipo, sin reinterpretar. */
body.cs-shell-body {
	--navy: #101c52;
	--navy-2: #1d2b68;
	--gold: #c69a2d;
	--gold-soft: #f3e3b8;
	--sand: #fbf4e3;
	--ink: #293044;
	--muted: #6c7180;
	--line: #ded7c7;
	--surface: #ffffff;
	--green: #d8f1db;
	--green-ink: #176537;
	--yellow: #fff0b9;
	--yellow-ink: #7c5915;
	--red: #ffd8d8;
	--red-ink: #a13131;
	--shadow: 0 18px 55px rgba(16, 28, 82, .16);

	min-width: 320px;
	background: var(--sand);
	color: var(--ink);
	font-size: 15px;
	line-height: 1.45;
}

/* Fondo fijo detrás de la tarjeta. Codex lo pinta en un div propio
   (.background-art) en vez de en el <body>, con un velo cálido encima. */
body.cs-shell-body .background-art {
	position: fixed;
	inset: 0;
	z-index: -2;
	background: #f9f0d9 url('../img/fondo-portal.jpg') center / cover no-repeat;
}
body.cs-shell-body .background-art::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(255, 250, 238, .18);
}

/* Tarjeta blanca redondeada que contiene TODO el portal. */
body.cs-shell-body .portal-shell {
	width: min(1440px, calc(100% - 48px));
	min-height: calc(100vh - 48px);
	margin: 24px auto;
	overflow: hidden;
	border-radius: 24px;
	background: rgba(255, 255, 255, .93);
	box-shadow: var(--shadow);
}

/* Cabecera: marca a la izquierda, enlaces de texto a la derecha. */
body.cs-shell-body .portal-header {
	min-height: 98px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 30px 14px 24px;
	border-bottom: 1px solid var(--line);
	background: var(--surface);
}
body.cs-shell-body .brand {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	color: var(--navy);
	text-decoration: none;
	letter-spacing: .04em;
}
body.cs-shell-body .brand img { width: 64px; height: 68px; object-fit: contain; }
body.cs-shell-body .brand strong,
body.cs-shell-body .brand small { display: block; }
body.cs-shell-body .brand strong { font-size: 18px; letter-spacing: .085em; }
body.cs-shell-body .brand small {
	color: var(--gold);
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .15em;
}
body.cs-shell-body .header-tools {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 8px;
	color: #8c8b91;
	font-size: 13px;
}
body.cs-shell-body .header-tools a {
	padding: 4px;
	border: 0;
	background: transparent;
	color: var(--navy);
	text-decoration: none;
	font-weight: 800;
}
body.cs-shell-body .header-tools a:hover { color: var(--gold); }

/* Barra principal de iconos: icono arriba, rótulo debajo, filete dorado
   bajo la barra y acento navy bajo el item activo.
   ADAPTACIÓN DEL PORTE: Codex emite <button data-student-view> porque es una
   SPA con rutas hash; aquí son <a> con navegación real (D-R2), así que hacen
   falta display/text-align/text-decoration que en un <button> venían de
   serie. El activo se marca con aria-current="page", que es el MISMO
   selector que ya usa Codex — no se inventa un .is-active paralelo. */
body.cs-shell-body .main-navigation {
	min-height: 118px;
	display: flex;
	align-items: stretch;
	justify-content: center;
	gap: clamp(14px, 6vw, 84px);
	padding: 10px 24px 13px;
	border-bottom: 4px solid var(--gold);
	background: linear-gradient(180deg, #fff 0%, #fffefa 100%);
}
body.cs-shell-body .nav-item {
	position: relative;
	display: block;
	min-width: 114px;
	border: 0;
	background: transparent;
	color: var(--navy);
	font-size: 13px;
	font-weight: 900;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: .035em;
}
body.cs-shell-body .nav-item img {
	display: block;
	width: 53px;
	height: 53px;
	margin: 0 auto 5px;
	object-fit: contain;
	mix-blend-mode: multiply;
}
body.cs-shell-body .nav-item::after {
	content: "";
	position: absolute;
	left: 18%;
	right: 18%;
	bottom: -13px;
	height: 4px;
	border-radius: 8px 8px 0 0;
	background: transparent;
}
body.cs-shell-body .nav-item:hover,
body.cs-shell-body .nav-item[aria-current="page"] { color: var(--gold); }
body.cs-shell-body .nav-item[aria-current="page"]::after { background: var(--navy); }

/* Cuerpo: panel lateral navy + área de contenido. */
body.cs-shell-body .portal-body {
	display: grid;
	grid-template-columns: 250px minmax(0, 1fr);
	min-height: 640px;
	background: #fff;
}
body.cs-shell-body .student-panel {
	padding: 29px 22px;
	background: linear-gradient(180deg, var(--navy) 0%, #16235d 55%, #263674 100%);
	color: white;
}
body.cs-shell-body .crest-wrap {
	margin: 0 auto 8px;
	width: 124px;
	height: 134px;
	display: grid;
	place-items: center;
	border-radius: 26px;
	background: rgba(255, 255, 255, .08);
}
body.cs-shell-body .crest-wrap img { width: 112px; height: 120px; object-fit: contain; }
body.cs-shell-body .side-kicker {
	margin: 13px 0 26px;
	color: var(--gold-soft);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .13em;
	text-align: center;
	text-transform: uppercase;
}
/* `.student-selector__titulo` es un <p>, no un <label>: el selector portado
   no es un control de formulario sino una lista de enlaces, y un
   `<label for>` apuntando a nada sería HTML inválido. Estilo idéntico al
   `.student-panel label` del prototipo. */
body.cs-shell-body .student-panel label,
body.cs-shell-body .student-selector__titulo {
	display: block;
	margin: 0 0 7px;
	color: #f7eaca;
	font-size: 12px;
	font-weight: 800;
}
/* ADAPTACIÓN DEL PORTE: Codex pinta el selector como un <select> que cambia
   de alumno por JS. Aquí no hay JS y el destino de cada alumno es una URL
   (decisión heredada de la feature 43, no reabierta), así que es una lista
   de enlaces con el aspecto de ese <select>: mismo borde, mismo radio, mismo
   fondo casi blanco y el mismo peso de texto. */
body.cs-shell-body .student-selector {
	display: grid;
	gap: 3px;
	margin: 0;
	padding: 5px;
	border: 1px solid rgba(255, 255, 255, .34);
	border-radius: 10px;
	background: rgba(255, 255, 255, .95);
}
body.cs-shell-body .student-selector a {
	display: block;
	padding: 7px 9px;
	border-radius: 7px;
	color: var(--navy);
	font-size: 13px;
	font-weight: 800;
}
body.cs-shell-body .student-selector a:hover { background: var(--gold-soft); }

/* Área de contenido. La regla combinada gana en especificidad (0,3,0) a
   `.cs-portal__main` (0,1,0) esté donde esté en el archivo: es lo que
   desactiva el chrome de tarjeta viejo sin borrar la clase. */
body.cs-shell-body .content-area {
	min-width: 0;
	background: rgba(255, 255, 255, .98);
}
body.cs-shell-body .content-area.cs-portal__main {
	padding: 33px 38px 44px;
	border-radius: 0;
	border-top: 0;
	box-shadow: none;
	background: rgba(255, 255, 255, .98);
}
body.cs-shell-body .view-title {
	margin: 0 0 24px;
	color: var(--navy);
	font-size: clamp(24px, 3vw, 34px);
	line-height: 1.15;
	letter-spacing: -.025em;
}
body.cs-shell-body .view-subtitle {
	max-width: 760px;
	margin: -16px 0 24px;
	color: var(--muted);
}
body.cs-shell-body .portal-footer {
	padding: 13px 24px;
	border-top: 1px solid var(--line);
	background: #fffdf8;
	color: var(--muted);
	font-size: 11px;
	text-align: center;
}

/* Breakpoint único de Codex (850px). Sólo se portan las reglas de las piezas
   que esta feature emite; el resto del media query del prototipo pertenece a
   contenido que re-skinean las features 52-58/60. */
@media (max-width: 850px) {
	body.cs-shell-body .portal-shell {
		width: min(100% - 24px, 700px);
		margin: 12px auto;
		border-radius: 18px;
	}
	body.cs-shell-body .portal-header { min-height: 78px; padding: 10px 14px; }
	body.cs-shell-body .brand img { width: 47px; height: 52px; }
	body.cs-shell-body .brand strong { font-size: 14px; }
	body.cs-shell-body .header-tools { font-size: 11px; }
	body.cs-shell-body .main-navigation { gap: 2px; min-height: 95px; padding: 8px 7px 10px; }
	body.cs-shell-body .nav-item { min-width: 0; flex: 1; font-size: 9px; letter-spacing: 0; }
	body.cs-shell-body .nav-item img { width: 39px; height: 39px; }
	body.cs-shell-body .nav-item::after { bottom: -10px; left: 9%; right: 9%; }
	body.cs-shell-body .portal-body { grid-template-columns: 1fr; }
	body.cs-shell-body .student-panel {
		display: grid;
		grid-template-columns: 62px 1fr;
		gap: 0 14px;
		align-items: center;
		padding: 13px 18px;
	}
	body.cs-shell-body .crest-wrap {
		width: 58px;
		height: 62px;
		margin: 0;
		border-radius: 14px;
		grid-row: span 2;
	}
	body.cs-shell-body .crest-wrap img { width: 52px; height: 56px; }
	body.cs-shell-body .side-kicker { display: none; }
	body.cs-shell-body .student-selector__titulo { margin: 0 0 3px; }
	body.cs-shell-body .student-selector { max-width: 290px; }
	body.cs-shell-body .content-area.cs-portal__main { padding: 25px 18px 33px; }
}

/* Impresión del shell (Codex tiene 3 bloques @media print; éste es el que
   afecta a las pantallas interactivas). Los dos documentos imprimibles NO
   enlazan esta hoja: traen su propio @media print embebido. */
@media print {
	body.cs-shell-body { background: #fff !important; }
	body.cs-shell-body .background-art,
	body.cs-shell-body .portal-header,
	body.cs-shell-body .main-navigation,
	body.cs-shell-body .student-panel,
	body.cs-shell-body .portal-footer,
	body.cs-shell-body .module-tabs,
	body.cs-shell-body .view-title,
	body.cs-shell-body .view-subtitle { display: none !important; }
	body.cs-shell-body .portal-shell {
		width: 100% !important;
		min-height: 0 !important;
		margin: 0 !important;
		border-radius: 0 !important;
		box-shadow: none !important;
	}
	body.cs-shell-body .portal-body { display: block !important; min-height: 0 !important; }
	body.cs-shell-body .content-area.cs-portal__main { padding: 0 !important; }
}

/* Componentes de Codex reutilizados por /portal/inicio (feature 52,
   codex-reskin-inicio, 14 ago 2026): copiados TAL CUAL de styles.css del
   prototipo (sus líneas 112-124: .home-banner/.section-heading/
   .summary-grid/.summary-card/.notice-list/.notice-item), sólo acotados a
   body.cs-shell-body -- mismo criterio D1 de la feature 51. NO son
   exclusivos de Inicio: es el patrón "banner + tarjetas + lista de avisos"
   que progress/feature-51.md §6 punto 1 ya anunciaba como el próximo a
   copiar tal cual llegara su pantalla.

   DOS ADAPTACIONES, ambas documentadas en progress/feature-52.md:
   1. `.summary-card p` gana `margin-bottom` (Codex: 0) porque, a
      diferencia de las tarjetas estáticas de demo del prototipo, las de
      aquí SIGUEN enlazando a la vista completa de cada sección (dato real,
      no se quita funcionalidad existente) — hace falta separación antes
      del enlace.
   2. Colapso a 1 columna de `.summary-grid` bajo 850px: SÍ está en Codex
      (styles.css:139, dentro de su único @media max-width:850px) -- es la
      pieza de ese breakpoint que la feature 51 dejó pendiente a propósito
      (ver el comentario de arriba, líneas 931-933) para cuando
      `.summary-grid` llegara al portal. Esta feature la completa, no la
      inventa (hallazgo del reviewer, progress/review.md, feature 52 §9;
      corregido 14 ago 2026 -- la redacción anterior decía "Codex no lo
      trae", que es falso). `.home-banner`/`.home-banner::after` también
      cambian en ese mismo bloque de Codex y NO se portaron (diferencia
      cosmética menor, sin desbordamiento). */
body.cs-shell-body .home-banner {
	position: relative;
	overflow: hidden;
	padding: 31px;
	border-radius: 18px;
	background: linear-gradient(122deg, var(--navy), #263c89);
	color: #fff;
}
body.cs-shell-body .home-banner::after {
	content: "✦";
	position: absolute;
	right: 30px;
	top: -15px;
	color: rgba(247, 207, 94, .3);
	font-size: 160px;
}
body.cs-shell-body .home-banner h1 {
	position: relative;
	z-index: 1;
	max-width: 580px;
	margin: 0 0 8px;
	font-size: clamp(27px, 4vw, 43px);
	line-height: 1.08;
	letter-spacing: -.03em;
}
body.cs-shell-body .home-banner p {
	position: relative;
	z-index: 1;
	max-width: 570px;
	margin: 0;
	color: #e4e8ff;
}
body.cs-shell-body .section-heading {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 15px;
	margin: 31px 0 13px;
	color: var(--navy);
	font-size: 19px;
}
body.cs-shell-body .section-heading span {
	color: var(--muted);
	font-size: 12px;
	font-weight: 600;
}
body.cs-shell-body .summary-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 15px;
}
body.cs-shell-body .summary-card {
	min-height: 138px;
	padding: 19px;
	border: 1px solid #e9e5da;
	border-radius: 15px;
	background: #fffefa;
	box-shadow: 0 5px 14px rgba(16, 28, 82, .05);
}
body.cs-shell-body .summary-card .summary-icon {
	display: inline-grid;
	place-items: center;
	width: 35px;
	height: 35px;
	margin-bottom: 11px;
	border-radius: 10px;
	background: var(--gold-soft);
	color: var(--navy);
	font-weight: 900;
}
body.cs-shell-body .summary-card h3 { margin: 0 0 4px; color: var(--navy); font-size: 15px; }
body.cs-shell-body .summary-card p { margin: 0 0 8px; color: var(--muted); font-size: 13px; }
body.cs-shell-body .notice-list { display: grid; gap: 10px; }
body.cs-shell-body .notice-item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 15px 16px;
	border-left: 4px solid var(--gold);
	border-radius: 0 10px 10px 0;
	background: #fffaf0;
}
body.cs-shell-body .notice-emoji { font-size: 22px; }
body.cs-shell-body .notice-item strong,
body.cs-shell-body .notice-item small { display: block; }
body.cs-shell-body .notice-item small { color: var(--muted); }

@media (max-width: 850px) {
	body.cs-shell-body .summary-grid { grid-template-columns: 1fr; }
}

.cs-portal__main h2 { margin-top: 2rem; }
.cs-portal__main h2:first-child { margin-top: 0; }
.cs-portal__main p:last-child { margin-bottom: 0; }

.cs-portal__main a { color: var(--color-gold); font-weight: 700; }
.cs-portal__main a:hover { text-decoration: underline; }

/* Listas (selectores de salón/alumno, listados simples) */
.cs-portal__main ul { display: grid; gap: 0.15rem; margin: 1rem 0; }
.cs-portal__main ul li {
	padding: 0.5rem 0 0.5rem 1.35rem;
	position: relative;
	border-bottom: 1px solid var(--color-sand);
}
.cs-portal__main ul li::before {
	content: '';
	position: absolute; left: 0; top: 1.05rem;
	width: 7px; height: 7px; border-radius: 50%;
	background: var(--color-gold);
}

/* Tablas (horarios, asistencia, tareas) */
.cs-portal__main table {
	width: 100%;
	border-collapse: collapse;
	margin: 1rem 0 1.5rem;
	font-size: 0.95rem;
}
.cs-portal__main th,
.cs-portal__main td {
	padding: 0.65rem 0.85rem;
	text-align: left;
	border: 1px solid var(--color-sand-deep);
	vertical-align: top;
}
.cs-portal__main th {
	background: var(--color-navy);
	color: var(--color-white);
	font-weight: 700;
	white-space: nowrap;
}
.cs-portal__main tbody tr:nth-child(even) { background: var(--color-cream); }

@media (max-width: 700px) {
	.cs-portal__main table { display: block; overflow-x: auto; white-space: nowrap; }
}

/* Horario de clase: horas ESTIMADAS por bloque/recreo (feature 28, 10 ago
   2026) -- reparto proporcional de una ventana ya confirmada, NO un dato
   confirmado bloque por bloque. Mismo tratamiento muted+italic que
   .empty-state para no confundirse con el resto de la rejilla (materia por
   bloque, feature 19), que sí es dato real. Ver
   class-cs-horarios-estructura.php y class-cs-horarios-front.php. */
.cs-horario-aviso-estimado {
	color: var(--color-text-muted);
	font-style: italic;
	font-size: 0.92rem;
	margin: 0 0 1rem;
}
.cs-horario-hora-estimada {
	display: block;
	color: var(--color-text-muted);
	font-style: italic;
	font-size: 0.8rem;
	font-weight: 400;
	white-space: nowrap;
}

/* Formularios (selectores GET, registro de asistencia, publicar tarea) */
.cs-portal__main form { margin-bottom: 1.25rem; }
.cs-portal__main label { font-weight: 700; color: var(--color-navy); }
.cs-portal__main input[type="text"],
.cs-portal__main input[type="date"],
.cs-portal__main input[type="number"],
.cs-portal__main input[type="file"],
.cs-portal__main select,
.cs-portal__main textarea {
	font-family: var(--font-body);
	font-size: 1rem;
	padding: 0.6rem 0.85rem;
	border: 1px solid var(--color-sand-deep);
	border-radius: var(--radius-md);
	background: var(--color-white);
	color: var(--color-text);
}
.cs-portal__main textarea { width: 100%; }

/* Botones: reutiliza .btn/.btn--gold ya definidos arriba en este archivo
   para los <button> nativos sin clase de estos formularios. */
.cs-portal__main button[type="submit"],
.cs-portal__main button:not([type]) {
	display: inline-block;
	padding: 0.7rem 1.5rem;
	border-radius: 999px;
	font-weight: 700;
	font-family: var(--font-body);
	font-size: 0.95rem;
	background: var(--color-gold);
	color: var(--color-navy-deep);
	border: none;
	cursor: pointer;
	box-shadow: var(--shadow-soft);
	transition: transform 0.15s ease, background 0.15s ease;
}
.cs-portal__main button[type="submit"]:hover,
.cs-portal__main button:not([type]):hover {
	background: var(--color-gold-light);
	transform: translateY(-2px);
}

/* Mensajes de guardado (asistencia/tareas) y notice--error genérico
   (notice/notice--success ya existían para el formulario de contacto). */
.notice--error { background: #FBEAEA; color: #8A2A26; border: 1px solid #E4B5B3; }
.cs-portal__main .notice { margin-bottom: 1.25rem; }

/* Semáforo de nota_final de primaria (feature 31, notas-semaforo-color,
   11 ago 2026): hallazgo del leader al comparar contra el Expediente
   Académico de Colegio Javier -- se copian SOLO los cortes de color
   (< 3.0 rojo, 3.0-3.99 amarillo, >= 4.0 verde), no la fórmula de
   nota_final ni la escala [2.0,5.0], ambas ya confirmadas por el colegio
   real. Reutiliza los mismos hex ya establecidos arriba para
   .notice--success/.notice--error (ninguna paleta nueva) más un amarillo
   pastel a tono para el corte intermedio. Solo background: el texto por
   defecto (oscuro) ya contrasta bien sobre estos fondos pastel claros, no
   hace falta tocarlo. Usado por class-cs-notas-front.php::render_boletin_html()
   -- pero esa vista es un documento AUTOCONTENIDO (print-first, feature
   13/26) que no enlaza este archivo, así que trae su propia copia mínima
   de estas 3 reglas (mismos hex) en su <style> propio, igual que ya hace
   con .cs-portal-nav*. NO aplica a preescolar (wp_cs_preescolar_evaluaciones):
   sus valores son cualitativos, sin escala numérica que colorear. */
.cs-nota--rojo { background: #FBEAEA; }
.cs-nota--amarillo { background: #FDF3D9; }
.cs-nota--verde { background: #E4F3E1; }

/* ============================================================
   Módulo Calificaciones (feature 44, calificaciones-tabla-y-preliminar):
   barra de sub-tabs (segundo nivel de navegación, prompt maestro §4.4),
   selector de trimestre y la tabla ancha de N1..N12.

   FEATURE 51: la barra de sub-tabs pasa de `.cs-subtabs` (lista con `|` de
   separador) al componente `.module-tabs` de Codex (pestañas con subrayado
   dorado, scroll horizontal propio). Se emite SIN <ul>, igual que el
   prototipo, lo que además desactiva de raíz la guerra de especificidad que
   la feature 44 tuvo que resolver a mano contra `.cs-portal__main ul li`
   (bullets dorados + apilado vertical). El margen negativo iguala el padding
   lateral de `.content-area` para que el filete llegue de borde a borde.
   La copia mínima de estas reglas que vive embebida en el documento
   imprimible del boletín usa estos MISMOS valores hex resueltos.
   ============================================================ */

body.cs-shell-body .module-tabs {
	display: flex;
	gap: 0;
	overflow-x: auto;
	margin: 0 -38px 26px;
	padding: 0 38px;
	border-bottom: 1px solid var(--line);
}
body.cs-shell-body .module-tabs a {
	flex: 0 0 auto;
	padding: 12px 16px;
	border: 0;
	border-bottom: 3px solid transparent;
	background: transparent;
	color: var(--muted);
	font-size: 13px;
	font-weight: 900;
	white-space: nowrap;
}
body.cs-shell-body .module-tabs a:hover,
body.cs-shell-body .module-tabs a[aria-current="page"] {
	border-bottom-color: var(--gold);
	color: var(--navy);
}

@media (max-width: 850px) {
	body.cs-shell-body .module-tabs { margin: 0 -18px 20px; padding: 0 18px; }
}

/* ============================================================
   Módulo Calificaciones — CONTENIDO (feature 53, codex-reskin-calificaciones,
   14 ago 2026). Re-skin de tabla_calificaciones_html()/tabla_preliminar_html()/
   seccion_disciplina_html() (class-cs-calificaciones-front.php) al estilo
   grades-table/preliminary-layout/discipline-table del prototipo de Codex.
   Sustituye por completo al bloque `.cs-calif-alumno`/`.cs-calif-trimestres`/
   `.cs-calif-tabla`/`.cs-calif-preliminar`/`.cs-calif-ponderacion`/
   `.cs-calif-detalle` de la feature 44 (verificado por grep: ningún otro
   fichero del tema emite esas clases).

   CERO cambio de cálculo: CS_Auth::calificaciones_de_alumno() y el corte del
   semáforo (CS_Notas_Front::color_por_nota(), >= 4.0 verde / >= 3.0 amarillo
   / si no rojo) no se tocan. El semáforo SIGUE usando las clases
   cs-nota--verde/amarillo/rojo (main.css, sección "Semáforo de nota_final de
   primaria" más arriba) — NO se renombra a good/pass/low de Codex, para no
   crear un segundo sistema de color en paralelo al que ya comparten
   CS_Notas_Admin y CS_Dashboard_Inicio_Front (feature 52).

   `cs-calif-separador`/`cs-calif-fuera-plan` (materias fuera del plan de
   estudio del grado, feature 44 ronda 2 del review) SOBREVIVEN tal cual —
   sus reglas siguen unas líneas más abajo, sin tocar.
   ============================================================ */

/* Selector de trimestre: grupo de enlaces con aspecto de pastilla dentro de
   `.toolbar` de Codex (el `<select>` original exigiría JS que el portal no
   carga -- mismo criterio que D8 de la feature 51 para el selector de
   alumno). */
body.cs-shell-body .toolbar {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 14px;
	margin: 0 0 18px;
}
body.cs-shell-body .term-select { display: flex; flex-wrap: wrap; gap: 8px; }
body.cs-shell-body .term-select__item {
	padding: 7px 14px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: #fff;
	color: var(--navy);
	font-size: 12px;
	font-weight: 800;
	text-decoration: none;
}
body.cs-shell-body .term-select__item[aria-current="page"] {
	background: var(--navy);
	border-color: var(--navy);
	color: #fff;
}

/* Leyenda del semáforo (.status-key/.key de Codex). */
body.cs-shell-body .status-key { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; }
body.cs-shell-body .key { padding: 5px 9px; border-radius: 99px; font-size: 11px; font-weight: 900; }
body.cs-shell-body .key.green { background: var(--green); color: var(--green-ink); }
body.cs-shell-body .key.yellow { background: var(--yellow); color: var(--yellow-ink); }
body.cs-shell-body .key.red { background: var(--red); color: var(--red-ink); }
body.cs-shell-body .key.white { border: 1px solid var(--line); color: var(--muted); }

/* Estado vacío (.empty-state de Codex), acotado al portal -- el sitio
   público ya tiene su propia .empty-state genérica (línea 351 de este
   archivo, sin tocar) y esta regla NO puede filtrarse ahí por el prefijo
   body.cs-shell-body. */
body.cs-shell-body .empty-state {
	padding: 28px 20px;
	border: 1px dashed #cfc5ad;
	border-radius: 12px;
	background: #fffcf4;
	color: var(--muted);
	text-align: center;
	font-style: normal;
}
body.cs-shell-body .empty-state strong { display: block; margin-bottom: 4px; color: var(--navy); }

/* .table-wrap (Codex): caja con scroll horizontal propio para cualquier
   tabla ancha del portal (calificaciones/preliminar/disciplina). RESET
   EXPLÍCITO necesario: estas tablas siguen viviendo dentro de
   `.content-area.cs-portal__main`, que ya tiene reglas genéricas para
   horarios/asistencia/tareas (`.cs-portal__main table/th/td`, más abajo en
   este archivo) -- sin este reset, las tablas nuevas saldrían con borde
   doble (el `border` completo de esa regla vieja + el `border-bottom` de
   Codex) y sin su min-width real por el `display:block` que esa regla
   vieja fuerza en móvil. `body.cs-shell-body .table-wrap ...` (0,2,x) le
   gana en especificidad a `.cs-portal__main ...` (0,1,x) sin !important. */
body.cs-shell-body .table-wrap { width: 100%; overflow-x: auto; border: 1px solid var(--line); border-radius: 11px; }
body.cs-shell-body .table-wrap table { width: 100%; margin: 0; border-collapse: collapse; background: #fff; }
body.cs-shell-body .table-wrap th,
body.cs-shell-body .table-wrap td {
	padding: 9px 10px;
	border: 0;
	border-bottom: 1px solid #ece7db;
	text-align: left;
	vertical-align: middle;
}
body.cs-shell-body .table-wrap th {
	background: #f8f3e7;
	color: var(--navy);
	font-size: 11px;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: .03em;
	white-space: nowrap;
}
body.cs-shell-body .table-wrap td { font-size: 13px; }
body.cs-shell-body .table-wrap tr:last-child td { border-bottom: 0; }
body.cs-shell-body .table-wrap tbody tr:nth-child(even) { background: transparent; }
@media (max-width: 700px) {
	/* Neutraliza el `display:block` de `.cs-portal__main table` (más abajo):
	   estas tablas necesitan layout de tabla real para que su `min-width`
	   fuerce el desbordamiento que `.table-wrap` scrollea. */
	body.cs-shell-body .table-wrap table { display: table; white-space: normal; }
}

body.cs-shell-body .note-caption { margin: 10px 0 0; color: var(--muted); font-size: 12px; }
body.cs-shell-body .note-caption strong { color: var(--navy); }

/* Calificaciones (.grades-table de Codex): 17 columnas (materia,
   categoría, %, N1..N12, promedio de categoría, promedio de materia) --
   desborda en cualquier viewport a propósito, .table-wrap la scrollea. */
body.cs-shell-body .grades-table { min-width: 1255px; }
body.cs-shell-body .grades-table th,
body.cs-shell-body .grades-table td { padding: 8px 8px; text-align: center; }
body.cs-shell-body .grades-table td.subject-name,
body.cs-shell-body .grades-table th.subject-name { min-width: 145px; text-align: left; color: var(--navy); font-weight: 900; }
body.cs-shell-body .grades-table td.category-name { min-width: 130px; text-align: left; font-weight: 800; }
body.cs-shell-body .grades-table td.weight { font-size: 12px; color: var(--muted); }
body.cs-shell-body .grades-table .grade-cell { width: 44px; min-width: 44px; font-weight: 900; }
body.cs-shell-body .grades-table .category-average { min-width: 74px; font-weight: 900; }
body.cs-shell-body .grades-table .subject-average { min-width: 82px; font-weight: 900; background: #fff9e9; color: var(--navy); }
/* Sin rayado por filas pares (heredado de `.table-wrap tbody tr:nth-child(even)`
   más arriba): confundiría las sub-filas de una misma materia con las de la
   siguiente -- aquí la agrupación la marca el rowspan. */

/* Semáforo sobre .subject-average: su propio fondo por defecto (línea de
   arriba) tiene la MISMA especificidad que .cs-nota--* (declarada antes en
   este archivo) y ganaría por orden de aparición sin esta regla compuesta
   -- MISMOS hex que .cs-nota--verde/amarillo/rojo, no una paleta nueva.
   .grade-cell y .category-average no tienen fondo por defecto, así que la
   regla global .cs-nota--* les basta sin necesitar esto. */
body.cs-shell-body .subject-average.cs-nota--rojo { background: #FBEAEA; }
body.cs-shell-body .subject-average.cs-nota--amarillo { background: #FDF3D9; }
body.cs-shell-body .subject-average.cs-nota--verde { background: #E4F3E1; }

/* Promedio Preliminar (.preliminary-layout de Codex): lista seleccionable a
   la izquierda, detalle de ponderación + notas individuales a la derecha.
   Sustituye a las dos tablas apiladas "Ponderación"/"Calificación" de la
   feature 44 -- MISMOS datos, sólo se agrupan por categoría en vez de en
   dos <table> independientes (ver docblock de tabla_preliminar_html()). */
body.cs-shell-body .preliminary-layout { display: grid; grid-template-columns: minmax(270px, .85fr) minmax(300px, 1.15fr); gap: 21px; }
body.cs-shell-body .selectable-table tbody tr { cursor: pointer; }
body.cs-shell-body .selectable-table tbody tr:hover,
body.cs-shell-body .selectable-table tbody tr.is-selected { background: #fff6dd; }
body.cs-shell-body .selectable-table tbody th { background: transparent; text-align: left; font-weight: 700; }
body.cs-shell-body .selectable-table tbody th a { color: var(--navy); font-weight: 900; text-decoration: none; }
body.cs-shell-body .selectable-table tbody th a:hover { text-decoration: underline; }
body.cs-shell-body .breakdown { padding: 20px; border: 1px solid var(--line); border-radius: 14px; background: #fffefa; }
body.cs-shell-body .breakdown h3 { margin: 0; color: var(--navy); }
body.cs-shell-body .breakdown > p { margin: 4px 0 15px; color: var(--muted); font-size: 13px; }
body.cs-shell-body .break-row { display: grid; grid-template-columns: 1fr auto auto; gap: 9px; align-items: center; padding: 10px 0; border-top: 1px solid #e7e0ce; }
body.cs-shell-body .break-row span { color: var(--muted); font-size: 12px; }
body.cs-shell-body .break-row strong { color: var(--navy); }
body.cs-shell-body .break-notes { display: flex; flex-wrap: wrap; gap: 6px; }
body.cs-shell-body .pending-text { color: var(--muted); font-style: italic; }
/* Sin `background` propio a propósito: cada .note-pill que se emite ya trae
   una clase cs-nota--verde/amarillo/rojo (siempre hay valor -- la categoría
   sin notas usa .pending-text en vez de un pill vacío), y un fondo base aquí
   competiría en especificidad con la regla global .cs-nota--* y ganaría por
   ser más específico, dejando el pill blanco pese a la clase de color. */
body.cs-shell-body .note-pill { min-width: 33px; padding: 3px 6px; border-radius: 6px; text-align: center; font-size: 12px; font-weight: 900; }

@media (max-width: 850px) {
	body.cs-shell-body .preliminary-layout { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------
   Preescolar dentro del módulo Calificaciones (feature 60,
   preescolar-modelo-nuevo-pantallas). Kínder/Pre-Kínder reutilizan los MISMOS
   componentes de Codex que primaria (.table-wrap, .grades-table,
   .selectable-table, .note-pill, .note-caption, .empty-state): esto son sólo
   los dos ajustes que la escala cualitativa necesita.

   NO HAY NI UNA REGLA DE COLOR POR VALOR aquí, y es a propósito: la
   semaforización (.cs-nota--verde/amarillo/rojo) es de la escala 2.0-5.0 de
   primaria, y aplicarla a 'A'/'B'/'C' o 'S.D'/'C.D'/'P.C' es justo lo que el
   acceptance de esta feature prohíbe. Las pantallas tampoco emiten esas
   clases (ver class-cs-calificaciones-front.php). */

/* La tabla cualitativa tiene 13 columnas (materia + N1..N12), no las 17 de
   primaria: sin este ajuste heredaría el min-width de 1255px de .grades-table
   y forzaría un scroll horizontal que no le hace falta. */
body.cs-shell-body .grades-table--cualitativa { min-width: 760px; }
body.cs-shell-body .grades-table--cualitativa .grade-cell { letter-spacing: .02em; }

/* Rejilla de CARGA del docente (`.grades-table--carga`, feature 49,
   notas-categorias-pantallas): la misma `.grades-table` que ya lee el
   acudiente, pero con las celdas editables y con un número VARIABLE de
   columnas -- una categoría con una sola nota cargada pinta 2 columnas, no 12
   (ver CS_Notas_Front::columnas_visibles()). Por eso se le quita el
   `min-width: 1255px` de la tabla de lectura, que está calculado para sus 17
   columnas fijas y aquí forzaría un scroll horizontal permanente en la
   pantalla más común de Craftsman (3 categorías × 1 nota). Mismo criterio y
   misma forma que `.grades-table--cualitativa` (feature 60): un modificador de
   ancho sobre el componente ya portado, sin paleta ni tipografía nuevas. */
body.cs-shell-body .grades-table--carga { min-width: 0; }
body.cs-shell-body .grades-table--carga th.category-group {
	border-left: 1px solid var(--line);
	color: var(--navy);
}
body.cs-shell-body .grades-table--carga th.category-group .weight {
	display: block;
	color: var(--muted);
	font-size: 11px;
	font-weight: 700;
}
body.cs-shell-body .grades-table--carga .grade-cell { width: 72px; min-width: 72px; }
body.cs-shell-body .grades-table--carga input[type="number"] {
	width: 100%;
	max-width: 64px;
	padding: 6px 4px;
	border: 1px solid var(--line);
	border-radius: 6px;
	background: #fff;
	color: var(--navy);
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 800;
	text-align: center;
}
body.cs-shell-body .grades-table--carga input[type="number"]:disabled {
	background: var(--sand);
	color: var(--muted);
}

/* Rejilla de CARGA CUALITATIVA del docente de preescolar (feature 62,
   portal-docente-gradebook): la misma `.grades-table--carga`, pero la casilla
   es un `<select>` con los literales de la escala del nivel (A/B/C o
   S.D/C.D/P.C) en vez de un `<input type="number">`. Es la forma visual del
   invariante: un docente de preescolar NUNCA ve una casilla numérica.

   SIGUE SIN HABER NI UNA REGLA DE COLOR POR VALOR, por el mismo motivo que
   documenta el bloque de la feature 60 unas líneas más arriba: semaforizar
   'A'/'C' o 'S.D'/'P.C' es exactamente lo que el acceptance prohíbe. Cero
   paleta nueva, cero tipografía nueva: los mismos tokens de Codex que ya usa
   la casilla numérica de al lado. */
body.cs-shell-body .grades-table--carga .grade-cell select {
	width: 100%;
	max-width: 86px;
	padding: 6px 4px;
	border: 1px solid var(--line);
	border-radius: 6px;
	background: #fff;
	color: var(--navy);
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 800;
	text-align: center;
}
body.cs-shell-body .grades-table--carga .grade-cell select:disabled {
	background: var(--sand);
	color: var(--muted);
}
/* La cualitativa de CARGA tiene 13 columnas como mucho (alumno + N1..N12) y
   sus celdas son más anchas que las de lectura: se le deja el `min-width: 0`
   de `--carga`, que llega después en la cascada y ya gana, pero se declara
   aquí para que quien lea sólo este bloque no tenga que deducirlo. */
body.cs-shell-body .grades-table--carga.grades-table--cualitativa { min-width: 0; }
body.cs-shell-body .grades-table--carga.grades-table--cualitativa .grade-cell {
	width: 94px;
	min-width: 94px;
}

/* Lista de casillas rechazadas dentro del `.notice` de la rejilla de carga
   (feature 49): el motivo por celda -- incluido el piso de 4.5 de la
   Apreciación -- se le enseña al docente, ya no sólo el número de rechazos. */
body.cs-shell-body .cs-rechazos { margin: 8px 0 0; padding-left: 20px; }
body.cs-shell-body .cs-rechazos li { margin: 2px 0; font-size: 13px; }

/* Pastilla NEUTRA de la Calificación Preliminar de preescolar: un solo color
   para todos los valores -- el mismo para 'A' que para 'C'. Existe para que
   estas pastillas NO se queden sin fondo (.note-pill no trae uno propio
   porque en primaria siempre llega con su clase de semáforo), no para
   codificar el valor. */
body.cs-shell-body .note-pill--cualitativa {
	border: 1px solid var(--line);
	background: #fffaf0;
	color: var(--navy);
}

/* Disciplina (feature 45, re-skineada aquí porque vive en la misma barra de
   sub-tabs que Calificaciones/Preliminar/Boletín) -- sólo marcado y clases,
   la migración cs_disciplina y el catálogo de amonestaciones no se tocan. */
body.cs-shell-body .discipline-view { min-width: 0; }
body.cs-shell-body .discipline-table { min-width: 620px; }

/* Materias FUERA del plan de estudio del grado (fix del review, ronda 1):
   aparecen porque tienen notas cargadas de verdad -- no se ocultan --, pero
   tienen que LEERSE distinto de las oficiales, no sólo llamarse distinto.
   Fila-cabecera separadora + acento a la izquierda en todas las filas del
   grupo. `table` en el selector sube la especificidad lo justo para ganarle a
   `.cs-portal__main .cs-calif-tabla tbody th` (0,2,2) sin recurrir a
   !important.
   DELIBERADAMENTE NO se toca el `background` de las celdas de nota: ahí vive
   el semáforo de la §4.5, y pintar la fila entera lo borraría. */
.cs-portal__main table tr.cs-calif-separador th {
	background: var(--color-navy-deep);
	color: var(--color-white);
	text-align: left;
	font-weight: 700;
	font-size: 0.85rem;
	white-space: normal;
}
.cs-portal__main table tr.cs-calif-fuera-plan > *:first-child {
	border-left: 4px solid var(--color-gold);
}
.cs-portal__main table tr.cs-calif-fuera-plan > th { font-style: italic; }

/* ============================================================
   Módulos Asistencia y Horarios — CONTENIDO (feature 55,
   codex-reskin-asistencia-horarios, 14 ago 2026). Re-skin de
   render_docente()/render_acudiente() (class-cs-asistencia-front.php) y
   render_selector()/render_grid_html() (class-cs-horarios-front.php).

   El prototipo de Codex NO trae un componente para ninguna de las dos
   pantallas (sólo texto suelto: "Class schedule" sin marcado, y un resumen
   de ausencias en `.report-summary` que no aplica aquí porque el acudiente
   sigue viendo el desglose fila a fila, no un conteo agregado -- acceptance
   de la feature). Se extiende el vocabulario YA portado por las features
   51/53/54 con dos clases nuevas consistentes (`.attendance-table`,
   `.schedule-table`), mismo criterio que ya usó la 53 para
   `.grades-table`/`.discipline-table` -- no una paleta ni un sistema visual
   en paralelo.

   CERO cambio de lógica en ninguno de los dos ficheros: los tres estados de
   asistencia (presente/ausente/tarde) siguen siendo los mismos tres
   `<input type="radio">`, `guardar_asistencia()` (el único de los 4 caminos
   de escritura que aplica aquí) no se toca, y `render_grid_html()` sigue
   usando `$nivel` (nunca `$salon['grado']`) -- la mina conocida de
   `wp_cs_salones.grado = 'Preescolar'` no se reintroduce.
   ============================================================ */

/* `.toolbar` con controles NATIVOS (select/input): Codex trae
   `.toolbar select` de serie (styles.css:128 del prototipo) pero ninguna
   feature anterior lo necesitaba -- las tres pantallas ya re-skineadas
   (52/53/54) sólo usaban `.toolbar` para agrupar pastillas de enlace
   (`.term-select__item`). Asistencia/Horarios SÍ necesitan controles reales
   (salón/materia/fecha/búsqueda por ID vienen de la base, no son un puñado
   fijo de opciones que quepa como pastillas) -- se porta el resto de esa
   regla de Codex, mismos valores. */
body.cs-shell-body .toolbar label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--navy);
	font-size: 13px;
	font-weight: 900;
}
body.cs-shell-body .toolbar select,
body.cs-shell-body .toolbar input[type="date"],
body.cs-shell-body .toolbar input[type="number"] {
	padding: 7px 10px;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: #fff;
	color: var(--navy);
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 800;
}

/* Asistencia (`.attendance-table`): rejilla de registro del docente (radios
   presente/ausente/tarde, feature 12) y consulta del acudiente (mismas 5
   columnas de siempre, Estado ahora como pastilla `.key` -- MISMO
   componente que la leyenda del semáforo de calificaciones, feature 53, sin
   inventar un vocabulario de color paralelo). */
body.cs-shell-body .attendance-table { min-width: 640px; }
body.cs-shell-body .attendance-table th,
body.cs-shell-body .attendance-table td { text-align: center; }
body.cs-shell-body .attendance-table td.student-name,
body.cs-shell-body .attendance-table th.student-name { min-width: 170px; text-align: left; color: var(--navy); font-weight: 900; }
body.cs-shell-body .attendance-table td.observations,
body.cs-shell-body .attendance-table th.observations { min-width: 220px; text-align: left; }
body.cs-shell-body .attendance-table td.observations input[type="text"] {
	width: 100%;
	padding: 6px 8px;
	border: 1px solid var(--line);
	border-radius: 6px;
	font-family: var(--font-body);
	font-size: 12px;
	color: var(--ink);
}
body.cs-shell-body .attendance-table input[type="radio"] {
	width: 17px;
	height: 17px;
	accent-color: var(--navy);
	cursor: pointer;
}

/* Horarios (`.schedule-table`): rejilla semanal bloque x día (feature 19),
   fila RECREO como clase dedicada en vez de `style` inline (feature 28). El
   selector (render_selector()) reutiliza `.selectable-table` tal cual --
   ver ese componente unas líneas más arriba, ya portado por la 53 -- cero
   CSS nuevo para esa parte. */
body.cs-shell-body .schedule-table { min-width: 640px; }
body.cs-shell-body .schedule-table th,
body.cs-shell-body .schedule-table td { text-align: center; }
body.cs-shell-body .schedule-table td.schedule-block,
body.cs-shell-body .schedule-table th.schedule-block { min-width: 150px; text-align: left; color: var(--navy); font-weight: 900; }
body.cs-shell-body .schedule-table tr.schedule-break td {
	background: var(--sand);
	text-align: center;
	font-style: italic;
	color: var(--muted);
}

/* Rasgos de personalidad (`.traits-table`, feature 58, codex-reskin-rasgos,
   18 ago 2026): rejilla del docente guía en /portal/rasgos, alumnos en filas
   y los 9 rasgos S/R/D del boletín en columnas (feature 36). El prototipo de
   Codex no trae esta pantalla (sólo la leyenda S/R/D DENTRO del boletín
   impreso) -- se extiende el vocabulario ya portado por las features 53/55
   con esta clase nueva, mismo criterio que `.attendance-table`/
   `.schedule-table`. CERO cambio de la escala ni del guardado: cada celda
   sigue siendo el mismo `<select>` de tres opciones (S/R/D) más la vacía
   "sin calificar". */
body.cs-shell-body .traits-table { min-width: 1080px; }
body.cs-shell-body .traits-table th,
body.cs-shell-body .traits-table td { text-align: center; }
body.cs-shell-body .traits-table td.student-name,
body.cs-shell-body .traits-table th.student-name { min-width: 170px; text-align: left; color: var(--navy); font-weight: 900; }
body.cs-shell-body .traits-table td.trait-cell { min-width: 96px; }
body.cs-shell-body .traits-table select {
	padding: 6px 8px;
	border: 1px solid var(--line);
	border-radius: 6px;
	background: #fff;
	color: var(--navy);
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 800;
}

/* /portal/inicio — separador entre tarjetas de alumno vinculado (feature 29,
   portal-dashboard-inicio; re-skineada en la feature 52,
   codex-reskin-inicio). Sólo queda el espaciado estructural: el resto del
   estilado de esta pantalla pasó a los componentes de Codex de arriba
   (.home-banner/.section-heading/.summary-grid/.summary-card/
   .notice-list/.notice-item). `.cs-inicio-alumno` NO es una clase de
   Codex — es un contenedor propio, sin equivalente en el prototipo porque
   éste sólo muestra un alumno a la vez; aquí puede haber varios. */
.cs-inicio-alumno {
	margin-bottom: 2rem;
	padding-bottom: 1.75rem;
	border-bottom: 1px solid var(--color-sand-deep);
}
.cs-inicio-alumno:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.cs-inicio-alumno__salon { font-weight: 400; color: var(--color-text-muted); font-size: 0.85em; }

/* ==========================================================================
   /portal/calendario — CONTENIDO de los 5 sub-tabs (feature 32, base;
   feature 47, calendario-5-subtabs, construyó Actividades/Publicaciones/Mes;
   feature 56, codex-reskin-calendario, 15 ago 2026, re-skinea el marcado de
   los cinco al vocabulario de Codex). Usado por class-cs-calendario-front.php
   y — sólo para Tareas — class-cs-tareas-front.php.

   POR QUÉ UNA REJILLA CSS Y NO UNA <table> PARA LA SEMANA: `.table-wrap`
   (Codex) fuerza overflow-x:auto por debajo de 700px, o sea que una tabla de
   5 columnas NO colapsaría en móvil, se desplazaría en horizontal. Aquí los
   días son tarjetas en un grid, así que sí pueden reflujar (5 -> 2 -> 1
   columna) — mismo motivo que ya tenía este bloque antes de la 56, sin
   cambiar con el re-skin.

   FEATURE 56: TODO este bloque pasa a vivir dentro de `body.cs-shell-body`,
   con los tokens de Codex (--navy/--gold/--gold-soft/--muted/--line/--sand)
   en vez de los --color-* del sitio público que usaba desde la feature 32 —
   Calendario era el ÚNICO contenido del portal que seguía sin ese
   acotamiento (el resto ya lo hicieron las features 51/53/54/55), así que
   antes de esta feature su aspecto desentonaba dentro del shell ya
   reskineado. Los componentes SIN equivalente en el prototipo de Codex
   (tarjeta de día, tarjeta de actividad, rejilla de mes) conservan sus
   nombres `.cs-cal-*` — mismo criterio de extensión que ya usó la 55 con
   `.attendance-table`/`.schedule-table` — pero la leyenda y el tipo de cada
   actividad pasan a compartir el `.status-key`/`.key` de Codex (variantes
   `.cs-cal-key--*`) en vez de las clases `.cs-cal-leyenda`/`.cs-cal-chip`/
   `.cs-cal-act__tipo` propias de antes.

   COLOR POR TIPO DE ACTIVIDAD (decisión del Pase B, documentada en
   progress/current.md, SIN cambiar de hex en esta feature — sólo de
   variable). El calendario real de Colegio Javier NO tiene color
   (progress/portal/analisis-expediente-javier.md §2.2: distingue los tres
   tipos sólo por convención tipográfica); el color es una mejora pedida
   explícitamente por el usuario, así que no hay original que contradecir.
   Se eligen tres familias de la dirección "Cercano Editorial" (navy + dorado
   + arena) y NO el semáforo rojo/amarillo/verde de `.cs-nota--*` (feature
   31), que significa otra cosa — "nota por debajo del mínimo" — y en un
   calendario se leería como "actividad mala/buena":
     - `evaluacion`    -> azul navy suave  (#DCE5F3 + borde navy).
     - `institucional` -> dorado/arena     (--gold-soft + borde dorado).
     - `no_lectivo`    -> gris apagado     (#E4E2DD + borde muted, cursiva):
       el único de los tres que significa "no pasa nada este día", y por eso
       es el que sale de la paleta cálida hacia el neutro.
   EL COLOR NUNCA ES EL ÚNICO CANAL (WCAG 1.4.1): cada actividad lleva
   además su etiqueta de tipo en texto (dentro del `.key`), y la vista
   imprime una leyenda.
   ========================================================================== */
body.cs-shell-body .cs-cal-cabecera {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 10px 20px;
	margin-bottom: 18px;
}
body.cs-shell-body .cs-cal-cabecera__texto { flex: 1 1 260px; min-width: 0; }
/* Especificidad (0,3,0) por encima de la regla general `.view-subtitle`
   (0,1,0, pensada para sentarse justo debajo de `.view-title`): aquí hay un
   `.module-tabs` de por medio, así que se anula el `margin-top: -16px`
   propio de esa regla y se ajusta el espaciado para este contexto. */
body.cs-shell-body .cs-cal-cabecera__texto .view-subtitle,
body.cs-shell-body .cs-cal-cabecera > .view-subtitle {
	margin: 0 0 4px;
	max-width: none;
}

body.cs-shell-body .cs-cal-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	/* `flex: 1 1 auto` + `min-width: 0` (no `flex: 0 0 auto`): un item flex
	   con flex-shrink 0 y sin min-width propio se dimensiona a su ancho de
	   contenido SIN wrap aunque `.cs-cal-nav` tenga su propio
	   `flex-wrap: wrap` -- el wrap interno sólo actúa si el ancho del propio
	   contenedor está acotado. Sin este ajuste, en 375px los 3 enlaces
	   desbordaban el viewport ~60px (confirmado con getBoundingClientRect
	   al verificar la feature 56) pese a que `document.documentElement`
	   no reportaba scroll horizontal -- el overflow quedaba oculto, no
	   resuelto. */
	flex: 1 1 auto;
	min-width: 0;
}
body.cs-shell-body .cs-cal-nav a {
	display: inline-block;
	padding: 7px 14px;
	border: 1px solid var(--line);
	border-radius: 999px;
	font-size: 12px;
	font-weight: 800;
	color: var(--navy);
	background: #fff;
}
body.cs-shell-body .cs-cal-nav a:hover { background: var(--gold-soft); border-color: var(--gold); text-decoration: none; }

/* Leyenda (.status-key, ya portado por la 53) + tipo de cada actividad:
   variantes del `.key` de Codex, mismos 3 colores por tipo de siempre. */
body.cs-shell-body .key.cs-cal-key--evaluacion { background: #DCE5F3; color: var(--navy); }
body.cs-shell-body .key.cs-cal-key--institucional { background: var(--gold-soft); color: var(--navy); }
body.cs-shell-body .key.cs-cal-key--no_lectivo { background: #E4E2DD; color: var(--muted); font-style: italic; }

body.cs-shell-body .cs-cal-semana {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 12px;
	margin-bottom: 24px;
}
body.cs-shell-body .cs-cal-dia {
	background: var(--sand);
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 14px 13px;
	border-top: 3px solid var(--line);
	min-width: 0;
}
body.cs-shell-body .cs-cal-dia--hoy { border-top-color: var(--gold); }
body.cs-shell-body .cs-cal-dia__titulo {
	margin: 0 0 10px;
	font-size: 14px;
	font-weight: 900;
	color: var(--navy);
}
body.cs-shell-body .cs-cal-dia__fecha { display: block; font-size: 12px; font-weight: 400; color: var(--muted); }
body.cs-shell-body .cs-cal-dia__vacio { margin: 0; font-size: 12px; font-style: italic; color: var(--muted); }
body.cs-shell-body .cs-cal-dia__lista { display: block; margin: 0; padding: 0; list-style: none; }

body.cs-shell-body .cs-cal-act {
	border-radius: 8px;
	border-left: 4px solid var(--muted);
	padding: 8px 10px;
	margin-bottom: 8px;
	font-size: 13px;
	overflow-wrap: anywhere;
}
body.cs-shell-body .cs-cal-act:last-child { margin-bottom: 0; }
body.cs-shell-body .cs-cal-act .key { margin-bottom: 4px; }
body.cs-shell-body .cs-cal-act__titulo { display: block; font-weight: 800; color: var(--navy); }
body.cs-shell-body .cs-cal-act__meta { display: block; font-size: 12px; color: var(--muted); }

/* Las tres familias de color de la tarjeta completa (fondo + filete
   izquierdo) — mismos hex que las variantes .key de arriba. */
body.cs-shell-body .cs-cal-act--evaluacion { background: #DCE5F3; border-left-color: var(--navy); }
body.cs-shell-body .cs-cal-act--institucional { background: var(--gold-soft); border-left-color: var(--gold); }
body.cs-shell-body .cs-cal-act--no_lectivo { background: #E4E2DD; border-left-color: var(--muted); }
body.cs-shell-body .cs-cal-act--no_lectivo .cs-cal-act__titulo { font-style: italic; }

/* Colapso responsive de la rejilla de 5 columnas — mismos DOS breakpoints
   de siempre (780px/600px): tablet -> 2 columnas (2+2+1), móvil -> 1
   columna (un día por fila, la semana se lee como lista vertical). */
@media (max-width: 780px) {
	body.cs-shell-body .cs-cal-semana { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	body.cs-shell-body .cs-cal-semana { grid-template-columns: 1fr; }
	body.cs-shell-body .cs-cal-nav a { flex: 1 1 auto; text-align: center; }
	body.cs-shell-body .cs-cal-lista-plana__fecha { min-width: 100%; }
}

/* Actividades: lista plana agrupada por fecha (no por semana). Reutiliza
   .cs-cal-dia__lista/.cs-cal-act para cada fila -- sólo aporta la etiqueta
   de fecha delante de cada tarjeta. */
body.cs-shell-body .cs-cal-lista-plana { margin: 0; padding: 0; list-style: none; }
body.cs-shell-body .cs-cal-lista-plana__fila {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px 14px;
	padding: 10px 0;
	border-bottom: 1px solid var(--line);
}
body.cs-shell-body .cs-cal-lista-plana__fila:last-child { border-bottom: none; }
body.cs-shell-body .cs-cal-lista-plana__fecha {
	flex: 0 0 auto;
	min-width: 150px;
	font-weight: 800;
	font-size: 13px;
	color: var(--navy);
}
body.cs-shell-body .cs-cal-lista-plana__fila--hoy .cs-cal-lista-plana__fecha { color: var(--gold); }
body.cs-shell-body .cs-cal-lista-plana__fila .cs-cal-dia__lista { flex: 1 1 260px; margin: 0; }

/* Detalle de una actividad (sub-tab Actividades, ?actividad_id=): reutiliza
   `.breakdown` (mismo componente-tarjeta que Promedio Preliminar, feature
   53) para el marco de la tarjeta -- aquí sólo se ajusta el ancho y el h2. */
body.cs-shell-body .cs-cal-detalle { max-width: 32rem; }
body.cs-shell-body .cs-cal-detalle h2 { margin: 8px 0; color: var(--navy); }
body.cs-shell-body .cs-cal-detalle .key { margin-bottom: 6px; }

/* Mes: rejilla lunes-viernes con mini-chips de color por tipo. Tabla normal
   dentro de .table-wrap (mismo envoltorio de scroll de Codex que ya usan
   Tareas/Publicaciones), así que hereda cabecera/bordes de esa regla --
   aquí sólo se ajusta el contenido de cada celda. */
body.cs-shell-body .cs-cal-mes th { text-align: center; }
body.cs-shell-body .cs-cal-mes td { min-width: 136px; vertical-align: top; }
body.cs-shell-body .cs-cal-mes__celda--vacia { background: var(--sand); }
body.cs-shell-body .cs-cal-mes__celda--hoy { box-shadow: inset 0 0 0 2px var(--gold); }
body.cs-shell-body .cs-cal-mes__numero {
	display: block;
	font-weight: 800;
	color: var(--navy);
	margin-bottom: 6px;
}
/* Mismos colores por tipo que .cs-cal-act--* (arriba): el mini-chip de Mes
   combina esa clase con .cs-cal-mes__chip para el tamaño/forma. */
body.cs-shell-body .cs-cal-mes__chip {
	display: block;
	font-size: 11px;
	font-weight: 800;
	padding: 3px 6px;
	margin-bottom: 4px;
	border-radius: 6px;
	border-left: 3px solid transparent;
	overflow-wrap: anywhere;
}
body.cs-shell-body .cs-cal-mes__chip:last-child { margin-bottom: 0; }

/* Publicaciones (class-cs-calendario-front.php::render_publicaciones()):
   tabla ya envuelta en `.table-wrap` de Codex, columnas Docente/Título/
   Materia/Promedio (fijadas por la feature 47, sin tocar). `.key.gold` es
   una variante nueva mínima del componente `.key` (mismo criterio que las
   variantes `.cs-cal-key--*` de arriba) para el marcador "Nuevo" que antes
   era un `<em>(nuevo)</em>` suelto. */
body.cs-shell-body .key.gold { background: var(--gold-soft); color: var(--navy); }
body.cs-shell-body .publications-table td:first-child { font-weight: 800; color: var(--navy); }
body.cs-shell-body .publications-table td:nth-child(3),
body.cs-shell-body .publications-table td:nth-child(4) { color: var(--muted); text-align: center; }

/* Tareas (class-cs-tareas-front.php, sirve TANTO /portal/tareas COMO el 5º
   sub-tab de Calendario -- ver el docblock de esa clase): `.assignments-table`
   extiende `.table-wrap` (mismo criterio que `.attendance-table`/
   `.schedule-table` de la feature 55) y `.cs-form-stack` extiende el
   vocabulario de formularios de Codex para el único formulario del portal
   con varios campos apilados (el resto de pantallas re-skineadas sólo
   necesitaban `.toolbar`, pensado para controles en una sola fila). */
body.cs-shell-body .assignments-table { min-width: 760px; }
body.cs-shell-body .assignments-table td:first-child,
body.cs-shell-body .assignments-table th:first-child { color: var(--navy); font-weight: 800; }

body.cs-shell-body .cs-form-stack p { margin: 0 0 14px; }
body.cs-shell-body .cs-form-stack label {
	display: block;
	margin: 0 0 5px;
	color: var(--navy);
	font-size: 13px;
	font-weight: 800;
}
body.cs-shell-body .cs-form-stack input[type="text"],
body.cs-shell-body .cs-form-stack input[type="date"],
body.cs-shell-body .cs-form-stack input[type="file"],
body.cs-shell-body .cs-form-stack select,
body.cs-shell-body .cs-form-stack textarea {
	width: 100%;
	max-width: 480px;
	padding: 8px 10px;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: #fff;
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 13px;
}
body.cs-shell-body .cs-form-stack textarea { max-width: 100%; resize: vertical; }

/* ==========================================================================
   Portal del Docente — /portal/docente (feature 61,
   portal-docente-shell-y-listas, 19 ago 2026). Componentes del prototipo de
   Codex portados AQUÍ POR PRIMERA VEZ, copiados de su `styles.css` (líneas
   230, 242 y 243) y acotados a `body.cs-shell-body` — mismo criterio D1 de
   progress/features/feature-51.md, sin el cual `.button`, `.avatar` y
   `.filter-bar` (nombres genéricos) podrían alcanzar al sitio público.

   QUÉ SE PORTA: `.button` (+ `-primary`/`-secondary`), `.metric-grid`/
   `.metric-card` con sus 4 tonos, `.class-card-grid`/`.ui-card`/
   `.card-heading`/`.class-meta`/`.card-actions`, `.filter-bar`/
   `.search-control`, `.student-card-grid`/`.student-card`/`.avatar` con sus
   4 tonos, y `.calendar-event`/`.event-date`. Valores del prototipo, sin
   reinterpretar.

   QUÉ NO SE PORTA: todo el layout `.role-app`/`.role-layout`/`.role-sidebar`
   del prototipo (el portal de rol con barra lateral propia). Aquí el
   docente vive dentro del MISMO shell que los otros tres roles
   (`.portal-shell`, feature 51), así que ese contenedor no existe y sus
   reglas no tendrían a qué aplicarse. `.two-column`/`.dashboard-grid`/
   `.progress-row`/`.grade-chip`/`.teacher-gradebook`/`.inline-person`
   tampoco: pertenecen a vistas del prototipo que esta feature no construye.

   BREAKPOINTS RE-ANCLADOS, y es una adaptación consciente y MEDIDA. Codex
   colapsa estas rejillas en 1020px y 700px, valores calculados para su
   `.role-content`: con su layout, a 1020px de viewport el área de contenido
   útil queda en ~669px, y ése es el ancho por debajo del cual el prototipo
   deja de querer 3-4 columnas. Dentro de ESTE shell el área útil es más
   estrecha para el mismo viewport, porque `.portal-body` reserva 250px al
   panel lateral hasta 850px: medido con getBoundingClientRect(), el
   contenido útil es ≈ viewport − 374px mientras el panel está en pie. El
   equivalente del umbral de Codex es por tanto ≈ 1040px de viewport, no
   1020px, y NO 850px: a 860px de viewport (justo por encima del breakpoint
   del shell) las 4 `.metric-card` se quedaban en 108px de ancho cada una
   — medido, no supuesto — con el texto envuelto en 173px de alto. Por eso
   el colapso a 2 columnas va en 1040px. El segundo escalón (1 columna) usa
   600px, que es el valor que este archivo ya emplea para el resto del
   contenido del portal. Mismo tipo de adaptación que ya hicieron las
   features 55 y 56 al portar componentes a un contenedor distinto del que
   Codex asumía.
   ========================================================================== */

/* `.button` (styles.css:230). El portal no tenía este componente: hasta la
   feature 60 todas las acciones eran enlaces de texto o `<button>` nativo
   sin estilo. Se porta entero porque las tarjetas de clase necesitan
   acciones visibles y el prototipo ya define cómo se ven. */
body.cs-shell-body .button {
	min-height: 37px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	padding: 8px 13px;
	border: 1px solid transparent;
	border-radius: 9px;
	color: var(--navy);
	font-size: 12px;
	font-weight: 900;
	text-decoration: none;
	transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
body.cs-shell-body .button:hover {
	transform: translateY(-1px);
	box-shadow: 0 5px 12px rgba(16, 28, 82, .12);
	text-decoration: none;
}
body.cs-shell-body .button-primary { background: var(--navy); color: #fff; }
body.cs-shell-body .button-primary:hover { background: var(--navy-2); }
body.cs-shell-body .button-secondary { border-color: #d6c49b; background: #fff9e9; }

/* `.metric-grid` / `.metric-card` (styles.css:242): las 4 métricas del
   panel del docente. Los cuatro tonos son los mismos cuatro que usa
   `teacherDashboard()` del prototipo (navy/gold/red/green). */
body.cs-shell-body .metric-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 13px;
	margin-bottom: 26px;
}
body.cs-shell-body .metric-card {
	min-height: 125px;
	display: grid;
	align-content: center;
	gap: 4px;
	padding: 17px;
	border: 1px solid #e8e2d3;
	border-radius: 14px;
	background: #fffefa;
	min-width: 0;
}
body.cs-shell-body .metric-card > span {
	color: var(--muted);
	font-size: 11px;
	font-weight: 900;
	text-transform: uppercase;
}
body.cs-shell-body .metric-card strong {
	color: var(--navy);
	font-size: 30px;
	line-height: 1;
}
body.cs-shell-body .metric-card small {
	color: var(--muted);
	font-size: 11px;
	overflow-wrap: anywhere;
}
body.cs-shell-body .metric-gold { border-top: 4px solid var(--gold); }
body.cs-shell-body .metric-navy { border-top: 4px solid var(--navy); }
body.cs-shell-body .metric-green { border-top: 4px solid #4c9666; }
body.cs-shell-body .metric-red { border-top: 4px solid #cf6060; }

/* `.calendar-event` / `.event-date` (styles.css:242, componente
   `UI.CalendarEvent` de components.js:20): la lista de actividades del
   panel. */
body.cs-shell-body .calendar-event {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 0;
	border-bottom: 1px solid var(--line);
}
body.cs-shell-body .calendar-event:last-of-type { border-bottom: 0; }
body.cs-shell-body .event-date {
	flex: 0 0 auto;
	width: 84px;
	color: var(--navy);
	font-size: 11px;
	font-weight: 900;
}
body.cs-shell-body .calendar-event > div { display: grid; gap: 2px; flex: 1; min-width: 0; }
body.cs-shell-body .calendar-event strong { color: var(--navy); font-size: 13px; overflow-wrap: anywhere; }
body.cs-shell-body .calendar-event small { color: var(--muted); font-size: 11px; overflow-wrap: anywhere; }

/* `.class-card-grid` / `.ui-card` / `.card-heading` / `.class-meta` /
   `.card-actions` (styles.css:243): las tarjetas de "Mis clases". */
body.cs-shell-body .class-card-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 15px;
}
body.cs-shell-body .ui-card {
	padding: 18px;
	border: 1px solid #e7e1d2;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 4px 11px rgba(16, 28, 82, .04);
	min-width: 0;
}
body.cs-shell-body .ui-card h3 { margin: 0; color: var(--navy); font-size: 16px; overflow-wrap: anywhere; }
body.cs-shell-body .ui-card p { color: var(--muted); font-size: 12px; }
body.cs-shell-body .card-heading {
	display: flex;
	align-items: start;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 13px;
}
body.cs-shell-body .card-heading p { margin: 3px 0 0; }
body.cs-shell-body .class-meta {
	display: grid;
	gap: 6px;
	margin: 15px 0;
	color: var(--muted);
	font-size: 12px;
	overflow-wrap: anywhere;
}
body.cs-shell-body .card-actions { display: flex; flex-wrap: wrap; gap: 7px; }

/* `.filter-bar` / `.search-control` (styles.css:243): la barra de búsqueda
   de "Mis estudiantes". El `<button>` de envío toma el aspecto de
   `.button-primary` de arriba: el prototipo filtra con JS al teclear y no
   tiene botón, pero aquí el filtro es un `<form method="get">` en servidor
   (el portal no carga JS propio, decisión heredada de la feature 43) y ese
   formulario necesita un envío visible. Los controles nativos reutilizan
   los MISMOS valores que `.toolbar select` (ya portado por la feature 55),
   para que no haya dos aspectos distintos de `<select>` en el portal. */
body.cs-shell-body .filter-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	gap: 11px;
	margin-bottom: 19px;
	padding: 13px;
	border: 1px solid var(--line);
	border-radius: 11px;
	background: #fffdf7;
}
body.cs-shell-body .filter-bar label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--navy);
	font-size: 13px;
	font-weight: 900;
}
body.cs-shell-body .search-control {
	position: relative;
	min-width: 220px;
	flex: 1 1 220px;
}
body.cs-shell-body .search-control > span[aria-hidden] {
	position: absolute;
	left: 11px;
	top: 9px;
	color: var(--muted);
	font-size: 17px;
}
body.cs-shell-body .filter-bar input[type="search"],
body.cs-shell-body .filter-bar select {
	padding: 7px 10px;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: #fff;
	color: var(--navy);
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 800;
}
body.cs-shell-body .search-control input[type="search"] {
	width: 100%;
	min-width: 0;
	padding-left: 33px;
	font-weight: 400;
}
body.cs-shell-body .filter-bar button[type="submit"] {
	min-height: 37px;
	padding: 8px 13px;
	border: 1px solid transparent;
	border-radius: 9px;
	background: var(--navy);
	color: #fff;
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 900;
	cursor: pointer;
}
body.cs-shell-body .filter-bar button[type="submit"]:hover { background: var(--navy-2); }

/* `.student-card-grid` / `.student-card` / `.avatar` (styles.css:243 y 228):
   las tarjetas de "Mis estudiantes". Los 4 tonos de `.avatar` son los del
   prototipo; aquí se elige uno por el id del alumno (presentación pura, no
   codifica ningún dato — ver CS_Docente_Front::TONOS_AVATAR). */
body.cs-shell-body .student-card-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 13px;
}
body.cs-shell-body .student-card {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 76px;
	padding: 12px;
	border: 1px solid #e8e2d3;
	border-radius: 12px;
	background: #fff;
	min-width: 0;
}
body.cs-shell-body .student-card > div { display: grid; flex: 1; gap: 2px; min-width: 0; }
body.cs-shell-body .student-card strong { color: var(--navy); font-size: 13px; overflow-wrap: anywhere; }
body.cs-shell-body .student-card small { color: var(--muted); font-size: 11px; overflow-wrap: anywhere; }
body.cs-shell-body .avatar {
	display: inline-grid;
	flex: 0 0 auto;
	width: 38px;
	height: 38px;
	place-items: center;
	border-radius: 50%;
	color: var(--navy);
	font-size: 12px;
	font-weight: 900;
}
body.cs-shell-body .avatar-gold { background: var(--gold); }
body.cs-shell-body .avatar-navy { background: var(--navy); color: #fff; }
body.cs-shell-body .avatar-sand { background: var(--gold-soft); }
body.cs-shell-body .avatar-green { background: var(--green); color: var(--green-ink); }

/* Colapso responsive: 850px es el breakpoint del propio shell (donde el
   panel lateral se pliega y el contenido pasa a ancho completo) y 600px el
   que este archivo ya usa para el resto del contenido del portal. Ver el
   comentario de "BREAKPOINTS RE-ANCLADOS" al principio de este bloque. */
@media (max-width: 1040px) {
	body.cs-shell-body .metric-grid,
	body.cs-shell-body .class-card-grid,
	body.cs-shell-body .student-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
	body.cs-shell-body .metric-grid,
	body.cs-shell-body .class-card-grid,
	body.cs-shell-body .student-card-grid { grid-template-columns: 1fr; }
	body.cs-shell-body .metric-card { min-height: 97px; }
	body.cs-shell-body .filter-bar { display: grid; grid-template-columns: 1fr; }
	body.cs-shell-body .search-control { width: 100%; min-width: 0; }
	body.cs-shell-body .calendar-event { align-items: flex-start; }
	body.cs-shell-body .event-date { width: 74px; }
}

/* ==========================================================================
   PORTAL ADMINISTRATIVO (feature 64, portal-admin-shell-y-usuarios)
   --------------------------------------------------------------------------
   TODO ACOTADO A `body.cs-shell-body`, igual que el resto del bloque de
   Codex y por el mismo motivo (D1 de progress/features/feature-51.md): sin
   ese prefijo, nombres tan genéricos como `.cs-admin-form label` se
   filtrarían al sitio público.

   NO SE PORTA NINGÚN COMPONENTE NUEVO DEL PROTOTIPO. Las cuatro superficies
   administrativas reutilizan los que ya están arriba en este archivo
   (`.metric-grid`, `.ui-card`, `.filter-bar`, `.button`, `.table-wrap`,
   `.empty-state`, `.section-heading`). Lo que sigue son las cuatro piezas
   que ese vocabulario no tenía y que esta pantalla sí necesita: el aviso de
   resultado de un POST, el formulario plegable, la línea de acción dentro de
   una celda de tabla, y la lista de alcance del rol. Ninguna inventa color
   ni tipografía: todas usan los tokens ya definidos.
   ========================================================================== */

/* Resultado del POST, impreso arriba de la superficie. Dos tonos: el verde
   de `.metric-green` para el éxito y el rojo de `.metric-red` para el fallo,
   reutilizados en vez de introducir un par nuevo. */
body.cs-shell-body .cs-admin-aviso {
	margin: 0 0 16px;
	padding: 11px 14px;
	border: 1px solid var(--line);
	border-left-width: 4px;
	border-radius: 10px;
	background: #fff;
	font-size: 13px;
	line-height: 1.5;
	overflow-wrap: anywhere;
}
body.cs-shell-body .cs-admin-aviso strong { color: var(--navy); }
body.cs-shell-body .cs-admin-aviso--ok { border-left-color: var(--green-ink); background: var(--green); }
body.cs-shell-body .cs-admin-aviso--error { border-left-color: #a33; background: #fdf1f1; }

/* Nota explicativa en letra pequeña (definición de una métrica, límite
   conocido de un botón). No es un `.empty-state`: no reemplaza contenido,
   lo acompaña. */
body.cs-shell-body .cs-admin-nota {
	margin: 6px 0 18px;
	color: var(--muted);
	font-size: 12px;
	line-height: 1.55;
}
body.cs-shell-body .cs-admin-nota a { color: var(--navy); font-weight: 800; }

/* Formulario plegable (<details>) para no llenar la pantalla de campos
   cuando lo normal es venir a consultar, no a dar de alta. */
body.cs-shell-body .cs-admin-form-wrap {
	margin: 0 0 18px;
	padding: 12px 14px;
	border: 1px solid var(--line);
	border-radius: 11px;
	background: #fff;
}
body.cs-shell-body .cs-admin-form-wrap > summary {
	color: var(--navy);
	cursor: pointer;
	font-size: 13px;
	font-weight: 900;
}
body.cs-shell-body .cs-admin-form {
	display: grid;
	gap: 10px;
	align-items: end;
	margin-top: 12px;
	grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
}
body.cs-shell-body .cs-admin-form label {
	display: grid;
	gap: 4px;
	color: var(--navy);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .04em;
	text-transform: uppercase;
}
body.cs-shell-body .cs-admin-form input,
body.cs-shell-body .cs-admin-form select {
	width: 100%;
	max-width: 100%;
	padding: 7px 9px;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: #fff;
	color: var(--ink);
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
}
body.cs-shell-body .cs-admin-form--compacto { margin-top: 10px; grid-template-columns: repeat(auto-fit, minmax(135px, 1fr)); }

/* Formulario de UNA acción dentro de una celda o de un <li>: los controles
   van en línea y no rompen la fila. */
body.cs-shell-body .cs-admin-inline {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 5px;
	align-items: center;
	margin: 0;
}
body.cs-shell-body .cs-admin-inline select {
	padding: 5px 7px;
	border: 1px solid var(--line);
	border-radius: 7px;
	background: #fff;
	font: inherit;
	font-size: 12px;
}
body.cs-shell-body .cs-admin-inline .button { padding: 5px 10px; font-size: 11px; }

/* Asignaciones de un docente dentro de su tarjeta. */
body.cs-shell-body .cs-admin-asignaciones { margin: 4px 0 0; padding: 0; list-style: none; }
body.cs-shell-body .cs-admin-asignaciones li {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
	padding: 7px 0;
	border-top: 1px solid var(--line);
	color: var(--muted);
	font-size: 12px;
	overflow-wrap: anywhere;
}
body.cs-shell-body .cs-admin-asignaciones strong { color: var(--navy); }

/* «Alcance de tu rol»: el criterio 6 del acceptance hecho visible. El tono
   NO codifica una alarma —— no tener una capacidad de dirección es lo normal
   para secretaría —— así que "no" usa el gris de `--muted`, no rojo. */
body.cs-shell-body .cs-scope-list { margin: 0 0 18px; padding: 0; list-style: none; }
body.cs-shell-body .cs-scope-list li {
	display: grid;
	gap: 2px;
	padding: 9px 12px 9px 30px;
	position: relative;
	border: 1px solid var(--line);
	border-radius: 9px;
	background: #fff;
	font-size: 12px;
	overflow-wrap: anywhere;
}
body.cs-shell-body .cs-scope-list li + li { margin-top: 6px; }
body.cs-shell-body .cs-scope-list li::before {
	position: absolute;
	top: 9px;
	left: 11px;
	font-weight: 900;
}
body.cs-shell-body .cs-scope-list li strong { color: var(--navy); }
body.cs-shell-body .cs-scope-list li span { color: var(--muted); }
body.cs-shell-body .cs-scope-list .is-yes::before { content: "\2713"; color: var(--green-ink); }
body.cs-shell-body .cs-scope-list .is-no::before { content: "\2014"; color: var(--muted); }
body.cs-shell-body .cs-scope-list .is-no { background: #fbfaf7; }

@media (max-width: 600px) {
	body.cs-shell-body .cs-admin-form,
	body.cs-shell-body .cs-admin-form--compacto { grid-template-columns: 1fr; }
	body.cs-shell-body .cs-admin-inline { display: flex; width: 100%; }
}

/* ==========================================================================
   CONFIGURACIÓN ACADÉMICA (feature 65, portal-admin-academico)
   --------------------------------------------------------------------------
   Tres piezas nuevas y nada más: el diagnóstico de consistencia de un salón
   contra el plan de estudio, la casilla de confirmación en línea, y el
   inventario de lo que cuelga de una asignación. El resto de las tres
   superficies (Salones, Materias, Periodos) reutiliza el vocabulario que ya
   está arriba — `.table-wrap`, `.ui-card`, `.button`, `.empty-state`,
   `.section-heading`, `.cs-admin-form`, `.cs-admin-inline`, `.cs-admin-nota`,
   `.cs-admin-aviso` — sin inventar ningún color ni tipografía: `is-warn`
   toma el ámbar de la marca (`--gold`), que ya existe.
   ========================================================================== */

body.cs-shell-body .cs-admin-diag {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 999px;
	border: 1px solid var(--line);
	font-size: 11px;
	line-height: 1.5;
	color: var(--muted);
	background: #fbfaf7;
}
body.cs-shell-body .cs-admin-diag.is-yes { border-color: var(--green-ink); color: var(--green-ink); background: var(--green); }
body.cs-shell-body .cs-admin-diag.is-warn { border-color: var(--gold); color: var(--navy); background: #fdf7e8; }
body.cs-shell-body .cs-admin-diag.is-no { border-color: #a33; color: #a33; background: #fdf1f1; }

body.cs-shell-body .cs-admin-check {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 11px;
	color: var(--muted);
	white-space: nowrap;
}
body.cs-shell-body .cs-admin-check input { margin: 0; }

body.cs-shell-body .cs-admin-inventario {
	display: block;
	margin: 4px 0 2px;
	font-size: 11px;
	line-height: 1.6;
	color: var(--muted);
}
body.cs-shell-body .cs-admin-inventario.is-vacio { font-style: italic; }

body.cs-shell-body .cs-admin-anio-acciones {
	margin: 10px 0 22px;
	padding: 12px 14px;
	border: 1px dashed var(--line);
	border-radius: 10px;
	background: #fbfaf7;
}

/* ==========================================================================
   RE-SKIN CABECERA Y PIE — feature 70 (25 ago 2026, `web-reskin-shell-
   cabecera-pie`), Etapa 1 de la Opción A del informe de integración
   (diseño "Antigravity", 7 decisiones firmadas por el cliente).

   Todo lo de aquí abajo viene de PORTAR (leer, nunca editar ni desplegar)
   C:\Users\dmedi\Claude Code\craftsman-web\style.css (bloque :root y las
   reglas .header, .logo, .nav, .hamburger y .footer (con sus variantes)
   que consume header.php y footer.php) — mismo principio que ya aplica la
   feature 51 al portal: Codex es dueño del diseño, este tema lo reproduce.

   TOKENS BAJO PREFIJO `--cx-*`, A PROPÓSITO, NO EN EL `:root` DE ARRIBA
   (líneas 8-26): 4 de los nombres del `:root` de Codex COLISIONAN por
   nombre, con valor distinto, con tokens que el resto del sitio público YA
   consume desde el 27 jul 2026 — `--font-body` (Nunito aquí vs. Inter en
   Codex), `--radius-md` (14px vs. 16px), `--radius-lg` (22px vs. 24px) y
   `--shadow-soft` (blur/alpha distintos). Fusionarlos en el mismo `:root`
   habría cambiado en silencio la portada, Nosotros, Contacto, Galería y
   Noticias — ninguna de las cuales entra en esta feature (la portada es la
   71) — y también las 13 pantallas del portal, que enlazan este archivo
   directo y SÍ heredan `var(--font-body)`/`var(--radius-md)`/etc. donde no
   los redefinen bajo `body.cs-shell-body`. El prefijo evita las cuatro
   colisiones sin tener que renombrar nada de lo que ya existe.

   Consecuencia para "el portal SÍ adopta la tipografía nueva" (decisión 6
   del cliente, citada en el acceptance de la feature 70): con este prefijo,
   el portal NO la adopta todavía — y no podría aunque no se usara prefijo,
   porque `CS_Portal_Shell::apertura()` (theme/inc/portal/class-cs-portal-
   shell.php) escribe a mano su propio <link> a Nunito, independiente de
   wp_enqueue_style(), y las 13 pantallas del portal no llaman a wp_head().
   Tocar ese archivo está fuera del alcance dado a esta feature (regla:
   "ni un archivo de theme/inc/portal/ se toca"). Documentado como deuda
   nueva en progress/deuda.md, no como bloqueo — ver progress/current.md. */

:root {
	--cx-navy:          #1A2B4A;
	--cx-navy-deep:      #0F1C30;
	--cx-navy-mid:       #253756;
	--cx-gold:           #C9922A;
	--cx-gold-light:     #E8B84B;
	--cx-gold-pale:      #FBF0D9;
	--cx-teal:           #2AB5A4;
	--cx-teal-light:     #E0F7F5;
	--cx-cream:          #FBF7F0;
	--cx-sand:           #F4EDE0;
	--cx-sand-deep:      #EDE0C8;
	--cx-white:          #FFFFFF;
	--cx-text:           #1E2A3A;
	--cx-text-muted:     #5A6375;
	--cx-text-light:     #8A93A2;

	--cx-radius-sm:      8px;
	--cx-radius-md:      16px;
	--cx-radius-lg:      24px;
	--cx-radius-xl:      36px;
	--cx-radius-pill:    999px;

	--cx-shadow-soft:    0 8px 32px rgba(26, 43, 74, 0.10);
	--cx-shadow-card:    0 4px 20px rgba(26, 43, 74, 0.08);
	--cx-shadow-float:   0 16px 48px rgba(26, 43, 74, 0.18);

	--cx-container:      1140px;
	--cx-font-head:      'Plus Jakarta Sans', system-ui, sans-serif;
	--cx-font-body:      'Inter', system-ui, sans-serif;

	--cx-transition:     0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---- Cabecera ---- */
.header {
	position: sticky;
	top: 0;
	z-index: 1000;
	background: var(--cx-white);
	box-shadow: 0 2px 20px rgba(26, 43, 74, 0.08);
	transition: box-shadow var(--cx-transition);
}
.header.scrolled { box-shadow: 0 4px 30px rgba(26, 43, 74, 0.14); }
.header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 24px;
	max-width: var(--container-width);
	margin: 0 auto;
	position: relative;
	z-index: 999;
	gap: 12px;
}

.logo { display: flex; align-items: center; gap: 12px; text-decoration: none; flex-shrink: 0; }
.logo__icon {
	width: 42px;
	height: 42px;
	border-radius: var(--cx-radius-md);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	overflow: hidden;
	/* Feature 79: el marcado de referencia trae este bloque con fondo
	   transparente (era un degradado navy sin equivalente en la referencia
	   antes de esta feature). El footer ya tenía su propio override
	   equivalente desde la feature 70 -intacto, no se toca aqui-; esta regla
	   base pasa a coincidir con el mismo resultado para el header. */
	background: transparent;
	box-shadow: none;
}
.logo__icon img,
.logo__icon .logo__img { width: 100%; height: 100%; object-fit: contain; display: block; }
.logo__text { line-height: 1.15; font-family: var(--cx-font-head); white-space: nowrap; }
.logo__name {
	font-family: var(--cx-font-head);
	font-weight: 800;
	font-size: 1rem;
	color: var(--cx-navy);
	display: block;
	white-space: nowrap;
}
.logo__sub {
	font-family: var(--cx-font-body);
	font-size: 0.7rem;
	color: var(--cx-gold);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	display: block;
}

.nav__list { display: flex; align-items: center; gap: 4px; }
.nav__link {
	font-family: var(--cx-font-head);
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--cx-text);
	padding: 8px 12px;
	border-radius: var(--cx-radius-sm);
	transition: var(--cx-transition);
	white-space: nowrap;
}
.nav__link:hover { color: var(--cx-navy); background: var(--cx-cream); }
.nav__link--portal { background: var(--cx-teal-light); color: var(--cx-teal); }
.nav__link--portal:hover { background: var(--cx-teal); color: var(--cx-white); }

.nav__cta {
	background: var(--cx-gold);
	color: var(--cx-white);
	padding: 10px 20px;
	border-radius: var(--cx-radius-pill);
	font-family: var(--cx-font-head);
	font-size: 0.88rem;
	font-weight: 700;
	box-shadow: 0 4px 16px rgba(201,146,42,0.30);
	transition: var(--cx-transition);
	white-space: nowrap;
	display: inline-block;
}
.nav__cta:hover {
	background: var(--cx-gold-light);
	transform: translateY(-1px);
	box-shadow: 0 6px 24px rgba(201,146,42,0.40);
}

.hamburger {
	display: none;
	flex-direction: column;
	gap: 5px;
	padding: 8px;
	border-radius: var(--cx-radius-sm);
	transition: var(--cx-transition);
	cursor: pointer;
	background: transparent;
	border: 0;
}
.hamburger:hover { background: var(--cx-cream); }
.hamburger span {
	display: block;
	width: 22px;
	height: 2px;
	background: var(--cx-navy);
	border-radius: 2px;
	transition: var(--cx-transition);
}
.hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Nav móvil */
.nav--mobile {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: var(--cx-white);
	/* Feature 81: el padding-top ya NO es un numero fijo adivinando la altura
	   de topbar+header (ese numero se quedo corto cuando el topbar creció en
	   la feature 78 y "Inicio" quedaba tapado). El panel trae ahora su PROPIA
	   fila de cabecera (`.nav-mobile__header`, justo debajo) que ocupa ese
	   espacio de forma real, así que aquí basta el mismo padding que a los
	   lados. Ver también el z-index, unas líneas más abajo. */
	padding: 20px 24px 32px;
	/* Mayor que `.header` (1000, más arriba en este archivo) a propósito: el
	   panel abierto debe pintarse POR ENCIMA de la cabecera real de la
	   página -incluyendo su logo-, nunca detrás. Antes era menor (998) y por
	   eso la cabecera real se pintaba encima del panel, tapando "Inicio". */
	z-index: 1001;
	overflow-y: auto;
	animation: cxSlideDown 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav--mobile.open { display: block; }
@keyframes cxSlideDown {
	from { opacity: 0; transform: translateY(-16px); }
	to   { opacity: 1; transform: translateY(0); }
}
.nav-mobile__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--cx-sand);
}
.nav-mobile__close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	border: 0;
	border-radius: var(--cx-radius-sm);
	background: transparent;
	color: var(--cx-navy);
	font-size: 1.3rem;
	line-height: 1;
	cursor: pointer;
	transition: var(--cx-transition);
}
.nav-mobile__close:hover { background: var(--cx-cream); }
.nav--mobile .nav__list { flex-direction: column; align-items: stretch; gap: 4px; }
.nav--mobile .nav__link {
	display: block;
	padding: 14px 16px;
	font-size: 1rem;
	border-bottom: 1px solid var(--cx-sand);
}
/* Feature 82 (29 ago 2026): la regla anterior era
   `.nav--mobile .nav__link:last-child` - :last-child se evalua contra los
   hermanos del propio <a> dentro de su <li>, y cada <a class="nav__link">
   es hijo unico de su <li>. Eso hacia que los 9 items fueran "el ultimo
   hijo" de su padre por igual, apagando el border-bottom en todos en vez
   de solo en el ultimo. Se apunta ahora al <li> que es ultimo hijo de
   <ul class="nav__list">, y se le quita el border-bottom solo a su
   .nav__link de adentro. */
.nav--mobile .nav__list li:last-child .nav__link { border-bottom: none; }
/* Feature 83 (29 ago 2026): el gap: 4px generico de .nav__list dejaba
   "Matricula 2027" y "Portal Academico" (el li siguiente, ultimo de la
   lista) pegados visualmente. margin-bottom aqui se suma a ese gap sin
   tocar el gap en si, asi que el resto de la lista (Inicio..Contacto) no
   cambia su espaciado. No se toca el margin-top: 16px de arriba del
   boton, que ya separaba bien de "Contacto". */
.nav--mobile .nav__cta { display: block; text-align: center; margin-top: 16px; margin-bottom: 12px; padding: 16px; font-size: 1rem; }

/* ≤1200px: colapsa a hamburguesa.
   Feature 80 (29 ago 2026): las dos reglas de abajo eran genericas
   (`.nav__list`/`.nav__cta` a secas) y por eso tambien apagaban el `<ul>` de
   adentro de `.nav--mobile` (hermano de `.header__inner`, no ancestro ni
   descendiente) - el panel se abria pero no mostraba ningun enlace. Se
   acotan al `<ul>` de escritorio, que vive dentro de `.header__inner > nav`.

   Feature 86 (29 ago 2026): el breakpoint subio de 780px a 1200px. Diagnostico
   medido en el navegador (no adivinado): `.nav__list` tiene 9 items con
   `white-space: nowrap` y sin `flex-wrap`, asi que su ancho minimo no cede -
   el header entero (logo + nav) necesita ~1144px de ancho para no desbordar,
   sin importar cuanto se achique el viewport por debajo de eso. Con el
   breakpoint viejo (780px) quedaba una franja de escritorio "de verdad"
   (781px-~1143px, e.g. 1024px, tablets en horizontal) donde se pintaba el
   `<ul>` de 9 items en vez de la hamburguesa, y desbordaba 120px de scroll
   horizontal en TODO el sitio (bug global del header, no de una pagina -
   hallado por el reviewer de la feature 85, reproducido igual en /preescolar/
   y en la portada). 1200px tiene margen (~56px) sobre el ancho medido para
   no reabrir el mismo bug si una etiqueta del menu cambia de longitud mas
   adelante. No afecta 768px (ya colapsaba, sigue colapsando) ni 1280px/1920px
   (ya mostraban el nav de escritorio, lo siguen mostrando: 1280 > 1200). */
@media (max-width: 1200px) {
	.header__inner > nav > .nav__list { display: none; }
	.header__inner .nav__cta { display: none; }
	.hamburger { display: flex; }
}
@media (min-width: 1201px) {
	.hamburger { display: none; }
	.nav--mobile { display: none !important; }
}

/* ---- Pie ---- */
.footer {
	background: var(--cx-navy-deep);
	padding: 56px 0 0;
	color: rgba(255,255,255,0.70);
	font-size: 0.9rem;
	font-family: var(--cx-font-body);
}
.footer__grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
	gap: 40px;
	padding-bottom: 48px;
	border-bottom: 1px solid rgba(255,255,255,0.08);
}
.footer__brand.logo .logo__name { color: var(--cx-white); }
.footer__brand.logo .logo__sub  { color: var(--cx-gold-light); }
.footer__brand .logo__icon { background: transparent; box-shadow: none; }
.footer__tagline {
	font-size: 0.88rem;
	color: rgba(255,255,255,0.55);
	line-height: 1.65;
	margin-top: 12px;
	margin-bottom: 20px;
	max-width: 240px;
}
.footer__socials { display: flex; gap: 8px; }
.footer__social-btn {
	width: 36px;
	height: 36px;
	border-radius: 8px;
	background: rgba(255,255,255,0.07);
	border: 1px solid rgba(255,255,255,0.10);
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(255,255,255,0.60);
	transition: var(--cx-transition);
}
.footer__social-btn .cs-icon { width: 16px; height: 16px; }
.footer__social-btn:hover { background: var(--cx-gold); border-color: var(--cx-gold); color: var(--cx-white); transform: translateY(-2px); }

.footer__col-title {
	font-family: var(--cx-font-head);
	font-size: 0.88rem;
	font-weight: 700;
	color: var(--cx-white);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin-bottom: 20px;
}
.footer__links { display: flex; flex-direction: column; gap: 10px; }
.footer__link {
	color: rgba(255,255,255,0.55);
	font-size: 0.88rem;
	transition: var(--cx-transition);
	display: flex;
	align-items: center;
	gap: 6px;
}
.footer__link:hover { color: var(--cx-gold-light); padding-left: 4px; }

.footer__contact-list { display: flex; flex-direction: column; gap: 12px; }
.footer__contact-item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 0.86rem;
	color: rgba(255,255,255,0.55);
	line-height: 1.5;
}
.footer__contact-item .cs-icon { width: 14px; height: 14px; flex-shrink: 0; margin-top: 2px; opacity: 0.5; }
.footer__contact-item a:hover { color: var(--cx-gold-light); }

.footer__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 0;
	gap: 12px;
	flex-wrap: wrap;
}
.footer__copy { font-size: 0.82rem; color: rgba(255,255,255,0.35); }
.footer__copy span { color: var(--cx-gold-light); font-weight: 600; }
.footer__bottom-links { display: flex; gap: 20px; }
.footer__bottom-link { font-size: 0.8rem; color: rgba(255,255,255,0.35); transition: var(--cx-transition); }
.footer__bottom-link:hover { color: rgba(255,255,255,0.70); }

@media (max-width: 780px) {
	.footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
	.footer__grid > *:first-child { grid-column: span 2; }
}
@media (max-width: 600px) {
	.footer__grid { grid-template-columns: 1fr; }
	.footer__grid > *:first-child { grid-column: span 1; }
	.footer__bottom { flex-direction: column; align-items: flex-start; gap: 8px; }
	.footer__bottom-links { gap: 12px; }
}

/* ==========================================================================
   RE-SKIN TOPBAR — feature 78 (27 ago 2026, `web-reskin-topbar-y-marca`).
   Cierra el hueco que dejó la feature 70 de arriba: aquella feature portó
   cabecera/nav/pie pero dejó el topbar de contacto sin tocar a propósito
   (ver docblock de theme/header.php). Portado (leer, nunca editar ni
   desplegar) de C:\Users\dmedi\Claude Code\craftsman-web\style.css líneas
   165-205 (reglas) y 1631-1633 (responsive, breakpoint 600px de la
   referencia). Mismos tokens `--cx-*` ya declarados en el bloque de la
   feature 70 de arriba — nada nuevo que definir aquí. */

.topbar {
	background: var(--cx-navy-deep);
	color: rgba(255,255,255,0.8);
	font-size: 0.82rem;
	font-family: var(--cx-font-body);
	padding: 10px 0;
	border-bottom: 1px solid rgba(255,255,255,0.07);
}
.topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}
.topbar__contacts { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.topbar__item {
	display: flex;
	align-items: center;
	gap: 6px;
	color: rgba(255,255,255,0.75);
	transition: color var(--cx-transition);
}
.topbar__item:hover { color: var(--cx-gold-light); }
.topbar__item .cs-icon { flex-shrink: 0; opacity: 0.7; }
.topbar__hours {
	display: flex;
	align-items: center;
	gap: 6px;
	color: rgba(255,255,255,0.6);
	font-size: 0.78rem;
}
.topbar__badge {
	background: var(--cx-gold);
	color: var(--cx-white);
	font-weight: 700;
	font-size: 0.72rem;
	padding: 3px 10px;
	border-radius: var(--cx-radius-pill);
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

/* ≤600px: mismo punto de corte que la referencia (style.css:1631-1633) */
@media (max-width: 600px) {
	.topbar__contacts { gap: 10px; }
	.topbar__item:nth-child(2) { display: none; }
	.topbar__hours { display: none; }
}

/* ==========================================================================
   RE-SKIN PORTADA — feature 71 (26 ago 2026, `web-reskin-portada`), Etapa 2
   de la Opción A del informe de integración (diseño "Antigravity"). Continúa
   el bloque de la feature 70 que hay justo encima.

   Todo lo de aquí abajo viene de PORTAR (leer, nunca editar ni desplegar)
   C:\Users\dmedi\Claude Code\craftsman-web\style.css y el bloque <style> de
   craftsman-web\index.html (líneas 180-357), que es donde viven las reglas de
   las decoraciones, la galería de instalaciones y el acordeón de FAQ.

   TODO VA BAJO EL ÁMBITO `.cx-home`, A PROPÓSITO. `front-page.php` pone esa
   clase en su <main>. El marcado de referencia reutiliza nombres de clase que
   este tema YA tiene con otro valor y con otros consumidores, medido con grep
   antes de escribir una línea:

     .eyebrow      → 404.php, home.php, page-matricula.php, page-nosotros.php,
                     page-oferta-educativa.php
     .btn          → prácticamente todas las plantillas
     .btn--outline → archive.php, home.php, single.php
     .container    → todas

   Sin el ámbito, portar esas reglas habría cambiado en silencio cinco páginas
   que no entran en esta feature. Es el mismo razonamiento que llevó al prefijo
   de tokens `--cx-` en la feature 70, aplicado ahora a los selectores. Los
   tokens siguen siendo los `--cx-` de arriba: esta feature no crea ni un
   prefijo nuevo ni pisa `--font-body`, `--radius-md`, `--radius-lg` ni
   `--shadow-soft`, que son las cuatro colisiones ya señaladas.

   `.hero` y `.director__*` del diseño viejo SÍ eran exclusivos de
   `front-page.php` y se retiraron de su sitio original (ver los dos
   comentarios de arriba en este mismo archivo).

   `body.cs-shell-body` (el portal) no se toca aquí ni una línea: nada de este
   bloque puede alcanzarlo, porque el portal nunca imprime `.cx-home`.

   AVISO PARA QUIEN EDITE ESTE ARCHIVO: no escribas nunca la notación de barra
   y asterisco entre dos nombres de clase dentro de un comentario. Esa
   secuencia CIERRA el comentario a mitad de frase y mata en silencio las
   reglas siguientes; `php -l` e `init.sh` no lo ven, porque es CSS puro. Pasó
   dos veces en la feature 70 y costó una ronda de review. Separa los nombres
   con comas. Comprueba el balance con un conteo de aperturas contra cierres
   sobre el archivo entero antes de dar nada por bueno.
   ========================================================================== */

/* ---- Reset local: el prototipo parte de márgenes a cero ---- */
.cx-home h1,
.cx-home h2,
.cx-home h3,
.cx-home h4,
.cx-home p,
.cx-home ul,
.cx-home blockquote {
	margin: 0;
	padding: 0;
}
.cx-home {
	font-family: var(--cx-font-body);
	color: var(--cx-text);
}
.cx-home button {
	cursor: pointer;
	border: none;
	background: none;
	font-family: inherit;
}

/* ---- Utilidades del prototipo ---- */
.cx-home .eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--cx-gold-pale);
	color: var(--cx-gold);
	font-family: var(--cx-font-head);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 6px 14px;
	border-radius: var(--cx-radius-pill);
	margin-bottom: 16px;
}
.cx-home .eyebrow--teal { background: var(--cx-teal-light); color: var(--cx-teal); }
.cx-home .eyebrow--navy { background: rgba(255,255,255,0.15); color: var(--cx-white); }
.cx-home .section-heading {
	font-family: var(--cx-font-head);
	font-size: clamp(1.9rem, 3.5vw, 2.8rem);
	font-weight: 800;
	line-height: 1.2;
	color: var(--cx-navy);
	margin-bottom: 16px;
}
.cx-home .section-heading--white { color: var(--cx-white); }
.cx-home .section-subtext {
	font-size: 1.05rem;
	color: var(--cx-text-muted);
	line-height: 1.7;
	max-width: 560px;
}
.cx-home .section-subtext--white { color: rgba(255,255,255,0.8); }
.cx-home .text-gold { color: var(--cx-gold); }
.cx-home .text-teal { color: var(--cx-teal); }
.cx-home .text-navy { color: var(--cx-navy); }

.cx-home .btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 14px 28px;
	border-radius: var(--cx-radius-pill);
	font-family: var(--cx-font-head);
	font-size: 0.95rem;
	font-weight: 700;
	transition: var(--cx-transition);
	white-space: nowrap;
}
.cx-home .btn svg { flex-shrink: 0; }
.cx-home .btn--primary {
	background: var(--cx-gold);
	color: var(--cx-white);
	border: none;
	box-shadow: 0 4px 20px rgba(201, 146, 42, 0.35);
}
.cx-home .btn--primary:hover {
	background: var(--cx-gold-light);
	color: var(--cx-white);
	box-shadow: 0 8px 30px rgba(201, 146, 42, 0.50);
	transform: translateY(-2px);
}
.cx-home .btn--outline {
	border: 2px solid var(--cx-navy);
	color: var(--cx-navy);
	background: transparent;
}
.cx-home .btn--outline:hover {
	background: var(--cx-navy);
	color: var(--cx-white);
	transform: translateY(-2px);
}
.cx-home .btn--outline-white {
	border: 2px solid rgba(255,255,255,0.6);
	color: var(--cx-white);
	background: transparent;
}
.cx-home .btn--outline-white:hover {
	background: rgba(255,255,255,0.15);
	border-color: var(--cx-white);
	color: var(--cx-white);
	transform: translateY(-2px);
}

/* ---- Scroll-reveal ----
   El JS del tema añade `visible` al entrar en pantalla y, como red de
   seguridad, a todos a los 1,5 s. Si el JS no llega a cargar, la regla de
   `html:not(.js-loaded)` deja todo visible: nunca se pierde contenido. */
.cx-home .reveal {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
	            transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.cx-home .reveal.visible { opacity: 1; transform: translateY(0); }
.cx-home .reveal-left  { opacity: 0; transform: translateX(-32px); transition: opacity 0.6s ease, transform 0.6s ease; }
.cx-home .reveal-right { opacity: 0; transform: translateX(32px); transition: opacity 0.6s ease, transform 0.6s ease; }
.cx-home .reveal-left.visible,
.cx-home .reveal-right.visible { opacity: 1; transform: translateX(0); }
.cx-home .reveal-delay-1 { transition-delay: 0.1s; }
.cx-home .reveal-delay-2 { transition-delay: 0.2s; }
.cx-home .reveal-delay-3 { transition-delay: 0.3s; }
.cx-home .reveal-delay-4 { transition-delay: 0.4s; }

@media (prefers-reduced-motion: reduce) {
	.cx-home .reveal,
	.cx-home .reveal-left,
	.cx-home .reveal-right {
		opacity: 1;
		transform: none;
		transition: none;
	}
}
html:not(.js-loaded) .cx-home .reveal,
html:not(.js-loaded) .cx-home .reveal-left,
html:not(.js-loaded) .cx-home .reveal-right {
	opacity: 1;
	transform: none;
}

/* ==========================================================================
   DECORACIONES (nubes, avioncito de papel, destellos, planetas, doodles)
   Decisión visual de Codex: se porta íntegra, no se recorta.
   ========================================================================== */
.cx-home .hero,
.cx-home .why-us,
.cx-home .installations,
.cx-home .programs,
.cx-home .activities,
.cx-home .director,
.cx-home .testimonials,
.cx-home .cta-band,
.cx-home .faq {
	position: relative;
	overflow: hidden;
}
.cx-home .hero__decorations,
.cx-home .section-decorations {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 1;
	overflow: hidden;
}
.cx-home .hero .container,
.cx-home .why-us .container,
.cx-home .installations .container,
.cx-home .programs .container,
.cx-home .activities .container,
.cx-home .director .container,
.cx-home .testimonials .container,
.cx-home .cta-band .container,
.cx-home .faq .container,
.cx-home .local-seo-section .container {
	position: relative;
	z-index: 2;
}

.cx-home .hero-cloud,
.cx-home .section-cloud {
	position: absolute;
	pointer-events: none;
	filter: drop-shadow(0 6px 16px rgba(26,43,74,0.05));
}
.cx-home .hero-cloud--1 { top: 15px; left: -15px; width: 160px; animation: cxFloatCloud 14s ease-in-out infinite alternate; }
.cx-home .hero-cloud--2 { top: 30px; right: 4%; width: 180px; animation: cxFloatCloud 18s ease-in-out infinite alternate-reverse; }
.cx-home .hero-cloud--3 { bottom: 70px; left: 6%; width: 120px; animation: cxFloatCloud 16s ease-in-out infinite alternate; }
.cx-home .section-cloud--left-top { top: 20px; left: -10px; width: 170px; animation: cxFloatCloud 15s ease-in-out infinite alternate; }
.cx-home .section-cloud--right-top { top: 25px; right: -10px; width: 180px; animation: cxFloatCloud 19s ease-in-out infinite alternate-reverse; }
.cx-home .section-cloud--left-bottom { bottom: 35px; left: 1%; width: 150px; animation: cxFloatCloud 17s ease-in-out infinite alternate; }
.cx-home .section-cloud--right-bottom { bottom: 25px; right: 2%; width: 160px; animation: cxFloatCloud 16s ease-in-out infinite alternate-reverse; }
@keyframes cxFloatCloud {
	0%   { transform: translate(0, 0); }
	50%  { transform: translate(12px, -8px); }
	100% { transform: translate(-8px, 6px); }
}

.cx-home .hero-paper-plane,
.cx-home .section-paper-plane {
	position: absolute;
	pointer-events: none;
	animation: cxFloatPlane 7s ease-in-out infinite;
}
.cx-home .hero-paper-plane { top: 28px; left: 42%; width: 260px; height: 140px; }
.cx-home .hero-paper-plane .plane-trail,
.cx-home .section-paper-plane .plane-trail { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.cx-home .hero-paper-plane .plane-icon,
.cx-home .section-paper-plane .plane-icon {
	position: absolute;
	top: 8px;
	right: 8px;
	transform: rotate(-10deg);
	animation: cxSwayPlane 4s ease-in-out infinite alternate;
}
@keyframes cxFloatPlane {
	0%, 100% { transform: translate(0, 0); }
	50%      { transform: translate(10px, -12px); }
}
@keyframes cxSwayPlane {
	0%   { transform: rotate(-14deg); }
	100% { transform: rotate(-4deg); }
}

.cx-home .hero-sparkle,
.cx-home .section-sparkle {
	position: absolute;
	pointer-events: none;
	animation: cxTwinkleSparkle 3.5s ease-in-out infinite;
}
.cx-home .hero-sparkle--1 { top: 10%; left: 8%; animation-delay: 0s; }
.cx-home .hero-sparkle--2 { top: 20%; left: 48%; animation-delay: 1.2s; }
.cx-home .hero-sparkle--3 { top: 76%; left: 44%; animation-delay: 2.4s; }
.cx-home .hero-sparkle--4 { top: 16%; right: 16%; animation-delay: 0.8s; }
.cx-home .hero-sparkle--5 { bottom: 22%; right: 3%; animation-delay: 1.8s; }
@keyframes cxTwinkleSparkle {
	0%, 100% { opacity: 0.60; transform: scale(0.9); }
	50%      { opacity: 1.00; transform: scale(1.2) rotate(15deg); }
}

.cx-home .hero-planet,
.cx-home .section-planet {
	position: absolute;
	pointer-events: none;
	animation: cxFloatPlanet 9s ease-in-out infinite;
}
.cx-home .hero-planet { top: 10px; right: 26%; }
@keyframes cxFloatPlanet {
	0%, 100% { transform: translateY(0) rotate(0deg); }
	50%      { transform: translateY(-8px) rotate(8deg); }
}

.cx-home .hero-doodle,
.cx-home .section-doodle {
	position: absolute;
	pointer-events: none;
	opacity: 0.75;
}
.cx-home .hero-doodle { bottom: 85px; right: 46%; }

/* ==========================================================================
   1/11 · HERO
   ========================================================================== */
.cx-home .hero {
	background: var(--cx-cream);
	padding: 72px 0 0;
	min-height: 640px;
}
.cx-home .hero::before {
	content: '';
	position: absolute;
	top: -120px;
	right: -120px;
	width: 500px;
	height: 500px;
	background: radial-gradient(circle, rgba(201,146,42,0.08) 0%, transparent 70%);
	pointer-events: none;
}
.cx-home .hero::after {
	content: '';
	position: absolute;
	bottom: -80px;
	left: -80px;
	width: 400px;
	height: 400px;
	background: radial-gradient(circle, rgba(42,181,164,0.07) 0%, transparent 70%);
	pointer-events: none;
}
.cx-home .hero__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: center;
	position: relative;
	z-index: 1;
}
.cx-home .hero__content { padding-bottom: 40px; }
.cx-home .hero__trust {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--cx-white);
	border: 1px solid var(--cx-sand-deep);
	padding: 8px 16px;
	border-radius: var(--cx-radius-pill);
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--cx-text-muted);
	margin-bottom: 24px;
	box-shadow: var(--cx-shadow-card);
}
.cx-home .hero__trust-dot {
	width: 8px;
	height: 8px;
	background: var(--cx-teal);
	border-radius: 50%;
	animation: cxPulse 2s infinite;
	flex-shrink: 0;
}
@keyframes cxPulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(42,181,164,0.4); }
	50%      { box-shadow: 0 0 0 6px rgba(42,181,164,0); }
}
.cx-home .hero__heading {
	font-family: var(--cx-font-head);
	font-size: clamp(2.2rem, 4.5vw, 3.4rem);
	font-weight: 800;
	line-height: 1.15;
	color: var(--cx-navy);
	margin-bottom: 20px;
}
.cx-home .hero__heading .accent-gold { color: var(--cx-gold); }
.cx-home .hero__heading .accent-teal { color: var(--cx-teal); }
.cx-home .hero__body {
	font-size: 1.05rem;
	color: var(--cx-text-muted);
	line-height: 1.75;
	margin-bottom: 36px;
	max-width: 480px;
}
.cx-home .hero__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.cx-home .hero__badge-row {
	display: flex;
	gap: 12px;
	margin-top: 28px;
	margin-bottom: 20px;
	flex-wrap: wrap;
}
.cx-home .hero__badge {
	display: flex;
	align-items: center;
	gap: 8px;
	background: var(--cx-white);
	border-radius: var(--cx-radius-md);
	padding: 10px 16px;
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--cx-text);
	box-shadow: var(--cx-shadow-card);
	border: 1px solid var(--cx-sand-deep);
}
.cx-home .hero__badge-icon {
	width: 28px;
	height: 28px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.9rem;
	flex-shrink: 0;
}
.cx-home .hero__badge-icon--gold { background: var(--cx-gold-pale); }
.cx-home .hero__badge-icon--teal { background: var(--cx-teal-light); }
.cx-home .hero__badge-icon--navy { background: rgba(26,43,74,0.08); }

.cx-home .hero__visual {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 540px;
}
.cx-home .hero__float-badge {
	position: absolute;
	background: var(--cx-white);
	border-radius: var(--cx-radius-md);
	padding: 10px 14px;
	box-shadow: var(--cx-shadow-float);
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.8rem;
	font-weight: 700;
	font-family: var(--cx-font-head);
	color: var(--cx-text);
	z-index: 2;
	animation: cxFloatBadge 4s ease-in-out infinite;
	white-space: nowrap;
}
.cx-home .hero__float-badge--1 { top: 48px; left: -20px; animation-delay: 0s; }
.cx-home .hero__float-badge--2 { bottom: 120px; right: -20px; animation-delay: -2s; }
.cx-home .hero__float-badge--3 { bottom: 60px; left: 20px; animation-delay: -1s; }
@keyframes cxFloatBadge {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-8px); }
}
.cx-home .badge-num { font-size: 1.1rem; font-weight: 800; color: var(--cx-gold); }
.cx-home .badge-icon { font-size: 1.2rem; }

/* El marco del hero conserva el id="spline-container" del prototipo, hoy
   inactivo. Lo que lo llena es la foto institucional, no un visor 3D. */
.cx-home .hero__img-frame {
	width: 100%;
	height: 540px;
	border-radius: 36px;
	overflow: hidden;
	position: relative;
	box-shadow: 0 24px 80px rgba(26,43,74,0.35);
	background: var(--cx-navy);
}
.cx-home .hero__school-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cx-home .hero__wave { display: block; width: 100%; line-height: 0; margin-top: -1px; overflow: hidden; }

/* ==========================================================================
   2/11 · BARRA DE CIFRAS
   ========================================================================== */
.cx-home .stats-bar {
	background: var(--cx-navy);
	padding: 36px 0;
	position: relative;
	z-index: 2;
}
.cx-home .stats-bar__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
}
.cx-home .stat-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 8px 16px;
	border-right: 1px solid rgba(255,255,255,0.10);
}
.cx-home .stat-item:last-child { border-right: none; }
.cx-home .stat-icon { font-size: 1.5rem; margin-bottom: 6px; opacity: 0.9; color: var(--cx-white); }
.cx-home .stat-icon--svg { display: inline-flex; align-items: center; justify-content: center; }
.cx-home .stat-number {
	font-family: var(--cx-font-head);
	font-size: 2.2rem;
	font-weight: 800;
	color: var(--cx-gold-light);
	line-height: 1;
	margin-bottom: 4px;
}
.cx-home .stat-label {
	font-size: 0.82rem;
	color: rgba(255,255,255,0.65);
	font-weight: 500;
	letter-spacing: 0.02em;
}

/* ==========================================================================
   3/11 · POR QUÉ ELEGIRNOS (bento grid)
   ========================================================================== */
.cx-home .why-us {
	padding: 88px 0 80px;
	background: var(--cx-cream);
}
.cx-home .why-us__header { text-align: center; margin-bottom: 52px; }
.cx-home .why-us__header .section-subtext { margin: 0 auto; }
.cx-home .bento-grid {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-template-rows: auto;
	gap: 20px;
}
.cx-home .bento-card {
	background: var(--cx-white);
	border-radius: var(--cx-radius-lg);
	padding: 32px;
	box-shadow: var(--cx-shadow-card);
	border: 1px solid rgba(26,43,74,0.05);
	transition: var(--cx-transition);
	overflow: hidden;
	position: relative;
}
.cx-home .bento-card:hover { transform: translateY(-4px); box-shadow: var(--cx-shadow-float); }
.cx-home .bento-card--wide   { grid-column: span 7; }
.cx-home .bento-card--medium { grid-column: span 5; }
.cx-home .bento-card--third  { grid-column: span 4; }
.cx-home .bento-card--navy { background: var(--cx-navy); color: var(--cx-white); }
.cx-home .bento-card--gold { background: linear-gradient(135deg, var(--cx-gold) 0%, var(--cx-gold-light) 100%); color: var(--cx-white); }
.cx-home .bento-card--teal { background: linear-gradient(135deg, var(--cx-teal) 0%, #3DCFBE 100%); color: var(--cx-white); }
.cx-home .bento-icon {
	width: 52px;
	height: 52px;
	border-radius: var(--cx-radius-md);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.5rem;
	margin-bottom: 20px;
	flex-shrink: 0;
}
.cx-home .bento-icon--gold  { background: var(--cx-gold-pale); }
.cx-home .bento-icon--teal  { background: var(--cx-teal-light); }
.cx-home .bento-icon--navy  { background: rgba(26,43,74,0.08); }
.cx-home .bento-icon--white { background: rgba(255,255,255,0.15); }
.cx-home .bento-card__title {
	font-family: var(--cx-font-head);
	font-size: 1.15rem;
	font-weight: 700;
	margin-bottom: 10px;
	color: var(--cx-navy);
}
.cx-home .bento-card--navy .bento-card__title,
.cx-home .bento-card--gold .bento-card__title,
.cx-home .bento-card--teal .bento-card__title { color: var(--cx-white); }
.cx-home .bento-card__title--lead { font-size: 1.4rem; margin-bottom: 6px; }
.cx-home .bento-card__title--sm   { font-size: 1rem; }
.cx-home .bento-card__text {
	font-size: 0.92rem;
	color: var(--cx-text-muted);
	line-height: 1.65;
}
.cx-home .bento-card--navy .bento-card__text,
.cx-home .bento-card--gold .bento-card__text,
.cx-home .bento-card--teal .bento-card__text { color: rgba(255,255,255,0.80); }
.cx-home .bento-card__text--lead { font-size: 1rem; margin-bottom: 24px; max-width: 480px; }
.cx-home .bento-big-num {
	font-family: var(--cx-font-head);
	font-size: 4rem;
	font-weight: 800;
	line-height: 1;
	color: var(--cx-white);
	margin-bottom: 8px;
}
.cx-home .bento-features {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin-top: 20px;
}
.cx-home .bento-feature {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--cx-text);
}
.cx-home .bento-feature .check { color: var(--cx-teal); font-size: 0.9rem; }
.cx-home .bento-card--navy .bento-feature { color: rgba(255,255,255,0.85); }
.cx-home .bento-card--navy .bento-feature .check { color: var(--cx-gold-light); }

/* ==========================================================================
   4/11 · GALERÍA DE INSTALACIONES
   ========================================================================== */
.cx-home .installations { padding: 80px 0; background: var(--cx-cream); }
.cx-home .installations__header {
	text-align: center;
	margin-bottom: 48px;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.cx-home .installations__grid {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 16px;
}
.cx-home .installations__card {
	position: relative;
	border-radius: 24px;
	overflow: hidden;
	box-shadow: 0 4px 20px rgba(26,43,74,0.08);
	background: var(--cx-navy);
}
.cx-home .installations__card--large { grid-row: span 2; min-height: 400px; }
.cx-home .installations__card:not(.installations__card--large) { min-height: 188px; }
.cx-home .installations__card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}
.cx-home .installations__card:hover img { transform: scale(1.04); }
.cx-home .installations__card-label {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background: linear-gradient(transparent, rgba(26,43,74,0.85));
	color: var(--cx-white);
	font-family: var(--cx-font-head);
	font-size: 0.85rem;
	font-weight: 600;
	padding: 28px 16px 14px;
}

/* ==========================================================================
   5/11 · OFERTA ACADÉMICA
   ========================================================================== */
.cx-home .programs { padding: 80px 0 0; background: var(--cx-white); }
.cx-home .programs__header { text-align: center; margin-bottom: 52px; }
.cx-home .programs__header .section-subtext { margin: 0 auto; }
.cx-home .programs__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 28px;
	margin-bottom: 0;
}
.cx-home .program-card {
	border-radius: var(--cx-radius-xl);
	overflow: hidden;
	position: relative;
	background: var(--cx-cream);
	border: 1px solid var(--cx-sand-deep);
	transition: var(--cx-transition);
}
.cx-home .program-card:hover { transform: translateY(-6px); box-shadow: var(--cx-shadow-float); }
.cx-home .program-card__image-wrapper {
	height: 220px;
	background: var(--cx-navy);
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.cx-home .program-card__image-wrapper img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}
.cx-home .program-card__label {
	position: absolute;
	top: 16px;
	left: 16px;
	background: var(--cx-white);
	border-radius: var(--cx-radius-pill);
	padding: 6px 14px;
	font-size: 0.78rem;
	font-weight: 700;
	font-family: var(--cx-font-head);
	color: var(--cx-navy);
	box-shadow: var(--cx-shadow-card);
	z-index: 1;
}
.cx-home .program-card__body { padding: 28px 32px 32px; }
.cx-home .program-card__title {
	font-family: var(--cx-font-head);
	font-size: 1.5rem;
	font-weight: 800;
	color: var(--cx-navy);
	margin-bottom: 10px;
	display: flex;
	align-items: center;
	gap: 10px;
}
.cx-home .program-card__title-icon {
	width: 36px;
	height: 36px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.1rem;
	flex-shrink: 0;
}
.cx-home .program-card--preschool .program-card__title-icon { background: #FFF3D4; }
.cx-home .program-card--primary .program-card__title-icon   { background: var(--cx-teal-light); }
.cx-home .program-card__sub {
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--cx-gold);
	font-family: var(--cx-font-head);
	margin-bottom: 14px;
	letter-spacing: 0.02em;
}
.cx-home .program-card--primary .program-card__sub { color: var(--cx-teal); }
.cx-home .program-card__desc {
	font-size: 0.95rem;
	color: var(--cx-text-muted);
	line-height: 1.65;
	margin-bottom: 24px;
}
.cx-home .program-card__features {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 28px;
}
.cx-home .program-card__feature {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.87rem;
	color: var(--cx-text);
	font-weight: 500;
}
.cx-home .program-card__feature-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	flex-shrink: 0;
}
.cx-home .program-card--preschool .program-card__feature-dot { background: var(--cx-gold); }
.cx-home .program-card--primary .program-card__feature-dot   { background: var(--cx-teal); }
.cx-home .program-card--preschool .btn { background: var(--cx-gold); color: var(--cx-white); }
.cx-home .program-card--preschool .btn:hover { background: var(--cx-gold-light); }
.cx-home .program-card--primary .btn { background: var(--cx-teal); color: var(--cx-white); }
.cx-home .program-card--primary .btn:hover { background: #24A394; }
.cx-home .programs__wave { display: block; width: 100%; line-height: 0; margin-top: 72px; }

/* ==========================================================================
   6/11 · ACTIVIDADES ESCOLARES (contenido estático, decisión 4 del cliente)
   ========================================================================== */
.cx-home .activities { background: var(--cx-navy); padding: 80px 0; }
.cx-home .activities__header { text-align: center; margin-bottom: 52px; }
.cx-home .activities-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
.cx-home .activity-card {
	background: rgba(255,255,255,0.06);
	border: 1px solid rgba(255,255,255,0.10);
	border-radius: var(--cx-radius-lg);
	overflow: hidden;
	transition: var(--cx-transition);
	backdrop-filter: blur(4px);
}
.cx-home .activity-card:hover {
	background: rgba(255,255,255,0.10);
	transform: translateY(-4px);
	border-color: rgba(255,255,255,0.20);
}
.cx-home .activity-card__img {
	height: 180px;
	background: var(--cx-navy-mid);
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	overflow: hidden;
}
.cx-home .activity-card__img img {
	width: 100%;
	height: 220px;
	object-fit: cover;
	display: block;
}
.cx-home .activity-card__tag {
	position: absolute;
	top: 12px;
	left: 12px;
	background: var(--cx-gold);
	color: var(--cx-white);
	font-size: 0.72rem;
	font-weight: 700;
	font-family: var(--cx-font-head);
	padding: 4px 10px;
	border-radius: var(--cx-radius-pill);
	letter-spacing: 0.03em;
	text-transform: uppercase;
	z-index: 1;
}
.cx-home .activity-card__body { padding: 24px; }
.cx-home .activity-card__title {
	font-family: var(--cx-font-head);
	font-size: 1rem;
	font-weight: 700;
	color: var(--cx-white);
	margin-bottom: 8px;
	line-height: 1.4;
}
.cx-home .activity-card__excerpt {
	font-size: 0.88rem;
	color: rgba(255,255,255,0.60);
	line-height: 1.6;
	margin-bottom: 16px;
}
.cx-home .activity-card__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.85rem;
	font-weight: 700;
	font-family: var(--cx-font-head);
	color: var(--cx-gold-light);
	transition: var(--cx-transition);
}
.cx-home .activity-card__link:hover { color: var(--cx-white); gap: 10px; }
.cx-home .activities__all { text-align: center; margin-top: 40px; }
.cx-home .activities__wave-bottom {
	display: block;
	width: 100%;
	line-height: 0;
	overflow: hidden;
	margin-top: 64px;
	margin-bottom: -2px;
}

/* ==========================================================================
   7/11 · MENSAJE DE LA DIRECCIÓN
   ========================================================================== */
.cx-home .director { padding: 80px 0; background: var(--cx-cream); }
.cx-home .director__inner {
	display: grid;
	grid-template-columns: 1fr 1.6fr;
	gap: 64px;
	align-items: center;
}
.cx-home .director__portrait-wrapper {
	position: relative;
	display: flex;
	justify-content: center;
}
.cx-home .director__portrait {
	width: 280px;
	height: 340px;
	border-radius: var(--cx-radius-xl);
	background: linear-gradient(135deg, var(--cx-sand-deep), var(--cx-sand));
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 5rem;
	position: relative;
	overflow: hidden;
	box-shadow: var(--cx-shadow-float);
}
.cx-home .director__portrait--photo { background: transparent; padding: 0; }
.cx-home .director__portrait img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: inherit;
}
.cx-home .director__portrait::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, transparent 60%, rgba(26,43,74,0.15));
}
.cx-home .director__portrait-badge {
	position: absolute;
	bottom: -16px;
	right: -16px;
	background: var(--cx-gold);
	color: var(--cx-white);
	border-radius: var(--cx-radius-md);
	padding: 12px 20px;
	font-family: var(--cx-font-head);
	font-size: 0.78rem;
	font-weight: 700;
	text-align: center;
	box-shadow: 0 8px 24px rgba(201,146,42,0.35);
	line-height: 1.3;
	z-index: 1;
}
.cx-home .director__portrait-deco {
	position: absolute;
	top: -16px;
	left: -16px;
	width: 60px;
	height: 60px;
	background: var(--cx-teal-light);
	border-radius: var(--cx-radius-md);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.5rem;
	box-shadow: var(--cx-shadow-card);
	z-index: 1;
}
.cx-home .director__quote-mark {
	font-size: 6rem;
	font-family: Georgia, serif;
	color: var(--cx-gold);
	line-height: 0.8;
	margin-bottom: 16px;
	opacity: 0.3;
}
.cx-home .director__quote {
	font-family: var(--cx-font-head);
	font-size: 1.3rem;
	font-weight: 600;
	color: var(--cx-navy);
	line-height: 1.65;
	font-style: italic;
	margin-bottom: 28px;
	border-left: 4px solid var(--cx-gold);
	padding-left: 24px;
}
.cx-home .director__sig {
	font-family: var(--cx-font-head);
	font-size: 0.92rem;
	font-weight: 700;
	color: var(--cx-gold);
	display: flex;
	align-items: center;
	gap: 8px;
}
.cx-home .director__sig::before { content: '—'; color: var(--cx-text-muted); font-weight: 400; }
.cx-home .director__cta { margin-top: 32px; }

/* ==========================================================================
   8/11 · SEO LOCAL — comunidades servidas y precios
   Aquí vivía el JS en atributos del prototipo (onmouseover, onmouseout sobre
   las tres tarjetas y sobre un botón). Ahora es :hover, como el resto del tema.
   ========================================================================== */
.cx-home .local-seo-section {
	padding: 88px 0;
	background: var(--cx-white);
	position: relative;
}
.cx-home .local-seo__header { text-align: center; margin-bottom: 52px; }
.cx-home .local-seo__header .section-subtext { max-width: 780px; margin: 0 auto; }
.cx-home .local-seo__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 24px;
	margin-top: 40px;
}
.cx-home .local-seo__card {
	background: var(--cx-cream);
	border: 1px solid var(--cx-sand-deep);
	border-radius: var(--cx-radius-lg);
	padding: 32px;
	transition: var(--cx-transition);
	box-shadow: var(--cx-shadow-card);
}
.cx-home .local-seo__card:hover {
	transform: translateY(-4px);
	box-shadow: var(--cx-shadow-float);
}
.cx-home .local-seo__card-icon { font-size: 2.2rem; margin-bottom: 16px; }
.cx-home .local-seo__card-title {
	font-family: var(--cx-font-head);
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--cx-navy);
	margin-bottom: 12px;
}
.cx-home .local-seo__card-text {
	font-size: 0.92rem;
	color: var(--cx-text-muted);
	line-height: 1.6;
}
.cx-home .local-seo__callout {
	margin-top: 48px;
	background: var(--cx-navy);
	color: var(--cx-white);
	border-radius: var(--cx-radius-xl);
	padding: 40px;
	text-align: center;
	position: relative;
	overflow: hidden;
	box-shadow: var(--cx-shadow-soft);
}
.cx-home .local-seo__callout-deco {
	position: absolute;
	top: -50px;
	right: -50px;
	font-size: 8rem;
	opacity: 0.05;
	pointer-events: none;
	user-select: none;
}
.cx-home .local-seo__callout-title {
	font-family: var(--cx-font-head);
	font-size: 1.3rem;
	font-weight: 700;
	margin-bottom: 12px;
	color: var(--cx-white);
}
.cx-home .local-seo__callout-text {
	max-width: 680px;
	margin: 0 auto 24px;
	font-size: 0.95rem;
	color: rgba(255,255,255,0.85);
	line-height: 1.6;
}

.cx-home .pricing {
	margin-top: 40px;
	background: var(--cx-cream);
	border: 1px solid var(--cx-sand-deep);
	border-radius: var(--cx-radius-xl);
	padding: 44px 32px;
	text-align: center;
	box-shadow: var(--cx-shadow-card);
}
.cx-home .pricing__badge {
	display: inline-block;
	background: rgba(42,181,164,0.1);
	color: var(--cx-teal);
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 4px 12px;
	border-radius: var(--cx-radius-pill);
	margin-bottom: 12px;
}
.cx-home .pricing__title {
	font-family: var(--cx-font-head);
	font-size: 1.45rem;
	font-weight: 800;
	color: var(--cx-navy);
	margin-bottom: 8px;
}
.cx-home .pricing__text {
	max-width: 640px;
	margin: 0 auto 28px;
	font-size: 0.92rem;
	color: var(--cx-text-muted);
	line-height: 1.6;
}
.cx-home .pricing__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 20px;
	max-width: 720px;
	margin: 0 auto 32px;
}
.cx-home .price-card {
	background: var(--cx-white);
	border: 1px solid var(--cx-sand-deep);
	border-radius: var(--cx-radius-lg);
	padding: 20px;
	text-align: center;
	box-shadow: 0 4px 12px rgba(0,0,0,0.01);
	position: relative;
}
.cx-home .price-card--flex { border: 2px solid var(--cx-gold); }
.cx-home .price-card__flag {
	position: absolute;
	top: -10px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--cx-gold);
	color: var(--cx-navy);
	font-size: 0.58rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 2px 8px;
	border-radius: var(--cx-radius-pill);
	white-space: nowrap;
}
.cx-home .price-card__label {
	font-size: 0.75rem;
	color: var(--cx-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	display: block;
	margin-bottom: 8px;
}
.cx-home .price-card--flex .price-card__label { margin-top: 4px; }
.cx-home .price-card__amount {
	font-family: var(--cx-font-head);
	font-size: 2rem;
	font-weight: 800;
	color: var(--cx-navy);
	display: block;
	line-height: 1;
}
.cx-home .price-card__note {
	font-size: 0.75rem;
	color: var(--cx-text-muted);
	display: block;
	margin-top: 4px;
}
.cx-home .pricing__cta { justify-content: center; max-width: 280px; margin: 0 auto; }

/* ==========================================================================
   9/11 · TESTIMONIOS
   ========================================================================== */
.cx-home .testimonials { padding: 80px 0; background: var(--cx-white); }
.cx-home .testimonials__header { text-align: center; margin-bottom: 52px; }
.cx-home .testimonials-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
.cx-home .testimonial-card {
	background: var(--cx-cream);
	border: 1px solid var(--cx-sand-deep);
	border-radius: var(--cx-radius-lg);
	padding: 32px;
	position: relative;
	transition: var(--cx-transition);
}
.cx-home .testimonial-card:hover { transform: translateY(-4px); box-shadow: var(--cx-shadow-float); }
.cx-home .testimonial-card--featured { background: var(--cx-navy); border-color: transparent; }
.cx-home .testimonial-card__stars {
	color: var(--cx-gold);
	font-size: 0.9rem;
	letter-spacing: 2px;
	margin-bottom: 16px;
}
.cx-home .testimonial-card__text {
	font-size: 0.95rem;
	color: var(--cx-text-muted);
	line-height: 1.7;
	margin-bottom: 24px;
	font-style: italic;
}
.cx-home .testimonial-card--featured .testimonial-card__text { color: rgba(255,255,255,0.80); }
.cx-home .testimonial-card__author { display: flex; align-items: center; gap: 12px; }
.cx-home .testimonial-card__avatar {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.2rem;
	font-weight: 700;
	font-family: var(--cx-font-head);
	flex-shrink: 0;
}
.cx-home .avatar--gold { background: var(--cx-gold-pale); color: var(--cx-gold); }
.cx-home .avatar--teal { background: var(--cx-teal-light); color: var(--cx-teal); }
.cx-home .avatar--navy { background: rgba(26,43,74,0.10); color: var(--cx-navy); }
.cx-home .testimonial-card--featured .testimonial-card__avatar { background: rgba(255,255,255,0.15); color: var(--cx-white); }
.cx-home .testimonial-card__name {
	font-family: var(--cx-font-head);
	font-size: 0.9rem;
	font-weight: 700;
	color: var(--cx-text);
}
.cx-home .testimonial-card--featured .testimonial-card__name { color: var(--cx-white); }
.cx-home .testimonial-card__role { font-size: 0.78rem; color: var(--cx-text-muted); }
.cx-home .testimonial-card--featured .testimonial-card__role { color: rgba(255,255,255,0.55); }
.cx-home .testimonial-card__badge {
	position: absolute;
	top: -14px;
	right: 24px;
	background: var(--cx-gold);
	color: var(--cx-white);
	font-size: 0.72rem;
	font-weight: 700;
	font-family: var(--cx-font-head);
	padding: 4px 12px;
	border-radius: var(--cx-radius-pill);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	box-shadow: 0 4px 12px rgba(201,146,42,0.35);
}

/* ==========================================================================
   10/11 · BANDA DE CTA DE MATRÍCULA
   ========================================================================== */
.cx-home .cta-band {
	background: linear-gradient(135deg, var(--cx-navy-deep) 0%, var(--cx-navy) 50%, #2A4070 100%);
	padding: 80px 0;
}
.cx-home .cta-band::before {
	content: '';
	position: absolute;
	top: -100px;
	right: -100px;
	width: 400px;
	height: 400px;
	background: radial-gradient(circle, rgba(201,146,42,0.12) 0%, transparent 60%);
	pointer-events: none;
}
.cx-home .cta-band::after {
	content: '';
	position: absolute;
	bottom: -80px;
	left: -80px;
	width: 300px;
	height: 300px;
	background: radial-gradient(circle, rgba(42,181,164,0.10) 0%, transparent 60%);
	pointer-events: none;
}
.cx-home .cta-band__inner { text-align: center; position: relative; z-index: 1; }
.cx-home .cta-band__inner .eyebrow { margin-bottom: 24px; }
.cx-home .cta-band__heading {
	font-family: var(--cx-font-head);
	font-size: clamp(1.8rem, 3vw, 2.6rem);
	font-weight: 800;
	color: var(--cx-white);
	margin-bottom: 16px;
	line-height: 1.25;
}
.cx-home .cta-band__sub {
	font-size: 1.05rem;
	color: rgba(255,255,255,0.70);
	margin-bottom: 40px;
	max-width: 520px;
	margin-left: auto;
	margin-right: auto;
	line-height: 1.65;
}
.cx-home .cta-band__actions {
	display: flex;
	gap: 16px;
	justify-content: center;
	flex-wrap: wrap;
	margin-bottom: 48px;
}
.cx-home .cta-band__actions .btn { font-size: 1rem; padding: 16px 32px; }
.cx-home .cta-band__trust {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 28px;
	flex-wrap: wrap;
}
.cx-home .cta-trust-item {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.85rem;
	color: rgba(255,255,255,0.60);
	font-weight: 500;
}
.cx-home .cta-trust-item svg { opacity: 0.5; flex-shrink: 0; }

/* ==========================================================================
   11/11 · PREGUNTAS FRECUENTES (acordeón)
   ========================================================================== */
.cx-home .faq { padding: 80px 0; background: var(--cx-white); }
.cx-home .faq__header {
	text-align: center;
	margin-bottom: 48px;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.cx-home .faq__list {
	max-width: 760px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.cx-home .faq__item {
	background: var(--cx-cream);
	border: 1px solid var(--cx-sand-deep);
	border-radius: var(--cx-radius-md);
	overflow: hidden;
	transition: box-shadow 0.3s ease;
}
.cx-home .faq__item:hover { box-shadow: 0 4px 20px rgba(26,43,74,0.08); }
.cx-home .faq__question {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 24px;
	font-family: var(--cx-font-head);
	font-size: 1rem;
	font-weight: 600;
	color: var(--cx-navy);
	text-align: left;
	cursor: pointer;
	gap: 16px;
	background: transparent;
	border: none;
	transition: background 0.3s ease;
}
.cx-home .faq__question:hover { background: var(--cx-sand); }
.cx-home .faq__question[aria-expanded="true"] { background: var(--cx-navy); color: var(--cx-white); }
.cx-home .faq__question[aria-expanded="true"] .faq__icon { transform: rotate(180deg); stroke: var(--cx-white); }
.cx-home .faq__icon { flex-shrink: 0; transition: transform 0.3s ease; stroke: var(--cx-navy); }
.cx-home .faq__answer {
	padding: 0 24px 20px;
	font-size: 0.97rem;
	line-height: 1.7;
	color: var(--cx-text-muted);
}
.cx-home .faq__answer[hidden] { display: none; }
.cx-home .faq__answer p { margin-bottom: 12px; }
.cx-home .faq__answer p:last-child { margin-bottom: 0; }
.cx-home .faq__answer ul { list-style: disc; padding-left: 20px; margin-bottom: 12px; }
.cx-home .faq__answer ul li { margin-bottom: 4px; }
.cx-home .faq__answer a { color: var(--cx-teal); text-decoration: underline; text-underline-offset: 2px; }
.cx-home .faq__more { text-align: center; margin-top: 48px; }
.cx-home .faq__more-text { color: var(--cx-text-muted); margin-bottom: 20px; }

/* ==========================================================================
   RESPONSIVE — mismos cortes que el prototipo (991 / 860 / 780 / 768 / 600 /
   480 / 1200)
   ========================================================================== */
@media (max-width: 1199px) {
	.cx-home .hero__heading { font-size: clamp(2.2rem, 4.5vw, 3.4rem); }
}
@media (min-width: 1200px) {
	.cx-home .hero__heading { font-size: 3.4rem; }
}

@media (max-width: 991px) {
	.cx-home .hero__grid { grid-template-columns: 1fr; }
	.cx-home .hero__visual { order: 2; }

	.cx-home .hero-paper-plane,
	.cx-home .section-paper-plane,
	.cx-home .hero-planet,
	.cx-home .section-planet,
	.cx-home .hero-doodle,
	.cx-home .section-doodle,
	.cx-home .hero-cloud--2,
	.cx-home .section-cloud--right-top,
	.cx-home .section-cloud--right-bottom { display: none; }
	.cx-home .hero-cloud--1,
	.cx-home .section-cloud--left-top { width: 110px; top: 10px; }
}

@media (max-width: 860px) {
	.cx-home .hero__grid { grid-template-columns: 1fr; gap: 32px; }
	.cx-home .hero__visual { order: 1; min-height: 380px; }
	.cx-home .hero__float-badge--1,
	.cx-home .hero__float-badge--2,
	.cx-home .hero__float-badge--3 { display: none; }
	.cx-home .hero__content { padding-bottom: 0; text-align: center; order: 0; }
	.cx-home .hero__body { margin: 0 auto 36px; }
	.cx-home .hero__actions { justify-content: center; }
	.cx-home .hero__badge-row { justify-content: center; }
	.cx-home .hero__trust { display: inline-flex; }

	.cx-home .director__inner { grid-template-columns: 1fr; gap: 40px; }
	.cx-home .director__portrait-wrapper { order: -1; }
	.cx-home .director__portrait { width: 240px; height: 280px; margin: 0 auto; }

	.cx-home .bento-card--wide,
	.cx-home .bento-card--medium { grid-column: span 12; }
	.cx-home .bento-card--third { grid-column: span 6; }
}

@media (max-width: 780px) {
	.cx-home .programs__grid { grid-template-columns: 1fr; }

	.cx-home .stats-bar__grid { grid-template-columns: repeat(2, 1fr); gap: 16px 0; }
	.cx-home .stat-item:nth-child(2) { border-right: none; }
	.cx-home .stat-item:nth-child(3) { border-top: 1px solid rgba(255,255,255,0.10); }
	.cx-home .stat-item:nth-child(4) { border-top: 1px solid rgba(255,255,255,0.10); }

	.cx-home .activities-grid { grid-template-columns: 1fr; }
	.cx-home .testimonials-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
	.cx-home .hero__img-frame { height: 280px; border-radius: 20px; }

	.cx-home .installations__grid { grid-template-columns: 1fr 1fr; }
	.cx-home .installations__card--large { grid-column: 1 / -1; grid-row: auto; min-height: 220px; }
	.cx-home .installations__card:not(.installations__card--large) { min-height: 160px; }

	.cx-home .hero-cloud,
	.cx-home .section-cloud { display: none; }
	.cx-home .hero-sparkle--2,
	.cx-home .hero-sparkle--3 { display: none; }
	.cx-home .section-sparkle { opacity: 0.4; }
}

@media (max-width: 600px) {
	.cx-home .hero { padding: 48px 0 0; }
	.cx-home .hero__heading { font-size: 2rem; }
	.cx-home .hero__actions { flex-direction: column; width: 100%; }
	.cx-home .hero__actions .btn { width: 100%; justify-content: center; }
	.cx-home .hero__badge-row { flex-direction: column; }

	.cx-home .bento-card--third { grid-column: span 12; }
	.cx-home .bento-features { grid-template-columns: 1fr; }

	.cx-home .stats-bar__grid { grid-template-columns: 1fr 1fr; }

	.cx-home .cta-band__actions { flex-direction: column; align-items: center; }
	.cx-home .cta-band__actions .btn { width: 100%; max-width: 320px; justify-content: center; }

	.cx-home .local-seo__callout { padding: 32px 20px; }
	.cx-home .pricing { padding: 36px 20px; }
}

@media (max-width: 480px) {
	.cx-home .installations__grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
	.cx-home .hero-cloud,
	.cx-home .section-cloud,
	.cx-home .hero-paper-plane,
	.cx-home .section-paper-plane,
	.cx-home .hero-sparkle,
	.cx-home .section-sparkle,
	.cx-home .hero-planet,
	.cx-home .section-planet,
	.cx-home .hero__trust-dot,
	.cx-home .hero__float-badge { animation: none !important; }
}

/* ==========================================================================
   RE-SKIN PREESCOLAR — feature 72 (tanda 2, 27 ago 2026,
   `web-reskin-preescolar`), Etapa 3a de la Opción A del informe de
   integración (diseño "Antigravity"). Continúa los bloques de las features
   70 y 71 que hay justo encima.

   Todo lo de aquí abajo viene de PORTAR (leer, nunca editar ni desplegar)
   C:\Users\dmedi\Claude Code\craftsman-web\preescolar\index.html, el bloque
   <style> en línea de ese archivo (líneas 98-656).

   TODO VA BAJO EL ÁMBITO `.cx-preescolar`, A PROPÓSITO, mismo razonamiento
   que el ámbito `.cx-home` de la feature 71 (docblock un poco más arriba en
   este mismo archivo): el marcado de referencia reutiliza nombres de clase
   que este tema ya tiene con otro valor y con otros consumidores —
   `.eyebrow`, `.btn`, `.btn--outline`, `.container` — y sin ámbito, portar
   esas reglas habría cambiado en silencio las 6 páginas públicas que ya
   comparten esas clases (más las 2 que ya usan `.cx-home`). `page-preescolar
   .php` pone la clase `cx-preescolar` en su `<main>`.

   Los tokens siguen siendo los `--cx-*` que ya existen (definidos arriba, en
   el bloque de la feature 70): esta feature no crea ni un prefijo nuevo ni
   pisa `--font-body`, `--radius-md`, `--radius-lg` ni `--shadow-soft`.

   `.reveal`/`.reveal-delay-N` y el acordeón de FAQ (`[aria-expanded]` +
   `[hidden]`) reutilizan exactamente el mismo mecanismo de JS que ya
   construyó la feature 71 en theme/assets/js/main.js — no se reimplementa
   nada de JS aquí, sólo se repite el patrón de estilos bajo el nuevo ámbito.

   AVISO PARA QUIEN EDITE ESTE ARCHIVO: no escribas nunca la notación de barra
   y asterisco entre dos nombres de clase dentro de un comentario — esa
   secuencia CIERRA el comentario a mitad de frase y mata en silencio las
   reglas siguientes, sin que `php -l` ni `init.sh` lo detecten (es CSS, no
   PHP). Pasó dos veces en la feature 70. Separa los nombres con comas y
   comprueba el balance de aperturas contra cierres sobre el archivo entero
   antes de dar nada por bueno.
   ========================================================================== */

/* ---- Reset local: mismo patrón que .cx-home ---- */
.cx-preescolar h1,
.cx-preescolar h2,
.cx-preescolar h3,
.cx-preescolar p,
.cx-preescolar ul {
	margin: 0;
	padding: 0;
}
.cx-preescolar {
	font-family: var(--cx-font-body);
	color: var(--cx-text);
}
.cx-preescolar button {
	cursor: pointer;
	border: none;
	background: none;
	font-family: inherit;
}

/* ---- Utilidades reutilizadas del ámbito .cx-home, repetidas bajo este
   ámbito propio (mismos valores, cero colisión posible: los selectores de
   los dos bloques no comparten ancestro) ---- */
.cx-preescolar .eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--cx-gold-pale);
	color: var(--cx-gold);
	font-family: var(--cx-font-head);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 6px 14px;
	border-radius: var(--cx-radius-pill);
	margin-bottom: 16px;
}
.cx-preescolar .eyebrow--navy { background: rgba(255,255,255,0.15); color: var(--cx-white); }

.cx-preescolar .btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 14px 28px;
	border-radius: var(--cx-radius-pill);
	font-family: var(--cx-font-head);
	font-size: 0.95rem;
	font-weight: 700;
	transition: var(--cx-transition);
	white-space: nowrap;
}
.cx-preescolar .btn svg { flex-shrink: 0; }
.cx-preescolar .btn--primary {
	background: var(--cx-gold);
	color: var(--cx-white);
	border: none;
	box-shadow: 0 4px 20px rgba(201, 146, 42, 0.35);
}
.cx-preescolar .btn--primary:hover {
	background: var(--cx-gold-light);
	color: var(--cx-white);
	box-shadow: 0 8px 30px rgba(201, 146, 42, 0.50);
	transform: translateY(-2px);
}
.cx-preescolar .btn--outline {
	border: 2px solid var(--cx-navy);
	color: var(--cx-navy);
	background: transparent;
}
.cx-preescolar .btn--outline:hover {
	background: var(--cx-navy);
	color: var(--cx-white);
	transform: translateY(-2px);
}
.cx-preescolar .btn--outline-white {
	border: 2px solid rgba(255,255,255,0.6);
	color: var(--cx-white);
	background: transparent;
}
.cx-preescolar .btn--outline-white:hover {
	background: rgba(255,255,255,0.15);
	border-color: var(--cx-white);
	color: var(--cx-white);
	transform: translateY(-2px);
}

/* ---- Scroll-reveal: mismo patrón que .cx-home, mismo JS ---- */
.cx-preescolar .reveal {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
	            transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.cx-preescolar .reveal.visible { opacity: 1; transform: translateY(0); }
.cx-preescolar .reveal-delay-1 { transition-delay: 0.1s; }
.cx-preescolar .reveal-delay-2 { transition-delay: 0.2s; }
.cx-preescolar .reveal-delay-3 { transition-delay: 0.3s; }
.cx-preescolar .reveal-delay-4 { transition-delay: 0.4s; }

@media (prefers-reduced-motion: reduce) {
	.cx-preescolar .reveal { opacity: 1; transform: none; transition: none; }
	.cx-preescolar .page-dec { animation: none !important; }
}
html:not(.js-loaded) .cx-preescolar .reveal { opacity: 1; transform: none; }

/* ==========================================================================
   PAGE-HERO PREESCOLAR
   ========================================================================== */
.cx-preescolar .page-hero {
	background: linear-gradient(135deg, var(--cx-navy) 0%, #1e3a5f 60%, #0f2d4a 100%);
	padding: 80px 0 60px;
	position: relative;
	overflow: hidden;
}
.cx-preescolar .page-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at 70% 40%, rgba(201,146,42,0.12) 0%, transparent 60%),
	            radial-gradient(ellipse at 20% 80%, rgba(42,181,164,0.08) 0%, transparent 50%);
	pointer-events: none;
}
.cx-preescolar .page-hero__decorations {
	position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 1;
}
.cx-preescolar .page-hero .container { position: relative; z-index: 2; }
.cx-preescolar .page-hero__inner {
	display: grid;
	grid-template-columns: 1fr 420px;
	gap: 48px;
	align-items: center;
}
.cx-preescolar .page-hero__breadcrumb {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.8rem;
	color: rgba(255,255,255,0.55);
	margin-bottom: 20px;
	font-family: var(--cx-font-head);
}
.cx-preescolar .page-hero__breadcrumb a { color: rgba(255,255,255,0.55); }
.cx-preescolar .page-hero__breadcrumb a:hover { color: var(--cx-gold-light); }
.cx-preescolar .page-hero__breadcrumb span { color: rgba(255,255,255,0.35); }
.cx-preescolar .page-hero__h1 {
	font-family: var(--cx-font-head);
	font-size: clamp(2rem, 4vw, 3.2rem);
	font-weight: 800;
	color: var(--cx-white);
	line-height: 1.15;
	margin-bottom: 20px;
}
.cx-preescolar .page-hero__h1 .accent-gold { color: var(--cx-gold-light); }
.cx-preescolar .page-hero__h1 .accent-teal { color: var(--cx-teal); }
.cx-preescolar .page-hero__sub {
	font-size: 1.05rem;
	color: rgba(255,255,255,0.78);
	line-height: 1.7;
	max-width: 500px;
	margin-bottom: 32px;
}
.cx-preescolar .page-hero__actions { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.cx-preescolar .page-hero__stats {
	display: flex;
	gap: 24px;
	flex-wrap: wrap;
	margin-top: 36px;
	padding-top: 28px;
	border-top: 1px solid rgba(255,255,255,0.12);
}
.cx-preescolar .page-hero__stat-num {
	font-family: var(--cx-font-head);
	font-size: 1.7rem;
	font-weight: 800;
	color: var(--cx-gold-light);
	line-height: 1;
}
.cx-preescolar .page-hero__stat-label {
	font-size: 0.8rem;
	color: rgba(255,255,255,0.6);
	margin-top: 3px;
}

.cx-preescolar .page-hero__photo-card {
	position: relative;
	border-radius: 24px;
	overflow: hidden;
	box-shadow: 0 24px 60px rgba(0,0,0,0.35), 0 0 0 4px rgba(255,255,255,0.08);
}
.cx-preescolar .page-hero__photo-card img {
	width: 100%;
	height: 420px;
	object-fit: cover;
	object-position: center top;
	display: block;
}
.cx-preescolar .page-hero__photo-badge {
	position: absolute;
	bottom: 20px;
	left: 20px;
	background: rgba(26,43,74,0.85);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255,255,255,0.15);
	border-radius: 14px;
	padding: 12px 16px;
	display: flex;
	align-items: center;
	gap: 10px;
}
.cx-preescolar .page-hero__photo-badge-icon {
	width: 36px; height: 36px;
	background: var(--cx-gold);
	border-radius: 10px;
	display: flex; align-items: center; justify-content: center;
	font-size: 1.1rem;
	flex-shrink: 0;
}
.cx-preescolar .page-hero__photo-badge-text { line-height: 1.3; }
.cx-preescolar .page-hero__photo-badge-main {
	font-family: var(--cx-font-head);
	font-weight: 700;
	font-size: 0.9rem;
	color: var(--cx-white);
	display: block;
}
.cx-preescolar .page-hero__photo-badge-sub {
	font-size: 0.75rem;
	color: rgba(255,255,255,0.6);
}

/* ---- Decoraciones del hero (nubes, estrellas, avioncito de papel).
   Decisión visual de Codex: se portan íntegras, no se recortan. ---- */
.cx-preescolar .page-dec {
	position: absolute;
	pointer-events: none;
	z-index: 0;
}
@keyframes floatDec {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-10px); }
}
@keyframes twinkleDec {
	0%, 100% { opacity: 0.4; transform: scale(0.9); }
	50% { opacity: 1; transform: scale(1.15) rotate(12deg); }
}

/* ==========================================================================
   PROGRAM SECTION / SECTION TAG / SECTION HEADER (utilidades compartidas por
   el resto de las secciones de esta página)
   ========================================================================== */
.cx-preescolar .program-section { padding: 80px 0; }
.cx-preescolar .program-section--sand { background: var(--cx-sand); }
.cx-preescolar .program-section--cream { background: var(--cx-cream); }
.cx-preescolar .program-section--white { background: var(--cx-white); }

.cx-preescolar .section-tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--cx-font-head);
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	padding: 5px 14px;
	border-radius: var(--cx-radius-pill);
	margin-bottom: 14px;
}
.cx-preescolar .section-tag--gold { background: var(--cx-gold-pale); color: var(--cx-gold); }
.cx-preescolar .section-tag--teal { background: var(--cx-teal-light); color: var(--cx-teal); }

.cx-preescolar .section-header {
	text-align: center;
	max-width: 580px;
	margin: 0 auto 20px;
}
.cx-preescolar .section-heading {
	font-family: var(--cx-font-head);
	font-size: clamp(1.9rem, 3.5vw, 2.8rem);
	font-weight: 800;
	line-height: 1.2;
	color: var(--cx-navy);
	margin-bottom: 16px;
}
.cx-preescolar .section-subtext {
	font-size: 1.05rem;
	color: var(--cx-text-muted);
	line-height: 1.7;
	max-width: 560px;
	margin: 0 auto;
}

/* ==========================================================================
   INTRO SPLIT (propuesta + un día típico)
   ========================================================================== */
.cx-preescolar .intro-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	align-items: center;
}
.cx-preescolar .intro-split--reverse .intro-split__img { order: -1; }
.cx-preescolar .intro-split__heading {
	font-family: var(--cx-font-head);
	font-size: clamp(1.6rem, 3vw, 2.3rem);
	font-weight: 800;
	color: var(--cx-navy);
	line-height: 1.2;
	margin-bottom: 16px;
}
.cx-preescolar .intro-split__heading .gold { color: var(--cx-gold); }
.cx-preescolar .intro-split__heading .teal { color: var(--cx-teal); }
.cx-preescolar .intro-split__subheading {
	font-family: var(--cx-font-head);
	font-size: 1rem;
	font-weight: 600;
	color: var(--cx-teal);
	margin-bottom: 14px;
}
.cx-preescolar .intro-split__body {
	font-size: 1rem;
	color: var(--cx-text-muted);
	line-height: 1.75;
	margin-bottom: 24px;
}
.cx-preescolar .intro-split__list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 28px;
}
.cx-preescolar .intro-split__list-item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: 0.95rem;
	color: var(--cx-text);
	line-height: 1.5;
}
.cx-preescolar .intro-split__list-item-icon {
	width: 24px; height: 24px;
	background: var(--cx-teal-light);
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	flex-shrink: 0;
	margin-top: 1px;
}
.cx-preescolar .intro-split__img-frame {
	border-radius: 20px;
	overflow: hidden;
	box-shadow: var(--cx-shadow-float);
	position: relative;
}
.cx-preescolar .intro-split__img-frame img {
	width: 100%; height: 380px;
	object-fit: cover; display: block;
}
.cx-preescolar .intro-split__img-badge {
	position: absolute;
	top: 20px; right: 20px;
	background: var(--cx-gold);
	color: var(--cx-white);
	font-family: var(--cx-font-head);
	font-weight: 700;
	font-size: 0.78rem;
	padding: 8px 14px;
	border-radius: var(--cx-radius-pill);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* ==========================================================================
   FEATURES ROW (pilares)
   ========================================================================== */
.cx-preescolar .features-row {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	margin-top: 40px;
}
.cx-preescolar .feature-card {
	background: var(--cx-white);
	border-radius: var(--cx-radius-md);
	padding: 28px 22px;
	text-align: center;
	box-shadow: var(--cx-shadow-card);
	transition: transform var(--cx-transition);
	border-top: 3px solid transparent;
}
.cx-preescolar .feature-card:hover { transform: translateY(-4px); }
.cx-preescolar .feature-card--gold { border-top-color: var(--cx-gold); }
.cx-preescolar .feature-card--teal { border-top-color: var(--cx-teal); }
.cx-preescolar .feature-card__icon {
	font-size: 2rem;
	margin-bottom: 12px;
}
.cx-preescolar .feature-card__title {
	font-family: var(--cx-font-head);
	font-weight: 700;
	font-size: 1rem;
	color: var(--cx-navy);
	margin-bottom: 8px;
}
.cx-preescolar .feature-card__desc {
	font-size: 0.85rem;
	color: var(--cx-text-muted);
	line-height: 1.55;
}

/* ==========================================================================
   LEVELS GRID (Prekínder / Kínder)
   ========================================================================== */
.cx-preescolar .levels-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	margin-top: 40px;
}
.cx-preescolar .level-card {
	background: var(--cx-white);
	border-radius: var(--cx-radius-lg);
	overflow: hidden;
	box-shadow: var(--cx-shadow-card);
	transition: transform var(--cx-transition), box-shadow var(--cx-transition);
}
.cx-preescolar .level-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--cx-shadow-float);
}
.cx-preescolar .level-card__header {
	padding: 28px 28px 20px;
	border-bottom: 1px solid var(--cx-sand);
	display: flex;
	align-items: center;
	gap: 16px;
}
.cx-preescolar .level-card__icon {
	width: 52px; height: 52px;
	border-radius: var(--cx-radius-md);
	display: flex; align-items: center; justify-content: center;
	font-size: 1.5rem;
	flex-shrink: 0;
}
.cx-preescolar .level-card__icon--gold { background: var(--cx-gold-pale); }
.cx-preescolar .level-card__icon--teal { background: var(--cx-teal-light); }
.cx-preescolar .level-card__title {
	font-family: var(--cx-font-head);
	font-size: 1.2rem;
	font-weight: 800;
	color: var(--cx-navy);
}
.cx-preescolar .level-card__age {
	font-size: 0.82rem;
	color: var(--cx-text-muted);
	margin-top: 2px;
}
.cx-preescolar .level-card__body { padding: 24px 28px; }
.cx-preescolar .level-card__desc {
	font-size: 0.95rem;
	color: var(--cx-text-muted);
	line-height: 1.65;
	margin-bottom: 20px;
}
.cx-preescolar .level-card__data {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.cx-preescolar .level-card__data-row {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 0.88rem;
	color: var(--cx-text);
}
.cx-preescolar .level-card__data-row-icon {
	width: 20px; height: 20px; flex-shrink: 0;
	color: var(--cx-teal);
}

/* ==========================================================================
   ACTIVITIES GRID (galería de actividades)
   ========================================================================== */
.cx-preescolar .activities-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin-top: 40px;
}
.cx-preescolar .activity-card {
	border-radius: var(--cx-radius-md);
	overflow: hidden;
	position: relative;
	box-shadow: var(--cx-shadow-card);
	cursor: pointer;
}
.cx-preescolar .activity-card img {
	width: 100%; height: 240px;
	object-fit: cover; display: block;
	transition: transform 0.5s ease;
}
.cx-preescolar .activity-card:hover img { transform: scale(1.05); }
.cx-preescolar .activity-card__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(15,28,48,0.75) 0%, transparent 55%);
}
.cx-preescolar .activity-card__caption {
	position: absolute;
	bottom: 0; left: 0; right: 0;
	padding: 16px;
	color: var(--cx-white);
	font-family: var(--cx-font-head);
	font-weight: 700;
	font-size: 0.9rem;
}
.cx-preescolar .activity-card__caption-sub {
	font-size: 0.75rem;
	font-weight: 400;
	color: rgba(255,255,255,0.75);
	margin-top: 2px;
	display: block;
}

/* ==========================================================================
   FAQ (acordeón). Estado abierto/cerrado por [aria-expanded]/[hidden], que es
   lo que escribe el JS de main.js (feature 71) — no por clases .active/.open.

   Clases faq__item/faq__question/faq__answer/faq__icon a propósito, NO
   faq-item__* (el literal del marcado de referencia): main.js selecciona
   `.faq__question` — es el mismo mecanismo que ya usa front-page.php, y
   escribir un nombre de clase distinto habría dejado el acordeón mudo sin
   que ningún lint lo detectara (medido en el navegador real durante la
   autoverificación de esta tanda).
   ========================================================================== */
.cx-preescolar .faq-list { max-width: 720px; margin: 32px auto 0; }
.cx-preescolar .faq__item {
	border: 1px solid var(--cx-sand-deep);
	border-radius: var(--cx-radius-md);
	margin-bottom: 12px;
	overflow: hidden;
	background: var(--cx-white);
}
.cx-preescolar .faq__question {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: space-between;
	padding: 20px 24px;
	cursor: pointer;
	font-family: var(--cx-font-head);
	font-weight: 700;
	font-size: 0.97rem;
	color: var(--cx-navy);
	gap: 16px;
	text-align: left;
	transition: background var(--cx-transition);
}
.cx-preescolar .faq__question:hover { background: var(--cx-cream); }
.cx-preescolar .faq__question[aria-expanded="true"] { background: var(--cx-cream); }
.cx-preescolar .faq__icon {
	width: 24px; height: 24px; flex-shrink: 0;
	color: var(--cx-gold);
	transition: transform 0.3s ease;
}
.cx-preescolar .faq__question[aria-expanded="true"] .faq__icon { transform: rotate(180deg); }
.cx-preescolar .faq__answer {
	padding: 0 24px 20px;
	font-size: 0.93rem;
	color: var(--cx-text-muted);
	line-height: 1.7;
}
.cx-preescolar .faq__answer p { margin-bottom: 0; }
.cx-preescolar .faq__answer[hidden] { display: none; }

/* ==========================================================================
   CTA BAND
   ========================================================================== */
.cx-preescolar .cta-band {
	background: linear-gradient(135deg, var(--cx-navy) 0%, #1e3a5f 100%);
	padding: 64px 0;
	text-align: center;
	position: relative;
	overflow: hidden;
}
.cx-preescolar .cta-band::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at 30% 50%, rgba(201,146,42,0.15) 0%, transparent 55%),
	            radial-gradient(ellipse at 75% 50%, rgba(42,181,164,0.08) 0%, transparent 50%);
	pointer-events: none;
}
.cx-preescolar .cta-band .container { position: relative; z-index: 1; }
.cx-preescolar .cta-band__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(255,255,255,0.1);
	color: var(--cx-gold-light);
	font-family: var(--cx-font-head);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 6px 16px;
	border-radius: var(--cx-radius-pill);
	margin-bottom: 20px;
}
.cx-preescolar .cta-band__title {
	font-family: var(--cx-font-head);
	font-size: clamp(1.6rem, 3.5vw, 2.4rem);
	font-weight: 800;
	color: var(--cx-white);
	line-height: 1.2;
	margin-bottom: 12px;
}
.cx-preescolar .cta-band__sub {
	font-size: 1rem;
	color: rgba(255,255,255,0.72);
	margin-bottom: 32px;
}
.cx-preescolar .cta-band__actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* ==========================================================================
   RESPONSIVE — mismos 3 breakpoints que trae la referencia (991/768/480)
   ========================================================================== */
@media (max-width: 991px) {
	.cx-preescolar .page-hero__inner { grid-template-columns: 1fr; }
	.cx-preescolar .page-hero__photo-card { max-width: 480px; }
	.cx-preescolar .intro-split { grid-template-columns: 1fr; gap: 40px; }
	.cx-preescolar .intro-split--reverse .intro-split__img { order: 0; }
	.cx-preescolar .levels-grid { grid-template-columns: 1fr; }
	.cx-preescolar .features-row { grid-template-columns: repeat(2, 1fr); }
	.cx-preescolar .activities-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
	.cx-preescolar .page-hero { padding: 56px 0 48px; }
	.cx-preescolar .page-hero__h1 { font-size: 1.8rem; }
	.cx-preescolar .program-section { padding: 60px 0; }
	.cx-preescolar .features-row { grid-template-columns: 1fr 1fr; }
	.cx-preescolar .activities-grid { grid-template-columns: 1fr; }
	.cx-preescolar .cta-band { padding: 48px 0; }
}
@media (max-width: 480px) {
	.cx-preescolar .features-row { grid-template-columns: 1fr; }
	.cx-preescolar .page-hero__stats { gap: 16px; }
}

/* ==========================================================================
   RE-SKIN PRIMARIA — feature 73 (`web-reskin-primaria`), Etapa 3b de la
   Opción A del informe de integración (diseño "Antigravity"). Continúa los
   bloques de las features 70, 71 y 72 que hay justo encima.

   Todo lo de aquí abajo viene de PORTAR (leer, nunca editar ni desplegar)
   C:\Users\dmedi\Claude Code\craftsman-web\primaria\index.html, el bloque
   <style> en línea de ese archivo (líneas 94-476).

   El vocabulario de clases de ESTE prototipo es distinto del de Preescolar
   (`.section`/`.editorial-split`/`.grades-grid`/`.special-subjects`/
   `.photo-strip`/`.values-strip`, no `.program-section`/`.intro-split`/
   `.levels-grid`): se porta con sus propios nombres, no se fuerza a compartir
   los de la feature 72.

   TODO VA BAJO EL ÁMBITO `.cx-primaria`, mismo razonamiento que `.cx-home` y
   `.cx-preescolar` un poco más arriba en este mismo archivo: el marcado de
   referencia reutiliza nombres de clase que este tema ya tiene con otro
   valor y con otros consumidores (`.eyebrow` no se usa aquí, pero `.btn`,
   `.btn--outline`, `.section-tag`, `.container` sí) — sin ámbito, portar
   esas reglas habría cambiado en silencio las páginas que ya comparten esas
   clases. `page-primaria.php` pone la clase `cx-primaria` en su `<main>`.

   Los tokens siguen siendo los `--cx-*` que ya existen (definidos en el
   bloque de la feature 70): esta feature no crea ni un prefijo nuevo ni pisa
   `--font-body`, `--radius-md`, `--radius-lg` ni `--shadow-soft`.

   `.reveal`/`.reveal-delay-N` y el acordeón de FAQ (`[aria-expanded]` +
   `[hidden]`) reutilizan exactamente el mismo mecanismo de JS que ya
   construyó la feature 71 en theme/assets/js/main.js — no se reimplementa
   nada de JS aquí, sólo se repite el patrón de estilos bajo el nuevo ámbito.
   Las clases del FAQ son `.faq__item`/`.faq__question`/`.faq__answer`/
   `.faq__icon`, NO `.faq-item__*` ni `.faq-item__arrow` (el literal de este
   prototipo) — mismo motivo que documentó la feature 72 en su §6.5: main.js
   escucha `.faq__question`, con doble guion bajo.

   AVISO PARA QUIEN EDITE ESTE ARCHIVO: no escribas nunca la notación de
   barra y asterisco entre dos nombres dentro de un comentario — esa
   secuencia CIERRA el comentario a mitad de frase y mata en silencio las
   reglas siguientes, sin que `php -l` ni `init.sh` lo detecten (es CSS, no
   PHP). Separa los nombres con comas y comprueba el balance de aperturas
   contra cierres sobre el archivo entero antes de dar nada por bueno.
   ========================================================================== */

/* ---- Reset local: mismo patrón que .cx-home / .cx-preescolar ---- */
.cx-primaria h1,
.cx-primaria h2,
.cx-primaria p,
.cx-primaria ul {
	margin: 0;
	padding: 0;
}
.cx-primaria {
	font-family: var(--cx-font-body);
	color: var(--cx-text);
}
.cx-primaria button {
	cursor: pointer;
	border: none;
	background: none;
	font-family: inherit;
}

/* ---- Utilidades reutilizadas de .cx-home / .cx-preescolar, repetidas bajo
   este ámbito propio (mismos valores, cero colisión posible) ---- */
.cx-primaria .btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 14px 28px;
	border-radius: var(--cx-radius-pill);
	font-family: var(--cx-font-head);
	font-size: 0.95rem;
	font-weight: 700;
	transition: var(--cx-transition);
	white-space: nowrap;
}
.cx-primaria .btn svg { flex-shrink: 0; }
.cx-primaria .btn--primary {
	background: var(--cx-gold);
	color: var(--cx-white);
	border: none;
	box-shadow: 0 4px 20px rgba(201, 146, 42, 0.35);
}
.cx-primaria .btn--primary:hover {
	background: var(--cx-gold-light);
	color: var(--cx-white);
	box-shadow: 0 8px 30px rgba(201, 146, 42, 0.50);
	transform: translateY(-2px);
}
.cx-primaria .btn--outline {
	border: 2px solid var(--cx-navy);
	color: var(--cx-navy);
	background: transparent;
}
.cx-primaria .btn--outline:hover {
	background: var(--cx-navy);
	color: var(--cx-white);
	transform: translateY(-2px);
}
.cx-primaria .btn--outline-white {
	border: 2px solid rgba(255,255,255,0.6);
	color: var(--cx-white);
	background: transparent;
}
.cx-primaria .btn--outline-white:hover {
	background: rgba(255,255,255,0.15);
	border-color: var(--cx-white);
	color: var(--cx-white);
	transform: translateY(-2px);
}

/* ---- Scroll-reveal: mismo patrón que .cx-home / .cx-preescolar, mismo JS ---- */
.cx-primaria .reveal {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
	            transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.cx-primaria .reveal.visible { opacity: 1; transform: translateY(0); }
.cx-primaria .reveal-delay-1 { transition-delay: 0.1s; }
.cx-primaria .reveal-delay-2 { transition-delay: 0.2s; }
.cx-primaria .reveal-delay-3 { transition-delay: 0.3s; }
.cx-primaria .reveal-delay-4 { transition-delay: 0.4s; }

@media (prefers-reduced-motion: reduce) {
	.cx-primaria .reveal { opacity: 1; transform: none; transition: none; }
	.cx-primaria .page-dec { animation: none !important; }
}
html:not(.js-loaded) .cx-primaria .reveal { opacity: 1; transform: none; }

/* ==========================================================================
   PAGE-HERO PRIMARIA (foto de fondo, no tarjeta lateral — distinto del hero
   de Preescolar)
   ========================================================================== */
.cx-primaria .page-hero {
	background: linear-gradient(150deg, #0f1e35 0%, var(--cx-navy) 50%, #162340 100%);
	padding: 0;
	position: relative;
	overflow: hidden;
	min-height: 540px;
	display: flex;
	align-items: stretch;
}
.cx-primaria .page-hero__bg-photo {
	position: absolute;
	inset: 0;
	z-index: 0;
}
.cx-primaria .page-hero__bg-photo img {
	width: 100%; height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}
.cx-primaria .page-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(10,20,40,0.92) 0%, rgba(10,20,40,0.75) 55%, rgba(10,20,40,0.30) 100%);
	z-index: 1;
}
.cx-primaria .page-hero .container {
	position: relative;
	z-index: 2;
	padding-top: 80px;
	padding-bottom: 72px;
}
.cx-primaria .page-hero__content { max-width: 600px; }

.cx-primaria .page-hero__breadcrumb {
	display: flex; align-items: center; gap: 8px;
	font-size: 0.8rem; color: rgba(255,255,255,0.5);
	margin-bottom: 20px; font-family: var(--cx-font-head);
}
.cx-primaria .page-hero__breadcrumb a { color: rgba(255,255,255,0.5); }
.cx-primaria .page-hero__breadcrumb a:hover { color: var(--cx-gold-light); }
.cx-primaria .page-hero__breadcrumb span { color: rgba(255,255,255,0.3); }

.cx-primaria .hero-eyebrow-pill {
	display: inline-flex; align-items: center; gap: 8px;
	background: rgba(255,255,255,0.1);
	border: 1px solid rgba(255,255,255,0.15);
	color: var(--cx-gold-light);
	font-family: var(--cx-font-head); font-size: 0.72rem;
	font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
	padding: 6px 16px; border-radius: var(--cx-radius-pill); margin-bottom: 20px;
}

.cx-primaria .page-hero__h1 {
	font-family: var(--cx-font-head);
	font-size: clamp(2.1rem, 4.5vw, 3.4rem);
	font-weight: 800; color: var(--cx-white); line-height: 1.1;
	margin-bottom: 20px;
}
.cx-primaria .page-hero__h1 .accent-gold { color: var(--cx-gold-light); }
.cx-primaria .page-hero__h1 .accent-teal { color: var(--cx-teal); }

.cx-primaria .page-hero__sub {
	font-size: 1.05rem; color: rgba(255,255,255,0.78);
	line-height: 1.7; margin-bottom: 32px; max-width: 480px;
}
.cx-primaria .page-hero__actions { display: flex; gap: 14px; flex-wrap: wrap; }

.cx-primaria .page-hero__stats-row {
	display: flex; gap: 0; margin-top: 48px;
	background: rgba(255,255,255,0.07);
	border: 1px solid rgba(255,255,255,0.12);
	border-radius: var(--cx-radius-md);
	overflow: hidden; width: fit-content;
}
.cx-primaria .page-hero__stat {
	padding: 16px 28px; text-align: center;
	border-right: 1px solid rgba(255,255,255,0.1);
}
.cx-primaria .page-hero__stat:last-child { border-right: none; }
.cx-primaria .page-hero__stat-num {
	font-family: var(--cx-font-head); font-size: 1.5rem;
	font-weight: 800; color: var(--cx-gold-light); line-height: 1;
}
.cx-primaria .page-hero__stat-label {
	font-size: 0.75rem; color: rgba(255,255,255,0.55); margin-top: 4px;
}

/* ---- Decoraciones del hero (estrellas). Decisión visual de Codex: se
   portan íntegras. ---- */
.cx-primaria .page-dec { pointer-events: none; }
@keyframes twinkleDec {
	0%, 100% { opacity: 0.4; transform: scale(0.9); }
	50% { opacity: 1; transform: scale(1.15) rotate(12deg); }
}

/* ==========================================================================
   SECTION HELPERS
   ========================================================================== */
.cx-primaria .section { padding: 80px 0; }
.cx-primaria .section--sand { background: var(--cx-sand); }
.cx-primaria .section--cream { background: var(--cx-cream); }
.cx-primaria .section--white { background: var(--cx-white); }
.cx-primaria .section--navy { background: var(--cx-navy); }
.cx-primaria .section--navy-deep { background: var(--cx-navy-deep); }

.cx-primaria .section-tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--cx-font-head);
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	padding: 5px 14px;
	border-radius: var(--cx-radius-pill);
	margin-bottom: 14px;
}
.cx-primaria .section-tag--gold { background: var(--cx-gold-pale); color: var(--cx-gold); }
.cx-primaria .section-tag--teal { background: var(--cx-teal-light); color: var(--cx-teal); }
.cx-primaria .section-tag--navy-inv { background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.9); }

.cx-primaria .section-header { text-align: center; max-width: 600px; margin: 0 auto 40px; }
.cx-primaria .section-heading {
	font-family: var(--cx-font-head);
	font-size: clamp(1.9rem, 3.5vw, 2.8rem);
	font-weight: 800;
	line-height: 1.2;
	color: var(--cx-navy);
	margin-bottom: 16px;
}
.cx-primaria .section-heading--white { color: var(--cx-white); }
.cx-primaria .section-subtext {
	font-size: 1.05rem;
	color: var(--cx-text-muted);
	line-height: 1.7;
	max-width: 560px;
	margin: 0 auto;
}
.cx-primaria .section-subtext--white { color: rgba(255,255,255,0.72); }

/* ==========================================================================
   EDITORIAL SPLIT (propuesta + materias especiales)
   ========================================================================== */
.cx-primaria .editorial-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	align-items: center;
}
.cx-primaria .editorial-split--reverse .editorial-split__visual { order: -1; }

.cx-primaria .editorial-split__heading {
	font-family: var(--cx-font-head);
	font-size: clamp(1.6rem, 3vw, 2.3rem);
	font-weight: 800; color: var(--cx-navy); line-height: 1.2; margin-bottom: 16px;
}
.cx-primaria .editorial-split__heading .gold { color: var(--cx-gold); }
.cx-primaria .editorial-split__heading .teal { color: var(--cx-teal); }
.cx-primaria .editorial-split__subheading {
	font-family: var(--cx-font-head); font-size: 0.95rem;
	font-weight: 600; color: var(--cx-teal); margin-bottom: 14px;
}
.cx-primaria .editorial-split__body {
	font-size: 0.98rem; color: var(--cx-text-muted);
	line-height: 1.75; margin-bottom: 18px;
}

.cx-primaria .check-list { display: flex; flex-direction: column; gap: 11px; margin-bottom: 28px; }
.cx-primaria .check-list__item {
	display: flex; align-items: flex-start; gap: 12px;
	font-size: 0.93rem; color: var(--cx-text); line-height: 1.5;
}
.cx-primaria .check-list__dot {
	width: 22px; height: 22px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	flex-shrink: 0; margin-top: 1px;
}
.cx-primaria .check-list__dot--gold { background: var(--cx-gold-pale); }
.cx-primaria .check-list__dot--teal { background: var(--cx-teal-light); }

.cx-primaria .editorial-split__img-frame {
	border-radius: 20px; overflow: hidden;
	box-shadow: 0 24px 60px rgba(26,43,74,0.2);
	position: relative;
}
.cx-primaria .editorial-split__img-frame img {
	width: 100%; height: 400px; object-fit: cover; display: block;
}
.cx-primaria .img-badge {
	position: absolute; bottom: 20px; left: 20px;
	background: rgba(26,43,74,0.88); backdrop-filter: blur(10px);
	border: 1px solid rgba(255,255,255,0.15);
	border-radius: 12px; padding: 10px 16px;
	font-family: var(--cx-font-head); font-weight: 700;
	font-size: 0.82rem; color: var(--cx-white);
}
.cx-primaria .img-badge span { display: block; font-size: 0.7rem; font-weight: 400; color: rgba(255,255,255,0.6); margin-top: 2px; }

/* ==========================================================================
   GRADOS GRID (1° a 6°)
   ========================================================================== */
.cx-primaria .grades-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px; margin-top: 40px;
}
.cx-primaria .grade-card {
	background: var(--cx-white);
	border-radius: var(--cx-radius-md);
	padding: 28px 22px;
	box-shadow: var(--cx-shadow-card);
	border-top: 3px solid var(--cx-gold);
	transition: transform var(--cx-transition), box-shadow var(--cx-transition);
	position: relative; overflow: hidden;
}
.cx-primaria .grade-card:nth-child(even) { border-top-color: var(--cx-teal); }
.cx-primaria .grade-card:hover { transform: translateY(-4px); box-shadow: var(--cx-shadow-float); }
.cx-primaria .grade-card__num {
	font-family: var(--cx-font-head); font-size: 2rem; font-weight: 800;
	color: var(--cx-navy); line-height: 1; margin-bottom: 6px;
	opacity: 0.15; position: absolute; top: 16px; right: 18px;
}
.cx-primaria .grade-card__title {
	font-family: var(--cx-font-head); font-weight: 800;
	font-size: 1rem; color: var(--cx-navy); margin-bottom: 8px;
}
.cx-primaria .grade-card__age {
	font-size: 0.8rem; color: var(--cx-text-muted); margin-bottom: 12px;
}
.cx-primaria .grade-card__desc { font-size: 0.87rem; color: var(--cx-text-muted); line-height: 1.55; }

/* ==========================================================================
   MATERIAS ESPECIALES (subject-cards)
   ========================================================================== */
.cx-primaria .special-subjects {
	display: grid; grid-template-columns: repeat(4, 1fr);
	gap: 16px; margin-top: 36px;
}
.cx-primaria .subject-card {
	background: var(--cx-white);
	border-radius: var(--cx-radius-md); padding: 22px 18px;
	box-shadow: var(--cx-shadow-card); text-align: center;
	transition: transform var(--cx-transition);
}
.cx-primaria .subject-card:hover { transform: translateY(-3px); }
.cx-primaria .subject-card__icon { font-size: 2rem; margin-bottom: 10px; }
.cx-primaria .subject-card__name {
	font-family: var(--cx-font-head); font-weight: 700;
	font-size: 0.9rem; color: var(--cx-navy);
}

/* ==========================================================================
   PHOTO STRIP (galería "la primaria en acción")
   ========================================================================== */
.cx-primaria .photo-strip {
	display: grid;
	grid-template-columns: 1.25fr 1fr;
	gap: 16px;
	max-width: 900px;
	margin: 36px auto 0;
}
.cx-primaria .photo-strip__item {
	border-radius: var(--cx-radius-md);
	overflow: hidden; position: relative;
	box-shadow: var(--cx-shadow-card);
}
.cx-primaria .photo-strip__item img {
	width: 100%; height: 100%;
	object-fit: cover; display: block;
	transition: transform 0.5s ease;
}
.cx-primaria .photo-strip__item:hover img { transform: scale(1.05); }
.cx-primaria .photo-strip__item--tall { min-height: 340px; }
.cx-primaria .photo-strip__item--short { min-height: 160px; }
.cx-primaria .photo-strip__right { display: flex; flex-direction: column; gap: 16px; }
.cx-primaria .photo-strip__overlay {
	position: absolute; inset: 0;
	background: linear-gradient(0deg, rgba(10,20,40,0.7) 0%, transparent 50%);
}
.cx-primaria .photo-strip__caption {
	position: absolute; bottom: 0; left: 0; right: 0;
	padding: 14px 16px; color: var(--cx-white);
	font-family: var(--cx-font-head); font-weight: 700; font-size: 0.85rem;
}
.cx-primaria .photo-strip__caption-sub {
	font-size: 0.72rem; font-weight: 400;
	color: rgba(255,255,255,0.72); margin-top: 2px; display: block;
}

/* ==========================================================================
   VALORES STRIP (fondo navy)
   ========================================================================== */
.cx-primaria .values-strip {
	display: grid; grid-template-columns: repeat(3, 1fr);
	gap: 24px; margin-top: 36px;
}
.cx-primaria .value-item {
	text-align: center; padding: 32px 22px;
	background: rgba(255,255,255,0.05);
	border: 1px solid rgba(255,255,255,0.1);
	border-radius: var(--cx-radius-lg);
	transition: background var(--cx-transition);
}
.cx-primaria .value-item:hover { background: rgba(255,255,255,0.09); }
.cx-primaria .value-item__icon { font-size: 2.2rem; margin-bottom: 14px; }
.cx-primaria .value-item__title {
	font-family: var(--cx-font-head); font-weight: 800;
	font-size: 1.05rem; color: var(--cx-white); margin-bottom: 10px;
}
.cx-primaria .value-item__desc { font-size: 0.88rem; color: rgba(255,255,255,0.65); line-height: 1.6; }

/* ==========================================================================
   FAQ (acordeón). Estado abierto/cerrado por [aria-expanded]/[hidden], que es
   lo que escribe el JS de main.js (feature 71) — no por clases .active/.open
   como traía el prototipo (que además usaba max-height en vez de hidden).

   Clases faq__item/faq__question/faq__answer/faq__icon a propósito, NO
   faq-item__* ni faq-item__arrow (el literal del marcado de referencia de
   esta página): main.js selecciona `.faq__question` — mismo mecanismo que ya usan
   front-page.php y page-preescolar.php.
   ========================================================================== */
.cx-primaria .faq-list { max-width: 720px; margin: 32px auto 0; }
.cx-primaria .faq__item {
	border: 1px solid var(--cx-sand-deep);
	border-radius: var(--cx-radius-md);
	margin-bottom: 12px;
	overflow: hidden;
	background: var(--cx-white);
}
.cx-primaria .faq__question {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: space-between;
	padding: 20px 24px;
	cursor: pointer;
	font-family: var(--cx-font-head);
	font-weight: 700;
	font-size: 0.97rem;
	color: var(--cx-navy);
	gap: 16px;
	text-align: left;
	transition: background var(--cx-transition);
}
.cx-primaria .faq__question:hover { background: var(--cx-cream); }
.cx-primaria .faq__question[aria-expanded="true"] { background: var(--cx-cream); }
.cx-primaria .faq__icon {
	width: 22px; height: 22px; flex-shrink: 0;
	color: var(--cx-gold);
	transition: transform 0.3s ease;
}
.cx-primaria .faq__question[aria-expanded="true"] .faq__icon { transform: rotate(180deg); }
.cx-primaria .faq__answer {
	padding: 0 24px 20px;
	font-size: 0.93rem;
	color: var(--cx-text-muted);
	line-height: 1.7;
}
.cx-primaria .faq__answer p { margin-bottom: 0; }
.cx-primaria .faq__answer[hidden] { display: none; }

/* ==========================================================================
   CTA BAND
   ========================================================================== */
.cx-primaria .cta-band {
	background: linear-gradient(135deg, var(--cx-navy) 0%, #1a3a6a 100%);
	padding: 64px 0; text-align: center; position: relative; overflow: hidden;
}
.cx-primaria .cta-band::before {
	content: '';
	position: absolute; inset: 0;
	background: radial-gradient(ellipse at 30% 50%, rgba(232,184,75,0.15) 0%, transparent 55%),
	            radial-gradient(ellipse at 75% 50%, rgba(42,181,164,0.08) 0%, transparent 50%);
	pointer-events: none;
}
.cx-primaria .cta-band .container { position: relative; z-index: 1; }
.cx-primaria .cta-band__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(255,255,255,0.1);
	color: var(--cx-gold-light);
	font-family: var(--cx-font-head);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 6px 16px;
	border-radius: var(--cx-radius-pill);
	margin-bottom: 20px;
}
.cx-primaria .cta-band__title {
	font-family: var(--cx-font-head);
	font-size: clamp(1.6rem, 3.5vw, 2.4rem);
	font-weight: 800;
	color: var(--cx-white);
	line-height: 1.2;
	margin-bottom: 12px;
}
.cx-primaria .cta-band__sub {
	font-size: 1rem;
	color: rgba(255,255,255,0.72);
	margin-bottom: 32px;
}
.cx-primaria .cta-band__actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* ==========================================================================
   RESPONSIVE — mismos 3 cortes que trae la referencia (991/768/480)
   ========================================================================== */
@media (max-width: 991px) {
	.cx-primaria .editorial-split { grid-template-columns: 1fr; gap: 40px; }
	.cx-primaria .editorial-split--reverse .editorial-split__visual { order: 0; }
	.cx-primaria .grades-grid { grid-template-columns: 1fr 1fr; }
	.cx-primaria .special-subjects { grid-template-columns: repeat(2, 1fr); }
	.cx-primaria .values-strip { grid-template-columns: 1fr 1fr; }
	.cx-primaria .photo-strip { grid-template-columns: 1fr 1fr; }
	.cx-primaria .photo-strip__item--tall { min-height: 260px; }
}
@media (max-width: 768px) {
	.cx-primaria .page-hero .container { padding-top: 60px; padding-bottom: 56px; }
	.cx-primaria .page-hero__h1 { font-size: 1.9rem; }
	.cx-primaria .section { padding: 60px 0; }
	.cx-primaria .grades-grid { grid-template-columns: 1fr; }
	.cx-primaria .special-subjects { grid-template-columns: repeat(2, 1fr); }
	.cx-primaria .values-strip { grid-template-columns: 1fr; }
	.cx-primaria .photo-strip { grid-template-columns: 1fr; }
	.cx-primaria .cta-band { padding: 48px 0; }
}
@media (max-width: 480px) {
	.cx-primaria .special-subjects { grid-template-columns: 1fr 1fr; }
	.cx-primaria .page-hero__stats-row { flex-wrap: wrap; }
}

/* ==========================================================================
   RE-SKIN NOSOTROS -- feature 74 (`web-reskin-nosotros`), Etapa 4a de la
   Opcion A del informe de integracion (diseno "Antigravity"). Continua los
   bloques de las features 70-73 que hay justo encima.

   Todo lo de aqui abajo viene de PORTAR (leer, nunca editar ni desplegar)
   C:\Users\dmedi\Claude Code\craftsman-web\nosotros\index.html, el bloque
   <style> en linea de ese archivo (lineas 80-361).

   TODO VA BAJO EL AMBITO `.cx-nosotros`, mismo razonamiento que `.cx-home`,
   `.cx-preescolar` y `.cx-primaria`: el marcado de referencia reutiliza
   nombres de clase que este tema ya tiene con otro valor y con otros
   consumidores -- `.eyebrow`, `.btn`, `.container`, `.section-tag`,
   `.page-hero`, `.section` -- y sin ambito, portar esas reglas habria
   cambiado en silencio las paginas publicas que ya comparten esas clases.
   `page-nosotros.php` pone la clase `cx-nosotros` en su `<main>`.

   Los tokens siguen siendo los `--cx-*` que ya existen (definidos en el
   bloque de la feature 70): esta feature no crea ni un prefijo nuevo.

   `.reveal`/`.reveal-delay-N` reutiliza exactamente el mismo mecanismo de JS
   que ya construyo la feature 71 en theme/assets/js/main.js -- no se
   reimplementa nada de JS aqui. Esta pagina no trae acordeon/FAQ, asi que no
   hay nada que enganchar a `.faq__question`.

   AVISO PARA QUIEN EDITE ESTE ARCHIVO: no escribas nunca la notacion de barra
   y asterisco entre dos nombres de clase dentro de un comentario -- esa
   secuencia CIERRA el comentario a mitad de frase y mata en silencio las
   reglas siguientes, sin que `php -l` ni `init.sh` lo detecten (es CSS, no
   PHP). Separa los nombres con comas y comprueba el balance de aperturas
   contra cierres sobre el archivo entero antes de dar nada por bueno.
   ========================================================================== */

/* ---- Reset local: mismo patron que .cx-home/.cx-preescolar/.cx-primaria ---- */
.cx-nosotros h1,
.cx-nosotros h2,
.cx-nosotros h3,
.cx-nosotros p,
.cx-nosotros ul,
.cx-nosotros blockquote {
	margin: 0;
	padding: 0;
}
.cx-nosotros {
	font-family: var(--cx-font-body);
	color: var(--cx-text);
}
.cx-nosotros button {
	cursor: pointer;
	border: none;
	background: none;
	font-family: inherit;
}

/* ---- Utilidades reutilizadas del ambito .cx-home, repetidas bajo este
   ambito propio (mismos valores, cero colision posible: los selectores de
   estos bloques no comparten ancestro) ---- */
.cx-nosotros .eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--cx-gold-pale);
	color: var(--cx-gold);
	font-family: var(--cx-font-head);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 6px 14px;
	border-radius: var(--cx-radius-pill);
	margin-bottom: 16px;
}

.cx-nosotros .btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 14px 28px;
	border-radius: var(--cx-radius-pill);
	font-family: var(--cx-font-head);
	font-size: 0.95rem;
	font-weight: 700;
	transition: var(--cx-transition);
	white-space: nowrap;
}
.cx-nosotros .btn svg { flex-shrink: 0; }
.cx-nosotros .btn--primary {
	background: var(--cx-gold);
	color: var(--cx-white);
	border: none;
	box-shadow: 0 4px 20px rgba(201, 146, 42, 0.35);
}
.cx-nosotros .btn--primary:hover {
	background: var(--cx-gold-light);
	color: var(--cx-white);
	box-shadow: 0 8px 30px rgba(201, 146, 42, 0.50);
	transform: translateY(-2px);
}
.cx-nosotros .btn--outline-white {
	border: 2px solid rgba(255,255,255,0.6);
	color: var(--cx-white);
	background: transparent;
}
.cx-nosotros .btn--outline-white:hover {
	background: rgba(255,255,255,0.15);
	border-color: var(--cx-white);
	color: var(--cx-white);
	transform: translateY(-2px);
}

.cx-nosotros .container {
	max-width: var(--cx-container);
	margin: 0 auto;
	padding: 0 1.5rem;
}

/* ---- Scroll-reveal: mismo patron que .cx-home/.cx-preescolar/.cx-primaria,
   mismo JS ---- */
.cx-nosotros .reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
	            transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.cx-nosotros .reveal.visible { opacity: 1; transform: translateY(0); }
.cx-nosotros .reveal-delay-1 { transition-delay: 0.1s; }
.cx-nosotros .reveal-delay-2 { transition-delay: 0.2s; }
.cx-nosotros .reveal-delay-3 { transition-delay: 0.3s; }

@media (prefers-reduced-motion: reduce) {
	.cx-nosotros .reveal { opacity: 1; transform: none; transition: none; }
}
html:not(.js-loaded) .cx-nosotros .reveal { opacity: 1; transform: none; }

/* ---- Utilidades chicas de espaciado, para no repetir estilos en linea del
   marcado de referencia ---- */
.cx-nosotros__mb-16 { margin-bottom: 16px; }
.cx-nosotros__mb-18 { margin-bottom: 18px; }
.cx-nosotros__mt-12 { margin-top: 12px; }

/* ==========================================================================
   PAGE-HERO NOSOTROS
   ========================================================================== */
.cx-nosotros .page-hero {
	background: linear-gradient(145deg, #101c30 0%, var(--cx-navy) 55%, #183354 100%);
	padding: 76px 0 64px;
	position: relative;
	overflow: hidden;
}
.cx-nosotros .page-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 80% 30%, rgba(201,146,42,0.15) 0%, transparent 50%),
	            radial-gradient(circle at 10% 70%, rgba(42,181,164,0.10) 0%, transparent 45%);
	pointer-events: none;
}
.cx-nosotros .page-hero .container { position: relative; z-index: 2; }
.cx-nosotros .page-hero__inner {
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	gap: 48px;
	align-items: center;
}
.cx-nosotros .page-hero__breadcrumb {
	display: flex; align-items: center; gap: 8px;
	font-size: 0.82rem; color: rgba(255,255,255,0.55);
	margin-bottom: 18px; font-family: var(--cx-font-head);
}
.cx-nosotros .page-hero__breadcrumb a { color: rgba(255,255,255,0.55); }
.cx-nosotros .page-hero__breadcrumb a:hover { color: var(--cx-gold-light); }
.cx-nosotros .page-hero__breadcrumb span { color: rgba(255,255,255,0.3); }

.cx-nosotros .page-hero__h1 {
	font-family: var(--cx-font-head);
	font-size: clamp(2.2rem, 4.2vw, 3.3rem);
	font-weight: 800; color: var(--cx-white); line-height: 1.15;
	margin-bottom: 20px;
}
.cx-nosotros .page-hero__h1 .accent-gold { color: var(--cx-gold-light); }
.cx-nosotros .page-hero__h1 .accent-teal { color: var(--cx-teal); }

.cx-nosotros .page-hero__sub {
	font-size: 1.05rem; color: rgba(255,255,255,0.82);
	line-height: 1.75; margin-bottom: 30px; max-width: 520px;
}

.cx-nosotros .page-hero__actions { display: flex; gap: 16px; flex-wrap: wrap; }

.cx-nosotros .section-tag {
	display: inline-flex; align-items: center; gap: 6px;
	font-family: var(--cx-font-head); font-size: 0.74rem; font-weight: 700;
	text-transform: uppercase; letter-spacing: 0.1em;
	padding: 6px 14px; border-radius: var(--cx-radius-pill); margin-bottom: 14px;
}
.cx-nosotros .section-tag--gold { background: var(--cx-gold-pale); color: var(--cx-gold); }
.cx-nosotros .section-tag--teal { background: var(--cx-teal-light); color: var(--cx-teal); }
.cx-nosotros .section-tag--navy-inv { background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.9); }

.cx-nosotros .hero-photo-box {
	border-radius: var(--cx-radius-xl);
	overflow: hidden;
	box-shadow: 0 24px 60px rgba(0,0,0,0.35);
	border: 3px solid rgba(255,255,255,0.12);
	position: relative;
}
.cx-nosotros .hero-photo-box img {
	width: 100%; height: 380px; object-fit: cover; display: block;
}
.cx-nosotros .hero-photo-box__badge {
	position: absolute; bottom: 18px; left: 18px; right: 18px;
	background: rgba(26,43,74,0.9); backdrop-filter: blur(10px);
	border-radius: 12px; padding: 12px 18px; color: var(--cx-white);
	display: flex; align-items: center; justify-content: space-between;
}
.cx-nosotros .hero-photo-box__badge-title {
	font-family: var(--cx-font-head); font-weight: 700; font-size: 0.86rem;
	color: var(--cx-gold-light);
}
.cx-nosotros .hero-photo-box__badge-sub { font-size: 0.75rem; color: rgba(255,255,255,0.7); }
.cx-nosotros .hero-photo-box__badge-pill {
	background: var(--cx-gold); color: var(--cx-white); font-size: 0.7rem; font-weight: 700;
	padding: 4px 10px; border-radius: var(--cx-radius-pill); text-transform: uppercase;
}

/* ==========================================================================
   SECTION STYLING -- genericas de esta pagina
   ========================================================================== */
.cx-nosotros .section { padding: 84px 0; }
.cx-nosotros .section--sand { background: var(--cx-sand); }
.cx-nosotros .section--cream { background: var(--cx-cream); }
.cx-nosotros .section--white { background: var(--cx-white); }

.cx-nosotros .section-header { text-align: center; max-width: 620px; margin: 0 auto 48px; }
.cx-nosotros .section-heading {
	font-family: var(--cx-font-head); font-weight: 800;
	font-size: clamp(1.7rem, 3.2vw, 2.4rem); color: var(--cx-navy); line-height: 1.25;
}
.cx-nosotros .section-subtext { font-size: 1rem; color: var(--cx-text-muted); line-height: 1.75; }

/* ---- Editorial split (historia) ---- */
.cx-nosotros .about-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	align-items: center;
}
.cx-nosotros .about-split__visual-frame {
	border-radius: var(--cx-radius-lg); overflow: hidden;
	box-shadow: var(--cx-shadow-float); position: relative;
}
.cx-nosotros .about-split__visual-frame img {
	width: 100%; height: 400px; object-fit: cover; display: block;
}

/* ---- Mision y vision ---- */
.cx-nosotros .mv-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
}
.cx-nosotros .mv-card {
	background: var(--cx-white);
	border-radius: var(--cx-radius-lg);
	padding: 40px 36px;
	box-shadow: var(--cx-shadow-card);
	border-top: 4px solid var(--cx-gold);
	position: relative;
}
.cx-nosotros .mv-card--vision { border-top-color: var(--cx-teal); }
.cx-nosotros .mv-card__icon { font-size: 2.2rem; margin-bottom: 16px; }
.cx-nosotros .mv-card__title {
	font-family: var(--cx-font-head); font-weight: 800;
	font-size: 1.4rem; color: var(--cx-navy); margin-bottom: 14px;
}
.cx-nosotros .mv-card__text { font-size: 0.98rem; color: var(--cx-text-muted); line-height: 1.75; }

/* ---- Valores institucionales ---- */
.cx-nosotros .values-grid-3 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
	margin-top: 36px;
}
.cx-nosotros .val-box {
	background: var(--cx-white);
	border-radius: var(--cx-radius-md);
	padding: 34px 26px;
	text-align: center;
	box-shadow: var(--cx-shadow-card);
	transition: transform var(--cx-transition);
}
.cx-nosotros .val-box:hover { transform: translateY(-5px); }
.cx-nosotros .val-box__emblem {
	width: 60px; height: 60px; border-radius: 50%;
	background: var(--cx-gold-pale); color: var(--cx-gold);
	font-family: var(--cx-font-head); font-weight: 800; font-size: 1.5rem;
	display: flex; align-items: center; justify-content: center;
	margin: 0 auto 18px;
}
.cx-nosotros .val-box--teal .val-box__emblem { background: var(--cx-teal-light); color: var(--cx-teal); }
.cx-nosotros .val-box--navy .val-box__emblem { background: var(--cx-sand); color: var(--cx-navy); }
.cx-nosotros .val-box__title {
	font-family: var(--cx-font-head); font-weight: 800;
	font-size: 1.2rem; color: var(--cx-navy); margin-bottom: 10px;
}
.cx-nosotros .val-box__desc { font-size: 0.9rem; color: var(--cx-text-muted); line-height: 1.6; }

/* ---- Cultura y celebracion de la diversidad ---- */
.cx-nosotros .culture-gallery {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin-top: 36px;
}
.cx-nosotros .culture-card {
	border-radius: var(--cx-radius-md); overflow: hidden;
	position: relative; box-shadow: var(--cx-shadow-card);
}
.cx-nosotros .culture-card img {
	width: 100%; height: 260px; object-fit: cover; display: block;
	transition: transform 0.5s ease;
}
.cx-nosotros .culture-card:hover img { transform: scale(1.05); }
.cx-nosotros .culture-card__overlay {
	position: absolute; inset: 0;
	background: linear-gradient(0deg, rgba(15,28,48,0.85) 0%, transparent 60%);
}
.cx-nosotros .culture-card__caption {
	position: absolute; bottom: 0; left: 0; right: 0;
	padding: 16px 18px; color: var(--cx-white);
	font-family: var(--cx-font-head); font-weight: 700; font-size: 0.9rem;
}
.cx-nosotros .culture-card__caption span {
	display: block; font-size: 0.76rem; font-weight: 400;
	color: rgba(255,255,255,0.75); margin-top: 3px;
}

/* ---- Mensaje de la direccion ---- */
.cx-nosotros .director-block {
	background: linear-gradient(135deg, var(--cx-navy-deep) 0%, var(--cx-navy) 100%);
	border-radius: var(--cx-radius-xl);
	padding: 48px 44px;
	color: var(--cx-white);
	display: grid;
	grid-template-columns: 1fr 280px;
	gap: 40px;
	align-items: center;
	box-shadow: var(--cx-shadow-float);
}
.cx-nosotros .director-block__quote {
	font-family: var(--cx-font-head); font-size: 1.18rem; font-weight: 500;
	line-height: 1.7; color: rgba(255,255,255,0.92); font-style: italic;
	margin-bottom: 20px;
}
.cx-nosotros .director-block__author {
	font-family: var(--cx-font-head); font-weight: 700; font-size: 0.95rem;
	color: var(--cx-gold-light);
}
.cx-nosotros .director-block__role { font-size: 0.8rem; color: rgba(255,255,255,0.6); }
.cx-nosotros .director-block__img {
	border-radius: var(--cx-radius-lg); overflow: hidden;
	border: 2px solid rgba(255,255,255,0.15);
}
.cx-nosotros .director-block__img img {
	width: 100%; height: 260px; object-fit: cover; display: block;
}

/* ---- CTA band ---- */
.cx-nosotros .cta-band {
	background: linear-gradient(135deg, var(--cx-navy) 0%, #15243d 100%);
	padding: 72px 0; text-align: center; position: relative; overflow: hidden;
}
.cx-nosotros .cta-band::before {
	content: '';
	position: absolute; inset: 0;
	background: radial-gradient(circle at 50% 50%, rgba(201,146,42,0.16) 0%, transparent 60%);
	pointer-events: none;
}
.cx-nosotros .cta-band .container { position: relative; z-index: 1; }
.cx-nosotros .cta-band__pill {
	display: inline-flex; align-items: center; gap: 8px;
	background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.18);
	color: var(--cx-gold-light); font-family: var(--cx-font-head); font-size: 0.72rem;
	font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
	padding: 6px 16px; border-radius: var(--cx-radius-pill); margin-bottom: 20px;
}
.cx-nosotros .cta-band__title {
	font-family: var(--cx-font-head); font-size: clamp(1.8rem, 3.8vw, 2.6rem);
	font-weight: 800; color: var(--cx-white); line-height: 1.2; margin-bottom: 14px;
}
.cx-nosotros .cta-band__sub {
	font-size: 1.05rem; color: rgba(255,255,255,0.78);
	margin-bottom: 34px; max-width: 580px; margin-inline: auto;
}
.cx-nosotros .cta-band__actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* ==========================================================================
   RESPONSIVE -- mismos 2 cortes que trae la referencia (991/768)
   ========================================================================== */
@media (max-width: 991px) {
	.cx-nosotros .page-hero__inner { grid-template-columns: 1fr; }
	.cx-nosotros .about-split { grid-template-columns: 1fr; gap: 40px; }
	.cx-nosotros .mv-grid { grid-template-columns: 1fr; }
	.cx-nosotros .values-grid-3 { grid-template-columns: 1fr; }
	.cx-nosotros .culture-gallery { grid-template-columns: 1fr 1fr; }
	.cx-nosotros .director-block { grid-template-columns: 1fr; text-align: center; }
	.cx-nosotros .director-block__img { max-width: 300px; margin: 0 auto; }
}
@media (max-width: 768px) {
	.cx-nosotros .page-hero { padding: 56px 0 48px; }
	.cx-nosotros .section { padding: 60px 0; }
	.cx-nosotros .culture-gallery { grid-template-columns: 1fr; }
	.cx-nosotros .director-block { padding: 32px 24px; }
}

/* ==========================================================================
   RE-SKIN CONTACTO -- feature 75 (`web-reskin-contacto`), Etapa 4a de la
   Opcion A del informe de integracion (diseno "Antigravity"). Continua los
   bloques de las features 70-74 que hay justo encima.

   Todo lo de aqui abajo viene de PORTAR (leer, nunca editar ni desplegar)
   C:\Users\dmedi\Claude Code\craftsman-web\contacto\index.html, el bloque
   <style> en linea de ese archivo (lineas 90-301).

   TODO VA BAJO EL AMBITO `.cx-contacto`, mismo razonamiento que
   `.cx-home`, `.cx-preescolar`, `.cx-primaria` y `.cx-nosotros`.
   `page-contacto.php` pone la clase `cx-contacto` en su `<main>`.

   Los tokens siguen siendo los `--cx-*` que ya existen: esta feature no
   crea ni un prefijo nuevo.

   DOS RECORTES DELIBERADOS frente al marcado de referencia, documentados
   en el informe de la feature: (1) la seccion del mapa embebido no se
   porta -- se retiro del footer en la feature 70 y la decision fue no
   reintroducirlo en otro lugar sin pedirlo de forma explicita; (2) el
   formulario no trae el selector de grado de interes del prototipo,
   porque cs_handle_contact_form() solo conoce 4 campos y no hay donde
   guardar un quinto.

   AVISO PARA QUIEN EDITE ESTE ARCHIVO: no escribas nunca la notacion de
   barra y asterisco entre dos nombres de clase dentro de un comentario --
   esa secuencia CIERRA el comentario a mitad de frase y mata en silencio
   las reglas siguientes, sin que php -l ni init.sh lo detecten (es CSS, no
   PHP). Separa los nombres con comas y comprueba el balance de aperturas
   contra cierres sobre el archivo entero antes de dar nada por bueno.
   ========================================================================== */

/* ---- Reset local: mismo patron que los ambitos anteriores ---- */
.cx-contacto h1,
.cx-contacto h2,
.cx-contacto h3,
.cx-contacto p,
.cx-contacto ul {
	margin: 0;
	padding: 0;
}
.cx-contacto {
	font-family: var(--cx-font-body);
	color: var(--cx-text);
}
.cx-contacto button {
	cursor: pointer;
	border: none;
	background: none;
	font-family: inherit;
}

.cx-contacto .container {
	max-width: var(--cx-container);
	margin: 0 auto;
	padding: 0 24px;
}

.cx-contacto .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 28px;
	border-radius: var(--cx-radius-pill);
	font-family: var(--cx-font-head);
	font-size: 0.95rem;
	font-weight: 700;
	transition: var(--cx-transition);
	white-space: nowrap;
}
.cx-contacto .btn--primary {
	background: var(--cx-gold);
	color: var(--cx-white);
	border: none;
	box-shadow: 0 4px 20px rgba(201, 146, 42, 0.35);
}
.cx-contacto .btn--primary:hover {
	background: var(--cx-gold-light);
	color: var(--cx-white);
	box-shadow: 0 8px 30px rgba(201, 146, 42, 0.50);
	transform: translateY(-2px);
}

/* ---- Hero ---- */
.cx-contacto .page-hero {
	background: linear-gradient(145deg, var(--cx-navy-deep) 0%, var(--cx-navy) 60%, #1a365c 100%);
	padding: 68px 0 54px;
	text-align: center;
	position: relative;
	overflow: hidden;
}
.cx-contacto .page-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 50% 30%, rgba(201,146,42,0.14) 0%, transparent 60%);
	pointer-events: none;
}
.cx-contacto .page-hero .container { position: relative; z-index: 2; }
.cx-contacto .page-hero__breadcrumb {
	display: inline-flex; align-items: center; gap: 8px;
	font-size: 0.82rem; color: rgba(255,255,255,0.55);
	margin-bottom: 16px; font-family: var(--cx-font-head);
}
.cx-contacto .page-hero__breadcrumb a { color: rgba(255,255,255,0.55); }
.cx-contacto .page-hero__breadcrumb a:hover { color: var(--cx-gold-light); }
.cx-contacto .page-hero__breadcrumb span { color: rgba(255,255,255,0.3); }

.cx-contacto .page-hero__eyebrow {
	display: inline-flex; align-items: center; gap: 6px;
	background: rgba(255,255,255,0.12); color: var(--cx-gold-light);
	font-family: var(--cx-font-head); font-size: 0.74rem; font-weight: 700;
	text-transform: uppercase; letter-spacing: 0.1em;
	padding: 6px 14px; border-radius: var(--cx-radius-pill);
	margin-bottom: 14px;
}

.cx-contacto .page-hero__h1 {
	font-family: var(--cx-font-head);
	font-size: clamp(2.2rem, 4.2vw, 3.2rem);
	font-weight: 800; color: var(--cx-white); line-height: 1.15;
	margin-bottom: 16px;
}
.cx-contacto .page-hero__h1 .accent-gold { color: var(--cx-gold-light); }

.cx-contacto .page-hero__sub {
	font-size: 1.05rem; color: rgba(255,255,255,0.8);
	line-height: 1.7; max-width: 580px; margin: 0 auto;
}

/* ---- Seccion de contacto (formulario + info) ---- */
.cx-contacto .contact-section {
	padding: 60px 0 84px;
	background: var(--cx-sand);
}
.cx-contacto .contact-grid {
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	gap: 48px;
}

.cx-contacto .contact-form-card {
	background: var(--cx-white);
	border-radius: var(--cx-radius-lg);
	padding: 40px 36px;
	box-shadow: var(--cx-shadow-card);
	border: 1px solid var(--cx-sand-deep);
}
.cx-contacto .contact-form-card__title {
	font-family: var(--cx-font-head); font-weight: 800;
	font-size: 1.4rem; color: var(--cx-navy); margin-bottom: 8px;
}
.cx-contacto .contact-form-card__sub {
	font-size: 0.92rem; color: var(--cx-text-muted); line-height: 1.55;
	margin-bottom: 28px;
}
.cx-contacto .contact-form-card__submit { width: 100%; margin-top: 4px; }

.cx-contacto .form-success-box {
	background: var(--cx-teal-light);
	border: 1px solid var(--cx-teal);
	border-radius: var(--cx-radius-md);
	padding: 24px;
	text-align: center;
	color: var(--cx-navy);
	margin-bottom: 24px;
}
.cx-contacto .form-success-box__title {
	font-family: var(--cx-font-head); font-weight: 800;
	font-size: 1.1rem; margin-bottom: 6px;
}
.cx-contacto .form-success-box__text {
	font-size: 0.9rem; color: var(--cx-text); line-height: 1.5;
}

.cx-contacto .form-group { margin-bottom: 20px; }
.cx-contacto .form-label {
	display: block;
	font-family: var(--cx-font-head); font-weight: 700;
	font-size: 0.85rem; color: var(--cx-navy); margin-bottom: 8px;
}
.cx-contacto .form-input,
.cx-contacto .form-textarea {
	width: 100%;
	padding: 13px 16px;
	border: 1.5px solid var(--cx-sand-deep);
	border-radius: var(--cx-radius-sm);
	font-family: var(--cx-font-body);
	font-size: 0.95rem;
	color: var(--cx-text);
	background: var(--cx-cream);
	transition: border-color var(--cx-transition), box-shadow var(--cx-transition);
}
.cx-contacto .form-input:focus,
.cx-contacto .form-textarea:focus {
	outline: none;
	border-color: var(--cx-gold);
	background: var(--cx-white);
	box-shadow: 0 0 0 3px rgba(201,146,42,0.15);
}
.cx-contacto .form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

/* ---- Tarjetas de informacion lateral ---- */
.cx-contacto .contact-info-stack {
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.cx-contacto .info-card {
	background: var(--cx-white);
	border-radius: var(--cx-radius-md);
	padding: 26px 24px;
	box-shadow: var(--cx-shadow-card);
	border-left: 4px solid var(--cx-gold);
	display: flex;
	gap: 18px;
	align-items: flex-start;
	transition: transform var(--cx-transition);
}
.cx-contacto .info-card:hover { transform: translateX(4px); }
.cx-contacto .info-card--teal { border-left-color: var(--cx-teal); }
.cx-contacto .info-card--navy { border-left-color: var(--cx-navy); }

.cx-contacto .info-card__icon {
	width: 44px; height: 44px; border-radius: 50%;
	background: var(--cx-gold-pale); color: var(--cx-gold);
	display: flex; align-items: center; justify-content: center;
	flex-shrink: 0;
}
.cx-contacto .info-card--teal .info-card__icon { background: var(--cx-teal-light); color: var(--cx-teal); }
.cx-contacto .info-card--navy .info-card__icon { background: var(--cx-sand); color: var(--cx-navy); }

.cx-contacto .info-card__title {
	font-family: var(--cx-font-head); font-weight: 800;
	font-size: 1.05rem; color: var(--cx-navy); margin-bottom: 4px;
}
.cx-contacto .info-card__text {
	font-size: 0.92rem; color: var(--cx-text-muted); line-height: 1.5;
}
.cx-contacto .info-card__text--tight { margin-top: 6px; }
.cx-contacto .info-card__row {
	margin-top: 6px; display: flex; flex-wrap: wrap; gap: 12px;
}
.cx-contacto .info-card__link {
	display: inline-flex; align-items: center; gap: 6px;
	font-family: var(--cx-font-head); font-weight: 700;
	font-size: 0.88rem; color: var(--cx-gold); margin-top: 6px;
	transition: color var(--cx-transition);
}
.cx-contacto .info-card__link:hover { color: var(--cx-navy); }
.cx-contacto .info-card__link--wa { color: #25D366; }
.cx-contacto .info-card__link--wa:hover { color: var(--cx-navy); }

@media (max-width: 991px) {
	.cx-contacto .contact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
	.cx-contacto .form-row { grid-template-columns: 1fr; }
	.cx-contacto .contact-form-card { padding: 28px 20px; }
	.cx-contacto .page-hero { padding: 54px 0 44px; }
}

/* ==========================================================================
   RE-SKIN GALERIA -- feature 76 (`web-reskin-galeria`), tanda 3 de 3, ultima
   etapa de contenido de la Opcion A del informe de integracion (diseno
   "Antigravity"). Continua los bloques de las features 70-75 que hay justo
   encima.

   Todo lo de aqui abajo viene de PORTAR (leer, nunca editar ni desplegar)
   C:\Users\dmedi\Claude Code\craftsman-web\galeria\index.html, el bloque
   <style> en linea de ese archivo.

   TODO VA BAJO EL AMBITO `.cx-galeria`, mismo razonamiento que
   `.cx-home`, `.cx-preescolar`, `.cx-primaria`, `.cx-nosotros` y
   `.cx-contacto`. `page-galeria.php` pone la clase `cx-galeria` en su
   `<main>`.

   Los tokens siguen siendo los `--cx-*` que ya existen: esta feature no
   crea ni un prefijo nuevo.

   AVISO PARA QUIEN EDITE ESTE ARCHIVO: no escribas nunca la notacion de
   barra y asterisco entre dos nombres de clase dentro de un comentario --
   esa secuencia CIERRA el comentario a mitad de frase y mata en silencio
   las reglas siguientes, sin que php -l ni init.sh lo detecten (es CSS, no
   PHP). Separa los nombres con comas y comprueba el balance de aperturas
   contra cierres sobre el archivo entero antes de dar nada por bueno.
   ========================================================================== */

/* ---- Reset local: mismo patron que los ambitos anteriores ---- */
.cx-galeria h1,
.cx-galeria h2,
.cx-galeria h3,
.cx-galeria p,
.cx-galeria ul {
	margin: 0;
	padding: 0;
}
.cx-galeria {
	font-family: var(--cx-font-body);
	color: var(--cx-text);
}
.cx-galeria button {
	cursor: pointer;
	border: none;
	background: none;
	font-family: inherit;
}

.cx-galeria .container {
	max-width: var(--cx-container);
	margin: 0 auto;
	padding: 0 24px;
}

.cx-galeria .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 28px;
	border-radius: var(--cx-radius-pill);
	font-family: var(--cx-font-head);
	font-size: 0.95rem;
	font-weight: 700;
	transition: var(--cx-transition);
	white-space: nowrap;
	text-decoration: none;
}
.cx-galeria .btn--primary {
	background: var(--cx-gold);
	color: var(--cx-white);
	border: none;
	box-shadow: 0 4px 20px rgba(201, 146, 42, 0.35);
}
.cx-galeria .btn--primary:hover {
	background: var(--cx-gold-light);
	color: var(--cx-white);
	box-shadow: 0 8px 30px rgba(201, 146, 42, 0.50);
	transform: translateY(-2px);
}
.cx-galeria .btn--outline-white {
	border: 2px solid rgba(255,255,255,0.6);
	color: var(--cx-white);
	background: transparent;
}
.cx-galeria .btn--outline-white:hover {
	background: rgba(255,255,255,0.15);
	border-color: var(--cx-white);
	color: var(--cx-white);
	transform: translateY(-2px);
}

/* ---- Hero ---- */
.cx-galeria .page-hero {
	background: linear-gradient(145deg, var(--cx-navy-deep) 0%, var(--cx-navy) 60%, #1a365c 100%);
	padding: 64px 0 54px;
	text-align: center;
	position: relative;
	overflow: hidden;
}
.cx-galeria .page-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 50% 30%, rgba(201,146,42,0.14) 0%, transparent 60%);
	pointer-events: none;
}
.cx-galeria .page-hero .container { position: relative; z-index: 2; }
.cx-galeria .page-hero__breadcrumb {
	display: inline-flex; align-items: center; gap: 8px;
	font-size: 0.82rem; color: rgba(255,255,255,0.55);
	margin-bottom: 16px; font-family: var(--cx-font-head);
}
.cx-galeria .page-hero__breadcrumb a { color: rgba(255,255,255,0.55); }
.cx-galeria .page-hero__breadcrumb a:hover { color: var(--cx-gold-light); }
.cx-galeria .page-hero__breadcrumb span { color: rgba(255,255,255,0.3); }

.cx-galeria .page-hero__eyebrow {
	display: inline-flex; align-items: center; gap: 6px;
	background: rgba(255,255,255,0.12); color: var(--cx-gold-light);
	font-family: var(--cx-font-head); font-size: 0.74rem; font-weight: 700;
	text-transform: uppercase; letter-spacing: 0.1em;
	padding: 6px 14px; border-radius: var(--cx-radius-pill);
	margin-bottom: 14px;
}

.cx-galeria .page-hero__h1 {
	font-family: var(--cx-font-head);
	font-size: clamp(2.2rem, 4.2vw, 3.2rem);
	font-weight: 800; color: var(--cx-white); line-height: 1.15;
	margin-bottom: 16px;
}
.cx-galeria .page-hero__h1 .accent-gold { color: var(--cx-gold-light); }

.cx-galeria .page-hero__sub {
	font-size: 1.05rem; color: rgba(255,255,255,0.8);
	line-height: 1.7; max-width: 580px; margin: 0 auto;
}

/* ---- Seccion de galeria (filtros + grid) ---- */
.cx-galeria .gallery-section {
	padding: 64px 0 84px;
	background: var(--cx-white);
}

.cx-galeria .empty-state {
	text-align: center;
	color: var(--cx-text-muted);
	padding: 40px 0;
}

/* ---- Filtros ---- */
.cx-galeria .filter-bar {
	display: flex;
	justify-content: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 40px;
}
.cx-galeria .filter-btn {
	font-family: var(--cx-font-head);
	font-weight: 700;
	font-size: 0.86rem;
	padding: 10px 22px;
	border-radius: var(--cx-radius-pill);
	border: 1px solid var(--cx-sand-deep);
	background: var(--cx-white);
	color: var(--cx-navy);
	transition: var(--cx-transition);
	cursor: pointer;
}
.cx-galeria .filter-btn:hover {
	background: var(--cx-cream);
	border-color: var(--cx-gold);
}
.cx-galeria .filter-btn.active {
	background: var(--cx-navy);
	color: var(--cx-white);
	border-color: var(--cx-navy);
	box-shadow: 0 4px 14px rgba(26,43,74,0.25);
}

/* ---- Grid de fotos ---- */
.cx-galeria .gallery-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 24px;
}
.cx-galeria .gallery-item {
	border-radius: var(--cx-radius-md);
	overflow: hidden;
	position: relative;
	box-shadow: var(--cx-shadow-card);
	cursor: pointer;
	background: var(--cx-navy);
	aspect-ratio: 4 / 3;
	transition: transform var(--cx-transition), box-shadow var(--cx-transition);
}
.cx-galeria .gallery-item:hover {
	transform: translateY(-5px);
	box-shadow: var(--cx-shadow-float);
}
.cx-galeria .gallery-item img {
	width: 100%; height: 100%;
	object-fit: cover; display: block;
	transition: transform 0.5s ease;
}
.cx-galeria .gallery-item:hover img {
	transform: scale(1.06);
}
.cx-galeria .gallery-item__overlay {
	position: absolute; inset: 0;
	background: linear-gradient(0deg, rgba(15,28,48,0.88) 0%, rgba(15,28,48,0.2) 60%, transparent 100%);
	opacity: 0.9;
	transition: opacity var(--cx-transition);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 20px;
}
.cx-galeria .gallery-item__badge {
	display: inline-block;
	width: fit-content;
	background: var(--cx-gold);
	color: var(--cx-white);
	font-family: var(--cx-font-head);
	font-size: 0.7rem; font-weight: 700;
	padding: 3px 8px; border-radius: var(--cx-radius-pill);
	text-transform: uppercase; letter-spacing: 0.05em;
	margin-bottom: 6px;
}
.cx-galeria .gallery-item__title {
	color: var(--cx-white);
	font-family: var(--cx-font-head);
	font-weight: 700; font-size: 0.95rem; line-height: 1.3;
}
.cx-galeria .gallery-item__desc {
	color: rgba(255,255,255,0.72);
	font-size: 0.8rem; margin-top: 3px;
}

/* ---- Lightbox modal ---- */
.cx-galeria .lightbox-modal {
	position: fixed;
	inset: 0;
	background: rgba(10,18,32,0.94);
	backdrop-filter: blur(12px);
	z-index: 10000;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 24px;
	opacity: 0;
	transition: opacity 0.3s ease;
}
.cx-galeria .lightbox-modal.active {
	display: flex;
	opacity: 1;
}
.cx-galeria .lightbox-content {
	max-width: 900px;
	width: 100%;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.cx-galeria .lightbox-img-frame {
	max-height: 75vh;
	max-width: 100%;
	border-radius: var(--cx-radius-md);
	overflow: hidden;
	box-shadow: 0 20px 60px rgba(0,0,0,0.6);
	border: 1px solid rgba(255,255,255,0.15);
}
.cx-galeria .lightbox-img-frame img {
	max-height: 75vh;
	max-width: 100%;
	object-fit: contain;
	display: block;
}
.cx-galeria .lightbox-caption {
	margin-top: 16px;
	text-align: center;
	color: var(--cx-white);
	font-family: var(--cx-font-head);
}
.cx-galeria .lightbox-caption__title {
	font-weight: 800; font-size: 1.15rem; color: var(--cx-gold-light);
}
.cx-galeria .lightbox-caption__sub {
	font-size: 0.88rem; color: rgba(255,255,255,0.75); margin-top: 4px;
}
.cx-galeria .lightbox-close {
	position: absolute;
	top: -46px; right: 0;
	color: var(--cx-white);
	font-size: 2rem;
	background: none; border: none; cursor: pointer;
	line-height: 1; padding: 6px;
	transition: color var(--cx-transition);
}
.cx-galeria .lightbox-close:hover { color: var(--cx-gold-light); }

.cx-galeria .lightbox-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 48px; height: 48px;
	border-radius: 50%;
	background: rgba(255,255,255,0.15);
	backdrop-filter: blur(8px);
	color: var(--cx-white);
	display: flex; align-items: center; justify-content: center;
	cursor: pointer; border: none; font-size: 1.4rem;
	transition: background var(--cx-transition);
}
.cx-galeria .lightbox-nav:hover { background: var(--cx-gold); }
.cx-galeria .lightbox-nav--prev { left: -64px; }
.cx-galeria .lightbox-nav--next { right: -64px; }

/* ---- CTA band ---- */
.cx-galeria .cta-band {
	background: linear-gradient(135deg, var(--cx-navy) 0%, #15243d 100%);
	padding: 72px 0; text-align: center; position: relative; overflow: hidden;
}
.cx-galeria .cta-band::before {
	content: '';
	position: absolute; inset: 0;
	background: radial-gradient(circle at 50% 50%, rgba(201,146,42,0.16) 0%, transparent 60%);
	pointer-events: none;
}
.cx-galeria .cta-band .container { position: relative; z-index: 1; }
.cx-galeria .cta-band__pill {
	display: inline-flex; align-items: center; gap: 8px;
	background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.18);
	color: var(--cx-gold-light); font-family: var(--cx-font-head); font-size: 0.72rem;
	font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
	padding: 6px 16px; border-radius: var(--cx-radius-pill); margin-bottom: 20px;
}
.cx-galeria .cta-band__title {
	font-family: var(--cx-font-head); font-size: clamp(1.8rem, 3.8vw, 2.6rem);
	font-weight: 800; color: var(--cx-white); line-height: 1.2; margin-bottom: 14px;
}
.cx-galeria .cta-band__sub {
	font-size: 1.05rem; color: rgba(255,255,255,0.78);
	margin-bottom: 34px; max-width: 580px; margin-inline: auto;
}
.cx-galeria .cta-band__actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* ==========================================================================
   RESPONSIVE -- mismos cortes que trae la referencia (991/768), mas el
   ajuste propio del filtro y del hero en movil, mismo patron que los
   ambitos anteriores.
   ========================================================================== */
@media (max-width: 991px) {
	.cx-galeria .lightbox-nav--prev { left: 10px; }
	.cx-galeria .lightbox-nav--next { right: 10px; }
}
@media (max-width: 768px) {
	.cx-galeria .page-hero { padding: 54px 0 44px; }
	.cx-galeria .gallery-section { padding: 44px 0 64px; }
	.cx-galeria .filter-bar { gap: 8px; margin-bottom: 28px; }
	.cx-galeria .filter-btn { padding: 8px 16px; font-size: 0.8rem; }
	.cx-galeria .gallery-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
	.cx-galeria .lightbox-content { max-width: 100%; }
}

/* ==========================================================================
   MIGRACION ADMISIONES -- feature 85 (`web-migrar-admisiones-a-antigravity`,
   29 ago 2026, peticion directa del cliente). Continua los bloques de las
   features 70-76 que hay justo encima.

   Todo lo de aqui abajo viene de PORTAR (leer, nunca editar ni desplegar) el
   bloque de estilos en linea (lineas 108-565) de
   C:\Users\dmedi\Downloads\Web-3D-craftsman-school\Web-3D\admisiones\index.html

   TODO VA BAJO EL AMBITO `.cx-admisiones`, mismo razonamiento que
   `.cx-home`, `.cx-preescolar`, `.cx-primaria`, `.cx-nosotros`,
   `.cx-contacto` y `.cx-galeria`. `page-admisiones.php` pone la clase
   `cx-admisiones` en su elemento `main`, asi que nada de esto puede
   filtrarse a otra pagina publica ni a `body.cs-shell-body` (el portal).

   Los tokens siguen siendo los `--cx-*` que ya existen (bloque de la feature
   70): esta feature no crea ni un prefijo nuevo, y no redefine ninguno.

   NO se portan del prototipo: sus reglas de `.float-stack` y `.float-btn`
   (esos botones flotantes ya viven en `footer.php` y tienen su CSS global mas
   arriba), ni las de `.topbar`, `.header` y el pie, que resuelven
   `header.php` y `footer.php` desde las features 70 y 78.

   La animacion del punto del distintivo del hero se llama `cxPulseDot` y no
   `pulseDot` como en el prototipo: los bloques de fotogramas clave NO se
   pueden acotar a un ambito, asi que un nombre generico podria chocar con
   otro bloque de este mismo archivo.

   AVISO PARA QUIEN EDITE ESTE ARCHIVO: no escribas nunca la notacion de
   barra y asterisco entre dos nombres de clase dentro de un comentario --
   esa secuencia CIERRA el comentario a mitad de frase y mata en silencio las
   reglas siguientes, sin que `php -l` ni `init.sh` lo detecten (es CSS, no
   PHP). Separa los nombres con comas y comprueba el balance de aperturas
   contra cierres sobre el archivo entero antes de dar nada por bueno.
   ========================================================================== */

/* ---- Reset local: mismo patron que los ambitos anteriores ---- */
.cx-admisiones h1,
.cx-admisiones h2,
.cx-admisiones h3,
.cx-admisiones h4,
.cx-admisiones p,
.cx-admisiones ul {
	margin: 0;
	padding: 0;
}
.cx-admisiones ul {
	list-style: none;
}
.cx-admisiones {
	font-family: var(--cx-font-body);
	color: var(--cx-text);
}
.cx-admisiones button {
	cursor: pointer;
	border: none;
	background: none;
	font-family: inherit;
}

/* ---- Utilidades reutilizadas de los ambitos anteriores, repetidas bajo este
   ambito propio (mismos valores, cero colision posible: los selectores de
   estos bloques no comparten ancestro) ---- */
.cx-admisiones .container {
	max-width: var(--cx-container);
	margin: 0 auto;
	padding: 0 1.5rem;
}

.cx-admisiones .btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 14px 28px;
	border-radius: var(--cx-radius-pill);
	font-family: var(--cx-font-head);
	font-size: 0.95rem;
	font-weight: 700;
	transition: var(--cx-transition);
	white-space: nowrap;
}
.cx-admisiones .btn svg { flex-shrink: 0; }
.cx-admisiones .btn--primary {
	background: var(--cx-gold);
	color: var(--cx-white);
	border: none;
	box-shadow: 0 4px 20px rgba(201, 146, 42, 0.35);
}
.cx-admisiones .btn--primary:hover {
	background: var(--cx-gold-light);
	color: var(--cx-white);
	box-shadow: 0 8px 30px rgba(201, 146, 42, 0.50);
	transform: translateY(-2px);
}
.cx-admisiones .btn--outline {
	border: 2px solid var(--cx-navy);
	color: var(--cx-navy);
	background: transparent;
}
.cx-admisiones .btn--outline:hover {
	background: var(--cx-navy);
	color: var(--cx-white);
	transform: translateY(-2px);
}
.cx-admisiones .btn--outline-white {
	border: 2px solid rgba(255,255,255,0.6);
	color: var(--cx-white);
	background: transparent;
}
.cx-admisiones .btn--outline-white:hover {
	background: rgba(255,255,255,0.15);
	border-color: var(--cx-white);
	color: var(--cx-white);
	transform: translateY(-2px);
}

/* ---- Scroll-reveal: mismo patron que los ambitos anteriores, mismo JS ---- */
.cx-admisiones .reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
	            transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.cx-admisiones .reveal.visible { opacity: 1; transform: translateY(0); }
.cx-admisiones .reveal-delay-1 { transition-delay: 0.1s; }
.cx-admisiones .reveal-delay-2 { transition-delay: 0.2s; }
.cx-admisiones .reveal-delay-3 { transition-delay: 0.3s; }

@media (prefers-reduced-motion: reduce) {
	.cx-admisiones .reveal { opacity: 1; transform: none; transition: none; }
	.cx-admisiones .hero-badge-live__dot { animation: none; }
}
html:not(.js-loaded) .cx-admisiones .reveal { opacity: 1; transform: none; }

/* ==========================================================================
   PAGE-HERO ADMISIONES
   ========================================================================== */
.cx-admisiones .page-hero {
	background: linear-gradient(145deg, #101c30 0%, var(--cx-navy) 60%, #253b60 100%);
	padding: 76px 0 64px;
	position: relative;
	overflow: hidden;
}
.cx-admisiones .page-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 80% 20%, rgba(201,146,42,0.18) 0%, transparent 50%),
	            radial-gradient(circle at 10% 80%, rgba(42,181,164,0.12) 0%, transparent 45%);
	pointer-events: none;
}
.cx-admisiones .page-hero .container { position: relative; z-index: 2; }
.cx-admisiones .page-hero__inner {
	display: grid;
	grid-template-columns: 1.2fr 0.8fr;
	gap: 48px;
	align-items: center;
}
.cx-admisiones .page-hero__breadcrumb {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.82rem;
	color: rgba(255,255,255,0.55);
	margin-bottom: 18px;
	font-family: var(--cx-font-head);
}
.cx-admisiones .page-hero__breadcrumb a { color: rgba(255,255,255,0.55); }
.cx-admisiones .page-hero__breadcrumb a:hover { color: var(--cx-gold-light); }
.cx-admisiones .page-hero__breadcrumb span { color: rgba(255,255,255,0.3); }

.cx-admisiones .hero-badge-live {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(201,146,42,0.18);
	border: 1px solid rgba(201,146,42,0.4);
	color: var(--cx-gold-light);
	font-family: var(--cx-font-head);
	font-size: 0.76rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 6px 16px;
	border-radius: var(--cx-radius-pill);
	margin-bottom: 20px;
}
.cx-admisiones .hero-badge-live__dot {
	width: 8px;
	height: 8px;
	background: #25D366;
	border-radius: 50%;
	box-shadow: 0 0 10px #25D366;
	animation: cxPulseDot 2s infinite;
	flex-shrink: 0;
}
@keyframes cxPulseDot {
	0%, 100% { transform: scale(1); opacity: 1; }
	50% { transform: scale(1.3); opacity: 0.6; }
}

.cx-admisiones .page-hero__h1 {
	font-family: var(--cx-font-head);
	font-size: clamp(2.2rem, 4.2vw, 3.4rem);
	font-weight: 800;
	color: var(--cx-white);
	line-height: 1.15;
	margin-bottom: 20px;
}
.cx-admisiones .page-hero__h1 .accent-gold { color: var(--cx-gold-light); }
.cx-admisiones .page-hero__h1 .accent-teal { color: var(--cx-teal); }

.cx-admisiones .page-hero__sub {
	font-size: 1.05rem;
	color: rgba(255,255,255,0.8);
	line-height: 1.7;
	margin-bottom: 32px;
	max-width: 540px;
}
.cx-admisiones .page-hero__actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* ---- Tarjeta lateral del hero ---- */
.cx-admisiones .hero-card-side {
	background: rgba(255,255,255,0.06);
	border: 1px solid rgba(255,255,255,0.12);
	backdrop-filter: blur(14px);
	border-radius: var(--cx-radius-xl);
	padding: 32px 28px;
	color: var(--cx-white);
	box-shadow: 0 20px 50px rgba(0,0,0,0.3);
	position: relative;
}
.cx-admisiones .hero-card-side__title {
	font-family: var(--cx-font-head);
	font-weight: 800;
	font-size: 1.25rem;
	color: var(--cx-gold-light);
	margin-bottom: 12px;
}
.cx-admisiones .hero-card-side__list {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-bottom: 24px;
}
.cx-admisiones .hero-card-side__item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: 0.92rem;
	color: rgba(255,255,255,0.85);
	line-height: 1.45;
}
.cx-admisiones .hero-card-side__item-icon {
	color: var(--cx-teal);
	flex-shrink: 0;
	font-size: 1.1rem;
}
.cx-admisiones .hero-card-side__note {
	font-size: 0.8rem;
	color: rgba(255,255,255,0.6);
	margin: 0;
}

/* ==========================================================================
   AYUDAS DE SECCION
   ========================================================================== */
.cx-admisiones .section { padding: 84px 0; }
.cx-admisiones .section--sand { background: var(--cx-sand); }
.cx-admisiones .section--cream { background: var(--cx-cream); }
.cx-admisiones .section--white { background: var(--cx-white); }
.cx-admisiones .section--navy { background: var(--cx-navy); }
.cx-admisiones .section--navy-deep { background: var(--cx-navy-deep); }

.cx-admisiones .section-tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--cx-font-head);
	font-size: 0.74rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	padding: 6px 14px;
	border-radius: var(--cx-radius-pill);
	margin-bottom: 14px;
}
.cx-admisiones .section-tag--gold { background: var(--cx-gold-pale); color: var(--cx-gold); }
.cx-admisiones .section-tag--teal { background: var(--cx-teal-light); color: var(--cx-teal); }
.cx-admisiones .section-tag--navy-inv { background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.9); }

.cx-admisiones .section-header { text-align: center; max-width: 620px; margin: 0 auto 48px; }
.cx-admisiones .section-heading {
	font-family: var(--cx-font-head);
	font-size: clamp(1.9rem, 3.5vw, 2.8rem);
	font-weight: 800;
	line-height: 1.2;
	color: var(--cx-navy);
	margin-bottom: 16px;
}
.cx-admisiones .section-subtext {
	font-size: 1.05rem;
	color: var(--cx-text-muted);
	line-height: 1.7;
	max-width: 560px;
	margin: 0 auto;
}
/* Dentro de una cabecera centrada, el subtitulo separa del titulo. Sustituye
   al estilo en linea `margin:12px auto 0` del marcado de referencia. */
.cx-admisiones .section-header .section-subtext { margin: 12px auto 0; }
/* Variantes alineadas a la izquierda: el bloque de acompanamiento usa los
   mismos dos componentes fuera de una cabecera centrada. */
.cx-admisiones .section-heading--left {
	font-size: clamp(1.6rem, 3vw, 2.3rem);
	margin-bottom: 20px;
}
.cx-admisiones .section-subtext--left { max-width: none; margin: 0; }

/* ==========================================================================
   LINEA DE TIEMPO DE 3 PASOS
   ========================================================================== */
.cx-admisiones .steps-timeline {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
	position: relative;
	margin-top: 24px;
}
.cx-admisiones .step-card {
	background: var(--cx-white);
	border-radius: var(--cx-radius-lg);
	padding: 36px 28px;
	box-shadow: var(--cx-shadow-card);
	position: relative;
	transition: transform var(--cx-transition), box-shadow var(--cx-transition);
	display: flex;
	flex-direction: column;
}
.cx-admisiones .step-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--cx-shadow-float);
}
.cx-admisiones .step-card__badge {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--cx-navy);
	color: var(--cx-gold-light);
	font-family: var(--cx-font-head);
	font-weight: 800;
	font-size: 1.2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 20px;
	box-shadow: 0 4px 14px rgba(26,43,74,0.25);
}
.cx-admisiones .step-card:nth-child(2) .step-card__badge {
	background: var(--cx-gold);
	color: var(--cx-white);
}
.cx-admisiones .step-card:nth-child(3) .step-card__badge {
	background: var(--cx-teal);
	color: var(--cx-white);
}
.cx-admisiones .step-card__title {
	font-family: var(--cx-font-head);
	font-weight: 800;
	font-size: 1.2rem;
	color: var(--cx-navy);
	margin-bottom: 12px;
}
.cx-admisiones .step-card__desc {
	font-size: 0.93rem;
	color: var(--cx-text-muted);
	line-height: 1.65;
	margin-bottom: 20px;
	flex-grow: 1;
}
.cx-admisiones .step-card__meta {
	padding-top: 16px;
	border-top: 1px solid var(--cx-sand);
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--cx-navy);
	display: flex;
	align-items: center;
	gap: 8px;
}

/* ==========================================================================
   REQUISITOS POR NIVEL
   ========================================================================== */
.cx-admisiones .requirements-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
}
.cx-admisiones .req-box {
	background: var(--cx-white);
	border-radius: var(--cx-radius-lg);
	padding: 36px 32px;
	box-shadow: var(--cx-shadow-card);
	border-top: 4px solid var(--cx-gold);
}
.cx-admisiones .req-box--primaria { border-top-color: var(--cx-navy); }
.cx-admisiones .req-box__header {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 24px;
}
.cx-admisiones .req-box__icon {
	width: 52px;
	height: 52px;
	border-radius: var(--cx-radius-md);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.6rem;
	flex-shrink: 0;
}
.cx-admisiones .req-box__icon--gold { background: var(--cx-gold-pale); }
.cx-admisiones .req-box__icon--navy { background: var(--cx-sand); color: var(--cx-navy); }
.cx-admisiones .req-box__title {
	font-family: var(--cx-font-head);
	font-weight: 800;
	font-size: 1.25rem;
	color: var(--cx-navy);
}
.cx-admisiones .req-box__sub { font-size: 0.84rem; color: var(--cx-text-muted); }

.cx-admisiones .req-list {
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.cx-admisiones .req-item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: 0.93rem;
	color: var(--cx-text);
	line-height: 1.5;
}
.cx-admisiones .req-item__check {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--cx-teal-light);
	color: var(--cx-teal);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	margin-top: 1px;
}

/* ==========================================================================
   ACOMPANAMIENTO (foto y promesa)
   ========================================================================== */
.cx-admisiones .reassurance-split {
	display: grid;
	grid-template-columns: 1fr 1.1fr;
	gap: 56px;
	align-items: center;
}
.cx-admisiones .reassurance-img-wrapper {
	position: relative;
	border-radius: var(--cx-radius-xl);
	overflow: hidden;
	box-shadow: var(--cx-shadow-float);
}
.cx-admisiones .reassurance-img-wrapper img {
	width: 100%;
	height: 420px;
	object-fit: cover;
	display: block;
}
.cx-admisiones .reassurance-badge {
	position: absolute;
	bottom: 20px;
	right: 20px;
	background: rgba(26,43,74,0.9);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255,255,255,0.15);
	border-radius: 14px;
	padding: 14px 20px;
	color: var(--cx-white);
	max-width: 260px;
}
.cx-admisiones .reassurance-badge__title {
	font-family: var(--cx-font-head);
	font-weight: 700;
	font-size: 0.88rem;
	color: var(--cx-gold-light);
	margin-bottom: 4px;
}
.cx-admisiones .reassurance-badge__text {
	font-size: 0.78rem;
	color: rgba(255,255,255,0.75);
	line-height: 1.35;
}
.cx-admisiones .reassurance-text__p { margin-bottom: 20px; }
.cx-admisiones .reassurance-text__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 28px;
}

/* ==========================================================================
   PRECIOS Y PROPUESTA DE VALOR
   ========================================================================== */
.cx-admisiones .pricing-section {
	background: var(--cx-cream);
	border: 1px solid var(--cx-sand-deep);
	border-radius: var(--cx-radius-xl);
	padding: 44px 36px;
	margin-top: 56px;
}
.cx-admisiones .pricing-header-block {
	text-align: center;
	margin-bottom: 36px;
}
.cx-admisiones .pricing-header-block__tag {
	display: inline-block;
	background: rgba(42,181,164,0.1);
	color: var(--cx-teal);
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 4px 12px;
	border-radius: var(--cx-radius-pill);
	margin-bottom: 12px;
}
.cx-admisiones .pricing-header-block__title {
	font-family: var(--cx-font-head);
	font-weight: 800;
	font-size: 1.6rem;
	color: var(--cx-navy);
	margin-bottom: 8px;
}
.cx-admisiones .pricing-header-block__sub {
	font-size: 0.92rem;
	color: var(--cx-text-muted);
}
.cx-admisiones .pricing-cards-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin-bottom: 36px;
}
.cx-admisiones .price-card {
	background: var(--cx-white);
	border: 1px solid var(--cx-sand-deep);
	border-radius: var(--cx-radius-lg);
	padding: 28px 20px;
	text-align: center;
	box-shadow: 0 4px 12px rgba(0,0,0,0.01);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	position: relative;
}
.cx-admisiones .price-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 24px rgba(0,0,0,0.04);
}
.cx-admisiones .price-card--featured {
	border: 2px solid var(--cx-gold);
}
.cx-admisiones .price-card__badge {
	position: absolute;
	top: -12px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--cx-gold);
	color: var(--cx-navy);
	font-size: 0.65rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 2px 10px;
	border-radius: var(--cx-radius-pill);
	white-space: nowrap;
}
.cx-admisiones .price-card__label {
	font-size: 0.8rem;
	color: var(--cx-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: 12px;
	display: block;
}
.cx-admisiones .price-card__amount {
	font-family: var(--cx-font-head);
	font-size: 2.2rem;
	font-weight: 800;
	color: var(--cx-navy);
	line-height: 1.1;
	margin-bottom: 6px;
	display: block;
}
.cx-admisiones .price-card__period {
	font-size: 0.8rem;
	color: var(--cx-text-muted);
	display: block;
}
.cx-admisiones .value-box {
	background: var(--cx-white);
	border-radius: var(--cx-radius-lg);
	padding: 28px 32px;
	border: 1px solid var(--cx-sand-deep);
	margin-bottom: 12px;
}
.cx-admisiones .value-box__title {
	font-family: var(--cx-font-head);
	font-weight: 800;
	font-size: 1.1rem;
	color: var(--cx-navy);
	margin-bottom: 20px;
	text-align: center;
}
.cx-admisiones .value-box__list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}
.cx-admisiones .value-box__item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 0.88rem;
	color: var(--cx-text-muted);
	line-height: 1.4;
}
.cx-admisiones .value-box__icon {
	color: var(--cx-teal);
	font-weight: 800;
	font-size: 1rem;
}
/* Cierre de la seccion de precios. Sustituye a los tres estilos en linea que
   el marcado de referencia pone en este bloque. */
.cx-admisiones .pricing-cta {
	text-align: center;
	margin-top: 28px;
}
.cx-admisiones .pricing-cta__text {
	font-size: 0.92rem;
	color: var(--cx-text-muted);
	margin-bottom: 16px;
}
.cx-admisiones .pricing-cta__btn {
	justify-content: center;
	max-width: 320px;
	margin: 0 auto;
}

/* ==========================================================================
   FAQ (acordeon). El estado abierto o cerrado vive en [aria-expanded] del
   boton y en [hidden] de la respuesta, que es lo que escribe main.js (feature
   71) -- no en las clases .active y .open con altura maxima del prototipo.

   Clases faq__item, faq__question, faq__answer, faq__icon a proposito, NO las
   `faq-item__*` del marcado de referencia: main.js selecciona
   `.faq__question` y toma como respuesta el hermano siguiente del boton.
   Mismo mecanismo que ya usan front-page.php, page-preescolar.php y
   page-primaria.php.
   ========================================================================== */
.cx-admisiones .faq-list { max-width: 760px; margin: 0 auto; }
.cx-admisiones .faq__item {
	border: 1px solid var(--cx-sand-deep);
	border-radius: var(--cx-radius-md);
	margin-bottom: 14px;
	overflow: hidden;
	background: var(--cx-white);
}
.cx-admisiones .faq__question {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: space-between;
	padding: 20px 26px;
	cursor: pointer;
	font-family: var(--cx-font-head);
	font-weight: 700;
	font-size: 1rem;
	color: var(--cx-navy);
	gap: 16px;
	text-align: left;
	transition: background var(--cx-transition);
}
.cx-admisiones .faq__question:hover { background: var(--cx-cream); }
.cx-admisiones .faq__question[aria-expanded="true"] { background: var(--cx-cream); }
.cx-admisiones .faq__icon {
	width: 22px;
	height: 22px;
	flex-shrink: 0;
	color: var(--cx-gold);
	transition: transform var(--cx-transition);
}
.cx-admisiones .faq__question[aria-expanded="true"] .faq__icon { transform: rotate(180deg); }
.cx-admisiones .faq__answer {
	padding: 4px 26px 22px;
	font-size: 0.94rem;
	color: var(--cx-text-muted);
	line-height: 1.7;
}
.cx-admisiones .faq__answer p { margin-bottom: 0; }
.cx-admisiones .faq__answer a { color: var(--cx-gold); font-weight: 600; }
.cx-admisiones .faq__answer a:hover { color: var(--cx-navy); }
.cx-admisiones .faq__answer[hidden] { display: none; }

/* ==========================================================================
   CTA FINAL
   ========================================================================== */
.cx-admisiones .cta-band {
	background: linear-gradient(135deg, var(--cx-navy) 0%, #15243d 100%);
	padding: 72px 0;
	text-align: center;
	position: relative;
	overflow: hidden;
}
.cx-admisiones .cta-band::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 50% 50%, rgba(201,146,42,0.16) 0%, transparent 60%);
	pointer-events: none;
}
.cx-admisiones .cta-band .container { position: relative; z-index: 1; }
.cx-admisiones .cta-band__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(255,255,255,0.1);
	border: 1px solid rgba(255,255,255,0.18);
	color: var(--cx-gold-light);
	font-family: var(--cx-font-head);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 6px 16px;
	border-radius: var(--cx-radius-pill);
	margin-bottom: 20px;
}
.cx-admisiones .cta-band__title {
	font-family: var(--cx-font-head);
	font-size: clamp(1.8rem, 3.8vw, 2.6rem);
	font-weight: 800;
	color: var(--cx-white);
	line-height: 1.2;
	margin-bottom: 14px;
}
.cx-admisiones .cta-band__sub {
	font-size: 1.05rem;
	color: rgba(255,255,255,0.78);
	margin-bottom: 34px;
	max-width: 580px;
	margin-inline: auto;
}
.cx-admisiones .cta-band__actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* ==========================================================================
   RESPONSIVE -- los dos cortes que trae la referencia (991 y 768), mas un
   tercero propio en 480 para que los botones y las cajas no se corten en los
   moviles mas estrechos (375 px medido).
   ========================================================================== */
@media (max-width: 991px) {
	.cx-admisiones .page-hero__inner { grid-template-columns: 1fr; }
	.cx-admisiones .steps-timeline { grid-template-columns: 1fr; }
	.cx-admisiones .requirements-grid { grid-template-columns: 1fr; }
	.cx-admisiones .reassurance-split { grid-template-columns: 1fr; gap: 40px; }
	.cx-admisiones .pricing-cards-grid { grid-template-columns: 1fr; gap: 20px; }
	.cx-admisiones .value-box__list { grid-template-columns: 1fr; gap: 12px; }
}
@media (max-width: 768px) {
	.cx-admisiones .page-hero { padding: 56px 0 48px; }
	.cx-admisiones .section { padding: 60px 0; }
	.cx-admisiones .cta-band { padding: 54px 0; }
	.cx-admisiones .pricing-section { padding: 32px 20px; }
	.cx-admisiones .req-box { padding: 28px 22px; }
	.cx-admisiones .value-box { padding: 24px 20px; }
	.cx-admisiones .reassurance-img-wrapper img { height: 320px; }
}
@media (max-width: 480px) {
	.cx-admisiones .page-hero__actions .btn,
	.cx-admisiones .cta-band__actions .btn,
	.cx-admisiones .reassurance-text__actions .btn {
		width: 100%;
		justify-content: center;
		white-space: normal;
	}
	.cx-admisiones .hero-card-side { padding: 24px 20px; }
	.cx-admisiones .faq__question { padding: 16px 18px; font-size: 0.93rem; }
	.cx-admisiones .faq__answer { padding: 4px 18px 18px; }
}