/* ============================================================
   ESTANDARTE — page-productos.css
   Productos y Servicios: páginas informativas de catálogo (ES-38).
   ============================================================ */

/* ----------------------------------------------------------
   1. Catálogo lateral + contenido
   ---------------------------------------------------------- */
.prod-sec { background: #fafafa; padding-block: 50px 100px; }
.prod-sec__inner { display: flex; gap: 40px; align-items: flex-start; }

.prod-side { flex: 0 0 320px; max-width: 320px; padding-right: 40px; align-self: stretch; }
.prod-side__sticky { position: sticky; top: 140px; display: flex; flex-direction: column; gap: 30px; }
.prod-side__label {
    margin: 0;
    color: #0e1946;
    font-weight: var(--fw-black);
    font-size: var(--fs-18);
    text-transform: uppercase;
}
.prod-side__group { display: flex; flex-direction: column; gap: 10px; }
.prod-side__group + .prod-side__group { padding-top: 30px; border-top: 1px solid #dadada; }
.prod-side__group-title { margin: 0; color: #0e1946; font-weight: var(--fw-black); font-size: var(--fs-14); letter-spacing: 0.56px; text-transform: uppercase; }
.prod-side__group-title a { color: inherit; }
.prod-side__group-title a:hover { color: var(--color-blue); }
.prod-side__group-title.is-active { color: var(--color-blue); }
.prod-side__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.prod-side__item a { color: #0e1946; font-size: var(--fs-18); }
.prod-side__item a:hover { color: var(--color-blue); }
.prod-side__item.is-active a { color: var(--color-blue); }

.prod-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 40px; }
/* Listado general: separación entre grupos */
.prod-archive-group { display: flex; flex-direction: column; gap: 40px; }
.prod-page--archive .prod-main { gap: 60px; }
/* Título en caja amarilla */
.prod-main__title { margin: 0; }
.prod-main__title span {
    display: inline-block;
    padding: 6px 10px;
    background: var(--color-yellow);
    color: #0e1946;
    font-weight: var(--fw-heavy);
    font-size: var(--fs-36);
    line-height: 40px;
    text-transform: uppercase;
}
.prod-main__copy { color: #0e1946; font-size: var(--fs-20); line-height: 1.4; }
.prod-main__copy p { margin: 0 0 1em; }
.prod-main__copy > *:last-child { margin-bottom: 0; }

/* ----------------------------------------------------------
   2. Grid de tiles
   ---------------------------------------------------------- */
.prod-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.prod-card { display: flex; flex-direction: column; gap: 20px; }
.prod-card__media {
    display: block;
    height: 450px;
    border-radius: var(--radius);
    overflow: hidden;
    background: #ececec;
}
.prod-card__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.prod-card__bar { display: block; width: 200px; height: 3px; background: var(--color-blue); }
.prod-card__name { color: #0e1946; font-weight: var(--fw-black); font-size: var(--fs-20); line-height: 20px; }

/* ----------------------------------------------------------
   3. Logos de instituciones + banda de normativas (en la columna)
   ---------------------------------------------------------- */
.prod-normativas { display: flex; flex-direction: column; }
.prod-logos {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: nowrap; /* siempre en una sola fila */
    align-items: center;
    justify-content: center;
    gap: 55px;
    padding: 30px 48px;
    background: var(--color-white);
    border-radius: var(--radius);
    box-shadow: 0 4px 7px rgba(185, 185, 185, 0.25);
}
/* Celdas flexibles: cada logo se escala para que los 5 quepan en la fila */
.prod-logos__item { flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; }
/* Tamaños fieles al Figma (hasta ~76px de alto, respetando proporción) */
.prod-logos__img { max-height: 76px; max-width: 100%; width: auto; object-fit: contain; display: block; }
.prod-band {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 50px 38px;
    border-radius: var(--radius);
}
/* Variantes de color (por producto) */
.prod-band--blue { background: var(--color-blue); }
.prod-band--navy { background: #0e1946; }
.prod-band--yellow { background: var(--color-yellow); }
.prod-band__text {
    margin: 0;
    max-width: 966px;
    font-size: 19px;
    line-height: 1.5;
    text-align: justify;
}
.prod-band--blue .prod-band__text,
.prod-band--navy .prod-band__text { color: var(--color-white); }
.prod-band--yellow .prod-band__text { color: #0e1946; }
.prod-band__text strong { font-weight: var(--fw-heavy); }

/* ----------------------------------------------------------
   4. Responsive
   ---------------------------------------------------------- */
@media (max-width: 1180px) {
    .prod-grid { grid-template-columns: repeat(2, 1fr); }
    .prod-card__media { height: 360px; }
}

@media (max-width: 992px) {
    .prod-sec { padding-block: 40px 80px; }
    .prod-sec__inner { flex-direction: column; align-items: stretch; gap: 32px; }
    /* Catálogo lateral pasa arriba, en tarjeta clara con grupos en fila */
    .prod-side {
        flex: none;
        max-width: none;
        padding: 20px 24px;
        background: var(--color-white);
        border-radius: var(--radius);
        box-shadow: 0 4px 7px rgba(185, 185, 185, 0.15);
    }
    .prod-side__sticky { position: static; gap: 20px; }
    .prod-side__group + .prod-side__group { padding-top: 20px; }
    /* Lista vertical: un ítem por línea (no en filas) */
    .prod-side__list { flex-direction: column; gap: 10px; }
    .prod-side__item a { font-size: var(--fs-16); }

    .prod-logos { gap: 24px 48px; padding: 26px 32px; }
    .prod-logos__img { max-height: 64px; max-width: 150px; }
    .prod-band { padding: 40px 32px; }
    .prod-band__text { text-align: left; }
}

@media (max-width: 768px) {
    .prod-sec { padding-block: 32px 60px; }
    .prod-sec__inner { gap: 24px; }
    .prod-main { gap: 24px; }
    .prod-main__title span { font-size: var(--fs-24); line-height: 1.2; }
    .prod-main__copy { font-size: var(--fs-18); }
    .prod-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
    .prod-card { gap: 10px; }
    .prod-card__media { height: 200px; }
    .prod-card__bar { width: 100px; }
    .prod-card__name { font-size: var(--fs-16); line-height: 1.3; }

    .prod-logos { gap: 16px 32px; padding: 20px; }
    .prod-logos__img { max-height: 40px; max-width: 88px; }
    .prod-band { padding: 28px 20px; }
    .prod-band__text { font-size: var(--fs-16); }
}

/* Logos en móvil: grid de 2 columnas centrado; el logo sobrante (impar) ocupa
   toda la fila centrado, para que no quede uno suelto a un lado. */
@media (max-width: 600px) {
    .prod-logos {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px 16px;
        padding: 22px 16px;
    }
    .prod-logos__item { width: 100%; display: flex; justify-content: center; }
    .prod-logos__item:last-child:nth-child(odd) { grid-column: 1 / -1; }
    .prod-logos__img { max-height: 58px; max-width: 140px; }
}

@media (max-width: 480px) {
    .prod-main__title span { font-size: var(--fs-20); }
    .prod-main__copy { font-size: var(--fs-16); }
    /* 2 columnas (no 1) para que las imágenes no queden enormes */
    .prod-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .prod-card__media { height: 170px; }
    .prod-card__bar { width: 80px; }
    .prod-card__name { font-size: var(--fs-14); }
    .prod-side__list { gap: 8px; }
}