/* =====================================================
   ZYRO BUSINESS AUDITOR
   Estilos propios de /auditor.
   Fuera de los bundles a propósito: solo los carga esta
   página, igual que chat.css. Si se metieran en
   bundle-pages.css los pagarían las otras ocho páginas.
   ===================================================== */

.aud {
  --aud-bien: #34d399;
  --aud-regular: #fbbf24;
  --aud-mal: #fb923c;
  --aud-critico: #f5675f;
  --aud-superficie: rgba(255, 255, 255, 0.035);
  --aud-borde: rgba(255, 255, 255, 0.09);
}

/* -----------------------------------------------------
   HERO
   -----------------------------------------------------
   La rejilla y el resplandor ya no están aquí: viven en pages.css sobre
   `.hero`, porque ahora los comparten todas las páginas del sitio. Aquí solo
   queda lo propio del Auditor, que es una herramienta y no una portada: sin
   altura mínima de pantalla completa y con la caja de contenido más ancha,
   para que el buscador respire.
   ----------------------------------------------------- */

.aud-hero {
  min-height: auto;
  padding-block: clamp(6rem, 12vh, 9rem) var(--space-2xl);
}

.aud-hero .hero-content {
  max-width: 940px;
}

.aud-hero h1 {
  margin-bottom: var(--space-lg);
}

/* -----------------------------------------------------
   ENTRADA
   ----------------------------------------------------- */

.aud-buscador {
  max-width: 720px;
  margin: 0 auto;
}

/* El campo es el producto: es lo único que el visitante tiene que hacer.
   Por eso va más alto que un input normal, con el esquema https:// ya escrito
   —para que se entienda que basta con el dominio— y un foco que se nota. */
.aud-form {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  background: rgba(10, 11, 18, 0.72);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid var(--aud-borde);
  border-radius: var(--border-radius-full);
  padding: 7px 7px 7px var(--space-lg);
  box-shadow: var(--shadow-lift);
  transition: border-color 0.25s ease, box-shadow 0.35s ease;
}

.aud-form:focus-within {
  border-color: var(--color-blue-light);
  box-shadow: var(--shadow-lift), 0 0 0 4px rgba(238, 61, 54, 0.14);
}

.aud-form__esquema {
  flex-shrink: 0;
  color: var(--color-gray-darker);
  font-size: var(--font-size-base);
  font-family: var(--font-family-mono);
  letter-spacing: -0.02em;
  user-select: none;
}

.aud-form__flecha {
  transition: transform 0.45s var(--ease);
}

.aud-form button:hover:not(:disabled) .aud-form__flecha {
  transform: translateX(3px);
}

.aud-form input[type='url'],
.aud-form input[type='text'] {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  color: var(--color-white);
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  padding: 0.9rem 0;
}

.aud-form input::placeholder { color: var(--color-gray-darker); }
.aud-form input:focus { outline: none; }

.aud-form button {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--color-blue-deep);
  color: var(--color-white);
  border: 0;
  border-radius: var(--border-radius-full);
  padding: 0.9rem 1.6rem;
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: background 0.25s ease, box-shadow 0.35s ease;
}

.aud-form button:hover:not(:disabled) { background: var(--color-blue); }
.aud-form button:disabled { opacity: 0.55; cursor: progress; }

.aud-nota {
  margin: var(--space-md) 0 0;
  color: var(--color-gray-darker);
  font-size: var(--font-size-sm);
  text-align: center;
}

.aud-error {
  margin: var(--space-md) auto 0;
  max-width: 720px;
  background: rgba(201, 41, 31, 0.12);
  border: 1px solid rgba(245, 103, 95, 0.35);
  border-radius: var(--border-radius-md);
  padding: var(--space-md) var(--space-lg);
  color: #ffb3ae;
  font-size: var(--font-size-sm);
}

/* -----------------------------------------------------
   PROGRESO
   ----------------------------------------------------- */

.aud-progreso {
  position: relative;
  z-index: 1;
  max-width: 620px;
  margin: var(--space-2xl) auto 0;
  text-align: center;
}

/* Lista de fases. Es el momento propio de este producto: son 10-40 segundos de
   espera y enseñar por dónde va convierte el tiempo muerto en prueba de que
   detrás hay trabajo de verdad. */
.aud-pasos {
  display: grid;
  gap: 0;
  margin: 0 0 var(--space-xl);
  padding: 0;
  list-style: none;
  text-align: left;
}

.aud-paso {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: 0.7rem 0 0.7rem 0.25rem;
  color: var(--color-gray-darker);
  font-size: var(--font-size-sm);
  transition: color 0.4s ease;
}

/* Hilo que une las marcas, como una línea de tiempo. */
.aud-paso:not(:last-child)::before {
  content: '';
  position: absolute;
  left: calc(0.25rem + 8px);
  top: calc(50% + 9px);
  width: 1px;
  height: calc(100% - 18px);
  background: var(--aud-borde);
}

.aud-paso__marca {
  position: relative;
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  border: 1.5px solid var(--aud-borde);
  background: transparent;
  transition: border-color 0.4s ease, background 0.4s ease, box-shadow 0.4s ease;
}

.aud-paso__marca::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 0.35s ease, transform 0.35s var(--ease);
}

/* En curso: la marca se tiñe y late suave. */
.aud-paso--activo {
  color: var(--color-white);
  font-weight: var(--font-weight-medium);
}

.aud-paso--activo .aud-paso__marca {
  border-color: var(--color-blue-light);
  color: var(--color-blue-light);
  box-shadow: 0 0 0 4px rgba(238, 61, 54, 0.12);
  animation: aud-latido 1.6s ease-in-out infinite;
}

.aud-paso--activo .aud-paso__marca::after {
  opacity: 1;
  transform: scale(1);
}

/* Terminado: marca llena, texto ya sin protagonismo. */
.aud-paso--hecho {
  color: var(--color-slate);
}

.aud-paso--hecho .aud-paso__marca {
  border-color: var(--aud-bien);
  background: var(--aud-bien);
  color: #06251a;
}

.aud-paso--hecho .aud-paso__marca::after {
  opacity: 1;
  transform: scale(1);
}

@keyframes aud-latido {
  0%, 100% { box-shadow: 0 0 0 4px rgba(238, 61, 54, 0.12); }
  50%      { box-shadow: 0 0 0 7px rgba(238, 61, 54, 0.05); }
}

/* Los tres puntos de "escribiendo…", pero para "estamos en ello". Solo se ven
   en el paso activo: en los demás ocupan sitio (mismo layout siempre, nada
   salta de ancho al cambiar de fase) pero con opacidad cero. */
.aud-paso__puntos {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 1em;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.aud-paso--activo .aud-paso__puntos {
  opacity: 1;
}

.aud-paso__puntos i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  animation: aud-puntito 1.3s ease-in-out infinite;
}

/* Desfase de 0.15s entre puntos: es lo que da la sensación de "1, 2, 3" en
   vez de que los tres suban a la vez. */
.aud-paso__puntos i:nth-child(2) { animation-delay: 0.15s; }
.aud-paso__puntos i:nth-child(3) { animation-delay: 0.3s; }

@keyframes aud-puntito {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30%           { transform: translateY(-3px); opacity: 1; }
}

.aud-progreso__barra {
  height: 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: var(--border-radius-full);
  overflow: hidden;
}

/* Las barras crecen con transform: scaleX, no animando width. Animar el ancho
   obliga al navegador a recalcular la maquetación en cada fotograma; scaleX va
   por la GPU y no toca el layout. Lo pone el JS con --aud-avance. */
.aud-progreso__relleno {
  height: 100%;
  width: 100%;
  transform: scaleX(var(--aud-avance, 0.05));
  transform-origin: left center;
  background: linear-gradient(90deg, var(--color-blue-deep), var(--color-blue-light));
  border-radius: inherit;
  transition: transform 0.5s var(--ease);
}

.aud-progreso__texto {
  margin: var(--space-md) 0 0;
  color: var(--color-slate);
  font-size: var(--font-size-sm);
}

/* -----------------------------------------------------
   RESULTADO — CABECERA
   ----------------------------------------------------- */

.aud-resultado { margin-top: var(--space-3xl); }

.aud-cabecera {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2xl);
  align-items: center;
  background: var(--aud-superficie);
  border: 1px solid var(--aud-borde);
  border-radius: var(--border-radius-xl);
  padding: var(--space-2xl);
}

.aud-anillo {
  position: relative;
  width: 148px;
  height: 148px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  /* --aud-grados y --aud-color los pone el JS con el valor real */
  background: conic-gradient(var(--aud-color, var(--color-blue-light)) var(--aud-grados, 0deg), rgba(255, 255, 255, 0.08) 0deg);
}

.aud-anillo::before {
  content: '';
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  background: #10121b;
}

.aud-anillo__valor {
  position: relative;
  font-family: var(--font-family-heading);
  font-size: 2.75rem;
  font-weight: var(--font-weight-bold);
  line-height: 1;
  color: var(--color-white);
}

/* Solo el sufijo "/100" se encoge; el número (#audGlobal) conserva el tamaño
   grande del contenedor. Antes esto era `span` a secas y pisaba también al
   número, que salía pequeño en pantalla y en el PDF. */
.aud-anillo__valor > span:last-child {
  font-size: var(--font-size-base);
  color: var(--color-gray-dark);
}

.aud-cabecera__dominio {
  margin: 0 0 var(--space-xs);
  color: var(--color-gray-dark);
  font-size: var(--font-size-sm);
  word-break: break-all;
}

.aud-cabecera h2 {
  margin: 0 0 var(--space-sm);
  font-size: var(--font-size-2xl);
  line-height: var(--line-height-tight);
}

.aud-cabecera p { margin: 0; color: var(--color-slate); }

.aud-conteo {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-top: var(--space-lg);
  padding: 0;
  list-style: none;
}

.aud-conteo li {
  font-size: var(--font-size-sm);
  color: var(--color-gray-dark);
}

.aud-conteo strong { color: var(--color-white); }

/* -----------------------------------------------------
   ÁREAS
   ----------------------------------------------------- */

/* Seis áreas: con columnas estrechas salían cinco arriba y una huérfana
   debajo. A 300px de mínimo caen tres y tres en escritorio, dos en tablet y
   una en móvil, y le da sitio al pie de "SEO local" cuando no aplica. */
.aud-areas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

.aud-area {
  background: var(--aud-superficie);
  border: 1px solid var(--aud-borde);
  border-radius: var(--border-radius-lg);
  padding: var(--space-lg);
}

.aud-area__cabecera {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.aud-area__nombre {
  color: var(--color-slate);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

.aud-area__nota {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  line-height: 1;
}

.aud-area__barra {
  height: 5px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: var(--border-radius-full);
  overflow: hidden;
}

.aud-area__relleno {
  height: 100%;
  width: 100%;
  transform: scaleX(var(--aud-avance, 0));
  transform-origin: left center;
  border-radius: inherit;
  transition: transform 0.6s var(--ease);
}

.aud-area__pie {
  margin: var(--space-sm) 0 0;
  color: var(--color-gray-darker);
  font-size: var(--font-size-xs);
}

.aud-area--noaplica { opacity: 0.55; }

/* Colores de nota, compartidos por anillo, texto y barras */
.aud-nota--bien { color: var(--aud-bien); }
.aud-nota--regular { color: var(--aud-regular); }
.aud-nota--mal { color: var(--aud-mal); }
.aud-nota--critico { color: var(--aud-critico); }

.aud-relleno--bien { background: var(--aud-bien); }
.aud-relleno--regular { background: var(--aud-regular); }
.aud-relleno--mal { background: var(--aud-mal); }
.aud-relleno--critico { background: var(--aud-critico); }

/* -----------------------------------------------------
   HALLAZGOS
   ----------------------------------------------------- */

.aud-seccion-titulo {
  margin: var(--space-3xl) 0 var(--space-lg);
  font-size: var(--font-size-xl);
}

.aud-hallazgos { display: grid; gap: var(--space-md); }

/* La gravedad la lleva la etiqueta de texto, no una barra de color al costado:
   en pantalla ese borde grueso lateral es de los tics más reconocibles de una
   interfaz de plantilla, y además obligaría a leer el color para entender la
   severidad. Aquí el borde es de 1px y solo se tiñe, como en las tarjetas del
   home. En el email sí se mantiene la barra, porque allí es de lo poco que
   renderizan igual todos los clientes de correo. */
.aud-hallazgo {
  background: var(--aud-superficie);
  border: 1px solid var(--aud-borde);
  border-radius: var(--border-radius-lg);
  padding: var(--space-lg) var(--space-xl);
  transition: border-color 0.35s ease, background 0.35s ease;
}

.aud-hallazgo--critico { border-color: rgba(245, 103, 95, 0.4); }
.aud-hallazgo--importante { border-color: rgba(251, 146, 60, 0.32); }
.aud-hallazgo--oportunidad { border-color: rgba(96, 165, 250, 0.28); }

.aud-hallazgo__etiquetas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.aud-chip {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--border-radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.aud-chip--critico { background: rgba(245, 103, 95, 0.16); color: #ffb3ae; }
.aud-chip--importante { background: rgba(251, 146, 60, 0.16); color: #fdba74; }
.aud-chip--oportunidad { background: rgba(96, 165, 250, 0.16); color: #93c5fd; }
.aud-chip--area { background: rgba(255, 255, 255, 0.07); color: var(--color-gray-dark); }

.aud-hallazgo h3 {
  margin: 0 0 var(--space-xs);
  font-size: var(--font-size-lg);
  line-height: var(--line-height-tight);
}

.aud-hallazgo__detalle {
  margin: 0 0 var(--space-sm);
  color: var(--color-blue-light);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

.aud-hallazgo__porque {
  margin: 0 0 var(--space-md);
  color: var(--color-slate);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
}

.aud-hallazgo__accion {
  margin: 0;
  padding-top: var(--space-md);
  border-top: 1px solid var(--aud-borde);
  color: var(--color-gray-dark);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
}

.aud-hallazgo__accion strong { color: var(--color-white); }

.aud-hallazgo__ejemplos {
  margin: var(--space-sm) 0 0;
  padding-left: var(--space-lg);
  color: var(--color-gray-darker);
  font-size: var(--font-size-xs);
  font-family: var(--font-family-mono);
  word-break: break-all;
}

/* -----------------------------------------------------
   PUERTA DE EMAIL
   ----------------------------------------------------- */

.aud-puerta {
  margin-top: var(--space-lg);
  background: linear-gradient(180deg, rgba(201, 41, 31, 0.10), rgba(255, 255, 255, 0.03));
  border: 1px solid rgba(245, 103, 95, 0.28);
  border-radius: var(--border-radius-xl);
  padding: var(--space-2xl);
  text-align: center;
}

.aud-puerta h3 {
  margin: 0 0 var(--space-sm);
  font-size: var(--font-size-2xl);
}

.aud-puerta > p {
  margin: 0 auto var(--space-xl);
  max-width: 52ch;
  color: var(--color-slate);
}

.aud-puerta .aud-form { text-align: left; }

.aud-consentimiento {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  max-width: 620px;
  margin: var(--space-lg) auto 0;
  color: var(--color-gray-dark);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-normal);
  text-align: left;
}

.aud-consentimiento input { margin-top: 3px; flex-shrink: 0; }
.aud-consentimiento a { color: var(--color-blue-light); }

/* -----------------------------------------------------
   LLAMADA A LA ACCIÓN FINAL
   ----------------------------------------------------- */

.aud-cta {
  margin-top: var(--space-3xl);
  background: var(--color-gray);
  border: 1px solid var(--aud-borde);
  border-radius: var(--border-radius-xl);
  padding: var(--space-3xl) var(--space-2xl);
  text-align: center;
}

.aud-cta h2 {
  margin: 0 0 var(--space-md);
  font-size: var(--font-size-3xl);
  line-height: var(--line-height-tight);
}

.aud-cta > p {
  margin: 0 auto var(--space-xl);
  max-width: 58ch;
  color: var(--color-slate);
}

.aud-cta__servicio {
  display: inline-block;
  margin-bottom: var(--space-lg);
  padding: 6px 14px;
  border-radius: var(--border-radius-full);
  background: rgba(245, 103, 95, 0.14);
  color: #ffb3ae;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

.aud-boton-grande {
  display: inline-block;
  background: var(--color-blue-deep);
  color: var(--color-white);
  border: 0;
  border-radius: var(--border-radius-full);
  padding: 1.05rem 2.5rem;
  font-family: var(--font-family-base);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease;
}

.aud-boton-grande:hover { background: var(--color-blue); }

/* Zyro Field */
.aud-field {
  margin-top: var(--space-lg);
  background: rgba(16, 185, 129, 0.07);
  border: 1px solid rgba(52, 211, 153, 0.3);
  border-radius: var(--border-radius-lg);
  padding: var(--space-xl);
  text-align: left;
}

.aud-field h3 { margin: 0 0 var(--space-sm); font-size: var(--font-size-lg); }
.aud-field p { margin: 0 0 var(--space-md); color: var(--color-slate); font-size: var(--font-size-sm); }
.aud-field a { color: var(--aud-bien); font-weight: var(--font-weight-bold); }

/* -----------------------------------------------------
   FORMULARIO COMERCIAL
   ----------------------------------------------------- */

.aud-contacto { max-width: 640px; margin: var(--space-xl) auto 0; text-align: left; }

.aud-campos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-md);
}

.aud-campo { display: flex; flex-direction: column; gap: 6px; }
.aud-campo--ancho { grid-column: 1 / -1; }

.aud-campo label {
  color: var(--color-gray-dark);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

.aud-campo input,
.aud-campo textarea {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--aud-borde);
  border-radius: var(--border-radius-md);
  padding: 0.75rem 1rem;
  color: var(--color-white);
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
}

.aud-campo textarea { resize: vertical; min-height: 96px; }

.aud-campo input:focus,
.aud-campo textarea:focus {
  outline: none;
  border-color: var(--color-blue-light);
}

.aud-exito {
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(52, 211, 153, 0.35);
  border-radius: var(--border-radius-lg);
  padding: var(--space-xl);
  color: #a7f3d0;
  text-align: center;
}

.aud-exito h3 { margin: 0 0 var(--space-sm); color: var(--color-white); }

/* Botón discreto dentro del informe (descargar PDF). No compite con la
   llamada a la acción principal, que es la que vende. */
.aud-boton-secundario {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: var(--space-lg);
  padding: 0.6rem 1.1rem;
  background: transparent;
  border: 1px solid var(--aud-borde);
  border-radius: var(--border-radius-full);
  color: var(--color-slate);
  font-family: var(--font-family-base);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: border-color 0.25s ease, color 0.25s ease, background 0.25s ease;
}

.aud-boton-secundario:hover {
  border-color: var(--color-blue-light);
  color: var(--color-white);
  background: rgba(255, 255, 255, 0.04);
}

/* -----------------------------------------------------
   IMPRESIÓN — el informe como documento
   -----------------------------------------------------
   En pantalla el informe es oscuro; impreso, un fondo negro es ilegible y se
   come la tinta. Aquí se convierte en un documento claro, sin el cromo de la
   web (menú, formularios, chat), pensado para adjuntarlo a un correo o
   llevarlo impreso a una reunión.
   ----------------------------------------------------- */

/* El membrete solo existe en papel. En pantalla la marca ya está en el menú y
   el dominio en la cabecera del informe; repetirlo sería ruido. */
.aud-membrete { display: none; }

@media print {
  /* -----------------------------------------------------
     1. QUÉ SE VA
     -----------------------------------------------------
     Todo lo que es navegación, captación o venta. Lo que queda es el
     diagnóstico: es lo que el cliente archiva o lleva a una reunión.
     ----------------------------------------------------- */

  header,
  footer,
  .whatsapp-float,
  #cookie-banner,
  .aud-hero,
  .aud-puerta,
  .aud-cta,
  .aud-boton-secundario,
  [class*='chat'] {
    display: none !important;
  }

  /* "Qué miramos exactamente" es material de venta, no del informe. */
  main > section:last-of-type {
    display: none !important;
  }

  /* Ni transiciones ni animaciones: en papel no aportan nada y dejan colores a
     medio camino si el navegador compone la página mientras una está en curso. */
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }

  /* -----------------------------------------------------
     2. EL PAPEL
     -----------------------------------------------------
     Tinta oscura sobre blanco, y el carmesí de la marca reservado para señalar.
     Un informe que gasta color en decorar deja de poder usarlo para avisar.
     ----------------------------------------------------- */

  .aud {
    --pdf-tinta: #14161f;
    --pdf-tinta-fuerte: #0a0b12;
    --pdf-tinta-suave: #5b6070;
    --pdf-linea: #dcdfe6;
    --pdf-carmesi: #c9291f;   /* 5,5:1 sobre blanco; el #ee3d36 de marca no llega */

    /* Notas y severidades, en versiones que cumplen contraste sobre papel */
    --pdf-bien: #047857;
    --pdf-regular: #b45309;
    --pdf-mal: #c2410c;
    --pdf-critico: #c9291f;
    --pdf-oportunidad: #0369a1;
  }

  html,
  body {
    background: #fff !important;
    color: var(--pdf-tinta) !important;
    font-size: 10.5pt;
    line-height: 1.5;
  }

  #audResultado {
    display: block !important;
    padding: 0 !important;
  }

  .container {
    max-width: none !important;
    padding: 0 !important;
  }

  /* -----------------------------------------------------
     3. MEMBRETE
     -----------------------------------------------------
     Banda oscura arriba de la primera página: es lo que hace que esto parezca
     un documento de una empresa y no una captura de pantalla. Lleva de quién
     es, de qué web habla y de cuándo — los tres datos sin los cuales un informe
     archivado no sirve de nada seis meses después.
     ----------------------------------------------------- */

  .aud-membrete {
    display: flex !important;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    background: var(--pdf-tinta-fuerte) !important;
    padding: 14pt 16pt;
    margin-bottom: 22pt;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    break-inside: avoid;
  }

  .aud-membrete__marca {
    display: flex;
    align-items: center;
    gap: 8pt;
  }

  /* La misma letra del logotipo del sitio: Poppins 800 en cursiva de verdad. */
  .aud-membrete__wordmark {
    font-family: 'Poppins', var(--font-family-heading), serif;
    font-style: italic;
    font-weight: 800;
    font-size: 17pt;
    line-height: 1;
    color: #fff;
  }

  /* Las dos barras del logotipo. No siguen al tema ni al papel: son identidad. */
  .aud-membrete__barras {
    display: block;
    width: 22pt;
    height: 8pt;
    background:
      linear-gradient(to right, #ee3d36, #f5675f) top left / 100% 2.6pt no-repeat,
      linear-gradient(to right, #ee3d36, #f5675f) bottom left / 62% 2.6pt no-repeat;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .aud-membrete__meta {
    text-align: right;
    font-size: 8pt;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.72);
  }

  .aud-membrete__meta span {
    display: block;
  }

  .aud-membrete__meta span:first-child {
    color: #fff;
    font-weight: var(--font-weight-semibold);
    font-size: 9.5pt;
    word-break: break-all;
  }

  /* -----------------------------------------------------
     4. LA NOTA
     -----------------------------------------------------
     El anillo de la pantalla es un degradado cónico: se imprime mal y en gris
     no dice nada. En papel la nota se cuenta con tipografía, que es lo que
     mejor se reproduce y lo que primero se lee.
     ----------------------------------------------------- */

  .aud-cabecera {
    /* Dos columnas: la nota a la izquierda, la lectura a la derecha. Es la
       lectura clásica de una ficha — el dato duro manda el ojo y el texto lo
       explica. */
    display: grid !important;
    grid-template-columns: auto 1fr;
    column-gap: 22pt;
    align-items: start;
    text-align: left !important;
    background: none !important;
    border: 0 !important;
    border-bottom: 1.5pt solid var(--pdf-tinta-fuerte) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 0 18pt !important;
    margin-bottom: 22pt;
    break-inside: avoid;
    break-after: avoid;
  }

  /* La nota, como número grande y solo. El anillo de pantalla no se imprime;
     el número sí, y es lo primero que se lee. */
  .aud-anillo {
    width: auto !important;
    height: auto !important;
    background: none !important;
    display: block !important;
    padding: 4pt 20pt 0 0;
  }

  .aud-anillo::before {
    display: none !important;
  }

  .aud-anillo__valor {
    display: block;
    font-family: var(--font-family-heading), serif;
    font-size: 52pt !important;
    font-weight: var(--font-weight-bold);
    line-height: 0.85;
    letter-spacing: -0.04em;
    color: var(--pdf-tinta-fuerte) !important;
    white-space: nowrap;
  }

  .aud-anillo__valor > span:last-child {
    font-size: 15pt !important;
    color: var(--pdf-tinta-suave) !important;
    letter-spacing: 0;
    font-weight: var(--font-weight-medium);
  }

  /* La columna derecha: dominio, veredicto, resumen y conteo, apilados. */
  .aud-cabecera > div {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
  }

  .aud-cabecera__dominio {
    order: -1;
    font-size: 8pt !important;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--pdf-tinta-suave) !important;
    margin: 4pt 0 8pt !important;
  }

  .aud-cabecera h2 {
    font-size: 22pt !important;
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--pdf-tinta-fuerte) !important;
    margin: 0 0 6pt !important;
  }

  .aud-cabecera p {
    color: var(--pdf-tinta) !important;
    font-size: 11pt;
    line-height: 1.5;
    /* Medida de lectura: una línea de 20 cm cansa y se pierde el renglón. */
    max-width: 32em;
  }

  .aud-conteo {
    gap: 14pt !important;
    margin-top: 12pt !important;
  }

  .aud-conteo li {
    font-size: 9pt !important;
    color: var(--pdf-tinta-suave) !important;
  }

  .aud-conteo strong {
    color: var(--pdf-tinta-fuerte) !important;
  }

  /* -----------------------------------------------------
     5. ÁREAS
     -----------------------------------------------------
     En pantalla son tarjetas; en papel, una tabla. Seis tarjetas con borde
     ocupan página y media y se leen peor que seis filas alineadas, que es lo
     que permite comparar de un vistazo — que es justo para lo que están.
     ----------------------------------------------------- */

  .aud-areas {
    display: block !important;
    margin: 0 0 24pt !important;
    break-inside: avoid;
  }

  .aud-area {
    display: grid !important;
    grid-template-columns: 1fr 64pt 40pt;
    align-items: center;
    gap: 12pt;
    background: none !important;
    border: 0 !important;
    border-bottom: 0.5pt solid var(--pdf-linea) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 7pt 0 !important;
    break-inside: avoid;
  }

  .aud-area:first-child {
    border-top: 0.5pt solid var(--pdf-linea) !important;
  }

  .aud-area__cabecera {
    display: contents;
  }

  .aud-area__nombre {
    font-size: 10.5pt !important;
    font-weight: var(--font-weight-semibold);
    color: var(--pdf-tinta-fuerte) !important;
  }

  .aud-area__nota {
    order: 3;
    text-align: right;
    font-family: var(--font-family-heading);
    font-size: 13pt !important;
    font-weight: var(--font-weight-bold);
  }

  .aud-area__barra {
    order: 2;
    height: 3pt !important;
    background: #e9ebf0 !important;
    border-radius: 0 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .aud-area__relleno {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* El pie ("3 problemas", "no aplica") pasa a una segunda línea discreta bajo
     el nombre, en vez de robarle sitio a la barra. */
  .aud-area__pie {
    grid-column: 1 / -1;
    order: 4;
    margin: -3pt 0 0 !important;
    font-size: 8pt !important;
    color: var(--pdf-tinta-suave) !important;
  }

  .aud-nota--bien { color: var(--pdf-bien) !important; }
  .aud-nota--regular { color: var(--pdf-regular) !important; }
  .aud-nota--mal { color: var(--pdf-mal) !important; }
  .aud-nota--critico { color: var(--pdf-critico) !important; }

  .aud-relleno--bien { background: var(--pdf-bien) !important; }
  .aud-relleno--regular { background: var(--pdf-regular) !important; }
  .aud-relleno--mal { background: var(--pdf-mal) !important; }
  .aud-relleno--critico { background: var(--pdf-critico) !important; }

  .aud-area--noaplica {
    opacity: 1 !important;
  }

  .aud-area--noaplica .aud-area__nombre,
  .aud-area--noaplica .aud-area__nota {
    color: var(--pdf-tinta-suave) !important;
  }

  /* -----------------------------------------------------
     6. HALLAZGOS
     -----------------------------------------------------
     Cada uno es una unidad de lectura: qué pasa, por qué importa, qué hacer.
     Sin caja ni fondo — el hilo superior basta para separarlos y no convierte
     el documento en una pila de tarjetas.
     ----------------------------------------------------- */

  .aud-seccion-titulo {
    font-size: 8pt !important;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-weight: var(--font-weight-bold);
    color: var(--pdf-tinta-suave) !important;
    margin: 0 0 12pt !important;
    padding-bottom: 6pt;
    border-bottom: 1pt solid var(--pdf-tinta-fuerte);
    break-after: avoid;
    page-break-after: avoid;
  }

  .aud-hallazgos {
    display: block !important;
  }

  .aud-hallazgo {
    background: none !important;
    border: 0 !important;
    border-top: 0.5pt solid var(--pdf-linea) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 12pt 0 !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .aud-hallazgo:first-child {
    border-top: 0 !important;
    padding-top: 0 !important;
  }

  .aud-hallazgo__etiquetas {
    gap: 6pt !important;
    margin-bottom: 5pt !important;
  }

  .aud-chip {
    padding: 1.5pt 6pt !important;
    border-radius: 2pt !important;
    font-size: 6.5pt !important;
    letter-spacing: 0.1em;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Sólidos y no tintados: una trama al 16 % se imprime como un gris sucio. */
  .aud-chip--critico {
    background: var(--pdf-critico) !important;
    color: #fff !important;
  }

  .aud-chip--importante {
    background: var(--pdf-regular) !important;
    color: #fff !important;
  }

  .aud-chip--oportunidad {
    background: var(--pdf-oportunidad) !important;
    color: #fff !important;
  }

  .aud-chip--area {
    background: none !important;
    color: var(--pdf-tinta-suave) !important;
    border: 0.5pt solid var(--pdf-linea);
  }

  .aud-hallazgo h3 {
    font-size: 12.5pt !important;
    line-height: 1.25;
    color: var(--pdf-tinta-fuerte) !important;
    margin: 0 0 3pt !important;
  }

  .aud-hallazgo__detalle {
    color: var(--pdf-carmesi) !important;
    font-size: 9.5pt !important;
    font-weight: var(--font-weight-semibold);
    margin: 0 0 5pt !important;
  }

  .aud-hallazgo__porque {
    color: var(--pdf-tinta) !important;
    font-size: 10pt !important;
    line-height: 1.55;
    max-width: 36em;
    margin: 0 0 8pt !important;
  }

  /* La acción es lo único accionable de todo el bloque, así que es lo único
     que lleva fondo. */
  .aud-hallazgo__accion {
    border-top: 0 !important;
    background: #f5f6f9 !important;
    border-left: 2pt solid var(--pdf-carmesi) !important;
    padding: 7pt 10pt !important;
    color: var(--pdf-tinta) !important;
    font-size: 9.5pt !important;
    line-height: 1.5;
    max-width: 36em;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .aud-hallazgo__accion strong {
    color: var(--pdf-tinta-fuerte) !important;
  }

  .aud-hallazgo__ejemplos {
    color: var(--pdf-tinta-suave) !important;
    font-size: 8pt !important;
    margin-top: 6pt !important;
  }

  /* -----------------------------------------------------
     7. LA HOJA
     ----------------------------------------------------- */

  @page {
    margin: 14mm 15mm 16mm;
  }

  /* El membrete va a sangre en la primera página; las siguientes empiezan
     directamente por el contenido. */
  @page :first {
    margin-top: 12mm;
  }

  /* Ni una línea suelta al principio o al final de una página. */
  p,
  li {
    orphans: 3;
    widows: 3;
  }

  h2,
  h3 {
    break-after: avoid;
    page-break-after: avoid;
  }

  /* Los enlaces del informe pierden el subrayado: en papel no se pulsan y el
     subrayado solo ensucia el renglón. */
  a {
    color: inherit !important;
    text-decoration: none !important;
  }
}

/* -----------------------------------------------------
   RESPONSIVE
   ----------------------------------------------------- */

@media (max-width: 768px) {
  .aud-form {
    flex-direction: column;
    border-radius: var(--border-radius-lg);
    padding: var(--space-md);
  }

  /* En columna, el `align-items: center` de la regla base encoge los hijos al
     ancho de su contenido: el campo se quedaba en 189px al lado de un botón de
     293px y se veían descuadrados. En vertical todo va a ancho completo. */
  .aud-form { align-items: stretch; }

  .aud-form input[type='url'],
  .aud-form input[type='text'] {
    padding: 0.5rem 0;
    width: 100%;
    text-align: center;
  }

  .aud-form button { width: 100%; justify-content: center; }

  /* En columna el prefijo se quedaba solo en su propia línea, encima del
     campo, y parecía un error. El placeholder ya dice que basta el dominio. */
  .aud-form__esquema { display: none; }


  .aud-cabecera {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    padding: var(--space-xl);
  }

  .aud-conteo { justify-content: center; }
  .aud-cta h2 { font-size: var(--font-size-2xl); }
}

/* El sistema del usuario lleva reduce-motion activo: se conservan los cambios
   de estado, pero sin transiciones que se arrastren. */
@media (prefers-reduced-motion: reduce) {
  .aud-progreso__relleno,
  .aud-area__relleno,
  .aud-form,
  .aud-form button,
  .aud-form__flecha,
  .aud-paso,
  .aud-paso__marca,
  .aud-paso__marca::after,
  .aud-boton-grande {
    transition: none;
  }

  /* El latido de la marca activa es una animación en bucle: fuera. El estado
     se sigue distinguiendo por color y por el punto interior. */
  .aud-paso--activo .aud-paso__marca {
    animation: none;
  }

  /* Los puntitos también son un bucle. Se quedan visibles pero quietos: el
     paso activo se sigue marcando con opacidad, solo sin el rebote. */
  .aud-paso__puntos,
  .aud-paso__puntos i {
    transition: none;
    animation: none;
  }
}