@import url('https://fonts.googleapis.com/css2?family=Encode+Sans:wght@400;500;700&family=Lato:wght@400;700&display=swap');

/* ==========================================
   1. ESTRUCTURA GENERAL DEL CARRETE
   ========================================== */
.sost_carousel-section {
    width: 100%;
    margin-bottom: 60px;
}

.sost_carousel-section .vector-top {
    width: 100%;
    display: block;
    margin-bottom: -10px;
    content: url("https://assets-us-01.kc-usercontent.com/b2956330-c34f-0064-2c6f-27bd5c0147fc/0848d2b8-4163-4441-a6a9-6238b0b2737c/vector_arriba.svg");
}

.sost_carousel-section .vector-bottom {
    width: 100%;
    display: block;
    margin-top: -10px;
    content: url("https://assets-us-01.kc-usercontent.com/b2956330-c34f-0064-2c6f-27bd5c0147fc/3f1c2046-eeb8-41c4-bb92-16b6ce3e888f/vector_abajo.svg");
}

.sost_carousel-content-bg {
    background: var(--White--Background-Background, #F7F7F7);
    padding: 0 0 60px 0;
}

.sost_carousel-container {
    max-width: 1216px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ==========================================
   2. SLIDES Y ANIMACIONES
   ========================================== */
.sost_carousel-slides {
    position: relative;
    width: 100%;
    overflow: hidden;
}

@keyframes sost_fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.sost_carousel-slide {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: center;
}

.sost_carousel-slide.active {
    display: flex;
    animation: sost_fadeIn 0.6s ease-in-out;
}

.sost_carousel-slide-title {
    color: var(--Brand-Colors-Blue-00, #1B365D);
    font-family: "Encode Sans", sans-serif;
    font-size: 36px;
    font-weight: 700;
    margin: 0 auto 48px;
    letter-spacing: -0.72px;
}

/* ==========================================
   3. VARIANTES DE GRILLAS (DESKTOP)
   ========================================== */
.sost_carousel-items {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

/* --- SIMPLE GRID: Una sola fila continua --- */
.sost_carousel-items.simple-grid {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 37px;
    width: 100%;
    flex-wrap: nowrap;
}

/* --- FEATURED GRID: Destacado + resto en filas --- */
.sost_carousel-items.featured-grid {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 37px;
    width: 100%;
}

.featured-grid > .sost_grid {
    display: flex;
    flex-direction: column;
    gap: 37px;
    align-items: center;
}

/* --- HYBRID GRID: 2 Arriba, Título, Resto abajo en fila única --- */
.sost_carousel-items.hybrid-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 37px;
    width: 100%;
}

.sost_hybrid-top {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 37px;
    width: 100%;
}

.sost_hybrid-bottom-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    width: 100%;
    align-self: stretch;
}

.sost_hybrid-bottom-section .sost_grid {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-end;
    gap: 32px;
    width: 100%;
    flex-wrap: nowrap;
}

.sost_hybrid-mid-title {
    color: var(--Brand-Colors-Blue-00, #1B365D);
    font-family: "Encode Sans", sans-serif;
    font-size: 24px;
    font-weight: 700;
    margin: 0;
    text-align: center;
}

/* ==========================================
   4. ESTILOS DE ITEMS Y LOGOS
   ========================================== */

/* Filas para Featured Grid */
.sost_grid-row {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 37px;
    width: 100%;
}

/* Logos individuales (Featured y Hybrid) */
.sost_logo-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex: 0 1 auto;
}

.sost_logo-img {
    max-width: 180px;
    height: auto;
    object-fit: contain;
}

/* Items estándar (Simple y Hybrid Top) */
.sost_carousel-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 300px;
    flex: 0 0 auto;
}

.sost_carousel-item-img {
    margin-bottom: 24px;
    max-width: 100%;
    height: auto;
}

.sost_carousel-item-title {
    color: var(--Brand-Colors-Blue-00, #1B365D);
    font-family: "Encode Sans", sans-serif;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.4px;
    margin-bottom: 8px;
    text-align: center;
}

.sost_carousel-item-content {
    color: var(--Brand-Colors-Blue-00, #1B365D);
    font-family: Lato, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
    text-align: center;
}

.sost_carousel-item-content strong {
    font-weight: 700;
}

/* ==========================================
   5. NAVEGACIÓN (FLECHAS Y PUNTOS) - RESTAURADO
   ========================================== */
.sost_carousel-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-top: 48px;
}

.sost_carousel-arrow {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 24px;
    color: #00AEC7;
    outline: none;
    box-shadow: none;
}

.sost_carousel-arrow:focus {
    outline: none;
    box-shadow: none;
}

.sost_carousel-arrow.disabled {
    color: #D9D9D9;
    cursor: not-allowed;
}

.sost_carousel-dots {
    display: flex;
    gap: 8px;
}

.sost_carousel-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #D9D9D9;
    border: none;
    cursor: pointer;
    padding: 0;
    outline: none;
    box-shadow: none;
}

.sost_carousel-dot:focus {
    outline: none;
    box-shadow: none;
}

.sost_carousel-dot.active {
    background: #00AEC7;
}

/* ==========================================
   6. RESPONSIVE (MÓVIL)
   ========================================== */
@media (max-width: 768px) {
    .sost_carousel-section .vector-top {
        margin-bottom: -3px;
        content: url("https://assets-us-01.kc-usercontent.com/b2956330-c34f-0064-2c6f-27bd5c0147fc/e69414bc-a489-416f-b895-789afad4befa/vector_arriba_mob.svg");
    }

    .sost_carousel-section .vector-bottom {
        margin-top: -3px;
        content: url("https://assets-us-01.kc-usercontent.com/b2956330-c34f-0064-2c6f-27bd5c0147fc/2201841b-68d1-4aad-a1e0-86fdcda5d6df/vector_abajo_mob.svg");
    }

    .sost_carousel-slide-title {
        margin-top: 30px;
    }

    .sost_carousel-items.featured-grid,
    .sost_carousel-items.hybrid-grid,
    .sost_carousel-items.simple-grid,
    .sost_hybrid-top,
    .sost_grid {
        flex-direction: column !important;
        align-items: center !important;
        gap: 40px;
        flex-wrap: wrap;
    }

    .sost_hybrid-bottom-section .sost_grid{
        flex-direction: row !important;
    }

    .sost_grid-row{
        flex-direction: row !important;
        align-items: flex-start !important;
        gap: 24px;
        flex-wrap: wrap;
    }

    .sost_logo-item {
        flex-direction: column-reverse;
    }

    .sost_carousel-item-img {
        margin-bottom: 8px;
    }

    .sost_hybrid-mid-title{
        display: none;
    }
}