/*
 * anchos.css — sistema común de anchos y ritmo vertical (2026-10-21)
 *
 * Tres niveles (el ancho incluye el padding lateral; box-sizing: border-box).
 * «Estándar» comparte el marco de 72rem con la tienda para que migas y títulos
 * arranquen en la misma vertical; se diferencia en que el texto corrido va a medida:
 *   --lw-ancho     72rem (1152px)  inicio, tienda, marcas, fichas de producto, blog,
 *                                  opiniones, buscador, carrito, índice de guías,
 *                                  índice de servicios, contacto.
 *   (excepción: el comparador de bombines mantiene 80rem por su tabla de 5 columnas)
 *   --lw-estandar  72rem (1152px)  servicios, landings (particulares/comunidades/empresas),
 *                                  puertas acorazadas/CABMA/Eurosegur, puertas de comunidad,
 *                                  zonas (/cerrajero/*), taller de Rubí, copias de llaves,
 *                                  trabajos, empresa.
 *   --lw-lectura   48rem (768px)   textos legales y guías de lectura larga.
 *
 * Dentro de cualquier ancho, el texto corrido no pasa de --lw-measure (46rem, el mismo
 * ancho de línea que ya tenían los legales y las guías). Galerías, tarjetas, rejillas,
 * tablas, FAQ y llamadas a la acción usan el ancho completo del contenedor.
 *
 * Páginas nuevas: <div class="lw-wrap lw-wrap--estandar lw-page"> … </div>
 *   (lw-wrap = ancho; añade --estandar o --lectura) y .lw-prose para limitar texto.
 *
 * Solo CSS: no cambia textos, ni datos de FacturaScripts, ni marcas de edición.
 */
:root {
  --lw-ancho: 72rem;
  --lw-estandar: 72rem;  /* mismo marco que tienda/inicio; lo distingue la medida del texto */
  --lw-lectura: 48rem;
  --lw-measure: 46rem;
  --lw-pad: 1rem;
  --lw-top: 2.25rem;      /* espacio sobre migas/título */
  --lw-hero-bottom: 2rem;
  --lw-section: 2.25rem;  /* separación entre secciones */
  --lw-h1: clamp(1.8rem, 3vw, 2.4rem);
  --lw-h2: 1.35rem;
}
@media (max-width: 767px) {
  :root { --lw-top: 1.35rem; --lw-hero-bottom: 1.15rem; --lw-section: 1.75rem; }
}

/* ---------- utilidades para páginas nuevas ---------- */
.lw-wrap { box-sizing: border-box; width: 100%; max-width: var(--lw-ancho); margin-inline: auto; padding-inline: var(--lw-pad); }
.lw-wrap--estandar { max-width: var(--lw-estandar); }
.lw-wrap--lectura { max-width: var(--lw-lectura); }
.lw-page { padding-top: var(--lw-top); padding-bottom: 4rem; }
.lw-page > h1, .lw-page h1.lw-title { font-size: var(--lw-h1); line-height: 1.15; }
.lw-prose > :is(p, ul, ol, blockquote, h3), .lw-measure { max-width: var(--lw-measure); }

/* ---------- ANCHO (72rem) ---------- */
.contact-page { max-width: var(--lw-ancho); padding-left: var(--lw-pad); padding-right: var(--lw-pad); }
.cart-page { padding-left: var(--lw-pad); padding-right: var(--lw-pad); }
.services-route > main.max-w-7xl { max-width: var(--lw-ancho); }
/* descripción de producto: el texto a medida legible; tablas e imágenes, ancho completo */
.product-copy > :is(p, ul, ol, h2, h3, h4, blockquote) { max-width: var(--lw-measure); }

/* ---------- ESTÁNDAR (72rem, texto a 46rem) ---------- */
.service-brief__wrap,
.service-brief__body,
.service-area__inner,
.service-area__body,
.local-hq__wrap,
.local-hq__body,
.key-copy__inner,
.key-copy__body,
.empresa,
.services-route > main.max-w-6xl {
  box-sizing: border-box;
  max-width: var(--lw-estandar);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--lw-pad);
  padding-right: var(--lw-pad);
}
.service-brief__toc.service-brief__wrap,
.local-hq__toc.local-hq__wrap,
.service-area__toc.service-area__inner,
.key-copy__toc.key-copy__inner { padding-left: var(--lw-pad); padding-right: var(--lw-pad); }

/* cabecera (migas + antetítulo + h1 + entradilla) igual en todas */
.service-brief__hero,
.service-area__hero,
.local-hq__hero,
.key-copy__hero { padding-top: var(--lw-top); padding-bottom: var(--lw-hero-bottom); }
.service-brief__hero h1,
.service-area__hero h1,
.local-hq__hero h1,
.key-copy__hero h1,
.empresa > h1 { font-size: var(--lw-h1); line-height: 1.15; }
.service-brief__lead,
.service-area__lead,
.local-hq__lead,
.key-copy__lead { max-width: var(--lw-measure); }

/* cuerpo: ritmo entre secciones */
.service-brief__body { padding-top: var(--lw-section); }
.service-brief__body > section > h2,
.service-brief__body > .world-links > h2 { margin-top: var(--lw-section); font-size: var(--lw-h2); }
.service-brief__body > section:first-child > h2 { margin-top: 0; }
.service-area__body,
.key-copy__body,
.local-hq__body { gap: var(--lw-section); padding-top: var(--lw-section); }
:is(.service-area__body, .key-copy__body, .local-hq__body) > section > h2 { font-size: var(--lw-h2); }
.empresa { padding-top: var(--lw-top); padding-bottom: 4rem; }
.empresa > h2, .empresa > section > h2 { font-size: var(--lw-h2); }

/* texto corrido a medida legible dentro del ancho estándar */
:is(.service-brief__body, .service-area__body, .local-hq__body, .key-copy__body) > section > :is(p, ul:not([class]), ol:not([class]), h3),
:is(.service-brief__body, .service-area__body, .local-hq__body, .key-copy__body) > :is(p, ul:not([class]), ol:not([class])),
.empresa > :is(p, ul:not([class]), ol:not([class])),
.empresa > section > :is(p, ul:not([class]), ol:not([class])),
.page-main .lc-faq__a > p,
.service-brief__cta > p,
.page-main .lc-figs__note { max-width: var(--lw-measure); }

/* listas de tarjetas y de enlaces: con más ancho se reparten en columnas */
@media (min-width: 900px) {
  .service-brief__jobs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  /* 2, 3 o 4 opciones ocupan una sola fila, sin tarjeta suelta */
  .service-brief__options { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
}
@media (min-width: 768px) {
  .service-area__services,
  .service-brief__systems { grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); column-gap: 1.5rem; }
}

/* galerías de modelos (puertas de comunidad…): dentro del contenedor, sin sangría ni desborde,
   y 5 por fila en escritorio. La página CABMA tiene su propia galería y queda fuera (:not). */
.page-main .service-brief:not(.cabma-page) .service-brief__body .svc-gallery { margin-inline: 0; }
@media (min-width: 1200px) {
  .page-main .service-brief:not(.cabma-page) .service-brief__body .svc-gallery__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* preguntas frecuentes (<x-faq-list>, faq.css): la lista usa el ancho del contenedor de cada nivel;
   la respuesta, a medida de lectura (regla de arriba: .lc-faq__a > p). Nada más: el aspecto es de faq.css. */

/* ===================== CABMA (aislado) =====================
 * Única regla propia de /servicios/puertas-cabma: el ancho del contenedor, igual que el resto del nivel
 * estándar (producción la dejó en 68rem + 2,5rem desde cabma-modelos.css). No toca rejillas, índice,
 * galería, tabla ni tarjetas de modelos: eso es del paquete del visor PDF / cabma-modelos.css.
 * Para dejar CABMA con su ancho propio basta con borrar este bloque. */
.page-main .cabma-page .service-brief__wrap,
.page-main .cabma-page .service-brief__body {
  max-width: var(--lw-estandar);
  padding-left: var(--lw-pad);
  padding-right: var(--lw-pad);
}
/* =================== fin CABMA (aislado) =================== */

/* ---------- LECTURA (48rem) ---------- */
.legal-doc,
.page-main > article.max-w-3xl {
  box-sizing: border-box;
  max-width: var(--lw-lectura);
  padding-left: var(--lw-pad);
  padding-right: var(--lw-pad);
  padding-top: var(--lw-top);
}
.legal-doc h1,
.page-main > article.max-w-3xl > h1 { font-size: var(--lw-h1); line-height: 1.15; }
.legal-doc h2 { font-size: var(--lw-h2); margin-top: var(--lw-section); }
.page-main > article.max-w-3xl h2.text-2xl { font-size: var(--lw-h2); }

/* ---------- migas: mismo hueco bajo ellas en todas las páginas ---------- */
.page-main .breadcrumbs { margin-bottom: .9rem; }