/* La página de espera de suprafood.app: la Landing v2, construida 1:1 con su
   diseño aprobado (docs/design/landing/spec.md y sus tableros
   fuente/landing-390.dc.html y fuente/landing-1440.dc.html, PR #464).
   Los valores base son los del tablero de 390; desde 1200 px van los del de
   1440, con el contenido a 1160 px. Los colores son los tokens compartidos con
   la app (fuente/tokens.css, el bloque --marca-*) y los de la spec («Tokens»).
   Las fuentes se sirven desde el mismo origen: Inter variable (opsz 14–32,
   así lo de 32 px o más es Inter Display) y Nunito. */

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-latin-opsz-wght.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nunito";
  src: url("/fonts/nunito-latin-wght.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* fuente/tokens.css */
  --primary: #16a34a;
  --primary-press: #166534;
  --marca-text-primary: #1c1c1e;
  --marca-text-secondary: #6e6e73;
  --marca-action: #15803d;
  --marca-action-tint-08: rgba(21, 128, 61, 0.08);
  --marca-action-tint-12: rgba(21, 128, 61, 0.12);
  /* spec.md, «Tokens» */
  --paper: #f7f4ec;
  --paper-light: #fbf9f4;
  --photo: #efeadf;
  --line: #e4ded1;
  --line-strong: #cfc8b8;
  --card: #ffffff;
  --danger: #b42318;
  --danger-tint: #fef2f2;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.05), 0 8px 22px rgba(0, 0, 0, 0.06);
  --shadow-plate: 0 1px 2px rgba(0, 0, 0, 0.05), 0 16px 32px -20px rgba(0, 0, 0, 0.4);
  --inter: "Inter", "Segoe UI", system-ui, sans-serif;
  --nunito: "Nunito", "Segoe UI", system-ui, sans-serif;
  /* The simple pages (the notice, /baja, /borrar-cuenta and the 404). */
  --ink: var(--marca-text-primary);
  --ink-2: var(--marca-text-primary);
  --ink-3: var(--marca-text-secondary);
  --green: var(--marca-action);
  --green-deep: var(--primary-press);
  --display: var(--inter);
  --body: var(--nunito);
  /* The page's side margin; the muro and the band of «en días» go past it. */
  --gutter: max(16px, calc((100vw - 640px) / 2));
  color-scheme: light;
}

* { box-sizing: border-box; }

html {
  background: var(--paper);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(520px 380px at -40px -30px, rgba(134, 239, 172, 0.36) 0%, rgba(134, 239, 172, 0) 62%),
    radial-gradient(420px 320px at calc(100% + 40px) 20px, rgba(254, 243, 199, 0.9) 0%, rgba(254, 243, 199, 0) 60%),
    var(--paper);
  background-repeat: no-repeat;
  color: var(--marca-text-primary);
  font-family: var(--nunito);
  -webkit-font-smoothing: antialiased;
}

[hidden] { display: none !important; }

a { color: var(--marca-action); }
a:hover { color: var(--primary-press); }

:focus-visible {
  outline: 3px solid var(--marca-action);
  outline-offset: 3px;
}

img { max-width: 100%; }

.skip {
  position: absolute;
  z-index: 10;
  left: 16px;
  top: -48px;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--marca-action);
  color: #ffffff;
  font-family: var(--inter);
  font-weight: 600;
}
.skip:focus { top: 16px; color: #ffffff; }

.site {
  position: relative;
  overflow-x: clip;
  padding: 18px var(--gutter) 48px;
}

h2 {
  margin: 0;
  font-family: var(--inter);
  font-weight: 800;
  font-size: 34px;
  line-height: 35px;
  letter-spacing: -0.04em;
  color: var(--marca-text-primary);
  text-wrap: balance;
}

.bajada {
  margin: 16px 0 0;
  font-family: var(--nunito);
  font-size: 19px;
  line-height: 1.45;
  color: var(--marca-text-primary);
  text-wrap: pretty;
}

/* ---------- Las marcas de nota ---------- */

.nm {
  position: relative;
  top: -0.5em;
  margin-left: 1px;
  font-family: var(--inter);
  font-style: italic;
  font-weight: 700;
  font-size: 0.62em;
  line-height: 0;
  color: var(--marca-action);
  text-decoration: none;
}
.nm::before,
.nm-i::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}

/* ---------- Las citas plegables ---------- */

.citas {
  display: flex;
  flex-wrap: wrap;
  gap: 0 8px;
  justify-content: flex-start;
  align-items: flex-start;
  margin-top: 8px;
}
.citas-centro { justify-content: center; }
.cita { margin: 0; }
.cita summary {
  display: flex;
  align-items: center;
  min-height: 44px;
  max-width: 100%;
  cursor: pointer;
  list-style: none;
}
.cita summary::-webkit-details-marker { display: none; }
.cita summary:focus-visible { outline: none; }
.cita summary:focus-visible .cita-chip {
  outline: 3px solid var(--marca-action);
  outline-offset: 3px;
}
.cita-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  min-height: 28px;
  padding: 6px 10px 6px 12px;
  border-radius: 14px;
  background: var(--marca-action-tint-12);
  color: var(--primary-press);
  font-family: var(--inter);
  font-weight: 700;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.005em;
}
.cita-chevron { flex: 0 0 12px; }
.cita[open] > summary .cita-chevron { transform: rotate(180deg); }
.cita-fuentes {
  display: flex;
  flex-direction: column;
  padding-left: 12px;
  font-family: var(--inter);
  font-weight: 600;
  font-size: 12.5px;
  line-height: 16px;
}
.cita-fuentes a {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: var(--marca-action);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.cita-ext {
  display: inline-block;
  margin-left: 4px;
  vertical-align: -1px;
}

/* ---------- Arriba ---------- */

.top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 40px;
}
/* The WhatsApp chip keeps its 44 px target inside the 40 px bar, as before;
   with big text the bar grows and wraps instead of pushing it off screen. */
.top > .top-canal { margin-block: -2px; }

.brand {
  margin: 0;
  color: var(--primary);
  font-family: var(--inter);
  font-optical-sizing: auto;
  font-variation-settings: "opsz" 32;
  font-weight: 700;
  letter-spacing: -0.025em;
  font-size: 26px;
  line-height: 1;
}
.brand a { color: inherit; text-decoration: none; }

.top-canal {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
}
.top-canal span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px 7px 10px;
  border-radius: 999px;
  background: var(--marca-action-tint-12);
  color: var(--primary-press);
  font-family: var(--inter);
  font-weight: 700;
  font-size: 13px;
  line-height: 16px;
  letter-spacing: -0.005em;
}
.top-canal svg { flex: 0 0 16px; }
.top-canal:focus-visible { outline: none; }
.top-canal:focus-visible span { outline: 3px solid var(--marca-action); outline-offset: 3px; }

/* ---------- El héroe: el título, el muro y la tarjeta ---------- */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "texto" "muro" "tarjeta";
  margin-top: 28px;
}
.hero-texto { grid-area: texto; min-width: 0; }
.hero-tarjeta { grid-area: tarjeta; min-width: 0; }
.muro-zona { grid-area: muro; }

h1 {
  margin: 0;
  font-family: var(--inter);
  font-optical-sizing: auto;
  font-weight: 800;
  font-size: 54px;
  line-height: 0.96;
  letter-spacing: -0.05em;
  color: var(--marca-text-primary);
  text-wrap: balance;
}

.lede {
  margin: 18px 0 0;
  font-family: var(--nunito);
  font-size: 20px;
  line-height: 1.42;
  color: var(--marca-text-primary);
  text-wrap: pretty;
}
/* In the phone the subtitle wraps by itself in two lines; on a desktop it goes one sentence per line. */
.lede-corte { display: none; }

/* El dato de la portada (Product Design, 24-10-2026): un bloque de dato, sin
   tarjeta ni sombra, con un filete fino arriba. A la izquierda la cifra, en el
   verde de acción y con la Inter Display del H1; a la derecha el título y la
   línea de apoyo; debajo, su chip de cita. */
.dato {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "cifra texto" "citas citas";
  column-gap: 14px;
  align-items: start;
  margin-top: 20px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.dato-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.dato-cifra {
  grid-area: cifra;
  display: flex;
  flex-direction: column;
  margin: 0;
}
.dato-cerca {
  font-family: var(--inter);
  font-weight: 600;
  font-size: 13px;
  line-height: 1.23;
  color: var(--marca-text-primary);
}
.dato-numero {
  font-family: var(--inter);
  font-optical-sizing: auto;
  font-weight: 800;
  font-size: 44px;
  line-height: 1;
  letter-spacing: -0.045em;
  color: var(--marca-action);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.dato-texto { grid-area: texto; min-width: 0; padding-top: 2px; }
.dato-titulo {
  margin: 0;
  font-family: var(--inter);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--marca-text-primary);
  text-wrap: pretty;
}
.dato-apoyo {
  margin: 3px 0 0;
  font-family: var(--nunito);
  font-size: 14px;
  line-height: 1.29;
  color: var(--marca-text-secondary);
  text-wrap: pretty;
}
/* The chip keeps its 44 px target, but only its 28 px are seen: the rest of
   the target overlaps the space around it. */
.dato-citas { grid-area: citas; margin-top: 4px; }
.dato-citas .cita summary { margin-block: -8px; }
.dato-citas .cita[open] summary { margin-bottom: 0; }
.dato-citas .cita-fuentes { padding-bottom: 4px; }

.muro-zona {
  position: relative;
  margin: 16px calc(-1 * var(--gutter)) 0;
}
.muro {
  overflow: hidden;
  padding-bottom: 20px;
  margin-bottom: -20px;
}
.muro-fila {
  --tile: 132px;
  --gap: 12px;
  --set: calc(12 * (var(--tile) + var(--gap)));
  --dur: 58s;
  display: flex;
  gap: var(--gap);
  width: max-content;
  margin: 0 0 var(--gap);
  padding: 0 var(--gap) 0 0;
  list-style: none;
  transform: translateX(var(--x0));
}
.muro-fila-0 { --x0: calc(-0.25 * (var(--tile) + var(--gap))); }
.muro-fila-1 { --x0: calc(-0.75 * (var(--tile) + var(--gap))); --dur: 64s; }
.muro-fila li {
  flex: 0 0 var(--tile);
  height: var(--tile);
}
.muro-fila img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20px;
  background: var(--photo);
  box-shadow: var(--shadow-plate);
}

.muro-pausa {
  position: absolute;
  z-index: 3;
  left: var(--gutter);
  top: 110px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.muro-pausa > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 18px;
  background: #ffffff;
  color: var(--marca-text-primary);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 6px 16px -6px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}
.muro-pausa .play { display: none; }
.muro-pausa[aria-pressed="true"] .pausa { display: none; }
.muro-pausa[aria-pressed="true"] .play { display: block; }
.muro-pausa:focus-visible { outline: none; }
.muro-pausa:focus-visible > span { outline: 3px solid var(--marca-action); outline-offset: 2px; }
.muro-zona:has(.muro-pausa[aria-pressed="true"]) .muro-fila { animation-play-state: paused; }
/* In the phone the muro is one row (Product Design, 24-10-2026), so the form
   starts within the first screen; from 1200 px it has its two rows. */
/* Under 360 px (a 320 phone, or a 390 phone at 200 % zoom) the words go under
   the number, so they never break one word per line. */
@media (max-width: 359.98px) {
  .dato { grid-template-columns: minmax(0, 1fr); grid-template-areas: "cifra" "texto" "citas"; row-gap: 6px; }
}

@media (max-width: 1199.98px) {
  .muro-fila-1 { display: none; }
  .muro-fila { --tile: 112px; }
  .muro-pausa { top: 60px; }
}

.tarjeta-zona {
  position: relative;
  /* 82 px until the dato came in (24-10-2026): with it, 54 px is still room
     for Bita to peek over the card, and the form starts on the first screen. */
  margin-top: 54px;
}
.bita-peek {
  position: absolute;
  z-index: 0;
  right: 20px;
  top: -68px;
}
.bita-asoma { display: block; width: 120px; height: 100px; }

.card {
  position: relative;
  z-index: 1;
  padding: 26px 20px 22px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: var(--shadow-card);
}

form {
  display: grid;
  /* One column that can shrink: with big text (iOS text size, Dynamic Type,
     zoom) nothing inside the card pushes it wider than the screen. */
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  margin: 0;
}
form > * { min-width: 0; }
.card { overflow-wrap: break-word; }

.card h2 {
  font-size: 24px;
  line-height: 1.15;
  letter-spacing: -0.03em;
  text-wrap: wrap;
}

.card form > p {
  margin: -6px 0 6px;
  font-family: var(--nunito);
  font-size: 16px;
  line-height: 1.45;
  color: var(--marca-text-primary);
  text-wrap: pretty;
}

label {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  font-family: var(--inter);
  font-size: 14px;
  font-weight: 600;
  color: var(--marca-text-primary);
}

.optional {
  margin-left: auto;
  min-width: 0;
  font-family: var(--nunito);
  font-weight: 400;
  font-size: 14px;
  color: var(--marca-text-secondary);
}

input[type="text"],
input[type="email"],
select {
  flex: 1 1 100%;
  width: 100%;
  height: 48px;
  margin: 0;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #ffffff;
  color: var(--marca-text-primary);
  font-family: var(--nunito);
  font-size: 17px;
}
input[type="text"]:focus-visible,
input[type="email"]:focus-visible,
select:focus-visible {
  outline: 3px solid var(--marca-action);
  outline-offset: 2px;
  border-color: var(--marca-action);
}
input[aria-invalid="true"],
select[aria-invalid="true"] {
  border: 2px solid var(--danger);
  outline: 3px solid rgba(180, 35, 24, 0.22);
  outline-offset: 1px;
}

.select {
  flex: 1 1 100%;
  position: relative;
  display: block;
}
.select select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 44px;
}
.select select:invalid { color: var(--marca-text-secondary); }
.select svg {
  position: absolute;
  right: 16px;
  top: 16px;
  pointer-events: none;
}

.field-error {
  flex: 1 1 100%;
  display: flex;
  gap: 6px;
  align-items: flex-start;
  margin-top: -2px;
  font-family: var(--nunito);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.4;
  color: var(--danger);
}
.field-error svg,
.error svg { flex: 0 0 16px; margin-top: 2px; }

.check {
  flex-wrap: nowrap;
  gap: 12px;
  align-items: flex-start;
  margin-top: 2px;
  font-family: var(--nunito);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.42;
}
.check input {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin: 1px 0 0;
  accent-color: var(--marca-action);
}
.check span { flex: 1 1 0; min-width: 0; }
.check a {
  color: var(--marca-action);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

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

/* The widget is 300 × 65, like the board's box. Where the card is narrower
   than 300 (big text, zoom, a 320 px phone), main.ts asks Turnstile for its
   compact size, so the widget is never cut. Its iframe sits on a text line,
   so without line-height: 0 the box grows to 71 (measured with the production
   site key too). */
.turnstile {
  width: 300px;
  max-width: 100%;
  min-height: 65px;
  line-height: 0;
}

.error {
  margin: 0;
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--danger-tint);
  color: var(--danger);
  font-family: var(--nunito);
  font-size: 15px;
  line-height: 1.4;
}

.button,
form button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  height: 56px;
  padding: 0 28px;
  border: 0;
  border-radius: 28px;
  background: var(--marca-action);
  color: #ffffff;
  font-family: var(--inter);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
}
.button:hover,
form button:hover { background: var(--primary-press); color: #ffffff; }
form button {
  display: flex;
  width: 100%;
  margin-top: 2px;
}
form button .giro { display: none; }
form button[aria-busy="true"] { cursor: progress; }
form button[aria-busy="true"] .giro { display: block; }

.thanks { display: grid; gap: 12px; }
#thanks-title:focus { outline: none; }
.thanks p {
  margin: 0;
  font-family: var(--nunito);
  font-size: 16px;
  line-height: 1.45;
  color: var(--marca-text-primary);
}
.thanks .button.secondary {
  display: flex;
  gap: 8px;
  margin-top: 4px;
  background: var(--marca-action-tint-08);
  color: var(--primary-press);
}
.thanks .canal-nota {
  font-size: 14px;
  color: var(--marca-text-secondary);
}
.thanks .canal-pronto {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 0;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--paper);
  line-height: 1.4;
}
.canal-pronto span { display: inline-flex; color: var(--marca-action); }

.socials {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.socials a,
.socials .canal-pie-pronto {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 6px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #ffffff;
  color: var(--marca-text-primary);
  font-family: var(--inter);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.socials a:hover { border-color: var(--marca-action); color: var(--primary-press); }
.socials .canal-pie {
  border-color: transparent;
  background: var(--marca-action-tint-08);
  color: var(--primary-press);
}
.socials .canal-pie-pronto {
  border-style: dashed;
  background: transparent;
}
.socials-gracias {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 6px;
}
.socials-gracias li { display: flex; }
.socials-gracias a { flex: 1; }

/* ---------- Hola, soy Bita ---------- */

.bita {
  margin-top: 104px;
  text-align: center;
}
.bita-escena {
  position: relative;
  display: flex;
  justify-content: center;
  margin-bottom: 24px;
}
.bita-halo {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  left: 50%;
  top: 50%;
  width: 594px;
  height: 594px;
  margin: -297px 0 0 -297px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(134, 239, 172, 0.45), rgba(134, 239, 172, 0));
}
.bita-grande { position: relative; z-index: 1; }
.bita-svg-grande { display: block; width: 330px; max-width: 100%; height: auto; aspect-ratio: 330 / 275; }
.bita-texto { position: relative; z-index: 1; }
.bita .bajada {
  margin: 16px auto 0;
  max-width: 32rem;
  font-size: 20px;
}

/* ---------- Te presento a mi familia ---------- */

.familia { margin-top: 112px; }
.familia .bajada { max-width: 34rem; }

.familia-lista {
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}
.miembro {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  column-gap: 16px;
  align-items: start;
  padding: 20px 0 12px;
  border-top: 1px solid var(--line);
}
.miembro-retrato {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 16px;
  width: 104px;
  height: 104px;
  border-radius: 20px;
}
.miembro-bifido .miembro-retrato { background: #eeeafe; }
.miembro-rumino .miembro-retrato { background: #fef8c4; }
.miembro-lacto .miembro-retrato { background: #ccfaf2; }
.miembro-boca .miembro-retrato { background: #fee6e9; }
.miembro-cara {
  display: block;
  overflow: visible;
  width: 72px;
  height: 46px;
}
.miembro-comida {
  position: absolute;
  right: 6px;
  bottom: 6px;
  width: 36px;
  height: 36px;
  overflow: hidden;
  border-radius: 50%;
  border: 2px solid #ffffff;
  background: var(--photo);
  box-shadow: 0 6px 14px -6px rgba(0, 0, 0, 0.35);
}
.miembro-comida img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.85);
}
.miembro-texto { min-width: 0; overflow-wrap: anywhere; }
.miembro-nombre {
  margin: 0;
  font-family: var(--inter);
  font-weight: 800;
  font-size: 24px;
  line-height: 1.1;
  letter-spacing: -0.03em;
}
.miembro-quien,
.miembro-come {
  margin: 6px 0 0;
  font-family: var(--nunito);
  font-size: 16px;
  line-height: 1.42;
  text-wrap: pretty;
}
.miembro-quien { font-weight: 700; line-height: 1.4; }
.miembro .miembro-cita {
  display: block;
  grid-column: 1 / -1;
  margin-top: 6px;
}

.familia-cierre {
  display: grid;
  gap: 20px;
  margin-top: 8px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.familia-mas {
  margin: 0;
  font-family: var(--inter);
  font-weight: 800;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.025em;
  text-wrap: pretty;
}
.familia-datos { display: grid; gap: 12px; }
.familia-datos p {
  margin: 0;
  font-family: var(--nunito);
  font-size: 16px;
  line-height: 1.45;
  text-wrap: pretty;
}

/* ---------- Lo que comes cambia tu microbiota en días ---------- */

.dias {
  margin: 112px calc(-1 * var(--gutter)) 0;
  padding: 56px var(--gutter) 52px;
  background: var(--paper-light);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.dias-cifra {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.dias-24 {
  font-family: var(--inter);
  font-optical-sizing: auto;
  font-weight: 800;
  font-size: 112px;
  line-height: 0.86;
  letter-spacing: -0.02em;
  color: var(--marca-action);
}
.dias-estudio {
  margin-top: 10px;
  font-family: var(--nunito);
  font-size: 16px;
  color: var(--marca-text-secondary);
}
.dias-texto { margin-top: 36px; }
.dias .bajada { max-width: 30rem; }

/* ---------- La cita de Bita ---------- */

.bita-dice {
  margin: 104px auto 0;
  max-width: 9999px;
  text-align: left;
}
.bita-dice figcaption {
  margin: 0 0 12px;
  font-family: var(--inter);
  font-weight: 700;
  font-size: 14px;
  color: var(--marca-action);
}
.bita-dice blockquote {
  margin: 0;
  font-family: var(--inter);
  font-weight: 700;
  font-size: 28px;
  line-height: 1.16;
  letter-spacing: -0.035em;
  color: var(--marca-text-primary);
  text-wrap: balance;
}

/* ---------- Hoy ---------- */

.hoy { margin-top: 112px; }
.hoy-cabeza { text-align: center; }
.chip {
  display: inline-flex;
  margin: 0 0 16px;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--marca-action-tint-12);
  color: var(--primary-press);
  font-family: var(--inter);
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
}

.hoy-grilla {
  display: grid;
  gap: 28px;
  margin-top: 28px;
}
.hoy-col { display: contents; }
.hoy-escena {
  order: 0;
  position: relative;
  height: 774px;
  margin-bottom: 8px;
}
.hoy-nota-1 { order: 1; }
.hoy-nota-2 { order: 2; }
.hoy-nota-3 { order: 3; }
.hoy-nota-4 { order: 4; }

.hoy-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 13px;
  background: var(--marca-action);
  color: #ffffff;
  font-family: var(--inter);
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
  box-shadow: 0 0 0 3px var(--paper);
}
.hoy-nota p {
  margin: 6px 0 0;
  font-family: var(--nunito);
  font-size: 16px;
  line-height: 1.45;
}
.hoy-nota .hoy-nota-titulo {
  margin: 12px 0 0;
  font-family: var(--inter);
  font-weight: 800;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: -0.025em;
}

.telefono-zona {
  position: absolute;
  left: 50%;
  top: 106px;
  margin-left: -159.6px;
}
.telefono {
  position: relative;
  width: 319.2px;
  padding: 9.6px;
  background: #ece8df;
  border-radius: 52.2px;
  box-shadow: inset 0 0 0 1px var(--line-strong), inset 0 0 0 2.5px #ffffff, 0 2px 3px rgba(60, 48, 24, 0.1), 0 36px 70px -24px rgba(60, 48, 24, 0.32);
}
.telefono-boton {
  position: absolute;
  width: 3px;
  border-radius: 2px;
  background: var(--line-strong);
}
.telefono-boton-1 { left: -3px; top: 19%; height: 8.5%; }
.telefono-boton-2 { left: -3px; top: calc(19% + 36px); height: 8.5%; }
.telefono-boton-3 { right: -3px; top: 26%; height: 13%; }
.telefono-pantalla {
  position: relative;
  width: 300px;
  height: 649.2px;
  border-radius: 42.6px;
  overflow: hidden;
  background: #f2f2f7;
  box-shadow: 0 0 0 1px var(--line-strong);
}
.telefono-escala {
  width: 390px;
  height: 844px;
  transform: scale(0.7692);
  transform-origin: 0 0;
}
.telefono-isla {
  position: absolute;
  left: 50%;
  top: 8.5px;
  width: 96.9px;
  height: 28.5px;
  margin-left: -48.5px;
  border-radius: 14.2px;
  background: #ece8df;
  border: 1px solid var(--line-strong);
}

.microbiota-zona {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 34px;
  width: 322.2px;
  margin-left: -161.1px;
}
.microbiota {
  width: 358px;
  transform: scale(0.9);
  transform-origin: 0 0;
}

.hoy-marca { position: absolute; }

/* The iPhone of Hoy is drawn at the size of the 390 board. On a narrower
   screen (a 320 px phone, or 200 % zoom, which leaves 160 to 195 CSS px) the
   whole scene shrinks with it instead of being cut at the edges. */
@media (max-width: 389.98px) { .hoy-escena { zoom: 0.9; } }
@media (max-width: 353.98px) { .hoy-escena { zoom: 0.8; } }
@media (max-width: 317.98px) { .hoy-escena { zoom: 0.7; } }
@media (max-width: 282.98px) { .hoy-escena { zoom: 0.6; } }
@media (max-width: 246.98px) { .hoy-escena { zoom: 0.5; } }
@media (max-width: 210.98px) { .hoy-escena { zoom: 0.45; } }
@media (max-width: 192.98px) { .hoy-escena { zoom: 0.35; } }
.hoy-marca-2 { left: 325px; top: 336px; }
.hoy-marca-4 { left: 325px; top: 372px; }
.hoy-marca-1 { left: 0; top: -32px; }
.hoy-marca-3 { left: 296px; top: -32px; }

.nm-i {
  position: absolute;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 13px;
  border: 1px solid var(--line);
  background: #ffffff;
  color: var(--marca-action);
  font-family: var(--inter);
  font-style: italic;
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.telefono-zona .nm-i { left: 301px; top: 650px; }
.microbiota-zona .nm-i { left: 309px; top: 211px; }

/* ---------- Comidas que se te antojan ---------- */

.recetas { margin-top: 112px; }
.recetas .bajada { max-width: 38rem; }
.recetas-galeria {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 14px;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
}
.recetas-galeria li { min-width: 0; }
/* The anticuchos come in a <picture>: the board's 1254 px JPEG on the phone,
   its 560 px WebP from 1200 px. */
.recetas-galeria picture { display: contents; }
.recetas-galeria img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 20px;
  background: var(--photo);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.receta-nombre {
  margin: 12px 0 0;
  font-family: var(--inter);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.3;
  letter-spacing: -0.015em;
  text-wrap: pretty;
}
.porque {
  display: grid;
  gap: 4px;
  margin-top: 8px;
}
.porque p {
  display: flex;
  min-width: 0;
  overflow-wrap: anywhere;
  gap: 8px;
  align-items: flex-start;
  margin: 0;
  font-family: var(--nunito);
  font-size: 14px;
  line-height: 20px;
  text-wrap: pretty;
  color: var(--marca-text-primary);
}
.porque .porque-familia { color: var(--primary-press); }
.porque b { font-family: var(--inter); font-weight: 800; }
.porque-icono {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  margin-top: 2px;
}
/* The big ones: the first and the last in the phone. */
.recetas-galeria li:first-child,
.recetas-galeria li:last-child { grid-column: 1 / -1; }
.recetas-galeria li:first-child img,
.recetas-galeria li:last-child img { aspect-ratio: 4 / 3; }
.recetas-galeria li:first-child .receta-nombre,
.recetas-galeria li:last-child .receta-nombre { font-size: 17px; }
.recetas-galeria li:first-child .porque p,
.recetas-galeria li:last-child .porque p { font-size: 15px; line-height: 21px; }
.recetas-galeria li:first-child .porque-icono,
.recetas-galeria li:last-child .porque-icono { flex-basis: 17px; width: 17px; height: 17px; }

/* ---------- El segundo botón ---------- */

.cta {
  margin-top: 112px;
  padding: 56px 0 0;
  border-top: 1px solid var(--line);
  text-align: center;
}
.cta h2 { font-size: 30px; line-height: 31px; }
.cta p {
  margin: 12px 0 0;
  font-family: var(--nunito);
  font-size: 18px;
  line-height: 1.45;
}
.cta .button {
  display: flex;
  width: 100%;
  margin-top: 28px;
}

/* ---------- Notas ---------- */

.notas {
  margin-top: 72px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.notas h2 {
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.notas ol {
  display: grid;
  gap: 4px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
.nota {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  column-gap: 8px;
  align-items: start;
  padding: 6px 8px;
  margin: 0 -8px 4px;
  border-radius: 12px;
  break-inside: avoid;
  scroll-margin-top: 24px;
}
.nota:target { background: var(--marca-action-tint-08); }
.nota-letra {
  font-family: var(--inter);
  font-style: italic;
  font-weight: 700;
  font-size: 15px;
  line-height: 22px;
  color: var(--marca-action);
}
.nota p {
  margin: 0;
  font-family: var(--nunito);
  font-size: 15px;
  line-height: 22px;
  text-wrap: pretty;
}
.nota .citas { margin-top: 2px; }

/* ---------- El pie ---------- */

.site-footer {
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  font-family: var(--nunito);
  font-size: 14px;
  line-height: 1.6;
  color: var(--marca-text-secondary);
}
.socials-footer { margin: 0 0 18px; }
.site-footer > p {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 6px;
  margin: 0;
}
.site-footer > p a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--marca-action);
}

/* ---------- Escritorio: el tablero de 1440 ---------- */

@media (min-width: 1200px) {
  :root { --gutter: max(20px, calc((100vw - 1160px) / 2)); }

  body {
    background:
      radial-gradient(920px 560px at -80px -60px, rgba(134, 239, 172, 0.38) 0%, rgba(134, 239, 172, 0) 62%),
      radial-gradient(720px 460px at calc(100% + 60px) 40px, rgba(254, 243, 199, 0.95) 0%, rgba(254, 243, 199, 0) 60%),
      var(--paper);
    background-repeat: no-repeat;
  }

  .site { padding: 32px var(--gutter) 64px; }
  .brand { font-size: 30px; }

  h2 { font-size: 54px; line-height: 54px; }
  .bajada { font-size: 21px; }

  .cita-chip { font-size: 12.5px; }

  .hero {
    grid-template-columns: minmax(0, 1fr) 440px;
    grid-template-areas: "texto tarjeta" "muro muro";
    column-gap: 88px;
    align-items: start;
    margin-top: 36px;
  }
  .hero-texto,
  .hero-tarjeta { position: relative; z-index: 2; }
  .hero-texto { padding-top: 64px; }
  h1 { font-size: 112px; line-height: 0.93; }
  .lede { margin-top: 28px; font-size: 24px; }
  .lede-corte { display: inline; }
  .dato { max-width: 440px; margin-top: 28px; column-gap: 18px; padding-top: 14px; }
  .dato-cerca { font-size: 14px; line-height: 1.29; }
  .dato-numero { font-size: 56px; }
  .dato-titulo { font-size: 17px; line-height: 1.29; }
  .dato-apoyo { font-size: 15px; line-height: 1.33; }

  /* -372 px until the dato came in (24-10-2026): the muro now starts 28 px
     under it, so the plates never run under its words. */
  .muro-zona {
    z-index: 1;
    margin: -220px calc(-1 * var(--gutter)) 0;
  }
  .muro-fila { --tile: 232px; --gap: 20px; --dur: 101s; }
  .muro-fila-1 { --dur: 112s; }
  .muro-fila img { border-radius: 28px; }
  .muro-pausa { top: 176px; }

  .tarjeta-zona { margin-top: 75px; }
  .bita-peek { right: 30px; top: -75px; }
  .bita-asoma { width: 132px; height: 110px; }
  .card {
    padding: 28px 30px 26px;
    border-radius: 24px;
  }
  .card h2 { font-size: 26px; }

  .bita { margin-top: 152px; }
  .bita-escena { margin-bottom: 32px; }
  .bita-halo {
    width: 936px;
    height: 936px;
    margin: -468px 0 0 -468px;
  }
  .bita-svg-grande { width: 520px; height: 433px; }
  .bita .bajada { font-size: 24px; }

  .familia { margin-top: 168px; }
  .familia-cabeza {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 96px;
    align-items: end;
  }
  .familia-cabeza .bajada { margin: 0; }
  .familia-lista {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 32px;
    align-items: start;
    margin-top: 56px;
  }
  .miembro {
    display: block;
    min-width: 0;
    padding: 0;
    border-top: 0;
  }
  .miembro-retrato {
    padding-top: 36px;
    width: auto;
    height: auto;
    aspect-ratio: 5 / 4;
    border-radius: 24px;
  }
  .miembro-cara { width: 160px; height: 102px; }
  .miembro-comida {
    right: 14px;
    bottom: 14px;
    width: 60px;
    height: 60px;
    border-width: 3px;
  }
  .miembro-texto { margin-top: 20px; }
  .miembro-nombre { font-size: 30px; }
  .miembro-quien,
  .miembro-come { font-size: 17px; }
  .miembro .miembro-cita { margin-top: 2px; }
  .familia-cierre {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 96px;
    align-items: start;
    margin-top: 56px;
    padding-top: 32px;
  }
  .familia-mas { font-size: 30px; }
  .familia-datos { gap: 16px; }
  .familia-datos p { font-size: 17px; }

  .dias {
    margin-top: 168px;
    padding: 112px var(--gutter);
  }
  .dias-grilla {
    display: grid;
    grid-template-columns: 420px minmax(0, 1fr);
    column-gap: 96px;
    align-items: center;
  }
  .dias-24 { font-size: 208px; }
  .dias-estudio { margin-top: 18px; font-size: 18px; }
  .dias-texto { margin-top: 0; }

  .bita-dice {
    margin-top: 152px;
    max-width: 920px;
    text-align: center;
  }
  .bita-dice figcaption { margin-bottom: 18px; font-size: 15px; }
  .bita-dice blockquote { font-size: 48px; line-height: 1.1; }

  .hoy { margin-top: 168px; }
  .hoy-grilla {
    grid-template-columns: minmax(0, 1fr) 387px minmax(0, 1fr);
    column-gap: 88px;
    gap: 0 88px;
    align-items: start;
    margin-top: 64px;
  }
  .hoy-col { display: grid; max-width: 300px; }
  .hoy-col-izq { gap: 48px; padding-top: 58px; justify-self: end; }
  .hoy-col-der { gap: 40px; padding-top: 362px; }
  .hoy-escena {
    width: 387px;
    height: 735px;
    margin-bottom: 0;
  }
  .hoy-nota p { font-size: 18px; }
  .hoy-nota .hoy-nota-titulo { font-size: 23px; }

  .telefono-zona { left: 26px; top: 0; margin-left: 0; }
  .telefono {
    width: 351.2px;
    padding: 10.6px;
    border-radius: 57.5px;
  }
  .telefono-boton-2 { top: calc(19% + 40px); }
  .telefono-pantalla {
    width: 330px;
    height: 714.2px;
    border-radius: 46.9px;
  }
  .telefono-escala { transform: scale(0.8462); }
  .telefono-isla {
    top: 9.3px;
    width: 106.6px;
    height: 31.3px;
    margin-left: -53.3px;
    border-radius: 15.7px;
  }
  .microbiota-zona {
    left: 0;
    top: 50px;
    width: 386.6px;
    margin-left: 0;
  }
  .microbiota { transform: scale(1.08); }
  .hoy-marca-2 { left: 367px; top: 370px; }
  .hoy-marca-4 { left: 367px; top: 408px; }
  .hoy-marca-1 { left: -42px; top: 4px; }
  .hoy-marca-3 { left: 403px; top: 4px; }
  .telefono-zona .nm-i { left: 333px; top: 717px; }
  .microbiota-zona .nm-i { left: 374px; top: 256px; }

  .recetas { margin-top: 168px; }
  .recetas-galeria {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 40px 24px;
    margin-top: 48px;
  }
  .recetas-galeria li:last-child { grid-column: auto; }
  .recetas-galeria li:last-child img { aspect-ratio: 1; }
  .recetas-galeria li:nth-child(2) { grid-column: span 2; }
  .recetas-galeria li:first-child { grid-column: span 2; }
  .recetas-galeria li:nth-child(2) img { aspect-ratio: 4 / 3; }
  .receta-nombre,
  .recetas-galeria li:last-child .receta-nombre { font-size: 17px; }
  .porque p,
  .recetas-galeria li:last-child .porque p { font-size: 15px; line-height: 21px; }
  .porque-icono,
  .recetas-galeria li:last-child .porque-icono { flex-basis: 17px; width: 17px; height: 17px; }
  .recetas-galeria li:first-child .receta-nombre,
  .recetas-galeria li:nth-child(2) .receta-nombre { font-size: 20px; }
  .recetas-galeria li:first-child .porque p,
  .recetas-galeria li:nth-child(2) .porque p { font-size: 16px; line-height: 22px; }
  .recetas-galeria li:first-child .porque-icono,
  .recetas-galeria li:nth-child(2) .porque-icono { flex-basis: 18px; width: 18px; height: 18px; }

  .cta {
    margin-top: 168px;
    padding-top: 96px;
  }
  .cta h2 { font-size: 48px; line-height: 48px; }
  .cta p { font-size: 20px; }
  .cta .button {
    display: inline-flex;
    width: auto;
    min-width: 336px; /* the board's 280 px plus its 28 px of padding on each side (content-box) */
  }

  .notas {
    margin-top: 112px;
    padding-top: 32px;
  }
  .notas h2 { font-size: 22px; }
  .notas ol {
    display: block;
    columns: 2;
    column-gap: 64px;
  }

  .site-footer { margin-top: 72px; }
}

/* ---------- Movimiento con sentido, solo para quien lo acepta ---------- */

@media (prefers-reduced-motion: no-preference) {
  .bita-eyes {
    transform-box: fill-box;
    transform-origin: 50% 50%;
    animation: bita-blink 5.2s ease-in-out infinite;
  }
  .bita-peek { animation: bita-peek 1s cubic-bezier(0.34, 1.4, 0.64, 1) 0.75s both; }
  .bita-grande,
  .bita-lost { animation: bita-breathe 5s ease-in-out infinite; }
  .muro-fila-0 { animation: muro-a var(--dur) linear infinite; }
  .muro-fila-1 { animation: muro-b var(--dur) linear infinite; }
  .giro { animation: giro 0.9s linear infinite; }
}

/* The dato's title and citation come in 120 ms after the number starts
   counting (client/dato.ts), once, fading in and rising 8 px. Until the
   script starts the count, the number and the words wait unseen, so «90»
   never flashes before the 0; if the script never runs, they show up still,
   with the final number, at 1.2 s. */
@media (prefers-reduced-motion: no-preference) {
  .dato:not(.dato-entra) .dato-cifra,
  .dato:not(.dato-entra) .dato-texto,
  .dato:not(.dato-entra) .dato-citas { animation: dato-espera 0s linear 1.2s both; }
  .dato-entra .dato-texto,
  .dato-entra .dato-citas,
  .dato-entra .dato-cerca { animation: dato-entra 0.5s cubic-bezier(0.33, 1, 0.68, 1) 120ms both; }
}
@keyframes dato-espera {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes dato-entra {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto; }
  .muro-pausa { display: none; }
}

/* «Tu día, ya pensado» moves each time it comes into view, scrolling down or up (#586, #592), with
   the timing of Anthropic's product videos: «Tu microbiota hoy» fills in
   1.3 s, every number of the card counting at once (ease-out quart, no
   bounce); then each dish card the person can see fades in and rises 10 px
   in 0.26 s, 0.35 s after the one before. landing/src/client/hoy.ts sets the
   classes, the delays (--mov-retraso) and the numbers; with «Reducir
   movimiento» or without JavaScript none of this applies and the still
   picture is all there is. */
.mov-cifra {
  display: inline-block;
  text-align: right;
}
@media (prefers-reduced-motion: no-preference) {
  .hoy-espera [data-mov="anillo"] { stroke-dasharray: 0 166.5; }
  .hoy-espera [data-mov="barra"] { transform: scaleX(0); transform-origin: 0 50%; }
  .hoy-espera [data-mov="plato"] { opacity: 0; transform: translateY(10px); }
  .hoy-vivo [data-mov="anillo"] { transition: stroke-dasharray 1.3s cubic-bezier(0.25, 1, 0.5, 1); }
  .hoy-vivo [data-mov="barra"] {
    transform-origin: 0 50%;
    transition: transform 1.3s cubic-bezier(0.25, 1, 0.5, 1);
  }
  .hoy-vivo [data-mov="plato"] {
    transition:
      opacity 0.26s cubic-bezier(0.33, 1, 0.68, 1) var(--mov-retraso, 0ms),
      transform 0.26s cubic-bezier(0.33, 1, 0.68, 1) var(--mov-retraso, 0ms);
  }
}

@keyframes bita-blink {
  0%, 91%, 100% { transform: scaleY(1); }
  94%, 97% { transform: scaleY(0.08); }
}
@keyframes bita-peek {
  from { transform: translateY(62%); }
  to { transform: none; }
}
@keyframes bita-breathe {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}
@keyframes muro-a {
  from { transform: translateX(var(--x0)); }
  to { transform: translateX(calc(var(--x0) - var(--set))); }
}
@keyframes muro-b {
  from { transform: translateX(calc(var(--x0) - var(--set))); }
  to { transform: translateX(var(--x0)); }
}
@keyframes giro {
  to { transform: rotate(360deg); }
}

/* ---------- Las páginas simples: el aviso, la baja, borrar la cuenta y la 404 ---------- */

.page {
  width: min(680px, calc(100% - 32px));
  margin: 0 auto;
  padding: 24px 0 80px;
}
.page .brand { margin-bottom: 44px; }
.page h1 {
  font-size: clamp(2.125rem, 7vw, 3rem);
  line-height: 1.04;
  letter-spacing: -0.04em;
  margin: 0 0 18px;
}
.page h2 {
  font-size: 1.5rem;
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin: 40px 0 10px;
}
.page p,
.page li {
  color: var(--ink-2);
  font-size: 1.0625rem;
  line-height: 1.6;
  text-wrap: pretty;
}
.page p { margin: 0 0 18px; }
.page strong { color: var(--ink); }
.page ul,
.page ol { padding-left: 1.2rem; }
.page h1[tabindex]:focus { outline: none; }
.page .button { color: #ffffff; }

.baja-form {
  display: grid;
  gap: 14px;
  margin: 8px 0 28px;
  padding: 22px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: var(--shadow-card);
}
.baja-form p { margin: 0; }
.baja-form button { justify-self: start; width: auto; }

.page-404 {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  align-content: center;
  padding-top: 24px;
  padding-bottom: 24px;
}
.page-404 .brand { margin-bottom: 36px; }
.bita-lost {
  display: block;
  width: 180px;
  height: auto;
  margin: 0 0 22px -8px;
}
.page-404 h1 { margin-bottom: 10px; }
.page-404 p:last-child { margin: 10px 0 0; }

@media (min-width: 960px) {
  .page .brand { font-size: 1.875rem; }
  .bita-lost { width: 220px; }
}

/* The 404 Bita blinks like the one on the home page. */
@media (prefers-reduced-motion: no-preference) {
  .bita-svg circle[fill="#1C1C1E"],
  .bita-svg circle[fill="#FFFFFF"] {
    transform-box: fill-box;
    transform-origin: 50% 50%;
    animation: bita-blink 5.2s ease-in-out infinite;
  }
}