/* ============================================================
   CANEY EC — sistema Candelabro
   Fondo estático + llama procedural (única fuente de luz).
   Capas (de atrás hacia adelante):
     0  .caney-bg      fondo negro estático (no scrollea)
     1  .caney-words   palabras grises multilingües (parallax lento)
     2  .caney-candle  candelabro + vela + llama (el origen)
     3  .caney-light   luz que emana de la llama (blend screen)
     4+ .card          el contenido pasa POR ENCIMA de la luz
   ============================================================ */

:root{
  --candle-center-y: 46vh;           /* punto de la llama (pabilo) en el viewport */
  --candle-w: max(190px, min(36vmin, 430px));
}
@media (max-width: 768px){
  :root{ --candle-center-y: 48vh; }
}

/* ---------- capa 0: fondo estático ---------- */
.caney-bg{
  position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;
  background:radial-gradient(130% 100% at 50% 34%, #0c0a07 0%, #070605 48%, #040404 100%);
}

/* ---------- capa 1: palabras en gris, multilingüe ---------- */
.caney-words{position:absolute; inset:-12% 0; will-change:transform}
.caney-word{
  position:absolute; white-space:nowrap; user-select:none; pointer-events:none;
  color:#F7F5F0; font-weight:300; letter-spacing:.03em; line-height:1;
}
.caney-word.serif{font-family:'Fraunces', Georgia, serif; font-weight:400; font-style:italic; letter-spacing:0}

/* ---------- capa 2: candelabro (la fuente) ---------- */
.caney-candle{
  position:absolute;
  left:50%; top:var(--candle-center-y);
  width:var(--candle-w);
  height:calc(var(--candle-w) * 0.9882);
  transform:translate(-37.96%, -1.55%); /* el pabilo queda exactamente en el punto de luz */
}
.caney-candle img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:fill;
  filter:brightness(.94) contrast(1.03);
}

/* resplandor cercano de la llama */
.caney-flame-glow{
  position:absolute; left:37.96%; top:1.55%;
  width:calc(var(--candle-w) * 1.35); height:calc(var(--candle-w) * 1.35);
  transform:translate(-50%, -88%);
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,208,132,.9) 0%, rgba(255,186,96,.42) 34%, rgba(255,168,78,.16) 58%, rgba(255,160,70,0) 74%);
  filter:blur(4px);
  will-change:opacity, transform;
  animation:cf-glow 2.4s ease-in-out infinite;
}
@keyframes cf-glow{
  0%,100%{transform:translate(-50%,-88%) scale(1)}
  38%{transform:translate(-51.2%,-89%) scale(1.07)}
  64%{transform:translate(-48.8%,-87%) scale(.96)}
  82%{transform:translate(-50.4%,-88.6%) scale(1.03)}
}

/* llama procedural: anclada en el pabilo, se deforma sola (feTurbulence + feDisplacementMap) */
.caney-flame{
  position:absolute; left:37.96%; top:1.55%;
  width:calc(var(--candle-w) * 0.135);
  height:calc(var(--candle-w) * 0.245);
  transform-origin:50% 100%;
  transform:translate(-50%, -98%);
  filter:drop-shadow(0 0 14px rgba(255,170,60,.55));
  animation:cf-dance 3.7s ease-in-out infinite;
  will-change:transform;
}
@keyframes cf-dance{
  0%{transform:translate(-50%,-98%) scale(1,1)}
  14%{transform:translate(-51.6%,-99.4%) scale(.982,1.045)}
  31%{transform:translate(-48.9%,-97.6%) scale(1.03,.962)}
  47%{transform:translate(-50.9%,-98.8%) scale(.99,1.052)}
  63%{transform:translate(-49.2%,-99.8%) scale(1.022,.972)}
  80%{transform:translate(-50.6%,-97.2%) scale(.986,1.028)}
  100%{transform:translate(-50%,-98%) scale(1,1)}
}
@media (prefers-reduced-motion: reduce){
  .caney-flame, .caney-flame-glow, .caney-light-core{animation:none}
}

/* ---------- capa 3: la luz de la vela (debajo del contenido) ---------- */
.caney-light{
  position:absolute;
  left:50%; top:var(--candle-center-y);
  width:max(85vmin, 680px); height:max(85vmin, 680px);
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle,
    rgba(255,216,150,.5) 0%,
    rgba(255,198,112,.3) 26%,
    rgba(255,182,86,.14) 48%,
    rgba(255,178,80,.05) 66%,
    rgba(255,172,74,0) 80%);
  mix-blend-mode:screen;
  will-change:opacity, transform;
}
.caney-light-core{
  position:absolute; inset:0; border-radius:50%;
  background:radial-gradient(circle, rgba(255,226,170,.55) 0%, rgba(255,210,140,.22) 30%, rgba(255,190,100,0) 55%);
  animation:cf-light-flicker 2.9s ease-in-out infinite;
}
@keyframes cf-light-flicker{
  0%,100%{opacity:.8}
  22%{opacity:1}
  47%{opacity:.72}
  68%{opacity:.95}
  84%{opacity:.85}
}

/* ---------- contenido: las diapositivas pasan por encima de la luz ---------- */
.card{z-index:4}

/* ---------- hero estático (sobre el fondo de la vela) ---------- */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  padding-top:14vh; text-align:center;
}
.hero-overlay{position:relative; max-width:880px; padding:0 24px}
.hero-kicker{font-size:12px; letter-spacing:.14em; text-transform:uppercase; opacity:.85; margin-bottom:16px}
.hero-overlay h1{font-family:'Fraunces', Georgia, serif; font-size:clamp(44px,7vw,96px); line-height:.95; margin-bottom:18px}
.hero-overlay p{max-width:560px; margin:0 auto 28px; opacity:.95}
.hero-actions{display:flex; gap:12px; justify-content:center}
.hero-scroll-hint{position:absolute; bottom:24px; left:50%; transform:translateX(-50%); font-size:11px; letter-spacing:.2em; text-transform:uppercase; opacity:.5}

/* ---------- diapositiva (video o foto grande que cruza la luz) ---------- */
.slide{padding:0 24px var(--air, 64px)}
.slide-card{
  position:relative;
  max-width:min(1080px, 94vw); margin:0 auto;
  overflow:hidden; border-radius:10px;
}
.slide-card video, .slide-card img{
  width:100%; aspect-ratio:16/9; object-fit:cover; display:block;
  filter:grayscale(1);
}
.slide-caption{
  position:absolute; left:0; right:0; bottom:0; padding:28px;
  background:linear-gradient(to top, rgba(0,0,0,.78), transparent);
  text-align:left;
}
.slide-caption h1{font-family:'Fraunces', Georgia, serif; font-size:clamp(28px,4vw,44px); margin-bottom:6px}
.slide-caption p{opacity:.85; max-width:640px}
@media (max-width: 768px){
  .slide{padding:0 16px 48px}
  .slide-card{border-radius:8px}
}