/*.information {
    --background-color: #F2F2F2;
    --text-color: #A1A1AA;
    --card-background-color: rgba(255, 255, 255, .015);
    --card-border-color: rgba(255, 255, 255, 0.1);
    --card-box-shadow-1: rgba(0, 0, 0, 0.05);
    --card-box-shadow-1-y: 3px;
    --card-box-shadow-1-blur: 6px;
    --card-box-shadow-2: rgba(0, 0, 0, 0.1);
    --card-box-shadow-2-y: 8px;
    --card-box-shadow-2-blur: 15px;
    --card-label-color: #FFFFFF;
    --card-icon-color: #D4D4D8;
    --card-icon-background-color: rgba(255, 255, 255, 0.08);
    --card-icon-border-color: rgba(255, 255, 255, 0.12);
    --card-shine-opacity: .1;
    --card-shine-gradient: conic-gradient(from 205deg at 50% 50%, rgba(16, 185, 129, 0) 0deg, #10B981 25deg, rgba(52, 211, 153, 0.18) 295deg, rgba(16, 185, 129, 0) 360deg);
    --card-line-color: #2A2B2C;
    --card-tile-color: rgba(16, 185, 129, 0.05);
    --card-hover-border-color: rgba(255, 255, 255, 0.2);
    --card-hover-box-shadow-1: rgba(0, 0, 0, 0.04);
    --card-hover-box-shadow-1-y: 5px;
    --card-hover-box-shadow-1-blur: 10px;
    --card-hover-box-shadow-2: rgba(0, 0, 0, 0.3);
    --card-hover-box-shadow-2-y: 15px;
    --card-hover-box-shadow-2-blur: 25px;
    --card-hover-icon-color: #34D399;
    --card-hover-icon-background-color: rgba(52, 211, 153, 0.1);
    --card-hover-icon-border-color: rgba(52, 211, 153, 0.2);
    --blur-opacity: .01;
}

    .information.light {
        --background-color: #FAFAFA;
        --text-color: #52525B;
        --card-background-color: transparent;
        --card-border-color: rgba(24, 24, 27, 0.08);
        --card-box-shadow-1: rgba(24, 24, 27, 0.02);
        --card-box-shadow-1-y: 3px;
        --card-box-shadow-1-blur: 6px;
        --card-box-shadow-2: rgba(24, 24, 27, 0.04);
        --card-box-shadow-2-y: 2px;
        --card-box-shadow-2-blur: 7px;
        --card-label-color: #18181B;
        --card-icon-color: #18181B;
        --card-icon-background-color: rgba(24, 24, 27, 0.04);
        --card-icon-border-color: rgba(24, 24, 27, 0.1);
        --card-shine-opacity: .3;
        --card-shine-gradient: conic-gradient(from 225deg at 50% 50%, rgba(16, 185, 129, 0) 0deg, #10B981 25deg, #EDFAF6 285deg, #FFFFFF 345deg, rgba(16, 185, 129, 0) 360deg);
        --card-line-color: #E9E9E7;
        --card-tile-color: rgba(16, 185, 129, 0.08);
        --card-hover-border-color: rgba(24, 24, 27, 0.15);
        --card-hover-box-shadow-1: rgba(24, 24, 27, 0.05);
        --card-hover-box-shadow-1-y: 3px;
        --card-hover-box-shadow-1-blur: 6px;
        --card-hover-box-shadow-2: rgba(24, 24, 27, 0.1);
        --card-hover-box-shadow-2-y: 8px;
        --card-hover-box-shadow-2-blur: 15px;
        --card-hover-icon-color: #18181B;
        --card-hover-icon-background-color: rgba(24, 24, 27, 0.04);
        --card-hover-icon-border-color: rgba(24, 24, 27, 0.34);
        --blur-opacity: .1;
    }*/

/*.information.toggle .servec-001 * {
    transition-duration: 0s !important;
}*/


.servec-001 {
    display: block;
    grid-template-columns: repeat(3, 300px);
    grid-gap: 100px;
    position: relative;
    z-index: 1;
}

.servec-002 {
    background-color: white;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    padding: 56px 16px 16px 16px;
    border-radius: 15px;
    cursor: pointer;
    position: relative;
    transition: box-shadow .25s;
}

    .servec-002::before {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: 15px;
        background-color: var(--card-background-color);
    }

    .servec-002 .servec-003 {
        z-index: 2;
        position: relative;
        display: table;
        padding: 8px;
    }

        .servec-002 .servec-003::after {
            content: '';
            position: absolute;
            inset: 4.5px;
            border-radius: 50%;
            background-color: var(--card-icon-background-color);
            border: 1px solid var(--card-icon-border-color);
            backdrop-filter: blur(2px);
            transition: background-color .25s, border-color .25s;
        }

        .servec-002 .servec-003 svg {
            position: relative;
            z-index: 1;
            display: block;
            width: 40px;
            height: 40px;
            transform: translateZ(0);
            color: #525252;
            transition: color .25s;
            stroke-width:2;
        }

    .servec-002 h4 {
        z-index: 2;
        position: relative;
        margin: 12px 0 4px 0;
        font-family: inherit;
        font-weight: bold;
        font-size: 14px;
        line-height: 2;
        color: #525252;
    }

    .servec-002 p {
        z-index: 2;
        position: relative;
        margin: 0;
        font-size: 14px;
        line-height: 1.7;
        color: #8c8a8a;
        text-align:justify;
    }

    .servec-002 .servec-004 {
        border-radius: inherit;
        position: absolute;
        inset: 0;
        z-index: 1;
        overflow: hidden;
        opacity: 0;
        transition: opacity .5s;
    }

        .servec-002 .servec-004:before {
            content: '';
            width: 150%;
            padding-bottom: 150%;
            border-radius: 50%;
            position: absolute;
            left: 50%;
            bottom: 55%;
            filter: blur(35px);
            opacity: var(--card-shine-opacity);
            transform: translateX(-50%);
            background-image: var(--card-shine-gradient);
        }

    .servec-002 .servec-005 {
        border-radius: inherit;
        position: absolute;
        inset: 0;
        overflow: hidden;
        -webkit-mask-image: radial-gradient(circle at 60% 5%, black 0%, black 15%, transparent 60%);
        mask-image: radial-gradient(circle at 60% 5%, black 0%, black 15%, transparent 60%);
    }

        .servec-002 .servec-005 .servec-006 {
            opacity: 0;
            transition: opacity .25s;
        }

            .servec-002 .servec-005 .servec-006 .servec-007 {
                position: absolute;
                background-color: var(--card-tile-color);
                animation-duration: 8s;
                animation-iteration-count: infinite;
                opacity: 0;
            }

            .servec-002 .servec-005 .servec-006 .servec-011,
            .servec-002 .servec-005 .servec-006 .servec-013,
            .servec-002 .servec-005 .servec-006 .servec-017 {
                animation-delay: -2s;
            }

            .servec-002 .servec-005 .servec-006 .servec-010,
            .servec-002 .servec-005 .servec-006 .servec-012,
            .servec-002 .servec-005 .servec-006 .servec-015 {
                animation-delay: -4s;
            }

            .servec-002 .servec-005 .servec-006 .servec-009,
            .servec-002 .servec-005 .servec-006 .servec-016 {
                animation-delay: -6s;
            }

            .servec-002 .servec-005 .servec-006 .servec-008 {
                top: 0;
                left: 0;
                height: 10%;
                width: 22.5%;
            }

            .servec-002 .servec-005 .servec-006 .servec-009 {
                top: 0;
                left: 22.5%;
                height: 10%;
                width: 27.5%;
            }

            .servec-002 .servec-005 .servec-006 .servec-010 {
                top: 0;
                left: 50%;
                height: 10%;
                width: 27.5%;
            }

            .servec-002 .servec-005 .servec-006 .servec-011 {
                top: 0;
                left: 77.5%;
                height: 10%;
                width: 22.5%;
            }

            .servec-002 .servec-005 .servec-006 .servec-012 {
                top: 10%;
                left: 0;
                height: 22.5%;
                width: 22.5%;
            }

            .servec-002 .servec-005 .servec-006 .servec-013 {
                top: 10%;
                left: 22.5%;
                height: 22.5%;
                width: 27.5%;
            }

            .servec-002 .servec-005 .servec-006 .servec-014 {
                top: 10%;
                left: 50%;
                height: 22.5%;
                width: 27.5%;
            }

            .servec-002 .servec-005 .servec-006 .servec-015 {
                top: 10%;
                left: 77.5%;
                height: 22.5%;
                width: 22.5%;
            }

            .servec-002 .servec-005 .servec-006 .servec-016 {
                top: 32.5%;
                left: 50%;
                height: 22.5%;
                width: 27.5%;
            }

            .servec-002 .servec-005 .servec-006 .servec-017 {
                top: 32.5%;
                left: 77.5%;
                height: 22.5%;
                width: 22.5%;
            }

@keyframes tile {
    0%, 12.5%, 100% {
        opacity: 1;
    }

    25%, 82.5% {
        opacity: 0;
    }
}

.servec-002 .servec-005 .servec-018 {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .35s;
}

    .servec-002 .servec-005 .servec-018:before,
    .servec-002 .servec-005 .servec-018:after {
        content: '';
        position: absolute;
        background-color: rgb(210, 24, 129);
        transition: transform .35s;
    }

    .servec-002 .servec-005 .servec-018:before {
        left: 0;
        right: 0;
        height: 1px;
        transform-origin: 0 50%;
        transform: scaleX(0);
    }

    .servec-002 .servec-005 .servec-018:after {
        top: 0;
        bottom: 0;
        width: 1px;
        transform-origin: 50% 0;
        transform: scaleY(0);
    }

.servec-002 .servec-005 .servec-019 {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .35s;
}

    .servec-002 .servec-005 .servec-019:before {
        top: 10%;
    }

    .servec-002 .servec-005 .servec-019:after {
        left: 22.5%;
    }

    .servec-002 .servec-005 .servec-019:before,
    .servec-002 .servec-005 .servec-019:after {
        transition-delay: .3s;
    }

.servec-002 .servec-005 .servec-020 {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .35s;
}

    .servec-002 .servec-005 .servec-020:before {
        top: 32.5%;
    }

    .servec-002 .servec-005 .servec-020:after {
        left: 50%;
    }

    .servec-002 .servec-005 .servec-020:before,
    .servec-002 .servec-005 .servec-020:after {
        transition-delay: .15s;
    }

.servec-002 .servec-005 .servec-021 {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .35s;
}

    .servec-002 .servec-005 .servec-021:before {
        top: 55%;
    }

    .servec-002 .servec-005 .servec-021:after {
        right: 22.5%;
    }

.servec-002:hover {
    box-shadow: 0 8px 32px #DF1995;
}

    .servec-002:hover .servec-003::after {
        background-color: var(--card-hover-icon-background-color);
        border-color: var(--card-hover-icon-border-color);
    }

    .servec-002:hover .servec-003 svg {
        color: rgb(210, 24, 129);
    }

    .servec-002:hover .servec-004 {
        opacity: 1;
        transition-duration: .5s;
        transition-delay: 0s;
    }

    .servec-002:hover .servec-005 .servec-006 {
        opacity: 1;
        transition-delay: .25s;
    }

        .servec-002:hover .servec-005 .servec-006 .servec-007 {
            animation-name: tile;
        }

    .servec-002:hover .servec-005 .servec-018 {
        opacity: 1;
        transition-duration: .15s;
    }

        .servec-002:hover .servec-005 .servec-018:before {
            transform: scaleX(1);
        }

        .servec-002:hover .servec-005 .servec-018:after {
            transform: scaleY(1);
        }

    .servec-002:hover .servec-005 .servec-019:before,
    .servec-002:hover .servec-005 .servec-019:after {
        transition-delay: .0s;
    }

    .servec-002:hover .servec-005 .servec-020:before,
    .servec-002:hover .servec-005 .servec-020:after {
        transition-delay: .15s;
    }

    .servec-002:hover .servec-005 .servec-021:before,
    .servec-002:hover .servec-005 .servec-021:after {
        transition-delay: .3s;
    }

.servec-022 {
    cursor: pointer;
    position: absolute;
    right: 20px;
    top: 20px;
    opacity: .3;
}

    .servec-022 input {
        display: none;
    }

        .servec-022 input + div {
            border-radius: 50%;
            width: 20px;
            height: 20px;
            position: relative;
            box-shadow: inset 8px -8px 0 0 var(--text-color);
            transform: scale(1) rotate(-2deg);
            transition: box-shadow .5s ease 0s, transform .4s ease .1s;
        }

            .servec-022 input + div:before {
                content: '';
                width: inherit;
                height: inherit;
                border-radius: inherit;
                position: absolute;
                left: 0;
                top: 0;
                transition: background-color .3s ease;
            }

            .servec-022 input + div:after {
                content: '';
                width: 6px;
                height: 6px;
                border-radius: 50%;
                margin: -3px 0 0 -3px;
                position: absolute;
                top: 50%;
                left: 50%;
                box-shadow: 0 -23px 0 var(--text-color), 0 23px 0 var(--text-color), 23px 0 0 var(--text-color), -23px 0 0 var(--text-color), 15px 15px 0 var(--text-color), -15px 15px 0 var(--text-color), 15px -15px 0 var(--text-color), -15px -15px 0 var(--text-color);
                transform: scale(0);
                transition: all .3s ease;
            }

        .servec-022 input:checked + div {
            box-shadow: inset 20px -20px 0 0 var(--text-color);
            transform: scale(.5) rotate(0deg);
            transition: transform .3s ease .1s, box-shadow .2s ease 0s;
        }

            .servec-022 input:checked + div:before {
                background: var(--text-color);
                transition: background-color .3s ease .1s;
            }

            .servec-022 input:checked + div:after {
                transform: scale(1);
                transition: transform .5s ease .15s;
            }

html {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
}

* {
    box-sizing: inherit;
}

    *:before,
    *:after {
        box-sizing: inherit;
    }

.information {
    min-height: 55vh;
    display: flex;
    font-family: 'Inter', Arial;
    justify-content: center;
    align-items: center;
    background-color: var(--background-color);
    overflow: hidden;
}

    .information:before {
        content: '';
        position: absolute;
        inset: 0 -60% 65% -60%;
        background-image: radial-gradient(ellipse at top, #10B981 0%, var(--background-color) 50%);
        opacity: var(--blur-opacity);
    }

    .information .servec-023 {
        position: fixed;
        display: block;
        right: 12px;
        bottom: 12px;
    }

    .information .servec-023 svg {
        width: 32px;
        height: 32px;
        fill: #fff;
    }

#sub {
    text-align: center;
    font-size: 16px;
    color: rgb(0, 150, 64);
    font-weight: bold;
}

#tit{
    margin-top: 30px;
}

@media (min-width: 768px) {
    .servec-001 {
        display: grid !important; /* Desde md hacia arriba */
    }
}

@media (max-width: 767.98px) {
    .servec-002 {
        margin-top: 0.5rem; /* mt-2 en Bootstrap = 0.5rem */
    }
}

    /* ==============================
   VER MÁS - ESTILO SERVIENTREGA COLOMBIA
   ============================== */

    .track .solution-card a.solution-link {
        color: #009640 !important; /* verde corporativo */
        text-decoration: none !important;
        font-weight: 600;
        font-size: 15px;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        transition: all .25s ease;
    }

        /* Flecha */
        .track .solution-card a.solution-link::after {
            content: "›";
            font-size: 18px;
            line-height: 1;
            transition: transform .25s ease;
        }

        /* Hover */
        .track .solution-card a.solution-link:hover {
            color: #007a33 !important;
            text-decoration: none !important;
        }

            .track .solution-card a.solution-link:hover::after {
                transform: translateX(4px);
            }

/* ==============================
   CONTÁCTENOS
   ============================== */

.parallax-section .parallax-content .solution-link {
    color: #fff !important;
    text-decoration: none !important;
    font-weight: 599;
    font-size: 18px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all .25s ease;
}

/* Flecha */
    .parallax-section .parallax-content .solution-link::after {
        content: "›";
        font-size: 18px;
        line-height: 1;
        transition: transform .25s ease;
    }

    /* Hover */
    .parallax-section .parallax-content .solution-link:hover {
        color: #8edd65 !important;
        text-decoration: none !important;
    }

.parallax-section .parallax-content .solution-link:hover::after {
    transform: translateX(4px);
}

    /* Fondo verde oscuro decorativo */
    /*.parallax-section .parallax-content .solution-link::before {
        content: "";
        position: absolute;
        inset: 0;
        background: #009a44;*/ /* verde más oscuro */
        /*border-radius: 40px;*/ /* forma tipo Colombia */
        /*z-index: -1;
    }*/
/* SOLO el link "Contáctenos" */
#contact-link {
    display: inline-block !important; /* <- mata el inline-flex */
    width: fit-content !important; /* <- se ajusta al texto */
    padding: 6px 16px !important;
    position: relative;
    z-index: 1;
}

/* Fondo verde SOLO para esa palabra */
/*#contact-link::before {
    content: "";
    position: absolute;
    inset: 0;
    background: #009a44;*/ /* verde oscuro */
    /*border-radius: 40px;
    z-index: -1;
}*/

    /* Flecha si la quieres */
    #contact-link::after {
        content: "›";
        margin-left: 8px;
        transition: transform .25s ease;
    }

    #contact-link:hover::after {
        transform: translateX(4px);
    }

/* === Overrides sección Valores agregados === */
#information.information {
    --padY: clamp(32px, 4vh, 56px);
    background: #fff !important;
    padding-block: var(--padY) !important;
    min-height: auto !important;
    display: block !important;
    position: relative;
}

#tit {
    margin: 0 0 8px 0 !important;
}

#sub {
    margin: 0 0 clamp(24px, 3vh, 36px) 0 !important; /* espacio hacia las cards */
}

#information .servec-001 {
    margin-bottom: clamp(24px, 3vh, 36px);
}

/* Más espacio interno en las tarjetas (texto no pegado al borde) */
.servec-002 {
    padding: 56px 24px 24px 24px !important; /* antes: 56px 16px 16px 16px */
}

    /* Si quieres todavía más aire lateral en el párrafo */
    .servec-002 p {
        padding-left: 2px;
        padding-right: 2px;
    }


@media (min-width: 768px) {
    .servec-001 {
        grid-gap: 40px !important; /* antes: 100px */
        grid-template-columns: repeat(3, minmax(260px, 320px)) !important;
        justify-content: center;
    }
}

/* ==========================
   AJUSTES SOLO MOBILE
   ========================== */
@media (max-width: 767.98px) {

    /* Espacio lateral del contenedor */
    #information {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    /* Separación vertical entre cards */
    .servec-002 {
        margin-bottom: 24px !important; /* más aire entre tarjetas */
        padding: 56px 24px 28px 24px !important; /* más padding interno */
    }

        /*  Mejorar lectura del texto */
        .servec-002 p {
            padding-left: 4px;
            padding-right: 4px;
            line-height: 1.8;
        }

    /*  Asegurar ancho completo pero con aire */
    .servec-001 {
        display: flex !important;
        flex-direction: column;
        gap: 0; /* usamos margin-bottom en card */
    }
}