/* ============================================================
   CBD · ATMÓSFERA CROMÁTICA
   Sistema de unión visual entre secciones de la landing.
   Objetivo: que la página se sienta como UNA experiencia
   continua — vino (autoridad/profundidad) + ivory/beige
   (calidez editorial) + oro (detalle fino), sin cortes bruscos.
   Inspirado en degradados orgánicos bicolor (ref. wallpapers).
   100% CSS · sin imágenes · responsive.
   ============================================================ */

/* ---- Costuras de transición (puente cromático entre bloques) ----
   Se insertan como tiras finas entre una sección clara y una oscura.
   No solapan texto: son elementos propios, a pantalla completa.        */
.cbd-tx{
  display:block; width:100%; margin:0; padding:0; border:0; line-height:0;
  pointer-events:none; position:relative; z-index:0;
  height:clamp(80px, 10vw, 150px);
}

/* claro → oscuro (la sección clara se hunde con elegancia hacia el vino) */
.cbd-tx--l2d{
  background:linear-gradient(to bottom,
    var(--beige-warm,#EFE5D3) 0%,
    #DCC0B2 36%,                    /* puente cálido apagado (rosa-taupe), no rojo vivo */
    var(--wine-mid,#6E0518) 80%,
    var(--seam-wine,#4E0610) 100%);
}

/* oscuro → claro (el vino emerge hacia la calidez ivory) */
.cbd-tx--d2l{
  background:linear-gradient(to bottom,
    var(--seam-wine,#4E0610) 0%,
    var(--wine-mid,#6E0518) 20%,
    #DCC0B2 64%,                    /* mismo puente cálido apagado */
    var(--beige-warm,#EFE5D3) 100%);
}

/* hilo dorado finísimo dentro de la costura (firma visual, muy discreto) */
.cbd-tx::after{
  content:""; position:absolute; left:50%; transform:translateX(-50%);
  width:min(180px,42%); height:1px; opacity:.5;
  background:linear-gradient(90deg, transparent, var(--gold,#C9A24E), transparent);
}
.cbd-tx--l2d::after{ top:34%; }
.cbd-tx--d2l::after{ bottom:34%; }

/* ---- Florituras orgánicas (manchas suaves, fluidas) ----
   Capas decorativas a nivel de FONDO (no compiten con el texto).
   Se montan dentro de secciones claras para romper el "demasiado blanco"
   con calidez vino/oro/beige muy tenue, en formas amplias y orgánicas.  */
.cbd-organic{ position:relative; }
.cbd-organic > *{ position:relative; z-index:1; }
.cbd-organic::before,
.cbd-organic::after{
  content:""; position:absolute; z-index:0; pointer-events:none;
  border-radius:50% 50% 48% 52% / 55% 48% 52% 45%;
  filter:blur(2px);
}
/* blob cálido superior-derecha */
.cbd-organic::before{
  width:min(46vw,560px); aspect-ratio:1.15/1; top:-8%; right:-10%;
  background:radial-gradient(closest-side, rgba(122,7,18,.06), transparent 78%);
}
/* blob beige inferior-izquierda */
.cbd-organic::after{
  width:min(40vw,500px); aspect-ratio:1.2/1; bottom:-6%; left:-12%;
  background:radial-gradient(closest-side, rgba(201,162,78,.07), transparent 80%);
}

/* variante con presencia un poco mayor (p. ej. The Nails Lounge) */
.cbd-organic--soft::before{ background:radial-gradient(closest-side, rgba(122,7,18,.08), transparent 78%); }
.cbd-organic--soft::after{ background:radial-gradient(closest-side, rgba(201,162,78,.10), transparent 80%); }

/* ---- Responsive: tiras más finas y blobs contenidos en móvil ---- */
@media (max-width:768px){
  .cbd-tx{ height:clamp(48px, 12vw, 80px); }
  .cbd-organic::before{ width:72vw; right:-22%; }
  .cbd-organic::after{ width:66vw; left:-24%; }
}
@media (prefers-reduced-motion:reduce){
  .cbd-organic::before,.cbd-organic::after{ filter:none; }
}
/* ════════════════════════════════════════════════════════════
   CBD · LUXE FX — efectos opt-in de alto nivel (awards-level)
   Aditivos y de bajo riesgo: no alteran el layout, solo capa
   visual. Inspirado en illuminated-hero (glow), progressive-blur
   y elegant-shapes. Adaptado a la paleta vino/dorado.
   ════════════════════════════════════════════════════════════ */

/* ── Illuminated glow: halo suave y pulsante tras un titular ── */
.fx-glow {
  position: relative;
  text-shadow:
    0 0 18px rgba(197, 163, 90, 0.0);
  animation: fxGlowPulse 6s ease-in-out infinite;
}
@keyframes fxGlowPulse {
  0%, 100% { text-shadow: 0 0 22px rgba(197, 163, 90, 0.10), 0 0 42px rgba(168, 47, 68, 0.05); }
  50%      { text-shadow: 0 0 34px rgba(197, 163, 90, 0.26), 0 0 70px rgba(168, 47, 68, 0.12); }
}
/* Variante para titulares sobre fondo oscuro (más intensa) */
.fx-glow--on-dark {
  animation: fxGlowPulseDark 6s ease-in-out infinite;
}
@keyframes fxGlowPulseDark {
  0%, 100% { text-shadow: 0 0 26px rgba(230, 211, 160, 0.18), 0 0 60px rgba(197, 163, 90, 0.10); }
  50%      { text-shadow: 0 0 44px rgba(230, 211, 160, 0.42), 0 0 96px rgba(197, 163, 90, 0.22); }
}

/* ── Progressive blur: degradado de desenfoque en bordes de sección ──
   Se apila sobre el contenido en una franja; crea una transición
   "frosted" sofisticada entre secciones. Pointer-events none. */
.fx-progressive-blur-bottom,
.fx-progressive-blur-top {
  position: absolute; left: 0; right: 0; z-index: 4;
  height: clamp(56px, 9vw, 120px);
  pointer-events: none;
}
.fx-progressive-blur-bottom { bottom: 0; }
.fx-progressive-blur-top { top: 0; }
/* Tres capas de blur creciente = blur progresivo real */
.fx-progressive-blur-bottom::before,
.fx-progressive-blur-bottom::after,
.fx-progressive-blur-top::before,
.fx-progressive-blur-top::after {
  content: ""; position: absolute; inset: 0;
}
.fx-progressive-blur-bottom::before {
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  -webkit-mask-image: linear-gradient(to top, #000 0%, #000 40%, transparent 75%);
          mask-image: linear-gradient(to top, #000 0%, #000 40%, transparent 75%);
}
.fx-progressive-blur-bottom::after {
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  -webkit-mask-image: linear-gradient(to top, #000 0%, #000 18%, transparent 45%);
          mask-image: linear-gradient(to top, #000 0%, #000 18%, transparent 45%);
}
.fx-progressive-blur-top::before {
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 40%, transparent 75%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 40%, transparent 75%);
}
.fx-progressive-blur-top::after {
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 18%, transparent 45%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 18%, transparent 45%);
}

/* ── Elegant floating shapes: formas suaves que derivan en el fondo ──
   Colócalas dentro de un contenedor position:relative; overflow:hidden. */
.fx-shapes { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.fx-shape {
  position: absolute; border-radius: 50%;
  filter: blur(40px); opacity: 0.5;
  will-change: transform;
}
.fx-shape--gold { background: radial-gradient(circle, rgba(197,163,90,0.5), transparent 70%); }
.fx-shape--wine { background: radial-gradient(circle, rgba(134,31,24,0.4), transparent 70%); }
.fx-shape--rose { background: radial-gradient(circle, rgba(168,47,68,0.35), transparent 70%); }
.fx-shape-1 { width: 42vw; height: 42vw; top: -8%; left: -6%; animation: fxDrift1 22s ease-in-out infinite; }
.fx-shape-2 { width: 30vw; height: 30vw; bottom: -10%; right: -4%; animation: fxDrift2 28s ease-in-out infinite; }
.fx-shape-3 { width: 22vw; height: 22vw; top: 40%; left: 60%; animation: fxDrift3 25s ease-in-out infinite; }
@keyframes fxDrift1 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(6%, 8%) scale(1.08); } }
@keyframes fxDrift2 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-7%, -6%) scale(1.12); } }
@keyframes fxDrift3 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-5%, 7%) scale(0.92); } }

@media (prefers-reduced-motion: reduce) {
  .fx-glow, .fx-glow--on-dark, .fx-shape { animation: none !important; }
}