/*==============================================================================
NOSOTROS PREMIUM
ANSIER 3.0
==============================================================================*/

.about{

    background:var(--background);

    overflow:hidden;

}

.about__container{

    width:min(92%, var(--container));

    margin:auto;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:center;

}

/*==============================
CONTENIDO
==============================*/

.about__subtitle{

    display:inline-block;

    color:var(--color-secondary);

    font-size:.9rem;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:2px;

    margin-bottom:16px;

}

.about__title{

    font-size:var(--fs-h2);

    line-height:1.2;

    margin-bottom:26px;

    color:var(--text-primary);

}

.about__text{

    font-size:1.05rem;

    line-height:1.9;

    margin-bottom:22px;

    color:var(--text-secondary);

}

/*==============================
PILARES
==============================*/

.about__pillars{

    display:grid;

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

    gap:20px;

    margin-top:36px;

}

.pillar{

    background:var(--background);

    padding:28px;

    border-radius:var(--radius-lg);

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

    box-shadow:var(--shadow-xs);

    transition:var(--transition);

}

.pillar:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow-lg);

    border-color:transparent;

}

.pillar__icon{

    display:flex;

    align-items:center;

    justify-content:center;

    width:52px;

    height:52px;

    margin-bottom:18px;

    border-radius:var(--radius-sm);

    background:var(--gradient-secondary);

    color:#fff;

    font-size:1.2rem;

}

.pillar__title{

    color:var(--text-primary);

    font-size:1.2rem;

    margin-bottom:10px;

}

.pillar__text{

    font-size:.95rem;

    line-height:1.75;

    color:var(--text-secondary);

}

/*==============================
IMAGEN
==============================*/

.about__image-container{

    position:relative;

}

.about__image-wrapper{

    border-radius:var(--radius-xl);

    overflow:hidden;

    box-shadow:var(--shadow-lg);

    background:var(--background-light);

}

.about__image-wrapper img{

    width:100%;

    height:650px;

    object-fit:cover;

    transition:transform .6s ease;

}

.about__image-wrapper:hover img{

    transform:scale(1.05);

}

/* Decoración */

.about__image-container::before{

    content:"";

    position:absolute;

    width:180px;

    height:180px;

    background:var(--gradient-secondary);

    border-radius:var(--radius-lg);

    top:-30px;

    left:-30px;

    z-index:-1;

    opacity:.15;

}

.about__image-container::after{

    content:"";

    position:absolute;

    width:220px;

    height:220px;

    border:3px solid var(--color-secondary);

    border-radius:var(--radius-xl);

    bottom:-35px;

    right:-35px;

    z-index:-1;

    opacity:.2;

}

/* Badge flotante */

.about__badge{

    position:absolute;

    left:32px;

    bottom:32px;

    display:flex;

    align-items:center;

    gap:14px;

    padding:16px 20px;

    background:rgba(255,255,255,.9);

    backdrop-filter:blur(14px);

    border-radius:var(--radius-md);

    box-shadow:var(--shadow-md);

    max-width:260px;

}

.about__badge i{

    display:flex;

    align-items:center;

    justify-content:center;

    width:42px;

    height:42px;

    flex-shrink:0;

    border-radius:50%;

    background:var(--gradient-secondary);

    color:#fff;

    font-size:1rem;

}

.about__badge span{

    display:flex;

    flex-direction:column;

    gap:2px;

    font-size:.82rem;

    color:var(--text-secondary);

    line-height:1.3;

}

.about__badge strong{

    font-size:.92rem;

    color:var(--text-primary);

}

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

@media(max-width:992px){

.about__container{

    grid-template-columns:1fr;

    gap:56px;

}

.about__image-container{

    order:-1;

}

.about__title{

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

}

}

@media(max-width:768px){

.about{

    text-align:center;

}

.about__pillars{

    grid-template-columns:1fr;

}

.pillar{

    text-align:left;

}

.about__image-wrapper img{

    height:420px;

}

.about__badge{

    left:50%;

    transform:translateX(-50%);

    bottom:20px;

    max-width:calc(100% - 40px);

}

}

@media(max-width:480px){

.about__text{

    font-size:1rem;

}

.pillar{

    padding:22px;

}

.about__badge{

    flex-direction:column;

    text-align:center;

}

.about__badge span{

    align-items:center;

}

}