/* Grupo UDS · tienda */
.wrap{width:100%;max-width:1240px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.btn-lg{height:52px;padding:0 28px;font-size:14.5px}
.btn-ghost{background:transparent;border-color:rgba(255,255,255,.35);color:var(--white)}
.btn-ghost:hover{border-color:var(--white)}

/* Barra de navegación */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;background:var(--black)}
.nav-in{display:flex;align-items:center;gap:28px;height:76px}
.nav-logo img{display:block;height:60px;width:auto}
.nav-links{display:flex;gap:6px;margin-left:auto}
.nav-links a,.nav-q{padding:10px 14px;border:0;border-radius:999px;background:none;color:var(--c300);font-size:14px;font-weight:700;text-decoration:none;cursor:pointer}
.nav-links a:hover,.nav-q:hover{color:var(--white);background:rgba(255,255,255,.08)}
.cart-btn{display:inline-flex;align-items:center;gap:10px;height:46px;padding:0 8px 0 18px;border:0;border-radius:999px;background:var(--grad-red);color:var(--white);font-weight:800;cursor:pointer}
.cart-btn b{display:grid;place-items:center;min-width:30px;height:30px;padding:0 8px;border-radius:999px;background:var(--surface);color:var(--red6);font-size:13px}
@media (max-width:760px){.nav-links a:not(.nav-acc),.nav-q{display:none}.nav-in{gap:10px;height:66px}.nav-logo img{height:48px}}
@media (max-width:420px){.cart-btn span{display:none}.cart-btn{padding:0 8px 0 14px}}

/* Portada */
.hero{background:var(--black);color:var(--white);padding:56px 0 64px}
.hero-in{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:40px;align-items:center}
@media (max-width:900px){.hero-in{grid-template-columns:minmax(0,1fr)}}
.kicker{display:inline-block;margin-bottom:16px;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--c300)}
.hero h1{margin:0 0 18px;font-size:clamp(2.4rem,5.4vw,4.2rem);font-weight:800;line-height:1.02;letter-spacing:-.035em;text-wrap:balance}
.hero p{margin:0 0 28px;max-width:52ch;font-size:16px;color:var(--c300)}
.hero-card{padding:32px;gap:20px}
.hero-card h2{margin:0;font-size:28px;font-weight:800;letter-spacing:-.02em}
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:12px;font-size:15px}
.ticks li{position:relative;padding-left:30px}
.ticks li::before{content:"";position:absolute;left:0;top:2px;width:18px;height:18px;border-radius:5px;background:var(--red)}
.ticks li::after{content:"";position:absolute;left:6px;top:5px;width:5px;height:9px;border:solid var(--white);border-width:0 2px 2px 0;transform:rotate(45deg)}

/* Secciones */
.sec{padding:72px 0}
.sec-gray{background:var(--c50)}
.sec-t{margin:0 0 32px;font-size:clamp(1.9rem,3.6vw,2.8rem);font-weight:800;line-height:1.08;letter-spacing:-.03em;color:var(--heading);text-wrap:balance}
.sec-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:28px}
.sec-head .sec-t{margin:0}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
@media (max-width:860px){.steps{grid-template-columns:minmax(0,1fr)}}
.step{padding:28px;gap:10px;align-content:start}
.step-n{font-size:15px;font-weight:800;letter-spacing:.08em;color:rgba(255,255,255,.7)}
.step h3{margin:0;font-size:20px;font-weight:800}
.step p{margin:0;font-size:14px;color:rgba(255,255,255,.88)}

/* Catálogo */
.cats{display:flex;flex-wrap:wrap;gap:8px}
.cats button{height:40px;padding:0 18px;border:1px solid var(--c200);border-radius:999px;background:var(--surface);font-weight:700;cursor:pointer}
.cats button[aria-pressed="true"]{background:var(--black);border-color:var(--black);color:var(--white)}
.pgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
@media (max-width:1100px){.pgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:780px){.pgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}}
@media (max-width:440px){.pgrid{grid-template-columns:minmax(0,1fr)}}
.prod{display:flex;flex-direction:column;overflow:hidden;border-radius:var(--r2);background:var(--surface);border:1px solid var(--c100);cursor:pointer;text-align:left;padding:0}
.prod:hover{border-color:var(--red)}
.prod-ph{aspect-ratio:1/1;max-width:100%;background:var(--c100);display:grid;place-items:center;color:var(--c300)}
.prod-ph img{width:100%;height:100%;object-fit:cover;display:block}
.prod-ph .i{width:44px;height:44px}
.prod-b{display:grid;gap:6px;padding:16px 18px 18px}
.prod-c{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--red6)}
.prod-n{font-size:15.5px;font-weight:800;line-height:1.25}
.prod-p{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-top:4px}
.prod-p .stat{font-size:24px}
.prod-p small{color:var(--ink5)}
.pgrid .empty{grid-column:1/-1;background:var(--surface);border-radius:var(--r2);border:1px solid var(--c100)}

/* Pie */
.foot{background:var(--black);color:var(--c300);padding:40px 0 calc(32px + env(safe-area-inset-bottom,0px))}
.foot-in{display:flex;flex-wrap:wrap;align-items:center;gap:24px}
.foot-in img{height:64px;width:auto}
.foot-info{flex:1;min-width:220px;display:grid;gap:4px;font-size:13.5px}
.foot small{color:var(--c500)}

/* Ficha de producto */
.modal{width:min(980px,calc(100vw - 32px));max-height:calc(100vh - 32px);padding:0;border:0;border-radius:var(--r2);background:var(--surface);color:var(--ink);overflow:auto}
.modal::backdrop,.drawer::backdrop{background:rgba(0,0,0,.6)}
.modal-x{position:absolute;top:14px;right:14px;z-index:2}
.pm-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
@media (max-width:760px){.pm-in{grid-template-columns:minmax(0,1fr)}}
.pm-photo{background:var(--c100);display:grid;place-items:center;min-height:320px;color:var(--c300)}
.pm-photo img{width:100%;height:100%;object-fit:cover;display:block}
.pm-photo .i{width:56px;height:56px}
.pm-body{display:grid;gap:16px;align-content:start;padding:32px 28px}
.pm-body h2{margin:0;font-size:28px;font-weight:800;line-height:1.1;letter-spacing:-.02em}
.pm-body .chip{justify-self:start}
.pm-price{margin:0;color:var(--ink5)}
.pm-price .stat{font-size:30px;color:var(--ink)}
.pm-desc{margin:0;color:var(--ink7);white-space:pre-line}
.sizes{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:8px}
.size{display:grid;gap:4px;padding:8px;border-radius:var(--r);background:var(--c50);text-align:center}
.size span{font-size:12px;font-weight:800}
.size input{height:38px;padding:0 6px;text-align:center;background:var(--surface)}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opts button{height:40px;padding:0 16px;border:1px solid var(--c200);border-radius:999px;background:var(--surface);font-weight:700;cursor:pointer}
.opts button[aria-pressed="true"]{background:var(--red);border-color:var(--red);color:var(--white)}
.pm-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding-top:16px;border-top:1px solid var(--c100)}
.pm-foot b{font-size:18px;font-variant-numeric:tabular-nums}

/* Mi pedido */
.drawer{position:fixed;inset:0 0 0 auto;width:min(460px,100vw);height:100%;max-height:none;margin:0;padding:0;border:0;background:var(--surface);color:var(--ink);display:none;flex-direction:column;overflow:auto}
.drawer[open]{display:flex}
.dr-head{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--c100)}
.dr-head h2{margin:0;font-size:22px;font-weight:800}
.dr-body{display:grid;gap:12px;padding:20px 24px}
.line{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:12px;align-items:start;padding:12px;border-radius:var(--r);background:var(--c50)}
.line .thumb{width:56px;height:56px;border-radius:10px;object-fit:cover;background:var(--c100);display:grid;place-items:center;color:var(--c300)}
.line b{display:block;font-size:14px}
.line small{display:block;color:var(--ink5);font-size:12px}
.line .r{text-align:right;display:grid;gap:6px;justify-items:end;font-weight:800;font-variant-numeric:tabular-nums}
.line .rm{border:0;background:none;padding:0;color:var(--red6);font-size:12px;font-weight:700;cursor:pointer}
.dr-form{display:grid;gap:14px;padding:20px 24px calc(24px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--c100);margin-top:auto}
.dr-total{display:flex;align-items:baseline;justify-content:space-between}
.dr-total .stat{font-size:30px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.dr-done{display:grid;gap:14px;padding:32px 24px;text-align:center;justify-items:center}
.dr-done .stat{font-size:44px;color:var(--red)}
.dr-done h3{margin:0;font-size:22px;font-weight:800}
.dr-done p{margin:0;color:var(--ink5)}
.alert{padding:12px 14px;border-radius:var(--r);background:var(--red-t);color:var(--red6);font-size:13px;font-weight:700}

/* Cuenta del cliente */
.acc{padding:48px 0 72px;background:var(--c50);min-height:70vh}
.acc-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:24px;align-items:start}
@media (max-width:860px){.acc-in{grid-template-columns:minmax(0,1fr)}}
.acc-side{padding:32px;gap:22px}
.acc-side h1{margin:0;font-size:clamp(2rem,3.6vw,2.8rem);font-weight:800;line-height:1.05;letter-spacing:-.03em}
.acc-box{padding:28px}
.acc-box form{display:grid;gap:16px}
.seg-tabs{display:grid;grid-template-columns:1fr 1fr;padding:4px;border-radius:999px;background:var(--c50)}
.seg-tabs button{height:44px;border:0;border-radius:999px;background:none;font-weight:800;color:var(--ink5);cursor:pointer}
.seg-tabs button[aria-selected="true"]{background:var(--black);color:var(--white)}
.acc-me{display:grid;gap:20px}
.acc-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px}
.acc-head h1{margin:4px 0;font-size:clamp(1.8rem,3.4vw,2.6rem);font-weight:800;letter-spacing:-.03em}
.acc-head p{margin:0}
.acc-head .kicker{margin:0;color:var(--red6)}
.nav-acc{display:inline-flex;align-items:center;gap:8px}
.cart-btn{text-decoration:none}
.nav-in{min-width:0}
.hero-t,.hero-card{min-width:0}
.hero h1{overflow-wrap:anywhere}
@media (max-width:560px){.nav-acc span,.cart-btn span{display:none}.nav-acc{padding:10px}.cart-btn{padding:0 6px 0 14px}.nav-links{margin-left:auto;gap:0}}
body{min-height:100vh;display:flex;flex-direction:column}
body>main{flex:1}
.acc{display:flex;align-items:center}
.acc-in{align-items:stretch}
.acc-side{align-content:center}
.nav a,.nav a:hover,.nav a span{text-decoration:none}
.nav-theme{background:transparent;border-color:rgba(255,255,255,.2);color:var(--c300)}
.nav-theme:hover{color:#FFFFFF;border-color:#FFFFFF}

/* Movimiento de la portada y las secciones */
.hero{position:relative;overflow:hidden}
.hero-fx{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.hero-in{position:relative;z-index:1}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes tickIn{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
.anim .hero-t>*{animation:fadeUp .7s cubic-bezier(.2,.7,.2,1) both}
.anim .hero-t>:nth-child(2){animation-delay:.08s}
.anim .hero-t>:nth-child(3){animation-delay:.16s}
.anim .hero-t>:nth-child(4){animation-delay:.24s}
.anim .hero-card{animation:fadeUp .8s .3s cubic-bezier(.2,.7,.2,1) both}
.anim .ticks li{animation:tickIn .5s cubic-bezier(.2,.7,.2,1) both}
.anim .ticks li:nth-child(1){animation-delay:.5s}
.anim .ticks li:nth-child(2){animation-delay:.6s}
.anim .ticks li:nth-child(3){animation-delay:.7s}
.anim .ticks li:nth-child(4){animation-delay:.8s}
.reveal{opacity:0;transform:translateY(26px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
.sec{position:relative;overflow:hidden}
.sec::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:repeating-linear-gradient(-18deg,var(--c100) 0 1px,transparent 1px 26px);opacity:.55;-webkit-mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent);mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent)}
.sec>.wrap{position:relative}
.step{position:relative;overflow:hidden;transition:transform .25s cubic-bezier(.2,.7,.2,1)}
.step:hover{transform:translateY(-6px)}
.step-n{position:absolute;right:18px;top:6px;font-size:84px;font-weight:800;line-height:1;letter-spacing:-.04em;color:rgba(255,255,255,.16)}
.step h3{margin-top:28px}
.prod{transition:transform .25s cubic-bezier(.2,.7,.2,1),border-color .2s ease,opacity .6s ease}
.prod:hover{transform:translateY(-4px)}
.prod-ph img{transition:transform .4s ease}
.prod:hover .prod-ph img{transform:scale(1.04)}
.btn{transition:background-color .2s ease,border-color .2s ease,transform .2s ease}
.btn:active{transform:scale(.97)}
@media (prefers-reduced-motion:reduce){.anim .hero-t>*,.anim .hero-card,.anim .ticks li{animation:none}.reveal{opacity:1;transform:none}.step:hover,.prod:hover{transform:none}}