/* ============================================================
   CRISTINA BEAUTY DESIGNER · LUXURY REFINE LAYER
   "De Toyota a Ferrari" — editorial cinematic refinement pass.
   Loads LAST → highest cascade priority. Refactors, never destroys.
   Palette: --wine-deep --wine-mid --wine-bright --gold --gold-light --cream
   ============================================================ */

:root{
  /* — Refined cinematic motion system — */
  --lux-ease: cubic-bezier(0.16, 1, 0.3, 1);          /* expo-out luxury */
  --lux-ease-soft: cubic-bezier(0.33, 1, 0.68, 1);     /* gentle settle */
  --lux-ease-inout: cubic-bezier(0.65, 0, 0.35, 1);    /* cinematic both-ends */
  --lux-dur-reveal: 1.15s;
  --lux-dur-quiet: 1.4s;
  --lux-stagger: 0.09s;
}

/* ============================================================
   0 · GLOBAL REVEAL PRIMITIVE — quiet luxury fade+lift
   Used by all refined sections. JS adds .is-in.
   ============================================================ */
[data-lux-fade]{
  opacity:0;
  transform:translate3d(0, 26px, 0);
  transition:opacity var(--lux-dur-reveal) var(--lux-ease),
             transform var(--lux-dur-reveal) var(--lux-ease);
  will-change:opacity, transform;
}
[data-lux-fade].is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  [data-lux-fade]{ opacity:1 !important; transform:none !important; transition:none; }
}

/* ============================================================
   ITEMS 1–5 · FLOWART → QUIET LUXURY EDITORIAL
   Remove the aggressive 30° rotation + pin. Replace with a calm,
   stable, breathable editorial stack with refined fade reveals.
   We override .cbd-fa* here (loaded last) and neutralize the JS
   transforms via .lux-quiet flag set by JS.
   ============================================================ */

/* Neutralize pin-induced stage: panels become a clean vertical rhythm */
.cbd-flowart{ overflow:visible; }

.cbd-flowart.lux-quiet .cbd-fa-section{
  min-height:auto;                    /* kill 100vh forced stage */
  overflow:visible;
}
.cbd-flowart.lux-quiet .cbd-fa-inner{
  min-height:auto;
  transform:none !important;          /* kill rotation entirely */
  rotate:none !important;
  padding:clamp(3.5rem,8vw,7rem) clamp(1.5rem,6vw,6rem);
  gap:clamp(1.5rem,3vw,2.4rem);
  /* refined entrance — opacity + tiny lift, almost imperceptible */
  opacity:0;
  transform:translate3d(0,32px,0) !important;
  transition:opacity var(--lux-dur-quiet) var(--lux-ease),
             transform var(--lux-dur-quiet) var(--lux-ease);
  will-change:opacity, transform;
}
.cbd-flowart.lux-quiet .cbd-fa-inner.is-in{
  opacity:1;
  transform:none !important;
}

/* Editorial polish on the panels (typography rhythm, softer rules) */
.cbd-flowart.lux-quiet .cbd-fa-kicker{
  font-size:.7rem; letter-spacing:.34em; opacity:.9;
}
.cbd-flowart.lux-quiet .cbd-fa-rule{
  margin:clamp(1rem,2.4vw,1.8rem) 0; opacity:.55;
}
.cbd-flowart.lux-quiet .cbd-fa-h{
  font-size:clamp(2.8rem,9vw,8.5rem);
  line-height:.9; letter-spacing:-.015em;
}
.cbd-flowart.lux-quiet .cbd-fa-lede{
  font-size:clamp(1.1rem,2.3vw,1.85rem); line-height:1.5; opacity:.92;
}
.cbd-flowart.lux-quiet .cbd-fa-col-d{ line-height:1.55; opacity:.82; }

/* Staggered fade for the inner columns (refined, sutil) */
.cbd-flowart.lux-quiet .cbd-fa-col{
  opacity:0; transform:translate3d(0,18px,0);
  transition:opacity 1s var(--lux-ease), transform 1s var(--lux-ease);
}
.cbd-flowart.lux-quiet .cbd-fa-inner.is-in .cbd-fa-col{ opacity:1; transform:none; }
.cbd-flowart.lux-quiet .cbd-fa-inner.is-in .cbd-fa-col:nth-child(1){ transition-delay:.12s; }
.cbd-flowart.lux-quiet .cbd-fa-inner.is-in .cbd-fa-col:nth-child(2){ transition-delay:.22s; }
.cbd-flowart.lux-quiet .cbd-fa-inner.is-in .cbd-fa-col:nth-child(3){ transition-delay:.32s; }

@media (prefers-reduced-motion:reduce){
  .cbd-flowart.lux-quiet .cbd-fa-inner,
  .cbd-flowart.lux-quiet .cbd-fa-col{
    opacity:1 !important; transform:none !important; transition:none;
  }
}

/* ============================================================
   ITEM 6 · SHOWCASE "Una firma que se nota" — PRESERVED, REFINED
   Keep essence. Only refine spacing, softness, depth, timing.
   ============================================================ */
.cbd-show-card{
  border-radius:36px;
  box-shadow:
    0 50px 120px -28px rgba(0,0,0,.92),
    0 24px 50px -24px rgba(0,0,0,.7),
    inset 0 1px 2px rgba(229,208,152,.28),
    inset 0 -2px 6px rgba(0,0,0,.78);
  border:1px solid rgba(201,169,97,.16);
}
.cbd-show-left-h{ letter-spacing:.005em; margin-bottom:1rem; }
.cbd-show-left-p{ line-height:1.62; opacity:.78; }

/* ---- FIX · ghost text behind the showcase ----
   premium.js fades the hero text only to autoAlpha:.15, leaving a
   faint "Diseñamos miradas…" visible in the card's side margins.
   The card sits at z-20 and the hero at z-10, so we simply make the
   card's wine background fully opaque (it already is) AND collapse the
   hero's residual visibility once it's behind the revealed card by
   keeping it strictly clipped to center + very low contrast residue. */
.cbd-show-hero{ z-index:8 !important; }
.cbd-show-cardwrap{ z-index:20 !important; }
/* a solid wine backdrop layer that rides just under the card so the
   faint hero text can never bleed past the card edges */
.cbd-show::after{
  content:""; position:absolute; inset:0; z-index:6; pointer-events:none;
  background:radial-gradient(120% 90% at 50% 50%, transparent 38%, var(--wine-deep) 72%);
  opacity:0; transition:opacity .6s var(--lux-ease);
}
.cbd-show.is-card-on::after{ opacity:1; }

/* ---- FIX · soften the seam between cinema (#firma) and showcase ----
   Both are wine-deep. A single tall melt at the showcase top blends
   any pin hand-off edge without darkening either side. */
.cbd-show{ position:relative; }
.cbd-show::before{
  content:""; position:absolute; top:-1px; left:0; right:0; height:200px; z-index:1;
  pointer-events:none;
  background:linear-gradient(180deg, var(--wine-deep) 0%, rgba(92,7,16,0) 100%);
}

.cbd-show-badge{
  border-radius:18px;
  box-shadow:0 0 0 1px rgba(229,208,152,.14),
             0 28px 56px -14px rgba(0,0,0,.82),
             inset 0 1px 1px rgba(229,208,152,.22);
}
/* softer, slower float for premium calm */
.cbd-show-badge{ animation-duration:7.5s; }
.cbd-show-ring-wrap{ filter:drop-shadow(0 18px 30px rgba(0,0,0,.55)); }
.cbd-show-counter{ letter-spacing:.01em; }

/* ============================================================
   GLOBAL · refined section reveal easing (existing .reveal system)
   Make the legacy reveals breathe with the luxury easing.
   ============================================================ */
.reveal{
  transition:opacity var(--lux-dur-reveal) var(--lux-ease),
             transform var(--lux-dur-reveal) var(--lux-ease) !important;
}

/* ============================================================
   ITEM 7 · GIANT HEADLINE "No es solo pestañas" — EDITORIAL CINEMATIC
   Fashion-campaign typography: premium serif, refined contrast,
   negative space, blur-to-sharp reveal with subtle stagger.
   ============================================================ */
.srv-x-title--lux{
  font-family:'Italiana', serif;
  font-size:clamp(2.1rem, 4.8vw, 4.2rem) !important;
  line-height:1.04 !important;
  letter-spacing:-.01em !important;
  margin-bottom:2.4rem !important;
  position:relative;
}
.srv-x-title--lux .srv-x-title-line{
  display:block;
  overflow:visible;                  /* allow descenders of italic to breathe */
  position:relative;
}
/* the non-italic first line stays wine-deep, heavier presence */
.srv-x-title--lux .srv-x-title-line:not(.srv-x-title-italic){
  color: var(--cherry);
  font-weight:400;
}
/* italic lines = emotional accent in BRAND gold (not the pink wine-bright).
   Cormorant italic with a subtle gold gradient → luxury, on-brand. */
.srv-x-title--lux .srv-x-title-italic{
  font-family:'Cormorant Garamond', serif !important;
  font-style:italic !important;
  font-weight:400 !important;
  font-size:1.02em;
  letter-spacing:.005em;
  padding-left:.06em;
  color:var(--gold-dark) !important;
  background:linear-gradient(105deg, var(--gold-dark) 0%, #9A7B36 45%, var(--gold-dark) 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .srv-x-title--lux .srv-x-title-italic{ -webkit-text-fill-color:currentColor; color:var(--gold-dark) !important; }
}
/* hairline accent before the first line — editorial detail */
.srv-x-title--lux::before{
  content:"";
  position:absolute; left:0; top:-1.4rem;
  width:0; height:1px;
  background:linear-gradient(90deg, var(--gold), transparent);
  transition:width 1.4s var(--lux-ease) .3s;
}
.srv-x-title--lux.is-in::before{ width:clamp(50px,6vw,90px); }

/* blur-to-sharp + lift reveal, refined stagger per line */
[data-lux-headline] [data-lux-line]{
  opacity:0;
  transform:translate3d(0, 0.4em, 0);
  filter:blur(12px);
  transition:opacity 1.1s var(--lux-ease),
             transform 1.1s var(--lux-ease),
             filter 1.1s var(--lux-ease);
  will-change:opacity, transform, filter;
}
[data-lux-headline].is-in [data-lux-line]{ opacity:1; transform:none; filter:blur(0); }
[data-lux-headline].is-in [data-lux-line]:nth-child(1){ transition-delay:.05s; }
[data-lux-headline].is-in [data-lux-line]:nth-child(2){ transition-delay:.20s; }
[data-lux-headline].is-in [data-lux-line]:nth-child(3){ transition-delay:.35s; }
@media (prefers-reduced-motion:reduce){
  [data-lux-headline] [data-lux-line]{ opacity:1 !important; transform:none !important; filter:none !important; }
  .srv-x-title--lux::before{ width:clamp(50px,6vw,90px); transition:none; }
}

/* ============================================================
   ITEM 8 · FIX · Híbridas card — square bottom corners
   Root cause: .srv-x-ext-card--feat sets overflow:visible (so the
   "El más elegido" badge can overflow the top). With overflow visible
   the card's border-radius no longer clips the inner body, so the
   body's bottom corners render square. Fix: round the body's bottom
   corners explicitly on the featured variant, matching --srv-radius.
   ============================================================ */
.srv-x-ext-card--feat .srv-x-ext-body{
  border-bottom-left-radius:var(--srv-radius);
  border-bottom-right-radius:var(--srv-radius);
  overflow:hidden;
}
/* belt-and-suspenders: also round the card's own bottom so the 1px
   border follows the curve perfectly */
.srv-x-ext-card--feat{
  border-bottom-left-radius:var(--srv-radius);
  border-bottom-right-radius:var(--srv-radius);
}

/* ============================================================
   ITEM 9 · FIX · "Facial completa" — badge "Más completo" cortado
   Root cause: .srv-x-zone keeps overflow:hidden and the badge sits at
   top:-8px (negative) → its top edge gets clipped. Robust fix: pull the
   badge INTO the flow (positive top, fully inside the clipped box) and
   add top padding so it never overlaps the name. No overflow fights.
   ============================================================ */
.srv-x-zone--fix{
  padding-top:2.4rem;                /* room so badge sits above content */
}
.srv-x-zone--fix .srv-x-zone-best{
  top:10px; right:10px; left:auto;   /* fully inside the clipped box */
  box-shadow:0 6px 16px -6px rgba(201,169,97,.6);
  z-index:5;
  white-space:nowrap;                /* "Más completo" never wraps/clips */
}
.srv-x-zone--fix .srv-x-zone-name{
  white-space:normal;
  line-height:1.25;
  word-break:normal;
  overflow-wrap:break-word;
  max-width:100%;
}

/* ============================================================
   ITEM 10 · FORMACIÓN cards — flat → expensive editorial UI
   Cinematic hover, micro-depth, ambient glow, border luminosity,
   gradient drift, smooth reveal. NO tilt, NO gamer zoom.
   ============================================================ */
.lux-edu-grid{ perspective:1600px; }

.lux-edu-card{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  border-radius:28px !important;
  box-shadow:
    0 18px 50px -28px rgba(92,7,16,.28),
    inset 0 1px 1px rgba(229,208,152,.1);
  transition:transform 1s var(--lux-ease),
             box-shadow 1s var(--lux-ease),
             border-color .8s var(--lux-ease) !important;
  will-change:transform, box-shadow;
}
.lux-edu-card--dark{
  box-shadow:
    0 22px 60px -30px rgba(0,0,0,.55),
    inset 0 1px 1px rgba(229,208,152,.14);
}
/* ambient gradient drift layer */
.lux-edu-card::before{
  content:"";
  position:absolute; inset:-1px; z-index:-1;
  border-radius:inherit; pointer-events:none;
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(201,169,97,.18), transparent 55%),
    radial-gradient(120% 90% at 100% 100%, rgba(154,31,66,.14), transparent 55%);
  opacity:0;
  transition:opacity 1s var(--lux-ease);
}
.lux-edu-card:hover::before{ opacity:1; }

/* ambient glow (soft halo behind, GPU-cheap) */
.lux-edu-glow{
  position:absolute; left:50%; top:50%; z-index:-1;
  width:80%; height:80%; transform:translate(-50%,-50%) scale(.85);
  border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(201,169,97,.22), transparent 65%);
  filter:blur(36px);
  opacity:0;
  transition:opacity 1.1s var(--lux-ease), transform 1.1s var(--lux-ease);
}
.lux-edu-card:hover .lux-edu-glow{ opacity:.9; transform:translate(-50%,-50%) scale(1.05); }

/* slow diagonal shine sweep on hover */
.lux-edu-shine{
  position:absolute; top:0; left:-120%; z-index:1;
  width:60%; height:100%; pointer-events:none;
  background:linear-gradient(110deg, transparent 30%, rgba(229,208,152,.16) 50%, transparent 70%);
  transition:left 1.3s var(--lux-ease);
}
.lux-edu-card:hover .lux-edu-shine{ left:130%; }

/* premium lift + border luminosity */
.lux-edu-card:hover{
  transform:translateY(-10px);
  border-color:rgba(201,169,97,.65) !important;
  box-shadow:
    0 40px 90px -32px rgba(92,7,16,.4),
    0 0 0 1px rgba(201,169,97,.28),
    inset 0 1px 1px rgba(229,208,152,.18);
}
.lux-edu-card--dark:hover{
  border-color:var(--gold) !important;
  box-shadow:
    0 44px 100px -34px rgba(0,0,0,.7),
    0 0 0 1px rgba(201,169,97,.4),
    inset 0 1px 1px rgba(229,208,152,.25);
}
/* keep card content above the layers */
.lux-edu-card > *:not(.lux-edu-glow):not(.lux-edu-shine){ position:relative; z-index:2; }

/* the cbd-spot cursor glow already exists in premium.css — harmonize radius */
.lux-edu-card.cbd-spot::before,
.lux-edu-card.cbd-spot::after{ border-radius:28px; }

@media (prefers-reduced-motion:reduce){
  .lux-edu-card, .lux-edu-shine, .lux-edu-glow, .lux-edu-card::before{ transition:none; }
}

/* ============================================================
   ITEM 11 · CONTEXTUAL CATEGORY VISIBILITY
   Galería + Estudio en detalle are HIDDEN by default and revealed
   only when the user selects the "Galería" category from the navbar.
   Reveal = elegant fade + blur-to-sharp. JS toggles .lux-cat-open.
   ============================================================ */
.lux-cat-section{
  /* hidden but accessible-collapsible: removed from flow until activated */
  display:none;
}
.lux-cat-section.lux-cat-open{
  display:block;
  animation:luxCatReveal 1.2s var(--lux-ease) both;
}
@keyframes luxCatReveal{
  0%{ opacity:0; transform:translate3d(0,40px,0); filter:blur(14px); }
  100%{ opacity:1; transform:none; filter:blur(0); }
}
@media (prefers-reduced-motion:reduce){
  .lux-cat-section.lux-cat-open{ animation:none; }
}

/* ============================================================
   ITEM 12 · MANIFIESTO EDITORIAL (independent luxury manifesto)
   Centered composition, premium serif, generous spacing,
   sophisticated background, subtle ambient lighting.
   ============================================================ */
.lux-manifesto{
  position:relative;
  background:
    radial-gradient(120% 100% at 50% 0%, var(--wine-mid) 0%, var(--cherry) 55%, #4E0610 100%);
  color:var(--cream);
  text-align:center;
  overflow:hidden;
  padding:clamp(3.5rem,7vw,5.5rem) clamp(1.5rem,5vw,2.5rem);
  isolation:isolate;
}
.lux-manifesto-glow{
  position:absolute; left:50%; top:40%; z-index:0;
  width:min(60vw,560px); height:min(60vw,560px);
  transform:translate(-50%,-50%); pointer-events:none;
  background:radial-gradient(circle, rgba(201,169,97,.16) 0%, rgba(154,31,66,.08) 42%, transparent 70%);
  filter:blur(50px);
}
.lux-manifesto-grid{
  position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.4;
  background-size:54px 54px;
  background-image:
    linear-gradient(to right, rgba(229,208,152,.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(229,208,152,.04) 1px, transparent 1px);
  -webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 45%, #000 0%, transparent 72%);
  mask-image:radial-gradient(ellipse 70% 70% at 50% 45%, #000 0%, transparent 72%);
}
.lux-manifesto-vignette{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  box-shadow:inset 0 0 180px 50px rgba(92, 7, 16,.65);
}
.lux-manifesto-inner{
  position:relative; z-index:2;
  max-width:860px; margin:0 auto;
  display:flex; flex-direction:column; align-items:center;
  gap:clamp(1.1rem,2.2vw,1.6rem);
}
.lux-manifesto-eyebrow{
  font-family:'Manrope',sans-serif;
  font-size:.66rem; font-weight:600; text-transform:uppercase;
  letter-spacing:.38em; color:var(--gold-light); opacity:.92;
}
.lux-manifesto-h{
  font-family:'Italiana',serif; font-weight:400;
  font-size:clamp(1.9rem,4.4vw,3.4rem); line-height:1.12; letter-spacing:-.01em;
  margin:0; max-width:22ch;
}
.lux-manifesto-h em{
  font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:300;
  color:var(--gold-light);
}
.lux-manifesto-rule{
  width:clamp(70px,10vw,140px); height:1px;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity:.7;
}
.lux-manifesto-sign{
  font-family:'Cormorant Garamond',serif; font-style:italic;
  font-size:clamp(.95rem,1.6vw,1.2rem); color:rgba(229,208,152,.78); margin:0;
}

/* ============================================================
   ITEM 13 · CAMPAIGN SECTION — oversized kinetic typography
   Powerful, fashion-luxury, iconic. Staggered reveal + scroll pacing.
   "Diseñamos miradas. seguridad. tu firma. confianza. tu mejor versión."
   ============================================================ */
.lux-campaign{
  position:relative;
  background:var(--wine-deep);
  color:var(--cream);
  overflow:hidden;
  content-visibility:visible !important;   /* avoid the 800px intrinsic-size placeholder gap */
  contain-intrinsic-size:auto !important;
  padding:clamp(2.2rem,4.5vw,3.6rem) clamp(1.5rem,6vw,5rem);
  border-top:1px solid rgba(201,169,97,.12);
}
.lux-campaign::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(120% 90% at 50% 0%, rgba(110,21,48,.4), transparent 60%);
}
.lux-campaign-inner{
  position:relative; z-index:2;
  max-width:1100px; margin:0 auto;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:clamp(.7rem,1.6vw,1.1rem);
}
/* self-contained sr-only so the fallback text never shows even
   if Tailwind's utility isn't present */
.lux-campaign .sr-only{
  position:absolute !important; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0);
  white-space:nowrap; border:0;
}
/* small editorial eyebrow above the line for structure */
.lux-campaign-eyebrow{
  font-family:'Manrope',sans-serif; font-size:.58rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.36em; color:var(--gold);
  display:inline-flex; align-items:center; gap:.7rem; opacity:.85;
}
.lux-campaign-eyebrow::before{
  content:""; width:26px; height:1px; background:var(--gold); opacity:.6;
}
.lux-campaign-eyebrow::after{
  content:""; width:26px; height:1px; background:var(--gold); opacity:.6;
}
/* one inline editorial line: "Diseñamos <rotating word>" — centered */
.lux-campaign-line{
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:center;
  gap:clamp(.8rem,3.5vw,2.6rem);          /* wider gap → frase abarca más ancho */
  margin:0;
  width:100%;
}
.lux-campaign-prefix{
  font-family:'Italiana',serif; font-weight:400;
  font-size:clamp(1.1rem,2.6vw,2rem); line-height:1;
  letter-spacing:.14em;                    /* stretched tracking, same font-size */
  color:var(--cream);
  white-space:nowrap;
}
/* rotating word container — masked vertical window (from TextMarquee) */
.lux-campaign-rotate{
  position:relative; display:inline-flex; overflow:hidden;
  -webkit-mask-image:linear-gradient(rgba(0,0,0,0) 0%, #000 26%, #000 74%, rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(rgba(0,0,0,0) 0%, #000 26%, #000 74%, rgba(0,0,0,0) 100%);
  padding:.06em .12em 0;
}
.lux-campaign-rotate-stage{
  position:relative; display:inline-flex; flex-wrap:nowrap;
  font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:300;
  font-size:clamp(1.1rem,2.6vw,2rem); line-height:1;
  letter-spacing:.1em;                     /* stretched tracking, same font-size */
  white-space:nowrap;
}
/* per-character spans injected by JS (from TextRotate mechanic).
   Each char carries its own gold gradient fill so the masked, clipped
   parent doesn't blank them out. */
.lux-campaign-char{
  display:inline-block; white-space:pre;
  transform:translateY(110%); opacity:0;
  will-change:transform, opacity;
  color:transparent;
  background:linear-gradient(110deg, var(--gold-dark), var(--gold) 30%, var(--gold-light) 52%, var(--gold) 72%, var(--gold-dark));
  background-size:240% 100%;
  -webkit-background-clip:text; background-clip:text;
  animation:cbdShimmer 6s linear infinite;
}
/* fallback if background-clip:text unsupported → solid gold */
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .lux-campaign-char{ color:var(--gold-light); background:none; }
}
.lux-campaign-char.is-in{ transform:translateY(0); opacity:1; }
.lux-campaign-char.is-out{ transform:translateY(-120%); opacity:0; }

@media (prefers-reduced-motion:reduce){
  .lux-campaign-rotate-stage{ animation:none; }
  .lux-campaign-char{ transform:none !important; opacity:1 !important; }
}
/* per-character spans injected by JS (from TextRotate mechanic).
   Each char carries its own gold gradient fill so the masked, clipped
   parent doesn't blank them out. */
.lux-campaign-char{
  display:inline-block; white-space:pre;
  transform:translateY(110%); opacity:0;
  will-change:transform, opacity;
  color:transparent;
  background:linear-gradient(110deg, var(--gold-dark), var(--gold) 30%, var(--gold-light) 52%, var(--gold) 72%, var(--gold-dark));
  background-size:240% 100%;
  -webkit-background-clip:text; background-clip:text;
  animation:cbdShimmer 6s linear infinite;
}
/* fallback if background-clip:text unsupported → solid gold */
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .lux-campaign-char{ color:var(--gold-light); background:none; }
}
.lux-campaign-char.is-in{ transform:translateY(0); opacity:1; }
.lux-campaign-char.is-out{ transform:translateY(-120%); opacity:0; }

@media (prefers-reduced-motion:reduce){
  .lux-campaign-rotate-stage{ animation:none; }
  .lux-campaign-char{ transform:none !important; opacity:1 !important; }
}

/* ============================================================
   ITEM 14 · LUXURY NAVBAR + MEGA MENU (Apple × luxury beauty)
   Glassmorphism, refined blur, premium shadow, staggered reveal,
   hover luminosity, editorial spacing, micro-interactions.
   ============================================================ */
.lux-nav{
  position:sticky; top:0; z-index:60;
  background:rgba(250,246,239,.72);
  -webkit-backdrop-filter:blur(22px) saturate(170%);
  backdrop-filter:blur(22px) saturate(170%);
  border-bottom:1px solid rgba(201,169,97,.14);
  transition:background .6s var(--lux-ease), box-shadow .6s var(--lux-ease), border-color .6s var(--lux-ease);
}
.lux-nav.lux-nav-scrolled{
  background:rgba(250,246,239,.92);
  box-shadow:0 12px 40px -18px rgba(92,7,16,.22);
  border-bottom-color:rgba(201,169,97,.22);
}
.lux-nav-bar{
  max-width:1400px; margin:0 auto;
  padding:clamp(.9rem,1.6vw,1.25rem) clamp(1.25rem,4vw,2.5rem);
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
}

/* logo */
.lux-nav-logo{ display:inline-flex; align-items:center; gap:.85rem; text-decoration:none; }
.lux-nav-logo-name{
  font-family:'Italiana',serif; font-size:clamp(1.15rem,1.8vw,1.5rem);
  letter-spacing:.16em; color: var(--cherry);
  transition:color .4s var(--lux-ease);
}
.lux-nav-logo-div{ width:1px; height:18px; background:var(--gold); opacity:.7; }
.lux-nav-logo-sub{
  font-family:'Manrope',sans-serif; font-size:.6rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.34em; color:var(--gold-dark);
}
/* [v113] Antes el sub se OCULTABA en mobile (display:none). La marca debe
   estar completa: lockup apilado CRISTINA / Beauty Designer, como el logo. */
@media (max-width:560px){
  /* [v114] Lockup horizontal también en mobile (preferencia de la clienta). */
  .lux-nav-logo{ gap:.55rem; }
  .lux-nav-logo-name{ font-size:1rem; }
  .lux-nav-logo-div{ height:12px; }
  .lux-nav-logo-sub{ font-size:.46rem; letter-spacing:.2em; white-space:nowrap; }
}
.lux-nav-logo:hover .lux-nav-logo-name{ color:var(--wine-bright); }

/* desktop menu */
.lux-nav-menu{ display:none; }
@media (min-width:1024px){
  .lux-nav-menu{ display:flex; align-items:center; gap:clamp(.4rem,1.4vw,1.4rem); }
}
.lux-nav-item{ position:relative; }
.lux-nav-link{
  display:inline-flex; align-items:center; gap:.4rem;
  font-family:'Manrope',sans-serif; font-size:.82rem; font-weight:500;
  letter-spacing:.04em; color: var(--cherry);
  background:none; border:0; cursor:pointer;
  padding:.65rem .8rem; border-radius:999px;
  text-decoration:none;
  transition:color .35s var(--lux-ease), background .35s var(--lux-ease);
  -webkit-tap-highlight-color:transparent;
}
.lux-nav-link:hover,
.lux-nav-item[data-lux-dd].is-open > .lux-nav-link{
  color:var(--wine-bright);
  background:rgba(201,169,97,.1);
}
.lux-nav-caret{ transition:transform .4s var(--lux-ease); opacity:.7; }
.lux-nav-item.is-open .lux-nav-caret{ transform:rotate(180deg); }

/* floating glass panel */
.lux-nav-panel{
  position:absolute; top:calc(100% + 14px); left:50%;
  transform:translateX(-50%) translateY(10px);
  min-width:max-content;
  opacity:0; pointer-events:none; visibility:hidden;
  transition:opacity .5s var(--lux-ease), transform .5s var(--lux-ease), visibility .5s;
  z-index:70;
}
.lux-nav-item.is-open .lux-nav-panel{
  opacity:1; pointer-events:auto; visibility:visible;
  transform:translateX(-50%) translateY(0);
}
/* connector hover bridge so the panel doesn't close in the gap */
.lux-nav-panel::before{
  content:""; position:absolute; top:-16px; left:0; right:0; height:18px;
}
.lux-nav-panel-inner{
  display:flex; gap:clamp(1.5rem,2.5vw,2.6rem);
  padding:clamp(1.4rem,2vw,2rem);
  border-radius:22px;
  background:linear-gradient(165deg, rgba(255,253,250,.9), rgba(245,239,229,.82));
  -webkit-backdrop-filter:blur(28px) saturate(180%);
  backdrop-filter:blur(28px) saturate(180%);
  border:1px solid rgba(201,169,97,.26);
  box-shadow:
    0 30px 70px -24px rgba(92,7,16,.32),
    0 0 0 1px rgba(255,255,255,.4) inset,
    0 1px 1px rgba(229,208,152,.3) inset;
}
.lux-nav-col{ display:flex; flex-direction:column; gap:.35rem; min-width:200px; }
.lux-nav-col-title{
  font-family:'Manrope',sans-serif; font-size:.6rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.26em; color:var(--gold-dark);
  margin-bottom:.5rem; opacity:.85;
}
.lux-nav-sub{
  display:flex; flex-direction:column; gap:.12rem;
  padding:.6rem .8rem; border-radius:13px;
  text-decoration:none;
  transition:background .35s var(--lux-ease), transform .35s var(--lux-ease);
  /* staggered reveal */
  opacity:0; transform:translateY(8px);
}
.lux-nav-item.is-open .lux-nav-sub{ opacity:1; transform:none; transition:background .35s var(--lux-ease), transform .35s var(--lux-ease), opacity .5s var(--lux-ease); }
.lux-nav-item.is-open .lux-nav-col:nth-child(1) .lux-nav-sub:nth-child(2){ transition-delay:.05s; }
.lux-nav-item.is-open .lux-nav-col:nth-child(1) .lux-nav-sub:nth-child(3){ transition-delay:.1s; }
.lux-nav-item.is-open .lux-nav-col:nth-child(2) .lux-nav-sub:nth-child(2){ transition-delay:.1s; }
.lux-nav-item.is-open .lux-nav-col:nth-child(2) .lux-nav-sub:nth-child(3){ transition-delay:.15s; }
.lux-nav-sub:hover{ background:rgba(201,169,97,.16); transform:translateX(3px); }
.lux-nav-sub-t{
  font-family:'Manrope',sans-serif; font-size:.86rem; font-weight:600; color: var(--cherry);
}
.lux-nav-sub-d{
  font-family:'Cormorant Garamond',serif; font-style:italic; font-size:.92rem;
  color:var(--wine-mid); opacity:.78;
}
/* feature panel (right side promo) */
.lux-nav-feature{
  display:flex; flex-direction:column; justify-content:center; gap:.4rem;
  min-width:230px; padding:1.4rem 1.5rem; border-radius:16px;
  text-decoration:none; position:relative; overflow:hidden;
  background:linear-gradient(150deg, var(--wine-mid), var(--wine-deep));
  border:1px solid rgba(201,169,97,.3);
  opacity:0; transform:translateY(8px);
}
.lux-nav-item.is-open .lux-nav-feature{ opacity:1; transform:none; transition:opacity .55s var(--lux-ease) .12s, transform .55s var(--lux-ease) .12s, box-shadow .4s; }
.lux-nav-feature::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 100% at 100% 0%, rgba(201,169,97,.25), transparent 60%);
}
.lux-nav-feature:hover{ box-shadow:0 18px 40px -16px rgba(0,0,0,.5); }
.lux-nav-feature-eyebrow{
  font-family:'Manrope',sans-serif; font-size:.58rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.28em; color:var(--gold-light); position:relative; z-index:1;
}
.lux-nav-feature-h{
  font-family:'Italiana',serif; font-size:1.3rem; line-height:1.1; color:var(--cream); position:relative; z-index:1;
}
.lux-nav-feature-cta{
  font-family:'Manrope',sans-serif; font-size:.72rem; font-weight:600; letter-spacing:.06em;
  color:var(--gold-light); position:relative; z-index:1; margin-top:.2rem;
}

/* right actions */
.lux-nav-actions{ display:flex; align-items:center; gap:.9rem; }
.lux-nav-status{
  display:none; align-items:center; gap:.5rem;
  font-family:'Manrope',sans-serif; font-size:.66rem; text-transform:uppercase;
  letter-spacing:.16em; color: var(--cherry); opacity:.8;
}
@media (min-width:768px){ .lux-nav-status{ display:inline-flex; } }
.lux-nav-status-dot{
  width:7px; height:7px; border-radius:50%; background:#3FB984;
  box-shadow:0 0 0 0 rgba(63,185,132,.5); animation:luxPulse 2s infinite;
}
@keyframes luxPulse{ 0%{ box-shadow:0 0 0 0 rgba(63,185,132,.5);} 70%{ box-shadow:0 0 0 6px rgba(63,185,132,0);} 100%{ box-shadow:0 0 0 0 rgba(63,185,132,0);} }
.lux-nav-cta{
  display:none; font-family:'Manrope',sans-serif; font-size:.72rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.14em; text-decoration:none;
  color:var(--cream); padding:.78rem 1.5rem; border-radius:999px;
  background:linear-gradient(135deg, var(--wine-bright), var(--wine-deep));
  box-shadow:0 8px 22px -10px rgba(92,7,16,.5), inset 0 1px 1px rgba(229,208,152,.18);
  transition:transform .4s var(--lux-ease), box-shadow .4s var(--lux-ease);
}
@media (min-width:640px){ .lux-nav-cta{ display:inline-flex; } }
.lux-nav-cta:hover{ transform:translateY(-2px); box-shadow:0 14px 30px -10px rgba(92,7,16,.55), 0 0 22px rgba(201,169,97,.22); }

/* burger */
.lux-nav-burger{
  display:inline-flex; flex-direction:column; gap:5px; align-items:center; justify-content:center;
  width:42px; height:42px; border:0; background:none; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
@media (min-width:1024px){ .lux-nav-burger{ display:none; } }
.lux-nav-burger span{
  display:block; width:22px; height:1.5px; background:var(--wine-deep);
  transition:transform .4s var(--lux-ease), opacity .3s var(--lux-ease);
}
.lux-nav-burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.lux-nav-burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.lux-nav-burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

/* mobile menu */
.lux-nav-mobile{
  display:block; overflow:hidden; max-height:0;
  transition:max-height .6s var(--lux-ease);
  border-top:1px solid rgba(201,169,97,.12);
}
@media (min-width:1024px){ .lux-nav-mobile{ display:none; } }
.lux-nav-mobile.open{ max-height:85vh; overflow-y:auto; }
.lux-nav-mobile-list{
  padding:1.5rem clamp(1.25rem,5vw,2rem) 2rem;
  display:flex; flex-direction:column;
}
.lux-nav-mobile-list a{
  font-family:'Cormorant Garamond',serif; font-size:1.25rem; color: var(--cherry);
  text-decoration:none; padding:.85rem 0; border-bottom:1px solid rgba(92,7,16,.07);
  transition:color .3s, padding-left .3s var(--lux-ease);
}
.lux-nav-mobile-list a span{ font-size:.78rem; font-style:italic; opacity:.6; }
.lux-nav-mobile-list a:hover{ color:var(--wine-bright); padding-left:.4rem; }
.lux-nav-mobile-cta{
  margin-top:1.2rem !important; text-align:center; border:0 !important;
  font-family:'Manrope',sans-serif !important; font-size:.78rem !important;
  text-transform:uppercase; letter-spacing:.14em; font-weight:600;
  color:var(--cream) !important; padding:1rem !important; border-radius:999px;
  background:linear-gradient(135deg, var(--wine-bright), var(--wine-deep));
}
@media (prefers-reduced-motion:reduce){
  .lux-nav-panel, .lux-nav-sub, .lux-nav-feature, .lux-nav-caret{ transition:none; }
}

/* ============================================================
   ITEM 15 · "DISEÑA TU PRÓXIMA MIRADA" — editorial luxury CTA
   Split layout · deep borgoña bg · cinematic vertical image ·
   floating badges · gold + outlined luxury buttons · subtle parallax.
   ============================================================ */
.lux-next{
  position:relative; overflow:hidden; isolation:isolate;
  background:
    radial-gradient(130% 110% at 100% 0%, var(--wine-mid) 0%, var(--wine-deep) 50%, #4E0610 100%);
  color:var(--cream);
  padding:clamp(5rem,11vw,9rem) clamp(1.5rem,5vw,2.5rem);
}
/* background atmospherics */
.lux-next-bg{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.lux-next-grid{
  position:absolute; inset:0; 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 80% 80% at 30% 40%, #000 0%, transparent 75%);
  mask-image:radial-gradient(ellipse 80% 80% at 30% 40%, #000 0%, transparent 75%);
}
.lux-next-glow{ position:absolute; border-radius:50%; filter:blur(60px); }
.lux-next-glow-1{
  width:50vw; max-width:620px; height:50vw; max-height:620px;
  left:-10%; top:10%;
  background:radial-gradient(circle, rgba(201,169,97,.18), transparent 65%);
}
.lux-next-glow-2{
  width:46vw; max-width:560px; height:46vw; max-height:560px;
  right:-8%; bottom:-12%;
  background:radial-gradient(circle, rgba(196,52,89,.2), transparent 65%);
}
.lux-next-vignette{
  position:absolute; inset:0; box-shadow:inset 0 0 240px 70px rgba(92, 7, 16,.7);
}

.lux-next-inner{
  position:relative; z-index:2;
  max-width:1320px; margin:0 auto;
  display:grid; grid-template-columns:1fr; gap:clamp(3rem,6vw,5rem);
  align-items:center;
}
@media (min-width:1024px){
  .lux-next-inner{ grid-template-columns:1.05fr .95fr; gap:clamp(3rem,5vw,6rem); }
}

/* LEFT */
.lux-next-eyebrow{
  display:inline-flex; align-items:center; gap:.7rem;
  font-family:'Manrope',sans-serif; font-size:.72rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.32em; color:var(--gold-light);
  margin-bottom:clamp(1.4rem,3vw,2rem);
}
.lux-next-eyebrow-dot{
  width:7px; height:7px; border-radius:50%; background:var(--gold-light);
  box-shadow:0 0 12px rgba(229,208,152,.8);
}
.lux-next-title{
  font-family:'Italiana',serif; font-weight:400;
  font-size:clamp(3rem,8vw,6.4rem); line-height:.94; letter-spacing:-.02em;
  margin:0 0 clamp(1.4rem,3vw,2rem); color:var(--cream);
}
.lux-next-title-em{
  font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:300;
  color:transparent;
  background:linear-gradient(110deg, var(--gold), var(--gold-light) 55%, var(--gold));
  -webkit-background-clip:text; background-clip:text;
  padding:0 .04em;
}
.lux-next-copy{
  font-family:'Cormorant Garamond',serif; font-size:clamp(1rem,1.4vw,1.2rem);
  line-height:1.62; color:rgba(251,248,243,.82); max-width:62ch;
  margin:0 0 clamp(2rem,3.5vw,2.6rem);
}
.lux-next-copy + .lux-next-copy{ margin-top:calc(-1 * clamp(1rem,2vw,1.5rem)); }
.lux-next-copy--accent{ font-style:italic; color:var(--gold-light,#ECD7A4); }
.lux-next-actions{
  display:flex; flex-wrap:wrap; gap:1rem; margin-bottom:clamp(2.4rem,4vw,3rem);
}
.lux-next-btn{
  display:inline-flex; align-items:center; gap:.7rem;
  font-family:'Manrope',sans-serif; font-size:.78rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.14em; text-decoration:none;
  padding:1.05rem 2.1rem; border-radius:999px;
  transition:transform .5s var(--lux-ease), box-shadow .5s var(--lux-ease), background .5s var(--lux-ease), color .4s;
  position:relative; overflow:hidden;
}
.lux-next-btn svg{ transition:transform .5s var(--lux-ease); }
.lux-next-btn--gold{
  color: var(--cherry);
  background:linear-gradient(135deg, var(--gold-light), var(--gold));
  box-shadow:0 0 0 1px rgba(201,169,97,.4), 0 16px 36px -12px rgba(201,169,97,.5), inset 0 1px 1px rgba(255,255,255,.45);
}
.lux-next-btn--gold:hover{
  transform:translateY(-3px);
  box-shadow:0 0 0 1px rgba(229,208,152,.6), 0 22px 48px -12px rgba(201,169,97,.6), 0 0 30px rgba(229,208,152,.3), inset 0 1px 1px rgba(255,255,255,.5);
}
.lux-next-btn--gold:hover svg{ transform:translateX(4px); }
.lux-next-btn--ghost{
  color:var(--cream);
  background:rgba(251,248,243,.04);
  border:1px solid rgba(201,169,97,.4);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.lux-next-btn--ghost:hover{
  transform:translateY(-3px);
  background:rgba(201,169,97,.12); border-color:var(--gold-light);
  box-shadow:0 16px 34px -14px rgba(0,0,0,.5);
}
.lux-next-btn:active{ transform:translateY(-1px) scale(.98); }

/* metrics */
.lux-next-metrics{ display:flex; align-items:center; gap:clamp(1rem,2.5vw,2rem); flex-wrap:wrap; }
.lux-next-metric{ display:flex; flex-direction:column; gap:.2rem; }
.lux-next-metric-num{
  font-family:'Italiana',serif; font-size:clamp(1.5rem,2.6vw,2.1rem); line-height:1;
  color:var(--gold-light);
}
.lux-next-metric-lbl{
  font-family:'Manrope',sans-serif; font-size:.62rem; text-transform:uppercase;
  letter-spacing:.16em; color:rgba(251,248,243,.6);
}
.lux-next-metric-div{ width:1px; height:34px; background:rgba(201,169,97,.3); }

/* RIGHT — cinematic framed image */
.lux-next-right{ display:flex; justify-content:center; }
.lux-next-frame{
  position:relative; width:min(86vw,440px);
}
.lux-next-frame-corner{
  position:absolute; width:46px; height:46px; z-index:4; pointer-events:none;
  border:1px solid var(--gold-light); opacity:.65;
}
.lux-next-frame-corner--tl{ top:-14px; left:-14px; border-right:0; border-bottom:0; }
.lux-next-frame-corner--br{ bottom:-14px; right:-14px; border-left:0; border-top:0; }
.lux-next-media{
  position:relative; overflow:hidden;
  border-radius:26px; aspect-ratio:4/5;
  box-shadow:
    0 50px 110px -30px rgba(0,0,0,.85),
    0 0 0 1px rgba(201,169,97,.2),
    inset 0 1px 1px rgba(229,208,152,.2);
}
.lux-next-media img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:saturate(1.06) contrast(1.03);
  transform:scale(1.05);
  transition:transform 1.4s var(--lux-ease);
  will-change:transform;
}
.lux-next-frame:hover .lux-next-media img{ transform:scale(1); }
.lux-next-media-overlay{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, transparent 45%, rgba(92, 7, 16,.55) 100%);
}
/* floating elements */
.lux-next-float{
  position:absolute; z-index:5;
  display:flex; align-items:center; gap:.7rem;
  padding:.8rem 1rem; border-radius:16px;
  background:linear-gradient(140deg, rgba(123, 2, 29,.85), rgba(92, 7, 16,.8));
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  border:1px solid rgba(201,169,97,.28);
  box-shadow:0 24px 50px -16px rgba(0,0,0,.7), inset 0 1px 1px rgba(229,208,152,.18);
  animation:luxFloat 6.5s ease-in-out infinite;
}
.lux-next-float--rating{ top:1.4rem; left:-1.2rem; }
.lux-next-float--mini{ bottom:1.6rem; right:-1.2rem; animation-delay:-3.2s; }
@media (min-width:1024px){
  .lux-next-float--rating{ left:-2.6rem; }
  .lux-next-float--mini{ right:-2.6rem; }
}
@keyframes luxFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-9px); } }
.lux-next-float-stars{ color:var(--gold-light); font-size:.9rem; letter-spacing:.05em; }
.lux-next-float-ico{
  width:32px; height:32px; 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:.95rem;
}
.lux-next-float-meta{ display:flex; flex-direction:column; gap:.1rem; }
.lux-next-float-meta strong{
  font-family:'Manrope',sans-serif; font-size:.74rem; font-weight:700; color:var(--cream);
}
.lux-next-float-meta small{
  font-family:'Manrope',sans-serif; font-size:.62rem; color:rgba(229,208,152,.66);
}
@media (prefers-reduced-motion:reduce){
  .lux-next-float{ animation:none; }
  .lux-next-media img{ transform:none; transition:none; }
}

/* ============================================================
   16 · GLOBAL VISUAL CONSISTENCY (cross-section harmony)
   ============================================================ */
/* harmonize the legacy headline-xl rhythm with the refined system */
.headline-xl{ letter-spacing:-.015em; }
/* ensure data-cursor CTAs in new sections inherit the custom cursor */
.lux-next-btn[data-cursor]{ cursor:pointer; }

/* ============================================================
   ITEM 16 · GLOBAL VISUAL CONSISTENCY (full pass)
   Unify radius, shadow, motion, depth across refined surfaces so
   the whole site reads as one cohesive luxury system.
   ============================================================ */
/* consistent soft-edge radius family on premium cards */
.testimonial-card,
.testimonial-mini{
  border-radius:18px;
}
/* consistent shadow language on dark testimonial surfaces */
.testimonial-card{
  box-shadow:0 24px 50px -28px rgba(0,0,0,.5), inset 0 1px 1px rgba(229,208,152,.08);
}
/* harmonize the cursor-spotlight radius with whatever card hosts it */
.cbd-spot{ --cbd-spot-radius:inherit; }

/* ============================================================
   ITEM 17 · GLOBAL MOTION SYSTEM (cinematic, unified)
   One easing language, layered opacity, smooth transitions.
   Applied to interactive primitives site-wide.
   ============================================================ */
/* unify link / button micro-motion to the luxury easing */
a:not(.lux-nav-sub):not(.lux-nav-feature),
button{
  transition-timing-function:var(--lux-ease);
}
/* refined hover lift language reused across legacy cards */
@media (hover:hover) and (pointer:fine){
  .card-luxury, .ext-card, .net-pillar, .testimonial-card{
    transition:transform .8s var(--lux-ease), box-shadow .8s var(--lux-ease) !important;
  }
}
/* opacity-layered reveal for any legacy [data-reveal] gets the lux curve */
[data-reveal]{
  transition:opacity var(--lux-dur-reveal) var(--lux-ease),
             transform var(--lux-dur-reveal) var(--lux-ease),
             filter var(--lux-dur-reveal) var(--lux-ease) !important;
}

/* ============================================================
   ITEM 18 · PERFORMANCE (GPU acceleration, will-change hygiene)
   Keep everything fluid: promote only transform/opacity layers,
   release will-change after entrance, throttle heavy filters.
   ============================================================ */
/* promote only the elements that actually animate */
.lux-next-media img,
.lux-campaign-word,
.cbd-flowart.lux-quiet .cbd-fa-inner,
[data-lux-fade],
[data-lux-headline] [data-lux-line]{
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
/* release will-change once revealed → frees GPU memory */
.cbd-flowart.lux-quiet .cbd-fa-inner.is-in,
[data-lux-fade].is-in,
.lux-campaign-words.is-in .lux-campaign-word{
  will-change:auto;
}
/* mobile: drop the most expensive blur layers on the new sections */
@media (max-width:767px){
  .lux-next-float,
  .lux-nav-panel-inner{
    -webkit-backdrop-filter:none; backdrop-filter:none;
  }
  .lux-next-glow, .lux-manifesto-glow{ filter:blur(30px); }   /* lighter paint */
}
/* respect reduced motion globally for the refine layer */
@media (prefers-reduced-motion:reduce){
  .lux-next-media img, .lux-campaign-word, .lux-edu-shine, .lux-edu-glow,
  .lux-next-float, .cbd-show-badge{
    animation:none !important; transition:none !important;
  }
}

/* ============================================================
   ITEM 19 · GUARDRAILS — prevent any SaaS/gamer/cliché regressions
   (defensive: ensures refined sections never inherit harsh effects)
   ============================================================ */
.lux-next *, .lux-manifesto *, .lux-campaign *, .lux-nav *{
  /* no neon, no harsh transforms creeping in from utility classes */
  text-shadow:none;
}
.lux-next-title, .lux-manifesto-h, .lux-campaign-word{ text-shadow:0 1px 30px rgba(0,0,0,.25); }

/* ============================================================
   TAREA 4 · BRAND NAME "Cristina Beauty Designer" must STAND OUT
   It's the brand name in the team heading — elevate from a small
   gold pill to a luminous, oversized editorial signature.
   ============================================================ */
.cbd-team-h-mark{
  display:block !important;
  font-family:'Italiana', serif !important;
  font-size:.86em !important;            /* much larger than the old 0.5em */
  letter-spacing:.04em !important;
  text-transform:none !important;
  margin-top:.5rem !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  line-height:1.05 !important;
  /* luminous gold gradient so the brand truly resonates */
  color:transparent !important;
  background:linear-gradient(100deg, var(--gold-dark) 0%, var(--gold) 28%, var(--gold-light) 50%, var(--gold) 72%, var(--gold-dark) 100%) !important;
  background-size:200% 100% !important;
  -webkit-background-clip:text !important; background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
  animation:cbdShimmer 7s linear infinite;
  text-shadow:none;
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .cbd-team-h-mark{ -webkit-text-fill-color:initial; color:var(--gold-light) !important; background:none !important; }
}
/* refine the heading rhythm so the brand reads as the climax */
.cbd-team-h{ line-height:1.06 !important; }
.cbd-team-h em{ color:var(--gold-light) !important; }

/* ============================================================
   TAREA 5 · PORTRAIT HERO — fill the empty space with editorial
   luxury density (vertical label, coordinates, stat, signature,
   stars). Plus: replace the off-brand pink (--wine-bright) accents
   in the floating tags with on-brand gold/wine.
   ============================================================ */
/* give the hero a max width so fillers have anchors, keep photo centered */
.cbd-portrait-hero{ max-width:760px; margin-left:auto; margin-right:auto; }

/* vertical rotated role label (left edge) */
.cbd-portrait-vlabel{
  position:absolute; z-index:3; left:-.5%; top:50%;
  transform:translateY(-50%) rotate(180deg);
  writing-mode:vertical-rl;
  font-family:'Manrope',sans-serif; font-size:.6rem; font-weight:600;
  letter-spacing:.34em; text-transform:uppercase;
  color:var(--gold); opacity:.55; white-space:nowrap; pointer-events:none;
}
/* coordinate chip (mid-right, clear of the top-right question) */
.cbd-portrait-coord{
  position:absolute; z-index:3; top:36%; right:3%;
  display:flex; flex-direction:column; align-items:flex-end; gap:.05rem;
  pointer-events:none;
}
.cbd-portrait-coord-k{
  font-family:'Manrope',sans-serif; font-size:.52rem; font-weight:700;
  letter-spacing:.3em; text-transform:uppercase; color:var(--gold); opacity:.7;
}
.cbd-portrait-coord-v{
  font-family:'Italiana',serif; font-size:clamp(1.4rem,2.6vw,2.2rem);
  line-height:.9; color:var(--gold-light);
}
/* floating stat plate (bottom-right) */
.cbd-portrait-stat{
  position:absolute; z-index:3; bottom:14%; right:0;
  display:flex; flex-direction:column; gap:.1rem;
  padding:.7rem .95rem; border-radius:12px;
  background:linear-gradient(140deg, rgba(110,21,48,.7), rgba(123, 2, 29,.65));
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border:1px solid rgba(201,169,97,.3);
  box-shadow:0 18px 40px -18px rgba(0,0,0,.6);
  pointer-events:none;
  animation:luxFloat 7s ease-in-out infinite;
}
.cbd-portrait-stat strong{
  font-family:'Italiana',serif; font-size:1.15rem; color:var(--cream); line-height:1;
}
.cbd-portrait-stat small{
  font-family:'Manrope',sans-serif; font-size:.56rem; text-transform:uppercase;
  letter-spacing:.18em; color:var(--gold-light); opacity:.85;
}
/* faint script signature behind, top-left */
.cbd-portrait-sign{
  position:absolute; z-index:1; top:10%; left:2%;
  font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:300;
  font-size:clamp(2rem,5vw,3.4rem); color:rgba(201,169,97,.16);
  pointer-events:none; user-select:none; white-space:nowrap;
}
/* tiny decorative stars */
.cbd-portrait-star{
  position:absolute; z-index:3; color:var(--gold-light); opacity:.5;
  font-size:.7rem; pointer-events:none;
  animation:luxTwinkle 4s ease-in-out infinite;
}
.cbd-portrait-star--1{ top:22%; right:14%; }
.cbd-portrait-star--2{ bottom:30%; left:13%; font-size:.5rem; animation-delay:-2s; }
@keyframes luxTwinkle{ 0%,100%{ opacity:.25; transform:scale(.8);} 50%{ opacity:.7; transform:scale(1.1);} }

/* on-brand accent fix: kill the pink wine-bright in portrait tags */
.cbd-portrait-tag em{ color:var(--wine-mid) !important; }
.cbd-portrait-tag-3 em{ color: var(--cherry) !important; }

/* hide the heaviest fillers on small screens (keep it clean) */
@media (max-width:680px){
  .cbd-portrait-vlabel, .cbd-portrait-sign, .cbd-portrait-star{ display:none; }
  .cbd-portrait-stat{ bottom:8%; }
}
@media (prefers-reduced-motion:reduce){
  .cbd-portrait-stat, .cbd-portrait-star{ animation:none; }
}

/* ============================================================
   TAREA 5b · MIRROR fillers for Ludovic (.cbd-portrait--alt)
   His tags live on the RIGHT, so flip the fillers to avoid overlap:
   stat → left, vertical label → right, coordinate → left, sign → right.
   ============================================================ */
.cbd-portrait--alt .cbd-portrait-stat{
  right:auto; left:0;
}
.cbd-portrait--alt .cbd-portrait-vlabel{
  left:auto; right:-.5%;
  transform:translateY(-50%) rotate(0deg);
  writing-mode:vertical-rl;
}
.cbd-portrait--alt .cbd-portrait-coord{
  right:auto; left:3%; align-items:flex-start;
}
.cbd-portrait--alt .cbd-portrait-sign{
  left:auto; right:2%;
}
.cbd-portrait--alt .cbd-portrait-star--1{ right:auto; left:14%; }
.cbd-portrait--alt .cbd-portrait-star--2{ left:auto; right:13%; }
@media (max-width:680px){
  .cbd-portrait--alt .cbd-portrait-stat{ left:0; }
}

/* ============================================================
   CINEMATIC PROCESS · "cinematic-landing-hero" ported to vanilla
   Wine/gold/cream physical card experience. Quiénes somos → Tu turno.
   Pinned scroll timeline lives in cristina-luxury-refine.js.
   ============================================================ */
.cbd-cinema{
  position:relative; width:100%; min-height:100vh;
  overflow:hidden; display:flex; align-items:center; justify-content:center;
  background:var(--wine-deep); color:var(--cream);
  content-visibility:visible !important;
  perspective:1500px;
  isolation:isolate;
}
/* film grain + grid atmosphere (from INJECTED_STYLES) */
.cbd-cinema-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-cinema-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, #000 0%, transparent 70%);
  mask-image:radial-gradient(ellipse at center, #000 0%, transparent 70%);
}

/* ---- hero intro texts (behind the card) ---- */
.cbd-cinema-hero{
  position:absolute; z-index:10; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:0 1.5rem; will-change:transform, opacity;
}
.cbd-cinema-kicker{
  font-family:'Manrope',sans-serif; font-size:.66rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.4em; color:var(--gold-light);
  margin:0 0 1.4rem;
}
.cbd-cinema-title{
  font-family:'Italiana',serif; font-weight:400;
  font-size:clamp(2.6rem,8vw,6rem); line-height:.98; letter-spacing:-.02em;
  margin:0; color:var(--cream);
}
.cbd-cinema-title--gold{
  font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:300;
  color:transparent;
  background:linear-gradient(110deg, var(--gold-dark), var(--gold-light) 52%, var(--gold-dark));
  -webkit-background-clip:text; background-clip:text;
}
.cbd-cinema-lede{
  font-family:'Cormorant Garamond',serif; font-size:clamp(1.05rem,1.7vw,1.4rem);
  line-height:1.6; color:rgba(251,248,243,.78); max-width:46ch; margin:1.6rem auto 0;
}

/* ---- the physical premium card ---- */
.cbd-cinema-stage{
  position:absolute; inset:0; z-index:20;
  display:flex; align-items:center; justify-content:center;
  pointer-events:none; perspective:1500px;
}
.cbd-cinema-card{
  position:relative; overflow:hidden; pointer-events:auto;
  width:min(90vw,1200px); height:min(82vh,720px);
  border-radius:38px;
  display:flex; align-items:center; justify-content:center;
  /* deep physical material (wine version of premium-depth-card) */
  background:linear-gradient(145deg, var(--wine-mid) 0%, #4E0610 100%);
  box-shadow:
    0 40px 100px -20px rgba(0,0,0,.9),
    0 20px 40px -20px rgba(0,0,0,.8),
    inset 0 1px 2px rgba(229,208,152,.2),
    inset 0 -2px 4px rgba(0,0,0,.8);
  border:1px solid rgba(201,169,97,.12);
  will-change:transform, width, height, border-radius;
}
.cbd-cinema-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,.08) 0%, transparent 42%);
  mix-blend-mode:screen;
}
.cbd-cinema-grid-inner{
  position:relative; z-index:2; width:100%; max-width:1100px;
  margin:0 auto; padding:clamp(1.6rem,3vw,3rem);
  display:grid; grid-template-columns:1fr; gap:clamp(1.6rem,3vw,2.4rem);
  align-items:center;
  perspective:1400px;                 /* enables the 3D column swing */
  transform-style:preserve-3d;
}
@media (min-width:1000px){
  .cbd-cinema-grid-inner{ grid-template-columns:1.1fr .9fr 1fr; gap:clamp(2rem,3vw,3.5rem); }
}

/* LEFT · process steps */
.cbd-cinema-eyebrow{
  font-family:'Manrope',sans-serif; font-size:.58rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.26em; color:var(--gold); margin:0 0 1rem;
}
.cbd-cinema-eyebrow--r{ text-align:right; }
.cbd-cinema-card-h{
  font-family:'Italiana',serif; font-weight:400; font-size:clamp(1.6rem,2.6vw,2.4rem);
  line-height:1.05; color:var(--cream); margin:0 0 1.4rem;
}
.cbd-cinema-card-h em{
  font-family:'Cormorant Garamond',serif; font-style:italic; color:var(--gold-light);
}
.cbd-cinema-steps{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:1rem; }
.cbd-cinema-steps li{
  display:grid; grid-template-columns:auto 1fr; gap:.2rem .9rem; align-items:baseline;
  padding-bottom:1rem; border-bottom:1px solid rgba(201,169,97,.14);
}
.cbd-cinema-steps li:last-child{ border-bottom:0; padding-bottom:0; }
.cbd-cinema-step-n{
  grid-row:span 2; font-family:'Italiana',serif; font-size:1.3rem; color:var(--gold);
}
.cbd-cinema-step-t{
  font-family:'Manrope',sans-serif; font-weight:600; font-size:.92rem; color:var(--cream);
}
.cbd-cinema-step-d{
  font-family:'Cormorant Garamond',serif; font-size:1rem; line-height:1.4;
  color:rgba(251,248,243,.68);
}

/* CENTER · progress ring + counter */
.cbd-cinema-center{ display:flex; flex-direction:column; align-items:center; gap:1.6rem; }
.cbd-cinema-ring-wrap{
  position:relative; width:clamp(160px,18vw,200px); height:clamp(160px,18vw,200px);
  display:flex; align-items:center; justify-content:center;
  filter:drop-shadow(0 18px 30px rgba(0,0,0,.5));
}
.cbd-cinema-ring{ position:absolute; inset:0; width:100%; height:100%; }
.cbd-cinema-ring-progress{
  transform:rotate(-90deg); transform-origin:center;
  stroke-dasharray:402; stroke-dashoffset:402; stroke-linecap:round;
}
.cbd-cinema-ring-center{ text-align:center; display:flex; flex-direction:column; align-items:center; }
.cbd-cinema-counter{
  font-family:'Italiana',serif; font-size:clamp(2.2rem,4vw,3.2rem); line-height:1;
  color:var(--gold-light);
}
.cbd-cinema-counter::before{ content:"+"; font-size:.6em; vertical-align:super; opacity:.8; }
.cbd-cinema-counter-label{
  font-family:'Manrope',sans-serif; font-size:.56rem; text-transform:uppercase;
  letter-spacing:.2em; color:rgba(229,208,152,.7); margin-top:.4rem;
}
.cbd-cinema-microstats{ display:flex; align-items:center; gap:1.2rem; }
.cbd-cinema-microstats > div{ display:flex; flex-direction:column; align-items:center; gap:.1rem; }
.cbd-cinema-microstats strong{ font-family:'Italiana',serif; font-size:1.3rem; color:var(--cream); }
.cbd-cinema-microstats small{
  font-family:'Manrope',sans-serif; font-size:.52rem; text-transform:uppercase;
  letter-spacing:.16em; color:rgba(229,208,152,.6);
}
.cbd-cinema-micro-div{ width:1px; height:28px; background:rgba(201,169,97,.3); }

/* RIGHT · brand mark + tags */
.cbd-cinema-right{ display:flex; flex-direction:column; align-items:flex-end; text-align:right; }
.cbd-cinema-mark{
  font-family:'Italiana',serif; font-size:clamp(3rem,7vw,5.5rem); line-height:.9;
  letter-spacing:.02em; color:transparent;
  background:linear-gradient(180deg, var(--cream) 0%, rgba(201,169,97,.5) 100%);
  -webkit-background-clip:text; background-clip:text;
  filter:drop-shadow(0 12px 24px rgba(0,0,0,.6));
}
.cbd-cinema-mark-sub{
  font-family:'Cormorant Garamond',serif; font-style:italic; font-size:1.05rem;
  color:var(--gold-light); margin:.5rem 0 1.2rem; max-width:24ch;
}
.cbd-cinema-tags{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.5rem; justify-content:flex-end; }
.cbd-cinema-tags li{
  font-family:'Manrope',sans-serif; font-size:.66rem; letter-spacing:.04em;
  padding:.4rem .85rem; border-radius:999px;
  background:rgba(201,169,97,.1); border:1px solid rgba(201,169,97,.26); color:var(--gold-light);
}

/* floating glass badges (floating-ui-badge ported) */
.cbd-cinema-badge{
  position:absolute; z-index:30; display:flex; align-items:center; gap:.8rem;
  padding:.85rem 1.1rem; border-radius:18px;
  background:linear-gradient(135deg, rgba(123, 2, 29,.85), rgba(92, 7, 16,.78));
  -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);
  box-shadow:0 0 0 1px rgba(201,169,97,.18), 0 25px 50px -12px rgba(0,0,0,.8),
             inset 0 1px 1px rgba(229,208,152,.2);
}
.cbd-cinema-badge--tl{ top:6%; left:-1.5%; }
.cbd-cinema-badge--br{ bottom:8%; right:-1.5%; }
@media (min-width:1000px){
  .cbd-cinema-badge--tl{ left:-2.5%; }
  .cbd-cinema-badge--br{ right:-2.5%; }
}
.cbd-cinema-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,.18); border:1px solid rgba(229,208,152,.3); color:var(--gold-light);
}
.cbd-cinema-badge strong{
  display:block; font-family:'Manrope',sans-serif; font-size:.78rem; font-weight:700; color:var(--cream);
}
.cbd-cinema-badge small{ font-family:'Manrope',sans-serif; font-size:.62rem; color:rgba(229,208,152,.66); }

/* CTA layer (revealed at the end) */
.cbd-cinema-cta{
  position:absolute; z-index:10; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:0 1.5rem; pointer-events:none;
}
.cbd-cinema-cta-kicker{
  font-family:'Manrope',sans-serif; font-size:.66rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.4em; color:var(--gold-light); margin:0 0 1.2rem;
}
.cbd-cinema-cta-h{
  font-family:'Italiana',serif; font-weight:400; font-size:clamp(2.4rem,6vw,5rem);
  line-height:1; color:var(--cream); margin:0;
}
.cbd-cinema-cta-h em{
  font-family:'Cormorant Garamond',serif; font-style:italic; color:var(--gold-light);
}
.cbd-cinema-cta-p{
  font-family:'Cormorant Garamond',serif; font-size:clamp(1.05rem,1.7vw,1.35rem);
  color:rgba(251,248,243,.78); max-width:44ch; margin:1.4rem auto 2.2rem;
}
.cbd-cinema-cta-btn{
  pointer-events:auto; display:inline-flex; align-items:center; gap:.7rem;
  font-family:'Manrope',sans-serif; font-size:.78rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.14em; text-decoration:none;
  color: var(--cherry); padding:1.05rem 2.1rem; border-radius:999px;
  background:linear-gradient(135deg, var(--gold-light), var(--gold));
  box-shadow:0 0 0 1px rgba(201,169,97,.4), 0 16px 36px -12px rgba(201,169,97,.5),
             inset 0 1px 1px rgba(255,255,255,.45);
  transition:transform .5s var(--lux-ease), box-shadow .5s var(--lux-ease);
}
.cbd-cinema-cta-btn svg{ transition:transform .5s var(--lux-ease); }
.cbd-cinema-cta-btn:hover{ transform:translateY(-3px); box-shadow:0 22px 48px -12px rgba(201,169,97,.6), 0 0 30px rgba(229,208,152,.3); }
.cbd-cinema-cta-btn:hover svg{ transform:translateX(4px); }

/* ---- static stack: reduced-motion, no-JS, OR mobile/tablet (<1024px) ---- */
.cbd-cinema--static{ min-height:auto; flex-direction:column; padding:clamp(3rem,8vw,5rem) 1.25rem; gap:2.5rem; }
.cbd-cinema--static .cbd-cinema-hero,
.cbd-cinema--static .cbd-cinema-stage,
.cbd-cinema--static .cbd-cinema-cta{ position:relative; inset:auto; width:100%; }
.cbd-cinema--static .cbd-cinema-stage{ pointer-events:auto; display:block; }
.cbd-cinema--static .cbd-cinema-card{
  width:100% !important; height:auto !important; clip-path:none !important;
  max-width:100%; margin:0; display:block !important;
}
.cbd-cinema--static .cbd-cinema-grid-inner{ grid-template-columns:1fr; gap:2rem; padding:clamp(1.4rem,5vw,2.4rem); width:100%; max-width:100%; margin:0; box-sizing:border-box; }
.cbd-cinema--static .cbd-cinema-left,
.cbd-cinema--static .cbd-cinema-center,
.cbd-cinema--static .cbd-cinema-right{ width:100%; max-width:100%; transform:none !important; }
.cbd-cinema--static .cbd-cinema-right{ align-items:flex-start; text-align:left; }
.cbd-cinema--static .cbd-cinema-tags{ justify-content:flex-start; }
.cbd-cinema--static .cbd-cinema-eyebrow--r{ text-align:left; }
.cbd-cinema--static .cbd-cinema-ring-progress{ stroke-dashoffset:80; }
/* keep floating badges in-flow on small screens so they don't overlap */
.cbd-cinema--static .cbd-cinema-badge{ position:relative; inset:auto; margin-top:1rem; display:inline-flex; }
@media (prefers-reduced-motion:reduce){
  .cbd-cinema{ min-height:auto; flex-direction:column; padding:4rem 1.5rem; gap:3rem; }
  .cbd-cinema-hero, .cbd-cinema-stage, .cbd-cinema-cta{ position:relative; inset:auto; }
  .cbd-cinema-stage{ pointer-events:auto; }
  .cbd-cinema-card{ width:100%; height:auto; }
  .cbd-cinema-ring-progress{ stroke-dashoffset:80; }
}

/* ============================================================
   ADAPTIVE 3D NAV PILL · ported from 3d-adaptive-navigation-bar.tsx
   Brushed-metal pill, expands on hover, brand always present.
   Wine/gold luxury reinterpretation of the silver original.
   ============================================================ */
.cbd-pill{
  position:fixed; left:50%; bottom:26px; transform:translateX(-50%);
  z-index:70; pointer-events:auto;
  border-radius:999px;
  width:auto; height:54px;
  display:flex; align-items:center;
  /* brushed light-metal base (from the prompt's gradient stack) */
  background:linear-gradient(135deg,#fcfcfd 0%,#f5f3ef 30%,#efe9df 60%,#e8e0d2 100%);
  box-shadow:
    0 3px 6px rgba(92,7,16,.12),
    0 10px 24px rgba(92,7,16,.14),
    0 20px 48px rgba(92,7,16,.12),
    inset 0 2px 1px rgba(255,255,255,.85),
    inset 0 -2px 6px rgba(139,111,53,.16),
    inset 2px 2px 8px rgba(139,111,53,.08),
    inset -2px 2px 8px rgba(139,111,53,.07);
  overflow:hidden;
  transition:box-shadow .4s var(--lux-ease), transform .5s var(--lux-ease), background .4s;
  opacity:0; visibility:hidden;
}
.cbd-pill.is-ready{ opacity:1; visibility:visible; }
/* top ridge highlight */
.cbd-pill::before{
  content:""; position:absolute; inset-inline:0; top:0; height:55%; border-radius:999px;
  background:linear-gradient(180deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,.12) 60%, transparent 100%);
  pointer-events:none;
}
/* gold gloss reflection */
.cbd-pill::after{
  content:""; position:absolute; left:16%; top:18%; width:60px; height:12px; border-radius:999px;
  background:radial-gradient(ellipse at center, rgba(229,208,152,.6) 0%, rgba(229,208,152,.1) 70%, transparent 100%);
  filter:blur(4px); transform:rotate(-12deg); pointer-events:none;
  transition:width .4s var(--lux-ease);
}
.cbd-pill:hover::after{ width:160px; }
.cbd-pill-inner{
  position:relative; z-index:2; height:100%;
  display:flex; align-items:center; padding:0 1.4rem;
  font-family:'Manrope',sans-serif;
}
/* brand mark — always present */
.cbd-pill-brand{
  display:inline-flex; align-items:baseline; gap:.4rem;
  font-family:'Italiana',serif; font-size:.95rem; letter-spacing:.06em; color: var(--cherry);
  white-space:nowrap;
}
.cbd-pill-brand-bd{
  font-family:'Manrope',sans-serif; font-size:.5rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.2em; color:var(--gold-dark);
}
.cbd-pill-sep{ width:1px; height:18px; background:rgba(139,111,53,.3); margin:0 .9rem; flex:0 0 auto; }
/* collapsed view */
.cbd-pill-collapsed{ display:inline-flex; align-items:center; }
.cbd-pill-active{
  font-size:.82rem; font-weight:680; color:var(--wine-bright);
  letter-spacing:.02em; white-space:nowrap;
  text-shadow:0 1px 0 rgba(255,255,255,.6);
}
/* expanded view (hidden until hover) */
.cbd-pill-expanded{
  display:none; align-items:center; gap:.2rem;
}
.cbd-pill.is-open .cbd-pill-collapsed{ display:none; }
.cbd-pill.is-open .cbd-pill-expanded{ display:inline-flex; }
.cbd-pill-brand--exp{ margin-right:.2rem; }
.cbd-pill-link{
  background:none; border:0; cursor:pointer;
  font-family:'Manrope',sans-serif; font-size:.8rem; font-weight:510; color:#9A7B36;
  letter-spacing:.02em; padding:.5rem .85rem; border-radius:999px; white-space:nowrap;
  transition:color .25s, transform .25s var(--lux-ease), background .25s;
  text-shadow:0 1px 0 rgba(255,255,255,.5);
}
.cbd-pill-link:hover{ color: var(--cherry); transform:translateY(-1px); background:rgba(201,169,97,.14); }
.cbd-pill-link.is-active{ color:var(--wine-bright); font-weight:700; }
/* hide on small screens (the bottom CTA bar already serves mobile) */
@media (max-width:768px){ .cbd-pill{ display:none; } }
@media (prefers-reduced-motion:reduce){ .cbd-pill{ transition:none; } }

/* ============================================================
   HERO IMPACT · cinematic intro curtain
   Adapted to wine/gold luxury.
   ============================================================ */
/* --- cinematic intro curtain --- */
.hero-curtain{
  position:absolute; inset:0; z-index:200; pointer-events:none;
  display:flex; align-items:center; justify-content:center;
}
.hero-curtain.is-done{ display:none; }
.hero-curtain-panel{
  position:absolute; left:0; right:0; height:50%;
  background:linear-gradient(180deg, #7A0712, #4E0610);
  will-change:transform;
  animation:cbdCurtain 1.5s cubic-bezier(.76,0,.24,1) .35s forwards;
}
.hero-curtain-top{ top:0; transform-origin:top; }
.hero-curtain-bottom{ bottom:0; transform-origin:bottom; }
.hero-curtain-top{ animation-name:cbdCurtainTop; }
.hero-curtain-bottom{ animation-name:cbdCurtainBottom; }
@keyframes cbdCurtainTop{ to{ transform:translateY(-100%); } }
@keyframes cbdCurtainBottom{ to{ transform:translateY(100%); } }
.hero-curtain-mark{
  position:relative; z-index:2; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
  animation:cbdCurtainMark 1.1s var(--lux-ease) forwards, cbdCurtainMarkOut .5s ease .95s forwards;
}
.hero-curtain-name{ font-family:'Italiana',serif; font-size:clamp(2.2rem,6vw,4rem); letter-spacing:.22em; color:var(--cream); }
.hero-curtain-sub{ font-family:'Manrope',sans-serif; font-size:.62rem; font-weight:600; text-transform:uppercase; letter-spacing:.4em; color:var(--gold-light); }
.hero-curtain-line{ width:0; height:1px; background:linear-gradient(90deg,transparent,var(--gold),transparent); animation:cbdCurtainLine 1s var(--lux-ease) .3s forwards; }
@keyframes cbdCurtainMark{ from{ opacity:0; transform:translateY(14px); filter:blur(8px);} to{ opacity:1; transform:none; filter:blur(0);} }
@keyframes cbdCurtainMarkOut{ to{ opacity:0; } }
@keyframes cbdCurtainLine{ to{ width:clamp(120px,18vw,260px); } }
@media (prefers-reduced-motion:reduce){
  .hero-curtain{ display:none; }
}

/* ============================================================
   3D POLAROID CLUSTER · ported from 3d-card.tsx
   Stacked photo cards with rotation + hover lift. Handwritten caption.
   ============================================================ */
.cbd-polaroids{
  position:relative; width:200px; height:230px; flex:0 0 auto;
  display:none;                            /* desktop-only flourish */
}
@media (min-width:900px){ .cbd-polaroids{ display:block; } }
.cbd-polaroid{
  position:absolute; width:150px; background:#fff; padding:8px 8px 4px;
  border-radius:5px; box-shadow:0 20px 45px -16px rgba(92,7,16,.5);
  transform:rotate(var(--rot)); cursor:pointer;
  transition:transform .35s var(--lux-ease), box-shadow .35s var(--lux-ease);
}
.cbd-polaroid--back{ top:18px; left:0; z-index:1; }
.cbd-polaroid--front{ top:6px; right:0; z-index:2; }
.cbd-polaroid:hover{ transform:rotate(calc(var(--rot) + 2deg)) scale(1.06); z-index:5; box-shadow:0 28px 60px -16px rgba(92,7,16,.6); }
.cbd-polaroid-img{ width:100%; aspect-ratio:3/3.4; overflow:hidden; border-radius:2px; background:var(--cream-100); }
.cbd-polaroid-img img{ width:100%; height:100%; object-fit:cover; transition:transform .4s var(--lux-ease); }
.cbd-polaroid:hover .cbd-polaroid-img img{ transform:scale(1.04); }
.cbd-polaroid-cap{
  font-family:'Cormorant Garamond',serif; font-style:italic; font-size:.85rem;
  color:var(--wine-mid); text-align:center; margin:.35rem 0 0; opacity:.75;
}

/* ============================================================
   ██ v28 · LUXURY POLISH + MOBILE HARDENING  ·  (carga al final)
   Anclado al rojo de marca #861F18. Arregla solapamientos en
   móvil, aligera el hero en pantallas pequeñas y eleva el
   acabado premium del equipo. Todo no destructivo.
   ============================================================ */

/* —— 0 · Antiscroll horizontal global (causa nº1 de "se sale la pantalla") —— */
html, body { max-width: 100%; overflow-x: hidden; }
*, *::before, *::after { min-width: 0; }

/* —— 1 · HERO · aligerar en móvil ——
   Las 3 capas canvas (shader 3D + partículas) son hermosas en desktop
   pero pesan y desbordan en móvil. Mantenemos el degradado de marca
   y ocultamos lo más pesado por debajo de 900px. */
@media (max-width: 900px){
  #cbd-3d-canvas,
  #cbd-particle-canvas { display: none !important; }
  /* Fondo de respaldo cálido para que el hero nunca quede vacío */
  .hero-v3::before{
    content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
    background:
      radial-gradient(120% 90% at 80% 0%, rgba(134,31,24,.10), transparent 60%),
      var(--grad-paper);
  }
}
/* Marca gigante "BEAUTY" del fondo: en móvil se contiene para no pisar texto */
@media (max-width: 768px){
  .hero-brand-mark{
    font-size: clamp(4.5rem, 30vw, 9rem) !important;
    width: 100%; overflow: hidden;
  }
  .hero-brand-mark .italic{ font-size:.42em; }
  /* anillos/líneas geométricas suaves para que no crucen el copy */
  .hero-geom-line-1, .hero-geom-line-2, .hero-geom-dot-cluster{ opacity:.25; }
}

/* —— 2 · EQUIPO · matar solapamientos de fillers en móvil ——
   En desktop los rótulos absolutos viven en los márgenes; en móvil
   caen sobre la foto/el texto. Los retiramos o reubicamos limpio. */
@media (max-width: 820px){
  .cbd-portrait-coord,
  .cbd-portrait-vlabel,
  .cbd-portrait-sign,
  .cbd-portrait-star{ display:none !important; }
  .cbd-portrait-bigname{
    font-size: clamp(3rem, 17vw, 6rem) !important;
    left:50% !important; transform:translateX(-50%) !important;
    width:100%; text-align:center; white-space:nowrap; overflow:hidden;
  }
  .cbd-portrait-question{
    position:static !important; transform:none !important;
    margin:.75rem auto 0; text-align:center;
  }
  .cbd-portrait-tag-1, .cbd-portrait-tag-2, .cbd-portrait-tag-3{
    position:static !important; display:inline-block; transform:none !important;
  }
  .cbd-portrait-stat{ position:static !important; margin:1rem auto 0; }
  .cbd-portrait-hero{ padding-top: 1.5rem; }
}

/* —— 3 · EQUIPO · realce LUXURY + más interactivo (todas las pantallas) —— */
/* 3.1 · Nombre gigante con relleno dorado degradado (vistosidad) */
.cbd-portrait-bigname{
  background: var(--grad-gold);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  opacity:.16; transition: opacity .6s var(--lux-ease, ease);
}
.cbd-portrait:hover .cbd-portrait-bigname{ opacity:.28; }

/* 3.2 · Marco de foto: aro dorado animado + profundidad al pasar el cursor */
.cbd-portrait-photo-frame{
  position:relative; isolation:isolate;
  transition: transform .6s var(--lux-ease, cubic-bezier(.16,1,.3,1)),
              box-shadow .6s var(--lux-ease, ease);
  box-shadow: 0 24px 60px -28px rgba(92,7,16,.55);
}
.cbd-portrait-photo-frame::after{
  content:""; position:absolute; inset:-2px; border-radius:inherit; z-index:-1;
  background: var(--grad-gold); background-size:200% 200%;
  opacity:0; transition:opacity .6s ease; animation: cbdGoldShift 6s linear infinite;
}
.cbd-portrait-photo-frame img{
  transition: transform .8s var(--lux-ease, cubic-bezier(.16,1,.3,1)), filter .8s ease;
  filter: saturate(.92) contrast(1.02);
}
.cbd-portrait:hover .cbd-portrait-photo-frame{
  transform: translateY(-6px);
  box-shadow: 0 40px 90px -30px rgba(134,31,24,.5);
}
.cbd-portrait:hover .cbd-portrait-photo-frame::after{ opacity:1; }
.cbd-portrait:hover .cbd-portrait-photo-frame img{ transform: scale(1.045); filter: saturate(1.05) contrast(1.04); }
@keyframes cbdGoldShift{ 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }

/* 3.3 · Subrayado de marca animado en el título de sección */
.cbd-team-h-mark{
  background: linear-gradient(var(--wine), var(--wine)) left bottom / 0% 2px no-repeat;
  transition: background-size .8s var(--lux-ease, ease);
}
.cbd-team-h:hover .cbd-team-h-mark,
.reveal.in .cbd-team-h-mark{ background-size: 100% 2px; }

/* 3.4 · Dossier: chips y card con tacto premium al hover */
.cbd-portrait-dossier{
  transition: transform .5s var(--lux-ease, ease), box-shadow .5s ease;
}
.cbd-portrait-dossier:hover{
  transform: translateY(-4px);
  box-shadow: 0 30px 70px -34px rgba(92,7,16,.45);
}
.cbd-portrait-chips li{ transition: transform .3s ease, background-color .3s ease, color .3s ease; }
.cbd-portrait-chips li:hover{
  transform: translateY(-2px);
  background: var(--wine); color: var(--cream);
}
@media (prefers-reduced-motion: reduce){
  .cbd-portrait-photo-frame::after{ animation:none; }
  .cbd-portrait-photo-frame, .cbd-portrait-photo-frame img, .cbd-portrait-dossier{ transition:none; }
}

/* —— 4 · COHESIÓN DE COLOR · degradados de marca en secciones oscuras —— */
/* Las secciones que eran rojo plano ahora respiran con el degradado oxblood. */
#metrics{ background: var(--grad-wine) !important; }
.cbd-show{ background: var(--grad-wine-rich) !important; }
.lux-manifesto{ background: var(--grad-wine) !important; }

/* Acento de marca: links/realces que aún usan el magenta antiguo se calientan */
::selection{ background: var(--wine); color: var(--cream); }

/* —— 5 · Tipografía móvil · evitar títulos que rebasan el contenedor —— */
@media (max-width: 480px){
  h1, h2, .headline-section, .headline-xl{ overflow-wrap: anywhere; }
}

/* ════════════════════════════════════════════════════════════
   AWARDS STRIP · reconocimiento internacional (luxury trust)
   ════════════════════════════════════════════════════════════ */
.cbd-awards {
  background:
    radial-gradient(80% 120% at 50% -20%, rgba(199,162,79,0.10), transparent 60%),
    var(--paper, #FEFDFC);
  padding: clamp(2.5rem, 6vw, 4.5rem) 1.25rem;
  border-top: 1px solid rgba(199,162,79,0.18);
  border-bottom: 1px solid rgba(199,162,79,0.18);
}
.cbd-awards-inner { max-width: 1100px; margin: 0 auto; text-align: center; }
.cbd-awards-eyebrow {
  display: inline-block; font-family: 'Manrope', 'Inter', sans-serif;
  font-size: 0.64rem; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--gold-dark, #9A7B36); margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
}
.cbd-awards-row {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 3vw, 2.5rem); align-items: start;
}
.cbd-award {
  display: flex; flex-direction: column; align-items: center; gap: 0.3rem;
  position: relative; padding: 0 0.5rem;
}
.cbd-award:not(:last-child)::after {
  content: ""; position: absolute; right: calc(-1 * clamp(0.5rem, 1.5vw, 1.25rem)); top: 18%; bottom: 18%;
  width: 1px; background: linear-gradient(to bottom, transparent, rgba(199,162,79,0.4), transparent);
}
.cbd-award-laurel {
  font-size: clamp(1.3rem, 3vw, 1.9rem); color: var(--gold, #C9A24E); line-height: 1;
  opacity: 0.85;
}
.cbd-award-laurel--r { display: none; } /* se mantiene simple: un solo laurel arriba */
.cbd-award-city {
  font-family: 'Italiana', serif; font-size: clamp(1.15rem, 3vw, 1.7rem);
  color: var(--wine, #861F18); line-height: 1.05; margin-top: 0.2rem;
}
.cbd-award-tag {
  font-family: 'Cormorant Garamond', serif; font-style: italic;
  font-size: clamp(0.78rem, 1.8vw, 0.95rem); color: var(--ink, #45070C); opacity: 0.66;
}
@media (max-width: 680px) {
  .cbd-awards-row { grid-template-columns: repeat(2, 1fr); gap: 1.75rem 1rem; }
  .cbd-award:nth-child(2)::after { display: none; }
}

/* ── Línea kinética unida dentro del manifiesto ── */
.lux-manifesto .lux-campaign-line {
  margin: clamp(1.5rem, 3.5vw, 2.5rem) 0 clamp(1.25rem, 3vw, 2rem);
  text-align: center;
  font-family: 'Italiana', serif;
  font-size: clamp(1.6rem, 4.5vw, 3rem);
  line-height: 1.15;
  color: var(--cream);
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 0.4em;
}
.lux-manifesto .lux-campaign-prefix { opacity: 0.92; }
.lux-manifesto .lux-campaign-rotate { position: relative; display: inline-block; min-width: 4ch; text-align: left; }
.lux-manifesto .lux-campaign-rotate-stage {
  background: linear-gradient(115deg, var(--gold-light), var(--gold) 55%, var(--gold-light));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  font-style: italic;
}

.lux-next-title-line2{ white-space:nowrap; }
@media (max-width:520px){ .lux-next-title-line2{ white-space:normal; } }

/* ════════ Justificado de prosa · LANDING (respeta textos centrados) ════════ */
.qs-lead, .qs-text, .lux-next-copy, .bb-prose p{
  text-align:justify; text-justify:inter-word; hyphens:auto; -webkit-hyphens:auto;
}
@media (max-width:600px){
  .qs-lead, .qs-text, .lux-next-copy, .bb-prose p{ text-align:left; hyphens:none; }
}