/* =================================================================
   VARIANT D · SPLASH — hero CØRDIAL + parallax foam + floating CTA
   Foam: maracuyá primero, luego frambuesa
   Product splash reveal on click
================================================================= */
.vD{
  --bg: #f5f1ea;
  --ink: #0f0f0f;
  --mute: rgba(15,15,15,.55);
  --line: rgba(15,15,15,.12);
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  overflow-x: hidden;
}

/* ── REVEAL SYSTEM ── */
.rv{
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);
}
.rv.rv-in{ opacity: 1; transform: none; }

/* ── SPLASH BLOB BASE ── */
.splash-blob{ position: absolute; pointer-events: none; z-index: 0; }
.splash-blob svg{ width: 100%; height: 100%; display: block; }
.splash-blob svg path{ fill: var(--ink); transition: fill .6s ease; }

/* ══════════════════════════════════════════════════════════
   NAV
══════════════════════════════════════════════════════════ */
.vD-nav{
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: grid; grid-template-columns: auto 1fr auto;
  gap: 32px; align-items: center;
  padding: 22px var(--pad);
  transition: background .4s ease, backdrop-filter .4s ease, padding .3s ease, border-color .4s ease;
  border-bottom: 1px solid transparent;
}
.vD-nav.is-stick{
  background: rgba(245,241,234,.78); backdrop-filter: blur(20px);
  border-bottom-color: var(--line); padding: 14px var(--pad);
}
.vD-brand{ font: 400 22px/1 var(--serif); letter-spacing: .26em; color: var(--ink); }
.vD-o{ color: var(--accent); font-style: italic; }
.vD-links{ display: flex; gap: 30px; justify-self: center;
  font: 500 11px/1 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--ink); }
.vD-links a{ position: relative; }
.vD-links a::after{
  content: ''; position: absolute; left: 0; bottom: -4px;
  width: 0; height: 2px; background: var(--accent);
  transition: width .3s cubic-bezier(.34,1.56,.64,1);
}
.vD-links a:hover::after{ width: 100%; }
.vD-links a:hover{ color: var(--accent); }
.vD-nav-right{ display: flex; align-items: center; gap: 12px; }
.vD-shop{
  background: var(--ink); color: var(--bg);
  border: 0; padding: 12px 18px; border-radius: 999px;
  font: 600 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  transition: transform .25s cubic-bezier(.34,1.56,.64,1);
}
.vD-shop:hover{ transform: scale(1.04); }
.vD-shop span{ opacity: .35; }
.vD-shop strong{ font-weight: 700; min-width: 14px; text-align: center; }
.vD-menu-btn{
  display: none; background: 0; border: 0; width: 36px; height: 36px;
  flex-direction: column; gap: 6px; align-items: center; justify-content: center; cursor: pointer;
}
.vD-menu-btn span{ display: block; width: 22px; height: 2px; background: var(--ink); }
@media (max-width: 800px){
  .vD-links{ display: none; }
  .vD-nav{ grid-template-columns: 1fr auto; }
  .vD-menu-btn{ display: flex; }
}

/* ── MENU OVERLAY ── */
.vD-overlay{
  position: fixed; inset: 0; z-index: 100;
  background: rgba(15,15,15,.4); backdrop-filter: blur(4px);
  animation: overlayIn .3s ease both;
}
@keyframes overlayIn { from { opacity: 0; } }
.vD-overlay-inner{
  position: absolute; right: 0; top: 0; bottom: 0;
  width: min(420px, 85vw);
  background: var(--ink); color: var(--bg);
  padding: clamp(60px, 10vh, 100px) var(--pad) 40px;
  display: flex; flex-direction: column;
  animation: overlaySlide .4s cubic-bezier(.16,1,.3,1) both;
  overflow: hidden;
}
@keyframes overlaySlide { from { transform: translateX(100%); } }
.vD-overlay-close{
  position: absolute; top: 20px; right: 20px;
  background: 0; border: 0; color: var(--bg); font-size: 32px; cursor: pointer;
}
.vD-overlay-nav{ display: flex; flex-direction: column; flex: 1; justify-content: center; }
.vD-overlay-link{
  display: flex; align-items: baseline; gap: 16px;
  padding: 20px 0; border-bottom: 1px solid rgba(245,241,234,.1);
  font: 300 clamp(36px,8vw,56px)/1 var(--serif);
  color: var(--bg); text-decoration: none;
  animation: overlayLinkIn .5s cubic-bezier(.16,1,.3,1) both;
  transition: color .2s ease;
}
.vD-overlay-link:hover{ color: var(--accent); }
@keyframes overlayLinkIn { from { opacity: 0; transform: translateX(30px); } }
.vD-overlay-link-n{
  font: 500 10px/1 var(--mono); letter-spacing: .22em; text-transform: uppercase;
  color: var(--accent); min-width: 30px;
}
.vD-overlay-foot{
  display: flex; gap: 24px;
  font: 500 11px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase;
  color: rgba(245,241,234,.5);
}
.vD-overlay-foot a:hover{ color: var(--accent); }

/* ══════════════════════════════════════════════════════════
   PRODUCT SPLASH REVEAL — fullscreen on product click
══════════════════════════════════════════════════════════ */
.prod-splash-overlay{
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  background: rgba(245,241,234,.92);
  backdrop-filter: blur(12px);
  animation: splashOverlayIn .4s ease both;
  cursor: pointer;
}
@keyframes splashOverlayIn {
  from { opacity: 0; }
}
.prod-splash-bg{
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.prod-splash-bg svg{
  width: min(90vw, 90vh); height: min(90vw, 90vh);
  animation: splashBlobIn .6s cubic-bezier(.34,1.56,.64,1) both;
}
.prod-splash-bg svg path{
  fill: var(--p-tone);
  opacity: .15;
}
@keyframes splashBlobIn {
  from { transform: scale(0) rotate(-40deg); opacity: 0; }
  to   { transform: scale(1) rotate(0deg); opacity: 1; }
}

.prod-splash-img{
  position: relative; z-index: 2;
  max-width: min(50vw, 400px); max-height: 60vh;
  object-fit: contain;
  filter: drop-shadow(0 40px 80px rgba(0,0,0,.2));
  animation: splashImgIn .7s cubic-bezier(.34,1.56,.64,1) both .15s;
}
@keyframes splashImgIn {
  from { transform: scale(.3) rotate(15deg) translateY(80px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

.prod-splash-info{
  position: absolute; bottom: 12vh; left: 50%; transform: translateX(-50%);
  z-index: 3; text-align: center;
  animation: fadeUp .6s ease both .4s;
}
.prod-splash-n{
  font: 500 11px/1 var(--mono); letter-spacing: .22em; text-transform: uppercase;
  color: var(--accent); display: block; margin-bottom: 8px;
}
.prod-splash-info h3{
  margin: 0; font: 300 clamp(28px, 5vw, 48px)/1 var(--serif);
  letter-spacing: -0.01em;
}
.prod-splash-info p{
  margin: 8px 0 0; font: 500 10.5px/1 var(--mono); letter-spacing: .18em;
  text-transform: uppercase; color: var(--mute);
}
@keyframes fadeUp { from { opacity: 0; transform: translateX(-50%) translateY(20px); } to { opacity: 1; transform: translateX(-50%); } }

/* ══════════════════════════════════════════════════════════
   HERO — CØRDIAL grande con parallax opuesto
══════════════════════════════════════════════════════════ */
.vD-hero{
  position: relative;
  /* hero largo: la espuma respira primero, el símbolo entra después,
     y la secuencia completa se siente fluida, no apretada */
  height: 245vh; min-height: 1280px;
  overflow: hidden;
  isolation: isolate;
  /* fondo explícito: base sobre la que el canvas (mix-blend screen)
     funde el negro del video */
  background: var(--bg);
}

.vD-hero-foam{ position: absolute; inset: 0; z-index: 0; }
/* Canvas de espuma en movimiento (scroll-scrubbing): muestra el video
   original tal cual, con su propio fondo. Es position:FIXED igual que el
   logo — el compositor lo pega al viewport sin lag de JS (el translateY
   por scroll iba siempre un frame tarde y producía los saltos). El logo
   fixed gira encima de la espuma fixed: mismo efecto, cero vibración.
   La máscara de .vD-hero-foam lo desvanece al acabar el hero y las
   secciones siguientes (z-index 5, fondo sólido) lo tapan. */
.vD-foam-canvas{
  position: fixed; top: 0; left: 0;
  width: 100%;
  /* lvh: altura ESTABLE en móvil — con 100vh el colapso de la barra de
     URL del navegador redimensionaba el canvas en pleno scroll y
     producía saltos visibles */
  height: 100vh;
  height: 100lvh;
  display: block;
}
.vD-foam-layer{
  position: absolute; inset: 0;
  transition: opacity 2.4s cubic-bezier(.4,0,.2,1);
  will-change: transform;
}
.vD-foam-layer img{
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.85) contrast(1.05);
  mix-blend-mode: multiply;
}
/* Maracuyá first, then frambuesa */
.vD-foam-A{ opacity: 1; }
.vD-foam-B{ opacity: 0; }
.foam-1 .vD-foam-A{ opacity: 0; }
.foam-1 .vD-foam-B{ opacity: 1; }

.vD-hero-veil{
  position: absolute; inset: 0; z-index: 1;
  /* el video de espuma se muestra tal cual; solo un fundido al pie
     para transicionar suave hacia la siguiente sección crema */
  background: linear-gradient(180deg, rgba(245,241,234,0) 0%, rgba(245,241,234,0) 80%, var(--bg) 99%);
  pointer-events: none;
}

.splash-hero-a{
  top: 5%; left: -8%; width: 45%; height: 60%;
  opacity: .05; animation: blobBreathe 10s ease-in-out infinite;
}
.splash-hero-b{
  bottom: -5%; right: -5%; width: 35%; height: 50%;
  opacity: .03; animation: blobBreathe 13s ease-in-out infinite 3s;
}
.splash-hero-b svg path{ fill: var(--accent); }
@keyframes blobBreathe {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.05) rotate(2deg); }
}

.vD-hero-text{
  position: relative;
  z-index: 3;
  text-align: center;
  padding-top: 18vh;
}

/* Ø sola gigante */
.vD-hero-o-wrap{
  display: flex; align-items: center; justify-content: center;
}
.vD-hero-solo-o{
  display: block;
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(200px, 48vw, 520px);
  line-height: .82; letter-spacing: -.02em;
  background-image: url('images/espuma-maracuya.png');
  background-size: 220% 220%; background-position: 40% 50%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  animation: soloOIn 1.4s cubic-bezier(.16,1,.3,1) both .1s,
             foamPan 20s ease-in-out infinite alternate 1.5s;
  user-select: none;
}
@keyframes soloOIn {
  from { opacity: 0; transform: scale(.6) translateY(40px); filter: blur(24px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes foamPan { from { background-position: 20% 30%; } to { background-position: 80% 70%; } }

.vD-hero-sub{
  margin: 12px 0 0;
  font: italic 300 clamp(13px, 1.6vw, 20px)/1.3 var(--serif);
  color: var(--mute); letter-spacing: .14em;
  animation: fadeUpSimple .8s ease both 1.2s;
}
@keyframes fadeUpSimple { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }

.vD-hero-scroll{
  position: absolute; right: var(--pad); bottom: 36px; z-index: 4;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font: 500 10px/1 var(--mono); letter-spacing: .3em; text-transform: uppercase;
  color: var(--mute); animation: fadeUpSimple .8s ease both 1.4s;
}
.vD-hero-scroll div{
  width: 1px; height: 50px;
  background: linear-gradient(var(--accent), transparent);
  animation: scrollPulse 2.4s ease-in-out infinite;
}
@keyframes scrollPulse { 0%,100% { opacity: .3; } 50% { opacity: 1; } }
@media (max-width: 900px){ .vD-hero-scroll{ display: none; } }

/* ── FOAM BRIDGE ── */
.vD-foam-bridge{
  position: relative; z-index: 2;
  height: clamp(120px, 20vh, 280px);
  margin-top: -1px; overflow: hidden;
  mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
}
.vD-foam-bridge img{
  width: 100%; height: 200%;
  object-fit: cover; object-position: center top;
  filter: saturate(.7) contrast(1.05);
  mix-blend-mode: multiply; opacity: .6;
  will-change: transform;
}

/* ══════════════════════════════════════════════════════════
   FLOATING SPLASH CTA — very subtle & transparent
══════════════════════════════════════════════════════════ */
.floating-cta{
  position: fixed; z-index: 80;
  top: 0; left: 0;
  width: 72px; height: 80px;
  background: none; border: none; padding: 0;
  cursor: pointer; pointer-events: auto;
  opacity: .15;
  transition: opacity .8s ease;
  animation: ctaAppear 2s cubic-bezier(.16,1,.3,1) both;
}
.floating-cta.has-items{ opacity: .45; width: 88px; height: 96px; }
.floating-cta:hover{ opacity: .75 !important; }
@keyframes ctaAppear { from { transform: scale(0); opacity: 0; } }

.floating-cta-shape{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.08));
  animation: ctaBreathe 5s ease-in-out infinite;
}
.floating-cta-shape path{
  fill: var(--accent); opacity: .7;
  transition: fill .3s ease, opacity .3s ease;
}
.floating-cta:hover .floating-cta-shape path{ fill: var(--ink); opacity: .85; }
@keyframes ctaBreathe {
  0%, 100% { transform: scale(1) rotate(0deg); }
  25% { transform: scale(1.04) rotate(1.5deg); }
  50% { transform: scale(.98) rotate(-1deg); }
  75% { transform: scale(1.02) rotate(.5deg); }
}

.floating-cta-label{
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font: 700 10px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase;
  color: #fff; opacity: 0;
  transition: opacity .3s ease;
  padding-bottom: 4px;
}
.floating-cta.has-items .floating-cta-label{ opacity: 1; }
.floating-cta:hover .floating-cta-label{ color: var(--bg); }

.floating-cta-count{
  position: absolute; top: 0; right: 2px;
  background: var(--ink); color: var(--bg);
  font: 700 8px/1 var(--sans);
  width: 18px; height: 18px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  animation: countPop .3s cubic-bezier(.34,1.56,.64,1);
  opacity: 0;
}
.floating-cta.has-items .floating-cta-count{ opacity: 1; }
@keyframes countPop { from { transform: scale(0); } }

.floating-cta.is-warn .floating-cta-shape path{ fill: #c0392b; opacity: .9; }
.floating-cta.is-warn{ opacity: .8 !important; animation: vshake .35s ease; }

@media (hover: none){ .floating-cta{ display: none; } }

/* ══════════════════════════════════════════════════════════
   SHARED
══════════════════════════════════════════════════════════ */
.vD-num{
  font: 500 11px/1 var(--mono); letter-spacing: .22em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 24px;
}
.vD-h2{
  margin: 0 0 28px; font-family: var(--serif); font-weight: 300;
  font-size: clamp(36px, 6vw, 84px); line-height: .98; letter-spacing: -0.02em;
}
.vD-h2 em{ font-style: italic; color: var(--accent); }
.vD-p{ margin: 0 0 18px; font-size: 17px; line-height: 1.65; color: var(--mute); max-width: 52ch; }
.vD-sec-head{ margin-bottom: clamp(40px, 6vh, 80px); max-width: var(--max); margin-inline: auto; padding: 0 var(--pad); }

.vD-cta{
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--ink); color: var(--bg);
  padding: 18px 26px; border-radius: 999px; border: 0;
  font: 600 12px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase;
  transition: transform .25s cubic-bezier(.34,1.56,.64,1), background .2s ease;
  white-space: nowrap; cursor: pointer; text-decoration: none;
  position: relative; overflow: hidden;
}
.vD-cta::before{
  content: ''; position: absolute; inset: 0;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform .4s cubic-bezier(.16,1,.3,1);
}
.vD-cta:hover::before{ transform: scaleX(1); }
.vD-cta:hover{ transform: translateY(-2px); }
.vD-cta span, .vD-cta svg{ position: relative; z-index: 1; }
.vD-cta svg{ transition: transform .25s ease; }
.vD-cta:hover svg{ transform: translateX(4px); }
.vD-cta.is-warn{ background: var(--accent); animation: vshake .35s ease; }
@keyframes vshake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-4px)} 75%{transform:translateX(4px)} }

.vD-cta-link{
  background: 0; border: 0; color: var(--mute);
  font: 500 11px/1 var(--mono); letter-spacing: .22em; text-transform: uppercase;
  padding: 8px 0; border-bottom: 1px solid var(--line); cursor: pointer;
  transition: color .2s ease, border-color .2s ease;
}
.vD-cta-link:hover{ color: var(--ink); border-color: var(--ink); }

/* ══════════════════════════════════════════════════════════
   COLECCIÓN
══════════════════════════════════════════════════════════ */
.vD-coleccion{
  padding: clamp(80px, 14vh, 180px) var(--pad);
  max-width: var(--max); margin: 0 auto;
  /* tapa el logo fijo del hero al subir con scroll.
     Fade-in suave en el top (no línea recta) usando gradient. */
  position: relative;
  z-index: 5;
  background: linear-gradient(to bottom, rgba(245,241,234,0) 0%, rgba(245,241,234,0.5) 90px, rgba(245,241,234,0.9) 160px, var(--bg) 240px);
}
.vD-prod-list{ display: flex; flex-direction: column; gap: clamp(80px, 12vh, 160px); }
.vD-prod{
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 96px); align-items: center;
}
.vD-prod.is-flip{ direction: rtl; }
.vD-prod.is-flip > *{ direction: ltr; }

.vD-prod-visual{
  position: relative; aspect-ratio: 4/5;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.splash-prod{
  inset: -10%; width: 120%; height: 120%;
  opacity: .1;
  transition: transform .6s cubic-bezier(.16,1,.3,1), opacity .6s ease;
}
.splash-prod svg path{ fill: var(--p-tone); }
.vD-prod:hover .splash-prod{ transform: scale(1.08) rotate(3deg); opacity: .16; }
.vD-prod-img{
  position: relative; z-index: 1;
  width: 80%; aspect-ratio: 1; object-fit: cover;
  border-radius: 50%;
  filter: drop-shadow(0 30px 60px rgba(0,0,0,.15));
  transition: transform .5s cubic-bezier(.34,1.56,.64,1);
}
.vD-prod:hover .vD-prod-img{ transform: translateY(-12px) scale(1.04) rotate(-2deg); }

.vD-prod-info{ display: flex; flex-direction: column; gap: 16px; }
.vD-prod-n{ font: 300 80px/1 var(--serif); color: var(--p-tone); opacity: .2; }
.vD-prod-name{ margin: 0; font: 300 clamp(28px, 3.5vw, 48px)/1.05 var(--serif); letter-spacing: -0.01em; }
.vD-prod-mood{
  font: 500 10.5px/1 var(--mono); letter-spacing: .22em; text-transform: uppercase;
  color: var(--p-tone); margin: 0;
}
.vD-prod-notes{ margin: 0; color: var(--mute); font-size: 15px; line-height: 1.6; }
.vD-prod-foot{
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 20px; border-top: 1px solid var(--line); margin-top: 8px;
}
.vD-prod-price{ font: 300 32px/1 var(--serif); }
.vD-prod-price small{
  display: block; font: 500 10px/1 var(--mono); letter-spacing: .2em;
  text-transform: uppercase; color: var(--mute); margin-top: 4px;
}
@media (max-width: 800px){
  .vD-prod{ grid-template-columns: 1fr; }
  .vD-prod.is-flip{ direction: ltr; }
  .vD-prod-n{ font-size: 48px; }
}

/* ══════════════════════════════════════════════════════════
   CAJA — con foto cajamixta.png
══════════════════════════════════════════════════════════ */
.vD-caja{
  padding: clamp(80px, 14vh, 180px) var(--pad);
  position: relative; z-index: 5;
  background: linear-gradient(to bottom, rgba(245,241,234,0) 0%, rgba(245,241,234,0.5) 90px, rgba(245,241,234,0.9) 160px, var(--bg) 240px);
}
.vD-caja-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 96px); max-width: var(--max); margin: 0 auto; align-items: center; }
.vD-caja-art{
  position: relative; aspect-ratio: 4/5;
  display: flex; align-items: center; justify-content: center;
}
.splash-caja-bg{ inset: -5%; width: 110%; height: 110%; opacity: .06; animation: blobBreathe 10s ease-in-out infinite; }

.vD-caja-img{
  position: relative; z-index: 1;
  width: 72%; max-height: 420px; object-fit: contain;
  filter: drop-shadow(0 24px 48px rgba(0,0,0,.12));
  transition: transform .5s cubic-bezier(.34,1.56,.64,1);
}
.vD-caja-art:hover .vD-caja-img{ transform: scale(1.03) rotate(-1deg); }

.vD-caja-stamp{
  position: absolute; right: 4%; top: 8%;
  background: rgba(15,15,15,0.46); color: var(--bg);
  width: 130px; height: 130px; border-radius: 999px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  font-family: var(--serif); z-index: 5;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border: 0.5px solid rgba(255,255,255,0.18);
  animation: stampSway 7s ease-in-out infinite alternate;
}
.vD-caja-stamp div{ font: 500 9px/1.2 var(--mono); letter-spacing: .2em; text-transform: uppercase; }
.vD-caja-stamp strong{ font: 300 30px/1 var(--serif); margin: 4px 0; color: var(--accent); }
@keyframes stampSway {
  0%  { transform: rotate(-11deg) scale(0.93); opacity:.78; }
  40% { transform: rotate(-6deg)  scale(1.04); opacity:.92; }
  70% { transform: rotate(-13deg) scale(0.97); opacity:.80; }
  100%{ transform: rotate(-8deg)  scale(1.01); opacity:.88; }
}

.vD-caja-side{ display: flex; flex-direction: column; gap: 20px; justify-content: center; }

.vD-builder{ border: 1px solid var(--line); border-radius: 4px; padding: 22px; }
.vD-builder-head{ display: flex; justify-content: space-between; margin-bottom: 14px; font: 500 11px/1 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--mute); }
.vD-builder-head strong{ color: var(--ink); }
.vD-builder-bar{ height: 2px; background: var(--line); margin-bottom: 18px; position: relative; }
.vD-builder-fill{ position: absolute; inset: 0 auto 0 0; background: var(--accent); transition: width .5s cubic-bezier(.2,.8,.2,1); }
.vD-builder-row{ display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
.vD-builder-row:first-of-type{ border-top: 0; }
.vD-builder-name{ display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--mute); }
.vD-builder-row.is-on .vD-builder-name{ color: var(--ink); }
.vD-dot{ width: 8px; height: 8px; border-radius: 50%; }
.vD-price-row{ display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; padding: 14px 0; }
.vD-price-now{ font: 300 56px/1 var(--serif); }
.vD-price-was{ font: 500 11px/1 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--mute); margin-top: 6px; }
.vD-price-was s{ color: rgba(15,15,15,.3); }
.vD-price-cta{ display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
@media (max-width: 800px){ .vD-caja-grid{ grid-template-columns: 1fr; } }

/* ══════════════════════════════════════════════════════════
   RITUAL
══════════════════════════════════════════════════════════ */
.vD-ritual{
  padding: clamp(60px, 10vh, 120px) var(--pad); max-width: var(--max); margin: 0 auto;
  position: relative; z-index: 5;
  background: linear-gradient(to bottom, rgba(245,241,234,0) 0%, rgba(245,241,234,0.5) 90px, rgba(245,241,234,0.9) 160px, var(--bg) 240px);
}
.vD-ritual-grid{ display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(20px, 3vw, 40px); margin-top: 24px; }
.vD-ritual-cell{
  position: relative; overflow: hidden;
  padding: clamp(28px, 4vw, 48px); border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 14px; min-height: 240px;
}
.splash-ritual{
  top: -20%; right: -20%; width: 70%; height: 70%;
  opacity: 0;
  transition: opacity .6s ease, transform .6s cubic-bezier(.16,1,.3,1);
}
.splash-ritual svg path{ fill: var(--accent); }
.vD-ritual-cell:hover .splash-ritual{ opacity: .08; transform: scale(1.1) rotate(5deg); }
.vD-ritual-n{ font: 300 64px/1 var(--serif); color: var(--accent); position: relative; z-index: 1; }
.vD-ritual-cell h3{ margin: 0; font: 400 22px/1.2 var(--serif); position: relative; z-index: 1; }
.vD-ritual-cell p{ margin: 0; color: var(--mute); position: relative; z-index: 1; }
.vD-ritual-s{ margin-top: auto; font: 500 10.5px/1 var(--mono); letter-spacing: .25em; text-transform: uppercase; color: var(--accent); position: relative; z-index: 1; }
@media (max-width: 800px){ .vD-ritual-grid{ grid-template-columns: 1fr; } }

/* ══════════════════════════════════════════════════════════
   B2B
══════════════════════════════════════════════════════════ */
.vD-b2b{
  padding: clamp(36px, 6vh, 80px) var(--pad) clamp(80px, 12vh, 140px);
  position: relative; z-index: 5;
  background: linear-gradient(to bottom, rgba(245,241,234,0) 0%, rgba(245,241,234,0.5) 90px, rgba(245,241,234,0.9) 160px, var(--bg) 240px);
}
.vD-b2b-inner{
  position: relative; overflow: hidden;
  max-width: var(--max); margin: 0 auto; text-align: center;
  background: var(--ink); color: var(--bg);
  padding: clamp(60px, 10vh, 120px) clamp(32px, 6vw, 80px);
  border-radius: 8px;
}
.vD-b2b-inner .vD-num{ display: inline-block; color: var(--accent); }
.vD-b2b-inner .vD-h2{ max-width: 22ch; margin-inline: auto; color: var(--bg); }
.vD-b2b-inner .vD-p{ margin-inline: auto; max-width: 48ch; margin-bottom: 32px; color: rgba(245,241,234,.7); }
.vD-b2b-inner .vD-cta{ background: var(--accent); color: var(--ink); }
.vD-b2b-inner .vD-cta::before{ background: var(--bg); }

/* ══════════════════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════════════════ */
.vD-foot{
  position: relative; overflow: hidden;
  padding: clamp(60px, 10vh, 120px) var(--pad) 30px;
  text-align: center; border-top: 1px solid var(--line);
  z-index: 5; background: var(--bg);
}
.splash-footer{
  top: -20%; left: 50%; width: 60%; height: 80%;
  transform: translateX(-50%); opacity: .03;
  animation: blobBreathe 12s ease-in-out infinite;
}
.vD-foot-mark{ font: 300 clamp(80px, 16vw, 240px)/1 var(--serif); letter-spacing: .14em; position: relative; }
.vD-foot-tag{ font: italic 300 18px/1.4 var(--serif); color: var(--mute); margin-bottom: 56px; position: relative; }
.vD-foot-grid{
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px;
  max-width: 800px; margin: 0 auto; padding-top: 40px;
  border-top: 1px solid var(--line); text-align: left; position: relative;
}
.vD-foot-grid > div{ display: flex; flex-direction: column; gap: 8px; }
.vD-foot-grid span{ font: 500 10.5px/1 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--mute); margin-bottom: 8px; }
.vD-foot-grid a{ font-size: 14px; color: var(--ink); text-decoration: none; transition: color .2s ease; }
.vD-foot-grid a:hover{ color: var(--accent); }
@media (max-width:700px){ .vD-foot-grid{ grid-template-columns: 1fr; } }

/* ── QTY SELECTOR ── */
.vD .vD-qty{
  display: inline-flex; align-items: center;
  border: 1px solid var(--line); border-radius: 999px; overflow: hidden;
}
.vD .vD-qty button{ background: 0; color: inherit; border: 0; width: 32px; height: 32px; font-size: 16px; cursor: pointer; transition: background .2s ease, color .2s ease; }
.vD .vD-qty button:hover:not(:disabled){ background: var(--ink); color: var(--bg); }
.vD .vD-qty button:disabled{ opacity: .3; cursor: not-allowed; }
.vD .vD-qty span{ min-width: 28px; text-align: center; border-inline: 1px solid var(--line); align-self: stretch; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-variant-numeric: tabular-nums; }

/* ── CELLULAR FIELD (Variant E) ── */
.cellular-field{
  position: absolute;
  inset: -45%;
  width: 190%; height: 190%;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}
.cellular-field svg{
  width: 100%; height: 100%;
  display: block;
  overflow: visible;
}

/* ── RITUAL STEPS (Variant E) ── */
.vD-ritual{ padding: clamp(8px,2vh,20px) 0 !important; }

.ritual-steps{
  display: flex;
  gap: 0;
  max-width: var(--max);
  margin: 0 auto;
  padding: 28px var(--pad);
  overflow: visible;
  position: relative;
}
.ritual-step{
  position: relative;
  flex: 1;
  min-height: clamp(160px,40vw,220px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(14px,4vw,24px);
  overflow: visible;
}
.ritual-step-blob-wrap{
  position: absolute;
  inset: -12%;
  pointer-events: none;
}
.ritual-step-blob{
  width: 124%; height: 124%;
  display: block;
  will-change: transform;
  transform-origin: center center;
}
.ritual-step-n{
  position: relative;
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .38;
  margin-bottom: 6px;
}
.ritual-step-title{
  position: relative;
  font-family: var(--serif);
  font-size: clamp(18px,4.5vw,28px);
  font-weight: 300;
  line-height: 1.1;
  display: block;
  margin-bottom: 5px;
}
.ritual-step-body{
  position: relative;
  font-size: clamp(10px,2.4vw,13px);
  opacity: .52;
  line-height: 1.45;
  margin: 0;
}

/* ── RITUAL BUBBLE (archivado) ── */

.ritual-bubble-wrap{
  position: relative;
  width: 100%;
  height: clamp(400px, 95vw, 580px);
  overflow: hidden;
}
.ritual-bubble-outer{
  position: absolute;
  width: clamp(240px, 64vw, 440px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255,255,255,0.16);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border: 1px solid rgba(255,255,255,0.55);
  will-change: box-shadow, left, top;
}
.ritual-time-mark{
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  font-family: var(--serif);
  font-size: clamp(56px, 15vw, 116px);
  font-weight: 300;
  color: rgba(15,15,15,0.055);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  letter-spacing: -0.03em;
  line-height: 1;
}
.ritual-bubble-inner{
  position: absolute;
  top: 50%; left: 50%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255,255,255,0.32);
  border: 0.5px solid rgba(255,255,255,0.68);
  box-shadow:
    inset 0 2px 18px rgba(255,255,255,0.28),
    inset 0 -1px 8px rgba(0,0,0,0.03),
    0 8px 28px rgba(0,0,0,0.05);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 10%;
  overflow: visible;
  will-change: transform;
  transform: translate(-50%,-50%);
}
.ritual-inner-n{
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .38;
  margin-bottom: 5px;
}
.ritual-bubble-inner strong{
  font-family: var(--serif);
  font-size: clamp(12px,3vw,16px);
  font-weight: 400;
  display: block;
  margin-bottom: 4px;
  line-height: 1.2;
}
.ritual-bubble-inner p{
  font-size: clamp(9px,2.2vw,11px);
  opacity: .52;
  line-height: 1.45;
  margin: 0;
}
/* ondas que emanan de cada burbuja interna */
.ritual-ripple{
  position: absolute;
  inset: -8%;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.40);
  animation: bubbleRipple 3.4s ease-out infinite;
  pointer-events: none;
}
.ritual-ripple-b{
  animation-delay: 1.7s;
  border-color: rgba(255,255,255,0.22);
}
@keyframes bubbleRipple{
  0%  { transform: scale(0.95); opacity:.55; }
  100%{ transform: scale(1.9);  opacity:0;   }
}

/* ── B2B — forma orgánica blob, traslúcida acorde al cream del fondo ── */
.vD-b2b{ border-top: none !important; padding: clamp(60px,9vh,110px) var(--pad) !important; }
.vD-b2b-inner{
  max-width: 680px !important;
  padding: clamp(48px,7vh,80px) clamp(40px,7vw,80px) !important;
  background: rgba(245,241,234,0.55) !important;
  backdrop-filter: blur(14px) saturate(1.05) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.05) !important;
  border: 0.5px solid rgba(15,15,15,0.08) !important;
  border-radius: 58% 42% 52% 48% / 46% 54% 46% 54% !important;
  animation: b2bMorph 14s ease-in-out infinite alternate;
  box-shadow: 0 24px 64px -32px rgba(15,15,15,0.18);
}
.vD-b2b-inner .vD-h2,
.vD-b2b-inner .vD-num{ color: var(--ink) !important; }
.vD-b2b-inner .vD-p{ color: rgba(15,15,15,0.6) !important; }
.vD-b2b-inner .vD-cta{ background: var(--ink) !important; color: var(--bg) !important; }
.vD-b2b-inner .vD-cta::before{ background: var(--accent) !important; }
@keyframes b2bMorph{
  0%  { border-radius: 58% 42% 52% 48% / 46% 54% 46% 54%; }
  25% { border-radius: 44% 56% 42% 58% / 54% 44% 56% 46%; }
  50% { border-radius: 52% 48% 60% 40% / 42% 60% 40% 58%; }
  75% { border-radius: 40% 60% 46% 54% / 58% 40% 60% 42%; }
  100%{ border-radius: 50% 50% 44% 56% / 50% 48% 52% 50%; }
}

/* ── B2B CELLULAR — mezcla de luz sobre fondo oscuro ── */
.cellular-field.is-b2b{
  mix-blend-mode: screen;
  opacity: .55;
}

/* ── HERO EDGE: fade orgánico via mask — sólo al foam, no a todo el hero,
   así el logo sticky no se desvanece prematuramente. ── */
.vD-hero-foam{
  -webkit-mask-image: linear-gradient(to bottom, black 55%, transparent 92%);
  mask-image: linear-gradient(to bottom, black 55%, transparent 92%);
}

/* ── FOAM BRIDGE oculto ── */
.vD-foam-bridge{ display: none !important; }

/* ── COLECCIÓN — sin padding extra, los blobs bajan a su lugar natural ── */
.vD-coleccion{ padding-top: clamp(24px,5vh,48px) !important; }

/* ── CAJA imagen: baja un poco para mejor composición ── */
.vD-caja-img{ width: 92% !important; max-height: 520px !important; margin-top: 40px !important; }

/* ── FOOTER espuma + sin divisor — fade integrado, mismo enfoque que el hero ── */
.vD-foot{ border-top: none !important; overflow: hidden; padding-top: clamp(120px, 18vh, 200px) !important; }
.vD-foot-foam{
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 45%, #000 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 45%, #000 100%);
}
.vD-foot-foam img{
  width: 100%; height: 100%; object-fit: cover; object-position: center top;
  opacity: 0.22; mix-blend-mode: multiply;
}
.vD-foot-foam::after{
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 50%;
  background: linear-gradient(to bottom, var(--bg) 0%, transparent 100%);
  pointer-events: none;
}
.vD-foot .vD-foot-mark{
  font-size: clamp(52px, 14vw, 110px);
  letter-spacing: 0; position: relative; z-index: 1;
  margin-top: -20px;
}

/* ── WhatsApp button — igual que los círculos de cóctel, verde translúcido ── */
.vD-foot-wa{
  position: relative; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: 32px;
  width: 64px; height: 64px;
  background: rgba(10, 42, 20, 0.28);
  border: 0.5px solid rgba(37,211,102, 0.25);
  border-radius: 999px;
  overflow: hidden;
  text-decoration: none;
  transition: transform .35s cubic-bezier(.34,1.56,.64,1);
}
.vD-foot-wa:hover{ transform: scale(1.08); }
.cellular-field.is-wa-mini{
  inset: -50%; width: 200%; height: 200%;
  mix-blend-mode: normal; opacity: 1;
}
.vD-foot-wa-icon{ width: 24px; height: 24px; position: relative; z-index: 1; opacity: 0.90; }
.vD-foot .vD-foot-tag{ position: relative; z-index: 1; }

/* ══════════════════════════════════════════════════════════
   MOBILE — correcciones generales ≤ 480px
══════════════════════════════════════════════════════════ */
@media (max-width: 480px){

  /* Hero: más aire también en mobile para la secuencia de espuma */
  .vD-hero{
    height: 200vh; min-height: 980px;
  }
  .vD-hero-foam{
    -webkit-mask-image: linear-gradient(to bottom, black 52%, transparent 85%);
    mask-image: linear-gradient(to bottom, black 52%, transparent 85%);
  }
  /* en mobile el sticky sigue centrado verticalmente */
  .vD-hero-solo-o{ font-size: clamp(96px, 36vw, 140px); }

  /* Colección: reducir el espacio superior en mobile */
  .vD-coleccion{ padding-top: 16px !important; }

  /* Prod cards: imagen más pequeña, menos padding */
  .vD-prod{ padding: clamp(32px, 6vw, 56px) var(--pad); gap: 24px; }
  .vD-prod-img-wrap{ width: min(72vw, 300px); height: min(72vw, 300px); }

  /* Cellular field: más pequeño en mobile para no desbordar */
  .cellular-field{ inset: -25%; width: 150%; height: 150%; }

  /* Caja: columna única bien ajustada */
  .vD-caja{ padding: clamp(48px,8vh,80px) var(--pad); }
  .vD-caja-img{ width: 80% !important; max-height: 340px !important; }
  .vD-caja-stamp{ width: 100px; height: 100px; right: 2%; top: 4%; }
  .vD-caja-stamp strong{ font-size: 22px; }

  /* Builder: texto más pequeño */
  .vD-builder{ padding: 16px; }
  .vD-price-now{ font-size: clamp(36px, 12vw, 52px); }

  /* Ritual steps: reduce padding en mobile */
  .ritual-steps{ gap: 16px; }

  /* B2B mobile: reducir la curvatura del blob para que no corte el texto */
  .vD-b2b{ padding: clamp(32px, 5vh, 56px) var(--pad); }
  .vD-b2b-inner{ padding: clamp(44px, 6vh, 64px) clamp(28px, 7vw, 44px) !important; }
  .vD-b2b-inner,
  .vD-b2b-inner[style]{
    border-radius: 36px 28px 36px 28px / 28px 36px 28px 36px !important;
    animation: b2bMorphMobile 12s ease-in-out infinite alternate !important;
  }
  @keyframes b2bMorphMobile{
    0%  { border-radius: 36px 28px 36px 28px / 28px 36px 28px 36px; }
    50% { border-radius: 28px 36px 28px 36px / 36px 28px 36px 28px; }
    100%{ border-radius: 32px 32px 28px 36px / 28px 32px 36px 32px; }
  }

  /* Footer: centrado vertical con menos padding */
  .vD-foot{ padding: clamp(48px,8vh,80px) var(--pad); }
}

/* ── REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce){
  .rv{ transition: opacity .4s ease; transform: none; }
  .splash-hero-a, .splash-hero-b, .splash-caja-bg, .splash-footer{ animation: none; }
  .vD-hero-letter{ animation: none; opacity: 1; }
  .vD-hero-o{ animation: letterIn 0s both, none; opacity: 1; -webkit-text-fill-color: var(--accent); }
  .vD-hero-sub, .vD-hero-scroll{ animation: none; opacity: 1; }
  .floating-cta{ animation: none; }
  .floating-cta-shape{ animation: none; }
  .prod-splash-overlay, .prod-splash-bg svg, .prod-splash-img, .prod-splash-info{ animation: none; opacity: 1; }
}

/* ── V2: Logo Ø como imagen — Hero ── */
img.vD-hero-solo-o{
  display: block;
  width: clamp(180px, 42vw, 460px);
  height: auto;
  background: none !important;
  -webkit-background-clip: initial !important;
          background-clip: initial !important;
  color: transparent;
  filter: drop-shadow(0 12px 32px rgba(15,15,15,0.18));
  animation: soloOIn 1.4s cubic-bezier(.16,1,.3,1) both .1s;
}
@media (max-width: 760px){
  img.vD-hero-solo-o{ width: clamp(140px, 60vw, 280px); }
}

/* ── V2: Logo Ø como imagen — Footer ── */
.vD-foot-logo{
  display: block;
  width: clamp(60px, 9vw, 120px);
  height: auto;
  margin: 0 auto;
  filter: drop-shadow(0 6px 18px rgba(15,15,15,0.12));
}
.vD-foot .vD-foot-mark{
  font-size: 0;
}

/* ── V2: cuadro de compra centrado sobre el cellular field gris ── */
.vD-caja-art{
  display: flex; align-items: center; justify-content: center;
  min-height: 460px;
  position: relative;
}
.vD-caja-builder-wrap{
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 440px;
  padding: clamp(20px, 3vw, 32px);
  background: rgba(245,241,234,0.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 0.5px solid rgba(15,15,15,0.08);
  border-radius: 18px;
  box-shadow: 0 30px 80px -40px rgba(15,15,15,0.25),
              0 2px 8px rgba(15,15,15,0.04);
  display: flex; flex-direction: column; gap: 16px;
}
@media (max-width: 800px){
  .vD-caja-art{ min-height: auto; padding: 24px 0; }
  .vD-caja-builder-wrap{ max-width: 100%; }
}

/* ── V2: botón "Ver producto" en cada card — fantasma, sólo al hover ── */
.vD-prod-open{
  margin-top: 18px;
  align-self: flex-start;
  background: transparent;
  border: 0;
  padding: 6px 0;
  font: 500 11px/1 var(--mono);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(15,15,15,0.32);
  cursor: pointer;
  position: relative;
  opacity: 0;
  transform: translateY(2px);
  transition: opacity .35s ease, transform .35s ease, color .2s ease;
}
.vD-prod-open::after{
  content: ""; position: absolute; left: 0; right: 60%; bottom: -2px;
  height: 1px; background: currentColor;
  transition: right .35s ease, background .2s ease;
}
.vD-prod:hover .vD-prod-open,
.vD-prod-open:focus-visible{
  opacity: 1;
  transform: translateY(0);
}
.vD-prod-open:hover{ color: var(--accent); }
.vD-prod-open:hover::after{ right: 0; }
/* en mobile no hay hover real → que se vea siempre */
@media (hover: none){
  .vD-prod-open{ opacity: 1; transform: none; color: rgba(15,15,15,0.45); }
}

/* ── V2: precio + qty dentro del modal del producto — pill blanca con contraste fuerte ── */
.prod-splash-buy{
  display: inline-flex; align-items: center; gap: 24px;
  margin: 22px auto 0;
  padding: 14px 18px 14px 24px;
  background: #ffffff;
  border-radius: 999px;
  box-shadow: 0 18px 48px -16px rgba(15,15,15,0.35),
              0 2px 8px rgba(15,15,15,0.08);
}
.prod-splash-price{
  font: 500 30px/1 var(--serif);
  color: #0f0f0f;
  font-variant-numeric: tabular-nums;
  display: flex; align-items: baseline; gap: 8px;
}
.prod-splash-price small{
  font: 500 10px/1 var(--mono);
  letter-spacing: .22em; text-transform: uppercase;
  color: rgba(15,15,15,0.55);
}
.prod-splash-qty{
  border-color: rgba(15,15,15,0.18) !important;
  color: #0f0f0f !important;
  background: #fafafa;
}
.prod-splash-qty button{
  color: #0f0f0f !important;
  width: 36px !important; height: 36px !important;
  font-size: 18px !important; font-weight: 400 !important;
}
.prod-splash-qty button:hover:not(:disabled){
  background: #0f0f0f !important; color: #ffffff !important;
}
.prod-splash-qty button:disabled{ opacity: .3; }
.prod-splash-qty span{
  border-color: rgba(15,15,15,0.14) !important;
  color: #0f0f0f !important;
  font-weight: 500;
  min-width: 32px !important;
}

/* ══════════════════════════════════════════════════════════
   V2: Hero logo como video (scroll-scrub)
══════════════════════════════════════════════════════════ */
/* ── PNG sequence + canvas con alpha real (logo fixed en viewport) ── */
/* El .vD-hero-o-wrap reserva el espacio del logo en el flujo (para
   que el subtítulo no se monte al logo) aunque el canvas esté fixed. */
.vD-hero-o-wrap{
  width: clamp(270px, 63vw, 690px);
  aspect-ratio: 1 / 1;
  margin: 0 auto;
}
/* El wrap del canvas es FIXED — no se mueve con el scroll en absoluto.
   Las secciones siguientes (.vD-coleccion, .vD-caja...) tienen z-index: 5
   y bg sólido, así suben con el scroll y lo tapan físicamente. */
.vD-hero-canvas-wrap{
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(270px, 63vw, 690px);
  aspect-ratio: 1 / 1;
  z-index: 2;
  pointer-events: none;
  filter: drop-shadow(0 12px 32px rgba(15,15,15,0.18));
}
canvas.vD-hero-solo-canvas{
  display: block;
  width: 100%;
  height: 100%;
  /* SIN animación de entrada CSS: el canvas hereda la clase
     .vD-hero-solo-o cuya animación soloOIn (fill both) forzaba
     opacity:1 pisando el style inline — por eso el logo aparecía en la
     imagen inicial y la disolvencia nunca se veía. La entrada es la
     DISOLVENCIA por scroll que controla el JS. */
  animation: none !important;
}
img.vD-hero-solo-fallback{
  /* ya no se usa — el fallback ahora es CSS background. Lo dejo por compat */
  display: none;
}

/* ── Subtítulo flotante, debajo del logo fixed ──
   Uso top con calc() en vez de translateY para evitar que la animation
   fadeUpSimple (que termina con transform:none) borre el offset. */
.vD-hero-sub-floating{
  position: fixed;
  left: 50%;
  top: calc(50% + clamp(155px, 36vw, 380px));
  transform: translateX(-50%);
  margin: 0;
  z-index: 2;
  text-align: center;
  font: italic 300 clamp(13px, 1.6vw, 20px)/1.3 var(--serif);
  color: var(--mute);
  letter-spacing: .14em;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  animation: subFloatIn .8s ease both 1.2s;
}
@keyframes subFloatIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@media (max-width: 760px){
  .vD-hero-o-wrap{ width: clamp(270px, 90vw, 500px); }
  /* Logo móvil más pequeño */
  .vD-hero-canvas-wrap{
    width: clamp(190px, 62vw, 320px);
    /* el drop-shadow filtrado sobre un elemento fixed es caro en móvil
       y contribuía a los saltos del scroll */
    filter: none;
  }
  /* "Coctelería congelada" no se muestra en móvil */
  .vD-hero-sub-floating{ display: none; }
}
@media (max-width: 760px){
  video.vD-hero-solo-video{ width: clamp(140px, 60vw, 280px); }
}

/* ── Hint inicial: "søur ↓" muy sutil sobre la espuma ──
   Visible al cargar (cuando el logo-canvas aún está en su frame vacío),
   desaparece al primer scroll. */
.vD-scroll-hint{
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(18px, 4vh, 38px);
  color: var(--ink);
  transition: opacity .55s ease;
  animation: hintBreath 3.4s ease-in-out infinite;
}
.vD-scroll-hint-word{
  font: 300 clamp(54px, 15vw, 130px)/1 var(--serif);
  letter-spacing: -.02em;
  opacity: .55;
}
.vD-scroll-hint-word em{ font-style: italic; color: var(--accent); opacity: .9; }
.vD-scroll-hint-arrow{
  opacity: .5;
  animation: hintArrow 1.8s ease-in-out infinite;
}
@keyframes hintBreath{
  0%,100%{ opacity: .9; }
  50%    { opacity: .55; }
}
@keyframes hintArrow{
  0%,100%{ transform: translateY(0); }
  50%    { transform: translateY(7px); }
}
/* ── MÓVIL: sin máscara ni velo sobre la espuma ──
   La máscara de .vD-hero-foam y el velo degradado scrollean POR ENCIMA
   del canvas fijo: en iOS ese borde en movimiento se ve como una línea
   dura color crema al subir. En móvil el fundido de la espuma lo hace
   el JS (opacity), que es perfectamente suave. */
@media (max-width: 760px){
  .vD-hero-foam{
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }
  .vD-hero-veil{ display: none; }
  /* La sección de productos cubría la espuma con un degradado de solo
     240px (transparente→sólido) — ese borde subiendo era la "línea
     dura". Ahora el degradado es mucho más largo y con curva suave. */
  .vD-coleccion{
    background: linear-gradient(to bottom,
      rgba(245,241,234,0)    0,
      rgba(245,241,234,0.10) 12vh,
      rgba(245,241,234,0.32) 26vh,
      rgba(245,241,234,0.62) 40vh,
      rgba(245,241,234,0.88) 52vh,
      var(--bg)              62vh) !important;
  }
  /* Las fotos de producto 16:9 tienen fondo crema de estudio levemente
     distinto al de la página: su rectángulo marcaba una recta dura al
     subir. Vignette suave para que se fundan con el fondo. */
  .vD-prod-img{
    -webkit-mask-image: radial-gradient(115% 115% at 50% 50%, black 58%, transparent 99%);
    mask-image: radial-gradient(115% 115% at 50% 50%, black 58%, transparent 99%);
  }
}

/* ── Aviso de scroll móvil: "desliza" + gota que cae ── */
.vD-swipe-hint{ display: none; }
@media (max-width: 760px){
  .vD-swipe-hint{
    position: fixed;
    left: 50%;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 30px);
    transform: translateX(-50%);
    display: flex; flex-direction: column; align-items: center; gap: 12px;
    z-index: 3;
    pointer-events: none;
    opacity: 1;
    transition: opacity .7s ease;
  }
  .vD-swipe-hint span{
    font: 500 10px/1 var(--mono);
    letter-spacing: .34em; text-transform: uppercase;
    color: var(--mute);
  }
  .vD-swipe-hint i{
    width: 1.5px; height: 36px;
    border-radius: 1px;
    background: linear-gradient(to bottom, var(--accent), transparent);
    animation: swipeGota 1.9s ease-in-out infinite;
  }
  .vD.is-scrolled .vD-swipe-hint{ opacity: 0; }
}
@keyframes swipeGota{
  0%  { transform: scaleY(0); transform-origin: top; }
  55% { transform: scaleY(1); transform-origin: top; }
  100%{ transform: scaleY(0); transform-origin: bottom; }
}

/* Al primer scroll: se esconde el hint y el subtítulo flotante */
.vD.is-scrolled .vD-scroll-hint{ opacity: 0; }
.vD.is-scrolled .vD-hero-sub-floating{
  animation: none !important;
  opacity: 0 !important;
  visibility: hidden;
  transition: opacity .4s ease;
}
@media (prefers-reduced-motion: reduce){
  .vD-scroll-hint, .vD-scroll-hint-arrow{ animation: none; }
}

/* ── Etiqueta "preparación" sobre las 3 bolas (solo móvil) ──
   Casi del color del fondo, con opacidad que respira para ser
   evidente en algunos momentos y discreta en otros. */
.ritual-steps-label{
  display: none;
  position: absolute;
  top: -2px;
  left: 50%;
  transform: translateX(-50%);
  font: 400 clamp(13px, 4vw, 18px)/1 var(--serif);
  font-style: italic;
  letter-spacing: .04em;
  color: var(--ink);
  pointer-events: none;
  z-index: 4;
  animation: prepBreath 5s ease-in-out infinite;
}
@keyframes prepBreath{
  0%,100%{ opacity: .06; }
  50%    { opacity: .34; }
}
@media (max-width: 760px){
  .ritual-steps-label{ display: block; }
}
@media (prefers-reduced-motion: reduce){
  .ritual-steps-label{ animation: none; opacity: .18; }
}

/* ══════════════════════════════════════════════════════════
   V2: Iconos sociales del footer (reemplaza botón verde WA)
══════════════════════════════════════════════════════════ */
.vD-foot .vD-foot-wa{ display: none !important; }
.vD-foot-social{
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  gap: clamp(18px, 3vw, 28px);
  margin-top: 28px;
}
.vD-foot-ico{
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px;
  border-radius: 50%;
  color: rgba(15,15,15,0.55);
  background: transparent;
  text-decoration: none;
  transition: color .25s ease, transform .25s ease, background .25s ease;
}
.vD-foot-ico:hover{
  color: var(--ink);
  background: rgba(15,15,15,0.05);
  transform: translateY(-2px);
}
.vD-foot-ico svg{ display: block; }

/* (bloque MOBILE LIGHTWEIGHT eliminado — vuelven animaciones de logo y cócteles) */

/* Fix línea fantasma en el modal de producto en mobile:
   El drop-shadow grande (40px 80px) de la imagen + box-shadow profundo
   de la pill se proyectan al borde del viewport y crean una línea.
   Los suavizamos en mobile + aseguramos que el overlay recorta. */
@media (max-width: 760px){
  .prod-splash-overlay{ overflow: hidden; }
  .prod-splash-img{
    filter: drop-shadow(0 16px 32px rgba(0,0,0,0.18));
    max-height: 50vh;
  }
  .prod-splash-buy{
    box-shadow: 0 8px 24px -8px rgba(15,15,15,0.18);
  }
  .prod-splash-info{ bottom: 8vh; }
}

/* Mobile: blobs orgánicos del ritual → círculos tipo diagrama de Venn
   (el preserveAspectRatio=none deformaba los blobs y se veía mal) */
@media (max-width: 760px){
  .ritual-step-blob{ display: none; }
  .ritual-step-blob-wrap{
    width: 32vw; height: 32vw;
    max-width: 180px; max-height: 180px;
    border-radius: 50%;
    mix-blend-mode: multiply;
    position: relative;
    overflow: visible;
  }
  /* Colores: tonos del producto correspondiente. El de piña (03) va más
     saturado: con multiply sobre crema el amarillo claro desaparecía. */
  .ritual-step:nth-child(1) .ritual-step-blob-wrap{
    background: rgba(232,132,43,0.42);  /* maracuyá */
  }
  .ritual-step:nth-child(2) .ritual-step-blob-wrap{
    background: rgba(200,56,92,0.42);   /* frambuesa */
  }
  .ritual-step:nth-child(3) .ritual-step-blob-wrap{
    background: rgba(196,150,16,0.5);   /* piña — más fuerte para que se vea */
  }

  /* Fila horizontal: tres círculos uno al costado del otro, compactos,
     sin solaparse — caben los tres en 390px y el 03 se ve completo */
  .ritual-steps{
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: center;
    gap: 6px;
    padding: 8px 6px 4px;
  }
  .ritual-step{
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
    display: flex; flex-direction: column;
    align-items: center;
    text-align: center;
    margin: 0;
    padding: 0 2px;
  }
  .ritual-step-blob-wrap{
    width: 28vw; height: 28vw;
    max-width: 120px; max-height: 120px;
  }
  /* Texto del paso: encima del círculo gracias a margin negativo */
  .ritual-step-n,
  .ritual-step-title,
  .ritual-step-body{
    position: relative; z-index: 2;
    background: transparent;
  }
  .ritual-step-n{ margin-top: 14px; font-size: 11px; }
  .ritual-step-title{ font-size: 18px; }
  .ritual-step-body{ font-size: 11px; max-width: 22ch; }
}

/* ── RITUAL STEPS: número difuminado + título dentro del círculo ── */
.ritual-step{ position: relative; }
.ritual-step-blob-wrap{
  position: relative;
  display: flex; align-items: center; justify-content: center;
}
.ritual-step-blob-wrap .ritual-step-n{
  position: absolute;
  font: 300 clamp(80px, 12vw, 160px)/1 var(--serif);
  color: rgba(15,15,15, 0.08);
  letter-spacing: -0.03em;
  z-index: 1;
  pointer-events: none;
  user-select: none;
}
.ritual-step-blob-wrap .ritual-step-title{
  position: relative;
  z-index: 2;
  font: 400 clamp(18px, 2vw, 28px)/1.1 var(--serif);
  letter-spacing: -0.01em;
  text-align: center;
}
.ritual-step-body{
  text-align: center;
  margin: 14px auto 0;
  max-width: 22ch;
  color: var(--mute);
  font-size: 14px; line-height: 1.5;
}

/* Mobile: tipografías compactas para los tres círculos en fila */
@media (max-width: 760px){
  .ritual-step-blob-wrap .ritual-step-n{
    font-size: clamp(34px, 10vw, 48px);
    color: rgba(15,15,15, 0.12);
  }
  .ritual-step-blob-wrap .ritual-step-title{
    font-size: 12.5px;
    line-height: 1.15;
    padding: 0 8px;
  }
  .ritual-step-body{
    font-size: 10.5px;
    line-height: 1.45;
    max-width: 14ch;
    margin-top: 10px;
  }
}

/* ── CAJA: grid solo (sin columna izquierda con texto) + nota debajo ── */
.vD-caja-grid-solo{
  grid-template-columns: 1fr !important;
  max-width: 560px;
  margin-left: auto !important; margin-right: auto !important;
}
.vD-caja-note{
  margin-top: 18px;
  text-align: center;
  font: italic 300 clamp(14px, 1.4vw, 18px)/1.4 var(--serif);
  color: var(--mute);
}

/* Ritual mobile: escalonar para que los bodies no se monten ───
   El círculo del medio baja, así cada texto queda en su zona vertical
   propia y se entiende a qué círculo pertenece. */
@media (max-width: 760px){
  .ritual-steps{
    align-items: flex-start !important;
    padding-top: 8px;
  }
  /* Reduzco el overlap horizontal */
  .ritual-step{ margin: 0 -3vw !important; padding: 0 2px; }

  /* Escalonado vertical: el 2 baja, el 1 y 3 quedan arriba */
  .ritual-step:nth-child(2){ margin-top: 22vw; }

  /* Body más estrecho y centrado bajo SU círculo */
  .ritual-step-body{
    max-width: 14ch !important;
    font-size: 11px !important;
    margin-top: 10px !important;
    line-height: 1.35 !important;
  }

  /* Asegurar que el body queda DEBAJO del propio círculo (z-index sobre overlap) */
  .ritual-step-n,
  .ritual-step-title,
  .ritual-step-body{ position: relative; z-index: 3; }
}

/* Caja note: pie DENTRO del cuadro de compra, separado con una línea fina */
.vD-caja-note{
  margin: 4px 0 0 !important;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  text-align: center;
  font: italic 300 clamp(12px, 1.1vw, 15px)/1.4 var(--serif);
  color: var(--mute);
  max-width: none;
}

/* ══════════════════════════════════════════════════════════
   AGE GATE — pantalla de entrada (¿mayor de 18?)
══════════════════════════════════════════════════════════ */
.age-gate{
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg, #f5f1ea);
  overflow: hidden;
  animation: ageGateIn .5s ease both;
  padding: 24px;
}
@keyframes ageGateIn {
  from { opacity: 0; }
}
.age-gate-foam{
  position: absolute; inset: 0;
  pointer-events: none; z-index: 0;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 35%, transparent 90%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 35%, transparent 90%);
}
.age-gate-foam img{
  width: 100%; height: 100%; object-fit: cover;
  opacity: .48;
  mix-blend-mode: luminosity;
  animation: ageGateFoamPan 24s ease-in-out infinite alternate;
}
@keyframes ageGateFoamPan {
  from { transform: scale(1.05) translate(-2%, -2%); }
  to   { transform: scale(1.12) translate(3%, 3%); }
}
.age-gate-card{
  position: relative; z-index: 2;
  max-width: 460px; width: 100%;
  text-align: center;
  padding: clamp(28px, 4vw, 48px);
  background: rgba(245,241,234,0.55);
  backdrop-filter: blur(20px) saturate(1.1);
  -webkit-backdrop-filter: blur(20px) saturate(1.1);
  border: 0.5px solid rgba(15,15,15,0.08);
  border-radius: 24px;
  box-shadow: 0 30px 80px -30px rgba(15,15,15,0.25);
  animation: ageGateCardIn .8s cubic-bezier(.16,1,.3,1) both .15s;
}
@keyframes ageGateCardIn {
  from { opacity: 0; transform: translateY(20px) scale(0.96); }
  to   { opacity: 1; transform: none; }
}
.age-gate-tag{
  display: block;
  font: 500 10.5px/1 var(--mono, 'JetBrains Mono', monospace);
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--accent, #E8842B);
  margin-bottom: 22px;
}
.age-gate-title{
  margin: 0;
  font: 300 clamp(40px, 6vw, 62px)/1.05 var(--serif, 'Fraunces', serif);
  color: var(--ink, #0f0f0f);
  letter-spacing: -0.02em;
}
.age-gate-title em{
  font-style: italic; color: var(--accent, #E8842B);
}
.age-gate-sub{
  margin: 16px 0 32px;
  font: 400 clamp(14px, 1.4vw, 16px)/1.55 var(--sans, 'Inter', sans-serif);
  color: rgba(15,15,15,0.62);
}
.age-gate-actions{
  display: flex; flex-direction: column; gap: 12px;
  margin-bottom: 24px;
}
.age-gate-btn{
  width: 100%;
  padding: 16px 22px;
  border: 0;
  border-radius: 999px;
  font: 600 13px/1 var(--sans, 'Inter', sans-serif);
  letter-spacing: .04em;
  cursor: pointer;
  transition: transform .2s, opacity .2s, background .2s, color .2s;
}
.age-gate-btn-yes{
  background: var(--ink, #0f0f0f);
  color: var(--bg, #f5f1ea);
}
.age-gate-btn-yes:hover{ transform: translateY(-2px); }
.age-gate-btn-yes:active{ transform: scale(0.98); }
.age-gate-btn-no{
  background: transparent;
  color: rgba(15,15,15,0.6);
  border: 0.5px solid rgba(15,15,15,0.18);
}
.age-gate-btn-no:hover{
  background: rgba(15,15,15,0.06);
  color: var(--ink, #0f0f0f);
}
.age-gate-foot{
  display: block;
  font: italic 300 11px/1.5 var(--serif, 'Fraunces', serif);
  color: rgba(15,15,15,0.45);
}

/* Precarga dentro del gate: barra fina + estado. La experiencia carga
   detrás mientras el visitante responde. */
.age-gate-load{
  margin-top: 22px;
}
.age-gate-load-bar{
  width: min(220px, 70%);
  height: 2px;
  margin: 0 auto 8px;
  border-radius: 2px;
  background: rgba(15,15,15,0.10);
  overflow: hidden;
}
.age-gate-load-bar i{
  display: block;
  height: 100%;
  border-radius: 2px;
  background: var(--accent, #E8842B);
  transition: width .4s ease;
}
.age-gate-load-txt{
  font: 500 9.5px/1 var(--mono, 'JetBrains Mono', monospace);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(15,15,15,0.35);
}

@media (max-width: 480px){
  .age-gate{ padding: 16px; }
  .age-gate-card{ padding: 28px 22px; border-radius: 20px; }
  .age-gate-title{ font-size: clamp(38px, 11vw, 52px); }
  .age-gate-sub{ margin: 14px 0 24px; }
}

/* Age gate abierto → restaurar cursor del sistema (el custom queda detrás
   por z-index y queda invisible la interacción).  */
body.is-age-gate{ cursor: auto !important; }
body.is-age-gate button{ cursor: pointer !important; }
body.is-age-gate .cur-dot,
body.is-age-gate .cur-ring{ display: none !important; }
.age-gate, .age-gate *{ cursor: auto; }
.age-gate button{ cursor: pointer; }