/* ============================================================================
   modulo.css — páginas /modulos/<slug> y bloque de clientes. Solo tokens de sitio.css (marca JFG); se carga
   después de inicio.css y reutiliza sus componentes (hero, beneficio, linea-tiempo, acordeon).
   ============================================================================ */

/* Hero de módulo: sin maqueta, una sola columna */
.hero--modulo { padding-bottom: var(--e-12); }
.hero__texto--modulo { max-width: 48rem; }
.hero__texto--modulo .hero__eyebrow { display: inline-flex; align-items: center; gap: var(--e-2); }
.hero__texto--modulo .hero__subtitulo { max-width: 42rem; }

/* Migas de pan */
.migas { margin-bottom: var(--e-6); }
.migas ol { display: flex; flex-wrap: wrap; gap: var(--e-2); list-style: none; font-size: var(--t-body-s); color: var(--c-texto-2); }
.migas li { display: inline-flex; align-items: center; gap: var(--e-2); }
.migas li + li::before { content: "/"; color: var(--c-borde-fuerte); }
.migas a { color: var(--c-enlace); }
.migas a:hover { color: var(--c-enlace-hover); }

/* Copiar enlace */
.compartir { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3) var(--e-5); margin-top: var(--e-6); }
.boton-texto {
    display: inline-flex; align-items: center; gap: var(--e-2); min-height: var(--toque-min); padding: 0;
    background: none; border: 0; color: var(--c-enlace); font: inherit; font-weight: 600; cursor: pointer;
    text-decoration: underline; text-underline-offset: 3px;
}
.boton-texto:hover { color: var(--c-enlace-hover); }
.compartir__utm { display: inline-flex; align-items: center; gap: var(--e-2); min-height: var(--toque-min); color: var(--c-texto-2); cursor: pointer; }
.compartir__utm input { width: 1.125rem; height: 1.125rem; accent-color: var(--c-acento); }

/* Tarjetas de bloque */
.tarjetas-modulo { list-style: none; display: grid; gap: var(--e-4); }
@media (min-width: 40em) { .tarjetas-modulo { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64em) {
    .tarjetas-modulo { gap: var(--e-6); }
    .tarjetas-modulo--funcionalidades, .tarjetas-modulo--casos { grid-template-columns: repeat(3, 1fr); }
    .tarjetas-modulo--problemas, .tarjetas-modulo--beneficios { grid-template-columns: repeat(4, 1fr); }
}
.tarjetas-modulo .beneficio h3 { font-size: 1.125rem; }

/* Clientes de referencia */
.clientes__lista {
    list-style: none; display: grid; gap: var(--e-3);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
}
.clientes__item {
    display: flex; align-items: center; justify-content: center; min-height: 5.5rem; padding: var(--e-4) var(--e-5);
    background: var(--c-superficie); border: 1px solid var(--c-borde); border-radius: var(--r-4); text-align: center;
}
.clientes__nombre { font-family: var(--f-titulo); font-weight: 600; color: var(--c-texto); line-height: 1.3; }
.clientes__logo { max-width: 100%; max-height: 3.5rem; width: auto; height: auto; object-fit: contain; }

/* Llamada final */
.cta-modulo__contenido { text-align: center; }
.cta-modulo .seccion__titulo::after { margin-inline: auto; }
.cta-modulo__acciones { justify-content: center; }
.cta-modulo .btn--whatsapp { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .45); }

/* Módulos relacionados */
.relacionados { list-style: none; display: grid; gap: var(--e-4); }
@media (min-width: 48em) { .relacionados { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--e-6); } }
.relacionado { position: relative; }
.relacionado h3 { margin-top: var(--e-4); margin-bottom: var(--e-2); font-size: 1.125rem; }
.relacionado__enlace { color: var(--c-texto); text-decoration: none; }
.relacionado__enlace::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }   /* toda la tarjeta es clicable */
.relacionado__enlace:focus-visible { outline: none; }
.relacionado:focus-within { outline: 3px solid var(--c-foco); outline-offset: 2px; }
.relacionado--todos { background: var(--c-insight); border-color: transparent; }
.relacionado--todos h3 { margin-top: 0; }

/* Libro de Reclamaciones (/libro-de-reclamaciones) */
.reclamo__proveedor { display: grid; gap: var(--e-3); margin: var(--e-6) 0; }
@media (min-width: 40em) { .reclamo__proveedor { grid-template-columns: repeat(2, 1fr); } }
.reclamo__proveedor dt, .reclamo__datos dt { font-family: var(--f-mono); font-size: var(--t-caption); letter-spacing: .06em; text-transform: uppercase; color: var(--c-texto-2); }
.reclamo__proveedor dd, .reclamo__datos dd { margin: 0; }
.reclamo__datos { display: grid; gap: var(--e-3); }
.reclamo__texto { white-space: pre-line; }
.reclamo .resumen-errores { margin-bottom: var(--e-6); }
.reclamo .resumen-errores ul { margin: var(--e-2) 0 0; padding-left: var(--e-5); }
.reclamo__grupo { border: 0; padding: 0; margin: 0; display: grid; gap: var(--e-5); min-width: 0; }
.reclamo__grupo legend { font-family: var(--f-titulo); font-weight: 600; font-size: 1.125rem; margin-bottom: var(--e-4); }
.reclamo__etiqueta { font-weight: 600; font-size: var(--t-body-m); }
.reclamo__opciones { display: grid; gap: var(--e-3); }
.reclamo__opciones label { display: flex; gap: var(--e-3); align-items: flex-start; font-weight: 400; cursor: pointer; }
.reclamo__opciones input { width: 1.25rem; height: 1.25rem; margin-top: 2px; flex: none; accent-color: var(--indigo); }
.reclamo__leyendas { padding-left: var(--e-5); }
.reclamo__leyendas li { font-size: var(--t-body-s); line-height: var(--t-body-s-lh); }
.reclamo__acciones { margin-top: var(--e-8); }
/* Logos de clientes sobre fondo marino: varios logos son claros o dorados y no se leen sobre blanco */
.clientes__item--logo { background: var(--azul-espacial, #0B1526); border-color: transparent; }
.reclamo__grupo legend { display: block; width: 100%; max-width: 100%; white-space: normal; overflow-wrap: anywhere; padding: 0; }