/* 📱 Teléfonos (cubre desde 320px hasta 768px) */
@media (max-width: 768px) {
    #heroSection{
        max-height: calc(100vh - 100px);
    }
     section{
        overflow: hidden;
     }
    .w-50 {
        width: 100% !important;
    }
    body .lead2 ,
    body .lead {
        font-size: 18px;
        font-weight: 400;
    } 
    :not(.capsules-col)>.card {
        flex: 1 1 calc(100% - 0px);
    }
    .row.justify-content-between >.col-md-4{
        position: inherit !important;
    }
    body .section-mod ul.service--cards li {
        border: 1px solid #fff;
        border-radius: 15px;
        padding: 30px 25px;
        transition: transform 0.3s ease;
        opacity: 1;
        transform: scale(1);
    }
    body .image1 {
        left: 0;
        top: 0%;
    }
    .text-xs-left{
        text-align: left !important;
    }
    .revert{
        flex-direction: column-reverse;
    }
    .mb-xs-40{
        margin-bottom: 40px !important;
    }
    body .image-frame.ifB {
        position: absolute;
        height: 28vh;
        width: 50%;
        border-radius: 10px;
        overflow: hidden;
        top: 28%;
    }
    body .faq-images-wrapper {
        min-height: 470px;
    }

    /* =========================================================
       WELCOME TEXT (clip-path reveal) — mobile wrap fix
       Permitir multi-linea para que no se salga del container.
       welcome-clip se fuerza a 100% de ancho para que el clip
       coincida exacto con la base sin importar cuantas lineas use.
       ========================================================= */
    body #welcomeSection .welcome-text {
        font-size: clamp(26px, 7vw, 40px) !important;
        word-break: normal;
    }
    body #welcomeSection .welcome-line-base,
    body #welcomeSection .welcome-clip {
        white-space: normal !important;
    }
    body #welcomeSection .welcome-line {
        display: block;
    }
    body #welcomeSection .welcome-clip {
        width: 100% !important;
    }

    /* =========================================================
       CAPSULES (services) — cards apiladas en mobile
       GSAP desactivado en mobile (early return en custom.js).
       Layout: imagen + texto en secuencia 01 -> 02 -> 03.
       Usamos display:contents en img1 y card--image para que
       las 3 imagenes participen del flex padre y podamos
       intercalarlas con los textos via "order".
       ========================================================= */
    body #capsules.capsules {
        width: 100% !important;
        height: auto !important;
        padding: 40px 10px !important;
        margin: 0 !important;
        overflow: visible !important;
    }
    body #capsules .capsules-row {
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 16px;
        padding: 0 !important;
        position: relative !important;
    }
    body #capsules .capsules-col {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: 100% !important;
        /* height: auto !important; */
        transform: none !important;
        opacity: 1 !important;
        display: block !important;
        clip-path: none !important;
    }
    body #capsules .capsules-col[data-ref="content2"],
    body #capsules .capsules-col[data-ref="content3"] {
        display: block !important;
    }
    #welcomeSection{
        padding-bottom: 40px !important;
    }
    /* Las 3 imagenes se sacan del wrapper para flexear con los textos */
    body #capsules .capsules-col.img1,
    body #capsules .capsules-col.img1 .card.card--image {
        display: contents !important;
    }
    .contact-info *{
        color: white !important;
    }
    .contact-info{
        width: calc(100% - 30px);
        padding: 30px 15px;
        margin: auto;
        background-color: #7F8D98;
        border-radius: 10px;
    }
    .image2{
        right: 15px !important;
    }
    .image1{
        left: 15px !important;
    }
    /* Cada imagen se vuelve una card visual de 240px (todas visibles) */
    body #capsules .card--image img {
        position: relative !important;
        inset: auto !important;
        width: 100% !important;
        height: 240px !important;
        border-radius: 10px !important;
        object-fit: cover !important;
        clip-path: none !important;
        transform: none !important;
        scale: 1 !important;
        opacity: 1 !important;
        display: block !important;
        margin: 0;
        object-position: 50% 20%;
    }
    body #capsules .card--image img[data-ref="image2"],
    body #capsules .card--image img[data-ref="image3"] {
        display: block !important;
    }
    /* Orden visual mobile: imagen + texto, secuencia 01 -> 02 -> 03 */
    body #capsules .card--image img[data-ref="image1"]   { order: 1; }
    body #capsules .capsules-col[data-ref="content1"]    { order: 2; }
    body #capsules .card--image img[data-ref="image2"]   { order: 3; }
    body #capsules .capsules-col[data-ref="content2"]    { order: 4; }
    body #capsules .card--image img[data-ref="image3"]   { order: 5; }
    body #capsules .capsules-col[data-ref="content3"]    { order: 6; }

    /* Cada card de texto se renderiza como bloque normal */
    body #capsules .capsules-col .card.card--text {
        position: relative !important;
        inset: auto !important;
        height: 100% !important;
        padding: 32px 24px !important;
        border-radius: 10px !important;
    }
    body #capsules .capsules-col[data-ref="content3"] .card--text {
        background: var(--cap-darkBrown) !important;
        border: 0 !important;
    }
    body #capsules .capsules-col .card--text h2 {
        font-size: clamp(26px, 6vw, 32px) !important;
        max-width: 100% !important;
    }
    body #capsules .capsules-col .card--text p b{
        font-weight: 600 !important;
    }
    body #capsules .capsules-col .card--text p {
        font-size: 16px !important;
        max-width: 100% !important;
        font-weight: 400 !important;
    }
    .card-foot p{display: none !important;}
    body #capsules .capsules-col .card-foot {
        gap: 12px;
        margin-top: 24px;
        height: 45px !important;
    }
    body .capsules-col{
        height: 600px !important;
    }
    /* Si SplitText ya corrio, restauramos el flujo natural de las lineas */
    body #capsules .split-mask,
    body #capsules .split-line {
        display: inline !important;
        overflow: visible !important;
        transform: none !important;
    }


    /* =========================================================
       PARALLAX SECTIONS (.section-img-reveal) — layout mobile
       Texto arriba, imagen abajo en una card con altura fija.
       Anula el position:absolute del container-fluid del 2do parallax.
       ========================================================= */
    /* Invertir orden en mobile: primero la imagen/video, luego el texto y el botón */
    body .section-img-reveal {
        padding: 60px 20px !important;
        overflow: visible !important;
        height: auto !important;
        position: relative !important;
        display: flex !important;
        flex-direction: column-reverse !important;
        gap: 28px;
    }
    body .section-img-reveal .container-fluid {
        position: relative !important;
        inset: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        z-index: auto !important;
    }
    body .section-img-reveal .row.vertical-align {
        display: block !important;
        top: 0%;
        transform: translateY(0%);
    }
    #contactSection{
        padding-top: 0px !important;
    }
    body .section-img-reveal .col-md-5 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        margin-bottom: 0;
    }
    body .section-img-reveal .img-reveal-wrapper {
        position: relative !important;
        width: 100% !important;
        margin-top: 0 !important;
        border-radius: 10px !important;
    }
    body .section-img-reveal .img-reveal-inner {
        width: 100% !important;
        height: 360px !important;
        aspect-ratio: auto !important;
        border-radius: 10px !important;
        overflow: hidden !important;
        position: relative !important;
    }
    .footer-info__left{
        display: none;
    }
        .hero-bg-img { 
            object-position: 35% 50%;
        }
    body .section-img-reveal .img-reveal-photo {
        width: 100% !important;
        height: 100% !important;
        transform: scale(1) !important;
        object-fit: cover !important;
        object-position: 80% 50% !important;
        position: absolute !important;
        inset: 0 !important;
    }
    body .doctor-title,
    body .second-parallax-title {
        font-size: clamp(28px, 8vw, 36px) !important;
        line-height: 1.15;
    }
    body .doctor-description,
    body .second-parallax-description {
        font-size: 15px !important;
        line-height: 1.6;
    }
    /* En mobile forzamos visibilidad: con column-reverse el ScrollTrigger
       a veces no dispara el timeline GSAP y el texto se queda en opacity 0.
       Tambien aseguramos color slate en el primer parallax (sobre fondo blanco). */
    body #healthguidance-img .doctor-title,
    body #healthguidance-img .doctor-description,
    body #healthguidance-img .btn-primary,
    body #secondParallax .second-parallax-title,
    body #secondParallax .second-parallax-description,
    body #secondParallax .btn-primary {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
    body #healthguidance-img .doctor-title,
    body #healthguidance-img .doctor-description {
        color: #7F8D98 !important;
    }
    body #secondParallax {
        background: #7F8D98;
    }
    body #secondParallax .second-parallax-title,
    body #secondParallax .second-parallax-description {
        color: #fff !important;
    }

    /* SVG dentro del icono del btn-primary: en mobile no toma tamano por la
       clase tailwind arbitraria @w-[22], lo forzamos con width/height fijos */
    body .btn-primary .icon svg {
        width: 18px !important;
        height: 18px !important;
        display: block;
    }


    /* =========================================================
       FOOTER MOBILE — estilo capsules.moyra.co
       El bloque .footer-bigword se vuelve una "card" gigante con
       el logo centrado, padding 10px alrededor, border-radius alto.
       ========================================================= */
    /* Tarjeta gigante con fondo plano slate, logo blanco centrado (sin imagen ni gradientes) */
    
    body .footer-bigword img,
    body .footer-bigword svg {
        position: relative;
        z-index: 1;
        width: 78% !important;
        max-width: 340px;
        height: auto !important;
        filter: brightness(0) invert(1);
    }

    /* Footer general mobile — paddings reducidos, columns stacked */
    body .footer-reserve {
        padding: 40px 20px 0 !important;
        margin-top: 80px !important;
    }
    body .footer-reserve__caption {
        font-size: 16px !important;
        text-align: left;
        margin-bottom: 0px !important;
        padding: 0px !important;
    }
    body .footer-marquee {
        height: auto !important;
        min-height: 120px;
    }
    body .footer-marquee__track {
        font-size: 80px !important;
        padding: 20px 16px !important;
        gap: 30px !important;
    }
    body .footer-info {
        flex-direction: column-reverse !important;
        gap: 24px !important;
        padding: 10px 20px 30px !important;
        align-items: flex-start !important;
    }
        body .footer-bigword img{
            min-width: 100%;
        }
        body .footer-bigword {
            display: flex;
            width: 100%;
            margin: auto;
            padding-bottom: 4px;
        }
    .footer-legal p {
        flex: 1;
        color: white;
        margin: 0;
        width: 100%;
        font-size: 14px;
        line-height: 1;
    }
    body .footer-info__menu {
        flex-direction: column !important;
        gap: 6px !important;
        align-items: flex-start !important;
    }
    body .footer-divider {
        margin: 0 20px !important;
    }
    body .footer-legal {
        padding: 40px 20px !important;
        text-align: center;
        font-size: 12px !important;
    }
}