@import url("https://fonts.googleapis.com/css2?family=Great+Vibes&family=Cormorant+Garamond:wght@400;500;600;700&family=Playfair+Display:wght@400;500;600;700&family=Inter:wght@400;600;700;800;900&display=swap");
 :root{--event-primary:#C9A227;--event-secondary:#F4EFE8;--event-bg:#120817;--event-text:#fff;--ink:#0b1220;--muted:#667085;--pearl:#f4efe8;--dark:#071024;--violet:#7c3aed;--cyan:#0ea5e9;--shadow:0 30px 90px rgba(2,6,23,.25)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;line-height:1.5}a{text-decoration:none;color:inherit}button,input,select,textarea{font:inherit}.hidden{display:none!important}.btn{border:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 18px;border-radius:999px;font-weight:900;transition:.18s ease}.btn.full{width:100%}.primary{background:linear-gradient(135deg,var(--event-primary,#C9A227),#7c3aed);color:#fff;box-shadow:0 18px 44px rgba(124,58,237,.22)}.primary:hover{transform:translateY(-2px)}.ghost{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.16);color:inherit}.danger{background:#7f1d1d;color:#fff}.input{width:100%;min-height:48px;border-radius:16px;border:1px solid rgba(148,163,184,.18);background:rgba(255,255,255,.08);color:inherit;padding:0 14px;outline:0;margin:6px 0 12px}textarea.input{padding:12px 14px;resize:vertical}.input:focus{border-color:color-mix(in srgb,var(--event-primary) 65%,#fff);box-shadow:0 0 0 4px color-mix(in srgb,var(--event-primary) 15%,transparent)}.noise{position:fixed;inset:0;pointer-events:none;background-image:radial-gradient(rgba(15,23,42,.11) 1px,transparent 1px);background-size:22px 22px;opacity:.24}

/* home */
.home{min-height:100vh;color:var(--ink);background:radial-gradient(circle at 12% 0%,rgba(201,162,39,.18),transparent 28%),radial-gradient(circle at 86% 0%,rgba(124,58,237,.14),transparent 24%),linear-gradient(135deg,#fffaf2,#efe7dc 52%,#f8f1e8)}.homeHeader{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px clamp(18px,4vw,58px);backdrop-filter:blur(18px);background:rgba(244,239,232,.78);border-bottom:1px solid rgba(15,23,42,.08)}.brand{display:flex;align-items:center;gap:12px}.brand b,.logoMark{width:48px;height:48px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(135deg,#c9a227,#7c3aed);color:#fff;font-weight:900}.brand span{display:grid}.brand small{color:#64748b;font-weight:700}.homeHeader nav{display:flex;gap:18px;font-weight:900;font-size:.86rem}.pill{background:#0b1220;color:#fff!important;padding:10px 14px;border-radius:999px}.hero{width:min(1180px,calc(100% - 36px));min-height:720px;margin:auto;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(320px,.8fr);gap:54px;align-items:center;padding:74px 0}.heroCopy em,.sectionHead em,.pricing em,.dashHead em,.panelHead em,.loginCard em{font-style:normal;text-transform:uppercase;letter-spacing:.22em;font-size:.72rem;font-weight:900;color:#9a7612}.hero h1{font-size:clamp(3.3rem,7vw,6.8rem);line-height:.9;letter-spacing:-.075em;margin:16px 0 24px}.hero p{font-size:1.08rem;color:#475569;max-width:700px;line-height:1.8}.actions{display:flex;gap:12px;flex-wrap:wrap;margin:26px 0}.miniStats{display:flex;gap:10px;flex-wrap:wrap}.miniStats span,.tags span{background:rgba(255,255,255,.58);border:1px solid rgba(15,23,42,.10);border-radius:999px;padding:10px 12px;font-weight:800;color:#334155;font-size:.78rem}.heroVisual{display:grid;place-items:center}.luxInvite{position:relative;overflow:hidden;width:min(390px,100%);min-height:620px;border-radius:46px;padding:36px 24px;text-align:center;color:#fff;background:radial-gradient(circle at 20% 0%,rgba(201,162,39,.26),transparent 30%),linear-gradient(180deg,#150817,#071024);box-shadow:var(--shadow);border:1px solid rgba(255,255,255,.14)}.luxInvite:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,transparent 50%,rgba(255,255,255,.08) 50%,transparent 72%)}.luxInvite>*{position:relative}.luxInvite span,.badge{display:inline-flex;align-items:center;justify-content:center;min-height:34px;padding:0 20px;border-radius:999px;background:linear-gradient(135deg,var(--event-primary),#7c3aed);font-size:.66rem;font-weight:900;letter-spacing:.18em;text-transform:uppercase}.luxInvite h2{font-family:Playfair Display,serif;font-size:3rem;margin:26px 0 0;line-height:.95}.luxInvite h3{font-size:2.4rem;margin:0 0 14px}.fakeQr{width:220px;height:220px;background:#fff;border-radius:34px;margin:28px auto;padding:30px}.fakeQr:before{content:"";display:block;width:100%;height:100%;border-radius:10px;background:repeating-linear-gradient(90deg,#2e236a 0 8px,transparent 8px 15px),repeating-linear-gradient(#2e236a 0 8px,transparent 8px 15px);opacity:.78}.luxInvite button{border:0;border-radius:999px;padding:14px 18px;background:#fff;color:#0f172a;font-weight:900}.section{width:min(1180px,calc(100% - 36px));margin:auto;padding:76px 0}.sectionHead{text-align:center;margin:0 auto 34px;max-width:780px}.section h2,.pricing h2{font-size:clamp(2.2rem,4.6vw,4rem);line-height:.95;letter-spacing:-.055em;margin:12px 0}.featureGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.featureGrid article,.pricing{background:rgba(255,255,255,.66);border:1px solid rgba(15,23,42,.10);border-radius:32px;padding:28px;box-shadow:0 18px 50px rgba(15,23,42,.08)}.featureGrid b{font-size:1.1rem}.featureGrid p,.pricing p{color:#667085}.soft{background:rgba(255,255,255,.28);border-radius:46px;padding-left:24px;padding-right:24px}.tags{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}.pricing{text-align:center;max-width:820px}.floatWA{position:fixed;right:18px;bottom:18px;z-index:40;background:#16a34a;color:#fff;font-weight:900;border-radius:999px;padding:14px 18px;box-shadow:0 18px 44px rgba(22,163,74,.28)}footer{text-align:center;padding:30px 18px;color:#94a3b8;font-size:.82rem;font-weight:800}

/* admin */
.admin{min-height:100vh;color:#e5edf8;background:radial-gradient(circle at 16% 0%,rgba(201,162,39,.10),transparent 24%),radial-gradient(circle at 86% 0%,rgba(124,58,237,.12),transparent 28%),linear-gradient(180deg,#020617,#071024 54%,#020617)}.login{min-height:100vh;display:grid;place-items:center;padding:24px}.loginCard{width:min(440px,100%);text-align:center;background:rgba(15,23,42,.78);border:1px solid rgba(255,255,255,.10);border-radius:34px;padding:34px;box-shadow:0 30px 80px rgba(0,0,0,.36);backdrop-filter:blur(18px)}.logoMark{width:78px;height:78px;border-radius:26px;margin:0 auto 18px;font-size:1.35rem}.loginCard h1{font-size:2.4rem;margin:12px 0 8px}.loginCard p{color:#aeb6ce}.loginCard a{display:block;margin-top:14px;color:#cbd5e1}.dash{width:min(1560px,calc(100% - 30px));margin:auto;padding:24px 0}.dashHead{display:flex;align-items:center;justify-content:space-between;gap:18px;background:rgba(15,23,42,.74);border:1px solid rgba(255,255,255,.10);border-radius:30px;padding:24px;margin-bottom:18px}.dashHead h1{margin:6px 0 0;font-size:2.35rem}.dashHead p{margin:4px 0 0;color:#94a3b8}.dashActions{display:flex;gap:10px;flex-wrap:wrap}.adminGrid{display:grid;grid-template-columns:300px minmax(0,1fr) 350px;gap:18px;align-items:start}.panelCard{background:rgba(15,23,42,.72);border:1px solid rgba(255,255,255,.10);border-radius:30px;padding:20px;box-shadow:0 24px 64px rgba(0,0,0,.24);backdrop-filter:blur(18px)}.panelHead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}.panelHead button{border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.08);color:#e2e8f0;border-radius:999px;min-height:34px;padding:0 12px;font-weight:800}.eventList{display:grid;gap:10px}.eventItem{width:100%;text-align:left;border:1px solid rgba(255,255,255,.10);background:rgba(2,6,23,.48);border-radius:18px;padding:14px;color:#e5edf8;cursor:pointer}.eventItem.active{border-color:rgba(201,162,39,.5);background:rgba(201,162,39,.10)}.eventItem strong,.eventItem span,.eventItem small{display:block}.eventItem span{color:#cbd5e1;font-size:.78rem}.eventItem small{color:#94a3b8;font-size:.72rem;margin-top:4px}.form{display:grid;gap:16px}.formBlock{border:1px solid rgba(255,255,255,.08);background:rgba(2,6,23,.24);border-radius:24px;padding:18px}.formBlock h2{font-size:1rem;margin:0 0 12px}.form label{font-size:.82rem;font-weight:800;color:#cbd5e1}.two,.three,.four{display:grid;gap:12px}.two{grid-template-columns:1fr 1fr}.three{grid-template-columns:repeat(3,1fr)}.four{grid-template-columns:repeat(4,1fr)}.checks{display:flex;flex-wrap:wrap;gap:12px;color:#cbd5e1;font-weight:800;font-size:.85rem}.previewCard{--event-primary:#C9A227;--event-secondary:#F4EFE8;--event-bg:#120817;overflow:hidden;position:relative;text-align:center;border-radius:34px;padding:32px 22px;min-height:430px;background:radial-gradient(circle at 20% 0%,color-mix(in srgb,var(--event-primary) 30%,transparent),transparent 32%),linear-gradient(180deg,var(--event-bg),#071024);box-shadow:var(--shadow)}.previewCard:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,transparent 55%,rgba(255,255,255,.08) 55%,transparent 76%)}.previewCard>*{position:relative}.previewCard span{display:inline-flex;background:linear-gradient(135deg,var(--event-primary),#7c3aed);border-radius:999px;padding:9px 15px;font-size:.6rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase}.previewCard h2{font-family:Playfair Display,serif;font-size:2.5rem;line-height:.95;margin:24px 0 4px}.previewCard h3{font-size:2rem;margin:0}.previewCard p{color:var(--event-secondary);font-weight:900}.previewCard small{display:block;color:rgba(255,255,255,.76)}.publicUrl{display:block;margin:14px 0;color:#bae6fd;font-size:.72rem;word-break:break-all;text-align:center}.qrBox{display:grid;place-items:center;background:#fff;border-radius:26px;padding:18px;margin:16px auto;width:246px;min-height:246px}.empty{border:1px dashed rgba(255,255,255,.18);border-radius:18px;padding:18px;text-align:center;color:#94a3b8}.guests{margin-top:18px}.guestForm{display:grid;grid-template-columns:repeat(8,1fr) auto;gap:10px;align-items:end}.guestForm .input{margin:0}.guestList{display:grid;gap:10px;margin-top:18px}.guestItem{display:flex;align-items:center;justify-content:space-between;gap:12px;background:rgba(2,6,23,.44);border:1px solid rgba(255,255,255,.10);border-radius:18px;padding:14px}.guestItem strong,.guestItem span{display:block}.guestItem span{font-size:.78rem;color:#94a3b8}.guestItem div:last-child{display:flex;gap:8px}.guestItem a,.guestItem button{border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.08);color:#e2e8f0;border-radius:999px;padding:8px 10px;font-weight:900;font-size:.75rem;cursor:pointer}.toast{position:fixed;right:16px;top:16px;z-index:100;width:min(340px,calc(100vw - 32px));padding:14px 16px;border-radius:18px;background:#082f1f;color:#dcfce7;border:1px solid rgba(34,197,94,.32);box-shadow:0 20px 56px rgba(0,0,0,.28);transition:.22s ease}.toast.err{background:#450a0a;color:#fee2e2;border-color:rgba(239,68,68,.35)}.toast b,.toast span{display:block}.toast span{font-size:.82rem;opacity:.88;margin-top:3px}

/* public invite */
.view{min-height:100vh;color:var(--event-text);background:var(--event-bg)}.loading,.error{min-height:100vh;display:grid;place-items:center;text-align:center;padding:24px;font-weight:900}.invitePage{min-height:100vh;background:radial-gradient(circle at 16% 0%,color-mix(in srgb,var(--event-primary) 22%,transparent),transparent 30%),linear-gradient(180deg,var(--event-bg),#020617)}.inviteHero{position:relative;overflow:hidden;min-height:100vh;display:grid;place-items:center;padding:44px 18px;background-size:cover;background-position:center}.ornament{position:absolute;border:1px solid rgba(255,255,255,.10);border-radius:999px;opacity:.44}.o1{width:600px;height:600px;left:-240px;top:-180px}.o2{width:520px;height:520px;right:-230px;bottom:-190px}.inviteCard{position:relative;z-index:1;width:min(800px,100%);text-align:center;background:rgba(2,6,23,.50);border:1px solid rgba(255,255,255,.16);border-radius:46px;padding:48px 30px;backdrop-filter:blur(20px);box-shadow:0 34px 90px rgba(0,0,0,.36)}.invitePage{--hero-h1-min:3rem;--hero-h1-fluid:9vw;--hero-h1-max:7.4rem;--hero-h1-lh:.92;--hero-h2-min:2.8rem;--hero-h2-fluid:8vw;--hero-h2-max:6.4rem;--hero-h2-lh:.95;--hero-h3-min:1.8rem;--hero-h3-fluid:5vw;--hero-h3-max:3.4rem;--hero-h3-lh:.98}.inviteCard h1{font-family:Playfair Display,serif;font-size:clamp(var(--hero-h1-min),var(--hero-h1-fluid),var(--hero-h1-max));line-height:var(--hero-h1-lh);margin:18px 0 0;letter-spacing:-.045em;text-wrap:balance}.subtitle{display:block;color:var(--event-secondary);font-style:normal;font-weight:800;margin:8px 0}.inviteCard h2{font-size:clamp(var(--hero-h2-min),var(--hero-h2-fluid),var(--hero-h2-max));line-height:var(--hero-h2-lh);margin:0;color:var(--event-secondary);letter-spacing:-.04em;text-wrap:balance}.inviteCard h3{font-size:clamp(var(--hero-h3-min),var(--hero-h3-fluid),var(--hero-h3-max));line-height:var(--hero-h3-lh);margin:8px 0;letter-spacing:-.03em;text-wrap:balance}.dateLine{font-size:1.1rem;font-weight:900;margin:20px 0}.welcome{max-width:620px;margin:0 auto 22px;color:rgba(255,255,255,.82);font-size:1.05rem}.passCard{width:min(470px,100%);margin:22px auto;border-radius:28px;padding:18px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.16)}.passCard small,.passCard span{display:block;color:rgba(255,255,255,.72)}.passCard strong{display:block;font-size:1.7rem}.familyLine{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:620px;margin:16px auto}.familyLine p{border-radius:22px;background:rgba(255,255,255,.08);padding:14px;margin:0}.familyLine span{display:block;color:var(--event-secondary);font-weight:900;text-transform:uppercase;letter-spacing:.12em;font-size:.68rem}.countdown{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;max-width:540px;margin:28px auto 0}.countdown div{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.12);border-radius:20px;padding:14px 8px}.countdown b{display:block;font-size:1.65rem}.countdown span{font-size:.68rem;text-transform:uppercase;letter-spacing:.12em;color:rgba(255,255,255,.68);font-weight:900}.inviteSection{width:min(1000px,calc(100% - 36px));margin:auto;padding:58px 0}.sectionTitle{text-align:center;margin-bottom:24px}.sectionTitle.left{text-align:left}.sectionTitle span,.detailCard span,.linkGrid small{display:block;text-transform:uppercase;letter-spacing:.18em;color:var(--event-secondary);font-weight:900;font-size:.72rem}.sectionTitle h2{font-size:clamp(2.2rem,4vw,3.7rem);line-height:.95;margin:8px 0;font-weight:900;letter-spacing:-.055em}.detailGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.detailCard,.linkGrid a,.rsvpCard,.shareCard{border-radius:30px;padding:26px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);box-shadow:0 22px 60px rgba(0,0,0,.18)}.detailCard h3,.linkGrid strong{font-size:1.45rem;margin:8px 0}.detailCard b{color:var(--event-secondary)}.detailCard p{color:rgba(255,255,255,.72)}.timeline{display:grid;gap:12px}.timeline div{display:grid;grid-template-columns:120px 1fr;gap:14px;align-items:start;border-left:3px solid var(--event-primary);background:rgba(255,255,255,.07);border-radius:22px;padding:18px}.timeline time{color:var(--event-secondary);font-weight:900}.timeline strong{font-size:1.2rem}.timeline p{grid-column:2;margin:0;color:rgba(255,255,255,.70)}.linkGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.gallery figure{margin:0}.gallery img{width:100%;height:240px;object-fit:cover;border-radius:24px}.gallery figcaption{text-align:center;margin-top:8px;color:rgba(255,255,255,.72)}.rsvpCard{max-width:760px;margin:auto}.rsvpActions{display:flex;gap:10px;flex-wrap:wrap}.success{text-align:center}.success strong{font-size:1.8rem}.shareCard{text-align:center}.shareCard p{word-break:break-all;color:rgba(255,255,255,.72)}.stickyActions{position:fixed;left:50%;transform:translateX(-50%);bottom:16px;z-index:50;display:flex;gap:8px;padding:8px;border-radius:999px;background:rgba(2,6,23,.76);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(18px)}.stickyActions a{min-height:42px;display:grid;place-items:center;padding:0 16px;border-radius:999px;background:rgba(255,255,255,.10);font-weight:900}.music{position:fixed;left:16px;bottom:16px;width:260px;z-index:45;opacity:.86}

@media(max-width:1120px){.hero,.adminGrid{grid-template-columns:1fr}.guestForm{grid-template-columns:repeat(2,1fr)}.previewSide{max-width:560px;width:100%;margin:auto}.featureGrid,.detailGrid{grid-template-columns:1fr 1fr}}@media(max-width:720px){.homeHeader,.dashHead{align-items:flex-start;flex-direction:column}.homeHeader nav{overflow:auto;width:100%;padding-bottom:4px}.hero{padding:44px 0;min-height:auto}.hero h1{font-size:3.5rem}.featureGrid,.detailGrid,.linkGrid,.gallery,.two,.three,.four,.guestForm,.familyLine{grid-template-columns:1fr}.countdown{grid-template-columns:repeat(2,1fr)}.timeline div{grid-template-columns:1fr}.timeline p{grid-column:auto}.inviteCard{padding:34px 20px}.stickyActions{width:calc(100% - 24px);justify-content:center}.music{display:none}} 

/* =========================================================
   EventoQR.click Level Dios V36.20.3.3
   Orbital menu + custom photo cover
   ========================================================= */

.orbMenu{
  position:fixed;
  left:20px;
  top:50%;
  transform:translateY(-50%);
  z-index:80;
  width:86px;
  height:86px;
  pointer-events:none;
}
.orbToggle{
  pointer-events:auto;
  position:absolute;
  left:0;
  top:0;
  width:86px;
  height:86px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background:
    radial-gradient(circle at 32% 20%, rgba(255,255,255,.45), transparent 28%),
    linear-gradient(135deg,#7c3aed,#0ea5e9);
  color:#fff;
  font-size:2rem;
  display:grid;
  place-items:center;
  box-shadow:
    0 0 0 0 rgba(14,165,233,.42),
    0 24px 60px rgba(14,165,233,.24),
    inset 0 1px 0 rgba(255,255,255,.35);
  cursor:pointer;
  animation:orbPulse 1.8s infinite;
}
.orbToggle span{filter:drop-shadow(0 4px 10px rgba(0,0,0,.28))}
@keyframes orbPulse{
  0%{box-shadow:0 0 0 0 rgba(14,165,233,.42),0 24px 60px rgba(14,165,233,.24),inset 0 1px 0 rgba(255,255,255,.35)}
  70%{box-shadow:0 0 0 18px rgba(14,165,233,0),0 24px 60px rgba(14,165,233,.24),inset 0 1px 0 rgba(255,255,255,.35)}
  100%{box-shadow:0 0 0 0 rgba(14,165,233,0),0 24px 60px rgba(14,165,233,.24),inset 0 1px 0 rgba(255,255,255,.35)}
}
.orbItems{
  pointer-events:none;
  position:absolute;
  left:0;
  top:0;
  width:86px;
  height:86px;
}
.orbItems button{
  pointer-events:auto;
  position:absolute;
  left:8px;
  top:8px;
  width:70px;
  height:70px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.13);
  background:radial-gradient(circle at top,rgba(14,165,233,.12),transparent 55%),rgba(15,23,42,.92);
  color:#e5edf8;
  box-shadow:0 18px 42px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.06);
  display:grid;
  place-items:center;
  cursor:pointer;
  opacity:0;
  transform:translate(0,0) scale(.45);
  transition:transform .32s cubic-bezier(.2,.9,.2,1), opacity .2s ease, background .18s ease;
}
.orbItems button:hover{
  background:radial-gradient(circle at top,rgba(124,58,237,.22),transparent 55%),rgba(15,23,42,.98);
  border-color:rgba(14,165,233,.35);
}
.orbItems i{font-style:normal;font-size:1.3rem;color:#67e8f9;line-height:1}
.orbItems span{
  position:absolute;
  top:75px;
  left:50%;
  transform:translateX(-50%);
  font-size:.58rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-weight:900;
  color:#dbeafe;
  white-space:nowrap;
}
.orbMenu.open{
  width:285px;
  height:520px;
  pointer-events:auto;
}
.orbMenu.open .orbItems{
  pointer-events:auto;
  width:285px;
  height:520px;
}
.orbMenu.open .orbItems button:nth-child(1){transform:translate(0,-116px) scale(1);opacity:1}
.orbMenu.open .orbItems button:nth-child(2){transform:translate(92px,-76px) scale(1);opacity:1}
.orbMenu.open .orbItems button:nth-child(3){transform:translate(152px,10px) scale(1);opacity:1}
.orbMenu.open .orbItems button:nth-child(4){transform:translate(132px,112px) scale(1);opacity:1}
.orbMenu.open .orbItems button:nth-child(5){transform:translate(42px,178px) scale(1);opacity:1}
.orbMenu.open .orbItems button:nth-child(6){transform:translate(-62px,152px) scale(1);opacity:1}
.orbMenu.open .orbItems button:nth-child(7){transform:translate(-118px,52px) scale(1);opacity:1}
.orbMenu.open .orbItems button:nth-child(8){transform:translate(-88px,-66px) scale(1);opacity:1}

.uploadCard{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:16px;
  border-radius:22px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.10);
  margin-bottom:12px;
}
.uploadCard strong,
.uploadCard span{display:block}
.uploadCard span{font-size:.78rem;color:#94a3b8;margin-top:3px}
.uploadButton{
  position:relative;
  overflow:hidden;
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:0 16px;
  border-radius:999px;
  background:linear-gradient(135deg,#7c3aed,#0ea5e9);
  color:#fff!important;
  font-weight:900!important;
  cursor:pointer;
  white-space:nowrap;
}
.uploadButton input{position:absolute;inset:0;opacity:0;cursor:pointer}

.previewCard.hasImage{
  background-image:
    linear-gradient(180deg,var(--hero-overlay,rgba(2,6,23,.58)),rgba(2,6,23,.88)),
    var(--hero-image);
  background-size:cover;
  background-position:center;
}

.inviteHero.hasHeroImage{
  background-image:
    linear-gradient(180deg,var(--hero-overlay,rgba(2,6,23,.58)),rgba(2,6,23,.86)),
    var(--hero-desktop);
  background-size:cover;
  background-position:center;
}
.heroPhotoLayer{
  display:none;
}
.cover-full-photo .inviteCard{
  background:rgba(2,6,23,.30);
  border-color:rgba(255,255,255,.20);
}
.cover-photo-card .inviteCard{
  background:rgba(2,6,23,.56);
}
.cover-split-elegant .inviteHero{
  align-items:stretch;
  grid-template-columns:1fr 1fr;
}
.cover-split-elegant .heroPhotoLayer{
  display:block;
  position:relative;
  background-image:var(--hero-desktop);
  background-size:cover;
  background-position:center;
  min-height:100vh;
}
.cover-split-elegant .inviteCard{
  align-self:center;
  justify-self:center;
  max-width:620px;
}
.hero-blur .inviteHero.hasHeroImage::before{
  content:"";
  position:absolute;
  inset:-12px;
  background-image:var(--hero-desktop);
  background-size:cover;
  background-position:inherit;
  filter:blur(10px);
  opacity:.36;
}
.hero-blur .inviteHero>*{position:relative;z-index:1}

@media (max-width:1120px){
  .orbMenu{left:12px;top:auto;bottom:22px;transform:none}
  .orbMenu.open .orbItems button:nth-child(1){transform:translate(0,-104px) scale(1)}
  .orbMenu.open .orbItems button:nth-child(2){transform:translate(78px,-82px) scale(1)}
  .orbMenu.open .orbItems button:nth-child(3){transform:translate(132px,-16px) scale(1)}
  .orbMenu.open .orbItems button:nth-child(4){transform:translate(132px,70px) scale(1)}
  .orbMenu.open .orbItems button:nth-child(5){transform:translate(62px,136px) scale(1)}
  .orbMenu.open .orbItems button:nth-child(6){transform:translate(-30px,136px) scale(1)}
  .orbMenu.open .orbItems button:nth-child(7){transform:translate(-88px,64px) scale(1)}
  .orbMenu.open .orbItems button:nth-child(8){transform:translate(-78px,-30px) scale(1)}
}
@media (max-width:720px){
  .uploadCard{flex-direction:column;align-items:flex-start}
  .cover-split-elegant .inviteHero{display:grid;grid-template-columns:1fr}
  .cover-split-elegant .heroPhotoLayer{display:none}
  .inviteHero.hasHeroImage{background-image:linear-gradient(180deg,var(--hero-overlay,rgba(2,6,23,.58)),rgba(2,6,23,.86)),var(--hero-mobile)}
}


/* =========================================================
   EventoQR.click Level Dios V36.20.3.3
   Public invitation menu + centering fixes
   ========================================================= */

/* Center public sections better */
.inviteSection.centeredSection{
  width:min(980px, calc(100% - 36px));
  margin-left:auto;
  margin-right:auto;
}
.centeredSection .sectionTitle{
  text-align:center;
  margin-left:auto;
  margin-right:auto;
}
.centeredSection .detailGrid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 360px));
  justify-content:center;
  align-items:stretch;
  gap:18px;
  margin-left:auto;
  margin-right:auto;
}
.centeredSection .detailCard{
  width:100%;
  min-height:250px;
}
.centeredSection .timeline{
  width:min(760px, 100%);
  margin-left:auto;
  margin-right:auto;
}

/* Hide old bottom sticky actions if an older cached render injects them */
.stickyActions{
  display:none!important;
}

/* Public invitation orbital menu */
.inviteOrbMenu{
  position:fixed;
  left:18px;
  top:50%;
  transform:translateY(-50%);
  z-index:120;
  width:76px;
  height:76px;
  pointer-events:none;
}
.inviteOrbToggle{
  pointer-events:auto;
  position:absolute;
  left:0;
  top:0;
  width:76px;
  height:76px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.20);
  background:
    radial-gradient(circle at 30% 22%, rgba(255,255,255,.44), transparent 26%),
    linear-gradient(135deg, var(--event-primary, #C9A227), #7c3aed 50%, #0ea5e9);
  color:#fff;
  display:grid;
  place-items:center;
  cursor:pointer;
  font-size:1.9rem;
  box-shadow:
    0 0 0 0 color-mix(in srgb, var(--event-primary) 48%, transparent),
    0 22px 55px rgba(14,165,233,.24),
    inset 0 1px 0 rgba(255,255,255,.34);
  animation:inviteOrbPulse 1.8s infinite;
}
.inviteOrbToggle span{
  filter:drop-shadow(0 5px 12px rgba(0,0,0,.30));
}
@keyframes inviteOrbPulse{
  0%{
    box-shadow:
      0 0 0 0 color-mix(in srgb, var(--event-primary) 48%, transparent),
      0 22px 55px rgba(14,165,233,.24),
      inset 0 1px 0 rgba(255,255,255,.34);
  }
  70%{
    box-shadow:
      0 0 0 18px rgba(14,165,233,0),
      0 22px 55px rgba(14,165,233,.24),
      inset 0 1px 0 rgba(255,255,255,.34);
  }
  100%{
    box-shadow:
      0 0 0 0 rgba(14,165,233,0),
      0 22px 55px rgba(14,165,233,.24),
      inset 0 1px 0 rgba(255,255,255,.34);
  }
}
.inviteOrbItems{
  pointer-events:none;
  position:absolute;
  left:0;
  top:0;
  width:76px;
  height:76px;
}
.inviteOrbItems a,
.inviteOrbItems button{
  pointer-events:auto;
  position:absolute;
  left:6px;
  top:6px;
  width:64px;
  height:64px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:
    radial-gradient(circle at top, rgba(14,165,233,.14), transparent 54%),
    rgba(15,23,42,.90);
  color:#e5edf8;
  box-shadow:
    0 18px 42px rgba(0,0,0,.32),
    inset 0 1px 0 rgba(255,255,255,.07);
  display:grid;
  place-items:center;
  cursor:pointer;
  opacity:0;
  transform:translate(0,0) scale(.45);
  transition:
    transform .32s cubic-bezier(.2,.9,.2,1),
    opacity .2s ease,
    background .18s ease,
    border-color .18s ease;
  font:inherit;
}
.inviteOrbItems a:hover,
.inviteOrbItems button:hover{
  background:
    radial-gradient(circle at top, rgba(124,58,237,.24), transparent 58%),
    rgba(15,23,42,.98);
  border-color:rgba(14,165,233,.38);
}
.inviteOrbItems i{
  font-style:normal;
  font-size:1.2rem;
  color:#67e8f9;
  line-height:1;
}
.inviteOrbItems span{
  position:absolute;
  top:68px;
  left:50%;
  transform:translateX(-50%);
  font-size:.55rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-weight:900;
  color:#dbeafe;
  white-space:nowrap;
  text-shadow:0 8px 18px rgba(0,0,0,.52);
}
.inviteOrbMenu.open{
  width:260px;
  height:420px;
  pointer-events:auto;
}
.inviteOrbMenu.open .inviteOrbItems{
  pointer-events:auto;
  width:260px;
  height:420px;
}
.inviteOrbMenu.open .inviteOrbItems > *:nth-child(1){transform:translate(0,-100px) scale(1);opacity:1}
.inviteOrbMenu.open .inviteOrbItems > *:nth-child(2){transform:translate(88px,-52px) scale(1);opacity:1}
.inviteOrbMenu.open .inviteOrbItems > *:nth-child(3){transform:translate(106px,56px) scale(1);opacity:1}
.inviteOrbMenu.open .inviteOrbItems > *:nth-child(4){transform:translate(30px,132px) scale(1);opacity:1}
.inviteOrbMenu.open .inviteOrbItems > *:nth-child(5){transform:translate(-72px,104px) scale(1);opacity:1}
.inviteOrbMenu.open .inviteOrbItems > *:nth-child(6){transform:translate(-104px,-2px) scale(1);opacity:1}
.inviteOrbItems button.copied{
  border-color:rgba(34,197,94,.75);
  background:rgba(20,83,45,.92);
}
.inviteOrbItems button.copied i{
  color:#bbf7d0;
}

/* Music no longer conflicts with menu */
.inviteMusic{
  left:auto!important;
  right:16px!important;
  bottom:16px!important;
}

/* More consistent centering inside public invitation cards */
.invitePage .sectionTitle{
  text-align:center;
}
.invitePage .shareCard{
  margin-left:auto;
  margin-right:auto;
  max-width:760px;
}
.invitePage .rsvpCard{
  margin-left:auto;
  margin-right:auto;
}

@media (max-width:900px){
  .inviteOrbMenu{
    left:12px;
    top:auto;
    bottom:18px;
    transform:none;
  }
  .inviteOrbMenu.open .inviteOrbItems > *:nth-child(1){transform:translate(0,-92px) scale(1)}
  .inviteOrbMenu.open .inviteOrbItems > *:nth-child(2){transform:translate(76px,-68px) scale(1)}
  .inviteOrbMenu.open .inviteOrbItems > *:nth-child(3){transform:translate(114px,8px) scale(1)}
  .inviteOrbMenu.open .inviteOrbItems > *:nth-child(4){transform:translate(78px,84px) scale(1)}
  .inviteOrbMenu.open .inviteOrbItems > *:nth-child(5){transform:translate(-4px,118px) scale(1)}
  .inviteOrbMenu.open .inviteOrbItems > *:nth-child(6){transform:translate(-82px,72px) scale(1)}
  .inviteMusic{
    display:none!important;
  }
}
@media (max-width:720px){
  .centeredSection .detailGrid{
    grid-template-columns:1fr;
  }
  .centeredSection .detailCard{
    min-height:auto;
  }
  .inviteOrbToggle{
    width:70px;
    height:70px;
  }
  .inviteOrbMenu,
  .inviteOrbItems{
    width:70px;
    height:70px;
  }
  .inviteOrbItems a,
  .inviteOrbItems button{
    width:60px;
    height:60px;
  }
}


/* =========================================================
   EventoQR.click Level Dios V36.20.3.3
   One outer card + glass inner cards
   ========================================================= */
.view{
  background:
    radial-gradient(circle at 14% 0%, color-mix(in srgb,var(--event-primary) 22%, transparent), transparent 28%),
    radial-gradient(circle at 90% 8%, rgba(124,58,237,.16), transparent 22%),
    linear-gradient(180deg, var(--event-bg), #020617);
}
.invitePage{
  min-height:100vh;
  padding:26px 16px 42px;
  background:transparent;
}
.inviteShell{
  width:min(1180px, calc(100% - 8px));
  margin:0 auto;
  border-radius:42px;
  overflow:hidden;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 34px 110px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(20px);
  position:relative;
}
.inviteShell::before{
  content:"";
  position:absolute;
  inset:18px;
  border-radius:34px;
  border:1px solid rgba(255,255,255,.08);
  pointer-events:none;
}
.inviteHero{
  min-height:min(96vh, 980px);
  padding:52px 24px 46px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.inviteCard{
  background:linear-gradient(180deg, rgba(7,16,36,.56), rgba(7,16,36,.42));
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 30px 90px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.06);
}
.inviteSection{
  width:100%;
  margin:0;
  padding:32px 32px;
}
.centeredSection,
.inviteSection.centeredSection{
  width:100%;
  max-width:none;
}
.sectionTitle{
  margin-bottom:22px;
}
.detailCard,
.linkGrid a,
.rsvpCard,
.shareCard,
.timeline div,
.gallery figure,
.familyLine p,
.passCard,
.countdown div{
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
  border:1px solid rgba(255,255,255,.15);
  box-shadow:0 18px 44px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter:blur(16px);
}
.gallery figure{
  padding:12px;
  border-radius:26px;
}
.gallery img{
  border-radius:18px;
}
.timeline div{
  border-left:3px solid var(--event-primary);
}
.shareCard,
.rsvpCard{
  max-width:820px;
}
.linkGrid{
  width:min(900px, 100%);
  margin:0 auto;
}
.gallery{
  width:min(980px,100%);
  margin:0 auto;
}
footer{
  width:100%;
  text-align:center;
  padding:8px 24px 28px;
  color:rgba(255,255,255,.72);
}

@media(max-width:900px){
  .invitePage{padding:14px 10px 28px;}
  .inviteShell{border-radius:28px;}
  .inviteShell::before{inset:10px;border-radius:22px;}
  .inviteHero{min-height:auto;padding:36px 16px 32px;}
  .inviteSection{padding:22px 18px;}
}
@media(max-width:720px){
  .inviteShell{width:100%;border-radius:24px;}
  .inviteShell::before{display:none;}
  .inviteCard{border-radius:28px;padding:34px 18px;}
  .detailCard,.linkGrid a,.rsvpCard,.shareCard{border-radius:24px;padding:20px;}
  .gallery figure{padding:10px;border-radius:20px;}
}


/* =========================================================
   EventoQR.click Level Dios V36.20.3.3
   Static right-side action buttons for public invitation
   ========================================================= */

/* Disable old orbital menu if any cached markup appears */
.inviteOrbMenu,
.orbMenu{
  display:none!important;
}

/* Right static action rail */
.inviteStaticActions{
  position:fixed;
  right:18px;
  top:50%;
  transform:translateY(-50%);
  z-index:130;
  display:grid;
  gap:12px;
  padding:10px;
  border-radius:30px;
  background:linear-gradient(180deg, rgba(15,23,42,.72), rgba(15,23,42,.42));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 24px 70px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter:blur(18px);
}
.inviteStaticActions a,
.inviteStaticActions button{
  width:62px;
  min-height:62px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:24px;
  background:
    radial-gradient(circle at 30% 18%, rgba(255,255,255,.16), transparent 26%),
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.055));
  color:#e5edf8;
  display:grid;
  place-items:center;
  gap:2px;
  cursor:pointer;
  box-shadow:0 14px 34px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.06);
  transition:transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
  font:inherit;
}
.inviteStaticActions a:hover,
.inviteStaticActions button:hover{
  transform:translateX(-4px);
  border-color:color-mix(in srgb, var(--event-primary) 72%, #ffffff);
  background:
    radial-gradient(circle at 30% 18%, rgba(255,255,255,.22), transparent 28%),
    linear-gradient(135deg, color-mix(in srgb, var(--event-primary) 34%, rgba(255,255,255,.08)), rgba(124,58,237,.24));
  box-shadow:0 18px 42px rgba(0,0,0,.25), 0 0 28px color-mix(in srgb, var(--event-primary) 30%, transparent);
}
.inviteStaticActions i{
  font-style:normal;
  font-size:1.15rem;
  line-height:1;
  color:#67e8f9;
  text-shadow:0 6px 16px rgba(0,0,0,.28);
}
.inviteStaticActions span{
  font-size:.52rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:900;
  color:#dbeafe;
}
.inviteStaticActions button.copied{
  border-color:rgba(34,197,94,.78);
  background:linear-gradient(180deg, rgba(34,197,94,.28), rgba(15,23,42,.55));
}
.inviteStaticActions button.copied i{
  color:#bbf7d0;
}

/* Keep content from feeling covered by the right rail on desktop */
.inviteShell{
  margin-right:auto;
  margin-left:auto;
}
@media (min-width:1280px){
  .invitePage{
    padding-right:104px;
  }
}

/* On tablet/mobile keep actions static but move them to top-right */
@media (max-width:900px){
  .inviteStaticActions{
    top:14px;
    right:14px;
    transform:none;
    grid-template-columns:repeat(3, 52px);
    gap:8px;
    padding:8px;
    border-radius:24px;
  }
  .inviteStaticActions a,
  .inviteStaticActions button{
    width:52px;
    min-height:52px;
    border-radius:19px;
  }
  .inviteStaticActions span{
    display:none;
  }
  .inviteStaticActions i{
    font-size:1.05rem;
  }
  .invitePage{
    padding-top:92px;
  }
}
@media (max-width:520px){
  .inviteStaticActions{
    grid-template-columns:repeat(6, 42px);
    gap:6px;
    right:50%;
    transform:translateX(50%);
    border-radius:999px;
    max-width:calc(100vw - 20px);
  }
  .inviteStaticActions a,
  .inviteStaticActions button{
    width:42px;
    min-height:42px;
    border-radius:999px;
  }
  .inviteStaticActions i{
    font-size:.94rem;
  }
  .invitePage{
    padding-top:76px;
  }
}


/* =========================================================
   EventoQR.click Level Dios V36.20.3.3
   Force public action rail outside card, fixed to viewport
   ========================================================= */
.inviteStaticActions{
  position:fixed !important;
  right:max(16px, env(safe-area-inset-right, 0px)) !important;
  top:50% !important;
  bottom:auto !important;
  left:auto !important;
  transform:translateY(-50%) !important;
  z-index:9999 !important;
}
.inviteShell{
  overflow:visible !important;
}
@media (min-width:1280px){
  .invitePage{padding-right:120px !important;}
}
@media (max-width:900px){
  .inviteStaticActions{
    top:14px !important;
    right:14px !important;
    left:auto !important;
    bottom:auto !important;
    transform:none !important;
  }
}
@media (max-width:520px){
  .inviteStaticActions{
    top:auto !important;
    bottom:12px !important;
    right:50% !important;
    left:auto !important;
    transform:translateX(50%) !important;
  }
}


/* =========================================================
   EventoQR.click Level Dios V36.20.3.3
   Make right-side actions feel alive
   ========================================================= */
.inviteStaticActions{
  overflow:visible;
}
.inviteStaticActions a,
.inviteStaticActions button{
  position:relative;
  overflow:hidden;
  animation:actionFloat 4.8s ease-in-out infinite;
}
.inviteStaticActions a::before,
.inviteStaticActions button::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  background:linear-gradient(135deg,
    color-mix(in srgb, var(--event-primary) 72%, transparent),
    rgba(124,58,237,.55),
    rgba(14,165,233,.48));
  opacity:.0;
  transition:opacity .28s ease;
  z-index:0;
}
.inviteStaticActions a::after,
.inviteStaticActions button::after{
  content:"";
  position:absolute;
  top:-120%;
  left:-35%;
  width:48%;
  height:260%;
  transform:rotate(24deg);
  background:linear-gradient(180deg, transparent, rgba(255,255,255,.28), transparent);
  opacity:.0;
}
.inviteStaticActions a > *,
.inviteStaticActions button > *{
  position:relative;
  z-index:1;
}
.inviteStaticActions a:hover::before,
.inviteStaticActions button:hover::before,
.inviteStaticActions a.is-awake::before,
.inviteStaticActions button.is-awake::before,
.inviteStaticActions button.copied::before{
  opacity:1;
}
.inviteStaticActions a:hover::after,
.inviteStaticActions button:hover::after,
.inviteStaticActions a.is-awake::after,
.inviteStaticActions button.is-awake::after{
  opacity:1;
  animation:actionShine .95s ease;
}
.inviteStaticActions a:hover,
.inviteStaticActions button:hover,
.inviteStaticActions a.is-awake,
.inviteStaticActions button.is-awake{
  transform:translateX(-6px) scale(1.06);
}
.inviteStaticActions i{
  transition:transform .22s ease, color .22s ease, text-shadow .22s ease;
}
.inviteStaticActions span{
  transition:transform .22s ease, opacity .22s ease;
}
.inviteStaticActions a:hover i,
.inviteStaticActions button:hover i,
.inviteStaticActions a.is-awake i,
.inviteStaticActions button.is-awake i{
  transform:translateY(-2px) scale(1.12);
  color:#ffffff;
  text-shadow:0 0 18px rgba(255,255,255,.38);
}
.inviteStaticActions a:hover span,
.inviteStaticActions button:hover span,
.inviteStaticActions a.is-awake span,
.inviteStaticActions button.is-awake span{
  transform:scale(1.06);
}
.inviteStaticActions [data-live="1"]{animation-delay:0s}
.inviteStaticActions [data-live="2"]{animation-delay:.18s}
.inviteStaticActions [data-live="3"]{animation-delay:.36s}
.inviteStaticActions [data-live="4"]{animation-delay:.54s}
.inviteStaticActions [data-live="5"]{animation-delay:.72s}
.inviteStaticActions [data-live="6"]{animation-delay:.9s}
.inviteStaticActions [data-live="4"]{
  box-shadow:0 14px 34px rgba(0,0,0,.20), 0 0 22px rgba(34,197,94,.12), inset 0 1px 0 rgba(255,255,255,.06);
}
.inviteStaticActions [data-live="4"] i{color:#86efac}
.inviteStaticActions [data-live="4"]::before{
  background:linear-gradient(135deg, rgba(34,197,94,.58), rgba(14,165,233,.28));
}
.inviteStaticActions button.copied{
  transform:translateX(-6px) scale(1.08);
  box-shadow:0 18px 46px rgba(0,0,0,.24), 0 0 24px rgba(34,197,94,.32);
}
.inviteStaticActions button.copied span{color:#dcfce7}
@keyframes actionFloat{
  0%,100%{transform:translateX(0) translateY(0)}
  50%{transform:translateX(0) translateY(-4px)}
}
@keyframes actionShine{
  0%{left:-45%;opacity:0}
  15%{opacity:1}
  100%{left:120%;opacity:0}
}

@media (prefers-reduced-motion: reduce){
  .inviteStaticActions a,
  .inviteStaticActions button,
  .inviteStaticActions a::after,
  .inviteStaticActions button::after{
    animation:none !important;
    transition:none !important;
  }
}
@media (max-width:900px){
  .inviteStaticActions a:hover,
  .inviteStaticActions button:hover,
  .inviteStaticActions a.is-awake,
  .inviteStaticActions button.is-awake{
    transform:scale(1.06);
  }
}


/* =========================================================
   EventoQR.click Level Dios V36.20.3.3
   RSVP Dashboard
   ========================================================= */

.rsvpDashboard{
  margin-top:18px;
}
.rsvpHead{
  align-items:flex-start;
}
.rsvpHead > div:first-child span{
  display:block;
  margin-top:4px;
  color:#94a3b8;
  font-size:.82rem;
  font-weight:800;
}
.rsvpTools{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.rsvpTools .input.mini{
  min-height:34px;
  width:150px;
  margin:0;
  border-radius:999px;
  font-size:.78rem;
  font-weight:900;
}
.rsvpTools button{
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.08);
  color:#e2e8f0;
  border-radius:999px;
  min-height:34px;
  padding:0 12px;
  font-weight:900;
  cursor:pointer;
}
.rsvpStats{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:12px;
  margin:14px 0 18px;
}
.rsvpStats article{
  min-height:104px;
  border-radius:24px;
  padding:16px;
  background:
    radial-gradient(circle at top right, rgba(14,165,233,.14), transparent 42%),
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.055));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 18px 44px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.06);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.rsvpStats article span{
  text-transform:uppercase;
  letter-spacing:.12em;
  color:#94a3b8;
  font-size:.64rem;
  font-weight:900;
}
.rsvpStats article strong{
  font-size:2.15rem;
  line-height:1;
  color:#fff;
}
.rsvpStats article.confirmed{
  border-color:rgba(34,197,94,.22);
}
.rsvpStats article.confirmed strong{
  color:#bbf7d0;
}
.rsvpStats article.declined{
  border-color:rgba(248,113,113,.22);
}
.rsvpStats article.declined strong{
  color:#fecaca;
}
.rsvpStats article.maybe{
  border-color:rgba(250,204,21,.22);
}
.rsvpStats article.maybe strong{
  color:#fde68a;
}
.rsvpStats article.total{
  border-color:color-mix(in srgb, var(--event-primary) 42%, rgba(255,255,255,.18));
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--event-primary) 22%, transparent), transparent 45%),
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
}
.rsvpTableWrap{
  overflow:auto;
  border-radius:24px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(2,6,23,.30);
}
.rsvpTable{
  width:100%;
  min-width:980px;
  border-collapse:collapse;
}
.rsvpTable th,
.rsvpTable td{
  padding:14px 12px;
  border-bottom:1px solid rgba(255,255,255,.08);
  text-align:left;
  vertical-align:top;
  font-size:.82rem;
}
.rsvpTable th{
  color:#cbd5e1;
  text-transform:uppercase;
  letter-spacing:.11em;
  font-size:.66rem;
  background:rgba(255,255,255,.055);
}
.rsvpTable td{
  color:#e5edf8;
}
.rsvpTable td strong,
.rsvpTable td small{
  display:block;
}
.rsvpTable td small{
  margin-top:3px;
  color:#94a3b8;
  font-size:.72rem;
}
.statusPill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:28px;
  padding:0 10px;
  border-radius:999px;
  background:rgba(148,163,184,.14);
  border:1px solid rgba(148,163,184,.18);
  color:#e2e8f0;
  font-weight:900;
  white-space:nowrap;
}
.statusPill.ok{
  background:rgba(34,197,94,.13);
  border-color:rgba(34,197,94,.28);
  color:#bbf7d0;
}
.statusPill.no{
  background:rgba(248,113,113,.13);
  border-color:rgba(248,113,113,.28);
  color:#fecaca;
}
.statusPill.maybe{
  background:rgba(250,204,21,.13);
  border-color:rgba(250,204,21,.28);
  color:#fde68a;
}

@media(max-width:1120px){
  .rsvpStats{
    grid-template-columns:repeat(3,1fr);
  }
}
@media(max-width:720px){
  .rsvpHead{
    flex-direction:column;
  }
  .rsvpTools{
    width:100%;
    justify-content:flex-start;
  }
  .rsvpTools .input.mini{
    width:100%;
  }
  .rsvpTools button{
    flex:1 1 auto;
  }
  .rsvpStats{
    grid-template-columns:repeat(2,1fr);
  }
}


/* =========================================================
   EventoQR.click Level Dios V36.20.3.3
   Check-in dashboard + checkin page
   ========================================================= */

.checkinDashboard{
  margin-top:18px;
}
.checkinHead{
  align-items:flex-start;
}
.checkinHead > div:first-child span{
  display:block;
  margin-top:4px;
  color:#94a3b8;
  font-size:.82rem;
  font-weight:800;
}
.searchMini{
  min-width:250px!important;
}
.checkinList{
  display:grid;
  gap:12px;
  margin-top:16px;
}
.checkinItem{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  align-items:center;
  gap:14px;
  padding:16px;
  border-radius:24px;
  background:
    radial-gradient(circle at top left, rgba(14,165,233,.10), transparent 44%),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.045));
  border:1px solid rgba(255,255,255,.11);
  box-shadow:0 18px 44px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.06);
}
.checkinItem.inside{
  border-color:rgba(34,197,94,.30);
  background:
    radial-gradient(circle at top left, rgba(34,197,94,.16), transparent 46%),
    linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.05));
}
.checkinPerson strong,
.checkinPerson span,
.checkinPerson small{
  display:block;
}
.checkinPerson strong{
  font-size:1.02rem;
  color:#fff;
}
.checkinPerson span{
  color:#cbd5e1;
  font-size:.82rem;
  margin-top:2px;
}
.checkinPerson small{
  color:#94a3b8;
  font-size:.76rem;
  margin-top:3px;
}
.checkinBadge{
  min-width:96px;
  text-align:center;
  padding:9px 12px;
  border-radius:999px;
  font-size:.72rem;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.10em;
}
.checkinBadge.in{
  background:rgba(34,197,94,.13);
  border:1px solid rgba(34,197,94,.28);
  color:#bbf7d0;
}
.checkinBadge.pending{
  background:rgba(250,204,21,.12);
  border:1px solid rgba(250,204,21,.24);
  color:#fde68a;
}
.checkinActions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:flex-end;
}
.checkinActions button,
.checkinActions a{
  min-height:36px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  padding:0 12px;
  font-size:.76rem;
  font-weight:900;
  border:1px solid rgba(255,255,255,.12);
  color:#e2e8f0;
  background:rgba(255,255,255,.08);
  cursor:pointer;
}
.checkinActions button:not(:disabled){
  background:linear-gradient(135deg, rgba(34,197,94,.32), rgba(14,165,233,.20));
  border-color:rgba(34,197,94,.30);
}
.checkinActions button:disabled{
  cursor:not-allowed;
  opacity:.72;
}

/* Standalone checkin page */
.checkinBody{
  min-height:100vh;
  color:#e5edf8;
  background:
    radial-gradient(circle at 12% 0%, rgba(201,162,39,.12), transparent 28%),
    radial-gradient(circle at 88% 0%, rgba(124,58,237,.16), transparent 28%),
    linear-gradient(180deg,#020617,#071024 54%,#020617);
}
.checkinShell{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:24px;
}
.checkinCard{
  width:min(680px,100%);
  border-radius:34px;
  padding:30px;
  background:
    radial-gradient(circle at top left, rgba(14,165,233,.10), transparent 44%),
    linear-gradient(180deg, rgba(15,23,42,.82), rgba(15,23,42,.62));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 30px 90px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter:blur(20px);
  text-align:center;
}
.checkinCard em{
  display:block;
  margin-top:12px;
  font-style:normal;
  text-transform:uppercase;
  letter-spacing:.20em;
  font-size:.72rem;
  font-weight:900;
  color:#c9a227;
}
.checkinCard h1{
  font-size:clamp(2rem,5vw,3.2rem);
  line-height:1;
  margin:12px 0;
}
.checkinCard p{
  color:#94a3b8;
}
.checkinDetails{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
  margin:22px 0;
}
.checkinDetails article{
  text-align:left;
  border-radius:22px;
  padding:16px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.11);
}
.checkinDetails span,
.checkinDetails strong{
  display:block;
}
.checkinDetails span{
  text-transform:uppercase;
  letter-spacing:.12em;
  color:#94a3b8;
  font-size:.66rem;
  font-weight:900;
}
.checkinDetails strong{
  margin-top:4px;
  color:#fff;
}
.checkinBack{
  display:block;
  margin-top:14px;
  color:#cbd5e1;
  font-weight:800;
}
#markCheckinBtn.done,
#markCheckinBtn:disabled{
  opacity:.72;
}

@media(max-width:980px){
  .checkinItem{
    grid-template-columns:1fr;
  }
  .checkinBadge{
    width:max-content;
  }
  .checkinActions{
    justify-content:flex-start;
  }
}
@media(max-width:720px){
  .checkinDetails{
    grid-template-columns:1fr;
  }
  .searchMini{
    min-width:0!important;
  }
}


/* =========================================================
   EventoQR.click Level Dios V36.20.3.3
   Ultra Premium visual pass
   ========================================================= */
.view{
  color:var(--event-text);
  background:
    radial-gradient(circle at 14% 8%, rgba(255,255,255,.12), transparent 18%),
    radial-gradient(circle at 82% 0%, color-mix(in srgb, var(--event-primary) 14%, transparent), transparent 28%),
    linear-gradient(180deg, color-mix(in srgb, var(--event-bg) 65%, #f2ecff) 0%, color-mix(in srgb, var(--event-bg) 78%, #9089fc) 52%, color-mix(in srgb, var(--event-bg) 82%, #020617) 100%);
}
.invitePage{
  padding:28px 16px 54px;
  background:transparent !important;
}
.inviteShell{
  width:min(1280px, calc(100% - 12px));
  border-radius:46px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.06)),
    linear-gradient(180deg, rgba(18,24,61,.56), rgba(9,15,39,.48));
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 40px 120px rgba(17,24,39,.30), inset 0 1px 0 rgba(255,255,255,.10), inset 0 -30px 80px rgba(255,255,255,.02);
}
.inviteShell::before{
  inset:16px;
  border-radius:34px;
  border-color:rgba(255,255,255,.10);
}
.inviteHero{
  min-height:min(100vh, 1040px);
  padding:66px 24px 58px;
  isolation:isolate;
}
.inviteHero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at center, rgba(255,255,255,.08), transparent 48%),
    linear-gradient(180deg, rgba(7,11,31,.14), rgba(7,11,31,.34));
  pointer-events:none;
}
.heroPhotoLayer{
  filter:saturate(1.06) contrast(1.02);
}
.premiumHeroCard{
  width:min(920px, 100%);
  border-radius:54px;
  padding:54px 34px 34px;
  background:
    radial-gradient(circle at top center, rgba(255,255,255,.14), transparent 30%),
    linear-gradient(180deg, rgba(35,42,92,.78), rgba(39,38,98,.72));
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 44px 110px rgba(17,24,39,.34), inset 0 1px 0 rgba(255,255,255,.12), inset 0 -20px 50px rgba(0,0,0,.06);
  position:relative;
  overflow:hidden;
}
.premiumHeroCard::before,
.premiumHeroCard::after{
  content:"";
  position:absolute;
  border-radius:999px;
  pointer-events:none;
}
.premiumHeroCard::before{
  width:340px;height:340px;top:-160px;right:-90px;
  background:radial-gradient(circle, rgba(255,255,255,.15), transparent 66%);
}
.premiumHeroCard::after{
  width:220px;height:220px;bottom:-90px;left:-80px;
  background:radial-gradient(circle, color-mix(in srgb,var(--event-primary) 28%, transparent), transparent 70%);
}
.heroTopline{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
}
.badge{
  min-height:38px;
  padding:0 20px;
  letter-spacing:.16em;
  box-shadow:0 10px 28px rgba(124,58,237,.24);
}
.miniBadge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  padding:0 16px;
  border-radius:999px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.14);
  color:var(--event-secondary);
  font-size:.70rem;
  text-transform:uppercase;
  letter-spacing:.16em;
  font-weight:900;
}
.titleStack{
  position:relative;
  z-index:1;
}
.inviteCard h1{
  font-size:clamp(3.2rem, 8.4vw, 7rem);
  line-height:.92;
  margin:18px 0 0;
  letter-spacing:-.05em;
  text-wrap:balance;
  color:#fffaf6;
}
.subtitle{
  margin:12px 0 0;
  color:rgba(255,255,255,.74);
  letter-spacing:.08em;
  font-weight:800;
}
.inviteCard h2{
  font-size:clamp(3.3rem, 8.2vw, 6.2rem);
  line-height:.92;
  margin:8px 0 0;
  color:#ff8df4;
  text-shadow:0 16px 40px rgba(255,105,180,.20);
}
.inviteCard h3{
  font-size:clamp(1.8rem,4.5vw,3rem);
  margin:12px 0 0;
  color:#ffffff;
}
.heroInfoBar{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  margin:20px auto 8px;
  max-width:760px;
}
.heroInfoBar span{
  min-height:42px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:0 14px;
  border-radius:999px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.13);
  color:#f8fafc;
  font-size:.86rem;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.heroInfoBar b{
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--event-secondary);
}
.dateLine{
  font-size:1.12rem;
  font-weight:900;
  margin:16px 0 0;
  color:#f8fafc;
}
.goldDivider{
  width:120px;
  height:4px;
  border-radius:999px;
  background:linear-gradient(90deg, transparent, var(--event-primary), #f8e7a7, var(--event-primary), transparent);
  margin:20px auto 18px;
  box-shadow:0 0 24px color-mix(in srgb, var(--event-primary) 44%, transparent);
}
.welcome{
  max-width:680px;
  font-size:1.08rem;
  line-height:1.7;
  color:rgba(255,255,255,.86);
}
.passCard{
  width:min(500px,100%);
  border-radius:30px;
  padding:18px 18px 16px;
  background:linear-gradient(180deg, rgba(9,14,36,.34), rgba(255,255,255,.08));
  border:1px solid rgba(255,255,255,.15);
  box-shadow:0 18px 48px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.06);
}
.passCard strong{
  font-size:1.9rem;
}
.familyLine{
  gap:12px;
  max-width:720px;
}
.familyLine p{
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
  border:1px solid rgba(255,255,255,.12);
}
.countdown{
  gap:12px;
  max-width:620px;
  margin:30px auto 0;
}
.countdown div{
  border-radius:24px;
  padding:16px 8px 14px;
  background:linear-gradient(180deg, rgba(10,17,44,.44), rgba(255,255,255,.08));
  border:1px solid rgba(255,255,255,.13);
  box-shadow:0 14px 34px rgba(0,0,0,.16);
}
.countdown b{
  font-size:1.9rem;
  line-height:1;
}
.countdown span{
  font-size:.66rem;
  letter-spacing:.15em;
}
.inviteSection{
  padding:38px 34px;
}
.sectionTitle{
  margin-bottom:28px;
}
.sectionTitle h2{
  font-size:clamp(2.4rem,4vw,4rem);
  letter-spacing:-.05em;
}
.detailCard,
.linkGrid a,
.rsvpCard,
.shareCard,
.timeline div,
.gallery figure{
  border-radius:32px;
  background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
  border:1px solid rgba(255,255,255,.15);
  box-shadow:0 22px 60px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.05);
}
.detailCard h3,
.shareCard h2,
.rsvpCard h2{
  font-size:clamp(1.5rem, 3vw, 2.2rem);
}
.detailCard b{
  display:inline-flex;
  min-height:34px;
  align-items:center;
  padding:0 12px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  margin:.2rem 0 .7rem;
}
.linkGrid a:hover,
.detailCard:hover,
.gallery figure:hover{
  transform:translateY(-4px);
  transition:transform .18s ease, box-shadow .18s ease;
  box-shadow:0 28px 70px rgba(0,0,0,.18), 0 0 0 1px rgba(255,255,255,.04);
}
.timeline{
  gap:14px;
}
.timeline div{
  padding:22px;
}
.shareCard p{
  overflow-wrap:anywhere;
}
.inviteStaticActions{
  right:22px !important;
  background:linear-gradient(180deg, rgba(24,34,70,.80), rgba(18,25,54,.62));
  border-color:rgba(255,255,255,.16);
}
.inviteStaticActions a,
.inviteStaticActions button{
  width:64px;
  min-height:64px;
  border-radius:22px;
}
.inviteStaticActions span{
  font-size:.50rem;
  letter-spacing:.10em;
}

@media (max-width:980px){
  .inviteShell{width:min(100%, calc(100% - 8px));}
  .premiumHeroCard{padding:42px 22px 26px;}
  .heroInfoBar span{font-size:.8rem;}
}
@media (max-width:720px){
  .invitePage{padding:12px 10px 88px;}
  .inviteShell{border-radius:28px;}
  .inviteHero{padding:32px 14px 28px;min-height:auto;}
  .premiumHeroCard{border-radius:30px;}
  .heroInfoBar{gap:8px;}
  .heroInfoBar span{width:100%;justify-content:center;}
  .familyLine{grid-template-columns:1fr;}
  .countdown{grid-template-columns:repeat(2,1fr);}
  .inviteStaticActions{right:12px !important;}
}


/* =========================================================
   EventoQR.click Level Dios V36.20.3.3
   Top Market Metallic Palettes
   ========================================================= */
.themeNote{
  margin:-2px 0 14px;
  color:#94a3b8;
  font-size:.78rem;
  font-weight:700;
}
.themePresets{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin:8px 0 14px;
}
.themePreset{
  min-height:44px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.14);
  cursor:pointer;
  font-weight:900;
  letter-spacing:.04em;
  color:#fff;
  background:linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.themePreset.active{
  outline:2px solid color-mix(in srgb,var(--event-primary) 60%, #fff);
  box-shadow:0 0 0 5px color-mix(in srgb,var(--event-primary) 16%, transparent), inset 0 1px 0 rgba(255,255,255,.10);
}
.themePreset.gold{background:linear-gradient(135deg,#6d5214,#d4af37,#f7e6ae); color:#241700}
.themePreset.silver{background:linear-gradient(135deg,#67707a,#c2cbd6,#f8fafc); color:#0f172a}
.themePreset.rose{background:linear-gradient(135deg,#7d5b2e,#d8b06f,#ffe7db); color:#2b160b}
.themePreset.noir{background:linear-gradient(135deg,#1a1f2b,#7e7658,#edeff3); color:#fff}

.previewCard{
  position:relative;
  isolation:isolate;
}
.previewCard::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:
    linear-gradient(115deg, transparent 0 54%, rgba(255,255,255,.12) 54% 58%, transparent 58% 100%),
    radial-gradient(circle at top left, rgba(255,255,255,.18), transparent 34%);
  pointer-events:none;
  z-index:0;
}
.previewCard>*{position:relative;z-index:1}
.previewCard em{
  display:block;
  margin:10px auto 0;
  color:var(--event-secondary);
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:.62rem;
  font-weight:900;
  opacity:.85;
}
.previewCard h2,
.previewCard h3,
.metallicTitle,
.metallicName{
  color:transparent;
  -webkit-background-clip:text;
  background-clip:text;
}
.previewCard.theme-gold-royal h2,
.theme-gold-royal .metallicTitle,
.theme-gold-royal .inviteCard h1{
  background-image:linear-gradient(180deg, #fff8df 0%, #f8e7a7 18%, #d4af37 42%, #8f6a14 68%, #fff0b8 100%);
  text-shadow:none;
}
.previewCard.theme-gold-royal h3,
.theme-gold-royal .metallicName,
.theme-gold-royal .inviteCard h2{
  background-image:linear-gradient(180deg, #fffdf8 0%, #f3f4f6 22%, #cfd6dd 50%, #7f8a99 78%, #ffffff 100%);
}
.previewCard.theme-silver-luxe h2,
.theme-silver-luxe .metallicTitle,
.theme-silver-luxe .inviteCard h1{
  background-image:linear-gradient(180deg, #ffffff 0%, #f5f7fa 16%, #c2cbd6 44%, #7b8794 72%, #f8fafc 100%);
}
.previewCard.theme-silver-luxe h3,
.theme-silver-luxe .metallicName,
.theme-silver-luxe .inviteCard h2{
  background-image:linear-gradient(180deg, #fff8df 0%, #ecd58d 20%, #d7b45d 46%, #8c6a18 76%, #fff0c4 100%);
}
.previewCard.theme-champagne-rose h2,
.theme-champagne-rose .metallicTitle,
.theme-champagne-rose .inviteCard h1{
  background-image:linear-gradient(180deg, #fffaf4 0%, #ffe7db 24%, #f1cbb2 46%, #b98a6c 76%, #fff5ee 100%);
}
.previewCard.theme-champagne-rose h3,
.theme-champagne-rose .metallicName,
.theme-champagne-rose .inviteCard h2{
  background-image:linear-gradient(180deg, #fff2bd 0%, #e7c981 18%, #d8b06f 44%, #865b24 74%, #fff5d6 100%);
}
.previewCard.theme-pearl-noir h2,
.theme-pearl-noir .metallicTitle,
.theme-pearl-noir .inviteCard h1{
  background-image:linear-gradient(180deg, #ffffff 0%, #edeff3 22%, #cfd4dc 50%, #8a93a3 76%, #ffffff 100%);
}
.previewCard.theme-pearl-noir h3,
.theme-pearl-noir .metallicName,
.theme-pearl-noir .inviteCard h2{
  background-image:linear-gradient(180deg, #fff8da 0%, #e9d8a1 20%, #c7b27d 50%, #7c6940 78%, #fff8e3 100%);
}

.theme-gold-royal .inviteShell,
.theme-silver-luxe .inviteShell,
.theme-champagne-rose .inviteShell,
.theme-pearl-noir .inviteShell{
  position:relative;
}
.theme-gold-royal .inviteShell::after,
.theme-silver-luxe .inviteShell::after,
.theme-champagne-rose .inviteShell::after,
.theme-pearl-noir .inviteShell::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  opacity:.34;
  mix-blend-mode:screen;
  background:
    linear-gradient(125deg, transparent 0 45%, rgba(255,255,255,.10) 45% 53%, transparent 53% 100%),
    radial-gradient(circle at 14% 8%, rgba(255,255,255,.16), transparent 22%),
    radial-gradient(circle at 82% 16%, rgba(255,255,255,.10), transparent 18%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.018) 0 2px, transparent 2px 10px);
}
.theme-gold-royal .premiumHeroCard,
.theme-gold-royal .detailCard,
.theme-gold-royal .timeline div,
.theme-gold-royal .rsvpCard,
.theme-gold-royal .shareCard,
.theme-gold-royal .linkGrid a,
.theme-gold-royal .gallery figure{
  background:
    radial-gradient(circle at top left, rgba(244,215,120,.10), transparent 34%),
    linear-gradient(180deg, rgba(25,21,39,.74), rgba(35,34,66,.68));
}
.theme-silver-luxe .premiumHeroCard,
.theme-silver-luxe .detailCard,
.theme-silver-luxe .timeline div,
.theme-silver-luxe .rsvpCard,
.theme-silver-luxe .shareCard,
.theme-silver-luxe .linkGrid a,
.theme-silver-luxe .gallery figure{
  background:
    radial-gradient(circle at top left, rgba(194,203,214,.14), transparent 36%),
    linear-gradient(180deg, rgba(16,24,40,.76), rgba(19,28,48,.68));
}
.theme-champagne-rose .premiumHeroCard,
.theme-champagne-rose .detailCard,
.theme-champagne-rose .timeline div,
.theme-champagne-rose .rsvpCard,
.theme-champagne-rose .shareCard,
.theme-champagne-rose .linkGrid a,
.theme-champagne-rose .gallery figure{
  background:
    radial-gradient(circle at top left, rgba(216,176,111,.12), transparent 36%),
    linear-gradient(180deg, rgba(34,22,32,.76), rgba(50,34,56,.68));
}
.theme-pearl-noir .premiumHeroCard,
.theme-pearl-noir .detailCard,
.theme-pearl-noir .timeline div,
.theme-pearl-noir .rsvpCard,
.theme-pearl-noir .shareCard,
.theme-pearl-noir .linkGrid a,
.theme-pearl-noir .gallery figure{
  background:
    radial-gradient(circle at top left, rgba(237,239,243,.10), transparent 34%),
    linear-gradient(180deg, rgba(8,12,22,.80), rgba(14,18,28,.76));
}
.theme-gold-royal .badge{background-image:linear-gradient(135deg,#8f6a14,#d4af37,#fff0b8)}
.theme-silver-luxe .badge{background-image:linear-gradient(135deg,#747d89,#c2cbd6,#ffffff)}
.theme-champagne-rose .badge{background-image:linear-gradient(135deg,#8c6c34,#d8b06f,#ffe7db)}
.theme-pearl-noir .badge{background-image:linear-gradient(135deg,#7c6940,#e1d2a8,#ffffff)}

.theme-gold-royal .heroInfoBar span,
.theme-gold-royal .passCard,
.theme-gold-royal .countdown div,
.theme-gold-royal .familyLine p{border-color:rgba(244,215,120,.22)}
.theme-silver-luxe .heroInfoBar span,
.theme-silver-luxe .passCard,
.theme-silver-luxe .countdown div,
.theme-silver-luxe .familyLine p{border-color:rgba(194,203,214,.22)}
.theme-champagne-rose .heroInfoBar span,
.theme-champagne-rose .passCard,
.theme-champagne-rose .countdown div,
.theme-champagne-rose .familyLine p{border-color:rgba(216,176,111,.22)}
.theme-pearl-noir .heroInfoBar span,
.theme-pearl-noir .passCard,
.theme-pearl-noir .countdown div,
.theme-pearl-noir .familyLine p{border-color:rgba(225,210,168,.20)}

@media(max-width:720px){
  .themePresets{grid-template-columns:1fr;}
}


/* =========================================================
   EventoQR.click V12.1
   Fix metallic text rendering in public view
   ========================================================= */

/*
  Important:
  The metallic gradients must be clipped to the glyphs.
  Without background-clip:text, browsers render the gradient as a full rectangular band.
*/
.invitePage.theme-gold-royal .inviteCard h1,
.invitePage.theme-gold-royal .inviteCard h2,
.invitePage.theme-silver-luxe .inviteCard h1,
.invitePage.theme-silver-luxe .inviteCard h2,
.invitePage.theme-champagne-rose .inviteCard h1,
.invitePage.theme-champagne-rose .inviteCard h2,
.invitePage.theme-pearl-noir .inviteCard h1,
.invitePage.theme-pearl-noir .inviteCard h2{
  color:transparent !important;
  -webkit-text-fill-color:transparent !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  background-repeat:no-repeat !important;
  background-size:100% 100% !important;
  display:inline-block;
  width:auto;
  max-width:100%;
  padding:0 .03em;
  text-shadow:none !important;
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
}

/* Preserve clean centering after converting title blocks to inline-block */
.invitePage .titleStack{
  text-align:center;
}
.invitePage .titleStack h1,
.invitePage .titleStack h2,
.invitePage .titleStack h3{
  margin-left:auto;
  margin-right:auto;
}

/* Metallic title readability polish */
.invitePage.theme-gold-royal .inviteCard h1{
  filter:drop-shadow(0 16px 24px rgba(0,0,0,.24));
}
.invitePage.theme-gold-royal .inviteCard h2{
  filter:drop-shadow(0 12px 22px rgba(255,255,255,.08));
}
.invitePage.theme-silver-luxe .inviteCard h1,
.invitePage.theme-silver-luxe .inviteCard h2{
  filter:drop-shadow(0 14px 24px rgba(0,0,0,.24));
}
.invitePage.theme-champagne-rose .inviteCard h1,
.invitePage.theme-champagne-rose .inviteCard h2,
.invitePage.theme-pearl-noir .inviteCard h1,
.invitePage.theme-pearl-noir .inviteCard h2{
  filter:drop-shadow(0 14px 24px rgba(0,0,0,.22));
}

/* Admin preview remains clipped correctly as well */
.previewCard h2,
.previewCard h3{
  color:transparent !important;
  -webkit-text-fill-color:transparent !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  background-repeat:no-repeat !important;
  background-size:100% 100% !important;
  text-shadow:none !important;
}

/* Avoid oversized bars if any browser ignores clipping */
.inviteCard h1,
.inviteCard h2{
  background-origin:border-box;
}

@media(max-width:720px){
  .invitePage.theme-gold-royal .inviteCard h1,
  .invitePage.theme-gold-royal .inviteCard h2,
  .invitePage.theme-silver-luxe .inviteCard h1,
  .invitePage.theme-silver-luxe .inviteCard h2,
  .invitePage.theme-champagne-rose .inviteCard h1,
  .invitePage.theme-champagne-rose .inviteCard h2,
  .invitePage.theme-pearl-noir .inviteCard h1,
  .invitePage.theme-pearl-noir .inviteCard h2{
    padding:0 .01em;
  }
}


/* =========================================================
   EventoQR.click V12.2
   CTA buttons / quick links upgrade
   ========================================================= */

.linkGrid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
}
.ctaLink{
  position:relative;
  display:grid;
  grid-template-columns:72px minmax(0,1fr) auto;
  align-items:center;
  gap:16px;
  min-height:150px;
  padding:22px 24px;
  overflow:hidden;
  text-decoration:none;
  isolation:isolate;
  border-radius:34px !important;
}
.ctaLink::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:
    radial-gradient(circle at top left, rgba(255,255,255,.16), transparent 28%),
    linear-gradient(120deg, transparent 0 56%, rgba(255,255,255,.06) 56% 62%, transparent 62% 100%);
  pointer-events:none;
  z-index:0;
}
.ctaLink::after{
  content:"";
  position:absolute;
  inset:auto -30px -42px auto;
  width:150px;
  height:150px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.10), transparent 70%);
  pointer-events:none;
  z-index:0;
}
.ctaLink > *{
  position:relative;
  z-index:1;
}
.ctaIcon{
  width:72px;
  height:72px;
  border-radius:24px;
  display:grid;
  place-items:center;
  font-size:1.8rem;
  font-weight:900;
  color:#fff;
  background:linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.06));
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 14px 30px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.10);
}
.ctaCopy{
  min-width:0;
}
.ctaCopy small{
  display:block;
  margin-bottom:8px;
  text-transform:uppercase;
  letter-spacing:.20em;
  font-size:.72rem;
}
.ctaCopy strong{
  display:block;
  font-size:2rem !important;
  line-height:1.04;
  margin:0 0 8px !important;
}
.ctaCopy p{
  margin:0;
  color:rgba(255,255,255,.74);
  font-size:.95rem;
  line-height:1.5;
}
.ctaArrow{
  width:54px;
  height:54px;
  border-radius:18px;
  display:grid;
  place-items:center;
  font-size:1.35rem;
  font-weight:900;
  color:#fff;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  transition:transform .22s ease, background .22s ease, box-shadow .22s ease;
}
.ctaLink:hover{
  transform:translateY(-4px);
  box-shadow:0 30px 70px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.08) !important;
}
.ctaLink:hover .ctaArrow{
  transform:translateX(4px);
  background:rgba(255,255,255,.14);
  box-shadow:0 10px 26px rgba(0,0,0,.18);
}
.ctaLink:hover .ctaIcon{
  transform:scale(1.04);
}
.ctaLink.is-map{
  background:
    radial-gradient(circle at top left, rgba(83,181,255,.16), transparent 30%),
    linear-gradient(180deg, rgba(24,31,66,.92), rgba(33,40,78,.86)) !important;
  border-color:rgba(83,181,255,.22) !important;
}
.ctaLink.is-map .ctaIcon{
  background:linear-gradient(135deg, rgba(37,99,235,.48), rgba(14,165,233,.28));
  color:#dff4ff;
}
.ctaLink.is-map .ctaCopy small{
  color:#80d6ff !important;
}
.ctaLink.is-whatsapp{
  background:
    radial-gradient(circle at top left, rgba(34,197,94,.18), transparent 30%),
    linear-gradient(180deg, rgba(19,34,47,.92), rgba(22,45,59,.86)) !important;
  border-color:rgba(34,197,94,.22) !important;
}
.ctaLink.is-whatsapp .ctaIcon{
  background:linear-gradient(135deg, rgba(22,163,74,.52), rgba(14,165,233,.18));
  color:#dcfce7;
}
.ctaLink.is-whatsapp .ctaCopy small{
  color:#86efac !important;
}
.ctaLink.is-rsvp{
  background:
    radial-gradient(circle at top left, rgba(244,114,182,.16), transparent 30%),
    linear-gradient(180deg, rgba(39,24,49,.92), rgba(48,27,60,.86)) !important;
  border-color:rgba(244,114,182,.22) !important;
}
.ctaLink.is-rsvp .ctaIcon{
  background:linear-gradient(135deg, rgba(244,114,182,.42), rgba(168,85,247,.24));
  color:#ffe0f4;
}
.ctaLink.is-rsvp .ctaCopy small{
  color:#f9a8d4 !important;
}
.theme-gold-royal .ctaLink{
  border:1px solid rgba(244,215,120,.18);
}
.theme-silver-luxe .ctaLink{
  border:1px solid rgba(194,203,214,.18);
}
.theme-champagne-rose .ctaLink{
  border:1px solid rgba(216,176,111,.18);
}
.theme-pearl-noir .ctaLink{
  border:1px solid rgba(225,210,168,.16);
}

@media(max-width:920px){
  .ctaLink{
    grid-template-columns:64px minmax(0,1fr);
    gap:14px;
    min-height:unset;
    padding:18px 18px 20px;
  }
  .ctaArrow{
    grid-column:2;
    justify-self:start;
    margin-top:4px;
    width:46px;
    height:46px;
    border-radius:14px;
  }
  .ctaCopy strong{
    font-size:1.6rem !important;
  }
}
@media(max-width:720px){
  .linkGrid{
    grid-template-columns:1fr;
    gap:14px;
  }
  .ctaLink{
    border-radius:28px !important;
  }
  .ctaCopy strong{
    font-size:1.42rem !important;
  }
  .ctaCopy p{
    font-size:.90rem;
  }
}


/* =========================================================
   EventoQR.click V13
   Specific template picker
   ========================================================= */
.templateChooserWrap{
  margin-top:16px;
  padding:16px;
  border-radius:24px;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.08);
}
.templateChooserHead{
  display:flex;
  flex-direction:column;
  gap:3px;
  margin-bottom:12px;
}
.templateChooserHead strong{
  color:#fff;
  font-size:.95rem;
}
.templateChooserHead span{
  color:#94a3b8;
  font-size:.78rem;
  line-height:1.45;
}
.templateCatalog{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.templateCardPick{
  text-align:left;
  padding:16px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.templateCardPick:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 30px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.06);
}
.templateCardPick.active{
  border-color:rgba(255,255,255,.24);
  box-shadow:0 0 0 4px rgba(255,255,255,.04), 0 18px 36px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.08);
}
.templateCardPick .templateKicker{
  display:block;
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.18em;
  font-weight:900;
  margin-bottom:8px;
}
.templateCardPick strong{
  display:block;
  color:#fff;
  font-size:1.02rem;
  line-height:1.15;
}
.templateCardPick small{
  display:block;
  margin-top:6px;
  color:#cbd5e1;
  line-height:1.5;
  font-size:.79rem;
  min-height:2.4em;
}
.templateSwatches{
  display:flex;
  gap:8px;
  margin-top:12px;
}
.templateSwatches i{
  width:20px;
  height:20px;
  border-radius:999px;
  background:var(--sw);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 2px 10px rgba(0,0,0,.14);
}
.templateCardPick.theme-gold-royal{
  background:radial-gradient(circle at top left, rgba(212,175,55,.16), transparent 34%), linear-gradient(180deg, rgba(35,27,18,.76), rgba(23,17,31,.68));
}
.templateCardPick.theme-gold-royal .templateKicker{color:#f6df90;}
.templateCardPick.theme-silver-luxe{
  background:radial-gradient(circle at top left, rgba(194,203,214,.18), transparent 36%), linear-gradient(180deg, rgba(14,21,36,.78), rgba(21,28,45,.72));
}
.templateCardPick.theme-silver-luxe .templateKicker{color:#dce6f0;}
.templateCardPick.theme-champagne-rose{
  background:radial-gradient(circle at top left, rgba(216,176,111,.16), transparent 36%), linear-gradient(180deg, rgba(42,26,37,.78), rgba(53,34,47,.72));
}
.templateCardPick.theme-champagne-rose .templateKicker{color:#ffe1c2;}
.templateCardPick.theme-pearl-noir{
  background:radial-gradient(circle at top left, rgba(225,210,168,.14), transparent 34%), linear-gradient(180deg, rgba(8,11,19,.82), rgba(15,19,29,.76));
}
.templateCardPick.theme-pearl-noir .templateKicker{color:#f0e6c6;}

@media(max-width:960px){
  .templateCatalog{grid-template-columns:1fr;}
}


/* =========================================================
   EventoQR.click V14
   Template-specific layouts & personality
   ========================================================= */
.invitePage[class*="tpl-"] .premiumHeroCard{
  position:relative;
}
.heroStatement{
  margin:12px auto 4px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  padding:0 16px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.82);
  font-size:.82rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-weight:800;
}
.coupleNames{
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:18px;
  flex-wrap:wrap;
  margin-top:10px;
}
.coupleNames h2,
.coupleNames h3{
  margin:0 !important;
  font-size:clamp(2.6rem, 6vw, 4.5rem) !important;
}
.coupleNames .ampersand{
  font-family:"Playfair Display", serif;
  font-size:clamp(2rem, 5vw, 4rem);
  line-height:1;
  color:rgba(255,255,255,.72);
  transform:translateY(-.1em);
}
.achievementLine,
.heroSoftNote{
  max-width:680px;
  margin:14px auto 0;
  color:rgba(255,255,255,.76);
  font-size:.98rem;
  line-height:1.6;
}
.tpl-xv-gold-royal .inviteHero.layout-grand .premiumHeroCard{
  max-width:980px;
}
.tpl-xv-gold-royal .premiumHeroCard::after{
  width:320px;
  height:320px;
  top:auto;
  bottom:-120px;
  left:auto;
  right:-100px;
}
.tpl-xv-gold-royal .goldDivider{
  width:160px;
  height:5px;
}
.tpl-xv-gold-royal .countdown div{
  border-radius:28px;
}
.tpl-xv-gold-royal .sectionTitle h2{
  letter-spacing:-.06em;
}

.tpl-wedding-silver-pearl .inviteHero.layout-romance{
  padding-top:82px;
  padding-bottom:72px;
}
.tpl-wedding-silver-pearl .premiumHeroCard{
  max-width:940px;
  padding-top:62px;
  border-radius:58px;
  background:
    radial-gradient(circle at top left, rgba(255,255,255,.16), transparent 30%),
    linear-gradient(180deg, rgba(22,28,44,.74), rgba(26,32,52,.64));
}
.tpl-wedding-silver-pearl .heroStatement{
  background:rgba(255,255,255,.06);
  color:#e6edf5;
}
.tpl-wedding-silver-pearl .titleStack{
  max-width:760px;
  margin:0 auto;
}
.tpl-wedding-silver-pearl .inviteCard h1{
  font-size:clamp(2.8rem, 7vw, 5.8rem);
}
.tpl-wedding-silver-pearl .goldDivider{
  width:220px;
  background:linear-gradient(90deg, transparent, #c2cbd6, #ffffff, #c2cbd6, transparent);
}
.tpl-wedding-silver-pearl .detailGrid{
  grid-template-columns:1.15fr 1.15fr .9fr;
}
.tpl-wedding-silver-pearl .timeline div{
  border-left-width:2px;
  border-left-color:#dfe6ef;
}
.tpl-wedding-silver-pearl .gallery figure{
  border-radius:34px;
}

.tpl-baptism-soft-silver .inviteShell{
  width:min(1120px, calc(100% - 12px));
}
.tpl-baptism-soft-silver .inviteHero.layout-soft{
  min-height:auto;
  padding-top:56px;
  padding-bottom:46px;
}
.tpl-baptism-soft-silver .premiumHeroCard{
  max-width:820px;
  border-radius:44px;
  background:
    radial-gradient(circle at top center, rgba(255,255,255,.14), transparent 36%),
    linear-gradient(180deg, rgba(18,28,50,.64), rgba(22,31,48,.52));
}
.tpl-baptism-soft-silver .sectionTitle h2{
  font-size:clamp(2rem, 4vw, 3.25rem);
}
.tpl-baptism-soft-silver .detailCard,
.tpl-baptism-soft-silver .timeline div,
.tpl-baptism-soft-silver .shareCard,
.tpl-baptism-soft-silver .rsvpCard{
  border-radius:26px;
}
.tpl-baptism-soft-silver .countdown{
  max-width:500px;
}
.tpl-baptism-soft-silver .countdown div{
  padding:12px 8px;
}
.tpl-baptism-soft-silver .heroSoftNote{
  font-style:italic;
}

.tpl-baby-shower-champagne .inviteHero.playful .ornament{
  border-style:dashed;
  opacity:.34;
}
.tpl-baby-shower-champagne .premiumHeroCard{
  max-width:880px;
  border-radius:62px;
  background:
    radial-gradient(circle at top left, rgba(255,231,219,.14), transparent 28%),
    radial-gradient(circle at bottom right, rgba(216,176,111,.12), transparent 24%),
    linear-gradient(180deg, rgba(43,28,40,.74), rgba(52,34,50,.60));
}
.tpl-baby-shower-champagne .heroStatement{
  background:rgba(255,244,238,.08);
  color:#ffe7db;
}
.tpl-baby-shower-champagne .passCard,
.tpl-baby-shower-champagne .detailCard,
.tpl-baby-shower-champagne .ctaLink,
.tpl-baby-shower-champagne .timeline div,
.tpl-baby-shower-champagne .shareCard,
.tpl-baby-shower-champagne .rsvpCard{
  border-radius:34px !important;
}
.tpl-baby-shower-champagne .countdown div{
  border-radius:26px;
}
.tpl-baby-shower-champagne .gallery img{
  height:220px;
}
.tpl-baby-shower-champagne .ctaIcon{
  border-radius:22px;
}

.tpl-graduation-noir-gold .inviteHero.layout-achievement{
  padding-top:72px;
}
.tpl-graduation-noir-gold .premiumHeroCard{
  max-width:950px;
  border-radius:40px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.05), transparent 18%),
    linear-gradient(180deg, rgba(8,13,22,.84), rgba(18,22,36,.76));
}
.tpl-graduation-noir-gold .heroStatement{
  letter-spacing:.16em;
  background:rgba(225,210,168,.08);
  color:#f0e6c6;
}
.tpl-graduation-noir-gold .inviteCard h1{
  font-size:clamp(2.4rem, 6vw, 4.8rem);
  letter-spacing:-.04em;
}
.tpl-graduation-noir-gold .inviteCard h2{
  font-size:clamp(3.1rem, 7.6vw, 6rem);
}
.tpl-graduation-noir-gold .achievementLine{
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.78rem;
  color:var(--event-secondary);
}
.tpl-graduation-noir-gold .detailCard,
.tpl-graduation-noir-gold .ctaLink,
.tpl-graduation-noir-gold .shareCard,
.tpl-graduation-noir-gold .rsvpCard{
  border-radius:24px !important;
}
.tpl-graduation-noir-gold .timeline div{
  border-left-width:4px;
  border-radius:18px;
}
.tpl-graduation-noir-gold .countdown div{
  border-radius:18px;
}

.tpl-wedding-silver-pearl .detailCard h3,
.tpl-graduation-noir-gold .detailCard h3,
.tpl-baptism-soft-silver .detailCard h3,
.tpl-baby-shower-champagne .detailCard h3{
  line-height:1.12;
}

@media (max-width: 900px){
  .tpl-wedding-silver-pearl .detailGrid{
    grid-template-columns:1fr;
  }
}
@media (max-width: 720px){
  .heroStatement{
    font-size:.72rem;
    padding:0 12px;
  }
  .coupleNames{
    gap:10px;
  }
  .coupleNames .ampersand{
    width:100%;
    text-align:center;
  }
  .tpl-xv-gold-royal .premiumHeroCard,
  .tpl-wedding-silver-pearl .premiumHeroCard,
  .tpl-baptism-soft-silver .premiumHeroCard,
  .tpl-baby-shower-champagne .premiumHeroCard,
  .tpl-graduation-noir-gold .premiumHeroCard{
    border-radius:30px;
    padding-top:38px;
  }
  .tpl-baby-shower-champagne .passCard,
  .tpl-baby-shower-champagne .detailCard,
  .tpl-baby-shower-champagne .ctaLink,
  .tpl-baby-shower-champagne .timeline div,
  .tpl-baby-shower-champagne .shareCard,
  .tpl-baby-shower-champagne .rsvpCard,
  .tpl-graduation-noir-gold .detailCard,
  .tpl-graduation-noir-gold .ctaLink,
  .tpl-graduation-noir-gold .shareCard,
  .tpl-graduation-noir-gold .rsvpCard{
    border-radius:22px !important;
  }
}


/* =========================================================
   EventoQR.click V14.1
   Mobile fixed actions menu fix
   ========================================================= */

/* Prevent horizontal cut-off caused by older right/translate rules */
html,
body{
  overflow-x:hidden;
}

/* Mobile: keep the action buttons fully inside the viewport */
@media (max-width: 768px){
  .inviteStaticActions{
    position:fixed !important;
    left:50% !important;
    right:auto !important;
    top:auto !important;
    bottom:max(10px, env(safe-area-inset-bottom, 10px)) !important;
    transform:translateX(-50%) !important;
    width:max-content !important;
    max-width:calc(100vw - 18px) !important;
    display:grid !important;
    grid-template-columns:repeat(6, minmax(42px, 1fr)) !important;
    gap:5px !important;
    padding:7px !important;
    border-radius:999px !important;
    overflow:hidden !important;
    box-sizing:border-box !important;
    z-index:99999 !important;
  }

  .inviteStaticActions a,
  .inviteStaticActions button{
    width:42px !important;
    min-width:42px !important;
    height:42px !important;
    min-height:42px !important;
    border-radius:999px !important;
    padding:0 !important;
  }

  .inviteStaticActions span{
    display:none !important;
  }

  .inviteStaticActions i{
    font-size:.95rem !important;
  }

  .inviteStaticActions a:hover,
  .inviteStaticActions button:hover,
  .inviteStaticActions a.is-awake,
  .inviteStaticActions button.is-awake,
  .inviteStaticActions button.copied{
    transform:scale(1.05) !important;
  }

  .invitePage{
    padding-bottom:104px !important;
  }

  footer{
    padding-bottom:92px !important;
  }
}


@media (max-width: 1180px){
  .salesDevice{
    width:min(420px,100%);
  }
  .salesFloatCard{
    min-width:168px;
    max-width:190px;
    padding:10px 12px;
  }
  .salesFloatCard b{
    width:40px;
    height:40px;
  }
  .salesFloatCard.one{
    left:-10px;
    top:18%;
  }
  .salesFloatCard.two{
    right:-10px;
    bottom:14%;
  }
}

/* Extra-small phones */
@media (max-width: 390px){
  .inviteStaticActions{
    max-width:calc(100vw - 12px) !important;
    grid-template-columns:repeat(6, 38px) !important;
    gap:4px !important;
    padding:6px !important;
  }

  .inviteStaticActions a,
  .inviteStaticActions button{
    width:38px !important;
    min-width:38px !important;
    height:38px !important;
    min-height:38px !important;
  }

  .inviteStaticActions i{
    font-size:.86rem !important;
  }
}

/* If browser viewport is tall but narrow, still center at bottom */
@media (max-width: 768px) and (orientation: portrait){
  .inviteStaticActions{
    left:50% !important;
    right:auto !important;
    transform:translateX(-50%) !important;
  }
}


/* =========================================================
   EventoQR.click V15
   Nivel Dios de Dioses
   ========================================================= */
@keyframes heroBreath {
  0%,100% { transform:translateY(0px); box-shadow:0 28px 78px rgba(0,0,0,.22); }
  50% { transform:translateY(-4px); box-shadow:0 34px 92px rgba(0,0,0,.28); }
}
@keyframes sigilPulse {
  0%,100% { transform:scale(1); box-shadow:0 0 0 0 rgba(255,255,255,.10); }
  50% { transform:scale(1.04); box-shadow:0 0 0 10px rgba(255,255,255,0); }
}
@keyframes floatCard {
  0%,100% { transform:translateY(0); }
  50% { transform:translateY(-5px); }
}
@keyframes shineSweep {
  0% { transform:translateX(-120%) skewX(-18deg); opacity:0; }
  30% { opacity:.14; }
  100% { transform:translateX(140%) skewX(-18deg); opacity:0; }
}
@keyframes countPulse {
  0%,100% { transform:translateY(0); }
  50% { transform:translateY(-2px); }
}
.invitePage .animateHeroCard{ animation:heroBreath 8s ease-in-out infinite; }
.inviteSection .sectionTitle{ display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap; margin-bottom:18px; }
.inviteSection .sectionTitle.left{ justify-content:flex-start; }
.inviteSection .sectionTitle .sectionSigil{ width:58px; height:58px; border-radius:20px; display:grid; place-items:center; font-size:1.35rem; font-weight:900; color:#fff; background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.20), transparent 26%), linear-gradient(135deg, color-mix(in srgb, var(--event-primary) 72%, #ffffff), color-mix(in srgb, var(--event-secondary) 75%, transparent)); border:1px solid rgba(255,255,255,.18); box-shadow:0 18px 42px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.10); animation:sigilPulse 4.8s ease-in-out infinite; }
.inviteSection .sectionTitle .sectionCopy{ min-width:0; }
.inviteSection .sectionTitle.left .sectionCopy{ text-align:left; }
.detailCard,.timeline div,.registryItem,.gallery figure,.shareCard,.rsvpCard{ position:relative; overflow:hidden; }
.detailCard::after,.timeline div::after,.registryItem::after,.shareCard::after,.rsvpCard::after{ content:""; position:absolute; top:0; left:-30%; width:26%; height:100%; background:linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent); transform:skewX(-18deg); opacity:0; pointer-events:none; }
.detailCard:hover::after,.timeline div:hover::after,.registryItem:hover::after,.shareCard:hover::after,.rsvpCard:hover::after{ animation:shineSweep 1.15s ease; }
.detailGlyph{ width:42px; height:42px; border-radius:14px; display:grid; place-items:center; margin-bottom:8px; font-style:normal; font-size:1rem; color:#fff; background: radial-gradient(circle at 28% 18%, rgba(255,255,255,.18), transparent 28%), linear-gradient(135deg, color-mix(in srgb, var(--event-primary) 74%, #ffffff), color-mix(in srgb, var(--event-secondary) 70%, transparent)); border:1px solid rgba(255,255,255,.14); box-shadow:0 12px 26px rgba(0,0,0,.16); }
.detailDress .detailGlyph{ background: radial-gradient(circle at 28% 18%, rgba(255,255,255,.18), transparent 28%), linear-gradient(135deg, color-mix(in srgb, var(--event-secondary) 75%, #ffffff), color-mix(in srgb, var(--event-primary) 55%, transparent)); }
.countdown div{ animation:countPulse 4.5s ease-in-out infinite; }
.countdown div:nth-child(2){ animation-delay:.25s; }
.countdown div:nth-child(3){ animation-delay:.5s; }
.countdown div:nth-child(4){ animation-delay:.75s; }
.registryCard{ border-radius:34px; padding:26px; background: radial-gradient(circle at top left, rgba(255,255,255,.10), transparent 30%), linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.05)); border:1px solid rgba(255,255,255,.16); box-shadow:0 24px 70px rgba(0,0,0,.18); }
.registryHeader{ display:flex; align-items:center; gap:16px; margin-bottom:18px; }
.registryHeader span{ display:block; text-transform:uppercase; letter-spacing:.18em; font-weight:900; font-size:.72rem; color:var(--event-secondary); }
.registryHeader h2{ margin:6px 0 0; font-size:clamp(2rem, 3.6vw, 3rem); line-height:.98; }
.registrySigil{ width:62px; height:62px; border-radius:20px; display:grid; place-items:center; font-size:1.45rem; color:#fff; background: radial-gradient(circle at 28% 18%, rgba(255,255,255,.18), transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--event-primary) 74%, #ffffff), color-mix(in srgb, var(--event-secondary) 72%, transparent)); border:1px solid rgba(255,255,255,.16); box-shadow:0 16px 36px rgba(0,0,0,.18); }
.registryGrid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px; }
.registryItem{ display:block; text-decoration:none; border-radius:26px; padding:20px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); box-shadow:0 16px 34px rgba(0,0,0,.14); transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.registryItem:hover{ transform:translateY(-4px); box-shadow:0 24px 46px rgba(0,0,0,.18); border-color:rgba(255,255,255,.24); }
.registryItem small{ display:block; text-transform:uppercase; letter-spacing:.16em; color:var(--event-secondary); font-weight:900; font-size:.72rem; margin-bottom:8px; }
.registryItem strong{ display:block; font-size:1.2rem; margin-bottom:6px; color:#fff; }
.registryItem p{ margin:0 0 12px; color:rgba(255,255,255,.74); line-height:1.55; }
.registryItem span{ font-weight:900; color:#fff; }
.rsvpDeadline{ margin:6px 0 14px; color:rgba(255,255,255,.76); }
.ctaLink,.registryItem,.detailCard,.timeline div,.gallery figure{ animation:floatCard 7.5s ease-in-out infinite; }
.ctaLink:nth-child(2n),.registryItem:nth-child(2n),.detailCard:nth-child(2n),.timeline div:nth-child(2n),.gallery figure:nth-child(2n){ animation-delay:.35s; }
.ctaLink:nth-child(3n),.registryItem:nth-child(3n),.detailCard:nth-child(3n),.timeline div:nth-child(3n),.gallery figure:nth-child(3n){ animation-delay:.7s; }
.tpl-xv-gold-royal .sectionSigil,.tpl-xv-gold-royal .registrySigil{ border-radius:18px; }
.tpl-wedding-silver-pearl .sectionSigil,.tpl-wedding-silver-pearl .registrySigil{ border-radius:999px; }
.tpl-baptism-soft-silver .sectionSigil,.tpl-baptism-soft-silver .registrySigil{ border-radius:16px; }
.tpl-baby-shower-champagne .sectionSigil,.tpl-baby-shower-champagne .registrySigil{ border-radius:22px; }
.tpl-graduation-noir-gold .sectionSigil,.tpl-graduation-noir-gold .registrySigil{ border-radius:14px; }
.tpl-wedding-silver-pearl .registryCard{ background: radial-gradient(circle at top left, rgba(255,255,255,.14), transparent 32%), linear-gradient(180deg, rgba(28,35,54,.76), rgba(21,28,45,.68)); }
.tpl-baptism-soft-silver .registryCard{ background: radial-gradient(circle at top left, rgba(255,255,255,.16), transparent 32%), linear-gradient(180deg, rgba(18,28,50,.68), rgba(22,31,48,.56)); }
.tpl-baby-shower-champagne .registryCard{ background: radial-gradient(circle at top left, rgba(255,231,219,.16), transparent 30%), linear-gradient(180deg, rgba(50,34,45,.72), rgba(44,30,40,.62)); }
.tpl-graduation-noir-gold .registryCard{ background: linear-gradient(180deg, rgba(8,13,22,.86), rgba(18,22,36,.76)); }
@media (max-width: 900px){ .registryGrid{ grid-template-columns:1fr; } }
@media (max-width: 720px){ .inviteSection .sectionTitle{ gap:12px; } .inviteSection .sectionTitle .sectionSigil{ width:50px; height:50px; border-radius:16px; font-size:1.1rem; } .registryCard{ padding:20px; border-radius:26px; } .registryHeader{ gap:12px; align-items:flex-start; } .registrySigil{ width:50px; height:50px; border-radius:16px; font-size:1.15rem; } .registryHeader h2{ font-size:clamp(1.6rem, 7vw, 2.2rem); } .registryItem{ border-radius:22px; padding:18px; } }


/* =========================================================
   EventoQR.click V16
   Experience Upgrade inspired by luxury invite flows
   ========================================================= */

.openInviteGate{
  position:fixed;
  inset:0;
  z-index:100000;
  display:grid;
  place-items:center;
  padding:24px;
  background:
    radial-gradient(circle at 22% 10%, color-mix(in srgb, var(--event-primary) 24%, transparent), transparent 28%),
    radial-gradient(circle at 80% 0%, rgba(124,58,237,.26), transparent 30%),
    linear-gradient(180deg, rgba(3,7,18,.96), rgba(12,10,30,.96));
  transition:opacity .65s ease, transform .65s ease, visibility .65s ease;
}
.openInviteGate.is-opened{
  opacity:0;
  transform:scale(1.04);
  visibility:hidden;
  pointer-events:none;
}
.envelopeStage{
  width:min(520px, 100%);
  text-align:center;
  color:#fff;
}
.envelopeButton{
  position:relative;
  width:min(340px, 82vw);
  aspect-ratio:1.42/1;
  border:0;
  background:transparent;
  cursor:pointer;
  filter:drop-shadow(0 34px 80px rgba(0,0,0,.42));
  animation:envelopeFloat 3.5s ease-in-out infinite;
}
.envelopeBody,
.envelopeLid{
  position:absolute;
  inset:0;
  border-radius:28px;
}
.envelopeBody{
  background:
    linear-gradient(135deg, rgba(255,255,255,.16), transparent 28%),
    linear-gradient(135deg, color-mix(in srgb, var(--event-primary) 72%, #fff), color-mix(in srgb, var(--event-secondary) 70%, #7c3aed));
  clip-path:polygon(0 24%, 50% 62%, 100% 24%, 100% 100%, 0 100%);
  border:1px solid rgba(255,255,255,.28);
}
.envelopeLid{
  background:
    linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,.04)),
    linear-gradient(135deg, color-mix(in srgb, var(--event-secondary) 65%, #fff), color-mix(in srgb, var(--event-primary) 64%, #7c3aed));
  clip-path:polygon(0 0, 100% 0, 50% 60%);
  transform-origin:50% 5%;
  transition:transform .5s ease;
}
.envelopeButton:hover .envelopeLid{
  transform:rotateX(22deg) translateY(-8px);
}
.envelopeSeal{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-18%);
  width:72px;
  height:72px;
  border-radius:999px;
  display:grid;
  place-items:center;
  color:#fff;
  font-size:1.6rem;
  background:rgba(12,10,30,.72);
  border:1px solid rgba(255,255,255,.30);
  box-shadow:0 18px 42px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.12);
}
.envelopeStage p{
  margin:24px auto 8px;
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:.78rem;
  font-weight:900;
  color:var(--event-secondary);
}
.envelopeStage strong{
  display:block;
  font-size:clamp(2rem, 7vw, 4.4rem);
  line-height:.95;
  font-family:"Playfair Display", serif;
}
@keyframes envelopeFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-8px)}
}

.scrollCue{
  margin:24px auto 0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  padding:0 14px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.13);
  color:rgba(255,255,255,.78);
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.68rem;
  font-weight:900;
  animation:scrollCuePulse 2.8s ease-in-out infinite;
}
@keyframes scrollCuePulse{
  0%,100%{transform:translateY(0);opacity:.80}
  50%{transform:translateY(4px);opacity:1}
}

.calendarActions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:14px;
}
.calendarActions a{
  min-height:36px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 12px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  color:#fff;
  font-size:.76rem;
  font-weight:900;
}
.calendarActions a:hover{
  background:rgba(255,255,255,.14);
  transform:translateY(-2px);
}

.passSuccess{
  max-width:680px;
  margin:auto;
}
.digitalPass{
  margin:22px auto 0;
  width:min(420px, 100%);
  border-radius:32px;
  padding:22px;
  background:
    radial-gradient(circle at top left, rgba(255,255,255,.16), transparent 32%),
    linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.055));
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 24px 68px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.06);
}
.passHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:16px;
}
.passHead span{
  text-transform:uppercase;
  letter-spacing:.16em;
  color:var(--event-secondary);
  font-weight:900;
  font-size:.72rem;
}
.passHead b{
  color:#fff;
  font-size:.86rem;
  text-align:right;
}
.passQr{
  width:190px;
  height:190px;
  border-radius:28px;
  background:#fff;
  padding:12px;
  margin:0 auto 16px;
  box-shadow:0 18px 42px rgba(0,0,0,.20);
}
.passQr img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}
.passInfo{
  display:grid;
  gap:3px;
  margin-bottom:16px;
}
.passInfo small{
  text-transform:uppercase;
  letter-spacing:.16em;
  color:var(--event-secondary);
  font-weight:900;
  font-size:.70rem;
}
.passInfo strong{
  font-size:1.6rem;
  line-height:1.05;
  color:#fff;
}
.passInfo span,
.passInfo em{
  color:rgba(255,255,255,.76);
  font-style:normal;
}
@media(max-width:720px){
  .envelopeStage strong{
    font-size:clamp(2rem, 12vw, 3.4rem);
  }
  .envelopeButton{
    width:min(300px, 86vw);
  }
  .calendarActions a{
    flex:1 1 auto;
  }
  .passHead{
    flex-direction:column;
    align-items:flex-start;
  }
}


/* =========================================================
   EventoQR.click V17
   Catalogo Pro + Template Demo Mode
   ========================================================= */

.catalogBody{
  min-height:100vh;
  color:#e5edf8;
  background:
    radial-gradient(circle at 12% 0%, rgba(212,175,55,.18), transparent 28%),
    radial-gradient(circle at 84% 0%, rgba(124,58,237,.18), transparent 30%),
    linear-gradient(180deg,#020617,#071024 54%,#020617);
}
.catalogShell{
  width:min(1220px, calc(100% - 28px));
  margin:0 auto;
  padding:28px 0 34px;
}
.catalogHero{
  min-height:520px;
  border-radius:44px;
  padding:38px;
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(280px,.55fr);
  gap:28px;
  align-items:center;
  background:
    radial-gradient(circle at top left, rgba(255,255,255,.14), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 34px 110px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.06);
  overflow:hidden;
  position:relative;
}
.catalogHero::after{
  content:"";
  position:absolute;
  width:420px;
  height:420px;
  border-radius:999px;
  right:-120px;
  top:-120px;
  background:radial-gradient(circle, rgba(255,255,255,.12), transparent 70%);
}
.catalogHeroCopy{
  position:relative;
  z-index:1;
}
.catalogHeroCopy span{
  display:inline-flex;
  min-height:38px;
  align-items:center;
  padding:0 14px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  color:#f7e6ae;
  text-transform:uppercase;
  letter-spacing:.18em;
  font-weight:900;
  font-size:.72rem;
}
.catalogHeroCopy h1{
  font-family:"Playfair Display",serif;
  font-size:clamp(3rem,7vw,6.8rem);
  line-height:.9;
  letter-spacing:-.06em;
  margin:18px 0;
  max-width:850px;
}
.catalogHeroCopy p{
  color:#cbd5e1;
  max-width:720px;
  font-size:1.08rem;
}
.catalogHeroActions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:24px;
}
.catalogHeroCard{
  position:relative;
  z-index:1;
  min-height:300px;
  border-radius:38px;
  padding:30px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  background:
    radial-gradient(circle at top left, rgba(212,175,55,.20), transparent 38%),
    linear-gradient(180deg, rgba(15,23,42,.86), rgba(15,23,42,.62));
  border:1px solid rgba(255,255,255,.15);
  box-shadow:0 26px 80px rgba(0,0,0,.28);
}
.catalogHeroCard b{
  font-size:7rem;
  line-height:.8;
  font-family:"Playfair Display",serif;
  background:linear-gradient(180deg,#fff8df,#d4af37,#8f6a14,#fff0b8);
  color:transparent;
  -webkit-text-fill-color:transparent;
  -webkit-background-clip:text;
  background-clip:text;
}
.catalogHeroCard span{
  color:#fff;
  font-weight:900;
  font-size:1.2rem;
}
.catalogHeroCard p{
  color:#94a3b8;
  margin:8px 0 0;
}
.catalogToolbar{
  margin:22px 0;
  padding:18px;
  border-radius:28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
}
.catalogToolbar strong,
.catalogToolbar span{
  display:block;
}
.catalogToolbar strong{
  color:#fff;
}
.catalogToolbar span{
  color:#94a3b8;
  font-size:.88rem;
}
.catalogFilters{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:flex-end;
}
.catalogFilters button{
  min-height:38px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.07);
  color:#e5edf8;
  font-weight:900;
  cursor:pointer;
}
.catalogFilters button.active{
  background:linear-gradient(135deg,#d4af37,#7c3aed);
  color:#fff;
}
.catalogGrid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px;
}
.catalogCard{
  border-radius:34px;
  overflow:hidden;
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.045));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 28px 80px rgba(0,0,0,.22);
}
.catalogPreview{
  min-height:320px;
  padding:24px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  background:
    radial-gradient(circle at top left, rgba(255,255,255,.16), transparent 32%),
    linear-gradient(135deg, color-mix(in srgb, var(--event-primary, #d4af37) 70%, #111827), color-mix(in srgb, var(--event-secondary, #f7e6ae) 48%, #020617));
}
.catalogCard.theme-gold-royal{--event-primary:#D4AF37;--event-secondary:#F7E6AE}
.catalogCard.theme-silver-luxe{--event-primary:#C2CBD6;--event-secondary:#F7FAFC}
.catalogCard.theme-champagne-rose{--event-primary:#D8B06F;--event-secondary:#FFE7DB}
.catalogCard.theme-pearl-noir{--event-primary:#E1D2A8;--event-secondary:#EDEFF3}
.catalogPreviewTop{
  display:flex;
  justify-content:space-between;
  gap:10px;
}
.catalogPreviewTop span,
.catalogPreviewTop b{
  min-height:34px;
  display:inline-flex;
  align-items:center;
  padding:0 12px;
  border-radius:999px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.14);
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.12em;
}
.catalogPreview h2{
  margin:auto 0 10px;
  font-family:"Playfair Display",serif;
  font-size:clamp(2.4rem,5vw,4.7rem);
  line-height:.9;
  letter-spacing:-.05em;
}
.catalogPreview p{
  margin:0;
  color:rgba(255,255,255,.78);
  font-weight:800;
}
.catalogSwatches{
  display:flex;
  gap:8px;
  margin-top:18px;
}
.catalogSwatches i{
  width:26px;
  height:26px;
  border-radius:999px;
  background:var(--sw);
  border:1px solid rgba(255,255,255,.24);
}
.catalogInfo{
  padding:24px;
}
.catalogInfo h3{
  margin:0 0 8px;
  color:#fff;
  font-size:1.55rem;
}
.catalogInfo p{
  color:#cbd5e1;
  margin:0 0 16px;
}
.catalogFeatureList{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:18px;
}
.catalogFeatureList span{
  min-height:30px;
  display:inline-flex;
  align-items:center;
  padding:0 10px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.10);
  color:#e5edf8;
  font-size:.78rem;
  font-weight:800;
}
.catalogActions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.catalogPitch{
  margin-top:28px;
  border-radius:36px;
  padding:32px;
  text-align:center;
  background:
    radial-gradient(circle at top, rgba(212,175,55,.14), transparent 40%),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.12);
}
.catalogPitch h2{
  font-size:clamp(2rem,4vw,4rem);
  line-height:.96;
  margin:0 0 10px;
}
.catalogPitch p{
  max-width:760px;
  margin:0 auto 20px;
  color:#cbd5e1;
}
.demoMode .openInviteGate::before{
  content:"DEMO";
  position:absolute;
  top:18px;
  right:18px;
  min-height:34px;
  display:inline-flex;
  align-items:center;
  padding:0 12px;
  border-radius:999px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.16);
  color:#fff;
  font-weight:900;
  letter-spacing:.16em;
}
@media(max-width:920px){
  .catalogHero,
  .catalogGrid{
    grid-template-columns:1fr;
  }
  .catalogToolbar{
    align-items:flex-start;
    flex-direction:column;
  }
  .catalogFilters{
    justify-content:flex-start;
  }
}
@media(max-width:620px){
  .catalogShell{
    width:min(100% - 18px, 1220px);
    padding-top:12px;
  }
  .catalogHero{
    min-height:auto;
    padding:24px;
    border-radius:28px;
  }
  .catalogHeroCopy h1{
    font-size:clamp(2.6rem,14vw,4.4rem);
  }
  .catalogHeroCard{
    min-height:220px;
    border-radius:26px;
  }
  .catalogHeroCard b{
    font-size:5rem;
  }
  .catalogPreview{
    min-height:260px;
  }
  .catalogCard{
    border-radius:26px;
  }
}


/* =========================================================
   EventoQR.click V18
   Music Experience
   ========================================================= */

/* Hide old native audio if browser styles leak */
.inviteAudioNative{
  display:none!important;
}
.musicDock{
  position:fixed;
  left:16px;
  bottom:16px;
  z-index:9998;
  width:min(310px, calc(100vw - 34px));
  min-height:66px;
  padding:10px 12px;
  border-radius:999px;
  display:flex;
  align-items:center;
  gap:12px;
  color:#fff;
  background:
    radial-gradient(circle at top left, rgba(255,255,255,.14), transparent 32%),
    linear-gradient(180deg, rgba(15,23,42,.82), rgba(15,23,42,.58));
  border:1px solid rgba(255,255,255,.15);
  box-shadow:0 20px 60px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter:blur(18px);
}
.musicDock.needs-tap{
  animation:musicNudge 1.2s ease-in-out infinite;
}
.musicDock button{
  width:46px;
  height:46px;
  min-width:46px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  color:#fff;
  cursor:pointer;
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle at 28% 18%, rgba(255,255,255,.22), transparent 30%),
    linear-gradient(135deg, color-mix(in srgb, var(--event-primary) 70%, #fff), color-mix(in srgb, var(--event-secondary) 48%, #7c3aed));
  box-shadow:0 12px 26px rgba(0,0,0,.22);
}
.musicIcon{
  font-size:.88rem;
  font-weight:900;
  transform:translateX(1px);
}
.musicDock.playing .musicIcon{
  transform:none;
}
.musicMeta{
  min-width:0;
  flex:1;
}
.musicMeta small,
.musicMeta strong{
  display:block;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.musicMeta small{
  color:var(--event-secondary);
  font-size:.64rem;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-weight:900;
}
.musicMeta strong{
  color:#fff;
  font-size:.9rem;
}
.musicBars{
  display:flex;
  align-items:end;
  gap:3px;
  width:24px;
  height:24px;
}
.musicBars i{
  width:5px;
  height:8px;
  border-radius:999px;
  background:var(--event-secondary);
  opacity:.48;
}
.musicDock.playing .musicBars i{
  animation:musicBars 1s ease-in-out infinite;
  opacity:1;
}
.musicDock.playing .musicBars i:nth-child(2){animation-delay:.16s}
.musicDock.playing .musicBars i:nth-child(3){animation-delay:.32s}
@keyframes musicBars{
  0%,100%{height:8px}
  50%{height:22px}
}
@keyframes musicNudge{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-4px)}
}
.fieldHint{
  display:block;
  margin-top:6px;
  color:#94a3b8;
  font-size:.76rem;
  line-height:1.4;
}
@media(max-width:768px){
  .musicDock{
    left:50%;
    transform:translateX(-50%);
    bottom:76px;
    min-height:56px;
    width:min(310px, calc(100vw - 24px));
    padding:8px 10px;
  }
  .musicDock button{
    width:40px;
    height:40px;
    min-width:40px;
  }
  .musicMeta strong{
    font-size:.82rem;
  }
  .musicMeta small{
    font-size:.58rem;
  }
  .musicDock.needs-tap{
    animation:musicNudgeMobile 1.2s ease-in-out infinite;
  }
  @keyframes musicNudgeMobile{
    0%,100%{transform:translateX(-50%) translateY(0)}
    50%{transform:translateX(-50%) translateY(-4px)}
  }
}


/* =========================================================
   EventoQR.click V19
   Admin Music Selector
   ========================================================= */

.musicAdminBox{
  display:grid;
  gap:12px;
  padding:14px;
  border-radius:22px;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.09);
}
.musicUrlRow{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px;
  align-items:end;
}
.musicUrlRow label{
  margin:0;
}
#previewMusicBtn{
  min-height:46px;
  padding:0 16px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(135deg, rgba(212,175,55,.30), rgba(124,58,237,.22));
  color:#fff;
  font-weight:900;
  cursor:pointer;
}
#previewMusicBtn:hover{
  transform:translateY(-2px);
}
@media(max-width:720px){
  .musicUrlRow{
    grid-template-columns:1fr;
  }
  #previewMusicBtn{
    width:100%;
  }
}


/* =========================================================
   EventoQR.click V20
   Landing Comercial Premium
   ========================================================= */

.salesBody{
  min-height:100vh;
  color:#e5edf8;
  background:
    radial-gradient(circle at 12% 0%, rgba(212,175,55,.20), transparent 28%),
    radial-gradient(circle at 84% 0%, rgba(124,58,237,.20), transparent 30%),
    radial-gradient(circle at 50% 18%, rgba(14,165,233,.10), transparent 32%),
    linear-gradient(180deg,#020617,#071024 52%,#020617);
}
.salesHeader{
  width:min(1240px, calc(100% - 28px));
  margin:16px auto 0;
  min-height:72px;
  padding:12px 14px;
  border-radius:28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  position:sticky;
  top:12px;
  z-index:90;
  background:rgba(2,6,23,.64);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 22px 70px rgba(0,0,0,.22);
  backdrop-filter:blur(20px);
}
.salesBrand{
  color:#fff;
}
.salesHeader nav{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.salesHeader nav a{
  min-height:42px;
  display:inline-flex;
  align-items:center;
  padding:0 14px;
  border-radius:999px;
  color:#cbd5e1;
  font-weight:900;
  font-size:.88rem;
}
.salesHeader nav a:hover{
  background:rgba(255,255,255,.08);
  color:#fff;
}
.salesNavCta{
  color:#fff!important;
  background:linear-gradient(135deg,#d4af37,#7c3aed)!important;
}
.salesMain{
  width:min(1240px, calc(100% - 28px));
  margin:0 auto;
}
.salesHero{
  min-height:calc(100vh - 110px);
  padding:62px 0 42px;
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(360px,.65fr);
  gap:42px;
  align-items:center;
}
.salesKicker,
.salesTitle span,
.demoStrip span,
.finalCta span{
  display:inline-flex;
  min-height:38px;
  align-items:center;
  padding:0 14px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  color:#f7e6ae;
  text-transform:uppercase;
  letter-spacing:.18em;
  font-weight:900;
  font-size:.72rem;
}
.salesHero h1{
  margin:18px 0;
  max-width:870px;
  font-family:"Playfair Display",serif;
  font-size:clamp(3.2rem,8vw,7.6rem);
  line-height:.88;
  letter-spacing:-.07em;
  color:#fff;
}
.salesHero p{
  color:#cbd5e1;
  max-width:760px;
  font-size:1.08rem;
}
.salesHeroActions,
.demoActions,
.finalCta div{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:24px;
}
.salesTrust{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:26px;
}
.salesTrust span{
  min-height:44px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:0 14px;
  border-radius:999px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.10);
  color:#cbd5e1;
}
.salesTrust b{
  color:#fff;
}
.salesDevice{
  position:relative;
  min-height:620px;
  width:min(500px,100%);
  margin-inline:auto;
  display:grid;
  place-items:center;
  overflow:visible;
}
.phoneMock{
  width:min(390px, 100%);
  min-height:620px;
  border-radius:54px;
  padding:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.05));
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 40px 130px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.10);
}
.phoneTop{
  width:112px;
  height:26px;
  border-radius:999px;
  margin:0 auto 16px;
  background:rgba(2,6,23,.56);
}
.phoneCard{
  min-height:540px;
  border-radius:42px;
  padding:32px 24px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  text-align:center;
  background:
    radial-gradient(circle at top left, rgba(212,175,55,.18), transparent 34%),
    linear-gradient(180deg, rgba(37,42,92,.84), rgba(25,30,70,.70));
  border:1px solid rgba(255,255,255,.12);
}
.phoneCard span{
  align-self:center;
  min-height:30px;
  display:inline-flex;
  align-items:center;
  padding:0 12px;
  border-radius:999px;
  background:linear-gradient(135deg,#d4af37,#7c3aed);
  color:#fff;
  font-size:.66rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:900;
}
.phoneCard h2,
.phoneCard h3{
  margin:14px 0 0;
  font-family:"Playfair Display",serif;
  font-size:3rem;
  line-height:.9;
}
.phoneCard h3{
  font-family:Inter,sans-serif;
  font-size:3.4rem;
  color:#ff8df4;
}
.phoneCard p{
  font-weight:900;
  color:#fff;
}
.phonePass{
  margin:16px 0;
  padding:16px;
  border-radius:22px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  color:#fff;
  font-weight:900;
}
.phoneCountdown{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
}
.phoneCountdown i{
  min-height:58px;
  border-radius:16px;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.10);
  color:#fff;
  font-style:normal;
  font-weight:900;
}
.salesFloatCard{
  position:absolute;
  z-index:3;
  min-width:190px;
  min-height:74px;
  max-width:230px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  border-radius:22px;
  background:rgba(15,23,42,.88);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 24px 70px rgba(0,0,0,.28);
  backdrop-filter:blur(18px);
}
.salesFloatCard b{
  width:44px;
  height:44px;
  border-radius:16px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,#d4af37,#7c3aed);
}
.salesFloatCard span{
  color:#fff;
  font-weight:900;
}
.salesFloatCard.one{
  left:-26px;
  top:22%;
}
.salesFloatCard.two{
  right:-26px;
  bottom:18%;
}
.salesSection{
  padding:72px 0;
}
.salesTitle{
  text-align:center;
  max-width:850px;
  margin:0 auto 28px;
}
.salesTitle h2,
.demoStrip h2,
.finalCta h2{
  margin:16px 0 8px;
  font-family:"Playfair Display",serif;
  font-size:clamp(2.4rem,5vw,5.4rem);
  line-height:.92;
  letter-spacing:-.06em;
  color:#fff;
}
.salesTitle p,
.demoStrip p,
.finalCta p{
  color:#cbd5e1;
}
.valueGrid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}
.valueGrid article,
.priceCard,
.compareBad,
.compareGood{
  border-radius:34px;
  padding:26px;
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.045));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 24px 80px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.05);
}
.valueGrid i{
  width:56px;
  height:56px;
  border-radius:18px;
  display:grid;
  place-items:center;
  color:#fff;
  font-style:normal;
  font-weight:900;
  background:linear-gradient(135deg,#d4af37,#7c3aed);
}
.valueGrid h3,
.priceCard h3,
.compareGrid h3{
  color:#fff;
  font-size:1.5rem;
  margin:18px 0 8px;
}
.valueGrid p,
.priceCard p,
.compareGrid p{
  color:#cbd5e1;
}
.darkPanel{
  margin:12px 0;
  padding:54px 28px;
  border-radius:46px;
  background:
    radial-gradient(circle at top left, rgba(212,175,55,.12), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.035));
  border:1px solid rgba(255,255,255,.12);
}
.featureMatrix{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
}
.featureMatrix div{
  min-height:132px;
  border-radius:26px;
  padding:18px;
  background:rgba(255,255,255,.065);
  border:1px solid rgba(255,255,255,.10);
}
.featureMatrix b,
.featureMatrix span{
  display:block;
}
.featureMatrix b{
  color:#fff;
}
.featureMatrix span{
  margin-top:8px;
  color:#94a3b8;
}
.pricingGrid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
  align-items:stretch;
}
.priceCard{
  position:relative;
}
.priceCard small{
  color:#f7e6ae;
  text-transform:uppercase;
  letter-spacing:.16em;
  font-weight:900;
}
.priceCard h3{
  font-size:1.55rem;
  line-height:1.1;
}
.priceCard ul,
.compareGrid ul{
  padding-left:18px;
  color:#cbd5e1;
}
.priceCard li,
.compareGrid li{
  margin:8px 0;
}
.priceCard a{
  margin-top:10px;
  min-height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 14px;
  border-radius:999px;
  background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.12);
  color:#fff;
  font-weight:900;
}
.priceCard.featured{
  transform:translateY(-10px);
  background:
    radial-gradient(circle at top left, rgba(212,175,55,.18), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
  border-color:rgba(212,175,55,.28);
}
.priceCard.featured em{
  position:absolute;
  top:16px;
  right:16px;
  min-height:30px;
  display:inline-flex;
  align-items:center;
  padding:0 10px;
  border-radius:999px;
  background:linear-gradient(135deg,#d4af37,#7c3aed);
  color:#fff;
  font-size:.66rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-style:normal;
  font-weight:900;
}
.priceCard.platinum{
  border-color:rgba(255,255,255,.18);
}
.demoStrip{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  padding:34px;
  border-radius:42px;
  background:
    radial-gradient(circle at top right, rgba(124,58,237,.18), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.12);
}
.demoStrip h2{
  font-size:clamp(2.2rem,4vw,4.2rem);
}
.demoActions{
  justify-content:flex-end;
  min-width:min(420px,100%);
}
.compareGrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}
.compareBad{
  border-color:rgba(248,113,113,.18);
}
.compareGood{
  border-color:rgba(34,197,94,.22);
  background:
    radial-gradient(circle at top left, rgba(34,197,94,.13), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.045));
}
.finalCta{
  margin:42px 0 28px;
  padding:48px 28px;
  border-radius:48px;
  text-align:center;
  background:
    radial-gradient(circle at top, rgba(212,175,55,.18), transparent 38%),
    radial-gradient(circle at bottom right, rgba(124,58,237,.18), transparent 32%),
    linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.045));
  border:1px solid rgba(255,255,255,.14);
}
.finalCta div{
  justify-content:center;
}
.salesWhatsapp{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:120;
  min-height:52px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 18px;
  border-radius:999px;
  color:#fff;
  font-weight:900;
  background:linear-gradient(135deg,#22c55e,#0ea5e9);
  box-shadow:0 18px 46px rgba(34,197,94,.28);
}
.salesFooter{
  width:min(1240px, calc(100% - 28px));
  margin:0 auto 26px;
  color:#94a3b8;
  text-align:center;
  font-weight:800;
}
@media(max-width:1100px){
  .salesHero,
  .valueGrid,
  .compareGrid{
    grid-template-columns:1fr;
  }
  .salesDevice{
    min-height:560px;
  }
  .featureMatrix,
  .pricingGrid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .demoStrip{
    flex-direction:column;
    align-items:flex-start;
  }
  .demoActions{
    justify-content:flex-start;
  }
}
@media(max-width:760px){
  .salesHeader{
    align-items:flex-start;
    flex-direction:column;
    border-radius:24px;
  }
  .salesHeader nav{
    width:100%;
    justify-content:flex-start;
    overflow:auto;
    padding-bottom:4px;
  }
  .salesHero{
    padding-top:42px;
  }
  .salesHero h1{
    font-size:clamp(3rem,15vw,4.8rem);
  }
  .salesDevice{
    min-height:auto;
  }
  .phoneMock{
    min-height:540px;
  }
  .phoneCard{
    min-height:460px;
  }
  .salesFloatCard{
    position:static;
    margin-top:12px;
    width:100%;
    max-width:none;
  }
  .featureMatrix,
  .pricingGrid{
    grid-template-columns:1fr;
  }
  .priceCard.featured{
    transform:none;
  }
  .salesSection{
    padding:52px 0;
  }
  .darkPanel,
  .demoStrip,
  .finalCta{
    border-radius:30px;
    padding:26px 18px;
  }
  .salesWhatsapp{
    left:16px;
    right:16px;
    bottom:12px;
  }
  .salesFooter{
    padding-bottom:70px;
  }
}


/* =========================================================
   EventoQR.click V21
   Clients, Roles & Permissions UI
   ========================================================= */

.roleBadge{
  min-height:38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 12px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  color:#e2e8f0;
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-weight:900;
}
.roleBadge.role-super-admin,
.roleBadge.role-admin{
  background:linear-gradient(135deg, rgba(212,175,55,.34), rgba(124,58,237,.22));
  border-color:rgba(212,175,55,.28);
  color:#fff;
}
.clientAccessPanel{
  margin-top:18px;
}
.clientHead > div:first-child span{
  display:block;
  margin-top:4px;
  color:#94a3b8;
  font-size:.82rem;
  font-weight:800;
}
.clientHead button,
.accessCard button,
.clientItem button,
.memberItem button{
  min-height:38px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.08);
  color:#e2e8f0;
  font-weight:900;
  cursor:pointer;
  padding:0 12px;
}
.accessGrid,
.accessLists{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  margin-top:14px;
}
.accessCard{
  border-radius:28px;
  padding:18px;
  background:
    radial-gradient(circle at top left, rgba(255,255,255,.09), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.11);
  box-shadow:0 20px 60px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.04);
}
.accessCard h3{
  margin:0 0 6px;
  color:#fff;
}
.accessCard p{
  margin:0 0 12px;
  color:#94a3b8;
  font-size:.86rem;
}
.clientList,
.memberList{
  display:grid;
  gap:10px;
}
.clientItem,
.memberItem{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:12px;
  align-items:center;
  padding:14px;
  border-radius:22px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.09);
}
.clientItem.active{
  border-color:rgba(212,175,55,.32);
  background:
    radial-gradient(circle at top left, rgba(212,175,55,.12), transparent 34%),
    rgba(255,255,255,.07);
}
.clientItem strong,
.clientItem span,
.clientItem small,
.memberItem strong,
.memberItem span,
.memberItem small{
  display:block;
}
.clientItem strong,
.memberItem strong{
  color:#fff;
}
.clientItem span,
.memberItem span{
  color:#cbd5e1;
  font-size:.84rem;
}
.clientItem small,
.memberItem small{
  color:#94a3b8;
  font-size:.75rem;
  margin-top:2px;
}
.memberItem button{
  color:#fecaca;
  border-color:rgba(248,113,113,.18);
}
@media(max-width:900px){
  .accessGrid,
  .accessLists{
    grid-template-columns:1fr;
  }
  .clientItem,
  .memberItem{
    grid-template-columns:1fr;
  }
  .clientItem button,
  .memberItem button{
    width:max-content;
  }
}


/* =========================================================
   EventoQR.click V21.1
   Demo visual polish / clean template backgrounds
   ========================================================= */

/* Demo pages should show the template personality, not a placeholder photo rectangle. */
.demoMode .inviteShell{
  width:min(1080px, calc(100% - 42px));
  margin:28px auto 96px;
  border-radius:54px;
  overflow:hidden;
  background:
    radial-gradient(circle at 16% 0%, color-mix(in srgb, var(--event-primary) 14%, transparent), transparent 34%),
    radial-gradient(circle at 90% 8%, rgba(255,255,255,.08), transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.035));
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 42px 130px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.08);
}
.demoMode .inviteHero{
  min-height:auto;
  padding:62px 26px 56px;
  background-image:
    radial-gradient(circle at 24% 0%, color-mix(in srgb, var(--event-primary) 18%, transparent), transparent 34%),
    radial-gradient(circle at 80% 10%, color-mix(in srgb, var(--event-secondary) 10%, transparent), transparent 28%),
    linear-gradient(135deg, rgba(255,255,255,.035), transparent 54%);
}
.demoMode .inviteHero.hasHeroImage{
  background-image:
    radial-gradient(circle at 24% 0%, color-mix(in srgb, var(--event-primary) 18%, transparent), transparent 34%),
    radial-gradient(circle at 80% 10%, color-mix(in srgb, var(--event-secondary) 10%, transparent), transparent 28%),
    linear-gradient(135deg, rgba(255,255,255,.035), transparent 54%) !important;
}
.demoMode .premiumHeroCard{
  max-width:860px;
  margin:auto;
}
.demoMode.tpl-baby-shower-champagne .inviteHero{
  background-image:
    radial-gradient(circle at 18% 0%, rgba(255,231,219,.18), transparent 32%),
    radial-gradient(circle at 82% 8%, rgba(216,176,111,.12), transparent 30%),
    linear-gradient(135deg, rgba(255,255,255,.04), transparent 58%);
}
.demoMode.tpl-baby-shower-champagne .premiumHeroCard{
  background:
    radial-gradient(circle at top left, rgba(255,231,219,.18), transparent 30%),
    radial-gradient(circle at bottom right, rgba(216,176,111,.14), transparent 28%),
    linear-gradient(180deg, rgba(45,30,44,.82), rgba(48,33,49,.68));
}
.demoMode.tpl-baby-shower-champagne .inviteCard h1{
  font-size:clamp(3.4rem, 7vw, 6rem);
}
.demoMode.tpl-baby-shower-champagne .inviteCard h2{
  font-size:clamp(3.1rem, 6.6vw, 5.4rem);
}

@media(max-width:768px){
  .demoMode .inviteShell{
    width:min(100% - 18px, 1080px);
    margin:10px auto 104px;
    border-radius:30px;
  }
  .demoMode .inviteHero{
    padding:34px 14px 32px;
  }
  .demoMode.tpl-baby-shower-champagne .inviteCard h1{
    font-size:clamp(3rem, 15vw, 4.5rem);
  }
}


/* V24.3.2 text clipping fix for premium hero headings */
.titleStack,
.inviteCard h1,
.inviteCard h2,
.inviteCard h3,
.subtitle,
.heroSoftNote,
.achievementLine,
.coupleNames{
  position:relative;
  z-index:2;
}
.tpl-baby-shower-champagne .premiumHeroCard,
.tpl-baptism-soft-silver .premiumHeroCard,
.tpl-xv-gold-royal .premiumHeroCard,
.tpl-wedding-silver-pearl .premiumHeroCard,
.tpl-graduation-noir-gold .premiumHeroCard{
  overflow:visible;
}
.tpl-baby-shower-champagne .inviteCard h1,
.tpl-baby-shower-champagne .inviteCard h2{
  line-height:1.06;
  padding-bottom:.12em;
  margin-bottom:.02em;
}
.tpl-baby-shower-champagne .subtitle,
.tpl-baby-shower-champagne .heroSoftNote{
  position:relative;
  top:-2px;
}
@media (max-width: 720px){
  .tpl-baby-shower-champagne .inviteCard h1,
  .tpl-baby-shower-champagne .inviteCard h2{
    line-height:1.08;
    padding-bottom:.14em;
  }
}


/* =========================================================
   EventoQR.click V24.3.2
   Floating Music Button Always Visible
   ========================================================= */

.musicDock{
  position:fixed!important;
  left:18px!important;
  top:50%!important;
  bottom:auto!important;
  transform:translateY(-50%)!important;
  z-index:10050!important;
  width:68px!important;
  min-height:68px!important;
  height:68px!important;
  padding:7px!important;
  border-radius:999px!important;
  overflow:visible!important;
  justify-content:flex-start!important;
  gap:10px!important;
  transition:width .24s ease, box-shadow .24s ease, background .24s ease, transform .24s ease!important;
  background:
    radial-gradient(circle at top left, rgba(255,255,255,.18), transparent 32%),
    linear-gradient(180deg, rgba(15,23,42,.92), rgba(15,23,42,.72))!important;
  border:1px solid rgba(255,255,255,.20)!important;
  box-shadow:0 22px 68px rgba(0,0,0,.34), 0 0 0 6px rgba(255,255,255,.045), inset 0 1px 0 rgba(255,255,255,.08)!important;
  backdrop-filter:blur(20px)!important;
}
.musicDock:hover,
.musicDock:focus-within,
.musicDock.playing{
  width:min(318px, calc(100vw - 36px))!important;
}
.musicDock button{
  width:54px!important;
  height:54px!important;
  min-width:54px!important;
  position:relative!important;
  z-index:2!important;
  box-shadow:0 16px 34px rgba(0,0,0,.30), 0 0 0 4px color-mix(in srgb, var(--event-primary) 18%, transparent)!important;
}
.musicDock.playing button::after{
  content:"";
  position:absolute;
  inset:-7px;
  border-radius:999px;
  border:1px solid color-mix(in srgb, var(--event-primary) 55%, transparent);
  animation:musicPulseRing 1.55s ease-in-out infinite;
  pointer-events:none;
}
.musicIcon{
  font-size:.92rem!important;
  line-height:1!important;
}
.musicMeta{
  opacity:0;
  transform:translateX(-8px);
  pointer-events:none;
  max-width:0;
  transition:opacity .2s ease, transform .2s ease, max-width .24s ease;
}
.musicDock:hover .musicMeta,
.musicDock:focus-within .musicMeta,
.musicDock.playing .musicMeta{
  opacity:1;
  transform:translateX(0);
  pointer-events:auto;
  max-width:200px;
}
.musicBars{
  opacity:0;
  transform:scale(.85);
  transition:opacity .2s ease, transform .2s ease;
}
.musicDock.playing .musicBars,
.musicDock:hover .musicBars,
.musicDock:focus-within .musicBars{
  opacity:1;
  transform:scale(1);
}
.musicDock::before{
  content:"Música";
  position:absolute;
  left:50%;
  top:-30px;
  transform:translateX(-50%);
  min-height:22px;
  display:inline-flex;
  align-items:center;
  padding:0 8px;
  border-radius:999px;
  background:rgba(2,6,23,.78);
  border:1px solid rgba(255,255,255,.12);
  color:#fff;
  font-size:.58rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-weight:900;
  white-space:nowrap;
}
.musicDock.playing::before{
  content:"Pausar música";
}
@keyframes musicPulseRing{
  0%,100%{transform:scale(.96);opacity:.42}
  50%{transform:scale(1.12);opacity:.05}
}
@media(max-width:768px){
  .musicDock{
    left:12px!important;
    top:50%!important;
    bottom:auto!important;
    transform:translateY(-50%)!important;
    width:62px!important;
    height:62px!important;
    min-height:62px!important;
    padding:6px!important;
  }
  .musicDock button{
    width:50px!important;
    height:50px!important;
    min-width:50px!important;
  }
  .musicDock:hover,
  .musicDock:focus-within,
  .musicDock.playing{
    width:min(292px, calc(100vw - 24px))!important;
  }
  .musicDock.needs-tap{
    animation:musicFloatNudgeMobile 1.2s ease-in-out infinite!important;
  }
  @keyframes musicFloatNudgeMobile{
    0%,100%{transform:translateY(-50%) translateX(0)}
    50%{transform:translateY(-50%) translateX(5px)}
  }
}


/* =========================================================
   EventoQR.click V24.3.2
   Template-aware hero typography auto-fit
   ========================================================= */

.tpl-xv-gold-royal{
  --hero-h1-max:7.6rem;
  --hero-h1-fluid:8.8vw;
  --hero-h1-lh:.94;
  --hero-h2-max:5.8rem;
  --hero-h2-fluid:7.2vw;
  --hero-h2-lh:.96;
}
.tpl-wedding-silver-pearl{
  --hero-h1-max:6.8rem;
  --hero-h1-fluid:8vw;
  --hero-h1-lh:.98;
  --hero-h2-max:4.6rem;
  --hero-h2-fluid:6.2vw;
  --hero-h2-lh:.98;
  --hero-h3-max:3.15rem;
}
.tpl-baptism-soft-silver{
  --hero-h1-max:6.35rem;
  --hero-h1-fluid:7.8vw;
  --hero-h1-lh:1;
  --hero-h2-max:4.9rem;
  --hero-h2-fluid:6.5vw;
  --hero-h2-lh:1;
}
.tpl-baby-shower-champagne{
  --hero-h1-max:6.25rem;
  --hero-h1-fluid:7.7vw;
  --hero-h1-lh:1.03;
  --hero-h2-max:5.2rem;
  --hero-h2-fluid:6.8vw;
  --hero-h2-lh:1.02;
}
.tpl-graduation-noir-gold{
  --hero-h1-max:6.9rem;
  --hero-h1-fluid:8.1vw;
  --hero-h1-lh:.96;
  --hero-h2-max:5.3rem;
  --hero-h2-fluid:6.7vw;
  --hero-h2-lh:.98;
}

.inviteCard h1.fit-md{font-size:clamp(calc(var(--hero-h1-min) * .95), calc(var(--hero-h1-fluid) * .92), calc(var(--hero-h1-max) * .92));}
.inviteCard h1.fit-lg{font-size:clamp(calc(var(--hero-h1-min) * .88), calc(var(--hero-h1-fluid) * .86), calc(var(--hero-h1-max) * .84)); line-height:calc(var(--hero-h1-lh) + .04);}
.inviteCard h1.fit-xl{font-size:clamp(calc(var(--hero-h1-min) * .8), calc(var(--hero-h1-fluid) * .78), calc(var(--hero-h1-max) * .76)); line-height:calc(var(--hero-h1-lh) + .07);}
.inviteCard h2.fit-md{font-size:clamp(calc(var(--hero-h2-min) * .94), calc(var(--hero-h2-fluid) * .92), calc(var(--hero-h2-max) * .92));}
.inviteCard h2.fit-lg{font-size:clamp(calc(var(--hero-h2-min) * .88), calc(var(--hero-h2-fluid) * .86), calc(var(--hero-h2-max) * .84)); line-height:calc(var(--hero-h2-lh) + .04);}
.inviteCard h2.fit-xl{font-size:clamp(calc(var(--hero-h2-min) * .8), calc(var(--hero-h2-fluid) * .78), calc(var(--hero-h2-max) * .76)); line-height:calc(var(--hero-h2-lh) + .06);}
.inviteCard h3.fit-md{font-size:clamp(calc(var(--hero-h3-min) * .94), calc(var(--hero-h3-fluid) * .92), calc(var(--hero-h3-max) * .92));}
.inviteCard h3.fit-lg{font-size:clamp(calc(var(--hero-h3-min) * .88), calc(var(--hero-h3-fluid) * .86), calc(var(--hero-h3-max) * .84));}
.inviteCard h3.fit-xl{font-size:clamp(calc(var(--hero-h3-min) * .82), calc(var(--hero-h3-fluid) * .8), calc(var(--hero-h3-max) * .78));}

@media (max-width: 980px){
  .tpl-xv-gold-royal,
  .tpl-wedding-silver-pearl,
  .tpl-baptism-soft-silver,
  .tpl-baby-shower-champagne,
  .tpl-graduation-noir-gold{
    --hero-h1-max:min(5.8rem, var(--hero-h1-max));
    --hero-h2-max:min(4.9rem, var(--hero-h2-max));
    --hero-h3-max:min(3rem, var(--hero-h3-max));
  }
}
@media (max-width: 720px){
  .invitePage{
    --hero-h1-min:2.6rem;
    --hero-h1-fluid:12vw;
    --hero-h2-min:2.3rem;
    --hero-h2-fluid:10vw;
    --hero-h3-min:1.45rem;
    --hero-h3-fluid:6.2vw;
  }
  .tpl-baby-shower-champagne{
    --hero-h1-max:5rem;
    --hero-h2-max:4.35rem;
  }
  .tpl-wedding-silver-pearl{
    --hero-h1-max:5.1rem;
    --hero-h2-max:3.9rem;
    --hero-h3-max:2.7rem;
  }
  .tpl-baptism-soft-silver{
    --hero-h1-max:4.95rem;
    --hero-h2-max:4rem;
  }
  .tpl-graduation-noir-gold{
    --hero-h1-max:5.25rem;
    --hero-h2-max:4.2rem;
  }
  .tpl-xv-gold-royal{
    --hero-h1-max:5.45rem;
    --hero-h2-max:4.65rem;
  }
}


/* =========================================================
   EventoQR.click V24.3.2
   Music button fixed to corner
   ========================================================= */
.musicDock{
  left:18px!important;
  right:auto!important;
  top:auto!important;
  bottom:18px!important;
  transform:none!important;
}
.musicDock:hover,
.musicDock:focus-within,
.musicDock.playing{
  width:min(318px, calc(100vw - 36px))!important;
  transform:none!important;
}
.musicDock.needs-tap{
  transform:none!important;
}
@media(max-width:768px){
  .musicDock{
    left:12px!important;
    right:auto!important;
    top:auto!important;
    bottom:12px!important;
    transform:none!important;
  }
  .musicDock:hover,
  .musicDock:focus-within,
  .musicDock.playing{
    width:min(292px, calc(100vw - 24px))!important;
    transform:none!important;
  }
  .musicDock.needs-tap{
    animation:musicCornerPulseMobile 1.2s ease-in-out infinite!important;
  }
  @keyframes musicCornerPulseMobile{
    0%,100%{transform:translateY(0)}
    50%{transform:translateY(-4px)}
  }
}


/* =========================================================
   EventoQR.click V24.3.2
   Music control moved outside inviteShell, fixed to viewport
   ========================================================= */

.musicDock{
  position:fixed!important;
  left:18px!important;
  bottom:18px!important;
  top:auto!important;
  right:auto!important;
  transform:none!important;
  z-index:11000!important;
  will-change:width!important;
}
.musicDock,
.musicDock *{
  pointer-events:auto!important;
}
@media(max-width:768px){
  .musicDock{
    left:12px!important;
    bottom:12px!important;
    top:auto!important;
    right:auto!important;
    transform:none!important;
    z-index:11000!important;
  }
}


/* =========================================================
   EventoQR.click V24.3.2
   Music button integrated into floating action menu
   ========================================================= */

.musicDock{
  display:none!important;
}
.inviteStaticActions .musicMenuBtn{
  border-color:rgba(255,255,255,.18);
}
.inviteStaticActions .musicMenuBtn .musicIcon{
  color:var(--event-secondary)!important;
}
.inviteStaticActions .musicMenuBtn.playing{
  border-color:color-mix(in srgb, var(--event-primary) 75%, #ffffff)!important;
  background:
    radial-gradient(circle at 30% 18%, rgba(255,255,255,.24), transparent 30%),
    linear-gradient(135deg, color-mix(in srgb, var(--event-primary) 44%, rgba(255,255,255,.08)), rgba(124,58,237,.30))!important;
  box-shadow:
    0 18px 42px rgba(0,0,0,.25),
    0 0 30px color-mix(in srgb, var(--event-primary) 38%, transparent)!important;
}
.inviteStaticActions .musicMenuBtn.playing::after{
  opacity:.45!important;
  animation:actionShine 1.65s linear infinite!important;
}
.inviteStaticActions .musicMenuBtn.playing .musicIcon{
  color:#fff!important;
  animation:menuMusicPulse 1.3s ease-in-out infinite;
}
.inviteStaticActions .musicMenuBtn.needs-tap{
  animation:menuMusicNeedTap 1.05s ease-in-out infinite!important;
}
@keyframes menuMusicPulse{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.12)}
}
@keyframes menuMusicNeedTap{
  0%,100%{transform:translateX(0)}
  50%{transform:translateX(-4px)}
}

/* Mobile menu has 7 buttons when music exists */
@media (max-width: 768px){
  .inviteStaticActions{
    grid-template-columns:repeat(7, minmax(38px, 1fr)) !important;
    gap:4px !important;
    max-width:calc(100vw - 12px) !important;
    padding:6px !important;
  }
  .inviteStaticActions a,
  .inviteStaticActions button{
    width:38px !important;
    min-width:38px !important;
    height:38px !important;
    min-height:38px !important;
  }
  .inviteStaticActions i{
    font-size:.86rem !important;
  }
}
@media (max-width: 390px){
  .inviteStaticActions{
    grid-template-columns:repeat(7, 35px) !important;
    gap:3px !important;
    padding:5px !important;
  }
  .inviteStaticActions a,
  .inviteStaticActions button{
    width:35px !important;
    min-width:35px !important;
    height:35px !important;
    min-height:35px !important;
  }
  .inviteStaticActions i{
    font-size:.78rem !important;
  }
}


/* =========================================================
   EventoQR.click V24.3.2
   Smart Empty Fields
   ========================================================= */

.detailGrid.cards-1{
  grid-template-columns:minmax(0, 460px) !important;
  justify-content:center;
}
.detailGrid.cards-2{
  grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  max-width:820px;
  margin:0 auto;
}
.timeline div:has(time):has(p){
  grid-template-columns:120px 1fr;
}
.timeline div:not(:has(time)){
  grid-template-columns:1fr;
}
.timeline div:not(:has(time)) p{
  grid-column:1;
}
.heroInfoBar:empty,
.detailGrid:empty,
.gallery:empty,
.linkGrid:empty{
  display:none!important;
}
@media(max-width:900px){
  .detailGrid.cards-2{
    grid-template-columns:1fr !important;
    max-width:560px;
  }
}


/* =========================================================
   EventoQR.click V24.3.2
   Developer Lead CTA from public invitations
   ========================================================= */

.footerDeveloperLink{
  color:inherit;
  text-decoration:none;
}
.footerDeveloperLink:hover{
  color:#fff;
  text-decoration:underline;
  text-underline-offset:4px;
}

.developerLeadCta{
  position:fixed;
  left:18px;
  bottom:18px;
  z-index:10020;
  min-height:58px;
  max-width:min(330px, calc(100vw - 36px));
  display:flex;
  align-items:center;
  gap:12px;
  padding:8px 16px 8px 8px;
  border-radius:999px;
  color:#fff;
  text-decoration:none;
  background:
    radial-gradient(circle at top left, rgba(255,255,255,.18), transparent 32%),
    linear-gradient(135deg, rgba(15,23,42,.92), rgba(15,23,42,.70));
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 22px 68px rgba(0,0,0,.34), 0 0 0 6px rgba(255,255,255,.045), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(20px);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.developerLeadCta:hover{
  transform:translateY(-3px);
  border-color:color-mix(in srgb, var(--event-primary) 72%, #ffffff);
  box-shadow:0 28px 80px rgba(0,0,0,.40), 0 0 34px color-mix(in srgb, var(--event-primary) 32%, transparent);
}
.developerLeadCta i{
  width:44px;
  height:44px;
  min-width:44px;
  border-radius:999px;
  display:grid;
  place-items:center;
  font-style:normal;
  font-weight:900;
  background:
    radial-gradient(circle at 30% 18%, rgba(255,255,255,.24), transparent 30%),
    linear-gradient(135deg, color-mix(in srgb, var(--event-primary) 78%, #fff), rgba(124,58,237,.78));
  box-shadow:0 14px 34px rgba(0,0,0,.26);
  animation:developerLeadPulse 2.4s ease-in-out infinite;
}
.developerLeadCta span{
  display:grid;
  line-height:1.05;
}
.developerLeadCta b{
  font-size:.88rem;
  letter-spacing:-.01em;
  white-space:nowrap;
}
.developerLeadCta small{
  margin-top:3px;
  color:var(--event-secondary);
  text-transform:uppercase;
  letter-spacing:.13em;
  font-weight:900;
  font-size:.62rem;
}
@keyframes developerLeadPulse{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.08)}
}

/* Keep CTA separated from the floating menu */
@media (min-width: 769px){
  .developerLeadCta{
    bottom:18px;
    left:18px;
  }
}
@media (max-width:768px){
  .developerLeadCta{
    left:12px;
    bottom:76px;
    min-height:52px;
    max-width:calc(100vw - 24px);
    padding:7px 12px 7px 7px;
  }
  .developerLeadCta i{
    width:38px;
    height:38px;
    min-width:38px;
  }
  .developerLeadCta b{
    font-size:.78rem;
  }
  .developerLeadCta small{
    font-size:.56rem;
  }
}
@media (max-width:430px){
  .developerLeadCta{
    max-width:58px;
    width:58px;
    height:58px;
    padding:7px;
    justify-content:center;
  }
  .developerLeadCta span{
    position:absolute;
    left:0;
    bottom:64px;
    min-width:220px;
    padding:10px 12px;
    border-radius:18px;
    opacity:0;
    transform:translateY(8px);
    pointer-events:none;
    background:rgba(2,6,23,.86);
    border:1px solid rgba(255,255,255,.14);
    box-shadow:0 18px 46px rgba(0,0,0,.30);
    transition:opacity .18s ease, transform .18s ease;
  }
  .developerLeadCta:hover span,
  .developerLeadCta:focus span{
    opacity:1;
    transform:translateY(0);
  }
}


/* =========================================================
   EventoQR.click V24.3.2
   Catalog + Hero Typography + Admin Field Polish
   ========================================================= */

/* Catalog: prevent the number counter from being clipped */
.catalogHeroCard{
  overflow:visible!important;
  justify-content:center!important;
}
.catalogHeroCard b{
  display:block!important;
  line-height:1.08!important;
  padding:.04em 0 .10em!important;
  margin:0!important;
  overflow:visible!important;
}
.catalogHeroCard span,
.catalogHeroCard p{
  position:relative;
  z-index:2;
}

/* Public demos/invitations: prevent descenders and gradients from clipping */
.premiumHeroCard,
.titleStack,
.inviteCard h1,
.inviteCard h2,
.inviteCard h3{
  overflow:visible!important;
}
.titleStack{
  padding-bottom:.25rem!important;
}
.inviteCard h1,
.inviteCard h2,
.inviteCard h3{
  display:block!important;
  padding-top:.04em!important;
  padding-bottom:.18em!important;
  margin-bottom:.02em!important;
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
}
.tpl-baby-shower-champagne .inviteCard h1,
.tpl-baby-shower-champagne .inviteCard h2{
  line-height:1.13!important;
  padding-bottom:.22em!important;
}
.tpl-wedding-silver-pearl .inviteCard h1,
.tpl-wedding-silver-pearl .inviteCard h2,
.tpl-wedding-silver-pearl .inviteCard h3{
  line-height:1.10!important;
  padding-bottom:.18em!important;
}
.tpl-baptism-soft-silver .inviteCard h1,
.tpl-baptism-soft-silver .inviteCard h2{
  line-height:1.12!important;
  padding-bottom:.20em!important;
}
.tpl-xv-gold-royal .inviteCard h1,
.tpl-xv-gold-royal .inviteCard h2,
.tpl-graduation-noir-gold .inviteCard h1,
.tpl-graduation-noir-gold .inviteCard h2{
  line-height:1.08!important;
  padding-bottom:.18em!important;
}

/* Admin: guided fields look cleaner */
#titleLabel,
#honoreeLabel,
#partnerLabel,
#subtitleLabel,
#messageLabel{
  display:inline-block;
  margin-bottom:2px;
}
.fieldHint{
  display:block;
  margin:-6px 0 12px;
  color:#94a3b8;
  font-size:.72rem;
  line-height:1.35;
  font-weight:750;
}


/* =========================================================
   EventoQR.click V24.3
   Bilingual language switch
   ========================================================= */

.inviteLangSwitch,
.catalogLangSwitch{
  position:fixed;
  z-index:12050;
  width:54px;
  height:54px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  color:#fff;
  font-weight:1000;
  letter-spacing:.08em;
  cursor:pointer;
  background:
    radial-gradient(circle at 30% 18%, rgba(255,255,255,.20), transparent 28%),
    linear-gradient(135deg, rgba(15,23,42,.88), rgba(124,58,237,.42));
  box-shadow:0 18px 50px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(16px);
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.inviteLangSwitch:hover,
.catalogLangSwitch:hover{
  transform:translateY(-2px);
  border-color:color-mix(in srgb,var(--event-primary,#d4af37) 70%,#fff);
  box-shadow:0 24px 66px rgba(0,0,0,.34), 0 0 28px color-mix(in srgb,var(--event-primary,#d4af37) 28%, transparent);
}
.inviteLangSwitch{
  left:18px;
  top:18px;
}
.catalogLangSwitch{
  right:22px;
  top:22px;
}
@media(max-width:768px){
  .inviteLangSwitch{
    left:12px;
    top:12px;
    width:46px;
    height:46px;
    font-size:.78rem;
  }
  .catalogLangSwitch{
    right:14px;
    top:14px;
    width:46px;
    height:46px;
    font-size:.78rem;
  }
}


/* =========================================================
   EventoQR.click V24.3
   WhatsApp Manager / Centro de envío
   ========================================================= */

.whatsappManagerHead{
  align-items:flex-start;
  gap:16px;
}
.whatsappManagerHead > div:first-child span{
  display:block;
  margin-top:4px;
  color:#94a3b8;
  font-size:.84rem;
  font-weight:800;
}
.waTools{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
  align-items:center;
}
.waTools .input.mini{
  width:auto;
  min-width:180px;
  min-height:40px;
  margin:0;
  border-radius:999px;
}
.waTools button{
  min-height:40px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(135deg, rgba(34,197,94,.24), rgba(14,165,233,.16));
  color:#fff;
  font-weight:900;
  cursor:pointer;
}
.waStats{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:10px;
  margin:14px 0;
}
.waStats article{
  border-radius:22px;
  padding:14px;
  background:
    radial-gradient(circle at top left, rgba(255,255,255,.10), transparent 32%),
    linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 16px 40px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.04);
}
.waStats span,
.waStats strong{
  display:block;
}
.waStats span{
  color:#94a3b8;
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-weight:900;
}
.waStats strong{
  color:#fff;
  font-size:1.65rem;
  line-height:1.05;
  margin-top:4px;
}
.waMessagePreview{
  border-radius:24px;
  padding:16px;
  margin:10px 0 14px;
  background:
    radial-gradient(circle at top left, rgba(34,197,94,.10), transparent 30%),
    linear-gradient(180deg, rgba(2,6,23,.50), rgba(2,6,23,.34));
  border:1px solid rgba(255,255,255,.10);
}
.waMessagePreview strong{
  display:block;
  color:#fff;
}
.waMessagePreview p{
  color:#94a3b8;
  margin:6px 0 0;
}
.waMessagePreview pre{
  margin:10px 0 0;
  padding:14px;
  border-radius:18px;
  white-space:pre-wrap;
  word-break:break-word;
  color:#dbeafe;
  background:rgba(15,23,42,.78);
  border:1px solid rgba(255,255,255,.09);
  max-height:260px;
  overflow:auto;
}
.waGuestItem{
  align-items:flex-start;
  border-radius:22px;
  cursor:pointer;
}
.waGuestItem .guestMain{
  min-width:0;
}
.waGuestItem .guestMain small.waStatus{
  display:inline-flex;
  margin-top:8px;
  min-height:26px;
  align-items:center;
  padding:0 10px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.10);
  color:#cbd5e1;
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.1em;
  font-weight:900;
}
.waGuestItem.status-pending .waStatus{color:#fde68a;border-color:rgba(250,204,21,.18);background:rgba(250,204,21,.08)}
.waGuestItem.status-sent .waStatus{color:#bae6fd;border-color:rgba(14,165,233,.20);background:rgba(14,165,233,.08)}
.waGuestItem.status-opened .waStatus{color:#ddd6fe;border-color:rgba(124,58,237,.24);background:rgba(124,58,237,.10)}
.waGuestItem.status-confirmed .waStatus{color:#bbf7d0;border-color:rgba(34,197,94,.24);background:rgba(34,197,94,.10)}
.waGuestItem.status-declined .waStatus{color:#fecaca;border-color:rgba(248,113,113,.24);background:rgba(248,113,113,.10)}
.waGuestItem.status-checkedin .waStatus{color:#a7f3d0;border-color:rgba(16,185,129,.32);background:rgba(16,185,129,.14)}
.guestActions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.guestActions a[href*="wa.me"],
.guestActions button[data-mark-sent]{
  background:linear-gradient(135deg, rgba(34,197,94,.28), rgba(14,165,233,.12));
  color:#ecfdf5;
  border-color:rgba(34,197,94,.20);
}
.guestActions button[data-copy-msg]{
  background:linear-gradient(135deg, rgba(212,175,55,.22), rgba(124,58,237,.12));
  border-color:rgba(212,175,55,.18);
}
@media(max-width:1100px){
  .guestForm{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .guestForm button{
    grid-column:1/-1;
  }
  .waStats{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .waStats article:last-child{
    grid-column:1/-1;
  }
}
@media(max-width:760px){
  .whatsappManagerHead{
    flex-direction:column;
  }
  .waTools{
    width:100%;
    justify-content:stretch;
  }
  .waTools .input.mini,
  .waTools button{
    width:100%;
  }
  .guestForm{
    grid-template-columns:1fr;
  }
  .guestItem,
  .waGuestItem{
    display:grid;
    grid-template-columns:1fr;
  }
  .guestActions{
    justify-content:flex-start;
  }
  .guestActions a,
  .guestActions button{
    width:100%;
    text-align:center;
    justify-content:center;
  }
}


/* =========================================================
   EventoQR.click V24.3
   True bilingual content fields
   ========================================================= */

.bilingualBlock{
  border-color:rgba(14,165,233,.18)!important;
  background:
    radial-gradient(circle at top left, rgba(14,165,233,.10), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.035))!important;
}
.bilingualBlock h2{
  display:flex;
  align-items:center;
  gap:8px;
}
.bilingualBlock h2 small{
  color:#67e8f9;
  text-transform:uppercase;
  letter-spacing:.13em;
  font-size:.62rem;
}
.blockHint{
  margin:-4px 0 14px;
  color:#94a3b8;
  font-weight:750;
  font-size:.84rem;
}


/* =========================================================
   EventoQR.click V24.3
   Auto PNG RSVP pass generator
   ========================================================= */

.passSuccess .digitalPass{
  gap:18px;
}
.passInfo em{
  font-style:normal;
  color:var(--event-secondary);
  font-weight:800;
}
.passActions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  justify-content:center;
  margin-top:6px;
}
.passActions .btn{
  min-width:190px;
}
.passActions .btn.ghost{
  background:rgba(255,255,255,.06);
  color:#fff;
  border:1px solid rgba(255,255,255,.14);
}
.passQr img{
  max-width:220px;
  width:220px;
  height:220px;
  display:block;
  background:#fff;
  border-radius:16px;
  padding:8px;
  box-shadow:0 18px 44px rgba(0,0,0,.22);
}
@media(max-width:640px){
  .passActions{
    flex-direction:column;
  }
  .passActions .btn{
    width:100%;
    min-width:0;
  }
}


/* =========================================================
   EventoQR.click V24.3
   Auto pass preview + forced reminder
   ========================================================= */
.passAutoNote{
  margin:4px 0 2px;
  text-align:center;
  color:var(--event-secondary);
  font-weight:800;
}
.passPreviewOverlay{
  position:fixed;
  inset:0;
  z-index:16000;
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(5,10,24,.72);
  backdrop-filter:blur(14px);
}
.passPreviewOverlay.show{ display:flex; }
.passPreviewOverlay.reminderPulse .passPreviewCard{
  animation: passReminderPulse .9s ease 2;
}
@keyframes passReminderPulse{
  0%{ transform:scale(1); box-shadow:0 24px 80px rgba(0,0,0,.45); }
  50%{ transform:scale(1.02); box-shadow:0 24px 100px rgba(212,175,55,.28); }
  100%{ transform:scale(1); box-shadow:0 24px 80px rgba(0,0,0,.45); }
}
.passPreviewCard{
  position:relative;
  width:min(92vw, 820px);
  max-height:min(92vh, 1200px);
  overflow:auto;
  border-radius:34px;
  padding:24px 24px 28px;
  border:1px solid rgba(255,255,255,.14);
  background:
    radial-gradient(circle at top left, rgba(255,255,255,.10), transparent 26%),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  box-shadow:0 24px 80px rgba(0,0,0,.45);
  text-align:center;
}
.passPreviewClose{
  position:absolute;
  top:16px;
  right:16px;
  width:42px;
  height:42px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.08);
  color:#fff;
  font-size:26px;
  line-height:1;
  cursor:pointer;
}
.passPreviewBadge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:40px;
  padding:8px 18px;
  border-radius:999px;
  background:linear-gradient(135deg, rgba(212,175,55,.9), rgba(168,85,247,.9));
  color:#fff;
  font-weight:1000;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:.78rem;
}
.passPreviewCard h3{
  margin:16px auto 10px;
  max-width:600px;
  font-size:clamp(1.4rem,3vw,2rem);
}
.passPreviewCard p{
  margin:0 auto 12px;
  max-width:620px;
  color:rgba(255,255,255,.82);
}
.passPreviewTimer{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:84px;
  min-height:40px;
  padding:8px 14px;
  margin:10px auto 16px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  color:var(--event-secondary);
  font-weight:1000;
}
.passPreviewImageWrap{
  border-radius:28px;
  padding:14px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.passPreviewImageWrap img{
  display:block;
  width:100%;
  height:auto;
  border-radius:20px;
}
.passPreviewActions{
  display:flex;
  gap:12px;
  justify-content:center;
  flex-wrap:wrap;
  margin-top:18px;
}
.passPreviewActions .btn{ min-width:220px; }
.passPreviewActions .btn.ghost{
  background:rgba(255,255,255,.07);
  color:#fff;
  border:1px solid rgba(255,255,255,.16);
}
@media(max-width:640px){
  .passPreviewOverlay{ padding:12px; }
  .passPreviewCard{ width:100%; padding:20px 16px 22px; border-radius:24px; }
  .passPreviewActions{ flex-direction:column; }
  .passPreviewActions .btn{ width:100%; min-width:0; }
}


/* =========================================================
   EventoQR.click V24.4
   Pass popup auto-close + redirect
   ========================================================= */
.passPreviewCard{
  scroll-behavior:smooth;
}
.passPreviewActions .btn.ghost{
  white-space:normal;
}


/* =========================================================
   EventoQR.click V24.5
   Hide underlying RSVP pass card after confirmation
   ========================================================= */
.passGenerating{
  max-width:520px;
  margin:0 auto;
  text-align:center;
  padding:34px 26px!important;
}
.passGenerating p{
  max-width:420px;
  margin:10px auto 16px;
  color:rgba(255,255,255,.82);
}
.passGenerating small{
  display:block;
  color:var(--event-secondary);
  font-weight:850;
  margin-top:10px;
}
.passLoadingOrb{
  display:flex;
  justify-content:center;
  gap:8px;
  margin:18px auto 6px;
}
.passLoadingOrb i{
  width:12px;
  height:12px;
  border-radius:999px;
  background:linear-gradient(135deg, var(--event-primary), #a855f7);
  animation:passLoadingDots .9s ease-in-out infinite;
}
.passLoadingOrb i:nth-child(2){animation-delay:.12s}
.passLoadingOrb i:nth-child(3){animation-delay:.24s}
@keyframes passLoadingDots{
  0%,100%{transform:translateY(0);opacity:.45}
  50%{transform:translateY(-8px);opacity:1}
}


/* =========================================================
   EventoQR.click V25
   Check-in Scanner Pro
   ========================================================= */

.checkinProShell{
  width:min(980px, calc(100% - 28px));
}
.checkinProCard{
  width:min(920px, 100%);
  text-align:left;
}
.checkinProHead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  margin-bottom:20px;
}
.checkinProHead h1{
  margin-bottom:8px;
}
.checkinProHead p{
  margin:0;
  color:#aeb6ce;
}
.checkinStatusPill{
  min-height:38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 14px;
  border-radius:999px;
  font-weight:1000;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:.68rem;
  border:1px solid rgba(255,255,255,.13);
  background:rgba(255,255,255,.06);
  color:#e5edf8;
  white-space:nowrap;
}
.checkinStatusPill.valid,
.checkinStatusPill.registered{
  color:#bbf7d0;
  border-color:rgba(34,197,94,.42);
  background:rgba(34,197,94,.12);
}
.checkinStatusPill.duplicate,
.checkinStatusPill.warning{
  color:#fde68a;
  border-color:rgba(245,158,11,.42);
  background:rgba(245,158,11,.12);
}
.checkinStatusPill.error{
  color:#fecaca;
  border-color:rgba(239,68,68,.42);
  background:rgba(239,68,68,.12);
}
.checkinStatusPill.scanning,
.checkinStatusPill.validating{
  color:#bae6fd;
  border-color:rgba(14,165,233,.42);
  background:rgba(14,165,233,.12);
}
.scannerBox,
.manualScanBox{
  border-radius:28px;
  padding:18px;
  margin-bottom:18px;
  background:
    radial-gradient(circle at top left, rgba(14,165,233,.10), transparent 36%),
    rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.10);
}
.qrReader{
  min-height:280px;
  border-radius:24px;
  overflow:hidden;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.04) 0 8px, transparent 8px 16px),
    rgba(2,6,23,.42);
  display:grid;
  place-items:center;
}
.qrReader:empty::before{
  content:"Scanner QR";
  color:#94a3b8;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:.78rem;
}
.qrReader video{
  border-radius:24px;
}
.scannerActions{
  display:flex;
  gap:12px;
  margin-top:14px;
}
.scannerActions .btn{
  flex:1;
}
.scannerHelp{
  margin:12px 0 0;
  color:#94a3b8;
  font-weight:750;
  font-size:.86rem;
  text-align:center;
}
.manualScanBox label{
  display:grid;
  gap:8px;
  font-weight:900;
  color:#cbd5e1;
}
.checkinResult{
  margin:0 0 18px;
  padding:18px;
  border-radius:24px;
  border:1px solid rgba(255,255,255,.10);
}
.checkinResult strong{
  display:block;
  font-size:1.05rem;
  margin-bottom:4px;
}
.checkinResult p{
  margin:0;
  color:#cbd5e1;
}
.checkinResult.success{
  border-color:rgba(34,197,94,.38);
  background:rgba(34,197,94,.11);
}
.checkinResult.warning{
  border-color:rgba(245,158,11,.42);
  background:rgba(245,158,11,.12);
}
.checkinResult.error{
  border-color:rgba(239,68,68,.42);
  background:rgba(239,68,68,.12);
}
.checkinFooterActions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:16px;
}
.checkinFooterActions .btn{
  min-width:180px;
}
@media(max-width:720px){
  .checkinProHead{
    flex-direction:column;
  }
  .scannerActions,
  .checkinFooterActions{
    flex-direction:column;
  }
  .checkinFooterActions .btn,
  .scannerActions .btn{
    width:100%;
  }
  .qrReader{
    min-height:240px;
  }
}


/* =========================================================
   EventoQR.click V25.1
   Check-in mobile centering polish
   ========================================================= */

.checkinBody{
  margin:0!important;
  width:100%!important;
  overflow-x:hidden!important;
}
.checkinShell.checkinProShell{
  width:100%!important;
  max-width:980px!important;
  margin-inline:auto!important;
  box-sizing:border-box!important;
  justify-items:center!important;
  padding-inline:16px!important;
}
.checkinProCard{
  width:100%!important;
  max-width:920px!important;
  margin-inline:auto!important;
  box-sizing:border-box!important;
}
.scannerBox,
.manualScanBox,
.checkinDetails,
.checkinResult{
  width:100%!important;
  box-sizing:border-box!important;
}
.qrReader{
  width:100%!important;
  max-width:100%!important;
  margin-inline:auto!important;
}
.qrReader > div,
.qrReader video,
.qrReader canvas{
  max-width:100%!important;
}
@media(max-width:720px){
  .checkinShell.checkinProShell{
    min-height:100svh!important;
    place-items:start center!important;
    padding:14px 12px 28px!important;
  }
  .checkinProCard{
    border-radius:30px!important;
    padding:24px 18px!important;
  }
  .checkinProHead{
    align-items:flex-start!important;
  }
  .scannerBox,
  .manualScanBox{
    padding:14px!important;
    border-radius:24px!important;
  }
  .qrReader{
    min-height:230px!important;
    border-radius:22px!important;
  }
}
@media(max-width:390px){
  .checkinShell.checkinProShell{
    padding-inline:10px!important;
  }
  .checkinProCard{
    padding-inline:16px!important;
  }
}


/* =========================================================
   EventoQR.click V25.2
   Auto check-in on scan
   ========================================================= */
.checkinStatusPill.registered{
  animation:checkinRegisteredPulse 1.2s ease-in-out 2;
}
@keyframes checkinRegisteredPulse{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.06)}
}


/* =========================================================
   EventoQR.click V26
   Live Event Dashboard / Centro de control
   ========================================================= */

.liveEventDashboard{
  margin-top:18px;
  position:relative;
  overflow:hidden;
}
.liveEventDashboard::before{
  content:"";
  position:absolute;
  inset:-1px;
  pointer-events:none;
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--event-primary,#d4af37) 18%, transparent), transparent 32%),
    radial-gradient(circle at bottom right, rgba(14,165,233,.13), transparent 30%);
  opacity:.8;
}
.liveEventDashboard > *{
  position:relative;
  z-index:1;
}
.liveHead{
  align-items:flex-start;
}
.liveHead > div:first-child span{
  display:block;
  margin-top:4px;
  color:#94a3b8;
  font-size:.82rem;
  font-weight:800;
}
.liveTools{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:8px;
}
.liveTools button,
.liveTools .btn{
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.08);
  color:#e2e8f0;
  border-radius:999px;
  min-height:36px;
  padding:0 14px;
  font-weight:900;
  cursor:pointer;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
}
.liveTools .btn{
  background:linear-gradient(135deg, rgba(212,175,55,.22), rgba(124,58,237,.18));
}
.liveHeroGrid{
  display:grid;
  grid-template-columns: minmax(260px, .8fr) 1.4fr;
  gap:16px;
  margin-top:16px;
}
.liveMainMetric,
.liveMetricGrid article,
.livePanelMini{
  border-radius:28px;
  background:
    radial-gradient(circle at top right, rgba(255,255,255,.10), transparent 40%),
    linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.045));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 20px 56px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.06);
}
.liveMainMetric{
  padding:22px;
  min-height:220px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.liveMainMetric span,
.liveMetricGrid article span{
  text-transform:uppercase;
  letter-spacing:.13em;
  color:#94a3b8;
  font-size:.66rem;
  font-weight:1000;
}
.liveMainMetric strong{
  font-size:clamp(3rem, 8vw, 5.6rem);
  line-height:.9;
  color:#fff;
}
.liveMainMetric small{
  color:#cbd5e1;
  font-weight:800;
}
.liveProgressTrack{
  height:14px;
  border-radius:999px;
  overflow:hidden;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.10);
}
.liveProgressTrack i{
  display:block;
  height:100%;
  width:0%;
  border-radius:999px;
  background:linear-gradient(90deg, #22c55e, color-mix(in srgb, var(--event-primary,#d4af37) 70%, #ffffff));
  box-shadow:0 0 24px rgba(34,197,94,.34);
  transition:width .45s ease;
}
.liveMetricGrid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:12px;
}
.liveMetricGrid article{
  min-height:104px;
  padding:16px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.liveMetricGrid article strong{
  font-size:2.25rem;
  color:#fff;
  line-height:1;
}
.liveMetricGrid article small{
  color:#94a3b8;
  font-weight:800;
  font-size:.72rem;
}
.liveMetricGrid article.ok strong,
.liveMetricGrid article.inside strong{
  color:#bbf7d0;
}
.liveMetricGrid article.warn strong{
  color:#fde68a;
}
.liveMetricGrid article.no strong{
  color:#fecaca;
}
.liveMetricGrid article.vip strong{
  color:var(--event-secondary,#f7e6ae);
}
.liveLowerGrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin-top:16px;
}
.livePanelMini{
  padding:18px;
}
.livePanelTitle{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}
.livePanelTitle strong{
  color:#fff;
  font-size:1rem;
}
.livePanelTitle span{
  color:#94a3b8;
  font-size:.75rem;
  font-weight:900;
}
.liveRecentList{
  display:grid;
  gap:10px;
}
.liveGuestRow{
  border-radius:18px;
  padding:12px 14px;
  display:grid;
  gap:3px;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.10);
}
.liveGuestRow strong{
  color:#fff;
}
.liveGuestRow span,
.liveGuestRow small{
  color:#94a3b8;
  font-weight:750;
}
.liveGuestRow.inside{
  border-color:rgba(34,197,94,.20);
}
.liveGuestRow.pending{
  border-color:rgba(250,204,21,.16);
}
@media(max-width:980px){
  .liveHeroGrid,
  .liveLowerGrid{
    grid-template-columns:1fr;
  }
}
@media(max-width:720px){
  .liveMetricGrid{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }
  .liveTools{
    justify-content:flex-start;
  }
}
@media(max-width:460px){
  .liveMetricGrid{
    grid-template-columns:1fr;
  }
  .liveMainMetric strong{
    font-size:3.5rem;
  }
}


/* =========================================================
   EventoQR.click V26.1
   Lost pass recovery / download link
   ========================================================= */

.waPassHint{
  display:block;
  margin-top:10px;
  padding:10px 12px;
  border-radius:16px;
  background:rgba(14,165,233,.09);
  border:1px solid rgba(14,165,233,.18);
  color:#bae6fd;
  font-weight:800;
  word-break:break-word;
}
.passRecoveryBanner{
  position:fixed;
  left:50%;
  top:18px;
  transform:translateX(-50%);
  z-index:15000;
  width:min(520px, calc(100vw - 28px));
  border-radius:999px;
  padding:12px 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  color:#fff;
  background:
    radial-gradient(circle at top left, rgba(255,255,255,.18), transparent 30%),
    linear-gradient(135deg, rgba(15,23,42,.92), rgba(124,58,237,.52));
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 22px 70px rgba(0,0,0,.34);
  backdrop-filter:blur(18px);
}
.passRecoveryBanner strong{
  font-weight:1000;
}
.passRecoveryBanner span{
  color:#cbd5e1;
  font-weight:750;
  font-size:.86rem;
}
@media(max-width:640px){
  .passRecoveryBanner{
    border-radius:24px;
    flex-direction:column;
    text-align:center;
    gap:2px;
  }
}


/* =========================================================
   EventoQR.click V27
   Client Portal
   ========================================================= */

.portalBody{
  min-height:100vh;
  margin:0;
  color:#e5edf8;
  background:
    radial-gradient(circle at 12% 0%, rgba(212,175,55,.14), transparent 28%),
    radial-gradient(circle at 86% 0%, rgba(124,58,237,.16), transparent 30%),
    linear-gradient(180deg,#020617,#071024 54%,#020617);
}
#portalToast{
  position:fixed;
  right:18px;
  top:18px;
  z-index:20000;
  display:grid;
  gap:10px;
  width:min(360px,calc(100vw - 36px));
}
.portalToast{
  border-radius:18px;
  padding:14px 16px;
  background:rgba(15,23,42,.92);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 18px 54px rgba(0,0,0,.28);
  backdrop-filter:blur(16px);
  transition:.2s ease;
}
.portalToast b,.portalToast span{display:block}
.portalToast span{color:#94a3b8;margin-top:3px}
.portalLogin{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:24px;
}
.portalLoginCard{
  width:min(460px,100%);
  text-align:center;
  background:rgba(15,23,42,.78);
  border:1px solid rgba(255,255,255,.12);
  border-radius:36px;
  padding:34px;
  box-shadow:0 30px 90px rgba(0,0,0,.36);
  backdrop-filter:blur(18px);
}
.portalLoginCard h1{font-size:clamp(2rem,6vw,3rem);margin:12px 0 8px;line-height:1}
.portalLoginCard p{color:#94a3b8}
.portalLoginCard a{display:inline-block;margin-top:14px;color:#cbd5e1;font-weight:800}
.portalShell{
  width:min(1320px, calc(100% - 32px));
  margin:0 auto;
  padding:30px 0 50px;
}
.portalHead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  margin-bottom:20px;
}
.portalHead em,.portalCardHead em,.selectedEventTop em{
  display:block;
  font-style:normal;
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:.72rem;
  font-weight:1000;
  color:#d4af37;
}
.portalHead h1{font-size:clamp(2.35rem,5vw,4.8rem);line-height:.92;margin:10px 0 8px}
.portalHead p{color:#94a3b8;margin:0}
.portalActions{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end}
.portalGrid{display:grid;grid-template-columns:320px 1fr;gap:18px}
.portalCard{
  border-radius:32px;
  padding:20px;
  background:
    radial-gradient(circle at top right, rgba(255,255,255,.08), transparent 42%),
    linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.045));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 22px 66px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter:blur(18px);
}
.portalEvents{position:sticky;top:18px;align-self:start}
.portalCardHead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.portalCardHead span{color:#94a3b8;font-weight:800;font-size:.78rem}
.portalEventsList,.portalMain,.portalMiniList,.portalGuestList{display:grid;gap:10px}
.portalMain{gap:18px}
.portalEventItem{
  width:100%;
  text-align:left;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.055);
  color:#e5edf8;
  border-radius:22px;
  padding:14px;
  cursor:pointer;
  display:grid;
  gap:4px;
}
.portalEventItem.active{
  border-color:rgba(212,175,55,.42);
  background:linear-gradient(135deg, rgba(212,175,55,.16), rgba(124,58,237,.10));
}
.portalEventItem strong{color:#fff}
.portalEventItem span,.portalEventItem small{color:#94a3b8;font-weight:750}
.selectedEventCard{overflow:hidden;position:relative}
.selectedEventTop{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}
.selectedEventTop h2{margin:8px 0 6px;font-size:clamp(1.9rem,4vw,3.3rem);line-height:.95}
.selectedEventTop p{color:#94a3b8;margin:0}
.selectedEventActions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.portalProgress{margin-top:18px;display:grid;gap:12px}
.portalProgress span,.portalStats article span{
  text-transform:uppercase;
  letter-spacing:.13em;
  color:#94a3b8;
  font-size:.66rem;
  font-weight:1000;
}
.portalProgress strong{display:block;font-size:clamp(3rem,8vw,5rem);line-height:.9;color:#fff;margin-top:8px}
.portalProgress small{color:#cbd5e1;font-weight:850}
.portalProgressTrack{height:14px;border-radius:999px;overflow:hidden;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.10)}
.portalProgressTrack i{display:block;width:0%;height:100%;border-radius:999px;background:linear-gradient(90deg,#22c55e,#d4af37);box-shadow:0 0 24px rgba(34,197,94,.32);transition:width .45s ease}
.portalStats{display:grid;grid-template-columns:repeat(6, minmax(0,1fr));gap:12px}
.portalStats article{
  min-height:110px;
  border-radius:26px;
  padding:16px;
  background:rgba(255,255,255,.065);
  border:1px solid rgba(255,255,255,.11);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.portalStats strong{color:#fff;font-size:2.2rem;line-height:1}
.portalStats small{color:#94a3b8;font-weight:800;font-size:.72rem}
.portalStats .ok strong,.portalStats .inside strong{color:#bbf7d0}
.portalStats .warn strong{color:#fde68a}
.portalStats .no strong{color:#fecaca}
.portalStats .vip strong{color:#f7e6ae}
.portalTwo{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.portalMiniRow,.portalGuestItem{
  border-radius:20px;
  padding:14px;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.10);
}
.portalMiniRow strong,.portalGuestItem strong{color:#fff}
.portalMiniRow span,.portalMiniRow small,.portalGuestItem span,.portalGuestItem small{display:block;color:#94a3b8;font-weight:750;margin-top:3px}
.portalMiniRow.inside,.portalGuestItem.inside{border-color:rgba(34,197,94,.22)}
.portalGuestsCard .input.mini{width:min(360px,100%);min-height:38px;border-radius:999px;margin:0}
.portalGuestItem{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center}
.portalGuestActions{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.portalGuestActions a,.portalGuestActions button{
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.08);
  color:#e2e8f0;
  border-radius:999px;
  min-height:34px;
  padding:0 12px;
  font-weight:900;
  cursor:pointer;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
}
.portalGuestActions a:nth-child(2){border-color:rgba(212,175,55,.34);background:rgba(212,175,55,.10)}
@media(max-width:1080px){.portalGrid{grid-template-columns:1fr}.portalEvents{position:relative;top:auto}}
@media(max-width:900px){.portalStats{grid-template-columns:repeat(3,1fr)}.portalTwo{grid-template-columns:1fr}}
@media(max-width:720px){
  .portalShell{width:min(100% - 24px, 1320px);padding-top:18px}
  .portalHead,.selectedEventTop{flex-direction:column}
  .portalActions,.selectedEventActions{justify-content:flex-start}
  .portalStats{grid-template-columns:repeat(2,1fr)}
  .portalGuestItem{grid-template-columns:1fr}
  .portalGuestActions{justify-content:flex-start}
}
@media(max-width:460px){.portalStats{grid-template-columns:1fr}.portalCard{padding:16px;border-radius:26px}}


/* =========================================================
   EventoQR.click V27.1
   Client Portal polish / mobile / export / support
   ========================================================= */

.portalSupportFloat{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:13000;
  min-height:56px;
  padding:8px 16px 8px 8px;
  border-radius:999px;
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:#fff;
  background:
    radial-gradient(circle at top left, rgba(255,255,255,.18), transparent 32%),
    linear-gradient(135deg, rgba(15,23,42,.92), rgba(124,58,237,.52));
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 22px 70px rgba(0,0,0,.34);
  backdrop-filter:blur(18px);
  font-weight:1000;
}
.portalSupportFloat i{
  width:42px;
  height:42px;
  border-radius:999px;
  display:grid;
  place-items:center;
  font-style:normal;
  background:linear-gradient(135deg,#22c55e,#14b8a6);
}
.portalSupportTop{
  border-color:rgba(34,197,94,.24)!important;
}
.portalGuestActions .passAction{
  border-color:rgba(212,175,55,.42)!important;
  background:linear-gradient(135deg, rgba(212,175,55,.16), rgba(124,58,237,.12))!important;
}
.portalActions .btn,
.portalActions button{
  min-height:46px;
}
.portalGuestActions a,
.portalGuestActions button{
  white-space:nowrap;
}
@media(max-width:720px){
  .portalHead{
    gap:12px;
  }
  .portalHead h1{
    font-size:clamp(2.15rem,13vw,3.8rem);
  }
  .portalActions{
    width:100%;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .portalActions .btn,
  .portalActions button{
    width:100%;
    justify-content:center;
  }
  .selectedEventActions{
    width:100%;
    display:grid;
    grid-template-columns:1fr 1fr;
  }
  .selectedEventActions .btn{
    justify-content:center;
  }
  .portalGuestActions{
    display:grid;
    grid-template-columns:1fr 1fr;
  }
  .portalGuestActions a,
  .portalGuestActions button{
    justify-content:center;
    min-height:40px;
  }
  .portalSupportFloat{
    right:12px;
    bottom:12px;
    width:54px;
    height:54px;
    padding:6px;
    justify-content:center;
  }
  .portalSupportFloat span{
    display:none;
  }
}
@media(max-width:430px){
  .portalActions,
  .selectedEventActions,
  .portalGuestActions{
    grid-template-columns:1fr;
  }
  .portalStats article{
    min-height:96px;
  }
}


/* =========================================================
   EventoQR.click V28
   Local Event Admin / Monitor Access
   ========================================================= */

.portalTeamCard{
  border-color:rgba(14,165,233,.18);
  background:
    radial-gradient(circle at top left, rgba(14,165,233,.10), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.045));
}
.portalTeamCard .portalCardHead{
  align-items:flex-start;
}
.portalTeamCard .portalCardHead span{
  display:block;
  margin-top:4px;
  color:#94a3b8;
  font-weight:800;
}
.portalMemberForm{
  display:grid;
  grid-template-columns:1.1fr .8fr auto;
  gap:10px;
  margin:0 0 14px;
}
.portalMemberForm .input{
  margin:0;
  min-height:44px;
  border-radius:18px;
}
.portalMemberForm .btn{
  min-height:44px;
  white-space:nowrap;
}
.portalMemberList{
  display:grid;
  gap:10px;
}
.portalMemberItem{
  border-radius:20px;
  padding:14px;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.10);
  display:grid;
  grid-template-columns:1fr auto;
  gap:12px;
  align-items:center;
}
.portalMemberItem strong{
  color:#fff;
}
.portalMemberItem span,
.portalMemberItem small{
  display:block;
  color:#94a3b8;
  font-weight:750;
  margin-top:3px;
}
.portalMemberItem button{
  border:1px solid rgba(248,113,113,.22);
  background:rgba(248,113,113,.10);
  color:#fecaca;
  border-radius:999px;
  min-height:34px;
  padding:0 12px;
  font-weight:900;
  cursor:pointer;
}
.portalMemberItem em{
  color:#94a3b8;
  font-style:normal;
  font-weight:900;
  font-size:.78rem;
}
@media(max-width:820px){
  .portalMemberForm{
    grid-template-columns:1fr;
  }
  .portalMemberForm .btn{
    width:100%;
    justify-content:center;
  }
  .portalMemberItem{
    grid-template-columns:1fr;
  }
}


/* =========================================================
   EventoQR.click V28.1
   Monitor password / local access signup
   ========================================================= */

.portalAccessDivider{
  display:flex;
  align-items:center;
  gap:10px;
  margin:20px 0 14px;
  color:#94a3b8;
  font-weight:1000;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.64rem;
}
.portalAccessDivider::before,
.portalAccessDivider::after{
  content:"";
  height:1px;
  flex:1;
  background:rgba(255,255,255,.12);
}
.portalSignupBox{
  margin-top:10px;
  padding:16px;
  border-radius:24px;
  background:
    radial-gradient(circle at top left, rgba(14,165,233,.10), transparent 34%),
    rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.10);
  text-align:left;
}
.portalSignupBox h2{
  margin:0 0 6px;
  color:#fff;
  font-size:1.2rem;
}
.portalSignupBox p{
  margin:0 0 12px;
  color:#94a3b8;
  font-size:.86rem;
  font-weight:750;
}
.portalSignupBox .input{
  margin-bottom:10px;
}
.portalSignupBox .btn.ghost{
  border:1px solid rgba(14,165,233,.24);
  background:rgba(14,165,233,.10);
}


/* =========================================================
   EventoQR.click V28.2
   Activation links + password reset
   ========================================================= */

.portalResetBox{
  border-color:rgba(245,158,11,.18);
  background:
    radial-gradient(circle at top left, rgba(245,158,11,.10), transparent 34%),
    rgba(255,255,255,.045);
}
.portalMemberActions,
.memberActions{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:8px;
}
.portalMemberActions button,
.memberActions button{
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.08);
  color:#e2e8f0;
  border-radius:999px;
  min-height:34px;
  padding:0 12px;
  font-weight:900;
  cursor:pointer;
}
.portalMemberActions button[data-copy-activation],
.memberActions button[data-copy-member-activation]{
  border-color:rgba(14,165,233,.26);
  background:rgba(14,165,233,.10);
  color:#bae6fd;
}
.portalMemberActions button[data-reset-local-member],
.memberActions button[data-reset-member-password]{
  border-color:rgba(245,158,11,.26);
  background:rgba(245,158,11,.10);
  color:#fde68a;
}
@media(max-width:820px){
  .portalMemberActions,
  .memberActions{
    justify-content:flex-start;
  }
  .portalMemberActions button,
  .memberActions button{
    min-height:38px;
  }
}


/* =========================================================
   EventoQR.click V28.3
   Automatic activation email + password setup
   ========================================================= */

.portalPasswordSetup{
  position:fixed;
  inset:0;
  z-index:18000;
  display:grid;
  place-items:center;
  padding:24px;
  background:rgba(2,6,23,.72);
  backdrop-filter:blur(16px);
}
.portalPasswordSetup.hidden{
  display:none!important;
}
.portalPasswordSetupCard{
  width:min(460px,100%);
  border-radius:34px;
  padding:30px;
  text-align:center;
  color:#e5edf8;
  background:
    radial-gradient(circle at top left, rgba(212,175,55,.15), transparent 32%),
    linear-gradient(180deg, rgba(15,23,42,.94), rgba(15,23,42,.82));
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 28px 90px rgba(0,0,0,.42);
}
.portalPasswordSetupCard em{
  display:block;
  margin-top:12px;
  color:#d4af37;
  text-transform:uppercase;
  letter-spacing:.16em;
  font-style:normal;
  font-size:.7rem;
  font-weight:1000;
}
.portalPasswordSetupCard h1{
  font-size:clamp(2rem,6vw,3rem);
  line-height:1;
  margin:12px 0 8px;
}
.portalPasswordSetupCard p{
  color:#94a3b8;
  margin:0 0 16px;
  font-weight:750;
}
.portalPasswordSetupCard .input{
  margin-bottom:10px;
}
.portalPasswordSetupCard .btn{
  margin-top:8px;
}
.portalMemberActions button[data-send-activation],
.memberActions button[data-send-member-activation]{
  border-color:rgba(34,197,94,.28);
  background:rgba(34,197,94,.10);
  color:#bbf7d0;
}


/* =========================================================
   EventoQR.click V30.1
   Brand logo system / logo everywhere
   ========================================================= */
img.logoMark.logoMarkImg,
.logoMark img{
  display:block!important;
  width:86px!important;
  height:86px!important;
  object-fit:cover!important;
  border-radius:28px!important;
  margin:0 auto 18px!important;
  background:#030718!important;
  border:1px solid rgba(212,175,55,.28)!important;
  box-shadow:0 22px 58px rgba(0,0,0,.34), 0 0 38px rgba(212,175,55,.14)!important;
}
.brandLogoHorizontal{
  display:block;
  width:min(265px, 56vw);
  height:auto;
  max-height:76px;
  object-fit:contain;
  border-radius:18px;
  box-shadow:0 18px 45px rgba(0,0,0,.18);
}
.salesBrand{min-width:0;text-decoration:none;}
.salesHeader{align-items:center;}
.dashTitleBrand,
.portalHeadBrand,
.checkinHeadBrand{
  display:flex;
  align-items:center;
  gap:14px;
}
.dashMiniLogo,
.checkinMiniLogo{
  width:58px;
  height:58px;
  border-radius:18px;
  object-fit:cover;
  border:1px solid rgba(212,175,55,.25);
  box-shadow:0 14px 40px rgba(0,0,0,.24);
  flex:0 0 auto;
}
.portalHeadLogo{
  width:min(260px, 46vw);
  height:auto;
  border-radius:18px;
  object-fit:contain;
  box-shadow:0 18px 50px rgba(0,0,0,.25);
  flex:0 0 auto;
}
.catalogHeroLogo{
  display:block;
  width:min(330px, 86vw);
  height:auto;
  margin:0 0 18px;
  border-radius:22px;
  box-shadow:0 20px 60px rgba(0,0,0,.24);
}
.publicBrandBadge{
  margin:32px auto 8px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:8px 14px 8px 8px;
  border-radius:999px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.12);
  color:#fff;
  font-weight:1000;
  letter-spacing:.02em;
}
.publicBrandBadge img{
  width:42px;
  height:42px;
  border-radius:14px;
  object-fit:cover;
}
.portalPasswordSetupCard img.logoMark.logoMarkImg,
.portalLoginCard img.logoMark.logoMarkImg,
.loginCard img.logoMark.logoMarkImg,
.checkinCard img.logoMark.logoMarkImg{
  width:92px!important;
  height:92px!important;
}
@media(max-width:860px){
  .salesHeader{align-items:flex-start;}
  .brandLogoHorizontal{width:min(230px, 70vw);}
  .dashTitleBrand,.portalHeadBrand,.checkinHeadBrand{align-items:flex-start;}
  .portalHeadLogo{width:min(240px, 76vw);}
}
@media(max-width:560px){
  .salesHeader{top:8px;padding:10px;}
  .brandLogoHorizontal{max-height:62px;}
  .dashMiniLogo,.checkinMiniLogo{width:50px;height:50px;border-radius:16px;}
  .catalogHeroLogo{width:min(280px, 90vw);}
}


/* =========================================================
   EventoQR.click V30.1
   Header logo transparency fix
   ========================================================= */

.brandLogoHorizontal,
.portalHeadLogo,
.catalogHeroLogo{
  background:transparent!important;
  box-shadow:none!important;
  border:0!important;
  border-radius:0!important;
  mix-blend-mode:normal!important;
  filter:drop-shadow(0 14px 32px rgba(0,0,0,.28)) drop-shadow(0 0 18px rgba(212,175,55,.10))!important;
}
.salesBrand,
.brand.salesBrand{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  padding:0!important;
}
.salesHeader{
  background:
    radial-gradient(circle at 12% 0%, rgba(212,175,55,.10), transparent 26%),
    linear-gradient(135deg, rgba(255,255,255,.075), rgba(255,255,255,.035))!important;
}
.salesHeader .brandLogoHorizontal{
  width:min(250px, 50vw)!important;
  max-height:72px!important;
}
.portalHeadLogo,
.catalogHeroLogo{
  background:transparent!important;
}
@media(max-width:720px){
  .salesHeader .brandLogoHorizontal{
    width:min(220px, 64vw)!important;
  }
}


/* =========================================================
   EventoQR.click V30.1
   Portal stacked logo / logo-full-dark.png
   ========================================================= */

.portalHeadBrand{
  align-items:center!important;
}
.portalHeadLogoStacked{
  width:clamp(170px, 18vw, 235px)!important;
  max-width:32vw!important;
  height:auto!important;
  max-height:190px!important;
  object-fit:contain!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  filter:drop-shadow(0 18px 38px rgba(0,0,0,.32)) drop-shadow(0 0 22px rgba(212,175,55,.14))!important;
}
@media(max-width:900px){
  .portalHeadBrand{
    flex-direction:column!important;
    align-items:flex-start!important;
    gap:10px!important;
  }
  .portalHeadLogoStacked{
    width:min(230px, 72vw)!important;
    max-width:72vw!important;
    max-height:none!important;
  }
}


/* =========================================================
   EventoQR.click V30.1
   Remove public invite lead CTA
   ========================================================= */

.developerLeadCta{
  display:none!important;
}


/* =========================================================
   EventoQR.click V30.1
   Photo Portrait + Custom Demo Builder
   ========================================================= */

.customDemoBuilder{
  width:min(1180px, calc(100% - 36px));
  margin:0 auto 26px;
  display:grid;
  grid-template-columns:.9fr 1.4fr;
  gap:18px;
  align-items:stretch;
  padding:22px;
  border-radius:34px;
  background:
    radial-gradient(circle at top left, rgba(212,175,55,.13), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,.085), rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 26px 80px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.06);
}
.customDemoCopy em{
  display:block;
  color:#d4af37;
  font-style:normal;
  font-weight:1000;
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:.72rem;
}
.customDemoCopy h2{
  margin:10px 0 8px;
  font-size:clamp(1.8rem, 4vw, 3rem);
  line-height:.95;
  color:#fff;
}
.customDemoCopy p{
  margin:0;
  color:#94a3b8;
  line-height:1.6;
  font-weight:750;
}
.customDemoForm{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:10px;
}
.customDemoForm .input{
  margin:0;
  min-height:46px;
  border-radius:18px;
}
.customDemoForm .demoPhotoInput,
.customDemoForm button{
  grid-column:1 / -1;
}
.customDemoForm button{
  justify-content:center;
}

.cover-portrait-luxe .inviteHero{
  display:grid;
  grid-template-columns:minmax(260px, 410px) minmax(340px, 720px);
  gap:clamp(22px, 4vw, 52px);
  align-items:center;
  justify-content:center;
  padding:64px 26px;
}
.cover-portrait-luxe .inviteHero.hasHeroImage{
  background-image:
    radial-gradient(circle at 22% 16%, color-mix(in srgb, var(--event-primary) 18%, transparent), transparent 34%),
    linear-gradient(180deg, rgba(2,6,23,.72), rgba(2,6,23,.92)),
    var(--hero-desktop);
  background-size:cover;
  background-position:center;
}
.portraitLuxeFrame{
  position:relative;
  z-index:2;
  width:min(390px, 100%);
  aspect-ratio:3/4.35;
  border-radius:46px;
  padding:12px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--event-primary) 86%, #fff), rgba(255,255,255,.28), color-mix(in srgb, var(--event-primary) 52%, #7c3aed));
  box-shadow:0 36px 100px rgba(0,0,0,.42), 0 0 54px color-mix(in srgb, var(--event-primary) 22%, transparent);
  overflow:hidden;
}
.portraitLuxeFrame::before{
  content:"✦";
  position:absolute;
  left:50%;
  top:16px;
  transform:translateX(-50%);
  z-index:4;
  width:54px;
  height:54px;
  display:grid;
  place-items:center;
  border-radius:999px;
  color:#111827;
  font-weight:1000;
  background:linear-gradient(135deg, #fff6cf, var(--event-primary));
  box-shadow:0 18px 44px rgba(0,0,0,.28);
}
.portraitLuxeFrame::after{
  content:"";
  position:absolute;
  inset:24px;
  border-radius:34px;
  border:1px solid rgba(255,255,255,.26);
  pointer-events:none;
  z-index:3;
}
.portraitLuxeFrame img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
  border-radius:36px;
  filter:saturate(1.06) contrast(1.04);
}
.portraitLuxeFrame span{
  position:absolute;
  left:28px;
  right:28px;
  bottom:26px;
  z-index:4;
  display:block;
  padding:12px 16px;
  border-radius:999px;
  color:#fff;
  text-align:center;
  font-family:Playfair Display, serif;
  font-weight:800;
  font-size:clamp(1.2rem, 3vw, 1.9rem);
  line-height:1;
  background:linear-gradient(180deg, rgba(15,23,42,.42), rgba(15,23,42,.74));
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(12px);
}
.portraitLuxeGlow{
  position:absolute;
  inset:-20%;
  z-index:0;
  background:radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--event-primary) 42%, transparent), transparent 38%);
  pointer-events:none;
}
.cover-portrait-luxe .inviteCard{
  justify-self:center;
  align-self:center;
  background:rgba(2,6,23,.62);
  max-width:700px;
}
.cover-portrait-luxe .ornament{
  opacity:.22;
}
@media(max-width:980px){
  .customDemoBuilder{
    grid-template-columns:1fr;
  }
  .cover-portrait-luxe .inviteHero{
    grid-template-columns:1fr;
    padding:46px 18px;
  }
  .portraitLuxeFrame{
    width:min(330px, 86vw);
    margin:0 auto;
  }
}
@media(max-width:640px){
  .customDemoForm{
    grid-template-columns:1fr;
  }
  .portraitLuxeFrame{
    width:min(295px, 82vw);
    border-radius:36px;
  }
  .portraitLuxeFrame img{
    border-radius:28px;
  }
  .portraitLuxeFrame span{
    left:22px;
    right:22px;
    bottom:22px;
  }
}


/* =========================================================
   EventoQR.click V30.1
   Gallery Photo Manager + Public Availability Window
   ========================================================= */

.availabilityBlock{
  border-color:rgba(245,158,11,.20)!important;
  background:
    radial-gradient(circle at top left, rgba(245,158,11,.10), transparent 30%),
    rgba(255,255,255,.045);
}
.galleryManager{
  border-color:rgba(212,175,55,.20);
}
.galleryForm{
  display:grid;
  grid-template-columns:1.2fr .8fr 120px auto auto;
  gap:10px;
  align-items:end;
  margin-bottom:12px;
}
.galleryForm .input{
  margin:0;
}
.galleryUploadButton{
  min-height:44px;
  margin:0!important;
}
.galleryAdminGrid{
  display:grid;
  gap:12px;
  margin-top:16px;
}
.galleryAdminItem{
  display:grid;
  grid-template-columns:96px 1fr auto;
  gap:14px;
  align-items:center;
  border-radius:20px;
  background:rgba(2,6,23,.42);
  border:1px solid rgba(255,255,255,.10);
  padding:12px;
}
.galleryAdminItem img{
  width:96px;
  height:76px;
  object-fit:cover;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.14);
}
.galleryAdminItem strong,
.galleryAdminItem span,
.galleryAdminItem small{
  display:block;
}
.galleryAdminItem span{
  color:#d4af37;
  font-weight:900;
  font-size:.78rem;
}
.galleryAdminItem small{
  color:#94a3b8;
  word-break:break-all;
  margin-top:4px;
}
.galleryAdminItem button{
  border:1px solid rgba(248,113,113,.24);
  background:rgba(248,113,113,.10);
  color:#fecaca;
  border-radius:999px;
  min-height:36px;
  padding:0 14px;
  font-weight:900;
  cursor:pointer;
}
.availabilityClosed{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:24px;
  background:
    radial-gradient(circle at 18% 0%, rgba(212,175,55,.14), transparent 32%),
    linear-gradient(180deg,#020617,#0b1024);
  color:#fff;
}
.availabilityCard{
  width:min(560px,100%);
  text-align:center;
  border-radius:34px;
  padding:34px 24px;
  background:rgba(15,23,42,.78);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 34px 90px rgba(0,0,0,.38);
  backdrop-filter:blur(18px);
}
.availabilityCard img{
  width:min(240px,80vw);
  display:block;
  margin:0 auto 16px;
  filter:drop-shadow(0 18px 38px rgba(0,0,0,.32));
}
.availabilityCard em{
  color:#d4af37;
  font-style:normal;
  font-weight:1000;
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:.72rem;
}
.availabilityCard h1{
  margin:12px 0 10px;
  font-size:clamp(2rem,7vw,3.4rem);
  line-height:.95;
}
.availabilityCard p{
  color:#cbd5e1;
  line-height:1.65;
  font-size:1rem;
}
.availabilityCard span{
  display:block;
  margin:14px auto 22px;
  color:#f7e6ae;
  font-weight:900;
}
@media(max-width:980px){
  .galleryForm{
    grid-template-columns:1fr 1fr;
  }
  .galleryForm button,
  .galleryUploadButton{
    width:100%;
    justify-content:center;
  }
}
@media(max-width:680px){
  .galleryForm{
    grid-template-columns:1fr;
  }
  .galleryAdminItem{
    grid-template-columns:1fr;
  }
  .galleryAdminItem img{
    width:100%;
    height:190px;
  }
}


/* =========================================================
   EventoQR.click V30.1
   Delete demos/events from Admin Panel
   ========================================================= */

.softDanger{
  background:linear-gradient(135deg, rgba(127,29,29,.78), rgba(185,28,28,.92))!important;
  border-color:rgba(248,113,113,.34)!important;
  color:#fff!important;
  box-shadow:0 18px 44px rgba(127,29,29,.25)!important;
}
.softDanger:hover{
  transform:translateY(-2px);
  box-shadow:0 24px 60px rgba(127,29,29,.36)!important;
}


/* =========================================================
   EventoQR.click V30.1
   Admin-only personalized demo builder
   ========================================================= */

.adminDemoBuilder{
  width:min(1280px, calc(100% - 36px));
  margin:0 auto 18px;
  display:grid;
  grid-template-columns:.95fr 1.45fr;
  gap:18px;
  align-items:stretch;
  padding:22px;
  border-radius:34px;
  background:
    radial-gradient(circle at top left, rgba(212,175,55,.13), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,.085), rgba(255,255,255,.04));
  border:1px solid rgba(212,175,55,.18);
  box-shadow:0 26px 80px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.06);
}
.adminDemoActions{
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px;
}
.adminDemoActions .btn{
  justify-content:center;
}
@media(max-width:980px){
  .adminDemoBuilder{
    grid-template-columns:1fr;
  }
  .adminDemoActions{
    grid-template-columns:1fr;
  }
}


/* =========================================================
   EventoQR.click V30.1
   Demo Manager + visible admin select dropdown
   ========================================================= */

.adminDemoBuilder select.input,
.adminDemoBuilder select.input:focus{
  background:#302b44!important;
  color:#ffffff!important;
  border-color:rgba(212,175,55,.60)!important;
}
.adminDemoBuilder select.input option{
  background:#171426!important;
  color:#ffffff!important;
}
.adminDemoBuilder select.input option:checked,
.adminDemoBuilder select.input option:hover{
  background:#d4af37!important;
  color:#111827!important;
}

.adminDemoManager{
  width:min(1280px, calc(100% - 36px));
  margin:0 auto 18px;
  border-color:rgba(212,175,55,.18);
}
.demoManagerTools{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.demoManagerTools button{
  min-height:40px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.08);
  color:#e2e8f0;
  border-radius:999px;
  padding:0 14px;
  font-weight:900;
  cursor:pointer;
}
.demoManagerGrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}
.demoManagerGrid h3{
  margin:0 0 4px;
  color:#fff;
}
.demoManagerGrid p{
  margin:0 0 12px;
  color:#94a3b8;
  line-height:1.45;
  font-weight:750;
}
.demoManagerList{
  display:grid;
  gap:10px;
}
.demoManagerItem{
  display:grid;
  grid-template-columns:1fr auto;
  gap:12px;
  align-items:center;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(2,6,23,.38);
  border-radius:20px;
  padding:14px;
}
.demoManagerItem.active{
  border-color:rgba(212,175,55,.64);
  box-shadow:0 0 0 4px rgba(212,175,55,.10);
}
.demoManagerItem strong,
.demoManagerItem span,
.demoManagerItem small{
  display:block;
}
.demoManagerItem strong{
  color:#fff;
  font-size:.98rem;
}
.demoManagerItem span{
  color:#d4af37;
  font-weight:900;
  font-size:.78rem;
  margin-top:3px;
}
.demoManagerItem small{
  color:#94a3b8;
  margin-top:3px;
}
.demoManagerActions{
  display:flex;
  gap:7px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.demoManagerActions a,
.demoManagerActions button{
  min-height:34px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.08);
  color:#e2e8f0;
  border-radius:999px;
  padding:0 11px;
  font-size:.75rem;
  font-weight:900;
  text-decoration:none;
  display:inline-grid;
  place-items:center;
  cursor:pointer;
}
.demoManagerActions .dangerMini{
  background:rgba(185,28,28,.26);
  border-color:rgba(248,113,113,.32);
  color:#fecaca;
}
@media(max-width:980px){
  .demoManagerGrid{
    grid-template-columns:1fr;
  }
  .demoManagerItem{
    grid-template-columns:1fr;
  }
  .demoManagerActions{
    justify-content:flex-start;
  }
}


/* =========================================================
   EventoQR.click V30.1
   Protect public catalog demos
   ========================================================= */

.adminDemoManager .panelHead span{
  color:#f7e6ae!important;
}


/* =========================================================
   EventoQR.click V30.1
   Packages / Billing / Event Limits
   ========================================================= */

.billingBlock{
  border-color:rgba(34,197,94,.20)!important;
  background:
    radial-gradient(circle at top left, rgba(34,197,94,.11), transparent 30%),
    rgba(255,255,255,.045);
}
.packageSummary{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  margin-top:14px;
}
.packageSummary article{
  border-radius:22px;
  padding:16px;
  background:rgba(2,6,23,.42);
  border:1px solid rgba(255,255,255,.10);
}
.packageSummary article.paid{
  border-color:rgba(34,197,94,.32);
  background:linear-gradient(180deg,rgba(34,197,94,.13),rgba(2,6,23,.42));
}
.packageSummary article.pending{
  border-color:rgba(245,158,11,.30);
  background:linear-gradient(180deg,rgba(245,158,11,.12),rgba(2,6,23,.42));
}
.packageSummary span,
.packageSummary strong,
.packageSummary small{
  display:block;
}
.packageSummary span{
  color:#94a3b8;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.68rem;
  font-weight:1000;
}
.packageSummary strong{
  color:#fff;
  font-size:1.25rem;
  margin-top:5px;
}
.packageSummary small{
  color:#cbd5e1;
  margin-top:3px;
  font-weight:800;
}
.payBadge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:3px 8px;
  border-radius:999px;
  font-size:.68rem;
  line-height:1;
  text-transform:uppercase;
  letter-spacing:.08em;
  border:1px solid rgba(255,255,255,.12);
}
.payBadge.isPaid{
  color:#dcfce7;
  background:rgba(34,197,94,.16);
  border-color:rgba(34,197,94,.34);
}
.payBadge.isPending{
  color:#fef3c7;
  background:rgba(245,158,11,.16);
  border-color:rgba(245,158,11,.34);
}
.payBadge.isBad{
  color:#fecaca;
  background:rgba(239,68,68,.16);
  border-color:rgba(239,68,68,.34);
}
@media(max-width:980px){
  .packageSummary{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media(max-width:620px){
  .packageSummary{
    grid-template-columns:1fr;
  }
}


/* =========================================================
   EventoQR.click V36.20.3.3.2
   Hero Composition Polish — real HTML/CSS fix
   ========================================================= */

/* Give the hero more balance: text strong but not oversized, phone has breathing room */
.salesHero{
  grid-template-columns:minmax(0, .98fr) minmax(420px, .78fr)!important;
  gap:clamp(34px, 5vw, 86px)!important;
  align-items:center!important;
}
.salesHero h1{
  max-width:760px!important;
  font-size:clamp(4.25rem, 7.25vw, 7.65rem)!important;
  line-height:.82!important;
  letter-spacing:-.075em!important;
}
.salesHero p{
  max-width:760px!important;
}

/* Phone composition */
.salesDevice{
  width:min(560px, 100%)!important;
  min-height:650px!important;
  margin-left:auto!important;
  margin-right:auto!important;
  padding:0 70px!important;
  overflow:visible!important;
  isolation:isolate!important;
}
.phoneMock{
  position:relative!important;
  z-index:2!important;
  width:min(390px, 100%)!important;
  min-height:620px!important;
}
.phoneCard{
  position:relative!important;
  z-index:2!important;
}

/* Floating cards: orbit around the phone, not over important phone text */
.salesFloatCard{
  z-index:5!important;
  min-width:172px!important;
  max-width:205px!important;
  min-height:62px!important;
  padding:10px 12px!important;
  gap:10px!important;
  border-radius:19px!important;
  background:rgba(10,16,34,.88)!important;
  border:1px solid rgba(255,255,255,.16)!important;
  box-shadow:
    0 22px 60px rgba(0,0,0,.32),
    inset 0 1px 0 rgba(255,255,255,.08)!important;
}
.salesFloatCard b{
  flex:0 0 auto!important;
  width:40px!important;
  height:40px!important;
  border-radius:14px!important;
  font-size:.84rem!important;
}
.salesFloatCard span{
  display:block!important;
  color:#fff!important;
  font-size:.92rem!important;
  line-height:1.08!important;
  font-weight:1000!important;
  white-space:normal!important;
}
.salesFloatCard small{
  display:block!important;
  margin-top:4px!important;
  color:#aeb6ce!important;
  font-size:.72rem!important;
  line-height:1!important;
  font-weight:800!important;
}

/* Desktop final positions */
.salesFloatCard.one{
  left:18px!important;
  top:150px!important;
  transform:none!important;
}
.salesFloatCard.two{
  right:10px!important;
  bottom:112px!important;
  transform:none!important;
}

/* Wider desktops can push cards out a bit more for a luxury "orbit" feel */
@media (min-width: 1340px){
  .salesDevice{
    padding-left:86px!important;
    padding-right:92px!important;
  }
  .salesFloatCard.one{
    left:0!important;
    top:145px!important;
  }
  .salesFloatCard.two{
    right:-2px!important;
    bottom:108px!important;
  }
}

/* Medium screens: keep the cards visible but compact */
@media (max-width: 1180px){
  .salesHero{
    grid-template-columns:minmax(0, 1fr) minmax(360px, .82fr)!important;
    gap:34px!important;
  }
  .salesHero h1{
    font-size:clamp(3.55rem, 7.7vw, 5.8rem)!important;
  }
  .salesDevice{
    width:min(440px, 100%)!important;
    min-height:580px!important;
    padding:0 36px!important;
  }
  .phoneMock{
    width:min(340px, 100%)!important;
    min-height:550px!important;
  }
  .phoneCard{
    min-height:480px!important;
    padding:30px 20px!important;
  }
  .phoneCard h2{
    font-size:2.55rem!important;
  }
  .phoneCard h3{
    font-size:2.95rem!important;
  }
  .salesFloatCard{
    min-width:156px!important;
    max-width:174px!important;
    min-height:58px!important;
    padding:9px 10px!important;
  }
  .salesFloatCard b{
    width:36px!important;
    height:36px!important;
  }
  .salesFloatCard.one{
    left:0!important;
    top:120px!important;
  }
  .salesFloatCard.two{
    right:0!important;
    bottom:92px!important;
  }
}

/* Tablet/mobile: stack cleanly below the phone, no overlap */
@media (max-width: 900px){
  .salesHero{
    grid-template-columns:1fr!important;
  }
  .salesHero h1{
    max-width:100%!important;
    font-size:clamp(3rem, 13vw, 5rem)!important;
    letter-spacing:-.065em!important;
  }
  .salesDevice{
    width:min(430px, 100%)!important;
    min-height:auto!important;
    padding:0!important;
    display:block!important;
  }
  .phoneMock{
    margin:0 auto!important;
  }
  .salesFloatCard{
    position:relative!important;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    bottom:auto!important;
    width:100%!important;
    max-width:390px!important;
    margin:12px auto 0!important;
    transform:none!important;
  }
}

@media (max-width: 520px){
  .salesHero h1{
    font-size:clamp(2.7rem, 15vw, 4.15rem)!important;
  }
  .phoneMock{
    min-height:520px!important;
  }
  .phoneCard{
    min-height:445px!important;
  }
  .phoneCard h2{
    font-size:2.25rem!important;
  }
  .phoneCard h3{
    font-size:2.65rem!important;
  }
}


/* =========================================================
   EventoQR.click V36.20.3.3.2
   Hero Float Spacing Fix
   Objetivo: que RSVP y Entrada se sientan como orbit cards,
   no como elementos montados encima de la pantalla del teléfono.
   ========================================================= */

.salesDevice{
  width:min(660px, 100%)!important;
  padding-left:135px!important;
  padding-right:135px!important;
}

.phoneMock{
  margin-left:auto!important;
  margin-right:auto!important;
}

/* Move cards clearly OUTSIDE the phone boundaries */
.salesFloatCard.one{
  left:-118px!important;
  top:132px!important;
}

.salesFloatCard.two{
  right:-128px!important;
  bottom:84px!important;
}

/* Slightly calmer badges so they do not compete with phone content */
.salesFloatCard{
  min-width:164px!important;
  max-width:188px!important;
  min-height:58px!important;
  padding:9px 11px!important;
  border-radius:18px!important;
  box-shadow:
    0 18px 44px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.08)!important;
}

.salesFloatCard b{
  width:36px!important;
  height:36px!important;
  border-radius:13px!important;
}

.salesFloatCard span{
  font-size:.86rem!important;
  line-height:1.1!important;
}

.salesFloatCard small{
  font-size:.68rem!important;
  opacity:.9!important;
}

/* Large desktop: more breathing room */
@media (min-width: 1400px){
  .salesDevice{
    width:min(700px, 100%)!important;
    padding-left:150px!important;
    padding-right:150px!important;
  }
  .salesFloatCard.one{
    left:-135px!important;
    top:136px!important;
  }
  .salesFloatCard.two{
    right:-145px!important;
    bottom:88px!important;
  }
}

/* Medium desktop: avoid overlapping the phone by using side positions */
@media (max-width: 1180px){
  .salesDevice{
    width:min(520px, 100%)!important;
    padding-left:86px!important;
    padding-right:86px!important;
  }
  .salesFloatCard{
    min-width:148px!important;
    max-width:166px!important;
    min-height:54px!important;
    padding:8px 10px!important;
  }
  .salesFloatCard b{
    width:34px!important;
    height:34px!important;
  }
  .salesFloatCard span{
    font-size:.80rem!important;
  }
  .salesFloatCard small{
    font-size:.64rem!important;
  }
  .salesFloatCard.one{
    left:-68px!important;
    top:108px!important;
  }
  .salesFloatCard.two{
    right:-72px!important;
    bottom:72px!important;
  }
}

/* Once stacked, cards become normal blocks below the phone */
@media (max-width: 900px){
  .salesDevice{
    width:min(430px, 100%)!important;
    padding-left:0!important;
    padding-right:0!important;
  }
  .salesFloatCard{
    position:relative!important;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    bottom:auto!important;
    width:100%!important;
    max-width:390px!important;
    margin:12px auto 0!important;
  }
}


/* =========================================================
   EventoQR.click V36.20.3.3.2
   Hero Mockup Recenter Fix
   Objetivo:
   - Quitar sensación de tarjetas flotando en el espacio.
   - Regresar el teléfono a una proporción premium.
   - Mantener las tarjetas cerca del mockup sin tapar información importante.
   ========================================================= */

.salesHero{
  grid-template-columns:minmax(0,.95fr) minmax(500px,.9fr)!important;
  gap:clamp(38px,5vw,78px)!important;
  align-items:center!important;
}

.salesHero h1{
  font-size:clamp(4.45rem,7.55vw,7.95rem)!important;
  line-height:.82!important;
  letter-spacing:-.072em!important;
  max-width:780px!important;
}

/* Rebuild the mockup stage */
.salesDevice{
  width:min(560px,100%)!important;
  min-height:650px!important;
  margin:0 auto!important;
  padding:0!important;
  display:grid!important;
  place-items:center!important;
  position:relative!important;
  overflow:visible!important;
  isolation:isolate!important;
}

/* Phone gets its premium width back */
.phoneMock{
  width:410px!important;
  max-width:100%!important;
  min-height:635px!important;
  padding:18px!important;
  border-radius:56px!important;
  position:relative!important;
  z-index:2!important;
  margin:0 auto!important;
  background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.055))!important;
  border:1px solid rgba(255,255,255,.16)!important;
  box-shadow:
    0 42px 130px rgba(0,0,0,.34),
    0 0 42px rgba(124,58,237,.12),
    inset 0 1px 0 rgba(255,255,255,.12)!important;
}

.phoneTop{
  width:112px!important;
  height:26px!important;
  margin:0 auto 16px!important;
}

.phoneCard{
  min-height:542px!important;
  padding:32px 24px!important;
  border-radius:42px!important;
  justify-content:center!important;
}

.phoneCard span{
  font-size:.66rem!important;
  min-height:30px!important;
  padding:0 12px!important;
}

.phoneCard h2{
  font-size:3rem!important;
  line-height:.9!important;
  margin-top:14px!important;
}

.phoneCard h3{
  font-size:3.4rem!important;
  line-height:1!important;
  margin-top:8px!important;
}

.phoneCard p{
  font-size:1rem!important;
  line-height:1.25!important;
}

.phonePass{
  margin:16px 0!important;
  padding:16px!important;
  border-radius:22px!important;
}

.phoneCountdown{
  gap:8px!important;
}

.phoneCountdown i{
  min-height:58px!important;
  border-radius:16px!important;
}

/* Cards: close to the phone edge, not lost in space */
.salesFloatCard{
  min-width:170px!important;
  max-width:198px!important;
  min-height:60px!important;
  padding:10px 12px!important;
  gap:10px!important;
  border-radius:19px!important;
  background:rgba(10,16,34,.90)!important;
  border:1px solid rgba(255,255,255,.16)!important;
  box-shadow:
    0 22px 58px rgba(0,0,0,.32),
    0 0 26px rgba(124,58,237,.14),
    inset 0 1px 0 rgba(255,255,255,.08)!important;
  backdrop-filter:blur(18px)!important;
}

.salesFloatCard b{
  width:38px!important;
  height:38px!important;
  border-radius:14px!important;
  font-size:.82rem!important;
}

.salesFloatCard span{
  font-size:.86rem!important;
  line-height:1.08!important;
  white-space:normal!important;
}

.salesFloatCard small{
  display:block!important;
  margin-top:4px!important;
  font-size:.66rem!important;
  line-height:1!important;
  color:#aeb6ce!important;
  font-weight:800!important;
}

/* Final desktop placement:
   They sit on the OUTER edge of the phone, but visually attached to it. */
.salesFloatCard.one{
  left:18px!important;
  top:168px!important;
  transform:translateX(-26%)!important;
}

.salesFloatCard.two{
  right:18px!important;
  bottom:98px!important;
  transform:translateX(26%)!important;
}

/* Big desktop: slightly more elegant overlap with outer frame only */
@media (min-width:1400px){
  .salesDevice{
    width:min(600px,100%)!important;
  }
  .salesFloatCard.one{
    left:20px!important;
    top:170px!important;
    transform:translateX(-32%)!important;
  }
  .salesFloatCard.two{
    right:20px!important;
    bottom:100px!important;
    transform:translateX(32%)!important;
  }
}

/* Medium desktop: phone stays premium; cards become smaller but not far away */
@media (max-width:1180px){
  .salesHero{
    grid-template-columns:minmax(0,1fr) minmax(400px,.85fr)!important;
    gap:32px!important;
  }
  .salesHero h1{
    font-size:clamp(3.65rem,7.4vw,5.9rem)!important;
  }
  .salesDevice{
    width:min(470px,100%)!important;
    min-height:590px!important;
  }
  .phoneMock{
    width:350px!important;
    min-height:565px!important;
  }
  .phoneCard{
    min-height:480px!important;
    padding:28px 20px!important;
  }
  .phoneCard h2{font-size:2.55rem!important;}
  .phoneCard h3{font-size:2.95rem!important;}
  .salesFloatCard{
    min-width:150px!important;
    max-width:168px!important;
    min-height:54px!important;
    padding:8px 10px!important;
  }
  .salesFloatCard b{
    width:34px!important;
    height:34px!important;
  }
  .salesFloatCard span{
    font-size:.78rem!important;
  }
  .salesFloatCard small{
    font-size:.62rem!important;
  }
  .salesFloatCard.one{
    left:10px!important;
    top:130px!important;
    transform:translateX(-20%)!important;
  }
  .salesFloatCard.two{
    right:10px!important;
    bottom:82px!important;
    transform:translateX(20%)!important;
  }
}

/* Tablet / mobile: no absolute overlap */
@media (max-width:900px){
  .salesHero{
    grid-template-columns:1fr!important;
  }
  .salesHero h1{
    font-size:clamp(3rem,13vw,5rem)!important;
  }
  .salesDevice{
    width:min(430px,100%)!important;
    min-height:auto!important;
    display:block!important;
  }
  .phoneMock{
    width:min(390px,100%)!important;
    margin:0 auto!important;
  }
  .salesFloatCard{
    position:relative!important;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    bottom:auto!important;
    transform:none!important;
    width:100%!important;
    max-width:390px!important;
    margin:12px auto 0!important;
  }
}

@media (max-width:520px){
  .phoneMock{
    width:min(360px,100%)!important;
    min-height:540px!important;
  }
  .phoneCard{
    min-height:458px!important;
    padding:26px 18px!important;
  }
}


/* =========================================================
   EventoQR.click V36.20.3.3.2
   Hero Clean Dock Fix
   Objetivo:
   - Quitar tarjetas flotantes encima/alrededor del teléfono.
   - El mockup vuelve limpio y premium.
   - Los "badges" quedan en una dock ordenada debajo del teléfono.
   - El headline baja tamaño para que los CTA no queden cortados.
   ========================================================= */

.salesHero{
  min-height:auto!important;
  padding:clamp(44px,6vw,78px) 0 clamp(38px,5vw,62px)!important;
  grid-template-columns:minmax(0, .98fr) minmax(420px, .78fr)!important;
  gap:clamp(34px,5vw,78px)!important;
  align-items:center!important;
}

.salesHeroCopy{
  align-self:center!important;
}

.salesHero h1{
  max-width:760px!important;
  margin:16px 0 18px!important;
  font-size:clamp(3.85rem,6.25vw,6.65rem)!important;
  line-height:.9!important;
  letter-spacing:-.062em!important;
}

.salesHero p{
  max-width:720px!important;
  font-size:clamp(.98rem,1.2vw,1.08rem)!important;
  line-height:1.55!important;
}

.salesHeroActions{
  margin-top:22px!important;
  position:relative!important;
  z-index:3!important;
}

/* Phone area becomes a clean vertical composition */
.salesDevice{
  width:min(460px,100%)!important;
  min-height:auto!important;
  margin:0 auto!important;
  padding:0!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:16px!important;
  position:relative!important;
  overflow:visible!important;
  isolation:isolate!important;
}

/* Clean premium phone, no weird stretched/narrow effect */
.phoneMock{
  width:min(390px,100%)!important;
  min-height:620px!important;
  padding:18px!important;
  border-radius:54px!important;
  margin:0 auto!important;
  position:relative!important;
  z-index:2!important;
  background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.05))!important;
  border:1px solid rgba(255,255,255,.14)!important;
  box-shadow:
    0 38px 115px rgba(0,0,0,.34),
    0 0 38px rgba(124,58,237,.10),
    inset 0 1px 0 rgba(255,255,255,.10)!important;
}

.phoneTop{
  width:112px!important;
  height:26px!important;
  margin:0 auto 16px!important;
  border-radius:999px!important;
}

.phoneCard{
  min-height:540px!important;
  padding:32px 24px!important;
  border-radius:42px!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  text-align:center!important;
}

.phoneCard h2{
  font-size:3rem!important;
  line-height:.9!important;
  margin:14px 0 0!important;
}

.phoneCard h3{
  font-size:3.4rem!important;
  line-height:1!important;
  margin:8px 0 0!important;
}

/* Badge dock: badges are no longer floating in space or covering the phone */
.salesBadgeDock{
  width:min(390px,100%)!important;
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:12px!important;
  margin:0 auto!important;
  position:relative!important;
  z-index:3!important;
}

.salesBadgeDock .salesFloatCard,
.salesFloatCard.one,
.salesFloatCard.two{
  position:static!important;
  left:auto!important;
  right:auto!important;
  top:auto!important;
  bottom:auto!important;
  transform:none!important;
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  min-height:62px!important;
  margin:0!important;
  padding:10px 12px!important;
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  border-radius:18px!important;
  background:rgba(10,16,34,.86)!important;
  border:1px solid rgba(255,255,255,.14)!important;
  box-shadow:
    0 18px 44px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.08)!important;
  backdrop-filter:blur(16px)!important;
}

.salesBadgeDock .salesFloatCard b{
  flex:0 0 36px!important;
  width:36px!important;
  height:36px!important;
  border-radius:13px!important;
  font-size:.78rem!important;
}

.salesBadgeDock .salesFloatCard span{
  display:block!important;
  min-width:0!important;
  color:#fff!important;
  font-size:.80rem!important;
  line-height:1.08!important;
  font-weight:1000!important;
}

.salesBadgeDock .salesFloatCard small{
  display:block!important;
  margin-top:4px!important;
  color:#aeb6ce!important;
  font-size:.62rem!important;
  line-height:1!important;
  font-weight:800!important;
}

/* Medium desktop */
@media (max-width:1180px){
  .salesHero{
    grid-template-columns:minmax(0,1fr) minmax(360px,.82fr)!important;
    gap:32px!important;
  }
  .salesHero h1{
    font-size:clamp(3.2rem,6.8vw,5.65rem)!important;
    line-height:.9!important;
  }
  .salesDevice{
    width:min(400px,100%)!important;
  }
  .phoneMock{
    width:min(350px,100%)!important;
    min-height:565px!important;
  }
  .phoneCard{
    min-height:482px!important;
    padding:28px 20px!important;
  }
  .phoneCard h2{
    font-size:2.55rem!important;
  }
  .phoneCard h3{
    font-size:2.95rem!important;
  }
  .salesBadgeDock{
    width:min(350px,100%)!important;
  }
  .salesBadgeDock .salesFloatCard{
    min-height:58px!important;
    padding:9px 10px!important;
  }
  .salesBadgeDock .salesFloatCard b{
    flex-basis:34px!important;
    width:34px!important;
    height:34px!important;
  }
}

/* Tablet and mobile: stack naturally and keep buttons visible */
@media (max-width:900px){
  .salesHero{
    grid-template-columns:1fr!important;
    padding-top:40px!important;
  }
  .salesHero h1{
    max-width:100%!important;
    font-size:clamp(3rem,12.5vw,5rem)!important;
  }
  .salesDevice{
    width:min(430px,100%)!important;
  }
  .phoneMock{
    width:min(390px,100%)!important;
  }
}

@media (max-width:520px){
  .salesHero h1{
    font-size:clamp(2.75rem,14.5vw,4.25rem)!important;
  }
  .phoneMock{
    width:min(355px,100%)!important;
    min-height:535px!important;
  }
  .phoneCard{
    min-height:452px!important;
    padding:24px 18px!important;
  }
  .phoneCard h2{
    font-size:2.25rem!important;
  }
  .phoneCard h3{
    font-size:2.65rem!important;
  }
  .salesBadgeDock{
    grid-template-columns:1fr!important;
    width:min(355px,100%)!important;
  }
}


/* =========================================================
   EventoQR.click V36.20.3.3.2
   Hero Integrated Phone Status Fix
   Objetivo:
   - Nada flotando afuera.
   - Nada montado sobre el mockup.
   - RSVP y Entrada viven dentro del teléfono como status pills.
   ========================================================= */

/* Hero balance */
.salesHero{
  grid-template-columns:minmax(0, .98fr) minmax(420px, .78fr)!important;
  gap:clamp(36px,5vw,78px)!important;
  align-items:center!important;
  padding:clamp(44px,6vw,76px) 0 clamp(38px,5vw,62px)!important;
}

.salesHero h1{
  max-width:760px!important;
  margin:16px 0 18px!important;
  font-size:clamp(3.85rem,6.25vw,6.65rem)!important;
  line-height:.9!important;
  letter-spacing:-.062em!important;
}

.salesHero p{
  max-width:720px!important;
  line-height:1.55!important;
}

/* Clean phone stage */
.salesDevice{
  width:min(450px,100%)!important;
  min-height:auto!important;
  margin:0 auto!important;
  padding:0!important;
  display:grid!important;
  place-items:center!important;
  position:relative!important;
  overflow:visible!important;
}

.phoneMock{
  width:min(390px,100%)!important;
  min-height:620px!important;
  padding:18px!important;
  border-radius:54px!important;
  margin:0 auto!important;
  background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.05))!important;
  border:1px solid rgba(255,255,255,.14)!important;
  box-shadow:
    0 38px 115px rgba(0,0,0,.34),
    0 0 38px rgba(124,58,237,.10),
    inset 0 1px 0 rgba(255,255,255,.10)!important;
}

.phoneCard{
  min-height:540px!important;
  padding:30px 22px!important;
  border-radius:42px!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  text-align:center!important;
}

.phoneCard h2{
  font-size:2.86rem!important;
  line-height:.9!important;
  margin:12px 0 0!important;
}

.phoneCard h3{
  font-size:3.2rem!important;
  line-height:1!important;
  margin:8px 0 0!important;
}

.phoneCard p{
  margin:14px 0 0!important;
}

.phonePass{
  margin:16px 0 12px!important;
}

/* Integrated status pills inside the phone */
.phoneStatusRow{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:8px!important;
  margin-top:12px!important;
}

.phoneStatusRow span{
  min-height:40px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:6px!important;
  padding:7px 8px!important;
  border-radius:14px!important;
  background:rgba(255,255,255,.075)!important;
  border:1px solid rgba(255,255,255,.12)!important;
  color:#fff!important;
  font-size:.70rem!important;
  line-height:1.05!important;
  letter-spacing:0!important;
  text-transform:none!important;
  font-weight:900!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06)!important;
}

.phoneStatusRow b{
  flex:0 0 auto!important;
  width:24px!important;
  height:24px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:9px!important;
  background:linear-gradient(135deg,#d4af37,#7c3aed)!important;
  color:#fff!important;
  font-size:.62rem!important;
  line-height:1!important;
}

/* Remove any external badge/dock leftovers */
.salesBadgeDock,
.salesFloatCard{
  display:none!important;
}

/* Medium desktop */
@media (max-width:1180px){
  .salesHero{
    grid-template-columns:minmax(0,1fr) minmax(360px,.82fr)!important;
  }
  .salesHero h1{
    font-size:clamp(3.2rem,6.8vw,5.65rem)!important;
  }
  .salesDevice{
    width:min(400px,100%)!important;
  }
  .phoneMock{
    width:min(350px,100%)!important;
    min-height:565px!important;
  }
  .phoneCard{
    min-height:482px!important;
    padding:26px 18px!important;
  }
  .phoneCard h2{
    font-size:2.45rem!important;
  }
  .phoneCard h3{
    font-size:2.82rem!important;
  }
  .phoneStatusRow span{
    font-size:.64rem!important;
    min-height:38px!important;
    padding:6px!important;
  }
  .phoneStatusRow b{
    width:22px!important;
    height:22px!important;
  }
}

/* Tablet/mobile */
@media (max-width:900px){
  .salesHero{
    grid-template-columns:1fr!important;
  }
  .salesHero h1{
    max-width:100%!important;
    font-size:clamp(3rem,12.5vw,5rem)!important;
  }
  .salesDevice{
    width:min(430px,100%)!important;
  }
  .phoneMock{
    width:min(390px,100%)!important;
  }
}

@media (max-width:520px){
  .salesHero h1{
    font-size:clamp(2.75rem,14.5vw,4.25rem)!important;
  }
  .phoneMock{
    width:min(355px,100%)!important;
    min-height:535px!important;
  }
  .phoneCard{
    min-height:452px!important;
    padding:24px 16px!important;
  }
  .phoneCard h2{
    font-size:2.15rem!important;
  }
  .phoneCard h3{
    font-size:2.5rem!important;
  }
  .phoneStatusRow{
    grid-template-columns:1fr!important;
  }
}


/* =========================================================
   EventoQR.click V36.20.3.3.2
   Event Creation Wizard
   ========================================================= */

.eventWizard{
  width:min(1280px, calc(100% - 36px));
  margin:0 auto 18px;
  padding:22px;
  border-color:rgba(212,175,55,.22)!important;
  background:
    radial-gradient(circle at top left, rgba(212,175,55,.13), transparent 30%),
    radial-gradient(circle at top right, rgba(124,58,237,.14), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,.080), rgba(255,255,255,.035));
}
.wizardTop{
  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:flex-start;
  margin-bottom:16px;
}
.wizardTop em{
  display:inline-flex;
  color:#d4af37;
  text-transform:uppercase;
  letter-spacing:.16em;
  font-style:normal;
  font-size:.72rem;
  font-weight:1000;
}
.wizardTop h2{
  margin:8px 0 4px;
  color:#fff;
  font-size:clamp(1.8rem, 4vw, 3.2rem);
  line-height:.95;
}
.wizardTop p{
  margin:0;
  max-width:760px;
  color:#94a3b8;
  line-height:1.55;
  font-weight:750;
}
.wizardScore{
  flex:0 0 auto;
  min-width:112px;
  min-height:92px;
  display:grid;
  place-items:center;
  text-align:center;
  border-radius:26px;
  background:rgba(2,6,23,.38);
  border:1px solid rgba(255,255,255,.12);
}
.wizardScore span{
  display:block;
  color:#fff;
  font-size:2rem;
  font-weight:1000;
  line-height:1;
}
.wizardScore small{
  color:#d4af37;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-weight:1000;
}
.wizardProgress{
  height:12px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  margin-bottom:16px;
}
.wizardProgress i{
  display:block;
  height:100%;
  width:0%;
  border-radius:999px;
  background:linear-gradient(90deg,#22c55e,#d4af37,#7c3aed);
  transition:width .25s ease;
}
.wizardSteps{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:10px;
}
.wizardSteps button{
  text-align:left;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(2,6,23,.34);
  color:#e5edf8;
  border-radius:22px;
  padding:14px;
  cursor:pointer;
  min-height:126px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045);
}
.wizardSteps button b,
.wizardSteps button strong,
.wizardSteps button span,
.wizardSteps button small{
  display:block;
}
.wizardSteps button b{
  color:#d4af37;
  font-size:.72rem;
  letter-spacing:.16em;
}
.wizardSteps button strong{
  color:#fff;
  margin-top:8px;
  font-size:1.02rem;
}
.wizardSteps button span{
  color:#94a3b8;
  margin-top:5px;
  line-height:1.35;
  font-size:.82rem;
  font-weight:750;
}
.wizardSteps button small{
  margin-top:10px;
  color:#cbd5e1;
  font-size:.75rem;
  font-weight:900;
}
.wizardSteps button.active{
  border-color:rgba(212,175,55,.64);
  background:linear-gradient(180deg, rgba(212,175,55,.16), rgba(2,6,23,.34));
  box-shadow:0 0 0 4px rgba(212,175,55,.10), inset 0 1px 0 rgba(255,255,255,.08);
}
.wizardSteps button.done{
  border-color:rgba(34,197,94,.36);
}
.wizardSteps button.done small{
  color:#bbf7d0;
}
.wizardSteps button.warning{
  border-color:rgba(245,158,11,.34);
}
.wizardSteps button.warning small{
  color:#fef3c7;
}
.wizardActions{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:10px;
  margin-top:16px;
}
.wizardActions button{
  min-height:42px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.08);
  color:#e2e8f0;
  border-radius:999px;
  padding:0 16px;
  font-weight:1000;
  cursor:pointer;
}
.wizardActions button.primary{
  background:linear-gradient(135deg,#d4af37,#7c3aed);
  border-color:transparent;
  color:#fff;
}
.wizardFocus{
  outline:3px solid rgba(212,175,55,.78)!important;
  box-shadow:0 0 0 8px rgba(212,175,55,.13), 0 24px 80px rgba(0,0,0,.28)!important;
  transition:box-shadow .18s ease, outline .18s ease;
}
@media(max-width:1100px){
  .wizardSteps{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media(max-width:760px){
  .wizardTop{
    flex-direction:column;
  }
  .wizardScore{
    width:100%;
    min-height:70px;
  }
  .wizardSteps{
    grid-template-columns:1fr;
  }
  .wizardActions{
    justify-content:stretch;
  }
  .wizardActions button{
    width:100%;
  }
}


/* =========================================================
   EventoQR.click V36.20.3.3.2
   Invitados Pro — CSV Import / Edit / Delete / Re-send
   ========================================================= */

.hiddenFile{
  display:none!important;
}
.guestProHint{
  display:block;
  margin-top:12px;
  color:#94a3b8;
}
.waTools{
  align-items:center;
}
.waTools button{
  white-space:nowrap;
}
.guestForm{
  grid-template-columns:repeat(8,minmax(0,1fr)) auto auto!important;
}
#cancelGuestEditBtn.hidden{
  display:none!important;
}
#cancelGuestEditBtn{
  border-color:rgba(248,113,113,.24)!important;
  background:rgba(248,113,113,.10)!important;
  color:#fecaca!important;
}
.guestItem{
  align-items:flex-start!important;
}
.guestMain{
  min-width:220px;
}
.guestActions{
  flex-wrap:wrap!important;
  justify-content:flex-end;
  max-width:760px;
}
.guestActions .dangerMini,
.guestActions button.dangerMini{
  background:rgba(185,28,28,.26)!important;
  border-color:rgba(248,113,113,.32)!important;
  color:#fecaca!important;
}
.guestActions [data-edit-guest]{
  background:rgba(212,175,55,.12)!important;
  border-color:rgba(212,175,55,.34)!important;
  color:#f7e6ae!important;
}
.guestActions [data-confirm-guest]{
  background:rgba(34,197,94,.13)!important;
  border-color:rgba(34,197,94,.30)!important;
  color:#bbf7d0!important;
}
.guestActions [data-decline-guest]{
  background:rgba(245,158,11,.12)!important;
  border-color:rgba(245,158,11,.28)!important;
  color:#fde68a!important;
}
@media(max-width:1200px){
  .guestForm{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  .guestForm button{
    width:100%;
  }
}
@media(max-width:760px){
  .guestForm{
    grid-template-columns:1fr!important;
  }
  .guestItem{
    display:grid!important;
    grid-template-columns:1fr!important;
  }
  .guestActions{
    justify-content:flex-start;
    max-width:none;
  }
  .waTools{
    display:grid!important;
    grid-template-columns:1fr!important;
  }
}


/* =========================================================
   EventoQR.click V36.20.3.3.2
   Media Manager
   ========================================================= */

.mediaManager{
  border-color:rgba(14,165,233,.22)!important;
  background:
    radial-gradient(circle at top left, rgba(14,165,233,.12), transparent 32%),
    rgba(15,23,42,.72);
}
.mediaManagerHead{
  align-items:flex-start;
}
.mediaManagerTools{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.mediaManagerTools button{
  min-height:40px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.08);
  color:#e2e8f0;
  border-radius:999px;
  padding:0 14px;
  font-weight:900;
  cursor:pointer;
}
.mediaManagerForm{
  display:grid;
  grid-template-columns:220px 1fr auto auto;
  gap:10px;
  align-items:end;
}
.mediaManagerForm .input{
  margin:0;
}
.mediaUploadButton{
  min-height:44px;
  margin:0!important;
  white-space:nowrap;
}
.mediaHint{
  display:block;
  margin:12px 0;
  color:#94a3b8;
}
.mediaDropZone{
  display:grid;
  place-items:center;
  min-height:92px;
  border:1px dashed rgba(14,165,233,.42);
  border-radius:24px;
  color:#bae6fd;
  background:rgba(14,165,233,.07);
  font-weight:900;
  margin:12px 0 16px;
  transition:.18s ease;
}
.mediaDropZone.active{
  border-color:rgba(212,175,55,.72);
  background:rgba(212,175,55,.10);
  color:#f7e6ae;
  transform:scale(1.01);
}
.mediaGrid{
  display:grid;
  gap:12px;
}
.mediaItem{
  display:grid;
  grid-template-columns:110px 1fr auto;
  gap:14px;
  align-items:center;
  padding:12px;
  border-radius:22px;
  background:rgba(2,6,23,.42);
  border:1px solid rgba(255,255,255,.10);
}
.mediaPreview{
  width:110px;
  height:84px;
  border-radius:18px;
  overflow:hidden;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  display:grid;
  place-items:center;
}
.mediaPreview img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.mediaIcon{
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
  color:#d4af37;
  font-weight:1000;
  letter-spacing:.12em;
}
.mediaMeta strong,
.mediaMeta span,
.mediaMeta small{
  display:block;
}
.mediaMeta strong{
  color:#fff;
}
.mediaMeta span{
  color:#d4af37;
  font-weight:900;
  font-size:.78rem;
  margin-top:3px;
}
.mediaMeta small{
  color:#94a3b8;
  word-break:break-all;
  margin-top:4px;
}
.mediaActions{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:8px;
  max-width:460px;
}
.mediaActions a,
.mediaActions button{
  min-height:34px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.08);
  color:#e2e8f0;
  border-radius:999px;
  padding:0 11px;
  font-size:.75rem;
  font-weight:900;
  text-decoration:none;
  display:inline-grid;
  place-items:center;
  cursor:pointer;
}
.mediaActions .dangerMini,
.mediaActions button.dangerMini{
  background:rgba(185,28,28,.26)!important;
  border-color:rgba(248,113,113,.32)!important;
  color:#fecaca!important;
}
@media(max-width:980px){
  .mediaManagerForm{
    grid-template-columns:1fr;
  }
  .mediaItem{
    grid-template-columns:1fr;
  }
  .mediaPreview{
    width:100%;
    height:190px;
  }
  .mediaActions{
    justify-content:flex-start;
    max-width:none;
  }
}


/* =========================================================
   EventoQR.click V36.20.3.3.2
   Wedding Editorial Ivory Template
   ========================================================= */

/* Admin/catalog theme helpers */
.themePreset.ivory{
  background:linear-gradient(135deg,#fffaf0,#d7c3a1)!important;
  color:#2b2520!important;
  border-color:rgba(167,139,95,.45)!important;
}
.templateCardPick.theme-editorial-ivory,
.catalogCard.theme-editorial-ivory .catalogPreview,
.previewCard.theme-editorial-ivory{
  background:
    radial-gradient(circle at 20% 0%, rgba(255,255,255,.80), transparent 32%),
    linear-gradient(135deg,#fffaf0,#f3eadc 54%,#e7dccb)!important;
  color:#2b2520!important;
  border-color:rgba(167,139,95,.34)!important;
}
.templateCardPick.theme-editorial-ivory .templateKicker,
.catalogCard.theme-editorial-ivory .catalogPreviewTop span,
.previewCard.theme-editorial-ivory span{
  color:#2b2520!important;
  background:rgba(167,139,95,.18)!important;
}
.catalogCard.theme-editorial-ivory .catalogPreviewTop b,
.catalogCard.theme-editorial-ivory .catalogPreview p{
  color:#7a6a53!important;
}
.catalogCard.theme-editorial-ivory .catalogPreview h2,
.previewCard.theme-editorial-ivory h2,
.previewCard.theme-editorial-ivory h3{
  color:#2b2520!important;
}

/* Public invitation — editorial paper style */
.tpl-wedding-editorial-ivory{
  --event-bg:#f8f1e7;
  --event-text:#2b2520;
  --event-primary:#a78b5f;
  --event-secondary:#f7efe3;
}
.tpl-wedding-editorial-ivory.invitePage{
  color:#2b2520!important;
  background:
    radial-gradient(circle at 10% 0%, rgba(255,255,255,.78), transparent 28%),
    radial-gradient(circle at 100% 20%, rgba(167,139,95,.12), transparent 26%),
    linear-gradient(180deg,#fffaf0,#f4eadc 48%,#e7dccb)!important;
}
.tpl-wedding-editorial-ivory .inviteShell{
  width:min(980px, calc(100% - 18px));
}
.tpl-wedding-editorial-ivory .openInviteGate{
  background:
    radial-gradient(circle at top, rgba(255,250,240,.92), transparent 34%),
    linear-gradient(180deg,#fffaf0,#e7dccb)!important;
}
.tpl-wedding-editorial-ivory .envelopeStage{
  color:#2b2520!important;
}
.tpl-wedding-editorial-ivory .envelopeStage strong{
  font-family:"Cormorant Garamond","Playfair Display",serif!important;
  color:#2b2520!important;
}
.tpl-wedding-editorial-ivory .envelopeSeal{
  background:linear-gradient(135deg,#a78b5f,#d7c3a1)!important;
  color:#fffaf0!important;
}
.tpl-wedding-editorial-ivory .inviteHero.layout-editorial{
  min-height:100vh;
  padding:28px 0 42px;
  background-image:
    linear-gradient(rgba(248,241,231,.70), rgba(248,241,231,.88)),
    var(--hero-desktop)!important;
  background-size:cover!important;
  background-position:center!important;
}
.tpl-wedding-editorial-ivory .inviteHero.layout-editorial::before,
.tpl-wedding-editorial-ivory .inviteHero.layout-editorial::after{
  content:"";
  position:absolute;
  width:190px;
  height:190px;
  opacity:.20;
  pointer-events:none;
  background:
    radial-gradient(circle at center, transparent 54%, rgba(167,139,95,.42) 55%, transparent 57%),
    linear-gradient(40deg, transparent 48%, rgba(167,139,95,.38) 49%, transparent 52%);
}
.tpl-wedding-editorial-ivory .inviteHero.layout-editorial::before{
  left:8px;
  bottom:18px;
  transform:rotate(-14deg);
}
.tpl-wedding-editorial-ivory .inviteHero.layout-editorial::after{
  right:8px;
  top:24px;
  transform:rotate(18deg);
}
.tpl-wedding-editorial-ivory .heroPhotoLayer{
  display:none!important;
}
.tpl-wedding-editorial-ivory .ornament{
  border-color:rgba(167,139,95,.20)!important;
  opacity:.25!important;
}
.tpl-wedding-editorial-ivory .premiumHeroCard{
  max-width:640px!important;
  padding:34px 24px 40px!important;
  border-radius:34px!important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.84), rgba(255,250,240,.78)),
    url("/img/backgrounds/wedding-editorial-ivory.svg") center/cover!important;
  border:1px solid rgba(167,139,95,.22)!important;
  box-shadow:
    0 24px 70px rgba(78,57,28,.12),
    inset 0 0 0 1px rgba(255,255,255,.72)!important;
  backdrop-filter:blur(6px);
}
.tpl-wedding-editorial-ivory.cover-full-photo .premiumHeroCard{
  max-width:650px!important;
}
.tpl-wedding-editorial-ivory.cover-full-photo.hasHeroImage .premiumHeroCard::before,
.tpl-wedding-editorial-ivory .inviteHero.hasHeroImage .premiumHeroCard::before{
  content:"";
  display:block;
  width:min(420px, 100%);
  height:280px;
  margin:0 auto 22px;
  border-radius:28px 28px 12px 12px;
  background-image:var(--hero-desktop);
  background-size:cover;
  background-position:center;
  border:1px solid rgba(167,139,95,.20);
  box-shadow:0 18px 44px rgba(78,57,28,.13);
}
.tpl-wedding-editorial-ivory .heroTopline{
  gap:8px!important;
}
.tpl-wedding-editorial-ivory .badge,
.tpl-wedding-editorial-ivory .miniBadge{
  background:transparent!important;
  color:#8a744f!important;
  border:1px solid rgba(167,139,95,.25)!important;
  letter-spacing:.18em!important;
  font-size:.62rem!important;
  border-radius:999px!important;
  padding:8px 12px!important;
}
.tpl-wedding-editorial-ivory .heroStatement{
  background:transparent!important;
  border:0!important;
  min-height:auto!important;
  color:#7a6a53!important;
  font-family:"Cormorant Garamond","Playfair Display",serif!important;
  font-size:1.08rem!important;
  letter-spacing:.10em!important;
  text-transform:uppercase;
  margin:18px auto 6px!important;
}
.tpl-wedding-editorial-ivory .titleStack{
  margin-top:4px;
}
.tpl-wedding-editorial-ivory .inviteCard h1{
  font-family:"Great Vibes","Cormorant Garamond","Playfair Display",serif!important;
  font-size:clamp(3.1rem, 11vw, 5.9rem)!important;
  font-weight:400!important;
  line-height:.9!important;
  letter-spacing:0!important;
  color:#7a6a53!important;
  margin:8px 0 4px!important;
  text-shadow:none!important;
}
.tpl-wedding-editorial-ivory .coupleNames{
  gap:10px!important;
  margin-top:8px!important;
  align-items:center!important;
}
.tpl-wedding-editorial-ivory .coupleNames h2,
.tpl-wedding-editorial-ivory .coupleNames h3{
  font-family:"Cormorant Garamond","Playfair Display",serif!important;
  color:#2b2520!important;
  font-weight:500!important;
  font-size:clamp(2rem, 8vw, 4.25rem)!important;
  letter-spacing:.03em!important;
  text-transform:uppercase!important;
}
.tpl-wedding-editorial-ivory .coupleNames .ampersand{
  font-family:"Cormorant Garamond","Playfair Display",serif!important;
  color:#a78b5f!important;
  font-size:clamp(1.8rem, 6vw, 3.6rem)!important;
}
.tpl-wedding-editorial-ivory .heroInfoBar{
  margin:22px auto 0!important;
  gap:8px!important;
}
.tpl-wedding-editorial-ivory .heroInfoPill{
  background:rgba(255,255,255,.42)!important;
  border:1px solid rgba(167,139,95,.22)!important;
  color:#2b2520!important;
  border-radius:999px!important;
}
.tpl-wedding-editorial-ivory .heroInfoPill span{
  color:#8a744f!important;
  letter-spacing:.12em!important;
}
.tpl-wedding-editorial-ivory .dateLine{
  font-family:"Cormorant Garamond","Playfair Display",serif!important;
  color:#2b2520!important;
  font-size:clamp(1.2rem, 4vw, 1.72rem)!important;
  letter-spacing:.03em!important;
}
.tpl-wedding-editorial-ivory .goldDivider{
  width:160px!important;
  height:1px!important;
  background:linear-gradient(90deg,transparent,#a78b5f,transparent)!important;
  margin:20px auto!important;
}
.tpl-wedding-editorial-ivory .welcome{
  color:#5d5246!important;
  font-family:"Cormorant Garamond","Playfair Display",serif!important;
  font-size:1.15rem!important;
  line-height:1.55!important;
  max-width:500px!important;
}
.tpl-wedding-editorial-ivory .familyLine{
  background:rgba(255,255,255,.38)!important;
  border:1px solid rgba(167,139,95,.18)!important;
  border-radius:20px!important;
}
.tpl-wedding-editorial-ivory .familyLine p span{
  color:#8a744f!important;
}
.tpl-wedding-editorial-ivory .countdown{
  max-width:520px!important;
  gap:8px!important;
}
.tpl-wedding-editorial-ivory .countdown div{
  background:rgba(255,255,255,.44)!important;
  border:1px solid rgba(167,139,95,.20)!important;
  color:#2b2520!important;
  border-radius:18px!important;
  box-shadow:none!important;
}
.tpl-wedding-editorial-ivory .countdown b{
  color:#2b2520!important;
}
.tpl-wedding-editorial-ivory .countdown span{
  color:#8a744f!important;
}
.tpl-wedding-editorial-ivory .scrollCue{
  color:#8a744f!important;
}
.tpl-wedding-editorial-ivory .inviteSection{
  color:#2b2520!important;
}
.tpl-wedding-editorial-ivory .sectionTitle span{
  color:#8a744f!important;
  letter-spacing:.20em!important;
}
.tpl-wedding-editorial-ivory .sectionTitle h2{
  font-family:"Cormorant Garamond","Playfair Display",serif!important;
  color:#2b2520!important;
  font-size:clamp(2.4rem, 7vw, 4.4rem)!important;
  font-weight:500!important;
}
.tpl-wedding-editorial-ivory .sectionGlyph{
  color:#a78b5f!important;
  background:rgba(255,255,255,.40)!important;
  border:1px solid rgba(167,139,95,.24)!important;
}
.tpl-wedding-editorial-ivory .detailGrid{
  grid-template-columns:1fr!important;
  max-width:640px!important;
  margin-inline:auto!important;
}
.tpl-wedding-editorial-ivory .detailCard,
.tpl-wedding-editorial-ivory .timeline div,
.tpl-wedding-editorial-ivory .ctaLink,
.tpl-wedding-editorial-ivory .rsvpCard,
.tpl-wedding-editorial-ivory .shareCard{
  background:rgba(255,255,255,.52)!important;
  border:1px solid rgba(167,139,95,.20)!important;
  color:#2b2520!important;
  border-radius:28px!important;
  box-shadow:0 18px 52px rgba(78,57,28,.09)!important;
}
.tpl-wedding-editorial-ivory .detailCard h3,
.tpl-wedding-editorial-ivory .timeline strong,
.tpl-wedding-editorial-ivory .ctaCopy strong{
  color:#2b2520!important;
  font-family:"Cormorant Garamond","Playfair Display",serif!important;
  font-size:1.5rem!important;
}
.tpl-wedding-editorial-ivory .detailCard span,
.tpl-wedding-editorial-ivory .timeline time,
.tpl-wedding-editorial-ivory .ctaCopy small,
.tpl-wedding-editorial-ivory .rsvpDeadline{
  color:#8a744f!important;
}
.tpl-wedding-editorial-ivory .detailCard p,
.tpl-wedding-editorial-ivory .timeline p,
.tpl-wedding-editorial-ivory .ctaCopy p,
.tpl-wedding-editorial-ivory .shareCard p{
  color:#5d5246!important;
}
.tpl-wedding-editorial-ivory .gallery{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
}
.tpl-wedding-editorial-ivory .gallery figure{
  border-radius:28px!important;
  border:1px solid rgba(167,139,95,.22)!important;
  background:rgba(255,255,255,.50)!important;
  box-shadow:0 18px 52px rgba(78,57,28,.09)!important;
}
.tpl-wedding-editorial-ivory .gallery img{
  height:320px!important;
  object-fit:cover!important;
  filter:saturate(.92) contrast(.98) brightness(1.02);
}
.tpl-wedding-editorial-ivory .gallery figcaption{
  color:#5d5246!important;
}
.tpl-wedding-editorial-ivory .btn.primary,
.tpl-wedding-editorial-ivory .rsvpActions .btn.primary{
  background:linear-gradient(135deg,#a78b5f,#d7c3a1)!important;
  color:#fffaf0!important;
  border:0!important;
}
.tpl-wedding-editorial-ivory .btn.ghost,
.tpl-wedding-editorial-ivory .rsvpActions .btn.ghost{
  background:rgba(255,255,255,.50)!important;
  color:#2b2520!important;
  border-color:rgba(167,139,95,.24)!important;
}
.tpl-wedding-editorial-ivory .input{
  background:rgba(255,255,255,.70)!important;
  color:#2b2520!important;
  border-color:rgba(167,139,95,.24)!important;
}
.tpl-wedding-editorial-ivory .inviteStaticActions{
  background:rgba(255,250,240,.82)!important;
  border-color:rgba(167,139,95,.24)!important;
  box-shadow:0 18px 54px rgba(78,57,28,.12)!important;
}
.tpl-wedding-editorial-ivory .inviteStaticActions a,
.tpl-wedding-editorial-ivory .inviteStaticActions button{
  color:#2b2520!important;
}
.tpl-wedding-editorial-ivory footer a,
.tpl-wedding-editorial-ivory footer{
  color:#7a6a53!important;
}
@media(max-width:760px){
  .tpl-wedding-editorial-ivory .premiumHeroCard{
    border-radius:26px!important;
    padding:24px 16px 32px!important;
  }
  .tpl-wedding-editorial-ivory .inviteHero.hasHeroImage .premiumHeroCard::before{
    height:230px!important;
    border-radius:22px 22px 10px 10px!important;
  }
  .tpl-wedding-editorial-ivory .heroInfoBar{
    grid-template-columns:1fr!important;
  }
  .tpl-wedding-editorial-ivory .gallery{
    grid-template-columns:1fr!important;
  }
  .tpl-wedding-editorial-ivory .gallery img{
    height:260px!important;
  }
}


/* =========================================================
   EventoQR.click V36.20.3.3.2
   Editorial Text & Bilingual Polish
   Correcciones:
   - Foto editorial solo aparece si hay foto real.
   - Badges ya no se cortan.
   - Details/Share dejan de aparecer como texto gigante.
   - Mayor contraste en textos claros.
   - Preparado visualmente para ES/EN sin romper layout.
   ========================================================= */

/* Hero photo block fix:
   V36.20.3.3.2 mostraba un rectángulo vacío porque usaba el background del template como "foto".
   Ahora la portada editorial solo se dibuja cuando render.js agrega hasRealHeroPhoto. */
.tpl-wedding-editorial-ivory.cover-full-photo.hasHeroImage .premiumHeroCard::before,
.tpl-wedding-editorial-ivory .inviteHero.hasHeroImage .premiumHeroCard::before{
  content:none!important;
  display:none!important;
}
.tpl-wedding-editorial-ivory.cover-full-photo.hasRealHeroPhoto .premiumHeroCard::before,
.tpl-wedding-editorial-ivory .inviteHero.hasRealHeroPhoto .premiumHeroCard::before{
  content:""!important;
  display:block!important;
  width:min(420px, 100%)!important;
  height:280px!important;
  margin:0 auto 22px!important;
  border-radius:28px 28px 12px 12px!important;
  background-image:var(--hero-desktop)!important;
  background-size:cover!important;
  background-position:center!important;
  border:1px solid rgba(167,139,95,.22)!important;
  box-shadow:0 18px 44px rgba(78,57,28,.13)!important;
}

/* Prevent the top badge from being clipped on desktop/tablet/mobile */
.tpl-wedding-editorial-ivory .premiumHeroCard{
  overflow:visible!important;
}
.tpl-wedding-editorial-ivory .heroTopline{
  display:flex!important;
  flex-wrap:wrap!important;
  justify-content:center!important;
  align-items:center!important;
  gap:8px!important;
  max-width:100%!important;
  margin:0 auto!important;
}
.tpl-wedding-editorial-ivory .badge,
.tpl-wedding-editorial-ivory .miniBadge{
  max-width:100%!important;
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
  line-height:1.15!important;
  text-align:center!important;
}

/* More elegant editorial section glyphs */
.tpl-wedding-editorial-ivory .sectionGlyph{
  width:52px!important;
  height:52px!important;
  min-width:52px!important;
  border-radius:18px!important;
  font-size:1.05rem!important;
  font-family:"Cormorant Garamond","Playfair Display",serif!important;
  font-weight:600!important;
  color:#a78b5f!important;
  background:
    radial-gradient(circle at 35% 25%, rgba(255,255,255,.82), transparent 46%),
    linear-gradient(135deg, rgba(167,139,95,.18), rgba(255,255,255,.46))!important;
  border:1px solid rgba(167,139,95,.24)!important;
  box-shadow:0 14px 34px rgba(78,57,28,.08)!important;
}
.tpl-wedding-editorial-ivory .sectionTitle{
  gap:14px!important;
}
.tpl-wedding-editorial-ivory .sectionTitle h2{
  line-height:.96!important;
}

/* Contrast fixes: V36.20.3.3.2 had some ivory-on-ivory text */
.tpl-wedding-editorial-ivory .heroInfoPill{
  background:rgba(255,255,255,.62)!important;
}
.tpl-wedding-editorial-ivory .heroInfoPill strong,
.tpl-wedding-editorial-ivory .heroInfoPill b,
.tpl-wedding-editorial-ivory .heroInfoPill em,
.tpl-wedding-editorial-ivory .heroInfoPill{
  color:#2b2520!important;
}
.tpl-wedding-editorial-ivory .heroInfoPill span{
  color:#8a744f!important;
}
.tpl-wedding-editorial-ivory .passCard{
  background:
    linear-gradient(180deg, rgba(255,255,255,.76), rgba(255,250,240,.68))!important;
  border:1px solid rgba(167,139,95,.24)!important;
  color:#2b2520!important;
  box-shadow:0 18px 44px rgba(78,57,28,.10)!important;
}
.tpl-wedding-editorial-ivory .passCard small,
.tpl-wedding-editorial-ivory .passCard span{
  color:#7a6a53!important;
}
.tpl-wedding-editorial-ivory .passCard strong{
  color:#2b2520!important;
}
.tpl-wedding-editorial-ivory .detailCard time,
.tpl-wedding-editorial-ivory .detailCard .detailTime,
.tpl-wedding-editorial-ivory .timeline time{
  color:#8a744f!important;
  opacity:1!important;
}
.tpl-wedding-editorial-ivory .detailCard a,
.tpl-wedding-editorial-ivory .timeline a,
.tpl-wedding-editorial-ivory .ctaLink,
.tpl-wedding-editorial-ivory .shareCard a{
  color:#2b2520!important;
}
.tpl-wedding-editorial-ivory .detailCard .btn,
.tpl-wedding-editorial-ivory .ctaLink .btn,
.tpl-wedding-editorial-ivory .calendarLinks a{
  color:#fffaf0!important;
  background:linear-gradient(135deg,#a78b5f,#cbb489)!important;
  border-color:transparent!important;
}
.tpl-wedding-editorial-ivory .calendarLinks a{
  opacity:1!important;
}

/* Make editorial headings read more like a luxury printed invitation */
.tpl-wedding-editorial-ivory .heroStatement{
  color:#7a6a53!important;
  opacity:1!important;
}
.tpl-wedding-editorial-ivory .inviteCard h1{
  color:#7a6a53!important;
}
.tpl-wedding-editorial-ivory .coupleNames h2,
.tpl-wedding-editorial-ivory .coupleNames h3{
  color:#2b2520!important;
  text-shadow:none!important;
}
.tpl-wedding-editorial-ivory .dateLine{
  color:#2b2520!important;
  opacity:1!important;
}
.tpl-wedding-editorial-ivory .welcome{
  color:#5d5246!important;
}

/* Share card URL readability */
.tpl-wedding-editorial-ivory .shareCard p{
  color:#5d5246!important;
  word-break:break-word!important;
}

/* Mobile editorial refinements */
@media(max-width:760px){
  .tpl-wedding-editorial-ivory .premiumHeroCard{
    padding-top:26px!important;
  }
  .tpl-wedding-editorial-ivory .badge,
  .tpl-wedding-editorial-ivory .miniBadge{
    font-size:.58rem!important;
    padding:7px 10px!important;
    letter-spacing:.13em!important;
  }
  .tpl-wedding-editorial-ivory.cover-full-photo.hasRealHeroPhoto .premiumHeroCard::before,
  .tpl-wedding-editorial-ivory .inviteHero.hasRealHeroPhoto .premiumHeroCard::before{
    height:230px!important;
    border-radius:22px 22px 10px 10px!important;
  }
  .tpl-wedding-editorial-ivory .sectionGlyph{
    width:44px!important;
    height:44px!important;
    min-width:44px!important;
    border-radius:15px!important;
  }
}


/* =========================================================
   EventoQR.click V36.20.3.3.2
   Editorial Hero Photo Above Blessing Text
   La foto va después del badge y antes de:
   "Con la bendición de nuestras familias"
   ========================================================= */

/* Disable previous pseudo photo system for the editorial template */
.tpl-wedding-editorial-ivory.cover-full-photo.hasRealHeroPhoto .premiumHeroCard::before,
.tpl-wedding-editorial-ivory .inviteHero.hasRealHeroPhoto .premiumHeroCard::before,
.tpl-wedding-editorial-ivory.cover-full-photo.hasHeroImage .premiumHeroCard::before,
.tpl-wedding-editorial-ivory .inviteHero.hasHeroImage .premiumHeroCard::before{
  content:none!important;
  display:none!important;
}

/* Real photo component placed in render.js */
.tpl-wedding-editorial-ivory .editorialHeroPhoto{
  width:min(520px, 100%);
  margin:18px auto 22px;
  padding:0;
  position:relative;
  z-index:2;
  overflow:visible;
}
.tpl-wedding-editorial-ivory .editorialHeroPhoto::before,
.tpl-wedding-editorial-ivory .editorialHeroPhoto::after{
  content:"";
  position:absolute;
  width:118px;
  height:178px;
  bottom:-18px;
  opacity:.42;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 15%, rgba(167,139,95,.34) 0 2px, transparent 3px),
    linear-gradient(115deg, transparent 47%, rgba(167,139,95,.40) 48%, transparent 50%);
  mask:
    radial-gradient(ellipse at 50% 35%, #000 0 28%, transparent 29%),
    linear-gradient(#000,#000);
}
.tpl-wedding-editorial-ivory .editorialHeroPhoto::before{
  left:-52px;
  transform:rotate(-12deg);
}
.tpl-wedding-editorial-ivory .editorialHeroPhoto::after{
  right:-52px;
  transform:scaleX(-1) rotate(-12deg);
}
.tpl-wedding-editorial-ivory .editorialHeroPhoto img{
  display:block;
  width:100%;
  height:clamp(230px, 34vw, 330px);
  object-fit:cover;
  object-position:center;
  border-radius:30px 30px 14px 14px;
  border:1px solid rgba(167,139,95,.26);
  box-shadow:
    0 24px 58px rgba(78,57,28,.16),
    inset 0 1px 0 rgba(255,255,255,.65);
  filter:saturate(.94) contrast(.98) brightness(1.02);
}

/* Tighter top composition after adding the photo */
.tpl-wedding-editorial-ivory .heroStatement{
  margin:18px auto 6px!important;
}
.tpl-wedding-editorial-ivory .inviteCard h1{
  margin-top:4px!important;
}
.tpl-wedding-editorial-ivory .premiumHeroCard{
  padding-top:30px!important;
}

/* Mobile safe photo height */
@media(max-width:760px){
  .tpl-wedding-editorial-ivory .editorialHeroPhoto{
    width:100%;
    margin:14px auto 18px;
  }
  .tpl-wedding-editorial-ivory .editorialHeroPhoto img{
    height:220px;
    border-radius:24px 24px 12px 12px;
  }
  .tpl-wedding-editorial-ivory .editorialHeroPhoto::before,
  .tpl-wedding-editorial-ivory .editorialHeroPhoto::after{
    display:none;
  }
}
@media(max-width:420px){
  .tpl-wedding-editorial-ivory .editorialHeroPhoto img{
    height:190px;
  }
}


/* =========================================================
   EventoQR.click V36.20.3.3.2
   Editorial Mobile Center + Strong Contrast Fix
   Problema corregido:
   - En móvil, la agenda se veía partida en columnas raras.
   - Textos claros se perdían sobre fondo marfil.
   - Cards de ceremonia/recepción necesitaban centrado fino.
   ========================================================= */

/* Strong contrast for the full editorial invitation */
.tpl-wedding-editorial-ivory{
  --editorial-dark:#241f1a;
  --editorial-text:#332b24;
  --editorial-muted:#5b4f42;
  --editorial-gold:#8f774f;
}
.tpl-wedding-editorial-ivory .inviteSection,
.tpl-wedding-editorial-ivory .centeredSection,
.tpl-wedding-editorial-ivory .detailCard,
.tpl-wedding-editorial-ivory .timeline div,
.tpl-wedding-editorial-ivory .rsvpCard,
.tpl-wedding-editorial-ivory .shareCard{
  color:var(--editorial-text)!important;
}
.tpl-wedding-editorial-ivory .sectionTitle h2,
.tpl-wedding-editorial-ivory .timeline strong,
.tpl-wedding-editorial-ivory .detailCard h3,
.tpl-wedding-editorial-ivory .ctaCopy strong,
.tpl-wedding-editorial-ivory .shareCard h2,
.tpl-wedding-editorial-ivory .rsvpCard h2{
  color:var(--editorial-dark)!important;
}
.tpl-wedding-editorial-ivory .timeline p,
.tpl-wedding-editorial-ivory .detailCard p,
.tpl-wedding-editorial-ivory .ctaCopy p,
.tpl-wedding-editorial-ivory .shareCard p{
  color:var(--editorial-muted)!important;
  opacity:1!important;
}
.tpl-wedding-editorial-ivory .timeline time,
.tpl-wedding-editorial-ivory .detailCard time,
.tpl-wedding-editorial-ivory .sectionTitle span,
.tpl-wedding-editorial-ivory .detailCard span,
.tpl-wedding-editorial-ivory .ctaCopy small{
  color:var(--editorial-gold)!important;
  opacity:1!important;
}

/* Desktop/tablet timeline polish */
.tpl-wedding-editorial-ivory .timeline{
  max-width:760px!important;
  margin-left:auto!important;
  margin-right:auto!important;
}
.tpl-wedding-editorial-ivory .timeline div{
  display:grid!important;
  grid-template-columns:120px 1fr!important;
  gap:12px 22px!important;
  align-items:start!important;
  padding:26px 28px!important;
}
.tpl-wedding-editorial-ivory .timeline time{
  grid-row:1 / span 2!important;
  font-size:1.05rem!important;
  font-weight:1000!important;
  letter-spacing:.02em!important;
}
.tpl-wedding-editorial-ivory .timeline strong{
  font-size:clamp(1.65rem,4vw,2.25rem)!important;
  line-height:1.05!important;
}
.tpl-wedding-editorial-ivory .timeline p{
  font-size:1.04rem!important;
  line-height:1.55!important;
  margin:4px 0 0!important;
}

/* Mobile: everything centered and readable */
@media(max-width:760px){
  .tpl-wedding-editorial-ivory .inviteShell{
    width:min(100% - 18px, 560px)!important;
  }

  .tpl-wedding-editorial-ivory .centeredSection{
    text-align:center!important;
  }

  .tpl-wedding-editorial-ivory .sectionTitle{
    justify-content:center!important;
    align-items:center!important;
    text-align:center!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }

  .tpl-wedding-editorial-ivory .sectionTitle h2{
    text-align:center!important;
    max-width:100%!important;
    font-size:clamp(2.45rem, 12vw, 4rem)!important;
    line-height:.96!important;
  }

  .tpl-wedding-editorial-ivory .sectionTitle span{
    text-align:center!important;
    display:block!important;
    width:100%!important;
  }

  .tpl-wedding-editorial-ivory .timeline{
    display:grid!important;
    gap:18px!important;
    width:min(100%, 430px)!important;
    margin:0 auto!important;
  }

  .tpl-wedding-editorial-ivory .timeline div{
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    text-align:center!important;
    min-height:240px!important;
    padding:30px 24px!important;
    border-radius:34px!important;
    background:
      radial-gradient(circle at top, rgba(255,255,255,.78), transparent 58%),
      rgba(255,255,255,.64)!important;
    border:1px solid rgba(143,119,79,.26)!important;
    box-shadow:0 18px 48px rgba(78,57,28,.10)!important;
  }

  .tpl-wedding-editorial-ivory .timeline time{
    grid-row:auto!important;
    font-size:1.3rem!important;
    line-height:1.1!important;
    margin:0 0 14px!important;
    color:#7c663f!important;
    font-weight:1000!important;
  }

  .tpl-wedding-editorial-ivory .timeline strong{
    font-size:clamp(2rem, 9vw, 2.8rem)!important;
    line-height:1.05!important;
    margin:0 0 16px!important;
    color:#241f1a!important;
    text-align:center!important;
    width:100%!important;
  }

  .tpl-wedding-editorial-ivory .timeline p{
    max-width:290px!important;
    margin:0 auto!important;
    font-size:1.12rem!important;
    line-height:1.55!important;
    color:#4d4338!important;
    text-align:center!important;
  }

  .tpl-wedding-editorial-ivory .detailCard{
    text-align:center!important;
    align-items:center!important;
  }

  .tpl-wedding-editorial-ivory .detailCard h3{
    text-align:center!important;
  }

  .tpl-wedding-editorial-ivory .detailCard p{
    text-align:center!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }

  /* Bottom floating action nav: slightly smaller so it does not feel heavy */
  .tpl-wedding-editorial-ivory .inviteStaticActions{
    width:min(calc(100% - 34px), 430px)!important;
    left:50%!important;
    transform:translateX(-50%)!important;
    justify-content:center!important;
    gap:6px!important;
    padding:8px!important;
    border-radius:999px!important;
  }

  .tpl-wedding-editorial-ivory .inviteStaticActions a,
  .tpl-wedding-editorial-ivory .inviteStaticActions button{
    width:42px!important;
    height:42px!important;
    min-width:42px!important;
    border-radius:999px!important;
  }
}

@media(max-width:420px){
  .tpl-wedding-editorial-ivory .timeline div{
    min-height:220px!important;
    padding:26px 20px!important;
  }
  .tpl-wedding-editorial-ivory .timeline strong{
    font-size:clamp(1.9rem, 10vw, 2.5rem)!important;
  }
  .tpl-wedding-editorial-ivory .timeline p{
    font-size:1.04rem!important;
  }
}


/* =========================================================
   EventoQR.click V36.20.3.3.2
   Editorial Gold / Silver / Black + Mobile Nav Fix
   Problema corregido:
   - Textos de fecha/hora/lugar se perdían sobre fondo marfil.
   - En móvil, la barra inferior se veía rara/pesada.
   ========================================================= */

.tpl-wedding-editorial-ivory{
  --editorial-black:#171412;
  --editorial-ink:#241f1a;
  --editorial-gold:#9b7a37;
  --editorial-gold-2:#c7a85c;
  --editorial-silver:#d8d8dc;
  --editorial-silver-2:#f2f2f4;
}

/* HERO INFO BAR: gold, silver and black, no more invisible ivory text */
.tpl-wedding-editorial-ivory .heroInfoBar{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:10px!important;
  width:min(640px,100%)!important;
  margin:24px auto 14px!important;
}

.tpl-wedding-editorial-ivory .heroInfoPill{
  min-height:48px!important;
  padding:10px 12px!important;
  border-radius:999px!important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(216,216,220,.72))!important;
  border:1px solid rgba(155,122,55,.42)!important;
  box-shadow:
    0 12px 30px rgba(23,20,18,.08),
    inset 0 1px 0 rgba(255,255,255,.88)!important;
  color:var(--editorial-black)!important;
  opacity:1!important;
  text-shadow:none!important;
}

.tpl-wedding-editorial-ivory .heroInfoPill *,
.tpl-wedding-editorial-ivory .heroInfoPill strong,
.tpl-wedding-editorial-ivory .heroInfoPill b,
.tpl-wedding-editorial-ivory .heroInfoPill em{
  color:var(--editorial-black)!important;
  opacity:1!important;
  text-shadow:none!important;
}

.tpl-wedding-editorial-ivory .heroInfoPill span,
.tpl-wedding-editorial-ivory .heroInfoPill small{
  color:var(--editorial-gold)!important;
  opacity:1!important;
  font-weight:1000!important;
  letter-spacing:.13em!important;
  text-transform:uppercase!important;
}

.tpl-wedding-editorial-ivory .dateLine{
  color:var(--editorial-black)!important;
  text-shadow:none!important;
  opacity:1!important;
  font-weight:600!important;
}

/* Stronger text for all light-card areas */
.tpl-wedding-editorial-ivory .welcome,
.tpl-wedding-editorial-ivory .shareCard p,
.tpl-wedding-editorial-ivory .detailCard p,
.tpl-wedding-editorial-ivory .timeline p,
.tpl-wedding-editorial-ivory .ctaCopy p{
  color:#3a3129!important;
  opacity:1!important;
}

.tpl-wedding-editorial-ivory .goldDivider{
  background:linear-gradient(90deg,transparent,var(--editorial-silver),var(--editorial-gold),var(--editorial-silver),transparent)!important;
  opacity:1!important;
}

/* MOBILE: make top info stack readable and premium */
@media(max-width:760px){
  .tpl-wedding-editorial-ivory .heroInfoBar{
    grid-template-columns:1fr!important;
    width:min(100%, 360px)!important;
    gap:9px!important;
    margin:20px auto 12px!important;
  }

  .tpl-wedding-editorial-ivory .heroInfoPill{
    min-height:46px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:8px!important;
    text-align:center!important;
    padding:10px 16px!important;
    background:
      linear-gradient(135deg, rgba(255,255,255,.96), rgba(216,216,220,.78))!important;
  }

  .tpl-wedding-editorial-ivory .heroInfoPill span,
  .tpl-wedding-editorial-ivory .heroInfoPill small{
    flex:0 0 auto!important;
    color:var(--editorial-gold)!important;
  }

  .tpl-wedding-editorial-ivory .heroInfoPill strong,
  .tpl-wedding-editorial-ivory .heroInfoPill b,
  .tpl-wedding-editorial-ivory .heroInfoPill em{
    color:var(--editorial-black)!important;
  }

  .tpl-wedding-editorial-ivory .dateLine{
    max-width:330px!important;
    margin-left:auto!important;
    margin-right:auto!important;
    font-size:1.18rem!important;
    line-height:1.35!important;
    color:var(--editorial-black)!important;
  }
}

/* MOBILE BOTTOM MENU FIX */
@media(max-width:760px){
  .tpl-wedding-editorial-ivory{
    padding-bottom:92px!important;
  }

  .tpl-wedding-editorial-ivory .inviteStaticActions{
    position:fixed!important;
    left:50%!important;
    right:auto!important;
    bottom:calc(14px + env(safe-area-inset-bottom))!important;
    transform:translateX(-50%)!important;
    width:auto!important;
    max-width:calc(100% - 30px)!important;
    min-height:56px!important;
    padding:7px!important;
    gap:6px!important;
    display:flex!important;
    justify-content:center!important;
    align-items:center!important;
    border-radius:999px!important;
    background:
      linear-gradient(135deg, rgba(23,20,18,.94), rgba(58,52,65,.90))!important;
    border:1px solid rgba(216,216,220,.22)!important;
    box-shadow:
      0 18px 50px rgba(0,0,0,.32),
      inset 0 1px 0 rgba(255,255,255,.14)!important;
    backdrop-filter:blur(18px)!important;
    z-index:90!important;
  }

  .tpl-wedding-editorial-ivory .inviteStaticActions a,
  .tpl-wedding-editorial-ivory .inviteStaticActions button{
    width:42px!important;
    height:42px!important;
    min-width:42px!important;
    min-height:42px!important;
    padding:0!important;
    display:grid!important;
    place-items:center!important;
    border-radius:999px!important;
    background:
      radial-gradient(circle at 30% 20%, rgba(255,255,255,.22), transparent 36%),
      linear-gradient(135deg, rgba(216,216,220,.18), rgba(155,122,55,.16))!important;
    border:1px solid rgba(216,216,220,.22)!important;
    color:var(--editorial-silver-2)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.10)!important;
  }

  .tpl-wedding-editorial-ivory .inviteStaticActions a i,
  .tpl-wedding-editorial-ivory .inviteStaticActions button i,
  .tpl-wedding-editorial-ivory .inviteStaticActions .musicIcon{
    color:var(--editorial-silver-2)!important;
    text-shadow:0 0 10px rgba(199,168,92,.28)!important;
    font-size:1rem!important;
  }

  .tpl-wedding-editorial-ivory .inviteStaticActions a:hover,
  .tpl-wedding-editorial-ivory .inviteStaticActions button:hover,
  .tpl-wedding-editorial-ivory .inviteStaticActions a:focus,
  .tpl-wedding-editorial-ivory .inviteStaticActions button:focus{
    background:linear-gradient(135deg, var(--editorial-gold), #7c3aed)!important;
    color:white!important;
  }

  .tpl-wedding-editorial-ivory .inviteStaticActions span{
    display:none!important;
  }
}

/* Keep menu usable on very small phones */
@media(max-width:390px){
  .tpl-wedding-editorial-ivory .inviteStaticActions{
    gap:4px!important;
    padding:6px!important;
  }
  .tpl-wedding-editorial-ivory .inviteStaticActions a,
  .tpl-wedding-editorial-ivory .inviteStaticActions button{
    width:38px!important;
    height:38px!important;
    min-width:38px!important;
    min-height:38px!important;
  }
}


/* =========================================================
   EventoQR.click V36.20.3.3.2
   Editorial Hide Weird Info Text + Mobile Spacing Fix
   ========================================================= */

/* Hard hide in case cached HTML still has the old pills */
.tpl-wedding-editorial-ivory .heroInfoBar{
  display:none!important;
}

/* Make the printed date the only date/time line */
.tpl-wedding-editorial-ivory .dateLine{
  margin:24px auto 16px!important;
  max-width:620px!important;
  color:#171412!important;
  font-family:"Cormorant Garamond","Playfair Display",serif!important;
  font-size:clamp(1.35rem, 4.8vw, 1.9rem)!important;
  line-height:1.28!important;
  font-weight:600!important;
  letter-spacing:.025em!important;
  text-align:center!important;
}

/* Better visual rhythm after names */
.tpl-wedding-editorial-ivory .coupleNames{
  margin-bottom:16px!important;
}

/* Stronger pass/invitation card readability */
.tpl-wedding-editorial-ivory .passCard{
  max-width:560px!important;
  margin:26px auto 0!important;
  padding:24px 22px!important;
  border-radius:30px!important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(246,240,230,.88))!important;
  border:1px solid rgba(155,122,55,.28)!important;
  color:#171412!important;
  box-shadow:
    0 18px 44px rgba(78,57,28,.12),
    inset 0 1px 0 rgba(255,255,255,.9)!important;
}
.tpl-wedding-editorial-ivory .passCard small{
  color:#7c663f!important;
  font-size:.95rem!important;
  font-weight:600!important;
}
.tpl-wedding-editorial-ivory .passCard strong{
  color:#171412!important;
  font-size:clamp(1.85rem, 5vw, 2.45rem)!important;
  line-height:1.05!important;
  font-weight:800!important;
}
.tpl-wedding-editorial-ivory .passCard span{
  color:#7c663f!important;
  font-size:1.08rem!important;
  font-weight:700!important;
}

/* Add room so the fixed mobile menu does not cover cards/content */
.tpl-wedding-editorial-ivory .inviteShell{
  padding-bottom:110px!important;
}

@media(max-width:760px){
  .tpl-wedding-editorial-ivory .premiumHeroCard{
    padding-left:18px!important;
    padding-right:18px!important;
    padding-bottom:40px!important;
  }

  .tpl-wedding-editorial-ivory .dateLine{
    margin:22px auto 18px!important;
    max-width:310px!important;
    font-size:1.35rem!important;
    line-height:1.38!important;
  }

  .tpl-wedding-editorial-ivory .welcome{
    max-width:330px!important;
    margin-left:auto!important;
    margin-right:auto!important;
    font-size:1.16rem!important;
    line-height:1.55!important;
    color:#3a3129!important;
  }

  .tpl-wedding-editorial-ivory .passCard{
    margin-top:28px!important;
    margin-bottom:24px!important;
    padding:22px 18px!important;
    width:min(100%, 360px)!important;
  }

  .tpl-wedding-editorial-ivory .passCard strong{
    font-size:2rem!important;
  }

  .tpl-wedding-editorial-ivory .inviteShell{
    padding-bottom:140px!important;
  }

  .tpl-wedding-editorial-ivory .inviteStaticActions{
    bottom:calc(18px + env(safe-area-inset-bottom))!important;
  }
}

/* Ultra small screens: avoid the nav touching the guest card */
@media(max-width:390px){
  .tpl-wedding-editorial-ivory .inviteShell{
    padding-bottom:150px!important;
  }
  .tpl-wedding-editorial-ivory .passCard{
    margin-bottom:34px!important;
  }
}


/* =========================================================
   EventoQR.click V36.20.3.3.2
   Language in Menu + No Animations + Marcha Nupcial
   ========================================================= */

/* Public invitation performance mode */
body.view .invitePage.noInviteAnimations,
body.view .invitePage.noInviteAnimations *,
body.view .invitePage.noInviteAnimations *::before,
body.view .invitePage.noInviteAnimations *::after,
body.view .inviteStaticActions,
body.view .inviteStaticActions *,
body.view .openInviteGate,
body.view .openInviteGate *{
  animation:none!important;
  transition:none!important;
  scroll-behavior:auto!important;
}

/* Keep the old floating language button hidden forever */
body.view .inviteLangSwitch:not(.menuLangSwitch){
  display:none!important;
}

/* Language switch now lives inside the bottom action menu */
body.view .menuLangSwitch{
  cursor:pointer!important;
}
body.view .menuLangSwitch i{
  font-style:normal!important;
  font-weight:1000!important;
  font-size:.78rem!important;
  letter-spacing:.02em!important;
}

/* Editorial nav: compact enough with language button inside */
@media(max-width:760px){
  .tpl-wedding-editorial-ivory .inviteStaticActions{
    gap:5px!important;
    padding:6px!important;
    min-height:54px!important;
    max-width:calc(100% - 22px)!important;
  }

  .tpl-wedding-editorial-ivory .inviteStaticActions a,
  .tpl-wedding-editorial-ivory .inviteStaticActions button{
    width:39px!important;
    height:39px!important;
    min-width:39px!important;
    min-height:39px!important;
  }

  .tpl-wedding-editorial-ivory .inviteStaticActions .menuLangSwitch{
    background:
      radial-gradient(circle at 30% 20%, rgba(255,255,255,.22), transparent 36%),
      linear-gradient(135deg, #9b7a37, #6d5f82)!important;
    color:#fff!important;
    border-color:rgba(199,168,92,.38)!important;
  }

  .tpl-wedding-editorial-ivory .inviteStaticActions .menuLangSwitch i{
    color:#fff!important;
  }
}

@media(max-width:390px){
  .tpl-wedding-editorial-ivory .inviteStaticActions{
    gap:4px!important;
    padding:5px!important;
  }
  .tpl-wedding-editorial-ivory .inviteStaticActions a,
  .tpl-wedding-editorial-ivory .inviteStaticActions button{
    width:36px!important;
    height:36px!important;
    min-width:36px!important;
    min-height:36px!important;
  }
  .tpl-wedding-editorial-ivory .inviteStaticActions .menuLangSwitch i{
    font-size:.68rem!important;
  }
}


/* =========================================================
   EventoQR.click V36.20.3.3.2
   Minimal Dropdown Menu
   Menú discreto: un botón pulsante que abre acciones.
   Aplica a invitaciones públicas en móvil y desktop.
   ========================================================= */

body.view .inviteStaticActions{
  position:fixed!important;
  right:18px!important;
  left:auto!important;
  bottom:calc(18px + env(safe-area-inset-bottom))!important;
  transform:none!important;
  width:auto!important;
  max-width:min(92vw, 360px)!important;
  min-height:auto!important;
  padding:0!important;
  display:flex!important;
  flex-direction:column-reverse!important;
  align-items:flex-end!important;
  justify-content:flex-start!important;
  gap:10px!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  z-index:120!important;
}

/* Main discreet pulse button */
body.view .inviteMenuToggle{
  width:58px!important;
  height:58px!important;
  min-width:58px!important;
  min-height:58px!important;
  border-radius:999px!important;
  border:1px solid rgba(255,255,255,.24)!important;
  background:
    radial-gradient(circle at 32% 24%, rgba(255,255,255,.30), transparent 34%),
    linear-gradient(135deg, #d4af37, #8b5cf6)!important;
  color:#fff!important;
  display:grid!important;
  place-items:center!important;
  padding:0!important;
  cursor:pointer!important;
  box-shadow:
    0 18px 46px rgba(0,0,0,.28),
    0 0 0 0 rgba(212,175,55,.48),
    inset 0 1px 0 rgba(255,255,255,.22)!important;
  animation:inviteMenuPulse 2.4s ease-in-out infinite!important;
}

body.view .inviteMenuToggle i{
  font-style:normal!important;
  font-size:1.35rem!important;
  line-height:1!important;
  color:#fff!important;
}

body.view .inviteMenuToggle span{
  display:none!important;
}

@keyframes inviteMenuPulse{
  0%,100%{ box-shadow:0 18px 46px rgba(0,0,0,.28), 0 0 0 0 rgba(212,175,55,.46), inset 0 1px 0 rgba(255,255,255,.22); transform:scale(1); }
  55%{ box-shadow:0 18px 46px rgba(0,0,0,.28), 0 0 0 12px rgba(212,175,55,0), inset 0 1px 0 rgba(255,255,255,.22); transform:scale(1.035); }
}

body.view .inviteStaticActions.is-open .inviteMenuToggle{
  animation:none!important;
  background:
    radial-gradient(circle at 32% 24%, rgba(255,255,255,.26), transparent 34%),
    linear-gradient(135deg, #171412, #4c4564)!important;
}

/* Dropdown action panel */
body.view .inviteStaticActions a,
body.view .inviteStaticActions button:not(.inviteMenuToggle){
  width:auto!important;
  min-width:150px!important;
  height:44px!important;
  min-height:44px!important;
  max-width:240px!important;
  border-radius:999px!important;
  padding:0 14px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:10px!important;
  text-decoration:none!important;
  border:1px solid rgba(255,255,255,.16)!important;
  background:
    radial-gradient(circle at 10% 0%, rgba(255,255,255,.18), transparent 30%),
    linear-gradient(135deg, rgba(18,24,42,.96), rgba(43,39,58,.92))!important;
  color:#f8fafc!important;
  box-shadow:
    0 14px 36px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.10)!important;
  backdrop-filter:blur(16px)!important;
  opacity:0!important;
  pointer-events:none!important;
  transform:translateY(8px) scale(.96)!important;
  visibility:hidden!important;
}

body.view .inviteStaticActions.is-open a,
body.view .inviteStaticActions.is-open button:not(.inviteMenuToggle){
  opacity:1!important;
  pointer-events:auto!important;
  transform:translateY(0) scale(1)!important;
  visibility:visible!important;
}

body.view .inviteStaticActions a i,
body.view .inviteStaticActions button:not(.inviteMenuToggle) i{
  width:28px!important;
  height:28px!important;
  min-width:28px!important;
  border-radius:999px!important;
  display:grid!important;
  place-items:center!important;
  background:linear-gradient(135deg, rgba(212,175,55,.90), rgba(139,92,246,.78))!important;
  color:#fff!important;
  font-style:normal!important;
  font-size:.92rem!important;
  line-height:1!important;
}

body.view .inviteStaticActions a span,
body.view .inviteStaticActions button:not(.inviteMenuToggle) span{
  display:block!important;
  color:#f8fafc!important;
  font-size:.72rem!important;
  line-height:1!important;
  font-weight:900!important;
  letter-spacing:.04em!important;
  text-transform:uppercase!important;
}

/* language action inside menu */
body.view .inviteStaticActions .menuLangSwitch i{
  font-size:.72rem!important;
  font-weight:1000!important;
  letter-spacing:.02em!important;
}

/* remove old vertical/heavy editorial overrides */
.tpl-wedding-editorial-ivory .inviteStaticActions{
  right:18px!important;
  left:auto!important;
  bottom:calc(18px + env(safe-area-inset-bottom))!important;
  transform:none!important;
  width:auto!important;
  background:transparent!important;
  box-shadow:none!important;
  border:0!important;
  padding:0!important;
}

@media(max-width:760px){
  body.view .inviteStaticActions{
    right:14px!important;
    bottom:calc(14px + env(safe-area-inset-bottom))!important;
    gap:8px!important;
  }

  body.view .inviteMenuToggle{
    width:54px!important;
    height:54px!important;
    min-width:54px!important;
    min-height:54px!important;
  }

  body.view .inviteStaticActions a,
  body.view .inviteStaticActions button:not(.inviteMenuToggle){
    min-width:142px!important;
    height:42px!important;
    min-height:42px!important;
    padding:0 12px!important;
  }

  body.view .inviteStaticActions a i,
  body.view .inviteStaticActions button:not(.inviteMenuToggle) i{
    width:26px!important;
    height:26px!important;
    min-width:26px!important;
    font-size:.84rem!important;
  }

  body.view .inviteStaticActions a span,
  body.view .inviteStaticActions button:not(.inviteMenuToggle) span{
    font-size:.66rem!important;
  }

  .tpl-wedding-editorial-ivory .inviteShell{
    padding-bottom:86px!important;
  }
}

@media(max-width:390px){
  body.view .inviteStaticActions a,
  body.view .inviteStaticActions button:not(.inviteMenuToggle){
    min-width:132px!important;
  }
}


/* =========================================================
   EventoQR.click V36.20.3.3.2
   Dropdown Alignment Fix
   Problema corregido:
   - Al abrir el menú, las acciones se miraban desalineadas / raras.
   - Ahora abre como una lista premium compacta, derecha, pareja y limpia.
   ========================================================= */

body.view .inviteStaticActions{
  align-items:flex-end!important;
  gap:8px!important;
}

/* All opened menu items same width, same alignment */
body.view .inviteStaticActions a,
body.view .inviteStaticActions button:not(.inviteMenuToggle){
  width:168px!important;
  min-width:168px!important;
  max-width:168px!important;
  height:42px!important;
  min-height:42px!important;
  justify-content:flex-start!important;
  padding:0 12px!important;
  gap:10px!important;
  margin:0!important;
  text-align:left!important;
}

/* Make labels visually consistent */
body.view .inviteStaticActions a span,
body.view .inviteStaticActions button:not(.inviteMenuToggle) span{
  flex:1 1 auto!important;
  min-width:0!important;
  text-align:left!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

/* Make icons same size */
body.view .inviteStaticActions a i,
body.view .inviteStaticActions button:not(.inviteMenuToggle) i{
  flex:0 0 28px!important;
  width:28px!important;
  height:28px!important;
  min-width:28px!important;
}

/* The pulse button stays separated below the list */
body.view .inviteMenuToggle{
  margin-top:2px!important;
}

/* Open state: clean vertical drawer */
body.view .inviteStaticActions.is-open{
  padding:0!important;
  background:transparent!important;
}

/* Closed state: only show the pulse button */
body.view .inviteStaticActions.is-collapsed a,
body.view .inviteStaticActions.is-collapsed button:not(.inviteMenuToggle){
  display:flex!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}

/* Open state: all items line up exactly */
body.view .inviteStaticActions.is-open a,
body.view .inviteStaticActions.is-open button:not(.inviteMenuToggle){
  display:flex!important;
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
  transform:none!important;
}

/* Mobile fine tuning */
@media(max-width:760px){
  body.view .inviteStaticActions{
    right:12px!important;
    bottom:calc(14px + env(safe-area-inset-bottom))!important;
    gap:7px!important;
  }

  body.view .inviteStaticActions a,
  body.view .inviteStaticActions button:not(.inviteMenuToggle){
    width:154px!important;
    min-width:154px!important;
    max-width:154px!important;
    height:40px!important;
    min-height:40px!important;
    padding:0 10px!important;
    gap:9px!important;
  }

  body.view .inviteStaticActions a i,
  body.view .inviteStaticActions button:not(.inviteMenuToggle) i{
    flex-basis:26px!important;
    width:26px!important;
    height:26px!important;
    min-width:26px!important;
  }

  body.view .inviteStaticActions a span,
  body.view .inviteStaticActions button:not(.inviteMenuToggle) span{
    font-size:.64rem!important;
  }

  body.view .inviteMenuToggle{
    width:52px!important;
    height:52px!important;
    min-width:52px!important;
    min-height:52px!important;
  }
}

/* Tiny screens: keep it discreet */
@media(max-width:380px){
  body.view .inviteStaticActions a,
  body.view .inviteStaticActions button:not(.inviteMenuToggle){
    width:142px!important;
    min-width:142px!important;
    max-width:142px!important;
  }
}


/* =========================================================
   EventoQR.click V36.20.3.3.2
   Menu Anchor + Editorial Family Card Fix
   Correcciones visuales detectadas en desktop:
   - El menú abierto se iba demasiado a la derecha.
   - El bloque de padres/familias quedaba raro cuando solo había un dato.
   ========================================================= */

/* Place the floating menu next to the invitation shell, not at the far edge of big screens */
body.view .inviteStaticActions{
  right:calc((100vw - min(980px, calc(100vw - 18px))) / 2 + 18px)!important;
  left:auto!important;
}

/* Open menu feels like one premium dropdown, not random floating pills */
body.view .inviteStaticActions.is-open{
  padding:9px!important;
  border-radius:30px!important;
  background:
    radial-gradient(circle at 100% 100%, rgba(212,175,55,.10), transparent 36%),
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(15,23,42,.08))!important;
  border:1px solid rgba(255,255,255,.12)!important;
  box-shadow:
    0 22px 70px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.10)!important;
  backdrop-filter:blur(14px)!important;
}

/* A little smaller on desktop so it doesn't compete with the invitation */
@media(min-width:981px){
  body.view .inviteStaticActions a,
  body.view .inviteStaticActions button:not(.inviteMenuToggle){
    width:154px!important;
    min-width:154px!important;
    max-width:154px!important;
    height:39px!important;
    min-height:39px!important;
  }

  body.view .inviteStaticActions a i,
  body.view .inviteStaticActions button:not(.inviteMenuToggle) i{
    width:25px!important;
    height:25px!important;
    min-width:25px!important;
    flex-basis:25px!important;
  }

  body.view .inviteStaticActions a span,
  body.view .inviteStaticActions button:not(.inviteMenuToggle) span{
    font-size:.62rem!important;
  }

  body.view .inviteMenuToggle{
    width:54px!important;
    height:54px!important;
    min-width:54px!important;
    min-height:54px!important;
  }
}

/* On smaller screens keep it near the safe right side */
@media(max-width:980px){
  body.view .inviteStaticActions{
    right:14px!important;
  }
}

/* Editorial family/parents card: center it if there is one item */
.tpl-wedding-editorial-ivory .familyLine{
  width:min(560px,100%)!important;
  max-width:560px!important;
  grid-template-columns:1fr!important;
  margin:18px auto 22px!important;
  gap:10px!important;
}

.tpl-wedding-editorial-ivory .familyLine p{
  width:100%!important;
  max-width:560px!important;
  justify-self:center!important;
  text-align:center!important;
  padding:16px 18px!important;
  border-radius:22px!important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(246,240,230,.84))!important;
  border:1px solid rgba(155,122,55,.22)!important;
  color:#241f1a!important;
  box-shadow:0 12px 34px rgba(78,57,28,.08)!important;
}

.tpl-wedding-editorial-ivory .familyLine span{
  color:#9b7a37!important;
  margin-bottom:5px!important;
}

@media(max-width:760px){
  .tpl-wedding-editorial-ivory .familyLine{
    width:min(100%,360px)!important;
    margin-top:18px!important;
    margin-bottom:26px!important;
  }
  .tpl-wedding-editorial-ivory .familyLine p{
    padding:15px 14px!important;
  }
}


/* =========================================================
   EventoQR.click V36.20.3.3.2
   Dock Menu Redesign
   Replanteo completo:
   - Un botón discreto.
   - Al abrir, aparece un panel/dock compacto de 2 columnas.
   - Ya no hay lista vertical de pills.
   ========================================================= */

body.view .inviteStaticActions.dockMenu{
  position:fixed!important;
  right:calc((100vw - min(980px, calc(100vw - 18px))) / 2 + 18px)!important;
  left:auto!important;
  bottom:calc(18px + env(safe-area-inset-bottom))!important;
  top:auto!important;
  transform:none!important;
  width:auto!important;
  height:auto!important;
  max-width:none!important;
  min-height:0!important;
  display:block!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  z-index:140!important;
  isolation:isolate!important;
}

/* Main button */
body.view .dockMenu .inviteMenuToggle{
  position:relative!important;
  z-index:3!important;
  width:58px!important;
  height:58px!important;
  min-width:58px!important;
  min-height:58px!important;
  max-width:58px!important;
  padding:0!important;
  display:grid!important;
  place-items:center!important;
  border-radius:999px!important;
  border:1px solid rgba(255,255,255,.28)!important;
  background:
    radial-gradient(circle at 32% 24%, rgba(255,255,255,.34), transparent 34%),
    linear-gradient(135deg,#d4af37,#8b5cf6)!important;
  color:#fff!important;
  box-shadow:
    0 20px 48px rgba(0,0,0,.30),
    0 0 0 0 rgba(212,175,55,.46),
    inset 0 1px 0 rgba(255,255,255,.22)!important;
  cursor:pointer!important;
  animation:inviteDockPulse 2.45s ease-in-out infinite!important;
}

body.view .dockMenu.is-open .inviteMenuToggle{
  animation:none!important;
  background:
    radial-gradient(circle at 32% 24%, rgba(255,255,255,.22), transparent 34%),
    linear-gradient(135deg,#171412,#4c4564)!important;
}

body.view .dockMenu .inviteMenuToggle i{
  color:#fff!important;
  font-style:normal!important;
  font-size:1.22rem!important;
  line-height:1!important;
}

body.view .dockMenu .inviteMenuToggle span{
  display:none!important;
}

@keyframes inviteDockPulse{
  0%,100%{
    transform:scale(1);
    box-shadow:0 20px 48px rgba(0,0,0,.30), 0 0 0 0 rgba(212,175,55,.44), inset 0 1px 0 rgba(255,255,255,.22);
  }
  56%{
    transform:scale(1.04);
    box-shadow:0 20px 48px rgba(0,0,0,.30), 0 0 0 13px rgba(212,175,55,0), inset 0 1px 0 rgba(255,255,255,.22);
  }
}

/* The real dropdown panel */
body.view .dockMenu .inviteMenuPanel{
  position:absolute!important;
  right:0!important;
  bottom:72px!important;
  width:236px!important;
  max-width:calc(100vw - 28px)!important;
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:9px!important;
  padding:12px!important;
  border-radius:28px!important;
  border:1px solid rgba(255,255,255,.16)!important;
  background:
    radial-gradient(circle at 100% 0%, rgba(212,175,55,.16), transparent 36%),
    radial-gradient(circle at 0% 100%, rgba(139,92,246,.14), transparent 38%),
    linear-gradient(180deg, rgba(20,24,42,.94), rgba(25,28,44,.88))!important;
  box-shadow:
    0 24px 74px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.12)!important;
  backdrop-filter:blur(18px)!important;
  transform-origin:bottom right!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  transform:translateY(10px) scale(.94)!important;
}

body.view .dockMenu.is-open .inviteMenuPanel{
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
  transform:translateY(0) scale(1)!important;
}

/* Dock items: compact square cards */
body.view .dockMenu .inviteMenuPanel a,
body.view .dockMenu .inviteMenuPanel button{
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  height:74px!important;
  min-height:74px!important;
  padding:9px 6px!important;
  margin:0!important;
  display:grid!important;
  grid-template-rows:32px 1fr!important;
  place-items:center!important;
  gap:6px!important;
  border-radius:20px!important;
  border:1px solid rgba(255,255,255,.13)!important;
  background:
    radial-gradient(circle at 30% 18%, rgba(255,255,255,.16), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.055))!important;
  color:#f8fafc!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08)!important;
  text-decoration:none!important;
  cursor:pointer!important;
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
  transform:none!important;
  text-align:center!important;
}

body.view .dockMenu .inviteMenuPanel a:hover,
body.view .dockMenu .inviteMenuPanel button:hover,
body.view .dockMenu .inviteMenuPanel a:focus,
body.view .dockMenu .inviteMenuPanel button:focus{
  background:
    radial-gradient(circle at 30% 18%, rgba(255,255,255,.22), transparent 30%),
    linear-gradient(135deg, rgba(212,175,55,.30), rgba(139,92,246,.22))!important;
  border-color:rgba(212,175,55,.36)!important;
}

body.view .dockMenu .inviteMenuPanel a i,
body.view .dockMenu .inviteMenuPanel button i{
  width:32px!important;
  height:32px!important;
  min-width:32px!important;
  flex:0 0 32px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:999px!important;
  background:linear-gradient(135deg, rgba(212,175,55,.94), rgba(139,92,246,.82))!important;
  color:#fff!important;
  font-style:normal!important;
  font-size:.94rem!important;
  line-height:1!important;
  text-shadow:none!important;
}

body.view .dockMenu .inviteMenuPanel a span,
body.view .dockMenu .inviteMenuPanel button span{
  display:block!important;
  width:100%!important;
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  color:#f8fafc!important;
  font-size:.62rem!important;
  line-height:1!important;
  font-weight:1000!important;
  letter-spacing:.055em!important;
  text-transform:uppercase!important;
  text-align:center!important;
}

/* Language item highlight */
body.view .dockMenu .inviteMenuPanel .menuLangSwitch{
  background:
    radial-gradient(circle at 30% 18%, rgba(255,255,255,.16), transparent 30%),
    linear-gradient(135deg, rgba(212,175,55,.18), rgba(139,92,246,.22))!important;
}
body.view .dockMenu .inviteMenuPanel .menuLangSwitch i{
  font-size:.74rem!important;
  font-weight:1000!important;
  letter-spacing:.02em!important;
}

/* Remove older opened pill behavior completely */
body.view .inviteStaticActions.dockMenu.is-open a,
body.view .inviteStaticActions.dockMenu.is-open button:not(.inviteMenuToggle){
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
}

/* Keep editorial content breathable */
.tpl-wedding-editorial-ivory .inviteShell{
  padding-bottom:92px!important;
}

@media(max-width:980px){
  body.view .inviteStaticActions.dockMenu{
    right:14px!important;
  }
}

@media(max-width:760px){
  body.view .dockMenu .inviteMenuToggle{
    width:54px!important;
    height:54px!important;
    min-width:54px!important;
    min-height:54px!important;
  }

  body.view .dockMenu .inviteMenuPanel{
    width:224px!important;
    bottom:66px!important;
    gap:8px!important;
    padding:10px!important;
    border-radius:26px!important;
  }

  body.view .dockMenu .inviteMenuPanel a,
  body.view .dockMenu .inviteMenuPanel button{
    height:68px!important;
    min-height:68px!important;
    border-radius:18px!important;
    padding:8px 5px!important;
  }

  body.view .dockMenu .inviteMenuPanel a i,
  body.view .dockMenu .inviteMenuPanel button i{
    width:30px!important;
    height:30px!important;
    min-width:30px!important;
  }

  body.view .dockMenu .inviteMenuPanel a span,
  body.view .dockMenu .inviteMenuPanel button span{
    font-size:.58rem!important;
  }

  .tpl-wedding-editorial-ivory .inviteShell{
    padding-bottom:88px!important;
  }
}

@media(max-width:380px){
  body.view .dockMenu .inviteMenuPanel{
    width:208px!important;
  }
  body.view .dockMenu .inviteMenuPanel a,
  body.view .dockMenu .inviteMenuPanel button{
    height:64px!important;
    min-height:64px!important;
  }
}


/* =========================================================
   EventoQR.click V36.20.3.3.2
   Editorial Story Gallery Real Photos
   Nuestra historia con fotos reales:
   /img/bodas/sample1/novios.jpg
   /img/bodas/sample1/novios2.jpg
   /img/bodas/sample1/novios3.jpg
   /img/bodas/sample1/novios4.jpg
   ========================================================= */

.tpl-wedding-editorial-ivory .gallery{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:28px!important;
  max-width:1040px!important;
  margin:0 auto!important;
}

.tpl-wedding-editorial-ivory .gallery figure{
  position:relative!important;
  overflow:hidden!important;
  padding:14px 14px 24px!important;
  border-radius:30px!important;
  background:
    radial-gradient(circle at 90% 0%, rgba(255,255,255,.58), transparent 32%),
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(246,240,230,.86))!important;
  border:1px solid rgba(155,122,55,.24)!important;
  box-shadow:
    0 22px 60px rgba(78,57,28,.12),
    inset 0 1px 0 rgba(255,255,255,.88)!important;
}

.tpl-wedding-editorial-ivory .gallery figure::after{
  content:"";
  display:block;
  width:82px;
  height:1px;
  margin:12px auto 0;
  background:linear-gradient(90deg, transparent, #c7a85c, transparent);
}

.tpl-wedding-editorial-ivory .gallery figure::before{
  content:"♥";
  position:absolute;
  left:50%;
  bottom:10px;
  transform:translateX(-50%);
  color:#b99b58;
  font-size:.72rem;
  line-height:1;
  z-index:2;
}

.tpl-wedding-editorial-ivory .gallery img{
  display:block!important;
  width:100%!important;
  height:330px!important;
  object-fit:cover!important;
  object-position:center!important;
  border-radius:22px!important;
  border:1px solid rgba(155,122,55,.18)!important;
  filter:saturate(.96) contrast(.98) brightness(1.02)!important;
  box-shadow:0 10px 28px rgba(78,57,28,.09)!important;
}

.tpl-wedding-editorial-ivory .gallery figcaption{
  margin:14px 0 0!important;
  padding:0 10px!important;
  color:#3a3129!important;
  font-family:"Cormorant Garamond","Playfair Display",serif!important;
  font-size:clamp(1.18rem,2.2vw,1.55rem)!important;
  line-height:1.1!important;
  font-weight:500!important;
  text-align:center!important;
}

/* Make the editorial gallery title feel connected to a photo album */
.tpl-wedding-editorial-ivory #gallery,
.tpl-wedding-editorial-ivory .inviteSection:has(.gallery){
  padding-top:64px!important;
}

@media(max-width:860px){
  .tpl-wedding-editorial-ivory .gallery{
    grid-template-columns:1fr!important;
    gap:22px!important;
    max-width:560px!important;
  }

  .tpl-wedding-editorial-ivory .gallery img{
    height:300px!important;
  }
}

@media(max-width:520px){
  .tpl-wedding-editorial-ivory .gallery{
    max-width:100%!important;
    gap:18px!important;
  }

  .tpl-wedding-editorial-ivory .gallery figure{
    border-radius:26px!important;
    padding:10px 10px 22px!important;
  }

  .tpl-wedding-editorial-ivory .gallery img{
    height:245px!important;
    border-radius:20px!important;
  }

  .tpl-wedding-editorial-ivory .gallery figcaption{
    font-size:1.18rem!important;
  }
}


/* =========================================================
   EventoQR.click V36.20.3.3.2
   Remove Public English Button
   ========================================================= */

/* Public invitations stay Spanish-first. Hide any cached ES/EN button if browser cache keeps old markup. */
body.view .inviteLangSwitch,
body.view .menuLangSwitch{
  display:none!important;
}

/* Dock menu gets a little cleaner with one less item */
body.view .dockMenu .inviteMenuPanel{
  width:224px!important;
}

@media(max-width:760px){
  body.view .dockMenu .inviteMenuPanel{
    width:214px!important;
  }
}


/* =========================================================
   EventoQR.click V36.20.3.3.2
   Native Mobile Menu Fix
   Problema corregido:
   - En móvil el botón de menú no abría.
   Solución:
   - El menú ahora usa <details>/<summary> nativo del navegador.
   - Ya no depende del click custom para abrir.
   ========================================================= */

/* Reset native details/summary marker */
body.view details.dockMenu > summary{
  list-style:none!important;
  -webkit-tap-highlight-color:transparent!important;
  user-select:none!important;
}
body.view details.dockMenu > summary::-webkit-details-marker{
  display:none!important;
}
body.view details.dockMenu > summary::marker{
  content:""!important;
}

/* Make the native summary behave exactly like the button */
body.view details.dockMenu .inviteMenuToggle{
  position:relative!important;
  z-index:3!important;
  width:58px!important;
  height:58px!important;
  min-width:58px!important;
  min-height:58px!important;
  max-width:58px!important;
  padding:0!important;
  display:grid!important;
  place-items:center!important;
  border-radius:999px!important;
  border:1px solid rgba(255,255,255,.28)!important;
  background:
    radial-gradient(circle at 32% 24%, rgba(255,255,255,.34), transparent 34%),
    linear-gradient(135deg,#d4af37,#8b5cf6)!important;
  color:#fff!important;
  box-shadow:
    0 20px 48px rgba(0,0,0,.30),
    0 0 0 0 rgba(212,175,55,.46),
    inset 0 1px 0 rgba(255,255,255,.22)!important;
  cursor:pointer!important;
  animation:inviteDockPulse 2.45s ease-in-out infinite!important;
  outline:none!important;
}

/* Open state works with native [open] attribute */
body.view details.dockMenu[open] .inviteMenuToggle{
  animation:none!important;
  background:
    radial-gradient(circle at 32% 24%, rgba(255,255,255,.22), transparent 34%),
    linear-gradient(135deg,#171412,#4c4564)!important;
}

/* IMPORTANT: panel visibility now follows [open], not only class .is-open */
body.view details.dockMenu .inviteMenuPanel{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  transform:translateY(10px) scale(.94)!important;
}

body.view details.dockMenu[open] .inviteMenuPanel,
body.view details.dockMenu.is-open .inviteMenuPanel{
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
  transform:translateY(0) scale(1)!important;
}

/* Mobile tap target safe */
@media(max-width:760px){
  body.view details.dockMenu .inviteMenuToggle{
    width:56px!important;
    height:56px!important;
    min-width:56px!important;
    min-height:56px!important;
    touch-action:manipulation!important;
  }
  body.view details.dockMenu .inviteMenuPanel{
    bottom:68px!important;
  }
}


/* =========================================================
   EventoQR.click V36.20.3.3.2
   Wedding Noir Silver Template
   ========================================================= */

.themePreset.noirSilver{
  background:linear-gradient(135deg,#050506,#1a1b22 52%,#d8d8dc)!important;
  color:#ffffff!important;
  border-color:rgba(216,216,220,.42)!important;
}

.templateCardPick.theme-noir-silver,
.catalogCard.theme-noir-silver .catalogPreview,
.previewCard.theme-noir-silver{
  background:
    radial-gradient(circle at 80% 0%, rgba(216,216,220,.18), transparent 30%),
    linear-gradient(135deg,#050506,#14151c 62%,#272832)!important;
  color:#e5e7eb!important;
  border-color:rgba(216,216,220,.24)!important;
}
.templateCardPick.theme-noir-silver .templateKicker,
.catalogCard.theme-noir-silver .catalogPreviewTop span,
.previewCard.theme-noir-silver span{
  color:#050506!important;
  background:linear-gradient(135deg,#d8d8dc,#ffffff)!important;
}
.catalogCard.theme-noir-silver .catalogPreview h2,
.previewCard.theme-noir-silver h2,
.previewCard.theme-noir-silver h3{
  color:#f8fafc!important;
}
.catalogCard.theme-noir-silver .catalogPreview p,
.catalogCard.theme-noir-silver .catalogPreviewTop b{
  color:#cbd5e1!important;
}

/* Public invitation */
.tpl-wedding-noir-silver{
  --event-bg:#050506;
  --event-text:#e5e7eb;
  --event-primary:#d8d8dc;
  --event-secondary:#bfa46a;
  --noir-black:#050506;
  --noir-panel:#111217;
  --noir-silver:#d8d8dc;
  --noir-bright:#f8fafc;
  --noir-muted:#a9adb6;
  --noir-gold:#bfa46a;
}
.tpl-wedding-noir-silver.invitePage{
  background:
    radial-gradient(circle at 50% 0%, rgba(216,216,220,.12), transparent 28%),
    radial-gradient(circle at 100% 20%, rgba(191,164,106,.12), transparent 24%),
    linear-gradient(180deg,#020203,#08080a 48%,#12131a)!important;
  color:#e5e7eb!important;
}
.tpl-wedding-noir-silver .inviteShell{
  width:min(980px, calc(100% - 18px));
}
.tpl-wedding-noir-silver .inviteHero.layout-noir{
  min-height:100vh;
  padding:28px 0 42px;
  background-image:
    linear-gradient(rgba(2,2,3,.58), rgba(2,2,3,.82)),
    var(--hero-desktop)!important;
  background-size:cover!important;
  background-position:center!important;
}
.tpl-wedding-noir-silver .heroPhotoLayer,
.tpl-wedding-noir-silver .ornament{
  display:none!important;
}
.tpl-wedding-noir-silver .premiumHeroCard{
  max-width:670px!important;
  padding:34px 24px 42px!important;
  border-radius:34px!important;
  background:
    radial-gradient(circle at 50% 0%, rgba(216,216,220,.11), transparent 34%),
    linear-gradient(180deg, rgba(17,18,23,.94), rgba(5,5,6,.92)),
    url("/img/backgrounds/wedding-noir-silver.svg") center/cover!important;
  border:1px solid rgba(216,216,220,.22)!important;
  box-shadow:
    0 28px 80px rgba(0,0,0,.50),
    inset 0 1px 0 rgba(255,255,255,.10)!important;
  backdrop-filter:blur(10px);
}
.tpl-wedding-noir-silver .heroTopline{
  display:flex!important;
  flex-wrap:wrap!important;
  justify-content:center!important;
  gap:8px!important;
}
.tpl-wedding-noir-silver .badge,
.tpl-wedding-noir-silver .miniBadge{
  background:linear-gradient(135deg,#d8d8dc,#ffffff)!important;
  color:#050506!important;
  border:1px solid rgba(216,216,220,.36)!important;
  letter-spacing:.18em!important;
  font-size:.62rem!important;
  border-radius:999px!important;
  padding:8px 13px!important;
}
.tpl-wedding-noir-silver .editorialHeroPhoto{
  width:min(520px, 100%);
  margin:18px auto 22px;
  position:relative;
}
.tpl-wedding-noir-silver .editorialHeroPhoto img{
  display:block;
  width:100%;
  height:clamp(245px, 34vw, 340px);
  object-fit:cover;
  object-position:center;
  border-radius:30px 30px 12px 12px;
  border:1px solid rgba(216,216,220,.24);
  box-shadow:0 24px 64px rgba(0,0,0,.42);
  filter:saturate(.82) contrast(1.08) brightness(.92);
}
.tpl-wedding-noir-silver .heroStatement{
  margin:18px auto 8px!important;
  background:transparent!important;
  border:0!important;
  color:#d8d8dc!important;
  font-family:"Cormorant Garamond","Playfair Display",serif!important;
  font-size:1.05rem!important;
  letter-spacing:.16em!important;
  text-transform:uppercase!important;
}
.tpl-wedding-noir-silver .inviteCard h1{
  font-family:"Great Vibes","Cormorant Garamond","Playfair Display",serif!important;
  font-size:clamp(3.1rem, 11vw, 5.8rem)!important;
  font-weight:400!important;
  line-height:.9!important;
  color:#d8d8dc!important;
  text-shadow:0 0 26px rgba(216,216,220,.18)!important;
  margin:8px 0 4px!important;
}
.tpl-wedding-noir-silver .coupleNames{
  gap:10px!important;
  margin-top:8px!important;
}
.tpl-wedding-noir-silver .coupleNames h2,
.tpl-wedding-noir-silver .coupleNames h3{
  font-family:"Cormorant Garamond","Playfair Display",serif!important;
  color:#f8fafc!important;
  font-weight:500!important;
  font-size:clamp(2rem, 8vw, 4.1rem)!important;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;
}
.tpl-wedding-noir-silver .coupleNames .ampersand{
  color:#bfa46a!important;
}
.tpl-wedding-noir-silver .heroInfoBar{
  display:none!important;
}
.tpl-wedding-noir-silver .dateLine{
  margin:24px auto 16px!important;
  max-width:620px!important;
  color:#e5e7eb!important;
  font-family:"Cormorant Garamond","Playfair Display",serif!important;
  font-size:clamp(1.35rem, 4.8vw, 1.9rem)!important;
  line-height:1.28!important;
  font-weight:600!important;
  letter-spacing:.025em!important;
  text-align:center!important;
}
.tpl-wedding-noir-silver .goldDivider{
  width:170px!important;
  height:1px!important;
  margin:20px auto!important;
  background:linear-gradient(90deg,transparent,#d8d8dc,#bfa46a,#d8d8dc,transparent)!important;
}
.tpl-wedding-noir-silver .welcome{
  max-width:520px!important;
  margin-left:auto!important;
  margin-right:auto!important;
  color:#cbd5e1!important;
  font-family:"Cormorant Garamond","Playfair Display",serif!important;
  font-size:1.15rem!important;
  line-height:1.55!important;
}
.tpl-wedding-noir-silver .passCard,
.tpl-wedding-noir-silver .familyLine p,
.tpl-wedding-noir-silver .detailCard,
.tpl-wedding-noir-silver .timeline div,
.tpl-wedding-noir-silver .rsvpCard,
.tpl-wedding-noir-silver .shareCard,
.tpl-wedding-noir-silver .ctaLink{
  background:
    radial-gradient(circle at 100% 0%, rgba(216,216,220,.10), transparent 36%),
    linear-gradient(180deg, rgba(23,24,30,.92), rgba(9,9,12,.90))!important;
  border:1px solid rgba(216,216,220,.18)!important;
  color:#e5e7eb!important;
  box-shadow:0 22px 60px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.08)!important;
}
.tpl-wedding-noir-silver .passCard small,
.tpl-wedding-noir-silver .familyLine span,
.tpl-wedding-noir-silver .sectionTitle span,
.tpl-wedding-noir-silver .detailCard span,
.tpl-wedding-noir-silver .ctaCopy small,
.tpl-wedding-noir-silver .timeline time{
  color:#bfa46a!important;
}
.tpl-wedding-noir-silver .passCard strong,
.tpl-wedding-noir-silver .sectionTitle h2,
.tpl-wedding-noir-silver .detailCard h3,
.tpl-wedding-noir-silver .timeline strong,
.tpl-wedding-noir-silver .ctaCopy strong,
.tpl-wedding-noir-silver .shareCard h2,
.tpl-wedding-noir-silver .rsvpCard h2{
  color:#f8fafc!important;
}
.tpl-wedding-noir-silver .passCard span,
.tpl-wedding-noir-silver .detailCard p,
.tpl-wedding-noir-silver .timeline p,
.tpl-wedding-noir-silver .ctaCopy p,
.tpl-wedding-noir-silver .shareCard p{
  color:#cbd5e1!important;
}
.tpl-wedding-noir-silver .familyLine{
  grid-template-columns:1fr!important;
  width:min(560px,100%)!important;
  max-width:560px!important;
  margin:18px auto 24px!important;
}
.tpl-wedding-noir-silver .familyLine p{
  text-align:center!important;
  padding:16px 18px!important;
}
.tpl-wedding-noir-silver .countdown{
  max-width:540px!important;
}
.tpl-wedding-noir-silver .countdown div{
  background:linear-gradient(180deg, rgba(216,216,220,.13), rgba(255,255,255,.055))!important;
  border:1px solid rgba(216,216,220,.16)!important;
}
.tpl-wedding-noir-silver .countdown b{
  color:#f8fafc!important;
}
.tpl-wedding-noir-silver .countdown span{
  color:#bfa46a!important;
}
.tpl-wedding-noir-silver .sectionGlyph{
  color:#050506!important;
  background:linear-gradient(135deg,#d8d8dc,#ffffff)!important;
  border:1px solid rgba(216,216,220,.24)!important;
}
.tpl-wedding-noir-silver .gallery{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:28px!important;
  max-width:1040px!important;
  margin:0 auto!important;
}
.tpl-wedding-noir-silver .gallery figure{
  overflow:hidden!important;
  padding:12px 12px 22px!important;
  border-radius:28px!important;
  background:linear-gradient(180deg, rgba(23,24,30,.96), rgba(7,7,9,.94))!important;
  border:1px solid rgba(216,216,220,.18)!important;
  box-shadow:0 24px 72px rgba(0,0,0,.36)!important;
}
.tpl-wedding-noir-silver .gallery img{
  width:100%!important;
  height:330px!important;
  object-fit:cover!important;
  border-radius:20px!important;
  filter:saturate(.80) contrast(1.08) brightness(.90)!important;
}
.tpl-wedding-noir-silver .gallery figcaption{
  color:#e5e7eb!important;
  font-family:"Cormorant Garamond","Playfair Display",serif!important;
  font-size:1.4rem!important;
  text-align:center!important;
  margin-top:14px!important;
}
.tpl-wedding-noir-silver .btn.primary,
.tpl-wedding-noir-silver .rsvpActions .btn.primary{
  background:linear-gradient(135deg,#d8d8dc,#ffffff)!important;
  color:#050506!important;
}
.tpl-wedding-noir-silver .btn.ghost,
.tpl-wedding-noir-silver .rsvpActions .btn.ghost{
  background:rgba(216,216,220,.10)!important;
  color:#e5e7eb!important;
  border-color:rgba(216,216,220,.24)!important;
}
.tpl-wedding-noir-silver .input{
  background:rgba(255,255,255,.08)!important;
  color:#f8fafc!important;
  border-color:rgba(216,216,220,.20)!important;
}
.tpl-wedding-noir-silver footer,
.tpl-wedding-noir-silver footer a{
  color:#a9adb6!important;
}

@media(max-width:860px){
  .tpl-wedding-noir-silver .gallery{
    grid-template-columns:1fr!important;
    max-width:560px!important;
  }
  .tpl-wedding-noir-silver .gallery img{
    height:300px!important;
  }
}
@media(max-width:760px){
  .tpl-wedding-noir-silver .premiumHeroCard{
    padding:26px 18px 40px!important;
    border-radius:28px!important;
  }
  .tpl-wedding-noir-silver .editorialHeroPhoto img{
    height:230px!important;
    border-radius:24px 24px 12px 12px!important;
  }
  .tpl-wedding-noir-silver .dateLine{
    max-width:330px!important;
    font-size:1.35rem!important;
  }
  .tpl-wedding-noir-silver .welcome{
    max-width:330px!important;
  }
  .tpl-wedding-noir-silver .familyLine{
    width:min(100%,360px)!important;
  }
  .tpl-wedding-noir-silver .timeline{
    display:grid!important;
    gap:18px!important;
    width:min(100%, 430px)!important;
    margin:0 auto!important;
  }
  .tpl-wedding-noir-silver .timeline div{
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    text-align:center!important;
    min-height:230px!important;
    padding:28px 22px!important;
    border-radius:30px!important;
  }
  .tpl-wedding-noir-silver .gallery img{
    height:245px!important;
  }
}


/* =========================================================
   EventoQR.click V36.20.3.3.2 — XV Premium Collection
   ========================================================= */
.themePreset.roseGoldPrincess{background:linear-gradient(135deg,#fff3ee,#c98d7e)!important;color:#3a2522!important}
.themePreset.royalVioletLuxe{background:linear-gradient(135deg,#14091f,#7c4aa8,#d4af37)!important;color:#fff!important}
.themePreset.noirSilverGlam{background:linear-gradient(135deg,#030304,#191b22,#d8d8dc)!important;color:#fff!important}
.themePreset.pearlGarden{background:linear-gradient(135deg,#fbf6ee,#f4d7cf,#a78b5f)!important;color:#2b2520!important}
.catalogCard.theme-rose-gold-princess .catalogPreview,.previewCard.theme-rose-gold-princess,.templateCardPick.theme-rose-gold-princess{background:linear-gradient(135deg,#fff3ee,#f6d7cf 58%,#c98d7e)!important;color:#3a2522!important}
.catalogCard.theme-royal-violet-luxe .catalogPreview,.previewCard.theme-royal-violet-luxe,.templateCardPick.theme-royal-violet-luxe{background:radial-gradient(circle at top,#7c4aa8 0,#14091f 58%,#05020a 100%)!important;color:#f8f4ff!important}
.catalogCard.theme-noir-silver-glam .catalogPreview,.previewCard.theme-noir-silver-glam,.templateCardPick.theme-noir-silver-glam{background:linear-gradient(135deg,#030304,#191b22 65%,#d8d8dc)!important;color:#f8fafc!important}
.catalogCard.theme-pearl-garden-elegance .catalogPreview,.previewCard.theme-pearl-garden-elegance,.templateCardPick.theme-pearl-garden-elegance{background:linear-gradient(135deg,#fbf6ee,#fffaf2 50%,#f4d7cf)!important;color:#2b2520!important}

.tpl-xv-rose-gold-princess,.tpl-xv-royal-violet-luxe,.tpl-xv-noir-silver-glam,.tpl-xv-pearl-garden-elegance{--xv-radius:34px}
.tpl-xv-rose-gold-princess.invitePage,.tpl-xv-pearl-garden-elegance.invitePage{background:radial-gradient(circle at 20% 8%,rgba(255,255,255,.78),transparent 36%),linear-gradient(180deg,#fff8f2,#f4e8dc 48%,#ead6c3)!important}
.tpl-xv-royal-violet-luxe.invitePage{background:radial-gradient(circle at 18% 0%,rgba(124,74,168,.36),transparent 34%),radial-gradient(circle at 90% 15%,rgba(212,175,55,.18),transparent 28%),linear-gradient(180deg,#05020a,#14091f 54%,#09030f)!important}
.tpl-xv-noir-silver-glam.invitePage{background:radial-gradient(circle at 50% 0%,rgba(216,216,220,.16),transparent 28%),linear-gradient(180deg,#020203,#09090c 52%,#171820)!important}
.tpl-xv-rose-gold-princess .inviteHero,.tpl-xv-royal-violet-luxe .inviteHero,.tpl-xv-noir-silver-glam .inviteHero,.tpl-xv-pearl-garden-elegance .inviteHero{min-height:100vh;padding:30px 0 44px;background-image:linear-gradient(rgba(0,0,0,.08),rgba(0,0,0,.12)),var(--hero-desktop)!important;background-size:cover!important;background-position:center!important}
.tpl-xv-royal-violet-luxe .inviteHero,.tpl-xv-noir-silver-glam .inviteHero{background-image:linear-gradient(rgba(5,2,10,.55),rgba(5,2,10,.80)),var(--hero-desktop)!important}
.tpl-xv-rose-gold-princess .premiumHeroCard,.tpl-xv-pearl-garden-elegance .premiumHeroCard,.tpl-xv-royal-violet-luxe .premiumHeroCard,.tpl-xv-noir-silver-glam .premiumHeroCard{max-width:700px!important;padding:32px 24px 42px!important;border-radius:var(--xv-radius)!important;overflow:visible!important;box-shadow:0 30px 90px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.22)!important;backdrop-filter:blur(10px)!important}
.tpl-xv-rose-gold-princess .premiumHeroCard{background:linear-gradient(180deg,rgba(255,246,241,.94),rgba(255,236,228,.90)),url("/img/backgrounds/xv-rose-gold-princess.svg") center/cover!important;border:1px solid rgba(201,141,126,.28)!important;color:#3a2522!important}
.tpl-xv-pearl-garden-elegance .premiumHeroCard{background:linear-gradient(180deg,rgba(255,252,246,.94),rgba(247,239,229,.90)),url("/img/backgrounds/xv-pearl-garden-elegance.svg") center/cover!important;border:1px solid rgba(167,139,95,.28)!important;color:#2b2520!important}
.tpl-xv-royal-violet-luxe .premiumHeroCard{background:radial-gradient(circle at top,rgba(124,74,168,.26),transparent 32%),linear-gradient(180deg,rgba(20,9,31,.94),rgba(5,2,10,.92)),url("/img/backgrounds/xv-royal-violet-luxe.svg") center/cover!important;border:1px solid rgba(212,175,55,.28)!important;color:#f8f4ff!important}
.tpl-xv-noir-silver-glam .premiumHeroCard{background:radial-gradient(circle at top,rgba(216,216,220,.14),transparent 34%),linear-gradient(180deg,rgba(17,18,23,.95),rgba(3,3,4,.94)),url("/img/backgrounds/xv-noir-silver-glam.svg") center/cover!important;border:1px solid rgba(216,216,220,.22)!important;color:#f8fafc!important}
.tpl-xv-rose-gold-princess .heroTopline,.tpl-xv-royal-violet-luxe .heroTopline,.tpl-xv-noir-silver-glam .heroTopline,.tpl-xv-pearl-garden-elegance .heroTopline{display:flex!important;justify-content:center!important;gap:8px!important;flex-wrap:wrap!important}
.tpl-xv-rose-gold-princess .badge,.tpl-xv-rose-gold-princess .miniBadge{background:linear-gradient(135deg,#c98d7e,#f6d7cf)!important;color:#3a2522!important}
.tpl-xv-pearl-garden-elegance .badge,.tpl-xv-pearl-garden-elegance .miniBadge{background:linear-gradient(135deg,#a78b5f,#fffaf0)!important;color:#2b2520!important}
.tpl-xv-royal-violet-luxe .badge,.tpl-xv-royal-violet-luxe .miniBadge{background:linear-gradient(135deg,#d4af37,#7c4aa8)!important;color:#fff!important}
.tpl-xv-noir-silver-glam .badge,.tpl-xv-noir-silver-glam .miniBadge{background:linear-gradient(135deg,#d8d8dc,#ffffff)!important;color:#030304!important}
.tpl-xv-rose-gold-princess .editorialHeroPhoto,.tpl-xv-royal-violet-luxe .editorialHeroPhoto,.tpl-xv-noir-silver-glam .editorialHeroPhoto,.tpl-xv-pearl-garden-elegance .editorialHeroPhoto{width:min(520px,100%);margin:18px auto 22px;position:relative}
.tpl-xv-rose-gold-princess .editorialHeroPhoto img,.tpl-xv-royal-violet-luxe .editorialHeroPhoto img,.tpl-xv-noir-silver-glam .editorialHeroPhoto img,.tpl-xv-pearl-garden-elegance .editorialHeroPhoto img{display:block;width:100%;height:clamp(255px,34vw,350px);object-fit:cover;object-position:center;border-radius:30px 30px 12px 12px;box-shadow:0 24px 64px rgba(0,0,0,.28)}
.tpl-xv-rose-gold-princess .editorialHeroPhoto img{border:1px solid rgba(201,141,126,.32);filter:saturate(.98) contrast(1.02) brightness(1.04)}
.tpl-xv-pearl-garden-elegance .editorialHeroPhoto img{border:1px solid rgba(167,139,95,.30);filter:saturate(.92) contrast(1.02) brightness(1.05)}
.tpl-xv-royal-violet-luxe .editorialHeroPhoto img{border:1px solid rgba(212,175,55,.30);filter:saturate(.96) contrast(1.06) brightness(.92)}
.tpl-xv-noir-silver-glam .editorialHeroPhoto img{border:1px solid rgba(216,216,220,.26);filter:saturate(.75) contrast(1.10) brightness(.88)}
.tpl-xv-rose-gold-princess .heroStatement,.tpl-xv-royal-violet-luxe .heroStatement,.tpl-xv-noir-silver-glam .heroStatement,.tpl-xv-pearl-garden-elegance .heroStatement{margin:14px auto 6px!important;letter-spacing:.18em!important;text-transform:uppercase!important;font-weight:1000!important;font-size:.72rem!important}
.tpl-xv-rose-gold-princess .heroStatement{color:#a86f63!important}.tpl-xv-pearl-garden-elegance .heroStatement{color:#a78b5f!important}.tpl-xv-royal-violet-luxe .heroStatement,.tpl-xv-noir-silver-glam .heroStatement{color:#d4af37!important}
.tpl-xv-rose-gold-princess .inviteCard h1,.tpl-xv-royal-violet-luxe .inviteCard h1,.tpl-xv-noir-silver-glam .inviteCard h1,.tpl-xv-pearl-garden-elegance .inviteCard h1{font-family:"Cormorant Garamond","Playfair Display",serif!important;font-size:clamp(3.2rem,11vw,5.8rem)!important;line-height:.92!important;font-weight:500!important;letter-spacing:.055em!important;text-transform:uppercase!important;margin:6px 0!important}
.tpl-xv-rose-gold-princess .inviteCard h1{color:#b8786a!important}.tpl-xv-pearl-garden-elegance .inviteCard h1{color:#a78b5f!important}.tpl-xv-royal-violet-luxe .inviteCard h1{color:#d4af37!important;text-shadow:0 0 24px rgba(212,175,55,.2)!important}.tpl-xv-noir-silver-glam .inviteCard h1{color:#d8d8dc!important;text-shadow:0 0 22px rgba(216,216,220,.16)!important}
.tpl-xv-rose-gold-princess .titleStack h2,.tpl-xv-royal-violet-luxe .titleStack h2,.tpl-xv-noir-silver-glam .titleStack h2,.tpl-xv-pearl-garden-elegance .titleStack h2{font-family:"Great Vibes","Cormorant Garamond","Playfair Display",serif!important;font-size:clamp(3.6rem,14vw,6.4rem)!important;line-height:.92!important;font-weight:400!important;margin:10px 0!important}
.tpl-xv-rose-gold-princess .titleStack h2{color:#b8786a!important}.tpl-xv-pearl-garden-elegance .titleStack h2{color:#8f774f!important}.tpl-xv-royal-violet-luxe .titleStack h2{color:#d4af37!important}.tpl-xv-noir-silver-glam .titleStack h2{color:#f8fafc!important}
.tpl-xv-rose-gold-princess .dateLine,.tpl-xv-pearl-garden-elegance .dateLine,.tpl-xv-royal-violet-luxe .dateLine,.tpl-xv-noir-silver-glam .dateLine{margin:22px auto 16px!important;font-family:"Cormorant Garamond","Playfair Display",serif!important;font-size:clamp(1.32rem,4.8vw,1.9rem)!important;line-height:1.3!important;font-weight:600!important;text-align:center!important}
.tpl-xv-rose-gold-princess .dateLine,.tpl-xv-pearl-garden-elegance .dateLine{color:#2b2520!important}.tpl-xv-royal-violet-luxe .dateLine,.tpl-xv-noir-silver-glam .dateLine{color:#e5e7eb!important}
.tpl-xv-rose-gold-princess .welcome,.tpl-xv-pearl-garden-elegance .welcome{color:#3a3129!important}.tpl-xv-royal-violet-luxe .welcome,.tpl-xv-noir-silver-glam .welcome{color:#cbd5e1!important}
.tpl-xv-rose-gold-princess .passCard,.tpl-xv-pearl-garden-elegance .passCard,.tpl-xv-rose-gold-princess .familyLine p,.tpl-xv-pearl-garden-elegance .familyLine p,.tpl-xv-rose-gold-princess .detailCard,.tpl-xv-pearl-garden-elegance .detailCard,.tpl-xv-rose-gold-princess .timeline div,.tpl-xv-pearl-garden-elegance .timeline div,.tpl-xv-rose-gold-princess .rsvpCard,.tpl-xv-pearl-garden-elegance .rsvpCard,.tpl-xv-rose-gold-princess .shareCard,.tpl-xv-pearl-garden-elegance .shareCard{background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(246,240,230,.86))!important;border:1px solid rgba(167,139,95,.22)!important;color:#2b2520!important;box-shadow:0 20px 56px rgba(78,57,28,.10)!important}
.tpl-xv-royal-violet-luxe .passCard,.tpl-xv-noir-silver-glam .passCard,.tpl-xv-royal-violet-luxe .familyLine p,.tpl-xv-noir-silver-glam .familyLine p,.tpl-xv-royal-violet-luxe .detailCard,.tpl-xv-noir-silver-glam .detailCard,.tpl-xv-royal-violet-luxe .timeline div,.tpl-xv-noir-silver-glam .timeline div,.tpl-xv-royal-violet-luxe .rsvpCard,.tpl-xv-noir-silver-glam .rsvpCard,.tpl-xv-royal-violet-luxe .shareCard,.tpl-xv-noir-silver-glam .shareCard{background:linear-gradient(180deg,rgba(24,24,31,.92),rgba(6,6,9,.90))!important;border:1px solid rgba(216,216,220,.16)!important;color:#f8fafc!important;box-shadow:0 22px 64px rgba(0,0,0,.34)!important}
.tpl-xv-rose-gold-princess .gallery,.tpl-xv-royal-violet-luxe .gallery,.tpl-xv-noir-silver-glam .gallery,.tpl-xv-pearl-garden-elegance .gallery{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:26px!important;max-width:1040px!important;margin:0 auto!important}
.tpl-xv-rose-gold-princess .gallery figure,.tpl-xv-pearl-garden-elegance .gallery figure{padding:12px 12px 22px!important;border-radius:28px!important;background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(246,240,230,.86))!important;border:1px solid rgba(167,139,95,.22)!important;box-shadow:0 22px 60px rgba(78,57,28,.10)!important}
.tpl-xv-royal-violet-luxe .gallery figure,.tpl-xv-noir-silver-glam .gallery figure{padding:12px 12px 22px!important;border-radius:28px!important;background:linear-gradient(180deg,rgba(24,24,31,.96),rgba(6,6,9,.94))!important;border:1px solid rgba(216,216,220,.16)!important;box-shadow:0 24px 72px rgba(0,0,0,.36)!important}
.tpl-xv-rose-gold-princess .gallery img,.tpl-xv-royal-violet-luxe .gallery img,.tpl-xv-noir-silver-glam .gallery img,.tpl-xv-pearl-garden-elegance .gallery img{width:100%!important;height:330px!important;object-fit:cover!important;object-position:center!important;border-radius:20px!important}
.tpl-xv-noir-silver-glam .gallery img{filter:saturate(.72) contrast(1.1) brightness(.88)!important}.tpl-xv-royal-violet-luxe .gallery img{filter:saturate(.9) contrast(1.06) brightness(.92)!important}
.tpl-xv-rose-gold-princess .gallery figcaption,.tpl-xv-pearl-garden-elegance .gallery figcaption,.tpl-xv-royal-violet-luxe .gallery figcaption,.tpl-xv-noir-silver-glam .gallery figcaption{font-family:"Cormorant Garamond","Playfair Display",serif!important;font-size:1.35rem!important;text-align:center!important;margin-top:14px!important}
.tpl-xv-rose-gold-princess .gallery figcaption,.tpl-xv-pearl-garden-elegance .gallery figcaption{color:#2b2520!important}.tpl-xv-royal-violet-luxe .gallery figcaption,.tpl-xv-noir-silver-glam .gallery figcaption{color:#e5e7eb!important}
@media(max-width:860px){.tpl-xv-rose-gold-princess .gallery,.tpl-xv-royal-violet-luxe .gallery,.tpl-xv-noir-silver-glam .gallery,.tpl-xv-pearl-garden-elegance .gallery{grid-template-columns:1fr!important;max-width:560px!important}.tpl-xv-rose-gold-princess .gallery img,.tpl-xv-royal-violet-luxe .gallery img,.tpl-xv-noir-silver-glam .gallery img,.tpl-xv-pearl-garden-elegance .gallery img{height:300px!important}}
@media(max-width:760px){.tpl-xv-rose-gold-princess .premiumHeroCard,.tpl-xv-royal-violet-luxe .premiumHeroCard,.tpl-xv-noir-silver-glam .premiumHeroCard,.tpl-xv-pearl-garden-elegance .premiumHeroCard{padding:26px 18px 40px!important;border-radius:28px!important}.tpl-xv-rose-gold-princess .editorialHeroPhoto img,.tpl-xv-royal-violet-luxe .editorialHeroPhoto img,.tpl-xv-noir-silver-glam .editorialHeroPhoto img,.tpl-xv-pearl-garden-elegance .editorialHeroPhoto img{height:230px!important;border-radius:24px 24px 12px 12px!important}.tpl-xv-rose-gold-princess .timeline,.tpl-xv-royal-violet-luxe .timeline,.tpl-xv-noir-silver-glam .timeline,.tpl-xv-pearl-garden-elegance .timeline{display:grid!important;gap:18px!important;width:min(100%,430px)!important;margin:0 auto!important}.tpl-xv-rose-gold-princess .timeline div,.tpl-xv-royal-violet-luxe .timeline div,.tpl-xv-noir-silver-glam .timeline div,.tpl-xv-pearl-garden-elegance .timeline div{display:flex!important;flex-direction:column!important;align-items:center!important;text-align:center!important;min-height:220px!important;padding:26px 20px!important;border-radius:30px!important}.tpl-xv-rose-gold-princess .gallery img,.tpl-xv-royal-violet-luxe .gallery img,.tpl-xv-noir-silver-glam .gallery img,.tpl-xv-pearl-garden-elegance .gallery img{height:245px!important}}


/* =========================================================
   EventoQR.click V36.20.3.3.2
   XV Demo Safe Loader Fix
   ========================================================= */

/* If a XV demo image is slow, the card still shows a premium background */
.tpl-xv-rose-gold-princess .editorialHeroPhoto,
.tpl-xv-royal-violet-luxe .editorialHeroPhoto,
.tpl-xv-noir-silver-glam .editorialHeroPhoto,
.tpl-xv-pearl-garden-elegance .editorialHeroPhoto{
  min-height:230px;
  border-radius:30px 30px 12px 12px;
}
.tpl-xv-rose-gold-princess .editorialHeroPhoto{background:linear-gradient(135deg,#fff3ee,#f6d7cf,#c98d7e)}
.tpl-xv-royal-violet-luxe .editorialHeroPhoto{background:linear-gradient(135deg,#14091f,#7c4aa8,#d4af37)}
.tpl-xv-noir-silver-glam .editorialHeroPhoto{background:linear-gradient(135deg,#030304,#191b22,#d8d8dc)}
.tpl-xv-pearl-garden-elegance .editorialHeroPhoto{background:linear-gradient(135deg,#fbf6ee,#f4d7cf,#a78b5f)}


/* =========================================================
   EventoQR.click V36.20.3.3.2
   XV Light Text + Parents Center Fix
   Problemas corregidos:
   - La tarjeta de padres/familia quedaba cargada a la izquierda.
   - En plantillas claras, textos secundarios se perdían por estar claros.
   ========================================================= */

/* Center parents / family card in all XV premium templates */
.tpl-xv-rose-gold-princess .familyLine,
.tpl-xv-pearl-garden-elegance .familyLine,
.tpl-xv-royal-violet-luxe .familyLine,
.tpl-xv-noir-silver-glam .familyLine{
  width:min(560px, 100%)!important;
  max-width:560px!important;
  margin:20px auto 26px!important;
  display:grid!important;
  grid-template-columns:1fr!important;
  justify-items:center!important;
  align-items:center!important;
  gap:10px!important;
}

.tpl-xv-rose-gold-princess .familyLine p,
.tpl-xv-pearl-garden-elegance .familyLine p,
.tpl-xv-royal-violet-luxe .familyLine p,
.tpl-xv-noir-silver-glam .familyLine p{
  width:100%!important;
  max-width:360px!important;
  justify-self:center!important;
  margin-left:auto!important;
  margin-right:auto!important;
  text-align:center!important;
  padding:16px 18px!important;
  border-radius:22px!important;
}

/* Light XV templates: force strong dark readable text */
.tpl-xv-rose-gold-princess .passCard,
.tpl-xv-pearl-garden-elegance .passCard,
.tpl-xv-rose-gold-princess .familyLine p,
.tpl-xv-pearl-garden-elegance .familyLine p,
.tpl-xv-rose-gold-princess .countdown div,
.tpl-xv-pearl-garden-elegance .countdown div{
  color:#241f1a!important;
}

.tpl-xv-rose-gold-princess .passCard small,
.tpl-xv-pearl-garden-elegance .passCard small,
.tpl-xv-rose-gold-princess .familyLine span,
.tpl-xv-pearl-garden-elegance .familyLine span,
.tpl-xv-rose-gold-princess .countdown span,
.tpl-xv-pearl-garden-elegance .countdown span,
.tpl-xv-rose-gold-princess .scrollCue,
.tpl-xv-pearl-garden-elegance .scrollCue{
  color:#8f6f45!important;
  opacity:1!important;
  text-shadow:none!important;
  font-weight:900!important;
}

.tpl-xv-rose-gold-princess .passCard strong,
.tpl-xv-pearl-garden-elegance .passCard strong,
.tpl-xv-rose-gold-princess .countdown b,
.tpl-xv-pearl-garden-elegance .countdown b{
  color:#241f1a!important;
  opacity:1!important;
  text-shadow:none!important;
}

.tpl-xv-rose-gold-princess .passCard span,
.tpl-xv-pearl-garden-elegance .passCard span{
  color:#7c5f3a!important;
  opacity:1!important;
  text-shadow:none!important;
  font-weight:800!important;
}

/* Light templates: make the pass card cleaner and more readable */
.tpl-xv-rose-gold-princess .passCard,
.tpl-xv-pearl-garden-elegance .passCard{
  background:
    radial-gradient(circle at top, rgba(255,255,255,.92), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(246,240,230,.90))!important;
  border:1px solid rgba(143,111,69,.24)!important;
  box-shadow:
    0 18px 46px rgba(78,57,28,.12),
    inset 0 1px 0 rgba(255,255,255,.94)!important;
}

/* Light templates: countdown cards should not use white labels */
.tpl-xv-rose-gold-princess .countdown div,
.tpl-xv-pearl-garden-elegance .countdown div{
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(230,222,214,.82))!important;
  border:1px solid rgba(143,111,69,.20)!important;
  box-shadow:0 14px 34px rgba(78,57,28,.10)!important;
}

/* Light templates: scroll cue readable but still subtle */
.tpl-xv-rose-gold-princess .scrollCue,
.tpl-xv-pearl-garden-elegance .scrollCue{
  background:rgba(255,255,255,.72)!important;
  border:1px solid rgba(143,111,69,.16)!important;
  color:#7c5f3a!important;
}

/* Wedding Editorial Ivory also gets the same readability protection */
.tpl-wedding-editorial-ivory .passCard small,
.tpl-wedding-editorial-ivory .passCard span,
.tpl-wedding-editorial-ivory .countdown span,
.tpl-wedding-editorial-ivory .scrollCue{
  color:#7c5f3a!important;
  opacity:1!important;
  text-shadow:none!important;
}

.tpl-wedding-editorial-ivory .passCard strong,
.tpl-wedding-editorial-ivory .countdown b{
  color:#241f1a!important;
  opacity:1!important;
  text-shadow:none!important;
}

/* Mobile: keep parents centered and not too wide */
@media(max-width:760px){
  .tpl-xv-rose-gold-princess .familyLine,
  .tpl-xv-pearl-garden-elegance .familyLine,
  .tpl-xv-royal-violet-luxe .familyLine,
  .tpl-xv-noir-silver-glam .familyLine{
    width:min(100%, 360px)!important;
    margin:18px auto 28px!important;
  }

  .tpl-xv-rose-gold-princess .familyLine p,
  .tpl-xv-pearl-garden-elegance .familyLine p,
  .tpl-xv-royal-violet-luxe .familyLine p,
  .tpl-xv-noir-silver-glam .familyLine p{
    max-width:100%!important;
    padding:15px 14px!important;
  }

  .tpl-xv-rose-gold-princess .passCard,
  .tpl-xv-pearl-garden-elegance .passCard{
    width:min(100%, 380px)!important;
  }
}


/* =========================================================
   EventoQR.click V36.20.3.3.2
   Global Template Readability Rules
   Regla global sin excepción:
   - Familia / Padres siempre centrado.
   - Tarjetas principales siempre con texto legible.
   - Cuenta regresiva siempre con labels visibles.
   - Scroll cue siempre visible.
   ========================================================= */

/* 1) Family / parents block centered for EVERY template */
body.view .invitePage .familyLine{
  width:min(560px, 100%)!important;
  max-width:560px!important;
  margin:20px auto 26px!important;
  display:grid!important;
  grid-template-columns:1fr!important;
  justify-items:center!important;
  align-items:center!important;
  gap:10px!important;
}

body.view .invitePage .familyLine p{
  width:100%!important;
  max-width:380px!important;
  justify-self:center!important;
  margin-left:auto!important;
  margin-right:auto!important;
  text-align:center!important;
  padding:16px 18px!important;
  border-radius:22px!important;
}

/* 2) Pass card global structure: no more washed-out text */
body.view .invitePage .passCard{
  width:min(560px, 100%)!important;
  margin-left:auto!important;
  margin-right:auto!important;
  text-align:center!important;
  isolation:isolate!important;
}

body.view .invitePage .passCard small,
body.view .invitePage .passCard span,
body.view .invitePage .familyLine span,
body.view .invitePage .countdown span,
body.view .invitePage .scrollCue{
  opacity:1!important;
  text-shadow:none!important;
  font-weight:900!important;
}

body.view .invitePage .passCard strong,
body.view .invitePage .countdown b{
  opacity:1!important;
  text-shadow:none!important;
  font-weight:900!important;
}

/* 3) Universal dark-template readability */
body.view .invitePage.theme-pearl-noir .passCard small,
body.view .invitePage.theme-pearl-noir .passCard span,
body.view .invitePage.theme-pearl-noir .familyLine span,
body.view .invitePage.theme-pearl-noir .countdown span,
body.view .invitePage.theme-pearl-noir .scrollCue,
body.view .invitePage.theme-noir-silver .passCard small,
body.view .invitePage.theme-noir-silver .passCard span,
body.view .invitePage.theme-noir-silver .familyLine span,
body.view .invitePage.theme-noir-silver .countdown span,
body.view .invitePage.theme-noir-silver .scrollCue,
body.view .invitePage.theme-noir-silver-glam .passCard small,
body.view .invitePage.theme-noir-silver-glam .passCard span,
body.view .invitePage.theme-noir-silver-glam .familyLine span,
body.view .invitePage.theme-noir-silver-glam .countdown span,
body.view .invitePage.theme-noir-silver-glam .scrollCue,
body.view .invitePage.theme-royal-violet-luxe .passCard small,
body.view .invitePage.theme-royal-violet-luxe .passCard span,
body.view .invitePage.theme-royal-violet-luxe .familyLine span,
body.view .invitePage.theme-royal-violet-luxe .countdown span,
body.view .invitePage.theme-royal-violet-luxe .scrollCue,
body.view .invitePage.tpl-graduation-noir-gold .passCard small,
body.view .invitePage.tpl-graduation-noir-gold .passCard span,
body.view .invitePage.tpl-graduation-noir-gold .familyLine span,
body.view .invitePage.tpl-graduation-noir-gold .countdown span,
body.view .invitePage.tpl-graduation-noir-gold .scrollCue{
  color:#cbd5e1!important;
}

body.view .invitePage.theme-pearl-noir .passCard strong,
body.view .invitePage.theme-pearl-noir .countdown b,
body.view .invitePage.theme-noir-silver .passCard strong,
body.view .invitePage.theme-noir-silver .countdown b,
body.view .invitePage.theme-noir-silver-glam .passCard strong,
body.view .invitePage.theme-noir-silver-glam .countdown b,
body.view .invitePage.theme-royal-violet-luxe .passCard strong,
body.view .invitePage.theme-royal-violet-luxe .countdown b,
body.view .invitePage.tpl-graduation-noir-gold .passCard strong,
body.view .invitePage.tpl-graduation-noir-gold .countdown b{
  color:#f8fafc!important;
}

/* 4) Universal light-template readability */
body.view .invitePage:not(.theme-pearl-noir):not(.theme-noir-silver):not(.theme-noir-silver-glam):not(.theme-royal-violet-luxe):not(.tpl-graduation-noir-gold) .passCard small,
body.view .invitePage:not(.theme-pearl-noir):not(.theme-noir-silver):not(.theme-noir-silver-glam):not(.theme-royal-violet-luxe):not(.tpl-graduation-noir-gold) .passCard span,
body.view .invitePage:not(.theme-pearl-noir):not(.theme-noir-silver):not(.theme-noir-silver-glam):not(.theme-royal-violet-luxe):not(.tpl-graduation-noir-gold) .familyLine span,
body.view .invitePage:not(.theme-pearl-noir):not(.theme-noir-silver):not(.theme-noir-silver-glam):not(.theme-royal-violet-luxe):not(.tpl-graduation-noir-gold) .countdown span,
body.view .invitePage:not(.theme-pearl-noir):not(.theme-noir-silver):not(.theme-noir-silver-glam):not(.theme-royal-violet-luxe):not(.tpl-graduation-noir-gold) .scrollCue{
  color:#7c5f3a!important;
}

body.view .invitePage:not(.theme-pearl-noir):not(.theme-noir-silver):not(.theme-noir-silver-glam):not(.theme-royal-violet-luxe):not(.tpl-graduation-noir-gold) .passCard strong,
body.view .invitePage:not(.theme-pearl-noir):not(.theme-noir-silver):not(.theme-noir-silver-glam):not(.theme-royal-violet-luxe):not(.tpl-graduation-noir-gold) .countdown b,
body.view .invitePage:not(.theme-pearl-noir):not(.theme-noir-silver):not(.theme-noir-silver-glam):not(.theme-royal-violet-luxe):not(.tpl-graduation-noir-gold) .familyLine p{
  color:#241f1a!important;
}

/* 5) Countdown cards consistent and readable */
body.view .invitePage .countdown{
  width:min(560px, 100%)!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

body.view .invitePage .countdown div{
  text-align:center!important;
  border-radius:18px!important;
  overflow:hidden!important;
}

/* 6) Mobile global rule */
@media(max-width:760px){
  body.view .invitePage .familyLine{
    width:min(100%, 360px)!important;
    margin:18px auto 28px!important;
  }

  body.view .invitePage .familyLine p{
    max-width:100%!important;
    padding:15px 14px!important;
  }

  body.view .invitePage .passCard{
    width:min(100%, 380px)!important;
  }

  body.view .invitePage .countdown{
    width:min(100%, 380px)!important;
  }
}


/* =========================================================
   EventoQR.click V36.20.3.3.2
   Global XV-Inspired Structure Upgrade
   Inspirado en invitaciones completas tipo landing:
   - Guía de invitados
   - Pase digital destacado
   - Hospedaje
   - Hashtag / redes
   - Mesa de regalos / lluvia de sobres
   Aplica a todo el sitio de invitaciones.
   ========================================================= */

body.view .premiumInfoGrid{
  width:min(1040px, 100%)!important;
  margin:0 auto!important;
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:18px!important;
}

body.view .premiumInfoCard{
  position:relative!important;
  min-height:190px!important;
  padding:24px 22px!important;
  border-radius:28px!important;
  text-align:center!important;
  text-decoration:none!important;
  overflow:hidden!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  background:
    radial-gradient(circle at top, rgba(255,255,255,.16), transparent 42%),
    linear-gradient(180deg, rgba(255,255,255,.88), rgba(246,240,230,.80))!important;
  border:1px solid rgba(143,111,69,.18)!important;
  color:#241f1a!important;
  box-shadow:
    0 18px 48px rgba(78,57,28,.10),
    inset 0 1px 0 rgba(255,255,255,.82)!important;
}

body.view .premiumInfoCard::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.26),transparent 46%,rgba(0,0,0,.04));
  pointer-events:none;
}

body.view .premiumInfoCard i{
  width:48px!important;
  height:48px!important;
  border-radius:18px!important;
  display:grid!important;
  place-items:center!important;
  font-style:normal!important;
  font-weight:1000!important;
  color:#fff!important;
  background:linear-gradient(135deg,var(--event-primary,#d4af37),#8b5cf6)!important;
  box-shadow:0 12px 28px rgba(0,0,0,.16)!important;
}

body.view .premiumInfoCard small{
  position:relative;
  z-index:1;
  color:#8f6f45!important;
  font-size:.72rem!important;
  letter-spacing:.16em!important;
  text-transform:uppercase!important;
  font-weight:1000!important;
}

body.view .premiumInfoCard strong{
  position:relative;
  z-index:1;
  color:#241f1a!important;
  font-size:1.25rem!important;
  line-height:1.12!important;
  font-weight:900!important;
}

body.view .premiumInfoCard p{
  position:relative;
  z-index:1;
  margin:0!important;
  color:#51453a!important;
  line-height:1.45!important;
  font-size:.95rem!important;
}

body.view .premiumInfoCard span{
  position:relative;
  z-index:1;
  color:#8f6f45!important;
  font-weight:1000!important;
  font-size:.82rem!important;
}

/* Dark templates: premium info cards invert automatically */
body.view .invitePage.theme-pearl-noir .premiumInfoCard,
body.view .invitePage.theme-noir-silver .premiumInfoCard,
body.view .invitePage.theme-noir-silver-glam .premiumInfoCard,
body.view .invitePage.theme-royal-violet-luxe .premiumInfoCard,
body.view .invitePage.tpl-graduation-noir-gold .premiumInfoCard{
  background:
    radial-gradient(circle at top, rgba(255,255,255,.12), transparent 44%),
    linear-gradient(180deg, rgba(24,24,31,.92), rgba(6,6,9,.90))!important;
  border:1px solid rgba(216,216,220,.16)!important;
  color:#f8fafc!important;
  box-shadow:0 22px 64px rgba(0,0,0,.34)!important;
}

body.view .invitePage.theme-pearl-noir .premiumInfoCard strong,
body.view .invitePage.theme-noir-silver .premiumInfoCard strong,
body.view .invitePage.theme-noir-silver-glam .premiumInfoCard strong,
body.view .invitePage.theme-royal-violet-luxe .premiumInfoCard strong,
body.view .invitePage.tpl-graduation-noir-gold .premiumInfoCard strong{
  color:#f8fafc!important;
}

body.view .invitePage.theme-pearl-noir .premiumInfoCard p,
body.view .invitePage.theme-noir-silver .premiumInfoCard p,
body.view .invitePage.theme-noir-silver-glam .premiumInfoCard p,
body.view .invitePage.theme-royal-violet-luxe .premiumInfoCard p,
body.view .invitePage.tpl-graduation-noir-gold .premiumInfoCard p{
  color:#cbd5e1!important;
}

body.view .invitePage.theme-pearl-noir .premiumInfoCard small,
body.view .invitePage.theme-noir-silver .premiumInfoCard small,
body.view .invitePage.theme-noir-silver-glam .premiumInfoCard small,
body.view .invitePage.theme-royal-violet-luxe .premiumInfoCard small,
body.view .invitePage.tpl-graduation-noir-gold .premiumInfoCard small,
body.view .invitePage.theme-pearl-noir .premiumInfoCard span,
body.view .invitePage.theme-noir-silver .premiumInfoCard span,
body.view .invitePage.theme-noir-silver-glam .premiumInfoCard span,
body.view .invitePage.theme-royal-violet-luxe .premiumInfoCard span,
body.view .invitePage.tpl-graduation-noir-gold .premiumInfoCard span{
  color:#d8d8dc!important;
}

/* Registry upgrade */
body.view .registryCard{
  width:min(1040px,100%)!important;
  margin:0 auto!important;
  border-radius:30px!important;
  padding:20px!important;
  background:
    radial-gradient(circle at top, rgba(255,255,255,.18), transparent 42%),
    linear-gradient(180deg, rgba(255,255,255,.88), rgba(246,240,230,.78))!important;
  border:1px solid rgba(143,111,69,.18)!important;
  box-shadow:0 18px 48px rgba(78,57,28,.10)!important;
}

body.view .registryGrid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:16px!important;
}

body.view .registryItem{
  border-radius:24px!important;
  padding:22px!important;
  text-align:center!important;
}

body.view .registryItem small{
  color:#8f6f45!important;
  opacity:1!important;
}

body.view .registryItem strong{
  color:#241f1a!important;
  opacity:1!important;
}

body.view .registryItem p{
  color:#51453a!important;
  opacity:1!important;
}

body.view .registryItem span{
  color:#8f6f45!important;
  opacity:1!important;
  font-weight:1000!important;
}

body.view .invitePage.theme-pearl-noir .registryCard,
body.view .invitePage.theme-noir-silver .registryCard,
body.view .invitePage.theme-noir-silver-glam .registryCard,
body.view .invitePage.theme-royal-violet-luxe .registryCard,
body.view .invitePage.tpl-graduation-noir-gold .registryCard{
  background:linear-gradient(180deg, rgba(24,24,31,.92), rgba(6,6,9,.90))!important;
  border:1px solid rgba(216,216,220,.16)!important;
  box-shadow:0 22px 64px rgba(0,0,0,.34)!important;
}

body.view .invitePage.theme-pearl-noir .registryItem strong,
body.view .invitePage.theme-noir-silver .registryItem strong,
body.view .invitePage.theme-noir-silver-glam .registryItem strong,
body.view .invitePage.theme-royal-violet-luxe .registryItem strong,
body.view .invitePage.tpl-graduation-noir-gold .registryItem strong{
  color:#f8fafc!important;
}

body.view .invitePage.theme-pearl-noir .registryItem p,
body.view .invitePage.theme-noir-silver .registryItem p,
body.view .invitePage.theme-noir-silver-glam .registryItem p,
body.view .invitePage.theme-royal-violet-luxe .registryItem p,
body.view .invitePage.tpl-graduation-noir-gold .registryItem p{
  color:#cbd5e1!important;
}

body.view .invitePage.theme-pearl-noir .registryItem small,
body.view .invitePage.theme-noir-silver .registryItem small,
body.view .invitePage.theme-noir-silver-glam .registryItem small,
body.view .invitePage.theme-royal-violet-luxe .registryItem small,
body.view .invitePage.tpl-graduation-noir-gold .registryItem small,
body.view .invitePage.theme-pearl-noir .registryItem span,
body.view .invitePage.theme-noir-silver .registryItem span,
body.view .invitePage.theme-noir-silver-glam .registryItem span,
body.view .invitePage.theme-royal-violet-luxe .registryItem span,
body.view .invitePage.tpl-graduation-noir-gold .registryItem span{
  color:#d8d8dc!important;
}

/* Mobile */
@media(max-width:860px){
  body.view .premiumInfoGrid{
    grid-template-columns:1fr!important;
    max-width:560px!important;
  }

  body.view .registryGrid{
    grid-template-columns:1fr!important;
  }
}

@media(max-width:520px){
  body.view .premiumInfoCard{
    min-height:164px!important;
    padding:22px 18px!important;
    border-radius:26px!important;
  }

  body.view .registryCard{
    padding:14px!important;
    border-radius:26px!important;
  }
}


/* =========================================================
   EventoQR.click V36.20.3.3.2
   Wedding Story Flow Olympus Upgrade
   ========================================================= */

body.view .storySaveDateSection,
body.view .storyFamilySection,
body.view .storyPhotoBreak,
body.view .rsvpStoryIntro{
  width:100%!important;
}

body.view .storyDateCard,
body.view .storyFamilyCard,
body.view .rsvpStoryIntro > div{
  width:min(720px, 100%)!important;
  margin:0 auto!important;
  padding:42px 28px!important;
  border-radius:34px!important;
  text-align:center!important;
  position:relative!important;
  overflow:hidden!important;
  background:
    radial-gradient(circle at top, rgba(255,255,255,.78), transparent 46%),
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(246,240,230,.86))!important;
  border:1px solid rgba(143,111,69,.20)!important;
  box-shadow:0 28px 82px rgba(78,57,28,.12), inset 0 1px 0 rgba(255,255,255,.82)!important;
}

body.view .storyDateCard::before,
body.view .storyFamilyCard::before,
body.view .rsvpStoryIntro > div::before{
  content:"";
  position:absolute;
  inset:14px;
  border:1px solid rgba(143,111,69,.15);
  border-radius:28px;
  pointer-events:none;
}

body.view .storyDateCard small,
body.view .storyFamilyCard small,
body.view .rsvpStoryIntro small{
  display:block!important;
  color:#8f6f45!important;
  text-transform:uppercase!important;
  letter-spacing:.18em!important;
  font-size:.76rem!important;
  font-weight:1000!important;
  margin-bottom:12px!important;
}

body.view .storyDateCard b{
  display:block!important;
  color:#241f1a!important;
  font-family:"Cormorant Garamond","Playfair Display",serif!important;
  font-size:clamp(4.5rem, 13vw, 8rem)!important;
  line-height:.82!important;
  font-weight:500!important;
}

body.view .storyDateCard span{
  display:block!important;
  color:var(--event-primary,#d4af37)!important;
  font-family:"Cormorant Garamond","Playfair Display",serif!important;
  font-size:clamp(1.8rem, 5vw, 2.8rem)!important;
  line-height:1!important;
  text-transform:uppercase!important;
  letter-spacing:.08em!important;
  font-weight:700!important;
}

body.view .storyDateCard strong{
  display:block!important;
  color:#241f1a!important;
  font-family:"Great Vibes","Cormorant Garamond",serif!important;
  font-size:clamp(3.2rem, 9vw, 5.4rem)!important;
  line-height:1!important;
  font-weight:400!important;
  margin:5px 0 14px!important;
}

body.view .storyDateCard em,
body.view .scriptLine,
body.view .storyPhotoBreak p,
body.view .rsvpStoryIntro h2{
  display:block!important;
  color:#241f1a!important;
  font-family:"Great Vibes","Cormorant Garamond",serif!important;
  font-size:clamp(1.8rem, 4vw, 2.7rem)!important;
  line-height:1.25!important;
  font-style:normal!important;
  font-weight:400!important;
  margin:0 auto 22px!important;
  max-width:660px!important;
}

body.view .storyFamilyNames{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:18px!important;
  margin:22px auto!important;
  max-width:640px!important;
}

body.view .storyFamilyNames article{
  padding:22px!important;
  border-radius:26px!important;
  border:1px solid rgba(143,111,69,.18)!important;
  background:rgba(255,255,255,.58)!important;
}

body.view .storyFamilyNames strong{
  display:block!important;
  color:#241f1a!important;
  font-size:1.08rem!important;
  line-height:1.45!important;
  white-space:pre-line!important;
}

body.view .storyFamilyCard .final{
  margin-top:14px!important;
}

body.view .storyPhotoBreak{
  text-align:center!important;
}

body.view .storyPhotoBreak figure{
  width:min(720px, 100%)!important;
  margin:22px auto 0!important;
  border-radius:34px!important;
  overflow:hidden!important;
  box-shadow:0 28px 82px rgba(0,0,0,.18)!important;
  background:#fff!important;
  border:1px solid rgba(143,111,69,.18)!important;
}

body.view .storyPhotoBreak img{
  display:block!important;
  width:100%!important;
  height:auto!important;
  max-height:820px!important;
  object-fit:cover!important;
  object-position:center!important;
}

body.view .rsvpStoryIntro h2{
  margin-bottom:10px!important;
}

body.view .rsvpStoryIntro p{
  color:#51453a!important;
  font-size:1.05rem!important;
  line-height:1.55!important;
  margin:0 auto 22px!important;
  max-width:560px!important;
}

body.view .invitePage[class*="tpl-wedding"] .detailGrid,
body.view .tpl-wedding-editorial-ivory .detailGrid,
body.view .tpl-wedding-noir-silver .detailGrid{
  width:min(720px,100%)!important;
  margin-left:auto!important;
  margin-right:auto!important;
  grid-template-columns:1fr!important;
  gap:0!important;
  padding:28px!important;
  border-radius:34px!important;
  border:1px solid rgba(143,111,69,.22)!important;
  background:linear-gradient(180deg, rgba(255,255,255,.94), rgba(246,240,230,.84))!important;
  box-shadow:0 24px 72px rgba(78,57,28,.10)!important;
}

body.view .invitePage[class*="tpl-wedding"] .detailCard,
body.view .tpl-wedding-editorial-ivory .detailCard,
body.view .tpl-wedding-noir-silver .detailCard{
  box-shadow:none!important;
  border-radius:0!important;
  border:0!important;
  border-bottom:1px solid rgba(143,111,69,.18)!important;
  background:transparent!important;
  padding:34px 20px!important;
}

body.view .invitePage[class*="tpl-wedding"] .detailCard:last-child,
body.view .tpl-wedding-editorial-ivory .detailCard:last-child,
body.view .tpl-wedding-noir-silver .detailCard:last-child{
  border-bottom:0!important;
}

body.view .invitePage.theme-noir-silver .storyDateCard,
body.view .invitePage.theme-noir-silver .storyFamilyCard,
body.view .invitePage.theme-noir-silver .rsvpStoryIntro > div,
body.view .invitePage.theme-noir-silver-glam .storyDateCard,
body.view .invitePage.theme-noir-silver-glam .storyFamilyCard,
body.view .invitePage.theme-noir-silver-glam .rsvpStoryIntro > div,
body.view .invitePage.theme-royal-violet-luxe .storyDateCard,
body.view .invitePage.theme-royal-violet-luxe .storyFamilyCard,
body.view .invitePage.theme-royal-violet-luxe .rsvpStoryIntro > div,
body.view .invitePage.theme-pearl-noir .storyDateCard,
body.view .invitePage.theme-pearl-noir .storyFamilyCard,
body.view .invitePage.theme-pearl-noir .rsvpStoryIntro > div{
  background:linear-gradient(180deg, rgba(24,24,31,.94), rgba(6,6,9,.90))!important;
  border:1px solid rgba(216,216,220,.16)!important;
  box-shadow:0 28px 82px rgba(0,0,0,.34)!important;
}

body.view .invitePage.theme-noir-silver .storyDateCard b,
body.view .invitePage.theme-noir-silver .storyDateCard strong,
body.view .invitePage.theme-noir-silver .storyDateCard em,
body.view .invitePage.theme-noir-silver .scriptLine,
body.view .invitePage.theme-noir-silver .storyPhotoBreak p,
body.view .invitePage.theme-noir-silver .rsvpStoryIntro h2,
body.view .invitePage.theme-noir-silver .storyFamilyNames strong,
body.view .invitePage.theme-noir-silver-glam .storyDateCard b,
body.view .invitePage.theme-noir-silver-glam .storyDateCard strong,
body.view .invitePage.theme-noir-silver-glam .storyDateCard em,
body.view .invitePage.theme-noir-silver-glam .scriptLine,
body.view .invitePage.theme-noir-silver-glam .storyPhotoBreak p,
body.view .invitePage.theme-noir-silver-glam .rsvpStoryIntro h2,
body.view .invitePage.theme-noir-silver-glam .storyFamilyNames strong,
body.view .invitePage.theme-royal-violet-luxe .storyDateCard b,
body.view .invitePage.theme-royal-violet-luxe .storyDateCard strong,
body.view .invitePage.theme-royal-violet-luxe .storyDateCard em,
body.view .invitePage.theme-royal-violet-luxe .scriptLine,
body.view .invitePage.theme-royal-violet-luxe .storyPhotoBreak p,
body.view .invitePage.theme-royal-violet-luxe .rsvpStoryIntro h2,
body.view .invitePage.theme-royal-violet-luxe .storyFamilyNames strong,
body.view .invitePage.theme-pearl-noir .storyDateCard b,
body.view .invitePage.theme-pearl-noir .storyDateCard strong,
body.view .invitePage.theme-pearl-noir .storyDateCard em,
body.view .invitePage.theme-pearl-noir .scriptLine,
body.view .invitePage.theme-pearl-noir .storyPhotoBreak p,
body.view .invitePage.theme-pearl-noir .rsvpStoryIntro h2,
body.view .invitePage.theme-pearl-noir .storyFamilyNames strong{
  color:#f8fafc!important;
}

body.view .invitePage.theme-noir-silver .storyFamilyNames article,
body.view .invitePage.theme-noir-silver-glam .storyFamilyNames article,
body.view .invitePage.theme-royal-violet-luxe .storyFamilyNames article,
body.view .invitePage.theme-pearl-noir .storyFamilyNames article{
  background:rgba(255,255,255,.07)!important;
  border-color:rgba(216,216,220,.16)!important;
}

body.view .invitePage.theme-noir-silver .rsvpStoryIntro p,
body.view .invitePage.theme-noir-silver-glam .rsvpStoryIntro p,
body.view .invitePage.theme-royal-violet-luxe .rsvpStoryIntro p,
body.view .invitePage.theme-pearl-noir .rsvpStoryIntro p{
  color:#cbd5e1!important;
}

body.view .invitePage.theme-noir-silver .detailGrid,
body.view .invitePage.theme-noir-silver-glam .detailGrid,
body.view .invitePage.theme-royal-violet-luxe .detailGrid,
body.view .invitePage.theme-pearl-noir .detailGrid{
  background:linear-gradient(180deg, rgba(24,24,31,.94), rgba(6,6,9,.90))!important;
  border-color:rgba(216,216,220,.16)!important;
  box-shadow:0 28px 82px rgba(0,0,0,.34)!important;
}

@media(max-width:760px){
  body.view .storyDateCard,
  body.view .storyFamilyCard,
  body.view .rsvpStoryIntro > div{
    padding:34px 20px!important;
    border-radius:30px!important;
  }

  body.view .storyFamilyNames{
    grid-template-columns:1fr!important;
  }

  body.view .storyPhotoBreak figure{
    border-radius:28px!important;
  }

  body.view .invitePage[class*="tpl-wedding"] .detailGrid,
  body.view .tpl-wedding-editorial-ivory .detailGrid,
  body.view .tpl-wedding-noir-silver .detailGrid{
    padding:18px!important;
    border-radius:30px!important;
  }
}


/* =========================================================
   EventoQR.click V36.20.3.3.2
   Admin Fields for Story Flow + WhatsApp Preview
   ========================================================= */

.storyFlowBlock{
  border-color:rgba(212,175,55,.28)!important;
  background:
    radial-gradient(circle at 100% 0%, rgba(212,175,55,.10), transparent 38%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02))!important;
}

.storyFlowBlock h2 small{
  color:#d4af37!important;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.subBlockTitle{
  margin:18px 0 8px!important;
  color:#e5e7eb!important;
  font-size:1rem!important;
}

body.view .shareCard p{
  word-break:break-word!important;
}

body.view .rsvpStoryIntro p{
  white-space:normal!important;
}


/* =========================================================
   EventoQR.click V36.20.3.3.2
   Global Premium Story Cleanup
   Regla del cliente:
   - Lo verde es el estándar global premium.
   - Lo rojo se elimina/cambia en todas las invitaciones.
   ========================================================= */

/* Hide bulky utility sections globally if an old cached render or custom HTML still prints them */
body.view .invitePage section:has(.linkGrid),
body.view .invitePage section#lodging,
body.view .invitePage section#social,
body.view .invitePage section#gifts{
  display:none!important;
}

/* The premium story flow becomes the visual language for every template */
body.view .storySaveDateSection,
body.view .storyFamilySection,
body.view .storyPhotoBreak,
body.view .rsvpStoryIntro{
  width:100%!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

/* Save date card: premium but clean */
body.view .storyDateCard{
  width:min(760px, calc(100% - 28px))!important;
  margin:0 auto!important;
  border-radius:34px!important;
  text-align:center!important;
}

/* Parents/family info: always centered and compact */
body.view .storyFamilyCard{
  width:min(760px, calc(100% - 28px))!important;
  margin:0 auto!important;
  text-align:center!important;
}

body.view .storyFamilyNames{
  display:grid!important;
  grid-template-columns:1fr!important;
  justify-items:center!important;
  align-items:center!important;
  gap:14px!important;
  width:100%!important;
  max-width:560px!important;
  margin:24px auto!important;
}

body.view .storyFamilyNames article{
  width:min(420px,100%)!important;
  max-width:420px!important;
  margin:0 auto!important;
  text-align:center!important;
}

body.view .storyFamilyNames article small,
body.view .storyFamilyNames article strong{
  text-align:center!important;
}

/* Prevent old hero parent card from appearing on cached old templates */
body.view .inviteHero .familyLine{
  display:none!important;
}

/* Ceremony/reception/details now behave like the premium reference, globally */
body.view .detailGrid{
  width:min(760px, calc(100% - 28px))!important;
  margin-left:auto!important;
  margin-right:auto!important;
  grid-template-columns:1fr!important;
  gap:0!important;
  padding:28px!important;
  border-radius:34px!important;
  border:1px solid rgba(143,111,69,.22)!important;
  background:linear-gradient(180deg, rgba(255,255,255,.94), rgba(246,240,230,.84))!important;
  box-shadow:0 24px 72px rgba(78,57,28,.10)!important;
}

body.view .detailCard{
  box-shadow:none!important;
  border-radius:0!important;
  border:0!important;
  border-bottom:1px solid rgba(143,111,69,.18)!important;
  background:transparent!important;
  padding:34px 20px!important;
  text-align:center!important;
}

body.view .detailCard:last-child{
  border-bottom:0!important;
}

/* Keep map buttons inside details, but elegant */
body.view .detailCard .btn,
body.view .detailCard a.btn,
body.view .detailCard a{
  margin-left:auto!important;
  margin-right:auto!important;
}

/* Photo breaks are the premium storytelling style */
body.view .storyPhotoBreak{
  width:min(760px, calc(100% - 28px))!important;
  margin-left:auto!important;
  margin-right:auto!important;
  text-align:center!important;
}

body.view .storyPhotoBreak p{
  width:min(680px,100%)!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

body.view .storyPhotoBreak figure{
  width:min(720px, 100%)!important;
  margin:22px auto 0!important;
  border-radius:34px!important;
}

body.view .storyPhotoBreak img{
  width:100%!important;
  height:auto!important;
  object-fit:cover!important;
  object-position:center!important;
}

/* Gallery should not feel like a utility block; make it premium and centered */
body.view .gallery{
  width:min(900px, calc(100% - 28px))!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

/* Dark templates keep the same structure but correct contrast */
body.view .invitePage.theme-noir-silver .detailGrid,
body.view .invitePage.theme-noir-silver-glam .detailGrid,
body.view .invitePage.theme-royal-violet-luxe .detailGrid,
body.view .invitePage.theme-pearl-noir .detailGrid,
body.view .tpl-graduation-noir-gold .detailGrid{
  background:linear-gradient(180deg, rgba(24,24,31,.94), rgba(6,6,9,.90))!important;
  border-color:rgba(216,216,220,.16)!important;
  box-shadow:0 28px 82px rgba(0,0,0,.34)!important;
}

body.view .invitePage.theme-noir-silver .detailCard,
body.view .invitePage.theme-noir-silver-glam .detailCard,
body.view .invitePage.theme-royal-violet-luxe .detailCard,
body.view .invitePage.theme-pearl-noir .detailCard,
body.view .tpl-graduation-noir-gold .detailCard{
  border-bottom-color:rgba(216,216,220,.16)!important;
}

/* RSVP keeps conversion focus */
body.view .rsvpStoryIntro{
  width:min(760px, calc(100% - 28px))!important;
}

/* Mobile polish */
@media(max-width:760px){
  body.view .storyDateCard,
  body.view .storyFamilyCard,
  body.view .rsvpStoryIntro > div,
  body.view .detailGrid{
    width:min(100% - 18px, 430px)!important;
    padding:24px 16px!important;
    border-radius:28px!important;
  }

  body.view .detailCard{
    padding:28px 10px!important;
  }

  body.view .storyFamilyNames article{
    width:100%!important;
  }

  body.view .storyPhotoBreak{
    width:min(100% - 18px, 430px)!important;
  }

  body.view .storyPhotoBreak figure{
    border-radius:28px!important;
  }
}


/* =========================================================
   EventoQR.click V36.20.3.3.2
   Global Premium Typography System
   Regla del cliente:
   - La misma tipografía premium/script se usa en TODAS las invitaciones.
   - Mantiene legibilidad: script para frases emocionales, serif para nombres/títulos,
     sans para botones/labels/inputs.
   ========================================================= */

:root{
  --eqr-font-script:"Great Vibes", "Brush Script MT", cursive;
  --eqr-font-serif:"Cormorant Garamond", "Playfair Display", Georgia, serif;
  --eqr-font-body:"Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Global invitation base */
body.view .invitePage{
  font-family:var(--eqr-font-body)!important;
}

/* Main invitation titles across every template */
body.view .invitePage .inviteCard h1,
body.view .invitePage .sectionHead h2,
body.view .invitePage .storyDateCard b,
body.view .invitePage .storyDateCard span,
body.view .invitePage .detailCard strong,
body.view .invitePage .premiumInfoCard strong,
body.view .invitePage .registryItem strong,
body.view .invitePage .passCard strong,
body.view .invitePage .gallery figcaption{
  font-family:var(--eqr-font-serif)!important;
}

/* Names, romantic titles, and emotional headings */
body.view .invitePage .titleStack h2,
body.view .invitePage .storyDateCard strong,
body.view .invitePage .storyDateCard em,
body.view .invitePage .scriptLine,
body.view .invitePage .storyPhotoBreak p,
body.view .invitePage .rsvpStoryIntro h2,
body.view .invitePage .welcome,
body.view .invitePage .dateLine,
body.view .invitePage .detailCard h3,
body.view .invitePage .detailCard .detailTitle,
body.view .invitePage .timeline strong{
  font-family:var(--eqr-font-script)!important;
  font-weight:400!important;
  letter-spacing:0!important;
}

/* Global script sizing: premium but controlled */
body.view .invitePage .scriptLine,
body.view .invitePage .storyPhotoBreak p,
body.view .invitePage .storyDateCard em{
  font-size:clamp(2.05rem, 4.8vw, 3.1rem)!important;
  line-height:1.28!important;
}

body.view .invitePage .rsvpStoryIntro h2{
  font-size:clamp(2.6rem, 6.4vw, 4.4rem)!important;
  line-height:1.05!important;
}

body.view .invitePage .titleStack h2{
  font-size:clamp(3.4rem, 11vw, 6.6rem)!important;
  line-height:.95!important;
}

body.view .invitePage .dateLine{
  font-size:clamp(1.7rem, 4.6vw, 2.4rem)!important;
  line-height:1.28!important;
}

body.view .invitePage .welcome{
  font-size:clamp(1.35rem, 3.2vw, 2rem)!important;
  line-height:1.42!important;
}

/* Hero titles stay elegant and readable */
body.view .invitePage .inviteCard h1{
  font-family:var(--eqr-font-serif)!important;
  font-weight:600!important;
  letter-spacing:.055em!important;
}

body.view .invitePage .storyDateCard b{
  font-family:var(--eqr-font-serif)!important;
  font-weight:500!important;
}

body.view .invitePage .storyDateCard span{
  font-family:var(--eqr-font-serif)!important;
  font-weight:700!important;
  letter-spacing:.11em!important;
  text-transform:uppercase!important;
}

/* Detail cards: titles script, content readable */
body.view .invitePage .detailCard strong:first-of-type,
body.view .invitePage .detailCard h3{
  font-family:var(--eqr-font-script)!important;
  font-size:clamp(2.25rem, 5.8vw, 3.4rem)!important;
  line-height:1.05!important;
  font-weight:400!important;
}

body.view .invitePage .detailCard p,
body.view .invitePage .detailCard address,
body.view .invitePage .detailCard time,
body.view .invitePage .passCard,
body.view .invitePage .premiumInfoCard p,
body.view .invitePage .registryItem p,
body.view .invitePage .rsvpStoryIntro p,
body.view .invitePage .input,
body.view .invitePage textarea{
  font-family:var(--eqr-font-body)!important;
}

/* Labels and buttons stay professional */
body.view .invitePage .badge,
body.view .invitePage .miniBadge,
body.view .invitePage small,
body.view .invitePage .btn,
body.view .invitePage button,
body.view .invitePage .menuLabel,
body.view .invitePage .floatingMenu,
body.view .invitePage .countdown span,
body.view .invitePage .countdown b,
body.view .invitePage .passCard small,
body.view .invitePage .passCard span,
body.view .invitePage .familyLine span,
body.view .invitePage .storyFamilyNames small,
body.view .invitePage .sectionHead small,
body.view .invitePage .rsvpDeadline{
  font-family:var(--eqr-font-body)!important;
}

/* Parents/family block: centered with the same premium typography */
body.view .invitePage .storyFamilyCard{
  text-align:center!important;
}

body.view .invitePage .storyFamilyNames article{
  text-align:center!important;
}

body.view .invitePage .storyFamilyNames strong{
  font-family:var(--eqr-font-body)!important;
  font-weight:800!important;
  line-height:1.45!important;
}

/* Old family line fallback if any template still renders it */
body.view .invitePage .familyLine p{
  text-align:center!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

body.view .invitePage .familyLine p strong{
  font-family:var(--eqr-font-body)!important;
}

/* Timeline program looks like invitation, not dashboard */
body.view .invitePage .timeline strong{
  font-size:clamp(2rem, 5vw, 3rem)!important;
  line-height:1.08!important;
  text-align:center!important;
}

body.view .invitePage .timeline p,
body.view .invitePage .timeline time{
  font-family:var(--eqr-font-body)!important;
}

/* Catalog preview cards also inherit the same brand typography */
.catalogPreview h3,
.templateCardPick h3,
.previewCard h3{
  font-family:var(--eqr-font-serif)!important;
}

.catalogPreview .script,
.templateCardPick .script,
.previewCard .script{
  font-family:var(--eqr-font-script)!important;
}

/* Mobile tuning */
@media(max-width:760px){
  body.view .invitePage .scriptLine,
  body.view .invitePage .storyPhotoBreak p,
  body.view .invitePage .storyDateCard em{
    font-size:clamp(1.82rem, 8vw, 2.55rem)!important;
    line-height:1.25!important;
  }

  body.view .invitePage .rsvpStoryIntro h2{
    font-size:clamp(2.35rem, 12vw, 3.4rem)!important;
  }

  body.view .invitePage .detailCard strong:first-of-type,
  body.view .invitePage .detailCard h3{
    font-size:clamp(2rem, 10vw, 2.9rem)!important;
  }

  body.view .invitePage .welcome{
    font-size:clamp(1.22rem, 6vw, 1.72rem)!important;
  }
}


/* =========================================================
   EventoQR.click V36.20.3.3.2
   Universal Premium Typography + Contrast Logic
   Regla universal:
   - Fondos oscuros: oro, plata, blanco, morado o amarillo.
   - Fondos claros: negro, rojo/vino, plata/gris y acentos oro controlados.
   - Tipografía premium/script en encabezados emocionales y frases.
   ========================================================= */

:root{
  --eqr-font-script:"Great Vibes","Brush Script MT",cursive;
  --eqr-font-serif:"Cormorant Garamond","Playfair Display",Georgia,serif;
  --eqr-font-body:"Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;

  --eqr-light-main:#241f1a;
  --eqr-light-strong:#111111;
  --eqr-light-muted:#5f5147;
  --eqr-light-accent:#9a6a2f;
  --eqr-light-red:#9f1239;
  --eqr-light-silver:#7c7f88;

  --eqr-dark-main:#f8fafc;
  --eqr-dark-strong:#ffffff;
  --eqr-dark-muted:#d8d8dc;
  --eqr-dark-accent:#d4af37;
  --eqr-dark-purple:#c084fc;
  --eqr-dark-yellow:#fde68a;
}

/* Global readable variables applied by JS through .tone-light / .tone-dark */
body.view .invitePage.tone-light{
  --tone-main:var(--eqr-light-main);
  --tone-strong:var(--eqr-light-strong);
  --tone-muted:var(--eqr-light-muted);
  --tone-accent:var(--eqr-light-accent);
  --tone-secondary:var(--eqr-light-red);
  --tone-soft:var(--eqr-light-silver);
}

body.view .invitePage.tone-dark{
  --tone-main:var(--eqr-dark-main);
  --tone-strong:var(--eqr-dark-strong);
  --tone-muted:var(--eqr-dark-muted);
  --tone-accent:var(--eqr-dark-accent);
  --tone-secondary:var(--eqr-dark-purple);
  --tone-soft:var(--eqr-dark-yellow);
}

/* Fallback when older cached HTML has no tone class */
body.view[data-bg-tone="light"] .invitePage,
body[data-bg-tone="light"] .invitePage{
  --tone-main:var(--eqr-light-main);
  --tone-strong:var(--eqr-light-strong);
  --tone-muted:var(--eqr-light-muted);
  --tone-accent:var(--eqr-light-accent);
  --tone-secondary:var(--eqr-light-red);
  --tone-soft:var(--eqr-light-silver);
}
body.view[data-bg-tone="dark"] .invitePage,
body[data-bg-tone="dark"] .invitePage{
  --tone-main:var(--eqr-dark-main);
  --tone-strong:var(--eqr-dark-strong);
  --tone-muted:var(--eqr-dark-muted);
  --tone-accent:var(--eqr-dark-accent);
  --tone-secondary:var(--eqr-dark-purple);
  --tone-soft:var(--eqr-dark-yellow);
}

/* Kill the chunky/tozca title style globally and replace with premium typography */
body.view .invitePage .sectionHead h2,
body.view .invitePage .storyPhotoBreak p,
body.view .invitePage .scriptLine,
body.view .invitePage .storyDateCard em,
body.view .invitePage .rsvpStoryIntro h2,
body.view .invitePage .detailCard strong:first-of-type,
body.view .invitePage .detailCard h3,
body.view .invitePage .timeline strong,
body.view .invitePage .welcome{
  font-family:var(--eqr-font-script)!important;
  font-weight:400!important;
  letter-spacing:0!important;
  text-transform:none!important;
  color:var(--tone-strong)!important;
  text-shadow:none!important;
}

/* Section titles specifically: no more heavy block font */
body.view .invitePage .sectionHead h2{
  font-family:var(--eqr-font-script)!important;
  font-size:clamp(3rem, 7.8vw, 5.4rem)!important;
  line-height:1.02!important;
  font-weight:400!important;
  color:var(--tone-strong)!important;
  max-width:100%!important;
  overflow-wrap:normal!important;
  word-break:normal!important;
}

/* Long section titles stay elegant without breaking too hard */
body.view .invitePage .sectionHead{
  text-align:center!important;
  align-items:center!important;
  justify-content:center!important;
  gap:18px!important;
}
body.view .invitePage .sectionHead .sectionIcon{
  flex:0 0 auto!important;
}

/* Nombres y títulos grandes con serif premium, no Inter pesado */
body.view .invitePage .inviteCard h1,
body.view .invitePage .titleStack h1,
body.view .invitePage .titleStack .heroMainTitle,
body.view .invitePage .storyDateCard b,
body.view .invitePage .storyDateCard span,
body.view .invitePage .storyDateCard strong,
body.view .invitePage .passCard strong,
body.view .invitePage .premiumInfoCard strong,
body.view .invitePage .registryItem strong,
body.view .invitePage .gallery figcaption{
  font-family:var(--eqr-font-serif)!important;
  color:var(--tone-strong)!important;
}

/* Script phrases: refined size */
body.view .invitePage .scriptLine,
body.view .invitePage .storyPhotoBreak p,
body.view .invitePage .storyDateCard em{
  font-size:clamp(2rem,4.6vw,3.25rem)!important;
  line-height:1.23!important;
  color:var(--tone-strong)!important;
}

body.view .invitePage .rsvpStoryIntro h2{
  font-size:clamp(2.8rem,7vw,4.8rem)!important;
  line-height:1.02!important;
}

/* Universal text contrast: no more white text lost on light backgrounds */
body.view .invitePage,
body.view .invitePage p,
body.view .invitePage li,
body.view .invitePage address,
body.view .invitePage time,
body.view .invitePage .dateLine,
body.view .invitePage .welcome,
body.view .invitePage .storyFamilyNames strong,
body.view .invitePage .passCard,
body.view .invitePage .premiumInfoCard p,
body.view .invitePage .registryItem p,
body.view .invitePage .rsvpStoryIntro p,
body.view .invitePage .shareCard p,
body.view .invitePage .timeline p{
  color:var(--tone-main)!important;
}

/* Labels, captions and small text must never be pale pink/white on light backgrounds */
body.view .invitePage small,
body.view .invitePage .sectionHead small,
body.view .invitePage .passCard small,
body.view .invitePage .passCard span,
body.view .invitePage .storyFamilyNames small,
body.view .invitePage .premiumInfoCard small,
body.view .invitePage .registryItem small,
body.view .invitePage .countdown span,
body.view .invitePage .rsvpDeadline,
body.view .invitePage .scrollCue{
  color:var(--tone-accent)!important;
  opacity:1!important;
  text-shadow:none!important;
}

/* Strong text */
body.view .invitePage strong,
body.view .invitePage b,
body.view .invitePage .countdown b{
  color:var(--tone-strong)!important;
  opacity:1!important;
  text-shadow:none!important;
}

/* Links and accents follow the background logic */
body.view .invitePage a:not(.btn),
body.view .invitePage .registryItem span,
body.view .invitePage .premiumInfoCard span,
body.view .invitePage .ctaArrow{
  color:var(--tone-secondary)!important;
}

/* Button labels must stay readable */
body.view .invitePage .btn,
body.view .invitePage button,
body.view .invitePage .floatingMenu button,
body.view .invitePage .orbMenu a,
body.view .invitePage .orbMenu button{
  font-family:var(--eqr-font-body)!important;
  color:#fff!important;
  text-shadow:none!important;
}

/* Light backgrounds: force dark/red/silver palette */
body.view .invitePage.tone-light .sectionHead h2,
body.view .invitePage.tone-light .scriptLine,
body.view .invitePage.tone-light .storyPhotoBreak p,
body.view .invitePage.tone-light .storyDateCard em,
body.view .invitePage.tone-light .rsvpStoryIntro h2,
body.view .invitePage.tone-light .detailCard strong:first-of-type,
body.view .invitePage.tone-light .timeline strong{
  color:var(--eqr-light-strong)!important;
}

body.view .invitePage.tone-light small,
body.view .invitePage.tone-light .sectionHead small,
body.view .invitePage.tone-light .passCard small,
body.view .invitePage.tone-light .storyFamilyNames small,
body.view .invitePage.tone-light .countdown span{
  color:var(--eqr-light-accent)!important;
}

body.view .invitePage.tone-light a:not(.btn),
body.view .invitePage.tone-light .sectionIcon,
body.view .invitePage.tone-light .storyDateCard span{
  color:var(--eqr-light-red)!important;
}

/* Dark backgrounds: force gold/silver/white/purple/yellow palette */
body.view .invitePage.tone-dark .sectionHead h2,
body.view .invitePage.tone-dark .scriptLine,
body.view .invitePage.tone-dark .storyPhotoBreak p,
body.view .invitePage.tone-dark .storyDateCard em,
body.view .invitePage.tone-dark .rsvpStoryIntro h2,
body.view .invitePage.tone-dark .detailCard strong:first-of-type,
body.view .invitePage.tone-dark .timeline strong{
  color:var(--eqr-dark-strong)!important;
}

body.view .invitePage.tone-dark small,
body.view .invitePage.tone-dark .sectionHead small,
body.view .invitePage.tone-dark .passCard small,
body.view .invitePage.tone-dark .storyFamilyNames small,
body.view .invitePage.tone-dark .countdown span{
  color:var(--eqr-dark-accent)!important;
}

body.view .invitePage.tone-dark a:not(.btn),
body.view .invitePage.tone-dark .sectionIcon,
body.view .invitePage.tone-dark .storyDateCard span{
  color:var(--eqr-dark-purple)!important;
}

/* Cards inherit readable colors instead of hardcoded white */
body.view .invitePage .storyDateCard,
body.view .invitePage .storyFamilyCard,
body.view .invitePage .rsvpStoryIntro > div,
body.view .invitePage .detailGrid,
body.view .invitePage .passCard,
body.view .invitePage .premiumInfoCard,
body.view .invitePage .registryCard,
body.view .invitePage .shareCard{
  color:var(--tone-main)!important;
}

/* Share card specific: the URL was getting lost */
body.view .invitePage .shareCard p,
body.view .invitePage.tone-light .shareCard p{
  color:var(--eqr-light-main)!important;
  opacity:1!important;
  font-weight:700!important;
}
body.view .invitePage.tone-dark .shareCard p{
  color:var(--eqr-dark-muted)!important;
  opacity:1!important;
  font-weight:700!important;
}

/* Icons and section markers: keep them premium, not washed out */
body.view .invitePage .sectionIcon,
body.view .invitePage .premiumInfoCard i,
body.view .invitePage .storyDateCard .sectionIcon{
  color:#fff!important;
  text-shadow:none!important;
}

/* Inputs */
body.view .invitePage .input,
body.view .invitePage textarea{
  color:var(--tone-strong)!important;
  background:rgba(255,255,255,.88)!important;
  border-color:rgba(143,111,69,.22)!important;
}
body.view .invitePage.tone-dark .input,
body.view .invitePage.tone-dark textarea{
  color:#f8fafc!important;
  background:rgba(15,23,42,.76)!important;
  border-color:rgba(216,216,220,.18)!important;
}

/* Mobile: keep premium script readable */
@media(max-width:760px){
  body.view .invitePage .sectionHead h2{
    font-size:clamp(2.65rem,12vw,4rem)!important;
    line-height:1.02!important;
  }

  body.view .invitePage .scriptLine,
  body.view .invitePage .storyPhotoBreak p,
  body.view .invitePage .storyDateCard em{
    font-size:clamp(1.8rem,8.2vw,2.65rem)!important;
    line-height:1.22!important;
  }

  body.view .invitePage .rsvpStoryIntro h2{
    font-size:clamp(2.3rem,12vw,3.6rem)!important;
  }
}


/* =========================================================
   EventoQR.click V36.20.3.3.2
   Hero Typography + Mobile Containment Fix
   Problema corregido:
   - Nombres como MARIANA se hacían gigantes con fuente script.
   - En móvil se desbordaba y se veía feo.
   Regla nueva:
   - Script premium queda para frases emocionales.
   - Nombres principales usan serif premium controlada.
   - Nada debe salirse del ancho del teléfono.
   ========================================================= */

/* Hero text container: never overflow */
body.view .invitePage .titleStack,
body.view .invitePage .coupleNames{
  width:100%!important;
  max-width:720px!important;
  margin-left:auto!important;
  margin-right:auto!important;
  overflow:hidden!important;
  text-align:center!important;
}

/* Main event title, like Nuestra Boda / Mis XV Años */
body.view .invitePage .titleStack h1,
body.view .invitePage .inviteCard h1{
  font-family:var(--eqr-font-serif)!important;
  font-size:clamp(2.75rem, 5.8vw, 5.55rem)!important;
  line-height:.96!important;
  letter-spacing:.035em!important;
  font-weight:600!important;
  text-transform:none!important;
  max-width:100%!important;
  margin-left:auto!important;
  margin-right:auto!important;
  color:var(--tone-strong)!important;
  overflow-wrap:normal!important;
  word-break:normal!important;
  text-wrap:balance!important;
}

/* Main names: controlled serif, not oversized script */
body.view .invitePage .titleStack h2,
body.view .invitePage .coupleNames h2{
  font-family:var(--eqr-font-serif)!important;
  font-size:clamp(2.35rem, 5.25vw, 4.35rem)!important;
  line-height:1!important;
  letter-spacing:.055em!important;
  font-weight:500!important;
  text-transform:none!important;
  max-width:100%!important;
  margin:8px auto 0!important;
  color:var(--tone-strong)!important;
  text-shadow:none!important;
  overflow-wrap:normal!important;
  word-break:normal!important;
  text-wrap:balance!important;
}

/* Partner / second name */
body.view .invitePage .titleStack h3,
body.view .invitePage .coupleNames h3{
  font-family:var(--eqr-font-serif)!important;
  font-size:clamp(1.85rem, 4.25vw, 3.35rem)!important;
  line-height:1.05!important;
  letter-spacing:.075em!important;
  font-weight:500!important;
  text-transform:none!important;
  max-width:100%!important;
  margin:8px auto 0!important;
  color:var(--tone-strong)!important;
  text-shadow:none!important;
  overflow-wrap:normal!important;
  word-break:normal!important;
  text-wrap:balance!important;
}

/* Ampersand keeps the luxury touch without exploding */
body.view .invitePage .coupleNames .ampersand,
body.view .invitePage .titleStack .ampersand{
  font-family:var(--eqr-font-script)!important;
  font-size:clamp(2rem, 4.4vw, 3.5rem)!important;
  line-height:1!important;
  color:var(--tone-accent)!important;
  transform:none!important;
  margin:0 4px!important;
}

/* If a template uses separate couple rows, keep them elegant */
body.view .invitePage .coupleNames{
  display:flex!important;
  justify-content:center!important;
  align-items:center!important;
  flex-wrap:wrap!important;
  gap:8px 14px!important;
}

/* Section headings: script premium, but controlled */
body.view .invitePage .sectionHead h2,
body.view .invitePage .sectionTitle h2{
  font-family:var(--eqr-font-script)!important;
  font-size:clamp(2.45rem, 5.8vw, 4.45rem)!important;
  line-height:1.05!important;
  letter-spacing:0!important;
  font-weight:400!important;
  text-transform:none!important;
  color:var(--tone-strong)!important;
  text-shadow:none!important;
  max-width:100%!important;
  text-wrap:balance!important;
}

/* Kicker / small labels readable on light and dark */
body.view .invitePage .sectionHead small,
body.view .invitePage .sectionTitle span,
body.view .invitePage .storyFamilyNames small,
body.view .invitePage .passCard small,
body.view .invitePage .passCard span{
  color:var(--tone-accent)!important;
  opacity:1!important;
  text-shadow:none!important;
}

/* Share card and footer: no more white text disappearing on light backgrounds */
body.view .invitePage .shareCard,
body.view .invitePage .shareCard p,
body.view .invitePage footer,
body.view .invitePage .footer,
body.view .invitePage .poweredBy{
  color:var(--tone-muted)!important;
  opacity:1!important;
  text-shadow:none!important;
}

body.view .invitePage .shareCard h2,
body.view .invitePage .shareCard strong{
  color:var(--tone-strong)!important;
}

body.view .invitePage .shareCard a,
body.view .invitePage .shareCard .btn{
  color:var(--tone-strong)!important;
}

/* Emotional text remains script premium */
body.view .invitePage .scriptLine,
body.view .invitePage .storyPhotoBreak p,
body.view .invitePage .storyDateCard em,
body.view .invitePage .rsvpStoryIntro h2,
body.view .invitePage .welcome,
body.view .invitePage .dateLine{
  font-family:var(--eqr-font-script)!important;
  font-weight:400!important;
  letter-spacing:0!important;
  color:var(--tone-strong)!important;
  text-shadow:none!important;
}

/* But keep emotional text restrained on all screens */
body.view .invitePage .welcome,
body.view .invitePage .dateLine{
  font-size:clamp(1.45rem, 3.3vw, 2.25rem)!important;
  line-height:1.35!important;
}

/* Mobile: critical containment */
@media(max-width:760px){
  body.view .invitePage .inviteCard,
  body.view .invitePage .premiumHeroCard{
    width:min(100%, 430px)!important;
    padding-left:18px!important;
    padding-right:18px!important;
    overflow:hidden!important;
  }

  body.view .invitePage .titleStack,
  body.view .invitePage .coupleNames{
    max-width:100%!important;
    overflow:hidden!important;
  }

  body.view .invitePage .titleStack h1,
  body.view .invitePage .inviteCard h1{
    font-size:clamp(2.25rem, 10.8vw, 3.55rem)!important;
    line-height:1!important;
    letter-spacing:.02em!important;
  }

  body.view .invitePage .titleStack h2,
  body.view .invitePage .coupleNames h2{
    font-size:clamp(2rem, 10.4vw, 3.15rem)!important;
    line-height:1.02!important;
    letter-spacing:.035em!important;
  }

  body.view .invitePage .titleStack h3,
  body.view .invitePage .coupleNames h3{
    font-size:clamp(1.75rem, 8.6vw, 2.55rem)!important;
    line-height:1.05!important;
    letter-spacing:.045em!important;
  }

  body.view .invitePage .coupleNames{
    flex-direction:column!important;
    gap:4px!important;
  }

  body.view .invitePage .coupleNames .ampersand,
  body.view .invitePage .titleStack .ampersand{
    font-size:clamp(1.9rem, 8vw, 2.6rem)!important;
    margin:0!important;
  }

  body.view .invitePage .sectionHead h2,
  body.view .invitePage .sectionTitle h2{
    font-size:clamp(2.15rem, 11vw, 3.35rem)!important;
    line-height:1.08!important;
  }

  body.view .invitePage .scriptLine,
  body.view .invitePage .storyPhotoBreak p,
  body.view .invitePage .storyDateCard em{
    font-size:clamp(1.75rem, 8vw, 2.45rem)!important;
    line-height:1.28!important;
  }

  body.view .invitePage .welcome,
  body.view .invitePage .dateLine{
    font-size:clamp(1.35rem, 6.6vw, 1.92rem)!important;
    line-height:1.34!important;
  }
}

/* Extra small phones */
@media(max-width:390px){
  body.view .invitePage .titleStack h1,
  body.view .invitePage .inviteCard h1{
    font-size:clamp(2.05rem, 10vw, 3rem)!important;
  }

  body.view .invitePage .titleStack h2,
  body.view .invitePage .coupleNames h2{
    font-size:clamp(1.82rem, 9.8vw, 2.7rem)!important;
  }

  body.view .invitePage .titleStack h3,
  body.view .invitePage .coupleNames h3{
    font-size:clamp(1.55rem, 8vw, 2.2rem)!important;
  }
}


/* =========================================================
   EventoQR.click V36.20.3.3.2
   Invitation Menu Off + Fast RSVP Redirect
   ========================================================= */

/* Public invitation side:
   Remove the floating/details menu completely.
   The invitation flow keeps RSVP, maps, share and content in-page. */
body.view .inviteStaticActions,
body.view .dockMenu,
body.view #inviteStaticActions,
body.view #inviteMenuToggle,
body.view #inviteMenuPanel,
body.view .inviteMenuPanel,
body.view .inviteMenuToggle,
body.view .floatingDock,
body.view .floatingMenu,
body.view .floatingMenuToggle,
body.view .quickDock{
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
  pointer-events:none!important;
}

/* Avoid layout gaps from older cached menu versions */
body.view .invitePage{
  padding-bottom:0!important;
}

/* Pass overlay timer adjusted by JS to 8s; make the message feel intentional */
body.view .passSuccess small{
  color:var(--tone-muted)!important;
  opacity:1!important;
}


/* =========================================================
   EventoQR.click V36.20.3.3.2
   Manual Payments + Clean Version Header
   ========================================================= */

.manualPaymentBlock{
  border-color:rgba(20,184,166,.28)!important;
  background:
    radial-gradient(circle at 0% 0%, rgba(20,184,166,.12), transparent 34%),
    radial-gradient(circle at 100% 0%, rgba(212,175,55,.10), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02))!important;
}

.manualPaymentBlock h2 small{
  color:#d4af37!important;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.manualPaymentQuickActions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:14px 0 16px;
}

.manualPaymentQuickActions button{
  border:1px solid rgba(255,255,255,.16);
  color:#f8fafc;
  background:linear-gradient(135deg,rgba(212,175,55,.20),rgba(124,58,237,.20));
  border-radius:999px;
  padding:10px 14px;
  font-weight:900;
  cursor:pointer;
}

.manualPaymentQuickActions button:hover{
  transform:translateY(-1px);
  border-color:rgba(212,175,55,.42);
}

.manualPaymentSummary article{
  min-height:96px;
}

.manualPaymentSummary a{
  color:#d4af37;
  font-weight:900;
  text-decoration:none;
}

.manualPaymentSummary a:hover{
  text-decoration:underline;
}

#appVersionLabel{
  display:inline-flex;
  align-items:center;
  gap:8px;
  width:max-content;
  max-width:100%;
  padding:7px 12px;
  border-radius:999px;
  background:rgba(212,175,55,.10);
  border:1px solid rgba(212,175,55,.22);
  color:#d4af37!important;
  font-weight:900;
}

@media(max-width:760px){
  .manualPaymentQuickActions{
    display:grid;
    grid-template-columns:1fr;
  }
}


/* =========================================================
   EventoQR.click V36.20.3.3.2
   Global Mobile Card System + Admin Access + Contrast Patch
   Regla global:
   - Todas las tarjetas de invitación usan el mismo ancho visual.
   - En móvil, las tarjetas llenan el área disponible y no se ven apretadas.
   - En fondos claros, ningún texto queda blanco/perdido.
   - En fondos oscuros, se usa blanco/oro/plata/morado.
   ========================================================= */

/* Index/Admin access */
.salesHeader nav a.salesAdminLink,
.salesAdminBtn{
  color:#f8fafc!important;
  background:linear-gradient(135deg,rgba(212,175,55,.18),rgba(14,165,233,.12))!important;
  border:1px solid rgba(212,175,55,.24)!important;
}
.salesHeader nav a.salesAdminLink:hover,
.salesAdminBtn:hover{
  border-color:rgba(212,175,55,.55)!important;
  background:linear-gradient(135deg,rgba(212,175,55,.30),rgba(124,58,237,.18))!important;
}

/* Universal sizing variables */
body.view .invitePage{
  --eqr-card-max:760px;
  --eqr-card-radius:32px;
  --eqr-card-pad:30px;
  --eqr-card-min:210px;
}

/* Sections centered with consistent available width */
body.view .inviteSection{
  width:min(1040px, calc(100vw - 32px))!important;
  max-width:1040px!important;
  margin-left:auto!important;
  margin-right:auto!important;
  box-sizing:border-box!important;
}

/* All major cards share one visual language globally */
body.view .invitePage .storyDateCard,
body.view .invitePage .storyFamilyCard,
body.view .invitePage .rsvpStoryIntro > div,
body.view .invitePage .detailGrid,
body.view .invitePage .rsvpCard,
body.view .invitePage .shareCard,
body.view .invitePage .passCard,
body.view .invitePage .registryCard{
  width:min(var(--eqr-card-max), 100%)!important;
  max-width:var(--eqr-card-max)!important;
  margin-left:auto!important;
  margin-right:auto!important;
  box-sizing:border-box!important;
  border-radius:var(--eqr-card-radius)!important;
}

/* Cards inside grids: same width/height feel and no cramped text */
body.view .invitePage .detailCard,
body.view .invitePage .premiumInfoCard,
body.view .invitePage .registryItem,
body.view .invitePage .timeline div,
body.view .invitePage .storyFamilyNames article,
body.view .invitePage .gallery figure{
  box-sizing:border-box!important;
  width:100%!important;
  min-height:var(--eqr-card-min)!important;
  border-radius:28px!important;
  text-align:center!important;
  overflow:hidden!important;
}

/* Stronger readable text globally */
body.view .invitePage.tone-light,
body.view .invitePage.tone-light p,
body.view .invitePage.tone-light li,
body.view .invitePage.tone-light address,
body.view .invitePage.tone-light time,
body.view .invitePage.tone-light .welcome,
body.view .invitePage.tone-light .dateLine,
body.view .invitePage.tone-light .subtitle,
body.view .invitePage.tone-light .heroSoftNote,
body.view .invitePage.tone-light .achievementLine,
body.view .invitePage.tone-light .shareCard p,
body.view .invitePage.tone-light footer{
  color:#241f1a!important;
  opacity:1!important;
  text-shadow:none!important;
}

body.view .invitePage.tone-light .subtitle,
body.view .invitePage.tone-light .heroStatement,
body.view .invitePage.tone-light .scrollCue,
body.view .invitePage.tone-light .rsvpDeadline,
body.view .invitePage.tone-light .sectionTitle span,
body.view .invitePage.tone-light .detailCard span,
body.view .invitePage.tone-light .premiumInfoCard small,
body.view .invitePage.tone-light .storyFamilyNames small,
body.view .invitePage.tone-light .badge,
body.view .invitePage.tone-light .miniBadge{
  color:#7c5f3a!important;
  opacity:1!important;
  text-shadow:none!important;
}

body.view .invitePage.tone-dark,
body.view .invitePage.tone-dark p,
body.view .invitePage.tone-dark li,
body.view .invitePage.tone-dark address,
body.view .invitePage.tone-dark time,
body.view .invitePage.tone-dark .welcome,
body.view .invitePage.tone-dark .dateLine,
body.view .invitePage.tone-dark .subtitle,
body.view .invitePage.tone-dark .shareCard p,
body.view .invitePage.tone-dark footer{
  color:#f8fafc!important;
  opacity:1!important;
  text-shadow:none!important;
}

body.view .invitePage.tone-dark .sectionTitle span,
body.view .invitePage.tone-dark .detailCard span,
body.view .invitePage.tone-dark .premiumInfoCard small,
body.view .invitePage.tone-dark .storyFamilyNames small,
body.view .invitePage.tone-dark .badge,
body.view .invitePage.tone-dark .miniBadge{
  color:#d4af37!important;
  opacity:1!important;
}

/* Section headings now target the actual markup: .sectionTitle, not only .sectionHead */
body.view .invitePage .sectionTitle{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:16px!important;
  flex-wrap:wrap!important;
  text-align:center!important;
  margin-bottom:26px!important;
}
body.view .invitePage .sectionTitle.left{
  justify-content:center!important;
  text-align:center!important;
}
body.view .invitePage .sectionTitle h2{
  font-family:var(--eqr-font-script)!important;
  font-size:clamp(2.55rem, 6vw, 4.35rem)!important;
  line-height:1.04!important;
  font-weight:400!important;
  letter-spacing:0!important;
  text-transform:none!important;
  color:var(--tone-strong)!important;
  text-shadow:none!important;
  margin:4px 0 0!important;
  max-width:100%!important;
  text-wrap:balance!important;
}
body.view .invitePage .sectionTitle span{
  font-family:var(--eqr-font-body)!important;
  font-size:.72rem!important;
  letter-spacing:.18em!important;
  font-weight:1000!important;
}
body.view .invitePage .sectionTitle .sectionSigil{
  flex:0 0 auto!important;
}

/* Detail cards: less cramped, same visual block */
body.view .invitePage .detailGrid{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:0!important;
  padding:26px!important;
}
body.view .invitePage .detailCard{
  padding:34px 24px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:10px!important;
  min-height:280px!important;
}
body.view .invitePage .detailCard h3{
  font-size:clamp(2.05rem, 5.2vw, 3.15rem)!important;
  line-height:1.05!important;
  margin:4px auto!important;
  max-width:100%!important;
  text-wrap:balance!important;
}
body.view .invitePage .detailCard p{
  max-width:560px!important;
  margin:4px auto 8px!important;
  line-height:1.55!important;
  font-size:1.03rem!important;
}
body.view .invitePage .detailCard .btn,
body.view .invitePage .detailCard a.btn{
  margin-top:8px!important;
}

/* Guest guide cards equal and not cramped */
body.view .invitePage .premiumInfoGrid{
  width:min(var(--eqr-card-max), 100%)!important;
  max-width:var(--eqr-card-max)!important;
  margin-left:auto!important;
  margin-right:auto!important;
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:18px!important;
}
body.view .invitePage .premiumInfoCard{
  min-height:210px!important;
  padding:26px 22px!important;
  justify-content:center!important;
}
body.view .invitePage .premiumInfoCard strong{
  font-size:1.18rem!important;
  line-height:1.22!important;
  max-width:100%!important;
}
body.view .invitePage .premiumInfoCard p{
  font-size:.98rem!important;
  line-height:1.5!important;
  max-width:100%!important;
}

/* Family / parents: centered and equal cards */
body.view .invitePage .storyFamilyNames{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:14px!important;
  justify-items:center!important;
  max-width:430px!important;
  margin-left:auto!important;
  margin-right:auto!important;
}
body.view .invitePage .storyFamilyNames article{
  min-height:112px!important;
  max-width:430px!important;
  padding:22px 18px!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  align-items:center!important;
}

/* Gallery/image cards: premium image cards, same width, no weird side gaps */
body.view .invitePage .gallery{
  width:min(900px, 100%)!important;
  max-width:900px!important;
  margin-left:auto!important;
  margin-right:auto!important;
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:18px!important;
}
body.view .invitePage .gallery figure{
  margin:0!important;
  padding:10px 10px 18px!important;
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(246,240,230,.82))!important;
  border:1px solid rgba(143,111,69,.18)!important;
  box-shadow:0 22px 58px rgba(78,57,28,.12)!important;
}
body.view .invitePage.tone-dark .gallery figure{
  background:linear-gradient(180deg,rgba(24,24,31,.94),rgba(6,6,9,.90))!important;
  border-color:rgba(216,216,220,.16)!important;
  box-shadow:0 26px 70px rgba(0,0,0,.34)!important;
}
body.view .invitePage .gallery img{
  display:block!important;
  width:100%!important;
  height:320px!important;
  object-fit:cover!important;
  object-position:center!important;
  border-radius:22px!important;
}
body.view .invitePage .gallery figcaption{
  color:var(--tone-strong)!important;
  opacity:1!important;
  font-size:1.05rem!important;
  line-height:1.35!important;
  margin-top:12px!important;
}

/* Story photo break: controlled width and no side gaps */
body.view .invitePage .storyPhotoBreak{
  width:min(var(--eqr-card-max), 100%)!important;
  max-width:var(--eqr-card-max)!important;
}
body.view .invitePage .storyPhotoBreak figure{
  width:100%!important;
  max-width:100%!important;
  padding:0!important;
  margin-left:auto!important;
  margin-right:auto!important;
}
body.view .invitePage .storyPhotoBreak img{
  width:100%!important;
  max-height:none!important;
  min-height:360px!important;
  object-fit:cover!important;
}

/* Share card readable */
body.view .invitePage .shareCard p{
  color:var(--tone-main)!important;
  opacity:1!important;
  font-weight:800!important;
  line-height:1.5!important;
}
body.view .invitePage.tone-light .shareCard p{
  color:#241f1a!important;
}
body.view .invitePage.tone-dark .shareCard p{
  color:#d8d8dc!important;
}

/* Mobile: one standard card width for EVERY invitation/template */
@media(max-width:760px){
  body.view .invitePage{
    --eqr-card-max:100%;
    --eqr-card-radius:28px;
    --eqr-card-pad:20px;
    --eqr-card-min:190px;
  }

  body.view .inviteSection{
    width:calc(100vw - 28px)!important;
    max-width:calc(100vw - 28px)!important;
    padding:34px 0!important;
  }

  body.view .invitePage .storyDateCard,
  body.view .invitePage .storyFamilyCard,
  body.view .invitePage .rsvpStoryIntro > div,
  body.view .invitePage .detailGrid,
  body.view .invitePage .rsvpCard,
  body.view .invitePage .shareCard,
  body.view .invitePage .passCard,
  body.view .invitePage .registryCard,
  body.view .invitePage .premiumInfoGrid,
  body.view .invitePage .gallery,
  body.view .invitePage .storyPhotoBreak{
    width:100%!important;
    max-width:100%!important;
    margin-left:auto!important;
    margin-right:auto!important;
    box-sizing:border-box!important;
  }

  body.view .invitePage .storyDateCard,
  body.view .invitePage .storyFamilyCard,
  body.view .invitePage .rsvpStoryIntro > div,
  body.view .invitePage .rsvpCard,
  body.view .invitePage .shareCard{
    padding:28px 20px!important;
  }

  body.view .invitePage .detailGrid{
    padding:16px!important;
    border-radius:28px!important;
  }

  body.view .invitePage .detailCard,
  body.view .invitePage .premiumInfoCard,
  body.view .invitePage .registryItem,
  body.view .invitePage .timeline div,
  body.view .invitePage .gallery figure{
    width:100%!important;
    max-width:100%!important;
    min-height:190px!important;
    padding:24px 18px!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }

  body.view .invitePage .detailCard{
    min-height:300px!important;
    padding:30px 18px!important;
  }

  body.view .invitePage .detailCard h3{
    font-size:clamp(2rem, 10vw, 2.8rem)!important;
    line-height:1.05!important;
  }

  body.view .invitePage .detailCard p,
  body.view .invitePage .premiumInfoCard p,
  body.view .invitePage .rsvpStoryIntro p,
  body.view .invitePage .shareCard p{
    font-size:1rem!important;
    line-height:1.58!important;
  }

  body.view .invitePage .premiumInfoGrid{
    grid-template-columns:1fr!important;
    gap:16px!important;
  }

  body.view .invitePage .premiumInfoCard{
    min-height:180px!important;
  }

  body.view .invitePage .gallery{
    grid-template-columns:1fr!important;
    gap:18px!important;
  }

  body.view .invitePage .gallery figure{
    padding:10px 10px 16px!important;
    min-height:auto!important;
  }

  body.view .invitePage .gallery img{
    height:auto!important;
    min-height:260px!important;
    max-height:420px!important;
    object-fit:cover!important;
  }

  body.view .invitePage .storyPhotoBreak figure{
    border-radius:28px!important;
  }

  body.view .invitePage .storyPhotoBreak img{
    min-height:300px!important;
  }

  body.view .invitePage .sectionTitle{
    gap:12px!important;
    margin-bottom:20px!important;
  }

  body.view .invitePage .sectionTitle .sectionSigil{
    width:52px!important;
    height:52px!important;
    border-radius:18px!important;
  }

  body.view .invitePage .sectionTitle h2{
    font-size:clamp(2.28rem, 11vw, 3.25rem)!important;
    line-height:1.08!important;
  }

  body.view .invitePage .subtitle{
    color:#7c5f3a!important;
    font-size:clamp(1rem, 4.8vw, 1.25rem)!important;
    line-height:1.4!important;
  }

  body.view .invitePage .scriptLine,
  body.view .invitePage .storyPhotoBreak p,
  body.view .invitePage .storyDateCard em{
    font-size:clamp(1.76rem, 8vw, 2.35rem)!important;
    line-height:1.30!important;
  }

  .salesHeader nav a.salesAdminLink{
    order:8;
  }
}

@media(max-width:420px){
  body.view .inviteSection{
    width:calc(100vw - 22px)!important;
    max-width:calc(100vw - 22px)!important;
  }

  body.view .invitePage .storyDateCard,
  body.view .invitePage .storyFamilyCard,
  body.view .invitePage .rsvpStoryIntro > div,
  body.view .invitePage .rsvpCard,
  body.view .invitePage .shareCard{
    padding-left:16px!important;
    padding-right:16px!important;
  }

  body.view .invitePage .detailGrid{
    padding:12px!important;
  }

  body.view .invitePage .detailCard,
  body.view .invitePage .premiumInfoCard,
  body.view .invitePage .registryItem{
    padding-left:16px!important;
    padding-right:16px!important;
  }
}


/* =========================================================
   EventoQR.click V36.20.3.3.2
   Admin Login Hotfix
   ========================================================= */

body.admin .loginCard .btn.ghost.full{
  margin-top:10px!important;
  color:#e5edf8!important;
  background:rgba(255,255,255,.08)!important;
  border:1px solid rgba(255,255,255,.16)!important;
}

body.admin .loginCard .btn.primary.full{
  color:#fff!important;
}

body.admin .loginCard a{
  display:block!important;
  color:#cbd5e1!important;
  margin-top:14px!important;
}

body.admin #login:not(.hidden){
  display:grid!important;
}

body.admin #panel.hidden{
  display:none!important;
}


/* =========================================================
   EventoQR.click V36.20.3.3.2
   Global Section Icon + Card Stack Fix
   Regla global:
   - Los iconos de secciones van arriba del texto, nunca a la izquierda.
   - Ninguna tarjeta usa 100vw dentro de la invitación.
   - Las cards viven dentro del ancho de la main card/inviteShell.
   - En móvil todas las cards mantienen el mismo ancho visual.
   - Fondos claros nunca deben perder texto blanco.
   ========================================================= */

/* 1) Main shell containment: cards must not float over the central invite canvas */
body.view .invitePage .inviteShell{
  width:min(980px, calc(100% - 18px))!important;
  max-width:980px!important;
  margin-left:auto!important;
  margin-right:auto!important;
  overflow:visible!important;
  box-sizing:border-box!important;
}

body.view .invitePage .inviteSection{
  position:relative!important;
  z-index:1!important;
  isolation:isolate!important;
  width:100%!important;
  max-width:100%!important;
  margin-left:auto!important;
  margin-right:auto!important;
  padding:46px 14px!important;
  box-sizing:border-box!important;
  clear:both!important;
}

body.view .invitePage .inviteSection + .inviteSection{
  margin-top:8px!important;
}

/* 2) Section icons: always top centered, never left pushing text */
body.view .invitePage .sectionTitle,
body.view .invitePage .sectionTitle.left{
  width:100%!important;
  max-width:860px!important;
  margin:0 auto 26px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:12px!important;
  text-align:center!important;
  position:relative!important;
  z-index:2!important;
}

body.view .invitePage .sectionTitle .sectionSigil{
  position:relative!important;
  flex:0 0 auto!important;
  width:58px!important;
  height:58px!important;
  margin:0 auto!important;
  transform:none!important;
  display:grid!important;
  place-items:center!important;
}

body.view .invitePage .sectionTitle .sectionCopy,
body.view .invitePage .sectionTitle.left .sectionCopy{
  width:100%!important;
  max-width:820px!important;
  min-width:0!important;
  margin:0 auto!important;
  text-align:center!important;
  display:block!important;
}

body.view .invitePage .sectionTitle span{
  display:block!important;
  margin:0 auto 4px!important;
  text-align:center!important;
  color:var(--tone-accent)!important;
  opacity:1!important;
  text-shadow:none!important;
}

body.view .invitePage .sectionTitle h2{
  display:block!important;
  max-width:100%!important;
  margin:0 auto!important;
  text-align:center!important;
  color:var(--tone-strong)!important;
  overflow-wrap:normal!important;
  word-break:normal!important;
  text-wrap:balance!important;
}

/* 3) Detail/card containers: never wider than the shell and no weird side gaps */
body.view .invitePage .storyDateCard,
body.view .invitePage .storyFamilyCard,
body.view .invitePage .rsvpStoryIntro > div,
body.view .invitePage .detailGrid,
body.view .invitePage .premiumInfoGrid,
body.view .invitePage .rsvpCard,
body.view .invitePage .shareCard,
body.view .invitePage .passCard,
body.view .invitePage .registryCard,
body.view .invitePage .gallery,
body.view .invitePage .storyPhotoBreak{
  width:min(760px, 100%)!important;
  max-width:760px!important;
  margin-left:auto!important;
  margin-right:auto!important;
  box-sizing:border-box!important;
}

/* 4) Card stacking: section headers, grids and cards must not overlap */
body.view .invitePage .storyDateCard,
body.view .invitePage .storyFamilyCard,
body.view .invitePage .rsvpStoryIntro > div,
body.view .invitePage .detailGrid,
body.view .invitePage .premiumInfoGrid,
body.view .invitePage .rsvpCard,
body.view .invitePage .shareCard,
body.view .invitePage .registryCard,
body.view .invitePage .gallery,
body.view .invitePage .storyPhotoBreak figure{
  position:relative!important;
  z-index:1!important;
  transform:none!important;
  float:none!important;
  clear:both!important;
}

/* 5) Cards inside grids: same visual size and relaxed text */
body.view .invitePage .detailGrid,
body.view .invitePage .premiumInfoGrid{
  display:grid!important;
  grid-template-columns:1fr!important;
  align-items:stretch!important;
  justify-items:stretch!important;
  gap:16px!important;
}

body.view .invitePage .premiumInfoGrid{
  padding:0!important;
}

body.view .invitePage .detailCard,
body.view .invitePage .premiumInfoCard,
body.view .invitePage .registryItem,
body.view .invitePage .timeline div,
body.view .invitePage .storyFamilyNames article{
  width:100%!important;
  max-width:100%!important;
  min-height:220px!important;
  height:auto!important;
  box-sizing:border-box!important;
  margin-left:auto!important;
  margin-right:auto!important;
  padding:28px 22px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  gap:10px!important;
  overflow:hidden!important;
}

/* 6) Icons inside detail cards also go above text and centered */
body.view .invitePage .detailGlyph,
body.view .invitePage .detailCard i,
body.view .invitePage .premiumInfoCard i,
body.view .invitePage .registryItem i{
  position:relative!important;
  display:grid!important;
  place-items:center!important;
  margin:0 auto 12px!important;
  transform:none!important;
  float:none!important;
  flex:0 0 auto!important;
}

body.view .invitePage .detailCard span,
body.view .invitePage .premiumInfoCard small,
body.view .invitePage .registryItem small{
  text-align:center!important;
  width:100%!important;
  max-width:100%!important;
  color:var(--tone-accent)!important;
  opacity:1!important;
  text-shadow:none!important;
}

body.view .invitePage .detailCard h3,
body.view .invitePage .detailCard strong:first-of-type,
body.view .invitePage .premiumInfoCard strong,
body.view .invitePage .registryItem strong{
  text-align:center!important;
  max-width:100%!important;
  margin-left:auto!important;
  margin-right:auto!important;
  color:var(--tone-strong)!important;
  text-wrap:balance!important;
}

body.view .invitePage .detailCard p,
body.view .invitePage .detailCard address,
body.view .invitePage .premiumInfoCard p,
body.view .invitePage .registryItem p,
body.view .invitePage .rsvpStoryIntro p,
body.view .invitePage .shareCard p{
  max-width:620px!important;
  margin-left:auto!important;
  margin-right:auto!important;
  text-align:center!important;
  line-height:1.58!important;
  color:var(--tone-main)!important;
  opacity:1!important;
  text-shadow:none!important;
}

/* 7) Light background hard contrast patch: no white text lost */
body.view .invitePage.tone-light .premiumHeroCard .subtitle,
body.view .invitePage.tone-light .premiumHeroCard .welcome,
body.view .invitePage.tone-light .premiumHeroCard .dateLine,
body.view .invitePage.tone-light .premiumHeroCard .heroSoftNote,
body.view .invitePage.tone-light .premiumHeroCard .achievementLine,
body.view .invitePage.tone-light .premiumHeroCard .scrollCue,
body.view .invitePage.tone-light .premiumHeroCard p,
body.view .invitePage.tone-light .premiumHeroCard small:not(.badge):not(.miniBadge),
body.view .invitePage.tone-light .premiumHeroCard span:not(.badge):not(.miniBadge),
body.view .invitePage.tone-light .shareCard p,
body.view .invitePage.tone-light footer,
body.view .invitePage.tone-light .footer,
body.view .invitePage.tone-light .poweredBy{
  color:#241f1a!important;
  opacity:1!important;
  text-shadow:none!important;
}

body.view .invitePage.tone-light .premiumHeroCard .subtitle,
body.view .invitePage.tone-light .sectionTitle span,
body.view .invitePage.tone-light .detailCard span,
body.view .invitePage.tone-light .premiumInfoCard small,
body.view .invitePage.tone-light .storyFamilyNames small{
  color:#7c5f3a!important;
}

/* Dark background contrast remains premium */
body.view .invitePage.tone-dark .sectionTitle h2,
body.view .invitePage.tone-dark .detailCard h3,
body.view .invitePage.tone-dark .detailCard strong:first-of-type,
body.view .invitePage.tone-dark .premiumInfoCard strong,
body.view .invitePage.tone-dark .registryItem strong{
  color:#ffffff!important;
}

body.view .invitePage.tone-dark .sectionTitle span,
body.view .invitePage.tone-dark .detailCard span,
body.view .invitePage.tone-dark .premiumInfoCard small,
body.view .invitePage.tone-dark .storyFamilyNames small{
  color:#d4af37!important;
}

/* 8) Mobile: cards live inside central invite canvas, all same width */
@media(max-width:760px){
  body.view .invitePage .inviteShell{
    width:min(430px, calc(100% - 16px))!important;
    max-width:430px!important;
    overflow:visible!important;
  }

  body.view .invitePage .inviteSection{
    width:100%!important;
    max-width:100%!important;
    padding:34px 0!important;
  }

  body.view .invitePage .sectionTitle,
  body.view .invitePage .sectionTitle.left{
    max-width:100%!important;
    margin-bottom:22px!important;
    gap:10px!important;
  }

  body.view .invitePage .sectionTitle .sectionSigil{
    width:54px!important;
    height:54px!important;
    border-radius:18px!important;
  }

  body.view .invitePage .sectionTitle h2{
    font-size:clamp(2.05rem, 10.2vw, 3.05rem)!important;
    line-height:1.05!important;
    padding:0 4px!important;
  }

  body.view .invitePage .storyDateCard,
  body.view .invitePage .storyFamilyCard,
  body.view .invitePage .rsvpStoryIntro > div,
  body.view .invitePage .detailGrid,
  body.view .invitePage .premiumInfoGrid,
  body.view .invitePage .rsvpCard,
  body.view .invitePage .shareCard,
  body.view .invitePage .passCard,
  body.view .invitePage .registryCard,
  body.view .invitePage .gallery,
  body.view .invitePage .storyPhotoBreak{
    width:100%!important;
    max-width:100%!important;
    margin-left:auto!important;
    margin-right:auto!important;
    box-sizing:border-box!important;
  }

  body.view .invitePage .detailGrid{
    padding:14px!important;
    gap:14px!important;
  }

  body.view .invitePage .premiumInfoGrid{
    grid-template-columns:1fr!important;
    gap:14px!important;
  }

  body.view .invitePage .detailCard,
  body.view .invitePage .premiumInfoCard,
  body.view .invitePage .registryItem,
  body.view .invitePage .timeline div,
  body.view .invitePage .storyFamilyNames article{
    min-height:216px!important;
    padding:26px 18px!important;
    border-radius:26px!important;
  }

  body.view .invitePage .detailCard{
    min-height:310px!important;
  }

  body.view .invitePage .premiumInfoCard strong,
  body.view .invitePage .registryItem strong{
    font-size:clamp(1.08rem, 4.8vw, 1.28rem)!important;
    line-height:1.25!important;
  }

  body.view .invitePage .premiumInfoCard p,
  body.view .invitePage .registryItem p,
  body.view .invitePage .detailCard p,
  body.view .invitePage .detailCard address{
    font-size:1rem!important;
    line-height:1.55!important;
  }

  body.view .invitePage .storyFamilyNames{
    width:100%!important;
    max-width:100%!important;
  }
}

@media(max-width:390px){
  body.view .invitePage .inviteShell{
    width:calc(100% - 12px)!important;
  }

  body.view .invitePage .detailGrid{
    padding:10px!important;
  }

  body.view .invitePage .detailCard,
  body.view .invitePage .premiumInfoCard,
  body.view .invitePage .registryItem{
    padding-left:15px!important;
    padding-right:15px!important;
  }

  body.view .invitePage .sectionTitle h2{
    font-size:clamp(1.92rem, 10vw, 2.72rem)!important;
  }
}


/* =========================================================
   EventoQR.click V36.20.3.3.2
   Global Footer Background Gap Fix
   Regla global:
   - No debe aparecer franja gris después del footer.
   - El fondo del body/html hereda el tono de la invitación.
   - El footer queda dentro del canvas visual de la invitación.
   - Se eliminan fondos default grises del navegador/layout.
   ========================================================= */

html:has(body.view),
body.view{
  margin:0!important;
  min-height:100%!important;
  background:#f4e3d2!important;
  overflow-x:hidden!important;
}

body.view::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-5;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.50), transparent 42%),
    linear-gradient(180deg, var(--event-bg, var(--page-bg, #f4e3d2)) 0%, var(--event-bg, var(--page-bg, #f4e3d2)) 100%)!important;
}

/* The public invitation page must paint all the way to the bottom */
body.view .invitePage{
  min-height:100svh!important;
  margin:0!important;
  padding-bottom:0!important;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.36), transparent 44%),
    linear-gradient(180deg, var(--event-bg, var(--page-bg, #f4e3d2)) 0%, var(--event-bg, var(--page-bg, #f4e3d2)) 100%)!important;
  background-color:var(--event-bg, var(--page-bg, #f4e3d2))!important;
}

/* Ensure the shell/footer area never ends on a gray fallback */
body.view .invitePage .inviteShell{
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04)),
    var(--event-bg, var(--page-bg, transparent))!important;
  margin-bottom:0!important;
  padding-bottom:34px!important;
}

body.view .invitePage footer,
body.view .invitePage .footer,
body.view .invitePage .poweredBy{
  margin-bottom:0!important;
  padding-bottom:0!important;
  background:transparent!important;
  color:var(--tone-accent, #8b1e3f)!important;
  opacity:1!important;
}

/* Remove accidental gray strips from old layout wrappers */
body.view main,
body.view #app,
body.view .app,
body.view .page,
body.view .publicPage{
  background:transparent!important;
  margin-bottom:0!important;
  padding-bottom:0!important;
}

/* Mobile browser bottom safe area should keep the same invitation color */
@supports(padding:max(0px)){
  body.view .invitePage{
    padding-bottom:max(0px, env(safe-area-inset-bottom))!important;
  }
  body.view .invitePage .inviteShell{
    padding-bottom:max(34px, calc(34px + env(safe-area-inset-bottom)))!important;
  }
}

/* Dark templates get dark bottom instead of gray */
body.view .invitePage.tone-dark,
body.view:has(.invitePage.tone-dark){
  background:#060712!important;
}

body.view:has(.invitePage.tone-dark)::before{
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.08), transparent 44%),
    linear-gradient(180deg, #060712 0%, #060712 100%)!important;
}

body.view .invitePage.tone-dark .inviteShell{
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)),
    #060712!important;
}

/* Light templates get warm invitation bottom instead of gray */
body.view .invitePage.tone-light,
body.view:has(.invitePage.tone-light){
  background:#f4e3d2!important;
}

body.view:has(.invitePage.tone-light)::before{
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.50), transparent 42%),
    linear-gradient(180deg, #f4e3d2 0%, #f4e3d2 100%)!important;
}


/* =========================================================
   EventoQR.click V36.20.3.3.2
   Global Header Background + Admin Login Fix
   Regla global:
   - El header/hero no debe mostrar franja gris.
   - Fondos claros usan fondo cálido continuo.
   - Fondos oscuros usan fondo oscuro continuo.
   - El admin no debe romper por APP_VERSION.
   ========================================================= */

body.admin .loginStatus{
  margin:10px 0 0!important;
  padding:10px 12px!important;
  min-height:18px!important;
  border-radius:14px!important;
  font-size:.88rem!important;
  line-height:1.35!important;
  color:#cbd5e1!important;
  background:rgba(255,255,255,.06)!important;
  border:1px solid rgba(255,255,255,.10)!important;
}

body.admin .loginStatus.ok{
  color:#bbf7d0!important;
  background:rgba(34,197,94,.10)!important;
  border-color:rgba(34,197,94,.24)!important;
}

body.admin .loginStatus.err{
  color:#fecaca!important;
  background:rgba(239,68,68,.10)!important;
  border-color:rgba(239,68,68,.24)!important;
}

body.admin .loginStatus.wait{
  color:#fde68a!important;
  background:rgba(245,158,11,.10)!important;
  border-color:rgba(245,158,11,.24)!important;
}

/* Main invitation canvas: no gray fallback at top, sides or bottom */
body.view .invitePage.tone-light,
body.view .invitePage.tone-light .inviteShell,
body.view .invitePage.tone-light .inviteHero,
body.view .invitePage.tone-light .inviteHero.hasHeroImage{
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.48), transparent 42%),
    linear-gradient(180deg,#f4e3d2 0%,#f7eadb 48%,#f4e3d2 100%)!important;
  background-color:#f4e3d2!important;
  background-image:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.48), transparent 42%),
    linear-gradient(180deg,#f4e3d2 0%,#f7eadb 48%,#f4e3d2 100%)!important;
}

body.view .invitePage.tone-light .inviteShell{
  box-shadow:none!important;
  border-color:rgba(143,111,69,.10)!important;
  backdrop-filter:none!important;
}

body.view .invitePage.tone-light .inviteShell::before{
  border-color:rgba(143,111,69,.08)!important;
}

body.view .invitePage.tone-light .inviteHero{
  border-bottom:0!important;
  box-shadow:none!important;
  margin-bottom:0!important;
}

body.view .invitePage.tone-light .inviteHero::before,
body.view .invitePage.tone-light .inviteHero.hasHeroImage::before{
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.26), transparent 46%),
    linear-gradient(180deg, rgba(244,227,210,.96), rgba(244,227,210,.94))!important;
  opacity:1!important;
}

body.view .invitePage.tone-light .heroPhotoLayer{
  display:none!important;
  background:none!important;
}

/* If any template still uses a desktop hero background behind the card, neutralize only the gray outside card.
   The actual photo remains inside the editorial image block/card. */
body.view .invitePage.tone-light .inviteHero.hasRealHeroPhoto{
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.48), transparent 42%),
    linear-gradient(180deg,#f4e3d2 0%,#f7eadb 48%,#f4e3d2 100%)!important;
}

/* Dark templates: same rule, but dark; no gray band */
body.view .invitePage.tone-dark,
body.view .invitePage.tone-dark .inviteShell,
body.view .invitePage.tone-dark .inviteHero,
body.view .invitePage.tone-dark .inviteHero.hasHeroImage{
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.08), transparent 44%),
    linear-gradient(180deg,#060712 0%,#0b1020 48%,#060712 100%)!important;
  background-color:#060712!important;
  background-image:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.08), transparent 44%),
    linear-gradient(180deg,#060712 0%,#0b1020 48%,#060712 100%)!important;
}

body.view .invitePage.tone-dark .inviteHero::before,
body.view .invitePage.tone-dark .inviteHero.hasHeroImage::before{
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.08), transparent 44%),
    linear-gradient(180deg,rgba(6,7,18,.94),rgba(6,7,18,.96))!important;
  opacity:1!important;
}

/* Keep the premium card visually separated without gray side gutters */
body.view .invitePage.tone-light .premiumHeroCard{
  background:
    radial-gradient(circle at top center, rgba(255,255,255,.90), transparent 36%),
    linear-gradient(180deg, rgba(255,247,241,.96), rgba(246,229,219,.90))!important;
  border-color:rgba(143,111,69,.16)!important;
  box-shadow:0 30px 80px rgba(92,64,39,.13)!important;
}

/* Mobile: the top must be warm edge-to-edge too */
@media(max-width:760px){
  body.view .invitePage.tone-light,
  body.view .invitePage.tone-light .inviteShell,
  body.view .invitePage.tone-light .inviteHero,
  body.view .invitePage.tone-light .inviteHero.hasHeroImage{
    background:
      radial-gradient(circle at 50% 0%, rgba(255,255,255,.42), transparent 42%),
      linear-gradient(180deg,#f4e3d2 0%,#f7eadb 52%,#f4e3d2 100%)!important;
    background-color:#f4e3d2!important;
  }

  body.view .invitePage.tone-light .inviteHero{
    padding-top:24px!important;
  }
}


/* =========================================================
   EventoQR.click V36.20.3.3.2
   Camila Demo Red Dress Upgrade
   ========================================================= */

body.view .invitePage.tpl-xv-rose-gold-princess,
body.view .invitePage[data-template="xv-rose-gold-princess"]{
  --tone-accent:#8B1E3F;
  --tone-gold:#A77A38;
  --event-bg:#f4e3d2;
}

body.view .invitePage.tpl-xv-rose-gold-princess .premiumHeroCard img,
body.view .invitePage[data-template="xv-rose-gold-princess"] .premiumHeroCard img{
  object-position:center 38%!important;
}

body.view .invitePage.tpl-xv-rose-gold-princess .btn.primary,
body.view .invitePage[data-template="xv-rose-gold-princess"] .btn.primary{
  background:linear-gradient(135deg,#C98D7E,#8B1E3F,#7C3AED)!important;
}


/* =========================================================
   EventoQR.click V36.20.4.0
   Regla universal: foto principal completa, sin cortar cabeza
   Aplica a demos personalizados, demos base y eventos reales.
   ========================================================= */
body.view .invitePage .eqrMainPhotoFrame,
body.view .invitePage .editorialHeroPhoto{
  width:min(560px,100%)!important;
  margin:18px auto 22px!important;
  padding:10px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:hidden!important;
  min-height:0!important;
  height:auto!important;
  border-radius:32px 32px 14px 14px!important;
  background:
    radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--event-primary) 22%, transparent), transparent 36%),
    linear-gradient(135deg, rgba(255,255,255,.80), rgba(255,255,255,.28))!important;
}
body.view .invitePage .eqrMainPhotoFrame img,
body.view .invitePage .editorialHeroPhoto img,
body.view .invitePage.tpl-xv-rose-gold-princess .premiumHeroCard .editorialHeroPhoto img,
body.view .invitePage[data-template="xv-rose-gold-princess"] .premiumHeroCard .editorialHeroPhoto img{
  display:block!important;
  width:100%!important;
  height:clamp(300px,42vw,520px)!important;
  max-height:72vh!important;
  object-fit:contain!important;
  object-position:center top!important;
  border-radius:24px 24px 10px 10px!important;
  background:transparent!important;
}
body.view .invitePage .eqrMainPhotoFrame[data-photo-fit="cover"] img{
  object-fit:cover!important;
  object-position:center!important;
}
body.view .invitePage .portraitLuxeFrame img{
  object-fit:contain!important;
  object-position:center top!important;
  background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(0,0,0,.14))!important;
}
body.view .invitePage .heroPhotoLayer{
  background-size:contain!important;
  background-repeat:no-repeat!important;
  background-position:center top!important;
}
@media(max-width:760px){
  body.view .invitePage .eqrMainPhotoFrame,
  body.view .invitePage .editorialHeroPhoto{
    width:100%!important;
    margin:14px auto 18px!important;
    padding:8px!important;
    border-radius:26px 26px 12px 12px!important;
  }
  body.view .invitePage .eqrMainPhotoFrame img,
  body.view .invitePage .editorialHeroPhoto img,
  body.view .invitePage.tpl-xv-rose-gold-princess .premiumHeroCard .editorialHeroPhoto img,
  body.view .invitePage[data-template="xv-rose-gold-princess"] .premiumHeroCard .editorialHeroPhoto img{
    height:clamp(300px,88vw,480px)!important;
    max-height:66vh!important;
    object-fit:contain!important;
    object-position:center top!important;
    border-radius:22px 22px 10px 10px!important;
  }
}
@media(max-width:420px){
  body.view .invitePage .eqrMainPhotoFrame img,
  body.view .invitePage .editorialHeroPhoto img{
    height:clamp(270px,96vw,420px)!important;
  }
}

/* =========================================================
   EventoQR.click V36.20.4.0 · Frame universal auto-fit
   El marco se ajusta al tamaño visual real de la foto.
   Corrige espacios laterales grandes en fotos verticales sin recortar.
   ========================================================= */
body.view .invitePage .eqrMainPhotoFrame,
body.view .invitePage .editorialHeroPhoto,
body.view .invitePage .portraitLuxeFrame{
  width:fit-content!important;
  inline-size:fit-content!important;
  max-width:min(680px,100%)!important;
  max-inline-size:min(680px,100%)!important;
  margin-left:auto!important;
  margin-right:auto!important;
  padding:10px!important;
  box-sizing:border-box!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:hidden!important;
}
body.view .invitePage .eqrMainPhotoFrame.photoFrameReady[data-photo-orientation="portrait"],
body.view .invitePage .editorialHeroPhoto.photoFrameReady[data-photo-orientation="portrait"]{
  max-width:min(520px,100%)!important;
  max-inline-size:min(520px,100%)!important;
}
body.view .invitePage .eqrMainPhotoFrame.photoFrameReady[data-photo-orientation="landscape"],
body.view .invitePage .editorialHeroPhoto.photoFrameReady[data-photo-orientation="landscape"]{
  max-width:min(720px,100%)!important;
  max-inline-size:min(720px,100%)!important;
}
body.view .invitePage .eqrMainPhotoFrame img,
body.view .invitePage .editorialHeroPhoto img,
body.view .invitePage .portraitLuxeFrame img,
body.view .invitePage.tpl-xv-rose-gold-princess .premiumHeroCard .editorialHeroPhoto img,
body.view .invitePage[data-template="xv-rose-gold-princess"] .premiumHeroCard .editorialHeroPhoto img{
  width:auto!important;
  inline-size:auto!important;
  height:auto!important;
  block-size:auto!important;
  max-width:100%!important;
  max-inline-size:100%!important;
  max-height:clamp(360px,70vh,680px)!important;
  object-fit:contain!important;
  object-position:center top!important;
  aspect-ratio:auto!important;
}
body.view .invitePage .eqrMainPhotoFrame[data-photo-fit="cover"] img{
  width:auto!important;
  height:auto!important;
  max-width:100%!important;
  max-height:clamp(360px,70vh,680px)!important;
  object-fit:contain!important;
  object-position:center top!important;
}
@media(max-width:760px){
  body.view .invitePage .eqrMainPhotoFrame,
  body.view .invitePage .editorialHeroPhoto,
  body.view .invitePage .portraitLuxeFrame{
    width:fit-content!important;
    inline-size:fit-content!important;
    max-width:100%!important;
    max-inline-size:100%!important;
    padding:8px!important;
  }
  body.view .invitePage .eqrMainPhotoFrame.photoFrameReady[data-photo-orientation="portrait"],
  body.view .invitePage .editorialHeroPhoto.photoFrameReady[data-photo-orientation="portrait"]{
    max-width:min(92vw,480px)!important;
    max-inline-size:min(92vw,480px)!important;
  }
  body.view .invitePage .eqrMainPhotoFrame img,
  body.view .invitePage .editorialHeroPhoto img,
  body.view .invitePage .portraitLuxeFrame img,
  body.view .invitePage.tpl-xv-rose-gold-princess .premiumHeroCard .editorialHeroPhoto img,
  body.view .invitePage[data-template="xv-rose-gold-princess"] .premiumHeroCard .editorialHeroPhoto img{
    width:auto!important;
    height:auto!important;
    max-width:100%!important;
    max-height:66vh!important;
    object-fit:contain!important;
    object-position:center top!important;
  }
}
@media(max-width:420px){
  body.view .invitePage .eqrMainPhotoFrame.photoFrameReady[data-photo-orientation="portrait"],
  body.view .invitePage .editorialHeroPhoto.photoFrameReady[data-photo-orientation="portrait"]{
    max-width:min(94vw,390px)!important;
  }
  body.view .invitePage .eqrMainPhotoFrame img,
  body.view .invitePage .editorialHeroPhoto img,
  body.view .invitePage .portraitLuxeFrame img{
    max-height:62vh!important;
  }
}

/* EventoQR V36.20.4.0 · cima operations */
.opsDashboard{position:relative;overflow:hidden;background:linear-gradient(135deg,rgba(15,23,42,.86),rgba(2,6,23,.76));}
.opsDashboard:before{content:"";position:absolute;inset:-120px auto auto -120px;width:260px;height:260px;border-radius:999px;background:radial-gradient(circle, color-mix(in srgb,var(--event-primary,#D4AF37) 28%,transparent), transparent 70%);pointer-events:none}
.opsHead{position:relative;display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:18px}.opsHead em,.convertHead em{font-style:normal;text-transform:uppercase;letter-spacing:.22em;font-size:.72rem;font-weight:900;color:#d4af37}.opsHead h2,.convertHead h2{margin:6px 0;font-size:clamp(1.7rem,3vw,2.7rem);line-height:1;letter-spacing:-.04em}.opsHead p,.convertHead span{margin:0;color:#aeb6ce}.opsActions{display:flex;gap:10px;flex-wrap:wrap}.opsActions button,.convertHead button,.demoManagerActions .convertMini{border:1px solid rgba(212,175,55,.28);background:linear-gradient(135deg,rgba(212,175,55,.20),rgba(124,58,237,.16));color:#fff;border-radius:999px;min-height:38px;padding:0 14px;font-weight:900;cursor:pointer}.opsCards{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}.opsCards article{border:1px solid rgba(255,255,255,.12);border-radius:24px;padding:18px;background:rgba(255,255,255,.07);box-shadow:0 18px 40px rgba(0,0,0,.18)}.opsCards span{display:block;text-transform:uppercase;letter-spacing:.14em;font-size:.68rem;color:#94a3b8;font-weight:900}.opsCards strong{display:block;font-size:2.2rem;line-height:1;margin:8px 0;color:#fff}.opsCards small{color:#cbd5e1}.opsCards .ok{border-color:rgba(34,197,94,.28);background:rgba(34,197,94,.08)}.opsCards .warn{border-color:rgba(245,158,11,.32);background:rgba(245,158,11,.08)}.opsCards .vip{border-color:rgba(168,85,247,.30);background:rgba(168,85,247,.09)}.opsFocus{display:grid;grid-template-columns:240px 1fr;gap:14px;align-items:start;border-top:1px solid rgba(255,255,255,.10);padding-top:16px}.opsFocus strong,.opsFocus span{display:block}.opsFocus span{color:#94a3b8;font-size:.82rem}.opsFocusList{display:grid;gap:8px}.opsFocusItem{width:100%;text-align:left;border:1px solid rgba(255,255,255,.10);background:rgba(2,6,23,.48);color:#e5edf8;border-radius:16px;padding:12px 14px;cursor:pointer}.opsFocusItem strong,.opsFocusItem span{display:block}.opsFocusItem span{font-size:.78rem;color:#94a3b8;margin-top:3px}.convertPanel{background:linear-gradient(135deg,rgba(17,24,39,.92),rgba(15,23,42,.80));border-color:rgba(212,175,55,.20)!important}.convertForm{display:grid;gap:14px}.convertForm label{font-size:.82rem;font-weight:900;color:#cbd5e1}.convertActions{display:flex;gap:10px;flex-wrap:wrap}.demoManagerItem.active{border-color:rgba(212,175,55,.42)!important;background:rgba(212,175,55,.08)!important}.demoManagerActions .convertMini{min-height:32px;padding:0 10px;font-size:.75rem}.dashActions .primary{box-shadow:0 18px 44px rgba(212,175,55,.16)}
@media(max-width:980px){.opsHead,.opsFocus{grid-template-columns:1fr;display:grid}.opsCards{grid-template-columns:1fr 1fr}.opsActions{width:100%}.opsActions button{flex:1}.convertForm .three,.convertForm .four{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.opsCards,.convertForm .two,.convertForm .three,.convertForm .four{grid-template-columns:1fr}.opsHead h2,.convertHead h2{font-size:2rem}.convertActions .btn{width:100%}}

/* EventoQR V36.20.4.0 · portal project summary */
.portalProjectSummary{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px}.portalProjectSummary article{border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.07);border-radius:20px;padding:14px}.portalProjectSummary span{display:block;text-transform:uppercase;letter-spacing:.13em;font-size:.66rem;color:#94a3b8;font-weight:900}.portalProjectSummary strong{display:block;font-size:1.12rem;margin-top:4px}.portalProjectSummary small{display:block;color:#cbd5e1;font-size:.74rem;margin-top:3px}@media(max-width:720px){.portalProjectSummary{grid-template-columns:1fr}}

/* V36.20.4.2 · Dashboard 10/10 + checklist + quick messages */
.opsQuality{display:grid;grid-template-columns:240px 1fr;gap:14px;align-items:start;border-top:1px solid rgba(255,255,255,.10);padding-top:16px;margin-top:16px}.opsQuality strong,.opsQuality span{display:block}.opsQuality span{color:#94a3b8;font-size:.82rem}.opsQualityList{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.opsQualityItem{width:100%;text-align:left;border:1px solid rgba(245,158,11,.24);background:linear-gradient(135deg,rgba(245,158,11,.10),rgba(2,6,23,.38));color:#e5edf8;border-radius:16px;padding:12px 14px;cursor:pointer}.opsQualityItem strong,.opsQualityItem span{display:block}.opsQualityItem span{font-size:.76rem;color:#cbd5e1;margin-top:3px}.deliveryChecklistCard,.quickMessagesCard{margin-top:16px;border:1px solid rgba(255,255,255,.12);background:rgba(2,6,23,.34);border-radius:26px;padding:16px;box-shadow:0 18px 44px rgba(0,0,0,.16)}.deliveryHead{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:12px}.deliveryHead em{display:block;font-style:normal;text-transform:uppercase;letter-spacing:.18em;font-size:.62rem;font-weight:900;color:#d4af37}.deliveryHead strong{display:block;color:#f8fafc;font-size:.95rem}.deliveryHead>span{display:grid;place-items:center;min-width:56px;height:36px;border-radius:999px;background:linear-gradient(135deg,rgba(212,175,55,.26),rgba(124,58,237,.18));border:1px solid rgba(212,175,55,.28);font-weight:900;color:#fff}.deliveryProgress{height:9px;border-radius:999px;background:rgba(255,255,255,.10);overflow:hidden;margin-bottom:12px}.deliveryProgress i{display:block;height:100%;width:0%;border-radius:inherit;background:linear-gradient(90deg,#f59e0b,#22c55e);transition:width .24s ease}.deliveryChecklist{display:grid;gap:8px}.deliveryItem{display:flex;gap:10px;align-items:center;border-radius:16px;padding:10px 11px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.06)}.deliveryItem i{flex:0 0 26px;width:26px;height:26px;border-radius:999px;display:grid;place-items:center;font-style:normal;font-weight:900}.deliveryItem.ok i{background:rgba(34,197,94,.16);color:#86efac}.deliveryItem.missing i{background:rgba(245,158,11,.16);color:#fcd34d}.deliveryItem strong,.deliveryItem span{display:block}.deliveryItem strong{font-size:.84rem;color:#fff}.deliveryItem span{font-size:.72rem;color:#94a3b8}.quickMessageGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.quickMessageGrid button{border:1px solid rgba(212,175,55,.22);background:linear-gradient(135deg,rgba(255,255,255,.08),rgba(212,175,55,.10));color:#e5edf8;border-radius:16px;min-height:42px;padding:8px 10px;font-weight:900;cursor:pointer}.quickMessageGrid button:hover,.opsQualityItem:hover,.opsFocusItem:hover{transform:translateY(-1px);border-color:rgba(212,175,55,.42)}.shareWhatsAppBtn{gap:10px}.shareWhatsAppIcon{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:999px;background:#16a34a;color:#fff}.shareCard>p{display:none!important}
@media(max-width:980px){.opsQuality{grid-template-columns:1fr}.opsQualityList{grid-template-columns:1fr}.quickMessageGrid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.quickMessageGrid{grid-template-columns:1fr}.deliveryChecklistCard,.quickMessagesCard{border-radius:22px;padding:14px}}

/* V36.20.4.3 — Share section 10/10: hidden URL + WhatsApp + copy + native share */
body.view .invitePage .shareCleanCard{
  text-align:center!important;
  display:grid!important;
  gap:14px!important;
  justify-items:center!important;
}
body.view .invitePage .shareCleanCard .sharePrivacyLine{
  display:block!important;
  max-width:620px!important;
  margin:0 auto!important;
  word-break:normal!important;
  overflow-wrap:normal!important;
  color:color-mix(in srgb,var(--eqr-readable-main,#fff) 78%,transparent)!important;
  font-weight:800!important;
}
body.view .invitePage .shareActions{
  width:100%!important;
  max-width:760px!important;
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:10px!important;
  align-items:center!important;
}
body.view .invitePage .shareActions .btn{
  min-height:54px!important;
  border-radius:999px!important;
  white-space:normal!important;
  text-align:center!important;
  gap:9px!important;
}
body.view .invitePage .shareWhatsAppBtn{
  background:linear-gradient(135deg,#16a34a,#15803d)!important;
  color:#fff!important;
  border:1px solid rgba(255,255,255,.16)!important;
  box-shadow:0 18px 44px rgba(22,163,74,.22)!important;
}
body.view .invitePage .shareWhatsAppIcon{
  background:rgba(255,255,255,.18)!important;
  color:#fff!important;
}
body.view .invitePage .shareCopyBtn,
body.view .invitePage .shareNativeBtn{
  background:linear-gradient(135deg,rgba(255,255,255,.12),rgba(255,255,255,.05))!important;
  border:1px solid color-mix(in srgb,var(--event-primary) 32%,rgba(255,255,255,.16))!important;
  color:var(--eqr-readable-main,#fff)!important;
}
body.view .invitePage .shareCopyBtn.copied,
body.view .invitePage .shareNativeBtn.copied{
  background:linear-gradient(135deg,rgba(34,197,94,.22),rgba(34,197,94,.10))!important;
  border-color:rgba(34,197,94,.42)!important;
}
body.view .invitePage .shareHint{
  display:block!important;
  color:color-mix(in srgb,var(--eqr-readable-muted,#cbd5e1) 76%,transparent)!important;
  font-weight:800!important;
  font-size:.78rem!important;
}
body.view .invitePage .shareCleanCard>p:not(.sharePrivacyLine){
  display:none!important;
}
@media(max-width:760px){
  body.view .invitePage .shareActions{
    grid-template-columns:1fr!important;
    max-width:420px!important;
  }
  body.view .invitePage .shareActions .btn{
    width:100%!important;
  }
}

/* =========================================================
   EventoQR.click — Catalogo Premium V36.20.4.4
   Scoped catalog redesign. Safe to append at end of style.css
   ========================================================= */
.catalogPremiumBody{min-height:100vh;color:#f8fafc;background:radial-gradient(circle at 12% 0%,rgba(212,175,55,.18),transparent 30%),radial-gradient(circle at 86% 6%,rgba(124,58,237,.20),transparent 28%),linear-gradient(180deg,#030712 0%,#071024 48%,#020617 100%);overflow-x:hidden}.catalogPremiumBody:before{content:"";position:fixed;inset:0;pointer-events:none;background-image:radial-gradient(rgba(255,255,255,.10) 1px,transparent 1px);background-size:24px 24px;opacity:.16}.catalogLangSwitchPro{position:fixed;right:18px;top:86px;z-index:80;width:46px;height:46px;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:rgba(15,23,42,.72);color:#fff;font-weight:900;backdrop-filter:blur(16px);box-shadow:0 18px 50px rgba(0,0,0,.24)}.catalogProHeader{position:sticky;top:0;z-index:70;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:16px clamp(16px,4vw,58px);background:rgba(3,7,18,.72);border-bottom:1px solid rgba(255,255,255,.10);backdrop-filter:blur(22px)}.catalogProBrand{display:flex;align-items:center;min-width:170px}.catalogProBrand img{height:44px;max-width:210px;object-fit:contain}.catalogProNav{display:flex;align-items:center;gap:6px;font-weight:900;font-size:.84rem;color:#cbd5e1}.catalogProNav a{padding:10px 12px;border-radius:999px;transition:.18s ease}.catalogProNav a:hover{background:rgba(255,255,255,.08);color:#fff}.catalogProNavCta{background:linear-gradient(135deg,#d4af37,#7c3aed)!important;color:#fff!important;box-shadow:0 14px 34px rgba(124,58,237,.24)}.catalogProShell{position:relative;z-index:1;width:min(1420px,calc(100% - 32px));margin:auto}.catalogProHero{min-height:760px;display:grid;grid-template-columns:minmax(0,1.04fr) minmax(420px,.82fr);gap:56px;align-items:center;padding:80px 0 70px}.catalogKicker{display:inline-flex;align-items:center;gap:10px;min-height:34px;padding:0 15px;border-radius:999px;background:rgba(212,175,55,.12);border:1px solid rgba(212,175,55,.28);color:#f7e6ae;font-size:.72rem;font-weight:950;letter-spacing:.16em;text-transform:uppercase}.catalogKicker:before{content:"✦";color:#d4af37}.catalogProHero h1,.catalogSectionHead h2,.catalogGridProTop h2,.catalogCustomCopy h2,.catalogFinalCta h2{font-family:Playfair Display,serif;font-size:clamp(3.2rem,6.8vw,7.2rem);line-height:.9;letter-spacing:-.07em;margin:18px 0 22px;color:#fff;text-wrap:balance}.catalogProHero p,.catalogSectionHead p,.catalogCustomCopy p,.catalogFinalCta p{font-size:1.08rem;line-height:1.85;color:#cbd5e1;max-width:760px}.catalogProActions{display:flex;gap:12px;flex-wrap:wrap;margin:28px 0}.catalogProActions.center{justify-content:center}.catalogWhatsBtn{background:#16a34a!important;color:#fff!important;box-shadow:0 16px 40px rgba(22,163,74,.25)}.catalogTrustStrip{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}.catalogTrustStrip span{border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.08);color:#e5e7eb;font-size:.76rem;font-weight:900;padding:10px 12px}.catalogHeroDevice{position:relative;min-height:650px;display:grid;place-items:center}.catalogPhoneMock{position:relative;overflow:hidden;width:min(390px,90%);min-height:650px;border-radius:48px;padding:64px 28px 30px;text-align:center;background:radial-gradient(circle at 50% 0%,rgba(212,175,55,.28),transparent 30%),linear-gradient(180deg,#160827,#050714);border:1px solid rgba(255,255,255,.16);box-shadow:0 40px 110px rgba(0,0,0,.48),inset 0 0 0 10px rgba(255,255,255,.04)}.catalogPhoneMock:before{content:"";position:absolute;inset:18px;border:1px solid rgba(255,255,255,.10);border-radius:36px;pointer-events:none}.catalogPhoneMock:after{content:"";position:absolute;inset:auto -80px -90px -80px;height:210px;background:radial-gradient(circle,rgba(212,175,55,.28),transparent 64%)}.catalogPhoneIsland{position:absolute;top:22px;left:50%;transform:translateX(-50%);width:116px;height:28px;border-radius:999px;background:#020617;border:1px solid rgba(255,255,255,.10)}.catalogPhoneMock>span{position:relative;z-index:2;display:inline-flex;font-size:.62rem;letter-spacing:.18em;font-weight:950;color:#f7e6ae;border:1px solid rgba(212,175,55,.30);border-radius:999px;padding:8px 12px}.catalogPhoneMock h2{position:relative;z-index:2;font-family:Playfair Display,serif;font-size:3.6rem;line-height:.92;margin:42px 0 0;letter-spacing:-.055em}.catalogPhoneMock h3{position:relative;z-index:2;font-family:Great Vibes,cursive;font-size:5rem;line-height:.85;margin:12px 0;color:#d4af37;font-weight:400}.catalogPhoneMock p{position:relative;z-index:2;color:#e5e7eb;line-height:1.75}.catalogPhonePass{position:relative;z-index:2;margin:34px auto 0;border-radius:28px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.16);padding:18px}.catalogPhonePass small,.catalogPhonePass b{display:block}.catalogPhonePass small{font-size:.64rem;letter-spacing:.16em;color:#f7e6ae;font-weight:950}.catalogPhonePass b{font-size:1.3rem}.catalogFloatCard{position:absolute;z-index:4;min-width:160px;padding:16px 18px;border-radius:24px;background:rgba(15,23,42,.74);border:1px solid rgba(255,255,255,.14);box-shadow:0 22px 70px rgba(0,0,0,.32);backdrop-filter:blur(18px)}.catalogFloatCard small,.catalogFloatCard span{display:block;color:#94a3b8;font-weight:900}.catalogFloatCard b{display:block;color:#fff;font-size:1.8rem;line-height:1}.catalogFloatCard.rsvp{left:0;top:84px}.catalogFloatCard.music{left:22px;bottom:115px}.catalogFloatCard.qr{right:0;top:210px}.catalogFloatCard.qr i{display:block;width:58px;height:58px;margin:8px 0;border-radius:12px;background:#fff;box-shadow:inset 0 0 0 8px #fff;background-image:repeating-linear-gradient(90deg,#111827 0 5px,transparent 5px 10px),repeating-linear-gradient(#111827 0 5px,transparent 5px 10px)}.catalogSectionHead{text-align:center;margin:0 auto 34px;max-width:920px}.catalogSectionHead.left{text-align:left;margin-left:0}.catalogSectionHead h2,.catalogGridProTop h2,.catalogCustomCopy h2,.catalogFinalCta h2{font-size:clamp(2.25rem,4.4vw,4.8rem)}.catalogProFilters,.catalogGridProWrap,.catalogValueSection,.catalogHowSection,.catalogFeaturedDemos,.catalogCustomDemoSection,.catalogPackagesSection,.catalogFaqSection,.catalogFinalCta{padding:74px 0}.catalogFilterPanel{display:grid;gap:16px;background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.045));border:1px solid rgba(255,255,255,.12);border-radius:34px;padding:22px;box-shadow:0 24px 80px rgba(0,0,0,.24);backdrop-filter:blur(18px)}.catalogFilterGroup{display:grid;grid-template-columns:160px 1fr;gap:16px;align-items:start}.catalogFilterGroup strong{color:#fff;font-size:.82rem;text-transform:uppercase;letter-spacing:.14em;padding-top:8px}.catalogPills{display:flex;gap:10px;flex-wrap:wrap}.catalogPills button{border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.07);color:#e5e7eb;border-radius:999px;min-height:40px;padding:0 14px;font-weight:900;cursor:pointer;transition:.18s ease}.catalogPills button:hover{transform:translateY(-1px);background:rgba(255,255,255,.11)}.catalogPills button.active{background:linear-gradient(135deg,#d4af37,#7c3aed);border-color:transparent;color:#fff;box-shadow:0 14px 34px rgba(124,58,237,.22)}.catalogGridProTop{display:flex;align-items:end;justify-content:space-between;gap:18px;margin-bottom:22px}.catalogGridProTop h2{margin:8px 0 0}.catalogGridPro{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.catalogCollectionCard{overflow:hidden;border-radius:34px;background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.055));border:1px solid rgba(255,255,255,.13);box-shadow:0 24px 80px rgba(0,0,0,.25);backdrop-filter:blur(18px);transition:.22s ease}.catalogCollectionCard:hover{transform:translateY(-5px);border-color:rgba(212,175,55,.34);box-shadow:0 34px 100px rgba(0,0,0,.34)}.catalogCollectionPreview{position:relative;overflow:hidden;min-height:300px;padding:46px 26px 24px;text-align:center;background:radial-gradient(circle at 30% 0%,color-mix(in srgb,var(--c2) 36%,transparent),transparent 36%),linear-gradient(160deg,var(--c1),var(--c3));display:flex;flex-direction:column;justify-content:center}.catalogCollectionPreview:before{content:"";position:absolute;inset:18px;border:1px solid rgba(255,255,255,.18);border-radius:28px;pointer-events:none}.catalogCollectionPreview:after{content:"";position:absolute;right:-80px;bottom:-80px;width:220px;height:220px;border-radius:999px;background:rgba(255,255,255,.12);filter:blur(4px)}.previewChrome{position:absolute;top:20px;left:22px;display:flex;gap:6px}.previewChrome i{width:8px;height:8px;border-radius:999px;background:rgba(255,255,255,.65)}.catalogCollectionPreview>span{position:relative;z-index:2;display:inline-flex;margin:0 auto 12px;border-radius:999px;background:rgba(0,0,0,.24);border:1px solid rgba(255,255,255,.18);padding:7px 12px;color:#fff;font-size:.64rem;font-weight:950;letter-spacing:.14em;text-transform:uppercase}.catalogCollectionPreview h3{position:relative;z-index:2;font-family:Playfair Display,serif;font-size:clamp(2.05rem,3vw,3.15rem);line-height:.92;margin:8px 0;color:#fff;letter-spacing:-.05em;text-wrap:balance}.catalogCollectionPreview p{position:relative;z-index:2;color:rgba(255,255,255,.82);font-weight:800}.previewPass{position:relative;z-index:2;margin:14px auto 0;width:min(250px,100%);border-radius:20px;padding:12px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.16)}.previewPass small,.previewPass b{display:block}.previewPass small{font-size:.62rem;letter-spacing:.16em;color:#f7e6ae;font-weight:950}.previewPass b{color:#fff}.catalogCollectionBody{padding:24px}.catalogTags{display:flex;gap:7px;flex-wrap:wrap}.catalogTags span{border-radius:999px;padding:7px 9px;background:rgba(212,175,55,.12);border:1px solid rgba(212,175,55,.22);color:#f7e6ae;font-size:.68rem;font-weight:950}.catalogCollectionBody h3{font-size:1.48rem;line-height:1.05;margin:16px 0 10px;color:#fff}.catalogCollectionBody p{color:#cbd5e1;line-height:1.7}.catalogFeatureListPro{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0}.catalogFeatureListPro span{font-size:.74rem;font-weight:900;color:#e2e8f0;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.07);border-radius:999px;padding:8px 10px}.catalogSwatchesPro{display:flex;gap:8px;margin:16px 0}.catalogSwatchesPro i{display:block;width:24px;height:24px;border-radius:999px;background:var(--sw);box-shadow:0 0 0 3px rgba(255,255,255,.10)}.catalogCollectionActions{display:grid;grid-template-columns:1fr;gap:10px;margin-top:18px}.catalogCollectionActions .btn{width:100%;font-size:.82rem}.catalogNoResults{grid-column:1/-1;text-align:center;border:1px dashed rgba(255,255,255,.20);border-radius:30px;padding:44px;background:rgba(255,255,255,.06)}.catalogBenefitGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.catalogBenefitGrid article,.catalogSteps article,.catalogPackageGrid article,.catalogFaqGrid details{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:28px;padding:24px;box-shadow:0 20px 60px rgba(0,0,0,.18)}.catalogBenefitGrid i{display:grid;place-items:center;width:44px;height:44px;border-radius:16px;background:linear-gradient(135deg,#d4af37,#7c3aed);font-style:normal;font-weight:950;margin-bottom:16px}.catalogBenefitGrid h3,.catalogSteps h3,.catalogPackageGrid h3{font-size:1.18rem;margin:0 0 8px;color:#fff}.catalogBenefitGrid p,.catalogSteps p,.catalogPackageGrid p,.catalogFaqGrid p{color:#cbd5e1;line-height:1.72}.catalogSteps{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}.catalogSteps b{display:inline-flex;margin-bottom:16px;color:#d4af37;font-size:1.45rem;font-family:Playfair Display,serif}.catalogMiniDemoGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.catalogMiniDemo{overflow:hidden;border-radius:30px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12)}.catalogMiniDemo .catalogCollectionPreview{min-height:220px}.catalogMiniDemo>div:not(.catalogCollectionPreview){padding:20px}.catalogMiniDemo span{color:#f7e6ae;font-size:.72rem;font-weight:950;text-transform:uppercase;letter-spacing:.12em}.catalogMiniDemo h3{color:#fff;margin:8px 0 6px}.catalogMiniDemo p{color:#cbd5e1}.catalogMiniActions{display:flex!important;gap:10px;flex-wrap:wrap;padding-top:0!important}.catalogMiniActions a,.catalogMiniActions button{flex:1;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.07);color:#fff;border-radius:999px;min-height:42px;padding:0 12px;font-weight:900;cursor:pointer;text-align:center;display:grid;place-items:center}.catalogMiniActions a:first-child{background:linear-gradient(135deg,#d4af37,#7c3aed);border-color:transparent}.catalogCustomDemoSection{display:grid;grid-template-columns:minmax(0,.9fr) minmax(380px,.75fr);gap:28px;align-items:center}.catalogCustomNotes{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}.catalogCustomNotes span{border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.08);color:#e5e7eb;font-size:.78rem;font-weight:900;padding:10px 12px}.catalogCustomForm{background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.055));border:1px solid rgba(255,255,255,.13);border-radius:34px;padding:24px;box-shadow:0 24px 80px rgba(0,0,0,.24)}.catalogCustomForm label{font-weight:900;color:#e2e8f0;font-size:.82rem}.catalogCustomForm small{display:block;color:#94a3b8;text-align:center;margin-top:14px;line-height:1.6}.catalogPackageGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.catalogPackageGrid article{position:relative;overflow:hidden}.catalogPackageGrid article.featured{border-color:rgba(212,175,55,.44);background:linear-gradient(180deg,rgba(212,175,55,.14),rgba(255,255,255,.07))}.catalogPackageGrid article>span{display:inline-flex;border-radius:999px;padding:8px 12px;background:rgba(212,175,55,.13);color:#f7e6ae;border:1px solid rgba(212,175,55,.24);font-size:.72rem;text-transform:uppercase;letter-spacing:.14em;font-weight:950}.catalogPackageGrid ul{margin:18px 0 0;padding:0;list-style:none;display:grid;gap:9px}.catalogPackageGrid li{color:#e5e7eb;font-weight:800;font-size:.84rem}.catalogPackageGrid li:before{content:"✓";color:#d4af37;margin-right:8px}.catalogFaqGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.catalogFaqGrid summary{cursor:pointer;color:#fff;font-weight:950;font-size:1rem}.catalogFaqGrid details p{margin-bottom:0}.catalogFinalCta{text-align:center;border-radius:46px;margin:54px 0;background:radial-gradient(circle at 50% 0%,rgba(212,175,55,.20),transparent 36%),linear-gradient(135deg,rgba(255,255,255,.12),rgba(255,255,255,.055));border:1px solid rgba(255,255,255,.14);padding:58px 28px}.catalogFinalCta h2{max-width:980px;margin-left:auto;margin-right:auto}.catalogFinalCta p{margin-left:auto;margin-right:auto}.catalogFinalCta small{display:block;color:#94a3b8;font-weight:800;margin-top:20px}.catalogProFooter{display:grid;grid-template-columns:1fr auto;gap:22px;align-items:center;text-align:left;border-top:1px solid rgba(255,255,255,.10);padding:34px 0;color:#94a3b8}.catalogProFooter strong{display:block;color:#fff;font-size:1.1rem}.catalogProFooter p{margin:6px 0 0}.catalogProFooter nav{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}.catalogProFooter nav a{font-weight:900;color:#cbd5e1;border-radius:999px;padding:8px 10px;background:rgba(255,255,255,.06)}.catalogProFooter>span{grid-column:1/-1;text-align:center;color:#64748b;font-weight:900}.catalogFloatWhats{position:fixed;right:18px;bottom:18px;z-index:80;border-radius:999px;background:#16a34a;color:#fff!important;padding:14px 18px;font-weight:950;box-shadow:0 18px 50px rgba(22,163,74,.30);animation:catalogPulse 2.2s infinite}.catalogFloatWhats:before{content:"☘";margin-right:8px}@keyframes catalogPulse{0%,100%{transform:translateY(0);box-shadow:0 18px 50px rgba(22,163,74,.30)}50%{transform:translateY(-3px);box-shadow:0 24px 70px rgba(22,163,74,.46)}}@media(max-width:1180px){.catalogProHero,.catalogCustomDemoSection{grid-template-columns:1fr}.catalogHeroDevice{min-height:580px}.catalogGridPro,.catalogMiniDemoGrid{grid-template-columns:repeat(2,1fr)}.catalogBenefitGrid,.catalogPackageGrid{grid-template-columns:repeat(2,1fr)}.catalogSteps{grid-template-columns:repeat(3,1fr)}}@media(max-width:820px){.catalogProHeader{align-items:flex-start;flex-direction:column}.catalogProNav{width:100%;overflow-x:auto;padding-bottom:4px}.catalogProShell{width:min(100% - 22px,1420px)}.catalogProHero{padding-top:46px;min-height:auto}.catalogProHero h1{font-size:clamp(3rem,14vw,5rem)}.catalogHeroDevice{display:none}.catalogFilterGroup{grid-template-columns:1fr}.catalogGridPro,.catalogMiniDemoGrid,.catalogBenefitGrid,.catalogSteps,.catalogPackageGrid,.catalogFaqGrid{grid-template-columns:1fr}.catalogGridProTop{align-items:flex-start;flex-direction:column}.catalogCustomDemoSection{gap:18px}.catalogProFooter{grid-template-columns:1fr;text-align:center}.catalogProFooter nav{justify-content:center}.catalogLangSwitchPro{top:auto;bottom:76px;right:18px}.catalogFloatWhats{left:16px;right:16px;text-align:center;display:grid;place-items:center}.catalogCollectionPreview{min-height:250px}.catalogProActions .btn{width:100%}}

/* =========================================================
   EventoQR.click V36.20.4.5 — Landing principal 10/10
   ========================================================= */
body.eqrHome10Body{
  min-height:100vh;
  color:#f8fafc;
  background:
    radial-gradient(circle at 15% 0%, rgba(212,175,55,.18), transparent 28%),
    radial-gradient(circle at 84% 4%, rgba(124,58,237,.22), transparent 28%),
    radial-gradient(circle at 52% 34%, rgba(236,72,153,.08), transparent 34%),
    linear-gradient(180deg,#050712 0%,#071024 44%,#080611 100%);
  overflow-x:hidden;
}
.eqrHome10Body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.10) 1px, transparent 1px);
  background-size:30px 30px;
  opacity:.12;
}
.eqrHomeHeader{
  position:sticky;
  top:0;
  z-index:90;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:16px clamp(16px,4vw,58px);
  background:rgba(5,7,18,.76);
  border-bottom:1px solid rgba(255,255,255,.10);
  backdrop-filter:blur(20px);
}
.eqrHomeBrand{display:flex;align-items:center;gap:12px;min-width:0}
.eqrHomeBrand img{display:block;width:min(220px,48vw);height:auto;max-height:54px;object-fit:contain}
.eqrHomeNav{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap;font-weight:900;font-size:.86rem;color:#d8dee9}
.eqrHomeNav a{padding:10px 12px;border-radius:999px;transition:.18s ease;color:inherit}
.eqrHomeNav a:hover{background:rgba(255,255,255,.08);color:#fff;transform:translateY(-1px)}
.eqrHomeNav .eqrNavCta{background:linear-gradient(135deg,#d4af37,#7c3aed);color:#fff;box-shadow:0 18px 44px rgba(124,58,237,.24)}
.eqrHomeHero{
  position:relative;
  width:min(1240px,calc(100% - 34px));
  min-height:calc(100vh - 88px);
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr);
  align-items:center;
  gap:46px;
  padding:72px 0 88px;
}
.eqrHeroGlow{position:absolute;filter:blur(10px);pointer-events:none;border-radius:999px;opacity:.74}
.eqrGlowA{width:360px;height:360px;left:-170px;top:40px;background:radial-gradient(circle,rgba(212,175,55,.16),transparent 68%)}
.eqrGlowB{width:520px;height:520px;right:-220px;bottom:20px;background:radial-gradient(circle,rgba(124,58,237,.20),transparent 70%)}
.eqrKicker,
.eqrSectionHead span,
.eqrFinalCta10 span,
.eqrSocialCard10 span{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:34px;
  padding:0 15px;
  border:1px solid rgba(212,175,55,.28);
  border-radius:999px;
  background:rgba(212,175,55,.10);
  color:#f9e6a6;
  text-transform:uppercase;
  letter-spacing:.18em;
  font-weight:950;
  font-size:.68rem;
}
.eqrHeroCopy h1{
  font-family:Playfair Display,serif;
  margin:20px 0 22px;
  font-size:clamp(3.35rem,7.2vw,7.1rem);
  line-height:.88;
  letter-spacing:-.075em;
  text-wrap:balance;
}
.eqrHeroCopy p{
  margin:0;
  max-width:760px;
  color:#cbd5e1;
  font-size:clamp(1rem,1.45vw,1.18rem);
  line-height:1.9;
}
.eqrHeroActions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:28px 0 0}
.eqrHeroActions.center{justify-content:center}
.eqrHeroBadges{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.eqrHeroBadges span,
.eqrTypeRibbon span,
.eqrProofStats b{
  display:inline-flex;
  min-height:38px;
  align-items:center;
  justify-content:center;
  padding:0 14px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  color:#e5e7eb;
  font-weight:900;
  font-size:.82rem;
}
.eqrHeroVisual{position:relative;min-height:670px;display:grid;place-items:center;perspective:1200px}
.eqrPhoneMock10{
  position:relative;
  width:min(370px,88vw);
  min-height:665px;
  border-radius:52px;
  padding:14px;
  background:linear-gradient(145deg,#f6e5ad,#1e1b35 28%,#030712 72%,#d4af37);
  box-shadow:0 40px 120px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.18) inset;
  transform:rotate(-2deg);
}
.eqrPhoneNotch{position:absolute;top:24px;left:50%;transform:translateX(-50%);width:116px;height:26px;border-radius:999px;background:#030712;z-index:2}
.eqrPhoneScreen10{
  position:relative;
  overflow:hidden;
  min-height:637px;
  border-radius:40px;
  padding:58px 24px 24px;
  text-align:center;
  background:
    radial-gradient(circle at 20% 8%,rgba(212,175,55,.18),transparent 30%),
    radial-gradient(circle at 100% 0%,rgba(236,72,153,.18),transparent 30%),
    linear-gradient(180deg,#15091f 0%,#090615 58%,#060712 100%);
}
.eqrPhoneScreen10::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,transparent 45%,rgba(255,255,255,.07),transparent 66%);pointer-events:none}
.eqrPhoneScreen10 > *{position:relative}
.eqrPhoneScreen10 span{display:block;color:#f9e6a6;text-transform:uppercase;letter-spacing:.16em;font-weight:950;font-size:.64rem}
.eqrPhoneScreen10 h2{font-family:Playfair Display,serif;margin:24px 0 0;font-size:2.75rem;line-height:.92;color:#fff}
.eqrPhoneScreen10 h3{font-family:Great Vibes,cursive;margin:-2px 0 0;font-size:4.2rem;line-height:.95;color:#d4af37;font-weight:400}
.eqrPhoneScreen10 p{margin:10px 0 18px;color:#e5e7eb;font-weight:800;font-size:.9rem}
.eqrMiniInviteReal10{
  position:relative;
  width:min(248px,100%);
  min-height:266px;
  margin:0 auto 18px;
  overflow:hidden;
  border-radius:30px;
  padding:22px 16px 16px;
  text-align:center;
  background:
    radial-gradient(circle at 16% 8%,rgba(212,175,55,.28),transparent 28%),
    radial-gradient(circle at 88% 12%,rgba(124,58,237,.35),transparent 30%),
    linear-gradient(180deg,#17091f 0%,#090615 60%,#050611 100%);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 28px 70px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.10);
}
.eqrMiniInviteReal10::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:radial-gradient(rgba(255,255,255,.28) 1px,transparent 1px);
  background-size:18px 18px;
  opacity:.12;
  pointer-events:none;
}
.eqrMiniInviteReal10::after{
  content:"";
  position:absolute;
  inset:10px;
  border-radius:24px;
  border:1px solid rgba(212,175,55,.20);
  pointer-events:none;
}
.eqrMiniInviteReal10 > *{position:relative;z-index:1}
.eqrMiniInviteReal10 span{
  display:inline-flex;
  justify-content:center;
  align-items:center;
  min-height:25px;
  padding:0 10px;
  border-radius:999px;
  color:#f9e6a6;
  background:rgba(212,175,55,.11);
  border:1px solid rgba(212,175,55,.24);
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.53rem;
  font-weight:950;
}
.eqrMiniInviteReal10 h4{
  font-family:Playfair Display,serif;
  color:#fff;
  font-size:1.65rem;
  line-height:.92;
  margin:17px 0 0;
  letter-spacing:-.05em;
}
.eqrMiniInviteReal10 strong{
  display:block;
  font-family:Great Vibes,cursive;
  color:#d4af37;
  font-size:3.05rem;
  line-height:.9;
  font-weight:400;
  margin:0 0 7px;
  text-shadow:0 0 28px rgba(212,175,55,.18);
}
.eqrMiniInviteReal10 p{
  color:#e8edf8;
  font-size:.76rem;
  font-weight:850;
  margin:0 auto 10px;
  max-width:200px;
}
.eqrMiniInviteLine{
  width:64px;
  height:2px;
  border-radius:999px;
  margin:10px auto 14px;
  background:linear-gradient(90deg,transparent,#d4af37,transparent);
  box-shadow:0 0 18px rgba(212,175,55,.55);
}
.eqrMiniInvitePass{
  margin:0 auto;
  max-width:205px;
  border-radius:20px;
  padding:12px 10px;
  background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.06));
  border:1px solid rgba(255,255,255,.15);
}
.eqrMiniInvitePass small,.eqrMiniInvitePass em{
  display:block;
  color:#cbd5e1;
  font-size:.55rem;
  font-style:normal;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.12em;
}
.eqrMiniInvitePass small{color:#f9e6a6}
.eqrMiniInvitePass b{
  display:block;
  margin:2px 0;
  color:#fff;
  font-size:.92rem;
}
.eqrMiniInviteOrnament{
  position:absolute;
  z-index:0;
  width:80px;
  height:80px;
  border-radius:999px;
  filter:blur(.2px);
  opacity:.72;
  background:radial-gradient(circle,#7c3aed 0 18%,transparent 20%),radial-gradient(circle at 70% 30%,#d4af37 0 10%,transparent 12%);
}
.eqrMiniInviteOrnamentA{left:-34px;top:28px}
.eqrMiniInviteOrnamentB{right:-34px;bottom:42px;transform:rotate(35deg)}
.eqrPhonePass10{border-radius:26px;padding:16px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.14);box-shadow:0 18px 44px rgba(0,0,0,.22)}
.eqrPhonePass10 small,.eqrPhonePass10 em{display:block;color:#cbd5e1;font-size:.7rem;font-style:normal;font-weight:900;text-transform:uppercase;letter-spacing:.12em}
.eqrPhonePass10 strong{display:block;margin:3px 0;color:#fff;font-size:1.1rem}
.eqrPhoneActions10{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.eqrPhoneActions10 i{font-style:normal;border-radius:999px;background:rgba(212,175,55,.16);border:1px solid rgba(212,175,55,.22);padding:8px 6px;color:#f9e6a6;font-size:.7rem;font-weight:950}
.eqrFloatCard{position:absolute;z-index:3;width:174px;border-radius:24px;padding:16px;background:rgba(15,23,42,.72);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(18px);box-shadow:0 26px 70px rgba(0,0,0,.28)}
.eqrFloatCard small,.eqrFloatCard span{display:block;color:#94a3b8;text-transform:uppercase;letter-spacing:.12em;font-size:.62rem;font-weight:950}
.eqrFloatCard b{display:block;color:#fff;font-size:1.08rem;margin:4px 0}
.eqrFloatRsvp{left:4%;top:16%}.eqrFloatMusic{right:0;top:28%;width:200px}.eqrFloatQr{right:6%;bottom:15%;width:150px;text-align:center}
.eqrMiniQr{width:72px;height:72px;margin:7px auto;background:#fff;border-radius:12px;padding:9px;position:relative}
.eqrMiniQr::before{content:"";display:block;width:100%;height:100%;border-radius:6px;background:repeating-linear-gradient(90deg,#111827 0 5px,transparent 5px 10px),repeating-linear-gradient(#111827 0 5px,transparent 5px 10px);opacity:.72}
.eqrSection{width:min(1180px,calc(100% - 34px));margin:0 auto;padding:82px 0}
.eqrSectionHead{text-align:center;max-width:850px;margin:0 auto 34px}
.eqrSectionHead.compact{max-width:760px;margin-bottom:24px}
.eqrSectionHead h2,.eqrFinalCta10 h2,.eqrSocialCard10 h2{
  font-size:clamp(2.4rem,5vw,4.8rem);
  line-height:.94;
  letter-spacing:-.065em;
  margin:16px 0 14px;
  text-wrap:balance;
}
.eqrSectionHead p,.eqrFinalCta10 p,.eqrSocialCard10 p{color:#cbd5e1;font-size:1.03rem;line-height:1.85;margin:0 auto;max-width:760px}
.eqrFeatureGrid10{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.eqrFeatureGrid10 article,
.eqrSteps10 article,
.eqrPricingGrid10 article,
.eqrDemoGrid10 a,
.eqrFaqGrid10 details{
  position:relative;
  overflow:hidden;
  border-radius:30px;
  background:rgba(255,255,255,.075);
  border:1px solid rgba(255,255,255,.12);
  padding:24px;
  box-shadow:0 24px 70px rgba(0,0,0,.18);
}
.eqrFeatureGrid10 article::before,.eqrPricingGrid10 article::before,.eqrDemoGrid10 a::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 15% 0%,rgba(212,175,55,.12),transparent 38%);pointer-events:none}
.eqrFeatureGrid10 i{width:44px;height:44px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(212,175,55,.30),rgba(124,58,237,.28));font-style:normal;color:#fff;font-weight:950}
.eqrFeatureGrid10 h3,.eqrSteps10 h3,.eqrPricingGrid10 h3,.eqrDemoGrid10 h3{margin:16px 0 8px;font-size:1.22rem;color:#fff;letter-spacing:-.03em}
.eqrFeatureGrid10 p,.eqrSteps10 p,.eqrPricingGrid10 p,.eqrDemoGrid10 p,.eqrFaqGrid10 p{position:relative;color:#cbd5e1;margin:0;line-height:1.72;font-size:.92rem}
.eqrTypeRibbon{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;max-width:930px;margin:auto}
.eqrTypeRibbon span{background:rgba(212,175,55,.10);border-color:rgba(212,175,55,.18);color:#f9e6a6}
.eqrProcessSection{width:min(1240px,calc(100% - 34px))}
.eqrSteps10{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.eqrSteps10 b{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:16px;background:#d4af37;color:#0f172a;font-weight:950}
.eqrPricingGrid10{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;align-items:stretch}
.eqrPricingGrid10 article{display:flex;flex-direction:column;min-height:100%}
.eqrPricingGrid10 article.featured{background:linear-gradient(180deg,rgba(212,175,55,.18),rgba(124,58,237,.13));border-color:rgba(212,175,55,.42);transform:translateY(-8px)}
.eqrPricingGrid10 small,.eqrDemoGrid10 span{position:relative;color:#f9e6a6;text-transform:uppercase;letter-spacing:.16em;font-size:.68rem;font-weight:950}
.eqrPricingGrid10 em{position:absolute;right:18px;top:18px;font-style:normal;border-radius:999px;background:#d4af37;color:#111827;padding:7px 10px;font-size:.62rem;font-weight:950;text-transform:uppercase;letter-spacing:.10em}
.eqrPricingGrid10 strong{position:relative;display:block;color:#fff;font-size:1.22rem;margin:0 0 12px}
.eqrPricingGrid10 ul{position:relative;list-style:none;margin:18px 0;padding:0;display:grid;gap:9px;color:#e5e7eb;font-weight:800;font-size:.86rem}
.eqrPricingGrid10 li::before{content:"✓";color:#f9e6a6;margin-right:8px}
.eqrPricingGrid10 a{position:relative;margin-top:auto;display:inline-flex;justify-content:center;align-items:center;min-height:46px;border-radius:999px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.14);font-weight:950;color:#fff}
.eqrPricingGrid10 article.featured a{background:linear-gradient(135deg,#d4af37,#7c3aed)}
.eqrDemoGrid10{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.eqrDemoGrid10 a{display:block;color:inherit;min-height:220px;transition:.18s ease}
.eqrDemoGrid10 a:hover{transform:translateY(-4px);border-color:rgba(212,175,55,.36);box-shadow:0 30px 80px rgba(124,58,237,.20)}
.eqrDemoGrid10 h3{font-family:Playfair Display,serif;font-size:1.75rem;line-height:1;margin-top:18px}
.eqrCenterActions{display:flex;justify-content:center;margin-top:28px}
.eqrSocialCard10,.eqrFinalCta10{
  position:relative;
  overflow:hidden;
  text-align:center;
  border-radius:46px;
  padding:clamp(34px,6vw,72px) clamp(20px,5vw,70px);
  background:
    radial-gradient(circle at 15% 0%,rgba(212,175,55,.18),transparent 34%),
    radial-gradient(circle at 85% 20%,rgba(124,58,237,.20),transparent 38%),
    rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.13);
  box-shadow:0 35px 100px rgba(0,0,0,.26);
}
.eqrProofStats{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:26px}
.eqrFaqGrid10{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;max-width:980px;margin:auto}
.eqrFaqGrid10 summary{cursor:pointer;font-weight:950;color:#fff;font-size:1.02rem;list-style:none}
.eqrFaqGrid10 summary::-webkit-details-marker{display:none}
.eqrFaqGrid10 summary::after{content:"+";float:right;color:#f9e6a6;font-weight:950}
.eqrFaqGrid10 details[open] summary::after{content:"−"}
.eqrFaqGrid10 p{margin-top:12px;color:#cbd5e1}
.eqrFinalCta10{width:min(1080px,calc(100% - 34px));margin:58px auto 42px}
.eqrHomeFooter{width:min(1180px,calc(100% - 34px));margin:auto;padding:34px 0 44px;text-align:center;color:#94a3b8}
.eqrHomeFooter strong{display:block;color:#fff;font-size:1.2rem}
.eqrHomeFooter p{margin:8px auto 16px;max-width:620px;color:#cbd5e1}
.eqrHomeFooter nav{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:0 0 18px}
.eqrHomeFooter nav a{padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);font-weight:900;color:#e5e7eb}
.eqrHomeFooter small{display:block;font-weight:900}
.eqrFloatWhatsApp10{position:fixed;right:18px;bottom:18px;z-index:88;display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 18px;border-radius:999px;background:#16a34a;color:#fff;font-weight:950;box-shadow:0 24px 60px rgba(22,163,74,.34);animation:eqrPulseWA 2.2s ease-in-out infinite}
.eqrFloatWhatsApp10::before{content:"✆";margin-right:8px}
@keyframes eqrPulseWA{0%,100%{transform:translateY(0);box-shadow:0 24px 60px rgba(22,163,74,.34)}50%{transform:translateY(-3px);box-shadow:0 30px 76px rgba(22,163,74,.44)}}
@media(max-width:1120px){
  .eqrHomeHero{grid-template-columns:1fr;min-height:auto;padding-top:52px}.eqrHeroCopy{text-align:center}.eqrHeroCopy p{margin:auto}.eqrHeroActions,.eqrHeroBadges{justify-content:center}.eqrFeatureGrid10,.eqrPricingGrid10{grid-template-columns:repeat(2,1fr)}.eqrSteps10{grid-template-columns:repeat(3,1fr)}.eqrHeroVisual{min-height:630px}.eqrFloatRsvp{left:8%;top:8%}.eqrFloatMusic{right:6%;top:12%}.eqrFloatQr{right:10%;bottom:7%}
}
@media(max-width:760px){
  .eqrHomeHeader{align-items:flex-start;flex-direction:column;padding:14px 14px}.eqrHomeNav{justify-content:flex-start;width:100%;overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px}.eqrHomeNav a{white-space:nowrap}.eqrHomeHero{width:min(100% - 24px,1180px);padding:38px 0 58px;gap:26px}.eqrHeroCopy h1{font-size:clamp(3rem,14vw,4.2rem)}.eqrHeroCopy p{font-size:.98rem;line-height:1.75}.eqrHeroActions .btn{width:100%}.eqrHeroBadges span{width:100%;justify-content:center}.eqrHeroVisual{min-height:580px}.eqrPhoneMock10{width:min(324px,94vw);min-height:590px;border-radius:44px}.eqrPhoneScreen10{min-height:562px;border-radius:34px;padding:52px 18px 20px}.eqrPhoneScreen10 h2{font-size:2.2rem}.eqrPhoneScreen10 h3{font-size:3.45rem}.eqrInvitePhotoGhost{width:160px;height:205px}.eqrFloatCard{display:none}.eqrSection{width:min(100% - 24px,1180px);padding:58px 0}.eqrSectionHead h2,.eqrFinalCta10 h2,.eqrSocialCard10 h2{font-size:clamp(2.25rem,10vw,3.15rem)}.eqrFeatureGrid10,.eqrPricingGrid10,.eqrDemoGrid10,.eqrFaqGrid10{grid-template-columns:1fr}.eqrSteps10{grid-template-columns:1fr}.eqrPricingGrid10 article.featured{transform:none}.eqrFinalCta10{width:min(100% - 24px,1080px);margin-top:30px}.eqrFloatWhatsApp10{right:12px;bottom:12px;min-height:48px;font-size:.88rem}.eqrHomeFooter{width:min(100% - 24px,1180px)}
}


/* V36.20.4.8 — Audio personalizado / mensaje de voz */
.audioAdminGrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}.audioLoopCheck{display:flex!important;align-items:center;gap:10px;margin-top:8px;color:#cbd5e1;font-weight:900;font-size:.84rem}.audioLoopCheck input{width:18px;height:18px;accent-color:var(--event-primary,#D4AF37)}.audioSpecialDock .musicMeta em{display:block;margin-top:2px;color:rgba(255,255,255,.72);font-style:normal;font-size:.72rem;line-height:1.25;max-width:180px}.audioSpecialDock.audio-type-voice-message,.audioSpecialDock.audio-type-dedication,.audioSpecialDock.audio-type-family-message,.audioSpecialDock.audio-type-memorial,.audioSpecialDock.audio-type-custom{background:linear-gradient(135deg,rgba(15,23,42,.92),rgba(68,33,86,.86));border-color:rgba(212,175,55,.30);box-shadow:0 24px 70px rgba(0,0,0,.35),0 0 0 1px rgba(212,175,55,.10) inset}.audioSpecialDock.audio-type-voice-message button,.audioSpecialDock.audio-type-dedication button,.audioSpecialDock.audio-type-family-message button,.audioSpecialDock.audio-type-memorial button,.audioSpecialDock.audio-type-custom button{background:linear-gradient(135deg,#f9e6a6,#d4af37)!important;color:#120817!important}.audioSpecialDock.audio-type-voice-message .musicMeta small,.audioSpecialDock.audio-type-dedication .musicMeta small,.audioSpecialDock.audio-type-family-message .musicMeta small,.audioSpecialDock.audio-type-memorial .musicMeta small,.audioSpecialDock.audio-type-custom .musicMeta small{color:#f9e6a6}.audioSpecialDock.audio-type-voice-message .musicBars i,.audioSpecialDock.audio-type-dedication .musicBars i,.audioSpecialDock.audio-type-family-message .musicBars i,.audioSpecialDock.audio-type-memorial .musicBars i,.audioSpecialDock.audio-type-custom .musicBars i{background:linear-gradient(180deg,#f9e6a6,#d4af37)}@media(max-width:720px){.audioAdminGrid{grid-template-columns:1fr}.audioSpecialDock .musicMeta em{max-width:150px;font-size:.68rem}}


/* =========================================================
   EventoQR.click V36.20.4.9 — Crear Demo Landing
   ========================================================= */
.demoBuilderBody{min-height:100vh;color:#f8fafc;background:radial-gradient(circle at 12% 0%,rgba(212,175,55,.18),transparent 30%),radial-gradient(circle at 86% 6%,rgba(124,58,237,.22),transparent 28%),linear-gradient(180deg,#030712 0%,#071024 48%,#020617 100%);overflow-x:hidden}.demoBuilderBody:before{content:"";position:fixed;inset:0;pointer-events:none;background-image:radial-gradient(rgba(255,255,255,.09) 1px,transparent 1px);background-size:24px 24px;opacity:.14}.demoBuilderHeader{position:sticky;top:0;z-index:60;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px clamp(16px,4vw,54px);background:rgba(3,7,18,.74);border-bottom:1px solid rgba(255,255,255,.10);backdrop-filter:blur(18px)}.demoBuilderBrand img{height:48px;width:auto;display:block}.demoBuilderNav{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.demoBuilderNav a{border-radius:999px;padding:10px 12px;color:#cbd5e1;font-weight:900;font-size:.86rem}.demoBuilderNav a:hover,.demoBuilderNavCta{background:rgba(255,255,255,.08);color:#fff}.demoBuilderNavCta{border:1px solid rgba(212,175,55,.28)!important;color:#f9e6a6!important}.demoBuilderShell{width:min(1260px,calc(100% - 34px));margin:0 auto}.demoBuilderHero{position:relative;min-height:760px;display:grid;grid-template-columns:minmax(0,1fr) minmax(380px,.86fr);gap:50px;align-items:center;padding:70px 0}.demoKicker,.demoSectionHead span,.demoResultCard>span,.demoFinalCta>span{display:inline-flex;text-transform:uppercase;letter-spacing:.2em;color:#f9e6a6;font-size:.72rem;font-weight:950}.demoHeroCopy h1{font-size:clamp(3.4rem,7vw,7.1rem);line-height:.87;letter-spacing:-.078em;margin:18px 0 22px;text-wrap:balance}.demoHeroCopy p,.demoSectionHead p,.demoFinalCta p{color:#cbd5e1;font-size:1.05rem;line-height:1.85;max-width:760px}.demoHeroActions{display:flex;gap:12px;flex-wrap:wrap;margin:28px 0}.demoHeroActions.center{justify-content:center}.demoWhatsBtn{background:#16a34a!important;color:#fff!important;box-shadow:0 18px 48px rgba(22,163,74,.24)}.demoTrustStrip{display:flex;gap:10px;flex-wrap:wrap}.demoTrustStrip span{border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.07);border-radius:999px;padding:9px 12px;color:#e2e8f0;font-weight:900;font-size:.78rem}.demoHeroPreview{position:relative;min-height:680px;display:grid;place-items:center}.demoPreviewPhone{position:relative;width:min(380px,92vw);min-height:660px;border-radius:54px;padding:14px;background:linear-gradient(145deg,#f6e5ad,#1e1b35 26%,#030712 76%,#d4af37);box-shadow:0 44px 140px rgba(0,0,0,.58),0 0 0 1px rgba(255,255,255,.18) inset;transform:rotate(-2deg)}.demoPreviewIsland{position:absolute;top:24px;left:50%;transform:translateX(-50%);width:118px;height:26px;border-radius:999px;background:#030712;z-index:2}.demoPreviewScreen{position:relative;overflow:hidden;min-height:632px;border-radius:42px;padding:58px 24px 24px;text-align:center;background:radial-gradient(circle at 20% 8%,rgba(212,175,55,.20),transparent 30%),radial-gradient(circle at 100% 0%,rgba(236,72,153,.16),transparent 30%),linear-gradient(180deg,#15091f 0%,#090615 58%,#060712 100%)}.demoPreviewScreen:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,transparent 45%,rgba(255,255,255,.065),transparent 66%);pointer-events:none}.demoPreviewScreen>*{position:relative}.demoPreviewScreen>span{display:block;color:#f9e6a6;text-transform:uppercase;letter-spacing:.16em;font-weight:950;font-size:.62rem}.demoPreviewScreen h2{font-family:Playfair Display,serif;margin:22px 0 0;font-size:2.65rem;line-height:.92;color:#fff}.demoPreviewScreen h3{font-family:Great Vibes,cursive;margin:-2px 0 0;font-size:4.25rem;line-height:.95;color:#d4af37;font-weight:400}.demoPreviewScreen p{margin:10px 0 16px;color:#e5e7eb;font-weight:800;font-size:.86rem}.demoPreviewPhoto{width:min(230px,100%);height:178px;margin:0 auto 14px;border-radius:30px;background:radial-gradient(circle at 30% 20%,rgba(252,211,77,.45),transparent 28%),radial-gradient(circle at 74% 28%,rgba(168,85,247,.55),transparent 30%),linear-gradient(180deg,#2b1740,#080712);border:1px solid rgba(255,255,255,.18);box-shadow:0 24px 60px rgba(124,58,237,.24);display:grid;place-items:end center;padding:18px}.demoPreviewPhoto small{color:#fff;font-weight:950;text-transform:uppercase;font-size:.62rem;letter-spacing:.14em;background:rgba(0,0,0,.28);border-radius:999px;padding:7px 10px}.demoPreviewAudio,.demoPreviewPass{border-radius:24px;padding:13px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.14);box-shadow:0 18px 44px rgba(0,0,0,.22);margin-top:10px}.demoPreviewAudio b,.demoPreviewAudio em,.demoPreviewPass small,.demoPreviewPass em{display:block}.demoPreviewAudio b{color:#f9e6a6}.demoPreviewAudio em,.demoPreviewPass em{color:#cbd5e1;font-style:normal;font-size:.72rem;font-weight:900}.demoPreviewPass small{color:#cbd5e1;font-size:.68rem;font-weight:950;text-transform:uppercase;letter-spacing:.12em}.demoPreviewPass strong{display:block;color:#fff;font-size:1.05rem}.demoFloatingCard{position:absolute;z-index:4;width:178px;border-radius:24px;padding:16px;background:rgba(15,23,42,.74);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(18px);box-shadow:0 26px 70px rgba(0,0,0,.28)}.demoFloatingCard small,.demoFloatingCard span{display:block;color:#94a3b8;text-transform:uppercase;letter-spacing:.12em;font-size:.62rem;font-weight:950}.demoFloatingCard b{display:block;color:#fff;font-size:1.04rem;margin:4px 0}.demoFloatingCard.one{left:0;top:16%}.demoFloatingCard.two{right:0;top:38%}.demoFloatingCard.three{left:6%;bottom:14%}.demoBuilderSection{padding:78px 0}.demoSectionHead{text-align:center;max-width:850px;margin:0 auto 34px}.demoSectionHead.left{text-align:left;margin-left:0}.demoSectionHead h2,.demoFinalCta h2{font-size:clamp(2.4rem,5vw,4.8rem);line-height:.94;letter-spacing:-.065em;margin:16px 0 14px;text-wrap:balance}.demoTypeGrid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-bottom:24px}.demoTypeGrid button{min-height:136px;border-radius:28px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.075);color:#fff;padding:18px;cursor:pointer;text-align:left;box-shadow:0 20px 60px rgba(0,0,0,.18);transition:.18s ease}.demoTypeGrid button:hover,.demoTypeGrid button.active{transform:translateY(-2px);border-color:rgba(212,175,55,.44);background:linear-gradient(180deg,rgba(212,175,55,.14),rgba(255,255,255,.07))}.demoTypeGrid i{display:block;font-style:normal;font-size:1.7rem;margin-bottom:10px}.demoTypeGrid strong,.demoTypeGrid span{display:block}.demoTypeGrid span{color:#cbd5e1;font-size:.78rem;font-weight:800}.demoBuilderGrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,.52fr);gap:22px;align-items:start}.demoBuilderForm,.demoResultCard{border-radius:34px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.13);box-shadow:0 24px 80px rgba(0,0,0,.24);padding:24px}.demoFormBlock{border-radius:26px;background:rgba(2,6,23,.26);border:1px solid rgba(255,255,255,.08);padding:18px;margin-bottom:16px}.demoFormBlock h3{margin:0 0 12px;color:#fff}.demoFormBlock label{display:block;color:#e2e8f0;font-weight:900;font-size:.84rem}.demoFormBlock label small{color:#94a3b8;font-weight:800}.demoTwo{grid-template-columns:1fr 1fr}.demoCheck{display:flex!important;align-items:center;gap:10px;margin-top:10px}.demoCheck input{width:18px;height:18px}.demoFormActions,.demoResultActions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.demoFormNote{color:#94a3b8;font-size:.84rem;margin:14px 0 0;line-height:1.6}.demoResultCard{position:sticky;top:96px}.demoResultCard h3{font-size:1.9rem;line-height:1.05;margin:12px 0;color:#fff}.demoResultCard p{color:#cbd5e1;line-height:1.7}.demoGeneratedLink{min-height:70px;border:1px dashed rgba(255,255,255,.18);border-radius:20px;padding:14px;color:#bae6fd;background:rgba(2,6,23,.34);word-break:break-all;font-size:.78rem;margin:16px 0}.demoResultActions{grid-template-columns:1fr}.disabled{opacity:.5;pointer-events:none}.demoAudioGrid,.demoCompareGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.demoAudioGrid article,.demoCompareGrid article{border-radius:30px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);padding:24px;box-shadow:0 24px 70px rgba(0,0,0,.18)}.demoAudioGrid i{display:grid;place-items:center;width:48px;height:48px;border-radius:18px;background:linear-gradient(135deg,#d4af37,#7c3aed);font-style:normal;margin-bottom:16px}.demoAudioGrid h3,.demoCompareGrid h3{margin:0 0 8px;color:#fff;font-size:1.18rem}.demoAudioGrid p{color:#cbd5e1;line-height:1.7}.demoCompareGrid{grid-template-columns:1fr 1fr}.demoCompareGrid article.eventoqr{border-color:rgba(212,175,55,.38);background:linear-gradient(180deg,rgba(212,175,55,.12),rgba(255,255,255,.07))}.demoCompareGrid ul{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:12px}.demoCompareGrid li{color:#e5e7eb;font-weight:850}.demoCompareGrid li:before{content:"✕";color:#f87171;margin-right:10px}.demoCompareGrid .eventoqr li:before{content:"✓";color:#d4af37}.demoFinalCta{text-align:center;border-radius:46px;margin:54px 0;background:radial-gradient(circle at 50% 0%,rgba(212,175,55,.20),transparent 36%),linear-gradient(135deg,rgba(255,255,255,.12),rgba(255,255,255,.055));border:1px solid rgba(255,255,255,.14);padding:58px 28px}.demoFooter{text-align:center;border-top:1px solid rgba(255,255,255,.10);padding:34px 18px 100px;color:#94a3b8}.demoFooter strong{display:block;color:#fff}.demoFooter span{display:block;color:#64748b;font-weight:900;margin-top:10px}.demoFloatWhats{position:fixed;right:18px;bottom:18px;z-index:80;border-radius:999px;background:#16a34a;color:#fff!important;padding:14px 18px;font-weight:950;box-shadow:0 18px 50px rgba(22,163,74,.30);animation:demoPulse 2.2s infinite}.demoFloatWhats:before{content:"☘";margin-right:8px}@keyframes demoPulse{0%,100%{transform:translateY(0);box-shadow:0 18px 50px rgba(22,163,74,.30)}50%{transform:translateY(-3px);box-shadow:0 24px 70px rgba(22,163,74,.46)}}@media(max-width:1180px){.demoBuilderHero,.demoBuilderGrid{grid-template-columns:1fr}.demoHeroPreview{min-height:620px}.demoTypeGrid{grid-template-columns:repeat(3,1fr)}.demoAudioGrid{grid-template-columns:repeat(2,1fr)}.demoResultCard{position:relative;top:auto}}@media(max-width:820px){.demoBuilderHeader{align-items:flex-start;flex-direction:column}.demoBuilderNav{width:100%;overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px}.demoBuilderShell{width:min(100% - 22px,1260px)}.demoBuilderHero{min-height:auto;padding:44px 0}.demoHeroCopy h1{font-size:clamp(3rem,14vw,5rem)}.demoHeroPreview{display:none}.demoTypeGrid,.demoAudioGrid,.demoCompareGrid{grid-template-columns:1fr}.demoTwo,.demoFormActions{grid-template-columns:1fr}.demoFloatWhats{left:16px;right:16px;text-align:center;display:grid;place-items:center}.demoSectionHead.left{text-align:center;margin-left:auto}.demoBuilderSection{padding:54px 0}}


/* V36.20.5.1 - Video Demo Premium Section */
.eqrVideoDemoSection{
  padding-top:28px;
  padding-bottom:88px;
}
.eqrVideoDemoCard{
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-columns:minmax(0,.78fr) minmax(420px,1.12fr);
  gap:28px;
  align-items:center;
  border-radius:46px;
  padding:clamp(22px,4vw,42px);
  background:
    radial-gradient(circle at 12% 0%,rgba(212,175,55,.20),transparent 34%),
    radial-gradient(circle at 88% 8%,rgba(124,58,237,.26),transparent 30%),
    linear-gradient(135deg,rgba(255,255,255,.105),rgba(255,255,255,.045));
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 34px 110px rgba(0,0,0,.28);
}
.eqrVideoDemoCard::before{
  content:"";
  position:absolute;
  inset:-1px;
  pointer-events:none;
  background:linear-gradient(135deg,rgba(255,255,255,.12),transparent 34%,rgba(212,175,55,.13));
}
.eqrVideoDemoCopy,
.eqrVideoFrame{
  position:relative;
  z-index:1;
}
.eqrVideoDemoCopy h2{
  margin:16px 0 14px;
  color:#fff;
  font-family:Playfair Display,serif;
  font-size:clamp(2.35rem,4.6vw,4.85rem);
  line-height:.94;
  letter-spacing:-.065em;
  text-wrap:balance;
}
.eqrVideoDemoCopy p{
  color:#cbd5e1;
  line-height:1.86;
  max-width:590px;
  margin:0 0 22px;
}
.eqrVideoDemoChips{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin:0 0 24px;
}
.eqrVideoDemoChips span{
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:0 12px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.13);
  color:#e5e7eb;
  font-size:.76rem;
  font-weight:900;
}
.eqrVideoFrame{
  overflow:hidden;
  width:100%;
  aspect-ratio:16/9;
  border-radius:34px;
  background:#030712;
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 30px 88px rgba(0,0,0,.38),0 0 0 8px rgba(255,255,255,.035);
}
.eqrVideoFrame iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  display:block;
}
.eqrVideoFrame::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:34px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 -1px 0 rgba(212,175,55,.16);
}
@media(max-width:980px){
  .eqrVideoDemoCard{grid-template-columns:1fr;}
  .eqrVideoDemoCopy{text-align:center;}
  .eqrVideoDemoCopy p{margin-left:auto;margin-right:auto;}
  .eqrVideoDemoChips,.eqrVideoDemoCopy .eqrHeroActions{justify-content:center;}
}
@media(max-width:640px){
  .eqrVideoDemoSection{padding-top:12px;padding-bottom:54px;}
  .eqrVideoDemoCard{border-radius:32px;padding:18px;}
  .eqrVideoFrame{border-radius:24px;box-shadow:0 22px 60px rgba(0,0,0,.35),0 0 0 5px rgba(255,255,255,.035);}
  .eqrVideoFrame::after{border-radius:24px;}
  .eqrVideoDemoCopy .eqrHeroActions .btn{width:100%;}
}


/* V36.20.5.1 - Adilo video fallback */
.eqrVideoFrame{position:relative;}
.eqrVideoFrame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:1;}
.eqrVideoFallback{position:absolute;left:16px;right:16px;bottom:16px;z-index:0;display:flex;align-items:center;justify-content:space-between;gap:10px;border-radius:18px;padding:12px 14px;background:rgba(2,6,23,.72);border:1px solid rgba(255,255,255,.12);color:#e5e7eb;font-size:.78rem;backdrop-filter:blur(12px)}
.eqrVideoFallback strong,.eqrVideoFallback span{display:block}.eqrVideoFallback span{color:#94a3b8}.eqrVideoFallback a{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:0 12px;border-radius:999px;background:linear-gradient(135deg,#d4af37,#7c3aed);color:#fff;font-weight:950;white-space:nowrap}
@media(max-width:720px){.eqrVideoFallback{position:relative;left:auto;right:auto;bottom:auto;margin-top:12px;z-index:2;flex-direction:column;text-align:center}.eqrVideoFallback a{width:100%}}


/* V36.20.5.2 - Adilo iframe hardening + visible fallback */
.eqrAdiloFrame{position:relative;overflow:hidden;aspect-ratio:16/9;background:linear-gradient(135deg,#030712,#111827);}
.eqrAdiloEmbed{position:relative;width:100%;height:0;padding-bottom:52.6744186047%;overflow:hidden;background:#030712;border-radius:inherit;}
.eqrAdiloEmbed iframe{position:absolute!important;top:0!important;left:0!important;width:100%!important;height:100%!important;border:0!important;display:block!important;background:#030712;z-index:2;}
.eqrVideoExternalFallback{margin:14px 0 0;display:flex;align-items:center;justify-content:space-between;gap:14px;border-radius:22px;padding:14px 16px;background:rgba(2,6,23,.56);border:1px solid rgba(255,255,255,.12);color:#e5e7eb;box-shadow:0 18px 50px rgba(0,0,0,.18);}
.eqrVideoExternalFallback strong,.eqrVideoExternalFallback span{display:block;}
.eqrVideoExternalFallback span{color:#94a3b8;font-size:.82rem;margin-top:3px;line-height:1.45;}
.eqrVideoExternalFallback a{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0 15px;border-radius:999px;background:linear-gradient(135deg,#d4af37,#7c3aed);color:#fff;font-weight:950;white-space:nowrap;}
@media(max-width:720px){.eqrVideoExternalFallback{flex-direction:column;text-align:center}.eqrVideoExternalFallback a{width:100%;}}


/* V36.20.5.3 - Video section clean layout fix
   Evita que el texto grande de la izquierda se meta debajo o encima del video. */
.eqrVideoDemoCard{
  grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr)!important;
  gap:clamp(24px,4vw,48px)!important;
  align-items:center!important;
}
.eqrVideoDemoCopy,
.eqrVideoFrame,
.eqrAdiloFrame{
  min-width:0!important;
}
.eqrVideoDemoCopy{
  max-width:520px!important;
  overflow:hidden!important;
}
.eqrVideoDemoCopy h2{
  font-size:clamp(2.35rem,3.65vw,4.05rem)!important;
  line-height:.95!important;
  max-width:500px!important;
  overflow-wrap:normal!important;
  word-break:normal!important;
}
.eqrVideoDemoCopy h2 span{
  display:inline-block;
}
.eqrVideoDemoCopy p{
  max-width:500px!important;
}
.eqrVideoExternalFallback{
  grid-column:1 / -1!important;
  width:min(640px,100%)!important;
  margin:18px auto 0!important;
  background:rgba(255,255,255,.075)!important;
  border-color:rgba(212,175,55,.18)!important;
}
.eqrVideoExternalFallback strong{
  color:#fff!important;
}
.eqrVideoExternalFallback span{
  color:#cbd5e1!important;
}
@media(max-width:1100px){
  .eqrVideoDemoCard{
    grid-template-columns:1fr!important;
  }
  .eqrVideoDemoCopy{
    max-width:760px!important;
    margin:0 auto!important;
    text-align:center!important;
  }
  .eqrVideoDemoCopy h2,
  .eqrVideoDemoCopy p{
    max-width:760px!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
  .eqrVideoDemoChips,
  .eqrVideoDemoCopy .eqrHeroActions{
    justify-content:center!important;
  }
}
@media(max-width:640px){
  .eqrVideoDemoCopy h2{
    font-size:clamp(2.15rem,12vw,3.2rem)!important;
  }
  .eqrVideoExternalFallback{
    width:100%!important;
  }
}

/* V36.20.5.4 — Demo auto-expire visual controls */
.demoAutoExpireNotice{
  margin:18px auto 0;
  max-width:820px;
  border-radius:20px;
  padding:14px 16px;
  background:rgba(212,175,55,.12);
  border:1px solid rgba(212,175,55,.28);
  color:#f8fafc;
  font-size:.92rem;
  line-height:1.55;
}
.demoAutoExpireNotice strong{color:#f9e6a6;}
.demoExpiryText{
  margin-top:10px;
  color:#f9e6a6;
  font-weight:900;
  font-size:.82rem;
  line-height:1.45;
}
.demoExpiredScreen .availabilityCard{
  border-color:rgba(212,175,55,.26);
  box-shadow:0 34px 90px rgba(0,0,0,.34);
}
.expiredDemoActions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:center;
  margin-top:22px;
}
.expiredDemoActions .btn{min-width:180px;}


/* =========================================================
   V36.20.5.7 — Client demo semantic-clean + light contrast fix
   - A client may use any visual template for any event type.
   - Client-created demos show only the generic "Invitación digital" badge.
   - Light/ivory/rose templates keep names readable; no pale silver text lost.
   ========================================================= */
body.view .invitePage.clientDemoClean .heroTopline{
  justify-content:center!important;
}
body.view .invitePage.clientDemoClean .heroTopline .miniBadge{
  display:none!important;
}
body.view .invitePage.clientDemoClean .heroStatement{
  display:none!important;
}
body.view .invitePage.tone-light .premiumHeroCard .titleStack h2,
body.view .invitePage.tone-light .premiumHeroCard .titleStack h3{
  color:#4b5563!important;
  -webkit-text-fill-color:#4b5563!important;
  background:none!important;
  opacity:1!important;
  text-shadow:0 1px 0 rgba(255,255,255,.82),0 12px 28px rgba(75,85,99,.18)!important;
}
body.view .invitePage.tone-light .premiumHeroCard .titleStack h2.fit-md,
body.view .invitePage.tone-light .premiumHeroCard .titleStack h2.fit-lg,
body.view .invitePage.tone-light .premiumHeroCard .titleStack h2.fit-xl,
body.view .invitePage.tone-light .premiumHeroCard .titleStack h3.fit-md,
body.view .invitePage.tone-light .premiumHeroCard .titleStack h3.fit-lg,
body.view .invitePage.tone-light .premiumHeroCard .titleStack h3.fit-xl{
  color:#4b5563!important;
  -webkit-text-fill-color:#4b5563!important;
}
body.view .invitePage.tone-light .premiumHeroCard .titleStack h1{
  text-shadow:0 1px 0 rgba(255,255,255,.72),0 14px 34px rgba(167,139,95,.22)!important;
}

/* V36.20.6.1 — Template visual + tipo real de evento */
.adminDemoSplit{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}
.adminDemoSplit label,.demoVisualTemplatePicker label{display:grid;gap:6px;color:#e5edf8;font-weight:900;font-size:.86rem}
.adminDemoSplit small,.demoVisualTemplatePicker small{font-weight:800;color:#aeb6ce}
.demoVisualTemplatePicker{width:min(1120px,100%);margin:18px auto 26px;padding:18px;border-radius:26px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);box-shadow:0 18px 55px rgba(0,0,0,.16)}
.demoVisualTemplatePicker p{margin:8px 0 0;color:#cbd5e1;font-weight:800;line-height:1.65}
.clientDemoClean .heroStatement{display:none!important}
.clientDemoClean .detailGrid.cards-1{max-width:720px;margin-left:auto;margin-right:auto;grid-template-columns:1fr!important}
.clientDemoClean .detailCard span{color:var(--eqr-readable-accent,#9A6A2F)}
.clientDemoClean .subtitle,.clientDemoClean .inviteCard h2,.clientDemoClean .inviteCard h3{color:var(--eqr-readable-strong,#111)!important;text-shadow:none!important}
body[data-bg-tone="dark"] .clientDemoClean .subtitle,
body[data-bg-tone="dark"] .clientDemoClean .inviteCard h2,
body[data-bg-tone="dark"] .clientDemoClean .inviteCard h3{color:var(--eqr-readable-strong,#fff)!important;text-shadow:0 16px 40px rgba(0,0,0,.45)!important}
@media(max-width:760px){.adminDemoSplit{grid-template-columns:1fr}.demoVisualTemplatePicker{border-radius:22px;padding:14px}}


/* =========================================================
   V36.20.6.1 - Intro de Sobre Premium
   Primera impresión premium + tap para activar audio
   ========================================================= */
.premiumEnvelopeIntro{
  position:fixed;
  inset:0;
  z-index:99999;
  display:grid;
  place-items:center;
  background:radial-gradient(circle at 50% 40%,rgba(212,175,55,.22),transparent 32%),#07030b;
  overflow:hidden;
  opacity:1;
  transform:scale(1);
  transition:opacity .72s ease, transform .72s ease, filter .72s ease;
}
.premiumEnvelopeIntro::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 50% 50%,transparent 0 36%,rgba(0,0,0,.32) 72%,rgba(0,0,0,.68));
  pointer-events:none;
}
.premiumEnvelopeIntroArt{
  position:relative;
  width:min(100vw,56.28vh);
  height:min(100dvh,177.68vw);
  max-width:941px;
  max-height:1672px;
  filter:drop-shadow(0 34px 90px rgba(0,0,0,.56));
  transform:translateZ(0) scale(1);
  animation:eqrEnvelopeFloat 5.6s ease-in-out infinite;
}
.premiumEnvelopeIntroArt img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  user-select:none;
  -webkit-user-drag:none;
}
.premiumEnvelopeGlow{
  position:absolute;
  left:50%;
  top:46.8%;
  width:29%;
  aspect-ratio:1;
  border-radius:999px;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(255,236,170,.40),rgba(212,175,55,.18) 36%,rgba(124,58,237,.16) 54%,transparent 72%);
  box-shadow:0 0 34px rgba(255,224,137,.72),0 0 80px rgba(124,58,237,.32);
  pointer-events:none;
  animation:eqrSealGlow 1.9s ease-in-out infinite;
}
.premiumEnvelopeSealButton{
  position:absolute;
  left:50%;
  top:46.8%;
  width:31%;
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  border:0;
  border-radius:999px;
  background:transparent;
  cursor:pointer;
  color:transparent;
  outline:0;
  z-index:3;
  -webkit-tap-highlight-color:transparent;
}
.premiumEnvelopeSealButton:focus-visible{
  box-shadow:0 0 0 4px rgba(255,255,255,.52),0 0 0 10px rgba(212,175,55,.34);
}
.premiumEnvelopeSealButton span{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.premiumEnvelopeSealButton::before,
.premiumEnvelopeSealButton::after{
  content:"";
  position:absolute;
  inset:-9%;
  border-radius:999px;
  border:1px solid rgba(255,226,150,.70);
  opacity:.72;
  animation:eqrSealRing 2.15s ease-out infinite;
}
.premiumEnvelopeSealButton::after{
  inset:-18%;
  animation-delay:.72s;
  border-color:rgba(168,85,247,.42);
}
.premiumEnvelopeFallback{
  position:absolute;
  left:50%;
  bottom:4.5dvh;
  transform:translateX(-50%);
  width:min(420px,calc(100% - 42px));
  display:none;
  text-align:center;
  color:#f8fafc;
}
.premiumEnvelopeFallback strong{display:block;margin-bottom:12px;font-family:Playfair Display,serif;font-size:1.45rem;line-height:1.08;color:#ffe9a8;text-shadow:0 0 22px rgba(212,175,55,.32)}
.premiumEnvelopeIntro.is-opened{
  opacity:0;
  transform:scale(1.035);
  filter:blur(6px);
  pointer-events:none;
}
.premiumEnvelopeIntro.is-opened .premiumEnvelopeIntroArt{
  animation:none;
  transform:scale(1.08) translateY(-1.5vh);
  transition:transform .96s cubic-bezier(.22,1,.36,1);
}
.premiumEnvelopeIntro.is-opened .premiumEnvelopeGlow{
  animation:none;
  opacity:1;
  transform:translate(-50%,-50%) scale(1.75);
  transition:transform .58s ease, opacity .58s ease;
}
body:not(.invitation-opened) .invitePage{
  transform:translateY(10px);
  filter:saturate(.94);
}
body.invitation-opened .invitePage{
  animation:eqrInviteReveal .86s cubic-bezier(.22,1,.36,1) both;
}
@keyframes eqrEnvelopeFloat{
  0%,100%{transform:translateY(0) scale(1)}
  50%{transform:translateY(-7px) scale(1.006)}
}
@keyframes eqrSealGlow{
  0%,100%{opacity:.76;transform:translate(-50%,-50%) scale(.96);filter:saturate(1)}
  50%{opacity:1;transform:translate(-50%,-50%) scale(1.12);filter:saturate(1.26)}
}
@keyframes eqrSealRing{
  0%{transform:scale(.78);opacity:.72}
  100%{transform:scale(1.35);opacity:0}
}
@keyframes eqrInviteReveal{
  from{opacity:.02;transform:translateY(24px) scale(.985);filter:blur(8px)}
  to{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}
}
@media (max-width:720px){
  .premiumEnvelopeIntroArt{width:100vw;height:100dvh;max-width:none;max-height:none;}
  .premiumEnvelopeIntroArt img{object-fit:cover;}
  .premiumEnvelopeGlow,.premiumEnvelopeSealButton{top:46.9%;}
  .premiumEnvelopeSealButton{width:34%;}
  .premiumEnvelopeGlow{width:32%;}
}
@media (prefers-reduced-motion:reduce){
  .premiumEnvelopeIntroArt,.premiumEnvelopeGlow,.premiumEnvelopeSealButton::before,.premiumEnvelopeSealButton::after,body.invitation-opened .invitePage{animation:none!important;transition:none!important;}
}


/* =========================================================
   V36.20.6.1 - Intro Cinemática 4-Way Open
   Sobre se abre desde el centro: top, bottom, left, right.
   El sello/logo se viene al frente y el toque activa música/audio.
   ========================================================= */
.cinematicEnvelopeIntro{
  background:
    radial-gradient(circle at 50% 45%,rgba(212,175,55,.28),transparent 32%),
    radial-gradient(circle at 50% 45%,rgba(124,58,237,.16),transparent 46%),
    #07030b;
  perspective:1400px;
}
.cinematicEnvelopeIntro::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:
    radial-gradient(circle,rgba(255,231,166,.32) 0 1px,transparent 1.8px),
    radial-gradient(circle,rgba(168,85,247,.24) 0 1px,transparent 1.8px);
  background-size:86px 86px,132px 132px;
  background-position:12px 28px,44px 64px;
  opacity:.36;
  animation:eqrIntroSparkles 7s linear infinite;
}
.cinematicEnvelopeStage{
  position:relative!important;
  width:min(100vw,56.28vh)!important;
  height:min(100dvh,177.68vw)!important;
  max-width:941px!important;
  max-height:1672px!important;
  overflow:hidden;
  border-radius:0;
  isolation:isolate;
  animation:eqrEnvelopeFloat 5.6s ease-in-out infinite;
  transform-style:preserve-3d;
}
.premiumEnvelopePiece{
  position:absolute;
  inset:0;
  display:block;
  background-image:url("../img/intro/envelope-premium.png");
  background-size:100% 100%;
  background-position:center;
  background-repeat:no-repeat;
  will-change:transform,opacity,filter;
  filter:drop-shadow(0 22px 54px rgba(0,0,0,.28));
  transition:
    transform 2.05s cubic-bezier(.16,.84,.18,1),
    opacity 1.65s ease,
    filter 1.65s ease;
  pointer-events:none;
}
.premiumEnvelopePieceTop{clip-path:polygon(0 0,100% 0,100% 50.5%,0 50.5%);transform-origin:50% 50%;z-index:1;}
.premiumEnvelopePieceBottom{clip-path:polygon(0 49.5%,100% 49.5%,100% 100%,0 100%);transform-origin:50% 50%;z-index:1;}
.premiumEnvelopePieceLeft{clip-path:polygon(0 0,50.5% 0,50.5% 100%,0 100%);transform-origin:50% 50%;z-index:2;}
.premiumEnvelopePieceRight{clip-path:polygon(49.5% 0,100% 0,100% 100%,49.5% 100%);transform-origin:50% 50%;z-index:2;}
.premiumEnvelopeCenterLight{
  position:absolute;
  left:50%;
  top:46.8%;
  width:34%;
  aspect-ratio:1;
  transform:translate(-50%,-50%) scale(.65);
  border-radius:999px;
  background:radial-gradient(circle,rgba(255,246,202,.66),rgba(212,175,55,.25) 38%,rgba(124,58,237,.18) 58%,transparent 74%);
  filter:blur(10px);
  opacity:.66;
  z-index:4;
  pointer-events:none;
  transition:transform 1.35s ease, opacity 1.35s ease, filter 1.35s ease;
}
.cinematicEnvelopeIntro .premiumEnvelopeGlow{
  z-index:5;
  pointer-events:none;
}
.cinematicSealButton{
  z-index:8!important;
  transform:translate(-50%,-50%) scale(1);
  transition:transform 1.05s cubic-bezier(.19,1,.22,1), filter 1.05s ease, opacity 1.05s ease;
}
.cinematicSealButton .premiumSealLogoWrap{
  position:absolute;
  inset:19%;
  width:auto;
  height:auto;
  margin:0;
  padding:0;
  clip:auto;
  white-space:normal;
  overflow:visible;
  display:grid;
  place-items:center;
  border-radius:999px;
  background:radial-gradient(circle at 35% 25%,rgba(255,236,170,.26),rgba(126,10,18,.18));
  box-shadow:inset 0 0 18px rgba(255,231,166,.20),0 0 24px rgba(255,220,120,.42);
}
.cinematicSealButton .premiumSealLogoWrap img{
  width:62%;
  height:62%;
  object-fit:contain;
  display:block;
  filter:drop-shadow(0 0 8px rgba(255,224,137,.68));
}
.cinematicSealButton .premiumSealLabel{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}
.premiumEnvelopeText{
  position:absolute;
  left:50%;
  bottom:5.2%;
  width:min(84%,460px);
  transform:translateX(-50%);
  z-index:7;
  display:grid;
  gap:6px;
  place-items:center;
  text-align:center;
  pointer-events:none;
  color:#fff7db;
  text-shadow:0 12px 34px rgba(0,0,0,.50),0 0 22px rgba(212,175,55,.28);
  transition:opacity .9s ease, transform .9s ease, filter .9s ease;
}
.premiumEnvelopeText small{
  color:#ffe8a6;
  text-transform:uppercase;
  letter-spacing:.22em;
  font-weight:950;
  font-size:clamp(.62rem,1.4vw,.82rem);
}
.premiumEnvelopeText strong{
  font-family:Playfair Display,Cormorant Garamond,serif;
  font-size:clamp(2.15rem,6vw,4rem);
  line-height:.9;
  font-weight:800;
  letter-spacing:-.045em;
}
.premiumEnvelopeText em{
  color:#d8caa1;
  font-style:normal;
  font-weight:900;
  font-size:clamp(.78rem,1.7vw,1rem);
  letter-spacing:.08em;
}

/* V36.20.6.3 - pausa cinematográfica antes de abrir */
.cinematicEnvelopeIntro.is-charging .premiumEnvelopeCenterLight{
  opacity:1;
  transform:translate(-50%,-50%) scale(1.55);
  filter:blur(14px) saturate(1.25);
}
.cinematicEnvelopeIntro.is-charging .premiumEnvelopeGlow{
  opacity:1;
  transform:translate(-50%,-50%) scale(1.45)!important;
  filter:blur(15px) saturate(1.22);
}
.cinematicEnvelopeIntro.is-charging .cinematicSealButton{
  transform:translate(-50%,-50%) scale(1.12) translateZ(60px)!important;
  filter:drop-shadow(0 0 26px rgba(255,232,160,.86)) drop-shadow(0 0 44px rgba(124,58,237,.34));
}

.cinematicEnvelopeIntro.is-opening .premiumEnvelopePieceTop{
  transform:translate3d(0,-124%,70px) rotateX(-7deg) scale(1.03);
  opacity:.08;
  filter:blur(2px) drop-shadow(0 18px 38px rgba(0,0,0,.22));
}
.cinematicEnvelopeIntro.is-opening .premiumEnvelopePieceBottom{
  transform:translate3d(0,124%,70px) rotateX(7deg) scale(1.03);
  opacity:.08;
  filter:blur(2px) drop-shadow(0 -18px 38px rgba(0,0,0,.22));
}
.cinematicEnvelopeIntro.is-opening .premiumEnvelopePieceLeft{
  transform:translate3d(-124%,0,85px) rotateY(8deg) scale(1.025);
  opacity:.08;
  filter:blur(2px) drop-shadow(22px 0 38px rgba(0,0,0,.22));
}
.cinematicEnvelopeIntro.is-opening .premiumEnvelopePieceRight{
  transform:translate3d(124%,0,85px) rotateY(-8deg) scale(1.025);
  opacity:.08;
  filter:blur(2px) drop-shadow(-22px 0 38px rgba(0,0,0,.22));
}
.cinematicEnvelopeIntro.is-opening .premiumEnvelopeCenterLight{
  opacity:1;
  transform:translate(-50%,-50%) scale(3.2);
  filter:blur(18px) saturate(1.25);
}
.cinematicEnvelopeIntro.is-opening .premiumEnvelopeGlow{
  animation:none!important;
  opacity:1;
  transform:translate(-50%,-50%) scale(2.35)!important;
  filter:blur(18px) saturate(1.34);
  transition:transform 1.2s cubic-bezier(.19,1,.22,1), opacity 1.2s ease, filter 1.2s ease;
}
.cinematicEnvelopeIntro.is-opening .cinematicSealButton{
  transform:translate(-50%,-50%) scale(1.34) translateZ(160px)!important;
  filter:drop-shadow(0 0 34px rgba(255,232,160,.95)) drop-shadow(0 0 60px rgba(124,58,237,.42));
}
.cinematicEnvelopeIntro.is-opening .cinematicSealButton::before,
.cinematicEnvelopeIntro.is-opening .cinematicSealButton::after{
  animation:none!important;
  opacity:0;
}
.cinematicEnvelopeIntro.is-opening .premiumEnvelopeText{
  opacity:0;
  transform:translateX(-50%) translateY(24px) scale(.97);
  filter:blur(5px);
}
.cinematicEnvelopeIntro.is-opened{
  opacity:0!important;
  transform:scale(1.045)!important;
  filter:blur(10px) saturate(1.12)!important;
  pointer-events:none!important;
  transition:opacity 1.05s ease, transform 1.05s ease, filter 1.05s ease!important;
}
@keyframes eqrIntroSparkles{
  from{background-position:12px 28px,44px 64px;}
  to{background-position:98px 114px,176px 196px;}
}
@media(max-width:720px){
  .cinematicEnvelopeStage{width:100vw!important;height:100dvh!important;max-width:none!important;max-height:none!important;}
  .premiumEnvelopeText{bottom:4.8dvh;width:min(88%,440px);}
  .cinematicSealButton{width:34%!important;}
  .cinematicEnvelopeIntro .premiumEnvelopeGlow{width:32%!important;}
  .premiumEnvelopeCenterLight{width:36%;}
}
@media(prefers-reduced-motion:reduce){
  .premiumEnvelopePiece,.premiumEnvelopeText,.premiumEnvelopeCenterLight,.cinematicSealButton{transition:none!important;animation:none!important;}
  .cinematicEnvelopeIntro.is-opening .premiumEnvelopePieceTop,
  .cinematicEnvelopeIntro.is-opening .premiumEnvelopePieceBottom,
  .cinematicEnvelopeIntro.is-opening .premiumEnvelopePieceLeft,
  .cinematicEnvelopeIntro.is-opening .premiumEnvelopePieceRight{opacity:0!important;}
}


/* =========================================================
   V36.20.6.1 - Intro limpia
   La imagen del sobre ya contiene sello/logo y texto.
   Esta regla elimina overlays duplicados y deja solo la zona clickeable.
   ========================================================= */
.cinematicEnvelopeIntro .premiumSealLogoWrap,
.cinematicEnvelopeIntro .premiumEnvelopeText{
  display:none!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}
.cinematicEnvelopeIntro .cinematicSealButton{
  background:transparent!important;
  box-shadow:none!important;
}
.cinematicEnvelopeIntro .cinematicSealButton .premiumSealLabel{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}


/* =========================================================
   V36.20.6.4 - Slow cinematic intro timing
   Apertura más lenta: pausa de glow + separación suave en 4 direcciones.
   ========================================================= */


/* =========================================================
   V36.20.6.4 - Intro real con PNGs transparentes separados
   Rutas requeridas en hosting:
   /img/intro/envelope-base-bg.png
   /img/intro/envelope-top.png
   /img/intro/envelope-bottom.png
   /img/intro/envelope-left.png
   /img/intro/envelope-right.png
   /img/intro/seal-center.png
   ========================================================= */
.cinematicEnvelopeStage{
  position:relative!important;
  background:transparent!important;
  overflow:visible!important;
}
.cinematicEnvelopeStage::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background-image:url("/img/intro/envelope-base-bg.png");
  background-size:100% 100%;
  background-position:center;
  background-repeat:no-repeat;
  pointer-events:none;
  filter:drop-shadow(0 34px 90px rgba(0,0,0,.56));
  transition:opacity 1.35s ease, transform 1.35s ease, filter 1.35s ease;
}
.premiumEnvelopePiece{
  position:absolute!important;
  inset:0!important;
  background-size:100% 100%!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
  clip-path:none!important;
  pointer-events:none!important;
  transform-origin:50% 50%!important;
  filter:drop-shadow(0 22px 54px rgba(0,0,0,.25));
}
.premiumEnvelopePieceTop{
  z-index:4!important;
  background-image:url("/img/intro/envelope-top.png")!important;
}
.premiumEnvelopePieceBottom{
  z-index:3!important;
  background-image:url("/img/intro/envelope-bottom.png")!important;
}
.premiumEnvelopePieceLeft{
  z-index:5!important;
  background-image:url("/img/intro/envelope-left.png")!important;
}
.premiumEnvelopePieceRight{
  z-index:5!important;
  background-image:url("/img/intro/envelope-right.png")!important;
}
.cinematicEnvelopeIntro .premiumEnvelopeGlow{
  z-index:8!important;
}
.cinematicEnvelopeIntro .premiumEnvelopeCenterLight{
  z-index:7!important;
}
.cinematicEnvelopeIntro .cinematicSealButton{
  z-index:12!important;
  width:27%!important;
  max-width:228px!important;
  min-width:124px!important;
  background:transparent!important;
  transform:translate(-50%,-50%) scale(1)!important;
}
.cinematicEnvelopeIntro .cinematicSealButton::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  border:0!important;
  border-radius:999px!important;
  background-image:url("/img/intro/seal-center.png")!important;
  background-size:contain!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
  opacity:1!important;
  animation:eqrSealRealFloat 2.25s ease-in-out infinite!important;
  filter:drop-shadow(0 0 16px rgba(255,224,137,.62)) drop-shadow(0 18px 36px rgba(0,0,0,.38));
}
.cinematicEnvelopeIntro .cinematicSealButton::after{
  content:""!important;
  position:absolute!important;
  inset:-14%!important;
  border-radius:999px!important;
  border:1px solid rgba(255,226,150,.62)!important;
  background:radial-gradient(circle,rgba(255,236,170,.18),rgba(124,58,237,.12) 46%,transparent 70%)!important;
  opacity:.72!important;
  animation:eqrSealRing 2.15s ease-out infinite!important;
}
.cinematicEnvelopeIntro.is-charging .cinematicSealButton{
  transform:translate(-50%,-50%) scale(1.13) translateZ(90px)!important;
}
.cinematicEnvelopeIntro.is-charging .cinematicSealButton::before{
  animation:none!important;
  filter:drop-shadow(0 0 26px rgba(255,232,160,.92)) drop-shadow(0 0 48px rgba(124,58,237,.40)) drop-shadow(0 24px 48px rgba(0,0,0,.42));
}
.cinematicEnvelopeIntro.is-opening .premiumEnvelopePieceTop{
  transform:translate3d(0,-132%,85px) rotateX(-8deg) scale(1.035)!important;
  opacity:0!important;
}
.cinematicEnvelopeIntro.is-opening .premiumEnvelopePieceBottom{
  transform:translate3d(0,132%,85px) rotateX(8deg) scale(1.035)!important;
  opacity:0!important;
}
.cinematicEnvelopeIntro.is-opening .premiumEnvelopePieceLeft{
  transform:translate3d(-132%,0,95px) rotateY(9deg) scale(1.03)!important;
  opacity:0!important;
}
.cinematicEnvelopeIntro.is-opening .premiumEnvelopePieceRight{
  transform:translate3d(132%,0,95px) rotateY(-9deg) scale(1.03)!important;
  opacity:0!important;
}
.cinematicEnvelopeIntro.is-opening .cinematicEnvelopeStage::before{
  opacity:.16;
  transform:scale(1.035);
  filter:blur(2px) drop-shadow(0 34px 90px rgba(0,0,0,.50));
}
.cinematicEnvelopeIntro.is-opening .cinematicSealButton{
  transform:translate(-50%,-50%) scale(1.44) translateZ(220px)!important;
  opacity:0;
  transition:transform 1.55s cubic-bezier(.19,1,.22,1), opacity 1.05s ease .42s, filter 1.15s ease!important;
}
.cinematicEnvelopeIntro.is-opening .cinematicSealButton::before{
  animation:none!important;
  filter:drop-shadow(0 0 38px rgba(255,232,160,1)) drop-shadow(0 0 74px rgba(124,58,237,.50)) drop-shadow(0 30px 60px rgba(0,0,0,.44));
}
@keyframes eqrSealRealFloat{
  0%,100%{transform:scale(1);filter:drop-shadow(0 0 16px rgba(255,224,137,.62)) drop-shadow(0 18px 36px rgba(0,0,0,.38));}
  50%{transform:scale(1.045);filter:drop-shadow(0 0 24px rgba(255,232,160,.88)) drop-shadow(0 22px 44px rgba(0,0,0,.40));}
}
@media(max-width:720px){
  .cinematicEnvelopeIntro .cinematicSealButton{width:29%!important;min-width:96px!important;}
}

/* =========================================================
   V36.20.6.4 - Sello central más grande / área táctil premium
   ========================================================= */
.cinematicEnvelopeIntro .premiumEnvelopeGlow{
  width:36%!important;
  max-width:310px!important;
  min-width:168px!important;
  opacity:.96!important;
  box-shadow:0 0 46px rgba(255,224,137,.86),0 0 118px rgba(124,58,237,.38)!important;
}
.cinematicEnvelopeIntro .cinematicSealButton{
  width:36%!important;
  max-width:300px!important;
  min-width:168px!important;
  min-height:168px!important;
}
.cinematicEnvelopeIntro .cinematicSealButton::before{
  filter:drop-shadow(0 0 24px rgba(255,224,137,.82)) drop-shadow(0 22px 46px rgba(0,0,0,.42))!important;
}
.cinematicEnvelopeIntro .cinematicSealButton::after{
  inset:-15%!important;
  opacity:.86!important;
}
.cinematicEnvelopeIntro.is-charging .cinematicSealButton{
  transform:translate(-50%,-50%) scale(1.18) translateZ(110px)!important;
}
.cinematicEnvelopeIntro.is-opening .cinematicSealButton{
  transform:translate(-50%,-50%) scale(1.56) translateZ(240px)!important;
}
@media(max-width:720px){
  .cinematicEnvelopeIntro .premiumEnvelopeGlow{width:40%!important;min-width:142px!important;max-width:240px!important;}
  .cinematicEnvelopeIntro .cinematicSealButton{width:40%!important;min-width:142px!important;max-width:240px!important;min-height:142px!important;}
}
@media(max-width:420px){
  .cinematicEnvelopeIntro .premiumEnvelopeGlow{width:43%!important;min-width:132px!important;}
  .cinematicEnvelopeIntro .cinematicSealButton{width:43%!important;min-width:132px!important;min-height:132px!important;}
}


/* =========================================================
   V36.20.6.6 - Sello XL: más presencia en la intro
   ========================================================= */
.cinematicEnvelopeIntro .premiumEnvelopeGlow{
  width:48%!important;
  max-width:430px!important;
  min-width:220px!important;
  opacity:.98!important;
  box-shadow:0 0 58px rgba(255,224,137,.92),0 0 138px rgba(124,58,237,.44)!important;
}
.cinematicEnvelopeIntro .cinematicSealButton{
  width:48%!important;
  max-width:420px!important;
  min-width:220px!important;
  min-height:220px!important;
}
.cinematicEnvelopeIntro .cinematicSealButton::after{
  inset:-10%!important;
  opacity:.72!important;
}
.cinematicEnvelopeIntro.is-charging .cinematicSealButton{
  transform:translate(-50%,-50%) scale(1.12) translateZ(120px)!important;
}
.cinematicEnvelopeIntro.is-opening .cinematicSealButton{
  transform:translate(-50%,-50%) scale(1.42) translateZ(250px)!important;
}
@media(max-width:720px){
  .cinematicEnvelopeIntro .premiumEnvelopeGlow{width:54%!important;min-width:190px!important;max-width:340px!important;}
  .cinematicEnvelopeIntro .cinematicSealButton{width:54%!important;min-width:190px!important;max-width:340px!important;min-height:190px!important;}
}
@media(max-width:420px){
  .cinematicEnvelopeIntro .premiumEnvelopeGlow{width:58%!important;min-width:178px!important;max-width:280px!important;}
  .cinematicEnvelopeIntro .cinematicSealButton{width:58%!important;min-width:178px!important;max-width:280px!important;min-height:178px!important;}
}


/* =========================================================
   V36.20.6.7 - Intro ligera: sin efectos pesados del sello
   ========================================================= */
.cinematicEnvelopeIntro .premiumEnvelopeGlow,
.cinematicEnvelopeIntro .premiumEnvelopeCenterLight{
  display:none!important;
  opacity:0!important;
  animation:none!important;
  filter:none!important;
  box-shadow:none!important;
}
.cinematicEnvelopeIntro .cinematicSealButton{
  width:52%!important;
  max-width:440px!important;
  min-width:220px!important;
  min-height:220px!important;
  filter:none!important;
  box-shadow:none!important;
}
.cinematicEnvelopeIntro .cinematicSealButton::before{
  animation:none!important;
  filter:drop-shadow(0 18px 34px rgba(0,0,0,.34))!important;
}
.cinematicEnvelopeIntro .cinematicSealButton::after{
  display:none!important;
  content:none!important;
  opacity:0!important;
  animation:none!important;
}
.cinematicEnvelopeIntro.is-charging .cinematicSealButton{
  transform:translate(-50%,-50%) scale(1.08) translateZ(80px)!important;
  transition:transform .52s cubic-bezier(.2,.9,.2,1)!important;
}
.cinematicEnvelopeIntro.is-opening .cinematicSealButton{
  transform:translate(-50%,-50%) scale(1.28) translateZ(180px)!important;
  opacity:.96!important;
  transition:transform 1.15s cubic-bezier(.2,.9,.2,1), opacity 1s ease!important;
}
@media(max-width:720px){
  .cinematicEnvelopeIntro .cinematicSealButton{width:58%!important;min-width:205px!important;max-width:350px!important;min-height:205px!important;}
}
@media(max-width:420px){
  .cinematicEnvelopeIntro .cinematicSealButton{width:62%!important;min-width:190px!important;max-width:300px!important;min-height:190px!important;}
}


/* =========================================================
   V36.20.6.8 — Admin control for premium intro
   ========================================================= */
.introAdminBox{
  margin-top:18px;
  padding:18px;
  border-radius:24px;
  border:1px solid rgba(212,175,55,.22);
  background:linear-gradient(135deg,rgba(212,175,55,.10),rgba(124,58,237,.08));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.introAdminBox h3{margin:0 0 6px;color:#f8fafc;font-size:1rem;letter-spacing:-.02em}
.introAdminBox .fieldHint{display:block;margin:0 0 14px;color:#aeb6ce;font-size:.82rem;line-height:1.55}
.introAdminBox .checks{margin:8px 0 14px}
.cinematicEnvelopeIntro.introSpeed-fast .premiumEnvelopePiece,
.cinematicEnvelopeIntro.introSpeed-fast .cinematicSealButton{transition-duration:1.05s!important}
.cinematicEnvelopeIntro.introSpeed-elegant .premiumEnvelopePiece,
.cinematicEnvelopeIntro.introSpeed-elegant .cinematicSealButton{transition-duration:1.45s!important}
.cinematicEnvelopeIntro.introSpeed-cinematic .premiumEnvelopePiece,
.cinematicEnvelopeIntro.introSpeed-cinematic .cinematicSealButton{transition-duration:1.9s!important}

/* =========================================================
   V36.20.6.9 — Global readable gold / white text shadow
   Regla global: textos oro, blancos y metálicos deben tener
   sombra elegante para no perderse sobre fondos claros.
   ========================================================= */
body.view .invitePage .premiumHeroCard .titleStack h1,
body.view .invitePage .premiumHeroCard .titleStack h2,
body.view .invitePage .premiumHeroCard .titleStack h3,
body.view .invitePage .inviteCard h1,
body.view .invitePage .inviteCard h2,
body.view .invitePage .inviteCard h3,
body.view .invitePage .heroMainTitle,
body.view .invitePage .heroName,
body.view .invitePage .heroNames,
body.view .invitePage .eventNames,
body.view .invitePage .subtitle,
body.view .invitePage .heroStatement,
body.view .invitePage .heroSoftNote,
body.view .invitePage .sectionTitle h2,
body.view .invitePage .storyPhrase,
body.view .invitePage .scriptText,
body.view .invitePage .saveDateNumber,
body.view .invitePage .saveDateMonth,
body.view .invitePage .saveDateYear{
  text-shadow:
    0 1px 0 rgba(255,255,255,.70),
    0 12px 28px rgba(15,23,42,.20),
    0 0 22px rgba(212,175,55,.22)!important;
}

/* Gold / metallic headline protection on light backgrounds */
body.view .invitePage.tone-light .premiumHeroCard .titleStack h1,
body.view .invitePage.tone-light .inviteCard h1,
body.view .invitePage.tone-light .heroMainTitle,
body.view .invitePage.tone-light .saveDateMonth,
body.view .invitePage.tone-light .sectionTitle h2{
  text-shadow:
    0 1px 0 rgba(255,255,255,.92),
    0 2px 2px rgba(120,83,25,.24),
    0 14px 34px rgba(167,139,95,.32),
    0 0 26px rgba(212,175,55,.28)!important;
}

/* White / ivory text protection on light or photographic areas */
body.view .invitePage.tone-light .premiumHeroCard .titleStack .whiteText,
body.view .invitePage.tone-light .premiumHeroCard .titleStack h2,
body.view .invitePage.tone-light .premiumHeroCard .titleStack h3,
body.view .invitePage.tone-light .subtitle,
body.view .invitePage.tone-light .heroSoftNote,
body.view .invitePage.tone-light .heroStatement{
  text-shadow:
    0 1px 0 rgba(255,255,255,.86),
    0 2px 3px rgba(15,23,42,.22),
    0 14px 34px rgba(15,23,42,.18)!important;
}

/* Silver / gray names should never disappear on ivory templates */
body.view .invitePage.tone-light .premiumHeroCard .titleStack h2,
body.view .invitePage.tone-light .premiumHeroCard .titleStack h3,
body.view .invitePage.tone-light .inviteCard h2,
body.view .invitePage.tone-light .inviteCard h3{
  color:#4b5563!important;
  -webkit-text-fill-color:#4b5563!important;
  background:none!important;
  opacity:1!important;
  text-shadow:
    0 1px 0 rgba(255,255,255,.88),
    0 2px 2px rgba(15,23,42,.18),
    0 14px 36px rgba(75,85,99,.24)!important;
}

/* Dark templates keep elegant cinematic depth */
body.view .invitePage.tone-dark .premiumHeroCard .titleStack h1,
body.view .invitePage.tone-dark .premiumHeroCard .titleStack h2,
body.view .invitePage.tone-dark .premiumHeroCard .titleStack h3,
body.view .invitePage.tone-dark .inviteCard h1,
body.view .invitePage.tone-dark .inviteCard h2,
body.view .invitePage.tone-dark .inviteCard h3,
body.view .invitePage.tone-dark .subtitle,
body.view .invitePage.tone-dark .heroStatement,
body.view .invitePage.tone-dark .heroSoftNote{
  text-shadow:
    0 2px 0 rgba(0,0,0,.28),
    0 16px 44px rgba(0,0,0,.52),
    0 0 26px rgba(212,175,55,.22)!important;
}


/* =========================================================
   EventoQR.click V36.20.7.0
   Foto seleccionada global debajo de “Invitación digital”
   Aplica a cualquier template en demos y eventos reales.
   ========================================================= */
body.view .invitePage .premiumHeroCard .selectedHeroPhoto{
  margin-top:18px!important;
  margin-bottom:26px!important;
}
body.view .invitePage .premiumHeroCard .selectedHeroPhoto img{
  object-fit:contain!important;
  object-position:center top!important;
}
body.view .invitePage.clientDemoClean .premiumHeroCard .selectedHeroPhoto,
body.view .invitePage .premiumHeroCard .selectedHeroPhoto{
  background:
    radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--event-primary, #d4af37) 20%, transparent), transparent 38%),
    linear-gradient(135deg, rgba(255,255,255,.82), rgba(255,255,255,.30))!important;
  border:1px solid color-mix(in srgb, var(--event-primary, #d4af37) 24%, rgba(255,255,255,.28))!important;
  box-shadow:0 22px 58px rgba(0,0,0,.14)!important;
}


/* =========================================================
   V36.20.7.3 - Scanner feedback pro + Access Control Master
   ========================================================= */
.accessMasterNote{margin:0 0 12px;padding:12px 14px;border-radius:18px;font-weight:900;font-size:.84rem;border:1px solid rgba(255,255,255,.12)}
.accessMasterNote.ok{background:rgba(34,197,94,.10);border-color:rgba(34,197,94,.28);color:#bbf7d0}.accessMasterNote.locked{background:rgba(245,158,11,.10);border-color:rgba(245,158,11,.30);color:#fde68a}.memberItemPro{align-items:center;border-radius:22px}.memberInfoPro strong{font-size:1rem}.memberBadgesPro{display:flex;gap:7px;flex-wrap:wrap;margin:6px 0}.rolePill,.statusPill{display:inline-flex;align-items:center;min-height:26px;padding:0 10px;border-radius:999px;font-size:.68rem;font-weight:950;text-transform:uppercase;letter-spacing:.08em;border:1px solid rgba(255,255,255,.13)}.rolePill{background:rgba(212,175,55,.12);color:#f7e6ae;border-color:rgba(212,175,55,.28)}.rolePill.role-staff-checkin{background:rgba(14,165,233,.12);color:#bae6fd;border-color:rgba(14,165,233,.28)}.rolePill.role-client-admin{background:rgba(168,85,247,.12);color:#e9d5ff;border-color:rgba(168,85,247,.30)}.statusPill.connected{background:rgba(34,197,94,.12);color:#bbf7d0;border-color:rgba(34,197,94,.30)}.statusPill.pending{background:rgba(148,163,184,.12);color:#cbd5e1}.memberActionsPro{align-items:center}.memberRoleChange{display:grid;gap:5px;color:#cbd5e1;font-size:.72rem;font-weight:900;min-width:190px}.memberRoleChange select{min-height:38px;border-radius:999px;border:1px solid rgba(255,255,255,.15);background:rgba(15,23,42,.78);color:#fff;padding:0 12px;font-weight:850}.accessLocked{opacity:.62;filter:saturate(.75)}.accessLocked input,.accessLocked select,.accessLocked button{cursor:not-allowed!important}.memberActions em{color:#94a3b8;font-weight:900;font-style:normal}.dangerMini{background:rgba(127,29,29,.78)!important;color:#fee2e2!important;border-color:rgba(239,68,68,.35)!important}
.checkinResultPro{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;padding:20px!important;border-radius:28px!important;box-shadow:0 20px 60px rgba(0,0,0,.20)}.checkinResultPro .checkinResultIcon{width:54px;height:54px;border-radius:18px;display:grid;place-items:center;font-size:1.55rem;background:rgba(255,255,255,.10);box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}.checkinResultPro small{display:block;text-transform:uppercase;letter-spacing:.14em;font-size:.66rem;font-weight:950;color:#94a3b8;margin-bottom:4px}.checkinResultPro strong{font-size:clamp(1.25rem,4.6vw,2rem)!important;line-height:1.05!important;margin:0 0 4px!important}.checkinResultPro p{font-size:.98rem!important;line-height:1.55!important}.checkinResultPro.registered,.checkinResultPro.valid{border-color:rgba(34,197,94,.42)!important;background:linear-gradient(135deg,rgba(34,197,94,.18),rgba(14,165,233,.08))!important}.checkinResultPro.duplicate,.checkinResultPro.warning{border-color:rgba(245,158,11,.45)!important;background:linear-gradient(135deg,rgba(245,158,11,.18),rgba(212,175,55,.08))!important}.checkinResultPro.error{border-color:rgba(239,68,68,.45)!important;background:linear-gradient(135deg,rgba(239,68,68,.18),rgba(127,29,29,.10))!important}.checkinProCard.scan-ok{box-shadow:0 0 0 2px rgba(34,197,94,.32),0 28px 90px rgba(34,197,94,.18)!important}.checkinProCard.scan-warn{box-shadow:0 0 0 2px rgba(245,158,11,.34),0 28px 90px rgba(245,158,11,.18)!important}.checkinProCard.scan-err{box-shadow:0 0 0 2px rgba(239,68,68,.34),0 28px 90px rgba(239,68,68,.18)!important}.checkinStatusPill.duplicate{font-size:.95rem!important;min-height:46px!important;padding:0 18px!important}.checkinStatusPill.registered{font-size:.95rem!important;min-height:46px!important;padding:0 18px!important}@media(max-width:720px){.memberActionsPro{width:100%;display:grid!important;grid-template-columns:1fr 1fr}.memberRoleChange{grid-column:1/-1;min-width:0}.checkinResultPro{grid-template-columns:1fr;text-align:center}.checkinResultPro .checkinResultIcon{margin:auto}}

/* =========================================================
   V36.20.7.4 - Access Control Cards Visual Fix
   Objetivo: que la sección de accesos no se mire apretada/vertical,
   especialmente en móvil y tablets.
   ========================================================= */
#memberList .memberItemPro,
.memberList .memberItemPro,
.memberItem.memberItemPro{
  display:grid!important;
  grid-template-columns:minmax(240px,.72fr) minmax(360px,1.28fr)!important;
  gap:18px!important;
  align-items:center!important;
  padding:18px!important;
  border-radius:26px!important;
  background:linear-gradient(135deg,rgba(255,255,255,.075),rgba(255,255,255,.045))!important;
  border:1px solid rgba(255,255,255,.11)!important;
}

.memberInfoPro{
  min-width:0!important;
  display:grid!important;
  gap:8px!important;
  align-content:start!important;
}
.memberInfoPro strong{
  font-size:clamp(1rem,2.2vw,1.15rem)!important;
  line-height:1.18!important;
  word-break:break-word!important;
}
.memberBadgesPro{
  display:flex!important;
  align-items:center!important;
  flex-wrap:wrap!important;
  gap:8px!important;
  margin:0!important;
}
.rolePill,
.statusPill{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:auto!important;
  max-width:100%!important;
  min-height:30px!important;
  padding:0 12px!important;
  white-space:nowrap!important;
  line-height:1!important;
  text-align:center!important;
  border-radius:999px!important;
  letter-spacing:.075em!important;
}
.memberInfoPro small{
  display:block!important;
  max-width:360px!important;
  color:#aeb9cf!important;
  font-size:.82rem!important;
  line-height:1.55!important;
  margin:0!important;
}

.memberActionsPro{
  width:100%!important;
  display:grid!important;
  grid-template-columns:minmax(230px,1fr) repeat(2,minmax(140px,.72fr))!important;
  gap:10px!important;
  align-items:end!important;
  justify-content:end!important;
}
.memberRoleChange{
  min-width:0!important;
  width:100%!important;
  display:grid!important;
  gap:7px!important;
}
.memberRoleChange span{
  color:#cbd5e1!important;
  font-size:.76rem!important;
  font-weight:950!important;
  text-transform:uppercase!important;
  letter-spacing:.08em!important;
}
.memberRoleChange select{
  width:100%!important;
  min-height:44px!important;
  border-radius:16px!important;
}
.memberActionsPro button{
  width:100%!important;
  min-height:44px!important;
  padding:0 14px!important;
  border-radius:999px!important;
  white-space:nowrap!important;
  font-size:.86rem!important;
}
.memberActionsPro button[data-reset-member-password],
.memberActionsPro button[data-remove-member]{
  grid-column:auto!important;
}

@media(max-width:1180px){
  #memberList .memberItemPro,
  .memberList .memberItemPro,
  .memberItem.memberItemPro{
    grid-template-columns:1fr!important;
    gap:14px!important;
  }
  .memberInfoPro small{max-width:none!important;}
  .memberActionsPro{
    grid-template-columns:1fr 1fr!important;
  }
  .memberRoleChange{
    grid-column:1/-1!important;
  }
}

@media(max-width:640px){
  #memberList .memberItemPro,
  .memberList .memberItemPro,
  .memberItem.memberItemPro{
    padding:16px!important;
    border-radius:24px!important;
  }
  .memberBadgesPro{
    gap:7px!important;
  }
  .rolePill,
  .statusPill{
    min-height:28px!important;
    padding:0 10px!important;
    font-size:.62rem!important;
    letter-spacing:.055em!important;
  }
  .memberActionsPro{
    grid-template-columns:1fr!important;
    gap:9px!important;
  }
  .memberActionsPro button,
  .memberRoleChange select{
    min-height:46px!important;
  }
}

/* =========================================================
   V36.20.7.5 - Access Control Layout FINAL Fix
   Evita que los controles de acceso se monten en paneles angostos.
   La card queda vertical: info arriba, acciones abajo.
   ========================================================= */
#memberList .memberItem.memberItemPro,
.memberList .memberItem.memberItemPro,
.memberItem.memberItemPro{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:16px!important;
  align-items:start!important;
  overflow:hidden!important;
}

#memberList .memberInfoPro,
.memberList .memberInfoPro,
.memberItem.memberItemPro .memberInfoPro{
  width:100%!important;
  min-width:0!important;
}

#memberList .memberInfoPro strong,
.memberList .memberInfoPro strong,
.memberItem.memberItemPro .memberInfoPro strong{
  display:block!important;
  max-width:100%!important;
  overflow-wrap:anywhere!important;
  word-break:break-word!important;
}

#memberList .memberBadgesPro,
.memberList .memberBadgesPro,
.memberItem.memberItemPro .memberBadgesPro{
  width:100%!important;
  display:flex!important;
  flex-wrap:wrap!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:8px!important;
}

#memberList .rolePill,
#memberList .statusPill,
.memberList .rolePill,
.memberList .statusPill,
.memberItem.memberItemPro .rolePill,
.memberItem.memberItemPro .statusPill{
  width:auto!important;
  max-width:100%!important;
  min-width:0!important;
  white-space:normal!important;
  text-align:left!important;
  line-height:1.15!important;
  padding:7px 12px!important;
  height:auto!important;
  min-height:30px!important;
}

#memberList .memberInfoPro small,
.memberList .memberInfoPro small,
.memberItem.memberItemPro .memberInfoPro small{
  max-width:100%!important;
  width:100%!important;
  line-height:1.55!important;
}

#memberList .memberActions.memberActionsPro,
.memberList .memberActions.memberActionsPro,
.memberItem.memberItemPro .memberActions.memberActionsPro{
  width:100%!important;
  display:grid!important;
  grid-template-columns:minmax(220px,1.2fr) minmax(140px,.9fr) minmax(140px,.9fr)!important;
  gap:10px!important;
  align-items:end!important;
  justify-content:stretch!important;
}

#memberList .memberRoleChange,
.memberList .memberRoleChange,
.memberItem.memberItemPro .memberRoleChange{
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  grid-column:auto!important;
}

#memberList .memberRoleChange select,
.memberList .memberRoleChange select,
.memberItem.memberItemPro .memberRoleChange select,
#memberList .memberActionsPro button,
.memberList .memberActionsPro button,
.memberItem.memberItemPro .memberActionsPro button{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  min-height:46px!important;
  white-space:normal!important;
  line-height:1.15!important;
  text-align:center!important;
  margin:0!important;
}

@media(max-width:860px){
  #memberList .memberActions.memberActionsPro,
  .memberList .memberActions.memberActionsPro,
  .memberItem.memberItemPro .memberActions.memberActionsPro{
    grid-template-columns:1fr!important;
  }
  #memberList .memberRoleChange,
  .memberList .memberRoleChange,
  .memberItem.memberItemPro .memberRoleChange{
    grid-column:1!important;
  }
}

/* ==========================================================
   EventoQR.click — V36.20.7.10
   PORTAL CLIENTE POLISH — SOLO PORTAL
   No toca admin, check-in, invitaciones, catálogo ni lógica.
   Objetivo:
   - Logo más elegante y menos dominante.
   - Versión/eyebrow más discreto.
   - "Centro del evento" más balanceado en móvil.
   - Subtítulo email/familia más limpio.
   - Botones del portal con jerarquía tipo app.
   ========================================================== */

/* Scope fuerte: solo portal */
body.portalBody .portalShell,
body[class*="portal"] .portalShell,
.portalShell{
  --portal-polish-gold:#d6aa2d;
  --portal-polish-violet:#8b3dff;
  --portal-polish-card:rgba(15,23,42,.72);
}

/* Logo del portal: centrado, más chico y con menos aire vertical */
.portalShell .portalLogo,
.portalShell .portalBrand img,
.portalShell .portalHero img,
.portalShell img[src*="logo"],
.portalShell img[src*="Logo"],
.portalShell img[src*="EventoQR"],
.portalShell img[src*="eventoqr"]{
  display:block;
  width:auto;
  max-width:min(220px,64vw);
  max-height:132px;
  height:auto;
  object-fit:contain;
  margin:0 auto 22px;
  filter:drop-shadow(0 16px 34px rgba(0,0,0,.22));
}

/* Hero del portal más compacto */
.portalShell .portalHero,
.portalShell .dashHead,
.portalShell .portalHeader{
  padding-top:clamp(18px,4vw,34px);
  padding-bottom:clamp(16px,4vw,30px);
}

/* Eyebrow/versión: menos gritón, más premium */
.portalShell em,
.portalShell .portalEyebrow,
.portalShell .dashHead em,
.portalShell .portalHero em,
.portalShell .versionTag,
.portalShell [class*="version"]{
  display:block;
  width:max-content;
  max-width:100%;
  margin:0 0 12px;
  padding:7px 12px;
  border-radius:999px;
  background:rgba(201,162,39,.10);
  border:1px solid rgba(214,170,45,.20);
  color:#f3d675;
  font-size:.68rem;
  line-height:1.25;
  letter-spacing:.20em;
  font-weight:900;
  text-transform:uppercase;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}

/* Título más app y menos grotesco en móvil */
.portalShell h1,
.portalShell .portalHero h1,
.portalShell .dashHead h1{
  font-size:clamp(2.75rem,9.5vw,5rem);
  line-height:.92;
  letter-spacing:-.065em;
  margin:8px 0 12px;
  text-wrap:balance;
  max-width:10ch;
}

/* Subtítulo email/familia más fino */
.portalShell .portalHero p,
.portalShell .dashHead p,
.portalShell .portalSubtitle,
.portalShell .clientMeta{
  color:rgba(226,232,240,.78);
  font-size:clamp(.96rem,3.4vw,1.12rem);
  line-height:1.45;
  margin:0 0 18px;
  max-width:34ch;
}

/* Botones del hero del portal: app toolbar */
.portalShell .portalActions,
.portalShell .dashActions,
.portalShell .portalHeroActions{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  width:100%;
  margin-top:18px;
}

.portalShell .portalActions .btn,
.portalShell .dashActions .btn,
.portalShell .portalHeroActions .btn,
.portalShell .portalActions button,
.portalShell .dashActions button,
.portalShell .portalHeroActions button{
  min-height:54px;
  border-radius:22px;
  font-weight:950;
  letter-spacing:-.02em;
  border:1px solid rgba(255,255,255,.14);
  color:#eef2ff;
  background:linear-gradient(180deg,rgba(67,75,108,.76),rgba(45,53,82,.72));
  box-shadow:0 16px 34px rgba(2,6,23,.20), inset 0 1px 0 rgba(255,255,255,.10);
  white-space:normal;
}

/* Actualizar como acción neutral premium */
.portalShell .portalActions .btn:first-child,
.portalShell .dashActions .btn:first-child{
  background:linear-gradient(180deg,rgba(77,87,132,.82),rgba(50,60,100,.76));
}

/* Exportar CSV más secundario */
.portalShell .portalActions .btn:nth-child(2),
.portalShell .dashActions .btn:nth-child(2){
  background:linear-gradient(180deg,rgba(58,65,95,.78),rgba(42,49,75,.74));
}

/* Auto ON como status, no botón protagonista */
.portalShell .portalActions .btn:nth-child(3),
.portalShell .dashActions .btn:nth-child(3){
  background:linear-gradient(180deg,rgba(12,96,78,.82),rgba(9,70,61,.74));
  border-color:rgba(52,211,153,.20);
  color:#d9fff2;
}

/* Soporte con acento suave */
.portalShell .portalActions .btn:nth-child(4),
.portalShell .dashActions .btn:nth-child(4){
  background:linear-gradient(180deg,rgba(33,82,116,.76),rgba(23,60,94,.74));
  border-color:rgba(80,172,255,.18);
}

/* Salir solo, rojo, full row */
.portalShell .portalActions .danger,
.portalShell .dashActions .danger,
.portalShell .portalHeroActions .danger,
.portalShell #logoutBtn{
  grid-column:1 / -1;
  background:linear-gradient(180deg,rgba(178,38,38,.92),rgba(135,22,22,.90));
  border-color:rgba(255,120,120,.24);
  color:#fff;
}

/* Tarjetas del portal con respiración */
.portalShell .portalCard,
.portalShell .panelCard,
.portalShell .eventItem,
.portalShell .guestItem,
.portalShell .checkinItem{
  border-radius:26px;
}

/* Móvil: centrar logo, título balanceado y quitar exceso de alto */
@media (max-width:720px){
  .portalShell{
    width:min(100% - 24px,100%);
    margin-left:auto;
    margin-right:auto;
  }

  .portalShell .portalLogo,
  .portalShell .portalBrand img,
  .portalShell .portalHero img,
  .portalShell img[src*="logo"],
  .portalShell img[src*="Logo"],
  .portalShell img[src*="EventoQR"],
  .portalShell img[src*="eventoqr"]{
    max-width:min(188px,58vw);
    max-height:112px;
    margin:0 auto 18px;
  }

  .portalShell em,
  .portalShell .portalEyebrow,
  .portalShell .dashHead em,
  .portalShell .portalHero em,
  .portalShell .versionTag,
  .portalShell [class*="version"]{
    font-size:.62rem;
    letter-spacing:.18em;
    margin-bottom:10px;
    padding:6px 10px;
  }

  .portalShell h1,
  .portalShell .portalHero h1,
  .portalShell .dashHead h1{
    font-size:clamp(2.55rem,13vw,3.7rem);
    line-height:.90;
    max-width:8.6ch;
    margin-top:6px;
  }

  .portalShell .portalHero p,
  .portalShell .dashHead p,
  .portalShell .portalSubtitle,
  .portalShell .clientMeta{
    font-size:1rem;
    max-width:100%;
    margin-bottom:16px;
  }

  .portalShell .portalActions,
  .portalShell .dashActions,
  .portalShell .portalHeroActions{
    grid-template-columns:1fr;
    gap:10px;
  }

  .portalShell .portalActions .btn,
  .portalShell .dashActions .btn,
  .portalShell .portalHeroActions .btn,
  .portalShell .portalActions button,
  .portalShell .dashActions button,
  .portalShell .portalHeroActions button{
    min-height:52px;
    border-radius:20px;
    width:100%;
  }
}

/* Pantallas muy angostas: todavía menos logo */
@media (max-width:390px){
  .portalShell .portalLogo,
  .portalShell .portalBrand img,
  .portalShell .portalHero img,
  .portalShell img[src*="logo"],
  .portalShell img[src*="Logo"],
  .portalShell img[src*="EventoQR"],
  .portalShell img[src*="eventoqr"]{
    max-width:min(166px,54vw);
    max-height:98px;
  }

  .portalShell h1,
  .portalShell .portalHero h1,
  .portalShell .dashHead h1{
    font-size:clamp(2.35rem,12.4vw,3.25rem);
  }
}

/* ==========================================================
   EventoQR.click — V36.20.7.12
   ADMIN LOCK CLEAN — CLASES REALES
   Corrige el bloqueo de admin.html para admin local/staff.
   Toca SOLO .adminLockdown / .adminLockdownCard.
   ========================================================== */

.adminLockdown{
  min-height:100dvh !important;
  width:100% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:18px !important;
  color:#f8fafc !important;
  overflow-x:hidden !important;
  background:
    radial-gradient(circle at 18% 0%,rgba(212,175,55,.12),transparent 28%),
    radial-gradient(circle at 86% 0%,rgba(124,58,237,.16),transparent 34%),
    linear-gradient(180deg,#070314 0%,#0b1024 56%,#050816 100%) !important;
}

.adminLockdownCard,
.adminLockdownCardClean{
  width:min(100%,720px) !important;
  margin:0 auto !important;
  padding:24px !important;
  border-radius:30px !important;
  background:linear-gradient(180deg,rgba(15,23,42,.90),rgba(12,18,36,.78)) !important;
  border:1px solid rgba(255,255,255,.14) !important;
  box-shadow:0 28px 80px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.06) !important;
  overflow:hidden !important;
  text-align:left !important;
}

.adminLockdownTop{
  display:flex !important;
  align-items:center !important;
  gap:14px !important;
  margin-bottom:18px !important;
}

.adminLockdownLogo{
  width:64px !important;
  height:64px !important;
  min-width:64px !important;
  max-width:64px !important;
  max-height:64px !important;
  object-fit:contain !important;
  display:block !important;
  margin:0 !important;
  border-radius:18px !important;
  box-shadow:0 14px 32px rgba(0,0,0,.28) !important;
  transform:none !important;
}

.adminLockdownKicker{
  display:inline-flex !important;
  width:auto !important;
  max-width:100% !important;
  border-radius:999px !important;
  padding:7px 11px !important;
  background:rgba(212,175,55,.12) !important;
  border:1px solid rgba(212,175,55,.24) !important;
  color:#f7e6ae !important;
  text-transform:uppercase !important;
  letter-spacing:.14em !important;
  font-size:.62rem !important;
  font-weight:950 !important;
  line-height:1.2 !important;
}

.adminLockdownCard h1,
.adminLockdownCardClean h1{
  margin:8px 0 0 !important;
  font-size:clamp(2.1rem,6vw,3.7rem) !important;
  line-height:.94 !important;
  letter-spacing:-.06em !important;
  max-width:12ch !important;
  text-wrap:balance !important;
  color:#fff !important;
}

.adminLockdownLead{
  margin:0 0 18px !important;
  color:#cbd5e1 !important;
  line-height:1.58 !important;
  font-weight:750 !important;
  font-size:1rem !important;
}

.adminLockdownCard code,
.adminLockdownCardClean code{
  color:#f7e6ae !important;
  background:rgba(255,255,255,.08) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  border-radius:10px !important;
  padding:2px 6px !important;
}

.adminLockdownMini{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:12px !important;
  margin:18px 0 !important;
}

.adminLockdownMini article{
  border-radius:20px !important;
  padding:14px !important;
  background:rgba(2,6,23,.36) !important;
  border:1px solid rgba(255,255,255,.10) !important;
}

.adminLockdownMini b,
.adminLockdownMini span{
  display:block !important;
}

.adminLockdownMini b{
  color:#fff !important;
  margin-bottom:5px !important;
  font-size:.95rem !important;
}

.adminLockdownMini span{
  color:#aeb9cf !important;
  line-height:1.45 !important;
  font-weight:700 !important;
  font-size:.88rem !important;
}

.adminLockdownRules{
  display:none !important;
}

.adminLockdownActions{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:10px !important;
  margin-top:18px !important;
}

.adminLockdownActions .btn,
.adminLockdownActions a,
.adminLockdownActions button{
  width:100% !important;
  min-height:50px !important;
  border-radius:18px !important;
  white-space:normal !important;
  text-align:center !important;
  font-weight:950 !important;
}

.adminLockdownActions .danger{
  grid-column:auto !important;
}

.adminLockdownCard small,
.adminLockdownCardClean small{
  display:block !important;
  margin-top:16px !important;
  color:#94a3b8 !important;
  font-weight:800 !important;
  line-height:1.45 !important;
  font-size:.86rem !important;
}

/* Mobile exact */
@media(max-width:720px){
  .adminLockdown{
    align-items:flex-start !important;
    padding:14px 12px !important;
  }

  .adminLockdownCard,
  .adminLockdownCardClean{
    width:100% !important;
    padding:18px !important;
    border-radius:26px !important;
    margin:0 auto !important;
  }

  .adminLockdownTop{
    gap:12px !important;
    margin-bottom:16px !important;
  }

  .adminLockdownLogo{
    width:54px !important;
    height:54px !important;
    min-width:54px !important;
    max-width:54px !important;
    max-height:54px !important;
    border-radius:16px !important;
  }

  .adminLockdownKicker{
    font-size:.56rem !important;
    letter-spacing:.12em !important;
    padding:6px 9px !important;
  }

  .adminLockdownCard h1,
  .adminLockdownCardClean h1{
    font-size:clamp(2rem,10vw,3rem) !important;
    line-height:.92 !important;
    max-width:10.5ch !important;
  }

  .adminLockdownLead{
    font-size:.96rem !important;
  }

  .adminLockdownMini{
    grid-template-columns:1fr !important;
  }

  .adminLockdownActions{
    grid-template-columns:1fr !important;
  }
}

/* ==========================================================
   EventoQR.click — V36.20.7.13
   PORTAL ACCESS READ-ONLY
   Solo corrige la sección de accesos locales en portal.html.
   Regla:
   - Master Admin ve acciones.
   - Admin local / Monitor y Staff ven SOLO lectura.
   ========================================================== */

.portalMemberItemReadMode{
  display:grid !important;
  grid-template-columns: minmax(0,1fr) auto !important;
  gap:16px !important;
  align-items:center !important;
}

.portalMemberInfo{
  min-width:0 !important;
}

.portalMemberInfo strong{
  display:block !important;
  max-width:100% !important;
  overflow-wrap:anywhere !important;
  line-height:1.15 !important;
}

.portalMemberBadges{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:8px !important;
  margin:8px 0 8px !important;
  align-items:center !important;
}

.portalRoleBadge,
.portalStatusBadge,
.portalAccessBadge{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:auto !important;
  max-width:100% !important;
  min-height:30px !important;
  padding:6px 12px !important;
  border-radius:999px !important;
  line-height:1.1 !important;
  font-size:.74rem !important;
  font-weight:950 !important;
  letter-spacing:.04em !important;
  text-transform:uppercase !important;
  white-space:normal !important;
  text-align:center !important;
  border:1px solid rgba(255,255,255,.14) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08) !important;
}

.portalRoleBadge.admin{
  background:rgba(124,58,237,.18) !important;
  border-color:rgba(167,139,250,.28) !important;
  color:#eee7ff !important;
}

.portalRoleBadge.staff{
  background:rgba(14,165,233,.16) !important;
  border-color:rgba(125,211,252,.26) !important;
  color:#dff7ff !important;
}

.portalRoleBadge.viewer,
.portalRoleBadge.default{
  background:rgba(100,116,139,.16) !important;
  border-color:rgba(203,213,225,.20) !important;
  color:#e2e8f0 !important;
}

.portalRoleBadge.owner{
  background:rgba(212,175,55,.16) !important;
  border-color:rgba(250,204,21,.26) !important;
  color:#fff2b8 !important;
}

.portalStatusBadge.ok,
.portalAccessBadge.ok{
  background:rgba(16,185,129,.16) !important;
  border-color:rgba(52,211,153,.28) !important;
  color:#d7ffe9 !important;
}

.portalStatusBadge.pending,
.portalAccessBadge.pending{
  background:rgba(245,158,11,.13) !important;
  border-color:rgba(251,191,36,.25) !important;
  color:#ffe9ae !important;
}

.portalAccessBadge.gold{
  background:rgba(212,175,55,.14) !important;
  border-color:rgba(250,204,21,.26) !important;
  color:#fff2b8 !important;
}

.portalMemberActionsReadonly{
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-end !important;
  justify-content:center !important;
  gap:8px !important;
  min-width:160px !important;
}

.portalAccessNote{
  display:block !important;
  max-width:210px !important;
  color:#94a3b8 !important;
  font-size:.82rem !important;
  font-weight:800 !important;
  line-height:1.35 !important;
  text-align:right !important;
}

/* Master Admin actions stay clean */
.portalMemberActionsManage{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:10px !important;
  min-width:min(360px,100%) !important;
}

.portalMemberActionsManage button,
.portalMemberActionsManage .portalAccessBadge{
  width:100% !important;
  min-height:44px !important;
  border-radius:18px !important;
  white-space:normal !important;
}

/* For non-master, completely hide any accidental action buttons inside readonly block */
.portalMemberItemReadMode.read-only .portalMemberActionsReadonly button,
.portalMemberItemReadMode.read-only [data-send-activation],
.portalMemberItemReadMode.read-only [data-copy-activation],
.portalMemberItemReadMode.read-only [data-reset-local-member],
.portalMemberItemReadMode.read-only [data-remove-local-member]{
  display:none !important;
}

/* Mobile */
@media(max-width:720px){
  .portalMemberItemReadMode{
    grid-template-columns:1fr !important;
    gap:12px !important;
  }

  .portalMemberActionsReadonly{
    align-items:flex-start !important;
    min-width:0 !important;
    width:100% !important;
  }

  .portalAccessNote{
    max-width:100% !important;
    text-align:left !important;
  }

  .portalMemberActionsManage{
    grid-template-columns:1fr !important;
    width:100% !important;
    min-width:0 !important;
  }
}

/* ==========================================================
   EventoQR.click — V36.20.7.14
   PORTAL ACCESS MOBILE POLISH
   Solo mejora la sección de Accesos Locales en portal.html.
   No toca permisos, SQL ni lógica.
   ========================================================== */

.portalMemberItemReadMode{
  padding:18px !important;
  border-radius:24px !important;
}

.portalMemberInfo strong{
  font-size:clamp(1.02rem, 4.2vw, 1.25rem) !important;
  line-height:1.18 !important;
  letter-spacing:-.025em !important;
}

/* Correos largos: máximo 2 líneas limpias, sin romper horrible */
.portalMemberInfo > strong:first-child{
  display:-webkit-box !important;
  -webkit-line-clamp:2 !important;
  -webkit-box-orient:vertical !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  word-break:break-word !important;
  overflow-wrap:anywhere !important;
  max-width:100% !important;
}

/* Badges más compactos y respirables */
.portalMemberBadges{
  gap:7px !important;
  margin:9px 0 10px !important;
}

.portalRoleBadge,
.portalStatusBadge,
.portalAccessBadge{
  min-height:28px !important;
  padding:6px 10px !important;
  font-size:.68rem !important;
  letter-spacing:.035em !important;
  line-height:1.05 !important;
  max-width:100% !important;
}

/* Texto de ayuda más elegante */
.portalMemberInfo small{
  display:block !important;
  color:rgba(203,213,225,.82) !important;
  font-size:.9rem !important;
  line-height:1.42 !important;
  font-weight:750 !important;
  margin-top:4px !important;
}

.portalAccessNote{
  font-size:.88rem !important;
  line-height:1.4 !important;
  color:rgba(226,232,240,.84) !important;
  font-weight:850 !important;
}

/* Read-only: que se vea como estado, no como grupo de botones */
.portalMemberActionsReadonly{
  background:rgba(2,6,23,.16) !important;
  border:1px solid rgba(255,255,255,.08) !important;
  border-radius:18px !important;
  padding:12px !important;
}

/* Mobile fino */
@media(max-width:720px){
  .portalMemberItemReadMode{
    padding:16px !important;
    border-radius:22px !important;
    gap:14px !important;
  }

  .portalMemberInfo > strong:first-child{
    font-size:1.08rem !important;
    line-height:1.16 !important;
    max-width:100% !important;
  }

  .portalMemberBadges{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:7px !important;
  }

  .portalRoleBadge,
  .portalStatusBadge,
  .portalAccessBadge{
    min-height:27px !important;
    padding:6px 9px !important;
    font-size:.64rem !important;
    letter-spacing:.025em !important;
  }

  .portalMemberInfo small{
    font-size:.88rem !important;
    line-height:1.38 !important;
  }

  .portalMemberActionsReadonly{
    padding:11px !important;
    border-radius:17px !important;
  }

  .portalAccessNote{
    font-size:.86rem !important;
    line-height:1.36 !important;
  }
}

/* Celulares muy angostos */
@media(max-width:390px){
  .portalMemberItemReadMode{
    padding:14px !important;
  }

  .portalMemberInfo > strong:first-child{
    font-size:1rem !important;
  }

  .portalRoleBadge,
  .portalStatusBadge,
  .portalAccessBadge{
    font-size:.60rem !important;
    padding:6px 8px !important;
  }

  .portalMemberInfo small,
  .portalAccessNote{
    font-size:.82rem !important;
  }
}

/* ==========================================================
   EventoQR.click — V36.20.7.15
   PORTAL ACCESS FINAL COMPACT
   Solo compacta la sección Accesos Locales del portal.
   No toca permisos, SQL, JS ni lógica.
   ========================================================== */

/* Cards un poco más compactas sin perder aire */
.portalMemberItemReadMode{
  padding:15px !important;
  border-radius:22px !important;
  gap:11px !important;
}

/* Correo largo: una línea elegante con ellipsis */
.portalMemberInfo > strong:first-child{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  word-break:normal !important;
  overflow-wrap:normal !important;
  font-size:clamp(.98rem, 3.8vw, 1.16rem) !important;
  line-height:1.12 !important;
  letter-spacing:-.03em !important;
}

/* Badges más compactos */
.portalMemberBadges{
  gap:6px !important;
  margin:8px 0 8px !important;
}

.portalRoleBadge,
.portalStatusBadge,
.portalAccessBadge{
  min-height:25px !important;
  padding:5px 9px !important;
  font-size:.59rem !important;
  letter-spacing:.03em !important;
  line-height:1.05 !important;
}

/* Texto de estado más ligero */
.portalMemberInfo small{
  font-size:.82rem !important;
  line-height:1.34 !important;
  color:rgba(203,213,225,.76) !important;
  font-weight:700 !important;
  margin-top:2px !important;
}

/* Caja read-only más discreta */
.portalMemberActionsReadonly{
  padding:10px !important;
  border-radius:16px !important;
  background:rgba(2,6,23,.12) !important;
  border-color:rgba(255,255,255,.07) !important;
  gap:7px !important;
}

/* Nota menos pesada */
.portalAccessNote{
  font-size:.78rem !important;
  line-height:1.32 !important;
  color:rgba(203,213,225,.70) !important;
  font-weight:750 !important;
}

/* Si el botón flotante tapa la card, lo bajamos y compactamos solo en portal */
.portalShell .floatWA,
.portalShell .portalSupportFloat,
.portalShell .catalogFloatWhats,
.portalShell [class*="Float"],
.portalShell [class*="SupportFloat"]{
  right:14px !important;
  bottom:74px !important;
  transform:scale(.92) !important;
  transform-origin:right bottom !important;
}

/* Mobile final compact */
@media(max-width:720px){
  .portalMemberItemReadMode{
    padding:14px !important;
    border-radius:21px !important;
    gap:10px !important;
  }

  .portalMemberInfo > strong:first-child{
    font-size:1rem !important;
  }

  .portalRoleBadge,
  .portalStatusBadge,
  .portalAccessBadge{
    min-height:24px !important;
    padding:5px 8px !important;
    font-size:.56rem !important;
    letter-spacing:.025em !important;
  }

  .portalMemberInfo small{
    font-size:.80rem !important;
  }

  .portalAccessNote{
    font-size:.76rem !important;
  }

  .portalMemberActionsReadonly{
    padding:9px !important;
  }
}

/* Celulares muy angostos */
@media(max-width:390px){
  .portalMemberItemReadMode{
    padding:13px !important;
  }

  .portalMemberInfo > strong:first-child{
    font-size:.95rem !important;
  }

  .portalRoleBadge,
  .portalStatusBadge,
  .portalAccessBadge{
    min-height:23px !important;
    padding:5px 7px !important;
    font-size:.52rem !important;
  }

  .portalMemberInfo small,
  .portalAccessNote{
    font-size:.74rem !important;
  }
}

/* ==========================================================
   EventoQR.click — V36.20.7.16
   INVITADOS Y PASES — MOBILE / APP POLISH
   Solo mejora visualmente cards y botones de invitados/pases.
   No toca permisos, SQL, JS ni lógica.
   ========================================================== */

/* Cards de invitados/pases más limpias */
.portalShell .guestItem,
.portalShell .portalGuestItem,
.portalShell .passGuestItem,
.portalShell [class*="GuestItem"],
.portalShell [class*="guestItem"]{
  border-radius:22px !important;
  padding:15px !important;
  gap:13px !important;
  background:linear-gradient(180deg,rgba(31,41,65,.72),rgba(15,23,42,.66)) !important;
  border:1px solid rgba(255,255,255,.11) !important;
  box-shadow:0 16px 38px rgba(2,6,23,.18), inset 0 1px 0 rgba(255,255,255,.06) !important;
}

/* Texto principal del invitado */
.portalShell .guestItem strong,
.portalShell .portalGuestItem strong,
.portalShell .passGuestItem strong,
.portalShell [class*="GuestItem"] strong{
  display:block !important;
  font-size:clamp(1rem,3.8vw,1.18rem) !important;
  line-height:1.15 !important;
  letter-spacing:-.025em !important;
  max-width:100% !important;
  overflow-wrap:anywhere !important;
}

/* Meta del invitado: pases, mesa, teléfono */
.portalShell .guestItem span,
.portalShell .guestItem small,
.portalShell .portalGuestItem span,
.portalShell .portalGuestItem small,
.portalShell [class*="GuestItem"] span,
.portalShell [class*="GuestItem"] small{
  color:rgba(203,213,225,.78) !important;
  font-size:.82rem !important;
  line-height:1.35 !important;
  font-weight:700 !important;
}

/* Estados tipo abierto/check-in */
.portalShell .guestItem .badge,
.portalShell .guestItem [class*="badge"],
.portalShell .guestItem [class*="Badge"],
.portalShell .guestItem em,
.portalShell [class*="GuestItem"] .badge,
.portalShell [class*="GuestItem"] em{
  min-height:26px !important;
  padding:5px 10px !important;
  border-radius:999px !important;
  font-size:.62rem !important;
  letter-spacing:.055em !important;
  font-weight:950 !important;
  text-transform:uppercase !important;
}

/* Contenedor de acciones: 2 columnas, app style */
.portalShell .guestItem div:last-child,
.portalShell .guestActions,
.portalShell .portalGuestActions,
.portalShell .passActions,
.portalShell [class*="GuestActions"],
.portalShell [class*="guestActions"]{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:9px !important;
  width:100% !important;
}

/* Botones de acciones de invitados */
.portalShell .guestItem a,
.portalShell .guestItem button,
.portalShell .guestActions a,
.portalShell .guestActions button,
.portalShell .portalGuestActions a,
.portalShell .portalGuestActions button,
.portalShell .passActions a,
.portalShell .passActions button,
.portalShell [class*="GuestActions"] a,
.portalShell [class*="GuestActions"] button{
  width:100% !important;
  min-width:0 !important;
  min-height:42px !important;
  padding:8px 10px !important;
  border-radius:17px !important;
  font-size:.82rem !important;
  line-height:1.05 !important;
  font-weight:950 !important;
  text-align:center !important;
  white-space:normal !important;
  color:#f8fafc !important;
  background:linear-gradient(180deg,rgba(57,66,96,.78),rgba(39,47,73,.74)) !important;
  border:1px solid rgba(255,255,255,.13) !important;
  box-shadow:0 10px 22px rgba(2,6,23,.16), inset 0 1px 0 rgba(255,255,255,.08) !important;
}

/* Botón Pase / QR como acción principal visual */
.portalShell .guestItem a[href*="pass"],
.portalShell .guestItem a[href*="qr"],
.portalShell .guestItem button[data-pass],
.portalShell .guestItem button[data-open-pass],
.portalShell .guestItem button[data-copy-pass],
.portalShell .guestActions button[data-copy-pass],
.portalShell .passActions .btn.primary{
  background:linear-gradient(135deg,#d6aa2d 0%,#b97861 44%,#8238ff 100%) !important;
  border-color:rgba(255,255,255,.18) !important;
  color:#fff !important;
  box-shadow:0 13px 28px rgba(124,58,237,.20),0 8px 18px rgba(214,170,45,.14) !important;
}

/* WhatsApp verde fino */
.portalShell .guestItem a[href*="wa.me"],
.portalShell .guestItem a[href*="whatsapp"],
.portalShell .guestItem button[data-whatsapp],
.portalShell .guestActions button[data-whatsapp],
.portalShell .guestActions a[href*="whatsapp"]{
  background:linear-gradient(180deg,rgba(25,145,88,.88),rgba(14,108,70,.84)) !important;
  border-color:rgba(74,222,128,.22) !important;
  color:#ecfdf5 !important;
}

/* Copiar como info azul */
.portalShell .guestItem button[data-copy],
.portalShell .guestItem button[data-copy-link],
.portalShell .guestItem button[data-copy-pass],
.portalShell .guestActions button[data-copy],
.portalShell .guestActions button[data-copy-link],
.portalShell .guestActions button[data-copy-pass]{
  background:linear-gradient(180deg,rgba(33,90,150,.84),rgba(20,62,116,.80)) !important;
  border-color:rgba(96,165,250,.22) !important;
  color:#eff6ff !important;
}

/* Entrada/check-in como éxito */
.portalShell .guestItem button[data-checkin],
.portalShell .guestItem button[data-mark-entry],
.portalShell .guestActions button[data-checkin],
.portalShell .guestActions button[data-mark-entry]{
  background:linear-gradient(180deg,rgba(12,128,99,.86),rgba(8,91,78,.82)) !important;
  border-color:rgba(52,211,153,.22) !important;
  color:#dcfce7 !important;
}

/* Cards de pase/QR dentro del portal */
.portalShell .passCard,
.portalShell .qrPassCard,
.portalShell .passPreview,
.portalShell [class*="PassCard"],
.portalShell [class*="passCard"]{
  border-radius:24px !important;
  padding:16px !important;
  background:linear-gradient(180deg,rgba(20,28,50,.78),rgba(13,19,36,.72)) !important;
  border:1px solid rgba(255,255,255,.11) !important;
}

/* Mobile: invitado se vuelve vertical y acciones full clean */
@media(max-width:720px){
  .portalShell .guestItem,
  .portalShell .portalGuestItem,
  .portalShell .passGuestItem,
  .portalShell [class*="GuestItem"],
  .portalShell [class*="guestItem"]{
    display:grid !important;
    grid-template-columns:1fr !important;
    padding:14px !important;
    border-radius:21px !important;
  }

  .portalShell .guestItem strong,
  .portalShell [class*="GuestItem"] strong{
    font-size:1rem !important;
  }

  .portalShell .guestItem div:last-child,
  .portalShell .guestActions,
  .portalShell .portalGuestActions,
  .portalShell .passActions,
  .portalShell [class*="GuestActions"],
  .portalShell [class*="guestActions"]{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:8px !important;
  }

  .portalShell .guestItem a,
  .portalShell .guestItem button,
  .portalShell .guestActions a,
  .portalShell .guestActions button,
  .portalShell .portalGuestActions a,
  .portalShell .portalGuestActions button,
  .portalShell .passActions a,
  .portalShell .passActions button{
    min-height:40px !important;
    border-radius:16px !important;
    font-size:.78rem !important;
    padding:8px 9px !important;
  }
}

/* Celulares muy angostos: acciones en una columna */
@media(max-width:390px){
  .portalShell .guestItem div:last-child,
  .portalShell .guestActions,
  .portalShell .portalGuestActions,
  .portalShell .passActions,
  .portalShell [class*="GuestActions"],
  .portalShell [class*="guestActions"]{
    grid-template-columns:1fr !important;
  }

  .portalShell .guestItem a,
  .portalShell .guestItem button,
  .portalShell .guestActions a,
  .portalShell .guestActions button,
  .portalShell .portalGuestActions a,
  .portalShell .portalGuestActions button,
  .portalShell .passActions a,
  .portalShell .passActions button{
    min-height:39px !important;
    font-size:.76rem !important;
  }
}

/* ==========================================================
   EventoQR.click — V36.20.7.17
   CHECK-IN SCANNER FEEDBACK PRO
   Solo mejora visualmente checkin.html/scanner.
   No toca permisos, SQL ni portal.
   ========================================================== */

.checkinProShell,
.checkinShell{
  --checkin-ok:#22c55e;
  --checkin-warn:#facc15;
  --checkin-err:#ef4444;
  --checkin-info:#38bdf8;
}

/* Card principal de scanner más app */
.checkinProCard,
.checkinCard{
  border-radius:28px !important;
  border:1px solid rgba(255,255,255,.12) !important;
  box-shadow:0 26px 70px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.06) !important;
  overflow:hidden !important;
}

/* Status pill más visible */
.checkinStatusPill{
  min-height:40px !important;
  padding:0 18px !important;
  border-radius:999px !important;
  font-size:.78rem !important;
  letter-spacing:.08em !important;
  font-weight:950 !important;
  text-transform:uppercase !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  border:1px solid rgba(255,255,255,.14) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 12px 26px rgba(2,6,23,.18) !important;
}

.checkinStatusPill.waiting{
  background:rgba(100,116,139,.18) !important;
  color:#e2e8f0 !important;
}

.checkinStatusPill.scanning,
.checkinStatusPill.validating{
  background:rgba(56,189,248,.16) !important;
  border-color:rgba(125,211,252,.28) !important;
  color:#dff7ff !important;
}

.checkinStatusPill.valid,
.checkinStatusPill.registered{
  background:rgba(34,197,94,.16) !important;
  border-color:rgba(74,222,128,.30) !important;
  color:#dcfce7 !important;
}

.checkinStatusPill.duplicate,
.checkinStatusPill.warning{
  background:rgba(250,204,21,.14) !important;
  border-color:rgba(250,204,21,.30) !important;
  color:#fff2b8 !important;
}

.checkinStatusPill.error{
  background:rgba(239,68,68,.16) !important;
  border-color:rgba(248,113,113,.30) !important;
  color:#fee2e2 !important;
}

/* Área del lector */
#qrReader,
.qrReader,
.scannerBox{
  border-radius:26px !important;
  overflow:hidden !important;
  border:1px solid rgba(255,255,255,.10) !important;
  background:
    linear-gradient(135deg,rgba(255,255,255,.035) 25%,transparent 25%) 0 0/28px 28px,
    linear-gradient(225deg,rgba(255,255,255,.03) 25%,transparent 25%) 0 0/28px 28px,
    rgba(2,6,23,.28) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06) !important;
}

/* Result box fuerte y claro */
.checkinResultPro,
.checkinResult{
  display:grid !important;
  grid-template-columns:auto minmax(0,1fr) !important;
  align-items:center !important;
  gap:14px !important;
  border-radius:24px !important;
  padding:16px !important;
  margin:16px 0 !important;
  border:1px solid rgba(255,255,255,.12) !important;
  box-shadow:0 18px 42px rgba(2,6,23,.22), inset 0 1px 0 rgba(255,255,255,.08) !important;
}

.checkinResult.hidden{
  display:none !important;
}

.checkinResultIcon{
  width:52px !important;
  height:52px !important;
  border-radius:18px !important;
  display:grid !important;
  place-items:center !important;
  font-size:1.45rem !important;
  background:rgba(255,255,255,.10) !important;
  border:1px solid rgba(255,255,255,.12) !important;
}

.checkinResult small,
.checkinResultPro small{
  display:block !important;
  text-transform:uppercase !important;
  letter-spacing:.10em !important;
  font-size:.66rem !important;
  font-weight:950 !important;
  opacity:.82 !important;
  margin-bottom:4px !important;
}

.checkinResult strong,
.checkinResultPro strong{
  display:block !important;
  font-size:clamp(1.18rem,4.4vw,1.65rem) !important;
  line-height:1.1 !important;
  color:#fff !important;
}

.checkinResult p,
.checkinResultPro p{
  margin:6px 0 0 !important;
  color:rgba(226,232,240,.84) !important;
  line-height:1.42 !important;
  font-weight:750 !important;
}

/* Estados por color */
.checkinResult.success,
.checkinResult.valid,
.checkinResult.registered{
  background:linear-gradient(180deg,rgba(20,120,88,.88),rgba(8,76,64,.82)) !important;
  border-color:rgba(74,222,128,.28) !important;
}

.checkinResult.warning,
.checkinResult.duplicate{
  background:linear-gradient(180deg,rgba(113,84,19,.88),rgba(78,59,14,.82)) !important;
  border-color:rgba(250,204,21,.30) !important;
}

.checkinResult.error{
  background:linear-gradient(180deg,rgba(127,29,29,.90),rgba(82,18,18,.84)) !important;
  border-color:rgba(248,113,113,.30) !important;
}

.checkinResult.info{
  background:linear-gradient(180deg,rgba(30,80,128,.88),rgba(16,51,92,.82)) !important;
  border-color:rgba(96,165,250,.28) !important;
}

/* Flash del panel al escanear */
#checkinPanel.scan-ok .checkinProCard,
#checkinPanel.scan-ok .checkinCard{
  animation:eqrScanOk .75s ease;
}

#checkinPanel.scan-warn .checkinProCard,
#checkinPanel.scan-warn .checkinCard{
  animation:eqrScanWarn .75s ease;
}

#checkinPanel.scan-err .checkinProCard,
#checkinPanel.scan-err .checkinCard{
  animation:eqrScanErr .75s ease;
}

@keyframes eqrScanOk{
  0%{box-shadow:0 0 0 rgba(34,197,94,0),0 26px 70px rgba(0,0,0,.26)}
  35%{box-shadow:0 0 0 6px rgba(34,197,94,.20),0 26px 70px rgba(0,0,0,.26)}
  100%{box-shadow:0 0 0 rgba(34,197,94,0),0 26px 70px rgba(0,0,0,.26)}
}
@keyframes eqrScanWarn{
  0%{box-shadow:0 0 0 rgba(250,204,21,0),0 26px 70px rgba(0,0,0,.26)}
  35%{box-shadow:0 0 0 6px rgba(250,204,21,.22),0 26px 70px rgba(0,0,0,.26)}
  100%{box-shadow:0 0 0 rgba(250,204,21,0),0 26px 70px rgba(0,0,0,.26)}
}
@keyframes eqrScanErr{
  0%{box-shadow:0 0 0 rgba(239,68,68,0),0 26px 70px rgba(0,0,0,.26)}
  35%{box-shadow:0 0 0 6px rgba(239,68,68,.22),0 26px 70px rgba(0,0,0,.26)}
  100%{box-shadow:0 0 0 rgba(239,68,68,0),0 26px 70px rgba(0,0,0,.26)}
}

/* Botones del scanner */
.scannerActions .btn,
.checkinActions .btn,
#startScannerBtn,
#stopScannerBtn,
#manualScanBtn,
#scanAnotherBtn,
#markCheckinBtn{
  min-height:52px !important;
  border-radius:20px !important;
  font-weight:950 !important;
}

#startScannerBtn,
#markCheckinBtn:not(:disabled){
  background:linear-gradient(135deg,#d6aa2d 0%,#b97861 44%,#8238ff 100%) !important;
  color:#fff !important;
  border-color:rgba(255,255,255,.18) !important;
}

#stopScannerBtn,
#scanAnotherBtn{
  background:linear-gradient(180deg,rgba(57,66,96,.78),rgba(39,47,73,.74)) !important;
  color:#f8fafc !important;
  border-color:rgba(255,255,255,.13) !important;
}

#markCheckinBtn.done,
#markCheckinBtn:disabled{
  opacity:.72 !important;
  filter:saturate(.86) !important;
}

/* Móvil */
@media(max-width:720px){
  .checkinResultPro,
  .checkinResult{
    grid-template-columns:1fr !important;
    text-align:center !important;
    padding:15px !important;
  }

  .checkinResultIcon{
    margin:0 auto !important;
    width:48px !important;
    height:48px !important;
  }

  .checkinStatusPill{
    min-height:36px !important;
    padding:0 14px !important;
    font-size:.70rem !important;
  }

  .scannerActions,
  .checkinActions{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
  }
}