/*/// Ticket GLPI 9589*/

@font-face {
    font-family: 'Gotham-Light';
    src: url('/fonts/Gotham/Gotham-Light.otf') format('opentype');
    /*font-weight: 300;*/
    font-style: normal;
}

@font-face {
    font-family: 'Gotham-Medium';
    src: url('/fonts/Gotham/Gotham-Medium.otf') format('opentype');
    /*font-weight: 500;*/
    font-style: normal;
}

@font-face {
    font-family: 'Gotham-Bold';
    src: url('/fonts/Gotham/Gotham-Bold.otf') format('opentype');
    /*font-weight: 700;*/
    font-style: normal;
}

@font-face {
    font-family: "Gotham-Black";
    src: url("/fonts/Gotham/Gotham-Black.otf") format("opentype");
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: "Gotham-Book";
    src: url("/fonts/Gotham/Gotham-Book.otf") format("opentype");
    font-weight: 400;
    font-style: normal;
}

:root {
    --brand-900: #FF6600;
    --brand-300: #FFD9C0;
    --background-primary: #FFFFFF;
    --blacka5: rgba(0,0,0,.05);
    --blacka10: rgba(0,0,0,.10);
}

.acordeon-wrap { /* ancho: min 320px(22.22vw), preferente 99.6vw, max 1240px(86.11vw) */
    width: 100%;
    height: 100%;
    position: relative;
    /* margin: 0 auto; */
    display: flex;
    gap: 2.22vw;
    align-items: stretch;
    justify-content: center;
}

/* tarjeta (colapsada) */
.acordeon-card {
    position: relative;
    width: 9.03vw;
    height: 28.84vw;
    border-radius: 2.5vw;
    overflow: hidden;
    cursor: pointer;
    flex: 0 0 9.03vw;
    transition: cubic-bezier(0.01, 0.56, 0.27, 0.99) 1s;
    background-color: #f5f5f5;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    filter: none;
    isolation: isolate;
    opacity: 0.3;
}

    .acordeon-card::before {
        content: "";
        position: absolute;
        inset: 0;
        opacity: 0.3;
        transition: opacity 1s ease-out, backdrop-filter 1s ease-out;
        backdrop-filter: blur(0.14vw); /* 0.125rem -> ≈2px -> 0.14vw */
        z-index: 0;
    }

    .acordeon-card.active,
    .acordeon-card:not(.active):hover {
        width: 57vw;
        flex: 0 0 57vw;
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        opacity: 1;
    }

        .acordeon-card.active::before,
        .acordeon-card:hover::before {
            opacity: 1;
            backdrop-filter: blur(0);
            background: linear-gradient(180deg, transparent 50%, #FF6600 100%);
        }


/* Icons */
.acordeon-icon {
    position: absolute;
    /* bottom/left 22px -> preferente 1.77vw con límites -> convertidos */
    bottom: 1.67vw; /* 0.5rem(8px)->0.56vw ; 1.5rem(24px)->1.67vw */
    left: 1.67vw;
    /* tamaño icono contenedor (75px aprox) -> bounds convertidos */
    width: 5.28vw; /* 3.5rem(56px)->3.89vw ; 4.75rem(76px)->5.28vw */
    height: 5.28vw;
    border-radius: 10vw; /* 3rem(48px)->3.33vw ; 9rem(144px)->10vw */
    background: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    padding: 1.5vw; /* 0.4rem(6.4px)->0.44vw ; 0.8rem(12.8px)->0.89vw */
    transition: transform .3s ease;
}

    .acordeon-icon img {
        /* icon image: 35x24px -> escalable */
        width: 100%; /* 1.5rem(24px)->1.67vw ; 2.5rem(40px)->2.78vw */
        height: 100%; /* 1rem(16px)->1.11vw ; 1.75rem(28px)->1.94vw */
        display: block;
        fill: none;
        stroke: var(--brand-900);
        stroke-width: 6;
        stroke-linecap: round;
    }

/* Textos */
.acordeon-text {
    position: absolute;
    left: 8vw;
    bottom: 2vw;
    color: #FFFFFF;
    width: 46vw;
    height: auto;
    opacity: 0;
    transform: translateY(0.83vw);
    transition: opacity .35s ease, transform .35s ease;
    z-index: 2;
    /* display: flex; */
    /* justify-content: center; */
    /* flex-direction:column; */
}

.acordeon-card.active .acordeon-text,
.acordeon-card:hover .acordeon-text {
    opacity: 1;
    transform: translateY(0);
}

/* Tipografías: uso clamp para controlar tamaños y unitless line-height */
.pre-titulo {
    font-family: "Gotham-Book";
    font-weight: 325;
    font-size: 1.39vw !important; /* 0.9rem(14.4px)->1vw ; 1.25rem(20px)->1.39vw */
    line-height: 1;
    margin: 0 0 0.56vw 0; /* margen inferior: 0.375rem(6px)->0.42vw ; 0.5rem(8px)->0.56vw */
    text-align: left;
}

.titulo {
    font-family: "Gotham-Bold";
    font-weight: 400;
    font-size: 2.08vw !important; /* 1rem(16px)->1.11vw ; 1.875rem(30px)->2.08vw */
    line-height: 1;
    text-align: left;
    margin: 0;
}

/* Contenedor del acordeón (móvil) */
@media (max-width: 767px) {
    /* WRAPPER */
    .acordeon-wrap {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center; /* deja que las cards empujen hacia abajo */
        gap: 1.77891vw;
        padding-left: 16.23678vw;
        padding-bottom: 6.825vw;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        justify-content: flex-start;
        box-sizing: border-box;
        /* scrollbar-width: thin; */
        border-radius: 0; /* NO redondear el wrapper: causa recortes visuales en children */
        /* touch-action: pan-x; */ /* mejora comportamiento táctil horizontal */
        position: relative;
    }

        .acordeon-wrap.allow-x {
            overflow-x: auto;
            overflow-y: hidden;
            -webkit-overflow-scrolling: touch;
        }

    /* CARD: aplicamos overflow hidden para respetar border-radius */
    .acordeon-card {
        flex: 0 0 71.4vw;
        min-height: 102.706905vw;
        height: 100%;
        border-radius: 5.69604vw; /* radio consistente */
        opacity: 0.3;
        transition: transform .28s ease, opacity .28s ease;
        scroll-snap-align: center;
        margin-right: 3.15vw;
        position: relative;
        overflow: hidden; /* <- muy importante para que la imagen/clipping respete el border-radius */
        box-sizing: border-box;
        background-clip: padding-box;
        -webkit-backface-visibility: hidden; /* reduce glitches en algunos móviles */
    }

        /* IMAGEN o MEDIA (solo redondear las esquinas superiores si quieres) */
        .acordeon-card .card-media {
            display: block;
            width: 100%;
            height: auto;
            max-height: calc(102.706905vw);
            object-fit: cover;
            /* si quieres que solo las esquinas superiores estén redondeadas: */
            border-top-left-radius: 5.69604vw;
            border-top-right-radius: 5.69604vw;
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
        }

        /* ESTADO ACTIVO */
        .acordeon-card.active {
            flex: 0 0 73.5vw;
            /* min-height: calc(91.706905vw + 2.625vw); */
            opacity: 1;
            transform: none;
            border-radius: 5.69604vw;
        }

    .acordeon-icon {
        width: 13.35012vw;
        height: 13.35012vw;
        padding: 1.77891vw;
        border-radius: 50%;
        bottom: 3.675vw;
        left: 3.675vw;
        position: absolute;
        overflow: visible;
    }

        .acordeon-icon img {
            width: 6.4575vw;
            height: 6.4575vw;
        }

    /* Texto dentro de la tarjeta */
    .acordeon-text {
        position: absolute;
        left: 18.9vw;
        bottom: 7.35vw;
        width: 50.7045vw;
        transform: translateY(1.77891vw);
        z-index: 4;
        pointer-events: auto; /* permitido si quieres clicks en botones de la tarjeta */
    }

    .pre-titulo {
        font-size: 3.15vw !important;
        line-height: 1.5;
        text-align: left;
    }

    .titulo {
        font-size: 4.2vw !important;
        text-align: left;
    }
    /* Interacciones: solo controles hijos se desactivan, NO la tarjeta */
    .acordeon-card:not(.active) .acordeon-text,
    .acordeon-card:not(.active) .acordeon-icon {
        pointer-events: none; /* hijos no interactivos si la card no está activa */
        opacity: 0.3;
    }
}

/*=====================================================================================================================*/


/*(Contador + Enlace)*/
.franja-secundaria {
    width: 100%; /* 1239.99px */
    height: 100%; /* 140px */
    /* margin: 1.66667vw auto 0 auto; */ /* 24px auto 0 auto */
    display: flex;
    gap: 2.08333vw; /* 30px */
    align-items: stretch;
    justify-content: center;
}

/* ----- Tarjeta Contador ----- */
.contador-card {
    width: 30vw; /* 393.33px */
    height: 9.72222vw; /* 140px */
    border-radius: 1.12083vw; /* 16.14px */
    background: var(--background-primary);
    box-shadow: 0vw 0.38056vw 0.57083vw -0.19028vw var(--blacka5), /* 0px 5.48px 8.22px -2.74px */
    0vw 0.95139vw 1.42639vw -0.28542vw var(--blacka10); /* 0px 13.7px 20.54px -4.11px */
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    padding-left: 2.33472vw; /* 33.62px */
}

.contador-circulo {
    width: 7.63889vw; /* 110px */
    height: 7.63889vw; /* 110px */
    position: relative;
    margin-right: 1.66667vw; /* 24px */
}

    .contador-circulo svg {
        width: 7.63889vw; /* 110px */
        height: 7.63889vw; /* 110px */
        transform: rotate(-90deg);
    }

.contador-bg {
    stroke: #eee;
    stroke-width: 0.3vw;
    fill: none;
}

.contador-fg {
    stroke: var(--brand-900);
    stroke-width: 0.69444vw; /* 10px */
    fill: none;
    stroke-linecap: round;
    stroke-width: 0.3vw;
    stroke-dasharray: 24.86111vw; /* 358 */
    stroke-dashoffset: 24.86111vw; /* 358 */
}

.contador-num {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Gotham-Bold";
    font-weight: 700;
    font-size: 1.38889vw !important; /* 20px */
    line-height: 125%;
    color: #606060;
    text-align: center;
}

.contador-texto {
    width: 15.27778vw; /* 220px */
    height: 9.72222vw; /* 140px */
    padding: 1.25vw 0.83333vw 1.25vw 0; /* 18px 12px 18px 0 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
}

    .contador-texto .pre {
        font-family: "Gotham-Book";
        font-weight: 400;
        font-size: 1.66667vw !important; /* 24px */
        line-height: 1.66667vw; /* 24px */
        color: #C7C7C7;
        margin: 0 0 0.41667vw 0; /* 6px */
    }

    .contador-texto .tit {
        font-family: "Gotham-Bold";
        font-weight: 700;
        font-size: 1.66667vw !important; /* 24px */
        line-height: 1.66667vw; /* 24px */
        color: #C7C7C7;
        margin: 0;
    }

/* ----- Tarjeta Enlace ----- */
.enlace-card {
    width: 30vw; /* 393.33px */
    height: 9.72222vw; /* 140px */
    border-radius: 1.12083vw; /* 16.14px */
    box-shadow: 0vw 0.38056vw 0.57083vw -0.19028vw var(--blacka5), 0vw 0.95139vw 1.42639vw -0.28542vw var(--blacka10);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.enlace-img {
    position: relative;
    width: 11.59722vw; /* 167px */
    height: 8.88889vw; /* 128px */
    margin-left: 0.41667vw; /* 6px */
    border-radius: 0.97222vw; /* 14px */
    overflow: hidden;
    flex: 0 0 11.59722vw; /* 167px */
    background: #eee center/cover no-repeat;
}

    .enlace-img::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background: inherit;
        transform: scale(1);
        transform-origin: center;
        will-change: transform;
        transition: transform .6s cubic-bezier(.22,.61,.36,1);
    }

    .enlace-img::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 0.97222vw; /* 14px */
        pointer-events: none;
        z-index: 1;
        background: linear-gradient(180deg, rgba(255, 102, 0, 0.00) 0%, rgba(255, 102, 0, 1) 150%);
        opacity: 0;
        transition: opacity .5s ease;
    }

.enlace-card:hover .enlace-img::before {
    transform: scale(1.18);
}

.enlace-card:hover .enlace-img::after {
    opacity: 1;
}

.enlace-body {
    position: relative;
    left: 1.04167vw; /* 15px */
    width: 15.27778vw; /* 220px */
    height: 8.81944vw; /* 127px */
    display: grid;
    grid-auto-rows: max-content;
    align-content: center;
    justify-items: start;
    gap: 0.27778vw; /* 4px */
    padding-right: 0.55556vw; /* 8px */
}

.enlace-texto {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    text-align: left;
    border-radius: 0.27778vw; /* 4px */
    transform: translateY(0.27778vw); /* 4px */
    will-change: transform;
    transition: transform .55s cubic-bezier(.22,.61,.36,1), background .3s ease, color .3s ease;
}

    .enlace-texto .pre {
        font-family: "Gotham-Book";
        font-weight: 400;
        font-size: 1.66667vw !important; /* 24px */
        line-height: 1vw; /* 24px */
        color: #C7C7C7;
        margin: 0 0 0.41667vw 0; /* 6px */
    }

    .enlace-texto .tit {
        font-family: "Gotham-Bold";
        font-weight: 700;
        font-size: 1.66667vw !important; /* 24px */
        line-height: 1.5vw; /* 24px */
        color: #C7C7C7;
        margin: 0;
    }

.enlace-btn {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 0.5vw; /* 10px */
    width: 9.09722vw; /* 131px */
    height: 2.22222vw; /* 32px */
    border-radius: 69.44444vw; /* 1000px (pill) */
    border: 0.06944vw solid var(--brand-900); /* 1px */
    background: transparent;
    font-family: "Gotham-Book";
    font-weight: 500;
    font-size: 0.83333vw !important; /* 12px */
    line-height: 1.11111vw; /* 16px */
    color: var(--brand-900);
    text-decoration: none;
    margin-top: 0.27778vw; /* 4px */
    opacity: 0;
    transform: translateY(0.41667vw); /* 6px */
    pointer-events: none;
    transition: opacity .45s cubic-bezier(.22,.61,.36,1), transform .45s cubic-bezier(.22,.61,.36,1);
}

.enlace-card:hover .enlace-texto .pre,
.enlace-card:hover .enlace-texto .tit {
    color: var(--brand-900);
}

.enlace-card:hover .enlace-texto {
    transform: translateY(-0.69444vw); /* -10px */
}

.enlace-card:hover .enlace-btn {
    display: flex;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.enlace-btn img {
    width: 2vw; /* 10px */
    height: 2vw; /* 10px */
    stroke: currentColor;
    fill: none;
    transform: rotate(90deg);
}

.bg-img {
    background-position: center;
    background-repeat: no-repeat;
}

/* ====== MOBILE (<= 767px) — base 412px => 1vw = 4.12px ====== */
@media (max-width: 767px) {

    /* Franja secundaria: 329×436.11, gap 42.7, top 656.91, left 41.5 */
    .franja-secundaria {
        width: 100%; /* 329px */
        height: 100%; /* 436.1103px */
        /* margin: 10.5vw; */ /* top 656.91px, left 41.5px */
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 8.8822819vw; /* 42.7px */
    }

    /* Tarjetas: 328.44×116.90, radius 13.48 */
    .contador-card,
    .enlace-card {
        width: 100%;
        height: 31.7933804vw;
        border-radius: 3.43543725vw;
        box-shadow: 0 0.399588vw 0.5993715vw -0.199794vw var(--blacka5), 0 0.9989595vw 1.497417vw -0.299691vw var(--blacka10);
        overflow: hidden;
    }

    /* ====== Contador ====== */

    .contador-card {
        padding: 8.5682037vw;
        align-items: center;
    }

    .contador-circulo {
        width: 28.03398045vw;
        height: 28.03398045vw;
        margin-right: 6.11650515vw;
        position: relative;
        flex: 0 0 auto;
    }

        .contador-circulo svg {
            width: 28.03398045vw;
            height: 28.03398045vw;
            transform: rotate(-90deg);
        }

    .contador-bg {
        stroke-width: 2.5485432vw;
    }

    .contador-fg {
        stroke-width: 2.5485432vw;
        stroke-linecap: round;
        stroke-dasharray: 26.1031655vw;
        stroke-dashoffset: 26.1031655vw;
    }

    .contador-num {
        font-size: 5.1072819vw !important;
        line-height: 125%;
    }

    .contador-texto {
        width: 45.61153905vw;
        height: 27.0268551vw;
        padding: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: left;
    }

        .contador-texto .pre {
            font-size: 5.1072819vw !important;
            line-height: 5.1072819vw;
            margin: 0 0 1.0194177vw 0;
            color: #C7C7C7;
            font-weight: 400;
        }

        .contador-texto .tit {
            font-size: 5.1072819vw !important;
            line-height: 5.1072819vw;
            margin: 0;
            color: #C7C7C7;
            font-weight: 700;
        }

    /* ====== Enlace ====== */

    .enlace-img {
        width: 35.53925025vw;
        height: 27.2396649vw;
        border-radius: 2.97924795vw;
        margin-left: 1.0194177vw;
        flex: 0 0 35.53925025vw;
        background: #eee center/cover no-repeat;
        position: relative;
        overflow: hidden;
    }

        .enlace-img::before {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: inherit;
            background: inherit;
            transform: scale(1);
            transform-origin: center;
            will-change: transform;
            transition: transform .6s cubic-bezier(.22,.61,.36,1);
        }

        .enlace-img::after {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: 2.97924795vw;
            pointer-events: none;
            z-index: 1;
            background: linear-gradient(180deg, rgba(255,102,0,0) 0%, rgba(255,102,0,1) 150%);
            opacity: 1;
            transition: opacity .5s ease;
        }

    .enlace-body {
        position: relative;
        left: 3.82281585vw;
        width: 45.61153905vw;
        height: 27.0268551vw;
        display: grid;
        grid-auto-rows: max-content;
        align-content: center;
        justify-items: start;
        gap: 1.0194177vw;
        padding-right: 1.0194177vw;
    }

    .enlace-texto {
        width: 100%;
        border-radius: 1.0194177vw;
        transform: translateY(-2.5485432vw);
        transition: transform .55s cubic-bezier(.22,.61,.36,1), background .3s ease, color .3s ease;
    }

        .enlace-texto .pre {
            font-size: 5.1072819vw !important;
            line-height: 5vw;
            margin: 0 0 1.0194177vw 0;
            color: var(--brand-900);
            font-weight: 400;
        }

        .enlace-texto .tit {
            font-size: 5.1072819vw !important;
            line-height: 4.5vw;
            margin: 0;
            color: var(--brand-900);
            font-weight: 700;
        }

    .enlace-btn {
        gap: 1vw;
        width: 25.2616329vw;
        height: 6.97291875vw;
        border-radius: 72.916662vw;
        border: 0.21407715vw solid var(--brand-900);
        margin-top: 1.0194177vw;
        font-size: 2.55364095vw !important;
        line-height: 3.40485435vw;
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: opacity .45s cubic-bezier(.22,.61,.36,1), transform .45s cubic-bezier(.22,.61,.36,1);
    }

        .enlace-btn img {
            width: 5vw;
            height: 5vw;
            stroke: currentColor;
            fill: none;
        }
}




/*=====================================================================================================================*/


/* ============ Tarjetas DOCUMENTO  ============ */

.docs-grid {
    /* max-width: 81.527778vw; */
    width: 100%;
    /* margin: 3.472222vw auto 4.444444vw auto; */
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(4vw, 1.2vw, 1.666667vw);
    align-items: center;
    justify-items: center;
}

.doc-card {
    width: 100%;
    /* max-width: 25.8125vw; */
    height: auto;
    /* margin-top: 3.472222vw; */
}

.doc-card__figure {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1/1;
    border-radius: 1.111111vw;
    overflow: hidden;
    background: #eee center/cover no-repeat;
    box-shadow: 0 0.343056vw 0.514583vw -0.171528vw var(--blacka5), 0 0.857639vw 1.286111vw -0.256944vw var(--blacka10);
    isolation: isolate;
    cursor: pointer;
}


.doc-card__veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 80%);
    opacity: 0;
    transition: opacity .5s ease;
    z-index: 1;
}

.doc-card__cta {
    position: absolute;
    left: 50%;
    bottom: 1.388889vw;
    transform: translate(-50%, 0.833333vw);
    z-index: 2;
    width: 13.263889vw;
    height: 3.125vw;
    border-radius: 69.444444vw;
    background: var(--brand-900);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-family: "Gotham-Book" !important;
    font-weight: 400;
    font-size: 1.041667vw !important;
    line-height: 1.304167vw;
    color: #FFFFFF;
    opacity: 0;
    transition: opacity .35s ease, transform .35s ease;
    pointer-events: none;
    gap: 0.5vw;
}

    .doc-card__cta img {
        width: 2vw;
        height: 2vw;
    }

@media (max-width:767px) {
    .doc-card__cta {
        gap: 2vw;
    }

        .doc-card__cta img {
            width: 5vw;
            height: 5vw;
        }
}


.doc-card__figure:hover .doc-card__veil {
    opacity: 1;
}

.doc-card__figure:hover .doc-card__cta {
    opacity: 1;
    transform: translate(-50%, 0);
    pointer-events: auto;
}

.doc-card__caption {
    width: 100%;
    /* max-width: 22.8125vw; */
    height: 1.388889vw;
    margin: 0.694444vw 0 0 0;
    font-family: "Gotham-Light";
    font-weight: 300;
    font-size: 0.972222vw !important;
    line-height: 1.388889vw;
    letter-spacing: 0;
    color: #606060;
    text-align: center;
}

@media (max-width: 767px) {
    .docs-grid {
        width: 100%;
        max-width: none;
        /* margin: 21vw 10.5vw 10.5vw; */
        padding: 0 5.25vw;
        display: grid;
        grid-template-columns: 1fr;
        gap: 15.75vw;
        justify-items: center;
    }

    .doc-card {
        width: 100%;
        max-width: none !important;
        margin: 0;
    }

    .doc-card__figure {
        width: 100%;
        max-width: none !important;
        aspect-ratio: 1/1;
        border-radius: 4.725vw;
        background: #eee center/cover no-repeat;
        box-shadow: 0 0.945vw 1.365vw -0.4725vw var(--blacka5), 0 2.31vw 3.465vw -0.6825vw var(--blacka10);
        position: relative;
        isolation: isolate;
        cursor: pointer;
    }

    .doc-card__veil {
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 80%);
        opacity: 1;
        z-index: 1;
    }

    .doc-card__cta {
        position: absolute;
        left: 50%;
        bottom: 4.2vw;
        transform: translate(-50%, 0);
        z-index: 2;
        width: 42vw;
        height: 9.975vw;
        border-radius: 210vw;
        background: var(--brand-900);
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        font-family: "Gotham-Medium";
        font-weight: 200;
        font-size: 3.36vw !important;
        line-height: 4.83vw;
        color: #fff;
        opacity: 1;
        pointer-events: auto;
    }

    .doc-card__caption {
        width: 100%;
        max-width: none !important;
        margin: 3.15vw 0 0 0;
        font-family: "Gotham-Light";
        font-weight: 300;
        font-size: 4.095vw !important;
        line-height: 5.46vw;
        color: #606060;
        text-align: center;
        height: 100%;
    }
}




/*=================================================== Tarjeta INFORMACIÓN (convertida a vw) ===================================================*/


.info-card {
    width: 100%;
    min-height: calc(35vw + 1vw);
    /* margin-top: 3vw; */
    border-radius: 1.5vw;
    background: #FFFFFF;
    box-shadow: 0px 0.3vw 0.45vw -0.15vw var(--blacka5), 0px 0.75vw 1.125vw -0.225vw var(--blacka10);
    display: grid;
    grid-template-columns: calc(50% ) calc(50% );
    grid-template-rows: auto;
    overflow: hidden;
    position: relative;
    isolation: isolate;
}

/* ===== Texto (lado izquierdo) ===== */
.info-card__text {
    width: 100%;
    height: 100%;
    padding: calc(1vw + 0.5vw);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    transform: translateX(-5vw);
    opacity: 0;
    will-change: transform, opacity;
    transition: transform .8s cubic-bezier(.22,.61,.36,1) .02s, opacity .55s ease .02s;
}

.info-card.in-view .info-card__text {
    transform: translateX(0);
    opacity: 1;
}

/* envoltura interior */
.info-card__textwrap {
    width: 100%;
    max-width: 90%;
    display: grid;
    grid-auto-rows: max-content;
    justify-items: start;
    gap: 1vw;
}

    /* El JS controla max-height con animación; no fijamos aquí */
    .info-card__textwrap[data-mode="collapsed"] .info-card__descwrap {
    }

    .info-card__textwrap[data-mode="expanded"] .info-card__descwrap {
    }

/* Título */
.info-card__title {
    width: 100%;
    max-width: 100%;
    height: auto;
    line-height: 1.5em;
    margin: 0;
    font-family: "Gotham-Black";
    font-weight: 900;
    font-size: 2.5vw !important;
    color: #c7c7c7;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: initial;
}

/* Bloque descripción con transición de altura */
.info-card__descwrap {
    width: 100%;
    overflow: hidden;
    position: relative;
    padding-bottom: 1vw;
    transition: max-height .35s cubic-bezier(.22,.61,.36,1);
}

.info-card__textwrap[data-has-toggle="true"][data-mode="collapsed"] .info-card__descwrap::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 20%, #FFFFFF 100%);
}


.info-card__textwrap[data-mode="expanded"] .info-card__descwrap::after,
.info-card__textwrap:not([data-has-toggle="true"]) .info-card__descwrap::after {
    display: none;
}

.info-card__desc {
    margin: 0;
    font-family: "Gotham-Light";
    font-weight: 300;
    font-size: 1.05vw !important;
    color: #606060;
    text-align: justify;
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
}

/* Botón Leer más / Leer menos */
.info-card__toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.31vw; /* 6px */
    margin-top: 0.10vw; /* 2px */
    border: 0;
    padding: 0;
    background: transparent;
    font-family: "Gotham-Medium";
    font-weight: 350;
    font-size: clamp(0.9vw, 0.9vw, 14px) !important; /* responsive; 0.9vw ≈ 17px desktop, limited por clamp */
    line-height: 1rem;
    color: var(--brand-900, #FF6600);
    cursor: pointer;
    position: relative;
    z-index: 3;
}

.info-card__toggleicon {
    width: 1.5vw !important;
    height: 1.5vw !important;
    transform: translateY(0.05vw);
}

.info-card__toggle[aria-expanded="true"] .info-card__toggleicon {
    transform: rotate(180deg);
}

.info-card__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.42vw;
    width: 12.64vw;
    height: 2.50vw;
    border-radius: 0.42vw;
    padding: 0.28vw 1.11vw;
    background: var(--brand-900, #FF6600);
    color: #FFFFFF;
    text-decoration: none;
    font-family: "Gotham-Medium";
    font-weight: 500;
    font-size: 1.05vw !important;
    line-height: 1.04vw;
}

/* Imagen (lado derecho) con degradado naranja */
.info-card__media {
    width: 100%;
    height: 100%;
    background: #eee center/cover no-repeat;
    position: relative;
    transform: translateX(3.33vw);
    opacity: 0;
    will-change: transform, opacity;
    transition: transform .85s cubic-bezier(.22,.61,.36,1) .08s, opacity .55s ease .08s;
}

.info-card.in-view .info-card__media {
    transform: translateX(0);
    opacity: 1;
}

/* Degradado overlay #FF6600 (0 -> 60%) */
.info-card__veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255,102,0,0) 0%, rgba(255,102,0,0.6) 100%);
    pointer-events: none;
}

/* Hover sutil (opcional) */
.info-card:hover .info-card__media {
    transition-duration: .55s;
}

.info-card__btn,
.info-card__btn:link,
.info-card__btn:hover,
.info-card__btn:visited,
.info-card__btn:active,
.info-card__btn:focus {
    color: #fff !important;
    background: var(--brand-900,#FF6600) !important;
    text-decoration: none;
    -webkit-text-fill-color: #fff; /* iOS/Chromium móviles */
}
/* Alto de línea consistente en desktop */
.info-card__btn {
    line-height: 1.3889vw; /* 20px@1440 */
}


/* ===== Media queries: mobile / tablet (paralelo a CODIGO 1) ===== */
@media (max-width: 767px) {

    .info-card__toggleicon {
        width: 3vw !important;
        height: 3vw !important;
        transform: translateY(0.05vw);
    }

    .info-card {
        display: block;
        grid-template-columns: 1fr;
        border-radius: 4.2vw;
        height: auto;
        transition: none !important;
    }

    .info-card__text {
        order: 1;
        transform: translateY(0);
        text-align: center;
        padding: 8.5vw;
    }

    .info-card__textwrap {
        max-width: 100%;
        gap: 4.2vw;
        justify-items: center;
    }

    .info-card__media {
        order: 2;
        transform: translateY(2.1vw);
        width: 100%;
        aspect-ratio: 1 / 1;
        margin: 3.15vw auto 0;
        background-size: cover;
        background-position: center;
    }

    .info-card__title {
        font-size: 6.37704vw !important;
        text-align: center;
    }

    .info-card__desc {
        font-size: 3.1vw !important;
        line-height: 4.4vw;
        text-align: justify;
        font-family: Gotham-Book;
    }

    .info-card__toggle {
        font-size: 3.1vw !important;
        gap: 1.575vw;
        background-position: center;
    }

    .info-card__btn {
        width: 45.6225vw;
        height: 8.1585vw;
        border-radius: 1.3545vw;
        font-size: 3.15vw !important;
        padding: 0;
        margin-top: 3.15vw;
        background-position: center;
        line-height: 5.0967vw;
    }
}

/* Desactivar hover en dispositivos táctiles */
@media (hover: none) {
    .info-card:hover .info-card__media {
        transform: none;
        opacity: 1;
        transition: none;
    }
}

#ef-partials {
    scroll-margin-top: 80px;
}

/*==================================================================================================================*/

/* ===== Tarjeta "gestión" ===== */
/* ===== Tarjeta "gestión" (base 1440px → vw) ===== */
.gestion-card {
    flex: 0 0 18.472222vw; /* 266px */
    width: 18.472222vw; /* 266px */
    height: 18.472222vw; /* 266px */
    border-radius: 1.304167vw; /* 18.78px */
    background: #FFFFFF;
    box-shadow: 0 0.261111vw 0.390972vw -0.130556vw var(--blacka5), 0 0.652083vw 0.977778vw -0.195833vw var(--blacka10);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 1.666667vw 1.388889vw; /* 24px 20px */
    cursor: pointer;
    transition: background .25s ease, color .25s ease, transform .25s ease;
    text-align: initial;
    /* margin-left: 2.5vw; */
}

.gestion-card__inner {
    width: 100%;
    height: 100%;
    display: grid;
    grid-auto-rows: max-content;
    justify-items: left;
    align-content: center;
    row-gap: 0.694444vw; /* 10px */
    padding: 2.430556vw; /* 35px */
}

.gestion-pre {
    margin: 0;
    width: 100%;
    font-family: "Gotham-Light";
    /*font-weight: 200 !important;*/
    font-weight: 300;
    font-size: 1.564583vw !important; /* 22.53px */
    line-height: 1.304167vw; /* 18.78px */
    color: #606060;
}

.gestion-year {
    margin: 0;
    width: 100%;
    display: flex;
    gap: 0;
    align-items: center;
    line-height: 1;
    font-family: "Gotham-Black";
    font-weight: 900;
    font-size: 3.651389vw !important; /* 52.58px */
}

    .gestion-year .y-left {
        color: #BFBFBF;
    }

    .gestion-year .y-right {
        color: var(--brand-900);
    }

.gestion-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0.138889vw solid var(--brand-900); /* 2px */
    background: #FFFFFF;
    width: 2.777778vw;
    height: 2.777778vw; /* 40px */
    border-radius: 69.444444vw; /* 1000px */
    color: var(--brand-900);
    transition: width .25s ease, padding .25s ease, background .25s ease, color .25s ease;
    /* gap: 4vw; */
}

.gestion-cta__circle {
    width: 1.5vw;
    height: 2vw;
    border-radius: 69.444444vw;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #FFFFFF;
    border: 0;
}

    .gestion-cta__circle img {
        width: 1.75vw !important;
        height: 1.75vw !important;
        transform: rotate(-90deg);
    }

.gestion-cta__label {
    max-width: 0;
    overflow: hidden;
    white-space: nowrap;
    opacity: 0;
    transition: max-width .25s ease, opacity .25s ease;
    font-family: "Gotham-Medium";
    font-weight: 350;
    font-size: 1.05vw !important;
}

/* Hover */
.gestion-card:hover {
    background: var(--brand-900);
    color: #FFFFFF;
}

    .gestion-card:hover .gestion-pre {
        color: #FFFFFF;
    }

    .gestion-card:hover .gestion-year .y-left,
    .gestion-card:hover .gestion-year .y-right {
        color: #FFFFFF;
    }

    .gestion-card:hover .gestion-cta {
        background: #FFFFFF;
        color: var(--brand-900);
        padding: 0 1.111111vw; /* 16px */
        width: auto;
        gap: 1vw;
    }

    .gestion-card:hover .gestion-cta__label {
        max-width: 9.722222vw; /* 140px */
        opacity: 1;
    }



/*===============================================================================================*/
/* ===========================
   Barra progresiva e Indicador
   Base de diseño: 1440px -> convert px -> vw
   =========================== */

.sef-progress-indicators-wrapper {
    width: 100%;
    box-sizing: border-box;
    /* padding: 1.667vw 3vw; */
}

/* Barra progresiva */
.sef-barra-progresiva .spf-area {
    width: 100%;
    height: 8.028vw; /* 130px */
    display: flex;
    align-items: center;
    gap: 0.694vw; /* 10px */
    padding-top: 1.667vw;
    padding-bottom: 1.667vw;
    box-sizing: border-box;
}

.spf-bar-outer {
    position: relative;
    width: 100%; /* 968px */
    /* 60px */
    height: 100%;
    border-radius: 6.944vw; /* equivalente 100px (pill) */
    background: transparent;
    cursor: pointer;
    overflow: hidden;
    outline: none;
    transition: transform .25s ease;
}

.spf-bar-bg {
    position: absolute;
    inset: 0;
    background: #F2F2F2;
    border-radius: 6.944vw;
    z-index: 1;
}

.spf-bar-fill {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 0%;
    border-radius: 6.944vw;
    background: linear-gradient(90deg,#FF6600 0%,#FF6600 100%);
    z-index: 2;
    transition: width 1s ease-out;
    will-change: width;
}

/* centro texto sobre la barra */
.spf-bar-center {
    position: absolute;
    /* top: 1vw; */
    /* left: 25vw; */
    /* height: 2.292vw; */
    display: flex;
    align-items: center;
    gap: 1.62vw;
    z-index: 3;
    pointer-events: none;
    width: 100%;
    height: 100%;
    justify-content: center;
}

.spf-pre {
    font-family: "Gotham-Bold";
    font-weight: 500;
    font-size: 2.428vw !important; /* 34.96px */
    /* line-height: 1; */
    color: #FFFFFF;
    margin-right: 1vw;
}

.spf-desc {
    font-family: "Gotham-Book";
    font-weight: 400;
    font-size: 1.5vw !important; /* ajuste */
    color: #FFFFFF;
    line-height: 0;
}

/*.spf-bar-outer:hover,
.spf-bar-outer:focus,
.spf-bar-outer.active {
    transform: translateY(-0.139vw); ~ -2px
}*/

/* Grid de indicadores (2 columnas desktop, 1 mobile) */
.sef-indicadores-grid {
    margin-top: 2.5vw;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    column-gap: 4vw;
    align-items: start;
    justify-items: stretch;
    margin-bottom: -10vw;
}

/* Mobile (activar efectos hover como "activos") */
@media (max-width:767px) {
    .sef-barra-progresiva .spf-area {
        height: 12.028vw;
        margin: 6vw 0vw 6vw 0vw;
    }

    .sef-indicadores-grid {
        grid-template-columns: 1fr;
    }

    .sef-indicador-card:hover {
        transform: none;
    }
    /* no desplazar en mobile */
}

/* Card Indicador */
.sef-indicador-card {
    width: 100%; /* 513px */
    /* 676px */
    border-radius: 1vw;
    display: flex;
    flex-direction: column;
    /* gap: 1.5vw; */
    overflow: visible;
    box-sizing: border-box;
    position: relative;
    flex: 0 0 auto;
}

    .sef-indicador-card:nth-last-child(-n + 2) {
        top: -2.5vw;
    }


/* Media (imagen / carrusel) */
.sef-indicador-media {
    position: relative;
    width: 100%;
    height: 35.625vw; /* 513px */
    border-radius: 1.389vw; /* 20px */
    overflow: hidden;
}

.sef-indicador-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* degradado inferior */
.sef-indicador-gradient {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 50%;
    background: linear-gradient(to bottom, rgba(248,248,248,0) 0%, #F8F8F8 100%);
    pointer-events: none;
}

/* caja de texto que se solapa (40% dentro imagen, 60% fuera) */
.sef-indicador-info {
    width: 24.472vw; /* 266px */
    min-height: 24.472vw;
    background: #FFFFFF;
    border-radius: 1.304vw; /* 18.78px */
    padding: 5vw;
    transform: translateY(-40%); /* overlap 40% */
    box-shadow: 0 .417vw 1.25vw rgba(0,0,0,0.06); /* sombra ligera */
    box-sizing: border-box;
    align-self: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 0vw;
    text-align: initial;
}

/* textos */
.sef-indicador-pre {
    font-family: "Gotham-Light";
    font-weight: 300;
    font-size: 1.8vw !important; /* 22.53px */
    line-height: 1.8vw;
    color: #FF6600;
    margin: 0 0 .5vw 0;
    width: 100%;
}

.sef-indicador-title {
    font-family: "Gotham-Black";
    font-weight: 500;
    font-size: 5.651vw !important;
    line-height: 1;
    color: #FF6600;
    margin: 0 0 .5vw 0;
    width: 100%;
}

.sef-indicador-desc {
    font-family: "Gotham-Light";
    font-weight: 300;
    font-size: 1.9vw !important; /* 22.53px */
    line-height: 1.8vw;
    color: #606060;
    margin: 0;
    text-align: left;
}

/* Carousel simple */
.sef-carousel {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.sef-carousel-track {
    display: flex;
    transition: transform .5s ease;
    height: 100%;
}

.sef-carousel-slide {
    flex: 0 0 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.sef-carousel-next,
.sef-carousel-prev {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.8);
    border: none;
    padding: .5vw .9vw;
    border-radius: 100%;
    cursor: pointer;
    z-index: 10;
}

.sef-carousel-next {
    right: 1vw;
}

.sef-carousel-prev {
    left: 1vw;
}

/* alignment */
.carousel-right .sef-indicador-info {
    margin-left: auto;
}

.carousel-left .sef-indicador-info {
    margin-right: auto;
}

/* ajustes pequeños en pantallas <768px */
@media (max-width:767px) {

    .sef-indicador-card:nth-last-child(-n + 2) {
        top: 0vw;
    }

    .sef-indicador-media {
        height: 80vw;
        border-radius: 2.625vw;
        /* width: 100%; */
    }

    .spf-pre {
        font-size: 4.2vw !important;
    }

    .sef-indicador-card {
        width: 100%;
        height: auto;
    }

    .sef-indicador-info {
        width: 47vw;
        height: 47vw;
        transform: translateY(-36.75%);
        display: flex;
        justify-content: center;
        align-items: start;
        flex-direction: column;
        gap: 1vw;
        padding: 9vw;
        border-radius: 3.675vw;
    }

    .sef-indicador-pre {
        font-size: 4.465vw !important;
    }

    .sef-indicador-title {
        font-size: 9.35vw !important;
    }

    .sef-indicador-desc {
        font-size: 4.2vw !important;
        line-height: 1;
    }

    .spf-desc {
        font-size: 2.5vw !important;
    }
}

@media (max-width: 767px) {
    .acordeon-container {
        position: relative;
        padding-top: 0;
    }

    .acordeon-wrap {
        /* display: flex; */
        overflow-x: auto;
        /* overflow-y: visible; */
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        gap: 0;
        padding: 0;
        scrollbar-width: none;
        -ms-overflow-style: none
    }

        .acordeon-wrap::-webkit-scrollbar {
            display: none;
        }

    .acordeon-card {
        scroll-snap-align: center;
        transition: transform 0.3s, opacity 0.3s;
    }

        .acordeon-card:first-child {
            margin-left: 9vw;
        }

        .acordeon-card:last-child {
            margin-right: 9.5vw;
        }

        .acordeon-card.active {
            /* transform: scale(1.0815); */
            opacity: 1 !important;
        }

        .acordeon-card:not(.active) {
            /* transform: scale(0.9); */
            pointer-events: none;
        }

    .acordeon-btn {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 10;
        width: 7.35vw;
        height: 7.35vw;
        border: none;
        background-color: rgba(255, 102, 0, 0.9);
        color: white;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

        .acordeon-btn.left {
            left: 5.25vw;
            padding: 0;
        }

        .acordeon-btn.right {
            right: 5.25vw;
            padding: 0;
        }

        .acordeon-btn svg {
            width: 4.2vw;
            height: 4.2vw;
        }

        .acordeon-btn:disabled {
            opacity: 0;
            cursor: default;
            pointer-events: none;
        }
}

@media (min-width: 767px) {
    .acordeon-btn {
        display: none !important;
    }
}

@media (max-width: 767px) {

    .info-card__toggleicon {
        width: 4vw !important;
        height: 4vw !important;
    }

    .spf-bar-outer {
        height: 100% !important;
    }

    .gestion-row, .gestion-track {
        display: flex;
        gap: 4.2vw;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        padding: 0 calc((105vw - 46.05342vw)/2);
    }

    .gestion-card {
        margin-bottom: 5vw;
        width: 46.05342vw;
        height: 46.05342vw;
        flex: 0 0 46.05342vw;
        border-radius: 4.785165vw;
        background: #FFFFFF;
        color: #606060;
        box-shadow: 0 1.12035vw 1.73355vw -0.5082vw var(--blacka5), 0 2.34465vw 3.51645vw -0.714vw var(--blacka10);
        padding: 5.09712vw 4.077675vw;
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        scroll-snap-align: center;
        transition: background .25s ease,color .25s ease,transform .25s ease;
        /* margin-left: 6vw; */
    }

    .gestion-card__inner {
        width: auto;
        height: auto;
        display: grid;
        grid-auto-rows: max-content;
        justify-items: left;
        align-content: center;
        row-gap: 0.44856vw;
        padding: 5.25vw;
    }

    .gestion-pre {
        margin: 0;
        width: 84%;
        font-family: "Gotham-Light";
        font-weight: 300;
        font-size: 3.675vw !important;
        line-height: 4.785165vw;
        color: #606060;
    }

    .gestion-year {
        margin: 0;
        width: 100%;
        display: flex;
        gap: 0;
        align-items: center;
        line-height: 1;
        font-family: "Gotham-Black";
        font-weight: 900;
        font-size: 10.5vw !important;
    }

        .gestion-year .y-left {
            color: #BFBFBF;
        }

        .gestion-year .y-right {
            color: var(--brand-900);
        }

    .gestion-cta {
        margin-top: 1.05vw;
        display: inline-flex;
        align-items: center;
        border: 0.346605vw solid var(--brand-900);
        background: #FFFFFF;
        width: 9.18vw;
        height: 9.18vw;
        border-radius: 210vw;
        color: var(--brand-900);
        padding: 0 2.1vw;
        transition: max-width .25s ease, opacity .25s ease, padding .25s ease, background .25s ease, color .25s ease;
    }

    .gestion-cta__label {
        max-width: 0;
        opacity: 0;
        white-space: nowrap;
        font-family: "Gotham-Medium";
        font-weight: 350;
        font-size: 3.57vw !important;
        line-height: 5.0967vw;
    }

    .gestion-cta__circle {
        width: 4.3323vw;
        height: 4.3323vw;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: #FFFFFF;
        border: 0;
    }

        .gestion-cta__circle img {
            width: 6.12vw !important;
            height: 6.12vw !important;
        }

    .gestion-card.in-view {
        background: var(--brand-900);
        color: #FFFFFF;
    }

        .gestion-card.in-view .gestion-pre {
            color: #FFFFFF;
        }

        .gestion-card.in-view .gestion-year .y-left,
        .gestion-card.in-view .gestion-year .y-right {
            color: #FFFFFF;
        }

        .gestion-card.in-view .gestion-cta {
            background: #FFFFFF;
            color: var(--brand-900);
            padding: 0 4.077675vw;
        }

        .gestion-card.in-view .gestion-cta__label {
            max-width: 18.533025vw;
            opacity: 1;
        }

    @media (hover: hover) {
        .gestion-card:hover {
            background: var(--brand-900);
            color: #FFFFFF;
        }

            .gestion-card:hover .gestion-pre {
                color: #FFFFFF;
            }

            .gestion-card:hover .gestion-year .y-left,
            .gestion-card:hover .gestion-year .y-right {
                color: #FFFFFF;
            }

            .gestion-card:hover .gestion-cta {
                background: #FFFFFF;
                color: var(--brand-900);
                padding: 0 4.077675vw;
                /* max-width: 2.1vw; */
                /* height: 2.1vw; */
            }

            .gestion-card:hover .gestion-cta__label {
                max-width: 18.533025vw;
                opacity: 1;
            }
    }
}

@media (max-width: 767px) {

    .acordeon-card:hover .acordeon-text,
    .acordeon-card:hover::before {
        opacity: 1 !important;
    }

    .gestion-card.is-active {
        background: var(--brand-900);
        color: #FFFFFF;
    }

        .gestion-card.is-active .gestion-pre {
            color: #FFFFFF;
        }

        .gestion-card.is-active .gestion-year .y-left,
        .gestion-card.is-active .gestion-year .y-right {
            color: #FFFFFF;
        }

        .gestion-card.is-active .gestion-cta {
            background: #FFFFFF;
            color: var(--brand-900);
            gap: 0.5vw;
        }

        .gestion-card.is-active .gestion-cta__label {
            opacity: 1;
        }

        .gestion-card.is-active.in-view {
            background: var(--brand-900);
            color: #FFFFFF;
        }

            .gestion-card.is-active.in-view .gestion-pre {
                color: #FFFFFF;
            }

            .gestion-card.is-active.in-view .gestion-year .y-left,
            .gestion-card.is-active.in-view .gestion-year .y-right {
                color: #FFFFFF;
            }

            .gestion-card.is-active.in-view .gestion-cta {
                background: #FFFFFF;
                color: var(--brand-900);
                padding: 0 4.077675vw;
            }

            .gestion-card.is-active.in-view .gestion-cta__label {
                max-width: 18.533025vw;
                opacity: 1;
            }

    .gestion-card.is-active {
        background: var(--brand-900);
        color: #FFFFFF;
    }

        .gestion-card.is-active .gestion-pre {
            color: #FFFFFF;
        }

        .gestion-card.is-active .gestion-year .y-left,
        .gestion-card.is-active .gestion-year .y-right {
            color: #FFFFFF;
        }

        .gestion-card.is-active .gestion-cta {
            background: #FFFFFF;
            color: var(--brand-900);
            padding: 3.077675vw;
            width: 100%;
            gap: 3.5vw;
            height: 9.18vw;
        }

        .gestion-card.is-active .gestion-cta__label {
            max-width: 18.533025vw;
            opacity: 1;
        }

    .gestion-card:not(.is-active) {
        pointer-events: none !important;
    }
}