/* ============================================================
   CRISTINA BEAUTY DESIGNER · PREMIUM LAYER (external)
   Effects ported from the React prompt set to vanilla + palette.
   NO scroll-pin anywhere → 100% fluid scroll, zero phantom space.
   Palette: --wine-deep --wine-bright --gold --gold-light --cream
   ============================================================ */

/* ---------- 1 · CURSOR SPOTLIGHT on cards (gold) ---------- */
.cbd-spot{ position:relative; }
.cbd-spot::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  opacity:0; transition:opacity .45s cubic-bezier(.16,1,.3,1); z-index:1;
  background:radial-gradient(320px circle at var(--spx,50%) var(--spy,50%),
    rgba(201,169,97,.20), rgba(201,169,97,.06) 42%, transparent 66%);
}
.cbd-spot::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  opacity:0; transition:opacity .45s cubic-bezier(.16,1,.3,1); z-index:2;
  padding:1px; -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  background:radial-gradient(260px circle at var(--spx,50%) var(--spy,50%),
    rgba(229,208,152,.9), rgba(201,169,97,.25) 45%, transparent 70%);
}
@media (hover:hover) and (pointer:fine){
  .cbd-spot:hover::before, .cbd-spot:hover::after{ opacity:1; }
}
@media (prefers-reduced-motion:reduce){ .cbd-spot::before,.cbd-spot::after{ display:none; } }

/* ---------- 2 · GOLD SHIMMER TEXT ---------- */
.cbd-shimmer{
  background:linear-gradient(110deg,
    var(--gold-dark,#9A7B36) 0%, var(--gold,#C9A24E) 30%,
    var(--gold-light,#ECD7A4) 50%, var(--gold,#C9A24E) 70%, var(--gold-dark,#9A7B36) 100%);
  background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  animation:cbdShimmer 5.5s linear infinite;
}
@keyframes cbdShimmer{ 0%{ background-position:220% 0; } 100%{ background-position:-120% 0; } }
@media (prefers-reduced-motion:reduce){ .cbd-shimmer{ animation:none; } }

/* ---------- 3 · 3D perspective wrappers for magnetic buttons ---------- */
.magnetic-pro, [data-magnetic]{ transform-style:preserve-3d; }

/* ---------- 4 · FLOW STORYTELLING (from story-scroll, NO pin) ---------- */
/* A vertical sequence of full-bleed panels that reveal with depth as they
   enter the viewport. Replaces the broken horizontal pin. */
.cbd-flow{ position:relative; }
.cbd-flow-panel{
  position:relative; min-height:auto; padding:clamp(4rem,9vw,8rem) 0;
  overflow:hidden;
}
.cbd-flow-inner{
  max-width:1400px; margin:0 auto; padding:0 clamp(1.25rem,4vw,2.5rem);
  display:flex; flex-direction:column; gap:clamp(1.2rem,2.4vw,2rem);
}
.cbd-flow-num{
  font-family:'Manrope',sans-serif; font-size:.72rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.3em; opacity:.85;
}
.cbd-flow-rule{ height:1px; width:100%; opacity:.4; }
.cbd-flow-h{
  font-family:'Italiana',serif; font-weight:400;
  font-size:clamp(2.6rem,8vw,7rem); line-height:.92; letter-spacing:-.01em; margin:0;
}
.cbd-flow-h em{ font-family:'Cormorant Garamond',serif; font-style:italic; }
.cbd-flow-lede{
  font-family:'Cormorant Garamond',serif; font-style:italic;
  font-size:clamp(1.1rem,2.4vw,1.8rem); line-height:1.5; max-width:54ch; margin:0;
}
.cbd-flow-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:clamp(1.4rem,3vw,2.6rem); margin-top:1rem;
}
.cbd-flow-item-t{
  font-family:'Manrope',sans-serif; font-size:.78rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.16em; margin:0 0 .55rem;
}
.cbd-flow-item-d{
  font-family:'Cormorant Garamond',serif; font-size:1.15rem; line-height:1.5;
  opacity:.82; margin:0;
}
/* reveal state (JS-driven; CSS fallback = visible) */
.cbd-anim{ opacity:0; transform:translate3d(0,46px,0); will-change:transform,opacity; }
.cbd-anim.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .cbd-anim{ opacity:1; transform:none; } }

/* ---------- 5 · CINEMATIC GALLERY ZOOM (NO pin, scroll-scrubbed scale) ---------- */
/* Section stays in normal flow. Images scale up gently as the section
   passes through the viewport. No sticky, no height hijack. */
#cbd-zoom{ position:relative; background:var(--wine-deep,#4E0610); overflow:hidden; padding:clamp(4rem,8vw,7rem) 0; }
.cbd-zoom-head{ text-align:center; margin-bottom:clamp(2rem,4vw,3.5rem); padding:0 1.25rem; }
.cbd-zoom-eyebrow{
  font-family:'Manrope',sans-serif; font-size:.72rem; text-transform:uppercase;
  letter-spacing:.4em; color:var(--gold-light,#ECD7A4); margin-bottom:1rem;
}
.cbd-zoom-title{
  font-family:'Italiana',serif; font-weight:400; color:var(--cream, #FCFBF9);
  font-size:clamp(2.2rem,5vw,4.2rem); line-height:1.05; margin:0;
}
.cbd-zoom-grid{
  max-width:1400px; margin:0 auto; padding:0 clamp(1rem,3vw,2rem);
  display:grid; grid-template-columns:repeat(12,1fr);
  grid-auto-rows:11vw; gap:clamp(.6rem,1.2vw,1rem);
}
.cbd-zoom-cell{ overflow:hidden; border-radius:14px; position:relative;
  box-shadow:0 24px 60px rgba(0,0,0,.45); border:1px solid rgba(201,169,97,.18); }
.cbd-zoom-cell img{
  width:100%; height:100%; object-fit:cover; display:block;
  transform:scale(1.15); will-change:transform; transition:transform .6s cubic-bezier(.16,1,.3,1);
}
.cbd-zoom-cell::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,transparent 55%,rgba(92,7,16,.45)); pointer-events:none; }
@media (hover:hover){ .cbd-zoom-cell:hover img{ transform:scale(1.05); } }
/* editorial mosaic spans */
.cbd-zoom-cell.c0{ grid-column:span 5; grid-row:span 3; }
.cbd-zoom-cell.c1{ grid-column:span 4; grid-row:span 2; }
.cbd-zoom-cell.c2{ grid-column:span 3; grid-row:span 2; }
.cbd-zoom-cell.c3{ grid-column:span 4; grid-row:span 2; }
.cbd-zoom-cell.c4{ grid-column:span 3; grid-row:span 3; }
.cbd-zoom-cell.c5{ grid-column:span 5; grid-row:span 2; }
.cbd-zoom-cell.c6{ grid-column:span 4; grid-row:span 2; }
@media (max-width:900px){
  .cbd-zoom-grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:42vw; }
  .cbd-zoom-cell{ grid-column:span 1 !important; grid-row:span 1 !important; }
}

/* ---------- 6 · LIVE LOCATION TAG ---------- */
.cbd-loc{
  display:inline-flex; align-items:center; gap:.8rem;
  padding:.65rem 1.1rem; border-radius:999px;
  background:linear-gradient(160deg, rgba(201,169,97,.14), rgba(201,169,97,.05));
  border:1px solid rgba(201,169,97,.3);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  font-family:'Manrope',sans-serif;
}
.cbd-loc-pulse{ position:relative; width:8px; height:8px; flex:0 0 auto; }
.cbd-loc-pulse span{ position:absolute; inset:0; border-radius:50%; background:#3FB984; }
.cbd-loc-pulse span:first-child{ animation:cbdLocPing 1.6s cubic-bezier(0,0,.2,1) infinite; }
@keyframes cbdLocPing{ 75%,100%{ transform:scale(2.4); opacity:0; } }
.cbd-loc-text{ position:relative; height:1.15em; overflow:hidden; min-width:170px; }
.cbd-loc-text b, .cbd-loc-text time{
  display:block; font-size:.92rem; font-weight:600; color: var(--cherry, #7A0712);
  transition:transform .5s cubic-bezier(.16,1,.3,1), opacity .5s cubic-bezier(.16,1,.3,1);
}
.cbd-loc-text time{ position:absolute; left:0; top:0; transform:translateY(110%); opacity:0;
  font-variant-numeric:tabular-nums; color:var(--gold-dark,#9A7B36); }
.cbd-loc:hover .cbd-loc-text b{ transform:translateY(-110%); opacity:0; }
.cbd-loc:hover .cbd-loc-text time{ transform:translateY(0); opacity:1; }
@media (prefers-reduced-motion:reduce){ .cbd-loc-pulse span:first-child{ animation:none; } }

/* ---------- 7 · APPLE GLASS SECTION NAV RAIL ---------- */
#cbd-navrail{
  position:fixed; top:50%; right:clamp(.5rem,1vw,1rem);
  transform:translateY(-50%) translateX(24px); z-index:55;
  display:flex; flex-direction:column; gap:1px; padding:.55rem .4rem; border-radius:999px;
  background:linear-gradient(160deg, rgba(123, 2, 29,.42), rgba(123, 2, 29,.20));
  -webkit-backdrop-filter:blur(20px) saturate(180%); backdrop-filter:blur(20px) saturate(180%);
  border:1px solid rgba(201,169,97,.28);
  box-shadow:0 8px 28px rgba(26,3,9,.22), inset 0 1px 0 rgba(229,208,152,.25);
  opacity:0; pointer-events:none;
  transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1);
}
#cbd-navrail.ready{ opacity:.55; pointer-events:auto; transform:translateY(-50%) translateX(0); }
#cbd-navrail.ready:hover, #cbd-navrail.is-awake{ opacity:1; }
.cbd-navrail-item{ position:relative; display:flex; align-items:center; justify-content:flex-end;
  height:22px; border:0; background:transparent; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.cbd-navrail-dot{ width:6px; height:6px; border-radius:50%; margin:0 5px; background:rgba(229,208,152,.4);
  transition:background .4s cubic-bezier(.16,1,.3,1), transform .4s cubic-bezier(.34,1.56,.64,1), box-shadow .4s; }
.cbd-navrail-label{ position:absolute; right:22px; white-space:nowrap;
  font-family:'Manrope',sans-serif; font-size:.62rem; font-weight:600; text-transform:uppercase; letter-spacing:.18em;
  color:var(--cream, #FCFBF9); background:linear-gradient(160deg, rgba(123, 2, 29,.96), rgba(92, 7, 16,.96));
  padding:.34rem .7rem; border-radius:999px;
  box-shadow:0 8px 20px rgba(26,3,9,.4); border:1px solid rgba(201,169,97,.3);
  opacity:0; transform:translateX(10px) scale(.9); transform-origin:right center;
  transition:opacity .35s cubic-bezier(.16,1,.3,1), transform .35s cubic-bezier(.34,1.56,.64,1); pointer-events:none; }
.cbd-navrail-item:hover .cbd-navrail-dot{ background:var(--gold-light,#ECD7A4); transform:scale(1.4); }
.cbd-navrail-item:hover .cbd-navrail-label{ opacity:1; transform:translateX(0) scale(1); }
.cbd-navrail-item.active .cbd-navrail-dot{ background:var(--gold,#C9A24E); transform:scale(1.6);
  box-shadow:0 0 0 3px rgba(201,169,97,.2), 0 0 12px rgba(229,208,152,.6); }
.cbd-navrail-item.active .cbd-navrail-label{ opacity:1; transform:translateX(0) scale(1); color:var(--gold-light,#ECD7A4); }
#cbd-navrail-thread{ position:absolute; left:50%; top:.7rem; bottom:.7rem; width:1.5px; transform:translateX(-50%);
  background:rgba(229,208,152,.16); border-radius:2px; overflow:hidden; }
#cbd-navrail-thread span{ position:absolute; left:0; top:0; width:100%; height:0%;
  background:linear-gradient(180deg,var(--gold-light,#ECD7A4),var(--gold,#C9A24E)); }
@media (max-width:1023px){ #cbd-navrail{ display:none; } }
@media (prefers-reduced-motion:reduce){ #cbd-navrail{ transition:opacity .3s; transform:translateY(-50%); } }

/* ---------- 8 · gold click ripple ---------- */
.cbd-ripple{ position:fixed; left:0; top:0; width:14px; height:14px; border-radius:50%;
  background:radial-gradient(circle, rgba(229,208,152,.55), rgba(201,169,97,0) 70%);
  transform:translate(-50%,-50%) scale(0); pointer-events:none; z-index:99999; mix-blend-mode:screen; }
@media (prefers-reduced-motion:reduce){ .cbd-ripple{ display:none; } }

/* ---------- 9 · edición natural y elegante de fotos ---------- */
main img, section img{ filter:saturate(1.03) contrast(1.01); }

/* ============================================================
   10 · FLOW ART · stacked rotating panels (story-scroll.tsx)
   Each panel pins, the next rotates in from 30° (bottom-left).
   Self-contained: one pin context, pinSpacing handled in JS.
   ============================================================ */
.cbd-flowart{ position:relative; width:100%; overflow:hidden; content-visibility:visible !important; }
.cbd-flowart .cbd-fa-section{ content-visibility:visible !important; }
.cbd-fa-section{
  position:relative; min-height:100vh; width:100%; overflow:hidden;
}
.cbd-fa-inner{
  position:relative; min-height:100vh; width:100%;
  display:flex; flex-direction:column; justify-content:space-between;
  gap:clamp(1rem,3vw,1.6rem);
  padding:clamp(2rem,7vw,4.5rem) clamp(1.5rem,5vw,5vw) clamp(2rem,5vw,4vw);
  transform-origin:bottom left; will-change:transform;
}
.cbd-fa-kicker{
  font-family:'Manrope',sans-serif; font-size:.72rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.3em; margin:0;
}
.cbd-fa-rule{ border:none; border-top:1px solid; width:100%; margin:clamp(.6rem,2vw,1.4rem) 0; opacity:1; }
.cbd-fa-h{
  font-family:'Italiana',serif; font-weight:400;
  font-size:clamp(3rem,11vw,11rem); line-height:.86; letter-spacing:-.01em; margin:0;
  text-transform:none;
}
.cbd-fa-lede{
  font-family:'Cormorant Garamond',serif; font-style:italic;
  font-size:clamp(1.1rem,2.6vw,2rem); line-height:1.45; max-width:52ch; margin:0;
}
.cbd-fa-lede.cbd-fa-right{ margin-left:auto; text-align:right; }
.cbd-fa-grid{
  display:flex; flex-wrap:wrap; gap:clamp(1.5rem,4vw,3.5rem);
}
.cbd-fa-col{ min-width:180px; flex:1; }
.cbd-fa-col-t{
  font-family:'Manrope',sans-serif; font-size:clamp(.95rem,1.4vw,1.15rem); font-weight:700;
  text-transform:uppercase; letter-spacing:.08em; margin:0 0 .55rem;
}
.cbd-fa-col-d{
  font-family:'Cormorant Garamond',serif; font-size:clamp(1rem,1.5vw,1.25rem);
  line-height:1.5; opacity:.85; margin:0;
}
.cbd-fa-cta{
  display:inline-block; margin-left:.6rem; white-space:nowrap;
  font-family:'Manrope',sans-serif; font-style:normal; font-weight:600; font-size:.95rem;
  color: var(--cherry); background:var(--gold-light); text-decoration:none;
  padding:.7rem 1.4rem; border-radius:999px; transition:transform .3s cubic-bezier(.34,1.56,.64,1);
}
.cbd-fa-cta:hover{ transform:translateY(-2px); }

/* On small screens / reduced motion: plain vertical stack (no rotation, no pin) */
@media (max-width:1023px){
  .cbd-fa-section{ min-height:auto; }
  .cbd-fa-inner{ min-height:auto; transform:none !important; }
  .cbd-fa-h{ font-size:clamp(2.6rem,13vw,5rem); }
}
@media (prefers-reduced-motion:reduce){
  .cbd-fa-inner{ transform:none !important; }
}

/* ============================================================
   11 · RADIAL ORBITAL TIMELINE (radial-orbital-timeline.tsx)
   Vanilla port · wine/gold/cream palette · service journey.
   ============================================================ */
#cbd-orbital, .cbd-orbital-section{ content-visibility:visible !important; }
.cbd-orbital-section{
  position:relative; background:var(--wine-deep,#4E0610); color:var(--cream, #FCFBF9);
  overflow:hidden; padding:clamp(3.5rem,7vw,6rem) 0 clamp(4rem,8vw,7rem);
}
.cbd-orbital-head{ text-align:center; max-width:760px; margin:0 auto clamp(1rem,3vw,2rem); padding:0 1.25rem; }
.cbd-orbital-eyebrow{
  font-family:'Manrope',sans-serif; font-size:.72rem; text-transform:uppercase;
  letter-spacing:.34em; color:var(--gold-light,#ECD7A4); display:inline-block; margin-bottom:1rem;
}
.cbd-orbital-title{
  font-family:'Italiana',serif; font-weight:400; line-height:1.04;
  font-size:clamp(2.2rem,5vw,4rem); margin:0 0 1rem;
}
.cbd-orbital-sub{
  font-family:'Cormorant Garamond',serif; font-style:italic;
  font-size:clamp(1.05rem,2vw,1.4rem); color:rgba(251,248,243,.7); margin:0;
}

/* stage — fixed square arena, centered */
.cbd-orbital{ position:relative; width:100%; display:flex; justify-content:center; }
.cbd-orbital-stage{
  position:relative; width:min(92vw,560px); height:min(92vw,560px);
  margin:0 auto; perspective:1000px;
}
/* central core */
.cbd-orbital-core{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:64px; height:64px; border-radius:50%; z-index:10;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 35% 30%, var(--gold-light,#ECD7A4), var(--gold,#C9A24E) 45%, var(--gold-dark,#9A7B36));
  box-shadow:0 0 30px rgba(201,169,97,.6), 0 0 60px rgba(201,169,97,.3);
  animation:cbdOrbCorePulse 3s ease-in-out infinite;
}
@keyframes cbdOrbCorePulse{ 0%,100%{ box-shadow:0 0 30px rgba(201,169,97,.55),0 0 60px rgba(201,169,97,.25);} 50%{ box-shadow:0 0 42px rgba(201,169,97,.8),0 0 80px rgba(201,169,97,.4);} }
.cbd-orbital-core-dot{ width:26px; height:26px; border-radius:50%; background:rgba(251,248,243,.92); }
.cbd-orbital-core-ring{ position:absolute; border-radius:50%; border:1px solid rgba(229,208,152,.5); }
.cbd-orbital-core-ring.r1{ width:84px; height:84px; animation:cbdOrbPing 2.4s cubic-bezier(0,0,.2,1) infinite; }
.cbd-orbital-core-ring.r2{ width:104px; height:104px; animation:cbdOrbPing 2.4s cubic-bezier(0,0,.2,1) .6s infinite; }
@keyframes cbdOrbPing{ 75%,100%{ transform:scale(1.7); opacity:0; } }
/* guide ring */
.cbd-orbital-ring{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:400px; height:400px; max-width:80%; max-height:80%;
  border-radius:50%; border:1px solid rgba(229,208,152,.16);
}
/* nodes */
.cbd-orb-node{
  position:absolute; left:50%; top:50%; cursor:pointer;
  transition:opacity .5s ease, transform .7s cubic-bezier(.16,1,.3,1);
  will-change:transform;
}
.cbd-orb-node-glow{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(201,169,97,.3) 0%, rgba(201,169,97,0) 70%);
}
.cbd-orb-node-btn{
  position:relative; width:42px; height:42px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; border:2px solid rgba(229,208,152,.4);
  background:var(--wine-mid,#6E0518); color:var(--gold-light,#ECD7A4);
  transition:all .3s ease; transform:translate(-50%,-50%);
}
.cbd-orb-node.is-related .cbd-orb-node-btn{ background:rgba(201,169,97,.45); color: var(--cherry, #7A0712); border-color:var(--gold-light); }
.cbd-orb-node.is-active .cbd-orb-node-btn{
  background:var(--gold-light,#ECD7A4); color: var(--cherry, #7A0712);
  border-color:var(--cream, #FCFBF9); box-shadow:0 0 22px rgba(229,208,152,.7);
  transform:translate(-50%,-50%) scale(1.4);
}
.cbd-orb-node-btn svg{ width:18px; height:18px; }
.cbd-orb-node-label{
  position:absolute; left:50%; top:30px; transform:translateX(-50%);
  white-space:nowrap; font-family:'Manrope',sans-serif; font-size:.7rem; font-weight:600;
  letter-spacing:.08em; color:rgba(251,248,243,.72); transition:all .3s ease; pointer-events:none;
}
.cbd-orb-node.is-active .cbd-orb-node-label{ color:var(--cream); transform:translateX(-50%) scale(1.15); }
/* expanded card */
.cbd-orb-card{
  position:absolute; left:50%; top:54px; transform:translateX(-50%);
  width:248px; border-radius:14px; z-index:60; text-align:left;
  background:rgba(92,7,16,.94); border:1px solid rgba(229,208,152,.3);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  box-shadow:0 20px 50px rgba(0,0,0,.5); padding:1rem 1.1rem 1.2rem;
  animation:cbdOrbCardIn .35s cubic-bezier(.16,1,.3,1);
}
@keyframes cbdOrbCardIn{ from{ opacity:0; transform:translateX(-50%) translateY(-8px); } to{ opacity:1; transform:translateX(-50%) translateY(0); } }
.cbd-orb-card-tick{ position:absolute; left:50%; top:-12px; transform:translateX(-50%); width:1px; height:12px; background:rgba(229,208,152,.5); }
.cbd-orb-card-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:.5rem; }
.cbd-orb-badge{
  font-family:'Manrope',sans-serif; font-size:.58rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; padding:.2rem .5rem; border-radius:999px;
  border:1px solid var(--gold-light); color: var(--cherry); background:var(--gold-light);
}
.cbd-orb-badge.pending{ background:transparent; color:var(--gold-light); }
.cbd-orb-step{ font-family:'Manrope',sans-serif; font-size:.62rem; color:rgba(251,248,243,.5); }
.cbd-orb-card-title{ font-family:'Italiana',serif; font-size:1.05rem; color:var(--cream); margin:.1rem 0 .5rem; }
.cbd-orb-card-body{ font-family:'Cormorant Garamond',serif; font-size:1rem; line-height:1.5; color:rgba(251,248,243,.82); margin:0; }
.cbd-orb-card-meter{ margin-top:.8rem; padding-top:.7rem; border-top:1px solid rgba(229,208,152,.18); }
.cbd-orb-card-meter-row{ display:flex; justify-content:space-between; font-family:'Manrope',sans-serif; font-size:.6rem; color:rgba(251,248,243,.6); margin-bottom:.35rem; text-transform:uppercase; letter-spacing:.08em; }
.cbd-orb-card-bar{ width:100%; height:3px; background:rgba(251,248,243,.12); border-radius:3px; overflow:hidden; }
.cbd-orb-card-bar span{ display:block; height:100%; background:linear-gradient(90deg,var(--gold),var(--gold-light)); }
.cbd-orb-hint{ text-align:center; font-family:'Manrope',sans-serif; font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:rgba(229,208,152,.5); margin-top:2rem; }

@media (max-width:600px){
  .cbd-orbital-stage{ width:94vw; height:94vw; }
  .cbd-orb-card{ width:210px; }
}
@media (prefers-reduced-motion:reduce){
  .cbd-orbital-core,.cbd-orbital-core-ring{ animation:none !important; }
}

/* ============================================================
   12 · SHOWCASE CINEMÁTICO (cinematic-landing-hero, SHORT pin)
   Physical premium card + cursor sheen + progress ring + badges.
   Wine/gold/cream. Pin handled in JS (short, self-contained).
   ============================================================ */
#showcase{ content-visibility:visible !important; }
.cbd-show{
  position:relative; width:100%; height:100vh; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  background:var(--wine-deep,#4E0610); color:var(--cream, #FCFBF9);
  perspective:1500px;
}
.cbd-show-grain{
  position:absolute; inset:0; z-index:50; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  background:url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
.cbd-show-grid{
  position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-size:60px 60px;
  background-image:
    linear-gradient(to right, rgba(229,208,152,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(229,208,152,.05) 1px, transparent 1px);
  -webkit-mask-image:radial-gradient(ellipse at center, black 0%, transparent 70%);
  mask-image:radial-gradient(ellipse at center, black 0%, transparent 70%);
}
/* hero text behind card */
.cbd-show-hero{
  position:absolute; z-index:10; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; padding:0 1rem;
  will-change:transform,opacity;
}
.cbd-show-h1{
  font-family:'Italiana',serif; font-weight:400; line-height:.95; margin:0;
  font-size:clamp(2.4rem,8vw,6rem); letter-spacing:-.01em;
}
.cbd-show-line1{ color:var(--cream); text-shadow:0 10px 30px rgba(0,0,0,.4); }
/* physical card */
.cbd-show-cardwrap{
  position:absolute; inset:0; z-index:20; display:flex; align-items:center; justify-content:center;
  pointer-events:none;
}
.cbd-show-card{
  position:relative; overflow:hidden; pointer-events:auto;
  width:92vw; height:88vh; max-width:1200px; border-radius:32px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(145deg, var(--wine-mid,#6E0518) 0%, var(--wine-deep,#4E0610) 100%);
  box-shadow:
    0 40px 100px -25px rgba(74,10,10,.55), 0 20px 40px -20px rgba(74,10,10,.4),
    inset 0 1px 2px rgba(236,218,166,.3), inset 0 -2px 4px rgba(74,10,10,.45);
  border:1px solid rgba(201,169,97,.12);
  will-change:width,height,border-radius,transform;
}
.cbd-show-sheen{
  position:absolute; inset:0; z-index:5; pointer-events:none; border-radius:inherit;
  background:radial-gradient(700px circle at var(--mx,50%) var(--my,50%), rgba(229,208,152,.12) 0%, transparent 42%);
  mix-blend-mode:screen;
}
.cbd-show-card-inner{
  position:relative; z-index:10; width:100%; max-width:1100px; margin:0 auto;
  padding:2rem clamp(1rem,4vw,3rem); display:flex; flex-direction:column;
  align-items:center; justify-content:space-evenly; gap:1.5rem; height:100%;
}
@media (min-width:1024px){
  .cbd-show-card-inner{ display:grid; grid-template-columns:1fr 1.1fr 1fr; align-items:center; gap:2rem; }
}
.cbd-show-left{ order:3; text-align:center; }
.cbd-show-right{ order:1; display:flex; justify-content:center; }
.cbd-show-center{ order:2; position:relative; display:flex; flex-direction:column; align-items:center; gap:1.4rem; }
@media (min-width:1024px){
  .cbd-show-left{ order:1; text-align:left; } .cbd-show-center{ order:2; } .cbd-show-right{ order:3; justify-content:flex-end; }
}
.cbd-show-left-h{ font-family:'Italiana',serif; font-size:clamp(1.5rem,3vw,2.2rem); color:var(--cream); margin:0 0 .8rem; }
.cbd-show-left-p{ font-family:'Cormorant Garamond',serif; font-size:clamp(1rem,1.5vw,1.2rem); line-height:1.55; color:rgba(251,248,243,.72); margin:0; max-width:38ch; }
.cbd-show-brand{
  font-family:'Italiana',serif; font-weight:400; font-size:clamp(4rem,11vw,9rem); line-height:.85;
  letter-spacing:-.02em; margin:0; color:transparent;
  background:linear-gradient(180deg,#FFF,var(--gold-light,#ECD7A4)); -webkit-background-clip:text; background-clip:text;
  filter:drop-shadow(0 12px 24px rgba(0,0,0,.6));
}
/* progress ring */
.cbd-show-ring-wrap{ position:relative; width:176px; height:176px; display:flex; align-items:center; justify-content:center;
  filter:drop-shadow(0 15px 25px rgba(0,0,0,.6)); }
.cbd-show-ring-svg{ position:absolute; inset:0; width:100%; height:100%; }
.cbd-show-ring{ stroke-dasharray:402; stroke-dashoffset:402; stroke-linecap:round; transform:rotate(-90deg); transform-origin:center; }
.cbd-show-ring-center{ display:flex; flex-direction:column; align-items:center; text-align:center; }
.cbd-show-counter{ font-family:'Italiana',serif; font-size:2.6rem; line-height:1; color:var(--cream); }
.cbd-show-counter::before{ content:"+"; font-size:1.4rem; vertical-align:super; color:var(--gold-light); }
.cbd-show-counter-label{ font-family:'Manrope',sans-serif; font-size:.6rem; text-transform:uppercase; letter-spacing:.18em; color:rgba(229,208,152,.7); margin-top:.3rem; }
.cbd-show-widgets{ display:flex; flex-direction:column; gap:.6rem; width:min(86vw,300px); }
.cbd-show-widget{
  display:flex; align-items:center; gap:.7rem; padding:.7rem .9rem; border-radius:14px;
  font-family:'Manrope',sans-serif; font-size:.82rem; color:rgba(251,248,243,.85);
  background:linear-gradient(180deg, rgba(229,208,152,.06), rgba(229,208,152,.01));
  border:1px solid rgba(201,169,97,.12); box-shadow:inset 0 1px 1px rgba(229,208,152,.08), 0 10px 20px rgba(0,0,0,.3);
}
.cbd-show-widget-ico{ width:24px; height:24px; flex:0 0 auto; border-radius:7px; display:flex; align-items:center; justify-content:center;
  background:rgba(201,169,97,.18); color:var(--gold-light); font-size:.8rem; }
/* floating badges */
.cbd-show-badge{
  position:absolute; z-index:30; display:flex; align-items:center; gap:.7rem;
  padding:.7rem .9rem; border-radius:16px;
  background:linear-gradient(135deg, rgba(229,208,152,.1), rgba(229,208,152,.02));
  -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);
  box-shadow:0 0 0 1px rgba(236,218,166,.14), 0 25px 50px -15px rgba(74,10,10,.5), inset 0 1px 1px rgba(236,218,166,.2);
}
.cbd-show-badge-tl{ top:-6px; left:-12px; }
.cbd-show-badge-br{ bottom:6px; right:-12px; }
@media (min-width:1024px){ .cbd-show-badge-tl{ top:10px; left:-70px; } .cbd-show-badge-br{ bottom:30px; right:-70px; } }
.cbd-show-badge-ico{ width:34px; height:34px; flex:0 0 auto; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:rgba(201,169,97,.2); border:1px solid rgba(229,208,152,.3); color:var(--gold-light); font-size:1rem; }
.cbd-show-badge-t{ font-family:'Manrope',sans-serif; font-size:.78rem; font-weight:700; color:var(--cream); margin:0; }
.cbd-show-badge-s{ font-family:'Manrope',sans-serif; font-size:.66rem; color:rgba(229,208,152,.6); margin:0; }
/* CTA layer */
.cbd-show-cta{
  position:absolute; z-index:15; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; padding:0 1.25rem;
  opacity:0; pointer-events:none; will-change:transform,opacity;
}
.cbd-show-cta.is-on{ pointer-events:auto; }
.cbd-show-cta-h{ font-family:'Italiana',serif; font-weight:400; font-size:clamp(2rem,6vw,4.5rem); line-height:1.04; margin:0 0 1rem; }
.cbd-show-cta-p{ font-family:'Cormorant Garamond',serif; font-style:italic; font-size:clamp(1.1rem,2vw,1.5rem); color:rgba(251,248,243,.75); margin:0 0 2rem; max-width:46ch; }
.cbd-show-cta-btn{
  display:inline-block; font-family:'Manrope',sans-serif; font-weight:600; font-size:.95rem;
  text-transform:uppercase; letter-spacing:.14em; color: var(--cherry); background:var(--gold-light);
  padding:1.1rem 2.4rem; border-radius:999px; text-decoration:none;
  box-shadow:0 0 0 1px rgba(201,169,97,.4), 0 20px 40px -10px rgba(0,0,0,.6), inset 0 1px 1px rgba(255,255,255,.4);
  transition:transform .3s cubic-bezier(.34,1.56,.64,1);
}
.cbd-show-cta-btn:hover{ transform:translateY(-3px); }

/* mobile / reduced-motion: static stacked card, no pin */
@media (max-width:1023px){
  .cbd-show{ height:auto; padding:var(--space-2xl,5rem) 0; display:block; }
  .cbd-show-hero{ position:relative; inset:auto; margin-bottom:2rem; }
  .cbd-show-cardwrap{ position:relative; inset:auto; }
  .cbd-show-card{ width:92vw; height:auto; padding:2rem 0; }
  .cbd-show-cta{ position:relative; inset:auto; opacity:1 !important; pointer-events:auto; margin-top:2.5rem; }
}
@media (prefers-reduced-motion:reduce){
  .cbd-show-ring{ stroke-dashoffset:60; }
}

/* ============================================================
   13 · LIQUID GLASS (Apple iOS-style, palette-adapted)
   Applied to primary CTAs via .cbd-glass. Layered glass with
   SVG distortion + gold inner highlights. Graceful no-filter
   fallback for browsers without SVG filter support.
   ============================================================ */
.cbd-glass{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  overflow:hidden; isolation:isolate; cursor:pointer;
  border-radius:999px; color:var(--cream, #FCFBF9); font-weight:600;
  box-shadow:0 6px 6px rgba(26,3,9,.2), 0 0 20px rgba(26,3,9,.12);
  transition:transform .7s cubic-bezier(.175,.885,.32,2.2), box-shadow .5s ease, padding .5s cubic-bezier(.175,.885,.32,2.2);
}
/* distortion layer */
.cbd-glass-layer{ position:absolute; inset:0; z-index:0; overflow:hidden; border-radius:inherit;
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  filter:url(#cbd-glass-distortion); isolation:isolate; }
/* tint layer (gold-warm instead of plain white) */
.cbd-glass-tint{ position:absolute; inset:0; z-index:1; border-radius:inherit;
  background:linear-gradient(135deg, rgba(201,169,97,.28), rgba(124,26,44,.20)); }
/* highlight bevel */
.cbd-glass-bevel{ position:absolute; inset:0; z-index:2; border-radius:inherit;
  box-shadow:inset 2px 2px 1px 0 rgba(229,208,152,.5), inset -1px -1px 1px 1px rgba(229,208,152,.4); }
/* content */
.cbd-glass-content{ position:relative; z-index:3; display:inline-flex; align-items:center; gap:.7rem;
  padding:1.05rem 2.2rem; font-family:'Manrope',sans-serif; letter-spacing:.04em;
  text-transform:uppercase; font-size:.9rem; transition:transform .7s cubic-bezier(.175,.885,.32,2.2); }
.cbd-glass:hover{ transform:translateY(-3px); box-shadow:0 12px 28px rgba(26,3,9,.3), 0 0 30px rgba(201,169,97,.25); }
.cbd-glass:hover .cbd-glass-content{ transform:scale(1.03); }
.cbd-glass:active{ transform:translateY(0) scale(.97); }
/* no-SVG-filter fallback */
@supports not (filter: url(#cbd-glass-distortion)){
  .cbd-glass-layer{ filter:none; background:rgba(201,169,97,.12); }
}
@media (prefers-reduced-motion:reduce){
  .cbd-glass, .cbd-glass-content{ transition:none; }
}

/* ============================================================
   14 · VERTICAL TEXT MARQUEE (text-marquee.tsx, palette-adapted)
   Editorial rotating word strip for brand values.
   ============================================================ */
.cbd-vmarquee{
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  padding:clamp(2.5rem,6vw,4.5rem) 1.25rem;
  background:var(--wine-deep,#4E0610); color:var(--cream, #FCFBF9);
  font-family:'Italiana',serif; flex-wrap:wrap; text-align:center;
}
.cbd-vmarquee-prefix{
  font-size:clamp(1.4rem,4vw,2.6rem); color:rgba(251,248,243,.7); white-space:nowrap;
}
.cbd-vmarquee-mask{
  position:relative; overflow:hidden; height:clamp(2.4rem,6vw,4rem); width:auto;
  -webkit-mask-image:linear-gradient(rgba(0,0,0,0) 0%, #000 43%, rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(rgba(0,0,0,0) 0%, #000 43%, rgba(0,0,0,0) 100%);
}
.cbd-vmarquee-track{ position:relative; height:100%; }
.cbd-vmarquee-item{
  height:clamp(2.4rem,6vw,4rem); display:flex; align-items:center; justify-content:center;
  font-size:clamp(1.6rem,5vw,3.4rem); color:var(--gold-light,#ECD7A4); white-space:nowrap;
  font-style:italic; font-family:'Cormorant Garamond',serif;
}
@keyframes cbdVSlide{ to{ transform:translateY(var(--vdest)); } }
@media (prefers-reduced-motion:reduce){
  .cbd-vmarquee-item{ animation:none !important; }
}

/* ============================================================
   15 · LUXURY POLISH PASS (vivid wine, premium micro-details)
   ============================================================ */
/* richer ambient glow behind dark sections */
.cbd-show::before, #cbd-orbital.cbd-orbital-section::before{
  content:""; position:absolute; left:50%; top:40%; transform:translate(-50%,-50%);
  width:70vw; height:70vw; max-width:900px; max-height:900px; z-index:0; pointer-events:none;
  background:radial-gradient(circle, rgba(196,52,89,.18) 0%, rgba(154,31,66,.08) 40%, transparent 70%);
  filter:blur(40px);
}
/* floating animation for showcase badges (gentle life) */
.cbd-show-badge{ animation:cbdFloat 6s ease-in-out infinite; }
.cbd-show-badge-br{ animation-delay:-3s; }
@keyframes cbdFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } }
@media (prefers-reduced-motion:reduce){ .cbd-show-badge{ animation:none; } }

/* premium gold underline sweep on section headlines (editorial) */
.headline-section{ position:relative; }

/* luxury floating beauty membership card (vistoso mockup) */
.cbd-vipcard{
  position:relative; width:min(86vw,340px); aspect-ratio:1.6/1; border-radius:20px;
  background:
    linear-gradient(135deg, rgba(229,208,152,.16), rgba(154,31,66,.4) 60%, rgba(123, 2, 29,.9)),
    var(--wine-mid,#6E0518);
  border:1px solid rgba(201,169,97,.4);
  box-shadow:0 30px 70px -15px rgba(0,0,0,.6), inset 0 1px 1px rgba(229,208,152,.3);
  overflow:hidden; transform-style:preserve-3d;
}
.cbd-vipcard::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(110deg, transparent 30%, rgba(229,208,152,.18) 50%, transparent 70%);
  animation:cbdCardShine 5s ease-in-out infinite;
}
@keyframes cbdCardShine{ 0%,100%{ transform:translateX(-60%); } 50%{ transform:translateX(60%); } }
.cbd-vipcard-inner{ position:relative; z-index:2; height:100%; padding:1.4rem 1.6rem; display:flex; flex-direction:column; justify-content:space-between; }
.cbd-vipcard-top{ display:flex; justify-content:space-between; align-items:flex-start; }
.cbd-vipcard-brand{ font-family:'Italiana',serif; font-size:1.1rem; color:var(--cream); letter-spacing:.04em; }
.cbd-vipcard-chip{ width:38px; height:28px; border-radius:6px; background:linear-gradient(135deg,var(--gold-light),var(--gold-dark)); box-shadow:inset 0 1px 1px rgba(255,255,255,.4); }
.cbd-vipcard-label{ font-family:'Manrope',sans-serif; font-size:.6rem; text-transform:uppercase; letter-spacing:.3em; color:var(--gold-light); }
.cbd-vipcard-name{ font-family:'Cormorant Garamond',serif; font-style:italic; font-size:1.3rem; color:var(--cream); }
@media (prefers-reduced-motion:reduce){ .cbd-vipcard::before{ animation:none; } }

/* heart favorite on gallery tiles */
.cbd-heart{
  position:absolute; top:12px; right:12px; z-index:20;
  width:38px; height:38px; border-radius:50%; border:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  background:rgba(123, 2, 29,.5); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border:1px solid rgba(229,208,152,.3); transition:transform .3s cubic-bezier(.34,1.56,.64,1), background .3s;
  -webkit-tap-highlight-color:transparent; opacity:0;
}
.cbd-spot:hover .cbd-heart, .cbd-heart.is-liked{ opacity:1; }
.cbd-heart:active{ transform:scale(.86); }
.cbd-heart svg{ width:18px; height:18px; stroke:var(--gold-light); fill:none; transition:fill .3s, stroke .3s, transform .3s; }
.cbd-heart.is-liked{ background:rgba(196,52,89,.35); }
.cbd-heart.is-liked svg{ fill:var(--wine-soft); stroke:var(--wine-soft); animation:cbdHeartPop .4s ease; }
@keyframes cbdHeartPop{ 0%{ transform:scale(1); } 40%{ transform:scale(1.35); } 100%{ transform:scale(1); } }

/* ============================================================
   16 · MOBILE PARITY FIX — full experience on phones
   Problem: reveals + pinned sections were desktop-only, leaving
   mobile with flat/invisible content. This restores everything.
   ============================================================ */
@media (max-width:1023px){

  /* 16.1 — SAFETY NET: never leave reveal content invisible on mobile.
     If JS reveal hasn't fired (fast scroll / content-visibility), the
     content still shows. Animations still play when JS adds the class. */
  [data-reveal]{ opacity:1 !important; }
  [data-reveal]:not(.is-visible){ transform:none !important; filter:none !important; }

  /* keep a gentle entrance that always completes */
  .cbd-anim{ opacity:1 !important; transform:none !important; }

  /* 16.2 — ensure services images always render on mobile */
  .srv-x-ext-media{ content-visibility:visible !important; }
  .srv-x-ext-media img,
  #servicios img, #galeria img, #cbd-zoom img{
    opacity:1 !important; visibility:visible !important; display:block !important;
  }

  /* 16.3 — relax content-visibility intrinsic size so images paint in time */
  section:not(#hero):not(#metrics){ contain-intrinsic-size:auto 1200px; }

  /* 16.4 — FlowArt (Firma) gets real motion on mobile via reveal, not pin.
     Each panel inner animates up as it enters (handled in JS section 14). */
  .cbd-fa-inner[data-fa-m]{ opacity:0; transform:translateY(40px);
    transition:opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1); }
  .cbd-fa-inner[data-fa-m].is-in{ opacity:1; transform:none; }

  /* 16.5 — Showcase: animate card + badges in on mobile (no pin) */
  .cbd-show-card[data-show-m]{ opacity:0; transform:translateY(50px) scale(.96);
    transition:opacity 1s cubic-bezier(.16,1,.3,1), transform 1s cubic-bezier(.16,1,.3,1); }
  .cbd-show-card[data-show-m].is-in{ opacity:1; transform:none; }
  .cbd-show-badge{ position:relative !important; inset:auto !important; margin:.4rem auto; }
  .cbd-show-hero{ opacity:1 !important; transform:none !important; filter:none !important; }

  /* 16.6 — gallery zoom images get a soft scale-in on mobile */
  #cbd-zoom .cbd-zoom-cell img{ transform:scale(1.06); transition:transform 1.2s cubic-bezier(.16,1,.3,1); }
  #cbd-zoom .cbd-zoom-cell.is-in img{ transform:scale(1); }

  /* 16.7 — keep tilt/spotlight visuals visible (they're hover-only on desktop,
     so on mobile we show a permanent soft gold edge instead) */
  .cbd-spot::before{ opacity:.5 !important; }

  /* 16.8 — heart favorite always visible on mobile (no hover) */
  .cbd-heart{ opacity:.85 !important; }
}

/* very small phones: tighten the showcase + flowart type */
@media (max-width:600px){
  .cbd-fa-h{ font-size:clamp(2.2rem,11vw,3.4rem); }
  .cbd-show-card{ padding:1.5rem 0; }
  .cbd-vipcard{ width:min(82vw,300px); }
}