/* ============================================================
   tengo — capa de sitio web
   Construida ENCIMA de tokens.css. Ningún color, radio, sombra
   ni curva de motion se define acá: todo sale de los tokens.
   ============================================================ */

/* ------------------------------------------------------------
   ESCALA WEB — TOKENS PROPUESTOS, PENDIENTES DE APROBACIÓN

   tokens.css tiene escala de app mobile (h1 22-28px, body 14-15px).
   A distancia de lectura de desktop eso queda chico: 14px de body
   es incómodo en un monitor y 16px es el piso razonable en web.

   Estos son los ÚNICOS valores nuevos de todo el sitio. Si se
   aprueban, van a DESIGN.md y bajan a tokens.css como capa `web`.
   Mientras tanto viven acá, juntos y nombrados — nunca sueltos
   en un componente.
   ------------------------------------------------------------ */
:root {
  --web-tap-min: 44px;   /* área mínima de toque; no baja a tokens.css, que es generado */
  --web-display:    clamp(38px, 5.6vw, 64px);
  --web-h1:         clamp(28px, 3.6vw, 40px);
  --web-h2:         clamp(21px, 2.4vw, 27px);
  --web-h3:         18px;
  --web-body-lg:    18px;
  --web-body:       16px;
  --web-sm:         14px;

  --web-track-display: -0.035em;
  --web-track-h1:      -0.025em;
  --web-track-h2:      -0.015em;

  --web-container:  1120px;
  --web-gutter:     var(--tengo-space-lg);
  --web-section:    clamp(56px, 9vw, 112px);

}

/* -------- Reset acotado -------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}
body {
  margin: 0;
  background: var(--tengo-bg);
  color: var(--tengo-text-primary);
  font-family: var(--tengo-font);
  font-size: var(--web-body);
  font-weight: var(--tengo-weight-regular);
  line-height: 1.6;
  font-feature-settings: 'ss01' 1;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--tengo-primary-fg); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }

:where(a, button):focus-visible {
  outline: 2px solid var(--tengo-primary);
  outline-offset: 3px;
  border-radius: var(--tengo-radius-sm);
}

.skip-link {
  position: absolute; left: -9999px;
  background: var(--tengo-surface); color: var(--tengo-text-primary);
  padding: var(--tengo-space-sm) var(--tengo-space-md);
  border-radius: var(--tengo-radius-md); z-index: 100;
}
.skip-link:focus { left: var(--tengo-space-md); top: var(--tengo-space-md); }

/* -------- Layout -------- */
.wrap {
  width: 100%;
  max-width: var(--web-container);
  margin-inline: auto;
  padding-inline: var(--web-gutter);
}
.section { padding-block: var(--web-section); }
.section + .section { border-top: 1px solid var(--tengo-border); }

/* -------- Tipografía -------- */
.display {
  font-size: var(--web-display);
  font-weight: var(--tengo-weight-semi);
  letter-spacing: var(--web-track-display);
  line-height: 1.05;
}
.h1 {
  font-size: var(--web-h1);
  font-weight: var(--tengo-weight-semi);
  letter-spacing: var(--web-track-h1);
  line-height: 1.15;
}
.h2 {
  font-size: var(--web-h2);
  font-weight: var(--tengo-weight-semi);
  letter-spacing: var(--web-track-h2);
  line-height: 1.25;
}
.h3 {
  font-size: var(--web-h3);
  font-weight: var(--tengo-weight-semi);
  line-height: 1.35;
}
.lead {
  font-size: var(--web-body-lg);
  color: var(--tengo-text-secondary);
  line-height: 1.55;
  max-width: 54ch;
}
.muted { color: var(--tengo-text-secondary); }
.eyebrow {
  font-size: var(--tengo-text-label);
  font-weight: var(--tengo-weight-semi);
  letter-spacing: var(--tengo-track-label);
  text-transform: uppercase;
  color: var(--tengo-text-secondary);
}
.wordmark {
  font-size: 27px;
  font-weight: var(--tengo-weight-bold);
  letter-spacing: -0.025em;
  color: var(--tengo-primary);
  line-height: 1;
}

/* -------- Botones -------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--tengo-space-sm);
  min-height: 50px;
  padding: 0 var(--tengo-space-lg);
  border: 1px solid transparent;
  border-radius: var(--tengo-radius-pill);
  font-family: inherit;
  font-size: var(--web-body);
  font-weight: var(--tengo-weight-semi);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--tengo-dur-short) var(--tengo-ease-move),
              border-color var(--tengo-dur-short) var(--tengo-ease-move);
}
.btn:hover { text-decoration: none; }
.btn-primary {
  background: var(--tengo-primary);
  color: var(--tengo-text-on-primary);
}
.btn-primary:hover { background: var(--tengo-primary-dark); }
.btn-secondary {
  background: var(--tengo-surface);
  color: var(--tengo-text-primary);
  border-color: var(--tengo-border-strong);
}
.btn-secondary:hover { background: var(--tengo-surface-soft); }
.btn[aria-disabled="true"] {
  opacity: .55;
  cursor: not-allowed;
  pointer-events: none;
}

/* -------- Header -------- */
.site-header {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--tengo-bg) 88%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--tengo-border);
}
.site-header .wrap {
  display: flex; align-items: center; gap: var(--tengo-space-lg);
  min-height: 68px;
}
.site-nav { display: flex; gap: var(--tengo-space-lg); margin-left: auto; }
.site-nav a {
  color: var(--tengo-text-secondary);
  font-size: var(--web-sm);
  font-weight: var(--tengo-weight-medium);
}
.site-nav a:hover { color: var(--tengo-text-primary); text-decoration: none; }
@media (max-width: 760px) {
  /* La nav interior NO se esconde. Esconderla dejaba a las páginas de /legal y
     a la lista de espera sin ninguna navegación en celular: un header con el
     logo y nada más, porque acá no hay burger que la reemplace como en la
     landing. Son dos o tres links cortos y entran. Medido a 390px. */
  .site-nav { gap: var(--tengo-space-md); font-size: var(--tengo-text-sm); }
}

/* -------- Hero -------- */
.hero { padding-block: clamp(48px, 7vw, 88px) var(--web-section); }
.hero-copy > * + * { margin-top: var(--tengo-space-lg); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--tengo-space-md); }
.hero-note {
  font-size: var(--web-sm);
  color: var(--tengo-text-secondary);
}

/* -------- Marco de teléfono -------- */
.phone {
  width: 100%;
  max-width: 320px;
  margin-inline: auto;
  border: 1px solid var(--tengo-border-strong);
  border-radius: 34px;
  padding: 8px;
  background: var(--tengo-surface);
  box-shadow: var(--tengo-shadow-lg);
}
.phone img { border-radius: 26px; }

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--tengo-space-md);
}
.card {
  background: var(--tengo-surface);
  border: 1px solid var(--tengo-border);
  border-radius: var(--tengo-radius-lg);
  padding: var(--tengo-space-lg);
  box-shadow: var(--tengo-shadow-sm);
}
.card h3 { margin-bottom: var(--tengo-space-xs); }
.card p { color: var(--tengo-text-secondary); font-size: var(--web-sm); }

.checklist { display: grid; gap: var(--tengo-space-sm); }
.checklist li {
  display: flex; gap: var(--tengo-space-sm); align-items: flex-start;
  color: var(--tengo-text-secondary);
}
.checklist li::before {
  content: '';
  flex: 0 0 auto;
  width: 7px; height: 7px;
  margin-top: 10px;
  border-radius: 50%;
  background: var(--tengo-primary);
}

/* -------- Cierre -------- */
.closer {
  background: var(--tengo-primary-tint);
  border: 1px solid var(--tengo-primary-light);
  border-radius: var(--tengo-radius-xl);
  padding: clamp(32px, 5vw, 64px);
  text-align: center;
}
.closer > * + * { margin-top: var(--tengo-space-md); }
.closer .lead { margin-inline: auto; }
.closer .hero-actions { justify-content: center; }

/* -------- Footer -------- */
.site-footer {
  border-top: 1px solid var(--tengo-border);
  padding-block: var(--tengo-space-2xl);
  font-size: var(--web-sm);
  color: var(--tengo-text-secondary);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(2, 1fr);
  gap: var(--tengo-space-xl);
}
.site-footer h3 {
  font-size: var(--tengo-text-label);
  font-weight: var(--tengo-weight-semi);
  letter-spacing: var(--tengo-track-label);
  text-transform: uppercase;
  color: var(--tengo-text-secondary);
  margin-bottom: var(--tengo-space-md);
}
.site-footer li + li { margin-top: var(--tengo-space-sm); }
.site-footer a { color: var(--tengo-text-secondary); }
.site-footer a:hover { color: var(--tengo-text-primary); }
.footer-bottom {
  margin-top: var(--tengo-space-xl);
  padding-top: var(--tengo-space-md);
  border-top: 1px solid var(--tengo-border);
  color: var(--tengo-text-secondary);
  font-size: var(--tengo-text-xs);
}
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr; gap: var(--tengo-space-lg); } }

/* -------- Documentos legales -------- */
.doc { max-width: 72ch; padding-block: var(--web-section); }
/* La página del formulario usa una columna del ancho del formulario, no la de
   prosa. Medido a 1280 antes del cambio: el título medía 622, la bajada 566 y
   el formulario 480, los tres pegados a la izquierda, así que el formulario
   quedaba con 142px muertos a la derecha y la página se leía descentrada
   aunque el <main> estuviera centrado (305/305).
   30rem es el max-width de .sx-wait; se le suman los dos gutters para que el
   CONTENIDO mida exactamente eso y todo comparta el mismo borde. */
.doc--forma { max-width: calc(30rem + var(--web-gutter) * 2); }
/* Arriba entra menos aire que en una página de documento. --web-section da
   112px medidos a 1280, que sirve para prosa larga (legal) y es de más acá:
   el formulario es el objeto de la página y conviene que se vea sin scrollear.
   Abajo se conserva el espaciado grande, antes del footer. */
.doc--forma { padding-block: clamp(28px, 4.5vw, 56px) var(--web-section); }
.doc--forma .lead { max-width: none; }
.doc > * + * { margin-top: var(--tengo-space-md); }
.doc h2 { margin-top: var(--tengo-space-2xl); }
.doc h3 { margin-top: var(--tengo-space-lg); }
.doc ul { display: grid; gap: var(--tengo-space-sm); padding-left: var(--tengo-space-md); list-style: disc; }
.doc li { color: var(--tengo-text-secondary); }
.doc table { width: 100%; border-collapse: collapse; font-size: var(--web-sm); }
.doc th, .doc td {
  text-align: left; vertical-align: top;
  padding: var(--tengo-space-sm);
  border-bottom: 1px solid var(--tengo-border);
}
.doc th { color: var(--tengo-text-secondary); font-weight: var(--tengo-weight-semi); }
.doc td { color: var(--tengo-text-secondary); }
.doc-meta { font-size: var(--web-sm); color: var(--tengo-text-secondary); }

/* Aviso de borrador — se borra cuando legal aprueba el texto */

/* Marcador de dato pendiente de confirmar */

/* Disclaimer legal del footer. El color explícito no es cosmético: heredar
   el blanco al 82% del footer da 3,92:1 en modo oscuro sobre el morado, por
   debajo del 4,5:1. Blanco pleno da 8,01 en claro y 5,02 en oscuro. */
.footer-legal {
  margin-top: var(--tengo-space-xl);
  padding-top: var(--tengo-space-md);
  border-top: 1px solid var(--tengo-border);
  font-size: var(--tengo-text-xs);
  color: var(--tengo-text-secondary);
}
/* Un solo párrafo corrido, a ancho completo. Decisión del founder del 20-ago,
   tomada viendo las tres formas comparadas sobre el sitio real.

   Queda dicho el reparo: medido, son 179 caracteres por línea, contra los ~75
   que se leen cómodos. La compensación tipográfica para una medida larga es
   más interlineado — le da al ojo un escalón claro para encontrar el arranque
   de la línea siguiente. Por eso el line-height sube acá y sólo acá.

   La versión anterior usaba dos columnas para llenar el ancho sin estirar la
   línea. Se retira: era una convención de impresión, no de footers web. */
.footer-legal > p { line-height: 1.8; }
.footer-legal p + p { margin-top: var(--tengo-space-sm); }
.footer-legal strong { font-weight: var(--tengo-weight-semi); }
.footer-legal + .footer-bottom { margin-top: var(--tengo-space-md); border-top: 0; padding-top: 0; }

/* 7 — En móvil los enlaces del footer son la única navegación y medían 17px
   de alto. La regla es acotada a .footer-grid a propósito: la variante amplia
   metía una caja de 44px en medio de la frase legal, y pegaba también en
   legal/*.html, cuyo footer son tres enlaces en prosa. */
@media (max-width: 760px) {
  .footer-grid li a { display: flex; align-items: center; min-height: var(--web-tap-min); }
}