/* ============================================================
   PROTEIN KITCHEN — PROTOCOLO CLÍNICO CON CALIDEZ
   Tipografía como interfaz. Separación por bordes de 1px.
   Un solo acento. Móvil primero.
   Todo el color viene de tokens.css — aquí no hay un solo hex.
   ============================================================ */

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }

section, .delivery-strip {
  padding-block: var(--section-y);
  border-top: var(--rule) solid var(--border);
}

/* ---------- Etiquetas y encabezados ---------- */
.eyebrow {
  font-family: var(--font-data);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

.section-head { margin-bottom: var(--s7); max-width: var(--measure); }
.section-head h2 {
  font-family: var(--font-brand);
  font-weight: 400;
  font-size: var(--t-h2);
  line-height: var(--leading-tight);
  letter-spacing: var(--track-tight);
  text-transform: uppercase;
  margin-top: var(--s3);
  text-wrap: balance;
}
.section-head p {
  color: var(--text-muted);
  font-size: var(--t-small);
  margin-top: var(--s4);
}
.accent { color: var(--accent); }

/* ---------- Botones ---------- */
.btn-primary, .btn-secondary {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-data);
  font-size: var(--t-small);
  font-weight: 600;
  padding: var(--s4) var(--s5);
  border-radius: var(--radius);
  border: var(--rule) solid transparent;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-press); }
.btn-secondary { border-color: var(--border-strong); color: var(--text); }
.btn-secondary:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- Reveal ----------
   OJO: la clase que agrega el JS al entrar en pantalla es "visible"
   (IntersectionObserver al final de index.html). Si aquí se escribe
   otro nombre, TODA la página se queda invisible. */
.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .5s ease, transform .5s ease;
}
.reveal.visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   NAV
   ============================================================ */
nav {
  position: sticky; top: 0; z-index: 90;
  background: var(--bg);
  border-bottom: var(--rule) solid var(--border);
}
.nav-inner {
  width: 100%; max-width: var(--wrap); margin: 0 auto;
  padding: var(--s3) var(--gutter);
  display: flex; align-items: center; gap: var(--s4);
}
/* El logotipo no se encoge: es flex y sin esto la barra lo comprime cuando
   los enlaces crecen, cortando la palabra y achicando la marca. */
.logo-mark {
  display: flex; align-items: center; gap: var(--s2);
  font-family: var(--font-brand); font-size: 1rem; text-transform: lowercase;
  flex: 0 0 auto; white-space: nowrap;
}
.logo-mark img { width: 26px; height: 26px; flex: 0 0 auto; }
.logo-mark span { color: var(--accent); }

.nav-links { display: none; gap: var(--s5); margin-left: auto; }
.nav-links a {
  font-family: var(--font-data); font-size: var(--t-micro);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted);
}
.nav-links a:hover { color: var(--text); }

/* En móvil los CTA viven dentro del menú desplegable, no en la barra */
.nav-cta {
  display: none;
  margin-left: auto;
  white-space: nowrap;
  font-family: var(--font-data); font-size: var(--t-micro); font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: var(--s2) var(--s4);
  border: var(--rule) solid var(--accent);
  background: var(--accent); color: var(--on-accent);
  border-radius: var(--radius);
}
.nav-cta:hover { background: var(--accent-press); border-color: var(--accent-press); }
.nav-cta-menu {
  background: none; color: var(--text);
  border-color: var(--border-strong); margin-left: 0;
}
.nav-cta-menu:hover { background: none; border-color: var(--accent); color: var(--accent); }

.nav-mobile-toggle {
  margin-left: auto; width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  border: var(--rule) solid var(--border-strong); border-radius: var(--radius);
}
.nav-mobile-menu { display: none; border-top: var(--rule) solid var(--border); background: var(--bg); }
.nav-mobile-menu.open { display: block; }
.nav-mobile-menu a {
  display: block; padding: var(--s4) var(--gutter);
  border-bottom: var(--rule) solid var(--border);
  font-family: var(--font-data); font-size: var(--t-small);
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted);
}
.nav-mobile-menu a:hover { color: var(--text); }
.nav-cta-mobile { color: var(--accent); }

@media (min-width: 1000px) {
  .nav-links { display: flex; }
  .nav-cta { display: inline-flex; margin-left: var(--s4); }
  .nav-mobile-toggle { display: none; }
  .nav-mobile-menu { display: none; }
}

/* ============================================================
   HERO — bloque tipográfico + 3 métricas. Sin foto.
   ============================================================ */
.hero { padding-block: clamp(3rem, 12vw, 6.5rem) 0; border-top: none; }
.hero h1 {
  font-family: var(--font-brand);
  font-weight: 400;
  font-size: var(--t-brand);
  line-height: var(--leading-tight);
  letter-spacing: var(--track-tight);
  text-transform: uppercase;
  margin-top: var(--s4);
  text-wrap: balance;
}
.hero .lead {
  color: var(--text-muted);
  font-size: var(--t-small);
  max-width: 48ch;
  margin-top: var(--s5);
}
.hero-actions { display: flex; flex-direction: column; gap: var(--s3); margin-top: var(--s6); }
.hero-actions .btn-primary, .hero-actions .btn-secondary { width: 100%; }

.hero-visual { margin-top: var(--s7); }
.hero-visual img { display: none; }
.hero-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: var(--rule) solid var(--border-strong);
  border-bottom: var(--rule) solid var(--border);
}
.hero-stats > div { padding: var(--s5) var(--s3); border-right: var(--rule) solid var(--border); }
.hero-stats > div:first-child { padding-left: 0; }
.hero-stats > div:last-child { border-right: none; }
.hero-stat-num {
  font-family: var(--font-data); font-weight: 600;
  font-size: var(--t-data-s);
  letter-spacing: var(--track-tight);
  font-variant-numeric: tabular-nums;
}
.hero-stat-label {
  font-family: var(--font-data); font-size: var(--t-micro);
  letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--text-muted); margin-top: var(--s1);
}

@media (min-width: 760px) {
  .hero-actions { flex-direction: row; }
  .hero-actions .btn-primary, .hero-actions .btn-secondary { width: auto; }
  .hero-stat-num { font-size: var(--t-data); }
}

/* ============================================================
   BANDA DE PEDIDO (menú a la carta)
   ============================================================ */
.delivery-strip { background: var(--surface); }
.order-inner { display: flex; flex-direction: column; gap: var(--s6); }
.order-title {
  font-family: var(--font-brand); font-weight: 400;
  font-size: var(--t-h2); line-height: var(--leading-tight);
  letter-spacing: var(--track-tight); text-transform: uppercase;
  margin-top: var(--s3);
}
.order-sub { color: var(--text-muted); font-size: var(--t-small); margin-top: var(--s3); max-width: 46ch; }

.order-modes { display: grid; grid-template-columns: 1fr 1fr; border: var(--rule) solid var(--border); }
.order-mode { display: flex; align-items: center; gap: var(--s3); padding: var(--s4); border-right: var(--rule) solid var(--border); }
.order-mode:last-child { border-right: none; }
.order-mode svg { width: 22px; height: 22px; color: var(--accent); flex-shrink: 0; }
.mode-txt { display: flex; flex-direction: column; line-height: 1.25; }
.mode-txt strong { font-family: var(--font-data); font-size: var(--t-small); font-weight: 600; }
.mode-txt span { font-size: var(--t-micro); color: var(--text-muted); }

/* Jerarquia del bloque de pedidos: el canal propio manda. El boton directo
   crece y se acompana de la razon para preferirlo; la app queda como
   alternativa, no como opcion equivalente. */
.order-actions { display: flex; flex-direction: column; gap: var(--s3); }
.order-cta {
  width: 100%;
  font-size: var(--t-body);
  padding: var(--s4) var(--s6);
}
.order-razon {
  font-size: var(--t-small); color: var(--text-muted);
  line-height: 1.45; max-width: 34ch; margin: 0;
}
.order-alt {
  display: flex; align-items: center; gap: var(--s3);
  margin-top: var(--s3); padding-top: var(--s4);
  border-top: var(--rule) solid var(--border);
}
.delivery-text {
  font-family: var(--font-data); font-size: var(--t-micro);
  letter-spacing: var(--track-label); text-transform: uppercase; color: var(--text-muted);
}
.delivery-logos { display: flex; flex-wrap: wrap; gap: var(--s2); }
.order-alt .delivery-text { flex: 0 0 auto; }
.delivery-pill {
  font-family: var(--font-data); font-size: var(--t-micro);
  padding: var(--s2) var(--s3);
  border: var(--rule) solid var(--border);
  color: var(--text-muted); border-radius: var(--radius);
}
.delivery-pill:hover { border-color: var(--accent); color: var(--accent); }

@media (min-width: 900px) {
  .order-inner { display: grid; grid-template-columns: 1.1fr .9fr 1fr; gap: var(--s7); align-items: center; }
  .order-cta { width: auto; }
}

/* ============================================================
   PLANES — fichas de datos comparables
   ============================================================ */
/* ============================================================
   FOTOGRAFÍA
   ============================================================ */
.foto { margin: 0; }
.foto img {
  display: block; width: 100%; height: auto;
  object-fit: cover;
  border: var(--rule) solid var(--border);
  border-radius: var(--radius);
}
/* Banda ancha: la cocina. 16:9 en escritorio, más cuadrada en celular
   para que no quede una tira diminuta. */
.foto-banda { background: var(--bg); padding: 0 0 var(--s8); }
.foto-banda img { aspect-ratio: 4 / 3; }
.foto-pie {
  font-family: var(--font-data); font-size: var(--t-micro);
  letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--text-muted); margin-top: var(--s3);
}

#gainz { background: var(--bg); }
.gainz-intro { display: flex; flex-direction: column; gap: var(--s5); margin-bottom: var(--s7); }
.gainz-intro-main { display: flex; flex-direction: column; gap: var(--s4); }
.gainz-foto img { aspect-ratio: 4 / 3; }
/* aspect-ratio reserva la altura: sin salto de layout (CLS) */
.gainz-logo-img { width: clamp(120px, 34vw, 180px); aspect-ratio: 430 / 433; height: auto; }
.gainz-intro-text p { color: var(--text-muted); font-size: var(--t-small); max-width: var(--measure); margin-top: var(--s3); }

.plans-grid { display: grid; grid-template-columns: 1fr; border: var(--rule) solid var(--border-strong); }
.plan-card {
  position: relative;
  padding: var(--s6) var(--s5);
  border-bottom: var(--rule) solid var(--border);
  background: var(--bg);
}
.plan-card:last-child { border-bottom: none; }
.plan-card.featured { background: var(--surface); }
.plan-badge {
  position: absolute; top: 0; right: 0;
  font-family: var(--font-data); font-size: var(--t-micro); font-weight: 600;
  letter-spacing: var(--track-label); text-transform: uppercase;
  background: var(--accent); color: var(--on-accent);
  padding: var(--s1) var(--s3);
}
.plan-icon { display: none; }
.plan-card h3 {
  font-family: var(--font-brand); font-weight: 400;
  font-size: var(--t-h3); text-transform: uppercase;
  letter-spacing: var(--track-tight);
}
.plan-desc { color: var(--text-muted); font-size: var(--t-small); margin-top: var(--s2); min-height: 3em; }

.plan-price-row { display: flex; gap: var(--s6); margin-top: var(--s5); padding-top: var(--s4); border-top: var(--rule) solid var(--border); }
.plan-price-col .label {
  font-family: var(--font-data); font-size: var(--t-micro);
  letter-spacing: var(--track-label); text-transform: uppercase; color: var(--text-muted);
}
.plan-price-col .price {
  font-family: var(--font-data); font-weight: 600;
  font-size: var(--t-data-s); letter-spacing: var(--track-tight);
  font-variant-numeric: tabular-nums; display: block; margin-top: var(--s1);
}
.plan-price-col .unit { font-family: var(--font-data); font-size: var(--t-micro); color: var(--text-muted); display: block; }

.plan-features { list-style: none; margin-top: var(--s5); display: flex; flex-direction: column; gap: var(--s2); }
.plan-features li {
  font-family: var(--font-data); font-size: var(--t-micro);
  color: var(--text-muted); padding-left: var(--s4); position: relative;
}
.plan-features li::before { content: "—"; position: absolute; left: 0; color: var(--accent); }
.plan-cta {
  display: block; text-align: center; margin-top: var(--s5);
  font-family: var(--font-data); font-size: var(--t-small); font-weight: 600;
  padding: var(--s3); border: var(--rule) solid var(--border-strong);
  border-radius: var(--radius);
}
.plan-cta:hover { border-color: var(--accent); color: var(--accent); }
.plan-card.featured .plan-cta { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.plan-card.featured .plan-cta:hover { background: var(--accent-press); border-color: var(--accent-press); }

@media (min-width: 860px) {
  .plans-grid { grid-template-columns: repeat(3, 1fr); }
  .plan-card { border-bottom: none; border-right: var(--rule) solid var(--border); }
  .plan-card:last-child { border-right: none; }
  .gainz-intro { flex-direction: row; align-items: center; gap: var(--s7); }
  .gainz-intro-main { flex: 1 1 54%; flex-direction: row; align-items: center; gap: var(--s6); }
  .gainz-foto { flex: 1 1 46%; min-width: 0; }
  .foto-banda img { aspect-ratio: 16 / 9; }
}

/* ============================================================
   RECOMENDADOR — cuatro preguntas y una sugerencia

   Esta seccion rompe la sucesion de bandas casi negras: va sobre --olive,
   que estaba definido en la paleta y sin usar. El dorado --amber, tambien
   sin estrenar, marca las preguntas y la etiqueta del resultado, para que
   el naranja quede reservado a lo accionable. Ningun hex nuevo.
   Ojo con el contraste sobre olivo: --text-muted queda en 4.46:1, debajo
   del minimo, asi que dentro de esta banda el texto corrido va en --text.
   ============================================================ */
/* Dos franjas en vez de un bloque naranja solido: el naranja se queda detras
   del encabezado, que es donde llama, y las preguntas vuelven al fondo oscuro.
   Sobre el naranja todo se invierte a oscuro — el hueso ahi da 1.87:1 y no se
   lee. Los botones nunca pisan el naranja: viven en la caja oscura, donde el
   seleccionado conserva su contraste. */
#recomendador { background: var(--bg); padding-top: 0; }
.rec-banda { background: var(--accent); padding-block: var(--s7); }
.rec-banda .section-head { margin-bottom: 0; }
#recomendador .section-head h2,
#recomendador .section-head p,
#recomendador .eyebrow { color: var(--on-accent); }
#recomendador .section-head p { opacity: .82; }

.rec-box {
  background: var(--bg);
  border: var(--rule) solid var(--border-strong);
  padding: var(--s5);
  margin-top: var(--s7);
}
.rec-box .qf-group:last-of-type { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

.rec-box .qf-label { display: flex; align-items: baseline; gap: var(--s3); }
.rec-num {
  font-family: var(--font-brand); font-size: 1.5rem; line-height: 1;
  color: var(--amber); letter-spacing: .02em;
  flex: 0 0 auto; position: relative; top: .1em;
}

/* Las opciones se ven pulsables desde antes de tocarlas */
.rec-box .qf-option { background: var(--surface); }
.rec-box .qf-option:hover { color: var(--text); }
.rec-box .qf-option.active { background: var(--accent); color: var(--on-accent); }

/* El resultado es el premio: se levanta del resto */
.rec-resultado { display: none; }
.rec-resultado.visible {
  display: block;
  margin-top: var(--s5);
  padding: var(--s5);
  background: var(--surface);
  border-top: 3px solid var(--accent);
}
.rec-etiqueta {
  font-family: var(--font-data); font-size: var(--t-micro);
  letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--amber); font-weight: 600; margin-bottom: var(--s2);
}
.rec-titulo {
  display: flex; align-items: center; gap: var(--s3);
  font-family: var(--font-brand); font-size: clamp(1.6rem, 5.5vw, 2.3rem);
  line-height: 1.05; text-transform: uppercase; letter-spacing: .01em;
  margin-bottom: var(--s3);
}
.rec-emoji { font-size: .85em; line-height: 1; flex: 0 0 auto; }
.rec-porque { color: var(--text-muted); font-size: var(--t-small); max-width: var(--measure); margin: 0; }

.rec-cifras {
  display: flex; flex-wrap: wrap; gap: var(--s6);
  margin-top: var(--s5); padding-top: var(--s4);
  border-top: var(--rule) solid var(--border);
}
.rec-cifras > div { display: flex; flex-direction: column; gap: var(--s1); }
.rec-c-l {
  font-family: var(--font-data); font-size: var(--t-micro);
  letter-spacing: var(--track-label); text-transform: uppercase; color: var(--text-muted);
}
.rec-c-v {
  font-family: var(--font-data); font-size: var(--t-data-s); font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.rec-c-v.destacado { color: var(--accent); font-size: var(--t-data); }
.rec-nota { font-family: var(--font-data); font-size: var(--t-micro); color: var(--text-muted); margin-top: var(--s2); }
.rec-cta { margin-top: var(--s5); width: 100%; border: none; cursor: pointer; }
@media (min-width: 620px) { .rec-cta { width: auto; } }

/* ============================================================
   COTIZADOR / FLEX — controles compartidos
   ============================================================ */
.quote-box, .flex-grid {
  display: grid; grid-template-columns: 1fr;
  border: var(--rule) solid var(--border-strong);
}
.quote-box > div:first-child, .flex-meals { padding: var(--s5); }

.qf-group { padding-bottom: var(--s5); margin-bottom: var(--s5); border-bottom: var(--rule) solid var(--border); }
.qf-group:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.qf-label {
  display: block;
  font-family: var(--font-data); font-size: var(--t-micro);
  letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--text-muted); margin-bottom: var(--s3);
}
.qf-options { display: flex; flex-wrap: wrap; gap: 0; border: var(--rule) solid var(--border); }
.qf-option {
  flex: 1 1 auto;
  font-family: var(--font-data); font-size: var(--t-small);
  padding: var(--s3) var(--s4);
  border-right: var(--rule) solid var(--border);
  color: var(--text-muted);
  transition: background .12s ease, color .12s ease;
}
.qf-option:last-child { border-right: none; }
.qf-option.active { background: var(--accent); color: var(--on-accent); font-weight: 600; }

.qf-days-input { display: flex; flex-direction: column; gap: var(--s3); }
.qf-days-input input {
  width: 100%;
  font-family: var(--font-data); font-size: var(--t-data-s); font-weight: 600;
  font-variant-numeric: tabular-nums;
  background: var(--bg); color: var(--text);
  border: var(--rule) solid var(--border);
  border-radius: var(--radius);
  padding: var(--s3) var(--s4);
}
.qf-days-presets { display: flex; border: var(--rule) solid var(--border); }
.qf-day-preset {
  flex: 1;
  font-family: var(--font-data); font-size: var(--t-small);
  padding: var(--s3);
  border-right: var(--rule) solid var(--border);
  color: var(--text-muted);
}
.qf-day-preset:last-child { border-right: none; }
.qf-day-preset.active { background: var(--accent); color: var(--on-accent); font-weight: 600; }

.qf-codigo {
  width: 100%;
  font-family: var(--font-data); font-size: var(--t-small); font-weight: 600;
  letter-spacing: var(--track-label); text-transform: uppercase;
  background: var(--bg); color: var(--text);
  border: var(--rule) solid var(--border);
  border-radius: var(--radius);
  padding: var(--s3) var(--s4);
}
.qf-codigo::placeholder { color: var(--text-muted); letter-spacing: normal; text-transform: none; font-weight: 400; }
.qf-codigo:focus-visible { outline: none; border-color: var(--border-strong); }
.qf-codigo.ok { border-color: var(--state-ok); }
.qf-codigo.error { border-color: var(--accent); }

.qf-codigo-msg {
  font-family: var(--font-data); font-size: var(--t-micro);
  line-height: 1.4; color: var(--text-muted);
  margin-top: var(--s2); min-height: 1.4em;
}
/* --state-ok sobre --bg da 3.75:1 y AA pide 4.5:1 para texto chico.
   No se toca el verde de marca: el borde verde del campo (solo necesita 3:1) da la
   señal de "sí aplicó" y el texto se lee en neutro. */
.qf-codigo-msg.ok { color: var(--text); font-weight: 600; }
.qf-codigo-msg.error { color: var(--accent); }

.qf-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); }
.qtext { display: flex; flex-direction: column; }
.qtext span { font-size: var(--t-small); }
.qtext .sub { font-family: var(--font-data); font-size: var(--t-micro); color: var(--text-muted); margin-top: var(--s1); }

.switch {
  width: 46px; height: 26px; flex-shrink: 0;
  border: var(--rule) solid var(--border-strong);
  border-radius: var(--radius);
  position: relative; transition: background .15s ease, border-color .15s ease;
}
/* El JS marca los interruptores con la clase "on" (no "active"). */
.switch.on { background: var(--accent); border-color: var(--accent); }
.switch-dot {
  position: absolute; top: 3px; left: 3px;
  width: 18px; height: 18px; background: var(--text);
  transition: left .15s ease, background .15s ease;
}
.switch.on .switch-dot { left: 23px; background: var(--on-accent); }

/* ---------- Resultado de cotización ---------- */
.quote-result, .flex-result {
  padding: var(--s5);
  background: var(--surface);
  border-top: var(--rule) solid var(--border-strong);
}
.qr-title {
  font-family: var(--font-data); font-size: var(--t-micro);
  letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--text-muted); margin-bottom: var(--s4);
}
.qr-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4); padding: var(--s2) 0; }
.tlabel { font-size: var(--t-small); color: var(--text-muted); }
.tval { font-family: var(--font-data); font-size: var(--t-small); font-variant-numeric: tabular-nums; }
.qr-row .bold, .tval.bold { font-weight: 600; color: var(--text); }
.neg { color: var(--state-ok); }
.qr-divider { height: var(--rule); background: var(--border); margin: var(--s3) 0; }
.qr-total { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4); padding-top: var(--s3); border-top: var(--rule) solid var(--border-strong); }
.qr-total .tlabel { font-family: var(--font-data); font-size: var(--t-micro); letter-spacing: var(--track-label); text-transform: uppercase; }
.qr-total .tval {
  font-family: var(--font-data); font-weight: 600;
  font-size: var(--t-data); letter-spacing: var(--track-tight);
  color: var(--accent); font-variant-numeric: tabular-nums;
}
.qr-iva, .qr-note { font-family: var(--font-data); font-size: var(--t-micro); color: var(--text-muted); margin-top: var(--s3); }
.qr-warning {
  font-family: var(--font-data); font-size: var(--t-micro);
  color: var(--accent); border: var(--rule) solid var(--accent);
  padding: var(--s3); margin-top: var(--s3);
}
.qr-pay-btn {
  display: block; text-align: center; margin-top: var(--s4);
  font-family: var(--font-data); font-size: var(--t-small); font-weight: 600;
  padding: var(--s4); background: var(--accent); color: var(--on-accent);
  border-radius: var(--radius);
}
.qr-pay-btn:hover { background: var(--accent-press); }

/* formulario de datos del cliente (inyectado por JS) */
.client-form { margin-top: var(--s4); padding-top: var(--s4); border-top: var(--rule) solid var(--border); }
.client-form-title { font-family: var(--font-data); font-size: var(--t-micro); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--s3); }
.client-input {
  width: 100%; margin-bottom: var(--s2);
  background: var(--bg); color: var(--text);
  border: var(--rule) solid var(--border);
  border-radius: var(--radius);
  padding: var(--s3) var(--s4); font-size: var(--t-small);
}
.client-input:focus { outline: none; border-color: var(--accent); }
/* El JS agrega "required-error" al campo que falta por llenar. */
.required-error { border-color: var(--accent); background: var(--surface); }
.client-required-note { font-family: var(--font-data); font-size: var(--t-micro); color: var(--text-muted); }

@media (min-width: 900px) {
  .quote-box, .flex-grid { grid-template-columns: 1.15fr .85fr; }
  .quote-result, .flex-result { border-top: none; border-left: var(--rule) solid var(--border-strong); }
}

/* ============================================================
   FLEX — tiempos de comida
   ============================================================ */
.flex-meal-row {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) 0; border-bottom: var(--rule) solid var(--border);
}
.flex-meal-row:last-child { border-bottom: none; }
.flex-meal-emoji { display: none; }
.flex-meal-info { flex: 1; display: flex; flex-direction: column; }
.flex-meal-name { font-size: var(--t-small); }
.flex-meal-price { font-family: var(--font-data); font-size: var(--t-micro); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.flex-meal-toggle {
  width: 34px; height: 34px; flex-shrink: 0;
  border: var(--rule) solid var(--border-strong);
  border-radius: var(--radius);
  font-family: var(--font-data); font-size: var(--t-small);
  color: var(--text-muted);
  display: flex; align-items: center; justify-content: center;
}
/* El JS marca la fila con "selected" y el botón con "on". */
.flex-meal-row.selected .flex-meal-name { color: var(--text); font-weight: 600; }
.flex-meal-toggle.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

/* ============================================================
   CHECK-IN SEMANAL
   ============================================================ */
/* Maqueta del portal del cliente. Reproduce la pantalla real de /mi-plan:
   misma gráfica de área con línea de meta punteada y los mismos recuadros de
   cambios. Va en SVG y CSS, no en imagen, para que no pese ni se pixele.
   El portal usa esquinas redondeadas; la landing es a escuadra. Se respeta
   cada una: el marco va a escuadra y el contenido interior conserva el radio
   del portal, así se lee como una pantalla embebida y no como un parche. */
.checkin-head { display: flex; flex-direction: column; gap: var(--s5); margin-bottom: var(--s7); }
.checkin-head .section-head { margin-bottom: 0; }

.portal-mock { border: var(--rule) solid var(--border-strong); background: var(--bg); }
.portal-bar {
  display: flex; align-items: center; gap: 6px;
  padding: var(--s3) var(--s4);
  border-bottom: var(--rule) solid var(--border);
}
.portal-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--border-strong); flex: 0 0 auto; }
.portal-url {
  font-family: var(--font-data); font-size: var(--t-micro);
  color: var(--text-muted); margin-left: var(--s3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.portal-screen { padding: var(--s4); display: flex; flex-direction: column; gap: var(--s3); }
.portal-card { background: var(--surface); border: var(--rule) solid var(--border); border-radius: 12px; padding: var(--s4); }
.portal-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s2); }
.portal-label {
  font-family: var(--font-data); font-size: var(--t-micro);
  letter-spacing: var(--track-label); text-transform: uppercase; color: var(--text-muted);
}
.portal-semana { font-family: var(--font-data); font-size: var(--t-micro); font-weight: 700; color: var(--accent); }
.portal-chart { display: block; width: 100%; height: auto; font-family: var(--font-ui); }
.portal-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: var(--s3); }
.portal-tile { background: var(--bg); border-radius: 8px; padding: var(--s3) var(--s2); text-align: center; }
.pt-l { display: block; font-size: 10px; color: var(--text-muted); }
/* 19px en negrita entra en el umbral de texto grande de la norma, donde el
   contraste exigido baja de 4.5:1 a 3:1. Así el verde de marca (3.76:1 sobre
   el fondo) cumple sin tener que recolorearlo. */
.pt-v { display: block; font-family: var(--font-data); font-size: 19px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.pt-v.bien { color: var(--state-ok); }
.pt-u { display: block; font-size: 9px; color: var(--text-muted); }

@media (min-width: 860px) {
  .checkin-head { flex-direction: row; align-items: center; gap: var(--s7); }
  .checkin-head .section-head { flex: 1 1 50%; }
  .portal-mock { flex: 1 1 50%; min-width: 0; }
}

.checkin-grid { display: grid; grid-template-columns: 1fr; border: var(--rule) solid var(--border-strong); }
.checkin-step { padding: var(--s6) var(--s5); border-bottom: var(--rule) solid var(--border); }
.checkin-step:last-child { border-bottom: none; }
.checkin-num {
  font-family: var(--font-data); font-weight: 600; font-size: var(--t-data-s);
  color: var(--accent); font-variant-numeric: tabular-nums;
  letter-spacing: var(--track-tight);
}
.checkin-step h3 {
  font-family: var(--font-ui); font-weight: 700;
  font-size: var(--t-h3); letter-spacing: var(--track-tight);
  margin-top: var(--s3);
}
.checkin-step p { color: var(--text-muted); font-size: var(--t-small); margin-top: var(--s2); }
.checkin-cta { margin-top: var(--s6); display: flex; flex-direction: column; gap: var(--s3); }

@media (min-width: 860px) {
  .checkin-grid { grid-template-columns: repeat(3, 1fr); }
  .checkin-step { border-bottom: none; border-right: var(--rule) solid var(--border); }
  .checkin-step:last-child { border-right: none; }
  .checkin-cta { flex-direction: row; }
}

/* ============================================================
   NUTRIÓLOGA
   ============================================================ */
.nutri-head { display: flex; flex-direction: column; gap: var(--s5); margin-bottom: var(--s7); }
.nutri-head .section-head { margin-bottom: 0; }
.nutri-foto img { aspect-ratio: 4 / 3; }
.nutri-box { border: var(--rule) solid var(--border-strong); padding: var(--s5); }

@media (min-width: 860px) {
  .nutri-head { flex-direction: row; align-items: center; gap: var(--s7); }
  .nutri-head .section-head { flex: 1 1 54%; }
  .nutri-foto { flex: 1 1 46%; min-width: 0; }
}
.nutri-field-label {
  display: block;
  font-family: var(--font-data); font-size: var(--t-micro);
  letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--text-muted); margin-bottom: var(--s3);
}
.nutri-upload {
  border: var(--rule) dashed var(--border-strong);
  padding: var(--s6) var(--s4); text-align: center; cursor: pointer;
  transition: border-color .15s ease;
}
.nutri-upload:hover { border-color: var(--accent); }
/* El JS agrega "dragover" mientras se arrastra un archivo encima. */
.nutri-upload.dragover { border-color: var(--accent); border-style: solid; }
.nutri-upload-icon { font-size: 1.5rem; margin-bottom: var(--s2); }
.nutri-upload-text { font-size: var(--t-small); }
.nutri-upload-sub { font-family: var(--font-data); font-size: var(--t-micro); color: var(--text-muted); margin-top: var(--s1); }
.nutri-file-list { margin-top: var(--s3); display: flex; flex-direction: column; gap: var(--s2); }
.nutri-file-item {
  display: flex; align-items: center; gap: var(--s3);
  border: var(--rule) solid var(--border); padding: var(--s2) var(--s3);
  font-family: var(--font-data); font-size: var(--t-micro);
}
.fname { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fsize { color: var(--text-muted); }
.fremove { color: var(--text-muted); padding: 0 var(--s2); }
.fremove:hover { color: var(--accent); }
.nutri-textarea {
  width: 100%; min-height: 110px; resize: vertical;
  background: var(--bg); color: var(--text);
  border: var(--rule) solid var(--border); border-radius: var(--radius);
  padding: var(--s3) var(--s4); font-size: var(--t-small);
}
.nutri-textarea:focus { outline: none; border-color: var(--accent); }
.nutri-note { font-family: var(--font-data); font-size: var(--t-micro); color: var(--text-muted); margin-top: var(--s3); }
.nutri-submit {
  width: 100%; margin-top: var(--s4);
  font-family: var(--font-data); font-size: var(--t-small); font-weight: 600;
  padding: var(--s4); background: var(--accent); color: var(--on-accent);
  border-radius: var(--radius);
}
.nutri-submit:hover { background: var(--accent-press); }
.nutri-submit:disabled { opacity: .5; cursor: not-allowed; }
.nutri-error { font-family: var(--font-data); font-size: var(--t-micro); color: var(--accent); margin-top: var(--s3); }
.nutri-aviso {
  border: var(--rule) solid var(--accent);
  padding: var(--s3) var(--s4);
  margin-bottom: var(--s4);
  font-size: var(--t-small);
  color: var(--text);
}

/* ============================================================
   FAQ
   ============================================================ */
.faq-list { border-top: var(--rule) solid var(--border-strong); }
.faq-item { border-bottom: var(--rule) solid var(--border); }
.faq-question {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  padding: var(--s5) 0; text-align: left;
  font-size: var(--t-small); font-weight: 500;
}
.faq-icon { font-family: var(--font-data); color: var(--accent); flex-shrink: 0; transition: transform .2s ease; }
.faq-item.open .faq-icon { transform: rotate(45deg); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height .25s ease; }
.faq-answer-inner { padding-bottom: var(--s5); color: var(--text-muted); font-size: var(--t-small); max-width: var(--measure); }

/* ============================================================
   TESTIMONIOS
   ============================================================ */
.testi-grid { display: grid; grid-template-columns: 1fr; border: var(--rule) solid var(--border-strong); }
.testi-card { padding: var(--s5); border-bottom: var(--rule) solid var(--border); }
.testi-card:last-child { border-bottom: none; }
.placeholder-tag {
  display: inline-block;
  font-family: var(--font-data); font-size: var(--t-micro);
  letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--text-muted); border: var(--rule) solid var(--border);
  padding: var(--s1) var(--s2); margin-bottom: var(--s3);
}
.testi-stars { font-family: var(--font-data); font-size: var(--t-small); color: var(--accent); letter-spacing: .1em; }
.testi-text { font-size: var(--t-small); margin-top: var(--s3); }
.testi-author { display: flex; align-items: center; gap: var(--s3); margin-top: var(--s5); padding-top: var(--s4); border-top: var(--rule) solid var(--border); }
.testi-avatar {
  width: 34px; height: 34px; flex-shrink: 0;
  border: var(--rule) solid var(--border-strong);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-data); font-size: var(--t-micro); color: var(--text-muted);
}
.testi-name { font-size: var(--t-small); font-weight: 600; }
.testi-plan { font-family: var(--font-data); font-size: var(--t-micro); color: var(--text-muted); }

@media (min-width: 720px) { .testi-grid { grid-template-columns: 1fr 1fr; }
  .testi-card { border-right: var(--rule) solid var(--border); }
  .testi-card:nth-child(2n) { border-right: none; }
  .testi-card:nth-last-child(-n+2) { border-bottom: none; }
}

/* ============================================================
   CONTACTO
   ============================================================ */
.contact-grid { display: grid; grid-template-columns: 1fr; gap: 0; border: var(--rule) solid var(--border-strong); }
.contact-item { padding: var(--s5); border-bottom: var(--rule) solid var(--border); }
.contact-item:last-child { border-bottom: none; }
.contact-icon { display: none; }
.contact-label {
  font-family: var(--font-data); font-size: var(--t-micro);
  letter-spacing: var(--track-label); text-transform: uppercase; color: var(--text-muted);
}
.contact-value { font-size: var(--t-small); margin-top: var(--s2); }
/* El mapa es hermano de la reja, no hijo: antes vivia dentro y quedaban dos
   marcos encajados con una separacion rara entre ellos. */
.map-frame { border: var(--rule) solid var(--border-strong); border-top: none; aspect-ratio: 4 / 3; }
.map-frame iframe { width: 100%; height: 100%; border: 0; display: block; }

@media (min-width: 860px) {
  .contact-grid { grid-template-columns: repeat(3, 1fr); }
  .contact-item { border-bottom: none; border-right: var(--rule) solid var(--border); }
  .contact-item:last-child { border-right: none; }
  .map-frame { aspect-ratio: 21 / 8; }
  .contact-value { font-size: var(--t-small); }
}

/* ============================================================
   FOOTER + WHATSAPP
   ============================================================ */
footer {
  border-top: var(--rule) solid var(--border);
  padding-block: var(--s7);
  font-family: var(--font-data); font-size: var(--t-micro);
  color: var(--text-muted);
}
footer a:hover { color: var(--accent); }

.wa-float {
  position: fixed; right: var(--s4); bottom: var(--s4); z-index: 80;
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  background: var(--state-ok); color: var(--text);
  border-radius: 50%;
}
.wa-float:hover { background: var(--accent); color: var(--on-accent); }