/* ==========================================================================
   Finde · Base — reset, marco de teléfono y layout de pantalla
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--page);
  font-family: var(--font-text);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  color: var(--text-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, p, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: none; background: none; padding: 0; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* Cualquier regla de autor con "display" (p. ej. .sum-row{display:flex}) le
   gana en cascada a [hidden] del user-agent, aunque tenga menos prioridad
   visual — el origen pesa antes que la especificidad. Sin esto, ocultar un
   elemento que ya tiene su propio display definido no funciona. */
[hidden] { display: none !important; }

:focus-visible {
  outline: 2px solid var(--highlight);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Movimiento (D-16): principio 5 — quien pide menos movimiento en su
   sistema operativo lo recibe. No es solo cortesía de accesibilidad: es el
   mismo principio 2 ("nada bloquea el toque") llevado a su versión más
   estricta. Corta duración e iteración de CUALQUIER animación/transición,
   en todas las pantallas, sin tener que tocar cada una. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* D-145 · Jerson: "se sigue viendo con cortes" al cambiar de pestaña — cada
   una navega a un HTML distinto (recarga completa), y eso el navegador lo
   resolvía de un salto: la página vieja desaparece, blanco, aparece la
   nueva. `@view-transition` (cross-document, soportado desde Chrome/Edge
   126 y Safari 18.2 en iOS/macOS — no Firefox todavía) le pide al navegador
   que capture cómo se veía la página anterior y la desvanezca hacia la
   nueva en vez de cortar — sin JS, con solo esta regla en las dos puntas de
   la navegación (y como todas las pantallas cargan este mismo base.css, con
   ponerla acá alcanza para toda la app). La animación propia de la cápsula
   (js/chrome.js, D-144) sigue viva encima de este desvanecido — no compite,
   lo completa: una tapa el corte entre documentos, la otra resuelve cómo se
   mueve el contenido de la barra en sí. */
@view-transition { navigation: auto; }
/* D-145 · Jerson: "por qué se siente tan poco fluido... el cambio de
   pantalla se toma su tiempo aún" — sin esto, el navegador usa SU propia
   duración por defecto para el desvanecido (pensada para páginas web
   comunes, no para una barra de navegación que debería sentirse instantánea)
   y esa duración se suma al tiempo real de carga, no lo reemplaza. La bajamos
   a --dur-base (200ms, el mismo tiempo "rápido" que ya usa el resto de la
   app) en vez del default del navegador. */
::view-transition-old(root), ::view-transition-new(root) {
  animation-duration: var(--dur-base);
  animation-timing-function: var(--ease);
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* --- Marco del teléfono ---------------------------------------------------
   MOBILE FIRST: por defecto la app ocupa toda la pantalla, sin marco. Así el
   prototipo abierto en un teléfono real se ve como una app, no como la foto
   de un teléfono dentro de otro teléfono.
   A partir de 480 px aparece el marco, para revisarlo en el escritorio.
   ------------------------------------------------------------------------ */

.canvas { min-height: 100%; }

.phone {
  position: relative;
  width: 100%;
  height: 100dvh;
  background: var(--bg-app);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  isolation: isolate;
}

@media (min-width: 480px) {
  .canvas {
    display: grid;
    place-items: center;
    padding: var(--space-10) var(--space-6);
  }
  .phone {
    width: var(--phone-w);
    height: var(--phone-h);
    flex: none;
    border-radius: var(--phone-radius);
    box-shadow: var(--shadow-raised);
  }
}

/* --- Cuerpo de pantalla --------------------------------------------------- */

.screen {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Zona scrolleable. El scrollbar se oculta para que se lea como app. */
.screen__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.screen__body::-webkit-scrollbar { display: none; }

.screen__pad { padding: 0 var(--gutter); }

/* Barra de acción fija al pie, sobre el contenido. */
.screen__footer {
  flex: none;
  padding: var(--space-4) var(--gutter) var(--space-8);
  background: var(--bg-app);
  border-top: var(--border-width) solid transparent;
}
.screen__footer--divided { border-top-color: var(--border-subtle); }
.screen__footer--surface { background: var(--bg-surface); }

/* --- Utilidades de texto -------------------------------------------------- */

.title-xl, .title-lg, .title-md, .title-sm {
  font-family: var(--font-display);
  color: var(--text-title);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  text-wrap: balance;
}
.title-xl { font-size: var(--text-3xl); font-weight: var(--weight-bold); }
.title-lg { font-size: var(--text-2xl); font-weight: var(--weight-bold); }
.title-md { font-size: var(--text-xl); font-weight: var(--weight-semi); }
.title-sm { font-size: var(--text-lg); font-weight: var(--weight-semi); }

.body    { font-size: var(--text-md); color: var(--text-body); }
.body-sm { font-size: var(--text-sm); color: var(--text-body); }
.muted   { color: var(--text-muted); }

.overline {
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}

.accent { color: var(--accent); }      /* solo en cosas tocables */
.hl     { color: var(--highlight); }   /* destacado dentro de un titular */
.money  { color: var(--money); }

.stack > * + * { margin-top: var(--space-3); }
.stack-4 > * + * { margin-top: var(--space-4); }
.stack-6 > * + * { margin-top: var(--space-6); }

/* --- Logotipo ------------------------------------------------------------- */

.logo {
  font-family: var(--font-logo);
  font-weight: var(--weight-black);
  letter-spacing: -0.04em;
  color: var(--ink-900);
  line-height: 1;
}
.logo::after {
  content: "";
  display: inline-block;
  width: .22em;
  height: .22em;
  border-radius: 50%;
  background: var(--accent);
  margin-left: .05em;
  vertical-align: -.02em;
}
.logo--xl { font-size: 44px; }
.logo--md { font-size: 24px; }
/* D-48 · El punto de Finde como gesto de la marca (Jerson: "me encantaba esa
   animación de Finde con el puntito… aprovechemos esa idea en otras partes,
   como parte del concepto, sin exagerar"). Con .logo--salta el punto cae una
   sola vez al llegar, rebota y se aplasta, igual que en el cargador. */
.logo--salta::after { transform-origin: 50% 100%; animation: logo-punto-cae 900ms 320ms both; }
@keyframes logo-punto-cae {
  0%   { transform: translateY(-1.6em) scale(.9, 1.1); opacity: 0; animation-timing-function: cubic-bezier(.6, 0, .8, .2); }
  12%  { opacity: 1; }
  40%  { transform: translateY(0) scale(1.4, .66); animation-timing-function: cubic-bezier(.2, .8, .4, 1); }
  58%  { transform: translateY(-.32em) scale(.94, 1.08); animation-timing-function: cubic-bezier(.6, 0, .8, .2); }
  74%  { transform: translateY(0) scale(1.14, .88); }
  86%  { transform: translateY(0) scale(.97, 1.03); }
  100% { transform: none; }
}
@media (prefers-reduced-motion: reduce) { .logo--salta::after { animation: none; } }


/* Sin zoom al escribir: Safari (y Chrome en iOS) agranda la página cuando se toca
   un campo con letra menor a 16 px, y la deja agrandada al cerrar el teclado.
   Jerson: "se escala cuando aparece el teclado". En pantallas táctiles los campos
   van a 16 px; en escritorio siguen con la letra del sistema. No se bloquea el
   zoom del usuario (nada de maximum-scale en el viewport). */
@media (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea { font-size: 16px !important; }
}