/* ============================================================================
   _fatburner-pagina.css — CSS propio de fatburner.html (ensamblado L-FATBURNER-2)
   Va en el punto 2 de la cascada de CONSUMO-SISTEMA.md §1: despues de
   _sistema-spark.css/_motion-spark.css/_explainer-spark.css/_fatburner-micro.css
   y ANTES de _header-spark.css, para que el header canonico siga ganando.
   Tres bloques, en este orden: 1) HERO (FB-3) 2) #frentes (FB-4) 3) cuerpo (FB-6).
   ============================================================================ */

/* ===== 1 · HERO ===== */
/* HERO Fat Burner — estructura Neko §4 (foto full-bleed → tarjeta en scroll).
   #hero-runway/#hero-sticky/#hero-marco/.lmask/reduced-motion/html:not(.js) ya vienen resueltos
   por _motion-spark.css + _motion-spark.js: aquí solo lo que ese motor NO trae. */

.hero-sec{
  /* mismo largo de runway que el home: 2.75 pantallas desktop, 1.7 móvil (lee _motion-spark.css) */
  --mo-runway:165vh; --mo-runway:165lvh;
  --mo-runway-mov:132vh; --mo-runway-mov:132lvh;
}

#hero-marco picture{display:contents}
#hero-marco img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  /* foto vertical (box-trio-amplio): las tres personas viven en la mitad DERECHA
     de la toma (centro visual ~76%). Con 50% el encuadre mostraba pura pared y
     cortaba a la kinesióloga al borde (28-ago): el eje X va al grupo. */
  object-position:100% 18%;
}
@media(min-width:768px){
  /* 28-ago: trio en todos los anchos. ≥768 sirve box-trio-ancho (1672x941,
     outpaint del N02a): encuadre casi 1:1 con el viewport. El 40% vertical
     protege las cabezas cuando una pantalla ultra ancha recorta en Y. */
  #hero-marco img{object-position:50% 40%}
}

#hero-marco::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    /* velo del copy (28-ago): legibilidad sobre la pared clara SIN text-shadow
       fuerte, que el lmask recorta en cajas. Radial suave centrado en el texto. */
    radial-gradient(ellipse 85% 52% at 50% 46%,
      rgba(16,10,8,.34) 0, rgba(16,10,8,.22) 45%, rgba(16,10,8,0) 74%),
    /* asiento: sostiene el titular y el CTA, suelta la foto al 56% de alto */
    linear-gradient(to top,
      rgba(16,10,8,.80) 0, rgba(16,10,8,.58) 24%, rgba(16,10,8,.12) 56%, rgba(16,10,8,0) 76%),
    /* cornisa: existe para el header transparente, no para la foto */
    linear-gradient(to bottom,
      rgba(16,10,8,.80) 0, rgba(16,10,8,.60) 70px, rgba(16,10,8,.18) 132px, rgba(16,10,8,0) 200px);
}

.hero-textos{
  position:relative;z-index:10;height:100%;display:flex;flex-direction:column;
  align-items:center;justify-content:flex-end;text-align:center;pointer-events:none;
  gap:0; padding-bottom:clamp(2.5rem,7vh,5rem);
}
/* eyebrow + titular + línea de apoyo centrados en el aire entre el header y el CTA; CTA al pie */
.hero-copy{margin:auto 0;display:flex;flex-direction:column;align-items:center;gap:.7rem;padding-top:56px}
@media(min-width:980px){.hero-copy{gap:.85rem;padding-top:var(--header-h)}}

.hero-eyebrow{color:rgba(255,255,255,.92);text-shadow:0 1px 1px rgba(10,6,5,.16),0 6px 22px rgba(10,6,5,.24);margin-bottom:.3rem}

.hero-title{max-width:15ch;color:#fff;text-shadow:0 1px 1px rgba(10,6,5,.16),0 12px 44px rgba(10,6,5,.26)}
.hero-sub{color:rgba(255,255,255,.9);font-size:16px;line-height:1.4;text-shadow:0 1px 1px rgba(10,6,5,.16),0 6px 24px rgba(10,6,5,.24);max-width:34ch}
@media(min-width:980px){.hero-sub{font-size:18px;max-width:48ch}}

.hero-acciones{display:flex;flex-direction:column;align-items:center;gap:.9rem;pointer-events:auto}

.hero-social{font-family:var(--dato);font-size:14px;color:rgba(255,255,255,.88);text-shadow:0 1px 1px rgba(10,6,5,.16),0 6px 22px rgba(10,6,5,.24)}
.hero-social a{color:inherit;text-decoration:underline;text-underline-offset:.15em}
.hero-social a:hover{color:#fff}

/* ===== 2 · #frentes (contenido del explainer) ===== */
/* ============================================================
   frentes.css — contenido de #frentes (Los cuatro frentes)
   Consume el motor de .spark-explainer / .ex-* que implementa
   FB-2 en _explainer-spark.css. Este archivo SOLO estiliza lo
   que aporta el contenido: ícono, ficha de dato, ajustes de las
   variables --ex-* propias de esta sección. No se toca el motor
   (posicionamiento de .ex-media/.ex-sticky/.ex-panel/etc.).
   ============================================================ */

#frentes{
  /* ajustes de la sección sobre las vars que declara el motor */
  --ex-media-h: 76vh;
  --ex-media-h-mov: min(75vw, 34svh);
  --ex-radio: var(--r-media, 28px);
  --ex-cols: 1fr 1fr;
  --ex-gap: 3rem;
  --ex-xm: 1.25rem;
}

/* ---------- ícono de línea por frente ---------- */
#frentes .ex-ico{
  display:inline-flex;
  margin-bottom:1rem;
}
#frentes .ex-ico svg{
  width:40px;
  height:40px;
  color:var(--carmin);
}

/* ---------- ficha de dato (una línea, patrón .ficha del home) ---------- */
#frentes .ex-ficha{
  margin-top:1.2rem;
  font-family:var(--dato);
  letter-spacing:.03em;
  display:flex;
  flex-wrap:wrap;
  gap:.35rem 1.1rem;
  align-items:baseline;
}
#frentes .ex-dato{
  font-size:20px;
  letter-spacing:-.02em;
  color:var(--tinta);
}
#frentes .ex-det{
  color:var(--suave);
  font-size:12.5px;
  text-transform:uppercase;
  letter-spacing:.09em;
}

/* ---------- CTA permanente bajo los paneles ----------
   Vive fuera de .ex-paneles (que apila los 4 en la misma celda de grid), así que
   no cambia con el paso: los cuatro frentes son un solo programa y una sola
   salida. Se mide en el alto del sticky, por eso baja de tamaño en viewport bajo
   (ver 4.2) igual que el resto del panel. */
#frentes .ex-cta{ margin-top:1.6rem }
@media(max-width:899px){ #frentes .ex-cta{ margin-top:1rem } }

/* enlace inline dentro del cuerpo del panel BIOMAP (a pelvix.html) */
#frentes .ex-cuerpo a{
  color:var(--carmin);
  text-decoration:none;
  border-bottom:1px solid rgba(189,14,49,.3);
}
#frentes .ex-cuerpo a:hover{
  border-bottom-color:var(--carmin);
}

/* ---------- móvil (≤899px, mismo quiebre que data-bp) ---------- */
@media(max-width:899px){
  #frentes{
    --ex-xm:1.25rem;
  }
  #frentes .ex-ico{
    margin-bottom:.6rem;
  }
  #frentes .ex-ico svg{
    width:32px;
    height:32px;
  }
  #frentes .ex-ficha{
    margin-top:.7rem;
    gap:.15rem .7rem;
  }
  #frentes .ex-dato{
    font-size:16px;
  }
  #frentes .ex-det{
    font-size:10.5px;
    letter-spacing:.04em;
  }
}
@media(min-width:768px) and (max-width:899px){
  #frentes{ --ex-xm:2.5rem; }
}

/* ---------- degradación: reduced-motion ----------
   El trazo de los íconos (data-traza) lo anima FB-5. Si por lo
   que sea el trazo queda a mitad de camino cuando el usuario pide
   menos movimiento, o el JS de FB-5 aún no llegó, el ícono se ve
   completo — nunca a medio dibujar ni invisible. */
@media (prefers-reduced-motion: reduce){
  #frentes .ex-ico svg,
  #frentes .ex-ico svg path{
    opacity:1 !important;
    stroke-dashoffset:0 !important;
    transition:none !important;
    animation:none !important;
  }
}

/* ---------- degradación: sin JS ----------
   html:not(.js) deja el motor sin pin (paneles apilados y
   estáticos, lo resuelve FB-2). Aquí solo garantizamos que el
   ícono no dependa del trazo animado para verse. */
html:not(.js) #frentes .ex-ico svg,
html:not(.js) #frentes .ex-ico svg path{
  opacity:1 !important;
  stroke-dashoffset:0 !important;
}

/* ===== 3 · CUERPO ===== */
/* ============================================================
   FATBURNER — CSS del cuerpo (FB-6): #espejo #metodo #bascula
   #opiniones #ficha #inversion #agenda-flow #faq
   #contraindicaciones y el cierre carmín.
   Va DESPUÉS de _motion-spark.css y ANTES de _header-spark.css
   (CONSUMO-SISTEMA.md §1). Solo tokens de _sistema-spark.css.
   No redefine tokens, no toca tipografía base, no usa .btn.
   El hero, #frentes y la balanza de #bascula NO están aquí: los
   traen FB-3 y FB-4. El cronograma + KPI de #metodo vive en
   _metodo90-spark.css.
   ============================================================ */

/* ---------- 1 · .container ---------- */
.container{max-width:1320px;margin-inline:auto;padding-inline:1.25rem}
@media(min-width:768px){.container{padding-inline:2.5rem}}
@media(min-width:980px){.container{padding-inline:4rem}}

/* ---------- 2 · ritmo vertical: escala local en vez de clamp() repetidos ---------- */
:root{
  --ritmo-xs: clamp(.9rem,1.4vw,1.2rem);   /* entre un párrafo y el siguiente, mismo bloque */
  --ritmo-s:  clamp(1.4rem,2.2vw,1.8rem);  /* entre bloques hermanos cortos */
  --ritmo-m:  clamp(2rem,3.4vw,2.8rem);    /* entre un bloque y el siguiente subtítulo */
  --ritmo-l:  clamp(2.6rem,4.4vw,3.8rem);  /* entre subsecciones dentro de una sección larga */
}
:where(main > section[id]){padding-block:var(--sep)}

/* ---------- 3 · reduced-motion = estado FINAL, por componente ---------- */
@media(prefers-reduced-motion:reduce){
  .rv,.js .rv,.js .rv.in{opacity:1;transform:none}
  .js .rv-clip>img,.js .rv-clip.in>img{clip-path:none;transform:none}
  .js .rv-grupo>*,.js .riel .tcard{opacity:1;transform:none;transition-delay:0s!important}
  .lmask .w i{transform:none!important;transition:none!important}
  .barra12-pista::after{transform:scaleX(1)!important;transition:none!important}
  /* [data-lit] = estado final: frase encendida y eco visible, sin transicion.
     !important porque el bloque #espejo que declara el estado inicial va MAS
     ABAJO en esta misma hoja (misma especificidad, gana el ultimo). */
  .js .espejo [data-lit] .frase,.js .espejo [data-lit].lit .frase{color:var(--tinta)!important;transition:none!important}
  .js .espejo [data-lit] .eco,.js .espejo [data-lit].lit .eco{opacity:1!important;transform:none!important;transition:none!important}
}

/* ---------- 4 · sin JS: todo visible ---------- */
html:not(.js) .rv,
html:not(.js) .rv-clip>img,
html:not(.js) .rv-grupo>*{opacity:1;transform:none;clip-path:none}
html:not(.js) .espejo-foto{transform:none}
html:not(.js) .espejo [data-lit] .frase{color:var(--tinta)}
html:not(.js) .espejo [data-lit] .eco{opacity:1;transform:none}

/* ---------- 5 · utilidades ---------- */
.glink{display:inline-flex;align-items:center;min-height:44px;font-family:var(--dato);font-size:13px;letter-spacing:.06em;color:var(--suave);text-decoration:underline;text-underline-offset:3px}
.glink:hover{color:var(--carmin)}
/* sec-label puede llevar su eyebrow como h2 (jerarquía) sin heredar subrayado de enlace */
.sec-label h2.eyebrow{margin:0}

/* ============================================================
   #espejo — lista de reconocimiento + foto con parallax
   ============================================================ */
.espejo-head{max-width:62ch}
.espejo-head .body-lg{margin-top:.6em;color:var(--suave)}

/* la foto respira entre la cabecera y la lista: wrapper .plx mueve,
   el hijo .rv-clip recorta — nunca el mismo elemento anima las dos cosas */
.espejo-foto{margin-top:var(--ritmo-l);max-width:640px}
.espejo-foto-clip{border-radius:var(--r-media);overflow:hidden;aspect-ratio:16/9}
.espejo-foto-clip img{display:block;width:100%;height:100%;object-fit:cover}

.espejo .rv-grupo{
  list-style:none;margin:var(--ritmo-l) 0 0;padding:0;
  display:grid;grid-template-columns:1fr;gap:1px;
  background:var(--linea);border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);
}
.espejo .rv-grupo>li{background:var(--quieto);padding:clamp(1.4rem,3vw,2rem) 0;display:grid;gap:.5em}
.espejo .frase{font-family:var(--serif);font-weight:400;font-size:clamp(1.15rem,1.6vw,1.4rem);line-height:1.35;color:var(--tinta)}
.espejo .eco{font-family:var(--voz);font-size:.98rem;line-height:1.5;color:var(--suave);max-width:52ch}
/* [data-lit]: la frase se enciende y el eco entra cuando el <li> llega a leerse
   (JS en _fatburner-micro.js). Mismo contrato que pelvix.html: sin esto el
   markup traia data-lit muerto y la seccion mas densa aparecia de golpe. */
.js .espejo [data-lit] .frase{color:color-mix(in srgb,var(--tinta) 62%,transparent);transition:color 1s var(--e-expo,cubic-bezier(.16,1,.3,1))}
.js .espejo [data-lit].lit .frase{color:var(--tinta)}
.js .espejo [data-lit] .eco{opacity:0;transform:translateY(8px);transition:opacity .9s var(--e-expo,cubic-bezier(.16,1,.3,1)) .15s,transform .9s var(--e-expo,cubic-bezier(.16,1,.3,1)) .15s}
.js .espejo [data-lit].lit .eco{opacity:1;transform:none}
.espejo-cierre{margin-top:var(--ritmo-m);font-size:1.05rem;line-height:1.5;color:var(--tinta);max-width:56ch}
.espejo-cierre em{font-style:normal;color:var(--carmin)}
@media(min-width:980px){
  .espejo .rv-grupo{grid-template-columns:1fr 1fr}
  .espejo .rv-grupo>li{padding:clamp(1.8rem,2.2vw,2.4rem)}
  .espejo .rv-grupo>li:nth-child(odd){border-right:1px solid var(--linea)}
}

/* ============================================================
   #metodo — definición + letra chica; cronograma y KPI: _metodo90-spark.css
   ============================================================ */
.metodo-def{margin-top:var(--ritmo-s);max-width:64ch;color:var(--suave)}
.metodo-letra{margin-top:var(--ritmo-xs);max-width:58ch;font-size:13px;line-height:1.6;color:var(--suave);font-style:italic}
.metodo-letra a{color:var(--carmin);text-decoration:underline;text-underline-offset:2px}
/* el h2 palabra-a-palabra (única vez en la página): columna angosta para que el
   color avance en varias líneas mientras se scrollea, no en una sola de punta a punta */
#metodo-h[data-reveal-words]{margin-top:var(--ritmo-s);max-width:34ch;gap:.2em .3em}
@media(min-width:980px){#metodo-h[data-reveal-words]{max-width:30ch}}

/* ============================================================
   #bascula — respiro oscuro; la balanza la pega FB-5
   ============================================================ */
.bascula{text-align:center}
.bascula .container{display:flex;flex-direction:column;align-items:center;gap:var(--ritmo-m)}
.bascula .dh2{max-width:16ch}

/* ============================================================
   #opiniones
   ============================================================ */
.opiniones{text-align:center}
.opiniones-head{max-width:52rem;margin-inline:auto}
.opiniones-head .dh2{margin-top:.9rem}
.opiniones-nota{max-width:44rem;margin:1rem auto 0;color:var(--suave)}
.opiniones-head .glink{margin-top:1.2rem}
.opiniones-grid{margin-top:var(--ritmo-l);display:grid;gap:1.5rem;text-align:left;grid-template-columns:1fr}
@media(min-width:768px){.opiniones-grid{grid-template-columns:repeat(3,1fr)}}
.op-card{border:1px solid var(--linea);border-radius:var(--r-card);padding:1.6rem;background:var(--panel);display:flex;flex-direction:column;gap:.9rem}
.op-card .stars{color:var(--oro);letter-spacing:.3em;font-size:14px}
.op-card .who{font-family:var(--dato);font-size:13px;color:var(--suave)}
.op-card .who b{font-weight:400;color:var(--tinta)}

/* ============================================================
   #ficha
   ============================================================ */
.ficha{text-align:left}
.specs{margin-top:var(--ritmo-s);display:flex;flex-direction:column;max-width:56rem}
.ficha-nota,.biomap{max-width:56rem}
.spec{display:grid;grid-template-columns:auto 1fr;gap:.3rem 1.5rem;align-items:baseline;padding-block:1.4rem;border-top:1px solid var(--linea)}
.spec:last-child{border-bottom:1px solid var(--linea)}
.spec .sv{font-family:var(--dato);font-size:clamp(22px,2.6vw,30px);color:var(--carmin);white-space:nowrap}
.spec .sk{font-family:var(--dato);font-size:11px;text-transform:uppercase;color:var(--suave);text-align:right}
.ficha-nota{margin-top:var(--ritmo-xs);font-family:var(--dato);font-size:12px;letter-spacing:.05em;color:var(--suave)}
@media(max-width:600px){
  .spec{grid-template-columns:1fr;gap:.35rem}
  .spec .sk{text-align:left;font-size:12px}
}

/* <details> como componente del sistema, no el triángulo por defecto del navegador */
.biomap{margin-top:var(--ritmo-m);border:1px solid var(--linea);border-radius:var(--r-card);padding:1.3rem 1.6rem;background:var(--panel)}
.biomap summary{cursor:pointer;font-family:var(--dato);font-size:13px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--tinta);list-style:none;display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:44px}
.biomap summary::-webkit-details-marker{display:none}
.biomap summary::after{content:"+";font-size:20px;line-height:1;color:var(--carmin);flex:none;transition:transform .2s var(--ease)}
.biomap[open] summary::after{transform:rotate(45deg)}
.biomap-cuerpo{margin-top:1.2rem}
.biomap-aviso{font-size:14px;color:var(--suave);margin-bottom:1.2rem}
.biomap-cuerpo h3{font-family:var(--dato);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--suave);margin:1.2rem 0 .6rem}
.biomap-cuerpo h3:first-of-type{margin-top:0}
.biomap-cuerpo ul{display:grid;grid-template-columns:1fr;gap:.4rem 1.5rem;padding-left:1.1rem;margin:0}
@media(min-width:640px){.biomap-cuerpo ul{grid-template-columns:1fr 1fr}}
.biomap-cuerpo li{font-size:15px;color:var(--tinta);line-height:1.5;margin-bottom:.35rem}
/* 31-ago · qué es cada examen (pedido de Arturo): nombre + explicación chica, sin dropdowns extra */
.biomap-cuerpo li b{font-weight:500}
.biomap-cuerpo li .bio-que{display:block;font-size:12.5px;line-height:1.45;color:var(--suave)}

/* ============================================================
   .banda-cine — respiro visual full-bleed (patrón del home)
   Copiado de index.html:978-1000. SIN el parallax de index.html:558:
   ese scale(1.15) solo tiene sentido con el JS que lo desplaza (vive inline en
   el home, no en _motion-spark.js); aquí recortaría la foto y no se movería
   nada — movimiento decorativo, justo lo que el playbook §0.1 prohíbe.
   ============================================================ */
.banda-cine{position:relative;isolation:isolate}
.banda-cine .marco{position:relative;overflow:hidden;aspect-ratio:4/3}
@media(min-width:700px){.banda-cine .marco{aspect-ratio:auto;height:clamp(360px,56vh,620px)}}
.banda-cine img{width:100%;height:100%;object-fit:cover;display:block}
.banda-cine .marco::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(12,7,6,.62),rgba(12,7,6,.10) 46%,rgba(12,7,6,.22));
}
.banda-cine .pie{
  position:absolute;left:0;right:0;bottom:0;z-index:1;
  padding-block:clamp(1.4rem,3.4vw,2.6rem);
  display:flex;gap:.9rem 2rem;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  color:#fff;
}
.banda-cine .pie .meta{
  font-family:var(--dato);font-size:12px;letter-spacing:.13em;text-transform:uppercase;
  color:rgba(255,255,255,.86);text-shadow:0 1px 10px rgba(10,6,5,.6);padding-bottom:.35rem;
}

/* ============================================================
   #inversion
   ============================================================ */
.inv-cuerpo{max-width:62ch}
.inv-cuerpo .dh2{margin-top:var(--ritmo-xs)}
.inv-lead{margin-top:.6em;color:var(--suave)}
.letra-chica{margin-top:var(--ritmo-m);padding:.9rem 1.1rem;border-left:2px solid var(--carmin);font-size:.92rem;line-height:1.5;color:var(--suave);max-width:52ch}
.inv-oferta{margin-top:var(--ritmo-m)}
.precio-linea{display:flex;align-items:baseline;gap:.6rem}
/* numeral grande = sans 300 con tnum y acento carmin (playbook §1.3 "numeralLg";
   mismo componente que .oferta .precio-gr de pelvix.html). Estaba en serif y en
   tinta: era la unica cifra grande de la familia que no seguia el sistema. */
.precio-gr{font-family:var(--dato);font-weight:300;font-size:clamp(2.4rem,5vw,3.4rem);line-height:1;letter-spacing:-.025em;font-variant-numeric:tabular-nums;font-feature-settings:"tnum";color:var(--carmin)}
.incluye-h{margin-top:var(--ritmo-m)}
.incluye{list-style:none;margin:1.2rem 0 0;padding:0;display:grid;gap:1.3rem}
.incluye li{display:grid;grid-template-columns:24px 1fr;column-gap:.8rem;row-gap:.2rem;align-items:start}
.incluye .ic{width:22px;height:22px;color:var(--carmin);margin-top:.1rem}
.incluye b{font-weight:500;font-size:1.02rem;color:var(--tinta)}
.incluye .valor{grid-column:2;font-family:var(--dato);font-size:.85rem;letter-spacing:.04em;color:var(--suave)}
.incluye p{grid-column:2;font-size:.95rem;line-height:1.5;color:var(--suave);max-width:46ch}
.inv-oferta .pill{margin-top:1.8rem}
.reembolso-h{margin-top:var(--ritmo-l)}
.reembolso-tabla{margin-top:var(--ritmo-xs);border-top:1px solid var(--linea)}
.reembolso-tabla .fila{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.4rem 1.5rem;padding-block:1rem;border-bottom:1px solid var(--linea)}
.reembolso-tabla .fila b{font-weight:500;font-size:1rem;color:var(--tinta)}
.reembolso-tabla .fila small{display:block;margin-top:.2rem;font-family:var(--dato);font-size:.82rem;font-weight:400;letter-spacing:.02em;color:var(--suave)}
.reembolso-tabla .precio{font-family:var(--dato);font-variant-numeric:tabular-nums;font-size:.98rem;color:var(--carmin);white-space:nowrap}
.reembolso-tabla .precio-consulta{color:var(--tinta);white-space:normal;text-align:right}
.tabla-nota{margin-top:.9rem;font-size:.85rem;color:var(--suave)}
@media(min-width:980px){.inv-oferta{max-width:44ch}}
@media(max-width:700px){
  .inversion .fila{flex-direction:column;align-items:flex-start;gap:.45rem}
  .inversion .fila b{max-width:none}
  .inversion .precio{white-space:normal}
  .inversion .precio.precio-consulta{font-size:1rem;line-height:1.4;text-align:left}
}

/* ============================================================
   #agenda-flow
   ============================================================ */
.agenda-bloque{max-width:52ch}
.agenda-bloque .dh2{margin-top:var(--ritmo-xs)}
.agenda-aviso{margin-top:var(--ritmo-xs);padding:.85rem 1.1rem;border-radius:var(--r-s);background:var(--panel);color:var(--tinta);font-size:1rem;line-height:1.4}
.agenda-flow .pill{margin-top:var(--ritmo-s)}

/* ============================================================
   #faq
   ============================================================ */
.faq-cab{max-width:34ch}
.faq-cab .dh2{margin-top:var(--ritmo-xs)}
.faq-intro{margin-top:1rem;color:var(--suave)}
.faq-wsp{margin-top:var(--ritmo-xs);font-size:.95rem;color:var(--suave)}
.faq-wsp a{text-decoration:underline;text-underline-offset:3px}
.faq-wsp a:hover{color:var(--carmin)}
.faq-lista{margin-top:var(--ritmo-l)}
.faq details{border-top:1px solid var(--linea)}
.faq details:last-child{border-bottom:1px solid var(--linea)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1rem;align-items:center;font-size:19px;line-height:1.35;padding:1.05rem .2rem;min-height:44px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--dato);color:var(--suave);font-size:22px;line-height:1;flex:none}
.faq details[open] summary::after{content:"−"}
.faq details p{padding:0 .2rem 1.3rem;color:var(--suave);max-width:64ch;line-height:1.6;font-size:16px}
.faq details p a{color:var(--carmin);text-decoration:underline;text-underline-offset:2px}
@media(min-width:980px){
  .faq .container{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(2rem,6vw,5rem);align-items:start}
  .faq-lista{margin-top:0}
}

/* ============================================================
   #contraindicaciones
   ============================================================ */
.contra-bloque{max-width:56ch}
.contra-bloque .dh2{margin-top:0}
.contra-bloque .body-lg{margin-top:.8em;color:var(--tinta)}

/* ============================================================
   CTA final (cierre carmín)
   ============================================================ */
.cierre-final{padding-block:var(--sep);text-align:center}
.cierre-cab{max-width:44ch;margin-inline:auto}
.cierre-cab .body-lg{margin-top:.8em;color:rgba(255,255,255,.86)}
.cierre-final .pill{margin-top:var(--ritmo-m)}
.prueba-social{margin-top:1.1rem;font-family:var(--dato);font-size:.85rem;letter-spacing:.04em;color:rgba(255,255,255,.88)}
.cierre-links{margin-top:var(--ritmo-l);padding-top:1.8rem;border-top:1px solid rgba(255,255,255,.22);display:grid;gap:.6rem;max-width:52ch;margin-inline:auto;font-size:.92rem;color:rgba(255,255,255,.86)}
.cierre-links a{color:#fff;text-decoration:underline;text-underline-offset:2px}
@media(min-width:980px){.cierre-links{text-align:left}}

/* ============================================================================
   4 · AJUSTES DE ENSAMBLAJE (L-FATBURNER-2)
   Correcciones medidas con capturas reales sobre la pagina ya armada, que
   ningun frente podia ver por separado. No se editan los bloques 1-3: se
   sobreescribe aqui, que es el ultimo tramo de la hoja de pagina.
   ============================================================================ */

/* ---- 4.1 · aire entre secciones -------------------------------------------
   FB-6 puso padding-block:var(--sep) en TODAS las secciones con id via
   :where(...) (especificidad 0). Como el aire se suma en cada costura, dos
   secciones seguidas dejaban 2x--sep = 403px de vacio en 1440px, y las
   secciones cortas (#contraindicaciones, #agenda-flow) quedaban con mas aire
   que contenido. Ni index.html ni pelvix.html cobran --sep por los dos lados
   en cada costura. Un solo token gobierna el ritmo de toda la pagina. */
/* (fase B, 19-ago) --fb-sep retirado: el ritmo lo fijan --sec-pad / --sec-pad-flow del sistema, más abajo en §ritmo-v4. */

/* ---- 4.2 · #frentes: tramo compacto para viewports bajos -------------------
   El panel mas alto (RECHARGE) llegaba a 26px del borde inferior en 1280x720,
   donde .ex-sticky solo deja 592px utiles. Se recorta el alto de la foto y el
   interlineado del panel — nunca el pin, nunca el copy.
   18-ago (critica Neko): el disparador era solo max-height:780px, pero entre 900
   y 1199px de ancho la columna de texto es angosta y el cuerpo gana lineas: a
   1024x800 y 1100x800 el CTA nuevo se salia 27px. El playbook §5.2 ya fija ese
   mismo doble criterio para el home (<=1199px de ancho O <=810px de alto). */
@media (min-width:900px) and (max-height:810px),
       (min-width:900px) and (max-width:1199px){
  #frentes{ --ex-media-h:72svh; --ex-gap:2.4rem }
  #frentes .ex-sticky{ padding-top:calc(var(--ex-hd) + .25rem); padding-bottom:.25rem }
  #frentes .ex-tabs{ margin-bottom:1rem }
  #frentes .ex-ico{ margin-bottom:.5rem }
  #frentes .ex-ico svg{ width:32px; height:32px }
  #frentes .ex-panel .ex-pt{ font-size:clamp(30px,3.4vw,44px); line-height:1.06 }
  #frentes .ex-panel .ex-cuerpo{ margin-top:.9rem; font-size:16px; line-height:1.5 }
  #frentes .ex-ficha{ margin-top:.9rem }
  #frentes .ex-cta{ margin-top:1rem }
  #frentes .ex-cta .caja{ width:48px; height:48px; border-radius:var(--r-s) }
  #frentes .ex-cta>span:last-child{ font-size:16px }
}

/* ---- 4.2b · #frentes en telefonos bajos (360x640 y similares) --------------
   Medido: ANTES de esta ronda el panel ya se salia 11px por abajo en 360x640
   (la ficha quedaba cortada); con el CTA nuevo eran 75px. El quiebre movil de
   FB-2 solo mira el ancho, nunca el alto. Se recorta la franja de foto y el
   interlineado, igual que 4.2 en desktop — el pin y el copy no se tocan. */
@media (max-width:899px) and (max-height:700px){
  #frentes{ --ex-media-h-mov: min(62vw, 26svh) }
  #frentes .ex-tabs .ex-tab{ padding-block:.4rem }
  #frentes .ex-prog{ margin-bottom:.6rem }
  #frentes .ex-ico{ margin-bottom:.4rem }
  #frentes .ex-ico svg{ width:26px; height:26px }
  #frentes .ex-panel .ex-pt{ font-size:22px; line-height:1.08 }
  #frentes .ex-panel .ex-cuerpo{ font-size:14px; line-height:1.35; margin-top:.5rem }
  #frentes .ex-ficha{ margin-top:.5rem }
  #frentes .ex-cta{ margin-top:.7rem }
  #frentes .ex-cta .caja{ width:44px; height:44px }
  #frentes .ex-cta>span:last-child{ font-size:15px }
}
/* ---- 4.2c · telefonos muy bajos (320x568): el icono cede su sitio al CTA ---- */
@media (max-width:899px) and (max-height:600px){
  #frentes{ --ex-media-h-mov: min(40vw, 16svh) }
  #frentes .ex-ico{ display:none }
  #frentes .ex-prog{ margin-bottom:.4rem }
  #frentes .ex-panel .ex-pt{ font-size:20px }
  #frentes .ex-panel .ex-cuerpo{ font-size:13px; line-height:1.3 }
  /* la segunda linea de la ficha cede su sitio al CTA: el dato duro se queda */
  #frentes .ex-det{ display:none }
  #frentes .ex-cta{ margin-top:.5rem }
}

/* ---- 4.3 · #bascula: la comparacion tiene que leerse ----------------------
   .bascula{text-align:center} + .container{display:flex;align-items:center}
   encogian .balanza a 634px dentro de 1440px: la comparacion quedaba perdida
   en el campo oscuro. Ademas la columna izquierda era un "−kg" suelto de 96px
   que se leia como un elemento roto; ahora es un bloque entero sin dividir
   frente al mismo bloque descompuesto (ver nota fatburner-2.md). */
.bascula .container{ align-items:stretch }
.bascula .dh2{ margin-inline:auto }
.balanza{ width:100%; max-width:58rem; margin-inline:auto }
.balanza-idea{ margin-inline:auto }
@media (min-width:700px){
  /* start, no end: asi las dos etiquetas, las dos barras y las dos leyendas
     quedan a la misma altura y el copy es lo unico que puede desalinearse */
  .balanza-comp{ grid-template-columns:1fr 1fr; align-items:start; justify-items:center }
}
.balanza-col{ align-items:center; text-align:center }
.balanza-barras{ width:min(200px,52vw) }
/* el bloque sin dividir: neutro, no carmin — el color informativo es del InBody */
.balanza-total{ height:100%; background:rgba(242,237,232,.17) }
.balanza-leyenda .sw-total{ background:rgba(242,237,232,.17) }
.balanza-leyenda{ justify-content:center }
.balanza-cop{ margin-inline:auto }

/* ---- 4.4 · #espejo: la foto no se queda sola en media pantalla ------------
   A 1440px la columna derecha quedaba vacia junto a la foto (max-width 640px).
   Desde 1120px la cabecera y la foto comparten fila: el parallax de .plx pasa
   a tener con que contrastar. */
@media (min-width:1120px){
  .espejo .container{
    display:grid; grid-template-columns:1fr 1fr;
    column-gap:clamp(2.5rem,5vw,4.5rem); align-items:start;
  }
  .espejo-head{ align-self:center }
  .espejo-foto{ margin-top:0; max-width:none }
  .espejo .rv-grupo,
  .espejo-cierre{ grid-column:1 / -1 }
  .espejo .rv-grupo{ margin-top:var(--ritmo-l) }
}

/* ---- 4.5 · #frentes sin JS: la foto no se queda flotando ------------------
   Hallazgo de FB-4 confirmado en captura: .ex-cols usa align-items:center, y
   sin JS la columna de texto crece a 4 paneles apilados mientras la de foto
   mide una sola altura — la foto quedaba centrada frente al panel 2. Con
   align-items:start acompaña al primer panel, que es a quien pertenece. */
html:not(.js) .ex-cols{ align-items:start }

/* ---- 4.6 · FOOTER canonico ------------------------------------------------
   Ningun frente entrego el CSS del pie: FB-7 entrego el markup (identico en
   las 8 paginas) y FB-6 solo cubrio el cuerpo. Sin estas reglas el <svg> de
   .f-marca no tiene width/height y se estira a toda la pantalla. Copiado
   verbatim del <style> de fatburner.html anterior (bak/fatburner.html.bak
   lineas 258-283), que a su vez es el del home.
   DEUDA: esto es identico en las 8 paginas — deberia ser _pie-spark.css,
   igual que _header-spark.css. Ver fatburner-2.md. */
footer.site{padding-block:3.5rem 2.5rem}
footer.site .cols{display:grid;gap:2.5rem;grid-template-columns:1fr}
@media(min-width:820px){footer.site .cols{grid-template-columns:1.4fr 1fr 1fr 1fr}}
footer.site .col{display:flex;flex-direction:column;gap:.6rem;font-size:16px;color:var(--oscuro-suave)}
footer.site address{font-style:normal}
footer.site .f-marca{display:flex;align-items:center;gap:.6rem;margin-bottom:.2rem}
footer.site .f-marca svg{width:34px;height:34px;color:var(--carmin);flex:none}
footer.site .f-nombre{font-family:var(--serif);font-size:19px;color:var(--oscuro-tinta)}
footer.site .fk{font-family:var(--dato);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--oscuro-tinta);margin-bottom:.4rem}
footer.site .fk.f-subk{margin-top:1rem}
footer.site a:hover{color:var(--oscuro-tinta)}
footer.site .col a{padding-block:.15rem}
footer.site .f-pronto{padding-block:.15rem;opacity:.55}
/* partners: viven en el footer oscuro — los logos blancos brillan ahi */
.partners{display:flex;flex-wrap:wrap;gap:1.2rem 2.4rem;align-items:center}
.partners img{height:24px;width:auto;opacity:.75;transition:opacity .15s var(--ease)}
.partners img.inv{filter:invert(1) grayscale(1)}
.partners img:hover{opacity:1}
footer.site .legal{margin-top:3rem;border-top:1px solid rgba(242,237,232,.15);padding-top:1.5rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-family:var(--dato);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--oscuro-suave)}
@media(max-width:900px){
  footer.site .col a,footer.site .f-pronto{min-height:44px;display:inline-flex;align-items:center;padding-block:.35rem}
}

/* ritmo-v4 (fase B, 19-ago): fatburner adopta los tokens de ritmo del sistema, iguales a pelvix.
   `main > section[id]` (0,1,1) le gana a `.sec` (0,1,0), así que la semántica se declara aquí con
   la misma especificidad: por defecto --sec-pad (cambia el fondo) y .sec-flow suma el extra. */
main > section[id]{ padding-block:calc(var(--sec-pad) / 2) }
main > section[id].sec-flow{ padding-top:calc(var(--sec-pad-flow) - var(--sec-pad) / 2) }
.cierre-final{ padding-block:calc(var(--sec-pad) / 2) }

/* fase B (19-ago): H2 de página de programa por debajo del H1 del hero */
@media(min-width:980px){.dh2{font-size:clamp(44px,4vw,56px);line-height:1.12}}

/* fase B (19-ago) · #inversion en grilla: oferta | tablas de reembolso, sin media página vacía */
.inv-cuerpo{max-width:none}
.inv-cuerpo .inv-lead,.inv-cuerpo .letra-chica{max-width:62ch}
.inv-grid{margin-top:var(--ritmo-m);align-items:start}
.inv-grid .inv-oferta{margin-top:0}
@media(min-width:980px){.inv-grid .inv-oferta{max-width:none}}
.inv-tablas .reembolso-h:first-child{margin-top:0}
.inv-tablas .reembolso-h{font-size:clamp(22px,2.2vw,28px);line-height:1.2}
.inv-tablas .reembolso-tabla{max-width:none}

/* ============================================================================
   #destino — EL OBJETIVO (28-ago). El porqué antes del cómo: una tabla clínica
   de seis direcciones y el cierre como frase grande. Sin gráficos, sin efectos:
   tipografía, filo de línea y un solo acento. La columna derecha queda corta a
   propósito: sube menos cosas, pero son las que sostienen el resultado.
   ============================================================================ */
#destino .dh2{max-width:20ch}
.obj-tabla{
  list-style:none;padding:0;
  margin:clamp(2.2rem,4vw,3.2rem) 0 0;
  border-top:1px solid var(--linea);
  display:grid;grid-auto-flow:row;
}
@media(min-width:820px){
  .obj-tabla{
    grid-auto-flow:column;grid-template-rows:repeat(4,auto);
    column-gap:clamp(3rem,7vw,6.5rem);
  }
}
.obj-tabla li{
  display:flex;align-items:baseline;gap:clamp(.9rem,1.6vw,1.4rem);
  padding:clamp(.9rem,1.5vw,1.25rem) 0;
  border-bottom:1px solid var(--linea);
  font-family:var(--serif);font-size:clamp(20px,2.1vw,27px);line-height:1.25;
}
.obj-flecha{
  /* 31-ago · Arturo: a .78em no se notaban; ahora la flecha manda en la fila */
  font-family:var(--dato);font-size:1.25em;font-weight:600;color:var(--carmin);
  flex:none;width:1.1em;text-align:center;line-height:1;
  font-variant-numeric:tabular-nums;
}
/* lo que sube pesa más: mismo acento, un pelo más de presencia */
.obj-sube .obj-txt{color:var(--tinta)}
.obj-sube .obj-flecha{font-weight:700}
.obj-claim{
  margin-top:clamp(2.4rem,5vw,4rem);
  max-width:24ch;
  font-family:var(--serif);font-size:clamp(28px,3.6vw,46px);line-height:1.18;
  text-wrap:balance;
}
.obj-claim em{font-style:normal;color:var(--carmin)}

/* ============================================================================
   #noventa — "90 días. Un equipo. Un objetivo." (Alex, 28-ago). Una idea por
   pantalla: la integración es el argumento, no un gráfico.
   ============================================================================ */
#noventa .noventa-h{max-width:16ch}
#noventa .noventa-sub{margin-top:clamp(1rem,2vw,1.4rem);max-width:44ch;color:var(--suave)}

/* ═══ 30-ago · feedback Alex: los tres determinantes (MENTE → NUTRICIÓN → MÚSCULO) ═══
   El producto NO se presenta como suma de profesionales (invita a sumar precios), sino como
   una intervención coordinada sobre tres determinantes con un solo resultado. */
.determinantes{
  list-style:none;margin:var(--ritmo-m,2.5rem) 0 0;padding:0;
  display:grid;grid-template-columns:1fr;gap:0;
  counter-reset:det;
}
/* 31-ago · Arturo: se suma el 4.º determinante (MONITOREO, médico + GLP-1 si es tu caso) */
@media(min-width:820px){
  .determinantes{grid-template-columns:repeat(4,1fr)}
}
.det{position:relative;padding:1.9rem 1.4rem;text-align:center}
/* separador + flecha de secuencia: es un recorrido, no tres servicios sueltos */
@media(min-width:820px){
  .det + .det{border-left:1px solid var(--linea)}
  .det + .det::before{
    content:"";position:absolute;left:-7px;top:3.35rem;width:14px;height:14px;
    background:var(--fondo,#f4f0ec);
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.5 4l7 8-7 8-1.5-1.3 5-5.7H4v-2h11.9l-5-5.7z' fill='%23000'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.5 4l7 8-7 8-1.5-1.3 5-5.7H4v-2h11.9l-5-5.7z' fill='%23000'/%3E%3C/svg%3E") center/contain no-repeat;
    background-color:var(--carmin);
  }
}
@media(max-width:819px){
  .det + .det{border-top:1px solid var(--linea)}
}
.det-ico{display:inline-flex;width:44px;height:44px;color:var(--carmin);margin-bottom:.9rem}
.det-ico svg{width:100%;height:100%;stroke-linecap:round;stroke-linejoin:round}
.det-t{
  font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:var(--carmin);
  font-weight:600;margin-bottom:.55rem;
}
.det p{color:var(--suave);max-width:30ch;margin-inline:auto;text-wrap:pretty}

/* franja de entrenamientos incluidos: responde a "no lo compares con un gimnasio" */
.entrena{
  margin-top:var(--ritmo-m,2.5rem);background:var(--quieto);border-radius:var(--r-l,22px);
  padding:clamp(1.4rem,3vw,2.2rem);text-align:center;
}
.entrena-t{font-size:clamp(1.05rem,.95rem + .5vw,1.3rem);font-weight:600;letter-spacing:.01em}
.entrena-d{margin-top:.5rem;color:var(--suave)}
.entrena-n{margin-top:.7rem;font-size:.9rem;color:var(--suave);opacity:.85}

/* 30-ago · qué entrega la Evaluación Fat Burner (texto de Alex) */
.eval-detalle{margin-top:1.1rem;display:grid;gap:.75rem;max-width:62ch}
.eval-detalle p{color:var(--suave);text-wrap:pretty}
.eval-detalle p b{color:var(--tinta);font-weight:600}
.valor-programa{margin-top:.55rem;font-size:.9rem;color:var(--suave);max-width:44ch}

/* 30-ago · el CTA dice la ACCIÓN, no el precio. El precio y el contenido bajan a una línea de
   apoyo: la etiqueta de 46 caracteres pedía 450px y en un iPhone hay 350, por eso salía de
   borde a borde. Objetivo táctil intacto (min-height 48px del .pill). */
.cta-apoyo{
  display:flex;flex-direction:column;align-items:center;gap:.15rem;
  font-family:var(--dato);line-height:1.35;text-align:center;max-width:34ch;
  text-shadow:0 1px 1px rgba(10,6,5,.18),0 6px 22px rgba(10,6,5,.26);
}
.cta-apoyo b{font-size:15px;font-weight:600;color:#fff;letter-spacing:.01em}
.cta-apoyo span{font-size:13.5px;color:rgba(255,255,255,.86)}
@media(min-width:980px){
  .cta-apoyo b{font-size:16px}
  .cta-apoyo span{font-size:14px}
}

/* ═══ 31-ago · frentes con nombres claros + disclaimer del acompañamiento psicológico ═══
   Los tabs pasaron de Fire/Recharge/Harmony/Biomap a Entrenamiento/Nutrición/Psicología/
   Laboratorio: palabras más largas, letra más compacta en móvil para que no se toquen.
   .ex-nota es el disclaimer ético del panel Psicología (la versión completa vive en TyC §3). */
#frentes .ex-nota{margin-top:.85rem;font-size:12.5px;line-height:1.5;color:var(--suave);max-width:58ch}
@media (max-width:899px){
  #frentes .ex-tabs .ex-tab{font-size:9.5px;letter-spacing:.3px}
  #frentes .ex-nota{font-size:11.5px;line-height:1.45;margin-top:.6rem}
}

/* ============================================================================
   #primer-paso (5-sep-2026) · LA PUERTA
   "Empieza midiendo, no comprometiéndote." vivía en #inversion, a 14 pantallas
   de scroll. Se movió aquí, justo después de #noventa, para contestar la
   objeción de las 12 semanas en el momento en que nace. Sin lenguaje visual
   nuevo: la grilla es .grid2 del sistema y la tarjeta usa el panel, el borde y
   el radio de .op-card. El precio va un punto por debajo de .precio-gr para que
   #inversion conserve el número más grande de la página.
   ============================================================================ */
#primer-paso .dh2{margin-top:var(--ritmo-xs);max-width:20ch}
#primer-paso .paso-lead{margin-top:var(--ritmo-s);color:var(--suave);max-width:52ch}

.paso-oferta{
  padding:clamp(1.4rem,3vw,2rem);
  border:1px solid var(--linea);border-radius:var(--r-card);background:var(--panel);
}
.paso-etq{font-family:var(--dato);font-size:12.5px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--suave)}
.paso-precio{margin-top:.35rem;font-family:var(--dato);font-weight:300;font-size:clamp(2rem,4.2vw,2.8rem);line-height:1;letter-spacing:-.025em;font-variant-numeric:tabular-nums;font-feature-settings:"tnum";color:var(--carmin)}
.paso-det{margin-top:.7rem;font-size:.95rem;line-height:1.5;color:var(--suave);max-width:34ch}
.paso-oferta .pill{margin-top:1.5rem}
.paso-nota{margin-top:1.1rem;font-size:.85rem;line-height:1.5;color:var(--suave)}
.paso-nota a{color:var(--carmin);text-decoration:underline;text-underline-offset:3px}