/*
Widgets de texto Aurora Boza: titular, cita, museo, prensa, exposiciones, apilado y vídeo.
Plan T5. Consume tokens.css, tipografia.css y reticula.css de T1, y .a-revelar-texto/
.a-revelar-cartela/.a-apilar de T3; no redefine nada de ahí.
*/

/* --- Titular: solo espaciado y la excepción de centro (capítulos de serie) --- */
.a-titular__ante { margin-block-end: var(--s-1); }
.a-titular--centro { text-align: center; }

/* El recuento entre paréntesis, con el estilo que ya tenía en el menú (Andi, 07-09), pero en tinta.
   El 0.282em es la razón MEDIDA en el menú: 13 px de recuento sobre 46,08 del nombre, así que
   escala con el título en vez de llevar un cuerpo propio. */
.a-num {
	/* En linea no admite transformaciones y el desplazamiento no hacia nada [MEDIDO 07-09: y a 0 en
	   los ocho fotogramas]. Con opacidad no se notaba, pero el numero no subia. */
	display: inline-block;
	color: var(--tinta);
	font-family: var(--fuente-texto);
	font-size: max( 0.282em, 0.72rem );
	font-weight: 500;
	letter-spacing: 0.06em;
}

/* Acoplamiento [MEDIDO]: el Kit de Elementor fija h1..h6 a píxeles congelados a 1440
   (T1, configurar-kit.php) con más especificidad (0,1,1) que un papel suelto (0,1,0) sobre
   una etiqueta de cabecera real. Doble clase para ganar siempre, sin !important.
   El parche cubre las SEIS propiedades del papel, no solo el tamaño: el Kit fija además familia,
   interlínea, tracking y caja por etiqueta, así que devolver solo `font-size` deja un `display`
   sobre un h6 en Work Sans con el tracking de la etiqueta. */
.a-revelar-texto.a-display,
.a-revelar-texto.a-titulo-xl,
.a-revelar-texto.a-titulo-l,
.a-exposiciones__tipo.a-titulo-l {
	font-family: var(--fuente-display);
	font-weight: 500;
}

.a-revelar-texto.a-display {
	font-size: var(--t-display);
	line-height: 0.88;
	letter-spacing: -0.035em;
	text-transform: uppercase;
}

.a-revelar-texto.a-titulo-xl {
	font-size: var(--t-xl);
	line-height: 0.92;
	letter-spacing: -0.03em;
	text-transform: uppercase;
}

.a-revelar-texto.a-titulo-l,
.a-exposiciones__tipo.a-titulo-l {
	font-size: var(--t-l);
	line-height: 1.02;
	letter-spacing: -0.02em;
	text-transform: none;
}

/* --- Cita: filete, imagen circular por corte (sin radio: ver más abajo), firma --- */
.a-cita { margin: 0; padding: 0; }
/* La lista viva de comentarios. El hueco era de 20 px, heredado del contenedor de Elementor que la
   envolvía [MEDIDO en la línea base del 07-09], y se leían pegados (Andi, 09-09). */
.a-citas-lista.a-citas-lista { display: flex; flex-direction: column; gap: var(--s-5); padding: 0; }
.a-cita__filete { width: 3rem; height: var(--filete); background: currentColor; margin-block-end: var(--s-3); }
/* Andi las quería bastante más grandes (05-09). Sin alto fijo ni `cover`: el `height:auto` del reset
   gana igual, así que la caja la marca el archivo y el retrato no se recorta. El `sizes` de
   widget-cita.php va emparejado con este ancho. */
.a-cita__imagen {
	display: block;
	width: clamp(8rem, 18vw, 15rem);
	max-width: 100%;
	margin-block-end: var(--s-2);
}
.a-cita__texto + .a-cita__texto { margin-block-start: 1em; }
.a-cita__firma { margin-block-start: var(--s-2); color: var(--tenue); }

/* --- Cita: plegado «Leer más» sobre el umbral de widget-cita.php (Andi, 05-09) ---
   El <summary> va primero en el DOM (lo pide <details>) y tiene que verse ABAJO. Se hace con
   `order`, no con `column-reverse`: invertida, la columna ancla por el borde INFERIOR, así que al
   desplegar el texto crecía hacia ARRIBA y el scroll saltaba 266 px en móvil y 446 en escritorio
   [MEDIDO 05-09]. En columna normal crece hacia abajo y no se mueve nada. */
.a-cita__cuerpo {
	display: flex;
	flex-direction: column;
	/* Sin esto el navegador compensa para mantener el boton donde estaba y empuja el scroll 5.019 px
	   [MEDIDO 05-09]. Andi lo quiere quieto: el texto crece hacia abajo y el visitante no se mueve. */
	overflow-anchor: none;
}
.a-cita__plegado { order: 1; }
.a-cita__plegado { margin-block-start: var(--s-2); }
.a-cita__boton { cursor: pointer; color: var(--tenue); }
.a-cita__boton:focus-visible { outline: 2px solid var(--tinta); outline-offset: 3px; }
/* 18 líneas: el peor caso medido de un comentario que Andi quiere íntegro (Consuelo Visser, 608
   caracteres, a 390px de ancho da 18 líneas; a 768 y 1440 da menos) [MEDIDO 05-09]. Por debajo del
   umbral en PHP no se pliega nunca, así que este valor solo entra en juego cuando SÍ hay botón. */
.a-cita__plegado ~ .a-cita__parrafos {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 18;
	line-clamp: 18;
	overflow: hidden;
}
.a-cita__plegado[open] ~ .a-cita__parrafos {
	display: block;
	-webkit-line-clamp: unset;
	line-clamp: unset;
	overflow: visible;
}

/* --- Museo: fila de lista tipográfica, no tarjeta. Funciona igual sin imagen --- */
/* Retícula, no caja flexible: con `flex-wrap` la foto cabía en la misma línea que la ciudad cuando
   el nombre era corto, y saltaba de línea cuando era largo, así que aparecía a la derecha en unas
   filas y a la izquierda en otras [reportado por Andi a 1211x1192]. Con dos columnas explícitas, el
   nombre y la ciudad van arriba y la foto siempre debajo, pegada al eje izquierdo. */
.a-museo {
	position: relative;
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: baseline;
	column-gap: var(--s-2);
	padding-block: var(--s-3);
	border-bottom: var(--filete) solid var(--linea);
}
.a-museo__coleccion,
.a-museo__nota { color: var(--tenue); margin-block-start: var(--s-1); }
.a-museo__nota p { margin: 0; }
.a-museo__nota p + p { margin-block-start: var(--s-1); }
/* `nowrap` mantiene «Ciudad (Provincia)» en una línea, pero por debajo de 380 px no cabe y empuja
   el scroll horizontal de la portada entera [MEDIDO 05-09: desborda a 360 y a 320, no a 380]. */
.a-museo__ciudad { white-space: nowrap; }
@media (max-width: 420px) {
	.a-museo__ciudad { white-space: normal; }
}
/* Móvil: una columna y orden explícito nombre → colección → ciudad → texto (Andi, 08-09). En dos
   columnas la ciudad se descolgaba bajo la ficha del cuadro y se leía como parte de ella.
   `display: contents` sube los hijos del bloque principal a esta rejilla para poder ordenarlos. */
@media (max-width: 767px) {
	.a-museo { grid-template-columns: 1fr; align-items: start; }
	.a-museo__principal { display: contents; }
	.a-museo__nombre { order: 1; }
	.a-museo__coleccion { order: 2; }
	.a-museo__ciudad { order: 3; margin-block-start: var(--s-1); }
	.a-museo__nota { order: 4; }
	.a-museo__imagen { order: 5; }
}

/* Base: la foto vive fija dentro de la fila (táctil, y escritorio con movimiento reducido). */
.a-museo__imagen {
	display: block;
	grid-column: 1 / -1;
	justify-self: start;
	width: var(--museo-flotante);
	max-width: 100%;
	/* Sin `aspect-ratio` y con `contain`: la caja la fija el archivo, así que la foto NO se recorta.
	   Con 4/3 y `cover` salían recortadas 3 de 4 [MEDIDO 05-09, entre ellas «El Quijote de Madera»]. */
	height: auto;
	object-fit: contain;
	/* La fila es `space-between`, y según lo largo que fuera el nombre la foto acababa a la derecha
	   en unas y a la izquierda en otras [reportado por Andi a 1211x1192]. Este margen la ancla
	   siempre al eje izquierdo, que es el del sitio. */
	margin-inline-end: auto;
	margin-block-start: var(--s-1);
}
/* Con ratón fino la foto de la fila la sustituye la que sigue al puntero (widgets-museo.js). */
@media (hover: hover) and (pointer: fine) {
	.a-museo__imagen { display: none; }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: reduce) {
	.a-museo__imagen { display: block; }
}

/* La foto que sigue al ratón: un solo elemento flotante, apilando capas por orden de aparición
   y revelándose con clip-path (principio de A6 en animaciones.md, sin GSAP ni sus valores). */
.a-museo__flotante {
	position: fixed;
	top: 0;
	left: 0;
	width: var(--museo-flotante);
	/* Un solo lado fijo (--museo-flotante); el otro lo dicta el archivo vía --proporcion (JS),
	   igual que .a-museo__imagen. Con los dos lados fijos salían recortadas 3 de 4 fotos, hasta
	   el 43,8% del ancho [MEDIDO 05-09; «El Quijote de Madera», ya cuadrada, no podía mostrarlo]. */
	aspect-ratio: var(--proporcion, 1);
	overflow: clip;
	pointer-events: none;
	z-index: 200;
	opacity: 0;
	transition: opacity var(--ms-rapido) var(--curva-salida);
	transform: translate3d(-200%, -200%, 0);
}
.a-museo__flotante--activo { opacity: 1; }
.a-museo__flotante img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	clip-path: inset(100% 0 0 0);
}
.a-museo__flotante img.a-museo__imagen--visible {
	clip-path: inset(0);
	transition: clip-path var(--ms-cine) var(--curva-salida);
}
@media (prefers-reduced-motion: reduce) {
	.a-museo__flotante { display: none; } /* el JS tampoco la crea; refuerzo si algo la insertara */
}

/* --- Prensa: ficha con o sin portada; la proporción la fija el style="aspect-ratio" del PHP --- */
.a-prensa__medio { color: var(--tenue); margin-block-end: var(--s-1); }
.a-prensa__enlace { display: inline-block; margin-block-start: var(--s-2); }

/* --- Exposiciones: lista por tipo, con estado vacío honesto --- */
.a-exposiciones__grupo + .a-exposiciones__grupo { margin-block-start: var(--s-4); }
.a-exposiciones__tipo { margin-block-end: var(--s-2); }
/* Rejilla de dos columnas desde el corte del sitio, como el índice de series (Andi, 05-09): en una
   lista de 91 filas seguidas, cada entrada se leía enorme. Debajo del corte, una columna. */
.a-exposiciones__lista { margin: 0; padding: 0; list-style: none; }
@media (min-width: 768px) {
	.a-exposiciones__lista {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: var(--canal);
	}
}
/* `min-width:0` en los hijos: sin él un lugar largo ni parte ni encoge, y empuja el scroll
   horizontal de la página entera [MEDIDO a 390: 492 px de contenido contra 390 de ventana]. */
.a-exposiciones__item {
	display: flex;
	flex-direction: column;
	align-items: start;
	gap: var(--s-1);
	padding-block: var(--s-2);
	border-block-end: var(--filete) solid var(--linea);
}
.a-exposiciones__anio { color: var(--tenue); }
.a-exposiciones__titulo,
.a-exposiciones__lugar { min-width: 0; max-width: 100%; overflow-wrap: break-word; }
/* Epilogue 500 a `--t-m`, los dos ya en uso (Andi, 05-09). Papel completo y no solo la familia:
   el widget ya no pone `a-cuerpo`, y media propiedad heredada deja el título a otro tamaño. */
.a-exposiciones__titulo {
	font-family: var(--fuente-display);
	font-weight: 500;
	font-size: var(--t-m);
	line-height: 1.15;
	letter-spacing: -0.01em;
}
.a-exposiciones__lugar { color: var(--tenue); }
/* Son fotos de sala, no obra, así que `cover` sí está permitido aquí. */
.a-exposiciones__foto { margin: var(--s-1) 0 0; width: 100%; }
.a-exposiciones__imagen {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}
.a-exposiciones__vacio { color: var(--tenue); }

/* --- Foto de la autora a sangre (crear-sobre-mi.php sección 3): retrato, no obra, cover permitido --- */
.a-foto-autora img { display: block; width: 100%; height: min(85svh, 56rem); object-fit: cover; }

/* --- Apilado: la sticky es de movimiento.css; aquí solo el tamaño de la pieza dentro --- */
.a-apilar__pieza { display: block; color: inherit; text-decoration: none; }
.a-apilar__obra { width: min(88vw, 64rem); max-height: 84svh; }

/* --- Vídeo: ya cargaba diferido; solo el aspecto visual, sin radio --- */
.aurora-video { margin: 0; position: relative; }
.aurora-video--16-9 { aspect-ratio: 16 / 9; }
.aurora-video--4-3  { aspect-ratio: 4 / 3; }
.aurora-video--1-1  { aspect-ratio: 1 / 1; }
.aurora-video--9-16 { aspect-ratio: 9 / 16; }
.aurora-video__lanzar,
.aurora-video__marco { display: block; width: 100%; height: 100%; border: 0; }
/* Complianz envuelve el iframe en un div propio y le da `height: inherit`, que copia el `auto` del
   figure en vez de su alto por `aspect-ratio`: el marco caía a los 150 px por defecto del iframe. */
.aurora-video .cmplz-placeholder-parent { height: 100%; }
/* reset.css (hello-elementor) da a todo <button> sin estilo un borde/texto rosa de examplo y
   `transition: .3s` en todo. El borde y el texto ya quedan tapados, pero la transición seguía viva y
   animaba el contorno del foco desde ese rosa: de ahí el flash [MEDIDO con Tab real, 204,51,102]. */
.aurora-video__lanzar { position: relative; padding: 0; cursor: pointer; background: var(--tinta); overflow: hidden; transition: none; }
.aurora-video__poster {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.85;
	transition: opacity var(--ms-normal) ease, transform var(--ms-normal) ease;
}
.aurora-video__lanzar:hover .aurora-video__poster { opacity: 1; transform: scale(1.03); }
.aurora-video__boton {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 4.5rem;
	height: 4.5rem;
	transform: translate(-50%, -50%);
	background: var(--papel);
}
.aurora-video__boton::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 54%;
	transform: translate(-50%, -50%);
	border-style: solid;
	border-width: 0.7rem 0 0.7rem 1.15rem;
	border-color: transparent transparent transparent var(--tinta);
}
.aurora-video__lanzar:focus-visible { outline: 2px solid var(--tinta); outline-offset: 3px; }
/* El <iframe> no está en la lista genérica de reset.css (a, button, input...): sin esto se queda
   sin ningún contorno propio al recibir el foco (marco.focus() en aurora-widgets.js). */
.aurora-video__marco:focus-visible { outline: 2px solid var(--tinta); outline-offset: 3px; }
.aurora-video__marco:focus:not(:focus-visible) { outline: none; }
.aurora-video__pie { margin-block-start: var(--s-1); color: var(--tenue); }

/* Capa transparente sobre el vídeo: el iframe de Facebook se queda con la rueda del ratón y Lenis
   no la recibe. Recibe la rueda ella (bubbling normal, no es un iframe) y se aparta con un clic
   para que los controles del propio reproductor sigan siendo usables. */
.aurora-video__captura { position: absolute; inset: 0; }

@media (max-width: 767px) {
	.a-museo { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
	.aurora-video__poster { transition: none; }
}

/* Complianz estiliza su documento por ID, `#cmplz-document`, y gana a cualquier clase: pone el
   cuerpo a 14 px, el h2 y el h3 los DOS a 22, y un `max-width: 800px` que pelea con la medida de
   lectura del sitio [MEDIDO 10-09]. Se repone con los tokens y se le quita el tope. */
#cmplz-document {
	font-size: var(--t-cuerpo);
	line-height: var(--lh-cuerpo);
	max-width: none;
}
/* El papel de `.a-titulo-l` (tipografia.css:78) repuesto a mano: legal.php marca estos h2 con esa
   clase, pero el `#cmplz-document h2` de Complianz (1,0,1) le gana. Iban a 27,36 px contra los
   46,08 de privacidad [MEDIDO 10-09]; el aire lo pone `.a-legal__seccion +`, no el h2. */
#cmplz-document h2 {
	font-family: var(--fuente-display);
	font-size: var(--t-l);
	font-weight: 500;
	line-height: 1.02;
	letter-spacing: -0.02em;
	text-transform: none;
	margin-block: 0;
	padding-bottom: 0;
}
#cmplz-document h3,
#cmplz-document h4,
#cmplz-document h5 {
	font-family: var(--fuente-texto);
	font-size: var(--t-cuerpo);
	font-weight: 500;
	line-height: var(--lh-cuerpo);
	margin-block: var(--s-2) var(--s-1);
	padding-bottom: 0;
}
#cmplz-document p,
#cmplz-document li,
#cmplz-document td,
#cmplz-document th {
	font-size: var(--t-cuerpo);
	line-height: var(--lh-cuerpo);
}
/* Complianz sangra sus listas 15 px y les pone 15 de aire, por ID (document.css:398): el `ul` de
   cookies medía 785 contra 748 de sus párrafos [MEDIDO 10-09]. El tope lo pone reticula.css. */
#cmplz-document ul,
#cmplz-document ol { margin: 0 0 var(--s-1); }
#cmplz-document .cmplz-category-title,
#cmplz-document .cmplz-always-active {
	font-size: var(--t-etiqueta);
	line-height: var(--lh-etiqueta);
}