/* =========================================================
   RUFFIANA — NOSOTROS
========================================================= */


/* =========================================================
   VARIABLES
========================================================= */

.nosotros {
    --nosotros-beige: #E3DED1;
    --nosotros-beige-light: #F5F2EC;
    --nosotros-brown: #3b2c1d;
    --nosotros-accent: #b18c68;
    --nosotros-gray: #777777;
    --nosotros-white: #ffffff;
}


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

.nosotros-hero {

    min-height: 620px;

    display: flex;

    align-items: center;

    padding: 80px 8%;

    background-color: var(--nosotros-beige-light);

}


.nosotros-hero-content {

    width: min(100%, 700px);

}


.nosotros-eyebrow {

    margin-bottom: 18px;

    color: var(--nosotros-accent);

    font-size: 0.72rem;

    font-weight: 700;

    letter-spacing: 3px;

}


.nosotros-hero h1 {

    margin-bottom: 30px;

    color: var(--nosotros-brown);

    font-size: clamp(3.5rem, 7vw, 6.5rem);

    font-weight: 500;

    line-height: 1;

    letter-spacing: -3px;

}


.nosotros-hero h1 span {

    display: block;

    font-weight: 400;

    font-style: italic;

}


.nosotros-hero-text {

    max-width: 520px;

    color: var(--nosotros-gray);

    font-size: 1rem;

    line-height: 1.9;

}



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

.nosotros-about {

    display: grid;

    grid-template-columns: 1fr 1fr;

    min-height: 650px;

    background-color: var(--nosotros-white);

}


.nosotros-about-image {

    padding: 70px;

}


.nosotros-image-placeholder {

    width: 100%;

    height: 100%;

    min-height: 510px;

    display: flex;

    align-items: center;

    justify-content: center;

    background-color: var(--nosotros-beige);

}


.nosotros-image-placeholder span {

    color: var(--nosotros-brown);

    font-size: 1.5rem;

    font-weight: 700;

    letter-spacing: 6px;

}


.nosotros-about-content {

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding: 80px 12% 80px 5%;

}


.nosotros-about-content h2 {

    margin-bottom: 30px;

    color: var(--nosotros-brown);

    font-size: clamp(2rem, 3vw, 2.6rem);

    font-weight: 600;

}


.nosotros-about-content p:not(.nosotros-eyebrow) {

    max-width: 550px;

    margin-bottom: 18px;

    color: var(--nosotros-gray);

    font-size: 0.9rem;

    line-height: 1.9;

}



/* =========================================================
   NUESTRA ESENCIA
========================================================= */

.nosotros-essence {

    padding: 110px 8%;

    background-color: var(--nosotros-beige-light);

}


.nosotros-section-heading {

    margin-bottom: 65px;

    text-align: center;

}


.nosotros-section-heading h2 {

    margin-bottom: 12px;

    color: var(--nosotros-brown);

    font-size: clamp(2rem, 4vw, 2.7rem);

    font-weight: 600;

}


.nosotros-section-heading > p:last-child {

    color: var(--nosotros-gray);

    font-size: 0.9rem;

}


.nosotros-essence-grid {

    width: min(100%, 1100px);

    margin: 0 auto;

    display: grid;

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

    gap: 25px;

}


.nosotros-card {

    padding: 50px 35px;

    text-align: center;

    background-color: var(--nosotros-white);

    transition: var(--transition);

}


.nosotros-card:hover {

    transform: translateY(-6px);

}


.nosotros-card-icon {

    margin-bottom: 22px;

    color: var(--nosotros-accent);

    font-size: 1.7rem;

}


.nosotros-card h3 {

    margin-bottom: 18px;

    color: var(--nosotros-brown);

    font-size: 1.1rem;

    font-weight: 600;

}


.nosotros-card p {

    color: var(--nosotros-gray);

    font-size: 0.85rem;

    line-height: 1.8;

}



/* =========================================================
   TALLES
========================================================= */

.nosotros-sizes {

    min-height: 500px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 90px 8%;

    text-align: center;

    background-color: var(--nosotros-white);

}


.nosotros-sizes-content {

    width: min(100%, 700px);

}


.nosotros-sizes h2 {

    margin-bottom: 25px;

    color: var(--nosotros-brown);

    font-size: clamp(2rem, 4vw, 2.8rem);

    font-weight: 600;

}


.nosotros-sizes-content > p:not(.nosotros-eyebrow):not(.nosotros-size-text) {

    max-width: 600px;

    margin: 0 auto;

    color: var(--nosotros-gray);

    font-size: 0.9rem;

    line-height: 1.9;

}


.nosotros-size-range {

    width: min(100%, 550px);

    margin: 50px auto 15px;

    display: flex;

    align-items: center;

    gap: 25px;

    color: var(--nosotros-brown);

    font-size: 1.5rem;

    font-weight: 600;

}


.nosotros-size-line {

    flex: 1;

    height: 1px;

    background-color: var(--nosotros-accent);

}


.nosotros-size-text {

    color: var(--nosotros-accent);

    font-size: 0.75rem;

    letter-spacing: 1px;

}



/* =========================================================
   COMUNIDAD
========================================================= */

.nosotros-community {

    min-height: 550px;

    display: flex;

    align-items: center;

    padding: 90px 12%;

    background-color: var(--nosotros-beige-light);

}


.nosotros-community-content {

    width: min(100%, 650px);

}


.nosotros-community h2 {

    margin-bottom: 25px;

    color: var(--nosotros-brown);

    font-size: clamp(2rem, 4vw, 2.8rem);

    font-weight: 600;

}


.nosotros-community-content > p:not(.nosotros-eyebrow) {

    max-width: 570px;

    margin-bottom: 18px;

    color: var(--nosotros-gray);

    font-size: 0.9rem;

    line-height: 1.9;

}



/* =========================================================
   BOTÓN
========================================================= */

.nosotros-button {

    display: inline-block;

    margin-top: 20px;

    padding: 15px 30px;

    background-color: var(--nosotros-brown);

    color: var(--nosotros-white);

    font-size: 0.7rem;

    font-weight: 600;

    letter-spacing: 2px;

    transition: var(--transition);

}


.nosotros-button:hover {

    background-color: var(--nosotros-accent);

}



/* =========================================================
   ENVÍOS
========================================================= */

.nosotros-shipping {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 35px;

    padding: 75px 8%;

    background-color: var(--nosotros-white);

}


.nosotros-shipping-icon {

    width: 80px;

    height: 80px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    border-radius: 50%;

    background-color: var(--nosotros-beige);

    color: var(--nosotros-brown);

    font-size: 1.5rem;

}


.nosotros-shipping h2 {

    margin-bottom: 8px;

    color: var(--nosotros-brown);

    font-size: 1.8rem;

    font-weight: 600;

}


.nosotros-shipping > div:last-child > p:last-child {

    color: var(--nosotros-gray);

    font-size: 0.9rem;

}



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

.nosotros-final {

    min-height: 500px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 90px 20px;

    text-align: center;

    background-color: var(--nosotros-beige);

}


.nosotros-final h2 {

    max-width: 850px;

    margin-bottom: 30px;

    color: var(--nosotros-brown);

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

    font-weight: 500;

    line-height: 1.2;

}


.nosotros-final h2 span {

    display: block;

    font-weight: 400;

    font-style: italic;

}


.nosotros-final > div > p:last-child {

    color: var(--nosotros-gray);

    font-size: 0.9rem;

}



/* =========================================================
   RESPONSIVE — TABLET
========================================================= */

@media (max-width: 900px) {


    .nosotros-about {

        grid-template-columns: 1fr;

    }


    .nosotros-about-image {

        padding: 50px;

    }


    .nosotros-image-placeholder {

        min-height: 450px;

    }


    .nosotros-about-content {

        padding: 70px 8%;

    }


    .nosotros-essence-grid {

        grid-template-columns: 1fr;

        max-width: 500px;

    }


    .nosotros-community {

        padding: 80px 8%;

    }


}



/* =========================================================
   RESPONSIVE — CELULAR
========================================================= */

@media (max-width: 600px) {


    .nosotros-hero {

        min-height: 520px;

        padding: 70px 8%;

    }


    .nosotros-hero h1 {

        font-size: 3.5rem;

        letter-spacing: -2px;

    }


    .nosotros-hero-text {

        font-size: 0.9rem;

    }


    .nosotros-about-image {

        padding: 25px;

    }


    .nosotros-image-placeholder {

        min-height: 330px;

    }


    .nosotros-about-content {

        padding: 60px 8%;

    }


    .nosotros-about-content h2 {

        font-size: 2rem;

    }


    .nosotros-essence {

        padding: 80px 7%;

    }


    .nosotros-card {

        padding: 40px 30px;

    }


    .nosotros-sizes {

        padding: 80px 8%;

    }


    .nosotros-size-range {

        gap: 15px;

        font-size: 1.2rem;

    }


    .nosotros-community {

        min-height: 500px;

        padding: 70px 8%;

    }


    .nosotros-shipping {

        flex-direction: column;

        padding: 65px 8%;

        text-align: center;

    }


    .nosotros-final {

        min-height: 450px;

        padding: 70px 20px;

    }


}

/* =========================================================
   TRABAJÁ CON NOSOTROS
========================================================= */

.nosotros-trabaja {
    padding: 100px 20px;
    text-align: center;
    background-color: var(--nosotros-beige-light);

}

.nosotros-trabaja-content {
    width: min(90%, 750px);
    margin: 0 auto;
}

.nosotros-trabaja-label {
    display: block;
    margin-bottom: 18px;
    color: var(--color-accent);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 2px;
}

.nosotros-trabaja h2 {
    margin-bottom: 25px;
    color: var(--color-letter);
    font-size: 2rem;
    font-weight: 600;
    letter-spacing: 1px;
}

.nosotros-trabaja p {
    max-width: 650px;
    margin: 0 auto 35px;
    color: var(--color-dark);
    font-size: 0.95rem;
    line-height: 1.9;
}

.nosotros-trabaja-button {
    display: inline-block;
    padding: 14px 30px;
    border: 1px solid var(--color-letter);
    color: var(--color-letter);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    transition: var(--transition);
}

.nosotros-trabaja-button:hover {
    background-color: var(--color-letter);
    color: var(--color-white);
}