/* =========================================
   EASYACCESS
   V4
========================================= */


:root {

    --blue-950: #020d1a;
    --blue-900: #061a30;
    --blue-800: #092946;
    --blue-700: #1c517f;
    --blue-600: #0f5792;
    --blue-500: #1675bd;

    --white: #ffffff;

    --gray-100: #f1f3f6;
    --gray-200: #dfe5eb;
    --gray-500: #718096;

    --whatsapp: #25d366;

    --radius: 22px;
}


/* =========================================
   RESET
========================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}


body {

    font-family:
        "Inter",
        sans-serif;

    background:
        var(--blue-950);

    color:
        var(--blue-950);

    overflow-x: hidden;
}


a {
    text-decoration: none;
    color: inherit;
}


/* =========================================
   MAIN CARD
========================================= */

.card {

    width: 100%;

    max-width: 620px;

    min-height: 100vh;

    margin: auto;

    background:
        var(--white);

    overflow: hidden;
}


/* =========================================
   HERO
========================================= */

.hero {

    padding:
        28px
        22px
        35px;

    text-align: center;

    color:
        var(--white);

    background:

        radial-gradient(
            circle at 50% -20%,
            rgba(22,117,189,.42),
            transparent 45%
        ),

        linear-gradient(
            145deg,
            var(--blue-950),
            var(--blue-800)
        );
}


/* =========================================
   BRAND
========================================= */

.brand {

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 30px;

    /* Evita que el logo quede limitado */
    min-height: 70px;
}


.brand img {

    display: block;

    width: 230px;

    height: 70px;

    object-fit: contain;

    object-position: center;

    /* El PNG conserva sus proporciones */
    max-width: 90%;

    filter: none;
}


/* =========================================
   QUICK ACTIONS
========================================= */

.quick-actions {

    display:
        grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap:
        8px;

    margin-bottom:
        32px;
}


.quick-action {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        flex-start;

    gap:
        7px;

    color:
        #ffffff;
}


.quick-action span {

    font-size:
        9px;

    font-weight:
        600;

    line-height:
        1.2;

    white-space:
        nowrap;
}


/* =========================================
   QUICK ICON
========================================= */

.quick-icon {

    width:
        52px;

    height:
        52px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        #ffffff;

    color:
        var(--blue-950);

    box-shadow:
        0 8px 18px
        rgba(0,0,0,.16);

    transition:
        transform .2s ease;
}


.quick-action:hover
.quick-icon {

    transform:
        translateY(-3px);
}


.quick-icon svg {

    width:
        31px;

    height:
        31px;

    fill:
        none;

    stroke:
        var(--blue-950);

    stroke-width:
        1.8;
}


/* =========================================
   ICON SPECIAL CASES
========================================= */

.quick-icon .icon-fill {

    fill:
        var(--blue-950);

    stroke:
        none;
}


.quick-icon .plus {

    stroke:
        #ffffff;

    stroke-width:
        2.5;

    fill:
        none;
}


/* WhatsApp */

.quick-action:nth-child(2)
.quick-icon svg {

    fill:
        var(--blue-950);

    stroke:
        none;
}


/* Instagram */

.quick-action:nth-child(3)
.quick-icon svg rect {

    fill:
        none;

    stroke:
        var(--blue-950);

    stroke-width:
        1.8;
}


.quick-action:nth-child(3)
.quick-icon svg circle {

    fill:
        none;

    stroke:
        var(--blue-950);

    stroke-width:
        1.8;
}


.quick-action:nth-child(3)
.quick-icon svg .icon-fill {

    fill:
        var(--blue-950);

    stroke:
        none;
}


/* =========================================
   PROFILE
========================================= */

.profile-info {

    margin-top:
        5px;
}


.eyebrow {

    display:
        block;

    margin-bottom:
        8px;

    color:
        #69b4ef;

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        .15em;
}


.profile-info h1 {

    font-size:
        clamp(
            29px,
            8vw,
            40px
        );

    line-height:
        1.04;

    letter-spacing:
        -.045em;

    margin-bottom:
        8px;
}


.profile-info p {

    color:
        #b5d4ec;

    font-size:
        14px;

    font-weight:
        600;
}


/* =========================================
   SAVE CONTACT
========================================= */

.save-contact {

    width:
        100%;

    min-height:
        50px;

    margin-top:
        24px;

    padding:
        0 18px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    border-radius:
        14px;

    background:
        rgba(255,255,255,.08);

    border:
        1px solid
        rgba(255,255,255,.18);

    color:
        #ffffff;

    font-size:
        12px;

    font-weight:
        700;
}


/* =========================================
   SOLUTIONS
========================================= */

.solutions {

    padding:
        38px
        0
        38px
        22px;

    background:
        var(--gray-100);
}


.section-heading {

    padding-right:
        22px;

    margin-bottom:
        21px;
}


.section-heading h2 {

    font-size:
        25px;

    line-height:
        1.15;

    letter-spacing:
        -.035em;
}


/* =========================================
   CAROUSEL
========================================= */

.solutions-carousel {

    display:
        flex;

    gap:
        12px;

    overflow-x:
        auto;

    overflow-y:
        hidden;

    padding-right:
        22px;

    padding-bottom:
        7px;

    scroll-snap-type:
        x mandatory;

    -webkit-overflow-scrolling:
        touch;

    scrollbar-width:
        none;
}


.solutions-carousel::-webkit-scrollbar {
    display: none;
}


/* =========================================
   VIDEO CARDS
========================================= */

.solution-card {

    position: relative;

    flex: 0 0 78%;

    /*
       Relación aproximada 4:5.
       Ideal para videos verticales
       grabados con teléfono.
    */

    aspect-ratio: 4 / 5;

    height: auto;

    overflow: hidden;

    border-radius: 24px;

    background: #061a30;

    scroll-snap-align: start;

    box-shadow:
        0 14px 35px
        rgba(3, 17, 31, .20);
}


.solution-video {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    /*
       Mantiene el video proporcional
       sin deformarlo.
    */

    object-fit: cover;

    object-position: center;

    display: block;

    background: #061a30;
}
/* =========================================
   HORIZONTAL VIDEO
========================================= */

.solution-card.video-horizontal
.solution-video {

    object-fit: contain;

    background: #020d1a;
}

.video-overlay {

    position:
        absolute;

    inset:
        0;

    background:

        linear-gradient(
            to top,
            rgba(2,13,26,.95),
            rgba(2,13,26,.12) 65%,
            rgba(2,13,26,.04)
        );
}


.solution-content {

    position:
        absolute;

    left:
        20px;

    right:
        20px;

    bottom:
        20px;

    color:
        #ffffff;
}


.solution-number {

    display:
        block;

    margin-bottom:
        8px;

    color:
        #78c0ef;

    font-size:
        11px;

    font-weight:
        700;

    letter-spacing:
        .1em;
}


.solution-content h3 {

    max-width:
        250px;

    font-size:
        25px;

    line-height:
        1.05;

    letter-spacing:
        -.035em;
}


.solution-arrow {

    position:
        absolute;

    right:
        0;

    bottom:
        2px;

    width:
        43px;

    height:
        43px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        rgba(255,255,255,.15);

    backdrop-filter:
        blur(8px);

    font-size:
        18px;
}


/* =========================================
   CAROUSEL INDICATOR
========================================= */

.carousel-indicator {

    display:
        flex;

    justify-content:
        center;

    gap:
        5px;

    padding-right:
        22px;

    margin-top:
        13px;
}


.carousel-indicator span {

    width:
        5px;

    height:
        5px;

    border-radius:
        50%;

    background:
        #bdc8d3;
}


.carousel-indicator span:first-child {

    width:
        20px;

    border-radius:
        10px;

    background:
        var(--blue-700);
}


/* =========================================
   BRANDS
========================================= */

.brands {

    padding:
        30px
        22px;

    background:
        #ffffff;

    overflow:
        hidden;
}


.brands-heading {

    margin-bottom:
        14px;
}


.brands-heading .eyebrow {

    margin-bottom:
        5px;
}


.brands-heading h2 {

    max-width:
        300px;

    font-size:
        20px;

    line-height:
        1.1;

    letter-spacing:
        -.035em;
}


/* =========================================
   BRANDS WINDOW
========================================= */

.brands-window {

    position:
        relative;

    height:
        180px;

    overflow:
        hidden;

    border-radius:
        16px;

    background:
        #f1f3f6;

    display:
        flex;

    justify-content:
        center;
}


/* =========================================
   BRANDS TRACK
========================================= */

.brands-track {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    /*
       Cada nombre mide exactamente 36px.
       El loop avanza exactamente 16 × 36px.
    */

    animation:
        brandsScroll 24s linear infinite;

    will-change:
        transform;

}


/* =========================================
   BRAND NAME
========================================= */

.brands-track span {

    flex:
        0 0 30px;

    height:
        30px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    white-space:
        nowrap;

    color:
        #092946;

    font-size:
        15px;

    line-height:
        36px;

    font-weight:
        600;

    letter-spacing:
        -.02em;
}


/* =========================================
   PERFECT LOOP
========================================= */

@keyframes brandsScroll {

    from {

        transform:
            translateY(0);
    }

    to {

        transform:
            translateY(-576px);
    }

}

/* =========================================
   CTA
========================================= */

.cta {

    padding:
        12px
        22px
        38px;
}


.cta-card {

    padding:
        27px
        22px;

    border-radius:
        var(--radius);

    color:
        #ffffff;

    background:

        radial-gradient(
            circle at 100% 0%,
            rgba(22,117,189,.5),
            transparent 42%
        ),

        linear-gradient(
            145deg,
            var(--blue-800),
            var(--blue-950)
        );
}


.cta-label {

    display:
        block;

    margin-bottom:
        8px;

    color:
        #69b4ef;

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        .14em;
}


.cta h2 {

    font-size:
        22px;

    letter-spacing:
        -.03em;
}


.cta p {

    margin:
        3px 0 18px;

    color:
        #a8c8e1;

    font-size:
        13px;
}


.btn {

    min-height:
        50px;

    padding:
        0 18px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    border-radius:
        14px;

    font-size:
        13px;

    font-weight:
        700;
}


.btn-cta {

    background:
        #ffffff;

    color:
        var(--blue-900);
}


/* =========================================
   FOOTER
========================================= */

footer {

    padding:
        30px
        22px
        80px;

    text-align:
        center;

    background:
        var(--gray-100);
}


footer img {

    width:
        115px;

    margin-bottom:
        7px;
}


footer span {

    display:
        block;

    color:
        var(--gray-500);

    font-size:
        10px;
}


/* =========================================
   FLOATING WHATSAPP
========================================= */

.whatsapp-floating {

    position:
        fixed;

    right:
        18px;

    bottom:
        18px;

    width:
        58px;

    height:
        58px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        var(--whatsapp);

    box-shadow:
        0 10px 30px
        rgba(0,0,0,.28);

    z-index:
        999999;

    cursor:
        pointer;
}


.whatsapp-floating svg {

    width:
        28px;

    height:
        28px;

    fill:
        #ffffff;
}


/* =========================================
   WHATSAPP PULSE
========================================= */

.whatsapp-floating::before {

    content:
        "";

    position:
        absolute;

    inset:
        -4px;

    border-radius:
        50%;

    border:
        2px solid
        rgba(37,211,102,.35);

    animation:
        whatsappPulse 2s infinite;
}


@keyframes whatsappPulse {

    0% {

        transform:
            scale(.9);

        opacity:
            .8;
    }

    70% {

        transform:
            scale(1.25);

        opacity:
            0;
    }

    100% {

        opacity:
            0;
    }
}


/* =========================================
   DESKTOP
========================================= */

@media (min-width: 700px) {

    body {

        padding:
            30px 0;
    }


    .card {

        min-height:
            auto;

        border-radius:
            28px;

        box-shadow:
            0 25px 70px
            rgba(0,0,0,.25);
    }


    .solution-card {

        flex:
            0 0 65%;
    }


    .whatsapp-floating {

        right:
            calc(50% - 350px);

        bottom:
            30px;
    }

}


/* =========================================
   SMALL PHONES
========================================= */

@media (max-width: 360px) {

    .hero {

        padding-left:
            17px;

        padding-right:
            17px;
    }


    .solutions {

        padding-left:
            17px;
    }


    .quick-icon {

        width:
            48px;

        height:
            48px;
    }


    .quick-icon svg {

        width:
            28px;

        height:
            28px;
    }


    .quick-action span {

        font-size:
            8px;
    }


    .solution-card {

        flex:
            0 0 87%;

        height:
            350px;
    }

}