/*
Lo que ponía Elementor y ahora pone el tema: el cuerpo y los encabezados que fijaba su Kit, y las
secciones y rejillas que eran contenedores suyos. Los valores son los MEDIDOS en la línea base del
07-09 (capturas/sin-elementor/antes), no los del generador: donde Elementor dejó su valor por
defecto (20 px de hueco, 10 px de relleno en la franja del pie) se conserva ese valor.
*/

/* El Kit ponía `line-height: 1.65em` sobre body, o sea 28,05 px FIJOS heredados por todo lo que no
   fija el suyo (el recuento del menú, por ejemplo). `1.65` a secas cambiaría esos elementos. */
body {
	line-height: 1.65em;
	letter-spacing: 0;
}

/* h1..h6 como los dejaba el Kit: la fórmula de cada papel, para un encabezado que venga sin clase. */
h1 { font-family: var(--fuente-display); font-size: var(--t-display); font-weight: 500; line-height: 0.88em; letter-spacing: -0.035em; }
h2 { font-family: var(--fuente-display); font-size: var(--t-xl);      font-weight: 500; line-height: 0.92em; letter-spacing: -0.03em; }
h3 { font-family: var(--fuente-display); font-size: var(--t-l);       font-weight: 500; line-height: 1.02em; letter-spacing: -0.02em; }
h4 { font-family: var(--fuente-texto);   font-size: var(--t-m);       font-weight: 400; line-height: 1.45em; letter-spacing: 0; }
h5 { font-family: var(--fuente-texto);   font-size: var(--t-cuerpo);  font-weight: 400; line-height: 1.65em; letter-spacing: 0; }
h6 { font-family: var(--fuente-texto);   font-size: var(--t-etiqueta); font-weight: 500; line-height: 1.2em; letter-spacing: 0.14em; }

/* ---------- Secciones: el `.e-con` de antes. Aire vertical y hueco por variables. ---------- */

.a-seccion {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--hueco, 20px);
	min-width: 0;
	width: 100%;
	padding-block: var(--arriba, var(--s-5)) var(--abajo, var(--s-5));
}

@media (max-width: 767px) {
	.a-seccion { flex-wrap: wrap; }
}

/* El bloque de cada pieza: el `.elementor-widget` de antes, un hijo flex que aísla márgenes.
   `:not(.a-medida)`: esta hoja carga después de reticula.css y pisaba la medida de línea (34em) del
   texto libre de page/single/404/search: 1385 px de renglón a 1440 [MEDIDO 07-09, revisor]. */
.a-bloque:not(.a-medida) {
	max-width: 100%;
}
/* Elementor ponía `figure{margin:0}` a (0,4,1) dentro de cada widget y ganaba, por ejemplo, al
   `margin-top` de `.a-exposiciones__foto`: sin esto cada fila crecía 16 px [MEDIDO 07-09]. */
.a-bloque figure { margin: 0; }

/* Dos columnas iguales (Sobre mí). A ≤1024, no a 767: es el corte tablet que traía Elementor y
   con el que se midió la línea base. */
.a-columnas {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
	min-width: 0;
}
@media (max-width: 1024px) {
	.a-columnas { grid-template-columns: 1fr; }
}

/* Las dos franjas de «Sobre mí». Apiladas, el nombre y su biografía dejan de ser vecinos de columna
   y pasan a ser una cosa y la de debajo: con el aire de seccion quedaban a 125 px, contra los 24 que
   deja prensa entre su titulo y su entradilla (Andi, 09-09) [MEDIDO a 1024]. */
.a-sm-retrato { --arriba: var(--s-4); --abajo: var(--s-4); }
.a-sm-bio { --arriba: var(--s-4); }
@media (max-width: 1024px) {
	.a-sm-retrato { --abajo: 1rem; }
	.a-sm-bio { --arriba: 1rem; }
}
.a-columna {
	display: flex;
	flex-direction: column;
	gap: 20px;
	min-width: 0;
}

/* Rejilla de accesos de /exposiciones/: 3 columnas; las de ≤1023 y ≤767 las pone su hoja. */
.a-seccion--accesos {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--s-3) var(--canal); /* el de `.a-accesos-expo`; aquí porque el `gap` de `.a-seccion` lo pisaría */
}

/* La imagen suelta (widget «image» de antes): al eje izquierdo del sitio y en línea, con su altura
   natural. Centrada dejaba el retrato de «Sobre mí» a 112 px en una columna que empieza en 19, con el
   logotipo y el titulo alineados a 19 [MEDIDO 09-09 a 1024]. Por encima de 1024 llena su columna. */
.a-imagen { text-align: left; }
.a-imagen img { display: inline-block; vertical-align: middle; max-width: 100%; } /* sin `height`: `.a-foto-autora img` fija la suya */

/* El vídeo de Sobre mí, al 60 % del campo; entero en móvil. Es flex-column con `wrap` en móvil
   como el contenedor hijo de Elementor que era: con ese `wrap` anidado Chrome le da al vídeo 58 px
   menos de alto en la sección a 390 [MEDIDO 07-09: sección 510, no 568], y así se queda igual. */
.a-video-caja { display: flex; flex-direction: column; gap: 20px; width: 60%; }
@media (max-width: 767px) {
	.a-video-caja { width: 100%; flex-wrap: wrap; }
}

/* ---------- Texto libre del editor (páginas nuevas, entradas) ---------- */

.a-texto > p { font-family: var(--fuente-texto); font-weight: 400; font-size: var(--t-cuerpo); line-height: 1.65; }
.a-texto > h2 { font-family: var(--fuente-display); font-weight: 500; font-size: var(--t-l); line-height: 1.02; letter-spacing: -0.02em; margin-block: var(--s-3) var(--s-1); }
.a-texto > ul, .a-texto > ol { padding-inline-start: 1.2em; }

/* El texto legal a dos ejes lo arma plantillas/legal.php con el marcado de reticula.css:46-68. */

/* ---------- Error 404 a página completa (Andi, 07-09) ---------- */

/* Alto de pantalla menos la guarda y el logotipo fijo, que es lo que ocupa la cabecera. `svh` y no
   `vh`: en móvil la barra del navegador entra y sale, y con `vh` el bloque se sale de la pantalla. */
.a-404 {
	display: grid;
	align-content: center;
	gap: var(--s-3);
	min-height: calc(100svh - var(--margen) * 2 - var(--logo-alto) - var(--s-4));
}

.a-404__volver { margin-block: var(--s-2) 0; }

/* La obra manda por ALTO, nunca por ancho: es lo que evita el scroll en pantallas bajas. */
.a-404__obra .a-menu__obra-imagen { max-height: 38svh; }

/* El enlace se cine a la imagen (Andi, 07-09): en bloque ocupaba toda la columna y el papel de al
   lado tambien enlazaba. En el menu no se nota porque alli la imagen llena su columna. */
.a-404__obra .a-menu__obra {
	width: fit-content;
	max-width: 100%;
}

/* Aqui la obra es la protagonista, no una miniatura de un menu denso: el titulo sube de la cartela
   (15 px) al cuerpo medio, y la serie se queda pequena para que siga leyendose como un pie. */
.a-404__obra .a-menu__obra-titulo {
	font-family: var(--fuente-display);
	font-size: var(--t-m);
	line-height: 1.15;
	margin-block-end: 0.15em;
}

@media (min-width: 768px) {
	.a-404 {
		grid-template-columns: 1fr 1fr;
		align-items: center;
		gap: var(--canal);
	}
	.a-404__obra .a-menu__obra-imagen { max-height: 56svh; }
}

/* La firma bajo la declaración de la portada. El alto va atado a `--t-xl`, así que escala con
   el titular y no hay medida guardada al cargar; la sección resta ese mismo alto de su `--abajo`
   para que la primera obra no baje. */
.a-firma {
	display: block;
	width: auto;
	height: calc( var(--t-xl) * 0.75 );
	margin-top: calc( var(--t-xl) * 0.3 );
	color: var(--tinta);
	overflow: visible;
}