/* ───────────────────────────────────────────────────────────────────────────
   Sitio público de Porciona
   ───────────────────────────────────────────────────────────────────────────
   LA IDEA DE DISEÑO, para que las decisiones de acá abajo se entiendan.

   Porciona nace de un libro —las porciones de intercambio del INTA— y lo hizo
   un nutricionista. El sitio se compone como un impreso técnico: serif para lo
   que se lee, sans para lo que se opera, filetes en vez de cajas, secciones
   numeradas en el margen. El ritmo lo dan la línea, el número y el aire.

   Lo que se evitó a propósito, porque es el molde de cualquier landing
   genérica: píldoras con puntito, blobs de gradiente, tarjetas con un ícono en
   un cuadrado redondeado, listas con ticks verdes, y el bloque final centrado
   sobre fondo teñido. Nada de eso dice nada sobre este producto.

   SOLO MODO CLARO. La aplicación tiene modo oscuro porque una consulta dura
   horas; una landing se mira dos minutos y decidir el color es del que la
   diseñó. Un sitio que se ve distinto según el sistema del visitante es un
   sitio que nadie controla — y en publicidad, lo que se ve importa.

   Los valores de color son los de frontend/src/index.css. Se copian y no se
   importan: importarlos ataría el sitio al build de Tailwind de la aplicación,
   que es el acoplamiento que este directorio existe para evitar.

   Sin build, sin dependencias, sin CDN.
   ─────────────────────────────────────────────────────────────────────────── */

@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("fuentes/inter-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light;

  --papel: #faf8f5;
  --superficie: #ffffff;
  --hueco: #f5f3ef;
  --chip: #ede9e3;
  --filete: #e9e4dc;
  --filete-fuerte: #d6cec2;

  --tinta: #1f1a15;
  --texto: #43392f;
  --apagado: #6f6357;
  --tenue: #928476;

  --acento: #744d30;
  --acento-suave: #f2e8dc;
  --acento-tinta: #5e3f28;
  --acento-lleno: #8d5f3a;
  --acento-lleno-hover: #744d30;
  --acento-filete: #e2d2bd;
  --anillo: #bf9268;

  --verde: #1d7a4f;
  --verde-fondo: #e7f4ec;
  --ambar: #8a5d0a;
  --ambar-fondo: #fbf0d9;
  --rojo: #9f1239;
  --rojo-fondo: #ffe4e6;

  /* Una serif local en vez de una descargada: en Mac e iPhone cae en Iowan Old
     Style, en Windows en Palatino Linotype, en Android en la serif del sistema.
     Las tres tienen carácter y ninguna cuesta una petición de red. */
  --serif: "Iowan Old Style", "Charter", "Palatino Linotype", Palatino,
    "Book Antiqua", Georgia, "Times New Roman", serif;
  --sans: "Inter Variable", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    Roboto, "Helvetica Neue", sans-serif;

  --sombra-ventana: 0 1px 1px rgb(50 38 26 / 0.04), 0 8px 20px -6px rgb(50 38 26 / 0.10),
    0 32px 60px -30px rgb(50 38 26 / 0.28);
  --sombra-panel: 0 1px 2px rgb(50 38 26 / 0.04), 0 12px 28px -18px rgb(50 38 26 / 0.30);
}

/* ── Base ──────────────────────────────────────────────────────────────────*/

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  background: var(--papel);
  color: var(--texto);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

p { margin: 0; text-wrap: pretty; }
img, svg { max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--anillo); outline-offset: 3px; }

.display {
  font-family: var(--serif);
  font-weight: 400;
  font-optical-sizing: auto;
  color: var(--tinta);
  line-height: 1.08;
  letter-spacing: -0.012em;
  margin: 0;
  text-wrap: balance;
}
h1.display { font-size: clamp(2.375rem, 1.4rem + 3.4vw, 3.5rem); }
h2.display { font-size: clamp(1.875rem, 1.3rem + 2.4vw, 2.75rem); }
h3 {
  margin: 0;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--tinta);
}

/* La cursiva de la serif es la única floritura del sitio, y carga la palabra
   que da sentido a cada título. */
.display em { font-style: italic; color: var(--acento); }

/* ── Retícula ──────────────────────────────────────────────────────────────*/

.contenedor {
  width: 100%;
  max-width: 72rem;
  margin-inline: auto;
  padding-inline: 1.75rem;
}
@media (max-width: 40rem) { .contenedor { padding-inline: 1.25rem; } }

.seccion { padding-block: 5rem; }
.seccion + .seccion { border-top: 1px solid var(--filete); }
@media (max-width: 48rem) { .seccion { padding-block: 3.25rem; } }

/* El rótulo vive en el margen izquierdo, como la numeración de un manual. */
.bloque { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 3rem; }
@media (max-width: 60rem) { .bloque { grid-template-columns: 1fr; gap: 1.25rem; } }

.rotulo {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tenue);
  font-variant-numeric: tabular-nums;
}
.rotulo b { display: block; color: var(--acento); font-weight: 600; }
@media (max-width: 60rem) {
  .rotulo { display: flex; gap: 0.625rem; }
  .rotulo b { display: inline; }
}

.medida { max-width: 34rem; }
.entradilla { margin-top: 1.25rem; font-size: 1.0625rem; color: var(--apagado); }
.medida .entradilla + .entradilla { margin-top: 1rem; }

/* ── Acciones ──────────────────────────────────────────────────────────────*/

.boton {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  border: 1px solid var(--acento-lleno);
  border-radius: 6px;
  background: var(--acento-lleno);
  color: #fdf8f2;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 560;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.boton:hover { background: var(--acento-lleno-hover); border-color: var(--acento-lleno-hover); }
.boton--chico { padding: 0.4375rem 0.875rem; font-size: 0.875rem; }

/* La acción secundaria es un enlace con flecha y no un segundo botón: dos
   botones del mismo peso obligan a elegir, y quien duda no elige. */
.enlace-flecha {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.9375rem;
  font-weight: 520;
  color: var(--tinta);
  text-decoration: none;
  border-bottom: 1px solid var(--filete-fuerte);
  padding-bottom: 2px;
  transition: border-color 0.15s ease, gap 0.15s ease;
}
.enlace-flecha:hover { border-color: var(--acento); gap: 0.625rem; }

.acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; margin-top: 2.25rem; }

/* ── Barra ─────────────────────────────────────────────────────────────────*/

.barra {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgb(250 248 245 / 0.88);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}
.barra[data-desplazada="si"] { border-bottom-color: var(--filete); }
.barra > .contenedor { display: flex; align-items: center; gap: 2rem; height: 3.875rem; }

.marca {
  display: inline-flex;
  align-items: center;
  gap: 0.5625rem;
  font-family: var(--serif);
  font-size: 1.25rem;
  letter-spacing: -0.015em;
  color: var(--tinta);
  text-decoration: none;
}

.navegacion { display: flex; align-items: center; gap: 1.75rem; margin-left: auto; font-size: 0.875rem; }
.navegacion a { color: var(--apagado); text-decoration: none; }
.navegacion a:hover { color: var(--tinta); }
@media (max-width: 68rem) {
  .navegacion .enlace-seccion { display: none; }
  .navegacion { gap: 1rem; }
}
/* Bajo 30rem no caben marca + «Entrar» + botón: se van juntos a 370 px de
   ancho y empujan una barra de scroll horizontal en toda la página. Manda el
   botón, que es a lo que vino el visitante. */
@media (max-width: 30rem) {
  .navegacion .enlace-app { display: none; }
  .marca { font-size: 1.125rem; }
  .barra > .contenedor { gap: 1rem; }
}

/* ── Portada ───────────────────────────────────────────────────────────────*/

.portada { padding-block: 5rem 0; }
@media (max-width: 48rem) { .portada { padding-block: 3rem 0; } }

.portada > .contenedor { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 24rem); gap: 4rem; align-items: start; }
@media (max-width: 64rem) {
  .portada > .contenedor { grid-template-columns: 1fr; gap: 3rem; }
}

.origen {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 1.75rem;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tenue);
}
.origen::after { content: ""; flex: 1; height: 1px; background: var(--filete); }

.portada .entradilla { font-size: 1.1875rem; max-width: 34rem; }

/* La faja de cifras hace de nube de logos sin inventar clientes: dice de qué
   está hecho el producto, que es lo que hoy sí se puede probar. */
.faja {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2.5rem;
  margin-top: 3rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--filete);
  font-size: 0.875rem;
  color: var(--apagado);
}
.faja b { color: var(--tinta); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ── Piezas de la aplicación ───────────────────────────────────────────────*/

/* Todas las capturas del sitio están dibujadas en HTML con los estilos reales
   de la aplicación. No son imágenes: pesan nada, se leen en cualquier pantalla,
   sirven para buscadores y no envejecen en cada despliegue. */

.panel {
  container-type: inline-size;
  border: 1px solid var(--filete);
  border-radius: 12px;
  background: var(--superficie);
  box-shadow: var(--sombra-panel);
  padding: 1.25rem;
}
.panel__titulo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.875rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--tinta);
}
.panel__titulo span { font-weight: 400; color: var(--tenue); font-size: 0.75rem; }

.pie-figura {
  margin-top: 0.875rem;
  font-size: 0.8125rem;
  color: var(--tenue);
}

/* Campos, tal como se ven en la pantalla de entrada */
.campos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.625rem; }
@media (max-width: 30rem) { .campos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.campo { display: block; }
.campo span {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--texto);
}
.campo b {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem;
  padding: 0.4375rem 0.5625rem;
  border: 1px solid var(--filete-fuerte);
  border-radius: 8px;
  background: var(--superficie);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
}
.campo b i { font-style: normal; font-weight: 400; font-size: 0.75rem; color: var(--tenue); }

.imc {
  display: inline-block;
  margin-top: 0.625rem;
  padding: 0.1875rem 0.5rem;
  border-radius: 999px;
  background: var(--ambar-fondo);
  color: var(--ambar);
  font-size: 0.75rem;
  font-weight: 600;
}

/* El campo grande: lo único que de verdad se escribe para tener una pauta. */
.area {
  margin-top: 1rem;
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--filete-fuerte);
  border-radius: 8px;
  background: var(--superficie);
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--texto);
}
.area .cursor {
  display: inline-block;
  width: 1px;
  height: 0.95em;
  margin-left: 1px;
  background: var(--acento);
  vertical-align: -0.12em;
  animation: parpadeo 1.1s step-end infinite;
}
@keyframes parpadeo { 50% { opacity: 0; } }

.boton-app {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  margin-top: 1rem;
  padding: 0.5625rem 1rem;
  border-radius: 8px;
  background: var(--acento-lleno);
  color: #fdf8f2;
  font-size: 0.875rem;
  font-weight: 600;
}
.boton-app + span { margin-left: 0.75rem; font-size: 0.75rem; color: var(--tenue); }

/* Lista de bloques de la generación */
.bloques { list-style: none; margin: 0; padding: 0; font-size: 0.8125rem; }
.bloques li {
  display: flex;
  align-items: baseline;
  gap: 0.625rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--filete);
  color: var(--texto);
}
.bloques li:last-child { border-bottom: 0; }
.bloques i { font-style: normal; width: 1rem; flex: none; text-align: center; color: var(--verde); font-weight: 700; }
.bloques li.corriendo { color: var(--acento); font-weight: 560; }
.bloques li.corriendo i { color: var(--acento); }
.bloques li.pendiente { color: var(--tenue); }
.bloques li.pendiente i { color: var(--tenue); font-weight: 400; }
.bloques em { font-style: normal; color: var(--tenue); font-weight: 400; }

/* ── Ventana de producto ───────────────────────────────────────────────────*/

/* Es más ancha que la columna de texto y se apoya en el borde inferior de su
   sección, sin cerrar por abajo: se lee que la aplicación sigue más allá del
   pliegue en vez de flotar como maqueta en medio de la nada. */
.escaparate { max-width: 84rem; margin-inline: auto; padding-inline: 1.75rem; margin-top: 4rem; }
@media (max-width: 40rem) { .escaparate { padding-inline: 1.25rem; margin-top: 2.5rem; } }

.ventana {
  border: 1px solid var(--filete-fuerte);
  border-bottom: 0;
  border-radius: 12px 12px 0 0;
  background: var(--superficie);
  box-shadow: var(--sombra-ventana);
  overflow: hidden;
}
.ventana__barra {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0.875rem;
  border-bottom: 1px solid var(--filete);
  background: var(--hueco);
}
.ventana__semaforo { display: flex; gap: 0.375rem; }
.ventana__semaforo i { width: 0.625rem; height: 0.625rem; border-radius: 999px; background: var(--filete-fuerte); }
.ventana__url {
  flex: 1;
  max-width: 22rem;
  padding: 0.1875rem 0.625rem;
  border-radius: 999px;
  background: var(--papel);
  border: 1px solid var(--filete);
  font-size: 0.75rem;
  color: var(--tenue);
  text-align: center;
}
.ventana__cuerpo {
  padding: 1.25rem;
  overflow-x: auto;
  /* Sombras de desborde. Las dos capas `local` viajan con el contenido y tapan
     a las `scroll`, que están quietas: el resultado es que la sombra aparece
     solo del lado donde queda tabla por ver, y se apaga sola al llegar al
     borde. Sin esto, en un teléfono la matriz se puede arrastrar y nada lo
     dice —y lo que no se ve, no existe. Se prefirió esto a una flecha o a un
     texto: no ocupa espacio ni ensucia una tabla que vale por ser limpia. */
  background:
    linear-gradient(to right, var(--superficie) 40%, rgb(255 255 255 / 0)) left center / 3rem 100% no-repeat local,
    linear-gradient(to left, var(--superficie) 40%, rgb(255 255 255 / 0)) right center / 3rem 100% no-repeat local,
    linear-gradient(to right, rgb(50 38 26 / 0.15), rgb(50 38 26 / 0)) left center / 1.25rem 100% no-repeat scroll,
    linear-gradient(to left, rgb(50 38 26 / 0.15), rgb(50 38 26 / 0)) right center / 1.25rem 100% no-repeat scroll;
  background-color: var(--superficie);
}
@media (min-width: 48rem) { .ventana__cuerpo { padding: 1.5rem; } }

.ventana__encabezado { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1rem; margin-bottom: 1.125rem; }
.ventana__encabezado h4 { margin: 0; font-size: 1rem; font-weight: 620; color: var(--tinta); }
.ventana__encabezado > span:not(.segmentado) { font-size: 0.8125rem; color: var(--tenue); }
.ventana__encabezado--separado { margin-top: 1.75rem; }

/* El conmutador «Habituales / Todos los grupos» de la matriz real. Va en la
   captura porque responde la primera pregunta de cualquiera que la mire: «¿y si
   el grupo que uso no está?». */
.segmentado {
  display: inline-flex;
  align-self: center;
  margin-left: auto;
  border: 1px solid var(--filete-fuerte);
  border-radius: 6px;
  overflow: hidden;
  font-size: 0.6875rem;
  line-height: 1;
}
.segmentado b, .segmentado i { padding: 0.3125rem 0.5rem; font-style: normal; white-space: nowrap; }
.segmentado b { background: var(--acento-lleno); color: #fdf8f2; font-weight: 600; }
.segmentado i { color: var(--apagado); font-weight: 500; }

/* ── Tablas del producto ───────────────────────────────────────────────────*/

.matriz { width: 100%; min-width: 46rem; border-collapse: collapse; font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.matriz thead th {
  padding: 0.375rem 0.5rem;
  border-bottom: 1px solid var(--filete-fuerte);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tenue);
  text-align: right;
  white-space: nowrap;
}
.matriz thead th:first-child { text-align: left; width: 11rem; }
.matriz thead th.comida { text-align: center; color: var(--apagado); border-left: 1px solid var(--filete); width: 4.75rem; }
.matriz thead th .hora { display: block; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--tenue); }

.matriz tbody td { padding: 0.3125rem 0.5rem; border-bottom: 1px solid var(--filete); text-align: right; color: var(--apagado); }
.matriz tbody td:first-child { text-align: left; color: var(--texto); font-weight: 500; white-space: nowrap; }
.matriz tbody td.comida { text-align: center; border-left: 1px solid var(--filete); color: var(--tinta); }
.matriz tbody td.dia { color: var(--tinta); font-weight: 600; border-left: 1px solid var(--filete); }
.matriz tbody tr:hover td { background: var(--hueco); }

/* El casillero editable: es el gesto central de la herramienta, así que se
   dibuja como lo que es —un campo— y no como texto. */
.casilla {
  display: inline-block;
  min-width: 2.25rem;
  padding: 0.125rem 0.375rem;
  border: 1px solid var(--filete-fuerte);
  border-radius: 4px;
  background: var(--superficie);
  font-weight: 600;
}
.casilla--vacia { color: var(--tenue); border-style: dashed; font-weight: 400; }
.casilla--foco {
  border-color: var(--anillo);
  box-shadow: 0 0 0 3px rgb(191 146 104 / 0.25);
  color: var(--acento-tinta);
  background: var(--acento-suave);
}

.adecuacion { width: 100%; border-collapse: collapse; font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.adecuacion th {
  padding: 0.375rem 0.5rem;
  border-bottom: 1px solid var(--filete-fuerte);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tenue);
  text-align: right;
}
.adecuacion th:first-child { text-align: left; }
.adecuacion td { padding: 0.4375rem 0.5rem; border-bottom: 1px solid var(--filete); text-align: right; color: var(--texto); }
.adecuacion td:first-child { text-align: left; color: var(--tinta); }
.adecuacion tr:last-child td { border-bottom: 0; }

.marca-pct { display: inline-block; min-width: 3.25rem; padding: 0.0625rem 0.4375rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; }
.marca-pct--ok { background: var(--verde-fondo); color: var(--verde); }
.marca-pct--aviso { background: var(--ambar-fondo); color: var(--ambar); }

/* ── Criterio clínico (la tarjeta de cotejo, tal cual) ─────────────────────*/

.criterio__cabecera { display: flex; align-items: flex-start; gap: 0.625rem; margin-bottom: 0.875rem; }
.criterio__cabecera h4 { margin: 0; font-size: 0.875rem; font-weight: 600; line-height: 1.35; color: var(--tinta); }

.marca-riesgo {
  flex: none;
  padding: 0.125rem 0.4375rem;
  border-radius: 999px;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.marca-riesgo--alto { background: var(--rojo-fondo); color: var(--rojo); }

.cotejo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
@media (max-width: 34rem) { .cotejo { grid-template-columns: 1fr; } }
/* Y por ancho del panel, que es lo que de verdad manda: en pantalla ancha la
   tarjeta igual vive en media columna. */
@container (max-width: 25rem) { .cotejo { grid-template-columns: 1fr; } }

.cotejo__lado { padding: 0.6875rem 0.75rem; border-radius: 8px; background: var(--hueco); }
.cotejo__lado p:first-child {
  margin-bottom: 0.3125rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tenue);
}
.cotejo__lado p:last-child { font-size: 0.8125rem; line-height: 1.5; color: var(--texto); }

/* Lo que el modelo dedujo y no está en la cita, resaltado. Es la función que
   vuelve honesta la extracción: se coteja, no se lee. */
.inferido { background: var(--ambar-fondo); color: var(--ambar); padding: 0 0.125rem; border-radius: 3px; font-weight: 600; }

.acciones-app { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.875rem; }
.btn-app {
  padding: 0.3125rem 0.6875rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  border: 1px solid transparent;
}
.btn-app--primario { background: var(--acento-lleno); color: #fdf8f2; }
.btn-app--secundario { background: var(--superficie); border-color: var(--filete-fuerte); color: var(--texto); }
.btn-app--fantasma { color: var(--apagado); }
.acciones-app .fuente { margin-left: auto; font-size: 0.6875rem; color: var(--tenue); }

/* ── El celular del paciente ───────────────────────────────────────────────*/

/* Reproduce VistaPaciente.jsx: encabezado fijo sobre el marrón de marca, cuerpo
   sobre el papel y barra de CINCO pestañas abajo. Antes esta figura era una
   lista de comidas inventada a partir de los comentarios del componente — se
   veía bien y no se parecía a la aplicación, que es la peor combinación
   posible en una landing: promete una cosa y entrega otra. */

.telefonos { display: flex; flex-wrap: wrap; gap: 2.5rem 3rem; margin-top: 3rem; }
.figura-tel { flex: 0 1 19.5rem; }

.telefono {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid var(--filete-fuerte);
  border-radius: 2rem;
  background: var(--superficie);
  box-shadow: var(--sombra-ventana);
}
.telefono__pantalla { border-radius: 1.625rem; overflow: hidden; background: var(--papel); }

/* Encabezado: dice DÓNDE ESTÁS, y por eso cambia entre la portada y una comida
   abierta. */
.tel-cabecera { display: flex; align-items: center; gap: 0.5rem; padding: 0.875rem 0.75rem; background: var(--acento-lleno); color: #fff; }
.tel-cabecera__volver { flex: none; width: 1.5rem; font-size: 1.125rem; line-height: 1; opacity: 0.9; }
.tel-cabecera__rotulo { font-size: 0.75rem; font-weight: 500; color: rgb(255 255 255 / 0.75); }
.tel-cabecera__titulo { font-size: 1.125rem; font-weight: 700; line-height: 1.2; }
.tel-cabecera__sub { margin-top: 0.0625rem; font-size: 0.8125rem; color: rgb(255 255 255 / 0.8); }
.tel-cabecera__tema { margin-left: auto; flex: none; opacity: 0.9; font-size: 0.875rem; }

.tel-cuerpo { display: grid; gap: 0.75rem; padding: 0.875rem; }

/* Lo primero y más grande: qué come AHORA. Es el único relleno sólido de la
   pantalla; todo lo demás es secundario a propósito. */
.proxima { border-radius: 1rem; padding: 1rem; background: var(--acento-lleno); color: #fff; }
.proxima__et { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgb(255 255 255 / 0.75); }
.proxima__fila { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.375rem; }
.proxima__icono { flex: none; font-size: 1.75rem; line-height: 1; }
.proxima__nombre { display: block; font-size: 1.0625rem; font-weight: 700; line-height: 1.2; }
.proxima__opcion { display: block; margin-top: 0.125rem; font-size: 0.8125rem; color: rgb(255 255 255 / 0.8); }
.proxima__flecha { margin-left: auto; flex: none; color: rgb(255 255 255 / 0.8); }

.tarjeta-tel { padding: 0.75rem 0.875rem; border: 1px solid var(--filete); border-radius: 1rem; background: var(--superficie); box-shadow: var(--sombra-panel); }

/* La semana marcada. Ver la fila llenarse es el refuerzo que hace funcionar el
   automonitoreo, así que vive en la portada y no a dos toques. */
.racha { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
.racha b { font-size: 0.8125rem; font-weight: 700; color: var(--tinta); }
.racha span { font-size: 0.75rem; color: var(--apagado); }
.dias { display: flex; gap: 0.25rem; margin-top: 0.5rem; }
.dia-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.25rem; }
.dia-punto {
  display: grid;
  place-items: center;
  width: 100%;
  max-width: 2rem;
  height: 1.5rem;
  border-radius: 999px;
  background: var(--hueco);
  color: var(--tenue);
  font-size: 0.6875rem;
  font-weight: 700;
}
.dia-punto--ok { background: #10b981; color: #fff; }
.dia-punto--hoy { box-shadow: inset 0 0 0 2px var(--anillo); }
.dia-punto--futuro { color: transparent; }
.dia-letra { font-size: 0.625rem; font-weight: 500; color: var(--tenue); }
.dia-letra--hoy { color: var(--acento); font-weight: 700; }
.aliento { margin-top: 0.5rem; font-size: 0.75rem; line-height: 1.4; color: var(--apagado); }

/* Las comidas del día con su marca. El check va acá y no en una sección aparte:
   registrar deja de ser tarea extra y pasa a ser consecuencia de mirar qué
   toca, que es a lo que el paciente ya venía. */
.lista-comidas { border: 1px solid var(--filete); border-radius: 1rem; background: var(--superficie); box-shadow: var(--sombra-panel); overflow: hidden; }
.fila-comida { display: flex; align-items: center; border-bottom: 1px solid var(--filete); }
.fila-comida:last-child { border-bottom: 0; }
.fila-comida--proxima { background: rgb(242 232 220 / 0.5); }
.fila-comida__txt { display: flex; align-items: center; gap: 0.625rem; flex: 1; min-width: 0; padding: 0.5rem 0 0.5rem 0.75rem; }
.fila-comida__icono { flex: none; font-size: 1.125rem; line-height: 1; }
.fila-comida__nombre { font-size: 0.8125rem; font-weight: 700; color: var(--tinta); }
.fila-comida__hora { margin-left: 0.375rem; font-size: 0.6875rem; font-weight: 500; color: var(--tenue); }
.fila-comida__opcion { display: block; margin-top: 0.0625rem; font-size: 0.75rem; color: var(--apagado); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fila-comida__opcion--hecha { color: var(--tenue); text-decoration: line-through; }
.marcar { display: grid; place-items: center; flex: none; width: 3rem; padding-block: 0.75rem; }
.marcar i {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 2px solid var(--filete-fuerte);
  border-radius: 999px;
  color: transparent;
  font-style: normal;
  font-size: 0.75rem;
  font-weight: 900;
}
.marcar i.hecha { border-color: #10b981; background: #10b981; color: #fff; }

.tel-ayuda { padding-inline: 0.25rem; font-size: 0.75rem; line-height: 1.4; color: var(--apagado); }

/* La barra de abajo: cinco entradas, todas a la vista. Es la navegación entera
   de la app y no debe deslizarse. */
.tel-barra { display: flex; border-top: 1px solid var(--filete); background: var(--superficie); }
.tel-barra span { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.1875rem; padding: 0.5rem 0.25rem; font-size: 0.625rem; font-weight: 500; color: var(--apagado); }
.tel-barra span i { font-style: normal; font-size: 1rem; line-height: 1; }
.tel-barra span.activa { color: var(--acento); font-weight: 700; }

/* ── Una comida abierta ────────────────────────────────────────────────────*/

.alimentos { list-style: none; margin: 0; padding: 0; }
.alimentos li { display: flex; justify-content: space-between; gap: 0.75rem; padding: 0.375rem 0; border-bottom: 1px solid var(--filete); font-size: 0.8125rem; color: var(--texto); }
.alimentos li:last-child { border-bottom: 0; }
.alimentos b { font-weight: 600; color: var(--tinta); }
/* El alimento que se puede cambiar por su equivalente: se marca en el alimento
   mismo, sin un botón por línea. */
.tocable { border-bottom: 1px dashed var(--anillo); }

.cambiar { margin-top: 0.5rem; padding: 0.625rem; border-radius: 0.75rem; background: var(--acento-suave); }
.cambiar__et { margin-bottom: 0.375rem; font-size: 0.75rem; font-weight: 600; color: var(--acento-tinta); }
.cambiar__op { padding: 0.375rem 0.5rem; border: 1px solid var(--filete); border-radius: 0.5rem; background: var(--superficie); font-size: 0.75rem; color: var(--texto); }
.cambiar__op + .cambiar__op { margin-top: 0.3125rem; }
.cambiar__op b { color: var(--tinta); font-weight: 600; }
.cambiar__op em { display: block; margin-top: 0.0625rem; font-style: normal; font-size: 0.6875rem; color: var(--apagado); }
.cambiar__op .gana { color: #047857; }
.cambiar__nota { margin-top: 0.375rem; font-size: 0.6875rem; font-style: italic; color: var(--apagado); }

/* El método del plato: proporciones fijas con los alimentos del paciente. */
.plato { display: flex; gap: 2px; margin-top: 0.625rem; height: 0.5rem; border-radius: 999px; overflow: hidden; }
.plato i { display: block; }
.plato .verduras { flex: 2; background: #4d7c3f; }
.plato .cereales { flex: 1; background: #c9962e; }
.plato .proteina { flex: 1; background: #a3543a; }
.plato-leyenda { margin-top: 0.3125rem; font-size: 0.625rem; color: var(--tenue); }

.receta { margin-top: 0.75rem; padding-top: 0.625rem; border-top: 1px dashed var(--filete-fuerte); }
.receta__et { display: inline-block; padding: 0.0625rem 0.375rem; border-radius: 4px; background: #e0f2fe; color: #075985; font-size: 0.625rem; font-weight: 600; }
.receta__nombre { margin-left: 0.375rem; font-size: 0.8125rem; font-weight: 600; color: var(--tinta); }
.receta ol { margin: 0.375rem 0 0; padding-left: 1.125rem; font-size: 0.75rem; line-height: 1.45; color: var(--texto); }
.receta ol li + li { margin-top: 0.1875rem; }
.receta__min { margin-top: 0.3125rem; font-size: 0.6875rem; color: var(--apagado); }

/* Un botón, no cuatro: pedir "una idea" no obliga a decidir nada. Los estilos
   quedan detrás, para cuando la circunstancia manda. */
.pedir { margin-top: 0.75rem; padding-top: 0.625rem; border-top: 1px dashed var(--filete-fuerte); }
.pedir__boton {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.5rem;
  border: 1px solid var(--filete);
  border-radius: 0.75rem;
  background: var(--superficie);
  box-shadow: var(--sombra-panel);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--acento);
}
.pedir__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3125rem; margin-top: 0.5rem; }
.pedir__chips em { font-style: normal; font-size: 0.75rem; color: var(--tenue); }
.pedir__chips span { padding: 0.25rem 0.5rem; border: 1px solid var(--acento-filete); border-radius: 999px; background: var(--superficie); font-size: 0.75rem; font-weight: 500; color: var(--acento); }

/* Cápsula educativa: una idea, corta, pegada a lo que el paciente mira. */
.capsula { margin-top: 0.75rem; padding: 0.5625rem 0.6875rem; border-left: 2px solid var(--verde); border-radius: 0 6px 6px 0; background: var(--verde-fondo); font-size: 0.75rem; line-height: 1.5; color: #14532d; }

/* ── Par de columnas ───────────────────────────────────────────────────────*/

.par { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 4rem; align-items: center; }
@media (max-width: 62rem) {
  .par { grid-template-columns: 1fr; gap: 2.5rem; }
  /* Cuando el par empieza por la figura, apilado la figura pasa al final: una
     imagen antes de su explicación no se entiende. */
  .par--figura > *:first-child { order: 2; }
}

/* ── Notas numeradas (en vez de tarjetas con ícono) ────────────────────────*/

.notas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 2rem 2.5rem; margin-top: 3rem; }
.nota { border-top: 1px solid var(--filete-fuerte); padding-top: 1rem; }
.nota__n {
  display: block;
  margin-bottom: 0.625rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--acento);
  font-variant-numeric: tabular-nums;
}
.nota h3 { margin-bottom: 0.4375rem; }
.nota p { font-size: 0.9375rem; color: var(--apagado); }

/* Lo que sigue al par de columnas dentro de una misma sección, a ancho
   completo de la columna de contenido. */
.tras-par { margin-top: 4.5rem; }

.regla { margin: 0; font-family: var(--serif); font-size: clamp(1.5rem, 1rem + 2vw, 2.25rem); line-height: 1.2; letter-spacing: -0.01em; color: var(--tinta); }
.regla span { color: var(--tenue); }

/* ── La carta ──────────────────────────────────────────────────────────────*/

/* La sección más importante del sitio y la única en serif de cuerpo: es una
   carta de un colega, no una ficha de producto. Medida corta (60 caracteres),
   interlínea alta, y ni un dato dentro. */
.carta { max-width: 33rem; margin-top: 1.75rem; }
.carta p {
  font-family: var(--serif);
  font-size: 1.1875rem;
  line-height: 1.55;
  color: var(--texto);
}
.carta p + p { margin-top: 1.125rem; }
.carta p strong { font-weight: 400; color: var(--tinta); background: linear-gradient(transparent 62%, var(--acento-suave) 0); }

.firma { display: flex; align-items: center; gap: 0.875rem; margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--filete); }
.firma__nombre { font-family: var(--serif); font-size: 1.125rem; color: var(--tinta); }
.firma__cargo { font-size: 0.8125rem; color: var(--tenue); }

/* El retrato. Redondo y chico: es una firma, no una foto de portada.

   El borde de dos píxeles no es adorno. El retrato tiene fondo blanco y el
   papel del sitio es casi blanco, así que sin contorno el círculo desaparece y
   queda una cabeza flotando. El aro cálido y la sombra le devuelven el borde. */
.firma picture { flex: none; line-height: 0; }
.firma__foto {
  flex: none;
  width: 4rem;
  height: 4rem;
  border-radius: 999px;
  object-fit: cover;
  background: var(--superficie);
  border: 2px solid var(--acento-filete);
  box-shadow: 0 2px 8px -3px rgb(50 38 26 / 0.35);
}
/* ── Lo que viene ──────────────────────────────────────────────────────────*/

.lista-viene { list-style: none; margin: 2rem 0 0; padding: 0; max-width: 40rem; }
.lista-viene li {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: 1.25rem;
  padding-block: 0.875rem;
  border-top: 1px solid var(--filete);
  font-size: 0.9375rem;
  color: var(--apagado);
}
.lista-viene li:last-child { border-bottom: 1px solid var(--filete); }
.lista-viene b { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--acento); padding-top: 0.1875rem; }
.lista-viene strong { color: var(--tinta); font-weight: 600; }

/* ── Preguntas ─────────────────────────────────────────────────────────────*/

.pregunta { border-top: 1px solid var(--filete); }
.pregunta:last-child { border-bottom: 1px solid var(--filete); }
.pregunta summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.125rem;
  font-family: var(--serif);
  font-size: 1.1875rem;
  color: var(--tinta);
  cursor: pointer;
  list-style: none;
}
.pregunta summary::-webkit-details-marker { display: none; }
.pregunta summary::after { content: "+"; flex: none; font-family: var(--sans); font-size: 1.125rem; color: var(--tenue); line-height: 1; }
.pregunta[open] summary::after { content: "–"; }
.pregunta p { padding-bottom: 1.25rem; color: var(--apagado); max-width: 40rem; font-size: 0.9375rem; }

/* ── Cierre y pie ──────────────────────────────────────────────────────────*/

.cierre .display { max-width: 20ch; }

.pie { border-top: 1px solid var(--filete); padding-block: 2.25rem; font-size: 0.8125rem; color: var(--tenue); }
.pie > .contenedor { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 2rem; }
.pie a { color: var(--apagado); text-decoration: none; }
.pie a:hover { color: var(--tinta); }
.pie__enlaces { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-left: auto; }
@media (max-width: 34rem) { .pie__enlaces { margin-left: 0; } }