:root{
  --ink:#050608;
  --panel:#0B1F35;
  --panel-2:#0D2540;
  --line:rgba(56,189,248,.2);
  --paper:#FFFFFF;
  --paper-dim:#C9D1D9;
  --slate:#8B92A5;
  --blue:#38BDF8;
  --blue-bright:#2AA8FF;
  --blue-dim:#0B1F35;
  --blue-light:#7DD3FC;
  --display:'Manrope',sans-serif;
  --body:'Inter',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box;}
*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;width:100%;max-width:100%;overflow-x:hidden;background-color:var(--ink);}
body{
  background:var(--ink);
  color:var(--paper);
  font-family:var(--body);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  width:100%;
  max-width:100%;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
::selection{background:var(--blue);color:var(--ink);}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:2px;}

.wrap{max-width:1400px;margin:0 auto;padding:0 30px;padding-top:0 !important;width:100%;}
.serif{font-family:var(--display);}
.tag{
  font-family:var(--display);
  font-size:11px;
  font-weight:600;
  color:var(--blue-bright);
  letter-spacing:2px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:24px;
  text-transform:uppercase;
}
.tag::before{content:'✨';color:var(--blue-light);}

h1,h2,h3{font-family:var(--display);font-weight:400;letter-spacing:-2px;line-height:0.9;text-transform:uppercase;color:var(--paper);text-shadow:2px 2px 0 #000, -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 0 0 #000, -2px 0 0 #000, 0 2px 0 #000, 0 -2px 0 #000;}
h2{font-size:clamp(22px,2.8vw,32px);}
h3{font-size:15px;}
p{color:var(--slate);font-family:var(--body);font-weight:400;line-height:1.7;letter-spacing:0;}

.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--display);font-size:0.95rem;font-weight:400;
  padding:14px 24px;border-radius:6px;
  border:2px solid #000;
  cursor:pointer;transition:transform .15s ease, background .2s ease, border-color .2s ease;
  white-space:nowrap;
  text-transform:uppercase;
  letter-spacing:0.5px;
  opacity:1;
}
.btn:hover{transform:translateY(-2px);opacity:1;}
.btn-primary{
  background:#00a8ff !important;
  color:#000000 !important;
  border:none !important;
  font-weight:700 !important;
  border-radius:12px !important;
  padding:0.8rem 1.8rem !important;
  box-shadow:0 4px 20px rgba(0,168,255,0.4) !important;
  opacity:1 !important;
  backdrop-filter:none !important;
  display:inline-flex;
  align-items:center;
  gap:0.6rem;
}
.btn-primary:hover{
  background:#00a8ff !important;
  box-shadow:0 4px 20px rgba(0,168,255,0.4) !important;
  transform:translateY(-2px);
}
.btn-ghost{
  border:2px solid #00a8ff;
  color:#00a8ff;
  background:transparent;
  font-weight:700;
  border-radius:12px;
  padding:0.8rem 1.8rem;
  opacity:1;
}
.btn-ghost:hover{
  background:#00a8ff;
  color:#000000;
  border-color:#00a8ff;
  transform:translateY(-2px);
}

/* ==========================================================================
   HEADER + MOBILE MENU - Clean separation Desktop / Mobile
   Breakpoint: 992px (>=992 desktop, <992 mobile)
   ========================================================================== */

/* ----- BASE (any viewport) ----- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:rgba(5,6,8,.7);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(56,189,248,.1);
}
.header-nav{
  max-width:1180px;margin:0 auto;padding:0 28px;
  height:56px;display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.brand{
  display:flex;align-items:center;gap:10px;
  font-family:var(--display);font-weight:700;font-size:13px;color:var(--paper);
  letter-spacing:-0.3px;text-transform:uppercase;text-decoration:none;
  min-width:0;flex-shrink:0;
}
.brand-logo-img{height:42px;width:auto;max-width:52px;object-fit:contain;flex-shrink:0;display:block;}
.brand-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.1;}

/* ----- DESKTOP NAV (>=992px) ----- */
.header-desktop-nav{
  display:flex;align-items:center;gap:8px;flex:1;justify-content:flex-end;
}
.nav-link{
  display:inline-flex;align-items:center;gap:6px;
  font-family:'Manrope',sans-serif;font-size:14px;font-weight:600;
  color:#A3B0C3;text-decoration:none;padding:8px 14px;border-radius:8px;
  transition:all .25s ease;white-space:nowrap;
}
.nav-link:hover{color:#fff;background:rgba(56,189,248,.1);}
.nav-link.nav-cta{
  background:linear-gradient(135deg,#2196F3,#25A7FF);
  color:#0B1220;box-shadow:0 4px 16px rgba(56,189,248,.3);margin-left:6px;
}
.nav-link.nav-cta:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(56,189,248,.5);background:linear-gradient(135deg,#25A7FF,#2196F3);}
.nav-divider{width:1px;height:24px;background:rgba(56,189,248,.2);margin:0 6px;flex-shrink:0;}
.nav-social{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;color:#A3B0C3;font-size:17px;
  text-decoration:none;background:transparent;border:none;
  transition:all .3s ease;flex-shrink:0;
}
.nav-social:hover{color:#fff;transform:translateY(-2px) scale(1.15);}
.nav-social:has(.fa-whatsapp):hover{color:#25D366;text-shadow:0 0 12px rgba(37,211,102,.6);}
.nav-social:has(.fa-facebook-f):hover{color:#1877F2;text-shadow:0 0 12px rgba(24,119,242,.6);}
.nav-social:has(.fa-instagram):hover{color:#E4405F;text-shadow:0 0 12px rgba(225,48,108,.6);}

/* ----- MOBILE: hamburger button (hidden on PC) ----- */
.menu-toggle{
  display:none;align-items:center;justify-content:center;flex-direction:column;gap:5px;
  width:48px;height:48px;min-width:48px;min-height:48px;
  background:rgba(11,18,32,.95);border:1px solid rgba(56,189,248,.35);
  border-radius:10px;cursor:pointer;padding:0;
  box-shadow:0 4px 14px rgba(0,0,0,.45);
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
  transition:all .15s ease;
}
.menu-toggle-bar{display:block;width:22px;height:2px;background:#fff;border-radius:2px;transition:all .2s ease;}
.menu-toggle:hover{background:rgba(56,189,248,.15);border-color:rgba(56,189,248,.6);}
.menu-toggle[aria-expanded="true"] .menu-toggle-bar:nth-child(1){transform:translateY(7px) rotate(45deg);}
.menu-toggle[aria-expanded="true"] .menu-toggle-bar:nth-child(2){opacity:0;}
.menu-toggle[aria-expanded="true"] .menu-toggle-bar:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ----- MOBILE MENU OVERLAY (hidden on PC) ----- */
.mobile-menu,
.mobile-menu-overlay{
  position:fixed;top:0;left:0;width:100vw;height:100vh;height:100dvh;
  background:url('img/Fondo_Menu.webp') no-repeat center center / cover;
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  z-index:9999;display:none;align-items:flex-start;justify-content:center;
  overflow-y:auto;
  animation:mobileMenuFade .35s ease;
}
.mobile-menu[aria-hidden="false"],
.mobile-menu-overlay[aria-hidden="false"],
.mobile-menu-overlay.open{display:flex;}
@keyframes mobileMenuFade{from{opacity:0}to{opacity:1}}

.mobile-menu-bg,
.hero-video{
  background-image:none !important;
  background-color:transparent !important;
}
  /* Botón X esquina superior derecha */
.mobile-menu-close,
.close-menu-btn{
  position:fixed;top:16px;right:16px;z-index:10000;
  width:48px;height:48px;display:none;align-items:center;justify-content:center;
  background:rgba(11,18,32,.85);border:1px solid rgba(56,189,248,.45);border-radius:50%;
  color:#fff;cursor:pointer;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 4px 18px rgba(0,0,0,.5),0 0 14px rgba(56,189,248,.25);
  transition:all .25s ease;font-size:20px;padding:0;
  line-height:1;
}
.mobile-menu[aria-hidden="false"] .mobile-menu-close,
.mobile-menu-overlay[aria-hidden="false"] .mobile-menu-close,
.mobile-menu-overlay.open .close-menu-btn{display:flex;}
.mobile-menu-close:hover,
.close-menu-btn:hover{background:rgba(56,189,248,.2);border-color:rgba(56,189,248,.8);transform:rotate(90deg);}

/* Contenedor principal del menu (flex vertical, scrollable) */
.mobile-menu-content{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:16px !important;
  width:100% !important;
  max-width:460px !important;
  height:auto !important;
  min-height:100% !important;
  padding:60px 20px 30px 20px !important;
  margin:0 auto !important;
  box-sizing:border-box !important;
  overflow-y:auto !important;
  position:relative !important;
}

/* 1. Header del menu */
.mobile-menu-header,
.mobile-menu-nav,
.mobile-menu-nav a,
.mobile-menu-cta,
.btn-cotizar-mobile,
.mobile-menu-footer{
  position:relative !important;
  top:auto !important;
  bottom:auto !important;
  left:auto !important;
  right:auto !important;
  transform:none !important;
  margin:0 !important;
}
.mobile-menu-header{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  text-align:center;width:100%;
}
.mobile-menu-header .menu-logo,
.mobile-menu-header img.menu-logo{
  width:62px;height:62px;border-radius:16px;
  background:rgba(11,18,32,.7);border:1px solid rgba(56,189,248,.4);
  box-shadow:0 0 24px rgba(56,189,248,.3),inset 0 0 18px rgba(56,189,248,.12);
  padding:6px;object-fit:contain;
}
.mobile-menu-header h3{
  margin:0;font-family:'Manrope',sans-serif;font-size:14px;font-weight:800;
  color:#fff;letter-spacing:.5px;text-transform:uppercase;
  text-shadow:0 0 16px rgba(56,189,248,.35);
}
.mobile-menu-header span{
  font-family:'Inter',sans-serif;font-size:11px;font-weight:500;
  color:rgba(56,189,248,.85);letter-spacing:1.8px;text-transform:uppercase;
}

/* 2. Nav de navegacion */
.mobile-menu-nav{
  display:flex;flex-direction:column;gap:12px;width:100%;max-width:320px;align-items:center;
  list-style:none;padding:0;
}

/* Botones principales del menu */
.menu-btn,
.mobile-menu-link{
  display:flex;align-items:center;justify-content:center;gap:12px;
  padding:14px 18px;width:100%;
  font-family:'Manrope',sans-serif;font-size:15px;font-weight:600;color:rgba(255,255,255,.92);
  text-decoration:none;text-transform:uppercase;letter-spacing:1.2px;
  background:rgba(15,23,42,.55);border:1px solid rgba(56,189,248,.18);border-radius:14px;
  transition:all .25s ease;box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.menu-btn i,
.mobile-menu-link i{color:rgba(56,189,248,.85);font-size:15px;width:18px;text-align:center;transition:all .25s ease;}
.menu-btn:hover,.menu-btn:active,
.mobile-menu-link:hover,.mobile-menu-link:active{
  color:#fff;background:rgba(56,189,248,.14);border-color:rgba(56,189,248,.65);
  box-shadow:0 0 0 1px rgba(56,189,248,.4),0 0 26px rgba(56,189,248,.35),inset 0 0 18px rgba(56,189,248,.18);
  text-shadow:0 0 12px rgba(56,189,248,.55);
}
.menu-btn:hover i,.menu-btn:active i,
.mobile-menu-link:hover i,.mobile-menu-link:active i{color:#7DD3FC;text-shadow:0 0 10px rgba(56,189,248,.7);}

/* Servicios: enlace + flecha del acordeon lado a lado */
.services-accordion-wrapper,
.mobile-menu-services{
  display:flex;gap:8px;width:100%;justify-content:center;align-items:stretch;
}
.services-accordion-wrapper .service-link,
.services-accordion-wrapper .menu-btn,
.mobile-menu-services .mobile-menu-link{flex:1;}
.services-accordion-wrapper .accordion-toggle-btn,
.mobile-menu-services-toggle{
  flex-shrink:0;width:48px;
  display:flex;align-items:center;justify-content:center;padding:0;
  background:rgba(15,23,42,.55);border:1px solid rgba(56,189,248,.3);border-radius:14px;
  color:rgba(125,211,252,.9);cursor:pointer;font-size:13px;
  transition:all .25s ease;
}
.services-accordion-wrapper .accordion-toggle-btn i,
.mobile-menu-services-toggle i{transition:transform .3s ease;}
.services-accordion-wrapper .accordion-toggle-btn[aria-expanded="true"] i,
.mobile-menu-services-toggle[aria-expanded="true"] i{transform:rotate(180deg);}
.services-accordion-wrapper .accordion-toggle-btn:hover,
.mobile-menu-services-toggle:hover{background:rgba(56,189,248,.18);border-color:rgba(56,189,248,.7);color:#fff;box-shadow:0 0 18px rgba(56,189,248,.4);}

/* Sublista del del accordion de Servicios */
.services-dropdown,
.mobile-menu-sublist{
  list-style:none;padding:6px;
  display:none;flex-direction:column;gap:4px;width:100%;
  background:rgba(5,8,15,.45);border:1px solid rgba(56,189,248,.1);border-radius:12px;
}
.services-dropdown.open,
.mobile-menu-sublist.open{display:flex;}
.services-dropdown a,
.mobile-menu-sublist a{
  display:flex;align-items:center;gap:10px;
  padding:11px 14px;font-family:'Inter',sans-serif;font-size:13px;
  color:rgba(255,255,255,.85);text-decoration:none;
  background:transparent;border:1px solid transparent;border-radius:10px;
  letter-spacing:.8px;transition:all .2s ease;
}
.services-dropdown a:hover,
.mobile-menu-sublist a:hover{background:rgba(56,189,248,.1);border-color:rgba(56,189,248,.35);color:#fff;}
.services-dropdown a i,
.mobile-menu-sublist a i{color:rgba(56,189,248,.85);font-size:13px;}

/* 3. Boton Cotizar (pildora centrada) */
.mobile-menu-cta{
  display:flex;align-items:center;justify-content:center;width:100%;max-width:320px;
  margin-top:8px !important;
}
.btn-cotizar-mobile,
.mobile-menu-cta a{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;padding:16px 36px;
  background:linear-gradient(135deg,#0EA5E9 0%,#2563EB 100%);
  color:#fff;font-family:'Manrope',sans-serif;font-size:14px;font-weight:800;
  letter-spacing:1.5px;text-transform:uppercase;
  border:none;border-radius:999px;cursor:pointer;text-decoration:none;
  box-shadow:0 8px 26px rgba(14,165,233,.45),0 0 0 1px rgba(56,189,248,.55),inset 0 1px 0 rgba(255,255,255,.25);
  transition:all .25s ease;text-shadow:0 1px 1px rgba(0,0,0,.25);
}
.btn-cotizar-mobile:hover,
.mobile-menu-cta a:hover{transform:translateY(-2px);background:linear-gradient(135deg,#38BDF8 0%,#0EA5E9 100%);box-shadow:0 12px 32px rgba(14,165,233,.65),0 0 0 1px rgba(125,211,252,.85),0 0 36px rgba(56,189,248,.55),inset 0 1px 0 rgba(255,255,255,.35);}

/* Divisor aqua */
.mobile-menu-divider{width:60%;height:1px;background:linear-gradient(90deg,transparent,rgba(56,189,248,.55),transparent);margin:6px auto 10px;box-shadow:0 0 8px rgba(56,189,248,.4);}

/* 4. Footer de redes sociales */
.mobile-menu-footer{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  width:100%;max-width:320px;
  margin-top:15px !important;
}
.mobile-menu-footer p,
.mobile-menu-socials-label{font-family:'Manrope',sans-serif;font-size:11px;font-weight:700;color:rgba(125,211,252,.85);letter-spacing:2.5px;text-transform:uppercase;text-shadow:0 0 12px rgba(56,189,248,.45);margin:0;}
.social-icons,
.mobile-menu-socials-icons{display:flex;gap:14px;}
.social-icons a,
.mobile-menu-socials-icons a{
  width:48px;height:48px;border-radius:50%;
  background:rgba(15,23,42,.6);border:1px solid rgba(56,189,248,.4);
  color:#fff;font-size:17px;display:flex;align-items:center;justify-content:center;
  text-decoration:none;transition:all .25s ease;box-shadow:0 0 0 1px rgba(56,189,248,.1);
  position:static !important;
}
.social-icons a:hover,
.mobile-menu-socials-icons a:hover{transform:translateY(-3px) scale(1.06);border-color:rgba(56,189,248,.85);box-shadow:0 6px 18px rgba(0,0,0,.5),0 0 22px rgba(56,189,248,.55);color:#7DD3FC;}
.social-icons a:has(.fa-whatsapp):hover,
.mobile-menu-socials-icons a:has(.fa-whatsapp):hover{border-color:#25D366;box-shadow:0 6px 18px rgba(0,0,0,.5),0 0 22px rgba(37,211,102,.55);color:#25D366;}
.social-icons a:has(.fa-facebook-f):hover,
.mobile-menu-socials-icons a:has(.fa-facebook-f):hover{border-color:#1877F2;box-shadow:0 6px 18px rgba(0,0,0,.5),0 0 22px rgba(24,119,242,.55);color:#1877F2;}
.social-icons a:has(.fa-instagram):hover,
.mobile-menu-socials-icons a:has(.fa-instagram):hover{border-color:#E4405F;box-shadow:0 6px 18px rgba(0,0,0,.5),0 0 22px rgba(225,48,108,.55);color:#E4405F;}

/* ----- MOBILE ONLY (<992px): hide desktop, show hamburger ----- */
@media (max-width:991px){
  .header-nav{padding:0 16px;}
  .brand{font-size:11px;gap:8px;}
  .brand-logo-img{height:34px;max-width:42px;}
  .brand-text{font-size:11px;}
  .header-desktop-nav{display:none;}
  .menu-toggle{display:flex;}
  .menu-btn,
  .mobile-menu-link{font-size:14px;}
  .mobile-menu,
  .mobile-menu-overlay{background:url('img/Fondo_Menu.webp') no-repeat center center / cover;}
}
}
@media (max-width:480px){
  .header-nav{padding:0 14px;}
  .brand-logo-img{height:32px;max-width:40px;}
}

/* ==========================================================================
   OCULTAR TODO EL HEADER VIEJO (reglas duplicadas)
   ========================================================================== */
.mobile-menu-btn,
.header-social-old,
.mobile-social-section{display:none !important;}

/* Bloquea el desplazamiento de la página de fondo */
body.no-scroll {
  overflow: hidden !important;
  height: 100vh !important;
  touch-action: none !important;
}

/* HERO */
.hero{
    padding:140px 0 100px !important;
    position:relative;
    border-bottom:none !important;
    background:#080f1a;
    background-color:#080f1a;
    background-image:url('img/Fondo_Hero.webp');
    background-size:cover;
    -webkit-background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    background-attachment:fixed;
    overflow:hidden;
    min-height:100svh;
    min-height:100dvh;
  }
  @media (max-width:768px){
    .hero{
      background-attachment:scroll;
      -webkit-background-size:cover;
    }
  }
 /* Video de fondo del Hero */
#hero-video{
     position:absolute;
     top:0;
     left:0;
     width:100%;
     height:100%;
     object-fit:cover;
     z-index:0;
     pointer-events:none !important;
     display:block;
   }
   /* Ocultar controles nativos del video */
   #hero-video::-webkit-media-controls{display:none !important;}
   #hero-video::-webkit-media-controls-enclosure{display:none !important;}
   #hero-video::-webkit-media-controls-panel{display:none !important;}
   .checklist-hero-video{
     position:absolute;
     top:0;
     left:0;
     width:100%;
     height:100%;
     object-fit:cover;
     z-index:0;
     pointer-events:none !important;
     display:block;
   }
   .checklist-hero-video::-webkit-media-controls{display:none !important;}
   .checklist-hero-video::-webkit-media-controls-enclosure{display:none !important;}
   .checklist-hero-video::-webkit-media-controls-panel{display:none !important;}
 .hero::before{
  content:'';
  position:absolute;
  inset:0;
  background:rgba(8,15,26,0.65) !important;
  z-index:1;
}
.hero::after{
  content:'';
  position:absolute;
  inset:0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(56,189,248,.08) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(42,168,255,.06) 0%, transparent 40%),
    radial-gradient(circle at 50% 50%, rgba(56,189,248,.04) 0%, transparent 60%);
  z-index:1;
  animation:particleFloat 20s ease-in-out infinite;
}
@keyframes particleFloat{
  0%,100%{opacity:1;transform:scale(1);}
  50%{opacity:0.7;transform:scale(1.1);}
}
.hero-grid{display:grid;grid-template-columns:0.45fr 0.55fr;gap:60px;align-items:flex-start;position:relative;z-index:2;padding-top:0 !important;margin-top:0 !important;transform:none !important;}
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr;gap:40px;}
  .hero-right{order:2;}
  .hero-content{order:1;}
}
@media (max-width:768px){
.hero,
     section.hero{
       height:100dvh !important;
       min-height:100dvh !important;
       max-height:100dvh !important;
       position:relative !important;
       display:flex !important;
       flex-direction:column !important;
       justify-content:space-between !important;
       padding-top:80px !important;
       padding-bottom:1.5rem !important;
       box-sizing:border-box !important;
       overflow:hidden !important;
       background-attachment:scroll !important;
       background-size:cover !important;
       background-position:center center !important;
       background-repeat:no-repeat !important;
     }
    .hero-content{
      display:flex !important;
      flex-direction:column !important;
      justify-content:center !important;
      padding-top:60px !important;
      overflow:hidden !important;
    }
    .hero-grid{
      display:flex !important;
      flex-direction:column !important;
      justify-content:space-between !important;
      flex:1 !important;
      width:100% !important;
    }
    .hero-right{
      display:flex !important;
      justify-content:flex-end !important;
      align-items:flex-end !important;
      margin-bottom:0 !important;
    }
    .hero-cards,
    .services-grid-container{
      position:relative !important;
      margin-top:100vh !important;
      clear:both !important;
    }
    .whatsapp-widget{
      display:none !important;
      position:fixed !important;
      top:50% !important;
      left:50% !important;
      transform:translate(-50%,-50%) !important;
      width:90% !important;
      max-width:400px !important;
      z-index:99999 !important;
      box-shadow:0 10px 30px rgba(0,0,0,.8) !important;
      border-radius:20px !important;
      margin-top:0 !important;
      max-height:85vh !important;
      overflow-y:auto !important;
    }
    .whatsapp-widget.active-modal{
      display:flex !important;
      animation:none !important;
    }
    .whatsapp-modal-overlay{
      display:none !important;
      position:fixed !important;
      top:0 !important;
      left:0 !important;
      width:100vw !important;
      height:100vh !important;
      background:rgba(0,0,0,.7) !important;
      z-index:99998 !important;
    }
    .whatsapp-modal-overlay.active-modal{
      display:block !important;
    }
    .hero-grid{gap:30px;}
    .hero h1{font-size:clamp(2rem,8vw,3rem);}
    .hero-ctas{flex-direction:column;gap:16px;}
    .hero-ctas .btn{width:100%;min-width:auto;}
.hero-cards{grid-template-columns:1fr;gap:12px;}
    .menu-btn[href*="checklist"]{
      display:flex !important;
      align-items:center;
      gap:0.8rem;
    }
  }

 .hero-content{
  position:relative;
  z-index:2;
  padding:0;
  margin-left:0;
  margin: top 80px;
}

.hero h1{
  font-family:var(--display);
  font-size:clamp(2.8rem,6vw,4.5rem);
  font-weight:800;
  line-height:1.05;
  letter-spacing:-2px;
  margin-bottom:30px;
  color:var(--paper);
  text-shadow:0 2px 30px rgba(0,0,0,.3);
}
.hero h1 .accent{color:var(--blue-bright);}
.section-head h2 .accent{color:var(--blue);}
.service-card h3 .accent{color:var(--blue);}
.hero p.lead{font-size:16px;max-width:420px;margin-bottom:35px;color:var(--paper-dim);line-height:1.8;}
.hero p.lead .highlight{color:#00a8ff !important;font-weight:600 !important;}
.hero-ctas{display:flex;gap:12px;margin-bottom:25px;align-items:center;min-height:56px;}
.hero-ctas .btn{
  flex:1;
  height:56px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:12px !important;
  font-weight:700;
  font-size:15px;
  transition:all .3s cubic-bezier(.4,0,.2,1);
  opacity:1 !important;
}
.hero-ctas .btn-primary{
  background:#00a8ff !important;
  color:#000000 !important;
  border:none !important;
  box-shadow:0 4px 20px rgba(0,168,255,0.4) !important;
}
.hero-ctas .btn-primary:hover{
  background:#00a8ff !important;
  box-shadow:0 4px 20px rgba(0,168,255,0.4) !important;
}
.hero-ctas .btn-ghost{
  border:2px solid #00a8ff !important;
  color:#00a8ff !important;
  background:transparent !important;
}
.hero-ctas .btn-ghost:hover{
  background:#00a8ff !important;
  color:#000000 !important;
  border-color:#00a8ff !important;
}
.hero-cards{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:20px;
  margin-top:25px;
}
.hero-card{
  background:rgba(11,31,53,.5);
  border:1px solid rgba(56,189,248,.15);
  border-radius:12px;
  padding:14px 18px;
  display:flex;
  align-items:center;
  gap:12px;
  transition:all .3s cubic-bezier(.4,0,.2,1);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}
.hero-card:hover{
  background:rgba(11,31,53,.7);
  border-color:rgba(56,189,248,.4);
  transform:translateY(-3px);
  box-shadow:0 8px 30px rgba(56,189,248,.15);
}
.hero-card-icon{
  width:36px;
  height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(56,189,248,.1);
  border-radius:8px;
  color:var(--blue);
}
.hero-card-icon svg{
  width:20px;
  height:20px;
}
.hero-card-text{
  font-size:13px;
  font-weight:600;
  color:var(--paper);
  letter-spacing:-0.3px;
}
.hero-right{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:20px;
  padding-top:0;
  margin-top:0;
}
.hero-worker{
  position:relative;
  width:100%;
  max-width:500px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.worker-img{
  width:100%;
  height:auto;
  border-radius:20px;
  box-shadow:0 30px 80px rgba(0,0,0,.5),0 0 60px rgba(56,189,248,.1);
  animation:workerFloat 8s ease-in-out infinite;
}
@keyframes workerFloat{
  0%,100%{transform:translateY(0) scale(1);}
  50%{transform:translateY(-12px) scale(1.02);}
}
.hero-stats{
  margin-top:20px;
  padding:0;
  width:100%;
  max-width:100%;
}
.stats-bar{
  background:rgba(11,31,53,.5);
  border:1px solid rgba(56,189,248,.15);
  border-radius:16px;
  padding:20px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  box-shadow:0 10px 40px rgba(0,0,0,.2);
  flex-wrap:nowrap;
  gap:0;
}
.stat-item{
  text-align:center;
  flex:1;
  min-width:0;
}
.stat-number{
  font-family:var(--display);
  font-size:22px;
  font-weight:800;
  color:var(--blue-bright);
  letter-spacing:-1px;
  margin-bottom:4px;
}
.stat-label{
  font-size:11px;
  font-weight:500;
  color:var(--paper-dim);
  text-transform:uppercase;
  letter-spacing:0.5px;
  line-height:1.3;
}
.stat-divider{
  width:1px;
  height:32px;
  background:rgba(56,189,248,.2);
  margin:0 16px;
}
.tag{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  font-weight:600;
  color:var(--blue);
  text-transform:uppercase;
  letter-spacing:1.5px;
  margin-bottom:16px;
  padding:8px 16px;
  background:rgba(56,189,248,.1);
  border-radius:20px;
  border:1px solid rgba(56,189,248,.2);
}
.tag-icon{
  width:14px;
  height:14px;
  object-fit:contain;
}
@media (max-width:768px){
  .stats-bar{
    flex-direction:column;
    gap:16px;
  }
  .stat-divider{
    width:100%;
    height:1px;
    margin:12px 0;
  }
}
.hero-meta{display:flex;gap:32px;font-family:var(--display);font-size:13px;color:var(--slate);flex-wrap:wrap;text-transform:uppercase;letter-spacing:-2px;}
.hero-meta b{color:var(--paper);font-size:20px;display:block;font-family:var(--display);letter-spacing:-2px;}

/* terminal */
.editor{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.6);
}
.editor-bar{
  display:flex;align-items:center;gap:6px;
  padding:11px 14px;background:var(--panel-2);border-bottom:1px solid var(--line);
}
.editor-bar .dots{display:flex;gap:7px;margin-right:8px;}
.editor-bar .dots span{width:11px;height:11px;border-radius:50%;}
.editor-bar .dots span:nth-child(1){background:#FF5F57;}
.editor-bar .dots span:nth-child(2){background:#FEBC2E;}
.editor-bar .dots span:nth-child(3){background:#28C840;}
.editor-tabs{display:flex;gap:2px;font-family:var(--mono);font-size:12px;color:var(--slate);}
.editor-tabs span{padding:5px 12px;border-radius:5px 5px 0 0;}
.editor-tabs span.active{background:var(--panel);color:var(--blue);}
.editor-body{padding:22px 24px 26px;font-family:var(--mono);font-size:13.5px;line-height:1.9;min-height:280px;}
.editor-body .ln{color:#4A5160;display:inline-block;width:22px;user-select:none;}
.kw{color:#1D7BFF;}
.fn{color:#3D9BFF;}
.str{color:#0A1931;}
.cm{color:#6B21A8;}
.cursor-blink{display:inline-block;width:8px;height:15px;background:var(--blue);vertical-align:-2px;animation:blink 1s step-end infinite;}
@keyframes blink{50%{opacity:0;}}
#typed-line{color:var(--paper);}

/* Hero de Servicios con Fondo de Video Adaptable */
.services-hero {
  position: relative !important;
  width: 100% !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 100px 20px 40px 20px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}
.services-hero .hero-video-bg {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  min-width: 100% !important;
  min-height: 100% !important;
  width: auto !important;
  height: auto !important;
  object-fit: cover !important;
  z-index: 1 !important;
  pointer-events: none !important;
}
.services-hero-overlay,
.services-hero::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: rgba(0, 0, 0, 0.45) !important;
  z-index: 2 !important;
  pointer-events: none !important;
}
.services-hero-container {
  position: relative !important;
  z-index: 3 !important;
  width: 100% !important;
  max-width: 800px !important;
  margin: 0 auto !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}
.services-hero .hero-title {
  color: #FFFFFF !important;
  font-size: clamp(2.2rem, 4.5vw, 3.4rem) !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  margin-bottom: 12px !important;
  text-shadow:
    1.5px 1.5px 0 #000000,
    -1.5px 1.5px 0 #000000,
    1.5px -1.5px 0 #000000,
    -1.5px -1.5px 0 #000000,
    0px 1.5px 0 #000000,
    0px -1.5px 0 #000000,
    1.5px 0px 0 #000000,
    -1.5px 0px 0 #000000 !important;
  filter: none !important;
  -webkit-text-stroke: 0px transparent !important;
}
.services-hero .hero-title .highlight-cyan {
  color: #00A3FF !important;
  text-shadow: 0 0 16px rgba(0, 163, 255, 0.45) !important;
}
.services-hero .hero-subtitle {
  color: #CBD5E1 !important;
  font-size: clamp(0.95rem, 1.6vw, 1.1rem) !important;
  line-height: 1.55 !important;
  max-width: 650px !important;
  margin-bottom: 30px !important;
}
.services-hero .hero-subtitle .text-highlight {
  color: #00A3FF !important;
  font-weight: 600 !important;
}
.services-hero .features-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 260px)) !important;
  gap: 14px 18px !important;
  justify-content: center !important;
  width: 100% !important;
  margin-bottom: 36px !important;
}
.services-hero .feature-card {
  background: rgba(15, 23, 42, 0.45) !important;
  border: 1px solid rgba(0, 163, 255, 0.25) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-radius: 8px !important;
  padding: 7px 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  color: #FFFFFF !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(0, 163, 255, 0.1) !important;
  transition: all 0.3s cubic-bezier(.4,0,.2,1) !important;
}
.services-hero .feature-card:hover {
  background: rgba(15, 23, 42, 0.6) !important;
  border-color: rgba(0, 163, 255, 0.5) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(0, 163, 255, 0.2), 0 0 15px rgba(0, 163, 255, 0.15) !important;
}
.services-hero .feature-card .icon {
  font-size: 1rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  background: rgba(0, 163, 255, 0.12) !important;
  border-radius: 6px !important;
  color: #00A3FF !important;
  box-shadow: 0 0 8px rgba(0, 163, 255, 0.2) !important;
}
.services-hero .hero-buttons {
  display: flex !important;
  flex-direction: row !important;
  gap: 16px !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  max-width: 520px !important;
}
.services-hero .btn-primary-cyan {
  background: #00A3FF !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  font-size: 0.88rem !important;
  letter-spacing: 0.5px !important;
  padding: 14px 28px !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  box-shadow: 0 0 16px rgba(0, 163, 255, 0.4) !important;
  transition: all 0.3s ease !important;
  white-space: nowrap !important;
}
.services-hero .btn-primary-cyan:hover {
  background: #008AD6 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 0 24px rgba(0, 163, 255, 0.7) !important;
}
.services-hero .btn-secondary-outline {
  background: rgba(10, 15, 30, 0.5) !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  font-size: 0.88rem !important;
  letter-spacing: 0.5px !important;
  padding: 13px 26px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  text-decoration: none !important;
  backdrop-filter: blur(6px) !important;
  transition: all 0.3s ease !important;
  white-space: nowrap !important;
}
.services-hero .btn-secondary-outline:hover {
  border-color: #00A3FF !important;
  color: #00A3FF !important;
  transform: translateY(-2px) !important;
}
/* =======================================================
   RESPONSIVE MÓVIL PERFECTO - HERO DE SERVICIOS
   ======================================================= */

@media (max-width: 768px) {
  .services-hero {
    min-height: 100dvh !important;
    height: auto !important;
    padding: 150px 16px 40px 16px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: center !important;
    box-sizing: border-box !important;
  }
  .services-hero-container {
    width: 100% !important;
    max-width: 400px !important;
    margin: 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    margin-top: 20px !important;
  }
  .services-hero .hero-title {
    font-size: clamp(1.6rem, 7vw, 2.2rem) !important;
    line-height: 1.2 !important;
    margin-bottom: 12px !important;
    word-break: break-word !important;
  }
  .services-hero .hero-subtitle {
    font-size: clamp(0.85rem, 3.8vw, 0.98rem) !important;
    line-height: 1.45 !important;
    margin-bottom: 22px !important;
    padding: 0 4px !important;
  }
  .services-hero .features-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px 10px !important;
    width: 100% !important;
    margin-bottom: 26px !important;
  }
  .services-hero .feature-card {
    padding: 8px 10px !important;
    font-size: 0.75rem !important;
    border-radius: 6px !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: normal !important;
    word-break: break-word !important;
    line-height: 1.3 !important;
  }
  .services-hero .feature-card .icon {
    font-size: 0.9rem !important;
  }
  .services-hero .hero-buttons {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 10px !important;
  }
  .services-hero .btn-primary-cyan,
  .services-hero .btn-secondary-outline {
    width: 100% !important;
    padding: 12px 16px !important;
    font-size: 0.82rem !important;
    text-align: center !important;
    box-sizing: border-box !important;
    display: block !important;
  }
}

@media (max-width: 400px) {
  .services-hero .features-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px 8px !important;
  }
  .services-hero .feature-card {
    padding: 6px 8px !important;
    font-size: 0.7rem !important;
  }
  .services-hero .feature-card .icon {
    font-size: 0.85rem !important;
  }
}

/* SECCIÓN INDEPENDIENTE DE TARJETAS (DEBAJO DEL HERO) */
.services-grid-section {
  width: 100% !important;
  background-image: url('img/fondo_servicios.webp') !important;
  background-color: #050b14 !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
  padding: 80px 20px !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  position: relative;
  overflow: visible;
}
.services-grid-section .services-cards-container,
.services-grid-section .services-grid,
.services-grid-section .services-container {
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 28px !important;
}
.service-card {
  position: relative !important;
  z-index: 2 !important;
}

/* Ajustes responsivos para pantallas móviles */
@media (max-width: 992px) {
  .services-grid-section .services-cards-container,
  .services-grid-section .services-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 768px) {
  .services-grid-section {
    padding: 50px 16px !important;
    background-attachment: scroll !important;
  }
  .services-grid-section .services-cards-container,
  .services-grid-section .services-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
}

@media (max-width: 768px) {
  .services-hero {
    padding-top: 85px !important;
    padding-bottom: 25px !important;
    justify-content: space-between !important;
  }
  .services-hero .hero-title {
    font-size: clamp(1.8rem, 6vw, 2.4rem) !important;
    letter-spacing: 1px !important;
  }
  .services-hero .hero-ctas {
    flex-direction: column !important;
    gap: 10px !important;
    max-width: 100% !important;
  }
  .services-hero .hero-cards {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }
  .services-hero .hero-card {
    padding: 10px 14px !important;
    gap: 8px !important;
  }
  .services-hero .hero-card-text {
    font-size: 11px !important;
  }
}
/* ============================================
    SERVICE CARDS - PREMIUM DESIGN
    ============================================ */
.service-card{
  --card-accent:#38BDF8;
  --card-accent-rgb:56,189,248;
  position:relative;
  background:linear-gradient(160deg, rgba(15,23,42,.85) 0%, rgba(5,8,15,.95) 100%);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-radius:20px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  border:1px solid rgba(var(--card-accent-rgb),.25);
  box-shadow:
    0 10px 40px rgba(0,0,0,.4),
    0 0 0 1px rgba(255,255,255,.03),
    0 0 30px -10px rgba(var(--card-accent-rgb),.15);
  transition:all .4s cubic-bezier(.16,1,.3,1);
  animation:cardFadeIn .6s ease both;
}
.service-card::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:1px;
  background:linear-gradient(90deg, transparent 0%, rgba(var(--card-accent-rgb),.6) 50%, transparent 100%);
  z-index:3;
  pointer-events:none;
  opacity:.6;
  transition:opacity .4s ease;
}
.service-card:hover{
  transform:translateY(-8px);
  border-color:rgba(var(--card-accent-rgb),.5);
  box-shadow:
    0 20px 60px rgba(0,0,0,.5),
    0 0 0 1px rgba(255,255,255,.05),
    0 0 50px -5px rgba(var(--card-accent-rgb),.35);
}
.service-card:hover::before{
  opacity:1;
}

/* COLOR VARIANTS */
.service-card--residential{
  --card-accent:#00BFFF;
  --card-accent-rgb:0,191,255;
}
.service-card--commercial{
  --card-accent:#A855F7;
  --card-accent-rgb:168,85,247;
}
.service-card--industrial{
  --card-accent:#168BFF;
  --card-accent-rgb:22,139,255;
}
.service-card--glass{
  --card-accent:#A8E63D;
  --card-accent-rgb:168,230,61;
}
.service-card--disinfection{
  --card-accent:#B45CFF;
  --card-accent-rgb:180,92,255;
}
.service-card--maintenance{
  --card-accent:#F5B400;
  --card-accent-rgb:245,180,0;
}

/* MENU BUTTON (3 puntos) */
.service-menu-btn{
  position:absolute;
  top:14px;
  right:14px;
  width:36px;
  height:36px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.15);
  background:rgba(11,18,32,.7);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  color:rgba(255,255,255,.8);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:all .25s ease;
  z-index:20;
}
.service-menu-btn:hover{
  background:rgba(var(--card-accent-rgb),.2);
  border-color:rgba(var(--card-accent-rgb),.5);
  color:var(--card-accent);
  box-shadow:0 0 16px rgba(var(--card-accent-rgb),.3);
}
.service-menu-btn svg{
  width:16px;
  height:16px;
}
.service-menu{
  position:absolute;
  top:56px;
  right:14px;
  background:rgba(11,18,32,.95);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-radius:12px;
  border:1px solid rgba(255,255,255,.1);
  min-width:160px;
  display:none;
  flex-direction:column;
  z-index:100;
  box-shadow:0 8px 32px rgba(0,0,0,.5);
  overflow:hidden;
}
.service-menu.active{
  display:flex;
}
.menu-item{
  padding:12px 18px;
  background:transparent;
  border:none;
  color:rgba(255,255,255,.85);
  font-family:'Inter',sans-serif;
  font-size:13px;
  font-weight:500;
  text-align:left;
  cursor:pointer;
  transition:all .2s ease;
  border-bottom:1px solid rgba(255,255,255,.05);
}
.menu-item:last-child{
  border-bottom:none;
}
.menu-item:hover{
  background:rgba(var(--card-accent-rgb),.15);
  color:var(--card-accent);
  padding-left:22px;
}

/* IMAGE */
.service-image{
  position:relative;
  width:100%;
  height:130px;
  overflow:hidden;
  background:#0B1220;
  flex-shrink:0;
}
.service-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  transition:transform .6s cubic-bezier(.16,1,.3,1);
  display:block;
}
.service-card:hover .service-image img{
  transform:scale(1.06);
}
.service-image-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(5,8,15,0) 0%, rgba(5,8,15,.4) 60%, rgba(5,8,15,.95) 100%);
  pointer-events:none;
  z-index:1;
}

/* HEXAGON ICON (superpuesto sobre la imagen) */
.service-icon-wrapper{
  position:absolute;
  top:130px;
  left:50%;
  transform:translate(-50%,-50%);
  z-index:5;
}
.service-hexagon{
  width:58px;
  height:58px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg, rgba(11,18,32,.95) 0%, rgba(5,8,15,.98) 100%);
  border:1.5px solid rgba(var(--card-accent-rgb),.6);
  border-radius:14px;
  color:var(--card-accent);
  box-shadow:
    0 0 0 3px rgba(11,18,32,1),
    0 0 24px rgba(var(--card-accent-rgb),.45),
    inset 0 0 16px rgba(var(--card-accent-rgb),.12);
  position:relative;
  transition:all .4s cubic-bezier(.16,1,.3,1);
}
.service-hexagon::before{
  content:'';
  position:absolute;
  inset:4px;
  border-radius:10px;
  background:radial-gradient(circle at 30% 30%, rgba(var(--card-accent-rgb),.18) 0%, transparent 70%);
  pointer-events:none;
}
.service-hexagon svg{
  width:28px;
  height:28px;
  position:relative;
  z-index:2;
  filter:drop-shadow(0 0 6px rgba(var(--card-accent-rgb),.5));
}
.service-card:hover .service-hexagon{
  transform:rotate(-6deg) scale(1.08);
  box-shadow:
    0 0 0 3px rgba(11,18,32,1),
    0 0 36px rgba(var(--card-accent-rgb),.7),
    inset 0 0 20px rgba(var(--card-accent-rgb),.18);
}

/* BODY */
.service-body{
  padding:38px 20px 18px 20px;
  display:flex;
  flex-direction:column;
  flex:1;
  text-align:center;
}
.service-card h3{
  font-family:'Manrope',sans-serif;
  font-size:18px;
  font-weight:800;
  color:#fff;
  line-height:1.2;
  margin:0 0 8px 0;
  letter-spacing:-.3px;
}
.service-card h3 .accent{
  color:var(--card-accent);
  text-shadow:0 0 20px rgba(var(--card-accent-rgb),.4);
}
.service-card p{
  font-family:'Inter',sans-serif;
  font-size:13px;
  line-height:1.55;
  color:rgba(255,255,255,.7);
  margin:0 0 14px 0;
  flex-shrink:0;
}

/* FEATURES (3 columnas) */
.service-features{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:6px;
  margin:0 0 14px 0;
  padding:12px 0;
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.service-feature{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  text-align:center;
  padding:4px 2px;
  transition:transform .25s ease;
}
.service-feature:hover{
  transform:translateY(-2px);
}
.service-feature-icon{
  width:30px;
  height:30px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  background:rgba(var(--card-accent-rgb),.12);
  color:var(--card-accent);
  font-size:13px;
  flex-shrink:0;
  transition:all .25s ease;
}
.service-feature:hover .service-feature-icon{
  background:rgba(var(--card-accent-rgb),.2);
  box-shadow:0 0 12px rgba(var(--card-accent-rgb),.35);
}
.service-feature-text{
  font-family:'Inter',sans-serif;
  font-size:10.5px;
  font-weight:600;
  color:rgba(255,255,255,.85);
  line-height:1.25;
  letter-spacing:.1px;
}

/* CTA BUTTON "VER MÁS" */
.service-cta{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:100%;
  padding:10px 16px;
  margin-top:auto;
  background:rgba(var(--card-accent-rgb),.08);
  border:1px solid rgba(var(--card-accent-rgb),.4);
  border-radius:10px;
  color:var(--card-accent);
  font-family:'Manrope',sans-serif;
  font-size:12px;
  font-weight:700;
  letter-spacing:.8px;
  text-transform:uppercase;
  cursor:pointer;
  transition:all .3s ease;
  position:relative;
  overflow:hidden;
}
.service-cta::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, rgba(var(--card-accent-rgb),.15) 0%, transparent 100%);
  opacity:0;
  transition:opacity .3s ease;
}
.service-cta:hover{
  background:rgba(var(--card-accent-rgb),.18);
  border-color:var(--card-accent);
  color:#fff;
  box-shadow:0 6px 20px rgba(var(--card-accent-rgb),.3), 0 0 0 1px rgba(var(--card-accent-rgb),.2);
  transform:translateY(-1px);
}
.service-cta:hover::before{
  opacity:1;
}
.service-cta svg{
  width:14px;
  height:14px;
  transition:transform .3s ease;
  position:relative;
  z-index:1;
}
.service-cta:hover svg{
  transform:translateX(4px);
}
.service-cta span,
.service-cta{
  position:relative;
  z-index:1;
}
  display:flex;
}
.menu-item{
  padding:12px 16px;
  border:none;
  background:transparent;
  color:var(--paper);
  text-align:left;
  cursor:pointer;
  transition:all .2s ease;
  font-size:14px;
  font-weight:500;
}
.menu-item:hover{
  background:rgba(255,255,255,.1);
}
.menu-item:first-child{
  border-radius:12px 12px 0 0;
}
.menu-item:last-child{
  border-radius:0 0 12px 12px;
}
/* ============================================
   SERVICE DETAILS MODAL - PREMIUM DESIGN
   ============================================ */
.service-details-modal{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:9999;
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
}
.service-details-modal.active{
  display:flex;
  animation:modalFadeIn .3s ease;
}
@keyframes modalFadeIn{
  from{opacity:0;}
  to{opacity:1;}
}

/* OVERLAY */
.service-details-modal .modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(5,8,15,.85);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  z-index:1;
  cursor:pointer;
}

/* MAIN CONTAINER */
.service-details-modal .modal-content{
  position:relative;
  z-index:2;
  background:linear-gradient(160deg, #0B1220 0%, #050810 100%);
  border-radius:24px;
  border:1px solid rgba(56,189,248,.18);
  max-width:960px;
  width:100%;
  max-height:90vh;
  display:flex;
  flex-direction:column;
  box-shadow:
    0 30px 80px -20px rgba(0,0,0,.8),
    0 0 0 1px rgba(56,189,248,.05),
    0 0 60px -10px rgba(56,189,248,.15);
  animation:modalSlideIn .4s cubic-bezier(.16,1,.3,1);
  overflow:hidden;
}
@keyframes modalSlideIn{
  from{
    opacity:0;
    transform:translateY(30px) scale(.95);
  }
  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

/* CLOSE BUTTON */
.service-details-modal .modal-close{
  position:absolute;
  top:16px;
  right:16px;
  width:44px;
  height:44px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.15);
  background:rgba(11,18,32,.85);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  color:var(--paper);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:all .25s ease;
  z-index:30;
}
.service-details-modal .modal-close:hover{
  background:rgba(56,189,248,.2);
  border-color:rgba(56,189,248,.5);
  color:#38BDF8;
  transform:rotate(90deg) scale(1.05);
  box-shadow:0 0 20px rgba(56,189,248,.3);
}
.service-details-modal .modal-close svg{
  width:20px;
  height:20px;
}

/* GRID LAYOUT */
.service-details-modal .modal-grid{
  display:grid;
  grid-template-columns:40% 60%;
  flex:1;
  min-height:0;
  overflow:hidden;
}

/* LEFT COLUMN */
.service-details-modal .modal-left{
  position:relative;
  display:flex;
  flex-direction:column;
  background:#050810;
  border-right:1px solid rgba(56,189,248,.1);
  overflow:hidden;
  min-height:0;
  align-self:stretch;
}
.service-details-modal .modal-image-container{
  position:relative;
  width:100%;
  height:100%;
  flex:1;
  min-height:0;
  overflow:hidden;
}
.service-details-modal .modal-image{
  width:100%;
  height:100%;
  min-height:0;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.service-details-modal .modal-image-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(5,8,15,.3) 0%, rgba(5,8,15,.1) 40%, rgba(5,8,15,.85) 100%);
  pointer-events:none;
}
.service-details-modal .modal-badge{
  position:absolute;
  top:20px;
  left:20px;
  display:flex;
  align-items:center;
  gap:8px;
  background:rgba(11,18,32,.85);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  padding:8px 16px;
  border-radius:30px;
  border:1px solid rgba(56,189,248,.3);
  box-shadow:0 4px 20px rgba(0,0,0,.4);
  z-index:2;
}
.service-details-modal .modal-badge-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#22C55E;
  box-shadow:0 0 10px #22C55E;
  animation:badgePulse 2s ease-in-out infinite;
}
@keyframes badgePulse{
  0%,100%{opacity:1;box-shadow:0 0 10px #22C55E;}
  50%{opacity:.7;box-shadow:0 0 16px #22C55E;}
}
.service-details-modal .modal-badge-text{
  font-family:'Inter',sans-serif;
  font-size:12px;
  font-weight:600;
  color:#fff;
  letter-spacing:0.3px;
}

/* TRUST OVERLAY (superpuesto sobre la imagen) */
.service-details-modal .modal-trust-overlay{
  position:absolute;
  bottom:14px;
  left:14px;
  right:14px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  z-index:2;
}
.service-details-modal .modal-trust-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:10px 6px;
  border-radius:10px;
  background:rgba(11,18,32,.72);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(56,189,248,.25);
  box-shadow:0 4px 20px rgba(0,0,0,.4);
  transition:all .25s ease;
  min-height:62px;
}
.service-details-modal .modal-trust-item:hover{
  border-color:rgba(56,189,248,.55);
  background:rgba(56,189,248,.15);
  transform:translateY(-2px);
}
.service-details-modal .modal-trust-icon{
  width:26px;
  height:26px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:7px;
  background:rgba(56,189,248,.18);
  color:#38BDF8;
  margin-bottom:4px;
  font-size:12px;
  flex-shrink:0;
}
.service-details-modal .modal-trust-icon i{
  font-size:12px;
  line-height:1;
}
.service-details-modal .modal-trust-label{
  font-family:'Manrope',sans-serif;
  font-size:10.5px;
  font-weight:700;
  color:#fff;
  letter-spacing:0.3px;
  text-transform:uppercase;
  margin-bottom:1px;
  line-height:1.2;
}
.service-details-modal .modal-trust-desc{
  font-family:'Inter',sans-serif;
  font-size:9px;
  color:rgba(255,255,255,.6);
  line-height:1.2;
  display:none;
}

/* RIGHT COLUMN */
.service-details-modal .modal-right{
  padding:36px 40px 24px 40px;
  overflow-y:auto;
  overflow-x:hidden;
  display:flex;
  flex-direction:column;
  min-height:0;
  position:relative;
  background:linear-gradient(180deg, #0B1220 0%, #070C18 100%);
}
.service-details-modal .modal-right::-webkit-scrollbar{
  width:6px;
}
.service-details-modal .modal-right::-webkit-scrollbar-track{
  background:rgba(56,189,248,.05);
  border-radius:3px;
}
.service-details-modal .modal-right::-webkit-scrollbar-thumb{
  background:rgba(56,189,248,.3);
  border-radius:3px;
}
.service-details-modal .modal-right::-webkit-scrollbar-thumb:hover{
  background:rgba(56,189,248,.5);
}

/* HEADER */
.service-details-modal .modal-header{
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom:18px;
  position:static;
  top:auto;
  flex-shrink:0;
}
.service-details-modal .modal-icon{
  width:54px;
  height:54px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  box-shadow:0 8px 24px rgba(0,0,0,.4);
  border:1px solid rgba(255,255,255,.08);
}
.service-details-modal .modal-icon svg{
  width:26px;
  height:26px;
}
.service-details-modal .modal-icon i{
  font-size:24px;
  line-height:1;
}
.service-details-modal .modal-icon--residencial{
  background:rgba(0,191,255,.15);
  color:#00BFFF;
  border-color:rgba(0,191,255,.4);
}
.service-details-modal .modal-icon--comercial{
  background:rgba(168,85,247,.15);
  color:#A855F7;
  border-color:rgba(168,85,247,.4);
}
.service-details-modal .modal-icon--industrial{
  background:rgba(22,139,255,.15);
  color:#168BFF;
  border-color:rgba(22,139,255,.4);
}
.service-details-modal .modal-icon--vidrios{
  background:rgba(168,230,61,.15);
  color:#A8E63D;
  border-color:rgba(168,230,61,.4);
}
.service-details-modal .modal-icon--desinfeccion{
  background:rgba(180,92,255,.15);
  color:#B45CFF;
  border-color:rgba(180,92,255,.4);
}
.service-details-modal .modal-icon--mantenimiento{
  background:rgba(245,180,0,.15);
  color:#F5B400;
  border-color:rgba(245,180,0,.4);
}
.service-details-modal .modal-header h2{
  margin:0;
  font-family:'Manrope',sans-serif;
  font-size:24px;
  font-weight:800;
  color:#fff;
  letter-spacing:-0.5px;
  line-height:1.2;
  word-wrap:break-word;
  overflow-wrap:break-word;
}

/* DESCRIPTION */
.service-details-modal .modal-description{
  font-family:'Inter',sans-serif;
  font-size:14.5px;
  color:rgba(255,255,255,.7);
  line-height:1.7;
  margin:0 0 24px 0;
  word-wrap:break-word;
  overflow-wrap:break-word;
}

/* INFO CARDS */
.service-details-modal .modal-info-cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin-bottom:28px;
}
.service-details-modal .modal-info-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:16px 12px;
  background:rgba(15,23,42,.6);
  border:1px solid rgba(56,189,248,.18);
  border-radius:14px;
  transition:all .25s ease;
}
.service-details-modal .modal-info-card:hover{
  border-color:rgba(56,189,248,.5);
  background:rgba(56,189,248,.08);
  transform:translateY(-3px);
  box-shadow:0 8px 24px rgba(56,189,248,.15);
}
.service-details-modal .modal-info-icon{
  width:38px;
  height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  background:rgba(56,189,248,.12);
  color:#38BDF8;
  margin-bottom:10px;
}
.service-details-modal .modal-info-icon svg{
  width:18px;
  height:18px;
}
.service-details-modal .modal-info-icon i{
  font-size:18px;
  line-height:1;
}
.service-details-modal .modal-info-label{
  font-family:'Manrope',sans-serif;
  font-size:10.5px;
  font-weight:700;
  color:rgba(255,255,255,.55);
  letter-spacing:0.8px;
  text-transform:uppercase;
  margin-bottom:4px;
}
.service-details-modal .modal-info-value{
  font-family:'Manrope',sans-serif;
  font-size:15px;
  font-weight:700;
  color:#fff;
}

/* SECTIONS */
.service-details-modal .modal-section{
  margin-bottom:24px;
}
.service-details-modal .modal-section-title{
  font-family:'Manrope',sans-serif;
  font-size:11px;
  font-weight:800;
  color:#38BDF8;
  letter-spacing:1.5px;
  text-transform:uppercase;
  margin:0 0 14px 0;
  display:flex;
  align-items:center;
  gap:12px;
}
.service-details-modal .modal-section-title::after{
  content:'';
  flex:1;
  height:1px;
  background:linear-gradient(90deg, rgba(56,189,248,.35) 0%, rgba(56,189,248,.05) 100%);
}

/* BENEFITS LIST */
.service-details-modal .modal-benefits-list{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px 18px;
}
.service-details-modal .benefit-item{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-family:'Inter',sans-serif;
  font-size:13.5px;
  color:rgba(255,255,255,.82);
  line-height:1.5;
  padding:4px 0;
  transition:all .2s ease;
}
.service-details-modal .benefit-item:hover{
  color:#fff;
}
.service-details-modal .benefit-item:hover .benefit-check{
  background:rgba(56,189,248,.3);
  box-shadow:0 0 12px rgba(56,189,248,.5);
}
.service-details-modal .benefit-check{
  flex-shrink:0;
  width:20px;
  height:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:rgba(56,189,248,.15);
  color:#38BDF8;
  font-size:10px;
  font-weight:700;
  margin-top:1px;
  transition:all .25s ease;
  border:1px solid rgba(56,189,248,.25);
}

/* INCLUDES LIST (tarjetas modernas) */
.service-details-modal .modal-includes-list{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:8px;
}
.service-details-modal .include-item{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:'Inter',sans-serif;
  font-size:13px;
  color:rgba(255,255,255,.85);
  line-height:1.4;
  padding:10px 12px;
  background:rgba(15,23,42,.55);
  border:1px solid rgba(56,189,248,.15);
  border-radius:10px;
  transition:all .25s ease;
  min-height:42px;
}
.service-details-modal .include-item:hover{
  border-color:rgba(56,189,248,.45);
  background:rgba(56,189,248,.08);
  transform:translateY(-1px);
  box-shadow:0 4px 16px rgba(56,189,248,.12);
}
.service-details-modal .include-dot{
  flex-shrink:0;
  width:8px;
  height:8px;
  border-radius:50%;
  background:linear-gradient(135deg, #38BDF8, #0EA5E9);
  box-shadow:0 0 8px rgba(56,189,248,.6);
}

/* CTA WRAPPER (dentro de la columna derecha) */
.service-details-modal .modal-cta-wrapper{
  display:flex;
  justify-content:center;
  align-items:center;
  padding:8px 0 0 0;
  margin-top:4px;
}
.service-details-modal .btn-modal{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:14px 20px;
  border-radius:12px;
  font-family:'Manrope',sans-serif;
  font-size:13px;
  font-weight:700;
  letter-spacing:0.5px;
  text-transform:uppercase;
  cursor:pointer;
  transition:all .25s ease;
  border:none;
  white-space:nowrap;
}
.service-details-modal .btn-modal svg{
  width:16px;
  height:16px;
}
.service-details-modal .btn-modal i{
  font-size:16px;
}
.service-details-modal .btn-modal-primary{
  width:auto;
  min-width:260px;
  max-width:55%;
  background:linear-gradient(135deg, #38BDF8 0%, #0EA5E9 100%);
  color:#0B1220;
  box-shadow:
    0 4px 20px rgba(56,189,248,.35),
    0 0 0 1px rgba(56,189,248,.2),
    inset 0 1px 0 rgba(255,255,255,.2);
  font-weight:800;
}
.service-details-modal .btn-modal-primary:hover{
  background:linear-gradient(135deg, #7DD3FC 0%, #38BDF8 100%);
  transform:translateY(-2px);
  box-shadow:
    0 8px 30px rgba(56,189,248,.5),
    0 0 0 1px rgba(56,189,248,.3),
    inset 0 1px 0 rgba(255,255,255,.3);
}

/* RESPONSIVE - TABLET */
@media (max-width:900px){
  .service-details-modal .modal-content{
    max-width:90%;
  }
  .service-details-modal .modal-grid{
    grid-template-columns:38% 62%;
  }
  .service-details-modal .modal-right{
    padding:32px 28px 20px 28px;
  }
  .service-details-modal .modal-header h2{
    font-size:21px;
  }
  .service-details-modal .modal-trust-item{
    padding:8px 4px;
    min-height:56px;
  }
  .service-details-modal .modal-trust-label{
    font-size:9.5px;
  }
  .service-details-modal .modal-trust-icon{
    width:22px;
    height:22px;
  }
}

/* RESPONSIVE - TABLET SMALL / MOBILE LANDSCAPE */
@media (max-width:768px){
  .service-details-modal{
    padding:16px;
    align-items:flex-start;
  }
  .service-details-modal .modal-content{
    max-height:95vh;
    margin-top:8px;
  }
  .service-details-modal .modal-grid{
    grid-template-columns:1fr;
    grid-template-rows:240px 1fr;
  }
  .service-details-modal .modal-left{
    border-right:none;
    border-bottom:1px solid rgba(56,189,248,.1);
  }
  .service-details-modal .modal-image-container{
    height:100%;
    min-height:240px;
  }
  .service-details-modal .modal-image{
    min-height:240px;
  }
  .service-details-modal .modal-trust-overlay{
    bottom:10px;
    left:10px;
    right:10px;
    gap:6px;
  }
  .service-details-modal .modal-trust-item{
    padding:8px 4px;
    min-height:54px;
  }
  .service-details-modal .modal-trust-icon{
    width:22px;
    height:22px;
    font-size:11px;
  }
  .service-details-modal .modal-trust-icon i{
    font-size:11px;
  }
  .service-details-modal .modal-trust-label{
    font-size:9.5px;
  }
  .service-details-modal .modal-right{
    padding:24px 24px 16px 24px;
  }
  .service-details-modal .modal-header h2{
    font-size:20px;
  }
  .service-details-modal .modal-info-cards{
    grid-template-columns:repeat(3,1fr);
    gap:8px;
  }
  .service-details-modal .modal-info-card{
    padding:12px 6px;
  }
  .service-details-modal .modal-info-icon{
    width:32px;
    height:32px;
  }
  .service-details-modal .modal-info-value{
    font-size:13px;
  }
  .service-details-modal .modal-benefits-list{
    grid-template-columns:1fr;
  }
  .service-details-modal .modal-includes-list{
    grid-template-columns:1fr;
  }
  .service-details-modal .btn-modal{
    padding:12px 16px;
    font-size:12px;
  }
  .service-details-modal .btn-modal-primary{
    min-width:auto;
    max-width:100%;
    width:100%;
  }
}

/* RESPONSIVE - MOBILE SMALL */
@media (max-width:480px){
  .service-details-modal{
    padding:8px;
  }
  .service-details-modal .modal-content{
    border-radius:18px;
    max-height:96vh;
  }
  .service-details-modal .modal-grid{
    grid-template-rows:200px 1fr;
  }
  .service-details-modal .modal-image-container{
    min-height:200px;
  }
  .service-details-modal .modal-image{
    min-height:200px;
  }
  .service-details-modal .modal-badge{
    top:12px;
    left:12px;
    padding:6px 12px;
  }
  .service-details-modal .modal-badge-text{
    font-size:11px;
  }
  .service-details-modal .modal-trust-overlay{
    bottom:8px;
    left:8px;
    right:8px;
    gap:4px;
  }
  .service-details-modal .modal-trust-item{
    padding:6px 2px;
    min-height:48px;
  }
  .service-details-modal .modal-trust-icon{
    width:20px;
    height:20px;
    margin-bottom:3px;
  }
  .service-details-modal .modal-trust-icon i{
    font-size:10px;
  }
  .service-details-modal .modal-trust-label{
    font-size:8.5px;
    letter-spacing:0.2px;
  }
  .service-details-modal .modal-close{
    top:10px;
    right:10px;
    width:38px;
    height:38px;
  }
  .service-details-modal .modal-close svg{
    width:16px;
    height:16px;
  }
  .service-details-modal .modal-right{
    padding:20px 18px 14px 18px;
  }
  .service-details-modal .modal-header{
    gap:12px;
    margin-bottom:14px;
  }
  .service-details-modal .modal-icon{
    width:44px;
    height:44px;
  }
  .service-details-modal .modal-icon svg{
    width:22px;
    height:22px;
  }
  .service-details-modal .modal-header h2{
    font-size:18px;
  }
  .service-details-modal .modal-description{
    font-size:13.5px;
    margin-bottom:18px;
  }
  .service-details-modal .modal-info-cards{
    margin-bottom:20px;
  }
}
/* PREMIUM MODAL */
.modal-overlay{
  display:none;
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,.8);
  backdrop-filter:blur(8px);
  z-index:1000;
  align-items:center;
  justify-content:center;
  padding:20px;
}
.modal-overlay.active{
  display:flex;
}
.modal-container{
  background:rgba(8,10,20,.98) url('img/Fondo_Servicios.webp');
  background-size:cover;
  background-position:center;
  border:1px solid rgba(212,175,55,.20);
  border-radius:24px;
  box-shadow:0 20px 80px rgba(0,0,0,.60);
  max-width:700px;
  width:100%;
  max-height:90vh;
  overflow-y:auto;
  position:relative;
  opacity:0;
  transform:translateY(20px);
  transition:opacity .3s ease, transform .3s ease;
}
.modal-overlay.active .modal-container{
  opacity:1;
  transform:translateY(0);
}
.modal-close{
  position:absolute;
  top:20px;
  right:20px;
  background:transparent;
  border:none;
  color:rgba(255,255,255,.6);
  font-size:24px;
  cursor:pointer;
  width:40px;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  transition:all .3s ease;
  z-index:10;
}
.modal-close:hover{
  background:rgba(29,123,255,.2);
  color:var(--blue);
}
.modal-content{
  padding:40px;
  display:flex;
  flex-direction:row;
  gap:30px;
}
.modal-image{
  width:250px;
  height:300px;
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(212,175,55,.3);
  box-shadow:0 0 20px rgba(212,175,55,.15);
  flex-shrink:0;
}
.modal-image img{
  width:100%;
  height:100%;
  object-fit:contain;
  background:rgba(0,0,0,.5);
}
.modal-text-content{
  flex:1;
  display:flex;
  flex-direction:column;
}
.modal-title{
  font-size:28px;
  color:#FFFFFF;
  text-align:center;
  margin-bottom:16px;
  letter-spacing:-1px;
}
.modal-description{
  font-size:16px;
  color:#FFFFFF;
  text-align:center;
  line-height:1.7;
  margin-bottom:24px;
}
.modal-section-title{
  font-size:18px;
  color:var(--blue);
  text-transform:uppercase;
  letter-spacing:1px;
  margin-bottom:16px;
  margin-top:24px;
}
.modal-benefits{
  list-style:none;
  padding:0;
  margin:0;
}
.modal-benefits li{
  color:#FFFFFF;
  font-size:15px;
  padding:8px 0;
  padding-left:24px;
  position:relative;
  line-height:1.6;
}
.modal-benefits li::before{
  content:'✓';
  position:absolute;
  left:0;
  color:var(--blue);
  font-weight:bold;
}
.modal-process{
  color:#FFFFFF;
  font-size:15px;
  line-height:1.7;
}
.modal-cta{
  display:inline-block;
  width:auto;
  padding:16px 32px;
  background:var(--blue);
  color:var(--ink);
  text-align:center;
  text-transform:uppercase;
  letter-spacing:0.5px;
  font-weight:600;
  border:none;
  border-radius:8px;
  cursor:pointer;
  transition:all .3s ease;
  margin-top:32px;
  margin-left:auto;
  text-decoration:none;
  font-size:16px;
}
.modal-cta:hover{
  background:#E5C158;
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(212,175,55,.3);
}
body.modal-open{
  overflow:hidden;
}

@media (max-width:1024px){
  .services-layout{
    grid-template-columns:1fr;
    gap:40px;
  }
  .services-left{
    position:static;
  }
  .services-grid{
    grid-template-columns:repeat(2,1fr);
  }
}
@media (max-width:768px){
  .services-grid{
    grid-template-columns:1fr;
    gap:20px;
  }
  .service-card{
    width:100%;
    height:auto;
  }
  .service-image{
    height:150px;
  }
  .service-icon-wrapper{
    top:150px;
  }
  .service-hexagon{
    width:60px;
    height:60px;
  }
  .service-hexagon svg{
    width:28px;
    height:28px;
  }
  .service-body{
    padding:40px 20px 20px 20px;
  }
  .service-features{
    grid-template-columns:repeat(3,1fr);
    gap:6px;
  }
  .service-feature-text{
    font-size:10px;
  }
}

/* SERVICE MODAL */
.service-modal{
  display:none;
  position:fixed;
  inset:0;
  z-index:1000;
  align-items:center;
  justify-content:center;
  padding:20px;
}
.service-modal.active{
  display:flex;
}
.modal-overlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.8);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

/* Quote Modal Styles */
#quoteModal{
  position:fixed;
  display:none;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(5,8,15,.78);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  z-index:999;
  align-items:center;
  justify-content:center;
  padding:20px;
}
#quoteModal.active{
  display:flex;
}
#quoteModal .modal-box,
#quoteModal.modal-box,
.modal-box{
  background:linear-gradient(160deg, #101E2C 0%, #0D1A28 100%);
  border:1px solid rgba(255,255,255,.08);
  border-radius:20px;
  width:100%;
  max-width:540px;
  max-height:90vh;
  overflow-y:auto;
  box-shadow:0 30px 80px rgba(0,0,0,.6), 0 0 60px rgba(33,150,243,.15);
  animation:slideUpModal .35s cubic-bezier(.16,1,.3,1);
}
@keyframes slideUpModal{
  from{opacity:0;transform:translateY(20px) scale(.97);}
  to{opacity:1;transform:translateY(0) scale(1);}
}
#quoteModal .modal-header,
.modal-header{
  padding:22px 26px;
  border-bottom:1px solid rgba(255,255,255,.08);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  position:sticky;
  top:0;
  background:rgba(16,30,44,.95);
  backdrop-filter:blur(10px);
  z-index:2;
}
#quoteModal .modal-title,
.modal-title{
  font-size:18px;
  font-weight:700;
  color:#fff;
}
#quoteModal .modal-title i,
.modal-title i{
  color:#25A7FF;
  margin-right:8px;
}
#quoteModal .modal-close-btn,
.modal-close-btn{
  width:38px;
  height:38px;
  border-radius:10px;
  background:rgba(255,255,255,.06);
  color:#A3B0C3;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:all .25s ease;
  font-size:15px;
  border:none;
  cursor:pointer;
}
#quoteModal .modal-close-btn:hover,
.modal-close-btn:hover{
  background:rgba(239,68,68,.15);
  color:#EF4444;
}
#quoteModal .modal-body,
.modal-body{
  padding:24px 26px;
}
#quoteModal .modal-place-info,
.modal-place-info{
  background:rgba(33,150,243,.08);
  border:1px solid rgba(33,150,243,.25);
  border-radius:14px;
  padding:14px 16px;
  margin-bottom:22px;
  display:flex;
  align-items:center;
  gap:12px;
}
#quoteModal .modal-place-info i,
.modal-place-info i{
  color:#25A7FF;
  font-size:18px;
}
#quoteModal .modal-place-info strong,
.modal-place-info strong{
  color:#fff;
  font-weight:600;
}
.form-group{
  margin-bottom:16px;
}
.form-label{
  display:block;
  font-size:12px;
  font-weight:500;
  color:#A3B0C3;
  margin-bottom:6px;
  text-transform:uppercase;
  letter-spacing:.5px;
}
.form-control{
  width:100%;
  padding:13px 14px;
  background:rgba(8,18,32,.8);
  border:1px solid rgba(255,255,255,.08);
  border-radius:10px;
  color:#fff;
  font-family:'Inter',sans-serif;
  font-size:14px;
  transition:all .25s ease;
}
.form-control:focus{
  outline:none;
  border-color:#2196F3;
  box-shadow:0 0 0 3px rgba(33,150,243,.15);
}
.form-control::placeholder{
  color:rgba(255,255,255,.4);
}
select.form-control{
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23A3B0C3' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-size:10px;
  padding-right:36px;
}
input[type="date"].form-control,
input[type="time"].form-control{
  min-height:46px;
  color-scheme:dark;
  -webkit-appearance:none;
  appearance:none;
  display:flex;
  align-items:center;
}
input[type="date"].form-control::-webkit-calendar-picker-indicator,
input[type="time"].form-control::-webkit-calendar-picker-indicator{
  filter:invert(1) opacity(.7);
  cursor:pointer;
  margin-left:6px;
}
textarea.form-control{
  min-height:90px;
  resize:vertical;
  font-family:'Inter',sans-serif;
}
.btn-submit{
  width:100%;
  padding:14px;
  margin-top:8px;
  background:linear-gradient(135deg, #2196F3, #0D6EFD);
  color:#fff;
  border-radius:10px;
  font-size:14px;
  font-weight:600;
  letter-spacing:.5px;
  text-transform:uppercase;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  transition:all .3s ease;
  border:none;
  cursor:pointer;
}
.btn-submit:hover{
  background:linear-gradient(135deg, #168BE6, #2196F3);
  box-shadow:0 6px 20px rgba(33,150,243,.5);
}
.phone-input-wrapper{
  position:relative;
  display:flex;
  align-items:stretch;
  width:100%;
}
.country-selector{
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 14px;
  background:rgba(15,23,42,.5);
  border:1px solid rgba(56,189,248,.2);
  border-radius:8px 0 0 8px;
  cursor:pointer;
  transition:all .3s ease;
  flex-shrink:0;
  min-width:110px;
}
.country-selector:hover{
  background:rgba(56,189,248,.1);
}
.country-selector .flag{
  font-size:18px;
}
.country-selector .dial-code{
  color:rgba(255,255,255,.7);
  font-family:'Inter',sans-serif;
  font-size:14px;
  font-weight:600;
}
.country-selector .arrow{
  font-size:10px;
  color:rgba(56,189,248,.7);
  transition:transform .3s ease;
}
.country-selector.open .arrow{
  transform:rotate(180deg);
}
.phone-input-wrapper input[type="tel"]{
  flex:1;
  padding:14px 16px;
  background:rgba(15,23,42,.5);
  border:1px solid rgba(56,189,248,.2);
  border-left:none;
  border-radius:0 8px 8px 0;
  color:#fff;
  font-family:'Inter',sans-serif;
  font-size:14px;
  transition:all .3s ease;
  outline:none;
}
.phone-input-wrapper input::placeholder{
  color:rgba(255,255,255,.4);
}
.phone-input-wrapper input:focus{
  border-color:rgba(56,189,248,.6);
  background:rgba(15,23,42,.7);
  box-shadow:0 0 20px rgba(56,189,248,.2);
}
.country-dropdown{
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  width:320px;
  background:rgba(15,23,42,.98);
  border:1px solid rgba(56,189,248,.3);
  border-radius:12px;
  box-shadow:0 10px 40px rgba(0,0,0,.6), 0 0 20px rgba(56,189,248,.1);
  z-index:100;
  display:none;
}
.country-dropdown.open{
  display:block;
}
.country-dropdown .search-box{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px;
  border-bottom:1px solid rgba(56,189,248,.1);
  position:relative;
}
.country-dropdown .search-box i{
  position:absolute;
  left:22px;
  top:50%;
  transform:translateY(-50%);
  color:rgba(56,189,248,.5);
  font-size:14px;
  pointer-events:none;
}
.country-dropdown .search-box input{
  flex:1;
  background:rgba(15,23,42,.8);
  border:1px solid rgba(56,189,248,.3);
  border-radius:6px;
  color:#fff;
  font-family:'Inter',sans-serif;
  font-size:13px;
  padding:8px 12px 8px 36px;
  outline:none;
}
.country-dropdown .search-box input::placeholder{
  color:rgba(255,255,255,.4);
}
.country-dropdown .search-box input:focus{
  border-color:rgba(56,189,248,.6);
}
.country-list{
  max-height:250px;
  overflow-y:auto;
}
.country-list::-webkit-scrollbar{
  width:6px;
}
.country-list::-webkit-scrollbar-track{
  background:rgba(15,23,42,.5);
  border-radius:3px;
}
.country-list::-webkit-scrollbar-thumb{
  background:rgba(56,189,248,.3);
  border-radius:3px;
}
.country-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  border-bottom:1px solid rgba(56,189,248,.1);
  cursor:pointer;
  transition:all .15s ease;
}
.country-item:hover{
  background:rgba(56,189,248,.15);
  padding-left:18px;
}
.country-item:last-child{
  border-bottom:none;
}
.country-flag{
  font-size:18px;
}
.country-name{
  flex:1;
  color:rgba(255,255,255,.8);
  font-family:'Inter',sans-serif;
  font-size:13px;
  font-weight:500;
}
.country-dial{
  color:rgba(56,189,248,.7);
  font-family:'Inter',sans-serif;
  font-size:13px;
  font-weight:600;
}
.modal-content{
  position:relative;
  background:rgba(13,17,23,.95);
  border:1px solid rgba(255,255,255,.1);
  border-radius:24px;
  padding:40px;
  max-width:600px;
  width:100%;
  max-height:90vh;
  overflow-y:auto;
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  box-shadow:0 20px 80px rgba(0,0,0,.5);
  animation:modalFadeIn 0.3s ease;
}
@keyframes modalFadeIn{
  from{
    opacity:0;
    transform:scale(0.95) translateY(20px);
  }
  to{
    opacity:1;
    transform:scale(1) translateY(0);
  }
}
.modal-close{
  position:absolute;
  top:20px;
  right:20px;
  width:40px;
  height:40px;
  border-radius:50%;
  background:rgba(255,255,255,.1);
  border:none;
  color:var(--paper);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:all .3s ease;
}
.modal-close:hover{
  background:rgba(255,255,255,.2);
  transform:rotate(90deg);
}
.modal-close svg{
  width:20px;
  height:20px;
}
.modal-header{
  display:flex;
  align-items:center;
  gap:20px;
  margin-bottom:30px;
}
.modal-icon{
  width:60px;
  height:60px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:24px;
}
.modal-icon svg{
  width:30px;
  height:30px;
}
.modal-header h2{
  font-family:var(--display);
  font-size:24px;
  font-weight:800;
  color:var(--paper);
  text-shadow:0 2px 20px rgba(0,0,0,.3);
  letter-spacing:-1px;
  margin:0;
}
.modal-body p{
  font-size:15px;
  line-height:1.7;
  color:var(--paper-dim);
  margin-bottom:24px;
}
.modal-benefits{
  list-style:none;
  padding:0;
  margin:0 0 30px 0;
}
.modal-benefits li{
  color:var(--paper-dim);
  font-size:14px;
  padding:10px 0;
  padding-left:30px;
  position:relative;
  line-height:1.5;
}
.modal-benefits li::before{
  content:'';
  position:absolute;
  left:0;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--blue);
  box-shadow:0 0 10px var(--blue);
  top:14px;
}
.modal-footer{
  display:flex;
  justify-content:center;
  padding-top:20px;
  border-top:1px solid rgba(255,255,255,.1);
}
.modal-footer .btn{
  width:100%;
  max-width:300px;
  justify-content:center;
}

/* PORTFOLIO */
.portfolio-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}
@media (max-width:880px){
  .portfolio-grid{
    grid-template-columns:repeat(2,1fr);
  }
}
@media (max-width:560px){
  .portfolio-grid{
    grid-template-columns:1fr;
  }
}
.portfolio-card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
  transition:border-color .2s,transform .2s;
}
.portfolio-card:hover{
  border-color:var(--blue);
  transform:translateY(-4px);
}
.portfolio-visual{
  aspect-ratio:16/10;background:var(--ink);
  display:flex;align-items:center;justify-content:center;
  position:relative;
}
.portfolio-visual::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg, rgba(212,175,55,.1), transparent 60%);
}
.portfolio-badge{
  position:absolute;top:12px;left:12px;
  background:var(--purple);color:var(--paper);
  font-family:var(--display);font-size:11px;font-weight:400;
  padding:4px 10px;border-radius:4px;
  text-transform:uppercase;
  letter-spacing:-2px;
}
.portfolio-content{padding:20px;}
.portfolio-business{
  font-family:var(--display);font-size:12px;color:var(--blue);
  margin-bottom:8px;display:flex;align-items:center;gap:6px;
  text-transform:uppercase;
  letter-spacing:-2px;
}
.portfolio-business::before{content:'🏪';}
.portfolio-card h3{font-size:14px;margin-bottom:8px;}
.portfolio-result{
  font-size:13px;color:var(--slate);
  margin-bottom:12px;
}
.portfolio-metric{
  display:flex;align-items:center;gap:8px;
  font-family:var(--display);font-size:12px;color:var(--purple);
  text-transform:uppercase;
  letter-spacing:-2px;
}
.portfolio-metric::before{content:'📈';}

/* RESULTS */
.results-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden;}
@media (max-width:880px){.results-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.results-grid{grid-template-columns:1fr;}}
.result-card{background:var(--panel);padding:32px 24px;text-align:center;}
.result-card .number{
  font-family:var(--display);font-size:32px;font-weight:400;
  color:var(--blue);margin-bottom:8px;
  letter-spacing:-2px;
  line-height:0.9;
}
.result-card .label{font-size:14px;color:var(--paper);margin-bottom:4px;}
.result-card .sub{font-size:12px;color:var(--slate);}

/* SOBRE NOSOTROS - Premium section */
#sobre-nosotros{
  position:relative;
  padding:110px 0 120px;
  background:
    radial-gradient(1200px 600px at 85% 20%, rgba(37,167,255,.10), transparent 60%),
    radial-gradient(900px 500px at 10% 80%, rgba(56,189,248,.08), transparent 60%),
    linear-gradient(180deg, #06101E 0%, #08172A 50%, #06101E 100%);
  overflow:hidden;
}
#sobre-nosotros::before{
  content:'';
  position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg, transparent, rgba(56,189,248,.4), transparent);
}
#sobre-nosotros::after{
  content:'';
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(56,189,248,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56,189,248,.04) 1px, transparent 1px);
  background-size:60px 60px;
  mask-image:radial-gradient(ellipse at center, #000 30%, transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse at center, #000 30%, transparent 75%);
  pointer-events:none;
  opacity:.6;
}
#sobre-nosotros .wrap{
  position:relative;
  z-index:2;
  max-width:1200px;
  margin:0 auto;
  padding:0 28px;
}
.sn-grid{
  display:grid;
  grid-template-columns:1.05fr 1fr;
  gap:64px;
  align-items:center;
}
.sn-content{max-width:560px;}
.sn-badge{
  display:inline-flex;align-items:center;gap:8px;
  font-family:'Inter',sans-serif;font-size:12px;font-weight:600;
  color:#A6E1FF;text-transform:uppercase;letter-spacing:2.5px;
  background:rgba(56,189,248,.08);
  border:1px solid rgba(56,189,248,.3);
  padding:8px 16px;border-radius:100px;margin-bottom:22px;
  box-shadow:0 0 0 1px rgba(56,189,248,.05) inset, 0 6px 20px rgba(37,167,255,.08);
}
.sn-badge i{color:#7DD3FC;font-size:11px;}
.sn-title{
  font-family:'Manrope',sans-serif;
  font-size:clamp(30px,4.2vw,48px);
  font-weight:800;line-height:1.1;color:#fff;
  letter-spacing:-1.2px;margin-bottom:22px;
}
.sn-accent{
  background:linear-gradient(135deg,#7DD3FC 0%, #38BDF8 50%, #25A7FF 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  position:relative;
}
.sn-lead{
  font-family:'Inter',sans-serif;
  font-size:16.5px;color:rgba(255,255,255,.78);
  line-height:1.75;margin-bottom:30px;
}
.sn-buttons{
  display:flex;gap:14px;flex-wrap:wrap;margin-bottom:42px;
}
.sn-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 24px;border-radius:12px;
  font-family:'Manrope',sans-serif;font-size:14.5px;font-weight:700;
  text-decoration:none;cursor:pointer;transition:all .3s cubic-bezier(.2,.9,.3,1.2);
  letter-spacing:.2px;
}
.sn-btn-primary{
  background:linear-gradient(135deg,#38BDF8 0%, #25A7FF 100%);
  color:#06101E;
  box-shadow:0 10px 30px rgba(37,167,255,.35), 0 0 0 1px rgba(255,255,255,.08) inset;
  position:relative;
}
.sn-btn-primary::after{
  content:'';position:absolute;inset:-2px;border-radius:14px;
  background:linear-gradient(135deg, rgba(56,189,248,.6), rgba(37,167,255,.6));
  filter:blur(14px);opacity:.55;z-index:-1;transition:opacity .3s ease;
}
.sn-btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 40px rgba(37,167,255,.5), 0 0 0 1px rgba(255,255,255,.12) inset;
}
.sn-btn-primary:hover::after{opacity:.9;}
.sn-btn-ghost{
  background:rgba(255,255,255,.02);
  color:#E5F4FF;
  border:1px solid rgba(125,211,252,.4);
  box-shadow:0 0 0 1px rgba(56,189,248,.05) inset;
}
.sn-btn-ghost:hover{
  background:rgba(56,189,248,.1);
  border-color:rgba(125,211,252,.7);
  color:#fff;
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(37,167,255,.2);
}
.sn-btn i{font-size:14px;}

/* Stats cards */
.sn-stats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
}
.sn-stat{
  position:relative;
  background:linear-gradient(160deg, rgba(15,30,52,.85) 0%, rgba(10,20,38,.9) 100%);
  border:1px solid rgba(56,189,248,.18);
  border-radius:16px;padding:20px 16px;text-align:center;
  transition:all .3s ease;overflow:hidden;
}
.sn-stat::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(400px 200px at 50% 0%, rgba(56,189,248,.12), transparent 60%);
  opacity:0;transition:opacity .3s ease;pointer-events:none;
}
.sn-stat:hover{
  border-color:rgba(56,189,248,.4);
  transform:translateY(-3px);
  box-shadow:0 12px 30px rgba(0,0,0,.35), 0 0 0 1px rgba(56,189,248,.1) inset;
}
.sn-stat:hover::before{opacity:1;}
.sn-stat-icon{
  width:38px;height:38px;border-radius:10px;margin:0 auto 10px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(56,189,248,.12);
  border:1px solid rgba(56,189,248,.25);
  color:#7DD3FC;font-size:16px;
}
.sn-stat-num{
  font-family:'Manrope',sans-serif;
  font-size:28px;font-weight:800;line-height:1;
  background:linear-gradient(135deg,#FFFFFF 0%, #7DD3FC 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  margin-bottom:6px;
}
.sn-stat-label{
  font-family:'Inter',sans-serif;font-size:11.5px;font-weight:600;
  color:rgba(255,255,255,.65);text-transform:uppercase;letter-spacing:1px;
}

/* Right column visual */
.sn-visual{
  position:relative;
  display:flex;justify-content:center;align-items:center;
}
.sn-visual-frame{
  position:relative;
  width:100%;max-width:520px;aspect-ratio:4/5;
  border-radius:28px;overflow:hidden;
  border:1px solid rgba(56,189,248,.25);
  background:#0B1726;
  box-shadow:
    0 30px 80px rgba(0,0,0,.55),
    0 0 0 1px rgba(56,189,248,.08) inset,
    0 0 60px rgba(37,167,255,.15);
  isolation:isolate;
}
.sn-visual-frame img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(1.05) contrast(1.02);
}
.sn-visual-frame::after{
  content:'';position:absolute;inset:0;
  background:
    linear-gradient(180deg, rgba(8,18,32,.0) 50%, rgba(8,18,32,.55) 100%),
    linear-gradient(135deg, rgba(37,167,255,.08), transparent 40%);
  pointer-events:none;
}
.sn-visual-glow{
  position:absolute;inset:-2px;border-radius:30px;
  background:linear-gradient(135deg, rgba(56,189,248,.6), rgba(37,167,255,.2) 50%, transparent 70%);
  filter:blur(20px);opacity:.5;z-index:-1;pointer-events:none;
  animation:snGlowPulse 6s ease-in-out infinite;
}
@keyframes snGlowPulse{
  0%,100%{opacity:.4;}
  50%{opacity:.65;}
}
.sn-visual-badge{
  position:absolute;left:18px;bottom:18px;z-index:2;
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 16px;border-radius:100px;
  background:rgba(8,18,32,.7);
  border:1px solid rgba(56,189,248,.4);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  font-family:'Inter',sans-serif;font-size:12.5px;font-weight:600;
  color:#E5F4FF;letter-spacing:.5px;
  box-shadow:0 8px 24px rgba(0,0,0,.35);
}
.sn-visual-badge i{color:#7DD3FC;font-size:13px;}

/* Decorative particles */
.sn-particles{
  position:absolute;inset:0;
  pointer-events:none;
  z-index:1;
}
.sn-particles span{
  position:absolute;display:block;
  width:6px;height:6px;border-radius:50%;
  background:radial-gradient(circle, rgba(125,211,252,.95), rgba(56,189,248,.0) 70%);
  box-shadow:0 0 12px rgba(56,189,248,.6);
  opacity:.6;
  animation:snFloat 9s ease-in-out infinite;
}
.sn-particles span:nth-child(1){top:8%;left:15%;animation-delay:0s;}
.sn-particles span:nth-child(2){top:18%;right:10%;width:4px;height:4px;animation-delay:1.2s;}
.sn-particles span:nth-child(3){top:40%;left:5%;width:5px;height:5px;animation-delay:2.4s;}
.sn-particles span:nth-child(4){top:55%;right:18%;width:7px;height:7px;animation-delay:3.6s;}
.sn-particles span:nth-child(5){bottom:22%;left:20%;animation-delay:4.8s;}
.sn-particles span:nth-child(6){bottom:10%;right:25%;width:5px;height:5px;animation-delay:6s;}
.sn-particles span:nth-child(7){top:30%;right:40%;width:4px;height:4px;animation-delay:7.2s;}
.sn-particles span:nth-child(8){bottom:35%;left:35%;animation-delay:8.4s;}
@keyframes snFloat{
  0%,100%{transform:translateY(0) scale(1);opacity:.5;}
  50%{transform:translateY(-18px) scale(1.15);opacity:.95;}
}

/* Responsive */
@media (max-width:1024px){
  #sobre-nosotros{padding:90px 0 100px;}
  .sn-grid{grid-template-columns:1fr;gap:48px;}
  .sn-visual-frame{max-width:460px;margin:0 auto;}
  .sn-content{max-width:680px;}
}
@media (max-width:768px){
  #sobre-nosotros{padding:72px 0 80px;}
  .sn-grid{gap:40px;}
  .sn-buttons{flex-direction:column;align-items:stretch;}
  .sn-btn{width:100%;}
  .sn-stats{grid-template-columns:1fr;gap:12px;}
  .sn-stat{display:flex;align-items:center;gap:16px;text-align:left;padding:16px 18px;}
  .sn-stat-icon{margin:0;flex-shrink:0;}
  .sn-stat-num{font-size:24px;margin-bottom:0;}
  .sn-stat-label{font-size:11px;}
  .sn-visual-frame{border-radius:22px;}
  .sn-particles span:nth-child(n+6){display:none;}
}
@media (max-width:480px){
  #sobre-nosotros{padding:60px 0 70px;}
  #sobre-nosotros .wrap{padding:0 18px;}
  .sn-title{letter-spacing:-1px;}
  .sn-lead{font-size:15.5px;}
  .sn-visual-frame{aspect-ratio:1/1;border-radius:20px;}
  .sn-visual-badge{font-size:11.5px;padding:8px 14px;}
}

/* COMO FUNCIONA - TIMELINE */
#como-funciona{
  position:relative;
  background-image:url('img/Fondo_Como Funciona.webp');
  background-size:cover;
  background-position:center bottom;
  background-attachment:fixed;
  background-repeat:no-repeat;
  padding:80px 0 100px 0;
}
#como-funciona::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(11,18,32,.85) 0%, rgba(11,18,32,.65) 100%);
}
#como-funciona .wrap{
  position:relative;
  z-index:1;
}
#como-funciona .section-head h2{
  font-family:'Manrope',sans-serif;
  font-size:42px;
  font-weight:700;
  color:#FFFFFF;
  margin-bottom:12px;
  letter-spacing:-1px;
}
#como-funciona .section-head h2 .accent{
  color:#38BDF8;
  text-shadow:0 0 20px rgba(56,189,248,.3);
}
#como-funciona .section-head p{
  font-family:'Inter',sans-serif;
  font-size:16px;
  font-weight:400;
  color:#C9D1D9;
  line-height:1.6;
}
.process-timeline{
  display:flex;
  flex-direction:column;
  gap:24px;
  margin-top:40px;
  max-width:900px;
  margin-left:auto;
  margin-right:auto;
}
.timeline-step{
  display:flex;
  gap:24px;
  position:relative;
  background:rgba(15,23,42,.6);
  border:1px solid rgba(56,189,248,.2);
  border-radius:16px;
  padding:24px 28px;
  transition:all .3s ease;
  backdrop-filter:blur(10px);
  align-items:flex-start;
}
.timeline-step:hover{
  background:rgba(15,23,42,.8);
  border-color:rgba(56,189,248,.4);
  box-shadow:0 8px 30px rgba(56,189,248,.15), 0 0 0 1px rgba(56,189,248,.1);
  transform:translateY(-2px);
}
.timeline-step:not(:last-child)::after{
  content:'';
  position:absolute;
  left:52px;
  top:76px;
  bottom:-24px;
  width:2px;
  background:linear-gradient(180deg, rgba(56,189,248,.6) 0%, rgba(56,189,248,.2) 100%);
  box-shadow:0 0 8px rgba(56,189,248,.4);
}
.timeline-number{
  flex-shrink:0;
  width:56px;
  height:56px;
  border-radius:50%;
  background:rgba(11,18,32,.8);
  border:2px solid #38BDF8;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:'Manrope',sans-serif;
  font-size:18px;
  font-weight:700;
  color:#38BDF8;
  position:relative;
  z-index:2;
  box-shadow:0 0 15px rgba(56,189,248,.4), inset 0 0 15px rgba(56,189,248,.1);
  text-shadow:0 0 10px rgba(56,189,248,.5);
}
.timeline-number::before{
  content:'';
  position:absolute;
  inset:-4px;
  border-radius:50%;
  border:1px solid rgba(56,189,248,.3);
  opacity:0;
  transition:opacity .3s ease;
}
.timeline-step:hover .timeline-number::before{
  opacity:1;
}
.timeline-icon{
  flex-shrink:0;
  width:32px;
  height:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#38BDF8;
  filter:drop-shadow(0 0 4px rgba(56,189,248,.3));
  transition:all .3s ease;
  margin-top:12px;
}
.timeline-step:hover .timeline-icon{
  filter:drop-shadow(0 0 8px rgba(56,189,248,.5));
  transform:translateY(-2px);
}
.timeline-icon svg{
  width:24px;
  height:24px;
  stroke-width:2;
}
.timeline-icon i{
  font-size:24px;
}
.timeline-content{
  flex:1;
  padding-top:6px;
}
.timeline-content h3{
  font-family:'Manrope',sans-serif;
  font-size:20px;
  font-weight:600;
  color:#FFFFFF;
  margin-bottom:8px;
  letter-spacing:-0.5px;
}
.timeline-content p{
  font-family:'Inter',sans-serif;
  font-size:15px;
  font-weight:400;
  color:#C9D1D9;
  line-height:1.6;
}

@media (max-width:768px){
  #como-funciona{
    padding:60px 0 80px 0;
  }
  #como-funciona .section-head h2{
    font-size:32px;
  }
  #como-funciona .section-head p{
    font-size:14px;
  }
  .process-timeline{
    gap:20px;
    margin-top:35px;
  }
  .timeline-step{
    padding:20px 24px;
    gap:20px;
  }
  .timeline-step:not(:last-child)::after{
    left:48px;
    top:68px;
    bottom:-20px;
  }
  .timeline-number{
    width:48px;
    height:48px;
    font-size:16px;
  }
  .timeline-icon{
    width:28px;
    height:28px;
    margin-top:10px;
  }
  .timeline-icon svg{
    width:20px;
    height:20px;
  }
  .timeline-icon i{
    font-size:20px;
  }
  .timeline-content h3{
    font-size:18px;
  }
  .timeline-content p{
    font-size:14px;
  }
}

/* ENGAGEMENT */
@media (max-width:880px){.engage-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.engage-grid{grid-template-columns:1fr;}}
.engage-card{background:var(--panel);padding:28px 24px;}
.engage-card h3{font-size:14px;margin-bottom:10px;color:var(--gold);}

/* POR QUÉ ELEGIRNOS - PREMIUM REDESIGN */
#por-que-elegirnos{
  position:relative;
  background-image:url('img/Fondo_Porque Elegirnos.webp');
  background-size:cover;
  background-position:center;
  background-attachment:fixed;
  background-repeat:no-repeat;
  padding:100px 0;
}
#por-que-elegirnos::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(11,18,32,.85) 0%, rgba(11,18,32,.75) 100%);
}
#por-que-elegirnos .wrap{
  position:relative;
  z-index:1;
}
#por-que-elegirnos .section-head{
  position:relative;
  z-index:1;
  margin-bottom:60px;
  max-width:900px;
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}
#por-que-elegirnos h2{
  font-family:'Manrope',sans-serif;
  font-size:42px;
  font-weight:700;
  color:#FFFFFF;
  margin-bottom:12px;
  letter-spacing:-1px;
  -webkit-text-stroke:1px rgba(0,0,0,.3);
  text-shadow:0 0 20px rgba(56,189,248,.3);
}
#por-que-elegirnos h2 .accent{
  color:#38BDF8;
}
#por-que-elegirnos p{
  font-family:'Inter',sans-serif;
  font-size:16px;
  font-weight:400;
  color:#C9D1D9;
  line-height:1.6;
  text-align:center;
  max-width:600px;
  margin:0 auto;
}
.engage-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
  position:relative;
  z-index:1;
  max-width:1200px;
  margin:0 auto;
}
.engage-card{
  background:rgba(15,23,42,.6);
  border:1px solid rgba(56,189,248,.2);
  border-radius:16px;
  padding:40px 28px;
  text-align:center;
  transition:all .3s ease;
  backdrop-filter:blur(10px);
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.engage-card:hover{
  background:rgba(15,23,42,.8);
  border-color:rgba(56,189,248,.4);
  box-shadow:0 8px 30px rgba(56,189,248,.15), 0 0 0 1px rgba(56,189,248,.1);
  transform:translateY(-4px);
}
.engage-card-icon{
  width:64px;
  height:64px;
  border-radius:50%;
  background:rgba(11,18,32,.8);
  border:2px solid #38BDF8;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 24px;
  color:#38BDF8;
  transition:all .3s ease;
  box-shadow:0 0 15px rgba(56,189,248,.4), inset 0 0 15px rgba(56,189,248,.1);
}
.engage-card-icon i{
  font-size:28px;
}
.engage-card:hover .engage-card-icon{
  border-color:rgba(56,189,248,.6);
  box-shadow:0 0 25px rgba(56,189,248,.6), inset 0 0 20px rgba(56,189,248,.2);
  transform:scale(1.05);
}
.engage-card h3{
  font-family:'Manrope',sans-serif;
  font-size:18px;
  font-weight:600;
  color:#FFFFFF;
  margin-bottom:16px;
  letter-spacing:-0.5px;
  text-align:center;
  width:100%;
}
.card-separator{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin-bottom:20px;
  width:100%;
}
.card-separator::before,
.card-separator::after{
  content:'';
  flex:1;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(56,189,248,.4), transparent);
  max-width:60px;
}
.card-separator::after{
  content:'✦';
  flex:0;
  width:auto;
  height:auto;
  background:none;
  color:#38BDF8;
  font-size:10px;
  filter:drop-shadow(0 0 6px rgba(56,189,248,.6));
}
.engage-card p{
  font-family:'Inter',sans-serif;
  font-size:14px;
  font-weight:400;
  color:#C9D1D9;
  line-height:1.6;
  margin:0;
  text-align:center;
  width:100%;
}

@media (max-width:1024px){
  .engage-grid{grid-template-columns:repeat(2,1fr);gap:20px;}
}
@media (max-width:768px){
  #por-que-elegirnos{
    padding:80px 0;
  }
  #por-que-elegirnos h2{
    font-size:32px;
  }
  #por-que-elegirnos p{
    font-size:14px;
  }
  .engage-grid{
    grid-template-columns:1fr;
    gap:20px;
  }
  .engage-card{
    padding:28px 20px;
  }
  .engage-card-icon{
    width:56px;
    height:56px;
  }
  .engage-card-icon i{
    font-size:24px;
  }
  .engage-card h3{
    font-size:16px;
  }
  .engage-card p{
    font-size:13px;
  }
}

/* TESTIMONIALS */
#testimonios{
  position:relative;
  background-image:url('img/Fondo_Lo que dicen nuestros clientes .webp');
  background-size:cover;
  background-position:center bottom;
  background-attachment:fixed;
  background-repeat:no-repeat;
  padding:100px 0;
}
#testimonios::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(11,18,32,.7) 0%, rgba(11,18,32,.6) 100%);
}
#testimonios .wrap{
  position:relative;
  z-index:1;
}
#testimonios .section-head{
  text-align:center;
  margin-bottom:50px;
}
#testimonios .section-head h2{
  font-family:'Manrope',sans-serif;
  font-size:42px;
  font-weight:700;
  color:#FFFFFF;
  margin-bottom:12px;
  letter-spacing:-1px;
  -webkit-text-stroke:1px rgba(0,0,0,.3);
  text-shadow:0 0 20px rgba(56,189,248,.3);
}
#testimonios .section-head h2 .accent{
  color:#38BDF8;
}
#testimonios .section-head p{
  font-family:'Inter',sans-serif;
  font-size:16px;
  font-weight:400;
  color:#C9D1D9;
  line-height:1.6;
  margin-bottom:24px;
  text-align:center;
  max-width:600px;
  margin-left:auto;
  margin-right:auto;
}
.section-separator{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin:0 auto;
  width:100%;
  max-width:400px;
}
.section-separator::before,
.section-separator::after{
  content:'';
  flex:1;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(56,189,248,.4), transparent);
  max-width:150px;
}
.section-separator::after{
  content:'✦';
  flex:0;
  width:auto;
  height:auto;
  background:none;
  color:#38BDF8;
  font-size:10px;
  filter:drop-shadow(0 0 6px rgba(56,189,248,.6));
}
.testi-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  max-width:1200px;
  margin:0 auto;
}
.testi-card{
  background:rgba(15,23,42,.6);
  border:1px solid rgba(56,189,248,.2);
  border-radius:16px;
  padding:32px 24px;
  position:relative;
  overflow:hidden;
  transition:all .3s ease;
  backdrop-filter:blur(10px);
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.testi-card:hover{
  background:rgba(15,23,42,.8);
  border-color:rgba(56,189,248,.4);
  box-shadow:0 8px 30px rgba(56,189,248,.15), 0 0 0 1px rgba(56,189,248,.1);
  transform:translateY(-4px);
}
.testi-quote-icon{
  position:absolute;
  top:20px;
  right:20px;
  width:32px;
  height:32px;
  color:rgba(56,189,248,.5);
  opacity:0.8;
  filter:drop-shadow(0 0 8px rgba(56,189,248,.6));
}
.testi-quote-icon svg{
  width:100%;
  height:100%;
}
.testi-stars{
  display:flex;
  gap:6px;
  margin-bottom:20px;
  color:#38BDF8;
}
.testi-stars i{
  font-size:16px;
  filter:drop-shadow(0 0 4px rgba(56,189,248,.4));
}
.testi-card p.quote{
  font-family:'Inter',sans-serif;
  font-size:15px;
  font-weight:400;
  color:#C9D1D9;
  line-height:1.7;
  margin-bottom:24px;
  flex:1;
  max-width:85%;
}
.testi-separator{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin-bottom:20px;
  width:100%;
  max-width:80%;
}
.testi-separator::before,
.testi-separator::after{
  content:'';
  flex:1;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(56,189,248,.3), transparent);
  max-width:80px;
}
.testi-separator::after{
  content:'●';
  flex:0;
  width:auto;
  height:auto;
  background:none;
  color:#38BDF8;
  font-size:8px;
  filter:drop-shadow(0 0 4px rgba(56,189,248,.5));
}
.testi-client{
  display:flex;
  align-items:center;
  gap:16px;
  justify-content:center;
}
.testi-avatar{
  width:48px;
  height:48px;
  border-radius:50%;
  background:rgba(11,18,32,.8);
  border:2px solid #38BDF8;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#38BDF8;
  font-family:'Manrope',sans-serif;
  font-size:14px;
  font-weight:600;
  box-shadow:0 0 10px rgba(56,189,248,.3), inset 0 0 10px rgba(56,189,248,.1);
  flex-shrink:0;
}
.testi-client-info{
  display:flex;
  flex-direction:column;
  gap:4px;
  align-items:flex-start;
}
.testi-name{
  font-family:'Manrope',sans-serif;
  font-size:16px;
  font-weight:600;
  color:#FFFFFF;
}
.testi-verified{
  font-family:'Inter',sans-serif;
  font-size:12px;
  font-weight:400;
  color:#38BDF8;
  display:flex;
  align-items:center;
  gap:6px;
}
.testi-verified i{
  font-size:10px;
}

@media (max-width:1024px){
  .testi-grid{grid-template-columns:repeat(2,1fr);gap:20px;}
}
@media (max-width:768px){
  #testimonios{
    padding:80px 0;
  }
  #testimonios .section-head h2{
    font-size:32px;
  }
  #testimonios .section-head p{
    font-size:14px;
  }
  .testi-grid{
    grid-template-columns:1fr;
    gap:20px;
  }
  .testi-card{
    padding:28px 20px;
  }
  .testi-avatar{
    width:44px;
    height:44px;
    font-size:13px;
  }
  .testi-name{
    font-size:15px;
  }
  .testi-verified{
    font-size:11px;
  }
}

/* PLANS */
.plans-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
@media (max-width:880px){.plans-grid{grid-template-columns:1fr;}}
.plan-card{
  background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:32px 28px;display:flex;flex-direction:column;
  transition:border-color .2s,transform .2s;
}
.plan-card:hover{
  border-color:var(--blue);transform:translateY(-4px);
}
.plan-card.featured{
  border-color:var(--purple);position:relative;
}
.plan-card.featured::before{
  content:'MÁS POPULAR';position:absolute;top:-12px;left:50%;
  transform:translateX(-50%);background:var(--purple);color:var(--paper);
  font-family:var(--display);font-size:11px;font-weight:400;
  padding:4px 12px;border-radius:4px;
  text-transform:uppercase;
  letter-spacing:-2px;
}
.plan-name{font-size:15px;font-weight:700;margin-bottom:8px;}
.plan-price{
  font-family:var(--display);font-size:28px;font-weight:400;color:var(--blue);
  margin-bottom:4px;
  letter-spacing:-2px;
  line-height:0.9;
}
.plan-price span{font-size:14px;color:var(--slate);}
.plan-desc{font-size:13px;color:var(--slate);margin-bottom:20px;}
.plan-features{list-style:none;margin-bottom:24px;flex:1;}
.plan-features li{
  font-size:13px;color:var(--paper-dim);margin-bottom:10px;
  display:flex;align-items:center;gap:8px;
}
.plan-features li::before{content:'✓';color:var(--gold);font-weight:700;}
.plan-card .btn{width:100%;justify-content:center;}


/* CONTACT */
#contacto{border-bottom:none;}
.contact-grid{display:grid;grid-template-columns:0.8fr 1.2fr;gap:60px;}
@media (max-width:880px){
  .contact-grid{grid-template-columns:1fr;gap:40px;}
  .contact-grid .contact-info{order:2;}
  .contact-grid .form-wrapper{order:1;}
}
.contact-info h2{font-size:clamp(20px,2.5vw,28px);margin-bottom:18px;}
.contact-info p{font-size:15px;margin-bottom:28px;}
.contact-detail{font-family:var(--display);font-size:13.5px;color:var(--paper-dim);margin-bottom:10px;text-transform:uppercase;letter-spacing:-2px;}
.contact-detail b{color:var(--gold);}

.form-panel{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:32px;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px;}
@media (max-width:560px){.form-row{grid-template-columns:1fr;}}
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:16px;}
.field label{font-family:var(--display);font-size:12px;color:var(--slate);text-transform:uppercase;letter-spacing:-2px;}
.field input,.field select,.field textarea{
  background:var(--ink);border:1px solid var(--line);border-radius:6px;
  padding:11px 13px;color:var(--paper);font-family:var(--body);font-size:14px;
  font-weight:400;letter-spacing:0;
  width:100%;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--gold);outline:none;}
.field textarea{resize:vertical;min-height:90px;}
.nda-row{display:flex;align-items:center;gap:10px;margin-bottom:22px;padding:12px 14px;background:var(--ink);border:1px solid var(--line);border-radius:6px;}
.nda-row input{width:auto;}
.nda-row label{font-size:13px;color:var(--paper-dim);font-family:var(--body);font-weight:400;letter-spacing:0;}
.form-panel .btn{width:100%;justify-content:center;}

/* WHATSAPP WIDGET - REALISTIC DESIGN */
.whatsapp-widget{
  background:rgba(11,31,53,.6);
  border:1px solid rgba(56,189,248,.25);
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 25px 80px rgba(0,0,0,.4),0 0 60px rgba(56,189,248,.15),inset 0 1px 0 rgba(255,255,255,.05);
  min-height:420px;
  display:flex;
  flex-direction:column;
  position:relative;
  padding:0;
  max-width:380px;
  z-index:10;
  margin-top:0;
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  animation:chatFloat 5s ease-in-out infinite;
}
@keyframes chatFloat{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-6px);}
}
.whatsapp-header{
  background:linear-gradient(135deg, #075E54, #128C7E);
  padding:16px 20px;
  display:flex;
  align-items:center;
  gap:14px;
  border-bottom:1px solid rgba(255,255,255,.1);
  position:relative;
}
.whatsapp-profile{
  width:45px;
  height:45px;
  background-color:#0B1426;
  background-size:cover;
  background-position:center;
  border-radius:50%;
  box-shadow:0 4px 12px rgba(0,0,0,.3);
  position:relative;
  object-fit:cover;
  flex-shrink:0;
  display:block;
}
.whatsapp-header{position:relative;}
.whatsapp-close-btn{
  position:absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%);
  background:rgba(255,255,255,.15);
  border:none;
  color:#fff;
  width:32px;
  height:32px;
  border-radius:50%;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  z-index:20;
  transition:background .2s;
}
.whatsapp-close-btn:hover{
  background:rgba(255,255,255,.3);
}
.whatsapp-header .whatsapp-profile::after{
  content:'';
  position:absolute;
  bottom:2px;
  right:2px;
  width:12px;
  height:12px;
  background:#25D366;
  border:2px solid #075E54;
  border-radius:50%;
  animation:onlinePulse 2s ease-in-out infinite;
}
@keyframes onlinePulse{
  0%,100%{opacity:1;transform:scale(1);}
  50%{opacity:.8;transform:scale(1.1);}
}
.whatsapp-header-content{
  flex:1;
}
.whatsapp-name{
  color:#fff;
  font-family:var(--display);
  font-size:15px;
  font-weight:600;
  margin-bottom:2px;
  text-transform:uppercase;
  letter-spacing:0.2px;
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.whatsapp-status{
  display:flex;
  align-items:center;
  gap:4px;
  color:#25D366;
  font-size:12px;
  font-family:var(--body);
  font-weight:400;
  letter-spacing:0;
}
.whatsapp-chat-area{
  flex:1;
  background-image:url('img/Fondo_Whatsapp.webp');
  background-size:100% auto;
  background-position:center top;
  background-repeat:no-repeat;
  padding:20px;
  display:flex;
  flex-direction:column;
  gap:12px;
  overflow-y:auto;
  max-height:320px;
}
.whatsapp-message{
  background:#E9ECEF;
  border-radius:8px;
  padding:12px 16px;
  max-width:85%;
  align-self:flex-start;
  position:relative;
  box-shadow:0 2px 8px rgba(0,0,0,.1);
  animation:messageSlideIn .4s ease-out;
}
@keyframes messageSlideIn{
  from{opacity:0;transform:translateY(10px);}
  to{opacity:1;transform:translateY(0);}
}
.whatsapp-message::before{
  content:'';
  position:absolute;
  left:-8px;
  top:12px;
  width:0;
  height:0;
  border-top:8px solid transparent;
  border-bottom:8px solid transparent;
  border-right:8px solid #E9ECEF;
}
.whatsapp-message-text{
  color:#111827;
  font-family:var(--body);
  font-size:14px;
  line-height:1.7;
  font-weight:400;
  letter-spacing:0;
}
.whatsapp-message-time{
  color:rgba(17,24,39,.6);
  font-size:11px;
  text-align:right;
  margin-top:6px;
  font-family:var(--body);
  font-weight:400;
  letter-spacing:0;
}
.whatsapp-input-area{
  background:#0B1416;
  padding:12px 16px;
  border-top:1px solid rgba(255,255,255,.05);
  display:flex;
  align-items:center;
  gap:12px;
}
.whatsapp-emoji-btn{
  width:40px;
  height:40px;
  background:transparent;
  border:none;
  border-radius:50%;
  color:rgba(255,255,255,.6);
  font-size:20px;
  cursor:pointer;
  transition:all .2s ease;
  display:flex;
  align-items:center;
  justify-content:center;
}
.whatsapp-emoji-btn:hover{
  background:rgba(255,255,255,.1);
  color:rgba(255,255,255,.9);
}
.emoji-picker-container{
  position:relative;
}
.emoji-picker{
  position:absolute;
  bottom:55px;
  left:0;
  background:#1A2E33;
  border:1px solid rgba(255,255,255,.1);
  border-radius:12px;
  padding:12px;
  display:none;
  box-shadow:0 8px 24px rgba(0,0,0,.4);
  z-index:10;
  width:320px;
  max-height:260px;
  overflow-y:auto;
}
.emoji-picker::-webkit-scrollbar{width:6px;}
.emoji-picker::-webkit-scrollbar-track{background:rgba(255,255,255,.05);border-radius:3px;}
.emoji-picker::-webkit-scrollbar-thumb{background:rgba(37,211,102,.4);border-radius:3px;}
.emoji-picker.show{
  display:block;
  animation:fadeIn .2s ease;
}
@keyframes fadeIn{
  from{opacity:0;transform:translateY(10px);}
  to{opacity:1;transform:translateY(0);}
}
.emoji-grid{
  display:grid;
  grid-template-columns:repeat(8,1fr);
  gap:4px;
}
.emoji-item{
  font-size:20px;
  cursor:pointer;
  padding:6px;
  border-radius:8px;
  transition:background .2s ease;
  text-align:center;
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:1;
}
.emoji-item:hover{
  background:rgba(37,211,102,.2);
}
.whatsapp-input{
  flex:1;
  background:#1A2E33;
  border:1px solid rgba(255,255,255,.1);
  border-radius:24px;
  padding:12px 20px;
  color:#fff;
  font-family:var(--body);
  font-size:14px;
  font-weight:400;
  letter-spacing:0;
  transition:all .3s ease;
}
.whatsapp-input:focus{
  outline:none;
  border-color:rgba(37,211,102,.5);
  background:#1F3A40;
}
.whatsapp-input::placeholder{
  color:rgba(255,255,255,.4);
}
.whatsapp-send-btn{
  width:44px;
  height:44px;
  background:#25D366;
  border:none;
  border-radius:50%;
  color:#fff;
  font-size:18px;
  cursor:pointer;
  transition:all .3s ease;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 4px 12px rgba(37,211,102,.3);
}
.whatsapp-send-btn:hover{
  background:#128C7E;
  transform:scale(1.05);
  box-shadow:0 6px 16px rgba(37,211,102,.4);
}
.whatsapp-send-btn:active{
  transform:scale(.95);
}
.whatsapp-error{
  color:#EF4444;
  font-size:12px;
  margin-top:8px;
  text-align:center;
  font-family:var(--body);
  font-weight:400;
  letter-spacing:0;
  display:none;
  padding:0 16px 16px;
}
.whatsapp-error.show{
  display:block;
}

/* FAQ */
#faq{
  position:relative;
  background-image:url('img/Fondo_Preguntas Frecuentes.webp');
  background-size:cover;
  background-position:center bottom;
  background-attachment:fixed;
  background-repeat:no-repeat;
  padding:100px 0;
}
#faq::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(11,18,32,.85) 0%, rgba(11,18,32,.75) 100%);
}
#faq .wrap{
  position:relative;
  z-index:1;
  max-width:900px;
  margin:0 auto;
}
#faq .section-head{
  text-align:center;
  margin-bottom:50px;
}
#faq .section-head h2{
  font-family:'Manrope',sans-serif;
  font-size:42px;
  font-weight:700;
  color:#FFFFFF;
  margin-bottom:12px;
  letter-spacing:-1px;
  -webkit-text-stroke:1px rgba(0,0,0,.3);
  text-shadow:0 0 20px rgba(56,189,248,.3);
}
#faq .section-head h2 .accent{
  color:#38BDF8;
}
#faq .section-head p{
  font-family:'Inter',sans-serif;
  font-size:16px;
  font-weight:400;
  color:#C9D1D9;
  line-height:1.6;
  margin-bottom:24px;
  text-align:center;
  max-width:600px;
  margin-left:auto;
  margin-right:auto;
}
.faq-item{
  background:rgba(15,23,42,.6);
  border:1px solid rgba(56,189,248,.2);
  border-radius:12px;
  margin-bottom:16px;
  overflow:hidden;
  transition:all .3s ease;
  backdrop-filter:blur(10px);
}
.faq-item:hover{
  background:rgba(15,23,42,.8);
  border-color:rgba(56,189,248,.4);
  box-shadow:0 4px 20px rgba(56,189,248,.1);
}
.faq-question{
  padding:20px 24px;
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-family:'Inter',sans-serif;
  font-size:17px;
  font-weight:500;
  color:#FFFFFF;
  transition:all .3s ease;
  gap:16px;
}
.faq-question span:first-child{
  flex:1;
  line-height:1.5;
}
.faq-toggle{
  font-size:24px;
  color:#38BDF8;
  font-weight:300;
  transition:all .3s ease;
  filter:drop-shadow(0 0 4px rgba(56,189,248,.4));
  flex-shrink:0;
  width:32px;
  height:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:rgba(56,189,248,.1);
}
.faq-item:hover .faq-toggle{
  background:rgba(56,189,248,.2);
  filter:drop-shadow(0 0 8px rgba(56,189,248,.6));
}
.faq-item.active .faq-toggle{
  transform:rotate(45deg);
  background:rgba(56,189,248,.3);
}
.faq-answer{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .3s ease, padding .3s ease;
  padding:0 24px;
  font-family:'Inter',sans-serif;
  font-size:15px;
  color:#C9D1D9;
  line-height:1.7;
  position:relative;
}
.faq-item.active .faq-answer{
  grid-template-rows:1fr;
  padding:20px 24px 24px;
  position:relative;
}
.faq-answer-inner{
  overflow:hidden;
}
.faq-item.active .faq-answer::before{
  content:'';
  position:absolute;
  top:10px;
  left:50%;
  transform:translateX(-50%);
  width:80%;
  height:1px;
  background:linear-gradient(90deg, transparent 0%, rgba(56,189,248,.2) 20%, rgba(56,189,248,.5) 50%, rgba(56,189,248,.2) 80%, transparent 100%);
  filter:blur(1px);
}
.faq-item.active .faq-answer::after{
  content:'★';
  position:absolute;
  top:6px;
  left:50%;
  transform:translateX(-50%);
  color:#38BDF8;
  font-size:12px;
  filter:drop-shadow(0 0 6px rgba(56,189,248,.6));
  background:rgba(15,23,42,.6);
  padding:0 6px;
  line-height:1;
}

@media (max-width:768px){
  #faq{
    padding:80px 0;
  }
  #faq .section-head h2{
    font-size:32px;
  }
  #faq .section-head p{
    font-size:14px;
  }
  .faq-question{
    font-size:15px;
    padding:16px 20px;
  }
  .faq-toggle{
    font-size:20px;
    width:28px;
    height:28px;
  }
  .faq-answer{
    font-size:14px;
  }
}

/* CTA FINAL */
#cta-final{
  position:relative;
  background-image:url('img/Fondo_Anuncio.webp');
  background-size:cover;
  background-position:center;
  background-attachment:fixed;
  background-repeat:no-repeat;
  padding:120px 0;
}
#cta-final::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(11,18,32,.8) 0%, rgba(11,18,32,.7) 100%);
}
#cta-final .wrap{
  position:relative;
  z-index:1;
  max-width:1400px;
  margin:0 auto;
}
.cta-hud-frame{
  position:relative;
  padding:60px;
  background:rgba(15,23,42,.15);
  border:1px solid rgba(56,189,248,.2);
  border-radius:16px;
  backdrop-filter:blur(3px);
  box-shadow:0 0 50px rgba(56,189,248,.08), inset 0 0 30px rgba(56,189,248,.03);
}
.cta-hud-frame::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:16px;
  background:linear-gradient(135deg, rgba(56,189,248,.05) 0%, transparent 50%, rgba(56,189,248,.05) 100%);
  pointer-events:none;
}
.cta-container{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:60px;
  align-items:center;
}
.hud-corner{
  position:absolute;
  width:40px;
  height:40px;
  border:2px solid rgba(56,189,248,.5);
  filter:drop-shadow(0 0 8px rgba(56,189,248,.4));
}
.hud-top-left{
  top:-1px;
  left:-1px;
  border-right:none;
  border-bottom:none;
  border-radius:16px 0 0 0;
}
.hud-top-left::before{
  content:'';
  position:absolute;
  top:8px;
  left:8px;
  width:12px;
  height:12px;
  border-top:1px solid rgba(56,189,248,.3);
  border-left:1px solid rgba(56,189,248,.3);
  transform:rotate(-45deg);
}
.hud-top-right{
  top:-1px;
  right:-1px;
  border-left:none;
  border-bottom:none;
  border-radius:0 16px 0 0;
}
.hud-top-right::before{
  content:'';
  position:absolute;
  top:8px;
  right:8px;
  width:12px;
  height:12px;
  border-top:1px solid rgba(56,189,248,.3);
  border-right:1px solid rgba(56,189,248,.3);
  transform:rotate(45deg);
}
.hud-bottom-left{
  bottom:-1px;
  left:-1px;
  border-right:none;
  border-top:none;
  border-radius:0 0 0 16px;
}
.hud-bottom-left::before{
  content:'';
  position:absolute;
  bottom:8px;
  left:8px;
  width:12px;
  height:12px;
  border-bottom:1px solid rgba(56,189,248,.3);
  border-left:1px solid rgba(56,189,248,.3);
  transform:rotate(45deg);
}
.hud-bottom-right{
  bottom:-1px;
  right:-1px;
  border-left:none;
  border-top:none;
  border-radius:0 0 16px 0;
}
.hud-bottom-right::before{
  content:'';
  position:absolute;
  bottom:8px;
  right:8px;
  width:12px;
  height:12px;
  border-bottom:1px solid rgba(56,189,248,.3);
  border-right:1px solid rgba(56,189,248,.3);
  transform:rotate(-45deg);
}
.hud-line{
  position:absolute;
  background:linear-gradient(90deg, transparent, rgba(56,189,248,.4), transparent);
  filter:blur(1px);
}
.hud-line-top{
  top:-20px;
  left:50%;
  transform:translateX(-50%);
  width:150px;
  height:1px;
}
.hud-line-top::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  width:30px;
  height:1px;
  background:rgba(56,189,248,.6);
  filter:blur(0);
}
.hud-line-top::after{
  content:'';
  position:absolute;
  top:0;
  right:0;
  width:30px;
  height:1px;
  background:rgba(56,189,248,.6);
  filter:blur(0);
}
.hud-line-bottom{
  bottom:-20px;
  left:50%;
  transform:translateX(-50%);
  width:150px;
  height:1px;
}
.hud-line-bottom::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  width:30px;
  height:1px;
  background:rgba(56,189,248,.6);
  filter:blur(0);
}
.hud-line-bottom::after{
  content:'';
  position:absolute;
  top:0;
  right:0;
  width:30px;
  height:1px;
  background:rgba(56,189,248,.6);
  filter:blur(0);
}
.hud-line-left{
  left:-20px;
  top:50%;
  transform:translateY(-50%) rotate(90deg);
  width:100px;
  height:1px;
}
.hud-line-left::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  width:20px;
  height:1px;
  background:rgba(56,189,248,.6);
  filter:blur(0);
}
.hud-line-right{
  right:-20px;
  top:50%;
  transform:translateY(-50%) rotate(90deg);
  width:100px;
  height:1px;
}
.hud-line-right::before{
  content:'';
  position:absolute;
  top:0;
  right:0;
  width:20px;
  height:1px;
  background:rgba(56,189,248,.6);
  filter:blur(0);
}
.hud-point{
  position:absolute;
  width:8px;
  height:8px;
  background:#38BDF8;
  border-radius:50%;
  filter:drop-shadow(0 0 10px rgba(56,189,248,.7));
  animation:pulse 3s ease-in-out infinite;
}
.hud-point-1{
  top:-10px;
  left:25%;
}
.hud-point-2{
  top:-10px;
  right:25%;
}
.hud-point-3{
  bottom:-10px;
  left:25%;
}
.hud-point-4{
  bottom:-10px;
  right:25%;
}
.hud-point-5{
  top:50%;
  left:-10px;
  transform:translateY(-50%);
  animation-delay:0.5s;
}
.hud-point-6{
  top:50%;
  right:-10px;
  transform:translateY(-50%);
  animation-delay:1s;
}
@keyframes pulse{
  0%,100%{
    opacity:0.5;
    transform:scale(1);
  }
  50%{
    opacity:1;
    transform:scale(1.3);
  }
}
.cta-content{
  display:flex;
  flex-direction:column;
  gap:32px;
}
.cta-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 16px;
  background:rgba(15,23,42,.6);
  border:1px solid rgba(56,189,248,.3);
  border-radius:50px;
  color:#38BDF8;
  font-family:'Inter',sans-serif;
  font-size:13px;
  font-weight:500;
  width:fit-content;
  backdrop-filter:blur(10px);
  box-shadow:0 0 15px rgba(56,189,248,.15);
}
.cta-badge i{
  font-size:12px;
  filter:drop-shadow(0 0 4px rgba(56,189,248,.5));
}
.cta-title{
  font-family:'Manrope',sans-serif;
  font-size:clamp(32px,5vw,56px);
  font-weight:700;
  color:#FFFFFF;
  line-height:1.1;
  letter-spacing:-1px;
  margin:0;
  -webkit-text-stroke:1px rgba(0,0,0,.3);
  text-shadow:0 0 30px rgba(56,189,248,.3);
}
.cta-title .accent{
  color:#38BDF8;
}
.cta-subtitle{
  font-family:'Inter',sans-serif;
  font-size:18px;
  font-weight:400;
  color:#C9D1D9;
  line-height:1.6;
  margin:0;
  max-width:500px;
}
.cta-benefits{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:20px;
}
.benefit-item{
  display:flex;
  align-items:center;
  gap:12px;
  color:#C9D1D9;
  font-family:'Inter',sans-serif;
  font-size:14px;
  font-weight:400;
}
.benefit-item i{
  font-size:16px;
  color:#38BDF8;
  filter:drop-shadow(0 0 4px rgba(56,189,248,.4));
}
.cta-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:18px 40px;
  background:linear-gradient(135deg, #38BDF8 0%, #0EA5E9 100%);
  border-radius:12px;
  color:#0B1217;
  font-family:'Manrope',sans-serif;
  font-size:18px;
  font-weight:700;
  text-decoration:none;
  transition:all .3s ease;
  box-shadow:0 0 30px rgba(56,189,248,.4), 0 4px 20px rgba(56,189,248,.2);
  width:fit-content;
}
.cta-button:hover{
  transform:translateY(-2px);
  box-shadow:0 0 40px rgba(56,189,248,.5), 0 6px 25px rgba(56,189,248,.3);
  background:linear-gradient(135deg, #7DD3FC 0%, #38BDF8 100%);
}
.cta-button i:first-child{
  font-size:22px;
}
.cta-button i:last-child{
  font-size:16px;
}
.cta-note{
  font-family:'Inter',sans-serif;
  font-size:13px;
  font-weight:400;
  color:#94A3B8;
  margin:0;
  text-align:center;
}
.cta-visual{
  display:flex;
  justify-content:center;
  align-items:center;
}
.cta-image{
  max-width:100%;
  height:auto;
  object-fit:contain;
  filter:drop-shadow(0 20px 40px rgba(0,0,0,.5));
  animation:float 6s ease-in-out infinite;
}
@keyframes float{
  0%,100%{
    transform:translateY(0);
  }
  50%{
    transform:translateY(-10px);
  }
}

@media (max-width:1024px){
  .cta-hud-frame{
    padding:40px;
  }
  .cta-container{
    grid-template-columns:1fr;
    gap:40px;
  }
  .cta-content{
    align-items:center;
    text-align:center;
  }
  .cta-badge{
    margin:0 auto;
  }
  .cta-subtitle{
    margin:0 auto;
  }
  .cta-benefits{
    justify-content:center;
  }
  .cta-button{
    margin:0 auto;
  }
  .cta-image{
    max-width:70%;
  }
  .hud-line-top,
  .hud-line-bottom{
    width:80px;
  }
  .hud-line-left,
  .hud-line-right{
    width:60px;
  }
}
@media (max-width:768px){
  #cta-final{
    padding:80px 0;
  }
  .cta-hud-frame{
    padding:30px 20px;
  }
  .cta-container{
    grid-template-columns:1fr;
    gap:30px;
  }
  .cta-title{
    font-size:32px;
  }
  .cta-subtitle{
    font-size:16px;
  }
  .cta-benefits{
    grid-template-columns:1fr;
    gap:16px;
  }
  .cta-button{
    padding:16px 32px;
    font-size:16px;
    width:100%;
  }
  .cta-image{
    max-width:80%;
  }
  .hud-corner{
    width:20px;
    height:20px;
  }
  .hud-line-top,
  .hud-line-bottom{
    width:60px;
    top:-10px;
  }
  .hud-line-bottom{
    bottom:-10px;
  }
  .hud-line-left,
  .hud-line-right{
    width:40px;
    left:-10px;
  }
  .hud-line-right{
    right:-10px;
  }
  .hud-point{
    width:4px;
    height:4px;
  }
  .hud-point-1,
  .hud-point-2{
    top:-6px;
  }
  .hud-point-3,
  .hud-point-4{
    bottom:-6px;
  }
  .hud-point-5,
  .hud-point-6{
    display:none;
  }
}

/* Form Section */
#contacto{
  background-image:url('img/Fondo_Formulario.webp');
  background-size:cover;
  background-position:center;
  background-attachment:fixed;
  background-repeat:no-repeat;
  padding:120px 0;
  position:relative;
  overflow:hidden;
}
#contacto::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(11,18,32,.8) 0%, rgba(11,18,32,.7) 100%);
  z-index:1;
}
#contacto .wrap{
  position:relative;
  z-index:2;
  max-width:1400px;
  margin:0 auto;
}
.form-hud-frame{
  position:relative;
  padding:60px;
  overflow:hidden;
  background:rgba(15,23,42,.15);
  border:1px solid rgba(56,189,248,.2);
  border-radius:16px;
  backdrop-filter:blur(3px);
  box-shadow:0 0 50px rgba(56,189,248,.08), inset 0 0 30px rgba(56,189,248,.03);
}
@media (max-width:600px){
  .form-hud-frame{padding:24px 18px;}
}
.form-hud-frame::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:16px;
  background:linear-gradient(135deg, rgba(56,189,248,.05) 0%, transparent 50%, rgba(56,189,248,.05) 100%);
  pointer-events:none;
}
.form-container{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:60px;
  align-items:start;
}
@media (max-width:880px){
  .form-container{grid-template-columns:1fr;gap:30px;}
  .form-container .form-left{order:1;}
  .form-container .form-right{order:2;}
}
.form-left{
  display:flex;
  flex-direction:column;
  gap:30px;
  min-width:0;
  max-width:100%;
}
.form-badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 20px;
  border:1px solid rgba(56,189,248,.4);
  border-radius:30px;
  background:rgba(56,189,248,.1);
  color:#38BDF8;
  font-size:13px;
  font-weight:600;
  letter-spacing:1px;
  text-transform:uppercase;
  width:fit-content;
  filter:drop-shadow(0 0 10px rgba(56,189,248,.3));
}
.form-title{
  font-family:'Manrope',sans-serif;
  font-size:42px;
  font-weight:800;
  line-height:1.2;
  color:#fff;
  margin:0;
  -webkit-text-stroke:1px rgba(0,0,0,.3);
}
@media (max-width:600px){
  .form-title{font-size:30px;}
}
.form-title .accent{
  color:#38BDF8;
  -webkit-text-stroke:1px rgba(56,189,248,.3);
}
.form-subtitle{
  font-family:'Inter',sans-serif;
  font-size:16px;
  line-height:1.6;
  color:rgba(255,255,255,.7);
  margin:0;
  word-wrap:break-word;
  overflow-wrap:break-word;
  max-width:100%;
}
@media (max-width:600px){
  .form-subtitle{font-size:14px;}
}
.form-benefits{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  max-width:100%;
}
@media (max-width:600px){
  .form-benefits{grid-template-columns:1fr;gap:14px;}
}
.form-benefit{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:16px;
  border:1px solid rgba(56,189,248,.15);
  border-radius:12px;
  background:rgba(15,23,42,.3);
  transition:all .3s ease;
}
.form-benefit:hover{
  border-color:rgba(56,189,248,.4);
  background:rgba(56,189,248,.08);
  transform:translateY(-2px);
}
.form-benefit i{
  font-size:20px;
  color:#38BDF8;
  flex-shrink:0;
  margin-top:2px;
}
.benefit-content{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.benefit-title{
  font-family:'Manrope',sans-serif;
  font-size:14px;
  font-weight:700;
  color:#fff;
}
.benefit-desc{
  font-family:'Inter',sans-serif;
  font-size:12px;
  color:rgba(255,255,255,.6);
  line-height:1.4;
}
.form-whatsapp{
  padding:24px;
  border:1px solid rgba(37,211,102,.3);
  border-radius:12px;
  background:rgba(37,211,102,.05);
  display:flex;
  flex-direction:column;
  gap:16px;
}
.whatsapp-title{
  font-family:'Manrope',sans-serif;
  font-size:18px;
  font-weight:700;
  color:#fff;
  margin:0;
}
.whatsapp-text{
  font-family:'Inter',sans-serif;
  font-size:14px;
  color:rgba(255,255,255,.7);
  margin:0;
}
.whatsapp-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:14px 24px;
  background:#25D366;
  color:#fff;
  font-family:'Manrope',sans-serif;
  font-size:14px;
  font-weight:600;
  border-radius:8px;
  text-decoration:none;
  transition:all .3s ease;
  width:fit-content;
}
.whatsapp-btn:hover{
  background:#20BA5A;
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(37,211,102,.3);
}
.form-right{
  display:flex;
  flex-direction:column;
  gap:24px;
  min-width:0;
  max-width:100%;
}
.form-header{
  display:flex;
  align-items:center;
  gap:12px;
  padding-bottom:20px;
  border-bottom:1px solid rgba(56,189,248,.2);
}
.form-header i{
  font-size:28px;
  color:#38BDF8;
}
.form-header h3{
  font-family:'Manrope',sans-serif;
  font-size:20px;
  font-weight:700;
  color:#fff;
  margin:0;
}
.form-header p{
  font-family:'Inter',sans-serif;
  font-size:13px;
  color:rgba(255,255,255,.5);
  margin:0;
}
.form-panel{
  display:flex;
  flex-direction:column;
  gap:18px;
}
.form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}
@media (max-width:600px){
  .form-row{grid-template-columns:1fr;gap:18px;}
}
.form-field{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.form-field label{
  display:flex;
  align-items:center;
  gap:8px;
  font-family:'Manrope',sans-serif;
  font-size:12px;
  font-weight:600;
  color:#38BDF8;
  letter-spacing:0.5px;
  text-transform:uppercase;
}
.form-field label i{
  font-size:14px;
}
.form-field input,
.form-field select,
.form-field textarea{
  width:100%;
  padding:14px 16px;
  background:rgba(15,23,42,.5);
  border:1px solid rgba(56,189,248,.2);
  border-radius:10px;
  color:#fff;
  font-family:'Inter',sans-serif;
  font-size:14px;
  transition:all .25s ease;
  outline:none;
  box-sizing:border-box;
  width:100%;
  min-width:0;
}
@media (max-width:600px){
  .form-field input,
  .form-field select,
  .form-field textarea{
    padding:12px 14px;
    font-size:13.5px;
  }
  .form-field label{font-size:11.5px;}
}
.form-field input::placeholder,
.form-field textarea::placeholder{
  color:rgba(255,255,255,.4);
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus{
  border-color:rgba(56,189,248,.6);
  background:rgba(15,23,42,.7);
  box-shadow:0 0 20px rgba(56,189,248,.2);
}
.form-field select{
  cursor:pointer;
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2338BDF8' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 16px center;
  padding-right:40px;
}
.form-field textarea{
  min-height:120px;
  resize:vertical;
}
.form-submit{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:18px 32px;
  background:linear-gradient(135deg, #38BDF8 0%, #0EA5E9 100%);
  color:#0f172a;
  font-family:'Manrope',sans-serif;
  font-size:16px;
  font-weight:700;
  border:none;
  border-radius:8px;
  cursor:pointer;
  transition:all .3s ease;
  box-shadow:0 4px 20px rgba(56,189,248,.3);
}
.form-submit:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 30px rgba(56,189,248,.5);
}
.form-submit i{
  font-size:18px;
}
.form-security{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-family:'Inter',sans-serif;
  font-size:12px;
  color:rgba(255,255,255,.5);
  margin:0;
}
.form-security i{
  font-size:12px;
  color:#38BDF8;
}

/* Custom Phone Field */
.phone-input-wrapper{
  position:relative;
  display:flex;
  align-items:stretch;
  width:100%;
}
.country-selector{
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 14px;
  background:rgba(15,23,42,.5);
  border:1px solid rgba(56,189,248,.2);
  border-right:1px solid rgba(56,189,248,.2);
  border-radius:8px 0 0 8px;
  cursor:pointer;
  transition:all .3s ease;
  flex-shrink:0;
  min-width:110px;
}
.country-selector:hover{
  background:rgba(56,189,248,.1);
}
.country-selector .flag{
  font-size:18px;
}
.country-selector .dial-code{
  color:rgba(255,255,255,.7);
  font-family:'Inter',sans-serif;
  font-size:14px;
  font-weight:600;
}
.country-selector .arrow{
  font-size:10px;
  color:rgba(56,189,248,.7);
  transition:transform .3s ease;
}
.country-selector.open .arrow{
  transform:rotate(180deg);
}
.phone-input-wrapper input{
  flex:1;
  padding:14px 16px;
  background:rgba(15,23,42,.5);
  border:1px solid rgba(56,189,248,.2);
  border-left:none;
  border-radius:0 8px 8px 0;
  color:#fff;
  font-family:'Inter',sans-serif;
  font-size:14px;
  transition:all .3s ease;
  outline:none;
}
.phone-input-wrapper input::placeholder{
  color:rgba(255,255,255,.4);
}
.phone-input-wrapper input:focus{
  border-color:rgba(56,189,248,.6);
  background:rgba(15,23,42,.7);
  box-shadow:0 0 20px rgba(56,189,248,.2);
}
.country-dropdown{
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  right:auto;
  width:320px;
  max-width:calc(100vw - 40px);
  background:rgba(15,23,42,.98);
  border:1px solid rgba(56,189,248,.3);
  border-radius:12px;
  box-shadow:0 10px 40px rgba(0,0,0,.6), 0 0 20px rgba(56,189,248,.1);
  z-index:100;
  display:none;
  animation:dropdownFadeIn .2s ease;
  box-sizing:border-box;
}
@media (max-width:600px){
  .country-dropdown{
    position:absolute;
    top:calc(100% + 8px);
    left:auto;
    right:0;
    width:280px;
    max-width:calc(100vw - 40px);
    z-index:9999;
  }
}
.country-dropdown.open{
  display:block;
}
@keyframes dropdownFadeIn{
  from{
    opacity:0;
    transform:translateY(-10px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}
.search-box{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px;
  border-bottom:1px solid rgba(56,189,248,.1);
}
.search-box i{
  color:rgba(56,189,248,.5);
  font-size:14px;
}
.search-box input{
  flex:1;
  background:rgba(15,23,42,.8);
  border:1px solid rgba(56,189,248,.3);
  border-radius:6px;
  color:#fff;
  font-family:'Inter',sans-serif;
  font-size:13px;
  padding:8px 12px;
  outline:none;
}
.search-box input::placeholder{
  color:rgba(255,255,255,.4);
}
.search-box input:focus{
  border-color:rgba(56,189,248,.6);
  box-shadow:0 0 15px rgba(56,189,248,.2);
}
.country-list{
  max-height:250px;
  overflow-y:auto;
}
@media (max-width:600px){
  .country-list{max-height:200px;}
}
.country-list::-webkit-scrollbar{
  width:6px;
}
.country-list::-webkit-scrollbar-track{
  background:rgba(15,23,42,.5);
  border-radius:3px;
}
.country-list::-webkit-scrollbar-thumb{
  background:rgba(56,189,248,.3);
  border-radius:3px;
}
.country-list::-webkit-scrollbar-thumb:hover{
  background:rgba(56,189,248,.5);
}
.country-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  border-bottom:1px solid rgba(56,189,248,.1);
  cursor:pointer;
  transition:all .15s ease;
}
.country-item:hover{
  background:rgba(56,189,248,.15);
  padding-left:18px;
}
.country-item:last-child{
  border-bottom:none;
}
.country-flag{
  font-size:18px;
}
.country-name{
  flex:1;
  color:rgba(255,255,255,.8);
  font-family:'Inter',sans-serif;
  font-size:13px;
  font-weight:500;
}
.country-dial{
  color:rgba(56,189,248,.7);
  font-family:'Inter',sans-serif;
  font-size:13px;
  font-weight:600;
}
.phone-error{
  display:none;
  font-family:'Inter',sans-serif;
  font-size:12px;
  color:rgba(239,68,68,.8);
  margin-top:4px;
  animation:fadeIn .3s ease;
}
@keyframes fadeIn{
  from{
    opacity:0;
    transform:translateY(-5px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

/* Location Field */
.location-input-wrapper{
  position:relative;
}
.location-icon{
  position:absolute;
  left:14px;
  top:50%;
  transform:translateY(-50%);
  color:rgba(56,189,248,.5);
  font-size:14px;
  pointer-events:none;
}
.location-input-wrapper input{
  width:100%;
  padding:14px 16px 14px 40px;
  background:rgba(15,23,42,.5);
  border:1px solid rgba(56,189,248,.2);
  border-radius:8px;
  color:#fff;
  font-family:'Inter',sans-serif;
  font-size:14px;
  transition:all .3s ease;
  outline:none;
}
.location-input-wrapper input::placeholder{
  color:rgba(255,255,255,.4);
}
.location-input-wrapper input:focus{
  border-color:rgba(56,189,248,.6);
  background:rgba(15,23,42,.7);
  box-shadow:0 0 20px rgba(56,189,248,.2);
}
.location-dropdown{
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  width:100%;
  background:rgba(15,23,42,.98);
  border:1px solid rgba(56,189,248,.3);
  border-radius:12px;
  box-shadow:0 10px 40px rgba(0,0,0,.6), 0 0 20px rgba(56,189,248,.1);
  z-index:100;
  display:none;
  max-height:300px;
  overflow-y:auto;
  animation:dropdownFadeIn .2s ease;
}
.location-dropdown.open{
  display:block;
}
.location-dropdown::-webkit-scrollbar{
  width:6px;
}
.location-dropdown::-webkit-scrollbar-track{
  background:rgba(15,23,42,.5);
  border-radius:3px;
}
.location-dropdown::-webkit-scrollbar-thumb{
  background:rgba(56,189,248,.3);
  border-radius:3px;
}
.location-dropdown::-webkit-scrollbar-thumb:hover{
  background:rgba(56,189,248,.5);
}
.location-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  border-bottom:1px solid rgba(56,189,248,.1);
  cursor:pointer;
  transition:all .15s ease;
}
.location-item:hover{
  background:rgba(56,189,248,.15);
  padding-left:18px;
}
.location-item:last-child{
  border-bottom:none;
}
.location-item i{
  color:rgba(56,189,248,.7);
  font-size:14px;
}
.location-item-text{
  flex:1;
  color:rgba(255,255,255,.8);
  font-family:'Inter',sans-serif;
  font-size:13px;
}
.location-item-sub{
  color:rgba(255,255,255,.5);
  font-size:11px;
}
.geo-button{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 16px;
  background:rgba(56,189,248,.1);
  border:1px solid rgba(56,189,248,.3);
  border-radius:6px;
  color:rgba(56,189,248,.8);
  font-family:'Inter',sans-serif;
  font-size:12px;
  font-weight:500;
  cursor:pointer;
  transition:all .3s ease;
  margin-top:8px;
}
.geo-button:hover{
  background:rgba(56,189,248,.2);
  border-color:rgba(56,189,248,.5);
  color:#38BDF8;
}
.geo-button i{
  font-size:14px;
}
.location-error{
  display:none;
  font-family:'Inter',sans-serif;
  font-size:12px;
  color:rgba(239,68,68,.8);
  margin-top:4px;
  animation:fadeIn .3s ease;
}

/* Footer CTA */
.footer-cta{
  position:relative;
  padding:60px 0;
  overflow:hidden;
  background:url('img/Fondo_Formulario.webp') center/cover no-repeat;
}

.cta-banner{
  position:relative;
  width:100%;
  max-width:1400px;
  margin:0 auto;
  border-radius:20px;
  overflow:hidden;
  background:rgba(15,23,42,.85);
  backdrop-filter:blur(10px);
}

.cta-banner-bg{
  position:absolute;
  inset:0;
  background:url('img/Fondo_Anuncio_corto.webp') center/cover no-repeat;
  opacity:.3;
}

.cta-banner-border{
  position:absolute;
  inset:0;
  border:1px solid rgba(56,189,248,.3);
  border-radius:20px;
  pointer-events:none;
}

.cta-banner-border::before{
  content:'';
  position:absolute;
  inset:-2px;
  border:1px solid rgba(56,189,248,.15);
  border-radius:22px;
  pointer-events:none;
}

.cta-banner-border::after{
  content:'';
  position:absolute;
  inset:0;
  border-radius:20px;
  box-shadow:0 0 30px rgba(56,189,248,.15),inset 0 0 30px rgba(56,189,248,.05);
  pointer-events:none;
}

.cta-banner-content{
  position:relative;
  display:flex;
  align-items:center;
  gap:100px;
  padding:40px 50px;
  z-index:1;
}

.cta-carrito-image{
  flex-shrink:0;
  width:auto;
  height:120px;
  object-fit:contain;
}

.cta-icon{
  display:none;
}

.cta-text{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:12px;
  text-align:center;
}

.cta-badge{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  font-weight:600;
  color:#38BDF8;
  text-transform:uppercase;
  letter-spacing:1px;
  justify-content:center;
  align-self:center;
}

.cta-badge svg{
  width:16px;
  height:16px;
}

.cta-text h2{
  font-family:'Manrope',sans-serif;
  font-size:28px;
  font-weight:800;
  color:#fff;
  margin:0;
  letter-spacing:-0.5px;
  line-height:1.3;
  text-shadow:2px 2px 4px rgba(0,0,0,.5);
}

.cta-text h2 .accent{
  color:#38BDF8;
  font-size:inherit;
  font-weight:inherit;
}

.cta-text p{
  font-family:'Inter',sans-serif;
  font-size:15px;
  color:#fff;
  margin:0;
  font-weight:500;
  margin-bottom:4px;
}

.cta-text span{
  font-family:'Inter',sans-serif;
  font-size:13px;
  color:rgba(255,255,255,.7);
  line-height:1.4;
}

.cta-buttons{
  flex-shrink:0;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.btn-cta-primary{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:14px 28px;
  background:linear-gradient(135deg,#38BDF8 0%,#0EA5E9 100%);
  color:#fff;
  font-family:'Inter',sans-serif;
  font-size:14px;
  font-weight:700;
  border-radius:10px;
  text-decoration:none;
  transition:all .3s ease;
  border:none;
  cursor:pointer;
  letter-spacing:.5px;
  text-transform:uppercase;
  box-shadow:0 4px 20px rgba(56,189,248,.3),0 0 12px rgba(56,189,248,.25);
}

.btn-cta-primary:hover{
  transform:translateY(-2px);
  background:linear-gradient(135deg,#7DD3FC 0%,#38BDF8 100%);
  box-shadow:0 8px 30px rgba(56,189,248,.5),0 0 22px rgba(56,189,248,.45);
}

.btn-cta-primary svg{
  width:18px;
  height:18px;
}

.btn-cta-whatsapp{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:14px 28px;
  background:#25D366;
  color:#fff;
  font-family:'Inter',sans-serif;
  font-size:14px;
  font-weight:600;
  border-radius:10px;
  text-decoration:none;
  transition:all .3s ease;
  border:none;
  cursor:pointer;
  box-shadow:0 4px 20px rgba(37,211,102,.2);
}

.btn-cta-whatsapp:hover{
  background:#128C7E;
  transform:translateY(-2px);
  box-shadow:0 6px 30px rgba(37,211,102,.4);
}

.btn-cta-whatsapp i{
  font-size:18px;
}

/* Responsive */
@media(max-width:1024px){
  .cta-banner-content{
    padding:30px 40px;
    gap:40px;
  }
  
  .cta-carrito-image{
    height:100px;
  }
  
  .cta-text h2{
    font-size:26px;
  }
  
  .cta-text p{
    font-size:14px;
  }
  
  .cta-text span{
    font-size:12px;
  }
}

@media(max-width:768px){
  .footer-cta{
    padding:40px 0;
  }
  
  .cta-banner{
    border-radius:16px;
  }
  
  .cta-banner-border{
    border-radius:16px;
  }
  
  .cta-banner-border::before{
    border-radius:18px;
  }
  
  .cta-banner-content{
    flex-direction:column;
    text-align:center;
    padding:30px;
    gap:24px;
  }
  
  .cta-carrito-image{
    height:80px;
  }
  
  .cta-badge{
    justify-content:center;
  }
  
  .cta-text h2{
    font-size:22px;
  }
  
  .cta-text p{
    font-size:14px;
  }
  
  .cta-text span{
    font-size:12px;
  }
  
  .cta-buttons{
    width:100%;
    flex-direction:column;
  }
  
  .btn-cta-primary,
  .btn-cta-whatsapp{
    width:100%;
    justify-content:center;
  }
}

/* Toast Notifications */
.toast-container{
  position:fixed;
  top:80px;
  right:20px;
  z-index:99999;
  display:flex;
  flex-direction:column;
  gap:10px;
  pointer-events:none;
}
.toast{
  pointer-events:auto;
  background:rgba(15,23,42,.95);
  border:1px solid rgba(56,189,248,.3);
  color:#fff;
  padding:14px 20px;
  border-radius:10px;
  font-family:'Inter',sans-serif;
  font-size:14px;
  box-shadow:0 10px 30px rgba(0,0,0,.4);
  animation:toastIn .3s ease;
  max-width:320px;
  backdrop-filter:blur(10px);
  line-height:1.5;
}
.toast.error{border-color:rgba(239,68,68,.5);}
.toast.success{border-color:rgba(34,197,94,.5);}
.toast.info{border-color:rgba(56,189,248,.5);}
@keyframes toastIn{
  from{opacity:0;transform:translateX(20px);}
  to{opacity:1;transform:translateX(0);}
}
@media (prefers-reduced-motion: reduce){
  .toast{animation:none;}
}

/* MOBILE NAV (legacy - now handled by .menu-toggle / .mobile-menu above) */

/* LOCATION DROPDOWN EMPTY / ERROR STATES */
.location-dropdown .location-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  border-bottom:1px solid rgba(56,189,248,.1);
  cursor:pointer;
  transition:all .15s ease;
}
.location-dropdown .location-item:last-child{
  border-bottom:none;
}
.location-dropdown .location-item.state-empty,
.location-dropdown .location-item.state-error{
  cursor:default;
  color:rgba(255,255,255,.5);
  font-style:italic;
}
.location-dropdown .location-item.state-error{
  color:rgba(239,68,68,.8);
}
.location-dropdown .location-item:hover{
  background:rgba(56,189,248,.15);
  padding-left:18px;
}
.location-dropdown .location-item.state-empty:hover,
.location-dropdown .location-item.state-error:hover{
  background:transparent;
  padding-left:14px;
}

/* MAIN FOOTER */
.main-footer{
  background:rgba(15,23,42,.98);
  padding:60px 0;
  border-top:1px solid rgba(56,189,248,.1);
  width:100%;
  box-sizing:border-box;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.25fr 1.5fr 1.5fr 1.25fr;
  gap:50px;
  width:100%;
  max-width:1250px;
  margin:0 auto;
  padding:0 30px;
  box-sizing:border-box;
}
.footer-column{
  display:flex;
  flex-direction:column;
}
.footer-brand{
  margin-bottom:24px;
}
.footer-logo{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:16px;
}
.footer-logo svg{
  color:#38BDF8;
  flex-shrink:0;
}
.footer-logo .brand-logo-img{height:40px;width:auto;max-width:50px;object-fit:contain;flex-shrink:0;display:block;}
.footer-logo span{
  font-family:'Manrope',sans-serif;
  font-size:15px;
  font-weight:700;
  color:#fff;
  letter-spacing:-0.3px;
  line-height:1.15;
}
.footer-tagline{
  font-family:'Inter',sans-serif;
  font-size:14px;
  color:#38BDF8;
  margin-bottom:12px;
  font-weight:500;
}
.footer-description{
  font-family:'Inter',sans-serif;
  font-size:14px;
  color:rgba(255,255,255,.6);
  line-height:1.6;
  margin-bottom:24px;
}
.footer-social{
  display:flex;
  gap:12px;
}
.footer-social a{
  display:flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  background:rgba(56,189,248,.1);
  border:1px solid rgba(56,189,248,.2);
  border-radius:8px;
  color:rgba(56,189,248,.7);
  font-size:16px;
  transition:all .3s ease;
  flex-shrink:0;
}
.footer-social a:hover{
  background:rgba(56,189,248,.2);
  border-color:rgba(56,189,248,.4);
  color:#38BDF8;
  transform:translateY(-2px);
}
.footer-title{
  font-family:'Manrope',sans-serif;
  font-size:16px;
  font-weight:700;
  color:#fff;
  margin-bottom:20px;
  letter-spacing:-0.5px;
}
.footer-links{
  list-style:none;
  padding:0;
  margin:0;
}
.footer-links li{
  margin-bottom:10px;
}
.footer-links a{
  font-family:'Inter',sans-serif;
  font-size:14px;
  color:rgba(255,255,255,.6);
  text-decoration:none;
  transition:all .3s ease;
  display:block;
  word-break:normal;
  overflow-wrap:normal;
  white-space:normal;
}
.footer-links a:hover{
  color:#38BDF8;
  padding-left:4px;
}
.footer-contact{
  list-style:none;
  padding:0;
  margin:0;
  margin-bottom:20px;
}
.footer-contact li{
  display:flex;
  align-items:flex-start;
  gap:12px;
  margin-bottom:14px;
}
.footer-contact i{
  color:#38BDF8;
  font-size:16px;
  margin-top:2px;
  flex-shrink:0;
}
.footer-contact a,
.footer-contact span{
  font-family:'Inter',sans-serif;
  font-size:14px;
  color:rgba(255,255,255,.6);
  text-decoration:none;
  transition:all .3s ease;
  word-break:normal;
}
.footer-contact a:hover{
  color:#38BDF8;
}
.btn-footer-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px 24px;
  background:linear-gradient(135deg,#38BDF8 0%,#0EA5E9 100%);
  color:#fff;
  font-family:'Manrope',sans-serif;
  font-size:14px;
  font-weight:700;
  border-radius:10px;
  border:none;
  cursor:pointer;
  transition:all .3s ease;
  text-decoration:none;
  letter-spacing:.5px;
  text-transform:uppercase;
  box-shadow:0 4px 20px rgba(56,189,248,.3),0 0 14px rgba(56,189,248,.3);
}
.btn-footer-cta:hover{
  transform:translateY(-2px);
  background:linear-gradient(135deg,#7DD3FC 0%,#38BDF8 100%);
  box-shadow:0 6px 24px rgba(56,189,248,.5),0 0 20px rgba(56,189,248,.45);
}

/* Site Footer - Nuevo Footer */
.site-footer {
  background: linear-gradient(180deg, rgba(15,23,42,.98) 0%, rgba(8,12,20,.99) 100%);
  padding: 50px 0 20px 0;
  border-top: 1px solid rgba(56,189,248,.1);
  width: 100%;
  box-sizing: border-box;
}
.footer-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  max-width: 1250px;
  margin: 0 auto;
  padding: 0 30px;
  box-sizing: border-box;
  text-align: left;
}
.footer-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.brand-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.contact-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.footer-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
.footer-logo img {
  height: 40px;
  width: auto;
  max-width: 50px;
  object-fit: contain;
  flex-shrink: 0;
  display: block;
}
.footer-logo h3 {
  font-family: 'Manrope', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.3px;
  line-height: 1.15;
  margin: 0;
}
.footer-subtitle {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #38BDF8;
  margin-bottom: 4px;
}
.footer-desc {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: rgba(255,255,255,.6);
  line-height: 1.6;
  margin-bottom: 8px;
}
.social-links {
  display: flex;
  gap: 12px;
}
.social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: rgba(56,189,248,.1);
  border: 1px solid rgba(56,189,248,.2);
  border-radius: 8px;
  color: rgba(56,189,248,.7);
  font-size: 16px;
  transition: all .3s ease;
  flex-shrink: 0;
  text-decoration: none;
}
.social-links a:hover {
  background: rgba(56,189,248,.2);
  border-color: rgba(56,189,248,.4);
  color: #38BDF8;
  transform: translateY(-2px);
}
.footer-col h4 {
  font-family: 'Manrope', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 20px;
  letter-spacing: -0.5px;
  text-transform: uppercase;
}
.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-col ul li {
  margin-bottom: 10px;
}
.footer-col ul li a {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: rgba(255,255,255,.6);
  text-decoration: none;
  transition: all .3s ease;
  display: block;
  word-break: normal;
  overflow-wrap: normal;
  white-space: normal;
}
.footer-col ul li a:hover {
  color: #38BDF8;
  padding-left: 4px;
}
.footer-col p {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: rgba(255,255,255,.6);
  line-height: 1.6;
  margin-bottom: 8px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.footer-col p i {
  color: #38BDF8;
  font-size: 16px;
  margin-top: 2px;
  flex-shrink: 0;
}
.btn-quote-footer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  background: linear-gradient(135deg, #38BDF8 0%, #0EA5E9 100%);
  color: #fff;
  font-family: 'Manrope', sans-serif;
  font-size: 14px;
  font-weight: 700;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  transition: all .3s ease;
  text-decoration: none;
  letter-spacing: .5px;
  text-transform: uppercase;
  box-shadow: 0 4px 20px rgba(56,189,248,.3), 0 0 14px rgba(56,189,248,.3);
  margin-top: 8px;
}
.btn-quote-footer:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, #7DD3FC 0%, #38BDF8 100%);
  box-shadow: 0 6px 24px rgba(56,189,248,.5), 0 0 20px rgba(56,189,248,.45);
}

/* Footer Bottom Features */
.footer-bottom-features {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  max-width: 1250px;
  margin: 30px auto 0 auto;
  padding: 0 30px;
  box-sizing: border-box;
  border-top: 1px solid rgba(56,189,248,.08);
  padding-top: 24px;
}
.feature-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 16px;
  position: relative;
}
.feature-card:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 60%;
  background: rgba(56,189,248,.12);
}
.feature-card i {
  color: #38BDF8;
  font-size: 20px;
  margin-bottom: 10px;
}
.feature-card h5 {
  font-family: 'Manrope', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 4px 0;
  letter-spacing: -0.2px;
}
.feature-card p {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: rgba(255,255,255,.45);
  margin: 0;
  line-height: 1.5;
}

/* Footer Trust Bar */
.footer-trust{
  background:rgba(30,41,59,.8);
  padding:36px 0;
  border-top:1px solid rgba(56,189,248,.1);
  width:100%;
}
.trust-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
  width:100%;
  max-width:1250px;
  margin:0 auto;
  padding:0 30px;
  box-sizing:border-box;
}
.trust-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:0 24px;
  position:relative;
  transition:all .3s ease;
}
.trust-item:not(:last-child)::after{
  content:'';
  position:absolute;
  right:0;
  top:50%;
  transform:translateY(-50%);
  width:1px;
  height:50%;
  background:rgba(56,189,248,.12);
}
.trust-item:hover{
  opacity:0.9;
}
.trust-icon{
  flex-shrink:0;
  width:36px;
  height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#38BDF8;
  margin-bottom:12px;
  transition:all .3s ease;
}
.trust-item:hover .trust-icon{
  transform:translateY(-3px);
}
.trust-icon svg{
  width:36px;
  height:36px;
}
.trust-content{
  flex:1;
  min-width:0;
}
.trust-content h4{
  font-family:'Manrope',sans-serif;
  font-size:14px;
  font-weight:700;
  color:#fff;
  margin:0 0 8px 0;
  letter-spacing:-0.2px;
}
.trust-content p{
  font-family:'Inter',sans-serif;
  font-size:12px;
  color:rgba(255,255,255,.45);
  margin:0;
  line-height:1.5;
}

/* Footer Bottom */
.footer-bottom{
  background:rgba(15,23,42,1);
  padding:18px 0;
  border-top:1px solid rgba(56,189,248,.08);
  width:100%;
}
.footer-bottom-content{
  display:flex;
  justify-content:space-between;
  align-items:center;
  width:100%;
  max-width:1250px;
  margin:0 auto;
  padding:0 30px;
  box-sizing:border-box;
}
.footer-copyright{
  font-family:'Inter',sans-serif;
  font-size:12px;
  color:rgba(255,255,255,.35);
  margin:0;
  word-break:normal;
}
.footer-bottom-links{
  display:flex;
  align-items:center;
  gap:0;
}
.footer-bottom-links a{
  font-family:'Inter',sans-serif;
  font-size:12px;
  color:rgba(255,255,255,.45);
  text-decoration:none;
  transition:color .2s ease;
  word-break:normal;
}
.footer-bottom-links a:hover{
  color:#38BDF8;
}
.footer-separator{
  color:rgba(255,255,255,.15);
  margin:0 14px;
  font-size:12px;
}

@media (max-width:1099px){
  .footer-grid,
  .footer-container{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:32px;
  }
  .trust-grid{
    grid-template-columns:repeat(2,1fr);
    gap:40px 32px;
  }
  .trust-item{
    padding:0;
  }
  .trust-item:not(:last-child)::after{
    display:none;
  }
}

@media (max-width:767px){
  .footer-grid,
  .footer-container{
    grid-template-columns:1fr;
    gap:24px;
  }
  .brand-col {
    grid-column: span 1;
  }
  .trust-grid{
    grid-template-columns:1fr;
    gap:28px;
  }
  .trust-item{
    padding:0;
    text-align:center;
  }
  .trust-item:not(:last-child)::after{
    display:none;
  }
  .main-footer{
    padding:40px 0;
  }
  .footer-bottom-content{
    flex-direction:column;
    gap:12px;
    text-align:center;
  }
  .footer-bottom-links{
    justify-content:center;
    flex-wrap:wrap;
  }
  .footer-separator{
    display:inline-block;
  }
}

@media (max-width:480px){
  .footer-grid,
  .footer-container,
  .trust-grid,
  .footer-bottom-content{
    padding:0 20px;
  }
  .footer-container{
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  .brand-col {
    grid-column: span 1 !important;
  }
  .footer-bottom-features {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .footer-logo span{
    font-size:13px;
  }
  .footer-title{
    font-size:16px;
  }
  .footer-links a,
  .footer-contact a,
  .footer-contact span{
    font-size:14px;
  }
  .btn-footer-cta{
    width:100%;
    padding:14px 20px;
  }
  .trust-icon{
    width:32px;
    height:32px;
    margin-bottom:10px;
  }
  .trust-icon svg{
    width:32px;
    height:32px;
  }
  .trust-content h4{
    font-size:13px;
  }
  .trust-content p{
    font-size:11px;
  }
  .footer-bottom-links{
    flex-direction:column;
    gap:6px;
  }
  .footer-separator{
    display:none;
  }
}

/* Brand logo image - long company name responsive tweaks */
@media (max-width:1280px){
  .logo{font-size:12px;gap:8px;}
  .logo .brand-logo-img{height:38px;max-width:46px;}
}
@media (max-width:1024px){
  .logo{font-size:11px;gap:8px;}
  .logo .brand-logo-img{height:34px;max-width:42px;}
}
@media (max-width:480px){
  .logo{font-size:11px;gap:8px;}
  .logo .brand-logo-img{height:32px;max-width:40px;}
}

/* Logo Lightbox (click on brand-logo-img) */
.logo-lightbox{
  position:fixed;
  inset:0;
  z-index:2000;
  display:none;
  align-items:center;
  justify-content:center;
  background:radial-gradient(circle at center,rgba(0,0,0,.55) 0%,rgba(0,0,0,.85) 60%,rgba(0,0,0,.92) 100%);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  cursor:pointer;
  animation:logoLightboxFade .2s ease;
}
.logo-lightbox.open{display:flex;}
@keyframes logoLightboxFade{from{opacity:0;}to{opacity:1;}}
.logo-lightbox-img{
  width:min(360px,70vw);
  height:min(360px,70vw);
  border-radius:50%;
  object-fit:cover;
  cursor:default;
  box-shadow:0 20px 60px rgba(0,0,0,.6),0 0 0 6px rgba(56,189,248,.25);
  animation:logoLightboxPop .25s cubic-bezier(.2,.9,.3,1.2);
  background:#0B1426;
}
@keyframes logoLightboxPop{from{opacity:0;transform:scale(.7);}to{opacity:1;transform:scale(1);}}
.brand-logo-img,.whatsapp-profile{cursor:pointer;}

/* ==========================================================================
   UNIFIED HEADER (mirrors ubicacion.html exactly)
   !important is used on key properties because index.html / servicios.html
   have their own inline <style> block (loaded after styles.css) that also
   defines .logo, .btn-primary, .header-social, etc. !important guarantees
   the values below always win and the header looks identical to
   ubicacion.html on all three pages.
   ========================================================================== */
header{
  position:fixed !important;
  top:0;left:0;right:0;
  z-index:1000 !important;
  background:rgba(0,0,0,.5) !important;
  backdrop-filter:blur(16px) !important;
  -webkit-backdrop-filter:blur(16px) !important;
  border-bottom:1px solid rgba(56,189,248,.1) !important;
}
header nav{
  max-width:1320px !important;
  margin:0 auto !important;
  padding:0 22px !important;
  height:64px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
}
header .logo{
  font-family:'Manrope',sans-serif !important;
  font-weight:700 !important;
  font-size:12.5px !important;
  color:#fff !important;
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  letter-spacing:-0.2px !important;
  text-transform:none !important;
  min-width:0 !important;
  line-height:1.15 !important;
  white-space:nowrap !important;
}
header .logo .brand-logo-img{height:38px !important;width:auto !important;max-width:46px !important;object-fit:contain !important;flex-shrink:0 !important;display:block !important;}
header .logo .logo-text{
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
  line-height:1.15 !important;
  display:inline-block !important;
  font-size:12.5px !important;
  font-weight:700 !important;
  letter-spacing:-0.2px !important;
}
header .logo svg{color:#2196F3 !important;}
header .nav-cta{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
}
header .nav-cta a{
  font-family:'Inter',sans-serif !important;
  font-size:13.5px !important;
  color:#A3B0C3 !important;
  padding:6px 10px !important;
  border-radius:8px !important;
  transition:all .25s ease !important;
  white-space:nowrap !important;
  text-decoration:none !important;
  background:none !important;
  border:none !important;
  position:static !important;
  font-weight:400 !important;
}
header .nav-cta a::after{display:none !important;}
header .nav-cta a:hover{
  color:#fff !important;
  background:rgba(56,189,248,.1) !important;
}
header .btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:6px !important;
  padding:9px 16px !important;
  border-radius:8px !important;
  font-family:'Manrope',sans-serif !important;
  font-size:13.5px !important;
  font-weight:600 !important;
  cursor:pointer !important;
  transition:all .25s ease !important;
  border:none !important;
  text-decoration:none !important;
  opacity:1 !important;
  text-transform:none !important;
  letter-spacing:normal !important;
  color:inherit !important;
}
header .btn-primary{
  background:linear-gradient(135deg,#2196F3,#25A7FF) !important;
  color:#0B1220 !important;
  box-shadow:0 4px 16px rgba(56,189,248,.3) !important;
}
header .btn-primary:hover{
  transform:translateY(-1px) !important;
  box-shadow:0 6px 20px rgba(56,189,248,.5) !important;
}
header .btn-ghost{
  background:transparent !important;
  color:#A3B0C3 !important;
}
header .btn-ghost:hover{
  color:#fff !important;
  background:rgba(56,189,248,.1) !important;
}
header .header-social{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:36px !important;
  height:36px !important;
  color:#A3B0C3 !important;
  font-size:17px !important;
  transition:all .3s ease !important;
  margin-right:2px !important;
  text-decoration:none !important;
  background:transparent !important;
  border:none !important;
}
header .header-social:hover{color:#fff !important;transform:translateY(-2px) scale(1.15) !important;}
header .header-social:has(.fa-whatsapp):hover{color:#25D366 !important;text-shadow:0 0 12px rgba(37,211,102,.6) !important;}
header .header-social:has(.fa-facebook-f):hover{color:#1877F2 !important;text-shadow:0 0 12px rgba(24,119,242,.6) !important;}
header .header-social:has(.fa-instagram):hover{color:#E4405F !important;text-shadow:0 0 12px rgba(225,48,108,.6) !important;}
header .header-divider{
  width:1px !important;
  height:22px !important;
  background:rgba(56,189,248,.2) !important;
  margin:0 4px !important;
  flex-shrink:0 !important;
}
/* legacy header .mobile-menu-btn styles (now handled by .menu-toggle above) */

/* ===== Header dropdown (Servicios) ===== */
header .nav-cta .has-dropdown{position:relative !important;display:block !important;}
header .nav-cta .has-dropdown-trigger{display:flex !important;align-items:center !important;justify-content:center !important;gap:6px !important;width:fit-content !important;margin:0 auto !important;}
header .nav-cta .has-dropdown-label{padding-right:2px !important;}
header .dd-toggle{
  display:none;
  align-items:center;justify-content:center;
  width:32px;height:32px;flex-shrink:0;
  background:rgba(56,189,248,.08);
  border:1px solid rgba(56,189,248,.25);
  border-radius:8px;
  color:#7DD3FC;
  font-size:11px;cursor:pointer;
  margin-left:2px;
  transition:all .25s ease;
  -webkit-tap-highlight-color:transparent;
}
header .dd-toggle:hover{background:rgba(56,189,248,.18);border-color:rgba(56,189,248,.5);}
header .dd-toggle .dd-caret{transition:transform .3s cubic-bezier(.2,.9,.3,1.05);display:inline-block;transform-origin:center;}
header .has-dropdown.open .dd-toggle .dd-caret{transform:rotate(180deg);}
header .nav-dropdown{
  position:absolute;
  top:calc(100% + 6px);
  left:50%;
  transform:translateX(-50%) translateY(-6px);
  min-width:230px;
  background:rgba(11,18,32,.97);
  border:1px solid rgba(56,189,248,.25);
  border-radius:12px;
  padding:8px;
  box-shadow:0 18px 40px rgba(0,0,0,.55),0 0 0 1px rgba(56,189,248,.08);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  display:none;
  z-index:1100;
}
header .nav-dropdown::before{
  content:'';
  position:absolute;
  top:-6px;left:50%;
  transform:translateX(-50%) rotate(45deg);
  width:10px;height:10px;
  background:rgba(11,18,32,.97);
  border-left:1px solid rgba(56,189,248,.25);
  border-top:1px solid rgba(56,189,248,.25);
}
header .nav-dropdown a{
  display:flex !important;
  align-items:center;
  gap:10px;
  padding:10px 14px !important;
  border-radius:8px;
  font-family:'Inter',sans-serif;
  font-size:14px;
  color:#A3B0C3;
  text-decoration:none;
  width:100%;
  text-align:left;
  background:none !important;
  border:none !important;
  position:static !important;
  white-space:nowrap;
  transition:all .2s ease;
}
header .nav-dropdown a:hover{
  color:#fff;
  background:rgba(56,189,248,.1) !important;
}
header .nav-dropdown a i{
  color:#38BDF8;
  font-size:13px;
  width:16px;
  text-align:center;
}
/* Open on hover (desktop) or .open (click) */
header .nav-cta .has-dropdown:hover .nav-dropdown,
header .nav-cta .has-dropdown.open .nav-dropdown{
  display:block;
  animation:navDropdownIn .18s ease forwards;
}
/* On touch devices, prevent sticky :hover from re-opening the menu after toggle close */
@media (hover: none){
  header .nav-cta .has-dropdown:hover .nav-dropdown{display:none;}
  header .nav-cta .has-dropdown.open .nav-dropdown{display:block;}
}
@keyframes navDropdownIn{
  from{opacity:0;transform:translateX(-50%) translateY(-10px);}
  to{opacity:1;transform:translateX(-50%) translateY(0);}
}
/* On mobile (when .nav-cta is a vertical panel), the dropdown is inline */
@media (max-width:900px){
  header .nav-cta{
    align-items:center !important;
  }
  header .nav-cta a{text-align:center !important;}
  header .nav-cta .has-dropdown{width:100% !important;}
  header .nav-cta .has-dropdown-trigger{
    width:fit-content !important;
    margin:0 auto !important;
  }
  header .dd-toggle{display:inline-flex !important;}
  header .nav-dropdown{
    position:static !important;
    transform:none !important;
    background:rgba(5,6,8,.6) !important;
    border:1px solid rgba(56,189,248,.15) !important;
    box-shadow:none !important;
    border-radius:10px !important;
    margin:6px auto 6px !important;
    min-width:0 !important;
    padding:6px !important;
    display:none;
    animation:none !important;
    width:100% !important;
  }
  header .nav-dropdown::before{display:none !important;}
  header .nav-cta .has-dropdown.open .nav-dropdown{display:block;}
  header .nav-dropdown a{
    padding:10px 12px !important;
    font-size:14px !important;
    justify-content:center !important;
    text-align:center !important;
  }
  /* Center the Cotizar (btn-primary) button in mobile menu */
  header .nav-cta .btn-primary{
    width:fit-content !important;
    margin:0 auto !important;
    align-self:center !important;
  }
}

/* Header responsive - now handled by .header-desktop-nav / .menu-toggle above */

/* Ocultar en escritorio */
@media (min-width: 992px) {
  .mobile-menu-overlay, #mobileMenu {
    display: none !important;
  }
}

/* Estilos de menú móvil */
@media (max-width: 991px) {
  .mobile-menu-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: url('img/Fondo_Menu.webp') no-repeat center center / cover !important;
    z-index: 99999 !important;
    display: none;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    touch-action: pan-y !important;
  }

  .mobile-menu-overlay.active,
  .mobile-menu-overlay.is-open,
  .mobile-menu-overlay[aria-hidden="false"] {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 70px 20px 30px 20px !important;
    box-sizing: border-box !important;
  }

  /* FORZAR FLUJO VERTICAL EN TODOS LOS CONTENEDORES INTERNOS */
  .mobile-menu-content,
  .mobile-menu-nav,
  .mobile-menu-header,
  .mobile-menu-footer,
  .mobile-menu-cta {
    position: static !important;
    transform: none !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    max-width: 300px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
  }
  .mobile-menu-header{margin-bottom:14px !important;gap:8px;}
  .mobile-menu-nav{gap:8px;margin-bottom:14px !important;}
  .mobile-menu-cta{margin-top:6px !important;margin-bottom:14px !important;}
  .mobile-menu-footer{margin-top:18px !important;gap:10px;}

  /* ESTILOS DE BOTONES INDIVIDUALES (CADA UNO EN SU PROPIA FILA) */
  .mobile-menu-nav a,
  .mobile-menu-nav .menu-btn,
  .btn-cotizar-mobile {
    position: static !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 46px !important;
    margin: 0 !important;
    padding: 0 16px !important;
    box-sizing: border-box !important;
    text-decoration: none !important;
    flex-shrink: 0 !important;
    text-align: center !important;
    letter-spacing: 1px !important;
  }

  /* Los 4 links de navegacion (Inicio, Sobre nosotros, Servicios, Ubicacion)
     con texto alineado a la IZQUIERDA, como una lista vertical.
     El icono va pegado al borde izquierdo y el texto empieza en
     la misma columna en todos los botones. */
  .mobile-menu-nav a,
  .mobile-menu-nav .menu-btn {
    justify-content: flex-start !important;
    text-align: left !important;
    padding: 0 14px 0 16px !important;
  }
  .mobile-menu-nav a > i,
  .mobile-menu-nav .menu-btn > i,
  .mobile-menu-nav .menu-btn > .menu-icon {
    flex: 0 0 18px !important;
    width: 18px !important;
    min-width: 18px !important;
    margin-right: 12px !important;
    text-align: center !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .mobile-menu-nav a > i + *,
  .mobile-menu-nav .menu-btn > i + * {
    flex: 0 0 auto !important;
    text-align: left !important;
    margin-left: 0 !important;
  }
  /* Cuando el boton no tiene icono (Cotizar tiene icono, pero por si acaso) */
  .btn-cotizar-mobile{
    letter-spacing: 1.5px !important;
  }

  /* CONTENEDOR DE SERVICIOS Y FLECHA */
  .services-accordion-wrapper {
    position: static !important;
    display: flex !important;
    flex-direction: row !important;
    width: 100% !important;
    gap: 8px !important;
    margin: 0 !important;
    align-items: stretch !important;
    flex-shrink: 0 !important;
    height: 46px !important;
  }

  .services-accordion-wrapper .menu-btn,
  .services-accordion-wrapper .service-link {
    flex: 1 !important;
    margin: 0 !important;
    padding: 0 16px !important;
    text-align: center !important;
    letter-spacing: 1px !important;
  }

  .accordion-toggle-btn {
    position: static !important;
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
  }

  /* Submenu servicios */
  .services-dropdown{
    width:100% !important;
    margin: 6px 0 0 0 !important;
  }
  .services-dropdown a{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
    letter-spacing:.8px !important;
    gap:8px !important;
  }
  .services-dropdown a > i{
    width:16px !important;
    min-width:16px !important;
    margin-right:4px !important;
    text-align:center !important;
  }

  /* BOTÓN DE CERRAR X EN LA ESQUINA SUPERIOR DERECHA */
  .close-menu-btn, #closeMenu, .mobile-menu-close {
    position: absolute !important;
    top: 18px !important;
    right: 18px !important;
    z-index: 100000 !important;
  }

  /* Iconos sociales del footer: misma alineacion que el resto */
  .social-icons,
  .mobile-menu-socials-icons{
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    gap:14px !important;
  }

/* Evitar scroll del body cuando el menú móvil está abierto */
  body.menu-open{
    overflow: hidden !important;
    touch-action: none !important;
  }

  /* Cuando el menu esta abierto, los panes de Leaflet y popups no deben
     renderizarse encima del overlay. Forzar z-index bajo + visibility
     hidden para evitar que se filtren al hacer scroll o al abrir el menu. */
  body.menu-open .leaflet-pane,
  body.menu-open .leaflet-control-container,
  body.menu-open .leaflet-popup-pane,
  body.menu-open .leaflet-tooltip-pane,
  body.menu-open .map-radius-label,
  body.menu-open .map-area-label,
  body.menu-open .map-container,
  body.menu-open #map{
    visibility: hidden !important;
    pointer-events: none !important;
    z-index: 0 !important;
  }

  /* Header se oculta cuando el menu esta abierto */
  body.menu-open .header-nav{
    visibility: hidden !important;
  }
}

/* =============================================================================
   RESPONSIVE FIX PACK (mobile only — desktop untouched)
   Breakpoints: 768px, 430px, 414px, 390px, 375px, 360px, 320px
   Goal: eliminar overflow horizontal y ajustar elementos que se desbordan.
   ============================================================================= */

/* Bloqueo global de overflow horizontal solo en mobile */
@media (max-width: 768px){
  html, body{
    overflow-x: hidden !important;
    max-width: 100% !important;
  }
  body > *{ max-width: 100%; }
  img, svg, video, iframe{ max-width: 100%; height: auto; }

  /* Header brand: el texto multi-línea puede forzar ancho en pantallas muy
     pequeñas. Permitir wrap y limitar ancho del contenedor del logo. */
  .brand-text{
    white-space: normal !important;
    overflow-wrap: anywhere;
    font-size: 11px;
    line-height: 1.15;
  }
  .brand-logo-img{ max-width: 38px; }

  /* Hero: títulos largos no deben expandir la página */
  .hero h1{ letter-spacing: -1px; }
  .hero p.lead{ max-width: 100%; }

  /* WhatsApp widget del hero: que no se salga del card */
  .whatsapp-widget{ width: 100%; max-width: 100%; }
  .whatsapp-input{ min-width: 0; }
  .whatsapp-input-area{ flex-wrap: wrap; }
  .emoji-picker{ max-width: calc(100vw - 32px); }

  /* Form columns en una sola columna para que no se corten */
  .form-row{ grid-template-columns: 1fr !important; gap: 14px; }

  /* Footer: 4 columnas -> 2 columnas en tablet, 1 en móvil más pequeño */
  .footer-grid,
  .footer-container { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .footer-column,
  .footer-col { min-width: 0; }
  .footer-links, .footer-contact{ padding: 0; }

  /* Nuevo Footer - Mobile */
  .footer-container {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 25px 15px !important;
    text-align: left !important;
  }
  .brand-col {
    grid-column: span 2 !important;
  }
  .footer-bottom-features {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 15px !important;
    padding: 20px 10px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }

  /* CTA Final / banners: que el padding no rompa */
  .cta-content, .cta-banner-content{ padding: 16px !important; }
  .cta-title, .form-title{ letter-spacing: -0.5px; }

  /* Inputs teléfono: country dropdown ancho fijo puede desbordar */
  .country-dropdown{ width: calc(100vw - 40px); max-width: 320px; }

  /* Modal: ocupar ancho seguro en pantallas pequeñas */
  .modal-overlay{ padding: 12px; }
  .modal-box{ width: 100%; max-width: 100%; }
  .modal-header, .modal-body{ padding-left: 16px; padding-right: 16px; }

  /* Beneficios / grids: 1 columna si están en 2 */
  .cta-benefits{ grid-template-columns: 1fr; }

  /* Confianza (4 items) -> 2 columnas */
  .trust-grid{ grid-template-columns: repeat(2, 1fr); gap: 16px; }

  /* Botones en columna ya, asegurar que no excedan */
  .hero-ctas .btn, .cta-buttons .btn{ width: 100%; min-width: 0; }

  /* Imágenes grandes responsivas */
  .cta-image, .cta-carrito-image{ max-width: 100%; height: auto; }

  /* Sección contact form: grid a 1 columna */
  .form-container{ grid-template-columns: 1fr !important; gap: 20px; }
}

/* 430px (iPhone 14 Pro Max / Pixel 7 Plus) */
@media (max-width: 430px){
  .header-nav{ padding: 0 12px; gap: 8px; }
  .brand-text{ font-size: 10.5px; }
  .brand-logo-img{ height: 30px; max-width: 36px; }
  .menu-toggle{ width: 44px; height: 44px; min-width: 44px; min-height: 44px; }
  .hero h1{ font-size: clamp(1.7rem, 8vw, 2.2rem); }
  .hero-card{ padding: 12px 14px; }
  .hero-card-text{ font-size: 12px; }
  .footer-grid,
  .footer-container{ gap: 18px; }
  .trust-grid{ gap: 12px; }
  .trust-content h4{ font-size: 13px; }
  .trust-content p{ font-size: 12px; }
}

/* 414px (iPhone Plus) */
@media (max-width: 414px){
  .container, .wrap{ padding-left: 14px; padding-right: 14px; }
  .hero h1{ font-size: clamp(1.6rem, 8vw, 2.1rem); letter-spacing: -1px; }
  .hero p.lead{ font-size: 14.5px; line-height: 1.6; }
  .cta-title, .form-title{ font-size: clamp(1.4rem, 7vw, 1.9rem); }
  .footer-title{ font-size: 13px; }
  .footer-tagline, .footer-description{ font-size: 12.5px; }
}

/* 390px (iPhone 13/14) */
@media (max-width: 390px){
  .brand-text{ font-size: 10px; }
  .brand-logo-img{ height: 28px; max-width: 32px; }
  .hero h1{ font-size: 1.85rem; }
  .hero-ctas .btn{ font-size: 13px; padding: 0 12px; }
  .cta-button{ padding: 12px 18px; font-size: 13px; }
  .btn-cta-primary, .btn-cta-whatsapp{ padding: 10px 14px; font-size: 12.5px; }
  .form-control{ padding: 11px 12px; font-size: 13px; }
}

/* 375px (iPhone SE / mini) */
@media (max-width: 375px){
  .header-nav{ padding: 0 10px; }
  .brand-text{ font-size: 9.5px; }
  .menu-toggle{ width: 42px; height: 42px; min-width: 42px; min-height: 42px; }
  .hero h1{ font-size: 1.7rem; line-height: 1.1; }
  .hero-cards{ gap: 10px; }
  .hero-card{ padding: 10px 12px; gap: 10px; }
  .hero-card-icon{ width: 32px; height: 32px; }
  .hero-card-text{ font-size: 11.5px; }
  .footer-grid,
  .footer-container{ grid-template-columns: 1fr; gap: 20px; }
  .trust-grid{ grid-template-columns: 1fr; }
  .country-selector{ min-width: 90px; padding: 0 10px; }
  .phone-input-wrapper input[type="tel"]{ padding: 12px 12px; font-size: 13px; }
  .cta-banner-content, .cta-content{ padding: 14px !important; }
}

/* 360px (Android común) */
@media (max-width: 360px){
  .brand-text{ font-size: 9px; line-height: 1.1; }
  .brand-logo-img{ height: 26px; max-width: 30px; }
  .hero h1{ font-size: 1.55rem; letter-spacing: -0.5px; }
  .hero p.lead{ font-size: 13.5px; }
  .hero-card-text{ font-size: 11px; }
  .footer-tagline{ font-size: 12px; }
  .form-control{ padding: 10px 11px; font-size: 12.5px; }
  .form-label{ font-size: 11px; }
  .country-selector{ min-width: 80px; padding: 0 8px; }
  .country-selector .dial-code{ font-size: 13px; }
  .modal-overlay{ padding: 8px; }
  .modal-header, .modal-body{ padding-left: 12px; padding-right: 12px; }
}

/* 320px (mínimo) */
@media (max-width: 320px){
  html, body{ overflow-x: hidden !important; }
  .header-nav{ padding: 0 8px; }
  .brand-text{ font-size: 8.5px; }
  .brand-logo-img{ height: 24px; max-width: 28px; }
  .menu-toggle{ width: 40px; height: 40px; min-width: 40px; min-height: 40px; }
  .hero h1{ font-size: 1.35rem; }
  .hero p.lead{ font-size: 12.5px; line-height: 1.5; }
  .hero-cards{ grid-template-columns: 1fr; }
  .hero-card{ padding: 9px 10px; }
  .hero-card-icon{ width: 28px; height: 28px; }
  .hero-card-icon svg{ width: 16px; height: 16px; }
  .hero-card-text{ font-size: 10.5px; }
  .country-dropdown{ width: calc(100vw - 24px); left: 0; }
  .modal-overlay{ padding: 6px; }
  .modal-box{ border-radius: 14px; }
  .form-control{ padding: 9px 10px; font-size: 12px; }
  .cta-title, .form-title{ font-size: 1.25rem; }
  .footer-title{ font-size: 12px; }
}

/* =============================================================================
   MENÚ HAMBURGUESA — Fondo de video (videos/Fondo_Menu.mp4)
   Reemplaza el fondo estático anterior. El video queda detrás de todos los
   elementos del menú. No se modifican botones, textos, logo ni animaciones.
   ============================================================================= */
/* Neutralizar el background-image estático previo (regla !important existente)
   para que el video sea el fondo visible. La imagen webp se conserva como
   fallback dentro del <video> (background) por si el video no carga. */
.mobile-menu-overlay.mobile-menu-overlay{
  background-image: none !important;
  background-color: #050810 !important;
}
.mobile-menu-video{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    z-index: -1 !important;
    pointer-events: none !important;
    display: block;
    background: url('img/Fondo_Menu.webp') no-repeat center center / cover;
  }
  #hero-video{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    object-fit:cover;
    z-index:-1 !important;
    pointer-events:none !important;
    display:block;
  }
  #hero-video::-webkit-media-controls{display:none !important;}
  #hero-video::-webkit-media-controls-enclosure{display:none !important;}
  #hero-video::-webkit-media-controls-panel{display:none !important;}
  .checklist-hero-video{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    object-fit:cover;
    z-index:-1 !important;
    pointer-events:none !important;
    display:block;
  }
  .checklist-hero-video::-webkit-media-controls{display:none !important;}
  .checklist-hero-video::-webkit-media-controls-enclosure{display:none !important;}
 .checklist-hero-video::-webkit-media-controls-panel{display:none !important;}
 /* Asegurar que el contenido del menú quede por encima del video */
.mobile-menu-overlay > .mobile-menu-close,
.mobile-menu-overlay > .mobile-menu-content{
  position: relative;
  z-index: 2;
}

/* Responsive del video en los breakpoints solicitados:
   - object-fit: cover mantiene proporción sin deformar.
   - En pantallas muy pequeñas, se centra y limita para no desbordar. */
@media (max-width: 768px){
   .mobile-menu-video{
     width: 100%;
     height: 100%;
     max-width: 100%;
     object-fit: cover;
     pointer-events: none !important;
   }
 }
@media (max-width: 430px){
  .mobile-menu-video{ object-position: center center; }
}
@media (max-width: 414px){
  .mobile-menu-video{ object-position: center center; }
}
@media (max-width: 390px){
  .mobile-menu-video{ object-fit: cover; }
}
@media (max-width: 375px){
  .mobile-menu-video{ object-fit: cover; }
}
@media (max-width: 360px){
  .mobile-menu-video{
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
@media (max-width: 320px){
  .mobile-menu-video{
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: cover;
    object-position: center center;
  }
}

/* =============================================================================
   RESPONSIVE SOURCE FIXES (Android overflow root causes)
   Cada regla corrige UN elemento que provoca desbordamiento horizontal en
   Android (donde el text-rendering es más estricto que en iPhone).
   No se rediseña nada: solo se limitan anchos, se quita nowrap abusivo y
   se permite box-sizing para que los elementos respeten su contenedor.
   ============================================================================= */

/* Permitir que los contenedores flex/grid reduzcan su contenido por debajo
   del tamaño intrínseco. Sin esto, los textos largos fuerzan el ancho. */
@media (max-width: 768px){
  .hero-content, .hero-right, .hero-ctas, .hero-cards, .hero-card,
  .whatsapp-widget, .whatsapp-header, .whatsapp-header-content,
  .whatsapp-chat-area, .whatsapp-input-area,
  .services-grid, .service-card, .service-body, .service-features,
  .footer-cta, .cta-banner, .cta-banner-content, .cta-buttons,
  .cta-text, .form-container, .form-row, .form-field{
    min-width: 0;
    max-width: 100%;
  }

  /* Hero WhatsApp widget: el max-width fijo de 380px más la animación de
     translateY no es el problema; el problema es que el header tiene un
     nombre largo con nowrap. Permitimos wrap a partir de 768px. */
.whatsapp-name{
     white-space: normal;
     overflow-wrap: anywhere;
     word-break: break-word;
     line-height: 1.25;
     font-size: 14px;
   }

   /* WhatsApp widget modal: oculto por defecto, visible solo con .active-modal */
   .whatsapp-widget{
     display:none !important;
   }
.whatsapp-widget.active-modal{
      display:flex !important;
      animation:none !important;
    }

    /* Hero CTAs: el botón "COTIZAR POR WHATSAPP" tiene nowrap heredado y
      un icono + texto largo. Forzamos box-sizing y permitimos wrap interno
      para que no se extienda fuera del viewport. */
    .hero-ctas{ box-sizing: border-box; }
  .hero-ctas .btn{
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
    white-space: normal;
    text-align: center;
    line-height: 1.2;
    padding: 12px 14px;
    height: auto;
    min-height: 48px;
  }

  /* Hero cards: textos largos como "Servicio Programado" empujaban la
     celda grid. Permitimos wrap y min-width 0 en cada celda. */
  .hero-cards > *{ min-width: 0; }
  .hero-card{ box-sizing: border-box; }
  .hero-card-text{
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
    line-height: 1.3;
    flex: 1;
    min-width: 0;
  }

  /* WhatsApp input area: el input + emoji + send (40+flex+44 = >100%) podían
     desbordar en Android. Forzamos box-sizing y min-width 0 en el input. */
  .whatsapp-input-area{
    box-sizing: border-box;
    gap: 8px;
    flex-wrap: nowrap;
  }
  .whatsapp-input{
    box-sizing: border-box;
    min-width: 0;
    width: auto;
    flex: 1 1 auto;
  }

  /* Emoji picker ancho fijo de 320px → desbordaba en <360px. */
  .emoji-picker{
    width: calc(100% - 8px);
    max-width: 320px;
    box-sizing: border-box;
  }

  /* Service cards: grid de 1 columna en móvil pero la celda puede exceder
     si su contenido tiene min-width intrínseco. */
  .service-card{ box-sizing: border-box; }
  .service-body, .service-features{ min-width: 0; max-width: 100%; }
  .service-feature-text{
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.2;
  }

  /* Footer CTA buttons: asegurar que no excedan la columna */
  .cta-buttons > *{
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }
  .btn-cta-primary, .btn-cta-whatsapp{
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
    white-space: normal;
    text-align: center;
    line-height: 1.2;
    padding: 12px 16px;
    height: auto;
    min-height: 48px;
  }
}

/* 430px (Pixel 7 Plus / iPhone 14 Pro Max) */
@media (max-width: 430px){
  .whatsapp-name{ font-size: 13px; }
  .hero-ctas .btn{ font-size: 13px; padding: 10px 12px; }
  .hero-card-text{ font-size: 12px; }
  .btn-cta-primary, .btn-cta-whatsapp{ font-size: 13px; }
}

/* 414px / 412px / 393px (rango Android común) */
@media (max-width: 414px){
  .whatsapp-widget{
    /* Quitar min-height agresivo en pantallas estrechas para que no
       fuerce altura que combine con paddings del grid. */
    min-height: 380px;
  }
  .whatsapp-name{ font-size: 12.5px; }
  .hero-card{ padding: 11px 12px; gap: 10px; }
}

/* 390px / 393px (Pixel 7 / iPhone 13) */
@media (max-width: 393px){
  .whatsapp-input{ font-size: 13px; padding: 10px 14px; }
  .whatsapp-emoji-btn, .whatsapp-send-btn{ width: 38px; height: 38px; }
}

/* 375px (iPhone SE / mini) */
@media (max-width: 375px){
  .whatsapp-widget{ min-height: 360px; }
  .whatsapp-name{ font-size: 12px; }
  .whatsapp-message{ max-width: 88%; }
  .hero-card-text{ font-size: 11.5px; }
}

/* 360px (Android común) */
@media (max-width: 360px){
  .whatsapp-widget{ min-height: 340px; max-width: 100%; }
  .whatsapp-header{ padding: 12px 14px; gap: 10px; }
  .whatsapp-profile{ width: 38px; height: 38px; }
  .whatsapp-input{ font-size: 12.5px; padding: 10px 12px; }
  .hero-card-text{ font-size: 11px; }
  .emoji-picker{ width: calc(100vw - 32px); max-width: 280px; left: -4px; }
}

/* 320px (mínimo absoluto) */
@media (max-width: 320px){
   .whatsapp-widget{ min-height: 320px; }
   .whatsapp-header{ padding: 10px 12px; gap: 8px; }
   .whatsapp-profile{ width: 34px; height: 34px; }
   .whatsapp-name{ font-size: 11.5px; line-height: 1.2; }
   .whatsapp-input-area{ gap: 6px; padding: 10px 12px; }
   .whatsapp-input{ font-size: 12px; padding: 8px 12px; }
   .whatsapp-emoji-btn, .whatsapp-send-btn{ width: 34px; height: 34px; }
   .hero-card{ padding: 8px 10px; gap: 8px; }
   .hero-card-icon{ width: 26px; height: 26px; }
   .hero-card-text{ font-size: 10.5px; }
}

/* ==========================================================================
   FOOTER UNIFICADO - Nueva estructura para todas las páginas
   ========================================================================== */

.site-footer{
   background:linear-gradient(180deg, rgba(15,23,42,.98) 0%, rgba(8,12,20,.99) 100%);
   padding:50px 0 20px 0;
   border-top:1px solid rgba(56,189,248,.1);
   width:100%;
   box-sizing:border-box;
}

.footer-container{
   display:grid;
   grid-template-columns:1.25fr 1.5fr 1.5fr 1.25fr;
   gap:50px;
   width:100%;
   max-width:1250px;
   margin:0 auto;
   padding:0 30px;
   box-sizing:border-box;
}

.footer-col{
   display:flex;
   flex-direction:column;
   gap:14px;
}

.brand-col{
   display:flex;
   flex-direction:column;
   gap:14px;
}

.contact-col{
   display:flex;
   flex-direction:column;
   gap:14px;
}

.footer-logo{
   display:flex;
   align-items:center;
   gap:12px;
   margin-bottom:8px;
}

.footer-logo img{
   height:40px;
   width:auto;
   max-width:50px;
   object-fit:contain;
   flex-shrink:0;
   display:block;
   cursor:pointer;
}

.footer-logo h3{
   font-family:'Manrope',sans-serif;
   font-size:15px;
   font-weight:700;
   color:#fff;
   letter-spacing:-0.3px;
   line-height:1.15;
   margin:0;
}

.footer-subtitle{
   font-family:'Inter',sans-serif;
   font-size:14px;
   font-weight:600;
   color:var(--blue-bright);
   margin-bottom:4px;
}

.footer-desc{
   font-family:'Inter',sans-serif;
   font-size:13px;
   color:#A3B0C3;
   line-height:1.6;
   margin-bottom:8px;
}

.social-links{
   display:flex;
   gap:10px;
   margin-top:4px;
}

.social-links a{
   display:flex;
   align-items:center;
   justify-content:center;
   width:38px;
   height:38px;
   border-radius:10px;
   background:rgba(56,189,248,.1);
   color:#38BDF8;
   font-size:16px;
   transition:all .25s ease;
   text-decoration:none;
}

.social-links a:hover{
   background:rgba(56,189,248,.2);
   transform:translateY(-2px);
}

.footer-col h4{
   font-family:'Manrope',sans-serif;
   font-size:13px;
   font-weight:700;
   color:#fff;
   text-transform:uppercase;
   letter-spacing:1.5px;
   margin-bottom:6px;
}

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

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

.footer-col ul li a{
   font-family:'Inter',sans-serif;
   font-size:14px;
   color:#A3B0C3;
   transition:color .2s ease;
   text-decoration:none;
}

.footer-col ul li a:hover{
   color:#38BDF8;
}

.footer-col p{
   font-family:'Inter',sans-serif;
   font-size:14px;
   color:#A3B0C3;
   line-height:1.6;
   margin-bottom:8px;
   display:flex;
   align-items:flex-start;
   gap:10px;
}

.footer-col p i{
   color:#38BDF8;
   font-size:14px;
   width:18px;
   text-align:center;
}

.btn-quote-footer{
   display:inline-flex;
   align-items:center;
   justify-content:center;
   gap:8px;
   padding:12px 24px;
   background:linear-gradient(135deg,#38BDF8 0%,#0EA5E9 100%);
   color:#fff;
   border-radius:10px;
   font-family:'Manrope',sans-serif;
   font-size:13px;
   font-weight:700;
   letter-spacing:.5px;
   text-transform:uppercase;
   transition:all .3s ease;
   box-shadow:0 4px 16px rgba(56,189,248,.3),0 0 12px rgba(56,189,248,.25);
   text-decoration:none;
   margin-top:18px;
}

.btn-quote-footer:hover{
   transform:translateY(-2px);
   background:linear-gradient(135deg,#7DD3FC 0%,#38BDF8 100%);
   box-shadow:0 8px 24px rgba(56,189,248,.5),0 0 20px rgba(56,189,248,.4);
}

/* Cuadrícula de 4 Tarjetas de Beneficios */
.footer-features-grid{
   display:grid !important;
   grid-template-columns:repeat(2,1fr) !important;
   gap:20px 15px !important;
   padding:30px 15px !important;
   border-top:1px solid rgba(255,255,255,0.1) !important;
   text-align:center !important;
 }
 
 .feature-card{
   display:flex !important;
   flex-direction:column !important;
   align-items:center !important;
   text-align:center !important;
   border:none !important;
   padding:10px !important;
 }
 
 .feature-card i,
 .feature-card .icon{
   font-size:28px !important;
   color:#00a8ff !important;
   margin-bottom:10px !important;
   display:inline-block !important;
 }
 
 .feature-card h5{
   font-family:'Manrope',sans-serif;
   font-size:14px;
   font-weight:700;
   color:#fff;
   margin:0 0 4px 0;
 }
 
 .feature-card p{
   font-family:'Inter',sans-serif;
   font-size:12px;
   color:#A3B0C3;
   line-height:1.4;
   margin:0;
 }

/* Bloque Final Legal y Copyright */
.footer-bottom-copyright{
   text-align:center;
   padding:20px 30px;
   border-top:1px solid rgba(56,189,248,.05);
   max-width:1250px;
   margin:0 auto;
   box-sizing:border-box;
}

.footer-bottom-copyright p{
   font-family:'Inter',sans-serif;
   font-size:13px;
   color:#A3B0C3;
   margin-bottom:10px;
}

.legal-links{
   display:flex;
   justify-content:center;
   gap:20px;
   flex-wrap:wrap;
}

.legal-links a{
   font-family:'Inter',sans-serif;
   font-size:13px;
   color:#A3B0C3;
   text-decoration:none;
   transition:color .2s ease;
}

.legal-links a:hover{
   color:#38BDF8;
}

/* ==========================================================================
   FOOTER RESPONSIVE - Móvil
   ========================================================================== */

@media (max-width:1099px){
   .footer-container{
      grid-template-columns:1fr 1fr !important;
      gap:30px 20px !important;
   }
   .brand-col{
      grid-column: span 2 !important;
   }
   .contact-col{
      grid-column: span 2 !important;
   }
}

@media (max-width:768px){
   .site-footer{
      width:100% !important;
      padding:30px 20px !important;
      box-sizing:border-box !important;
      text-align:center !important;
   }

   .footer-container{
      display:grid !important;
      grid-template-columns:1fr 1fr !important;
      gap:25px 15px !important;
      text-align:left !important;
      padding:0 15px !important;
   }

   /* Centrado de la marca */
   .brand-col{
      grid-column: span 2 !important;
      text-align:center !important;
      display:flex !important;
      flex-direction:column !important;
      align-items:center !important;
   }

   .social-links{
      justify-content:center !important;
   }

/* Centrado de la sección de contacto y botón */
    .contact-col{
       grid-column: span 2 !important;
       text-align:center !important;
       display:flex !important;
       flex-direction:column !important;
       align-items:center !important;
    }

    /* Enlaces Rápidos y Servicios en 2 columnas lado a lado */
    .footer-col:nth-child(2),
    .nav-col {
       grid-column: 1 !important;
       text-align: left !important;
    }
    .footer-col:nth-child(3),
    .services-col {
       grid-column: 2 !important;
       text-align: left !important;
    }

 .btn-quote-footer{
       width:100% !important;
       max-width:280px !important;
       margin:15px auto 0 auto !important;
       margin-bottom:35px !important;
       display:inline-block !important;
    }

/* Cuadrícula de 4 tarjetas en 2 columnas */
    .footer-features-grid,
    .footer-bottom-features {
       display:grid !important;
       grid-template-columns:1fr 1fr !important;
       gap:25px 12px !important;
       padding-top:30px !important;
       padding-bottom:30px !important;
       margin-top:20px !important;
       border-top:1px solid rgba(255,255,255,0.1) !important;
    }

    .feature-card{
       display:flex !important;
       flex-direction:column !important;
       align-items:center !important;
       text-align:center !important;
       width:100% !important;
       box-sizing:border-box !important;
       border:none !important;
       padding:5px !important;
    }
    .feature-card i{
       font-size:28px !important;
       color:#00a8ff !important;
    }

    /* Bloque final de Copyright y legales */
   .footer-bottom-copyright{
      text-align:center !important;
      padding:20px 15px !important;
      border-top:1px solid rgba(255,255,255,0.05);
      font-size:0.8rem !important;
   }

   .legal-links{
      display:flex !important;
      flex-direction:column !important;
      gap:8px !important;
      margin-top:10px !important;
   }
}

@media (max-width:480px){
   .footer-container{
      grid-template-columns:1fr !important;
      gap:28px !important;
      padding:0 20px !important;
   }
   .brand-col,
   .nav-col,
   .services-col,
   .contact-col{
      grid-column: span 1 !important;
   }
.footer-features-grid,
        .footer-bottom-features{
         grid-template-columns:1fr 1fr !important;
         gap:15px 8px !important;
         padding:0 20px !important;
     }
     .feature-card{padding:5px !important;}
     .feature-card i{font-size:24px !important;}
    .footer-logo span{font-size:13px;line-height:1.15;}
   .footer-col h4{font-size:16px;}
   .footer-col ul li a,.footer-col p{font-size:14px;}
}

@media (max-width:375px){
   .footer-container{
      padding:0 10px !important;
      gap:20px !important;
   }
   .footer-features-grid{
      padding:20px 10px !important;
      gap:15px 5px !important;
   }
   .feature-card h5{font-size:13px;}
   .feature-card p{font-size:11px;}
   .footer-bottom-copyright{
      padding:15px 10px !important;
   }
}


/* ABOUT HERO - Video background with centered single column */
.hero-overlay {
  display: none !important;
  background: transparent !important;
}

.about-hero {
  position: relative !important;
  overflow: hidden !important;
  min-height: 100vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 80px 20px 40px 20px !important;
  box-sizing: border-box !important;
}

.hero-bg-video {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  width: auto !important;
  height: auto !important;
  transform: translate(-50%, -50%) !important;
  object-fit: cover !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

.about-hero-container.single-column {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  max-width: 850px !important;
  width: 90% !important;
  margin: 0 auto !important;
  position: relative !important;
  z-index: 2 !important;
}

.about-hero-text {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  width: 100% !important;
}

.sub-tag {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem; font-weight: 700;
  color: #ffffff; text-transform: uppercase; letter-spacing: 1.5px;
  background: rgba(0, 0, 0, 0.65); border: 1px solid rgba(0, 168, 255, 0.4);
  padding: 6px 16px; border-radius: 20px; margin-bottom: 15px;
  backdrop-filter: blur(4px); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.main-hero-title {
  font-family: 'Manrope', sans-serif; font-size: 3rem;
  font-weight: 900; line-height: 1.15; color: #fff;
  margin-bottom: 20px; text-transform: uppercase; white-space: normal;
  filter: none !important;
  -webkit-text-stroke: 0px transparent !important;
  text-shadow:
    1.5px 1.5px 0 #000000,
   -1.5px 1.5px 0 #000000,
    1.5px -1.5px 0 #000000,
   -1.5px -1.5px 0 #000000,
    0px 1.5px 0 #000000,
    0px -1.5px 0 #000000,
    1.5px 0px 0 #000000,
   -1.5px 0px 0 #000000 !important;
}

.main-hero-title .highlight {
  color: #00a8ff !important;
  filter: none !important;
  -webkit-text-stroke: 0px transparent !important;
}

.hero-description {
  color: #111827 !important; font-weight: 700;
  font-size: 1.1rem; line-height: 1.6; max-width: 750px;
  margin: 0 auto 35px auto !important;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6);
}

.hero-stats-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; width: 100%; max-width: 700px; margin: 0 auto;
}

.stat-card {
  background: rgba(255, 255, 255, 0.85); border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 14px; padding: 15px 10px; text-align: center;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.stat-card strong {
  font-family: 'Manrope', sans-serif; font-size: 1.8rem; font-weight: 800;
  color: #00a8ff; line-height: 1; margin-bottom: 6px; display: block;
}

.stat-card span {
  font-family: 'Inter', sans-serif; font-size: 0.8rem; font-weight: 700; color: #1a202c;
  text-transform: uppercase; letter-spacing: 1px;
}

.about-hero-image {
  display: none !important;
}

@media (max-width: 768px) {
  .about-hero {
    padding-top: 90px !important;
    padding-bottom: 25px !important;
  }
  .sub-tag,
  .section-subtitle-tag {
    font-size: 0.75rem !important;
    padding: 4px 12px !important;
    margin-bottom: 10px !important;
  }
  .main-hero-title {
    font-size: clamp(1.4rem, 6vw, 2.1rem) !important;
    line-height: 1.15 !important;
    margin-bottom: 10px !important;
  }
  .hero-description {
    font-size: clamp(0.8rem, 3.2vw, 0.95rem) !important;
    line-height: 1.35 !important;
    margin-bottom: 15px !important;
    max-width: 95% !important;
  }
  .hero-stats-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 320px !important;
  }
  .stat-card {
    padding: 8px 10px !important;
    border-radius: 10px !important;
  }
  .stat-card strong {
    font-size: 1.25rem !important;
  }
  .stat-card span {
    font-size: 0.7rem !important;
  }
  .about-hero-container.single-column {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 10px !important;
  }
}

/* Estilo Global para Títulos Principales en Todas las Páginas */
.main-hero-title,
.hero-title,
.section-title h1,
.section-title h2,
h1.section-title,
h2.section-title,
.title-page,
h1, h2 {
  color: #ffffff !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  
  filter: none !important;
  -webkit-text-stroke: 0px transparent !important;

  text-shadow:
    1.5px 1.5px 0 #000000,
   -1.5px 1.5px 0 #000000,
    1.5px -1.5px 0 #000000,
   -1.5px -1.5px 0 #000000,
    0px 1.5px 0 #000000,
    0px -1.5px 0 #000000,
    1.5px 0px 0 #000000,
   -1.5px 0px 0 #000000 !important;
}

.checklist-hero .hero-title,
.checklist-hero h1,
.checklist-hero h2 {
  color: #FFFFFF !important;
  font-weight: 900 !important;
  font-size: clamp(2.2rem,5vw,3.5rem) !important;
  line-height: 1.15 !important;
  letter-spacing: 1.5px !important;
  margin-bottom: 16px !important;
  -webkit-text-stroke: 0px transparent !important;
  text-shadow: none !important;
  filter: none !important;
}

/* General .highlight - dark text for body content */
.highlight {
  color: #111827 !important;
  filter: none !important;
  -webkit-text-stroke: 0px transparent !important;
}

/* Section and hero title highlights - blue */
.hero-title .highlight,
.section-title .highlight,
.title-page .highlight {
  color: #00a8ff !important;
  filter: none !important;
  -webkit-text-stroke: 0px transparent !important;
  text-shadow: 0 0 15px rgba(0,168,255,0.4) !important;
}

/* Corrección de tipografía uniforme para el título del Banner CTA en index y servicios */
.cta-banner .hero-title,
.cta-banner h2,
.cta-section h2,
.cta-content h2,
.cta-title {
  color: #ffffff !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  line-height: 1.2 !important;
  font-size: clamp(1.8rem, 4vw, 2.6rem) !important;
  text-shadow: 
    1.5px 1.5px 0 #000000,
   -1.5px 1.5px 0 #000000,
    1.5px -1.5px 0 #000000,
   -1.5px -1.5px 0 #000000 !important;
}

/* Forzar que las palabras resaltadas tengan EXACTAMENTE el mismo tamaño y estilo */
.cta-banner .hero-title span,
.cta-banner h2 span,
.cta-section h2 span,
.cta-content h2 span,
.cta-title span,
.cta-banner .hero-title .highlight,
.cta-banner h2 .highlight,
.cta-section h2 .highlight,
.cta-content h2 .highlight {
  color: #00a8ff !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
  display: inline !important;
  vertical-align: baseline !important;
}

/* Section head paragraph highlights - blue */
.section-head p .highlight {
  color: #00a8ff !important;
  font-weight: 600 !important;
}

/* Main hero title highlight - blue, must not be overridden by global .highlight */
.main-hero-title .highlight {
  color: #00a8ff !important;
  filter: none !important;
  -webkit-text-stroke: 0px transparent !important;
}

/* Checklist hero highlight override - must come after global .highlight */
.checklist-hero .main-hero-title .highlight {
  color: #00a8ff !important;
  -webkit-text-stroke: 0px transparent !important;
  text-shadow: 0 0 15px rgba(0,168,255,0.4) !important;
  filter: none !important;
}

.sub-tag,
.section-subtitle-tag {
  background: rgba(0, 0, 0, 0.65) !important;
  color: #ffffff !important;
  border: 1px solid rgba(0, 168, 255, 0.4) !important;
  padding: 6px 16px !important;
  border-radius: 20px !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  display: inline-block !important;
  backdrop-filter: blur(4px) !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3) !important;
}

/* Checklist Hero - Overlay */
.checklist-hero .hero-overlay,
.hero-overlay {
  display: block !important;
  background: rgba(0, 0, 0, 0.15) !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

.checklist-hero .hero-content-box,
.checklist-hero .hero-card,
.hero-content-box {
  position: relative !important;
  z-index: 3 !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  max-width: 850px !important;
  margin: 0 auto !important;
  text-align: center !important;
}

.checklist-hero .hero-title,
.checklist-hero h1,
.checklist-hero h2 {
  color: #FFFFFF !important;
  font-weight: 900 !important;
  font-size: clamp(2.2rem,5vw,3.5rem) !important;
  line-height: 1.15 !important;
  letter-spacing: 1.5px !important;
  margin-bottom: 16px !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0px transparent !important;
  filter: none !important;
}

.checklist-hero .hero-lead,
.checklist-hero .hero-checklist-text,
.checklist-hero p,
.checklist-hero .hero-subtitle,
.checklist-hero .hero-description {
  color: #FFFFFF !important;
  font-weight: 700 !important;
  font-size: clamp(0.9rem,2.5vw,1.1rem) !important;
  line-height: 1.55 !important;
  max-width: 750px !important;
  margin: 14px auto 25px auto !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0px transparent !important;
  filter: none !important;
}

.checklist-hero .hero-secondary,
.checklist-hero .hero-buttons a:last-child {
  background: rgba(128, 128, 128, 0.3) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  padding: 14px 24px !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
  transition: all 0.3s ease !important;
}

.checklist-hero .hero-secondary:hover,
.checklist-hero .hero-buttons a:last-child:hover {
  background: rgba(128, 128, 128, 0.5) !important;
}

.checklist-hero .hero-secondary:hover,
.checklist-hero .hero-buttons a:last-child:hover {
  background: rgba(17, 24, 39, 0.85) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

.checklist-hero .hero-secondary:hover,
.checklist-hero .hero-buttons a:last-child:hover {
  background: #FFFFFF !important;
  color: #000000 !important;
  border-color: #FFFFFF !important;
  box-shadow: 0 6px 20px rgba(255, 255, 255, 0.3) !important;
}

.checklist-hero .hero-buttons,
.checklist-hero .cta-buttons {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 15px !important;
  margin-top: 25px !important;
}

/* Contenedor principal Hero */
.about-hero {
  position: relative !important;
  width: 100% !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 90px 16px 30px 16px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

/* Video a pantalla completa de borde a borde */
.about-hero video,
.about-hero .hero-video,
#hero-video {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  min-width: 100% !important;
  min-height: 100% !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

/* Capa blanca semitransparente sobre el video del Hero */
.about-hero::before,
.about-hero-overlay {
  display: block !important;
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: rgba(255, 255, 255, 0.35) !important;
  z-index: 2 !important;
  pointer-events: none !important;
}

/* Contenido sobre el video original */
.about-hero-container {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  max-width: 800px !important;
  margin: 0 auto !important;
  text-align: center !important;
}

/* Quitar sombra y resplandor oscuro del subtítulo/descripción */
.hero-description,
.about-hero p,
.about-hero-text p {
  text-shadow: none !important;
  filter: none !important;
  -webkit-text-stroke: 0px transparent !important;
  color: #111827 !important;
}

/* Video background hero with semi-transparent white overlay */
.checklist-hero,
#checklist-hero {
  position: relative !important;
  width: 100% !important;
  height: 100vh !important;
  height: 100dvh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 60px 16px 20px 16px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

/* Video a pantalla completa */
.checklist-hero video,
.checklist-hero .hero-video {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  min-width: 100% !important;
  min-height: 100% !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  z-index: 1 !important;
}

/* Semi-transparent black overlay */
.checklist-hero::before,
.checklist-hero-overlay {
  display: block !important;
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: rgba(0, 0, 0, 0.15) !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

.hero-overlay {
  display: block !important;
  background: rgba(0, 0, 0, 0.15) !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

/* Contenido centrado */
.checklist-hero-container,
.checklist-hero .hero-content {
  position: relative !important;
  z-index: 3 !important;
  width: 100% !important;
  max-width: 800px !important;
  margin: 0 auto !important;
  text-align: center !important;
}

/* Restablecer tamaño del título según el diseño global */
.checklist-hero h1,
.checklist-hero .main-hero-title,
.checklist-hero .hero-title {
  font-size: clamp(2.2rem, 5vw, 3.5rem) !important;
  line-height: 1.15 !important;
  margin-bottom: 16px !important;
}

/* Subtítulo completamente negro sólido sin sombras ni bordes */
.checklist-hero p,
.checklist-hero .hero-subtitle,
.checklist-hero .hero-description {
  color: #111827 !important;
  font-weight: 700 !important;
  font-size: clamp(0.9rem, 2.5vw, 1.1rem) !important;
  line-height: 1.55 !important;
  max-width: 750px !important;
  margin: 14px auto 25px auto !important;
  text-shadow: none !important;
  filter: none !important;
  -webkit-text-stroke: 0px transparent !important;
}

/* Contenedor de botones */
.checklist-hero .hero-buttons,
.checklist-hero .cta-buttons {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 12px !important;
}

/* Botón Primario (COTIZAR): Azul oscuro potente */
.checklist-hero .btn-primary,
.checklist-hero .hero-buttons a:first-child {
  background: #0077cc !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  font-size: 0.9rem !important;
  padding: 12px 24px !important;
  border-radius: 8px !important;
  text-transform: uppercase !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(0, 119, 204, 0.4) !important;
}

/* Botón Secundario (VER LA LISTA DE VERIFICACIÓN): Negro semitransparente */
.checklist-hero .btn-secondary,
.checklist-hero a.btn-outline,
.checklist-hero .hero-buttons a:last-child {
  background: rgba(17, 24, 39, 0.6) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  font-size: 0.9rem !important;
  padding: 12px 24px !important;
  border-radius: 8px !important;
  text-transform: uppercase !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
  transition: all 0.3s ease !important;
}

.checklist-hero .btn-secondary:hover,
.checklist-hero a.btn-outline:hover,
.checklist-hero .hero-buttons a:last-child:hover {
  background: rgba(17, 24, 39, 0.85) !important;
}

/* Reducción proporcional en celulares manteniendo el tamaño amplio */
@media (max-width: 768px) {
  .checklist-hero,
  #checklist-hero {
    padding-top: 90px !important;
    padding-bottom: 20px !important;
  }

  .checklist-hero h1,
  .checklist-hero .main-hero-title,
  .checklist-hero .hero-title {
    font-size: clamp(1.8rem, 7vw, 2.4rem) !important;
    margin-bottom: 12px !important;
  }

  .checklist-hero .hero-buttons {
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 280px !important;
    margin: 0 auto !important;
  }

  .checklist-hero .hero-buttons a {
    width: 100% !important;
    padding: 10px 16px !important;
    text-align: center !important;
  }
}

/* =======================================================
   ELIMINAR RECUADRO EN EL CONTENEDOR DE TARJETAS
   ======================================================= */

/* 1. Reset del recuadro o caja externa de la sección */
.services-grid-section,
.services-section-wrapper,
.services-container-box {
  border: none !important;
  box-shadow: none !important;
  padding: 80px 20px !important;
  width: 100% !important;
  background-image: url('img/fondo_servicios.webp') !important;
  background-color: #050b14 !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
}

/* 2. Disposición directa de las tarjetas flotando en la sección */
.services-cards-container,
.services-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 28px !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
}

/* 3. Mantenimiento del estilo de las tarjetas individuales */
.service-card {
  position: relative !important;
  z-index: 2 !important;
}

/* 4. Responsive para pantallas medianas y móviles */
@media (max-width: 992px) {
  .services-cards-container,
  .services-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 768px) {
  .services-cards-container,
  .services-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
}