/* ==========================================================================
   COMPONENTE · Showcase de catálogos (tarjeta clara) — reutilizable
   Enfoque Mobile-First. Valores de Figma (Profesionales · Sección 2).
   ========================================================================== */

.catalogs-block {
    padding: var(--pt-m, 32px) 0 var(--pb-m, 32px);
    background-color: #FFFFFF;
    box-sizing: border-box;
    font-family: 'Be Vietnam Pro', system-ui, sans-serif;
}

/* ---- Tarjeta clara contenedora ---- */
.catalogs-card {
    background: #EAF4FA;
    border-radius: 29.875px;
    padding: 40px 24px;
    box-sizing: border-box;
}

.catalogs-inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 40px;
}

/* ---- Columna de texto ---- */
.catalogs-text {
    display: flex;
    flex-direction: column;
    gap: 36px;                      /* bloque de texto → botón */
}

.catalogs-text-block {
    display: flex;
    flex-direction: column;
    gap: 20px;                      /* header → descripción */
}

.catalogs-header {
    display: flex;
    flex-direction: column;
    gap: 16px;                      /* tagline → título */
}

.catalogs-tagline {
    font-weight: 500;
    font-size: 14px;
    line-height: 160%;
    letter-spacing: 2.16px;
    text-transform: uppercase;
}

.catalogs-heading {
    margin: 0;
    font-weight: 600;
    font-size: 28px;                /* móvil; 32px en escritorio */
    line-height: 120%;
    letter-spacing: -0.72px;
    color: #27292B;
}

.catalogs-desc {
    /* Sin max-width en apilado; el límite de 366px es solo para la
       columna de texto de escritorio (ver ≥1200). */
    font-weight: 400;
    font-size: 14px;
    line-height: 160%;
    letter-spacing: -0.45px;
    color: #555A5E;
}

.catalogs-desc p { margin: 0 0 12px; }
.catalogs-desc p:last-child { margin-bottom: 0; }

/* ---- Botón principal ---- */
.catalogs-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    background: #0E2C45;
    border-radius: 24px;
    color: #FFFFFF;
    font-weight: 500;
    font-size: 14px;
    line-height: 110%;
    letter-spacing: -0.154px;
    text-decoration: none;
    align-self: flex-start;
    transition: background-color .25s ease, transform .25s ease;
}

.catalogs-btn:hover {
    background: #006491;
    transform: translateY(-1px);
}

.catalogs-btn-arrow {
    display: inline-flex;
    width: 12px;
    height: 12px;
}

/* ---- Fila de catálogos ---- */
.catalogs-list {
    display: grid;
    grid-template-columns: 1fr;     /* móvil: 1 columna */
    gap: 24px;
    justify-content: center;
}

.catalog-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    max-width: 280px;               /* evita portadas gigantes en 1 columna */
    margin: 0 auto;
}

.catalog-cover {
    width: 100%;
    aspect-ratio: 229 / 324;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.catalog-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 20px;
    background: #0E2C45;
    border-radius: 24px;
    color: #FFFFFF;
    font-weight: 500;
    font-size: 14px;
    line-height: 110%;
    letter-spacing: -0.154px;
    text-decoration: none;
    text-align: center;
    transition: background-color .25s ease, transform .25s ease;
}

.catalog-btn:hover {
    background: #091D2E;
    transform: translateY(-1px);
}

/* ==========================================================================
   Breakpoints (Mobile-First → min-width)
   ========================================================================== */
/* Tablet en adelante: las portadas vuelven a 2 columnas */
@media (min-width: 600px) {
    .catalogs-list {
        grid-template-columns: repeat(2, minmax(0, 229px));
    }
}

@media (min-width: 768px) {
    .catalogs-block {
        padding: var(--pt-t, var(--pt-m, 32px)) 0 var(--pb-t, var(--pb-m, 32px));
    }
}

@media (min-width: 992px) {
    .catalogs-block {
        padding: var(--pt-d, 50px) 0 var(--pb-d, 50px);
    }

    .catalogs-card {
        padding: 80px 60px;
    }

    .catalogs-heading {
        font-size: 32px;
    }

    .catalogs-list {
        gap: 40px;
    }
}

/* Dos columnas (texto | catálogos) solo con ancho de sobra, para evitar
   desbordes en tablet / portátil pequeño. El texto encoge; las portadas no. */
@media (min-width: 1200px) {
    .catalogs-inner {
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 80px;
    }

    .catalogs-text {
        max-width: 508px;
        min-width: 0;
    }

    /* Límite de la descripción dentro de la columna de texto (Figma) */
    .catalogs-desc {
        max-width: 366px;
    }

    .catalogs-list {
        flex-shrink: 0;
    }
}