.nav-yellow {
    --nav-bg: rgb(var(--yellow-rgb));
    --nav-shadow: rgba(0, 0, 0, 0.3);
    --nav-text: white;
    --nav-text2: white;

    --nav-tiktok-bg: rgb(var(--yellow-rgb));
    --nav-tiktok-border-size: 2px;
    --nav-tiktok-border-color: rgba(255, 255, 255, 1);

    --nav-ig-bg: rgb(var(--yellow-rgb));
    --nav-ig-border-color: rgba(255, 255, 255, 1);

    --nav-wsp-bg: rgb(var(--yellow-rgb));
    --nav-wsp-border-color: rgba(255, 255, 255, 1);
    --nav-wsp-color: white;
}

/* =========================
   NOSOTROS
========================= */

#view-nosotros{

    --accent-color:
        rgb(var(--yellow-rgb));

    --accent-soft:
        rgba(var(--yellow-rgb), .14);

    --yellow-dark:
        #d1b300;

    background:
        #fffdf6;

    min-height:
        100vh;

    padding-bottom:
        7rem;
}


/* =========================
   GENERAL
========================= */

.nos-label{

    display:
        inline-block;

    padding:
        .45rem 1rem;

    border-radius:
        999px;

    background:
        var(--accent-soft);

    color:
        var(--yellow-dark);

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

    font-weight:
        700;

    font-size:
        .95rem;
}

.nos-story-text h2,
.nos-memory-box h2,
.nos-community-text h2,
.nos-final-box h2{

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

    line-height:
        1.1;

    color:
        #222;
}

.nos-story-text p,
.nos-memory-box p,
.nos-community-text p,
.nos-final-box p{

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

    line-height:
        1.95;

    color:
        #555;
}


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

.nos-hero{

    width:
        min(1300px, 94%);

    margin:
        7rem auto 8rem;

    display:
        grid;

    grid-template-columns:
        1.1fr .9fr;

    gap: 1rem;

    align-items:
        center;
}

.nos-hero-text h1{

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

    font-size:
        clamp(3rem, 6vw, 5.4rem);

    line-height:
        1.02;

    margin:
        1.5rem 0;

    color:
        #222;
}

.nos-hero-text p{

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

    font-size:
        1.08rem;

    line-height:
        1.95;

    color:
        #555;

    max-width:
        650px;
}

.nos-kicker{

    display:
        inline-block;

    padding:
        .5rem 1rem;

    border-radius:
        999px;

    background:
        var(--accent-soft);

    color:
        var(--yellow-dark);

    font-weight:
        700;

    margin-bottom:
        1.2rem;

    font-family:
        "Poppins",
        sans-serif;
}


.nos-hero-image{

    width: 100%;
    justify-self: center;

    border-radius: 42px;

    overflow: hidden;

    box-shadow: 0 20px 50px rgba(0,0,0,.06);
}

.nos-hero-image img {

    width: 100%;
    height: 100%;

    object-fit: contain;

    display: block;
}


/* =========================
   STORY SECTIONS
========================= */

.nos-story-section {

    width:
        min(1250px, 92%);

    margin:
        0 auto 4rem;

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap: 2.5rem;

    align-items:
        center;
}

.nos-story-section.reverse{

    direction:
        rtl;
}

.nos-story-section.reverse > *{

    direction:
        ltr;
}

.nos-story-text {

    padding:
        1rem;
}

.nos-story-text h2 {

    font-size:
        clamp(2.2rem, 5vw, 4rem);

    margin:
        1.3rem 0 1.5rem;
}

.nos-story-image {

    width: 80%;
    justify-self: center;

    border-radius:
        38px;

    overflow:
        hidden;

    box-shadow:
        0 18px 45px rgba(0,0,0,.05);
}

.nos-story-image img {

    width: 100%;
    height: 100%;

    object-fit: contain;

    display: block;
}


/* =========================
   MEMORY BOX
========================= */

.nos-memory-box{

    width:
        min(1100px, 92%);

    margin:
        6rem auto;

    padding:
        5rem 3rem;

    border-radius:
        42px;

    text-align:
        center;

    background:
        linear-gradient(
            135deg,
            rgba(var(--yellow-rgb), .18),
            rgba(var(--yellow-rgb), .05)
        );

    box-shadow:
        0 20px 50px rgba(0,0,0,.04);
}

.nos-memory-box h2{

    font-size:
        clamp(2.5rem, 5vw, 4.3rem);

    margin:
        1.5rem auto;

    max-width:
        900px;
}

.nos-memory-box p{

    max-width:
        760px;

    margin:
        0 auto;
}


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

.nos-final-box{

    width:
        min(1050px, 92%);

    margin:
        7rem auto 0;

    text-align:
        center;
}

.nos-final-box h2{

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

    max-width:
        900px;

    margin:
        0 auto 1.5rem;
}

.nos-final-box p{

    max-width:
        720px;

    margin:
        0 auto;
}

.nos-back-button-wrap{

    margin-top: 2.5rem;

    display: flex;
    justify-content: center;
}

.nos-back-button{

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 1rem 1.8rem;

    border-radius: 999px;

    background:
        var(--accent-color);

    color:
        white;

    text-decoration:
        none;

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

    font-weight:
        700;

    font-size:
        1rem;

    box-shadow:
        0 12px 30px rgba(var(--yellow-rgb), .22);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        opacity .25s ease;
}

.nos-back-button:hover{

    transform:
        translateY(-4px);

    box-shadow:
        0 18px 38px rgba(var(--yellow-rgb), .3);

    opacity:
        .96;
}


/* ==================================
   MOBILE — VIEW NOSOTROS
================================== */

@media (max-width: 950px){

    /* =========================
       GENERAL
    ========================= */

    #view-nosotros{

        padding-bottom: 5rem;
    }

    .nos-label,
    .nos-kicker{

        font-size: .82rem;

        padding: .45rem .9rem;
    }

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

    .nos-hero{

        width: min(94%, 700px);

        margin: 6.5rem auto 4rem;

        grid-template-columns: 1fr;

        gap: 2rem;
    }

    .nos-hero-text{

        text-align: center;
    }

    .nos-hero-text h1{

        font-size:
            clamp(2.8rem, 12vw, 4.5rem);

        line-height: .98;

        margin: 1.2rem 0;
    }

    .nos-hero-text p{

        font-size: 1rem;

        line-height: 1.85;

        max-width: 100%;
    }

    .nos-hero-image{

        width: 100%;

        border-radius: 28px;
    }

    .nos-hero-image img{

        aspect-ratio: 1.3 / 1;

        object-fit:cover;
    }

    /* =========================
       STORY SECTIONS
    ========================= */

    .nos-story-section{

        width: min(94%, 700px);

        margin: 0 auto 3rem;

        grid-template-columns: 1fr;

        gap: 1.8rem;
    }
    /* =========================
    MOBILE ORDER FIX
    ========================= */

    .nos-story-section {

        display: flex;
        flex-direction: column;
    }

    .nos-story-text {

        order: 1;
    }

    .nos-story-image {

        order: 2;
    }

    .nos-story-text{

        padding: 0;

        text-align: center;
    }

    .nos-story-text h2{

        font-size:
            clamp(2rem, 9vw, 3.2rem);

        margin: 1rem 0 1.2rem;

        line-height: 1.05;
    }

    .nos-story-text p{

        font-size: .98rem;

        line-height: 1.9;
    }

    .nos-story-image{

        width: 100%;

        border-radius: 26px;
    }

    .nos-story-image img{

        aspect-ratio: 1 / 1;

        object-fit: cover;
    }

    /* =========================
       MEMORY BOX
    ========================= */

    .nos-memory-box{

        width: min(94%, 700px);

        margin: 4rem auto;

        padding: 2rem 1.3rem;

        border-radius: 28px;
    }

    .nos-memory-box h2{

        font-size:
            clamp(2rem, 9vw, 3.2rem);

        line-height: 1.05;

        margin: 1rem auto 1.2rem;
    }

    .nos-memory-box p{

        font-size: .97rem;

        line-height: 1.9;
    }

    /* =========================
       FINAL BOX
    ========================= */

    .nos-final-box{

        width: min(94%, 700px);

        margin-top: 4rem;
    }

    .nos-final-box h2{

        font-size:
            clamp(2rem, 9vw, 3.4rem);

        line-height: 1.05;

        margin-bottom: 1.2rem;
    }

    .nos-final-box p{

        font-size: .98rem;

        line-height: 1.9;
    }

    /* =========================
       BUTTON
    ========================= */

    .nos-back-button-wrap{

        margin-top: 2rem;

    }

    .nos-back-button{

        width: 80%;

        padding: 1rem 1.2rem;

        font-size: .96rem;
    }

    /* =========================
       HOVER FIXES
    ========================= */

    .nos-back-button:hover{

        transform: none;

        box-shadow:
            0 12px 30px rgba(var(--yellow-rgb), .22);

        opacity: 1;
    }
}


/* ==================================
   TOUCH DEVICES — DISABLE HOVERS
================================== */

@media (hover: hover) and (pointer: fine){

    .nos-back-button:hover{

        transform:
            translateY(-4px);

        box-shadow:
            0 18px 38px rgba(var(--yellow-rgb), .3);

        opacity: .96;
    }
}