/*==================================================
                CAPINOA
            RESPONSIVE GLOBAL
==================================================*/

/*==================================================
        DESKTOP XL (1400px)
==================================================*/

@media (max-width:1399.98px){

    .container{

        max-width:1140px;

    }

}

/*==================================================
        DESKTOP (1200px)
==================================================*/

@media (max-width:1199.98px){

    section{

        padding:90px 0;

    }

    .section-title{

        margin-bottom:60px;

    }

    .section-title h2{

        font-size:2.4rem;

    }

    .cap-card{

        padding:32px;

    }

    .cap-treatment{

        padding:32px;

    }

    .cap-form{

        padding:36px;

    }

}

/*==================================================
        TABLET (992px)
==================================================*/

@media (max-width:991.98px){

    body{

        padding-top:80px;

    }

    section{

        padding:80px 0;

    }

    .section-title{

        text-align:center;

    }

    .section-title h2{

        font-size:2rem;

    }

    .section-title p{

        max-width:680px;

        margin:auto;

    }

    .cap-navbar{

        min-height:80px;

    }

    .cap-brand img{

        width:76px;

        height:46px;

    }

    .cap-brand small{

        display:none;

    }

    .cap-btn{

        width:100%;

        justify-content:center;

    }

    .cap-about-image{

        max-width:520px;

        margin:0 auto 40px;

    }


    .cap-image-card{

        margin-bottom:35px;

    }

    .cap-treatment-main{

        padding:35px;

    }

    .cap-contact-info{

        margin-bottom:40px;

    }

}

/*==================================================
        MOBILE (768px)
==================================================*/

@media (max-width:767.98px){

    section{

        padding:70px 0;

    }

    .container{

        padding-left:22px;

        padding-right:22px;

    }

    .section-badge{

        font-size:.6rem;

        padding:8px 18px;

    }

    .section-title{

        margin-bottom:45px;

    }

    .section-title h2{

        font-size:1.8rem;

        line-height:1.25;

    }

    .section-title p{

        font-size:1rem;

    }

    .cap-card{

        padding:28px;

    }

    .cap-treatment{

        padding:28px;

    }

    .cap-feature-card{

        padding:28px;

    }

    .cap-step{

        padding:28px;

    }

    .cap-form{

        padding:28px;

    }

    .cap-contact h2{

        font-size:1.9rem;

    }

    .cap-contact-item{

        flex-direction:column;

        gap:8px;

    }

    .cap-list div{

        padding:14px 0;

    }

    .cap-about-image{

        max-width:340px;

    }

    .cap-about-image img,
    .hero-image img,
    .cap-image-card img{

        display:block;
        width:100%;
        height:auto;
        object-fit:contain;

    }


}

/*==================================================
        SMALL MOBILE (576px)
==================================================*/

@media (max-width:575.98px){

    body{

        font-size:16px;

    }

    section{

        padding:60px 0;

    }

    .section-title h2{

        font-size:1.6rem;

    }

    .cap-btn{

        width:100%;

        min-height:54px;

    }

    .cap-card{

        border-radius:22px;

    }

    .cap-treatment{

        border-radius:22px;

    }

    .cap-feature-card{

        border-radius:22px;

    }

    .cap-step{

        border-radius:22px;

    }

    .cap-image-card{

        border-radius:22px;

    }

    .cap-form{

        border-radius:22px;

    }

}

/*==================================================
        EXTRA SMALL (400px)
==================================================*/

@media (max-width:399.98px){

    .container{

        padding-left:18px;

        padding-right:18px;

    }

    .section-title h2{

        font-size:1.45rem;

    }

    .section-badge{

        font-size:.70rem;

    }

    .cap-card{

        padding:22px;

    }

    .cap-treatment{

        padding:22px;

    }

    .cap-feature-card{

        padding:22px;

    }

    .cap-step{

        padding:22px;

    }

    .cap-form{

        padding:22px;

    }

}

/*==================================================
    CENTRO MÉDICO
    IMAGEN + TARJETAS
==================================================*/

.cap-about-image{

    width:100%;

    margin:0 !important;

    padding:0 !important;

    height:auto !important;

    min-height:0 !important;

    position:relative;

}

.cap-about-image img{

    display:block;

    width:100%;

    height:auto;

    margin:0;

}


/*==================================================
    CONTENEDOR DE TARJETAS
==================================================*/

.cap-about-floating{

    position:relative;

    display:grid;

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

    gap:12px;

    width:100%;

    margin:12px 0 0 !important;

    padding:0 !important;

    z-index:5;

}


/*==================================================
    TARJETA
==================================================*/

.cap-floating-card{

    position:relative;

    display:flex;

    align-items:center;

    gap:11px;

    width:100%;

    min-width:0;

    margin:0;

    padding:15px;

    background:#fff;

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

    border-radius:17px;

    box-shadow:0 10px 25px rgba(15,23,42,.07);

    opacity:1;

    visibility:visible;

    transform:none;

}


/*==================================================
    ICONO
==================================================*/

.cap-floating-icon{

    flex:0 0 40px;

    width:40px;

    height:40px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:11px;

    background:var(--primary-light);

    color:var(--primary);

    font-size:18px;

}


/*==================================================
    TEXTO
==================================================*/

.cap-floating-card strong{

    display:block;

    color:var(--primary);

    font-size:.82rem;

    line-height:1.3;

}

.cap-floating-card span{

    display:block;

    margin-top:3px;

    color:var(--gray-500);

    font-size:.72rem;

    line-height:1.35;

}


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

@media (max-width:991.98px){

    .cap-about-floating{

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

        max-width:650px;

        margin:12px auto 0 !important;

    }

}


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

@media (max-width:767.98px){

    .cap-about-floating{

        grid-template-columns:1fr;

        gap:10px;

        margin:12px auto 0 !important;

    }

    .cap-floating-card{

        padding:14px;

    }

}


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

@media (max-width:480px){

    .cap-floating-icon{

        flex-basis:38px;

        width:38px;

        height:38px;

    }

    .cap-floating-card strong{

        font-size:.80rem;

    }

}

/*==================================================
    NOSOTROS
    IGUALAR ALTURA DE LAS 3 TARJETAS
==================================================*/

.cap-about > .container > .row{

    align-items:stretch !important;

}


/* Las tres columnas ocupan la misma altura */

.cap-about > .container > .row > [class*="col-"]{

    display:flex;

    flex-direction:column;

}


/*==================================================
    TARJETA DE IMAGEN
==================================================*/

.cap-about-image{

    flex:1;

    width:100%;

    height:100%;

    min-height:620px;

    border-radius:28px;

    overflow:hidden;

}


/* Imagen ocupa exactamente toda la tarjeta */

.cap-about-image > img{

    width:100%;

    height:100%;

    min-height:620px;

    object-fit:cover;

    border-radius:0;

}


/*==================================================
    TARJETAS DE CONTENIDO
==================================================*/

.cap-about > .container > .row > .col-lg-4 > .cap-card{

    width:100%;

    height:100%;

    min-height:620px;

    margin:0;

    border-radius:28px;

}


/* Tercera tarjeta */

.cap-about > .container > .row > .col-lg-4 > .cap-card-body{

    width:100%;

    height:100%;

    min-height:620px;

    margin:0;

    padding:40px;

    background:#FFFFFF;

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

    border-radius:28px;

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

}

@media (max-width:991.98px){

    .cap-about > .container > .row{

        align-items:stretch !important;

    }

    .cap-about-image,
    .cap-about-image > img,
    .cap-about > .container > .row > .col-lg-4 > .cap-card,
    .cap-about > .container > .row > .col-lg-4 > .cap-card-body{

        min-height:0;

    }

    .cap-about-image{

        height:auto;

    }

    .cap-about-image > img{

        height:auto;

        aspect-ratio:650 / 760;

        object-fit:cover;

    }

}


/*==================================================*
 * HERO — TARJETAS RESPONSIVE
 *==================================================*/

@media (max-width: 767.98px) {

    .cap-hero-features {
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: 100%;
        gap: 8px;
        margin: 20px auto 0;
    }

    .cap-feature {
        width: 100%;
        min-width: 0;
        min-height: 56px;
        height: 56px;

        display: flex;
        align-items: center;

        gap: 12px;

        padding: 8px 14px;

        text-align: left;

        background: #ffffff;

        border: 1px solid var(--gray-200);
        border-radius: 14px;

        box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);

        overflow: hidden;

        box-sizing: border-box;
    }

    /* Icono */

    .cap-feature i {
        flex: 0 0 32px;

        width: 32px;
        height: 32px;

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

        margin: 0;

        font-size: 17px;

        border-radius: 9px;

        background: rgba(12, 159, 171, 0.10);

        color: var(--secondary);
    }

    /* Contenedor textual */

    .cap-feature strong,
    .cap-feature span {
        min-width: 0;
        overflow: hidden;
    }

    .cap-feature strong {
        display: block;

        margin: 0;

        color: var(--primary);

        font-size: 0.82rem;
        line-height: 1.2;

        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .cap-feature span {
        display: block;

        margin: 2px 0 0;

        color: var(--gray-500);

        font-size: 0.70rem;
        line-height: 1.2;

        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}


/*==================================================*
 * MOBILE PEQUEÑO
 *==================================================*/

@media (max-width: 480px) {

    .cap-hero-features {
        gap: 7px;
        margin-top: 18px;
    }

    .cap-feature {
        height: 54px;
        min-height: 54px;

        padding: 7px 12px;

        gap: 10px;

        border-radius: 13px;
    }

    .cap-feature i {
        flex-basis: 30px;

        width: 30px;
        height: 30px;

        font-size: 16px;

        border-radius: 8px;
    }

    .cap-feature strong {
        font-size: 0.78rem;
    }

    .cap-feature span {
        font-size: 0.67rem;
    }
}