/* ==========================================================================
   DURANTIA · Custom CSS v3 — Pixel-perfect del mockup con UX Builder
   Diginova · 2026
   ========================================================================== */

:root{
  --d-green:#0F8C7A;
  --d-green-mid:#10A28B;
  --d-green-dark:#0C4D45;
  --d-green-darker:#0a3e37;
  --d-beige:#D9D6B0;
  --d-beige-soft:#F8F7F0;
  --d-text:#1F1F1F;
  --d-text-soft:#4A4A4A;
  --d-wa:#25D366;
}

/* ---------- Tipografía global ---------- */
body.home,
body.home .section,
body.home .ux-banner,
body.home .ux-text{
  font-family:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}

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

/* =========================================================================
   FULL WIDTH OVERRIDE — home page sections must reach screen edges
   Flatsome wraps page content in containers/padding. We bust out of them
   so every [section] and [ux_banner] hits 100vw.
   ========================================================================= */
body.home #content,
body.home #wrap,
body.home .page-wrapper,
body.home main#main,
body.home .entry-content,
body.home article.page,
body.home article.type-page,
body.home .page-content{
  padding:0 !important;
  margin:0 !important;
  max-width:100% !important;
  width:100% !important;
}

/* Hide page-title bar Flatsome injects */
body.home .page-title,
body.home .entry-title{ display:none !important; }

/* Strip Flatsome's auto-pushed row on page content */
body.home main#main > .row,
body.home #content > .row,
body.home .post > .row{
  margin:0 !important;
  padding:0 !important;
  max-width:100% !important;
  width:100% !important;
}

/* Each [section] of UX Builder must be 100vw on the home */
body.home .section{
  margin:0 !important;
}

/* And each [ux_banner] too */
body.home .banner{
  margin:0 !important;
}

/* Keep the inner .container of sections capped so text doesn't sprawl,
   but section background stays edge-to-edge. */
body.home .section .section-content,
body.home .section > .container,
body.home .section > .row{
  max-width:1240px;
  margin:0 auto !important;
  padding:0 24px;
}
/* Full-width sections (galería, hero, cta) should not cap inner content */
body.home .d-hero .section-content,
body.home .d-hero > .container,
body.home .d-cta .section-content,
body.home .d-cta > .container,
body.home .d-galeria .section-content,
body.home .d-galeria > .container{
  max-width:100% !important;
  padding:0 !important;
}

/* Hard reset of Flatsome page-content wrapper on home — break out of any container */
body.home .page-wrapper-row{ padding:0 !important; max-width:none !important; }
body.home .post-inside{ padding:0 !important; max-width:none !important; }
body.home .entry-content > p:empty{ display:none !important; }

/* Force every UX banner/section to be 100vw using viewport trick */
body.home .d-hero,
body.home .d-banner-trans,
body.home .d-servicios,
body.home .d-acomp,
body.home .d-galeria,
body.home .d-filo,
body.home .d-cta,
body.home .d-contacto{
  width:100vw !important;
  position:relative;
  left:50% !important;
  right:50% !important;
  margin-left:-50vw !important;
  margin-right:-50vw !important;
  max-width:100vw !important;
}

/* Remove any leftover border-bottom under header on home */
body.home .header,
body.home .header-main{ border-bottom:0 !important; box-shadow:none !important; }
body.home .header.sticky.stuck .header-main{ box-shadow:0 4px 18px rgba(0,0,0,.08) !important; }

/* =========================================================================
   HEADER — acercar menús al logo centrado
   Limita el ancho interno para que EXPERIENCIA/CONTACTO no se peguen al
   borde izquierdo y PERSONAL/EMPRESARIAL no se peguen al borde derecho.
   ========================================================================= */
.header-main .flex-row{
  max-width:1180px;
  margin:0 auto !important;
  padding:0 30px;
}

/* Logo (center) keeps its width; nav blocks shrink toward center */
.header-main .flex-row > .flex-col{ flex:0 0 auto; }
.header-main .flex-row > .flex-col.flex-grow{ flex:1 1 auto; }

/* A bit of extra gap between menu items so they breathe */
.header-nav.header-nav-main > li > a{ padding:0 14px; }

/* Mobile: no width cap, let Flatsome's mobile header layout work */
@media (max-width:849px){
  .header-main .flex-row{
    max-width:none !important;
    padding:0 16px;
  }
}

/* =========================================================================
   HEADER TRANSPARENT — texto blanco sobre hero oscuro
   ========================================================================= */
.header.transparent .header-main{
  background:transparent !important;
  box-shadow:none !important;
}
.header.transparent .header-nav a,
.header .header-nav a{
  color:var(--d-green-dark) !important;
  font-weight:700 !important;
  letter-spacing:.6px;
  text-transform:uppercase;
  font-size:16px !important;
  text-shadow:none !important;
}
.header.transparent .header-nav a:hover,
.header.transparent .header-nav a.current,
.header .header-nav a:hover,
.header .header-nav a.current{
  color:var(--d-green) !important;
}

/* When sticky (scrolled), give background back */
.header.sticky.stuck .header-main{
  background:rgba(255,255,255,.97) !important;
  backdrop-filter:saturate(180%) blur(10px);
  box-shadow:0 4px 18px rgba(0,0,0,.08);
  transition:background .25s, box-shadow .25s;
}
.header.sticky.stuck .header-nav a{
  color:var(--d-green-dark) !important;
  text-shadow:none;
}
.header.sticky.stuck .header-nav a:hover,
.header.sticky.stuck .header-nav a.current{
  color:var(--d-green) !important;
}

/* Hide cart/search/account icons */
.header-search-form,
.header .cart-icon,
.header .account-icon{ display:none !important; }

/* =========================================================================
   1. HERO — d-hero
   ========================================================================= */
.d-hero{
  margin-bottom:0 !important;
  overflow:hidden;
  position:relative;
}
.d-hero .img,
.d-hero .ux-image{ position:relative; z-index:3; }
.d-hero-mike img{
  filter:drop-shadow(0 30px 50px rgba(0,0,0,.55));
}

.d-hero-title-wrap h1{
  font-size:clamp(44px,6.5vw,90px) !important;
  font-weight:800 !important;
  line-height:1 !important;
  letter-spacing:.3px;
  margin:0 0 10px 0 !important;
  color:#fff !important;
  /* Doble sombra: una corta dura para definir borde + otra larga difusa para profundidad */
  text-shadow:
    0 2px 0 rgba(0,0,0,.25),
    0 4px 8px rgba(0,0,0,.45),
    0 12px 36px rgba(0,0,0,.55),
    0 22px 50px rgba(0,0,0,.35) !important;
  /* Drop-shadow extra refuerza el borde sin pintar contorno duro */
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.4));
  -webkit-font-smoothing:antialiased;
}
.d-hero-sub em,
.d-hero-sub{
  font-size:clamp(22px,2.5vw,38px) !important;
  font-weight:300;
  font-style:italic;
  letter-spacing:.4px;
  color:#fff;
  text-shadow:
    0 2px 4px rgba(0,0,0,.4),
    0 8px 24px rgba(0,0,0,.5) !important;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.35));
}

/* Decorative waves overlay (SVG inline) */
.d-hero::before,
.d-hero::after{
  content:""; position:absolute; pointer-events:none; z-index:2;
  width:380px; height:380px;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 340 340' fill='none' stroke='%23D9D6B0' stroke-width='4' opacity='0.55'><path d='M-30 60 Q60 30 150 60 T330 60'/><path d='M-30 110 Q60 80 150 110 T330 110'/><path d='M-30 160 Q60 130 150 160 T330 160'/><path d='M-30 210 Q60 180 150 210 T330 210'/><path d='M-30 260 Q60 230 150 260 T330 260'/></svg>") center/contain no-repeat;
}
.d-hero::before{ top:40px;    left:-100px; transform:rotate(-15deg); }
.d-hero::after{ bottom:40px;  right:-100px; transform:rotate(165deg); }

/* =========================================================================
   2. BANNER BEIGE — d-banner-trans
   ========================================================================= */
.d-banner-trans{
  background:var(--d-beige) !important;
  text-align:center;
}
.d-banner-trans h2{
  font-weight:700 !important;
  font-size:clamp(28px,3.6vw,44px) !important;
  color:var(--d-green-dark) !important;
  margin-bottom:14px !important;
}
.d-banner-trans p{
  color:var(--d-green-dark) !important;
  font-size:clamp(16px,1.6vw,19px) !important;
  line-height:1.55 !important;
  max-width:780px;
  margin:0 auto !important;
}

/* =========================================================================
   3. SERVICIOS — estructura pill + caja beige (ref. mockup Image #12)
   ========================================================================= */
.d-servicios{
  position:relative;
  background:#0F8C7A;            /* fallback */
  background-image:url('https://durantia.mx/wp-content/uploads/2026/05/Mesa-de-trabajo-2DURANTIA.png');
  background-size:cover;
  background-position:50% 50%;
  background-attachment:fixed;
  padding:90px 0 100px !important;
  isolation:isolate;
}
.d-servicios::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(180deg, rgba(15,140,122,.55) 0%, rgba(12,77,69,.62) 100%);
}
.d-servicios .container,
.d-servicios .row{ position:relative; z-index:1; }

.d-servicios h2{
  text-align:center !important;
  font-weight:800 !important;
  font-size:clamp(40px,6vw,82px) !important;
  letter-spacing:4px !important;
  color:#fff !important;
  margin:0 auto 50px !important;
  text-shadow:
    0 2px 0 rgba(0,0,0,.2),
    0 6px 14px rgba(0,0,0,.4),
    0 18px 36px rgba(0,0,0,.35) !important;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.35));
}
.d-servicios h2::after{ display:none !important; }

/* Card stack — quita cualquier separador dashed/dotted que Flatsome aplique */
.d-servicios .col,
.d-servicios .row,
.d-servicios .col-inner{
  border:none !important;
  border-style:none !important;
}
.d-servicios .col{
  padding:10px !important;
}
.d-svc-card{
  background:transparent !important;
  padding:0 !important;
  position:relative;
  transition:transform .3s ease;
}
.d-svc-card .col-inner{ padding:0 !important; }
.d-svc-card:hover{ transform:translateY(-6px); }

/* Pill arriba: icon redondo beige (izq) + título blanco (der) */
.d-svc-badge{
  display:flex !important;
  align-items:center !important;
  gap:12px;
  background:var(--d-green-dark) !important;
  color:#fff !important;
  padding:14px 18px 14px 14px !important;
  border-radius:36px !important;
  box-shadow:0 10px 26px rgba(0,0,0,.22);
  position:relative;
  z-index:2;
  margin:0 8px !important;
  min-height:78px;
}
.d-svc-icon{
  flex:0 0 auto;
  width:56px; height:56px;
  border-radius:50%;
  background:var(--d-beige);
  display:inline-flex !important;
  align-items:center; justify-content:center;
  padding:8px;
  box-shadow:inset 0 -2px 6px rgba(0,0,0,.08);
}
.d-svc-icon img{
  width:100%; height:100%;
  object-fit:contain;
  filter:none;
}
.d-svc-badge span,
.d-svc-badge .d-svc-title{
  font-weight:800 !important;
  font-size:15px;
  line-height:1.15;
  letter-spacing:.4px;
  text-transform:uppercase;
  color:#fff !important;
  text-align:left;
  display:block;
}

/* Caja beige debajo con el texto */
.d-svc-desc,
.d-svc-card p{
  background:#F8F2DC !important;
  color:var(--d-green-dark) !important;
  font-size:14px !important;
  line-height:1.55 !important;
  padding:34px 24px 24px !important;
  margin:-22px 0 0 !important;
  border-radius:22px !important;
  text-align:center !important;
  position:relative;
  z-index:1;
  box-shadow:0 18px 38px rgba(0,0,0,.18);
}
.d-svc-desc strong{ color:var(--d-green-dark) !important; }

/* =========================================================================
   4. ACOMPAÑANTE — d-acomp  (ref. Image #23)
   ========================================================================= */
.d-acomp{
  background:#fff !important;
  overflow:hidden;
  padding:0 !important;
}
.d-acomp .row{
  margin:0 !important;
  align-items:center !important;
}
.d-acomp .col{ margin:0 !important; }

/* Foto izquierda: full-bleed hacia el borde, arco derecho tipo "D" */
.d-acomp-photo{
  margin:0 !important;
  width:100%;
}
.d-acomp-photo img{
  display:block;
  width:100%;
  height:auto;
  max-height:560px;
  object-fit:cover;
  object-position:center center;
  border-radius:0 280px 280px 0 / 0 50% 50% 0;
  box-shadow:0 26px 50px -18px rgba(12,77,69,.30);
}

/* Texto a la DERECHA — todo alineado a la derecha */
.d-acomp .col:last-child{ text-align:right !important; }
.d-acomp .col:last-child *{ text-align:right !important; }

/* Quote más moderada */
.d-acomp-quote{
  font-weight:700 !important;
  font-style:italic !important;
  font-size:clamp(20px,2.2vw,32px) !important;
  color:var(--d-green-dark) !important;
  line-height:1.2 !important;
  margin:0 0 22px 0 !important;
  letter-spacing:0;
}

.d-acomp-bio{
  color:var(--d-text-soft) !important;
  font-size:15.5px !important;
  line-height:1.7 !important;
  margin:0 0 26px 0 !important;
}

.d-acomp-form-title{
  font-weight:700 !important;
  color:var(--d-green-dark) !important;
  font-size:clamp(20px,2vw,26px) !important;
  margin:0 0 12px 0 !important;
  line-height:1.2;
}

.d-acomp-formacion{
  list-style:none !important;
  padding:0 !important;
  margin:0 !important;
}
.d-acomp-formacion li{
  position:relative;
  padding:0 !important;
  color:var(--d-text-soft) !important;
  font-size:15px !important;
  line-height:1.85 !important;
}
.d-acomp-formacion li::before{ content:none !important; }

@media (max-width:849px){
  .d-acomp-photo img{
    border-radius:14px !important;
    max-height:420px;
  }
  .d-acomp .col:last-child,
  .d-acomp .col:last-child *{ text-align:left !important; }
}

/* =========================================================================
   5. GALERÍA TRIPLE — d-galeria  (sin gaps ni bordes punteados)
   ========================================================================= */
.d-galeria{ padding:0 !important; }
.d-galeria .row{ margin:0 !important; }
.d-galeria .col,
.d-galeria .col-inner{
  padding:0 !important;
  margin:0 !important;
  border:none !important;
  border-style:none !important;
}
.d-gal-item{
  width:100% !important;
  height:380px !important;
  background-size:cover !important;
  background-position:50% 50% !important;
  background-repeat:no-repeat !important;
  filter:brightness(.96);
  transition:filter .35s, transform .6s;
  display:block;
}
.d-gal-item:hover{ filter:brightness(1.05); transform:scale(1.02); }
@media (max-width:849px){ .d-gal-item{ height:260px !important; } }

/* =========================================================================
   6. FILOSOFÍA — d-filo  (ref. Image #17)
   ========================================================================= */
.d-filo{
  background:linear-gradient(135deg, var(--d-green-dark) 0%, var(--d-green-darker) 100%) !important;
  position:relative;
  overflow:hidden;
  padding:0 !important;
}
.d-filo::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600' fill='none' stroke='%2310A28B' stroke-width='3' opacity='0.20'><path d='M0 90 Q150 40 300 90 T600 90'/><path d='M0 170 Q150 120 300 170 T600 170'/><path d='M0 250 Q150 200 300 250 T600 250'/><path d='M0 330 Q150 280 300 330 T600 330'/><path d='M0 410 Q150 360 300 410 T600 410'/><path d='M0 490 Q150 440 300 490 T600 490'/></svg>") no-repeat right center/65% auto;
}
.d-filo .row{ position:relative; z-index:1; }

/* Frame beige con arco vertical superior (forma "pill alto") */
.d-filo-frame{
  position:relative;
  width:340px;
  height:520px;
  margin:0 auto;
  background:var(--d-beige);
  border:8px solid #fff;
  border-radius:170px 170px 24px 24px;
  box-shadow:0 26px 60px rgba(0,0,0,.35);
  overflow:hidden;
}
.d-filo-frame img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:50% 25%;
  display:block;
}

.d-filo-title{
  color:#fff !important;
  font-weight:800 !important;
  font-size:clamp(32px,4vw,52px) !important;
  margin:0 0 24px 0 !important;
  line-height:1.05;
}

.d-filo-bullet{
  color:#fff !important;
  font-size:16px !important;
  line-height:1.65 !important;
  margin:0 0 20px 0 !important;
  padding:0 !important;
  border:none !important;
  opacity:1 !important;
}
.d-filo-bullet strong{
  color:#fff !important;
  font-weight:800 !important;
  display:inline !important;
  margin:0 !important;
}

.d-filo-principios-title{
  color:#fff !important;
  font-weight:800 !important;
  font-size:clamp(26px,3.2vw,40px) !important;
  margin:30px 0 14px 0 !important;
  line-height:1.1;
}
.d-filo-principios{
  list-style:none !important;
  padding:0 !important;
  margin:0 !important;
}
.d-filo-principios li{
  color:#fff !important;
  font-size:17px !important;
  font-weight:400 !important;
  line-height:1.8 !important;
  padding:0 !important;
  margin:0 !important;
}
.d-filo-principios li::before{ content:none !important; }

@media (max-width:849px){
  .d-filo-frame{ width:260px; height:380px; border-radius:130px 130px 18px 18px; }
}

/* =========================================================================
   7. CTA EXPANDE — d-cta
   ========================================================================= */
.d-cta{
  margin-bottom:0 !important;
}
.d-cta h2{
  color:#fff !important;
  font-weight:800 !important;
  font-size:clamp(34px,5.5vw,72px) !important;
  letter-spacing:.5px;
  text-shadow:0 4px 22px rgba(0,0,0,.55);
  margin:0 !important;
  line-height:1.05;
}

/* =========================================================================
   8. CONTACTO — d-contacto
   ========================================================================= */
.d-contacto{ background:#fff; }
.d-contacto img{
  border-radius:10px;
  box-shadow:0 30px 60px -20px rgba(12,77,69,.4);
}
.d-contact-logo img{
  box-shadow:none !important;
  border-radius:0 !important;
  max-width:240px;
}
.d-contact-sub,
.d-contacto p{
  color:var(--d-text-soft);
  font-size:15px;
  line-height:1.6;
}

/* CF7 form */
.d-form-wrap input[type="text"],
.d-form-wrap input[type="email"],
.d-form-wrap input[type="tel"],
.d-form-wrap textarea{
  width:100% !important;
  background:#F4F2EA !important;
  border:1px solid transparent !important;
  border-radius:30px !important;
  padding:14px 22px !important;
  font-size:15px !important;
  font-family:inherit !important;
  margin:0 0 12px 0 !important;
  transition:border-color .2s, background .2s, box-shadow .2s;
}
.d-form-wrap input:focus,
.d-form-wrap textarea:focus{
  outline:none;
  border-color:var(--d-green) !important;
  background:#fff !important;
  box-shadow:0 0 0 3px rgba(15,140,122,.12);
}
.d-form-wrap .wpcf7-acceptance{
  font-size:13px !important;
  color:var(--d-text-soft) !important;
  display:block;
  margin:10px 0 0 !important;
}
.d-form-wrap .wpcf7-acceptance label{ display:flex; align-items:flex-start; gap:8px; cursor:pointer; }
.d-form-wrap .wpcf7-acceptance .wpcf7-list-item{ margin:0; }
.d-form-wrap .wpcf7-submit,
.d-form-wrap input[type="submit"]{
  background:var(--d-green) !important;
  color:#fff !important;
  border:none !important;
  border-radius:30px !important;
  padding:14px 48px !important;
  font-weight:700 !important;
  font-size:15px !important;
  letter-spacing:.5px !important;
  cursor:pointer;
  margin-top:14px !important;
  transition:transform .15s, box-shadow .25s, background .2s;
}
.d-form-wrap .wpcf7-submit:hover{
  background:var(--d-green-dark) !important;
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(12,77,69,.3);
}

/* Buttons (tel/email) */
.d-btn-tel,
.d-btn-email{
  display:inline-flex !important;
  flex-direction:column;
  align-items:center;
  padding:12px 32px !important;
  border-radius:32px !important;
  min-width:240px;
  text-decoration:none !important;
  font-weight:700 !important;
  text-align:center;
  transition:transform .15s, box-shadow .25s;
  margin-bottom:10px;
}
.d-btn-tel{ background:var(--d-green) !important; color:#fff !important; }
.d-btn-email{ background:var(--d-beige) !important; color:var(--d-green-dark) !important; }
.d-btn-tel:hover, .d-btn-email:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 28px rgba(0,0,0,.12);
}
.d-btn-label{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:1.5px;
  opacity:.85;
  font-weight:600;
  display:block;
}
.d-btn-value{ font-size:15px; font-weight:700; }

/* Social */
.d-social{
  display:flex; gap:12px; margin-top:18px;
}
.d-social a{
  width:42px; height:42px; border-radius:50%;
  background:var(--d-green-dark);
  color:#fff !important;
  display:inline-flex; align-items:center; justify-content:center;
  transition:transform .15s, background .2s;
}
.d-social a:hover{ background:var(--d-green); transform:translateY(-3px); }
.d-social svg{ width:18px; height:18px; }

/* =========================================================================
   WhatsApp flotante con tooltip (con botón cerrar)
   ========================================================================= */
.d-wa-wrap{
  position:fixed; bottom:24px; right:24px; z-index:9999;
  display:flex; align-items:flex-end; gap:14px;
  pointer-events:none;
}
.d-wa-wrap > *{ pointer-events:auto; }

.d-wa-tooltip{
  position:relative;
  background:#fff;
  border-radius:18px;
  box-shadow:0 18px 44px rgba(12,77,69,.22), 0 4px 12px rgba(0,0,0,.08);
  font-family:'Montserrat','Poppins',sans-serif;
  font-size:13.5px;
  line-height:1.5;
  color:var(--d-text);
  width:260px;
  overflow:hidden;
  transform-origin:right bottom;
  animation:d-tooltip-pop .55s cubic-bezier(.34,1.56,.64,1) 1s both;
}
.d-wa-tooltip.is-closing{
  animation:d-tooltip-out .35s ease-in forwards;
}
.d-wa-tooltip.is-closed{ display:none; }

.d-wa-tooltip strong{
  display:block;
  background:linear-gradient(135deg, var(--d-green) 0%, var(--d-green-mid) 100%);
  color:#fff;
  padding:12px 40px 12px 20px;
  font-size:14px;
  font-weight:700;
  letter-spacing:.3px;
}
.d-wa-tooltip-body{
  padding:14px 20px 16px;
  color:var(--d-text-soft);
}
.d-wa-tooltip-body em{
  color:var(--d-green);
  font-style:normal;
  font-weight:700;
  letter-spacing:.4px;
}
.d-wa-tooltip::after{
  content:""; position:absolute;
  right:-9px; bottom:22px;
  width:0; height:0;
  border:9px solid transparent;
  border-left-color:#fff;
  filter:drop-shadow(2px 0 2px rgba(0,0,0,.06));
}

/* Close button — círculo perfecto, sin que Flatsome lo estire */
.d-wa-close{
  position:absolute !important;
  top:10px !important; right:12px !important;
  width:26px !important; height:26px !important;
  min-width:26px !important; min-height:26px !important;
  max-width:26px !important; max-height:26px !important;
  box-sizing:border-box !important;
  border:none !important;
  background:rgba(255,255,255,.25) !important;
  color:#fff !important;
  border-radius:50% !important;
  font-size:16px !important;
  font-weight:700 !important;
  line-height:1 !important;
  cursor:pointer !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 !important;
  margin:0 !important;
  flex-shrink:0 !important;
  aspect-ratio:1 / 1 !important;
  transition:background .15s, transform .15s;
  z-index:2;
  text-align:center !important;
  text-indent:0 !important;
  overflow:hidden !important;
  letter-spacing:0 !important;
}
.d-wa-close:hover{
  background:rgba(255,255,255,.45) !important;
  transform:scale(1.1) !important;
}
.d-wa-close:focus{ outline:2px solid rgba(255,255,255,.6); outline-offset:1px; }

.d-wa-float{
  width:60px; height:60px; border-radius:50%;
  background:var(--d-wa);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 24px rgba(0,0,0,.25);
  transition:transform .25s, box-shadow .25s;
  animation:d-wa-pulse 2.5s ease-in-out infinite;
  flex-shrink:0;
}
.d-wa-float:hover{ transform:scale(1.08); }
.d-wa-float svg{ width:30px; height:30px; display:block; }

@keyframes d-wa-pulse{
  0%,100%{ box-shadow:0 8px 24px rgba(0,0,0,.25), 0 0 0 0 rgba(37,211,102,.55); }
  50%{    box-shadow:0 8px 24px rgba(0,0,0,.25), 0 0 0 16px rgba(37,211,102,0); }
}
@keyframes d-tooltip-pop{
  from{ opacity:0; transform:scale(.7) translateY(10px); }
  to  { opacity:1; transform:scale(1)   translateY(0); }
}
@keyframes d-tooltip-out{
  to{ opacity:0; transform:scale(.8) translateY(8px); }
}

@media (max-width:768px){
  .d-wa-tooltip{ display:none; }
  .d-wa-float{ width:54px; height:54px; }
  .d-wa-wrap{ bottom:18px; right:18px; }
}

/* =========================================================================
   Responsive — mobile breakpoints
   ========================================================================= */
@media (max-width:1024px){
  .d-servicios .col{ margin-bottom:30px; }
}
@media (max-width:849px){
  .d-hero{ padding:60px 0 80px !important; min-height:500px !important; }
  .d-hero-title-wrap h1{ font-size:42px !important; }
  .d-hero-sub{ font-size:22px !important; }
  .d-acomp .col + .col{ margin-top:30px; }
  .d-filo .col + .col{ margin-top:30px; }
  .d-contacto .col + .col{ margin-top:30px; }
  .d-section-title{ font-size:32px !important; }
}