/* Landing de nauler v2. Plan y razones en ../DISENO.md.
   Todo color, espacio, radio y grosor sale de tokens.css (copia de
   design/tokens.css). Lo único propio son los alias de abajo, que nombran el
   papel de un token en esta página. */

@font-face { font-family: "Manrope"; src: url("../fuentes/manrope-regular.woff2?v=d513a2f0a558") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("../fuentes/manrope-bold.woff2?v=d513a2f0a558") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("../fuentes/manrope-extrabold.woff2?v=d513a2f0a558") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Kangge"; src: url("../fuentes/kangge-logo.woff2?v=d513a2f0a558") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  /* Papeles de la página (ver la tabla de la paleta en DISENO.md). */
  --fondo: var(--paper);
  --tinta: var(--text);
  --tinta-suave: var(--text-muted);
  --escenario: var(--text);
  --sobre-escenario: var(--paper);
  --sobre-escenario-suave: var(--surface-brand);
  --hecho: var(--brand-strong);
  --cambio: var(--accent-mark);
  --anillo: var(--focus-ring);

  /* Escala 1,25 sobre 17 px (en rem: 1rem = 16 px del navegador). */
  --t-0: 0.875rem;
  --t-1: 1.0625rem;
  --t-2: 1.3125rem;
  --t-3: 1.6875rem;
  --t-4: 2.125rem;
  --t-5: clamp(2.125rem, 1.2rem + 3.6vw, 3.3125rem);
  --t-6: clamp(2.4rem, 1.1rem + 4.6vw, 4.25rem);

  --ancho: 72rem;
  --medida: 62ch;
  --margen: clamp(var(--space-4), 4vw, var(--space-12));
  --ease: cubic-bezier(.2, .7, .1, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--space-16) + var(--space-8)); }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--font-sans);
  font-size: var(--t-1);
  line-height: 1.55;
  overflow-x: clip;
}
h1, h2, h3, p, ol, ul, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
.num { font-variant-numeric: tabular-nums; }
/* Solo para lectores de pantalla (como la de la app, que aquí no se carga). */
.nl-visually-hidden {
  position: absolute; width: var(--stroke-hairline); height: var(--stroke-hairline);
  margin: calc(-1 * var(--stroke-hairline)); padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
a { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: var(--stroke-hairline); }
a:hover { text-decoration-thickness: var(--stroke-focus); }
:focus-visible { outline: var(--stroke-focus) solid var(--anillo); outline-offset: var(--stroke-focus); border-radius: var(--radius-xs); }

.saltar {
  position: absolute; left: var(--space-4); top: calc(-1 * var(--space-16));
  padding: var(--space-2) var(--space-3); background: var(--tinta); color: var(--fondo);
  border-radius: var(--radius-md); z-index: 10;
}
.saltar:focus { top: var(--space-4); }

.logo {
  font-family: "Kangge", var(--font-sans);
  font-size: 1.875rem; line-height: 1; color: var(--hecho); text-decoration: none;
}

/* ── Botones: un solo relleno, el albaricoque, para pedir acceso ─────────── */
.boton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--space-10); padding: 0 var(--space-4);
  border: var(--stroke-control) solid transparent; border-radius: var(--radius-md);
  font: inherit; font-size: var(--t-0); font-weight: 700; line-height: 1.2;
  text-decoration: none; cursor: pointer;
  transition: background-color 120ms, border-color 120ms, color 120ms;
}
.boton--accion { background: var(--accent); color: var(--text-on-accent); }
.boton--accion:hover { background: var(--accent-hover); }
.boton--accion:active { background: var(--accent-active); }
.boton--secundario { background: transparent; color: var(--tinta); border-color: var(--control-border); }
.boton--secundario:hover { background: var(--surface-sunken); }
.boton--fantasma { background: transparent; color: inherit; border-color: transparent; text-decoration: underline; padding-inline: 0; }
.boton--grande { min-height: var(--space-12); padding: 0 var(--space-8); font-size: var(--t-1); }

/* ── Cabecera: fija arriba ──────────────────────────────────────────────── */
.cabecera {
  position: sticky; top: 0; z-index: 20;
  background: var(--fondo); border-bottom: var(--stroke-hairline) solid var(--line);
}
.cabecera__marco {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  max-width: var(--ancho); margin: 0 auto; padding: var(--space-3) var(--margen);
}
.cabecera__nav { display: flex; align-items: center; gap: var(--space-3); }
.cabecera__enlaces { display: flex; gap: var(--space-5); margin-right: var(--space-3); }
.cabecera__enlaces a { font-weight: 700; text-decoration: none; padding-block: var(--space-2); }
.cabecera__enlaces a:hover, .cabecera__enlaces a[aria-current="page"] {
  text-decoration: underline var(--stroke-focus) var(--cambio); text-underline-offset: 0.35em;
}
.menu-boton {
  display: none; min-height: var(--space-10); padding: 0 var(--space-4);
  background: transparent; color: var(--tinta); font: inherit; font-weight: 700;
  border: var(--stroke-control) solid var(--control-border); border-radius: var(--radius-md); cursor: pointer;
}

/* ── Portada ────────────────────────────────────────────────────────────── */
.portada {
  max-width: var(--ancho); margin: 0 auto;
  padding: clamp(var(--space-6), 4vw, var(--space-12)) var(--margen) var(--space-8);
}
.portada__titulo {
  font-size: var(--t-6); font-weight: 800; line-height: 0.98; letter-spacing: -0.035em;
  max-width: 22ch;
}
.portada__titulo .linea { display: block; }
.portada__entrada {
  margin-top: var(--space-5); max-width: var(--medida);
  font-size: var(--t-2); line-height: 1.45; color: var(--tinta-suave);
}
.portada__acciones { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-8); }
.portada--macro .portada__titulo { max-width: 18ch; }
.portada--corta { padding-bottom: var(--space-4); }

/* Secuencia de carga: el titular entra por líneas. */
@media (prefers-reduced-motion: no-preference) {
  .portada__titulo, .portada__entrada, .portada__acciones {
    animation: subir 700ms var(--ease) both;
  }
  .portada__entrada { animation-delay: 140ms; }
  .portada__acciones { animation-delay: 260ms; }
  @keyframes subir { from { opacity: 0; transform: translateY(0.4em); } }
}

/* ── El escenario: la Macro Tool ────────────────────────────────────────── */
.escenario {
  --anillo: var(--sobre-escenario);
  background: var(--escenario); color: var(--sobre-escenario);
  padding: clamp(var(--space-8), 5vw, var(--space-16)) var(--margen);
}
.escenario__marco { max-width: calc(var(--ancho) - 2 * var(--margen)); margin: 0 auto; }
.escenario__cabeza {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: var(--space-2) var(--space-6);
  padding-bottom: var(--space-4); border-bottom: var(--stroke-hairline) solid var(--control-border);
}
.escenario__titulo { font-size: var(--t-2); font-weight: 800; letter-spacing: -0.01em; }
.escenario__nota, .escenario__letra { color: var(--sobre-escenario-suave); font-size: var(--t-0); }

.resumen {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: var(--space-6) var(--space-12); align-items: end;
  padding: var(--space-8) 0;
}
.resumen__quedan { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-3); grid-column: 1; }
.resumen__etiqueta { flex-basis: 100%; font-size: var(--t-2); font-weight: 700; color: var(--sobre-escenario-suave); }
.resumen__cifra {
  font-size: clamp(4rem, 2rem + 11vw, 10rem); font-weight: 800;
  line-height: 0.9; letter-spacing: -0.05em;
}
.resumen__unidad { font-size: var(--t-3); font-weight: 700; }
.resumen__de { grid-column: 1; color: var(--sobre-escenario-suave); }
.escenario[data-pasado] .resumen__cifra { text-decoration: underline var(--stroke-focus) var(--cambio); text-underline-offset: 0.12em; }

.macros { grid-column: 2; grid-row: 1 / span 2; display: grid; gap: var(--space-4); }
.macro { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; }
.macro dt { font-weight: 700; }
.macro dd { font-size: var(--t-0); color: var(--sobre-escenario-suave); text-align: right; white-space: nowrap; }
.barra {
  position: relative; height: var(--space-3); border-radius: var(--radius-pill);
  background: transparent; outline: var(--stroke-hairline) solid var(--control-border);
  overflow: hidden;
}
.barra__comido, .barra__previsto {
  position: absolute; top: 0; bottom: 0; left: 0; width: 0;
  transition: width 420ms var(--ease), left 420ms var(--ease);
}
.barra__comido { background: var(--sobre-escenario-suave); }
.barra__previsto {
  background: repeating-linear-gradient(135deg, var(--sobre-escenario-suave) 0 var(--stroke-control),
    transparent var(--stroke-control) var(--space-1));
}
.barra__exceso {
  position: absolute; top: 0; bottom: 0; right: 0; width: 0; background: var(--cambio);
  transition: width 420ms var(--ease);
}

/* Las comidas: una línea de ticket por comida. */
.comidas { border-top: var(--stroke-hairline) solid var(--control-border); }
.comida {
  display: grid; grid-template-columns: 10rem minmax(0, 1fr) auto;
  gap: var(--space-3) var(--space-6); align-items: start;
  padding: var(--space-5) 0; border-bottom: var(--stroke-hairline) solid var(--control-border);
}
.comida__nombre { font-size: var(--t-2); font-weight: 800; letter-spacing: -0.01em; }
.comida__estado { display: block; margin-top: var(--space-1); font-size: var(--t-0); color: var(--sobre-escenario-suave); }
.comida__estado svg { width: 1em; height: 1em; vertical-align: -0.12em; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.comida[data-estado="saltada"] .comida__nombre { text-decoration: line-through var(--stroke-focus); }
.comida[data-estado="registrada"] .comida__nombre::after { content: ""; }

.alimentos { display: grid; gap: var(--space-1); }
.alimento { display: flex; justify-content: space-between; gap: var(--space-4); max-width: 30rem; }
.alimento__nombre { min-width: 0; }
.alimento__gramos { white-space: nowrap; }
.alimento__antes { color: var(--sobre-escenario-suave); text-decoration: line-through; margin-right: var(--space-2); font-size: var(--t-0); }
.alimento[data-cambiado] .alimento__ahora {
  text-decoration: underline var(--stroke-focus) var(--cambio); text-underline-offset: 0.25em;
}
.alimento[data-fija] .alimento__nombre::after { content: " · fija"; color: var(--sobre-escenario-suave); font-size: var(--t-0); }
.comida[data-estado="saltada"] .alimentos { color: var(--sobre-escenario-suave); }
.comida__kcal { display: block; margin-top: var(--space-2); font-size: var(--t-0); color: var(--sobre-escenario-suave); }

.comida__acciones { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); }
.accion {
  min-height: var(--space-10); padding: 0 var(--space-3);
  background: transparent; color: var(--sobre-escenario);
  border: var(--stroke-control) solid var(--control-border); border-radius: var(--radius-md);
  font: inherit; font-size: var(--t-0); font-weight: 700; cursor: pointer;
  transition: border-color 120ms, background-color 120ms;
}
.accion:hover { border-color: var(--sobre-escenario); }
.accion[aria-pressed="true"] { background: var(--sobre-escenario); color: var(--escenario); border-color: var(--sobre-escenario); }

/* «Comí otra cosa»: el editor en línea. */
.editor {
  grid-column: 2 / -1; display: grid; gap: var(--space-3);
  padding: var(--space-4); border: var(--stroke-hairline) dashed var(--control-border);
  border-radius: var(--radius-md);
}
.editor[hidden] { display: none; }
.editor__fila { display: grid; grid-template-columns: minmax(0, 1fr) 7.5rem; gap: var(--space-3); align-items: end; }
.editor label { display: grid; gap: var(--space-1); font-size: var(--t-0); color: var(--sobre-escenario-suave); }
.editor select, .editor input {
  min-height: var(--space-10); width: 100%;
  background: var(--escenario); color: var(--sobre-escenario);
  border: var(--stroke-control) solid var(--control-border); border-radius: var(--radius-md);
  padding: 0 var(--space-3); font: inherit; font-variant-numeric: tabular-nums;
}
.editor__botones { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.aviso { min-height: var(--space-6); padding: var(--space-5) 0 0; }
.aviso p { max-width: var(--medida); }
.aviso__titulo { font-weight: 800; }
.aviso ul { margin-top: var(--space-2); display: grid; gap: var(--space-1); color: var(--sobre-escenario-suave); }

.escenario__pie {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: var(--space-3) var(--space-6); margin-top: var(--space-6);
}
.escenario__letra { max-width: 48ch; }

/* Entrada del escenario (la segunda animación): las líneas aparecen en
   cascada y las barras se dibujan. */
@media (prefers-reduced-motion: no-preference) {
  .escenario[data-estado="cargando"] .comida { opacity: 0; transform: translateY(var(--space-2)); }
  .comida { transition: opacity 500ms var(--ease), transform 500ms var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }
}

.titulo-seccion { font-size: var(--t-5); font-weight: 800; line-height: 1.05; letter-spacing: -0.03em; max-width: 20ch; }
.enlace-fuerte { font-weight: 800; text-decoration-thickness: var(--stroke-focus); text-underline-offset: 0.25em; }

/* Arranque de la demo: el escenario de un clic. */
.escenario__arranque {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5);
  padding-top: var(--space-6);
}
.escenario__boton {
  min-height: var(--space-12); padding: 0 var(--space-6);
  background: transparent; color: var(--sobre-escenario);
  border: var(--stroke-focus) solid var(--sobre-escenario); border-radius: var(--radius-md);
  font: inherit; font-size: var(--t-1); font-weight: 800; cursor: pointer;
  transition: background-color 120ms, color 120ms;
}
.escenario__boton:hover { background: var(--sobre-escenario); color: var(--escenario); }
.escenario__ayuda { color: var(--sobre-escenario-suave); font-size: var(--t-0); max-width: 40ch; }

/* ── Adelanto de la Macro Tool (portada) ────────────────────────────────── */
.adelanto { --anillo: var(--sobre-escenario); background: var(--escenario); color: var(--sobre-escenario); padding: var(--space-12) var(--margen); }
.adelanto__marco {
  max-width: calc(var(--ancho) - 2 * var(--margen)); margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-12); align-items: center;
}
.adelanto__titulo { font-size: var(--t-4); font-weight: 800; letter-spacing: -0.02em; }
.adelanto__frase { margin-top: var(--space-4); font-size: var(--t-2); line-height: 1.45; max-width: 40ch; }
.adelanto__texto > p { margin-top: var(--space-4); }
.adelanto__servicio {
  margin-top: var(--space-8); padding-top: var(--space-5);
  border-top: var(--stroke-hairline) solid var(--control-border); color: var(--sobre-escenario-suave);
}
.adelanto__servicio strong { color: var(--sobre-escenario); }
.adelanto__servicio p + p { margin-top: var(--space-2); }

.ticket { margin: 0; border: var(--stroke-hairline) solid var(--control-border); border-radius: var(--radius-lg); padding: var(--space-6); }
.ticket__quedan { color: var(--sobre-escenario-suave); font-weight: 700; }
.ticket__cifra { display: block; font-size: var(--t-6); font-weight: 800; line-height: 1; letter-spacing: -0.04em; color: var(--sobre-escenario); }
.ticket__lineas { margin-top: var(--space-5); border-top: var(--stroke-hairline) solid var(--control-border); }
.ticket__linea {
  display: flex; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-3) 0; border-bottom: var(--stroke-hairline) solid var(--control-border);
}
.ticket__linea small { display: block; color: var(--sobre-escenario-suave); font-size: var(--t-0); }
.ticket__antes { color: var(--sobre-escenario-suave); text-decoration: line-through; margin-right: var(--space-2); font-size: var(--t-0); }
.ticket__ahora { text-decoration: underline var(--stroke-focus) var(--cambio); text-underline-offset: 0.25em; }
.ticket__pie { margin-top: var(--space-4); font-size: var(--t-0); color: var(--sobre-escenario-suave); }

/* ── Flujo: una pieza que se transforma (ficha → plan → ajuste → seguimiento) ── */
.flujo {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-12);
  max-width: var(--ancho); margin: 0 auto; padding: var(--space-16) var(--margen);
}
.flujo__texto .titulo-seccion { margin-bottom: var(--space-8); }
.pasos { counter-reset: paso; }
.paso { min-height: 60vh; display: flex; flex-direction: column; justify-content: center; }
.paso__titulo { font-size: var(--t-3); font-weight: 800; letter-spacing: -0.02em; color: var(--tinta-suave); transition: color 300ms; }
.paso p { margin-top: var(--space-3); max-width: 40ch; font-size: var(--t-2); line-height: 1.45; color: var(--tinta-suave); transition: color 300ms; }
.paso[data-activo] .paso__titulo, .paso[data-activo] p { color: var(--tinta); }
.flujo__escena { position: relative; }
.pieza {
  position: sticky; top: 22vh;
  display: grid; margin-inline: auto;
  width: min(100%, 22rem); height: 15rem;
  background: var(--surface); border: var(--stroke-hairline) solid var(--line); border-radius: var(--radius-lg);
  transition: width 700ms var(--ease), height 700ms var(--ease), border-radius 700ms, background-color 500ms;
}
.pieza__capa {
  grid-area: 1 / 1; display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-5); opacity: 0; visibility: hidden;
  transition: opacity 400ms, visibility 0s 400ms;
}
.pieza[data-estado="ficha"] .pieza__ficha, .pieza[data-estado="plan"] .pieza__plan,
.pieza[data-estado="ajuste"] .pieza__ajuste, .pieza[data-estado="seguimiento"] .pieza__seguimiento {
  opacity: 1; visibility: visible; transition: opacity 500ms 250ms, visibility 0s;
}
.pieza__etiqueta { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--t-0); font-weight: 700; color: var(--tinta-suave); }
.pieza__logo { font-family: "Kangge", var(--font-sans); font-size: var(--t-2); font-weight: 400; color: var(--hecho); }
.pieza__nombre { font-size: var(--t-4); font-weight: 800; letter-spacing: -0.02em; margin-top: var(--space-2); }
.pieza__dato { color: var(--tinta-suave); }
.pieza__fila {
  display: flex; justify-content: space-between; padding: var(--space-2) var(--space-3);
  background: var(--surface-brand); border-radius: var(--radius-sm); font-weight: 700;
}
.pieza__fila--cambio .num { text-decoration: underline var(--stroke-focus) var(--cambio); text-underline-offset: 0.25em; }
.pieza__ajuste .pieza__fila { background: transparent; border-bottom: var(--stroke-hairline) solid var(--tinta); border-radius: 0; padding-inline: 0; }
.pieza svg { width: 100%; height: auto; overflow: visible; }
.pieza__eje { stroke: var(--line); stroke-width: 2; fill: none; }
.pieza__trazo {
  fill: none; stroke: var(--hecho); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 340; stroke-dashoffset: 340; transition: stroke-dashoffset 1000ms var(--ease) 400ms;
}
.pieza__punto { fill: var(--cambio); transform-box: fill-box; transform-origin: center; transform: scale(0); transition: transform 400ms var(--ease) 1300ms; }
/* La forma cambia con el paso: tarjeta → hoja alta → ticket → gráfica ancha. */
.pieza[data-estado="plan"] { height: 21rem; border-radius: var(--radius-sm); }
.pieza[data-estado="ajuste"] { height: 19rem; background: var(--fondo); border-color: var(--tinta); }
.pieza[data-estado="seguimiento"] { width: min(100%, 26rem); height: 16rem; }
.pieza[data-estado="seguimiento"] .pieza__trazo { stroke-dashoffset: 0; }
.pieza[data-estado="seguimiento"] .pieza__punto { transform: scale(1); }

/* ── Ejemplo de plan ────────────────────────────────────────────────────── */
.ejemplo { max-width: var(--ancho); margin: 0 auto; padding: var(--space-12) var(--margen); }
.ejemplo__nota { margin-top: var(--space-4); max-width: var(--medida); color: var(--tinta-suave); }
.ejemplo__nota strong { color: var(--tinta); }
.ejemplo__tabla { margin-top: var(--space-6); overflow-x: auto; }
.ejemplo__tabla:focus-visible { outline-offset: var(--space-1); }
.ej { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.ej th, .ej td { padding: var(--space-2) var(--space-3); text-align: right; border-bottom: var(--stroke-hairline) solid var(--line); }
.ej th[scope="row"], .ej thead th:first-child, .ej__comida th { text-align: left; font-weight: 400; }
.ej thead th { font-size: var(--t-0); font-weight: 700; color: var(--tinta-suave); border-bottom: var(--stroke-control) solid var(--tinta); }
.ej abbr { text-decoration: none; }
.ej__comida th { padding-top: var(--space-5); font-weight: 800; font-size: var(--t-2); border-bottom: var(--stroke-hairline) solid var(--tinta); }
.ej__subtotal th, .ej__subtotal td { font-weight: 700; background: var(--surface-sunken); }
.ej__kcal { font-weight: 400; color: var(--tinta-suave); white-space: nowrap; }
.ej tfoot th, .ej tfoot td { font-weight: 800; }
.ej__dia th, .ej__dia td { border-top: var(--stroke-focus) solid var(--tinta); padding-top: var(--space-3); }
.ej__objetivo th, .ej__objetivo td, .ej__diferencia th, .ej__diferencia td { font-weight: 400; color: var(--tinta-suave); }

/* ── /macro-tool y /nosotros ────────────────────────────────────────────── */
.publico, .texto-corto { max-width: var(--ancho); margin: 0 auto; padding: var(--space-12) var(--margen) 0; }
.publico__texto, .texto-corto p { margin-top: var(--space-5); max-width: var(--medida); font-size: var(--t-2); line-height: 1.45; color: var(--tinta-suave); }
.proximamente {
  margin-top: var(--space-6); max-width: var(--medida); padding: var(--space-5);
  border: var(--stroke-control) dashed var(--control-border); border-radius: var(--radius-lg);
  display: grid; gap: var(--space-3); justify-items: start;
}
.proximamente__estado {
  font-size: var(--t-0); font-weight: 800; padding: var(--space-1) var(--space-3);
  border: var(--stroke-hairline) dashed var(--tinta-suave); border-radius: var(--radius-pill);
}
.indice--corto { columns: 1; max-width: var(--medida); margin-top: var(--space-6); }

/* ── Lo que trae ────────────────────────────────────────────────────────── */
.incluye { max-width: var(--ancho); margin: 0 auto; padding: var(--space-12) var(--margen) var(--space-16); }
.indice {
  margin-top: var(--space-8); columns: 2 22rem; column-gap: var(--space-12);
}
.indice li {
  break-inside: avoid; padding: var(--space-3) 0; border-top: var(--stroke-hairline) solid var(--line);
  color: var(--tinta-suave);
}
.indice strong { color: var(--tinta); }

/* ── Acceso ─────────────────────────────────────────────────────────────── */
.acceso {
  max-width: var(--ancho); margin: 0 auto; padding: var(--space-16) var(--margen);
  /* La línea de arriba, del ancho del texto (no del margen). */
  background: linear-gradient(var(--tinta), var(--tinta)) top / calc(100% - 2 * var(--margen)) var(--stroke-focus) no-repeat;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-6) var(--space-12); align-items: end;
}
.acceso__titulo { font-size: var(--t-6); font-weight: 800; line-height: 1; letter-spacing: -0.04em; }
.acceso__texto { grid-column: 1; max-width: var(--medida); font-size: var(--t-2); line-height: 1.45; color: var(--tinta-suave); }
.acceso__texto a { color: var(--tinta); font-weight: 700; }
.acceso .boton--grande { grid-column: 2; grid-row: 1 / span 2; }

/* ── Pie ────────────────────────────────────────────────────────────────── */
.pie {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4);
  max-width: var(--ancho); margin: 0 auto; padding: var(--space-8) var(--margen) var(--space-12);
  background: linear-gradient(var(--line), var(--line)) top / calc(100% - 2 * var(--margen)) var(--stroke-hairline) no-repeat;
  font-size: var(--t-0); color: var(--tinta-suave);
}
.logo--pie { font-size: var(--t-3); }
.pie__enlaces { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); }

/* ── Móvil y tableta ────────────────────────────────────────────────────── */
@media (max-width: 60rem) {
  .resumen { grid-template-columns: minmax(0, 1fr); }
  .macros { grid-column: 1; grid-row: auto; }
  .comida { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
  .comida__acciones { justify-content: flex-start; }
  .editor { grid-column: 1; }
  .adelanto__marco { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
  /* En una columna: el título, luego la pieza fija arriba y los pasos que
     pasan por debajo de ella. */
  .flujo { display: flex; flex-direction: column; gap: 0; }
  .flujo__texto { display: contents; }
  .flujo__texto .titulo-seccion { order: 0; margin-bottom: var(--space-6); }
  .flujo__escena { order: 1; position: sticky; top: var(--alto-cabecera, 4rem); z-index: 1; background: var(--fondo); padding-block: var(--space-3); }
  .pasos { order: 2; }
  .pieza { position: relative; top: auto; height: 13rem; }
  .pieza[data-estado="plan"] { height: 16rem; }
  .pieza[data-estado="ajuste"] { height: 15rem; }
  .pieza[data-estado="seguimiento"] { height: 13rem; }
  .pieza__capa { padding: var(--space-4); gap: var(--space-1); font-size: var(--t-0); }
  .pieza__nombre { font-size: var(--t-3); }
  .pieza__fila { padding: var(--space-1) var(--space-2); }
  .paso { min-height: 50vh; justify-content: flex-start; padding-top: var(--space-8); }
  .acceso { grid-template-columns: minmax(0, 1fr); }
  .acceso .boton--grande { grid-column: 1; grid-row: auto; justify-self: start; }
}
/* El menú se pliega en un botón. Sin JS («con-js» no está), se ve entero. */
@media (max-width: 48rem) {
  .menu-boton { display: inline-flex; align-items: center; }
  .cabecera__marco { flex-wrap: wrap; }
  .con-js .cabecera__nav:not([data-abierto]) { display: none; }
  .cabecera__nav {
    flex-basis: 100%; flex-direction: column; align-items: stretch; gap: var(--space-3);
    padding: var(--space-3) 0 var(--space-4);
  }
  .cabecera__enlaces { flex-direction: column; gap: 0; margin: 0; }
  .cabecera__enlaces a { display: block; padding: var(--space-3) 0; border-bottom: var(--stroke-hairline) solid var(--line); }
}
@media (max-width: 30rem) {
  .logo { font-size: var(--t-3); }
  .macro { grid-template-columns: 5.5rem minmax(0, 1fr); }
  .macro dd { grid-column: 1 / -1; text-align: left; }
  .editor__fila { grid-template-columns: minmax(0, 1fr); }
  .ej th, .ej td { padding: var(--space-2) var(--space-1); font-size: var(--t-0); }
  .ej__comida th { font-size: var(--t-1); }
  .ej__kcal { display: block; }
}

/* Sin movimiento: nada de transiciones ni de escenas animadas; la demo igual. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; transition-delay: 0s !important; }
}