/* ========================================
   BASE DE LA PÁGINA
======================================== */

.about-page {

    background:
        var(--rumby-cream);

}


.mobile-nav a.active {

    color:
        var(--rumby-teal-dark);

}


.about-mobile-badge {

    background:
        rgba(25, 181, 165, 0.10);

    color:
        var(--rumby-teal-dark);

}



/* ========================================
   ELEMENTOS COMPARTIDOS DE NOSOTROS
======================================== */

.about-eyebrow,
.about-section-eyebrow {

    width:
        fit-content;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    padding:
        8px 13px;

    border:
        1px solid rgba(25, 181, 165, 0.20);

    border-radius:
        999px;

    background:
        rgba(25, 181, 165, 0.07);

    color:
        var(--rumby-teal-dark);

    font-size:
        0.8rem;

    font-weight:
        700;

}


.about-eyebrow {

    margin-bottom:
        21px;

}


.about-section-eyebrow {

    margin-bottom:
        17px;

}


.about-eyebrow-dot {

    width:
        8px;

    height:
        8px;

    flex:
        0 0 auto;

    border-radius:
        50%;

    background:
        var(--rumby-coral);

}


.about-section-title {

    margin:
        0 0 20px;

    color:
        var(--rumby-dark);

    font-size:
        clamp(2.5rem, 4.4vw, 4.5rem);

    font-weight:
        800;

    line-height:
        1.02;

    letter-spacing:
        -0.05em;

}


.about-section-title span {

    color:
        var(--rumby-teal);

}


.about-section-description {

    max-width:
        650px;

    margin:
        0 0 17px;

    color:
        var(--rumby-text);

    font-size:
        1rem;

    line-height:
        1.75;

}


.about-primary-button {

    min-height:
        54px;

    width:
        fit-content;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    padding:
        13px 22px;

    border:
        0;

    border-radius:
        16px;

    background:
        var(--rumby-teal);

    color:
        white;

    font-size:
        0.92rem;

    font-weight:
        700;

    text-decoration:
        none;

    box-shadow:
        0 13px 28px rgba(25, 181, 165, 0.20);

    transition:
        transform var(--rumby-transition),
        background var(--rumby-transition),
        box-shadow var(--rumby-transition);

}


.about-primary-button:hover {

    transform:
        translateY(-2px);

    background:
        var(--rumby-teal-dark);

    color:
        white;

    box-shadow:
        0 17px 33px rgba(25, 181, 165, 0.25);

}



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

.about-hero {

    position:
        relative;

    overflow:
        hidden;

    padding:
        86px 0 90px;

    background:
        linear-gradient(
            180deg,
            #F8F7F3 0%,
            #F4F8F6 100%
        );

}


.about-hero::before {

    content:
        "";

    position:
        absolute;

    top:
        -200px;

    right:
        -170px;

    width:
        520px;

    height:
        520px;

    border-radius:
        50%;

    background:
        rgba(25, 181, 165, 0.07);

    pointer-events:
        none;

}


.about-hero-row {

    position:
        relative;

    z-index:
        2;

}


.about-hero-title {

    max-width:
        720px;

    margin:
        0 0 25px;

    color:
        var(--rumby-dark);

    font-size:
        clamp(3.1rem, 5.2vw, 5.5rem);

    font-weight:
        800;

    line-height:
        0.98;

    letter-spacing:
        -0.058em;

}


.about-hero-title span {

    display:
        block;

    color:
        var(--rumby-teal);

}


.about-hero-description {

    max-width:
        600px;

    margin:
        0 0 31px;

    color:
        var(--rumby-text);

    font-size:
        clamp(1.03rem, 1.5vw, 1.18rem);

    line-height:
        1.7;

}



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

.about-hero-visual {

    position:
        relative;

    width:
        min(100%, 610px);

    min-height:
        520px;

    margin:
        0 0 0 auto;

}


.about-hero-main-image {

    position:
        absolute;

    top:
        0;

    left:
        0;

    width:
        82%;

    height:
        425px;

    overflow:
        hidden;

    border:
        6px solid rgba(255, 255, 255, 0.93);

    border-radius:
        31px;

    background:
        #DCE9E5;

    box-shadow:
        0 25px 60px rgba(23, 35, 33, 0.16);

}


.about-hero-main-image img,
.about-hero-secondary-image img,
.about-venezuela-image img,
.about-future-image img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

}


.about-hero-secondary-image {

    position:
        absolute;

    right:
        0;

    top:
        225px;

    z-index:
        4;

    width:
        43%;

    height:
        210px;

    overflow:
        hidden;

    border:
        6px solid white;

    border-radius:
        27px;

    background:
        #E5EFEC;

    box-shadow:
        0 20px 45px rgba(23, 35, 33, 0.16);

}


.about-image-location {

    position:
        absolute;

    left:
        18px;

    bottom:
        17px;

    z-index:
        4;

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    padding:
        9px 12px;

    border:
        1px solid rgba(255, 255, 255, 0.16);

    border-radius:
        13px;

    background:
        rgba(23, 35, 33, 0.72);

    color:
        white;

    backdrop-filter:
        blur(10px);

    -webkit-backdrop-filter:
        blur(10px);

}


.about-image-location i {

    flex:
        0 0 auto;

    font-size:
        1.1rem;

}


.about-image-location strong {

    display:
        block;

    font-size:
        0.73rem;

    font-weight:
        800;

    line-height:
        1.25;

}


.about-image-location span {

    display:
        block;

    margin-top:
        1px;

    color:
        rgba(255, 255, 255, 0.73);

    font-size:
        0.62rem;

}


.about-hero-message {

    position:
        absolute;

    right:
        8px;

    bottom:
        23px;

    z-index:
        5;

    min-width:
        185px;

    padding:
        17px 19px;

    border:
        1px solid rgba(23, 35, 33, 0.07);

    border-radius:
        19px;

    background:
        rgba(255, 255, 255, 0.95);

    color:
        var(--rumby-dark);

    box-shadow:
        0 15px 35px rgba(23, 35, 33, 0.11);

}


.about-hero-message span,
.about-hero-message strong {

    display:
        block;

    font-size:
        0.78rem;

    line-height:
        1.45;

}


.about-hero-message strong {

    color:
        var(--rumby-teal-dark);

    font-weight:
        800;

}


.about-decoration {

    position:
        absolute;

    border-radius:
        50%;

    pointer-events:
        none;

}


.about-decoration-coral {

    left:
        -34px;

    top:
        125px;

    width:
        94px;

    height:
        94px;

    background:
        rgba(255, 107, 94, 0.25);

}


.about-decoration-yellow {

    left:
        4px;

    bottom:
        30px;

    width:
        69px;

    height:
        69px;

    background:
        rgba(255, 200, 87, 0.48);

}



/* ========================================
   NUESTRO ORIGEN
======================================== */

.about-origin {

    position:
        relative;

    overflow:
        hidden;

    padding:
        110px 0;

    background:
        white;

}


.about-origin::before {

    content:
        "";

    position:
        absolute;

    left:
        -190px;

    bottom:
        -200px;

    width:
        390px;

    height:
        390px;

    border-radius:
        50%;

    background:
        rgba(255, 200, 87, 0.08);

}


.about-origin-copy {

    max-width:
        650px;

}


.about-origin-copy p {

    margin:
        0 0 18px;

    color:
        var(--rumby-text);

    font-size:
        0.98rem;

    line-height:
        1.75;

}


.about-origin-copy p:last-child {

    margin-bottom:
        0;

}



/* ========================================
   VISUAL DEL PROBLEMA
======================================== */

.about-problem-visual {

    position:
        relative;

    width:
        min(100%, 580px);

    min-height:
        500px;

    margin:
        0 0 0 auto;

}


.about-phone-card {

    position:
        absolute;

    top:
        5px;

    right:
        20px;

    z-index:
        3;

    width:
        250px;

    min-height:
        460px;

    padding:
        28px 19px;

    border:
        8px solid #1D2422;

    border-radius:
        38px;

    background:
        #F9FBFA;

    box-shadow:
        0 25px 55px rgba(23, 35, 33, 0.17);

}


.about-phone-brand {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

    margin-bottom:
        30px;

    color:
        var(--rumby-dark);

    font-size:
        0.74rem;

    font-weight:
        800;

}


.about-phone-brand img {

    width:
        32px;

    height:
        32px;

    object-fit:
        contain;

}


.about-phone-option {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    margin-bottom:
        11px;

    padding:
        13px 14px;

    border:
        1px solid rgba(25, 181, 165, 0.08);

    border-radius:
        15px;

    background:
        rgba(25, 181, 165, 0.055);

    color:
        var(--rumby-dark);

    font-size:
        0.74rem;

    font-weight:
        700;

}


.about-phone-option i {

    width:
        24px;

    height:
        24px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        8px;

    background:
        rgba(25, 181, 165, 0.09);

    color:
        var(--rumby-teal);

}


.about-phone-option-main {

    background:
        rgba(255, 200, 87, 0.11);

    border-color:
        rgba(255, 200, 87, 0.22);

}


.about-search-bubble {

    position:
        absolute;

    z-index:
        5;

    max-width:
        180px;

    padding:
        11px 14px;

    border:
        1px solid rgba(23, 35, 33, 0.07);

    border-radius:
        14px;

    background:
        rgba(255, 255, 255, 0.96);

    color:
        #65736F;

    font-size:
        0.69rem;

    line-height:
        1.4;

    box-shadow:
        0 11px 25px rgba(23, 35, 33, 0.07);

}


.about-search-bubble-1 {

    left:
        5px;

    top:
        75px;

}


.about-search-bubble-2 {

    left:
        108px;

    top:
        120px;

}


.about-search-bubble-3 {

    left:
        0;

    top:
        183px;

}


.about-search-bubble-4 {

    left:
        126px;

    top:
        230px;

}


.about-search-bubble-5 {

    left:
        15px;

    top:
        290px;

}


.about-problem-answer {

    position:
        absolute;

    left:
        118px;

    bottom:
        25px;

    z-index:
        6;

    padding:
        14px 17px;

    border:
        1px solid rgba(25, 181, 165, 0.13);

    border-radius:
        16px;

    background:
        #F3FAF8;

    color:
        var(--rumby-dark);

    box-shadow:
        0 13px 30px rgba(23, 35, 33, 0.08);

}


.about-problem-answer span,
.about-problem-answer strong {

    display:
        block;

    font-size:
        0.75rem;

}


.about-problem-answer strong {

    margin-top:
        2px;

    color:
        var(--rumby-teal-dark);

}



/* ========================================
   VISIÓN
======================================== */

.about-vision {

    position:
        relative;

    overflow:
        hidden;

    padding:
        110px 0;

    background:
        linear-gradient(
            180deg,
            var(--rumby-cream) 0%,
            #F5F9F7 100%
        );

}


.about-pillars-grid {

    display:
        grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap:
        17px;

}


.about-pillar-card {

    min-width:
        0;

    min-height:
        285px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    padding:
        27px 22px;

    border:
        1px solid rgba(23, 35, 33, 0.06);

    border-radius:
        25px;

    text-align:
        center;

    transition:
        transform var(--rumby-transition),
        box-shadow var(--rumby-transition);

}


.about-pillar-card:hover {

    transform:
        translateY(-4px);

    box-shadow:
        0 18px 42px rgba(23, 35, 33, 0.08);

}


.about-pillar-discover {

    background:
        linear-gradient(
            145deg,
            rgba(25, 181, 165, 0.10),
            rgba(255, 255, 255, 0.72)
        );

}


.about-pillar-share {

    background:
        linear-gradient(
            145deg,
            rgba(255, 107, 94, 0.10),
            rgba(255, 255, 255, 0.72)
        );

}


.about-pillar-live {

    background:
        linear-gradient(
            145deg,
            rgba(255, 200, 87, 0.16),
            rgba(255, 255, 255, 0.72)
        );

}


.about-pillar-icon {

    width:
        70px;

    height:
        70px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    margin-bottom:
        20px;

    border-radius:
        50%;

    background:
        rgba(255, 255, 255, 0.76);

    font-size:
        2rem;

}


.about-pillar-discover .about-pillar-icon {

    color:
        var(--rumby-teal);

}


.about-pillar-share .about-pillar-icon {

    color:
        var(--rumby-coral);

}


.about-pillar-live .about-pillar-icon {

    color:
        #E2A51D;

}


.about-pillar-card h3 {

    margin:
        0 0 10px;

    color:
        var(--rumby-dark);

    font-size:
        1.15rem;

    font-weight:
        800;

}


.about-pillar-card p {

    margin:
        0;

    color:
        #6E7B78;

    font-size:
        0.8rem;

    line-height:
        1.6;

}



/* ========================================
   VENEZUELA
======================================== */

.about-venezuela {

    position:
        relative;

    overflow:
        hidden;

    padding:
        110px 0;

    background:
        white;

}


.about-venezuela::after {

    content:
        "";

    position:
        absolute;

    right:
        -180px;

    top:
        -130px;

    width:
        390px;

    height:
        390px;

    border-radius:
        50%;

    background:
        rgba(25, 181, 165, 0.055);

}


.about-venezuela-image {

    position:
        relative;

    z-index:
        2;

    width:
        min(100%, 600px);

    height:
        410px;

    overflow:
        hidden;

    border-radius:
        30px;

    background:
        #DCE8E4;

    box-shadow:
        0 22px 55px rgba(23, 35, 33, 0.13);

}


.about-venezuela-description {

    margin-bottom:
        17px;

}


.about-venezuela-tags {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        10px;

    margin-top:
        27px;

}


.about-venezuela-tags span {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        7px;

    padding:
        9px 12px;

    border:
        1px solid rgba(25, 181, 165, 0.12);

    border-radius:
        999px;

    background:
        rgba(25, 181, 165, 0.055);

    color:
        var(--rumby-teal-dark);

    font-size:
        0.75rem;

    font-weight:
        700;

}



/* ========================================
   FUTURO
======================================== */

.about-future {

    position:
        relative;

    overflow:
        hidden;

    padding:
        110px 0;

    background:
        var(--rumby-cream);

}


.about-future-visual {

    position:
        relative;

    width:
        min(100%, 590px);

    min-height:
        440px;

    margin:
        0 0 0 auto;

}


.about-future-image {

    position:
        absolute;

    top:
        25px;

    right:
        0;

    z-index:
        2;

    width:
        88%;

    height:
        365px;

    overflow:
        hidden;

    border-radius:
        29px;

    background:
        #D9E7E3;

    box-shadow:
        0 22px 55px rgba(23, 35, 33, 0.13);

}


.about-future-circle {

    position:
        absolute;

    left:
        -5px;

    bottom:
        38px;

    width:
        115px;

    height:
        115px;

    border-radius:
        50%;

    background:
        rgba(255, 200, 87, 0.37);

}


.about-future-card {

    position:
        absolute;

    left:
        8px;

    top:
        55px;

    z-index:
        4;

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    padding:
        16px 18px;

    border:
        1px solid rgba(23, 35, 33, 0.07);

    border-radius:
        18px;

    background:
        rgba(255, 255, 255, 0.95);

    box-shadow:
        0 15px 35px rgba(23, 35, 33, 0.10);

}


.about-future-card i {

    width:
        41px;

    height:
        41px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        13px;

    background:
        rgba(25, 181, 165, 0.09);

    color:
        var(--rumby-teal);

    font-size:
        1.2rem;

}


.about-future-card span,
.about-future-card strong {

    display:
        block;

    font-size:
        0.74rem;

}


.about-future-card strong {

    margin-top:
        2px;

    color:
        var(--rumby-teal-dark);

}



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

.about-final-cta {

    padding:
        0 0 105px;

    background:
        var(--rumby-cream);

}


.about-final-cta-shell {

    position:
        relative;

    overflow:
        hidden;

    min-height:
        390px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        55px 30px;

    border:
        1px solid rgba(23, 35, 33, 0.055);

    border-radius:
        33px;

    background:
        white;

    text-align:
        center;

    box-shadow:
        0 20px 55px rgba(23, 35, 33, 0.07);

}


.about-final-content {

    position:
        relative;

    z-index:
        5;

    max-width:
        800px;

}


.about-final-eyebrow {

    margin-left:
        auto;

    margin-right:
        auto;

}


.about-final-content h2 {

    margin:
        0 0 15px;

    color:
        var(--rumby-dark);

    font-size:
        clamp(2.8rem, 5vw, 4.7rem);

    font-weight:
        800;

    line-height:
        1;

    letter-spacing:
        -0.055em;

}


.about-final-content h2 span {

    color:
        var(--rumby-teal);

}


.about-final-content p {

    margin:
        0 auto 27px;

    color:
        var(--rumby-text);

    font-size:
        1rem;

    line-height:
        1.65;

}


.about-final-content .about-primary-button {

    margin:
        0 auto;

}


.about-final-decoration {

    position:
        absolute;

    border-radius:
        50%;

    pointer-events:
        none;

}


.about-final-decoration-teal {

    left:
        -50px;

    bottom:
        -80px;

    width:
        235px;

    height:
        235px;

    background:
        rgba(25, 181, 165, 0.11);

}


.about-final-decoration-coral {

    right:
        60px;

    bottom:
        35px;

    width:
        82px;

    height:
        82px;

    background:
        rgba(255, 107, 94, 0.26);

}


.about-final-decoration-yellow {

    left:
        15%;

    top:
        -42px;

    width:
        118px;

    height:
        118px;

    background:
        rgba(255, 200, 87, 0.20);

}



/* ========================================
   ANIMACIONES DE ENTRADA
======================================== */

[data-reveal] {

    opacity:
        0;

    transform:
        translateY(20px);

    transition:
        opacity 650ms ease,
        transform 650ms ease;

}


[data-reveal].is-visible {

    opacity:
        1;

    transform:
        translateY(0);

}



/* ========================================
   RESPONSIVE - TABLET
======================================== */

@media (max-width: 991.98px) {

    .about-hero {

        padding:
            70px 0 80px;

    }


    .about-hero-visual {

        margin:
            25px auto 0;

    }


    .about-origin,
    .about-vision,
    .about-venezuela,
    .about-future {

        padding:
            85px 0;

    }


    .about-problem-visual {

        margin:
            20px auto 0;

    }


    .about-pillars-grid {

        grid-template-columns:
            repeat(3, minmax(0, 1fr));

    }


    .about-venezuela-image {

        margin:
            0 auto;

    }


    .about-future-visual {

        margin:
            20px auto 0;

    }

}



/* ========================================
   RESPONSIVE - MÓVIL
======================================== */

@media (max-width: 767.98px) {

    .about-hero {

        padding:
            55px 0 65px;

    }


    .about-hero-title {

        font-size:
            clamp(2.75rem, 13.5vw, 4.1rem);

    }


    .about-hero-description {

        font-size:
            1rem;

    }


    .about-hero-visual {

        min-height:
            445px;

    }


    .about-hero-main-image {

        width:
            89%;

        height:
            355px;

    }


    .about-hero-secondary-image {

        width:
            47%;

        height:
            170px;

        top:
            215px;

    }


    .about-hero-message {

        right:
            4px;

        bottom:
            5px;

    }


    .about-decoration-coral {

        left:
            -15px;

        width:
            78px;

        height:
            78px;

    }


    .about-origin,
    .about-vision,
    .about-venezuela,
    .about-future {

        padding:
            72px 0;

    }


    .about-section-title {

        font-size:
            clamp(2.3rem, 10vw, 3.2rem);

    }


    .about-problem-visual {

        min-height:
            520px;

    }


    .about-phone-card {

        right:
            0;

        width:
            225px;

    }


    .about-search-bubble {

        max-width:
            150px;

        padding:
            9px 11px;

        font-size:
            0.62rem;

    }


    .about-search-bubble-2,
    .about-search-bubble-4 {

        left:
            88px;

    }


    .about-problem-answer {

        left:
            65px;

    }


    .about-pillars-grid {

        grid-template-columns:
            1fr;

    }


    .about-pillar-card {

        min-height:
            220px;

    }


    .about-venezuela-image {

        height:
            335px;

        border-radius:
            25px;

    }


    .about-future-visual {

        min-height:
            380px;

    }


    .about-future-image {

        width:
            91%;

        height:
            315px;

    }


    .about-final-cta {

        padding:
            0 0 75px;

    }


    .about-final-cta-shell {

        min-height:
            360px;

        padding:
            45px 24px;

        border-radius:
            27px;

    }


    .about-final-decoration-coral {

        right:
            18px;

    }

}



/* ========================================
   RESPONSIVE - MÓVIL PEQUEÑO
======================================== */

@media (max-width: 479.98px) {

    .about-hero-visual {

        min-height:
            395px;

    }


    .about-hero-main-image {

        width:
            94%;

        height:
            315px;

    }


    .about-hero-secondary-image {

        width:
            49%;

        height:
            145px;

        top:
            195px;

    }


    .about-image-location {

        left:
            10px;

        bottom:
            10px;

        padding:
            7px 9px;

    }


    .about-hero-message {

        min-width:
            155px;

        padding:
            13px 14px;

    }


    .about-problem-visual {

        min-height:
            505px;

    }


    .about-phone-card {

        width:
            200px;

        min-height:
            445px;

        padding:
            24px 14px;

    }


    .about-search-bubble-1 {

        top:
            70px;

    }


    .about-search-bubble-2 {

        left:
            62px;

        top:
            120px;

    }


    .about-search-bubble-3 {

        top:
            185px;

    }


    .about-search-bubble-4 {

        left:
            65px;

        top:
            245px;

    }


    .about-search-bubble-5 {

        top:
            305px;

    }


    .about-problem-answer {

        left:
            35px;

        bottom:
            3px;

    }


    .about-venezuela-image {

        height:
            300px;

    }


    .about-venezuela-tags {

        gap:
            7px;

    }


    .about-venezuela-tags span {

        font-size:
            0.68rem;

    }


    .about-future-visual {

        min-height:
            350px;

    }


    .about-future-image {

        width:
            95%;

        height:
            285px;

    }


    .about-future-card {

        left:
            0;

        top:
            40px;

        padding:
            12px;

    }


    .about-final-content h2 {

        font-size:
            clamp(2.4rem, 11vw, 3.3rem);

    }

}



/* ========================================
   ACCESIBILIDAD - MOVIMIENTO REDUCIDO
======================================== */

@media (prefers-reduced-motion: reduce) {

    [data-reveal] {

        opacity:
            1;

        transform:
            none;

        transition:
            none;

    }


    .about-primary-button,
    .about-pillar-card {

        transition:
            none;

    }

}