/**
 * Base tipográfica y de estructura.
 *
 * Construcción mobile first: las reglas sin consulta de medios describen el
 * teléfono; los puntos de quiebre solo agregan.
 */

/* ---------- Fuentes autoalojadas ----------
   Las rutas son relativas a este archivo: el tema debe funcionar en diez
   dominios distintos sin que ninguna dirección absoluta quede escrita. No se
   carga ninguna fuente desde un servicio externo.

   font-display: swap evita el texto invisible mientras la fuente carga.

   Ambas familias están acotadas a los subconjuntos latin y latin-ext, que
   cubren el español y los nombres propios que aparecen en un sitio escolar
   chileno. Las tres suman 71 KB. */

@font-face {
	font-family: "gobCL";
	src: url("../fuentes/gobcl-regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "gobCL";
	src: url("../fuentes/gobcl-bold.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* Mulish se sirve como fuente variable: un solo archivo cubre los cuatro
   pesos que usa el tema (400, 600, 700 y 800) y pesa menos que cualquier par
   de instancias estáticas. */
@font-face {
	font-family: "Mulish";
	src: url("../fuentes/mulish-variable.woff2") format("woff2");
	font-weight: 200 1000;
	font-style: normal;
	font-display: swap;
}

/* ---------- Reinicio acotado ---------- */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	font-size: var(--escala-texto);
}


body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd,
ul,
ol {
	margin: 0;
}

ul[class],
ol[class] {
	padding: 0;
	list-style: none;
}

body {
	margin: 0;
	background-color: var(--color-fondo);
	color: var(--color-texto);
	font-family: var(--fuente-base);
	font-size: var(--fs-400);
	font-weight: var(--peso-normal);
	line-height: var(--interlinea-base);
	word-spacing: var(--espaciado-palabras);
	letter-spacing: var(--espaciado-caracteres);
	overflow-x: hidden;
}

img,
picture,
video,
iframe,
svg {
	display: block;
	max-width: 100%;
	height: auto;
}

input,
button,
textarea,
select {
	font: inherit;
	color: inherit;
}

table {
	border-collapse: collapse;
	width: 100%;
}

/* ---------- Encabezados ---------- */

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--fuente-base);
	font-weight: var(--peso-fuerte);
	line-height: var(--interlinea-titulo);
	letter-spacing: var(--espaciado-letras-titulo);
	color: var(--color-texto);
	text-wrap: balance;
}

h1 {
	font-size: var(--fs-700);
}

h2 {
	font-size: var(--fs-600);
}

h3 {
	font-size: var(--fs-500);
}

h4 {
	font-size: var(--fs-400);
}

h5,
h6 {
	font-size: var(--fs-300);
	text-transform: uppercase;
	letter-spacing: var(--espaciado-letras-rotulo);
}

p {
	max-width: var(--ancho-lectura);
}

p + p,
p + ul,
p + ol,
ul + p,
ol + p {
	margin-top: var(--e-sm);
}

/* ---------- Enlaces ---------- */

a {
	color: var(--color-azul-enlace);
	text-underline-offset: 0.18em;
	text-decoration-thickness: from-font;
}

a:hover {
	color: var(--color-acento-oscuro);
}

/* El foco nunca se elimina: es la única señal de posición para quien navega
   con teclado. */
:focus-visible {
	outline: var(--grosor-foco) solid var(--color-foco);
	outline-offset: var(--desplazamiento-foco);
	border-radius: var(--radio-xs);
}


/* ---------- Utilidades ---------- */

.solo-lectores {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.saltar-al-contenido {
	position: absolute;
	top: var(--e-2xs);
	left: var(--e-2xs);
	z-index: var(--capa-dialogo);
	padding: var(--e-2xs) var(--e-sm);
	background: var(--color-navy);
	color: var(--color-texto-inverso);
	font-family: var(--fuente-institucional);
	font-weight: var(--peso-fuerte);
	border-radius: var(--radio-sm);
	transform: translateY(-200%);
}

.saltar-al-contenido:focus {
	transform: translateY(0);
	color: var(--color-texto-inverso);
}

.contenedor {
	width: 100%;
	max-width: var(--ancho-contenido);
	margin-inline: auto;
	padding-inline: var(--margen-lateral);
}

.contenedor--amplio {
	max-width: var(--ancho-amplio);
}

.contenedor--lectura {
	max-width: calc(var(--ancho-lectura) + var(--margen-lateral) * 2);
}

.seccion {
	padding-block: var(--seccion-espacio);
}

.seccion--alterna {
	background-color: var(--color-fondo-alterno);
}

.seccion__titulo {
	font-size: var(--fs-600);
	text-align: center;
	margin-bottom: var(--e-lg);
}

.seccion__titulo--izquierda {
	text-align: left;
}

.principal {
	display: block;
	min-height: 40vh;
}

/* ---------- Contenido editorial del editor de bloques ---------- */

.contenido > * + * {
	margin-top: var(--e-sm);
}

.contenido h2 {
	margin-top: var(--e-xl);
}

.contenido h3 {
	margin-top: var(--e-lg);
}

/* El reinicio quita las viñetas a toda lista con clase, y el editor de bloques
   marca las suyas como .wp-block-list. Aquí se devuelven: una lista de puntos
   escrita en el editor debe verse como una lista de puntos. */
.contenido ul,
.contenido ol {
	padding-left: var(--e-md);
	max-width: var(--ancho-lectura);
	list-style: revert;
}

.contenido ul {
	list-style-type: disc;
}

.contenido ol {
	list-style-type: decimal;
}

.contenido li::marker {
	color: var(--color-acento);
}

.contenido li + li {
	margin-top: var(--e-3xs);
}

.contenido img {
	border-radius: var(--radio-sm);
}

.contenido figure {
	margin-block: var(--e-md);
}

.contenido figcaption {
	margin-top: var(--e-2xs);
	font-size: var(--fs-200);
	color: var(--color-texto-suave);
}

.contenido blockquote {
	margin-block: var(--e-md);
	padding: var(--e-sm) var(--e-md);
	background: var(--color-fondo-alterno);
	border-left: var(--e-3xs) solid var(--color-acento);
	border-radius: var(--radio-sm);
}

.contenido table th,
.contenido table td {
	padding: var(--e-2xs) var(--e-xs);
	border: var(--borde-fino) solid var(--color-borde);
	text-align: left;
}

.contenido table th {
	background: var(--color-fondo-alterno);
}

/* Tablas y bloques anchos se desplazan dentro de su caja, nunca arrastran la
   página: ninguna resolución debe producir desplazamiento horizontal. */
.contenido .wp-block-table {
	overflow-x: auto;
}

.alignwide {
	max-width: var(--ancho-amplio);
	margin-inline: auto;
}

/* Un bloque «ancho completo» debe salirse del contenedor de lectura y llegar a
   los bordes de la ventana. Se usa 50% - 50vw en lugar de un ancho fijo para
   que funcione con cualquier contenedor. El desbordamiento que introduce la
   barra de desplazamiento lo absorbe el overflow-x del cuerpo. */
.alignfull {
	max-width: 100vw;
	width: 100vw;
	margin-inline: calc(50% - 50vw);
}

.alignleft,
.alignright {
	float: none;
	margin-inline: 0;
}

@media (min-width: 48em) {
	.alignleft {
		float: left;
		margin-right: var(--e-md);
		margin-bottom: var(--e-sm);
	}

	.alignright {
		float: right;
		margin-left: var(--e-md);
		margin-bottom: var(--e-sm);
	}

	/* Una fotografía alineada al costado ocupaba su ancho natural y empujaba el
	   texto a un hilo. Acotada, el texto la rodea como en la maqueta. */
	.contenido .alignleft,
	.contenido .alignright {
		max-width: 45%;
	}
}

.aligncenter {
	margin-inline: auto;
}

/* ---------- Respeto de la preferencia de movimiento ---------- */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}


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

@media print {
	.cabecera,
	.pie,
	.panel-accesibilidad,
	.carrusel__control,
	.saltar-al-contenido {
		display: none !important;
	}

	body {
		color: var(--color-impresion);
	}
}