/* ==========================================================================
   ORDO — design system + componentes
   Tokens primero; los componentes solo consumen tokens.
   ========================================================================== */
:root{
  /* Paleta oficial */
  --c-navy:#101C2D;          /* Dark Navy — fondo principal oscuro */
  --c-navy-panel:#1A2332;    /* Navy Panel — superficies oscuras */
  --c-navy-raised:#232E45;   /* inputs/superficies internas en oscuro */
  --c-lime:#39FF14;          /* Lime Green — SOLO acciones primarias */
  --c-lime-soft:#C6F135;     /* Lime Soft — ahorro / acentos gráficos */
  --c-turquoise:#4ECDC4;     /* Turquoise — info secundaria, datos, foco */
  --c-warm-grey:#E8E8E8;     /* Warm Grey — fondos neutros */
  --c-white:#FFFFFF;
  --c-muted:#9CAABD;         /* Muted Blue Grey — texto secundario en oscuro */
  --c-offer:#FFB86B;         /* Warm Offer — promociones (solo con datos reales) */
  --c-border-blue:#344257;   /* Border Blue — divisores en oscuro */
  --c-saving-tint:#DDFBD7;   /* Saving Tint */
  --c-turq-tint:#D9F7F4;     /* Turquoise Tint */
  /* Derivados para contraste en superficies claras (AA sobre blanco y warm grey) */
  --c-ink:#101C2D;
  --c-ink-2:#46546A;
  --c-line-light:#DADDE2;
  --c-page-light:#F2F2F0;
  --c-danger:#C2412D;
  --c-danger-dark:#FF8A73;

  /* Tipografía */
  --font-display:'Montserrat',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  --fs-xs:.75rem; --fs-sm:.875rem; --fs-md:1rem; --fs-lg:1.125rem;
  --fs-xl:clamp(1.25rem,1.1rem + .6vw,1.5rem);
  --fs-2xl:clamp(1.6rem,1.3rem + 1.4vw,2.25rem);
  --fs-hero:clamp(2.35rem,1.6rem + 3.6vw,4.4rem);

  /* Espaciado (escala de 4/8) */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px;
  --s-7:32px; --s-8:48px; --s-9:64px; --s-10:96px;

  /* Radios y sombras */
  --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:28px; --r-pill:999px;
  --shadow-card:0 8px 24px -12px rgba(16,28,45,.22);
  --shadow-float:0 18px 40px -16px rgba(5,10,20,.55);

  /* Movimiento */
  --ease:cubic-bezier(.2,.7,.2,1); --t-fast:140ms; --t-med:240ms;

  --container:1240px;
  --header-h:68px;
  --gutter:max(var(--s-4), env(safe-area-inset-left,0px));
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 84px);}
body{
  margin:0; font-family:var(--font-body); font-size:var(--fs-md); line-height:1.5;
  color:var(--c-ink); background:var(--c-page-light); overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
body.has-cartbar{padding-bottom:calc(84px + env(safe-area-inset-bottom,0px));}
h1,h2,h3{font-family:var(--font-display); margin:0; text-wrap:balance; line-height:1.1;}
h1,h2{font-weight:800;} h3{font-weight:700;}
p{margin:0;}
a{color:inherit;}
img{max-width:100%; display:block;}
button,input,select{font:inherit; color:inherit;}
button{cursor:pointer;}
[hidden]{display:none !important;}
::selection{background:var(--c-lime-soft); color:var(--c-navy);}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
.container{max-width:var(--container); margin:0 auto; padding-inline:var(--gutter) max(var(--s-4), env(safe-area-inset-right,0px));}
@media (min-width:900px){ .container{padding-inline:var(--s-7);} }

/* Foco visible: turquesa en oscuro, navy en claro */
.theme-dark{--focus:var(--c-turquoise);}
.theme-light{--focus:var(--c-navy);}
:focus-visible{outline:3px solid var(--focus,var(--c-turquoise)); outline-offset:2px; border-radius:6px;}

.skip-link{
  position:absolute; left:var(--s-4); top:-60px; z-index:100; background:var(--c-lime); color:var(--c-navy);
  padding:var(--s-2) var(--s-4); border-radius:var(--r-sm); font-weight:700; text-decoration:none;
}
.skip-link:focus{top:var(--s-3);}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s-2);
  min-height:48px; padding:0 var(--s-6); border-radius:var(--r-md); border:1.5px solid transparent;
  font-family:var(--font-body); font-weight:700; font-size:var(--fs-md); text-decoration:none; white-space:nowrap;
  transition:background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), color var(--t-fast);
}
.btn:active{transform:scale(.98);}
.btn svg{flex:0 0 auto;}
.btn-primary{background:var(--c-lime); color:var(--c-navy);}
.btn-primary:hover{background:var(--c-lime-soft);}
.btn-primary[aria-disabled="true"]{background:var(--c-navy-raised); color:var(--c-muted); pointer-events:none;}
.btn-ghost-dark{background:transparent; color:var(--c-white); border-color:rgba(255,255,255,.28);}
.btn-ghost-dark:hover{border-color:var(--c-white); background:rgba(255,255,255,.06);}
.btn-ghost-light{background:var(--c-white); color:var(--c-ink); border-color:var(--c-line-light);}
.btn-ghost-light:hover{border-color:var(--c-ink);}
.btn-block{width:100%;}
.btn-sm{min-height:40px; padding:0 var(--s-4); font-size:var(--fs-sm); border-radius:var(--r-sm);}

/* ---------- Logo ---------- */
.brand{display:inline-flex; align-items:center; gap:var(--s-3); text-decoration:none; color:inherit;}
.brand-mark{width:40px; height:40px; flex:0 0 auto;}
.brand-word{font-family:var(--font-display); font-weight:800; font-size:1.7rem; letter-spacing:.01em; line-height:1;}
@media (min-width:900px){ .brand-mark{width:44px; height:44px;} .brand-word{font-size:2rem;} }
@media (max-width:380px){
  .site-header .container{gap:var(--s-2);}
  .brand{gap:var(--s-2);} .brand-mark{width:34px; height:34px;} .brand-word{font-size:1.4rem;}
  .lang-switch button{min-width:36px;}
}

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:40; background:var(--c-navy); color:var(--c-white);
  padding-top:env(safe-area-inset-top,0px); border-bottom:1px solid var(--c-border-blue);
}
.site-header .container{display:flex; align-items:center; gap:var(--s-4); min-height:var(--header-h);}
.site-header .brand{margin-right:auto;}
.main-nav{display:none; gap:var(--s-1);}
.main-nav a{
  text-decoration:none; color:var(--c-muted); font-weight:500; font-size:var(--fs-sm);
  padding:var(--s-2) var(--s-3); border-radius:var(--r-sm); transition:color var(--t-fast);
}
.main-nav a:hover{color:var(--c-white);}
@media (min-width:900px){ .main-nav{display:flex;} }

.lang-switch{
  display:inline-flex; padding:3px; border-radius:var(--r-pill); background:var(--c-navy-panel); border:1px solid var(--c-border-blue);
}
.lang-switch button{
  min-width:40px; min-height:34px; border:0; border-radius:var(--r-pill); background:transparent; color:var(--c-muted);
  font-weight:700; font-size:var(--fs-xs); letter-spacing:.06em;
}
.lang-switch button[aria-pressed="true"]{background:var(--c-white); color:var(--c-navy);}

.cart-btn{
  position:relative; display:inline-flex; align-items:center; gap:var(--s-2);
  min-height:44px; padding:0 var(--s-3); border-radius:var(--r-md);
  background:var(--c-navy-panel); border:1px solid var(--c-border-blue); color:var(--c-white); font-weight:700; font-size:var(--fs-sm);
  transition:border-color var(--t-fast);
}
.cart-btn:hover{border-color:var(--c-muted);}
.cart-btn .cart-btn-total{display:none; font-variant-numeric:tabular-nums;}
.cart-count{
  min-width:22px; height:22px; padding:0 6px; border-radius:var(--r-pill); background:var(--c-lime); color:var(--c-navy);
  display:inline-flex; align-items:center; justify-content:center; font-size:var(--fs-xs); font-weight:800;
}
.cart-count[data-zero="true"]{background:var(--c-navy-raised); color:var(--c-muted);}
.cart-btn.bump .cart-count{animation:bump .32s var(--ease);}
@keyframes bump{40%{transform:scale(1.3);}}
@media (min-width:600px){ .cart-btn .cart-btn-total{display:inline;} }

/* ---------- Hero ---------- */
.hero{
  position:relative; overflow:hidden; background:var(--c-navy); color:var(--c-white);
  padding:var(--s-8) 0 var(--s-9);
}
.hero::before{ /* forma geométrica de marca, muy contenida */
  content:""; position:absolute; width:620px; height:620px; right:-180px; top:-220px; border-radius:50%;
  border:70px solid rgba(78,205,196,.07); pointer-events:none;
}
.hero .container{position:relative; display:grid; gap:var(--s-8); align-items:center;}
@media (min-width:980px){
  .hero{padding:var(--s-10) 0;}
  .hero .container{grid-template-columns:1.1fr .9fr; gap:var(--s-9);}
}
.eyebrow{
  display:inline-flex; align-items:center; gap:var(--s-2); font-size:var(--fs-xs); font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--c-turquoise); margin-bottom:var(--s-5);
}
.eyebrow::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--c-turquoise);}
.hero h1{font-size:var(--fs-hero); letter-spacing:-.02em; line-height:1.02;}
.hero h1 .hl{color:var(--c-lime-soft); display:block;}
.hero-lead{margin-top:var(--s-5); font-size:clamp(1.02rem,.95rem + .35vw,1.2rem); color:#C9D2DF; max-width:34em;}
.hero-ctas{display:flex; flex-wrap:wrap; gap:var(--s-3); margin-top:var(--s-7);}
.hero-stats{display:flex; flex-wrap:wrap; gap:var(--s-6) var(--s-7); margin-top:var(--s-8); padding-top:var(--s-6); border-top:1px solid var(--c-border-blue);}
.stat dt{font-size:var(--fs-xs); color:var(--c-muted); order:2;}
.stat{display:flex; flex-direction:column;}
.stat dd{margin:0; font-family:var(--font-display); font-weight:800; font-size:var(--fs-xl); color:var(--c-white);}
@media (max-width:599px){ .hero-ctas .btn{flex:1 1 100%;} }

/* Panel de comparación real (hero) */
.compare-panel{
  background:var(--c-navy-panel); border:1px solid var(--c-border-blue); border-radius:var(--r-xl);
  padding:var(--s-6); box-shadow:var(--shadow-float);
}
.compare-panel h2{font-size:var(--fs-lg); font-weight:700;}
.compare-panel .panel-sub{color:var(--c-muted); font-size:var(--fs-sm); margin-top:var(--s-1);}
.panel-list{list-style:none; margin:var(--s-5) 0 0; padding:0; display:grid; gap:var(--s-2);}
.panel-row{
  display:grid; grid-template-columns:56px 1fr auto; gap:var(--s-3); align-items:center;
  padding:var(--s-3); border-radius:var(--r-md); background:var(--c-navy-raised); border:1px solid transparent;
}
.panel-row.is-best{border-color:rgba(198,241,53,.55);}
.panel-row img{width:56px; height:56px; object-fit:contain; background:var(--c-white); border-radius:var(--r-sm); padding:4px;}
.panel-row .pname{font-size:var(--fs-sm); font-weight:500; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.panel-row .pmeta{font-size:var(--fs-xs); color:var(--c-muted); margin-top:2px;}
.panel-row .pprice{text-align:right; font-family:var(--font-display); font-weight:800; font-size:var(--fs-lg); font-variant-numeric:tabular-nums; white-space:nowrap;}
.panel-row .pdiff{display:block; font-family:var(--font-body); font-weight:500; font-size:var(--fs-xs); color:var(--c-muted);}
.panel-row .pbest{display:inline-flex; align-items:center; gap:4px; font-family:var(--font-body); font-size:var(--fs-xs); font-weight:700; color:var(--c-lime-soft);}
.panel-foot{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--s-3); margin-top:var(--s-5);}
.panel-foot .source{font-size:var(--fs-xs); color:var(--c-muted);}
.link-turq{background:none; border:0; padding:var(--s-2) 0; color:var(--c-turquoise); font-weight:700; font-size:var(--fs-sm); text-decoration:underline; text-underline-offset:3px;}
.panel-skeleton{height:80px; border-radius:var(--r-md); background:var(--c-navy-raised);}

/* ---------- Catálogo (sección clara) ---------- */
.catalog{padding:var(--s-7) 0 var(--s-9); background:var(--c-page-light);}
.section-head{display:flex; flex-wrap:wrap; align-items:end; justify-content:space-between; gap:var(--s-3); margin-bottom:var(--s-5);}
.section-head h2{font-size:var(--fs-2xl); letter-spacing:-.01em;}
.section-head p{color:var(--c-ink-2); font-size:var(--fs-sm); max-width:46em;}

.toolbar{
  position:sticky; top:calc(var(--header-h) + env(safe-area-inset-top,0px)); z-index:30;
  margin:0 calc(-1 * var(--s-2)); padding:var(--s-3) var(--s-2);
  background:color-mix(in srgb, var(--c-page-light) 92%, transparent);
  backdrop-filter:saturate(1.4) blur(10px); -webkit-backdrop-filter:saturate(1.4) blur(10px);
}
.toolbar-inner{display:grid; grid-template-columns:1fr 1fr; gap:var(--s-2);}
.search{
  grid-column:1 / -1; position:relative; display:flex; align-items:center;
  background:var(--c-white); border:1.5px solid var(--c-line-light); border-radius:var(--r-md);
  box-shadow:var(--shadow-card); transition:border-color var(--t-fast), box-shadow var(--t-fast);
}
.search:focus-within{border-color:var(--c-navy); box-shadow:0 0 0 4px rgba(78,205,196,.35);}
.search > svg{position:absolute; left:16px; color:var(--c-ink-2); pointer-events:none;}
.search input{
  flex:1; min-width:0; height:54px; padding:0 48px 0 50px; border:0; background:transparent; font-size:1.0625rem; outline:none;
}
.search input::placeholder{color:#6B788B;}
.search input::-webkit-search-cancel-button{display:none;}
.search-clear{
  position:absolute; right:6px; width:42px; height:42px; border:0; border-radius:var(--r-sm); background:transparent; color:var(--c-ink-2);
  display:flex; align-items:center; justify-content:center;
}
.search-clear:hover{background:var(--c-warm-grey);}
.field{position:relative;}
.field label{position:absolute; left:14px; top:7px; font-size:.68rem; font-weight:600; color:var(--c-ink-2); pointer-events:none; letter-spacing:.02em;}
.field select{
  width:100%; height:52px; padding:16px 36px 0 13px; appearance:none; -webkit-appearance:none;
  background:var(--c-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23101C2D' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 13px center;
  border:1.5px solid var(--c-line-light); border-radius:var(--r-md); font-size:var(--fs-sm); font-weight:600; color:var(--c-ink);
  text-overflow:ellipsis;
}
.field select:hover{border-color:#B6BCC6;}
@media (min-width:900px){
  .toolbar-inner{grid-template-columns:minmax(0,1fr) 240px 220px;}
  .search{grid-column:auto;}
}

.chain-bar{display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-2) var(--s-3); margin:var(--s-4) 0 var(--s-2); font-size:var(--fs-sm); color:var(--c-ink-2);}
.chain-bar .label{font-weight:600; color:var(--c-ink);}
.chip{
  display:inline-flex; align-items:center; gap:6px; min-height:32px; padding:0 var(--s-3); border-radius:var(--r-pill);
  font-size:var(--fs-xs); font-weight:700; border:1.5px solid var(--c-line-light); background:var(--c-white); color:var(--c-ink);
}
button.chip:hover{border-color:var(--c-ink);}
.chip[aria-pressed="true"], .chip.is-active{background:var(--c-navy); color:var(--c-white); border-color:var(--c-navy);}
.chip .dot{width:8px; height:8px; border-radius:50%; background:var(--c-turquoise);}
.chip-radar{background:transparent; border-style:dashed; color:var(--c-ink-2); font-weight:600;}
.radar{display:inline-flex; flex-wrap:wrap; align-items:center; gap:var(--s-2);}

.insight{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-2) var(--s-5); margin:var(--s-3) 0 0; padding:var(--s-3) var(--s-4);
  background:var(--c-turq-tint); border:1px solid #B5ECE7; border-radius:var(--r-md); font-size:var(--fs-sm); color:var(--c-ink);
}
.insight svg{color:#1F7F78;}
.insight strong{font-family:var(--font-display); font-weight:800;}

.results-meta{display:flex; align-items:center; justify-content:space-between; gap:var(--s-3); margin:var(--s-4) 0 var(--s-3); font-size:var(--fs-sm); color:var(--c-ink-2);}
.results-meta strong{color:var(--c-ink);}

/* ---------- Grid y tarjeta de producto ---------- */
.grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s-3); list-style:none; margin:0; padding:0;}
@media (min-width:640px){ .grid{grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s-4);} }
@media (min-width:1000px){ .grid{grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s-5);} }
@media (min-width:1280px){ .grid{grid-template-columns:repeat(5,minmax(0,1fr));} }

.card{
  position:relative; display:flex; flex-direction:column; min-width:0; height:100%;
  background:var(--c-white); border:1px solid var(--c-line-light); border-radius:var(--r-lg); padding:var(--s-3);
  transition:box-shadow var(--t-med) var(--ease), border-color var(--t-med), transform var(--t-med) var(--ease);
}
.card:hover{box-shadow:var(--shadow-card); border-color:#C9CED6;}
.card.is-in-cart{border-color:var(--c-navy);}
.thumb{position:relative; aspect-ratio:1/1; border-radius:var(--r-md); background:var(--c-white); display:flex; align-items:center; justify-content:center; overflow:hidden;}
.thumb img{width:92%; height:92%; object-fit:contain; transition:transform var(--t-med) var(--ease);}
.card:hover .thumb img{transform:scale(1.03);}
.thumb .img-fallback{color:#B6BCC6;}
.badge-best{
  position:absolute; left:6px; top:6px; display:inline-flex; align-items:center; gap:4px; padding:4px 8px; border-radius:var(--r-pill);
  background:var(--c-saving-tint); color:var(--c-navy); font-size:.6875rem; font-weight:700; line-height:1.2; border:1px solid #B9EFAE;
}
.badge-best svg{color:#1D8A0C;}
.card-body{display:flex; flex-direction:column; gap:6px; flex:1; padding:var(--s-3) var(--s-1) 0;}
.card-tags{display:flex; flex-wrap:wrap; gap:4px 8px; align-items:center; font-size:.6875rem; color:var(--c-ink-2); font-weight:600; letter-spacing:.03em; text-transform:uppercase;}
.card-tags .sep{width:3px; height:3px; border-radius:50%; background:#A4ACB8;}
.card-name{font-family:var(--font-body); font-size:var(--fs-sm); font-weight:600; line-height:1.32; color:var(--c-ink);
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;}
.card-meta{display:flex; flex-wrap:wrap; gap:6px; margin-top:2px;}
.pill{display:inline-flex; align-items:center; gap:5px; padding:3px 8px; border-radius:var(--r-pill); font-size:.6875rem; font-weight:600; line-height:1.3;}
.pill-store{background:var(--c-navy); color:var(--c-white);}
.pill-store .dot{width:6px; height:6px; border-radius:50%; background:var(--c-turquoise);}
.pill-size{background:var(--c-warm-grey); color:var(--c-ink);}
.price-row{margin-top:auto; padding-top:var(--s-2); display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 8px;}
.price{font-family:var(--font-display); font-weight:800; font-size:clamp(1.3rem,1.15rem + .5vw,1.55rem); letter-spacing:-.01em; font-variant-numeric:tabular-nums; color:var(--c-ink); line-height:1.1;}
.unit-price{font-size:var(--fs-xs); color:var(--c-ink-2); font-variant-numeric:tabular-nums;}
.diff{font-size:var(--fs-xs); color:var(--c-ink-2);}

/* Comparación multi-cadena (se activa solo si los datos tienen ofertas de varias cadenas) */
.chain-compare{list-style:none; margin:var(--s-2) 0 0; padding:var(--s-2); border-radius:var(--r-sm); background:var(--c-turq-tint); display:grid; gap:2px;}
.chain-compare li{display:flex; justify-content:space-between; gap:var(--s-2); font-size:var(--fs-xs); font-variant-numeric:tabular-nums;}
.chain-compare li.is-best{font-weight:700;}

.add-btn{
  margin-top:var(--s-3); width:100%; min-height:46px; border-radius:var(--r-md); border:1.5px solid var(--c-lime);
  background:var(--c-lime); color:var(--c-navy); font-weight:700; font-size:var(--fs-sm);
  display:inline-flex; align-items:center; justify-content:center; gap:6px; transition:background-color var(--t-fast), transform var(--t-fast);
}
.add-btn:hover{background:var(--c-lime-soft); border-color:var(--c-lime-soft);}
.add-btn:active{transform:scale(.98);}
.stepper{
  margin-top:var(--s-3); display:grid; grid-template-columns:46px 1fr 46px; align-items:center; min-height:46px;
  border-radius:var(--r-md); background:var(--c-navy); color:var(--c-white); overflow:hidden;
}
.stepper button{height:46px; border:0; background:transparent; color:var(--c-white); display:flex; align-items:center; justify-content:center;}
.stepper button:hover{background:rgba(255,255,255,.08);}
.stepper button:focus-visible{outline-color:var(--c-turquoise); outline-offset:-3px;}
.stepper output{text-align:center; font-weight:700; font-size:var(--fs-sm); font-variant-numeric:tabular-nums;}

@media (max-width:420px){
  .card{padding:var(--s-2); border-radius:var(--r-md);}
  .card-body{padding:var(--s-2) 2px 0;}
  .card-tags{font-size:.625rem;}
}

/* Skeleton */
.skeleton .thumb, .skeleton .sk{background:linear-gradient(90deg,#EEF0F2 0%,#F7F8F9 50%,#EEF0F2 100%); background-size:200% 100%; animation:shimmer 1.2s linear infinite;}
.skeleton .sk{height:12px; border-radius:6px;}
.skeleton .sk.w60{width:60%;} .skeleton .sk.w80{width:80%;} .skeleton .sk.w40{width:40%; height:22px;} .skeleton .sk.btn{height:46px; border-radius:var(--r-md); margin-top:var(--s-3);}
@keyframes shimmer{to{background-position:-200% 0;}}

/* Estados */
.state{
  text-align:center; padding:var(--s-8) var(--s-5); background:var(--c-white); border:1px dashed #C3C9D2; border-radius:var(--r-lg);
  display:flex; flex-direction:column; align-items:center; gap:var(--s-3);
}
.state .state-icon{width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--c-turq-tint); color:#1F7F78;}
.state.is-error .state-icon{background:#FDE3DC; color:var(--c-danger);}
.state h3{font-size:var(--fs-lg);}
.state p{color:var(--c-ink-2); font-size:var(--fs-sm); max-width:32em;}

/* ---------- Cómo funciona ---------- */
.how{background:var(--c-navy); color:var(--c-white); padding:var(--s-9) 0;}
.how h2{font-size:var(--fs-2xl);}
.how .lead{color:var(--c-muted); margin-top:var(--s-3); max-width:40em;}
.steps{list-style:none; padding:0; margin:var(--s-7) 0 0; display:grid; gap:var(--s-4); counter-reset:step;}
@media (min-width:800px){ .steps{grid-template-columns:repeat(3,1fr);} }
.step{background:var(--c-navy-panel); border:1px solid var(--c-border-blue); border-radius:var(--r-lg); padding:var(--s-6); counter-increment:step;}
.step::before{
  content:counter(step); display:flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:50%;
  background:var(--c-navy-raised); color:var(--c-turquoise); font-family:var(--font-display); font-weight:800; margin-bottom:var(--s-4);
}
.step:last-child::before{background:var(--c-lime); color:var(--c-navy);}
.step h3{font-size:var(--fs-lg);}
.step p{color:var(--c-muted); font-size:var(--fs-sm); margin-top:var(--s-2);}

/* ---------- Footer ---------- */
.site-footer{background:#0B1522; color:var(--c-muted); padding:var(--s-8) 0 calc(var(--s-8) + env(safe-area-inset-bottom,0px)); font-size:var(--fs-sm); border-top:1px solid var(--c-border-blue);}
.site-footer .container{display:grid; gap:var(--s-6);}
@media (min-width:800px){ .site-footer .container{grid-template-columns:1fr 1.4fr;} }
.site-footer .brand{color:var(--c-white);}
.site-footer .brand-word{font-size:1.5rem;}
.site-footer .brand-mark{width:34px; height:34px;}
.footer-claim{margin-top:var(--s-3); color:#C9D2DF;}
.legal p + p{margin-top:var(--s-2);}
.legal strong{color:var(--c-white); font-weight:600;}

/* ---------- Barra de cesta (móvil) ---------- */
.cartbar{
  position:fixed; z-index:45; left:max(var(--s-3), env(safe-area-inset-left,0px)); right:max(var(--s-3), env(safe-area-inset-right,0px));
  bottom:max(var(--s-3), env(safe-area-inset-bottom,0px));
  display:flex; align-items:center; gap:var(--s-3); min-height:60px; padding:var(--s-2) var(--s-2) var(--s-2) var(--s-4);
  background:var(--c-navy); color:var(--c-white); border:1px solid var(--c-border-blue); border-radius:var(--r-lg); box-shadow:var(--shadow-float);
  animation:rise var(--t-med) var(--ease);
}
.cartbar .cb-info{flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.2;}
.cartbar .cb-count{font-size:var(--fs-xs); color:var(--c-muted);}
.cartbar .cb-total{font-family:var(--font-display); font-weight:800; font-size:var(--fs-lg); font-variant-numeric:tabular-nums;}
.cartbar .btn{min-height:44px;}
@keyframes rise{from{transform:translateY(16px); opacity:0;}}
@media (min-width:900px){ .cartbar{display:none !important;} body.has-cartbar{padding-bottom:0;} }

/* ---------- Drawer de cesta ---------- */
.drawer-backdrop{position:fixed; inset:0; z-index:60; background:rgba(5,10,20,.6); opacity:0; transition:opacity var(--t-med) var(--ease);}
.drawer-backdrop.open{opacity:1;}
.drawer{
  position:fixed; z-index:61; left:0; right:0; bottom:0; max-height:92dvh; display:flex; flex-direction:column;
  background:var(--c-navy-panel); color:var(--c-white); border-radius:var(--r-xl) var(--r-xl) 0 0; border:1px solid var(--c-border-blue);
  transform:translateY(100%); visibility:hidden;
  transition:transform var(--t-med) var(--ease), visibility 0s linear var(--t-med);
}
.drawer.open{transform:none; visibility:visible; transition-delay:0s;}
@media (min-width:900px){
  .drawer{left:auto; top:0; width:440px; max-height:none; border-radius:var(--r-xl) 0 0 var(--r-xl); transform:translateX(100%);}
}
.drawer-head{display:flex; align-items:center; justify-content:space-between; gap:var(--s-3); padding:var(--s-5) var(--s-5) var(--s-3); padding-top:calc(var(--s-5) + 0px);}
.drawer-head h2{font-size:var(--fs-xl);}
.drawer-head .count{font-size:var(--fs-sm); color:var(--c-muted); font-family:var(--font-body); font-weight:500; margin-left:var(--s-2);}
.icon-btn{width:44px; height:44px; border-radius:var(--r-md); border:1px solid var(--c-border-blue); background:transparent; color:var(--c-white); display:flex; align-items:center; justify-content:center;}
.icon-btn:hover{background:var(--c-navy-raised);}
.drawer-grip{width:44px; height:5px; border-radius:3px; background:var(--c-border-blue); margin:10px auto 0;}
@media (min-width:900px){ .drawer-grip{display:none;} }
.drawer-body{flex:1; overflow-y:auto; padding:0 var(--s-5); overscroll-behavior:contain;}
.cart-lines{list-style:none; margin:0; padding:0;}
.line{display:grid; grid-template-columns:56px 1fr; gap:var(--s-3); padding:var(--s-4) 0; border-bottom:1px solid var(--c-border-blue);}
.line img{width:56px; height:56px; border-radius:var(--r-sm); background:var(--c-white); object-fit:contain; padding:3px;}
.line-name{font-size:var(--fs-sm); font-weight:600; line-height:1.3;}
.line-sub{font-size:var(--fs-xs); color:var(--c-muted); margin-top:2px; font-variant-numeric:tabular-nums;}
.line-controls{display:flex; align-items:center; justify-content:space-between; gap:var(--s-2); margin-top:var(--s-2);}
.qty{display:inline-flex; align-items:center; border:1px solid var(--c-border-blue); border-radius:var(--r-sm); background:var(--c-navy-raised);}
.qty button{width:40px; height:40px; border:0; background:transparent; color:var(--c-white); display:flex; align-items:center; justify-content:center; border-radius:var(--r-sm);}
.qty button:hover{background:rgba(255,255,255,.06);}
.qty span{min-width:28px; text-align:center; font-weight:700; font-variant-numeric:tabular-nums;}
.line-total{font-family:var(--font-display); font-weight:800; font-variant-numeric:tabular-nums;}
.remove-btn{background:none; border:0; color:var(--c-danger-dark); font-size:var(--fs-xs); font-weight:600; padding:var(--s-2) 0; text-decoration:underline; text-underline-offset:3px;}
.cart-empty{text-align:center; padding:var(--s-8) var(--s-3); color:var(--c-muted); display:flex; flex-direction:column; align-items:center; gap:var(--s-3);}
.cart-empty .state-icon{width:56px; height:56px; border-radius:50%; background:var(--c-navy-raised); color:var(--c-turquoise); display:flex; align-items:center; justify-content:center;}
.cart-empty h3{color:var(--c-white); font-size:var(--fs-lg);}
.drawer-foot{padding:var(--s-4) var(--s-5) calc(var(--s-5) + env(safe-area-inset-bottom,0px)); border-top:1px solid var(--c-border-blue); background:var(--c-navy-panel);}
.summary{display:flex; align-items:baseline; justify-content:space-between; gap:var(--s-3); margin-bottom:var(--s-2);}
.summary .label{font-weight:600;}
.summary .amount{font-family:var(--font-display); font-weight:800; font-size:clamp(1.6rem,1.4rem + 1vw,2rem); font-variant-numeric:tabular-nums; color:var(--c-white);}
.by-store{list-style:none; margin:0 0 var(--s-3); padding:0; font-size:var(--fs-xs); color:var(--c-muted);}
.by-store li{display:flex; justify-content:space-between;}
.drawer-actions{display:grid; gap:var(--s-2); margin-top:var(--s-3);}
.guide-note{
  display:flex; gap:var(--s-2); margin-top:var(--s-3); padding:var(--s-3); border-radius:var(--r-md); background:rgba(78,205,196,.1);
  font-size:var(--fs-xs); color:#C9D2DF; line-height:1.5;
}
.guide-note svg{flex:0 0 auto; color:var(--c-turquoise); margin-top:1px;}
.copy-box{width:100%; min-height:110px; margin-top:var(--s-2); border-radius:var(--r-sm); border:1px solid var(--c-border-blue); background:var(--c-navy-raised); color:var(--c-white); font-size:var(--fs-xs); padding:var(--s-2);}

/* ---------- Toast ---------- */
.toast{
  position:fixed; z-index:80; left:50%; bottom:calc(96px + env(safe-area-inset-bottom,0px)); transform:translate(-50%,12px);
  background:var(--c-white); color:var(--c-navy); padding:var(--s-3) var(--s-5); border-radius:var(--r-pill); font-weight:600; font-size:var(--fs-sm);
  box-shadow:var(--shadow-float); opacity:0; pointer-events:none; transition:opacity var(--t-med), transform var(--t-med) var(--ease); max-width:calc(100vw - 32px);
  display:flex; align-items:center; gap:var(--s-2);
}
.toast svg{color:#1D8A0C;}
.toast.show{opacity:1; transform:translate(-50%,0);}
@media (min-width:900px){ .toast{bottom:var(--s-7);} }

body.drawer-open{overflow:hidden;}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important;}
}