/* =================================================================
   CØRDIAL · NEW · estilos para 3 variaciones
================================================================= */

:root{
  --bg:    #0a0a0a;
  --bg-2:  #111;
  --ink:   #f5f3ee;
  --paper: #f5f1ea;
  --paper-2:#ebe5d8;
  --paper-ink:#1a1a1a;
  --mute:  rgba(245,243,238,.55);
  --dim:   rgba(245,243,238,.28);
  --line:  rgba(245,243,238,.12);
  --line-d:rgba(0,0,0,.12);
  --accent:#E8842B;
  --pad:  clamp(20px, 4vw, 56px);
  --max:  1480px;
  --serif: 'Fraunces', 'Cormorant Garamond', Georgia, serif;
  --sans:  'Inter', ui-sans-serif, system-ui, sans-serif;
  --mono:  'JetBrains Mono', ui-monospace, monospace;
  --dens:  1;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body{
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  cursor: none;
}
@media (hover: none){ body { cursor: auto; } }

a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { font-family: inherit; cursor: none; }
::selection { background: var(--accent); color: #000; }

/* ----- custom cursor · gota líquida + membrana orgánica ----- */
.cur-dot, .cur-ring{ position: fixed; top:0; left:0; pointer-events:none; z-index:9998; }
/* la gota: forma orgánica que respira; JS la estira según la velocidad */
.cur-dot{
  width: 13px; height: 13px;
  background: var(--accent);
  border-radius: 53% 47% 56% 44% / 51% 55% 45% 49%;
  animation: curGota 2.8s ease-in-out infinite;
  filter: drop-shadow(0 1px 4px rgba(15,15,15,.22));
  transition: opacity .4s ease;
}
.cur-dot.is-down{ animation-play-state: paused; }
/* membrana exterior: SOLO la línea — contorno orgánico que respira y
   cambia de forma; se expande sobre interactivos mostrando el label */
.cur-ring{
  width: 44px; height: 44px;
  border: 1.2px solid var(--accent);
  opacity: .55;
  background: transparent;
  border-radius: 58% 42% 52% 48% / 46% 54% 46% 54%;
  animation: curMembrana 7s ease-in-out infinite;
  transition: width .3s cubic-bezier(.34,1.4,.64,1), height .3s cubic-bezier(.34,1.4,.64,1),
              opacity .3s ease, border-color .5s ease;
  display: flex; align-items: center; justify-content: center;
}
.cur-ring.is-hover{ width: 86px; height: 86px; opacity: 1; }
.cur-ring.is-down{ width: 30px; height: 30px; opacity: .9; }
/* ── Intro: el cursor nace como FLECHA hacia abajo; al primer scroll la
   flecha se encoge girando y la circunferencia "se dibuja" en su lugar ── */
.cur-flecha{
  position: absolute;
  width: 20px; height: 20px;
  color: var(--accent);
  opacity: 0;
  transform: scale(.3) rotate(90deg);
  transition: opacity .45s ease, transform .45s cubic-bezier(.34,1.3,.64,1);
  pointer-events: none;
}
.cur-ring.is-intro{
  border-color: transparent;
  opacity: 1;
  animation-play-state: paused;
}
.cur-ring.is-intro .cur-flecha{
  opacity: 1;
  transform: scale(1) rotate(0deg);
  animation: flechaBaja 1.6s ease-in-out infinite;
}
.cur-dot.is-intro{ opacity: 0; }
@keyframes flechaBaja{
  0%,100%{ transform: translateY(-2px); }
  50%    { transform: translateY(3px); }
}
.cur-lbl{
  font: 500 9px/1 var(--mono); letter-spacing: .15em; text-transform: uppercase;
  color: var(--accent); white-space: nowrap;
}
@keyframes curMembrana{
  0%,100%{ 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%; }
}
/* burbujas al hacer click */
.cur-burbuja{
  position: fixed; pointer-events: none; z-index: 9997;
  border-radius: 50%;
  border: 1px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 30%, transparent);
  transform: translate(-50%,-50%);
  animation: curPop .7s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes curGota{
  0%,100%{ border-radius: 53% 47% 56% 44% / 51% 55% 45% 49%; }
  33%    { border-radius: 46% 54% 44% 56% / 56% 46% 54% 44%; }
  66%    { border-radius: 57% 43% 49% 51% / 44% 57% 43% 56%; }
}
@keyframes curPop{
  0%  { opacity: .9; }
  100%{ transform: translate(calc(-50% + var(--bx)), calc(-50% + var(--by))) scale(.15); opacity: 0; }
}
@media (hover:none){ .cur-dot, .cur-ring, .cur-burbuja { display: none; } }

/* =================================================================
   VARIANT SHELL
================================================================= */
.variant-shell{ min-height: 100vh; }

/* small caps */
.tag, .vA-num, .vC-tag, .vB-tag, .vA-eye, .vA-prod-mood{
  font: 500 10.5px/1.4 var(--mono);
  letter-spacing: .22em;
  text-transform: uppercase;
}

/* =================================================================
   VARIANT A · EDITORIAL
================================================================= */
.vA{
  --bg: #0c0a08;
  --paper: #f4eee2;
  --ink: #f5f1ea;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
}

.vA-nav{
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: 32px;
  padding: 22px var(--pad);
  transition: background .4s ease, backdrop-filter .4s ease;
}
.vA-nav.is-stick{ background: rgba(12,10,8,.7); backdrop-filter: blur(16px); border-bottom: 1px solid var(--line); }
.vA-brand{
  font: 400 22px/1 var(--serif);
  letter-spacing: .26em;
}
.vA-o{ color: var(--accent); }
.vA-links{ display:flex; gap: 30px; justify-self: center;
  font: 500 11px/1 var(--mono); letter-spacing: .22em; text-transform: uppercase;
  color: var(--mute); }
.vA-links a:hover{ color: var(--ink); }
.vA-nav-right{ display:flex; gap: 16px; align-items: center; }
.vA-cart-cnt{
  font: 500 10.5px/1 var(--mono); letter-spacing: .22em; text-transform: uppercase;
  color: var(--mute);
}
.vA-shop-btn{
  background: var(--accent); color: #1a0e00;
  border: 0; padding: 12px 22px; border-radius: 999px;
  font: 600 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase;
  transition: transform .25s ease;
}
.vA-shop-btn:hover{ transform: translateY(-1px); }

@media (max-width: 800px){
  .vA-links{ display: none; }
  .vA-nav{ grid-template-columns: 1fr auto; }
}

/* HERO */
.vA-hero{
  position: relative; height: 100vh; min-height: 720px;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 100px var(--pad) 56px;
  overflow: hidden;
}
.vA-hero-bg{ position: absolute; inset: 0; z-index: 0; will-change: transform; }
.vA-hero-bg img{ width:100%; height:100%; object-fit: cover; object-position: center; opacity:.85; }
.vA-hero-veil{
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 30% 60%, rgba(232,132,43,.12), transparent 70%),
    linear-gradient(180deg, rgba(12,10,8,.6) 0%, rgba(12,10,8,.2) 40%, rgba(12,10,8,.92) 100%);
}
.vA-hero-content{ position: relative; z-index: 2; max-width: var(--max); margin: 0 auto; width:100%; }
.vA-eye{ color: var(--accent); margin-bottom: 24px; }
.vA-h1{
  margin: 0;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(56px, 11vw, 168px);
  line-height: .92;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.vA-h1 em{ font-style: italic; font-weight: 300; color: var(--accent); }
.vA-hero-foot{
  display: grid; grid-template-columns: 1fr auto; gap: 40px;
  align-items: end; margin-top: 56px; padding-top: 32px;
  border-top: 1px solid var(--line);
}
.vA-lede{ margin: 0; font-size: 16px; max-width: 36ch; color: rgba(245,241,234,.78); }
.vA-hero-cta{ display:flex; align-items:center; gap: 22px; }
.vA-cta-primary{
  display:inline-flex; align-items:center; gap: 12px;
  background: var(--accent); color: #1a0e00;
  padding: 16px 28px; border: 0; border-radius: 999px;
  font: 600 12px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase;
  transition: transform .2s ease, background .2s ease;
}
.vA-cta-primary:hover{ transform: translateY(-2px); }
.vA-cta-primary span{ display: inline-block; transition: transform .25s ease; }
.vA-cta-primary:hover span{ transform: translateX(4px); }
.vA-cta-primary.is-warn{ background: #fff; color: #000; animation: vshake .35s ease; }
@keyframes vshake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-4px)} 75%{transform:translateX(4px)} }
.vA-cta-link{
  font: 500 11px/1 var(--mono); letter-spacing: .22em; text-transform: uppercase;
  color: var(--mute); border: 0; background: 0; padding: 0;
  border-bottom: 1px solid var(--line); padding-bottom: 4px;
}
.vA-cta-link:hover{ color: var(--ink); border-color: var(--ink); }

.vA-hero-scroll{ position:absolute; right: var(--pad); bottom: 56px; z-index:2;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  font: 500 10px/1 var(--mono); letter-spacing: .3em; text-transform: uppercase;
  color: var(--mute);
}
.vA-hero-line{ width: 1px; height: 56px; 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: 700px){
  .vA-hero-foot{ grid-template-columns: 1fr; gap: 24px; }
  .vA-hero-scroll{ display: none; }
}

/* MARQUEE */
.vA-marquee{
  background: var(--paper); color: var(--paper-ink);
  border-block: 1px solid rgba(0,0,0,.1);
  overflow: hidden; padding: 22px 0;
}
.vA-marquee-track{
  display: inline-flex; white-space: nowrap;
  animation: vAm 40s linear infinite;
  font: 300 clamp(28px, 5vw, 56px)/1 var(--serif); font-style: italic;
  letter-spacing: -0.01em;
}
.vA-marquee-track i{ color: var(--accent); font-style: normal; margin: 0 16px; }
.vA-marquee-track span{ padding-right: 32px; }
@keyframes vAm { from { transform: translateX(0); } to { transform: translateX(-33.33%); } }

/* HISTORIA */
.vA-historia{ padding: clamp(80px, 14vh, 180px) var(--pad); max-width: var(--max); margin: 0 auto; }
.vA-historia-grid{ display: grid; grid-template-columns: 5fr 6fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.vA-historia-img{ aspect-ratio: 4/5; overflow: hidden; }
.vA-historia-img img{ width:100%; height:100%; object-fit: cover; transition: transform 1.4s ease; }
.vA-historia-img:hover img{ transform: scale(1.04); }
.vA-num{ color: var(--accent); margin-bottom: 24px; }
.vA-h2{
  margin: 0 0 28px;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(36px, 5.5vw, 76px);
  line-height: .98;
  letter-spacing: -0.018em;
}
.vA-h2 em{ font-style: italic; color: var(--accent); }
.vA-p{ margin: 0 0 18px; font-size: 17px; line-height: 1.65; color: rgba(245,241,234,.82); max-width: 52ch; }
.vA-historia-stats{ display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--line); }
.vA-historia-stats > div{ display:flex; flex-direction:column; gap: 6px; }
.vA-historia-stats strong{ font: 300 44px/1 var(--serif); color: var(--accent); }
.vA-historia-stats span{ font: 500 10.5px/1.4 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--mute); }
@media (max-width: 800px){ .vA-historia-grid{ grid-template-columns: 1fr; } }

/* COLECCIÓN */
.vA-coleccion{ padding: clamp(60px, 10vh, 120px) var(--pad); max-width: var(--max); margin: 0 auto; }
.vA-sec-head{ margin-bottom: clamp(40px, 6vh, 80px); }
.vA-prod-list{ display: flex; flex-direction: column; gap: clamp(60px, 10vh, 120px); }
.vA-prod{
  display: grid;
  grid-template-columns: 1fr 1.4fr 1fr;
  gap: clamp(24px, 5vw, 80px);
  align-items: center;
}
.vA-prod:nth-child(even){ direction: rtl; }
.vA-prod:nth-child(even) > *{ direction: ltr; }
.vA-prod-meta{ display:flex; flex-direction: column; gap: 16px; }
.vA-prod-n{ font: 300 80px/1 var(--serif); color: var(--p-tone); }
.vA-prod-line{ height: 1px; width: 80px; background: var(--p-tone); }
.vA-prod-mood{ color: var(--mute); }
.vA-prod-img{
  position: relative; aspect-ratio: 720/987;
  background: radial-gradient(circle at 50% 50%, color-mix(in oklab, var(--p-tone) 12%, var(--bg)) 0%, var(--bg) 70%);
  overflow: hidden;
}
.vA-prod-img img{ width:100%; height:100%; object-fit: contain; transition: transform 1s ease; }
.vA-prod-img:hover img{ transform: scale(1.05); }
.vA-prod-info{ display:flex; flex-direction: column; gap: 16px; }
.vA-prod-name{ margin: 0; font-family: var(--serif); font-weight: 300; font-size: clamp(28px, 3vw, 42px); line-height: 1.05; letter-spacing: -0.01em; display: flex; flex-direction: column; }
.vA-prod-name em{ font-style: italic; color: var(--p-tone); font-size: 1.1em; }
.vA-prod-name span{ color: var(--mute); font-size: .68em; }
.vA-prod-notes{ margin: 0; color: rgba(245,241,234,.7); font-size: 14.5px; }
.vA-prod-foot{ display: flex; justify-content: space-between; align-items: center; padding-top: 20px; border-top: 1px solid var(--line); margin-top: 8px; }
.vA-prod-price{ font: 300 28px/1 var(--serif); }
.vA-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){
  .vA-prod{ grid-template-columns: 1fr; gap: 24px; }
  .vA-prod:nth-child(even){ direction: ltr; }
  .vA-prod-meta{ flex-direction: row; align-items: center; }
  .vA-prod-n{ font-size: 48px; }
  .vA-prod-line{ flex: 1; }
}

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

/* RITUAL */
.vA-ritual{ padding: 0 var(--pad); max-width: var(--max); margin: 0 auto; }
.vA-ritual-grid{
  display: grid; grid-template-columns: repeat(3,1fr); gap: 1px;
  background: var(--line); border-block: 1px solid var(--line);
  margin-top: 40px;
}
.vA-ritual-cell{ background: var(--bg); padding: clamp(32px, 5vw, 56px); display:flex; flex-direction: column; gap: 16px; min-height: 280px; }
.vA-ritual-n{ font: 300 64px/1 var(--serif); color: var(--accent); }
.vA-ritual-cell h3{ margin: 0; font: 400 22px/1.2 var(--serif); }
.vA-ritual-cell p{ margin: 0; color: var(--mute); }
.vA-ritual-s{ margin-top: auto; font: 500 10.5px/1 var(--mono); letter-spacing: .25em; text-transform: uppercase; color: var(--accent); }
@media (max-width: 800px){ .vA-ritual-grid{ grid-template-columns: 1fr; } }

/* CAJA */
.vA-caja{ padding: clamp(80px, 14vh, 180px) var(--pad); max-width: var(--max); margin: 0 auto; }
.vA-caja-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 96px); }
.vA-caja-imgs{ position: relative; }
.vA-caja-img-main{ width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.vA-caja-stamp{
  position: absolute; right: -20px; bottom: 40px;
  background: var(--accent); color: #1a0e00;
  padding: 24px 32px; border-radius: 999px;
  text-align: center; font-family: var(--serif);
  width: 160px; height: 160px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  transform: rotate(-8deg);
}
.vA-caja-stamp div:first-child, .vA-caja-stamp div:last-child{ font: 500 10px/1 var(--mono); letter-spacing: .22em; text-transform: uppercase; }
.vA-caja-stamp strong{ font: 300 36px/1 var(--serif); }
.vA-caja-side{ display:flex; flex-direction: column; gap: 24px; }

.vA-builder{ border: 1px solid var(--line); border-radius: 4px; padding: 22px; }
.vA-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); }
.vA-builder-head strong{ color: var(--ink); }
.vA-builder-bar{ height: 2px; background: var(--line); margin-bottom: 18px; position: relative; }
.vA-builder-fill{ position: absolute; inset: 0 auto 0 0; background: var(--accent); transition: width .5s cubic-bezier(.2,.8,.2,1); }
.vA-builder-row{ display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
.vA-builder-row:first-of-type{ border-top: 0; }
.vA-builder-name{ display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--mute); }
.vA-builder-row.is-on .vA-builder-name{ color: var(--ink); }
.vA-dot{ width: 8px; height: 8px; border-radius: 50%; }

.vA-price-row{ display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; padding: 20px 0; }
.vA-price-now{ font: 300 56px/1 var(--serif); }
.vA-price-was{ font: 500 11px/1 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--mute); margin-top: 6px; }
.vA-price-was s{ color: var(--dim); }
.vA-price-cta{ display: flex; flex-direction: column; gap: 8px; align-items: stretch; }

.vA-caja-specs{ display: grid; grid-template-columns: repeat(2,1fr); border-block: 1px solid var(--line); margin-top: 12px; }
.vA-caja-specs > div{ display: flex; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid var(--line); }
.vA-caja-specs > div:nth-child(odd){ padding-right: 14px; border-right: 1px solid var(--line); }
.vA-caja-specs > div:nth-child(even){ padding-left: 14px; }
.vA-caja-specs > div:nth-last-child(-n+2){ border-bottom: 0; }
.vA-caja-specs span{ font: 500 10.5px/1 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--mute); }
.vA-caja-specs strong{ font-weight: 500; font-size: 14px; }

@media (max-width: 800px){
  .vA-caja-grid{ grid-template-columns: 1fr; }
  .vA-caja-stamp{ right: 16px; bottom: 16px; width: 120px; height: 120px; }
}

/* EMPRESAS */
.vA-empresas{ padding: clamp(80px, 12vh, 140px) var(--pad); border-top: 1px solid var(--line); }
.vA-empresas-inner{ max-width: var(--max); margin: 0 auto; text-align: center; }
.vA-empresas-inner .vA-h2{ max-width: 22ch; margin-inline: auto; }
.vA-empresas-inner .vA-p{ margin-inline: auto; max-width: 48ch; margin-bottom: 32px; }

/* FOOT */
.vA-foot{ background: var(--paper); color: var(--paper-ink); padding: clamp(60px, 10vh, 120px) var(--pad) 30px; text-align: center; }
.vA-foot-mark{ font: 300 clamp(80px, 16vw, 240px)/1 var(--serif); letter-spacing: .14em; }
.vA-foot .vA-o{ color: var(--accent); font-style: italic; }
.vA-foot-tag{ font: italic 300 18px/1.4 var(--serif); color: rgba(0,0,0,.5); margin-bottom: 56px; }
.vA-foot-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; max-width: 800px; margin: 0 auto 40px; padding-bottom: 40px; border-bottom: 1px solid var(--line-d); text-align: left; }
.vA-foot-grid > div{ display: flex; flex-direction: column; gap: 8px; }
.vA-foot-h{ font: 500 10.5px/1 var(--mono); letter-spacing: .22em; text-transform: uppercase; margin-bottom: 8px; color: rgba(0,0,0,.55); }
.vA-foot-grid a, .vA-foot-grid span{ font-size: 14px; color: rgba(0,0,0,.7); }
.vA-foot-grid a:hover{ color: var(--accent); }
@media (max-width:700px){ .vA-foot-grid{ grid-template-columns: 1fr; } }

/* =================================================================
   VARIANT B · BOLD
================================================================= */
.vB{
  --bg: #f5f1e8;
  --ink: #0a0a0a;
  --mute: rgba(10,10,10,.55);
  --line: rgba(10,10,10,.12);
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
}
.vB-topbar{
  display: flex; justify-content: center; align-items: center; gap: 16px;
  background: #0a0a0a; color: #f5f1e8;
  padding: 10px var(--pad);
  font: 500 10.5px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase;
}
.vB-topbar span:nth-child(2){ opacity: .4; }

.vB-nav{
  position: sticky; top: 0; z-index: 50;
  display: grid; grid-template-columns: auto 1fr auto;
  gap: 24px; align-items: center;
  padding: 18px var(--pad);
  background: rgba(245,241,232,.85);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  transition: padding .3s ease;
}
.vB-nav.is-stick{ padding: 12px var(--pad); }
.vB-brand{ font: 600 24px/1 var(--sans); letter-spacing: -.02em; }
.vB-links{ display: flex; gap: 24px; justify-self: center;
  font: 500 12px/1 var(--sans); letter-spacing: .04em; text-transform: uppercase; }
.vB-links a:hover{ color: var(--accent); }
.vB-cart{
  background: var(--ink); color: var(--bg);
  border: 0; padding: 12px 18px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 8px;
  font: 600 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase;
}
.vB-cart strong{ background: var(--accent); color: #1a0e00; padding: 4px 8px; border-radius: 999px; min-width: 22px; text-align: center; }
@media (max-width: 800px){ .vB-links{ display: none; } .vB-nav{ grid-template-columns: 1fr auto; } }

/* HERO BOLD */
.vB-hero{
  padding: clamp(40px, 8vh, 100px) var(--pad);
  position: relative;
  overflow: hidden;
}
.vB-hero-text{
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(72px, 18vw, 280px);
  line-height: .85;
  letter-spacing: -0.04em;
}
.vB-hero-line{
  display: flex; align-items: center; gap: clamp(20px, 3vw, 40px);
  white-space: nowrap;
}
.vB-l1{ overflow: hidden; }
.vB-l1 .vB-hero-word{ display: inline-block; animation: vBup 1s cubic-bezier(.2,.8,.2,1) both; }
.vB-l2{ justify-content: flex-start; gap: clamp(12px, 2vw, 28px); }
.vB-l2 .vB-italic{ font-style: italic; color: var(--accent); }
.vB-l3{ justify-content: flex-end; }
.vB-l3 .vB-hero-word{ display:inline-block; }
.vB-hero-img-inline{
  display: inline-block;
  width: clamp(80px, 14vw, 220px);
  height: clamp(80px, 14vw, 220px);
  border-radius: 999px; overflow: hidden; vertical-align: middle;
  background: var(--ink);
  flex-shrink: 0;
  animation: vBpop .9s cubic-bezier(.2,1.4,.4,1) both .2s;
}
.vB-hero-img-inline img{ width: 100%; height: 100%; object-fit: cover; }
@keyframes vBup { from { transform: translateY(120%); } to { transform: translateY(0); } }
@keyframes vBpop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.vB-hero-meta{
  display: grid; grid-template-columns: 1fr auto; gap: 32px;
  margin-top: clamp(40px, 6vh, 80px);
  padding-top: 28px;
  border-top: 1px solid var(--line);
  align-items: end;
}
.vB-cta-pill{
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--ink); color: var(--bg);
  padding: 18px 28px; border-radius: 999px;
  font: 600 13px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase;
  border: 0; transition: transform .25s ease;
}
.vB-cta-pill:hover{ transform: translateY(-2px); }
.vB-cta-dot{ width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 0%,100%{ transform: scale(1); opacity: 1; } 50%{ transform: scale(1.5); opacity: .5; } }
.vB-hero-meta-info{ display: flex; gap: 32px; font: 500 11px/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.vB-hero-meta-info strong{ display: block; font: 600 28px/1 var(--sans); color: var(--ink); margin-bottom: 4px; letter-spacing: -.02em; }

@media (max-width: 700px){
  .vB-hero-meta{ grid-template-columns: 1fr; }
  .vB-hero-meta-info{ flex-wrap: wrap; gap: 16px; }
}

/* MARQUEE B */
.vB-marquee{
  background: var(--ink); color: var(--bg);
  overflow: hidden; padding: 24px 0;
  border-block: 1px solid var(--ink);
}
.vB-marquee-track{
  display: inline-flex; white-space: nowrap;
  animation: vBm 30s linear infinite;
  font: 600 clamp(44px, 8vw, 96px)/1 var(--serif);
  letter-spacing: -0.02em;
}
.vB-marquee-track i{ color: var(--accent); font-style: normal; margin: 0 16px; }
.vB-marquee-track span{ padding-right: 32px; }
@keyframes vBm { from { transform: translateX(0); } to { transform: translateX(-25%); } }

/* SHOP B */
.vB-shop{ padding: clamp(80px, 12vh, 140px) var(--pad); max-width: var(--max); margin: 0 auto; }
.vB-section-head{ margin-bottom: clamp(40px, 6vh, 80px); display: grid; grid-template-columns: auto 1fr; gap: 32px; align-items: end; }
.vB-tag{ font: 500 11px/1 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--accent); }
.vB-section-head h2{
  margin: 0; justify-self: end; text-align: right;
  font: 300 clamp(40px, 8vw, 120px)/.92 var(--serif);
  letter-spacing: -0.025em;
}
.vB-section-head em{ font-style: italic; color: var(--accent); }

.vB-prods{ display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2vw, 32px); }
.vB-prod{
  position: relative; padding: 24px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #fffdf7;
  display: flex; flex-direction: column; gap: 16px;
  transition: transform .35s ease, box-shadow .35s ease;
}
.vB-prod:hover{ transform: translateY(-4px); box-shadow: 0 18px 50px rgba(0,0,0,.08); }
.vB-prod-num{
  position: absolute; top: 16px; right: 20px;
  font: 600 12px/1 var(--mono); letter-spacing: .14em; color: var(--mute);
}
.vB-prod-img{
  position: relative; aspect-ratio: 1; border-radius: 4px; overflow: hidden;
  background: #0a0a0a;
}
.vB-prod-img img{ width: 100%; height: 100%; object-fit: contain; }
.vB-prod-tone{
  position: absolute; inset: auto 0 0 0; height: 50%;
  background: linear-gradient(0deg, color-mix(in oklab, var(--p-tone) 40%, transparent), transparent);
}
.vB-prod-h{ margin: 0; font: 400 32px/1 var(--serif); letter-spacing: -0.01em; }
.vB-prod-mood{ margin: 0; font: 500 10.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--p-tone); }
.vB-prod-notes{ margin: 0; font-size: 13.5px; color: var(--mute); line-height: 1.5; }
.vB-prod-buy{ display: flex; justify-content: space-between; align-items: center; padding-top: 16px; margin-top: auto; border-top: 1px solid var(--line); }
.vB-prod-price{ font: 500 22px/1 var(--sans); }
.vB-prod-price small{ display: block; margin-top: 4px; font: 500 10px/1 var(--mono); letter-spacing: .2em; color: var(--mute); }

.vB-qty{ border-color: var(--line); }
.vB-qty button:hover:not(:disabled){ background: var(--ink); color: var(--bg); }
.vB-qty span{ border-color: var(--line); }

@media (max-width: 800px){ .vB-prods{ grid-template-columns: 1fr; } }

/* MANIFEST */
.vB-manifest{ background: var(--ink); color: var(--bg); padding: clamp(80px, 14vh, 180px) var(--pad); }
.vB-manifest-inner{ max-width: 1100px; margin: 0 auto; }
.vB-manifest-h{
  margin: 24px 0 36px;
  font: 300 clamp(40px, 7vw, 100px)/1 var(--serif);
  letter-spacing: -0.02em;
}
.vB-manifest-h em{ font-style: italic; color: var(--accent); }
.vB-manifest-p{ font-size: clamp(18px, 1.6vw, 24px); line-height: 1.5; max-width: 60ch; color: rgba(245,241,232,.8); }

/* RITUAL B */
.vB-ritual{ padding: clamp(60px, 10vh, 120px) var(--pad); max-width: var(--max); margin: 0 auto; }
.vB-ritual-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 48px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.vB-ritual-cell{ padding: clamp(28px, 4vw, 48px); border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 14px; min-height: 280px; }
.vB-ritual-cell:last-child{ border-right: 0; }
.vB-ritual-row{ display: flex; justify-content: space-between; }
.vB-ritual-row strong{ font: 300 36px/1 var(--serif); color: var(--accent); }
.vB-ritual-row span{ font: 500 10.5px/1 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--mute); align-self: end; }
.vB-ritual-cell h3{ margin: auto 0 8px; font: 400 28px/1.05 var(--serif); }
.vB-ritual-cell p{ margin: 0; color: var(--mute); }
@media (max-width: 800px){
  .vB-ritual-grid{ grid-template-columns: 1fr; }
  .vB-ritual-cell{ border-right: 0; border-bottom: 1px solid var(--line); }
  .vB-ritual-cell:last-child{ border-bottom: 0; }
}

/* CAJA B */
.vB-caja{ padding: clamp(80px, 14vh, 180px) var(--pad); background: #0a0a0a; color: #f5f1e8; }
.vB-caja .vB-tag{ color: var(--accent); }
.vB-caja-grid{ display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(40px, 6vw, 96px); max-width: var(--max); margin: 0 auto; }
.vB-caja-art{ position: relative; aspect-ratio: 1; }
.vB-caja-h-bg{
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font: 300 clamp(180px, 26vw, 380px)/1 var(--serif);
  letter-spacing: -0.04em;
  color: rgba(245,241,232,.04);
  pointer-events: none;
}
.vB-caja-art img{ position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; }
.vB-caja-stamp{
  position: absolute; right: 8%; top: 12%; z-index: 2;
  background: var(--accent); color: #1a0e00;
  width: 140px; height: 140px; border-radius: 999px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; transform: rotate(-10deg);
}
.vB-caja-stamp strong{ font: 300 32px/1 var(--serif); }
.vB-caja-stamp span{ font: 500 9px/1.2 var(--mono); letter-spacing: .2em; text-transform: uppercase; margin-top: 4px; }

.vB-caja-builder h2{ margin: 18px 0 10px; font: 300 clamp(36px, 5vw, 64px)/1 var(--serif); letter-spacing: -.02em; }
.vB-caja-builder p{ color: rgba(245,241,232,.65); margin: 0 0 28px; }

.vB-caja-builder .vB-tag{ color: var(--accent); }
.vB-caja-builder .vB-builder{ background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); border-radius: 6px; padding: 22px; }
.vB-builder-head{ display: flex; justify-content: space-between; font: 500 11px/1 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: rgba(245,241,232,.5); margin-bottom: 14px; }
.vB-builder-head strong{ color: #f5f1e8; }
.vB-builder-bar{ height: 3px; background: rgba(255,255,255,.1); margin-bottom: 18px; position: relative; border-radius: 99px; overflow: hidden; }
.vB-builder-fill{ position: absolute; inset: 0 auto 0 0; background: var(--accent); transition: width .5s cubic-bezier(.2,.8,.2,1); }
.vB-builder-row{ display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-top: 1px solid rgba(255,255,255,.08); }
.vB-builder-row:first-of-type{ border-top: 0; }
.vB-builder-name{ display: flex; align-items: center; gap: 12px; font-size: 14px; color: rgba(245,241,232,.55); }
.vB-builder-row.is-on .vB-builder-name{ color: #f5f1e8; }
.vB-builder-name small{ font: 500 9px/1 var(--mono); letter-spacing: .22em; color: var(--mute); margin-left: 6px; text-transform: uppercase; }
.vB-dot{ width: 8px; height: 8px; border-radius: 50%; }

.vB-caja-builder .vB-qty{ border-color: rgba(255,255,255,.15); }
.vB-caja-builder .vB-qty span{ border-color: rgba(255,255,255,.15); color: #f5f1e8; }
.vB-caja-builder .vB-qty button{ color: #f5f1e8; }
.vB-caja-builder .vB-qty button:hover:not(:disabled){ background: var(--accent); color: #1a0e00; }

.vB-price-row{ display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center; padding: 24px 0 12px; }
.vB-price-now{ font: 300 56px/1 var(--serif); letter-spacing: -.02em; }
.vB-price-was{ margin-top: 6px; font: 500 11px/1 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: rgba(245,241,232,.5); }
.vB-price-was s{ color: rgba(245,241,232,.3); }
.vB-cta-big{
  background: var(--accent); color: #1a0e00; border: 0; padding: 20px 32px; border-radius: 999px;
  font: 600 13px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase;
}
.vB-cta-big:hover{ transform: translateY(-2px); }
.vB-cta-big.is-warn{ background: #fff; animation: vshake .35s ease; }
.vB-cta-link{ background: 0; border: 0; color: rgba(245,241,232,.55); font: 500 11px/1 var(--mono); letter-spacing: .22em; text-transform: uppercase; padding: 12px 0; margin-top: 8px; border-bottom: 1px solid rgba(255,255,255,.15); }
.vB-cta-link:hover{ color: #f5f1e8; }

@media (max-width: 800px){
  .vB-caja-grid{ grid-template-columns: 1fr; }
}

/* B2B B */
.vB-b2b{ padding: clamp(60px, 10vh, 120px) var(--pad); }
.vB-b2b-inner{ max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: end; padding-block: 32px; border-block: 1px solid var(--line); }
.vB-b2b-inner h2{ margin: 12px 0 0; font: 300 clamp(32px, 5vw, 64px)/1 var(--serif); letter-spacing: -0.02em; max-width: 22ch; }

/* FOOT B */
.vB-foot{ background: var(--ink); color: var(--bg); padding: clamp(60px, 10vh, 100px) var(--pad) 30px; }
.vB-foot-mark{ font: 300 clamp(120px, 22vw, 320px)/.85 var(--serif); letter-spacing: -.04em; margin-bottom: 40px; color: rgba(245,241,232,.06); user-select: none; }
.vB-foot-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; padding-top: 32px; border-top: 1px solid rgba(255,255,255,.1); }
.vB-foot-grid > div{ display: flex; flex-direction: column; gap: 8px; }
.vB-foot-grid span{ font: 500 10.5px/1 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: rgba(245,241,232,.45); margin-bottom: 8px; }
.vB-foot-grid a{ font-size: 14px; color: rgba(245,241,232,.75); }
.vB-foot-grid a:hover{ color: var(--accent); }
@media (max-width: 700px){ .vB-foot-grid{ grid-template-columns: 1fr; } }

/* =================================================================
   VARIANT C · MAGAZINE
================================================================= */
.vC{
  --bg: #ebe5d8;
  --ink: #14110d;
  --bg-d: #14110d;
  --mute: rgba(20,17,13,.55);
  --line: rgba(20,17,13,.18);
  background: var(--bg);
  color: var(--ink);
  font-family: var(--serif);
}

.vC-issue{
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px;
  padding: 8px var(--pad);
  font: 500 10px/1 var(--mono); letter-spacing: .22em; text-transform: uppercase;
  background: var(--bg-d); color: var(--bg);
}
.vC-issue-mid{ text-align: center; opacity: .85; }
.vC-issue > span:last-child{ text-align: right; }

.vC-nav{
  position: sticky; top: 0; z-index: 50;
  display: grid; grid-template-columns: auto 1fr auto;
  gap: 32px; align-items: center;
  padding: 14px var(--pad);
  background: rgba(235,229,216,.92);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.vC-brand{ font: 400 22px/1 var(--serif); letter-spacing: .14em; }
.vC-brand .vC-o{ color: var(--accent); font-style: italic; }
.vC-links{ display: flex; gap: 24px; justify-self: center; font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.vC-links a:hover{ color: var(--ink); }
.vC-cart{
  background: 0; border: 1px solid var(--ink); color: var(--ink);
  padding: 10px 16px; border-radius: 0;
  font: 500 11px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase;
}
.vC-cart:hover{ background: var(--ink); color: var(--bg); }
@media (max-width: 800px){ .vC-links{ display: none; } .vC-nav{ grid-template-columns: 1fr auto; } }

/* HERO C grid */
.vC-hero{ padding: clamp(40px, 6vh, 80px) var(--pad); max-width: var(--max); margin: 0 auto; }
.vC-hero-grid{
  display: grid;
  grid-template-columns: 7fr 5fr;
  grid-template-rows: auto auto;
  gap: clamp(24px, 4vw, 56px);
}
.vC-hero-tl{ display: flex; flex-direction: column; justify-content: flex-end; gap: 24px; }
.vC-tag{ font: 500 11px/1 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--accent); }
.vC-h1{
  margin: 0;
  font: 300 clamp(56px, 11vw, 168px)/.92 var(--serif);
  letter-spacing: -0.025em;
  display: flex; flex-direction: column;
}
.vC-h1 > span{ display: block; }
.vC-h1 .vC-italic{ font-style: italic; color: var(--accent); padding-left: clamp(40px, 8vw, 120px); }
.vC-h1 .vC-underline{
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--accent);
  text-underline-offset: 0.08em;
  padding-left: clamp(20px, 4vw, 56px);
}
.vC-hero-tr{ position: relative; aspect-ratio: 4/5; overflow: hidden; background: var(--bg-d); grid-row: 1 / 3; align-self: stretch; }
.vC-hero-tr img{ width: 100%; height: 100%; object-fit: cover; }
.vC-hero-tr-cap{
  position: absolute; left: 16px; bottom: 16px;
  font: 500 10px/1 var(--mono); letter-spacing: .22em; text-transform: uppercase;
  color: #fff; background: rgba(0,0,0,.6); padding: 8px 12px;
}
.vC-hero-bl{ display: flex; flex-direction: column; gap: 24px; padding-top: 24px; border-top: 1px solid var(--line); }
.vC-lede{ margin: 0; font: 400 18px/1.5 var(--sans); max-width: 44ch; color: rgba(20,17,13,.78); }
.vC-hero-cta{ display: flex; gap: 16px; flex-wrap: wrap; }
.vC-btn{
  background: var(--ink); color: var(--bg);
  border: 0; padding: 14px 22px;
  font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
  transition: background .2s ease, transform .2s ease;
}
.vC-btn:hover{ transform: translateY(-2px); }
.vC-btn.is-warn{ background: var(--accent); animation: vshake .35s ease; }
.vC-btn-ghost{
  background: 0; border: 1px solid var(--ink); color: var(--ink);
  padding: 14px 22px;
  font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
}
.vC-btn-ghost:hover{ background: var(--ink); color: var(--bg); }

.vC-hero-br{ display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; padding-top: 24px; border-top: 1px solid var(--line); }
.vC-hero-stat strong{ display: block; font: 300 44px/1 var(--serif); color: var(--accent); margin-bottom: 4px; }
.vC-hero-stat span{ font: 500 10.5px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }

@media (max-width: 800px){
  .vC-hero-grid{ grid-template-columns: 1fr; }
  .vC-hero-tr{ grid-row: auto; aspect-ratio: 4/3; }
  .vC-h1 .vC-italic, .vC-h1 .vC-underline{ padding-left: 0; }
}

/* TICKER */
.vC-ticker{
  background: var(--ink); color: var(--bg);
  overflow: hidden; padding: 18px 0;
}
.vC-ticker-track{
  display: inline-flex; white-space: nowrap;
  animation: vCt 35s linear infinite;
  font: italic 300 clamp(28px, 4vw, 44px)/1 var(--serif);
}
.vC-ticker-track span{ padding-right: 32px; }
@keyframes vCt { from { transform: translateX(0); } to { transform: translateX(-33.33%); } }

/* SHOP C */
.vC-shop{ padding: clamp(80px, 12vh, 140px) var(--pad); max-width: var(--max); margin: 0 auto; }
.vC-spread{ display: grid; grid-template-columns: 7fr 5fr; gap: clamp(32px, 6vw, 80px); margin-bottom: 60px; align-items: end; padding-bottom: 40px; border-bottom: 1px solid var(--line); }
.vC-h2{ margin: 16px 0 24px; font: 300 clamp(36px, 6vw, 88px)/.96 var(--serif); letter-spacing: -0.02em; }
.vC-h2 em{ font-style: italic; color: var(--accent); }
.vC-h2.vC-center{ text-align: center; max-width: 24ch; margin-inline: auto; }
.vC-p{ margin: 0; font: 400 16px/1.6 var(--sans); color: rgba(20,17,13,.75); max-width: 44ch; }
.vC-pull{ font: italic 300 clamp(24px, 3vw, 36px)/1.2 var(--serif); padding-left: 24px; border-left: 2px solid var(--accent); }
.vC-pull div{ font: 700 64px/.4 var(--serif); color: var(--accent); margin-bottom: -16px; }

.vC-cat{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.vC-card{
  display: flex; flex-direction: column;
  background: #f5f1ea;
  border: 1px solid var(--line);
  padding: 24px;
  transition: transform .35s ease, background .35s ease;
}
.vC-card:hover{ transform: translateY(-4px); background: #fff; }
.vC-card-head{ display: flex; justify-content: space-between; font: 500 10.5px/1 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--mute); margin-bottom: 12px; }
.vC-card-img{ position: relative; aspect-ratio: 4/5; background: var(--bg-d); overflow: hidden; margin-bottom: 16px; }
.vC-card-img img{ width: 100%; height: 100%; object-fit: contain; transition: transform .8s ease; }
.vC-card:hover .vC-card-img img{ transform: scale(1.04); }
.vC-card-name{ margin: 0 0 6px; font: 400 26px/1 var(--serif); letter-spacing: -0.01em; }
.vC-card-mood{ margin: 0; font: 500 10.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--p-tone); }
.vC-card-foot{ display: flex; justify-content: space-between; align-items: center; padding-top: 18px; margin-top: auto; border-top: 1px solid var(--line); }
.vC-card-price{ font: 500 22px/1 var(--sans); }

.vC-qty{ border-color: var(--line); border-radius: 0; }
.vC-qty span{ border-color: var(--line); }
.vC-qty button:hover:not(:disabled){ background: var(--ink); color: var(--bg); }

@media (max-width: 800px){ .vC-cat{ grid-template-columns: 1fr; } .vC-spread{ grid-template-columns: 1fr; } }

/* RECETAS */
.vC-recetas{ padding: clamp(80px, 12vh, 140px) var(--pad); background: var(--bg-d); color: var(--bg); }
.vC-recetas .vC-receta{
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 80px);
  align-items: center; max-width: var(--max); margin: 0 auto;
  padding-block: clamp(40px, 6vh, 80px); border-bottom: 1px solid rgba(255,255,255,.1);
}
.vC-recetas .vC-receta:last-child{ border-bottom: 0; }
.vC-receta.is-flip{ direction: rtl; }
.vC-receta.is-flip > *{ direction: ltr; }
.vC-receta-img{ aspect-ratio: 4/5; overflow: hidden; background: #000; }
.vC-receta-img img{ width: 100%; height: 100%; object-fit: contain; }
.vC-receta-num{ font: 500 11px/1 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--p-tone); margin-bottom: 16px; }
.vC-receta-h{ margin: 0 0 16px; font: 300 clamp(40px, 6vw, 80px)/.95 var(--serif); letter-spacing: -0.02em; }
.vC-receta-notes{ margin: 0 0 12px; font: 400 17px/1.55 var(--sans); color: rgba(245,241,232,.78); max-width: 38ch; }
.vC-receta-mood{ font: 500 10.5px/1 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--p-tone); margin-bottom: 32px; }
.vC-receta-foot{ display: flex; justify-content: space-between; align-items: center; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.15); }
.vC-receta-foot > div:first-child{ font: 300 36px/1 var(--serif); }
.vC-receta-foot small{ font: 500 10.5px/1 var(--mono); letter-spacing: .22em; color: rgba(245,241,232,.5); }
.vC-recetas .vC-qty{ border-color: rgba(255,255,255,.18); }
.vC-recetas .vC-qty span{ border-color: rgba(255,255,255,.18); color: var(--bg); }
.vC-recetas .vC-qty button{ color: var(--bg); }
.vC-recetas .vC-qty button:hover:not(:disabled){ background: var(--accent); color: #1a0e00; }

@media (max-width: 800px){
  .vC-recetas .vC-receta{ grid-template-columns: 1fr; }
  .vC-receta.is-flip{ direction: ltr; }
}

/* RITUAL C */
.vC-ritual{ padding: clamp(80px, 12vh, 140px) var(--pad); max-width: var(--max); margin: 0 auto; text-align: center; }
.vC-ritual .vC-tag{ display: block; margin-bottom: 8px; }
.vC-ritual-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 56px; background: var(--line); border-block: 1px solid var(--line); }
.vC-ritual-cell{ background: var(--bg); padding: clamp(32px, 5vw, 56px); display: flex; flex-direction: column; align-items: flex-start; gap: 14px; min-height: 240px; text-align: left; }
.vC-ritual-cell strong{ font: 300 64px/1 var(--serif); color: var(--accent); }
.vC-ritual-cell h3{ margin: 0; font: 400 24px/1 var(--serif); }
.vC-ritual-cell p{ margin: 0; color: var(--mute); font-family: var(--sans); }
@media (max-width: 800px){ .vC-ritual-grid{ grid-template-columns: 1fr; } }

/* CAJA C */
.vC-caja{ padding: clamp(80px, 14vh, 180px) var(--pad); background: #f5f1ea; }
.vC-caja-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 80px); max-width: var(--max); margin: 0 auto; align-items: center; }
.vC-caja-art{ aspect-ratio: 4/5; overflow: hidden; background: #000; }
.vC-caja-art img{ width: 100%; height: 100%; object-fit: contain; }
.vC-caja-build h2{ margin: 12px 0 14px; }
.vC-caja-build p{ margin-bottom: 28px; }

.vC-builder{ background: #fff; border: 1px solid var(--line); padding: 22px; }
.vC-builder-head{ display: flex; justify-content: space-between; font: 500 11px/1 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--mute); margin-bottom: 14px; }
.vC-builder-bar{ height: 4px; background: var(--line); margin-bottom: 18px; position: relative; }
.vC-builder-fill{ position: absolute; inset: 0 auto 0 0; background: var(--accent); transition: width .5s cubic-bezier(.2,.8,.2,1); }
.vC-builder-tick{ position: absolute; top: -2px; bottom: -2px; width: 1px; background: var(--bg); }
.vC-builder-row{ display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
.vC-builder-row:first-of-type{ border-top: 0; }
.vC-builder-name{ display: flex; align-items: center; gap: 12px; color: var(--mute); font-family: var(--sans); font-size: 14px; }
.vC-builder-row.is-on .vC-builder-name{ color: var(--ink); }
.vC-dot{ width: 8px; height: 8px; border-radius: 50%; }

.vC-price-block{ padding: 20px 0 4px; }
.vC-price-now{ font: 300 56px/1 var(--serif); letter-spacing: -.02em; }
.vC-price-save{ margin-top: 6px; font: 500 11px/1 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--accent); }
.vC-price-save s{ color: var(--dim); margin-right: 6px; }

.vC-cta-row{ display: flex; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.vC-cta-row .vC-btn{ flex: 1 1 240px; }

@media (max-width: 800px){ .vC-caja-grid{ grid-template-columns: 1fr; } }

/* B2B C */
.vC-b2b{ padding: clamp(80px, 12vh, 140px) var(--pad); background: var(--bg); border-top: 1px solid var(--line); }
.vC-b2b-grid{ max-width: var(--max); margin: 0 auto; text-align: center; }
.vC-b2b-grid h2{ max-width: 22ch; margin-inline: auto; }
.vC-b2b-grid p{ margin-inline: auto; max-width: 48ch; margin-bottom: 28px; }

/* STICKY */
.vC-sticky{
  position: fixed; left: 50%; bottom: 24px; z-index: 60;
  transform: translateX(-50%);
  background: var(--ink); color: var(--bg);
  display: flex; align-items: center; gap: 20px;
  padding: 10px 10px 10px 22px;
  border-radius: 999px;
  box-shadow: 0 18px 60px rgba(0,0,0,.25);
  animation: vCstickIn .35s cubic-bezier(.2,1.4,.4,1) both;
  font-family: var(--sans);
}
@keyframes vCstickIn { from { transform: translate(-50%, 30px); opacity: 0; } to { transform: translateX(-50%); opacity: 1; } }
.vC-sticky-info{ display: flex; align-items: baseline; gap: 8px; }
.vC-sticky-info strong{ font: 600 18px/1 var(--sans); }
.vC-sticky-info span{ font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: rgba(245,241,232,.55); }
.vC-sticky-price{ font: 600 18px/1 var(--sans); padding-inline: 16px; border-left: 1px solid rgba(255,255,255,.15); }
.vC-sticky-btn{ background: var(--accent); color: #1a0e00; padding: 12px 18px; }
@media (max-width: 600px){
  .vC-sticky{ left: 12px; right: 12px; transform: none; bottom: 12px; }
  @keyframes vCstickIn { from { transform: translateY(30px); opacity: 0; } to { transform: none; opacity: 1; } }
}

/* FOOT C */
.vC-foot{ background: var(--bg-d); color: var(--bg); padding: clamp(60px, 10vh, 100px) var(--pad) 30px; padding-bottom: 80px; }
.vC-foot-mark{ font: 300 clamp(80px, 18vw, 240px)/.85 var(--serif); letter-spacing: .12em; margin-bottom: 40px; }
.vC-foot .vC-o{ color: var(--accent); font-style: italic; }
.vC-foot-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; padding-top: 32px; border-top: 1px solid rgba(255,255,255,.12); }
.vC-foot-grid > div{ display: flex; flex-direction: column; gap: 8px; }
.vC-foot-grid span{ font: 500 10.5px/1 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: rgba(245,241,232,.45); margin-bottom: 8px; }
.vC-foot-grid a{ font: 400 14px/1.4 var(--sans); color: rgba(245,241,232,.75); }
.vC-foot-grid a:hover{ color: var(--accent); }
@media (max-width: 700px){ .vC-foot-grid{ grid-template-columns: 1fr; } }

/* density (for tweaks) */
.is-dens-compact { --dens: .8; }
.is-dens-comfy   { --dens: 1.15; }
.is-dens-compact section { padding-block: clamp(32px, 5vh, 60px); }
.is-dens-comfy   section { padding-block: clamp(120px, 18vh, 220px); }
