:root{--blue:#0753df;--blue2:#19a8ff;--navy:#081846;--soft:#f4f8ff;--line:#dbe8ff;--text:#344060}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,system-ui,sans-serif;color:var(--text);background:radial-gradient(circle at top right,#eef6ff,transparent 34%),#fff;overflow-x:hidden}a{text-decoration:none;color:inherit}.cursor-glow{position:fixed;width:360px;height:360px;border-radius:50%;background:rgba(0,102,255,.08);filter:blur(30px);pointer-events:none;z-index:0;transform:translate(-50%,-50%)}.site-header{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:18px 8%;background:rgba(255,255,255,.78);backdrop-filter:blur(18px);border-bottom:1px solid rgba(200,220,255,.55)}.brand img{width:170px;display:block}.main-nav{display:flex;gap:34px;font-weight:800;font-size:14px;color:var(--navy)}.main-nav a{position:relative}.main-nav a:after{content:"";position:absolute;left:0;bottom:-12px;width:0;height:3px;border-radius:4px;background:linear-gradient(90deg,var(--blue),var(--blue2));transition:.35s}.main-nav a:hover:after,.main-nav .active:after{width:100%}.top-btn{font-size:14px}.whatsapp,.btn{border-radius:12px;padding:15px 22px;font-weight:900;display:inline-flex;align-items:center;gap:10px;transition:.35s}.whatsapp,.primary{color:#fff;background:linear-gradient(135deg,var(--blue),#003ec1);box-shadow:0 14px 28px rgba(0,83,223,.22)}.btn:hover,.whatsapp:hover{transform:translateY(-4px);box-shadow:0 20px 36px rgba(0,83,223,.28)}.secondary{background:#fff;border:1px solid #bcd1ff;color:var(--blue);box-shadow:0 8px 22px rgba(0,83,223,.12)}.section{padding:70px 8%;position:relative}.hero{min-height:760px;display:grid;grid-template-columns:1fr 1.15fr;gap:50px;align-items:center}.waves{position:absolute;inset:auto -10% 5% -10%;height:380px;background:repeating-radial-gradient(ellipse at 70% 45%,transparent 0 18px,rgba(0,110,255,.18) 19px 21px,transparent 22px 42px);opacity:.55;transform:rotate(-7deg);z-index:-1}.eyebrow,.section-title span{display:inline-block;color:var(--blue);font-weight:900;text-transform:uppercase;font-size:12px;letter-spacing:.04em;background:#fff;border:1px solid var(--line);padding:10px 18px;border-radius:999px;box-shadow:0 8px 25px rgba(0,83,223,.12)}h1{font-size:clamp(45px,5.4vw,82px);line-height:.98;margin:28px 0 24px;color:var(--navy);letter-spacing:-.055em}h1 strong{color:var(--blue)}.hero-copy p{font-size:20px;line-height:1.8;max-width:590px}.actions{display:flex;gap:20px;margin:32px 0}.hero-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:50px;font-weight:800;color:#425170}.hero-stats span{padding:12px;background:rgba(255,255,255,.68);border:1px solid var(--line);border-radius:14px}.hero-visual{position:relative;min-height:520px}.device{background:#0b0e16;border:8px solid #111;border-radius:26px;box-shadow:0 38px 75px rgba(6,25,70,.28);position:absolute}.laptop{width:640px;height:395px;right:8%;top:10%;padding:18px}.phone{width:190px;height:370px;right:0;bottom:6%;padding:12px;border-radius:34px}.screen{height:100%;background:linear-gradient(145deg,#fff,#edf5ff);border-radius:14px;padding:48px;color:var(--navy);overflow:hidden}.screen img{width:75px}.screen h3{font-size:34px;line-height:1.12}.screen button{background:var(--blue);color:#fff;border:0;border-radius:8px;padding:12px 18px;font-weight:900}.phone-screen{padding:38px 18px}.phone-screen h4{font-size:20px}.phone-screen li{font-size:12px;margin:14px 0}.phone-notch{position:absolute;top:13px;left:50%;transform:translateX(-50%);width:64px;height:14px;background:#050505;border-radius:0 0 12px 12px;z-index:2}.floaty{animation:float 5s ease-in-out infinite}.floaty-slow{animation:float 6.5s ease-in-out infinite reverse}@keyframes float{50%{transform:translateY(-18px)}}.benefits{margin:-58px auto 30px;position:relative;z-index:2;width:84%;display:grid;grid-template-columns:repeat(5,1fr);gap:0;background:rgba(255,255,255,.9);border:1px solid var(--line);border-radius:22px;box-shadow:0 24px 55px rgba(24,62,130,.12);overflow:hidden}.benefits article{display:flex;align-items:center;gap:14px;padding:25px;border-right:1px solid var(--line);font-weight:900;color:var(--navy)}.benefits b{font-size:32px;color:var(--blue)}.benefits small{color:#5d6b86}.section-title{text-align:center;margin-bottom:38px}.section-title h2{font-size:42px;margin:12px 0;color:var(--navy)}.pricing-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px}.price-card{display:grid;grid-template-columns:1fr .9fr;gap:22px;padding:30px;border:1px solid var(--line);border-radius:22px;background:#fff;box-shadow:0 20px 50px rgba(13,54,120,.09);transition:.35s}.price-card:hover{transform:translateY(-8px);box-shadow:0 30px 70px rgba(13,54,120,.15)}.price-card h3{font-size:28px;color:var(--navy);margin:0}.price{font-size:58px;color:var(--blue);font-weight:900;letter-spacing:-.06em}.price span{font-size:28px;margin-left:5px}.price-card ul{padding:0;list-style:none;line-height:2}.price-card li:before{content:"✓";color:var(--blue);font-weight:900;margin-right:8px}.mini-preview,.thumb{border-radius:18px;min-height:250px;background:linear-gradient(135deg,#062c76,#006dff 45%,#f8fbff 46%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.4);position:relative;overflow:hidden}.mini-preview:after{content:"";position:absolute;inset:55px 28px;background:rgba(255,255,255,.86);border-radius:16px;box-shadow:0 16px 35px rgba(0,0,0,.12)}.shop-preview{background:linear-gradient(135deg,#f4efe9,#fff 50%,#d6e6ff)}.renew{max-width:760px;margin:28px auto 0;display:flex;justify-content:space-between;align-items:center;padding:22px 34px;border:1px solid #bdd3ff;background:#f5f9ff;border-radius:20px;color:var(--navy);font-size:20px}.renew strong{font-size:28px;color:var(--blue)}.portfolio-row{display:grid;grid-template-columns:repeat(5,1fr);gap:22px}.portfolio-row article,.testimonials article,.about-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:18px;box-shadow:0 18px 40px rgba(13,54,120,.08)}.thumb{min-height:150px}.t1{background:linear-gradient(135deg,#081846,#0863f7)}.t2{background:linear-gradient(135deg,#eff7ff,#85c7ff)}.t3{background:radial-gradient(circle,#ffae32,#081846)}.t4{background:linear-gradient(135deg,#081846,#fff)}.t5{background:linear-gradient(135deg,#fff0f7,#8ec7ff)}.portfolio h4{color:var(--navy);margin-bottom:2px}.about{display:grid;grid-template-columns:.9fr 1.4fr;gap:26px;align-items:start}.about-card h2{font-size:38px;color:var(--navy)}.testimonials{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.testimonials article{color:var(--blue);font-weight:900}.testimonials p{color:var(--text);font-weight:500;line-height:1.7}.cta{width:84%;margin:20px auto 0;padding:38px 55px;border-radius:26px;background:linear-gradient(135deg,#004be0,#006dff);color:#fff;display:flex;justify-content:space-between;align-items:center;box-shadow:0 30px 65px rgba(0,83,223,.25)}.cta h2{font-size:34px;margin:0}.light{background:#fff;color:var(--blue)}footer{padding:55px 8%;display:grid;grid-template-columns:1.5fr 1fr 1fr 1.4fr;gap:40px;background:#f7faff;border-top:1px solid var(--line)}footer img{width:170px}footer a{display:block;margin:8px 0;color:#56627a}.floating-whatsapp{position:fixed;right:24px;bottom:24px;z-index:30;background:#0ed061;color:white;padding:16px 20px;border-radius:999px;font-weight:900;box-shadow:0 18px 35px rgba(14,208,97,.3);animation:pulse 1.8s infinite}@keyframes pulse{50%{transform:scale(1.06)}}.reveal{opacity:0;transform:translateY(35px);transition:1s cubic-bezier(.2,.8,.2,1)}.reveal.show{opacity:1;transform:none}.delay-1{transition-delay:.16s}.menu-toggle{display:none;background:white;border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:24px;color:var(--blue)}@media(max-width:1050px){.hero,.pricing-grid,.about{grid-template-columns:1fr}.hero-visual{min-height:500px}.laptop{left:0;right:auto;width:85%}.benefits,.portfolio-row,.testimonials,footer{grid-template-columns:1fr 1fr}.benefits{width:92%}.price-card{grid-template-columns:1fr}.top-btn{display:none}.menu-toggle{display:block}.main-nav{position:absolute;right:8%;top:78px;background:#fff;flex-direction:column;padding:22px;border:1px solid var(--line);border-radius:18px;box-shadow:0 20px 50px rgba(0,0,0,.12);display:none}.main-nav.open{display:flex}}@media(max-width:680px){.site-header{padding:12px 5%}.brand img{width:145px}.section{padding:52px 5%}.hero{min-height:auto}.hero-copy p{font-size:17px}.actions,.cta{flex-direction:column;align-items:flex-start}.benefits,.portfolio-row,.testimonials,footer{grid-template-columns:1fr}.benefits{margin:0 auto 20px}.benefits article{border-right:0;border-bottom:1px solid var(--line)}.phone{display:none}.laptop{width:100%;height:320px}.screen{padding:30px}.screen h3{font-size:24px}.cta{width:92%;padding:28px}.cursor-glow{display:none}}



/* ==========================================================
   ESSÈNCIA DIGITAL - MOBILE PRO REAL
   Mantiene escritorio y corrige móvil: sin cortes, sin overflow,
   botones centrados, beneficios en 2 columnas, hero escalado.
   ========================================================== */

html, body {
  max-width: 100%;
  overflow-x: hidden !important;
}

*, *::before, *::after {
  box-sizing: border-box;
}

img, video, svg, canvas {
  max-width: 100%;
  height: auto;
}

body {
  position: relative;
}

/* Reforzar SOLO ondas curvas existentes, sin líneas verticales */
body::before,
body::after {
  content: "";
  position: fixed;
  pointer-events: none;
  z-index: -1;
  left: -18%;
  width: 136%;
  height: 230px;
  opacity: .42;
  background:
    repeating-radial-gradient(ellipse at center,
      transparent 0 18px,
      rgba(0, 106, 255, .145) 19px 20px,
      transparent 21px 35px);
}

body::before {
  top: 85px;
  transform: rotate(-7deg);
}

body::after {
  bottom: 20px;
  transform: rotate(8deg);
  opacity: .32;
}

/* Hover premium */
.card, .box, .service, .pricing-card, .portfolio-card, .feature-card,
.project-card, .testimonial-card, .service-card, .price-card {
  transition: transform .35s ease, box-shadow .35s ease, filter .35s ease, border-color .35s ease !important;
}

.card:hover, .box:hover, .service:hover, .pricing-card:hover, .portfolio-card:hover, .feature-card:hover,
.project-card:hover, .testimonial-card:hover, .service-card:hover, .price-card:hover {
  transform: translateY(-7px) !important;
  box-shadow: 0 20px 44px rgba(0, 92, 255, .18) !important;
  filter: brightness(1.045);
}

/* Evitar desbordes de secciones/contenedores genéricos */
section, main, header, footer, .container, .wrapper, .wrap {
  max-width: 100%;
}

/* TABLET */
@media (max-width: 1024px) {
  .container, .wrapper, .wrap {
    width: min(94%, 980px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .hero, .hero-section, .hero-content, .hero-wrapper, .hero-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 34px !important;
    text-align: center !important;
    overflow: hidden !important;
  }

  .hero-text, .hero-copy, .hero-info {
    max-width: 760px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .hero h1, h1 {
    font-size: clamp(2.35rem, 6vw, 4rem) !important;
    line-height: 1.04 !important;
  }

  .services-grid, .pricing-grid, .portfolio-grid, .testimonials-grid, .features-grid, .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* MÓVIL REAL */
@media (max-width: 768px) {
  html, body {
    width: 100%;
    overflow-x: hidden !important;
  }

  body {
    background-attachment: scroll !important;
  }

  body::before,
  body::after {
    height: 165px;
    left: -35%;
    width: 170%;
    opacity: .34;
  }

  body::before {
    top: 88px;
  }

  body::after {
    bottom: 40px;
    opacity: .24;
  }

  header, .header, .navbar, nav {
    position: sticky !important;
    top: 0 !important;
    z-index: 999 !important;
    width: 100% !important;
    padding: 12px 18px !important;
    background: rgba(255,255,255,.92) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
  }

  .logo img,
  .navbar-brand img,
  header img {
    max-width: 142px !important;
    height: auto !important;
    object-fit: contain !important;
  }

  /* Menú: evitar que rompa el ancho */
  nav ul, .nav, .menu, .navbar-menu, .nav-links {
    display: none !important;
  }

  header .btn, header .button, header a[href*="wa"], header a[href*="whatsapp"] {
    display: none !important;
  }

  .container, .wrapper, .wrap {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .hero, .hero-section, .hero-content, .hero-wrapper, .hero-grid {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    gap: 22px !important;
    padding: 34px 18px 28px !important;
  }

  .hero-text, .hero-copy, .hero-info {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 auto !important;
  }

  .badge, .tag, .eyebrow, .pill {
    max-width: calc(100vw - 42px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 10px 16px !important;
    font-size: .82rem !important;
    white-space: normal !important;
    line-height: 1.25 !important;
  }

  .hero h1, h1 {
    width: 100% !important;
    max-width: 100% !important;
    font-size: clamp(2.05rem, 9.3vw, 2.75rem) !important;
    line-height: 1.02 !important;
    letter-spacing: -0.045em !important;
    margin: 18px auto 14px !important;
    padding: 0 !important;
    text-wrap: balance;
  }

  .hero h1 span,
  h1 span {
    display: inline !important;
  }

  .hero p, .lead, .hero-copy p, .hero-text p {
    width: 100% !important;
    max-width: 335px !important;
    margin: 0 auto !important;
    font-size: 1rem !important;
    line-height: 1.58 !important;
  }

  .hero-buttons, .buttons, .cta-buttons, .btn-group {
    width: 100% !important;
    max-width: 340px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: center !important;
    gap: 12px !important;
    margin: 22px auto 0 !important;
  }

  .hero-buttons a, .buttons a, .cta-buttons a, .btn-group a,
  .hero-buttons button, .buttons button, .cta-buttons button,
  .btn, .button {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 54px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 14px 18px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    white-space: normal !important;
    border-radius: 14px !important;
  }

  /* Beneficios: 2 columnas y sin carril horizontal */
  .features, .badges, .benefits, .hero-features, .stats, .trust-row {
    width: 100% !important;
    max-width: 390px !important;
    margin: 22px auto 0 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    overflow: visible !important;
  }

  .features > *, .badges > *, .benefits > *, .hero-features > *, .stats > *, .trust-row > * {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 13px 10px !important;
    text-align: center !important;
    font-size: .9rem !important;
    line-height: 1.2 !important;
  }

  /* Visual hero: escala correcta */
  .hero-image, .hero-visual, .mockup, .device-mockup {
    width: 100% !important;
    max-width: 360px !important;
    margin: 8px auto 0 !important;
    overflow: hidden !important;
    transform: none !important;
  }

  .hero-image img, .hero-visual img, .mockup img, .device-mockup img {
    width: 100% !important;
    max-width: 360px !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
    object-fit: contain !important;
  }

  /* Grids generales */
  .grid, .services-grid, .pricing-grid, .portfolio-grid, .testimonials-grid, .features-grid,
  .cards-grid, .projects-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    width: 100% !important;
  }

  .card, .box, .service, .pricing-card, .portfolio-card, .feature-card,
  .project-card, .testimonial-card, .service-card, .price-card {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 22px !important;
    overflow: hidden !important;
  }

  section {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  h2 {
    font-size: clamp(1.75rem, 7.4vw, 2.25rem) !important;
    line-height: 1.1 !important;
    text-align: center !important;
  }

  h3 {
    font-size: 1.25rem !important;
    line-height: 1.22 !important;
  }

  .price, .pricing-card .price {
    font-size: 2.35rem !important;
  }

  .cta, .final-cta, .banner-cta {
    width: calc(100% - 36px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 28px 20px !important;
    text-align: center !important;
    border-radius: 24px !important;
  }

  footer, .footer {
    text-align: center !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  footer .grid, .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
}

/* Móvil pequeño */
@media (max-width: 430px) {
  .container, .wrapper, .wrap {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .hero, .hero-section, .hero-content, .hero-wrapper, .hero-grid {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .hero h1, h1 {
    font-size: clamp(1.92rem, 9.7vw, 2.45rem) !important;
    letter-spacing: -0.05em !important;
  }

  .hero p, .lead, .hero-copy p, .hero-text p {
    max-width: 320px !important;
    font-size: .96rem !important;
  }

  .features, .badges, .benefits, .hero-features, .stats, .trust-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    max-width: 340px !important;
  }

  .features > *, .badges > *, .benefits > *, .hero-features > *, .stats > *, .trust-row > * {
    font-size: .83rem !important;
    padding: 12px 8px !important;
  }

  .hero-image, .hero-visual, .mockup, .device-mockup,
  .hero-image img, .hero-visual img, .mockup img, .device-mockup img {
    max-width: 330px !important;
  }
}



/* ==========================================================
   FIX MOBILE PRO V2 - elimina los últimos cortes laterales
   ========================================================== */

@media (max-width: 768px){

  html, body{
    width:100% !important;
    max-width:100% !important;
    overflow-x:hidden !important;
  }

  body{
    margin:0 !important;
  }

  /* Todo elemento se limita al ancho real del móvil */
  body *{
    max-width:100vw;
  }

  .hero,
  .hero-section,
  .hero-content,
  .hero-wrapper,
  .hero-grid{
    width:100% !important;
    max-width:100% !important;
    padding-left:16px !important;
    padding-right:16px !important;
    margin-left:0 !important;
    margin-right:0 !important;
    overflow:hidden !important;
  }

  .hero-text,
  .hero-copy,
  .hero-info{
    width:100% !important;
    max-width:360px !important;
    margin-left:auto !important;
    margin-right:auto !important;
    overflow:visible !important;
  }

  .hero h1,
  h1{
    max-width:340px !important;
    margin-left:auto !important;
    margin-right:auto !important;
    font-size:clamp(1.75rem, 8.4vw, 2.25rem) !important;
    line-height:1.08 !important;
    letter-spacing:-0.035em !important;
    white-space:normal !important;
    overflow:visible !important;
    text-align:center !important;
  }

  .hero h1 span,
  h1 span{
    display:block !important;
    max-width:100% !important;
  }

  .hero p,
  .lead,
  .hero-copy p,
  .hero-text p{
    max-width:330px !important;
    font-size:.94rem !important;
    line-height:1.55 !important;
    overflow:visible !important;
  }

  .badge,
  .tag,
  .eyebrow,
  .pill{
    max-width:330px !important;
    width:auto !important;
  }

  .hero-buttons,
  .buttons,
  .cta-buttons,
  .btn-group{
    max-width:330px !important;
  }

  .hero-buttons a,
  .buttons a,
  .cta-buttons a,
  .btn-group a,
  .btn,
  .button{
    max-width:330px !important;
    width:100% !important;
  }

  /* Beneficios: que no queden cortados por la derecha */
  .features,
  .badges,
  .benefits,
  .hero-features,
  .stats,
  .trust-row{
    width:100% !important;
    max-width:330px !important;
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:10px !important;
    overflow:visible !important;
  }

  .features > *,
  .badges > *,
  .benefits > *,
  .hero-features > *,
  .stats > *,
  .trust-row > *{
    min-width:0 !important;
    max-width:100% !important;
    font-size:.78rem !important;
    padding:11px 7px !important;
  }

  /* Si hay 4 beneficios, no permitimos carrusel horizontal */
  .features,
  .badges,
  .benefits,
  .hero-features,
  .stats,
  .trust-row{
    overflow-x:visible !important;
  }

  /* Mockup más pequeño para que no corte */
  .hero-image,
  .hero-visual,
  .mockup,
  .device-mockup{
    max-width:315px !important;
    width:100% !important;
    margin-left:auto !important;
    margin-right:auto !important;
    overflow:hidden !important;
  }

  .hero-image img,
  .hero-visual img,
  .mockup img,
  .device-mockup img{
    max-width:315px !important;
    width:100% !important;
    height:auto !important;
    object-fit:contain !important;
  }

  /* WhatsApp flotante no tapa contenido ni se sale */
  .whatsapp-float,
  .floating-whatsapp,
  a[href*="wa.me"],
  a[href*="whatsapp"]{
    max-width:180px !important;
  }
}

/* Ajuste especial para 400px tipo móvil Android en inspección */
@media (max-width: 420px){

  .hero,
  .hero-section,
  .hero-content,
  .hero-wrapper,
  .hero-grid{
    padding-left:14px !important;
    padding-right:14px !important;
  }

  .hero-text,
  .hero-copy,
  .hero-info{
    max-width:330px !important;
  }

  .hero h1,
  h1{
    max-width:312px !important;
    font-size:clamp(1.62rem, 8.1vw, 2.05rem) !important;
  }

  .hero p,
  .lead,
  .hero-copy p,
  .hero-text p,
  .badge,
  .tag,
  .eyebrow,
  .pill,
  .hero-buttons,
  .buttons,
  .cta-buttons,
  .btn-group,
  .features,
  .badges,
  .benefits,
  .hero-features,
  .stats,
  .trust-row{
    max-width:312px !important;
  }

  .hero-buttons a,
  .buttons a,
  .cta-buttons a,
  .btn-group a,
  .btn,
  .button{
    max-width:312px !important;
  }

  .features > *,
  .badges > *,
  .benefits > *,
  .hero-features > *,
  .stats > *,
  .trust-row > *{
    font-size:.74rem !important;
    padding:10px 6px !important;
  }

  .hero-image,
  .hero-visual,
  .mockup,
  .device-mockup,
  .hero-image img,
  .hero-visual img,
  .mockup img,
  .device-mockup img{
    max-width:300px !important;
  }
}

/* Móviles muy estrechos */
@media (max-width: 370px){
  .hero h1,
  h1{
    max-width:285px !important;
    font-size:1.62rem !important;
  }

  .hero p,
  .lead,
  .hero-copy p,
  .hero-text p,
  .badge,
  .tag,
  .eyebrow,
  .pill,
  .hero-buttons,
  .buttons,
  .cta-buttons,
  .btn-group,
  .features,
  .badges,
  .benefits,
  .hero-features,
  .stats,
  .trust-row{
    max-width:285px !important;
  }

  .hero-image,
  .hero-visual,
  .mockup,
  .device-mockup,
  .hero-image img,
  .hero-visual img,
  .mockup img,
  .device-mockup img{
    max-width:280px !important;
  }
}



/* ==========================================================
   FIX MOBILE PRO V3 - botones de beneficios debajo del hero
   ========================================================== */

@media (max-width: 768px){

  /* Los 4 botones/beneficios ya NO van en carril horizontal */
  .features,
  .badges,
  .benefits,
  .hero-features,
  .stats,
  .trust-row{
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:10px !important;
    width:100% !important;
    max-width:320px !important;
    margin:24px auto 0 !important;
    padding:0 !important;
    overflow:visible !important;
    transform:none !important;
  }

  .features > *,
  .badges > *,
  .benefits > *,
  .hero-features > *,
  .stats > *,
  .trust-row > *{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    height:auto !important;
    min-height:58px !important;
    margin:0 !important;
    padding:10px 8px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
    white-space:normal !important;
    overflow:visible !important;
    font-size:.78rem !important;
    line-height:1.18 !important;
    border-radius:14px !important;
  }

  .features > * span,
  .badges > * span,
  .benefits > * span,
  .hero-features > * span,
  .stats > * span,
  .trust-row > * span,
  .features > * p,
  .badges > * p,
  .benefits > * p,
  .hero-features > * p,
  .stats > * p,
  .trust-row > * p{
    font-size:.78rem !important;
    line-height:1.18 !important;
    white-space:normal !important;
    margin:0 !important;
    text-align:center !important;
  }

  /* Si el HTML tiene un contenedor de iconos/beneficios con flex, forzamos grid */
  [class*="feature"],
  [class*="benefit"],
  [class*="badge"]{
    max-width:100% !important;
  }

  .hero [class*="feature"],
  .hero-section [class*="feature"],
  .hero [class*="benefit"],
  .hero-section [class*="benefit"],
  .hero [class*="badge"],
  .hero-section [class*="badge"]{
    flex:initial !important;
  }
}

@media (max-width: 420px){

  .features,
  .badges,
  .benefits,
  .hero-features,
  .stats,
  .trust-row{
    max-width:300px !important;
    gap:9px !important;
  }

  .features > *,
  .badges > *,
  .benefits > *,
  .hero-features > *,
  .stats > *,
  .trust-row > *{
    min-height:56px !important;
    padding:9px 6px !important;
    font-size:.72rem !important;
  }

  .features > * span,
  .badges > * span,
  .benefits > * span,
  .hero-features > * span,
  .stats > * span,
  .trust-row > * span,
  .features > * p,
  .badges > * p,
  .benefits > * p,
  .hero-features > * p,
  .stats > * p,
  .trust-row > * p{
    font-size:.72rem !important;
  }
}

/* En móviles muy estrechos, 1 columna para que jamás se corte */
@media (max-width: 360px){
  .features,
  .badges,
  .benefits,
  .hero-features,
  .stats,
  .trust-row{
    grid-template-columns:1fr !important;
    max-width:270px !important;
  }
}



/* ==========================================================
   FIX MOBILE PRO V4 - fuerza 2 columnas en la fila real de beneficios
   ========================================================== */

@media (max-width: 768px){

  /* Selector directo por estructura: primera fila de beneficios dentro del hero */
  .hero .features,
  .hero-section .features,
  .hero .benefits,
  .hero-section .benefits,
  .hero .badges,
  .hero-section .badges,
  .hero .trust-row,
  .hero-section .trust-row,
  .hero .stats,
  .hero-section .stats,
  .mobile-benefits-grid{
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    grid-auto-flow:row !important;
    width:100% !important;
    max-width:320px !important;
    margin:24px auto 0 !important;
    padding:0 !important;
    gap:10px !important;
    overflow:visible !important;
    white-space:normal !important;
  }

  .hero .features > *,
  .hero-section .features > *,
  .hero .benefits > *,
  .hero-section .benefits > *,
  .hero .badges > *,
  .hero-section .badges > *,
  .hero .trust-row > *,
  .hero-section .trust-row > *,
  .hero .stats > *,
  .hero-section .stats > *,
  .mobile-benefits-grid > *{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    flex:0 1 auto !important;
    margin:0 !important;
    padding:10px 7px !important;
    min-height:58px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
    white-space:normal !important;
    overflow:visible !important;
    font-size:.74rem !important;
    line-height:1.15 !important;
  }

  /* Si el contenedor real no tiene clase clara, apuntamos a cajas pequeñas del hero después de botones */
  .hero div[style*="display: flex"],
  .hero-section div[style*="display: flex"]{
    flex-wrap:wrap !important;
    justify-content:center !important;
    overflow:visible !important;
  }

  /* Evita que una fila flex siga empujando los items fuera */
  .hero [class*="feature"],
  .hero-section [class*="feature"],
  .hero [class*="benefit"],
  .hero-section [class*="benefit"],
  .hero [class*="stat"],
  .hero-section [class*="stat"]{
    min-width:0 !important;
    white-space:normal !important;
  }
}

/* Fallback fuerte: las tarjetas pequeñas visibles en la zona hero */
@media (max-width: 768px){
  .hero-features,
  .features-row,
  .benefits-row,
  .trust-badges,
  .hero-badges{
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    max-width:320px !important;
    width:100% !important;
    gap:10px !important;
    margin-left:auto !important;
    margin-right:auto !important;
    overflow:visible !important;
  }

  .hero-features > *,
  .features-row > *,
  .benefits-row > *,
  .trust-badges > *,
  .hero-badges > *{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    flex:none !important;
  }
}

@media (max-width: 420px){
  .hero .features,
  .hero-section .features,
  .hero .benefits,
  .hero-section .benefits,
  .hero .badges,
  .hero-section .badges,
  .hero .trust-row,
  .hero-section .trust-row,
  .hero .stats,
  .hero-section .stats,
  .mobile-benefits-grid,
  .hero-features,
  .features-row,
  .benefits-row,
  .trust-badges,
  .hero-badges{
    max-width:300px !important;
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }
}



/* ==========================================================
   ESSENCIA DIGITAL - HEADER STICKY SUPER PRO
   ========================================================== */

html{
  scroll-behavior:smooth;
}

header,
.header,
.navbar,
.site-header{
  position:sticky !important;
  top:0 !important;
  z-index:9999 !important;
  width:100% !important;
  background:rgba(255,255,255,.86) !important;
  backdrop-filter:blur(18px) saturate(1.25) !important;
  -webkit-backdrop-filter:blur(18px) saturate(1.25) !important;
  border-bottom:1px solid rgba(0,86,255,.10) !important;
  box-shadow:0 10px 34px rgba(7,31,84,.06) !important;
  transition:background .35s ease, box-shadow .35s ease, border-color .35s ease, padding .35s ease !important;
}

header::after,
.header::after,
.navbar::after,
.site-header::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-1px;
  width:min(1120px, 92%);
  height:1px;
  transform:translateX(-50%);
  background:linear-gradient(90deg, transparent, rgba(0,94,255,.35), transparent);
  pointer-events:none;
}

header.is-scrolled,
.header.is-scrolled,
.navbar.is-scrolled,
.site-header.is-scrolled{
  background:rgba(255,255,255,.95) !important;
  box-shadow:0 14px 38px rgba(7,31,84,.13) !important;
  border-bottom-color:rgba(0,86,255,.18) !important;
}

section,
[id]{
  scroll-margin-top:100px;
}

header img,
.header img,
.navbar img,
.site-header img{
  max-height:58px;
  object-fit:contain;
}

header a,
.header a,
.navbar a,
.site-header a{
  transition:color .25s ease, transform .25s ease, opacity .25s ease !important;
}

header a:hover,
.header a:hover,
.navbar a:hover,
.site-header a:hover{
  transform:translateY(-1px);
}

header .btn,
.header .btn,
.navbar .btn,
.site-header .btn,
header a[href*="wa.me"],
.header a[href*="wa.me"],
.navbar a[href*="wa.me"],
.site-header a[href*="wa.me"],
header a[href*="whatsapp"],
.header a[href*="whatsapp"],
.navbar a[href*="whatsapp"],
.site-header a[href*="whatsapp"]{
  box-shadow:0 12px 28px rgba(0,86,255,.18) !important;
}

@media (max-width:768px){
  header,
  .header,
  .navbar,
  .site-header{
    position:sticky !important;
    top:0 !important;
    z-index:9999 !important;
    min-height:72px !important;
    padding:12px 18px !important;
    background:rgba(255,255,255,.92) !important;
    box-shadow:0 10px 28px rgba(7,31,84,.09) !important;
  }

  header.is-scrolled,
  .header.is-scrolled,
  .navbar.is-scrolled,
  .site-header.is-scrolled{
    background:rgba(255,255,255,.97) !important;
    box-shadow:0 16px 34px rgba(7,31,84,.14) !important;
  }

  header img,
  .header img,
  .navbar img,
  .site-header img{
    max-width:142px !important;
    max-height:48px !important;
  }

  section,
  [id]{
    scroll-margin-top:86px;
  }
}

@media (max-width:420px){
  header,
  .header,
  .navbar,
  .site-header{
    min-height:68px !important;
    padding:10px 16px !important;
  }

  header img,
  .header img,
  .navbar img,
  .site-header img{
    max-width:132px !important;
  }
}



/* ==========================================================
   FIX DEFINITIVO - HEADER FIJO REAL
   ========================================================== */

:root{
  --real-header-height: 88px;
}

body{
  padding-top: var(--real-header-height) !important;
}

.site-header,
header.site-header,
header#top{
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 999999 !important;
  background: rgba(255,255,255,.92) !important;
  backdrop-filter: blur(20px) saturate(1.25) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.25) !important;
  box-shadow: 0 14px 38px rgba(7,31,84,.10) !important;
  border-bottom: 1px solid rgba(0,86,255,.14) !important;
}

.site-header.is-scrolled,
header.site-header.is-scrolled,
header#top.is-scrolled{
  background: rgba(255,255,255,.97) !important;
  box-shadow: 0 18px 42px rgba(7,31,84,.16) !important;
}

.site-header::after,
header.site-header::after,
header#top::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-1px;
  width:min(1120px,92%);
  height:1px;
  transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,rgba(0,94,255,.42),transparent);
  pointer-events:none;
}

section,
[id]{
  scroll-margin-top: 105px !important;
}

@media(max-width:768px){
  :root{
    --real-header-height: 72px;
  }

  body{
    padding-top: var(--real-header-height) !important;
  }

  .site-header,
  header.site-header,
  header#top{
    min-height:72px !important;
    padding:10px 18px !important;
  }

  section,
  [id]{
    scroll-margin-top: 88px !important;
  }
}

@media(max-width:420px){
  :root{
    --real-header-height: 68px;
  }

  .site-header,
  header.site-header,
  header#top{
    min-height:68px !important;
    padding:9px 16px !important;
  }
}