/* DomoChollos — Catppuccin + Bricolage Grotesque (display). Diseño: frontend-design skill.
   Signature: el precio-chollo (número protagonista en Bricolage 800 + ahorro en peach). */
@font-face{font-family:'Bricolage';src:url('/static/fonts/bricolage-600.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Bricolage';src:url('/static/fonts/bricolage-700.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Bricolage';src:url('/static/fonts/bricolage-800.woff2') format('woff2');font-weight:800;font-display:swap}

:root{--base:#1e1e2e;--mantle:#181825;--crust:#11111b;--surface:#313244;--surface2:#45475a;
 --text:#cdd6f4;--subtext:#a6adc8;--overlay:#6c7086;--peach:#fab387;--green:#a6e3a1;--red:#f38ba8;--mauve:#cba6f7;
 --shadow:0 10px 34px rgba(0,0,0,.38);--font-display:'Bricolage',system-ui,sans-serif}
:root[data-theme=light]{--base:#eff1f5;--mantle:#e6e9ef;--crust:#dce0e8;--surface:#ccd0da;--surface2:#bcc0cc;
 --text:#4c4f69;--subtext:#6c6f85;--overlay:#8c8fa1;--peach:#fe640b;--green:#40a02b;--red:#d20f39;--mauve:#8839ef;
 --shadow:0 10px 34px rgba(120,120,160,.20)}
@media(prefers-color-scheme:light){:root:not([data-theme=dark]){--base:#eff1f5;--mantle:#e6e9ef;--crust:#dce0e8;
 --surface:#ccd0da;--surface2:#bcc0cc;--text:#4c4f69;--subtext:#6c6f85;--overlay:#8c8fa1;--peach:#fe640b;
 --green:#40a02b;--red:#d20f39;--mauve:#8839ef}}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--base);color:var(--text);font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
 line-height:1.5;-webkit-font-smoothing:antialiased;
 background-image:radial-gradient(1100px 400px at 88% -8%, color-mix(in srgb,var(--peach) 9%,transparent), transparent)}
a{color:inherit}
.wrap{max-width:1140px;margin:0 auto;padding:0 20px}

/* Header */
header{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--mantle) 86%,transparent);
 backdrop-filter:blur(14px);border-bottom:1px solid var(--surface)}
.bar{display:flex;align-items:center;gap:18px;padding:14px 0}
.logo{font-family:var(--font-display);font-size:1.4rem;font-weight:800;letter-spacing:-.03em;display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--text)}
.logo b{color:var(--peach)}
.logo .dot{width:11px;height:11px;border-radius:3px;background:var(--peach);box-shadow:0 0 14px var(--peach)}
nav{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap}
nav a{color:var(--subtext);text-decoration:none;font-size:.85rem;font-weight:600;padding:7px 11px;border-radius:9px;transition:.15s}
nav a:hover{color:var(--text);background:var(--surface)}
.toggle{background:var(--surface);border:none;color:var(--text);width:38px;height:38px;border-radius:11px;cursor:pointer;font-size:1rem;transition:.15s}
.toggle:hover{background:var(--surface2)}

/* Hero header */
.hero-head{padding:38px 0 10px}
.hero-head .eyebrow{font-family:var(--font-display);color:var(--peach);font-weight:700;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase}
.hero-head h1{font-family:var(--font-display);font-size:clamp(1.9rem,4.4vw,2.9rem);font-weight:800;line-height:1.04;letter-spacing:-.035em;text-wrap:balance;margin-top:8px}
.hero-head p{color:var(--subtext);margin-top:10px;max-width:62ch}

/* Grid */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(285px,1fr));gap:20px;padding:22px 0 64px}

/* Card */
.card{background:var(--mantle);border:1px solid var(--surface);border-radius:20px;overflow:hidden;
 display:flex;flex-direction:column;transition:transform .2s cubic-bezier(.2,.7,.3,1),border-color .2s,box-shadow .2s;
 animation:rise .5s cubic-bezier(.2,.7,.3,1) both}
.grid .card:nth-child(1){animation-delay:.02s}.grid .card:nth-child(2){animation-delay:.06s}
.grid .card:nth-child(3){animation-delay:.10s}.grid .card:nth-child(4){animation-delay:.14s}
.grid .card:nth-child(5){animation-delay:.18s}.grid .card:nth-child(6){animation-delay:.22s}
.grid .card:nth-child(n+7){animation-delay:.26s}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.card:hover{transform:translateY(-5px);border-color:var(--peach);box-shadow:var(--shadow)}
.card.dim{opacity:.6}
.card.hero{grid-column:1/-1;flex-direction:row;background:
 linear-gradient(135deg,color-mix(in srgb,var(--peach) 8%,var(--mantle)),var(--base));animation:none}
.card.hero .thumb{width:44%;min-width:290px}
.card.hero h3{font-size:1.7rem}

/* Thumb + badges */
.thumb{position:relative;background:#fff;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;text-decoration:none}
.thumb img{width:100%;height:100%;object-fit:contain;padding:16px}
.pct{position:absolute;top:13px;left:13px;font-family:var(--font-display);background:var(--green);color:var(--crust);
 font-weight:800;font-size:1rem;letter-spacing:-.02em;padding:6px 12px;border-radius:12px;
 font-variant-numeric:tabular-nums;box-shadow:var(--shadow)}
.estado{position:absolute;top:13px;left:13px;font-family:var(--font-display);font-weight:700;font-size:.82rem;
 padding:6px 12px;border-radius:12px;background:var(--overlay);color:#fff;box-shadow:var(--shadow)}
.estado.fin{background:var(--peach);color:var(--crust)}
.minimo{position:absolute;bottom:13px;left:13px;background:color-mix(in srgb,var(--mauve) 92%,#000);color:#fff;
 font-weight:700;font-size:.72rem;padding:5px 10px;border-radius:999px;box-shadow:var(--shadow)}

/* Body */
.body{padding:17px 19px 19px;display:flex;flex-direction:column;gap:12px;flex:1}
.body h3{font-family:var(--font-display);font-size:1.06rem;font-weight:700;line-height:1.25;letter-spacing:-.015em;text-wrap:balance}
.body h3 a{text-decoration:none}
.specs{list-style:none;display:flex;flex-direction:column;gap:6px}
.specs li{color:var(--subtext);font-size:.85rem;padding-left:17px;position:relative}
.specs li::before{content:"";position:absolute;left:0;top:.5em;width:7px;height:7px;border-radius:2px;
 background:var(--mauve);box-shadow:0 0 8px color-mix(in srgb,var(--mauve) 60%,transparent)}

/* Foot + PRECIO (signature) */
.foot{margin-top:auto;display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap}
.prices{display:flex;flex-direction:column;line-height:1}
.was{color:var(--overlay);text-decoration:line-through;text-decoration-color:var(--red);font-size:.9rem;font-variant-numeric:tabular-nums}
.now{font-family:var(--font-display);color:var(--green);font-size:2rem;font-weight:800;letter-spacing:-.035em;
 font-variant-numeric:tabular-nums;margin-top:2px}
.now.sm{font-size:1.15rem;color:var(--subtext)}
.card.hero .now{font-size:2.7rem}
.btn{font-family:var(--font-display);background:var(--peach);color:#1e1e2e;text-decoration:none;font-weight:800;
 font-size:.9rem;letter-spacing:-.01em;padding:12px 17px;border-radius:13px;white-space:nowrap;border:none;cursor:pointer;
 transition:filter .15s,transform .15s;box-shadow:0 6px 18px color-mix(in srgb,var(--peach) 30%,transparent)}
.btn:hover{filter:brightness(1.07);transform:translateY(-2px)}
.btn.off{background:var(--surface2);color:var(--subtext);cursor:not-allowed;box-shadow:none}
.btn.big{font-size:1.02rem;padding:15px 24px;display:inline-block}

/* Ficha detalle */
.detalle{padding:26px 0 64px}
.volver{color:var(--subtext);text-decoration:none;font-size:.9rem;font-weight:600}
.volver:hover{color:var(--peach)}
.det{display:grid;grid-template-columns:1fr 1fr;gap:36px;margin-top:22px;align-items:start}
.det-img{position:relative;background:#fff;border-radius:20px;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center}
.det-img img{width:100%;height:100%;object-fit:contain;padding:22px}
.cat-tag{font-family:var(--font-display);color:var(--mauve);font-weight:700;font-size:.8rem;text-transform:uppercase;letter-spacing:.1em}
.det-body h1{font-family:var(--font-display);font-size:2rem;font-weight:800;letter-spacing:-.03em;text-wrap:balance;margin:7px 0 15px;line-height:1.1}
.specs.big li{font-size:.95rem}
.prices.big{flex-direction:row;align-items:baseline;gap:15px;margin:22px 0;flex-wrap:wrap}
.prices.big .now{font-size:3rem}
.prices.big .ahorro{font-family:var(--font-display);color:var(--peach);font-weight:700;font-size:1rem}

/* Footer */
footer{border-top:1px solid var(--surface);color:var(--subtext);font-size:.85rem;padding:28px 0;text-align:center;margin-top:24px}
footer b{font-family:var(--font-display);color:var(--peach)}

/* A11y + motion */
a:focus-visible,.btn:focus-visible,.toggle:focus-visible{outline:2px solid var(--peach);outline-offset:3px}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Responsive: MÓVIL primero (el menú no se apila; pasa a chips deslizables) */
@media(max-width:820px){
  .bar{flex-wrap:wrap;row-gap:11px}
  .logo{order:1}
  .toggle{order:2;margin-left:auto}
  nav{order:3;width:100%;margin-left:0;flex-wrap:nowrap;overflow-x:auto;gap:8px;padding-bottom:2px;
      scrollbar-width:none;-webkit-overflow-scrolling:touch;
      -webkit-mask-image:linear-gradient(90deg,#000 92%,transparent);mask-image:linear-gradient(90deg,#000 92%,transparent)}
  nav::-webkit-scrollbar{display:none}
  nav a{white-space:nowrap;flex:0 0 auto;background:var(--surface)}
  .hero-head{padding:24px 0 6px}
}
@media(max-width:760px){.det{grid-template-columns:1fr}}
@media(max-width:640px){.card.hero{flex-direction:column}.card.hero .thumb{width:100%}
  .card.hero h3{font-size:1.35rem}.card.hero .now{font-size:2.2rem}}