/*==================================================
                    ABOUT
==================================================*/

.about{

    position:relative;

    display:flex;

    align-items:center;

    overflow:hidden;

    min-height:clamp(420px,60vw,560px);

    padding-block:clamp(70px,8vw,120px);

    background:

        linear-gradient(

            90deg,

            rgba(0,0,0,.92) 0%,

            rgba(0,0,0,.82) 28%,

            rgba(0,0,0,.52) 55%,

            rgba(0,0,0,.15) 78%,

            rgba(0,0,0,0) 100%

        ),

        url("../img/about.webp");

    background-repeat:no-repeat;

    background-size:cover;

    background-position:center 25%;

}



/*==================================================
            CAPAS AUXILIARES
==================================================*/

.about-bg,
.about-overlay{

    display:none;

}



/*==================================================
                CONTAINER
==================================================*/

.about-container{

    position:relative;

    z-index:2;

    width:min(1280px,100%);

    margin:auto;

    padding-inline:clamp(18px,3vw,30px);

}



/*==================================================
                CONTENT
==================================================*/

.about-content{

    width:min(540px,100%);

    padding-block:clamp(30px,6vw,70px);

}



/*==================================================
                TAG
==================================================*/

.about-tag{

    display:inline-block;

    margin-bottom:clamp(14px,2vw,22px);

    color:#16a34a;

    font-size:clamp(.78rem,.9vw,.9rem);

    font-weight:700;

    letter-spacing:clamp(2px,.3vw,4px);

    text-transform:uppercase;

}



/*==================================================
                TITLE
==================================================*/

.about-title{

    color:#fff;

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

    font-weight:800;

    line-height:1.05;

    margin-bottom:clamp(20px,3vw,30px);

    text-wrap:balance;

}

.about-title span{

    color:#16a34a;

}



/*==================================================
                TEXT
==================================================*/

.about-text{

    width:min(520px,100%);

    color:#d6d6d6;

    font-size:clamp(1rem,1.45vw,1.25rem);

    line-height:1.8;

}



/*==================================================
            MEJORAS
==================================================*/

.about-content>*{

    position:relative;

    z-index:2;

}

.about img{

    max-width:100%;

    height:auto;

}



/*==================================================
        RESPONSIVE ESTRUCTURAL
==================================================*/

@media (max-width:768px){

    .about{

        background-position:68% center;

    }

}



@media (max-width:576px){

    .about{

        background-position:72% center;

    }

}


/*==================================================
                ABOUT BENEFITS
==================================================*/

.about-benefits{

    background:#050505;

    padding-block:

        clamp(70px,8vw,110px)

        clamp(60px,7vw,90px);

}



/*==================================================
                CONTAINER
==================================================*/

.about-benefits .container{

    width:min(1280px,100%);

    margin:auto;

    padding-inline:clamp(18px,3vw,30px);

}



/*==================================================
                HEADER
==================================================*/

.benefits-header{

    text-align:center;

    margin-bottom:clamp(40px,6vw,65px);

}



/*==================================================
                SECTION TAG
==================================================*/

.benefits-header .section-tag{

    display:inline-block;

    margin-bottom:clamp(12px,2vw,16px);

    color:#16a34a;

    font-size:clamp(.78rem,.9vw,.9rem);

    font-weight:700;

    letter-spacing:clamp(2px,.3vw,4px);

    text-transform:uppercase;

}



/*==================================================
                TITLE
==================================================*/

.benefits-header h2{

    color:#fff;

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

    font-weight:800;

    line-height:1.08;

    text-wrap:balance;

}

.benefits-header h2 span{

    color:#16a34a;

}



/*==================================================
                GRID
==================================================*/

.benefits-grid{

    display:grid;

    grid-template-columns:

        repeat(auto-fit,minmax(min(220px,100%),1fr));

    gap:clamp(16px,2vw,18px);

}



/*==================================================
                BENEFIT CARD
==================================================*/

.benefit-card{

    position:relative;

    overflow:hidden;

    display:flex;

    flex-direction:column;

    height:100%;

    min-height:clamp(220px,30vw,280px);

    padding:

        clamp(22px,3vw,32px)

        clamp(18px,2vw,24px);

    background:#0b0b0b;

    border:1px solid rgba(255,255,255,.08);

    border-radius:16px;

    transition:

        transform .35s ease,

        border-color .35s ease,

        box-shadow .35s ease;

}



/*==================================================
                TOP BAR
==================================================*/

.benefit-card::before{

    content:"";

    position:absolute;

    left:0;

    right:0;

    top:0;

    height:4px;

    background:#16a34a;

    transform:scaleX(0);

    transform-origin:left;

    transition:transform .35s ease;

}



/*==================================================
                TITLE
==================================================*/

.benefit-card h3{

    color:#fff;

    font-size:clamp(1rem,1.5vw,1.2rem);

    font-weight:700;

    line-height:1.45;

    margin-bottom:clamp(16px,2vw,22px);

    text-wrap:balance;

}



/*==================================================
                DIVIDER
==================================================*/

.benefit-divider{

    width:clamp(36px,4vw,42px);

    height:3px;

    margin-bottom:clamp(18px,2vw,24px);

    border-radius:20px;

    background:#16a34a;

    transition:

        width .35s ease;

}



/*==================================================
                TEXT
==================================================*/

.benefit-card p{

    margin:0;

    color:#bdbdbd;

    font-size:clamp(.90rem,1.1vw,.95rem);

    line-height:1.8;

    transition:color .35s ease;

}



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

.benefit-card:hover{

    transform:translateY(-5px);

    border-color:rgba(22,163,74,.35);

    box-shadow:

        0 14px 30px rgba(0,0,0,.28);

}

.benefit-card:hover::before{

    transform:scaleX(1);

}

.benefit-card:hover .benefit-divider{

    width:clamp(52px,5vw,60px);

}

.benefit-card:hover p{

    color:#ececec;

}



/*==================================================
                IMPROVEMENTS
==================================================*/

.benefit-card>*{

    position:relative;

    z-index:2;

}

.benefit-card img{

    max-width:100%;

    height:auto;

}

/*==================================================
                COMMITMENT
==================================================*/

.about-commitment{

    background:#050505;

    padding-block:

        clamp(40px,5vw,50px)

        clamp(70px,8vw,120px);

}



/*==================================================
                CONTAINER
==================================================*/

.about-commitment .container{

    width:min(1280px,100%);

    margin:auto;

    padding-inline:clamp(18px,3vw,30px);

}



/*==================================================
                TOP
==================================================*/

.commitment-top{

    display:grid;

    grid-template-columns:

        minmax(260px,320px)

        minmax(0,1fr);

    gap:clamp(30px,6vw,70px);

    align-items:start;

    margin-bottom:clamp(40px,6vw,70px);

    padding-top:clamp(40px,5vw,60px);

    border-top:1px solid rgba(255,255,255,.08);

}



/*==================================================
                TITLE
==================================================*/

.commitment-title .section-tag{

    display:inline-block;

    margin-bottom:clamp(12px,2vw,14px);

    color:#16a34a;

    font-size:clamp(.78rem,.9vw,.9rem);

    font-weight:700;

    letter-spacing:clamp(2px,.3vw,4px);

    text-transform:uppercase;

}



.commitment-title h2{

    color:#fff;

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

    font-weight:800;

    line-height:1.05;

    text-wrap:balance;

}



/*==================================================
            DESCRIPTION
==================================================*/

.commitment-description{

    width:100%;

}



.commitment-description p{

    color:#cfcfcf;

    font-size:clamp(.95rem,1.3vw,1.125rem);

    line-height:1.85;

    margin-bottom:clamp(16px,2vw,22px);

}



.commitment-description p:last-child{

    margin-bottom:0;

}



/*==================================================
                IMPROVEMENTS
==================================================*/

.commitment-title,
.commitment-description{

    position:relative;

    z-index:2;

}



.commitment-title h2,
.commitment-description p{

    text-wrap:balance;

}



/*==================================================
        RESPONSIVE ESTRUCTURAL
==================================================*/

@media (max-width:768px){

    .commitment-top{

        grid-template-columns:1fr;

    }

}

/*==================================================
                TIMELINE
==================================================*/

.commitment-timeline{

    position:relative;

    display:grid;

    grid-template-columns:

        repeat(auto-fit,minmax(min(180px,100%),1fr));

    gap:clamp(20px,2vw,24px);

    margin:

        clamp(40px,6vw,50px)

        0

        clamp(60px,8vw,90px);

}



/*==================================================
                TIMELINE LINE
==================================================*/

.timeline-line{

    position:absolute;

    top:8px;

    left:10%;

    right:10%;

    height:2px;

    background:#16a34a;

    opacity:.45;

    z-index:1;

    display:none;

}



/*==================================================
                ITEM
==================================================*/

.timeline-item{

    position:relative;

    z-index:2;

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

}



/*==================================================
                DOT
==================================================*/

.timeline-dot{

    width:clamp(14px,1.5vw,16px);

    height:clamp(14px,1.5vw,16px);

    margin:0 auto clamp(18px,2vw,24px);

    border-radius:50%;

    background:#16a34a;

    border:4px solid #050505;

    box-shadow:0 0 10px rgba(22,163,74,.35);

    flex-shrink:0;

    transition:

        transform .35s ease,

        box-shadow .35s ease;

}



.timeline-item:hover .timeline-dot{

    transform:scale(1.15);

}



/*==================================================
                TEXT
==================================================*/

.timeline-item p{

    max-width:170px;

    margin:0 auto;

    color:#efefef;

    font-size:clamp(.95rem,1.3vw,1.125rem);

    line-height:1.45;

    font-weight:500;

    text-wrap:balance;

}



/*==================================================
                CLOSING
==================================================*/

.commitment-closing{

    max-width:min(900px,100%);

    margin:0 auto;

    padding-top:clamp(40px,5vw,50px);

    border-top:1px solid rgba(255,255,255,.08);

    text-align:center;

}



.commitment-closing p{

    color:#d8d8d8;

    font-size:clamp(1.1rem,2vw,1.5rem);

    line-height:1.8;

    font-weight:400;

    text-wrap:balance;

}



.commitment-closing span{

    color:#16a34a;

    font-weight:700;

}



/*==================================================
                IMPROVEMENTS
==================================================*/

.timeline-item>*{

    position:relative;

    z-index:2;

}



.timeline-item img{

    max-width:100%;

    height:auto;

}



/*==================================================
        RESPONSIVE ESTRUCTURAL
==================================================*/

@media (max-width:768px){

    .commitment-timeline{

        grid-template-columns:1fr;

        gap:32px;

    }

    .timeline-item p{

        max-width:420px;

    }

}



@media (max-width:576px){

    .commitment-closing{

        padding-top:36px;

    }

}


.timeline-dot{

    position:relative !important;

    left:auto !important;

    top:auto !important;

    right:auto !important;

    bottom:auto !important;

    margin:0 auto 22px !important;

    display:block;

}