/*
Cabecera, menú y pie. La colocación la hace CSS; Elementor solo aporta estructura y contenido.
Tokens de T1 y de T2 en tokens.css. Ni un valor de color, tamaño o espaciado ajeno a esas variables.
*/

/* Elementor lo enciende para todo el sitio; aquí se apaga porque no está en el catálogo de efectos
   del sistema de diseño, no porque estorbe a ninguna prueba: comprobado que el sitio pasa igual
   con él encendido. :root gana por especificidad sin depender del orden de las hojas. */
:root {
	scroll-behavior: auto;
	/* Reserva el canal de la barra siempre, abierto el panel o no: sin esto, `overflow:hidden`
	   en el body (abajo) quita la barra y todo lo anclado al borde derecho salta 15 px
	   [MEDIDO, B2 de REVISION-CABECERA-3.md].
	   `both-edges`: con `stable` a secas el canal solo se reserva a la DERECHA, asi que la guarda
	   derecha se veia 15 px mas ancha que la izquierda en toda la web (27 contra 42 a 1440)
	   [MEDIDO, reportado por Andi]. Reservado a los dos lados, las dos guardas miden igual. */
	scrollbar-gutter: stable;
}

/* --- Barra de scroll propia (Andi, 05-09) --------------------------------------------------
   La nativa se oculta y se dibuja la nuestra, redondeada. Con ella desaparece el canal de 15 px
   que hacia la guarda derecha mas ancha que la izquierda en toda la web [MEDIDO: 27 contra 42]. */
html { scrollbar-width: none; scrollbar-gutter: auto; }
html::-webkit-scrollbar { display: none; }

.a-barra {
	position: fixed;
	top: 0;
	right: 4px;
	width: 8px;
	height: 100dvh;
	z-index: 300;
	pointer-events: none;
	opacity: 0;
	transition: opacity var(--ms-normal) var(--curva-salida);
}
.a-barra--visible { opacity: 1; }
.a-barra__pulgar {
	position: absolute;
	left: 0;
	width: 100%;
	border-radius: 4px;
	background: var(--tinta);
	/* El alto y la posicion los escribe el motor de scroll en estas dos variables. */
	height: var(--barra-alto, 0px);
	transform: translate3d(0, var(--barra-y, 0px), 0);
}

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

/* ============================================================ */
/* Cabecera: el marco. Cada pieza que mezcla es su propio marco   */
/* (position:fixed + blend en el mismo elemento). El header queda */
/* static [MEDIDO T2-ter]: fixed en el header rompe esa mezcla.   */
/* ============================================================ */

header.aurora-cabecera {
	height: 0;
	overflow: visible;
	pointer-events: none;
}

/* Envoltorios puros: nada que cree un contexto de apilamiento (transform, filter, will-change,
   opacity<1, contain, z-index con position), o volvería a aislar la mezcla de sus hijos.
   pointer-events:none llega heredado del header; cada pieza clicable de abajo lo recupera. */
.aurora-cabecera,
.aurora-cabecera__esquina {
	position: static;
	min-height: 0;
	padding: 0;
}

/* La esquina inferior izquierda (nombre de serie + recuento en páginas de serie) la rellena la
   página, no esta plantilla global: aquí solo se deja el sitio. No comparte ancestro fijo con
   nada que mezcle, así que puede ser fixed ella misma sin aislar a nadie. */
.aurora-cabecera__esquina--inferior {
	position: fixed;
	inset-inline-start: var(--margen);
	inset-block-end: var(--margen);
	z-index: 100;
	pointer-events: auto;
}

/* ---------- El logotipo: fijo y con la mezcla en sí mismo ---------- */

.aurora-cabecera__logo {
	line-height: 0;
}

.aurora-cabecera__logo a img[src] {
	position: fixed;
	inset-block-start: var(--margen);
	inset-inline-start: var(--margen);
	z-index: 100;
	display: block;
	width: auto;
	max-width: none;
	height: var(--logo-alto);
	/* El logotipo puede venir en cualquier color; se fuerza a blanco puro para que la mezcla por
	   diferencia funcione igual sobre fondo claro y sobre fondo oscuro. */
	filter: brightness(0) invert(1);
	mix-blend-mode: difference;
	pointer-events: auto;
}

/* Freno de ancho bajo 551px (mismo corte que el correo del pie): el recorte a la tinta deja
   el SVG en 8,39:1 y desde 430px pisa al botón [MEDIDO, REVISION-CABECERA-5.md 4.1]. 100% y
   no 100vw: fixed la resuelve sin la barra; con 100vw la holgura en escritorio caía a 2,6px. */
@media (max-width: 550px) {
	.aurora-cabecera__logo a img[src] {
		height: auto;
		max-height: var(--logo-alto);
		max-width: calc(100% - 160px);
	}
}

/* ============================================================ */
/* Menú a pantalla completa (G2). Lo imprime [aurora_menu]; de   */
/* Elementor ya no queda nada aquí. El logotipo, sin tocar.      */
/* ============================================================ */

/* La caja que envuelve al menú no coloca: coloca cada pieza por sí misma. */
.aurora-cabecera__menu {
	position: static;
}

/* ---------- El botón: mismo sitio, mismo tamaño y misma mezcla que el que sustituye ---------- */

/* Clase doblada en los tres botones y en el rótulo: el Kit de Elementor los alcanza con
   `button:hover` y `h2` (0,1,1), que ganan a una sola clase [MEDIDO: el botón salía con fondo
   #cc3366 al pasar el ratón y «SECCIONES» a 95 px]. */
.a-menu__boton.a-menu__boton {
	display: flex;
	align-items: center;
	position: fixed;
	/* Nivela su CENTRO con el del logotipo (Andi, 05-09), igual que el botón anterior. */
	inset-block-start: calc(var(--margen) + (var(--logo-alto) - var(--boton-menu)) / 2);
	inset-inline-end: var(--margen);
	/* Por encima del panel (40) y del logotipo (100): la X tiene que seguir cerrando. */
	z-index: 102;
	width: auto;
	height: var(--boton-menu);
	padding: 0;
	/* El sumando es el aire entre la palabra y el aspa (Andi, 06-09: pocos px, cerca queda bien).
	   Sin el, la holgura eran 4px cerrado y 6,6 abierto [MEDIDO]. Las aspas no se mueven: van
	   ancladas al borde del boton, no al final del relleno. */
	padding-inline-end: calc(var(--filete-ancho) + var(--filete-inicio) * 2 + 6px);
	border: 0;
	background: transparent;
	mix-blend-mode: difference;
	pointer-events: auto;
	/* Recorta el relevo de la palabra: sale por abajo y entra por arriba sin asomar. */
	overflow: hidden;
}

/* Bloque de la altura del botón: así el 120 % del relevo saca la palabra fuera del recorte, y
   `yPercent` de GSAP necesita que no sea un `inline`. */
.a-menu__boton-texto {
	display: block;
	height: var(--boton-menu);
	font-family: var(--fuente-texto);
	font-weight: 500;
	font-size: var(--t-etiqueta);
	line-height: var(--boton-menu);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--blanco);
	white-space: nowrap;
}

/* Los dos filetes heredan la mezcla del botón; anclados a su borde derecho. Los dos parten de la
   posición y el largo del ASPA, y lo cerrado se consigue moviéndolos y recortándolos: así solo se
   animan `transform` y `clip-path`, que es lo que permite la restricción global 6. */
.a-menu__boton i {
	position: absolute;
	inset-inline-end: var(--filete-inicio);
	top: var(--filete-top-abierto);
	width: var(--filete-ancho);
	height: var(--filete-menu);
	border-radius: calc(var(--filete-menu) / 2);
	background: var(--blanco);
	transition: transform var(--ms-normal) var(--curva-ambas), clip-path var(--ms-normal) var(--curva-ambas);
}

.a-menu__boton i:first-child {
	transform: translateY(calc(var(--filete-top-cerrado-1) - var(--filete-top-abierto)));
}

/* El recorte por la izquierda deja el borde derecho donde estaba y la baja a --filete-ancho-2. */
.a-menu__boton i:last-child {
	transform: translateY(calc(var(--filete-top-cerrado-2) - var(--filete-top-abierto)));
	clip-path: inset(0 0 0 calc(100% - var(--filete-ancho-2)));
}

/* Abierta es una X: las dos aspas del mismo largo, o no cierran. */
.a-menu__boton[aria-expanded="true"] i {
	clip-path: inset(0);
}
.a-menu__boton[aria-expanded="true"] i:first-child { transform: rotate(45deg); }
.a-menu__boton[aria-expanded="true"] i:last-child  { transform: rotate(-45deg); }

/* ---------- El marco: pantalla completa. `dvh` para el marco fijo, nunca `vh`. ---------- */

.a-menu {
	position: fixed;
	inset: 0;
	z-index: 40;
	visibility: hidden;
	min-height: 100dvh;
	/* `.a-oscuro` pinta fondo; aquí no, o taparía de golpe lo que el velo descubre poco a poco. */
	background: none;
	pointer-events: auto;
}

.a-menu--abierto { visibility: visible; }

/* Entra desde la derecha. Ellos animan `width`, que recalcula la maquetación en cada fotograma;
   aquí se recorta, que es lo que la restricción 6 permite y se ve igual. */
.a-menu__fondo {
	position: absolute;
	inset: 0;
	background: var(--papel);
}

/* El MISMO recorte en el fondo y en el contenido, y un solo tween que mueve los dos: donde la
   cortina no ha llegado no se pinta nada, así que ver el menú sobre el papel deja de depender de
   que los tiempos del gesto estén bien elegidos (Andi, 07-09). */
.a-menu__fondo,
.a-menu__contenido {
	clip-path: inset(0 0 0 100%);
}

.a-menu__contenido {
	position: absolute;
	inset: 0;
	gap: var(--s-3) var(--canal);
	/* La primera línea del menú a la altura del título de la página (Andi, 06-09): caja de las migas
	   (migas.css:13 más su renglón) + aire de arriba del campo (--s-5) [MEDIDO: 239 a 1440]. */
	padding: calc(var(--margen) + var(--logo-alto) + var(--s-1) + var(--t-etiqueta) * var(--lh-cartela) + var(--s-5)) var(--margen) var(--margen);
	overflow-y: auto;
	overscroll-behavior: contain;
}

/* Un solo submenú a la vez: el que no toca se retira del flujo y del orden de tabulación. */
.a-menu [hidden] { display: none !important; }

/* ---------- La lista de secciones ---------- */

.a-menu__rotulo.a-menu__rotulo {
	margin: 0 0 var(--s-2);
	font-family: var(--fuente-texto);
	font-weight: 500;
	font-size: var(--t-etiqueta);
	line-height: var(--lh-etiqueta);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--tenue);
}

.a-menu__lista {
	display: flex;
	flex-direction: column;
	gap: var(--s-1);
	margin: 0;
	padding: 0;
	list-style: none;
}

.a-menu__fila {
	display: flex;
	align-items: center;
	gap: var(--s-1);
}

/* El subrayado del sitio, ceñido al texto y su recuento (Andi, 06-09): «solo al ancho del texto
   junto con el (x) número, no más». Por eso el enlace deja de estirarse hasta el borde y el «+» se
   va allí con su propio margen. Va DENTRO de la caja porque el recorte sigue cerrado por abajo. */
.a-menu__fila > .a-menu__abrir { margin-inline-start: auto; }

.a-menu__enlace::after {
	content: '';
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: right;
	transition: transform var(--ms-normal) var(--curva-ambas);
}
/* Solo con puntero fino: en táctil el `:hover` se queda pegado tras el toque, como en el resto del
   sitio. El foco de teclado sí lo dibuja, y en táctil se vuelve a apagar. */
@media (hover: hover) and (pointer: fine) {
	.a-menu__enlace:hover::after { transform: scaleX(1); transform-origin: left; }
}
.a-menu__enlace:focus-visible::after { transform: scaleX(1); transform-origin: left; }
@media (hover: none) {
	.a-menu__enlace:focus-visible::after { transform: scaleX(0); }
}

/* El recorte es lo que hace que el número y las letras suban desde su renglón. Abierto por ARRIBA
   (Andi, 06-09): con `line-height: 1.15` la tilde de las versales se sale del renglón y este recorte
   se la comía. Lo que sube entra desde abajo, así que arriba no sujetaba nada. */
.a-menu__enlace.a-menu__enlace {
	display: flex;
	/* Sin crecer: la caja mide su contenido, que es lo que ciñe el subrayado al texto y su recuento. */
	flex: 0 1 auto;
	position: relative;
	align-items: baseline;
	gap: var(--s-1);
	overflow: hidden;
	padding-block-start: 0.3em;
	margin-block-start: -0.3em;
	font-family: var(--fuente-display);
	font-weight: 500;
	font-size: var(--t-l);
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--tinta);
	text-decoration: none;
	/* Mayusculas en menu y submenu (Andi, 06-09, a ver que tal queda). Con el tracking negativo
	   del papel las versales se pegan, asi que aqui vuelve a cero. */
	text-transform: uppercase;
	letter-spacing: 0;
}

/* En blanco y atado al nombre (Andi, 07-09): el 0.282em es la razón que ya tenía medida aquí, 13 px
   sobre 46,08 del rótulo. El suelo de 0,72rem es suyo también: sin él, en móvil bajaba a 7,9 px y se
   quedaba ilegible [MEDIDO 07-09 a 390]. */
.a-menu__num {
	flex: 0 0 auto;
	font-family: var(--fuente-texto);
	font-size: max( 0.282em, 0.72rem );
	letter-spacing: 0.06em;
	color: var(--blanco);
}

/* El recorte de SplitText sujeta a las letras, que entran desde ABAJO. Abierto por arriba, donde no
   sujetaba nada y cortaba las tildes de las versales (Andi, 06-09). El margen negativo devuelve al
   flujo lo que da el relleno: el texto no se mueve. */
.a-menu .linea {
	display: block;
	overflow: hidden;
	padding-block-start: 0.3em;
	margin-block-start: -0.3em;
}

/* Once series a --t-l no caben en 900 px de alto: el submenú baja un escalón [MEDIDO a 1440]. */
.a-menu__sub .a-menu__enlace.a-menu__enlace { font-size: var(--t-m); }

/* El «+» abre el submenú; el enlace de al lado sigue llevando a la página. */
.a-menu__abrir.a-menu__abrir {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 2.2em;
	height: 2.2em;
	font-family: var(--fuente-texto);
	font-size: var(--t-etiqueta);
	color: inherit;
	background: transparent;
	border: var(--filete) solid currentColor;
	border-radius: 50%;
}

.a-menu__atras.a-menu__atras {
	margin: 0 0 var(--s-2);
	padding: 0;
	font-family: var(--fuente-texto);
	font-size: var(--t-etiqueta);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--tenue);
	background: transparent;
	border: 0;
}

.a-menu__atras::before { content: "\2190\00a0"; }

/* Los TRES botones del menú, en una sola regla: Elementor pone `transition: all .3s` a todo
   `button` y esa transición se pelea con lo que GSAP escribe cada fotograma [MEDIDO: el recuento
   se quedaba en `scale(0)`]. Los filetes de la hamburguesa llevan la suya propia y no heredan. */
.a-menu__boton.a-menu__boton,
.a-menu__abrir.a-menu__abrir,
.a-menu__atras.a-menu__atras {
	transition: none;
}

/* ---------- La obra: caja con la proporción del archivo y sin recorte. CLAUDE.md §4. ---------- */

.a-menu__obra {
	display: block;
	color: var(--tinta);
	text-decoration: none;
}

/* El estado base es el descubierto: GSAP entra `from` este valor, y sin él tendría que
   interpolar contra `none`, que no se puede. */
.a-menu__obra-caja {
	margin: 0 0 var(--s-1);
	clip-path: inset(0 0 0 0);
}

.a-menu__obra-imagen {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 40svh;
	object-fit: contain;
}

.a-menu__obra-titulo,
.a-menu__obra-serie {
	display: block;
	font-family: var(--fuente-texto);
	font-size: var(--t-cartela);
	line-height: var(--lh-cartela);
}

.a-menu__obra-serie { color: var(--tenue); }

.a-menu__correo {
	display: block;
	font-family: var(--fuente-texto);
	font-size: var(--t-m);
	line-height: 1.2;
	color: var(--tinta);
}

/* ---------- Escritorio: la obra a la izquierda, las secciones desde la columna 7 (la referencia
     arranca su lista al 51 % del ancho [MEDIDO]) y el correo abajo con ellas, a la guarda del borde.
     El final de columna es `-1`, así que sigue a `--columnas` sin escribir su número. */

@media (min-width: 1024px) {
	.a-menu__contenido {
		display: grid;
		grid-template-columns: repeat(var(--columnas), minmax(0, 1fr));
		grid-template-rows: 1fr auto;
	}
	.a-menu__obra      { grid-column: 1 / span 4; grid-row: 1; align-self: start; }
	.a-menu__secciones { grid-column: 7 / -1;     grid-row: 1; }
	.a-menu__correo    { grid-column: 7 / -1;     grid-row: 2; justify-self: start; align-self: end; }
}

/* ---------- Tableta y móvil: columna, relleno invertido como en la referencia, orden lista → obra →
     correo. El paso a una columna vive en el corte de 1024 y no en el de 768 (Andi, 06-09): un iPad
     Air de 820 en rejilla dejaba media pantalla vacía; la referencia corta en 950 [MEDIDO]. */

@media (max-width: 1023px) {
	.a-menu__contenido {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: 13svh var(--margen) var(--margen);
	}
	.a-menu__secciones { order: 1; }
	.a-menu__obra      { order: 2; }
	.a-menu__correo    { order: 3; }
	/* A 390 la obra entera más las seis filas más el correo no caben en 844 con 40svh. */
	.a-menu__obra-imagen { max-height: 32svh; }
}

body.aurora-menu-abierto {
	overflow: hidden;
}

/* La barra propia es z-index 300 y flotaría sobre el panel. */
body.aurora-menu-abierto .a-barra { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
	/* Sin línea de tiempo que lo descubra, el velo tiene que estar ya puesto. */
	.a-menu__fondo,
	.a-menu__contenido { clip-path: none; }
	.a-menu__boton i { transition: none; }
}

/* ============================================================ */
/* Pie: sección negra, correo grande, sin redes                  */
/* ============================================================ */

.aurora-pie {
	/* El aire de arriba lo manda el logotipo flotante, que hay que despejar; el hueco hasta la
	   franja copia ese mismo valor para que el correo quede centrado (Andi, 05-09). */
	--aire-pie: calc(var(--margen) * 2 + var(--logo-alto));
	display: flex;
	flex-direction: column;
	gap: var(--aire-pie);
	width: 100%;
	/* No pantalla completa (Andi, 05-09: «el footer lo quiero pequeño»): basta con igualar el
	   alto del marco fijo (logo+margen), no el de la ventana [MEDIDO, B1 de REVISION-CABECERA-3.md]. */
	/* Mismo aire arriba y abajo (Andi, 05-09): con `--s-4` abajo se veian distintos, 52 contra 64
	   a 390 [MEDIDO]. Arriba manda porque tiene que despejar el logotipo flotante. */
	padding: var(--aire-pie) var(--margen) var(--s-1);
}

/* `!important` heredado del Kit de Elementor, que pintaba `a` en negro con la misma especificidad;
   se queda porque `.aurora-pie__franja a` de abajo cuenta con él para ganar por orden. */
.aurora-pie a {
	color: var(--tinta) !important;
	text-decoration: none;
}

/* Andi, 05-09: el pie sin subrayado en reposo. Se queda en ratón y en teclado porque un enlace
   tiene que reconocerse; el de ratón acotado a puntero fino, que en táctil el :hover se queda
   pegado tras el toque (mismo recorte que `.a-enlace` en movimiento.css). */
.aurora-pie a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.25em;
	text-decoration-thickness: var(--filete);
}

@media (hover: hover) and (pointer: fine) {
	.aurora-pie a:hover {
		text-decoration: underline;
		text-underline-offset: 0.25em;
		text-decoration-thickness: var(--filete);
	}
}

/* El tamaño y la caja salen de .a-titulo-xl; aquí solo las dos excepciones reales de esta
   instancia: un correo no va en versales y necesita partirse sin espacios.
   Doblada con su ancestro (0,3,0) para ganar a `tipografia.css` (0,2,0) [MEDIDO, B4 de
   REVISION-CABECERA-3.md]. */
.aurora-pie .aurora-pie__correo.aurora-pie__correo {
	margin: 0;
	text-transform: none;
	overflow-wrap: anywhere;
	/* Andi, 05-09: el correo del pie no se parte en dos líneas a ningún ancho. --t-xl deja de
	   crecer en su suelo de 40px y ahí ya no cabe; esto sigue su MISMA pendiente (6.6vw) por
	   debajo del suelo, sin inventar un tamaño ni un corte a un ancho concreto. */
	font-size: min(var(--t-xl), 6.6vw);
}

/* El trazo se desliza, como en el resto de enlaces del sitio, en vez del subrayado nativo que
   aparece de golpe (Andi, 05-09). Vale para TODO el pie: correo, copyright y «Subir». */
.aurora-pie a { position: relative; text-decoration: none !important; }
.aurora-pie a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -0.05em;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: right;
	transition: transform var(--ms-normal) var(--curva-ambas);
}
@media (hover: hover) and (pointer: fine) {
	.aurora-pie a:hover::after { transform: scaleX(1); transform-origin: left; }
}
.aurora-pie a:focus-visible::after { transform: scaleX(1); transform-origin: left; }

/* En movil la franja pasa a rejilla: a 390 el copyright ocupa dos lineas y con `flex-wrap` el
   enlace caia debajo de la politica de privacidad, que es justo donde Andi no lo quiere. Aqui
   tiene columna propia a la derecha. (El «Subir» a 13 px en movil que pedia el CSS viejo nunca
   llego a pintarse: perdia por orden contra los 15 px de la franja [MEDIDO 07-09]; se deja en 15.) */
.aurora-pie__franja {
	display: flex;
	flex-direction: row;
	align-items: baseline;
	flex-wrap: wrap;
	gap: var(--s-1) var(--s-2);
	width: 100%;
	/* Los 10 px a los lados y abajo son el relleno por defecto del contenedor de Elementor que
	   había aquí: se conservan para no mover el copyright (Andi, 07-09: nada cambia). */
	padding: var(--s-1) 10px 10px;
	border-block-start: var(--filete) solid var(--linea);
}

/* Los tres textos de la franja son `p` directos; `width: fit-content` es lo que los pone en fila. */
.aurora-pie__franja > * {
	margin: 0;
	width: fit-content;
	max-width: 100%;
	color: var(--tenue);
	font-family: var(--fuente-texto);
	font-size: var(--t-cartela);
	font-weight: 400;
	line-height: var(--lh-cartela);
	letter-spacing: normal;
	text-transform: none;
}

.aurora-pie__franja a {
	color: var(--tenue) !important;
}

/* En movil la franja pasa a rejilla, DESPUES del bloque base o pierde por orden de carga: escrita
   antes, la franja seguia en flex y las dos politicas caian en fila con «Subir» en un renglon suelto
   [MEDIDO 07-09 en el Pixel 8 de Andi]. Cada texto una fila, y «Subir» a la derecha de todas. */
@media (max-width: 1023px) {
	/* El copyright en UNA linea: a 15 px pide 385,2 px. El 3,4vw sale de 280, el ancho mas estrecho
	   que se soporta, donde la franja entera mide 248 [MEDIDO]. */
	.aurora-pie__franja > .aurora-pie__copyright {
		font-size: min( 3.4vw, var(--t-cartela) );
		white-space: nowrap;
	}
}

/* Los cuatro textos en una linea piden ~852 px [MEDIDO: 728 de texto, 72 de huecos y 52 de guarda].
   Por debajo manda la regla de Andi (07-09): «Subir» SIEMPRE en la linea de la politica de
   privacidad, y la de cookies es la que baja. Con flex no se puede, porque va detras en el orden. */
@media (max-width: 899px) {
	.aurora-pie__franja {
		display: grid;
		/* El minimo a cero, o el copyright sin partir empuja «Subir» fuera de la pantalla [MEDIDO]. */
		grid-template-columns: minmax(0, 1fr) auto;
	}
	.aurora-pie__franja > .aurora-pie__copyright { grid-area: 1 / 1 / 2 / -1; }
	.aurora-pie__franja > .aurora-pie__politica  { grid-area: 2 / 1 / 3 / 2; }
	.aurora-pie__franja > .aurora-pie__politica ~ .aurora-pie__politica { grid-area: 3 / 1 / 4 / 2; }
	.aurora-pie__franja > .aurora-pie__subir     { grid-area: 2 / 2 / 3 / 3; }
}

/* «Subir» al extremo derecho de la franja, en la MISMA linea (Andi, 05-09). */
.aurora-pie__franja > .aurora-pie__subir {
	margin-inline-start: auto;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--tinta);
}