:root{--naranja:#ff6b2c;--naranja-osc:#e0521a;--amarillo:#ffc93c;--azul:#0b1020;--azul2:#1d2b53;--texto:#f4f1ea;--gris:#a9afc3;--verde:#1fa971;--w:150px}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:"Nunito","Segoe UI",Arial,sans-serif;background:var(--azul);color:var(--texto);line-height:1.5;-webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column}
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 4%;background:linear-gradient(#0b1020f2,#0b102000);position:fixed;top:0;left:0;right:0;z-index:20}
.logo{font-weight:900;font-size:1.35rem;letter-spacing:-.3px}.logo span{color:var(--amarillo)}
.top-actions{display:flex;align-items:center;gap:12px}
.top-actions[hidden]{display:none}
input{font:inherit;color:var(--texto);background:#1a2140;border:1px solid #2c3562;border-radius:10px;padding:9px 12px;width:100%}
.top-actions input{width:150px;background:#0b1020cc;border-radius:999px;padding:8px 14px}
input:focus{outline:2px solid var(--amarillo)}
button{font:inherit;cursor:pointer}
.link{background:none;border:0;color:var(--gris);text-decoration:underline}
main{flex:1;padding:64px 0 40px}
.login{max-width:440px;margin:40px auto;padding:0 16px;text-align:center}
.login[hidden],#biblioteca[hidden],#cargando[hidden],.fila[hidden],.msg[hidden],#repetirBox[hidden],.hero[hidden],.chips[hidden],.hero-img[hidden]{display:none}
.tabs{display:flex;gap:8px;margin:0 0 16px}
.tabs .btn{flex:1;padding:10px 12px;font-size:.95rem;box-shadow:none;opacity:.7}
.tabs .btn.on{background:var(--naranja);opacity:1}
#repetirBox{display:grid;gap:10px}
.aux{margin-top:14px;font-size:.9rem}
h1{font-size:clamp(1.7rem,6vw,2.4rem);line-height:1.15;font-weight:900;margin-bottom:10px}
h1 em{font-style:normal;color:var(--naranja)}
.sub{color:var(--gris);margin-bottom:18px}
form{display:grid;gap:10px;text-align:left}
label{font-weight:700;font-size:.9rem}
.btn{background:var(--naranja);color:#fff;border:0;border-radius:12px;padding:14px 16px;font-weight:900;font-size:1.05rem;box-shadow:0 4px 0 var(--naranja-osc);text-decoration:none;display:inline-block;text-align:center}
.btn:hover{transform:translateY(1px)}
.btn.sec{background:#26305a;box-shadow:0 4px 0 #1a2140}
.msg{margin-top:14px;color:var(--amarillo);padding:0 16px;text-align:center}
.cargando{text-align:center;color:var(--gris);padding:60px 16px}

/* Portada principal (hero) */
.hero{position:relative;overflow:hidden;margin:-64px 0 8px;padding:96px 4% 36px;min-height:420px;display:flex;align-items:center}
.hero-bg{position:absolute;inset:-30px;background-size:cover;background-position:center;filter:blur(28px) brightness(.5) saturate(1.2);transform:scale(1.1);background-color:#1d2b53}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,var(--azul) 2%,transparent 45%),linear-gradient(90deg,#0b1020cc,transparent 70%)}
.hero-in{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:32px;width:100%;max-width:1200px;margin:0 auto}
.hero-txt{max-width:560px}
.hero-tag{display:inline-block;background:var(--amarillo);color:#241a00;font-weight:900;font-size:.75rem;letter-spacing:.6px;text-transform:uppercase;padding:4px 10px;border-radius:999px;margin-bottom:12px}
.hero-titulo{font-size:clamp(1.6rem,4.6vw,2.8rem);line-height:1.1;font-weight:900;text-shadow:0 2px 14px #000a}
.hero-desc{margin:12px 0 20px;color:#e6e3da;font-size:1.02rem;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-shadow:0 1px 8px #000a}
.hero-btns{display:flex;gap:10px;flex-wrap:wrap}
.hero-btns .btn{padding:12px 22px}
.hero-img{flex:0 0 min(340px,34vw);aspect-ratio:1;border-radius:18px;overflow:hidden;box-shadow:0 20px 60px #000c;transform:rotate(2deg);background:#1d2b53}
.hero-img img{width:100%;height:100%;object-fit:cover;display:block}

/* Categorías */
.chips{display:flex;gap:8px;overflow-x:auto;padding:6px 4% 10px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;background:#1a2140;color:var(--texto);border:1px solid #2c3562;border-radius:999px;padding:7px 16px;font-weight:800;font-size:.88rem;transition:background .2s,transform .2s}
.chip:hover{background:#26305a;transform:translateY(-1px)}
.chip.on{background:var(--naranja);border-color:var(--naranja);color:#fff}

/* Filas y tarjetas */
.fila{padding:10px 0 0;position:relative;animation:subir .5s both}
.fila h2{font-size:1.2rem;font-weight:900;padding:0 4% 2px}
.carril{display:flex;gap:14px;overflow-x:auto;padding:16px 4% 22px;scroll-snap-type:x proximity;scrollbar-width:none}
.carril::-webkit-scrollbar{display:none}
.flecha{position:absolute;top:50%;z-index:6;width:44px;height:88px;margin-top:-20px;border:0;background:#0b1020d9;color:#fff;font-size:1.8rem;border-radius:10px;display:none;opacity:0;transition:opacity .2s}
.fila:hover .flecha{opacity:1}
.flecha.izq{left:.5%}.flecha.der{right:.5%}
@media(hover:hover) and (min-width:760px){.flecha{display:block}}
.card{flex:0 0 var(--w);scroll-snap-align:start;background:none;border:0;border-radius:14px;cursor:pointer;text-align:left;color:inherit;padding:0;position:relative;transition:transform .25s ease,box-shadow .25s ease}
.card:hover,.card:focus-visible{transform:scale(1.08);z-index:4;outline:none}
.card:hover .portada,.card:focus-visible .portada{box-shadow:0 16px 36px #000d,0 0 0 2px #fff3}
.portada{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:3rem;background:linear-gradient(160deg,#ff6b2c,#7a2e12);position:relative;border-radius:14px;overflow:hidden;transition:box-shadow .25s}
.portada img{width:100%;height:100%;object-fit:cover;display:block;transition:filter .3s}
.portada.c2{background:linear-gradient(160deg,#1fa971,#0b4d34)}
.portada.c3{background:linear-gradient(160deg,#4c6fff,#1d2b53)}
.portada.c4{background:linear-gradient(160deg,#ffc93c,#8a6200)}
.card.bloq .portada img{filter:brightness(.5) saturate(.55)}
.card.bloq:hover .portada img{filter:brightness(.75) saturate(.85)}
.candado{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
.candado span{width:44px;height:44px;border-radius:50%;background:#0b1020cc;display:flex;align-items:center;justify-content:center;font-size:1.3rem;border:2px solid #fff4}
.badge{position:absolute;top:8px;left:8px;font-size:.7rem;font-weight:900;padding:3px 9px;border-radius:999px;background:#0b1020cc;letter-spacing:.3px}
.badge.ok{background:var(--verde);color:#fff}
.card .t{padding:8px 4px 0;font-weight:800;font-size:.82rem;line-height:1.25;color:#d9d6cd;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@keyframes subir{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media(min-width:760px){:root{--w:220px}.top{padding:16px 4%}}
@media(max-width:640px){.hero{padding-top:84px;min-height:0}.hero-in{flex-direction:column-reverse;align-items:flex-start;gap:20px}.hero-img{flex-basis:auto;width:62%;transform:none}.hero-desc{-webkit-line-clamp:2}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Ficha del producto */
.modal{position:fixed;inset:0;background:#000b;display:flex;align-items:flex-end;justify-content:center;z-index:30;padding:0;backdrop-filter:blur(3px)}
.modal[hidden]{display:none}
.modal-card{background:#151b36;width:100%;max-width:600px;max-height:92vh;overflow:auto;border-radius:20px 20px 0 0;padding:0 0 28px;position:relative;animation:subir .3s both}
.modal-card h3,.modal-card .sub,#mCuerpo{padding:0 20px}
@media(min-width:640px){.modal{align-items:center;padding:16px}.modal-card{border-radius:20px}}
.cerrar{position:absolute;top:10px;right:12px;background:#0b1020;color:var(--texto);border:0;border-radius:50%;width:36px;height:36px;font-size:1.3rem;z-index:2}
.m-portada{height:280px;margin-bottom:16px;display:flex;align-items:center;justify-content:center;font-size:3rem;background-size:contain;background-repeat:no-repeat;background-position:center;background-color:#0b1020;position:relative}
.m-portada::after{content:"";position:absolute;left:0;right:0;bottom:0;height:60px;background:linear-gradient(transparent,#151b36)}
.modal h3{font-size:1.35rem;margin-bottom:6px;line-height:1.2}
.items{display:grid;gap:10px;margin-top:12px}
.item{background:#1a2140;border-radius:12px;padding:12px;display:grid;gap:8px}
.item strong{font-size:.95rem}
.item .texto{white-space:pre-wrap;color:var(--texto)}
.nota{color:var(--gris);font-size:.85rem;margin-top:12px}
footer{text-align:center;font-size:.75rem;color:var(--gris);padding:0 16px 24px}