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

.about-hero{
    padding:140px 0 90px;
    background:var(--cream);
}

/* Card principal */

.about-card{
    position:relative;

    display:grid;
    grid-template-columns:1.05fr .95fr;
    align-items:center;
    gap:56px;

    min-height:520px;

    padding:64px 72px;

    background:linear-gradient(
        135deg,
        #ffffff 0%,
        var(--beige) 58%,
        #ffffff 100%
    );

    border:1px solid var(--border);
    border-radius:34px;

    box-shadow:var(--shadow);
    overflow:hidden;

    margin-bottom:42px;
}

/* Variante invertida para el segundo banner */

.about-card-reverse{
    grid-template-columns:.95fr 1.05fr;
}

.about-card-reverse .about-content{
    order:2;
}

.about-card-reverse .about-image{
    order:1;
}

/* Barra lateral */

.about-card::before{
    content:"";
    position:absolute;
    left:0;
    top:0;

    width:8px;
    height:100%;

    background:var(--sage);
    z-index:1;
}

/* Glow decorativo */

.about-card::after{
    content:"";
    position:absolute;
    right:-120px;
    top:-120px;

    width:380px;
    height:380px;

    background:radial-gradient(
        circle,
        rgba(143,175,159,.32),
        rgba(143,175,159,0) 70%
    );

    border-radius:50%;
    z-index:0;
}

/* Contenido */

.about-content,
.about-image{
    position:relative;
    z-index:2;
}

.about-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    width:max-content;

    background:var(--deep-green);
    color:var(--cream);

    padding:8px 16px;
    border-radius:999px;

    font-size:13px;
    font-weight:900;
    letter-spacing:.3px;

    margin-bottom:22px;
}

.about-content h1{
    color:var(--deep-green);

    font-size:clamp(54px, 6vw, 88px);
    line-height:.95;
    letter-spacing:-4px;

    margin-bottom:12px;
}

.about-content h3{
    color:var(--sage);

    font-size:26px;
    font-weight:900;

    margin-bottom:24px;
}

.about-content p{
    max-width:560px;

    color:var(--muted);

    font-size:20px;
    line-height:1.75;
}

/* Imagen */

.about-image{
    width:100%;
    max-width:460px;

    justify-self:center;

    background:rgba(246,243,238,.72);

    border:1px solid rgba(47,93,80,.12);
    border-radius:24px;

    padding:18px;

    box-shadow:0 20px 48px rgba(31,42,38,.14);
}

.about-image img{
    width:100%;
    height:430px;

    object-fit:contain;
    object-position:center bottom;

    display:block;

    filter:drop-shadow(0 18px 28px rgba(31,42,38,.18));
}


/* =========================
   TABLET
========================= */

@media(max-width:900px){

    .about-hero{
        padding:120px 0 72px;
    }

    .about-card,
    .about-card-reverse{
        grid-template-columns:1fr;
        gap:34px;

        padding:48px 34px;
        text-align:center;
    }

    .about-card-reverse .about-content,
    .about-card-reverse .about-image{
        order:initial;
    }

    .about-card::before{
        width:100%;
        height:8px;
    }

    .about-badge{
        margin-left:auto;
        margin-right:auto;
    }

    .about-content p{
        margin-left:auto;
        margin-right:auto;
    }

    .about-image{
        max-width:420px;
    }

    .about-image img{
        height:390px;
    }

}


/* =========================
   MOBILE
========================= */

@media(max-width:520px){

    .about-hero{
        padding:105px 0 58px;
    }

    .about-card{
        padding:36px 22px 26px;
        border-radius:28px;
        gap:28px;
        margin-bottom:30px;
    }

    .about-content h1{
        font-size:52px;
        letter-spacing:-2px;
    }

    .about-content h3{
        font-size:21px;
        margin-bottom:18px;
    }

    .about-content p{
        font-size:17px;
        line-height:1.65;
    }

    .about-image{
        padding:12px;
        border-radius:22px;
    }

    .about-image img{
        height:340px;
    }

}