/* =====================================================================
   Invitalia.digital · Invitaciones
   1. Fuentes   2. Temas   3. Base   4. Barra demo   5. Aperturas
   6. Portadas  7. Secciones   8. Confirmación y pase   9. Panel demo, dock, música, lightbox
   ===================================================================== */

/* 1. FUENTES (solo se descargan las que usa el tema activo) ----------- */
@font-face { font-family: "Cormorant Garamond"; font-weight: 400; font-display: swap; src: url("../fonts/cormorant-garamond-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-weight: 500; font-display: swap; src: url("../fonts/cormorant-garamond-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-weight: 600; font-display: swap; src: url("../fonts/cormorant-garamond-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-weight: 400; font-style: italic; font-display: swap; src: url("../fonts/cormorant-garamond-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-weight: 500; font-style: italic; font-display: swap; src: url("../fonts/cormorant-garamond-latin-500-italic.woff2") format("woff2"); }
@font-face { font-family: "Pinyon Script"; font-weight: 400; font-display: swap; src: url("../fonts/pinyon-script-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Great Vibes"; font-weight: 400; font-display: swap; src: url("../fonts/great-vibes-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Parisienne"; font-weight: 400; font-display: swap; src: url("../fonts/parisienne-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Allura"; font-weight: 400; font-display: swap; src: url("../fonts/allura-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Playfair Display"; font-weight: 400; font-display: swap; src: url("../fonts/playfair-display-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Playfair Display"; font-weight: 600; font-display: swap; src: url("../fonts/playfair-display-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Playfair Display"; font-weight: 400; font-style: italic; font-display: swap; src: url("../fonts/playfair-display-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Cinzel"; font-weight: 400; font-display: swap; src: url("../fonts/cinzel-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Cinzel"; font-weight: 600; font-display: swap; src: url("../fonts/cinzel-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Italiana"; font-weight: 400; font-display: swap; src: url("../fonts/italiana-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Marcellus"; font-weight: 400; font-display: swap; src: url("../fonts/marcellus-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Bodoni Moda"; font-weight: 400; font-display: swap; src: url("../fonts/bodoni-moda-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Bodoni Moda"; font-weight: 600; font-display: swap; src: url("../fonts/bodoni-moda-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Bodoni Moda"; font-weight: 400; font-style: italic; font-display: swap; src: url("../fonts/bodoni-moda-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Josefin Sans"; font-weight: 300; font-display: swap; src: url("../fonts/josefin-sans-latin-300-normal.woff2") format("woff2"); }
@font-face { font-family: "Josefin Sans"; font-weight: 400; font-display: swap; src: url("../fonts/josefin-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Josefin Sans"; font-weight: 600; font-display: swap; src: url("../fonts/josefin-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 400; font-display: swap; src: url("../fonts/montserrat-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 500; font-display: swap; src: url("../fonts/montserrat-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 600; font-display: swap; src: url("../fonts/montserrat-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Lora"; font-weight: 400; font-display: swap; src: url("../fonts/lora-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Lora"; font-weight: 500; font-display: swap; src: url("../fonts/lora-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Lora"; font-weight: 400; font-style: italic; font-display: swap; src: url("../fonts/lora-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Poiret One"; font-weight: 400; font-display: swap; src: url("../fonts/poiret-one-latin-400-normal.woff2") format("woff2"); }
/* Fuentes del sitio para el panel de la demo */
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 400; font-display: swap; src: url("../../fonts/plus-jakarta-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 600; font-display: swap; src: url("../../fonts/plus-jakarta-sans-latin-600-normal.woff2") format("woff2"); }

/* 2. TEMAS ------------------------------------------------------------ */
:root {
  --ease: cubic-bezier(.22, .8, .24, 1);
  --radius: 18px;
  --names-scale: 1;
  --script-style: normal;
  --display-weight: 400;
  --display-tracking: 0;
  --accent-3: #F2B134;
  --hero-ink: #FFFFFF;
}
[data-theme="marfil"]     { --bg:#F7F3EC; --bg-2:#EFE8DC; --surface:#FFFDF8; --ink:#3B3A36; --muted:#625C53; --accent:#A88B5A; --accent-2:#8C9A84; --accent-ink:#7A6136; --btn:#7A6136; --on-btn:#FFFFFF; --line:#E2D8C7; --f-display:"Cormorant Garamond", Georgia, serif; --f-script:"Pinyon Script", cursive; --f-body:"Montserrat", system-ui, sans-serif; --display-weight:500; }
[data-theme="editorial"]  { --bg:#FFFFFF; --bg-2:#F4F3F0; --surface:#FFFFFF; --ink:#141414; --muted:#55524D; --accent:#B89B6A; --accent-2:#6E6A64; --accent-ink:#141414; --btn:#141414; --on-btn:#FFFFFF; --line:#E2DFD9; --f-display:"Bodoni Moda", Didot, serif; --f-script:"Bodoni Moda", Didot, serif; --script-style:italic; --f-body:"Montserrat", system-ui, sans-serif; --names-scale:.86; }
[data-theme="jardin"]     { --bg:#F2F4EE; --bg-2:#E6EBE0; --surface:#FFFFFF; --ink:#2F3A2F; --muted:#556054; --accent:#5E7B5A; --accent-2:#C9A56A; --accent-ink:#46613F; --btn:#46613F; --on-btn:#FFFFFF; --line:#D5DDCC; --f-display:"Lora", Georgia, serif; --f-script:"Parisienne", cursive; --f-body:"Josefin Sans", system-ui, sans-serif; }
[data-theme="desierto"]   { --bg:#F3E9DF; --bg-2:#EADBCB; --surface:#FBF6F0; --ink:#4B3428; --muted:#6E5345; --accent:#B5654A; --accent-2:#8A9A6B; --accent-ink:#934A32; --btn:#934A32; --on-btn:#FFFFFF; --line:#E0CBB8; --f-display:"Italiana", Georgia, serif; --f-script:"Parisienne", cursive; --f-body:"Josefin Sans", system-ui, sans-serif; }
[data-theme="medianoche"] { --bg:#0F1A2B; --bg-2:#132137; --surface:#18263E; --ink:#F3EBDD; --muted:#BDB6A8; --accent:#C9A45C; --accent-2:#7C8DA6; --accent-ink:#DDBE7C; --btn:#C9A45C; --on-btn:#0F1A2B; --line:rgba(201,164,92,.28); --f-display:"Cinzel", Georgia, serif; --f-script:"Great Vibes", cursive; --f-body:"Montserrat", system-ui, sans-serif; --display-tracking:.04em; }
[data-theme="rubor"]      { --bg:#FBF1F1; --bg-2:#F6E3E5; --surface:#FFFFFF; --ink:#4A2A35; --muted:#6F5059; --accent:#C7778A; --accent-2:#D9B26F; --accent-ink:#9E4860; --btn:#9E4860; --on-btn:#FFFFFF; --line:#EED6DA; --f-display:"Playfair Display", Georgia, serif; --f-script:"Great Vibes", cursive; --f-body:"Montserrat", system-ui, sans-serif; }
[data-theme="celeste"]    { --bg:#F1F6FA; --bg-2:#E4EEF6; --surface:#FFFFFF; --ink:#2C3E50; --muted:#4F6174; --accent:#7FA7C9; --accent-2:#C7B48E; --accent-ink:#3B6890; --btn:#3B6890; --on-btn:#FFFFFF; --line:#D6E3EE; --f-display:"Marcellus", Georgia, serif; --f-script:"Allura", cursive; --f-body:"Josefin Sans", system-ui, sans-serif; }
[data-theme="lavanda"]    { --bg:#F5F1FA; --bg-2:#ECE4F5; --surface:#FFFFFF; --ink:#3E3350; --muted:#62577A; --accent:#9B84C4; --accent-2:#C9B6E4; --accent-ink:#6A519A; --btn:#6A519A; --on-btn:#FFFFFF; --line:#E2D8EF; --f-display:"Cormorant Garamond", Georgia, serif; --f-script:"Allura", cursive; --f-body:"Montserrat", system-ui, sans-serif; --display-weight:500; }
[data-theme="academia"]   { --env-tint:#3E7A64; --bg:#0E2A23; --bg-2:#11322A; --surface:#163A30; --ink:#F2EBDC; --muted:#BFC4B5; --accent:#C8A55B; --accent-2:#8E2F3B; --accent-ink:#D9BA72; --btn:#C8A55B; --on-btn:#0E2A23; --line:rgba(200,165,91,.3); --f-display:"Bodoni Moda", Didot, serif; --f-script:"Bodoni Moda", Didot, serif; --script-style:italic; --f-body:"Montserrat", system-ui, sans-serif; --names-scale:.86; }
[data-theme="deco"]       { --bg:#111111; --bg-2:#171613; --surface:#1D1C18; --ink:#EDE3CE; --muted:#B8AE98; --accent:#D4AF5F; --accent-2:#2E5A57; --accent-ink:#DDBB70; --btn:#D4AF5F; --on-btn:#111111; --line:rgba(212,175,95,.3); --f-display:"Poiret One", "Josefin Sans", sans-serif; --f-script:"Poiret One", "Josefin Sans", sans-serif; --f-body:"Josefin Sans", system-ui, sans-serif; --display-tracking:.06em; --names-scale:.8; }
[data-theme="fiesta"]     { --bg:#FFF7EC; --bg-2:#FCEBD7; --surface:#FFFFFF; --ink:#2B1B3D; --muted:#584768; --accent:#E0457B; --accent-2:#1BA39C; --accent-3:#F2B134; --accent-ink:#B0245A; --btn:#B0245A; --on-btn:#FFFFFF; --line:#F0D9C2; --f-display:"Playfair Display", Georgia, serif; --f-script:"Great Vibes", cursive; --f-body:"Josefin Sans", system-ui, sans-serif; --display-weight:600; }

/* 3. BASE ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 60px; -webkit-text-size-adjust: 100%; }
body.inv { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--f-body); font-size: 1.0625rem; line-height: 1.7; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
body.inv.is-locked { overflow: hidden; }
img { max-width: 100%; display: block; }
a { color: var(--accent-ink); }
h1, h2, h3, p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 3px; border-radius: 4px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.center { text-align: center; }

.wrap { width: min(1080px, 100% - 2.5rem); margin-inline: auto; }
.wrap.narrow { width: min(680px, 100% - 2.5rem); }
.wrap.wide { width: min(1240px, 100% - 1.5rem); }
.sec { padding: clamp(4.5rem, 3rem + 6vw, 8rem) 0; position: relative; }
main > .sec:nth-of-type(odd) { background: var(--bg-2); }
.sec-title { font-family: var(--f-display); font-weight: var(--display-weight); letter-spacing: var(--display-tracking); font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3.3rem); line-height: 1.08; text-align: center; color: var(--ink); margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.2rem); text-wrap: balance; }
.sec-lead { text-align: center; color: var(--muted); max-width: 34rem; margin: -1.6rem auto 2.2rem; }
.kicker { font-family: var(--f-display); font-style: italic; font-size: clamp(1.15rem, 1rem + .6vw, 1.45rem); letter-spacing: .02em; }
[data-theme="medianoche"] .kicker, [data-theme="deco"] .kicker, [data-theme="academia"] .kicker { font-style: normal; letter-spacing: .14em; font-size: clamp(.95rem, .9rem + .3vw, 1.1rem); }

.ornament { color: var(--accent); display: flex; justify-content: center; margin: 0 auto 1.8rem; }
.ornament svg { width: min(240px, 70%); height: auto; overflow: visible; }
.ornament-papel svg { width: min(300px, 90%); }

.names { font-weight: 400; line-height: .95; margin: 0; text-wrap: balance; }
.names.is-script { font-family: var(--f-script); font-style: var(--script-style); font-size: calc(clamp(3.6rem, 2.2rem + 7vw, 7.4rem) * var(--names-scale)); }
.names.is-display { font-family: var(--f-display); font-weight: var(--display-weight); letter-spacing: var(--display-tracking); font-size: clamp(2.5rem, 1.6rem + 4.6vw, 5.2rem); line-height: 1.02; }
.names span { display: block; }
.names .amp { font-size: .5em; line-height: 1.2; color: var(--accent); font-family: var(--f-display); font-style: italic; }
.names.is-script .amp { font-family: var(--f-script); font-size: .55em; }

/* Botones */
.btn-inv { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 48px; padding: .75rem 1.4rem; border-radius: 999px; border: 1.5px solid var(--btn); background: var(--btn); color: var(--on-btn); font-family: var(--f-body); font-weight: 600; font-size: .92rem; letter-spacing: .02em; text-decoration: none; cursor: pointer; transition: transform .2s var(--ease), background-color .2s, color .2s, box-shadow .2s; }
.btn-inv:hover { transform: translateY(-1px); box-shadow: 0 10px 24px -14px var(--btn); }
.btn-inv.btn-ghost { background: transparent; color: var(--accent-ink); border-color: color-mix(in srgb, var(--accent-ink) 45%, transparent); }
.btn-inv.btn-ghost:hover { background: color-mix(in srgb, var(--accent-ink) 8%, transparent); }
.btn-inv.btn-lg { width: 100%; min-height: 56px; font-size: 1rem; }
.btn-inv.btn-sm { min-height: 40px; padding: .5rem 1.1rem; font-size: .85rem; }

/* Aparición al hacer scroll (solo con JS) */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js .reveal.is-visible { opacity: 1; transform: none; }

/* 4. BARRA DE DEMO ---------------------------------------------------- */
.demo-bar { position: fixed; z-index: 1000; top: 0; left: 0; right: 0; height: 44px; display: flex; align-items: center; gap: .75rem; padding: 0 .75rem; background: rgba(38, 16, 23, .88); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #FAF8F6; font-family: "Plus Jakarta Sans", system-ui, sans-serif; font-size: .8rem; }
.demo-bar a { color: #FAF8F6; text-decoration: none; }
.demo-bar-back { display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; padding: .35rem .5rem; border-radius: 8px; }
.demo-bar-back:hover { background: rgba(255, 255, 255, .1); }
.demo-bar-label { flex: 1; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .85; }
.demo-bar-cta { background: #E2B4A3; color: #261017 !important; font-weight: 600; padding: .4rem .85rem; border-radius: 999px; white-space: nowrap; }
@media (max-width: 480px) { .demo-bar-back span { display: none; } .demo-bar-label { font-size: .72rem; } }

/* 5. APERTURAS -------------------------------------------------------- */
.opening { position: fixed; inset: 0; z-index: 900; display: grid; place-items: center; padding: 64px 1rem 2rem; background: radial-gradient(120% 80% at 50% 30%, var(--surface), var(--bg) 70%); transition: opacity .9s var(--ease), transform .9s var(--ease), visibility 0s linear .9s; }
.opening.is-gone { opacity: 0; transform: scale(1.04); visibility: hidden; pointer-events: none; }
.opening-stage { position: relative; display: grid; justify-items: center; gap: 1.4rem; width: min(540px, 100%); }
.opening-to { font-family: var(--f-display); font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2rem); color: var(--ink); text-align: center; line-height: 1.2; }
.opening-to span { display: block; font-style: italic; font-size: .65em; color: var(--accent-ink); margin-bottom: .2rem; }
.opening-hint { font-size: .85rem; color: var(--muted); text-align: center; transition: opacity .3s; }
.opening-stage::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 40% at 50% 50%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 70%); }
.opening.is-opening .opening-hint, .opening.is-opening .opening-to { opacity: 0; }

/* Sobre */
.envelope {
  --paper: color-mix(in srgb, var(--accent) 34%, var(--surface));
  --paper-2: color-mix(in srgb, var(--accent) 48%, var(--surface));
  --paper-back: color-mix(in srgb, var(--accent) 55%, var(--ink));
  container-type: inline-size; position: relative; width: 100%; aspect-ratio: 3 / 2; perspective: 1400px;
  filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .28));
}
.is-dark .envelope { --paper: color-mix(in srgb, var(--env-tint, var(--accent-2)) 26%, var(--surface)); --paper-2: color-mix(in srgb, var(--env-tint, var(--accent-2)) 38%, var(--surface)); --paper-back: color-mix(in srgb, var(--surface) 60%, #000); }
.env-back { position: absolute; inset: 0; border-radius: 6px; background: var(--paper-back); }
.env-letter { position: absolute; left: 6%; right: 6%; bottom: 4%; height: 86%; z-index: 2; border-radius: 4px; background: var(--surface); box-shadow: 0 -4px 18px -8px rgba(0,0,0,.3); transition: transform 1s var(--ease) .55s; }
.env-letter-inner { position: absolute; inset: 3cqw; border: 1px solid color-mix(in srgb, var(--accent) 60%, transparent); display: grid; place-content: center; text-align: center; padding: 4cqw; gap: 1.5cqw; }
.letter-kicker { font-family: var(--f-display); font-style: italic; color: var(--accent-ink); font-size: 4.4cqw; }
.letter-names { font-family: var(--f-script); font-style: var(--script-style); font-size: 10cqw; line-height: 1; color: var(--ink); }
[data-theme="deco"] .letter-names, [data-theme="academia"] .letter-names, [data-theme="editorial"] .letter-names { font-family: var(--f-display); font-size: 7.4cqw; }
.letter-date { font-size: 3.4cqw; letter-spacing: .2em; color: var(--muted); }
.env-pocket { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; border-radius: 6px; overflow: hidden; }
.env-pocket .p-side { fill: var(--paper); stroke: color-mix(in srgb, var(--paper-back) 30%, transparent); stroke-width: .6; }
.env-pocket .p-bottom { fill: var(--paper-2); stroke: color-mix(in srgb, var(--paper-back) 35%, transparent); stroke-width: .6; }
.env-flap { position: absolute; left: 0; right: 0; top: 0; height: 58%; z-index: 4; background: linear-gradient(180deg, var(--paper-2), var(--paper)); clip-path: polygon(0 0, 100% 0, 50% 100%); transform-origin: 50% 0; transition: transform .7s var(--ease) .15s, z-index 0s linear .5s; }
.env-seal { position: absolute; z-index: 5; left: 50%; top: 58%; width: 18cqw; height: 18cqw; min-width: 64px; min-height: 64px; translate: -50% -50%; border: 0; border-radius: 50%; cursor: pointer; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--accent) 55%, #fff), var(--accent) 48%, color-mix(in srgb, var(--accent) 60%, #000));
  box-shadow: inset 0 0 0 .35em color-mix(in srgb, var(--accent) 70%, #000 30%), inset 0 2px 3px rgba(255,255,255,.4), 0 8px 18px rgba(0,0,0,.35); transition: transform .35s var(--ease), opacity .35s; }
.env-seal span { font-family: var(--f-display); font-size: max(1.2rem, 5cqw); color: color-mix(in srgb, var(--accent) 35%, #000); text-shadow: 0 1px 0 rgba(255,255,255,.35); white-space: nowrap; }
.env-seal::after { content: ""; position: absolute; inset: -12px; border-radius: 50%; border: 1.5px solid var(--accent); opacity: 0; animation: pulse 2.4s var(--ease) 1s infinite; }
.env-seal:hover { transform: scale(1.06) rotate(-5deg); }
@keyframes pulse { 0% { transform: scale(.8); opacity: .9; } 75%, 100% { transform: scale(1.35); opacity: 0; } }
.is-opening .env-seal { transform: scale(.3); opacity: 0; pointer-events: none; }
.is-opening .env-flap { transform: rotateX(180deg); z-index: 1; }
.is-opening .env-letter { transform: translateY(-62%); }

/* Cortina */
.opening-cortina { background: transparent; padding: 0; }
.curtain { position: absolute; top: 0; bottom: 0; width: 50.5%; background: var(--surface); transition: transform 1.3s var(--ease) .1s; }
.curtain::after { content: ""; position: absolute; top: 0; bottom: 0; width: 1px; background: var(--accent); opacity: .6; }
.curtain-l { left: 0; background: linear-gradient(90deg, var(--bg), var(--surface)); }
.curtain-l::after { right: 10px; }
.curtain-r { right: 0; background: linear-gradient(270deg, var(--bg), var(--surface)); }
.curtain-r::after { left: 10px; }
.curtain-center { position: relative; z-index: 2; display: grid; justify-items: center; gap: 1rem; text-align: center; padding: 64px 1.5rem 2rem; transition: opacity .5s var(--ease); }
.curtain-center .ornament { margin-bottom: .2rem; }
.opening-kicker { font-family: var(--f-display); font-style: italic; color: var(--accent-ink); font-size: 1.2rem; }
.monogram { width: 150px; height: 150px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--accent); outline: 1px solid color-mix(in srgb, var(--accent) 50%, transparent); outline-offset: 6px; font-family: var(--f-display); font-size: 2.4rem; letter-spacing: .06em; color: var(--ink); }
.opening-names { font-family: var(--f-display); font-size: 1.4rem; letter-spacing: var(--display-tracking); }
.opening-cortina.is-opening .curtain-l { transform: translateX(-101%); }
.opening-cortina.is-opening .curtain-r { transform: translateX(101%); }
.opening-cortina.is-opening .curtain-center { opacity: 0; }
.opening-cortina.is-gone { transform: none; }

/* 6. PORTADAS --------------------------------------------------------- */
.hero { position: relative; }
.hero .kicker { margin-bottom: .6rem; }
.hero-sub { font-size: .98rem; letter-spacing: .04em; margin-top: 1rem; }
.hero-date { font-family: var(--f-display); letter-spacing: .28em; font-size: clamp(1.05rem, 1rem + .5vw, 1.35rem); margin-top: 1.4rem; }
.hero-city { font-size: .88rem; letter-spacing: .08em; margin-top: .3rem; opacity: .9; }
.hero-guest { font-family: var(--f-display); font-style: italic; font-size: 1.15rem; margin-bottom: 1rem; }
.scroll-cue { display: inline-grid; place-items: center; width: 44px; height: 44px; margin-top: 2rem; border-radius: 50%; border: 1px solid currentColor; color: inherit; animation: bob 2.4s var(--ease) infinite; }
@keyframes bob { 50% { transform: translateY(6px); } }

/* full y frame: foto a sangre */
.hero-full .hero, .hero-frame .hero { min-height: 100svh; display: grid; color: var(--hero-ink); overflow: hidden; }
.hero-bg, .hero-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-bg img { animation: kenburns 24s ease-out both; }
@keyframes kenburns { from { transform: scale(1.12); } to { transform: scale(1); } }
.hero-full .hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.28) 0%, rgba(0,0,0,.05) 32%, rgba(0,0,0,.25) 55%, rgba(0,0,0,.72) 100%); }
.hero-frame .hero::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.42); }
.hero-content { position: relative; z-index: 2; align-self: end; text-align: center; padding: 6rem 1.5rem clamp(3rem, 8svh, 6rem); text-shadow: 0 2px 20px rgba(0,0,0,.35); }
.hero-frame .hero-content { align-self: center; padding: 6rem 2.5rem; }
.hero-frame .frame-line { position: absolute; z-index: 2; pointer-events: none; inset: calc(44px + 1rem) 1rem 1rem; border: 1px solid rgba(255,255,255,.75); outline: 1px solid rgba(255,255,255,.4); outline-offset: -9px; }
.hero-frame .hero-content { z-index: 3; }
.hero-full .names .amp, .hero-frame .names .amp { color: color-mix(in srgb, var(--accent) 45%, #fff); }

/* arch: foto en arco sobre el fondo del tema */
.hero-arch .hero { padding: calc(44px + 2.5rem) 1.25rem 4rem; text-align: center; background: radial-gradient(90% 60% at 50% 40%, var(--surface), var(--bg)); }
.hero-inner { display: grid; justify-items: center; }
.hero-inner .kicker { color: var(--accent-ink); margin-bottom: 1.4rem; }
.hero-arch figure { position: relative; margin: 0 0 1.6rem; width: min(78vw, 400px); aspect-ratio: 2 / 3; }
.hero-arch figure img { width: 100%; height: 100%; object-fit: cover; border-radius: 999px 999px 14px 14px; }
.hero-arch figure::before { content: ""; position: absolute; inset: -12px; border: 1px solid var(--accent); border-radius: 999px 999px 20px 20px; }
.hero-arch .hero-date { color: var(--accent-ink); }

/* split: foto y texto lado a lado */
.hero-split .hero { display: grid; padding-top: 44px; }
.hero-split-photo { margin: 0; height: 64svh; }
.hero-split-photo img { width: 100%; height: 100%; object-fit: cover; }
.hero-split-text { display: grid; justify-items: center; align-content: center; text-align: center; padding: 3rem 1.5rem 4rem; background: var(--bg); }
.hero-split-text .kicker { color: var(--accent-ink); margin-bottom: 1rem; }
.hero-split-text .ornament { margin: 1.6rem auto 0; }
.hero-split-text .hero-date { letter-spacing: .06em; font-style: italic; }
@media (min-width: 900px) {
  .hero-split .hero { grid-template-columns: 1.05fr .95fr; min-height: 100svh; }
  .hero-split-photo { height: auto; position: sticky; top: 44px; max-height: calc(100svh - 44px); }
  .hero-split-text { padding: 4rem 3rem; }
}

/* 7. SECCIONES -------------------------------------------------------- */
.dedication { margin: 0 auto; text-align: center; max-width: 36rem; }
.dedication p { font-family: var(--f-display); font-size: clamp(1.45rem, 1.15rem + 1.3vw, 2.05rem); line-height: 1.38; font-style: italic; color: var(--ink); text-wrap: balance; }
[data-theme="deco"] .dedication p, [data-theme="medianoche"] .dedication p { font-style: normal; }
.dedication cite { display: block; margin-top: 1.2rem; font-style: normal; font-size: .9rem; letter-spacing: .12em; color: var(--accent-ink); }
.hashtag { text-align: center; margin-top: 1.6rem; font-weight: 600; color: var(--accent-ink); letter-spacing: .04em; }

.countdown { margin: clamp(3rem, 6vw, 4.5rem) auto 0; max-width: 620px; text-align: center; }
.countdown-title { font-family: var(--f-display); font-style: italic; color: var(--accent-ink); font-size: 1.3rem; margin-bottom: 1rem; }
.cd-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; }
.cd-grid div { padding: 1.1rem .3rem; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.cd-grid b { display: block; font-family: var(--f-display); font-weight: var(--display-weight); font-size: clamp(2rem, 1.4rem + 3vw, 3.2rem); line-height: 1; font-variant-numeric: lining-nums tabular-nums; color: var(--ink); }
.cd-grid span { display: block; margin-top: .45rem; font-size: .72rem; letter-spacing: .1em; color: var(--muted); }

.date-card { max-width: 520px; margin: 0 auto; padding: 2.5rem 1.5rem; text-align: center; background: var(--surface); border-radius: var(--radius); border: 1px solid var(--line); box-shadow: 0 30px 60px -40px rgba(0,0,0,.35); }
.dc-weekday { font-family: var(--f-display); font-style: italic; font-size: 1.3rem; text-transform: capitalize; color: var(--accent-ink); }
.dc-main { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; margin: 1rem 0 1.4rem; }
.dc-month, .dc-year { padding: .55rem 0; border-top: 1px solid var(--accent); border-bottom: 1px solid var(--accent); font-size: .85rem; letter-spacing: .22em; text-transform: capitalize; }
.dc-day { font-family: var(--f-display); font-weight: var(--display-weight); font-size: clamp(4.4rem, 3rem + 6vw, 6.4rem); line-height: .9; font-variant-numeric: lining-nums; color: var(--ink); }
.dc-time { font-weight: 600; letter-spacing: .04em; }
.dc-place { margin-top: .8rem; font-family: var(--f-display); font-size: 1.3rem; line-height: 1.3; }
.dc-place span { font-family: var(--f-body); font-size: .88rem; color: var(--muted); }
.dc-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-top: 1.8rem; }
.note-adults { text-align: center; margin-top: 1.6rem; color: var(--muted); font-size: .92rem; }

.family-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 2rem; text-align: center; }
.family-col h3 { font-family: var(--f-display); font-style: italic; font-weight: 400; font-size: 1.3rem; color: var(--accent-ink); margin-bottom: .6rem; }
.family-col p { font-size: 1.05rem; line-height: 1.8; }

.loc-grid { display: grid; gap: 1.5rem; }
@media (min-width: 900px) { .loc-grid { grid-template-columns: repeat(3, 1fr); } }
.loc { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
.loc-photo { position: relative; margin: 0; aspect-ratio: 4 / 3; background: var(--bg-2); }
.loc-photo img { width: 100%; height: 100%; object-fit: cover; }
.loc-icon { position: absolute; left: 50%; bottom: -26px; translate: -50% 0; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; background: var(--surface); color: var(--accent-ink); border: 1px solid var(--line); font-size: 1.15rem; }
.loc-body { padding: 2.4rem 1.4rem 1.6rem; text-align: center; display: flex; flex-direction: column; flex: 1; }
.loc-label { font-family: var(--f-display); font-style: italic; color: var(--accent-ink); font-size: 1.15rem; }
.loc-name { font-family: var(--f-body); font-weight: 600; font-size: 1.12rem; margin: .3rem 0 .4rem; line-height: 1.35; }
.loc-time { font-weight: 600; font-size: .92rem; }
.loc-address { color: var(--muted); font-size: .92rem; margin-top: .4rem; }
.loc-note { margin-top: .9rem; padding: .7rem .9rem; border-radius: 12px; background: var(--bg-2); font-size: .85rem; line-height: 1.5; text-align: left; }
.loc-note i { color: var(--accent-ink); margin-right: .3rem; }
.loc-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-top: auto; padding-top: 1.3rem; }
.loc-actions .btn-inv { padding-inline: .6rem; font-size: .84rem; }

.program-simple { list-style: none; margin: 0 auto; padding: 0; max-width: 480px; display: grid; gap: 1.1rem; }
.program-simple li { display: flex; align-items: baseline; gap: .8rem; }
.ps-time { font-family: var(--f-display); font-size: 1.35rem; white-space: nowrap; color: var(--accent-ink); }
.ps-dots { flex: 1; border-bottom: 1px dotted var(--accent); transform: translateY(-.3em); }
.ps-title { font-weight: 600; text-align: right; }

.timeline { list-style: none; margin: 0 auto; padding: 0; position: relative; max-width: 560px; }
.timeline::before { content: ""; position: absolute; left: 27px; top: 10px; bottom: 10px; width: 1px; background: linear-gradient(var(--accent), color-mix(in srgb, var(--accent) 25%, transparent)); }
.tl-item { position: relative; display: grid; grid-template-columns: 56px 1fr; gap: 1.2rem; padding-bottom: 2rem; }
.tl-icon { position: relative; z-index: 1; width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; background: var(--surface); border: 1px solid var(--accent); color: var(--accent-ink); font-size: 1.15rem; }
.tl-body { padding-top: .2rem; }
.tl-time { font-family: var(--f-display); font-size: 1.25rem; color: var(--accent-ink); line-height: 1.2; }
.tl-title { font-size: 1.08rem; font-weight: 600; margin-top: .15rem; }
.tl-text { font-size: .92rem; color: var(--muted); margin-top: .2rem; }

.story { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(2.5rem, 5vw, 4rem); }
.story-item { display: grid; gap: 1.4rem; align-items: center; }
.story-photo { margin: 0 auto; width: min(260px, 70vw); aspect-ratio: 4 / 5; }
.story-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 999px 999px 12px 12px; }
.story-text { text-align: center; max-width: 30rem; margin: 0 auto; }
.story-year { font-family: var(--f-display); font-size: 2.6rem; line-height: 1; color: var(--accent); font-variant-numeric: lining-nums; }
.story-text h3 { font-family: var(--f-display); font-weight: var(--display-weight); font-size: 1.5rem; margin: .4rem 0; }
.story-text p:last-child { color: var(--muted); }
@media (min-width: 760px) {
  .story-item { grid-template-columns: 1fr 1fr; gap: 3rem; }
  .story-item .story-text { text-align: left; margin: 0; }
  .story-item.is-alt .story-photo { order: 2; }
  .story-item.is-alt .story-text { text-align: right; justify-self: end; }
}

.gallery { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; grid-auto-flow: dense; }
.gallery button { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: var(--bg-2); cursor: zoom-in; overflow: hidden; border-radius: 10px; }
.gallery img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 5; transition: transform .8s var(--ease); }
.gallery button:hover img { transform: scale(1.04); }
.gallery-12 .g-item:nth-child(1), .gallery-24 .g-item:nth-child(1) { grid-column: span 2; }
.gallery-12 .g-item:nth-child(1) img, .gallery-24 .g-item:nth-child(1) img { aspect-ratio: 4 / 3; }
@media (min-width: 760px) {
  .gallery { grid-template-columns: repeat(3, 1fr); gap: .75rem; }
  .gallery-12, .gallery-24 { grid-template-columns: repeat(4, 1fr); }
  .gallery-12 .g-item:nth-child(1), .gallery-24 .g-item:nth-child(1) { grid-column: span 2; grid-row: span 2; }
  .gallery-12 .g-item:nth-child(1) img, .gallery-24 .g-item:nth-child(1) img { aspect-ratio: auto; }
}
.gallery .is-extra { display: none; }
.gallery.is-expanded .is-extra { display: block; }
.sec-gallery .center { margin-top: 1.8rem; }

.dress-code { text-align: center; font-family: var(--f-display); font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.5rem); color: var(--accent-ink); margin-top: -1.2rem; }
.dress-text { text-align: center; color: var(--muted); max-width: 30rem; margin: .8rem auto 0; }
.palette { list-style: none; padding: 0; margin: 2rem 0 .6rem; display: flex; justify-content: center; gap: .7rem; flex-wrap: wrap; }
.swatch { display: block; width: 54px; height: 54px; border-radius: 50%; background: var(--sw); box-shadow: 0 0 0 4px var(--surface), 0 0 0 5px var(--line); }
.palette-label { text-align: center; font-size: .82rem; color: var(--muted); }
.dress-avoid { text-align: center; margin-top: 1.4rem; font-size: .9rem; }
.dress-avoid i { color: var(--accent-ink); }

.stores { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.stores li { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.2rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.store-icon { width: 44px; height: 44px; flex: 0 0 44px; display: grid; place-items: center; border-radius: 50%; background: var(--bg-2); color: var(--accent-ink); }
.stores li > span:not(.store-icon) { flex: 1; display: grid; }
.stores small { color: var(--muted); font-size: .85rem; }
.store-link { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; color: var(--accent-ink); }
.bank { margin-top: 1.4rem; text-align: center; }
.bank-data { margin: 1rem 0 0; padding: 1.2rem 1.4rem; background: var(--surface); border: 1px dashed var(--accent); border-radius: var(--radius); text-align: left; display: grid; gap: .6rem; }
.bank-data div { display: flex; justify-content: space-between; gap: 1rem; }
.bank-data dt { color: var(--muted); font-size: .88rem; }
.bank-data dd { margin: 0; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: .2rem; }
.copy-btn { border: 0; background: none; color: var(--accent-ink); cursor: pointer; padding: .2rem .4rem; }
.bank-note { font-size: .78rem; color: var(--muted); text-align: center; }

.extras-grid { display: grid; gap: 1.5rem; }
@media (min-width: 860px) { .extras-grid { grid-template-columns: 1fr 1fr; } }
.extra-card { padding: 2rem 1.6rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); text-align: center; }
.extra-icon { display: inline-grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: var(--bg-2); color: var(--accent-ink); font-size: 1.5rem; margin-bottom: 1rem; }
.extra-title { font-family: var(--f-display); font-weight: var(--display-weight); font-size: 1.7rem; line-height: 1.15; margin-bottom: .5rem; }
.extra-card > p { color: var(--muted); font-size: .95rem; }
.playlist-form { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-top: 1.2rem; }
.playlist-form input { grid-column: span 1; }
.playlist-form button { grid-column: 1 / -1; }
.playlist { list-style: none; counter-reset: s; padding: 0; margin: 1.3rem 0 0; text-align: left; }
.playlist li { counter-increment: s; display: grid; grid-template-columns: 2rem 1fr; padding: .6rem 0; border-top: 1px solid var(--line); font-size: .92rem; }
.playlist li::before { content: counter(s); grid-row: span 2; color: var(--accent-ink); font-weight: 600; }
.playlist li span { color: var(--muted); font-size: .82rem; }
.playlist li.is-new { animation: pop .6s var(--ease); }
@keyframes pop { from { background: color-mix(in srgb, var(--accent) 20%, transparent); } }
.wall { list-style: none; padding: 0; margin: 1.3rem 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: .35rem; }
.wall img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 8px; }
.upload-btn { cursor: pointer; }

/* Campos de formulario */
.rsvp-card { padding: clamp(2rem, 1.5rem + 3vw, 3.2rem) clamp(1.25rem, 1rem + 2vw, 2.6rem); background: var(--surface); border: 1px solid var(--line); border-radius: calc(var(--radius) + 8px); box-shadow: 0 40px 80px -50px rgba(0,0,0,.4); }
.rsvp-card .sec-title { margin-bottom: 1rem; }
.rsvp-guest { text-align: center; font-family: var(--f-display); font-size: 1.6rem; color: var(--accent-ink); }
.rsvp-passes { text-align: center; margin-top: .3rem; }
.rsvp-deadline { text-align: center; color: var(--muted); font-size: .9rem; margin: .5rem 0 2rem; }
.rsvp-form { display: grid; gap: 1.4rem; }
.field { display: grid; gap: .45rem; border: 0; padding: 0; margin: 0; min-width: 0; }
.field label, .field legend, .field-label { font-weight: 600; font-size: .9rem; padding: 0; }
.field legend { margin-bottom: .6rem; }
.opt { font-weight: 400; color: var(--muted); }
.rsvp-form input[type="text"], .rsvp-form select, .rsvp-form textarea, .playlist-form input {
  width: 100%; min-height: 50px; padding: .75rem 1rem; border-radius: 12px; border: 1.5px solid var(--line); background: var(--bg); color: var(--ink); font-size: 1rem; transition: border-color .2s, box-shadow .2s;
}
.rsvp-form textarea { min-height: 96px; resize: vertical; }
.rsvp-form input:focus, .rsvp-form select:focus, .rsvp-form textarea:focus, .playlist-form input:focus { outline: none; border-color: var(--accent-ink); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); }
.rsvp-form ::placeholder, .playlist-form ::placeholder { color: var(--muted); opacity: .85; }
.attend { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.attend legend { grid-column: 1 / -1; }
.choice input, .chip input, .check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice span { display: flex; align-items: center; justify-content: center; gap: .5rem; min-height: 54px; padding: .6rem; border-radius: 14px; border: 1.5px solid var(--line); background: var(--bg); font-weight: 600; font-size: .92rem; cursor: pointer; text-align: center; transition: all .2s; }
.choice input:checked + span { border-color: var(--btn); background: var(--btn); color: var(--on-btn); }
.choice input:focus-visible + span, .chip input:focus-visible + span, .check input:focus-visible + span { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
.chips { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: .7rem; }
.chip span { display: inline-block; padding: .5rem .9rem; border-radius: 999px; border: 1.5px solid var(--line); background: var(--bg); font-size: .85rem; cursor: pointer; transition: all .2s; }
.chip input:checked + span { border-color: var(--accent-ink); background: color-mix(in srgb, var(--accent) 16%, var(--surface)); color: var(--ink); font-weight: 600; }
.check { display: block; cursor: pointer; font-size: .92rem; }
.check span { display: grid; grid-template-columns: 22px 1fr; gap: .7rem; align-items: center; }
.check span::before { content: ""; display: block; width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid var(--line); background: var(--bg); }
.check input:checked + span::before { background: var(--btn) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") center / 70% no-repeat; border-color: var(--btn); }
.if-attending { display: grid; gap: 1.4rem; }
.if-attending[hidden] { display: none; }
.attendees { display: grid; gap: .5rem; }
.attendee { display: grid; grid-template-columns: 1.4fr 1fr; gap: .5rem; }
.attendee[hidden] { display: none; }
.field-error { display: none; color: #B3261E; font-size: .84rem; font-weight: 600; }
.is-dark .field-error { color: #FFB4AB; }
.field.has-error .field-error { display: block; }
.field.has-error input { border-color: #B3261E; }
.demo-note { text-align: center; font-size: .8rem; color: var(--muted); }

/* Pase con QR */
.ticket { position: relative; display: grid; grid-template-columns: 1fr; border-radius: var(--radius); overflow: hidden; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 30px 60px -40px rgba(0,0,0,.45); }
.ticket-main { padding: 1.8rem 1.6rem; }
.ticket-event { font-family: var(--f-display); font-style: italic; color: var(--accent-ink); }
.ticket-names { font-family: var(--f-display); font-weight: var(--display-weight); font-size: 1.9rem; line-height: 1.1; margin: .2rem 0 1.2rem; }
.ticket-data { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem 1rem; margin: 0; }
.ticket-data dt { font-size: .75rem; letter-spacing: .08em; color: var(--muted); }
.ticket-data dd { margin: 0; font-weight: 600; }
.ticket-stub { display: grid; justify-items: center; gap: .6rem; padding: 1.6rem; background: var(--bg-2); border-top: 2px dashed var(--line); }
.qr { width: 168px; height: 168px; padding: 10px; background: #fff; border-radius: 12px; }
.qr svg { width: 100%; height: 100%; display: block; }
.ticket-code { font-family: ui-monospace, monospace; font-size: .85rem; letter-spacing: .12em; color: var(--muted); }
@media (min-width: 640px) {
  .ticket { grid-template-columns: 1fr auto; }
  .ticket-stub { border-top: 0; border-left: 2px dashed var(--line); }
}
.ticket-lock { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: .7rem; padding: 1.5rem; text-align: center; background: color-mix(in srgb, var(--surface) 55%, transparent); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); transition: opacity .6s var(--ease), visibility 0s linear .6s; }
.ticket-lock i { font-size: 1.6rem; color: var(--accent-ink); }
.ticket:not(.is-locked) .ticket-lock { opacity: 0; visibility: hidden; }
.pass-help { text-align: center; color: var(--muted); font-size: .88rem; margin-top: 1.2rem; }

/* Cierre */
.sec-closing { text-align: center; padding-bottom: 7rem; background: var(--bg); }
.closing-text { font-family: var(--f-display); font-style: italic; font-size: 1.4rem; color: var(--muted); margin-bottom: 1.4rem; }
.sec-closing .names { color: var(--ink); }
.closing-date { margin-top: 1.6rem; letter-spacing: .08em; font-size: .9rem; }
.made-by { margin-top: 3rem; font-size: .8rem; color: var(--muted); }

/* Variantes por tema */
[data-theme="fiesta"] .sec-title { font-style: italic; }
[data-theme="fiesta"] main > .sec:nth-of-type(odd)::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 26px; background:
  conic-gradient(from -45deg at 50% 100%, transparent 0 90deg, var(--bg) 0) 0 0 / 28px 26px, linear-gradient(90deg, var(--accent) 0 33%, var(--accent-2) 0 66%, var(--accent-3) 0) 0 0 / 84px 100%; opacity: .9; }
[data-theme="deco"] .sec-title, [data-theme="medianoche"] .sec-title { font-size: clamp(1.9rem, 1.4rem + 2.2vw, 2.9rem); }
[data-theme="deco"] .date-card, [data-theme="deco"] .rsvp-card { border-radius: 0; outline: 1px solid var(--line); outline-offset: 6px; }
[data-theme="editorial"] .sec-title { font-style: italic; font-weight: 400; }
[data-theme="editorial"] .date-card, [data-theme="editorial"] .loc, [data-theme="editorial"] .rsvp-card, [data-theme="editorial"] .cd-grid div { border-radius: 0; box-shadow: none; }
[data-theme="academia"] .cd-grid div, [data-theme="academia"] .loc { border-radius: 4px; }
.is-dark .gallery button, .is-dark .loc-photo { background: var(--surface); }

/* 9. PANEL DEMO, DOCK, MÚSICA, LIGHTBOX ------------------------------- */
.demo-panel { background: #261017; color: rgba(250, 248, 246, .86); font-family: "Plus Jakarta Sans", system-ui, sans-serif; padding: 4.5rem 0 8rem; }
.dp-wrap { width: min(860px, 100% - 2.5rem); margin: 0 auto; }
.dp-head img { width: 180px; height: auto; margin-bottom: 1.5rem; }
.dp-head h2 { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 500; font-size: clamp(1.9rem, 1.4rem + 2vw, 2.7rem); line-height: 1.1; color: #FAF8F6; }
.dp-price { font-family: "Cormorant Garamond", Georgia, serif; font-size: 2.6rem; color: #E2B4A3; margin-top: .6rem; }
.dp-price small { font-family: "Plus Jakarta Sans", sans-serif; font-size: .85rem; color: rgba(250,248,246,.7); }
.dp-features { list-style: none; padding: 0; margin: 2rem 0; display: grid; gap: .8rem; }
@media (min-width: 760px) { .dp-features { grid-template-columns: 1fr 1fr; gap: .9rem 2rem; } }
.dp-features li { display: grid; grid-template-columns: 1.4rem 1fr; gap: .4rem; font-size: .92rem; line-height: 1.5; }
.dp-features i { color: #E2B4A3; margin-top: .3rem; }
.dp-features strong { color: #FAF8F6; font-weight: 600; }
.dp-guests { padding: 1.4rem; border: 1px solid rgba(250,248,246,.15); border-radius: 16px; margin-bottom: 1.5rem; }
.dp-guests p { margin-bottom: .8rem; font-size: .92rem; }
.dp-guests ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.dp-guests a { display: inline-flex; gap: .4rem; align-items: baseline; padding: .55rem .9rem; border-radius: 999px; border: 1px solid rgba(250,248,246,.3); color: #FAF8F6; text-decoration: none; font-size: .88rem; }
.dp-guests a[aria-current] { background: #E2B4A3; color: #261017; border-color: #E2B4A3; }
.dp-guests small { opacity: .75; }
.dp-stats { padding: 1.4rem; border-radius: 16px; background: rgba(250,248,246,.06); margin-bottom: 1.5rem; }
.dp-stats-title { font-weight: 600; color: #FAF8F6; margin-bottom: 1rem; }
.dp-stats-title small { font-weight: 400; opacity: .7; }
.dp-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; text-align: center; }
.dp-kpis b { display: block; font-family: "Cormorant Garamond", serif; font-size: 2.2rem; font-weight: 500; color: #FAF8F6; line-height: 1; }
.dp-kpis span { font-size: .75rem; }
@media (max-width: 480px) { .dp-kpis { grid-template-columns: 1fr 1fr; gap: 1rem; } }
.dp-bar { display: flex; height: 10px; border-radius: 999px; overflow: hidden; margin-top: 1.2rem; }
.dp-bar span { width: var(--w); }
.dp-bar span:nth-child(1) { background: #7BC59A; }
.dp-bar span:nth-child(2) { background: #E2B4A3; }
.dp-bar span:nth-child(3) { background: rgba(250,248,246,.35); }
.dp-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.dp-btn { display: inline-flex; align-items: center; gap: .5rem; min-height: 50px; padding: .8rem 1.4rem; border-radius: 999px; border: 1.5px solid rgba(250,248,246,.35); color: #FAF8F6; text-decoration: none; font-weight: 600; font-size: .92rem; }
.dp-btn:hover { border-color: #FAF8F6; }
.dp-btn-primary { background: #E2B4A3; border-color: #E2B4A3; color: #261017; }
.dp-note { margin-top: 1.6rem; font-size: .8rem; opacity: .7; }

.dock { position: fixed; z-index: 800; left: 50%; bottom: max(.8rem, env(safe-area-inset-bottom)); translate: -50% 0; display: flex; gap: .15rem; padding: .35rem; border-radius: 999px; background: color-mix(in srgb, var(--surface) 88%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid var(--line); box-shadow: 0 16px 40px -18px rgba(0,0,0,.45); transition: transform .5s var(--ease), opacity .5s; }
.dock a { display: grid; justify-items: center; gap: .1rem; min-width: 58px; padding: .45rem .5rem; border-radius: 999px; color: var(--ink); text-decoration: none; font-size: .66rem; letter-spacing: .02em; }
.dock a i { font-size: 1rem; }
.dock a:hover { background: var(--bg-2); }
.dock .dock-cta { background: var(--btn); color: var(--on-btn); padding-inline: .9rem; }
.dock .dock-cta:hover { background: var(--btn); }
.has-opening:not(.is-opened) .dock, .dock.is-hidden { transform: translateY(160%); opacity: 0; }

.music-toggle { position: fixed; z-index: 850; top: 56px; right: 12px; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 88%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--accent-ink); display: grid; place-items: center; cursor: pointer; box-shadow: 0 10px 24px -12px rgba(0,0,0,.4); }
.music-toggle .eq { display: none; gap: 2px; align-items: flex-end; height: 16px; }
.music-toggle .eq i { width: 3px; background: currentColor; animation: eq 1s ease-in-out infinite; }
.music-toggle .eq i:nth-child(2) { animation-delay: .2s; } .music-toggle .eq i:nth-child(3) { animation-delay: .4s; }
@keyframes eq { 0%, 100% { height: 4px; } 50% { height: 16px; } }
.music-toggle[aria-pressed="true"] > i { display: none; }
.music-toggle[aria-pressed="true"] .eq { display: flex; }

.lightbox { border: 0; padding: 0; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; background: rgba(10, 8, 9, .94); color: #fff; }
.lightbox[open] { display: grid; place-items: center; }
.lightbox::backdrop { background: rgba(0,0,0,.6); }
.lightbox img { max-width: min(92vw, 1100px); max-height: 82vh; object-fit: contain; border-radius: 6px; }
.lb-close, .lb-nav { position: absolute; width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); background: rgba(0,0,0,.35); color: #fff; cursor: pointer; font-size: 1.2rem; }
.lb-close { top: 1rem; right: 1rem; }
.lb-prev { left: 1rem; top: 50%; translate: 0 -50%; }
.lb-next { right: 1rem; top: 50%; translate: 0 -50%; }
.lb-count { position: absolute; bottom: 1.2rem; left: 0; right: 0; text-align: center; font-size: .85rem; opacity: .8; }

/* SweetAlert con el tema */
.swal2-popup { font-family: var(--f-body) !important; border-radius: 22px !important; background: var(--surface) !important; color: var(--ink) !important; padding: 2rem 1.4rem 1.6rem !important; }
.swal2-title { font-family: var(--f-display) !important; font-weight: var(--display-weight) !important; color: var(--ink) !important; font-size: 1.9rem !important; line-height: 1.15 !important; }
.swal2-html-container { color: var(--muted) !important; font-size: 1rem !important; line-height: 1.6 !important; }
.swal2-styled.swal2-confirm { background: var(--btn) !important; color: var(--on-btn) !important; border-radius: 999px !important; padding: .8rem 1.8rem !important; font-weight: 600 !important; box-shadow: none !important; }
.swal2-styled.swal2-cancel { background: transparent !important; color: var(--accent-ink) !important; border: 1.5px solid var(--line) !important; border-radius: 999px !important; }
.swal2-icon.swal2-success, .swal2-icon.swal2-info { border-color: var(--accent) !important; color: var(--accent) !important; }
.swal2-icon.swal2-success [class^="swal2-success-line"] { background-color: var(--accent-ink) !important; }
.swal2-icon.swal2-success .swal2-success-ring { border-color: color-mix(in srgb, var(--accent) 40%, transparent) !important; }
.swal2-icon.swal2-success [class^="swal2-success-circular-line"], .swal2-icon.swal2-success .swal2-success-fix { background: var(--surface) !important; }
.swal-preview { text-align: left; white-space: pre-wrap; background: var(--bg-2); color: var(--ink); border-radius: 12px; padding: .9rem 1rem; font-size: .88rem; margin-top: .9rem; }
.swal2-footer { color: var(--muted) !important; font-size: .82rem !important; border-top-color: var(--line) !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .js .reveal { opacity: 1; transform: none; }
}