/* ============================================================
   ESTANDARTE — page-descargables.css
   Página Descargables (ES-37): brochure, catálogos, normativas.
   ============================================================ */

/* Bloque intro (título amarillo + copy + botón, con imagen opcional) */
.desc-brochure { background: var(--color-white); padding-block: 70px; }
.desc-cat { background: #fafafa; padding-block: 80px; }
.desc-nor { background: var(--color-white); padding-block: 80px; }

/* 680 (texto) + 156 (gap Figma) + 320 (imagen) = 1156. El gap es fijo: 156px. */
.desc-block__inner {
    max-width: 1156px;
    margin-inline: auto;
    display: flex;
    gap: 156px;
    align-items: center;
    justify-content: flex-start;
}
.desc-cat .desc-block__inner { max-width: 1161px; gap: 280px; } /* 680 + 280 + 201 (Figma) */
.desc-block__body {
    flex: 0 1 680px;
    max-width: 680px;
    min-width: min-content; /* evita que el título en una línea se salga */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;
}
.desc-block__body--full { max-width: 1160px; flex: 1 1 auto; margin-inline: auto; }
.desc-block__title {
    align-self: flex-start;
    margin: 0;
    padding: 10px 20px;
    background: var(--color-yellow);
    color: #00032f;
    font-weight: var(--fw-black);
    font-size: 48px;
    line-height: normal;
    text-transform: uppercase;
    white-space: nowrap; /* el título va en una sola línea */
}
.desc-block__copy { margin: 0; max-width: 680px; color: #00032f; font-size: var(--fs-18); line-height: 1.5; }
.desc-block__media { flex: none; width: 320px; }
.desc-block__media--sm { width: 201px; }
/* Imagen completa (sin recorte): proporción natural, con el ancho acotado */
.desc-block__img { display: block; width: 100%; height: auto; max-height: 460px; object-fit: contain; border-radius: var(--radius); }

/* Filas de descarga (zebra) */
.desc-rows { max-width: 1160px; margin: 40px auto 0; }
.desc-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    padding: 32px 60px;
    background: var(--color-white);
}
.desc-row:nth-child(even) { background: #f6f6f6; }
/* Normativas: el intercalado arranca en #f6f6f6 (Figma) */
.desc-nor .desc-row:nth-child(odd) { background: #f6f6f6; }
.desc-nor .desc-row:nth-child(even) { background: var(--color-white); }
.desc-row__title {
    margin: 0;
    color: var(--color-blue);
    font-weight: var(--fw-heavy);
    font-size: var(--fs-24);
    line-height: 1.4;
    text-transform: uppercase;
}
.desc-row__btn { flex: none; }
.desc-row__btn.is-disabled { opacity: 0.5; pointer-events: none; }

/* ----------------------------------------------------------
   Responsive
   ---------------------------------------------------------- */
/* El padding lateral de 100px no deja espacio para los 156px de gap en
   monitores < 1400px; aquí se reduce para respetar el diseño. */
@media (max-width: 1400px) {
    .desc-brochure > .container,
    .desc-cat > .container,
    .desc-nor > .container { padding-inline: 40px; }
}

/* Por debajo de este ancho ya no caben texto + 156px + imagen: se apila. */
@media (max-width: 1180px) {
    .desc-brochure,
    .desc-cat,
    .desc-nor { padding-block: 60px; }
    .desc-block__inner { flex-direction: column; align-items: stretch; gap: 40px; }
    .desc-cat .desc-block__inner { gap: 40px; }
    /* flex: none — en columna, el flex-basis de 680px se volvería ALTURA */
    .desc-block__body { flex: none; min-width: 0; max-width: none; }
    .desc-block__body--full { flex: none; }
    .desc-block__media,
    .desc-block__media--sm { width: 100%; max-width: 300px; margin-inline: auto; } /* centrada al apilarse */
    .desc-block__title { font-size: 36px; white-space: normal; }
    .desc-rows { margin-top: 32px; }
    .desc-row { padding: 28px 40px; }
}

@media (max-width: 768px) {
    .desc-brochure,
    .desc-cat,
    .desc-nor { padding-block: 48px; }
    .desc-block__title { font-size: 30px; white-space: normal; } /* en móvil sí puede partirse */
    .desc-block__media,
    .desc-block__media--sm { max-width: 260px; }
    .desc-row { flex-direction: column; align-items: flex-start; gap: 16px; padding: 24px; }
    .desc-row__title { font-size: var(--fs-20); }
    .desc-row__btn { width: 100%; justify-content: center; }
}

@media (max-width: 480px) {
    .desc-block__title { font-size: 26px; padding: 8px 14px; }
    .desc-block__copy { font-size: var(--fs-16); }
    .desc-block__body { gap: 20px; }
    .desc-block__media,
    .desc-block__media--sm { max-width: 220px; }
    .desc-row { padding: 20px; }
    .desc-row__title { font-size: var(--fs-18); }
}