/* ═══════════════════════════════════════════════════════════
   HENNESY — estilos.css
   Compartido por index.html y catalogo.html
   Secciones: BASE · HERO · HEADER · CATEGORÍAS · EDICIÓN INVIERNO
              · DESKTOP · CATÁLOGO · BUSCADOR · CARRITO · TOAST
              · WHATSAPP FLOTANTE · FOOTER
   ═══════════════════════════════════════════════════════════ */

/* ═══════════ BASE ═══════════ */
:root{
  --negro:#0B0A08;--carbon:#13100C;--hueso:#F2EDE3;
  --hueso-60:rgba(242,237,227,.6);--hueso-35:rgba(242,237,227,.35);
  --oro:#C9A227;--oro-bri:#E8C55F;--oro-line:rgba(201,162,39,.4);
  --glow:rgba(201,162,39,.25);--fuego:#E8542F;--wsp:#25D366;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}

/* ═══════════ BLOQUEO / CUENTA REGRESIVA (lanzamiento) ═══════════ */
.bloqueo{position:fixed;inset:0;z-index:99999;background:
  radial-gradient(ellipse at 50% 30%, rgba(201,162,39,.14), transparent 60%), #0B0A08;
  display:flex;align-items:center;justify-content:center;padding:32px 22px;
  animation:bloq-in .5s ease both}
@keyframes bloq-in{from{opacity:0}to{opacity:1}}
.bloq-in{width:100%;max-width:440px;text-align:center;display:flex;flex-direction:column;align-items:center}
.bloq-logo{width:150px;height:auto;margin-bottom:26px;animation:bloq-late 2.4s ease-in-out infinite}
@keyframes bloq-late{50%{opacity:.7}}
.bloq-lbl{font-size:10px;letter-spacing:.42em;text-transform:uppercase;color:var(--oro);font-weight:600;margin-bottom:14px}
.bloq-tit{font-family:'Anton';font-size:clamp(44px,15vw,68px);text-transform:uppercase;line-height:.95;
  background:linear-gradient(180deg,#F6E8B8,var(--oro-bri) 55%,#9C7E1E);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:8px}
.bloq-sub{font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--hueso-60);margin-bottom:24px}
.bloq-count{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:20px}
.bc-box{background:linear-gradient(165deg,rgba(201,162,39,.14),rgba(201,162,39,.04));
  border:1px solid var(--oro-line);border-radius:14px;padding:12px 8px;min-width:64px;display:flex;flex-direction:column;gap:5px}
.bc-box b{font-family:'Anton';font-size:clamp(26px,8vw,36px);color:var(--hueso);line-height:1;font-weight:400;font-variant-numeric:tabular-nums}
.bc-box small{font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--hueso-35)}
.bc-sep{font-family:'Anton';font-size:26px;color:var(--oro-line);align-self:flex-start;margin-top:10px}
.bloq-fecha{font-size:13px;color:var(--oro-bri);font-weight:500;text-transform:capitalize;margin-bottom:30px;letter-spacing:.02em}
.bloq-acc{display:flex;gap:8px;width:100%;max-width:320px;transition:transform .1s}
.bloq-acc.mal{animation:bloq-shake .4s}
@keyframes bloq-shake{25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}
.bloq-acc input{flex:1;background:rgba(255,255,255,.04);border:1px solid var(--linea,rgba(242,237,227,.12));border-radius:12px;
  padding:13px 15px;color:var(--hueso);font-size:14px;outline:none;text-align:center;letter-spacing:.05em}
.bloq-acc input:focus{border-color:var(--oro-line)}
.bloq-acc button{padding:0 20px;border:none;border-radius:12px;font-weight:700;font-size:13px;letter-spacing:.04em;
  background:linear-gradient(180deg,var(--oro-bri),var(--oro));color:#231a05;cursor:pointer;white-space:nowrap}
.bloq-err{font-size:12px;color:var(--fuego);min-height:16px;margin-top:10px;font-weight:600}
@media(prefers-reduced-motion:reduce){.bloq-logo{animation:none}}
/* RENDIMIENTO: toque instantáneo (sin espera de doble-tap) y sin selección accidental */
button,a,.fchip,.card,.cta,.ed-cta,.b-res,.add{touch-action:manipulation;-webkit-user-select:none;user-select:none}
body{background:var(--negro);color:var(--hueso);font-family:'Geist',sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:var(--oro);color:var(--negro)}
button{font-family:'Geist',sans-serif}

/* ═══════════ HERO ═══════════ */
.hero{position:relative;height:84vh;min-height:490px;max-height:900px;overflow:hidden}
.hero video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;
}
/* imagen fija (1er frame) ENCIMA del video: tapa el botón de play nativo de iOS.
   Se desvanece cuando el video realmente arranca; si iOS bloquea el autoplay
   (modo bajo consumo), queda como hero de imagen limpio. */
.hero .poster-cover{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;
  z-index:2;transition:opacity .7s ease;pointer-events:none;
}
.hero.playing .poster-cover{opacity:0}
.hero .velo-hero{position:absolute;inset:0;z-index:3;
  background:linear-gradient(180deg,rgba(7,6,5,.42) 0%,transparent 30%,transparent 62%,rgba(7,6,5,.78) 100%)}
.marca-capa{
  position:absolute;top:16%;left:0;right:0;z-index:10;
  padding:0 18px;text-align:center;pointer-events:none;
}
.logo-lit{
  width:74%;max-width:340px;display:block;margin:0 auto;
  opacity:0;transform:translateY(28px) scale(.97);filter:blur(10px);
  animation:logo-entra 1.4s cubic-bezier(.2,.7,.2,1) .35s forwards;
}
@keyframes logo-entra{to{opacity:1;transform:translateY(0) scale(1);filter:blur(0) drop-shadow(0 8px 40px rgba(0,0,0,.85))}}
.pie-capa{
  position:absolute;left:0;right:0;bottom:0;z-index:10;
  padding:80px 26px max(36px, env(safe-area-inset-bottom,0px) + 28px);text-align:center;
}
.cta{
  position:relative;display:inline-flex;align-items:center;gap:14px;
  padding:19px 46px;border-radius:999px;overflow:hidden;
  color:var(--hueso);text-decoration:none;
  font-size:12px;letter-spacing:.34em;text-transform:uppercase;font-weight:600;
  background:rgba(11,10,8,.55);
  border:1px solid transparent;background-clip:padding-box;
  opacity:0;animation:aparecer 1.2s ease 1.9s forwards;
  transition:letter-spacing .5s, transform .35s;cursor:pointer;
}
/* borde giratorio por transform (GPU) en vez de repintar el gradiente cuadro a cuadro */
.cta::before{
  content:'';position:absolute;left:50%;top:50%;width:170%;aspect-ratio:1;z-index:-2;
  background:conic-gradient(rgba(201,162,39,.15),var(--oro-bri),rgba(201,162,39,.15) 40%);
  animation:girar-borde 4.5s linear infinite;
}
@keyframes girar-borde{from{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}
.cta::after{content:'';position:absolute;inset:1px;border-radius:999px;z-index:-1;background:rgba(11,10,8,.82)}
.cta .flecha{display:inline-block;transition:transform .45s cubic-bezier(.2,.7,.2,1);color:var(--oro-bri);font-size:15px}
.cta:hover{letter-spacing:.42em;transform:translateY(-2px)}
.cta:hover .flecha{transform:translateY(4px)}
.cta:active{transform:scale(.96)}
.cta .sheen{
  position:absolute;inset:0;border-radius:999px;pointer-events:none;
  background:linear-gradient(115deg,transparent 38%,rgba(232,197,95,.28) 50%,transparent 62%);
  transform:translateX(-120%);animation:sheen 5s ease 3s infinite;
}
@keyframes sheen{0%{transform:translateX(-120%)}45%,100%{transform:translateX(120%)}}
@keyframes aparecer{to{opacity:1}}
.drop-line{
  margin-top:16px;font-size:9.5px;letter-spacing:.34em;text-transform:uppercase;color:var(--hueso-60);
  opacity:0;animation:aparecer 1.4s ease 2.4s forwards;text-shadow:0 2px 12px rgba(0,0,0,.8);
}
.drop-line b{color:var(--oro-bri);font-weight:700}

/* ═══════════ HEADER + LA CINTA ═══════════ */
.head{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:rgba(11,10,8,.96); /* sólido: el blur sobre contenido que scrollea mataba el rendimiento */
  border-bottom:1px solid var(--oro-line);
  transform:translateY(-102%);transition:transform .55s cubic-bezier(.2,.7,.2,1);
  will-change:transform;
}
.head.visible{transform:translateY(0)}
.fila{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px 9px;max-width:1100px;margin:0 auto;
  max-height:70px;overflow:hidden;
  transition:max-height .55s cubic-bezier(.2,.7,.2,1), padding .55s, opacity .45s;
}
/* (el header ya no se oculta al bajar: aparece tras el hero y se queda) */
.icono{
  width:40px;height:40px;border-radius:50%;border:1px solid rgba(242,237,227,.16);
  display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--hueso-60);
  background:transparent;cursor:pointer;transition:all .3s;position:relative;flex-shrink:0;
}
.icono:hover{border-color:var(--oro-line);color:var(--oro-bri)}
.icono:active{transform:scale(.9)}
/* carrito: siempre dorado y con presencia — es EL botón del negocio */
.icono.icono-carrito{
  border-color:var(--oro-line);color:var(--oro-bri);
  background:rgba(201,162,39,.08);
  box-shadow:0 0 14px -4px rgba(201,162,39,.45);
}
.icono.icono-carrito:hover{background:rgba(201,162,39,.16);box-shadow:0 0 18px -4px rgba(201,162,39,.65)}
.burbuja{
  position:absolute;top:-4px;right:-4px;min-width:17px;height:17px;border-radius:999px;
  background:var(--oro);color:var(--negro);font-size:9.5px;font-weight:700;
  display:none;align-items:center;justify-content:center;padding:0 4px;
  transition:transform .3s cubic-bezier(.3,1.6,.5,1);
  box-shadow:0 2px 8px rgba(0,0,0,.5);
}
.burbuja.activa{display:flex}
.burbuja.pum{transform:scale(1.45)}
.logo-head{height:26px;cursor:pointer;display:block}
.cinta{
  height:34px;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;
  border-top:1px solid rgba(201,162,39,.18);
}
.head.oculto .cinta{border-top-color:transparent}
.cinta .fr{
  position:absolute;font-size:10px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--oro-bri);font-weight:500;opacity:0;transform:translateY(8px);
  transition:opacity .7s,transform .7s;white-space:nowrap;padding:0 12px;
}
.cinta .fr.on{opacity:1;transform:translateY(0)}
/* frases v2: dorado para escasez/FOMO · blanco espaciado para las exclusivas */
.cinta .fr-oro{color:var(--oro-bri)}
.cinta .fr-exclusiva{color:rgba(255,255,255,.9)}
.progreso{height:2px;background:linear-gradient(90deg,var(--oro),var(--oro-bri));width:0%;box-shadow:0 0 8px rgba(232,197,95,.5)}

/* ═══════════ ELEGÍ CÓMO BUSCAR (categorías) ═══════════ */
.cats-wrap{max-width:1100px;margin:0 auto;padding:58px 18px 8px}
.e-lbl{font-size:10px;letter-spacing:.42em;text-transform:uppercase;color:var(--oro);font-weight:600;margin-bottom:10px}
.e-tit{font-family:'Anton';font-size:clamp(32px,8vw,54px);line-height:.98;text-transform:uppercase}
.e-tit .g{color:var(--oro-bri)}
.e-sub{margin-top:10px;font-size:14px;line-height:1.6;color:var(--hueso-60);max-width:430px}
.busca-trigger{
  display:flex;align-items:center;gap:12px;margin:22px 0 24px;
  border:1px solid rgba(242,237,227,.14);border-radius:16px;padding:15px 18px;
  color:var(--hueso-35);font-size:14.5px;cursor:pointer;transition:all .35s;
  background:rgba(242,237,227,.02);max-width:560px;
}
.busca-trigger:hover{border-color:var(--oro-line);color:var(--hueso-60)}
.cats{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cat{
  background:radial-gradient(circle at 18% 12%,rgba(201,162,39,.08),transparent 55%),linear-gradient(165deg,#171310,var(--carbon));
  border:1px solid rgba(242,237,227,.14);border-radius:20px;padding:18px 16px 17px;
  position:relative;overflow:hidden;transition:border-color .5s, box-shadow .5s;
  opacity:0; /* la entrada es SOLO opacidad: los botones nunca se mueven bajo el dedo */
}
.cat.visto{opacity:1;transition:opacity .45s ease,border-color .5s,box-shadow .5s}
.cat:hover{border-color:var(--oro-line);box-shadow:0 24px 44px -30px var(--glow)}
.cat.full{grid-column:1 / -1}
.cat-top{display:flex;align-items:center;gap:9px;margin-bottom:15px}
.cat-ico{width:30px;height:30px;border-radius:9px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  background:rgba(201,162,39,.1);border:1px solid var(--oro-line);color:var(--oro-bri)}
.cat-tit{font-family:'Anton';font-size:15px;letter-spacing:.06em;text-transform:uppercase;line-height:1}
.cat-tit small{display:block;font-family:'Geist';font-size:9px;letter-spacing:.24em;color:var(--hueso-35);font-weight:500;margin-top:3px}
/* botones GOLD FOIL: apagado = cuero oscuro con hilo dorado;
   elegido (.on) = lámina de oro fluyendo + destello de sello */
.fchips{display:flex;flex-wrap:wrap;gap:9px}
.fchip{
  position:relative;font-size:12.5px;font-weight:600;min-height:44px;padding:0 18px;
  border-radius:999px;cursor:pointer;overflow:hidden;
  display:inline-flex;align-items:center;gap:7px;font-family:'Geist';
  color:var(--hueso-60);
  background:linear-gradient(175deg,#1c1712,#0f0c08);
  border:1px solid rgba(201,162,39,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 3px 8px -4px rgba(0,0,0,.8);
  transition:transform .25s cubic-bezier(.3,1.4,.4,1), color .3s, border-color .3s;
}
a.fchip{text-decoration:none}
.fchip:hover{border-color:rgba(201,162,39,.55);color:var(--hueso)}
.fchip:active{transform:scale(.94)}
.fchip.on{
  color:#231a05;border-color:transparent;font-weight:700;
  background:linear-gradient(105deg,#B8912C 0%,#E8C55F 45%,#F5E3A6 55%,#E8C55F 65%,#B8912C 100%);
  box-shadow:0 4px 16px -4px rgba(232,197,95,.55), inset 0 1px 0 rgba(255,255,255,.5);
  text-shadow:0 1px 0 rgba(255,255,255,.35);
}
@keyframes foil-fluye{to{background-position:-220% center}} /* la usan las páginas de pruebas */
/* el destello viaja por transform (GPU), no repintando el fondo */
.fchip.on::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.55) 50%,transparent 60%);
  transform:translateX(-130%);animation:foil-brillo 2.6s ease infinite;
}
@keyframes foil-brillo{0%{transform:translateX(-130%)}55%,100%{transform:translateX(130%)}}
.cat-help{font-size:13px;color:rgba(255,255,255,.62);margin-top:13px;line-height:1.5}
.cat-help .ch-blanca{color:rgba(255,255,255,.7)}
.cat-help .ch-oro{color:var(--oro-bri);font-weight:500}

/* vida de las cards: barrido de luz dorada */
.cat::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 32%,rgba(232,197,95,.06) 50%,transparent 68%);
  transform:translateX(-120%);animation:barrido-oro 6s ease-in-out infinite}
@keyframes barrido-oro{0%{transform:translateX(-120%)}60%,100%{transform:translateX(120%)}}

/* íconos animados de los títulos (solo opacity/transform = GPU) */
.ico-rayo svg{animation:rayo-parpadeo 2.2s ease-in-out infinite;filter:drop-shadow(0 0 4px rgba(232,197,95,.6))}
@keyframes rayo-parpadeo{
  0%,100%{opacity:1;transform:scale(1)}
  42%{opacity:.5;transform:scale(1.15)}
  58%{opacity:1;transform:scale(1.05)}
}
.ico-gente svg{animation:gente-flota 3s ease-in-out infinite}
@keyframes gente-flota{0%,100%{transform:translateY(2px)}50%{transform:translateY(-2px)}}
.ico-reloj svg{animation:reloj-tick 2s ease-in-out infinite;transform-origin:center}
@keyframes reloj-tick{0%,70%,100%{transform:rotate(0deg)}82%{transform:rotate(8deg)}}

/* micro-íconos de los chips de DESTACADOS */
.fchip .mi{font-size:13px;line-height:1;display:inline-block}
.mi-fuego{animation:mi-flick .9s ease-in-out infinite}
@keyframes mi-flick{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}
.mi-estrella{animation:mi-twinkle 2.5s ease-in-out infinite}
@keyframes mi-twinkle{0%,100%{opacity:1;transform:rotate(0deg)}50%{opacity:.45;transform:rotate(20deg)}}
.mi-reloj{animation:mi-balanceo 2s ease-in-out infinite}
@keyframes mi-balanceo{0%,100%{transform:rotate(-12deg)}50%{transform:rotate(12deg)}}

/* ═══ CARD EDICIÓN INVIERNO — foto real de fondo ═══ */
.edicion-inv{
  grid-column:1 / -1;position:relative;overflow:hidden;border-radius:22px;
  border:1px solid rgba(154,212,240,.4);
  min-height:250px;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;
  background:url('invierno.jpg?v=2') 72% 40% / cover no-repeat #0d1418;
  box-shadow:0 30px 60px -34px rgba(154,212,240,.3);
  opacity:0;
}
.edicion-inv.visto{opacity:1;transition:opacity .5s ease .05s}
.edicion-inv .scrim-inv{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(6,9,12,.88) 0%,rgba(6,9,12,.55) 38%,transparent 68%),
    linear-gradient(180deg,transparent 62%,rgba(6,9,12,.5) 100%)}
.edicion-inv .ed-logo{position:absolute;top:14px;right:16px;height:13px;width:auto;z-index:2;
  opacity:.4;filter:drop-shadow(0 2px 6px rgba(0,0,0,.6));pointer-events:none}
.ed-cont{position:relative;z-index:2;padding:20px 18px 22px;max-width:58%}
.ed-tit{font-family:'Anton';font-size:clamp(26px,7vw,44px);text-transform:uppercase;line-height:.95;margin:0 0 6px;
  text-shadow:0 6px 26px rgba(0,0,0,.7)}
.ed-tit .hielo{color:#C7EBFB}
.ed-sub{font-size:14px;color:rgba(242,237,227,.75);line-height:1.5;max-width:360px;text-shadow:0 2px 12px rgba(0,0,0,.8)}
.ed-cta{
  display:inline-flex;align-items:center;gap:10px;margin-top:14px;text-decoration:none;
  padding:11px 22px;border-radius:999px;cursor:pointer;border:none;
  color:#0B0A08;font-size:10px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;font-family:'Geist';
  background:linear-gradient(120deg,#9AD4F0,#C7EBFB);transition:transform .3s;
  box-shadow:0 10px 26px -10px rgba(154,212,240,.5);
}
.ed-cta:active{transform:scale(.97)}

/* ═══════════ CATÁLOGO (página catalogo.html) ═══════════ */
.catalogo{max-width:1100px;margin:0 auto;padding:64px 18px 40px}
/* en catalogo.html el header está fijo y siempre visible → empujamos el contenido */
body.pag-catalogo .catalogo{padding-top:140px}
.volver{
  display:inline-flex;align-items:center;gap:8px;margin-bottom:22px;
  font-size:10px;letter-spacing:.24em;text-transform:uppercase;font-weight:600;
  color:var(--hueso-60);text-decoration:none;transition:color .3s;
  background:none;border:none;cursor:pointer;font-family:'Geist';padding:6px 0;
}
.volver:hover{color:var(--oro-bri)}
.c-tag{font-size:10px;letter-spacing:.42em;text-transform:uppercase;color:var(--oro);font-weight:600;margin-bottom:10px}
.c-titulo{font-family:'Anton';font-size:clamp(34px,8vw,58px);text-transform:uppercase;line-height:1;margin-bottom:8px}
.c-frase{font-family:'Geist',sans-serif;font-weight:500;font-size:clamp(17px,4vw,22px);color:var(--hueso-60);margin-bottom:30px}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:13px}
.card{
  display:block;color:inherit;text-decoration:none;
  background:var(--carbon);border:1px solid rgba(242,237,227,.08);border-radius:18px;
  overflow:hidden;transition:transform .5s cubic-bezier(.2,.7,.2,1),border-color .5s,box-shadow .5s;
  cursor:pointer;position:relative;
  opacity:0; /* entrada solo por opacidad: el toque nunca falla */
}
.card.visto{opacity:1;transition:opacity .5s ease,border-color .5s,box-shadow .5s}
.card:hover{transform:translateY(-6px);border-color:var(--oro-line);box-shadow:0 26px 50px -28px var(--glow)}
.card-img{
  aspect-ratio:4/5;position:relative;overflow:hidden;
  background:radial-gradient(ellipse at 50% 78%,var(--glow),var(--carbon) 74%);
  display:flex;align-items:flex-end;justify-content:center;
}
.frasco{
  width:34%;aspect-ratio:5/8;margin-bottom:16%;position:relative;border-radius:8px;
  background:linear-gradient(160deg,var(--oro-bri),var(--oro));
  box-shadow:0 18px 32px -12px rgba(0,0,0,.75), inset 0 0 18px rgba(255,255,255,.2);
  transition:transform .6s cubic-bezier(.2,.7,.2,1);
}
.frasco::before{content:'';position:absolute;top:-17%;left:50%;transform:translateX(-50%);
  width:26%;aspect-ratio:1;background:linear-gradient(#d8c184,#8a6a1f);border-radius:3px}
.frasco::after{content:'';position:absolute;inset:10% 12%;border-radius:5px;
  background:linear-gradient(120deg,rgba(255,255,255,.4),transparent 45%)}
.card:hover .frasco{transform:translateY(-6px) scale(1.05)}
.badge{
  position:absolute;top:11px;left:11px;z-index:2;font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;
  padding:6px 11px;border-radius:999px;background:rgba(11,10,8,.82);
  color:var(--oro-bri);border:1px solid var(--oro-line);
}
.badge.flash{color:var(--fuego);border-color:rgba(232,84,47,.5)}
.badge.agotado{color:#ff6a4d;background:rgba(38,10,6,.9);border-color:rgba(232,84,47,.55);left:auto;right:11px}
/* card agotada: apagada, en rojo, sin sumar al carrito */
.card.agotada .card-img::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:rgba(48,8,4,.4)}
.card.agotada .card-foto,.card.agotada .frasco{filter:brightness(.55) grayscale(.15) saturate(.9)}
.card.agotada .card-nombre{color:var(--hueso-60)}
.card.agotada .precio{color:#ff6a4d;opacity:.85}
.card.agotada .precio-viejo{display:none}
.card.agotada .add{background:rgba(232,84,47,.14);border-color:rgba(232,84,47,.4);color:#ff6a4d;opacity:1;cursor:not-allowed}
.card-info{padding:14px 14px 16px}
.card-marca{font-size:8.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--hueso-35);margin-bottom:5px}
.card-nombre{font-family:'Anton';font-size:clamp(15px,3.6vw,19px);text-transform:uppercase;line-height:1.06}
.card-notas{
  font-family:'Geist',sans-serif;font-size:12.5px;color:var(--hueso-60);margin-top:5px;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;
}
.card-pie{display:flex;align-items:center;justify-content:space-between;margin-top:12px;gap:8px}
.precio-viejo{font-size:11px;color:var(--hueso-35);text-decoration:line-through;display:block}
.precio{font-size:16px;font-weight:700;color:var(--oro-bri);letter-spacing:.02em}
.add{
  width:36px;height:36px;border-radius:50%;border:1px solid var(--oro-line);color:var(--oro-bri);
  background:transparent;font-size:18px;cursor:pointer;flex-shrink:0;transition:all .3s;line-height:1;
}
.add:hover{background:var(--oro);color:var(--negro)}
.add:active{transform:scale(.85)}
.add[disabled]{opacity:.3;cursor:default}

/* ═══════════ PÁGINA DE PRODUCTO (editorial lujo) ═══════════ */
.producto{max-width:560px;margin:0 auto;padding:110px 0 46px}
.producto .volver{margin:0 0 12px 18px}
/* galería swipe: slide 1 = recorte con brillo (sin cuadrado) · slide 2 = foto REAL */
.pr-galeria{position:relative}
.pr-slides{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.pr-slides::-webkit-scrollbar{display:none}
.pr-slide{flex:0 0 100%;scroll-snap-align:center;height:min(44vh,370px);position:relative;
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.pr-slide.real img{width:100%;height:100%;object-fit:cover}
.pr-hint{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);z-index:3;
  font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--hueso);
  padding:9px 16px;border-radius:999px;background:rgba(11,10,8,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(201,162,39,.4);white-space:nowrap;pointer-events:none;transition:opacity .4s}
.pr-hint .flechita{display:inline-block;color:var(--oro-bri);animation:hint-flecha 1.2s ease-in-out infinite}
@keyframes hint-flecha{50%{transform:translateX(5px)}}
.pr-hint.oculto{opacity:0}
.pr-dots{display:flex;justify-content:center;gap:6px;padding:10px 0 0}
.pr-dots span{width:6px;height:6px;border-radius:50%;background:rgba(242,237,227,.25);transition:all .3s}
.pr-dots span.on{background:var(--oro-bri);width:16px;border-radius:99px}
.badge-bs{position:absolute;top:14px;left:14px;z-index:2;font-size:9px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;
  padding:7px 12px;border-radius:999px;background:rgba(232,197,95,.95);color:#231a05;box-shadow:0 4px 14px rgba(0,0,0,.4)}
.pr-cuerpo{padding:18px 20px 8px;text-align:center}
.pr-marca{font-size:11px;letter-spacing:.36em;text-transform:uppercase;color:rgba(255,255,255,.78);font-weight:600}
.pr-nombre{font-family:'Anton';font-size:clamp(24px,6.8vw,34px);text-transform:uppercase;line-height:1;margin:6px 0 8px}
/* tags: pocos = pills fijos centrados · muchos (5+) = cinta continua a la izquierda (todos visibles) */
.pr-tags-zona{max-width:100%;margin:0 auto}
.pr-tags-fijos{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:340px;margin:0 auto}
.pr-tags-mask{overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.pr-tags-fila{display:flex;gap:9px;width:max-content;padding:4px 0;
  animation:tags-corre var(--dur,14s) linear infinite}
@keyframes tags-corre{to{transform:translateX(calc(-100% / 3))}}
.pr-tag{flex-shrink:0;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;
  color:var(--oro-bri);white-space:nowrap;padding:7px 13px;border-radius:999px;
  background:rgba(201,162,39,.08);border:1px solid var(--oro-line)}
.pr-divisor{width:54px;height:1px;background:linear-gradient(90deg,transparent,var(--oro-line),transparent);margin:24px auto 16px}
.pr-piramide{max-width:340px;margin:0 auto}
.pr-nivel{padding:8px 6px;border-bottom:1px solid rgba(242,237,227,.08)}
.pr-nivel:last-child{border-bottom:none}
.pr-n{font-size:8.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--oro);font-weight:700;margin-bottom:3px}
.pr-v{font-size:12.5px;color:var(--hueso);line-height:1.55}
.pr-precio-zona{margin:0 0 10px}
.pr-viejo{font-size:12px;color:var(--hueso-35);text-decoration:line-through;margin-right:8px}
.pr-precio{font-family:'Anton';font-size:26px;color:var(--oro-bri);display:inline-block}
.pr-ml{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--hueso-60);margin:3px 0 0}
/* descripción PRIMERO y protagonista: conecta a la gente con el perfume */
.pr-desc{font-size:14.5px;line-height:1.8;color:rgba(255,255,255,.88);max-width:340px;margin:22px auto 0;font-weight:400;
  white-space:pre-line}   /* respeta los saltos de renglón escritos en el admin */
/* etiqueta de sección para separar visualmente las notas */
.pr-sec-lbl{font-size:9px;letter-spacing:.34em;text-transform:uppercase;color:var(--oro);font-weight:700;margin-bottom:2px}
/* botones de compra: apilados, anchos, ícono y texto centrados juntos */
.pr-bar{display:flex;flex-direction:column;gap:10px;max-width:330px;margin:24px auto 0}
.pr-cart{
  position:relative;overflow:hidden;
  width:100%;display:flex;align-items:center;justify-content:center;gap:9px;min-height:52px;border-radius:999px;border:none;cursor:pointer;
  font-family:'Geist';font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:#231a05;
  background:linear-gradient(105deg,#B8912C,#E8C55F 45%,#F5E3A6 55%,#E8C55F 65%,#B8912C);
  box-shadow:0 6px 18px -6px rgba(232,197,95,.5);transition:transform .2s;
}
.pr-cart::after{ /* destello por transform = GPU */
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.5) 50%,transparent 60%);
  transform:translateX(-130%);animation:foil-brillo 2.8s ease infinite;
}
.pr-cart:active{transform:scale(.97)}
.pr-cart[disabled]{opacity:.4;background:#2a241a;color:var(--hueso-35);cursor:default;box-shadow:none}
.pr-cart[disabled]::after{display:none}
.pr-wsp{
  width:100%;display:flex;align-items:center;justify-content:center;gap:9px;min-height:52px;border-radius:999px;cursor:pointer;text-decoration:none;
  font-family:'Geist';font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:#fff;
  background:linear-gradient(120deg,#1DA851,#25D366);box-shadow:0 6px 18px -6px rgba(37,211,102,.5);transition:transform .2s;
}
.pr-wsp:active{transform:scale(.97)}
.pr-cart svg,.pr-wsp svg{width:18px;height:18px;flex-shrink:0}

/* ═══════════ AVISO "SUMADO AL CARRITO" (arriba a la izquierda) ═══════════ */
.aviso-carrito{
  position:fixed;top:14px;left:14px;z-index:400;
  display:flex;align-items:center;gap:9px;padding:12px 18px;border-radius:999px;
  background:rgba(11,10,8,.96);border:1px solid var(--oro-bri);color:var(--oro-bri);
  font-size:11.5px;font-weight:600;letter-spacing:.06em;white-space:nowrap;
  box-shadow:0 8px 24px rgba(0,0,0,.55);pointer-events:none;
  transform:translateX(-130%);transition:transform .45s cubic-bezier(.3,1.3,.4,1);
}
.aviso-carrito.on{transform:translateX(0)}
.aviso-carrito svg{width:16px;height:16px;flex-shrink:0}
/* fotos reales en las cards del catálogo y en las mini-imágenes */
.card-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.card:hover .card-foto{transform:scale(1.06)}
.mini-foto{width:100%;height:100%;object-fit:cover;border-radius:9px}
/* fade-in: las fotos aparecen suave al terminar de cargar (clase .cargada la pone el onload) */
.card-foto, .pr-slide.real img, .mini-foto{opacity:0;transition:opacity .4s ease, transform .6s cubic-bezier(.2,.7,.2,1)}
.card-foto.cargada, .pr-slide.real img.cargada, .mini-foto.cargada{opacity:1}
/* skeleton shimmer mientras la foto carga → nunca se ve una card "vacía"/negra (degrada sin :has en Safari viejo) */
.card-img:has(.card-foto:not(.cargada))::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,transparent 35%,rgba(201,162,39,.09) 50%,transparent 65%);
  background-size:220% 100%;animation:cardshimmer 1.4s linear infinite}
@keyframes cardshimmer{0%{background-position:130% 0}100%{background-position:-130% 0}}
@media(prefers-reduced-motion:reduce){.card-img::before{animation:none}}

/* ═══ PANTALLA DE CARGA (catálogo y producto) ═══
   Aparece SOLO si la carga tarda +250ms. Con caché el contenido sale al instante y el
   loader nunca llega a verse → cero flash negro navegando entre categorías. */
.carga{position:fixed;inset:0;z-index:9999;background:var(--negro);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;
  opacity:0;animation:carga-in .3s ease .25s forwards}
.carga.lista{opacity:0!important;animation:none;transition:opacity .3s ease;pointer-events:none}
@keyframes carga-in{to{opacity:1}}
.carga img{width:132px;height:auto;opacity:.96;animation:carga-late 1.6s ease-in-out infinite}
.carga-barra{width:120px;height:2px;border-radius:2px;overflow:hidden;background:rgba(201,162,39,.18)}
.carga-barra::after{content:'';display:block;width:40%;height:100%;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--oro-bri),transparent);animation:carga-corre 1.1s ease-in-out infinite}
@keyframes carga-late{50%{opacity:.55}}
@keyframes carga-corre{0%{transform:translateX(-160%)}100%{transform:translateX(360%)}}
@media(prefers-reduced-motion:reduce){.carga img,.carga-barra::after{animation:none}}

/* ═══════════ BUSCADOR ═══════════ */
.buscador{
  position:fixed;inset:0;z-index:200;background:rgba(7,6,5,.97);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transform:translateY(-4%);opacity:0;pointer-events:none;
  transition:opacity .45s ease, transform .45s cubic-bezier(.2,.7,.2,1);
  display:flex;flex-direction:column;
}
.buscador.abierto{transform:translateY(0);opacity:1;pointer-events:auto}
.b-top{display:flex;align-items:center;gap:12px;padding:18px 18px 14px;border-bottom:1px solid rgba(201,162,39,.2);max-width:720px;margin:0 auto;width:100%}
.b-input{
  flex:1;background:transparent;border:none;outline:none;color:var(--hueso);
  font-family:'Geist',sans-serif;font-size:21px;caret-color:var(--oro-bri);min-width:0;
}
.b-input::placeholder{color:var(--hueso-35)}
.b-cerrar{background:none;border:none;color:var(--hueso-60);font-size:22px;cursor:pointer;padding:6px}
.b-zona{flex:1;overflow-y:auto;padding:20px 18px 40px;max-width:720px;margin:0 auto;width:100%}
.b-label{font-size:10px;letter-spacing:.4em;text-transform:uppercase;color:var(--oro);font-weight:600;margin-bottom:14px}
.b-chips{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:28px}
.b-chip{
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:10px 17px;border-radius:999px;
  border:1px solid rgba(242,237,227,.15);color:var(--hueso-60);background:transparent;cursor:pointer;transition:all .3s;
}
.b-chip:hover{border-color:var(--oro-line);color:var(--oro-bri)}
.b-res{display:flex;gap:13px;align-items:center;padding:13px 0;border-bottom:1px solid rgba(242,237,227,.06);cursor:pointer}
.b-res .mini-img{width:48px;height:64px;border-radius:9px;flex-shrink:0;
  background:radial-gradient(ellipse at 50% 80%,var(--glow),var(--carbon) 75%);display:flex;align-items:center;justify-content:center}
.b-res .mini-frasco{width:19px;height:32px;border-radius:3px;background:linear-gradient(160deg,var(--oro-bri),var(--oro))}
.b-res .nom{font-family:'Anton';font-size:15px;text-transform:uppercase}
.b-res .det{font-family:'Geist',sans-serif;font-size:12.5px;color:var(--hueso-60)}
.b-res .pre{margin-left:auto;font-weight:600;font-size:14px;color:var(--oro-bri);flex-shrink:0;
  display:flex;flex-direction:column;align-items:flex-end;gap:8px}
a.b-res{text-decoration:none;color:inherit}
.b-res .b-info{min-width:0}
.b-res .b-ver{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--oro-bri);margin-top:4px}
.b-res .b-add{width:32px;height:32px;border-radius:10px;border:1px solid var(--oro-line);
  background:rgba(201,162,39,.08);color:var(--oro-bri);font-size:17px;line-height:1;
  display:flex;align-items:center;justify-content:center;cursor:pointer}
.b-res.sinstock .pre{color:#ff6a4d;font-size:11px;letter-spacing:.08em}
.b-res.sinstock .mini-img{opacity:.5}
.b-vacio{text-align:center;padding:36px 10px}
.b-vacio .v1{font-family:'Geist',sans-serif;font-size:19px}
.b-vacio .v2{font-size:12.5px;color:var(--hueso-60);margin-top:8px;line-height:1.6}
.b-vacio a{
  margin-top:18px;display:inline-block;font-size:10px;letter-spacing:.24em;text-transform:uppercase;font-weight:700;
  color:var(--oro-bri);border:1px solid var(--oro-line);border-radius:999px;padding:11px 22px;text-decoration:none;
}

/* ═══════════ CARRITO (bottom sheet) ═══════════ */
.velo{position:fixed;inset:0;z-index:210;background:rgba(0,0,0,.55);opacity:0;pointer-events:none;transition:opacity .45s}
.velo.on{opacity:1;pointer-events:auto}
.hoja{
  position:fixed;left:0;right:0;bottom:0;z-index:220;max-width:560px;margin:0 auto;
  background:#100D09;border:1px solid var(--oro-line);border-bottom:none;
  border-radius:26px 26px 0 0;max-height:84dvh;
  transform:translateY(105%);transition:transform .55s cubic-bezier(.2,.8,.2,1);
  display:flex;flex-direction:column;
}
.hoja.abierta{transform:translateY(0)}
.h-asa{width:40px;height:4px;border-radius:99px;background:rgba(242,237,227,.2);margin:12px auto 0;flex-shrink:0}
.h-top{display:flex;align-items:baseline;justify-content:space-between;padding:14px 22px 12px;border-bottom:1px solid rgba(242,237,227,.07);flex-shrink:0}
.h-titulo{font-family:'Anton';font-size:21px;text-transform:uppercase}
.h-cant{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--hueso-35)}
.h-items{flex:1;overflow-y:auto;padding:6px 22px;min-height:60px}
.h-item{display:flex;gap:13px;align-items:center;padding:14px 0;border-bottom:1px solid rgba(242,237,227,.06)}
.h-ver{flex:1;min-width:0;display:flex;gap:13px;align-items:center;text-decoration:none;color:inherit;
  border-radius:12px;transition:background .2s}
.h-ver:active{background:rgba(242,237,227,.04)}
.h-txt{min-width:0}
.h-verlink{font-size:10px;letter-spacing:.06em;color:var(--oro-bri);margin-top:6px;opacity:.85}
.h-item .mini-img{width:50px;height:66px;border-radius:9px;flex-shrink:0;overflow:hidden;
  background:radial-gradient(ellipse at 50% 80%,var(--glow),var(--carbon) 75%);display:flex;align-items:center;justify-content:center}
.h-item .mini-frasco{width:20px;height:33px;border-radius:3px;background:linear-gradient(160deg,var(--oro-bri),var(--oro))}
.h-nom{font-family:'Anton';font-size:14.5px;text-transform:uppercase;line-height:1.05;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.h-det{font-size:11px;color:var(--hueso-35);margin-top:2px}
.h-sub{font-size:13.5px;font-weight:600;color:var(--oro-bri);margin-top:5px}
.h-qty{display:flex;align-items:center;gap:10px;margin-left:auto;flex-shrink:0}
.h-qty button{width:28px;height:28px;border-radius:50%;border:1px solid rgba(242,237,227,.2);background:transparent;color:var(--hueso);font-size:14px;cursor:pointer}
.h-qty span{font-size:14px;font-weight:600;min-width:14px;text-align:center}
.h-vacio{text-align:center;padding:34px 20px;font-family:'Geist',sans-serif;font-size:17px;color:var(--hueso-60)}
.h-pie{padding:16px 22px max(24px, env(safe-area-inset-bottom,0px) + 16px);border-top:1px solid rgba(201,162,39,.25);background:rgba(201,162,39,.04);flex-shrink:0}
.h-total{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px}
.h-total .t1{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--hueso-60)}
.h-total .t2{font-family:'Anton';font-size:26px;color:var(--oro-bri)}
.h-wsp{
  width:100%;padding:17px;border-radius:999px;border:none;cursor:pointer;
  background:linear-gradient(120deg,var(--oro),var(--oro-bri));color:var(--negro);
  font-size:12px;letter-spacing:.22em;text-transform:uppercase;font-weight:700;transition:transform .3s;
}
.h-wsp:active{transform:scale(.97)}
.h-nota{text-align:center;font-size:10.5px;color:var(--hueso-35);margin-top:10px}

/* ═══════════ TOAST ═══════════ */
.toast{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);z-index:300;
  background:rgba(11,10,8,.94);border:1px solid var(--oro-line);border-radius:999px;
  padding:12px 24px;font-size:11.5px;letter-spacing:.12em;color:var(--oro-bri);font-weight:600;
  opacity:0;transition:all .4s;pointer-events:none;white-space:nowrap;
}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

/* ═══════════ WHATSAPP FLOTANTE ═══════════ */
.wa-flot{
  position:fixed;right:16px;bottom:max(18px, env(safe-area-inset-bottom,0px) + 14px);z-index:150;
  width:54px;height:54px;border-radius:50%;
  background:var(--wsp);color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 24px -6px rgba(37,211,102,.55), 0 4px 12px rgba(0,0,0,.4);
  transform:scale(0);opacity:0;pointer-events:none;
  transition:transform .5s cubic-bezier(.3,1.5,.5,1), opacity .4s;
}
.wa-flot{will-change:transform}
.wa-flot.visible{transform:scale(1);opacity:1;pointer-events:auto}
.wa-flot:active{transform:scale(.9)}
.wa-flot svg{width:28px;height:28px}
/* anillo de pulso sutil */
.wa-flot::before{
  content:'';position:absolute;inset:0;border-radius:50%;
  border:2px solid var(--wsp);opacity:0;
  animation:wa-pulso 2.6s ease-out infinite;
}
@keyframes wa-pulso{0%{transform:scale(1);opacity:.7}70%,100%{transform:scale(1.55);opacity:0}}

/* ═══════════ FOOTER EDITORIAL (el elegido) ═══════════ */
.pie-edit{padding:60px 20px calc(90px + env(safe-area-inset-bottom,0px));text-align:center;
  border-top:1px solid rgba(201,162,39,.25);position:relative;overflow:hidden;margin-top:48px;
  background:radial-gradient(ellipse at 50% 120%,rgba(201,162,39,.12),transparent 60%);
  content-visibility:auto;contain-intrinsic-size:auto 420px} /* no se renderiza hasta que aparece */
.pie-edit .mini-lbl{font-size:9.5px;letter-spacing:.42em;text-transform:uppercase;color:var(--oro);font-weight:600;margin-bottom:14px}
.pie-edit .handle{
  font-family:'Anton';font-size:clamp(30px,8.5vw,64px);text-transform:lowercase;line-height:1;
  display:inline-block;text-decoration:none;
  background:linear-gradient(100deg,var(--hueso) 30%,var(--oro-bri) 50%,var(--hueso) 70%);
  background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:brillo-handle 4s linear infinite;
}
@keyframes brillo-handle{to{background-position:-200% center}}
.pie-edit .seguinos{margin-top:16px}
.pie-edit .seguinos a{
  display:inline-flex;align-items:center;gap:9px;padding:13px 28px;border-radius:999px;
  background:linear-gradient(120deg,var(--oro),var(--oro-bri));color:var(--negro);
  font-size:10px;letter-spacing:.24em;text-transform:uppercase;font-weight:700;text-decoration:none;
  transition:transform .3s;
}
.pie-edit .seguinos a:active{transform:scale(.96)}
.pie-edit .seguinos a svg{width:15px;height:15px}
.pie-edit .datos{margin-top:26px;display:flex;flex-direction:column;gap:7px;letter-spacing:.02em}
.pie-edit .datos .d1{font-size:16px;font-weight:600;color:rgba(255,255,255,.9)}
.pie-edit .datos .d2{font-size:13px;color:rgba(255,255,255,.62)}
.pie-edit .datos .d3{font-size:12px;color:rgba(255,255,255,.4)}

/* ═══════════ FOOTER PREMIUM (variante 1, la usa pruebas-footer.html) ═══════════ */
.pie{
  padding:56px 24px calc(36px + env(safe-area-inset-bottom,0px));
  text-align:center;margin-top:48px;position:relative;
  background:linear-gradient(180deg,transparent,rgba(201,162,39,.045));
  border-top:1px solid rgba(201,162,39,.25);
}
.pie::before{
  content:'';position:absolute;top:-1px;left:50%;transform:translateX(-50%);
  width:180px;height:1px;background:linear-gradient(90deg,transparent,var(--oro-bri),transparent);
}
.pie .pie-logo{height:32px;margin:0 auto 12px;display:block;opacity:.92}
.pie-frase{font-size:13px;color:var(--hueso-60);line-height:1.6;max-width:340px;margin:0 auto}
.pie-acciones{display:flex;justify-content:center;gap:10px;margin:22px 0 26px;flex-wrap:wrap}
.pie-btn{
  display:inline-flex;align-items:center;gap:9px;
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;font-weight:700;
  padding:13px 24px;border-radius:999px;text-decoration:none;transition:all .3s;
}
.pie-btn svg{width:16px;height:16px;flex-shrink:0}
.pie-btn.wsp{background:rgba(37,211,102,.12);color:#4be084;border:1px solid rgba(37,211,102,.4)}
.pie-btn.wsp:hover{background:rgba(37,211,102,.22)}
.pie-btn.ig{background:rgba(201,162,39,.08);color:var(--oro-bri);border:1px solid var(--oro-line)}
.pie-btn.ig:hover{background:rgba(201,162,39,.16)}
.pie-datos{font-size:9.5px;letter-spacing:.34em;text-transform:uppercase;color:var(--hueso-35);line-height:2.2}
.pie-datos b{color:var(--hueso-60);font-weight:600}
.pie-copy{margin-top:22px;padding-top:18px;border-top:1px solid rgba(242,237,227,.06);
  font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:rgba(242,237,227,.22)}

/* ═══════════ DESKTOP ═══════════ */
@media(min-width:760px){.grid{grid-template-columns:repeat(3,1fr);gap:20px}}
@media(min-width:900px){
  .hero{height:94vh;max-height:1020px}
  .logo-lit{max-width:400px}
  .cats-wrap{padding:72px 24px 8px}
  .cats{gap:16px}
  .cat{padding:24px 24px 22px}
  .edicion-inv{min-height:440px;background-position:72% 40%}
  .ed-cont{padding:30px 34px 32px;max-width:58%}
  .catalogo{padding-top:72px}
  body.pag-catalogo .catalogo{padding-top:150px}
  .wa-flot{right:26px;bottom:26px}
}
@media(min-width:1020px){.grid{grid-template-columns:repeat(4,1fr)}}

/* ═══════════ TÁCTIL: sin hover fantasma ═══════════
   En pantallas táctiles el hover no existe — iOS lo simula y a veces se
   traga el primer toque o deja el botón "resaltado". Acá lo anulamos:
   en el celu solo hay estado normal y :active (respuesta instantánea). */
@media (hover:none){
  .fchip:hover{border-color:rgba(201,162,39,.28);color:var(--hueso-60)}
  .fchip.on:hover{color:#231a05}
  .card:hover{transform:none;border-color:rgba(242,237,227,.08);box-shadow:none}
  .card:hover .frasco{transform:none}
  .card:hover .card-foto{transform:none}
  .cta:hover{letter-spacing:.34em;transform:none}
  .cta:hover .flecha{transform:none}
  .icono:hover{border-color:rgba(242,237,227,.16);color:var(--hueso-60)}
  .icono.icono-carrito:hover{border-color:var(--oro-line);color:var(--oro-bri);background:rgba(201,162,39,.08);box-shadow:0 0 14px -4px rgba(201,162,39,.45)}
  .add:hover{background:transparent;color:var(--oro-bri)}
  .busca-trigger:hover{border-color:rgba(242,237,227,.14);color:var(--hueso-35)}
  .cat:hover{border-color:rgba(242,237,227,.14);box-shadow:none}
  .volver:hover{color:var(--hueso-60)}
  .b-chip:hover{border-color:rgba(242,237,227,.15);color:var(--hueso-60)}
  .pie-btn.wsp:hover{background:rgba(37,211,102,.12)}
  .pie-btn.ig:hover{background:rgba(201,162,39,.08)}
}

/* accesibilidad: menos animación para quien lo pide */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}