/* ================================================================
   LUMIÈRE — MAIN CSS v3
   ================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400;1,600&family=Cinzel:wght@400;600;700&family=DM+Sans:wght@300;400;500&family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Dancing+Script:wght@400;600;700&family=Bebas+Neue&family=Rajdhani:wght@300;400;600&display=swap');

:root {
  --gold:#C9A84C; --gold-l:#E8C96A; --gold-d:#8B6914;
  --inv-bg:#0A0608; --inv-mid:#110D10;
  --salon-bg:#202020; --salon-accent:#f4670d; --salon-white:#fff;
  --text:#F5EDD8; --text-muted:#9B8E7A;
  --btn-color:#C9A84C; --btn-text:#0A0608;
  --font-display:'Cormorant Garamond',serif;
  --font-title:'Cinzel',serif;
  --font-body:'DM Sans',sans-serif;
  --font-script:'Dancing Script',cursive;
  --ease-smooth:cubic-bezier(.25,.46,.45,.94);
  --ease-bounce:cubic-bezier(.34,1.56,.64,1);
  --flip-color:#C9A84C;
  --pre-bg:#0A0608; --pre-detail:#C9A84C;
  --sep-color:#C9A84C;
  --ticker-color:#C9A84C;
  --ticker-bg:rgba(201,168,76,0.06);
  --flecha-color:#C9A84C;
  --flecha-fin-color:#C9A84C;
  --wa-icon-color:#ffffff;
  --ig-icon-color:#ffffff;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);background:var(--inv-bg);color:var(--text);overflow-x:hidden;cursor:none}
img{max-width:100%;display:block}
button{border:none;background:none;cursor:none;font-family:inherit}
a{text-decoration:none;color:inherit}

/* ── CURSOR ── */
#cursor{width:10px;height:10px;background:var(--gold);border-radius:50%;position:fixed;pointer-events:none;z-index:99999;transform:translate(-50%,-50%);transition:transform .08s,opacity .2s;mix-blend-mode:screen}
#cursor-ring{width:32px;height:32px;border:1px solid rgba(201,168,76,.5);border-radius:50%;position:fixed;pointer-events:none;z-index:99998;transform:translate(-50%,-50%);transition:all .18s var(--ease-smooth)}
body.cursor-hover #cursor{transform:translate(-50%,-50%) scale(2.5);opacity:.5}
body.cursor-hover #cursor-ring{transform:translate(-50%,-50%) scale(.5);opacity:0}

/* ── PRELOADER ── */
#preloader{position:fixed;top:0;left:0;right:0;bottom:0;width:100%;height:100%;z-index:99990;background:var(--pre-bg,#0A0608);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;transition:opacity .8s,visibility .8s}
#preloader.hidden{opacity:0;visibility:hidden;pointer-events:none}
.preloader-logo-img{max-height:56px;max-width:180px;object-fit:contain;margin-bottom:.5rem}
.preloader-logo-text{font-size:clamp(1.4rem,4vw,2.2rem);color:var(--pre-detail);letter-spacing:.4em;text-transform:uppercase}
.preloader-sub{font-size:.52rem;letter-spacing:.4em;color:var(--pre-detail);opacity:.45;text-transform:uppercase;margin-top:.4rem}
.preloader-bar-wrap{width:180px;height:1px;background:rgba(255,255,255,.06);overflow:hidden;margin-top:.8rem}
.preloader-bar-fill{height:100%;background:var(--pre-detail);transform:translateX(-100%);animation:preBarFill 2.2s ease forwards}
.preloader-dots{display:flex;gap:.6rem;margin-top:.8rem}
.preloader-dots span{width:8px;height:8px;border-radius:50%;background:var(--pre-detail);animation:dotPulse 1.2s ease infinite}
.preloader-dots span:nth-child(2){animation-delay:.2s}.preloader-dots span:nth-child(3){animation-delay:.4s}
.preloader-spinner{width:38px;height:38px;border:2px solid rgba(255,255,255,.07);border-top-color:var(--pre-detail);border-radius:50%;animation:spinA 1s linear infinite;margin-top:.8rem}
@keyframes preBarFill{to{transform:translateX(0)}}
@keyframes dotPulse{0%,80%,100%{transform:scale(.6);opacity:.4}40%{transform:scale(1);opacity:1}}
@keyframes spinA{to{transform:rotate(360deg)}}
.pre-pulse .preloader-logo-text,.pre-pulse .preloader-logo-img{animation:prePulse 1s ease infinite}
@keyframes prePulse{0%,100%{opacity:1}50%{opacity:.3}}

/* ── CANVAS LAYERS ── */
/* z-index map:
   0  = body bg
   1  = welcome-bg (canvas + img)
   2  = welcome overlay gradient
   5  = particles-canvas (FIXED, always on top of bg)
   6  = welcome-content
   15 = transition zone
   20 = transition-canvas
   100= welcome-screen (the whole thing)
   200= envelope overlay
*/
#particles-canvas{
  position:absolute;inset:0;
  pointer-events:none;
  z-index:3;          /* above bg(1) + overlay(2), below content(6) */
  width:100%;height:100%;
}
#transition-canvas{position:fixed;inset:0;pointer-events:none;z-index:20;opacity:0;transition:opacity .1s}

/* ================================================================
   MUNDO 1 — WELCOME
   ================================================================ */
#welcome-screen{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;transition:opacity .9s,transform .9s}
#welcome-screen.revealing{opacity:0;transform:scale(1.04);pointer-events:none}
#welcome-screen.hidden{display:none}

/* Background layers */
#welcome-bg{position:absolute;inset:0;z-index:1}
#welcome-bg-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1}
#welcome-bg-img{position:absolute;inset:0;width:100%;height:120%;object-fit:cover;opacity:.4;z-index:1;display:none}
.welcome-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,6,8,.05) 0%,rgba(10,6,8,.55) 70%,rgba(10,6,8,.97) 100%);z-index:2;pointer-events:none}

/* Content sits above particles (z:6) */
.welcome-content{position:relative;z-index:6;text-align:center;display:flex;flex-direction:column;align-items:center;gap:1.2rem;padding:2rem;width:100%;max-width:580px}

/* Photo */
.welcome-photo-wrap{animation:fadeIn 1.2s ease .3s both}
.photo-medallion{position:relative;width:150px;height:150px}
.photo-medallion img,.photo-medallion .photo-ph{width:150px;height:150px;border-radius:50%;object-fit:cover;border:3px solid var(--foto-borde,#C9A84C);box-shadow:0 0 0 8px rgba(201,168,76,.06),0 0 50px rgba(201,168,76,.25)}
.photo-medallion::before{content:'';position:absolute;inset:-10px;border-radius:50%;border:1px dashed var(--foto-borde-a,.35);animation:spinA 22s linear infinite}
.photo-medallion::after{content:'';position:absolute;inset:-20px;border-radius:50%;border:1px solid var(--foto-borde-b,.12);animation:spinA 38s linear infinite reverse}
.photo-polaroid{background:#fff;padding:12px 12px 38px;box-shadow:0 20px 60px rgba(0,0,0,.5);transform:rotate(-2deg);animation:polaroidDrop 1s var(--ease-bounce) .3s both;position:relative}
.photo-polaroid img,.photo-polaroid .photo-ph{width:140px;height:140px;object-fit:cover}
.photo-polaroid-name{position:absolute;bottom:8px;left:0;right:0;text-align:center;font-family:var(--font-script);color:#333;font-size:1rem}
@keyframes polaroidDrop{0%{opacity:0;transform:rotate(-2deg) translateY(-30px)}100%{opacity:1;transform:rotate(-2deg) translateY(0)}}
.photo-revelado img,.photo-revelado .photo-ph{width:150px;height:150px;border-radius:50%;object-fit:cover;border:3px solid var(--foto-borde,#C9A84C);box-shadow:0 0 50px rgba(201,168,76,.3);filter:blur(18px);opacity:.3;animation:revelado 2.8s ease .5s forwards}
@keyframes revelado{to{filter:blur(0);opacity:1}}
/* ── Foto Libre — sin círculo, sin borde ── */
.photo-libre{display:flex;align-items:center;justify-content:center}
.photo-libre img{
  width:220px;
  max-width:80vw;
  height:auto;
  border-radius:0;
  border:none;
  object-fit:cover;
  box-shadow:none;
  animation:revelado 2.2s ease .5s both
}
.photo-libre .photo-ph{
  width:220px;height:220px;
  border-radius:0;border:none;
  display:flex;align-items:center;justify-content:center;
  font-size:4rem
}
.photo-holograma img,.photo-holograma .photo-ph{width:150px;height:150px;border-radius:50%;object-fit:cover;border:2px solid var(--foto-borde,#C9A84C);animation:glitch 4s ease infinite}
@keyframes glitch{0%,90%,100%{transform:translate(0);filter:hue-rotate(0deg)}91%{transform:translate(-2px,1px);filter:hue-rotate(90deg)}93%{transform:translate(2px,-1px);filter:hue-rotate(180deg)}97%{transform:translate(1px,-2px);filter:hue-rotate(360deg)}}
.photo-iniciales{width:150px;height:150px;border-radius:50%;background:linear-gradient(135deg,#1a0a14,#2a1020);border:2px solid var(--gold);display:flex;align-items:center;justify-content:center}
.photo-iniciales span{font-family:var(--font-title);font-size:3rem;color:var(--gold)}
.photo-ph{background:linear-gradient(135deg,#1a0a14,#2a1020);display:flex;align-items:center;justify-content:center;font-size:2.5rem}

/* Name */
.welcome-name{font-family:var(--font-display);font-size:clamp(2.4rem,8vw,5rem);font-weight:300;line-height:1.1;letter-spacing:.04em}
.welcome-name em{font-style:italic;display:block}
.welcome-name.anim-blur{filter:blur(14px);opacity:0;animation:nameBlur 2s ease .8s forwards}
.welcome-name.anim-fade{opacity:0;transform:translateY(28px);animation:nameFade 1s ease .8s forwards}
.welcome-name.anim-fixed{animation:fadeIn .5s ease .5s both}
@keyframes nameBlur{to{filter:blur(0);opacity:1}}
@keyframes nameFade{to{opacity:1;transform:translateY(0)}}

.welcome-years{font-family:var(--font-title);font-size:.78rem;color:var(--gold);letter-spacing:.4em;animation:fadeInUp 1s ease 1.1s both}
.welcome-phrase{font-family:var(--font-display);font-style:italic;font-size:1.05rem;color:var(--text-muted);animation:fadeInUp 1s ease 1.3s both}

/* Btn reveal */
.btn-reveal{
  padding:1rem 3rem;
  background:var(--btn-m1-fondo,transparent);
  border:1px solid var(--btn-m1-borde,#C9A84C);
  color:var(--btn-m1-texto,#C9A84C);
  font-family:var(--btn-m1-font,var(--font-title));font-weight:var(--btn-m1-weight,inherit);
  font-size:.7rem;letter-spacing:.35em;text-transform:uppercase;
  position:relative;overflow:hidden;transition:color .4s;
  cursor:pointer;
}
.btn-reveal::before{content:'';position:absolute;inset:0;background:var(--btn-m1-borde,#C9A84C);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease-smooth);z-index:0}
.btn-reveal span{position:relative;z-index:1}
.btn-reveal.efecto-fill:hover{color:var(--btn-m1-fill-text,#0A0608)}
.btn-reveal.efecto-fill:hover::before{transform:scaleX(1)}
.btn-reveal.efecto-glow:hover{box-shadow:0 0 20px var(--btn-m1-borde,#C9A84C);transform:scale(1.02)}
.btn-reveal.efecto-outline:hover{letter-spacing:.5em;transition:letter-spacing .4s}
.btn-reveal.efecto-none:hover{opacity:.7}

/* Salon footer logo */
.salon-footer-logo{position:absolute;bottom:1.5rem;left:50%;transform:translateX(-50%);z-index:6;text-align:center;animation:fadeIn 2s ease 2s both;display:flex;flex-direction:column;align-items:center;gap:.35rem}
.salon-footer-logo img{height:28px;max-width:120px;object-fit:contain;opacity:.5}
.salon-footer-logo-text{font-family:var(--font-title);font-size:.48rem;letter-spacing:.4em;color:rgba(201,168,76,.38);text-transform:uppercase}

.btn-share-w1{position:absolute;bottom:1.5rem;left:2rem;z-index:6;width:36px;height:36px;border-radius:50%;border:1px solid rgba(201,168,76,.25);background:rgba(0,0,0,.5);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;font-size:.9rem;cursor:pointer;transition:all .3s;animation:fadeIn 2s ease 2.5s both}
.btn-share-w1:hover{border-color:var(--gold);background:rgba(201,168,76,.15)}

/* ── ENVELOPE ── */
#envelope-overlay{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;background:rgba(10,6,8,.96);opacity:0;pointer-events:none;transition:opacity .5s}
#envelope-overlay.active{opacity:1;pointer-events:all}
.envelope-wrap{position:relative;width:min(380px,90vw);perspective:800px}
.envelope-body{width:100%;padding-top:62%;position:relative;box-shadow:0 40px 80px rgba(0,0,0,.8);border-radius:2px}
.envelope-flap{position:absolute;top:0;left:0;right:0;height:55%;clip-path:polygon(0 0,50% 100%,100% 0);transform-origin:top;transition:transform 1s var(--ease-smooth)}
.envelope-flap.open{transform:rotateX(-180deg)}
.envelope-seal{position:absolute;top:52%;left:50%;transform:translate(-50%,-50%);width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-title);font-size:1.2rem;z-index:5;transition:transform .4s,opacity .4s;overflow:hidden}
.envelope-seal img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.envelope-seal.broken{transform:translate(-50%,-50%) scale(0) rotate(180deg);opacity:0}
.envelope-letter{position:absolute;bottom:0;left:5%;right:5%;height:90%;transform:translateY(100%);transition:transform 1.2s .8s var(--ease-smooth);display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#f5edd8,#ede3cc)}
.envelope-letter.rising{transform:translateY(20%)}
.envelope-letter span{font-family:var(--font-title);font-size:.7rem;letter-spacing:.3em;color:#0A0608;text-transform:uppercase}

/* ================================================================
   MUNDO 2 — INVITATION
   ================================================================ */
#invitation{display:none;position:relative;z-index:10;background:var(--inv-bg)}
#invitation.visible{display:block}

/* Ticker */
.ticker-wrap{width:100%;background:var(--ticker-bg);border-top:1px solid rgba(201,168,76,.1);border-bottom:1px solid rgba(201,168,76,.1);padding:.55rem 0;overflow:hidden;position:sticky;top:0;z-index:55}
.ticker-content{display:flex;gap:4rem;animation:ticker 32s linear infinite;white-space:nowrap;will-change:transform}
.ticker-item{font-family:var(--ticker-font,var(--font-title));font-size:.57rem;letter-spacing:.4em;color:var(--ticker-color);text-transform:uppercase;font-weight:var(--ticker-weight,inherit)}
@keyframes ticker{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* Hero Portal — two modes */
.inv-hero{position:relative;height:100vh;overflow:visible;display:flex;align-items:center;justify-content:center}
.inv-hero-bg{position:absolute;inset:0;display:none;overflow:hidden}
.inv-hero-img{width:100%;height:120%;object-fit:cover;position:absolute;top:-10%;will-change:transform;display:none}
.inv-hero-overlay{position:absolute;top:-10%;bottom:-10%;left:0;right:0;background:linear-gradient(180deg,rgba(10,6,8,.15) 0%,rgba(10,6,8,.5) 40%,rgba(10,6,8,.97) 100%);display:none}
.inv-hero-content{position:relative;z-index:2;text-align:center;padding:2rem;width:100%;max-width:700px;display:flex;flex-direction:column;align-items:center}

/* Mode: circulo */
.inv-photo-ring{position:relative;width:180px;height:180px;margin:0 auto 1.5rem}
.inv-photo-ring::before{content:'';position:absolute;inset:-8px;border-radius:50%;border:1px dashed rgba(201,168,76,.35);animation:spinA 25s linear infinite}
.inv-photo-ring::after{content:'';position:absolute;inset:-18px;border-radius:50%;border:1px solid rgba(201,168,76,.12);animation:spinA 40s linear infinite reverse}
.inv-photo-ring img{width:180px;height:180px;border-radius:50%;object-fit:cover;border:3px solid var(--gold);box-shadow:0 0 60px rgba(201,168,76,.25)}

/* Mode: hero parallax — foto de fondo */
.inv-hero.hero-mode .inv-photo-ring{display:none}
.inv-hero.hero-mode .inv-hero-bg{display:block}
.inv-hero.hero-mode .inv-hero-img{display:block}
.inv-hero.hero-mode .inv-hero-overlay{display:block;top:-10%;bottom:-10%;left:0;right:0;background:linear-gradient(180deg,rgba(10,6,8,.2) 0%,rgba(10,6,8,.6) 50%,rgba(10,6,8,.98) 100%)}

.inv-hero-name{font-family:var(--font-display);font-size:clamp(3rem,9vw,7rem);font-weight:300;line-height:.95;margin-bottom:.5rem}
.inv-hero-name em{font-style:italic;color:var(--gold-l);display:block}
.inv-hero-years{font-family:var(--font-title);font-size:.75rem;letter-spacing:.5em;color:var(--gold);text-transform:uppercase;margin-top:.6rem;display:block}
.inv-hero-frase{font-family:var(--font-display);font-size:1.05rem;color:#9B8E7A;margin-top:.6rem;font-style:italic;opacity:.9}

/* Flecha desliza bajo nombre */
/* removed-dup */
/* removed-dup */
/* removed-dup */
/* removed-dup */

/* Separador configurable */
.ornament{display:flex;align-items:center;gap:1rem;margin:2.5rem auto;width:fit-content;justify-content:center}
.ornament-icon{color:var(--sep-color);font-size:.85rem;flex-shrink:0}

/* sep-linea: simple thin line */
.sep-linea::before,.sep-linea::after{content:'';width:80px;height:1px;background:var(--sep-color);opacity:.45}

/* sep-doble: two lines */
.sep-doble{flex-direction:column;gap:.25rem}
.sep-doble .sep-inner{display:flex;align-items:center;gap:.8rem}
.sep-doble .sep-inner::before,.sep-doble .sep-inner::after{content:'';flex:1;min-width:50px;height:1px;background:var(--sep-color);opacity:.35}

/* sep-simbolo: lines fading into center icon */
.sep-simbolo::before,.sep-simbolo::after{content:'';width:60px;height:1px;background:linear-gradient(90deg,transparent,var(--sep-color));opacity:.7}
.sep-simbolo::after{background:linear-gradient(90deg,var(--sep-color),transparent)}

/* sep-puntos: three dots */
.sep-puntos{gap:.5rem}
.sep-puntos::before,.sep-puntos::after{content:'·  ·  ·';color:var(--sep-color);opacity:.5;font-size:.7rem;letter-spacing:.2em}
.sep-puntos .ornament-icon{display:none}

/* sep-diamante: ◆ with lines */
.sep-diamante::before,.sep-diamante::after{content:'';width:50px;height:1px;background:linear-gradient(90deg,transparent,var(--sep-color));opacity:.6}
.sep-diamante::after{background:linear-gradient(90deg,var(--sep-color),transparent)}

/* sep-ola: wavy line SVG via background */
.sep-ola{height:12px;width:120px;overflow:visible}
.sep-ola::before{content:'';display:block;width:100%;height:12px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12'%3E%3Cpath d='M0 6 Q15 0 30 6 Q45 12 60 6 Q75 0 90 6 Q105 12 120 6' fill='none' stroke='%23C9A84C' stroke-width='1' opacity='0.6'/%3E%3C/svg%3E") center/contain no-repeat}
.sep-ola .ornament-icon{display:none}

/* sep-rama: botanical leaf icon */
.sep-rama::before,.sep-rama::after{content:'';width:45px;height:1px;background:linear-gradient(90deg,transparent,var(--sep-color));opacity:.55}
.sep-rama::after{background:linear-gradient(90deg,var(--sep-color),transparent)}

/* sep-none */
.sep-none{display:none!important}

/* Countdown */
.countdown-section{padding:4rem 2rem;text-align:center}
.countdown-label{font-family:var(--font-title);font-size:.6rem;letter-spacing:.5em;color:var(--gold);text-transform:uppercase;margin-bottom:2.5rem;display:block}
/* ── FLIP CLOCK — model: flip (default) ── */
.flip-clock{display:flex;justify-content:center;align-items:center;gap:.8rem;flex-wrap:wrap;min-height:110px}
.flip-unit{text-align:center;display:flex;flex-direction:column;align-items:center}
.flip-card{position:relative;width:80px;height:90px;margin-bottom:.4rem}
.flip-top,.flip-bottom{position:absolute;left:0;right:0;height:50%;overflow:hidden;background:var(--clock-fondo,#1a0d17);border:1px solid var(--clock-borde,rgba(201,168,76,.15))}
.flip-top{top:0;border-radius:4px 4px 0 0;border-bottom:1px solid var(--clock-borde,rgba(201,168,76,.35));display:flex;align-items:flex-end;justify-content:center;padding-bottom:2px}
.flip-bottom{bottom:0;border-radius:0 0 4px 4px;display:flex;align-items:flex-start;justify-content:center;padding-top:2px}
.flip-top span,.flip-bottom span{font-family:'Rajdhani',sans-serif;font-size:clamp(1.8rem,5vw,2.6rem);font-weight:600;color:var(--flip-color,#C9A84C);line-height:1}
.flip-sep{font-family:var(--font-display);font-size:2.5rem;color:var(--clock-borde,rgba(201,168,76,.4));align-self:center;margin-bottom:1.4rem}
.flip-label{font-family:var(--font-title);font-size:.47rem;letter-spacing:.38em;color:var(--text-muted);text-transform:uppercase}
.flip-card.flipping .flip-top{animation:flipTop .3s ease forwards}
.flip-card.flipping .flip-bottom{animation:flipBot .3s ease .3s forwards}

/* ── CLOCK MODEL: minimal (grandes números sin tarjeta) ── */
.flip-clock.clock-minimal .flip-card{background:none;width:auto;height:auto}
.flip-clock.clock-minimal .flip-top,.flip-clock.clock-minimal .flip-bottom{position:static;height:auto;background:none;border:none;display:inline;padding:0}
.flip-clock.clock-minimal .flip-bottom{display:none}
.flip-clock.clock-minimal .flip-top{display:block}
.flip-clock.clock-minimal .flip-top span{font-family:'Cormorant Garamond',serif;font-size:clamp(3rem,8vw,5.5rem);font-weight:300;font-style:italic;color:var(--flip-color,#C9A84C);line-height:1}
.flip-clock.clock-minimal .flip-sep{font-size:clamp(2rem,6vw,4rem);margin-bottom:2rem;opacity:.4}
.flip-clock.clock-minimal .flip-label{font-size:.42rem;letter-spacing:.4em;margin-top:.2rem}

/* ── CLOCK MODEL: circular (número + arco SVG animado) ── */
.flip-clock.clock-circular{gap:1.2rem}
.flip-clock.clock-circular .flip-card{width:84px;height:84px;border-radius:50%;background:var(--clock-fondo,rgba(26,13,23,.8));border:2px solid var(--clock-borde,rgba(201,168,76,.2));display:flex;align-items:center;justify-content:center}
.flip-clock.clock-circular .flip-top,.flip-clock.clock-circular .flip-bottom{position:static;height:auto;background:none;border:none;display:none;padding:0}
.flip-clock.clock-circular .flip-top{display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.flip-clock.clock-circular .flip-top span{font-family:'Rajdhani',sans-serif;font-size:clamp(1.4rem,4vw,2rem);font-weight:700;color:var(--flip-color,#C9A84C);line-height:1}
.flip-clock.clock-circular .flip-sep{font-size:1.5rem;margin-bottom:1.6rem;opacity:.3}
.flip-clock.clock-circular .flip-label{font-size:.42rem;letter-spacing:.35em;margin-top:.3rem}
.flip-clock.clock-circular .flip-card.flipping{animation:circPulse .6s ease}
@keyframes circPulse{0%{transform:scale(1)}50%{transform:scale(1.08)}100%{transform:scale(1)}}
@keyframes flipTop{to{transform:rotateX(-90deg)}}
@keyframes flipBot{from{transform:rotateX(90deg)}to{transform:rotateX(0)}}

/* Inv sections */
.inv-section{padding:4rem 2rem;max-width:650px;margin:0 auto}
.section-eyebrow{font-family:var(--eyebrow-font,var(--font-title));font-weight:var(--eyebrow-weight,inherit);font-size:var(--eyebrow-size,.57rem);letter-spacing:.5em;color:var(--eyebrow-color,var(--gold));text-transform:uppercase;display:block;margin-bottom:1.5rem;text-align:center}

/* Event cards — 3 */
/* ── Event cards — scroll-driven unstack effect ── */
.event-cards{
  display:grid;
  grid-template-columns:1fr;
  gap:0;
  background:transparent;
  border:none;
  position:relative;
  /* height needed so scroll has room to work */
  height:420px;
}
.event-card{
  position:absolute;
  left:0; right:0;
  background:var(--card-fondo,var(--inv-mid));
  border:1px solid var(--card-borde,rgba(201,168,76,.15));
  border-radius:16px;
  padding:2.2rem 2rem;
  text-align:center;
  transform-origin:top center;
  will-change:transform,opacity;
  box-shadow:0 8px 32px rgba(0,0,0,.35);
  transition:box-shadow .3s ease;
}
/* Stack initial positions — all cards overlap, offset slightly */
.event-card:nth-child(1){ top:0;   z-index:3; }
.event-card:nth-child(2){ top:12px; z-index:2; transform:scale(0.96); }
.event-card:nth-child(3){ top:24px; z-index:1; transform:scale(0.92); }
.event-card-icon{font-size:2rem;margin-bottom:.9rem;display:block}
.event-card-label{font-family:var(--font-title);font-size:.49rem;letter-spacing:.35em;color:var(--card-label-color,var(--text-muted));text-transform:uppercase;margin-bottom:.5rem;display:block}
.event-card-value{font-family:var(--font-display);font-size:1.6rem;color:var(--card-value-color,var(--gold-l));display:block;line-height:1.1}
.event-card-sub{font-size:.8rem;color:var(--card-label-color,var(--text-muted));margin-top:.2rem;display:block}
/* Card reveal effects */
.card-reveal-fade .event-card{opacity:0;transition:opacity .7s,transform .7s,background .4s}
.card-reveal-fade .event-card.in-view{opacity:1}
.card-reveal-slide .event-card{opacity:0;transform:translateY(28px);transition:opacity .7s,transform .7s,background .4s}
.card-reveal-slide .event-card.in-view{opacity:1;transform:translateY(0)}
.card-reveal-scale .event-card{opacity:0;transform:scale(.88);transition:opacity .7s,transform .7s,background .4s}
.card-reveal-scale .event-card.in-view{opacity:1;transform:scale(1)}
.card-reveal-flip .event-card{opacity:0;transform:rotateX(30deg);transition:opacity .8s,transform .8s,background .4s}
.card-reveal-flip .event-card.in-view{opacity:1;transform:rotateX(0)}
.card-reveal-none .event-card{opacity:1;transform:none}

/* Generic inv btn */
.btn-inv{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.8rem;padding:.85rem 2rem;background:transparent;border:1px solid var(--btn-color);color:var(--btn-color);font-family:var(--font-title);font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;cursor:pointer;transition:all .3s;position:relative;overflow:hidden;text-decoration:none}
.btn-inv::before{content:'';position:absolute;inset:0;background:var(--btn-inv-hover-bg,var(--btn-color,#C9A84C));transform:scaleX(0);transform-origin:left;transition:transform .3s;z-index:0}
.btn-inv:hover::before{transform:scaleX(1)}
.btn-inv:hover{color:var(--btn-inv-hover-text,var(--btn-text,#0A0608))}
.btn-inv span{position:relative;z-index:1}

/* ── RSVP & Compartir — efectos hover configurables ── */
/* Asistiré */
.rsvp-yes.efecto-fill:hover,.rsvp-yes.efecto-fill.selected{background:var(--btn-color);color:var(--rsvp-si-fill-text,#0A0608)}
.rsvp-yes.efecto-glow:hover{box-shadow:0 0 22px var(--btn-color);transform:scale(1.03);background:transparent}
.rsvp-yes.efecto-expand:hover{letter-spacing:.4em;background:transparent}
.rsvp-yes.efecto-none:hover{opacity:.7;background:transparent}
/* No podré */
.rsvp-no.efecto-fill:hover,.rsvp-no.efecto-fill.selected{background:rgba(255,255,255,.13);color:var(--text-light,#F5EDD8)}
.rsvp-no.efecto-glow:hover{box-shadow:0 0 18px rgba(255,255,255,.25);transform:scale(1.03)}
.rsvp-no.efecto-expand:hover{letter-spacing:.4em}
.rsvp-no.efecto-none:hover{opacity:.7}
/* Compartir (btn-inv) */
.btn-inv.efecto-fill::before{transform:scaleX(0);transform-origin:left;transition:transform .3s}
.btn-inv.efecto-fill:hover::before{transform:scaleX(1)}
.btn-inv.efecto-fill:hover{color:var(--btn-inv-hover-text,var(--btn-text,#0A0608))}
.btn-inv.efecto-glow::before{display:none}
.btn-inv.efecto-glow:hover{box-shadow:0 0 22px var(--btn-color);transform:scale(1.03);color:inherit}
.btn-inv.efecto-expand::before{display:none}
.btn-inv.efecto-expand:hover{letter-spacing:.5em;color:inherit}
.btn-inv.efecto-none::before{display:none}
.btn-inv.efecto-none:hover{opacity:.7;color:inherit}

/* Map */
.map-section{text-align:center}
.map-icon-wrap{position:relative;width:160px;height:180px;margin:2rem auto;display:flex;align-items:center;justify-content:center}
.map-icon-wrap img.map-custom-icon{width:90px;height:90px;object-fit:contain;position:relative;z-index:2;animation:floatAnim 3s ease infinite}
.map-pulse-ring{position:absolute;border-radius:50%;border:2px solid var(--ubicacion-pulso,#C9A84C);top:50%;left:50%;transform:translate(-50%,-50%)}
.map-pulse-ring.r1{width:100px;height:100px;animation:mapPulse 2s ease infinite}
.map-pulse-ring.r2{width:140px;height:140px;animation:mapPulse 2.6s ease .5s infinite}
@keyframes mapPulse{0%{opacity:.6;transform:translate(-50%,-50%) scale(.7)}100%{opacity:0;transform:translate(-50%,-50%) scale(1)}}
.map-pin-svg-wrap{width:110px;height:170px;margin:0 auto;animation:floatAnim 3s ease infinite;position:relative;z-index:2}
.map-venue-name{font-family:var(--font-title);font-size:.62rem;letter-spacing:.3em;color:var(--gold);text-transform:uppercase;margin-bottom:.4rem;display:block}
.map-address{font-family:var(--font-display);font-size:1.15rem;font-style:italic;color:var(--text);margin-bottom:1.2rem}

/* Dress code */
.dresscode-section{text-align:center;padding:4rem 2rem;position:relative;overflow:hidden}
.dresscode-bg-glow{position:absolute;inset:0;pointer-events:none}
.dresscode-icon-wrap{width:110px;height:110px;margin:1.5rem auto;animation:floatAnim 3.5s ease infinite;position:relative;z-index:2;display:flex;align-items:center;justify-content:center}
.dresscode-icon-wrap img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 8px 20px rgba(201,168,76,.3))}
.dresscode-icon-placeholder{font-size:3.5rem;filter:drop-shadow(0 8px 20px rgba(201,168,76,.3))}
.dresscode-text{font-family:var(--font-display);font-style:italic;font-size:1rem;color:var(--text-muted);max-width:400px;margin:1rem auto 0;line-height:1.8;position:relative;z-index:2}

/* RSVP */
.rsvp-section{padding:3rem 2rem;max-width:400px;margin:0 auto;text-align:center}
.rsvp-btns{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1.5rem}
.rsvp-yes,.rsvp-no{padding:1.1rem 1rem;border:1px solid;background:transparent;cursor:pointer;font-family:var(--font-title);font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;transition:all .3s}
.rsvp-yes{border-color:var(--btn-color);color:var(--btn-color)}
.rsvp-no{border-color:rgba(255,255,255,.15);color:var(--text-muted)}
/* rsvp efecto-fill (default) */
.rsvp-yes:hover,.rsvp-yes.selected{background:var(--btn-color);color:var(--btn-text)}
.rsvp-no:hover,.rsvp-no.selected{background:rgba(255,255,255,.07);color:var(--text)}
.rsvp-message{margin-top:.8rem;font-family:var(--font-display);font-style:italic;font-size:1.05rem;color:var(--gold-l);opacity:0;transition:opacity .5s;min-height:1.5rem}
.rsvp-message.visible{opacity:1}

/* Flecha final — hacia mundo 3 */
/* removed-dup */
/* removed-dup */
/* removed-dup */

/* ── TRANSITION ZONE ── */
#transition-zone{position:relative;height:350px;z-index:15}

/* ================================================================
   MUNDO 3 — SALON
   ================================================================ */
#salon-world{position:relative;z-index:10;background:var(--salon-bg)}

/* Hero Carousel */
.salon-hero{position:relative;height:100vh;overflow:hidden}
.carousel-track{position:absolute;inset:0}
.carousel-slide{position:absolute;inset:0;opacity:0;transition:opacity 1.2s}
.carousel-slide.active{opacity:1}
.carousel-slide img{width:100%;height:115%;object-fit:cover;position:absolute;top:-5%}
.carousel-slide-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(32,32,32,.2) 0%,rgba(32,32,32,.9) 100%)}
.carousel-content{position:absolute;bottom:10%;left:50%;transform:translateX(-50%);z-index:2;text-align:center;width:90%;max-width:700px}
.salon-hero-eyebrow{font-family:var(--font-title);font-size:.6rem;letter-spacing:.6em;color:var(--salon-accent);text-transform:uppercase;margin-bottom:1.2rem;display:block}
.salon-hero-title{font-family:var(--font-display);font-size:clamp(2.5rem,7vw,5.5rem);font-weight:300;color:var(--salon-white);margin-bottom:.8rem;line-height:1}
.salon-hero-title em{font-style:italic;color:var(--hero-em-color,var(--salon-accent))}
.salon-hero-sub{font-size:.95rem;color:rgba(255,255,255,.5)}
.carousel-dots{display:flex;justify-content:center;gap:.5rem;margin-top:1.8rem}
.c-dot{width:28px;height:2px;background:rgba(255,255,255,.2);cursor:pointer;transition:all .3s}
.c-dot.active{background:var(--dot-active-color,var(--salon-accent));width:44px}
.carousel-arrows{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:100%;display:flex;justify-content:space-between;padding:0 1.5rem;pointer-events:none}
.carousel-arrow{width:44px;height:44px;border:1px solid rgba(244,103,13,.35);background:rgba(32,32,32,.6);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;cursor:pointer;pointer-events:all;transition:all .3s;color:var(--salon-accent);font-size:1.2rem}
.carousel-arrow:hover{border-color:var(--salon-accent);background:rgba(244,103,13,.15)}

/* Counters */
.counters-section{padding:5rem 2rem;background:#1a1a1a}
.counters-eyebrow{font-family:var(--font-title);font-size:.6rem;letter-spacing:.5em;color:var(--salon-accent);text-transform:uppercase;text-align:center;display:block;margin-bottom:2.5rem}
.counters-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:2px;max-width:900px;margin:0 auto;background:rgba(244,103,13,.07)}
.counter-item{background:#1a1a1a;padding:3rem 2rem;text-align:center;position:relative;overflow:hidden;transition:background .3s}
.counter-item::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--counter-line-color,var(--salon-accent));transform:scaleX(0);transition:transform .6s}
.counter-item.in-view::after{transform:scaleX(1)}
.counter-num{font-family:'Bebas Neue',sans-serif;font-size:clamp(3rem,8vw,5rem);color:var(--counter-num-color,var(--salon-accent));line-height:1;display:block}
.counter-label{font-family:var(--counter-label-font,var(--font-title));font-weight:var(--counter-label-weight,inherit);font-size:.52rem;letter-spacing:.4em;color:rgba(255,255,255,.4);text-transform:uppercase;margin-top:.5rem;display:block}

/* ── SERVICIOS DEL SALÓN ── */
.servicios-section{padding:4.5rem 2rem 3.5rem;background:var(--bg,#0A0608);overflow:hidden}
.servicios-section.empty{display:none}

.servicios-header{text-align:center;margin-bottom:3rem}
.servicios-eyebrow{
  font-family:var(--serv-eyebrow-font,var(--font-title));font-weight:var(--serv-eyebrow-weight,inherit);
  color:var(--serv-eyebrow-color,#C9A84C);
  font-size:.58rem;letter-spacing:.55em;text-transform:uppercase;display:inline-block
}

/* Two-column grid with center divider */
.servicios-grid{
  max-width:780px;margin:0 auto;
  display:grid;
  grid-template-columns:1fr 2px 1fr;
  gap:0;
  position:relative
}

/* Center divider line */
.servicios-divider{
  grid-column:2;
  grid-row:1 / -1;
  background:linear-gradient(to bottom,
    transparent 0%,
    rgba(201,168,76,.35) 15%,
    rgba(201,168,76,.35) 85%,
    transparent 100%);
  width:1px;margin:0 auto;
  align-self:stretch
}

/* Left column items */
.servicios-col-left{
  grid-column:1;
  display:flex;flex-direction:column;gap:0
}
/* Right column items */
.servicios-col-right{
  grid-column:3;
  display:flex;flex-direction:column;gap:0
}

/* Each service item */
.servicio-item{
  display:flex;align-items:center;gap:.9rem;
  padding:.9rem 1.4rem;
  opacity:0;
  transition:opacity .7s cubic-bezier(.16,1,.3,1),
             transform .7s cubic-bezier(.16,1,.3,1)
}
.servicios-col-left  .servicio-item{
  justify-content:flex-end;
  transform:translateX(-28px);
  flex-direction:row-reverse
}
.servicios-col-right .servicio-item{
  justify-content:flex-start;
  transform:translateX(28px)
}
.servicio-item.in-view{opacity:1;transform:translateX(0)}

/* Icon */
.servicio-icon{
  width:2rem;height:2rem;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  color:var(--serv-icon-color,#C9A84C);
  transition:transform .3s
}
.servicio-item:hover .servicio-icon{transform:scale(1.15)}
.servicio-icon img,.servicio-icon svg{
  width:1.4rem;height:1.4rem;
  object-fit:contain;
  filter:var(--serv-icon-filter,none)
}

/* Label */
.servicio-label{
  font-family:var(--serv-label-font,var(--font-title));font-weight:var(--serv-label-weight,inherit);
  color:var(--serv-label-color,#F5EDD8);
  font-size:.6rem;letter-spacing:.18em;
  text-transform:uppercase;white-space:nowrap
}

/* Mobile: drum roll picker */
@media(max-width:640px){
  .servicios-grid{display:none}
  .servicios-slot{display:block}
}
@media(min-width:641px){
  .servicios-slot{display:none}
}

/* Drum roll wheel container */
.servicios-slot{
  position:relative;
  height:260px;
  overflow:hidden;
  touch-action:none;
  user-select:none;
  -webkit-user-select:none
}

/* Top & bottom gradient fade masks */
.servicios-slot::before,.servicios-slot::after{
  content:'';
  position:absolute;left:0;right:0;
  z-index:3;pointer-events:none
}
.servicios-slot::before{
  top:0;height:90px;
  background:linear-gradient(to bottom,
    var(--bg,#0A0608) 0%,
    rgba(10,6,8,.6) 60%,
    transparent 100%)
}
.servicios-slot::after{
  bottom:0;height:90px;
  background:linear-gradient(to top,
    var(--bg,#0A0608) 0%,
    rgba(10,6,8,.6) 60%,
    transparent 100%)
}


/* The scrolling track — JS sets translateY */
.slot-track{
  position:absolute;
  left:0;right:0;top:0;bottom:0;
  /* Items are individually positioned by JS */
}

/* Each drum item — JS controls position/opacity/scale via inline style */
.slot-item{
  position:absolute;
  left:0;right:0;
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:center;
  gap:.8rem;
  height:52px;
  will-change:transform,opacity,filter
}

.slot-item .servicio-icon{
  width:1.4rem;height:1.4rem;
  display:flex;align-items:center;justify-content:center;
  color:var(--serv-icon-color,#C9A84C);
  flex-shrink:0
}
.slot-item .servicio-icon svg,
.slot-item .servicio-icon img{
  width:1.2rem;height:1.2rem;object-fit:contain
}
.slot-item .servicio-label{
  font-family:var(--serv-label-font,var(--font-title));
  color:var(--serv-label-color,#F5EDD8);
  font-size:.62rem;letter-spacing:.22em;
  text-transform:uppercase;white-space:nowrap
}

/* ── SECTORES DEL SALÓN ── */
.sectores-section{padding:4rem 0 3rem;background:var(--bg,#0A0608);overflow:hidden}
.sectores-eyebrow-wrap{text-align:center;margin-bottom:2.5rem}
.sectores-eyebrow{
  font-family:var(--sectores-eyebrow-font,var(--font-title));font-weight:var(--sectores-eyebrow-weight,inherit);
  color:var(--sectores-eyebrow-color,#C9A84C);
  font-size:.58rem;letter-spacing:.55em;text-transform:uppercase;display:inline-block
}

/* Showcase track */
.sectores-showcase{
  position:relative;width:100%;height:480px;
  display:flex;align-items:center;justify-content:center;
  perspective:1200px
}
@media(max-width:600px){.sectores-showcase{height:320px}}

/* Each slide */
.sector-slide{
  position:absolute;
  width:min(72vw,520px);height:100%;
  border-radius:12px;overflow:hidden;
  cursor:pointer;
  transition:transform .65s cubic-bezier(.16,1,.3,1),
             opacity .65s cubic-bezier(.16,1,.3,1),
             filter .65s cubic-bezier(.16,1,.3,1),
             z-index 0s .1s;
  will-change:transform,opacity;
  user-select:none
}
/* States */
.sector-slide.s-active{
  transform:translateX(0) scale(1) rotateY(0deg);
  opacity:1;filter:none;z-index:3;cursor:default
}
.sector-slide.s-prev{
  transform:translateX(-62%) scale(.82) rotateY(18deg);
  opacity:.55;filter:brightness(.6);z-index:2
}
.sector-slide.s-next{
  transform:translateX(62%) scale(.82) rotateY(-18deg);
  opacity:.55;filter:brightness(.6);z-index:2
}
.sector-slide.s-far-prev{
  transform:translateX(-90%) scale(.68) rotateY(28deg);
  opacity:.2;filter:brightness(.4);z-index:1
}
.sector-slide.s-far-next{
  transform:translateX(90%) scale(.68) rotateY(-28deg);
  opacity:.2;filter:brightness(.4);z-index:1
}
.sector-slide.s-hidden{transform:translateX(0) scale(.5);opacity:0;z-index:0;pointer-events:none}

/* Photo with Ken Burns */
.sector-slide img{
  width:100%;height:100%;object-fit:cover;
  display:block;
  transform-origin:center center;
  transition:transform 8s ease-in-out
}
.sector-slide.s-active img{transform:scale(1.08)}
.sector-slide:not(.s-active) img{transform:scale(1)}

/* Gradient + label */
.sector-label-wrap{
  position:absolute;bottom:0;left:0;right:0;
  padding:2.5rem 1.5rem 1.2rem;
  background:linear-gradient(to top,rgba(10,6,8,.92) 0%,rgba(10,6,8,.5) 60%,transparent 100%);
  transform:translateY(6px);opacity:0;
  transition:transform .5s cubic-bezier(.16,1,.3,1),opacity .5s;
}
.sector-slide.s-active .sector-label-wrap{transform:translateY(0);opacity:1;transition-delay:.15s}
.sector-label{
  display:block;
  font-family:var(--sectores-label-font,var(--font-title));font-weight:var(--sectores-label-weight,inherit);
  color:var(--sectores-label-color,#F5EDD8);
  font-size:.72rem;letter-spacing:.35em;text-transform:uppercase;
  text-shadow:0 2px 12px rgba(0,0,0,.6)
}
.sector-counter{
  display:block;margin-top:.25rem;
  font-size:.42rem;letter-spacing:.3em;
  color:var(--sectores-eyebrow-color,#C9A84C);opacity:.8
}

/* Navigation */
.sectores-nav{
  display:flex;align-items:center;justify-content:center;
  gap:1.2rem;margin-top:1.8rem
}
.sectores-prev,.sectores-next{
  background:transparent;border:1px solid rgba(201,168,76,.35);
  color:var(--sectores-eyebrow-color,#C9A84C);
  width:2.2rem;height:2.2rem;border-radius:50%;
  font-size:1rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .3s,border-color .3s,transform .2s
}
.sectores-prev:hover,.sectores-next:hover{
  background:rgba(201,168,76,.12);border-color:rgba(201,168,76,.8);
  transform:scale(1.1)
}
.sectores-dots{display:flex;gap:.5rem;align-items:center}
.s-dot{
  width:.42rem;height:.42rem;border-radius:50%;
  background:rgba(201,168,76,.3);border:none;cursor:pointer;
  transition:background .3s,transform .3s
}
.s-dot.active{background:var(--sectores-eyebrow-color,#C9A84C);transform:scale(1.4)}

/* Hide section if no slides */
.sectores-section.empty{display:none}

/* CTA — preview mode: skip transitions, force visible */
.cta-section.cta-no-anim .cta-title,
.cta-section.cta-no-anim .cta-sub,
.cta-section.cta-no-anim .btn-whatsapp,
.cta-section.cta-no-anim .social-row{
  opacity:1 !important;
  transform:none !important;
  transition:none !important;
}

/* CTA */
.cta-section{padding:5rem 2rem;text-align:center;position:relative;overflow:hidden}
.cta-title,.cta-sub,.cta-section .btn-whatsapp,.cta-section .social-row{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .85s cubic-bezier(.16,1,.3,1), transform .85s cubic-bezier(.16,1,.3,1)
}
.cta-sub{ transition-delay:.15s }
.cta-section .btn-whatsapp{ transition-delay:.28s }
.cta-section .social-row{ transition-delay:.42s }
.cta-section.cta-visible .cta-title,
.cta-section.cta-visible .cta-sub,
.cta-section.cta-visible .btn-whatsapp,
.cta-section.cta-visible .social-row{
  opacity:1;
  transform:translateY(0)
}
.cta-glow{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:600px;height:300px;background:var(--salon-accent);border-radius:50%;filter:blur(120px);opacity:.04;pointer-events:none}
.cta-eyebrow{font-family:var(--font-title);font-size:.6rem;letter-spacing:.5em;color:var(--salon-accent);text-transform:uppercase;margin-bottom:1.2rem;display:block}
.cta-title{font-family:var(--font-display);font-size:clamp(2rem,5vw,3.5rem);font-weight:300;color:var(--salon-white);margin-bottom:.8rem}
.cta-sub{font-size:.95rem;color:rgba(255,255,255,.4);margin-bottom:2.2rem}
.btn-whatsapp{
  display:inline-flex;align-items:center;gap:.8rem;
  padding:1rem 2.5rem;
  background:var(--btn-wa-fondo,#f4670d);
  color:var(--btn-wa-texto,#fff);
  border:1px solid var(--btn-wa-borde,transparent);
  font-family:var(--btn-wa-font,var(--font-title));font-weight:var(--btn-wa-weight,inherit);
  font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;
  cursor:pointer;transition:all .3s;position:relative;overflow:hidden;text-decoration:none;
}
.btn-whatsapp::before{content:'';position:absolute;inset:0;background:rgba(255,255,255,.12);transform:scaleX(0);transform-origin:left;transition:transform .3s;z-index:0}
.btn-whatsapp svg,.btn-whatsapp span{position:relative;z-index:1}
/* Efecto fill (default) */
.btn-whatsapp.efecto-fill:hover::before{transform:scaleX(1)}
.btn-whatsapp.efecto-fill:hover{transform:translateY(-2px);color:var(--btn-wa-fill-text,#ffffff)}
/* Efecto glow */
.btn-whatsapp.efecto-glow:hover{box-shadow:0 0 28px var(--btn-wa-fondo,#f4670d);transform:scale(1.02)}
.btn-whatsapp.efecto-glow::before{display:none}
/* Efecto outline/expand */
.btn-whatsapp.efecto-outline:hover{letter-spacing:.5em;transition:letter-spacing .4s}
.btn-whatsapp.efecto-outline::before{display:none}
/* Efecto none */
.btn-whatsapp.efecto-none:hover{opacity:.8;transform:none}
.btn-whatsapp.efecto-none::before{display:none}
.social-row{display:flex;justify-content:center;gap:1.5rem;margin-top:2rem}
.social-icon{width:48px;height:48px;border:1px solid var(--social-icon-borde,rgba(244,103,13,.25));display:flex;align-items:center;justify-content:center;font-size:1.2rem;text-decoration:none;transition:all .3s}
.social-icon:hover{border-color:var(--salon-accent);transform:translateY(-3px);box-shadow:0 8px 20px rgba(244,103,13,.2)}
.social-icon svg{transition:fill .3s}
.social-icon.si-wa svg{fill:var(--wa-icon-color)}
.social-icon.si-ig svg{fill:var(--ig-icon-color)}

/* Footer */
.site-footer{padding:2.5rem 2rem;background:#111;border-top:1px solid rgba(244,103,13,.07)}
.footer-inner{max-width:900px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:1rem;text-align:center}
.footer-logo-wrap img{max-height:26px;max-width:110px;object-fit:contain;opacity:.3}
.footer-logo-text{font-family:var(--font-title);font-size:.5rem;letter-spacing:.5em;color:rgba(255,255,255,.22);text-transform:uppercase}
.footer-copy{font-size:.75rem;color:rgba(255,255,255,.18)}
.footer-dev{font-size:.72rem;color:rgba(255,255,255,.16)}
.footer-dev a{color:var(--footer-dev-color,var(--salon-accent));transition:opacity .3s}
.footer-dev a:hover{opacity:.7}
.footer-links{display:flex;gap:1.5rem}
.footer-link{font-family:var(--font-title);font-size:.5rem;letter-spacing:.3em;color:rgba(255,255,255,.2);text-transform:uppercase;cursor:pointer;transition:color .3s}
.footer-link:hover{color:var(--footer-link-hover,var(--salon-accent))}

/* Modal */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.88);z-index:9000;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .3s}
.modal-overlay.open{opacity:1;pointer-events:all}
.modal-box{background:#1c1c1c;border:1px solid rgba(244,103,13,.12);max-width:580px;width:90%;max-height:80vh;overflow-y:auto;padding:2.5rem;position:relative}
.modal-title{font-family:var(--font-title);font-size:.85rem;letter-spacing:.3em;color:var(--salon-accent);text-transform:uppercase;margin-bottom:1.5rem}
.modal-text{font-size:.88rem;color:rgba(255,255,255,.5);line-height:1.9}
.modal-close{position:absolute;top:1rem;right:1rem;background:none;border:1px solid rgba(244,103,13,.3);color:var(--salon-accent);width:32px;height:32px;cursor:pointer;font-size:1rem;display:flex;align-items:center;justify-content:center;transition:all .3s}
.modal-close:hover{background:var(--salon-accent);color:#fff}

/* Scroll reveal */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .8s,transform .8s}
.reveal.in-view{opacity:1;transform:translateY(0)}
.reveal-d1{transition-delay:.12s}.reveal-d2{transition-delay:.24s}.reveal-d3{transition-delay:.36s}
/* Fade-only reveal — softer entrance for CTA elements */
.reveal-fade{opacity:0;transform:translateY(18px) scale(0.97);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)}
.reveal-fade.in-view{opacity:1;transform:translateY(0) scale(1)}


/* ── SVG Ring Clock ── */
#flip-clock-container.clock-svg-ring{
  gap:1.2rem;flex-wrap:wrap;min-height:unset;align-items:center
}
#flip-clock-container.clock-svg-ring .flip-unit{
  position:relative;width:100px;height:100px;
  display:flex;align-items:center;justify-content:center
}
#flip-clock-container.clock-svg-ring .ring-svg{
  position:absolute;top:0;left:0;width:100%;height:100%;
  transform:rotate(-90deg)
}
#flip-clock-container.clock-svg-ring .ring-track{
  fill:none;
  stroke:var(--clock-borde,rgba(201,168,76,.2));
  stroke-width:4
}
#flip-clock-container.clock-svg-ring .ring-progress{
  fill:none;
  stroke:var(--ring-trazo,var(--clock-color,#C9A84C));
  stroke-width:4;
  stroke-linecap:round;
  transition:stroke-dashoffset .6s cubic-bezier(.4,0,.2,1)
}
#flip-clock-container.clock-svg-ring .ring-inner{
  display:flex;flex-direction:column;align-items:center;
  justify-content:center;z-index:1
}
#flip-clock-container.clock-svg-ring .ring-num{
  font-size:1.8rem;font-weight:var(--clock-weight,300);line-height:1;
  color:var(--clock-color,#C9A84C);
  font-family:var(--clock-font,var(--font-display))
}
#flip-clock-container.clock-svg-ring .ring-label{
  font-size:.5rem;font-weight:var(--clock-weight,inherit);letter-spacing:.18em;text-transform:uppercase;
  color:var(--clock-color,#C9A84C);opacity:.7;margin-top:.2rem;
  font-family:var(--clock-font,var(--font-display))
}
/* "Hoy es el gran día" message */
.ring-grand-day{
  display:none;text-align:center;
  font-family:var(--clock-font,var(--font-display));
  color:var(--clock-color,#C9A84C);
  font-size:clamp(1.2rem,4vw,2rem);
  font-weight:300;letter-spacing:.08em;
  animation:ringGrandDay 1.2s cubic-bezier(.16,1,.3,1) forwards
}
@keyframes ringGrandDay{
  from{opacity:0;transform:translateY(16px) scale(.95)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

/* Music */
#music-toggle{position:fixed;bottom:2rem;left:2rem;z-index:500;width:44px;height:44px;border-radius:50%;border:1px solid rgba(201,168,76,.3);background:rgba(10,6,8,.8);backdrop-filter:blur(10px);display:none;align-items:center;justify-content:center;cursor:pointer;transition:all .3s}
#music-toggle.visible{display:flex}
#music-toggle:hover{border-color:var(--gold)}
.music-wave{display:flex;gap:2px;align-items:center}
.music-wave span{width:3px;background:var(--gold);border-radius:2px;animation:waveAnim .8s ease infinite}
.music-wave span:nth-child(1){height:8px}.music-wave span:nth-child(2){height:14px;animation-delay:.1s}.music-wave span:nth-child(3){height:10px;animation-delay:.2s}.music-wave span:nth-child(4){height:16px;animation-delay:.15s}
@keyframes waveAnim{0%,100%{transform:scaleY(.5)}50%{transform:scaleY(1)}}
#music-toggle.playing .music-icon{display:none}
#music-toggle.playing .music-wave{display:flex}
#music-toggle:not(.playing) .music-icon{display:block;font-size:1.1rem;color:var(--gold)}
#music-toggle:not(.playing) .music-wave{display:none}

/* Easter */
#easter-burst{position:fixed;inset:0;pointer-events:none;z-index:9998}

/* Shared anims */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeInUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes floatAnim{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

/* Responsive */
@media(max-width:768px){
  .flip-card{width:62px;height:72px}.flip-top span,.flip-bottom span{font-size:1.8rem}
  .event-cards{grid-template-columns:1fr}.counters-grid{grid-template-columns:1fr 1fr}
  .salon-hero{height:85vh}.carousel-arrow{width:36px;height:36px;font-size:1rem}
  .rsvp-btns{grid-template-columns:1fr}
}
@media(max-width:480px){
  .inv-hero{height:90vh}.flip-clock{gap:.4rem}
  .flip-card{width:52px;height:62px}.flip-top span,.flip-bottom span{font-size:1.5rem}
  .counters-grid{grid-template-columns:1fr 1fr}
}

/* ================================================================
   PATCHES v4
   ================================================================ */

/* ── M2 BACKGROUND LAYER (independent from M1) ── */
#inv-bg-layer {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  display: none; /* shown when invitation visible */
}
#invitation.visible #inv-bg-layer { display: block; }
#inv-bg-color {
  position: absolute; inset: 0;
  background: transparent;
}
#inv-bg-img {
  position: absolute; inset: 0; width: 100%; height: 115%;
  object-fit: cover; top: -5%; display: none;
}
#inv-bg-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,6,8,.45) 0%, rgba(10,6,8,.75) 100%);
}

/* Ensure invitation content sits above bg layer */
#invitation .ticker-wrap,
#invitation .inv-hero,
#invitation .countdown-section,
#invitation .inv-section,
#invitation .ornament,
#invitation .dresscode-section,
#invitation .rsvp-section,
#invitation .flecha-mundo3,
#invitation #transition-zone,
#invitation #salon-world { position: relative; z-index: 2; }

/* flecha rules moved to v4-final block below */

/* ── BTN-INV fix — ensure it always shows as styled button ── */
.btn-inv {
  display: inline-flex !important;
  align-items: center;
  gap: .5rem;
  padding: .85rem 2rem;
  background: transparent;
  border: 1px solid var(--btn-color);
  color: var(--btn-color);
  font-family: var(--font-title);
  font-size: .62rem; letter-spacing: .3em; text-transform: uppercase;
  cursor: pointer; text-decoration: none;
  transition: all .3s; position: relative; overflow: hidden;
  margin-top: 0; /* remove margin-top from base rule conflict */
}

/* flip-clock styles consolidated above */

/* ── INV HERO — no position:relative conflict with bg-layer ── */
.inv-hero {
  position: relative; height: 100vh; overflow: visible;
  display: flex; align-items: center; justify-content: center;
  background: transparent; /* bg handled by #inv-bg-layer */
}
/* inv-hero-mode — controlled entirely by CSS class above */

/* ── TRANSITION CANVAS — ensure clean state ── */
#transition-canvas {
  position: fixed; inset: 0; pointer-events: none;
  z-index: 20; opacity: 0;
  transition: none; /* no CSS transition — controlled by JS */
}

/* ── MAP SECTION CENTERING ── */
.map-section { text-align: center; }
.map-section .btn-inv { margin-top: 1.2rem; }

/* ================================================================
   FLECHAS v4-final — SINGLE SOURCE OF TRUTH
   Removes all previous conflicting rules
   ================================================================ */

/* ── FLECHA DESLIZA (bajo nombre en hero M2) ── */
.flecha-desliza {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
  margin-top: 1.6rem;
  cursor: default;
  /* no fade animation - always visible */
  opacity: 1;
}

/* ── FLECHA MUNDO3 (al final de M2, antes del salón) ── */
.flecha-mundo3 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  padding: 3rem 2rem 4rem;
  cursor: default;
  position: relative;
  z-index: 2;
}

/* ── LABEL texto "desliza" ── */
.flecha-label {
  font-family: var(--font-title);
  font-size: .5rem;
  letter-spacing: .4em;
  text-transform: uppercase;
  opacity: .75;
  /* color set per-flecha below */
}
.flecha-desliza .flecha-label {
  color: var(--flecha-color) !important;
}
.flecha-mundo3 .flecha-label {
  color: var(--flecha-fin-color) !important;
}

/* ── WRAPPER que recibe la animación bounce ── */
.flecha-arrow-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  animation: flechaBounce 1.3s ease-in-out infinite;
  will-change: transform;
}

/* ── SVG hereda color del wrapper ── */
.flecha-desliza .flecha-arrow-wrap {
  color: var(--flecha-color) !important;
}
.flecha-mundo3 .flecha-arrow-wrap {
  color: var(--flecha-fin-color) !important;
}

/* SVG stroke usa currentColor → hereda de su padre */
.flecha-arrow-wrap svg {
  display: block;
  stroke: currentColor !important;
  fill: none !important;
  overflow: visible;
}

/* ── BOUNCE KEYFRAME (single definition) ── */
@keyframes flechaBounce {
  0%   { transform: translateY(0px);  }
  30%  { transform: translateY(10px); }
  60%  { transform: translateY(4px);  }
  80%  { transform: translateY(8px);  }
  100% { transform: translateY(0px);  }
}

/* ── FLECHA DESLIZA — outside hero, positioned below it ── */
.flecha-desliza {
  text-align: center;
  padding: 0;
  position: relative;
  z-index: 2;
  background: transparent;
}

/* Ensure SVG stroke works via JS setAttribute */
.flecha-arrow-wrap svg path {
  stroke: inherit;
}

/* Ensure SVG path inherits stroke from wrapper color */
.flecha-desliza .flecha-arrow-wrap svg,
.flecha-mundo3 .flecha-arrow-wrap svg {
  overflow: visible;
}
.flecha-desliza .flecha-arrow-wrap svg path,
.flecha-mundo3 .flecha-arrow-wrap svg path {
  stroke: inherit;
}

/* ── FLECHA DESLIZA — force visible, no fade delay ── */
#invitation.visible .flecha-desliza {
  opacity: 1 !important;
  visibility: visible !important;
  display: flex !important;
}

/* ── FLECHA MUNDO3 — force visible when revealed ── */
#invitation.visible .flecha-mundo3 {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Add .flecha-desliza to the z-index stack list */
#invitation .flecha-desliza {
  position: relative;
  z-index: 2;
}

/* ── WELCOME BG static modes (color / degrade / foto) ── */
#welcome-bg.bg-static {
  /* filled by JS via .style.background */
}
#welcome-bg-img {
  opacity: 1 !important; /* override old .4 opacity for foto modes */
  transition: opacity .3s;
}
/* Overlay for foto modes */
#welcome-bg-img ~ .welcome-overlay {
  display: none;
}
.welcome-overlay {
  position: absolute; 
/* ── Glassmorphism fondo — img difuminada + overlay glass ── */
#welcome-bg.bg-glass #welcome-bg-img {
  display: block;
  object-fit: cover;
  width: 100%; height: 100%;
  transform-origin: center;
}
#inv-bg-img.glass-img {
  display: block !important;
  object-fit: cover;
  width: 100%; height: 100%;
  transform-origin: center;
}inset: 0; z-index: 2;
  background: linear-gradient(180deg, rgba(10,6,8,.15) 0%, rgba(10,6,8,.55) 60%, rgba(10,6,8,.92) 100%);
  pointer-events: none;
}
/* Fondo panel transitions */
.fondo-panel { transition: all .2s; }

/* Source panel tabs */
.source-tabs { display: flex; gap: .4rem; margin-bottom: .6rem; }
.source-tab {
  padding: .3rem .8rem; font-size: .6rem; letter-spacing: .1em;
  border: 1px solid rgba(255,255,255,.12); background: transparent;
  color: rgba(255,255,255,.5); cursor: pointer; border-radius: 3px;
  transition: all .2s;
}
.source-tab.active { border-color: var(--accent); color: var(--accent); }
.source-panel { display: none; }
.source-panel.active { display: block; }
.file-preview img { display: block; }

/* ── form-hint-inline ── */
.form-hint-inline {
  font-size: .55rem; color: rgba(255,255,255,.35);
  letter-spacing: .02em; font-style: italic;
}

/* ── M2 BG CANVAS (animated backgrounds) ── */
#inv-bg-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: none; /* shown by JS for animated modes */
}

/* ── z-index stack inside #welcome-screen (stacking context = z:100) ──
   welcome-bg          z:1   (bg canvas + img)
   welcome-overlay     z:2   (dark gradient)
   particles-canvas    z:3   ← particles visible above bg
   welcome-content     z:6   (name, button, etc)
── */
#welcome-screen > #particles-canvas {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  z-index: 3;
  pointer-events: none;
}

/* ── M2 PARTICLES CANVAS ──
   z-index stack inside #invitation (position:relative, z:10):
   inv-bg-layer    z:0   (fixed bg)
   inv-particles   z:1   (particles above bg, below all content)
   content         z:2   (ticker, hero, sections…)
── */
#inv-particles-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 11;        /* above #invitation(z:10), below ticker(z:50) */
  display: none;      /* shown by JS when M2 visible + effects active */
}
#invitation.visible #inv-particles-canvas {
  display: block;
}