/*
Widgets de obra Aurora Boza: aurora_obra, aurora_reticula_obra («la sala») y aurora_series.
Plan T4. Consume tokens.css, reticula.css y movimiento.css de T1/T3; no redefine nada de ahí.
*/

/* --- La obra: nunca se recorta, nunca se mueve ------------------------- */
.a-obra {
	position: relative;
	margin: 0;
	overflow: hidden;
	background: var(--papel); /* aire = margen, no marco: --linea leía gris [MEDIDO, rechazado en el mosaico] */
}
.a-obra__imagen {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain; /* un cuadro no se recorta jamás */
}

/* En el apilado cada lámina mide 100svh y la siguiente la cubre. Una obra más alta que la ventana
   quedaba tapada por la mitad antes de verse entera: hasta el 50 % en «Vida» [MEDIDO en
   REVISION-T6.md, R1]. Se limita por ALTO y el ancho lo deriva su `aspect-ratio`, así que la obra
   entra completa y sigue sin recortarse. */
.a-apilar .a-obra {
	max-block-size: calc(100svh - var(--s-5));
	inline-size: auto;
	max-inline-size: 100%;
	justify-self: center;
}

/* Héroe de una obra sola: no hereda min-height:100svh (movimiento.css:69, ajeno) ni el tope de
   arriba, pensados para VARIAS láminas apiladas. Gana por especificidad (0,2,0 > 0,1,0), sin
   tocar movimiento.css. */
.a-heroe-solo .a-apilar__pieza {
	position: static;
	min-height: 0;
}
.a-heroe-solo .a-apilar .a-obra {
	inline-size: 100%;
	max-inline-size: 100%;
	max-block-size: 100svh;
}

/* Caja negra fija, ceñida al texto por `padding` (no una banda de ancho fijo): Andi probó el
   contraste adaptativo con una obra clara y lo revocó («queda muy cutre»). Texto siempre blanco. */
.a-apilar__etiqueta {
	position: absolute;
	inset-block-end: var(--margen);
	inset-inline-start: var(--margen);
	max-width: calc(100% - var(--margen) * 2);
	padding: var(--s-2) var(--s-3);
	background: var(--negro);
	color: var(--blanco);
	font-style: normal; /* figcaption/Kit traían cursiva de serie [MEDIDO] */
	pointer-events: none;
}
.a-apilar__titulo { margin: 0; font-size: var(--t-m); line-height: 1.15; font-style: normal; }
.a-apilar__serie {
	margin: var(--s-1) 0 0;
	font-size: var(--t-etiqueta);
	line-height: var(--lh-etiqueta);
	letter-spacing: .14em;
	font-style: normal;
	text-transform: uppercase;
	opacity: .85;
}

/* El enlace es la rejilla entera, así que sin esto la etiqueta del cursor y el clic cubrían también
   el blanco de al lado: 1.385 px de zona sensible para un cuadro de 448 [MEDIDO 05-09]. Los huecos
   quedan inertes y el hover sigue funcionando, porque un hijo activo hace coincidir `:hover` en sus
   ancestros. */
.a-pieza, .a-apilar__pieza { pointer-events: none; }
.a-pieza > *, .a-apilar__pieza > * { pointer-events: auto; }

/* Anterior a la izquierda, siguiente a la derecha a cualquier ancho: el `max-width:767px` que
   había aquí las mandaba a columna [MEDIDO: lo contrario de lo pedido]. Sobra: `flex-wrap` ya
   apila cuando no caben, y `margin-inline-start:auto` empuja la siguiente a su borde aun sola. */
.a-vecinas {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--s-3);
}
.a-vecina--siguiente { text-align: right; margin-inline-start: auto; }

/* Encoge con la PANTALLA y no segun si cabe: un cuerpo por pagina saldria distinto en
   internacionales que en las otras dos (Andi, 05-09). «Colectivas» + «Individuales» pide 411 px y
   a 320 hay 288 [MEDIDO]. */
@media (max-width: 767px) {
	.a-vecina .a-titulo-l { font-size: clamp(1.05rem, 5.2vw, 1.75rem); }

	/* `space-between` ya las manda a los dos bordes en la misma fila, y al envolver las deja sobre
	   el mismo eje izquierdo: una a cada borde en filas distintas es lo que Andi descarto. */
	.a-vecina--siguiente { text-align: left; margin-inline-start: 0; }
	.a-vecinas { gap: var(--s-2); }
}

/* `a:hover` (style.css) gana por especificidad a `.a-enlace{text-decoration:none}` (movimiento.css):
   el subrayado nativo se sumaba al de `::after` [MEDIDO: doble solo al pasar el ratón, no con
   el teclado]. */
.a-vecina:hover { text-decoration: none; }

/* La sección flex-column que envuelve `.a-sala` medía mal su alto con contenido muy alto [MEDIDO
   a 767px: 15.575,5 px de contenido contra 15.085,1 px de caja] y la última pieza pintaba encima
   del nav siguiente. `:has()` la distingue sin depender de su clase. */
.a-seccion:has(.a-sala) { display: block; }

/* --- La pieza: obra + cartela, cartela al lado alineada al borde inferior --- */
.a-pieza {
	display: grid;
	align-items: end;
	margin-block-end: var(--s-4); /* la MISMA distancia entre todas, sea cual sea la orientacion (Andi, 09-09) */
	text-decoration: none;
	color: inherit;
}
/* Cero hover sobre la obra: solo la cartela reacciona, y en --ms-rapido.
   Transición en el estado base (no solo en :hover): si no, entra suave y sale de golpe. R6. */
.a-pieza .a-revelar-cartela {
	transition: opacity var(--ms-rapido) var(--curva-salida), transform var(--ms-rapido) var(--curva-salida);
}
.a-pieza:hover .a-revelar-cartela {
	opacity: 1;
	transform: none;
}

/* --- «La sala»: columnas por proporción (§6.1), carriles alternos ------ */
.a-sala { display: flex; flex-direction: column; }

/* El título va en --t-l (46 px a 1440) dentro de dos columnas (220 px): una palabra larga se sale
   de la caja y empuja el scroll horizontal de la página entera. [MEDIDO: 1.459 px contra 1.440] */
/* `hyphens` fuera: partía «Abrazando» en «Abra-zando» teniendo columnas vacías al lado. Se queda
   `overflow-wrap`, que solo actúa cuando una palabra de verdad no cabe. */
.a-obra__cartela {
	min-width: 0;
	overflow-wrap: break-word;
	hyphens: manual;
}

/* Tres clases para ganarle a `.a-titulo-l.a-titulo-l`, que es (0,2,0), sin depender del orden de
   carga de las hojas ni de `!important`. */
.a-obra__cartela .a-titulo-l.a-titulo-l {
	font-size: var(--t-obra);
}

/* Tres columnas, no dos: con dos, un título en --t-l no cabe y se parte por la mitad aunque
   sobren tres columnas vacías a su lado. La pared vacía sigue existiendo (7 + 3 de 12). */
.a-pieza__cartela {
	grid-column: span 3;
	/* Suelo de lectura: con `min-width:0` la cartela se estrangulaba hasta 110 px y partía el
	   título en tres líneas [MEDIDO a 768x400]. `min(⬦,100%)` no puede sacar scroll horizontal. */
	min-width: min(16ch, 100%);
	overflow-wrap: break-word;
	hyphens: manual;
}


/* --- Los tres carriles, derivados --------------------------------------
   Acoplamiento con `--columnas` de reticula.css (12/6/4): de ahi sale la POSICION, asi que la
   pieza solo declara anchos y ningun tramo puede quedarse sin su carril.
   [MEDIDO a 900: el centro caia en la columna 1, con la tabla vieja.] */
.a-pieza {
	--obra: 7;
	--texto: 3;
	--centro: calc(round(down, (var(--columnas, 12) - var(--obra)) / 2, 1) + 1);
}

/* Solo con carriles: por debajo de 768 la pieza entera va a ancho completo. */
@media (min-width: 768px) {
	.a-pieza__obra    { grid-column: 1 / span var(--obra); }
	.a-pieza__cartela { grid-column: calc(var(--obra) + 1) / span var(--texto); }

	/* La obra termina en la ultima columna; su cartela, pegada a donde la obra empieza. */
	.a-pieza--der .a-pieza__obra {
		grid-column: calc(var(--columnas, 12) - var(--obra) + 1) / span var(--obra);
	}
	.a-pieza--der .a-pieza__cartela {
		grid-column: calc(var(--columnas, 12) - var(--obra) + 1 - var(--texto-der, var(--texto))) / span var(--texto-der, var(--texto));
	}

	/* Separada de las DOS guardas, con su cartela al otro lado de la obra. */
	.a-pieza--centro .a-pieza__obra    { grid-column: var(--centro) / span var(--obra); }
	.a-pieza--centro .a-pieza__cartela { grid-column: calc(var(--centro) + var(--obra)) / span var(--texto); }
}

/* 12 columnas. Rango EXCLUSIVO: sin el, ganaba por especificidad a la regla movil.
   Aqui solo van ANCHOS. */
@media (min-width: 1024px) {
	/* Las dos, en la MISMA fila: con la cartela en columnas anteriores a su obra (carril derecho)
	   la colocacion automatica ya habia avanzado de fila y la mandaba debajo, 18 de 33 piezas
	   [MEDIDO 05-09, sobresalia entre 165 y 301 px]. */
	.a-pieza__obra,
	.a-pieza__cartela { grid-row: 1; }
	.a-pieza__cartela { align-self: end; }

	/* La cartela se alinea contra SU obra, no contra el eje de la pagina: a la izquierda del
	   cuadro dejaba un hueco irregular entre el texto y la obra [reportado por Andi]. Es la unica
	   excepcion al eje unico, y es sistematica: el texto siempre toca su cuadro. */
	.a-pieza--der .a-pieza__cartela { text-align: right; }

	/* Anchos de escritorio. La posicion no se repite aqui: sale de la formula de arriba. */
	.a-pieza--h { --obra: 7; --texto: 3; --texto-der: 5; }
	.a-pieza--v { --obra: 4; --texto: 3; --texto-der: 5; }
	.a-pieza--q { --obra: 5; --texto: 3; --texto-der: 5; }

	/* «Mas de la serie» es contenido secundario: con las mismas cajas que la obra principal, la
	   primera relacionada caia en su misma posicion y con su mismo ancho en 3 de cada 4 fichas
	   [MEDIDO 05-09]. Un escalon por debajo, y asi ademas hay jerarquia. */
	.a-sala--secundaria .a-pieza--h { --obra: 5; --texto: 3; --texto-der: 3; }
	.a-sala--secundaria .a-pieza--v { --obra: 3; --texto: 3; --texto-der: 3; }
	.a-sala--secundaria .a-pieza--q { --obra: 4; --texto: 3; --texto-der: 3; }

}

/* Aqui iba un `margin-top` por orientacion que desigualaba el hueco entre piezas: 56 px tras una
   apaisada, 88 tras una cuadrada, 144 tras una vertical. Retirado: en A/B sobre la misma carga no
   movia ni la relacion obra-cartela ni el ancho, solo el aire de encima [MEDIDO 09-09]. */

/* 6 columnas. Rango EXCLUSIVO de la media query movil, para que no compita con ella por
   especificidad. Aqui solo van ANCHOS. */
@media (min-width: 768px) and (max-width: 1023px) {
	/* Sin fila fija, la colocacion automatica mandaba la cartela abajo: 4/33 piezas sobresalian
	   159 px y 12/33 caian en el lado equivocado [MEDIDO en /galeria/urbanos/]. */
	.a-pieza__obra,
	.a-pieza__cartela { grid-row: 1; }
	.a-pieza__cartela { align-self: end; }
	.a-pieza--der .a-pieza__cartela { text-align: right; }

	/* Anchos del tramo de 6 columnas. Sin esto la secundaria mide igual que la principal, sin
	   jerarquia [MEDIDO: 487 px las dos]. */
	.a-pieza--h { --obra: 4; --texto: 2; --texto-der: 2; }
	.a-pieza--v,
	.a-pieza--q { --obra: 3; --texto: 3; --texto-der: 3; }

	.a-sala--secundaria .a-pieza--h { --obra: 2; --texto: 2; --texto-der: 2; }
	.a-sala--secundaria .a-pieza--v,
	.a-sala--secundaria .a-pieza--q { --obra: 2; --texto: 3; --texto-der: 3; }

}

@media (max-width: 767px) {
	/* Por debajo de 768px la cartela pasa debajo: todo ocupa el ancho completo.
	   Rango de arriba ya excluyente (min-width:768px), así que esta regla no compite por
	   especificidad con ninguna otra: gana por ser la única activa aquí (F2). */
	.a-pieza__obra,
	.a-pieza__cartela {
		grid-column: 1 / -1;
		margin-top: 0;
	}
}

/* --- Índice de series: capítulos a todo el campo ----------------------- */
.a-series__item {
	display: block;
	padding-block: var(--s-4);
	border-top: var(--filete) solid var(--linea);
	text-decoration: none;
	color: inherit;
}
.a-series__item:first-child { border-top: none; }

/* `flex-wrap` y `min-width: 0`: a 390 el recuento no cabía en la misma línea que el nombre y
   sacaba 3 px de scroll horizontal [MEDIDO en REVISION-T6.md, R4]. */
.a-series__cabecera {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--s-1) var(--s-2);
	margin-block-end: var(--s-2);
}
.a-series__cabecera > * { min-width: 0; }
.a-series__numero { color: var(--tenue); }

/* --- Portada, «cinco obras»: el panel no puede medir menos que su obra ------ */
/* `.a-apilar > *` (movimiento.css) fuerza 100svh y `top:0`: hueco creciente al estrechar [MEDIDO:
   136px a 1800px, 310px a 1024px] y la obra tapada por el logo/menú fijos al pasar. */
.a-apilar:has(> :nth-child(5):last-child) > * {
	min-height: 0;
	top: calc(var(--margen) + var(--logo-alto) + var(--s-5)); /* misma guarda que ya usa cada sección */
}
/* La obra tiene que caber ENTERA entre esa guarda de arriba y la misma guarda abajo: el tope
   genérico de `.a-apilar .a-obra` (arriba) solo restaba una vez `--s-5`, y con el nuevo `top`
   la obra podía salirse por abajo de la ventana en anchos cortos. Resta las dos. */
.a-apilar:has(> :nth-child(5):last-child) .a-obra {
	max-block-size: calc(100svh - var(--margen) - var(--logo-alto) - var(--s-5) - var(--s-5));
}