/* ============================================================================
   PÁGINAS INFORMATIVAS — grupo «Sobre nosotros»
   (sobre-driver-solution · manuales · tacógrafo · control de jornada ·
    calculadora Verifactu · trabaja con nosotros · FAQ)

   Objetivos (orden de Pedro · 2026-06-08):
     1) ANCHO UNIFORME en toda la página = el del index.  Se acaban las columnas
        de prosa sueltas a 760 / 800 / 980 px que se desalineaban del título y de
        las rejillas de tarjetas.  Todo respira con los mismos márgenes.
     2) APROVECHAR EL ANCHO del monitor con rejillas (no con líneas de texto
        kilométricas): las tarjetas llenan el ancho; la prosa llena su contenedor.
     3) MENOS SCROLL: ritmo vertical compacto y separaciones (gaps) unificadas.

   Ámbito: body.ds-info-page  →  NO afecta a las herramientas ni a los portales.
   Se carga DESPUÉS de design-system/product/home para poder ajustar sin
   !important (gana por especificidad: body.ds-info-page …).
   ============================================================================ */

/* 1) RITMO VERTICAL COMPACTO  ----------------------------------------------- */
/*    El .ds-section base llega a 92px arriba y abajo → demasiado aire y mucho
      scroll en páginas de lectura.  Lo igualamos a un ritmo ajustado, idéntico
      en secciones normales y «tight», para que todos los bloques se separen lo
      mismo (coherencia con la home). */
body.ds-info-page main > .ds-section,
body.ds-info-page main > .ds-section--tight,
body.ds-info-page main.ds-section,
body.ds-info-page main.ds-section--tight {
  padding-block: clamp(1.4rem, 3vw, 2.4rem);
}
body.ds-info-page main > .ds-product-hero {
  padding: clamp(1.75rem, 3.5vw, 2.9rem) 0 clamp(1.2rem, 2.5vw, 1.8rem);
}

/* 2) ANCHO DE PROSA UNIFORME  ----------------------------------------------- */
/*    Los subtítulos/intros llenan el ancho de su contenedor (como en el index),
      en vez de toparse a 760px y quedar más estrechos que el título y las
      tarjetas que tienen debajo. */
body.ds-info-page .ds-subtitle { max-width: none; }

/*    Las citas y listas de prosa también comparten el ancho del contenedor. */
body.ds-info-page main blockquote.ds-card { max-width: none; }

/* 3) SEPARACIONES (GAPS) UNIFICADAS  ---------------------------------------- */
body.ds-info-page .ds-stack { gap: var(--ds-gap); }
body.ds-info-page .ds-grid  { gap: var(--ds-gap); }
/*    Aire entre el título de sección y su rejilla/lista: constante y ajustado. */
body.ds-info-page main > .ds-section .ds-grid,
body.ds-info-page main > .ds-section--tight .ds-grid,
body.ds-info-page main > .ds-section .ds-stack,
body.ds-info-page main > .ds-section--tight .ds-stack {
  margin-top: clamp(1rem, 2vw, 1.5rem);
}

/* 4) IMÁGENES DE APOYO MÁS CONTENIDAS  -------------------------------------- */
/*    Las fotos llegaban a 920px y dominaban la página.  Las acotamos a un
      tamaño más editorial, centradas. */
body.ds-info-page .ds-product-media { max-width: 600px; }

/* 5) APROVECHAR EL ANCHO: bloque texto + foto EN PARALELO  ------------------ */
/*    En las secciones marcadas .ds-info-split el texto y la foto van uno al lado
      del otro en desktop (en vez de apilados) → se usa el ancho y se reduce el
      scroll.  En móvil se apilan. */
@media (min-width: 900px) {
  body.ds-info-page .ds-info-split {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    align-items: center;
    gap: clamp(1.5rem, 4vw, 3rem);
    text-align: left;
  }
  body.ds-info-page .ds-info-split > *:not(.ds-product-media) {
    max-width: none;
    margin-inline: 0;
  }
  body.ds-info-page .ds-info-split .ds-product-media {
    margin-inline: 0;
    max-width: 100%;
  }
}

/* 6) LISTAS LARGAS EN DOS COLUMNAS (menos scroll)  -------------------------- */
/*    Una lista de viñetas de 6 puntos a una columna obliga a hacer scroll; en
      desktop se reparte en dos columnas. */
@media (min-width: 900px) {
  body.ds-info-page ul.ds-stack {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(1.5rem, 4vw, 3rem);
  }
}