/* tienda.css — Estilos de la tienda pública (index.html y producto.html).
   Antes vivían dentro de index.html; se movieron aquí tal cual para que la
   página de cada perfume use exactamente los mismos. */

/* ══════════════════════════════════════════════════
   TOKENS — paleta Fitoscents (unificada con faq.html)
══════════════════════════════════════════════════ */
:root {
  --bg:       #0d0c0a;
  --bg2:      #111009;
  --card:     #181612;
  --card2:    #1e1c18;
  --gold:     #c9a84c;
  --gold-h:   #e0b95a;
  --gold-s:   rgba(201,168,76,.12);
  --gold-b:   rgba(201,168,76,.30);
  --text:     #ede9e1;
  --muted:    #8a8880;
  --faint:    #46443f;
  --border:   rgba(255,255,255,.07);
  --ease:     cubic-bezier(.16,1,.3,1);
  --r:        12px;
  --r-lg:     20px;
}

/* ══ Reset base ══════════════════════════════════ */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; -webkit-font-smoothing:antialiased; }
body {
  font-family:'Poppins',sans-serif;
  background:var(--bg);
  color:var(--text);
  min-height:100dvh;
  overflow-x:hidden;
}
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }
::-webkit-scrollbar { width:4px; height:4px; }
::-webkit-scrollbar-thumb { background:var(--gold-b); border-radius:99px; }

/* ══ Banner de Anuncios ════════════════════════════ */
#anuncio-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: linear-gradient(90deg, rgba(201,168,76,.22) 0%, rgba(201,168,76,.14) 100%);
  border-bottom: 1px solid var(--gold-b);
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  padding: 10px 16px;
  text-align: center;
  position: sticky;
  top: 0;
  z-index: 250;
  font-family: 'Poppins', sans-serif;
}
#anuncio-banner a { color: var(--gold); text-decoration: underline; }
#anuncio-banner .banner-icon { font-size: 16px; color: var(--gold); flex-shrink: 0; }
#anuncio-banner .banner-close {
  background: none; border: none;
  color: var(--muted); font-size: 16px;
  cursor: pointer; padding: 0 4px;
  margin-left: auto; line-height: 1;
  transition: color .15s; flex-shrink: 0;
}
#anuncio-banner .banner-close:hover { color: var(--text); }

/* ══ Partículas fondo ══════════════════════════ */
#particles-bg {
  position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden;
}
.particle {
  position:absolute; border-radius:50%; background:var(--gold); opacity:0;
  animation:float-up linear infinite;
}
@keyframes float-up {
  0%   { transform:translateY(0) scale(1);    opacity:0; }
  10%  { opacity:.15; }
  90%  { opacity:.04; }
  100% { transform:translateY(-110vh) scale(.4); opacity:0; }
}

/* ══════════════════════════════════════════════════
   HEADER
══════════════════════════════════════════════════ */
header {
  position:sticky; top:0; z-index:200;
  background:rgba(13,12,10,.9);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid var(--gold-b);
  height:62px;
  display:flex; align-items:center;
}
.header-inner {
  width:100%; max-width:1200px; margin:0 auto;
  padding:0 16px;
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
}
/* Logo */
.logo { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.logo-mark {
  width:36px; height:36px; border-radius:50%;
  background:var(--gold);
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:12px; color:#000;
  letter-spacing:.03em; flex-shrink:0;
}
/* El logo ocupa todo el círculo; su propio fondo oscuro hace de base,
   así que ya no hace falta el dorado que se usaba tras las letras "FS". */
.logo-mark img { width:100%; height:100%; object-fit:cover; border-radius:50%; }

.logo-text .name  { font-size:15px; font-weight:600; color:var(--text); line-height:1.1; }
.logo-text .sub   { font-size:10px; color:var(--muted); letter-spacing:.08em; text-transform:uppercase; }

/* Right buttons */
.header-right { display:flex; align-items:center; gap:8px; }

/* Botón FAQ */
.btn-faq {
  display:flex; align-items:center; gap:6px;
  padding:7px 13px; border-radius:9px;
  background:rgba(255,255,255,.05); border:1px solid var(--border);
  color:var(--muted); font-size:13px; font-weight:600;
  transition:all .18s; white-space:nowrap;
}
.btn-faq:hover { background:rgba(255,255,255,.1); color:var(--text); border-color:rgba(255,255,255,.15); }
.btn-faq-text { display:none; }
@media(min-width:600px) { .btn-faq-text { display:inline; } }

/* Botón Perfumes Completos */
.btn-completos {
  display:flex; align-items:center; gap:6px;
  padding:7px 13px; border-radius:9px;
  background:var(--gold-s); border:1px solid var(--gold-b);
  color:var(--gold); font-size:13px; font-weight:600;
  transition:background .18s; white-space:nowrap;
}
.btn-completos:hover { background:rgba(201,168,76,.22); }
.btn-completos-text { display:none; }
@media(min-width:480px) { .btn-completos-text { display:inline; } }

.btn-admin {
  display:flex; align-items:center; gap:7px;
  padding:7px 13px; border-radius:9px;
  background:rgba(255,255,255,.05); border:1px solid var(--border);
  color:var(--muted); font-size:13px; font-weight:600;
  transition:background .18s;
}
.btn-admin:hover { background:rgba(255,255,255,.1); color:var(--text); }
.btn-cart-header {
  position:relative; width:40px; height:40px;
  border-radius:10px;
  background:rgba(255,255,255,.05); border:1px solid var(--border);
  color:var(--text); font-size:18px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:background .18s; flex-shrink:0;
}
.btn-cart-header:hover { background:rgba(255,255,255,.1); }
.cart-badge {
  position:absolute; top:-5px; right:-5px;
  background:var(--gold); color:#000;
  border-radius:50%; width:18px; height:18px;
  font-size:10px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
.btn-wa {
  display:flex; align-items:center; gap:7px;
  padding:8px 14px; border-radius:10px;
  background:#25D366; color:#fff;
  font-size:13px; font-weight:600;
  border:none; cursor:pointer;
  transition:background .18s, transform .18s;
}
.btn-wa:hover { background:#1db954; transform:scale(1.03); }
.btn-wa-text { display:none; }
@media(min-width:480px) { .btn-wa-text { display:inline; } }

/* Ocultar labels en pantallas muy pequeñas */
@media(max-width:360px) {
  .btn-admin span, .btn-faq-text, .btn-completos-text { display:none; }
  .btn-admin { padding:8px 10px; }
  .btn-faq   { padding:8px 10px; }
  .btn-completos { padding:8px 10px; }
}

/* ══════════════════════════════════════════════════
   HERO
══════════════════════════════════════════════════ */
.hero {
  position:relative; z-index:1;
  padding:56px 20px 48px;
  overflow:hidden;
}
.hero-bg {
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 70% 55% at 15% -10%, rgba(201,168,76,.13), transparent 60%),
    radial-gradient(ellipse 50% 50% at 85% 15%, rgba(201,168,76,.07), transparent 65%);
}
.hero-inner {
  position:relative;
  max-width:1200px; margin:0 auto;
  display:grid; grid-template-columns:1fr; gap:40px;
  align-items:center;
  text-align:center;
}
.hero-badge {
  display:inline-flex; align-items:center; gap:8px;
  background:var(--gold-s); border:1px solid var(--gold-b);
  border-radius:99px; padding:6px 18px;
  font-size:12px; font-weight:600; color:var(--gold);
  letter-spacing:.08em; text-transform:uppercase;
  margin-bottom:20px;
}
.hero h1 {
  font-family:'Playfair Display',serif;
  font-size:clamp(1.9rem,5.5vw,3.4rem);
  font-weight:600; line-height:1.15;
  color:var(--text); margin-bottom:16px;
}
.hero h1 span { font-style:italic; color:var(--gold); }
.hero p.hero-sub {
  font-size:15px; color:var(--muted);
  max-width:480px; margin:0 auto 26px;
  line-height:1.75;
}

/* Stats en vivo */
.hero-stats {
  display:flex; justify-content:center; flex-wrap:wrap;
  gap:0; margin:0 auto 26px;
  border:1px solid var(--border); border-radius:var(--r);
  background:rgba(255,255,255,.02);
  max-width:420px; overflow:hidden;
}
.hstat { flex:1; min-width:96px; padding:12px 10px; position:relative; }
.hstat + .hstat::before {
  content:''; position:absolute; left:0; top:20%; height:60%;
  width:1px; background:var(--border);
}
.hstat-num {
  font-family:'Playfair Display',serif;
  font-size:20px; font-weight:600; color:var(--gold); line-height:1.1;
}
.hstat-lbl {
  font-size:10px; color:var(--muted); letter-spacing:.07em;
  text-transform:uppercase; margin-top:3px;
}

/* CTAs — apilados a ancho completo en móvil, en fila desde 480px */
.hero-ctas {
  display:grid; grid-template-columns:1fr;
  gap:10px; margin-bottom:28px;
}
@media(min-width:480px) {
  .hero-ctas { display:flex; justify-content:center; flex-wrap:wrap; }
}
.hcta {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:46px; padding:0 22px; border-radius:11px;
  font-size:14px; font-weight:600;
  font-family:'Poppins',sans-serif;
  cursor:pointer; transition:transform .15s var(--ease), background .18s, border-color .18s;
  border:1px solid transparent;
}
.hcta:active { transform:scale(.97); }
.hcta-primary {
  background:var(--gold); color:#17140c;
  box-shadow:0 6px 22px rgba(201,168,76,.22);
}
.hcta-primary:hover { background:var(--gold-h); }
.hcta-ghost {
  background:rgba(255,255,255,.04);
  border-color:var(--border); color:var(--text);
}
.hcta-ghost:hover { border-color:var(--gold-b); background:rgba(255,255,255,.07); }

/* Features strip — 2x2 en móvil, 4 en fila desde 560px */
.hero-features {
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:10px; max-width:560px; margin:0 auto;
}
@media(min-width:560px) {
  .hero-features { grid-template-columns:repeat(4,1fr); }
}
.hfeat {
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--r); padding:14px 12px;
  transition:border-color .2s;
}
.hfeat:hover { border-color:var(--gold-b); }
.hfeat-icon {
  width:38px; height:38px; border-radius:50%;
  background:var(--gold-s); border:1px solid var(--gold-b);
  display:flex; align-items:center; justify-content:center;
  font-size:15px; color:var(--gold);
}
.hfeat-text { font-size:11px; font-weight:600; color:var(--muted); text-align:center; line-height:1.35; }

/* ══ Escaparate: una foto a la vez, con barra de avance ══
   Visible desde móvil. La barra se llena y al terminar pasa al
   siguiente perfume, como una historia. */
.hero-visual {
  position:relative;
  width:100%; max-width:240px;
  margin:30px auto 0;
}
.hero-visual[hidden] { display:none; }

.hero-shot {
  position:relative; display:block; width:100%;
  aspect-ratio:3/4; overflow:hidden;
  border-radius:var(--r-lg);
  border:1px solid var(--gold-b);
  background:var(--card);
  box-shadow:0 18px 45px rgba(0,0,0,.55);
  padding:0; cursor:pointer;
  font-family:inherit; text-align:left;
  transition:transform .35s var(--ease), border-color .3s;
}
.hero-shot:hover { transform:translateY(-4px); border-color:var(--gold); }
.hero-shot:focus-visible { outline:2px solid var(--gold); outline-offset:3px; }
/* Sin "arrastrar imagen" del navegador: con el mouse dibujaba una copia
   grande y translúcida de la foto encima de la página. */
.hero-shot img, .card-img img, .tf-img img, .modal-img img {
  -webkit-user-drag:none; user-select:none;
}
.hero-shot img {
  width:100%; height:100%; object-fit:cover; display:block;
  animation:shot-in .5s var(--ease) both;
}
@keyframes shot-in { from { opacity:0; transform:scale(1.03); } to { opacity:1; transform:none; } }

/* Cambio tipo página: la foto que sale se va hacia un lado (empezando desde
   donde la dejó el dedo) y la nueva entra por el otro. */
.hero-fantasma {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:1; pointer-events:none;
}
@keyframes hero-sale-izq  { from { transform:translateX(var(--desde,0)); } to { transform:translateX(-105%); } }
@keyframes hero-sale-der  { from { transform:translateX(var(--desde,0)); } to { transform:translateX(105%); } }
@keyframes hero-entra-der { from { transform:translateX(105%); } to { transform:none; } }
@keyframes hero-entra-izq { from { transform:translateX(-105%); } to { transform:none; } }
@keyframes hero-tag-in    { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
@keyframes hero-fundido   { from { opacity:0; } to { opacity:1; } }

/* Etiqueta de la colección, sobre la esquina superior */
.hero-col-chip {
  position:absolute; top:10px; left:10px; z-index:2;
  background:rgba(8,7,5,.78);
  border:1px solid var(--gold-b);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  color:var(--gold); border-radius:99px;
  padding:4px 11px; font-size:9.5px; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase; line-height:1;
}

.hero-shot-tag {
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:30px 13px 12px;
  background:linear-gradient(to top, rgba(8,7,5,.95) 30%, transparent);
  line-height:1.25;
}
.hero-shot-marca {
  display:block; font-size:9px; color:var(--gold);
  letter-spacing:.09em; text-transform:uppercase; margin-bottom:2px;
}
.hero-shot-nombre {
  display:block; font-size:13px; font-weight:600; color:var(--text);
}

/* Marco: contiene la foto y las flechas */
.hero-frame { position:relative; }

/* Flechas: discretas, se afirman al pasar el cursor o al tocar */
.hero-nav {
  position:absolute; top:50%; transform:translateY(-50%);
  width:38px; height:38px; border-radius:50%; z-index:3;
  display:flex; align-items:center; justify-content:center;
  background:rgba(8,7,5,.45); color:var(--text);
  border:1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  font-size:15px; cursor:pointer; opacity:.35;
  transition:opacity .2s, background .2s, border-color .2s;
}
.hero-nav-prev { left:8px; }
.hero-nav-next { right:8px; }
.hero-nav:hover { opacity:1; background:rgba(8,7,5,.75); border-color:var(--gold-b); }
.hero-nav:focus-visible { opacity:1; outline:2px solid var(--gold); outline-offset:2px; }
/* En escritorio se insinúan sólo al acercarse a la tarjeta */
@media(hover:hover) {
  .hero-nav { opacity:0; }
  .hero-frame:hover .hero-nav,
  .hero-frame:focus-within .hero-nav { opacity:.55; }
  .hero-frame:hover .hero-nav:hover { opacity:1; }
}

/* Segmentos: uno por perfume. El actual se llena, los vistos quedan llenos. */
.hero-segs {
  display:flex; gap:4px; margin-top:12px;
}
.hero-segs[hidden] { display:none; }
.hero-seg {
  flex:1; height:3px; padding:0; border:none;
  border-radius:99px; background:rgba(255,255,255,.14);
  cursor:pointer; overflow:hidden;
  /* El área táctil real es mayor que la línea visible */
  position:relative;
}
.hero-seg::after {
  content:''; position:absolute; left:0; right:0; top:-9px; bottom:-9px;
}
.hero-seg:focus-visible { outline:2px solid var(--gold); outline-offset:3px; }
.hero-seg-fill {
  display:block; height:100%; width:0;
  border-radius:99px; background:var(--gold);
}

@media(prefers-reduced-motion:reduce) {
  .hero-shot img { animation:none; }
  .hero-fantasma { display:none; }
  .hero-shot:hover { transform:none; }
}

/* Tablet: un poco más grande */
@media(min-width:600px) { .hero-visual { max-width:270px; } }

/* Desktop: dos columnas, la foto ocupa la segunda */
@media(min-width:900px) {
  .hero { padding:64px 20px 56px; }
  .hero-inner {
    grid-template-columns:1.05fr .95fr;
    gap:48px; text-align:left;
    align-items:center;
  }
  .hero p.hero-sub  { margin-left:0; margin-right:0; }
  .hero-stats       { margin-left:0; margin-right:0; justify-content:flex-start; }
  .hero-ctas,
  .hero-features    { justify-content:flex-start; margin-left:0; }

  .hero-visual { max-width:330px; margin:0 auto; }
  .hero-visual::before {
    content:''; position:absolute; inset:-12% -10% 10%;
    background:radial-gradient(circle at 50% 45%, rgba(201,168,76,.20), transparent 68%);
    filter:blur(26px); pointer-events:none; z-index:-1;
  }
  .hero-shot-nombre { font-size:14.5px; }
}

/* ══════════════════════════════════════════════════
   BARRA DE FILTROS  — mobile-first con scroll horizontal
══════════════════════════════════════════════════ */
.filter-bar {
  position:sticky; top:62px; z-index:100;
  background:rgba(13,12,10,.92);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--gold-b);
}

.fbar-row1 {
  display:flex; align-items:center; gap:8px;
  padding:10px 16px 6px;
  max-width:1200px; margin:0 auto;
}
.fbar-search {
  flex:1; display:flex; align-items:center;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(201,168,76,.18);
  border-radius:10px; padding:0 12px; gap:8px;
  height:40px; min-width:0;
}
.fbar-search i { color:var(--muted); font-size:14px; flex-shrink:0; }
.fbar-search input {
  background:transparent; border:none; outline:none;
  color:var(--text); font-size:14px;
  font-family:'Poppins',sans-serif;
  width:100%; min-width:0;
}
.fbar-search input::placeholder { color:#555; }
.fbar-sort {
  height:40px; padding:0 10px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(201,168,76,.18);
  border-radius:10px;
  color:var(--text); font-size:13px;
  font-family:'Poppins',sans-serif;
  display:none;
}
.fbar-sort option {
  background: var(--card);
  color: var(--gold);
  font-weight: 500;
}
@media(min-width:600px) { .fbar-sort { display:block; } }
.fbar-btn {
  position:relative; height:40px; padding:0 14px;
  background:var(--gold-s);
  border:1px solid var(--gold-b);
  border-radius:10px;
  color:var(--gold); font-size:13px; font-weight:600;
  font-family:'Poppins',sans-serif;
  display:flex; align-items:center; gap:7px;
  cursor:pointer; transition:background .15s; flex-shrink:0;
  white-space:nowrap;
}
.fbar-btn:hover, .fbar-btn.active { background:rgba(201,168,76,.22); }
.filter-badge {
  display:none;
  position:absolute; top:-6px; right:-6px;
  background:var(--gold); color:#111;
  border-radius:50%; width:18px; height:18px;
  font-size:10px; font-weight:700;
  align-items:center; justify-content:center;
}

.fbar-row2 {
  padding:0 16px 10px;
  max-width:1200px; margin:0 auto;
}
.fbar-tabs {
  display:flex; gap:6px;
  overflow-x:auto;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  padding-bottom:2px;
}
.fbar-tabs::-webkit-scrollbar { display:none; }
.fbar-tab {
  height:34px; padding:0 14px;
  border-radius:8px;
  background:rgba(255,255,255,.05);
  border:1px solid var(--border);
  color:var(--muted); font-size:13px; font-weight:600;
  font-family:'Poppins',sans-serif;
  white-space:nowrap; cursor:pointer; flex-shrink:0;
  transition:all .18s;
}
.fbar-tab:hover { border-color:var(--gold-b); color:var(--text); }
.fbar-tab.active {
  background:var(--gold-s);
  border-color:var(--gold-b);
  color:var(--gold);
}

/* ══ Panel lateral filtros ════════════════════════ */
#filter-overlay {
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,.65); z-index:500;
  opacity:0; transition:opacity .3s;
}
#filter-overlay.open { display:block; opacity:1; }
#filter-panel {
  position:fixed; top:0; right:0; height:100%;
  width:min(340px,92vw);
  background:#141210;
  border-left:1px solid var(--gold-b);
  z-index:501;
  transform:translateX(100%);
  transition:transform .35s var(--ease);
  display:flex; flex-direction:column; overflow:hidden;
}
#filter-panel.open { transform:translateX(0); }
.fpanel-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 20px 14px;
  border-bottom:1px solid var(--border); flex-shrink:0;
}
.fpanel-title {
  font-size:16px; font-weight:700; color:var(--text);
  display:flex; align-items:center; gap:8px;
}
.fpanel-title i { color:var(--gold); }
.fpanel-close {
  width:34px; height:34px; border-radius:8px;
  background:rgba(255,255,255,.06); border:1px solid var(--border);
  color:var(--muted); font-size:18px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:all .15s;
}
.fpanel-close:hover { background:rgba(255,255,255,.1); color:var(--text); }
.fpanel-body {
  flex:1; overflow-y:auto; padding:16px 20px;
  display:flex; flex-direction:column; gap:20px;
}
.fpanel-section-title {
  font-size:11px; font-weight:700;
  color:var(--gold); letter-spacing:.08em;
  text-transform:uppercase; margin-bottom:10px;
  display:flex; align-items:center; gap:6px;
}
.modal-envase-pills {
  display:flex; gap:8px; margin-bottom:0px; flex-wrap:wrap;
}
.envase-btn {
  flex:1; padding:10px; border:1px solid rgba(255,255,255,.1);
  border-radius:12px; background:rgba(255,255,255,.03);
  color:var(--text); font-size:13px; font-weight:500; cursor:pointer;
  transition:all .2s; font-family:'Poppins',sans-serif; text-align:center;
}
.envase-btn.active {
  background:var(--gold-s); border-color:var(--gold); color:var(--gold); font-weight:600;
}

.modal-pills { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px; }
.fcheck-label {
  display:flex; align-items:center; gap:6px;
  background:rgba(255,255,255,.04);
  border:1px solid var(--border);
  border-radius:8px; padding:6px 10px;
  cursor:pointer; transition:all .15s;
  font-size:13px; color:var(--muted);
  user-select:none;
}
.fcheck-label:hover { border-color:var(--gold-b); color:var(--text); }
.fcheck-label input[type=checkbox] { display:none; }
.fcheck-label:has(input:checked) {
  background:var(--gold-s);
  border-color:rgba(201,168,76,.45);
  color:#e8c96a;
}
.fsort-list { display:flex; flex-direction:column; gap:6px; }
/* Tipo, familia y marca: fichas con espacio entre sí, como "Ordenar por" */
.fcheck-list { display:flex; flex-wrap:wrap; gap:8px; }
.fcheck-label i { color:var(--gold); font-size:14px; }
.fcheck-label:has(input:checked) i { color:#e8c96a; }
.fpanel-body > div + div { padding-top:18px; border-top:1px solid rgba(255,255,255,.06); }
.fsort-label {
  display:flex; align-items:center; gap:8px;
  padding:8px 10px; border-radius:8px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
  cursor:pointer; transition:all .15s;
  font-size:13px; color:var(--muted); user-select:none;
}
.fsort-label:hover { border-color:var(--gold-b); color:var(--text); }
.fsort-label input[type=radio] { display:none; }
.fsort-label:has(input:checked) {
  background:rgba(201,168,76,.1);
  border-color:var(--gold-b);
  color:#e8c96a;
}
.fsort-dot {
  width:8px; height:8px; border-radius:50%;
  border:2px solid #555; flex-shrink:0; transition:all .15s;
}
.fsort-label:has(input:checked) .fsort-dot {
  background:var(--gold); border-color:var(--gold);
}
.fpanel-footer {
  padding:14px 20px;
  border-top:1px solid var(--border);
  display:flex; gap:10px; flex-shrink:0;
}
.fpanel-btn-clear {
  flex:1; height:42px; border-radius:10px;
  background:rgba(255,255,255,.05);
  border:1px solid var(--border);
  color:var(--muted); font-size:13px; font-weight:600;
  font-family:'Poppins',sans-serif; cursor:pointer; transition:all .15s;
}
.fpanel-btn-clear:hover { background:rgba(255,255,255,.1); color:var(--text); }
.fpanel-btn-apply {
  flex:2; height:42px; border-radius:10px;
  background:rgba(201,168,76,.2);
  border:1px solid var(--gold-b);
  color:var(--gold); font-size:13px; font-weight:700;
  font-family:'Poppins',sans-serif; cursor:pointer; transition:all .15s;
}
.fpanel-btn-apply:hover { background:rgba(201,168,76,.3); }
body.filters-open { overflow:hidden; }

/* ══ Catálogo ════════════════════════════════════ */
.catalog {
  position:relative; z-index:1;
  max-width:1200px; margin:0 auto;
  padding:28px 16px 80px;
}
.cat-header {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:20px;
}
.cat-header h2 {
  font-family:'Playfair Display',serif;
  font-size:clamp(1.2rem,3vw,1.6rem);
  font-weight:600; color:var(--text);
}
.count-badge {
  background:var(--gold-s); border:1px solid var(--gold-b);
  border-radius:99px; padding:4px 14px;
  font-size:12px; font-weight:600; color:var(--gold);
}

/* ══ Toast Deshacer ══════════════════════════════ */
#undo-toast {
  position:fixed; bottom:88px; left:50%;
  transform:translateX(-50%) translateY(20px);
  background:var(--card2); border:1px solid rgba(201,168,76,.5);
  color:var(--text); border-radius:14px; padding:12px 16px;
  display:flex; align-items:center; gap:12px;
  font-size:13px; font-weight:500;
  box-shadow:0 8px 32px rgba(0,0,0,.6);
  opacity:0; pointer-events:none;
  transition:opacity .25s, transform .25s;
  z-index:9999; white-space:nowrap;
  max-width:calc(100vw - 32px);
}
#undo-toast.show { opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0); }
#undo-msg { overflow:hidden; text-overflow:ellipsis; max-width:220px; }
#undo-btn {
  background:var(--gold-s); border:1px solid rgba(201,168,76,.45);
  color:var(--gold); border-radius:8px; padding:6px 14px;
  font-size:12px; font-weight:700; cursor:pointer;
  white-space:nowrap; transition:background .15s; flex-shrink:0;
}
#undo-btn:hover { background:rgba(201,168,76,.28); }

/* ══ Toast normal ════════════════════════════════ */
#toast {
  position:fixed; bottom:160px; left:50%;
  transform:translateX(-50%) translateY(10px);
  background:var(--card); color:var(--text);
  border:1px solid rgba(201,168,76,.3);
  border-radius:10px; padding:10px 20px;
  font-size:13px; font-weight:500;
  opacity:0; pointer-events:none;
  transition:opacity .2s, transform .2s;
  z-index:10000; white-space:nowrap;
  max-width:calc(100vw - 32px); text-align:center;
}
#toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* ══ FAB WhatsApp ════════════════════════════════ */
#wa-fab {
  position:fixed; bottom:24px; left:24px;
  width:62px; height:62px; border-radius:50%;
  background:#25D366; border:2px solid rgba(255,255,255,.9);
  color:#fff; font-size:30px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 20px rgba(0,0,0,.45);
  z-index:300; cursor:pointer;
  transition:transform .2s, box-shadow .2s, opacity .25s;
  text-decoration:none;
  animation:pulse-wa 2.6s ease-in-out infinite;
}
@keyframes pulse-wa {
  0%,100% { box-shadow:0 6px 20px rgba(37,211,102,.2); }
  50%      { box-shadow:0 6px 32px rgba(37,211,102,.5); }
}
#wa-fab:hover { transform:scale(1.1); background:#1db954; }
#wa-fab::after {
  content:'¿Tienes dudas?'; position:absolute;
  left:calc(100% + 10px); top:50%; transform:translateY(-50%);
  background:var(--card2); border:1px solid rgba(255,255,255,.12);
  color:var(--text); font-size:12px; font-weight:500;
  white-space:nowrap; padding:6px 12px; border-radius:8px;
  opacity:0; pointer-events:none; transition:opacity .18s;
  font-family:'Poppins',sans-serif;
}
#wa-fab:hover::after { opacity:1; }
@media(max-width:480px) {
  #wa-fab::after { display:none; }
  #wa-fab { width:58px; height:58px; font-size:28px; bottom:20px; left:16px; }
}
body.cart-open #wa-fab { opacity:0; pointer-events:none; }

/* ══ Controles qty modal ════════════════════════ */
.modal-qty-controls {
  display:flex; align-items:center; justify-content:center;
  gap:0; margin-bottom:10px;
  background:var(--gold-s); border:1.5px solid rgba(201,168,76,.4);
  border-radius:12px; overflow:hidden;
}
.mqty-btn {
  width:48px; height:46px; font-size:22px; font-weight:300;
  background:transparent; border:none; color:var(--gold);
  display:flex; align-items:center; justify-content:center;
  transition:background .15s; flex-shrink:0; cursor:pointer;
}
.mqty-btn:hover:not(:disabled) { background:rgba(201,168,76,.2); }
.mqty-btn:disabled { color:#444; cursor:not-allowed; }
.mqty-num {
  flex:1; text-align:center; font-size:16px; font-weight:700; color:var(--text);
  border-left:1px solid rgba(201,168,76,.2);
  border-right:1px solid rgba(201,168,76,.2);
  padding:0 8px;
}

/* ══ Cart drawer scroll ══════════════════════════ */
.cart-drawer { display:flex; flex-direction:column; overflow:hidden; }
.cart-body {
  flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain; padding:12px 16px;
  display:flex; flex-direction:column; gap:10px; min-height:0;
}
#cart-list { display:contents; }
.cart-close-row { display:none; padding:0 16px 14px; flex-shrink:0; }
.btn-cart-close-bottom {
  width:100%; padding:13px; border-radius:12px;
  background:rgba(255,255,255,.06); border:1px solid var(--border);
  color:var(--muted); font-size:14px; font-weight:600;
  display:flex; align-items:center; justify-content:center; gap:8px;
  transition:background .15s; cursor:pointer; font-family:'Poppins',sans-serif;
}
.btn-cart-close-bottom:hover { background:rgba(255,255,255,.1); color:var(--text); }
@media(max-width:480px) {
  .cart-close-row { display:block; }
  #btn-cart-close { display:none; }
}
.cart-handle {
  display:none; width:40px; height:4px;
  background:rgba(255,255,255,.18); border-radius:2px;
  margin:10px auto 4px; flex-shrink:0; cursor:pointer;
}
@media(max-width:480px) { .cart-handle { display:block; } }

/* ══ Footer ═════════════════════════════════════ */
footer {
  position:relative; z-index:1;
  border-top:1px solid var(--border);
  padding:36px 20px;
  text-align:center;
}
.footer-social p {
  font-size:13px; color:var(--muted); margin-bottom:14px;
}
.social-buttons {
  display:flex; gap:10px; justify-content:center; flex-wrap:wrap;
  margin-bottom:28px;
}
.social-btn {
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 18px; border-radius:10px;
  font-size:13px; font-weight:600;
  border:1px solid var(--border);
  transition:all .18s;
}
.social-btn.instagram { background:rgba(225,48,108,.08); color:#e1306c; border-color:rgba(225,48,108,.25); }
.social-btn.instagram:hover { background:rgba(225,48,108,.18); }
.social-btn.tiktok    { background:rgba(255,255,255,.04); color:var(--text); }
.social-btn.tiktok:hover { background:rgba(255,255,255,.1); }
.social-btn.facebook  { background:rgba(24,119,242,.08); color:#1877f2; border-color:rgba(24,119,242,.25); }
.social-btn.facebook:hover { background:rgba(24,119,242,.18); }
.footer-copy p { font-size:12px; color:var(--faint); }
.footer-copy a { color:var(--muted); transition:color .18s; }
.footer-copy a:hover { color:var(--gold); }

.footer-faq-link {
  display:inline-flex; align-items:center; gap:7px;
  margin-bottom:20px;
  color:var(--muted); font-size:13px;
  transition:color .18s;
}
.footer-faq-link:hover { color:var(--gold); }
.footer-faq-link i { color:var(--gold); }

.load-more-wrap { text-align:center; padding-top:24px; }
.btn-load-more {
  padding:12px 28px; border-radius:12px;
  background:var(--gold-s); border:1px solid var(--gold-b);
  color:var(--gold); font-size:14px; font-weight:600;
  font-family:'Poppins',sans-serif; cursor:pointer;
  display:inline-flex; align-items:center; gap:8px;
  transition:background .18s;
}
.btn-load-more:hover { background:rgba(201,168,76,.22); }
.load-more-info { display:block; font-size:12px; color:var(--muted); margin-top:8px; }

/* ══ Newsletter (pie de página) ══════════════════════════ */
.footer-news {
  max-width: 460px;
  margin: 0 auto 24px;
  padding: 18px 16px;
  border: 1px solid var(--gold-b);
  border-radius: 16px;
  background: var(--gold-s);
  text-align: center;
}
.footer-news-titulo { font-size: 15px; font-weight: 700; color: var(--text); margin: 0 0 4px; }
.footer-news-titulo i { color: var(--gold); }
.footer-news-texto { font-size: 13px; color: var(--muted); margin: 0 0 12px; line-height: 1.45; }
.footer-news-form { display: flex; gap: 8px; }
.footer-news-form input {
  flex: 1;
  min-width: 0;
  height: 44px;
  padding: 0 14px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  background: rgba(0,0,0,.35);
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
}
.footer-news-form input { transition: border-color .18s, box-shadow .18s; }
.footer-news-form input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201,168,76,.18); }
.footer-news-form button {
  height: 44px;
  padding: 0 16px;
  border: none;
  border-radius: 10px;
  background: var(--gold);
  color: #14120e;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.footer-news-form button { transition: background .15s, transform .14s, box-shadow .2s; }
.footer-news-form button:hover:not(:disabled) { background: #e0b95a; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(201,168,76,.28); }
.footer-news-form button:active:not(:disabled) { transform: scale(.95); box-shadow: none; }
.footer-news-form button:disabled { opacity: .6; cursor: wait; }
.footer-news-msg { min-height: 18px; margin: 8px 0 0; font-size: 13px; }
.footer-news-msg:not(:empty) { animation: news-msg .3s ease-out; }
@keyframes news-msg { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.footer-news-msg[data-tipo="ok"] { color: #4ade80; }
.footer-news-msg[data-tipo="error"] { color: #f87171; }
.footer-news-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 360px) { .footer-news-form { flex-direction: column; } }