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

    :root {
      --ink:        #111111;
      --cream:      #F7F7F5;
      --cream-dark: #F1F0EC;
      --blue:       #2563EB;
      --blue-dark:  #1d4ed8;
      --blue-light: #EFF6FF;
      --blue-mid:   #3B82F6;
      --text:       #111111;
      --muted:      #6B7280;
      --border:     #E5E3DC;
      --white:      #FFFFFF;
      --max:        1120px;
      --r:          10px;
      /* SF Pro en dispositivos Apple, Inter en el resto (manual de marca) */
      --font:       -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, sans-serif;
      --display:    -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif;
    }

    html { scroll-behavior: smooth; }

    body {
      font-family: var(--font);
      background: var(--cream);
      color: var(--text);
      line-height: 1.6;
      font-size: 16px;
      -webkit-font-smoothing: antialiased;
    }

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

    /* ── NOISE TEXTURE OVERLAY ────────────────────────────── */
    .noise::after {
      content: '';
      position: absolute; inset: 0;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
      pointer-events: none; z-index: 1;
    }

    /* ── NAV ──────────────────────────────────────────────── */
    body > nav {
      position: sticky; top: 0; z-index: 200;
      background: rgba(17,17,17,.95);
      backdrop-filter: blur(16px);
      border-bottom: 1px solid rgba(255,255,255,.07);
    }
    .nav-inner {
      max-width: var(--max); margin: 0 auto;
      display: flex; align-items: center; justify-content: space-between;
      padding: 0 28px; height: 60px;
    }
    .logo {
      display: flex; align-items: center; gap: 10px;
      font-family: var(--display);
      font-size: 20px; font-weight: 800;
      letter-spacing: -.3px; color: var(--white);
    }
    .logo-dot { color: var(--blue-mid); }
    .nav-links {
      display: flex; gap: 28px; list-style: none;
    }
    .nav-links a {
      font-size: 13px; font-weight: 500;
      color: rgba(255,255,255,.5);
      transition: color .15s; letter-spacing: .01em;
    }
    .nav-links a:hover { color: rgba(255,255,255,.9); }
    .nav-cta { display: flex; gap: 8px; align-items: center; }
    /* Hamburguesa — calcada de precios.html. Sin esto, a <=640px `.nav-links` se ocultaba
       y no habia nada que la reemplazara: en telefono la home perdia los CUATRO links
       (Caracteristicas, Como funciona, Precios y FAQ), no solo Precios. */
    .hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 4px; }
    .hamburger span { width: 22px; height: 2px; background: #fff; border-radius: 2px; }
    .btn {
      display: inline-flex; align-items: center; justify-content: center;
      padding: 9px 20px; border-radius: 8px;
      font-family: var(--font);
      font-size: 13px; font-weight: 600;
      cursor: pointer; transition: all .15s; border: none;
    }
    .btn-ghost {
      background: transparent; color: rgba(255,255,255,.6);
      border: 1px solid rgba(255,255,255,.12);
    }
    .btn-ghost:hover { background: rgba(255,255,255,.06); color: var(--white); }
    .btn-green {
      background: var(--blue); color: var(--white);
      box-shadow: 0 0 0 0 rgba(37,99,235,.3);
    }
    .btn-green:hover {
      background: var(--blue-dark);
      box-shadow: 0 0 0 4px rgba(37,99,235,.15);
      transform: translateY(-1px);
    }
    .btn-lg { padding: 14px 30px; font-size: 15px; border-radius: 10px; }
    .btn-xl { padding: 16px 36px; font-size: 16px; border-radius: 10px; }
    .btn-ink {
      background: var(--ink); color: var(--white);
    }
    .btn-ink:hover { background: #1a1a18; transform: translateY(-1px); }
    .btn-outline-dark {
      background: transparent; color: var(--text);
      border: 1.5px solid var(--border);
    }
    .btn-outline-dark:hover { border-color: #b0a898; }

    /* ── HERO ─────────────────────────────────────────────── */
    .hero {
      background: var(--cream);
      color: var(--ink);
      padding: 84px 28px 88px;
      position: relative; overflow: hidden;
      border-bottom: 1px solid var(--border);
    }
    .hero-inner {
      max-width: var(--max); margin: 0 auto;
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 60px; align-items: center;
      position: relative; z-index: 2;
    }
    .hero-text { padding-bottom: 0; }
    .hero-badge {
      display: inline-flex; align-items: center; gap: 7px;
      background: var(--blue-light);
      border: 1px solid rgba(37,99,235,.18);
      border-radius: 100px; padding: 5px 14px;
      font-size: 11px; font-weight: 700;
      letter-spacing: .07em; text-transform: uppercase;
      color: var(--blue); margin-bottom: 28px;
    }
    .hero-badge::before {
      content: ''; width: 6px; height: 6px;
      background: var(--blue); border-radius: 50%;
    }
    .hero h1 {
      font-family: var(--display);
      font-size: clamp(38px, 4.5vw, 62px);
      font-weight: 800; line-height: 1.05;
      letter-spacing: -.035em; margin-bottom: 22px;
    }
    /* 07/09: sin subrayado. Azul + subrayado es el estilo canonico de un enlace y
       "perdiste" no lo es: el mapa de clics del trafico pago (111 visitas, 13 clics)
       mostro 3 clics muertos sobre el H1, uno de ellos sobre esta palabra. Queda solo
       el color, que es el mismo patron que ya usa la sublanding /ordenar/. */
    .hero h1 .accent {
      color: var(--blue-mid);
      position: relative; display: inline-block;
    }
    .hero p {
      font-size: clamp(15px, 1.6vw, 18px);
      color: var(--muted);
      max-width: 460px; line-height: 1.7; margin-bottom: 36px;
    }
    .hero-btns { display: flex; gap: 10px; flex-wrap: wrap; }
    .hero-note {
      margin-top: 22px; font-size: 12px;
      color: #9ca3af; letter-spacing: .01em;
    }
    .hero-note span { color: var(--muted); font-weight: 500; }

    /* Hero animations */
    .hero-badge, .hero h1, .hero p, .hero-btns, .hero-note {
      animation: fadeUp .7s both;
    }
    .hero h1     { animation-delay: .08s; }
    .hero p      { animation-delay: .16s; }
    .hero-btns   { animation-delay: .24s; }
    .hero-note   { animation-delay: .32s; }
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(18px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    /* ── DASHBOARD MOCK ───────────────────────────────────── */
    .dashboard-wrap {
      position: relative; padding-bottom: 0;
      animation: fadeUp .9s .2s both;
    }
    .dashboard-float {
      background: #161613;
      border: 1px solid rgba(17,17,17,.08);
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 30px 60px -24px rgba(17,17,17,.30), 0 2px 8px rgba(17,17,17,.06);
    }
    .mock-topbar {
      background: #0a0a0a; padding: 10px 16px;
      display: flex; align-items: center; gap: 10px;
      border-bottom: 1px solid rgba(255,255,255,.06);
    }
    .mock-dots { display: flex; gap: 5px; }
    .mock-dot {
      width: 9px; height: 9px; border-radius: 50%;
    }
    .mock-dot:nth-child(1) { background: #FF5F57; }
    .mock-dot:nth-child(2) { background: #FFBD2E; }
    .mock-dot:nth-child(3) { background: #28CA41; }
    .mock-url {
      flex: 1; background: rgba(255,255,255,.05);
      border-radius: 5px; height: 20px;
      display: flex; align-items: center; padding: 0 10px;
      font-size: 10px; color: rgba(255,255,255,.25);
    }
    .mock-body {
      display: grid; grid-template-columns: 52px 1fr;
      height: 320px;
    }
    .mock-sidebar {
      background: #0D0D0B; padding: 14px 0;
      border-right: 1px solid rgba(255,255,255,.05);
      display: flex; flex-direction: column; gap: 4px; align-items: center;
    }
    .mock-nav-item {
      width: 32px; height: 32px; border-radius: 8px;
      display: flex; align-items: center; justify-content: center;
      font-size: 14px; color: rgba(255,255,255,.4);
    }
    .mock-nav-item.active { background: rgba(37,99,235,.18); color: var(--blue-mid); }
    .mock-main {
      padding: 16px; display: flex; flex-direction: column; gap: 12px;
      overflow: hidden;
    }
    .mock-row { display: flex; gap: 10px; }
    .mock-stat {
      flex: 1; background: rgba(255,255,255,.04);
      border: 1px solid rgba(255,255,255,.07);
      border-radius: 8px; padding: 10px 12px;
    }
    .mock-stat-label {
      font-size: 9px; color: rgba(255,255,255,.3);
      text-transform: uppercase; letter-spacing: .06em;
      margin-bottom: 4px;
    }
    .mock-stat-val {
      font-family: var(--display);
      font-size: 16px; font-weight: 800;
      color: var(--white);
    }
    .mock-stat-val.green { color: #60a5fa; }
    .mock-stat-delta {
      font-size: 9px; color: #60a5fa; margin-top: 2px;
    }
    .mock-chart-wrap {
      flex: 1; background: rgba(255,255,255,.04);
      border: 1px solid rgba(255,255,255,.07);
      border-radius: 8px; padding: 10px 12px;
    }
    .mock-chart-title {
      font-size: 9px; color: rgba(255,255,255,.3);
      text-transform: uppercase; letter-spacing: .06em; margin-bottom: 10px;
    }
    .mock-bars {
      display: flex; align-items: flex-end; gap: 5px; height: 60px;
    }
    .mock-bar {
      flex: 1; border-radius: 3px 3px 0 0;
      background: rgba(255,255,255,.1);
      transition: background .2s;
      animation: barGrow .8s both;
    }
    .mock-bar.active { background: var(--blue-mid); }
    @keyframes barGrow {
      from { transform: scaleY(0); transform-origin: bottom; }
      to   { transform: scaleY(1); transform-origin: bottom; }
    }
    .mock-bar:nth-child(1) { height: 30%; animation-delay: .4s; }
    .mock-bar:nth-child(2) { height: 55%; animation-delay: .45s; }
    .mock-bar:nth-child(3) { height: 40%; animation-delay: .5s; }
    .mock-bar:nth-child(4) { height: 70%; animation-delay: .55s; }
    .mock-bar:nth-child(5) { height: 50%; animation-delay: .6s; }
    .mock-bar:nth-child(6) { height: 85%; animation-delay: .65s; animation-fill-mode: both; }
    .mock-bar:nth-child(7) { height: 75%; animation-delay: .7s; }
    .mock-kanban { display: flex; gap: 8px; }
    .mock-col { flex: 1; }
    .mock-col-title {
      font-size: 8px; color: rgba(255,255,255,.25);
      text-transform: uppercase; letter-spacing: .06em;
      margin-bottom: 6px; padding: 0 2px;
    }
    .mock-card {
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.08);
      border-radius: 5px; padding: 6px 8px; margin-bottom: 5px;
    }
    .mock-card-top {
      font-size: 9px; color: rgba(255,255,255,.6);
      margin-bottom: 3px; font-weight: 600;
    }
    .mock-card-line {
      height: 5px; border-radius: 2px; background: rgba(255,255,255,.08);
      margin-bottom: 3px;
    }
    .mock-card-line.w70 { width: 70%; }
    .mock-card-line.w45 { width: 45%; }
    .mock-status {
      display: inline-block; padding: 1px 5px;
      border-radius: 3px; font-size: 7.5px; font-weight: 600;
    }
    .mock-status.pend { background: rgba(251,191,36,.15); color: #FCD34D; }
    .mock-status.ok   { background: rgba(37,99,235,.15);  color: #93c5fd; }
    .mock-status.prep { background: rgba(99,102,241,.15); color: #A5B4FC; }

    /* ── STATS ────────────────────────────────────────────── */
    .stats-section {
      background: var(--white);
      border-bottom: 1px solid var(--border);
      padding: 48px 28px;
    }
    .stats-inner {
      max-width: var(--max); margin: 0 auto;
      display: flex; justify-content: center;
      gap: clamp(40px, 7vw, 96px); flex-wrap: wrap;
    }
    .stat-item { text-align: center; }
    .stat-num {
      font-family: var(--display);
      font-size: clamp(32px, 3.5vw, 48px);
      font-weight: 800; line-height: 1;
      color: var(--ink); letter-spacing: -.03em;
    }
    .stat-num .unit { font-size: .65em; opacity: .5; }
    .stat-label {
      font-size: 13px; color: var(--muted);
      margin-top: 6px; font-weight: 500;
    }

    /* ── SECTION COMMONS ──────────────────────────────────── */
    section { padding: 96px 28px; }
    .section-inner { max-width: var(--max); margin: 0 auto; }
    .section-tag {
      display: inline-flex; align-items: center; gap: 8px;
      font-size: 11px; font-weight: 700;
      letter-spacing: .09em; text-transform: uppercase;
      color: var(--blue); margin-bottom: 14px;
    }
    .section-tag::before {
      content: ''; width: 18px; height: 2px;
      background: var(--blue); border-radius: 2px;
    }
    .section-title {
      font-family: var(--display);
      font-size: clamp(28px, 3.5vw, 44px);
      font-weight: 800; line-height: 1.1;
      letter-spacing: -.03em; margin-bottom: 16px;
      color: var(--ink);
    }
    .section-sub {
      font-size: 17px; color: var(--muted);
      max-width: 540px; line-height: 1.7;
    }
    .section-header { margin-bottom: 56px; }
    .section-header.center { text-align: center; }
    .section-header.center .section-tag { justify-content: center; }
    .section-header.center .section-sub { margin: 0 auto; }

    /* ── FEATURES ─────────────────────────────────────────── */
    .features-bg { background: var(--cream-dark); }
    .features-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
    }
    .feature-card {
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: 14px; padding: 28px;
      transition: box-shadow .25s, transform .25s, border-color .25s;
    }
    .feature-card:hover {
      box-shadow: 0 12px 36px rgba(0,0,0,.07);
      transform: translateY(-4px);
      border-color: var(--blue-light);
    }
    .feature-icon {
      width: 42px; height: 42px; border-radius: 10px;
      background: var(--ink); color: var(--white);
      display: flex; align-items: center; justify-content: center;
      margin-bottom: 18px;
    }
    .feature-card h3 {
      font-family: var(--display);
      font-size: 15px; font-weight: 700;
      margin-bottom: 8px; color: var(--ink);
    }
    .feature-card p {
      font-size: 13.5px; color: var(--muted); line-height: 1.65;
    }

    /* ── BENEFITS ─────────────────────────────────────────── */
    .benefits-wrap {
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 80px; align-items: center;
    }
    .benefits-headline {
      font-family: var(--display);
      font-size: clamp(32px, 4vw, 52px);
      font-weight: 800; line-height: 1.05;
      letter-spacing: -.035em; color: var(--ink);
    }
    .benefits-headline .em {
      color: var(--blue-dark);
    }
    .benefits-list { display: flex; flex-direction: column; gap: 28px; }
    .benefit {
      display: flex; gap: 16px; align-items: flex-start;
    }
    .benefit-icon {
      width: 38px; height: 38px; flex-shrink: 0;
      background: var(--blue-light);
      border-radius: 10px;
      display: flex; align-items: center; justify-content: center;
      color: var(--blue); margin-top: 2px;
    }
    .benefit h3 {
      font-size: 15px; font-weight: 700;
      margin-bottom: 5px; color: var(--ink);
    }
    .benefit p { font-size: 14px; color: var(--muted); line-height: 1.65; }

    /* ── HOW IT WORKS ─────────────────────────────────────── */
    .steps-bg { background: var(--ink); color: var(--white); }
    .steps-bg .section-tag { color: var(--blue-mid); }
    .steps-bg .section-tag::before { background: var(--blue-mid); }
    .steps-bg .section-title { color: var(--white); }
    .steps-bg .section-sub { color: rgba(255,255,255,.5); }
    .steps {
      display: grid; grid-template-columns: repeat(3, 1fr);
      gap: 2px;
    }
    .step {
      padding: 40px 36px;
      border-right: 1px solid rgba(255,255,255,.08);
      position: relative; overflow: hidden;
    }
    .step:last-child { border-right: none; }
    .step-bg-num {
      position: absolute; bottom: -10px; right: 10px;
      font-family: var(--display);
      font-size: 120px; font-weight: 800;
      color: rgba(255,255,255,.04);
      line-height: 1; letter-spacing: -.05em;
      pointer-events: none; user-select: none;
    }
    .step-num {
      display: inline-flex; align-items: center; justify-content: center;
      width: 36px; height: 36px;
      border: 1.5px solid rgba(255,255,255,.15);
      border-radius: 50%;
      font-family: var(--display);
      font-size: 15px; font-weight: 700;
      color: var(--blue-mid); margin-bottom: 20px;
    }
    .step h3 {
      font-family: var(--display);
      font-size: 18px; font-weight: 700;
      color: var(--white); margin-bottom: 10px;
    }
    .step p { font-size: 14px; color: rgba(255,255,255,.5); line-height: 1.7; }

    /* ── TESTIMONIAL ──────────────────────────────────────── */
    .testimonial-outer {
      background: var(--cream-dark);
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
    }
    .testimonial-inner {
      max-width: 760px; margin: 0 auto;
      text-align: center;
    }
    .quote-icon {
      display: inline-flex; align-items: center; justify-content: center;
      width: 48px; height: 48px;
      background: var(--ink); border-radius: 50%;
      margin-bottom: 28px;
    }
    .testimonial-text {
      font-family: var(--display);
      font-size: clamp(20px, 2.5vw, 26px);
      font-weight: 700; line-height: 1.45;
      letter-spacing: -.02em;
      color: var(--ink); margin-bottom: 28px;
    }
    .testimonial-author {
      display: flex; align-items: center; justify-content: center; gap: 14px;
    }
    .author-avatar {
      width: 40px; height: 40px; border-radius: 50%;
      background: var(--ink);
      display: flex; align-items: center; justify-content: center;
      font-size: 16px; color: var(--white); font-weight: 700;
    }
    .author-info strong {
      display: block; font-size: 14px; font-weight: 700;
      color: var(--ink);
    }
    .author-info span { font-size: 13px; color: var(--muted); }

    /* ── QUIÉN ESTÁ DETRÁS ────────────────────────────────────
       Dos columnas: relato a la IZQUIERDA, foto a la DERECHA.
       El orden no es estético: en la foto Ruben está corrido al borde derecho
       del cuadro y su cuerpo apunta hacia la notebook (o sea, hacia la izquierda).
       Con la foto a la izquierda la mirada se va del sitio; a la derecha, devuelve
       al texto. En mobile la foto va PRIMERO: una cara es mejor gancho que un
       párrafo, y ahí no hay dirección de mirada que respetar. */
    .founder-grid {
      display: grid;
      grid-template-columns: 1fr 340px;
      gap: 56px; align-items: start;
      max-width: 940px; margin: 0 auto;
    }
    .founder-text p {
      font-size: 16.5px; line-height: 1.7;
      color: var(--muted); margin: 0 0 16px;
    }
    .founder-text p:last-child { margin-bottom: 0; }
    .founder-text strong { color: var(--ink); }
    .founder-text .punch {
      color: var(--ink); font-weight: 600;
    }
    .founder-photo { position: sticky; top: 100px; }
    .founder-photo img {
      width: 100%; height: auto; display: block;
      border-radius: 16px;
      border: 1px solid var(--border);
    }
    .founder-caption {
      margin-top: 14px;
      font-size: 13px; line-height: 1.5; color: var(--muted);
    }
    .founder-caption strong {
      display: block; font-size: 14px; color: var(--ink); font-weight: 700;
    }

    /* ── FAQ ──────────────────────────────────────────────── */
    .faq-list {
      max-width: 700px; margin: 0 auto;
      display: flex; flex-direction: column; gap: 8px;
    }
    .faq-item {
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: 10px; overflow: hidden;
    }
    .faq-q {
      width: 100%; text-align: left;
      padding: 18px 22px;
      font-size: 14.5px; font-weight: 600; color: var(--ink);
      background: none; border: none; cursor: pointer;
      display: flex; justify-content: space-between; align-items: center;
      gap: 16px; font-family: var(--font);
    }
    .faq-q:hover { background: var(--cream); }
    .faq-arrow {
      width: 20px; height: 20px; flex-shrink: 0;
      border-radius: 50%;
      background: var(--cream-dark);
      display: flex; align-items: center; justify-content: center;
      font-size: 11px; color: var(--muted);
      transition: transform .2s, background .2s;
    }
    .faq-item.open .faq-arrow {
      transform: rotate(180deg);
      background: var(--blue-light); color: var(--blue);
    }
    .faq-a {
      display: none; padding: 0 22px 18px;
      font-size: 14px; color: var(--muted); line-height: 1.75;
    }
    .faq-item.open .faq-a { display: block; }

    /* ── FINAL CTA ────────────────────────────────────────── */
    .cta-section {
      background: var(--ink);
      color: var(--white);
      text-align: center; padding: 104px 28px;
      position: relative; overflow: hidden;
    }
    .cta-section::before {
      content: '';
      position: absolute; top: -200px; left: 50%; transform: translateX(-50%);
      width: 700px; height: 500px;
      background: radial-gradient(ellipse, rgba(37,99,235,.15) 0%, transparent 70%);
      pointer-events: none;
    }
    .cta-inner { max-width: 600px; margin: 0 auto; position: relative; z-index: 1; }
    .cta-section h2 {
      font-family: var(--display);
      font-size: clamp(30px, 4vw, 50px);
      font-weight: 800; line-height: 1.08;
      letter-spacing: -.03em; margin-bottom: 16px;
    }
    .cta-section p {
      font-size: 17px; color: rgba(255,255,255,.55);
      margin-bottom: 40px; line-height: 1.65;
    }
    .cta-note {
      margin-top: 18px; font-size: 12px;
      color: rgba(255,255,255,.3); letter-spacing: .01em;
    }
    .cta-note a { color: rgba(255,255,255,.5); text-decoration: underline; text-underline-offset: 2px; }
    /* WhatsApp del CTA final. A propósito NO va verde lleno ni en tamaño xl: arriba están los
       dos botones principales y si este compite, se lleva tráfico que se registraba solo. */
    .btn-wa {
      display: inline-flex; align-items: center; gap: 9px;
      padding: 12px 24px; border-radius: 10px;
      border: 1px solid rgba(255,255,255,.22);
      background: rgba(255,255,255,.04);
      font-size: 15px; font-weight: 600; color: #fff;
      transition: all .15s;
    }
    .btn-wa:hover { background: rgba(37,211,102,.12); border-color: rgba(37,211,102,.55); }
    .btn-wa svg { width: 19px; height: 19px; fill: #25D366; flex: none; }

    /* ── FOOTER ───────────────────────────────────────────── */
    footer {
      background: #0A0A08;
      border-top: 1px solid rgba(255,255,255,.06);
      padding: 36px 28px;
    }
    .footer-inner {
      max-width: var(--max); margin: 0 auto;
      display: flex; justify-content: space-between; align-items: center;
      flex-wrap: wrap; gap: 16px;
    }
    .footer-logo {
      display: flex; align-items: center; gap: 9px;
      font-family: var(--display);
      font-size: 16px; font-weight: 800;
      color: var(--white); letter-spacing: -.3px;
    }
    .footer-logo .dot { color: var(--blue-mid); }
    /* flex-wrap obligatorio: son 7 links (508px en una fila) y sin el wrap los dos
       ultimos — Terminos y Privacidad — caian fuera del viewport en mobile. */
    .footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; list-style: none; }
    .footer-links a {
      font-size: 12px; color: rgba(255,255,255,.35);
      transition: color .15s;
    }
    .footer-links a:hover { color: rgba(255,255,255,.7); }
    .footer-copy { font-size: 12px; color: rgba(255,255,255,.25); }

    /* ── REVEAL ANIMATIONS ────────────────────────────────── */
    .reveal {
      opacity: 0; transform: translateY(24px);
      transition: opacity .6s, transform .6s;
    }
    .reveal.visible {
      opacity: 1; transform: translateY(0);
    }
    .reveal-delay-1 { transition-delay: .08s; }
    .reveal-delay-2 { transition-delay: .16s; }
    .reveal-delay-3 { transition-delay: .24s; }
    .reveal-delay-4 { transition-delay: .32s; }

    /* ── RESPONSIVE ───────────────────────────────────────── */
    @media (max-width: 900px) {
      .hero-inner { grid-template-columns: 1fr; gap: 40px; }
      .hero-text { padding-bottom: 0; }
      .dashboard-wrap { max-width: 480px; margin: 0 auto; }
      .features-grid { grid-template-columns: repeat(2, 1fr); }
      .benefits-wrap { grid-template-columns: 1fr; gap: 44px; }
      .steps { grid-template-columns: 1fr; }
      .step { border-right: none; border-bottom: 1px solid rgba(255,255,255,.08); }
      .step:last-child { border-bottom: none; }
      /* Feature spotlights: una columna en tablet/mobile */
      #caracteristicas [style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
        padding: 48px 20px !important;
      }
      /* Foto arriba del relato: la cara engancha más que el primer párrafo */
      .founder-grid { grid-template-columns: 1fr; gap: 32px; max-width: 620px; }
      .founder-photo { position: static; order: -1; max-width: 300px; }
    }
    @media (max-width: 640px) {
      .nav-links { display: none; }
      .hamburger { display: flex; }
      .nav-links.open {
        display: flex; flex-direction: column;
        position: absolute; top: 60px; left: 0; right: 0;
        /* OPACO, no rgba(15,15,14,.98): el 2% restante dejaba pasar el titular del hero,
           que es blanco y grande, y se leía por detrás de los links del menú. El nav de
           arriba disimula lo suyo con el blur, pero el panel cuelga POR DEBAJO del nav,
           sobre el hero pelado. Lo reportó un scan externo el 28/08/2026.
           El blur y la sombra son los del nav: separan el panel del contenido de atrás. */
        background: #0F0F0E;
        backdrop-filter: blur(16px);
        box-shadow: 0 12px 28px rgba(0,0,0,.45);
        padding: 20px 24px; gap: 20px; border-bottom: 1px solid rgba(255,255,255,.07);
        z-index: 199;
      }
      .features-grid { grid-template-columns: 1fr; }
      .testimonial-text { font-size: 18px; }
      .footer-inner { flex-direction: column; text-align: center; }
      .hero { padding: 60px 20px 0; }
      section { padding: 72px 20px; }
    }
    /* Nav compacto en telefonos. Dos problemas distintos que se arreglan juntos:
       a 390px (iPhone 12/13/14) el label del boton partia en dos lineas, y a 320-360px
       (SE viejo, Fold cerrado) logo + los 2 botones desbordaban ~30px, lo que
       ensancha el layout viewport y estira la pagina entera. Se achica, no se oculta. */
    @media (max-width: 430px) {
      .nav-inner { padding: 0 14px; }
      .logo { font-size: 17px; gap: 8px; }
      .logo svg { width: 24px; height: 24px; }
      .nav-cta { gap: 6px; }
      .nav-cta .btn { padding: 8px 12px; font-size: 12px; white-space: nowrap; }
    }

    /* ── MOCKUPS DE PRODUCTO ──────────────────────────────────
       Reemplazan los screenshots .png/.jpg por DOM real: nítidos en
       cualquier densidad, responsive de verdad y ~0 KB.
       TODO el interior se dimensiona en `em`, así que el mockup entero
       escala cambiando el font-size de `.mk` — por eso no hace falta una
       media query por elemento. */
    .mk {
      font-family: var(--font);
      font-size: clamp(6.4px, 1.02vw, 11px);
      background: #FAFAF8; color: var(--ink);
      display: flex; line-height: 1.45;
      -webkit-font-smoothing: antialiased;
    }
    .mk-lg { font-size: clamp(7px, .95vw, 11.4px); }
    .mk * { box-sizing: border-box; }

    /* Sidebar */
    .mk-side {
      flex: 0 0 15.5em; background: #fff; border-right: 1px solid var(--border);
      padding: 1.1em 0; display: flex; flex-direction: column;
    }
    .mk-brand { display: flex; align-items: center; gap: .75em; padding: 0 1.2em 1.1em; }
    /* El isotipo son 4 cuadraditos: uno real + 3 box-shadow. Antes se centraba con
       `place-items:center` y un margin negativo, pero el margen negativo entra en el
       cálculo del centrado (achica la caja de margen), así que el grupo terminaba
       corrido ~.2em abajo y a la derecha. Posicionado absoluto: .55em = (2.5 - 1.4)/2,
       donde 1.4em es lo que ocupa el grupo (.62 del cuadrado + .78 del offset). */
    .mk-brand-ic {
      width: 2.5em; height: 2.5em; border-radius: .62em; background: var(--ink);
      position: relative; flex: 0 0 auto;
    }
    /* Isotipo: un cuadradito real + 3 clonados por box-shadow (2 crema y el azul en
       diagonal, igual que el SVG de marca). El offset tiene que superar al lado, si no
       los 4 se pisan y se ve un bloque macizo. */
    .mk-brand-ic i {
      position: absolute; top: .55em; left: .55em;
      width: .62em; height: .62em; border-radius: .16em;
      background: #F8F4ED; box-shadow: .78em 0 0 #F8F4ED, 0 .78em 0 #F8F4ED, .78em .78em 0 #2563EB;
    }
    .mk-brand-t { font-weight: 700; font-size: 1.25em; letter-spacing: -.01em; }
    .mk-brand-s { font-size: .82em; color: #9AA0AA; margin-top: -.15em; }
    .mk-navsec {
      font-size: .82em; font-weight: 700; letter-spacing: .07em; color: #9AA0AA;
      padding: .95em 1.5em .35em;
    }
    .mk-nav { display: flex; align-items: center; gap: .7em; padding: .5em 1.5em; font-size: 1.06em; color: #3F4652; }
    .mk-nav b { font-weight: 500; }
    .mk-nav.on { background: #EFF6FF; color: #2563EB; font-weight: 600; box-shadow: inset .2em 0 0 #2563EB; }
    /* Marcador sólido y tenue, no un contorno: con borde se leía como un checkbox
       y daba la impresión de una lista seleccionable. */
    .mk-nav i { width: .72em; height: .72em; border-radius: .18em; background: currentColor; opacity: .22; flex: 0 0 auto; }
    .mk-nav.on i { opacity: .9; }
    .mk-pill { margin-left: auto; background: #2563EB; color: #fff; border-radius: 1em; padding: 0 .5em; font-size: .82em; font-weight: 700; }
    .mk-side-foot { margin-top: auto; padding: 1em 1.5em 0; border-top: 1px solid var(--border); font-size: .9em; color: var(--muted); }
    .mk-side-foot span { display: block; color: #C1503F; margin-top: .25em; }

    /* Área principal */
    .mk-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
    .mk-head {
      padding: .95em 1.5em; border-bottom: 1px solid var(--border);
      background: #fff; font-size: 1.12em; font-weight: 600;
    }
    .mk-body { padding: 1.3em 1.5em; flex: 1; }

    .mk-tabs { display: flex; gap: 1.5em; border-bottom: 1px solid var(--border); margin-bottom: 1.4em; }
    .mk-tab { font-size: 1.02em; color: var(--muted); padding-bottom: .65em; white-space: nowrap; }
    .mk-tab.on { color: #2563EB; font-weight: 600; box-shadow: inset 0 -2px 0 #2563EB; }

    /* KPIs */
    .mk-kpis { display: grid; gap: .9em; margin-bottom: 1.3em; }
    .mk-k3 { grid-template-columns: repeat(3, 1fr); }
    .mk-k4 { grid-template-columns: repeat(4, 1fr); }
    .mk-k5 { grid-template-columns: repeat(5, 1fr); }
    .mk-kpi { background: #fff; border: 1px solid var(--border); border-radius: .8em; padding: .95em 1.05em; min-width: 0; }
    /* min-height = 2 renglones. Los rótulos tienen largos distintos ("PARA ARMAR"
       entra en uno, "ESPERANDO PAGO" necesita dos) y sin esto los números de las
       tarjetas de rótulo corto quedaban más arriba que los del resto. */
    .mk-kpi-l { font-size: .85em; font-weight: 600; letter-spacing: .05em; color: #8A9099; text-transform: uppercase; line-height: 1.3; min-height: 2.6em; }
    .mk-kpi-v { font-size: 1.85em; font-weight: 700; letter-spacing: -.02em; margin: .18em 0 .1em; font-variant-numeric: tabular-nums; }
    .mk-kpi-n { font-size: .88em; color: var(--muted); }
    .mk-green { color: #16A34A; } .mk-red { color: #C1503F; } .mk-violet { color: #6D5BD0; } .mk-blue { color: #2563EB; }
    .mk-kpi.t-red { background: #FDF0EF; border-color: #F6DAD6; }
    .mk-kpi.t-amber { background: #FEF8E7; border-color: #F5E6BC; }
    .mk-kpi.t-green { background: #ECF7F0; border-color: #CDE9D8; }

    /* Tablas */
    .mk-panel { background: #fff; border: 1px solid var(--border); border-radius: .8em; overflow: hidden; }
    .mk-panel-h { padding: .8em 1.05em; border-bottom: 1px solid var(--border); font-weight: 600; font-size: 1.02em; }
    .mk-tr { display: flex; align-items: center; gap: .8em; padding: .68em 1.05em; border-bottom: 1px solid #F2F1EC; font-size: 1em; }
    .mk-tr:last-child { border-bottom: 0; }
    .mk-tr.h { font-size: .85em; font-weight: 600; letter-spacing: .05em; color: #8A9099; text-transform: uppercase; background: #FAFAF8; }
    .mk-tr.tot { font-weight: 700; background: #FAFAF8; border-bottom: 0; }
    .mk-c1 { flex: 0 0 5em; } .mk-c2 { flex: 1; min-width: 0; } .mk-c3 { flex: 0 0 8em; }
    .mk-num { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
    .mk-ellip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    /* Chips */
    .mk-chip { display: inline-block; border-radius: .45em; padding: .12em .55em; font-size: .85em; font-weight: 600; white-space: nowrap; }
    .c-amber { background: #FAEEDA; color: #854F0B; }
    .c-green { background: #EAF3DE; color: #3B6D11; }
    .c-grey  { background: #F1F0EC; color: #5D6470; }
    .c-violet{ background: #F3F0FF; color: #534AB7; }
    .c-blue  { background: #EFF6FF; color: #2563EB; }
    .c-gold  { background: #FDF6E3; color: #A87A16; border: 1px solid #EFDCA8; }
    .c-red   { background: #FDE9E7; color: #C1503F; }

    /* Kanban */
    .mk-kanban { display: grid; grid-template-columns: repeat(5, 1fr); gap: .8em; align-items: start; }
    .mk-col-h {
      display: flex; align-items: center; gap: .5em; border-radius: .5em;
      padding: .45em .7em; font-size: .85em; font-weight: 700; letter-spacing: .04em; margin-bottom: .7em;
    }
    .mk-col-h b { margin-left: auto; border-radius: 1em; background: rgba(255,255,255,.65); padding: 0 .45em; }
    .h-violet { background: #EDEAFB; color: #534AB7; }
    .h-amber  { background: #FCF0D8; color: #854F0B; }
    .h-orange { background: #FCE7DF; color: #B4521F; }
    .h-green  { background: #E4F1D9; color: #3B6D11; }
    .mk-card { background: #fff; border: 1px solid var(--border); border-radius: .6em; padding: .7em .8em; margin-bottom: .65em; }
    .mk-card-t { color: #2563EB; font-weight: 600; font-size: 1em; }
    .mk-card-d { color: #9AA0AA; font-size: .85em; }
    .mk-card-m { font-weight: 700; font-size: 1.15em; margin: .12em 0 .3em; font-variant-numeric: tabular-nums; }
    .mk-empty { text-align: center; color: #A8AEB8; font-size: .95em; padding: 1.6em 0; }

    /* Filas de vencimientos */
    .mk-venc { display: flex; align-items: center; gap: .8em; background: #fff; border: 1px solid var(--border);
      border-left: .28em solid var(--vc, #E5E3DC); border-radius: .6em; padding: .7em .9em; margin-bottom: .55em; }
    .mk-venc-t { font-weight: 600; font-size: 1.05em; }
    .mk-venc-s { color: var(--muted); font-size: .88em; }

    /* Barras de progreso */
    .mk-track { background: #EDECE7; border-radius: 1em; height: .5em; overflow: hidden; }
    .mk-fill { height: 100%; border-radius: 1em; background: #2563EB; width: 0; transition: width 1.1s cubic-bezier(.22,.61,.36,1); }
    .visible .mk-fill, .mk-fill.visible { width: var(--w, 0%); }

    /* Entrada escalonada de las tarjetas: "llegan" en vez de aparecer de golpe */
    .mk-rise { opacity: 0; transform: translateY(.9em); transition: opacity .5s ease, transform .5s cubic-bezier(.22,.61,.36,1); transition-delay: calc(var(--i, 0) * .07s); }
    .visible .mk-rise { opacity: 1; transform: none; }

    /* Calendario de Vencimientos (v2) — misma estructura que .cal-grid en app.html:
       7 columnas desde lunes, píldora por evento con nombre + monto exacto, color por
       categoría y tope de 3 + "+N más". */
    /* minmax(0,1fr), no 1fr: con `auto` de mínimo, un nombre largo ("Préstamo BBVA — Cuota
       6/18") ensancha SU columna y las 7 quedan desparejas. El 0 deja que la celda se
       achique y que el ellipsis haga su trabajo. */
    .mk-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .4em; }
    .mk-dow { font-size: .8em; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #9AA0AA; text-align: center; padding: .2em 0; }
    .mk-cell { min-height: 5.6em; min-width: 0; border: 1px solid var(--border); border-radius: .8em; background: #fff; padding: .45em .5em; display: flex; flex-direction: column; gap: .2em; }
    .mk-cell.empty { background: transparent; border: none; min-height: 0; }
    .mk-cell.hoy { border-color: #111; box-shadow: inset 0 0 0 1.5px #111; }
    .mk-day { font-size: .92em; font-weight: 600; color: #6B7280; }
    .mk-cell.hoy .mk-day { color: #111; }
    .mk-ev { display: flex; flex-direction: column; min-width: 0; font-size: .78em; font-weight: 600; padding: .16em .4em; border-radius: .35em; line-height: 1.22; overflow: hidden; }
    .mk-ev-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .mk-ev-a { font-size: .92em; opacity: .82; }
    .e-tax     { background: #FFFBEB; color: #D97706; }
    .e-arca    { background: #F8FAFC; color: #475569; }
    .e-credito { background: #EFF6FF; color: #2563EB; }
    .e-cheque  { background: #F0FDFA; color: #0D9488; }
    .e-tarjeta { background: #FFF7ED; color: #EA580C; }
    .e-compra  { background: #F9FAFB; color: #6B7280; }
    .mk-more { font-size: .76em; color: #9AA0AA; font-weight: 600; padding: 0 .35em; }
    .mk-viewpill { display: flex; border: 1px solid var(--border); border-radius: .5em; overflow: hidden; margin-left: auto; align-self: center; }
    .mk-viewpill span { padding: .26em .75em; font-size: .85em; font-weight: 600; color: var(--muted); background: #fff; }
    .mk-viewpill span.on { background: #111; color: #fff; }

    /* En pantallas chicas: sin sidebar y sin las columnas de relleno del kanban.
       El mockup ya escala solo por el font-size en em, esto saca lo que no aporta. */
    @media (max-width: 720px) {
      .mk-side, .mk-hide-sm { display: none; }
      .mk-kanban { grid-template-columns: repeat(3, 1fr); }
      .mk-k5, .mk-k4 { grid-template-columns: repeat(2, 1fr); }
      .mk-k3 { grid-template-columns: repeat(2, 1fr); }
      .mk-body { padding: 1em; }
      /* 7 columnas en 375px no dan para texto: las píldoras quedan como barras de
         color, que es lo que un calendario mensual comunica a ese tamaño. */
      .mk-ev-t, .mk-ev-a, .mk-more { display: none; }
      /* px y no em: a .45em la barra quedaba en 2,4px y no se leía como un evento. */
      .mk-ev { height: 3px; padding: 0; border-radius: 2px; }
      .mk-cell { min-height: 3.4em; border-radius: .5em; padding: .3em; }
    }
    @media (prefers-reduced-motion: reduce) {
      .mk-rise { opacity: 1; transform: none; transition: none; }
      .mk-fill { transition: none; }
    }
    /* -- Hero: carrusel de escenas (31/08) ------------------------------
       Reemplaza la maqueta unica y quieta del kanban. Motivo medido: el 94%
       del trafico pago no baja del pliegue, o sea que el hero es lo UNICO que
       se ve, y una imagen fija no frena a nadie.
       NO es video a proposito: texto real = nitido en cualquier pantalla,
       peso ~0 y no toca el LCP (hoy 2,3 s, "bueno"). Un MP4 en el hero lo
       empeoraria justo en movil, que es el 100% del trafico pago.
       La escena 1 trae .on escrito en el HTML: si el JS no corre, se ve
       igual. Es la leccion del 31/08 - nada de contenido que dependa de que
       el JS arranque para existir. */
    /* Fondo propio: las escenas no miden lo mismo y la mas baja dejaba ver el
       negro del marco debajo del panel. Con el gris de .mk el sobrante se lee
       como parte de la pantalla del sistema. */
    .hero-scenes { display: grid; background: #FAFAF8; }
    .hero-scene {
      /* todas en la misma celda: el alto es el de la mas alta y no hay salto
         al rotar, asi el CLS sigue en 0 */
      grid-area: 1 / 1;
      opacity: 0; transform: translateY(.5em);
      transition: opacity .5s ease, transform .5s cubic-bezier(.22,.61,.36,1);
    }
    .hero-scene.on { opacity: 1; transform: none; }
    /* Legibilidad: .mk arranca en clamp(6.4px...), que en un celular no se lee
       -- es lo que marco Ruben el 31/08. Estas escenas llevan MENOS contenido a
       proposito, y por eso pueden ir bastante mas grandes. */
    .hero-scene .mk { font-size: clamp(10px, 2.5vw, 13px); }
    /* Buscador de la escena 2: mismo lenguaje visual que .mk-panel, para que se
       lea como un campo del sistema y no como un adorno de la landing. */
    .mk-search {
      display: flex; align-items: center; gap: .65em;
      background: #fff; border: 1px solid var(--border); border-radius: .8em;
      padding: .72em 1.05em; margin-bottom: 1.1em;
      font-size: 1.05em; font-variant-numeric: tabular-nums;
    }
    .mk-search-ic { color: #A8AEB8; font-weight: 700; font-size: 1.15em; line-height: 1; }
    .mk-search .mk-pill { font-size: .78em; }
    .scene-bar {
      display: flex; align-items: center; justify-content: space-between;
      gap: 12px; margin-top: 12px; padding: 0 2px;
    }
    .scene-label {
      font-family: var(--font); font-size: 12.5px; font-weight: 600;
      letter-spacing: .03em; color: var(--muted, #8a8275);
    }
    .scene-dots { display: flex; gap: 6px; flex-shrink: 0; }
    .scene-dot {
      width: 22px; height: 4px; padding: 0; border: 0; border-radius: 2px;
      background: #DEDCD5; cursor: pointer; transition: background .3s ease;
    }
    .scene-dot.on { background: var(--blue, #2563EB); }
    .scene-dot:focus-visible { outline: 2px solid var(--blue, #2563EB); outline-offset: 3px; }
    @media (max-width: 560px) {
      /* En un celular el rotulo y los puntos en la misma linea parten la frase
         ("...y que" / "no?"). Apilados, el rotulo entra entero en un renglon. */
      .scene-bar { flex-direction: column; align-items: flex-start; gap: 8px; }
      .scene-label { font-size: 11.5px; }
    }
    @media (prefers-reduced-motion: reduce) { .hero-scene { transition: none; } }

    /* Hero mockup v2: más profundidad y más lenguaje de producto, sin sumar imágenes. */
    .dashboard-wrap { perspective: 1200px; isolation: isolate; }
    .dashboard-wrap::before {
      content: ''; position: absolute; z-index: -2; inset: 8% -8% -10%;
      background: radial-gradient(ellipse at center, rgba(37,99,235,.24), rgba(37,99,235,0) 68%);
      filter: blur(24px); pointer-events: none;
    }
    .dashboard-wrap::after {
      content: ''; position: absolute; z-index: -1; inset: 14px -10px 34px 14px;
      border: 1px solid rgba(37,99,235,.13); border-radius: 18px;
      background: rgba(37,99,235,.035); transform: rotate(1.2deg);
    }
    .dashboard-float {
      position: relative; z-index: 1;
      border-color: rgba(37,99,235,.24);
      box-shadow: 0 42px 90px -32px rgba(17,24,39,.46), 0 14px 28px -18px rgba(37,99,235,.28), inset 0 1px rgba(255,255,255,.55);
      transform: rotateY(-2.2deg) rotateX(1deg);
      transform-origin: center left;
      transition: transform .65s cubic-bezier(.22,.61,.36,1), box-shadow .65s ease;
    }
    .dashboard-wrap:hover .dashboard-float { transform: rotateY(0) rotateX(0) translateY(-4px); box-shadow: 0 48px 100px -30px rgba(17,24,39,.5), 0 18px 38px -18px rgba(37,99,235,.38); }
    .mock-topbar { min-height: 38px; background: linear-gradient(180deg,#17191d,#0d0e10); }
    .mock-url::before { content: '●'; color: #4ade80; font-size: 7px; margin-right: 7px; }
    .hero-scenes { min-height: 292px; background: linear-gradient(145deg,#fff 0%,#f7f8fb 100%); }
    .hero-scene { overflow: hidden; transform: translateX(18px) scale(.985); transition: opacity .58s ease, transform .7s cubic-bezier(.22,.61,.36,1); }
    .hero-scene::before {
      content: 'OPERIX  /  ' attr(data-rotulo); display: block;
      padding: 9px 14px 8px 58px; background: rgba(255,255,255,.9);
      border-bottom: 1px solid #E7E9EE; color: #667085;
      font-size: 8px; font-weight: 700; letter-spacing: .055em; text-transform: uppercase;
    }
    .hero-scene.on { transform: none; }
    .hero-scene .mk { min-height: 252px; background: transparent; }
    .hero-scene .mk::before {
      content: '◆\A\A▰\A\A▦\A\A◎'; white-space: pre; flex: 0 0 44px;
      padding-top: 14px; text-align: center; background: #F2F4F7;
      border-right: 1px solid #E4E7EC; color: #98A2B3; line-height: 1.25;
    }
    .hero-scene.on .mk-kpi, .hero-scene.on .mk-panel, .hero-scene.on .mk-search { animation: heroPanelIn .55s both cubic-bezier(.22,.61,.36,1); }
    .hero-scene.on .mk-panel { animation-delay: .08s; }
    @keyframes heroPanelIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
    .mock-sync {
      position: absolute; z-index: 3; right: -14px; bottom: 30px;
      display: flex; align-items: center; gap: 8px; padding: 9px 12px;
      border: 1px solid rgba(37,99,235,.16); border-radius: 10px;
      background: rgba(255,255,255,.94); box-shadow: 0 12px 30px rgba(17,24,39,.16);
      color: #344054; font-size: 10px; font-weight: 650; backdrop-filter: blur(8px);
    }
    .mock-sync i { width: 7px; height: 7px; border-radius: 50%; background: #22C55E; box-shadow: 0 0 0 4px rgba(34,197,94,.12); }
    @media (max-width: 720px) {
      .dashboard-float, .dashboard-wrap:hover .dashboard-float { transform: none; }
      .dashboard-wrap::after { inset: 10px -5px 38px 10px; }
      .hero-scenes { min-height: 270px; }
      .hero-scene .mk::before { flex-basis: 30px; }
      .hero-scene::before { padding-left: 40px; font-size: 7px; }
      .mock-sync { right: 8px; bottom: 34px; }
    }
    @media (prefers-reduced-motion: reduce) {
      .dashboard-float, .dashboard-wrap:hover .dashboard-float { transform: none; transition: none; }
      .hero-scene.on .mk-kpi, .hero-scene.on .mk-panel, .hero-scene.on .mk-search { animation: none; }
    }

    /* OX-05: videos reales del producto, completos y sin recorte. */
    .ox-video-frame {
      max-width: 1000px; margin: 0 auto; background: #111;
      border: 1.5px solid var(--border); border-radius: 16px; overflow: hidden;
      box-shadow: 0 18px 50px -20px rgba(17,17,17,.2);
    }
    .ox-video-frame video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; background: #111; transform: translateZ(0); backface-visibility: hidden; }
    .dashboard-wrap > .ox-video-frame { position: relative; z-index: 2; }
    .dashboard-wrap > .dashboard-float,
    .dashboard-wrap > .mock-sync,
    .dashboard-wrap > .scene-bar { display: none; }
    .ox-video-frame + .ox-old-mockup, .ox-video-frame + .cat-lp { display: none !important; }

    /* OX-05: pre-chat humano; no envia nada hasta que haya consulta libre. */
    .wa-chat { position: fixed; right: 22px; bottom: 22px; z-index: 1200; font-family: var(--font); }
    .wa-chat__hint { position: absolute; right: 72px; bottom: 8px; width: max-content; max-width: 260px; padding: 9px 12px; border: 1px solid var(--border); border-radius: 12px; background: #fff; color: var(--ink); box-shadow: 0 10px 30px rgba(17,17,17,.14); font-size: 13px; animation: waHintIn .45s .8s both; }
    .wa-chat__toggle { position: relative; width: 60px; height: 60px; padding: 3px; border: 0; border-radius: 50%; background: #25D366; box-shadow: 0 10px 28px rgba(17,17,17,.25); cursor: pointer; }
    .wa-chat__toggle::before { content: ''; position: absolute; inset: -5px; border: 2px solid rgba(37,211,102,.4); border-radius: 50%; animation: waPulse 2.2s infinite; }
    .wa-chat__toggle img { width: 54px; height: 54px; display: block; border-radius: 50%; object-fit: cover; object-position: 50% 18%; }
    .wa-chat__panel { position: absolute; right: 0; bottom: 76px; width: min(380px, calc(100vw - 28px)); max-height: min(610px, calc(100vh - 110px)); overflow: auto; border: 1px solid #DDE7DF; border-radius: 22px; background: #FFFEFB; color: var(--ink); box-shadow: 0 26px 80px rgba(35,52,41,.2); transform-origin: bottom right; }
    /* La foto va grande y centrada en la cara (el archivo es 4:5 con la cara arriba:
       con el recorte por defecto quedaba barba y pecho, chiquita e irreconocible). */
    .wa-chat__head { position: relative; display: flex; flex-direction: column; gap: 12px; align-items: center; text-align: center; padding: 26px 24px 20px; background: linear-gradient(135deg,#EFFAF2 0%,#F8F5ED 100%); color: var(--ink); border-bottom: 1px solid #DDE7DF; }
    .wa-chat__head img { flex: 0 0 auto; width: 108px; height: 108px; padding: 3px; border: 3px solid #25D366; border-radius: 50%; object-fit: cover; object-position: 50% 18%; background: #fff; box-shadow: 0 10px 26px rgba(35,52,41,.2); }
    .wa-chat__head strong, .wa-chat__head span { display: block; }
    .wa-chat__head strong { font-size: 18px; letter-spacing: -.015em; line-height: 1.2; }
    .wa-chat__head span { max-width: 290px; margin: 6px auto 0; color: #4E5C53; font-size: 13.5px; line-height: 1.45; }
    .wa-chat__close { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border: 1px solid #D6E0D8; border-radius: 50%; background: rgba(255,255,255,.72); color: #56635A; font-size: 20px; line-height: 1; cursor: pointer; }
    .wa-chat__body { padding: 18px; }
    .wa-chat__intro { margin: 0 0 12px; color: var(--muted); font-size: 13px; }
    .wa-chat__quick { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; margin: 8px 0; padding: 11px 13px; border: 1px solid #E3E6DF; border-radius: 12px; background: #fff; color: #26352B; text-align: left; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: border-color .2s, background .2s, transform .2s; }
    .wa-chat__quick::after { content: '›'; flex: 0 0 auto; color: #22A652; font-size: 20px; font-weight: 400; }
    .wa-chat__quick:hover { border-color: #9DD7AE; background: #F5FBF6; transform: translateX(2px); }
    .wa-chat__answer { margin: 13px 0; padding: 13px 14px; border: 1px solid #CFE8D5; border-radius: 13px 13px 4px 13px; background: #EFFAF2; color: #24543A; font-size: 13px; line-height: 1.55; }
    .wa-chat__follow { margin: 14px 0 7px; font-size: 13px; font-weight: 650; }
    .wa-chat textarea { display: block; width: 100%; min-height: 78px; resize: vertical; padding: 10px 11px; border: 1px solid #C9CED8; border-radius: 10px; color: var(--ink); font: inherit; font-size: 14px; }
    .wa-chat__send { display: block; width: 100%; margin-top: 10px; padding: 11px 14px; border: 0; border-radius: 10px; background: #16A34A; color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
    .wa-chat__send:disabled { background: #D1D5DB; color: #6B7280; cursor: not-allowed; }
    @keyframes waHintIn { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: none; } }
    @keyframes waPulse { 0%,55% { opacity: .75; transform: scale(.92); } 100% { opacity: 0; transform: scale(1.25); } }
    @media (max-width: 640px) {
      /* En movil manda el cuadro completo: sin desbordes ni recortes laterales. */
      .ox-video-frame {
        width: 100%; max-width: 100%; aspect-ratio: 16 / 9;
        margin-left: 0;
        border-radius: 12px;
      }
      .ox-video-frame video { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; object-position: center; }
      .wa-chat { right: 14px; bottom: 14px; }
      .wa-chat__hint { right: 68px; font-size: 12px; }
      .wa-chat__panel { bottom: 70px; max-height: calc(100vh - 96px); }
    }
    @media (prefers-reduced-motion: reduce) {
      .wa-chat__hint, .wa-chat__toggle::before { animation: none; }
      .wa-chat__quick { transition: none; }
    }
    @media (min-width: 901px) {
      .hero-inner { max-width: 1240px; grid-template-columns: .82fr 1.18fr; gap: 42px; }
      .dashboard-wrap { width: 100%; }
    }
  .hero-rubros{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0}.hero-rubros a{display:inline-flex;align-items:center;gap:7px;padding:9px 12px;border:1px solid #b9bec7;border-radius:6px;font-size:12px;font-weight:600;line-height:1.5;color:var(--ink);text-decoration:none}.hero-rubros a:hover{border-color:#2563eb;color:#2563eb}.hero-rubros a:focus-visible{outline:3px solid #2563eb;outline-offset:3px}.hero-rubros span{font-size:10px;font-weight:400;color:#5d6470}.hero-text h1{font-size:clamp(36px,4.2vw,60px);line-height:1.08}@media(max-width:640px){.hero-text h1{font-size:36px;letter-spacing:-1.3px}}

/* Soluciones por rubro: entrada comercial al sistema. */
.system-rubros{background:var(--cream);border-top:1px solid var(--border);padding:64px 24px}
.system-rubros-inner{max-width:1120px;margin:auto}
.system-rubros h2{font-size:clamp(30px,4vw,44px);line-height:1.15;letter-spacing:-1.2px;margin:0 0 16px}
.system-rubros-intro{max-width:680px;color:var(--muted);line-height:1.7;margin:0 0 30px}
.system-rubros-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.system-rubro{background:#fff;border:1px solid var(--border);border-radius:16px;padding:28px;display:flex;flex-direction:column;scroll-margin-top:110px}
.system-rubro h3{font-size:22px;line-height:1.3;margin:0 0 16px}
.system-rubro p{font-size:15px;line-height:1.7;color:var(--muted);margin:0 0 22px}
.system-rubro a{margin-top:auto;font-size:14px;font-weight:600;color:var(--blue);text-underline-offset:4px}
.system-rubro a:focus-visible{outline:3px solid var(--blue);outline-offset:5px}
.system-rubro-opticas{border-color:var(--blue)}
@media(max-width:760px){.system-rubros-grid{grid-template-columns:1fr}.system-rubros{padding:44px 24px}.system-rubro{padding:24px}}

@font-face{font-family:Inter;src:url('/fonts/InterVariable.woff2') format('woff2');font-weight:100 900;font-display:swap}
.industry-page .hero{padding-bottom:72px}.industry-page .hero-inner{align-items:center}.industry-page .hero h1{font-size:clamp(36px,4.2vw,58px)}
.industry-page .hero-text>*{animation:none;opacity:1;transform:none}
.industry-media{min-width:0;margin:0}.industry-media img,.industry-media video{display:block;width:100%;height:auto;border-radius:14px;border:1px solid #303036;background:#171717}.industry-media figcaption{font-size:12px;line-height:1.6;color:#a6a9b1;margin-top:12px}
.industry-page .hero .industry-path{font-size:13px;line-height:1.6;color:var(--muted);margin-bottom:22px}.industry-path a{text-decoration:underline;text-underline-offset:3px}
.industry-feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:36px}.industry-feature{border:1px solid var(--border);background:white;border-radius:14px;padding:28px}.industry-feature h3{font-size:21px;line-height:1.3;margin-bottom:14px}.industry-feature p{color:var(--muted);font-size:15px;line-height:1.8}
.industry-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin-top:32px;list-style:none;counter-reset:step}.industry-steps li{counter-increment:step}.industry-steps li:before{content:'0' counter(step);display:block;color:var(--blue);font-weight:800;font-size:26px;margin-bottom:12px}.industry-steps h3{font-size:21px;margin-bottom:12px}.industry-steps p{color:var(--muted);line-height:1.8}
.industry-faq{max-width:820px;margin:30px auto 0}.industry-faq details{border-bottom:1px solid var(--border);padding:22px 0}.industry-faq summary{cursor:pointer;font-weight:600;font-size:18px}.industry-faq p{color:var(--muted);padding-top:16px;line-height:1.8}
.industry-page .section-header{text-align:left}.industry-note{color:var(--muted);line-height:1.8;max-width:760px;margin-top:24px}.industry-note a{text-decoration:underline;color:var(--blue)}
.industry-page a:focus-visible,.industry-page button:focus-visible,.industry-page summary:focus-visible{outline:3px solid var(--blue);outline-offset:5px}
.industry-page .hamburger{background:none;border:0;padding:8px}.industry-page .hamburger span{display:block}.industry-page .hero-note,.industry-media figcaption{color:var(--muted)}.industry-page .cta-section .btn-outline-dark{color:white;border-color:#8a8a8a}
@media(max-width:760px){.industry-feature-grid,.industry-steps{grid-template-columns:1fr}.industry-page .hero{padding-bottom:40px}.industry-page .hero-inner{gap:36px}.industry-feature{padding:24px}.industry-page .hero h1{font-size:38px}.industry-page .nav-inner{padding:0 16px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}