/* ═══════════════════════════════════════════════════════════════════════════
   Pauto — web comercial v2
   Diseño de Codex (agosto 2026), revisado por Codex en la s95 y aplicado en la
   s96. Los valores (colores, ritmo, escalas tipográficas, marcos) son los suyos;
   aquí solo se ha reordenado el fichero para poder leerlo y se han hecho los
   cambios que pidió su crítica:
     · Inter Tight en toda la página, como la aplicación.
     · La marca «P» es la misma que la de la app (`app/page.tsx`): cuadrado de
       tinta índigo, radio 12, filo claro arriba. Nada de Georgia.
     · El botón principal pierde la sombra índigo difusa (se acercaba al «glow»
       prohibido del sistema de diseño) y lleva un relieve corto y neutro.
     · Marco de TABLET, que es el aparato principal del producto.
   Regla del sistema de diseño que manda sobre todo esto: el índigo es el color
   de MARCA/ACCIÓN, nunca el de «hecho» (verde) ni el de «incidencia» (rojo).
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --ink: #171b25;
  --primary: #273a6b;
  --blue: #3d5ea8;
  --paper: #f5f2ec;
  --line: #d8d3ca;
  --muted: #686a70;
  --dark: #151c32;
  --max: 1180px;
}

/* Inter Tight, servida desde aquí: un solo fichero variable (400-800). */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('assets/fonts/inter-tight-latin.woff2') format('woff2');
}

* { box-sizing: border-box }
/* El foco de teclado se ve siempre, sobre claro y sobre oscuro. */
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 4px }
.product-proof :focus-visible, .manifesto :focus-visible, .contact :focus-visible, .partners :focus-visible { outline-color: #aebce7 }
html { scroll-behavior: smooth }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Inter Tight', system-ui, -apple-system, 'Segoe UI', sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit }
img { max-width: 100% }
.shell { width: min(calc(100% - 48px), var(--max)); margin-inline: auto }
.skip-link { position: fixed; z-index: 99; top: -5rem; left: 1rem; padding: .7rem 1rem; background: #fff }
.skip-link:focus { top: 1rem }

/* ── Cabecera y marca ─────────────────────────────────────────────────────── */
.site-header {
  width: min(calc(100% - 48px), var(--max));
  min-height: 76px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}
.brand { display: inline-flex; align-items: center; gap: .65rem; font-size: 1.25rem; font-weight: 800; text-decoration: none; letter-spacing: -.04em }
/* La misma marca que la aplicación: cuadrado de tinta, radio 12, filo claro
   arriba y sombra corta (`bg-primary rounded-xl shadow-sm border-t border-white/15`
   en `app/page.tsx`). La «P» va en la tipografía de la casa, no en Georgia. */
.brand-mark {
  display: grid;
  width: 33px;
  height: 33px;
  place-items: center;
  border-radius: 12px;
  border-top: 1px solid rgba(255, 255, 255, .15);
  background: var(--primary);
  box-shadow: 0 1px 2px rgba(23, 27, 37, .12);
  color: #fff;
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1;
}
.site-nav { display: flex; align-items: center; gap: 1.8rem }
.site-nav a { font-size: .88rem; font-weight: 700; text-decoration: none }
.site-nav .nav-cta { padding: .68rem .9rem; border: 1px solid var(--primary); border-radius: 8px; color: var(--primary) }
.menu-button { display: none }

/* ── Tipografía común ─────────────────────────────────────────────────────── */
.kicker, .section-index {
  margin: 0 0 1.2rem;
  color: var(--blue);
  font-size: .73rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}
/* Las mayúsculas están reservadas a etiquetas breves de estructura: el rótulo
   largo del hero va en caja normal (Codex §4). */
.kicker-largo { font-size: .95rem; letter-spacing: 0; text-transform: none }
.light { color: #aebce7 }
h1, h2, h3 { margin-top: 0; line-height: 1.03; letter-spacing: -.055em }
h1 { max-width: 750px; margin-bottom: 1.7rem; font-size: clamp(3.2rem, 6.2vw, 6rem); font-weight: 800 }
h2 { margin-bottom: 1.3rem; font-size: clamp(2.5rem, 4.3vw, 4.6rem); font-weight: 800 }
h3 { font-size: 1.25rem }

/* ── Botones y enlaces de acción ──────────────────────────────────────────── */
.button {
  display: inline-flex;
  min-height: 49px;
  align-items: center;
  justify-content: center;
  padding: .8rem 1.15rem;
  border-radius: 8px;
  font-weight: 800;
  text-decoration: none;
}
/* Relieve corto y neutro, no una sombra índigo difusa: el «glow» está prohibido
   en el sistema de diseño de Pauto. */
.primary {
  background: var(--primary);
  border-top: 1px solid rgba(255, 255, 255, .15);
  box-shadow: 0 1px 2px rgba(23, 27, 37, .16);
  color: #fff;
}
.primary:hover { background: #1c2c52 }
.plain-link { font-weight: 800; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: .2rem }
.strong { color: var(--primary); white-space: nowrap }

/* ── Marcos de aparato ────────────────────────────────────────────────────────
   Regla de Codex §3: turno y fichaje → TABLET · gerente fuera del bar → MÓVIL ·
   configuración e historial → PORTÁTIL. Los marcos sugieren el aparato, no lo
   ilustran: borde fino, canto oscuro y sombra corta. */
.tablet-frame {
  position: relative;
  padding: 13px;
  border: 1px solid #c8c5bf;
  border-radius: 20px;
  background: #191d26;
  box-shadow: 0 16px 40px rgba(23, 27, 37, .2);
}
.tablet-frame:before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 5px;
  width: 5px;
  height: 5px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: #444a57;
}
.tablet-frame img { display: block; width: 100%; height: auto; border-radius: 9px }
.phone-frame {
  position: relative;
  width: min(100%, 340px);
  margin-inline: auto;
  padding: 10px;
  border: 1px solid #c8c5bf;
  border-radius: 34px;
  background: #191d26;
  box-shadow: 0 20px 50px rgba(23, 27, 37, .2);
}
.phone-frame:before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 16px;
  left: 50%;
  width: 66px;
  height: 16px;
  transform: translateX(-50%);
  border-radius: 20px;
  background: #191d26;
}
/* Sin recorte: las capturas de teléfono se disparan a 390×844, que es
   exactamente la proporción del marco. */
.phone-frame img { display: block; width: 100%; height: auto; border-radius: 25px }
/* Hermano de los anteriores para las capturas de escritorio: la franja de abajo
   es el canto de la pantalla, no un dibujo de ordenador. */
.laptop-frame { overflow: hidden; padding: 11px 11px 0; border: 1px solid #3b4255; border-radius: 12px; background: #0d1220; box-shadow: 0 10px 26px rgba(0, 0, 0, .34) }
.laptop-frame img { display: block; width: 100%; height: auto; border-radius: 6px 6px 0 0 }
.laptop-frame:after { content: ""; display: block; height: 11px; margin: 0 -11px; border-radius: 0 0 12px 12px; background: #161d30 }
/* Un recorte no lleva marco de aparato: es un trozo de pantalla ampliado para
   que se lea en el teléfono. Se presenta como lo que es, una ficha. */
.recorte { overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: 0 10px 26px rgba(23, 27, 37, .1) }
.recorte img { display: block; width: 100%; height: auto }

/* ── 1 · Hero ─────────────────────────────────────────────────────────────── */
.hero {
  min-height: 700px;
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  gap: 4.5rem;
  align-items: center;
  padding-block: 64px 90px;
}
.lead { max-width: 650px; margin: 0 0 2rem; color: #4f5259; font-size: 1.18rem }
.hero-actions { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap }
.hero-note { max-width: 560px; margin: 1.6rem 0 0; color: var(--muted); font-size: .9rem }
.hero-screen { margin: 0 }
.hero-screen figcaption { margin-top: 1.1rem; display: flex; justify-content: space-between; gap: 1rem; color: var(--muted); font-size: .78rem }
.hero-screen figcaption strong { color: var(--primary) }

/* ── 2 · Así funciona un turno ────────────────────────────────────────────── */
.day { padding-block: 120px }
.section-intro { max-width: 900px; margin-bottom: 4rem }
.section-intro.tight { margin-bottom: 2.5rem }
.timeline { border-top: 2px solid var(--ink) }
.timeline article { display: grid; grid-template-columns: 150px 1fr; gap: 2.5rem; padding: 2.1rem 0; border-bottom: 1px solid var(--line) }
/* Antes era un <time> con la hora del turno; ahora son los tres momentos, que
   no son horas: un <time> sin fecha válida es HTML inválido. */
.timeline .momento { color: var(--primary); font-size: 1.2rem; font-weight: 800 }
.timeline h3 { margin-bottom: .45rem; font-size: 1.55rem }
.timeline p { max-width: 720px; margin: 0; color: var(--muted); font-size: 1.02rem }
.day-shot { margin: 4.5rem 0 0 }
.day-shot figcaption { display: flex; gap: 1rem; align-items: baseline; padding-top: 1rem; color: var(--muted) }
.day-shot figcaption span { color: var(--blue); font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase }
.day-shot figcaption strong { color: var(--ink) }
/* En el teléfono una captura de 1.600 px es ilegible: se enseña un recorte
   propio (Codex §3, «nada de ampliar una de escritorio al 165 %»). */
.solo-movil { display: none }

/* ── 3 · Pauto, por dentro ────────────────────────────────────────────────── */
.product-proof { padding-block: 120px; background: var(--dark); color: #fff; overflow: hidden }
.proof-layout { display: grid; grid-template-columns: 1.1fr .9fr; gap: 6rem; align-items: center }
.proof-copy > p:not(.kicker) { max-width: 680px; color: #bdc3d2; font-size: 1.1rem }
.proof-points { margin: 3rem 0 0; padding: 0; list-style: none }
/* Tres momentos del turno, no una lista numerada de funciones. */
.proof-points li { padding: 1.2rem 0; border-top: 1px solid rgba(255, 255, 255, .15); color: #e3e7f1; font-size: 1.05rem }
.proof-points span { display: block; margin-bottom: .4rem; color: #91a4dc; font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase }
.team-screen { justify-self: center; margin: 0 }
.team-screen figcaption { padding-top: .9rem; color: #bfc5d2; font-size: .8rem; text-align: center }
.proof-shots { margin-top: 7rem }
.proof-shots figure { margin: 0 }
.proof-shots figcaption, .circuito figcaption { display: flex; gap: 1rem; align-items: baseline; flex-wrap: wrap; padding-top: 1rem; color: #bbc1cf }
.proof-shots figcaption span, .circuito figcaption span { color: #8fa3dc; font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase }
.circuito { margin-top: 6rem; padding-top: 4rem; border-top: 1px solid rgba(255, 255, 255, .15) }
.circuito-titulo { max-width: 700px; font-size: clamp(1.8rem, 3vw, 2.8rem); font-weight: 800 }
.circuito-pareja { display: grid; grid-template-columns: 1.35fr .65fr; gap: 3.5rem; align-items: start }
.circuito-pareja figure { margin: 0 }

/* ── 4 · La tablet de la barra ────────────────────────────────────────────── */
.manifesto { padding-block: 100px; background: var(--primary); color: #fff }
.band-grid { display: grid; grid-template-columns: 200px 1fr; gap: 3rem }
.tablet-band h2 { max-width: 900px }
.tablet-band > div > div > p, .tablet-band .band-close { max-width: 770px; color: #d5dcef; font-size: 1.12rem }
.tablet-band h3 { margin: 2.6rem 0 0; color: #fff; font-size: 1.35rem; letter-spacing: -.03em }
.band-list { margin: 1.2rem 0 0; padding: 0; list-style: none; max-width: 800px }
.band-list li { padding: 1.05rem 0; border-top: 1px solid rgba(255, 255, 255, .17); color: #d5dcef }
.band-close { margin-top: 2rem !important; padding-top: 1.2rem; border-top: 1px solid rgba(255, 255, 255, .17) }
.band-shots { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; margin-top: 4rem }
.band-shots figure { margin: 0 }
.band-shots figcaption { padding-top: .9rem; color: #c5cce0; font-size: .85rem }

/* ── 5 · La prueba de 30 días ─────────────────────────────────────────────── */
.restaurant-route { display: grid; grid-template-columns: 160px 1fr auto; gap: 3rem; align-items: end; padding-block: 110px }
.restaurant-route h2 { font-size: clamp(2.2rem, 3.5vw, 3.8rem) }
.restaurant-route p { max-width: 650px; color: var(--muted); font-size: 1.05rem }
/* Hueco del precio: sin usar hasta que haya precio decidido (ver index.html). */
.restaurant-route .precio { margin-top: 1.2rem; padding-top: 1.2rem; border-top: 1px solid var(--line); color: var(--ink) }

/* ── 6 · De dónde sale ────────────────────────────────────────────────── */
.maker { padding-block: 100px }
.maker h2 { font-size: clamp(2.2rem, 3.5vw, 3.8rem) }
.maker p { max-width: 770px; color: var(--muted); font-size: 1.08rem }

/* ── 7 · Preguntas frecuentes ─────────────────────────────────────────────── */
.faq { padding-block: 110px }
.faq-list { margin: 0; border-top: 2px solid var(--ink) }
.faq-list > div { display: grid; grid-template-columns: .9fr 1.1fr; gap: 2.5rem; padding: 2rem 0; border-bottom: 1px solid var(--line) }
.faq-list dt { font-size: 1.15rem; font-weight: 800; letter-spacing: -.025em }
.faq-list dd { margin: 0; color: var(--muted); font-size: 1.02rem }

/* ── 8 · Formulario ───────────────────────────────────────────────────────── */
.contact { padding-block: 110px; background: #101522; color: #fff; text-align: center }
.contact-inner { display: flex; flex-direction: column; align-items: center }
.contact h2 { font-size: clamp(2.4rem, 4.4vw, 4.6rem) }
.contact p:not(.kicker) { max-width: 650px; color: #bbc1ce }
.demo-form { width: min(100%, 560px); margin: 2.6rem auto 0; display: grid; gap: 1.1rem; text-align: left }
.demo-form label { display: grid; gap: .45rem; color: #d3d8e4; font-size: .82rem; font-weight: 800 }
.demo-form .opcional { color: #8f96a5; font-weight: 400 }
.demo-form input { min-height: 49px; padding: .7rem .9rem; border: 1px solid #3a4155; border-radius: 8px; background: #171d2c; color: #fff; font: inherit; font-size: 1rem }
.demo-form input:focus-visible, .demo-form button:focus-visible { outline: 2px solid #8fa3dc; outline-offset: 2px }
.demo-form button { min-height: 52px; margin-top: .4rem; border: 0; background: #fff; color: var(--primary); font-family: inherit; font-size: 1rem; cursor: pointer }
.demo-form button[disabled] { opacity: .6; cursor: progress }
/* La trampa anti-bots: fuera de la vista y fuera del lector de pantalla, pero
   no `display:none` — algunos robots ignoran lo que está oculto de esa forma. */
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden }
/* Especificidad con `.demo-form` delante: `.contact p:not(.kicker)` ya fija un
   color para todos los párrafos de esta sección y se comería estos tres. */
.demo-form .campo-ayuda { margin: -.6rem 0 0 !important; color: #9aa1b0; font-size: .82rem; text-align: left }
.demo-form .form-estado { margin: .4rem 0 0 !important; font-size: .9rem; font-weight: 700; text-align: left }
.demo-form .form-estado[data-tono="ok"] { color: #7fdcae }
.demo-form .form-estado[data-tono="error"] { color: #f3a8a8 }
.demo-form .form-estado[data-tono="espera"] { color: #9aa1b0 }
.demo-form .form-privacidad { margin: .2rem 0 0 !important; color: #9aa1b0; font-size: .82rem; text-align: left }
.demo-form .form-privacidad a { color: #c3cbe0 }
.form-note { margin: 1.1rem 0 0 !important; color: #9aa1b0; font-size: .84rem }
.form-note a { color: #c3cbe0 }

/* ── 9 · Distribuidores, franja final ─────────────────────────────────────── */
.partners { padding-block: 90px; background: #222f5a; color: #fff }
.partner-band { display: grid; grid-template-columns: 1fr auto; gap: 3rem; align-items: center }
.partner-band h2 { max-width: 760px; margin-bottom: .9rem; font-size: clamp(2rem, 3.2vw, 3.2rem) }
.partner-band p { max-width: 690px; margin: 0; color: #d0d7eb; font-size: 1.05rem }
.inverted { background: #fff; border-top: 1px solid rgba(255, 255, 255, .15); color: var(--primary) }

/* ── Pie ──────────────────────────────────────────────────────────────────── */
.site-footer { min-height: 110px; display: flex; align-items: center; justify-content: space-between; gap: 2rem; color: var(--muted); font-size: .8rem }
.site-footer a { color: inherit }

/* ── Tabletas y portátiles estrechos ──────────────────────────────────────── */
@media (max-width: 900px) {
  .menu-button { display: inline-flex; padding: .55rem .7rem; border: 1px solid var(--line); border-radius: 7px; background: #fff; font-family: inherit; font-weight: 700 }
  .site-nav { position: absolute; z-index: 20; top: 70px; left: 24px; right: 24px; display: none; flex-direction: column; align-items: stretch; padding: 1rem; background: #fff; border: 1px solid var(--line); box-shadow: 0 18px 50px rgba(20, 25, 38, .14) }
  .site-nav[data-open="true"] { display: flex }
  .hero { grid-template-columns: 1fr; gap: 3rem }
  .band-grid, .proof-layout, .restaurant-route, .partner-band, .circuito-pareja { grid-template-columns: 1fr }
  .proof-layout { gap: 3.5rem }
  .circuito-pareja { gap: 2.5rem }
  .band-shots { grid-template-columns: 1fr; gap: 2rem; margin-top: 3rem }
  .faq-list > div { grid-template-columns: 1fr; gap: .7rem }
  .partner-band .button { justify-self: start }
  .site-footer { flex-direction: column; text-align: center; padding-block: 2rem }
}

/* ── Teléfono ─────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .shell, .site-header, .site-footer { width: min(calc(100% - 28px), var(--max)) }
  /* El hero cabe en la primera pantalla y la tablet ASOMA por debajo: menos aire
     arriba, titular más contenido y el aparato justo después del botón. */
  .hero { min-height: auto; gap: 2.2rem; padding-block: 34px 60px }
  h1 { margin-bottom: 1.1rem; font-size: clamp(2.5rem, 11vw, 3.4rem) }
  .kicker-largo { margin-bottom: .9rem; font-size: .88rem }
  .lead { margin-bottom: 1.5rem; font-size: 1.05rem }
  .hero-actions { align-items: stretch; flex-direction: column }
  .hero-note { margin-top: 1.1rem }
  .hero-screen figcaption { display: block }
  .hero-screen figcaption span { display: block; margin-top: .2rem }
  .tablet-frame { padding: 9px; border-radius: 15px }
  .tablet-frame img { border-radius: 7px }
  .manifesto, .day, .product-proof, .partners { padding-block: 72px }
  .band-grid { gap: 1.5rem }
  .section-intro { margin-bottom: 2.5rem }
  .timeline article { grid-template-columns: 1fr; gap: .5rem }
  .timeline .momento { font-size: .74rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase }
  .timeline h3 { font-size: 1.25rem }
  .day-shot { margin-top: 3rem }
  .day-shot figcaption { display: block }
  .day-shot figcaption span { display: block; margin-bottom: .35rem }
  .solo-escritorio { display: none }
  .solo-movil { display: block }
  .proof-shots { margin-top: 4rem }
  .proof-shots figcaption, .circuito figcaption { display: block }
  .proof-shots figcaption span, .circuito figcaption span { display: block; margin-bottom: .35rem }
  .circuito { margin-top: 4rem; padding-top: 3rem }
  .restaurant-route { padding-block: 72px }
  .maker, .faq, .contact { padding-block: 72px }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
  * { transition: none !important }
}

/* ── Aviso legal y privacidad ─────────────────────────────────────────────────
   Páginas de lectura: columna estrecha y titulares a tamaño de documento, no de
   portada. Los datos del titular van en una imagen (`.legal-titular`), nunca en
   el texto: ver tools/imagen-titular.mjs. */
.legal { max-width: 720px; padding-block: 70px 90px }
.legal h1 { margin-bottom: .8rem; font-size: clamp(2.1rem, 4.4vw, 3.2rem) }
.legal h2 { margin: 2.6rem 0 .7rem; font-size: 1.35rem; line-height: 1.2; letter-spacing: -.025em }
.legal p, .legal li { color: #3f434b; font-size: 1.02rem }
.legal ul { padding-left: 1.2rem }
.legal li { margin-bottom: .45rem }
.legal a { color: var(--primary) }
.legal-fecha { color: var(--muted) !important; font-size: .88rem !important }
.legal-titular { display: block; width: 340px; height: auto; margin: 1.2rem 0 }