/* ───────── Tokens (manual de marca Enetworks, versión oscura) ───────── */
    :root {
      --bg: #08111F;
      /* noche, derivado de Azul Profundo */
      --surface: #0F1E36;
      --surface-2: #142744;
      --line: rgba(247, 249, 252, .09);
      --line-strong: rgba(247, 249, 252, .17);
      --text: #F7F9FC;
      /* Blanco Hielo */
      --muted: #A3B1C6;
      --dim: #7F90A8;
      --blue: #3384C5;
      /* Azul Enetworks */
      --blue-hi: #6DB0E8;
      --deep: #1F3A5F;
      /* Azul Profundo */
      --amber: #E0873D;
      /* Ámbar Cálido: solo señal/estado */
      --wa: #25D366;
      /* WhatsApp: solo CTAs de contacto */
      --ease: cubic-bezier(.23, 1, .32, 1);
      --head: 'Poppins', Arial, 'Liberation Sans', sans-serif;
      --body: Arial, 'Liberation Sans', Helvetica, sans-serif;
      --max: 1200px;
    }

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

    html {
      -webkit-text-size-adjust: 100%;
      scroll-behavior: smooth;
      scroll-padding-top: 84px
    }

    body {
      margin: 0;
      background: var(--bg);
      color: var(--text);
      font: 400 1rem/1.65 var(--body);
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
      overflow-x: hidden
    }

    img,
    svg {
      display: block;
      max-width: 100%
    }

    a {
      color: inherit;
      text-decoration: none
    }

    h1,
    h2,
    h3 {
      font-family: var(--head);
      font-weight: 600;
      margin: 0;
      text-wrap: balance
    }

    p,
    ul,
    ol,
    dl,
    dd,
    figure,
    blockquote {
      margin: 0
    }

    ul,
    ol {
      padding: 0;
      list-style: none
    }

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

    .wrap {
      width: min(100% - 2.5rem, var(--max));
      margin-inline: auto
    }

    .skip {
      position: absolute;
      left: 1rem;
      top: -4rem;
      background: var(--text);
      color: var(--bg);
      padding: .6rem 1rem;
      border-radius: 8px;
      z-index: 100;
      transition: top .2s var(--ease)
    }

    .skip:focus {
      top: 1rem
    }

    /* ───────── Botones ───────── */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: .6rem;
      padding: .85rem 1.4rem;
      border-radius: 12px;
      font: 600 .95rem/1 var(--head);
      border: 1px solid transparent;
      cursor: pointer;
      transition: transform .16s var(--ease), background-color .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease)
    }

    .btn:active {
      transform: scale(.97)
    }

    .btn svg {
      width: 1.15em;
      height: 1.15em;
      flex: none
    }

    .btn-wa {
      background: var(--wa);
      color: #04220E;
      box-shadow: 0 10px 28px -10px rgba(37, 211, 102, .55), inset 0 1px 0 rgba(255, 255, 255, .25)
    }

    .btn-ghost {
      border-color: var(--line-strong);
      color: var(--text);
      background: rgba(247, 249, 252, .02)
    }

    .btn-lg {
      padding: 1.05rem 1.8rem;
      font-size: 1.02rem
    }

    .btn-sm {
      padding: .65rem 1rem;
      font-size: .85rem;
      border-radius: 10px
    }

    @media (hover:hover) {
      .btn-wa:hover {
        background: #3BE07B;
        box-shadow: 0 14px 34px -10px rgba(37, 211, 102, .65), inset 0 1px 0 rgba(255, 255, 255, .3)
      }

      .btn-ghost:hover {
        background: rgba(247, 249, 252, .07);
        border-color: rgba(247, 249, 252, .3)
      }
    }

    /* ───────── Header ───────── */
    .site-header {
      position: fixed;
      inset: 0 0 auto 0;
      height: 68px;
      z-index: 50;
      display: flex;
      align-items: center;
      border-bottom: 1px solid transparent;
      transition: background-color .25s var(--ease), border-color .25s var(--ease)
    }

    .site-header.is-scrolled,
    .site-header.menu-open {
      background: rgba(8, 17, 31, .8);
      -webkit-backdrop-filter: blur(16px) saturate(140%);
      backdrop-filter: blur(16px) saturate(140%);
      border-color: var(--line)
    }

    .bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1.5rem
    }

    .brand {
      display: flex;
      align-items: center;
      gap: .65rem;
      font: 600 1.15rem/1 var(--head);
      letter-spacing: -.01em
    }

    .brand img{display:block;height:30px;width:auto}


    .nav {
      display: flex;
      align-items: center;
      gap: 1.75rem;
      font-size: .92rem;
      color: var(--muted)
    }

    .nav a {
      padding: .4rem 0;
      transition: color .2s var(--ease)
    }

    .nav-cta-m {
      display: none
    }

    .nav a[aria-current=page] {
      color: var(--text)
    }

    @media (hover:hover) {
      .nav a:hover {
        color: var(--text)
      }
    }

    .burger {
      display: none;
      width: 44px;
      height: 44px;
      border: 1px solid var(--line-strong);
      border-radius: 12px;
      background: transparent;
      color: var(--text);
      cursor: pointer;
      align-items: center;
      justify-content: center
    }

    .burger span,
    .burger span::before,
    .burger span::after {
      display: block;
      width: 18px;
      height: 2px;
      background: currentColor;
      border-radius: 2px;
      transition: transform .25s var(--ease), background-color .2s
    }

    .burger span {
      position: relative
    }

    .burger span::before,
    .burger span::after {
      content: "";
      position: absolute;
      left: 0
    }

    .burger span::before {
      top: -6px
    }

    .burger span::after {
      top: 6px
    }

    .menu-open .burger span {
      background: transparent
    }

    .menu-open .burger span::before {
      transform: translateY(6px) rotate(45deg)
    }

    .menu-open .burger span::after {
      transform: translateY(-6px) rotate(-45deg)
    }

    @media (max-width:960px) {
      .burger {
        display: inline-flex
      }

      .bar-cta {
        display: none
      }

      .nav {
        position: fixed;
        top: 68px;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: .5rem 1.25rem 1.5rem;
        background: rgba(8, 17, 31, .98);
        border-bottom: 1px solid var(--line);
        font-size: 1.05rem;
        visibility: hidden;
        opacity: 0;
        transform: translateY(-8px);
        transition: opacity .2s var(--ease), transform .2s var(--ease), visibility 0s .2s
      }

      .menu-open .nav {
        visibility: visible;
        opacity: 1;
        transform: none;
        transition-delay: 0s
      }

      .nav a:not(.btn) {
        padding: 1rem 0;
        border-bottom: 1px solid var(--line);
        color: var(--text)
      }

      .nav-cta-m {
        display: inline-flex;
        margin-top: 1.25rem
      }
    }

    /* ───────── Hero ───────── */
    .hero {
      position: relative;
      isolation: isolate;
      overflow: hidden;
      padding: calc(68px + clamp(48px, 8vw, 96px)) 0 clamp(64px, 9vw, 112px)
    }

    .hero-bg {
      position: absolute;
      inset: 0;
      z-index: -2
    }

    .hero-bg img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: .32
    }

    .hero-bg::after {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(60% 55% at 78% 28%, rgba(51, 132, 197, .24), transparent 70%), linear-gradient(180deg, rgba(8, 17, 31, .3) 0%, rgba(8, 17, 31, .82) 68%, var(--bg) 100%)
    }

    .hero-lines {
      position: absolute;
      inset: 0;
      z-index: -1;
      opacity: .55;
      background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
      background-size: 64px 64px;
      -webkit-mask-image: radial-gradient(70% 60% at 72% 35%, #000, transparent 78%);
      mask-image: radial-gradient(70% 60% at 72% 35%, #000, transparent 78%)
    }

    .hero-inner {
      display: grid;
      grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
      gap: clamp(2rem, 5vw, 5rem);
      align-items: center
    }

    .status {
      display: inline-flex;
      align-items: center;
      gap: .6rem;
      padding: .4rem .95rem;
      border: 1px solid var(--line-strong);
      border-radius: 999px;
      background: rgba(15, 30, 54, .65);
      font-size: .85rem;
      color: var(--muted)
    }

    .status i {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--dim);
      flex: none
    }

    .status[data-state=open] i {
      background: var(--wa);
      animation: ping 2.6s var(--ease) infinite
    }

    .status[data-state=closed] i {
      background: var(--amber)
    }

    @keyframes ping {
      0% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, .55)
      }

      70%,
      100% {
        box-shadow: 0 0 0 8px rgba(37, 211, 102, 0)
      }
    }

    .hero h1 {
      font-size: clamp(2.15rem, 4.4vw + .6rem, 3.9rem);
      line-height: 1.06;
      letter-spacing: -.03em;
      margin: 1.3rem 0 1.25rem
    }

    .lede {
      font-size: clamp(1.02rem, .5vw + .95rem, 1.18rem);
      color: var(--muted);
      max-width: 33rem
    }

    .hero-ctas {
      display: flex;
      flex-wrap: wrap;
      gap: .75rem;
      margin-top: 2rem
    }

    .facts {
      display: grid;
      grid-template-columns: repeat(3, auto);
      justify-content: start;
      align-items: start;
      gap: 1.25rem clamp(1.5rem, 4vw, 3rem);
      margin-top: 2.75rem;
      padding-top: 1.5rem;
      border-top: 1px solid var(--line)
    }

    .facts div {
      display: flex;
      flex-direction: column;
      align-items: flex-start
    }

    .facts dd {
      order: -1;
      font: 600 1.5rem/1.1 var(--head);
      letter-spacing: -.02em
    }

    .facts dt {
      font-size: .85rem;
      color: var(--dim);
      margin-top: .35rem;
      max-width: 11rem
    }

    /* Secuencia de carga: el único momento orquestado de la página */
    .rise {
      animation: rise .7s var(--ease) both;
      animation-delay: calc(var(--i, 0) * 70ms)
    }

    @keyframes rise {
      from {
        opacity: 0;
        transform: translateY(14px)
      }

      to {
        opacity: 1;
        transform: none
      }
    }

    .hero h1.rise {
      animation-name: rise-t
    }

    @keyframes rise-t {
      from {
        transform: translateY(14px)
      }

      to {
        transform: none
      }
    }

    /* Diagrama de red (motivo de nodos de la marca) */
    .net {
      width: 100%;
      max-width: 520px;
      margin-inline: auto
    }

    .net svg {
      width: 100%;
      height: auto;
      overflow: visible
    }

    .net .orbit {
      fill: none;
      stroke: var(--line-strong);
      stroke-dasharray: 2 7
    }

    .net .wires line {
      stroke: rgba(109, 176, 232, .32);
      stroke-width: 1
    }

    .net .hub {
      fill: var(--surface-2);
      stroke: var(--blue);
      stroke-width: 1.5
    }

    .net text {
      font-family: var(--head);
      font-weight: 500;
      font-size: 14px;
      fill: var(--text);
      text-anchor: middle
    }

    .net .hub-t {
      font-weight: 600;
      font-size: 13.5px
    }

    .net .body {
      fill: var(--surface);
      stroke: var(--line-strong);
      stroke-width: 1;
      transition: stroke .2s var(--ease), fill .2s var(--ease)
    }

    .net .ico {
      fill: var(--blue-hi)
    }

    .net a {
      cursor: pointer
    }

    @media (hover:hover) {
      .net a:hover .body {
        stroke: var(--blue-hi);
        fill: var(--surface-2)
      }
    }

    .net a:focus-visible {
      outline: none
    }

    .net a:focus-visible .body {
      stroke: var(--blue-hi);
      stroke-width: 2
    }

    @media (max-width:960px) {
      .hero-inner {
        grid-template-columns: 1fr
      }

      .net {
        display: none
      }
    }

    @media (max-width:520px) {
      .facts {
        grid-template-columns: repeat(2, auto)
      }

      .hero-ctas .btn {
        flex: 1 1 100%
      }
    }

    /* ───────── Secciones ───────── */
    .section {
      padding: clamp(72px, 9vw, 128px) 0
    }

    .section-alt {
      background: linear-gradient(180deg, var(--bg-2, #0A1526), var(--bg) 100%);
      border-block: 1px solid var(--line)
    }

    .sec-head {
      max-width: 44rem;
      margin-bottom: clamp(2rem, 4vw, 3.5rem)
    }

    .sec-head h2,
    .h2 {
      font-size: clamp(1.65rem, 2.4vw + .9rem, 2.6rem);
      line-height: 1.12;
      letter-spacing: -.025em
    }

    .sec-head p {
      margin-top: 1rem;
      color: var(--muted);
      font-size: 1.08rem
    }

    /* Clientes */
    .trust {
      border-block: 1px solid var(--line);
      padding: 1.5rem 0
    }

    .trust-row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 1rem 2.5rem
    }

    .trust p {
      font-size: .88rem;
      color: var(--dim);
      max-width: 15rem;
      line-height: 1.4
    }

    .trust ul {
      display: flex;
      flex-wrap: wrap;
      gap: .75rem 2.25rem;
      font: 500 1.02rem/1 var(--head);
      color: var(--muted)
    }

    /* Bento de servicios: 4+2 / 2+2+2, sin celdas huérfanas */
    .bento {
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap: 1rem
    }

    .card {
      grid-column: span 2;
      display: flex;
      flex-direction: column;
      gap: .9rem;
      padding: 1.75rem;
      border: 1px solid var(--line);
      border-radius: 18px;
      background: linear-gradient(180deg, rgba(20, 39, 68, .55), rgba(15, 30, 54, .3));
      transition: border-color .25s var(--ease), transform .25s var(--ease), background-color .25s var(--ease)
    }

    .card-lg {
      grid-column: span 4;
      background: linear-gradient(135deg, rgba(31, 58, 95, .55), rgba(15, 30, 54, .35) 60%)
    }

    .card:active {
      transform: scale(.99)
    }

    @media (hover:hover) {
      .card:hover {
        border-color: rgba(109, 176, 232, .5);
        transform: translateY(-2px)
      }
    }

    .ico-box {
      display: grid;
      place-items: center;
      width: 44px;
      height: 44px;
      border-radius: 12px;
      background: rgba(51, 132, 197, .14);
      border: 1px solid rgba(109, 176, 232, .26);
      color: var(--blue-hi)
    }

    .ico-box svg {
      width: 22px;
      height: 22px
    }

    .card h3 {
      font-size: 1.25rem;
      line-height: 1.25;
      letter-spacing: -.015em
    }

    .card p {
      color: var(--muted);
      font-size: .98rem
    }

    .ticks {
      display: grid;
      gap: .5rem;
      margin-top: .25rem;
      color: var(--text);
      font-size: .95rem
    }

    .ticks li {
      display: flex;
      gap: .6rem;
      align-items: flex-start
    }

    .ticks svg {
      width: 18px;
      height: 18px;
      flex: none;
      margin-top: .15rem;
      color: var(--blue-hi)
    }

    .more {
      margin-top: auto;
      padding-top: .5rem;
      display: inline-flex;
      align-items: center;
      gap: .4rem;
      font: 600 .9rem/1 var(--head);
      color: var(--blue-hi)
    }

    .more svg {
      width: 16px;
      height: 16px;
      transition: transform .25s var(--ease)
    }

    @media (hover:hover) {
      .card:hover .more svg {
        transform: translateX(4px)
      }
    }

    @media (max-width:900px) {
      .bento {
        grid-template-columns: repeat(2, minmax(0, 1fr))
      }

      .card,
      .card-lg {
        grid-column: span 1
      }

      .card-lg {
        grid-column: 1/-1
      }
    }

    @media (max-width:600px) {
      .bento {
        grid-template-columns: 1fr
      }

      .card,
      .card-lg {
        grid-column: 1/-1
      }
    }

    /* Cómo trabajamos (split foto + texto, secuencia real) */
    .split {
      display: grid;
      grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
      gap: clamp(2rem, 5vw, 5rem);
      align-items: start
    }

    .photo {
      position: sticky;
      top: 96px;
      border-radius: 20px;
      overflow: hidden;
      border: 1px solid var(--line-strong);
      background: var(--surface)
    }

    .photo img {
      width: 100%;
      height: auto;
      aspect-ratio: 604/402;
      object-fit: cover
    }

    .photo::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, transparent 55%, rgba(8, 17, 31, .85));
      pointer-events: none
    }

    .photo figcaption {
      position: absolute;
      left: 1rem;
      bottom: 1rem;
      right: 1rem;
      z-index: 1;
      font-size: .9rem;
      color: var(--text)
    }

    .steps {
      counter-reset: s;
      margin-top: 2rem;
      display: grid;
      gap: 0
    }

    .steps li {
      counter-increment: s;
      position: relative;
      padding: 0 0 2rem 3.4rem
    }

    .steps li:last-child {
      padding-bottom: 0
    }

    .steps li::before {
      content: counter(s);
      position: absolute;
      left: 0;
      top: 0;
      width: 2.3rem;
      height: 2.3rem;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: var(--surface-2);
      border: 1px solid rgba(109, 176, 232, .4);
      font: 600 .9rem/1 var(--head);
      color: var(--blue-hi)
    }

    .steps li::after {
      content: "";
      position: absolute;
      left: 1.15rem;
      top: 2.6rem;
      bottom: .3rem;
      width: 1px;
      background: var(--line-strong)
    }

    .steps li:last-child::after {
      display: none
    }

    .steps h3 {
      font-size: 1.12rem;
      letter-spacing: -.01em;
      margin-bottom: .35rem
    }

    .steps p {
      color: var(--muted);
      font-size: .98rem
    }

    .js .steps li {
      opacity: 0;
      transform: translateY(12px);
      transition: opacity .6s var(--ease), transform .6s var(--ease);
      transition-delay: calc(var(--i, 0) * 90ms)
    }

    .js .steps.in li {
      opacity: 1;
      transform: none
    }

    @media (max-width:900px) {
      .split {
        grid-template-columns: 1fr
      }

      .photo {
        position: relative;
        top: 0
      }
    }

    /* Planes */
    .plans {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 1rem;
      align-items: stretch
    }

    .plan {
      display: flex;
      flex-direction: column;
      gap: 1.25rem;
      padding: 2rem;
      border: 1px solid var(--line);
      border-radius: 20px;
      background: rgba(15, 30, 54, .45)
    }

    .plan-feat {
      border-color: rgba(109, 176, 232, .55);
      background: linear-gradient(160deg, rgba(31, 58, 95, .6), rgba(15, 30, 54, .4));
      box-shadow: 0 0 0 1px rgba(51, 132, 197, .15), 0 30px 60px -30px rgba(51, 132, 197, .45)
    }

    .plan-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: .75rem;
      min-height: 2rem
    }

    .plan h3 {
      font-size: 1.2rem
    }

    .tag {
      padding: .3rem .7rem;
      border-radius: 999px;
      background: rgba(51, 132, 197, .18);
      border: 1px solid rgba(109, 176, 232, .4);
      color: var(--blue-hi);
      font: 500 .78rem/1 var(--head);
      white-space: nowrap
    }

    .price-text {
      font-size: 1.9rem;
      line-height: 1.35
    }

    .price {
      display: flex;
      align-items: baseline;
      gap: .5rem;
      font: 600 2.6rem/1 var(--head);
      letter-spacing: -.03em
    }

    .price small {
      font: 400 .95rem/1 var(--body);
      color: var(--muted);
      letter-spacing: 0
    }

    .plan .sub {
      color: var(--muted);
      font-size: .95rem;
      margin-top: -.5rem
    }

    .plan .btn {
      margin-top: auto
    }

    .fine {
      margin-top: 1.25rem;
      color: var(--dim);
      font-size: .88rem;
      max-width: 44rem
    }

    @media (max-width:960px) {
      .plans {
        grid-template-columns: 1fr;
        max-width: 560px
      }
    }

    /* Testimonios */
    .quotes {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 1rem
    }

    .quote {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 1.5rem;
      padding: 1.75rem;
      border: 1px solid var(--line);
      border-radius: 18px;
      background: rgba(15, 30, 54, .4)
    }

    .quote p {
      color: var(--text);
      font-size: 1rem;
      line-height: 1.65
    }

    .quote figcaption {
      display: flex;
      align-items: center;
      gap: .85rem;
      font-size: .9rem;
      color: var(--muted);
      line-height: 1.4
    }

    .quote figcaption b {
      display: block;
      color: var(--text);
      font-weight: 600
    }

    .avatar {
      display: grid;
      place-items: center;
      width: 42px;
      height: 42px;
      border-radius: 50%;
      background: var(--deep);
      border: 1px solid rgba(109, 176, 232, .35);
      font: 600 .85rem/1 var(--head);
      flex: none
    }

    @media (max-width:960px) {
      .quotes {
        grid-template-columns: 1fr
      }
    }

    /* Cobertura + FAQ */
    .faq-grid {
      display: grid;
      grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
      gap: clamp(2rem, 5vw, 5rem);
      align-items: start
    }

    .coverage {
      margin-top: 1.75rem;
      padding: 1.5rem;
      border: 1px solid var(--line);
      border-radius: 16px;
      background: rgba(15, 30, 54, .4)
    }

    .coverage li {
      display: flex;
      gap: .6rem;
      align-items: center;
      padding: .4rem 0;
      color: var(--text)
    }

    .coverage li::before {
      content: "";
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--blue-hi);
      flex: none
    }

    .coverage p {
      margin-top: 1rem;
      padding-top: 1rem;
      border-top: 1px solid var(--line);
      color: var(--muted);
      font-size: .9rem
    }

    .faq-list h2 {
      margin-bottom: 1.25rem
    }

    details {
      border-bottom: 1px solid var(--line)
    }

    details:first-of-type {
      border-top: 1px solid var(--line)
    }

    summary {
      list-style: none;
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 1rem;
      padding: 1.15rem 0;
      font: 500 1.05rem/1.4 var(--head);
      transition: color .2s var(--ease)
    }

    summary::-webkit-details-marker {
      display: none
    }

    summary svg {
      width: 18px;
      height: 18px;
      flex: none;
      color: var(--blue-hi);
      transition: transform .25s var(--ease)
    }

    details[open] summary svg {
      transform: rotate(45deg)
    }

    details p {
      padding: 0 2rem 1.25rem 0;
      color: var(--muted)
    }

    @media (hover:hover) {
      summary:hover {
        color: var(--blue-hi)
      }
    }

    @media (max-width:900px) {
      .faq-grid {
        grid-template-columns: 1fr
      }
    }

    /* CTA final */
    .cta {
      position: relative;
      isolation: isolate;
      overflow: hidden;
      padding: clamp(2.5rem, 6vw, 4.5rem);
      border: 1px solid var(--line-strong);
      border-radius: 24px;
      background: linear-gradient(140deg, var(--surface-2), var(--surface) 70%)
    }

    .cta::before {
      content: "";
      position: absolute;
      z-index: -1;
      inset: auto -10% -60% 30%;
      height: 120%;
      background: radial-gradient(closest-side, rgba(51, 132, 197, .35), transparent);
      pointer-events: none
    }

    .cta h2 {
      font-size: clamp(1.7rem, 2.6vw + .9rem, 2.8rem);
      line-height: 1.1;
      letter-spacing: -.028em;
      max-width: 34rem
    }

    .cta p {
      margin-top: 1rem;
      color: var(--muted);
      max-width: 32rem
    }

    .cta .btn {
      margin-top: 2rem
    }

    .cta small {
      display: block;
      margin-top: 1rem;
      color: var(--dim);
      font-size: .86rem
    }

    /* Footer */
    .site-footer {
      border-top: 1px solid var(--line);
      padding: clamp(3rem, 6vw, 5rem) 0 2rem;
      margin-top: clamp(72px, 9vw, 128px);
      color: var(--muted);
      font-size: .94rem
    }

    .foot-grid {
      display: grid;
      grid-template-columns: 1.5fr 1fr 1fr 1fr;
      gap: 2.5rem
    }

    .foot-grid h2 {
      font: 600 .95rem/1.2 var(--head);
      color: var(--text);
      margin-bottom: 1rem
    }

    .foot-grid li {
      margin-bottom: .6rem
    }

    .foot-grid p {
      max-width: 22rem
    }

    .site-footer a {
      transition: color .2s var(--ease)
    }

    @media (hover:hover) {
      .site-footer a:hover {
        color: var(--text)
      }
    }

    .foot-bottom {
      margin-top: 3rem;
      padding-top: 1.5rem;
      border-top: 1px solid var(--line);
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: .75rem;
      font-size: .86rem;
      color: var(--dim)
    }

    @media (max-width:900px) {
      .foot-grid {
        grid-template-columns: 1fr 1fr
      }
    }

    @media (max-width:520px) {
      .foot-grid {
        grid-template-columns: 1fr
      }
    }

    /* WhatsApp flotante */
    .wa-float {
      position: fixed;
      right: max(18px, env(safe-area-inset-right));
      bottom: max(18px, env(safe-area-inset-bottom));
      z-index: 60;
      display: grid;
      place-items: center;
      width: 56px;
      height: 56px;
      border-radius: 50%;
      background: var(--wa);
      color: #04220E;
      box-shadow: 0 12px 30px -8px rgba(37, 211, 102, .6);
      transition: transform .16s var(--ease), box-shadow .2s var(--ease)
    }

    .wa-float svg {
      width: 28px;
      height: 28px
    }

    .wa-float:active {
      transform: scale(.94)
    }

    @media (hover:hover) {
      .wa-float:hover {
        transform: scale(1.06)
      }
    }

    /* Movimiento reducido: mismo contenido, sin desplazamientos */
    @media (prefers-reduced-motion:reduce) {
      html {
        scroll-behavior: auto
      }

      .rise,
      .status[data-state=open] i {
        animation: none
      }

      .js .steps li {
        opacity: 1;
        transform: none;
        transition: none
      }

      * {
        transition-duration: .01ms !important
      }
    }