/* ═══════════════════════════════════════════════════════════════
   webbif — landing pública
   Territorio "El atajo": todo comunica velocidad.
   Genre editorial · Split Diptych + scrolly proof (skill Hallmark)
   nav N9 edge-aligned minimal · footer Ft2 inline single line
   Ver docs/marca-y-sitio-webbif.md
   ═══════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Nippo';
  src: url('/fonts/Nippo-Variable.woff2') format('woff2-variations');
  font-weight: 200 700;
  font-display: swap;
}
@font-face {
  font-family: 'Switzer';
  src: url('/fonts/Switzer-Variable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
}

:root {
  /* paper + ink */
  --color-paper: #FAF8F5;
  --color-paper-2: #F0EDE7;
  --color-ink: #141210;
  --color-ink-soft: #5C564F;
  --color-rule: #E4DFD6;

  /* accent */
  --color-accent: #F2542D;
  --color-accent-deep: #DC4620;
  --color-accent-ink: #FFF6F2;
  --color-warn: #A8352A;

  /* superficies oscuras (sección de producto y prueba) */
  --color-dark: #141210;
  --color-dark-2: #1E1A17;
  --color-dark-rule: #332D27;
  --color-dark-text: #B5ADA3;
  --color-dark-dim: #8A8177;

  --font-display: 'Nippo', system-ui, sans-serif;
  --font-body: 'Switzer', system-ui, -apple-system, sans-serif;

  --space-xs: 8px; --space-sm: 12px; --space-md: 20px; --space-lg: 32px;
  --space-xl: 56px; --space-2xl: 88px; --space-3xl: 128px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-micro: 120ms; --dur-short: 220ms; --dur-long: 420ms;

  --radius-sm: 3px; --radius-md: 6px;
  --measure: 1240px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0; overflow-x: clip;
  background: var(--color-paper); color: var(--color-ink);
  font-family: var(--font-body); font-size: 17px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Grano sutil para romper la planitud digital — 0 KB de JS */
body::after {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 100; opacity: .035;
  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='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

img { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
figure { margin: 0; }

.skip {
  position: absolute; left: -9999px; top: 8px;
  background: var(--color-ink); color: var(--color-paper);
  padding: 10px 18px; z-index: 200; text-decoration: none;
}
.skip:focus { left: 8px; }

.shell { width: 100%; max-width: var(--measure); margin: 0 auto; padding: 0 var(--space-lg); }
.shell--tight { max-width: 660px; }

/* ── marca ───────────────────────────────────────── */
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.brand svg { width: 26px; height: 26px; color: var(--color-accent); flex: none; }
.wm { font-family: var(--font-display); font-weight: 600; letter-spacing: -.045em;
  font-size: 22px; line-height: 1; white-space: nowrap; }
.wm i { color: var(--color-accent); font-style: normal; }

/* ── nav · N9 edge-aligned minimal ───────────────────
   Sin sticky, sin backdrop-filter, sin borde inferior. */
.nav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md);
  max-width: var(--measure); margin: 0 auto; padding: var(--space-md) var(--space-lg); }

/* ── botones ─────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-body); font-size: 15px; font-weight: 600; line-height: 1;
  white-space: nowrap;
  padding: 14px 24px; border: 1px solid transparent; border-radius: var(--radius-sm);
  text-decoration: none; cursor: pointer;
  transition: background-color var(--dur-micro) var(--ease-out),
              border-color var(--dur-micro) var(--ease-out),
              transform var(--dur-micro) var(--ease-out); }
.btn--solid { background: var(--color-accent); color: var(--color-accent-ink); }
.btn--solid:hover { background: var(--color-accent-deep); }
.btn--solid:active { transform: translateY(1px); }
.btn--ghost { border-color: var(--color-rule); color: var(--color-ink); }
.btn--ghost:hover { border-color: var(--color-ink); }
.btn--ghost:active { transform: translateY(1px); }
.btn--full { width: 100%; padding: 16px 24px; font-size: 16px; }
.btn:disabled { opacity: .55; cursor: progress; }

/* ── HERO · split diptych, ratio 6/5, left-bias ─── */
.hero { padding: var(--space-xl) 0 var(--space-3xl); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: var(--space-xl); align-items: center; }

.hero__t { font-family: var(--font-display); font-weight: 700;
  font-size: clamp(48px, 7.4vw, 104px); line-height: .88; letter-spacing: -.05em;
  margin: 0 0 var(--space-md); overflow-wrap: anywhere; min-width: 0; }
.hero__t span { display: block; overflow: hidden; }
.hero__t b { display: block; font-weight: 700; }
.hero__l { font-size: clamp(17px, 1.7vw, 20px); color: var(--color-ink-soft);
  max-width: 42ch; margin: 0 0 var(--space-lg); }
.hero__a { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); }
.hero__n { margin: var(--space-md) 0 0; font-size: 14px; color: var(--color-ink-soft); }

/* definición tipeada — un gesto, no una caja */
.define { max-width: 420px; margin: 0 0 var(--space-md);
  font-size: 14.5px; color: var(--color-ink-soft); letter-spacing: .005em; }
.define__type { display: inline-block; overflow: hidden; white-space: nowrap;
  max-width: 100%; vertical-align: top; }

/* pruebas del hero — figuras reales, sin marco falso */
.proof { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-sm);
  align-items: start; }
.proof figure { display: grid; gap: var(--space-xs); }
.proof__win { overflow: hidden; border: 1px solid var(--color-rule); border-radius: var(--radius-sm);
  aspect-ratio: 1 / 1.85; background: var(--color-dark-2); }
.proof__win img { width: 100%; }
.proof figcaption { font-size: 11.5px; color: var(--color-ink-soft); letter-spacing: .02em; }
.proof__note { grid-column: 1 / -1; margin: var(--space-xs) 0 0; font-size: 13px;
  color: var(--color-ink-soft); }

/* ── títulos ─────────────────────────────────────── */
.st { font-family: var(--font-display); font-weight: 600;
  font-size: clamp(32px, 5vw, 56px); line-height: 1; letter-spacing: -.04em; margin: 0;
  text-wrap: balance; overflow-wrap: anywhere; min-width: 0; }
.ss { margin: var(--space-sm) 0 0; color: var(--color-ink-soft); max-width: 50ch; }

/* ── comparación (scroll-scrub) ──────────────────── */
.cmp { background: var(--color-paper-2); border-block: 1px solid var(--color-rule); }
.cmp__scr { height: 280vh; position: relative; }
.cmp__stick { position: sticky; top: 0; height: 100dvh; display: grid; align-content: center;
  padding: var(--space-lg) 0; }
.cmp__head { margin-bottom: var(--space-lg); max-width: 640px; }
.cmp__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 3vw, 40px); max-width: 880px; width: 100%; }
.cmp__col { display: grid; gap: var(--space-sm); }
.cmp__tag { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin: 0; }
.cmp__tag--off { color: var(--color-ink-soft); }
.cmp__tag--on { color: var(--color-accent); }
.cmp__note { margin: 0; font-size: 15px; color: var(--color-ink-soft); }
.cmp__why { margin-top: var(--space-lg); }

/* ficha de negocio — el mismo formato de una búsqueda o
   un pin de mapa, no un navegador dibujado                */
.gcard { background: var(--color-paper); border: 1px solid var(--color-rule);
  border-radius: var(--radius-md); overflow: hidden; }
.gcard__media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--color-dark-2); }
.gcard__media img { width: 100%; height: 100%; object-fit: cover; }
.gcard__body { padding: 14px; display: grid; gap: 4px; }
.gcard__name { font-weight: 650; font-size: 15px; margin: 0; }
.gcard__meta { margin: 0; font-size: 12.5px; color: var(--color-ink-soft);
  display: flex; align-items: center; gap: 5px; }
.gcard__stars { color: #E0A526; font-size: 12px; letter-spacing: 1px; }
.gcard__addr { margin: 0 0 6px; font-size: 12.5px; color: var(--color-ink-soft); }
.gcard__actions { display: flex; flex-wrap: wrap; gap: 8px 14px; padding-top: 8px;
  border-top: 1px solid var(--color-rule); }
.gcard__act { display: inline-flex; align-items: center; gap: 5px; font-size: 12px;
  font-weight: 600; color: var(--color-ink-soft); }
.gcard__act svg { width: 14px; height: 14px; flex: none; }
.gcard__act--on { color: var(--color-accent); }
.gcard__act--off { color: var(--color-ink-soft); text-decoration: line-through;
  text-decoration-color: var(--color-rule); opacity: .75; }

/* ── pasos · escalera "canchera", no grilla de tres ── */
.how { padding: var(--space-3xl) 0 var(--space-2xl); }
.steps { list-style: none; margin: var(--space-xl) 0 0; padding: 0;
  display: grid; gap: var(--space-xl); max-width: 900px; }
.step { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-md);
  align-items: center; position: relative; }
.step:nth-child(1) { margin-left: 0; max-width: 62%; }
.step:nth-child(2) { margin-left: 12%; max-width: 66%; }
.step:nth-child(3) { margin-left: 24%; max-width: 70%; }
/* conector a mano alzada — dos rayas punteadas */
.step:not(:last-child)::after { content: ''; position: absolute; left: 26px;
  bottom: calc(-1 * var(--space-xl) + 8px); width: 26px; height: 40px;
  border-left: 2px dashed var(--color-accent); border-bottom: 2px dashed var(--color-accent);
  border-radius: 0 0 0 16px; opacity: .45; }
.step__n { display: grid; place-items: center; width: 60px; height: 60px; flex: none;
  border: 2px dashed var(--color-accent); border-radius: 50%; background: var(--color-paper);
  font-family: var(--font-display); font-size: 23px; font-weight: 600;
  color: var(--color-accent); font-variant-numeric: tabular-nums;
  transform: rotate(var(--tilt, -4deg)); }
.step:nth-child(1) .step__n { --tilt: -6deg; }
.step:nth-child(2) .step__n { --tilt: 5deg; }
.step:nth-child(3) .step__n { --tilt: -3deg; }
.step__b { display: grid; gap: 6px; }
.step__t { position: relative; display: inline-block; width: fit-content;
  font-size: 19px; font-weight: 650; margin: 0; letter-spacing: -.015em; }
.step__t::before { content: ''; position: absolute; left: -3px; right: -3px; bottom: 1px; height: 9px;
  background: color-mix(in oklch, var(--color-accent) 28%, transparent);
  transform: skewX(-8deg); z-index: -1; }
.step__d { margin: 0; color: var(--color-ink-soft); font-size: 16px; }

/* ── el producto (scroll-scrub) ──────────────────── */
.show { background: var(--color-dark); color: var(--color-paper); }
.show__scr { height: 360vh; position: relative; }
.show__stick { position: sticky; top: 0; height: 100dvh; display: grid; align-content: center;
  padding: var(--space-lg) 0; overflow: hidden; }
.show__head { margin-bottom: var(--space-md); max-width: 620px; }
.show .st { color: var(--color-paper); }
.show .ss { color: var(--color-dark-text); }

/* figura, no navegador dibujado: recorte + filete */
.frame { width: min(420px, 82vw); margin: 0 auto; display: grid; gap: var(--space-sm); }
.frame__win { overflow: hidden; position: relative; background: var(--color-dark-2);
  border: 1px solid var(--color-dark-rule); border-radius: var(--radius-sm);
  aspect-ratio: 1 / 1.24; }
.frame__win img { width: 100%; position: absolute; top: 0; left: 0; }
.frame__win img[hidden] { display: none; }
.frame figcaption { font-size: 12.5px; color: var(--color-dark-dim); text-align: center; }

.picker { display: flex; justify-content: center; gap: var(--space-xs); margin-top: var(--space-md);
  flex-wrap: wrap; }
.picker button { font-family: var(--font-body); font-size: 13px; font-weight: 600;
  white-space: nowrap; color: var(--color-dark-text); background: transparent;
  border: 1px solid var(--color-dark-rule); border-radius: 999px; padding: 8px 18px; cursor: pointer;
  transition: background-color var(--dur-micro) var(--ease-out),
              border-color var(--dur-micro) var(--ease-out),
              color var(--dur-micro) var(--ease-out); }
.picker button:hover { border-color: var(--color-dark-dim); color: var(--color-paper); }
.picker button[aria-pressed="true"] { background: var(--color-accent);
  border-color: var(--color-accent); color: var(--color-accent-ink); }

/* ── formulario ──────────────────────────────────── */
.cap { padding: var(--space-3xl) 0 var(--space-2xl); }
.cap__t { font-family: var(--font-display); font-weight: 700; font-size: clamp(34px, 5.6vw, 62px);
  line-height: 1; letter-spacing: -.045em; margin: 0 0 var(--space-sm); }
.cap__l { color: var(--color-ink-soft); margin: 0 0 var(--space-lg); }
.form { display: grid; gap: var(--space-md); }
.f { display: grid; gap: 7px; }
.f label { font-size: 14.5px; font-weight: 600; }
.f i { font-weight: 400; color: var(--color-ink-soft); font-size: 13px; font-style: normal; }
.f input, .f textarea { font-family: var(--font-body); font-size: 16px; color: var(--color-ink);
  background: var(--color-paper); border: 1px solid var(--color-rule);
  border-radius: var(--radius-sm); padding: 14px 16px; width: 100%;
  transition: border-color var(--dur-micro) var(--ease-out); }
.f input::placeholder, .f textarea::placeholder { color: #A9A29A; }
.f input:focus, .f textarea:focus { outline: none; border-color: var(--color-accent); }
.f textarea { resize: vertical; min-height: 92px; }
.fine { margin: 0; font-size: 13.5px; color: var(--color-ink-soft); }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form__msg { margin: 0; font-size: 15px; min-height: 1px; }
.form__msg.is-error { color: var(--color-warn); font-weight: 600; }

.done { padding: 28px 0; }
.done__t { font-family: var(--font-display); font-size: 32px; font-weight: 600;
  letter-spacing: -.035em; margin: 0 0 8px; }
.done__d { margin: 0; color: var(--color-ink-soft); }

/* ── prueba ──────────────────────────────────────── */
.trial { padding: var(--space-2xl) 0 var(--space-3xl); background: var(--color-dark);
  color: var(--color-paper); }
.trial__in { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-lg);
  align-items: center; max-width: 840px; }
.trial__n { font-family: var(--font-display); font-size: clamp(72px, 13vw, 168px); font-weight: 700;
  line-height: .82; letter-spacing: -.055em; margin: 0; color: var(--color-accent);
  font-variant-numeric: tabular-nums; }
.trial__b { display: grid; gap: var(--space-xs); }
.trial__u { font-family: var(--font-display); font-size: clamp(22px, 3.4vw, 38px); font-weight: 600;
  letter-spacing: -.04em; margin: 0; }
.trial__d { margin: 0; max-width: 40ch; color: var(--color-dark-text); }

/* ── footer · Ft2 inline single line ─────────────── */
.foot { padding: var(--space-xl) 0 var(--space-lg); }
.foot__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-md); padding-top: var(--space-md); border-top: 1px solid var(--color-rule); }
.foot__l { font-size: 13.5px; color: var(--color-ink-soft); margin: 0; }

/* ══ MOVIMIENTO ══════════════════════════════════════
   Una sola entrada orquestada (el hero) y dos momentos
   estructurales atados al scroll.                     */
@media (prefers-reduced-motion: no-preference) {

  @keyframes lineUp { from { transform: translateY(105%); } to { transform: translateY(0); } }
  @keyframes riseIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

  .hero__t b { animation: lineUp var(--dur-long) var(--ease-out) both; }
  .hero__t span:nth-child(2) b { animation-delay: 90ms; }
  .hero__l, .hero__a, .hero__n, .proof {
    animation: riseIn var(--dur-long) var(--ease-out) both; }
  .hero__l { animation-delay: 200ms; }
  .hero__a { animation-delay: 280ms; }
  .hero__n { animation-delay: 340ms; }
  .proof { animation-delay: 160ms; }

  @keyframes typeOut { to { width: 100%; } }
  @keyframes caretBlink { 50% { border-color: transparent; } }
  .define__type { width: 0; border-right: 2px solid var(--color-accent);
    animation: typeOut 1.6s steps(62, end) 80ms both,
               caretBlink .9s step-end infinite; }

  @supports (animation-timeline: view()) {
    /* 1 — la comparación se apaga de un lado y se enciende del otro */
    .cmp__scr { view-timeline-name: --cmp; }
    .cmp__col--off { animation: goDim linear both; animation-timeline: --cmp;
      animation-range: entry 100% exit 0%; }
    @keyframes goDim {
      0%, 18% { filter: saturate(1) opacity(1); transform: none; }
      100% { filter: saturate(.08) opacity(.4); transform: scale(.97); } }
    .cmp__col--on { animation: goLive linear both; animation-timeline: --cmp;
      animation-range: entry 100% exit 0%; }
    @keyframes goLive {
      0%, 18% { transform: scale(.97); filter: saturate(.35); }
      100% { transform: scale(1.02); filter: saturate(1); } }

    /* 2 — la web se recorre sola dentro del recorte */
    .show__scr { view-timeline-name: --show; }
    .frame__win img { animation: siteScroll linear both; animation-timeline: --show;
      animation-range: entry 100% exit 0%; }
    @keyframes siteScroll { from { transform: translateY(0); } to { transform: translateY(-78%); } }
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition-duration: .01ms !important; }
  .cmp__scr, .show__scr { height: auto; }
  .cmp__stick, .show__stick { position: static; height: auto; }
}

/* ── responsive · 320 / 375 / 414 / 768 ──────────── */
@media (max-width: 900px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .cmp__cols { grid-template-columns: minmax(0, 1fr); }
  .cmp__col--off { display: none; }
  .step:nth-child(1), .step:nth-child(2), .step:nth-child(3) { margin-left: 0; max-width: none; }
  .trial__in { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .shell { padding: 0 var(--space-md); }
  .hero { padding: var(--space-lg) 0 var(--space-2xl); }
  .how, .cap { padding: var(--space-2xl) 0 var(--space-xl); }
  .trial { padding: var(--space-xl) 0 var(--space-2xl); }
  .cmp__scr { height: 220vh; }
  .show__scr { height: 290vh; }
  .proof { gap: var(--space-xs); }
  .proof figcaption { font-size: 10.5px; }
  .nav .btn--ghost { display: none; }
}