/* Rutina de fuerza en casa (entrevista) · @axeljuca. Base copiada de la calculadora de calorías; se apoya en /diagnostico/assets/base.css */
.hoja.sube{position:relative}
.marca-fija{position:absolute;top:clamp(20px,4vw,40px);right:clamp(20px,4vw,40px);font:800 .8rem/1 "Figtree",sans-serif;color:var(--ciruela);opacity:.7}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.entrevista{overflow:hidden;min-height:520px}

/* progreso */
.progreso{margin:0 0 26px;padding-right:90px}
.paso-n{margin:0 0 8px;font-weight:800;font-size:.85rem;letter-spacing:.06em;text-transform:uppercase;color:var(--gris)}
.barra-prog{height:8px;border-radius:99px;background:var(--suave);overflow:hidden}
.barra-prog i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--mandarina),#FF9A6B);transition:width .5s cubic-bezier(.2,.8,.2,1)}

/* pasos */
.paso{display:none;max-width:40rem}
.paso.activa{display:block;animation:entra .5s cubic-bezier(.2,.8,.2,1) both}
.paso.activa.vuelve{animation-name:vuelve}
.paso.final{max-width:none}
@keyframes entra{from{opacity:0;transform:translateX(36px)}to{opacity:1;transform:none}}
@keyframes vuelve{from{opacity:0;transform:translateX(-36px)}to{opacity:1;transform:none}}
.paso.activa>*{animation:sube .5s cubic-bezier(.2,.8,.2,1) both}
.paso.activa>*:nth-child(2){animation-delay:.05s}.paso.activa>*:nth-child(3){animation-delay:.1s}
.paso.activa>*:nth-child(4){animation-delay:.15s}.paso.activa>*:nth-child(5){animation-delay:.2s}
.paso.activa>*:nth-child(6){animation-delay:.25s}.paso.activa>*:nth-child(n+7){animation-delay:.3s}
@keyframes sube{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.paso h2{margin:0 0 14px;padding-right:80px}
.hola{display:block;color:var(--mandarina);font-size:.5em;letter-spacing:-.01em;text-transform:none;margin-bottom:8px}
.hola:empty{display:none}
#r-nombre{text-transform:none}
.eti{display:inline-block;margin:0 0 12px;padding:5px 12px;border-radius:99px;background:var(--menta);font-weight:800;font-size:.8rem;letter-spacing:.04em;text-transform:uppercase;color:var(--tinta)}
.explica{color:var(--gris);font-size:1.05rem;margin:0 0 22px;max-width:36rem}
.explica b{color:var(--tinta)}
.opc{font-weight:600;color:var(--gris)}
.error{min-height:1.3em;margin:-6px 0 10px;font-weight:700;color:#C2410C}
.error:empty{min-height:0;margin:0}
.nav-paso{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:22px;flex-wrap:wrap}
.nav-paso .btn{min-width:11rem}
.nav-paso .btn:only-child{margin-left:auto}

/* campos */
input[type=number]{width:100%;font:700 1.25rem/1.4 "Figtree",sans-serif;color:var(--tinta);background:var(--papel);border:1.5px solid #CFC9BD;border-radius:12px;padding:13px 14px}
input[type=number]:focus,input[type=text]:focus{border-color:var(--ciruela);outline:3px solid var(--menta);outline-offset:0}
input[type=text]{font-size:1.15rem;font-weight:600;padding:13px 14px;border-radius:12px}
.con-unidad{position:relative;max-width:16rem}
.con-unidad input{padding-right:3.6rem}
.con-unidad span{position:absolute;right:14px;top:50%;transform:translateY(-50%);font-weight:700;color:var(--gris);pointer-events:none}
.dos .con-unidad{max-width:none}
.fichas label{transition:transform .15s ease,background-color .2s ease,border-color .2s ease}
.fichas label:hover{transform:translateY(-1px)}
.fichas label:has(input:checked){animation:pop .3s cubic-bezier(.3,1.6,.5,1)}
@keyframes pop{0%{transform:scale(.96)}100%{transform:scale(1)}}
.fichas.grandes label{padding:13px 20px;font-size:1.05rem}
.fichas.apiladas{display:grid;gap:10px}
.fichas.apiladas label{border-radius:14px;padding:14px 16px;align-items:flex-start}
.fichas.apiladas input{margin-top:3px}
.fichas.apiladas b{display:block;font-size:1.05rem}
.fichas.apiladas small{display:block;font-weight:500;color:var(--gris);margin:2px 0 0;font-size:.92rem}
.deslizador{display:flex;align-items:center;gap:14px}
.deslizador input{flex:1;accent-color:var(--mandarina);height:30px}
.deslizador output{min-width:5rem;text-align:right;font:800 1.2rem "Figtree",sans-serif;color:var(--tinta)}
#detalle-entreno{transition:opacity .3s ease}
#detalle-entreno[hidden]{display:none}

/* resultado */
.resultado{background:var(--tinta);color:#fff;border-radius:20px;padding:clamp(20px,4vw,34px);margin-top:6px;position:relative;overflow:hidden}
.resultado::before{content:"";position:absolute;width:340px;height:340px;right:-120px;top:-140px;border-radius:50%;background:radial-gradient(circle,rgba(255,107,53,.35),transparent 70%);pointer-events:none}
.r-top{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center;position:relative}
.r-etq{margin:0;font-weight:800;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mandarina)}
.r-grande{margin:4px 0 0;font:800 clamp(3.4rem,10vw,5.6rem)/1 "Bricolage","Figtree",sans-serif;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.r-grande small{font-size:.32em;letter-spacing:0;font-family:"Figtree",sans-serif}
.r-frase{margin:10px 0 0;font-weight:600;color:rgba(255,255,255,.85);max-width:28rem}
.dona{width:clamp(110px,26vw,170px);height:auto;transform:rotate(-90deg)}
.dona circle{fill:none;stroke-width:16}
.d-fondo{stroke:rgba(255,255,255,.1)}
.d-arco{stroke-dasharray:0 302;transition:stroke-dasharray 1s cubic-bezier(.2,.8,.2,1),stroke-dashoffset 1s cubic-bezier(.2,.8,.2,1)}
.d-prot{stroke:var(--mandarina)}.d-grasa{stroke:#B8A9F0}.d-hc{stroke:var(--menta)}
.macros{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;position:relative}
.macros li{background:rgba(255,255,255,.07);border-radius:14px;padding:14px 14px 12px;border-top:4px solid}
.m-prot{border-color:var(--mandarina)!important}.m-grasa{border-color:#B8A9F0!important}.m-hc{border-color:var(--menta)!important}
.macros span{display:block;font-weight:700;color:rgba(255,255,255,.75);font-size:.9rem}
.macros b{display:block;font:800 clamp(1.5rem,5vw,2.1rem)/1.1 "Bricolage","Figtree",sans-serif;margin-top:4px}
.macros small{display:block;color:rgba(255,255,255,.6);font-size:.8rem;margin-top:4px}
.tarjetas{display:grid;gap:10px;margin-top:10px;position:relative}
@media(min-width:720px){.tarjetas{grid-template-columns:repeat(3,1fr)}}
.tj{background:rgba(255,255,255,.07);border-radius:14px;padding:14px}
.tj-n{margin:6px 0 2px;font:800 1.35rem/1.15 "Figtree",sans-serif;color:var(--menta)}
.tj-t{margin:0;color:rgba(255,255,255,.7);font-size:.9rem}
.consejos{margin-top:18px;position:relative}
.consejos ul{margin:8px 0 0;padding:0;list-style:none;display:grid;gap:8px}
.consejos li{padding:12px 14px 12px 40px;background:rgba(191,240,218,.1);border-radius:12px;position:relative;color:rgba(255,255,255,.9)}
.consejos li::before{content:"";position:absolute;left:15px;top:19px;width:10px;height:10px;border-radius:50%;background:var(--mandarina)}
.r-nota{margin:16px 0 0;font-size:.85rem;color:rgba(255,255,255,.6);position:relative}
.final.activa .macros li,.final.activa .tj,.final.activa .consejos li{animation:sube .6s cubic-bezier(.2,.8,.2,1) both}
.final.activa .macros li:nth-child(2){animation-delay:.1s}.final.activa .macros li:nth-child(3){animation-delay:.2s}
.final.activa .tj:nth-child(1){animation-delay:.3s}.final.activa .tj:nth-child(2){animation-delay:.4s}.final.activa .tj:nth-child(3){animation-delay:.5s}
.cierre small a{color:var(--menta)}
.btn{transition:transform .12s ease,filter .12s ease}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(1px) scale(.98)}
.tp-ok{min-height:1.4em;margin:12px 0 0;font-weight:700;color:var(--ciruela)}
@media(max-width:559px){.macros{grid-template-columns:1fr}.macros li{display:grid;grid-template-columns:1fr auto;align-items:baseline}.macros b{margin:0}.macros small{grid-column:1/-1}.r-top{grid-template-columns:1fr}.dona{display:none}}
@media(max-width:459px){.marca-fija{display:none}.paso h2{padding-right:0}.nav-paso .btn,.acciones .btn{width:100%}.nav-paso{flex-direction:column-reverse}.progreso{padding-right:70px}}
@media(prefers-reduced-motion:reduce){.paso.activa,.paso.activa>*,.final.activa .macros li,.final.activa .tj,.final.activa .consejos li,.fichas label:has(input:checked){animation:none}.btn,.fichas label,.barra-prog i,.d-arco{transition:none}.btn:hover,.fichas label:hover{transform:none}}
.fichas.multi label{padding:10px 15px}
.fichas.multi input{accent-color:var(--tinta)}

/* ---- rutina en casa ---- */
.pesa{display:flex;align-items:center;gap:0;margin:0 0 22px;height:70px}
.pesa i{width:22px;height:64px;border-radius:8px;background:var(--tinta)}
.pesa i:first-child{animation:levanta 1.6s cubic-bezier(.4,0,.2,1) infinite}
.pesa i:last-child{animation:levanta 1.6s cubic-bezier(.4,0,.2,1) infinite}
.pesa b{width:110px;height:12px;border-radius:6px;background:var(--mandarina)}
.pesa{animation:levanta 1.6s cubic-bezier(.4,0,.2,1) infinite}
.pesa i{animation:none!important}
@keyframes levanta{0%,100%{transform:translateY(6px)}45%,55%{transform:translateY(-10px)}}
.fichas.apiladas.multi label{border-radius:14px}
.semana{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;margin:8px 0 18px;position:relative}
.semana div{border-radius:12px;padding:10px 4px;text-align:center;background:rgba(255,255,255,.06);font-weight:700;font-size:.82rem;color:rgba(255,255,255,.6)}
.semana div b{display:block;font:800 1.2rem/1.1 "Bricolage","Figtree",sans-serif;color:#fff;margin-top:4px}
.semana div.entreno{background:var(--mandarina);color:var(--tinta)}
.semana div.entreno b{color:var(--tinta)}
.calienta{background:rgba(255,255,255,.07);border-radius:14px;padding:14px 16px;position:relative}
.calienta ol{margin:8px 0 0;padding-left:1.2em;color:rgba(255,255,255,.85);display:grid;gap:4px}
.pestanas{display:flex;gap:8px;margin:20px 0 12px;flex-wrap:wrap;position:relative}
.pestanas button{font:800 1rem "Figtree",sans-serif;border:0;border-radius:999px;padding:10px 18px;background:rgba(255,255,255,.1);color:#fff;cursor:pointer;transition:background .2s ease,transform .12s ease}
.pestanas button[aria-selected=true]{background:var(--menta);color:var(--tinta)}
.pestanas button:hover{transform:translateY(-1px)}
.sesion{display:grid;gap:10px;position:relative}
.sesion[hidden]{display:none}
.sesion.entra .ej{animation:sube .5s cubic-bezier(.2,.8,.2,1) both}
.ej{background:rgba(255,255,255,.07);border-radius:16px;padding:14px 16px;display:grid;grid-template-columns:44px 1fr;gap:4px 12px}
.ej-n{grid-row:span 3;width:40px;height:40px;border-radius:50%;background:var(--mandarina);color:var(--tinta);display:grid;place-items:center;font:800 1.15rem "Bricolage",sans-serif}
.ej h4{margin:0;font:800 1.1rem/1.2 "Figtree",sans-serif;color:#fff}
.ej-dosis{margin:0;font-weight:800;color:var(--menta)}
.ej-clave{margin:0;color:rgba(255,255,255,.75);font-size:.93rem}
.ej-var{grid-column:2;margin:6px 0 0;font-size:.85rem;color:rgba(255,255,255,.55)}
.ej-var b{color:rgba(255,255,255,.8)}
.final-extra{background:rgba(191,240,218,.12);border-radius:14px;padding:12px 16px;color:rgba(255,255,255,.88)}
.crono{display:grid;grid-template-columns:120px 1fr;gap:18px;align-items:center;margin-top:18px;background:rgba(255,255,255,.07);border-radius:16px;padding:16px;position:relative}
.crono svg{width:120px;height:120px;transform:rotate(-90deg)}
.crono circle{fill:none;stroke-width:10}
.c-fondo{stroke:rgba(255,255,255,.1)}
.c-arco{stroke:var(--mandarina);stroke-linecap:round;stroke-dasharray:327 327;stroke-dashoffset:0;transition:stroke-dashoffset 1s linear}
.crono-n{margin:4px 0 8px;font:800 2.6rem/1 "Bricolage","Figtree",sans-serif;font-variant-numeric:tabular-nums}
.crono-btn{display:flex;gap:8px;flex-wrap:wrap}
.crono-btn button{font:800 .95rem "Figtree",sans-serif;border:0;border-radius:999px;padding:9px 14px;background:rgba(255,255,255,.12);color:#fff;cursor:pointer}
.crono-btn button.activo{background:var(--mandarina);color:var(--tinta)}
.crono.fin{animation:latido .5s ease 3}
@keyframes latido{50%{box-shadow:0 0 0 6px rgba(255,107,53,.5)}}
.plan4{margin-top:18px;position:relative}
.plan4 ol{margin:8px 0 0;padding:0;list-style:none;display:grid;gap:8px;counter-reset:sem}
.plan4 li{counter-increment:sem;display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;padding:12px 14px;border-radius:12px;background:rgba(255,255,255,.07);color:rgba(255,255,255,.88)}
.plan4 li::before{content:"S" counter(sem);font:800 1rem "Bricolage",sans-serif;color:var(--tinta);background:var(--menta);border-radius:8px;padding:4px 8px}
@media(max-width:559px){.semana{gap:4px}.semana div{font-size:.7rem;padding:8px 2px}.crono{grid-template-columns:90px 1fr}.crono svg{width:90px;height:90px}}
@media(prefers-reduced-motion:reduce){.pesa,.sesion.entra .ej,.crono.fin{animation:none}.c-arco{transition:none}}