/* =========================================================================
   Colegio Novo Mundo · CSS del tema hijo
   Paleta y tipografía de plan/02-marca-y-kit.md
   Se encola en functions.php con prioridad 30 y versión filemtime().
   ========================================================================= */

:root {
	/* --- Morados (institucional) --- */
	--nm-morado: #240B69;        /* morado profundo: hero, franjas, botón primario */
	--nm-morado-medio: #3D2A8C;  /* fondos secundarios */
	--nm-violeta: #6D3FCF;       /* hover, detalles */

	/* --- Acento --- */
	--nm-amarillo: #F2C230;      /* botones secundarios, franjas (02) */

	/* --- Neutros --- */
	--nm-tinta: #1B1233;         /* texto sobre fondo claro */
	--nm-gris-texto: #4A4A5A;
	--nm-gris-borde: #E3E0EC;
	--nm-fondo-claro: #F6F4FB;
	--nm-blanco: #FFFFFF;

	/* --- Tipografía (Lora 600 titulares + Inter 400/500 cuerpo + Noto Sans 500 menú) --- */
	--nm-font-titulo: 'Lora', Georgia, 'Times New Roman', serif;
	--nm-font-cuerpo: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	--nm-font-menu: 'Noto Sans', var(--nm-font-cuerpo);

	/* --- Escalas (escritorio / teléfono en las media queries) --- */
	--nm-size-hero: 56px;
	--nm-size-h1: 48px;
	--nm-size-h2: 36px;
	--nm-size-cuerpo: 17px;

	/* --- Varios --- */
	--nm-radio: 10px;
	--nm-sombra: 0 6px 24px rgba(36, 11, 105, .12);
}

@media (max-width: 767px) {
	:root {
		--nm-size-hero: 32px;
		--nm-size-h1: 32px;
		--nm-size-h2: 28px;
		--nm-size-cuerpo: 16px;
	}
}

/* =========================================================================
   PRUEBA VISUAL (tarea 9) — confirma a ojo que nm.css está cargando.
   Franja morada/amarilla arriba de todo. Se puede retirar cuando el
   encabezado del Theme Builder esté montado; hasta entonces es el testigo.
   ========================================================================= */
body::before {
	content: "";
	display: block;
	width: 100%;
	height: 14px;
	background: linear-gradient(90deg,
		var(--nm-morado) 0 70%,
		var(--nm-amarillo) 70% 100%);
}

/* =========================================================================
   Base
   ========================================================================= */
body {
	font-family: var(--nm-font-cuerpo);
	font-size: var(--nm-size-cuerpo);
	color: var(--nm-gris-texto);
	background-color: var(--nm-blanco);
}

h1, h2, h3, h4, h5, h6,
.site-title {
	font-family: var(--nm-font-titulo);
	font-weight: 600;
	color: var(--nm-morado);
}

h1 { font-size: var(--nm-size-h1); }
h2 { font-size: var(--nm-size-h2); }

/* Enlaces en morado institucional (por defecto Hello los pinta fucsia). */
a,
.site-title a,
.entry-title a,
.page-content a {
	color: var(--nm-morado);
	text-decoration: none;
}

a:hover,
a:focus,
.site-title a:hover,
.entry-title a:hover {
	color: var(--nm-violeta);
}

a:focus-visible {
	outline: 3px solid var(--nm-amarillo);
	outline-offset: 2px;
}

/* =========================================================================
   Encabezado y pie del tema (mientras no esté el Theme Builder)
   ========================================================================= */
.site-header {
	background-color: var(--nm-morado);
	border-bottom: 6px solid var(--nm-amarillo);
}

.site-header .site-title,
.site-header .site-title a,
.site-header .site-description {
	color: var(--nm-blanco);
}

.site-header .site-title a:hover {
	color: var(--nm-amarillo);
}

.site-navigation ul li a {
	font-family: var(--nm-font-menu);
	font-weight: 500;
	color: var(--nm-blanco);
}

.site-footer {
	background-color: var(--nm-tinta);
	color: var(--nm-blanco);
}

.site-footer a {
	color: var(--nm-amarillo);
}

/* =========================================================================
   Botones
   Primario: morado con texto blanco. Secundario: amarillo con tinta.

   Ojo con `.elementor-widget-button .elementor-button` (tarea 14): el kit
   Edupreme deja el fondo del widget Botón atado al color global Accent con ESE
   selector, y Elementor lo escribe en el CSS de cada página. Como en 02 el
   Accent es el amarillo #F2C230, el botón sale amarillo con texto blanco:
   1,68:1 medido, muy por debajo del 4,5:1 que exige 02.
   Igualar la especificidad (0,2,0) NO alcanza: el CSS de la página se encola
   después que el del tema y gana el empate por orden. Por eso los selectores
   llevan `body` delante (0,2,1): así ganan sin `!important` y sin tocar los
   widgets uno a uno. Medido tras el cambio en /t14-referencia-kit/.
   ========================================================================= */
button,
input[type="submit"],
.button,
.wp-block-button__link,
.elementor-button,
body .elementor-widget-button .elementor-button {
	font-family: var(--nm-font-cuerpo);
	font-weight: 500;
	background-color: var(--nm-morado);
	color: var(--nm-blanco);
	border: 0;
	border-radius: var(--nm-radio);
}

button:hover,
input[type="submit"]:hover,
.button:hover,
.wp-block-button__link:hover,
.elementor-button:hover,
body .elementor-widget-button .elementor-button:hover,
body .elementor-widget-button .elementor-button:focus {
	background-color: var(--nm-violeta);
	color: var(--nm-blanco);
}

.nm-boton-secundario,
.nm-boton-secundario .elementor-button,
body .nm-boton-secundario.elementor-widget-button .elementor-button {
	background-color: var(--nm-amarillo);
	color: var(--nm-tinta);
}

/* =========================================================================
   Formularios — nunca bajo 16px: iOS hace zoom al enfocar el campo.
   ========================================================================= */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="date"],
select,
textarea {
	font-family: var(--nm-font-cuerpo);
	font-size: 16px;
	color: var(--nm-tinta);
	background-color: var(--nm-blanco);
	border: 1px solid var(--nm-gris-borde);
	border-radius: var(--nm-radio);
}

input:focus,
select:focus,
textarea:focus {
	border-color: var(--nm-violeta);
	outline: 2px solid var(--nm-violeta);
	outline-offset: 0;
}

/* =========================================================================
   Utilidades de bloque
   ========================================================================= */
.nm-fondo-morado {
	background-color: var(--nm-morado);
	color: var(--nm-blanco);
}

.nm-fondo-claro {
	background-color: var(--nm-fondo-claro);
	color: var(--nm-tinta);
}

.nm-borde {
	border: 1px solid var(--nm-gris-borde);
	border-radius: var(--nm-radio);
}

.nm-sombra {
	box-shadow: var(--nm-sombra);
}