/* ============ Carrito Fantasma — estilos ============ */
:root{
  --bg:#f5f5fb;
  --card:#ffffff;
  --ink:#15142b;
  --muted:#6b6a85;
  --line:#e7e6f3;
  --accent:#6d5efc;
  --accent-ink:#ffffff;
  --radius:18px;
  --shadow:0 10px 30px rgba(30,25,80,.09);
  --shadow-lg:0 24px 60px rgba(30,25,80,.20);
}
body[data-mode="all"]{ --accent:#6d5efc; }
body[data-mode="moda"]{ --accent:#ff4d8d; }
body[data-mode="comida"]{ --accent:#ff8a3d; }
body[data-mode="tech"]{ --accent:#2fa8ff; }
body[data-mode="absurdo"]{ --accent:#e8b64c; }

*{ box-sizing:border-box; }
[hidden]{ display:none !important; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  transition:background .4s ease;
}
button{ font:inherit; cursor:pointer; }
a{ color:inherit; text-decoration:none; }
.muted{ color:var(--muted); }
.tiny{ font-size:.8rem; }
h1,h2,h3{ line-height:1.15; margin:0 0 .4em; }

/* ---------- barra superior ---------- */
.topbar{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; gap:16px;
  padding:12px clamp(14px,3vw,32px);
  background:rgba(245,245,251,.82);
  backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid var(--line);
}
.brand{ display:flex; align-items:center; gap:9px; font-weight:800; font-size:1.1rem; white-space:nowrap; }
.brand-mark{ font-size:1.4rem; }
.brand-name em{ font-style:normal; color:var(--accent); transition:color .4s; }
.modes{ display:flex; gap:6px; overflow-x:auto; flex:1; scrollbar-width:none; }
.modes::-webkit-scrollbar{ display:none; }
.mode-btn{
  border:1px solid transparent; background:transparent; color:var(--muted);
  padding:8px 13px; border-radius:999px; font-weight:600; white-space:nowrap;
  display:flex; align-items:center; gap:6px; transition:.2s;
}
.mode-btn:hover{ background:#fff; color:var(--ink); }
.mode-btn.active{ background:var(--accent); color:var(--accent-ink); }
.top-actions{ display:flex; align-items:center; gap:10px; }
.pill{
  border:1px solid var(--line); background:#fff; color:var(--ink);
  padding:8px 13px; border-radius:999px; font-weight:600; white-space:nowrap;
}
.pill b{ color:var(--accent); }
.pill.lang{ font-weight:800; letter-spacing:.04em; min-width:46px; text-align:center; }
.cart-btn{
  position:relative; border:none; background:var(--ink); color:#fff;
  width:44px; height:44px; border-radius:999px; font-size:1.15rem;
}
.cart-btn.bump{ animation:bump .4s ease; }
@keyframes bump{ 0%{transform:scale(1)} 40%{transform:scale(1.22)} 100%{transform:scale(1)} }
.cart-count{
  position:absolute; top:-4px; right:-4px; min-width:20px; height:20px;
  background:var(--accent); color:#fff; font-size:.72rem; font-weight:800;
  border-radius:999px; display:grid; place-items:center; padding:0 5px;
  border:2px solid var(--bg);
}

/* ---------- layout ---------- */
.app{ padding:clamp(18px,3vw,34px) clamp(14px,3vw,32px) 80px; max-width:1240px; margin:0 auto; }
.page{ animation:fade .35s ease; }
@keyframes fade{ from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none} }

/* ---------- botones ---------- */
.primary{
  border:none; background:var(--accent); color:var(--accent-ink);
  padding:12px 20px; border-radius:12px; font-weight:700;
  transition:transform .15s, filter .2s;
}
.primary:hover{ filter:brightness(1.07); }
.primary:active{ transform:scale(.97); }
.primary.big{ width:100%; padding:15px; font-size:1.02rem; }
.primary:disabled{ opacity:.45; cursor:not-allowed; }
.ghost{ border:1px solid var(--line); background:#fff; padding:12px 20px; border-radius:12px; font-weight:700; }
.link{ border:none; background:none; color:var(--muted); text-decoration:underline; padding:8px; }
.link-back{ border:none; background:none; color:var(--muted); font-weight:600; padding:0 0 12px; }
.icon{ border:none; background:#f0effa; width:34px; height:34px; border-radius:999px; }
.row{ display:flex; gap:10px; margin-top:14px; }

/* ---------- hero ---------- */
.hero{
  background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 14%, #fff), #fff);
  border:1px solid var(--line); border-radius:28px; padding:clamp(28px,5vw,58px);
  box-shadow:var(--shadow); position:relative; overflow:hidden;
}
.hero::after{
  content:"🛒"; position:absolute; right:-10px; bottom:-30px; font-size:11rem; opacity:.08; transform:rotate(-12deg);
}
.hero h1{ font-size:clamp(2rem,5vw,3.4rem); letter-spacing:-.02em; }
.hero p{ max-width:52ch; color:var(--muted); font-size:1.08rem; }
.hero .row{ margin-top:22px; }
.saved-pill{
  display:inline-flex; gap:8px; align-items:center; margin-top:18px;
  background:#fff; border:1px solid var(--line); border-radius:999px; padding:8px 16px; font-weight:700;
}
.saved-pill b{ color:var(--accent); }

/* ---------- tarjetas de modo ---------- */
.section-title{ margin:44px 0 16px; font-size:1.5rem; }
.mode-grid{ display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }
.mode-card{
  text-align:left; border:1px solid var(--line); background:var(--card);
  border-radius:var(--radius); padding:22px; box-shadow:var(--shadow);
  transition:transform .2s, box-shadow .2s; position:relative; overflow:hidden;
}
.mode-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.mode-card .big-emoji{ font-size:2.6rem; display:block; margin-bottom:10px; }
.mode-card h3{ margin:0 0 4px; }
.mode-card p{ margin:0; color:var(--muted); font-size:.92rem; }
.mode-card .stripe{ position:absolute; inset:0 auto 0 0; width:5px; background:var(--m); }

/* ---------- features ---------- */
.features{ display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }
.feature{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:20px; }
.feature b{ display:block; margin-bottom:4px; }
.feature span{ color:var(--muted); font-size:.92rem; }

/* ---------- catálogo ---------- */
.catalog-head{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between; margin-bottom:8px; }
.catalog-head h1{ margin:0; font-size:clamp(1.6rem,3.4vw,2.3rem); }
.toolbar{ display:flex; gap:10px; flex-wrap:wrap; margin:16px 0 22px; }
.toolbar input, .toolbar select{
  border:1px solid var(--line); background:#fff; border-radius:12px; padding:11px 14px; font:inherit; color:var(--ink);
}
.toolbar input{ flex:1; min-width:180px; }
.flash{
  display:inline-flex; gap:8px; align-items:center; background:#fff2f8; color:#c0246b;
  border:1px solid #ffd6e8; border-radius:999px; padding:7px 14px; font-weight:700; font-size:.9rem;
}
.flash b{ font-variant-numeric:tabular-nums; }
body[data-mode="comida"] .flash{ background:#fff3e8; color:#b85a10; border-color:#ffdcbd; }
body[data-mode="tech"] .flash{ background:#eaf5ff; color:#1a6fb5; border-color:#cfe8ff; }
body[data-mode="absurdo"] .flash{ background:#fdf6e3; color:#9a7410; border-color:#f2e2b0; }

.grid{ display:grid; gap:18px; grid-template-columns:repeat(auto-fill,minmax(215px,1fr)); }
.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow); transition:transform .2s, box-shadow .2s; cursor:pointer;
  display:flex; flex-direction:column;
}
.card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-lg); }
.card-img{
  position:relative; aspect-ratio:4/3; display:grid; place-items:center;
  background:linear-gradient(135deg, color-mix(in srgb, var(--c) 22%, #fff), color-mix(in srgb, var(--c) 8%, #fff));
}
.card-img .emoji{ font-size:3.6rem; filter:drop-shadow(0 6px 10px rgba(0,0,0,.12)); }
.card-img .photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.badge{
  position:absolute; top:10px; left:10px; background:var(--c); color:#fff;
  font-size:.72rem; font-weight:800; padding:4px 9px; border-radius:999px; letter-spacing:.02em;
}
.card-body{ padding:14px; display:flex; flex-direction:column; gap:6px; flex:1; }
.card-body h3{ font-size:1rem; margin:0; }
.card-body .desc{ margin:0; color:var(--muted); font-size:.84rem; flex:1; }
.rate{ font-size:.85rem; color:#f0a500; font-weight:700; }
.rate span{ color:var(--muted); font-weight:500; }
.price-row{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:6px; }
.price{ font-weight:800; font-size:1.08rem; }
.price s{ color:var(--muted); font-weight:500; font-size:.82rem; margin-left:6px; }
.add{
  border:none; background:var(--accent); color:#fff; width:38px; height:38px; border-radius:11px;
  font-size:1.2rem; line-height:1; transition:transform .15s;
}
.add:hover{ transform:scale(1.08); }
.add:active{ transform:scale(.9); }
.results{ color:var(--muted); font-size:.9rem; }
.empty-grid{ grid-column:1/-1; text-align:center; padding:60px 20px; color:var(--muted); }
.empty-grid .big{ font-size:3rem; display:block; margin-bottom:10px; }

/* ---------- modal producto ---------- */
.modal{ position:fixed; inset:0; z-index:60; display:grid; place-items:center; padding:20px;
  background:rgba(20,18,45,.5); backdrop-filter:blur(4px); animation:fade .2s; }
.modal-card{
  background:#fff; border-radius:24px; max-width:760px; width:100%;
  box-shadow:var(--shadow-lg); display:grid; grid-template-columns:1fr 1fr; overflow:hidden;
  animation:pop .25s ease; max-height:92vh; overflow-y:auto;
}
@keyframes pop{ from{transform:scale(.94); opacity:0} to{transform:none; opacity:1} }
.modal-img{ background:linear-gradient(135deg, color-mix(in srgb, var(--c) 26%, #fff), color-mix(in srgb, var(--c) 8%, #fff));
  position:relative; display:grid; place-items:center; min-height:260px; font-size:7rem; overflow:hidden; }
.modal-img .photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.modal-info{ padding:28px; display:flex; flex-direction:column; gap:10px; }
.modal-info .price{ font-size:1.6rem; }
.modal-info .desc{ color:var(--muted); }
.modal-close{ position:absolute; }

/* ---------- carrito drawer ---------- */
.scrim{ position:fixed; inset:0; background:rgba(20,18,45,.45); opacity:0; visibility:hidden; transition:.3s; z-index:70; }
body.cart-open .scrim{ opacity:1; visibility:visible; }
.drawer{
  position:fixed; top:0; right:0; height:100%; width:min(420px,100%); background:#fff; z-index:80;
  transform:translateX(105%); transition:transform .35s cubic-bezier(.4,0,.2,1);
  display:flex; flex-direction:column; box-shadow:var(--shadow-lg);
}
body.cart-open .drawer{ transform:none; }
.drawer-head{ display:flex; align-items:center; justify-content:space-between; padding:20px; border-bottom:1px solid var(--line); }
.drawer-head h2{ margin:0; font-size:1.2rem; }
.ship{ padding:14px 20px; border-bottom:1px solid var(--line); }
.ship-text{ font-size:.86rem; font-weight:600; margin-bottom:7px; }
.ship-bar{ height:7px; background:#eef0f6; border-radius:999px; overflow:hidden; }
.ship-bar span{ display:block; height:100%; width:0; background:var(--accent); transition:width .35s; }
.drawer-body{ flex:1; overflow-y:auto; padding:8px 20px; }
.line{ display:flex; gap:12px; align-items:center; padding:14px 0; border-bottom:1px solid var(--line); }
.line-img{ width:54px; height:54px; border-radius:12px; display:grid; place-items:center; font-size:1.7rem; position:relative; overflow:hidden;
  background:linear-gradient(135deg, color-mix(in srgb, var(--c) 24%, #fff), color-mix(in srgb, var(--c) 8%, #fff)); }
.line-img .photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.line-info{ flex:1; display:flex; flex-direction:column; }
.line-info strong{ font-size:.92rem; }
.qty{ display:flex; align-items:center; gap:8px; }
.qty button{ width:26px; height:26px; border-radius:8px; border:1px solid var(--line); background:#fff; font-size:1rem; line-height:1; }
.qty span{ min-width:16px; text-align:center; font-weight:700; }
.rm{ border:none; background:none; color:var(--muted); font-size:1rem; }
.empty{ text-align:center; color:var(--muted); padding:60px 20px; }
.drawer-foot{ padding:20px; border-top:1px solid var(--line); }
.total-row{ display:flex; justify-content:space-between; align-items:baseline; font-size:1.05rem; margin-bottom:6px; }
.total-row b{ font-size:1.3rem; }
.drawer-foot .primary{ margin-top:12px; }

/* ---------- checkout ---------- */
.checkout{ max-width:640px; margin:0 auto; }
.checkout h1{ font-size:clamp(1.6rem,3.4vw,2.2rem); }
.steps-ind{ display:flex; gap:8px; margin:14px 0 22px; }
.steps-ind .dot{ height:6px; flex:1; border-radius:999px; background:var(--line); transition:.3s; }
.steps-ind .dot.on{ background:var(--accent); }
.panel{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:clamp(20px,3vw,30px); box-shadow:var(--shadow); }
.field{ margin-bottom:14px; display:flex; flex-direction:column; gap:6px; }
.field label{ font-weight:600; font-size:.9rem; }
.field input{ border:1px solid var(--line); border-radius:12px; padding:12px 14px; font:inherit; }
.radio{ display:flex; gap:10px; align-items:center; padding:13px; border:1px solid var(--line); border-radius:12px; margin-bottom:10px; cursor:pointer; font-weight:600; }
.radio:has(input:checked){ border-color:var(--accent); background:color-mix(in srgb, var(--accent) 7%, #fff); }
.review{ list-style:none; padding:0; margin:0 0 14px; }
.review li{ display:flex; justify-content:space-between; gap:10px; padding:9px 0; border-bottom:1px dashed var(--line); font-size:.94rem; }
.review b{ white-space:nowrap; }

/* ---------- confirmación ---------- */
.confirm{ max-width:560px; margin:0 auto; text-align:center; }
.tick{ font-size:4.6rem; animation:pop .5s ease; }
.order-box{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:24px; text-align:left; box-shadow:var(--shadow); margin:20px 0; }
.order-id{ font-family:ui-monospace,monospace; background:#f0effa; padding:3px 8px; border-radius:8px; font-size:.85rem; }

/* ---------- tracking ---------- */
.tracking{ max-width:560px; margin:0 auto; }
.track-list{ list-style:none; padding:0; margin:24px 0; }
.step{ display:flex; gap:14px; align-items:flex-start; padding-bottom:26px; position:relative; opacity:.5; transition:.3s; }
.step::before{ content:""; position:absolute; left:15px; top:32px; bottom:0; width:2px; background:var(--line); }
.step:last-child::before{ display:none; }
.step .dot2{ width:32px; height:32px; border-radius:999px; background:#fff; border:2px solid var(--line); display:grid; place-items:center; flex:none; z-index:1; }
.step.active{ opacity:1; }
.step.active .dot2{ border-color:var(--accent); background:var(--accent); color:#fff; animation:pulse 1.4s infinite; }
.step.done{ opacity:1; }
.step.done .dot2{ border-color:var(--accent); background:var(--accent); color:#fff; }
@keyframes pulse{ 0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 55%,transparent)} 70%{box-shadow:0 0 0 12px transparent} 100%{box-shadow:0 0 0 0 transparent} }
.step b{ display:block; }
.step small{ color:var(--muted); }
.track-note{ background:#f3f1ff; border:1px dashed var(--accent); border-radius:14px; padding:16px; text-align:center; font-weight:600; }

/* ---------- ahorro ---------- */
.savings{ max-width:760px; margin:0 auto; }
.stat-grid{ display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); margin:22px 0; }
.stat{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:24px; box-shadow:var(--shadow); }
.stat .n{ font-size:clamp(1.6rem,4vw,2.4rem); font-weight:800; letter-spacing:-.02em; }
.stat .n em{ font-style:normal; color:var(--accent); }
.stat .l{ color:var(--muted); font-size:.9rem; }
.manifesto{ background:var(--ink); color:#fff; border-radius:var(--radius); padding:28px; }
.manifesto li{ margin-bottom:8px; }

/* ---------- overlays varios ---------- */
.processing{ position:fixed; inset:0; z-index:90; display:grid; place-items:center; background:rgba(20,18,45,.6); backdrop-filter:blur(4px); }
.proc-card{ background:#fff; border-radius:20px; padding:34px 40px; text-align:center; box-shadow:var(--shadow-lg); }
.spinner{ width:44px; height:44px; margin:0 auto 16px; border:4px solid var(--line); border-top-color:var(--accent); border-radius:999px; animation:spin .8s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.toast{
  position:fixed; left:50%; bottom:28px; transform:translate(-50%,120%);
  background:var(--ink); color:#fff; padding:13px 22px; border-radius:999px; font-weight:600;
  z-index:100; transition:transform .35s cubic-bezier(.4,0,.2,1); box-shadow:var(--shadow-lg); max-width:90vw; text-align:center;
}
.toast.show{ transform:translate(-50%,0); }
.confetti{ position:fixed; inset:0; pointer-events:none; z-index:95; }

/* ---------- footer ---------- */
.site-footer{ border-top:1px solid var(--line); padding:34px clamp(14px,3vw,32px); text-align:center; color:var(--muted); font-size:.9rem; max-width:1240px; margin:0 auto; }
.site-footer p{ margin:0 0 8px; }

/* ---------- apoyo / donaciones ---------- */
.support{ max-width:720px; margin:0 auto; text-align:center; }
.support p{ max-width:56ch; margin-left:auto; margin-right:auto; }
.support .manifesto{ text-align:left; margin-top:26px; }
.support-grid{ display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); margin:26px 0 10px; }
.support-card{ display:flex; flex-direction:column; align-items:center; gap:6px; text-decoration:none; color:inherit;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:24px; box-shadow:var(--shadow);
  transition:transform .2s, box-shadow .2s; }
.support-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.support-card .big-emoji{ font-size:2.4rem; }

/* ---------- créditos ---------- */
.credits{ max-width:900px; margin:0 auto; }
.credits-list{ margin-top:20px; overflow-x:auto; }
.credits-table{ width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); font-size:.9rem; }
.credits-table th, .credits-table td{ padding:10px 12px; text-align:left; border-bottom:1px solid var(--line); vertical-align:middle; }
.credits-table th{ background:#f0effa; font-size:.8rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); }
.credits-table img{ width:52px; height:52px; object-fit:cover; border-radius:8px; display:block; }
.credits-table a{ color:var(--accent); text-decoration:underline; }

/* ---------- responsive ---------- */
@media (max-width:820px){
  .modal-card{ grid-template-columns:1fr; }
  .modal-img{ min-height:180px; font-size:5rem; }
  .brand-name{ display:none; }
}
@media (max-width:560px){
  .pill span{ display:none; }
  .pill:not(.lang)::after{ content:"💸"; }
  .modes{ order:3; flex-basis:100%; }
  .topbar{ flex-wrap:wrap; }
}

/* ---------- accesibilidad / motion ---------- */
:focus-visible{ outline:3px solid color-mix(in srgb,var(--accent) 60%,transparent); outline-offset:2px; border-radius:6px; }
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  html{ scroll-behavior:auto; }
}
@media (prefers-color-scheme:dark){
  :root{ --bg:#12111f; --card:#1c1b2e; --ink:#f2f1fb; --muted:#a3a1bd; --line:#2c2b44; --shadow:0 10px 30px rgba(0,0,0,.4); }
  .topbar{ background:rgba(18,17,31,.82); }
  .panel,.order-box,.stat,.modal-card,.drawer{ background:var(--card); }
  .toolbar input,.toolbar select,.field input,.qty button,.ghost,.icon,.pill{ background:#242338; color:var(--ink); }
  .icon{ background:#242338; }
  .manifesto{ background:#000; }
  .credits-table, .credits-table th{ background:var(--card); }
  .support-card{ background:var(--card); }
}