/*
Theme Name: Aurora Boza
Description: Tema propio de la web de Aurora Boza. Independiente desde el 07-09: sin Elementor ni tema padre.
Version: 2.0.0
Text Domain: aurora-boza
*/

/* Los nombres viejos (--fondo, --titulo, --texto...) son ahora ALIAS del sistema de tokens, que
   vive en assets/tokens.css. Se declaran también en .a-claro y .a-oscuro porque una propiedad
   personalizada se resuelve donde se declara: puesta solo en :root se congelaría en el valor claro
   y los titulares saldrían en #111 sobre negro, que es como quedaba ilegible el cierre de las diez
   páginas [MEDIDO en REVISION-T7.md, F2]. */
:root,
.a-claro,
.a-oscuro {
	--fondo:       var(--papel);
	--fondo-alt:   var(--papel);
	--borde:       var(--linea);
	--titulo:      var(--tinta);
	--texto:       var(--tinta);
	--secundario:  var(--tenue);
	--enlace:      var(--tinta);
	--hover:       var(--tinta);
}

:root {
	--paso: clamp(1rem, 0.6rem + 1.6vw, 1.75rem);
	--medida: 68ch;
}

body {
	background: var(--papel);
	color: var(--tinta);
	font-synthesis-weight: none;
}

/* `inherit`, no un color propio: así el titular sigue al fondo de su sección sin que nadie tenga
   que acordarse de invertirlo. */
h1, h2, h3, h4, h5, h6 {
	color: inherit;
	text-wrap: balance;
}

p {
	text-wrap: pretty;
}

a {
	color: var(--enlace);
	text-underline-offset: 0.18em;
	text-decoration-thickness: 1px;
}

/* Solo con puntero fino: en tactil el `:hover` se queda pegado tras el toque y el subrayado no se
   iba (Andi, 05-09). Sin ratón no hay nada que senalar al pasar por encima. */
/* Sin subrayado nativo: el del sitio es el trazo deslizante de movimiento.css, y el nativo salia
   ademas encima, con grosor fijo de 1 px se viera el texto a 13 px o a 95 (Andi, 05-09). */
@media (hover: hover) and (pointer: fine) {
	a:hover { color: var(--hover); }
}

::selection {
	background: var(--titulo);
	color: var(--fondo);
}

/* Un cuadro nunca se recorta a un cuadrado: manda su proporción real. */
.aurora-obra img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;
}

.aurora-ficha {
	color: var(--secundario);
	font-size: 0.875rem;
	line-height: 1.5em;
}

.aurora-ficha__estado {
	color: var(--titulo);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.aurora-filete {
	border: 0;
	border-top: 1px solid var(--borde);
	margin: var(--paso) 0;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* Flecha al final de un enlace (Andi, 06-09). Es un `span` DENTRO del enlace, no un pseudoelemento
   del párrafo: así se puede pulsar y el subrayado del hover llega hasta ella. Escala con la letra. */
.a-flecha {
	display: inline-block;
	width: 0.72em;
	height: 0.72em;
	margin-inline-start: 0.26em;
	vertical-align: -0.04em;
	background: currentColor;
	-webkit-mask: var(--flecha-min) center / contain no-repeat;
	mask: var(--flecha-min) center / contain no-repeat;
}

:root {
	/* Su sitio es tokens.css; aquí mientras ese archivo tenga otro dueño. */
	--flecha-min: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='square'%3E%3Cpath d='M3 12h17M13.5 5.5 20 12l-6.5 6.5'/%3E%3C/svg%3E");
}
