/* ============================================================
   HAZMANÁ v2 — Editorial Romance + intro de invitaciones
   crema · vino · oro · pasteles
   ============================================================ */
:root{
  --cream:#F6EEE1; --cream-2:#EFE4D2; --paper:#FFFBF3;
  --ink:#2A1B20; --ink-2:#6B5750; --ink-3:#9C8A80;
  --wine:#4C1E2B; --wine-2:#6A2A3B;
  --line:rgba(42,27,32,.14); --line-s:rgba(42,27,32,.07);
  --gold:#BE9445; --gold-d:#9A7430; --gold-l:#E8D29C;
  --foil:linear-gradient(120deg,#EAD49C 0%,#BE9445 36%,#F2E4B6 58%,#9A7430 100%);
  --blush:#E7C4CB; --blush-d:#CF93A1; --sage:#BFD0B6; --sage-d:#8DA983; --lav:#D3C7E6; --lav-d:#A593C7;
  --serif:"Bodoni Moda",Georgia,serif; --sans:"Mulish",system-ui,-apple-system,sans-serif; --script:"Pinyon Script",cursive;
  --pad:clamp(22px,5.5vw,84px); --maxw:1320px;
  --sh-sm:0 4px 18px rgba(42,27,32,.08); --sh:0 26px 60px -28px rgba(42,27,32,.4); --sh-lg:0 50px 110px -45px rgba(42,27,32,.55);
  --ease:cubic-bezier(.22,.61,.36,1); --expo:cubic-bezier(.86,0,.07,1); --out:cubic-bezier(.16,1,.3,1);
}
*{ margin:0; padding:0; box-sizing:border-box; }
html,body{ height:100%; }
body{ font-family:var(--sans); background:var(--ink); color:var(--ink); font-weight:300; line-height:1.6; overflow:hidden; -webkit-font-smoothing:antialiased; cursor:none; }
@media (hover:none){ body{ cursor:auto; } button{ cursor:pointer; } }
button{ font-family:inherit; cursor:none; border:none; background:none; color:inherit; }
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }
::selection{ background:var(--gold-l); color:var(--ink); }
h1,h2,h3{ font-family:var(--serif); font-weight:500; line-height:1.02; letter-spacing:-.01em; }
.script{ font-family:var(--script); font-weight:400; }
.foil{ background:var(--foil); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
.eyebrow{ font-family:var(--sans); font-weight:600; text-transform:uppercase; letter-spacing:.34em; font-size:11.5px; color:var(--gold-d); }

/* ---------- Cursor ---------- */
.cur-dot,.cur-ring{ position:fixed; top:0; left:0; border-radius:50%; pointer-events:none; z-index:9999; }
.cur-dot{ width:6px; height:6px; background:var(--gold-d); transform:translate(-50%,-50%); mix-blend-mode:multiply; }
.cur-ring{ width:40px; height:40px; border:1.5px solid var(--gold); transform:translate(-50%,-50%); transition:width .3s var(--ease),height .3s var(--ease),background .3s,border-color .3s; }
.cur-ring.hov{ width:64px; height:64px; background:rgba(190,148,69,.12); }
.cur-ring.down{ width:28px; height:28px; }
.dark-ui .cur-ring{ border-color:var(--gold-l); }
@media (hover:none){ .cur-dot,.cur-ring{ display:none; } }

/* ---------- Pétalos ---------- */
.petals{ position:fixed; inset:0; pointer-events:none; z-index:70; overflow:hidden; transition:opacity 1.6s ease; }
.petals.gone{ opacity:0; }
.petal{ position:absolute; top:-8vh; width:14px; height:14px; border-radius:0 70% 0 70%; opacity:0; animation:fall linear infinite; }
@keyframes fall{ 0%{ opacity:0; transform:translateY(-10vh) rotate(0);} 8%{ opacity:.8;} 90%{ opacity:.8;} 100%{ opacity:0; transform:translateY(112vh) translateX(var(--dx,40px)) rotate(540deg);} }

/* ============================================================
   STAGE / PANELES
   ============================================================ */
.stage{ position:fixed; inset:0; overflow:hidden; }
.track{ position:absolute; left:0; right:0; top:0; transition:transform .9s var(--out); will-change:transform; transform:translateY(calc(var(--cur,0) * -100svh)); }
.panel{ position:relative; width:100%; height:100svh; overflow:hidden; display:flex; align-items:center; padding:0 var(--pad); }
.panel-in{ width:100%; max-width:var(--maxw); margin:0 auto; position:relative; z-index:2; }
.p-intro{ background:var(--cream); }
.p-why{ background:var(--wine); color:var(--cream); }
.p-demo{ background:radial-gradient(120% 90% at 82% 8%, #F6E6E9 0%, var(--cream) 55%); }
.p-price{ background:var(--ink); color:var(--cream); }

/* ---------- Rail ---------- */
.rail{ position:fixed; right:clamp(14px,3vw,40px); top:50%; transform:translateY(-50%); z-index:120; display:flex; flex-direction:column; gap:18px; }
.rail button{ display:flex; align-items:center; gap:12px; justify-content:flex-end; }
.rail .lbl{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); opacity:0; transform:translateX(6px); transition:.4s var(--ease); white-space:nowrap; }
.rail .pip{ width:10px; height:10px; border-radius:50%; border:1.5px solid var(--ink-3); transition:.45s var(--ease); }
.rail button:hover .lbl{ opacity:1; transform:none; }
.rail button.on .pip{ background:var(--gold); border-color:var(--gold); box-shadow:0 0 0 5px rgba(190,148,69,.16); }
.rail button.on .lbl{ opacity:1; transform:none; color:var(--ink); }
.dark-ui .rail .pip{ border-color:rgba(246,238,225,.45); }
.dark-ui .rail .lbl{ color:rgba(246,238,225,.6); }
.dark-ui .rail button.on .pip{ background:var(--gold-l); border-color:var(--gold-l); box-shadow:0 0 0 5px rgba(232,210,156,.18); }
.dark-ui .rail button.on .lbl{ color:var(--cream); }
@media (max-width:720px){ .rail .lbl{ display:none; } .rail{ gap:13px; } }

/* ---------- Marca + cue ---------- */
.brand{ position:fixed; top:clamp(20px,3.4vw,38px); left:var(--pad); z-index:120; font-family:var(--serif); font-weight:600; font-size:26px; letter-spacing:-.01em; }
.brand .dot{ color:var(--gold-d); }
.dark-ui .brand{ color:var(--cream); } .dark-ui .brand .dot{ color:var(--gold-l); }
.cue{ position:fixed; bottom:24px; left:50%; transform:translateX(-50%); z-index:120; display:flex; flex-direction:column; align-items:center; gap:9px; color:var(--ink-2); font-size:10.5px; letter-spacing:.28em; text-transform:uppercase; transition:opacity .6s; }
.cue .mouse{ width:22px; height:34px; border:1.5px solid currentColor; border-radius:12px; position:relative; }
.cue .mouse::after{ content:""; position:absolute; left:50%; top:6px; width:3px; height:6px; background:currentColor; border-radius:2px; transform:translateX(-50%); animation:wheel 1.5s var(--ease) infinite; }
@keyframes wheel{ 0%{ opacity:0; transform:translate(-50%,0);} 40%{ opacity:1;} 100%{ opacity:0; transform:translate(-50%,9px);} }
.dark-ui .cue{ color:rgba(246,238,225,.7); }
.cue.hide{ opacity:0; pointer-events:none; }

/* ---------- Botones ---------- */
.btn{ display:inline-flex; align-items:center; gap:10px; font-family:var(--sans); font-weight:600; font-size:14.5px; letter-spacing:.01em; padding:15px 30px; border-radius:100px; position:relative; overflow:hidden; transition:transform .45s var(--out), box-shadow .45s var(--out); }
.btn .a{ position:relative; z-index:1; transition:transform .4s var(--ease); }
.btn:hover{ transform:translateY(-3px); } .btn:hover .a.arr{ transform:translateX(4px); }
.btn-gold{ background:var(--foil); color:var(--ink); box-shadow:var(--sh-sm); }
.btn-gold:hover{ box-shadow:0 18px 36px -16px rgba(154,116,48,.7); }
.btn-line{ border:1.5px solid var(--line); color:var(--ink); }
.dark-ui .btn-line,.p-why .btn-line,.p-price .btn-line{ border-color:rgba(246,238,225,.32); color:var(--cream); }
.btn-line:hover{ border-color:var(--gold); }

/* ---------- Kinetic ---------- */
.kin{ opacity:0; transform:translateY(34px); transition:opacity .9s var(--out), transform 1s var(--out); transition-delay:var(--d,0s); }
.panel.live .kin{ opacity:1; transform:none; }
.line{ display:block; overflow:hidden; }
.line>span{ display:block; transform:translateY(112%); transition:transform 1.05s var(--out); transition-delay:var(--d,0s); }
.panel.live .line>span{ transform:none; }

/* ============================================================
   PANEL 1 · INTRO — invitaciones que se dispersan / arco
   ============================================================ */
.intro{ position:absolute; inset:0; }
#field{ position:absolute; inset:0; z-index:1; transform-style:preserve-3d; }
/* Formato sobre ancho (landscape) */
.c3d{ position:absolute; left:50%; top:50%; width:118px; height:74px; margin:-37px 0 0 -59px; transform-style:preserve-3d; perspective:900px; will-change:transform; --idx-d:calc(var(--i,0) * 55ms); }
.c3d:hover{ z-index:60; }

/* ---------- Sobre que se abre ---------- */
.env{ position:absolute; inset:0; transform-style:preserve-3d; perspective:700px; }

/* cuerpo del sobre (pocket) */
.env-pocket{
  position:absolute; inset:0;
  background:var(--c1,#E7C4CB);
  border-radius:5px;
  box-shadow:0 14px 28px -12px rgba(0,0,0,.5);
  overflow:hidden;
  z-index:2;
  color:var(--c-tx,#8a4f5b);
}
/* pliegues diagonales del sobre cerrado: las dos líneas de las solapas laterales convergen al centro */
.env-pocket::before{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(to top right, transparent 49.6%, rgba(0,0,0,.16) 50%, transparent 50.4%) left top / 50% 100% no-repeat,
    linear-gradient(to top left,  transparent 49.6%, rgba(0,0,0,.16) 50%, transparent 50.4%) right top / 50% 100% no-repeat;
  z-index:1;
}
/* sombra del bolsillo inferior */
.env-pocket::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0; height:55%;
  background:linear-gradient(180deg, rgba(0,0,0,.08), transparent 70%);
  clip-path:polygon(0 100%, 50% 0, 100% 100%);
  z-index:1;
}
.env-pocket > *{ position:absolute; z-index:3; }
.env-stamp{
  top:5px; right:5px;
  width:14px; height:16px; border-radius:1px;
  background:var(--foil);
  border:1px dashed rgba(255,255,255,.55);
  box-shadow:0 1px 2px rgba(0,0,0,.25);
}
.env-line{ left:14%; right:38%; height:1px; background:currentColor; opacity:.35; }
.env-line:nth-of-type(2){ bottom:24px; }
.env-line.short{ bottom:10px; right:50%; opacity:.28; }
.env-mono{ left:0; right:0; bottom:34px; text-align:center; font-family:var(--serif); font-size:13px; line-height:1; color:var(--c-tx,#8a4f5b); white-space:nowrap; }
.env-tiny{ left:0; right:0; bottom:3px; text-align:center; font-size:5.5px; letter-spacing:.22em; text-transform:uppercase; opacity:.7; }

/* solapa superior que se abre */
.env-flap{
  position:absolute;
  left:0; right:0; top:0; height:60%;
  background:var(--c1,#E7C4CB);
  filter:brightness(.94) saturate(1.04);
  clip-path:polygon(0 0, 100% 0, 50% 100%);
  transform-origin:top center;
  transform:rotateX(0deg);
  transition:transform .9s var(--out);
  transition-delay:var(--idx-d);
  backface-visibility:visible;
  z-index:4;
  box-shadow:0 2px 4px rgba(0,0,0,.14);
}
.env-flap::before{ /* sombra interior bajo la solapa cuando está cerrada */
  content:"";
  position:absolute; left:0; right:0; bottom:0; height:32%;
  background:linear-gradient(180deg, transparent, rgba(0,0,0,.16));
  clip-path:polygon(0 0, 100% 0, 50% 100%);
}
.env-seal{
  position:absolute;
  left:50%; top:60%;
  width:16px; height:16px;
  margin:-8px 0 0 -8px;
  border-radius:50%;
  background:var(--foil);
  color:var(--wine);
  display:grid; place-items:center;
  font-family:var(--serif);
  font-size:9px;
  box-shadow:0 3px 6px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.35);
  transition:opacity .35s ease, transform .35s ease;
  transition-delay:var(--idx-d);
  z-index:5;
}

/* carta que emerge — landscape interior */
.env-card{
  position:absolute;
  left:7%; right:7%;
  top:14%; bottom:14%;
  background:var(--paper);
  border-radius:3px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  padding:5px 7px; gap:1px;
  box-shadow:0 5px 10px rgba(0,0,0,.22), inset 0 0 0 1px rgba(190,148,69,.18);
  transform:translateY(0) rotate(0);
  opacity:0;
  transition:transform .95s var(--out), opacity .35s ease;
  transition-delay:var(--idx-d);
  z-index:3;
}
.env-card-script{ font-family:var(--script); font-size:18px; color:var(--c-ac,#BE9445); line-height:.7; margin-top:-1px; }
.env-card-name{ font-family:var(--serif); font-size:9px; letter-spacing:.05em; color:var(--ink); }
.env-card-rule{ width:28px; height:1px; background:var(--c-ac,#BE9445); opacity:.55; margin:1px 0; }
.env-card-dt{ font-size:5px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3); }
.env-card-tag{ font-size:5.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-d); font-weight:700; margin-top:1px; }

/* ABIERTOS — disparado en hover individual o por el scroll del arco */
.c3d:hover .env-flap,
.c3d.open .env-flap{ transform:rotateX(176deg); }
.c3d:hover .env-seal,
.c3d.open .env-seal{ opacity:0; transform:scale(.45); }
/* el card sólo asoma la mitad superior — translateZ lo lleva DELANTE de la solapa rotada en 3D */
.c3d:hover .env-card,
.c3d.open .env-card{ transform:translateY(-46%) translateZ(40px) rotate(-2deg); opacity:1; z-index:7; transition-delay:calc(var(--idx-d) + .18s); }

/* texto del hero superpuesto */
.intro-copy{ position:absolute; left:0; right:0; top:50%; transform:translateY(-50%); z-index:5; display:flex; flex-direction:column; align-items:center; text-align:center; padding:0 var(--pad); pointer-events:none; }
.intro-copy::before{ content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:min(820px,96vw); height:min(560px,80vh); background:radial-gradient(closest-side, rgba(246,238,225,.92) 0%, rgba(246,238,225,.7) 45%, transparent 78%); z-index:-1; }
.intro-copy .st{ font-family:var(--script); font-size:clamp(28px,4vw,46px); color:var(--gold-d); line-height:.8; }
.intro-copy h1{ font-size:clamp(44px,8vw,104px); margin:6px 0 18px; }
.intro-copy h1 em{ font-style:italic; }
.intro-copy p{ font-size:clamp(15px,1.4vw,18.5px); color:var(--ink-2); max-width:430px; }
.intro-copy p b{ color:var(--ink); font-weight:600; }
.intro-actions{ display:flex; gap:12px; margin-top:26px; pointer-events:auto; }
.intro-cap{ position:absolute; left:0; right:0; bottom:66px; z-index:5; text-align:center; font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-3); pointer-events:none; transition:opacity .5s; }

/* ============================================================
   PANEL 2 · POR QUÉ (vino)
   ============================================================ */
.why-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(34px,6vw,90px); align-items:center; }
.why-copy .st{ font-family:var(--script); font-size:clamp(28px,3.6vw,44px); color:var(--gold-l); display:block; line-height:.8; }
.why-copy h2{ font-size:clamp(34px,5.2vw,66px); color:var(--cream); margin:8px 0 18px; }
.why-copy .lede{ color:rgba(246,238,225,.76); font-size:16.5px; max-width:380px; }
/* mini-stats compactos a la izquierda */
.why-stats{ display:flex; align-items:center; gap:22px; margin-top:30px; padding-top:24px; border-top:1px solid rgba(246,238,225,.18); }
.why-stat{ display:flex; flex-direction:column; align-items:flex-start; }
.why-stat .n{ font-family:var(--serif); font-size:clamp(44px,5.6vw,70px); line-height:.85; color:var(--gold-l); display:flex; align-items:baseline; gap:2px; }
.why-stat .n .x{
  font-size:1.45em;          /* X dominante */
  line-height:.78;
  font-weight:700;
  background:var(--foil);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  margin-left:2px;
  letter-spacing:-.02em;
  filter:drop-shadow(0 2px 6px rgba(190,148,69,.35));
}
.why-stat .lbl{ font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:rgba(246,238,225,.72); margin-top:6px; }
.why-sep{ width:1px; align-self:stretch; background:rgba(246,238,225,.16); }
@media (max-width:920px){ .why-grid{ grid-template-columns:1fr; gap:26px; } }

/* ============================================================
   DROPENV — sobre que cae girando y se abre
   ============================================================ */
.dropenv-stage{
  position:relative;
  width:100%;
  height:clamp(360px, 56vh, 520px);
  display:grid; place-items:center;
  perspective:1100px;
  /* sin overflow:hidden — el card asoma por arriba mostrando "100%" */
}
.dropenv-shadow{
  position:absolute;
  left:50%; bottom:22%;
  transform:translateX(-50%);
  width:clamp(260px, 28vw, 360px);
  height:18px;
  background:radial-gradient(ellipse at center, rgba(0,0,0,.55), transparent 70%);
  filter:blur(3px);
  opacity:0;
  transition:opacity .55s ease;
}
.panel.live .dropenv-shadow{ opacity:.6; transition-delay:1.55s; }

.dropenv{
  position:relative;
  width:clamp(280px, 30vw, 380px);
  aspect-ratio:5 / 3;
  --c1: var(--lav);
  --c-tx: #4f3c70;
  --c-ac: var(--gold-d);
  opacity:0;
  transform:translateY(-110vh) rotate(-720deg) scale(.85);
  transform-origin:center;
  transform-style:preserve-3d;     /* permite que el card use translateZ y quede sobre la solapa */
  filter:drop-shadow(0 30px 35px rgba(0,0,0,.45));
}
.panel.live .dropenv{
  animation:dropenv-fall 1.8s cubic-bezier(.34,.78,.22,1) .15s forwards;
}
@keyframes dropenv-fall{
  0%   { opacity:0; transform:translateY(-110vh) rotate(-720deg) scale(.85); }
  5%   { opacity:1; }
  55%  { transform:translateY(28px)   rotate(-14deg) scale(1.02); opacity:1; }
  68%  { transform:translateY(-10px)  rotate(-4deg)  scale(.99); }
  80%  { transform:translateY(6px)    rotate(-2deg)  scale(1); }
  92%  { transform:translateY(-2px)   rotate(-2deg)  scale(1); }
  100% { transform:translateY(0)      rotate(-2deg)  scale(1); opacity:1; }
}

/* el .env interior ocupa todo el dropenv */
.dropenv .env{ position:absolute; inset:0; }

/* override de tamaños internos del sobre (los px estaban calibrados para el intro pequeño) */
.dropenv .env-pocket{ border-radius:9px; }
.dropenv .env-stamp{ width:28px; height:32px; top:10px; right:10px; border-radius:2px; }
.dropenv .env-mono{ font-size:clamp(20px,2.1vw,28px); bottom:clamp(48px,5vw,68px); letter-spacing:.04em; }
.dropenv .env-line{ left:14%; right:14%; height:1.5px; opacity:.32; }
.dropenv .env-line:nth-of-type(2){ bottom:clamp(40px,4vw,56px); }
.dropenv .env-line.short{ bottom:clamp(20px,2.5vw,30px); right:28%; }
.dropenv .env-tiny{ bottom:clamp(8px,1vw,14px); font-size:clamp(8.5px,.9vw,11px); letter-spacing:.24em; }
.dropenv .env-seal{ width:44px; height:44px; margin:-22px 0 0 -22px; font-size:24px; }

/* solapa, sello y carta — animadas con keyframes propios */
.panel.live .dropenv .env-flap{
  animation:dropenv-flap 1.05s cubic-bezier(.22,.61,.36,1) 2.0s forwards;
}
@keyframes dropenv-flap{
  from{ transform:rotateX(0deg); }
  to  { transform:rotateX(178deg); }
}
.panel.live .dropenv .env-seal{
  animation:dropenv-seal-pop 0.5s ease 2.0s forwards;
}
@keyframes dropenv-seal-pop{
  to{ opacity:0; transform:scale(.4); }
}

/* CARD interior grande con "100% personalizada" */
.dropenv .env-card{ border-radius:6px; padding:8% 7%; gap:0; z-index:6; }
.panel.live .dropenv .env-card{
  animation:dropenv-card-emerge 1.15s cubic-bezier(.16,1,.3,1) 2.35s forwards;
}
@keyframes dropenv-card-emerge{
  from{ transform:translateY(0)    translateZ(0)    rotate(0deg); opacity:0; }
  to  { transform:translateY(-44%) translateZ(60px) rotate(-2deg); opacity:1; }
}
.bigpct{
  font-family:var(--serif);
  font-size:clamp(46px, 5.8vw, 72px);
  line-height:1;
  color:var(--gold-d);
  font-weight:600;
  letter-spacing:-.02em;
}
.bigpct b{ font-weight:700; }
.bigpct i{
  font-style:normal;
  font-size:.55em;
  vertical-align:super;
  margin-left:1px;
  color:var(--gold-d);
  font-weight:500;
}
.bigscript{
  font-family:var(--script);
  font-size:clamp(26px, 3vw, 40px);
  color:var(--c-ac, var(--gold-d));
  line-height:.8;
  margin-top:-4px;
}

@media (max-width:920px){
  .dropenv-stage{ height:clamp(300px, 56vh, 460px); }
  .dropenv{ width:min(86vw, 360px); }
}

/* ============================================================
   FORGE — invitación forjándose (legacy, no se usa)
   ============================================================ */
.forge{
  position:relative;
  width:100%;
  height:clamp(360px, 56vh, 520px);
  display:grid; place-items:center;
  perspective:1100px;
}
.forge-pedestal{
  position:absolute;
  left:50%; bottom:8%;
  transform:translateX(-50%);
  width:clamp(220px,28vw,360px);
  height:14px;
  background:radial-gradient(ellipse at center, rgba(0,0,0,.45), transparent 70%);
  filter:blur(2px);
  opacity:0;
  transition:opacity .8s ease .15s;
}
.panel.live .forge-pedestal{ opacity:.55; }

.forge-card{
  position:relative;
  width:clamp(240px,30vw,360px);
  aspect-ratio: 5 / 7;
  background:var(--paper);
  border-radius:6px;
  box-shadow:
    0 30px 50px -22px rgba(0,0,0,.55),
    0 0 0 1px rgba(190,148,69,.22) inset;
  color:var(--gold-d);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:14% 12%;
  text-align:center;
  opacity:0;
  transform:translateY(28px) rotateX(8deg) scale(.96);
  transition:opacity .85s var(--out), transform 1.1s var(--out);
}
.panel.live .forge-card{
  opacity:1;
  transform:translateY(0) rotateX(0deg) scale(1);
  animation: forge-float 6s ease-in-out 1.4s infinite alternate;
}
@keyframes forge-float{
  from{ transform:translateY(0)  rotateX(0deg) rotateZ(0deg) scale(1); }
  to  { transform:translateY(-7px) rotateX(0deg) rotateZ(.5deg) scale(1); }
}

/* esquinas florales */
.forge-orn{ position:absolute; width:clamp(36px,4vw,52px); height:clamp(36px,4vw,52px); color:var(--gold-d); opacity:0; transition:opacity .3s ease; }
.forge-orn.tl{ top:5%; left:5%; }
.forge-orn.tr{ top:5%; right:5%; transform:scaleX(-1); }
.forge-orn.bl{ bottom:5%; left:5%; transform:scaleY(-1); }
.forge-orn.br{ bottom:5%; right:5%; transform:scale(-1,-1); }
.panel.live .forge-orn{ opacity:1; transition-delay:1.05s; }

.forge-orn .orn-p{ stroke-dasharray:1; stroke-dashoffset:1; }
.panel.live .forge-orn .orn-p{ animation: forge-draw 1.1s var(--out) 1.05s forwards; }
.forge-orn .orn-d{ opacity:0; transform-origin:center; transform:scale(0); }
.panel.live .forge-orn .orn-d{ animation: forge-bloom .6s var(--out) 1.65s forwards; }
.panel.live .forge-orn .orn-d:nth-of-type(2){ animation-delay:1.78s; }
.panel.live .forge-orn .orn-d:nth-of-type(3){ animation-delay:1.92s; }
@keyframes forge-draw{ to{ stroke-dashoffset:0; } }
@keyframes forge-bloom{ to{ opacity:1; transform:scale(1); } }

/* tipografía interior */
.forge-eyebrow{
  font-family:var(--sans); font-size:9.5px; letter-spacing:.32em; text-transform:uppercase;
  color:var(--gold-d); opacity:0; transform:translateY(8px);
  transition:opacity .55s ease 2.1s, transform .55s var(--out) 2.1s;
}
.panel.live .forge-eyebrow{ opacity:1; transform:none; }

.forge-script{
  width:88%; height:clamp(50px,7vw,82px); margin:6px 0 2px;
  color:var(--gold-d);
  display:block;
}
.forge-script-p{ stroke-dasharray:1; stroke-dashoffset:1; }
.panel.live .forge-script-p{ animation: forge-draw 1.4s var(--out) .45s forwards; }

.forge-name{
  font-family:var(--serif); font-size:clamp(16px,1.6vw,22px); color:var(--ink); letter-spacing:.04em;
  opacity:0; transform:translateY(6px);
  transition:opacity .55s ease 1.95s, transform .55s var(--out) 1.95s;
}
.panel.live .forge-name{ opacity:1; transform:none; }

.forge-rule{
  width:60px; height:1px; background:var(--gold-d); opacity:0; margin:10px 0 8px;
  transform:scaleX(0); transform-origin:center;
  transition:opacity .35s ease 2.05s, transform .8s var(--out) 2.05s;
}
.panel.live .forge-rule{ opacity:.7; transform:scaleX(1); }

.forge-dt{
  font-size:10px; letter-spacing:.28em; text-transform:uppercase; color:var(--ink-2);
  opacity:0; transform:translateY(6px);
  transition:opacity .55s ease 2.2s, transform .55s var(--out) 2.2s;
}
.panel.live .forge-dt{ opacity:1; transform:none; }

/* barrido de oro */
.forge-card{ overflow:hidden; }
.forge-foil{
  position:absolute; top:-10%; bottom:-10%;
  left:-60%; width:50%;
  background:linear-gradient(110deg, transparent 0%, rgba(255,238,178,.0) 30%, rgba(255,243,200,.75) 50%, rgba(255,238,178,0) 70%, transparent 100%);
  transform:skewX(-14deg);
  pointer-events:none;
  opacity:0;
  z-index:6;
}
.panel.live .forge-foil{ animation: forge-foil 1.15s var(--out) 2.3s forwards; }
@keyframes forge-foil{
  0%   { left:-60%; opacity:0; }
  18%  { opacity:1; }
  100% { left:120%; opacity:0; }
}

/* sello al final */
.forge-seal{
  position:absolute;
  left:50%; bottom:-22px;
  width:46px; height:46px;
  margin-left:-23px;
  border-radius:50%;
  background:var(--foil);
  color:var(--wine);
  display:grid; place-items:center;
  font-family:var(--serif); font-size:22px;
  box-shadow:0 10px 22px -6px rgba(0,0,0,.5), inset 0 0 0 1.5px rgba(255,255,255,.4);
  opacity:0; transform:scale(.3) rotate(-30deg);
  transition:opacity .4s ease, transform .55s var(--out);
  transition-delay:2.85s;
  z-index:7;
}
.panel.live .forge-seal{ opacity:1; transform:scale(1) rotate(0deg); }

/* etiqueta de precio cae */
.forge-price{
  position:absolute;
  right:clamp(-6%,1vw,6%); bottom:6%;
  background:var(--paper);
  color:var(--ink);
  border-radius:14px;
  padding:12px 18px;
  text-align:right;
  box-shadow:0 18px 32px -14px rgba(0,0,0,.5), 0 0 0 1px rgba(190,148,69,.3);
  opacity:0; transform:translateY(-40px) rotate(-6deg);
  transition:opacity .5s ease, transform .85s cubic-bezier(.34,1.4,.64,1);
  transition-delay:3.1s;
  z-index:8;
}
.panel.live .forge-price{ opacity:1; transform:translateY(0) rotate(-2deg); }
.forge-price-old{ font-size:10px; letter-spacing:.14em; color:var(--ink-3); text-transform:uppercase; }
.forge-price-old s{ color:var(--blush-d); }
.forge-price-new{ font-family:var(--serif); font-size:clamp(26px,3vw,36px); color:var(--gold-d); line-height:1; margin-top:2px; }
.forge-price-new span{ font-family:var(--sans); font-size:11px; letter-spacing:.18em; color:var(--ink-3); margin-left:6px; font-weight:600; }

/* layout responsive */
@media (max-width:920px){
  .forge{ height:clamp(320px, 60vh, 460px); }
  .why-stats{ justify-content:center; }
}
@media (prefers-reduced-motion:reduce){
  .panel.live .forge-card{ animation:none; }
  .forge-script-p,.forge-orn .orn-p{ stroke-dashoffset:0 !important; }
  .forge-orn,.forge-orn .orn-d,.forge-eyebrow,.forge-name,.forge-rule,.forge-dt,.forge-seal,.forge-price{ opacity:1 !important; transform:none !important; }
}

/* ============================================================
   PANEL 3 · DEMO RSVP + lista
   ============================================================ */
.demo-grid{ display:grid; grid-template-columns:.92fr 1.08fr; gap:clamp(26px,3.6vw,56px); align-items:center; }
.demo-head .eyebrow{ display:block; margin-bottom:12px; }
.demo-head h2{ font-size:clamp(32px,4.8vw,58px); }
.demo-head .lede{ color:var(--ink-2); font-size:16px; margin:14px 0 20px; max-width:380px; }
.demo-feats{ list-style:none; display:flex; flex-direction:column; gap:11px; }
.demo-feats li{ display:flex; gap:11px; align-items:flex-start; font-size:14.5px; }
.demo-feats .ck{ width:22px; height:22px; border-radius:50%; flex:none; background:var(--sage); color:#3c5a36; display:grid; place-items:center; font-size:11px; margin-top:1px; }
.demo-tip{ margin-top:18px; font-size:12.5px; color:var(--ink-3); }
.demo-cols{ display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start; }
@media (max-width:1100px){ .demo-cols{ grid-template-columns:1fr; } }
@media (max-width:920px){ .demo-grid{ grid-template-columns:1fr; gap:26px; } }

.card{ background:var(--paper); border-radius:22px; box-shadow:var(--sh-lg); border:1px solid var(--line-s); overflow:hidden; }
.rsvp-top{ background:linear-gradient(165deg,#FFFCF6,#F4E7D6); padding:24px 24px 20px; text-align:center; border-bottom:1px solid var(--line-s); }
.rsvp-top .photo{ width:66px; height:66px; border-radius:50%; overflow:hidden; margin:0 auto 8px; border:3px solid var(--paper); box-shadow:var(--sh-sm); }
.rsvp-top .photo image-slot{ width:100%; height:100%; display:block; }
.rsvp-top .mini{ font-size:9.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--gold-d); }
.rsvp-top .bs{ font-family:var(--script); font-size:38px; color:var(--gold-d); line-height:.78; margin:4px 0 2px; }
.rsvp-top .nm2{ font-family:var(--serif); font-size:21px; letter-spacing:.05em; }
.rsvp-top .dt{ font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-2); margin-top:7px; }
.rsvp-body{ padding:20px 22px 24px; min-height:198px; }
.rsvp-q{ text-align:center; font-family:var(--serif); font-size:19px; margin-bottom:12px; }
.namein{ width:100%; padding:11px 14px; border:1px solid var(--line); border-radius:11px; background:var(--cream); font-family:var(--sans); font-size:14px; color:var(--ink); margin-bottom:12px; transition:.3s; }
.namein:focus{ outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(190,148,69,.18); }
.namein::placeholder{ color:var(--ink-3); }
.namein.shake{ animation:rsvp-shake .42s cubic-bezier(.36,.07,.19,.97); border-color:var(--blush-d); }
@keyframes rsvp-shake{ 10%,90%{transform:translateX(-1px);} 20%,80%{transform:translateX(2px);} 30%,50%,70%{transform:translateX(-5px);} 40%,60%{transform:translateX(5px);} }
.rsvp-hint{ font-size:11.5px; color:var(--blush-d); margin:-6px 0 12px; height:0; opacity:0; overflow:hidden; transition:opacity .25s, height .25s; }
.rsvp-hint.show{ height:16px; opacity:1; }
.reasonin{ width:100%; padding:11px 14px; border:1px solid var(--line); border-radius:11px; background:var(--cream); font-family:var(--sans); font-size:14px; color:var(--ink); margin-bottom:14px; resize:none; line-height:1.45; transition:.3s; }
.reasonin:focus{ outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(190,148,69,.18); }
.reasonin::placeholder{ color:var(--ink-3); }
.done .check.is-no{ background:linear-gradient(160deg,#E7C4CB,#CF93A1) !important; box-shadow:0 12px 26px rgba(207,147,161,.4); }

/* live guest-list rows (built by invite.js) */
.gl-row{ display:flex; align-items:center; gap:11px; padding:10px 10px; border-radius:12px; transition:background .3s; }
.gl-row:hover{ background:var(--cream); }
.gl-dot{ width:9px; height:9px; border-radius:50%; flex:none; background:var(--ink-3); }
.gl-row.s-c .gl-dot{ background:var(--sage-d); }
.gl-row.s-p .gl-dot{ background:var(--gold-d); }
.gl-row.s-d .gl-dot{ background:var(--blush-d); }
.gl-name{ flex:1; min-width:0; font-size:14px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gl-g{ flex:none; font-family:var(--serif); font-size:14px; color:var(--ink-2); min-width:18px; text-align:right; }
.gl-row.gnew{ animation:rin .7s var(--out) both; }
.stepper{ display:flex; align-items:center; justify-content:center; gap:15px; margin:4px 0 18px; }
.stepper button{ width:38px; height:38px; border-radius:50%; border:1px solid var(--line); display:grid; place-items:center; font-size:18px; background:var(--cream); transition:.3s var(--ease); }
.stepper button:hover{ background:var(--foil); color:#fff; border-color:transparent; transform:scale(1.08); }
.stepper .val{ font-family:var(--serif); font-size:32px; min-width:38px; text-align:center; }
.stepper .lbl{ display:block; font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); }
.rsvp-actions{ display:flex; gap:9px; }
.rsvp-actions .btn{ flex:1; justify-content:center; padding:12px; font-size:13.5px; }
.btn-no{ background:transparent; border:1px solid var(--line); }
.btn-no:hover{ border-color:var(--blush-d); color:var(--blush-d); }
.rsvp-step.hide{ display:none; }
.done{ text-align:center; }
.done .check{ width:62px; height:62px; border-radius:50%; background:var(--foil); margin:0 auto 12px; display:grid; place-items:center; box-shadow:0 12px 26px rgba(154,116,48,.4); }
.done .check svg{ width:30px; height:30px; }
.done h3{ font-size:25px; margin-bottom:5px; }
.done p{ color:var(--ink-2); font-size:13.5px; max-width:270px; margin:0 auto 13px; }
.done p b{ color:var(--ink); }
.pop{ animation:pop .6s var(--out) both; }
@keyframes pop{ 0%{ transform:scale(.65); opacity:0;} 60%{ transform:scale(1.05);} 100%{ transform:scale(1); opacity:1;} }
.live-tag{ display:inline-flex; align-items:center; gap:7px; font-size:11.5px; color:var(--sage-d); background:rgba(141,169,131,.16); padding:5px 12px; border-radius:100px; }
.live-tag .pulse{ width:7px; height:7px; border-radius:50%; background:var(--sage-d); animation:pulse 1.4s infinite; }
@keyframes pulse{ 0%,100%{ opacity:1;} 50%{ opacity:.3;} }

.glp{ background:var(--paper); border-radius:22px; box-shadow:var(--sh-lg); border:1px solid var(--line-s); overflow:hidden; }
.glp-head{ padding:15px 18px; border-bottom:1px solid var(--line-s); display:flex; align-items:center; justify-content:space-between; gap:10px; }
.glp-head .t{ font-family:var(--serif); font-size:17px; display:flex; align-items:center; gap:8px; }
.glp-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line-s); border-bottom:1px solid var(--line-s); }
.glp-stat{ background:var(--paper); padding:13px 6px; text-align:center; }
.glp-stat .n{ font-family:var(--serif); font-size:26px; line-height:1; }
.glp-stat .l{ font-size:9px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); margin-top:5px; }
.glp-stat.c .n{ color:var(--sage-d); } .glp-stat.p .n{ color:var(--gold-d); } .glp-stat.d .n{ color:var(--blush-d); }
.glp-chips{ display:flex; gap:6px; padding:12px 16px 5px; flex-wrap:wrap; }
.chip{ font-size:11.5px; padding:6px 12px; border-radius:100px; border:1px solid var(--line); color:var(--ink-2); transition:.3s var(--ease); }
.chip:hover{ border-color:var(--gold); }
.chip.on{ background:var(--ink); color:var(--cream); border-color:var(--ink); }
.glp-list{ padding:5px 11px 13px; max-height:212px; overflow-y:auto; }
.glp-list::-webkit-scrollbar{ width:7px; } .glp-list::-webkit-scrollbar-thumb{ background:var(--line); border-radius:7px; }
.grow{ display:flex; align-items:center; gap:11px; padding:10px 9px; border-radius:12px; transition:background .3s; }
.grow:hover{ background:var(--cream); }
.grow .av{ width:36px; height:36px; border-radius:50%; flex:none; display:grid; place-items:center; font-family:var(--serif); font-size:14px; font-weight:600; color:#fff; }
.grow .info{ flex:1; min-width:0; } .grow .nm{ font-size:14px; } .grow .meta{ font-size:11px; color:var(--ink-3); }
.pill{ font-size:10.5px; padding:4px 10px; border-radius:100px; font-weight:600; white-space:nowrap; }
.pill-c{ background:rgba(141,169,131,.2); color:#4d6b44; } .pill-p{ background:rgba(190,148,69,.18); color:var(--gold-d); } .pill-d{ background:rgba(207,147,161,.2); color:#a85a6a; }
.gnew{ animation:rin .7s var(--out) both; }
@keyframes rin{ 0%{ opacity:0; transform:translateX(-16px); background:rgba(190,148,69,.18);} 100%{ opacity:1; transform:none;} }

/* ============================================================
   PANEL 4 · PRECIO + CTA (ink)
   ============================================================ */
.price-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,72px); align-items:center; }
@media (max-width:920px){ .price-grid{ grid-template-columns:1fr; gap:28px; } }
.price-copy .st{ font-family:var(--script); font-size:clamp(28px,3.6vw,44px); color:var(--gold-l); display:block; line-height:.8; }
.price-copy h2{ font-size:clamp(34px,5vw,64px); color:var(--cream); margin:8px 0 16px; }
.price-copy .lede{ color:rgba(246,238,225,.76); font-size:16px; max-width:380px; margin-bottom:26px; }
.price-cta-row{ display:flex; gap:12px; flex-wrap:wrap; }
.price-contact{ margin-top:16px; font-size:13.5px; color:rgba(246,238,225,.7); letter-spacing:.01em; }
.price-contact a{ color:var(--gold-l); border-bottom:1px solid rgba(232,210,156,.4); padding-bottom:1px; transition:color .2s var(--ease), border-color .2s var(--ease); }
.price-contact a:hover{ color:#fff3d5; border-color:rgba(232,210,156,.85); }
.price-card{ background:var(--paper); color:var(--ink); border-radius:24px; box-shadow:var(--sh-lg); border:1px solid var(--gold-l); overflow:hidden; position:relative; }
.price-card .ribbon{ position:absolute; top:19px; right:-46px; transform:rotate(45deg); background:var(--foil); color:#fff; font-size:10px; letter-spacing:.16em; text-transform:uppercase; padding:6px 54px; box-shadow:var(--sh-sm); }
.price-top{ padding:32px 38px 24px; text-align:center; border-bottom:1px solid var(--line-s); }
.amount{ display:flex; flex-direction:column; align-items:center; line-height:1; }
.amount .cur{ font-family:var(--sans); font-weight:600; font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-2); }
.amount .big{ font-family:var(--serif); font-weight:600; font-size:clamp(54px,9vw,84px); margin:4px 0; }
.amount .to{ font-size:15px; color:var(--ink-2); } .amount .to b{ color:var(--ink); font-weight:700; }
.compare{ color:var(--ink-2); margin-top:11px; font-size:13.5px; } .compare s{ color:var(--blush-d); }
.feats{ padding:22px 38px 6px; display:grid; gap:12px; }
.feats .f{ display:flex; gap:11px; font-size:14px; align-items:flex-start; } .feats .ck{ color:var(--gold-d); flex:none; margin-top:2px; }
.price-foot2{ padding:8px 38px 32px; }
.price-foot2 .btn{ width:100%; justify-content:center; padding:15px; font-size:15px; }
.price-foot2 .note{ text-align:center; font-size:12px; color:var(--ink-3); margin-top:14px; }

/* shake sutil cuando el usuario intenta saltar la animación */
.panel.hint{ animation: nudge .42s var(--out); }
@keyframes nudge{ 0%,100%{transform:translateY(0);} 30%{transform:translateY(-6px);} 60%{transform:translateY(3px);} }

/* ============================================================
   PANEL · LOGÍSTICA (ceremonia → mesas)
   ============================================================ */
.p-seats{
  background:
    radial-gradient(120% 90% at 18% 18%, #F4E0D6 0%, transparent 55%),
    radial-gradient(120% 90% at 82% 82%, #E9D2BF 0%, transparent 55%),
    linear-gradient(180deg, var(--cream) 0%, #EFDDCB 100%);
  color:var(--ink);
}

/* — Escenario (capa de animación, no recibe clicks) — */
.seats-scene{ position:absolute; inset:0; z-index:1; pointer-events:none; color:var(--gold-d); }

.seats-aisle{
  position:absolute; left:50%; top:0; height:100%;
  width:clamp(38px,5vw,64px); transform:translateX(-50%);
  background:
    linear-gradient(180deg, transparent 0%, rgba(190,148,69,.06) 22%, rgba(190,148,69,.22) 60%, rgba(154,116,48,.08) 100%);
  border-left:1px dashed rgba(190,148,69,.28);
  border-right:1px dashed rgba(190,148,69,.28);
  opacity:.9; transition:opacity .9s ease;
}
.seats-rearrange .seats-aisle{ opacity:0; }

.seats-altar{
  position:absolute; left:50%; top:clamp(28px,6vh,72px);
  width:clamp(180px,22vw,300px); height:clamp(70px,9vw,118px);
  transform:translateX(-50%); color:var(--wine);
  transition:opacity .8s ease, transform .8s ease;
  filter:drop-shadow(0 8px 14px rgba(76,30,43,.18));
}
.seats-altar svg{ width:100%; height:100%; fill:currentColor; stroke:currentColor; }
.seats-altar svg path{ fill:none; stroke-width:1.6; }
.seats-rearrange .seats-altar{ opacity:0; transform:translateX(-50%) translateY(-14px) scale(.96); }

/* — Capas absolutas centradas — */
.seats-people, .seats-tables{ position:absolute; left:50%; top:50%; width:0; height:0; }
.seats-tables{ z-index:1; }
.seats-people{ z-index:2; }

/* — Personitas — */
.person{
  position:absolute; left:0; top:0;
  width:18px; height:30px;
  display:flex; flex-direction:column; align-items:center;
  transform:
    translate(var(--cx,0px), var(--cy,0px))
    translate(-50%,-50%)
    rotate(var(--cr,0deg));
  transition:transform 1.45s cubic-bezier(.62,.04,.2,1);
  transition-delay:var(--dly,0ms);
  will-change:transform;
}
.seats-rearrange .person{
  transform:
    translate(var(--tx,0px), var(--ty,0px))
    translate(-50%,-50%)
    rotate(var(--tr,0deg));
}
.person .head{
  width:10px; height:10px; border-radius:50%;
  background:var(--hd, #E9C6A8);
  box-shadow:0 1px 0 rgba(0,0,0,.06), inset 0 -1px 0 rgba(0,0,0,.05);
}
.person .body{
  width:16px; height:18px; margin-top:1px;
  background:var(--dr, var(--wine));
  border-radius:9px 9px 4px 4px;
  box-shadow:0 3px 6px -3px rgba(42,27,32,.25);
}

/* — Mesas redondas — */
.table-circle{
  position:absolute; left:0; top:0;
  width:var(--tr,76px); height:var(--tr,76px);
  transform:
    translate(var(--tx,0px), var(--ty,0px))
    translate(-50%,-50%) scale(.78);
  opacity:0;
  transition:opacity 1s ease, transform 1.1s var(--out);
  transition-delay:.25s;
}
.seats-rearrange .table-circle{ opacity:1; transform:translate(var(--tx,0px), var(--ty,0px)) translate(-50%,-50%) scale(1); }
.table-circle .cloth{
  position:absolute; inset:-10%; border-radius:50%;
  background:radial-gradient(circle at 38% 32%, #FBF1DE 0%, #ECD9BE 55%, #C8A878 100%);
  box-shadow:0 14px 30px -10px rgba(76,30,43,.32), inset 0 0 0 2px rgba(190,148,69,.16);
}
.table-circle .top{
  position:absolute; inset:6%; border-radius:50%;
  background:linear-gradient(160deg, #FBF1DE, #F0DBBA 75%, #E2C896);
  border:1px solid rgba(190,148,69,.28);
}
.table-circle .centre{
  position:absolute; left:50%; top:50%;
  width:24%; height:24%; transform:translate(-50%,-50%);
  border-radius:50%; background:var(--foil);
  box-shadow:0 0 0 3px rgba(255,251,243,.7), 0 4px 8px rgba(154,116,48,.4);
}

/* — Texto sobre la escena — */
.p-seats .panel-in.seats-copy{
  position:relative; z-index:4;
  max-width:540px;
  margin-left:0;
  text-align:left;
  background:
    radial-gradient(closest-side, rgba(246,238,225,.92) 0%, rgba(246,238,225,.7) 60%, transparent 100%);
  padding:30px 36px;
  border-radius:20px;
}
.seats-copy .st{ font-family:var(--script); font-size:clamp(28px,3.6vw,44px); color:var(--gold-d); display:block; line-height:.8; }
.seats-copy h2{ font-size:clamp(34px,5.2vw,64px); margin:10px 0 16px; }
.seats-copy h2 em{ font-style:italic; }
.seats-copy .lede{ color:var(--ink-2); font-size:16.5px; max-width:430px; }
.seats-copy .lede em{ color:var(--gold-d); font-style:italic; font-weight:600; }
.seats-cta{ margin-top:22px; display:flex; gap:12px; }

@media (max-width:920px){
  .p-seats .panel-in.seats-copy{ max-width:none; margin:auto; text-align:center; padding:22px 24px; }
  .seats-copy .lede{ margin-left:auto; margin-right:auto; }
  .seats-cta{ justify-content:center; }
}

@media (max-width:900px){
  .panel{ padding:84px var(--pad) 70px; align-items:flex-start; overflow-y:auto; }
  .panel-in{ margin:auto 0; }
  .c3d{ width:96px; height:60px; margin:-30px 0 0 -48px; }
}
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; }
  .kin,.line>span{ opacity:1 !important; transform:none !important; }
  .petals{ display:none; }
  .person{ transition:none !important; }
  .table-circle{ transition:none !important; opacity:1 !important; transform:translate(var(--tx,0px), var(--ty,0px)) translate(-50%,-50%) scale(1) !important; }
}

/* ============================================================
   CRASH — secuencia de precios rompiéndose en panel Precio
   ============================================================ */
.crash-stage{
  position:relative;
  width:100%;
  max-width:460px;
  aspect-ratio: 4 / 3;
  margin:0 auto;
}
.crash-card{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  border-radius:18px;
  padding:34px 30px;
  opacity:0;
  transform:translateY(28px) scale(.9);
  overflow:hidden;
}
.cc-18k, .cc-12k{
  background:linear-gradient(180deg, #efe7dc 0%, #c9bcad 100%);
  color:var(--ink);
  border:1px solid rgba(0,0,0,.10);
  box-shadow:0 30px 50px -20px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.6);
}
.crash-eyebrow{ font-family:var(--sans); font-size:11px; letter-spacing:.32em; text-transform:uppercase; color:var(--ink-3); font-weight:700; }
.crash-amount{ font-family:var(--serif); font-size:clamp(56px,7.5vw,96px); line-height:1; margin:10px 0 4px; font-weight:600; color:var(--ink); }
.crash-foot{ font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-2); }

/* grietas SVG */
.crash-cracks{
  position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none; opacity:0; z-index:3;
}
.crash-cracks path{ stroke-dasharray:1; stroke-dashoffset:1; }

/* CARD 1 ($18,000) */
.panel.live .crash-card.cc-18k{ animation: crash-cycle 2.0s ease forwards; animation-delay:.2s; }
.panel.live .cc-18k .crash-cracks{ animation: crash-cracks-show .2s linear forwards; animation-delay:1.5s; }
.panel.live .cc-18k .crash-cracks path{ animation: crash-cracks-draw .35s ease forwards; animation-delay:1.55s; }

/* CARD 2 ($12,000) */
.panel.live .crash-card.cc-12k{ animation: crash-cycle 2.0s ease forwards; animation-delay:2.2s; }
.panel.live .cc-12k .crash-cracks{ animation: crash-cracks-show .2s linear forwards; animation-delay:3.5s; }
.panel.live .cc-12k .crash-cracks path{ animation: crash-cracks-draw .35s ease forwards; animation-delay:3.55s; }

@keyframes crash-cycle{
  0%   { opacity:0; transform:translateY(28px) scale(.9); }
  18%  { opacity:1; transform:translateY(0) scale(1); }
  65%  { opacity:1; transform:translateY(0) scale(1) rotate(0deg); }
  68%  { transform:translateX(-5px) translateY(-2px) rotate(-1deg); }
  72%  { transform:translateX(6px)  translateY(2px) rotate(1.4deg); }
  76%  { transform:translateX(-5px) translateY(2px) rotate(-1.3deg); }
  80%  { transform:translateX(4px)  rotate(.9deg) scale(1.03); }
  100% { opacity:0; transform:translateY(70px) scale(.78) rotate(-5deg); }
}
@keyframes crash-cracks-show{ to{ opacity:.92; } }
@keyframes crash-cracks-draw{ to{ stroke-dashoffset:0; } }

/* CARD FINAL — Hazmaná con glow pulsante */
.crash-card.cc-final{
  background:linear-gradient(160deg, #fff6db 0%, var(--paper) 45%, #f7ebcb 100%);
  color:var(--ink);
  border:2px solid rgba(190,148,69,.4);
  padding:32px 34px 26px;
}
.cc-ribbon{
  position:absolute; top:14px; right:14px;
  background:var(--foil); color:var(--ink);
  font-size:10px; letter-spacing:.22em; text-transform:uppercase; font-weight:700;
  padding:5px 13px; border-radius:100px;
  box-shadow:0 4px 8px -2px rgba(190,148,69,.45);
}
.cc-final .crash-eyebrow{ color:var(--gold-d); }
.cc-amount{ display:flex; flex-direction:column; align-items:center; gap:1px; margin:10px 0 14px; }
.cc-from{ font-size:11.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-2); font-weight:600; }
.cc-big{
  font-family:var(--serif);
  font-size:clamp(58px,8.5vw,102px);
  line-height:1;
  font-weight:700;
  background:var(--foil);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  margin:2px 0;
  letter-spacing:-.01em;
}
.cc-to{ font-size:14px; color:var(--ink-2); }
.cc-to b{ color:var(--ink); font-weight:700; }
.cc-feats{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px 14px; margin:6px 0 18px; max-width:340px; }
.cc-feats span{ font-size:12.5px; color:var(--ink-2); display:inline-flex; align-items:center; gap:5px; white-space:nowrap; }
.cc-feats i{ color:var(--gold-d); font-style:normal; }
.cc-cta{ padding:13px 26px; font-size:14px; }

.panel.live .cc-final{
  animation:
    crash-final-enter 1.25s var(--out) 4.6s forwards,
    crash-glow 2.4s ease-in-out 6.0s infinite;
}
@keyframes crash-final-enter{
  0%   { opacity:0; transform:translateY(46px) scale(.82); }
  60%  { opacity:1; transform:translateY(-6px) scale(1.02); }
  100% { opacity:1; transform:translateY(0) scale(1); }
}
@keyframes crash-glow{
  0%, 100%{
    box-shadow:
      0 30px 60px -22px rgba(190,148,69,.55),
      0 0 0 0 rgba(232,210,156,.55);
    border-color:rgba(190,148,69,.4);
  }
  50%{
    box-shadow:
      0 36px 70px -16px rgba(190,148,69,.75),
      0 0 0 16px rgba(232,210,156,0);
    border-color:rgba(232,210,156,1);
  }
}

/* nota inferior con dot pulsante */
.crash-note{
  position:absolute;
  left:0; right:0; bottom:-50px;
  display:flex; align-items:center; justify-content:center; gap:9px;
  font-size:13px;
  color:rgba(246,238,225,.78);
  opacity:0; transform:translateY(8px);
  transition:opacity .6s ease 6.1s, transform .6s var(--out) 6.1s;
}
.panel.live .crash-note{ opacity:1; transform:none; }
.crash-note b{ color:var(--gold-l); font-weight:700; }
.crash-note .dot{
  width:9px; height:9px; border-radius:50%;
  background:var(--gold-l);
  box-shadow:0 0 0 0 rgba(232,210,156,.7);
  animation:crash-note-pulse 1.7s ease-out infinite;
  animation-delay:6.2s;
}
@keyframes crash-note-pulse{
  0%   { box-shadow:0 0 0 0  rgba(232,210,156,.7); }
  70%  { box-shadow:0 0 0 12px rgba(232,210,156,0); }
  100% { box-shadow:0 0 0 0  rgba(232,210,156,0); }
}

@media (max-width:920px){
  .crash-stage{ max-width:none; }
  .crash-note{ bottom:-38px; font-size:12px; }
}
@media (prefers-reduced-motion:reduce){
  .panel.live .crash-card.cc-18k,
  .panel.live .crash-card.cc-12k{ display:none; }
  .panel.live .cc-final{ opacity:1 !important; transform:none !important; animation:none; }
  .panel.live .crash-note{ opacity:1 !important; transform:none !important; }
}