/* ==========================================================================
   Aparejo · Reformas Integrales — hoja de estilos única
   Dirección de arte: "plano de obra" (cianotipo + yeso + marca de replanteo)
   Sin fuentes web: cero peticiones de red, cero transferencia a terceros (RGPD)
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  /* Color */
  --grafito: #13171c;
  --grafito-medio: #3a424c;
  --cianotipo: #1c3b5e;
  --cianotipo-alto: #2e5c8a;
  --yeso: #e7e9e4;
  --cal: #f7f8f5;
  --blanco: #ffffff;
  --replanteo: #e3a81c;
  --replanteo-texto: #75500a;
  --linea: rgba(19, 23, 28, 0.16);
  --linea-fuerte: rgba(19, 23, 28, 0.4);
  --linea-clara: rgba(255, 255, 255, 0.22);

  /* Tipografía: tres roles, todo del sistema */
  --display: "Arial Narrow", "Helvetica Neue Condensed", "Liberation Sans Narrow",
    "Roboto Condensed", "Segoe UI", system-ui, sans-serif;
  --texto: Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;
  --dato: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, Consolas, monospace;

  /* Escala */
  --paso--2: 0.72rem;
  --paso--1: 0.82rem;
  --paso-0: 1.0625rem;
  --paso-1: 1.28rem;
  --paso-2: 1.62rem;
  --paso-3: clamp(1.9rem, 1.4rem + 2.2vw, 2.9rem);
  --paso-4: clamp(2.5rem, 1.5rem + 4.6vw, 5rem);

  /* Retícula */
  --ancho: 76rem;
  --canal: clamp(1.15rem, 4vw, 3rem);
  --rail: 8.5rem;
  --radio: 2px;
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  background: var(--cal);
  color: var(--grafito);
  font: var(--paso-0) / 1.72 var(--texto);
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

/* Cotas y cifras siempre alineadas, como en un plano */
.dato, .cota, .cifra, code, kbd, th.num, td.num {
  font-family: var(--dato);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: 0.005em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}
h1 { font-size: var(--paso-4); text-transform: uppercase; letter-spacing: 0.01em; }
h2 { font-size: var(--paso-3); text-transform: uppercase; }
h3 { font-size: var(--paso-2); }
h4 { font-size: var(--paso-1); text-transform: uppercase; letter-spacing: 0.06em; }

p, ul, ol, dl, table, figure, blockquote { margin: 0 0 1.15em; }
p { max-width: 68ch; text-wrap: pretty; }
strong { font-weight: 700; }

a { color: var(--cianotipo); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--grafito); text-decoration-thickness: 2px; }

/* WCAG 2.2 · 2.4.11 + 2.4.13 — foco siempre visible y con área propia */
:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--cianotipo-alto);
  outline-offset: 3px;
  border-radius: var(--radio);
}
.sobre-oscuro :focus-visible, .pie :focus-visible, .cabecera--oscura :focus-visible {
  outline-color: var(--replanteo);
}

::selection { background: var(--replanteo); color: var(--grafito); }

/* Salto al contenido */
.salto {
  position: absolute;
  left: 0.5rem;
  top: -4rem;
  z-index: 200;
  background: var(--grafito);
  color: var(--blanco);
  padding: 0.7rem 1.1rem;
  font: 700 var(--paso--1) / 1 var(--display);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-decoration: none;
  transition: top 0.15s;
}
.salto:focus { top: 0.5rem; color: var(--blanco); }

.solo-lectores {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- 3. Estructura ---------- */
.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--canal);
}

.bloque { padding-block: clamp(3rem, 7vw, 6rem); }
.bloque--fino { padding-block: clamp(2rem, 4vw, 3.25rem); }
.bloque--yeso { background: var(--yeso); }
.bloque--tinta { background: var(--cianotipo); color: var(--cal); }
.bloque--tinta a { color: var(--replanteo); }
.bloque--tinta a:hover { color: var(--blanco); }
.bloque--grafito { background: var(--grafito); color: var(--yeso); }
.bloque + .bloque--yeso, .bloque--yeso + .bloque { border-top: 1px solid var(--linea); }

/* Rejilla de contenido con "margen de plano" a la izquierda */
.rail {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2.75rem);
  align-items: start;
}
.rail__marca {
  font-family: var(--dato);
  font-size: var(--paso--2);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grafito-medio);
  padding-top: 0.55em;
  border-top: 2px solid var(--grafito);
  line-height: 1.5;
}
.bloque--tinta .rail__marca, .bloque--grafito .rail__marca {
  color: var(--yeso);
  border-top-color: var(--replanteo);
}
@media (max-width: 46rem) {
  .rail { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
}

.rejilla { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); }
.rejilla--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.rejilla--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15.5rem), 1fr)); }
.rejilla--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 11.5rem), 1fr)); }
.rejilla--partida { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; }
@media (max-width: 58rem) { .rejilla--partida { grid-template-columns: 1fr; } }

.eyebrow {
  display: block;
  font-family: var(--dato);
  font-size: var(--paso--2);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--replanteo-texto);
  margin-bottom: 0.9rem;
}
.bloque--tinta .eyebrow, .bloque--grafito .eyebrow { color: var(--replanteo); }

.entradilla { font-size: var(--paso-1); line-height: 1.6; max-width: 58ch; }
.limite-texto { max-width: 66ch; }
.centrado { text-align: center; margin-inline: auto; }

/* ---------- 4. Cabecera y navegación ---------- */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--cal);
  border-bottom: 1px solid var(--linea);
}
.cabecera__fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4.25rem;
}
.marca { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; color: var(--grafito); }
.marca:hover { color: var(--cianotipo); }
.marca__nombre {
  font: 700 1.34rem / 1 var(--display);
  text-transform: uppercase;
  letter-spacing: 0.13em;
}
.marca__cola {
  display: block;
  font-family: var(--dato);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--grafito-medio);
  margin-top: 0.28em;
}

.nav { display: flex; align-items: center; gap: clamp(0.35rem, 1.4vw, 1.4rem); }
.nav__lista { display: flex; align-items: center; gap: clamp(0.2rem, 1.2vw, 1.2rem); list-style: none; margin: 0; padding: 0; }
.nav__enlace {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 2.75rem; /* WCAG 2.2 · 2.5.8 objetivo ≥ 24 px */
  padding: 0.35rem 0.15rem;
  font: 700 0.83rem / 1 var(--display);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--grafito);
  text-decoration: none;
  background: none;
  border: 0;
  cursor: pointer;
  border-bottom: 2px solid transparent;
}
.nav__enlace:hover { color: var(--cianotipo); border-bottom-color: var(--replanteo); }
.nav__enlace[aria-current="page"] { color: var(--cianotipo); border-bottom-color: var(--cianotipo); }
.nav__flecha { transition: transform 0.18s; }
[aria-expanded="true"] .nav__flecha { transform: rotate(180deg); }

.nav__grupo { position: relative; }
.submenu {
  list-style: none;
  margin: 0;
  padding: 0.4rem;
  position: absolute;
  top: calc(100% + 1px);
  left: -0.6rem;
  min-width: 15rem;
  background: var(--blanco);
  border: 1px solid var(--linea-fuerte);
  box-shadow: 0 18px 40px -22px rgba(19, 23, 28, 0.5);
  z-index: 10;
}
.submenu[hidden] { display: none; }
.submenu a {
  display: block;
  padding: 0.6rem 0.7rem;
  font: 700 0.82rem / 1.3 var(--display);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--grafito);
  text-decoration: none;
}
.submenu a:hover, .submenu a[aria-current="page"] { background: var(--yeso); color: var(--cianotipo); }

.hamburguesa { display: none; }

@media (max-width: 62rem) {
  .hamburguesa {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    padding: 0.45rem 0.8rem;
    background: var(--grafito);
    color: var(--cal);
    border: 0;
    font: 700 0.78rem / 1 var(--display);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    cursor: pointer;
  }
  .nav {
    position: absolute;
    inset-inline: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--cal);
    border-bottom: 1px solid var(--linea-fuerte);
    padding: 0.5rem var(--canal) 1.5rem;
    box-shadow: 0 24px 40px -28px rgba(19, 23, 28, 0.55);
  }
  .nav[data-abierto="false"] { display: none; }
  .nav__lista { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__enlace { width: 100%; justify-content: space-between; padding-block: 0.85rem; border-bottom: 1px solid var(--linea); }
  .nav__enlace[aria-current="page"] { border-bottom-color: var(--cianotipo); }
  .submenu { position: static; border: 0; box-shadow: none; background: var(--yeso); padding: 0.25rem 0 0.25rem 0.75rem; }
  .nav .boton { margin-top: 1rem; justify-content: center; }
}

/* ---------- 5. Botones ---------- */
.boton {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 3rem;
  padding: 0.8rem 1.4rem;
  font: 700 0.86rem / 1 var(--display);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-decoration: none;
  border: 2px solid var(--grafito);
  background: var(--grafito);
  color: var(--cal);
  cursor: pointer;
  transition: transform 0.14s, background-color 0.14s, color 0.14s;
}
.boton:hover { background: var(--cianotipo); border-color: var(--cianotipo); color: var(--blanco); transform: translateY(-2px); }
.boton--marca { background: var(--replanteo); border-color: var(--replanteo); color: var(--grafito); }
.boton--marca:hover { background: var(--grafito); border-color: var(--grafito); color: var(--replanteo); }
.boton--linea { background: transparent; color: var(--grafito); }
.boton--linea:hover { background: var(--grafito); color: var(--cal); }
.bloque--tinta .boton--linea, .bloque--grafito .boton--linea { color: var(--cal); border-color: var(--cal); }
.bloque--tinta .boton--linea:hover, .bloque--grafito .boton--linea:hover { background: var(--cal); color: var(--grafito); }
.acciones { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }

/* ---------- 6. Portada ---------- */
.portada { border-bottom: 1px solid var(--linea); background: var(--cal); overflow: hidden; }
.portada__fila {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  padding-block: clamp(2.5rem, 6vw, 5rem);
}
@media (max-width: 62rem) { .portada__fila { grid-template-columns: 1fr; } }
.portada h1 { margin-bottom: 0.35em; }
.portada h1 em {
  font-style: normal;
  color: var(--cianotipo);
  display: block;
  -webkit-text-decoration: underline 5px var(--replanteo);
  text-decoration: underline 5px var(--replanteo);
  text-underline-offset: 0.12em;
}
.portada__pie {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 2.25rem;
  margin-top: 2.25rem;
  padding-top: 1.25rem;
  border-top: 2px solid var(--grafito);
}
.metrica__valor { display: block; font: 700 1.75rem / 1 var(--dato); font-variant-numeric: tabular-nums; }
.metrica__clave {
  display: block;
  font-family: var(--dato);
  font-size: var(--paso--2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--grafito-medio);
  margin-top: 0.35em;
}

/* Entrada escalonada, solo si el usuario no pide menos movimiento */
@media (prefers-reduced-motion: no-preference) {
  .portada h1, .portada .entradilla, .portada .acciones, .portada__pie, .plano-envoltorio {
    animation: subir 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
  }
  .portada h1 { animation-delay: 0.02s; }
  .portada .entradilla { animation-delay: 0.1s; }
  .portada .acciones { animation-delay: 0.18s; }
  .portada__pie { animation-delay: 0.26s; }
  .plano-envoltorio { animation-delay: 0.12s; }
  @keyframes subir { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
}

/* ---------- 7. Firma: plano interactivo ---------- */
.plano-envoltorio { background: var(--blanco); border: 1px solid var(--linea-fuerte); padding: clamp(0.9rem, 2vw, 1.5rem); }
.plano-cabecera {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  font-family: var(--dato);
  font-size: var(--paso--2);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grafito-medio);
  border-bottom: 1px solid var(--linea);
  padding-bottom: 0.6rem;
  margin-bottom: 0.9rem;
}
.plano { width: 100%; height: auto; background: var(--blanco); }
.plano .muro { fill: none; stroke: var(--grafito); stroke-width: 5; }
.plano .tabique { stroke: var(--grafito-medio); stroke-width: 2.5; }
.plano .sala { cursor: pointer; }
.plano .sala rect { fill: var(--cal); stroke: var(--grafito-medio); stroke-width: 1.5; transition: fill 0.15s; }
.plano .sala text { font-family: var(--dato); font-size: 13px; fill: var(--grafito); letter-spacing: 0.04em; pointer-events: none; }
.plano .sala .m2 { font-size: 11px; fill: var(--grafito-medio); }
.plano .sala:hover rect { fill: #dbe4ef; }
.plano .sala[aria-pressed="true"] rect { fill: var(--replanteo); stroke: var(--grafito); stroke-width: 2.5; }
.plano .sala:focus-visible { outline: 3px solid var(--cianotipo-alto); outline-offset: 2px; }
.plano .cota-linea { stroke: var(--cianotipo); stroke-width: 1; }
.plano .cota-texto { font-family: var(--dato); font-size: 11px; fill: var(--cianotipo); letter-spacing: 0.08em; }

.plano-detalle {
  margin-top: 1rem;
  border-top: 2px solid var(--grafito);
  padding-top: 0.9rem;
  min-height: 8.5rem; /* espacio reservado: sin salto de maquetación (CLS) */
}
.plano-nombre { font: 700 var(--paso-1) / 1.1 var(--display); text-transform: uppercase;
  letter-spacing: 0.05em; margin: 0 0 0.3em; }
.plano-detalle p { font-size: var(--paso--1); line-height: 1.6; margin-bottom: 0.6em; }
.plano-detalle .cota { font-size: var(--paso--2); letter-spacing: 0.1em; text-transform: uppercase; color: var(--replanteo-texto); }
.plano-ayuda { font-family: var(--dato); font-size: var(--paso--2); color: var(--grafito-medio); margin-top: 0.75rem; }

/* Listado equivalente en texto: el widget es mejora, no requisito */
.plano-tabla { width: 100%; border-collapse: collapse; font-size: var(--paso--1); }
.plano-tabla caption { text-align: left; font-family: var(--dato); font-size: var(--paso--2); letter-spacing: 0.12em; text-transform: uppercase; color: var(--grafito-medio); padding-bottom: 0.6rem; }
.plano-tabla th, .plano-tabla td { text-align: left; padding: 0.6rem 0.7rem; border-bottom: 1px solid var(--linea); vertical-align: top; }
.plano-tabla thead th { font: 700 var(--paso--2) / 1.3 var(--display); text-transform: uppercase; letter-spacing: 0.1em; border-bottom: 2px solid var(--grafito); }
.plano-tabla td.num { text-align: right; white-space: nowrap; }

/* ---------- 8. Tarjetas, listas, procesos ---------- */
.tarjeta {
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-top: 3px solid var(--cianotipo);
  padding: clamp(1.1rem, 2vw, 1.65rem);
  display: flex;
  flex-direction: column;
  height: 100%;
}
.tarjeta h3 { margin-bottom: 0.4em; }
.tarjeta p { font-size: var(--paso--1); margin-bottom: 0.9em; }
.tarjeta__pie { margin-top: auto; padding-top: 0.5rem; }
.tarjeta__cifra { font: 700 var(--paso--1) / 1 var(--dato); color: var(--replanteo-texto); letter-spacing: 0.04em; }
a.tarjeta { text-decoration: none; color: inherit; transition: transform 0.15s, border-color 0.15s; }
a.tarjeta:hover { transform: translateY(-3px); border-top-color: var(--replanteo); color: inherit; }
a.tarjeta h3 { color: var(--cianotipo); }

.lista-marcas { list-style: none; padding: 0; }
.lista-marcas li { position: relative; padding-left: 1.6rem; margin-bottom: 0.6em; }
.lista-marcas li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.85rem;
  height: 2px;
  background: var(--replanteo);
}
.bloque--tinta .lista-marcas li::before { background: var(--replanteo); }

/* El proceso SÍ es una secuencia: la numeración informa */
.fases { list-style: none; padding: 0; margin: 0; counter-reset: fase; }
.fase {
  counter-increment: fase;
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) auto;
  gap: 0.5rem 1.5rem;
  align-items: baseline;
  padding: 1.4rem 0;
  border-top: 1px solid var(--linea);
}
.fase:last-child { border-bottom: 1px solid var(--linea); }
.fase::before {
  content: counter(fase, decimal-leading-zero);
  font: 700 1.5rem / 1 var(--dato);
  color: var(--replanteo-texto);
}
.fase h3 { margin: 0 0 0.3em; }
.fase p { font-size: var(--paso--1); margin: 0; }
.fase__plazo { font-family: var(--dato); font-size: var(--paso--2); letter-spacing: 0.1em; text-transform: uppercase; color: var(--grafito-medio); white-space: nowrap; }
@media (max-width: 46rem) {
  .fase { grid-template-columns: 3rem minmax(0, 1fr); }
  .fase__plazo { grid-column: 2; }
}

/* Materiales */
.muestras { display: flex; flex-wrap: wrap; gap: 0.9rem; list-style: none; padding: 0; }
.muestra { width: 8.5rem; }
.muestra span { display: block; height: 3.6rem; border: 1px solid var(--linea-fuerte); }
.muestra strong { display: block; font: 700 var(--paso--2) / 1.3 var(--display); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 0.5rem; }
.muestra em { font-style: normal; font-family: var(--dato); font-size: 0.68rem; color: var(--grafito-medio); }
.m-roble { background: #b08347; }
.m-hidraulico { background: #7d93a8; }
.m-microcemento { background: #9a9a92; }
.m-laton { background: #ab8a3f; }
.m-cal { background: #eceae2; }

/* Tablas de datos */
.tabla-envoltorio { overflow-x: auto; border: 1px solid var(--linea); background: var(--blanco); }
.tabla { width: 100%; border-collapse: collapse; font-size: var(--paso--1); }
.tabla caption { text-align: left; padding: 0.9rem 1rem; font-family: var(--dato); font-size: var(--paso--2); letter-spacing: 0.12em; text-transform: uppercase; color: var(--grafito-medio); }
.tabla th, .tabla td { padding: 0.75rem 1rem; text-align: left; border-top: 1px solid var(--linea); }
.tabla thead th { font: 700 var(--paso--2) / 1.3 var(--display); text-transform: uppercase; letter-spacing: 0.1em; background: var(--yeso); }
.tabla td.num, .tabla th.num { text-align: right; font-family: var(--dato); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabla tbody tr:hover { background: var(--cal); }

/* Acordeón nativo: cero JS, accesible por defecto */
.acordeon { border-top: 1px solid var(--linea); }
.acordeon:last-of-type { border-bottom: 1px solid var(--linea); }
.acordeon summary {
  cursor: pointer;
  padding: 1.1rem 2.5rem 1.1rem 0;
  font: 700 var(--paso-1) / 1.3 var(--display);
  position: relative;
  list-style: none;
}
.acordeon summary::-webkit-details-marker { display: none; }
.acordeon summary::after {
  content: "+";
  position: absolute;
  right: 0.35rem;
  top: 50%;
  transform: translateY(-50%);
  font: 400 1.6rem / 1 var(--dato);
  color: var(--replanteo-texto);
}
.acordeon[open] summary::after { content: "–"; }
.acordeon summary:hover { color: var(--cianotipo); }
.acordeon__cuerpo { padding: 0 0 1.2rem; }
.acordeon__cuerpo p:last-child, .acordeon__cuerpo ul:last-child { margin-bottom: 0; }

/* Testimonios */
.cita { border-left: 3px solid var(--replanteo); padding-left: 1.25rem; margin: 0; }
.cita blockquote { margin: 0 0 0.75rem; font-size: var(--paso-1); line-height: 1.55; }
.cita figcaption { font-family: var(--dato); font-size: var(--paso--2); letter-spacing: 0.1em; text-transform: uppercase; color: var(--grafito-medio); }
.estrellas { color: var(--replanteo-texto); letter-spacing: 0.15em; }

/* Migas */
.migas { padding-block: 0.9rem; border-bottom: 1px solid var(--linea); background: var(--yeso); }
.migas ol { display: flex; flex-wrap: wrap; gap: 0.4rem 0.6rem; list-style: none; margin: 0; padding: 0; font-family: var(--dato); font-size: var(--paso--2); letter-spacing: 0.06em; text-transform: uppercase; }
.migas li + li::before { content: "/"; margin-right: 0.6rem; color: var(--grafito-medio); }
.migas [aria-current="page"] { color: var(--grafito-medio); text-decoration: none; }

/* Figuras / imágenes vectoriales */
.figura { margin: 0; border: 1px solid var(--linea-fuerte); background: var(--blanco); }
.figura svg { width: 100%; height: auto; }
.figura figcaption {
  font-family: var(--dato);
  font-size: var(--paso--2);
  letter-spacing: 0.06em;
  color: var(--grafito-medio);
  padding: 0.7rem 0.9rem;
  border-top: 1px solid var(--linea);
}
.pareja { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: 1rem; }

/* Cinta de datos */
.cinta { display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem; padding: 1.25rem 0; border-top: 2px solid var(--grafito); border-bottom: 1px solid var(--linea); }
.bloque--tinta .cinta, .bloque--grafito .cinta { border-top-color: var(--replanteo); border-bottom-color: var(--linea-clara); }

/* ---------- 9. Formulario ---------- */
.formulario { display: grid; gap: 1.1rem; max-width: 38rem; }
.campo { display: grid; gap: 0.4rem; }
.campo label { font: 700 var(--paso--1) / 1.3 var(--display); text-transform: uppercase; letter-spacing: 0.08em; }
.campo .pista { font-family: var(--dato); font-size: var(--paso--2); color: var(--grafito-medio); }
.campo input, .campo select, .campo textarea {
  font: var(--paso-0) / 1.5 var(--texto);
  padding: 0.7rem 0.8rem;
  min-height: 3rem;
  border: 1px solid var(--linea-fuerte);
  background: var(--blanco);
  color: var(--grafito);
  border-radius: var(--radio);
  width: 100%;
}
.campo textarea { min-height: 8rem; resize: vertical; }
.campo input:focus-visible, .campo select:focus-visible, .campo textarea:focus-visible { border-color: var(--cianotipo); }
.campo--error input, .campo--error select, .campo--error textarea { border-color: #a3231a; border-width: 2px; }
.error { font-family: var(--dato); font-size: var(--paso--2); color: #8a1e16; }
.error:empty { display: none; }
.campo--check { grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 0.7rem; }
.campo--check input { width: 1.4rem; height: 1.4rem; min-height: 0; margin-top: 0.15rem; accent-color: var(--cianotipo); }
.campo--check label { font-family: var(--texto); font-size: var(--paso--1); text-transform: none; letter-spacing: 0; font-weight: 400; line-height: 1.5; }
.trampa { position: absolute; left: -9999px; }
.aviso-form { border: 1px solid var(--linea-fuerte); border-left: 4px solid var(--cianotipo); background: var(--blanco); padding: 1rem 1.1rem; font-size: var(--paso--1); }
.aviso-form:empty { display: none; }

/* ---------- 10. Pie ---------- */
.pie { background: var(--grafito); color: var(--yeso); padding-block: clamp(2.5rem, 5vw, 4rem) 1.5rem; }
.pie a { color: var(--yeso); text-decoration: none; }
.pie a:hover { color: var(--replanteo); text-decoration: underline; }
.pie h2, .pie h3 { font-size: var(--paso--1); text-transform: uppercase; letter-spacing: 0.14em; color: var(--replanteo); margin-bottom: 1rem; }
.pie__rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: 2rem; }
.pie ul { list-style: none; padding: 0; margin: 0; }
.pie li { margin-bottom: 0.55em; font-size: var(--paso--1); }
.pie address { font-style: normal; font-size: var(--paso--1); line-height: 1.7; }
.pie__legal {
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--linea-clara);
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.5rem;
  align-items: center;
  font-family: var(--dato);
  font-size: var(--paso--2);
  letter-spacing: 0.04em;
  color: #b9bdb6;
}
.pie__legal a { color: #b9bdb6; }
.enlace-boton { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-decoration: underline; }

/* ---------- 11. Cookies (guía AEPD: aceptar / rechazar / configurar al mismo nivel) ---------- */
.cookies {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 150;
  background: var(--blanco);
  border-top: 3px solid var(--cianotipo);
  box-shadow: 0 -18px 40px -25px rgba(19, 23, 28, 0.55);
  padding: 1.25rem var(--canal) 1.4rem;
}
.cookies[hidden] { display: none; }
.cookies__caja { max-width: var(--ancho); margin-inline: auto; }
.cookies h2 { font-size: var(--paso-1); margin-bottom: 0.4em; }
.cookies p { font-size: var(--paso--1); max-width: 72ch; margin-bottom: 1rem; }
.cookies__botones { display: flex; flex-wrap: wrap; gap: 0.7rem; }
/* Mismo tamaño, mismo peso, mismo contraste: sin patrones engañosos */
.cookies__botones .boton { flex: 1 1 12rem; justify-content: center; min-height: 3rem; }
.cookies__panel { margin-top: 1.25rem; border-top: 1px solid var(--linea); padding-top: 1rem; }
.cookies__panel[hidden] { display: none; }
.cookies__grupo { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.6rem 0.9rem; align-items: start; padding: 0.8rem 0; border-bottom: 1px solid var(--linea); }
.cookies__grupo input { width: 1.4rem; height: 1.4rem; margin-top: 0.2rem; accent-color: var(--cianotipo); }
.cookies__grupo strong { display: block; font: 700 var(--paso--1) / 1.3 var(--display); text-transform: uppercase; letter-spacing: 0.08em; }
.cookies__grupo span { font-size: var(--paso--1); }
.cookies__grupo .cota { display: block; font-size: var(--paso--2); color: var(--grafito-medio); margin-top: 0.25rem; }

/* ---------- 12. Rendimiento y preferencias ---------- */
/* Menos trabajo de render fuera de pantalla, con altura reservada (no genera CLS) */
.bloque--difiere { content-visibility: auto; contain-intrinsic-size: auto 700px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

@media print {
  .cabecera, .nav, .cookies, .migas, .acciones, .pie__legal { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  a::after { content: " (" attr(href) ")"; font-size: 9pt; }
  .bloque { padding-block: 1rem; }
}

@media (forced-colors: active) {
  .boton { border: 2px solid ButtonText; }
  .plano .sala[aria-pressed="true"] rect { fill: Highlight; }
}