/* ============================================================
   FLORERÍA VICTORIA — Flores frescas & arreglos a mano
   Hoja de estilos principal   ·   Paleta: rosa + negro
   ============================================================ */

/* ---------- TOKENS (colores y medidas de toda la web) ---------- */
:root{
  --bg:      #0a0609;
  --bg-2:    #140a11;
  --bg-3:    #1e0e18;
  --surface: rgba(255,255,255,.045);
  --surface-2: rgba(255,255,255,.07);
  --stroke:  rgba(255,143,183,.16);
  --stroke-2:rgba(255,143,183,.36);

  --txt:   #fdeef4;
  --txt-2: #d9bccb;
  --txt-3: #a1808f;

  --rosa:   #ff2f7d;
  --rosa-2: #ff6fa8;
  --rosa-3: #ffb3cf;
  --blush:  #ffe4ee;
  --vino:   #7a0f38;
  --wa:     #25d366;

  --grad-rosa: linear-gradient(135deg,#ff2f7d 0%,#ff6fa8 45%,#ffb3cf 100%);
  --grad-soft: linear-gradient(135deg,#ffe4ee 0%,#ff9dc4 50%,#e0407f 100%);
  --grad-noche:linear-gradient(160deg,#4a1030 0%,#170a12 100%);

  --r-sm: 12px;
  --r:    18px;
  --r-lg: 26px;
  --r-xl: 34px;

  --shadow:    0 18px 50px rgba(0,0,0,.55);
  --shadow-lg: 0 30px 90px rgba(0,0,0,.7);
  --glow:      0 0 40px rgba(255,47,125,.35);

  --nav-h: 74px;
  --ease: cubic-bezier(.22,.68,.28,1);

  --amarillo:   #ffc93c;
  --amarillo-2: #ffe08a;
  --grad-amar:  linear-gradient(135deg,#ffb300 0%,#ffc93c 45%,#ffe08a 100%);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--txt);
  font-family:'Outfit',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-weight:300;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
body.no-scroll{ overflow:hidden; }
img{ max-width:100%; display:block; }
/* "hidden" siempre oculta, aunque la clase del elemento diga display:flex o grid */
[hidden]{ display:none !important; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; border:0; background:none; cursor:pointer; }
input,select,textarea{ font:inherit; color:inherit; }
::selection{ background:var(--rosa); color:#fff; }
:focus-visible{ outline:2px solid var(--rosa-2); outline-offset:3px; border-radius:6px; }

/* fondo global: pétalos de luz sobre negro */
body::before{
  content:'';
  position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(900px 620px at 12% -8%, rgba(255,47,125,.20), transparent 62%),
    radial-gradient(760px 560px at 92% 6%,  rgba(255,143,183,.13), transparent 60%),
    radial-gradient(900px 700px at 50% 108%,rgba(122,15,56,.28),  transparent 62%),
    linear-gradient(180deg,#0a0609 0%,#140a11 45%,#0a0609 100%);
}
body::after{
  content:'';
  position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- LAYOUT ---------- */
.wrap{ width:min(1220px,92vw); margin-inline:auto; }
section{ position:relative; padding:clamp(70px,9vw,130px) 0; }

/* ---------- TIPOGRAFÍA ---------- */
h1,h2,h3,h4{ margin:0; font-weight:400; line-height:1.06; }
.display{ font-family:'Playfair Display',Georgia,serif; font-weight:700; letter-spacing:-.01em; line-height:1.02; }
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:.72rem; font-weight:600; letter-spacing:.32em; text-transform:uppercase;
  color:var(--rosa-2); margin-bottom:16px;
}
.eyebrow::before{ content:''; width:34px; height:1px; background:var(--grad-rosa); }
.eyebrow.is-center::after{ content:''; width:34px; height:1px; background:var(--grad-rosa); }
.h-sec{ font-size:clamp(2.1rem,5.4vw,3.9rem); }
.grad{ background:var(--grad-rosa); -webkit-background-clip:text; background-clip:text; color:transparent; }
.grad-rosa{ background:var(--grad-soft); -webkit-background-clip:text; background-clip:text; color:transparent; }
.lead{ color:var(--txt-2); font-size:clamp(1rem,1.6vw,1.12rem); max-width:62ch; }
.sec-head{ margin-bottom:clamp(36px,5vw,60px); }
.sec-head.is-center{ margin-inline:auto; max-width:760px; text-align:center; }
.sec-head.is-center .lead{ margin-inline:auto; }

/* ============================================================
   UTILIDADES  (antes estos estilos estaban dentro del HTML)
   ============================================================ */
.c-wa{ color:var(--wa); }
b.c-wa{ font-weight:600; }
.info__link{ display:inline-block; margin-top:6px; font-size:.8rem; color:var(--rosa-2); }
.info__grow{ flex:1; }
.sprite{ display:none; }
.logo__acento{ color:var(--rosa-2); }
.wa-nota{ margin:16px 0 0; font-size:.8rem; color:var(--txt-3); }
.wa-nota b{ color:var(--rosa-2); font-weight:600; }
.estado-abierto{ color:var(--wa); font-weight:600; }
.estado-cerrado{ color:#e0567f; font-weight:600; }

/* ---------- BOTONES ---------- */
.btn{
  --bh:54px;
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  height:var(--bh); padding:0 26px; border-radius:999px;
  font-size:.84rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  white-space:nowrap; overflow:hidden; isolation:isolate;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s, background .3s;
}
.btn svg{ width:19px; height:19px; flex:none; }
.btn:active{ transform:scale(.97); }
.btn--rosa{ background:var(--grad-rosa); color:#2a0413; box-shadow:0 12px 34px rgba(255,47,125,.34); }
.btn--rosa:hover{ transform:translateY(-3px); box-shadow:0 20px 48px rgba(255,47,125,.5); }
.btn--wa{ background:linear-gradient(135deg,#25d366,#0f9d63); color:#04250f; box-shadow:0 12px 34px rgba(37,211,102,.3); }
.btn--wa:hover{ transform:translateY(-3px); box-shadow:0 20px 48px rgba(37,211,102,.46); }
.btn--ghost{ border:1px solid var(--stroke-2); color:var(--txt); background:rgba(255,255,255,.03); backdrop-filter:blur(8px); }
.btn--ghost:hover{ border-color:var(--rosa-2); background:rgba(255,143,183,.1); transform:translateY(-3px); }
.btn--sm{ --bh:44px; padding:0 18px; font-size:.72rem; }
.btn--block{ width:100%; }
.btn--rosa::after{
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.5) 50%,transparent 80%);
  transform:translateX(-120%);
}
.btn--rosa:hover::after{ animation:shine .8s ease; }
@keyframes shine{ to{ transform:translateX(120%);} }
.btn.is-added{ background:linear-gradient(135deg,#25d366,#0f9d63); color:#04250f; }

/* ---------- NAV ---------- */
.nav{
  position:fixed; inset:0 0 auto; z-index:120; height:var(--nav-h);
  display:flex; align-items:center;
  transition:background .4s, backdrop-filter .4s, box-shadow .4s, border-color .4s;
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:rgba(10,6,9,.84); backdrop-filter:blur(18px) saturate(150%);
  border-bottom-color:var(--stroke); box-shadow:0 10px 34px rgba(0,0,0,.5);
}
.nav__in{ width:min(1220px,92vw); margin-inline:auto; display:flex; align-items:center; gap:22px; }
.logo{ display:flex; align-items:center; gap:11px; margin-right:auto; }
.logo__mark{
  width:42px; height:42px; border-radius:14px; flex:none;
  background:var(--grad-noche); border:1px solid var(--stroke-2);
  display:grid; place-items:center; box-shadow:inset 0 1px 0 rgba(255,255,255,.14), var(--glow);
}
/* el logo real de la florería (assets/inicio/logo.jpg): va recortado en
   círculo, así no se ven las esquinas blancas de la imagen */
.logo__mark.logo__mark--img{
  width:50px; height:50px; padding:0; border:0; border-radius:50%; overflow:hidden;
  background:#ffd6e6;
  box-shadow:0 0 0 2px rgba(255,111,168,.55), 0 6px 22px rgba(255,47,125,.35);
  transition:transform .35s ease, box-shadow .35s ease;
}
.logo__mark--img img{ display:block; width:100%; height:100%; object-fit:cover; transform:scale(1.05); }
.logo:hover .logo__mark--img{ transform:rotate(-6deg) scale(1.05);
  box-shadow:0 0 0 2px rgba(255,111,168,.8), 0 8px 28px rgba(255,47,125,.5); }
.logo__mark.logo__mark--grande{ width:86px; height:86px; }
@media (max-width:640px){
  .logo__mark.logo__mark--img{ width:42px; height:42px; }
  .logo__mark.logo__mark--grande{ width:74px; height:74px; }
}
.logo__txt{ display:flex; flex-direction:column; line-height:1; }
.logo__name{
  font-family:'Playfair Display',Georgia,serif; font-weight:700;
  font-size:1.18rem; letter-spacing:.02em; white-space:nowrap;
}
.logo__sub{ font-size:.6rem; letter-spacing:.32em; color:var(--txt-3); text-transform:uppercase; margin-top:4px; white-space:nowrap; }
.nav__links{ display:flex; align-items:center; gap:4px; }
.nav__links a{
  padding:9px 14px; border-radius:999px;
  font-size:.76rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--txt-2);
  white-space:nowrap; transition:color .25s, background .25s;
}
.nav__links a:hover,.nav__links a.is-active{ color:var(--txt); background:rgba(255,143,183,.12); }
.nav__actions{ display:flex; align-items:center; gap:10px; }

.cartbtn{
  position:relative; width:46px; height:46px; border-radius:14px;
  border:1px solid var(--stroke-2); background:rgba(255,255,255,.04);
  display:grid; place-items:center; transition:.3s var(--ease);
}
.cartbtn:hover{ background:rgba(255,143,183,.14); transform:translateY(-2px); }
.cartbtn svg{ width:21px; height:21px; }
.cartbtn__n{
  position:absolute; top:-6px; right:-6px; min-width:22px; height:22px; padding:0 6px;
  border-radius:999px; background:var(--grad-rosa); color:#2a0413;
  font-size:.68rem; font-weight:700; display:grid; place-items:center;
  border:2px solid var(--bg); transform:scale(0); transition:transform .35s var(--ease);
}
.cartbtn__n.is-on{ transform:scale(1); }
.cartbtn.pulse{ animation:pulse .5s var(--ease); }
@keyframes pulse{ 50%{ transform:scale(1.16);} }

.burger{ display:none; width:46px; height:46px; border-radius:14px; border:1px solid var(--stroke-2); background:rgba(255,255,255,.04); }
.burger i{ display:block; width:19px; height:2px; margin:4px auto; background:var(--txt); border-radius:2px; transition:.3s var(--ease); }
.burger.is-open i:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.burger.is-open i:nth-child(2){ opacity:0; }
.burger.is-open i:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

.mnav{
  position:fixed; inset:var(--nav-h) 0 0; z-index:115;
  background:rgba(10,6,9,.97);
  padding:34px 6vw; display:flex; flex-direction:column; gap:2px;
  transform:translateY(-102%); overflow-y:auto;
  visibility:hidden; transition:transform .5s var(--ease), visibility .5s;
}
.mnav.is-open{ transform:none; visibility:visible; }
.mnav a:not(.btn){
  font-family:'Playfair Display',Georgia,serif; font-weight:600; font-size:1.7rem;
  padding:12px 0; border-bottom:1px solid rgba(255,255,255,.06); color:var(--txt-2);
}
.mnav a:not(.btn):hover{ color:var(--rosa-2); }
.mnav .btn{ margin-top:24px; }
.mnav .btn + .btn{ margin-top:10px; }

/* ---------- PORTADA ---------- */
.hero{ position:relative; min-height:100svh; display:grid; align-items:center; padding-top:calc(var(--nav-h) + 46px); padding-bottom:80px; overflow:hidden; }
#scene3d{ position:absolute; inset:0; width:100%; height:100%; z-index:0; }
.hero__fallback{
  position:absolute; z-index:0; right:-6%; top:14%; width:min(600px,72vw); aspect-ratio:1;
  border-radius:50%; filter:blur(46px); opacity:.5;
  background:radial-gradient(circle at 40% 40%,rgba(255,111,168,.75),rgba(255,47,125,.35) 42%,transparent 70%);
  animation:float 9s ease-in-out infinite;
}
@keyframes float{ 50%{ transform:translateY(-32px) scale(1.06);} }
.hero__in{ position:relative; z-index:2; }
.hero__grid{ display:grid; grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr); gap:44px; align-items:center; }
.hero h1{ font-size:clamp(2.8rem,8vw,6rem); margin:6px 0 4px; }
.hero h1 .l2{ display:block; }
.hero__deco{ display:flex; align-items:center; gap:14px; margin:20px 0 22px; }
.hero__deco span{ height:1px; flex:1; background:linear-gradient(90deg,var(--rosa-2),transparent); max-width:110px; }
.hero__tag{ font-family:'Cormorant Garamond',serif; font-style:italic; font-size:clamp(1.15rem,2.4vw,1.6rem); color:var(--rosa-3); }
.hero__cta{ display:flex; flex-wrap:wrap; gap:13px; margin-top:32px; }
.hero__stats{ display:flex; flex-wrap:wrap; gap:clamp(20px,4vw,44px); margin-top:46px; }
.stat b{ display:block; font-family:'Playfair Display',serif; font-weight:700; font-size:clamp(1.8rem,3.6vw,2.5rem); line-height:1; }
.stat span{ font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--txt-3); }
.dot{ width:9px; height:9px; border-radius:50%; background:var(--wa); box-shadow:0 0 0 4px rgba(37,211,102,.18); flex:none; }
.dot.off{ background:#e0567f; box-shadow:0 0 0 4px rgba(224,86,127,.18); }
.scrollcue{
  position:absolute; bottom:22px; left:50%; transform:translateX(-50%); z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  font-size:.68rem; letter-spacing:.3em; text-transform:uppercase; color:var(--txt-3);
}
.scrollcue i{ width:1px; height:42px; background:linear-gradient(180deg,var(--rosa-2),transparent); animation:cue 1.8s ease-in-out infinite; }
@keyframes cue{ 50%{ opacity:.25; transform:scaleY(.55);} }

/* ---------- columna derecha de la portada ---------- */
.hero__space{ min-height:clamp(300px,38vh,420px); display:grid; place-items:center; }

/* ============================================================
   LA FOTO DE LA PORTADA CON SU AURA
   La foto va sin marco: un resplandor rosa detrás y un anillo de
   luz girando. Si la foto ya viene sin fondo (PNG), se ve el
   recorte real; si todavía tiene fondo, una máscara suave lo
   difumina hacia los bordes para que no se vea el rectángulo.
   ============================================================ */
.aura{
  position:relative; margin:0; display:grid; place-items:center;
  width:100%; padding:10px 0;
}

/* --- 1. RAYOS: la luz que sale detrás de la persona y gira despacio --- */
.aura__rayos{
  position:absolute; z-index:0; top:47%; left:50%;
  width:min(170%,980px); aspect-ratio:1; transform:translate(-50%,-50%);
  background:repeating-conic-gradient(from 0deg,
    rgba(255,200,222,.90) 0deg 3.5deg,
    rgba(255,47,125,0)   3.5deg 22deg);
  -webkit-mask-image:radial-gradient(closest-side, transparent 16%, rgba(0,0,0,.9) 40%, rgba(0,0,0,.55) 70%, transparent 96%);
          mask-image:radial-gradient(closest-side, transparent 16%, rgba(0,0,0,.9) 40%, rgba(0,0,0,.55) 70%, transparent 96%);
  filter:blur(4px); opacity:.62; mix-blend-mode:screen;
  animation:girarRayos 30s linear infinite;
}
@keyframes girarRayos{ to{ transform:translate(-50%,-50%) rotate(360deg); } }

/* --- 2. ANILLO de color que gira en sentido contrario --- */
.aura__anillo{
  position:absolute; z-index:0; top:50%; left:50%;
  width:min(120%,660px); aspect-ratio:1; transform:translate(-50%,-50%);
  border-radius:50%;
  background:conic-gradient(from 0deg,
    rgba(255,47,125,0) 0deg, rgba(255,143,183,.55) 70deg,
    rgba(255,47,125,.26) 150deg, rgba(255,47,125,0) 240deg,
    rgba(255,194,217,.48) 320deg, rgba(255,47,125,0) 360deg);
  filter:blur(36px);
  animation:girarAura 22s linear infinite reverse;
}
@keyframes girarAura{ to{ transform:translate(-50%,-50%) rotate(360deg); } }

/* --- 3. HALO: el resplandor que respira pegado a la silueta --- */
.aura__halo{
  position:absolute; z-index:1; inset:0% -8% 4%;
  border-radius:50%;
  background:
    radial-gradient(44% 44% at 50% 40%, rgba(255,47,125,.70), transparent 70%),
    radial-gradient(66% 60% at 50% 56%, rgba(255,143,183,.46), transparent 76%),
    radial-gradient(92% 82% at 50% 60%, rgba(180,120,255,.24), transparent 80%);
  filter:blur(32px);
  animation:latir 6.5s ease-in-out infinite;
}
@keyframes latir{
  0%,100%{ transform:scale(1);    opacity:.9; }
  50%    { transform:scale(1.07); opacity:1; }
}

/* --- 4. PISO: la luz que cae debajo, como si estuviera parado en ella --- */
.aura__piso{
  position:absolute; z-index:1; left:50%; bottom:3%; transform:translateX(-50%);
  width:min(76%,470px); height:60px; border-radius:50%;
  background:radial-gradient(50% 50% at 50% 50%, rgba(255,47,125,.58), rgba(255,47,125,0) 72%);
  filter:blur(14px);
  animation:latirPiso 6.5s ease-in-out infinite;
}
@keyframes latirPiso{
  0%,100%{ transform:translateX(-50%) scaleX(1);    opacity:.75; }
  50%    { transform:translateX(-50%) scaleX(1.12); opacity:1; }
}

/* --- 5. CHISPAS: partículas que suben alrededor (las crea app.js) --- */
.aura__chispas{
  position:absolute; z-index:3; inset:-4% -2% 0; overflow:hidden; pointer-events:none;
}
.aura__chispas i{
  position:absolute; bottom:0; left:var(--x);
  width:var(--s); height:var(--s); border-radius:50%;
  background:radial-gradient(circle at 50% 50%, #fff 0%, rgba(255,168,200,.95) 38%, rgba(255,47,125,0) 72%);
  box-shadow:0 0 10px rgba(255,143,183,.75);
  opacity:0;
  animation:subirChispa var(--d) linear var(--r) infinite;
  will-change:transform,opacity;
}
@keyframes subirChispa{
  0%  { transform:translate3d(0,0,0) scale(.5);              opacity:0; }
  14% { opacity:var(--o); }
  72% { opacity:var(--o); }
  100%{ transform:translate3d(var(--dx),calc(var(--sube) * -1),0) scale(1.2); opacity:0; }
}

/* --- 6. LA FOTO: flota y "respira" muy despacio --- */
.aura img{
  position:relative; z-index:2;
  width:auto; max-width:min(100%,620px); max-height:min(76svh,780px); height:auto;
  /* el resplandor sigue la silueta de la foto */
  filter:
    drop-shadow(0 0 30px rgba(255,47,125,.60))
    drop-shadow(0 0 70px rgba(255,143,183,.38))
    drop-shadow(0 24px 44px rgba(0,0,0,.55))
    contrast(1.05) saturate(1.08);
  /* recorte suave, para fotos que todavía tienen fondo */
  -webkit-mask-image:radial-gradient(62% 66% at 50% 46%, #000 62%, rgba(0,0,0,.78) 78%, transparent 94%);
          mask-image:radial-gradient(62% 66% at 50% 46%, #000 62%, rgba(0,0,0,.78) 78%, transparent 94%);
  animation:flotarFoto 8s ease-in-out infinite;
}
@keyframes flotarFoto{
  0%,100%{ transform:translateY(0)     scale(1); }
  50%    { transform:translateY(-13px) scale(1.025); }
}

/* si la foto ya viene recortada (PNG sin fondo), no hace falta la máscara */
.aura.sin-fondo img{ -webkit-mask-image:none; mask-image:none; }

/* con foto, la portada le da más lugar a la imagen */
body.con-foto .hero__grid{ grid-template-columns:minmax(0,1fr) minmax(0,1.04fr); gap:30px; }
body.con-foto .hero__space{ min-height:clamp(340px,54vh,680px); }

/* cuando hay foto, la rosa 3D no se dibuja */
body.con-foto #scene3d{ display:none; }
body.con-foto .hero__fallback{ opacity:.2; }
.hero__chips-t{
  margin:22px 0 12px; font-size:.7rem; font-weight:600;
  letter-spacing:.28em; text-transform:uppercase; color:var(--rosa-2);
}
.hero__chips{ display:flex; flex-wrap:wrap; gap:9px; }
.chip{
  display:inline-flex; align-items:center; gap:9px; padding:10px 16px; border-radius:999px;
  border:1px solid var(--stroke); background:rgba(255,255,255,.05); backdrop-filter:blur(10px);
  font-size:.86rem; color:var(--txt-2);
}
.chip i{ font-style:normal; font-size:1rem; }
.chip--open{ border-color:var(--stroke-2); background:rgba(255,47,125,.08); }

/* ---------- CINTA ---------- */
.marq{ border-block:1px solid var(--stroke); background:rgba(255,47,125,.06); padding:15px 0; overflow:hidden; }
.marq__track{ display:flex; width:max-content; animation:marq 34s linear infinite; }
.marq:hover .marq__track{ animation-play-state:paused; }
.marq span{
  font-family:'Cormorant Garamond',serif; font-style:italic; font-size:1.5rem; letter-spacing:.02em;
  color:var(--txt-3); display:flex; align-items:center; gap:40px; white-space:nowrap; padding-right:40px;
}
.marq span::after{ content:'✿'; color:var(--rosa); font-size:.9rem; }
@keyframes marq{ to{ transform:translateX(-50%);} }

/* ============================================================
   FLORES AMARILLAS · la campaña del 21 de septiembre
   ============================================================ */
.amarillas{
  position:relative;
  background:
    radial-gradient(700px 420px at 50% 0%, rgba(255,201,60,.14), transparent 65%),
    radial-gradient(600px 380px at 50% 100%, rgba(255,179,0,.08), transparent 62%);
  border-block:1px solid rgba(255,201,60,.18);
}
.eyebrow.amarillo{ color:var(--amarillo); }
.eyebrow.amarillo::before,
.eyebrow.amarillo.is-center::after{ background:var(--grad-amar); }
.amar{ background:var(--grad-amar); -webkit-background-clip:text; background-clip:text; color:transparent; }
.amarillas .prod:hover{ border-color:rgba(255,201,60,.5); }
.amarillas .prod__flag{ background:var(--grad-amar); color:#2a1a00; }
.amarillas__cta{
  display:flex; flex-wrap:wrap; gap:14px; justify-content:center; align-items:center;
  margin-top:clamp(28px,4vw,44px);
}

/* ---------- DESTACADOS ---------- */
.grid-top{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:22px; }
.top{
  position:relative; display:flex; flex-direction:column; overflow:hidden; isolation:isolate;
  border-radius:var(--r-lg); border:1px solid var(--stroke-2);
  background:linear-gradient(165deg,rgba(255,47,125,.14),rgba(255,255,255,.02));
  transition:transform .35s var(--ease), box-shadow .35s, border-color .35s;
}
.top:hover{ transform:translateY(-6px); box-shadow:var(--shadow); border-color:var(--rosa-2); }
.top::before{
  content:''; position:absolute; inset:-1px; z-index:-1; opacity:0; transition:opacity .4s;
  background:radial-gradient(420px 240px at var(--mx,50%) var(--my,0%),rgba(255,47,125,.28),transparent 70%);
}
.top:hover::before{ opacity:1; }
.top__img{ position:relative; aspect-ratio:4/5; overflow:hidden; background:var(--grad-noche); }
.top__img img,.top__img svg{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.top:hover .top__img img,.top:hover .top__img svg{ transform:scale(1.06); }
.top__body{ padding:22px; display:flex; flex-direction:column; flex:1; }
.top__badge{
  align-self:flex-start; font-size:.68rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  padding:6px 12px; border-radius:999px; background:var(--grad-rosa); color:#2a0413; margin-bottom:12px;
}
.top h3{ font-family:'Playfair Display',serif; font-weight:700; font-size:1.5rem; margin-bottom:8px; }
.top p{ margin:0 0 18px; font-size:.88rem; color:var(--txt-2); }
.top__foot{ display:flex; align-items:center; gap:12px; margin-top:auto; padding-top:16px; border-top:1px solid rgba(255,143,183,.18); }
.top__foot .btn{ margin-left:auto; }

/* ---------- LA TIENDA ---------- */
.tabs{ display:flex; flex-wrap:wrap; gap:9px; margin-bottom:34px; }
.tab{
  padding:10px 18px; border-radius:999px; border:1px solid var(--stroke);
  background:rgba(255,255,255,.03); color:var(--txt-2);
  font-size:.75rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase;
  transition:.3s var(--ease);
}
.tab:hover{ border-color:var(--stroke-2); color:var(--txt); }
.tab.is-on{ background:var(--grad-rosa); color:#2a0413; border-color:transparent; font-weight:600; }

.grid-prod{ display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:22px; }
.prod{
  position:relative; display:flex; flex-direction:column; overflow:hidden; isolation:isolate;
  border-radius:var(--r-lg); border:1px solid var(--stroke);
  background:linear-gradient(165deg,rgba(255,255,255,.058),rgba(255,255,255,.015));
  transition:transform .35s var(--ease), border-color .35s, box-shadow .35s;
}
.prod:hover{ transform:translateY(-6px); border-color:var(--stroke-2); box-shadow:var(--shadow); }
.prod::before{
  content:''; position:absolute; inset:-1px; z-index:-1; opacity:0; transition:opacity .4s;
  background:radial-gradient(420px 240px at var(--mx,50%) var(--my,0%),rgba(255,47,125,.2),transparent 70%);
}
.prod:hover::before{ opacity:1; }
.prod__img{ position:relative; aspect-ratio:4/5; overflow:hidden; background:var(--grad-noche); }
.prod__img img,.prod__img svg{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.prod:hover .prod__img img,.prod:hover .prod__img svg{ transform:scale(1.07); }
.prod__flag{
  position:absolute; top:12px; left:12px; font-size:.66rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; padding:6px 11px; border-radius:999px; background:var(--grad-rosa); color:#2a0413;
}
.prod__off{
  position:absolute; bottom:12px; right:12px; font-family:'Playfair Display',serif; font-weight:700;
  font-size:.92rem; padding:5px 11px; border-radius:999px; background:rgba(10,6,9,.8);
  border:1px solid var(--stroke-2); color:var(--rosa-3); backdrop-filter:blur(6px);
}
.prod__body{ padding:18px 18px 20px; display:flex; flex-direction:column; flex:1; }
.prod__tag{ font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--rosa-2); }
.prod h3{ font-family:'Playfair Display',serif; font-weight:700; font-size:1.16rem; margin:8px 0 7px; }
.prod p{ margin:0; font-size:.84rem; color:var(--txt-3); }
.prod__meta{ display:flex; gap:12px; margin:14px 0 4px; font-size:.74rem; color:var(--txt-2); }
.prod__foot{ display:flex; align-items:center; gap:10px; margin-top:auto; padding-top:16px; }
.prod__foot .btn{ margin-left:auto; }
/* producto agotado: foto apagada, cinta oscura y botón para consultar */
.prod.is-agotado .prod__img img,.prod.is-agotado .prod__img svg{ filter:grayscale(.7) brightness(.62); }
.prod__flag.prod__flag--no{ background:rgba(18,8,12,.86); color:#ffc2d9; border:1px solid rgba(255,111,168,.45); }
.prod.is-agotado .price{ opacity:.5; }
.price{ font-family:'Playfair Display',serif; font-weight:700; font-size:1.5rem; line-height:1.1; white-space:nowrap; }
.price small{ font-size:.72rem; font-family:'Outfit',sans-serif; font-weight:300; color:var(--txt-3); letter-spacing:.1em; display:block; text-decoration:line-through; }

/* aviso de precios debajo de los filtros */
.aviso{
  margin:-18px 0 26px; font-size:.84rem; color:var(--txt-3);
  display:flex; align-items:center; gap:8px;
}
.aviso::before{ content:'ⓘ'; color:var(--rosa-2); font-size:1rem; }

/* llamada al catálogo, al final de una sección */
.tienda__cta{
  margin-top:clamp(28px,4vw,44px); text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:14px;
}
.tienda__cta p{ margin:0; color:var(--txt-2); font-size:.95rem; }

/* ---------- GALERÍA ---------- */
.gal{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.gal figure{
  position:relative; margin:0; border-radius:var(--r); overflow:hidden; cursor:pointer;
  border:1px solid var(--stroke); background:var(--grad-noche); aspect-ratio:1;
  transition:transform .4s var(--ease), border-color .3s;
}
.gal figure:nth-child(1){ grid-column:span 2; grid-row:span 2; aspect-ratio:1; }
.gal figure:nth-child(6){ grid-column:span 2; aspect-ratio:2/1; }
.gal figure:hover{ transform:scale(1.02); border-color:var(--stroke-2); }
.gal img,.gal svg{ width:100%; height:100%; object-fit:cover; }
.gal figcaption{
  position:absolute; inset:auto 0 0; padding:26px 16px 14px;
  background:linear-gradient(180deg,transparent,rgba(10,6,9,.92));
  font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--txt);
  transform:translateY(6px); opacity:0; transition:.35s var(--ease);
}
.gal figure:hover figcaption,
.gal figure:focus-visible figcaption{ transform:none; opacity:1; }

/* ---------- LA FLORERÍA: la vidriera ancha + el letrero alto ----------
   La ancha se ve completa (sin cortar los letreros) y marca la altura;
   la alta se estira a esa misma altura y se recorta arriba, donde está
   el letrero, para no llenar el espacio con la calle.                  */
.gal.gal--local{ grid-template-columns:minmax(0,2.24fr) minmax(0,.78fr); }
.gal.gal--local figure:nth-child(n){ grid-column:auto; grid-row:auto; aspect-ratio:auto; }
.gal.gal--local figure.gal__ancha{ aspect-ratio:1600/715; }
/* la foto alta no empuja la altura: se acomoda al alto de la ancha */
.gal.gal--local .gal__alta img{ position:absolute; inset:0; object-position:50% 9%; }
.gal.gal--local figcaption{ transform:none; opacity:1; }
@media (max-width:760px){
  .gal.gal--local{ grid-template-columns:1fr; }
  .gal.gal--local figure.gal__alta{ aspect-ratio:3/4; }
  .gal.gal--local figcaption{ padding:18px 12px 9px; font-size:.62rem; letter-spacing:.08em; }
}

/* ---------- EL TALLER ---------- */
.exp{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:20px; }
.exp__it{
  padding:28px 24px; border-radius:var(--r-lg); border:1px solid var(--stroke);
  background:linear-gradient(165deg,rgba(255,255,255,.05),rgba(255,255,255,.015));
  transition:transform .35s var(--ease), border-color .3s;
}
.exp__it:hover{ transform:translateY(-6px); border-color:var(--stroke-2); }
.exp__n{ font-family:'Playfair Display',serif; font-weight:700; font-size:2.4rem; line-height:1; color:transparent; -webkit-text-stroke:1px var(--rosa-2); }
.exp__it h3{ font-family:'Playfair Display',serif; font-weight:700; font-size:1.22rem; margin:14px 0 8px; }
.exp__it p{ margin:0; font-size:.88rem; color:var(--txt-2); }

/* ---------- VIDEOS DE TIKTOK ---------- */
.vids{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; max-width:1020px; margin:0 auto; }
.vid{
  margin:0; display:flex; flex-direction:column; overflow:hidden;
  border-radius:var(--r-lg); border:1px solid var(--stroke); background:var(--grad-noche);
  transition:transform .4s var(--ease), border-color .3s;
}
.vid:hover{ transform:translateY(-5px); border-color:var(--stroke-2); }
.vid__marco{ position:relative; aspect-ratio:9/16; background:#000; }
.vid__marco iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.vid figcaption{ display:flex; flex-direction:column; gap:6px; padding:14px 16px 16px; }
.vid figcaption b{ font-family:'Playfair Display',serif; font-weight:700; font-size:1rem; line-height:1.25; }
.vid figcaption a{ align-self:flex-start; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--rosa-2); }
.vid figcaption a:hover{ text-decoration:underline; }
/* en celular y tablet: se deslizan de costado, uno por pantalla */
@media (max-width:860px){
  .vids{
    grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:min(78%,300px);
    max-width:none; overflow-x:auto; overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory; padding-bottom:6px; scrollbar-width:none;
  }
  .vids::-webkit-scrollbar{ display:none; }
  .vid{ scroll-snap-align:center; }
  .vid:hover{ transform:none; }
}
/* ---------- PEDIR POR WHATSAPP ---------- */
.wa-panel{
  position:relative; overflow:hidden;
  border-radius:var(--r-xl); padding:clamp(30px,5vw,56px);
  border:1px solid var(--stroke-2);
  background:linear-gradient(150deg,rgba(37,211,102,.1),rgba(255,47,125,.12) 55%,rgba(255,255,255,.02));
  box-shadow:var(--shadow-lg);
}
.wa-panel::before{
  content:''; position:absolute; width:520px; height:520px; right:-140px; top:-180px; border-radius:50%;
  background:radial-gradient(circle,rgba(37,211,102,.22),transparent 68%); filter:blur(12px);
}
.wa-grid{ position:relative; display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center; }
.wa-panel h2{ font-size:clamp(1.9rem,4.6vw,3.1rem); }
.wa-panel .btn{ --bh:60px; font-size:.9rem; }
.wa-steps{ list-style:none; margin:20px 0 26px; padding:0; display:grid; gap:10px; }
.wa-steps li{ display:flex; gap:12px; align-items:center; font-size:.92rem; color:var(--txt-2); }
.wa-steps b{
  width:26px; height:26px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:rgba(37,211,102,.16); border:1px solid rgba(37,211,102,.4); color:var(--wa);
  font-size:.74rem; font-weight:700;
}
.info{ display:grid; gap:12px; }
.info__it{
  display:flex; gap:14px; align-items:flex-start; padding:16px 18px; border-radius:var(--r);
  background:rgba(255,255,255,.04); border:1px solid var(--stroke);
}
.info__it i{ font-style:normal; font-size:1.15rem; }
.info__it b{ display:block; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--rosa-2); }
.info__it span{ font-size:.9rem; color:var(--txt-2); }
.info__it > div > span{ display:block; margin-top:3px; }
.hours{ display:grid; gap:8px; margin-top:4px; }
.hours div{ display:flex; justify-content:space-between; gap:14px; font-size:.86rem; color:var(--txt-2); }
.hours div span:last-child{ color:var(--txt); }

/* ---------- PIE ---------- */
.foot{ border-top:1px solid var(--stroke); padding:clamp(46px,6vw,72px) 0 34px; background:rgba(0,0,0,.3); }
.foot__grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:34px; }
.foot h4{ font-family:'Playfair Display',serif; font-weight:700; font-size:1.05rem; margin-bottom:16px; color:var(--rosa-2); }
.foot ul{ list-style:none; margin:0; padding:0; display:grid; gap:9px; }
/* :not(.btn) para que el botón de WhatsApp del pie conserve sus colores */
.foot a:not(.btn),.foot li{ font-size:.88rem; color:var(--txt-2); }
.foot a:not(.btn):hover{ color:var(--rosa-2); }
.foot .logo{ margin-bottom:16px; }
.foot .btn{ margin-top:16px; }
.foot p{ font-size:.88rem; color:var(--txt-2); }
.socials{ display:flex; gap:10px; margin-top:16px; }
.socials a{
  width:42px; height:42px; border-radius:13px; display:grid; place-items:center;
  border:1px solid var(--stroke); background:rgba(255,255,255,.04); transition:.3s var(--ease);
}
.socials a:hover{ background:rgba(255,143,183,.14); transform:translateY(-3px); border-color:var(--stroke-2); }
.socials svg{ width:18px; height:18px; }
.foot__bot{
  margin-top:38px; padding-top:22px; border-top:1px solid rgba(255,255,255,.07);
  display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between;
  font-size:.78rem; color:var(--txt-3);
}

/* ---------- CARRITO ---------- */
.scrim{
  position:fixed; inset:0; z-index:130; background:rgba(6,3,5,.74); backdrop-filter:blur(5px);
  opacity:0; visibility:hidden; transition:.4s var(--ease);
}
.scrim.is-on{ opacity:1; visibility:visible; }
.cart{
  position:fixed; top:0; right:0; bottom:0; z-index:140; width:min(440px,100%);
  background:linear-gradient(170deg,#1a0c14,#0a0609); border-left:1px solid var(--stroke);
  display:flex; flex-direction:column; transform:translateX(102%);
  transition:transform .45s var(--ease); box-shadow:-30px 0 80px rgba(0,0,0,.6);
}
.cart.is-open{ transform:none; }
.cart__head{ display:flex; align-items:center; gap:12px; padding:20px 22px; border-bottom:1px solid var(--stroke); }
.cart__head h3{ font-family:'Playfair Display',serif; font-weight:700; font-size:1.3rem; }
.cart__head small{ color:var(--txt-3); font-size:.74rem; display:block; letter-spacing:.1em; }
.x{
  margin-left:auto; width:40px; height:40px; border-radius:12px; display:grid; place-items:center;
  border:1px solid var(--stroke); background:rgba(255,255,255,.04); transition:background .3s;
}
.x:hover{ background:rgba(255,47,125,.18); }
.x svg{ width:17px; height:17px; }
.cart__body{ flex:1; overflow-y:auto; padding:18px 22px; }
.cart__body::-webkit-scrollbar{ width:6px; }
.cart__body::-webkit-scrollbar-thumb{ background:rgba(255,143,183,.32); border-radius:99px; }

.ci{ display:grid; grid-template-columns:64px 1fr auto; gap:13px; padding:14px 0; border-bottom:1px solid rgba(255,255,255,.06); }
.ci__img{ width:64px; height:64px; border-radius:14px; overflow:hidden; background:var(--grad-noche); border:1px solid var(--stroke); display:grid; place-items:center; font-size:1.5rem; }
.ci__img img,.ci__img svg{ width:100%; height:100%; object-fit:cover; }
.ci b{ font-size:.92rem; font-weight:600; display:block; }
.ci small{ color:var(--txt-3); font-size:.72rem; }
.ci__price{ font-family:'Playfair Display',serif; font-weight:700; font-size:1.05rem; color:var(--rosa-3); margin-top:5px; display:block; }
.qty{ display:inline-flex; align-items:center; gap:2px; border:1px solid var(--stroke); border-radius:999px; padding:3px; background:rgba(255,255,255,.04); }
.qty button{ width:26px; height:26px; border-radius:50%; display:grid; place-items:center; color:var(--txt-2); font-size:1rem; line-height:1; }
.qty button:hover{ background:rgba(255,47,125,.22); color:var(--txt); }
.qty b{ min-width:22px; text-align:center; font-size:.85rem; }
.ci__side{ display:flex; flex-direction:column; align-items:flex-end; justify-content:space-between; gap:8px; }
.ci__rm{ font-size:.7rem; color:var(--txt-3); letter-spacing:.08em; text-transform:uppercase; }
.ci__rm:hover{ color:#ff7aa5; }

.cart__empty{ text-align:center; padding:56px 20px; color:var(--txt-3); }
.cart__empty div{ font-size:3rem; margin-bottom:12px; }
.cart__empty p{ font-size:.86rem; margin:8px 0 20px; }

.field{ margin-bottom:12px; }
.field label{ display:block; font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--rosa-2); margin-bottom:7px; }
.field input,.field textarea,.field select{
  width:100%; padding:12px 14px; border-radius:13px; background:rgba(255,255,255,.05);
  border:1px solid var(--stroke); font-size:.9rem; transition:border-color .3s, background .3s;
}
.field input:focus,.field textarea:focus,.field select:focus{ outline:none; border-color:var(--rosa-2); background:rgba(255,255,255,.08); }
.field textarea{ resize:vertical; min-height:70px; }
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{ border-color:#ff7aa5; background:rgba(255,47,125,.1); }
.row2{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.row2 .field:only-child{ grid-column:1 / -1; }

.opts{ display:grid; gap:9px; margin-bottom:6px; }
.opt{
  position:relative; display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:14px; cursor:pointer;
  border:1px solid var(--stroke); background:rgba(255,255,255,.035); transition:.28s var(--ease);
}
.opt:hover{ border-color:var(--stroke-2); }
.opt.is-on{ border-color:var(--rosa-2); background:rgba(255,143,183,.14); }
.opt i{ font-style:normal; font-size:1.15rem; }
.opt b{ display:block; font-size:.87rem; font-weight:600; }
.opt small{ color:var(--txt-3); font-size:.72rem; }
.opt__tick{ margin-left:auto; width:20px; height:20px; border-radius:50%; border:1px solid var(--stroke-2); display:grid; place-items:center; flex:none; }
.opt.is-on .opt__tick{ background:var(--grad-rosa); border-color:transparent; }
.opt.is-on .opt__tick::after{ content:'✓'; font-size:.7rem; color:#2a0413; font-weight:700; }
/* el radio real queda invisible, pero sigue funcionando con el teclado */
.opt__in{ position:absolute; opacity:0; width:1px; height:1px; margin:0; pointer-events:none; }
.opt__in:focus-visible ~ .opt__tick{ outline:2px solid var(--rosa-2); outline-offset:3px; }

.acc{ border-top:1px solid rgba(255,255,255,.07); margin-top:16px; padding-top:16px; }
.acc__h{ display:flex; align-items:center; gap:10px; width:100%; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--rosa-2); }
.acc__h::after{ content:'+'; margin-left:auto; font-size:1.1rem; color:var(--txt-2); }
.acc.is-open .acc__h::after{ content:'–'; }
.acc__c{ display:none; padding-top:14px; }
.acc.is-open .acc__c{ display:block; }

.cart__foot{ padding:18px 22px 22px; border-top:1px solid var(--stroke); background:rgba(0,0,0,.34); }
.sum{ display:grid; gap:7px; margin-bottom:14px; font-size:.87rem; color:var(--txt-2); }
.sum div{ display:flex; justify-content:space-between; }
.sum .tot{ font-family:'Playfair Display',serif; font-weight:700; font-size:1.4rem; color:var(--txt); padding-top:9px; border-top:1px dashed rgba(255,143,183,.28); }
.sum .tot span:last-child{ color:var(--rosa-3); }
.sum .free{ color:var(--wa); }
.sum .sum__nota{ font-size:.76rem; color:var(--txt-3); }
.cart__note{ margin:11px 0 0; text-align:center; font-size:.72rem; color:var(--txt-3); }

/* ---------- BOTÓN FLOTANTE DE WHATSAPP ---------- */
.fab{
  position:fixed; right:20px; bottom:20px; z-index:110;
  display:flex; align-items:center; gap:11px; padding:13px 20px 13px 15px; border-radius:999px;
  background:linear-gradient(135deg,#25d366,#0f9d63); color:#04250f; font-weight:600; font-size:.86rem;
  box-shadow:0 16px 40px rgba(37,211,102,.4); transition:.35s var(--ease);
  transform:translateY(120px); opacity:0;
}
.fab.is-on{ transform:none; opacity:1; }
.fab:hover{ transform:translateY(-4px) scale(1.03); }
.fab svg{ width:24px; height:24px; }
.fab::before{
  content:''; position:absolute; inset:0; border-radius:999px; border:2px solid rgba(37,211,102,.55);
  animation:ring 2.4s ease-out infinite;
}
@keyframes ring{ to{ transform:scale(1.28); opacity:0; } }

/* ---------- AVISOS ---------- */
.toasts{ position:fixed; left:50%; bottom:26px; z-index:200; transform:translateX(-50%); display:grid; gap:9px; width:min(360px,92vw); }
.toast{
  display:flex; align-items:center; gap:11px; padding:13px 17px; border-radius:15px;
  background:rgba(26,12,20,.95); border:1px solid var(--stroke-2); backdrop-filter:blur(12px);
  box-shadow:var(--shadow); font-size:.88rem; animation:pop .4s var(--ease);
}
.toast i{ font-style:normal; font-size:1.1rem; }
@keyframes pop{ from{ transform:translateY(18px) scale(.94); opacity:0; } }

/* ---------- FOTO GRANDE ---------- */
.lb{
  position:fixed; inset:0; z-index:150; display:grid; place-items:center; padding:5vw;
  background:rgba(6,3,5,.93); backdrop-filter:blur(8px); opacity:0; visibility:hidden;
  /* al cerrar, se oculta recién cuando termina de desvanecerse */
  transition:opacity .35s var(--ease), visibility 0s linear .35s;
}
/* al abrir, se hace visible de inmediato: así el foco puede ir al botón "Cerrar" */
.lb.is-on{ opacity:1; visibility:visible; transition:opacity .35s var(--ease), visibility 0s; }
.lb__box{ width:min(900px,92vw); border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--stroke-2); box-shadow:var(--shadow-lg); background:var(--grad-noche); }
.lb__box img,.lb__box svg{ width:100%; height:auto; max-height:78vh; object-fit:contain; }
.lb__cap{ text-align:center; margin-top:16px; font-size:.84rem; letter-spacing:.12em; text-transform:uppercase; color:var(--txt-2); }
.lb .x{ position:absolute; top:20px; right:20px; margin:0; }

/* ---------- APARICIÓN AL SCROLL (solo con JavaScript: sin JS todo se ve) ---------- */
.js .rv{ opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.js .rv.is-in{ opacity:1; transform:none; }

/* ---------- RESPONSIVE ---------- */
@media (max-width:1080px){
  .foot__grid{ grid-template-columns:1fr 1fr; gap:30px; }
}
@media (max-width:1120px){
  /* la barra se aprieta: menos aire para que todo entre en una línea */
  .nav__in{ gap:12px; }
  .nav__links a{ padding:9px 10px; font-size:.72rem; letter-spacing:.06em; }
  .logo__sub{ display:none; }
}
@media (max-width:960px){
  .nav__links{ display:none; }
  .burger{ display:block; }
  .hero__grid{ grid-template-columns:1fr; gap:34px; }
  .hero{ min-height:auto; padding-top:calc(var(--nav-h) + 60px); }
  .hero__space{ display:none; }
  /* en móvil la rosa 3D se oculta, pero la foto sí se muestra */
  body.con-foto .hero__grid{ grid-template-columns:1fr; gap:26px; }
  body.con-foto .hero__space{ display:grid; order:-1; min-height:0; }
  body.con-foto .aura img{ max-width:min(94vw,520px); max-height:min(62svh,640px); }
  body.con-foto .hero{ padding-top:calc(var(--nav-h) + 24px); }
  .wa-grid{ grid-template-columns:1fr; gap:28px; }
  .gal{ grid-template-columns:repeat(2,1fr); }
  .gal figure:nth-child(1){ grid-column:span 2; }
  .gal figure:nth-child(6){ grid-column:span 2; }
  .scrollcue{ display:none; }

  /* celular: los efectos más pesados se quedan quietos o se apagan */
  .aura__rayos{ animation:none; filter:none; mix-blend-mode:normal; opacity:.4; }
  .aura__anillo{ animation:none; }
  body::after{ display:none; }
  .nav.is-stuck{ backdrop-filter:none; background:rgba(10,6,9,.95); }
  .chip,.btn--ghost,.prod__off,.scrim{ backdrop-filter:none; }
}
@media (max-width:640px){
  /* en móvil manda el logo: el botón de pedido ya está en el menú y en el flotante */
  .nav__actions .btn--wa{ display:none; }
  .logo__name{ font-size:1.02rem; }
  .foot__grid{ grid-template-columns:1fr; }
  .fab{ padding:14px; }
  .fab span{ display:none; }
  .hero__stats{ gap:18px 26px; }
  .grid-prod{ grid-template-columns:repeat(auto-fill,minmax(155px,1fr)); gap:14px; }
  .prod__body{ padding:14px; }
  .prod p{ display:none; }
  .prod h3{ font-size:1.02rem; }
  .prod__flag{ font-size:.62rem; padding:5px 9px; max-width:calc(100% - 24px); }
  .prod__meta{ font-size:.7rem; }
  .prod__foot{ flex-wrap:wrap; gap:12px; }
  .prod__foot .btn{ width:100%; margin-left:0; }
  .price{ font-size:1.3rem; }
  .row2{ grid-template-columns:1fr; }
  .tabs{ flex-wrap:nowrap; overflow-x:auto; padding-bottom:6px; scrollbar-width:none; }
  .tabs::-webkit-scrollbar{ display:none; }
  .tab{ flex:none; }
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
  /* la portada con foto se queda quieta */
  .aura__rayos,.aura__anillo,.aura__halo,.aura__piso,.aura img{ animation:none; }
  .aura__chispas{ display:none; }
}