* {
      margin: 0;
      padding: 0;
      box-sizing: border-box
    }

    *::selection {
      background: #29ABE2;
      color: #fff
    }

    :root {
      --navy: #1B2D4F;
      --navy-deep: #080F1E;
      --navy-mid: #0D1A30;
      --cream: #F2EEE6;
      --cream-warm: #E8E0CF;
      --bg: #FBFAF6;
      --white: #FFFFFF;
      --cyan: #29ABE2;
      --cyan-deep: #1f8eb4;
      --gold: #C9A961;
      --text: #0F172A;
      --text-mid: #5C6473;
      --text-light: #9AA1B0;
      --line: rgba(13, 26, 48, .08);
      --line-strong: rgba(13, 26, 48, .14);
      --serif: 'Playfair Display', serif;
      --sans: 'DM Sans', sans-serif;
      --shadow-card: 0 1px 2px rgba(13, 26, 48, .04), 0 8px 24px -8px rgba(13, 26, 48, .08);
      --shadow-lift: 0 4px 12px rgba(13, 26, 48, .06), 0 24px 48px -12px rgba(13, 26, 48, .16);
      --shadow-navy: 0 24px 64px -16px rgba(8, 15, 30, .55), 0 0 0 1px rgba(255, 255, 255, .04);
      --shadow-cyan: 0 8px 24px -6px rgba(41, 171, 226, .4);
      --shadow-premium: 0 1px 1px rgba(13, 26, 48, .04), 0 4px 8px rgba(13, 26, 48, .04), 0 16px 32px -8px rgba(13, 26, 48, .10), 0 32px 64px -16px rgba(13, 26, 48, .14);
      --max: 1240px;
      --pad: clamp(20px, 4vw, 40px);
      --ease: cubic-bezier(.22, 1, .36, 1);
      --ease-out: cubic-bezier(.16, 1, .3, 1);
      --ease-soft: cubic-bezier(.4, .2, .2, 1);
    }

    html {
      scroll-behavior: smooth;
      -webkit-text-size-adjust: 100%
    }

    body {
      font-family: var(--sans);
      color: var(--text);
      background: var(--bg);
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-rendering: optimizeLegibility;
      line-height: 1.55;
      font-size: 15px;
    }

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

    button {
      font: inherit;
      cursor: pointer;
      border: none;
      background: none
    }

    a {
      color: inherit
    }

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

    .btn-primary:focus-visible,
    .nav-cta:focus-visible,
    .cr-cta:focus-visible {
      outline-offset: 4px
    }

    input,
    textarea {
      font: inherit
    }

    .skip {
      position: absolute;
      left: -9999px;
      top: 0;
      background: var(--navy);
      color: #fff;
      padding: 12px 18px;
      z-index: 300;
      font-size: 13px;
      border-radius: 0 0 8px 0;
      font-weight: 600
    }

    .skip:focus {
      left: 0
    }

    .scroll-progress {
      position: fixed;
      top: 0;
      left: 0;
      height: 2px;
      width: 0;
      background: linear-gradient(90deg, var(--cyan), #5DD3F5);
      z-index: 200;
      transition: width .08s linear;
      box-shadow: 0 0 12px rgba(41, 171, 226, .6)
    }

    .grain {
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 90;
      background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
      opacity: .05;
      mix-blend-mode: multiply
    }

    .wrap {
      max-width: var(--max);
      margin: 0 auto;
      padding: 0 var(--pad);
      position: relative
    }

    /* ============================================
   WORD-STAGGER REVEAL
============================================ */
    .split .w {
      display: inline-block;
      overflow: hidden;
      vertical-align: bottom;
      padding-bottom: .08em;
      margin-bottom: -.08em;
      line-height: inherit
    }

    .split .wi {
      display: inline-block;
      transform: translateY(110%);
      transition: transform 1s var(--ease);
      will-change: transform
    }

    .split.in .wi {
      transform: translateY(0)
    }

    /* ============================================
   NAV
============================================ */
    .nav {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 100;
      padding: 18px 0;
      transition: all .4s var(--ease)
    }

    .nav.scrolled {
      background: rgba(8, 15, 30, .85);
      backdrop-filter: blur(24px) saturate(180%);
      -webkit-backdrop-filter: blur(24px) saturate(180%);
      padding: 10px 0;
      border-bottom: 1px solid rgba(255, 255, 255, .05)
    }

    .nav-inner {
      display: flex;
      align-items: center;
      justify-content: space-between
    }

    .nav-logo {
      display: flex;
      align-items: center;
      gap: 16px;
      text-decoration: none;
      position: relative;
      perspective: 800px
    }

    .nav-logo-mark {
      position: relative;
      width: 60px;
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transform-style: preserve-3d;
      transition: width .4s var(--ease), height .4s var(--ease), transform .5s var(--ease)
    }

    .nav-logo-mark::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 50%;
      border: 1px solid rgba(41, 171, 226, .16);
      pointer-events: none
    }

    .nav-logo-mark::after {
      content: '';
      position: absolute;
      inset: 6px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(41, 171, 226, .28), transparent 65%);
      animation: logoGlow 3.6s ease-in-out infinite;
      pointer-events: none;
      z-index: 0;
      filter: blur(2px)
    }

    @keyframes logoGlow {

      0%,
      100% {
        opacity: .35;
        transform: scale(.82)
      }

      50% {
        opacity: 1;
        transform: scale(1.18)
      }
    }

    .nav-logo-orbit {
      position: absolute;
      inset: 0;
      border-radius: 50%;
      background: conic-gradient(from 0deg, rgba(41, 171, 226, 0) 0deg, rgba(41, 171, 226, 0) 230deg, rgba(41, 171, 226, .4) 290deg, rgba(41, 171, 226, 1) 345deg, rgba(41, 171, 226, 0) 360deg);
      -webkit-mask: radial-gradient(circle, transparent 64%, #000 66%, #000 100%);
      mask: radial-gradient(circle, transparent 64%, #000 66%, #000 100%);
      animation: logoOrbit 7s linear infinite;
      pointer-events: none;
      filter: drop-shadow(0 0 4px rgba(41, 171, 226, .6));
      transition: animation-duration .5s var(--ease)
    }

    @keyframes logoOrbit {
      to {
        transform: rotate(360deg)
      }
    }

    .nav-logo img {
      width: 38px;
      height: 38px;
      border-radius: 11px;
      box-shadow: 0 6px 18px rgba(8, 15, 30, .5), 0 0 0 1px rgba(255, 255, 255, .06), inset 0 1px 0 rgba(255, 255, 255, .1);
      transition: transform .5s var(--ease), width .4s var(--ease), height .4s var(--ease);
      position: relative;
      z-index: 1
    }

    .nav-logo-text {
      font-family: var(--serif);
      font-size: 25px;
      font-weight: 600;
      color: #E8E0D0;
      letter-spacing: .05em;
      transition: font-size .4s var(--ease), color .3s
    }

    .nav-logo:hover .nav-logo-orbit {
      animation-duration: 2.5s
    }

    .nav-logo:hover .nav-logo-mark {
      transform: rotateY(10deg) rotateX(-4deg)
    }

    .nav-logo:hover img {
      transform: scale(1.04)
    }

    .nav-logo:hover .nav-logo-text {
      color: #F4ECDB
    }

    .nav.scrolled .nav-logo-mark {
      width: 48px;
      height: 48px
    }

    .nav.scrolled .nav-logo img {
      width: 30px;
      height: 30px;
      border-radius: 9px
    }

    .nav.scrolled .nav-logo-text {
      font-size: 20px
    }

    .nav-toggle {
      display: none;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 5px;
      width: 44px;
      height: 44px;
      border-radius: 12px;
      position: relative;
      z-index: 101
    }

    .nav-toggle span {
      display: block;
      width: 24px;
      height: 2px;
      background: #E8E0D0;
      border-radius: 2px;
      transition: transform .3s var(--ease), opacity .2s var(--ease)
    }

    .nav.open .nav-toggle span:nth-child(1) {
      transform: translateY(7px) rotate(45deg)
    }

    .nav.open .nav-toggle span:nth-child(2) {
      opacity: 0
    }

    .nav.open .nav-toggle span:nth-child(3) {
      transform: translateY(-7px) rotate(-45deg)
    }

    .nav-cta-bar {
      display: none
    }

    .nav-links {
      display: flex;
      gap: 30px;
      align-items: center
    }

    .nav-links a {
      color: rgba(232, 224, 208, .72);
      text-decoration: none;
      font-size: 13px;
      font-weight: 500;
      transition: color .25s;
      position: relative
    }

    .nav-links a:not(.nav-cta):hover {
      color: #E8E0D0
    }

    .nav-links a:not(.nav-cta)::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      bottom: -6px;
      height: 1px;
      background: var(--cyan);
      transform: scaleX(0);
      transform-origin: right;
      transition: transform .35s var(--ease)
    }

    .nav-links a:not(.nav-cta):hover::after {
      transform: scaleX(1);
      transform-origin: left
    }

    .nav-cta {
      background: var(--cyan) !important;
      color: #fff !important;
      padding: 10px 20px;
      border-radius: 999px;
      font-weight: 600 !important;
      font-size: 13px;
      transition: all .3s var(--ease)
    }

    .nav-cta:hover {
      background: var(--cyan-deep) !important;
      transform: translateY(-1px);
      box-shadow: 0 12px 28px -8px rgba(41, 171, 226, .5)
    }

    .nav-cta::after {
      display: none !important
    }

    /* ============================================
   BUTTONS — magnetic compose
============================================ */
    .btn-primary {
      position: relative;
      background: var(--cyan);
      color: #fff;
      padding: 14px 26px;
      border-radius: 999px;
      font-size: 13.5px;
      font-weight: 600;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      cursor: pointer;
      font-family: var(--sans);
      letter-spacing: .01em;
      overflow: hidden;
      isolation: isolate;
      box-shadow: var(--shadow-cyan);
      border: 0;
      appearance: none;
      -webkit-appearance: none;
      --mx: 0px;
      --my: 0px;
      --lift: 0;
      transform: translate(var(--mx), var(--my)) translateY(calc(var(--lift) * -2px));
      transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .3s
    }

    .btn-primary::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, #39C4F0, var(--cyan));
      opacity: 0;
      transition: opacity .35s;
      z-index: -1
    }

    .btn-primary:hover {
      --lift: 1;
      box-shadow: 0 16px 36px -8px rgba(41, 171, 226, .55)
    }

    .btn-primary:hover::before {
      opacity: 1
    }

    .btn-primary:active {
      --lift: 0
    }

    .btn-primary svg {
      width: 14px;
      height: 14px;
      stroke: currentColor;
      fill: none;
      stroke-width: 2;
      transition: transform .3s
    }

    .btn-primary:hover svg {
      transform: translateX(3px)
    }

    .btn-secondary {
      color: rgba(232, 224, 208, .85);
      padding: 13px 22px;
      font-size: 13.5px;
      font-weight: 500;
      text-decoration: none;
      transition: all .3s var(--ease);
      display: inline-flex;
      align-items: center;
      gap: 9px;
      position: relative;
      border: 1px solid rgba(232, 224, 208, .18);
      border-radius: 999px;
      background: rgba(232, 224, 208, .02)
    }

    .btn-secondary:hover {
      color: #F0E8D7;
      border-color: rgba(41, 171, 226, .45);
      background: rgba(41, 171, 226, .06);
      transform: translateY(-1px)
    }

    .btn-secondary svg {
      width: 13px;
      height: 13px;
      stroke: currentColor;
      fill: none;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
      flex-shrink: 0;
      transition: transform .3s var(--ease)
    }

    .btn-secondary:hover svg {
      transform: translateY(2px)
    }

    /* ============================================
   HERO
============================================ */
    .hero {
      min-height: 100dvh;
      background: linear-gradient(165deg, #050A16 0%, #0D1A30 30%, #1B2D4F 70%, #1e3356 100%);
      display: flex;
      align-items: center;
      position: relative;
      overflow: hidden;
      padding: 110px 0 240px;
      isolation: isolate
    }

    .hero::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      bottom: -1px;
      height: 220px;
      background: linear-gradient(180deg, transparent 0%, rgba(251, 250, 246, .04) 22%, rgba(251, 250, 246, .18) 45%, rgba(251, 250, 246, .5) 72%, rgba(251, 250, 246, .85) 90%, var(--bg) 100%);
      z-index: 2;
      pointer-events: none
    }

    .hero-bg-grid {
      position: absolute;
      inset: 0;
      background-image: linear-gradient(rgba(41, 171, 226, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(41, 171, 226, .04) 1px, transparent 1px);
      background-size: 80px 80px;
      mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
      -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
      opacity: .5
    }

    .hero-glow-1 {
      position: absolute;
      top: -200px;
      right: -150px;
      width: 680px;
      height: 680px;
      background: radial-gradient(circle, rgba(41, 171, 226, .18), transparent 60%);
      filter: blur(20px);
      will-change: transform;
      animation: gf 12s ease-in-out infinite
    }

    .hero-glow-2 {
      position: absolute;
      bottom: -200px;
      left: -100px;
      width: 480px;
      height: 480px;
      background: radial-gradient(circle, rgba(41, 171, 226, .10), transparent 60%);
      filter: blur(20px);
      will-change: transform;
      animation: gf 14s ease-in-out infinite reverse
    }

    @keyframes gf {

      0%,
      100% {
        transform: translateY(0) scale(1)
      }

      50% {
        transform: translateY(-30px) scale(1.05)
      }
    }

    .hero-inner {
      display: grid;
      grid-template-columns: 1fr 1.05fr;
      gap: 64px;
      align-items: center;
      position: relative;
      z-index: 10
    }

    .hero-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 5px 14px 5px 5px;
      background: rgba(232, 224, 208, .05);
      border: 1px solid rgba(232, 224, 208, .1);
      border-radius: 999px;
      font-size: 11.5px;
      color: rgba(232, 224, 208, .7);
      font-weight: 500;
      margin-bottom: 26px;
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px)
    }

    .hero-eyebrow-tag {
      background: linear-gradient(135deg, var(--cyan), var(--cyan-deep));
      color: #fff;
      padding: 4px 11px;
      border-radius: 999px;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      font-family: var(--sans);
      box-shadow: 0 4px 12px rgba(41, 171, 226, .4), inset 0 1px 0 rgba(255, 255, 255, .18);
      position: relative;
      overflow: hidden
    }

    .hero-eyebrow-tag::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%);
      background-size: 200% 100%;
      animation: tagShimmer 4s ease-in-out infinite;
      animation-delay: 1s
    }

    @keyframes tagShimmer {

      0%,
      55% {
        background-position: 100% 0
      }

      80%,
      100% {
        background-position: -100% 0
      }
    }

    .hero-eyebrow-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--cyan);
      box-shadow: 0 0 12px var(--cyan);
      animation: pulse 2.4s ease-in-out infinite
    }

    @keyframes pulse {

      0%,
      100% {
        opacity: 1;
        transform: scale(1)
      }

      50% {
        opacity: .5;
        transform: scale(.7)
      }
    }

    .hero-eyebrow span:last-child {
      font-family: var(--serif);
      font-style: italic;
      font-size: 12px;
      color: rgba(232, 224, 208, .55)
    }

    .hero-text h1 {
      font-family: var(--serif);
      font-size: clamp(36px, 5.6vw, 72px);
      font-weight: 500;
      color: #F0E8D7;
      line-height: 1;
      letter-spacing: -.025em;
      margin-bottom: 24px;
      text-wrap: balance
    }

    .hero-text h1 em {
      font-style: italic;
      color: var(--cyan);
      font-weight: 400;
      position: relative;
      display: inline-block
    }

    .hero-text h1 em::after {
      content: '';
      position: absolute;
      left: 2%;
      right: 2%;
      bottom: .06em;
      height: .05em;
      background: var(--cyan);
      opacity: .28;
      border-radius: 99px
    }

    .hero-text h1 em .wi {
      background: linear-gradient(110deg, var(--cyan) 0%, var(--cyan) 38%, #ffffff 48%, #ffffff 52%, var(--cyan) 62%, var(--cyan) 100%);
      background-size: 280% 100%;
      background-position: 120% 0;
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      color: transparent;
      animation: lanternSweep 7s ease-in-out infinite;
      animation-delay: 3.5s
    }

    @keyframes lanternSweep {

      0%,
      68% {
        background-position: 120% 0
      }

      88% {
        background-position: -30% 0
      }

      100% {
        background-position: -30% 0
      }
    }

    .hero-text>p {
      font-size: clamp(15px, 1.15vw, 17px);
      color: rgba(232, 224, 208, .68);
      line-height: 1.6;
      margin-bottom: 36px;
      max-width: 460px
    }

    .hero-btns {
      display: flex;
      gap: 14px;
      align-items: center;
      margin-bottom: 48px;
      flex-wrap: wrap
    }

    .hero-trust {
      display: flex;
      gap: 32px;
      flex-wrap: wrap;
      padding-top: 28px;
      border-top: 1px solid rgba(232, 224, 208, .1)
    }

    .hero-trust-item {
      display: flex;
      align-items: center;
      gap: 10px;
      position: relative
    }

    .hero-trust-item:not(:last-child)::after {
      content: '';
      position: absolute;
      right: -16px;
      top: 50%;
      width: 1px;
      height: 14px;
      background: rgba(232, 224, 208, .12);
      transform: translateY(-50%)
    }

    .hero-trust-item .hero-trust-icon {
      width: 26px;
      height: 26px;
      border-radius: 50%;
      background: rgba(41, 171, 226, .1);
      border: 1px solid rgba(41, 171, 226, .22);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: all .3s var(--ease)
    }

    .hero-trust-item:hover .hero-trust-icon {
      background: rgba(41, 171, 226, .18);
      border-color: rgba(41, 171, 226, .4);
      transform: scale(1.08)
    }

    .hero-trust-item svg {
      width: 12px;
      height: 12px;
      stroke: var(--cyan);
      fill: none;
      stroke-width: 2.4;
      stroke-linecap: round;
      stroke-linejoin: round;
      flex-shrink: 0
    }

    .hero-trust-item span {
      font-size: 11px;
      color: rgba(232, 224, 208, .62);
      font-weight: 500;
      letter-spacing: .08em;
      text-transform: uppercase;
      transition: color .3s var(--ease)
    }

    .hero-trust-item:hover span {
      color: rgba(232, 224, 208, .85)
    }

    .hero-hook {
      margin-top: -28px;
      margin-bottom: 20px;
      font-size: 13.5px;
      color: rgba(232, 224, 208, .72);
      font-weight: 500;
      letter-spacing: .01em
    }

    .hero-hook strong {
      color: var(--cyan);
      font-weight: 700
    }

    .hero-visual {
      position: relative;
      perspective: 1400px;
      will-change: transform
    }

    .hero-visual::before {
      content: '';
      position: absolute;
      inset: -30px;
      background: radial-gradient(ellipse at 50% 50%, rgba(41, 171, 226, .18), transparent 60%);
      filter: blur(40px);
      z-index: -1
    }

    .browser-mockup {
      background: #0D1521;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: var(--shadow-navy);
      transform: rotateY(-3deg) rotateX(1deg) translateZ(0);
      transition: transform .8s var(--ease);
      border: 1px solid rgba(255, 255, 255, .06)
    }

    .browser-mockup:hover {
      transform: rotateY(-1deg) rotateX(.5deg)
    }

    .browser-bar {
      height: 34px;
      background: #0A111B;
      display: flex;
      align-items: center;
      padding: 0 13px;
      gap: 7px;
      border-bottom: 1px solid rgba(255, 255, 255, .04)
    }

    .browser-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%
    }

    .browser-dot.r {
      background: #FF5F57
    }

    .browser-dot.y {
      background: #FEBC2E
    }

    .browser-dot.g {
      background: #28C840
    }

    .browser-url {
      flex: 1;
      margin: 0 14px;
      height: 20px;
      background: rgba(255, 255, 255, .04);
      border-radius: 6px;
      display: flex;
      align-items: center;
      padding: 0 11px;
      font-size: 10.5px;
      color: rgba(255, 255, 255, .42);
      font-family: var(--sans);
      letter-spacing: .02em
    }

    .browser-body img {
      width: 100%;
      display: block
    }

    .hero-float {
      position: absolute;
      bottom: 28px;
      left: -40px;
      background: #fff;
      padding: 14px 18px;
      border-radius: 14px;
      box-shadow: 0 24px 48px -16px rgba(8, 15, 30, .45), 0 4px 12px rgba(8, 15, 30, .08);
      display: flex;
      align-items: center;
      gap: 12px;
      animation: fc 5s ease-in-out infinite;
      z-index: 2;
      border: 1px solid rgba(8, 15, 30, .04)
    }

    @keyframes fc {

      0%,
      100% {
        transform: translateY(0) rotate(-1deg)
      }

      50% {
        transform: translateY(-12px) rotate(0deg)
      }
    }

    .hero-float-icon {
      width: 38px;
      height: 38px;
      border-radius: 11px;
      background: linear-gradient(135deg, rgba(41, 171, 226, .18), rgba(41, 171, 226, .05));
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0
    }

    .hero-float-icon svg {
      width: 18px;
      height: 18px;
      stroke: var(--cyan);
      fill: none;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round
    }

    .hero-float-text {
      font-size: 11px;
      color: var(--text-mid);
      line-height: 1.35
    }

    .hero-float-text strong {
      display: block;
      font-size: 13px;
      color: var(--navy);
      font-weight: 700;
      margin-bottom: 2px;
      font-feature-settings: "tnum"
    }

    /* Particle field */
    .hero-particles {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 1;
      overflow: hidden;
      mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
      -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%)
    }

    .particle {
      position: absolute;
      bottom: -8px;
      left: var(--x, 50%);
      width: 2px;
      height: 2px;
      border-radius: 50%;
      background: var(--cyan);
      box-shadow: 0 0 6px rgba(41, 171, 226, .7);
      opacity: 0;
      animation: particleFloat var(--s, 12s) linear var(--d, 0s) infinite;
      will-change: transform, opacity
    }

    .particle.lg {
      width: 3px;
      height: 3px;
      box-shadow: 0 0 9px rgba(41, 171, 226, .95)
    }

    .particle.sm {
      width: 1px;
      height: 1px;
      box-shadow: 0 0 4px rgba(41, 171, 226, .5)
    }

    @keyframes particleFloat {
      0% {
        transform: translateY(0) translateX(0);
        opacity: 0
      }

      10% {
        opacity: var(--o, .55)
      }

      50% {
        transform: translateY(-50vh) translateX(var(--dx, 12px));
        opacity: var(--o, .55)
      }

      90% {
        opacity: calc(var(--o, .55) * .4)
      }

      100% {
        transform: translateY(-110vh) translateX(var(--dx2, 24px));
        opacity: 0
      }
    }


    /* ============================================
   SECTORES — visual card grid
============================================ */
    .sectores {
      padding: 90px 0 110px;
      background: var(--bg);
      position: relative;
      overflow: hidden
    }

    .sectores::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image: radial-gradient(circle at 1px 1px, rgba(13, 26, 48, .06) 1px, transparent 0);
      background-size: 32px 32px;
      opacity: .35;
      mask-image: radial-gradient(ellipse 80% 60% at center, #000, transparent);
      -webkit-mask-image: radial-gradient(ellipse 80% 60% at center, #000, transparent);
      pointer-events: none
    }

    .sectores-header {
      text-align: center;
      margin-bottom: 24px;
      max-width: 780px;
      margin-left: auto;
      margin-right: auto;
      position: relative
    }

    .sectores-subtitle {
      font-size: 14.5px;
      color: var(--text-mid);
      line-height: 1.65;
      max-width: 560px;
      margin: -32px auto 0;
      position: relative
    }

    .sectores-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
      max-width: 1080px;
      margin: 48px auto 0;
      position: relative
    }

    .sectores-grid>.sector-card:last-child:nth-child(3n+1) {
      grid-column: 2/3
    }

    .sector-card {
      background: var(--white);
      border: 1px solid var(--line);
      border-radius: 20px;
      padding: 32px 28px;
      transition: all .5s var(--ease);
      position: relative;
      overflow: hidden;
      cursor: default;
      --mx: 50%;
      --my: 50%;
      display: flex;
      flex-direction: column
    }

    .sector-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%) scaleX(0);
      width: 60%;
      height: 2px;
      background: linear-gradient(90deg, transparent, var(--cyan), transparent);
      transition: transform .5s var(--ease)
    }

    .sector-card::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 20px;
      background: radial-gradient(500px circle at var(--mx) var(--my), rgba(41, 171, 226, .06), transparent 40%);
      opacity: 0;
      transition: opacity .4s;
      pointer-events: none
    }

    .sector-card:hover::before {
      transform: translateX(-50%) scaleX(1)
    }

    .sector-card:hover::after {
      opacity: 1
    }

    .sector-card:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-lift);
      border-color: rgba(41, 171, 226, .22)
    }

    .sector-card-icon {
      width: 60px;
      height: 60px;
      border-radius: 18px;
      background: linear-gradient(135deg, rgba(41, 171, 226, .14), rgba(27, 45, 79, .04));
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 24px;
      border: 1px solid rgba(41, 171, 226, .14);
      transition: all .5s var(--ease);
      position: relative;
      flex-shrink: 0
    }

    .sector-card:hover .sector-card-icon {
      background: linear-gradient(135deg, rgba(41, 171, 226, .22), rgba(41, 171, 226, .05));
      transform: scale(1.06) rotate(-3deg);
      border-color: rgba(41, 171, 226, .32);
      box-shadow: 0 8px 24px -10px rgba(41, 171, 226, .4)
    }

    .sector-card-icon svg {
      width: 28px;
      height: 28px;
      stroke: var(--cyan);
      fill: none;
      stroke-width: 1.6;
      stroke-linecap: round;
      stroke-linejoin: round;
      transition: transform .5s var(--ease)
    }

    .sector-card:hover .sector-card-icon svg {
      transform: scale(1.08)
    }

    .sector-card h3 {
      font-family: var(--serif);
      font-size: 22px;
      font-weight: 500;
      color: var(--navy);
      margin-bottom: 8px;
      letter-spacing: -.01em;
      line-height: 1.2
    }

    .sector-card p {
      font-size: 13.5px;
      color: var(--text-mid);
      line-height: 1.6
    }

    .sectores-foot {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 18px;
      margin: 56px auto 0;
      padding: 22px 32px;
      font-family: var(--serif);
      font-style: italic;
      font-size: 17px;
      color: var(--navy);
      line-height: 1.5;
      background: linear-gradient(180deg, #fff, #FCFAF5);
      border: 1px solid var(--line);
      border-radius: 20px;
      max-width: 720px;
      box-shadow: 0 1px 2px rgba(13, 26, 48, .04), 0 8px 28px -10px rgba(13, 26, 48, .1);
      position: relative;
      flex-wrap: wrap;
      text-align: center
    }

    .sectores-foot::before {
      content: '';
      position: absolute;
      top: -1px;
      left: 50%;
      transform: translateX(-50%);
      width: 80px;
      height: 2px;
      background: linear-gradient(90deg, transparent, var(--cyan), transparent)
    }

    .sectores-foot strong {
      color: var(--text);
      font-style: normal;
      font-family: var(--sans);
      font-weight: 600;
      font-size: 15px;
      letter-spacing: -.005em
    }

    .sectores-foot a {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: #fff;
      font-weight: 600;
      font-style: normal;
      font-family: var(--sans);
      font-size: 14px;
      background: linear-gradient(135deg, #25D366, #1eb158);
      padding: 11px 20px;
      border-radius: 999px;
      text-decoration: none;
      transition: all .3s var(--ease);
      box-shadow: 0 6px 18px -4px rgba(37, 211, 102, .5);
      position: relative;
      overflow: hidden;
      flex-shrink: 0
    }

    .sectores-foot a::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, #1eb158, #25D366);
      opacity: 0;
      transition: opacity .3s
    }

    .sectores-foot a:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 24px -4px rgba(37, 211, 102, .6)
    }

    .sectores-foot a:hover::before {
      opacity: 1
    }

    .sectores-foot a svg {
      width: 15px;
      height: 15px;
      stroke: currentColor;
      fill: none;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
      flex-shrink: 0;
      position: relative;
      z-index: 1
    }

    .sectores-foot a span {
      position: relative;
      z-index: 1
    }

    /* ============================================
   SHARED
============================================ */
    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      font-family: var(--serif);
      font-style: italic;
      font-size: 13px;
      font-weight: 500;
      color: var(--cyan);
      margin-bottom: 18px
    }

    .eyebrow::before {
      content: '';
      width: 24px;
      height: 1px;
      background: var(--cyan)
    }

    .eyebrow.center {
      justify-content: center
    }

    .eyebrow.center::before {
      display: none
    }

    .eyebrow.center::after {
      content: '';
      width: 32px;
      height: 1px;
      background: var(--cyan);
      margin-left: 6px
    }

    .section-title {
      font-family: var(--serif);
      font-size: clamp(28px, 3.6vw, 46px);
      font-weight: 500;
      color: var(--navy);
      line-height: 1.1;
      letter-spacing: -.02em;
      margin-bottom: 48px;
      text-wrap: balance
    }

    .section-title em {
      font-style: italic;
      color: var(--cyan);
      font-weight: 400
    }

    .center {
      text-align: center
    }

    .center.section-title {
      margin-left: auto;
      margin-right: auto;
      max-width: 780px
    }

    /* ============================================
   PROBLEMA — compact 3-col bento
============================================ */
    .problema {
      padding: 80px 0 90px;
      background: var(--bg);
      position: relative;
      overflow: hidden
    }

    .problema::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image: radial-gradient(circle at 1px 1px, rgba(13, 26, 48, .07) 1px, transparent 0);
      background-size: 32px 32px;
      opacity: .35;
      mask-image: radial-gradient(ellipse 70% 50% at center top, #000, transparent);
      -webkit-mask-image: radial-gradient(ellipse 70% 50% at center top, #000, transparent)
    }

    .problema-inner {
      position: relative
    }

    .problema-header {
      text-align: center;
      margin-bottom: 40px;
      max-width: 780px;
      margin-left: auto;
      margin-right: auto
    }

    .problema .section-title {
      margin-bottom: 0
    }

    .problema-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
      counter-reset: problema
    }

    .problema-card {
      background: var(--white);
      border-radius: 20px;
      padding: 30px 28px;
      border: 1px solid var(--line);
      transition: all .5s var(--ease);
      position: relative;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      counter-increment: problema;
      --mx: 50%;
      --my: 50%;
      isolation: isolate
    }

    .problema-card::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 20px;
      padding: 1px;
      background: radial-gradient(500px circle at var(--mx) var(--my), rgba(41, 171, 226, .5), transparent 40%);
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      opacity: 0;
      transition: opacity .4s;
      pointer-events: none;
      z-index: 2
    }

    .problema-card::after {
      content: counter(problema, decimal-leading-zero);
      position: absolute;
      bottom: -50px;
      right: -12px;
      font-family: var(--serif);
      font-size: 200px;
      font-weight: 500;
      color: var(--cyan);
      opacity: .05;
      line-height: .85;
      letter-spacing: -.05em;
      pointer-events: none;
      font-feature-settings: "lnum";
      transition: all .6s var(--ease);
      z-index: 0
    }

    .problema-card:hover::before {
      opacity: 1
    }

    .problema-card:hover::after {
      opacity: .1;
      transform: scale(1.06) rotate(-3deg)
    }

    .problema-card:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-lift);
      border-color: rgba(41, 171, 226, .2)
    }

    .problema-card:nth-child(1) {
      background: linear-gradient(180deg, #fff, #FBF7EE);
      border-color: rgba(41, 171, 226, .2);
      box-shadow: 0 1px 2px rgba(13, 26, 48, .04), 0 12px 30px -10px rgba(41, 171, 226, .16)
    }

    .problema-card:nth-child(1)::after {
      color: var(--navy);
      opacity: .06
    }

    .problema-card>* {
      position: relative;
      z-index: 1
    }

    .problema-num {
      font-family: var(--serif);
      font-style: italic;
      font-size: 12px;
      color: var(--text-light);
      letter-spacing: .02em;
      margin-bottom: 24px;
      display: flex;
      align-items: center;
      gap: 10px
    }

    .problema-num::before {
      content: counter(problema, decimal-leading-zero);
      color: var(--cyan);
      font-weight: 500;
      font-style: normal;
      font-feature-settings: "lnum"
    }

    .problema-num::after {
      content: '';
      flex: 1;
      height: 1px;
      background: var(--line);
      max-width: 50px
    }

    .problema-icon {
      width: 54px;
      height: 54px;
      border-radius: 15px;
      background: linear-gradient(135deg, rgba(41, 171, 226, .14), rgba(27, 45, 79, .04));
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 0 18px;
      border: 1px solid rgba(41, 171, 226, .12);
      transition: all .5s var(--ease)
    }

    .problema-card:hover .problema-icon {
      transform: scale(1.06) rotate(-4deg);
      background: linear-gradient(135deg, rgba(41, 171, 226, .22), rgba(41, 171, 226, .05));
      border-color: rgba(41, 171, 226, .3);
      box-shadow: 0 8px 22px -10px rgba(41, 171, 226, .45)
    }

    .problema-icon svg {
      width: 24px;
      height: 24px;
      stroke: var(--cyan);
      fill: none;
      stroke-width: 1.6;
      stroke-linecap: round;
      stroke-linejoin: round;
      transition: transform .5s var(--ease)
    }

    .problema-card:hover .problema-icon svg {
      transform: scale(1.08)
    }

    .problema-card h3 {
      font-family: var(--serif);
      font-size: 21px;
      font-weight: 500;
      color: var(--navy);
      margin-bottom: 10px;
      letter-spacing: -.01em;
      line-height: 1.2
    }

    .problema-card p {
      font-size: 13.5px;
      color: var(--text-mid);
      line-height: 1.65
    }

    /* ============================================
   COMO — pasos with CSS-animated demo UIs
============================================ */
    .como {
      padding: 110px 0;
      background: linear-gradient(180deg, var(--bg) 0%, var(--white) 30%, var(--white) 100%);
      position: relative
    }

    .como-header {
      text-align: center;
      margin-bottom: 72px;
      max-width: 780px;
      margin-left: auto;
      margin-right: auto
    }

    .como-subtitle {
      font-size: 15px;
      color: var(--text-mid);
      line-height: 1.55;
      max-width: 640px;
      margin: 14px auto 0
    }

    .pasos {
      display: flex;
      flex-direction: column;
      gap: 120px;
      position: relative
    }

    .pasos::before {
      content: '';
      position: absolute;
      top: 100px;
      bottom: 100px;
      left: 50%;
      width: 1px;
      background: linear-gradient(180deg, transparent, var(--line) 8%, var(--line) 92%, transparent);
      transform: translateX(-.5px);
      pointer-events: none
    }

    .paso {
      display: grid;
      grid-template-columns: 1fr 1.15fr;
      gap: 64px;
      align-items: center;
      position: relative
    }

    .paso.reverse {
      direction: rtl
    }

    .paso.reverse>* {
      direction: ltr
    }

    .paso-text {
      position: relative
    }

    .paso-num-bg {
      font-family: var(--serif);
      font-size: clamp(120px, 15vw, 200px);
      font-weight: 500;
      color: var(--cyan);
      line-height: .85;
      letter-spacing: -.05em;
      opacity: .07;
      position: absolute;
      top: -44px;
      left: -24px;
      z-index: 0;
      pointer-events: none;
      font-feature-settings: "lnum"
    }

    .paso.reverse .paso-num-bg {
      left: auto;
      right: -24px
    }

    .paso-content {
      position: relative;
      z-index: 1
    }

    .paso-tag {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-family: var(--serif);
      font-style: italic;
      font-size: 12.5px;
      color: var(--cyan);
      margin-bottom: 14px;
      font-weight: 500
    }

    .paso-tag::before {
      content: '';
      width: 24px;
      height: 1px;
      background: var(--cyan)
    }

    .paso-text h3 {
      font-family: var(--serif);
      font-size: clamp(22px, 2.4vw, 32px);
      font-weight: 500;
      color: var(--navy);
      margin-bottom: 14px;
      letter-spacing: -.015em;
      line-height: 1.2;
      text-wrap: balance
    }

    .paso-text p {
      font-size: 14.5px;
      color: var(--text-mid);
      line-height: 1.65;
      max-width: 420px
    }

    .paso-visual {
      position: relative
    }

    .paso-visual::before {
      content: '';
      position: absolute;
      inset: -30px;
      background: radial-gradient(ellipse at 50% 50%, rgba(41, 171, 226, .10), transparent 60%);
      filter: blur(40px);
      z-index: -1
    }

    .paso-browser {
      background: #0D1521;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 24px 64px -16px rgba(8, 15, 30, .25), 0 0 0 1px rgba(8, 15, 30, .04);
      border: 1px solid rgba(8, 15, 30, .04);
      transition: transform .5s var(--ease)
    }

    .paso-browser:hover {
      transform: translateY(-4px)
    }

    .paso-browser .browser-bar {
      height: 30px
    }

    .paso-browser .browser-dot {
      width: 8px;
      height: 8px
    }

    .paso-browser .browser-url {
      height: 17px;
      font-size: 9.5px;
      margin: 0 11px
    }

    /* Demo UIs (CSS-animated) */
    .demo {
      background: var(--white);
      padding: 24px;
      min-height: 280px;
      font-family: var(--sans);
      position: relative
    }

    .demo-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px 14px;
      background: #F8F7F4;
      border-radius: 9px;
      margin-bottom: 8px;
      font-size: 12.5px;
      border: 1px solid rgba(13, 26, 48, .04);
      transform: translateY(8px);
      opacity: 0;
      transition: transform .55s var(--ease), opacity .55s var(--ease)
    }

    .demo-row .label {
      color: var(--text-mid);
      font-weight: 500
    }

    .demo-row .value {
      color: var(--navy);
      font-weight: 600;
      font-feature-settings: "tnum"
    }

    .demo-row .value-pill {
      padding: 3px 9px;
      background: rgba(41, 171, 226, .1);
      color: var(--cyan);
      border-radius: 999px;
      font-size: 11.5px;
      font-weight: 600
    }

    .demo.in .demo-row {
      transform: translateY(0);
      opacity: 1
    }

    .demo.in .demo-row:nth-child(1) {
      transition-delay: .15s
    }

    .demo.in .demo-row:nth-child(2) {
      transition-delay: .45s
    }

    .demo.in .demo-row:nth-child(3) {
      transition-delay: .75s
    }

    .demo.in .demo-row:nth-child(4) {
      transition-delay: 1.05s
    }

    .demo-result {
      margin-top: 14px;
      padding: 18px 16px;
      background: linear-gradient(135deg, var(--navy-mid), var(--navy));
      color: #fff;
      border-radius: 11px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      opacity: 0;
      transform: scale(.96);
      transition: opacity .6s var(--ease) 1.4s, transform .6s var(--ease) 1.4s;
      box-shadow: 0 12px 28px -10px rgba(13, 26, 48, .4)
    }

    .demo.in .demo-result {
      opacity: 1;
      transform: scale(1)
    }

    .demo-result .label {
      font-size: 11.5px;
      color: rgba(232, 224, 208, .6);
      font-weight: 500;
      letter-spacing: .05em;
      text-transform: uppercase
    }

    .demo-result .value {
      font-family: var(--serif);
      font-size: 24px;
      color: #F0E8D7;
      font-weight: 600;
      font-feature-settings: "tnum"
    }

    /* Demo 2 — Ajustes (checkboxes) */
    .demo-check {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 14px;
      background: #F8F7F4;
      border-radius: 9px;
      margin-bottom: 8px;
      font-size: 12.5px;
      border: 1px solid rgba(13, 26, 48, .04);
      opacity: 0;
      transform: translateX(-8px);
      transition: transform .5s var(--ease), opacity .5s var(--ease)
    }

    .demo.in .demo-check {
      opacity: 1;
      transform: translateX(0)
    }

    .demo.in .demo-check:nth-child(1) {
      transition-delay: .2s
    }

    .demo.in .demo-check:nth-child(2) {
      transition-delay: .55s
    }

    .demo.in .demo-check:nth-child(3) {
      transition-delay: .9s
    }

    .demo-check-box {
      width: 18px;
      height: 18px;
      border-radius: 5px;
      border: 1.5px solid rgba(13, 26, 48, .15);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      background: #fff;
      transition: all .35s var(--ease) .15s
    }

    .demo-check-box svg {
      width: 11px;
      height: 11px;
      stroke: #fff;
      fill: none;
      stroke-width: 3;
      stroke-linecap: round;
      stroke-linejoin: round;
      opacity: 0;
      transform: scale(.4);
      transition: opacity .35s var(--ease) .35s, transform .35s var(--ease) .35s
    }

    .demo.in .demo-check:nth-child(1) .demo-check-box {
      background: var(--cyan);
      border-color: var(--cyan);
      transition-delay: .55s
    }

    .demo.in .demo-check:nth-child(2) .demo-check-box {
      background: var(--cyan);
      border-color: var(--cyan);
      transition-delay: .9s
    }

    .demo.in .demo-check:nth-child(3) .demo-check-box {
      background: var(--cyan);
      border-color: var(--cyan);
      transition-delay: 1.25s
    }

    .demo.in .demo-check:nth-child(1) .demo-check-box svg {
      opacity: 1;
      transform: scale(1);
      transition-delay: .7s
    }

    .demo.in .demo-check:nth-child(2) .demo-check-box svg {
      opacity: 1;
      transform: scale(1);
      transition-delay: 1.05s
    }

    .demo.in .demo-check:nth-child(3) .demo-check-box svg {
      opacity: 1;
      transform: scale(1);
      transition-delay: 1.4s
    }

    .demo-check-text {
      flex: 1;
      color: var(--text);
      font-weight: 500
    }

    .demo-check-price {
      color: var(--text-mid);
      font-size: 11.5px;
      font-weight: 500;
      font-feature-settings: "tnum"
    }

    .demo-check-price.discount {
      color: var(--cyan)
    }

    /* Demo 3 — PDF + WhatsApp */
    .demo-doc {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 10px;
      padding: 18px;
      margin-bottom: 14px;
      position: relative;
      overflow: hidden;
      opacity: 0;
      transform: translateY(10px);
      transition: opacity .5s var(--ease) .3s, transform .5s var(--ease) .3s
    }

    .demo.in .demo-doc {
      opacity: 1;
      transform: translateY(0)
    }

    .demo-doc::before {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      left: -100%;
      width: 100%;
      background: linear-gradient(90deg, transparent, rgba(41, 171, 226, .15), transparent);
      transition: none
    }

    .demo.in .demo-doc::before {
      animation: shimmer 1.6s var(--ease) .8s forwards
    }

    @keyframes shimmer {
      to {
        left: 200%
      }
    }

    .demo-doc-line {
      height: 6px;
      background: rgba(13, 26, 48, .06);
      border-radius: 3px;
      margin-bottom: 6px;
      width: 100%;
      transform: scaleX(0);
      transform-origin: left;
      transition: transform .5s var(--ease)
    }

    .demo-doc-line.short {
      width: 60%
    }

    .demo-doc-line.med {
      width: 80%
    }

    .demo.in .demo-doc-line:nth-child(2) {
      transition-delay: .5s
    }

    .demo.in .demo-doc-line:nth-child(3) {
      transition-delay: .65s
    }

    .demo.in .demo-doc-line:nth-child(4) {
      transition-delay: .8s
    }

    .demo.in .demo-doc-line:nth-child(5) {
      transition-delay: .95s
    }

    .demo.in .demo-doc-line {
      transform: scaleX(1)
    }

    .demo-doc-header {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 14px
    }

    .demo-doc-icon {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      background: rgba(41, 171, 226, .1);
      display: flex;
      align-items: center;
      justify-content: center
    }

    .demo-doc-icon svg {
      width: 14px;
      height: 14px;
      stroke: var(--cyan);
      fill: none;
      stroke-width: 2
    }

    .demo-doc-title {
      font-size: 12.5px;
      color: var(--navy);
      font-weight: 600;
      font-feature-settings: "tnum"
    }

    .demo-actions {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      margin-bottom: 12px
    }

    .demo-action {
      padding: 11px 14px;
      border-radius: 9px;
      font-size: 12px;
      font-weight: 600;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      opacity: 0;
      transform: translateY(8px);
      transition: opacity .5s var(--ease), transform .5s var(--ease)
    }

    .demo.in .demo-action {
      opacity: 1;
      transform: translateY(0)
    }

    .demo.in .demo-action:nth-child(1) {
      transition-delay: 1.1s
    }

    .demo.in .demo-action:nth-child(2) {
      transition-delay: 1.25s
    }

    .demo-action-pdf {
      background: var(--cream);
      color: var(--navy);
      border: 1px solid var(--line)
    }

    .demo-action-wa {
      background: #25D366;
      color: #fff;
      position: relative;
      overflow: hidden
    }

    .demo.in .demo-action-wa::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 9px;
      border: 2px solid #25D366;
      animation: waPulse 1.5s ease-out 1.6s 2
    }

    @keyframes waPulse {
      0% {
        transform: scale(1);
        opacity: 1
      }

      100% {
        transform: scale(1.15);
        opacity: 0
      }
    }

    .demo-action svg {
      width: 13px;
      height: 13px;
      stroke: currentColor;
      fill: none;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round
    }

    .demo-success {
      padding: 11px 14px;
      background: rgba(37, 211, 102, .08);
      border: 1px solid rgba(37, 211, 102, .2);
      border-radius: 9px;
      display: flex;
      align-items: center;
      gap: 9px;
      font-size: 12px;
      color: #1B7B3F;
      font-weight: 500;
      opacity: 0;
      transform: translateY(8px);
      transition: opacity .5s var(--ease) 2s, transform .5s var(--ease) 2s
    }

    .demo.in .demo-success {
      opacity: 1;
      transform: translateY(0)
    }

    .demo-success svg {
      width: 14px;
      height: 14px;
      stroke: #1B7B3F;
      fill: none;
      stroke-width: 2.5;
      stroke-linecap: round;
      stroke-linejoin: round;
      flex-shrink: 0
    }

    /* ============================================
   FEATURES — bento dark
============================================ */
    .features {
      padding: 110px 0;
      background: linear-gradient(165deg, #080F1E, #0D1A30 35%, #1B2D4F 75%, #1e3356);
      position: relative;
      overflow: hidden;
      isolation: isolate
    }

    .features::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image: linear-gradient(rgba(41, 171, 226, .025) 1px, transparent 1px), linear-gradient(90deg, rgba(41, 171, 226, .025) 1px, transparent 1px);
      background-size: 80px 80px;
      mask-image: radial-gradient(ellipse at 50% 50%, #000 30%, transparent 75%);
      -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 30%, transparent 75%)
    }

    .features::after {
      content: '';
      position: absolute;
      top: -200px;
      right: -100px;
      width: 540px;
      height: 540px;
      background: radial-gradient(circle, rgba(41, 171, 226, .12), transparent 60%);
      filter: blur(40px);
      z-index: -1
    }

    .features-inner {
      position: relative;
      z-index: 1
    }

    .features-header {
      margin-bottom: 56px;
      text-align: center
    }

    .features .section-title {
      color: #F0E8D7;
      max-width: 680px;
      margin-left: auto;
      margin-right: auto
    }

    .features .section-title em {
      color: var(--cyan)
    }

    .features .eyebrow {
      color: var(--cyan)
    }

    .features .eyebrow.center::after,
    .features .eyebrow::before {
      background: var(--cyan)
    }

    .features-grid {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 12px
    }

    .feature-card {
      background: rgba(255, 255, 255, .025);
      border: 1px solid rgba(255, 255, 255, .06);
      border-radius: 18px;
      padding: 26px 24px;
      transition: all .5s var(--ease);
      position: relative;
      overflow: hidden;
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      --mx: 50%;
      --my: 50%
    }

    .feature-card::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 18px;
      padding: 1px;
      background: radial-gradient(500px circle at var(--mx) var(--my), rgba(41, 171, 226, .4), transparent 40%);
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      opacity: 0;
      transition: opacity .4s;
      pointer-events: none
    }

    .feature-card:hover::before {
      opacity: 1
    }

    .feature-card:hover {
      background: rgba(255, 255, 255, .05);
      transform: translateY(-3px)
    }

    .feature-card:nth-child(1) {
      grid-column: span 3
    }

    .feature-card:nth-child(2) {
      grid-column: span 3
    }

    .feature-card:nth-child(3) {
      grid-column: span 2
    }

    .feature-card:nth-child(4) {
      grid-column: span 2
    }

    .feature-card:nth-child(5) {
      grid-column: span 2
    }

    .feature-card:nth-child(6) {
      grid-column: span 6;
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 28px;
      padding: 30px 32px
    }

    .feature-card:nth-child(6) .feature-icon {
      margin-bottom: 0;
      flex-shrink: 0;
      width: 50px;
      height: 50px
    }

    .feature-card:nth-child(6) .feature-content {
      flex: 1
    }

    .feature-card:nth-child(6) p {
      max-width: 60ch
    }

    .feature-icon {
      width: 42px;
      height: 42px;
      border-radius: 12px;
      background: linear-gradient(135deg, rgba(41, 171, 226, .18), rgba(41, 171, 226, .04));
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 18px;
      border: 1px solid rgba(41, 171, 226, .15);
      flex-shrink: 0
    }

    .feature-icon svg {
      width: 19px;
      height: 19px;
      stroke: var(--cyan);
      fill: none;
      stroke-width: 1.7;
      stroke-linecap: round;
      stroke-linejoin: round
    }

    .feature-card h3 {
      font-family: var(--serif);
      font-size: 18px;
      font-weight: 500;
      color: #F0E8D7;
      margin-bottom: 8px;
      letter-spacing: -.005em;
      line-height: 1.2
    }

    .feature-card p {
      font-size: 12.5px;
      color: rgba(232, 224, 208, .7);
      line-height: 1.6;
      max-width: 46ch
    }

    /* Feature mini-mockup previews */
    .feature-preview {
      background: rgba(255, 255, 255, .025);
      border: 1px solid rgba(255, 255, 255, .06);
      border-radius: 12px;
      padding: 14px;
      margin-bottom: 22px;
      font-family: var(--sans);
      font-feature-settings: "tnum";
      position: relative;
      overflow: hidden;
      transition: background .4s var(--ease), border-color .4s var(--ease)
    }

    .feature-card:hover .feature-preview {
      background: rgba(255, 255, 255, .04);
      border-color: rgba(41, 171, 226, .18)
    }

    /* Calc preview */
    .fp-calc-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 7px 11px;
      background: rgba(255, 255, 255, .025);
      border-radius: 7px;
      margin-bottom: 4px;
      font-size: 11px
    }

    .fp-calc-row:last-child {
      margin-bottom: 0
    }

    .fp-calc-label {
      color: rgba(232, 224, 208, .45);
      font-weight: 500;
      letter-spacing: .005em
    }

    .fp-calc-value {
      color: rgba(232, 224, 208, .85);
      font-weight: 600
    }

    .fp-calc-row.is-result {
      background: linear-gradient(135deg, rgba(41, 171, 226, .14), rgba(41, 171, 226, .06));
      border: 1px solid rgba(41, 171, 226, .22);
      padding: 9px 11px;
      margin-top: 4px
    }

    .fp-calc-row.is-result .fp-calc-label {
      color: rgba(232, 224, 208, .7)
    }

    .fp-calc-row.is-result .fp-calc-value {
      font-family: var(--serif);
      font-size: 14px;
      color: var(--cyan);
      font-weight: 600
    }

    /* PDF preview */
    .fp-pdf {
      padding: 14px
    }

    .fp-pdf-head {
      display: flex;
      align-items: center;
      gap: 10px;
      padding-bottom: 10px;
      margin-bottom: 10px;
      border-bottom: 1px solid rgba(255, 255, 255, .05)
    }

    .fp-pdf-logo {
      width: 22px;
      height: 22px;
      border-radius: 5px;
      background: linear-gradient(135deg, var(--cyan), var(--cyan-deep));
      flex-shrink: 0;
      box-shadow: 0 2px 6px rgba(41, 171, 226, .4)
    }

    .fp-pdf-head-lines {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 4px
    }

    .fp-pdf-line {
      height: 5px;
      background: rgba(232, 224, 208, .18);
      border-radius: 2px;
      width: 100%
    }

    .fp-pdf-line.med {
      width: 80%
    }

    .fp-pdf-line.short {
      width: 55%
    }

    .fp-pdf-body {
      display: flex;
      flex-direction: column;
      gap: 5px;
      margin-bottom: 10px
    }

    .fp-pdf-total {
      text-align: right;
      font-family: var(--serif);
      font-size: 14px;
      color: var(--cyan);
      font-weight: 600;
      padding-top: 10px;
      border-top: 1px solid rgba(255, 255, 255, .05);
      font-feature-settings: "tnum"
    }

    /* WhatsApp preview */
    .fp-wa {
      background: linear-gradient(135deg, rgba(37, 211, 102, .05), rgba(37, 211, 102, .02));
      border-color: rgba(37, 211, 102, .15);
      padding: 18px 14px;
      display: flex;
      justify-content: flex-end;
      min-height: 96px;
      align-items: center
    }

    .feature-card:hover .fp-wa {
      background: linear-gradient(135deg, rgba(37, 211, 102, .08), rgba(37, 211, 102, .03));
      border-color: rgba(37, 211, 102, .25)
    }

    .fp-wa-bubble {
      background: linear-gradient(135deg, #25D366, #1eb158);
      color: #fff;
      padding: 10px 13px;
      border-radius: 12px 12px 4px 12px;
      font-size: 11px;
      max-width: 78%;
      box-shadow: 0 6px 14px -4px rgba(37, 211, 102, .45);
      position: relative
    }

    .fp-wa-bubble::after {
      content: '';
      position: absolute;
      bottom: 0;
      right: -5px;
      width: 0;
      height: 0;
      border: 5px solid transparent;
      border-left-color: #1eb158;
      border-bottom: 0
    }

    .fp-wa-text {
      display: block;
      opacity: .92;
      font-weight: 500;
      font-size: 10.5px
    }

    .fp-wa-amount {
      display: block;
      font-weight: 700;
      font-size: 13.5px;
      margin: 3px 0;
      font-feature-settings: "tnum";
      letter-spacing: .005em
    }

    .fp-wa-meta {
      display: block;
      font-size: 9px;
      opacity: .78;
      text-align: right;
      margin-top: 2px;
      font-feature-settings: "tnum"
    }

    /* History preview */
    .fp-hist {
      padding: 10px
    }

    .fp-hist-row {
      display: grid;
      grid-template-columns: auto 1fr auto;
      gap: 8px;
      align-items: center;
      padding: 7px 10px;
      background: rgba(255, 255, 255, .025);
      border-radius: 7px;
      margin-bottom: 3px;
      font-size: 10.5px
    }

    .fp-hist-row:last-child {
      margin-bottom: 0
    }

    .fp-hist-id {
      color: rgba(232, 224, 208, .4);
      font-weight: 600;
      font-feature-settings: "tnum"
    }

    .fp-hist-name {
      color: rgba(232, 224, 208, .78);
      font-weight: 500
    }

    .fp-hist-status {
      font-size: 9px;
      padding: 3px 8px;
      border-radius: 999px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .05em
    }

    .fp-hist-status.ok {
      background: rgba(74, 222, 128, .14);
      color: #4ade80
    }

    .fp-hist-status.pend {
      background: rgba(251, 191, 36, .14);
      color: #fbbf24
    }

    /* Devices preview */
    .fp-devices {
      padding: 14px;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      gap: 10px;
      min-height: 96px
    }

    .fp-device {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(255, 255, 255, .04);
      border: 1.5px solid rgba(232, 224, 208, .22);
      transition: all .5s var(--ease)
    }

    .feature-card:hover .fp-device {
      border-color: rgba(41, 171, 226, .4);
      background: rgba(41, 171, 226, .05)
    }

    .fp-device-screen {
      width: calc(100% - 6px);
      height: calc(100% - 6px);
      background: linear-gradient(135deg, rgba(41, 171, 226, .32), rgba(41, 171, 226, .08));
      border-radius: 2px;
      display: block
    }

    .fp-device-pc {
      width: 64px;
      height: 42px;
      border-radius: 5px 5px 1px 1px
    }

    .fp-device-pc::after {
      content: '';
      position: absolute;
      left: -12px;
      right: -12px;
      bottom: -5px;
      height: 4px;
      background: rgba(232, 224, 208, .2);
      border-radius: 0 0 6px 6px
    }

    .fp-device-tab {
      width: 34px;
      height: 48px;
      border-radius: 5px
    }

    .fp-device-tab::after {
      content: '';
      position: absolute;
      bottom: 3px;
      left: 50%;
      transform: translateX(-50%);
      width: 14px;
      height: 1.5px;
      background: rgba(232, 224, 208, .3);
      border-radius: 2px
    }

    .fp-device-phone {
      width: 24px;
      height: 42px;
      border-radius: 4px
    }

    .fp-device-phone::before {
      content: '';
      position: absolute;
      top: 3px;
      left: 50%;
      transform: translateX(-50%);
      width: 6px;
      height: 1.5px;
      background: rgba(232, 224, 208, .3);
      border-radius: 2px;
      z-index: 1
    }

    /* Card 6 — Seguro layout with badges */
    .feature-card:nth-child(6) {
      display: grid;
      grid-template-columns: auto auto 1fr;
      align-items: center;
      gap: 24px;
      padding: 30px 36px
    }

    .feature-card:nth-child(6) .feature-content {
      flex: initial;
      max-width: 380px
    }

    .feature-card:nth-child(6) p {
      max-width: none
    }

    .feature-badges {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      justify-content: flex-end
    }

    .feature-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 9px 14px;
      background: rgba(255, 255, 255, .04);
      border: 1px solid rgba(255, 255, 255, .08);
      border-radius: 999px;
      font-size: 11.5px;
      font-weight: 500;
      color: rgba(232, 224, 208, .85);
      transition: all .3s var(--ease);
      white-space: nowrap
    }

    .feature-badge svg {
      width: 13px;
      height: 13px;
      stroke: var(--cyan);
      fill: none;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
      flex-shrink: 0
    }

    .feature-badge:hover {
      background: rgba(41, 171, 226, .08);
      border-color: rgba(41, 171, 226, .3);
      color: #F0E8D7;
      transform: translateY(-1px)
    }

    /* ============================================
   ROI CALCULATOR
============================================ */
    .roi {
      padding: 110px 0;
      background: var(--bg);
      position: relative;
      overflow: hidden
    }

    .roi::before {
      content: '';
      position: absolute;
      top: -100px;
      right: -100px;
      width: 480px;
      height: 480px;
      background: radial-gradient(circle, rgba(41, 171, 226, .06), transparent 60%);
      filter: blur(60px)
    }

    .roi-inner {
      display: grid;
      grid-template-columns: .9fr 1.1fr;
      gap: 64px;
      align-items: center;
      position: relative
    }

    .roi-text h2 {
      margin-bottom: 18px
    }

    .roi-text>p {
      font-size: 15px;
      color: var(--text-mid);
      line-height: 1.65;
      max-width: 380px;
      margin-bottom: 24px
    }

    .roi-text-note {
      font-family: var(--serif);
      font-style: italic;
      font-size: 12.5px;
      color: var(--text-light);
      line-height: 1.5
    }

    .roi-card {
      background: linear-gradient(180deg, #fff, #FCFAF6);
      border: 1px solid var(--line);
      border-radius: 24px;
      padding: 40px 36px;
      box-shadow: var(--shadow-premium);
      position: relative;
      overflow: hidden
    }

    .roi-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--cyan), transparent)
    }

    .roi-input-block {
      margin-bottom: 32px
    }

    .roi-input-label {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      margin-bottom: 14px
    }

    .roi-input-label-text {
      font-family: var(--serif);
      font-style: italic;
      font-size: 14px;
      color: var(--text-mid)
    }

    .roi-input-value {
      font-family: var(--serif);
      font-size: 34px;
      font-weight: 500;
      color: var(--navy);
      line-height: 1;
      font-feature-settings: "tnum";
      letter-spacing: -.02em
    }

    .roi-input-value span:last-child {
      font-size: .45em;
      color: var(--text-mid);
      font-weight: 400;
      font-style: italic;
      margin-left: 4px
    }

    .roi-slider {
      -webkit-appearance: none;
      appearance: none;
      width: 100%;
      height: 6px;
      background: linear-gradient(90deg, var(--cyan) 0%, var(--cyan) var(--p, 30%), rgba(13, 26, 48, .08) var(--p, 30%));
      border-radius: 99px;
      outline: none;
      cursor: pointer
    }

    .roi-slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: #fff;
      border: 3px solid var(--cyan);
      box-shadow: 0 4px 12px rgba(41, 171, 226, .4), 0 1px 2px rgba(0, 0, 0, .1);
      cursor: pointer;
      transition: transform .2s var(--ease)
    }

    .roi-slider::-webkit-slider-thumb:hover {
      transform: scale(1.15)
    }

    .roi-slider::-moz-range-thumb {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: #fff;
      border: 3px solid var(--cyan);
      box-shadow: 0 4px 12px rgba(41, 171, 226, .4), 0 1px 2px rgba(0, 0, 0, .1);
      cursor: pointer;
      transition: transform .2s var(--ease)
    }

    .roi-slider-track {
      display: flex;
      justify-content: space-between;
      margin-top: 8px;
      font-size: 11px;
      color: var(--text-light);
      font-feature-settings: "tnum"
    }

    .roi-results {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      padding-top: 24px;
      border-top: 1px solid var(--line)
    }

    .roi-result {
      padding: 20px 18px;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 14px;
      transition: all .4s var(--ease)
    }

    .roi-result-highlight {
      background: linear-gradient(135deg, var(--navy-mid), var(--navy));
      color: #fff;
      border-color: transparent;
      grid-column: span 2;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 16px;
      padding: 24px
    }

    .roi-result-label {
      font-family: var(--serif);
      font-style: italic;
      font-size: 12.5px;
      color: var(--text-mid);
      margin-bottom: 6px
    }

    .roi-result-highlight .roi-result-label {
      color: rgba(232, 224, 208, .6)
    }

    .roi-result-value {
      font-family: var(--serif);
      font-size: 30px;
      font-weight: 500;
      color: var(--navy);
      line-height: 1;
      font-feature-settings: "tnum";
      letter-spacing: -.015em;
      display: flex;
      align-items: baseline;
      gap: 4px
    }

    .roi-result-value span:last-child {
      font-size: .5em;
      color: var(--text-mid);
      font-weight: 400;
      font-style: italic
    }

    .roi-result-highlight .roi-result-value {
      color: #F0E8D7;
      font-size: 36px
    }

    .roi-result-highlight .roi-result-value span:last-child {
      color: var(--cyan)
    }

    /* ============================================
   COMPARATIVA — split visual dramatico
============================================ */
    .compara {
      padding: 110px 0;
      background: var(--white);
      position: relative;
      overflow: hidden
    }

    .compara::before {
      content: '';
      position: absolute;
      top: 50%;
      right: -200px;
      width: 500px;
      height: 500px;
      background: radial-gradient(circle, rgba(41, 171, 226, .05), transparent 60%);
      filter: blur(60px);
      transform: translateY(-50%);
      pointer-events: none
    }

    .compara::after {
      content: '';
      position: absolute;
      top: 30%;
      left: -200px;
      width: 400px;
      height: 400px;
      background: radial-gradient(circle, rgba(193, 69, 69, .03), transparent 60%);
      filter: blur(60px);
      pointer-events: none
    }

    .compara-header {
      text-align: center;
      margin-bottom: 48px;
      max-width: 780px;
      margin-left: auto;
      margin-right: auto;
      position: relative
    }

    .compara-table {
      max-width: 1000px;
      margin: 0 auto;
      background: var(--bg);
      border-radius: 24px;
      padding: 10px;
      border: 1px solid var(--line);
      box-shadow: 0 1px 2px rgba(13, 26, 48, .04), 0 16px 40px -16px rgba(13, 26, 48, .12);
      position: relative;
      overflow: hidden
    }

    .compara-table::before {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      right: 0;
      width: 33%;
      background: linear-gradient(180deg, rgba(41, 171, 226, .045) 0%, rgba(41, 171, 226, .015) 70%, transparent);
      pointer-events: none;
      z-index: 0
    }

    .compara-table::after {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      left: 39%;
      width: 33%;
      background-color: rgba(16, 124, 65, .02);
      background-image: linear-gradient(0deg, rgba(13, 26, 48, .025) 1px, transparent 1px), linear-gradient(90deg, rgba(13, 26, 48, .025) 1px, transparent 1px);
      background-size: 24px 24px, 24px 24px;
      pointer-events: none;
      z-index: 0
    }

    .compara-row {
      display: grid;
      grid-template-columns: 1.5fr 1fr 1fr;
      align-items: center;
      padding: 14px 22px;
      border-radius: 14px;
      transition: background .3s;
      position: relative;
      z-index: 1
    }

    .compara-row:not(.compara-head):not(.compara-row-hero):hover {
      background: rgba(41, 171, 226, .02)
    }

    .compara-row+.compara-row {
      border-top: 1px solid var(--line)
    }

    .compara-row+.compara-row-hero,
    .compara-row-hero+.compara-row {
      border-top: none
    }

    .compara-head {
      padding: 18px 22px 22px
    }

    .compara-head .compara-cell {
      font-size: 11.5px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .12em;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px
    }

    .compara-head .compara-cell:first-child {
      visibility: hidden
    }

    .compara-head .vs-excel {
      color: #107C41
    }

    .compara-head .vs-genau {
      color: var(--cyan)
    }

    .compara-side-icon {
      width: 28px;
      height: 28px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
      flex-shrink: 0
    }

    .icon-excel {
      background: rgba(16, 124, 65, .08);
      border: 1px solid rgba(16, 124, 65, .25)
    }

    .icon-excel svg {
      width: 14px;
      height: 14px;
      stroke: #107C41;
      fill: none;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round
    }

    .icon-genau {
      background: none;
      border: none;
      padding: 0;
      width: 30px;
      height: 30px;
      box-shadow: none
    }

    .icon-genau img {
      width: 100%;
      height: 100%;
      border-radius: 7px;
      box-shadow: 0 4px 10px -4px rgba(8, 15, 30, .4), 0 0 0 1px rgba(8, 15, 30, .04);
      object-fit: cover
    }

    .compara-cell {
      font-size: 13.5px
    }

    .compara-cell:first-child {
      font-weight: 500;
      color: var(--text);
      font-size: 14px;
      letter-spacing: -.005em
    }

    .compara-cell:not(:first-child) {
      text-align: center
    }

    .compara-pill {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      padding: 7px 16px 7px 8px;
      border-radius: 999px;
      font-weight: 500;
      font-size: 13px;
      transition: all .35s var(--ease);
      line-height: 1.3
    }

    .compara-cell.cross .compara-pill {
      background: rgba(193, 69, 69, .05);
      border: 1px solid rgba(193, 69, 69, .14);
      color: #8E6868
    }

    .compara-x {
      width: 18px;
      height: 18px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background: rgba(193, 69, 69, .16);
      flex-shrink: 0
    }

    .compara-x svg {
      width: 9px;
      height: 9px;
      stroke: #C04545;
      fill: none;
      stroke-width: 2.8;
      stroke-linecap: round
    }

    .compara-cell.check .compara-pill {
      background: rgba(41, 171, 226, .08);
      border: 1px solid rgba(41, 171, 226, .22);
      color: var(--navy);
      font-weight: 600
    }

    .compara-tick {
      width: 18px;
      height: 18px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background: rgba(41, 171, 226, .2);
      flex-shrink: 0;
      transition: all .35s var(--ease);
      position: relative
    }

    .compara-tick svg {
      width: 10px;
      height: 10px;
      stroke: var(--cyan);
      fill: none;
      stroke-width: 3;
      stroke-linecap: round;
      stroke-linejoin: round;
      transition: stroke .3s var(--ease)
    }

    .compara-tick svg polyline {
      stroke-dasharray: 32;
      stroke-dashoffset: 32;
      transition: stroke-dashoffset 1s var(--ease)
    }

    .compara-table.visible .compara-tick svg polyline {
      stroke-dashoffset: 0
    }

    .compara-table.visible .compara-row-hero .compara-tick svg polyline {
      transition-delay: .2s
    }

    .compara-table.visible .compara-row:nth-child(3) .compara-tick svg polyline {
      transition-delay: .34s
    }

    .compara-table.visible .compara-row:nth-child(4) .compara-tick svg polyline {
      transition-delay: .46s
    }

    .compara-table.visible .compara-row:nth-child(5) .compara-tick svg polyline {
      transition-delay: .58s
    }

    .compara-table.visible .compara-row:nth-child(6) .compara-tick svg polyline {
      transition-delay: .70s
    }

    .compara-table.visible .compara-row:nth-child(7) .compara-tick svg polyline {
      transition-delay: .82s
    }

    .compara-table.visible .compara-row:nth-child(8) .compara-tick svg polyline {
      transition-delay: .94s
    }

    .compara-row:hover .compara-cell.check .compara-pill {
      background: rgba(41, 171, 226, .14);
      border-color: rgba(41, 171, 226, .38);
      box-shadow: 0 6px 16px -4px rgba(41, 171, 226, .35);
      transform: translateY(-1px)
    }

    .compara-row:hover .compara-cell.check .compara-tick {
      background: var(--cyan);
      box-shadow: 0 0 0 4px rgba(41, 171, 226, .18)
    }

    .compara-row:hover .compara-cell.check .compara-tick svg {
      stroke: #fff
    }

    /* HERO ROW — Tiempo por presupuesto */
    .compara-row-hero {
      padding: 26px 22px;
      background: linear-gradient(90deg, rgba(193, 69, 69, .03) 0%, rgba(193, 69, 69, .04) 35%, transparent 50%, rgba(41, 171, 226, .05) 65%, rgba(41, 171, 226, .08) 100%);
      border-radius: 16px;
      margin-bottom: 6px;
      position: relative;
      z-index: 1
    }

    .compara-row-hero .compara-cell:first-child {
      font-family: var(--serif);
      font-size: 17px;
      font-weight: 500;
      color: var(--navy);
      letter-spacing: -.005em
    }

    .compara-row-hero .compara-pill {
      font-family: var(--serif);
      font-size: 22px;
      padding: 10px 22px 10px 12px;
      font-weight: 500;
      letter-spacing: -.01em
    }

    .compara-row-hero .compara-cell.cross .compara-pill {
      text-decoration: line-through;
      text-decoration-color: rgba(193, 69, 69, .6);
      text-decoration-thickness: 2px;
      text-underline-offset: 0;
      color: #9C7474
    }

    .compara-row-hero .compara-x,
    .compara-row-hero .compara-tick {
      width: 24px;
      height: 24px
    }

    .compara-row-hero .compara-x svg {
      width: 11px;
      height: 11px
    }

    .compara-row-hero .compara-tick svg {
      width: 13px;
      height: 13px
    }

    .compara-row-hero .compara-cell.check .compara-pill {
      box-shadow: 0 4px 14px -4px rgba(41, 171, 226, .3)
    }

    /* ============================================
   TESTIMONIOS
============================================ */
    .testimonios {
      padding: 110px 0;
      background: var(--cream);
      position: relative;
      overflow: hidden
    }

    .testimonios::before {
      content: '';
      position: absolute;
      top: -100px;
      left: -100px;
      width: 480px;
      height: 480px;
      background: radial-gradient(circle, rgba(41, 171, 226, .06), transparent 60%);
      filter: blur(60px)
    }

    .testimonios::after {
      content: '';
      position: absolute;
      bottom: -100px;
      right: -100px;
      width: 480px;
      height: 480px;
      background: radial-gradient(circle, rgba(27, 45, 79, .05), transparent 60%);
      filter: blur(60px)
    }

    .testimonios-header {
      text-align: center;
      margin-bottom: 48px;
      max-width: 780px;
      margin-left: auto;
      margin-right: auto;
      position: relative
    }

    .testimonios-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 18px;
      position: relative
    }

    .testimonio {
      background: var(--white);
      border: 1px solid var(--line);
      border-radius: 20px;
      padding: 32px 30px;
      display: flex;
      flex-direction: column;
      gap: 18px;
      transition: all .5s var(--ease);
      position: relative;
      overflow: hidden
    }

    .testimonio:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-lift)
    }

    .testimonio::before {
      content: '"';
      position: absolute;
      top: 14px;
      right: 24px;
      font-family: var(--serif);
      font-size: 80px;
      color: var(--cyan);
      opacity: .12;
      line-height: 1;
      font-style: italic
    }

    .testimonio-stars {
      display: flex;
      gap: 2px;
      color: var(--cyan)
    }

    .testimonio-stars svg {
      width: 14px;
      height: 14px;
      fill: var(--cyan);
      stroke: none
    }

    .testimonio-quote {
      font-family: var(--serif);
      font-size: 17px;
      font-weight: 400;
      color: var(--text);
      line-height: 1.5;
      font-style: italic;
      letter-spacing: -.005em;
      flex: 1
    }

    .testimonio-author {
      display: flex;
      align-items: center;
      gap: 14px;
      padding-top: 18px;
      border-top: 1px solid var(--line)
    }

    .testimonio-avatar {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--cyan), var(--cyan-deep));
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 600;
      font-size: 13px;
      letter-spacing: .02em;
      flex-shrink: 0;
      font-family: var(--sans)
    }

    .testimonio-avatar.v2 {
      background: linear-gradient(135deg, var(--navy), var(--navy-mid))
    }

    .testimonio-avatar.v3 {
      background: linear-gradient(135deg, #7B5E3C, var(--gold))
    }

    .testimonio-avatar.v4 {
      background: linear-gradient(135deg, #3F6E58, #5B8C73)
    }

    .testimonio-meta {
      display: flex;
      flex-direction: column;
      gap: 2px
    }

    .testimonio-meta strong {
      font-size: 13.5px;
      color: var(--navy);
      font-weight: 600
    }

    .testimonio-meta span {
      font-size: 11.5px;
      color: var(--text-mid);
      font-family: var(--serif);
      font-style: italic
    }

    /* ============================================
   PRECIOS — 3 tiers
============================================ */
    .precios {
      padding: 110px 0;
      background: var(--bg);
      position: relative;
      overflow: hidden
    }

    .precios::before {
      content: '';
      position: absolute;
      top: -100px;
      right: -100px;
      width: 500px;
      height: 500px;
      background: radial-gradient(circle, rgba(41, 171, 226, .08), transparent 60%);
      filter: blur(60px)
    }

    .precios::after {
      content: '';
      position: absolute;
      bottom: -100px;
      left: -100px;
      width: 400px;
      height: 400px;
      background: radial-gradient(circle, rgba(27, 45, 79, .06), transparent 60%);
      filter: blur(60px)
    }

    .precios-inner {
      position: relative
    }

    .precios-header {
      text-align: center;
      margin-bottom: 24px;
      max-width: 780px;
      margin-left: auto;
      margin-right: auto
    }

    .precios-subtitle {
      text-align: center;
      font-size: 15px;
      color: var(--text-mid);
      line-height: 1.55;
      max-width: 620px;
      margin: 14px auto 0
    }

    .precios-modulo-def {
      text-align: center;
      font-size: 14px;
      color: var(--text-mid);
      line-height: 1.55;
      max-width: 600px;
      margin: 12px auto 0
    }

    .precios-modulo-def strong {
      color: var(--cyan-deep);
      font-weight: 600
    }

    .precios-subtitle strong {
      color: var(--cyan-deep);
      font-weight: 600
    }

    .ciclo-toggle {
      display: inline-flex;
      gap: 4px;
      padding: 5px;
      margin: 0 auto 36px;
      background: rgba(255, 255, 255, .75);
      border: 1px solid var(--line);
      border-radius: 999px;
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      box-shadow: 0 1px 2px rgba(13, 26, 48, .04);
      position: relative;
      left: 50%;
      transform: translateX(-50%)
    }

    .ciclo-opt {
      appearance: none;
      background: transparent;
      border: 0;
      font-family: inherit;
      font-size: 13.5px;
      font-weight: 500;
      color: var(--text-mid);
      padding: 10px 18px;
      border-radius: 999px;
      cursor: pointer;
      transition: all .25s var(--ease);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      letter-spacing: .01em;
      line-height: 1;
      min-height: 34px;
      white-space: nowrap
    }

    .ciclo-opt:hover {
      color: var(--text)
    }

    .ciclo-opt.active {
      background: var(--cyan);
      color: #fff;
      box-shadow: 0 4px 12px -2px rgba(41, 171, 226, .4)
    }

    .ciclo-save {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 10.5px;
      font-weight: 700;
      padding: 0 7px;
      height: 18px;
      border-radius: 999px;
      background: rgba(201, 169, 97, .18);
      color: #8C6F2C;
      font-feature-settings: "tnum";
      letter-spacing: .02em;
      line-height: 1;
      vertical-align: middle
    }

    .ciclo-opt.active .ciclo-save {
      background: rgba(255, 255, 255, .22);
      color: #fff
    }

    .ciclo-toggle-mini {
      margin: 0 0 14px;
      padding: 3px;
      width: 100%;
      display: flex;
      left: auto;
      transform: none;
      position: static
    }

    .ciclo-toggle-mini .ciclo-opt {
      padding: 7px 6px;
      font-size: 11px;
      min-height: 28px;
      flex: 1;
      gap: 4px;
      letter-spacing: 0
    }

    .ciclo-toggle-mini .ciclo-save {
      font-size: 9px;
      padding: 0 5px;
      height: 14px
    }

    .precios-includes {
      display: flex;
      justify-content: center;
      gap: 10px;
      flex-wrap: wrap;
      margin: 32px auto 28px;
      max-width: 780px;
      position: relative
    }

    .precios-include-pill {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      padding: 10px 18px;
      background: rgba(255, 255, 255, .7);
      border: 1px solid var(--line);
      border-radius: 999px;
      font-size: 13px;
      color: var(--text);
      font-weight: 500;
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      transition: all .3s var(--ease);
      box-shadow: 0 1px 2px rgba(13, 26, 48, .03)
    }

    .precios-include-pill-free {
      background: rgba(41, 171, 226, .1);
      border-color: rgba(41, 171, 226, .35);
      color: var(--cyan-deep)
    }

    .precios-include-pill-free strong {
      font-weight: 700;
      letter-spacing: .02em
    }

    .cr-pago-hoy {
      margin: 14px 0;
      padding: 12px 14px;
      background: rgba(41, 171, 226, .07);
      border: 1px solid rgba(41, 171, 226, .2);
      border-radius: 12px;
      font-size: 12.5px;
      line-height: 1.5;
      color: var(--text-mid);
      text-align: left
    }

    .cr-pago-hoy strong {
      color: var(--text)
    }

    .cm-seals {
      display: flex;
      justify-content: center;
      gap: 8px;
      margin-top: 10px;
      flex-wrap: wrap
    }

    .cm-seal {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .04em;
      color: var(--text-mid);
      border: 1px solid var(--line);
      border-radius: 6px;
      padding: 4px 10px;
      background: rgba(255, 255, 255, .6)
    }

    .precios-garantia {
      display: inline-block;
      color: var(--text);
      font-style: normal;
      font-weight: 600;
      font-size: 13.5px;
      margin-bottom: 4px
    }

    .precios-include-pill:hover {
      border-color: rgba(41, 171, 226, .32);
      background: #fff;
      transform: translateY(-2px);
      box-shadow: 0 8px 18px -8px rgba(41, 171, 226, .25)
    }

    .precios-include-pill strong {
      color: var(--cyan-deep);
      font-weight: 700;
      font-feature-settings: "tnum";
      margin-left: 2px
    }

    .precios-include-pill svg {
      width: 14px;
      height: 14px;
      stroke: var(--cyan);
      fill: none;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
      flex-shrink: 0
    }

    .configurador {
      margin: 32px auto 0;
      max-width: 1080px;
      background: linear-gradient(180deg, #fff, #FBF8F1);
      border: 1px solid var(--line);
      border-radius: 28px;
      padding: 44px 44px;
      box-shadow: 0 1px 2px rgba(13, 26, 48, .04), 0 24px 60px -22px rgba(13, 26, 48, .16);
      position: relative;
      overflow: hidden
    }

    .configurador::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--cyan), transparent)
    }

    .configurador-grid {
      display: grid;
      grid-template-columns: 1.45fr 1fr;
      gap: 32px;
      align-items: start
    }

    .configurador-modulos-wrap {
      display: flex;
      flex-direction: column;
      gap: 14px
    }

    .configurador-col-label {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-family: var(--serif);
      font-style: italic;
      font-size: 15px;
      color: var(--cyan);
      font-weight: 500;
      margin-bottom: 2px
    }

    .configurador-col-label span {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: var(--cyan);
      color: #fff;
      font-family: var(--sans);
      font-style: normal;
      font-size: 12px;
      font-weight: 600;
      font-feature-settings: "tnum"
    }

    .configurador-hint {
      font-size: 12.5px;
      color: var(--text-light);
      font-family: var(--serif);
      font-style: italic;
      line-height: 1.5
    }

    .configurador-modulos {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px
    }

    .mod-chip {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 14px 16px;
      background: #fff;
      border: 1.5px solid var(--line);
      border-radius: 14px;
      cursor: pointer;
      transition: all .25s var(--ease);
      text-align: left;
      font-family: inherit;
      appearance: none;
      color: var(--text);
      position: relative;
      font-size: 14px;
      font-weight: 500
    }

    .mod-chip:hover {
      border-color: rgba(41, 171, 226, .4);
      transform: translateY(-1px);
      box-shadow: 0 6px 18px -8px rgba(41, 171, 226, .22)
    }

    .mod-chip-icon {
      flex-shrink: 0;
      width: 36px;
      height: 36px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: rgba(41, 171, 226, .08);
      border-radius: 10px;
      color: var(--cyan);
      transition: all .25s var(--ease)
    }

    .mod-chip-icon svg {
      width: 18px;
      height: 18px;
      stroke: currentColor;
      fill: none;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round
    }

    .mod-chip-name {
      flex: 1;
      line-height: 1.2
    }

    .mod-chip-check {
      flex-shrink: 0;
      width: 20px;
      height: 20px;
      border: 1.5px solid var(--line);
      border-radius: 6px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: all .25s var(--ease);
      background: #fff
    }

    .mod-chip-check svg {
      width: 11px;
      height: 11px;
      stroke: #fff;
      fill: none;
      stroke-width: 3.5;
      stroke-linecap: round;
      stroke-linejoin: round;
      opacity: 0;
      transform: scale(.6);
      transition: all .2s var(--ease)
    }

    .mod-chip.active {
      border-color: var(--cyan);
      background: linear-gradient(180deg, #fff, rgba(41, 171, 226, .05));
      box-shadow: 0 4px 14px -4px rgba(41, 171, 226, .22)
    }

    .mod-chip.active .mod-chip-icon {
      background: var(--cyan);
      color: #fff
    }

    .mod-chip.active .mod-chip-check {
      background: var(--cyan);
      border-color: var(--cyan)
    }

    .mod-chip.active .mod-chip-check svg {
      opacity: 1;
      transform: scale(1)
    }

    .configurador-resumen {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 20px;
      padding: 24px 26px 26px;
      position: sticky;
      top: 90px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      box-shadow: 0 4px 16px -6px rgba(13, 26, 48, .06)
    }

    .cr-context {
      font-family: var(--serif);
      font-style: italic;
      font-size: 14px;
      font-weight: 500;
      color: var(--cyan);
      margin-top: 4px;
      font-feature-settings: "tnum";
      transition: opacity .15s var(--ease)
    }

    .cr-context.updating {
      opacity: .4
    }

    .cr-amount {
      font-family: var(--serif);
      font-size: 46px;
      font-weight: 500;
      color: var(--navy);
      line-height: 1;
      letter-spacing: -.025em;
      font-feature-settings: "lnum", "tnum";
      transition: transform .25s var(--ease), opacity .15s var(--ease);
      margin-top: -2px
    }

    .cr-amount.updating {
      opacity: .35;
      transform: translateY(-3px)
    }

    .cr-amount span {
      font-size: .32em;
      font-weight: 400;
      color: var(--text-mid);
      font-family: var(--sans);
      letter-spacing: 0;
      margin-left: 2px
    }

    .cr-equiv {
      font-size: 13.5px;
      color: var(--text-mid);
      line-height: 1.4;
      min-height: 1.4em;
      transition: opacity .15s var(--ease)
    }

    .cr-equiv strong {
      color: var(--cyan);
      font-weight: 600;
      font-feature-settings: "tnum"
    }

    .cr-equiv.updating {
      opacity: .4
    }

    .cr-note {
      font-size: 12.5px;
      color: var(--text-light);
      line-height: 1.5;
      font-family: var(--serif);
      font-style: italic;
      padding-bottom: 8px;
      border-bottom: 1px solid var(--line);
      margin-bottom: -4px
    }

    .cr-saving {
      display: none;
      align-items: flex-start;
      gap: 9px;
      font-size: 13px;
      color: #0E7A3F;
      line-height: 1.45;
      padding: 10px 12px;
      background: rgba(16, 124, 65, .07);
      border: 1px solid rgba(16, 124, 65, .18);
      border-radius: 10px;
      margin-top: -2px
    }

    .cr-saving.visible {
      display: flex
    }

    .cr-saving-ico {
      flex-shrink: 0;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: #0E7A3F;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin-top: 1px
    }

    .cr-saving-ico svg {
      width: 10px;
      height: 10px;
      stroke: #fff;
      fill: none;
      stroke-width: 3.5;
      stroke-linecap: round;
      stroke-linejoin: round
    }

    .cr-saving-txt {
      flex: 1
    }

    .cr-saving-txt strong {
      font-weight: 700;
      font-feature-settings: "tnum"
    }

    .cr-breakdown {
      font-size: 11.5px;
      color: var(--text-light);
      font-family: var(--serif);
      font-style: italic;
      line-height: 1.55;
      padding: 9px 12px;
      background: rgba(41, 171, 226, .04);
      border-radius: 10px;
      display: none
    }

    .cr-breakdown.visible {
      display: block
    }

    .cr-cta {
      width: 100%;
      justify-content: center;
      padding: 14px 24px;
      margin-top: 4px
    }

    .cr-cta.disabled {
      pointer-events: none;
      opacity: .45;
      filter: grayscale(.4)
    }

    .cr-foot {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 11.5px;
      color: var(--text-light);
      font-family: var(--serif);
      font-style: italic;
      text-align: center;
      justify-content: center;
      padding-top: 6px
    }

    .cr-foot svg {
      width: 11px;
      height: 11px;
      stroke: var(--cyan);
      fill: none;
      stroke-width: 3;
      stroke-linecap: round;
      stroke-linejoin: round;
      padding: 3px;
      background: rgba(41, 171, 226, .12);
      border-radius: 5px;
      box-sizing: content-box;
      flex-shrink: 0
    }

    .precios-disclaimer {
      text-align: center;
      margin-top: 32px;
      font-size: 12px;
      color: var(--text-light);
      font-family: var(--serif);
      font-style: italic
    }

    /* ============================================
   CONTACTO
============================================ */
    .contacto {
      padding: 110px 0 90px;
      background: var(--white);
      position: relative
    }

    .contacto-inner {
      display: grid;
      grid-template-columns: 1fr 1.1fr;
      gap: 64px;
      align-items: start
    }

    .contacto-text h2 {
      font-family: var(--serif);
      font-size: clamp(30px, 3.6vw, 44px);
      font-weight: 500;
      color: var(--navy);
      margin-bottom: 18px;
      line-height: 1.1;
      letter-spacing: -.02em;
      text-wrap: balance
    }

    .contacto-text h2 em {
      font-style: italic;
      color: var(--cyan);
      font-weight: 400
    }

    .contacto-text>p {
      font-size: 15px;
      color: var(--text-mid);
      line-height: 1.6;
      margin-bottom: 32px;
      max-width: 440px
    }

    .contacto-info {
      display: flex;
      flex-direction: column;
      gap: 14px;
      padding-top: 26px;
      border-top: 1px solid var(--line)
    }

    .contacto-info-item {
      display: flex;
      align-items: center;
      gap: 13px;
      font-size: 13.5px;
      color: var(--text);
      font-weight: 500
    }

    .contacto-info-item svg {
      width: 18px;
      height: 18px;
      stroke: var(--cyan);
      fill: none;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
      flex-shrink: 0
    }

    .form-card {
      background: var(--cream);
      border-radius: 22px;
      padding: 36px;
      border: 1px solid var(--line);
      position: relative;
      overflow: hidden
    }

    .form-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(41, 171, 226, .4), transparent)
    }

    .form-card h3 {
      font-family: var(--serif);
      font-size: 22px;
      font-weight: 500;
      color: var(--navy);
      margin-bottom: 5px;
      letter-spacing: -.01em
    }

    .form-card>p {
      font-size: 13px;
      color: var(--text-mid);
      margin-bottom: 26px
    }

    .form-resumen {
      background: #fff;
      border: 1px solid rgba(41, 171, 226, .3);
      border-radius: 14px;
      padding: 14px 16px;
      margin: 0 0 20px;
      position: relative;
      animation: fadeSlide .35s var(--ease)
    }

    @keyframes fadeSlide {
      from {
        opacity: 0;
        transform: translateY(-4px)
      }

      to {
        opacity: 1;
        transform: none
      }
    }

    .form-resumen[hidden] {
      display: none
    }

    .form-resumen-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 8px
    }

    .form-resumen-eyebrow {
      font-family: var(--serif);
      font-style: italic;
      font-size: 12.5px;
      font-weight: 500;
      color: var(--cyan)
    }

    .form-resumen-edit {
      appearance: none;
      background: transparent;
      border: 0;
      font-family: inherit;
      font-size: 11.5px;
      color: var(--text-mid);
      text-decoration: underline;
      cursor: pointer;
      padding: 2px 4px;
      border-radius: 6px;
      transition: color .2s var(--ease)
    }

    .form-resumen-edit:hover {
      color: var(--cyan)
    }

    .form-resumen-body {
      font-size: 13px;
      color: var(--text);
      line-height: 1.5
    }

    .form-resumen-body .frp-row {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      gap: 12px;
      padding: 5px 0
    }

    .form-resumen-body .frp-row+.frp-row {
      border-top: 1px dashed var(--line)
    }

    .form-resumen-body .frp-label {
      color: var(--text-mid);
      font-size: 12px
    }

    .form-resumen-body .frp-val {
      font-weight: 600;
      color: var(--navy);
      font-feature-settings: "tnum";
      text-align: right
    }

    .form-resumen-body .frp-val.price {
      font-family: var(--serif);
      font-size: 16px;
      color: var(--cyan-deep)
    }

    .form-resumen-body .frp-modulos {
      font-size: 12px;
      color: var(--text-mid);
      font-style: italic;
      padding-top: 6px;
      line-height: 1.4
    }

    .form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      margin-bottom: 12px
    }

    .form-field {
      display: flex;
      flex-direction: column;
      gap: 6px;
      margin-bottom: 12px
    }

    .form-label {
      font-family: var(--serif);
      font-style: italic;
      font-size: 12px;
      font-weight: 500;
      color: var(--text-mid)
    }

    .form-input {
      padding: 13px 16px;
      border: 1.5px solid rgba(13, 26, 48, .08);
      border-radius: 11px;
      font-size: 13.5px;
      font-family: var(--sans);
      color: var(--text);
      background: var(--white);
      outline: none;
      transition: all .25s;
      width: 100%
    }

    .form-input:hover {
      border-color: rgba(13, 26, 48, .15)
    }

    .form-input:focus {
      border-color: var(--cyan);
      box-shadow: 0 0 0 4px rgba(41, 171, 226, .1)
    }

    .form-input::placeholder {
      color: var(--text-light)
    }

    textarea.form-input {
      resize: vertical;
      min-height: 90px;
      line-height: 1.55
    }

    .form-submit {
      width: 100%;
      padding: 15px;
      background: var(--cyan);
      color: #fff;
      border-radius: 11px;
      font-size: 14px;
      font-weight: 600;
      font-family: var(--sans);
      cursor: pointer;
      transition: all .3s var(--ease);
      margin-top: 6px;
      letter-spacing: .01em;
      box-shadow: 0 8px 20px -8px rgba(41, 171, 226, .4)
    }

    .form-submit:hover {
      transform: translateY(-2px);
      box-shadow: 0 12px 28px -8px rgba(41, 171, 226, .55);
      background: var(--cyan-deep)
    }

    .form-submit:active {
      transform: translateY(0)
    }

    .form-foot {
      margin-top: 14px;
      text-align: center;
      font-size: 12.5px;
      color: var(--text-mid);
      font-family: var(--serif);
      font-style: italic
    }

    .form-foot a {
      color: var(--navy);
      font-weight: 600;
      font-style: normal;
      font-family: var(--sans);
      font-size: 12px;
      border-bottom: 1.5px solid #25D366;
      padding-bottom: 1px;
      text-decoration: none;
      transition: color .25s;
      margin-left: 4px
    }

    .form-foot a:hover {
      color: #1eb158
    }

    .form-ok {
      display: none;
      flex-direction: column;
      align-items: center;
      gap: 16px;
      padding: 42px 24px;
      text-align: center
    }

    .form-ok svg {
      width: 46px;
      height: 46px;
      stroke: var(--cyan);
      fill: none;
      stroke-width: 1.5;
      stroke-linecap: round;
      stroke-linejoin: round
    }

    .form-ok h4 {
      font-family: var(--serif);
      font-size: 22px;
      font-weight: 500;
      color: var(--navy);
      letter-spacing: -.01em
    }

    .form-ok p {
      font-size: 13.5px;
      color: var(--text-mid);
      line-height: 1.6;
      max-width: 280px
    }

    /* ============================================
   FOOTER
============================================ */
    .footer {
      background: var(--navy-deep);
      padding: 48px 0 36px;
      position: relative;
      overflow: hidden
    }

    .footer::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image: linear-gradient(rgba(41, 171, 226, .02) 1px, transparent 1px), linear-gradient(90deg, rgba(41, 171, 226, .02) 1px, transparent 1px);
      background-size: 40px 40px;
      opacity: .5
    }

    .footer-inner {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      gap: 32px;
      align-items: center;
      position: relative
    }

    .footer-brand {
      display: flex;
      align-items: center;
      gap: 11px
    }

    .footer-brand img {
      width: 28px;
      height: 28px;
      border-radius: 7px
    }

    .footer-brand span {
      font-family: var(--serif);
      font-size: 17px;
      color: #E8E0D0;
      letter-spacing: .02em
    }

    .footer-links {
      display: flex;
      gap: 24px;
      justify-content: center
    }

    .footer-links a {
      font-size: 12.5px;
      color: rgba(232, 224, 208, .65);
      text-decoration: none;
      transition: color .25s
    }

    .footer-links a:hover {
      color: #E8E0D0
    }

    .footer-copy {
      font-size: 11.5px;
      color: rgba(232, 224, 208, .55);
      text-align: right;
      line-height: 1.5
    }

    /* ============================================
   NAV ACCESS CLIENTES
============================================ */
    .nav-access {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      color: rgba(232, 224, 208, .62);
      text-decoration: none;
      font-size: 12.5px;
      font-weight: 500;
      padding: 9px 14px;
      border: 1px solid rgba(232, 224, 208, .14);
      border-radius: 999px;
      transition: all .3s var(--ease);
      margin-right: 4px
    }

    .nav-access::after {
      display: none !important
    }

    .nav-access:hover {
      color: #E8E0D0;
      border-color: rgba(232, 224, 208, .32);
      background: rgba(232, 224, 208, .04)
    }

    .nav-access svg {
      width: 13px;
      height: 13px;
      stroke: currentColor;
      fill: none;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
      flex-shrink: 0
    }

    /* ============================================
   WHATSAPP FLOATING BUTTON
============================================ */
    .wa-float {
      position: fixed;
      bottom: 24px;
      right: 24px;
      width: 58px;
      height: 58px;
      background: #25D366;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 12px 28px -8px rgba(37, 211, 102, .55), 0 4px 12px rgba(0, 0, 0, .12);
      z-index: 95;
      transition: all .35s var(--ease);
      text-decoration: none;
      color: #fff
    }

    .wa-float::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 50%;
      border: 2px solid #25D366;
      animation: waPing 2.6s ease-out infinite;
      pointer-events: none
    }

    @keyframes waPing {
      0% {
        transform: scale(1);
        opacity: .55
      }

      100% {
        transform: scale(1.6);
        opacity: 0
      }
    }

    .wa-float::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(255, 255, 255, .18), transparent 70%);
      opacity: 0;
      transition: opacity .3s
    }

    .wa-float:hover {
      transform: scale(1.08) translateY(-2px);
      box-shadow: 0 16px 36px -8px rgba(37, 211, 102, .7), 0 4px 12px rgba(0, 0, 0, .15)
    }

    .wa-float:hover::before {
      animation-play-state: paused;
      opacity: 0
    }

    .wa-float:hover::after {
      opacity: 1
    }

    .wa-float:active {
      transform: scale(1.02) translateY(0)
    }

    .wa-float svg {
      width: 28px;
      height: 28px;
      stroke: #fff;
      fill: none;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
      position: relative;
      z-index: 1
    }

    .wa-tooltip {
      position: absolute;
      right: calc(100% + 14px);
      background: var(--navy-deep);
      color: #fff;
      padding: 8px 14px;
      border-radius: 9px;
      font-size: 12.5px;
      font-weight: 500;
      white-space: nowrap;
      opacity: 0;
      transform: translateX(6px);
      pointer-events: none;
      transition: all .25s var(--ease);
      font-family: var(--sans);
      box-shadow: 0 8px 20px -6px rgba(0, 0, 0, .3)
    }

    .wa-tooltip::after {
      content: '';
      position: absolute;
      left: 100%;
      top: 50%;
      transform: translateY(-50%);
      border: 6px solid transparent;
      border-left-color: var(--navy-deep)
    }

    .wa-float:hover .wa-tooltip {
      opacity: 1;
      transform: translateX(0)
    }

    /* ============================================
   FAQ
============================================ */
    .faq {
      padding: 110px 0;
      background: var(--white);
      position: relative;
      overflow: hidden
    }

    .faq::before {
      content: '';
      position: absolute;
      top: 50%;
      left: -200px;
      width: 400px;
      height: 400px;
      background: radial-gradient(circle, rgba(41, 171, 226, .06), transparent 60%);
      filter: blur(60px);
      transform: translateY(-50%);
      pointer-events: none
    }

    .faq-header {
      text-align: center;
      margin-bottom: 48px;
      max-width: 780px;
      margin-left: auto;
      margin-right: auto;
      position: relative
    }

    .faq-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
      position: relative;
      max-width: 1080px;
      margin: 0 auto
    }

    .faq-item {
      background: var(--bg);
      border: 1px solid var(--line);
      border-radius: 18px;
      padding: 28px 30px;
      transition: all .4s var(--ease);
      position: relative;
      overflow: hidden
    }

    .faq-item::before {
      content: '';
      position: absolute;
      left: 0;
      top: 24px;
      bottom: 24px;
      width: 2px;
      background: var(--cyan);
      transform: scaleY(0);
      transform-origin: top;
      transition: transform .4s var(--ease);
      border-radius: 0 2px 2px 0
    }

    .faq-item:hover {
      border-color: rgba(41, 171, 226, .2);
      transform: translateY(-2px);
      box-shadow: var(--shadow-card)
    }

    .faq-item:hover::before {
      transform: scaleY(1)
    }

    .faq-q {
      font-family: var(--serif);
      font-size: 18px;
      font-weight: 500;
      color: var(--navy);
      margin-bottom: 10px;
      line-height: 1.3;
      display: flex;
      align-items: flex-start;
      gap: 11px;
      letter-spacing: -.005em
    }

    .faq-q-mark {
      font-style: italic;
      color: var(--cyan);
      font-weight: 600;
      font-size: 18px;
      flex-shrink: 0;
      font-family: var(--serif);
      line-height: 1.2
    }

    .faq-a {
      font-size: 13.5px;
      color: var(--text-mid);
      line-height: 1.65;
      padding-left: 23px
    }

    .faq-cta {
      margin-top: 36px;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 10px;
      font-size: 13.5px;
      color: var(--text-mid);
      flex-wrap: wrap;
      font-family: var(--serif);
      font-style: italic
    }

    .faq-cta-link {
      color: var(--navy);
      font-weight: 600;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 10px 18px;
      background: rgba(37, 211, 102, .08);
      border: 1px solid rgba(37, 211, 102, .25);
      border-radius: 999px;
      transition: all .3s var(--ease);
      font-family: var(--sans);
      font-style: normal;
      font-size: 13px
    }

    .faq-cta-link:hover {
      background: rgba(37, 211, 102, .15);
      border-color: rgba(37, 211, 102, .4);
      transform: translateY(-1px)
    }

    .faq-cta-link svg {
      width: 14px;
      height: 14px;
      stroke: #25D366;
      fill: none;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round
    }

    /* ============================================
   REVEAL
============================================ */
    .reveal {
      opacity: 0;
      transform: translateY(36px);
      transition: opacity .9s var(--ease), transform .9s var(--ease)
    }

    .reveal.visible {
      opacity: 1;
      transform: translateY(0)
    }

    .reveal-d1 {
      transition-delay: .10s
    }

    .reveal-d2 {
      transition-delay: .20s
    }

    .reveal-d3 {
      transition-delay: .30s
    }

    .reveal-d4 {
      transition-delay: .40s
    }

    .reveal-d5 {
      transition-delay: .50s
    }

    .reveal-d6 {
      transition-delay: .60s
    }

    .reveal-d7 {
      transition-delay: .70s
    }

    .reveal-d8 {
      transition-delay: .80s
    }

    @media (prefers-reduced-motion:reduce) {

      *,
      *::before,
      *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important
      }

      .reveal {
        opacity: 1;
        transform: none
      }

      .split .wi {
        transform: none
      }
    }

    /* ============================================
   RESPONSIVE
============================================ */
    @media(max-width:1024px) {
      .hero-inner {
        grid-template-columns: 1fr;
        gap: 50px;
        text-align: center
      }

      .hero-text>p {
        margin-left: auto;
        margin-right: auto
      }

      .hero-btns,
      .hero-trust,
      .hero-eyebrow {
        justify-content: center
      }

      .hero-trust {
        flex-direction: row
      }

      .hero-visual {
        margin-top: 16px
      }

      .browser-mockup {
        transform: none
      }

      .browser-mockup:hover {
        transform: none
      }

      .hero-float {
        left: 50%;
        transform: translateX(-50%);
        bottom: 20px
      }

      .problema-grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px
      }

      .problema-card:nth-child(1) {
        grid-column: span 2
      }

      .problema-card:nth-child(2),
      .problema-card:nth-child(3) {
        grid-column: span 1
      }

      .sectores-grid {
        grid-template-columns: 1fr 1fr;
        max-width: 720px
      }

      .sectores-grid>.sector-card:last-child:nth-child(3n+1) {
        grid-column: auto
      }

      .sectores-grid>.sector-card:last-child:nth-child(2n+1) {
        grid-column: 1/3;
        justify-self: center;
        max-width: 360px;
        width: 100%
      }

      .features-grid {
        grid-template-columns: repeat(4, 1fr)
      }

      .feature-card:nth-child(1),
      .feature-card:nth-child(2) {
        grid-column: span 2
      }

      .feature-card:nth-child(3),
      .feature-card:nth-child(4),
      .feature-card:nth-child(5) {
        grid-column: span 4
      }

      .feature-card:nth-child(6) {
        grid-column: span 4
      }

      .paso {
        grid-template-columns: 1fr;
        gap: 36px
      }

      .paso.reverse {
        direction: ltr
      }

      .pasos::before {
        display: none
      }

      .paso-num-bg {
        font-size: 120px;
        left: -10px
      }

      .paso.reverse .paso-num-bg {
        right: auto;
        left: -10px
      }

      .roi-inner {
        grid-template-columns: 1fr;
        gap: 40px
      }

      .testimonios-grid {
        grid-template-columns: 1fr
      }

      .faq-grid {
        grid-template-columns: 1fr;
        max-width: 560px
      }

      .configurador {
        padding: 36px 30px
      }

      .configurador-grid {
        grid-template-columns: 1fr;
        gap: 24px
      }

      .configurador-resumen {
        position: static;
        max-width: 560px;
        margin: 0 auto;
        width: 100%
      }

      .configurador-modulos-wrap {
        max-width: 640px;
        margin: 0 auto;
        width: 100%
      }

      .contacto-inner {
        grid-template-columns: 1fr;
        gap: 42px
      }

      .footer-inner {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 20px
      }

      .footer-copy {
        text-align: center
      }

      .footer-links {
        justify-content: center
      }
    }

    @media(max-width:680px) {
      .hero {
        padding: 100px 0 150px
      }

      .hero::after {
        height: 130px
      }

      .hero-trust {
        flex-direction: row;
        justify-content: center;
        gap: 8px;
        padding: 14px;
        border-top: none;
        background: rgba(232, 224, 208, .04);
        border: 1px solid rgba(232, 224, 208, .08);
        border-radius: 14px;
        backdrop-filter: blur(8px)
      }

      .hero-trust-item {
        flex-direction: column;
        text-align: center;
        gap: 6px;
        flex: 1;
        min-width: 0
      }

      .hero-trust-item:not(:last-child)::after {
        display: none
      }

      .hero-trust-item span:last-child {
        font-size: 9.5px;
        letter-spacing: .06em;
        line-height: 1.3
      }

      .hero-trust-item .hero-trust-icon {
        width: 28px;
        height: 28px
      }

      .hero-trust-item .hero-trust-icon svg {
        width: 13px;
        height: 13px
      }

      .hero-float {
        display: none
      }

      .hero-eyebrow span:last-child {
        display: none
      }

      .hero-eyebrow {
        padding: 4px 12px 4px 4px;
        font-size: 11px
      }

      .hero-eyebrow-tag {
        font-size: 9.5px;
        padding: 3px 9px
      }

      .hero-text h1 {
        font-size: clamp(34px, 9vw, 52px)
      }

      .hero-text>p {
        font-size: 15px
      }

      .btn-primary {
        padding: 14px 24px;
        width: auto
      }

      .hero-btns {
        gap: 6px;
        width: 100%;
        justify-content: center;
        flex-wrap: wrap
      }

      .sectores {
        padding: 60px 0 80px
      }

      .sectores-grid {
        grid-template-columns: 1fr;
        max-width: 480px;
        margin-top: 36px
      }

      .sectores-grid>.sector-card:last-child:nth-child(2n+1) {
        grid-column: auto;
        justify-self: stretch;
        max-width: none
      }

      .sector-card {
        padding: 26px 24px
      }

      .sector-card h3 {
        font-size: 20px
      }

      .sector-card-icon {
        width: 54px;
        height: 54px
      }

      .sector-card-icon svg {
        width: 24px;
        height: 24px
      }

      .sectores-subtitle {
        font-size: 14px;
        margin-top: -24px
      }

      .sectores-foot {
        flex-direction: column;
        gap: 14px;
        padding: 22px 24px;
        font-size: 15px;
        margin-top: 40px
      }

      .sectores-foot strong {
        font-size: 14.5px
      }

      .sectores-foot a {
        padding: 12px 22px;
        font-size: 13.5px
      }

      .problema {
        padding: 70px 0 80px
      }

      .problema-grid {
        grid-template-columns: 1fr;
        gap: 12px
      }

      .problema-card:nth-child(1) {
        grid-column: span 1
      }

      .problema-card {
        padding: 26px 22px
      }

      .problema-card::after {
        font-size: 140px;
        bottom: -30px;
        right: -8px
      }

      .como {
        padding: 70px 0
      }

      .pasos {
        gap: 80px
      }

      .paso-num-bg {
        font-size: 96px;
        top: -22px
      }

      .features {
        padding: 70px 0
      }

      .features-grid {
        grid-template-columns: 1fr;
        gap: 10px
      }

      .feature-card,
      .feature-card:nth-child(1),
      .feature-card:nth-child(2),
      .feature-card:nth-child(3),
      .feature-card:nth-child(4),
      .feature-card:nth-child(5),
      .feature-card:nth-child(6) {
        grid-column: span 1
      }

      .feature-card {
        padding: 24px 22px
      }

      .feature-card:nth-child(6) {
        grid-template-columns: auto 1fr;
        gap: 18px 16px;
        padding: 26px 22px
      }

      .feature-card:nth-child(6) .feature-icon {
        margin-bottom: 0
      }

      .feature-card:nth-child(6) .feature-content {
        grid-column: 1/-1;
        max-width: none
      }

      .feature-badges {
        grid-column: 1/-1;
        justify-content: flex-start;
        gap: 6px
      }

      .feature-badge {
        font-size: 10.5px;
        padding: 7px 11px
      }

      .feature-badge svg {
        width: 11px;
        height: 11px
      }

      .fp-wa,
      .fp-devices {
        min-height: auto
      }

      .feature-preview {
        padding: 12px;
        margin-bottom: 18px
      }

      .roi {
        padding: 70px 0
      }

      .roi-card {
        padding: 28px 22px
      }

      .roi-input-value {
        font-size: 28px
      }

      .roi-result-highlight {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px
      }

      .compara {
        padding: 70px 0
      }

      .compara-row {
        padding: 12px 12px;
        grid-template-columns: 1fr 1fr
      }

      .compara-row .compara-cell:first-child {
        grid-column: 1/-1;
        margin-bottom: 8px;
        font-size: 13px
      }

      .compara-cell {
        font-size: 12px
      }

      .compara-pill {
        font-size: 11.5px;
        padding: 6px 12px 6px 6px
      }

      .compara-x,
      .compara-tick {
        width: 16px;
        height: 16px
      }

      .compara-table::after,
      .compara-table::before {
        display: none
      }

      .compara-row-hero {
        padding: 18px 14px
      }

      .compara-row-hero::after {
        display: none
      }

      .compara-row-hero .compara-cell:first-child {
        font-size: 14.5px
      }

      .compara-row-hero .compara-pill {
        font-size: 16px;
        padding: 8px 14px 8px 8px
      }

      .compara-row-hero .compara-x,
      .compara-row-hero .compara-tick {
        width: 20px;
        height: 20px
      }

      .compara-head .compara-cell {
        font-size: 10.5px;
        letter-spacing: .08em;
        gap: 6px
      }

      .compara-side-icon {
        width: 22px;
        height: 22px
      }

      .compara-side-icon svg {
        width: 11px;
        height: 11px
      }

      .testimonios {
        padding: 70px 0
      }

      .testimonio {
        padding: 26px 22px
      }

      .testimonio-quote {
        font-size: 15px
      }

      .precios {
        padding: 70px 0
      }

      .precios-subtitle {
        font-size: 14px;
        margin-top: 12px;
        padding: 0 8px
      }

      .precios-includes {
        flex-direction: column;
        align-items: stretch;
        max-width: 340px;
        gap: 6px;
        margin: 24px auto 28px
      }

      .precios-include-pill {
        justify-content: flex-start;
        padding: 9px 16px;
        font-size: 12.5px
      }

      .configurador {
        margin-top: 32px;
        padding: 28px 18px;
        border-radius: 22px
      }

      .configurador-grid {
        grid-template-columns: 1fr;
        gap: 24px
      }

      .configurador-modulos-wrap {
        max-width: none
      }

      .configurador-modulos {
        grid-template-columns: 1fr
      }

      .mod-chip {
        padding: 12px 14px;
        font-size: 13.5px
      }

      .mod-chip-icon {
        width: 32px;
        height: 32px
      }

      .configurador-hint {
        font-size: 12px;
        text-align: center
      }

      .configurador-resumen {
        position: static;
        padding: 22px 20px;
        max-width: none
      }

      .ciclo-toggle-mini .ciclo-opt {
        padding: 9px 4px;
        font-size: 12px;
        min-height: 40px
      }

      .ciclo-toggle-mini .ciclo-save {
        font-size: 9px;
        padding: 0 4px;
        height: 14px
      }

      /* Anti-zoom iOS: un input <16px dispara zoom automático al enfocarlo. */
      .form-input,
      textarea.form-input {
        font-size: 16px
      }

      .cr-amount {
        font-size: 38px
      }

      .cr-saving {
        font-size: 12.5px;
        padding: 9px 11px;
        gap: 8px
      }

      .cr-saving-ico {
        width: 16px;
        height: 16px
      }

      .cr-saving-ico svg {
        width: 9px;
        height: 9px
      }

      .cr-breakdown {
        font-size: 11px;
        padding: 8px 10px;
        line-height: 1.5
      }

      .cr-cta {
        padding: 14px 20px;
        font-size: 14px
      }

      .configurador-col-label {
        font-size: 14px
      }

      .configurador-col-label span {
        width: 22px;
        height: 22px;
        font-size: 11px
      }

      .contacto {
        padding: 70px 0
      }

      .form-card {
        padding: 26px 22px
      }

      .form-row {
        grid-template-columns: 1fr
      }

      .nav-toggle {
        display: flex
      }

      .nav-links {
        position: fixed;
        top: 68px;
        left: 12px;
        right: 12px;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        background: rgba(8, 15, 30, .96);
        -webkit-backdrop-filter: blur(24px) saturate(180%);
        backdrop-filter: blur(24px) saturate(180%);
        padding: 12px;
        border-radius: 18px;
        border: 1px solid rgba(255, 255, 255, .08);
        box-shadow: 0 24px 64px -16px rgba(0, 0, 0, .6);
        opacity: 0;
        transform: translateY(-12px);
        pointer-events: none;
        transition: opacity .3s var(--ease), transform .3s var(--ease)
      }

      .nav.open .nav-links {
        opacity: 1;
        transform: none;
        pointer-events: auto
      }

      .nav-links a {
        font-size: 15px;
        padding: 13px 14px;
        border-radius: 12px
      }

      .nav-links a:not(.nav-cta):hover {
        background: rgba(255, 255, 255, .06)
      }

      .nav-links a:not(.nav-cta)::after {
        display: none
      }

      .nav-links .nav-access {
        width: auto;
        height: auto;
        border-radius: 12px;
        justify-content: flex-start;
        gap: 10px;
        padding: 13px 14px;
        margin: 4px 0 0
      }

      .nav-links .nav-access span {
        display: inline
      }

      .nav-links .nav-access svg {
        width: 16px;
        height: 16px
      }

      .nav-links .nav-cta {
        display: none
      }

      .nav-cta-bar {
        display: inline-flex;
        align-items: center;
        margin-left: auto;
        margin-right: 8px;
        font-size: 13px;
        padding: 9px 16px
      }

      .nav-logo {
        gap: 11px
      }

      .nav-logo-mark {
        width: 46px;
        height: 46px
      }

      .nav-logo img {
        width: 32px;
        height: 32px;
        border-radius: 10px
      }

      .nav-logo-text {
        font-size: 20px
      }

      .nav-access {
        padding: 8px;
        width: 36px;
        height: 36px;
        justify-content: center;
        border-radius: 50%;
        margin-right: 6px
      }

      .nav-access span {
        display: none
      }

      .nav-access svg {
        width: 14px;
        height: 14px
      }

      .wa-float {
        width: 52px;
        height: 52px;
        bottom: 18px;
        right: 18px
      }

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

      .wa-tooltip {
        display: none
      }

      .faq {
        padding: 70px 0
      }

      .faq-item {
        padding: 24px 22px
      }

      .faq-q {
        font-size: 16px
      }

      .faq-cta {
        flex-direction: column;
        gap: 12px;
        font-size: 13px
      }
    }

    /* ===== Modal de datos previos al pago ===== */
    .checkout-modal {
      position: fixed;
      inset: 0;
      z-index: 1000;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 24px
    }

    .checkout-modal.open {
      display: flex
    }

    .cm-backdrop {
      position: absolute;
      inset: 0;
      background: rgba(5, 10, 22, .72);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      animation: cmFade .3s var(--ease)
    }

    @keyframes cmFade {
      from {
        opacity: 0
      }

      to {
        opacity: 1
      }
    }

    .cm-card {
      position: relative;
      z-index: 1;
      width: 100%;
      max-width: 520px;
      max-height: 92vh;
      overflow-y: auto;
      background: linear-gradient(165deg, #0D1A30, #1B2D4F);
      border: 1px solid rgba(255, 255, 255, .1);
      border-radius: 22px;
      padding: 38px 40px;
      box-shadow: 0 50px 110px -30px rgba(0, 0, 0, .7);
      animation: cmRise .45s var(--ease)
    }

    @keyframes cmRise {
      from {
        opacity: 0;
        transform: translateY(20px)
      }

      to {
        opacity: 1;
        transform: none
      }
    }

    .cm-close {
      position: absolute;
      top: 16px;
      right: 18px;
      width: 34px;
      height: 34px;
      border-radius: 50%;
      border: 1px solid rgba(255, 255, 255, .12);
      background: rgba(255, 255, 255, .04);
      color: rgba(232, 224, 208, .7);
      font-size: 20px;
      line-height: 1;
      cursor: pointer;
      transition: all .25s var(--ease)
    }

    .cm-close:hover {
      background: rgba(255, 255, 255, .08);
      color: #fff
    }

    .cm-eyebrow {
      font-size: 11px;
      font-weight: 600;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: var(--cyan);
      margin-bottom: 10px
    }

    .cm-card h3 {
      font-family: var(--serif);
      font-weight: 500;
      font-size: 25px;
      color: #fff;
      margin-bottom: 8px;
      letter-spacing: -.01em
    }

    .cm-sub {
      font-size: 13.5px;
      line-height: 1.55;
      color: rgba(232, 224, 208, .7);
      margin-bottom: 24px
    }

    .cm-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px
    }

    .cm-resumen {
      margin-bottom: 18px;
      padding: 14px 16px;
      background: rgba(41, 171, 226, .06);
      border: 1px solid rgba(41, 171, 226, .18);
      border-radius: 12px
    }

    .cmr-row {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      gap: 12px;
      font-size: 13px;
      color: rgba(232, 224, 208, .75);
      margin-bottom: 6px
    }

    .cmr-row.cmr-total {
      font-size: 15px;
      font-weight: 700;
      color: #fff;
      margin-bottom: 0
    }

    .cmr-modulos {
      margin-top: 8px;
      padding-top: 8px;
      border-top: 1px solid rgba(255, 255, 255, .08);
      font-size: 12px;
      color: rgba(232, 224, 208, .5)
    }

    .cm-field {
      margin-bottom: 14px;
      display: flex;
      flex-direction: column
    }

    .cm-field label {
      font-size: 12px;
      font-weight: 600;
      color: rgba(232, 224, 208, .85);
      margin-bottom: 6px
    }

    .cm-field input {
      width: 100%;
      background: rgba(255, 255, 255, .04);
      border: 1px solid rgba(255, 255, 255, .12);
      border-radius: 11px;
      padding: 12px 14px;
      color: #fff;
      font-family: var(--sans);
      font-size: 16px;
      transition: border-color .25s var(--ease), background .25s var(--ease)
    }

    .cm-field input::placeholder {
      color: rgba(232, 224, 208, .35)
    }

    .cm-field input:focus {
      outline: none;
      border-color: var(--cyan);
      background: rgba(41, 171, 226, .06)
    }

    .cm-field input.invalid {
      border-color: #E0726B;
      background: rgba(224, 114, 107, .07)
    }

    .cm-error {
      min-height: 0;
      font-size: 12.5px;
      color: #E89B95;
      margin: 2px 0 14px
    }

    /* Los errores ahora salen en el pop-up centrado (#error-pop); el inline
       solo es fallback defensivo, así que no debe reservar hueco si está vacío. */
    .cm-error:empty {
      display: none
    }

    .cm-submit {
      width: 100%;
      justify-content: center;
      margin-top: 4px
    }

    .cm-submit.loading {
      opacity: .7;
      pointer-events: none
    }

    .cm-foot {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      margin-top: 16px;
      font-size: 11.5px;
      color: rgba(232, 224, 208, .55)
    }

    .cm-foot svg {
      width: 13px;
      height: 13px;
      stroke: var(--cyan);
      fill: none;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round
    }

    @media(max-width:480px) {
      .cm-card {
        padding: 32px 24px
      }

      .cm-row {
        grid-template-columns: 1fr
      }
    }

    /* ---------- Pop-up de aviso de error (overlay centrado) ---------- */
    .error-pop {
      position: fixed;
      inset: 0;
      z-index: 1100;
      /* por encima del checkout-modal (1000) */
      display: none;
      align-items: center;
      justify-content: center;
      padding: 24px
    }

    .error-pop.open {
      display: flex
    }

    .error-pop-backdrop {
      position: absolute;
      inset: 0;
      background: rgba(5, 10, 22, .78);
      backdrop-filter: blur(7px);
      -webkit-backdrop-filter: blur(7px);
      animation: cmFade .25s var(--ease)
    }

    .error-pop-card {
      position: relative;
      z-index: 1;
      width: 100%;
      max-width: 420px;
      max-height: 92vh;
      overflow-y: auto;
      text-align: center;
      background: linear-gradient(165deg, #0D1A30, #1B2D4F);
      border: 1px solid rgba(224, 114, 107, .35);
      border-radius: 22px;
      padding: 34px 32px 30px;
      box-shadow: 0 40px 90px -25px rgba(0, 0, 0, .75);
      animation: epPop .4s var(--ease)
    }

    @keyframes epPop {
      0% {
        opacity: 0;
        transform: translateY(14px) scale(.96)
      }

      100% {
        opacity: 1;
        transform: none
      }
    }

    .error-pop-icon {
      width: 58px;
      height: 58px;
      margin: 0 auto 18px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background: rgba(224, 114, 107, .16);
      border: 1px solid rgba(224, 114, 107, .4)
    }

    .error-pop-icon svg {
      width: 28px;
      height: 28px;
      stroke: #E89B95;
      fill: none;
      stroke-width: 1.9;
      stroke-linecap: round;
      stroke-linejoin: round
    }

    .error-pop-card h4 {
      font-family: var(--serif);
      font-weight: 500;
      font-size: 21px;
      color: #fff;
      margin-bottom: 10px;
      letter-spacing: -.01em
    }

    .error-pop-card p {
      font-size: 14px;
      line-height: 1.6;
      color: rgba(232, 224, 208, .82);
      margin-bottom: 24px;
      white-space: pre-line
    }

    .error-pop-ok {
      width: 100%;
      justify-content: center
    }

    @media(max-width:480px) {
      .error-pop-card {
        padding: 30px 22px 26px
      }
    }