/* ==========================================================
   ABOUT PAGE
   SOSMedical
========================================================== */

.about-page{
    background:var(--background);
}

/*
|--------------------------------------------------------------------------
| Hero
|--------------------------------------------------------------------------
*/

.about-hero{
    position:relative;
    overflow:hidden;

    padding:120px 0;

    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(0,153,216,.12),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #f9fcfe,
            #eef8fc,
            #ffffff
        );
}

.about-hero::before{
    position:absolute;
    top:-200px;
    right:-180px;

    width:600px;
    height:600px;

    content:"";

    border:80px solid rgba(0,153,216,.04);
    border-radius:50%;
}

.about-hero__grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:80px;
    align-items:center;
}

.about-hero__eyebrow{
    color:var(--secondary);

    font-size:12px;
    font-weight:700;
    letter-spacing:.12em;
    text-transform:uppercase;
}

.about-hero__title{
    margin-top:20px;

    font-size:clamp(48px,6vw,78px);
    line-height:1.05;
}

.about-hero__text{
    margin-top:24px;

    color:var(--text-light);

    font-size:18px;
    line-height:1.9;
}

.about-hero__image{
    overflow:hidden;

    border-radius:32px;

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

.about-hero__image img{
    width:100%;
    display:block;
}

/*
|--------------------------------------------------------------------------
| Historia
|--------------------------------------------------------------------------
*/

.about-story{
    padding:110px 0;
}

.about-story__grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:80px;
    align-items:center;
}

.about-story__content h2{
    margin-bottom:24px;
}

.about-story__content p{
    color:var(--text-light);

    line-height:1.9;
    margin-bottom:18px;
}

.about-story__image{
    overflow:hidden;

    border-radius:28px;

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

.about-story__image img{
    width:100%;
    display:block;
}

/*
|--------------------------------------------------------------------------
| Mission Vision
|--------------------------------------------------------------------------
*/

.about-mv{
    padding:110px 0;

    background:var(--white);
}

.about-mv__grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:30px;
}

.about-mv-card{
    padding:45px;

    background:var(--background);

    border-radius:28px;

    border:1px solid rgba(11,35,65,.08);

    transition:all .3s ease;
}

.about-mv-card:hover{
    transform:translateY(-5px);

    border-color:rgba(0,153,216,.15);
}

.about-mv-card__icon{
    width:70px;
    height:70px;

    display:flex;
    align-items:center;
    justify-content:center;

    background:rgba(0,153,216,.08);

    border-radius:18px;

    color:var(--secondary);

    font-size:28px;
}

.about-mv-card__title{
    margin-top:22px;

    font-size:32px;
}

.about-mv-card__text{
    margin-top:18px;

    color:var(--text-light);
    line-height:1.9;
}

/*
|--------------------------------------------------------------------------
| Values
|--------------------------------------------------------------------------
*/

.about-values{
    padding:110px 0;
}

.about-values__grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:25px;
}

.value-card{
    text-align:center;

    padding:40px 28px;

    background:var(--white);

    border-radius:24px;

    border:1px solid rgba(11,35,65,.08);

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

    transition:all .3s ease;
}

.value-card:hover{
    transform:translateY(-6px);

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

.value-card__icon{
    width:72px;
    height:72px;

    margin:auto;

    display:flex;
    align-items:center;
    justify-content:center;

    background:rgba(0,153,216,.08);

    border-radius:50%;

    color:var(--secondary);

    font-size:30px;
}

.value-card__title{
    margin-top:22px;

    font-size:22px;
}

.value-card__text{
    margin-top:14px;

    color:var(--text-light);

    font-size:14px;
    line-height:1.8;
}

/*
|--------------------------------------------------------------------------
| Statistics
|--------------------------------------------------------------------------
*/

.about-stats{
    padding:120px 0;

    background:
        linear-gradient(
            135deg,
            var(--secondary),
            #0084bc,
            var(--primary)
        );
}

.about-stats__grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:30px;
}

.stat-card{
    text-align:center;
}

.stat-card__number{
    color:var(--white);

    font-size:64px;
    font-weight:800;
}

.stat-card__label{
    margin-top:12px;

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

    font-size:15px;
}

/*
|--------------------------------------------------------------------------
| Brands
|--------------------------------------------------------------------------
*/

.about-brands{
    padding:110px 0;

    background:var(--white);
}

.about-brands__logos{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:30px;

    margin-top:60px;
}

.about-brand{
    height:120px;

    display:flex;
    align-items:center;
    justify-content:center;

    background:var(--background);

    border-radius:22px;

    border:1px solid rgba(11,35,65,.08);
}

.about-brand img{
    max-width:70%;
    max-height:60px;
}

/*
|--------------------------------------------------------------------------
| CTA
|--------------------------------------------------------------------------
*/

.about-cta{
    padding:120px 0;
}

.about-cta__box{
    text-align:center;

    padding:80px;

    border-radius:36px;

    background:
        linear-gradient(
            135deg,
            var(--secondary),
            #0084bc,
            var(--primary)
        );
}

.about-cta__title{
    color:var(--white);

    font-size:clamp(34px,5vw,60px);
}

.about-cta__text{
    max-width:760px;

    margin:24px auto 0;

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

    line-height:1.9;
}

.about-cta__actions{
    margin-top:40px;
}

/*
|--------------------------------------------------------------------------
| Responsive
|--------------------------------------------------------------------------
*/

@media(max-width:1200px){

    .about-values__grid{
        grid-template-columns:repeat(2,1fr);
    }

    .about-brands__logos{
        grid-template-columns:repeat(3,1fr);
    }

    .about-stats__grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:992px){

    .about-hero__grid,
    .about-story__grid,
    .about-mv__grid{
        grid-template-columns:1fr;
    }

    .about-hero{
        padding:90px 0;
    }
}

@media (max-width: 768px) {

    /*
    |--------------------------------------------------------------------------
    | Hero
    |--------------------------------------------------------------------------
    */

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

    .about-hero::before {
        top: -130px;
        right: -170px;

        width: 380px;
        height: 380px;

        border-width: 52px;
    }

    .about-hero__grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .about-hero__eyebrow {
        font-size: 9px;
        letter-spacing: .09em;
    }

    .about-hero__title {
        margin-top: 13px;

        font-size: 34px;
        line-height: 1.08;
        letter-spacing: -.025em;

        text-wrap: balance;
    }

    .about-hero__text {
        margin-top: 15px;

        font-size: 13px;
        line-height: 1.65;
    }

    .about-hero .product-info__actions {
        align-items: stretch;
        flex-direction: column;
        gap: 9px;

        margin-top: 22px;
    }

    .about-hero .product-info__actions .btn {
        width: 100%;
        min-height: 46px;
    }

    .about-hero__image {
        max-height: 330px;

        border-radius: 22px;
    }

    .about-hero__image img {
        width: 100%;
        height: 330px;

        object-fit: cover;
    }


    /*
    |--------------------------------------------------------------------------
    | Encabezados generales
    |--------------------------------------------------------------------------
    */

    .about-page .section-heading {
        margin-bottom: 30px;
    }

    .about-page .section-heading__eyebrow {
        font-size: 9px;
        letter-spacing: .09em;
    }

    .about-page .section-heading__title {
        max-width: 520px;
        margin-right: auto;
        margin-left: auto;

        font-size: 29px;
        line-height: 1.12;
        letter-spacing: -.025em;

        text-align: center;
        text-wrap: balance;
    }

    .about-page .section-heading__text {
        max-width: 520px;
        margin-right: auto;
        margin-left: auto;

        font-size: 13px;
        line-height: 1.6;

        text-align: center;
    }


    /*
    |--------------------------------------------------------------------------
    | Historia
    |--------------------------------------------------------------------------
    */

    .about-story {
        padding: 58px 0;
    }

    .about-story__grid {
        display: flex;
        flex-direction: column;
        gap: 28px;
    }

    /*
     * En móvil mostramos primero el contenido.
     */

    .about-story__content {
        order: 1;
    }

    .about-story__image {
        order: 2;

        max-height: 310px;

        border-radius: 21px;
    }

    .about-story__image img {
        width: 100%;
        height: 310px;

        object-fit: cover;
    }

    .about-story__content .section-heading__eyebrow {
        display: block;

        text-align: center;
    }

    .about-story__content .section-heading__title {
        max-width: 520px;
        margin-right: auto;
        margin-left: auto;

        font-size: 28px;
        line-height: 1.12;

        text-align: center;
    }

    .about-story__text {
        margin-top: 18px;

        font-size: 13px;
        line-height: 1.7;
    }

    .about-story__text p + p {
        margin-top: 13px;
    }

    .about-story__content .btn--link {
        margin-top: 8px;
    }


    /*
    |--------------------------------------------------------------------------
    | Misión y visión
    |--------------------------------------------------------------------------
    */

    .about-mv {
        padding: 58px 0;
    }

    .about-mv__grid {
        display: grid;
        grid-auto-columns: minmax(250px, 80vw);
        grid-auto-flow: column;
        grid-template-columns: none;
        gap: 12px;

        overflow-x: auto;
        overflow-y: hidden;

        margin-right: -14px;
        padding-right: 14px;
        padding-bottom: 11px;

        scroll-snap-type: x mandatory;
        scrollbar-width: none;

        -webkit-overflow-scrolling: touch;
    }

    .about-mv__grid::-webkit-scrollbar {
        display: none;
    }

    .about-mv-card {
        min-height: 240px;
        padding: 24px;

        border-radius: 20px;

        scroll-snap-align: start;
    }

    .about-mv-card:hover {
        transform: none;
    }

    .about-mv-card__icon {
        width: 56px;
        height: 56px;

        border-radius: 15px;
    }

    .about-mv-card__icon svg {
        width: 25px;
        height: 25px;
    }

    .about-mv-card__title {
        margin-top: 17px;

        font-size: 23px;
    }

    .about-mv-card__text {
        margin-top: 12px;

        font-size: 12px;
        line-height: 1.6;
    }


    /*
    |--------------------------------------------------------------------------
    | Valores
    |--------------------------------------------------------------------------
    */

    .about-values {
        padding: 58px 0;
    }

    .about-values__grid {
        display: grid;
        grid-auto-columns: minmax(220px, 70vw);
        grid-auto-flow: column;
        grid-template-columns: none;
        gap: 11px;

        overflow-x: auto;
        overflow-y: hidden;

        margin-right: -14px;
        padding-right: 14px;
        padding-bottom: 11px;

        scroll-snap-type: x mandatory;
        scrollbar-width: none;

        -webkit-overflow-scrolling: touch;
    }

    .about-values__grid::-webkit-scrollbar {
        display: none;
    }

    .value-card {
        min-height: 210px;
        padding: 23px 20px;

        border-radius: 19px;

        scroll-snap-align: start;
    }

    .value-card:hover {
        transform: none;
    }

    .value-card__icon {
        width: 58px;
        height: 58px;
    }

    .value-card__icon svg {
        width: 26px;
        height: 26px;
    }

    .value-card__title {
        margin-top: 16px;

        font-size: 19px;
    }

    .value-card__text {
        margin-top: 9px;

        font-size: 11px;
        line-height: 1.55;
    }


    /*
    |--------------------------------------------------------------------------
    | Estadísticas
    |--------------------------------------------------------------------------
    */

    .about-stats {
        padding: 60px 0;
    }

    .about-stats__grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .stat-card {
        padding: 20px 10px;
    }

    .stat-card__number {
        font-size: 38px;
    }

    .stat-card__label {
        margin-top: 7px;

        font-size: 10px;
        line-height: 1.4;
    }


    /*
    |--------------------------------------------------------------------------
    | Marcas
    |--------------------------------------------------------------------------
    */

    .about-brands {
        padding: 58px 0;
    }

    .about-brands__logos {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
        gap: 11px;

        margin-top: 28px;

        padding: 13px;

        background: var(--background);

        border: 1px solid rgba(11, 35, 65, .07);
        border-radius: 22px;
    }

    .about-brand {
        height: 105px;

        padding: 14px;

        background: var(--white);

        border-radius: 16px;
    }

    .about-brand img {
        width: auto;
        max-width: 88%;
        height: auto;
        max-height: 56px;

        object-fit: contain;
    }


    /*
    |--------------------------------------------------------------------------
    | CTA
    |--------------------------------------------------------------------------
    */

    .about-cta {
        padding: 58px 0;
    }

    .about-cta__box {
        padding: 36px 22px;

        border-radius: 23px;
    }

    .about-cta__title {
        max-width: 520px;
        margin-right: auto;
        margin-left: auto;

        font-size: 29px;
        line-height: 1.12;
        letter-spacing: -.025em;

        text-wrap: balance;
    }

    .about-cta__text {
        max-width: 500px;
        margin-top: 14px;

        font-size: 13px;
        line-height: 1.6;
    }

    .about-cta__actions {
        margin-top: 23px;
    }

    .about-cta__actions .btn {
        width: 100%;
        min-height: 47px;
    }
}

@media (max-width: 480px) {

    /*
    |--------------------------------------------------------------------------
    | Hero
    |--------------------------------------------------------------------------
    */

    .about-hero {
        padding: 46px 0 40px;
    }

    .about-hero::before {
        top: -105px;
        right: -155px;

        width: 310px;
        height: 310px;

        border-width: 42px;
    }

    .about-hero__grid {
        gap: 24px;
    }

    .about-hero__eyebrow {
        font-size: 8px;
        letter-spacing: .08em;
    }

    .about-hero__title {
        margin-top: 10px;

        font-size: 29px;
        line-height: 1.07;
        letter-spacing: -.025em;
    }

    .about-hero__text {
        margin-top: 12px;

        font-size: 12px;
        line-height: 1.58;
    }

    .about-hero .product-info__actions {
        gap: 8px;

        margin-top: 18px;
    }

    .about-hero .product-info__actions .btn {
        min-height: 44px;
        padding-inline: 14px;

        font-size: 11px;
    }

    .about-hero__image {
        max-height: 255px;

        border-radius: 19px;
    }

    .about-hero__image img {
        height: 255px;

        object-fit: cover;
    }


    /*
    |--------------------------------------------------------------------------
    | Encabezados generales
    |--------------------------------------------------------------------------
    */

    .about-page .section-heading {
        margin-bottom: 25px;
    }

    .about-page .section-heading__eyebrow {
        font-size: 8px;
        letter-spacing: .08em;
    }

    .about-page .section-heading__title {
        max-width: 350px;

        font-size: 25px;
        line-height: 1.1;
    }

    .about-page .section-heading__text {
        max-width: 355px;

        font-size: 11px;
        line-height: 1.55;
    }


    /*
    |--------------------------------------------------------------------------
    | Historia
    |--------------------------------------------------------------------------
    */

    .about-story {
        padding: 48px 0;
    }

    .about-story__grid {
        gap: 23px;
    }

    .about-story__content
    .section-heading__eyebrow {
        font-size: 8px;
    }

    .about-story__content
    .section-heading__title {
        max-width: 350px;

        font-size: 25px;
        line-height: 1.1;
    }

    .about-story__text {
        margin-top: 15px;

        font-size: 12px;
        line-height: 1.62;
    }

    .about-story__text p + p {
        margin-top: 11px;
    }

    .about-story__image {
        max-height: 250px;

        border-radius: 18px;
    }

    .about-story__image img {
        height: 250px;

        object-fit: cover;
    }

    .about-story__content .btn--link {
        margin-top: 5px;

        font-size: 11px;
    }


    /*
    |--------------------------------------------------------------------------
    | Misión y visión
    |--------------------------------------------------------------------------
    */

    .about-mv {
        padding: 48px 0;
    }

    .about-mv__grid {
        grid-auto-columns:
            minmax(230px, 84vw);
        gap: 10px;

        margin-right: -11px;
        padding-right: 11px;
        padding-bottom: 9px;
    }

    .about-mv-card {
        min-height: 215px;
        padding: 20px;

        border-radius: 17px;
    }

    .about-mv-card__icon {
        width: 49px;
        height: 49px;

        border-radius: 13px;
    }

    .about-mv-card__icon svg {
        width: 22px;
        height: 22px;
    }

    .about-mv-card__title {
        margin-top: 14px;

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

    .about-mv-card__text {
        margin-top: 9px;

        font-size: 11px;
        line-height: 1.52;
    }


    /*
    |--------------------------------------------------------------------------
    | Valores
    |--------------------------------------------------------------------------
    */

    .about-values {
        padding: 48px 0;
    }

    .about-values__grid {
        grid-auto-columns:
            minmax(205px, 72vw);
        gap: 9px;

        margin-right: -11px;
        padding-right: 11px;
        padding-bottom: 9px;
    }

    .value-card {
        min-height: 185px;
        padding: 20px 16px;

        border-radius: 17px;
    }

    .value-card__icon {
        width: 52px;
        height: 52px;
    }

    .value-card__icon svg {
        width: 23px;
        height: 23px;
    }

    .value-card__title {
        margin-top: 13px;

        font-size: 17px;
        line-height: 1.15;
    }

    .value-card__text {
        margin-top: 7px;

        font-size: 10px;
        line-height: 1.48;
    }


    /*
    |--------------------------------------------------------------------------
    | Estadísticas
    |--------------------------------------------------------------------------
    */

    .about-stats {
        padding: 50px 0;
    }

    .about-stats__grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
        gap: 9px;
    }

    .stat-card {
        padding: 17px 7px;
    }

    .stat-card__number {
        font-size: 32px;
        line-height: 1;
    }

    .stat-card__label {
        max-width: 120px;
        margin: 6px auto 0;

        font-size: 9px;
        line-height: 1.35;
    }


    /*
    |--------------------------------------------------------------------------
    | Marcas
    |--------------------------------------------------------------------------
    */

    .about-brands {
        padding: 48px 0;
    }

    .about-brands__logos {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
        gap: 9px;

        margin-top: 24px;
        padding: 11px;

        border-radius: 20px;
    }

    .about-brand {
        height: 90px;
        padding: 11px;

        border-radius: 14px;
    }

    .about-brand img {
        max-width: 88%;
        max-height: 48px;
    }


    /*
    |--------------------------------------------------------------------------
    | CTA
    |--------------------------------------------------------------------------
    */

    .about-cta {
        padding: 48px 0;
    }

    .about-cta__box {
        padding: 30px 18px;

        border-radius: 19px;
    }

    .about-cta__title {
        max-width: 350px;

        font-size: 25px;
        line-height: 1.1;
    }

    .about-cta__text {
        max-width: 350px;
        margin-top: 11px;

        font-size: 11px;
        line-height: 1.55;
    }

    .about-cta__actions {
        margin-top: 19px;
    }

    .about-cta__actions .btn {
        min-height: 45px;

        font-size: 11px;
    }
}

.about-story__text {
    color: var(--text-light);
    line-height: 1.9;
}

.about-story__text p + p {
    margin-top: 18px;
}