/* Landing público (app/views/landing) — sistema de diseño propio del rediseño
   ago 2026. Tokens `lp-*` (autoría en oklch, ver README del diseño); viven en
   @theme para tener utilities reales (bg-lp-paper, text-lp-body, font-lp-mono…)
   sin pisar la paleta `--color-paper`/`--color-ink` que usan portal y admin.

   Todo lo que no es token va escopado bajo `#landing` (el body del landing):
   los alias legacy (--paper, --ink, --green-ink, …) se re-mapean ahí para que
   el widget del teléfono del hero — que conserva su markup y su CSS de antes —
   herede la paleta nueva sin tocarlo. */

@theme {
  /* superficies */
  --color-lp-paper:      oklch(0.975 0.004 150);
  --color-lp-paper-alt:  oklch(0.955 0.006 150);
  --color-lp-ink:        oklch(0.22 0.03 158);
  --color-lp-ink-strong: oklch(0.28 0.05 158); /* verde tinta: botones, logo */
  --color-lp-ink-deep:   oklch(0.24 0.04 158); /* fondo sección oscura */

  /* verdes */
  --color-lp-accent: oklch(0.55 0.12 150); /* etiquetas mono, numeración */
  --color-lp-hover:  oklch(0.40 0.09 155); /* hover del botón primario */
  --color-lp-link:   oklch(0.50 0.11 150); /* hover de links */

  /* burbujas de chat */
  --color-lp-bubble-user: oklch(0.90 0.05 155);
  --color-lp-bubble-bot:  oklch(1 0 0);

  /* líneas */
  --color-lp-line:        oklch(0.88 0.01 150);
  --color-lp-line-chip:   oklch(0.86 0.02 150);
  --color-lp-line-dashed: oklch(0.75 0.03 150);
  --color-lp-line-dark:   oklch(0.36 0.04 158);

  /* texto */
  --color-lp-body:    oklch(0.40 0.02 155);
  --color-lp-muted:   oklch(0.50 0.01 150);
  --color-lp-muted-2: oklch(0.55 0.01 150);

  /* sobre fondo oscuro */
  --color-lp-on-dark:        oklch(0.95 0.01 150);
  --color-lp-on-dark-muted:  oklch(0.82 0.02 155);
  --color-lp-on-dark-accent: oklch(0.78 0.14 150);

  /* tipografía */
  --font-lp-sans: "Instrument Sans", system-ui, sans-serif;
  --font-lp-mono: "IBM Plex Mono", ui-monospace, monospace;

  /* única sombra del sistema */
  --shadow-lp: 0 1px 2px oklch(0.45 0.01 150 / 0.07);
}

@keyframes lpTypingBlink {
  0%, 60%, 100% { opacity: .25; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-2px); }
}

@layer components {
  #landing {
    /* Alias legacy → paleta nueva. El widget del teléfono (abajo) y el bloque
       de alta se escribieron contra estos nombres; re-mapearlos aquí es lo que
       les cambia la piel sin tocar su markup. */
    --paper:      var(--color-lp-paper);
    --paper-2:    var(--color-lp-paper-alt);
    --paper-3:    var(--color-lp-paper-alt);
    --ink:        var(--color-lp-ink);
    --ink-2:      var(--color-lp-body);
    --ink-3:      var(--color-lp-muted);
    --rule:       var(--color-lp-line);
    --rule-2:     var(--color-lp-line-chip);
    --green:      var(--color-lp-accent);
    --green-soft: var(--color-lp-bubble-user);
    --green-ink:  var(--color-lp-ink-strong);
    --bubble-in:  var(--color-lp-bubble-bot);
    --bubble-out: var(--color-lp-bubble-user);
    --sans:       var(--font-lp-sans);
    --serif:      var(--font-lp-sans);
    --mono:       var(--font-lp-mono);

    /* ── átomos del sistema ─────────────────────────────────── */

    /* etiqueta mono uppercase (el color lo pone el markup) */
    .lp-eyebrow {
      font-family: var(--font-lp-mono);
      font-size: 10.5px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    /* h2 de sección (el max-width lo pone el markup) */
    .lp-h2 {
      margin: 0;
      font-weight: 600;
      font-size: 33px;
      line-height: 1.02;
      letter-spacing: -0.03em;
      text-wrap: balance;
    }

    /* botón primario ("Abrir en WhatsApp") */
    .lp-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      background: var(--color-lp-ink-strong);
      color: var(--color-lp-paper);
      font-weight: 600;
      font-size: 17.5px;
      padding: 16px 24px;
      border-radius: 3px;
      text-decoration: none;
      cursor: pointer;
      transition: background 180ms, transform 180ms cubic-bezier(.2,.7,.3,1);
    }
    .lp-btn:hover { background: var(--color-lp-hover); color: var(--color-lp-paper); transform: translateY(-2px); }
    .lp-btn:active { background: var(--color-lp-hover); transform: translateY(0); }

    /* variante secundaria ("Continuar por la web") — el padding compensa el
       borde para calzar en altura con el primario; font-family porque aquí
       el elemento es un <button> */
    .lp-btn-ghost {
      background: transparent;
      color: var(--color-lp-ink);
      border: 1px solid var(--color-lp-line-chip);
      padding: 15px 24px;
      font-family: inherit;
      font-weight: 500;
    }
    .lp-btn-ghost:hover, .lp-btn-ghost:active {
      background: var(--color-lp-paper-alt);
      color: var(--color-lp-ink);
      border-color: var(--color-lp-ink);
    }

    /* chips de rubro */
    .lp-chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      border: 1px solid var(--color-lp-line-chip);
      background: var(--color-lp-paper);
      padding: 7px 11px;
      border-radius: 3px;
      font-size: 13.5px;
    }
    .lp-chip-dashed {
      border: 1px dashed var(--color-lp-line-dashed);
      background: transparent;
      color: var(--color-lp-body);
    }

    /* chips seleccionables de "Para quién" + su caso (whoCases en landing.ts) */
    button.who-chip {
      font: inherit;
      color: var(--color-lp-ink);
      cursor: pointer;
      transition: background .15s, border-color .15s, color .15s;
    }
    button.who-chip:hover { border-color: var(--color-lp-ink-strong); }
    button.who-chip.active {
      background: var(--color-lp-ink-strong);
      border-color: var(--color-lp-ink-strong);
      border-style: solid;
      color: var(--color-lp-paper);
    }
    .who-case { display: none; }
    .who-case.active { display: block; }

    /* icono de los pasos de "Cómo funciona" */
    .lp-ico {
      display: grid;
      place-items: center;
      width: 40px;
      height: 40px;
      border: 1px solid var(--color-lp-line-chip);
      border-radius: 3px;
      color: var(--color-lp-ink-strong);
      background: var(--color-lp-paper);
    }

    /* burbujas estáticas de las secciones (las del teléfono son .bubble) */
    .lp-bubble-user {
      background: var(--color-lp-bubble-user);
      padding: 11px 14px;
      border-radius: 12px 12px 3px 12px;
      font-size: 14.5px;
      line-height: 1.45;
    }
    .lp-bubble-bot {
      background: var(--color-lp-bubble-bot);
      box-shadow: var(--shadow-lp);
      padding: 12px 14px;
      border-radius: 12px 12px 12px 3px;
      font-size: 14.5px;
      line-height: 1.5;
    }

    /* ── FAQ (acordeón nativo) ──────────────────────────────── */
    summary { list-style: none; cursor: pointer; }
    summary::marker { content: ""; }
    summary::-webkit-details-marker { display: none; }

    .lp-faq details { border-top: 1px solid var(--color-lp-line); }
    .lp-faq details:last-of-type { border-bottom: 1px solid var(--color-lp-line); }
    .lp-faq summary {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 16px;
      padding: 18px 0;
      font-weight: 600;
      font-size: 17.5px;
      letter-spacing: -0.015em;
    }
    .lp-faq summary:hover { color: var(--color-lp-link); }
    .lp-faq summary::after {
      content: '+';
      font-family: var(--font-lp-mono);
      font-size: 17px;
      font-weight: 400;
      color: var(--color-lp-accent);
    }
    .lp-faq details[open] > summary::after { content: '\2212'; }
    .lp-faq details p {
      margin: 0;
      max-width: 68ch;
      font-size: 15.5px;
      line-height: 1.55;
      color: var(--color-lp-body);
      padding-bottom: 18px;
    }

    /* ── bloque de alta (_signup_form / _email_signup) ──────── */
    .form { display: flex; flex-direction: column; gap: 8px; max-width: 460px; }
    .form input[type="email"], .form input[type="text"], .form input[type="tel"] {
      flex: 1;
      padding: 13px 15px;
      border-radius: 3px;
      border: 1px solid var(--color-lp-line-chip);
      background: var(--color-lp-paper);
      font: inherit;
      font-size: 15px;
      color: var(--color-lp-ink);
      outline: none;
      transition: border-color .15s, box-shadow .15s;
    }
    .form input::placeholder { color: var(--color-lp-muted); }
    .form input[type="email"]:focus, .form input[type="text"]:focus, .form input[type="tel"]:focus {
      border-color: var(--color-lp-ink-strong);
      box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-lp-accent) 20%, transparent);
    }
    .form input.error, .form .dial-select.error { border-color: var(--color-orange); }
    .form .phone-row { display: flex; gap: 8px; }
    .form .phone-row input[type="tel"] { flex: 1; min-width: 0; }
    .form .dial-select {
      flex: 0 0 auto;
      padding: 13px 8px;
      border-radius: 3px;
      border: 1px solid var(--color-lp-line-chip);
      background: var(--color-lp-paper);
      font: inherit;
      font-size: 15px;
      color: var(--color-lp-ink);
      cursor: pointer;
    }
    .form button, .form input[type="submit"] {
      padding: 14px 20px;
      border-radius: 3px;
      border: none;
      background: var(--color-lp-ink-strong);
      color: var(--color-lp-paper);
      font: inherit;
      font-size: 15px;
      font-weight: 600;
      cursor: pointer;
      white-space: nowrap;
      transition: background 180ms, transform 180ms cubic-bezier(.2,.7,.3,1);
    }
    .form button:hover, .form input[type="submit"]:hover { background: var(--color-lp-hover); transform: translateY(-1px); }
    .form button:active, .form input[type="submit"]:active { transform: translateY(0); }
    /* Honeypot: invisible para personas, irresistible para bots que rellenan
       todo campo con nombre plausible. No usar display:none — algunos bots lo
       detectan y lo saltan. */
    .hp-field {
      position: absolute; left: -9999px; width: 1px; height: 1px;
      overflow: hidden; opacity: 0; pointer-events: none;
    }
    .form-meta {
      margin-top: 10px;
      font-family: var(--font-lp-mono);
      font-size: 12px;
      color: var(--color-lp-muted);
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .form-meta::before { content: ""; width: 14px; height: 1px; background: var(--color-lp-muted); display: inline-block; }
    .form-error { margin-top: 12px; font-family: var(--font-lp-mono); font-size: 12px; color: var(--color-orange); }
    .form-error a { color: var(--color-lp-ink); text-decoration: underline; }
    .form-legal { margin-top: 8px; max-width: 460px; font-size: 12px; line-height: 1.5; color: var(--color-lp-muted); }
    .form-legal a { color: var(--color-lp-body); text-decoration: underline; }
    .cta-bar-legal { margin: 6px 0 0; font-size: 11px; line-height: 1.4; text-align: center; color: var(--color-lp-muted); }
    .cta-bar-legal a { color: var(--color-lp-body); text-decoration: underline; }
    .gauth { margin: 0; max-width: 460px; }
    .gbtn {
      width: 100%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 13px 20px;
      border-radius: 3px;
      border: 1px solid var(--color-lp-line-chip);
      background: var(--color-lp-paper);
      color: var(--color-lp-ink);
      font: inherit;
      font-size: 15px;
      font-weight: 500;
      cursor: pointer;
      transition: border-color .15s, transform .08s;
    }
    .gbtn:hover { border-color: var(--color-lp-ink-strong); transform: translateY(-1px); }
    .gbtn:active { transform: translateY(0); }
    .gbtn-ico { flex-shrink: 0; }
    .or-sep {
      display: flex;
      align-items: center;
      gap: 12px;
      max-width: 460px;
      margin-top: 14px;
      font-family: var(--font-lp-mono);
      font-size: 11px;
      color: var(--color-lp-muted);
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }
    .or-sep::before, .or-sep::after { content: ""; flex: 1; height: 1px; background: var(--color-lp-line); }
    .or-sep + .form { margin-top: 12px; }
    /* modal del formulario web ("Continuar por la web") */
    .web-signup-modal {
      margin: auto;
      width: min(480px, calc(100vw - 32px));
      border: 1px solid var(--color-lp-line);
      border-radius: 3px;
      background: var(--color-lp-paper);
      color: var(--color-lp-ink);
      padding: 0;
      box-shadow: var(--shadow-lp);
    }
    .web-signup-modal::backdrop { background: oklch(0.22 0.03 158 / 0.5); }
    /* el padding vive en la tarjeta: así un click dentro del borde nunca es
       "backdrop" (landing.ts cierra cuando el target es el dialog mismo) */
    .modal-card { padding: 22px; }
    .modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
    .modal-title { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
    .modal-close {
      background: none;
      border: 0;
      padding: 2px 6px;
      cursor: pointer;
      font-size: 24px;
      line-height: 1;
      color: var(--color-lp-muted);
    }
    .modal-close:hover { color: var(--color-lp-ink); }
    /* modal abierto = fondo congelado (#landing es el body) */
    &:has(.web-signup-modal[open]) { overflow: hidden; }
    .success {
      padding: 16px 18px;
      border-radius: 3px;
      background: var(--color-lp-bubble-user);
      border: 1px solid color-mix(in oklab, var(--color-lp-accent) 40%, var(--color-lp-line));
      color: var(--color-lp-ink-strong);
      font-size: 15px;
      line-height: 1.45;
      max-width: 460px;
    }
    .success strong { display: block; margin-bottom: 4px; }

    /* ── widget del teléfono del hero (conservado del landing anterior;
          colores vía los alias re-mapeados arriba) ───────────── */
    .phone-wrap { position: relative; display: grid; place-items: center; }
    .phone {
      width: 340px;
      max-width: 100%;
      background: #0d0c0a;
      border-radius: 44px;
      padding: 8px;
      box-shadow:
        0 1px 0 rgba(255,255,255,.04) inset,
        0 30px 60px -20px oklch(0.22 0.03 158 / 0.35),
        0 8px 20px -10px oklch(0.22 0.03 158 / 0.25);
    }
    .phone-screen {
      background: var(--color-lp-paper-alt);
      background-image: linear-gradient(180deg, oklch(0.95 0.012 150), oklch(0.9 0.018 150));
      border-radius: 36px;
      overflow: hidden;
      aspect-ratio: 9 / 19.2;
      position: relative;
      display: flex;
      flex-direction: column;
    }
    .phone-status {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 14px 24px 6px;
      font-family: var(--font-lp-mono);
      font-size: 11px;
      color: rgba(0,0,0,.7);
    }
    .chat-header {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 16px 12px;
      background: var(--color-lp-ink-strong);
      color: white;
    }
    .chat-header .back { font-size: 18px; opacity: .8; }
    .chat-avatar {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: var(--color-lp-paper);
      color: var(--color-lp-ink-strong);
      display: grid;
      place-items: center;
      font-size: 18px;
      font-weight: 700;
    }
    .chat-name { font-weight: 600; font-size: 14px; line-height: 1.1; }
    .chat-status { font-size: 11px; opacity: .85; line-height: 1.1; }
    .chat-body {
      flex: 1;
      overflow: hidden;
      position: relative;
      font-size: 13.5px;
      color: var(--color-lp-ink);
    }
    .bubble {
      max-width: 82%;
      padding: 8px 11px 18px;
      border-radius: 10px;
      position: relative;
      line-height: 1.35;
      box-shadow: 0 1px 0 rgba(0,0,0,.05);
    }
    .bubble.in { align-self: flex-start; background: var(--color-lp-bubble-bot); border-top-left-radius: 2px; }
    .bubble.out { align-self: flex-end; background: var(--color-lp-bubble-user); border-top-right-radius: 2px; }
    .bubble .time {
      position: absolute;
      right: 8px;
      bottom: 4px;
      font-family: var(--font-lp-mono);
      font-size: 9px;
      color: var(--color-lp-muted);
    }
    .bubble.out .time::after { content: " ✓✓"; color: var(--color-lp-accent); }

    .card {
      background: var(--color-lp-bubble-bot);
      border: none;
      border-radius: 10px;
      border-top-left-radius: 2px;
      padding: 10px 12px 6px;
      align-self: flex-start;
      max-width: 86%;
      box-shadow: 0 1px 0 rgba(0,0,0,.05);
    }
    .card-head {
      display: flex;
      align-items: center;
      gap: 6px;
      font-family: var(--font-lp-mono);
      font-size: 10px;
      color: var(--color-lp-ink-strong);
      text-transform: uppercase;
      letter-spacing: 0.04em;
      margin-bottom: 8px;
    }
    .card-head::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--color-lp-accent); }
    .card-row {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      padding: 4px 0;
      border-bottom: 1px dashed var(--color-lp-line);
      font-size: 12.5px;
    }
    .card-row:last-of-type { border-bottom: none; }
    .card-row .k { color: var(--color-lp-muted); font-family: var(--font-lp-mono); font-size: 10.5px; text-transform: uppercase; }
    .card-row .v { color: var(--color-lp-ink); font-weight: 500; }
    .card-row .v.amt { color: var(--color-lp-ink-strong); font-family: var(--font-lp-mono); font-weight: 500; }
    .card-foot {
      margin-top: 8px;
      padding-top: 8px;
      border-top: 1px solid var(--color-lp-line);
      font-size: 12px;
      color: var(--color-lp-body);
    }
    .card-time { font-family: var(--font-lp-mono); font-size: 9px; color: var(--color-lp-muted); text-align: right; margin-top: 4px; }

    /* escenas animadas (rotan dentro del teléfono — landing.ts) */
    .scene {
      position: absolute;
      inset: 0;
      padding: 14px 12px 28px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      opacity: 0;
      pointer-events: none;
      transition: opacity .35s ease;
    }
    .scene.active { opacity: 1; }
    .scene > * {
      opacity: 0;
      transform: translateY(12px);
      transition: opacity .35s ease, transform .35s ease;
    }
    .scene.active > * { opacity: 1; transform: translateY(0); }
    .scene.active > *:nth-child(2) { transition-delay: 1.6s; }
    .scene.active > *:nth-child(3) { transition-delay: 3.2s; }
    .scene.active > *:nth-child(4) { transition-delay: 4.8s; }

    .bubble.typing {
      padding: 12px 14px;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      width: max-content;
      min-width: 0;
      align-self: flex-start;
    }
    .bubble.typing i {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--color-lp-muted);
      display: inline-block;
      animation: lpTypingBlink 1.2s infinite;
    }
    .bubble.typing i:nth-child(2) { animation-delay: .15s; }
    .bubble.typing i:nth-child(3) { animation-delay: .3s; }

    .pipe {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin-top: 6px;
      font-family: var(--font-lp-mono);
      font-size: 11px;
    }
    .pipe span { padding: 2px 8px; border-radius: 4px; }
    .pipe .from {
      background: var(--color-lp-paper-alt);
      color: var(--color-lp-body);
      text-decoration: line-through;
      text-decoration-color: var(--color-lp-muted);
    }
    .pipe .to { background: var(--color-lp-bubble-user); color: var(--color-lp-ink-strong); font-weight: 500; }
    .pipe .arrow { color: var(--color-lp-muted); }

    .stage {
      display: inline-block;
      margin-left: 6px;
      padding: 1px 8px;
      border-radius: 999px;
      font-family: var(--font-lp-mono);
      font-size: 10px;
      background: var(--color-lp-bubble-user);
      color: var(--color-lp-ink-strong);
    }

    .audio { display: inline-flex; align-items: center; gap: 8px; padding: 2px 4px; }
    .audio .play {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: var(--color-lp-ink-strong);
      color: #fff;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 10px;
      padding-left: 2px;
    }
    .audio .wave { display: inline-flex; align-items: center; gap: 2px; height: 18px; }
    .audio .wave i { width: 2px; border-radius: 1px; background: var(--color-lp-muted); display: inline-block; }
    .audio .wave i:nth-child(1) { height: 6px; }
    .audio .wave i:nth-child(2) { height: 11px; }
    .audio .wave i:nth-child(3) { height: 14px; background: var(--color-lp-body); }
    .audio .wave i:nth-child(4) { height: 9px; }
    .audio .wave i:nth-child(5) { height: 16px; background: var(--color-lp-body); }
    .audio .wave i:nth-child(6) { height: 12px; }
    .audio .wave i:nth-child(7) { height: 7px; }
    .audio .wave i:nth-child(8) { height: 13px; }
    .audio .wave i:nth-child(9) { height: 5px; }
    .audio .wave i:nth-child(10) { height: 10px; }
    .audio .wave i:nth-child(11) { height: 15px; background: var(--color-lp-body); }
    .audio .wave i:nth-child(12) { height: 8px; }
    .audio .wave i:nth-child(13) { height: 11px; }
    .audio .wave i:nth-child(14) { height: 6px; }
    .audio .dur { font-family: var(--font-lp-mono); font-size: 10px; color: var(--color-lp-body); }

    .opts { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
    .opt {
      padding: 7px 10px;
      background: var(--color-lp-paper-alt);
      border-radius: 6px;
      font-size: 12px;
      color: var(--color-lp-ink);
      border: 1px solid rgba(0,0,0,.04);
    }

    .scene-bar {
      position: absolute;
      bottom: 8px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      gap: 5px;
      z-index: 5;
      padding: 5px 10px;
      background: rgba(255,255,255,.55);
      border-radius: 999px;
      backdrop-filter: blur(4px);
    }
    .scene-bar i {
      width: 14px;
      height: 3px;
      border-radius: 2px;
      background: rgba(0,0,0,.18);
      transition: background .3s, width .3s;
      display: inline-block;
    }
    .scene-bar i.on { background: var(--color-lp-ink-strong); width: 22px; }

    /* notas pegadas alrededor del teléfono (solo desktop) */
    .lp-note {
      position: absolute;
      display: none;
      z-index: 2;
      background: var(--color-lp-bubble-user);
      padding: 12px 14px;
      font-style: italic;
      font-size: 15px;
      color: var(--color-lp-ink);
      line-height: 1.3;
      box-shadow: 4px 4px 0 oklch(0.22 0.03 158 / 0.08);
      border-radius: 2px;
      max-width: 180px;
    }
    .lp-note .lbl {
      display: block;
      font-family: var(--font-lp-mono);
      font-size: 9px;
      font-style: normal;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--color-lp-muted);
      margin-bottom: 4px;
    }
    .lp-note-tl { top: 16px; left: -8px; transform: rotate(-4deg); }
    .lp-note-br { bottom: 24px; right: -16px; transform: rotate(3deg); background: var(--color-lp-paper); }

    /* barra CTA fija de mobile (_cta_bar): nace oculta y landing.ts la
       muestra recién cuando el CTA del hero sale de pantalla. La visibility
       transiciona junto al transform para sacarla del orden de tabulación
       mientras está escondida. */
    .cta-bar {
      visibility: hidden;
      transform: translateY(100%);
      transition: transform .25s ease, visibility .25s;
    }
    .cta-bar.visible {
      visibility: visible;
      transform: translateY(0);
    }

    /* ── escala desktop ─────────────────────────────────────── */
    @media (min-width: 1024px) {
      .lp-eyebrow { font-size: 11px; }
      .lp-h2 { font-size: 52px; line-height: 1; letter-spacing: -0.035em; }
      .lp-btn { font-size: 18px; padding: 18px 28px; }
      .lp-btn-ghost { padding: 17px 28px; }
      .lp-chip { padding: 8px 13px; font-size: 14.5px; }
      .lp-faq summary { padding: 24px 0; font-size: 21px; letter-spacing: -0.02em; }
      .lp-faq summary::after { font-size: 18px; }
      .lp-faq details p { font-size: 17px; line-height: 1.6; padding-bottom: 24px; }
      .phone { transform: rotate(-1.2deg); }
      .lp-note { display: block; }
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  #landing .lp-btn, #landing .form button, #landing .form input[type="submit"] { transition: none; transform: none; }
  #landing .scene { transition: none; }
  #landing .cta-bar { transition: none; }
  #landing .scene > * { transition: none; transition-delay: 0s !important; }
  #landing .bubble.typing i { animation: none; }
}