:root {
      /* Color primario */
      --color-primary: #7c3aed;
      --color-on-primary: #ffffff;
      --color-primary-container: #4f11ba;
      --color-on-primary-container: #ede7f8;
      --color-inverse-primary: #ccb7f0;
      --color-primary-fixed: #e1d6f5;
      --color-primary-fixed-dim: #c3abed;
      --color-on-primary-fixed: #1e0646;
      --color-on-primary-fixed-variant: #400e96;

      /* Superficies / neutrales */
      --color-surface: #f8f9ff;
      --color-surface-dim: #cbdbf5;
      --color-surface-bright: #f8f9ff;
      --color-surface-container-lowest: #ffffff;
      --color-surface-container-low: #eff4ff;
      --color-surface-container: #e5eeff;
      --color-surface-container-high: #dce9ff;
      --color-surface-container-highest: #d3e4fe;
      --color-on-surface: #0b1c30;
      --color-on-surface-variant: #4a4455;
      --color-inverse-surface: #213145;
      --color-inverse-on-surface: #eaf1ff;
      --color-outline: #7b7487;
      --color-outline-variant: #ccc3d8;
      --color-background: #f8f9ff;
      --color-on-background: #0b1c30;
      --color-surface-variant: #d3e4fe;

      /* Secundario (verde azulado) */
      --color-secondary: #006a61;
      --color-on-secondary: #ffffff;
      --color-secondary-container: #86f2e4;
      --color-on-secondary-container: #006f66;
      --color-secondary-fixed: #89f5e7;
      --color-secondary-fixed-dim: #6bd8cb;
      --color-on-secondary-fixed: #00201d;
      --color-on-secondary-fixed-variant: #005049;

      /* Terciario (naranja/café) */
      --color-tertiary: #7d3d00;
      --color-on-tertiary: #ffffff;
      --color-tertiary-container: #a15100;
      --color-on-tertiary-container: #ffe0cd;
      --color-tertiary-fixed: #ffdcc6;
      --color-tertiary-fixed-dim: #ffb784;
      --color-on-tertiary-fixed: #301400;
      --color-on-tertiary-fixed-variant: #713700;

      /* Error */
      --color-error: #ba1a1a;
      --color-on-error: #ffffff;
      --color-error-container: #ffdad6;
      --color-on-error-container: #93000a;

      /* Semáforo (estados, paleta fija) */
      --color-semaforo-verde: #22c55e;
      --color-semaforo-verde-container: #dcfce7;
      --color-on-semaforo-verde-container: #166534;
      --color-semaforo-amarillo: #facc15;
      --color-semaforo-amarillo-container: #fef3c7;
      --color-on-semaforo-amarillo-container: #854d0e;
      --color-semaforo-rojo: #ef4444;
      --color-semaforo-rojo-container: #fee2e2;
      --color-on-semaforo-rojo-container: #991b1b;

      /* WhatsApp */
      --color-whatsapp: #25d366;
      --color-whatsapp-dark: #075e54;

      /* Alias usados por el resto de la hoja de estilos */
      --violet: var(--color-primary);
      --violet-700: var(--color-primary-container);
      --violet-800: var(--color-on-primary-fixed-variant);
      --violet-900: var(--color-on-primary-fixed);
      --violet-400: var(--color-primary-fixed-dim);
      --violet-300: var(--color-primary-fixed);
      --violet-050: var(--color-surface);
      --violet-100: var(--color-on-primary-container);
      --ink: var(--color-on-surface);
      --ink-soft: var(--color-inverse-surface);
      --text: var(--color-on-surface-variant);
      --text-mute: var(--color-outline);
      --line: var(--color-outline-variant);
      --bg: var(--color-background);
      --bg-soft: var(--color-surface-container-low);
      --bg-lilac: var(--color-surface-container);
      --green: var(--color-semaforo-verde);
      --amber: var(--color-semaforo-amarillo);
      --red: var(--color-semaforo-rojo);
      --glow: 0 24px 60px -18px rgba(124, 58, 237, .45);
      --card-shadow: 0 12px 40px -16px rgba(31, 12, 66, .16);
      --deep-shadow: 0 40px 90px -30px rgba(41, 16, 90, .5);
      --max: 1180px;
      --radius: 20px;
    }

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

    .grecaptcha-badge {
      visibility: hidden;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      font-family: 'Manrope', system-ui, sans-serif;
      color: var(--text);
      background: var(--bg);
      line-height: 1.55;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }

    h1,
    h2,
    h3,
    h4 {
      font-family: 'Sora', system-ui, sans-serif;
      color: var(--ink);
      line-height: 1.08;
      letter-spacing: -.03em;
      font-weight: 700;
    }

    a {
      text-decoration: none;
      color: inherit;
      transition: all .2s ease;
    }

    ul {
      list-style: none;
    }

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

    .wrap {
      max-width: var(--max);
      margin: 0 auto;
      padding: 0 22px;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-family: 'Sora', sans-serif;
      font-size: 12.5px;
      font-weight: 600;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--violet-700);
      background: var(--violet-100);
      padding: 7px 14px;
      border-radius: 100px;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      font-family: 'Sora', sans-serif;
      font-weight: 600;
      font-size: 15.5px;
      padding: 14px 26px;
      border-radius: 13px;
      cursor: pointer;
      border: none;
      transition: transform .18s ease, box-shadow .18s ease, background .18s ease, opacity .18s ease;
    }

    .btn:disabled {
      opacity: .65;
      cursor: not-allowed;
      transform: none !important;
    }

    .btn-primary {
      position: relative;
      overflow: hidden;
      background: var(--violet);
      color: #fff;
      box-shadow: var(--glow);
    }

    .btn-primary::after {
      content: '';
      position: absolute;
      top: 0;
      left: -60%;
      width: 40%;
      height: 100%;
      background: linear-gradient(115deg, transparent, rgba(255, 255, 255, .45), transparent);
      transform: skewX(-20deg);
      transition: left .6s ease;
    }

    .btn-primary:hover::after {
      left: 130%;
    }

    .btn-primary:hover {
      transform: translateY(-2px);
      background: var(--violet-700);
    }

    .btn-ghost {
      background: rgba(255, 255, 255, .7);
      color: var(--ink);
      border: 1px solid var(--line);
    }

    .nav-cta .btn-primary {
      box-shadow: 0 8px 20px -8px rgba(124, 58, 237, .55);
    }

    .btn-ghost:hover {
      border-color: var(--violet-400);
      color: var(--violet-700);
      background: #fff;
    }

    .btn-light {
      background: #fff;
      color: var(--violet-700);
    }

    .btn-light:hover {
      transform: translateY(-2px);
    }

    header {
      position: sticky;
      top: 0;
      z-index: 90;
      background: rgba(255, 255, 255, .82);
      backdrop-filter: blur(14px);
      border-bottom: 1px solid var(--line);
      box-shadow: 0 1px 0 rgba(124, 58, 237, .06), 0 12px 30px -22px rgba(31, 12, 66, .18);
    }

    .nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 92px;
      position: relative;
    }

    .logo {
      display: flex;
      align-items: center;
      gap: 10px;
      font-family: 'Sora', sans-serif;
      font-weight: 800;
      font-size: 21px;
      color: var(--ink);
      letter-spacing: -.02em;
    }

    .logo-lockup {
      height: 68px;
      display: block;
    }

    .nav-links {
      position: relative;
      display: flex;
      gap: 4px;
      align-items: center;
      background: var(--violet-050);
      border: 1px solid var(--violet-100);
      border-radius: 100px;
      padding: 5px;
      isolation: isolate;
    }

    .nav-indicator {
      position: absolute;
      top: 5px;
      left: 5px;
      height: calc(100% - 10px);
      width: 0;
      border-radius: 100px;
      background: linear-gradient(135deg, #fff, var(--violet-050));
      box-shadow: 0 6px 16px -6px rgba(124, 58, 237, .5), 0 0 0 1px rgba(124, 58, 237, .12) inset;
      opacity: 0;
      pointer-events: none;
      transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), width .35s cubic-bezier(.34, 1.56, .64, 1), opacity .2s ease;
      z-index: 0;
    }

    .nav-links.indicator-on .nav-indicator {
      opacity: 1;
    }

    .nav-links a.l {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      gap: 8px;
      font-family: 'Sora', sans-serif;
      font-size: 14.5px;
      font-weight: 600;
      color: var(--ink-soft);
      padding: 9px 18px;
      border-radius: 100px;
      transition: color .25s ease, transform .25s ease;
    }

    .nav-links a.l svg {
      width: 16px;
      height: 16px;
      flex-shrink: 0;
      color: var(--violet-700);
      opacity: 1;
      transform: scale(1) rotate(0deg);
      transition: opacity .25s ease, transform .3s cubic-bezier(.34, 1.56, .64, 1), width .25s ease;
    }

    .nav-links a.l:hover {
      color: var(--violet-700);
      transform: translateY(-1px);
    }

    .nav-links a.l:hover svg {
      transform: scale(1.12) rotate(0deg);
    }

    .nav-cta {
      display: flex;
      gap: 10px;
      align-items: center;
    }

    .nav-burger {
      display: none;
      position: relative;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 5px;
      width: 40px;
      height: 40px;
      border-radius: 10px;
      border: 1px solid var(--line);
      background: #fff;
      cursor: pointer;
      z-index: 101;
      transition: border-color .2s ease, background .2s ease;
    }

    .nav-burger:hover {
      border-color: var(--violet-400);
      background: var(--violet-050);
    }

    .nav-burger span {
      display: block;
      width: 18px;
      height: 2px;
      background: var(--ink);
      border-radius: 2px;
      transition: transform .3s cubic-bezier(.4, 0, .2, 1), opacity .2s ease, width .2s ease;
    }

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

    .nav-burger.open span:nth-child(2) {
      opacity: 0;
      width: 0;
    }

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

    .nav-overlay,
    .nav-mobile-panel {
      display: none;
    }

    @media(max-width:860px) {
      header .nav-links {
        display: none;
      }

      .nav-burger {
        display: flex;
      }

      .nav-cta .btn-primary {
        display: none;
      }

      .nav-overlay {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(20, 10, 41, .55);
        backdrop-filter: blur(3px);
        opacity: 0;
        visibility: hidden;
        transition: opacity .25s ease, visibility .25s;
        z-index: 95;
      }

      .nav-overlay.open {
        opacity: 1;
        visibility: visible;
      }

      .nav-mobile-panel {
        display: flex;
        flex-direction: column;
        gap: 14px;
        position: fixed;
        top: 96px;
        left: 16px;
        right: 16px;
        bottom: 16px;
        z-index: 100;
        opacity: 0;
        visibility: hidden;
        overflow-y: auto;
        transform: translateY(-14px) scale(.97);
        transition: opacity .25s ease, transform .25s cubic-bezier(.2, .9, .3, 1.1), visibility .25s;
      }

      .nav-mobile-panel.open {
        opacity: 1;
        visibility: visible;
        transform: translateY(0) scale(1);
      }

      .nav-mobile-panel .nav-links {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 20px;
        padding: 14px;
        box-shadow: 0 24px 50px -18px rgba(31, 12, 66, .35);
      }

      .nav-mobile-panel .nav-links a.l {
        width: 100%;
        padding: 14px 14px;
        border-radius: 13px;
        opacity: 0;
        transform: translateX(-10px);
        transition: opacity .25s ease, transform .25s ease, background .15s ease, color .15s ease;
      }

      .nav-mobile-panel.open .nav-links a.l {
        opacity: 1;
        transform: translateX(0);
      }

      .nav-mobile-panel.open .nav-links a.l:nth-child(1) {
        transition-delay: .05s;
      }

      .nav-mobile-panel.open .nav-links a.l:nth-child(2) {
        transition-delay: .1s;
      }

      .nav-mobile-panel.open .nav-links a.l:nth-child(3) {
        transition-delay: .15s;
      }

      .nav-mobile-panel.open .nav-links a.l:nth-child(4) {
        transition-delay: .2s;
      }

      .nav-mobile-panel .nav-links a.l svg {
        display: block;
      }

      .nav-mobile-panel .nav-links a.l:active,
      .nav-mobile-panel .nav-links a.l:hover {
        background: var(--violet-050);
        color: var(--violet-700);
      }

      .nav-mobile-cta {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        font-family: 'Sora', sans-serif;
        font-weight: 700;
        font-size: 16px;
        color: var(--violet-700);
        background: #fff;
        padding: 16px;
        border-radius: 16px;
        border: 1px solid rgba(255, 255, 255, .5);
        box-shadow: 0 20px 45px -12px rgba(0, 0, 0, .55), 0 0 0 4px rgba(255, 255, 255, .12);
        opacity: 0;
        margin-bottom: 4px;
        transform: translateY(8px);
        transition: opacity .3s ease, transform .3s ease, background .2s ease, color .2s ease;
        transition-delay: .22s;
      }

      .nav-mobile-panel.open .nav-mobile-cta {
        opacity: 1;
        transform: translateY(0);
      }

      .nav-mobile-cta:hover,
      .nav-mobile-cta:active {
        background: var(--violet-050);
        color: var(--violet-800);
      }

      body.menu-open {
        overflow: hidden;
      }
    }

    .hero {
      position: relative;
      padding: 16px 0 40px;
      background: radial-gradient(900px 500px at 82% -10%, rgba(124, 58, 237, .16), transparent 60%), radial-gradient(700px 500px at 0% 10%, rgba(167, 139, 250, .14), transparent 55%), var(--bg-soft);
      overflow: hidden;
      text-align: center;
    }

    .hero h1 {
      font-size: clamp(2.4rem, 5.4vw, 4rem);
      font-weight: 800;
      margin: 20px auto 20px;
      max-width: 900px;
    }

    .hero h1 .hl {
      background: linear-gradient(120deg, var(--violet-700), var(--violet-400));
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .hero p.sub {
      font-size: 1.18rem;
      color: var(--text);
      max-width: 620px;
      margin: 0 auto 30px;
    }

    .hero-actions {
      display: flex;
      gap: 14px;
      justify-content: center;
      flex-wrap: wrap;
    }

    .hero-trust {
      margin-top: 24px;
      display: flex;
      align-items: center;
      gap: 14px;
      justify-content: center;
      font-size: 14px;
      color: var(--text-mute);
    }

    .stars-mini {
      color: var(--amber);
      letter-spacing: 2px;
    }

    .avatars {
      display: flex;
    }

    .avatars span {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      border: 2px solid #fff;
      margin-left: -9px;
      display: grid;
      place-items: center;
      font-family: 'Sora', sans-serif;
      font-weight: 700;
      font-size: 12px;
      color: #fff;
    }

    .avatars span:nth-child(1) {
      background: var(--color-primary);
      margin-left: 0;
    }

    .avatars span:nth-child(2) {
      background: var(--color-primary-fixed-dim);
    }

    .avatars span:nth-child(3) {
      background: var(--color-primary-container);
    }

    .avatars span:nth-child(4) {
      background: var(--color-primary-fixed);
      color: var(--violet-800);
    }

    .devices {
      position: relative;
      margin-top: 56px;
      padding-bottom: 10px;
      display: flex;
      align-items: flex-end;
      justify-content: center;
    }

    .device-stage {
      position: relative;
      width: 100%;
      max-width: 860px;
    }

    .laptop {
      position: relative;
      z-index: 2;
      margin: 0 auto;
      width: 100%;
      max-width: 820px;
    }

    .laptop-screen {
      background: linear-gradient(165deg, #48484f, #0c0c0e);
      border-radius: 20px 20px 0 0;
      padding: 16px 16px 0;
      border: 1px solid #000;
      border-bottom: none;
      box-shadow: var(--deep-shadow), inset 0 0 0 1px rgba(255, 255, 255, .04);
    }

    .laptop-cam {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #050506;
      box-shadow: 0 0 0 1px #3a3a40;
      margin: 0 auto 10px;
    }

    .laptop-base {
      height: 18px;
      background: linear-gradient(#e6e6ea, #b7b9c1);
      border-radius: 0 0 14px 14px;
      max-width: 870px;
      margin: 0 auto;
      position: relative;
      box-shadow: 0 14px 22px -8px rgba(0, 0, 0, .3);
    }

    .laptop-base:before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 1px;
      background: rgba(255, 255, 255, .6);
    }

    .laptop-base:after {
      content: "";
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 110px;
      height: 7px;
      background: #9a9ca4;
      border-radius: 0 0 9px 9px;
    }

    .ui {
      background: #fff;
      border-radius: 10px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }

    .browser-bar {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 10px 14px;
      background: #F3F0FA;
      border-bottom: 1px solid var(--line);
    }

    .browser-bar .dots {
      display: flex;
      gap: 6px;
    }

    .browser-bar .dots i {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      display: block;
    }

    .browser-url {
      margin-left: 6px;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 5px 14px;
      font-size: 12px;
      color: var(--text-mute);
      font-family: 'Sora', sans-serif;
      flex: 1;
      max-width: 320px;
    }

    .ui img {
      width: 100%;
      height: auto;
      display: block;
      line-height: 0;
    }

    .float-tablet {
      position: absolute;
      z-index: 1;
      left: -120px;
      bottom: -14px;
      width: 370px;
      background: linear-gradient(165deg, #3f3f45, #101012);
      border: 2px solid #050506;
      border-radius: 22px;
      padding: 14px 11px;
      box-shadow: var(--deep-shadow);
      transform: rotate(-4deg);
    }

    .float-tablet:before {
      content: "";
      position: absolute;
      top: 7px;
      left: 50%;
      transform: translateX(-50%);
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: #55555c;
    }

    .float-tablet .tablet-screen {
      background: #fff;
      border-radius: 11px;
      overflow: hidden;
      line-height: 0;
    }

    .float-tablet img {
      width: 100%;
      height: auto;
      display: block;
    }

    .phone-shot {
      position: absolute;
      z-index: 4;
      right: -6px;
      bottom: -18px;
      width: 168px;
      line-height: 0;
      filter: drop-shadow(0 24px 40px rgba(20, 10, 41, .35));
    }

    .phone-shot img {
      width: 100%;
      height: auto;
      display: block;
      border-radius: 32px;
    }

    .mobile-devices {
      display: none;
    }

    @media(max-width:900px) {
      .devices {
        display: none;
      }

      .mobile-devices {
        display: block;
        position: relative;
        width: 100%;
        max-width: 380px;
        margin: 48px auto 0;
        aspect-ratio: 1 / 0.92;
      }

      .mobile-devices .phone-shot {
        position: absolute;
        opacity: 0;
        transform: translateY(60px) scale(.92);
        transition: opacity .8s cubic-bezier(.16, .8, .24, 1), transform .8s cubic-bezier(.16, .8, .24, 1),
          left .9s cubic-bezier(.16, .8, .24, 1), top .9s cubic-bezier(.16, .8, .24, 1),
          width .9s cubic-bezier(.16, .8, .24, 1);
      }

      .mobile-devices .phone-shot.slot-1 {
        left: -2%;
        top: 42%;
        width: 54%;
        z-index: 1;
        transition-delay: .05s;
      }

      .mobile-devices .phone-shot.slot-2 {
        left: 24%;
        top: 12%;
        width: 56%;
        z-index: 2;
        transition-delay: .18s;
      }

      .mobile-devices .phone-shot.slot-3 {
        left: 46%;
        top: 0;
        width: 56%;
        z-index: 3;
        transition-delay: .31s;
      }

      .mobile-devices.is-visible .phone-shot.slot-1 {
        opacity: 1;
        transform: rotate(-13deg);
        animation: mdFloat1 4.6s ease-in-out .85s infinite;
      }

      .mobile-devices.is-visible .phone-shot.slot-2 {
        opacity: 1;
        transform: rotate(-2deg);
        animation: mdFloat2 4.2s ease-in-out .98s infinite;
      }

      .mobile-devices.is-visible .phone-shot.slot-3 {
        opacity: 1;
        transform: rotate(11deg);
        animation: mdFloat3 5s ease-in-out 1.11s infinite;
      }

      @keyframes mdFloat1 {

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

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

      @keyframes mdFloat2 {

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

        50% {
          transform: rotate(-4deg) translateY(-16px);
        }
      }

      @keyframes mdFloat3 {

        0%,
        100% {
          transform: rotate(11deg) translateY(0);
        }

        50% {
          transform: rotate(13.5deg) translateY(-10px);
        }
      }

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

        .mobile-devices.is-visible .phone-shot.slot-1,
        .mobile-devices.is-visible .phone-shot.slot-2,
        .mobile-devices.is-visible .phone-shot.slot-3 {
          animation: none;
        }
      }
    }

    section.blk {
      padding: 92px 0;
    }

    .page-hero {
      padding: 56px 0 20px;
      text-align: center;
    }

    .page-hero .eyebrow {
      margin-bottom: 16px;
    }

    .page-hero h1 {
      font-size: clamp(2rem, 4.4vw, 3rem);
      margin-bottom: 14px;
    }

    .page-hero p {
      max-width: 620px;
      margin: 0 auto;
      font-size: 1.1rem;
      color: var(--text);
    }

    .legal-page {
      max-width: 760px;
      margin: 0 auto;
    }

    .legal-page .updated-note {
      color: var(--text-mute);
      font-size: 13px;
      margin-bottom: 36px;
    }

    .legal-page h2 {
      font-size: 1.35rem;
      margin: 40px 0 14px;
    }

    .legal-page h2:first-child {
      margin-top: 0;
    }

    .legal-page h3 {
      font-size: 1.05rem;
      margin: 24px 0 10px;
    }

    .legal-page p {
      color: var(--text);
      font-size: 15px;
      line-height: 1.75;
      margin-bottom: 16px;
    }

    .legal-page ol,
    .legal-page ul {
      margin: 0 0 16px;
      padding-left: 22px;
    }

    .legal-page li {
      color: var(--text);
      font-size: 15px;
      line-height: 1.7;
      margin-bottom: 8px;
    }

    .legal-page strong {
      color: var(--ink);
    }

    .head-center {
      text-align: center;
      max-width: 680px;
      margin: 0 auto 54px;
    }

    .head-center h2 {
      font-size: clamp(1.9rem, 4vw, 2.7rem);
      font-weight: 800;
      margin: 16px 0 14px;
    }

    .head-center p {
      font-size: 1.12rem;
      color: var(--text);
    }

    .feat-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 22px;
    }

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

    .feat {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 28px;
      transition: transform .2s, box-shadow .2s, border-color .2s;
    }

    .feat:hover {
      transform: translateY(-5px);
      box-shadow: var(--card-shadow);
      border-color: var(--violet-300);
    }

    .feat-ico {
      width: 50px;
      height: 50px;
      border-radius: 14px;
      background: var(--violet-050);
      display: grid;
      place-items: center;
      font-size: 24px;
      margin-bottom: 18px;
    }

    .feat h3 {
      font-size: 1.18rem;
      margin-bottom: 9px;
    }

    .feat p {
      font-size: 14.5px;
      color: var(--text);
    }

    .split {
      background: var(--bg-lilac);
    }

    .split-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 56px;
      align-items: center;
    }

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

      .split-grid.rev .visual {
        order: -1;
      }
    }

    .split h2 {
      font-size: clamp(1.8rem, 3.6vw, 2.5rem);
      margin: 14px 0 16px;
    }

    .split p.lead {
      font-size: 1.1rem;
      margin-bottom: 22px;
    }

    .split-list li {
      display: flex;
      gap: 12px;
      align-items: flex-start;
      margin-bottom: 13px;
      font-size: 15px;
      color: var(--ink-soft);
    }

    .split-list li .ck {
      color: var(--violet-700);
      font-weight: 700;
      flex-shrink: 0;
    }

    .shot {
      background: #fff;
      border-radius: 22px;
      box-shadow: var(--card-shadow);
      border: 1px solid var(--violet-100);
      overflow: hidden;
      line-height: 0;
    }

    .shot .browser-bar {
      line-height: normal;
    }

    .doc-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
      align-items: start;
    }

    @media(max-width:860px) {
      .doc-grid {
        grid-template-columns: 1fr;
      }
    }

    .shot img {
      width: 100%;
      height: auto;
      display: block;
    }

    .semaforo {
      background: var(--ink);
      color: #fff;
    }

    .semaforo h2 {
      color: #fff;
    }

    .semaforo .head-center p {
      color: #C9C2DE;
    }

    .sem-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      margin-top: 44px;
    }

    @media(max-width:760px) {
      .sem-grid {
        grid-template-columns: 1fr;
      }
    }

    .sem-card {
      background: rgba(255, 255, 255, .05);
      border: 1px solid rgba(255, 255, 255, .1);
      border-radius: 18px;
      padding: 26px;
    }

    .sem-dot {
      width: 16px;
      height: 16px;
      border-radius: 50%;
      margin-bottom: 16px;
      box-shadow: 0 0 18px 2px currentColor;
    }

    .sem-card h4 {
      color: #fff;
      font-size: 1.1rem;
      margin-bottom: 8px;
    }

    .sem-card p {
      color: #C9C2DE;
      font-size: 14px;
    }

    .niceplus {
      background: var(--bg-soft);
    }

    .niceplus-card {
      background: linear-gradient(140deg, var(--violet-050), #fff);
      border: 1px solid var(--violet-100);
      border-radius: 24px;
      padding: 40px;
      display: grid;
      grid-template-columns: auto 1fr auto;
      gap: 28px;
      align-items: center;
    }

    @media(max-width:800px) {
      .niceplus-card {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 20px;
      }
    }

    .np-badge {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      background: var(--violet);
      color: #fff;
      font-family: 'Sora', sans-serif;
      font-weight: 700;
      font-size: 12px;
      padding: 8px 15px;
      border-radius: 100px;
      letter-spacing: .04em;
    }

    .np-scan {
      width: 92px;
      height: 92px;
      border-radius: 20px;
      background: #120a24;
      position: relative;
      display: grid;
      place-items: center;
      flex-shrink: 0;
      margin: 0 auto;
      overflow: hidden;
    }

    .np-scan .c {
      color: var(--violet-300);
      font-family: 'Sora', sans-serif;
      font-size: 11px;
      letter-spacing: 2px;
    }

    .np-scan .line {
      position: absolute;
      left: 10px;
      right: 10px;
      height: 3px;
      background: linear-gradient(90deg, transparent, var(--violet-400), transparent);
      box-shadow: 0 0 12px 2px rgba(167, 139, 250, .7);
      animation: scanmove 2.2s ease-in-out infinite;
      border-radius: 4px;
    }

    @keyframes scanmove {

      0%,
      100% {
        top: 16px;
      }

      50% {
        top: 70px;
      }
    }

    .niceplus h3 {
      font-size: 1.5rem;
      margin: 12px 0 8px;
    }

    .niceplus p {
      font-size: 15px;
      color: var(--text);
      max-width: 440px;
    }

    @media(max-width:800px) {
      .niceplus p {
        margin: 0 auto;
      }
    }

    .platforms .plat-row {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 16px;
      margin-top: 20px;
    }

    .plat {
      display: flex;
      align-items: center;
      gap: 10px;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 14px;
      padding: 14px 22px;
      font-family: 'Sora', sans-serif;
      font-weight: 600;
      color: var(--ink-soft);
      box-shadow: var(--card-shadow);
    }

    .plat .pic {
      font-size: 22px;
    }

    .testi {
      background: var(--bg-lilac);
    }

    .t-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 22px;
    }

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

    .t-card {
      background: #fff;
      border-radius: 20px;
      padding: 28px;
      box-shadow: var(--card-shadow);
      border: 1px solid var(--violet-100);
      display: flex;
      flex-direction: column;
    }

    .t-card .stars {
      color: var(--amber);
      font-size: 17px;
      letter-spacing: 2px;
      margin-bottom: 14px;
    }

    .t-card q {
      font-style: normal;
      font-size: 15.5px;
      color: var(--ink-soft);
      line-height: 1.6;
      flex: 1;
    }

    .t-author {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-top: 20px;
    }

    .t-author .av {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      font-family: 'Sora', sans-serif;
      font-weight: 700;
      color: #fff;
      background: var(--violet-700);
    }

    .t-author b {
      font-family: 'Sora', sans-serif;
      color: var(--ink);
      font-size: 14.5px;
      display: block;
    }

    .t-author small {
      font-size: 12.5px;
      color: var(--text-mute);
    }

    .price-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
      max-width: 1180px;
      margin: 0 auto;
    }

    @media(max-width:1100px) {
      .price-grid {
        grid-template-columns: repeat(2, 1fr);
        max-width: 700px;
      }
    }

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

    .price-list li .ai {
      color: var(--violet-700);
      font-weight: 700;
    }

    .price-card {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 22px;
      padding: 32px 28px;
      display: flex;
      flex-direction: column;
      position: relative;
    }

    .price-card.pop {
      border: 2px solid var(--violet);
      box-shadow: var(--glow);
      transform: translateY(-6px);
    }

    @media(max-width:900px) {
      .price-card.pop {
        transform: none;
      }
    }

    .price-badge {
      position: absolute;
      top: -13px;
      left: 50%;
      transform: translateX(-50%);
      background: var(--violet);
      color: #fff;
      font-family: 'Sora', sans-serif;
      font-size: 11.5px;
      font-weight: 700;
      letter-spacing: .06em;
      text-transform: uppercase;
      padding: 5px 15px;
      border-radius: 100px;
    }

    .plan {
      font-family: 'Sora', sans-serif;
      font-weight: 700;
      font-size: 1.05rem;
      color: var(--violet-700);
      letter-spacing: .04em;
    }

    .plan-desc {
      font-size: 13.5px;
      color: var(--text-mute);
      margin: 6px 0 18px;
      min-height: 38px;
    }

    .amount {
      font-family: 'Sora', sans-serif;
      font-weight: 800;
      font-size: 2.8rem;
      color: var(--ink);
      letter-spacing: -.03em;
    }

    .amount span {
      font-size: 1rem;
      color: var(--text-mute);
      font-weight: 500;
    }

    .price-list {
      margin: 22px 0 26px;
      flex: 1;
    }

    .price-list li {
      display: flex;
      gap: 11px;
      align-items: flex-start;
      margin-bottom: 13px;
      font-size: 14.5px;
      color: var(--ink-soft);
    }

    .price-list li .ck {
      color: var(--violet-700);
      font-weight: 700;
      flex-shrink: 0;
    }

    .price-note {
      text-align: center;
      margin-top: 34px;
      font-size: 14px;
      color: var(--text-mute);
    }

    .support-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 22px;
      max-width: 380px;
      margin: 0 auto;
    }

    @media(max-width:700px) {
      .support-grid {
        grid-template-columns: 1fr;
      }
    }

    .sup {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 20px;
      padding: 28px;
      transition: transform .2s, box-shadow .2s;
    }

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

    .sup-ico {
      font-size: 30px;
      margin-bottom: 14px;
    }

    .sup h3 {
      font-size: 1.1rem;
      margin-bottom: 8px;
    }

    .sup p {
      font-size: 14px;
      color: var(--text);
    }

    .contact-card {
      max-width: 620px;
      margin: 44px auto 0;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--card-shadow);
      padding: 36px;
    }

    .contact-card h3 {
      font-size: 1.3rem;
      margin-bottom: 8px;
    }

    .contact-card>p {
      font-size: 14.5px;
      color: var(--text);
      margin-bottom: 24px;
    }

    .contact-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }

    .contact-field {
      margin-bottom: 16px;
    }

    .contact-field.full {
      grid-column: 1 / -1;
    }

    .contact-field label {
      display: block;
      font-family: 'Sora', sans-serif;
      font-size: 13px;
      font-weight: 600;
      color: var(--ink-soft);
      margin-bottom: 6px;
    }

    .contact-field input,
    .contact-field textarea {
      width: 100%;
      font-family: 'Manrope', sans-serif;
      font-size: 14.5px;
      color: var(--ink);
      background: var(--bg-soft);
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 12px 14px;
      outline: none;
      transition: border-color .18s ease;
    }

    .contact-field input:focus,
    .contact-field textarea:focus {
      border-color: var(--violet-400);
    }

    .contact-field textarea {
      resize: vertical;
      min-height: 110px;
    }

    .contact-note {
      font-size: 12.5px;
      color: var(--text-mute);
      margin-top: 4px;
    }

    .contact-alert {
      border-radius: 12px;
      padding: 13px 16px;
      font-size: 14px;
      margin-bottom: 20px;
    }

    .contact-alert.ok {
      background: var(--color-semaforo-verde-container);
      color: var(--color-on-semaforo-verde-container);
      border: 1px solid var(--color-semaforo-verde);
    }

    .contact-alert.error {
      background: var(--color-semaforo-rojo-container);
      color: var(--color-on-semaforo-rojo-container);
      border: 1px solid var(--color-semaforo-rojo);
    }

    @media(max-width:560px) {
      .contact-card {
        padding: 26px 22px;
      }

      .contact-grid {
        grid-template-columns: 1fr;
      }
    }

    .cta-final {
      background: linear-gradient(140deg, var(--violet-800), var(--violet));
      color: #fff;
      border-radius: 30px;
      padding: 62px 40px;
      text-align: center;
      position: relative;
      overflow: hidden;
      box-shadow: var(--glow);
    }

    .cta-final:before {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(500px 300px at 20% 0%, rgba(255, 255, 255, .18), transparent 60%);
    }

    .cta-final h2 {
      color: #fff;
      font-size: clamp(1.9rem, 4vw, 2.7rem);
      position: relative;
    }

    .cta-final p {
      color: var(--violet-100);
      font-size: 1.12rem;
      margin: 16px auto 30px;
      max-width: 520px;
      position: relative;
    }

    .cta-final .hero-actions {
      position: relative;
      justify-content: center;
    }

    .faq {
      background: var(--bg-soft);
    }

    .faq-box {
      max-width: 720px;
      margin: 0 auto;
    }

    details {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 14px;
      padding: 18px 22px;
      margin-bottom: 13px;
      transition: border-color .2s;
    }

    details[open] {
      border-color: var(--violet-300);
    }

    summary {
      font-family: 'Sora', sans-serif;
      font-weight: 600;
      font-size: 16px;
      color: var(--ink);
      cursor: pointer;
      list-style: none;
      display: flex;
      justify-content: space-between;
      gap: 16px;
      align-items: center;
    }

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

    summary::after {
      content: "+";
      font-size: 1.4rem;
      color: var(--violet-700);
      font-weight: 400;
    }

    details[open] summary::after {
      content: "–";
    }

    details p {
      margin-top: 13px;
      font-size: 14.5px;
      color: var(--text);
    }

    footer {
      background: var(--ink);
      color: #fff;
      padding: 70px 0 34px;
    }

    .foot-grid {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr 1fr;
      gap: 44px;
      margin-bottom: 44px;
    }

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

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

    .foot-col h4 {
      color: #fff;
      font-size: 1rem;
      margin-bottom: 18px;
    }

    .foot-col li {
      margin-bottom: 11px;
    }

    .foot-col a {
      color: #B5AECC;
      font-size: 14.5px;
    }

    .foot-col a:hover {
      color: #fff;
    }

    .foot-lead {
      color: #B5AECC;
      font-size: 14.5px;
      max-width: 280px;
      margin: 14px 0 20px;
    }

    .foot-bottom {
      border-top: 1px solid rgba(255, 255, 255, .1);
      padding-top: 22px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 14px;
      color: #8E86A8;
      font-size: 13.5px;
      flex-wrap: wrap;
    }

    /* ---------- Animación al hacer scroll ---------- */
    [data-reveal] {
      opacity: 0;
      transform: translateY(28px);
      transition: opacity .7s cubic-bezier(.16, .8, .24, 1), transform .7s cubic-bezier(.16, .8, .24, 1);
    }

    [data-reveal].is-visible {
      opacity: 1;
      transform: translateY(0);
    }

    [data-reveal-delay="1"] {
      transition-delay: .15s;
    }

    [data-reveal-stagger]>* {
      opacity: 0;
      transform: translateY(24px);
      transition: opacity .6s cubic-bezier(.16, .8, .24, 1), transform .6s cubic-bezier(.16, .8, .24, 1);
    }

    [data-reveal-stagger].is-visible>* {
      opacity: 1;
      transform: translateY(0);
    }

    [data-reveal-stagger].is-visible>*:nth-child(1) {
      transition-delay: 0s;
    }

    [data-reveal-stagger].is-visible>*:nth-child(2) {
      transition-delay: .08s;
    }

    [data-reveal-stagger].is-visible>*:nth-child(3) {
      transition-delay: .16s;
    }

    [data-reveal-stagger].is-visible>*:nth-child(4) {
      transition-delay: .24s;
    }

    [data-reveal-stagger].is-visible>*:nth-child(5) {
      transition-delay: .32s;
    }

    [data-reveal-stagger].is-visible>*:nth-child(6) {
      transition-delay: .4s;
    }

    /* ---------- Animación de entrada de los dispositivos del hero ---------- */
    .laptop {
      opacity: 0;
      transform: translateY(50px) scale(.95) rotate(0deg);
      transition: opacity .9s cubic-bezier(.16, .8, .24, 1), transform .9s cubic-bezier(.16, .8, .24, 1);
      transition-delay: .1s;
    }

    .float-tablet {
      opacity: 0;
      transform: translateY(50px) scale(.9) rotate(6deg);
      transition: opacity .9s cubic-bezier(.16, .8, .24, 1), transform .9s cubic-bezier(.16, .8, .24, 1);
      transition-delay: .3s;
    }

    .devices .phone-shot {
      opacity: 0;
      transform: translateY(50px) scale(.9) rotate(0deg);
      transition: opacity .9s cubic-bezier(.16, .8, .24, 1), transform .9s cubic-bezier(.16, .8, .24, 1);
      transition-delay: .5s;
    }

    .devices.is-visible .laptop {
      opacity: 1;
      transform: translateY(0) scale(1) rotate(0deg);
    }

    .devices.is-visible .float-tablet {
      opacity: 1;
      transform: translateY(0) scale(1) rotate(-4deg);
    }

    .devices.is-visible .phone-shot {
      opacity: 1;
      transform: translateY(0) scale(1) rotate(0deg);
    }

    @media(prefers-reduced-motion:reduce) {
      * {
        animation: none !important;
        scroll-behavior: auto;
      }

      [data-reveal],
      [data-reveal-stagger]>*,
      .laptop,
      .float-tablet,
      .phone-shot {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
      }

      .float-tablet {
        transform: rotate(-4deg) !important;
      }
    }

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