:root{
  --fondo:#120203; --fondo2:#1c0507; --tarjeta:#240a0c; --borde:rgba(255,255,255,.08);
  --vino:#6E0F16; --rojo:#D7323A; --oro:#E9C27A; --oro2:#C9973F;
  --texto:#F6EEEA; --gris:#B9A9A6; --tenue:#7d6c6a; --verde:#4FB37C;
  --r:18px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;background:var(--fondo);color:var(--texto);font-family:Inter,system-ui,sans-serif;font-size:16px;line-height:1.45}
body{min-height:100vh;padding-bottom:calc(76px + env(safe-area-inset-bottom))}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
h1,h2,h3{font-family:Fraunces,Georgia,serif;margin:0;letter-spacing:-.01em}
.wrap{max-width:720px;margin:0 auto;padding:0 16px}

/* ── Login ── */
.login{min-height:100vh;display:flex;flex-direction:column;justify-content:flex-end;position:relative;overflow:hidden;padding:0 0 calc(32px + env(safe-area-inset-bottom))}
.login .bg{position:absolute;inset:0;background:url(img/m1-portada.jpg) center 25%/cover}
.login .bg:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,2,3,.35) 0%,rgba(18,2,3,.2) 30%,rgba(18,2,3,.85) 60%,var(--fondo) 80%)}
.login .in{position:relative;max-width:440px;margin:0 auto;width:100%;padding:0 20px}
.marca{font:800 11px/1 Inter;letter-spacing:.42em;color:var(--oro);text-transform:uppercase}
.login h1{font-size:40px;line-height:1.02;margin:14px 0 10px}
.login h1 span{color:var(--oro)}
.login p{color:var(--gris);margin:0 0 22px}
.campo{display:flex;flex-direction:column;gap:10px}
.campo input{width:100%;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);border-radius:14px;padding:16px;color:#fff;font:600 17px Inter;letter-spacing:.12em;text-transform:uppercase;outline:none}
.campo input:focus{border-color:var(--oro)}
.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;background:var(--rojo);color:#fff;font:700 16px Inter;padding:16px;border-radius:14px}
.btn.oro{background:linear-gradient(135deg,var(--oro),var(--oro2));color:#2a0a0b}
.btn.sec{background:rgba(255,255,255,.08)}
.error{color:#ff8a8f;font-size:14px;min-height:20px}
.ayuda{font-size:13px;color:var(--tenue);margin-top:14px;text-align:center}

/* ── Header ── */
.top{padding:calc(18px + env(safe-area-inset-top)) 0 8px;display:flex;align-items:center;justify-content:space-between}
.top .marca{font-size:10px}
.saludo{margin:14px 0 18px}
.saludo h1{font-size:30px;line-height:1.1}
.saludo p{color:var(--gris);margin:6px 0 0}

/* ── Progreso destacado ── */
.continuar{display:flex;gap:16px;align-items:center;background:linear-gradient(135deg,#3a080c,#1d0507);border:1px solid var(--borde);border-radius:var(--r);padding:16px;margin-bottom:26px}
.anillo{flex:0 0 74px;height:74px;position:relative}
.anillo svg{width:74px;height:74px;transform:rotate(-90deg)}
.anillo b{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;font:800 20px Fraunces}
.anillo b small{font:700 9px Inter;letter-spacing:.12em;color:var(--gris);text-transform:uppercase}
.continuar .t small{display:block;font:800 10px Inter;letter-spacing:.14em;color:var(--oro);text-transform:uppercase;margin-bottom:4px}
.continuar .t h3{font-size:19px;line-height:1.2}
.continuar .t p{margin:4px 0 0;color:var(--gris);font-size:14px}

/* ── Filas de tarjetas ── */
.fila{margin-bottom:26px}
.fila h2{font-size:20px;margin:0 0 4px}
.fila .sub{color:var(--gris);font-size:14px;margin:0 0 12px}
.carrusel{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px;margin:0 -16px;padding-left:16px;padding-right:16px;scrollbar-width:none}
.carrusel::-webkit-scrollbar{display:none}
.card{flex:0 0 72%;max-width:280px;scroll-snap-align:start;border-radius:var(--r);overflow:hidden;background:var(--tarjeta);border:1px solid var(--borde);position:relative;display:block}
.card .cover{height:170px;background-size:cover;background-position:center 30%;position:relative}
.card .cover:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(18,2,3,.85))}
.card .tag{position:absolute;top:10px;left:10px;z-index:2;font:800 10px Inter;letter-spacing:.12em;text-transform:uppercase;background:rgba(18,2,3,.7);backdrop-filter:blur(6px);padding:6px 9px;border-radius:99px;color:var(--oro)}
.card .info{padding:12px 14px 14px}
.card .info h3{font-size:17px;line-height:1.2}
.card .info p{margin:4px 0 0;font-size:13px;color:var(--gris)}
.card .barra{height:4px;background:rgba(255,255,255,.08);border-radius:4px;margin-top:10px;overflow:hidden}
.card .barra i{display:block;height:100%;background:var(--rojo);border-radius:4px}
.card.bloq .cover{filter:grayscale(.7) brightness(.45)}
.card .candado{position:absolute;top:58px;left:50%;transform:translateX(-50%);z-index:3;width:54px;height:54px;border-radius:50%;background:rgba(18,2,3,.75);border:1px solid rgba(233,194,122,.5);display:flex;align-items:center;justify-content:center}
.card .candado svg{width:24px;height:24px;fill:var(--oro)}

/* ── Módulo ── */
.hero{position:relative;height:300px;background-size:cover;background-position:center 30%;margin:0 -16px}
.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,2,3,.4) 0%,transparent 30%,rgba(18,2,3,.7) 70%,var(--fondo))}
.volver{position:absolute;top:calc(14px + env(safe-area-inset-top));left:14px;z-index:3;width:42px;height:42px;border-radius:50%;background:rgba(18,2,3,.6);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center}
.volver svg{width:22px;height:22px;fill:#fff}
.mod-tit{margin-top:-70px;position:relative;z-index:2}
.mod-tit small{font:800 11px Inter;letter-spacing:.14em;color:var(--oro);text-transform:uppercase}
.mod-tit h1{font-size:32px;line-height:1.08;margin:6px 0 10px}
.mod-tit p{color:var(--gris);margin:0 0 18px}
.video{border-radius:var(--r);overflow:hidden;background:#000;aspect-ratio:16/9;margin-bottom:14px;position:relative}
.video iframe,.video video{width:100%;height:100%;border:0;display:block}
.video .pronto{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:linear-gradient(135deg,#2a0709,#120203);color:var(--gris);font-size:14px;text-align:center;padding:20px}
.video .pronto svg{width:46px;height:46px;fill:var(--oro);opacity:.85}
.acciones{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:26px}
.bloque{background:var(--tarjeta);border:1px solid var(--borde);border-radius:var(--r);padding:16px;margin-bottom:14px}
.bloque h3{font-size:18px;margin-bottom:10px}
.bloque ul{margin:0;padding-left:18px;color:var(--gris)} .bloque li{margin:4px 0}

/* ── Días ── */
.dias{display:flex;flex-direction:column;gap:8px;margin-bottom:26px}
.dia{display:flex;align-items:center;gap:12px;text-align:left;width:100%;background:var(--tarjeta);border:1px solid var(--borde);border-radius:14px;padding:12px 14px}
.dia .n{flex:0 0 40px;height:40px;border-radius:50%;background:rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;font:800 15px Fraunces;color:var(--oro)}
.dia .t{flex:1} .dia .t b{display:block;font-size:15px} .dia .t span{font-size:13px;color:var(--gris)}
.chk{flex:0 0 30px;height:30px;border-radius:9px;border:2px solid rgba(255,255,255,.25);display:flex;align-items:center;justify-content:center}
.chk svg{width:18px;height:18px;fill:#fff;opacity:0}
.dia.hecho .chk{background:var(--verde);border-color:var(--verde)} .dia.hecho .chk svg{opacity:1}
.dia.hecho .n{background:rgba(79,179,124,.15);color:var(--verde)}

/* ── Progreso ── */
.grilla{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin:10px 0 24px}
.grilla div{aspect-ratio:1;border-radius:12px;background:var(--tarjeta);border:1px solid var(--borde);display:flex;align-items:center;justify-content:center;font:800 15px Fraunces;color:var(--tenue)}
.grilla div.ok{background:var(--verde);color:#fff;border-color:var(--verde)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:24px}
.stats div{background:var(--tarjeta);border:1px solid var(--borde);border-radius:14px;padding:14px;text-align:center}
.stats b{display:block;font:800 26px Fraunces;color:var(--oro)} .stats span{font-size:12px;color:var(--gris)}

/* ── Termómetro ── */
.slider{margin-bottom:18px}
.slider label{display:flex;justify-content:space-between;font-weight:600;margin-bottom:4px}
.slider label b{color:var(--oro);font-family:Fraunces}
.slider small{display:block;color:var(--gris);font-size:13px;margin-bottom:8px}
.slider input{width:100%;accent-color:var(--rojo)}
.resultado{text-align:center;padding:20px;background:linear-gradient(135deg,#3a080c,#1d0507);border-radius:var(--r);margin-bottom:16px}
.resultado b{display:block;font:800 52px/1 Fraunces;color:var(--oro)}
.resultado p{margin:8px 0 0;color:var(--gris)}
.historial svg{width:100%;height:150px}

/* ── Modal ── */
.modal{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.7);backdrop-filter:blur(4px);display:flex;align-items:flex-end;justify-content:center}
.modal[hidden]{display:none}
.hoja{width:100%;max-width:560px;background:var(--fondo2);border-radius:24px 24px 0 0;padding:22px 20px calc(24px + env(safe-area-inset-bottom));max-height:92vh;overflow:auto;border-top:1px solid rgba(233,194,122,.3)}
.hoja .cover{height:150px;border-radius:16px;background-size:cover;background-position:center;margin-bottom:16px}
.hoja h2{font-size:24px;margin:6px 0 8px}
.hoja p{color:var(--gris)}
.hoja ul{padding-left:18px;color:var(--texto)} .hoja li{margin:6px 0}
.hoja .precio{font:800 28px Fraunces;color:var(--oro);margin:6px 0 14px}
.hoja .precio s{font-size:16px;color:var(--tenue);margin-right:8px}
.hoja .sep{text-align:center;color:var(--tenue);font-size:13px;margin:16px 0 10px}

/* ── Nav ── */
.nav{position:fixed;bottom:0;left:0;right:0;z-index:40;display:flex;justify-content:space-around;background:rgba(18,2,3,.92);backdrop-filter:blur(12px);border-top:1px solid var(--borde);padding:8px 0 calc(8px + env(safe-area-inset-bottom))}
.nav[hidden]{display:none}
.nav a{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:11px;font-weight:600;color:var(--tenue);padding:4px 18px}
.nav svg{width:24px;height:24px;fill:currentColor}
.nav a.on{color:var(--oro)}
.toast{position:fixed;left:50%;bottom:96px;transform:translateX(-50%);background:var(--verde);color:#fff;padding:10px 16px;border-radius:12px;font-weight:600;font-size:14px;z-index:60}