:root{
  --bg:#0b0f14; --bg-2:#111823; --card:#151e2b; --line:#22304318;
  --stroke:#243346; --txt:#eef4fb; --muted:#93a4b8;
  --accent:#ff5f2e; --accent-2:#ffb020; --ok:#2ee6a8;
  --radius:16px; --max:1080px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--txt);
  font:16px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased}
a{color:inherit}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}
h1,h2,h3{line-height:1.15;margin:0 0 .5em}
h1{font-size:clamp(2rem,5.5vw,3.4rem);letter-spacing:-.02em}
h2{font-size:clamp(1.4rem,3vw,2rem);letter-spacing:-.01em}
.muted{color:var(--muted)}
.center{text-align:center}

/* ---------- nav ---------- */
nav{position:sticky;top:0;z-index:40;background:#0b0f14e6;backdrop-filter:blur(10px);
  border-bottom:1px solid var(--stroke)}
nav .wrap{display:flex;align-items:center;justify-content:space-between;height:60px}
.logo{font-weight:800;letter-spacing:-.02em}
.logo span{color:var(--accent)}

/* ---------- hero ---------- */
.hero{padding:clamp(48px,9vw,96px) 0 64px;
  background:radial-gradient(1000px 500px at 50% -10%,#ff5f2e26,transparent 70%)}
.pill{display:inline-block;font-size:.8rem;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--accent-2);border:1px solid #ffb02044;
  background:#ffb02012;padding:6px 14px;border-radius:999px;margin-bottom:20px}
.hero p.lead{font-size:1.15rem;color:var(--muted);max-width:640px;margin:0 auto 36px}

/* ---------- tarjeta de pregunta ---------- */
.qcard{background:linear-gradient(180deg,var(--card),#111a26);
  border:1px solid var(--stroke);border-radius:var(--radius);
  padding:clamp(22px,4vw,34px);max-width:640px;margin:0 auto;
  box-shadow:0 24px 60px #0008}
.qhead{display:flex;justify-content:space-between;align-items:center;
  font-size:.8rem;color:var(--muted);margin-bottom:14px}
.bar{height:4px;background:#22304a;border-radius:99px;overflow:hidden;margin-bottom:22px}
.bar>i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-2));
  width:0;transition:width .45s cubic-bezier(.4,0,.2,1)}
.qtext{font-size:clamp(1.25rem,2.6vw,1.6rem);font-weight:700;margin-bottom:20px}
.opts{display:grid;gap:10px}
.opt{display:flex;align-items:center;gap:12px;width:100%;text-align:left;cursor:pointer;
  background:#0e1621;border:1.5px solid var(--stroke);color:var(--txt);
  border-radius:12px;padding:15px 16px;font:inherit;font-weight:600;
  transition:.18s border-color,.18s background,.18s transform}
.opt:hover{border-color:var(--accent);background:#16202e;transform:translateY(-1px)}
.opt.sel{border-color:var(--accent);background:#ff5f2e1a}
.opt .em{font-size:1.25rem}
.qactions{margin-top:18px;display:flex;justify-content:space-between;align-items:center;gap:12px}
.link{background:none;border:0;color:var(--muted);font:inherit;cursor:pointer;
  text-decoration:underline;padding:0}

/* ---------- botones ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:linear-gradient(135deg,var(--accent),#ff8038);color:#fff;border:0;
  border-radius:12px;padding:14px 26px;font:inherit;font-weight:700;cursor:pointer;
  box-shadow:0 10px 26px #ff5f2e3d;transition:.18s transform,.18s box-shadow}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 32px #ff5f2e55}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none}
.btn.ghost{background:transparent;border:1.5px solid var(--stroke);box-shadow:none;color:var(--txt)}

/* ---------- secciones landing ---------- */
section{padding:72px 0;border-top:1px solid var(--stroke)}
.grid3{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.card{background:var(--card);border:1px solid var(--stroke);border-radius:var(--radius);padding:24px}
.card .ico{font-size:1.7rem;margin-bottom:10px}
.steps{counter-reset:s;display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.step{position:relative;padding-left:52px}
.step:before{counter-increment:s;content:counter(s);position:absolute;left:0;top:-4px;
  width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-weight:800;
  background:#ff5f2e1f;color:var(--accent);border:1.5px solid #ff5f2e55}
.price{max-width:420px;margin:0 auto;text-align:center}
.price .amount{font-size:3.4rem;font-weight:800;letter-spacing:-.03em}
.price .amount small{font-size:1rem;font-weight:600;color:var(--muted)}
details{border-bottom:1px solid var(--stroke);padding:16px 0}
summary{cursor:pointer;font-weight:650;list-style:none}
summary::-webkit-details-marker{display:none}
summary:before{content:"+";color:var(--accent);font-weight:800;margin-right:10px}
details[open] summary:before{content:"−"}
details p{color:var(--muted);margin:10px 0 0}

/* ---------- pantalla de carga ---------- */
.loading{display:grid;place-items:center;gap:18px;padding:70px 0;text-align:center}
.spin{width:54px;height:54px;border-radius:50%;border:4px solid #22304a;
  border-top-color:var(--accent);animation:sp .9s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.loadstep{color:var(--muted);min-height:1.6em}

/* ---------- plan: pestañas por día ---------- */
#daytabs{position:sticky;top:60px;z-index:25;display:flex;gap:7px;overflow-x:auto;
  scrollbar-width:none;padding:12px 0;margin-bottom:4px;
  background:#0b0f14f2;backdrop-filter:blur(10px)}
#daytabs::-webkit-scrollbar{display:none}
.daytab{flex:0 0 auto;background:#0e1621;border:1.5px solid var(--stroke);color:var(--muted);
  border-radius:999px;padding:8px 18px;font:inherit;font-size:.86rem;font-weight:700;
  cursor:pointer;transition:.18s}
.daytab:hover{border-color:var(--accent)}
.daytab.on{border-color:var(--accent);background:#ff5f2e1a;color:var(--txt)}

/* Un día = una pestaña: sólo la activa ocupa sitio. */
.daysec{display:none}
.daysec.on{display:block;animation:fade .3s ease}
.dayhead{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding-bottom:10px;border-bottom:1px solid var(--stroke);margin-bottom:4px}
.dayhead h3{margin:0;font-size:1.15rem}
.dayhead .meta{font-size:.8rem;color:var(--muted);white-space:nowrap}

/* ---------- tarjeta de ejercicio ---------- */
.ex-card{background:var(--card);border:1px solid var(--stroke);border-radius:var(--radius);
  padding:20px;margin:14px 0;text-align:center;max-width:560px;
  margin-left:auto;margin-right:auto}
.ex-card .n{display:inline-block;width:24px;height:24px;border-radius:50%;
  background:#ff5f2e1f;color:var(--accent);border:1.5px solid #ff5f2e55;
  font-size:.8rem;font-weight:800;line-height:21px;margin-bottom:8px}
.ex-card h4{margin:0 0 2px;font-size:1.12rem;letter-spacing:-.01em;line-height:1.2}
.ex-card .lat{font-size:.8rem;color:var(--muted);margin-bottom:14px;min-height:1px}

/* Las dos fotos del catálogo son el inicio y el final del movimiento. */
.imgs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 14px}
.imgs img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px;
  border:1px solid var(--stroke);background:#0e1621;display:block}

.rxbox{display:flex;margin:0 auto 14px;max-width:340px;
  border:1px solid var(--stroke);border-radius:12px;overflow:hidden}
.rxbox div{flex:1 1 33%;padding:9px 6px;background:#0e1621;border-left:1px solid var(--stroke)}
.rxbox div:first-child{border-left:0}
.rxbox b{display:block;font-size:1.05rem;color:var(--accent-2);letter-spacing:-.01em}
.rxbox span{font-size:.66rem;color:var(--muted);text-transform:uppercase;letter-spacing:.07em}
.ex-card .note{font-size:.88rem;color:var(--muted);margin:0 0 14px}

/* El calentamiento es un bloque del entrenamiento, no un dato de ficha:
   misma tarjeta que un ejercicio. */
.ex-card.warm .ico{display:block;font-size:1.3rem;color:var(--accent-2);margin-bottom:4px}
.ex-card.warm .lbl{display:block;font-size:.66rem;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--accent-2);margin-bottom:6px}
.ex-card.warm .dur{font-size:.8rem;color:var(--muted);margin-bottom:12px}
.ex-card.warm p{font-size:.9rem;color:#c3d2e2;margin:0;text-align:left}

/* Los pasos nacen escondidos tras un botón claro y centrado. */
details.more{margin:0}
details.more summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;
  gap:8px;background:#0e1621;border:1.5px solid var(--stroke);color:var(--txt);
  border-radius:12px;padding:11px 22px;font:inherit;font-size:.9rem;font-weight:700;
  transition:.18s border-color,.18s background}
details.more summary::-webkit-details-marker{display:none}
details.more summary:hover{border-color:var(--accent);background:#16202e}
details.more summary:after{content:"▾";color:var(--accent);transition:.2s transform}
details.more[open] summary:after{transform:rotate(180deg)}
/* `exsteps`, no `steps`: la landing ya usa `.steps` para su rejilla de
   "cómo funciona" y estos pasos salían a dos columnas heredándola. */
.exsteps{text-align:left;counter-reset:p;margin:14px 0 0;padding:0;display:block}
.exsteps li{list-style:none;position:relative;padding-left:30px;margin-bottom:10px;
  font-size:.9rem;color:#c3d2e2}
.exsteps li:before{counter-increment:p;content:counter(p);position:absolute;left:0;top:1px;
  width:20px;height:20px;border-radius:50%;background:#1b2635;color:var(--muted);
  font-size:.7rem;font-weight:800;display:grid;place-items:center}

/* ---------- formulario de compra ---------- */
.buycard{background:linear-gradient(180deg,#1b1208,#151e2b);border:1px solid #ffb02044;
  border-radius:var(--radius);padding:28px 22px;margin:14px auto;text-align:center;
  max-width:560px}
.buycard h4{margin:0 0 6px;font-size:1.08rem}
.buycard p{font-size:.87rem;margin:0 0 16px}
.buycard input{width:100%;max-width:300px;background:#0e1621;
  border:1.5px solid var(--stroke);border-radius:10px;padding:12px 14px;
  color:var(--txt);font:inherit;margin-bottom:10px}
.buycard .btn{width:100%;max-width:300px}

/* ---------- escritorio: tarjetas e imágenes más grandes ---------- */
/* La tarjeta crece y con ella las fotos, que es lo que llena la pantalla.
   El TEXTO no crece: una línea de 800px cansa de leer, así que los pasos y
   las notas se quedan en una medida cómoda, centrados dentro de la tarjeta. */
@media (min-width:900px){
  .ex-card,.buycard{max-width:800px;padding:28px}
  .ex-card .imgs{gap:14px;margin-bottom:18px}
  .ex-card h4{font-size:1.3rem}
  .rxbox{max-width:420px}
  .rxbox b{font-size:1.2rem}
  .exsteps{max-width:64ch;margin:18px auto 0}
  .ex-card .note{max-width:64ch;margin:0 auto 16px}
  .ex-card.warm p{max-width:64ch;margin:0 auto}
  .buycard p{max-width:52ch;margin-left:auto;margin-right:auto}
}

.paywall{background:linear-gradient(180deg,#1b1208,#151e2b);border:1px solid #ffb02044;
  border-radius:var(--radius);padding:28px;text-align:center;margin-top:22px}
.badge{display:inline-block;background:#2ee6a81f;color:var(--ok);border:1px solid #2ee6a844;
  border-radius:999px;padding:5px 12px;font-size:.8rem;font-weight:700;margin-bottom:12px}

/* ---------- chatbot ---------- */
#chatbtn{position:fixed;right:20px;bottom:20px;z-index:60;width:58px;height:58px;
  border-radius:50%;border:0;cursor:pointer;font-size:1.5rem;color:#fff;
  background:linear-gradient(135deg,var(--accent),#ff8038);box-shadow:0 12px 30px #ff5f2e55}
#chat{position:fixed;right:20px;bottom:88px;z-index:60;width:min(360px,calc(100vw - 40px));
  height:min(470px,70vh);background:var(--bg-2);border:1px solid var(--stroke);
  border-radius:var(--radius);display:none;flex-direction:column;overflow:hidden;
  box-shadow:0 24px 60px #000a}
#chat.open{display:flex}
#chat .top{padding:14px 16px;border-bottom:1px solid var(--stroke);font-weight:700}
#chat .top small{display:block;font-weight:500;color:var(--muted)}
#msgs{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px}
.msg{max-width:85%;padding:10px 13px;border-radius:14px;font-size:.92rem}
.msg.bot{background:#1b2635;border-bottom-left-radius:4px;align-self:flex-start}
.msg.me{background:var(--accent);color:#fff;border-bottom-right-radius:4px;align-self:flex-end}
#chatform{display:flex;gap:8px;padding:12px;border-top:1px solid var(--stroke)}
#chatform input{flex:1;background:#0e1621;border:1.5px solid var(--stroke);
  border-radius:10px;padding:11px 12px;color:var(--txt);font:inherit}
#chatform button{background:var(--accent);border:0;color:#fff;border-radius:10px;
  padding:0 15px;font-size:1.1rem;cursor:pointer}
.suggests{display:flex;flex-wrap:wrap;gap:6px;padding:0 14px 12px}
.suggests button{background:#1b2635;border:1px solid var(--stroke);color:var(--muted);
  border-radius:999px;padding:6px 11px;font-size:.78rem;cursor:pointer;font-family:inherit}

footer{padding:40px 0;color:var(--muted);font-size:.85rem;border-top:1px solid var(--stroke)}
.hide{display:none!important}
.fade{animation:fade .35s ease}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

@media print{
  nav,#chatbtn,#chat,.paywall,footer,.hero .pill,
  #daytabs,.buycard{display:none!important}
  body{background:#fff;color:#000}
  /* En papel no hay pestañas: el PDF lleva los días seguidos, uno por hoja,
     y los pasos desplegados. */
  .daysec{display:block!important;break-before:page}
  .daysec:first-child{break-before:auto}
  details.more>summary{display:none}
  details.more>ol{display:block!important}
  .ex-card,.card{background:#fff;border-color:#ccc;break-inside:avoid}
  .ex-card h4,.ex-card.warm p,.exsteps li{color:#000}
  .rxbox div{background:#fff}
}

/* ---------- texto libre en las preguntas ---------- */
#qfree{margin-top:10px}
.opt-free{border-style:dashed;color:var(--muted)}
.opt-free:hover{color:var(--txt)}
.freefield{display:flex;align-items:center;gap:8px}
.freefield input{flex:1;background:#0e1621;border:1.5px solid var(--accent);
  border-radius:12px;padding:15px 16px;color:var(--txt);font:inherit;font-weight:600;
  min-width:0}
.freefield input.bad{border-color:#ff4d4d;animation:shake .3s}
.freefield .suffix{color:var(--muted);font-weight:600}
.freefield .btn{padding:14px 20px}
@keyframes shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}

/* ---------- esqueleto de carga entre preguntas ---------- */
.sk{display:block;border-radius:8px;
  background:linear-gradient(90deg,#1b2635 25%,#243346 50%,#1b2635 75%);
  background-size:200% 100%;animation:shimmer 1.3s infinite}
.sk-line{height:1.5rem;margin:0 auto 6px}
.sk-opt{height:52px;border-radius:12px;margin-bottom:10px}
@keyframes shimmer{to{background-position:-200% 0}}

/* ---------- enlace permanente y revisión ---------- */
.notes{text-align:left;max-width:520px;margin:14px auto}
.linkbox{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;
  background:#0e1621;border:1px solid var(--stroke);border-radius:12px;
  padding:14px;margin:20px auto;max-width:520px}
.linkbox span{font-size:.8rem;color:var(--muted);width:100%}
.linkbox code{font-size:.85rem;color:var(--accent-2);word-break:break-all}
.linkbox .btn{padding:9px 16px;font-size:.85rem}
.revise{background:var(--card);border:1px solid var(--stroke);border-radius:var(--radius);
  padding:28px;margin-top:18px;text-align:center}
.revise textarea{width:100%;background:#0e1621;border:1.5px solid var(--stroke);
  border-radius:12px;padding:14px;color:var(--txt);font:inherit;resize:vertical;
  margin:14px 0}
.revq{display:block;text-align:left;margin:12px 0}
.revq span{display:block;font-weight:600;margin-bottom:6px;font-size:.92rem}
.revq input{width:100%;background:#0e1621;border:1.5px solid var(--stroke);
  border-radius:10px;padding:12px;color:var(--txt);font:inherit}

.revdone{text-align:left;font-size:.85rem;color:var(--muted);margin:10px 0}
.revdone b{display:block;color:var(--txt);font-weight:600}
@media print{.revise,.linkbox{display:none!important}}