/* ════════════════════════════════════════════════
   DURÁN — «Audita tu web» (solo auditoria-web.html)
   Usa las variables de style.css. Esquinas de 2 px;
   los únicos círculos son los indicadores de nota.
   Bien / aviso / mal: verde, ámbar y el rojo de la marca,
   siempre con su icono o su cifra además del color.
   ════════════════════════════════════════════════ */

:root {
  --au-bien: #1f8a4c;
  --au-aviso: #c77700;
  --au-mal: #e01621;
  --au-info: #6b6b6b;
  --au-gris: #f5f5f5;
  --au-gris-2: #e9e9e9;
  --au-fondo: #f7f7f7;
  /* círculos de nota: rojo < 50, ámbar 50-79, verde ≥ 80 */
  --au-c-verde: #1f8a4c;
  --au-c-ambar: #e0a800;
  --au-c-rojo: #e01621;
}

[hidden] { display: none !important; }

.au-sr {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* foco siempre visible con teclado (el color cambia a blanco en los bloques negros: ver --foco en style.css) */
a:focus-visible, button:focus-visible, summary:focus-visible,
input[type="checkbox"]:focus-visible {
  outline: 3px solid var(--foco, var(--rojo));
  outline-offset: 3px;
}
/* casilla marcada como error (contorno rojo de 2 px): al recibir el foco, contorno negro para que se note el cambio */
.au-correo-check input[aria-invalid="true"]:focus-visible,
.au-lead .form-check input[aria-invalid="true"]:focus-visible {
  outline: 3px solid var(--negro); outline-offset: 3px;
}

/* El ajuste del menú con el enlace nuevo («Audita tu web») va en css/style.css,
   para que valga igual en todas las páginas. */

/* ── CABECERA CON EL FORMULARIO ── */
.au-hero { padding: 10rem 5% 5rem; }
.au-hero .breadcrumb { margin-bottom: 1.6rem; }
.au-hero .section-label { margin-bottom: 1rem; }
.au-hero .page-title { margin-bottom: 1.3rem; }
.au-hero .page-desc { max-width: 650px; }

.au-form { margin-top: 2.2rem; max-width: 760px; }
.au-campo {
  display: flex; align-items: stretch;
  background: var(--blanco);
  border: 2px solid var(--negro); border-radius: var(--radius);
  box-shadow: 0 18px 40px rgba(13, 13, 13, 0.08);
  transition: border-color 0.2s, box-shadow 0.2s;
}
/* foco en el campo: el aspecto de siempre (borde rojo + halo rojo suave). El contorno transparente no se ve,
   pero aparece en el modo de alto contraste de Windows, donde las sombras desaparecen (2.4.7) */
.au-campo:focus-within {
  border-color: var(--rojo);
  outline: 2px solid transparent; outline-offset: 0;
  box-shadow: 0 0 0 4px rgba(224, 22, 33, 0.14), 0 18px 40px rgba(13, 13, 13, 0.08);
}
.au-input {
  flex: 1; min-width: 0;
  border: 0; outline: none; background: transparent;
  font-family: var(--font); font-size: 1.15rem; font-weight: 500;
  color: var(--negro);
  padding: 1.15rem 1.3rem;
}
.au-input::placeholder { color: rgba(13, 13, 13, 0.6); }
.au-boton {
  flex-shrink: 0; justify-content: center;
  border: 0; border-radius: 0;
  padding: 0 1.9rem; font-size: 1rem; white-space: nowrap;
}
.au-boton:hover { transform: none; }
.au-boton:focus-visible { outline: 3px solid var(--blanco); outline-offset: -6px; }
.au-boton:disabled { background: var(--negro); border-color: var(--negro); cursor: progress; }

.au-ventajas {
  list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem;
  margin-top: 1rem; font-size: 0.85rem; color: var(--tinta-70);
}
.au-ventajas li::before { content: '✓'; color: var(--rojo); font-weight: 800; margin-right: 0.4rem; }

/* error al auditar: la caja está siempre en la página (role=alert)
   y solo se ve cuando tiene contenido */
.au-error:not(:empty) {
  display: flex; gap: 0.8rem; align-items: flex-start;
  margin-top: 1rem; padding: 1rem 1.2rem;
  background: var(--blanco);
  border: 1px solid var(--rojo); border-left-width: 4px; border-radius: var(--radius);
  font-size: 0.92rem; line-height: 1.55; color: var(--negro);
}
.au-error a { color: var(--rojo); font-weight: 700; white-space: nowrap; }

/* textos junto a un icono: que no se salgan de su caja con palabras o direcciones largas */
.au-error-texto, .au-psi-error > div, .au-texto {
  flex: 1; min-width: 0; overflow-wrap: anywhere;
}

/* estado mientras analiza */
.au-estado {
  margin-top: 1.4rem; max-width: 760px;
  background: var(--blanco);
  border: 1px solid var(--borde); border-left: 4px solid var(--rojo); border-radius: var(--radius);
  padding: 1.2rem 1.4rem 1.3rem;
}
.au-estado-titulo { font-size: 0.95rem; margin-bottom: 0.8rem; overflow-wrap: anywhere; }
.au-estado-titulo strong { font-weight: 800; }
.au-barra {
  height: 4px; background: var(--au-gris-2); border-radius: var(--radius);
  overflow: hidden; margin-bottom: 1rem;
}
.au-barra span {
  display: block; height: 100%; width: 0;
  background: var(--rojo);
  transition: width 1.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.au-pasos {
  list-style: none; display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 0.55rem 1.4rem;
}
.au-pasos li {
  display: flex; align-items: center; gap: 0.6rem;
  font-size: 0.86rem; color: var(--tinta-70);
  transition: color 0.3s;
}
.au-paso-marca {
  position: relative; flex-shrink: 0;
  width: 16px; height: 16px;
  border: 2px solid rgba(13, 13, 13, 0.2); border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.3s, border-color 0.3s;
}
.au-pasos li.is-activo { color: var(--negro); font-weight: 600; }
/* el paso activo late y se para antes de 5 s (2.2.2: aquí no hay botón de pausa y se puede leer mientras tanto).
   js/auditoria.js pasa de un paso al siguiente cada 2,3 s: laten solo los dos primeros, 2 veces cada uno
   (de 0 a 4,3 s); el 3.º y el 4.º (donde se espera hasta 60 s) quedan en rojo, quietos.
   La barra de progreso y el texto del paso siguen indicando que el análisis continúa */
.au-pasos li.is-activo .au-paso-marca { border-color: var(--rojo); background: var(--rojo); }
.au-pasos li:nth-child(-n+2).is-activo .au-paso-marca { animation: auLatido 1s ease-in-out 2; }
.au-pasos li.is-hecho { color: var(--tinta-70); }
.au-pasos li.is-hecho .au-paso-marca { border-color: var(--au-bien); background: var(--au-bien); }
.au-pasos li.is-hecho .au-paso-marca::after {
  content: ''; width: 4px; height: 8px;
  border: solid var(--blanco); border-width: 0 2px 2px 0;
  transform: translateY(-1px) rotate(45deg);
}
@keyframes auLatido {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(0.72); opacity: 0.6; }
}

/* ── QUÉ REVISAMOS (antes de auditar) ── */
.au-revisamos { padding: 5.5rem 5%; }
.au-tarjetas {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem; margin-top: 2.6rem;
}
.au-tarjeta {
  background: var(--blanco);
  border: 1px solid var(--borde); border-radius: var(--radius);
  padding: 1.7rem 1.6rem;
  transition: var(--transition);
}
.au-tarjeta:hover { border-color: var(--negro); }
.au-tarjeta-icono {
  width: 46px; height: 46px; border-radius: var(--radius);
  background: var(--negro);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.2rem;
}
.au-tarjeta-icono svg { width: 24px; height: 24px; }
.au-tarjeta h3 { font-size: 1.05rem; font-weight: 800; letter-spacing: -0.3px; margin-bottom: 0.5rem; }
.au-tarjeta p { font-size: 0.88rem; color: var(--tinta-70); line-height: 1.65; }
/* la séptima (accesibilidad) ocupa la fila entera, con el icono a la izquierda */
.au-tarjeta-ancha {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: 46px 1fr; gap: 0.2rem 1.3rem; align-items: start;
}
.au-tarjeta-ancha .au-tarjeta-icono { grid-row: span 2; margin: 0; }
.au-tarjeta-ancha p { max-width: 820px; }

.au-aviso-datos {
  display: flex; gap: 0.9rem; align-items: center;
  margin-top: 2rem; padding: 1.1rem 1.3rem;
  background: var(--au-gris);
  border-left: 4px solid var(--negro); border-radius: var(--radius);
  font-size: 0.92rem; color: var(--tinta-70); line-height: 1.55;
}
.au-aviso-datos svg { flex-shrink: 0; color: var(--negro); }
.au-aviso-datos a { color: var(--negro); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.au-aviso-datos a:hover { color: var(--rojo); }

/* ── INFORME ── */
.au-informe {
  padding: 3.5rem 5% 5rem;
  background: var(--au-fondo);
  border-top: 1px solid var(--borde);
}
.au-informe .section-inner { max-width: 1000px; }

.au-bloque {
  background: var(--blanco);
  border: 1px solid var(--borde); border-radius: var(--radius);
  padding: 2.4rem;
  margin-top: 1.6rem;
  scroll-margin-top: 96px;
}
.au-bloque .section-label { margin-bottom: 0.8rem; }
.au-h2 {
  font-size: clamp(1.45rem, 2.6vw, 1.85rem);
  font-weight: 800; letter-spacing: -0.6px; line-height: 1.2;
  margin-bottom: 0.7rem;
}
.au-h3 { font-size: 1rem; font-weight: 800; letter-spacing: -0.2px; margin: 1.8rem 0 0.9rem; }
.au-intro {
  font-size: 0.95rem; color: var(--tinta-70); line-height: 1.7;
  max-width: 700px; margin-bottom: 1.6rem;
}
.au-pie { font-size: 0.82rem; color: var(--tinta-70); line-height: 1.6; margin-top: 0.9rem; }
.au-vacio {
  padding: 1.2rem 1.3rem; background: var(--au-gris); border-radius: var(--radius);
  font-size: 0.92rem; color: var(--tinta-70);
}

/* iconos de estado: cuadradito de color con el símbolo en blanco */
.au-icono {
  width: 24px; height: 24px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius);
  background: var(--au-info); color: var(--blanco);
}
.au-icono svg { width: 15px; height: 15px; }
.au-icono.is-bien { background: var(--au-bien); }
.au-icono.is-aviso { background: var(--au-aviso); }
.au-icono.is-mal { background: var(--au-mal); }

/* medidor horizontal */
.au-medidor {
  display: block; height: 6px;
  background: var(--au-gris-2); border-radius: var(--radius);
  overflow: hidden; color: var(--au-info);
}
.au-medidor > span {
  display: block; height: 100%; width: 0;
  background: currentColor;
  transition: width 1.1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.au-medidor.is-bien { color: var(--au-bien); }
.au-medidor.is-aviso { color: var(--au-aviso); }
.au-medidor.is-mal { color: var(--au-mal); }
/* las barras de nota (apartados y Google) llevan el ámbar de los círculos, para que una misma nota
   no salga en dos ámbares; los iconos de estado siguen con el suyo */
.au-seccion-cab .au-medidor.is-aviso, .au-psi .au-medidor.is-aviso { color: var(--au-c-ambar); }

/* listas de apuntes con icono */
.au-notas { list-style: none; display: grid; gap: 0.6rem; margin-top: 1.2rem; }
.au-notas li {
  display: flex; gap: 0.75rem; align-items: flex-start;
  font-size: 0.92rem; line-height: 1.55; color: var(--negro);
}
.au-notas .au-icono { width: 22px; height: 22px; margin-top: 1px; }
.au-notas .au-icono svg { width: 13px; height: 13px; }

/* 1 · cabecera negra con la nota */
.au-cabecera {
  background: var(--negro); color: var(--blanco);
  border-top: 4px solid var(--rojo); border-radius: var(--radius);
  padding: 2.6rem;
}
.au-cabecera-arriba {
  display: grid; grid-template-columns: 200px 1fr;
  gap: 2.6rem; align-items: center;
}

/* círculos de nota (los pinta auditoria.js: el arco y la cifra suben a la vez) */
.au-anillo {
  position: relative; display: block; flex-shrink: 0;
  color: var(--au-info);
}
.au-anillo.is-bien { color: var(--au-c-verde); }
.au-anillo.is-aviso { color: var(--au-c-ambar); }
.au-anillo.is-mal { color: var(--au-c-rojo); }
.au-anillo.is-midiendo { color: rgba(13, 13, 13, 0.55); }
.au-anillo svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg); }
.au-anillo-pista { fill: none; stroke: var(--au-gris-2); }
.au-anillo-arco { fill: none; stroke: currentColor; }
.au-anillo.is-sin .au-anillo-arco { stroke: none; }
.au-anillo-num {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--negro); line-height: 1;
}
.au-anillo-cifra { font-weight: 900; font-variant-numeric: tabular-nums; }
.au-anillo.is-sin .au-anillo-cifra, .au-anillo.is-midiendo .au-anillo-cifra { color: var(--tinta-50); font-weight: 700; }

.au-anillo-grande { width: 200px; height: 200px; }
.au-anillo-grande .au-anillo-num { flex-direction: column; }
.au-anillo-grande .au-anillo-cifra { font-size: 4.2rem; letter-spacing: -2.5px; }
.au-anillo-de { font-size: 1rem; font-weight: 700; margin-top: 0.4rem; color: var(--tinta-50); }

.au-anillo-peq { width: 64px; height: 64px; }
/* cifra y % en la misma línea de base, centrados en el círculo */
.au-anillo-peq .au-anillo-num { display: block; text-align: center; line-height: 64px; white-space: nowrap; }
.au-anillo-peq .au-anillo-cifra { font-size: 1.2rem; letter-spacing: -0.5px; }
.au-anillo-pct { font-size: 0.66rem; font-weight: 800; margin-left: 1px; }

/* midiendo: un cuarto de arco que gira 4 vueltas (4,4 s) y se para en su sitio (2.2.2: menos de 5 s);
   el texto «Midiendo con Google…» sigue indicando que la medición está en marcha */
.au-anillo.is-midiendo svg { animation: auGirar 1.1s linear 4; }
@keyframes auGirar {
  from { transform: rotate(-90deg); }
  to { transform: rotate(270deg); }
}

/* nota principal: círculo grande sobre negro y la frase debajo */
.au-nota { display: flex; flex-direction: column; align-items: center; gap: 0.7rem; }
.au-cabecera .au-anillo-pista { stroke: rgba(255, 255, 255, 0.16); }
.au-cabecera .au-anillo-num { color: var(--blanco); }
.au-cabecera .au-anillo-de { color: rgba(255, 255, 255, 0.6); }
/* «—» o «…» de un apartado sin nota, sobre el negro: blanco al 0,6 = 7,25:1 (el gris de tinta quedaba a 1:1) */
.au-cabecera .au-anillo.is-sin .au-anillo-cifra,
.au-cabecera .au-anillo.is-midiendo .au-anillo-cifra { color: rgba(255, 255, 255, 0.6); }
/* 20 px en negrita (texto grande): los tres colores pasan el contraste mínimo sobre el negro */
.au-nota-frase {
  font-size: 1.25rem; font-weight: 800; letter-spacing: -0.3px; line-height: 1.2;
  text-align: center; color: var(--blanco);
}
.au-nota-frase.is-bien { color: var(--au-c-verde); }
.au-nota-frase.is-aviso { color: var(--au-c-ambar); }
.au-nota-frase.is-mal { color: var(--au-c-rojo); }
.au-eyebrow {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--rojo); margin-bottom: 0.5rem;
}
/* letra pequeña sobre negro: en blanco (el rojo da 4:1); la rayita de la etiqueta sigue roja */
.au-cabecera .au-eyebrow, .au-arreglar .section-label { color: var(--blanco); }
.au-dominio {
  font-size: clamp(1.6rem, 3.6vw, 2.5rem);
  font-weight: 900; letter-spacing: -1px; line-height: 1.1;
  overflow-wrap: anywhere; margin-bottom: 0.8rem;
}
.au-dominio:focus { outline: none; }
.au-veredicto { font-size: 1rem; line-height: 1.6; color: rgba(255, 255, 255, 0.78); max-width: 560px; }
.au-meta {
  font-size: 0.8rem; color: rgba(255, 255, 255, 0.5);
  margin-top: 0.7rem; overflow-wrap: anywhere;
}
.au-meta a { color: rgba(255, 255, 255, 0.82); }
.au-meta a:hover { color: var(--blanco); }
.au-contadores { list-style: none; display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.3rem; }
.au-contadores li {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.45rem 0.8rem 0.45rem 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.16); border-radius: var(--radius);
  font-size: 0.88rem; color: rgba(255, 255, 255, 0.78);
}
.au-contadores strong { color: var(--blanco); font-size: 1.05rem; font-weight: 800; }

/* un círculo por apartado; cada uno lleva a su apartado */
.au-circulos {
  list-style: none;
  display: grid; grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr)); gap: 1rem 0.8rem;
  margin-top: 2.2rem; padding-top: 1.8rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.au-circulos li { min-width: 0; }
.au-circulo {
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  padding: 0.5rem 0.2rem 0.4rem;
  color: var(--blanco); text-decoration: none; text-align: center;
  border-radius: var(--radius);
  transition: background 0.2s;
}
.au-circulo:hover { background: rgba(255, 255, 255, 0.06); }
.au-circulo:hover .au-circulo-nombre { text-decoration: underline; text-underline-offset: 3px; }
/* sin cortar palabras a lo bruto («Accesibilida|d»): si no cabe, con guion */
.au-circulo-nombre {
  font-size: 0.82rem; font-weight: 700; line-height: 1.25;
  max-width: 100%; overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto;
}
.au-circulo-pts {
  margin-top: -0.3rem;
  font-size: 0.72rem; color: rgba(255, 255, 255, 0.6);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

.au-cabecera-acciones { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 2rem; }
/* pista del PDF bajo los botones (y el aviso si la ventana de imprimir no se abre) */
.au-pista-pdf {
  margin-top: 0.7rem;
  font-size: 0.8rem; line-height: 1.5; color: rgba(255, 255, 255, 0.6);
  overflow-wrap: anywhere;
}
.au-pista-pdf.is-aviso { color: var(--blanco); font-weight: 600; }
.au-pista-pdf a { color: var(--blanco); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.au-otra-pie.is-aviso { color: var(--negro); font-weight: 600; }
.au-otra-pie a { color: var(--negro); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.au-otra-pie a:hover { color: var(--rojo); }
.au-cabecera-acciones .btn-primary, .au-cabecera-acciones .btn-secondary { padding: 0.8rem 1.35rem; justify-content: center; }
.au-cabecera .btn-secondary { color: var(--blanco); border-color: rgba(255, 255, 255, 0.4); }
.au-cabecera .btn-secondary:hover { background: var(--blanco); color: var(--negro); border-color: var(--blanco); }
.au-pdf:disabled { opacity: 0.7; cursor: progress; transform: none; }

/* 2 · así te ve Google */
.au-serp {
  max-width: 640px; margin: 0;
  background: var(--blanco);
  border: 1px solid var(--borde); border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(13, 13, 13, 0.06);
  padding: 1.3rem 1.4rem;
  font-family: Arial, Helvetica, sans-serif;
}
.au-serp-sitio { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.55rem; }
.au-serp-fav {
  width: 28px; height: 28px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: #f1f3f4; border: 1px solid #dadce0; border-radius: var(--radius);
  font-size: 0.8rem; font-weight: 700; color: #4d5156;
}
.au-serp-nombres { min-width: 0; }
.au-serp-nombre { display: block; font-size: 14px; line-height: 1.3; color: #202124; overflow-wrap: anywhere; }
.au-serp-url { display: block; font-size: 12px; line-height: 1.35; color: #4d5156; overflow-wrap: anywhere; }
.au-serp-titulo {
  font-size: 20px; line-height: 1.3; color: #1a0dab;
  margin-bottom: 4px; overflow-wrap: anywhere;
}
.au-serp-desc { font-size: 14px; line-height: 1.58; color: #4d5156; overflow-wrap: anywhere; }
.au-serp .is-vacio { color: #5f6368; font-style: italic; }

/* 3 · revisión punto por punto */
.au-secciones { display: grid; gap: 1.2rem; }
.au-seccion {
  border: 1px solid var(--borde); border-radius: var(--radius);
  overflow: hidden; scroll-margin-top: 96px;
}
.au-seccion-cab {
  display: grid; grid-template-columns: 1fr auto; align-items: baseline;
  gap: 0.6rem 1rem;
  padding: 1.25rem 1.5rem 1.2rem;
  background: var(--au-gris); border-bottom: 1px solid var(--borde);
}
.au-seccion-cab h3 { font-size: 1.15rem; font-weight: 800; letter-spacing: -0.3px; line-height: 1.3; }
.au-seccion-pts {
  font-size: 0.85rem; color: var(--tinta-70);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.au-seccion-pts strong { font-size: 1.25rem; font-weight: 900; color: var(--negro); }
.au-seccion-cab .au-medidor { grid-column: 1 / -1; }

.au-checks { list-style: none; }
.au-check {
  display: grid; grid-template-columns: 24px 1fr; gap: 1rem;
  padding: 1.15rem 1.5rem;
  border-bottom: 1px solid var(--borde);
}
.au-check:last-child { border-bottom: 0; }
.au-check.is-mal { box-shadow: inset 4px 0 0 var(--au-mal); }
.au-check.is-aviso { box-shadow: inset 4px 0 0 var(--au-aviso); }
.au-check .au-icono { margin-top: 1px; }
.au-check-cuerpo { min-width: 0; }
.au-check-titulo { font-size: 0.98rem; font-weight: 700; line-height: 1.4; margin-bottom: 0.25rem; }
.au-check-detalle { font-size: 0.9rem; color: var(--tinta-70); line-height: 1.65; }
.au-check-titulo, .au-check-detalle { overflow-wrap: anywhere; }
.au-check-valor {
  margin-top: 0.6rem; padding: 0.5rem 0.7rem;
  background: var(--au-gris); border-radius: var(--radius);
  font-size: 0.84rem; line-height: 1.5; color: var(--negro);
  overflow-wrap: anywhere;
}
.au-check-valor-et { font-weight: 700; color: var(--tinta-70); }
/* «Medición de Google» en el contraste (no cambia la nota) */
.au-check-google {
  display: inline-block; vertical-align: 2px;
  margin-left: 0.25rem; padding: 0.05rem 0.4rem;
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.5;
  color: var(--tinta-70); background: var(--blanco);
  border: 1px solid var(--borde); border-radius: var(--radius);
}

/* 4 · estructura de encabezados */
.au-cuenta-h { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.au-cuenta-h li {
  font-size: 0.82rem; color: var(--tinta-70);
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--borde); border-radius: var(--radius);
}
.au-cuenta-h li strong { color: var(--negro); margin-right: 0.2rem; }
.au-cuenta-h li.is-mal { border-color: var(--rojo); color: var(--rojo); }
.au-cuenta-h li.is-mal strong { color: var(--rojo); }

.au-arbol {
  list-style: none; margin-top: 1.4rem;
  border: 1px solid var(--borde); border-radius: var(--radius);
}
.au-h {
  --n: 0;
  position: relative;
  display: flex; align-items: flex-start; gap: 0.7rem;
  padding: 0.6rem 0.9rem 0.6rem calc(0.9rem + var(--n) * 1.6rem);
  border-bottom: 1px solid var(--borde);
  font-size: 0.92rem; line-height: 1.45;
}
.au-h:last-child { border-bottom: 0; }
.au-h:not(.au-h-1)::before {
  content: ''; position: absolute; top: 0; bottom: 0;
  left: calc(0.9rem + var(--n) * 1.6rem - 0.65rem);
  width: 1px; background: var(--au-gris-2);
}
.au-h-tag {
  flex-shrink: 0; min-width: 2.3rem; text-align: center;
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.04em; line-height: 1.5;
  padding: 0.15rem 0.4rem;
  background: var(--blanco); color: var(--tinta-70);
  border: 1px solid var(--borde); border-radius: var(--radius);
}
.au-h-1 .au-h-tag { background: var(--negro); border-color: var(--negro); color: var(--blanco); }
.au-h-2 .au-h-tag { border-color: var(--negro); color: var(--negro); }
.au-h-texto { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.au-h-1 .au-h-texto { font-weight: 800; }
.au-h-2 .au-h-texto { font-weight: 600; }
.au-h-3 .au-h-texto, .au-h-4 .au-h-texto, .au-h-5 .au-h-texto, .au-h-6 .au-h-texto { color: var(--tinta-70); }
.au-h-vacio { color: var(--tinta-70); }
.au-h.is-problema { background: rgba(224, 22, 33, 0.05); }
.au-h.is-problema .au-h-tag { background: var(--rojo); border-color: var(--rojo); color: var(--blanco); }
.au-h-problema {
  display: flex; align-items: center; gap: 0.35rem;
  margin-top: 0.2rem;
  font-size: 0.8rem; font-weight: 700; font-style: normal; color: var(--rojo-dark);
}
.au-h-problema svg { width: 12px; height: 12px; flex-shrink: 0; }

/* botón de texto (ver más, reintentar) */
.au-boton-texto {
  margin-top: 1rem;
  display: inline-flex; align-items: center;
  font-family: var(--font); font-size: 0.85rem; font-weight: 700;
  color: var(--negro); background: var(--blanco);
  border: 1px solid var(--negro); border-radius: var(--radius);
  padding: 0.55rem 1rem;
  transition: background 0.2s, color 0.2s;
}
.au-boton-texto:hover { background: var(--negro); color: var(--blanco); }

/* 5 · fotos */
.au-cifras {
  list-style: none;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.8rem;
}
.au-cifras-3 { grid-template-columns: repeat(3, 1fr); }
.au-cifra {
  border: 1px solid var(--borde); border-radius: var(--radius);
  padding: 1rem 1.1rem; min-width: 0;
}
.au-cifra-num {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 1.45rem; font-weight: 900; letter-spacing: -0.5px; line-height: 1.15;
  overflow-wrap: anywhere;
}
.au-cifra-num .au-icono { width: 20px; height: 20px; }
.au-cifra-num .au-icono svg { width: 12px; height: 12px; }
.au-cifra-et { display: block; font-size: 0.78rem; color: var(--tinta-70); margin-top: 0.35rem; line-height: 1.4; }

.au-fotos-lista {
  list-style: none;
  border: 1px solid var(--borde); border-radius: var(--radius);
}
.au-foto {
  display: grid; grid-template-columns: 72px 1fr; gap: 1rem; align-items: start;
  padding: 0.9rem 1rem;
  border-bottom: 1px solid var(--borde);
}
.au-foto:last-child { border-bottom: 0; }
.au-foto.is-pesada { background: rgba(224, 22, 33, 0.035); }
.au-foto-mini {
  width: 72px; height: 72px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--borde); border-radius: var(--radius);
  background: repeating-conic-gradient(#ececec 0 25%, #fafafa 0 50%) 0 0 / 14px 14px;
  color: var(--tinta-50);
}
.au-foto-mini img { width: 100%; height: 100%; object-fit: cover; }
.au-foto-mini.is-rota { background: var(--au-gris); }
.au-foto-mini svg { width: 26px; height: 26px; }
.au-foto-info { min-width: 0; }
/* nombre en 2 líneas como mucho: lo que distingue una foto de otra suele estar al final */
.au-foto-nombre {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
  overflow: hidden; overflow-wrap: anywhere; white-space: normal;
  font-size: 0.9rem; font-weight: 700; line-height: 1.4; color: var(--negro);
  text-decoration: none;
}
a.au-foto-nombre:hover { color: var(--rojo); text-decoration: underline; }
.au-foto-datos { display: flex; flex-wrap: wrap; gap: 0.4rem 0.5rem; margin-top: 0.45rem; }
.au-chip {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.22rem 0.5rem 0.22rem 0.3rem;
  font-size: 0.76rem; font-weight: 600; line-height: 1.35; color: var(--negro);
  background: var(--blanco);
  border: 1px solid var(--borde); border-radius: var(--radius);
}
.au-chip:not(:has(.au-icono)) { padding-left: 0.5rem; }
.au-chip .au-icono { width: 16px; height: 16px; }
.au-chip .au-icono svg { width: 10px; height: 10px; }
.au-chip-peso { font-weight: 800; }
.au-foto-alt {
  margin-top: 0.4rem;
  font-size: 0.8rem; color: var(--tinta-70); line-height: 1.5;
  overflow-wrap: anywhere;
}

.au-consejo {
  display: flex; gap: 0.75rem; align-items: flex-start;
  margin-top: 1.4rem; padding: 1rem 1.2rem;
  background: var(--au-gris); border-radius: var(--radius);
  font-size: 0.88rem; line-height: 1.6; color: var(--tinta-70);
}
.au-consejo .au-icono { width: 22px; height: 22px; }
.au-consejo .au-icono svg { width: 13px; height: 13px; }

/* 6 · velocidad */
.au-psi {
  border: 1px solid var(--borde); border-radius: var(--radius);
  padding: 1.5rem;
}
/* recibe el foco al pulsar «Volver a intentarlo» */
.au-psi:focus { outline: none; }
.au-psi:focus-visible { outline: 3px solid var(--rojo); outline-offset: 3px; }
.au-psi-cargando {
  display: flex; align-items: center; gap: 1rem;
  font-size: 0.95rem; color: var(--tinta-70);
}
.au-barritas { display: inline-flex; align-items: flex-end; gap: 4px; height: 28px; flex-shrink: 0; }
/* 3 vueltas: la última barra acaba a los 4,6 s con su retraso de 0,4 s (2.2.2: menos de 5 s).
   Se quedan en la altura en la que acaba la animación, sin saltos */
.au-barritas span {
  display: block; width: 7px; height: 30%;
  background: var(--negro); border-radius: 1px;
  animation: barMove 1.4s ease-in-out 3 forwards;
}
.au-barritas span:nth-child(2) { background: var(--rojo); animation-delay: 0.2s; }
.au-barritas span:nth-child(3) { animation-delay: 0.4s; }

.au-psi-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; margin-bottom: 1.4rem; }
.au-psi-num {
  display: flex; align-items: center; gap: 0.6rem;
  font-size: 1rem; color: var(--tinta-70); font-weight: 700;
}
.au-psi-cifra { white-space: nowrap; }
.au-psi-num strong { font-size: 2.8rem; font-weight: 900; letter-spacing: -1.5px; line-height: 1; color: var(--negro); }
.au-psi-num small { font-size: 1rem; font-weight: 700; margin-left: 0.15rem; }
.au-psi-num.is-bien strong { color: var(--au-bien); }
.au-psi-num.is-aviso strong { color: #a87c00; }   /* el ámbar de los círculos, más oscuro para leerse sobre blanco */
.au-psi-num.is-mal strong { color: var(--au-mal); }
.au-psi-texto { flex: 1 1 220px; min-width: 0; }
.au-psi-frase { font-weight: 700; font-size: 0.98rem; margin-bottom: 0.6rem; }
.au-medidor-grande { height: 10px; }

.au-metricas { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
.au-metrica {
  display: grid; grid-template-columns: 24px 1fr; gap: 0.8rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--borde); border-radius: var(--radius);
}
.au-metrica > div { min-width: 0; }
.au-metrica-nombre { font-size: 0.85rem; font-weight: 700; line-height: 1.4; }
.au-metrica-sigla {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em;
  color: var(--tinta-70); border: 1px solid var(--borde); border-radius: var(--radius);
  padding: 0.05rem 0.3rem; margin-left: 0.15rem; vertical-align: 1px;
}
.au-metrica-valor { font-size: 1.5rem; font-weight: 900; letter-spacing: -0.5px; line-height: 1.15; margin: 0.15rem 0 0.35rem; }
.au-metrica-exp { font-size: 0.8rem; color: var(--tinta-70); line-height: 1.55; }

.au-psi-error { display: flex; gap: 0.8rem; align-items: flex-start; }
.au-psi-error-texto { font-size: 0.95rem; line-height: 1.6; font-weight: 600; }
.au-psi-error-sub { font-size: 0.88rem; color: var(--tinta-70); line-height: 1.6; margin-top: 0.3rem; }

.au-nuestras .au-h3 { margin-bottom: 0.2rem; }
.au-nuestras .au-pie { margin: 0 0 1rem; }

/* enlace dentro de un texto */
.au-enlace { color: var(--negro); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.au-enlace:hover { color: var(--rojo); }

/* 6 · accesibilidad: ejemplos con su trozo de código */
.au-acc-cuentas {
  list-style: none;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0.8rem;
  margin-bottom: 1.2rem;
}
.au-acc-grupo {
  border: 1px solid var(--borde); border-radius: var(--radius);
  margin-top: 0.8rem; background: var(--blanco);
}
.au-acc-grupo.is-mal { box-shadow: inset 4px 0 0 var(--au-mal); }
.au-acc-grupo.is-aviso { box-shadow: inset 4px 0 0 var(--au-aviso); }
.au-acc-sumario {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.95rem 1.1rem 0.95rem 1.3rem;
  font-size: 0.98rem; font-weight: 700; line-height: 1.35;
  list-style: none;
}
.au-acc-sumario::-webkit-details-marker { display: none; }
.au-acc-sumario::marker { content: ''; }
.au-acc-sumario::after {
  content: ''; flex-shrink: 0;
  width: 8px; height: 8px; margin: 0 0.2rem 0 0.2rem;
  border: solid var(--negro); border-width: 0 2px 2px 0;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.2s;
}
.au-acc-grupo[open] > .au-acc-sumario::after { transform: translateY(2px) rotate(-135deg); }
.au-acc-sumario:hover .au-acc-nombre { text-decoration: underline; text-underline-offset: 3px; }
.au-acc-nombre { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.au-acc-cuenta {
  flex-shrink: 0; min-width: 2rem; text-align: center;
  padding: 0.1rem 0.5rem;
  font-size: 0.82rem; font-weight: 800; font-variant-numeric: tabular-nums;
  background: var(--au-gris); border: 1px solid var(--borde); border-radius: var(--radius);
}
.au-acc-explica {
  padding: 0 1.1rem 0.9rem 1.3rem;
  font-size: 0.88rem; color: var(--tinta-70); line-height: 1.6;
}

/* lista de ejemplos de código (accesibilidad y contraste) */
.au-codigos { list-style: none; border-top: 1px solid var(--borde); }
.au-codigos-item { padding: 0.85rem 1.1rem 0.9rem 1.3rem; border-bottom: 1px solid var(--borde); }
.au-codigos-item:last-child { border-bottom: 0; }
.au-codigos-texto { font-size: 0.86rem; line-height: 1.5; margin-bottom: 0.45rem; overflow-wrap: anywhere; }
.au-codigo {
  display: block;
  padding: 0.55rem 0.7rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
  font-size: 0.8rem; line-height: 1.55; color: #1a1a1a;
  background: var(--au-gris); border-left: 3px solid var(--negro); border-radius: var(--radius);
  white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word;
}

/* 7 · según Google Lighthouse */
.au-lh {
  border: 1px solid var(--borde); border-radius: var(--radius);
  padding: 1.5rem;
}
.au-lh:focus { outline: none; }
.au-lh:focus-visible { outline: 3px solid var(--rojo); outline-offset: 3px; }
.au-lh-circulos {
  list-style: none;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.9rem;
}
.au-lh-circulo {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 1.1rem 0.7rem 1rem;
  background: var(--au-gris); border-radius: var(--radius);
  min-width: 0;
}
.au-lh-circulo .au-anillo { margin-bottom: 0.6rem; }
.au-lh-nombre { font-size: 0.92rem; font-weight: 800; line-height: 1.3; overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }
.au-lh-valor { font-size: 0.78rem; font-weight: 600; color: var(--tinta-70); margin-top: 0.1rem; }
.au-lh-explica { font-size: 0.76rem; color: var(--tinta-70); line-height: 1.45; margin-top: 0.3rem; }
.au-lh-estado { margin-top: 1.1rem; font-size: 0.9rem; color: var(--tinta-70); line-height: 1.55; }
.au-lh-fallos .au-h3 { margin-top: 1.6rem; }
.au-lh-lista { list-style: none; display: grid; gap: 0.7rem; }
.au-lh-fallo {
  display: grid; grid-template-columns: 22px 1fr; gap: 0.8rem; align-items: start;
  padding: 0.85rem 1rem;
  border: 1px solid var(--borde); border-radius: var(--radius);
  box-shadow: inset 4px 0 0 var(--au-mal);
}
.au-lh-fallo .au-icono { width: 22px; height: 22px; margin-top: 1px; }
.au-lh-fallo .au-icono svg { width: 13px; height: 13px; }
.au-lh-fallo-cuerpo { min-width: 0; }
.au-lh-fallo-titulo { font-size: 0.93rem; font-weight: 700; line-height: 1.45; overflow-wrap: anywhere; }
.au-lh-cuantos {
  display: inline-block; vertical-align: 1px;
  padding: 0.02rem 0.4rem; margin-left: 0.15rem;
  font-size: 0.74rem; font-weight: 700; color: var(--tinta-70); white-space: nowrap;
  border: 1px solid var(--borde); border-radius: var(--radius);
}
.au-lh-ejemplos { margin-top: 0.6rem; border: 1px solid var(--borde); border-radius: var(--radius); }
.au-lh-ejemplos > summary {
  padding: 0.55rem 0.8rem;
  font-size: 0.84rem; font-weight: 700;
}
.au-lh-ejemplos > summary:hover { text-decoration: underline; text-underline-offset: 3px; }
.au-lh-ejemplos .au-codigos-item { padding: 0.75rem 0.8rem; }

/* 10 · ¿te lo enviamos por correo? */
.au-correo {
  display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 1rem 2.6rem; align-items: start;
  border-top: 4px solid var(--negro);
}
.au-correo .au-intro { margin-bottom: 0; }
.au-correo-fila { display: flex; gap: 0.6rem; align-items: stretch; }
.au-correo-fila .form-input { flex: 1; min-width: 0; font-size: 1rem; border-color: rgba(13, 13, 13, 0.45); }
.au-correo-fila .btn-primary { flex-shrink: 0; justify-content: center; padding: 0.85rem 1.5rem; }
.au-correo-fila .btn-primary:disabled { opacity: 0.7; cursor: progress; transform: none; }
.au-correo-check { margin-top: 0.9rem; font-size: 0.86rem; line-height: 1.5; color: var(--negro); }
.au-correo-check input { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
.au-opcional { color: var(--tinta-70); font-weight: 400; }
.au-correo-check input[aria-invalid="true"] { outline: 2px solid var(--rojo); outline-offset: 2px; }
.au-correo .form-input[aria-invalid="true"] { border-color: var(--rojo); }
.au-correo .au-lead-rgpd { margin-top: 1rem; }
.au-correo-ok {
  display: flex; gap: 0.8rem; align-items: flex-start;
  padding: 1.2rem 1.3rem;
  background: var(--au-gris); border-left: 4px solid var(--au-bien); border-radius: var(--radius);
  outline: none;
}
.au-correo-ok:focus-visible { outline: 3px solid var(--rojo); outline-offset: 3px; }
.au-correo-ok-cuerpo { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.au-correo-ok-titulo { font-size: 1.2rem; font-weight: 900; letter-spacing: -0.3px; margin-bottom: 0.3rem; }
.au-correo-ok p { font-size: 0.93rem; line-height: 1.6; }

/* 9 · ¿quieres que te lo arreglemos? */
.au-arreglar {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2.6rem; align-items: start;
  margin-top: 1.6rem; padding: 2.6rem;
  background: var(--negro); color: var(--blanco);
  border-top: 4px solid var(--rojo); border-radius: var(--radius);
  scroll-margin-top: 96px;
}
.au-arreglar .au-h2 { color: var(--blanco); font-size: clamp(1.7rem, 3.2vw, 2.3rem); margin-bottom: 1rem; }
.au-arreglar-texto p { color: rgba(255, 255, 255, 0.75); line-height: 1.75; margin-bottom: 1.4rem; }
.au-arreglar-texto p strong { color: var(--blanco); }
.au-telefono {
  display: inline-flex; align-items: center; gap: 0.6rem;
  margin-bottom: 1.4rem;
  color: var(--blanco); text-decoration: none;
  font-size: 1.7rem; font-weight: 900; letter-spacing: -0.5px;
  transition: color 0.2s;
}
.au-telefono svg { color: var(--rojo); flex-shrink: 0; }
.au-telefono:hover { color: var(--rojo); }

.au-lead-caja { background: var(--blanco); color: var(--negro); border-radius: var(--radius); padding: 1.7rem; }
.au-lead-titulo { font-size: 1.05rem; font-weight: 800; letter-spacing: -0.2px; margin-bottom: 1.1rem; }
.au-lead .form-group { margin-bottom: 1rem; }
.au-lead .form-input { font-size: 1rem; border-color: rgba(13, 13, 13, 0.45); }
.au-lead .form-input:focus { border-color: var(--rojo); }
.au-lead .form-input[aria-invalid="true"] { border-color: var(--rojo); }
.au-lead .form-check input[aria-invalid="true"] { outline: 2px solid var(--rojo); outline-offset: 2px; }
.au-lead .btn-primary { width: 100%; justify-content: center; margin-top: 0.3rem; }
.au-lead .btn-primary:disabled { opacity: 0.7; cursor: progress; transform: none; }
.au-lead-rgpd { margin-top: 1.1rem; font-size: 0.72rem; line-height: 1.55; color: #6b6b6b; }
.au-lead-rgpd a { color: var(--rojo); }
.au-honey { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.au-lead-ok { outline: none; }
.au-lead-ok-titulo { font-size: 1.4rem; font-weight: 900; letter-spacing: -0.5px; margin-bottom: 0.6rem; overflow-wrap: anywhere; }
.au-lead-ok p { font-size: 0.95rem; line-height: 1.65; color: var(--tinta-70); }
.au-lead-ok a { color: var(--rojo); font-weight: 700; }

/* 12 · descargar en PDF y auditar otra web */
.au-otra {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.8rem;
  margin-top: 2.2rem; text-align: center;
}
.au-otra .btn-secondary { justify-content: center; }
.au-otra .btn-secondary svg { flex-shrink: 0; }
.au-otra-pie { flex: 1 1 100%; margin-top: 0.2rem; }

/* cabecera y pie del PDF: solo al imprimir */
.au-impresion-cab, .au-impresion-pie { display: none; }

/* movimiento reducido: nada gira ni late, ni siquiera los pocos segundos que lo hacen normalmente */
@media (prefers-reduced-motion: reduce) {
  .au-anillo.is-midiendo svg, .au-barritas span,
  .au-pasos li.is-activo .au-paso-marca { animation: none !important; }
  .au-acc-sumario::after { transition: none; }
  /* style.css pone scroll-behavior: smooth en html; así los saltos (también los de los círculos) son al instante */
  html { scroll-behavior: auto; }
}

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  .au-hero { padding: 8.5rem 5% 4rem; }
  .au-tarjetas { grid-template-columns: repeat(2, 1fr); }
  .au-arreglar { grid-template-columns: 1fr; gap: 2rem; }
  .au-revisamos { padding: 4.5rem 5%; }
  .au-circulos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .au-correo { grid-template-columns: 1fr; gap: 1.4rem; }
}

@media (max-width: 700px) {
  .au-cifras { grid-template-columns: 1fr 1fr; }
  .au-metricas { grid-template-columns: 1fr; }
  .au-cabecera-arriba { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 1.4rem; }
  .au-veredicto { margin: 0 auto; }
  .au-contadores { justify-content: center; }
  .au-lh-circulos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  /* el botón de auditar se ve sin bajar, también en móviles pequeños
     (medido a 375×548 con el aviso de cookies abierto: botón en 389-441, aviso desde 446) */
  .au-hero { padding: 5.6rem 5% 3.2rem; }
  .au-hero .breadcrumb { display: none; }
  .au-hero .hero-bars { display: none; }   /* las barras de main.js quedaban detrás del botón y del panel */
  .au-hero .section-label { margin-bottom: 0.6rem; }
  .au-hero .page-title { font-size: 2.45rem; letter-spacing: -1.4px; margin-bottom: 0.8rem; }
  .au-hero .page-desc { font-size: 0.95rem; line-height: 1.55; }
  .au-form { margin-top: 1.1rem; }

  /* aviso de cookies compacto en el móvil (lo crea main.js). Lo ideal es pasarlo a
     css/style.css para toda la web; aquí asegura que no tape el botón de esta página. */
  #cookie-banner { padding: 0.6rem 5%; gap: 0.5rem 1rem; flex-wrap: nowrap; }
  #cookie-banner p { font-size: 0.72rem; line-height: 1.4; min-width: 0; }
  #cookie-banner .cookie-btn { padding: 0.5rem 0.9rem; white-space: nowrap; }
  .au-campo { flex-direction: column; gap: 0.7rem; border: 0; background: transparent; box-shadow: none; }
  .au-campo:focus-within { box-shadow: none; outline: none; }   /* en el móvil el anillo va en el propio campo */
  .au-input {
    background: var(--blanco);
    border: 2px solid var(--negro); border-radius: var(--radius);
    padding: 0.95rem 1rem; font-size: 1.1rem;
    transition: border-color 0.2s, box-shadow 0.2s;
  }
  .au-input:focus {
    border-color: var(--rojo); box-shadow: 0 0 0 4px rgba(224, 22, 33, 0.14);
    outline: 2px solid transparent; outline-offset: 0;   /* se ve en el modo de alto contraste de Windows */
  }
  .au-boton { width: 100%; padding: 1rem 1.2rem; border-radius: var(--radius); }
  .au-ventajas { gap: 0.3rem 1rem; font-size: 0.8rem; }
  .au-estado { padding: 1rem 1.1rem; }
  .au-pasos { grid-template-columns: 1fr; }

  .au-tarjetas { grid-template-columns: 1fr; gap: 0.8rem; margin-top: 1.8rem; }
  .au-tarjeta {
    display: grid; grid-template-columns: 42px 1fr; gap: 0.15rem 1rem;
    padding: 1.15rem 1.1rem;
  }
  .au-tarjeta-icono { width: 42px; height: 42px; margin: 0; grid-row: span 2; }
  .au-tarjeta-icono svg { width: 22px; height: 22px; }
  .au-tarjeta h3 { margin-bottom: 0.2rem; }
  .au-aviso-datos { font-size: 0.86rem; padding: 1rem; }

  .au-informe { padding: 2rem 5% 3.5rem; }
  .au-bloque { padding: 1.5rem 1.15rem; margin-top: 1.1rem; }
  .au-intro { font-size: 0.9rem; }
  .au-cabecera { padding: 1.8rem 1.15rem; }
  .au-anillo-grande { width: 160px; height: 160px; }
  .au-anillo-grande .au-anillo-cifra { font-size: 3.4rem; letter-spacing: -2px; }
  .au-anillo-de { font-size: 0.9rem; margin-top: 0.3rem; }
  .au-circulos { gap: 0.6rem 0.4rem; margin-top: 1.8rem; padding-top: 1.4rem; }
  .au-circulo { padding: 0.4rem 0.1rem 0.3rem; }
  .au-cabecera-acciones > * { flex: 1 1 100%; justify-content: center; }
  .au-pista-pdf { text-align: center; }
  .au-serp { padding: 1rem; }
  .au-serp-titulo { font-size: 18px; }
  .au-seccion-cab { padding: 1rem 1rem 0.95rem; }
  .au-seccion-cab h3 { font-size: 1.02rem; }
  .au-check { grid-template-columns: 22px 1fr; gap: 0.75rem; padding: 1rem; }
  .au-check .au-icono { width: 22px; height: 22px; }
  .au-check .au-icono svg { width: 13px; height: 13px; }
  .au-check-detalle { font-size: 0.87rem; }
  .au-h { padding-left: calc(0.7rem + var(--n) * 0.85rem); padding-right: 0.7rem; gap: 0.55rem; font-size: 0.88rem; }
  .au-h:not(.au-h-1)::before { left: calc(0.7rem + var(--n) * 0.85rem - 0.45rem); }
  .au-h-tag { min-width: 2.1rem; }
  .au-cifras-3 { grid-template-columns: 1fr 1fr; }
  .au-cifra { padding: 0.85rem 0.9rem; }
  .au-cifra-num { font-size: 1.2rem; }
  .au-foto { grid-template-columns: 56px 1fr; gap: 0.8rem; padding: 0.8rem; }
  .au-foto-mini { width: 56px; height: 56px; }
  .au-psi { padding: 1.1rem; }
  .au-psi-num strong { font-size: 2.4rem; }
  .au-acc-cuentas { grid-template-columns: 1fr 1fr; gap: 0.6rem; }
  .au-acc-sumario { padding: 0.85rem 0.85rem 0.85rem 1.1rem; gap: 0.6rem; font-size: 0.93rem; }
  .au-acc-explica { padding: 0 0.85rem 0.8rem 1.1rem; font-size: 0.85rem; }
  .au-codigos-item { padding: 0.8rem 0.85rem 0.85rem 1.1rem; }
  .au-codigo { font-size: 0.76rem; padding: 0.5rem 0.6rem; }
  .au-lh { padding: 1.1rem 0.9rem; }
  .au-lh-circulos { gap: 0.6rem; }
  .au-lh-circulo { padding: 0.9rem 0.5rem 0.85rem; }
  .au-lh-fallo { grid-template-columns: 22px 1fr; gap: 0.65rem; padding: 0.8rem 0.8rem 0.8rem 0.9rem; }
  .au-correo-fila { flex-direction: column; }
  .au-correo-fila .btn-primary { width: 100%; }
  .au-correo-ok { padding: 1rem; }
  .au-arreglar { padding: 1.8rem 1.15rem; }
  .au-telefono { font-size: 1.5rem; }
  .au-arreglar-texto .btn-primary { width: 100%; justify-content: center; }
  .au-lead-caja { padding: 1.3rem 1.1rem; }
  .au-otra .btn-secondary { width: 100%; justify-content: center; }
}

@media (max-width: 380px) {
  .au-hero .page-title { font-size: 2.2rem; }
  .au-circulo-nombre { font-size: 0.74rem; }
  /* a 320 px «Accesibilidad» necesita 78 px y la columna daba 76: un poco menos de hueco entre círculos */
  .au-circulos { column-gap: 0.2rem; }
  .au-circulo { padding-left: 0; padding-right: 0; }
  .au-lh-nombre { font-size: 0.82rem; }
  .au-lh-circulo { padding-left: 0.3rem; padding-right: 0.3rem; }
}
@media (max-width: 340px) {
  .au-cifras, .au-cifras-3, .au-acc-cuentas { grid-template-columns: 1fr; }
}

/* ── IMPRIMIR / DESCARGAR EN PDF ──
   Botón «Descargar informe en PDF» → window.print(). Antes de imprimir, auditoria.js deja los círculos
   en su valor final, abre los desplegables, carga las miniaturas y pone de título «Informe web DOMINIO — Durán».
   Fondo blanco, texto negro y los colores de estado tal cual. */
@media print {
  @page { margin: 14mm 12mm; }
  html, body { background: #ffffff !important; color: #000000; }
  body { cursor: auto; }
  body::after { display: none !important; }

  /* fuera todo lo que no es el informe */
  nav#navbar, footer, .cta-band, .hero-bars, #scroll-top, #cookie-banner, #progress-bar,
  .au-cabecera-acciones, .au-pista-pdf, .au-correo, .au-lead-caja, .au-otra, .au-boton-texto,
  .au-arreglar .btn-primary, .au-informe button { display: none !important; }
  /* si Google aún está midiendo, en el papel no pintan nada los círculos grises ni el «Midiendo…»:
     fuera el bloque de Lighthouse y el recuadro de Google (se queda «Lo que hemos medido nosotros») */
  .au-bloque:has(.au-lh[aria-busy="true"]),
  .au-bloque:has(.au-psi[aria-busy="true"]) .au-psi { display: none !important; }
  .au-check.au-midiendo { display: none !important; }   /* el contraste, mientras lo mide Google (regla aparte: sin :has) */
  body.au-con-informe .au-hero, body.au-con-informe .au-revisamos { display: none !important; }

  /* colores de estado (iconos, barras, círculos, bordes de color) tal cual */
  .au-informe, .au-informe * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  .au-informe { padding: 0; background: #ffffff; border: 0; }
  .au-informe .section-inner { max-width: none; }

  /* cabecera y pie del PDF */
  .au-impresion-cab {
    display: flex; align-items: center; gap: 6mm;
    padding-bottom: 4mm; margin-bottom: 5mm;
    border-bottom: 2px solid #000000;
  }
  .au-impresion-logo { width: auto; height: 30px; }
  .au-impresion-datos { flex: 1; min-width: 0; }
  .au-impresion-titulo { font-size: 13pt; font-weight: 800; line-height: 1.3; }
  .au-impresion-linea { font-size: 9.5pt; color: #333333; overflow-wrap: anywhere; }
  .au-impresion-nota { font-size: 10pt; font-weight: 700; color: #333333; white-space: nowrap; }
  .au-impresion-nota strong { font-size: 22pt; font-weight: 900; margin-left: 1.5mm; color: #000000; }
  .au-impresion-nota strong.is-bien { color: var(--au-c-verde); }
  .au-impresion-nota strong.is-aviso { color: #a87c00; }
  .au-impresion-nota strong.is-mal { color: var(--au-c-rojo); }
  .au-impresion-pie {
    display: block;
    margin-top: 8mm; padding-top: 3mm;
    border-top: 1px solid #999999;
    font-size: 9pt; color: #333333; text-align: center;
    break-inside: avoid;
  }

  /* cabecera del informe: en blanco (sin el bloque negro) */
  .au-cabecera {
    background: #ffffff !important; color: #000000;
    border: 1px solid #cfcfcf; border-top: 4px solid var(--rojo);
    padding: 6mm; break-inside: avoid;
  }
  .au-cabecera-arriba { grid-template-columns: 150px 1fr; gap: 7mm; justify-items: start; text-align: left; }
  .au-anillo-grande { width: 150px; height: 150px; }
  .au-anillo-grande .au-anillo-cifra { font-size: 3.2rem; }
  .au-cabecera .au-anillo-pista { stroke: #e6e6e6; }
  .au-cabecera .au-anillo-num { color: #000000; }
  .au-cabecera .au-anillo-de { color: #555555; }
  .au-cabecera .au-anillo.is-sin .au-anillo-cifra,
  .au-cabecera .au-anillo.is-midiendo .au-anillo-cifra { color: #555555; }
  .au-nota-frase.is-aviso { color: #a87c00; }      /* el ámbar del círculo, más oscuro para leerse sobre blanco */
  .au-cabecera .au-eyebrow { color: var(--rojo); }
  .au-dominio { color: #000000; }
  .au-veredicto { color: #222222; margin: 0; }
  .au-meta, .au-meta a { color: #444444; }
  .au-contadores { justify-content: flex-start; }
  .au-contadores li { color: #222222; border-color: #cfcfcf; }
  .au-contadores strong { color: #000000; }
  .au-circulos { grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr)); border-top-color: #dddddd; }
  .au-circulo { color: #000000; }
  .au-circulo-pts { color: #555555; }

  /* bloques: tarjetas sin partir y títulos pegados a su contenido.
     Sin salto de página forzado antes de «Punto por punto»: dejaba una hoja casi en blanco cuando
     «Así te ve Google» no cabía en la primera; ahora ese bloque corto va entero donde quepa. */
  .au-bloque { border: 1px solid #d9d9d9; padding: 6mm; margin-top: 5mm; }
  #au-vista { break-inside: avoid; }
  /* la etiqueta («ESTRUCTURA») es inline-flex y así break-after no le afecta: en bloque, va con su título */
  .au-bloque > .section-label { display: flex; }
  .au-h2, .au-h3, .au-seccion-cab, .au-bloque > .section-label, .au-acc-sumario,
  .au-intro, .au-acc-explica { break-after: avoid; }
  .au-check, .au-foto, .au-cifra, .au-metrica, .au-serp, .au-notas li, .au-h, .au-psi-cab,
  .au-codigos-item, .au-lh-circulo, .au-lh-fallo, .au-circulos, .au-consejo, .au-psi-error,
  .au-acc-sumario, .au-acc-explica, .au-lh-fallo-titulo { break-inside: avoid; }
  .au-check.is-mal, .au-acc-grupo.is-mal, .au-lh-fallo { box-shadow: none; border-left: 4px solid var(--au-mal); }
  .au-check.is-aviso, .au-acc-grupo.is-aviso { box-shadow: none; border-left: 4px solid var(--au-aviso); }
  .au-arbol > li[hidden] { display: flex !important; }   /* todos los encabezados, también los de «Ver todos» */
  .au-acc-sumario::after { display: none; }
  .au-lh-ejemplos > summary { display: none; }      /* «Ver el ejemplo» en papel parecería un botón */
  .au-anillo.is-midiendo svg { animation: none; }
  a.au-foto-nombre { -webkit-line-clamp: 3; line-clamp: 3; }

  /* «¿Quieres que te lo arreglemos?»: sin formulario ni botón, en blanco */
  .au-arreglar {
    display: block; background: #ffffff !important; color: #000000;
    border: 1px solid #cfcfcf; border-top: 4px solid var(--rojo);
    padding: 6mm; margin-top: 5mm; break-inside: avoid;
  }
  .au-arreglar .section-label { color: var(--rojo); }
  .au-arreglar .au-h2, .au-arreglar-texto p strong, .au-telefono { color: #000000; }
  .au-arreglar-texto p { color: #222222; margin-bottom: 3mm; }
  .au-telefono { margin-bottom: 0; }
}