/* ============================================================
   CASA ROMY · Tienda Online — Estilos
   Paleta: logo (gris claro + amarillo estrella + negro)
   ============================================================ */
:root{
  --bg:          #000000;   /* negro */
  --surface:     #121212;   /* superficies oscuras (cards, paneles) */
  --sand:        #ecdf45;   /* amarillo estrella (decorativo) */
  --accent:      #ecdf45;   /* amarillo */
  --accent-dark: #d6c92e;   /* amarillo oscuro (hover) */
  --btn:         #1c1c1c;   /* chips / fondos oscuros */
  --btn-dark:    #000000;   /* negro */
  --gold:        #e0c94a;   /* dorado para detalles de texto */
  --text:        #ffffff;
  --muted:       #b3b3b3;
  --white:       #ffffff;
  --wsp:         #25D366;
  --wsp-dark:    #1da851;
  --line:        #2a2a2a;
  --shadow:      0 10px 30px rgba(0,0,0,.10);
  --shadow-lg:   0 20px 50px rgba(0,0,0,.18);
  --radius:      18px;
  --radius-sm:   12px;
  --maxw:        1240px;
  --ease:        cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing:border-box; margin:0; padding:0; }
/* El atributo hidden siempre gana, aunque el elemento tenga display propio */
[hidden]{ display:none !important; }
html{ scroll-behavior:smooth; }
body{
  font-family:'Jost', system-ui, sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.5;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; }
ul{ list-style:none; }

.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:18px; }

/* ---------- Botones ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 26px; border-radius:50px; font-weight:600; font-size:15px;
  transition:transform .2s var(--ease), box-shadow .28s var(--ease), background .2s, border-color .28s var(--ease);
  white-space:nowrap; border:1px solid transparent;
}
.btn:active{ transform:scale(.96); }
.btn--primary{ background:var(--accent); color:#1a1a1a; border-color:rgba(255,247,191,.65); box-shadow:0 0 0 1px rgba(236,223,69,.5), 0 0 16px rgba(236,223,69,.6), 0 0 30px rgba(236,223,69,.35), 0 8px 22px rgba(214,201,46,.4); }
.btn--primary:hover{ background:var(--accent-dark); color:#1a1a1a; transform:translateY(-2px); border-color:#fffbe0; box-shadow:0 0 0 1px rgba(236,223,69,1), 0 0 22px rgba(236,223,69,.9), 0 0 46px rgba(236,223,69,.55), 0 10px 26px rgba(214,201,46,.5); }
.btn--wsp{ background:var(--wsp); color:#fff; border-color:rgba(138,255,188,.6); box-shadow:0 0 0 1px rgba(37,211,102,.5), 0 0 16px rgba(37,211,102,.55), 0 0 30px rgba(37,211,102,.3), 0 8px 22px rgba(37,211,102,.35); }
.btn--wsp:hover{ background:var(--wsp-dark); transform:translateY(-2px); border-color:#aeffd0; box-shadow:0 0 0 1px rgba(37,211,102,1), 0 0 22px rgba(37,211,102,.9), 0 0 46px rgba(37,211,102,.55), 0 10px 26px rgba(37,211,102,.5); }
.btn--ghost{ background:var(--surface); color:var(--text); border:1px solid var(--line); box-shadow:var(--shadow); }
.btn--ghost:hover{ border-color:var(--accent); box-shadow:0 0 0 1px rgba(236,223,69,.55), 0 0 16px rgba(236,223,69,.45); }
.link-btn{ color:var(--gold); font-weight:600; font-size:14px; }
.link-btn:hover{ text-decoration:underline; }

/* ---------- Títulos de sección ---------- */
.section__title{ font-family:'Jost', system-ui, sans-serif; font-size:clamp(20px,3.4vw,30px); font-weight:700; text-transform:uppercase; letter-spacing:.5px; }
.section__title--big{ font-family:'Fraunces', Georgia, serif; font-size:clamp(28px,6vw,50px); font-weight:900; text-transform:uppercase; letter-spacing:.5px; }
.section__head{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:18px; }

/* ============================================================
   HEADER
   ============================================================ */
.header{
  position:relative; z-index:50;
  background:rgba(0,0,0,.85);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  transition:box-shadow .3s;
}
.header.is-scrolled{ box-shadow:0 6px 20px rgba(0,0,0,.08); }
.header__top{
  display:flex; align-items:center; gap:16px;
  padding-block:12px;
  max-width:none; padding-inline:clamp(18px,4vw,56px);   /* ancho completo */
}
.logo{ display:flex; align-items:center; gap:9px; font-weight:800; font-size:23px; letter-spacing:-1px; flex-shrink:0; }
.logo__img{ height:52px; width:auto; object-fit:contain; flex-shrink:0; border-radius:8px; }
.logo__main{ color:var(--text); }
.logo__accent{ color:var(--gold); }

.header__search{ flex:1; position:relative; max-width:760px; }
.header__search input{
  width:100%; padding:13px 20px 13px 50px; border-radius:50px;
  border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(180deg,#171717,#0e0e0e);
  font-family:'Jost',sans-serif; font-size:14px; letter-spacing:.4px; color:var(--text);
  transition:border-color .28s var(--ease), box-shadow .28s var(--ease), background .28s;
}
.header__search input::placeholder{ color:#8c8c8c; text-transform:uppercase; letter-spacing:2.5px; font-size:11.5px; font-weight:500; }
.header__search input:focus{
  outline:none; border-color:var(--accent); background:#141414;
  box-shadow:0 0 0 1px rgba(236,223,69,.6), 0 0 22px rgba(236,223,69,.22);
}
.header__search-icon{ position:absolute; left:20px; top:50%; transform:translateY(-50%); width:18px; height:18px; color:var(--muted); pointer-events:none; transition:color .28s var(--ease); }
.header__search:focus-within .header__search-icon{ color:var(--accent); }

/* Sugerencias del buscador (autocompletado) */
.search-suggest{
  position:absolute; top:calc(100% + 10px); left:0; right:0; z-index:60;
  background:#141414; border:1px solid rgba(255,255,255,.12); border-radius:18px;
  box-shadow:var(--shadow-lg), 0 0 30px rgba(0,0,0,.6); overflow:hidden auto; max-height:min(70vh,460px);
}
.search-suggest__item{
  display:flex; align-items:center; gap:12px; width:100%; padding:11px 16px;
  text-align:left; border-bottom:1px solid var(--line); transition:background .15s, box-shadow .15s;
  box-shadow:inset 3px 0 0 transparent;
}
.search-suggest__item:last-of-type{ border-bottom:none; }
.search-suggest__item:hover{ background:rgba(236,223,69,.06); box-shadow:inset 3px 0 0 var(--accent); }
.search-suggest__item img{ width:44px; height:56px; object-fit:cover; border-radius:9px; background:#1a1a1a; flex-shrink:0; }
.search-suggest__info{ display:flex; flex-direction:column; gap:2px; flex:1; min-width:0; }
.search-suggest__name{ font-size:14px; font-weight:600; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.search-suggest__cat{ font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.4px; }
.search-suggest__price{ font-size:14px; font-weight:700; color:var(--accent); flex-shrink:0; }
.search-suggest__all{ display:block; width:100%; text-align:center; padding:12px; font-size:13px; font-weight:600; color:var(--accent); background:rgba(236,223,69,.06); border-top:1px solid var(--line); }
.search-suggest__all:hover{ background:rgba(236,223,69,.12); }
.search-suggest__empty{ padding:16px; text-align:center; color:var(--muted); font-size:13.5px; }

.header__icons{ display:flex; align-items:center; gap:6px; flex-shrink:0; margin-left:auto; }
.header__icon{
  position:relative; width:42px; height:42px; border-radius:50%;
  display:grid; place-items:center; color:var(--text);
  transition:background .2s, transform .2s, color .2s;
}
.header__icon svg{ width:22px; height:22px; fill:currentColor; }
.header__icon:hover{ background:rgba(255,255,255,.12); transform:translateY(-2px); }
.header__icon--wsp:hover{ color:var(--wsp); }
.header__bag-btn{ background:var(--btn); color:#fff; }
.header__bag-btn:hover{ background:var(--btn-dark); color:#fff; }
.header__bag-btn svg{ stroke:#fff; }
.header__bag-count{
  position:absolute; top:-3px; right:-3px; min-width:20px; height:20px; padding:0 5px;
  background:var(--wsp); color:#fff; border-radius:50px; font-size:11px; font-weight:700;
  display:grid; place-items:center; border:2px solid var(--bg);
  transform:scale(0); transition:transform .25s var(--ease);
}
.header__bag-count.show{ transform:scale(1); }

.header__menu-btn{ display:none; flex-direction:column; gap:5px; width:40px; height:40px; align-items:center; justify-content:center; }
.header__menu-btn span{ width:22px; height:2px; background:var(--text); border-radius:2px; transition:.3s; }

/* Nav */
.nav{ border-top:1px solid var(--line); background:rgba(0,0,0,.4); }
.nav__head{ display:none; } /* solo visible en móvil */
.nav__list{ display:flex; gap:14px; overflow-x:auto; scrollbar-width:none; padding-block:9px;
  max-width:none; padding-inline:clamp(18px,4vw,56px); flex-wrap:nowrap; justify-content:space-between; }
.nav__list::-webkit-scrollbar{ display:none; }
.nav__link{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  width:70px; flex-shrink:0; color:var(--muted);
  transition:transform .2s var(--ease);
}
.nav__ring{
  width:54px; height:54px; border-radius:50%; padding:3px;
  background:conic-gradient(from 180deg, #ecdf45, #d6c92e, #f4ea66, #1c1c1c, #ecdf45);
  display:grid; place-items:center; transition:transform .25s var(--ease), box-shadow .25s;
}
.nav__bubble{
  width:100%; height:100%; border-radius:50%; background:#fff;
  display:grid; place-items:center; font-size:24px;
}
.nav__label{ font-family:'Jost', system-ui, sans-serif; font-size:12px; font-weight:600; color:#fff; white-space:nowrap; text-transform:uppercase; letter-spacing:.5px; transition:color .2s; }
.nav__link:hover .nav__ring{ transform:scale(1.07); }
.nav__link:hover .nav__label{ color:#fff; }
.nav__link.is-active .nav__ring{ box-shadow:0 0 0 2px rgba(236,223,69,.55); }
.nav__link.is-active .nav__label{ color:#fff; font-weight:700; }
.nav__link--hot .nav__label{ color:#fff; }
.nav__foot{ display:none; } /* solo visible en el menú móvil */

/* ============================================================
   SLIDER PRINCIPAL
   ============================================================ */
.slider{ position:relative; width:100%; height:clamp(320px,46vw,560px); overflow:hidden; background:#0a0a0a; }
.slider__track{ display:flex; height:100%; transition:transform .7s var(--ease); }
.slide{
  position:relative; flex:0 0 100%; height:100%; display:flex; align-items:flex-end;
  background-size:cover; background-position:center 22%; overflow:hidden;
}
.slide__overlay{ position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.82) 0%, rgba(0,0,0,.34) 40%, transparent 68%); }
.slide__inner{ position:relative; z-index:2; max-width:var(--maxw); width:100%; margin-inline:auto; padding-inline:clamp(20px,5vw,60px); padding-bottom:clamp(26px,5vh,52px); color:#fff; }
.slide__badge{
  display:inline-flex; align-items:center; gap:9px;
  background:rgba(0,0,0,.32); backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px);
  border:1px solid rgba(255,255,255,.3); color:#fff;
  font-weight:600; font-size:11.5px; letter-spacing:2.5px; text-transform:uppercase;
  padding:8px 18px 8px 15px; border-radius:50px; margin-bottom:18px;
  opacity:0; transform:translateY(16px);
}
.slide__badge::before{
  content:''; width:7px; height:7px; border-radius:50%;
  background:var(--badge-accent, var(--accent));
  box-shadow:0 0 10px var(--badge-accent, var(--accent));
}
.slide__title{ font-family:'Fraunces', Georgia, serif; font-size:clamp(28px,5.5vw,58px); font-weight:900; line-height:1.05; letter-spacing:-1px; max-width:620px; opacity:0; transform:translateY(22px); }
.slide__sub{ font-size:clamp(15px,2vw,20px); margin:16px 0 26px; max-width:460px; opacity:0; transform:translateY(22px); color:#f3ece4; }
.slide__btn{ font-size:16px; padding:15px 34px; opacity:0; transform:translateY(22px); }
.slide.is-active .slide__badge{ animation:slideUp .6s var(--ease) .15s forwards; }
.slide.is-active .slide__title{ animation:slideUp .6s var(--ease) .28s forwards; }
.slide.is-active .slide__sub{   animation:slideUp .6s var(--ease) .42s forwards; }
.slide.is-active .slide__btn{   animation:slideUp .6s var(--ease) .56s forwards; }
@keyframes slideUp{ to{ opacity:1; transform:none; } }

.slider__arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:5;
  width:48px; height:48px; border-radius:50%; background:rgba(255,255,255,.85); color:#1a1a1a;
  font-size:26px; line-height:1; display:grid; place-items:center; box-shadow:var(--shadow);
  transition:background .2s, transform .2s; backdrop-filter:blur(4px);
}
.slider__arrow:hover{ background:#fff; transform:translateY(-50%) scale(1.08); }
.slider__arrow--prev{ left:16px; }
.slider__arrow--next{ right:16px; }
.slider__dots{ position:absolute; bottom:18px; left:50%; transform:translateX(-50%); z-index:5; display:flex; gap:9px; }
.slider__dot{ width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.55); cursor:pointer; transition:.25s var(--ease); }
.slider__dot.is-active{ background:#fff; width:26px; border-radius:50px; }

/* ============================================================
   HISTORIAS (stories)
   ============================================================ */
.stories{ padding-block:18px; }
.stories__track{ display:flex; gap:18px; overflow-x:auto; padding-block:6px; scrollbar-width:none; }
.stories__track::-webkit-scrollbar{ display:none; }
.story{ flex-shrink:0; width:74px; text-align:center; }
.story__ring{
  width:74px; height:74px; border-radius:50%; padding:3px;
  background:conic-gradient(from 180deg, #ecdf45, #d6c92e, #f4ea66, #1c1c1c, #ecdf45);
  display:grid; place-items:center; cursor:pointer; transition:transform .25s var(--ease);
}
.story__ring:hover{ transform:scale(1.07); }
.story__inner{
  width:100%; height:100%; border-radius:50%; background:#fff; padding:3px;
  display:grid; place-items:center; font-size:30px;
}
.story__label{ display:block; margin-top:6px; font-size:12px; font-weight:500; color:var(--muted); }

/* ============================================================
   CATEGORÍAS
   ============================================================ */
.cats{ padding-block:34px; }
.cats__grid{
  display:grid; grid-template-columns:repeat(6,1fr); gap:14px; margin-top:18px;
}
.cat-card{
  position:relative; border-radius:var(--radius); overflow:hidden; aspect-ratio:3/4;
  background:linear-gradient(160deg,#f4f4f4,var(--sand)); cursor:pointer; box-shadow:var(--shadow);
  display:flex; align-items:flex-end; transition:transform .3s var(--ease), box-shadow .3s;
}
.cat-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.cat-card__emoji{ position:absolute; top:14px; right:14px; font-size:34px; opacity:.85; transition:transform .3s; }
.cat-card:hover .cat-card__emoji{ transform:scale(1.15) rotate(-6deg); }
.cat-card__label{
  width:100%; padding:14px 14px 16px; font-weight:700; color:#fff; font-size:15px;
  background:linear-gradient(transparent, rgba(0,0,0,.6));
}
.cat-card__count{ display:block; font-size:11px; font-weight:500; opacity:.9; }

/* ============================================================
   DESTACADOS (pestañas + slider) + OFERTAS
   ============================================================ */
.featured{ padding-block:30px; }
.offers{ padding-block:24px; }
.offers .section__head{ justify-content:center; text-align:center; }

/* ---------- Divisor con estrella ---------- */
.divider{ display:flex; align-items:center; justify-content:center; gap:18px; margin:6px 0 2px; }
.divider::before, .divider::after{ content:''; height:1px; flex:1; max-width:340px; background:linear-gradient(90deg,transparent,var(--line),transparent); }
.divider__star{ color:var(--accent); font-size:26px; line-height:1; }

/* ---------- Categorías en el home ---------- */
.cathome{ padding-block:20px 40px; }
.cathome__title{ text-align:center; margin:6px 0 4px; }
.cathome__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:22px; }
.cathome__card{
  display:flex; flex-direction:column; border-radius:var(--radius); overflow:hidden;
  background:var(--surface); box-shadow:var(--shadow); color:#fff;
  transition:transform .3s var(--ease), box-shadow .3s;
}
.cathome__card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.cathome__img{ position:relative; aspect-ratio:3/4; display:grid; place-items:center; overflow:hidden; background:linear-gradient(150deg,#161616,#3a3410); }
.cathome__img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center top; z-index:2; }
.cathome__emoji{ font-size:54px; z-index:1; }
.cathome__body{ padding:14px; display:flex; flex-direction:column; gap:10px; align-items:center; text-align:center; }
.cathome__label{ font-weight:700; font-size:16px; }
.cathome__btn{ width:100%; padding:10px; font-size:14px; }
@media (max-width:1024px){ .cathome__grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:640px){ .cathome__grid{ grid-template-columns:repeat(2,1fr); } }
.featured__tabs{ display:flex; gap:9px; flex-wrap:wrap; margin-bottom:18px; }
.ftab{
  padding:10px 18px; border-radius:50px; background:#141414; border:1.5px solid var(--line);
  font-size:14px; font-weight:600; color:var(--muted); transition:all .2s var(--ease);
}
.ftab:hover{ border-color:var(--sand); color:var(--text); }
.ftab.is-active{ background:var(--accent); color:#1a1a1a; border-color:var(--accent); box-shadow:0 6px 16px rgba(236,223,69,.25); }

.prod-slider{ position:relative; }
.prod-slider__track{
  display:flex; gap:16px; overflow-x:auto; padding:6px 2px 16px; scroll-snap-type:x mandatory;
  scrollbar-width:none; scroll-behavior:smooth;
}
.prod-slider__track::-webkit-scrollbar{ display:none; }
.prod-slider__track .card{ flex:0 0 220px; scroll-snap-align:start; }
.prod-slider__track .card-empty{ color:var(--muted); padding:30px; font-size:14px; }
.prod-slider__arrow{
  position:absolute; top:38%; transform:translateY(-50%); z-index:6;
  width:44px; height:44px; border-radius:50%; background:#fff; color:#1a1a1a;
  font-size:24px; display:grid; place-items:center; box-shadow:var(--shadow-lg);
  transition:background .2s, transform .2s, opacity .2s;
}
.prod-slider__arrow:hover{ background:var(--btn); color:#fff; transform:translateY(-50%) scale(1.08); }
.prod-slider__arrow--prev{ left:-6px; }
.prod-slider__arrow--next{ right:-6px; }
@media (max-width:680px){ .prod-slider__arrow{ display:none; } }

/* ============================================================
   CATÁLOGO + FILTROS
   ============================================================ */
.catalog{ padding-block:24px 60px; }
.catalog__count{ color:var(--muted); font-size:14px; }

.filters{ margin-bottom:24px; position:sticky; top:0; z-index:20;
  background:rgba(0,0,0,.9); backdrop-filter:blur(8px); padding-block:10px; border-radius:14px; }
.filters__row{ display:flex; gap:9px; flex-wrap:wrap; margin-bottom:9px; }
.filters__row:last-child{ margin-bottom:0; }
.pill{
  padding:9px 16px; border-radius:50px; background:#141414; border:1.5px solid var(--line);
  font-size:13.5px; font-weight:500; color:var(--text); transition:all .2s var(--ease);
}
.pill:hover{ border-color:var(--sand); }
.pill.is-active{ background:var(--accent); color:#1a1a1a; border-color:var(--accent); }
/* Botones de filtro con el color de su cartel */
.pill[data-filter="oferta"]{ background:#e8590c; color:#fff; border-color:#e8590c; }
.pill[data-filter="oferta"]:hover{ background:#d64f08; border-color:#d64f08; }
.pill[data-filter="oferta"].is-active{ background:#e8590c; border-color:#fff; }
.pill[data-filter="nuevo"]{ background:#1f9d55; color:#fff; border-color:#1f9d55; }
.pill[data-filter="nuevo"]:hover{ background:#1b8a4a; border-color:#1b8a4a; }
.pill[data-filter="nuevo"].is-active{ background:#1f9d55; border-color:#fff; }
.pill--select{ appearance:none; padding-right:30px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236f6a64' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; cursor:pointer; }
.pill--clear{ color:var(--muted); }
.pill--clear:hover{ background:#fbeae6; border-color:#f1c9bf; color:#d9480f; }

.catalog__grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(215px,1fr)); gap:18px;
}

/* Card de producto */
.card{
  background:var(--surface); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow);
  cursor:pointer; transition:transform .3s var(--ease), box-shadow .3s; position:relative;
  display:flex; flex-direction:column;
  animation:cardIn .5s var(--ease) both;
}
@keyframes cardIn{ from{ opacity:0; transform:translateY(18px); } }
.card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.card__media{ position:relative; aspect-ratio:3/4; overflow:hidden; background:#1a1a1a; }
.card__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transform:scale(1.06); transition:opacity .75s var(--ease), transform 1.2s var(--ease); }
.card__img.is-active{ opacity:1; transform:scale(1); }

.card__tags{ position:absolute; top:10px; left:10px; display:flex; flex-direction:column; gap:5px; z-index:2; }
.tag{ font-size:10.5px; font-weight:700; padding:4px 10px; border-radius:50px; color:#fff; text-transform:uppercase; letter-spacing:.3px; }
.tag--nuevo{ background:#1f9d55; }
.tag--oferta{ background:#e8590c; }
.tag--destacado{ background:#9b6bd1; }
.card__disc{ position:absolute; top:10px; right:10px; background:#e8590c; color:#fff; font-size:12px; font-weight:700; padding:4px 9px; border-radius:50px; z-index:2; }

.card__add{
  position:absolute; bottom:10px; right:10px; width:40px; height:40px; border-radius:50%;
  background:#1e1e1e; box-shadow:var(--shadow); display:grid; place-items:center; color:#fff;
  opacity:0; transform:translateY(8px); transition:.25s var(--ease); z-index:3;
}
.card__add svg{ width:20px; height:20px; }
.card:hover .card__add{ opacity:1; transform:translateY(0); }
.card__add:hover{ background:var(--btn); color:#fff; }

.card__body{ padding:13px 14px 16px; display:flex; flex-direction:column; gap:4px; flex:1; }
.card__cat{ font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; font-weight:500; }
.card__name{ font-size:14.5px; font-weight:600; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.card__prices{ display:flex; align-items:baseline; gap:8px; margin-top:auto; padding-top:6px; }
.card__price{ font-size:17px; font-weight:800; color:var(--text); }
.card__old{ font-size:13px; color:var(--muted); text-decoration:line-through; }

.catalog__empty{ text-align:center; padding:50px 20px; color:var(--muted); }
.catalog__empty p{ font-size:17px; margin-bottom:16px; }
.catalog__loadmore{ text-align:center; margin-top:34px; }
.catalog__sentinel{ height:1px; }

/* ============================================================
   BENEFICIOS
   ============================================================ */
.benefits{
  display:grid; grid-template-columns:repeat(4,1fr); gap:16px; padding-block:30px;
}
.benefits__item{
  display:flex; align-items:center; gap:14px; background:var(--surface); padding:18px 20px;
  border-radius:var(--radius); box-shadow:var(--shadow);
}
.benefits__item span{ font-size:30px; }
.benefits__item strong{ display:block; font-size:15px; }
.benefits__item small{ color:var(--muted); font-size:12.5px; }

/* ============================================================
   UBICACIÓN
   ============================================================ */
.location{ display:grid; grid-template-columns:1fr 1.2fr; gap:34px; align-items:center; padding-block:40px; }
.location__info p{ color:var(--muted); margin:14px 0 18px; font-size:16px; max-width:440px; }
.location__data{ display:flex; flex-direction:column; gap:9px; margin-bottom:22px; }
.location__data li{ font-size:15px; color:var(--text); }
.location__btns{ display:flex; gap:12px; flex-wrap:wrap; }
.location__map iframe{ width:100%; border-radius:var(--radius); box-shadow:var(--shadow-lg); }
/* En celular, centrar la info de Ubicación */
@media (max-width:680px){
  .location__info{ text-align:center; }
  .location__info p{ margin-inline:auto; }
  .location__data{ align-items:center; }
  .location__btns{ justify-content:center; }
}

/* ============================================================
   INSTAGRAM
   ============================================================ */
.instagram{ text-align:center; padding-block:40px 60px; }
.instagram__head{ margin-bottom:24px; }
.instagram__sub{ color:var(--muted); margin-top:8px; }
.instagram__grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:12px; margin-bottom:28px; }
.ig-tile{ position:relative; aspect-ratio:1; border-radius:14px; overflow:hidden;
  background:linear-gradient(135deg,#f4f4f4,var(--sand));
  display:grid; place-items:center; font-size:32px; box-shadow:var(--shadow);
  transition:transform .3s var(--ease); cursor:pointer; }
.ig-tile img{ width:100%; height:100%; object-fit:cover; }
.ig-tile::after{ content:''; position:absolute; inset:0; background:rgba(31,23,15,.28);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 2.16c3.2 0 3.58.01 4.85.07 3.25.15 4.77 1.69 4.92 4.92.06 1.27.07 1.65.07 4.85s-.01 3.58-.07 4.85c-.15 3.23-1.66 4.77-4.92 4.92-1.27.06-1.65.07-4.85.07s-3.58-.01-4.85-.07c-3.26-.15-4.77-1.7-4.92-4.92-.06-1.27-.07-1.65-.07-4.85s.01-3.58.07-4.85C2.38 3.92 3.9 2.38 7.15 2.23 8.42 2.17 8.8 2.16 12 2.16zM12 5.84a6.16 6.16 0 1 0 0 12.32 6.16 6.16 0 0 0 0-12.32zM12 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm6.41-10.85a1.44 1.44 0 1 0 0 2.88 1.44 1.44 0 0 0 0-2.88z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:center; opacity:0; transition:opacity .3s; }
.ig-tile:hover{ transform:scale(1.04); }
.ig-tile:hover::after{ opacity:1; }
.instagram__btn{ margin-top:4px; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ background:#161616; color:#dcdcdc; margin-top:20px; }
.footer__inner{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:30px; padding-block:46px; }
.footer__col h4{ font-size:15px; margin-bottom:14px; color:#fff; }
.footer__col p, .footer__col a{ display:block; color:#aeaeae; font-size:14px; margin-bottom:8px; transition:color .2s; }
.footer__col a{ cursor:pointer; }
.footer__col a:hover{ color:var(--accent); }
.footer__brand p{ color:#aeaeae; font-size:14px; max-width:280px; margin-bottom:14px; }
.footer__hours{ margin-top:4px; }
.footer__contact{ display:flex; align-items:flex-start; gap:9px; }
.footer__contact svg{ width:15px; height:15px; flex:none; fill:currentColor; margin-top:3px; opacity:.85; }
.footer__social{ display:flex; gap:10px; }
.footer__social a{ width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,.08);
  display:grid; place-items:center; margin:0; transition:background .2s, transform .2s; }
.footer__social a:hover{ background:var(--accent); transform:translateY(-3px); }
.footer__social a:hover svg{ fill:#1a1a1a; }
.footer__social svg{ width:20px; height:20px; fill:#fff; }
.logo--footer{ margin-bottom:12px; }
.logo--footer .logo__main{ color:#fff; }
.footer__bottom{ text-align:center; padding:18px; border-top:1px solid rgba(255,255,255,.08); font-size:13px; color:#9a8e80; }

/* ============================================================
   BOTÓN FLOTANTE WSP
   ============================================================ */
.wsp-float{
  position:fixed; bottom:22px; right:22px; z-index:45;
  display:grid; place-items:center; width:60px; height:60px; background:var(--wsp); color:#fff;
  border-radius:50%;
  box-shadow:0 10px 28px rgba(37,211,102,.5); transition:transform .25s var(--ease), box-shadow .25s;
  animation:wspPulse 2.6s infinite;
}
.wsp-float svg{ width:24px; height:24px; fill:#fff; }
.wsp-float:hover{ transform:translateY(-3px) scale(1.03); background:var(--wsp-dark); }
@keyframes wspPulse{ 0%,100%{ box-shadow:0 10px 28px rgba(37,211,102,.5); } 50%{ box-shadow:0 10px 28px rgba(37,211,102,.5), 0 0 0 12px rgba(37,211,102,0); } }

/* ============================================================
   MODAL HISTORIA
   ============================================================ */
.story-modal__box{
  position:relative; z-index:2; width:min(440px,94vw); max-height:92vh; overflow:hidden;
  background:var(--surface); border-radius:22px; box-shadow:var(--shadow-lg); animation:pop .35s var(--ease);
  display:flex; flex-direction:column;
}
.story-modal__bar{ display:flex; gap:4px; padding:12px 14px 0; }
.story-modal__bar i{ flex:1; height:3px; border-radius:3px; background:rgba(255,255,255,.15); overflow:hidden; }
.story-modal__bar i.is-active{ background:var(--accent); }
.story-modal__head{
  padding:16px 20px 10px; display:flex; align-items:center; gap:12px;
}
.story-modal__avatar{ width:44px; height:44px; border-radius:50%; display:grid; place-items:center; font-size:22px;
  background:conic-gradient(from 180deg,#ecdf45,#d6c92e,#f4ea66,#1c1c1c,#ecdf45); color:#1a1a1a; }
.story-modal__title{ font-weight:700; font-size:16px; }
.story-modal__title small{ display:block; font-weight:400; font-size:12px; color:var(--muted); }
.story-modal__grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:8px 18px 16px; overflow-y:auto; }
.story-modal__grid .card{ box-shadow:none; border:1px solid var(--line); }
.story-modal__foot{ padding:14px 18px 18px; border-top:1px solid var(--line); }
.story-modal__foot .btn{ width:100%; }

/* ============================================================
   MODAL PRODUCTO
   ============================================================ */
.modal{ position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:18px; }
.modal__overlay{ position:absolute; inset:0; background:rgba(40,30,20,.55); backdrop-filter:blur(3px); animation:fade .3s; }
.modal__box{
  position:relative; background:var(--surface); border-radius:var(--radius); max-width:920px; width:100%;
  max-height:92vh; overflow-y:auto; box-shadow:var(--shadow-lg); animation:pop .35s var(--ease);
}
@keyframes fade{ from{ opacity:0; } }
@keyframes pop{ from{ opacity:0; transform:translateY(20px) scale(.97); } }
.modal__close{
  position:absolute; top:14px; right:14px; width:38px; height:38px; border-radius:50%;
  background:#222; box-shadow:var(--shadow); font-size:16px; color:#fff; z-index:5;
  display:grid; place-items:center; transition:background .2s, transform .2s;
}
.modal__close:hover{ background:#333; transform:rotate(90deg); }
.modal__content{ display:grid; grid-template-columns:1fr 1fr; }

.pdetail__gallery{ background:#0d0d0d; padding:22px; display:flex; flex-direction:column; gap:12px; }
.pdetail__main{ aspect-ratio:3/4; border-radius:var(--radius-sm); overflow:hidden; background:#1a1a1a; }
.pdetail__main img{ width:100%; height:100%; object-fit:cover; }
.pdetail__thumbs{ display:flex; gap:10px; }
.pdetail__thumb{ width:64px; height:64px; border-radius:10px; overflow:hidden; cursor:pointer; border:2px solid transparent; background:#1a1a1a; }
.pdetail__thumb.is-active{ border-color:var(--accent); }
.pdetail__thumb img{ width:100%; height:100%; object-fit:cover; }

.pdetail__info{ padding:32px 30px; display:flex; flex-direction:column; gap:14px; }
.pdetail__cat{ font-size:12px; text-transform:uppercase; letter-spacing:.6px; color:var(--muted); font-weight:500; }
.pdetail__name{ font-size:24px; font-weight:700; line-height:1.2; }
.pdetail__prices{ display:flex; align-items:baseline; gap:12px; }
.pdetail__price{ font-size:28px; font-weight:800; }
.pdetail__old{ font-size:17px; color:var(--muted); text-decoration:line-through; }
.pdetail__disc{ background:#e8590c; color:#fff; font-size:13px; font-weight:700; padding:3px 10px; border-radius:50px; }
.pdetail__desc{ color:var(--muted); font-size:14.5px; line-height:1.6; }
.pdetail__group label{ display:block; font-size:13px; font-weight:600; margin-bottom:8px; }
.opt-row{ display:flex; gap:8px; flex-wrap:wrap; }
.opt{
  min-width:42px; padding:9px 14px; border-radius:10px; border:1.5px solid var(--line);
  background:#1a1a1a; color:var(--text); font-size:13.5px; font-weight:500; transition:all .2s;
}
.opt:hover{ border-color:var(--sand); }
.opt.is-active{ background:var(--accent); color:#1a1a1a; border-color:var(--accent); }
.pdetail__qty{ display:flex; align-items:center; gap:14px; }
.qty-ctrl{ display:flex; align-items:center; gap:0; border:1.5px solid var(--line); border-radius:50px; overflow:hidden; }
.qty-ctrl button{ width:38px; height:38px; font-size:18px; color:var(--text); transition:background .2s; }
.qty-ctrl button:hover{ background:rgba(255,255,255,.08); }
.qty-ctrl span{ min-width:34px; text-align:center; font-weight:600; }
.pdetail__actions{ display:flex; gap:10px; margin-top:6px; flex-wrap:wrap; }
.pdetail__actions .btn{ flex:1; }

.related{ border-top:1px solid var(--line); padding:24px 30px 30px; }
.related h4{ font-size:16px; margin-bottom:16px; }
.related__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.related .card__name{ font-size:13px; }
.related .card__price{ font-size:15px; }

/* ============================================================
   BOLSA LATERAL
   ============================================================ */
.bag{ position:fixed; inset:0; z-index:90; }
.bag__overlay{ position:absolute; inset:0; background:rgba(40,30,20,.5); backdrop-filter:blur(2px); animation:fade .3s; }
.bag__panel{
  position:absolute; top:0; right:0; height:100%; width:min(420px,100%); background:var(--surface);
  display:flex; flex-direction:column; box-shadow:var(--shadow-lg); animation:slideIn .35s var(--ease);
}
@keyframes slideIn{ from{ transform:translateX(100%); } }
.bag__head{ display:flex; align-items:center; justify-content:space-between; padding:20px 22px; border-bottom:1px solid var(--line); }
.bag__head h3{ font-size:19px; }
.bag__close{ width:36px; height:36px; border-radius:50%; font-size:15px; display:grid; place-items:center; transition:background .2s; }
.bag__close:hover{ background:rgba(255,255,255,.08); }

.bag__items{ flex:1; overflow-y:auto; padding:16px 18px; display:flex; flex-direction:column; gap:14px; }
.bag-item{ display:flex; gap:12px; background:#161616; border-radius:14px; padding:10px; animation:cardIn .3s var(--ease) both; }
.bag-item__img{ width:74px; height:88px; border-radius:10px; overflow:hidden; background:#1a1a1a; flex-shrink:0; }
.bag-item__img img{ width:100%; height:100%; object-fit:cover; }
.bag-item__body{ flex:1; display:flex; flex-direction:column; gap:4px; min-width:0; }
.bag-item__name{ font-size:14px; font-weight:600; line-height:1.25; }
.bag-item__meta{ font-size:12px; color:var(--muted); }
.bag-item__meta select{ border:1px solid var(--line); border-radius:8px; padding:3px 6px; font-size:12px; font-family:inherit; background:#1a1a1a; color:var(--text); margin-right:6px; cursor:pointer; }
.bag-item__bottom{ display:flex; align-items:center; justify-content:space-between; margin-top:auto; }
.bag-item__price{ font-weight:700; font-size:15px; }
.bag-item__qty{ display:flex; align-items:center; gap:8px; }
.bag-item__qty button{ width:26px; height:26px; border-radius:50%; background:#2a2a2a; color:var(--text); box-shadow:var(--shadow); font-size:15px; display:grid; place-items:center; }
.bag-item__del{ color:#c0392b; font-size:12px; align-self:flex-start; }
.bag-item__del:hover{ text-decoration:underline; }

.bag__empty{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; color:var(--muted); gap:6px; padding:30px; }
.bag__empty p:first-child{ font-size:48px; }
.bag__empty small{ font-size:13px; max-width:240px; }

.bag__footer{ border-top:1px solid var(--line); padding:18px 22px; display:flex; flex-direction:column; gap:12px; }
.bag__subtotal{ display:flex; align-items:center; justify-content:space-between; font-size:16px; }
.bag__subtotal strong{ font-size:22px; }
.bag__note{ color:var(--muted); font-size:11.5px; }
.bag__send{ width:100%; padding:15px; font-size:16px; }

/* ============================================================
   TOAST
   ============================================================ */
.toast{
  position:fixed; bottom:90px; left:50%; transform:translateX(-50%) translateY(20px);
  background:#1e1e1e; color:#fff; padding:13px 22px; border-radius:50px; font-size:14px; font-weight:500; border:1px solid var(--line);
  z-index:120; box-shadow:var(--shadow-lg); opacity:0; transition:.3s var(--ease); pointer-events:none;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-visible{ opacity:1; transform:none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1024px){
  .cats__grid{ grid-template-columns:repeat(3,1fr); }
  .instagram__grid{ grid-template-columns:repeat(4,1fr); }
}
@media (max-width:860px){
  .location{ grid-template-columns:1fr; }
  .footer__inner{ grid-template-columns:1fr 1fr; gap:24px; }
  .footer__brand{ grid-column:1 / -1; }
  .benefits{ grid-template-columns:repeat(2,1fr); }
  .modal__content{ grid-template-columns:1fr; }
  .related__grid{ grid-template-columns:repeat(3,1fr); }
  .slider__arrow{ width:40px; height:40px; font-size:22px; }
}
@media (max-width:680px){
  .header__menu-btn{ display:flex; order:1; }
  .logo{ order:2; flex:1; justify-content:center; }       /* logo centrado en móvil */
  .logo__img{ height:44px; }
  .header__icons{ order:3; }
  /* Las redes (Instagram y TikTok) SÍ se muestran en móvil */
  .header__search{ order:4; flex:1 0 100%; max-width:none; }
  .header__top{ flex-wrap:wrap; }
  /* Sin desenfoque en móvil: evita que el header "atrape" al menú fijo */
  .header{ backdrop-filter:none; -webkit-backdrop-filter:none; background:#000; }
  /* Cuando el menú está abierto, el header (y su menú) se elevan por encima del fondo */
  .header.is-nav-open{ z-index:120; }
  .nav{ position:fixed; top:0; left:0; height:100%; height:100dvh; width:78%; max-width:300px; background:#0a0a0a;
    transform:translateX(-100%); transition:transform .35s var(--ease); z-index:130; box-shadow:var(--shadow-lg);
    border-top:none; padding-top:0; overflow-y:auto; -webkit-overflow-scrolling:touch;
    display:flex; flex-direction:column; }
  .nav.is-open{ transform:translateX(0); }
  /* Encabezado del menú (solo móvil) */
  .nav__head{ display:flex; align-items:center; justify-content:space-between;
    padding:16px 18px; border-bottom:1px solid var(--line); position:sticky; top:0; background:#0a0a0a; z-index:2; }
  .nav__head-title{ font-weight:700; font-size:15px; letter-spacing:.3px; text-transform:uppercase; color:var(--text); }
  .nav__close{ width:34px; height:34px; border-radius:50%; font-size:14px; color:var(--text);
    display:grid; place-items:center; transition:background .2s; }
  .nav__close:hover{ background:var(--bg); }
  .nav__list{ flex-direction:column; gap:4px; padding:12px 12px; width:auto; max-width:none; margin:0; justify-content:flex-start; }
  .nav__link{ flex-direction:row; width:auto; gap:13px; justify-content:flex-start;
    padding:9px 12px; border-radius:12px; transition:background .15s; }
  .nav__ring{ width:42px; height:42px; }
  .nav__bubble{ font-size:19px; }
  .nav__label{ font-size:15px; color:var(--text); }
  .nav__link:hover{ background:rgba(255,255,255,.06); }
  .nav__link:hover .nav__ring{ transform:none; }
  .nav__link.is-active{ background:rgba(255,255,255,.08); }
  .nav__link.is-active .nav__ring{ box-shadow:none; }
  .nav-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:100; animation:fade .3s; }
  /* Pie del menú móvil (aprovecha el espacio de abajo) */
  .nav__foot{ display:flex; flex-direction:column; align-items:center; gap:13px;
    margin-top:auto; padding:20px 18px calc(20px + env(safe-area-inset-bottom));
    border-top:1px solid var(--line); background:#0a0a0a; }
  .nav__foot-txt{ font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--muted); }
  .nav__foot-social{ display:flex; gap:12px; }
  .nav__foot-social a{ width:42px; height:42px; border-radius:50%; background:rgba(255,255,255,.08);
    display:grid; place-items:center; transition:background .2s, transform .2s; }
  .nav__foot-social a:hover{ background:var(--accent); transform:translateY(-2px); }
  .nav__foot-social svg{ width:19px; height:19px; fill:#fff; transition:fill .2s; }
  .nav__foot-social a:hover svg{ fill:#111; }
  .nav__foot-wsp{ display:flex; align-items:center; justify-content:center; gap:9px; width:100%;
    padding:13px; border-radius:50px; background:var(--wsp); color:#fff; font-weight:600; font-size:14px;
    border:1px solid rgba(138,255,188,.4); box-shadow:0 0 14px rgba(37,211,102,.35); transition:.2s; }
  .nav__foot-wsp:hover{ background:var(--wsp-dark); box-shadow:0 0 20px rgba(37,211,102,.5); }
  .nav__foot-wsp svg{ width:18px; height:18px; fill:#fff; flex:none; }
  /* En móvil el nav es un cajón lateral, el header vuelve a ser bajo */
  .filters{ top:0; }
}
@media (max-width:540px){
  .cats__grid{ grid-template-columns:repeat(2,1fr); }
  .instagram__grid{ grid-template-columns:repeat(3,1fr); }
  .benefits{ grid-template-columns:1fr; }
  .footer__inner{ grid-template-columns:1fr; gap:0; text-align:center; padding-block:34px; }
  .footer__brand{ grid-column:auto; display:flex; flex-direction:column; align-items:center; padding-bottom:26px; }
  .footer__brand .logo{ order:0; }   /* que el logo quede arriba (no herede el order del header) */
  .footer__col.footer__brand{ border-top:none; }
  .footer__brand p{ max-width:300px; margin-left:auto; margin-right:auto; }
  .footer__social{ justify-content:center; }
  .footer__col{ padding:24px 0; border-top:1px solid rgba(255,255,255,.09); }
  .footer__col h4{ margin-bottom:14px; }
  .footer__col nav{ display:grid; grid-template-columns:1fr 1fr; gap:6px 12px; max-width:300px; margin:0 auto; }
  .footer__col nav a{ margin-bottom:0; }
  .footer__contact{ justify-content:center; }
  .footer__hours{ text-align:center; }
  .catalog__grid{ grid-template-columns:repeat(2,1fr); gap:12px; }
  .related__grid{ grid-template-columns:repeat(2,1fr); }
  .filters{ top:0; }
  .card__name{ font-size:13.5px; }
  .pdetail__info{ padding:24px 20px; }
  .prod-slider__track .card{ flex:0 0 165px; }
  .slide__overlay{ background:linear-gradient(180deg, rgba(31,23,15,.30) 0%, rgba(31,23,15,.60) 100%); }
}
@media (max-width:380px){
  .catalog__grid{ grid-template-columns:1fr 1fr; gap:10px; }
}