/* =========================================================
   TORTI WELLNESS · Tai Chi en Silla · 28 días
   Diseñado para lectura cómoda en celular (público +55):
   texto grande, alto contraste, botones amplios.
   ========================================================= */

:root{
  /* En Tai Chi en Silla el naranja de la marca es el color principal y el
     verde pasa a ser el secundario (en Caminata es al revés).
     El naranja de siempre es #C4714A; para botones y textos se usa un tono
     apenas más profundo (#B05E38) porque con letra blanca el original no
     llega al contraste mínimo de lectura (3,6 contra 4,5). */
  --primario:#B05E38;
  --primario-osc:#8E4526;
  --primario-claro:#C27A55;
  --crema:#F7F3EA;
  --crema-osc:#EAE3D4;
  --acento:#4F6B58;        /* el verde de la marca, ahora secundario */
  --texto:#2C3730;
  --texto-suave:#5F6D64;
  --blanco:#FFFFFF;
  --radio:16px;
  --sombra:0 2px 14px rgba(44,55,48,.10);
  --serif:Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

*{box-sizing:border-box}
/* El atributo hidden tiene que ganarle siempre a los display de las clases */
[hidden]{display:none!important}
html,body{margin:0;padding:0}
body{
  font-family:var(--sans);
  font-size:18px;
  line-height:1.6;
  color:var(--texto);
  background:var(--crema);
  -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%;
}
img,video{max-width:100%;display:block}

/* --- pantallas --- */
.screen{display:none;min-height:100svh}
.screen.is-active{display:block}
.wrap{max-width:640px;margin:0 auto;padding:8px 20px 56px}
.wrap--center{text-align:center}

/* --- tipografía --- */
.brand{
  font-size:13px;letter-spacing:.22em;font-weight:600;
  color:var(--primario);margin:0 0 8px;text-transform:uppercase;
}
.brand--sm{font-size:12px;margin:0}
.h1{font-family:var(--serif);font-size:34px;line-height:1.15;margin:0 0 10px;color:var(--primario-osc);font-weight:400}
.h2{font-family:var(--serif);font-size:23px;margin:34px 0 14px;color:var(--primario-osc);font-weight:400}
.lede{font-size:18px;color:var(--texto-suave);margin:0 0 22px}
.eyebrow{font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--acento);font-weight:600;margin:0 0 6px}
.label{display:block;font-size:16px;font-weight:600;margin-bottom:8px;color:var(--primario-osc)}

/* --- botones --- */
.btn{
  display:block;width:100%;min-height:62px;padding:16px 22px;
  border:0;border-radius:var(--radio);
  font-family:var(--sans);font-size:19px;font-weight:600;
  cursor:pointer;transition:transform .06s ease,background .15s ease;
}
.btn:active{transform:scale(.985)}
.btn--primary{background:var(--primario);color:#fff}
.btn--primary:hover{background:var(--primario-osc)}
.btn--wide{margin:6px 0 10px}
.linkbtn{
  background:none;border:0;color:var(--primario);font-size:17px;
  font-family:var(--sans);cursor:pointer;padding:10px 4px;font-weight:600;
}
.iconbtn{
  width:48px;height:48px;border-radius:50%;border:0;
  background:rgba(0,0,0,.42);color:#fff;font-size:20px;cursor:pointer;
  display:grid;place-items:center;backdrop-filter:blur(6px);
}

/* --- ingreso --- */
.gate{background:var(--primario);display:none;place-items:center}
.gate.is-active{display:grid}
.gate__inner{width:100%;max-width:440px;padding:40px 24px;text-align:center;color:#fff}
.gate .brand{color:rgba(255,255,255,.72)}
.gate__title{font-family:var(--serif);font-size:48px;line-height:1.05;margin:0 0 10px;font-weight:400}
.gate__sub{color:rgba(255,255,255,.82);margin:0 0 34px;font-size:18px}
.gate__form{background:rgba(255,255,255,.10);padding:24px;border-radius:var(--radio);text-align:left}
.gate .label{color:#fff}
.input{
  width:100%;min-height:60px;padding:14px 18px;font-size:20px;
  border:2px solid rgba(255,255,255,.35);border-radius:12px;
  background:rgba(255,255,255,.96);color:var(--texto);
  font-family:var(--sans);margin-bottom:14px;
}
.input:focus{outline:3px solid var(--acento);outline-offset:2px}
.gate__error{background:var(--acento);color:#fff;padding:12px 14px;border-radius:10px;margin:0 0 14px;font-size:16px}
.gate__help{margin-top:22px;font-size:15px;color:rgba(255,255,255,.66)}

/* --- barra superior --- */
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  max-width:640px;margin:0 auto;padding:14px 20px 0;
}

/* --- panel de progreso --- */
.progresspanel{background:var(--blanco);border-radius:var(--radio);padding:20px;box-shadow:var(--sombra);margin-bottom:20px}
.progresspanel__row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;text-align:center;margin-bottom:16px}
.stat__num{font-family:var(--serif);font-size:30px;color:var(--acento);margin:0;line-height:1}
.stat__lbl{font-size:13px;color:var(--texto-suave);margin:6px 0 0;line-height:1.3}
.bar{background:var(--crema-osc);border-radius:99px;height:12px;overflow:hidden}
.bar--thin{height:6px;background:rgba(255,255,255,.3)}
.bar__fill{background:var(--primario);height:100%;width:0;border-radius:99px;transition:width .4s ease}
.bar--thin .bar__fill{background:#fff}

/* --- calendario --- */
.cal{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:26px}
.cal__sem{grid-column:1/-1;margin:18px 0 2px}
.cal__sem:first-child{margin-top:0}
.cal__semt{font-family:var(--serif);font-size:20px;color:var(--primario-osc);margin:0}
.cal__semd{font-size:14px;color:var(--texto-suave);margin:2px 0 0}
.dia{
  aspect-ratio:1;border:2px solid var(--crema-osc);background:var(--blanco);
  border-radius:14px;cursor:pointer;display:grid;place-content:center;
  font-family:var(--sans);padding:4px;transition:border-color .15s,background .15s;
}
.dia:hover{border-color:var(--primario-claro)}
.dia__n{font-family:var(--serif);font-size:24px;color:var(--primario-osc);line-height:1;margin:0}
.dia__m{font-size:12px;color:var(--texto-suave);margin:4px 0 0}
.dia.is-done{background:var(--primario);border-color:var(--primario)}
.dia.is-done .dia__n,.dia.is-done .dia__m{color:#fff}
.dia.is-next{border-color:var(--acento);border-width:3px}
.dia.is-suave .dia__m{color:var(--primario-claro)}

/* --- detalle del día --- */
.meta{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px}
.meta--center{justify-content:center}
.chip{background:var(--crema-osc);color:var(--primario-osc);padding:8px 14px;border-radius:99px;font-size:15px;font-weight:600}
.chip--done{background:var(--primario);color:#fff}
.lista{list-style:none;counter-reset:i;margin:0;padding:0}
.lista li{
  counter-increment:i;background:var(--blanco);border-radius:var(--radio);
  padding:16px 18px 16px 60px;position:relative;margin-bottom:10px;box-shadow:var(--sombra);
}
.lista li::before{
  content:counter(i);position:absolute;left:18px;top:16px;
  width:30px;height:30px;border-radius:50%;background:var(--crema-osc);
  color:var(--primario-osc);display:grid;place-items:center;font-size:15px;font-weight:700;
}
.lista__n{font-weight:600;margin:0;color:var(--primario-osc);font-size:18px}
.lista__d{margin:3px 0 0;font-size:15px;color:var(--texto-suave)}

/* --- reproductor --- */
.player{background:#000;position:relative;overflow:hidden;height:100svh}
.player.is-active{display:block}
.player__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  /* cuando la pantalla es más ancha que el video, el recorte saca de arriba
     y de abajo. Corriéndolo al 62% se ven los pies, que es lo que importa. */
  object-position:center 62%}
.player__scrim{
  position:absolute;inset:0;transition:background .35s ease;
  background:linear-gradient(180deg,
    rgba(0,0,0,.58) 0%, rgba(0,0,0,.30) 18%, rgba(0,0,0,0) 34%,
    rgba(0,0,0,0) 60%, rgba(0,0,0,.16) 74%, rgba(0,0,0,.55) 100%);
}
/* con las instrucciones abiertas sí hace falta más fondo para poder leer */
.player.is-instr .player__scrim{
  background:linear-gradient(180deg,
    rgba(0,0,0,.72) 0%, rgba(0,0,0,.66) 34%, rgba(0,0,0,.30) 52%,
    rgba(0,0,0,.14) 64%, rgba(0,0,0,.55) 100%);
}
.player__ui{position:relative;height:100%;display:flex;flex-direction:column;justify-content:space-between;padding:calc(env(safe-area-inset-top) + 14px) 18px calc(env(safe-area-inset-bottom) + 18px)}
/* La parte de arriba se queda con el espacio sobrante y, si las
   instrucciones son largas, el texto se desplaza adentro. Así los controles
   de abajo nunca se van de la pantalla, ni en celulares chicos. */
.player__head{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}
.player__top{display:flex;align-items:center;gap:14px;flex:0 0 auto}
.player__info{color:#fff;text-align:center;margin-top:18px;
  display:flex;flex-direction:column;flex:1 1 auto;min-height:0}
.player__texto{flex:1 1 auto;min-height:0;overflow-y:auto;margin-bottom:2px;
  -webkit-overflow-scrolling:touch}
.player__prog{flex:1}
.player__progtxt{color:rgba(255,255,255,.95);font-size:14px;margin:7px 0 0;font-weight:600;
  text-shadow:0 1px 8px rgba(0,0,0,.8)}
.player__bottom{color:#fff;text-align:center;flex:0 0 auto}
.player__bloque{font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.85);margin:0 0 4px;font-weight:600;
  text-shadow:0 1px 8px rgba(0,0,0,.8)}
.player__nombre{font-family:var(--serif);font-size:29px;margin:0 0 12px;font-weight:400;line-height:1.15;
  text-shadow:0 2px 12px rgba(0,0,0,.75),0 1px 3px rgba(0,0,0,.6)}
.player__cue{font-size:16px;color:#fff;margin:0 auto 14px;max-width:440px;line-height:1.5;
  text-shadow:0 1px 6px rgba(0,0,0,.7)}
.player__next{font-size:15px;color:rgba(255,255,255,.8);margin:14px 0 0;
  text-shadow:0 1px 8px rgba(0,0,0,.8)}

/* anillo de tiempo */
.ring{position:relative;width:130px;height:130px;margin:0 auto}
.ring__svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring__bg{fill:none;stroke:rgba(255,255,255,.22);stroke-width:7}
.ring__fg{fill:none;stroke:#fff;stroke-width:7;stroke-linecap:round;
  stroke-dasharray:339.29;stroke-dashoffset:0;transition:stroke-dashoffset .95s linear}
.ring__time{
  position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--serif);font-size:36px;margin:0;color:#fff;
}

/* controles */
.controls{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:20px}
.ctrl{
  min-height:58px;padding:14px 20px;border:2px solid rgba(255,255,255,.4);
  background:rgba(255,255,255,.12);color:#fff;border-radius:14px;
  font-size:18px;font-weight:600;cursor:pointer;font-family:var(--sans);
  backdrop-filter:blur(6px);
}
.ctrl--main{min-width:150px;background:#fff;color:var(--primario-osc);border-color:#fff}
.ctrl:active{transform:scale(.97)}

/* cuenta regresiva */
.prep{position:absolute;inset:0;background:rgba(142,69,38,.93);display:grid;place-content:center;text-align:center;color:#fff;z-index:5}
.prep__lbl{font-size:17px;letter-spacing:.18em;text-transform:uppercase;margin:0;color:rgba(255,255,255,.8)}
.prep__num{font-family:var(--serif);font-size:96px;margin:6px 0;line-height:1}
.prep__next{font-size:19px;margin:0;color:rgba(255,255,255,.92);padding:0 24px}

/* --- fin de rutina --- */
.done{background:var(--primario);color:#fff;display:none;place-items:center;position:relative;overflow:hidden}
.done.is-active{display:grid}
.done::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(142,69,38,.55) 0%,rgba(142,69,38,.86) 46%,rgba(142,69,38,.96) 100%);
}
.done .wrap{position:relative;z-index:2}
.done .h1{color:#fff;font-size:40px}
.done .lede{color:rgba(255,255,255,.9)}
.done .eyebrow{color:rgba(255,255,255,.75)}
.done .chip{background:rgba(255,255,255,.18);color:#fff}
.done .btn--primary{background:#fff;color:var(--primario-osc);margin-top:26px}

/* --- ayuda desplegable --- */
.faq{margin-top:34px;background:var(--blanco);border-radius:var(--radio);box-shadow:var(--sombra);overflow:hidden}
.faq summary{padding:18px 20px;cursor:pointer;font-weight:600;color:var(--primario-osc);font-size:17px;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"＋";float:right;color:var(--primario-claro)}
.faq[open] summary::after{content:"−"}
.faq__body{padding:0 20px 20px}
.faq__body p{font-size:16px;color:var(--texto-suave);margin:0 0 12px}
.faq__body p:last-child{margin-bottom:0}

/* --- botón de instrucciones ---
   Por defecto la pantalla queda limpia: solo el nombre y el video.
   Las indicaciones aparecen cuando la alumna las pide. */
.instr{
  flex:0 0 auto;align-self:center;
  display:inline-flex;align-items:center;gap:9px;margin:0 auto 14px;
  padding:11px 20px 11px 13px;border:1.5px solid rgba(255,255,255,.5);
  background:rgba(0,0,0,.42);color:#fff;border-radius:99px;
  font-family:var(--sans);font-size:16px;font-weight:600;cursor:pointer;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:background .18s ease,border-color .18s ease;
}
.instr:active{transform:scale(.97)}
.instr:hover{background:rgba(0,0,0,.58);border-color:rgba(255,255,255,.75)}
.instr__ico{
  width:24px;height:24px;flex:0 0 24px;border-radius:50%;
  background:rgba(255,255,255,.9);color:#2C3730;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-size:15px;font-weight:700;line-height:1;
}
.player.is-instr .instr{background:#fff;color:var(--primario-osc);border-color:#fff;
  backdrop-filter:none;-webkit-backdrop-filter:none}
.player.is-instr .instr__ico{background:var(--primario);color:#fff}

/* --- pantallas grandes --- */
@media (min-width:720px){
  body{font-size:19px}
  .h1{font-size:42px}
  .player__nombre{font-size:36px}
  .player__video{object-fit:contain;background:#000}
  .cal{gap:12px}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}

/* =========================================================
   EL NOMBRE SE APARTA SOLO
   ---------------------------------------------------------
   Las alumnas nos dijeron que el título y el botón les
   tapaban el movimiento justo donde hay que mirar. Ahora el
   nombre aparece unos segundos al empezar cada ejercicio y
   después se va, dejando el video limpio.

   Vuelve tocando la pantalla en cualquier lado, o el botón
   redondo de la derecha. Si la alumna está leyendo las
   instrucciones, no se oculta nada.
   ========================================================= */
.player__info{
  transition:opacity .4s ease,visibility .4s ease,transform .4s ease;
}
.player.is-limpio .player__info{
  opacity:0;visibility:hidden;transform:translateY(-8px);pointer-events:none;
}
/* con la pantalla limpia sobra la sombra de arriba: se ve mejor el video */
.player.is-limpio .player__scrim{
  background:linear-gradient(180deg,
    rgba(0,0,0,.40) 0%, rgba(0,0,0,.12) 15%, rgba(0,0,0,0) 27%,
    rgba(0,0,0,0) 62%, rgba(0,0,0,.16) 74%, rgba(0,0,0,.55) 100%);
}

.peek{
  position:absolute;right:16px;top:calc(env(safe-area-inset-top) + 80px);
  width:56px;height:56px;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.55);
  background:rgba(0,0,0,.45);color:#fff;
  font-family:var(--serif);font-size:25px;font-style:italic;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  box-shadow:0 2px 12px rgba(0,0,0,.4);
  animation:asomar .35s ease;
}
.peek:active{transform:scale(.93)}
.peek:focus-visible{outline:3px solid #fff;outline-offset:3px}
@keyframes asomar{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}

/* =========================================================
   INSTALAR LA APP
   Tarjeta debajo de «Continuar» y hoja con los pasos.
   ========================================================= */
.instalar{
  margin:18px 0 8px;padding:18px 18px 16px;
  background:var(--blanco);border-radius:var(--radio);box-shadow:var(--sombra);
}
.instalar__head{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.instalar__ico{flex:none;width:52px;height:52px;border-radius:12px}
.instalar__t{font-weight:600;color:var(--primario-osc);font-size:18px;margin:0 0 2px}
.instalar__d{font-size:15.5px;line-height:1.45;color:var(--texto-suave);margin:0}
.btn--suave{background:var(--crema);color:var(--primario-osc);border:2px solid var(--primario);min-height:56px}
.btn--suave:hover{background:var(--crema-osc)}

.hoja{position:fixed;inset:0;z-index:50;display:flex;align-items:flex-end;justify-content:center}
.hoja__fondo{position:absolute;inset:0;background:rgba(44,55,48,.55)}
.hoja__panel{
  position:relative;width:100%;max-width:640px;max-height:92svh;overflow-y:auto;
  background:var(--crema);border-radius:22px 22px 0 0;
  padding:26px 22px calc(22px + env(safe-area-inset-bottom));
}
.hoja__t{font-family:var(--serif);font-weight:400;font-size:28px;color:var(--primario-osc);margin:0 0 16px}
.hoja__pasos{margin:0 0 18px;padding:0;list-style:none;counter-reset:paso}
.hoja__pasos li{
  counter-increment:paso;position:relative;
  padding:4px 0 14px 50px;font-size:17.5px;line-height:1.5;
}
.hoja__pasos li::before{
  content:counter(paso);position:absolute;left:0;top:0;
  width:36px;height:36px;border-radius:50%;
  background:var(--primario);color:#fff;font-weight:700;
  display:grid;place-items:center;font-size:17px;
}
.hoja__pasos b{color:var(--primario-osc)}
.hoja__svg{width:24px;height:24px;vertical-align:-5px;color:#2F7CF6}
.hoja__nota{
  font-size:16px;color:var(--texto-suave);background:var(--blanco);
  border-radius:12px;padding:12px 14px;margin:0 0 18px;
}
.hoja__svg--gris{color:var(--texto);fill:currentColor;width:20px;height:20px;vertical-align:-4px}

/* =========================================================
   REPRODUCTOR PARA EJERCICIOS SENTADA
   ---------------------------------------------------------
   En Caminata la profe está parada y el reloj grande abajo
   tapaba poco. Acá está sentada: el cuerpo queda en la mitad
   de abajo del video y el reloj le tapaba las piernas, justo
   en los ejercicios de piernas.

   · El reloj se achica y va al lado de los botones, en una
     sola franja abajo.
   · El video sube un 13%: la parte de arriba de los clips es
     solo cerco verde, así que no se pierde nada. Abajo queda
     una franja oscura donde viven los controles.
   ========================================================= */
.player__video{
  top:-13%;bottom:auto;height:100%;object-position:center center;
  -webkit-mask-image:linear-gradient(180deg,#000 80%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 80%,transparent 100%);
}
.player__bottom{
  display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:14px;
}
.ring{width:92px;height:92px;margin:0}
.ring__time{font-size:27px}
.controls{margin-top:0;gap:10px}
.ctrl{min-height:56px;padding:12px 14px}
.ctrl--main{min-width:0;flex:1}
.player__next{grid-column:1/-1;margin-top:12px}

@media (min-width:720px){
  .player__video{top:0;height:100%;-webkit-mask-image:none;mask-image:none}
}