/* ARCHIVO GENERADO por fuentes.mjs. No editar a mano.

   Tipografías autoalojadas: esta web no abre ninguna conexión con
   fonts.googleapis.com ni con fonts.gstatic.com. Solo el subconjunto
   latin, que cubre el español.

   Barlow Condensed (titulares), Barlow (texto) e IBM Plex Mono
   (cifras): SIL Open Font License 1.1. */

@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fuentes/barlow-condensed-500.woff2') format('woff2');
  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: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fuentes/barlow-condensed-600.woff2') format('woff2');
  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: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fuentes/barlow-condensed-700.woff2') format('woff2');
  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: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fuentes/barlow-400.woff2') format('woff2');
  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: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fuentes/barlow-500.woff2') format('woff2');
  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: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fuentes/barlow-600.woff2') format('woff2');
  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: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fuentes/ibm-plex-mono-400.woff2') format('woff2');
  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: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fuentes/ibm-plex-mono-500.woff2') format('woff2');
  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;
}


/* ════════════════════════════════════════════════════════════════════
   AGR — hoja de estilo. ARCHIVO GENERADO por build.mjs.

   Registro técnico y de obra: retícula marcada, mucho dato, hormigón y
   acero. Nada de lujo ni de calidez. AGR no vende un hogar bonito,
   vende una obra bien gestionada, y eso se dibuja con precisión.

   El naranja SOLO en acentos, filetes, rellenos pequeños y llamadas.
   Nunca en un fondo grande: un panel naranja de 600 px convierte esto
   en una promoción de supermercado.
   ════════════════════════════════════════════════════════════════════ */

:root {
  --fondo: #EDEBE7;
  --papel: #F7F6F4;
  --tinta: #111110;
  --hondo: #1A1A18;
  --acero: #6B6B66;
  --linea: #C7C3BB;
  --acento: #F46F17;
  --acento-texto: #a94d10;
  --paso: clamp(1.15rem, 4vw, 2.5rem);
  --ancho: 1180px;
  --titulos: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --cuerpo: 'Barlow', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
}

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

h1, h2, h3, h4 {
  font-family: var(--titulos); font-weight: 700;
  line-height: 1.02; margin: 0 0 .5em; overflow-wrap: anywhere;
}
h1 { font-size: clamp(2.5rem, 7.5vw, 4.6rem); letter-spacing: -.015em; }
h2 { font-size: clamp(1.7rem, 4vw, 2.6rem); text-transform: uppercase; letter-spacing: .012em; }
h3 { font-size: clamp(1.25rem, 2.4vw, 1.6rem); letter-spacing: .005em; }
h4 { font-size: 1.1rem; text-transform: uppercase; letter-spacing: .04em; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

.mono, .dato { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.envoltorio { width: min(var(--ancho), 100% - var(--paso) * 2); margin-inline: auto; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--acento-texto); text-underline-offset: .18em; }
ul, ol { padding-left: 1.15em; }
li { margin-bottom: .4em; }

/* ── Cintas de encabezado ────────────────────────────────────────────
   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.
   Se diferencian a propósito —oscura la franja, clara la de cookies—
   para que no se lean como una sola banda de tres pisos. */
.franja {
  background: var(--hondo); color: #fff; border-top: 3px solid var(--acento);
  font-family: var(--mono); font-size: .74rem; letter-spacing: .06em;
  text-transform: uppercase; padding: .7em var(--paso); margin: 0; text-align: center;
}
.cookies {
  position: relative; background: var(--papel); color: var(--tinta);
  border-bottom: 1px solid var(--tinta); padding: .9em var(--paso);
  font-size: .9rem; display: flex; flex-wrap: wrap;
  gap: .7em 1.1em; align-items: center; justify-content: center;
}
.cookies[hidden] { display: none; }
.cookies p { max-width: 68ch; margin: 0; }

/* ── Botones ─────────────────────────────────────────────────────── */
.boton {
  display: inline-block; padding: .78em 1.5em; border: 2px solid var(--tinta);
  background: var(--tinta); color: #fff; text-decoration: none; cursor: pointer;
  font-family: var(--mono); font-size: .82rem; font-weight: 500;
  letter-spacing: .07em; text-transform: uppercase; border-radius: 0;
  transition: background .2s cubic-bezier(.2,.7,.2,1), color .2s, border-color .2s;
}
.boton:hover { background: var(--acento); border-color: var(--acento); color: #fff; }
.boton.hueca { background: transparent; color: var(--tinta); }
.boton.hueca:hover { background: var(--tinta); color: #fff; border-color: var(--tinta); }
.banda-oscura .boton { background: var(--acento); border-color: var(--acento); color: #fff; }
.banda-oscura .boton:hover { background: #fff; border-color: #fff; color: var(--hondo); }
.banda-oscura .boton.hueca { background: transparent; color: #fff; border-color: #fff; }
.banda-oscura .boton.hueca:hover { background: #fff; color: var(--hondo); }
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 3px solid var(--acento); outline-offset: 3px;
}
.botonera { display: flex; flex-wrap: wrap; gap: .8em; margin-top: 1.6em; }

/* ── Bandas oscuras y retícula ───────────────────────────────────────
   El negro de la marca entra por bandas —cabecera, hero, cierre, pie— y
   no volviendo oscuro el sitio entero: la mitad del contenido son
   tablas de horquillas y fases, y eso se lee mejor sobre claro. */
.banda-oscura { background: var(--hondo); color: #fff; }
.banda-oscura h1, .banda-oscura h2, .banda-oscura h3 { color: #fff; }
.banda-oscura a { color: #fff; }
.reticula {
  background-image:
    repeating-linear-gradient(to right, rgba(255,255,255,.07) 0 1px, transparent 1px 56px);
  background-position: center top;
}

/* ── Cabecera ────────────────────────────────────────────────────── */
.cabecera { border-bottom: 1px solid rgba(255,255,255,.16); }
.cabecera .envoltorio {
  display: flex; flex-wrap: wrap; gap: .9em 1.6em;
  align-items: center; justify-content: space-between; padding: 1.05em 0;
}
.marca-tipo { display: flex; align-items: baseline; gap: .55em; text-decoration: none; }
.marca-tipo .sigla {
  font-family: var(--titulos); font-weight: 700; font-size: 1.85rem;
  letter-spacing: .02em; color: #fff; line-height: 1;
  border-left: 4px solid var(--acento); padding-left: .3em;
}
.marca-tipo .bajo {
  font-family: var(--mono); font-size: .62rem; letter-spacing: .16em;
  text-transform: uppercase; color: rgba(255,255,255,.72);
}
/* A 375 el menú entra en dos filas si se aprieta: con el tamaño de
   escritorio ocupaba cuatro y, sumado a la franja y al aviso, el titular
   empezaba por debajo de la primera pantalla. */
.cabecera nav { display: flex; flex-wrap: wrap; gap: .5em 1em; }
@media (min-width: 900px) { .cabecera nav { gap: .6em 1.35em; } }
.cabecera nav a {
  font-family: var(--mono); font-size: .69rem; letter-spacing: .07em;
  text-transform: uppercase; color: rgba(255,255,255,.82); text-decoration: none;
  padding-bottom: .2em; border-bottom: 2px solid transparent;
}
@media (min-width: 900px) { .cabecera nav a { font-size: .74rem; letter-spacing: .09em; } }
.cabecera nav a:hover { color: #fff; border-bottom-color: var(--acento); }
.cabecera nav a[aria-current="page"] { color: #fff; border-bottom-color: var(--acento); }

/* ── Hero ────────────────────────────────────────────────────────── */
.hero { padding: clamp(2.8rem, 8vw, 6rem) 0 clamp(2.2rem, 5vw, 3.4rem); }
.hero h1 { max-width: 19ch; }
.hero .entradilla { max-width: 56ch; font-size: clamp(1.02rem, 1.6vw, 1.2rem); color: rgba(255,255,255,.88); }
/* Hero a dos columnas cuando lleva foto. A 375 la foto va debajo del
   texto: primero se lee qué es esto, luego se ve quién lo hace. */
.hero-con-foto { display: grid; gap: var(--paso); align-items: center; }
@media (min-width: 900px) { .hero-con-foto { grid-template-columns: 1.05fr .95fr; } }
.hero-con-foto .hero-texto { min-width: 0; }
.figura-cat { margin: 0; }
/* Los originales son cuadrados de 1440: recortados a 4:3 caben mejor en
   una banda, y el 55 % baja el encuadre lo justo para no cortar ni el
   rótulo de arriba ni los pies de abajo. */
.figura-cat img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 55%; }
/* Sin recortar. En el hero, el 4:3 se comía justo el logotipo del rótulo
   de la nave, que es la mitad de lo que hace valiosa esa foto. */
.figura-cat.entera img { aspect-ratio: auto; object-fit: contain; }

/* DERIVA LENTA del hero. Un acercamiento de 26 s, del 1.0 al 1.06 y
   vuelta: se nota que respira y no se nota que se mueve.
   · Arranca en escala 1, así que el reposo llena la caja exactamente y
     no hacen falta apaños para tapar bordes.
   · El tope del 6 % está calculado sobre el original: la foto de obra
     tiene 720 px de ancho y en el hero se pinta a unos 660, así que al
     máximo del recorrido pide 700 y sigue por debajo de su resolución.
     Ampliar más sería inventar píxeles en el sitio donde más se ve.
   · Con movimiento reducido no hay que hacer NADA aquí: el apagado
     global sobre * mata la animación y la deja parada en escala 1, que
     es exactamente el póster. Por eso no hay ninguna regla que nombre
     este elemento, que es como se rompen estas cosas. */
.figura-cat.deriva { overflow: hidden; }
.figura-cat.deriva img { animation: deriva 26s ease-in-out infinite alternate; }
@keyframes deriva {
  from { transform: scale(1); }
  to { transform: scale(1.06); }
}
.figura-cat figcaption { margin-top: .55em; }
.banda-oscura .aviso-imagen { color: rgba(255,255,255,.72); }

.antetitulo {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .17em;
  text-transform: uppercase; color: var(--acento); margin: 0 0 1.3em;
  display: flex; flex-wrap: wrap; gap: .5em .9em; align-items: center;
}
.antetitulo::before {
  content: ""; width: 34px; height: 2px; background: var(--acento); display: inline-block;
}
.cinta-datos {
  display: flex; flex-wrap: wrap; gap: 0; border-top: 1px solid rgba(255,255,255,.2);
  margin-top: clamp(2rem, 4vw, 3rem); padding: 0; list-style: none;
}
.cinta-datos li {
  flex: 1 1 190px; padding: 1.05em 1.2em 1.05em 0; margin: 0;
  border-right: 1px solid rgba(255,255,255,.14);
}
.cinta-datos li:last-child { border-right: 0; }
.cinta-datos .et {
  display: block; font-family: var(--mono); font-size: .64rem; letter-spacing: .15em;
  text-transform: uppercase; color: var(--acento); margin-bottom: .35em;
}
.cinta-datos .val { font-family: var(--titulos); font-size: 1.32rem; font-weight: 600; line-height: 1.15; }

/* ── Secciones y marcadores ──────────────────────────────────────── */
/* 5rem arriba y 5rem abajo dejaban diez centímetros de hormigón vacío
   entre el final de una sección y el título de la siguiente. */
section { padding: clamp(2.2rem, 4.4vw, 3.4rem) 0; }
/* El filete que separa secciones lo pone el propio marcador. Cuando lo
   ponían los dos, se leían dos rayas paralelas a distinta altura y la
   retícula dejaba de parecer una retícula. */
.marcador {
  display: flex; align-items: baseline; gap: .9em;
  border-top: 3px solid var(--tinta); padding-top: .85em; margin-bottom: 1.5em;
}
.marcador .num {
  font-family: var(--mono); font-size: .78rem; font-weight: 500;
  letter-spacing: .1em; color: var(--acento-texto); padding-top: .35em;
}
.marcador h2 { margin: 0; }
.banda-oscura .marcador { border-top-color: var(--acento); }
.banda-oscura .marcador .num { color: var(--acento); }
.entradilla-seccion { max-width: 62ch; font-size: 1.06rem; margin-bottom: 2em; }

/* ── Rejillas y fichas ───────────────────────────────────────────── */
.rejilla { display: grid; gap: 1px; background: var(--linea); border: 1px solid var(--linea); }
.rejilla > * { background: var(--papel); padding: clamp(1.2rem, 2.6vw, 1.9rem); margin: 0; }
@media (min-width: 720px) { .rejilla.dos { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 720px) { .rejilla.tres { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .rejilla.tres { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 620px) { .rejilla.cuatro { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .rejilla.cuatro { grid-template-columns: repeat(4, 1fr); } }
.rejilla.suelta { background: transparent; border: 0; gap: var(--paso); }
.rejilla.suelta > * { border: 1px solid var(--linea); }

.ficha { position: relative; }
.ficha h3 { margin-bottom: .45em; }
.ficha .indice {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--acero); display: block; margin-bottom: .8em;
}
a.ficha { text-decoration: none; color: inherit; display: block; transition: border-color .2s; }
a.ficha:hover { border-color: var(--tinta); }
a.ficha .ir {
  font-family: var(--mono); font-size: .74rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--acento-texto); margin-top: 1em; display: inline-block;
}

/* La bifurcación de la portada. Es lo primero que se decide: el
   particular teme que le engañen, el promotor mira plazo y capacidad, y
   una página que les hablara a los dos no le hablaría a ninguno. */
.bifurcacion { display: grid; gap: var(--paso); }
@media (min-width: 800px) { .bifurcacion { grid-template-columns: 1fr 1fr; } }
.rama {
  border: 2px solid var(--tinta); background: var(--papel);
  padding: clamp(1.4rem, 3vw, 2.2rem); display: flex; flex-direction: column;
}
.rama h3 { font-size: clamp(1.5rem, 3vw, 2rem); }
.rama p { flex: 1; }
.rama .clave {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .15em;
  text-transform: uppercase; color: #fff; background: var(--tinta);
  display: inline-block; padding: .3em .7em; margin-bottom: 1.1em; align-self: flex-start;
}

/* ── Datos, tablas y pendientes ──────────────────────────────────── */
.tabla-marco { overflow-x: auto; border: 1px solid var(--linea); background: var(--papel); }
table { border-collapse: collapse; width: 100%; min-width: 520px; }
th, td { text-align: left; padding: .85em 1em; border-bottom: 1px solid var(--linea); vertical-align: top; }
thead th {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .12em;
  text-transform: uppercase; color: #fff; background: var(--tinta); font-weight: 500;
}
tbody tr:last-child td { border-bottom: 0; }
td.dato { font-family: var(--mono); font-size: .92rem; }

.obra-datos {
  display: flex; flex-wrap: wrap; gap: 0; list-style: none; padding: 0;
  margin: 1.1em 0 0; border-top: 1px solid var(--linea);
}
.obra-datos li {
  flex: 1 1 110px; padding: .7em .9em .7em 0; margin: 0;
  border-right: 1px solid var(--linea);
}
.obra-datos li:last-child { border-right: 0; }
.obra-datos .et {
  display: block; font-family: var(--mono); font-size: .62rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--acero); margin-bottom: .2em;
}
.obra-datos .val { font-family: var(--mono); font-size: 1.02rem; font-weight: 500; }

/* Marcador de dato que solo puede dar AGR. Tiene que leerse como un
   hueco marcado y NUNCA como una cifra: por eso va en mono, en caja
   discontinua y con la palabra PENDIENTE delante. El naranja aquí es
   borde, no texto: como texto sobre hormigón claro no llega a 4.5:1. */
.pendiente-dato {
  display: inline-block; font-family: var(--mono); font-size: .74rem;
  letter-spacing: .06em; color: var(--tinta); background: rgba(0,0,0,.03);
  border: 1px dashed var(--acento); padding: .25em .6em; line-height: 1.45;
}
.pendiente-et {
  color: var(--acento-texto); text-transform: uppercase;
  letter-spacing: .11em; font-size: .68rem;
}
.pendiente-explica { color: var(--acero); letter-spacing: 0; }
.banda-oscura .pendiente-dato { color: #fff; background: rgba(255,255,255,.06); }
.banda-oscura .pendiente-et { color: var(--acento); }
.banda-oscura .pendiente-explica { color: rgba(255,255,255,.72); }

/* ── Avisos ──────────────────────────────────────────────────────── */
.aviso-bloque, .aviso-obra, .aviso-pareja, .aviso-formulario,
.nota-supuestos, .nota-plazo, .nota-loe, .nota-colaboracion,
.nota-limpiezas, .pie-credito, .aviso-imagen {
  font-size: .86rem; line-height: 1.55; color: var(--acero);
}
.aviso-bloque, .aviso-pareja, .aviso-formulario {
  border-left: 3px solid var(--acento); background: rgba(0,0,0,.025);
  padding: .85em 1.1em; margin: 1.2em 0 0; color: var(--tinta);
}
.aviso-obra {
  display: inline-block; font-family: var(--mono); font-size: .7rem;
  letter-spacing: .07em; text-transform: uppercase; color: #fff;
  background: var(--tinta); padding: .35em .7em; margin: .8em 0 0;
}
.vacio {
  border: 1px dashed var(--acero); background: rgba(0,0,0,.02);
  padding: clamp(1.2rem, 3vw, 2rem); color: var(--tinta);
}
.vacio h3 { margin-bottom: .5em; }
.vacio .como { font-family: var(--mono); font-size: .78rem; color: var(--acero); margin-top: 1em; }

/* ── Fotos y huecos de foto ──────────────────────────────────────── */
figure { margin: 0; }
.hueco-foto {
  aspect-ratio: 4 / 3; border: 1px dashed var(--acero); background:
    repeating-linear-gradient(135deg, rgba(0,0,0,.035) 0 10px, transparent 10px 20px);
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-family: var(--mono); font-size: .74rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--acero); padding: 1em;
}

/* ── Comparador antes / después ──────────────────────────────────────
   SIN JavaScript, las dos fotos se ven una al lado de la otra con su
   rótulo: la superposición es una mejora, no un requisito. Y el rótulo
   es permanente, porque un comparador a medio arrastrar sin etiqueta se
   lee al revés. */
.comparador { display: grid; gap: 2px; grid-template-columns: 1fr 1fr; background: var(--linea); }
.comparador figure { position: relative; margin: 0; }
.comparador figcaption {
  position: absolute; inset-block-start: 0; inset-inline-start: 0;
  background: var(--tinta); color: #fff; font-family: var(--mono);
  font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; padding: .35em .7em;
}
.comparador figure.despues figcaption { inset-inline-start: auto; inset-inline-end: 0; background: var(--acento); }
.tirador { display: none; }

@media (scripting: enabled) {
  .comparador[data-listo] { display: block; position: relative; gap: 0; }
  .comparador[data-listo] figure.antes { position: static; }
  .comparador[data-listo] figure.despues {
    position: absolute; inset: 0;
    clip-path: inset(0 0 0 calc(var(--pos, 50) * 1%));
  }
  .comparador[data-listo] figure.despues img { width: 100%; height: 100%; object-fit: cover; }
  .comparador[data-listo]::after {
    content: ""; position: absolute; inset-block: 0;
    inset-inline-start: calc(var(--pos, 50) * 1%);
    width: 2px; background: var(--acento); pointer-events: none;
  }
  .comparador[data-listo] + .tirador { display: block; }
}
.tirador label {
  display: flex; justify-content: space-between; font-family: var(--mono);
  font-size: .66rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--acero); margin: .7em 0 .3em;
}
.tirador input[type="range"] { width: 100%; accent-color: #F46F17; }

/* ── Filtros de la galería ───────────────────────────────────────── */
.filtros { display: none; }
@media (scripting: enabled) { .filtros { display: block; } }
.filtros .grupo { display: flex; flex-wrap: wrap; gap: .5em; align-items: center; margin-bottom: .7em; }
.filtros .et {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--acero); min-width: 5.5em;
}
.filtros button {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .06em;
  text-transform: uppercase; padding: .35em .8em; cursor: pointer;
  background: transparent; color: var(--tinta); border: 1px solid var(--linea);
}
.filtros button[aria-pressed="true"] { background: var(--tinta); color: #fff; border-color: var(--tinta); }

/* ── Fases y proceso ─────────────────────────────────────────────── */
.fases { list-style: none; padding: 0; margin: 0; counter-reset: fase; }
.fases > li {
  counter-increment: fase; border-top: 1px solid var(--linea);
  padding: 1.4em 0; margin: 0; display: grid; gap: .6em;
}
@media (min-width: 800px) { .fases > li { grid-template-columns: 4.5rem 1fr 1fr; gap: 1.5rem; } }
.fases .num {
  font-family: var(--mono); font-size: 1.5rem; color: var(--acento-texto); line-height: 1;
}
.fases .num::before { content: counter(fase, decimal-leading-zero); }

/* ── Formulario ──────────────────────────────────────────────────── */
form { display: grid; gap: 1.1em; max-width: 620px; }
form label { display: grid; gap: .35em; font-family: var(--mono); font-size: .72rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--acero); }
input, select, textarea {
  font: inherit; font-size: 1rem; padding: .7em .8em; border: 1px solid var(--acero);
  background: var(--papel); color: var(--tinta); border-radius: 0; width: 100%;
}
textarea { min-height: 7em; resize: vertical; }

/* ── Pie ─────────────────────────────────────────────────────────── */
footer.pie { padding: clamp(2.4rem, 5vw, 3.6rem) 0 2.6rem; }
footer.pie .columnas { display: grid; gap: 1.8em; }
@media (min-width: 780px) { footer.pie .columnas { grid-template-columns: 1.4fr 1fr 1fr; } }
footer.pie h4 { color: rgba(255,255,255,.6); font-family: var(--mono); font-size: .66rem;
  letter-spacing: .15em; font-weight: 500; margin-bottom: .9em; }
footer.pie ul { list-style: none; padding: 0; margin: 0; }
footer.pie li { margin-bottom: .45em; }
footer.pie a { color: rgba(255,255,255,.88); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.28); }
footer.pie a:hover { border-bottom-color: var(--acento); }
footer.pie .legalillo {
  margin-top: 2.4em; padding-top: 1.4em; border-top: 1px solid rgba(255,255,255,.16);
  font-size: .82rem; color: rgba(255,255,255,.68);
}
footer.pie .pie-credito { color: rgba(255,255,255,.68); }

/* ── Legales ─────────────────────────────────────────────────────── */
.texto-legal { max-width: 72ch; }
.texto-legal h2 { font-size: clamp(1.3rem, 2.6vw, 1.7rem); margin-top: 1.8em; }

/* ── APARICIONES ─────────────────────────────────────────────────────
   El estado oculto solo existe si hay JavaScript para quitarlo: sin
   scripting, .reveal nunca nace en opacidad 0. Un observador que no se
   dispara deja un hueco donde debía estar el contenido, y eso sale
   idéntico a «bien» en una captura. */
@media (scripting: enabled) {
  .reveal { opacity: 0; transform: translateY(10px);
    transition: opacity .55s, transform .55s 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.

   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; }
}