/**
 * Variables globales: traduccion del design system de Figma.
 *
 * Fuente de verdad: Figma "Web Corporativa 2026" > seccion "Documentacion ·
 * Variables & Tipografia" (node 656-49). Cada custom property de aqui es una
 * variable de la coleccion semantica de ese archivo; los valores en crudo
 * (primitivos, hex) no se usan nunca fuera de este fichero.
 *
 * Un solo bloque :root a proposito: inc/helpers.php parsea el primero que
 * encuentra para construir la paleta y la escala tipografica del editor.
 *
 * Aqui NO va CSS de componentes: la cabecera y el pie estan en layout.css y
 * cada bloque trae su propio style.css.
 */
:root {
	/* --- Tipografia. Poppins, escala 1.25 sobre base 16px, sin letter-spacing. --- */
	--font: 'Poppins', system-ui, -apple-system, sans-serif;

	--display-size: 61px;
	--display-line: 1.1;
	--display-weight: 700;

	--h1-size: 49px;
	--h1-line: 1.2;
	--h1-weight: 700;
	--h2-size: 39px;
	--h2-line: 1.2;
	--h2-weight: 700;
	--h3-size: 31px;
	--h3-line: 1.2;
	--h3-weight: 600;
	--h4-size: 25px;
	--h4-line: 1.25;
	--h4-weight: 600;
	--h5-size: 20px;
	--h5-line: 1.3;
	--h5-weight: 600;
	--h6-size: 18px;
	--h6-line: 1.3;
	--h6-weight: 600;

	/* Cuerpo minimo 16px por accesibilidad; los tamanos mayores son para lead
	   y destacados. La variante SemiBold del sistema es font-weight: 600. */
	--body-lg-size: 20px;
	--body-lg-line: 1.6;
	--body-md-size: 18px;
	--body-md-line: 1.6;
	--body-size: 16px;
	--body-line: 1.6;
	--body-sm-size: 14px;
	--body-sm-line: 1.5;

	/* Caption solo para metadatos, nunca para contenido esencial. */
	--caption-size: 12.8px;
	--caption-line: 1.4;
	--caption-weight: 500;

	/* --- Color. Los ratios son contraste sobre blanco (WCAG 2.1). --- */
	--text: #1a1a1a; /* 17.4:1 AAA */
	--text-soft: #4c4c4c; /* 8.59:1 AAA */
	--text-muted: #757575; /* 4.61:1 AA */
	--text-inverse: #ffffff; /* sobre fondo oscuro o gradiente */

	--surface: #ffffff;
	--surface-alt: #f2f2f2; /* relleno, solo fondo */
	--bg-blue: #f5f8fa;
	--bg-blue-2: #ecf1f4;

	--line: #d6d6d6; /* divisor decorativo */
	--border-fn: #757575; /* borde funcional de input, 4.61:1 */

	/* El rojo es acento: reservado para CTAs. */
	--accent: #da1c2d; /* 5.02:1 AA */
	--accent-hover: #c1121f; /* 6.22:1 AA */
	--accent-active: #a50e1e; /* 7.83:1 AAA, tambien texto de enlace */
	--focus: #0b4fd6; /* anillo de foco, 6.77:1 */

	/* Estados: acompanar siempre con icono + texto, nunca solo color. */
	--sem-success: #1b7a66;
	--sem-success-bg: #e7f4f0;
	--sem-info: #2957a3;
	--sem-info-bg: #e8eef7;
	--sem-warning: #b45309;
	--sem-warning-bg: #fdf1e3;
	--sem-error: #c1121f;
	--sem-error-bg: #f8eeef;

	/* Gradientes decorativos. El angulo no lo fija el sistema. */
	--grad-red: linear-gradient( 135deg, #ff2c3f, #da1b2c );
	--grad-green: linear-gradient( 135deg, #6fdec7, #22927b );
	--grad-blue: linear-gradient( 135deg, #3ab6e0, #2957a3 );
	--grad-yellow: linear-gradient( 135deg, #fed001, #feba01 );

	/* --- Espaciado. Base 4px, para gap, padding y margenes. ---
	 * 13 pasos, los de la coleccion de variables de Figma, que es a la que
	 * estan vinculados los disenos: el panel del megamenu resuelve --s-9 a
	 * 80px y --s-8 a 64px. El frame de documentacion dibuja 14 pasos con uno
	 * de 40px que ninguna variable respalda.
	 */
	--s-1: 4px;
	--s-2: 8px;
	--s-3: 12px;
	--s-4: 16px;
	--s-5: 24px;
	--s-6: 32px;
	--s-7: 48px;
	--s-8: 64px;
	--s-9: 80px;
	--s-10: 96px;
	--s-11: 128px;
	--s-12: 160px;
	--s-13: 192px;

	/* --- Sombras ---
	 * No salen del frame de documentacion (ahi solo hay color, espaciado,
	 * radios y tipografia) sino de los estilos de efecto del propio Figma,
	 * "Shadow/sm" y "Shadow/md", que es lo que llevan las tarjetas: sm en
	 * reposo y md cuando se levantan.
	 */
	--sombra-sm: 0 1px 2px rgba( 26, 26, 26, .06 ), 0 2px 8px rgba( 26, 26, 26, .08 );
	--sombra-md: 0 6px 24px rgba( 26, 26, 26, .1 );

	/* --- Radios --- */
	--rad-sm: 8px;
	--rad-md: 12px;
	--rad-lg: 20px;
	--rad-xl: 28px;
	--rad-pill: 999px;

	/* --- Fuera del design system ---------------------------------------
	 * Estos valores todavia no existen en Figma. Se mantienen los actuales
	 * para no romper cabecera, pie y catalogo. Cuando el sistema los cubra,
	 * sustituir por el token real.
	 */
	/* Estados del boton fantasma y de los enlaces del megamenu. El sistema los
	   tiene como primitivos (red/50 y red/100) pero no los expone como token
	   semantico, y el diseno de la navegacion los usa. */
	--accent-bg: #f8eeef;
	--accent-bg-strong: #fad0d4;
	--surface-portada: #f4f1ec; /* fondo de la portada de producto */

	/* Movimiento. La coleccion de Figma no tiene variables de animacion; estas
	   dos vienen de la ficha "Action Link · hover/focus" que acompana al
	   diseno, y las usa cualquier transicion de interaccion del sistema. */
	--motion-link: 220ms;
	--motion-panel: 320ms; /* lo que se despliega, mas suave que un enlace */
	--motion-sweep: 700ms; /* el barrido de la bolita del boton primario */

	/* La misma curva para todo. Las dos fichas de animacion la declaran por
	   separado (--motion-ease y --motion-sweep-ease) con el mismo valor, asi
	   que aqui va una sola: duplicarla es arriesgarse a que se separen. */
	--motion-ease: cubic-bezier( .4, 0, .2, 1 );

	/*
	 * La cascada: lo que espera cada pieza de un panel que se abre para entrar
	 * detras de la anterior. La usan el megamenu de escritorio y el cajon movil,
	 * asi que vive aqui y no en uno de los dos (spec megamenu-animation-specs.md).
	 *
	 * El tope no es un adorno. El retardo es la espera mas el paso por el numero
	 * de orden, y el menu de Docentes tiene 35 piezas: sin el, la ultima entraria
	 * a 860ms y la secuencia pasaria del segundo, para algo que se abre docenas
	 * de veces por sesion. De la doce en adelante entran todas juntas.
	 */
	--motion-escalon: 160ms;
	--motion-escalon-paso: 20ms;
	--motion-escalon-tope: 12;
	--motion-alza: 8px; /* lo que sube una pieza al entrar */

	/*
	 * La animacion de entrada (bloque macmillan/animacion). Tampoco esta en
	 * Figma. Corta y con poco viaje a proposito: lo que se mueve mucho marea a
	 * quien tiene problemas vestibulares, y lo que tarda retrasa la lectura.
	 */
	--motion-entrada: 600ms;
	--motion-entrada-viaje: 32px;
	--motion-entrada-escala: .94;

	/* Pie: el diseno los toma de la escala neutral (neutral/900 y neutral/600),
	   que el sistema solo expone como tokens de texto. */
	--footer-fondo: #1a1a1a;
	--footer-linea: #4c4c4c;

	/* 1280 y no 1200: es lo que mide el contenido en los frames del diseno
	   (1440 de lienzo menos los dos margenes de pagina de 80), y de ahi salen
	   las medidas de los bloques —las cuatro tarjetas de 312,5 con 10 de hueco,
	   la banda de asesor de 1280x354—. Con 1200 todo entra un 6 % mas estrecho
	   y los textos rompen donde el diseno no los rompe. */
	--ancho-max: 1280px;
	--contenedor: 1440px;
	--margen-pagina: clamp( 20px, 5.5vw, 80px );
	--gutter: 20px;
	--cabecera-alto: 72px;
}

body {
	margin: 0;
	color: var( --text );
	font-family: var( --font );
	font-size: var( --body-size );
	line-height: var( --body-line );
}

/*
 * Nuestro subsistema da por hecho border-box: el ancho y el alto incluyen el
 * relleno. El tema antiguo lo declara para todo, pero su hoja esta escrita a
 * mano dentro de html-header.twig, asi que solo existe en las paginas que
 * pinta el. En las nuestras no habia ninguna declaracion, y ahi un <a> con
 * min-height y padding salia 16px mas alto que un <button>, que trae
 * border-box de fabrica: por eso los hijos de un grupo median distinto segun
 * si llevaban submenu o no.
 *
 * Acotado a lo nuestro a proposito: no cambia nada del tema.
 *
 * El lienzo del editor va en la lista por el mismo motivo que .mm-contenido:
 * ahi los bloques son los mismos pero el envoltorio se llama distinto, y
 * WordPress no trae reset propio (su hoja solo pone border-box en ul y ol). Sin
 * esta linea el front media en border-box y el editor en content-box: cualquier
 * bloque con relleno o borde salia mas grande dentro que fuera, y en una
 * rejilla las tarjetas se desbordaban de su columna.
 */
.mm-saltar,
.mm-navbar,
.mm-cajon,
.mm-contenido,
.mm-pie,
.editor-styles-wrapper,
.mm-navbar *,
.mm-cajon *,
.editor-styles-wrapper *,
.mm-contenido *,
.mm-pie * {
	box-sizing: border-box;
}

/*
 * El atributo hidden tiene que ganar siempre.
 *
 * "[hidden] { display: none }" vive en la hoja del navegador, y cualquier
 * regla de autor con display la pisa por origen, sin que importe la
 * especificidad. Como aqui se oculta con hidden desde JS (megamenus, buscador,
 * cajon movil, acordeones) y esos elementos son flex o grid, sin este !important
 * el atributo no hace nada.
 */
[hidden] {
	display: none !important;
}

/* Utilidad estandar de WordPress: la usa el boton del menu. */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	overflow: hidden;
	clip: rect( 1px, 1px, 1px, 1px );
	white-space: nowrap;
	border: 0;
}

/* ------------------------------------------------- Tipografia del contenido
 *
 * El design system no solo define la escala: cada muestra del frame de
 * tipografia dice a que elemento va ("uso: h1", "uso: p.lead", "uso: strong /
 * labels"...). Aqui es donde se aplica. Sin estas reglas un core/heading del
 * editor sale con los tamanos del navegador, no con los del sistema.
 *
 * Dos raices a proposito: .mm-contenido es el contenido en el front y
 * .editor-styles-wrapper el lienzo del editor, que es lo que hace que se vea
 * igual dentro y fuera. Y van acotadas porque esta hoja tambien se carga en
 * las paginas del tema antiguo cuando el Personalizador elige nuestra
 * cabecera: un "h2" a pelo les repintaria los titulares.
 *
 * Los margenes se dejan como vienen del navegador: el sistema no los define, y
 * los suyos son em, o sea que ya escalan con el tamano.
 */
.mm-contenido h1,
.editor-styles-wrapper h1 {
	font-size: var( --h1-size );
	line-height: var( --h1-line );
	font-weight: var( --h1-weight );
}

.mm-contenido h2,
.editor-styles-wrapper h2 {
	font-size: var( --h2-size );
	line-height: var( --h2-line );
	font-weight: var( --h2-weight );
}

.mm-contenido h3,
.editor-styles-wrapper h3 {
	font-size: var( --h3-size );
	line-height: var( --h3-line );
	font-weight: var( --h3-weight );
}

.mm-contenido h4,
.editor-styles-wrapper h4 {
	font-size: var( --h4-size );
	line-height: var( --h4-line );
	font-weight: var( --h4-weight );
}

.mm-contenido h5,
.editor-styles-wrapper h5 {
	font-size: var( --h5-size );
	line-height: var( --h5-line );
	font-weight: var( --h5-weight );
}

.mm-contenido h6,
.editor-styles-wrapper h6 {
	font-size: var( --h6-size );
	line-height: var( --h6-line );
	font-weight: var( --h6-weight );
}

/*
 * En movil, un escalon menos.
 *
 * El diseño no usa la misma escala en las dos anchuras: la misma banda que en
 * escritorio lleva un H3 de 31, en el frame de 390 la lleva con un H4 de 25, y
 * su bajada pasa de los 18 del cuerpo medio a los 16 del normal (nodos
 * 677-20570 y 677-20614). Sin esto, un titular mide igual a 1440 que a 390 y en
 * el movil se come la pantalla.
 *
 * Cada nivel toma el paso entero del de debajo —tamaño, interlineado y grosor—
 * y no solo el tamaño: el sistema define cada paso como un bloque cerrado
 * ("Heading/H4: Poppins SemiBold 25 / 1.25"), y mezclar el cuerpo de uno con la
 * interlinea de otro da un paso que no existe en ninguna parte.
 *
 * Los tokens no se tocan: se remapea que usa cada elemento. Si aqui se
 * redefiniera --h3-size, los bloques que ya bajan de tamaño por su cuenta en
 * movil —el hero, las tarjetas— bajarian dos veces.
 *
 * El corte es el 767 del resto del contenido. Y esto solo alcanza a lo que se
 * escribe en el editor; lo que cada bloque haga con sus propios titulares es
 * cosa de su style.css, que es donde se ve.
 */
@media ( max-width: 767px ) {
	.mm-contenido h1,
	.editor-styles-wrapper h1 {
		font-size: var( --h2-size );
		line-height: var( --h2-line );
		font-weight: var( --h2-weight );
	}

	.mm-contenido h2,
	.editor-styles-wrapper h2 {
		font-size: var( --h3-size );
		line-height: var( --h3-line );
		font-weight: var( --h3-weight );
	}

	.mm-contenido h3,
	.editor-styles-wrapper h3 {
		font-size: var( --h4-size );
		line-height: var( --h4-line );
		font-weight: var( --h4-weight );
	}

	.mm-contenido h4,
	.editor-styles-wrapper h4 {
		font-size: var( --h5-size );
		line-height: var( --h5-line );
		font-weight: var( --h5-weight );
	}

	.mm-contenido h5,
	.editor-styles-wrapper h5 {
		font-size: var( --h6-size );
		line-height: var( --h6-line );
		font-weight: var( --h6-weight );
	}

	.mm-contenido h6,
	.editor-styles-wrapper h6 {
		font-size: var( --body-size );
		line-height: var( --body-line );
	}
}

/* Display es el titular de hero, no un nivel de encabezado: se pide con clase
   sobre el h1 que toque, para no romper la jerarquia del documento. */
.mm-display {
	font-size: var( --display-size );
	line-height: var( --display-line );
	font-weight: var( --display-weight );
}

/* Entradilla. El Figma la llama "p.lead"; aqui lleva el prefijo del resto. */
.mm-lead {
	font-size: var( --body-lg-size );
	line-height: var( --body-lg-line );
}

/* SemiBold, no el bold del navegador: es lo que dibuja "Body/Base SemiBold". */
.mm-contenido :is( strong, b ),
.editor-styles-wrapper :is( strong, b ) {
	font-weight: 600;
}

.mm-contenido small,
.editor-styles-wrapper small {
	font-size: var( --body-sm-size );
	line-height: var( --body-sm-line );
}

/* Caption: solo metadatos y pies de imagen, nunca contenido esencial. Sin
   color: el estilo de Figma es solo tipografia, y ponerlo aqui repintaria de
   gris el pie de autor del bloque de testimonios, que lo hereda a proposito. */
.mm-caption,
.mm-contenido figcaption,
.editor-styles-wrapper figcaption {
	font-size: var( --caption-size );
	line-height: var( --caption-line );
	font-weight: var( --caption-weight );
}