/* ─── VARIABLES ─────────────────────────────────────── */
:root{
  --E:#071810;--E1:#0B2418;--E2:#0f3020;--E3:#1a5c38;
  --G:#D4AF37;--GB:#f0c84a;--GD:rgba(212,175,55,.22);
  --CH:#F3E5AB;--GLS:rgba(11,36,24,.6);
  --ND:#030d07;--NL:#123022;
  --T1:'Cinzel Decorative',serif;--T2:'Montserrat',sans-serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--E);color:var(--CH);font-family:var(--T2);font-weight:300;overflow-x:hidden;}
.kc-wrapper{width:100%;overflow-x:hidden;position:relative}

/* ─── CURSOR ─────────────────────────────────────────── */
#cd,#cr{position:fixed;pointer-events:none;z-index:99999;border-radius:50%;transform:translate(-50%,-50%)}
#cd{width:7px;height:7px;background:var(--G)}
#cr{width:30px;height:30px;border:1.5px solid rgba(212,175,55,.3);transition:width .2s,height .2s,border-color .2s}
.ch #cr{width:52px;height:52px;border-color:var(--G)}

/* ─── TOAST ──────────────────────────────────────────── */
.toast{
  position:fixed;bottom:2rem;left:50%;
  transform:translateX(-50%) translateY(20px);
  background:var(--E2);border:1px solid var(--GD);
  padding:.65rem 1.6rem;border-radius:100px;
  font-size:12px;color:var(--CH);letter-spacing:.04em;
  opacity:0;transition:all .4s;z-index:99997;white-space:nowrap;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ─── BG HONEYCOMB FIJO ──────────────────────────────── */
.bg-hx{
  position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.025;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='64' viewBox='0 0 56 64'%3E%3Cpath d='M28 0L56 16v32L28 64 0 48V16z' fill='none' stroke='%23D4AF37' stroke-width='.7'/%3E%3C/svg%3E");
  background-size:56px 64px;
}

/* ═══════════════════════════════════════════════════════
   HERO — THE HEX-PORTAL ASTRAL
   El hexágono ES el inicio. Nada antes que él.
═══════════════════════════════════════════════════════ */
#hero{
  position:relative;
  width:100%;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:var(--E);
  padding:0 1.5rem;
  gap:0;
}

/* Honeycomb SVG animado de fondo */
.hc-bg-svg{
  position:absolute;inset:0;width:100%;height:100%;
  opacity:.06;z-index:0;
}

/* Glow radial detrás del hex */
.hero-glow{
  position:absolute;inset:0;z-index:1;
  background:
    radial-gradient(ellipse 70% 60% at 50% 48%,rgba(26,92,56,.6) 0%,transparent 65%),
    radial-gradient(ellipse 40% 25% at 50% 10%,rgba(212,175,55,.07) 0%,transparent 55%),
    radial-gradient(ellipse 50% 35% at 50% 95%,rgba(7,24,16,.95) 0%,transparent 60%);
}

/* Canvas partículas */
#pc{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}

/* ── Wrapper orbital + hexágono ── */
.hex-stage{
  position:relative;
  z-index:10;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:60px 60px 20px;
}

/* SVG órbita exterior giratoria */
.orbit-ring{
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  pointer-events:none;
}
.orbit-outer{
  width:calc(min(78vw,340px) + 130px);
  aspect-ratio:1/1;
  animation:orbitSpin 20s linear infinite;
  z-index:8;
}
.orbit-inner{
  width:calc(min(78vw,340px) + 70px);
  aspect-ratio:1/1;
  animation:orbitSpin 10s linear infinite reverse;
  z-index:9;
}
@keyframes orbitSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}

/* ── El hexágono VIP ── */
.hex-vip{
  position:relative;
  width:min(78vw,340px);
  aspect-ratio:1/1.155;
  z-index:10;
}

/* Aura pulsante detrás del borde */
.hex-aura{
  position:absolute;
  inset:-20px;
  clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
  background:linear-gradient(135deg,var(--G),var(--CH) 50%,var(--G));
  filter:blur(3px);
  opacity:.7;
  animation:auraPulse 2.8s ease-in-out infinite;
  will-change:transform;
  z-index:1;
}
@keyframes auraPulse{
  0%,100%{transform:scale(1)}
  50%    {transform:scale(1.08)}
}

/* Borde dorado */
.hex-border{
  position:absolute;inset:-5px;
  clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
  background:linear-gradient(135deg,var(--G),var(--CH) 50%,var(--G));
  z-index:2;
}

/* Cuerpo */
.hex-body{
  position:absolute;inset:0;
  clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
  background:linear-gradient(165deg,var(--E2) 0%,var(--E1) 55%,var(--E) 100%);
  z-index:3;
  overflow:hidden;
}

/* Micro-pattern hexagonal interior */
.hex-int-pat{
  position:absolute;inset:0;opacity:.07;
}

/* Número XV — protagonista absoluto */
.hex-xv-wrap{
  position:absolute;inset:0;z-index:5;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  gap:.2rem;
}
.hex-xv{
  font-family:var(--T1);
  font-size:clamp(52px,14vw,88px);
  font-weight:900;
  line-height:1;
  background:linear-gradient(135deg,var(--G) 0%,var(--CH) 50%,var(--G) 100%);
  background-size:200% 100%;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  animation:shimmer 4s linear infinite;
}
@keyframes shimmer{0%{background-position:0%}100%{background-position:200%}}
.hex-anos{
  font-family:var(--T1);
  font-size:clamp(8px,2.2vw,12px);
  letter-spacing:.55em;
  color:var(--G);
  opacity:.7;
  text-transform:uppercase;
}
/* Líneas decorativas a los lados del "AÑOS" */
.hex-anos-wrap{
  display:flex;align-items:center;gap:.5rem;
}
.hex-anos-wrap::before,
.hex-anos-wrap::after{
  content:'';display:block;
  width:18px;height:1px;
  background:var(--GD);
}

/* Foto quinceañera — rompe la 4ta pared */
.quincea-img{
  position:absolute;bottom:-8%;left:50%;transform:translateX(-50%);
  width:90%;height:118%;
  object-fit:cover;object-position:top center;
  z-index:20;
  /* Sombra base ligera para móvil */
  filter:drop-shadow(0 -10px 20px rgba(212,175,55,.2));
  will-change:transform;
}
@media(hover:hover){
  .quincea-img{ filter:drop-shadow(0 -18px 38px rgba(212,175,55,.3)); }
}

/* Gemas en las 6 puntas */
.gem{
  position:absolute;
  width:10px;height:10px;
  border-radius:50%;
  background:var(--G);
  box-shadow:0 0 8px rgba(212,175,55,.7),0 0 16px rgba(212,175,55,.3);
  z-index:15;
}
.g-t {top:-5px;left:50%;transform:translateX(-50%)}
.g-tr{top:25%;right:-5px}
.g-br{bottom:25%;right:-5px}
.g-b {bottom:-5px;left:50%;transform:translateX(-50%)}
.g-bl{bottom:25%;left:-5px}
.g-tl{top:25%;left:-5px}

/* ── Texto del hero: DEBAJO del hexágono ── */
.hero-copy{
  position:relative;z-index:10;
  text-align:center;
  margin-top:clamp(1.6rem,4.5vw,2.2rem);
}
.hero-pre{
  font-size:clamp(8px,2.2vw,10px);
  letter-spacing:.55em;
  color:var(--G);
  text-transform:uppercase;
  font-weight:600;
  opacity:.7;
  margin-bottom:.5rem;
}
.hero-name{
  font-family:var(--T1);
  font-size:clamp(32px,8.5vw,66px);
  font-weight:900;
  line-height:1.0;
  letter-spacing:.03em;
}
.hero-name .l1{color:var(--CH);text-shadow:0 0 50px rgba(212,175,55,.25)}
.hero-name .l2{
  display:block;
  background:linear-gradient(90deg,var(--G),var(--CH) 50%,var(--G));
  background-size:200% 100%;
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  animation:shimmer 4s linear infinite;
}
.hero-rule{
  display:flex;align-items:center;justify-content:center;
  gap:.9rem;margin:.7rem 0;
}
.hero-rule::before,.hero-rule::after{
  content:'';width:clamp(28px,7vw,55px);height:1px;
  background:linear-gradient(90deg,transparent,var(--G));
}
.hero-rule::after{background:linear-gradient(90deg,var(--G),transparent)}
.hero-rule-gem{font-size:9px;letter-spacing:.08em;color:var(--G)}
.hero-sub{
  font-size:clamp(9px,2.6vw,12px);
  letter-spacing:.22em;
  color:rgba(243,229,171,.45);
  text-transform:uppercase;
  line-height:1.95;
}

/* Botón play y scroll arrow */
.hero-cta{
  position:absolute;
  bottom:2rem;left:0;right:0;
  display:flex;align-items:center;justify-content:center;
  z-index:20;
}
.play-btn{
  display:flex;flex-direction:column;align-items:center;gap:.4rem;
  border:none;background:none;cursor:pointer;
}
.play-circle{
  width:50px;height:50px;border-radius:50%;
  background:var(--GLS);border:1px solid var(--GD);
  backdrop-filter:blur(16px);
  display:flex;align-items:center;justify-content:center;
  transition:transform .3s,box-shadow .3s,border-color .3s;
  box-shadow:0 8px 28px rgba(0,0,0,.4);
}
.play-btn:hover .play-circle{
  transform:scale(1.1);
  box-shadow:0 12px 36px rgba(212,175,55,.4);
  border-color:var(--G);
}
.play-circle svg{fill:var(--G);width:16px;height:16px;margin-left:2px}
.play-lbl{font-size:8px;letter-spacing:.35em;color:rgba(243,229,171,.3);text-transform:uppercase;font-weight:600}

.scroll-arr{
  position:absolute;bottom:1.8rem;right:1.5rem;
  display:flex;flex-direction:column;align-items:center;gap:3px;z-index:20;
}
.scroll-arr i{
  display:block;width:7px;height:7px;
  border-right:1.5px solid var(--G);border-bottom:1.5px solid var(--G);
  transform:rotate(45deg);
  animation:sB 1.4s ease-in-out infinite;opacity:.55;
}
.scroll-arr i:nth-child(2){animation-delay:.18s;opacity:.3}
.scroll-arr i:nth-child(3){animation-delay:.36s;opacity:.15}
@keyframes sB{
  0%,100%{transform:rotate(45deg) translateY(0)}
  50%    {transform:rotate(45deg) translateY(5px)}
}

/* ═══════════════════════════════════════════════════════
   SECCIÓN 2 — ORÁCULO DEL TIEMPO (Neumorphic)
═══════════════════════════════════════════════════════ */
#oraculo{
  position:relative;padding:5rem 1.5rem 4.5rem;
  text-align:center;overflow:hidden;
}
#oraculo::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 80% 50% at 50% 50%,rgba(212,175,55,.04) 0%,transparent 70%);
}
.eyebrow{font-size:9px;letter-spacing:.5em;color:var(--G);text-transform:uppercase;font-weight:600;margin-bottom:.7rem;opacity:.75}
.sec-title{font-family:var(--T1);font-size:clamp(22px,5.5vw,40px);font-weight:700;color:var(--CH);margin-bottom:2.5rem;line-height:1.2}
.sec-title .a{color:var(--G)}
.cdown{display:flex;justify-content:center;align-items:flex-start;gap:clamp(10px,2.5vw,24px);flex-wrap:wrap}
.cd-u{display:flex;flex-direction:column;align-items:center;gap:.5rem}


.cd-n{font-family:var(--T1);font-size:clamp(28px,7vw,50px);font-weight:700;color:var(--CH);text-shadow:0 0 20px rgba(212,175,55,.3)}
.cd-l{font-size:clamp(7px,1.8vw,9px);letter-spacing:.35em;color:var(--G);text-transform:uppercase;font-weight:600;opacity:.7}
.cd-sep{font-family:var(--T1);font-size:clamp(24px,6vw,44px);color:var(--GD);margin-top:clamp(16px,4vw,26px);opacity:.5}
.date-badge{
  margin-top:2.5rem;
  display:inline-flex;align-items:center;gap:.7rem;
  padding:.65rem 1.8rem;
  background:var(--GLS);border:1px solid var(--GD);
  backdrop-filter:blur(12px);border-radius:100px;
  font-size:clamp(10px,2.8vw,12px);letter-spacing:.18em;color:var(--CH);
}
.date-badge::before,.date-badge::after{content:'◆';color:var(--G);font-size:8px}

/* ═══════════════════════════════════════════════════════
   SECCIÓN 3 — GOLDEN THREAD (Timeline)
═══════════════════════════════════════════════════════ */
#timeline{position:relative;padding:4rem 1.5rem 5rem;max-width:700px;margin:0 auto}







@keyframes nr{0%{transform:scale(1);opacity:.6}100%{transform:scale(2.2);opacity:0}}

.tl-card{flex:1;display:flex;flex-direction:column;gap:.25rem;min-width:40%}
.tl-time{font-size:9px;letter-spacing:.3em;color:var(--G);font-weight:600;text-transform:uppercase}
.tl-ttl{font-family:var(--T1);font-size:clamp(12px,3vw,16px);font-weight:700;color:var(--CH);line-height:1.3}
.tl-desc{font-size:11px;color:rgba(243,229,171,.5);line-height:1.6}

/* ═══════════════════════════════════════════════════════
   SECCIÓN 4 — HONEYCOMB GALLERY
═══════════════════════════════════════════════════════ */
#gallery{padding:4rem 1rem 5rem;text-align:center;overflow:hidden}















/* ═══════════════════════════════════════════════════════
   SECCIÓN 5 — VAULT RSVP
═══════════════════════════════════════════════════════ */
#vault{position:relative;padding:4rem 1.5rem 5rem;text-align:center;overflow:hidden}
#vault::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 70% 60% at 50% 50%,rgba(26,92,56,.1) 0%,transparent 70%);
}
.rsvp-card{
  position:relative;z-index:2;max-width:460px;margin:0 auto;
  background:var(--GLS);border:1px solid var(--GD);
  border-radius:22px;padding:clamp(1.8rem,5vw,2.8rem) clamp(1.4rem,5vw,2.4rem);
  backdrop-filter:blur(20px) saturate(1.3);
  box-shadow:0 24px 64px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,255,255,.03);
}
.rsvp-icon{width:50px;height:50px;margin:0 auto 1.2rem;border-radius:50%;background:linear-gradient(135deg,var(--G),var(--CH));display:flex;align-items:center;justify-content:center;font-size:20px}
.rsvp-f{width:100%;margin-bottom:.9rem;display:flex;flex-direction:column;gap:.35rem;text-align:left}
.rsvp-lbl{font-size:9px;letter-spacing:.4em;color:var(--G);text-transform:uppercase;font-weight:600;padding-left:.15rem}
.rsvp-inp{
  width:100%;padding:.85rem 1rem;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(212,175,55,.18);
  border-radius:10px;color:var(--CH);
  font-family:var(--T2);font-size:14px;font-weight:400;
  outline:none;transition:border-color .3s,background .3s,box-shadow .3s;-webkit-appearance:none;
}
.rsvp-inp::placeholder{color:rgba(243,229,171,.22)}
.rsvp-inp:focus{border-color:var(--G);background:rgba(212,175,55,.06);box-shadow:0 0 0 3px rgba(212,175,55,.1)}
.rsvp-inp option{background:var(--E);color:var(--CH)}
.rsvp-btn{
  width:100%;padding:1rem;margin-top:.6rem;
  background:linear-gradient(135deg,var(--G) 0%,var(--GB) 50%,var(--G) 100%);
  background-size:200% 100%;
  border:none;border-radius:10px;color:var(--E);
  font-family:var(--T1);font-size:13px;font-weight:700;letter-spacing:.08em;
  cursor:pointer;position:relative;overflow:hidden;
  transition:background-position .4s,transform .2s,box-shadow .3s;
  box-shadow:0 8px 28px rgba(212,175,55,.35);
}
.rsvp-btn:hover{background-position:right center;transform:translateY(-2px);box-shadow:0 12px 36px rgba(212,175,55,.55)}
.rsvp-btn:disabled{opacity:.7;cursor:not-allowed;transform:none}
.btn-ld{display:none;width:18px;height:18px;border:2px solid var(--E);border-top-color:transparent;border-radius:50%;animation:spin .7s linear infinite;margin:0 auto}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── VIP TICKET ── */
#vip-ticket{display:none;max-width:400px;margin:0 auto}
.tk-wrap{
  background:linear-gradient(145deg,#0f3020,var(--E1) 60%,var(--E));
  border:1px solid var(--GD);border-radius:18px;overflow:hidden;
  box-shadow:0 32px 72px rgba(0,0,0,.7),0 0 60px rgba(212,175,55,.1),inset 0 0 0 1px rgba(255,255,255,.03);
  animation:tkIn .8s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes tkIn{from{opacity:0;transform:scale(.85) translateY(30px)}to{opacity:1;transform:none}}
.tk-top{
  background:linear-gradient(135deg,var(--E3),var(--E2));
  padding:1.8rem 1.6rem 1.4rem;text-align:center;position:relative;overflow:hidden;
}
.tk-top::before{
  content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(60deg,rgba(212,175,55,.03) 0px,rgba(212,175,55,.03) 1px,transparent 1px,transparent 20px);
}
.tk-badge{font-size:9px;letter-spacing:.5em;color:var(--G);font-weight:600;text-transform:uppercase;margin-bottom:.4rem;opacity:.8}
.tk-gname{font-family:var(--T1);font-size:clamp(18px,5vw,24px);color:var(--CH);font-weight:700;line-height:1.2}
.tk-pass{margin-top:.4rem;font-size:clamp(10px,3vw,13px);color:var(--G);letter-spacing:.12em}
.tk-perf{
  height:1px;
  background:repeating-linear-gradient(90deg,var(--GD) 0,var(--GD) 6px,transparent 6px,transparent 12px);
  position:relative;
}
.tk-perf::before,.tk-perf::after{
  content:'';position:absolute;top:50%;width:18px;height:18px;
  border-radius:50%;background:var(--E);transform:translateY(-50%);
}
.tk-perf::before{left:-9px}.tk-perf::after{right:-9px}
.tk-bot{padding:1.4rem 1.6rem 1.8rem;display:flex;flex-direction:column;align-items:center;gap:.9rem}
.tk-row{width:100%;display:flex;justify-content:space-between;gap:.8rem}
.tk-item{display:flex;flex-direction:column;gap:.18rem}
.tk-ilbl{font-size:8px;letter-spacing:.4em;color:var(--G);text-transform:uppercase;opacity:.65}
.tk-ival{font-size:clamp(10px,2.8vw,11px);color:var(--CH);font-weight:600;letter-spacing:.04em}
.qr-wrap{background:#fff;border-radius:10px;padding:8px;box-shadow:0 0 24px rgba(212,175,55,.3)}
.tk-wm{font-size:8px;letter-spacing:.35em;color:rgba(243,229,171,.2);text-transform:uppercase}

/* ── STAND-ALONE (modo cadenero) ── */
#standalone{
  display:none;position:fixed;inset:0;z-index:99990;
  background:var(--E);
  flex-direction:column;align-items:center;justify-content:center;
  gap:1.2rem;text-align:center;padding:1.5rem;overflow-y:auto;
}
.st-logo{font-size:9px;letter-spacing:.5em;color:var(--G);opacity:.55;text-transform:uppercase}
.st-check{
  width:76px;height:76px;border-radius:50%;
  background:linear-gradient(135deg,var(--G),var(--CH));
  display:flex;align-items:center;justify-content:center;font-size:34px;
  box-shadow:0 0 40px rgba(212,175,55,.5);
  animation:ckPop .6s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes ckPop{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}
.st-title{font-family:var(--T1);font-size:clamp(20px,5.5vw,34px);color:var(--CH);line-height:1.2}
.st-name{font-family:var(--T1);font-size:clamp(26px,7.5vw,50px);color:var(--G);font-weight:900;text-shadow:0 0 30px rgba(212,175,55,.5)}
.st-box{padding:.9rem 2.2rem;border:1.5px solid var(--G);border-radius:12px;background:rgba(212,175,55,.08)}
.st-pass{font-size:clamp(13px,3.5vw,17px);color:var(--CH);letter-spacing:.1em}
.st-qr{background:#fff;padding:10px;border-radius:10px}

/* ── FOOTER VIP ── */
footer{
  background:transparent;
  border-top:1px solid rgba(212,175,55,.1);
  text-align:center;padding:4.5rem 1.5rem 3rem;
  position:relative;z-index:1;
}
.ft-reveal{
  opacity:0;transform:translateY(16px);
  transition:opacity .8s ease var(--fd,0s),transform .8s cubic-bezier(.23,1,.32,1) var(--fd,0s);
}
.ft-reveal.appeared{opacity:1;transform:translateY(0)}
.ft-divider{
  display:flex;align-items:center;justify-content:center;
  gap:14px;margin-bottom:2rem;
}
.ft-divider::before,.ft-divider::after{
  content:'';height:1px;width:clamp(60px,18vw,120px);
  background:linear-gradient(to right,transparent,rgba(212,175,55,.3));opacity:.6;
}
.ft-divider::after{background:linear-gradient(to left,transparent,rgba(212,175,55,.3))}
.ft-divider span{color:var(--G);font-size:.8em;animation:auPulse 3s infinite}
@keyframes auPulse{0%,100%{opacity:.4}50%{opacity:1}}
.ft-sello{
  font-size:9px;letter-spacing:.3em;
  text-transform:uppercase;line-height:2.6;margin-bottom:2rem;
  color:rgba(243,229,171,.35);
  animation:selloGlow 6s ease-in-out infinite alternate;
}
@keyframes selloGlow{
  0%{color:rgba(243,229,171,.25)}
  100%{color:rgba(243,229,171,.6);text-shadow:0 0 18px rgba(212,175,55,.1)}
}
.ft-nombre-dedicado{color:var(--G);font-weight:600;letter-spacing:.4em}
.ft-lugar-fecha{font-size:.85em;color:rgba(243,229,171,.28)}
.ft-brand{
  display:inline-flex;align-items:center;gap:10px;
  text-decoration:none;padding:10px 4px;
  transition:all .4s ease;cursor:pointer;position:relative;
}
.ft-brand::after{
  content:'';position:absolute;right:-10px;top:50%;transform:translateY(-50%);
  width:4px;height:4px;border-radius:50%;
  background:rgba(212,175,55,.55);
  animation:brandDot 4s ease-in-out infinite;
}
@keyframes brandDot{
  0%,45%,100%{opacity:0;transform:translateY(-50%) scale(.5)}
  55%,85%{opacity:1;transform:translateY(-50%) scale(1)}
}
.ig-ico{
  width:14px;height:14px;opacity:.3;
  color:var(--G);flex-shrink:0;
  transition:opacity .4s,color .4s;
  animation:icoGlow 3.5s ease-in-out infinite alternate;
}
@keyframes icoGlow{0%{opacity:.2}100%{opacity:.45}}
.ft-brand:hover .ig-ico{opacity:.9;color:var(--GB);animation:none}
.ft-brand-text{
  font-family:var(--T1);font-size:10px;
  color:rgba(212,175,55,.7);letter-spacing:.22em;
  transition:color .4s,letter-spacing .4s;
  position:relative;overflow:hidden;
}
.ft-brand-text::after{
  content:'';position:absolute;top:0;left:-120%;width:55%;height:100%;
  background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,.06) 50%,transparent 100%);
  animation:ftShimmer 5s ease-in-out infinite;
}
@keyframes ftShimmer{0%,70%{left:-120%}100%{left:160%}}
.ft-brand:hover .ft-brand-text{color:var(--G);letter-spacing:.28em}

/* ── CLABE OCULTA ── */
.clabe-reveal-btn{
  width:100%;margin-top:.7rem;
  display:flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.6rem 1rem;background:rgba(212,175,55,.06);
  border:1px solid rgba(212,175,55,.2);border-radius:8px;
  color:rgba(243,229,171,.6);font-size:9px;letter-spacing:.25em;text-transform:uppercase;
  cursor:pointer;transition:all .3s;
}
.clabe-reveal-btn:hover{background:rgba(212,175,55,.12);border-color:var(--GD);color:var(--CH)}
.clabe-reveal-icon{transition:transform .3s;font-size:1.1em}
.clabe-reveal-btn.open .clabe-reveal-icon{transform:rotate(90deg)}
.clabe-caja{
  display:none;margin-top:.6rem;padding:.8rem 1rem;
  background:rgba(212,175,55,.06);border:1px dashed rgba(212,175,55,.25);
  border-radius:8px;display:none;
  flex-direction:column;align-items:center;gap:.5rem;
  font-size:11px;color:var(--CH);letter-spacing:.08em;
  animation:clabeIn .35s ease;
}
@keyframes clabeIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.clabe-caja.open{display:flex}
.clabe-label{font-size:8px;letter-spacing:.4em;color:var(--G);text-transform:uppercase}
.clabe-copy-btn{
  padding:.45rem 1.2rem;background:var(--GLS);
  border:1px solid var(--GD);border-radius:6px;
  color:var(--G);font-size:9px;letter-spacing:.18em;
  cursor:pointer;transition:all .3s;
}
.clabe-copy-btn:hover{background:rgba(212,175,55,.18);border-color:var(--G)}

/* ── CAPTURA EL MOMENTO — Premium Redesign ── */
#captura-momento{
  position:relative;padding:5rem 1.5rem 5.5rem;
  text-align:center;overflow:hidden;
}
#captura-momento::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 75% 55% at 50% 50%,rgba(26,92,56,.1) 0%,transparent 65%);
}
.captura-particles{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.cap-particle{
  position:absolute;left:var(--x);top:var(--y);
  width:3px;height:3px;border-radius:50%;
  background:var(--G);opacity:0;
  animation:capFloat var(--d,6s) var(--delay,0s) ease-in-out infinite;
}
@keyframes capFloat{
  0%,100%{opacity:0;transform:translate(0,0) scale(.3)}
  30%{opacity:.6;transform:translate(8px,-14px) scale(.9)}
  60%{opacity:.4;transform:translate(-5px,-22px) scale(1)}
  80%{opacity:.15;transform:translate(6px,-30px) scale(.7)}
}
.cap-wrap{position:relative;z-index:2;max-width:480px;margin:0 auto}
.cap-main-card{
  position:relative;
  background:var(--GLS);border:1px solid var(--GD);
  border-radius:24px;padding:2.5rem 1.8rem 2rem;
  backdrop-filter:blur(22px) saturate(1.4);
  box-shadow:0 32px 80px rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,255,255,.04);
  margin-top:2rem;overflow:hidden;
}
.cap-main-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(212,175,55,.6),transparent);
}
.cap-hex-deco{
  position:absolute;inset:0;width:100%;height:100%;
  opacity:.5;pointer-events:none;
}
/* Cámara con anillo pulsante */
.cap-cam-wrap{
  position:relative;width:100px;height:100px;
  margin:0 auto 1.5rem;
  display:flex;align-items:center;justify-content:center;
}
.cap-cam-ring{
  position:absolute;inset:-14px;border-radius:50%;
  border:1.5px dashed rgba(212,175,55,.35);
  animation:kcRingSpin 20s linear infinite;
}
.cap-cam-ring::before{
  content:'';position:absolute;top:-3px;left:50%;transform:translateX(-50%);
  width:5px;height:5px;border-radius:50%;
  background:var(--G);
  box-shadow:0 0 8px 3px rgba(212,175,55,.7);
}
.cap-cam-svg{width:80px;height:80px;position:relative;z-index:1}
.cap-cam-glow{
  position:absolute;inset:-10px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(212,175,55,.16) 0%,transparent 65%);
  animation:capGlow 3.2s ease-in-out infinite alternate;
}
@keyframes capGlow{0%{opacity:.35;transform:scale(.9)}100%{opacity:.9;transform:scale(1.2)}}

.cap-titulo-bold{
  font-family:var(--T1);font-size:clamp(14px,4vw,18px);
  color:var(--CH);font-weight:700;letter-spacing:.04em;
  margin-bottom:.7rem;
  text-shadow:0 0 30px rgba(212,175,55,.2);
}
.cap-body-text{
  font-size:clamp(11px,2.8vw,13px);color:rgba(243,229,171,.55);
  line-height:1.85;margin-bottom:1.8rem;
}

/* Steps 01 / 02 / 03 */
.cap-steps{
  display:flex;align-items:center;justify-content:center;
  gap:.6rem;margin-bottom:1.8rem;
}
.cap-step{display:flex;flex-direction:column;align-items:center;gap:.3rem}
.cap-step-num{
  width:36px;height:36px;border-radius:50%;
  background:var(--GLS);border:1px solid var(--GD);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--T1);font-size:10px;color:var(--G);letter-spacing:.04em;
  box-shadow:0 0 14px rgba(212,175,55,.18);
  transition:transform .3s,box-shadow .3s;
}
.cap-step:hover .cap-step-num{transform:scale(1.12);box-shadow:0 0 24px rgba(212,175,55,.4)}
.cap-step-lbl{
  font-size:8px;letter-spacing:.25em;text-transform:uppercase;
  color:rgba(243,229,171,.35);
}
.cap-step-arrow{font-size:8px;color:rgba(212,175,55,.3);margin-bottom:1.1rem}


.captura-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:13px 26px;border-radius:50px;
  background:linear-gradient(135deg,rgba(212,175,55,.15) 0%,rgba(212,175,55,.06) 100%);
  border:1px solid rgba(212,175,55,.35);
  color:var(--CH);font-family:var(--T1);
  font-size:clamp(8px,2.2vw,10px);letter-spacing:.3em;text-transform:uppercase;
  text-decoration:none;cursor:pointer;
  position:relative;overflow:hidden;
  transition:all .5s cubic-bezier(.34,1.1,.64,1);
}
.captura-btn:hover{
  background:linear-gradient(135deg,rgba(212,175,55,.28) 0%,rgba(212,175,55,.12) 100%);
  border-color:var(--G);transform:translateY(-2px);
  box-shadow:0 8px 30px rgba(212,175,55,.2);
}
.captura-btn:active{transform:translateY(0) scale(.97)}
.captura-btn-shimmer{
  position:absolute;top:0;left:-100%;width:100%;height:100%;
  background:linear-gradient(90deg,transparent 0%,rgba(243,229,171,.08) 50%,transparent 100%);
  animation:btnShimmer 4s ease-in-out infinite;pointer-events:none;
}
@keyframes btnShimmer{0%{left:-100%}40%{left:100%}100%{left:100%}}
.captura-btn-icon{display:flex;align-items:center;color:var(--G);transition:transform .3s}
.captura-btn:hover .captura-btn-icon{transform:scale(1.15)}
.captura-btn-text{font-weight:500}
.captura-btn-arrow{color:rgba(243,229,171,.5);font-size:1em;transition:transform .3s,opacity .3s;opacity:.5}
.captura-btn:hover .captura-btn-arrow{transform:translateX(4px);opacity:1}
.captura-hint{
  margin-top:1rem;font-size:8px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(243,229,171,.2);font-style:italic;
}

/* ══ FLOATING KC MUSIC CONTROL — Emerald Edition ══════════════ */
.kc-float{
  position:fixed;bottom:clamp(18px,3vh,30px);right:clamp(18px,3vw,28px);
  z-index:9000;width:48px;height:48px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;border:none;background:none;padding:0;
  outline:none;-webkit-tap-highlight-color:transparent;
  opacity:0;transform:translateY(20px);
  transition:opacity .6s ease,transform .6s cubic-bezier(.34,1.56,.64,1);
}
.kc-float.visible{opacity:1;transform:translateY(0)}
.kc-float-bg{
  position:absolute;inset:0;border-radius:50%;
  background:rgba(7,24,16,.88);
  border:1px solid rgba(212,175,55,.28);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:border-color .4s,box-shadow .4s,background .4s,transform .15s;
}
.kc-float:hover .kc-float-bg{
  border-color:rgba(212,175,55,.55);
  box-shadow:0 4px 22px rgba(0,0,0,.5),0 0 28px rgba(212,175,55,.12);
  background:rgba(11,36,24,.92);
}
.kc-float-glow{
  position:absolute;inset:-10px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(212,175,55,.2) 0%,transparent 65%);
  transition:opacity .8s;
  animation:kcEGlow 3s ease-in-out infinite alternate;
  will-change:transform;
}
.kc-float.paused .kc-float-glow{opacity:.12;animation-play-state:paused}
@keyframes kcEGlow{
  0%{transform:scale(.9)}
  100%{transform:scale(1.18)}
}
/* Efecto extra de opacidad solo en desktop */
@media(hover:hover){
  .kc-float-glow{ animation:kcEGlowDesk 3s ease-in-out infinite alternate; }
  @keyframes kcEGlowDesk{
    0%{opacity:.35;transform:scale(.9)}
    100%{opacity:.8;transform:scale(1.18)}
  }
}
.kc-ring{
  position:absolute;inset:-8px;border-radius:50%;
  border:1.5px dashed rgba(212,175,55,.45);
  animation:kcRingSpin 22s linear infinite;
  transition:border-color .4s,box-shadow .4s;
  box-shadow:0 0 8px rgba(212,175,55,.1);
}
.kc-ring::before{
  content:'';position:absolute;top:-3px;left:50%;transform:translateX(-50%);
  width:5px;height:5px;border-radius:50%;
  background:var(--G);
  box-shadow:0 0 8px 3px rgba(212,175,55,.7),0 0 18px 5px rgba(212,175,55,.25);
}
.kc-float.paused .kc-ring{animation-play-state:paused;border-color:rgba(212,175,55,.12);box-shadow:none}
.kc-float:hover .kc-ring{border-color:rgba(212,175,55,.75);box-shadow:0 0 16px rgba(212,175,55,.3)}
@keyframes kcRingSpin{to{transform:rotate(360deg)}}
.kc-letter{
  position:relative;z-index:2;
  font-family:var(--T1);font-size:11px;font-style:italic;
  color:var(--G);letter-spacing:1.5px;
  transition:color .3s,text-shadow .3s,transform .3s cubic-bezier(.34,1.56,.64,1);
  text-shadow:0 0 10px rgba(212,175,55,.25);line-height:1;
}
.kc-float:hover .kc-letter{color:var(--CH);text-shadow:0 0 18px rgba(212,175,55,.5);transform:scale(1.1)}
.kc-float.paused .kc-letter{color:rgba(212,175,55,.35);text-shadow:none}
.kc-bars{
  position:absolute;bottom:6px;left:50%;transform:translateX(-50%);
  display:flex;gap:1.5px;z-index:3;
}
.kc-bar{
  width:3px;border-radius:2px;
  background:linear-gradient(to top,var(--G),var(--CH));
  animation:kcEBar var(--d,.4s) ease-in-out infinite alternate;
  transition:opacity .3s;
  /* box-shadow removido de la animación base por rendimiento móvil */
}
.kc-bar:nth-child(1){height:6px;--d:.38s}
.kc-bar:nth-child(2){height:9px;--d:.26s;animation-delay:.1s}
.kc-bar:nth-child(3){height:5px;--d:.44s;animation-delay:.2s}
@keyframes kcEBar{
  0%{height:2px}
  100%{height:100%}
}
/* Efectos premium de barras solo en desktop */
@media(hover:hover){
  .kc-bar{ animation:kcEBarDesk var(--d,.4s) ease-in-out infinite alternate; }
  @keyframes kcEBarDesk{
    0%{height:2px;opacity:.45}
    100%{opacity:1;box-shadow:0 0 7px rgba(212,175,55,.75)}
  }
}
.kc-float.paused .kc-bar{animation-play-state:paused;opacity:.18;height:2px!important}
.kc-float:active .kc-float-bg{transform:scale(.9)}
.kc-float:active .kc-letter{transform:scale(.88)}



/* ── UTILS ── */
.gold-sep{width:70px;height:1px;background:linear-gradient(90deg,transparent,var(--G),transparent);margin:.9rem auto}

/* ── RESPONSIVE ── */
@media(max-width:480px){
  .hex-stage{padding:40px 40px 16px}
}


/* ═══════════════════════════════════════════════════
   UNLOCK PORTAL — Hex Fractal Vortex
═══════════════════════════════════════════════════ */
#unlock-portal{
  position:fixed;inset:0;z-index:99998;
  /* Fondo vibracional multicapa — campo de frecuencias */
  background:
    radial-gradient(ellipse 30% 30% at 50% 50%, rgba(212,175,55,.08) 0%,transparent 55%),
    radial-gradient(ellipse 55% 55% at 50% 50%, #0d3a22 0%,#071810 50%,#020b05 100%);
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:1.6rem;
  transition:opacity 1s ease, transform 1s ease;
  cursor:pointer;overflow:hidden;
  -webkit-tap-highlight-color:transparent;
  user-select:none;-webkit-user-select:none;
}
/* Capa de frecuencia animada — anillos radiales */
#unlock-portal::before{
  content:'';position:absolute;inset:0;
  background:
    repeating-radial-gradient(circle at 50% 50%,
      transparent 0px,
      transparent 38px,
      rgba(212,175,55,.028) 39px,
      transparent 40px,
      transparent 78px,
      rgba(26,92,56,.04) 79px,
      transparent 80px
    );
  /* Solo transform — sin opacity: evita repaint/flicker en móvil */
  animation:upFreqShift 14s ease-in-out infinite alternate;
  will-change:transform;
  transform:translateZ(0);
  pointer-events:none;
  z-index:0;
}
@keyframes upFreqShift{
  0%  {transform:translateZ(0) scale(1)}
  50% {transform:translateZ(0) scale(1.18)}
  100%{transform:translateZ(0) scale(.9)}
}
/* Velo perimetral de profundidad */
#unlock-portal::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 75% 75% at 50% 50%,transparent 40%,rgba(2,10,5,.72) 100%);
  pointer-events:none;
  z-index:0;
}
#unlock-portal.shatter{
  opacity:0;pointer-events:none;
  transform:scale(1.08);
}


/* ─── Ondas vibracionalessonar ─────────────────── */
.up-waves{
  position:absolute;inset:0;pointer-events:none;
  display:flex;align-items:center;justify-content:center;
}
.up-wave{
  position:absolute;
  border-radius:50%;
  border:1px solid rgba(212,175,55,.45);
  animation:upWavePulse 5s ease-out infinite;
  /* Empieza pequeño en el centro y se expande */
}
/* Cada onda arranca en un delay escalonado → efecto sonar/frecuencia */
.up-wv1{width:80px;height:80px;animation-delay:0s}
.up-wv2{width:80px;height:80px;animation-delay:1s}
.up-wv3{width:80px;height:80px;animation-delay:2s}
.up-wv4{width:80px;height:80px;animation-delay:3s}
.up-wv5{width:80px;height:80px;animation-delay:4s}
@keyframes upWavePulse{
  0%  {transform:scale(1);   opacity:.6}
  80% {transform:scale(4.5); opacity:0}
  100%{transform:scale(5); opacity:0}
}

/* Noise grain — solo en escritorio, evita flicker en móvil */
.up-noise{
  position:absolute;inset:0;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px 200px;
  /* Sin animation steps — eso causaba el parpadeo en móvil */
  display:none;
}

/* Label eyebrow */
.ul-eyebrow{
  font-size:9px;letter-spacing:.55em;
  color:rgba(212,175,55,.45);text-transform:uppercase;font-weight:600;
  position:relative;z-index:20;
}

/* ── El vórtice completo ── */
.up-vortex{
  position:relative;
  /* Ancho base: el núcleo + espacio para los anillos */
  width:min(88vw,340px);
  height:min(88vw,340px);
  display:flex;align-items:center;justify-content:center;
  z-index:10;
}

/* SVG de rayos giratorio */
.up-rays{
  position:absolute;
  width:100%;height:100%;
  inset:0;
  animation:upRaysSpin 60s linear infinite;
  pointer-events:none;z-index:1;
}
@keyframes upRaysSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}

/* ── Anillos hexagonales ──
   Hexágono puntiagudo (pointy-top):
   clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%)
   Proporción correcta: se aplica dentro de un contenedor cuadrado,
   así el hex mide exactamente width × 1, height × 1 → puntas arriba y abajo
   sin achatamiento porque el cuadrado y el clip-path son coherentes.
── */
.up-ring{
  position:absolute;
  clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
  pointer-events:none;
}

/* Anillo 1 — más externo, borde dorado brillante */
.up-r1{
  width:100%;height:100%;
  background:transparent;
  /* Trick: usamos outline simulado con box-shadow en un pseudo-elemento
     O bien hacemos un "ring" real con dos capas: borde y cuerpo transparent */
  background:linear-gradient(135deg,rgba(212,175,55,.5),rgba(243,229,171,.2) 50%,rgba(212,175,55,.5));
  -webkit-mask:
    polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%) subtract,
    polygon(calc(50% - 1px) 1.5%,calc(100% - 1.5px) 25.5%,calc(100% - 1.5px) 74.5%,calc(50% - 1px) 98.5%,1.5px 74.5%,1.5px 25.5%);
  mask:
    polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%) subtract,
    polygon(calc(50% - 1px) 1.5%,calc(100% - 1.5px) 25.5%,calc(100% - 1.5px) 74.5%,calc(50% - 1px) 98.5%,1.5px 74.5%,1.5px 25.5%);
  filter:drop-shadow(0 0 12px rgba(212,175,55,.7)) drop-shadow(0 0 30px rgba(212,175,55,.3));
  animation:upSpin1 22s linear infinite;
}

/* Solución limpia: SVG hexágonos como "strokes" para cada anillo */
/* Anillo 1 */
.up-r1{
  background:none;-webkit-mask:none;mask:none;
  border:none;
  outline:none;
  /* Usamos background con clip-path doble — hacemos el "borde" con inset nested */
}

/* Reset y usar approach de "shell" — capa exterior clippeada menos una capa interior */
.up-ring{
  position:absolute;
  pointer-events:none;
  /* El hex perfecto se logra con SVG polygon en el background via box approach */
}

/* Approach definitivo: SVG inline como background + clip-path para cada ring */
.up-r1{
  width:100%;height:100%;
  clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
  background:linear-gradient(135deg,rgba(212,175,55,.65),rgba(243,229,171,.3) 30%,rgba(212,175,55,.65));
  animation:upSpin1 22s linear infinite;
  will-change:transform;
}
.up-r1::after{
  content:'';position:absolute;
  inset:1.8px;
  clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
  background:radial-gradient(ellipse 70% 70% at 50% 50%,rgba(20,70,40,.98) 0%,rgba(7,24,16,1) 100%);
}

.up-r2{
  width:84%;height:84%;
  clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
  background:linear-gradient(135deg,rgba(212,175,55,.4),rgba(243,229,171,.18) 30%,rgba(212,175,55,.4));
  animation:upSpin2 16s linear infinite reverse;
  will-change:transform;
}
.up-r2::after{
  content:'';position:absolute;inset:1.6px;
  clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
  background:radial-gradient(ellipse 70% 70% at 50% 50%,rgba(18,60,34,.98) 0%,rgba(7,24,16,1) 100%);
}

.up-r3{
  width:68%;height:68%;
  clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
  background:linear-gradient(135deg,rgba(243,229,171,.3),rgba(212,175,55,.12) 30%,rgba(243,229,171,.3));
  animation:upSpin1 12s linear infinite;
  will-change:transform;
}
.up-r3::after{
  content:'';position:absolute;inset:1.4px;
  clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
  background:radial-gradient(ellipse 70% 70% at 50% 50%,rgba(16,52,28,.99) 0%,rgba(7,24,16,1) 100%);
}

.up-r4{
  width:54%;height:54%;
  clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
  background:linear-gradient(135deg,rgba(212,175,55,.25),rgba(243,229,171,.1) 30%,rgba(212,175,55,.25));
  animation:upSpin2 9s linear infinite reverse;
}
.up-r4::after{
  content:'';position:absolute;inset:1.2px;
  clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
  background:radial-gradient(ellipse 80% 80% at 50% 50%,rgba(14,44,24,.99) 0%,rgba(7,24,16,1) 100%);
}

.up-r5{
  width:40%;height:40%;
  clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
  background:linear-gradient(135deg,rgba(212,175,55,.2),rgba(243,229,171,.08) 30%,rgba(212,175,55,.2));
  animation:upSpin1 7s linear infinite;
}
.up-r5::after{
  content:'';position:absolute;inset:1px;
  clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
  background:radial-gradient(ellipse 80% 80% at 50% 50%,rgba(12,38,20,.99) 0%,rgba(7,24,16,1) 100%);
}

.up-r6{
  width:28%;height:28%;
  clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
  background:linear-gradient(135deg,rgba(212,175,55,.18),rgba(243,229,171,.07) 30%,rgba(212,175,55,.18));
  animation:upSpin2 5s linear infinite reverse;
}
.up-r6::after{
  content:'';position:absolute;inset:1px;
  clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
  background:radial-gradient(ellipse 80% 80% at 50% 50%,rgba(10,32,18,1) 0%,rgba(7,24,16,1) 100%);
}

@keyframes upSpin1{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes upSpin2{from{transform:rotate(0deg)}to{transform:rotate(-360deg)}}

/* ── Gemas en las puntas del anillo 2 ── */
.up-gem{
  position:absolute;
  width:9px;height:9px;border-radius:50%;
  background:radial-gradient(circle,#F3E5AB,#D4AF37);
  box-shadow:0 0 8px rgba(212,175,55,.8),0 0 16px rgba(212,175,55,.4);
  z-index:25;
  /* Sin animation de box-shadow — causa flicker en móvil */
}

/* Posición gemas — referenciadas al 84% del vórtice (anillo r2) */
/* pointy-top hex: vértices en 50/0, 100/25, 100/75, 50/100, 0/75, 0/25 */
/* El anillo r2 = 84% del contenedor. Gemas en sus 6 vértices. */
/* Cálculo: centro del contenedor = 50%. Radio r2 = 42% del contenedor */
/* top: 50% - 42% = 8%  → top gem */
/* tr:  right=8%, top=25%  */
/* etc. */
.up-gm-t {top:calc(50% - 42%);left:50%;transform:translate(-50%,-50%)}
.up-gm-tr{top:calc(50% - 42%*0.5);right:calc(50% - 42%);transform:translate(50%,-50%)}
.up-gm-br{bottom:calc(50% - 42%*0.5);right:calc(50% - 42%);transform:translate(50%,50%)}
.up-gm-b {bottom:calc(50% - 42%);left:50%;transform:translate(-50%,50%)}
.up-gm-bl{bottom:calc(50% - 42%*0.5);left:calc(50% - 42%);transform:translate(-50%,50%)}
.up-gm-tl{top:calc(50% - 42%*0.5);left:calc(50% - 42%);transform:translate(-50%,-50%)}

/* ── Núcleo central ── */
.up-nucleus{
  position:relative;
  z-index:20;
  width:44%;height:44%;
  display:flex;align-items:center;justify-content:center;
  filter:drop-shadow(0 0 20px rgba(212,175,55,.5)) drop-shadow(0 0 50px rgba(26,92,56,.4));
}

/* SVG de la corona dentro del núcleo */
.up-nuc-svg{
  position:relative;
  width:80%;height:auto;
  z-index:5;
  overflow:visible;
  animation:upCrownFloat 3.5s ease-in-out infinite;
  will-change:transform;
  /* Static filter — no animation on filter */
  filter:drop-shadow(0 0 12px rgba(212,175,55,.5));
}
@keyframes upCrownFloat{
  0%,100%{transform:translateY(0)}
  50%    {transform:translateY(-5px)}
}
/* Gem animations — desktop only to avoid mobile flicker */
@media(hover:hover){
  .up-gem-top{
    animation:upGemTopPulse 2s ease-in-out infinite;
  }
  .up-gem-side{
    animation:upGemSidePulse 2.4s ease-in-out infinite;
  }
}
@keyframes upGemTopPulse{
  0%,100%{filter:drop-shadow(0 0 3px rgba(26,92,56,.6))}
  50%    {filter:drop-shadow(0 0 8px rgba(45,158,92,1))}
}
@keyframes upGemSidePulse{
  0%,100%{filter:drop-shadow(0 0 2px rgba(26,92,56,.5))}
  50%    {filter:drop-shadow(0 0 6px rgba(45,158,92,.9))}
}

/* CTA text — debajo del vórtice */
.ul-cta-text{
  font-family:var(--T1);
  font-size:clamp(8px,2.2vw,11px);
  letter-spacing:.38em;color:var(--G);opacity:.75;text-transform:uppercase;
  position:relative;z-index:20;
  text-shadow:0 0 20px rgba(212,175,55,.3);
  /* No animation — caused layout shift on mobile */
}

/* Flash al tocar (optimizado para rendimiento móvil) */
.up-vortex::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(243,229,171,.8) 0%, rgba(212,175,55,.4) 40%, transparent 70%);
  opacity: 0;
  transform: scale(0.5);
  pointer-events: none;
  z-index: 100;
  will-change: transform, opacity;
}
.up-vortex.flash::after {
  animation: upFlashOptimized .6s ease-out forwards;
}
@keyframes upFlashOptimized {
  0%   { opacity: 0; transform: scale(0.5); }
  30%  { opacity: 1; transform: scale(1.5); }
  100% { opacity: 0; transform: scale(2.5); }
}

/* Hint inferior */
.ul-hint{
  font-size:9px;letter-spacing:.4em;
  color:rgba(243,229,171,.22);text-transform:uppercase;
  animation:ulHint 2s ease-in-out infinite;
  position:relative;z-index:20;
}
@keyframes ulHint{0%,100%{opacity:.22}50%{opacity:.55}}


/* ═══════════════════════════════════════════════════
   FAMILIA — Con el Amor de Casa
═══════════════════════════════════════════════════ */
#familia{position:relative;padding:5rem 1.5rem;text-align:center;overflow:hidden}
#familia::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 80% 55% at 50% 50%,rgba(26,92,56,.08) 0%,transparent 70%);
}



.fam-names{font-family:var(--T1);font-size:clamp(14px,4vw,20px);color:var(--CH);margin-bottom:.35rem;line-height:1.3}
.fam-role{font-size:9px;letter-spacing:.45em;color:var(--G);text-transform:uppercase;opacity:.7}

/* ═══════════════════════════════════════════════════
   PADRINOS — Slider Horizontal
═══════════════════════════════════════════════════ */
#padrinos{padding:4rem 0 4.5rem;overflow:hidden}
#padrinos .sec-header{text-align:center;padding:0 1.5rem 2rem}
.pad-track{
  display:flex;gap:1rem;
  padding:.5rem 1.5rem 1.2rem;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.pad-track::-webkit-scrollbar{display:none}
.pad-card{
  flex:0 0 clamp(200px,55vw,240px);
  scroll-snap-align:start;
  border-radius:18px;overflow:hidden;
  border:1px solid rgba(212,175,55,.15);
  background:var(--E1);
  box-shadow:6px 6px 18px var(--ND),-4px -4px 12px var(--NL);
  transition:transform .3s,box-shadow .3s;
}
.pad-card:active{transform:scale(.97)}
.pad-img{display:none}
.pad-info{padding:.9rem 1rem 1.1rem;text-align:center}
.pad-padrino{font-size:9px;letter-spacing:.4em;color:var(--G);text-transform:uppercase;font-weight:600;opacity:.7;margin-bottom:.25rem}
.pad-names{font-family:var(--T1);font-size:clamp(10px,2.8vw,13px);color:var(--CH);line-height:1.4}
.pad-cat{font-size:9px;color:rgba(243,229,171,.35);letter-spacing:.1em;margin-top:.2rem}
/* Scroll hint fading edges */
#padrinos{position:relative}
#padrinos::after{
  content:'';position:absolute;right:0;top:0;bottom:0;width:60px;
  background:linear-gradient(90deg,transparent,var(--E));
  pointer-events:none;z-index:3;
}

/* ═══════════════════════════════════════════════════
   DRESS CODE & REGALOS — Split Cards
═══════════════════════════════════════════════════ */
#extras{padding:4rem 1.5rem 5rem;text-align:center}
.extras-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem;max-width:520px;margin:2.5rem auto 0;
}
@media(max-width:380px){.extras-grid{grid-template-columns:1fr}}
.ex-card{
  border-radius:18px;padding:1.8rem 1.2rem 2rem;
  background:var(--GLS);
  border:1px solid var(--GD);
  backdrop-filter:blur(18px);
  box-shadow:0 16px 48px rgba(0,0,0,.4),inset 0 0 0 1px rgba(255,255,255,.03);
  display:flex;flex-direction:column;align-items:center;gap:.7rem;
}
.ex-icon{
  font-size:2rem;
  filter:drop-shadow(0 0 14px rgba(212,175,55,.7));
  animation:iconFloat 3s ease-in-out infinite;
}
.ex-card:nth-child(2) .ex-icon{animation-delay:1.2s}
@keyframes iconFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.ex-title{font-family:var(--T1);font-size:clamp(11px,3vw,14px);color:var(--G);letter-spacing:.05em}
.ex-desc{font-size:clamp(9px,2.4vw,11px);color:rgba(243,229,171,.5);line-height:1.7;letter-spacing:.03em}
.ex-badge{
  display:inline-block;margin-top:.4rem;
  padding:.35rem 1rem;border-radius:100px;
  border:1px solid rgba(212,175,55,.3);
  font-size:9px;letter-spacing:.3em;color:var(--G);text-transform:uppercase;
  background:rgba(212,175,55,.06);
}
/* sobre animado */
.sobre-anim{
  font-size:1.8rem;
  animation:sobreFloat 2.5s ease-in-out infinite, sobreSway 4s ease-in-out infinite;
  filter:drop-shadow(0 0 12px rgba(212,175,55,.8));
  display:inline-block;
}
@keyframes sobreFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes sobreSway{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}

/* ═══ KILL AOS — FORCE VISIBILITY ═══════════════ */
[data-aos]{
  opacity:1!important;
  transform:none!important;
  transition:none!important;
}
.kc-reveal{
  opacity:0;transform:translateY(30px);
  transition:opacity .7s ease,transform .7s ease;
}
.kc-reveal.visible{opacity:1;transform:none}

/* ════════════════════════════════════════════════════
   AURORA BACKGROUND — Living Emerald Atmosphere
════════════════════════════════════════════════════ */
.kc-aurora{
  position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
}
.kc-aurora::before{
  content:'';position:absolute;inset:-50%;
  background:
    radial-gradient(ellipse 55% 45% at 22% 32%,rgba(26,92,56,.28) 0%,transparent 60%),
    radial-gradient(ellipse 48% 38% at 78% 58%,rgba(15,48,32,.22) 0%,transparent 58%),
    radial-gradient(ellipse 65% 40% at 50% 90%,rgba(212,175,55,.09) 0%,transparent 55%),
    radial-gradient(ellipse 35% 30% at 85% 15%,rgba(26,92,56,.15) 0%,transparent 50%);
  animation:auroraShift 28s ease-in-out infinite alternate;
}
@keyframes auroraShift{
  0%{transform:translate(0,0) scale(1)}
  30%{transform:translate(-4%,3%) scale(1.05)}
  65%{transform:translate(5%,-2%) scale(.97)}
  100%{transform:translate(-2%,5%) scale(1.04)}
}

/* ── Film Grain Noise ────────────────────────────── */
.kc-noise{
  position:fixed;inset:0;z-index:1;pointer-events:none;opacity:0;
}
@media(hover:hover){
  .kc-noise{
    opacity:.04;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size:200px 200px;
    animation:grain 1.1s steps(3) infinite;
  }
}
@keyframes grain{
  0%,100%{background-position:0 0}
  20%{background-position:-15px 10px}
  40%{background-position:8px -12px}
  60%{background-position:-5px 15px}
  80%{background-position:12px -8px}
}

/* ── Hex background pulse ────────────────────────── */
.bg-hx{opacity:.03}

/* ════════════════════════════════════════════════════
   ORÁCULO — HexFractal Counter
════════════════════════════════════════════════════ */
.cdown{display:flex;justify-content:center;align-items:center;gap:clamp(6px,2.5vw,20px);flex-wrap:nowrap}
.cd-u{display:flex;flex-direction:column;align-items:center;gap:.6rem}
.cd-hex-wrap{position:relative;display:flex;align-items:center;justify-content:center}
.cd-hex-outer{
  width:clamp(74px,18vw,112px);height:clamp(74px,18vw,112px);
  clip-path:polygon(50% 0%,96% 25%,96% 75%,50% 100%,4% 75%,4% 25%);
  background:linear-gradient(135deg,var(--G) 0%,var(--CH) 50%,var(--G) 100%);
  background-size:200% 100%;
  display:flex;align-items:center;justify-content:center;
  animation:shimmer 5s linear infinite;
}
.cd-hex-mid{
  width:calc(100% - 4px);height:calc(100% - 4px);
  clip-path:polygon(50% 0%,96% 25%,96% 75%,50% 100%,4% 75%,4% 25%);
  background:rgba(26,92,56,.12);
  display:flex;align-items:center;justify-content:center;
}
.cd-hex-inner{
  width:calc(100% - 4px);height:calc(100% - 4px);
  clip-path:polygon(50% 0%,96% 25%,96% 75%,50% 100%,4% 75%,4% 25%);
  background:linear-gradient(165deg,#0f3020 0%,var(--E1) 55%,var(--E) 100%);
  display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;
}
.cd-hex-inner::before{
  content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(60deg,rgba(212,175,55,.03) 0,rgba(212,175,55,.03) 1px,transparent 1px,transparent 16px);
}

.hero-name{
  font-family:var(--T1);
  font-size:clamp(32px,8vw,56px);
  color:var(--CH);line-height:1;
  text-shadow:0 0 10px rgba(212,175,55,.3);
  position:relative;z-index:1;
  will-change:transform;
}
@media(hover:hover){
  .hero-name{ text-shadow:0 0 24px rgba(212,175,55,.6),0 0 45px rgba(212,175,55,.2); }
}
.cd-l{font-size:clamp(6px,1.6vw,9px);letter-spacing:.4em;color:var(--G);text-transform:uppercase;font-weight:600;opacity:.85}
.cd-sep{font-size:clamp(14px,3vw,20px);color:var(--G);opacity:.45;line-height:1}

/* ════════════════════════════════════════════════════
   FAMILIA — HexFractal Frame (after contador)
════════════════════════════════════════════════════ */
/* ════════ FAMILIA — Premium Card ═══════════════════════════ */
#familia{position:relative;padding:4rem 1.2rem 4.5rem;text-align:center;overflow:hidden}
#familia::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 80% 55% at 50% 50%,rgba(26,92,56,.1) 0%,transparent 70%);
}
.fam-card{
  position:relative;z-index:2;
  max-width:340px;margin:2.5rem auto 0;
  background:rgba(11,36,24,.6);
  border:1px solid rgba(212,175,55,.2);
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 24px 64px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.03);
}
.fam-deco-svg{
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;z-index:3;
}
.fam-photo-wrap{
  position:relative;width:100%;overflow:hidden;
  aspect-ratio:4/3;
}
.fam-photo{
  width:100%;height:100%;object-fit:cover;object-position:top center;
  display:block;filter:brightness(.92) saturate(1.1);
  transition:transform .6s ease;
}
.fam-card:hover .fam-photo{transform:scale(1.04)}
.fam-photo-shine{
  position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(212,175,55,.08) 0%,transparent 55%),
             linear-gradient(180deg,transparent 60%,rgba(7,24,16,.7) 100%);
}
.fam-info{
  padding:1.4rem 1.2rem 1.6rem;
  text-align:center;
}
.fam-role{
  font-size:8px;letter-spacing:.4em;color:var(--G);
  text-transform:uppercase;opacity:.8;margin-bottom:.5rem;
}
.fam-names{
  font-family:var(--T1);font-size:clamp(13px,3.5vw,17px);
  color:var(--CH);line-height:1.5;margin:0;
}
.fam-divider{
  width:48px;height:1px;margin:1rem auto;
  background:linear-gradient(90deg,transparent,var(--G),transparent);
}
.fam-quote{
  font-size:10.5px;color:rgba(243,229,171,.38);
  line-height:1.9;font-style:italic;margin:0;
}

/* ════════════════════════════════════════════════════
   TIMELINE — Glass Panel Cards
════════════════════════════════════════════════════ */
.tl-card{
  flex:1;display:flex;flex-direction:column;gap:.3rem;min-width:40%;
  background:rgba(11,36,24,.55);
  border:1px solid rgba(212,175,55,.22);
  border-radius:16px;padding:1rem 1.1rem;
  backdrop-filter:blur(18px) saturate(1.2);
  box-shadow:0 8px 32px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.04);
  position:relative;overflow:hidden;
}
.tl-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(212,175,55,.45),transparent);
}



/* ════════════════════════════════════════════════════
   CARDSTACK GALLERY
════════════════════════════════════════════════════ */
.cardstack-scene{
  width:100%;max-width:320px;
  margin:2.5rem auto 0;
  position:relative;
}
.cs-deck{
  position:relative;width:100%;
  height:420px;
}
.cs-card{
  position:absolute;inset:0;
  border-radius:20px;overflow:hidden;
  border:1px solid rgba(212,175,55,.3);
  box-shadow:0 20px 60px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.04);
  background-size:cover;background-position:top center;
  transform-origin:center 110%;
  transition:transform .5s cubic-bezier(.34,1.2,.64,1),opacity .4s,z-index 0s;
  cursor:grab;
}
.cs-card::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 50%,rgba(7,24,16,.75) 100%);
}
/* Hex corner accents */
.cs-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;z-index:2;
  background:linear-gradient(90deg,transparent,rgba(212,175,55,.6),transparent);
}
.cs-controls{
  display:flex;align-items:center;justify-content:center;gap:1.5rem;
  margin-top:1.4rem;
}
.cs-btn{
  width:46px;height:46px;border-radius:50%;
  background:var(--GLS);border:1px solid var(--GD);
  color:var(--G);font-size:22px;font-weight:300;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;backdrop-filter:blur(12px);
  transition:transform .2s,box-shadow .2s,border-color .2s;
}
.cs-btn:hover{transform:scale(1.12);border-color:var(--G);box-shadow:0 0 22px rgba(212,175,55,.45)}
.cs-counter{font-size:9px;letter-spacing:.4em;color:rgba(243,229,171,.35);text-transform:uppercase}
.gal-wm{margin-top:2rem;font-size:9px;letter-spacing:.3em;color:rgba(243,229,171,.2);text-transform:uppercase}

/* ─── NEW TIMELINE ─── */
.tl-container{
  display:flex;flex-direction:column;gap:1.5rem;
  max-width:480px;margin:0 auto;padding-left:10px;
}
.tl-container .tl-card{
  background:var(--E1);
  border:1px solid rgba(212,175,55,.12);
  border-left:3px solid var(--G);
  border-radius:12px;padding:1.4rem;
  position:relative;
  box-shadow:6px 6px 18px var(--ND),-4px -4px 12px var(--NL);
  transition:transform .3s, box-shadow .3s;
}
.tl-container .tl-card::before{
  content:'';position:absolute;
  left:-8px;top:22px;width:12px;height:12px;
  background:var(--E);border:2px solid var(--G);
  border-radius:50%;
  box-shadow:0 0 10px rgba(212,175,55,.6);
}