/* ==========================================================================
   Silros — Multimarca
   Dirección visual: minimalismo claro, tipografía grande, mucho aire.
   El bordó del logo (#610212) queda como acento de marca, no como fondo.
   ========================================================================== */

:root{
  /* Marca */
  --wine:#610212;
  --wine-dk:#47010D;
  --wine-lt:#8A1C2C;
  --wine-06:rgba(97,2,18,.06);
  --wine-14:rgba(97,2,18,.14);

  /* Base clara */
  --bg:#F4F4F5;
  --paper:#FFFFFF;
  --mist:#EBEBED;
  --ink:#18181B;
  --ink-2:#3F3F46;
  --ink-soft:#71717A;
  --ink-mute:#A1A1AA;
  --line:#E4E4E7;
  --line-2:#D4D4D8;

  /* Estado */
  --ok:#15803D;
  --danger:#B91C1C;
  --wa:#25D366;

  /* Tipografía */
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif; /* solo el logotipo */

  /* Escala */
  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem;
  --sp-5:1.5rem; --sp-6:2rem; --sp-7:3.5rem; --sp-8:6rem;
  --r-sm:10px; --r-md:16px; --r-lg:24px; --r-xl:32px; --r-full:999px;
  --shadow-xs:0 1px 2px rgba(24,24,27,.04);
  --shadow-sm:0 2px 8px rgba(24,24,27,.06);
  --shadow-md:0 8px 30px rgba(24,24,27,.08);
  --shadow-lg:0 24px 60px rgba(24,24,27,.14);
  --ease:cubic-bezier(.32,.72,0,1);
  --wrap:1240px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; letter-spacing:-.011em;
}
img,svg{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit}
p{margin:0}

h1,h2,h3,h4{margin:0; font-weight:700; letter-spacing:-.035em; line-height:1.04;
  text-wrap:balance}
h1{font-size:clamp(2.7rem,6.2vw,4.6rem); font-weight:800}
h2{font-size:clamp(2rem,4vw,3.1rem); font-weight:800}
h3{font-size:1.15rem; letter-spacing:-.02em; line-height:1.3}

:focus-visible{outline:2px solid var(--ink); outline-offset:3px; border-radius:4px}

.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--sp-5)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;
  padding:.75rem 1.25rem;z-index:200}
.skip-link:focus{left:0}

/* ---------- Barra de anuncio ---------- */
.topbar{background:var(--ink); color:#fff; font-size:.75rem; letter-spacing:.02em;
  text-align:center; padding:.7rem var(--sp-4); font-weight:450}
.topbar strong{font-weight:600}

/* ---------- Header flotante ---------- */
.header{position:sticky; top:0; z-index:60; background:transparent;
  padding:var(--sp-4) 0}
.header__inner{display:flex; align-items:center; gap:var(--sp-4);
  max-width:var(--wrap); margin-inline:auto; padding:.6rem .7rem .6rem 1.1rem;
  width:calc(100% - 2 * var(--sp-5));
  background:rgba(255,255,255,.82); backdrop-filter:saturate(180%) blur(16px);
  border:1px solid rgba(255,255,255,.9); border-radius:var(--r-full);
  box-shadow:var(--shadow-sm)}

.brand{display:flex; align-items:center; gap:.65rem; margin-right:auto}
.brand img{width:38px; height:38px; border-radius:var(--r-full)}
.brand__name{font-family:var(--serif); font-size:1.32rem; letter-spacing:.15em;
  line-height:1; font-weight:600}
.brand__tag{display:block; font-size:.55rem; letter-spacing:.26em;
  text-transform:uppercase; color:var(--ink-mute); margin-top:.25rem; font-weight:500}

.nav{display:flex; gap:.2rem; background:var(--bg); padding:.25rem;
  border-radius:var(--r-full)}
.nav a{font-size:.875rem; font-weight:500; color:var(--ink-soft);
  padding:.5rem 1.05rem; border-radius:var(--r-full);
  transition:color .2s var(--ease), background .2s var(--ease)}
.nav a:hover{color:var(--ink)}
.nav a[aria-current="page"]{background:var(--paper); color:var(--ink);
  box-shadow:var(--shadow-xs)}

.header__actions{display:flex; align-items:center; gap:.35rem}
.icon-btn{display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; background:var(--bg); border:none;
  border-radius:var(--r-full); cursor:pointer;
  transition:background .2s var(--ease), transform .2s var(--ease)}
.icon-btn:hover{background:var(--mist)}
.icon-btn:active{transform:scale(.94)}
.cart-btn{position:relative}
.cart-btn__count{position:absolute; top:-2px; right:-2px; min-width:20px; height:20px;
  padding:0 5px; border-radius:var(--r-full); background:var(--wine); color:#fff;
  font-size:.66rem; font-weight:600; display:grid; place-items:center; line-height:1;
  border:2px solid var(--paper)}
.cart-btn__count[hidden]{display:none}
.burger{display:none}

/* ---------- Botones ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.95rem 1.7rem; border-radius:var(--r-full); border:1px solid transparent;
  font-size:.9rem; font-weight:500; letter-spacing:-.01em; cursor:pointer;
  transition:transform .2s var(--ease), background .2s var(--ease),
             box-shadow .2s var(--ease), border-color .2s var(--ease)}
.btn:active{transform:scale(.975)}
.btn--primary{background:var(--ink); color:#fff}
.btn--primary:hover{background:#000; box-shadow:var(--shadow-md)}
.btn--ghost{background:var(--paper); color:var(--ink); border-color:var(--line-2)}
.btn--ghost:hover{border-color:var(--ink); box-shadow:var(--shadow-sm)}
.btn--light{background:var(--paper); color:var(--ink); box-shadow:var(--shadow-sm)}
.btn--light:hover{box-shadow:var(--shadow-md)}
.btn--wine{background:var(--wine); color:#fff}
.btn--wine:hover{background:var(--wine-dk); box-shadow:var(--shadow-md)}
.btn--wa{background:var(--wa); color:#06381A; font-weight:600}
.btn--wa:hover{background:#1FBE59; box-shadow:var(--shadow-md)}
.btn--block{width:100%}
.btn[disabled]{opacity:.45; cursor:not-allowed}

/* ---------- Hero ---------- */
.hero{position:relative; overflow:hidden; padding:var(--sp-7) 0 var(--sp-8)}
.hero__inner{position:relative; z-index:1; max-width:var(--wrap); margin-inline:auto;
  padding-inline:var(--sp-5); display:grid; grid-template-columns:1.02fr .98fr;
  gap:var(--sp-6); align-items:center}
.hero__eyebrow{display:inline-flex; align-items:center; gap:.5rem;
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r-full); padding:.45rem 1rem; font-size:.76rem;
  color:var(--ink-2); font-weight:500; box-shadow:var(--shadow-xs)}
.hero__eyebrow::before{content:""; width:6px; height:6px; border-radius:50%;
  background:var(--wine)}
.hero h1{margin:var(--sp-5) 0 var(--sp-5); max-width:15ch}
.hero h1 em{font-style:normal; color:var(--wine)}
.hero__lead{font-size:1.06rem; color:var(--ink-soft); max-width:42ch; text-wrap:pretty}
.hero__cta{display:flex; flex-wrap:wrap; gap:.7rem; margin-top:var(--sp-6)}

/* Producto flotando sobre el círculo */
.hero__art{position:relative; display:grid; place-items:center; min-height:440px}
.hero__art::before{content:""; position:absolute; width:min(100%,470px);
  aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle at 34% 28%,#fff,var(--mist) 62%,#E1E1E4)}
.hero__art::after{content:""; position:absolute; right:4%; bottom:6%;
  width:min(46%,210px); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle at 40% 34%,#fff,#E6E6E9)}
.hero__art img{position:relative; z-index:1; width:min(74%,360px);
  aspect-ratio:4/5; height:auto; object-fit:cover;
  border-radius:var(--r-xl); box-shadow:0 30px 60px rgba(24,24,27,.22)}

/* ---------- Franja de confianza ---------- */
.strip{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:var(--sp-5) var(--sp-6); padding:var(--sp-6) 0; border-top:1px solid var(--line)}
.strip__item{display:flex; gap:.85rem; align-items:center}
.strip__item svg{flex:none; color:var(--ink); width:22px; height:22px}
.strip__item b{display:block; font-size:.9rem; font-weight:600; letter-spacing:-.015em}
.strip__item small{color:var(--ink-mute); font-size:.79rem}

/* ---------- Secciones ---------- */
.section{padding:var(--sp-8) 0}
.section--sand{background:var(--paper)}
.section__head{display:flex; align-items:flex-end; justify-content:space-between;
  gap:var(--sp-5); margin-bottom:var(--sp-6); flex-wrap:wrap}
.section__eyebrow{font-size:.74rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--wine); font-weight:600; margin-bottom:.7rem}
.section__sub{color:var(--ink-soft); margin-top:var(--sp-4); max-width:50ch}
.link-more{font-size:.88rem; font-weight:500; color:var(--ink);
  display:inline-flex; align-items:center; gap:.35rem;
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r-full); padding:.6rem 1.15rem;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease)}
.link-more:hover{border-color:var(--ink); box-shadow:var(--shadow-sm)}

/* ---------- Categorías ---------- */
.cats{display:grid; grid-template-columns:repeat(6,1fr); gap:var(--sp-3)}
.cat{position:relative; display:block; border-radius:var(--r-lg); overflow:hidden;
  background:var(--paper); aspect-ratio:4/5; border:1px solid var(--line);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease)}
.cat:hover{transform:translateY(-6px); box-shadow:var(--shadow-md)}
.cat img{width:100%; height:100%; object-fit:cover;
  transition:transform .5s var(--ease)}
.cat:hover img{transform:scale(1.06)}
.cat__label{position:absolute; inset:auto var(--sp-4) var(--sp-4);
  background:rgba(255,255,255,.86); backdrop-filter:blur(10px);
  border:1px solid var(--line); border-radius:var(--r-md);
  padding:.7rem .95rem; font-size:1rem; font-weight:600; letter-spacing:-.02em}
.cat__label small{display:block; font-size:.72rem; color:var(--ink-mute);
  font-weight:400; letter-spacing:0; margin-top:.1rem}

/* ---------- Grilla de productos ---------- */
.grid{display:grid; gap:var(--sp-4);
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.card{display:flex; flex-direction:column; background:var(--paper);
  border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease),
             border-color .4s var(--ease)}
.card:hover{transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:transparent}
.card__media{position:relative; aspect-ratio:1; background:var(--bg); overflow:hidden}
.card__media img{width:100%; height:100%; object-fit:cover;
  transition:transform .5s var(--ease)}
.card:hover .card__media img{transform:scale(1.07)}
.card__badges{position:absolute; top:var(--sp-3); left:var(--sp-3);
  display:flex; gap:.35rem; flex-wrap:wrap}
.badge{font-size:.66rem; font-weight:600; letter-spacing:.02em;
  padding:.34rem .62rem; border-radius:var(--r-full);
  background:var(--paper); color:var(--ink); box-shadow:var(--shadow-xs)}
.badge--sale{background:var(--wine); color:#fff}
.badge--out{background:var(--ink-mute); color:#fff}
.card__body{padding:var(--sp-4) var(--sp-4) var(--sp-5); display:flex;
  flex-direction:column; gap:.3rem; flex:1}
.card__brand{font-size:.7rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-mute); font-weight:500}
.card__name{font-size:1.02rem; font-weight:600; letter-spacing:-.02em; line-height:1.3}
.card__prices{display:flex; align-items:baseline; gap:.5rem; margin-top:.35rem}
.card__price{font-size:1.15rem; font-weight:700; letter-spacing:-.03em}
.card__price--old{font-size:.84rem; color:var(--ink-mute);
  text-decoration:line-through; font-weight:400}
.card__sizes{display:flex; gap:.3rem; flex-wrap:wrap; margin-top:.55rem}
.chip-size{font-size:.7rem; background:var(--bg); border-radius:var(--r-sm);
  padding:.24rem .5rem; color:var(--ink-soft)}
.card__foot{margin-top:auto; padding-top:var(--sp-4)}
.card .select{width:100%; margin-top:.55rem}

/* ---------- Filtros ---------- */
.toolbar{display:flex; align-items:center; gap:var(--sp-4); flex-wrap:wrap;
  margin-bottom:var(--sp-6)}
.chips{display:flex; gap:.4rem; flex-wrap:wrap; margin-right:auto;
  scroll-behavior:smooth; -webkit-overflow-scrolling:touch;
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r-full); padding:.3rem}
.chip{background:none; border:none; border-radius:var(--r-full);
  min-height:44px; display:inline-flex; align-items:center;
  padding:.55rem 1.05rem; font-size:.86rem; font-weight:500; cursor:pointer;
  color:var(--ink-soft); transition:all .25s var(--ease)}
.chip:hover{color:var(--ink); background:var(--bg)}
.chip[aria-pressed="true"]{background:var(--ink); color:#fff}
.select{border:1px solid var(--line); border-radius:var(--r-full);
  min-height:44px; padding:.6rem 2.4rem .6rem 1.1rem; font-size:.86rem; font-weight:500;
  color:var(--ink);
  background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2371717A' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 1.1rem center/11px;
  -webkit-appearance:none; appearance:none; cursor:pointer}
.select:hover{border-color:var(--line-2)}
.result-count{font-size:.85rem; color:var(--ink-mute)}
.empty{text-align:center; padding:var(--sp-8) var(--sp-4); color:var(--ink-soft)}
.empty h3{margin-bottom:var(--sp-3); font-size:1.5rem; color:var(--ink)}

/* ---------- Carrito (drawer) ---------- */
.overlay{position:fixed; inset:0; background:rgba(24,24,27,.4);
  backdrop-filter:blur(3px); opacity:0; visibility:hidden;
  transition:opacity .35s var(--ease), visibility .35s var(--ease); z-index:90}
.overlay.is-open{opacity:1; visibility:visible}
.drawer{position:fixed; top:var(--sp-4); right:var(--sp-4); bottom:var(--sp-4);
  width:min(430px,calc(100% - 2 * var(--sp-4)));
  background:var(--paper); border-radius:var(--r-lg); z-index:100;
  display:flex; flex-direction:column; overflow:hidden;
  transform:translateX(calc(100% + var(--sp-5)));
  transition:transform .45s var(--ease); box-shadow:var(--shadow-lg)}
.drawer.is-open{transform:none}
.drawer__head{display:flex; align-items:center; justify-content:space-between;
  padding:var(--sp-5); border-bottom:1px solid var(--line)}
.drawer__head h2{font-size:1.3rem}
.drawer__body{flex:1; overflow-y:auto; padding:0 var(--sp-5)}
.drawer__foot{border-top:1px solid var(--line); padding:var(--sp-5); background:var(--bg)}
.close-btn{background:var(--bg); border:none; cursor:pointer; padding:.5rem;
  border-radius:var(--r-full); line-height:0; transition:background .2s var(--ease)}
.close-btn:hover{background:var(--mist)}

.line{display:grid; grid-template-columns:76px 1fr auto; gap:var(--sp-4);
  padding:var(--sp-4) 0; border-bottom:1px solid var(--line)}
.line:last-child{border-bottom:none}
.line img{width:76px; height:76px; object-fit:cover;
  border-radius:var(--r-md); background:var(--bg)}
.line__name{font-size:.97rem; font-weight:600; letter-spacing:-.02em; line-height:1.3}
.line__meta{font-size:.76rem; color:var(--ink-mute); margin-top:.15rem}
.line__price{font-weight:700; font-size:.95rem; white-space:nowrap; letter-spacing:-.02em}
.qty{display:inline-flex; align-items:center; background:var(--bg);
  border-radius:var(--r-full); margin-top:.55rem; overflow:hidden}
.qty button{width:30px; height:30px; background:none; border:none; cursor:pointer;
  font-size:1rem; line-height:1; color:var(--ink-soft)}
.qty button:hover{background:var(--mist); color:var(--ink)}
.qty span{min-width:26px; text-align:center; font-size:.85rem;
  font-variant-numeric:tabular-nums; font-weight:600}
.line__remove{background:none;border:none;padding:0;margin-top:.55rem;cursor:pointer;
  font-size:.75rem;color:var(--ink-mute);text-decoration:underline}
.line__remove:hover{color:var(--danger)}

.totals{display:flex; flex-direction:column; gap:.5rem; margin-bottom:var(--sp-4)}
.totals__row{display:flex; justify-content:space-between; font-size:.9rem;
  color:var(--ink-soft)}
.totals__row--grand{font-size:1rem; color:var(--ink); font-weight:600;
  border-top:1px solid var(--line-2); padding-top:.8rem; margin-top:.4rem}
.totals__row--grand span:last-child{font-size:1.5rem; font-weight:700;
  letter-spacing:-.04em}

/* ---------- Formularios / checkout ---------- */
.checkout{display:grid; grid-template-columns:1.25fr .85fr; gap:var(--sp-5);
  align-items:start}
.panel{background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:var(--sp-6)}
.panel + .panel{margin-top:var(--sp-4)}
.panel h2{font-size:1.45rem}
.panel__hint{color:var(--ink-soft); font-size:.88rem; margin:.5rem 0 var(--sp-5)}
.field{display:flex; flex-direction:column; gap:.4rem; margin-bottom:var(--sp-4)}
.field label{font-size:.79rem; font-weight:500; color:var(--ink-2)}
.field input,.field textarea,.field select{
  border:1px solid var(--line); border-radius:var(--r-md); padding:.85rem 1.05rem;
  font:inherit; font-size:.94rem; background:var(--bg); color:var(--ink); width:100%;
  transition:border-color .2s var(--ease), background .2s var(--ease),
             box-shadow .2s var(--ease)}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-mute)}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none; border-color:var(--ink); background:var(--paper);
  box-shadow:0 0 0 3px rgba(24,24,27,.07)}
.field input[aria-invalid="true"]{border-color:var(--danger); background:#FEF2F2}
.field__error{font-size:.77rem; color:var(--danger); min-height:1em}
.row-2{display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-4)}
.radio-card{display:flex; gap:var(--sp-3); align-items:flex-start;
  border:1px solid var(--line); border-radius:var(--r-md); padding:var(--sp-4);
  cursor:pointer; margin-bottom:var(--sp-3);
  transition:border-color .2s var(--ease), background .2s var(--ease)}
.radio-card:hover{border-color:var(--line-2); background:var(--bg)}
.radio-card:has(input:checked){border-color:var(--ink); background:var(--bg)}
.radio-card input{margin-top:.25rem; accent-color:var(--ink)}
.radio-card b{display:block; font-size:.94rem; font-weight:600; letter-spacing:-.015em}
.radio-card small{color:var(--ink-soft); font-size:.82rem}
.summary-line{display:flex; justify-content:space-between; gap:var(--sp-4);
  font-size:.88rem; padding:.6rem 0; border-bottom:1px solid var(--line)}
.summary-line:last-of-type{border-bottom:none}
.notice{background:var(--bg); border-radius:var(--r-md);
  padding:var(--sp-4); font-size:.84rem; color:var(--ink-soft);
  margin-top:var(--sp-4); line-height:1.55}
.notice strong{color:var(--ink)}
.notice code{background:var(--mist); padding:.1rem .35rem; border-radius:4px;
  font-size:.9em}

/* ---------- Info / local ---------- */
.info{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:var(--sp-4)}
.info__item{background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:var(--sp-5)}
.info__item h3{font-size:1rem; margin-bottom:.6rem; display:flex;
  align-items:center; gap:.5rem}
.info__item p{color:var(--ink-soft); font-size:.9rem}
.info__item a{color:var(--ink); font-weight:500; border-bottom:1px solid var(--line-2)}
.info__item a:hover{border-color:var(--ink)}

/* ---------- Footer ---------- */
.footer{background:var(--ink); color:#fff; padding:var(--sp-8) 0 var(--sp-5);
  margin-top:var(--sp-7); border-radius:var(--r-xl) var(--r-xl) 0 0}
.footer__grid{display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:var(--sp-6)}
.footer h4{font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-mute); margin-bottom:var(--sp-4); font-weight:600}
.footer ul{list-style:none; margin:0; padding:0; display:flex;
  flex-direction:column; gap:.65rem}
.footer a{color:rgba(255,255,255,.72); font-size:.9rem;
  transition:color .2s var(--ease)}
.footer a:hover{color:#fff}
.footer__brand p{color:rgba(255,255,255,.6); font-size:.9rem;
  margin-top:var(--sp-3); max-width:32ch}
.footer__brand .brand__name{color:#fff}
.footer__bottom{margin-top:var(--sp-7); padding-top:var(--sp-5);
  border-top:1px solid rgba(255,255,255,.12); display:flex;
  justify-content:space-between; gap:var(--sp-4); flex-wrap:wrap;
  font-size:.8rem; color:var(--ink-mute)}

/* ---------- WhatsApp flotante ---------- */
.wa-float{position:fixed; right:22px; bottom:22px; z-index:50; width:54px; height:54px;
  border-radius:var(--r-full); background:var(--wa); display:grid; place-items:center;
  box-shadow:var(--shadow-lg); transition:transform .25s var(--ease)}
.wa-float:hover{transform:scale(1.08)}

/* ---------- Toast ---------- */
.toast{position:fixed; left:50%; bottom:26px; transform:translate(-50%,150%);
  background:var(--ink); color:#fff; padding:.9rem 1.5rem; border-radius:var(--r-full);
  font-size:.87rem; font-weight:500; z-index:120; box-shadow:var(--shadow-lg);
  opacity:0; visibility:hidden;
  transition:transform .45s var(--ease), opacity .3s var(--ease),
             visibility 0s linear .45s}
.toast.is-open{transform:translate(-50%,0); opacity:1; visibility:visible;
  transition:transform .45s var(--ease), opacity .3s var(--ease),
             visibility 0s linear 0s}

/* ---------- Responsive ---------- */
@media (max-width:1000px){
  .cats{grid-template-columns:repeat(3,1fr)}   /* 3 + 3, siempre parejo */
  .hero__inner{grid-template-columns:1fr; gap:var(--sp-7)}
  .hero h1{max-width:none}
  .hero__art{min-height:360px; order:-1}
  .checkout{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  /* El menú se ancla al header (que es sticky), no a una distancia fija del
     viewport: así lo acompaña al hacer scroll y nunca queda tapado. */
  /* Menos margen lateral: en 320px cada píxel cuenta */
  .wrap{padding-inline:var(--sp-4)}
  .header__inner{width:calc(100% - 2 * var(--sp-4))}
  /* El bloque contenedor es .header__inner (su backdrop-filter lo convierte en
     uno), así que left/right 0 alinea el menú con la píldora del header. */
  .nav{position:absolute; top:calc(100% + 1.15rem); left:0; right:0;
    flex-direction:column; gap:.15rem; padding:var(--sp-3); background:var(--paper);
    border:1px solid var(--line); border-radius:var(--r-lg);
    box-shadow:var(--shadow-lg); transform:translateY(-8px) scale(.97);
    opacity:0; visibility:hidden; transform-origin:top center;
    transition:transform .3s var(--ease), opacity .25s var(--ease),
               visibility 0s linear .3s}
  .nav.is-open{transform:none; opacity:1; visibility:visible;
    transition:transform .3s var(--ease), opacity .25s var(--ease),
               visibility 0s linear 0s}
  .nav a{padding:.9rem 1rem; font-size:.95rem}
  .burger{display:inline-flex}
  .header__inner{padding-left:.7rem; padding-right:.5rem}
  .brand__tag{display:none}
  .brand img{width:34px; height:34px}
  .brand__name{font-size:1.15rem}

  /* Dos por fila incluso en pantallas de 320px */
  .grid{grid-template-columns:repeat(auto-fill,minmax(134px,1fr)); gap:var(--sp-3)}
  .cats{grid-template-columns:repeat(2,1fr)}
  .strip{grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:var(--sp-4)}
  .cat{aspect-ratio:1}
  .cat img{padding:0}
  .card__body{padding:var(--sp-3) var(--sp-3) var(--sp-4)}
  .card__name{font-size:.95rem}
  .card__price{font-size:1.05rem}
  .btn{padding:.85rem 1.35rem}

  /* Primero el mensaje, después la ilustración */
  .hero__art{order:0; min-height:300px}
  .hero{padding-bottom:var(--sp-7)}

  .row-2{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr}
  .section{padding:var(--sp-7) 0}
  .panel{padding:var(--sp-5)}
  .chips{width:100%; overflow-x:auto; flex-wrap:nowrap; scrollbar-width:none}
  .chips::-webkit-scrollbar{display:none}
  .chip{white-space:nowrap}

  /* 16px evita que iOS haga zoom al enfocar un campo */
  .field input,.field textarea,.field select{font-size:16px}
}
@media print{
  .header,.footer,.wa-float,.drawer,.overlay,.topbar{display:none}
}