/* ────────────────────────────────────────────────────────────────
   Tipografías autoalojadas. Ni una petición a un tercero: nada que
   bloquee el pintado y nada que contarle a nadie en la política de
   cookies. Manrope es una sola variable para todos los pesos. */
@font-face { font-family: Marcellus; src: url(../tipos/marcellus-400-latin.woff2) format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Marcellus; src: url(../tipos/marcellus-400-latin-ext.woff2) format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: Manrope; src: url(../tipos/manrope-var-latin.woff2) format('woff2');
  font-weight: 200 800; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Manrope; src: url(../tipos/manrope-var-latin-ext.woff2) format('woff2');
  font-weight: 200 800; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Space Mono'; src: url(../tipos/space-mono-400-latin.woff2) format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Space Mono'; src: url(../tipos/space-mono-700-latin.woff2) format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ────────────────────────────────────────────────────────────────
   Color. Todo sale de su web: los tres de marca están confirmados
   contando píxeles de su logotipo y leyendo el CSS que sirve
   banyarte.com, y coinciden al dígito. De los tres solo entra el
   rojo. Nada de dorados. */
:root {
  --fondo: #FFFFFF;
  --papel: #FAFAFA;
  --tinta: #111111;
  --tinta-suave: #5E5E5E;
  --negro: #000000;
  --marca: #A7282A;
  --marca-oscuro: #862022;
  --marca-pulsado: #671919;
  --linea: #EAEAEA;
  --linea-negro: #2B2B2B;

  --titulos: Marcellus, 'Times New Roman', serif;
  --cuerpo: Manrope, system-ui, -apple-system, sans-serif;
  --mono: 'Space Mono', ui-monospace, monospace;

  --paso: clamp(1.15rem, 4vw, 2.75rem);
  --aire: clamp(3.5rem, 9vw, 7.5rem);
  --ancho: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fondo); color: var(--tinta);
  font-family: var(--cuerpo); font-weight: 350; font-size: 1.02rem; line-height: 1.72;
  /* Una palabra larga que no rompe desborda a 375 px, y el scroll
     horizontal no se ve en una captura de escritorio. Pasa con un
     PENDIENTE_, con un correo y con el nombre de una calle. */
  overflow-wrap: anywhere;
}

h1, h2, h3, h4 {
  font-family: var(--titulos); font-weight: 400;
  /* Marcellus es una romana de proporción clásica: apretarle el
     interletraje como se hace con una gruesa de palo seco le cierra
     los blancos y la ensucia. Va suelta, no apretada. */
  letter-spacing: 0.005em; line-height: 1.12; margin: 0 0 .55em;
  overflow-wrap: anywhere;
}
h1 { font-size: clamp(2.1rem, 6.2vw, 4.1rem); }
h2 { font-size: clamp(1.65rem, 3.9vw, 2.6rem); }
h3 { font-size: clamp(1.2rem, 2.3vw, 1.5rem); }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

.cifra, .mono { font-family: var(--mono); font-size: .92em; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.envoltorio { width: min(var(--ancho), 100% - var(--paso) * 2); margin-inline: auto; }
.estrecho { max-width: 62ch; }
img { max-width: 100%; height: auto; display: block; }
figure { margin: 0; }
/* El fondo de relleno mientras la foto carga va en el HUECO, no en la
   <img>. Puesto sobre la imagen, un PNG con transparencia —el logotipo,
   sin ir más lejos— se lleva ese gris claro pegado detrás, y sobre la
   cabecera negra queda un recuadro blanco alrededor de la marca. */
.tarjeta figure, .banda { background: var(--papel); }

a { color: var(--marca); text-decoration-thickness: 1px; text-underline-offset: .22em; }
a:hover { color: var(--marca-oscuro); }
:focus-visible { outline: 3px solid var(--marca); outline-offset: 3px; }

.boton {
  display: inline-block; padding: .82em 1.6em; border: 1px solid var(--marca);
  background: var(--marca); color: #fff; text-decoration: none;
  font-family: var(--cuerpo); font-weight: 600; font-size: .95rem; letter-spacing: .01em;
  cursor: pointer; transition: background .22s ease, border-color .22s ease;
}
.boton:hover { background: var(--marca-oscuro); border-color: var(--marca-oscuro); color: #fff; }
.boton:active { background: var(--marca-pulsado); border-color: var(--marca-pulsado); }
.boton.hueco { background: transparent; color: var(--tinta); border-color: var(--tinta); }
.boton.hueco:hover { background: var(--tinta); color: var(--fondo); }
.boton.claro { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
.boton.claro:hover { background: #fff; color: var(--negro); border-color: #fff; }
.botonera { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }

/* ── Franja de propuesta y aviso de cookies ──────────────────────
   Los dos EN FLUJO y arriba del todo. El banner ocupa su sitio y
   empuja: así no hay nada debajo de él y no puede taparle a ningún
   legal ni a ninguna nota de procedencia. */
.franja {
  background: var(--marca); color: #fff; padding: .62em var(--paso);
  font-size: .82rem; text-align: center; line-height: 1.5;
}
.franja a { color: #fff; }
.cookies {
  position: relative; background: var(--papel); color: var(--tinta);
  border-bottom: 1px solid var(--linea); padding: 1em var(--paso);
  font-size: .87rem; display: flex; flex-wrap: wrap; gap: .9em;
  align-items: center; justify-content: center; text-align: center;
}
.cookies[hidden] { display: none; }
.cookies p { margin: 0; max-width: 62ch; }
.cookies .boton { padding: .55em 1.15em; font-size: .85rem; }

/* ── Cabecera ────────────────────────────────────────────────────
   Negro, que es su theme-color declarado y el fondo real de su pie. */
.cabecera { background: var(--negro); color: #fff; }
.cabecera .envoltorio {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .95rem 0; flex-wrap: wrap;
}
.cabecera a { color: #fff; text-decoration: none; }
.logo { display: flex; align-items: center; gap: 1rem; flex-shrink: 0; }
/* El archivo ya viene recortado por recortar-logo.mjs: 221 × 110 de
   dibujo, sin el margen transparente de 54 px por lado que traía el
   original. A 150 px el dibujo mide 150 px de verdad, y la palabra ARTE
   se lee entera —a 122 sobre el archivo sin recortar se leía «ARTF»,
   porque el dibujo real solo ocupaba 82 de esos 122—. */
.logo img { width: 150px; height: auto; }
.logo .descriptor {
  font-size: .66rem; letter-spacing: .15em; text-transform: uppercase;
  color: rgba(255,255,255,.6); line-height: 1.5;
  /* En una línea o en ninguna. Repartido en cuatro renglones al lado
     del logotipo no se lee como un descriptor: parece una columna de
     menú rota. */
  white-space: nowrap;
  border-left: 1px solid var(--linea-negro); padding-left: 1rem;
}
/* Por debajo de 1150 no cabe en una línea junto al logotipo y el menú,
   y además repite lo que el logotipo ya dice. Fuera. */
@media (max-width: 1150px) { .logo .descriptor { display: none; } }
.menu { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center; }
.menu a {
  font-size: .88rem; letter-spacing: .04em; padding: .35em 0;
  border-bottom: 2px solid transparent; transition: border-color .2s ease;
}
.menu a:hover, .menu a[aria-current="page"] { border-bottom-color: var(--marca); }
.menu .destacado { color: #fff; border: 1px solid var(--linea-negro); padding: .5em 1em; }
.menu .destacado:hover { background: var(--marca); border-color: var(--marca); }

/* El menú de móvil es un <details>: se abre y se cierra sin una línea
   de JavaScript, y si el JavaScript falla sigue funcionando. */
.menu-movil { display: none; }
.menu-movil > summary {
  list-style: none; cursor: pointer; padding: .55em .1em; font-size: .88rem;
  letter-spacing: .04em; display: flex; align-items: center; gap: .55rem;
}
.menu-movil > summary::-webkit-details-marker { display: none; }
.menu-movil > summary::after { content: '+'; font-family: var(--mono); font-size: 1.15rem; line-height: 1; }
.menu-movil[open] > summary::after { content: '–'; }
@media (max-width: 900px) {
  .cabecera { position: relative; }
  .cabecera .menu.escritorio { display: none; }
  .menu-movil { display: block; margin-left: auto; }
  /* El desplegable cae DEBAJO de la cabecera, superpuesto. Puede
     hacerlo sin romper ninguna regla del kit porque la franja de
     propuesta y el aviso de cookies van ANTES de la cabecera en el
     documento: un menú que se abre hacia abajo no puede taparlos ni
     queriendo. Y nace cerrado. */
  .menu-movil .menu {
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--negro); border-top: 1px solid var(--linea-negro);
    flex-direction: column; align-items: stretch; gap: 0;
    padding: .3rem var(--paso) 1.1rem; z-index: 5;
  }
  .menu-movil .menu a { padding: .85em 0; border-bottom: 1px solid var(--linea-negro); }
  .menu-movil .menu a:last-child { border-bottom: 0; }
  .menu-movil .menu .destacado { margin-top: .9rem; text-align: center; }
  .logo img { width: 118px; }
}

/* ── Hero ────────────────────────────────────────────────────────
   La banda de vídeo arranca pegada a la cabecera y el titular va encima.
   El vídeo tiene que verse SIN BAJAR, y eso a 375 no es gratis: encima
   de la banda hay franja de propuesta, aviso de cookies y cabecera, y
   entre las tres se comen del orden de 300 px antes de empezar.

   Por eso la altura va en svh y no en vh. En un móvil, 100vh es la
   ventana SIN la barra del navegador: usarlo aquí deja la banda más alta
   de lo que se ve y empuja el vídeo fuera de la primera pantalla justo
   en el sitio donde importa. svh es la ventana pequeña —con la barra
   puesta—, que es lo que hay al abrir. Y el clamp pone suelo y techo
   para que ni desaparezca en una pantalla baja ni se vuelva un cartel en
   una alta. */
.hero { padding: 0 0 clamp(1.6rem, 3vw, 2.4rem); }
.hero-media {
  position: relative;
  min-height: clamp(340px, 56svh, 620px);
  display: grid;
  background: var(--negro);
  overflow: hidden;
}
.hero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 45%;
  display: block;
}
/* El velo. Dos capas: una plana que garantiza el mínimo en todo el paño,
   y un degradado que carga la mano donde vive el texto y suelta a la
   derecha para que el material siga respirando. Los números están
   MEDIDOS con contraste-hero.mjs sobre los píxeles compuestos, no
   elegidos a ojo: el clip es mármol blanco y el caso peor es su parte
   más clara. */
.hero-velo {
  position: absolute; inset: 0;
  /* Ancho: el texto ocupa la mitad izquierda, así que el velo carga ahí
     y suelta a la derecha para que el material siga respirando. */
  background:
    linear-gradient(100deg, rgba(0,0,0,.60) 0%, rgba(0,0,0,.52) 38%, rgba(0,0,0,.26) 72%, rgba(0,0,0,.18) 100%),
    rgba(0,0,0,.16);
}
/* Estrecho: el texto pasa a ocupar TODO el ancho, así que un degradado
   lateral deja media frase sobre la parte clara del mármol. Medido:
   con el velo diagonal, la entradilla a 375 se quedaba en 2,97 y el
   botón en 4,26, los dos por debajo de AA. Aquí el degradado va de
   abajo arriba, que es como se reparte el texto en vertical, y sigue
   dejando la parte de arriba del clip casi limpia. */
@media (max-width: 900px) {
  .hero-velo {
    background:
      linear-gradient(to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,.66) 48%, rgba(0,0,0,.42) 78%, rgba(0,0,0,.30) 100%),
      rgba(0,0,0,.14);
  }
}
.hero-texto {
  position: relative;
  align-self: end;
  padding: clamp(3.5rem, 9vh, 6rem) 0 clamp(2.2rem, 5vh, 3.4rem);
  color: #fff;
}
.hero-texto h1 { max-width: 15ch; white-space: pre-line; color: #fff; }
.hero-texto .entradilla {
  max-width: 46ch; font-size: clamp(1rem, 1.6vw, 1.14rem);
  color: rgba(255,255,255,.92);
}
.filete { width: 68px; height: 3px; background: var(--marca); margin: 0 0 1.6rem; }

/* ── Secciones ───────────────────────────────────────────────────── */
.seccion { padding: var(--aire) 0; }
.seccion.papel { background: var(--papel); }
.seccion.negra { background: var(--negro); color: #fff; }
.seccion.negra h2, .seccion.negra h3 { color: #fff; }
.seccion.negra p { color: rgba(255,255,255,.78); }
.seccion.negra .filete { background: var(--marca); }
/* Sobre negro, el rojo de marca da 4,1:1 largos: no llega ni a AA para
   texto normal. En las bandas negras el enlace va en blanco y se
   distingue por el subrayado rojo, no por el color de la letra. Se pilló
   con el teléfono del cierre, que salía en rojo oscuro sobre negro y no
   se leía. */
.seccion.negra a { color: #fff; text-decoration-color: var(--marca); }
.seccion.negra a:hover { color: #fff; text-decoration-color: #fff; }
.seccion.negra .ficha > div { border-color: rgba(255,255,255,.22); }
.seccion.negra .ficha dt { color: rgba(255,255,255,.58); }
.seccion.negra .ficha dd, .seccion.negra .ficha dd a { color: #fff; }
.rotulo {
  font-family: var(--mono); font-size: .74rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--tinta-suave); margin: 0 0 .9rem;
  display: flex; align-items: baseline; gap: .7rem;
}
.rotulo::before { content: attr(data-n); color: var(--marca); font-weight: 700; }
.seccion.negra .rotulo { color: rgba(255,255,255,.55); }
.cabeza-seccion { max-width: 58ch; margin-bottom: clamp(2rem, 4vw, 3rem); }

/* ── Rejillas ────────────────────────────────────────────────────── */
.rejilla { display: grid; gap: clamp(1.5rem, 3vw, 2.6rem); grid-template-columns: 1fr; }
@media (min-width: 620px) { .rejilla.dos, .rejilla.cuatro { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .rejilla.cuatro { grid-template-columns: repeat(4, 1fr); }
                            .rejilla.tres { grid-template-columns: repeat(3, 1fr); } }

.tarjeta { display: block; text-decoration: none; color: inherit; }
.tarjeta figure { overflow: hidden; background: var(--papel); }
.tarjeta img { width: 100%; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.tarjeta:hover img { transform: scale(1.03); }
.tarjeta h3 { margin: 1rem 0 .35rem; }
.tarjeta p { color: var(--tinta-suave); font-size: .95rem; margin: 0; }
.tarjeta .flecha { color: var(--marca); font-family: var(--mono); font-size: .85rem; display: inline-block; margin-top: .7rem; }

/* ── Vídeo del hero ──────────────────────────────────────────────
   El crédito va en flujo, debajo de la banda. /* El crédito del vídeo va EN FLUJO, debajo, no superpuesto encima. Un
   aviso de procedencia sobre la imagen es exactamente lo que acaba
   tapado por algo el día que cambia el ancho. */
.hero-credito {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .09em;
  text-transform: uppercase; color: var(--tinta-suave);
  padding-top: .7rem;
}

/* ── Banda de textura ────────────────────────────────────────────
   Recortada en pantalla con object-fit, no con un srcset más plano.
   Es una separación entre secciones: a 1440 el archivo entero mediría
   600 px de alto y se leería como una sección vacía de color arena en
   vez de como una junta. */
.banda { overflow: hidden; }
.banda img { width: 100%; height: clamp(120px, 22vw, 260px); object-fit: cover; object-position: center 40%; }

/* ── Qué mirar: la lista que hace útil cada página de sección ────── */
.que-mirar { list-style: none; margin: 0; padding: 0; counter-reset: qm; }
.que-mirar li {
  counter-increment: qm; padding: 1.05rem 0 1.05rem 3.1rem;
  border-top: 1px solid var(--linea); position: relative;
}
.que-mirar li:last-child { border-bottom: 1px solid var(--linea); }
.que-mirar li::before {
  content: counter(qm, decimal-leading-zero); position: absolute; left: 0; top: 1.05rem;
  font-family: var(--mono); font-size: .78rem; color: var(--marca); font-weight: 700;
}

/* ── Ficha de datos (sedes, contacto) ────────────────────────────── */
.ficha { display: grid; gap: 0; margin: 0; }
.ficha > div {
  display: grid; grid-template-columns: 1fr; gap: .1rem;
  padding: .95rem 0; border-top: 1px solid var(--linea);
}
.ficha > div:last-child { border-bottom: 1px solid var(--linea); }
@media (min-width: 560px) { .ficha > div { grid-template-columns: 11rem 1fr; gap: 1.2rem; align-items: baseline; } }
.ficha dt {
  font-family: var(--mono); font-size: .74rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--tinta-suave);
}
.ficha dd { margin: 0; }
.ficha dd a { color: var(--tinta); text-decoration-color: var(--marca); }
.ficha dd a:hover { color: var(--marca); }

.dos-columnas { display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .dos-columnas { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .dos-columnas.desigual { grid-template-columns: 1.15fr 1fr; } }

.mapa {
  border: 1px solid var(--linea); padding: clamp(1.2rem, 3vw, 1.9rem);
  background: var(--fondo);
}
.mapa h3 { margin-top: 0; }
.mapa ol { margin: 0; padding-left: 1.2rem; }
.mapa li { margin-bottom: .5rem; }
.mapa li:last-child { margin-bottom: 0; }
.codigo-mapa {
  font-family: var(--mono); font-size: 1.05rem; letter-spacing: -.02em;
  display: inline-block; padding: .45em .75em; background: var(--papel);
  border: 1px solid var(--linea);
}

/* ── Avisos: lo que hace honesta esta propuesta ──────────────────── */
.aviso-fotos, .aviso-bloque {
  border-left: 3px solid var(--marca); padding: .85rem 0 .85rem 1.1rem;
  font-size: .89rem; color: var(--tinta-suave); background: var(--fondo);
  margin: 0 0 clamp(1.8rem, 4vw, 2.6rem);
}
.aviso-fotos p, .aviso-bloque p { margin: 0; }
.aviso-banco, .aviso-suya {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--tinta-suave);
  display: block; margin-top: .55rem;
}
/* El sello de «esta foto SÍ es suya» se distingue del de banco por el
   filete rojo. Son dos afirmaciones distintas y no pueden leerse igual:
   una dice «esto no es suyo» y la otra dice «esto sí». */
.aviso-suya { color: var(--tinta); border-left: 2px solid var(--marca); padding-left: .6rem; }

/* El hueco del equipo, que está vacío porque no hay fotos todavía. No
   lleva ningún PENDIENTE_ en pantalla: dice en castellano qué falta. */
.hueco-equipo {
  border: 1px dashed var(--linea); padding: clamp(1.5rem, 4vw, 2.4rem);
  background: var(--fondo);
}
.hueco-equipo h3 { margin-top: 0; }
.hueco-equipo .siluetas { display: flex; gap: .8rem; margin-bottom: 1.4rem; }
.hueco-equipo .siluetas span {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--papel); border: 1px dashed var(--linea);
  display: grid; place-items: center; font-family: var(--mono);
  font-size: .85rem; color: var(--tinta-suave);
}
.pendiente-dato {
  font-family: var(--mono); font-size: .85rem; background: #FDECEC;
  color: var(--marca-pulsado); padding: .1em .45em; border: 1px dashed var(--marca);
}

/* Dos negros seguidos: la banda de cierre y el pie. Sin esto se suman
   los dos aires y quedan ~240 px de negro vacío que no separa nada,
   porque a los dos lados del hueco hay exactamente el mismo color. Se
   parten por la mitad y se pone un filete donde se tocan, para que la
   frontera se lea como una frontera y no como un descuido. */
main > .seccion.negra:last-child { padding-bottom: calc(var(--aire) * .45); }
main:has(> .seccion.negra:last-child) + .pie {
  padding-top: calc(var(--aire) * .5); border-top: 1px solid var(--linea-negro);
}

/* ── Pie ─────────────────────────────────────────────────────────── */
.pie { background: var(--negro); color: rgba(255,255,255,.72); padding: var(--aire) 0 3rem; font-size: .92rem; }
.pie h2, .pie h3 { color: #fff; }
.pie a { color: #fff; text-decoration-color: var(--marca); }
.pie a:hover { color: var(--marca); text-decoration-color: var(--marca); }
.pie-rejilla { display: grid; gap: 2.2rem; grid-template-columns: 1fr; }
@media (min-width: 700px) { .pie-rejilla { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .pie-rejilla { grid-template-columns: 1.3fr 1fr 1fr; } }
.pie h3 { font-size: .78rem; font-family: var(--cuerpo); font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.5); margin-bottom: 1rem; }
.pie ul { list-style: none; margin: 0; padding: 0; }
.pie li { margin-bottom: .5rem; }
.pie .ficha > div { border-color: var(--linea-negro); }
.pie .ficha dt { color: rgba(255,255,255,.5); }
.pie .ficha dd a { color: #fff; }
.pie-legal {
  margin-top: 3rem; padding-top: 1.6rem; border-top: 1px solid var(--linea-negro);
  display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; font-size: .84rem;
}
.pie-credito { margin-top: 1.4rem; font-size: .82rem; color: rgba(255,255,255,.55); max-width: 78ch; }

/* ── Enlace de salto, para quien navega con teclado ──────────────── */
.saltar {
  position: absolute; left: -9999px; top: 0; background: var(--marca); color: #fff;
  padding: .8em 1.2em; z-index: 10; text-decoration: none;
}
.saltar:focus { left: 0; }

/* ── APARICIONES ─────────────────────────────────────────────────
   El estado oculto solo existe si hay JavaScript para quitarlo: sin
   scripting, .reveal nunca nace en opacidad 0 y el contenido está
   ahí desde el primer momento. */
@media (scripting: enabled) {
  .reveal { opacity: 0; transform: translateY(14px);
    transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
  .reveal.visible { opacity: 1; transform: none; }
}

/* ── Movimiento reducido ──────────────────────────────────────────
   GLOBAL sobre *, y entero. Nunca una regla que nombre un elemento
   para quitarle el movimiento: el día que ese elemento cambia de
   etiqueta la regla deja de alcanzarlo, la animación sigue corriendo
   y no se ve en ninguna captura. Solo se detecta leyendo el estilo
   computado, que es lo que hace comprobar.mjs.

   La única excepción legítima es para que algo SE VEA: .reveal parte
   de opacidad 0 y sin transición se quedaría ahí para siempre. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
}