/* =========================================================
   PÁGINA NOSOTROS
========================================================= */

.about-page{
    width:100%;
    min-height:calc(100vh - 70px);

    display:flex;
    flex-direction:column;

    margin:0;
    padding:0;

    overflow:hidden;
    background:#071426;
}


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

.about-hero{
    position:relative;

    width:100%;
    min-height:calc(100vh - 70px);

    flex:1;

    padding:130px 70px 90px;

    display:flex;
    align-items:center;

    overflow:hidden;
    box-sizing:border-box;

    background:
        linear-gradient(
            90deg,
            rgba(3, 14, 24, .66) 0%,
            rgba(3, 20, 25, .58) 42%,
            rgba(3, 20, 25, .34) 72%,
            rgba(3, 20, 25, .30) 100%
        ),
        url("../../img/sections/entrega-llaves.6d25e12cdfc6.png");

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
}

/* Capa adicional */

.about-hero::after{
    content:"";

    position:absolute;
    inset:0;

    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, .18) 0%,
            transparent 45%,
            rgba(0, 0, 0, .30) 100%
        );

    pointer-events:none;
}


/* =========================================================
   CONTENIDO DEL HERO
========================================================= */

.about-hero__content{
    position:relative;
    z-index:2;

    width:min(1480px, calc(100% - 80px));
    max-width:none;
    margin:0 auto;

    /*
       Desplaza el bloque hacia el centro de manera adaptable.
       No utiliza transform fijo.
    */
    padding-left:clamp(120px, 18vw, 350px);

    box-sizing:border-box;
    transform:none;
}


/* =========================================================
   ETIQUETA SUPERIOR
========================================================= */

.about-hero__eyebrow{
    display:flex;
    align-items:center;
    gap:13px;

    margin-bottom:18px;

    color:#d9fff1;

    font-size:11px;
    line-height:1;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.14em;
}

.about-hero__eyebrow::before{
    content:"";

    width:31px;
    height:2px;

    display:block;

    background:currentColor;
}


/* =========================================================
   TÍTULO
========================================================= */

.about-hero h1{
    max-width:900px;
    margin:0;

    color:#ffffff;

    font-family:"Montserrat", sans-serif;
    font-size:clamp(38px, 3.4vw, 56px);
    line-height:1.03;
    font-weight:800;
    letter-spacing:-.055em;

    text-shadow:0 5px 24px rgba(0, 0, 0, .25);
}


/* =========================================================
   DESCRIPCIÓN
========================================================= */

.about-hero p{
    max-width:680px;
    margin:28px 0 0;

    color:rgba(255, 255, 255, .94);

    font-size:18px;
    line-height:1.75;

    text-shadow:0 3px 16px rgba(0, 0, 0, .28);
}


/* =========================================================
   ACCIONES
========================================================= */

.about-hero__actions{
    margin-top:45px;

    display:flex;
    align-items:center;
    gap:13px;
}
/* =========================================================
   BOTONES
========================================================= */

.about-button{
    min-height:50px;
    padding:0 25px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1px solid transparent;
    font-size:12px;
    line-height:1;
    font-weight:900;
    text-decoration:none;
    text-transform:uppercase;
    letter-spacing:.04em;
    white-space:nowrap;
}

.about-button--primary{
    border-color:#ffffff;
    background:#ffffff;
    color:#071426;
}

.about-button--outline{
    border-color:rgba(255,255,255,.72);
    background:rgba(0,0,0,.20);
    color:#ffffff;
}

.about-button--dark{
    border-color:#071426;

    background:#071426;
    color:#ffffff;
}

.about-button--green{
    border-color:#0f3d34;

    background:#0f3d34;
    color:#ffffff;
}