/* Mi Cisneros · «La Estación» — hoja única. Autoridad: diseno/SISTEMA.md
   Capas: las superficies van antes que los componentes para que cada componente pueda fijar su color. */
@layer reset, fuentes, tokens, base, composicion, superficies, componentes, utilidades, impresion;

/* ======================================================================= reset */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 5rem; }
  body { margin: 0; }
  img, svg, video { display: block; max-width: 100%; }
  img { height: auto; }
  button, input, select, textarea { font: inherit; color: inherit; }
  :where(ul, ol)[class] { margin: 0; padding: 0; list-style: none; }
  :where(h1, h2, h3, h4, p, figure, blockquote, dl, dd) { margin: 0; }
  table { border-collapse: collapse; }
  summary { cursor: pointer; }
  [hidden] { display: none !important; }
}

/* ======================================================================= fuentes */
@layer fuentes {
  @font-face { font-family: "Besley"; src: url(/assets/fuentes/besley-latin.woff2) format("woff2"); font-weight: 400 900; font-display: swap; }
  @font-face { font-family: "Atkinson Hyperlegible Next"; src: url(/assets/fuentes/atkinson-next-latin.woff2) format("woff2"); font-weight: 200 800; font-display: swap; }
  @font-face { font-family: "Besley respaldo";
    src: local("Georgia Bold"), local("Georgia-Bold"), local("Noto Serif Bold"), local("NotoSerif-Bold"), local("DejaVu Serif Bold"), local("DejaVuSerif-Bold"), local("Georgia"), local("Noto Serif");
    size-adjust: 110%; ascent-override: 113.6%; descent-override: 38.6%; line-gap-override: 0%; }
  @font-face { font-family: "Atkinson respaldo";
    src: local("Arial"), local("ArialMT"), local("Roboto"), local("Roboto-Regular"), local("Helvetica"), local("DejaVu Sans"), local("DejaVuSans");
    size-adjust: 99%; ascent-override: 99.4%; descent-override: 31.9%; line-gap-override: 0%; }
}

/* ======================================================================= tokens (§3.5) */
@layer tokens {
  :root {
    color-scheme: light;
    --cal: #FFFFFF;  --rosa: #F0B2A7;  --rosa-claro: #FCEAE6;
    --vino: #862630; --vino-oscuro: #5E1A22; --vidrio: #3A1B20;
    --tinta: #2A1B1D; --tinta-2: #5B4548; --linea: #EAD3CE; --linea-fuerte: #8C7377;
    --monte: #2E5B2B; --monte-claro: #E5EEE1;
    --luz: #F6C453;   --luz-claro: #FDF1CF;
    --rojo: #C62828;  /* SOLO emergencias */
    --agua: #3D7DB3;  --agua-oscura: #24598A; /* SOLO mapas */
    --sombra-menu: rgb(42 27 29 / .35);
    --sombra-cornisa: rgb(42 27 29 / .14);
    --punteado: rgb(91 69 72 / .55);
    --separador-monte: rgb(255 255 255 / .28);
    --f-letrero: "Besley", "Besley respaldo", Georgia, "Noto Serif", serif;
    --f-texto: "Atkinson Hyperlegible Next", "Atkinson respaldo", Arial, Roboto, sans-serif;
    --margen: clamp(1rem, 4vw, 2.5rem);
    --ancho: 73.75rem;
    --lectura: 42rem;
    --zocalo: 6px;
    --zocalo-pie: 14px;
    --radio: 14px;
    --radio-tarjeta: 14px 14px 5px 5px;
    --radio-control: 10px;
    --bloque: clamp(3.5rem, 7vw, 6rem);
    --e-1: .25rem; --e-2: .5rem; --e-3: .75rem; --e-4: 1rem; --e-5: 1.5rem;
    --e-6: 2rem;   --e-7: 3rem;  --e-8: 4rem;   --e-9: 6rem;
  }
}

/* ======================================================================= base */
@layer base {
  body { background: var(--cal); color: var(--tinta); font: 400 1.1875rem/1.55 var(--f-texto); overflow-wrap: break-word; hyphens: manual; }
  @media (min-width: 60rem) { body { font-size: 1.25rem; } }
  a { color: var(--s-enlace, var(--vino)); text-decoration-thickness: 2px; text-underline-offset: .18em; text-decoration-color: var(--s-subrayado, var(--vino)); }
  a:hover { text-decoration-color: currentColor; }
  :focus-visible { outline: 3px solid var(--s-foco, var(--tinta)); outline-offset: 2px; box-shadow: 0 0 0 7px var(--s-halo, var(--luz)); border-radius: 4px; }
  h1, h2, h3 { text-wrap: balance; }
  p, li, dd { text-wrap: pretty; }
  b, strong { font-weight: 800; }
  a[href^="mailto:"], a[href^="http"] { overflow-wrap: anywhere; }
  abbr[title] { text-decoration: none; }
  ::selection { background: var(--luz); color: var(--tinta); }
  main:focus { outline: none; }
}

/* ======================================================================= composición */
@layer composicion {
  .contenedor { width: 100%; max-width: calc(var(--ancho) + 2 * var(--margen)); margin-inline: auto; padding-inline: max(var(--margen), env(safe-area-inset-left, 0px)) max(var(--margen), env(safe-area-inset-right, 0px)); }
  .bloque { padding-block: var(--bloque); }
  .bloque--junto { padding-top: 0; }
  .bloque__cabeza { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .5rem 2rem; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
  .bloque__intro { margin: .5rem 0 0; max-width: 48ch; font-size: 1.125rem; }
  :where(.rejilla-7-5, .rejilla-4-8, .rejilla-3, .lectura, .lectura__principal, .lectura__lateral, .prosa, .noticias-portada, .lugares, .lugar, .respuestas,
    .anden, .anden__texto, .veeduria-portada, .lugar-cabeza__texto, .tunel-historias__texto, .cab-seccion__texto, .mapa-y-lista, .pie__rejilla, .galeria__rejilla, .rejilla-noticias, .datos, .lugar-cabeza, .formulario, .faq, .via) > * { min-width: 0; }
  :where(.lectura, .lectura__principal, .prosa, .noticias-portada, .anden, .veeduria-portada, .mapa-y-lista, .lugar-cabeza, .rejilla-7-5, .rejilla-4-8) { grid-template-columns: minmax(0, 1fr); }
  .rejilla-7-5, .rejilla-4-8 { display: grid; gap: 2rem; }
  @media (min-width: 60rem) {
    .rejilla-7-5 { grid-template-columns: 7fr 5fr; gap: 3rem; }
    .rejilla-4-8 { grid-template-columns: 4fr 8fr; gap: 3rem; }
  }
  .rejilla-3 { display: grid; gap: .75rem; }
  @media (min-width: 40rem) { .rejilla-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } }
  @media (min-width: 60rem) { .rejilla-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem 2.25rem; } }
  .lectura { display: grid; gap: 2.5rem; padding-bottom: var(--bloque); }
  @media (min-width: 62rem) {
    .lectura { grid-template-columns: minmax(0, var(--lectura)) 18rem; justify-content: space-between; gap: 3rem; }
  }
  .lectura__principal { min-width: 0; display: grid; gap: 2rem; align-content: start; }
  .lectura__lateral { display: grid; gap: 1.5rem; align-content: start; }
  @media (min-width: 62rem) and (min-height: 42rem) { .lectura__lateral > .lateral-fijo { position: sticky; top: 5.5rem; } }
}

/* ======================================================================= superficies (§3.3) */
@layer superficies {
  .sup-cal    { --s-fondo: var(--cal);        --s-texto: var(--tinta); --s-texto-2: var(--tinta-2);     --s-enlace: var(--vino);  --s-subrayado: var(--vino); --s-foco: var(--tinta); --s-halo: var(--luz); }
  .sup-rosa   { --s-fondo: var(--rosa);       --s-texto: var(--tinta); --s-texto-2: var(--tinta);       --s-enlace: var(--tinta); --s-subrayado: var(--vino); --s-foco: var(--tinta); --s-halo: var(--cal); }
  .sup-lavado { --s-fondo: var(--rosa-claro); --s-texto: var(--tinta); --s-texto-2: var(--tinta-2);     --s-enlace: var(--vino);  --s-subrayado: var(--vino); --s-foco: var(--tinta); --s-halo: var(--luz); }
  .sup-monte  { --s-fondo: var(--monte);      --s-texto: var(--cal);   --s-texto-2: var(--monte-claro); --s-enlace: var(--cal);   --s-subrayado: var(--luz);  --s-foco: var(--cal);   --s-halo: var(--luz); }
  .sup-rojo   { --s-fondo: var(--rojo);       --s-texto: var(--cal);   --s-texto-2: var(--cal);         --s-enlace: var(--cal);   --s-subrayado: var(--cal);  --s-foco: var(--cal);   --s-halo: var(--tinta); }
  .sup-luz    { --s-fondo: var(--luz-claro);  --s-texto: var(--tinta); --s-texto-2: var(--tinta);       --s-enlace: var(--tinta); --s-subrayado: var(--vino); --s-foco: var(--tinta); --s-halo: var(--luz); }
  :is(.sup-cal, .sup-rosa, .sup-lavado, .sup-monte, .sup-rojo, .sup-luz) { background: var(--s-fondo); color: var(--s-texto); }
}

/* ======================================================================= componentes */
@layer componentes {

  /* ---------- títulos y texto ---------- */
  .titulo-1 { font: 800 min(clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem), 12vw)/1.05 var(--f-letrero); letter-spacing: -.01em; }
  .titulo-2 { font: 800 min(clamp(2rem, 1.35rem + 2.5vw, 3.1rem), 11vw)/1.06 var(--f-letrero); letter-spacing: -.012em; }
  .titulo-3 { font: 800 min(clamp(1.625rem, 1.35rem + 1.2vw, 2.125rem), 10vw)/1.12 var(--f-letrero); }
  .antetitulo { margin: 0 0 .5rem; font: 800 1rem/1.2 var(--f-texto); color: var(--s-enlace, var(--vino)); }
  .sup-monte .antetitulo { color: var(--luz); }
  .bajada { margin-top: 1rem; max-width: 52ch; font-size: clamp(1.3125rem, 1.2rem + .5vw, 1.5rem); line-height: 1.45; }
  .meta { margin: 0; font-size: 1rem; line-height: 1.4; color: var(--s-texto-2, var(--tinta-2)); }
  .meta time { font-variant-numeric: tabular-nums; }
  .categoria { font-weight: 800; color: var(--vino); text-decoration: none; position: relative; z-index: 2; }
  .categoria:hover { text-decoration: underline; }
  .categoria--emergencia { color: var(--rojo); }
  .firma { margin-top: 1rem; font-size: 1rem; color: var(--tinta-2); }
  .ver-todo { display: inline-flex; align-items: center; gap: .375rem; min-height: 44px; font-weight: 700; text-decoration-thickness: 2px; }
  .ver-todo::after { content: "→"; }

  /* ---------- saltar al contenido ---------- */
  .saltar { position: absolute; left: 1rem; top: -10rem; z-index: 100; padding: .75rem 1rem; border-radius: var(--radio-control); background: var(--tinta); color: var(--cal); font-weight: 800; }
  .saltar:focus { top: 1rem; }

  /* ---------- 9.1 aviso ---------- */
  .aviso { border-bottom: 3px solid var(--luz); }
  .aviso--urgente { border-bottom-color: var(--vino-oscuro); }
  .aviso__dentro { display: flex; align-items: center; gap: .75rem; min-height: 48px; padding-block: .625rem; }
  .aviso__icono { flex: none; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
  .aviso p { font-size: 1rem; }
  @media (min-width: 40rem) { .aviso p { font-size: 1.0625rem; } }

  /* ---------- 9.2 cabecera ---------- */
  .barra { position: relative; z-index: 30; background: var(--cal); border-bottom: 2px solid var(--linea); }
  @media (min-height: 42rem) { .barra { position: sticky; top: 0; } }
  .barra__dentro { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem .75rem; min-height: 3.75rem; padding: .375rem max(var(--margen), env(safe-area-inset-right, 0px)) .375rem max(var(--margen), env(safe-area-inset-left, 0px)); max-width: calc(var(--ancho) + 2 * var(--margen)); margin-inline: auto; }
  .marca { display: inline-flex; align-items: center; gap: .625rem; min-height: 44px; color: var(--tinta); text-decoration: none; }
  .marca__puerta { flex: none; width: min(1.625rem, 7vw); height: min(2.125rem, 9.2vw); }
  .marca__arco { fill: var(--vino); }
  .marca__abanico { fill: none; stroke: var(--cal); stroke-width: 1.8; stroke-linecap: round; }
  .marca__zocalo { stroke: var(--vino-oscuro); stroke-width: 3; }
  .marca__texto { display: grid; }
  .marca__nombre { font: 800 min(1.25rem, 5.6vw)/1.05 var(--f-letrero); color: var(--vino); }
  .marca__lema { display: none; font: 700 1rem/1.25 var(--f-texto); color: var(--tinta); }
  @media (min-width: 40rem) { .marca__lema { display: block; } .marca__nombre { font-size: 1.5rem; } }
  .barra__dentro { container-type: inline-size; }
  .barra__secciones { display: none; }
  @container (min-width: 73rem) {
    .barra__secciones { display: block; flex: 1 1 auto; }
    .barra__secciones ul { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem 1.1rem; margin: 0; padding: 0; list-style: none; }
    .barra__secciones a { display: inline-flex; align-items: center; min-height: 44px; color: var(--tinta); font: 700 1.0625rem/1.2 var(--f-texto); text-decoration: none; border-bottom: 3px solid transparent; }
    .barra__secciones a:hover { border-bottom-color: var(--linea-fuerte); }
    .barra__secciones a[aria-current] { border-bottom-color: var(--luz); }
  }
  .barra__acciones { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
  .barra__boton { display: inline-flex; align-items: center; gap: .375rem; min-height: 44px; min-width: 44px; justify-content: center; padding: 0 min(.75rem, 3vw);
    border: 2px solid var(--linea-fuerte); border-radius: var(--radio-control); background: var(--cal); color: var(--tinta); font: 700 min(1rem, 5vw)/1 var(--f-texto); text-decoration: none; cursor: pointer; list-style: none; }
  .barra__boton::-webkit-details-marker { display: none; }
  .barra__boton:hover { background: var(--rosa-claro); }
  .barra__boton svg { width: min(1.375rem, 6vw); height: min(1.375rem, 6vw); fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
  .barra__boton--buscar { display: none; padding: 0; }
  @media (min-width: 25rem) { .barra__boton--buscar { display: inline-flex; } }

  /* ---------- 9.3 menú ---------- */
  .menu { position: static; }
  .menu:not([open]) .menu__panel { display: none; }
  .menu__cerrar { display: none; }
  .menu[open] .menu__cerrar { display: block; }
  .menu[open] .menu__abrir { display: none; }
  .menu__panel { position: absolute; left: 0; right: 0; top: 100%; z-index: 40; display: grid; gap: 1rem; max-height: calc(100dvh - 4rem); overflow: auto;
    padding: 1rem max(var(--margen), env(safe-area-inset-right, 0px)) 1.25rem max(var(--margen), env(safe-area-inset-left, 0px)); background: var(--cal); border: 2px solid var(--linea); border-bottom: var(--zocalo) solid var(--vino);
    border-radius: 0 0 5px 5px; box-shadow: 0 18px 40px -18px var(--sombra-menu); }
  @media (min-width: 40rem) {
    .menu { position: relative; }
    .menu__panel { left: auto; right: 0; top: calc(100% + .5rem); width: 22rem; padding: 1rem 1.125rem 1.25rem; border-radius: var(--radio-tarjeta); }
  }
  .menu__emergencia { display: flex; align-items: center; gap: .75rem; min-height: 52px; padding: .5rem 1rem; border-radius: var(--radio-control); background: var(--rojo); color: var(--cal); font-weight: 800; text-decoration: none; }
  .menu__emergencia svg { flex: none; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
  .menu__emergencia b { font: 800 1.375rem/1 var(--f-letrero); }
  .menu__emergencia:focus-visible { outline-color: var(--tinta); box-shadow: 0 0 0 7px var(--luz); }
  .menu__buscar { display: flex; gap: .5rem; }
  .menu__buscar input { flex: 1; min-width: 0; min-height: 52px; padding: 0 .875rem; border: 2px solid var(--linea-fuerte); border-radius: var(--radio-control); background: var(--cal); font-size: 1.125rem; }
  .menu__buscar-boton { flex: none; width: 52px; min-height: 52px; border: 0; border-radius: var(--radio-control); background: var(--vino); color: var(--cal); cursor: pointer; display: grid; place-items: center; }
  .menu__buscar-boton svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
  .menu__secciones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .25rem .5rem; }
  .menu__secciones a { display: flex; align-items: center; gap: .625rem; min-height: 52px; padding: 0 .5rem; border-radius: var(--radio-control); color: var(--tinta); font: 700 1.125rem/1.15 var(--f-texto); text-decoration: none; }
  .menu__secciones a:hover, .menu__secciones a[aria-current] { background: var(--rosa-claro); }
  .menu__secciones svg { flex: none; width: 22px; height: 22px; fill: none; stroke: var(--vino); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
  .menu__participe { font-size: 1rem; line-height: 1.6; }

  /* ---------- botones ---------- */
  .boton { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 3.25rem; padding: .75rem 1.5rem; border: 2px solid var(--vino); border-radius: var(--radio-control);
    font: 800 1.125rem/1.15 var(--f-texto); text-align: center; text-decoration: none; cursor: pointer; }
  .boton svg { flex: none; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
  .boton--primario { background: var(--vino); color: var(--cal); }
  .boton--primario:hover { background: var(--vino-oscuro); border-color: var(--vino-oscuro); }
  .boton--secundario { background: var(--cal); color: var(--vino); }
  .boton--secundario:hover { background: var(--rosa-claro); }
  .boton--grande { min-height: 3.75rem; font-size: 1.25rem; }
  .boton--ancho { width: 100%; }
  .boton--monte { background: var(--cal); border-color: var(--cal); color: var(--tinta); }
  .boton--monte:hover { background: var(--monte-claro); }
  .acciones { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; }

  /* ---------- portada: franja + fachada (§7) ---------- */
  .portada__franja img { width: 100%; height: clamp(6.5rem, 11vw, 10rem); object-fit: cover; object-position: 50% 55%; }
  .fachada { container-type: inline-size; }
  .fachada__cornisa { height: 1rem; background: linear-gradient(var(--cal) 0 9px, var(--linea-fuerte) 9px 11px, var(--cal) 11px 100%); box-shadow: 0 3px 0 var(--sombra-cornisa); position: relative; z-index: 1; }
  .fachada__muro { --cols: 4; --pil: 6px; padding: 1rem var(--pil) 0 0; background-color: var(--rosa);
    background-image: linear-gradient(90deg, var(--cal) var(--pil), transparent 0);
    background-size: calc((100% - var(--pil)) / var(--cols)) 100%; background-repeat: repeat-x; }
  @container (max-width: 21.9rem) { .fachada__muro { --cols: 3; } }
  @container (max-width: 16rem) { .fachada__muro { --cols: 2; } }
  @container (min-width: 60rem) { .fachada__muro { --cols: 8; --pil: 12px; } }
  .letrero { container-type: inline-size; width: min(100% - 1.25rem, 44rem); margin: 0 auto; translate: calc(var(--pil) / 2) 0;
    padding: .5rem 1rem .75rem; background: var(--cal); border: 5px solid var(--vino); border-radius: 10px;
    box-shadow: inset 0 0 0 4px var(--cal), inset 0 0 0 6px var(--vino); color: var(--vino); text-align: center; }
  .letrero__operador { margin: .125rem 0 0; font: 700 1rem/1.25 var(--f-texto); color: var(--tinta); }
  .letrero__titulo { margin: 0; font-weight: inherit; }
  .letrero__nombre { display: block; font: 900 min(4.75rem, 14.5cqi)/1 var(--f-letrero); letter-spacing: .03em; margin-right: -.03em; text-transform: uppercase; padding-top: .06em; }
  .letrero__fila { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .125rem 1rem; margin: .375rem 0 0; padding-top: .5rem; border-top: 2px solid var(--vino); font: 800 1rem/1.2 var(--f-texto); }
  .letrero__depto { letter-spacing: .18em; text-transform: uppercase; color: var(--tinta); }
  .letrero__altura { color: var(--vino); font-weight: 700; font-variant-numeric: tabular-nums; }
  @container (min-width: 30rem) { .letrero__fila, .letrero__operador { font-size: 1.125rem; } }
  .arcada { margin-top: 1rem; }
  .arcada__lista { display: grid; grid-template-columns: repeat(var(--cols), 1fr); margin: 0; padding: 0; list-style: none; }
  .bahia { display: flex; padding-left: var(--pil); }
  .bahia__enlace { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; padding-top: .625rem; min-width: 0; color: var(--cal); text-decoration: none; }
  .bahia__enlace:focus-visible { z-index: 2; outline-color: var(--tinta); box-shadow: 0 0 0 7px var(--cal); }
  .puerta { --vidrio-actual: var(--vidrio); position: relative; display: block; width: min(70%, 7rem); aspect-ratio: 10 / 13; container-type: inline-size;
    background: var(--vino); border: 5px solid var(--cal); border-bottom: 0; border-radius: 999px 999px 0 0; }
  @container (min-width: 60rem) { .bahia .puerta { width: min(54%, 6rem); aspect-ratio: 10 / 14; border-width: 7px; } }
  .puerta::before { content: ""; position: absolute; inset: 0 0 auto; height: 50cqi; border-radius: 50cqi 50cqi 0 0;
    background-image: radial-gradient(circle at 50% 100%, var(--vino) 0 10cqi, transparent calc(10cqi + .5px)),
      repeating-conic-gradient(from -91.75deg at 50% 100%, var(--vino) 0deg 3.5deg, transparent 3.5deg 30deg);
    background-color: var(--vidrio-actual); box-shadow: 0 4px 0 var(--vino-oscuro); transition: background-color .25s ease; }
  .puerta::after { content: ""; position: absolute; left: 14cqi; right: 14cqi; top: calc(50cqi + 4px + 9cqi); bottom: 9cqi;
    border: 2px solid var(--vino-oscuro); background: linear-gradient(90deg, transparent calc(50% - 1px), var(--vino-oscuro) 0 calc(50% + 1px), transparent 0); }
  .puerta__placa { position: absolute; z-index: 1; left: 50%; top: calc(50cqi + (100% - 50cqi) * .5); translate: -50% -42%; width: 56cqi; max-width: 2.75rem; height: auto; aspect-ratio: 1;
    padding: 13cqi; border-radius: 50%; background: var(--cal); box-shadow: 0 0 0 2px var(--vino-oscuro);
    fill: none; stroke: var(--vino); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
  .bahia__nombre { flex: 1; align-self: stretch; display: grid; place-items: center; min-height: 2.75rem; padding: .375rem .25rem .5rem;
    background: var(--vino); font: 700 1rem/1.15 var(--f-texto); text-align: center; transition: background-color .2s ease; }
  @container (min-width: 60rem) { .bahia__nombre { font-size: 1.125rem; padding: .75rem .375rem .875rem; } }
  .bahia__enlace:hover .puerta, .bahia__enlace:focus-visible .puerta { --vidrio-actual: var(--luz); }
  .bahia__enlace:hover .bahia__nombre, .bahia__enlace:focus-visible .bahia__nombre { background: var(--vino-oscuro); }
  @media (prefers-reduced-motion: no-preference) {
    .bahia .puerta::before { animation: encender 1.1s ease-in-out calc(.3s + var(--i) * 75ms) 1; }
  }
  @keyframes encender { 0%, 100% { background-color: var(--vidrio-actual); } 45% { background-color: var(--luz); } }
  /* puerta suelta: cabeceras de sección y 404 */
  .puerta--suelta { flex: none; width: 3.5rem; border-width: 4px; }
  @media (min-width: 60rem) { .puerta--suelta { width: 5rem; border-width: 5px; } }
  .puerta--encendida { --vidrio-actual: var(--luz); }
  .puerta--apagada { --vidrio-actual: var(--vidrio); }
  .puerta--grande { width: 7.5rem; }
  .puerta--suelta .puerta__placa { padding: 12cqi; }
  /* puerta dibujada a línea (§9.20) */
  .puerta-linea { display: block; width: 46%; aspect-ratio: 10 / 13; margin: auto auto 0; border: 2px solid var(--vino); border-bottom: 0; border-radius: 999px 999px 0 0;
    background: linear-gradient(var(--vino), var(--vino)) 50% 100% / 2px 48% no-repeat,
      radial-gradient(circle at 50% 100%, transparent 0 calc(50% - 2px), var(--vino) calc(50% - 2px) 50%, transparent calc(50% + .5px)) 50% 0 / 100% 50% no-repeat; }

  /* ---------- 9.7 respuestas rápidas ---------- */
  .bloque--respuestas { padding-block: 1.5rem var(--bloque); }
  @media (min-width: 60rem) { .bloque--respuestas { padding-top: 2rem; } }
  .bloque--respuestas .bloque__cabeza { margin-bottom: 1rem; }
  .bloque--respuestas .titulo-2 { font-size: min(clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem), 10vw); }
  .respuestas { display: grid; gap: .75rem; }
  @media (min-width: 40rem) { .respuestas { grid-template-columns: 1fr 1fr; } }
  @media (min-width: 62rem) { .respuestas { grid-template-columns: repeat(3, 1fr); gap: 1rem; } }
  .respuesta { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; height: 100%; min-height: 5.25rem; padding: 1rem 1.125rem;
    background: var(--cal); border: 2px solid var(--linea); border-bottom: var(--zocalo) solid var(--vino); border-radius: var(--radio-tarjeta); }
  .respuesta:hover { background: var(--rosa-claro); }
  .respuesta__icono { flex: none; width: 2rem; height: 2rem; fill: none; stroke: var(--vino); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .respuesta > div { flex: 1 1 10rem; min-width: 0; }
  .respuesta__titulo { font: 800 1.1875rem/1.25 var(--f-texto); overflow-wrap: anywhere; }
  .respuesta__titulo a { color: var(--tinta); text-decoration: none; }
  .respuesta__dato { margin: .125rem 0 0; font-size: 1rem; line-height: 1.35; color: var(--tinta-2); }
  .emergencia { display: grid; gap: .5rem; padding: .875rem 1rem 1rem; border-radius: var(--radio-tarjeta); }
  @media (min-width: 40rem) { .emergencia { grid-row: span 3; align-content: center; } }
  @media (min-width: 62rem) { .emergencia { grid-row: span 2; } }
  .emergencia__fila { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; }
  .emergencia__fila > div { flex: 1 1 10rem; min-width: 0; }
  .emergencia__icono { flex: none; width: 2.5rem; height: 2.5rem; padding: .5rem; border-radius: 50%; background: var(--cal); fill: none; stroke: var(--rojo); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
  .emergencia__titulo { font: 800 1.25rem/1.2 var(--f-texto); overflow-wrap: anywhere; }
  .emergencia__dato { font-size: 1rem; line-height: 1.35; }
  .emergencia__llamar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .25rem .5rem; min-height: 3.25rem; padding: .5rem 1rem; border-radius: var(--radio-control);
    background: var(--cal); color: var(--rojo); font: 800 1.25rem/1 var(--f-texto); text-decoration: none; }
  .emergencia__llamar b { font: 800 1.5rem/1 var(--f-letrero); }
  .emergencia__mas { font-weight: 700; font-size: 1rem; }

  /* enlace extendido: toda la tarjeta es clicable, el foco se dibuja en ::after */
  .enlace-extendido { text-decoration: none; }
  .enlace-extendido::after { content: ""; position: absolute; inset: -2px; z-index: 1; border-radius: var(--radio-tarjeta); }
  .enlace-extendido:focus-visible { outline: none; box-shadow: none; }
  .enlace-extendido:focus-visible::after { outline: 3px solid var(--s-foco, var(--tinta)); outline-offset: 3px; box-shadow: 0 0 0 8px var(--s-halo, var(--luz)); }
  .enlace-extendido:hover { text-decoration: underline; text-decoration-thickness: 2px; }

  /* ---------- andén (qué es el portal + datos) ---------- */
  .anden { display: grid; gap: 1.5rem; }
  @media (min-width: 60rem) { .anden { grid-template-columns: 5fr 7fr; align-items: center; gap: 3rem; } }
  .anden__texto { display: grid; gap: .75rem; }
  .anden__bajada { max-width: 34ch; font: 800 clamp(1.4rem, 1.15rem + 1vw, 1.9rem)/1.25 var(--f-letrero); }
  .datos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
  @media (min-width: 40rem) and (max-width: 59.99rem) { .datos { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  .dato { display: grid; align-content: start; gap: .25rem; padding: .875rem 1rem; border: 2px solid var(--linea); border-bottom: var(--zocalo) solid var(--vino); border-radius: var(--radio-tarjeta); }
  .dato__cifra { font: 800 clamp(1.6rem, 1.3rem + 1vw, 2.2rem)/1.05 var(--f-letrero); color: var(--vino); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
  .dato__nombre { font-size: 1rem; line-height: 1.3; color: var(--tinta-2); }

  /* ---------- 9.8 noticias ---------- */
  .noticias-portada { display: grid; gap: 2rem; }
  @media (min-width: 60rem) { .noticias-portada { grid-template-columns: 7fr 5fr; gap: 3rem; } }
  .noticias-portada > .noticia-tarjeta { align-self: start; }
  .noticia-tarjeta { position: relative; display: flex; flex-direction: column; overflow: hidden; background: var(--cal); border: 2px solid var(--linea); border-bottom: var(--zocalo) solid var(--vino); border-radius: var(--radio-tarjeta); }
  .noticia-tarjeta:hover { background: var(--rosa-claro); }
  .noticia-tarjeta__foto { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
  .noticia-tarjeta--destacada .noticia-tarjeta__foto { aspect-ratio: 16 / 10; }
  @media (min-width: 60rem) { .noticia-tarjeta--destacada .noticia-tarjeta__foto { aspect-ratio: 2 / 1; } }
  .noticia-tarjeta__cuerpo { display: grid; gap: .5rem; padding: 1.125rem 1.25rem 1.25rem; }
  .noticia-tarjeta__titulo { font: 800 1.25rem/1.25 var(--f-texto); overflow-wrap: anywhere; }
  .noticia-fila__titulo, .leyenda-item__nombre, .resultado__titulo, .faq__p, .ficha dd, .fuentes__lista li { overflow-wrap: anywhere; }
  .noticia-tarjeta--destacada .noticia-tarjeta__titulo { font-size: clamp(1.45rem, 1.1rem + 1.2vw, 2rem); line-height: 1.15; }
  .noticia-tarjeta__titulo a, .noticia-fila__titulo a { color: var(--tinta); }
  .noticia-tarjeta__resumen { font-size: 1.0625rem; line-height: 1.45; color: var(--tinta-2); }
  .noticias-filas { display: grid; align-content: start; }
  .noticia-fila { position: relative; display: flex; gap: 1rem; align-items: flex-start; padding-block: 1rem; border-bottom: 2px solid var(--linea); }
  .noticia-fila:first-child { padding-top: 0; }
  .noticia-fila__texto { flex: 1 1 auto; min-width: 0; display: grid; gap: .25rem; }
  .noticia-fila__titulo { font: 800 1.2rem/1.3 var(--f-texto); }
  .noticia-fila__mini { flex: none; width: 92px; height: 92px; object-fit: cover; border-radius: var(--radio-control); }
  .invitacion { margin-top: 1.5rem; padding: 1rem 1.25rem; border: 2px dashed var(--linea-fuerte); border-radius: var(--radio-tarjeta); font-size: 1.0625rem; }
  .chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.5rem; }
  .chips a { display: inline-flex; align-items: center; min-height: 44px; padding: .25rem 1rem; border: 2px solid var(--vino); border-radius: 999px; background: var(--cal); color: var(--vino); font-weight: 700; font-size: 1rem; text-decoration: none; }
  .chips a:hover, .chips a[aria-current] { background: var(--vino); color: var(--cal); }
  .rejilla-noticias { display: grid; gap: 1rem; }
  @media (min-width: 40rem) { .rejilla-noticias { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 60rem) { .rejilla-noticias { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; } }
  .paginacion { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .75rem; margin-top: 2.5rem; }
  .paginacion ol { display: flex; gap: .25rem; }
  .paginacion a, .paginacion span[aria-current] { display: grid; place-items: center; min-width: 44px; min-height: 44px; border-radius: var(--radio-control); font-weight: 700; }
  .paginacion span[aria-current] { background: var(--vino); color: var(--cal); }

  /* ---------- 9.9 lugares en arco ---------- */
  .lugares { display: grid; gap: 2rem 1.25rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 10.5rem), 1fr)); }
  @media (max-width: 23.74rem) { .lugares { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; } }
  @media (min-width: 60rem) { .lugares { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem 2.25rem; } }
  .lugar { position: relative; display: grid; gap: .75rem; align-content: start; }
  @media (max-width: 23.74rem) { .lugar { grid-template-columns: 6.5rem 1fr; align-items: center; gap: 1rem; } }
  .lugar__arco { aspect-ratio: 4 / 5; overflow: hidden; border: clamp(5px, .8vw, 9px) solid var(--cal); border-bottom: 0; border-radius: 999px 999px 0 0; box-shadow: 0 12px 0 var(--vino); background: var(--rosa-claro); margin-bottom: 12px; }
  .lugar__foto { width: 100%; height: 100%; object-fit: cover; }
  @media (prefers-reduced-motion: no-preference) {
    .lugar__foto { transition: transform .5s ease; }
    .lugar:hover .lugar__foto { transform: scale(1.04); }
  }
  .lugar__sin-foto { display: flex; height: 100%; padding-top: 18%; }
  .lugar__texto { display: grid; gap: .25rem; }
  .lugar__nombre { font: 800 1.2rem/1.25 var(--f-texto); overflow-wrap: anywhere; }
  @media (min-width: 60rem) { .lugar__nombre { font-size: 1.3rem; } }
  .lugar__nombre a { color: var(--s-texto, var(--tinta)); }
  .lugar__nota { font-size: 1rem; line-height: 1.4; overflow-wrap: anywhere; }
  @media (min-width: 60rem) { .lugar__nota { font-size: 1.05rem; } }

  /* ---------- tarjeta genérica ---------- */
  .tarjeta { position: relative; display: flex; flex-direction: column; overflow: hidden; background: var(--cal); color: var(--tinta); border: 2px solid var(--linea); border-bottom: var(--zocalo) solid var(--vino); border-radius: var(--radio-tarjeta); }
  .tarjeta:hover { background: var(--rosa-claro); }
  .tarjeta__foto { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
  .tarjeta__cuerpo { display: flex; flex-wrap: wrap; gap: .5rem 1rem; padding: 1rem 1.125rem 1.125rem; }
  @media (min-width: 60rem) { .tarjeta__cuerpo { padding: 1.25rem 1.5rem; } }
  .tarjeta__icono { flex: none; width: 1.75rem; height: 1.75rem; fill: none; stroke: var(--vino); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .tarjeta__texto { flex: 1 1 10rem; min-width: 0; display: grid; gap: .375rem; }
  .tarjeta__titulo { font: 800 1.1875rem/1.25 var(--f-texto); overflow-wrap: anywhere; }
  @media (min-width: 60rem) { .tarjeta__titulo { font-size: 1.3rem; } }
  .tarjeta__titulo a { color: var(--tinta); }
  .tarjeta__resumen { font-size: 1rem; line-height: 1.45; color: var(--tinta-2); }
  .tarjeta__estado { margin-top: .25rem; }
  .grupo + .grupo { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
  .grupo__titulo { margin-bottom: 1rem; font: 800 clamp(1.5rem, 1.25rem + 1vw, 2rem)/1.15 var(--f-letrero); }

  /* ---------- 9.13 agenda: tablero ---------- */
  .tablero-marco { overflow-x: auto; border: 2px solid var(--tinta); border-bottom: var(--zocalo) solid var(--vino); border-radius: var(--radio-tarjeta); background: var(--cal); }
  .tablero { width: 100%; font-size: 1rem; }
  .tablero caption { padding: 1rem 1.25rem .75rem; text-align: left; font: 800 1.25rem/1.25 var(--f-texto); }
  .tablero thead th { padding: .625rem 1rem; background: var(--tinta); color: var(--cal); font: 800 1rem/1.2 var(--f-texto); text-align: left; }
  .tablero td, .tablero tbody th { padding: .875rem 1rem; text-align: left; vertical-align: top; border-top: 2px dotted rgb(42 27 29 / .35); }
  .tablero__mes { font: 800 1.5rem/1.1 var(--f-letrero); color: var(--vino); white-space: normal; }
  .tablero__fiesta { font-weight: 800; font-size: 1.0625rem; }
  .tablero__actual { background: var(--luz-claro); }
  .tablero__estado { display: flex; flex-wrap: wrap; gap: .375rem; }
  .tablero__resto td { color: var(--tinta-2); }
  .tablero__resto .tablero__mes { font-size: 1.125rem; }
  @media (max-width: 39.99rem) {
    .tablero thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .tablero tr { display: grid; gap: .25rem; padding: .875rem 1rem; border-top: 2px dotted rgb(42 27 29 / .35); }
    .tablero td, .tablero tbody th { display: block; padding: 0; border: 0; }
    .tablero__estado { display: flex; }
  }

  /* ---------- 9.11 veeduría: libro de cuentas y cómo vigilamos ---------- */
  .veeduria-portada { display: grid; gap: 2.5rem; }
  @media (min-width: 60rem) { .veeduria-portada { grid-template-columns: 5fr 7fr; gap: 3rem; align-items: start; } }
  .veeduria-portada__texto { display: grid; gap: 1rem; align-content: start; }
  .libro { padding: 1.25rem clamp(18px, 3vw, 34px) .625rem; background: var(--cal); color: var(--tinta); border-bottom: var(--zocalo) solid var(--vino); border-radius: var(--radio-tarjeta); }
  .libro__cabeza { padding-bottom: .75rem; border-bottom: 3px solid var(--tinta); }
  .libro__titulo { font: 800 1.2rem/1.25 var(--f-texto); }
  .libro__fuente { font-size: 1rem; color: var(--tinta-2); }
  .libro__renglon { display: flex; align-items: baseline; padding-block: .875rem; border-bottom: 2px solid var(--linea); }
  .libro__renglon:last-child { border-bottom: 0; }
  .libro__renglon::before { content: ""; order: 1; flex: 1 1 1.5rem; min-width: 1.5rem; margin: 0 .625rem; border-bottom: 3px dotted var(--punteado); translate: 0 -.3em; }
  .libro__concepto { order: 0; flex: 0 1 auto; min-width: 8rem; font: 700 1.125rem/1.3 var(--f-texto); }
  .libro__valor { order: 2; flex: 0 1 auto; max-width: 62%; display: flex; flex-direction: column; align-items: flex-end; gap: .125rem; text-align: right; }
  .libro__cifra { font: 800 clamp(1.75rem, 1.3rem + 1.4vw, 2.4rem)/1.05 var(--f-letrero); color: var(--vino); font-variant-numeric: tabular-nums; text-decoration-thickness: 2px; }
  .libro__detalle { font-size: 1rem; color: var(--tinta-2); }
  @media (max-width: 39.99rem) {
    .libro__renglon { flex-direction: column; align-items: flex-start; gap: .25rem; }
    .libro__renglon::before { content: none; }
    .libro__valor { align-items: flex-start; text-align: left; }
  }
  .vigilamos { display: grid; gap: 1.25rem; }
  @media (min-width: 40rem) { .vigilamos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .vigilamos li { display: grid; gap: .375rem; align-content: start; }
  .vigilamos svg { width: 28px; height: 28px; fill: none; stroke: var(--vino); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .vigilamos b { font-size: 1.125rem; }
  .vigilamos p { font-size: 1.0625rem; line-height: 1.45; }
  .no-cuadra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; margin-top: 2.5rem; padding: 1.25rem 1.5rem; background: var(--cal); border: 2px solid var(--linea); border-bottom: var(--zocalo) solid var(--vino); border-radius: var(--radio-tarjeta); }
  .no-cuadra__texto { font: 800 clamp(1.4rem, 1.2rem + .8vw, 1.8rem)/1.2 var(--f-letrero); }
  .etiqueta { display: inline-block; margin-right: .375rem; padding: .0625rem .5rem; border-radius: 6px; font-size: 1rem; font-weight: 800; line-height: 1.5; vertical-align: baseline; }
  .etiqueta--oficial { background: var(--monte-claro); color: var(--monte); }
  .etiqueta--auditoria { background: var(--luz-claro); color: var(--tinta); box-shadow: inset 0 0 0 2px var(--luz); }
  .etiqueta--denuncia { background: var(--cal); color: var(--tinta-2); box-shadow: inset 0 0 0 2px var(--linea-fuerte); }

  /* ---------- chips de estado (§9.18) ---------- */
  .chip { display: inline-flex; align-items: center; gap: .375rem; padding: .25rem .75rem; border-radius: 999px; font: 700 1rem/1.25 var(--f-texto); white-space: nowrap; }
  .chip svg { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
  .chip--cumplido { background: var(--monte-claro); color: var(--monte); }
  .chip--curso { background: var(--luz-claro); color: var(--tinta); box-shadow: inset 0 0 0 2px var(--luz); }
  .chip--sin-avance { background: var(--rosa-claro); color: var(--vino); }
  .chip--sin-info { background: var(--cal); color: var(--tinta-2); border: 2px dotted var(--linea-fuerte); }
  .chip--neutro { background: var(--cal); color: var(--tinta-2); border: 2px solid var(--linea); }

  /* ---------- 9.14 línea del tiempo: la vía férrea ---------- */
  .via { position: relative; display: grid; gap: 2.25rem; padding-left: 2.5rem; }
  .via::before { content: ""; position: absolute; left: .7rem; top: .5rem; bottom: .5rem; width: 16px;
    background: linear-gradient(90deg, transparent 6px, var(--tinta) 6px 10px, transparent 10px), repeating-linear-gradient(transparent 0 10px, var(--tinta) 10px 13px); background-size: 100% 100%, 16px 100%; }
  .via__parada { position: relative; display: grid; gap: .25rem; }
  .via__parada::before { content: ""; position: absolute; left: -2.5rem; top: .35rem; width: 24px; height: 24px; margin-left: .45rem; border: 5px solid var(--vino); border-radius: 50%; background: var(--cal); }
  .via__anio { font: 800 clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem)/1 var(--f-letrero); color: var(--vino); font-variant-numeric: tabular-nums; }
  .via__titulo { font: 800 1.2rem/1.25 var(--f-texto); }
  .via__texto { font-size: 1.0625rem; line-height: 1.5; max-width: 52ch; }
  .via__tramo { margin-top: .75rem; font-size: 1rem; color: var(--s-texto-2, var(--tinta-2)); }
  @media (min-width: 60rem) {
    .via--horizontal { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2rem; padding: 4rem 0 0; }
    .via--horizontal::before { left: 12px; right: 12px; top: 1.25rem; bottom: auto; width: auto; height: 16px;
      background: linear-gradient(transparent 6px, var(--tinta) 6px 10px, transparent 10px), repeating-linear-gradient(90deg, transparent 0 10px, var(--tinta) 10px 13px); background-size: 100% 100%, 100% 16px; }
    .via--horizontal .via__parada { position: static; align-content: start; }
    .via--horizontal .via__parada::before { left: calc(var(--pos) * (100% - 24px)); top: 1rem; margin-left: 0; }
    .via--horizontal .via__tramo { position: absolute; top: -.375rem; left: calc((var(--pos) + var(--sig)) / 2 * (100% - 24px) + 12px); translate: -50% 0; margin: 0; padding: 0 .375rem; background: var(--s-fondo, var(--cal)); white-space: nowrap; }
  }

  /* ---------- 9.10 leyendas ---------- */
  .leyendas-lista { display: grid; }
  @media (min-width: 60rem) { .leyendas-lista--dos { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 3rem; } }
  .leyenda-item { position: relative; display: grid; gap: .375rem; padding-block: 1.25rem; border-bottom: 2px solid var(--separador-monte); }
  .leyenda-item--con-imagen { grid-template-columns: 5.5rem minmax(0, 1fr); column-gap: 1.25rem; align-items: start; }
  .leyenda-item--con-imagen > :not(.leyenda-item__mini) { grid-column: 2; }
  @media (min-width: 40rem) { .leyenda-item--con-imagen { grid-template-columns: 7.5rem minmax(0, 1fr); } }
  .leyenda-item__mini { grid-column: 1; grid-row: 1 / span 4; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radio); border: 3px solid var(--monte-claro); }
  .leyenda-item__nombre { font: 800 clamp(1.6rem, 1.3rem + 1vw, 2.1rem)/1.1 var(--f-letrero); }
  .leyenda-item__nombre a { color: var(--cal); text-decoration: none; }
  .leyenda-item__nombre a:hover { text-decoration: underline; text-decoration-color: var(--luz); }
  .leyenda-item__resumen { max-width: 46ch; color: var(--monte-claro); font-size: 1.0625rem; }
  .leyenda-item__tipo { font-size: 1rem; font-weight: 700; color: var(--luz); }
  .tunel-historias { overflow: hidden; display: grid; background: var(--cal); color: var(--tinta); border-bottom: var(--zocalo) solid var(--vino); border-radius: var(--radio-tarjeta); --s-enlace: var(--vino); --s-foco: var(--tinta); --s-halo: var(--luz); }
  .tunel-historias__dibujo { display: block; width: 100%; height: auto; background: var(--monte); }
  .tunel-historias__texto { display: grid; gap: .75rem; padding: 1.25rem 1.5rem 1.5rem; }
  .tunel-historias > * { min-width: 0; }
  .tunel-historias__titulo { font: 800 1.6rem/1.15 var(--f-letrero); overflow-wrap: anywhere; }

  /* ---------- 9.15 mapa ---------- */
  .mapa { container-type: inline-size; margin: 0; }
  .mapa__svg { width: 100%; height: auto; overflow: visible; }
  .m-terr { fill: var(--luz); stroke: var(--tinta); stroke-width: 2.6; stroke-linejoin: round; }
  .m-queb path { fill: none; stroke: var(--cal); stroke-width: 1.8; stroke-linecap: round; opacity: .7; }
  .m-rio { fill: none; stroke: var(--cal); stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; }
  .m-rio-t { font: 700 22px var(--f-texto); letter-spacing: .04em; fill: var(--tinta); }
  .m-casco { fill: var(--tinta); }
  .m-pueblo { font: 800 32px var(--f-letrero); fill: var(--tinta); paint-order: stroke; stroke: var(--luz); stroke-width: 7px; stroke-linejoin: round; }
  .m-movil { display: none; }
  .m-ver circle { fill: var(--cal); stroke: var(--tinta); stroke-width: 2.4; transition: fill .15s; }
  .m-nom { font: 700 20px var(--f-texto); fill: var(--tinta); paint-order: stroke; stroke: var(--luz); stroke-width: 6px; stroke-linejoin: round; }
  .m-ver[data-on] circle { fill: var(--vino); stroke: var(--cal); stroke-width: 4; }
  .m-ver[data-on] .m-nom { font-weight: 800; text-decoration: underline; }
  .m-vec { font: 700 16px var(--f-texto); letter-spacing: .16em; fill: var(--tinta-2); }
  .m-escala rect { fill: var(--tinta); }
  .m-escala rect.b { fill: var(--cal); stroke: var(--tinta); stroke-width: 1.5; }
  .m-escala text, .m-norte text, .m-ley text { font: 700 16px var(--f-texto); fill: var(--tinta); }
  .m-norte path { fill: var(--tinta); }
  .m-ley circle { fill: none; stroke: var(--tinta); stroke-width: 1.6; }
  .m-ley path { fill: none; stroke: var(--tinta); stroke-width: 1; stroke-dasharray: 2 3; }
  .m-num { display: none; }
  .m-num circle { fill: var(--cal); stroke: var(--tinta); stroke-width: 5; }
  .m-num text { font: 800 50px var(--f-texto); fill: var(--tinta); }
  .m-num[data-on] circle { fill: var(--vino); stroke: var(--cal); }
  .m-num[data-on] text { fill: var(--cal); }
  @container (max-width: 37.5rem) {
    .m-nom, .m-vec, .m-ley, .m-ver, .m-rio-t { display: none; }
    .m-num { display: inline; }
    .m-pueblo { display: none; }
    .m-pueblo.m-movil { display: inline; font-size: 56px; stroke-width: 12px; }
    .m-escala text, .m-norte text { font-size: 44px; }
  }
  .mapa--localizador .m-nom, .mapa--localizador .m-vec, .mapa--localizador .m-ley, .mapa--localizador .m-escala, .mapa--localizador .m-rio-t, .mapa--localizador .m-pueblo { display: none; }
  .mapa--localizador .m-ver { display: inline; }
  .mapa--localizador .m-ver circle { stroke-width: 4; }
  .mapa--localizador .m-ver:not([data-on]) circle { fill: var(--cal); opacity: .9; }
  .mapa__pie { display: grid; gap: .5rem; margin-top: 1rem; font-size: 1rem; line-height: 1.45; color: var(--tinta-2); }
  .mapa__pie b { color: var(--tinta); }
  .busque-vereda { display: grid; align-content: start; }
  @media (min-width: 40rem) and (max-width: 59.99rem) { .busque-vereda { grid-template-columns: 1fr 1fr; column-gap: 2rem; } }
  .busque-vereda li { display: flex; flex-wrap: wrap; align-items: center; gap: 0 .75rem; min-height: 48px; border-bottom: 2px solid var(--linea); }
  .busque-vereda__num { flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; border: 2px solid var(--tinta); border-radius: 50%; font-weight: 800; font-size: 1rem; font-variant-numeric: tabular-nums; }
  .busque-vereda a { flex: 1 1 7rem; min-width: 0; font-weight: 700; color: var(--tinta); text-decoration-color: var(--vino); overflow-wrap: anywhere; }
  .busque-vereda__ha { font-size: 1rem; color: var(--tinta-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .busque-vereda li.activa { background: var(--luz-claro); }
  .busque-vereda li.activa .busque-vereda__num { background: var(--vino); border-color: var(--vino); color: var(--cal); }
  .mapa-y-lista { display: grid; gap: 2rem; }
  @media (min-width: 60rem) { .mapa-y-lista { grid-template-columns: 7fr 5fr; gap: 3rem; align-items: start; } }

  /* ---------- 9.4 migas y 9.5 cabecera de sección ---------- */
  .migas { margin-bottom: .75rem; font-size: 1rem; color: var(--s-texto-2, var(--tinta-2)); }
  .migas ol { display: flex; flex-wrap: wrap; gap: .125rem .5rem; margin: 0; padding: 0; list-style: none; }
  .migas li { display: inline-flex; align-items: center; gap: .5rem; }
  .migas a { color: inherit; }
  .sup-rosa .migas { color: var(--tinta); }
  .migas__sep { color: var(--s-texto-2, var(--tinta-2)); }
  .cab-seccion { padding-block: clamp(2rem, 5vw, 3.5rem); border-bottom: var(--zocalo) solid var(--vino); }
  .cab-seccion__dentro { display: flex; align-items: flex-end; gap: 1.25rem; }
  @media (min-width: 60rem) { .cab-seccion__dentro { gap: 2rem; } }
  .cab-seccion__texto { flex: 1 1 auto; min-width: 0; }
  .cab-seccion__intro { margin-top: .875rem; max-width: 44ch; font-size: 1.3125rem; line-height: 1.45; }
  .cab-seccion__puerta { align-self: flex-end; margin-bottom: calc(-1 * clamp(2rem, 5vw, 3.5rem)); }
  .cab-seccion.sup-monte { border-bottom-color: var(--vino-oscuro); }

  /* ---------- páginas de contenido ---------- */
  .pagina__cabeza { padding-block: clamp(1.5rem, 4vw, 2.75rem) clamp(1.5rem, 3vw, 2.25rem); }
  .pagina__cabeza .meta { margin-bottom: .75rem; }
  .pagina__cabeza .titulo-1 { max-width: 22ch; }
  .noticia .titulo-1 { font-size: min(clamp(2rem, 1.5rem + 2vw, 3rem), 12vw); max-width: 26ch; }
  .pagina__cabeza--monte { padding-bottom: clamp(2rem, 5vw, 3rem); margin-bottom: clamp(1.5rem, 4vw, 2.5rem); border-bottom: var(--zocalo) solid var(--vino-oscuro); }
  .pagina__cabeza--monte .bajada { color: var(--monte-claro); }
  .pagina__cabeza--monte .migas { color: var(--monte-claro); }
  .figura { display: grid; gap: .5rem; margin: 0; }
  .figura img { width: 100%; border-radius: var(--radio); }
  .figura--principal img { aspect-ratio: 3 / 2; object-fit: cover; }
  .figura figcaption { font-size: 1rem; line-height: 1.4; color: var(--tinta-2); }
  .credito { display: block; margin-top: .125rem; }
  .credito a { color: inherit; }
  .prosa { display: grid; gap: 1.25rem; min-width: 0; }
  .prosa > * { max-width: 68ch; }
  .prosa :is(p, li, dd, blockquote) { overflow-wrap: anywhere; }
  .prosa h2 { margin-top: 1.5rem; font: 800 min(clamp(1.625rem, 1.35rem + 1.2vw, 2.125rem), 10vw)/1.12 var(--f-letrero); scroll-margin-top: 5.5rem; }
  .prosa h3 { margin-top: .75rem; font: 800 1.375rem/1.25 var(--f-texto); scroll-margin-top: 5.5rem; }
  .prosa h4 { font: 800 1.1875rem/1.3 var(--f-texto); }
  .prosa :is(ul, ol) { display: grid; gap: .5rem; margin: 0; padding-left: 1.5rem; }
  .prosa li::marker { color: var(--vino); font-weight: 800; }
  .prosa blockquote { padding-left: 1.25rem; border-left: 4px solid var(--rosa); font-size: 1.25rem; }
  .prosa blockquote p + p { margin-top: .5rem; }
  .prosa hr { width: 100%; height: 0; border: 0; border-top: 2px solid var(--linea); }
  .prosa .tabla-scroll, .prosa .figura, .prosa .caja, .prosa .mapa, .prosa .tablero-marco { max-width: none; }
  .prosa a.externo::after, .fuentes a.externo::after { content: " ↗"; font-size: .85em; }
  .prosa code { font-size: .95em; }

  /* lateral: en esta página */
  .indice-pagina { padding: 1rem 1.125rem; border: 2px solid var(--linea); border-bottom: var(--zocalo) solid var(--vino); border-radius: var(--radio-tarjeta); }
  .indice-pagina__titulo { margin-bottom: .5rem; font: 800 1.125rem/1.2 var(--f-texto); }
  .indice-pagina ol { display: grid; gap: .25rem; margin: 0; padding: 0; list-style: none; font-size: 1rem; line-height: 1.35; }
  .indice-pagina ol a { display: block; padding-block: .25rem; color: var(--tinta); text-decoration-color: var(--linea-fuerte); }
  .indice-pagina p + p { margin-top: .5rem; }
  .indice-pagina p { font-size: 1.0625rem; line-height: 1.5; }
  .verificado { display: flex; align-items: center; gap: .5rem; font-size: 1rem; color: var(--tinta-2); }
  .verificado svg { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--monte); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

  /* cajas */
  .caja { display: flex; flex-wrap: wrap; gap: .75rem 1rem; padding: 1.125rem 1.25rem; border-radius: var(--radio-tarjeta); }
  .caja > div { flex: 1 1 14rem; min-width: 0; display: grid; gap: .5rem; }
  .caja__titulo, .caja p { overflow-wrap: anywhere; }
  .caja__icono { flex: none; width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
  .caja__titulo { font: 800 1.1875rem/1.25 var(--f-texto); }
  .caja--seguridad { border-left: 6px solid var(--luz); }
  .caja--dudosa { background: var(--cal); border: 2px dotted var(--linea-fuerte); }
  .caja--dudosa .caja__icono { stroke: var(--tinta-2); }
  .caja--replica { background: var(--rosa-claro); border-bottom: var(--zocalo) solid var(--vino); }
  .caja--replica .caja__icono { stroke: var(--vino); }
  .esencial { padding: 1.125rem 1.25rem; background: var(--rosa-claro); border-bottom: var(--zocalo) solid var(--vino); border-radius: var(--radio-tarjeta); }
  .esencial__titulo { margin-bottom: .5rem; font: 800 1.125rem/1.2 var(--f-texto); }
  .esencial ul { display: grid; gap: .375rem; margin: 0; padding-left: 1.25rem; }
  .esencial li::marker { color: var(--vino); }
  .respuesta-corta { display: grid; gap: .75rem; padding: 1.25rem 1.5rem; background: var(--rosa-claro); border-bottom: var(--zocalo) solid var(--vino); border-radius: var(--radio-tarjeta); }
  .respuesta-corta__titulo { font: 800 1.125rem/1.2 var(--f-texto); color: var(--vino); }
  .respuesta-corta__texto { font-size: clamp(1.25rem, 1.15rem + .4vw, 1.4rem); line-height: 1.4; font-weight: 700; }
  .ve-error { padding: 1rem 1.25rem; border: 2px solid var(--linea); border-radius: var(--radio-tarjeta); font-size: 1.0625rem; }
  .compartir { display: flex; flex-wrap: wrap; gap: .75rem; }
  .solo-js { display: none; }
  .js .solo-js { display: inline-flex; }
  .fuentes { padding-top: 1.5rem; border-top: 3px solid var(--tinta); }
  .fuentes__titulo { margin-bottom: .75rem; font: 800 1.25rem/1.2 var(--f-texto); }
  .fuentes__lista { display: grid; gap: .625rem; margin: 0; padding-left: 1.5rem; font-size: 1rem; line-height: 1.45; color: var(--tinta-2); }
  .fuentes__lista li::marker { font-weight: 800; color: var(--tinta); font-variant-numeric: tabular-nums; }
  .faq { display: grid; gap: .5rem; }
  .faq .titulo-3 { margin-bottom: .5rem; }
  .faq__item { border: 2px solid var(--linea); border-radius: var(--radio-control); background: var(--cal); }
  .faq__item[open] { border-color: var(--linea-fuerte); }
  .faq__p { display: flex; justify-content: space-between; gap: 1rem; align-items: center; min-height: 52px; padding: .75rem 1rem; font-weight: 800; list-style: none; }
  .faq__p::-webkit-details-marker { display: none; }
  .faq__p::after { content: "+"; flex: none; font: 800 1.5rem/1 var(--f-letrero); color: var(--vino); }
  .faq__item[open] .faq__p::after { content: "−"; }
  .faq__r { display: grid; gap: .75rem; padding: 0 1rem 1rem; }
  .no-se-sabe { display: grid; gap: .75rem; }
  .no-se-sabe dl { display: grid; gap: .75rem; }
  .no-se-sabe__item { padding: 1rem 1.25rem; border: 2px dotted var(--linea-fuerte); border-radius: var(--radio-tarjeta); }
  .no-se-sabe dt { font-weight: 800; }
  .no-se-sabe dd { margin-top: .25rem; color: var(--tinta-2); font-size: 1.0625rem; }
  .relacionadas { padding-block: var(--bloque); background: var(--rosa-claro); border-top: var(--zocalo) solid var(--vino); }
  .relacionadas .titulo-3 { margin-bottom: 1.25rem; }
  .ficha { padding: 1.125rem 1.25rem; border: 2px solid var(--linea); border-bottom: var(--zocalo) solid var(--vino); border-radius: var(--radio-tarjeta); background: var(--cal); }
  .ficha__titulo { margin-bottom: .5rem; font: 800 1.25rem/1.2 var(--f-texto); }
  .ficha__lista { display: grid; }
  @media (min-width: 40rem) { .ficha--dos .ficha__lista { grid-template-columns: 1fr 1fr; column-gap: 1.5rem; } }
  .ficha__fila { padding-block: .625rem; border-bottom: 2px solid var(--linea); }
  .ficha__fila:last-child { border-bottom: 0; }
  .ficha dt { font-weight: 800; font-size: 1rem; color: var(--vino); }
  .ficha dd { margin-top: .125rem; font-size: 1.0625rem; line-height: 1.45; }
  .sin-foto { display: grid; justify-items: center; gap: .5rem; padding: 1.5rem 1rem; background: var(--rosa-claro); border-radius: 999px 999px 0 0; text-align: center; aspect-ratio: 4 / 5; align-content: end; }
  .sin-foto .puerta-linea { width: 40%; margin: 0 auto .5rem; }
  .sin-foto__titulo { font-weight: 800; }

  /* lugar: cabecera en dos columnas */
  .lugar-cabeza { display: grid; gap: 1.5rem; padding-block: clamp(1.5rem, 4vw, 2.75rem); }
  @media (min-width: 60rem) { .lugar-cabeza { grid-template-columns: 5fr 7fr; gap: 3rem; align-items: start; } }
  .lugar-cabeza__arco { max-width: 26rem; }
  .lugar-cabeza__arco .lugar__arco { margin-bottom: 12px; }
  .lugar-cabeza__arco img { width: 100%; height: 100%; object-fit: cover; }
  .lugar-cabeza__arco figcaption { margin-top: 1.25rem; font-size: 1rem; color: var(--tinta-2); }
  .lugar-cabeza__texto { display: grid; gap: 1.25rem; align-content: start; }
  .titulo-lugar { font: 800 min(clamp(2.1rem, 1.5rem + 2.4vw, 3.25rem), 12vw)/1.05 var(--f-letrero); letter-spacing: -.01em; }

  /* galería */
  .galeria__rejilla { display: grid; gap: 1rem; margin-top: 1rem; }
  @media (min-width: 40rem) { .galeria__rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 60rem) { .galeria__rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .figura--galeria img { aspect-ratio: 3 / 2; object-fit: cover; }

  /* ---------- 9.12 tablas ---------- */
  .tabla-scroll { overflow-x: auto; border: 2px solid var(--linea); border-bottom: var(--zocalo) solid var(--vino); border-radius: var(--radio-tarjeta); background: var(--cal);
    background-image: linear-gradient(to right, var(--cal) 30%, transparent), linear-gradient(to left, var(--cal) 30%, transparent), linear-gradient(to left, rgb(42 27 29 / .18), transparent 70%);
    background-position: left center, right center, right center; background-repeat: no-repeat; background-size: 2rem 100%, 2rem 100%, .9rem 100%; background-attachment: local, local, scroll; }
  .tabla-scroll table, .tabla { width: 100%; font-size: 1rem; line-height: 1.4; font-variant-numeric: tabular-nums; }
  .tabla-scroll caption, .tabla caption { padding: .875rem 1rem .5rem; text-align: left; font: 800 1.125rem/1.25 var(--f-texto); }
  .tabla-scroll th, .tabla-scroll td { padding: .75rem 1rem; text-align: left; vertical-align: top; border-bottom: 2px solid var(--linea); }
  .tabla-scroll thead th { background: var(--rosa-claro); font-weight: 800; border-bottom: 3px solid var(--tinta); white-space: nowrap; }
  .tabla-scroll tbody th { font-weight: 700; }
  .tabla-scroll tbody tr:last-child > * { border-bottom: 0; }
  .tabla-scroll td[style*="right"], .tabla-scroll th[style*="right"] { text-align: right; }
  .tabla__tel a { font-weight: 800; white-space: nowrap; }
  .tabla__fila--emergencia th, .tabla__fila--emergencia td { color: var(--rojo); font-weight: 800; }
  .tabla__fila--emergencia a { color: var(--rojo); }
  .tabla__fuente { margin-top: .5rem; font-size: 1rem; color: var(--tinta-2); }
  @media (max-width: 39.99rem) {
    .tabla--fichas thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .tabla--fichas tr { display: block; padding: .5rem 0; border-bottom: 2px solid var(--linea); }
    .tabla--fichas :is(td, tbody th) { display: block; padding: .25rem 1rem; border: 0; }
    .tabla--fichas td[data-etiqueta]::before { content: attr(data-etiqueta) ": "; font-weight: 700; }
    .tabla--fichas td:empty { display: none; }
    .tabla--fichas tbody th { font-size: 1.0625rem; }
  }
  .directorio__categoria { margin-top: 1.5rem; font: 800 1.375rem/1.25 var(--f-texto); }

  /* ---------- 9.17 formularios ---------- */
  .formulario { display: grid; gap: 1.5rem; max-width: 42rem; }
  .campo { display: grid; gap: .375rem; }
  .campo label, .campo legend, .campo__etiqueta { font: 700 1.125rem/1.3 var(--f-texto); }
  .campo__ayuda { font-size: 1rem; line-height: 1.4; color: var(--tinta-2); }
  .campo :is(input[type="text"], input[type="email"], input[type="tel"], input[type="search"], input[type="date"], select, textarea) { width: 100%; min-height: 52px; padding: .625rem .875rem; border: 2px solid var(--linea-fuerte); border-radius: var(--radio-control); background: var(--cal); font-size: 1.1875rem; }
  .campo textarea { min-height: calc(8lh + 1.25rem); resize: vertical; line-height: 1.5; }
  .campo input[type="file"] { padding: .5rem 0; font-size: 1rem; }
  .campo fieldset, fieldset.campo { margin: 0; padding: 0; border: 0; min-width: 0; }
  .opcion { display: flex; align-items: center; gap: .75rem; min-height: 44px; font-size: 1.125rem; }
  .opcion input { flex: none; width: 24px; height: 24px; accent-color: var(--vino); }
  .opciones { display: grid; gap: .125rem; }
  .campo--trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
  .privacidad-nota { padding: 1rem 1.25rem; background: var(--rosa-claro); border-radius: var(--radio-tarjeta); font-size: 1.0625rem; }
  .formulario__enviar { justify-self: start; }

  /* ---------- 9.21 buscar y 404 ---------- */
  .buscador { display: flex; flex-wrap: wrap; gap: .75rem; max-width: 42rem; }
  .buscador input { flex: 1 1 14rem; min-width: 0; min-height: 56px; padding: 0 1rem; border: 2px solid var(--linea-fuerte); border-radius: var(--radio-control); background: var(--cal); font-size: 1.25rem; }
  .resultados { display: grid; margin-top: 2rem; max-width: 52rem; }
  .resultado { position: relative; display: grid; gap: .25rem; padding-block: 1rem; border-bottom: 2px solid var(--linea); }
  .resultado__seccion { font-size: 1rem; font-weight: 800; color: var(--vino); }
  .resultado__titulo { font: 800 1.25rem/1.3 var(--f-texto); }
  .resultado__titulo a { color: var(--tinta); }
  .resultado__resumen { font-size: 1.0625rem; color: var(--tinta-2); }
  .resultados__estado { margin-top: 1rem; font-weight: 700; }
  .secciones-lista { display: grid; gap: .5rem; margin-top: 1.5rem; }
  @media (min-width: 40rem) { .secciones-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 60rem) { .secciones-lista { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  .secciones-lista a { display: flex; align-items: center; gap: .75rem; min-height: 56px; padding: .5rem 1rem; border: 2px solid var(--linea); border-bottom: var(--zocalo) solid var(--vino); border-radius: var(--radio-tarjeta); color: var(--tinta); font-weight: 800; text-decoration: none; }
  .secciones-lista a:hover { background: var(--rosa-claro); }
  .secciones-lista svg { flex: none; width: 24px; height: 24px; fill: none; stroke: var(--vino); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
  .error-404 { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1.5rem 2.5rem; padding-block: var(--bloque); }

  /* ---------- 9.16 pie ---------- */
  .pie { padding-top: var(--bloque); border-bottom: var(--zocalo-pie) solid var(--vino); }
  .pie__rejilla { display: grid; gap: 2rem 2.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
  .pie__lista a { overflow-wrap: anywhere; }
  .pie__marca { display: grid; gap: .75rem; align-content: start; }
  .marca--pie .marca__nombre { font-size: 1.5rem; }
  .pie__independiente { font: 800 1.125rem/1.35 var(--f-texto); }
  .pie__titulo { margin-bottom: .5rem; font: 800 1rem/1.2 var(--f-texto); }
  .pie__lista { display: grid; }
  .pie__lista--dos { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1rem; }
  .pie__lista li { display: flex; flex-wrap: wrap; align-items: center; gap: 0 .3em; min-height: 44px; }
  .pie__legal { display: grid; gap: .5rem; margin-top: 2.5rem; padding-block: 1.25rem 1.5rem; border-top: 2px solid rgb(42 27 29 / .2); font-size: 1rem; line-height: 1.6; }

  /* ---------- historias del túnel: el dibujo del portal (§8.4) ---------- */
  .portal { --concreto: #A9A69D; --cornisa: #97948B; --dovela-a: #E3B42E; --dovela-b: #1D1A1A; }
}

/* ======================================================================= utilidades */
@layer utilidades {
  .visualmente-oculto { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip-path: inset(50%) !important; white-space: nowrap !important; }
  .sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
  .centrado { text-align: center; }
  .mt-0 { margin-top: 0 !important; }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  }
}

/* ======================================================================= impresión (§12.6) */
@layer impresion {
  @media print {
    .barra, .menu, .portada, .pie, .saltar, .aviso, .compartir, .relacionadas, .lectura__lateral, .solo-js, .cab-seccion__puerta { display: none !important; }
    body { font-size: 12pt; color: var(--tinta); background: var(--cal); }
    .sup-rosa, .sup-lavado, .sup-monte, .sup-luz { background: var(--cal) !important; color: var(--tinta) !important; }
    a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 10pt; word-break: break-all; }
    .lectura { display: block; }
    .faq__item { border: 0; }
    .faq__item > *:not(summary) { display: block !important; }
  }
}