/* 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") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("../fuentes/manrope-bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("../fuentes/manrope-extrabold.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Kangge"; src: url("../fuentes/kangge-logo.woff2") 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: var(--space-16); }
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; }
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 ───────────────────────────────────────────────────────────── */
.cabecera {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  max-width: var(--ancho); margin: 0 auto; padding: var(--space-5) var(--margen);
}
.cabecera__nav { display: flex; align-items: center; gap: var(--space-3); }

/* ── 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);
}

/* Secuencia de carga: el titular entra por líneas. */
@media (prefers-reduced-motion: no-preference) {
  .portada__titulo .linea, .portada__entrada {
    animation: subir 700ms var(--ease) both;
  }
  .portada__titulo .linea:nth-child(2) { animation-delay: 120ms; }
  .portada__entrada { 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); }
}

/* ── Historia: ticket → hoja → curva ────────────────────────────────────── */
.titulo-seccion { font-size: var(--t-5); font-weight: 800; line-height: 1.05; letter-spacing: -0.03em; max-width: 18ch; }
.historia {
  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);
}
.historia__texto .titulo-seccion { margin-bottom: var(--space-8); }
.paso { min-height: 60vh; display: flex; align-items: center; }
.paso p { max-width: 40ch; font-size: var(--t-2); line-height: 1.45; color: var(--tinta-suave); transition: color 300ms; }
.paso[data-activo] p { color: var(--tinta); }
.historia__escena { position: relative; }
.escena {
  position: sticky; top: 15vh; height: 70vh; max-height: 36rem;
  display: grid; place-items: center;
}
.escena__hoja, .escena__curva { grid-area: 1 / 1; }

/* La hoja contiene las líneas del ticket. En «ticket» es invisible (sin fondo
   ni borde) y las líneas están en el centro; en «hoja» aparece el papel y las
   líneas suben bajo la cabecera como bloques de comida; en «curva» la hoja
   entera se encoge en una esquina y la curva de seguimiento se dibuja. */
.escena__hoja {
  width: min(100%, 24rem); aspect-ratio: 210 / 297;
  display: flex; flex-direction: column; gap: var(--space-5);
  padding: var(--space-5); border-radius: var(--radius-sm);
  background: transparent; border: var(--stroke-hairline) solid transparent;
  transition: background-color 500ms, border-color 500ms, transform 800ms var(--ease);
}
.escena__hoja-cabeza {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: var(--t-0); font-weight: 700; opacity: 0; transition: opacity 400ms;
}
.escena__logo { font-family: "Kangge", var(--font-sans); font-size: var(--t-2); font-weight: 400; color: var(--hecho); }
.escena__lineas {
  display: grid; gap: var(--space-3); padding-top: 22%;
  transition: padding 700ms var(--ease), gap 700ms var(--ease);
}
.escena__linea {
  display: flex; justify-content: space-between; padding: var(--space-3) var(--space-4);
  border-bottom: var(--stroke-hairline) solid var(--tinta); font-weight: 700;
  transition: background-color 600ms var(--ease), border-color 600ms, border-radius 600ms, padding 600ms;
}
.escena__curva { width: min(100%, 26rem); overflow: visible; opacity: 0; transition: opacity 500ms 300ms; }
.escena__eje { stroke: var(--line); stroke-width: 2; fill: none; }
.escena__trazo {
  fill: none; stroke: var(--hecho); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 400; stroke-dashoffset: 400; transition: stroke-dashoffset 1100ms var(--ease) 400ms;
}
.escena__punto { fill: var(--cambio); transform-box: fill-box; transform-origin: center; transform: scale(0); transition: transform 400ms var(--ease) 1300ms; }

.escena[data-estado="hoja"] .escena__hoja,
.escena[data-estado="curva"] .escena__hoja { background: var(--surface); border-color: var(--line); }
.escena[data-estado="hoja"] .escena__hoja-cabeza,
.escena[data-estado="curva"] .escena__hoja-cabeza { opacity: 1; }
.escena[data-estado="hoja"] .escena__lineas,
.escena[data-estado="curva"] .escena__lineas { padding-top: 0; gap: var(--space-4); }
.escena[data-estado="hoja"] .escena__linea,
.escena[data-estado="curva"] .escena__linea {
  background: var(--surface-brand); border-color: transparent; border-radius: var(--radius-sm);
  padding-bottom: var(--space-8);
}
.escena[data-estado="curva"] .escena__hoja { transform: translate(-38%, -34%) scale(.3); }
.escena[data-estado="curva"] .escena__curva { opacity: 1; }
.escena[data-estado="curva"] .escena__trazo { stroke-dashoffset: 0; }
.escena[data-estado="curva"] .escena__punto { transform: scale(1); }

/* ── Conectados ─────────────────────────────────────────────────────────── */
.conectados { max-width: var(--ancho); margin: 0 auto; padding: var(--space-16) var(--margen); }
.conectados__linea {
  position: relative; display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: var(--space-8);
  margin-top: var(--space-10); padding-top: var(--space-8);
}
.conectados__linea::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0;
  border-top: var(--stroke-focus) solid var(--tinta);
}
.conectados__extremo strong { display: block; font-size: var(--t-3); font-weight: 800; letter-spacing: -0.02em; margin-bottom: var(--space-2); }
.conectados__extremo:last-child { text-align: right; }
.conectados__medio { color: var(--tinta-suave); font-size: var(--t-2); line-height: 1.45; }

/* ── 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);
  border-top: var(--stroke-focus) solid var(--tinta);
  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);
  border-top: var(--stroke-hairline) solid var(--line); 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; }
  /* En una columna: el título, luego la escena fija arriba y los pasos que
     pasan por debajo de ella. */
  .historia { display: flex; flex-direction: column; }
  .historia__texto { display: contents; }
  .historia__texto .titulo-seccion { order: 0; margin-bottom: var(--space-6); }
  .historia__escena { order: 1; position: sticky; top: 0; z-index: 1; background: var(--fondo); padding-block: var(--space-3); }
  .escena { position: relative; top: auto; height: 38vh; min-height: 15rem; }
  .escena__hoja { width: auto; height: 100%; padding: var(--space-3); gap: var(--space-2); font-size: var(--t-0); }
  .escena__lineas, .escena[data-estado] .escena__lineas { gap: var(--space-2); }
  .escena__linea, .escena[data-estado] .escena__linea { padding: var(--space-1) var(--space-2); }
  .escena[data-estado="hoja"] .escena__linea, .escena[data-estado="curva"] .escena__linea { padding-bottom: var(--space-5); }
  .paso { order: 2; min-height: 50vh; align-items: flex-start; padding-top: var(--space-8); }
  .conectados__linea { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .conectados__extremo:last-child { text-align: left; }
  .acceso { grid-template-columns: minmax(0, 1fr); }
  .acceso .boton--grande { grid-column: 1; grid-row: auto; justify-self: start; }
}
@media (max-width: 30rem) {
  .cabecera { padding-block: var(--space-4); }
  .cabecera__nav .boton { padding: 0 var(--space-3); }
  .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); }
}

/* 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; }
}