.ral-overlay{
    --ease-out:cubic-bezier(.16,1,.3,1);   /* entradas */
    --ease-fast:cubic-bezier(.25,.46,.45,.94); /* interacción, el par dominante */
    --ease-snap:cubic-bezier(.23,1,.32,1);
    --dur-enter:620ms;
    --dur-fast:180ms;
    --dur-snap:140ms;

    /* ── Paleta "Tinta y sol" ───────────────────────────────────────────────
     * Los MISMOS valores que el tema `crema` de globals.css y que /metodo y
     * /pulse. Acá van como literales y no como los canales `--c-*` del app
     * porque esta página no la toca ningún bundler y no tiene temas: es
     * siempre crema. Si un valor cambia en globals.css, cambiarlo acá.
     *
     * La regla que hace que esto no se rompa: el vermellón tiene DOS tonos y
     * no son intercambiables. `--ink-accent` (#B23A16) es el que pasa 4,5:1
     * sobre la crema y es el único válido para texto y puntos en el cuerpo de
     * la página; `--accent-bright` (#F0562A) es para lo que va sobre oscuro —
     * en esta página, sólo el héroe. Usar el profundo sobre el video lo apaga
     * a un marrón, y el vivo sobre la crema no llega al contraste mínimo. */
    --paper:#E9E7DC;          /* fondo de la página */
    --paper-card:#FCFBF6;     /* papel de panel/modal, más claro que la página */
    --ink:#212121;            /* titulares, remate */
    --ink-2:#3E3C36;          /* texto de énfasis dentro del cuerpo */
    --ink-body:#59564F;       /* cuerpo, primera línea de titular */
    --ink-dim:#646057;        /* kickers mono, footer */
    --ink-faint:#979388;      /* placeholders */
    --line:#DBD7CA;           /* borde de UI (pills, inputs) */
    --line-soft:#E5E2D7;      /* filete de sección */
    --ink-accent:#B23A16;     /* vermellón profundo — texto/puntos SOBRE crema */
    --accent-line:#C8431A;    /* anillo de foco */
    --accent-bright:#F0562A;  /* vermellón vivo — SÓLO sobre el video del héroe */
    --cta:#21395B;            /* tinta azul: la superficie del CTA */
    --cta-hover:#1A2F4C;
    --on-cta:#F4F1E8;         /* crema sobre la tinta (~10:1) */
    --scrim:#17140F;          /* negro cálido del héroe: tinta, no "negro tech" */

    /* Alto real del header. Lo pisa el JS con el valor medido (ResizeObserver),
       porque cambia con el breakpoint: el padding baja de 20px a 12px en
       teléfono y el lockup wrappea. El fallback tiene que existir igual — es lo
       que usa el primer pintado, antes de que corra una línea de script. */
    --hd-h:78px;}
  .ral-overlay { position:fixed; inset:0; z-index:300; display:none; align-items:center; justify-content:center; padding:24px; background:rgba(23,20,15,.55); backdrop-filter:blur(6px); }
  .ral-overlay.open { display:flex; }
  .ral-panel { width:100%; max-width:560px; max-height:calc(100vh - 48px); overflow-y:auto; background:var(--paper-card); border:1px solid var(--line); border-radius:12px; padding:36px; position:relative; box-sizing:border-box; box-shadow:0 24px 60px rgba(46,40,20,.18); }
  .ral-close { position:absolute; top:12px; right:12px; background:transparent; border:none; cursor:pointer; color:var(--ink-dim); font-size:20px; line-height:1; padding:6px; }
  .ral-close:hover { color:var(--ink); }
  .ral-kicker { font-family:Geist,ui-monospace,monospace; font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-dim); margin:0 0 10px; }
  .ral-title { font-family:Schibsted,ui-sans-serif,sans-serif; font-weight:700; font-size:24px; letter-spacing:-.02em; margin:0 0 6px; color:var(--ink); }
  .ral-sub { font-size:14px; color:var(--ink-body); margin:0 0 24px; line-height:1.55; }
  .ral-form { display:flex; flex-direction:column; gap:16px; }
  .ral-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
  @media (max-width:560px) { .ral-row { grid-template-columns:1fr; } }
  .ral-field { display:flex; flex-direction:column; gap:6px; }
  .ral-label { font-family:Geist,ui-monospace,monospace; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-dim); }
  /* Los campos van MÁS OSCUROS que el panel (la crema de la página dentro del
     papel del panel), que es la misma inversión que usa el dashboard: el hueco
     donde se escribe se lee como hueco sin necesidad de sombra interior. */
  .ral-input, .ral-select, .ral-textarea { background:var(--paper); border:1px solid var(--line); color:var(--ink); font-family:inherit; font-size:14px; padding:11px 12px; border-radius:6px; width:100%; box-sizing:border-box; transition:border-color var(--dur-snap) var(--ease-snap); }
  .ral-input::placeholder, .ral-textarea::placeholder { color:var(--ink-faint); }
  /* Autocompletado del navegador. Misma regla que globals.css — la nota larga
     con el por qué vive ahí; el resumen es que el celeste `#E8F0FE` de Chrome le
     gana a cualquier `background-color` y la única vía soportada para pisarlo es
     una sombra interior enorme. Acá el color es `--paper` y no `--bg-0` porque es
     el fondo real de estos campos (más oscuros que el panel, a propósito). */
  .ral-input:-webkit-autofill, .ral-input:-webkit-autofill:hover,
  .ral-input:-webkit-autofill:focus, .ral-input:-webkit-autofill:active,
  .ral-textarea:-webkit-autofill, .ral-dd-btn:-webkit-autofill {
    -webkit-box-shadow:0 0 0 100px var(--paper) inset !important;
    box-shadow:0 0 0 100px var(--paper) inset !important;
    -webkit-text-fill-color:var(--ink) !important;
    caret-color:var(--ink);
    transition:background-color 0s 6000000s, color 0s 6000000s;
  }
  .ral-input:focus, .ral-select:focus, .ral-textarea:focus { outline:none; border-color:var(--accent-line); box-shadow:0 0 0 3px rgba(200,67,26,.14); }
  .ral-select { appearance:none; cursor:pointer; }
  .ral-textarea { resize:vertical; min-height:80px; }
  /* dropdown custom (el popup del select nativo es del OS y rompe la estética) */
  .ral-dd { position:relative; }
  .ral-dd-btn { display:flex; align-items:center; justify-content:space-between; gap:10px; background:var(--paper); border:1px solid var(--line); color:var(--ink); font-family:inherit; font-size:14px; padding:11px 12px; width:100%; box-sizing:border-box; cursor:pointer; text-align:left; border-radius:6px; transition:border-color var(--dur-snap) var(--ease-snap); }
  .ral-dd-btn:focus { outline:none; border-color:var(--accent-line); box-shadow:0 0 0 3px rgba(200,67,26,.14); }
  .ral-dd-placeholder { color:var(--ink-faint); }
  .ral-dd-caret { color:var(--ink-dim); flex:none; transition:transform var(--dur-fast) var(--ease-fast); }
  .ral-dd.open .ral-dd-caret { transform:rotate(180deg); }
  .ral-dd-list { display:none; position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:30; background:var(--paper-card); border:1px solid var(--line); border-radius:8px; padding:4px; max-height:240px; overflow-y:auto; box-shadow:0 16px 40px rgba(46,40,20,.16); }
  .ral-dd.open .ral-dd-list { display:block; }
  .ral-dd-item { display:flex; width:100%; align-items:center; justify-content:space-between; gap:8px; background:transparent; border:none; border-radius:6px; cursor:pointer; text-align:left; font-family:inherit; font-size:14px; color:var(--ink-body); padding:10px; transition:all var(--dur-snap) var(--ease-snap); }
  .ral-dd-item:hover { background:var(--paper); color:var(--ink); }
  .ral-dd-item.on { color:var(--ink-accent); }
  /* flex-wrap: pasaron de 3 a 4 opciones (entró Pulse) y a 11px uppercase
     cuatro botones no entran en una fila en mobile. */
  .ral-seg { display:flex; flex-wrap:wrap; border:1px solid var(--line); border-radius:6px; overflow:hidden; }
  .ral-seg button { flex:1 1 auto; min-width:72px; background:transparent; border:none; border-right:1px solid var(--line); cursor:pointer; font-family:Geist,ui-monospace,monospace; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-dim); padding:11px 0; transition:all var(--dur-fast) var(--ease-fast); }
  .ral-seg button:last-child { border-right:none; }
  .ral-seg button:hover { color:var(--ink); }
  .ral-seg button.on { background:var(--cta); color:var(--on-cta); font-weight:700; }
  .ral-hp { position:absolute; left:-9999px; top:-9999px; width:1px; height:1px; opacity:0; }
  /* Tinta plena, y el hover OSCURECE en vez de invertir a transparente. El
     inverso (fondo transparente + texto de acento) era legible sobre negro
     pero sobre crema deja un botón fantasma justo en el momento en que el
     visitante ya decidió hacer click. */
  .ral-submit { font-family:Geist,ui-monospace,monospace; font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--on-cta); background:var(--cta); padding:16px 32px; border-radius:8px; border:1px solid var(--cta); cursor:pointer; transition:background var(--dur-fast) var(--ease-fast); margin-top:4px; }
  .ral-submit:hover { background:var(--cta-hover); }
  .ral-submit:disabled { opacity:.55; cursor:default; }
  .ral-error { font-size:13px; color:#C1261F; margin:0; }
  .ral-legal { font-size:11.5px; color:var(--ink-dim); margin:2px 0 0; line-height:1.5; }
  .ral-success { text-align:center; padding:28px 8px 12px; display:none; }
  .ral-success-mark { width:52px; height:52px; margin:0 auto 18px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--cta); color:var(--on-cta); font-size:24px; font-weight:700; }
  .ral-success-title { font-family:Schibsted,ui-sans-serif,sans-serif; font-weight:700; font-size:20px; margin:0 0 8px; color:var(--ink); }
  .ral-success-body { font-size:14px; color:var(--ink-body); line-height:1.55; margin:0; }
  /* Badge flotante de reCAPTCHA oculto: permitido porque la atribución está en el form (.ral-legal). */
  .grecaptcha-badge { visibility: hidden; }

body.lead-open{overflow:hidden}.marketing-motion{display:block;margin:0 auto;padding:0 clamp(20px,4vw,40px) 20px;max-width:1360px}.marketing-motion button{font:inherit;font-size:11px;color:#646057;background:none;border:0;padding:8px 0;cursor:pointer}

.ral-seg button{font-size:10px;letter-spacing:.04em;line-height:1.4}@media(max-width:560px){.ral-panel{padding:28px 20px}.ral-seg{display:grid;grid-template-columns:1fr 1fr}.ral-seg button{min-height:40px}}