/* ============================================================
   Festejito — Generador de demo en vivo
   Cada evento con su propia estética artística.
   Reutiliza las variables de style.css
   ============================================================ */
.demo{min-height:100vh}
body.demo{padding-bottom:80px}

/* ---------- barra de compra fija (siempre visible) ---------- */
.paybar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;align-items:center;justify-content:space-between;
  gap:1rem;background:var(--paper);border-top:1px solid var(--line);padding:.7rem clamp(1rem,4vw,2.4rem);
  box-shadow:0 -10px 34px -14px rgba(50,30,15,.35)}
.paybar__txt{font-size:.92rem;color:var(--ink-soft);line-height:1.3}
.paybar__txt b{color:var(--clay);font-family:var(--serif);font-size:1.05rem}
.paybar .btn{flex:none;font-size:1rem;padding:.85rem 1.5rem}
@media(max-width:560px){
  .paybar{flex-direction:column;gap:.45rem;padding:.65rem 1rem}
  .paybar .btn{width:100%}
  .paybar__txt{font-size:.82rem;text-align:center}
  body.demo{padding-bottom:124px}
}

/* ---------- nav ---------- */
.demo-nav{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:1rem;
  padding:.85rem clamp(1rem,4vw,2.4rem);background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.demo-nav__back{font-family:var(--serif);font-size:1.2rem;font-weight:500;display:flex;align-items:baseline;gap:.1em}
.demo-nav__back span{color:var(--clay);font-style:italic;font-size:.9rem}
.demo-nav__tag{margin-left:auto;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);font-weight:600}
.btn--sm{padding:.6em 1.1em;font-size:.82rem}

/* ---------- layout ---------- */
.demo-grid{max-width:1180px;margin:0 auto;padding:clamp(1.5rem,4vw,3rem) clamp(1rem,4vw,2.4rem);
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:start}
@media(max-width:880px){.demo-grid{grid-template-columns:1fr}}

/* ---------- controles ---------- */
.ctrl{position:sticky;top:5rem}
@media(max-width:880px){.ctrl{position:static}}
.ctrl__title{font-size:clamp(1.7rem,3.2vw,2.4rem);font-weight:300;margin:.8rem 0 .5rem}
.ctrl__lead{color:var(--ink-soft);font-size:1rem;margin-bottom:1.8rem}
.ctrl__imagina{margin:.8rem 0 0;padding:.8rem 1rem;background:color-mix(in srgb,var(--clay) 7%,var(--paper));
  border:1px dashed color-mix(in srgb,var(--clay) 40%,var(--line));border-radius:10px;font-size:.9rem;
  color:var(--ink-soft);line-height:1.5}
.ctrl__imagina b{color:var(--ink)}
.ctrl__imagina a{color:var(--clay);font-weight:700;white-space:nowrap}
.fld__label{display:block;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-soft);font-weight:600;margin:1.1rem 0 .4rem}
.ctrl input{width:100%;padding:.7rem .85rem;border:1px solid var(--line);border-radius:2px;
  font-family:var(--sans);font-size:1rem;background:var(--paper);color:var(--ink);transition:border-color .25s}
.ctrl input:focus{outline:none;border-color:var(--clay)}
.fld.two{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;align-items:end}

.seg{display:flex;flex-wrap:wrap;gap:.4rem}
.seg button{font-family:var(--sans);font-size:.86rem;font-weight:600;padding:.55rem .9rem;
  border:1px solid var(--line);background:var(--paper);color:var(--ink-soft);border-radius:2px;cursor:pointer;transition:.25s var(--ease)}
.seg button:hover{border-color:var(--ink)}
.seg button.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}

.swatches{display:flex;gap:.6rem;flex-wrap:wrap}
.swatches button{width:30px;height:30px;border-radius:50%;background:var(--s);border:2px solid transparent;
  cursor:pointer;transition:.2s var(--ease);box-shadow:0 0 0 1px var(--line)}
.swatches button:hover{transform:scale(1.12)}
.swatches button.on{border-color:var(--paper);box-shadow:0 0 0 2px var(--ink)}

.ctrl__cta{width:100%;margin-top:1.8rem;border:0;cursor:pointer;font-family:var(--sans);font-size:1.05rem;padding:1rem 1.4rem}
.ctrl__cta[disabled]{opacity:.7;cursor:wait}
.ctrl__sub{font-size:.82rem;color:var(--ink-soft);margin:.7rem 0 0;line-height:1.55;text-align:center}
.ctrl__sub b{color:var(--clay)}
.ctrl__alt{display:flex;align-items:center;justify-content:center;gap:.4rem;width:100%;margin-top:1rem;
  cursor:pointer;font-family:var(--sans);font-size:.9rem;font-weight:600;color:var(--ink);
  background:none;border:1.5px solid var(--line);border-radius:999px;padding:.8rem 1.2rem;line-height:1.3;
  text-align:center;text-decoration:none;transition:.25s var(--ease)}
.ctrl__alt:hover{border-color:var(--clay);color:var(--clay);background:color-mix(in srgb,var(--clay) 6%,transparent)}
.ctrl__note{font-size:.8rem;color:var(--ink-soft);margin-top:.9rem;line-height:1.6}

/* flujo explicado (qué pasa al dar el botón) */
.flow{list-style:none;margin:.9rem 0 0;padding:.9rem 1rem;display:grid;gap:.55rem;
  background:color-mix(in srgb,var(--clay) 5%,var(--paper));border:1px solid var(--line);border-radius:4px}
.flow li{display:flex;align-items:flex-start;gap:.6rem;font-size:.84rem;color:var(--ink-soft);line-height:1.4}
.flow b{flex:none;width:1.4rem;height:1.4rem;border-radius:50%;background:var(--clay);color:#fff;
  font-size:.74rem;display:grid;place-items:center;margin-top:.05rem}

/* compartir muestra */
.share{margin-top:1rem;padding:1rem;border:1px solid var(--acc,var(--clay));border-radius:4px;
  background:color-mix(in srgb,var(--clay) 7%,var(--paper))}
.share__title{font-weight:600;font-size:.9rem;color:var(--clay);margin-bottom:.6rem}
.share__row{display:flex;gap:.4rem}
.share__row input{flex:1;padding:.55rem .7rem;border:1px solid var(--line);border-radius:2px;
  font-size:.82rem;background:#fff;color:var(--ink)}
.share__row button{font-family:var(--sans);font-weight:600;font-size:.82rem;padding:.55rem 1rem;
  background:var(--ink);color:var(--paper);border:0;border-radius:2px;cursor:pointer;white-space:nowrap}
.share__row button:hover{background:var(--clay)}

/* ---------- escenario / teléfono ---------- */
.stage{display:flex;flex-direction:column;align-items:center;gap:1rem}
.stage__hint{font-size:.84rem;color:var(--ink-soft);text-align:center;max-width:30ch}
.stage__hint b{color:var(--clay)}
.phone{position:relative;width:330px;max-width:86vw;aspect-ratio:330/680;
  background:#1c1712;border-radius:42px;padding:11px;
  box-shadow:0 40px 80px -34px rgba(40,25,15,.55),0 0 0 2px #322a22}
.phone__speaker{position:absolute;top:20px;left:50%;transform:translateX(-50%);width:54px;height:5px;
  background:#3a3128;border-radius:3px;z-index:3}
.phone__screen{position:relative;width:100%;height:100%;border-radius:32px;overflow:hidden auto;
  background:var(--paper);scrollbar-width:none}
.phone__screen::-webkit-scrollbar{display:none}

/* tema de color (acento) — genérico para reutilizar en /d/{slug} */
[data-theme="terracota"]{--acc:#b04a2b;--acc-deep:#8f3a20}
[data-theme="olivo"]{--acc:#5f6b3a;--acc-deep:#48522b}
[data-theme="dusty"]{--acc:#6d8198;--acc-deep:#516577}
[data-theme="vino"]{--acc:#7a2f43;--acc-deep:#5e2333}
[data-theme="rosa"]{--acc:#c06a86;--acc-deep:#a04e69}
[data-theme="oro"]{--acc:#a9803f;--acc-deep:#876430}

/* ---------- invitación base ---------- */
.inv{position:relative;padding:2.4rem 1.6rem 2rem;text-align:center;overflow:hidden;
  background:radial-gradient(120% 50% at 50% 0,color-mix(in srgb,var(--acc) 12%,var(--paper)),var(--paper) 60%)}
.inv>*:not(.orn){position:relative;z-index:2}
.inv__mono{width:54px;height:54px;margin:0 auto .9rem;border:1px solid var(--acc);border-radius:50%;
  display:grid;place-items:center;font-family:var(--serif);font-style:italic;color:var(--acc);font-size:1.05rem;letter-spacing:.02em}
.inv__kicker{font-family:var(--serif);font-style:italic;color:var(--acc);font-size:1rem}
.inv__names{font-family:var(--serif);font-weight:300;font-size:2.2rem;line-height:1.08;color:var(--ink);margin:.25rem 0 .5rem}
.inv__names i{display:block;font-size:1rem;color:var(--acc);font-style:italic;margin:.15rem 0}
.inv__date{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}
.inv__cd{display:flex;justify-content:center;gap:.5rem;margin:1.3rem 0}
.inv__cd div{background:#fff;border:1px solid var(--line);border-radius:8px;padding:.5rem .15rem;min-width:50px}
.inv__cd b{font-family:var(--serif);font-size:1.25rem;font-weight:400;display:block;line-height:1;color:var(--acc)}
.inv__cd span{font-size:.56rem;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-soft)}
.inv__rsvp{font-family:var(--sans);font-weight:600;font-size:.82rem;letter-spacing:.03em;color:#fff;
  background:var(--acc);border:0;padding:.7rem 1.5rem;border-radius:3px;cursor:default}
.inv__sep{display:flex;align-items:center;gap:.6rem;margin:1.8rem 0 1.4rem;color:var(--acc)}
.inv__sep::before,.inv__sep::after{content:"";flex:1;height:1px;background:var(--line)}
.inv__sep span{font-size:.6rem}
.inv__lead{font-family:var(--serif);font-style:italic;font-size:.96rem;color:var(--ink-soft);line-height:1.6;margin-bottom:1.6rem}
.inv__where{padding:1.2rem;background:#fff;border:1px solid var(--line);border-radius:8px;margin-bottom:1.4rem}
.inv__where-k{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--acc);font-weight:600}
.inv__where-v{font-family:var(--serif);font-size:1.1rem;color:var(--ink);margin:.25rem 0 .6rem}
.inv__map{font-size:.8rem;color:var(--acc);font-weight:600;cursor:default}
.inv__feats{display:flex;justify-content:center;gap:.5rem;flex-wrap:wrap;margin-bottom:1.6rem}
.inv__feats span{font-size:.72rem;color:var(--ink-soft);border:1px solid var(--line);border-radius:999px;padding:.25rem .7rem}
/* bloques ricos dentro del teléfono */
.inv__block{margin:1.5rem 0;padding-top:1.3rem;border-top:1px solid var(--line)}
.inv__bk{font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--acc);font-weight:600;margin-bottom:.5rem}
.inv__story{font-family:var(--serif);font-style:italic;font-size:.92rem;line-height:1.55;color:var(--ink)}
.inv__itin{list-style:none;margin:0;padding:0;text-align:left}
.inv__itin li{display:grid;grid-template-columns:46px 1fr;gap:.5rem;padding:.4rem 0;font-size:.8rem;align-items:baseline}
.inv__itin li span:first-child{font-family:var(--serif);color:var(--acc);font-size:.9rem}
.inv__itin li span:last-child{color:var(--ink)}
.inv__row2{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.inv__rowv{font-family:var(--serif);font-size:.95rem;color:var(--ink)}
.inv__gifts{display:flex;gap:.4rem;flex-wrap:wrap;justify-content:center}
.inv__gifts span{border:1px solid var(--acc);color:var(--acc);font-size:.68rem;font-weight:600;padding:.3rem .7rem;border-radius:999px}
.inv__album{display:flex;gap:.4rem;justify-content:center}
.inv__album span{width:42px;height:42px;border-radius:8px;background:color-mix(in srgb,var(--acc) 14%,var(--paper));
  border:1px solid var(--line);display:grid;place-items:center;color:var(--acc);font-size:.9rem}
.inv__rsvp--wide{width:100%;margin-top:.4rem}

.inv__foot{border-top:1px solid var(--line);padding-top:1.1rem;margin-top:1.5rem}
.inv__foot span{display:block;font-size:.8rem;color:var(--acc);letter-spacing:.04em}
.inv__foot small{font-size:.66rem;color:var(--ink-soft)}

/* ---------- ornamentos: ocultos por defecto ---------- */
.orn{display:none;position:absolute;inset:0;z-index:1;pointer-events:none;color:var(--acc)}
[data-ev="boda"] .orn-boda,
[data-ev="xv"] .orn-xv,
[data-ev="cumple"] .orn-cumple,
[data-ev="bautizo"] .orn-bautizo,
[data-ev="otro"] .orn-otro,
[data-ev="graduacion"] .orn-graduacion{display:block}

/* ===== OTRO — plantilla genérica, flourish neutro ===== */
[data-ev="otro"] .inv{background:linear-gradient(180deg,color-mix(in srgb,var(--acc) 12%,var(--paper)),var(--paper) 52%)}
[data-ev="otro"] .inv__mono{margin-top:2.2rem}
.orn-otro{position:absolute;top:64px;left:0;right:0;text-align:center}
.orn-otro .flourish{width:120px;height:24px;color:var(--acc);opacity:.7}

/* ===== GRADUACIÓN — birrete ===== */
[data-ev="graduacion"] .inv{background:linear-gradient(180deg,color-mix(in srgb,var(--acc) 18%,var(--paper)),var(--paper) 50%)}
[data-ev="graduacion"] .inv__mono{margin-top:3.4rem}
.orn-graduacion{position:absolute;top:22px;left:0;right:0;text-align:center}
.orn-graduacion .grad-cap{width:72px;height:54px;color:var(--acc);opacity:.85}

/* ===== BODA — editorial con laurel ===== */
.laurel{position:absolute;top:18px;width:42px;height:84px;opacity:.7}
.laurel--l{left:50%;margin-left:-78px}
.laurel--r{left:50%;margin-left:36px;transform:scaleX(-1)}
[data-ev="boda"] .inv__names{font-style:italic}

/* ===== XV — caligrafía de ensueño ===== */
[data-ev="xv"] .inv{background:linear-gradient(180deg,color-mix(in srgb,var(--acc) 20%,var(--paper)),var(--paper) 48%)}
.xv-num{position:absolute;top:120px;left:0;right:0;text-align:center;font-family:var(--serif);
  font-weight:300;font-size:11rem;line-height:1;color:var(--acc);opacity:.07;letter-spacing:.05em}
.tiara{position:absolute;top:14px;left:50%;transform:translateX(-50%);width:62px;height:31px;color:var(--acc)}
[data-ev="xv"] .inv__mono{margin-top:1.6rem}
[data-ev="xv"] .inv__kicker{font-family:'Pinyon Script',cursive;font-style:normal;font-size:1.5rem}
[data-ev="xv"] .inv__names{font-family:'Pinyon Script',cursive;font-weight:400;font-size:3.4rem;color:var(--acc);line-height:1}
[data-ev="xv"] .inv__names i{font-family:var(--serif);font-size:.9rem;color:var(--ink-soft)}
.spark{position:absolute;width:10px;height:10px;background:
  radial-gradient(closest-side,var(--acc),transparent);opacity:0;animation:tw 2.6s ease-in-out infinite}
.spark::before{content:"";position:absolute;inset:0;background:var(--acc);
  clip-path:polygon(50% 0,58% 42%,100% 50%,58% 58%,50% 100%,42% 58%,0 50%,42% 42%)}
.s1{top:60px;left:34px;animation-delay:0s}.s2{top:90px;right:30px;animation-delay:.6s}
.s3{top:150px;left:26px;animation-delay:1.1s}.s4{top:46px;right:48px;animation-delay:1.6s}
.s5{top:180px;right:40px;animation-delay:.3s}
@keyframes tw{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:.9;transform:scale(1)}}

/* ===== CUMPLEAÑOS — festivo ===== */
[data-ev="cumple"] .inv{--c1:#e0813b;--c2:#c8536b;--c3:#5f8fa8;
  background:radial-gradient(120% 40% at 50% 0,color-mix(in srgb,var(--acc) 14%,var(--paper)),var(--paper) 55%)}
.balloons{position:absolute;top:6px;left:50%;transform:translateX(-50%);width:130px;height:96px;opacity:.92}
[data-ev="cumple"] .inv__mono{margin-top:5.2rem;border-style:dashed}
[data-ev="cumple"] .inv__kicker{font-family:'Fredoka',sans-serif;font-style:normal;font-weight:600;font-size:1.05rem;letter-spacing:.01em}
[data-ev="cumple"] .inv__names{font-family:'Fredoka',sans-serif;font-weight:600;font-size:2.3rem;color:var(--ink)}
.cfi{position:absolute;width:8px;height:8px;border-radius:1px;opacity:.85}
.c-a{top:70px;left:30px;background:#e0813b;transform:rotate(20deg)}
.c-b{top:110px;left:54px;background:#c8536b;border-radius:50%}
.c-c{top:90px;right:36px;background:#5f8fa8;transform:rotate(-15deg)}
.c-d{top:140px;left:24px;background:#a9803f;border-radius:50%}
.c-e{top:64px;right:54px;background:#7a2f43;transform:rotate(30deg)}
.c-f{top:160px;right:46px;background:#5f6b3a;border-radius:50%}

/* ===== BAUTIZO — celestial ===== */
[data-ev="bautizo"] .inv{background:linear-gradient(180deg,color-mix(in srgb,var(--acc) 16%,#fbfdff),var(--paper) 55%)}
.cloud{position:absolute;top:8px;left:50%;transform:translateX(-50%);width:150px;height:64px;color:var(--acc)}
.dove{position:absolute;top:24px;left:50%;transform:translateX(-50%);width:62px;height:44px;color:var(--acc);opacity:.95}
.ray{position:absolute;top:0;left:50%;transform:translateX(-50%);width:120px;height:150px;
  background:radial-gradient(60% 70% at 50% 0,color-mix(in srgb,var(--acc) 22%,transparent),transparent 70%)}
[data-ev="bautizo"] .inv__mono{margin-top:4.4rem}
[data-ev="bautizo"] .inv__kicker{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.2rem}
[data-ev="bautizo"] .inv__names{font-family:'Cormorant Garamond',serif;font-weight:500;font-style:italic;font-size:2.6rem;color:var(--ink)}

/* ---------- marca de agua anti-copia ---------- */
.wm{position:absolute;inset:0;pointer-events:none;z-index:5;opacity:.5;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='150'%3E%3Ctext x='10' y='80' transform='rotate(-30 110 75)' font-family='Hanken Grotesk,sans-serif' font-size='15' font-weight='700' letter-spacing='3' fill='%23b04a2b' fill-opacity='0.16'%3EDEMO · FESTEJITO%3C/text%3E%3C/svg%3E");
  background-repeat:repeat}

@media(prefers-reduced-motion:reduce){.spark{animation:none;opacity:.7}}

/* ---------- fotos por evento en el preview ---------- */
.inv{background-size:cover;background-position:top center;background-repeat:no-repeat}
[data-ev="boda"] .inv{background-image:linear-gradient(color-mix(in srgb,var(--paper) 85%,transparent),color-mix(in srgb,var(--paper) 95%,transparent)),url("/static/img/boda.jpg")}
[data-ev="xv"] .inv{background-image:linear-gradient(color-mix(in srgb,var(--paper) 84%,transparent),color-mix(in srgb,var(--paper) 95%,transparent)),url("/static/img/xv.jpg")}
[data-ev="cumple"] .inv{background-image:linear-gradient(color-mix(in srgb,var(--paper) 85%,transparent),color-mix(in srgb,var(--paper) 95%,transparent)),url("/static/img/cumple.jpg")}
[data-ev="bautizo"] .inv{background-image:linear-gradient(color-mix(in srgb,var(--paper) 87%,transparent),color-mix(in srgb,var(--paper) 95%,transparent)),url("/static/img/bautizo.jpg")}
.inv__album span:nth-child(-n+3){background-size:cover;background-repeat:no-repeat}
.inv__album span:nth-child(1){background-position:20% 30%}
.inv__album span:nth-child(2){background-position:60% 40%}
.inv__album span:nth-child(3){background-position:40% 70%}
[data-ev="boda"] .inv__album span:nth-child(-n+3){background-image:url("/static/img/boda.jpg")}
[data-ev="xv"] .inv__album span:nth-child(-n+3){background-image:url("/static/img/xv.jpg")}
[data-ev="cumple"] .inv__album span:nth-child(-n+3){background-image:url("/static/img/cumple.jpg")}
[data-ev="bautizo"] .inv__album span:nth-child(-n+3){background-image:url("/static/img/bautizo.jpg")}