/* ===== PANDA IMPORTS: estilos de la tienda (tema futurista) =====
   Colores base en :root. Todo el aspecto visual vive en este archivo. */
:root{--bg:#05070d;--card:#0c111b;--line:#1d2a3a;--y:#F5A800;--cy:#00e5ff;--mut:#8fa1b8;--glow:#F5A80055}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;color:#fff;font:16px/1.55 'DM Sans',sans-serif;background:radial-gradient(900px 500px at 85% -5%,#0e2a4a55,transparent),radial-gradient(700px 400px at 0% 35%,#F5A80010,transparent),var(--bg)}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(#ffffff07 1px,transparent 1px),linear-gradient(90deg,#ffffff07 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(ellipse at 50% 25%,#000 25%,transparent 80%);mask-image:radial-gradient(ellipse at 50% 25%,#000 25%,transparent 80%)}
h1,h2,h3,.h{font-family:'Orbitron','DM Sans',sans-serif;font-weight:800;letter-spacing:.06em;line-height:1.1;margin:0}
.y{color:var(--y)}a{color:inherit}
:focus-visible{outline:3px solid #fff;outline-offset:2px}

/* ===== Botones ===== */
.btn{position:relative;overflow:hidden;background:linear-gradient(135deg,#FFC21A,#F5A800 60%,#E08A00);color:#0b0b0b;border:0;border-radius:999px;padding:12px 22px;font:700 15px 'DM Sans',sans-serif;letter-spacing:.02em;cursor:pointer;text-decoration:none;display:inline-block;box-shadow:0 0 18px #F5A80044;transition:box-shadow .25s,transform .2s}
.btn::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,#ffffff77,transparent);transform:skewX(-20deg);transition:left .6s}
.btn:hover::after{left:130%}.btn:hover{box-shadow:0 0 30px #F5A800aa;transform:translateY(-1px)}.btn:active{transform:scale(.97)}
.btn.o{background:#0c111b99;color:#fff;border:1px solid #2a3b52;padding:10px 20px;box-shadow:none}
.btn.o:hover{border-color:var(--cy);box-shadow:0 0 22px #00e5ff44}
.gbtn{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;margin-bottom:12px;background:#fff;color:#1f1f1f;border:1px solid #dadce0;border-radius:999px;padding:11px 16px;font:500 15px 'DM Sans',sans-serif;cursor:pointer;transition:box-shadow .25s}
.gbtn:hover{box-shadow:0 0 24px #00e5ff66}
.lnk{background:none;border:0;color:var(--cy);cursor:pointer;font:500 14px 'DM Sans',sans-serif;padding:0;text-decoration:underline;text-underline-offset:3px}
.lnk:hover{color:#fff}

/* ===== Encabezado ===== */
.top{display:flex;justify-content:center;align-items:center;gap:10px;background:linear-gradient(90deg,#0c111b,#1a1405,#0c111b);color:var(--y);border-bottom:1px solid #F5A80044;font-weight:700;font-size:13px;letter-spacing:.04em;text-align:center;padding:7px 12px}
.top::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--y);box-shadow:0 0 10px var(--y);animation:pulse 1.8s ease-in-out infinite;flex:none}
@keyframes pulse{50%{opacity:.3;transform:scale(.7)}}
header{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;padding:12px 5vw;position:sticky;top:0;z-index:5;background:#05070dd9;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
header::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,var(--y),var(--cy),var(--y),transparent);background-size:200% 100%;animation:flow 6s linear infinite}
@keyframes flow{to{background-position:200% 0}}
header img{width:42px;border-radius:10px;box-shadow:0 0 16px var(--glow)}
.brand{display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none}
header b{font-size:17px;letter-spacing:.16em}.brand .y{text-shadow:0 0 14px var(--glow)}
header nav{display:flex;gap:22px}header nav a{color:#b7c4d6;text-decoration:none;font-weight:500;letter-spacing:.04em;transition:color .2s}header nav a:hover{color:var(--y)}
.srch{flex:1;min-width:180px;max-width:460px;margin:0;padding-left:42px;border-radius:999px;background:#0a101a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2300e5ff' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E") no-repeat 14px center}
.acts{margin-left:auto;display:flex;align-items:center;gap:10px}
.ic{position:relative;background:linear-gradient(135deg,#FFC21A,#F5A800);color:#111;border:0;border-radius:50%;width:46px;height:46px;display:grid;place-items:center;cursor:pointer;box-shadow:0 0 20px #F5A80055;transition:box-shadow .25s,transform .2s}
.ic:hover{box-shadow:0 0 30px #F5A800aa;transform:scale(1.06)}
.ic span{position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;padding:0 4px;border-radius:10px;background:var(--cy);color:#001418;border:2px solid var(--bg);font:700 12px/16px 'DM Sans',sans-serif;text-align:center}

/* ===== Portada ===== */
.hero{position:relative;min-height:min(675px,80vh);display:flex;align-items:center;padding:0 5vw;background:linear-gradient(90deg,#05070dee 30%,#05070d00 75%),#050a14 url(img/fondo.jpg) right center/cover;border-bottom:1px solid var(--line)}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,#ffffff05 0 1px,transparent 1px 3px)}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:120px;pointer-events:none;background:linear-gradient(transparent,var(--bg))}
.hero>div{position:relative;z-index:1;animation:rise .9s cubic-bezier(.2,1,.3,1) both}
@keyframes rise{from{opacity:0;transform:translateY(24px)}}
.hero h1{font-size:clamp(26px,4.6vw,48px);max-width:12em;text-transform:uppercase;text-shadow:0 0 30px #0008}
.hero h1::before{content:"IMPORTACIÓN DIRECTA";display:block;font:700 12px 'DM Sans',sans-serif;letter-spacing:.35em;color:var(--cy);margin-bottom:14px}
.hero h1 .y{background:linear-gradient(90deg,#FFC21A,#F5A800,#ff7a18);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{color:#c9d3e0;max-width:30em;margin:18px 0 26px}

/* ===== Catálogo ===== */
section{padding:56px 5vw}#catalogo{scroll-margin-top:90px}
#catalogo h2{font-size:clamp(22px,3vw,32px);text-transform:uppercase}
#catalogo h2::before{content:"// ";color:var(--cy)}
#catalogo h2::after{content:"";display:block;width:72px;height:3px;margin-top:10px;background:linear-gradient(90deg,var(--y),var(--cy));box-shadow:0 0 12px var(--glow)}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin:20px 0}
.chips button{background:var(--card);color:#a9b8cc;border:1px solid var(--line);border-radius:999px;padding:9px 16px;cursor:pointer;font:500 14px 'DM Sans',sans-serif;transition:.25s}
.chips button:hover{border-color:var(--cy);color:#fff}
.chips .on{background:var(--y);color:#111;border-color:var(--y);font-weight:700;box-shadow:0 0 18px var(--glow)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:18px}
.c{position:relative;background:linear-gradient(160deg,#111a29cc,#0a0f18cc);border:1px solid var(--line);border-radius:18px;padding:14px;display:flex;flex-direction:column;gap:8px;transition:transform .3s,border-color .3s,box-shadow .3s}
.c::before,.c::after{content:"";position:absolute;z-index:2;width:14px;height:14px;border:2px solid var(--cy);opacity:.5;pointer-events:none;transition:.3s}
.c::before{top:7px;left:7px;border-right:0;border-bottom:0;border-top-left-radius:8px}
.c::after{bottom:7px;right:7px;border-left:0;border-top:0;border-bottom-right-radius:8px}
.c:hover{transform:translateY(-5px);border-color:#F5A80099;box-shadow:0 14px 40px #000a,0 0 28px #F5A80030}
.c:hover::before,.c:hover::after{opacity:1;width:22px;height:22px}
.c img,.c i{width:100%;aspect-ratio:1;object-fit:cover;border-radius:12px;background:#151f30;display:block}
.c small{color:var(--mut)}.c .p{color:var(--y);font:800 18px 'Orbitron',sans-serif;letter-spacing:.04em}
.ph{position:relative}
.dots{position:absolute;left:0;right:0;bottom:8px;display:flex;gap:5px;justify-content:center;pointer-events:none}
.dots u{width:7px;height:7px;border-radius:50%;background:#ffffff55;text-decoration:none}.dots u.on{background:var(--y);box-shadow:0 0 8px var(--y)}

/* ===== Formularios y cuadros emergentes ===== */
input,select{width:100%;background:#070b12;color:#fff;border:1px solid #223249;border-radius:12px;padding:12px;margin:0 0 10px;font:inherit;transition:border-color .25s,box-shadow .25s}
input:focus,select:focus{outline:none;border-color:var(--cy);box-shadow:0 0 0 3px #00e5ff22,0 0 18px #00e5ff33}
.pw{position:relative}.pw input{padding-right:50px}
.pw button{position:absolute;right:8px;top:6px;width:36px;height:36px;border:0;border-radius:50%;background:none;color:var(--mut);cursor:pointer;display:grid;place-items:center}
.pw button:hover{color:var(--cy)}.pw .sl{display:none}.pw [aria-pressed=true] .sl{display:block}
dialog{background:none;color:#fff;border:0;padding:0;overflow:visible;width:min(460px,92vw)}
dialog[open]{animation:dlg .35s cubic-bezier(.2,1,.3,1)}
@keyframes dlg{from{opacity:0;transform:translateY(14px) scale(.97)}}
dialog::backdrop{background:#02040acc;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}
.box{position:relative;background:linear-gradient(165deg,#0f1827f5,#070b13f5);border:1px solid #F5A80066;border-radius:20px;padding:24px;box-shadow:0 0 50px #F5A80018,0 30px 80px #000c;max-height:calc(100vh - 80px);max-height:calc(100dvh - 80px);overflow:auto}
.box h3{padding-right:56px;text-transform:uppercase;font-size:18px}
.row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line)}
.msg{color:#ff8a8a;font-size:14px;min-height:20px}.msg.ok{color:#5CFFB1}
.new{text-align:center;color:var(--mut);margin:10px 0 0}
.legal{color:var(--mut);font-size:12.5px;text-align:center;margin:14px 0 0}.legal a{color:var(--cy)}

/* ===== Botón cerrar futurista (esquina superior derecha, dentro del cuadro) ===== */
.x{position:absolute;top:0;right:0;margin:0;z-index:2}
.x button{position:relative;width:54px;height:54px;padding:0;border:0;cursor:pointer;color:var(--y);overflow:hidden;display:grid;place-items:center;background:linear-gradient(135deg,#1c1c1c,#0b0b0b);border-radius:0 20px 0 20px;box-shadow:inset 0 0 0 1px #F5A800aa,0 0 16px #F5A80044;transition:box-shadow .3s,color .3s,background .3s}
.x button::before{content:"";position:absolute;left:0;right:0;top:-40%;height:40%;background:linear-gradient(transparent,#F5A80055,transparent);animation:xscan 2.6s linear infinite}
.x button::after{content:"";position:absolute;left:7px;bottom:7px;width:9px;height:9px;border-left:2px solid var(--y);border-bottom:2px solid var(--y);transition:.3s}
.x svg{position:relative;width:22px;height:22px;stroke-width:2.2;stroke-linecap:square;filter:drop-shadow(0 0 4px var(--y));transition:transform .45s cubic-bezier(.2,1.4,.3,1)}
.x button:hover,.x button:focus-visible{color:#fff;background:linear-gradient(135deg,#2a2208,#0b0b0b);box-shadow:inset 0 0 0 1px var(--y),0 0 26px #F5A800aa}
.x button:hover svg,.x button:focus-visible svg{transform:rotate(180deg) scale(1.15)}
.x button:hover::after{width:16px;height:16px}.x button:active{transform:scale(.94)}
dialog[open] .x button{animation:xin .55s cubic-bezier(.2,1.3,.3,1) backwards,xneon 2.6s ease-in-out .55s infinite}
@keyframes xin{from{opacity:0;transform:scale(.3) rotate(-120deg)}to{opacity:1;transform:none}}
@keyframes xneon{50%{box-shadow:inset 0 0 0 1px #F5A800,0 0 24px #F5A80088}}
@keyframes xscan{to{transform:translateY(420%)}}

/* ===== Aviso y pie ===== */
#toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,20px);background:#0c111bf2;color:var(--y);border:1px solid var(--y);box-shadow:0 0 24px var(--glow);font-weight:700;padding:10px 18px;border-radius:999px;opacity:0;pointer-events:none;transition:.25s;z-index:20}
#toast.show{opacity:1;transform:translate(-50%,0)}
footer{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;padding:28px 5vw;border-top:1px solid var(--line);color:var(--mut);font-size:14px}
footer nav{display:flex;flex-wrap:wrap;gap:8px 20px}footer a{color:#cbd6e4;text-decoration:none}footer a:hover{color:var(--y)}

/* ===== Páginas legales ===== */
.doc{max-width:780px;margin:0 auto;padding:40px 5vw 80px}
.doc h1{font-size:clamp(22px,4vw,32px);margin:18px 0 8px}.doc h2{font-size:17px;margin:28px 0 8px;color:var(--y)}
.doc p,.doc li{color:#c9d3e0}.doc a{color:var(--cy)}
.doc .draft{background:#2a2208;border:1px solid var(--y);color:#ffd36b;padding:12px 16px;border-radius:12px;font-size:14px}

@media(max-width:900px){header nav{display:none}}
@media(max-width:700px){.srch{order:3;flex-basis:100%;max-width:none}.hero{background:linear-gradient(#05070dcc,#05070dcc),#050a14 url(img/fondo.jpg) 70% center/cover}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}