/* =========================================================
   1 · TOKENS — tema claro (base)
   ========================================================= */
:root{
  color-scheme: light dark;
  --bg:#F4F2EF; --surface:#FFFFFF; --surface-2:#EBE8E3; --surface-3:#DFDBD4;
  --ink:#191D20; --ink-2:#4A5054; --ink-muted:#636A6E;
  /* --line = 1,39:1. SEPARADOR DECORATIVO. Nunca es el único borde
     visible de un campo, botón, casilla o desplegable: eso sería 1.4.11.
     Todo control lleva --line-2 (3,70:1) o relleno con contraste propio. */
  --line:#DEDAD3; --line-2:#8B847A;
  --brand:#0B5C6B; --brand-strong:#084651; --brand-soft:#E1EDF0;
  --ok:#1E6B41;   --ok-soft:#E3EFE7;
  --warn:#8A5300; --warn-soft:#F7EBD9;
  --stop:#A32017; --stop-soft:#F7E7E3;
  --focus:#0E7C90;
  --on-brand:#FFFFFF; --on-stop:#FFFFFF;

  --shadow:0 1px 2px rgba(20,24,26,.06), 0 2px 8px rgba(20,24,26,.06);
  --shadow-lg:0 8px 32px rgba(20,24,26,.18);

  --space-2xs:4px; --space-xs:8px;  --space-s:12px;  --space-m:16px;
  --space-l:24px;  --space-xl:32px; --space-2xl:48px; --space-3xl:64px;
  --radius-s:4px; --radius-m:8px;

  --text-2xs:clamp(0.75rem, 0.723rem + 0.12vw, 0.8125rem);   /* 12 → 13 */
  --text-xs: clamp(0.875rem, 0.848rem + 0.12vw, 0.9375rem);  /* 14 → 15 */
  --text-s:  clamp(0.9375rem, 0.9rem + 0.17vw, 1rem);        /* 15 → 16 */
  --text-m:  clamp(1.0625rem, 1.02rem + 0.2vw, 1.125rem);    /* 17 → 18 */
  --text-l:  clamp(1.3125rem, 1.24rem + 0.33vw, 1.4375rem);  /* 21 → 23 */
  --text-xl: clamp(1.625rem, 1.5rem + 0.56vw, 1.75rem);      /* 26 → 28 */
  --text-2xl:clamp(2rem, 1.8rem + 0.89vw, 2.1875rem);        /* 32 → 35 */
  --text-3xl:clamp(2.5rem, 2.2rem + 1.33vw, 2.75rem);        /* 40 → 44 */

  --font:'IBM Plex Sans', system-ui, sans-serif;
  --mono:'IBM Plex Mono', ui-monospace, monospace;
  --measure:65ch;
  --header-h:56px;      /* móvil */
  --ad-inarticle:280px; --ad-section:120px; --ad-anchor:64px;
  --cookie-h:148px;
}

/* 2 · TOKENS — tema oscuro. Recalibrado, no invertido. */
@media (prefers-color-scheme: dark){ :root:not([data-theme='light']){
  --bg:#14181A; --surface:#1C2124; --surface-2:#232A2D; --surface-3:#2D3539;
  --ink:#ECEFF0; --ink-2:#B4BBBE; --ink-muted:#8B9397;
  --line:#2F373A; --line-2:#6A757A;
  --brand:#4FBDD1; --brand-strong:#7ED8E7; --brand-soft:#103138;
  --ok:#58C08A;   --ok-soft:#122C21;
  --warn:#E8A33D; --warn-soft:#33260E;
  --stop:#EE7A6B; --stop-soft:#3A1B17;
  --focus:#6FD5E8;
  --on-brand:#0E1315; --on-stop:#14181A;
  --shadow:none; --shadow-lg:0 8px 32px rgba(0,0,0,.5);
}}
[data-theme='dark']{ /* mismo bloque, elección explícita del visitante */ }

/* =========================================================
   3 · BASE TIPOGRÁFICA
   ¡OJO! Bricks fija html{font-size:62.5%}. Hay que anularlo.
   ========================================================= */
html{ font-size:100% !important; }        /* 1rem = 16px */
body{ background:var(--bg); color:var(--ink); font-family:var(--font);
      font-size:var(--text-m); line-height:1.6; -webkit-font-smoothing:antialiased; }
h1,h2,h3{ font-weight:700; letter-spacing:-.02em; line-height:1.15; text-wrap:balance; }
h1{ font-size:var(--text-2xl); letter-spacing:-.03em; }
h2{ font-size:var(--text-xl); }
h3{ font-size:var(--text-l); }
p,li{ text-wrap:pretty; }
.cde-prose p, .cde-prose li, .cde-prose h2, .cde-prose h3{ max-width:var(--measure); }
a{ color:var(--brand); text-underline-offset:3px; }
a:hover{ color:var(--brand-strong); }
:where(a,button,input,select,summary,[tabindex]):focus-visible{
  outline:3px solid var(--focus); outline-offset:2px; border-radius:var(--radius-s); }
[id]{ scroll-margin-top:calc(var(--header-h) + var(--space-l)); }
.cde-num{ font-family:var(--mono); font-variant-numeric:tabular-nums; }

/* =========================================================
   4 · COMPONENTES
   ========================================================= */
/* Semáforo — caja llena. Color + forma + texto + motivo. */
.cde-flag{ display:block; border:1px solid; border-left-width:4px;
  border-radius:var(--radius-m); padding:var(--space-m) var(--space-l); }
.cde-flag__head{ display:flex; align-items:center; gap:var(--space-s); }
.cde-flag__title{ font-size:var(--text-l); font-weight:700; letter-spacing:-.01em; }
.cde-flag__why{ margin:var(--space-s) 0 0; padding-top:var(--space-s);
  border-top:1px solid; font-size:var(--text-s); color:var(--ink); }  /* OBLIGATORIO */
.cde-flag--ok  { background:var(--ok-soft);   border-color:var(--ok);   color:var(--ok); }
.cde-flag--warn{ background:var(--warn-soft); border-color:var(--warn); color:var(--warn); }
/* Rojo en dos intensidades. MISMO nivel, distinto peso.
   --stop-live SOLO si detrás hay gas o 230 V. Nunca por dificultad. */
.cde-flag--stop{ background:var(--surface-2); border-color:var(--line-2);
                 border-left-color:var(--ink); color:var(--ink); }
.cde-flag--stop .cde-flag__why{ border-top-color:var(--line-2); }
.cde-flag--stop-live{ background:var(--stop-soft); border-color:var(--stop); color:var(--stop); }
.cde-flag--md .cde-flag__title{ font-size:var(--text-xs); }
.cde-flag--sm{ border:0; padding:0; background:none; font-size:var(--text-2xs); font-weight:700; }
.cde-flag--inline{ display:inline-flex; align-items:center; gap:5px; }

/* Aviso en prosa — solo raíl. Nunca caja llena: no es un veredicto. */
.cde-note{ border-left:3px solid var(--line-2); padding-left:var(--space-m); margin:var(--space-l) 0; }
.cde-note__label{ display:flex; align-items:center; gap:6px; font-size:var(--text-2xs);
  text-transform:uppercase; letter-spacing:.09em; font-weight:700; margin-bottom:4px; }
.cde-note--info  { border-color:var(--brand); } .cde-note--info .cde-note__label{ color:var(--brand); }
.cde-note--warn  { border-color:var(--warn); }  .cde-note--warn .cde-note__label{ color:var(--warn); }
.cde-note--danger{ border-color:var(--stop); }  .cde-note--danger .cde-note__label{ color:var(--stop); }
.cde-note--danger p{ color:var(--ink); font-weight:600; }

/* Paso numerado — baliza de 44px, máx. 2 líneas */
.cde-steps{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--space-m); }
.cde-step{ display:flex; gap:var(--space-m); align-items:flex-start;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-m); padding:var(--space-m); }
.cde-step__n{ inline-size:44px; block-size:44px; flex:none; display:flex; align-items:center;
  justify-content:center; background:var(--brand); color:var(--on-brand);
  font-family:var(--mono); font-size:1.375rem; font-weight:600; border-radius:var(--radius-s); }

/* Barra de frontera — límite editorial, no subtítulo */
.cde-border{ margin:var(--space-2xl) 0; border-block:2px solid var(--stop);
  background:var(--stop-soft); padding:var(--space-m) var(--space-l);
  display:flex; gap:var(--space-s); align-items:flex-start; }
.cde-border__text{ font-size:var(--text-m); font-weight:700; color:var(--ink); line-height:1.4; }

/* Emergencia — único rojo pleno del sitio. Sin JS: details/summary. */
.cde-sos{ background:var(--stop); color:var(--on-stop); border-radius:var(--radius-m);
  margin:var(--space-m) 0; }
.cde-sos>summary{ list-style:none; cursor:pointer; min-block-size:64px; display:flex;
  align-items:center; gap:var(--space-s); padding:var(--space-m) var(--space-l);
  font-size:var(--text-l); font-weight:700; }
.cde-sos>summary::-webkit-details-marker{ display:none; }
.cde-sos__steps{ background:var(--surface); color:var(--ink); border:2px solid var(--stop);
  border-radius:0 0 var(--radius-m) var(--radius-m); padding:var(--space-l); }
.cde-sos__steps li{ font-size:var(--text-l); line-height:1.35; }

/* Hueco de anuncio — altura reservada SIEMPRE */
.cde-ad{ display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; background:var(--surface-2); border:1px dashed var(--line-2);
  border-radius:var(--radius-s); margin:var(--space-2xl) 0; }
.cde-ad::before{ content:'Publicidad'; font-size:var(--text-2xs); font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-muted); }
.cde-ad--inarticle{ min-block-size:var(--ad-inarticle); }
.cde-ad--section  { min-block-size:var(--ad-section); }
.cde-ad--anchor   { min-block-size:var(--ad-anchor); position:sticky; bottom:0; }
.cde-gas .cde-ad--anchor{ display:none; }   /* regla dura: gas sin anclado */

/* Tabla de códigos — tabla real en escritorio, tarjetas en ≤767 */
.cde-codes{ inline-size:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; }
.cde-codes tbody tr{ border-block-end:1px solid var(--line); min-block-size:48px; }
.cde-codes tbody tr:nth-child(even){ background:var(--surface-2); }
.cde-codes tr:target{ background:var(--brand-soft);
  box-shadow:inset 4px 0 0 var(--brand); outline:2px solid var(--brand); }
.cde-codes tr:target td:first-child::before{ content:'\2192 '; color:var(--brand); }

/* 5 · BREAKPOINTS DE BRICKS — 1279 / 991 / 767 / 478, nada más */
@media (max-width:1279px){ .cde-wrap{ padding-inline:var(--space-xl); } }
@media (max-width:991px) { .cde-codes-scroll{ overflow-x:auto; } }
@media (max-width:767px) { :root{ --header-h:52px; }
  .cde-codes, .cde-codes thead, .cde-codes tbody, .cde-codes tr, .cde-codes td{ display:block; }
  .cde-codes thead{ position:absolute; inline-size:1px; block-size:1px; overflow:hidden; clip-path:inset(50%); }
  .cde-codes tr{ border:1px solid var(--line); border-radius:var(--radius-m);
    padding:var(--space-s) var(--space-m); margin-block-end:var(--space-xs); } }
@media (max-width:478px){ :root{ --cookie-h:148px; }
  .cde-wrap{ padding-inline:var(--space-m); } }
/* =========================================================
   5 · CALCULADORA «¿REPARAR O CAMBIAR?»
   Añadido 2026-07-26 tras medir en el navegador a 375 px:
   los campos salían a 42 px y el requisito duro del diseño
   (y de WCAG 2.5.8) son 44. Se fija aquí y no en el tema
   para que el clon a otro idioma lo herede.
   ========================================================= */
.qf-calculadora{
  display:grid; gap:var(--space-m,16px);
  background:var(--surface); border:1px solid var(--line);
  border-radius:12px; padding:var(--space-l,20px);
}
.qf-calc-campo{display:grid; gap:var(--space-2xs,4px);}
.qf-calc-campo label{font-weight:600;}
.qf-calculadora input,
.qf-calculadora select{
  min-height:44px;            /* objetivo táctil: no bajar de aquí */
  padding:10px 12px;
  font-size:1rem;             /* 16px evita el zoom automático de iOS al enfocar */
  border:2px solid var(--line-2);  /* --line (1,39:1) NO vale como borde de control */
  border-radius:8px;
  background:var(--surface); color:var(--ink);
  width:100%; box-sizing:border-box;
}
.qf-calculadora input:focus-visible,
.qf-calculadora select:focus-visible{
  outline:3px solid var(--focus); outline-offset:2px; border-color:var(--focus);
}
.qf-calc-resultado:empty{display:none;}
.qf-calc-veredicto{border-radius:10px; padding:var(--space-m,16px); border:1px solid var(--line-2);}
.qf-calc-veredicto h3{margin-top:0;}
.qf-calc-reparar{background:var(--ok-soft); border-color:var(--ok);}
.qf-calc-cambiar{background:var(--stop-soft); border-color:var(--stop);}
.qf-calc-empate{background:var(--warn-soft); border-color:var(--warn);}
.qf-calc-aviso{border-left:3px solid var(--warn); padding-left:var(--space-s,12px);}
.qf-calc-supuesto,.qf-calc-nota{color:var(--ink-muted);}

/* Franja de emergencia y semáforo: el rojo pleno SOLO en la emergencia. */
.qf-emergencia-franja{
  background:var(--stop); color:var(--on-stop);
  border-radius:8px; padding:12px 14px; margin:0 0 var(--space-m,16px);
  min-height:44px; display:flex; align-items:center;
}
.qf-emergencia-franja a{color:var(--on-stop); text-decoration:underline;}
.qf-semaforo{border-radius:10px; padding:var(--space-m,16px); margin:0 0 var(--space-m,16px); border-left:4px solid;}
.qf-semaforo-nivel{font-weight:700; margin:0 0 4px;}
.qf-semaforo-motivo{margin:0; color:var(--ink-2);}
.qf-verde{background:var(--ok-soft); border-color:var(--ok);}
.qf-ambar{background:var(--warn-soft); border-color:var(--warn);}
.qf-rojo{background:var(--stop-soft); border-color:var(--stop);}
.qf-frontera{border:0; border-top:3px solid var(--line-2); margin:var(--space-xl,32px) 0 var(--space-s,12px);}
.qf-frontera-texto{font-weight:600; color:var(--ink-2);}
.qf-lede{font-size:1.125rem;}
.qf-neutralidad{font-weight:600; border-left:4px solid var(--brand); padding-left:var(--space-s,12px);}

/* =========================================================
   6 · BUSCADOR DE DOS PUERTAS  (angi-cde-buscador.php + qf-buscador.js)
   Añadido 2026-07-26. Es la pieza central del sitio: la home
   es una pregunta y esto es la respuesta.
   Reglas que NO son estéticas y no se pueden relajar:
     · el campo es el control más grande sobre el pliegue (64 px);
     · font-size ≥ 16px o iOS hace zoom al enfocar (ya mordió una vez);
     · --line (1,39:1) NUNCA es el borde de un control → --line-2;
     · objetivo táctil mínimo de 44 px en TODO lo que se pulsa.
   ========================================================= */
.qf-buscador{
  margin:0 0 var(--space-xl,32px);
  container-type:inline-size;
}

/* La pregunta ES la etiqueta del campo. Un <label> de verdad, no un <p> decorativo:
   así el lector de pantalla anuncia para qué sirve la caja al enfocarla. */
.qf-bus-pregunta{
  display:block;
  font-size:var(--text-xl); font-weight:700; line-height:1.15;
  letter-spacing:-.02em; margin:0 0 var(--space-2xs,4px);
  text-wrap:balance;
}
.qf-bus-ayuda{
  margin:0 0 var(--space-s,12px);
  font-size:var(--text-s); color:var(--ink-2);
  max-width:var(--measure);
}

.qf-bus-control{ display:flex; gap:var(--space-xs,8px); align-items:stretch; }

.qf-bus-campo{
  flex:1 1 auto; min-width:0;      /* min-width:0 = lo que impide el scroll horizontal
                                      cuando el flex hijo tiene un placeholder largo */
  min-height:64px;                 /* el elemento más grande sobre el pliegue */
  padding:12px var(--space-m,16px);
  font-family:var(--font);
  font-size:1.125rem;              /* 18px. Por debajo de 16px iOS hace zoom al enfocar */
  line-height:1.3;
  color:var(--ink); background:var(--surface);
  border:2px solid var(--line-2);  /* --line NO vale como borde de control (1,39:1) */
  border-radius:var(--radius-m,8px);
  box-sizing:border-box;
  -webkit-appearance:none; appearance:none;
}
.qf-bus-campo::placeholder{ color:var(--ink-muted); opacity:1; }
.qf-bus-campo:focus-visible{
  outline:3px solid var(--focus); outline-offset:2px; border-color:var(--focus);
}
/* La lupa nativa de Safari se come el padding izquierdo y descuadra el campo. */
.qf-bus-campo::-webkit-search-decoration,
.qf-bus-campo::-webkit-search-results-button{ -webkit-appearance:none; }

.qf-bus-boton{
  flex:0 0 auto;
  min-height:64px; min-width:64px;
  padding:0 var(--space-l,24px);
  font-family:var(--font); font-size:1rem; font-weight:700;
  color:var(--on-brand); background:var(--brand);
  border:2px solid var(--brand); border-radius:var(--radius-m,8px);
  cursor:pointer;
}
.qf-bus-boton:hover{ background:var(--brand-strong); border-color:var(--brand-strong); }

.qf-bus-estado{
  margin:var(--space-s,12px) 0 0;
  font-size:var(--text-xs); color:var(--ink-muted);
}

/* --- Resultados ------------------------------------------------------- */
.qf-bus-lista{
  list-style:none; margin:var(--space-s,12px) 0 0; padding:0;
  display:flex; flex-direction:column; gap:var(--space-xs,8px);
}
.qf-bus-item{
  background:var(--surface);
  border:1px solid var(--line);
  border-left:4px solid var(--brand);   /* el borde de color es decoración, no el control */
  border-radius:var(--radius-m,8px);
  padding:var(--space-xs,8px) var(--space-m,16px);
  overflow-wrap:anywhere;               /* un modelo largo no puede ensanchar la página */
}
/* El JS oculta filas con [hidden]; sin esta regla, cualquier `display` lo anularía. */
.qf-bus-item[hidden]{ display:none; }

.qf-bus-enlace{
  display:flex; align-items:center;
  min-height:44px;                      /* objetivo táctil: no bajar de aquí */
  font-weight:700; font-size:var(--text-s);
  text-decoration:underline; text-underline-offset:3px;
}
.qf-bus-meta{
  margin:0; font-size:var(--text-2xs); color:var(--ink-muted);
  display:flex; flex-wrap:wrap; gap:var(--space-xs,8px); align-items:center;
}
.qf-bus-silo{ font-weight:700; text-transform:uppercase; letter-spacing:.08em; }
.qf-bus-resumen{ margin:var(--space-2xs,4px) 0 var(--space-xs,8px);
  font-size:var(--text-xs); color:var(--ink-2); max-width:var(--measure); }
.qf-bus-motivo{ margin:0 0 var(--space-xs,8px); font-size:var(--text-2xs); color:var(--ink-2); }

/* --- Estado «sin resultados»: un desvío, no un callejón ---------------- */
.qf-bus-sin{
  margin:var(--space-s,12px) 0 0;
  background:var(--surface-2); border:1px solid var(--line-2);
  border-radius:var(--radius-m,8px); padding:var(--space-m,16px) var(--space-l,24px);
}
.qf-bus-sin[hidden]{ display:none; }
.qf-bus-sin-titulo{ margin:0 0 var(--space-2xs,4px); font-weight:700; font-size:var(--text-l); }
.qf-bus-sin p{ font-size:var(--text-s); max-width:var(--measure); }
.qf-bus-salidas{
  list-style:none; margin:var(--space-s,12px) 0; padding:0;
  display:flex; flex-wrap:wrap; gap:var(--space-xs,8px);
}
.qf-bus-salidas a{
  display:flex; align-items:center;
  min-height:44px; padding:0 var(--space-m,16px);
  background:var(--surface); border:2px solid var(--line-2);
  border-radius:var(--radius-m,8px);
  font-size:var(--text-xs); font-weight:600; text-decoration:none;
}
.qf-bus-salidas a:hover{ border-color:var(--brand); }
.qf-bus-sin-gas{ margin:0; }
.qf-bus-sin-gas a{ color:var(--stop); font-weight:600; }

/* Cuando no hay nada que enseñar, la lista vacía no debe dejar un hueco raro. */
.qf-bus--vacio .qf-bus-lista{ display:none; }

@media (max-width:478px){
  /* A 375 px el botón junto al campo deja el campo en ~230 px: se lee mal el código
     largo que el usuario está copiando del display. Se apila, y el campo gana todo
     el ancho —que es justo lo que pide la variante 4a del diseño. */
  .qf-bus-control{ flex-direction:column; }
  .qf-bus-boton{ width:100%; min-height:48px; }
}

/* =========================================================
   7 · MARCO DEL SITIO — cabecera, pie y plantillas de Bricks
   Añadido 2026-07-26 al montar las 4 plantillas (cabecera, pie,
   ficha de avería y hub de aparato).
   Reglas duras que se repiten aquí porque se rompen solas:
     · --line NUNCA es el borde de un control → --line-2 o --brand;
     · todo lo que se pulsa mide 44 px como mínimo;
     · Bricks es DESKTOP-FIRST: la clave sin media query es escritorio
       y cada @media(max-width) baja de ahí.
   ========================================================= */

/* Escritorio sube la cabecera a 64 px (móvil ya está en 52 en §5). */
@media (min-width:768px){ :root{ --header-h:64px; } }

.qf-wrap{ inline-size:100%; max-width:1240px; margin-inline:auto;
  padding-inline:var(--space-l); box-sizing:border-box; }
@media (max-width:478px){ .qf-wrap{ padding-inline:var(--space-m); } }

/* --- 7.1 Cabecera ----------------------------------------------------- */
/* No es fija: en 375×667 una barra pegada cuesta el 8 % del pliegue y en la
   ficha ese 8 % es «qué va a costar». Se va con el scroll y vuelve arriba. */
.qf-hd{ background:var(--surface); border-block-end:1px solid var(--line); }
.qf-hd__in{ display:flex; align-items:center; gap:var(--space-m);
  min-block-size:64px; max-width:1240px; margin-inline:auto;
  padding-inline:var(--space-l); box-sizing:border-box; }

.qf-hd__logo{ font-family:var(--mono); font-size:1.1875rem; font-weight:600;
  letter-spacing:-.01em; color:var(--ink); text-decoration:none; white-space:nowrap;
  display:inline-flex; align-items:center; min-block-size:44px; }
.qf-hd__logo span{ color:var(--brand); }

/* Hueco del buscador. Mientras el bloque grande vive en la home y en /buscar/,
   la cabecera lleva un formulario compacto REAL que apunta al mismo sitio:
   así el hueco no es un adorno y el enlazado interno existe desde el día uno. */
.qf-hd__buscar{ position:relative; flex:1 1 auto; min-inline-size:0; max-inline-size:340px;
  display:flex; align-items:center; gap:8px; block-size:40px;
  padding-inline:12px; background:var(--bg);
  border:1px solid var(--line-2); border-radius:var(--radius-s); }
.qf-hd__buscar::before{ content:''; inline-size:18px; block-size:18px; flex:none;
  pointer-events:none;
  background:var(--ink-muted);
  -webkit-mask:var(--qf-lupa) center/contain no-repeat; mask:var(--qf-lupa) center/contain no-repeat; }
.qf-hd__buscar input{ flex:1 1 auto; min-inline-size:0; border:0; background:none;
  font-family:var(--font); font-size:1rem; color:var(--ink); block-size:100%;
  -webkit-appearance:none; appearance:none; }
.qf-hd__buscar input::placeholder{ color:var(--ink-muted); opacity:1; }
.qf-hd__buscar input::-webkit-search-decoration{ -webkit-appearance:none; }
.qf-hd__buscar button{ position:absolute; inline-size:1px; block-size:1px;
  overflow:hidden; clip-path:inset(50%); }   /* el Intro envía; el botón es para lectores */
:root{ --qf-lupa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7.2'/%3E%3Cline x1='16.4' y1='16.4' x2='21' y2='21'/%3E%3C/svg%3E"); }

.qf-hd__nav{ margin-inline-start:auto; }
.qf-hd__cta{ display:inline-flex; align-items:center;
  min-block-size:44px; padding:0 16px; background:var(--brand); color:var(--on-brand);
  font-size:.9375rem; font-weight:700; border-radius:var(--radius-s);
  text-decoration:none; white-space:nowrap; }
.qf-hd__cta:hover{ background:var(--brand-strong); color:var(--on-brand); }

/* El menú va SIEMPRE en panel (mobileMenu:"always"), también en escritorio.
   Motivo medido, no estético: el menú «Principal» tiene 8 entradas planas y ocupa
   ~700 px; con el campo de búsqueda a 340 px y el CTA a 182 px no caben en 1240 px
   y el campo se quedaba en 109 px. El campo es la pieza central del sitio y manda.
   Si algún día el menú se reestructura («Aparatos» con los 9 silos colgando),
   basta con volver a poner mobileMenu:"tablet_portrait" y reaparece la barra. */
.qf-hd__nav .bricks-mobile-menu-toggle{ inline-size:44px; block-size:44px;
  color:var(--ink); }
.qf-hd__nav .bricks-mobile-menu-wrapper{ background:var(--surface); }
.qf-hd__nav .bricks-mobile-menu-wrapper li a{ min-block-size:48px; display:flex;
  align-items:center; font-size:1.0625rem; color:var(--ink); text-decoration:none;
  padding-inline:var(--space-m); border-block-end:1px solid var(--line); }
.qf-hd__nav .bricks-mobile-menu-wrapper li a:hover,
.qf-hd__nav .bricks-mobile-menu-wrapper li.current-menu-item a{ color:var(--brand); }
@media (max-width:767px){
  .qf-hd__in{ min-block-size:52px; gap:var(--space-xs); padding-inline:var(--space-m); }
  .qf-hd__logo{ font-size:1.0625rem; }
  /* El campo se pliega a un objetivo de 44×44 con la lupa: un campo permanente
     en móvil se come 56 px de TODAS las páginas del sitio. */
  /* border:0, no border-color:transparent: con el borde de 1 px el botón absoluto
     se queda en 42×42 y el objetivo táctil incumple los 44. Ya mordió una vez. */
  .qf-hd__buscar{ flex:none; inline-size:44px; block-size:44px; max-inline-size:none;
    padding:0; justify-content:center; border:0; background:none;
    margin-inline-start:auto; }
  .qf-hd__buscar::before{ inline-size:24px; block-size:24px; background:var(--ink); }
  .qf-hd__buscar input{ position:absolute; inline-size:1px; block-size:1px;
    overflow:hidden; clip-path:inset(50%); padding:0; }
  /* El botón cubre los 44×44 completos y es el objetivo táctil real:
     sin código escrito, /buscar/ sirve el bloque grande de dos puertas. */
  .qf-hd__buscar button{ position:absolute; inset:0; inline-size:100%; block-size:100%;
    clip-path:none; overflow:visible; background:none; border:0; cursor:pointer;
    font-size:0; color:transparent; }
  /* La lupa y la hamburguesa van juntas a la derecha: con `auto` en los dos
     el hueco se repartía y la lupa quedaba centrada. */
  .qf-hd__nav{ margin-inline-start:0; }
  .qf-hd__cta{ display:none; }   /* vive dentro del panel del menú */
  /* La miga actual repite el H1 entero y aquí los títulos son largos: en 375 px
     se come dos líneas del pliegue. Se oculta ella y su separador. */
  .qf-migas > :nth-last-child(-n+2){ display:none; }
}

/* La franja de emergencia de la ficha es la variante 1a aprobada: 64 px de alto,
   el objetivo táctil más grande que cabe en 375 px. La regla vive aquí y no en §5
   porque es una decisión del diseño, no del componente. */
.qf-emergencia-franja{ min-block-size:64px; position:relative; }
/* El objetivo táctil es la FRANJA ENTERA, no las 20 px del enlace: quien la usa
   está en pánico y con una mano ocupada. 375×64 es imposible de fallar. */
.qf-emergencia-franja a::after{ content:''; position:absolute; inset:0; }

/* --- 7.2 Pie ---------------------------------------------------------- */
.qf-ft{ background:var(--surface-2); border-block-start:1px solid var(--line);
  padding-block:var(--space-xl) var(--space-l); margin-block-start:var(--space-3xl); }
.qf-ft__in{ max-width:1240px; margin-inline:auto; padding-inline:var(--space-l);
  box-sizing:border-box; }
.qf-ft__grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:28px; }
.qf-ft__col{ min-inline-size:0; }
.qf-ft__logo{ font-family:var(--mono); font-size:1.0625rem; font-weight:600;
  margin-block-end:10px; }
.qf-ft__logo span{ color:var(--brand); }
.qf-ft__lema{ margin:0 0 12px; font-size:1rem; line-height:1.5; max-inline-size:38ch;
  font-weight:600; }
.qf-ft__quien{ background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-s); padding:10px 12px; max-inline-size:36ch;
  font-size:.875rem; }
.qf-ft__quien strong{ display:block; }
.qf-ft__quien small{ color:var(--ink-muted); font-size:.8125rem; }
.qf-ft__nota{ margin:8px 0 0; font-size:.75rem; color:var(--ink-muted);
  max-inline-size:38ch; line-height:1.5; }
.qf-ft__titulo{ font-size:.8125rem; text-transform:uppercase; letter-spacing:.08em;
  color:var(--ink-muted); margin:0 0 10px; font-weight:400; }
.qf-ft__titulo + .qf-ft__titulo,
.qf-ft__lista + .qf-ft__titulo{ margin-block-start:16px; }
.qf-ft__lista{ list-style:none; margin:0; padding:0; display:grid; gap:2px;
  font-size:.9375rem; }
.qf-ft__lista a{ display:flex; align-items:center; min-block-size:44px;
  color:var(--ink); text-decoration:none; }
.qf-ft__lista a:hover{ color:var(--brand); text-decoration:underline; }
.qf-ft__lista a.qf-ft__gas{ color:var(--stop); font-weight:700; }
.qf-ft__base{ border-block-start:1px solid var(--line); margin-block-start:20px;
  padding-block-start:14px; font-size:.8125rem; color:var(--ink-muted); }
@media (max-width:767px){
  .qf-ft__grid{ grid-template-columns:1fr; gap:var(--space-l); }
  .qf-ft__in{ padding-inline:var(--space-m); }
}

/* --- 7.3 Migas -------------------------------------------------------- */
.qf-migas{ font-size:.8125rem; color:var(--ink-muted);
  margin-block:var(--space-m) var(--space-s); }
/* 24 px de alto mínimo (WCAG 2.5.8): las migas son una lista de enlaces,
   no texto corrido, así que no las cubre la excepción. */
.qf-migas a{ color:var(--ink-muted); display:inline-block; padding-block:4px; }
.qf-migas a:hover{ color:var(--brand); }
.qf-migas .separator{ margin-inline:6px; }

/* --- 7.4 Ficha de avería (single) ------------------------------------- */
.qf-ficha{ padding-block-end:var(--space-2xl); }
.qf-ficha__cat{ font-size:.8125rem; text-transform:uppercase; letter-spacing:.08em;
  color:var(--ink-muted); margin:0 0 4px; }
.qf-ficha__cat a{ color:var(--ink-muted); text-decoration:none; }
.qf-ficha h1{ margin:0 0 var(--space-m); max-inline-size:22ch; }
.qf-ficha__cierre{ margin-block-start:var(--space-2xl); }
.qf-cta-calc--suelta{ margin-block-start:var(--space-l); }
.qf-cta-calc{ display:flex; align-items:center; gap:10px; min-block-size:56px;
  background:var(--brand-soft); border:1px solid var(--brand);
  border-radius:var(--radius-m); padding:12px 14px; text-decoration:none;
  color:inherit; max-inline-size:var(--measure); }
.qf-cta-calc strong{ display:block; color:var(--brand); font-size:1rem; }
.qf-cta-calc small{ display:block; color:var(--ink-2); font-size:.8125rem; }

/* --- 7.5 Hub de aparato (archivo de categoría) ------------------------ */
.qf-hub{ padding-block-end:var(--space-2xl); }
.qf-hub h1{ margin:0 0 var(--space-xs); }
.qf-hub__intro{ margin:0 0 var(--space-m); font-size:1.0625rem; color:var(--ink-2);
  line-height:1.5; max-inline-size:var(--measure); }
.qf-hub__h2{ margin:var(--space-l) 0 var(--space-xs); }
.qf-hub__lista{ list-style:none; margin:0; padding:0; display:grid;
  grid-template-columns:1fr 1fr; gap:var(--space-xs); }
.qf-hub__lista > .qf-loop{ display:contents; }
.qf-hub__fila{ display:flex; align-items:center; gap:10px; min-block-size:52px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-m); padding:10px 12px;
  text-decoration:none; color:var(--ink); font-size:1.0625rem; font-weight:600; }
.qf-hub__fila:hover{ border-color:var(--brand); color:var(--brand); }
.qf-hub__fila::after{ content:'→'; margin-inline-start:auto; color:var(--ink-muted);
  font-weight:400; }
@media (max-width:767px){ .qf-hub__lista{ grid-template-columns:1fr; } }

/* Franja de gas del hub. Es el único rojo pleno junto a la página de emergencia:
   aquí se admite porque el hub de un aparato de gas es una puerta de entrada
   directa desde Google y el 1 % que huele a gas puede aterrizar aquí. */
.qf-sos-hub{ display:flex; align-items:center; gap:10px; min-block-size:60px;
  background:var(--stop); color:var(--on-stop); border-radius:var(--radius-m);
  padding:10px 14px; margin-block-end:var(--space-m); text-decoration:none; }
.qf-sos-hub strong{ display:block; font-size:1.1875rem; line-height:1.15; }
.qf-sos-hub span{ display:block; font-size:.875rem; opacity:.92; }
.qf-sos-hub:hover{ color:var(--on-stop); }

/* Hub «en preparación»: no se disculpa, ofrece lo que sí puede dar hoy. */
.qf-prep{ border:1px dashed var(--line-2); background:var(--surface-2);
  border-radius:var(--radius-m); padding:14px; margin-block-end:var(--space-l); }
.qf-prep__chip{ display:inline-block; font-size:.75rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.08em; color:var(--ink-2);
  border:1px solid var(--line-2); border-radius:99px; padding:2px 10px;
  margin-block-end:8px; }
.qf-prep p{ margin:0 0 6px; }
.qf-prep p:last-child{ margin:0; font-size:.9375rem; color:var(--ink-2); }

/* --- 7.6 Páginas sin árbol de Bricks ---------------------------------- */
/* Trampa 25 del playbook: una página que no está maquetada en Bricks se sirve
   dentro de <article id="brx-content" class="wordpress"> y SIN ningún contenedor.
   Resultado medido a 375 px: el texto empieza en x=0, pegado al borde. Afecta a
   la home, las 3 legales, contacto, /codigos/, /diagnostico/, /reparar-o-cambiar/
   y la página de emergencia. Se arregla aquí para que valga también para las
   páginas que aún no existen. Las plantillas usan <main id="brx-content">, que no
   lleva la clase `wordpress`: no se pisan. */
#brx-content.wordpress{
  inline-size:100%; max-inline-size:1240px; margin-inline:auto;
  padding-inline:var(--space-l); padding-block:var(--space-l) var(--space-2xl);
  box-sizing:border-box;
}
#brx-content.wordpress > p,
#brx-content.wordpress > ul,
#brx-content.wordpress > ol,
#brx-content.wordpress > h2,
#brx-content.wordpress > h3,
#brx-content.wordpress > h4{ max-inline-size:var(--measure); }
#brx-content.wordpress > h1{ max-inline-size:22ch; }
@media (max-width:478px){ #brx-content.wordpress{ padding-inline:var(--space-m); } }

/* =========================================================
   8 · AUDITORÍA DE MAQUETACIÓN — 2026-07-26
   Añadido al final (no reescribe §5, §6 ni §7) tras comparar
   elemento por elemento lo servido contra:
     · mockup-aprobado--sistema-diseno.html
     · mockup-aprobado--plantillas.html
     · mockup-aprobado--variantes.html
     · revision-diseno-2026-07-26.md  (manda sobre el mockup)
   Cada bloque de abajo corrige una diferencia MEDIDA en el
   navegador, no una impresión. El detalle está en
   entregables/quefalla-com/auditoria-maquetacion-2026-07-26.md
   ========================================================= */

/* --- 8.1 Tema oscuro elegido a mano ----------------------------------- */
/* En §2 el bloque [data-theme='dark'] estaba VACÍO: un visitante que
   eligiera oscuro a mano desde un navegador en claro no obtenía nada.
   No es cosmético: el pie del mockup lleva el conmutador Claro/Oscuro/Sistema,
   así que el gancho tiene que funcionar antes de que exista el botón. */
:root[data-theme='dark']{
  --bg:#14181A; --surface:#1C2124; --surface-2:#232A2D; --surface-3:#2D3539;
  --ink:#ECEFF0; --ink-2:#B4BBBE; --ink-muted:#8B9397;
  --line:#2F373A; --line-2:#6A757A;
  --brand:#4FBDD1; --brand-strong:#7ED8E7; --brand-soft:#103138;
  --ok:#58C08A;   --ok-soft:#122C21;
  --warn:#E8A33D; --warn-soft:#33260E;
  --stop:#EE7A6B; --stop-soft:#3A1B17;
  --focus:#6FD5E8;
  --on-brand:#0E1315; --on-stop:#14181A;
  --shadow:none; --shadow-lg:0 8px 32px rgba(0,0,0,.5);
  color-scheme: dark;
}
:root[data-theme='light']{ color-scheme: light; }

/* --- 8.2 Iconografía (§04 del sistema) -------------------------------- */
/* El sitio servía CERO iconos: 0 <svg> en las 40 URLs medidas. El sistema
   pide siluetas (círculo, triángulo, octágono) porque son el canal que
   sobrevive a la escala de grises — la «prueba de la fotocopia». Van como
   máscara sobre `currentColor` (mismo patrón que --qf-lupa en §7.1) para
   que hereden el color del nivel sin tocar el HTML del contenido.
   Trazo 2 sobre caja de 24, extremos redondeados, sin relleno: igual que
   los SVG del mockup, punto por punto. */
:root{
  --qf-ico-ok:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpolyline points='8 12.3 11 15.2 16.2 9.6'/%3E%3C/svg%3E");
  --qf-ico-warn:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='12 3.6 21.8 20.4 2.2 20.4'/%3E%3Cline x1='12' y1='9.8' x2='12' y2='14.4'/%3E%3Cline x1='12' y1='17.4' x2='12' y2='17.5'/%3E%3C/svg%3E");
  --qf-ico-stop:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='8.6 3 15.4 3 21 8.6 21 15.4 15.4 21 8.6 21 3 15.4 3 8.6'/%3E%3Cline x1='7.5' y1='12' x2='16.5' y2='12'/%3E%3C/svg%3E");
}

/* --- 8.3 Semáforo: .qf-semaforo pasa a ser el .cde-flag del sistema --- */
/* Lo que servía la web: caja de radio 10 px (fuera de los dos radios del
   sistema), SIN borde perimetral, título a --text-m en --ink, motivo en
   --ink-2 y sin filete separador, y sin icono. Es decir: los seis casos de
   contraste verificados del documento (tinta de nivel sobre su fondo
   teñido) no se estaban usando, y la prueba de la fotocopia suspendía
   porque los cuatro niveles eran la misma silueta.
   Aquí se reconstruye la pieza del mockup sin tocar el HTML: tres variables
   por nivel (--qf-nivel = tinta e icono, --qf-box = borde y filete
   separador, --qf-rail = raíl izquierdo de 4 px). */
.qf-semaforo{
  --qf-nivel:var(--ink); --qf-box:var(--line-2); --qf-rail:var(--ink);
  --qf-ico:var(--qf-ico-stop);
  border:1px solid var(--qf-box);
  border-left:4px solid var(--qf-rail);
  border-radius:var(--radius-m);          /* eran 10 px: no es un radio del sistema */
  padding:var(--space-m) var(--space-l);
  margin:0 0 var(--space-m);
}
.qf-semaforo-nivel{
  display:flex; align-items:center; gap:var(--space-s);
  margin:0;
  font-size:var(--text-l);                /* era --text-m */
  font-weight:700; letter-spacing:-.01em;
  color:var(--qf-nivel);
}
.qf-semaforo-nivel::before{               /* la silueta: el canal que aguanta el gris */
  content:''; flex:none; inline-size:30px; block-size:30px;
  background:currentColor;
  -webkit-mask:var(--qf-ico) center/contain no-repeat;
          mask:var(--qf-ico) center/contain no-repeat;
}
.qf-semaforo-motivo{                       /* renglón fijo y OBLIGATORIO */
  margin:var(--space-s) 0 0;
  padding-block-start:var(--space-s);
  border-block-start:1px solid var(--qf-box);
  font-size:var(--text-s);
  color:var(--ink);                        /* era --ink-2 */
  line-height:1.55;
}
.qf-verde{ background:var(--ok-soft);
  --qf-nivel:var(--ok);   --qf-box:var(--ok);   --qf-rail:var(--ok);   --qf-ico:var(--qf-ico-ok); }
.qf-ambar{ background:var(--warn-soft);
  --qf-nivel:var(--warn); --qf-box:var(--warn); --qf-rail:var(--warn); --qf-ico:var(--qf-ico-warn); }

/* Los DOS niveles del rojo (corrección aprobada en revision-diseno).
   Por defecto el rojo NO tiene color: tinta --ink sobre --surface-2 con el
   octágono. El color se enciende SOLO si detrás hay gas o 230 V, y eso lo
   pide el contenido con .qf-rojo-vivo. Si el redactor lo olvida, sale el
   sobrio — el fallo cae del lado seguro, porque lo que distingue al vivo ya
   está escrito en el motivo. Presión, agua caliente, electrónica de baja
   tensión o garantía: sobrio, sin excepciones. */
.qf-rojo{ background:var(--surface-2);
  --qf-nivel:var(--ink);  --qf-box:var(--line-2); --qf-rail:var(--ink);  --qf-ico:var(--qf-ico-stop); }
.qf-rojo-vivo,
.qf-rojo.qf-rojo-vivo{ background:var(--stop-soft);
  --qf-nivel:var(--stop); --qf-box:var(--stop);   --qf-rail:var(--stop); --qf-ico:var(--qf-ico-stop); }

/* Los otros tres tamaños del §06, para cuando el contenido los use.
   (b) medio: árbol y tarjetas · (c) pequeño: fila de tabla · (d) en línea. */
.qf-semaforo--md{ padding:var(--space-s) var(--space-m); }
.qf-semaforo--md .qf-semaforo-nivel{ font-size:var(--text-xs); }
.qf-semaforo--md .qf-semaforo-nivel::before{ inline-size:18px; block-size:18px; }
.qf-semaforo--sm,
.qf-semaforo--inline{ border:0; padding:0; background:none; margin:0; }
.qf-semaforo--sm .qf-semaforo-nivel,
.qf-semaforo--inline .qf-semaforo-nivel{ font-size:var(--text-2xs); gap:5px; }
.qf-semaforo--sm .qf-semaforo-nivel::before,
.qf-semaforo--inline .qf-semaforo-nivel::before{ inline-size:15px; block-size:15px; }
.qf-semaforo--inline{ display:inline-flex; align-items:center; }
.qf-semaforo--sm .qf-semaforo-motivo,
.qf-semaforo--inline .qf-semaforo-motivo{ display:none; }

/* El mismo icono para el componente canónico del sistema, por si alguna
   página futura usa .cde-flag en vez de .qf-semaforo. */
.cde-flag--ok  { --qf-ico:var(--qf-ico-ok); }
.cde-flag--warn{ --qf-ico:var(--qf-ico-warn); }
.cde-flag--stop, .cde-flag--stop-live{ --qf-ico:var(--qf-ico-stop); }
.cde-flag__title::before{
  content:''; display:inline-block; inline-size:30px; block-size:30px;
  vertical-align:-7px; margin-inline-end:var(--space-s);
  background:currentColor;
  -webkit-mask:var(--qf-ico,var(--qf-ico-stop)) center/contain no-repeat;
          mask:var(--qf-ico,var(--qf-ico-stop)) center/contain no-repeat;
}

/* --- 8.4 Barra de frontera: variante 3b, «cambio de suelo» ------------ */
/* Lo que servía la web era un <hr> de 3 px en --line-2 con un párrafo
   debajo: eso es 3a (franja de corte), la variante DESCARTADA. La elegida
   es 3b, y su razón es que funciona SIN LEERSE: a partir de la línea el
   fondo cambia y no vuelve, así que todo lo de debajo se ve «al otro lado»
   también para quien baja rápido. Sin envoltorio en el HTML se consigue con
   el combinador de hermanos: el suelo se pinta en cada hermano posterior y
   los huecos se hacen con padding (no con margin) para que no se vea el
   fondo de la página entre bloques. */
.cde-prose hr.qf-frontera{
  border:0; border-block-start:3px solid var(--stop);   /* era --line-2 */
  block-size:0;
  margin:var(--space-2xl) calc(-1 * var(--space-l)) 0;
}
.cde-prose .qf-frontera ~ *{
  background:var(--surface-2);
  margin-inline:calc(-1 * var(--space-l));
  padding-inline:var(--space-l);
  margin-block:0;
  padding-block:0 var(--space-m);
  max-inline-size:calc(var(--measure) + 2 * var(--space-l));
}
.cde-prose .qf-frontera + *{ padding-block-start:var(--space-m); }
.cde-prose .qf-frontera ~ h2,
.cde-prose .qf-frontera ~ h3{ padding-block-start:var(--space-l); }
/* El padding-inline de arriba se come el hueco del marcador de lista: sin esto
   los bullets sobresalen del suelo por la izquierda. */
.cde-prose .qf-frontera ~ ul,
.cde-prose .qf-frontera ~ ol{ padding-inline-start:calc(var(--space-l) + 1.3em); }
.cde-prose .qf-frontera ~ *:last-child{ padding-block-end:var(--space-2xl); }
/* El octágono va inline (no flex): el párrafo lleva <strong> dentro y un
   contenedor flex lo partiría en dos ítems y en dos renglones. */
.qf-frontera-texto{
  font-size:var(--text-m); font-weight:700; color:var(--ink);   /* era 600 y --ink-2 */
  line-height:1.35;
}
.qf-frontera-texto::before{
  content:''; display:inline-block; inline-size:22px; block-size:22px;
  vertical-align:-4px; margin-inline-end:10px;
  background:var(--stop);
  -webkit-mask:var(--qf-ico-stop) center/contain no-repeat;
          mask:var(--qf-ico-stop) center/contain no-repeat;
}
/* «No vuelve» también quiere decir que el cierre de la ficha sigue al otro
   lado. Si el navegador no soporta :has(), el suelo acaba en la prosa y el
   resto se degrada sin romper nada. */
.qf-ficha:has(.qf-frontera) .qf-ficha__cierre{
  background:var(--surface-2);
  margin-inline:calc(-1 * var(--space-l));
  padding:0 var(--space-l) var(--space-2xl);
  margin-block-start:0;
}
@media (max-width:478px){
  .cde-prose hr.qf-frontera{ margin-inline:calc(-1 * var(--space-m)); }
  .cde-prose .qf-frontera ~ *{
    margin-inline:calc(-1 * var(--space-m));
    padding-inline:var(--space-m);
    max-inline-size:none;
  }
  .cde-prose .qf-frontera ~ ul,
  .cde-prose .qf-frontera ~ ol{ padding-inline-start:calc(var(--space-m) + 1.3em); }
  .qf-ficha:has(.qf-frontera) .qf-ficha__cierre{
    margin-inline:calc(-1 * var(--space-m));
    padding-inline:var(--space-m);
  }
}

/* --- 8.5 Página de emergencia: la única señal del sitio --------------- */
/* Estaba servida como prosa normal (sin cabecera ni pie, eso sí). El diseño
   la quiere como SEÑAL: fondo rojo pleno, pasos en tarjetas blancas con el
   número en mono, cuerpo a 22 px en móvil y 30 px en escritorio. El gancho
   es la clase que ya trae la página, <ol class="qf-emergencia">, no el id de
   la entrada: así el clon a otro idioma lo hereda solo.
   Sigue siendo el único rojo pleno junto a la franja de la ficha y la
   franja de gas de los hubs de gas: la bala no se gasta en ningún otro sitio. */
/* El rojo pleno se pinta en el <body>, NO con un padding porcentual en el
   artículo: `padding-inline:max(16px, calc(50% - 450px))` medía 1100 px de
   ancho a 375 px de viewport y metía scroll horizontal. Motivo: Bricks pone
   el <body> en `display:flex`, el artículo es un flex item y un porcentaje
   de padding ahí se resuelve contra el tamaño intrínseco → el artículo se
   ajustaba al ancho máximo del H1. Pintando el fondo en el body el rojo
   sangra de borde a borde sin tocar la caja del artículo. */
body:has(.qf-emergencia){ background:var(--stop); }
#brx-content.wordpress:has(> .qf-emergencia){
  background:var(--stop); color:var(--on-stop);
  inline-size:100%;                        /* explícito: el artículo es flex item
                                              (`flex:1 1 0%`) y sin esto se queda
                                              en shrink-to-fit y se sale de 375 */
  max-inline-size:948px;                   /* 900 de medida + 2×24 de aire */
  padding-block:var(--space-l) var(--space-3xl);
}
#brx-content.wordpress:has(> .qf-emergencia) h1{
  font-size:1.875rem; line-height:1.05; letter-spacing:-.03em;
  max-inline-size:none; margin:0 0 var(--space-s);
}
#brx-content.wordpress:has(> .qf-emergencia) h1::before{
  content:''; display:inline-block; inline-size:30px; block-size:30px;
  vertical-align:-3px; margin-inline-end:10px;
  background:currentColor;
  -webkit-mask:var(--qf-ico-warn) center/contain no-repeat;
          mask:var(--qf-ico-warn) center/contain no-repeat;
}
#brx-content.wordpress:has(> .qf-emergencia) .qf-lede{
  font-size:1.375rem; line-height:1.3; max-inline-size:38ch;
  margin:0 0 var(--space-m);
}
#brx-content.wordpress:has(> .qf-emergencia) h2{
  font-size:1.375rem; margin:var(--space-l) 0 var(--space-xs);
  max-inline-size:34ch;
}
#brx-content.wordpress:has(> .qf-emergencia) > p,
#brx-content.wordpress:has(> .qf-emergencia) > ul{
  font-size:var(--text-l); line-height:1.45; max-inline-size:40ch;
}
#brx-content.wordpress:has(> .qf-emergencia) a{
  color:var(--on-stop); text-decoration:underline; text-underline-offset:3px;
}
/* Los cinco pasos. El número se dibuja con un contador: el HTML es un <ol>
   normal y no hace falta tocarlo. */
ol.qf-emergencia{
  list-style:none; counter-reset:qfpaso;
  margin:0 0 var(--space-l); padding:0;
  display:flex; flex-direction:column; gap:10px;
  max-inline-size:none;
}
/* El número va posicionado, NO como flex item: dentro del <li> conviven un
   <strong> y un nodo de texto suelto, y con `display:flex` en el <li> el
   navegador los convierte en DOS ítems y los pone en dos columnas de 8
   caracteres. Medido en el navegador antes de dejarlo. */
ol.qf-emergencia > li{
  counter-increment:qfpaso;
  position:relative;
  background:var(--surface); color:var(--ink);
  border-radius:var(--radius-m); padding:14px 14px 14px 70px;
  font-size:1.0625rem; line-height:1.4;
  max-inline-size:none;
}
ol.qf-emergencia > li::before{
  content:counter(qfpaso);
  position:absolute; inset-inline-start:14px; inset-block-start:14px;
  inline-size:44px; block-size:44px;
  display:flex; align-items:center; justify-content:center;
  background:var(--stop); color:var(--on-stop);
  font-family:var(--mono); font-size:1.5rem; font-weight:600;
  border-radius:var(--radius-s);
}
/* Sólo el PRIMER <strong> es el titular del paso. El paso 4 lleva un segundo
   <strong>112</strong> dentro de la frase: con `strong{display:block}` a secas
   salía el 112 en un bloque de 30 px y un punto huérfano debajo. */
ol.qf-emergencia > li > strong:first-child{
  display:block; font-size:1.375rem; font-weight:700; line-height:1.2;
  margin-block-end:4px;
}
ol.qf-emergencia > li > strong{ font-family:var(--mono); font-weight:600; }
ol.qf-emergencia > li > strong:first-child{ font-family:var(--font); }
@media (min-width:768px){
  #brx-content.wordpress:has(> .qf-emergencia){ padding-block:var(--space-xl) var(--space-3xl); }
  #brx-content.wordpress:has(> .qf-emergencia) h1{ font-size:3rem; letter-spacing:-.035em; }
  #brx-content.wordpress:has(> .qf-emergencia) h1::before{ inline-size:46px; block-size:46px; vertical-align:-6px; }
  #brx-content.wordpress:has(> .qf-emergencia) .qf-lede{ font-size:1.75rem; }
  #brx-content.wordpress:has(> .qf-emergencia) h2{ font-size:1.75rem; }
  ol.qf-emergencia > li{ padding:18px 22px 18px 96px; font-size:1.25rem; }
  ol.qf-emergencia > li::before{ inline-size:56px; block-size:56px; font-size:2rem;
    inset-inline-start:22px; inset-block-start:18px; }
  ol.qf-emergencia > li > strong:first-child{ font-size:1.875rem; }
}

/* --- 8.6 La 404 --------------------------------------------------------- */
/* Trampa 25 otra vez, por otra puerta: la 404 de Bricks se sirve en
   <main id="brx-content" class="bricks-404-wrapper brxe-container">, que NO
   lleva la clase `wordpress` y por eso el arreglo de §7.6 no la cubría.
   Medido a 375 px: el H1 empezaba en x=0, pegado al borde.
   Y su campo de búsqueda es el de Bricks: borde de 1 px en #DDDEDF —que no
   es ni un token del sistema— con 1,35:1 sobre blanco, o sea 1.4.11 incumplido,
   y 42 px de alto. Se viste con el sistema. */
#brx-content.bricks-404-wrapper{
  display:block;
  inline-size:100%; max-inline-size:1240px; margin-inline:auto;
  padding-inline:var(--space-l);
  padding-block:var(--space-2xl) var(--space-3xl);
  box-sizing:border-box; text-align:start;
}
#brx-content.bricks-404-wrapper h1{ max-inline-size:22ch; margin:0 0 var(--space-m); }
.bricks-search-form{ inline-size:100%; max-inline-size:var(--measure); }
.bricks-search-form input[type='search']{
  inline-size:100%; box-sizing:border-box;
  min-block-size:44px; padding:10px var(--space-s);
  font-family:var(--font); font-size:1rem;   /* ≥16 px o iOS hace zoom al enfocar */
  color:var(--ink); background:var(--surface);
  border:2px solid var(--line-2);            /* --line y #DDDEDF NO valen (1,3:1) */
  border-radius:var(--radius-s);
  text-align:start;                          /* Bricks lo centra: aquí nada se centra */
  -webkit-appearance:none; appearance:none;
}
.bricks-search-form input[type='search']:focus-visible{
  outline:3px solid var(--focus); outline-offset:2px; border-color:var(--focus);
}
@media (max-width:478px){ #brx-content.bricks-404-wrapper{ padding-inline:var(--space-m); } }

/* --- 8.7 Radios fuera del sistema ------------------------------------- */
/* «Dos radios y nada más»: --radius-s 4px para controles, --radius-m 8px
   para tarjetas. Había 10 px y 12 px sueltos. */
.qf-calculadora,
.qf-calc-veredicto,
.qf-emergencia-franja,
.qf-semaforo{ border-radius:var(--radius-m); }

/* --- 8.8 Piezas del contenido que se servían SIN una sola regla -------- */
/* Estas clases existen en el HTML publicado y no tenían CSS: se veían con
   el estilo por defecto del navegador. */

/* Rejilla de aparatos de la home: era una lista con viñetas. El mockup
   pide tarjetas. OJO: la estructura aprobada es 3 activas + 1 agregada,
   y hoy son 9 planas — eso es contenido y está anotado en la auditoría. */
.qf-rejilla-aparatos{
  list-style:none; margin:var(--space-m) 0 var(--space-xl); padding:0;
  display:grid; grid-template-columns:1fr 1fr; gap:var(--space-xs);
}
.qf-rejilla-aparatos > li{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-m); padding:var(--space-s) var(--space-m);
  font-size:var(--text-xs); color:var(--ink-2); line-height:1.4;
}
.qf-rejilla-aparatos > li > a{
  display:flex; align-items:center; min-block-size:44px;
  font-size:var(--text-m); font-weight:700; color:var(--ink);
  text-decoration:none;
}
.qf-rejilla-aparatos > li > a:hover{ color:var(--brand); text-decoration:underline; }
@media (max-width:478px){ .qf-rejilla-aparatos{ grid-template-columns:1fr; } }

/* Sello «sin revisor · estado del día uno» (§08 del sistema): tarjeta con
   el círculo de comprobado, no un <small> suelto. */
.qf-verificado{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-m); padding:var(--space-m) var(--space-l);
  margin-block-start:var(--space-l);
  max-inline-size:var(--measure);
}
.qf-verificado small{ font-size:var(--text-s); color:var(--ink-2); line-height:1.5; }
.qf-verificado strong{ color:var(--ink); }
.qf-verificado::before{
  content:''; display:inline-block; inline-size:26px; block-size:26px;
  vertical-align:-6px; margin-inline-end:var(--space-s);
  background:var(--ink-muted);
  -webkit-mask:var(--qf-ico-ok) center/contain no-repeat;
          mask:var(--qf-ico-ok) center/contain no-repeat;
}

/* «Otras averías del mismo aparato»: el elemento related-posts de Bricks
   escupe h3 sueltos. Se visten como las filas del hub, que es lo que son. */
.qf-relacionadas .related-posts-title{
  font-size:var(--text-xl); margin:0 0 var(--space-xs);
}
.qf-relacionadas ul.related-posts{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:1fr 1fr; gap:var(--space-xs);
}
.qf-relacionadas ul.related-posts > li{ margin:0; }
.qf-relacionadas .post-content{ block-size:100%; }
.qf-relacionadas h3{
  margin:0; font-size:var(--text-m); font-weight:600; block-size:100%;
}
.qf-relacionadas h3 > a{
  display:flex; align-items:center; gap:10px; min-block-size:52px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-m); padding:10px 12px;
  color:var(--ink); text-decoration:none; line-height:1.25;
}
.qf-relacionadas h3 > a::after{
  content:'→'; margin-inline-start:auto; color:var(--ink-muted); font-weight:400;
}
.qf-relacionadas h3 > a:hover{ border-color:var(--brand); color:var(--brand); }
@media (max-width:767px){ .qf-relacionadas ul.related-posts{ grid-template-columns:1fr; } }

/* El H2 que el contenido escribe dentro de la descripción del hub llevaba
   una clase con guion simple y se quedaba en --ink-2 heredado del intro. */
.qf-hub-h2, .qf-hub__intro h2{
  font-size:var(--text-l); color:var(--ink); margin:var(--space-m) 0 var(--space-2xs);
}

/* Bloque de datos identificativos de las legales: sitio reservado a la
   imagen con los datos fiscales (el correo nunca va en texto). */
.qf-identidad{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-m); padding:var(--space-m) var(--space-l);
  margin-block:var(--space-m);
  max-inline-size:var(--measure);
}
.qf-identidad img{ max-inline-size:100%; block-size:auto; }

/* --- 8.9 Migas a los 32 px del sistema -------------------------------- */
/* «Migas de pan · 4 niveles, una línea, 32 px de alto». Servía 29. */
.qf-migas{ display:flex; flex-wrap:wrap; align-items:center; min-block-size:32px; }

/* --- 8.10 Casilla de consentimiento del formulario de contacto --------- */
/* Medida a 375 px: 13×13 px. El objetivo real es la etiqueta entera (la
   casilla va dentro de un <label>), pero 13 px de caja en una pantalla de
   móvil es un objetivo que se falla con el dedo. 24 px es el mínimo de la
   2.5.8 y no descuadra la fila. */
.qf-contacto .qf-consent input[type='checkbox']{
  inline-size:24px; block-size:24px; flex:none; margin:0; accent-color:var(--brand);
}

/* --- 8.11 Franjas de gas: el triángulo y el galón que pide el mockup --- */
/* La variante 1a dibuja la franja con un triángulo de 26 px a la izquierda,
   el título a 1,25 rem, el subtítulo a .9375 rem con opacidad .92 y un galón
   de 22 px a la derecha que dice «esto se abre». Servía la franja sin ningún
   icono. Igual en la franja de gas de los hubs. */
:root{
  --qf-ico-galon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9.5 12 15.5 18 9.5'/%3E%3C/svg%3E");
}
.qf-emergencia-franja{
  display:flex; align-items:center; gap:12px;
  padding:0 var(--space-m);
}
.qf-emergencia-franja > p{ flex:1 1 auto; margin:0; min-inline-size:0; }
.qf-emergencia-franja strong{
  display:block; font-size:1.25rem; font-weight:700;
  letter-spacing:-.01em; line-height:1.15;
}
.qf-emergencia-franja a{ font-size:.9375rem; font-weight:400; opacity:.92; }
.qf-emergencia-franja::before,
.qf-sos-hub::before{
  content:''; flex:none; inline-size:26px; block-size:26px;
  background:currentColor;
  -webkit-mask:var(--qf-ico-warn) center/contain no-repeat;
          mask:var(--qf-ico-warn) center/contain no-repeat;
}
.qf-emergencia-franja::after,
.qf-sos-hub::after{
  content:''; flex:none; inline-size:22px; block-size:22px;
  margin-inline-start:auto;
  background:currentColor;
  -webkit-mask:var(--qf-ico-galon) center/contain no-repeat;
          mask:var(--qf-ico-galon) center/contain no-repeat;
}
.qf-sos-hub > span{ flex:1 1 auto; min-inline-size:0; }

/* --- 8.12 Dos flecos vistos en el navegador tras aplicar 8.4 y 8.8 ------ */

/* El sello de verificación es el último hermano de la prosa, así que hereda
   el sangrado del «cambio de suelo» y su tarjeta salía con el borde cortado
   en los dos bordes de la pantalla. Al otro lado de la frontera deja de ser
   tarjeta y pasa a ser un filete: el suelo sigue siendo continuo, que es lo
   que la variante 3b no puede perder. */
.cde-prose .qf-frontera ~ .qf-verificado{
  background:transparent; border:0; border-radius:0;
  border-block-start:1px solid var(--line-2);
  padding-block:var(--space-m) var(--space-2xl);
  margin-block:0; max-inline-size:none;
}

/* «Otras averías»: el elemento related-posts de Bricks trae su propia regla
   de columnas con el ID del elemento (#brxe-xxxxx), y desde una hoja de
   estilos no hay especificidad que la gane. A 375 px dos columnas dejaban
   títulos de cinco renglones. Es el único !important del fichero y está aquí
   por eso: si algún día se cambia el ajuste del elemento a 1 columna en
   móvil, esta línea se puede borrar. */
@media (max-width:767px){
  .qf-relacionadas ul.related-posts{ grid-template-columns:1fr !important; }
}

/* El div del cierre lo pinta Bricks con `width:100%`, así que los márgenes
   negativos de 8.4 lo desplazaban 16 px a la izquierda en vez de ensancharlo
   y quedaba una franja de 32 px sin suelo a la derecha (medido: derecha en
   x=343 de 375). Con inline-size:auto el margen negativo sí ensancha. */
/* El culpable medido no era `width` sino el `max-width:100%` que Bricks pone
   con el ID del elemento (#brxe-xxxxx): recortaba la caja a 343 px y el
   margen negativo sólo la desplazaba. Desde una hoja de estilos no hay
   especificidad que gane a un ID, de ahí el !important (el segundo y último
   del fichero, por el mismo motivo que el de 8.12). */
.qf-ficha:has(.qf-frontera) .qf-ficha__cierre{
  max-inline-size:none !important;
  inline-size:calc(100% + 2 * var(--space-l)) !important;
}
@media (max-width:478px){
  .qf-ficha:has(.qf-frontera) .qf-ficha__cierre{
    inline-size:calc(100% + 2 * var(--space-m)) !important;
  }
}

/* =========================================================
   9 · CIERRE DE LA AUDITORÍA — 2026-07-26
   Añadido al final. NO reescribe §5, §6, §7 ni §8: son de otros
   agentes y se han comprobado byte a byte antes de escribir.
   Cierra los cinco puntos que la auditoría dejó abiertos porque
   no se podían resolver desde el CSS solo:
     9.1 barra «Aparatos ▾» en escritorio (el menú ya es de 2 niveles)
     9.2 conmutador Claro / Oscuro / Sistema del pie
     9.3 la 404, que ahora es una plantilla de Bricks propia
     9.4 hub: chip «En preparación» y CTA del árbol
     9.5 rejilla de la home: 3 tarjetas activas + 1 agregada
   Detalle y verificación: auditoria-maquetacion-2026-07-26.md
   ========================================================= */

/* --- 9.1 Cabecera de escritorio: la barra con «Aparatos» --------------- */
/* Antes había hamburguesa TAMBIÉN en escritorio: el menú «Principal» tenía
   8 entradas planas (~700 px) y con el campo a 340 y el CTA a 182 no cabía
   en 1240 — el campo se quedaba en 109 px, y el campo es la pieza central
   del sitio. Arreglado en el menú, no en el CSS: los 9 aparatos cuelgan de
   un padre «Aparatos» y el primer nivel baja de 8 entradas a 5.
   Todo el CSS de nav-menu de Bricks va en :where(), o sea con especificidad
   CERO: cualquier regla de aquí gana sin trucos. */
.qf-hd__nav .bricks-nav-menu{
  display:flex; align-items:center; gap:2px;
  margin:0; padding:0; list-style:none;
}
.qf-hd__nav .bricks-nav-menu > li{ margin:0; }          /* Bricks pone 30 px sueltos */
.qf-hd__nav .bricks-nav-menu > li > a,
.qf-hd__nav .bricks-nav-menu > li > .brx-submenu-toggle > a{
  display:flex; align-items:center;
  min-block-size:44px;                                   /* objetivo táctil */
  padding-inline:6px;
  font-size:var(--text-xs); font-weight:600; line-height:1.2;
  color:var(--ink); text-decoration:none; white-space:nowrap;
}
.qf-hd__nav .bricks-nav-menu > li > a:hover,
.qf-hd__nav .bricks-nav-menu > li > .brx-submenu-toggle > a:hover,
.qf-hd__nav .bricks-nav-menu > li.current-menu-item > a,
.qf-hd__nav .bricks-nav-menu > li.current-menu-ancestor > .brx-submenu-toggle > a{
  color:var(--brand);
}
.qf-hd__nav .brx-submenu-toggle{ display:flex; align-items:center; }
.qf-hd__nav .brx-submenu-toggle > button{
  display:flex; align-items:center; justify-content:center;
  inline-size:44px; block-size:44px; padding:0;           /* 44 también aquí */
  background:none; border:0; color:var(--ink-2); cursor:pointer;
}
.qf-hd__nav .brx-submenu-toggle > button svg{ inline-size:14px; block-size:14px; }
.qf-hd__nav .brx-submenu-toggle > button[aria-expanded='true']{ color:var(--brand); }

/* El desplegable. Bricks lo abre con .open (opacidad + visibilidad), así que
   aquí sólo se viste: nada de tocar display, o se rompe la apertura. */
.qf-hd__nav .bricks-nav-menu .sub-menu{
  /* el <li> mide 44 y la cabecera 64: sin el desfase el panel arrancaba 10 px
     por encima del borde inferior y lo tapaba. El puente de hover de Bricks
     (li:hover::before, 60 px) cubre el hueco, así que no se cierra al bajar. */
  inset-block-start:calc(100% + 10px); inset-inline-start:0;
  min-inline-size:250px;
  margin:0; padding:var(--space-2xs) 0; list-style:none;
  background:var(--surface); color:var(--ink);
  border:1px solid var(--line-2);                         /* --line (1,39:1) no vale */
  border-radius:var(--radius-m);
  box-shadow:var(--shadow-lg);
  line-height:1.3;
}
.qf-hd__nav .bricks-nav-menu .sub-menu a{
  display:flex; align-items:center; min-block-size:44px;
  padding:0 var(--space-m);
  font-size:var(--text-xs); font-weight:500;
  color:var(--ink); text-decoration:none;
}
.qf-hd__nav .bricks-nav-menu .sub-menu a:hover,
.qf-hd__nav .bricks-nav-menu .sub-menu .current-menu-item > a{
  background:var(--surface-2); color:var(--brand);
}

/* El campo es la pieza central: se le deja crecer hasta sus 340 px y NUNCA
   baja de 260. Si algún día el menú vuelve a crecer, lo que se estrecha es
   el menú, no el buscador.
   🔴 Va DENTRO de un @media(min-width:768px) a propósito: a ≤767 px el campo
   se pliega a un objetivo de 44×44 con la lupa (§7.1), y una regla suelta
   aquí —más abajo en el fichero— pisaba ese `flex:none` y devolvía un campo
   de 220 px a la cabecera móvil. Medido: 220×44 a 375 px antes de acotarlo. */
@media (min-width:768px){
  .qf-hd__in{ gap:var(--space-s); }   /* 12 en vez de 16: son los 12 px que le
                                         faltaban al campo para sus 340 */
  /* `flex:0 1 340px`, no `1 1`: §7 le pone `margin-inline-start:auto` al menú
     y un margen automático se queda con TODO el espacio libre antes de que el
     flex-grow lo vea — por eso el campo se quedaba en 321 con 48 px de sobra
     en la fila. Con la base a 340 y permiso para encoger hasta 260, mide sus
     340 exactos cuando cabe y cede primero cuando no. */
  .qf-hd__buscar{ flex:0 1 340px; min-inline-size:260px; }
  /* 🔴 El menú NO encoge. Sin esto, `.qf-hd__nav` es un flex item que se
     estrecha por debajo de su contenido y el <ul> se SALE de su caja sin
     recortarse: medido a 1280, el último enlace acababa en x=1078 y el CTA
     empezaba en x=1054 — «Sobre nosotros» pintado DEBAJO del botón. El
     scrollWidth no lo delataba (el desbordamiento no crea scroll aquí), así
     que la prueba que lo caza es comparar el borde derecho del último <li>
     con el izquierdo del CTA. Quien cede es el campo, hasta su suelo de 260. */
  .qf-hd__nav{ flex:0 0 auto; min-inline-size:auto; }
}

/* En el panel móvil el mismo menú es una lista: el submenú va indentado y
   con su propio objetivo de 44 px para el botón que lo abre. */
.qf-hd__nav .bricks-mobile-menu-wrapper .brx-submenu-toggle{
  display:flex; align-items:center; justify-content:space-between;
}
.qf-hd__nav .bricks-mobile-menu-wrapper .brx-submenu-toggle > a{ flex:1 1 auto; }
.qf-hd__nav .bricks-mobile-menu-wrapper .brx-submenu-toggle > button{
  inline-size:48px; block-size:48px; flex:none; padding:0;
  background:none; border:0; color:var(--ink); cursor:pointer;
}
/* 🔴 Trampa nueva, y cuesta media hora si no se sabe: el CSS del tema vive
   dentro de `@layer bricks{…}`, y una declaración `!important` DENTRO de una
   capa gana SIEMPRE a un `!important` sin capa — da igual la especificidad.
   Con `.brxe-nav-menu .bricks-mobile-menu-wrapper .sub-menu{background:none
   !important}` en la capa, ni `#brx-header …` (1,3,0) lo tumba. Medido: el
   borde y el relleno de esta misma regla SÍ se aplicaban; sólo el fondo no.
   Solución sin pelear: teñir los <li>, que Bricks no fuerza. */
/* 🔴 HALLAZGO: el panel del menú móvil se ha estado sirviendo NEGRO con tinta
   negra desde que existe, y el estilo computado decía lo contrario.
   Bricks pinta el fondo del panel en un `::before` con `background-color:#23282d`
   y `z-index:-1`; como el panel es `position:fixed` con `z-index:999`, crea
   contexto de apilamiento y ese ::before pinta ENCIMA del fondo propio del
   panel. Resultado: `getComputedStyle(panel).backgroundColor` devuelve
   rgb(255,255,255) —y la auditoría lo dio por bueno— pero los píxeles son
   #23282d. Se ve en cuanto se hace una captura.
   Lección: un fondo pintado por un pseudoelemento no aparece en el estilo
   computado del elemento. Para fondos, la prueba es la captura. */
#brx-header .qf-hd__nav .bricks-mobile-menu-wrapper::before{
  background-color:var(--surface);
}
#brx-header .qf-hd__nav .bricks-mobile-menu-wrapper{ color:var(--ink); }
#brx-header .qf-hd__nav .bricks-mobile-menu-wrapper .sub-menu{
  border-block-start:1px solid var(--line);
}
#brx-header .qf-hd__nav .bricks-mobile-menu-wrapper .sub-menu > li{
  background:var(--surface-2);
}
.qf-hd__nav .bricks-mobile-menu-wrapper .sub-menu li > a{
  padding-inline:var(--space-l) var(--space-m);
  font-size:var(--text-s);
}

/* --- 9.2 Conmutador Claro / Oscuro / Sistema (pie) --------------------- */
/* El gancho [data-theme] ya funcionaba desde §8.1; faltaba el botón, que el
   mockup pone en la línea base del pie, a la derecha del año.
   Los tres botones miden 44 px de alto: aquí no se paga pliegue, así que no
   hay razón para quedarse en el 24 mínimo de la 2.5.8. */
.qf-ft__base{
  border-block-start:1px solid var(--line);
  margin-block-start:20px; padding-block-start:14px;
  display:flex; align-items:center; gap:var(--space-m); flex-wrap:wrap;
}
.qf-ft__base-txt{
  margin:0; font-size:.8125rem; color:var(--ink-muted); line-height:1.5;
}
.qf-tema{
  margin-inline-start:auto;
  display:flex; gap:2px;
  background:var(--surface);
  border:1px solid var(--line-2);         /* el marco del grupo, ≥3:1 */
  border-radius:var(--radius-s); padding:3px;
}
.qf-tema__btn{
  min-block-size:44px; padding-inline:var(--space-s);
  font:inherit; font-size:.8125rem; font-weight:600; line-height:1;
  color:var(--ink-muted); background:none;
  border:1px solid transparent;           /* reserva el hueco: no salta al pulsar */
  border-radius:var(--radius-s);          /* el mockup dibuja 2 px; el sistema sólo
                                             tiene 4 y 8, y esa regla manda (§8.7) */
  cursor:pointer;
}
.qf-tema__btn:hover{ color:var(--ink); }
/* El estado elegido NO se marca con un borde: --line-2 sobre --surface-3 da
   2,68:1 y se quedaría por debajo del 3:1 de la 1.4.11. Lo marcan tres cosas
   que sí llegan: el relleno, la tinta (--ink 15:1 frente a --ink-muted 5,5:1)
   y el grosor —que es un canal que no depende del color y sobrevive al gris—.
   Más `aria-pressed`, que es lo que oye quien no ve ninguna de las tres. */
.qf-tema__btn[aria-pressed='true']{
  color:var(--ink); background:var(--surface-3); font-weight:700;
}
.qf-tema__btn:focus-visible{ outline:3px solid var(--focus); outline-offset:2px; }
@media (max-width:478px){
  .qf-tema{ margin-inline-start:0; }
  .qf-ft__base{ gap:var(--space-s); }
}

/* --- 9.3 La 404 ------------------------------------------------------- */
/* Antes: la plantilla 404 del tema imprimía el formulario NATIVO de WordPress
   (action="/", name="s", sin botón de enviar) y mandaba a la búsqueda por
   defecto, que no entiende «E18», «e 18» ni «E-18». Ahora la 404 es una
   plantilla de Bricks de tipo `error` que manda a /buscar/ (name=cde_q) y
   ofrece además los nueve hubs de aparato.
   §8.6 sigue en el fichero y sigue siendo correcta: cubre el render por
   defecto de Bricks, que es lo que se sirve si algún día se borra la
   plantilla. Ya no se aplica porque ese marcado ha dejado de existir. */
.qf-404{ padding-block:var(--space-2xl) var(--space-3xl); }
.qf-404 h1{ max-inline-size:22ch; margin:0 0 var(--space-s); }
.qf-404__lede{
  margin:0 0 var(--space-l); font-size:1.0625rem; color:var(--ink-2);
  line-height:1.5; max-inline-size:var(--measure);
}
.qf-404__form{ max-inline-size:var(--measure); margin-block-end:var(--space-xl); }
.qf-404__h2{ margin:0 0 var(--space-s); font-size:var(--text-l); }
.qf-404__hubs{
  list-style:none; margin:0 0 var(--space-xl); padding:0;
  display:grid; grid-template-columns:1fr 1fr; gap:var(--space-xs);
  max-inline-size:840px;
}
.qf-404__salidas{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:2px; max-inline-size:var(--measure);
}
.qf-404__salidas a{
  display:flex; align-items:center; min-block-size:44px;
  color:var(--ink); text-decoration:none; font-size:var(--text-s);
}
.qf-404__salidas a:hover{ color:var(--brand); text-decoration:underline; }
@media (max-width:767px){ .qf-404__hubs{ grid-template-columns:1fr; } }

/* --- 9.4 Hub de aparato: las dos piezas que faltaban ------------------- */
/* El mockup enmarca el hub vacío con el chip «En preparación» sobre la caja
   de puntos, y cierra el hub con contenido con el CTA del árbol.
   Aquí NO se duplica nada del texto: la descripción de categoría de los cinco
   hubs vacíos ya abre con los dos párrafos exactos de esa caja (comprobado en
   los cinco), así que el chip y esos dos párrafos se cosen en una sola caja.
   `:has()` es Baseline 2023; si un navegador viejo no lo soporta, el chip sale
   como una etiqueta suelta y el texto como prosa: se degrada, no se rompe. */
.qf-hub:has(> .qf-prep__chip){ --qf-prep-max:44rem; }
.qf-hub:has(> .qf-prep__chip) .qf-hub__intro{ max-inline-size:var(--qf-prep-max); }
.qf-hub > .qf-prep__chip{
  display:block; margin:0;
  border:1px dashed var(--line-2); border-block-end:0;
  border-start-start-radius:var(--radius-m); border-start-end-radius:var(--radius-m);
  background:var(--surface-2);
  padding:14px 14px 0;
  font-size:.75rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.08em; color:var(--ink-2);
  max-inline-size:var(--qf-prep-max);   /* NO --measure: son 65ch y ch depende
                                           del tamaño de letra → 534 px aquí y
                                           696 en la intro. Medido. */
}
.qf-hub:has(> .qf-prep__chip) .qf-hub__intro > p:nth-child(1),
.qf-hub:has(> .qf-prep__chip) .qf-hub__intro > p:nth-child(2){
  border-inline:1px dashed var(--line-2);
  background:var(--surface-2);
  margin:0; padding:8px 14px 0;
}
.qf-hub:has(> .qf-prep__chip) .qf-hub__intro > p:nth-child(1){
  font-weight:600; color:var(--ink);
}
.qf-hub:has(> .qf-prep__chip) .qf-hub__intro > p:nth-child(2){
  border-block-end:1px dashed var(--line-2);
  border-end-start-radius:var(--radius-m); border-end-end-radius:var(--radius-m);
  padding-block-end:14px; margin-block-end:var(--space-l);
  font-size:.9375rem;
}
/* El CTA del árbol reutiliza .qf-cta-calc (§7.4) y sólo se separa del listado. */
.qf-cta-arbol{ margin-block-start:var(--space-l); }

/* --- 9.5 Rejilla de aparatos de la home: 3 activas + 1 agregada -------- */
/* Decisión aprobada (revision-diseno §Tres cambios, nº 2): seis tarjetas
   muertas sobre el pliegue dan mala primera impresión en una web donde el
   lector tiene que fiarse. No se pierde ni la señal de directorio ni el enlace
   interno: los nueve aparatos siguen enlazados desde el pie.
   La estructura la emite angi-cde-home.php; §8.8 sigue valiendo para el
   contenedor (rejilla de 2 columnas) y aquí se visten las tarjetas. */
.qf-rejilla--tarjetas{ gap:10px; }
.qf-rejilla--tarjetas > li{
  background:none; border:0; border-radius:0; padding:0; font-size:inherit;
}
/* §8.8 vistió la lista VIEJA con `.qf-rejilla-aparatos > li > a`, que es (0,2,1)
   y gana a `.qf-ap` (0,1,0): su `align-items:center` centraba el icono y los dos
   textos de las tres tarjetas que son enlaces, y dejaba la agregada —que es un
   <div>— alineada a la izquierda. Se veía en la captura, no en las medidas.
   Aquí se neutraliza sólo para la variante de tarjetas, sin tocar §8.8. */
.qf-rejilla--tarjetas > li > a.qf-ap{
  align-items:stretch; min-block-size:108px;
  font-size:inherit; font-weight:400;
}
.qf-ap{
  display:flex; flex-direction:column; gap:7px;
  block-size:100%; min-block-size:108px;
  box-sizing:border-box; padding:12px;
  background:var(--surface);
  border:1px solid var(--line-2);
  border-radius:var(--radius-m);
  color:inherit; text-decoration:none;
}
a.qf-ap:hover{ border-color:var(--brand); }
a.qf-ap:hover .qf-ap__nom{ color:var(--brand); }
.qf-ap__ico{ color:var(--brand); display:block; }
.qf-ap__nom{
  font-size:1rem; font-weight:700; line-height:1.15; color:var(--ink);
}
.qf-ap__nota{
  margin-block-start:auto; font-size:.75rem; line-height:1.35; color:var(--ink-muted);
}
/* La agregada: fondo de página, borde discontinuo y tinta atenuada. No es un
   enlace a propósito — no hay página de «los otros cinco» y mandar a un sitio
   que no responde la pregunta es peor que no mandar. */
.qf-ap--mas{
  background:var(--bg); border-style:dashed;
}
.qf-ap--mas .qf-ap__ico{ color:var(--ink-muted); }
.qf-ap--mas .qf-ap__nom{ color:var(--ink-2); }

/* --- 9.6 Migas: decisión tomada, no deuda ------------------------------ */
/* Se quedan en 29 px de alto de enlace. Son navegación SECUNDARIA, no un
   control primario: la WCAG 2.5.8 (AA) pide 24×24 y 29 los cumple con margen;
   los 44 son 2.5.5, que es AAA y no obligatorio. Subirlas cuesta 15 px del
   pliegue en las páginas que dan dinero, y ahí se juega la prueba de los 3
   segundos. Queda escrito para que nadie lo vuelva a abrir como incidencia. */

/* =========================================================
   10 · EL BUSCADOR EN REPOSO, EN LA HOME
   Añadido 2026-07-26 tras medir en navegador a 375x812.

   Problema: el buscador imprime las 19 fichas para que el rastreador
   las vea, y en la HOME salían las 19 VISIBLES sin haber escrito nada.
   Medido: la rejilla de aparatos caía en y=3.871 px, o sea a 4,8
   pantallas. La home aprobada (variante 4a) pone las dos puertas
   —campo y rejilla— arriba: con esto, la segunda puerta no existía.

   Solución: SOLO en la home, la lista nace plegada. El marcado sigue
   entero en el HTML (el rastreador lo ve igual), y en cuanto se teclea
   algo el JS marca el contenedor y la lista aparece. Sin JavaScript no
   se pierde nada: el campo es un formulario que va a /buscar/, donde la
   lista sí se sirve desplegada.

   No se toca /buscar/: allí la lista visible ES la página.
   ========================================================= */
body.home #qf-buscador:not([data-buscando]) #qf-bus-lista,
body.home #qf-buscador:not([data-buscando]) .qf-bus-resumen{
  display:none;
}
body.home #qf-buscador::after{
  content:"Escribe el código que sale en la pantalla (E18, F28…) o lo que hace tu aparato.";
  display:block; margin-top:var(--space-xs,8px);
  color:var(--ink-muted); font-size:.9375rem;
}
body.home #qf-buscador[data-buscando]::after{ content:none; }

/* ============================================================================
   §11 — ÁRBOL DE DIAGNÓSTICO (2026-07-28)
   El marcado llega entero desde el servidor; el JS solo enseña un paso cada vez.
   Por eso los estilos no dan por hecho que haya JavaScript: sin él esto tiene que
   seguir leyéndose como una lista de preguntas y respuestas.
   ============================================================================ */
.qf-arbol{ margin-block: var(--space-l); }
.qf-arbol__intro{ color:var(--ink-2); }
.qf-arbol__nojs{ font-size:var(--text-s); color:var(--ink-2); }

.qf-arbol__paso, .qf-arbol__resultado{
  border:1px solid var(--line); border-radius:var(--radius-m);
  padding:var(--space-l); margin-block-start:var(--space-m);
  background:var(--surface); max-inline-size:var(--measure);
}
.qf-arbol__pregunta{ margin:0 0 var(--space-xs); font-size:var(--text-xl); }
.qf-arbol__pregunta:focus{ outline:none; }
.qf-arbol__ayuda{ margin:0 0 var(--space-m); color:var(--ink-2); font-size:var(--text-s); }

.qf-arbol__opciones{ list-style:none; margin:0; padding:0; display:grid; gap:var(--space-xs); }
.qf-arbol__opcion{
  display:block; padding:var(--space-m);
  /* --line (1,39:1) NO vale como borde de control: es 1.4.11. Los botones del árbol
     SON el control de esta página, así que van con --line-2 (3,70:1). Medido en vivo el
     28-07: con --line el borde daba 1,47:1 y la opción no se percibía como pulsable.
     Es el mismo fallo que la auditoría del 26-07 encontró en el campo de la 404. */
  border:2px solid var(--line-2);
  border-radius:var(--radius-s); text-decoration:none; color:var(--ink);
  background:var(--bg); font-weight:600;
  /* 44 px de objetivo táctil: es una web que se usa de noche y con una mano. */
  min-block-size:44px;
}
.qf-arbol__opcion:hover, .qf-arbol__opcion:focus-visible{
  border-color:var(--brand); color:var(--brand);
}

.qf-arbol__causa{ margin:var(--space-m) 0 var(--space-xs); font-size:var(--text-xl); }
.qf-arbol__ojo{ font-size:var(--text-s); }
.qf-arbol__acciones{ margin-block-start:var(--space-m); font-weight:600; }
.qf-arbol__reinicio, .qf-arbol__atras{ margin-block-start:var(--space-s); font-size:var(--text-s); }
.qf-arbol__atras button{
  background:none; border:none; padding:0; color:var(--brand);
  font:inherit; font-size:var(--text-s); text-decoration:underline; cursor:pointer;
  min-block-size:44px;
}

/* Con JS, los pasos ocultos no ocupan; sin JS, `hidden` no se aplica nunca. */
.qf-arbol--js .qf-arbol__paso[hidden],
.qf-arbol--js .qf-arbol__resultado[hidden]{ display:none; }