/* Numeral de fondo: número de pilar grande, tenue y recortado por el borde de su contenedor.
   Pieza reutilizable (la tarjeta de pilar del inicio, css/tarjeta-pilar.css, y las cabeceras de pilar).
   Decorativo: no lleva texto accesible.

   Uso:
     <header class="con-numeral" data-numeral="01"> ... </header>
   El numeral lo pinta ::before con content: attr(data-numeral) / "" (texto alternativo vacío:
   los lectores de pantalla lo ignoran sin necesidad de aria-hidden). El contenedor recibe
   position:relative + overflow:hidden y el contenido propio queda por encima (z-index 1).
   Tamaño y posición se ajustan con --numeral-tamano / --numeral-x / --numeral-y en cada uso. */

:root {
  --numeral-color: #8A6414;        /* claro: oro oscurecido, el oro tenue se pierde sobre beige */
  --numeral-relleno: 16%;          /* cuánto del color rellena el numeral (el resto, transparente) */
  --numeral-tamano: 80px;
  --numeral-x: -10px;              /* desplazamiento hacia fuera por la derecha (negativo = recorta) */
  --numeral-y: -14px;              /* desplazamiento hacia arriba */
}
/* Oscuro: el oro tenue sobre azul tiende a gris; más croma y algo más de cuerpo lo mantienen dorado. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --numeral-color: #FFBE1A; --numeral-relleno: 28%; }
}
:root[data-theme="dark"] { --numeral-color: #FFBE1A; --numeral-relleno: 28%; }

/* Pieza común */
.con-numeral { position: relative; overflow: hidden; isolation: isolate; }
.con-numeral > * { position: relative; z-index: 1; }
.con-numeral::before {
  content: attr(data-numeral) / "";
  position: absolute;
  z-index: 0;
  top: var(--numeral-y);
  right: var(--numeral-x);
  font-family: var(--fuente-titulo);
  font-size: var(--numeral-tamano);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
  color: color-mix(in srgb, var(--numeral-color) var(--numeral-relleno), transparent);
  pointer-events: none;
  user-select: none;
}