/* ═══════════════════════════════════════════════════════════════════
   LAS GUÍAS GRATIS, COMO WEB · 24 oct 2026
   Mario: "20 páginas, con fotos, estudios y cosas divertidas e
   interactuables (…) que en el móvil da por culo descargarse cosas".
   Un libro que se pasa deslizando, con su botón de PDF al final.
   Fondo blanco, como la guía de los 5 trucos (Mario, 19 oct).
   ═══════════════════════════════════════════════════════════════════ */
@font-face{font-family:Modrego;src:url(Modrego.woff2) format('woff2');font-display:swap}

:root{
  --tinta:#24262E; --texto:#474A59; --suave:#8A8D9C; --linea:#ECE6DA;
  --oro:#C9A96E; --oro-osc:#9E7B40; --crema:#F8F5EF; --papel:#FFFFFF;
  --nota:#FFF6DF; --verde:#1FA855; --rojo:#D9534F; --wa:#25D366;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--crema);color:var(--tinta);font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow:hidden}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
:focus-visible{outline:2px solid var(--oro);outline-offset:3px}

/* ── LA BARRA DE ARRIBA ── */
.barra{position:fixed;top:0;left:0;right:0;z-index:20;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--linea)}
.barra-in{max-width:560px;margin:0 auto;display:flex;align-items:center;gap:12px;padding:10px 16px}
.barra img{height:16px;width:auto}
.barra .cuenta{margin-left:auto;font-size:13px;font-weight:700;color:var(--suave);font-variant-numeric:tabular-nums}
.barra .cerrar{font-size:13px;font-weight:700;color:var(--suave);text-decoration:none;padding:4px 2px}
.progreso{height:3px;background:var(--linea)}
.progreso i{display:block;height:100%;width:0;background:var(--oro);transition:width .3s ease}

/* ── EL LIBRO ── */
.libro{position:fixed;inset:0;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;scrollbar-width:none;overscroll-behavior-x:contain}
.libro::-webkit-scrollbar{display:none}
.pag{flex:0 0 100%;scroll-snap-align:start;scroll-snap-stop:always;overflow-y:auto;overflow-x:hidden;
  padding:72px 20px 110px;-webkit-overflow-scrolling:touch}
.pag-in{max-width:520px;margin:0 auto;background:var(--papel);border-radius:22px;padding:26px 22px 30px;
  box-shadow:0 10px 30px -18px rgba(36,38,46,.25);min-height:100%}

/* ── LOS BOTONES DE ABAJO ── */
.pie{position:fixed;left:0;right:0;bottom:0;z-index:20;padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:linear-gradient(transparent,var(--crema) 35%)}
.pie-in{max-width:560px;margin:0 auto;display:flex;gap:10px}
.pie button{flex:0 0 auto;height:52px;border-radius:16px;font-weight:800;font-size:16px}
.pie .atras{width:56px;background:var(--papel);border:1px solid var(--linea);color:var(--tinta)}
.pie .sigue{flex:1;background:var(--tinta);color:#fff}
.pie button[disabled]{opacity:.35}

/* ── LA LETRA ── */
.eti{font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:800;color:var(--oro-osc);margin-bottom:8px}
h1,h2,.num{font-family:Modrego,"Arial Black",sans-serif;letter-spacing:.045em;font-weight:400;text-wrap:balance}
h1{font-size:38px;line-height:1.08;margin:6px 0 14px}
h2{font-size:29px;line-height:1.14;margin:2px 0 14px}
h1 span,h2 span{color:var(--oro)}
h3{font-size:19px;line-height:1.3;margin:20px 0 8px}
p{margin:0 0 12px;color:var(--texto)}
p b{color:var(--tinta)}
.sub{font-size:18px}
.mano{font-family:'Caveat',cursive;font-size:25px;line-height:1.15;color:var(--oro-osc);margin:12px 0}
.num{font-size:64px;line-height:.9;color:var(--oro)}
.peque{font-size:13px;color:var(--suave);line-height:1.5}

/* ── PIEZAS ── */
.foto{border-radius:16px;overflow:hidden;position:relative;margin:14px 0;box-shadow:0 10px 24px -14px rgba(0,0,0,.4)}
.foto img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
.foto .pf{position:absolute;left:0;right:0;bottom:0;padding:30px 14px 10px;background:linear-gradient(transparent,rgba(0,0,0,.72));
  color:#fff;font-family:'Caveat',cursive;font-size:23px;line-height:1.1}
.nota{margin:16px 0;padding:14px 16px;background:var(--nota);border-radius:6px;transform:rotate(-1deg);
  box-shadow:0 4px 12px rgba(0,0,0,.07);font-family:'Caveat',cursive;font-size:22px;line-height:1.2;color:#5A4520}
.cita{margin:14px 0;padding:14px 16px;border-left:3px solid var(--oro);background:var(--crema);border-radius:0 12px 12px 0;font-size:16px;color:var(--texto)}
.estudio{margin:14px 0;padding:14px 16px;border:1px solid var(--linea);border-radius:14px;font-size:15px;color:var(--texto);background:#fff}
.estudio::before{content:"🔬 Lo que dice la ciencia";display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:var(--oro-osc);margin-bottom:6px}
.estudio i{display:block;margin-top:6px;font-size:13px;color:var(--suave);font-style:normal}
.caja{margin:14px 0;padding:16px;border-radius:14px;background:var(--tinta);color:#fff}
.caja p{color:rgba(255,255,255,.82);margin:0}
.caja b.t{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--oro);margin-bottom:6px}
.boton{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 22px;border-radius:16px;
  font-weight:800;font-size:16px;text-decoration:none;background:var(--tinta);color:#fff;margin:6px 6px 0 0}
.boton.oro{background:var(--oro);color:var(--tinta)}
.boton.wa{background:var(--wa);color:#fff}
.boton.claro{background:var(--papel);color:var(--tinta);border:1px solid var(--linea)}
.boton.ancho{width:100%;margin-right:0}
.yo{display:block;width:100%;height:auto;border-radius:16px;aspect-ratio:16/10;object-fit:cover;margin:6px 0 14px}
.logo-portada{height:22px;width:auto;margin-bottom:34px}

/* ── LO QUE SE TOCA ── */
.juego{margin:16px 0;padding:16px;border-radius:18px;background:var(--crema);border:1px solid var(--linea)}
.juego .tit{font-weight:800;color:var(--tinta);margin-bottom:10px;font-size:16px}
.fila{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:10px 0 4px;font-size:15px;color:var(--texto)}
.fila b{font-variant-numeric:tabular-nums;color:var(--tinta)}
input[type=range]{width:100%;accent-color:var(--oro);height:32px}
.res{margin-top:12px;padding:14px;border-radius:14px;background:#fff;border:1px solid var(--linea)}
.res .grande{font-family:Modrego,"Arial Black",sans-serif;letter-spacing:.04em;font-size:30px;line-height:1.1;color:var(--tinta);font-variant-numeric:tabular-nums}
.res .grande small{display:block;margin-top:2px;font-family:-apple-system,"Helvetica Neue",Arial,sans-serif;font-size:14px;letter-spacing:0;color:var(--suave);font-weight:700}
.res p{margin:6px 0 0;font-size:15px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{min-height:42px;padding:8px 14px;border-radius:12px;background:#fff;border:1px solid var(--linea);font-weight:700;font-size:15px;color:var(--tinta)}
.chip.on{background:var(--tinta);border-color:var(--tinta);color:#fff}
.campos{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 0}
.campo label{display:block;font-size:13px;font-weight:700;color:var(--suave);margin-bottom:4px}
.campo input{width:100%;height:46px;border-radius:12px;border:1px solid var(--linea);padding:0 12px;font:inherit;font-size:17px;background:#fff;color:var(--tinta)}
.tarjetas{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0}
.tarjeta{min-height:92px;padding:12px;border-radius:14px;background:#fff;border:1px solid var(--linea);text-align:left;display:flex;flex-direction:column;justify-content:space-between;gap:6px}
.tarjeta .que{font-weight:700;font-size:15px;line-height:1.25;color:var(--tinta)}
.tarjeta .cuanto{font-size:13px;color:var(--suave);font-weight:700}
.tarjeta.on{background:var(--tinta);border-color:var(--tinta)}
.tarjeta.on .que{color:#fff}
.tarjeta.on .cuanto{color:var(--oro)}
.lista-toque{list-style:none;margin:10px 0}
.lista-toque li{margin:8px 0}
.lista-toque button{width:100%;display:flex;align-items:flex-start;gap:12px;text-align:left;padding:12px 14px;border-radius:14px;background:#fff;border:1px solid var(--linea);font-size:16px;line-height:1.35;color:var(--tinta)}
.lista-toque .cuadro{flex:0 0 24px;height:24px;border-radius:7px;border:2px solid var(--oro);display:grid;place-items:center;font-size:15px;color:#fff;margin-top:-1px}
.lista-toque button.on{background:#FBF7EE}
.lista-toque button.on .cuadro{background:var(--oro)}
.lista-toque button.on .cuadro::after{content:"✓"}
.mito{margin:12px 0;padding:14px;border-radius:16px;background:#fff;border:1px solid var(--linea)}
.mito .frase{font-weight:800;font-size:17px;color:var(--tinta);line-height:1.3}
.mito .dos{display:flex;gap:8px;margin-top:10px}
.mito .dos button{flex:1;min-height:44px;border-radius:12px;border:1px solid var(--linea);font-weight:800;background:var(--crema)}
.mito .sol{display:none;margin-top:10px;font-size:15px;color:var(--texto)}
.mito.hecho .sol{display:block}
.mito.hecho .dos{display:none}
.mito .veredicto{font-weight:900;letter-spacing:.06em;font-size:13px}
.mito.bien .veredicto{color:var(--verde)}
.mito.mal .veredicto{color:var(--rojo)}
.marcador{text-align:center;font-weight:800;color:var(--tinta);margin-top:8px;font-variant-numeric:tabular-nums}
.barras{display:flex;gap:14px;align-items:flex-end;height:150px;margin:14px 0 6px}
.barras .b{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:6px;height:100%}
.barras .b i{display:block;width:100%;border-radius:12px 12px 4px 4px;background:var(--oro);transition:height .5s ease}
.barras .b:first-child i{background:#C9CCD6}
.barras .b span{font-size:13px;font-weight:700;color:var(--texto);text-align:center;line-height:1.25}
.grafica{width:100%;height:auto;display:block;margin-top:8px}
.idx{list-style:none;margin:6px 0}
.idx button{width:100%;display:flex;gap:12px;align-items:baseline;text-align:left;padding:10px 4px;border-bottom:1px solid var(--linea);font-size:16px;color:var(--tinta)}
.idx button b{font-family:Modrego,"Arial Black",sans-serif;color:var(--oro);min-width:28px;letter-spacing:.04em}
.idx button span{margin-left:auto;color:var(--suave);font-size:13px;font-variant-numeric:tabular-nums}
details.estudios{margin-top:18px;border-top:1px solid var(--linea);padding-top:12px}
details.estudios summary{font-weight:800;cursor:pointer;color:var(--tinta)}
details.estudios ol{margin:10px 0 0 18px;font-size:13px;line-height:1.5;color:var(--texto)}
details.estudios li{margin-bottom:8px}
.solo-pdf{display:none}
.fin-firma{font-family:'Caveat',cursive;font-size:32px;color:var(--oro-osc);margin-top:6px}

@media (min-width:700px){
  .pag{padding-top:84px}
  h1{font-size:44px}
}
@media (prefers-reduced-motion:reduce){
  .libro{scroll-behavior:auto}
  .progreso i,.barras .b i{transition:none}
}

/* ── EL PDF (mismo archivo, impreso) ── */
@media print{
  /* Un PDF para leer en el móvil, no para imprimir: página alta, como una pantalla */
  @page{size:150mm 262mm;margin:0}
  html,body{height:auto;overflow:visible;background:#fff;font-size:13.5px}
  *{box-shadow:none !important}
  .foto img,.yo{max-height:78mm}
  .foto.cuadrada{width:56%;margin-left:auto;margin-right:auto}
  .mito{padding:9px 12px;margin:7px 0} .mito .frase{font-size:14.5px} .mito .sol{font-size:13px;margin-top:4px}
  details.estudios ol{font-size:10.5px;line-height:1.4} details.estudios li{margin-bottom:4px}
  .foto.cuadrada img{max-height:none}
  .nota{transform:none}
  .barra,.pie,.solo-web{display:none !important}
  .solo-pdf{display:block}
  .libro{position:static;display:block;overflow:visible}
  .pag{padding:11mm 11mm 9mm;height:auto;min-height:0;overflow:visible;break-after:page;page-break-after:always}
  .pag:last-child{break-after:auto;page-break-after:auto}
  .mito .sol{display:block !important} .mito .dos{display:none !important}
  .lista-toque button{border:1px solid var(--linea)}
  .pag-in{box-shadow:none;padding:0;border-radius:0;max-width:none}
  h1{font-size:30pt} h2{font-size:21pt}
  .foto,.juego,.estudio,.caja,.nota{break-inside:avoid}
  details.estudios ol{display:block}
  a.boton{border:1px solid var(--linea)}
}

/* aprende-a-comer · 24 oct */
/* Lista normal, con puntos (la de "una fuente de proteína en cada comida") */
.lista{margin:4px 0 14px 22px;color:var(--texto)}
.lista li{margin:5px 0;padding-left:2px}
.lista li::marker{color:var(--oro)}

/* ganar-musculo · 24 oct */
/* Tablas (simulador de progresión y rutina de 4 días) y la fila de los 7 días */
.tabla{width:100%;border-collapse:collapse;margin:10px 0;font-size:14px;line-height:1.35;font-variant-numeric:tabular-nums;background:#fff}
.tabla th,.tabla td{padding:8px 10px;text-align:left;vertical-align:top;border-bottom:1px solid var(--linea);color:var(--texto)}
.tabla thead th{font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:800;color:var(--oro-osc)}
.tabla td:first-child{color:var(--tinta);font-weight:700}
.tabla td:last-child,.tabla thead th:last-child{text-align:right;white-space:nowrap}
.tabla tr.dia th{background:var(--tinta);color:#fff;font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:800;text-align:left}
.tabla tr.sube td{background:#FBF7EE;color:var(--tinta);font-weight:800}
.semana7{display:flex;gap:6px;margin:12px 0 4px}
.semana7 span{flex:1;min-height:40px;border-radius:10px;display:grid;place-items:center;background:#fff;border:1px solid var(--linea);
  font-weight:800;font-size:14px;color:var(--suave);transition:background .25s}
.semana7 span.on{background:var(--oro);border-color:var(--oro);color:var(--tinta)}
.boton[disabled]{opacity:.45;cursor:default}
@media print{
  .tabla{font-size:10.5px;line-height:1.25}
  .tabla th,.tabla td{padding:2.5px 6px}
  .tabla tr.dia th{font-size:9.5px}
  .tabla tr{break-inside:avoid}
}

/* ═══════════════════════════════════════════════════════════════════
   supera-la-fisica · 24 oct
   Solo para la guía de las pruebas físicas: tablas de baremos, lo que
   cambia entre hombres y mujeres, los niveles del plan, el cronómetro,
   la respiración y el diario. No cambia nada de lo de arriba.
   ═══════════════════════════════════════════════════════════════════ */
/* Hombre / mujer: sin elegir se ve todo; al elegir, solo lo tuyo. En el PDF, todo. */
@media screen{
  body[data-sexo="H"] .solo-m,body[data-sexo="M"] .solo-h{display:none !important}
  body[data-sexo] .hm{display:none}
}
.hm{font-style:normal;font-weight:700;font-size:.85em;color:var(--suave)}
.caja .sf-b{color:#fff;font-weight:800}

/* Tablas de baremos (con scroll lateral si no caben) */
.sf-tabla{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:12px 0 8px;border:1px solid var(--linea);border-radius:14px}
.sf-tabla table{width:100%;border-collapse:collapse;background:#fff;font-size:14px;font-variant-numeric:tabular-nums}
.sf-tabla th{background:var(--tinta);color:#fff;font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:800;text-align:left;padding:9px 10px;white-space:nowrap}
.sf-tabla td{padding:7px 10px;border-top:1px solid var(--linea);color:var(--texto);white-space:nowrap}
.sf-tabla th:first-child,.sf-tabla td:first-child{text-align:center;width:52px}
.sf-tabla td:first-child{font-family:Modrego,"Arial Black",sans-serif;font-size:19px;letter-spacing:.04em;color:var(--tinta)}
.sf-tabla tr.sf-elim td{background:#FDF0EF}
.sf-tabla tr.sf-elim td:first-child{color:var(--rojo)}
.sf-tabla tr.sf-min td{background:#EEF8F1}
.sf-tabla tr.sf-min td:first-child{color:var(--verde)}
.sf-tabla tr.sf-max td{background:#FBF5E8}
.sf-tabla tr.sf-max td:first-child{color:var(--oro-osc)}
.sf-tabla td.sf-tuyo{box-shadow:inset 0 0 0 2px var(--oro);font-weight:800;color:var(--tinta)}
.sf-tabla td.sf-tuyo::after{content:" ← tú";color:var(--oro-osc);font-size:12px}
.sf-vacia td{height:34px}
.sf-leyenda{font-size:13px;color:var(--suave);line-height:1.5;margin:0 0 10px}

/* Listas y piezas de texto */
.sf-lista{list-style:none;margin:6px 0 12px}
.sf-lista li{position:relative;padding:6px 0 6px 22px;border-bottom:1px solid var(--linea);color:var(--texto);font-size:15.5px;line-height:1.45}
.sf-lista li::before{content:"—";position:absolute;left:0;top:6px;color:var(--rojo);font-weight:800}
.sf-lista.si li::before{content:"✓";color:var(--verde)}
.sf-pasos{list-style:none;counter-reset:sfp;margin:12px 0}
.sf-pasos li{counter-increment:sfp;position:relative;padding:0 0 14px 42px;color:var(--texto);font-size:15.5px;line-height:1.5}
.sf-pasos li::before{content:counter(sfp,decimal-leading-zero);position:absolute;left:0;top:-3px;font-family:Modrego,"Arial Black",sans-serif;font-size:23px;letter-spacing:.04em;color:var(--oro)}
.sf-pasos li b{display:block;color:var(--tinta)}
.lista-toque .sf-exp{display:block;margin-top:3px;font-size:14.5px;font-weight:400;color:var(--texto)}
.lista-toque .sf-fix{display:block;margin-top:5px;font-size:14px;font-weight:700;color:var(--verde)}
.sf-dos{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0}
.sf-ej{background:#fff;border:1px solid var(--linea);border-top:3px solid var(--verde);border-radius:12px;padding:10px 12px}
.sf-ej.mal{border-top-color:var(--rojo)}
.sf-ej b.t{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--verde);margin-bottom:4px}
.sf-ej.mal b.t{color:var(--rojo)}
.sf-ej p{display:flex;justify-content:space-between;margin:0;padding:3px 0;font-size:14px;border-bottom:1px solid var(--linea)}
.sf-ej p.tot{border:0;padding-top:6px;font-weight:800;color:var(--tinta)}

/* El plan por niveles */
.sf-nivel{display:none;margin-top:14px}
.sf-nivel.on{display:block}
.sf-nv-tit{margin:0 0 2px;font-weight:800;font-size:16px;color:var(--tinta)}
.sf-nv-sub{margin:0 0 6px;font-size:13px;font-weight:700;color:var(--oro-osc)}
.sf-nv-sub span{display:block}
.sf-plan{list-style:none;margin:6px 0 4px}
.sf-plan li{position:relative;padding:7px 0 7px 20px;border-bottom:1px solid var(--linea);font-size:15.5px;line-height:1.45;color:var(--texto)}
.sf-plan li::before{content:"›";position:absolute;left:4px;top:6px;font-weight:900;color:var(--oro)}

/* La calculadora, el cronómetro, la respiración y el diario */
.sf-ok{color:var(--verde) !important}
.sf-ko{color:var(--rojo) !important}
.res p.sf-pista{margin:0 0 8px;font-size:13px;color:var(--suave);line-height:1.4}
.res p.sf-veredicto{margin-top:8px;font-weight:900;font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--tinta)}
.campo textarea{width:100%;min-height:84px;border-radius:12px;border:1px solid var(--linea);padding:10px 12px;font:inherit;font-size:16px;line-height:1.4;background:#fff;color:var(--tinta);resize:vertical}
.sf-semanas{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin:6px 0 10px}
.sf-semanas .chip{min-height:40px;padding:6px 0;text-align:center}
.sf-semanas .chip.sf-hecha{border-color:var(--oro);background:#FBF7EE}
.sf-semanas .chip.sf-hecha::after{content:"✓";margin-left:2px;color:var(--oro-osc);font-size:12px}
.sf-semanas .chip.on{background:var(--tinta);border-color:var(--tinta);color:#fff}
.sf-semanas .chip.on::after{color:var(--oro)}
.sf-burbuja{width:130px;height:130px;margin:8px auto 4px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#EAD8AE,var(--oro));transform:scale(.55)}
.sf-resp-txt{min-height:26px;margin:4px 0 6px;text-align:center;font-weight:800;color:var(--tinta)}

@media print{
  .sf-nivel{display:block !important;break-inside:avoid}
  .sf-tabla{overflow:visible;break-inside:avoid;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .sf-tabla td.sf-tuyo{font-weight:inherit;color:inherit}
  .sf-tabla td.sf-tuyo::after{content:none}
  .sf-tabla td{padding:4px 10px}
  .sf-pasos li{padding-bottom:9px}
}

/* 24 oct · repaso del PDF: que los mitos y la rutina quepan en su página */
@media print{
  .mito{padding:7px 11px;margin:5px 0} .mito .frase{font-size:13.5px} .mito .sol{font-size:12.2px;line-height:1.4}
  .tabla{font-size:9.8px} .tabla th,.tabla td{padding:1.8px 6px}
}