/* =====================================================
   RESPONSIVE.CSS
   Dueño Vargas & Asociados
   Adaptación móvil y tablet
===================================================== */



/* =====================================================
   TABLETS
   1024px hacia abajo
===================================================== */


@media (max-width:1024px){



    .container{

        width:90%;

    }




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


    .navbar{

        padding:20px 0;

    }



    .menu{

        gap:20px;

    }



    .menu a{

        font-size:15px;

    }




    .btn-header{

        padding:12px 22px;

        font-size:14px;

    }





    /* =========================
       HERO
    ========================= */


    .hero-content{


        width:70%;


    }



    .hero-content h1,
    .hero-content .hero-main-title{


        font-size:45px;


    }



    .hero-content h2{


        font-size:28px;


    }





    /* =========================
       PRESENTACIÓN
    ========================= */


    .presentation-grid{


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


        gap:30px;


    }



    .presentation-box:last-child{


        grid-column:span 2;


    }





    /* =========================
       SERVICIOS
    ========================= */


    .services-grid{


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


    }





    /* =========================
       BIOGRAFÍA
    ========================= */


    .biography-grid{


        gap:40px;


    }





    /* =========================
       CONTACTO
    ========================= */


    .contact-grid{


        gap:40px;


    }



}









/* =====================================================
   TABLETS PEQUEÑAS / CELULARES GRANDES
   768px hacia abajo
===================================================== */


@media(max-width:768px){





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


    .navbar{


        position:relative;


    }




    .logo img{


        width:130px;


    }





    /* botón hamburguesa */


    .menu-mobile{


        display:flex;


        flex-direction:column;


        gap:6px;


        cursor:pointer;


        z-index:1001;


    }



    .menu-mobile span{


        width:28px;


        height:2px;


        background:#C19B53;


        transition:.3s ease;


    }





    /* animación hamburguesa */


    .menu-mobile.active span:nth-child(1){


        transform:translateY(8px) rotate(45deg);


    }



    .menu-mobile.active span:nth-child(2){


        opacity:0;


    }



    .menu-mobile.active span:nth-child(3){


        transform:translateY(-8px) rotate(-45deg);


    }







    /* menú desplegable */


    .menu{


        position:absolute;


        top:80px;


        left:0;


        width:100%;



        background:#0F1D30;



        flex-direction:column;


        align-items:center;


        gap:25px;



        padding:35px 0;



        opacity:0;


        visibility:hidden;



        transform:translateY(-15px);



        transition:.35s ease;



        z-index:999;


    }





    .menu.active{


        opacity:1;


        visibility:visible;


        transform:translateY(0);


    }





    .menu li{


        text-align:center;


    }





    .menu a{


        color:white;


        font-size:17px;


    }





    .btn-header{


        display:none;


    }






    /* dropdown */


    .dropdown-menu{


        position:static;


        display:none;


        width:100%;


        margin-top:15px;


        box-shadow:none;


    }



    .dropdown.open .dropdown-menu{


        display:block;


    }





    /* =========================
       HERO
    ========================= */


    .hero{


        height:85vh;


    }



    .hero-content{


        width:90%;


        text-align:center;


        left:50%;


        transform:translate(-50%,-50%);


    }




    .hero-content span{


        font-size:14px;


    }




    .hero-content h1,
    .hero-content .hero-main-title{


        font-size:34px;


        line-height:1.2;


    }




    .hero-content h2{


        font-size:24px;


    }





    .hero-content p{


        font-size:16px;


    }






    .slider-btn{


        width:40px;


        height:40px;


    }





    /* =========================
       PRESENTACIÓN
    ========================= */


    .presentation-grid{


        grid-template-columns:1fr;


    }




    .presentation-box:last-child{


        grid-column:auto;


    }





    .office-card{


        flex-direction:column;


        text-align:center;


    }



    .office-card img{


        width:100%;


        max-width:250px;


        margin:auto;


    }





    .practice-grid{


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


    }







    /* =========================
       HERENCIAS
    ========================= */


    .about-grid{


        grid-template-columns:1fr;


    }





    .about-box{


        margin-top:30px;


    }





    /* =========================
       SERVICIOS
    ========================= */


    .services-grid{


        grid-template-columns:1fr;


    }




    .service-card{


        padding:35px 25px;


    }







    /* =========================
       BIOGRAFÍA
    ========================= */


    .biography-grid{


        grid-template-columns:1fr;


        text-align:center;


    }




    .biography-image img{


        max-width:320px;


    }





    .bio-contact{


        text-align:center;


    }





    /* =========================
       CONTACTO
    ========================= */


    .contact-grid{


        grid-template-columns:1fr;


    }




    .contact-form input,
    .contact-form textarea{


        width:100%;


    }







    /* =========================
       FOOTER
    ========================= */


    .footer-grid{


        grid-template-columns:1fr;


        text-align:center;


    }



    .socials{


        justify-content:center;


    }



}









/* =====================================================
   CELULARES PEQUEÑOS
   480px hacia abajo
===================================================== */


@media(max-width:480px){





    .logo img{


        width:110px;


    }





    .hero{


        height:80vh;


    }




    .hero-content h1,
    .hero-content .hero-main-title{


        font-size:28px;


    }





    .hero-content h2{


        font-size:21px;


    }





    .hero-content p{


        font-size:15px;


    }




    .btn-gold{


        padding:13px 25px;


        font-size:14px;


    }





    .section-heading h2{


        font-size:30px;


    }





    .practice-grid{


        grid-template-columns:1fr;


    }





    .service-number{


        font-size:45px;


    }





}





/* =====================================================
   PANTALLAS GRANDES
===================================================== */


@media(min-width:1400px){



    .container{


        max-width:1250px;


    }



    .hero-content h1,
    .hero-content .hero-main-title{


        font-size:60px;


    }



}

/* =====================================================
   AJUSTE RESPONSIVE 1.9.0
   Optimización móvil y tablet sin alterar escritorio
===================================================== */

/* Tablets, iPad y navegación intermedia */
@media (max-width:1100px){
    html{
        scroll-padding-top:78px;
    }

    body{
        padding-top:78px;
    }

    .container{
        width:min(92%, 980px);
    }

    section{
        padding:82px 0;
    }

    .navbar{
        height:78px;
        padding:0;
        position:relative;
    }

    .logo img{
        width:auto;
        height:54px;
        max-width:190px;
    }

    .btn-header{
        display:none;
    }

    .menu-mobile{
        display:flex;
        flex:0 0 44px;
        position:relative;
        z-index:10002;
    }

    .menu-mobile span{
        background:var(--secondary);
    }

    .menu-mobile.active span:nth-child(1){
        transform:translateY(8px) rotate(45deg);
    }

    .menu-mobile.active span:nth-child(2){
        opacity:0;
    }

    .menu-mobile.active span:nth-child(3){
        transform:translateY(-8px) rotate(-45deg);
    }

    .menu{
        position:fixed;
        top:78px;
        left:0;
        right:0;
        width:100%;
        max-height:calc(100dvh - 78px);
        overflow-y:auto;
        overscroll-behavior:contain;
        display:flex;
        flex-direction:column;
        align-items:stretch;
        gap:4px;
        padding:22px max(4vw,22px) 30px;
        background:rgba(15,29,48,.985);
        border-top:1px solid rgba(255,255,255,.08);
        box-shadow:0 18px 35px rgba(0,0,0,.22);
        opacity:0;
        visibility:hidden;
        pointer-events:none;
        transform:translateY(-10px);
        transition:opacity .25s ease, transform .25s ease, visibility .25s ease;
        z-index:10000;
    }

    .menu.active{
        opacity:1;
        visibility:visible;
        pointer-events:auto;
        transform:translateY(0);
    }

    .menu > li{
        width:100%;
        text-align:center;
    }

    .menu > li > a{
        width:100%;
        min-height:48px;
        padding:11px 16px;
        justify-content:center;
        color:#FFF;
        font-size:16px;
        line-height:1.35;
    }

    .menu > li > a::after{
        display:none;
    }

    .dropdown-menu,
    .dropdown:hover .dropdown-menu{
        position:static;
        left:auto;
        top:auto;
        transform:none;
        display:none;
        width:min(100%,560px);
        min-width:0;
        margin:4px auto 12px;
        border-radius:5px;
        opacity:0;
        visibility:hidden;
        box-shadow:none;
    }

    .dropdown.open .dropdown-menu,
    .dropdown.open:hover .dropdown-menu{
        display:block;
        opacity:1;
        visibility:visible;
        transform:none;
    }

    .dropdown-menu a{
        padding:14px 18px;
        font-size:15px;
        line-height:1.35;
        text-align:center;
    }

    .dropdown-menu a:hover{
        padding-left:18px;
    }

    .dropdown.open > a i{
        transform:rotate(180deg);
    }

    /* Hero: elimina la altura mínima de escritorio que forzaba 750px */
    .hero{
        height:calc(100svh - 78px);
        min-height:620px;
        max-height:800px;
    }

    .hero-content{
        width:min(84%,760px);
        max-width:760px;
        left:50%;
        top:50%;
        transform:translate(-50%,-50%);
        text-align:center;
    }

    .hero-content h1,
    .hero-content .hero-main-title{
        max-width:none;
        margin-left:auto;
        margin-right:auto;
        font-size:clamp(42px,6.6vw,60px);
    }

    .hero-content h2{
        font-size:clamp(27px,4vw,34px);
    }

    .hero-content p{
        max-width:610px;
        margin-left:auto;
        margin-right:auto;
        font-size:17px;
    }

    .prev{ left:18px; }
    .next{ right:18px; }

    .slider-btn{
        width:48px;
        height:48px;
    }

    .slider-dots{
        bottom:28px;
    }

    /* Tipografía y espacios generales de tablet */
    .section-heading{
        margin-bottom:50px;
    }

    .section-heading h2,
    .section-title-left h2{
        font-size:clamp(36px,5vw,44px);
    }

    .presentation,
    .about-herencias,
    .services,
    .biography{
        padding-top:88px;
        padding-bottom:88px;
    }

    .presentation-box{
        padding:58px 0;
    }

    .presentation-box::after{
        margin-top:58px;
    }

    .presentation-box:first-child .lead{
        padding:30px 32px;
    }

    .presentation-box:first-child .experience-item{
        padding:24px 28px;
    }

    /* Tarjetas del despacho: impide imágenes más anchas que su columna */
    .office-card{
        grid-template-columns:minmax(220px,300px) minmax(0,1fr);
        gap:28px;
        padding:26px;
    }

    .office-card img,
    .office-card:first-child img{
        width:100%;
        height:auto;
        aspect-ratio:4 / 3;
        object-fit:cover;
    }

    .practice-list{
        column-gap:34px;
        padding:26px 30px;
    }

    .services-grid{
        gap:22px;
    }

    .service-card{
        min-height:0;
    }

    .biography-grid{
        grid-template-columns:minmax(300px,360px) minmax(0,1fr);
        gap:42px;
    }

    .biography-image img{
        width:100%;
        height:auto;
    }

    .footer-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:44px 55px;
    }

    /* Páginas internas */
    .service-detail-content{
        padding:48px 48px 55px;
    }

    .service-detail-cta{
        padding:38px 42px;
    }

    .bio-copy{
        padding-left:42px;
        padding-right:42px;
    }

    .home-news-feed{
        padding-top:90px;
        padding-bottom:90px;
    }

    .presentation-grid > .home-news-feed{
        width:100dvw;
        margin-left:calc(50% - 50dvw);
        margin-right:calc(50% - 50dvw);
    }
}

/* Móviles y tablets pequeñas */
@media (max-width:768px){
    section{
        padding:70px 0;
    }

    .container{
        width:min(91%, 680px);
    }

    .hero{
        min-height:570px;
        max-height:740px;
    }

    .hero-content{
        width:min(86%,620px);
        top:48%;
    }

    .hero-content span{
        font-size:12px;
        letter-spacing:3.5px;
        margin-bottom:14px;
    }

    .hero-content h1,
    .hero-content .hero-main-title{
        font-size:clamp(34px,8.5vw,48px);
        margin-bottom:12px;
    }

    .hero-content h2{
        font-size:clamp(24px,5.8vw,30px);
        margin-bottom:18px;
    }

    .hero-content p{
        font-size:16px;
        line-height:1.65;
        margin-bottom:28px;
    }

    .hero .btn-gold{
        padding:15px 28px;
        letter-spacing:1.2px;
    }

    .slider-btn{
        width:42px;
        height:42px;
        top:auto;
        bottom:20px;
        transform:none;
    }

    .prev{ left:18px; }
    .next{ right:18px; }

    .slider-dots{
        bottom:34px;
    }

    .presentation,
    .about-herencias,
    .services,
    .biography{
        padding-top:74px;
        padding-bottom:74px;
    }

    .presentation-box{
        padding:48px 0;
    }

    .section-title-left{
        margin-bottom:30px;
    }

    .presentation-box:first-child .lead,
    .presentation-box:first-child .experience-item{
        padding:24px 22px;
    }

    .office-card{
        display:grid;
        grid-template-columns:1fr;
        gap:22px;
        padding:22px;
        text-align:center;
    }

    .office-card img,
    .office-card:first-child img{
        width:min(100%,420px);
        height:auto;
        aspect-ratio:4 / 3;
        margin:0 auto;
    }

    .practice-list{
        grid-template-columns:1fr;
        padding:22px 24px;
    }

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

    .practice-card{
        min-height:105px;
        padding:20px 12px;
    }

    .about-grid,
    .biography-grid,
    .contact-grid{
        grid-template-columns:1fr;
    }

    .about-message{
        padding-left:24px;
        padding-right:24px;
    }

    .services-grid{
        grid-template-columns:1fr;
    }

    .service-card{
        padding:32px 24px;
    }

    .biography-grid{
        gap:32px;
    }

    .biography-image img{
        max-width:360px;
        margin:0 auto;
    }

    .footer-grid{
        grid-template-columns:1fr;
        gap:34px;
        text-align:center;
    }

    .footer img{
        margin-left:auto;
        margin-right:auto;
    }

    .socials{
        justify-content:center;
    }

    .service-detail-content{
        padding:38px 26px 45px;
    }

    .service-detail-image{
        padding:0 18px;
    }

    .service-detail-cta{
        flex-direction:column;
        align-items:flex-start;
        padding:32px 26px;
    }

    .service-detail-cta .btn-gold{
        width:100%;
    }

    .bio-copy{
        padding:34px 25px;
    }

    .bio-consult-cta{
        align-items:stretch;
    }

    .bio-consult-cta .btn-gold{
        width:100%;
    }

    .fts-news-feed{
        width:100%;
        max-width:100%;
        padding:14px;
    }
}

/* Teléfonos */
@media (max-width:600px){
    body{
        padding-top:72px;
    }

    html{
        scroll-padding-top:72px;
    }

    .navbar{
        height:72px;
    }

    .logo img{
        height:48px;
        max-width:165px;
    }

    .menu{
        top:72px;
        max-height:calc(100dvh - 72px);
        padding-left:18px;
        padding-right:18px;
    }

    .hero{
        height:calc(100svh - 72px);
        min-height:535px;
        max-height:700px;
    }

    .hero-content{
        width:84%;
        top:46%;
    }

    .hero-content h1,
    .hero-content .hero-main-title{
        font-size:clamp(31px,9vw,40px);
    }

    .hero-content h2{
        font-size:clamp(22px,6vw,27px);
    }

    .hero-content p{
        font-size:15px;
        line-height:1.6;
    }

    .slider-btn{
        width:38px;
        height:38px;
        bottom:16px;
    }

    .slider-dots{
        bottom:29px;
        gap:9px;
    }

    .dot{
        width:11px;
        height:11px;
    }

    .section-heading h2,
    .section-title-left h2{
        font-size:clamp(31px,9vw,38px);
    }

    .section-heading{
        margin-bottom:38px;
    }

    .section-subtitle,
    .section-heading > span{
        letter-spacing:2.2px;
    }

    .presentation-box:first-child .lead,
    .presentation-box:first-child .experience-item,
    .about-box,
    .service-card{
        padding-left:20px;
        padding-right:20px;
    }

    .practice-grid{
        grid-template-columns:1fr;
    }

    .about-message p{
        font-size:18px;
    }

    .about-message strong{
        font-size:19px;
    }

    .service-page-hero{
        padding:56px 0 52px;
    }

    .service-detail{
        padding:56px 0 68px;
    }

    .service-detail-content h2{
        font-size:clamp(30px,9vw,38px);
    }

    .service-detail-emphasis{
        padding:21px 20px;
        font-size:20px !important;
    }

    .service-detail-cta h3{
        font-size:25px;
    }

    .appointment-intro h1{
        font-size:clamp(36px,10vw,46px);
    }

    .calendly-shell{
        margin-left:-1.5%;
        margin-right:-1.5%;
    }
}

/* Evita desbordes de contenidos de terceros sin recortar texto. */
@media (max-width:1100px){
    iframe,
    video,
    embed,
    object,
    table{
        max-width:100%;
    }

    table{
        display:block;
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
    }

    p,
    li,
    a,
    h1,
    h2,
    h3,
    h4{
        overflow-wrap:break-word;
    }
}


/* =====================================================
   NAVEGACIÓN 1.9.1
   Escritorio/computador: barra completa fija.
   Tablet y móvil (<=1024px): menú hamburguesa desplegable.
===================================================== */

@media (min-width:1025px){
    body{
        padding-top:90px;
    }

    html{
        scroll-padding-top:90px;
    }

    .header{
        position:fixed;
        top:0;
        left:0;
        width:100%;
        z-index:9999;
    }

    .navbar{
        height:90px;
        padding:0;
        position:relative;
        gap:18px;
    }

    .logo img{
        width:auto;
        height:62px;
        max-width:none;
    }

    .menu-mobile{
        display:none !important;
    }

    .menu{
        position:static;
        inset:auto;
        width:auto;
        max-height:none;
        overflow:visible;
        display:flex;
        flex-direction:row;
        align-items:center;
        gap:clamp(14px,1.5vw,26px);
        padding:0;
        background:transparent;
        border:0;
        box-shadow:none;
        opacity:1;
        visibility:visible;
        pointer-events:auto;
        transform:none;
        z-index:auto;
    }

    .menu > li{
        width:auto;
        text-align:left;
    }

    .menu > li > a{
        width:auto;
        min-height:0;
        padding:34px 0;
        justify-content:flex-start;
        font-size:14px;
        line-height:normal;
        white-space:nowrap;
    }

    .menu > li > a::after{
        display:block;
    }

    .btn-header{
        display:inline-block;
        flex-shrink:0;
        white-space:nowrap;
    }

    .dropdown-menu,
    .dropdown:hover .dropdown-menu{
        position:absolute;
        top:100%;
        left:50%;
        width:auto;
        min-width:270px;
        margin:0;
        transform:translateX(-50%) translateY(20px);
        display:block;
        opacity:0;
        visibility:hidden;
        border-radius:8px;
        box-shadow:0 20px 50px rgba(0,0,0,.15);
    }

    .dropdown:hover .dropdown-menu{
        opacity:1;
        visibility:visible;
        transform:translateX(-50%) translateY(0);
    }

    .dropdown-menu a{
        padding:18px 24px;
        font-size:15px;
        text-align:left;
    }

    .dropdown-menu a:hover{
        padding-left:34px;
    }
}

@media (max-width:1024px){
    .menu-mobile{
        display:flex;
    }
}


/* =====================================================
   AJUSTE DE LOGO 1.9.2
   Centrado visual dentro de la barra de navegación.
===================================================== */
@media (min-width:1025px){
    .navbar > .logo{
        height:100%;
        display:flex;
        align-items:center;
        justify-content:center;
        position:relative;
        left:clamp(8px,.75vw,14px);
    }

    .navbar > .logo img{
        display:block;
        margin:0;
        object-fit:contain;
        object-position:center;
    }
}

@media (max-width:1024px){
    .navbar > .logo{
        height:100%;
        display:flex;
        align-items:center;
        justify-content:center;
        position:relative;
        left:6px;
    }

    .navbar > .logo img{
        display:block;
        margin:0;
        object-fit:contain;
        object-position:center;
    }
}