/* Vidrio líquido: aproximación web con backdrop-filter, no el material nativo de Apple. */
.lg{width:100%;max-width:480px;margin:0 auto;min-height:100dvh;padding-bottom:calc(108px + env(safe-area-inset-bottom));box-sizing:border-box;background:#ECEEF2;color:#0F1113;font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',Roboto,Helvetica,Arial,sans-serif;font-size:15px;line-height:1.35;position:relative;display:flex;flex-direction:column;overflow-x:clip}
.lg *{box-sizing:border-box}
.lg p,.lg h1,.lg h2,.lg h3,.lg ol{margin:0}
.lg a{color:inherit;text-decoration:none}
.lg button{font:inherit;color:inherit;cursor:pointer}
.lg a:focus-visible,.lg button:focus-visible,.lg input:focus-visible{outline:3px solid #0F1113;outline-offset:2px;box-shadow:0 0 0 2px #fff}
.lg .ic{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex:none}
.lg .ic.s{width:18px;height:18px;stroke-width:2.2}
.lg .mut{color:#3F454D}
.lg .t13{font-size:13px}
.lg .b{font-weight:600}
.lg .grow{flex:1;min-width:0}
.lg .acc{color:#A3260F}

.lg .glass,.lg .sec,.lg .foot{background:linear-gradient(135deg,rgba(255,255,255,.88),rgba(255,255,255,.72));-webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);border:1px solid rgba(255,255,255,.75);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(255,255,255,.3),0 12px 32px rgba(15,17,19,.14)}
.lg .glass.thin{background:linear-gradient(135deg,rgba(255,255,255,.74),rgba(255,255,255,.56))}
.lg .glass.dark{background:rgba(15,17,19,.62);border-color:rgba(255,255,255,.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 8px 24px rgba(15,17,19,.25);color:#fff}
@media (prefers-reduced-transparency:reduce){.lg .glass,.lg .glass.thin,.lg .sec,.lg .foot{background:rgba(255,255,255,.97);-webkit-backdrop-filter:none;backdrop-filter:none}.lg .glass.dark{background:#0F1113;-webkit-backdrop-filter:none;backdrop-filter:none}}

.lg .amb{position:absolute;left:-60px;top:-80px;width:510px;height:700px;object-fit:cover;filter:blur(60px) saturate(150%);opacity:.5}
.lg .top,.lg .bar{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding:22px 16px 10px;position:relative;z-index:1;flex:none}
.lg .top h1,.lg .logo{font-size:34px;line-height:1.05;font-weight:700;letter-spacing:-.03em}
.lg .top .d{font-size:14px;font-weight:600;color:#1C2026}
.lg .gbtn,.lg .ibtn{width:46px;height:46px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;position:relative;flex:none;padding:0}
.lg .ibtn{border:1px solid rgba(255,255,255,.75);background:rgba(255,255,255,.7)}
.lg .badge{position:absolute;top:-3px;right:-3px;min-width:19px;height:19px;border-radius:999px;background:#C8321E;color:#fff;font-size:11px;line-height:1;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 4px}

.lg .steps{display:grid;gap:4px;margin:4px 12px 2px;padding:5px;border-radius:999px;position:relative;z-index:1;flex:none}
.lg .step{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:50px;border-radius:999px;line-height:1.15;padding:0 2px}
.lg .step .tm{font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;display:inline-flex;align-items:center;gap:3px}
.lg .step .nm{font-size:12px;font-weight:600;color:#3F454D}
.lg .step.now{background:#0F1113;color:#fff}
.lg .step.now .nm{color:#fff}
.lg .step .ic{width:13px;height:13px;stroke-width:3}

.lg main{display:flex;flex-direction:column;gap:14px;padding:10px 12px 0;position:relative;z-index:1}
.lg .card{position:relative;border-radius:34px;overflow:hidden;background:#D5D9DF}
.lg .cimg{display:block;width:100%;height:520px;object-fit:cover}
.lg .card.sm .cimg{height:410px}
.lg .cglass{position:absolute;left:10px;right:10px;bottom:10px;border-radius:26px;padding:16px 16px 14px;display:flex;flex-direction:column;gap:6px}
.lg .gcard{border-radius:30px;padding:18px 18px 16px;display:flex;flex-direction:column;gap:6px}
.lg .k{font-size:13px;font-weight:700;color:#3F454D;display:flex;align-items:center;gap:6px}
.lg .ttl{font-size:25px;line-height:1.1;font-weight:700;letter-spacing:-.02em}
.lg .fogbox{position:relative;margin-top:4px;min-height:78px;display:flex;align-items:center;justify-content:center}
.lg .fogbox.tall{min-height:130px}
.lg .fog{position:absolute;left:0;top:0;right:0;bottom:0;filter:blur(4.5px);opacity:.82;font-size:14px;line-height:1.45;overflow:hidden;user-select:none;pointer-events:none}
.lg .btn,.lg .pill{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:48px;padding:0 22px;border-radius:999px;border:0;background:#0F1113;color:#fff;font-weight:700;font-size:15px;white-space:nowrap;flex:none}
.lg .btn.wide,.lg .pill.wide{width:100%;min-height:54px;font-size:16px}
.lg .gb,.lg .pill.line{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:48px;padding:0 20px;border-radius:999px;font-weight:700;font-size:15px;white-space:nowrap;color:#0F1113}
.lg .pill.line{background:rgba(255,255,255,.7);border:1px solid rgba(15,17,19,.5)}

.lg .focus{position:absolute;left:0;top:0;right:0;bottom:0;z-index:30;display:none;flex-direction:column;gap:12px;padding:12px 12px 28px;background:#0F1113;overflow-x:hidden;overflow-y:auto}
.lg.open .focus{display:flex;animation:lg-rise .55s cubic-bezier(.2,.8,.2,1)}
@keyframes lg-rise{from{opacity:0;transform:translateY(36px) scale(.985)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.lg.open .focus{animation:none}}
.lg .fbg{position:absolute;left:-60px;top:-60px;width:510px;height:calc(100% + 120px);object-fit:cover;filter:blur(42px) saturate(140%) brightness(.72)}
.lg .focus > :not(.fbg){position:relative;flex:none}
.lg .fbar{display:flex;justify-content:space-between;align-items:center}
.lg .fphoto{display:block;width:100%;height:300px;object-fit:cover;border-radius:30px}
.lg .fsheet{border-radius:30px;padding:20px 18px;display:flex;flex-direction:column;gap:16px}
.lg .fsheet .ttl{font-size:27px}
.lg h2.h,.lg .sec h2,.lg .slot h2{font-size:18px;font-weight:700;letter-spacing:-.01em}
.lg .facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.lg .fact{background:rgba(255,255,255,.62);border:1px solid rgba(255,255,255,.85);border-radius:18px;padding:12px;display:flex;flex-direction:column;gap:2px}
.lg .fact .v{font-size:17px;font-weight:700}
.lg .tags{display:flex;flex-wrap:wrap;gap:6px}
.lg .tag,.lg .exp{display:inline-flex;align-items:center;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.62);border:1px solid rgba(255,255,255,.85);font-size:13px;font-weight:600;white-space:nowrap}
.lg .tag.warn,.lg .exp.soon{background:#FBE4DF;border-color:#F3C9C1;color:#8E1F10}
.lg .blk{display:flex;flex-direction:column}
.lg .bh{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:50px}
.lg .row{display:flex;align-items:center;gap:12px;min-height:54px;padding:8px 0;border-top:1px solid rgba(15,17,19,.14)}
.lg .row .grow{display:flex;flex-direction:column}
.lg label.row{cursor:pointer}
.lg .q{font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.lg .stp{display:flex;align-items:center;gap:8px}
.lg .stp button{width:44px;height:44px;border-radius:999px;border:1.5px solid #0F1113;background:rgba(255,255,255,.7);display:inline-flex;align-items:center;justify-content:center;padding:0}
.lg .stp span{min-width:22px;text-align:center;font-size:20px;font-weight:700}
.lg ol{padding-left:22px;display:flex;flex-direction:column;gap:10px}
.lg .seg{display:grid;gap:4px;padding:5px;border-radius:999px}
.lg .seg.in{background:rgba(15,17,19,.08)}
.lg .seg button{min-height:44px;border:0;border-radius:999px;background:transparent;font-weight:700;font-size:14px}
.lg .seg button.on{background:#0F1113;color:#fff}
.lg .thumb{width:56px;height:56px;border-radius:16px;object-fit:cover;flex:none}
.lg input[type=checkbox]{width:24px;height:24px;flex:none;accent-color:#0F1113;margin:0}
.lg .hero-num{font-size:60px;line-height:1;font-weight:700;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.lg .hero-num small{font-size:22px;font-weight:600;letter-spacing:0;margin-left:6px}
.lg .cnt{min-width:24px;height:24px;border-radius:999px;background:#C8321E;color:#fff;font-size:13px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;padding:0 7px}
.lg .sw{width:52px;height:44px;padding:0;border:0;background:transparent;position:relative;flex:none}
.lg .sw::before{content:"";position:absolute;left:3px;top:8px;width:46px;height:28px;border-radius:999px;background:#0F1113}
.lg .sw::after{content:"";position:absolute;top:11px;right:6px;width:22px;height:22px;border-radius:50%;background:#fff}

.lg .sec{margin:0;padding:16px 18px 8px;border-radius:30px;display:flex;flex-direction:column}
.lg .sec h2{padding-bottom:8px}
.lg .head{padding:0 6px 4px;display:flex;flex-direction:column;gap:6px}
.lg .head h1{font-size:32px;line-height:1.06;font-weight:700;letter-spacing:-.03em}
.lg .slot{display:flex;flex-direction:column;gap:10px;padding:6px 0 0}
.lg .slot h2{padding:0 6px}
.lg .opts{display:flex;gap:10px;padding:4px 6px 8px;margin:0 -12px;padding-left:18px;padding-right:18px;overflow-x:auto;scrollbar-width:none}
.lg .opts::-webkit-scrollbar{display:none}
.lg .opt{width:150px;flex:none;display:flex;flex-direction:column;gap:5px;border:0;background:transparent;padding:0;text-align:left}
.lg .opt .im{width:150px;height:190px;border-radius:26px;overflow:hidden;position:relative;background:#D5D9DF;display:block}
.lg .opt .im img{width:100%;height:100%;object-fit:cover;display:block}
.lg .opt.sel .im{box-shadow:0 0 0 2px #fff,0 0 0 5px #0F1113}
.lg .opt .ck{position:absolute;top:8px;right:8px;width:28px;height:28px;border-radius:50%;background:#0F1113;color:#fff;display:flex;align-items:center;justify-content:center}
.lg .opt .nm{font-size:14px;font-weight:700;line-height:1.25}
.lg .stock{display:inline-flex;align-items:center;gap:4px;font-size:13px;color:#3F454D}
.lg .stock.miss{color:#A3260F;font-weight:700}
.lg .foot{position:absolute;left:12px;right:12px;bottom:14px;padding:12px 12px 14px;border-radius:32px;display:flex;flex-direction:column;gap:8px;z-index:10}

.lg .dock{position:absolute;left:12px;right:12px;bottom:14px;height:68px;border-radius:999px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:center;padding:0 6px;z-index:10}
.lg .dock a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;height:56px;border-radius:999px;font-size:12px;font-weight:700}
.lg .dock a.on{background:#0F1113;color:#fff}
.lg .dock .ic{width:22px;height:22px}

/* ---------- lo propio de la app (la maqueta no lo necesitaba) ---------- */
html,body{margin:0;background:#ECEEF2}
body{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
body.sin-scroll{overflow:hidden}
.lg [hidden]{display:none}
.lg .capa{display:flex;flex-direction:column;position:relative;z-index:1}
.lg .amb{position:fixed;left:50%;margin-left:-280px;top:-80px;width:560px;height:700px;z-index:0}
.lg .top{padding-top:max(22px,env(safe-area-inset-top))}
.lg .botones{display:flex;align-items:center;gap:8px}
.lg .steps.cuatro{grid-template-columns:repeat(4,minmax(0,1fr))}
.lg .step{border:0;background:transparent}
.lg .seg.tres{grid-template-columns:repeat(3,minmax(0,1fr))}
.lg .seg.suelto{margin:4px 12px 2px;position:relative;z-index:1}
.lg .cimg.vacia,.lg .fphoto.vacia,.lg .thumb.vacia{display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,#C9CED6,#E4E7EC);color:#3F454D}
.lg .cimg.vacia .ic{width:56px;height:56px;margin-bottom:150px}
.lg .fphoto.vacia{height:160px}
.lg .fphoto.vacia .ic{width:44px;height:44px}
.lg .tag.ok{background:#0F1113;border-color:#0F1113;color:#fff;gap:4px;margin-left:6px}
.lg .tag.ok .ic{width:13px;height:13px;stroke-width:3}
.lg .dock{position:fixed;left:12px;right:12px;margin:0 auto;max-width:456px;bottom:max(14px,env(safe-area-inset-bottom))}
.lg .fback{position:fixed;left:0;right:0;top:0;bottom:0;margin:0 auto;max-width:480px;z-index:29;background:#0F1113;overflow:hidden}
.lg .fback .fbg{left:-60px;top:-60px;width:calc(100% + 120px);height:calc(100% + 120px)}
.lg .focus{position:fixed;left:0;right:0;top:0;bottom:0;margin:0 auto;max-width:480px;background:transparent;padding-top:max(12px,env(safe-area-inset-top));padding-bottom:max(28px,env(safe-area-inset-bottom));overscroll-behavior:contain}
.lg.open .focus{animation:none}
.lg.open .focus.entra{animation:lg-rise .55s cubic-bezier(.2,.8,.2,1)}
@media (prefers-reduced-motion:reduce){.lg.open .focus.entra{animation:none}}
.lg .facts.dos{grid-template-columns:repeat(2,minmax(0,1fr))}
.lg h3.h{font-size:18px;font-weight:700;letter-spacing:-.01em}
.lg .blk.sep{gap:10px}
.lg .blk.cita{gap:6px;padding:14px;border-radius:18px;background:rgba(255,255,255,.62);border:1px solid rgba(255,255,255,.85)}
.lg .row.fila{width:100%;border-left:0;border-right:0;border-bottom:0;background:transparent;text-align:left}
.lg .gb{border:0}
.lg .gb.glass{border:1px solid rgba(255,255,255,.75)}
.lg .gbtn{border:0}
.lg .gbtn.glass{border:1px solid rgba(255,255,255,.75)}
.lg .gbtn.glass.dark{border-color:rgba(255,255,255,.22)}
.lg .gbtn.chico{width:44px;height:44px;background:transparent;color:#3F454D}
.lg .stp button:disabled{opacity:.35}
.lg .btn:disabled{opacity:.6}
.lg .entrada{min-height:100dvh;justify-content:center;gap:14px;padding:24px 16px}
.lg .marca{font-size:40px;line-height:1.05;font-weight:700;letter-spacing:-.04em;padding:0 6px}
.lg .entrada > .mut{padding:0 6px;font-weight:600}
.lg .quien{border:1px solid rgba(255,255,255,.75);text-align:left;width:100%}
.lg form.gcard{gap:14px}
.lg .campo{display:flex;flex-direction:column;gap:6px;flex:1;min-width:0}
.lg .campo label{font-size:14px;font-weight:700}
.lg select,.lg input[type=password],.lg input[type=number],.lg input[type=date],.lg input[type=time],.lg input[type=text]{min-height:50px;width:100%;border-radius:16px;border:1.5px solid rgba(15,17,19,.5);background:rgba(255,255,255,.85);padding:0 14px;font:inherit;font-size:17px;color:#0F1113}
.lg input[type=time]{width:auto;min-width:120px}
.lg .dosc{display:flex;gap:10px}
.lg .metafila{align-items:flex-end;gap:8px}
.lg .err{color:#A3260F;font-weight:700;min-height:0}
.lg .err:empty{display:none}
.lg .abajo{margin:10px 0 8px}
.lg .sec .row label{cursor:pointer}
.lg .mini{width:100%;height:70px;display:block;margin-top:8px}
.lg .grafica{width:100%;height:auto;display:block}
.lg .leyenda{display:flex;gap:14px;flex-wrap:wrap;padding-top:6px}
.lg .leyenda span{display:inline-flex;align-items:center;gap:6px}
.lg .aviso{position:fixed;left:16px;right:16px;margin:0 auto;max-width:440px;bottom:calc(96px + env(safe-area-inset-bottom));z-index:60;padding:12px 16px;border-radius:18px;font-weight:700;text-align:center}

/* ejercicios */
.lg .steps.cinco{grid-template-columns:repeat(5,minmax(0,1fr))}
.lg .seg.dos{grid-template-columns:repeat(2,minmax(0,1fr))}
.lg .fact .v.chica{font-size:15px;line-height:1.25}
.lg .pie{padding:0 6px 4px}
.lg .sino{border:0;margin:0;padding:10px 0 4px;border-top:1px solid rgba(15,17,19,.14);display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px}
.lg .sino legend{float:left;width:100%;padding:0 0 4px;font-weight:600}
.lg .sino label{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px 0 4px;font-weight:600;cursor:pointer}
.lg .sino input{width:24px;height:24px;margin:0;accent-color:#0F1113}
.lg details.prop{border-top:1px solid rgba(15,17,19,.14);padding:4px 0}
.lg details.prop summary{display:flex;align-items:center;gap:10px;min-height:54px;cursor:pointer;list-style:none}
.lg details.prop summary::-webkit-details-marker{display:none}
.lg details.prop summary .grow{display:flex;flex-direction:column}
.lg details.prop[open]{padding-bottom:14px}
.lg details.prop p{margin:0 0 8px}
.lg details.prop a{font-weight:700;text-decoration:underline;text-underline-offset:3px}
.lg .dosb{display:flex;gap:8px;flex-wrap:wrap}
.lg a.gb{text-decoration:none;text-align:center}