:root {
    --paper: #f6f6f3;
    --paper-2: #efeeea;
    --ink: #14161b;
    --ink-soft: #4a4f59;
    --line: #e1e0db;
    --bg-dark: #0c0e13;
    --bg-dark-2: #14171f;
    --line-dark: #232733;
    --paper-dark: #b9bdc7;
    --accent: oklch(0.63 0.21 27);
    --accent-soft: oklch(0.63 0.21 27 / 0.12);
    --accent-ink: oklch(0.55 0.21 27);
    --ok: oklch(0.7 0.15 155);
    --warn: oklch(0.78 0.15 75);
    --r: 14px;
    --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-pill: 100px;
    --maxw: 1240px;
    --accent-btn: oklch(0.55 0.20 27);
    --accent-text: oklch(0.50 0.19 27);
    --mono-dark: #9aa0ae;
    --sh-1: 0 20px 40px -28px rgba(20,22,27,.4);
    --sh-2: 0 30px 70px -50px rgba(20,22,27,.5);
    --sh-3: 0 40px 80px -45px rgba(12,14,19,.6);
    --display: "Space Grotesk", sans-serif;
    --body: "Hanken Grotesk", sans-serif;
    --mono: "JetBrains Mono", monospace;
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  body {
    font-family: var(--body);
    background: var(--paper);
    color: var(--ink);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }
  h1, h2, h3, h4 { font-family: var(--display); font-weight: 600; letter-spacing: -0.02em; line-height: 1.05; }
  a { color: inherit; text-decoration: none; }
  .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }
  .mono { font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; }

  /* Buttons */
  .btn {
    display: inline-flex; align-items: center; gap: 9px;
    font-family: var(--body); font-weight: 600; font-size: 15px;
    padding: 13px 22px; border-radius: 10px; cursor: pointer;
    border: 1px solid transparent; transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
    white-space: nowrap;
  }
  .btn:active { transform: translateY(1px); }
  .btn-primary { background: var(--accent); color: #fff; box-shadow: 0 1px 0 rgba(0,0,0,.06), 0 10px 24px -12px var(--accent); }
  .btn-primary:hover { box-shadow: 0 1px 0 rgba(0,0,0,.06), 0 16px 30px -12px var(--accent); }
  .btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
  .btn-ghost:hover { background: var(--paper-2); }
  .btn-dark { background: #fff; color: var(--ink); }
  .btn-dark:hover { background: var(--paper-2); }
  .btn-ghost-dark { background: transparent; color: #fff; border-color: var(--line-dark); }
  .btn-ghost-dark:hover { background: var(--bg-dark-2); }

  /* Nav */
  header.nav {
    position: sticky; top: 0; z-index: 50;
    background: color-mix(in oklab, var(--paper) 82%, transparent);
    backdrop-filter: saturate(1.2) blur(12px);
    border-bottom: 1px solid var(--line);
  }
  .nav-inner { display: flex; align-items: center; gap: 32px; height: 68px; }
  .brand { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 700; font-size: 20px; letter-spacing: -0.02em; }
  .brand .mark { width: 26px; height: 26px; border-radius: 8px; background: var(--accent); position: relative; display: grid; place-items: center; }
  .brand .mark::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(255,255,255,.28); }
  .nav-links { display: flex; gap: 28px; margin-left: 8px; }
  .nav-links a { font-size: 14.5px; color: var(--ink-soft); font-weight: 500; }
  .nav-links a:hover { color: var(--ink); }
  .nav-cta { margin-left: auto; display: flex; align-items: center; gap: 12px; }
  .nav-cta .btn { padding: 10px 18px; font-size: 14px; }

  /* Hero */
  .hero { padding: 96px 0 64px; position: relative; overflow: hidden; }
  .hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; }
  .eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--accent-text); background: var(--accent-soft); padding: 6px 13px; border-radius: 100px; font-family: var(--mono); font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .06em; }
  .eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
  h1.headline { font-size: clamp(40px, 5.2vw, 62px); margin: 22px 0 0; font-weight: 600; }
  h1.headline .hl { color: var(--accent); }
  .hero p.sub { font-size: 19px; color: var(--ink-soft); max-width: 30em; margin-top: 20px; }
  .hero-cta { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; }
  .hero-trust { display: flex; align-items: center; gap: 18px; margin-top: 28px; color: var(--ink-soft); font-size: 14px; }
  .hero-trust .stars { color: var(--accent); letter-spacing: 2px; }
  .hero-trust .sep { width: 1px; height: 16px; background: var(--line); }

  /* Dashboard mock */
  .mock {
    background: var(--bg-dark); border-radius: 16px; border: 1px solid var(--line-dark);
    box-shadow: 0 40px 80px -40px rgba(12,14,19,.55), 0 2px 0 rgba(255,255,255,.4) inset;
    overflow: hidden; transform: perspective(1600px) rotateY(-6deg) rotateX(2deg);
  }
  .mock-bar { display: flex; align-items: center; gap: 7px; padding: 12px 14px; border-bottom: 1px solid var(--line-dark); }
  .mock-bar .d { width: 10px; height: 10px; border-radius: 50%; background: #333845; }
  .mock-bar .addr { margin-left: 12px; font-family: var(--mono); font-size: 11px; color: #6b7180; }
  .mock-body { display: grid; grid-template-columns: 140px 1fr; min-height: 360px; }
  .mock-side { border-right: 1px solid var(--line-dark); padding: 16px 12px; display: flex; flex-direction: column; gap: 4px; }
  .mock-side .si { display: flex; align-items: center; gap: 9px; padding: 8px 9px; border-radius: 8px; color: var(--paper-dark); font-size: 12.5px; font-weight: 500; }
  .mock-side .si .ic { width: 14px; height: 14px; border-radius: 4px; background: #2a3040; }
  .mock-side .si.active { background: var(--bg-dark-2); color: #fff; }
  .mock-side .si.active .ic { background: var(--accent); }
  .mock-main { padding: 18px; }
  .mock-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .stat { background: var(--bg-dark-2); border: 1px solid var(--line-dark); border-radius: 10px; padding: 13px; }
  .stat .k { font-family: var(--mono); font-size: 10px; color: #6b7180; text-transform: uppercase; letter-spacing: .06em; }
  .stat .v { font-family: var(--display); font-size: 22px; color: #fff; margin-top: 6px; font-weight: 600; }
  .stat .v .up { font-size: 11px; color: var(--ok); font-family: var(--body); margin-left: 6px; }
  .mock-table { margin-top: 14px; background: var(--bg-dark-2); border: 1px solid var(--line-dark); border-radius: 10px; overflow: hidden; }
  .mock-table .row { display: grid; grid-template-columns: 1.4fr 1fr 0.9fr; align-items: center; padding: 11px 14px; border-bottom: 1px solid var(--line-dark); font-size: 12.5px; color: var(--paper-dark); }
  .mock-table .row:last-child { border-bottom: 0; }
  .mock-table .row.head { color: #6b7180; font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }
  .mock-table .cli { display: flex; align-items: center; gap: 9px; color: #fff; }
  .mock-table .cli .av { width: 22px; height: 22px; border-radius: 6px; background: linear-gradient(135deg, #2a3040, #3a4254); }
  .pill { font-size: 10.5px; font-weight: 600; padding: 3px 9px; border-radius: 100px; display: inline-flex; align-items: center; gap: 5px; }
  .pill::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
  .pill.on { color: var(--ok); background: oklch(0.7 0.15 155 / .14); }
  .pill.sus { color: var(--warn); background: oklch(0.78 0.15 75 / .14); }
  .pill.off { color: var(--accent); background: var(--accent-soft); }

  /* OLT Zyxel highlight */
  .olt-wrap { padding: 56px 0; }
  .olt-band { background: var(--bg-dark); color: #fff; border-radius: 22px; padding: 42px 46px; display: grid; grid-template-columns: 1.55fr 1fr; gap: 44px; align-items: center; position: relative; overflow: hidden; box-shadow: 0 40px 80px -50px rgba(12,14,19,.6); }
  .olt-band::before { content: ""; position: absolute; inset: 0; background: radial-gradient(520px 280px at 88% -20%, var(--accent-soft), transparent 70%); pointer-events: none; }
  .olt-left { position: relative; }
  .olt-tag { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: #fff; background: var(--accent); padding: 6px 12px; border-radius: 100px; font-weight: 600; }
  .olt-band h2 { font-size: clamp(25px, 3.3vw, 37px); margin: 18px 0 0; }
  .olt-band h2 .hl { color: var(--accent); }
  .olt-band > .olt-left > p { color: var(--paper-dark); font-size: 16.5px; margin-top: 14px; max-width: 46ch; }
  .olt-points { display: flex; flex-direction: column; gap: 11px; margin-top: 22px; }
  .olt-points span { display: flex; align-items: center; gap: 11px; color: var(--paper-dark); font-size: 14.5px; }
  .olt-points .ck { flex: 0 0 auto; width: 21px; height: 21px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; }
  .olt-points .ck svg { width: 12px; height: 12px; }
  .olt-right { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; }
  .olt-logochip { background: #fff; border-radius: 16px; padding: 26px 32px; width: 100%; display: grid; place-items: center; min-height: 96px; }
  .olt-logochip img { max-width: 190px; width: 100%; height: auto; display: block; }
  .olt-fallback { display: none; font-family: var(--display); font-weight: 700; font-size: 34px; letter-spacing: 0.02em; color: #ca1f2d; }
  .olt-since { color: #6b7180; }

  /* Logo bar */
  .logos { padding: 40px 0; }
  .logos .lab { text-align: center; color: var(--ink-soft); margin-bottom: 22px; }
  .logo-row { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px 40px; align-items: center; opacity: .85; }
  .logo-row .lg { font-family: var(--display); font-weight: 700; font-size: 18px; color: var(--ink-soft); letter-spacing: -0.01em; display: flex; align-items: center; gap: 7px; }
  .logo-row .lg .b { width: 14px; height: 14px; border-radius: 4px; background: var(--ink-soft); opacity: .5; }

  /* Section frame */
  section.band { padding: 92px 0; }
  .sec-head { max-width: 620px; }
  .sec-head .eyebrow { margin-bottom: 16px; }
  .sec-head h2 { font-size: clamp(30px, 3.6vw, 42px); }
  .sec-head p { color: var(--ink-soft); font-size: 18px; margin-top: 16px; }
  .center { margin-left: auto; margin-right: auto; text-align: center; }
  .center .eyebrow { margin-left: auto; margin-right: auto; }

  /* Features grid */
  .feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 52px; }
  .feat {
    background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 26px;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  }
  .feat:hover { transform: translateY(-3px); box-shadow: 0 20px 40px -28px rgba(20,22,27,.4); border-color: #d6d5cf; }
  .feat .ficon { width: 42px; height: 42px; border-radius: 11px; background: var(--accent-soft); color: var(--accent-ink); display: grid; place-items: center; margin-bottom: 18px; }
  .feat .ficon svg { width: 21px; height: 21px; }
  .feat h3 { font-size: 18.5px; }
  .feat p { color: var(--ink-soft); font-size: 14.5px; margin-top: 9px; }

  /* Showcase rows */
  .show-row { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
  .show-row + .show-row { margin-top: 84px; }
  .show-row.flip .show-txt { order: 2; }
  .show-txt h3 { font-size: clamp(26px, 3vw, 34px); }
  .show-txt p { color: var(--ink-soft); font-size: 17px; margin-top: 14px; }
  .check-list { margin-top: 22px; display: flex; flex-direction: column; gap: 12px; }
  .check-list li { list-style: none; display: flex; gap: 11px; align-items: flex-start; font-size: 15px; }
  .check-list .ck { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-ink); display: grid; place-items: center; margin-top: 1px; }
  .check-list .ck svg { width: 13px; height: 13px; }

  .ph {
    border-radius: var(--r); border: 1px solid var(--line); overflow: hidden; position: relative;
    background:
      repeating-linear-gradient(135deg, var(--paper-2) 0 14px, #e7e6e1 14px 28px);
    aspect-ratio: 4 / 3; display: grid; place-items: center;
  }
  .ph .tag { font-family: var(--mono); font-size: 11px; color: var(--ink-soft); background: var(--paper); padding: 7px 12px; border-radius: 8px; border: 1px solid var(--line); }
  .ph.tall { aspect-ratio: 1 / 1; }

  /* Integrations */
  .integ-band { background: var(--paper-2); }
  .integ-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 44px; }
  .integ {
    background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 20px;
    display: flex; align-items: center; gap: 13px;
  }
  .integ .ib { width: 38px; height: 38px; border-radius: 9px; background: var(--paper-2); display: grid; place-items: center; font-family: var(--display); font-weight: 700; color: var(--ink); flex: 0 0 auto; }
  .integ .it { font-weight: 600; font-size: 14.5px; }
  .integ .is { color: var(--ink-soft); font-size: 12.5px; }

  /* Stats band */
  .stats-band { background: var(--bg-dark); color: #fff; }
  .stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
  .bigstat { text-align: center; }
  .bigstat .n { font-family: var(--display); font-size: clamp(36px, 4.6vw, 54px); font-weight: 600; color: #fff; letter-spacing: -0.03em; }
  .bigstat .n .u { color: var(--accent); }
  .bigstat .l { color: var(--paper-dark); margin-top: 6px; font-size: 14.5px; }

  /* Pricing */
  .price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 52px; align-items: stretch; }
  .plan {
    background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 30px; display: flex; flex-direction: column;
  }
  .plan.feat-plan { background: var(--bg-dark); color: #fff; border-color: var(--bg-dark); position: relative; box-shadow: 0 40px 70px -40px rgba(12,14,19,.6); }
  .plan .pname { font-family: var(--display); font-weight: 600; font-size: 22px; letter-spacing: -0.02em; }
  .plan .pdesc { color: var(--ink-soft); font-size: 13.5px; margin-top: 6px; min-height: 38px; }
  .plan.feat-plan .pdesc { color: var(--paper-dark); }
  .plan .price { margin-top: 18px; display: flex; align-items: baseline; gap: 6px; }
  .plan .price .amt { font-family: var(--display); font-size: 42px; font-weight: 600; letter-spacing: -0.03em; }
  .plan .price .per { color: var(--ink-soft); font-size: 13.5px; }
  .plan.feat-plan .price .per { color: var(--paper-dark); }
  .plan .badge { position: absolute; top: 22px; right: 22px; font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: #fff; background: var(--accent); padding: 5px 10px; border-radius: 100px; }
  .plan .btn { width: 100%; justify-content: center; margin-top: 22px; }
  .plan ul { list-style: none; margin-top: 24px; display: flex; flex-direction: column; gap: 12px; }
  .plan ul li { display: flex; gap: 10px; font-size: 14px; color: var(--ink-soft); align-items: flex-start; }
  .plan.feat-plan ul li { color: var(--paper-dark); }
  .plan ul li .ck { flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-ink); display: grid; place-items: center; margin-top: 1px; }
  .plan.feat-plan ul li .ck { background: rgba(255,255,255,.12); color: #fff; }
  .plan ul li .ck svg { width: 11px; height: 11px; }

  /* Testimonial */
  .quote-band { background: var(--paper-2); }
  .quote { max-width: 840px; margin: 0 auto; text-align: center; }
  .quote blockquote { font-family: var(--display); font-size: clamp(24px, 3vw, 34px); font-weight: 500; letter-spacing: -0.02em; line-height: 1.25; }
  .quote blockquote .hl { color: var(--accent); }
  .quote .who { display: flex; align-items: center; justify-content: center; gap: 13px; margin-top: 28px; }
  .quote .who .av { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, #d8d6cf, #c2c0b8); }
  .quote .who .nm { font-weight: 700; }
  .quote .who .rl { color: var(--ink-soft); font-size: 13.5px; }

  /* FAQ */
  .faq-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 32px; margin-top: 48px; }
  details.faq { border-bottom: 1px solid var(--line); padding: 18px 0; }
  details.faq summary { cursor: pointer; list-style: none; font-family: var(--display); font-weight: 600; font-size: 17px; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
  details.faq summary::-webkit-details-marker { display: none; }
  details.faq summary .pm { width: 22px; height: 22px; flex: 0 0 auto; position: relative; }
  details.faq summary .pm::before, details.faq summary .pm::after { content: ""; position: absolute; background: var(--accent); border-radius: 2px; transition: transform .2s ease; }
  details.faq summary .pm::before { width: 14px; height: 2px; top: 10px; left: 4px; }
  details.faq summary .pm::after { width: 2px; height: 14px; top: 4px; left: 10px; }
  details.faq[open] summary .pm::after { transform: scaleY(0); }
  details.faq p { color: var(--ink-soft); font-size: 14.5px; margin-top: 12px; max-width: 44ch; }

  /* Final CTA */
  .cta-band { background: var(--bg-dark); color: #fff; position: relative; overflow: hidden; }
  .cta-band::before { content: ""; position: absolute; inset: 0; background: radial-gradient(600px 300px at 70% -10%, var(--accent-soft), transparent 70%); pointer-events: none; }
  .cta-inner { text-align: center; position: relative; }
  .cta-inner h2 { font-size: clamp(34px, 4.4vw, 52px); }
  .cta-inner p { color: var(--paper-dark); font-size: 18px; margin-top: 16px; max-width: 32em; margin-left: auto; margin-right: auto; }
  .cta-inner .hero-cta { justify-content: center; }
  .cta-note { color: #6b7180; font-size: 13px; margin-top: 18px; font-family: var(--mono); letter-spacing: .03em; }

  /* Footer */
  footer.foot { background: var(--bg-dark); color: var(--paper-dark); border-top: 1px solid var(--line-dark); padding: 56px 0 40px; }
  .foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; }
  .foot .brand { color: #fff; margin-bottom: 14px; }
  .foot p.fd { font-size: 13.5px; max-width: 26em; }
  .foot h4 { font-family: var(--display); color: #fff; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 16px; font-weight: 600; }
  .foot ul { list-style: none; display: flex; flex-direction: column; gap: 11px; }
  .foot ul a { font-size: 14px; color: var(--paper-dark); }
  .foot ul a:hover { color: #fff; }
  .foot-base { display: flex; justify-content: space-between; align-items: center; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line-dark); font-size: 13px; flex-wrap: wrap; gap: 12px; }

  @media (max-width: 980px) {
    .hero-grid, .show-row, .show-row.flip .show-txt { grid-template-columns: 1fr; order: 0; }
    .mock { transform: none; }
    .feat-grid, .price-grid, .stats-row, .integ-grid { grid-template-columns: repeat(2, 1fr); }
    .faq-grid { grid-template-columns: 1fr; }
    .foot-grid { grid-template-columns: 1fr 1fr; }
    .nav-links { display: none; }
    .show-row.flip .show-img { order: -1; }
  }
  /* Brand logo */
  .rdf-logo { height: 26px; width: auto; display: block; }
  header.nav .rdf-logo { height: 30px; }
  .rdf-logo .st0 { fill: var(--accent); }
  .rdf-logo .st1 { fill: currentColor; }
  header.nav .brand { color: var(--ink); }
  .foot .brand .rdf-logo { height: 40px; }
  .cta-band .rdf-logo .st1 { fill: #fff; }

  @media (max-width: 560px) {
    .feat-grid, .price-grid, .stats-row, .integ-grid, .foot-grid { grid-template-columns: 1fr; }
    .hero { padding: 52px 0; }
    section.band { padding: 64px 0; }
    .mock-side { display: none; }
    .mock-body { grid-template-columns: 1fr; }
  }

  /* ═══════════════ Mejoras visuales y de accesibilidad ═══════════════ */

  /* Botón rojo a tono accesible (AA) + variantes de marca */
  .btn-primary, .olt-tag, .plan .badge { background: var(--accent-btn); }
  .btn-primary:hover { background: var(--accent); }

  /* Foco visible de marca para teclado (WCAG 2.4.7) */
  :where(a, button, summary, input, textarea, .btn, .nav-burger):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
  .feat-plan a:focus-visible, .cta-band a:focus-visible, .olt-band a:focus-visible { outline-color: #fff; }

  /* Selección de texto de marca */
  ::selection { background: var(--accent-soft); color: var(--accent-ink); }

  /* Cifras alineadas (tabular) en KPIs, precios y tablas */
  .stat .v, .bigstat .n, .price .amt, .mock-table .row { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }

  /* Labels mono sobre fondos oscuros, legibles (AA) */
  .mock-bar .addr, .stat .k, .mock-table .row.head, .cta-note, .olt-since { color: var(--mono-dark); }
  .nav-links a.cur { color: var(--accent-text); }

  /* Texto del nav/footer con indicación no cromática al hover/focus */
  .nav-links a { transition: color .15s ease; }
  .nav-links a:hover, .nav-links a:focus-visible, .foot ul a:hover, .foot ul a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }

  /* Hover en elementos que el ojo lee como interactivos */
  .integ { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
  .integ:hover { transform: translateY(-2px); border-color: #d6d5cf; box-shadow: 0 14px 30px -22px rgba(20,22,27,.4); }
  details.faq summary { transition: color .18s ease; }
  details.faq summary:hover { color: var(--accent-ink); }

  /* FAQ: el icono + se convierte en × al abrir y el contenido entra suave */
  details.faq summary .pm::before, details.faq summary .pm::after { transition: transform .25s ease; }
  details.faq summary .pm { transition: transform .25s ease; }
  details.faq[open] summary .pm { transform: rotate(45deg); }
  details.faq[open] summary .pm::after { transform: none; }
  details.faq[open] p { animation: faqIn .25s ease; }
  @keyframes faqIn { from { opacity: 0; transform: translateY(-4px); } }

  /* Mock 3D del hero: se endereza levemente al hover */
  .mock { transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s ease; }
  .hero-img:hover .mock { transform: perspective(1600px) rotateY(-3deg) rotateX(1deg) translateY(-4px); }

  /* Mocks de consola dentro del showcase (sin tilt) */
  .mock--flat { transform: none; box-shadow: var(--sh-3); }
  .mock-pane { padding: 15px; display: grid; gap: 12px; }
  .show-phone { display: block; width: 100%; max-width: 330px; height: auto; margin: 0 auto; }

  /* Chip de partner (OLT) y banda de logos más sólidos */
  .olt-logochip { min-height: 76px; padding: 22px 28px; }
  .olt-fallback { color: var(--accent-ink); font-size: 30px; letter-spacing: .14em; }
  .logo-row { opacity: 1; }
  .logo-row .lg { color: var(--ink); opacity: .55; filter: grayscale(1); transition: opacity .2s ease, filter .2s ease; }
  .logo-row .lg:hover { opacity: 1; filter: none; }
  .logo-row .lg .b { background: var(--accent); opacity: .8; border-radius: 5px; }

  /* Anclas no tapadas por el nav sticky */
  section[id] { scroll-margin-top: 88px; }

  /* Banda de cifras menos hueca y footer diferenciado de la CTA */
  .stats-band { padding: 72px 0; }
  .stats-row { gap: 28px 40px; }
  footer.foot { background: var(--bg-dark-2); box-shadow: 0 1px 0 rgba(255,255,255,.04) inset; }

  /* Comilla decorativa del testimonio */
  .quote blockquote { position: relative; }

  /* Textura de papel sutil (la identidad editorial) */
  body { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E"); background-attachment: fixed; }

  /* Reveal on scroll (lo activa el JS; degrada visible sin JS) */
  .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
  .reveal.in { opacity: 1; transform: none; }

  /* Navegación móvil: hamburguesa */
  .nav-burger { display: none; background: none; border: 0; cursor: pointer; align-items: center; justify-content: center; }
  .nav-burger span, .nav-burger span::before, .nav-burger span::after { content: ""; display: block; position: relative; width: 20px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .22s ease, opacity .22s ease; }
  .nav-burger span::before, .nav-burger span::after { position: absolute; left: 0; }
  .nav-burger span::before { top: -6px; } .nav-burger span::after { top: 6px; }
  .nav-inner.open .nav-burger span { background: transparent; }
  .nav-inner.open .nav-burger span::before { transform: translateY(6px) rotate(45deg); }
  .nav-inner.open .nav-burger span::after { transform: translateY(-6px) rotate(-45deg); }

  @media (min-width: 561px) and (max-width: 980px) {
    section.band { padding: 76px 0; }
    .show-row + .show-row { margin-top: 64px; }
  }
  @media (max-width: 980px) {
    .nav-burger { display: inline-flex; width: 44px; height: 44px; }
    .nav-links { display: none; position: absolute; top: 68px; left: 0; right: 0; flex-direction: column; gap: 0; background: var(--paper); border-bottom: 1px solid var(--line); padding: 6px 28px 14px; box-shadow: 0 22px 40px -28px rgba(20,22,27,.35); }
    .nav-inner.open .nav-links { display: flex; }
    .nav-links a { padding: 14px 2px; font-size: 16px; border-bottom: 1px solid var(--line); }
    .nav-links a:last-child { border-bottom: 0; }
  }
  @media (max-width: 560px) {
    .nav-cta .btn { padding: 11px 16px; min-height: 44px; }
    .nav-cta .btn-ghost { display: none; }
    .mock-table .row { grid-template-columns: 1.3fr 0.9fr 0.8fr; padding: 9px 11px; font-size: 11.5px; }
  }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    .reveal { opacity: 1 !important; transform: none !important; }
  }