/* =============================================================================
   CESCOLAR — sistema de diseño "El salón"
   =============================================================================
   Público: el COLEGIO PARTICULAR completo, de kínder a prepa. Quien firma es
   la dueña o directora. Pero quien decide si el sistema vive o muere son sus
   MAESTRAS y sus PAPÁS — y ella lo sabe. Por eso esta página tiene que
   convencer a los tres, y su miedo real no es el precio: es que nadie lo use.

   POR QUÉ ESTA PÁGINA SÍ TIENE COLOR
   La versión anterior de este archivo era un fichero de manila: austera,
   correcta, adulta. Argumentaba que "la directora no tiene cinco años". El
   argumento estaba mal, y así lo dijo el cliente. Una directora que ve un
   archivero piensa "esto mis maestras no lo van a agarrar", y ahí se acabó la
   venta — antes de llegar al precio. Aquí el color no es adorno: es la promesa
   de adopción, dicha sin palabras.

   CÓMO SE HACE INFANTIL SIN CAER EN EL CLIPART
   Todo el software escolar de básica en México se ve igual: azul corporativo y
   niños de caricatura. Eso no es del salón, es de un banco de imágenes. La
   salida honesta es usar los MATERIALES reales del salón, no dibujos de niños:

     · el PAPEL LUSTRE  -> los bloques de color planos y saturados
     · el STICKER de la maestra -> las etiquetas, ladeadas como recién pegadas
     · el CORCHO del salón -> las tarjetas van con una inclinación mínima,
       como hojas prendidas con chinche. Nunca más de 1.5deg: pasado eso ya
       no es encanto, es un error de maquetación.
     · la PALOMITA roja -> el ✓ de las listas

   Disciplina de los dispositivos (respétala o el sistema se cae):
     · bloque a color completo -> SOLO dos veces en la página: el mecanismo y
       el cierre. Es lo que les da su golpe. Un tercero y los tres se apagan.
     · círculo de número -> solo en las tarjetas del problema
     · el ladeo -> solo en stickers y tarjetas del problema, jamás en texto
       corrido ni en nada que se tenga que leer largo
     · el color de sección se hereda por --c: cada bloque lo define UNA vez y
       sus hijos lo consumen. No pintes componentes a mano.

   TEMA ÚNICO CLARO, a propósito: el salón tiene luz.

   TIPOGRAFÍA — LEER ANTES DE PRODUCCIÓN
   Candara (Windows) es cálida y humanista, y es la que le da el carácter. En
   Apple cae a Avenir Next, en el resto a system-ui — legible siempre, pero no
   es la misma página. Si esta dirección va a producción, hay que licenciar una
   redonda de verdad (Nunito, Quicksand, Baloo 2) y servirla desde
   cdn.dhomper.com. Se cambia --f-display y ya: ningún componente nombra una
   fuente directamente.
   ============================================================================= */

:root {
	/* --- papel y tinta ------------------------------------------------------ */
	--paper:   #fffcf7;   /* blanco cálido, no crema */
	--paper-2: #fff7ec;
	--card:    #ffffff;
	--ink:     #23262f;
	--muted:   #6b6f7d;
	--line:    #efe7da;

	/* --- los colores del salón: papel lustre, planos y saturados ------------ */
	--coral: #f0563a;
	--sun:   #ffb627;
	--leaf:  #21a179;
	--sky:   #3d7ee8;
	--grape: #8b5fbf;

	/* color de sección. Cada bloque lo redefine; los hijos lo consumen. */
	--c:     var(--coral);
	--c-ink: #ffffff;   /* texto que va ENCIMA de --c */

	/* --- tipografía --------------------------------------------------------- */
	--f-display: Candara, "Avenir Next", "Segoe UI Variable Display", "Trebuchet MS", system-ui, sans-serif;
	--f-ui:      "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif;

	/* --- forma y medida ----------------------------------------------------- */
	--r:      16px;
	--r-lg:   26px;
	--r-pill: 999px;
	--wrap:   1080px;
	--gap:    1.5rem;
	--shadow: 0 2px 0 rgba(35,38,47,.06), 0 12px 28px -12px rgba(35,38,47,.18);
	--shadow-up: 0 4px 0 rgba(35,38,47,.06), 0 22px 40px -14px rgba(35,38,47,.26);
}

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

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

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--f-ui);
	font-size: 1.02rem;
	line-height: 1.62;
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }
a { color: inherit; }

:where(a, button):focus-visible {
	outline: 3px solid var(--sky);
	outline-offset: 3px;
	border-radius: 4px;
}

/* =============================================================================
   Tipografía
   ============================================================================= */
h1, h2, h3 { font-family: var(--f-display); text-wrap: balance; }

h1 {
	font-weight: 700;
	font-size: clamp(2.5rem, 6vw, 4.4rem);
	line-height: 1.02;
	letter-spacing: -.025em;
	margin: 0 0 1.2rem;
	max-width: 17ch;
}

h2 {
	font-weight: 700;
	font-size: clamp(1.8rem, 3.8vw, 2.8rem);
	line-height: 1.08;
	letter-spacing: -.02em;
	margin: 0 0 1rem;
	max-width: 22ch;
}

h3 {
	font-weight: 700;
	font-size: 1.12rem;
	line-height: 1.3;
	letter-spacing: -.01em;
	margin: 0 0 .4rem;
}

p { margin: 0 0 1rem; max-width: 62ch; }
p:last-child { margin-bottom: 0; }
strong { font-weight: 700; }

.sub  { font-size: 1.15rem; color: var(--muted); max-width: 58ch; }
.lead { font-size: 1.15rem; }
.fine { font-size: .85rem; color: var(--muted); max-width: none; }

/* =============================================================================
   El sticker: la etiqueta de sección, ladeada como recién pegada
   ============================================================================= */
.sticker {
	display: inline-block;
	background: var(--c);
	color: var(--c-ink);
	font-family: var(--f-ui);
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	padding: .45rem 1rem;
	border-radius: var(--r-pill);
	margin-bottom: 1.25rem;
	transform: rotate(-1.5deg);
}

/* =============================================================================
   Estructura
   ============================================================================= */
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gap); }
.sec  { padding: 3.5rem 0; }
.sec:last-of-type { padding-bottom: 5rem; }

/* =============================================================================
   Cabecera
   ============================================================================= */
.top {
	background: var(--paper);
	border-bottom: 2px solid var(--line);
	position: sticky;
	top: 0;
	z-index: 20;
}
.top-in {
	max-width: var(--wrap);
	margin: 0 auto;
	padding: .9rem var(--gap);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
}
.brand {
	display: flex;
	align-items: center;
	gap: .55rem;
	font-family: var(--f-display);
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: -.03em;
	text-decoration: none;
}
/* el punto de color de la marca: tres papelitos encimados */
.brand .dot {
	width: 26px; height: 26px;
	border-radius: 8px;
	background: var(--coral);
	box-shadow: 6px 0 0 -2px var(--sun), 12px 0 0 -4px var(--leaf);
	transform: rotate(-6deg);
	flex: none;
}
.brand small {
	font-size: .62rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--muted);
	margin-left: .5rem;
}
.top nav { display: flex; gap: 1.4rem; flex-wrap: wrap; align-items: center; }
.top nav a {
	font-size: .92rem;
	font-weight: 600;
	color: var(--muted);
	text-decoration: none;
}
.top nav a:hover { color: var(--ink); }
.top nav a.cta {
	background: var(--ink);
	color: var(--paper);
	padding: .5rem 1rem;
	border-radius: var(--r-pill);
}
.top nav a.cta:hover { background: var(--coral); color: #fff; }

/* =============================================================================
   Botones
   ============================================================================= */
.cta-row { display: flex; flex-wrap: wrap; gap: .7rem; margin: 1.8rem 0 1rem; }

.btn {
	font-family: var(--f-ui);
	font-size: 1.02rem;
	font-weight: 700;
	text-decoration: none;
	padding: .85rem 1.6rem;
	border-radius: var(--r-pill);
	border: 2px solid transparent;
	display: inline-block;
	cursor: pointer;
	transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}
.btn-1 { background: var(--coral); color: #fff; box-shadow: var(--shadow); }
.btn-1:hover { transform: translateY(-2px); box-shadow: var(--shadow-up); }
.btn-2 { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-2:hover { background: var(--ink); color: var(--paper); }
/* dentro de un bloque a color, los botones se invierten */
.block .btn-1 { background: #fff; color: var(--ink); }
.block .btn-2 { border-color: rgba(255,255,255,.75); color: #fff; }
.block .btn-2:hover { background: #fff; color: var(--ink); }

/* =============================================================================
   Hero
   ============================================================================= */
.hero { padding: 4rem 0 2.5rem; position: relative; overflow: hidden; }

/* -----------------------------------------------------------------------------
   Los papelitos flotando. Decorativos: aria-hidden en el HTML.

   Se mueven con las propiedades sueltas `translate` y `rotate`, NO con
   `transform`. Es a propósito: si el giro base viviera en transform, la
   animación lo pisaría y los papeles saltarían al arrancar. Así se componen.

   Las reglas que hacen que esto se sienta papel y no un salvapantallas:
     · recorridos de ~65px en 11 a 19 segundos. La primera versión andaba en
       25px y se sentía tímida: a esa distancia el ojo no registra que algo se
       movió, solo que algo "está raro". Si hay que subirle más, sube la
       DISTANCIA, no la velocidad — lo que molesta de una animación de fondo
       casi nunca es qué tan rápido va, sino cuánto se mueve de golpe.
     · duraciones primas (11/13/17/19) — nunca se vuelven a sincronizar. Dos
       papeles moviéndose al mismo ritmo se leen como máquina, no como papel.
     · el chico va más rápido que el grande (44px→11s, 120px→19s). Es el mismo
       truco del parallax: la diferencia de velocidad se lee como profundidad.
     · delays NEGATIVOS — cada uno arranca a media vuelta, así al cargar la
       página ya están en posiciones distintas en vez de salir todos juntos.
   ----------------------------------------------------------------------------- */
.hero .conf {
	position: absolute;
	border-radius: 10px;
	opacity: .5;
	pointer-events: none;
	rotate: var(--rot);
	will-change: translate, rotate;
	animation: flotar var(--dur) ease-in-out var(--delay) infinite alternate;
}
@keyframes flotar {
	from { translate: 0 0;                 rotate: var(--rot); }
	to   { translate: var(--dx) var(--dy); rotate: calc(var(--rot) + var(--drot)); }
}
.hero .conf:nth-of-type(1) {
	width: 90px; height: 90px; background: var(--sun); top: 8%; right: 6%;
	--rot: 14deg; --dx: -38px; --dy: 54px; --drot: -19deg; --dur: 17s; --delay: -3s;
}
.hero .conf:nth-of-type(2) {
	width: 56px; height: 56px; background: var(--leaf); top: 46%; right: 22%;
	--rot: -9deg; --dx: 48px; --dy: -42px; --drot: 17deg; --dur: 13s; --delay: -6s;
}
.hero .conf:nth-of-type(3) {
	width: 120px; height: 120px; background: var(--sky); bottom: 2%; right: 12%; opacity: .32;
	--rot: 7deg; --dx: -32px; --dy: -58px; --drot: 12deg; --dur: 19s; --delay: -1s;
}
.hero .conf:nth-of-type(4) {
	width: 44px; height: 44px; background: var(--grape); top: 22%; right: 34%;
	--rot: 20deg; --dx: 52px; --dy: 40px; --drot: -24deg; --dur: 11s; --delay: -8s;
}
@media (max-width: 900px) { .hero .conf { display: none; } }
.hero .wrap { position: relative; z-index: 1; }
.hero h1 mark {
	background: linear-gradient(to bottom, transparent 58%, var(--sun) 58%);
	color: inherit;
	padding: 0 .1em;
}

/* la tira de credencial */
.credencial {
	background: var(--paper-2);
	border: 2px solid var(--line);
	border-radius: var(--r);
	padding: 1rem 1.25rem;
	display: flex;
	flex-wrap: wrap;
	gap: .6rem 2rem;
	font-size: .9rem;
	color: var(--muted);
}
.credencial b { color: var(--ink); font-weight: 700; }

/* =============================================================================
   Tarjetas del problema — círculo de número, ladeo de corcho
   ============================================================================= */
.cards {
	margin-top: 2.25rem;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 1.75rem 1.5rem;
}
.card {
	background: var(--card);
	border: 2px solid var(--line);
	border-radius: var(--r-lg);
	padding: 2.1rem 1.5rem 1.5rem;
	position: relative;
	box-shadow: var(--shadow);
	transition: transform .14s ease, box-shadow .14s ease;
}
.card:hover { transform: translateY(-4px) rotate(0deg); box-shadow: var(--shadow-up); }
.card .n {
	position: absolute;
	top: -18px; left: 20px;
	width: 44px; height: 44px;
	border-radius: 12px;
	background: var(--c);
	color: var(--c-ink);
	font-family: var(--f-display);
	font-size: 1.15rem;
	font-weight: 700;
	display: grid;
	place-items: center;
	font-variant-numeric: tabular-nums;
	box-shadow: var(--shadow);
}
.card p { margin: 0; color: var(--muted); font-size: .95rem; }
/* el corcho: cada tarjeta cuelga con su propio ángulo, nunca el mismo */
.card:nth-child(3n+1) { transform: rotate(-.5deg); }
.card:nth-child(3n+2) { transform: rotate(.4deg); }
.card:nth-child(3n+3) { transform: rotate(-.25deg); }
/* los colores rotan por el salón */
.card:nth-child(5n+1) { --c: var(--coral); }
.card:nth-child(5n+2) { --c: var(--sun);   --c-ink: #4a2f00; }
.card:nth-child(5n+3) { --c: var(--leaf);  }
.card:nth-child(5n+4) { --c: var(--sky);   }
.card:nth-child(5n+5) { --c: var(--grape); }

/* =============================================================================
   Bloque a color — SOLO el mecanismo y el cierre
   ============================================================================= */
.block {
	background: var(--c);
	color: var(--c-ink);
	border-radius: var(--r-lg);
	padding: 3rem 2.25rem;
	margin-top: 1.75rem;
}
.block h2 { max-width: 26ch; }
.block p { color: rgba(255,255,255,.92); }
.block p strong, .block h2 strong { color: #fff; }
.block .sticker { background: #fff; color: var(--c); }

/* el remate del mecanismo: subrayado a mano, no otro bloque */
.punch {
	font-family: var(--f-display);
	font-size: clamp(1.3rem, 2.6vw, 1.9rem);
	font-weight: 700;
	letter-spacing: -.02em;
	color: #fff;
	display: inline-block;
	margin-top: 1.25rem;
	padding-bottom: .25rem;
	border-bottom: 5px solid var(--sun);
	line-height: 1.25;
	max-width: none;
}

.salidas { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.75rem; }
.chip {
	font-size: .82rem;
	font-weight: 600;
	background: rgba(255,255,255,.16);
	border: 1px solid rgba(255,255,255,.3);
	color: #fff;
	padding: .4rem .85rem;
	border-radius: var(--r-pill);
}

/* =============================================================================
   Duo — dos columnas grandes
   ============================================================================= */
.duo {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.5rem;
	margin-top: 1.75rem;
}
@media (max-width: 760px) { .duo { grid-template-columns: 1fr; } }
.duo > div {
	background: var(--card);
	border: 2px solid var(--line);
	border-radius: var(--r-lg);
	padding: 1.75rem 1.5rem;
}
.duo > div:nth-child(1) { --c: var(--sky); }
.duo > div:nth-child(2) { --c: var(--grape); }
.duo .k {
	display: inline-block;
	background: var(--c);
	color: var(--c-ink);
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	padding: .35rem .8rem;
	border-radius: var(--r-pill);
	margin-bottom: .9rem;
}
.duo p { color: var(--muted); font-size: .96rem; }
.duo .sale { color: var(--ink); font-weight: 700; margin-top: .8rem; }
.duo .sale::before { content: "→ "; color: var(--c); }
/* dentro de un bloque a color el duo se vuelve translúcido */
.block .duo > div { background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.28); }
.block .duo .k { background: #fff; color: var(--ink); }
.block .duo p { color: rgba(255,255,255,.92); }

/* =============================================================================
   Módulos — etiqueta de color + palomitas
   ============================================================================= */
.mods {
	margin-top: 2rem;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 1.5rem;
}
.mod {
	background: var(--card);
	border: 2px solid var(--line);
	border-radius: var(--r-lg);
	padding: 1.6rem 1.5rem;
	transition: transform .14s ease, box-shadow .14s ease;
}
.mod:hover { transform: translateY(-4px); box-shadow: var(--shadow-up); }
.mod:nth-child(6n+1) { --c: var(--coral); }
.mod:nth-child(6n+2) { --c: var(--sun);   --c-ink: #4a2f00; }
.mod:nth-child(6n+3) { --c: var(--leaf);  }
.mod:nth-child(6n+4) { --c: var(--sky);   }
.mod:nth-child(6n+5) { --c: var(--grape); }
.mod:nth-child(6n+6) { --c: var(--coral); }
.mod .k {
	display: inline-block;
	background: var(--c);
	color: var(--c-ink);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	padding: .35rem .8rem;
	border-radius: var(--r-pill);
	margin-bottom: .9rem;
	transform: rotate(-1deg);
}
.mod ul { list-style: none; margin: .9rem 0 0; padding: 0; }
.mod li {
	display: grid;
	grid-template-columns: 1.5rem 1fr;
	gap: .4rem;
	padding: .42rem 0;
	font-size: .93rem;
	color: var(--muted);
}
.mod li::before {
	content: "✓";
	color: var(--c);
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.5;
}

/* =============================================================================
   Índice de planteles
   ============================================================================= */
.idx { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.5rem; }
.idx a {
	background: var(--card);
	border: 2px solid var(--line);
	border-radius: var(--r-pill);
	padding: .4rem 1rem;
	font-size: .88rem;
	font-weight: 600;
	text-decoration: none;
	font-variant-numeric: tabular-nums;
	transition: transform .12s ease, border-color .12s ease;
}
.idx a:hover { border-color: var(--leaf); color: var(--leaf); transform: translateY(-2px); }

/* =============================================================================
   Objeciones
   ============================================================================= */
.objs {
	margin-top: 2rem;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 1.25rem;
}
.obj {
	background: var(--paper-2);
	border: 2px solid var(--line);
	border-radius: var(--r);
	padding: 1.4rem 1.4rem;
}
.obj q {
	font-family: var(--f-display);
	font-size: 1.16rem;
	font-weight: 700;
	letter-spacing: -.01em;
	quotes: "\201C" "\201D";
	display: block;
	margin-bottom: .5rem;
}
.obj p { margin: 0; font-size: .94rem; color: var(--muted); }

/* =============================================================================
   Botón flotante de WhatsApp
   =============================================================================
   Va en VERDE DE WHATSAPP (#25d366), no en --leaf, y es a propósito: éste es
   el único elemento de la página que no debe verse de la marca. La gente
   reconoce ese verde y ese logo sin leer; cambiarlos por los nuestros lo
   volvería "otro botón" y perdería el clic. La convención gana al sistema.

   Se anima con las propiedades sueltas translate/scale para dejar `transform`
   libre — si la entrada terminara en `transform: none` con fill-mode, pisaría
   el hover y el botón se quedaría muerto al pasarle el cursor.
   ============================================================================= */
.wa {
	position: fixed;
	right: 1.25rem;
	bottom: 1.25rem;
	z-index: 30;
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	background: #25d366;
	color: #fff;
	font-family: var(--f-ui);
	font-size: .95rem;
	font-weight: 700;
	text-decoration: none;
	padding: .8rem 1.3rem;
	border-radius: var(--r-pill);
	box-shadow: 0 8px 26px -6px rgba(37,211,102,.55), 0 2px 0 rgba(35,38,47,.08);
	transition: transform .14s ease, box-shadow .14s ease, background-color .14s ease;
	/* entra una vez, ya que el lector alcanzó a ver el hero. No pulsa en bucle:
	   un botón que late es un vendedor que te jala la manga. */
	animation: wa-pop .45s cubic-bezier(.2,1.5,.4,1) .9s both;
}
.wa:hover {
	background: #1eb955;
	transform: translateY(-3px);
	box-shadow: 0 14px 32px -6px rgba(37,211,102,.7), 0 2px 0 rgba(35,38,47,.08);
}
.wa svg { width: 22px; height: 22px; fill: currentColor; flex: none; }

@keyframes wa-pop {
	from { opacity: 0; translate: 0 16px; scale: .8; }
	to   { opacity: 1; translate: 0 0;    scale: 1; }
}

/* en pantalla chica se vuelve círculo: ahí el pulgar necesita el espacio más
   que el texto, y el logo ya dice todo lo que hay que decir. */
@media (max-width: 560px) {
	.wa { padding: .95rem; right: 1rem; bottom: 1rem; }
	.wa .wa-txt { display: none; }
}

/* =============================================================================
   Pie
   ============================================================================= */
.pie {
	border-top: 2px solid var(--line);
	padding: 2rem 0 2.75rem;
	font-size: .9rem;
	color: var(--muted);
}
.pie-in { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; }
.pie a { color: var(--ink); text-decoration: none; font-weight: 600; margin-right: 1.35rem; }
.pie a:hover { color: var(--coral); }
.pie .fine { margin: 0; }

/* Instagram: hereda el color del pie via currentColor, así que entra y sale del
   coral con los demás enlaces sin repetir la regla del hover. */
.pie .ig { display: inline-flex; align-items: center; vertical-align: middle; margin-right: 0; }
.pie .ig svg { width: 22px; height: 22px; fill: currentColor; display: block; }

/* =============================================================================
   Movimiento — lo "dinámico". Discreto: entra una vez y se calla.
   El estado inicial se aplica SOLO si hay JS (.js en <html>), si no la página
   se queda invisible para quien lo trae apagado.
   ============================================================================= */
.js .rise { opacity: 0; transform: translateY(14px); }
.js .rise.seen {
	opacity: 1;
	transform: none;
	transition: opacity .5s ease, transform .5s cubic-bezier(.2,.7,.3,1);
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { transition: none !important; animation: none !important; }
	.js .rise { opacity: 1; transform: none; }
	.card, .card:hover { transform: none; }
	/* los papelitos se quedan quietos en su giro base — siguen ahí, sin flotar.
	   Y sin will-change: no tiene caso pagar una capa de composición por algo
	   que ya no se mueve. */
	.hero .conf { will-change: auto; }
}