/* =============================================================
   930 AutoGest — Propuestas visuales de la auditoría integral
   (2026-09-28, apartado 7.3), hechas el 2026-10-05 a petición de Manu.

   En una hoja aparte, cargada DETRÁS de main-v55.css, para no tener que
   renombrar la hoja principal (y sus cuatro referencias) por unos ajustes
   que se leen mejor juntos. Cada bloque dice a qué propuesta responde.
   Medido a 375 y a 1440 px con scripts/capturas-comparar.mjs.
   ============================================================= */

/* ---------- V7 · Cabecera móvil -------------------------------
   · La lupa era el único icono sin recuadro: ahora lleva el mismo filete
     que la cuenta, el carrito y el menú.
   · La cabecera baja de 72 a 64 px: los controles siguen en 44x44 y
     quedan 10 px de aire arriba y abajo. El desplegable se ajusta solo
     (usa --header-height).
   · Sin la franja blanca de 24 px entre la cabecera y el hero oscuro: era
     el relleno superior de .hero, que en móvil no hace falta porque el
     fondo oscuro empieza justo debajo. */
@media (max-width: 767px) {
  :root { --header-height: 64px; }
}
@media (min-width: 360px) and (max-width: 1023.98px) {
  .header-actions .ag930-search-toggle {
    border: 1px solid var(--border-plata);
    border-radius: 4px;
  }
}
@media (max-width: 959.98px) {
  .hero { padding-top: 0; }
}

/* ---------- V6 · Barra de confianza del hero en una fila ----------
   A partir de 1100 px las cuatro tarjetas cabían en ~490 px y partían
   palabras con guion («Acompaña-miento», «desplaza-mientos»). Ahora van
   en una fila de todo el ancho, debajo del hero (template-parts/hero.php
   pinta la barra dos veces y aquí se enseña solo una: la otra va con
   display:none y no la lee ningún lector de pantalla). Sin guionado: ya
   no hace falta partir nada. */
.trust-bar--fila { display: none; }
@media (min-width: 1100px) {
  .hero .hero-text .trust-bar { display: none; }
  .hero .trust-bar--fila {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-md);
    margin-top: var(--space-lg);
    padding-top: var(--space-md);
    border-top: 1px solid var(--border-subtle);
  }
  .hero .trust-bar--fila .trust-item strong,
  .hero .trust-bar--fila .trust-item span {
    -webkit-hyphens: manual;
    hyphens: manual;
  }
  .hero .trust-bar--fila .trust-item strong { font-size: var(--fs-body, 1rem); }
  .hero .trust-bar--fila .trust-item span { font-size: var(--fs-small); }
}

/* ---------- V4 · Tarjetas de servicio compactas en el móvil ----------
   Cada tarjeta medía ~412 px de alto a 375 px: seis tarjetas, dos
   pantallas y media. Por debajo de 640 px la foto pasa a miniatura a la
   izquierda y el texto a la derecha: ~150 px por tarjeta. */
@media (max-width: 639.98px) {
  .card-grid.cols-6 .service-card:has(.service-card-thumb) {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    grid-template-areas:
      "foto titulo"
      "foto texto"
      "foto enlace";
    column-gap: var(--space-sm);
    align-items: start;
    padding: var(--space-sm);
  }
  /* Tamaño fijo, no `aspect-ratio`: con la proporción y `stretch`, el
     alto de la tarjeta empujaba el ancho de la foto por encima de su
     columna y la foto tapaba el texto (visto en la primera prueba). */
  .card-grid.cols-6 .service-card .service-card-thumb {
    grid-area: foto;
    width: 104px;
    height: 104px;
    margin: 0;
    aspect-ratio: auto;
    border-radius: calc(var(--radius-card) - 2px);
    overflow: hidden;
  }
  .card-grid.cols-6 .service-card .service-card-thumb :is(picture, img) {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
  }
  .card-grid.cols-6 .service-card .service-card-heading { grid-area: titulo; margin-bottom: 0.25rem; }
  .card-grid.cols-6 .service-card h3 { font-size: 1.05rem; line-height: 1.25; }
  .card-grid.cols-6 .service-card p { grid-area: texto; margin-bottom: 0.35rem; line-height: 1.4; }
  .card-grid.cols-6 .service-card .card-link { grid-area: enlace; }
}

/* ---------- V5 · Rejilla de trámites de la DGT ----------
   Diez tarjetas de una en una en el móvil (~120 px cada una con su
   hueco). Ahora dos columnas compactas desde el principio y cinco en
   escritorio: dos filas de cinco en vez de tres filas de cuatro con un
   hueco al final. */
.dgt-block .card-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-sm);
}
.dgt-block .service-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.5rem;
  padding: var(--space-sm);
}
.dgt-block .service-card h3 {
  font-size: 0.98rem;
  line-height: 1.25;
  overflow-wrap: break-word;
}
@media (min-width: 960px) {
  .dgt-block .card-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--space-md);
  }
  .dgt-block .service-card { padding: var(--space-md); }
  .dgt-block .service-card h3 { font-size: var(--fs-h3); }
}

/* ---------- V8 · Contrastes ----------
   · Los ✓ rojos (#D40000) sobre el grafito de «Mucho más que trámites»
     daban menos de 3:1. El rojo claro que ya usa el hero oscuro
     (#FF6A6A) da más de 5:1 sobre ese fondo.
   · El destello del botón del hero acababa en un filo BLANCO: sobre la
     mitad clara del hero de escritorio se veía como un borde suelto. Se
     queda en los rojos y naranjas del destello normal. */
.dark-block li .icon { color: #FF6A6A; }
.hero .btn-primary.is-destello::before {
  background: conic-gradient(from var(--ag930-giro), transparent 0deg 210deg, rgba(212, 0, 0, 0.3) 270deg, #ff7a59 330deg, rgba(212, 0, 0, 0.25) 345deg, transparent 360deg);
}

/* ---------- V10 · Pie de página ----------
   El logotipo iba en una caja blanca sobre el pie oscuro (el TODO del
   footer.php lo dejaba así «de momento»). Ahora es el logotipo en
   negativo (assets/images/logo-930-negativo-480w.png, blanco sobre
   transparente) y un poco más grande. */
.footer-brand img.footer-logo {
  height: 64px;
  width: auto;
  background: none;
  padding: 0;
  border-radius: 0;
}