*{
    font-family: Helvetica, Arial, 'sans-serif';
}

@font-face {  /* referencia de fonts nuevo*/
    font-family: golden-hills;
    src: url("../fonts/GoldenHillsDEMO.ttf");
}

.whatsapp{
    border-radius: 50%;
    height: 60px;
    width: 60px;
    position: fixed;
    z-index: 99;
    bottom: 20px;
    right: 20px;
}


.whatsapp a img{
    width: 100%;
    height: 100%;
}


/*.redes {
    background: rgb(219, 12, 12);
    color: #007bff;
    padding: 15px;
    border-radius: 10px;
    text-align: center;
    min-width: 100px;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
}*/

.content-redes{
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    padding: 10px;
    background: #dbdee0;
}

.content-redes .item .content-image{
    overflow: hidden;
}

.content-redes .item img{
    width: 40px;
    height: auto;
}

.logo{
    position: relative;
    width: 328px;
}

.logo:hover .info-logo{
    display: block;
}

.info-logo{
    position: absolute;
    left: 130px;
    top: 33px;
    font-size: 11px;
    display: none;
}

html, body{
    padding: 0;
    margin: 0;
}

header{
    position: fixed;
    z-index: 9999;
    background: #ffffff;
    width: 100%;
}

main{
    padding-top: 145px;
}

.container{
    max-width: 1200px;
    margin: 0 auto;
}

.content-navigation{
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f5f8f9;/*cambiar color */
    box-shadow: 3px 3px 3px 3px #0000001f;
    padding: 0px 20px 0px 70px;
}

.content-navigation ul{
    list-style: none;
    padding: 0;
    display: flex;
    gap: 30px;
    margin: 0;
}

.content-navigation ul li{
    position: relative;
}

a{
    text-decoration: none;
    color: #233354;
}

.link-nav{
    font-size: 32px;
    color: #8f8f8f !important;
    font-family: golden-hills; /* referencia de fonts nuevo*/
}

.content-navigation ul li .link-nav{
    padding: 15px 8px;
    display: inline-block;
}

.content-navigation ul li .link-nav:hover{
    background-color: #026f9ad7;
    color: #fff !important;
}

.content-navigation ul li:hover .sub-menu{
    display: flex !important;
}

.sub-menu{
    flex-direction: column;
    gap: 0 !important;
    background: #ffffff;
    width: 200px;
    padding: 0px !important;
    box-shadow: 2px 4px 13px 5px #9a9a9a;
    position: absolute;
    top: 55px;
    left: 10px;
    display: none !important;
    transition: all .5s ease;
    font-family: golden-hills;
}

.sub-menu li{
    padding: 10px;
    border-bottom: 1px solid #cecece;
}

.sub-menu li:last-child{
    border: none;
}

.sub-menu li a{
    font-size: 15px;
    color: #8f8f8f !important;
}


.tp-banner-container{
    width: 100%;
    position: relative;
    padding: 0;
}

.tp-bgimg {
background-size: contain !important;
}


.title-services{
    margin-top: 40px;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
    text-align: center;
    
}

.title-services h3{
    font-size: 23px;
    font-weight: 500;
    position: relative;
    display: inline-block;
    zoom: 1;
    margin: 0 !important;
    padding-right: 30px;
    max-width: 90%;
    text-decoration: none;
    background: #ffffff;
    z-index: 9;
    padding: 0 25px;
    color: #233354 !important; 
}

.boton_verde{
background: #4e9b2a;
background: linear-gradient(90deg,rgba(78, 155, 42, 1) 0%, rgba(75, 235, 142, 1) 100%, rgba(237, 221, 83, 1) 100%);
display: inline-block;
width: 80%;
padding: 10px;
border-radius: 8px;
text-decoration: none;
color: white
}


.line-left, .line-right{
    position: absolute;
    width: 2000px;
    height: 0;
    border-top: 0 !important;
    border-right: 0 !important;
    border-left: 0 !important;
    margin-top: -.5px;
    top: 50%;
    border-bottom: 1px solid transparent;
    border-color: #ebebeb;
}

.content-services{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2rem;
}

.content-services .item .content-image{
    overflow: hidden;
}

.content-services .item img{
    width: 100%;
    max-width: 100%;
    height: 235px;
    transform: scale(1);
    transition: all .5s ease;
    
}

.content-services .item img:hover{
    transform: scale(1.3); 
}

.content-services .item  p{
    text-align: center;
    color: #016B98;
}

/*DETALLE DEL SERVICIO*/

.image-service{ /* revisar el tamaño de la img*/
    max-width: 80%;
    height: auto;
    padding-left: 100px;
}

.service-detail-content{
    display: grid;
    grid-template-columns: 23% 1fr;
    gap: 2rem;
}

.service-detail-content h5{
    font-size: 24px;
    color: #8b7f7f;
    margin-bottom: 10px;
    /*font-family: golden-hills;*/
}

.service-detail-content ul{
    list-style: none;
    padding: 0;
    border-radius: 3px;
    background-clip: border-box;
    background-color: #fff;
}

.service-detail-content  .service-detail-content-navigation  ul{
    box-shadow: 0 3px 0 rgba(0, 0, 0, .03), 0 1px 0 rgba(0, 0, 0, .07);

}

.service-detail-content .service-detail-content-navigation ul li{
    padding: 10px;
    background-color: #f1f1f1;
    background-image: linear-gradient(to bottom, #fff, #f1f1f1);
    cursor: pointer;
    border: 1px solid #d5d5d5;
}

.service-detail-content .service-detail-content-navigation ul li:hover{
    box-shadow: inset 0 0 15px rgba(0, 0, 0, .2), inset -2px 0 2px rgba(0, 0, 0, .06), inset 2px 0 2px rgba(0, 0, 0, .06), inset 1px 0 0 rgba(0, 0, 0, .1), inset -1px 0 0 rgba(0, 0, 0, .1);
    background-color: #e9e9e9;
}

.service-detail-content .service-detail-content-navigation ul li:first-child{
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.service-detail-content .service-detail-content-navigation ul li:last-child{
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.service-detail-content .service-detail-content-navigation ul li a{
    color: #8f8f8f !important;
    display: inline-block;
    text-decoration: none;
    font-size: 14px;
}

.service-detail-content .service-detail-content-info h3{
    color: #026f9a !important;
    font-size: 34px;
    margin-bottom: 10px;
}

.service-detail-content .service-detail-content-info p,
.service-detail-content .service-detail-content-info ul li
{
    color: #8f8f8f !important;  
}

.vineta ul{
    padding-left: 20px;
}

.vineta ul li{
    list-style-type: disc;
    margin-bottom: 10px;
}
/*NUESTRA FIRMA*/

.nuestra-firma-content-banner{
    background-image: url('../img/banner-quienes-somos.jpg');
    height: 400px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.nuestra-firma-quienes-somos{
    display: grid;
   /* grid-template-columns: 1fr 1fr 1fr;
    gap: 2rem;*/
    /*align-items: center;*/
    margin: 0%;
}

.nuestra-firma-quienes-somos h5{
    padding: 0 20px;
    /*border-left: 1px solid #026f9a;*/
    text-align: center;
    color: #026f9a;
    font-size: 27px;
    margin-bottom: 10px;
}

.nuestra-firma-quienes-somos p{
    color: #8f8f8f;
    font-size: 15px;
    text-align: justify;
}

.nuestra-firma-content-detail{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2rem;
    align-items: center;
    margin-top: 25px;
}

.nuestra-firma-content-detail .item{
    padding: 0 20px;
    border-left: 1px solid #026f9a;
}


.nuestra-firma-content-detail .item:first-child{
    border-left: none;
}

.nuestra-firma-content-detail h5{
    color: #026f9a;
    font-size: 27px;
    margin-top: 0;
    margin-bottom: 10px;
}

.nuestra-firma-content-detail p{ 
    color: #8f8f8f;
    font-size: 15px;
    text-align: justify;
}


.contacto-detail-content-form label{
    color: #8f8f8f;
    font-size: 15px;
    text-align: justify;
    margin-bottom: 8px;
}

.contacto-detail-content-form .form-group{
    display: flex;
    flex-direction: column;
    margin-bottom: 12px;
    
}

.contacto-detail-content-form .form-group input,
.contacto-detail-content-form .form-group select,
.contacto-detail-content-form .form-group textarea{
    padding: 5px;
    border: 1px solid #8f8f8f;
    
}

.contacto-detail-content-form button[type=submit]{
    background-color: #026f9a;
    color: #ffffff;
    border: 0;
    padding: 10px 50px;
    cursor: pointer;
}

.contacto-detail-content-form button[type=submit]:hover{
    opacity: 0.8;
}

/*CONTACTO*/
.contacto-detail-content{
    display: grid;
    grid-template-columns: 1fr 30%;
    gap: 2rem;
}

.contacto-detail-content h3{
    color: #026f9a;
    font-size: 20px;
    margin-top: 0;
    margin-bottom: 10px;
    padding-bottom: 20px;
    border-bottom: 1px solid #cecece;
}

.contacto-detail-content p{
    color: #8f8f8f !important;
    font-size: 14px;
}

.contacto-detail-content .item-contact h5{
    margin: 0;
    font-size: 16px;
}

.contacto-detail-content .item-contact{
    display: flex;
    border-top: 10px solid #e5e5e5;
    padding: 15px;
    gap: 1rem;
}

/*OFICINAS*/

.tabs {
    display: flex;
    border-bottom: 2px solid #ccc;
}
.tab {
    padding: 10px 20px;
    cursor: pointer;
    border: 1px solid #ccc;
    border-bottom: none;
    background: #f1f1f1;
}
.tab:hover {
    background: #ddd;
}
.tab.active {
    background: white;
    border-top: 2px solid #007bff;
}
.tab-content {
    display: none;
    padding: 20px;
    border: 1px solid #ccc;
}
.tab-content.active {
    display: block;
}

.contacto-detail-content{
    display: grid;
    grid-template-columns: 1fr 30%;
    gap: 2rem;
}

.oficinas-detail-content-info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.oficinas-detail-content-info h3{
    color: #026f9a;
    font-size: 20px;
    margin-top: 0;
    margin-bottom: 10px;
    padding-bottom: 20px;
    border-bottom: 1px solid #cecece;
}

.oficinas-detail-content-info p{
    color: #8f8f8f !important;
    font-size: 14px;
}

.oficinas-detail-content-info .item-contact h5{
    margin: 0;
    font-size: 16px;
}

.oficinas-detail-content-info .item-contact{
    display: flex;
    padding: 15px;
    gap: 1rem;
}

/*FOOTER*/

footer{
    background-image: url('../img/banner.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    position: relative;
}

footer::before{
    content: " ";
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: #026f9ad7;
}

footer .container{
    z-index: 9;
    position: relative;
}

footer .content-footer{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2rem;
}

footer .content-footer ul{
    list-style: none;
    padding: 0;
}

footer .content-footer ul li, 
footer .content-footer p, 
footer .content-footer h5{
    color: #ffffff;
}

footer .content-footer ul li{
    margin-bottom: 10px;
}

footer .content-footer h5{
    font-size: 20px;
    margin-bottom: 15px;
}

.navegation-footer li a{
    color: #fff;
}

#button-menu ,#button-menu-close{
    display: none;
}

#button-menu, #button-menu-close{
    padding: 10px;
    color: #000;
    border: none;
    font-size: 20px;
    cursor: pointer;
    font-weight: 700;
}

#button-menu-close{
    float: right;
    position: relative;
    right: 40px;
    background: transparent;
    z-index: 9;
}

:root{
    --bg: #ffffff;
    --text: #0f172a; /* slate-900 */
    --muted: #64748b; /* slate-500 */
    --card: #f8fafc; /* slate-50 */
    
    
    --teal-50:#eefdf6; --teal-600:#0d9488;
    --pink-50:#feeff2; --pink-600:#e11d48;
    --amber-50:#fff7ed; --amber-600:#d97706;
    --violet-50:#f5f3ff;--violet-600:#7c3aed;
    
    
    --radius: 18px;
    --gap: clamp(16px, 2.5vw, 28px);
    --shadow: 0 6px 16px rgba(2,8,23,.06), 0 2px 6px rgba(2,8,23,.04);
    }

.wrap{width: 100%; padding:20px 0 40px 0}


.title-main{font-size:25px; line-height:1.1; text-align:center; margin:8px 0 14px}
.swoosh{display:block; height:10px; width:220px; margin:10px auto 0;}
.lead{color:var(--muted); font-size:clamp(15px,1.4vw,20px); text-align:center; margin:12px auto 40px; max-width:980px}


.cards{
display:grid; gap:var(--gap);
grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 1100px){ .cards{grid-template-columns: repeat(2, 1fr);} }
@media (max-width: 640px){ .cards{grid-template-columns: 1fr;} }

.card{
background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow);
padding:28px 12px; text-align:center; transition: transform .2s ease, box-shadow .2s ease;
border:1px solid rgba(15,23,42,.06);
cursor:pointer; position:relative; isolation:isolate;
}
.card:focus-visible{outline:3px solid #94a3b8; outline-offset:2px}
.card:hover{ transform: translateY(-3px); box-shadow:0 10px 22px rgba(2,8,23,.08), 0 4px 10px rgba(2,8,23,.06); }


.icon{
width:64px; height:64px; display:grid; place-items:center; border-radius:14px; margin:0 auto 18px;
}
.title{font-weight:700; font-size: 18px; margin:0 0 4px}
.subtitle{font-size: 16px; margin:0}


/* Variantes de color (fondo suave + icono) */
.family { background: var(--teal-50); }
.family .icon{ background: #d7f5ee; color: var(--teal-600); }


.civil { background: var(--pink-50); }
.civil .icon{ background: #fde1e7; color: var(--pink-600); }


.state { background: var(--amber-50); }
.state .icon{ background: #ffe9d3; color: var(--amber-600); }


.divorce { background: var(--violet-50); }
.divorce .icon{ background: #ebe5ff; color: var(--violet-600); }


/* Utilidades */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}


/* ===== Hero ===== */
.hero{
    position:relative; overflow:hidden; background:
    linear-gradient(135deg, rgba(255,255,255,.9), rgba(241,245,249,.9)),
    radial-gradient(80% 80% at 120% -10%, rgba(16,179,155,.10) 0%, rgba(16,179,155,0) 60%),
    radial-gradient(70% 60% at -10% 0%, rgba(16,179,155,.10) 0%, rgba(16,179,155,0) 60%);
    }
    .hero-inner{ width: 100%; margin-inline:auto; padding:190px 0 0px 0 }
    
    
    .headline{ font-weight:800; font-size: 42px; line-height:1.08; text-align:center; margin:0 0 8px }
    .headline .accent{ color:var(--primary); }
    
    
    .swoosh{ display:block; height:12px; width:240px; margin:14px auto 6px }
    
    
    .sub{ text-align:center; font-size:clamp(18px, 2.2vw, 36px); font-weight:700; margin:10px 0 26px }
    
    
    .actions{ display:flex; gap:22px; justify-content:center; flex-wrap:wrap; margin: 6px 0 60px }
    .btn{ appearance:none; border:0; border-radius:14px; padding:16px 26px; font-weight:700; font-size:18px; cursor:pointer; transition: transform .15s ease, box-shadow .2s ease, background .2s ease; }
    .btn-primary{ background:var(--primary); color:#fff; box-shadow:var(--shadow); }
    .btn-primary:hover{ background:#0766b9; transform: translateY(-2px); }
    .btn-outline{     background: #b1daff2b;
    color: #0766b9;
    border: 2px solid #0766b9;
    box-shadow: 0 8px 18px rgba(13, 148, 136, .15);}
    .btn-outline:hover{ background:#0766b91a; transform: translateY(-2px); }
    
    
    /* Decorativos de puntos */
    .dots{ position:absolute; inset:auto 40px 40px auto; width:110px; height:150px; opacity:.7 }
    .dots.left{ left:40px; right:auto; top:24px; bottom:auto }
    .dot{ width:8px; height:8px; border-radius:50%; background: rgba(16,179,155,.45); margin:10px }
    .grid{ display:grid; grid-template-columns: repeat(5, 1fr); grid-auto-rows: 8px; gap:10px }
    
    
    /* Banda verde */
    .band{
    margin-top:36px; background: linear-gradient(90deg, var(--gradient-start), var(--gradient-end)); color:#fff; position:relative;
    }
    .band-inner{ width:min(1200px, 94vw); margin-inline:auto; padding:56px 0 88px; text-align:center; }
    .band h2{ font-size:clamp(22px, 3vw, 40px); line-height:1.25; margin:0; font-weight:800; letter-spacing:.3px; }
    .band p{ margin:16px 0 34px; font-size:clamp(15px,1.6vw,22px); font-weight:600; opacity:.95; }
    
    
    .cta{ display:inline-flex; align-items:center; gap:12px; background:var(--cta); color:#115e59; padding:18px 28px; border-radius:999px; font-weight:700; font-size:clamp(16px,1.6vw,22px); box-shadow:var(--shadow); transition: transform .15s ease, box-shadow .2s ease;  animation: fadeIn 1.5s ease-in-out infinite; }
    .cta:hover{ transform:translateY(-2px); box-shadow:0 24px 44px rgba(2,8,23,.14), 0 8px 18px rgba(2,8,23,.08) }
    .cta svg{ width:26px; height:26px }
    
    
     /* ====== Utilidades ====== */
     .center { text-align: center; }
     .mt-24 { margin-top: 6rem; }
     .mt-10 { margin-top: 2.5rem; }
 
     /* ====== Hero ====== */
     .hero-nosotros {
       position: relative;
       padding: 150px 0 40px 0;
       background:
         radial-gradient(1200px 600px at 85% -200px, rgba(27, 168, 131, 0.10), transparent 70%),
         linear-gradient(180deg, #f8fbfe 0%, #eef6f6 100%);
       overflow: hidden;
     }
     .hero-nosotros h1 {
       font-size: clamp(28px, 4.2vw, 56px);
       font-weight: 800;
       letter-spacing: 0.3px;
       font-size: 42px;
     }
     .hero-nosotros .accent { color: #0566B9; }
     .hero-nosotros p.sub {
       max-width: 980px;
       margin: 30px auto 0;
       font-size: clamp(16px, 1.6vw, 20px);
       color: #4b5563;
       font-weight: 400;
     }
     .cta-nosotros {
       display: inline-block;
       margin-top: 28px;
       padding: 14px 26px;
       background: #0566B9;
       color: #ffffff;
       font-weight: 700;
       border-radius: 12px;
       box-shadow: 0 8px 20px #0566b966;
       transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
     }
     .cta-nosotros:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgb(26 107 185 / 29%); background: #0766b9; }
 
     /* ====== Sección Visión/Misión ====== */
     .band-nosotros {
       position: relative;
       padding: 64px 0 80px;
       background: linear-gradient(135deg, #3482c4 0%, #0566B9 45%, #0566B9 100%);
       color: #ffffff;
     }
     .cards-nosotros {
       display: grid;
       grid-template-columns: 1fr 1fr;
       gap: 28px;
       align-items: stretch;
     }
     .card-nosotros {
        background: rgb(255 255 255 / 4%);
        backdrop-filter: blur(6px);
        padding: clamp(20px, 3.5vw, 32px);
        box-shadow: 0 5px 14px rgba(0, 0, 0, 0.10) inset, 0 4px 17px rgba(0, 0, 0, 0.03);
     }
     .card-nosotros h2 {
       font-size: clamp(22px, 2.3vw, 28px);
       font-weight: 700;
       letter-spacing: .3px;
       margin-bottom: 14px;
     }
     .card-nosotros .divider {
       height: 2px;
       width: 100%;
       background: linear-gradient(90deg, rgba(255,255,255,0.55), rgba(255,255,255,0.15));
       margin: 10px 0 18px;
     }
     .card-nosotros p { color: #f2fdf8; font-weight: 300; }
 
     /* ====== Responsive ====== */
     @media (max-width: 900px) {
       .cards-nosotros { grid-template-columns: 1fr; }
     }

    @media (max-width: 720px){
    .actions .btn{ width:100%; max-width:350px }
    .content-navigation {
        gap: 0rem;
        padding: 0 15px 0 0 !important;
    }
    .bot-btn .message-box{
        width: 125px;
    }

    .logo{
        width: auto !important;
    }

    .info-logo{
        position: absolute;
        left: 130px;
        top: 28px !important;
        font-size: 11px;
        width: 175px;
    }

    }

    /* Contenedor de demo */
  .page{display:flex;align-items:flex-start;justify-content:center;padding-top:25px;margin-bottom: 50px;}

  /* Dots decorativos */
  .dots{display:flex;gap:10px;justify-content:center;margin-bottom:12px}
  .dots i{width:6px;height:6px;border-radius:50%;background:#1bb783;opacity:.8}
  .dots i:nth-child(2){opacity:.6}
  .dots i:nth-child(3){opacity:.5}
  .dots i:nth-child(4){opacity:.7}

  /* Tarjeta principal */
  .cta-card{
    position: relative;
    width: min(1100px, 86%);
    border-radius: 28px;
    padding: 52px 50px 35px;
    margin-inline: auto;
    text-align: center;
    color: #fff;
    background: linear-gradient(135deg, #4298e1 0%, #2379c2 50%, #0566B9 100%);    box-shadow: 0 20px 40px rgba(0, 0, 0, .12);
    overflow: hidden;
  }
  .cta-card h2{
    font-size:clamp(22px,3.2vw,36px);
    font-weight:700;
    font-size: 25px;
    letter-spacing:.3px;
    margin:0 16px 24px;
  }

  /* Botón */
  .cta-btn{
    display:inline-flex;
    align-items:center;
    gap:14px;
    font-size: 17px !important;
    padding:18px 28px;
    border-radius:999px;
    background:#ffffff;
    color:#19a874;
    font-weight:700;
    font-size:clamp(16px,1.6vw,24px);
    box-shadow:0 12px 26px rgba(0,0,0,.18), inset 0 0 0 2px rgba(25,168,116,.05);
    transition:transform .15s ease, box-shadow .15s ease;
  }
  .cta-btn:hover{transform:translateY(-1px);box-shadow:0 16px 30px rgba(0,0,0,.22)}
  .cta-btn svg{width:28px;height:28px;flex:0 0 28px}

  /* SVG de líneas topográficas */
  .contours{
    position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:.35;
    mix-blend-mode:soft-light; /* sutil */
  }

  .map{background:linear-gradient(180deg,#eaf5f3 0%,#eaf4f2 100%);padding:48px 0}
  .map-container{width:min(1200px,92%);margin:0 auto}

  /* ===== Card ===== */
  .map-card{
    position:relative;
    padding:34px 20px 42px;
    background:#fff;
    border-radius:24px;
    box-shadow:0 10px 26px rgba(16,24,40,.08), 0 2px 6px rgba(16,24,40,.06);
    text-align:center;
    overflow:hidden;
  }

  /* blobs decorativos */
  .map-blob{
    position:absolute;inset:auto auto;pointer-events:none;opacity:.25;filter:blur(0.4px);
    width:360px;height:220px;background:radial-gradient(60% 60% at 50% 50%, #f1faf7 0%, #ffffff 70%);
    border-radius:58% 42% 65% 35% / 52% 60% 40% 48%;
  }
  .map-blob-left{left:120px;top:20px;transform:rotate(-12deg)}
  .map-blob-right{right:140px;top:44px;transform:rotate(14deg)}

  /* ===== Textos ===== */
  .map-title{
    margin:8px auto 10px;
    font-weight:700;
    font-size: 25px;
    line-height:1.25;
  }
  .map-highlight{color:#0566B9}
  .map-address{
    margin:4px 0 22px;
    font-weight:700;
    font-size:20px;
    letter-spacing:.5px;
    color:#111827;
    text-transform:uppercase;
  }

  /* ===== Botón ===== */
  .map-btn{
    display:inline-flex;align-items:center;gap:12px;
    padding:14px 22px;border-radius:12px;
    background:linear-gradient(135deg,#1d6aad 0%,#0566B9 100%);
    color:#fff;font-weight:700;font-size:clamp(14px,1.5vw,18px);
    box-shadow:0 10px 24px rgba(22,169,123,.25), inset 0 0 0 1px rgba(255,255,255,.15);
    transition:transform .15s ease, box-shadow .15s ease; text-decoration:none;
  }
  .map-btn:hover{transform:translateY(-1px);box-shadow:0 14px 30px rgba(22,169,123,.32)}
  .map-btn svg{width:20px;height:20px;flex:0 0 20px}

  /* ===== Responsive ===== */
  @media (max-width:640px){
    .map-card{border-radius:18px;padding:28px 16px 36px}
    .map-blob{display:none}
  }

  @media (max-width:640px){
    .cta-card{padding:44px 18px 50px}
    .cta-btn{padding:14px 22px}
    .cta-btn svg{width:22px;height:22px}
  }

    .whatsapp-btn {
        width: 60px;
        height: 60px;
        background-color: #25d366;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        animation: fadeIn 1.5s ease-in-out infinite;
        position: fixed;
        bottom: 20px;
        right: 20px;
        z-index: 9;
        }
        
        
        .whatsapp-btn svg {
        width: 36px;
        height: 36px;
        fill: white;
        }
        
        
        @keyframes fadeIn {
        0% { opacity: 0.6; transform: scale(0.9); }
        100% { opacity: 1; transform: scale(1); }
        }


        .bot-btn{
            position: fixed;
            top: 50%;
            margin-top: -100px;
            left: 20px;
            z-index: 999;
        }

        .bot-btn .message-box{
            background-color: #fff;
            border-radius: 5px;
            padding: 12px;
            border: 1px solid #cecece;
        }

        .bot-btn img{
            width: 90px;
        }