/* ============================================================
   Tema «constelacion» — XV años nocturnos (demo xv-constelacion · intro envelope «pleno», §19.4).
   Concepto: una noche despejada sobre Lima. Azul noche profundo, plata y rosa empolvado; constelaciones
   de trazo fino, destellos de 4 puntas (los de la marca) y una estrella fugaz de vez en cuando.
   Paleta: noche #0B1029 · tinta #141B3D · plata #C9D1DE (alto #F1F4F9) · rosa empolvado #E8B9C6.
   Tipos: Corinthia (nombre) · Cormorant Garamond (títulos) · Jost (interfaz y texto).
   Tema OSCURO. Contraste medido: #EEF1F8 sobre #0B1029 17:1 · secundario #B3BCD1 sobre #0B1029 10:1 (8,6:1 sobre
   tarjeta #172046) · rosa #E8B9C6 sobre #0B1029 11:1 · botón rosa con texto #1B1533 9,8:1.
   Sobre (§19): papel noche, relieve de estrellas, lacre de cera perla con monograma de plata, efecto estrellas;
   la tarjeta que sale del sobre es de noche con tinta de plata (funde con el hero oscuro).
   Todo va acotado bajo html[data-theme="constelacion"].
   ============================================================ */
:root {
  --bg: #0B1029;
  --bg-alt: #0E1533;
  --surface: #172046;
  --ink: #EEF1F8;
  --ink-soft: #B3BCD1;
  --accent: #E8B9C6;
  --accent-2: #C9D1DE;
  --accent-ink: #1B1533;
  --line: rgba(201, 209, 222, .15);
  --font-display: 'Cormorant Garamond', 'Cormorant', Georgia, 'Times New Roman', serif;
  --font-script: 'Corinthia', 'Cormorant Garamond', cursive;
  --font-body: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --radius: 18px;
  --shadow: 0 24px 46px -28px rgba(2, 4, 16, .95), inset 0 1px 0 rgba(255, 255, 255, .05);
  --hero-overlay: linear-gradient(180deg, rgba(8, 11, 30, .2), rgba(8, 11, 30, .85));
  --hero-ink: #F4F6FB;
  --intro-bg: #080C20;
  --intro-ink: #E9EDF5;
  --seal: #A26F83;
  /* sobre «pleno» (§19.1): valores del tema (el JSON del evento manda si los trae) */
  --env-paper: noche;
  --env-emboss: estrellas;
  --env-liner: patron;
  --seal-finish: plata;
  --env-fx: estrellas;
  --env-tint: #121A3E;
  /* forro: cielo profundo (las estrellas del efecto brillan más sobre casi negro) */
  --env-liner-img: radial-gradient(120% 70% at 50% 18%, #1C2554 0%, #0C1230 45%, #05071A 100%);
  /* piezas propias del tema */
  --cs-night: #0B1029;
  --cs-deep: #070A1C;
  --cs-ink: #141B3D;
  --cs-silver: #C9D1DE;
  --cs-silver-hi: #F1F4F9;
  --cs-silver-lo: #8D97AB;
  --cs-rose: #E8B9C6;
  --cs-rose-lo: #C98FA0;
  --cs-foil: linear-gradient(100deg, #9AA4B8 0%, #E6EAF2 22%, #FFFFFF 34%, #C9D1DE 48%, #8D97AB 64%, #E6EAF2 84%, #B5BECE 100%);
  --cs-glass: linear-gradient(160deg, rgba(34, 45, 92, .78), rgba(17, 24, 56, .9));
  --cs-sky: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280' viewBox='0 0 280 280'%3E%3Cg fill='%23E9EDF5'%3E%3Ccircle cx='18' cy='26' r='1.1' opacity='.55'/%3E%3Ccircle cx='96' cy='12' r='.8' opacity='.4'/%3E%3Ccircle cx='150' cy='58' r='1.3' opacity='.6'/%3E%3Ccircle cx='238' cy='34' r='.9' opacity='.45'/%3E%3Ccircle cx='266' cy='150' r='1.2' opacity='.5'/%3E%3Ccircle cx='204' cy='186' r='.8' opacity='.45'/%3E%3Ccircle cx='120' cy='150' r='1' opacity='.4'/%3E%3Ccircle cx='40' cy='204' r='1.3' opacity='.55'/%3E%3Ccircle cx='88' cy='256' r='.9' opacity='.45'/%3E%3Ccircle cx='176' cy='244' r='1.1' opacity='.5'/%3E%3Ccircle cx='250' cy='262' r='.8' opacity='.4'/%3E%3Ccircle cx='58' cy='112' r='.7' opacity='.4'/%3E%3Ccircle cx='12' cy='150' r='.8' opacity='.35'/%3E%3C/g%3E%3Cpath d='M176 92 198 110 214 96 232 118 252 104' fill='none' stroke='%23C9D1DE' stroke-opacity='.22' stroke-width='.6'/%3E%3Cg fill='%23F1F4F9'%3E%3Ccircle cx='176' cy='92' r='1.5' opacity='.8'/%3E%3Ccircle cx='198' cy='110' r='1.2' opacity='.7'/%3E%3Ccircle cx='214' cy='96' r='1.7' opacity='.85'/%3E%3Ccircle cx='232' cy='118' r='1.2' opacity='.7'/%3E%3Ccircle cx='252' cy='104' r='1.4' opacity='.8'/%3E%3C/g%3E%3Cpath transform='translate(62 58) scale(.42)' d='M12 0C12.9 7.6 16.4 11.1 24 12 16.4 12.9 12.9 16.4 12 24 11.1 16.4 7.6 12.9 0 12 7.6 11.1 11.1 7.6 12 0Z' fill='%23E8B9C6' opacity='.55'/%3E%3Cpath transform='translate(128 206) scale(.32)' d='M12 0C12.9 7.6 16.4 11.1 24 12 16.4 12.9 12.9 16.4 12 24 11.1 16.4 7.6 12.9 0 12 7.6 11.1 11.1 7.6 12 0Z' fill='%23F1F4F9' opacity='.6'/%3E%3C/svg%3E");
  --cs-constellation: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 150'%3E%3Cg fill='none' stroke='%23C9D1DE' stroke-opacity='.45' stroke-width='.7'%3E%3Cpath d='M14 112 46 86 70 96 98 58 128 70 150 34 186 22'/%3E%3Cpath d='M98 58 92 18'/%3E%3Cpath d='M128 70 136 110'/%3E%3C/g%3E%3Cg fill='%23F1F4F9'%3E%3Ccircle cx='14' cy='112' r='1.6'/%3E%3Ccircle cx='46' cy='86' r='2.1'/%3E%3Ccircle cx='70' cy='96' r='1.4'/%3E%3Ccircle cx='98' cy='58' r='2.4'/%3E%3Ccircle cx='92' cy='18' r='1.5'/%3E%3Ccircle cx='128' cy='70' r='1.8'/%3E%3Ccircle cx='136' cy='110' r='1.3'/%3E%3Ccircle cx='150' cy='34' r='2'/%3E%3Ccircle cx='186' cy='22' r='1.5'/%3E%3C/g%3E%3Cpath transform='translate(91.5 51.5) scale(.54)' d='M12 0C12.9 7.6 16.4 11.1 24 12 16.4 12.9 12.9 16.4 12 24 11.1 16.4 7.6 12.9 0 12 7.6 11.1 11.1 7.6 12 0Z' fill='%23F1F4F9'/%3E%3Cpath transform='translate(144 28) scale(.5)' d='M12 0C12.9 7.6 16.4 11.1 24 12 16.4 12.9 12.9 16.4 12 24 11.1 16.4 7.6 12.9 0 12 7.6 11.1 11.1 7.6 12 0Z' fill='%23E8B9C6'/%3E%3C/svg%3E");
  --cs-spark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0C12.9 7.6 16.4 11.1 24 12 16.4 12.9 12.9 16.4 12 24 11.1 16.4 7.6 12.9 0 12 7.6 11.1 11.1 7.6 12 0Z' fill='%23F1F4F9'/%3E%3C/svg%3E");
  --cs-spark-rose: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0C12.9 7.6 16.4 11.1 24 12 16.4 12.9 12.9 16.4 12 24 11.1 16.4 7.6 12.9 0 12 7.6 11.1 11.1 7.6 12 0Z' fill='%23E8B9C6'/%3E%3C/svg%3E");
  --pattern: var(--cs-sky);
  --ornament: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 280 40'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23C9D1DE' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23C9D1DE' stop-opacity='.8'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='1' x2='0'%3E%3Cstop offset='0' stop-color='%23C9D1DE' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23C9D1DE' stop-opacity='.8'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M10 20H112' stroke='url(%23a)' stroke-width='.8'/%3E%3Cpath d='M168 20H270' stroke='url(%23b)' stroke-width='.8'/%3E%3Cg fill='%23C9D1DE'%3E%3Ccircle cx='118' cy='20' r='1.4'/%3E%3Ccircle cx='162' cy='20' r='1.4'/%3E%3Ccircle cx='127' cy='14' r='.9' opacity='.7'/%3E%3Ccircle cx='153' cy='26' r='.9' opacity='.7'/%3E%3C/g%3E%3Cpath transform='translate(128 8)' d='M12 0C12.9 7.6 16.4 11.1 24 12 16.4 12.9 12.9 16.4 12 24 11.1 16.4 7.6 12.9 0 12 7.6 11.1 11.1 7.6 12 0Z' fill='%23F1F4F9'/%3E%3Cpath transform='translate(149.5 9.5) scale(.25)' d='M12 0C12.9 7.6 16.4 11.1 24 12 16.4 12.9 12.9 16.4 12 24 11.1 16.4 7.6 12.9 0 12 7.6 11.1 11.1 7.6 12 0Z' fill='%23E8B9C6'/%3E%3C/svg%3E");
  color-scheme: dark;
}

/* ---------- lienzo general ---------- */
html[data-theme="constelacion"] {
  background-color: var(--cs-deep);
  background-image:
    radial-gradient(70vw 50vh at 12% -6%, rgba(120, 140, 220, .16), transparent 70%),
    radial-gradient(60vw 60vh at 100% 100%, rgba(232, 185, 198, .1), transparent 70%),
    var(--cs-sky);
  background-size: auto, auto, 280px 280px;
}
html[data-theme="constelacion"] body.inv { color: var(--ink); }
html[data-theme="constelacion"] ::selection { background: var(--cs-rose); color: var(--accent-ink); }
html[data-theme="constelacion"] :focus-visible { outline-color: var(--cs-rose); }
html[data-theme="constelacion"] .inv-page {
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(84, 104, 190, .18), transparent 70%),
    var(--cs-sky) 0 0 / 280px 280px,
    var(--bg);
}

/* destellos que titilan por los bordes + una estrella fugaz de vez en cuando (capa de efectos del motor) */
html[data-theme="constelacion"] .inv-fx::before {
  content: ''; position: absolute; top: 0; left: max(0px, calc(50% - var(--col, 560px) / 2)); width: 64px; height: calc(100% + 900px);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='900' viewBox='0 0 64 900'%3E%3Cdefs%3E%3Cpath id='s' d='M12 0C12.9 7.6 16.4 11.1 24 12 16.4 12.9 12.9 16.4 12 24 11.1 16.4 7.6 12.9 0 12 7.6 11.1 11.1 7.6 12 0Z' fill='%23E9EDF5'/%3E%3Cpath id='r' d='M12 0C12.9 7.6 16.4 11.1 24 12 16.4 12.9 12.9 16.4 12 24 11.1 16.4 7.6 12.9 0 12 7.6 11.1 11.1 7.6 12 0Z' fill='%23E8B9C6'/%3E%3C/defs%3E%3Cuse href='%23s' transform='translate(10 60) scale(.42)'%3E%3Canimate attributeName='opacity' values='.1;.9;.1' dur='3.6s' repeatCount='indefinite'/%3E%3C/use%3E%3Cuse href='%23r' transform='translate(34 230) scale(.3)'%3E%3Canimate attributeName='opacity' values='.7;.1;.7' dur='2.9s' repeatCount='indefinite'/%3E%3C/use%3E%3Cuse href='%23s' transform='translate(8 410) scale(.5)'%3E%3Canimate attributeName='opacity' values='.2;1;.2' dur='4.2s' repeatCount='indefinite'/%3E%3C/use%3E%3Cuse href='%23s' transform='translate(30 600) scale(.26)'%3E%3Canimate attributeName='opacity' values='.8;.15;.8' dur='3.2s' repeatCount='indefinite'/%3E%3C/use%3E%3Cuse href='%23r' transform='translate(12 780) scale(.36)'%3E%3Canimate attributeName='opacity' values='.1;.85;.1' dur='3.8s' repeatCount='indefinite'/%3E%3C/use%3E%3Cg fill='%23E9EDF5'%3E%3Ccircle cx='48' cy='140' r='1'%3E%3Canimate attributeName='opacity' values='.2;.9;.2' dur='2.6s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='52' cy='330' r='1.2'%3E%3Canimate attributeName='opacity' values='.9;.2;.9' dur='3.4s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='44' cy='520' r='.9'%3E%3Canimate attributeName='opacity' values='.3;1;.3' dur='2.2s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='50' cy='700' r='1.1'%3E%3Canimate attributeName='opacity' values='.8;.2;.8' dur='3s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='40' cy='860' r='1'%3E%3Canimate attributeName='opacity' values='.2;.8;.2' dur='2.7s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/g%3E%3C/svg%3E") 0 0 / 64px 900px repeat-y;
  opacity: 0;
  animation: csDrift 52s linear infinite, csFxIn 2.4s ease 1s forwards;
}
html[data-theme="constelacion"] .inv-fx::after {
  content: ''; position: absolute; top: 12%; left: 62%; width: 140px; height: 1.5px; border-radius: 2px;
  background: linear-gradient(90deg, rgba(241, 244, 249, 0), rgba(241, 244, 249, .9) 80%, #fff);
  box-shadow: 0 0 6px rgba(241, 244, 249, .6);
  opacity: 0; transform: translate(0, 0) rotate(-24deg);
  animation: csShoot 11s cubic-bezier(.3, .1, .5, 1) 4s infinite;
}
html.is-intro[data-theme="constelacion"] .inv-fx { visibility: hidden; }
@keyframes csDrift { from { transform: translateY(0); } to { transform: translateY(-900px); } }
@keyframes csFxIn { to { opacity: .85; } }
@keyframes csShoot {
  0%, 88% { opacity: 0; transform: translate(0, 0) rotate(-24deg); }
  90% { opacity: 1; }
  97%, 100% { opacity: 0; transform: translate(-240px, 108px) rotate(-24deg); }
}
@keyframes csTwinkle { 0%, 100% { opacity: .35; transform: scale(.82); } 50% { opacity: 1; transform: scale(1); } }
@keyframes csFoil { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0 0; } }

/* ============================================================
   HERO «framed» — arco de plata con constelaciones alrededor y el nombre en plata laminada
   ============================================================ */
html[data-theme="constelacion"] .inv-hero {
  background:
    radial-gradient(90% 46% at 50% 22%, rgba(96, 116, 206, .28), transparent 72%),
    radial-gradient(70% 40% at 100% 70%, rgba(232, 185, 198, .12), transparent 70%),
    var(--cs-sky) 0 0 / 280px 280px,
    linear-gradient(180deg, #0D1435 0%, var(--bg) 60%);
}
/* dos constelaciones a los lados del arco */
html[data-theme="constelacion"] .inv-hero::before {
  content: ''; position: absolute; z-index: 1; pointer-events: none;
  left: calc(50% - 205px); top: calc(clamp(78px, 11vh, 110px) + 40px); width: 132px; height: 99px;
  background: var(--cs-constellation) center / contain no-repeat;
  opacity: .9; transform: rotate(-8deg);
}
html[data-theme="constelacion"] .inv-hero::after {
  content: ''; position: absolute; z-index: 1; pointer-events: none;
  right: calc(50% - 205px); top: calc(clamp(78px, 11vh, 110px) + 236px); width: 120px; height: 90px;
  background: var(--cs-constellation) center / contain no-repeat;
  opacity: .75; transform: scaleX(-1) rotate(-14deg);
}
html[data-theme="constelacion"] .inv-hero--framed { padding-top: clamp(78px, 11vh, 110px); justify-content: flex-start; }
html[data-theme="constelacion"] .inv-hero--framed .inv-hero__media {
  width: min(64%, 270px);
  padding: 7px;
  border: 1px solid rgba(201, 209, 222, .7);
  background: radial-gradient(70% 60% at 50% 30%, rgba(120, 140, 220, .35), transparent 70%), #10173A;
  box-shadow: 0 0 0 1px rgba(7, 10, 28, .6), 0 40px 70px -36px rgba(0, 0, 0, .95), 0 0 70px -20px rgba(120, 140, 220, .45);
}
html[data-theme="constelacion"] .inv-hero--framed .inv-hero__media::before { inset: -14px; border-color: rgba(201, 209, 222, .3); }
/* destello en la clave del arco */
html[data-theme="constelacion"] .inv-hero--framed .inv-hero__media::after {
  content: ''; position: absolute; left: 50%; top: -26px; width: 30px; height: 30px; margin-left: -15px;
  background: var(--cs-spark) center / contain no-repeat;
  filter: drop-shadow(0 0 8px rgba(241, 244, 249, .8));
  animation: csTwinkle 3.4s ease-in-out infinite;
}
html[data-theme="constelacion"] .inv-hero--framed .inv-hero__img { object-position: 50% 22%; filter: saturate(.9) contrast(1.04); }
html[data-theme="constelacion"] .inv-hero__img.is-broken { opacity: 0; }
html[data-theme="constelacion"] .inv-hero--framed .inv-hero__content { padding-top: 24px; }
html[data-theme="constelacion"] .inv-hero__eyebrow {
  font-family: var(--font-body); font-weight: 500; font-size: .7rem; letter-spacing: .42em; color: var(--cs-rose); opacity: 1;
}
html[data-theme="constelacion"] .inv-hero__title,
html[data-theme="constelacion"] .inv-hero--photo:not(.inv-hero--noimg) .inv-hero__title.inv-title {
  font-family: var(--font-script); font-weight: 400;
  font-size: clamp(4.6rem, 25vw, 6.6rem); line-height: 1.02;
  margin: -.06em -.3em .04em; padding: .04em .3em .1em;
  color: var(--cs-silver-hi);
  background: var(--cs-foil); background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 18px rgba(232, 185, 198, .28));
  animation: csFoil 8s ease-in-out infinite;
}
html.is-revealed[data-theme="constelacion"] .inv-hero__title.hero-anim {
  animation: invUp 1.15s var(--ease) both, csFoil 8s ease-in-out 1.4s infinite;
  animation-delay: calc(.12s + var(--i, 0) * .11s), 1.4s;
}
html[data-theme="constelacion"] .inv-hero__subtitle {
  font-family: var(--font-display); font-style: italic; font-size: 1.24rem; line-height: 1.4; color: #DCE1EC; opacity: 1; max-width: 20rem;
}
html[data-theme="constelacion"] .inv-hero__date { font-family: var(--font-body); font-weight: 500; font-size: .7rem; letter-spacing: .32em; color: var(--cs-silver); }
html[data-theme="constelacion"] .inv-hero__date-side { border-color: rgba(201, 209, 222, .4); }
html[data-theme="constelacion"] .inv-hero__date-day { font-family: var(--font-display); font-weight: 500; font-size: 3.5rem; color: var(--cs-silver-hi); }
html[data-theme="constelacion"] .inv-hero__time { color: var(--cs-rose); opacity: 1; }
html[data-theme="constelacion"] .inv-hero__place { font-size: .86rem; letter-spacing: .06em; color: #D5DBE7; opacity: 1; }
html[data-theme="constelacion"] .inv-hero__place .inv-icon { color: var(--cs-rose); }
html[data-theme="constelacion"] .inv-hero__cue { color: var(--cs-silver); }

/* pase del invitado: tarjeta de cristal nocturno */
html[data-theme="constelacion"] .inv-guest {
  background: var(--cs-glass); color: var(--ink);
  border: 1px solid rgba(201, 209, 222, .3); border-radius: 14px;
  box-shadow: 0 22px 40px -24px rgba(0, 0, 0, .95), inset 0 1px 0 rgba(255, 255, 255, .07);
}
html[data-theme="constelacion"] .inv-hero--photo .inv-guest { background: rgba(11, 16, 41, .7); }
html[data-theme="constelacion"] .inv-guest__label { font-weight: 500; color: var(--cs-rose); opacity: 1; letter-spacing: .34em; }
html[data-theme="constelacion"] .inv-guest__name { font-family: var(--font-display); font-weight: 500; font-style: italic; font-size: 1.6rem; color: var(--cs-silver-hi); }
html[data-theme="constelacion"] .inv-guest__passes { color: var(--ink-soft); opacity: 1; }

/* ============================================================
   SECCIONES
   ============================================================ */
html[data-theme="constelacion"] .inv-section { background: transparent; }
html[data-theme="constelacion"] .inv-section.is-alt {
  background:
    radial-gradient(80% 40% at 50% 0%, rgba(96, 116, 206, .14), transparent 70%),
    linear-gradient(180deg, rgba(14, 21, 51, .9), rgba(14, 21, 51, .55));
}
/* separador con destello entre secciones */
html[data-theme="constelacion"] .inv-main > .inv-section + .inv-section::before {
  content: ''; position: absolute; left: 50%; top: -14px; z-index: 2; width: 200px; height: 28px; transform: translateX(-50%); pointer-events: none;
  background: var(--ornament) center / contain no-repeat;
}
html[data-theme="constelacion"] .inv-main .inv-eyebrow {
  font-family: var(--font-body); font-weight: 500; font-size: .7rem; letter-spacing: .4em; color: var(--cs-rose);
}
html[data-theme="constelacion"] .inv-main .inv-title {
  font-family: var(--font-display); font-weight: 500; font-size: clamp(2.3rem, 10vw, 2.9rem); line-height: 1.05; color: var(--cs-silver-hi);
}
html[data-theme="constelacion"] .inv-script { font-family: var(--font-script); }
html[data-theme="constelacion"] .inv-text { color: var(--ink-soft); }
html[data-theme="constelacion"] .inv-head .inv-text { color: #C7CEDD; }
html[data-theme="constelacion"] .inv-card {
  background: var(--cs-glass);
  border: 1px solid rgba(201, 209, 222, .14);
  box-shadow: var(--shadow);
}

/* quote: cita entre estrellas */
html[data-theme="constelacion"] .inv-quote__mark { color: var(--cs-rose); opacity: .8; }
html[data-theme="constelacion"] .inv-quote__text { font-family: var(--font-display); font-style: italic; font-weight: 400; color: var(--cs-silver-hi); }
html[data-theme="constelacion"] .inv-quote__author { color: var(--cs-rose); letter-spacing: .3em; }

/* botones: rosa empolvado con tinta noche; fantasma en plata */
html[data-theme="constelacion"] .inv-btn {
  font-family: var(--font-body); font-weight: 600; font-size: .82rem; letter-spacing: .14em; text-transform: uppercase;
  border-radius: 999px; border-color: #D9A3B2;
  background: linear-gradient(135deg, #F6D5DE 0%, #E8B9C6 45%, #D49CAD 100%); color: var(--accent-ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 14px 28px -14px rgba(232, 185, 198, .65);
}
@media (hover: hover) { html[data-theme="constelacion"] .inv-btn:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 18px 32px -12px rgba(232, 185, 198, .8); } }
html[data-theme="constelacion"] .inv-btn--ghost {
  background: rgba(255, 255, 255, .03); color: var(--cs-silver-hi); border-color: rgba(201, 209, 222, .5); box-shadow: none;
}
html[data-theme="constelacion"] .inv-btn--ghost::after { background: linear-gradient(105deg, transparent 30%, rgba(241, 244, 249, .14) 50%, transparent 70%); }
@media (hover: hover) { html[data-theme="constelacion"] .inv-btn--ghost:hover { background: rgba(241, 244, 249, .07); box-shadow: none; } }
html[data-theme="constelacion"] .inv-btn--wa { background: #0E7A40; border-color: #0E7A40; color: #fff; box-shadow: 0 12px 24px -14px rgba(14, 122, 64, .8); }
html[data-theme="constelacion"] .inv-btn--wa.inv-btn--ghost { background: transparent; color: var(--accent); }

/* vip: pase con cielo estrellado */
html[data-theme="constelacion"] .inv-vip { filter: drop-shadow(0 30px 34px rgba(0, 0, 0, .7)) drop-shadow(0 0 1px rgba(201, 209, 222, .6)); }
html[data-theme="constelacion"] .inv-vip__main, html[data-theme="constelacion"] .inv-vip__stub { color: var(--ink); }
html[data-theme="constelacion"] .inv-vip__main {
  background: radial-gradient(90% 80% at 100% 0%, rgba(232, 185, 198, .18), transparent 60%), var(--cs-sky) 0 0 / 280px 280px, linear-gradient(150deg, #1E2858, #10173A 60%, #18204A);
}
html[data-theme="constelacion"] .inv-vip__kicker { color: var(--cs-rose); opacity: 1; letter-spacing: .3em; }
html[data-theme="constelacion"] .inv-vip__spark { color: var(--cs-silver-hi); }
html[data-theme="constelacion"] .inv-vip__name { font-family: var(--font-display); font-style: italic; color: var(--cs-silver-hi); }
html[data-theme="constelacion"] .inv-vip__grid dt { color: var(--cs-silver); opacity: 1; }
html[data-theme="constelacion"] .inv-vip__stub { background: linear-gradient(160deg, #141B3D, #0B1029); }
html[data-theme="constelacion"] .inv-vip__code { color: var(--cs-rose); }
html[data-theme="constelacion"] .inv-vip__hint { color: var(--ink-soft); opacity: 1; }

/* countdown: cristales de noche con cifras de plata */
html[data-theme="constelacion"] .inv-countdown { gap: 8px; }
html[data-theme="constelacion"] .inv-countdown__unit {
  padding: 18px 2px 14px; border-radius: 14px; background: var(--cs-glass);
  border: 1px solid rgba(201, 209, 222, .2); box-shadow: var(--shadow);
}
html[data-theme="constelacion"] .inv-countdown__unit::before { background: rgba(201, 209, 222, .12); }
html[data-theme="constelacion"] .inv-countdown__num {
  font-family: var(--font-display); font-weight: 500; font-size: clamp(2.3rem, 10vw, 2.9rem);
  background: var(--cs-foil); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--cs-silver-hi);
}
html[data-theme="constelacion"] .inv-countdown__lbl { font-weight: 500; color: var(--cs-rose); letter-spacing: .2em; }
html[data-theme="constelacion"] .inv-countdown__date { color: var(--cs-silver); }
html[data-theme="constelacion"] .inv-countdown__done { font-family: var(--font-script); font-size: 3rem; color: var(--cs-silver-hi); }

/* story: retrato con aro de plata y firma en caligrafía */
html[data-theme="constelacion"] .inv-story__figure img { border-radius: 999px 999px 14px 14px; filter: saturate(.9); }
html[data-theme="constelacion"] .inv-story__figure::after { inset: -10px; border-radius: 999px 999px 20px 20px; border-color: rgba(201, 209, 222, .45); }
html[data-theme="constelacion"] .inv-story__glow { background: radial-gradient(closest-side, rgba(120, 140, 220, .3), transparent); }
html[data-theme="constelacion"] .inv-story__body .inv-text:first-child::first-letter { font-family: var(--font-display); font-size: 3.6em; line-height: .8; color: var(--cs-rose); }
html[data-theme="constelacion"] .inv-story__sig { font-family: var(--font-script); font-size: 3rem; color: var(--cs-silver-hi); }

/* people */
html[data-theme="constelacion"] .inv-people__label { color: var(--cs-rose); letter-spacing: .3em; }
html[data-theme="constelacion"] .inv-people__names { font-family: var(--font-display); font-size: 1.3rem; color: var(--cs-silver-hi); }
html[data-theme="constelacion"] .inv-people__spark { color: var(--cs-silver); }

/* events */
html[data-theme="constelacion"] .inv-event__media { background: var(--cs-deep); }
html[data-theme="constelacion"] .inv-event__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(17, 24, 56, .95)); pointer-events: none; }
html[data-theme="constelacion"] .inv-event__icon, html[data-theme="constelacion"] .inv-event.has-img .inv-event__icon {
  color: var(--cs-silver-hi); background: #121A3E; border: 1px solid rgba(201, 209, 222, .6);
  box-shadow: 0 0 0 5px rgba(17, 24, 56, .9), 0 12px 24px -12px rgba(0, 0, 0, .9);
}
html[data-theme="constelacion"] .inv-event__name { font-family: var(--font-display); font-size: 1.8rem; font-weight: 500; color: var(--cs-silver-hi); }
html[data-theme="constelacion"] .inv-event__meta { color: #C7CEDD; }
html[data-theme="constelacion"] .inv-event__meta .inv-icon { color: var(--cs-rose); }

/* timeline: estrellas sobre una línea de plata */
html[data-theme="constelacion"] .inv-timeline::before { width: 1px; background: linear-gradient(var(--cs-silver), rgba(201, 209, 222, .1)); }
html[data-theme="constelacion"] .inv-timeline__dot {
  color: var(--cs-silver-hi); background: radial-gradient(circle at 35% 30%, #26306A, #121A3E);
  border: 1px solid rgba(201, 209, 222, .6);
  box-shadow: 0 0 0 6px var(--bg), 0 0 22px -4px rgba(150, 170, 240, .55);
}
html[data-theme="constelacion"] .inv-section.is-alt .inv-timeline__dot { box-shadow: 0 0 0 6px #0E1533, 0 0 22px -4px rgba(150, 170, 240, .55); }
html[data-theme="constelacion"] .inv-timeline__time { color: var(--cs-rose); letter-spacing: .22em; }
html[data-theme="constelacion"] .inv-timeline__title { font-family: var(--font-display); font-weight: 500; font-size: 1.5rem; color: var(--cs-silver-hi); }
html[data-theme="constelacion"] .inv-timeline__text { color: var(--ink-soft); }

/* dresscode */
html[data-theme="constelacion"] .inv-dress__icon { color: var(--cs-silver-hi); background: #121A3E; border-color: rgba(201, 209, 222, .5); }
html[data-theme="constelacion"] .inv-dress__code {
  font-family: var(--font-script); font-size: clamp(3.4rem, 15vw, 4.2rem); line-height: 1.05;
  background: var(--cs-foil); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--cs-silver-hi);
}
html[data-theme="constelacion"] .inv-dress__label { color: var(--cs-rose); }
html[data-theme="constelacion"] .inv-chip { background: #141C40; border-color: rgba(201, 209, 222, .16); color: #E1E6F0; }
html[data-theme="constelacion"] .inv-chip__swatch { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3), 0 2px 6px rgba(0, 0, 0, .4); }
html[data-theme="constelacion"] .inv-chip--avoid { color: var(--ink-soft); }
html[data-theme="constelacion"] .inv-chip--avoid .inv-icon { color: var(--cs-rose); }

/* gallery */
html[data-theme="constelacion"] .inv-gallery__item { background: var(--cs-deep); box-shadow: 0 0 0 1px rgba(201, 209, 222, .25), 0 24px 40px -24px rgba(0, 0, 0, .9); }
/* polaroids: marco perla (como fotos reales sobre la noche) con leyenda en tinta azul */
html[data-theme="constelacion"] .inv-gallery--polaroids .inv-gallery__item {
  background: linear-gradient(170deg, #F6F7FB, #E2E6EF);
  box-shadow: 0 18px 34px -14px rgba(0, 0, 0, .85), 0 0 22px -8px rgba(150, 170, 240, .4);
}
html[data-theme="constelacion"] .inv-gallery--polaroids .inv-gallery__cap { color: #2E3354; font-size: 1.25rem; }
html[data-theme="constelacion"] .inv-gallery__nav { background: rgba(11, 16, 41, .85); color: var(--cs-silver-hi); border-color: rgba(201, 209, 222, .45); }
html[data-theme="constelacion"] .inv-gallery__dots span { background: rgba(201, 209, 222, .25); }
html[data-theme="constelacion"] .inv-gallery__dots span.is-on { background: var(--cs-rose); }

/* álbum */
html[data-theme="constelacion"] .inv-album__qr { box-shadow: 0 0 0 1px rgba(201, 209, 222, .7), 0 0 0 7px #121A3E, 0 0 0 8px rgba(201, 209, 222, .3), 0 24px 44px -20px rgba(0, 0, 0, .9); }
html[data-theme="constelacion"] .inv-album__hint { color: var(--ink-soft); }
html[data-theme="constelacion"] .inv-album__icon { color: var(--cs-silver-hi); background: #141C40; }

/* gifts, hotels y nota */
html[data-theme="constelacion"] .inv-gift__icon, html[data-theme="constelacion"] .inv-hotel__icon { color: var(--cs-silver-hi); background: #121A3E; border: 1px solid rgba(201, 209, 222, .4); border-radius: 12px; }
html[data-theme="constelacion"] .inv-gift__title, html[data-theme="constelacion"] .inv-hotel__name { font-family: var(--font-display); font-weight: 500; font-size: 1.45rem; color: var(--cs-silver-hi); }
html[data-theme="constelacion"] .inv-gift__detail { color: var(--ink-soft); }
html[data-theme="constelacion"] .inv-gift__copy { background: #0B1029; color: var(--ink); border-color: rgba(201, 209, 222, .2); }
html[data-theme="constelacion"] .inv-note {
  background: var(--cs-glass); border: 1px solid rgba(201, 209, 222, .25);
  box-shadow: inset 3px 0 0 var(--cs-rose), var(--shadow);
}
html[data-theme="constelacion"] .inv-note__icon { color: var(--cs-rose); background: #0B1029; border: 1px solid rgba(232, 185, 198, .45); }
html[data-theme="constelacion"] .inv-note__title { font-family: var(--font-display); font-weight: 500; font-size: 1.5rem; color: var(--cs-silver-hi); }

/* faq */
html[data-theme="constelacion"] .inv-faq__item { background: var(--cs-glass); border-color: rgba(201, 209, 222, .12); }
html[data-theme="constelacion"] .inv-faq__item.is-open { border-color: rgba(232, 185, 198, .5); box-shadow: 0 20px 40px -24px rgba(0, 0, 0, .9); }
html[data-theme="constelacion"] .inv-faq__q { font-family: var(--font-body); font-weight: 500; font-size: 1rem; color: var(--ink); }
html[data-theme="constelacion"] .inv-faq__icon { background: rgba(232, 185, 198, .14); color: var(--cs-rose); }
html[data-theme="constelacion"] .inv-faq__item.is-open .inv-faq__icon { background: var(--cs-rose); color: var(--accent-ink); }
html[data-theme="constelacion"] .inv-faq__a p { color: #C7CEDD; }

/* wishes */
html[data-theme="constelacion"] .inv-wish { background: var(--cs-glass); border-color: rgba(201, 209, 222, .12); }
html[data-theme="constelacion"] .inv-wish:nth-child(3n + 2) { background: linear-gradient(160deg, rgba(70, 44, 82, .7), rgba(17, 24, 56, .92)); }
html[data-theme="constelacion"] .inv-wish::before { color: var(--cs-rose); opacity: .55; }
html[data-theme="constelacion"] .inv-wish__msg p { font-family: var(--font-display); font-size: 1.22rem; color: var(--ink); }
html[data-theme="constelacion"] .inv-wish__meta strong { color: var(--ink); }
html[data-theme="constelacion"] .inv-wishes__spark { color: var(--cs-silver-hi); }

/* formularios legibles en oscuro */
html[data-theme="constelacion"] .inv-field__label { color: #E1E6F0; letter-spacing: .08em; }
html[data-theme="constelacion"] .inv-field__label small, html[data-theme="constelacion"] .inv-field__count { color: var(--ink-soft); }
html[data-theme="constelacion"] .inv-input { background: #0A0F27; border-color: rgba(201, 209, 222, .22); color: var(--ink); border-radius: 12px; }
html[data-theme="constelacion"] .inv-input::placeholder { color: #8891AA; }
html[data-theme="constelacion"] .inv-input:focus { background: #0D1330; border-color: var(--cs-rose); box-shadow: 0 0 0 3px rgba(232, 185, 198, .22); }

/* RSVP */
html[data-theme="constelacion"] .inv-section.inv-rsvp,
html[data-theme="constelacion"] .inv-section.inv-rsvp.is-alt {
  background: radial-gradient(80% 45% at 50% 0%, rgba(232, 185, 198, .14), transparent 70%), radial-gradient(60% 40% at 50% 100%, rgba(96, 116, 206, .16), transparent 70%), transparent;
}
html[data-theme="constelacion"] .inv-rsvp__seats i { border-color: rgba(232, 185, 198, .7); }
html[data-theme="constelacion"] .inv-rsvp__seats i.is-on { background: var(--cs-rose); }
html[data-theme="constelacion"] .inv-rsvp__face { background: #0F1534; border-color: rgba(201, 209, 222, .16); }
html[data-theme="constelacion"] .inv-rsvp__face-ico { background: #172046; }
html[data-theme="constelacion"] .inv-rsvp__face-txt small { color: var(--ink-soft); }
html[data-theme="constelacion"] .inv-rsvp__radio:checked + .inv-rsvp__face { background: #2A2148; border-color: var(--cs-rose); box-shadow: 0 0 0 1px rgba(232, 185, 198, .4), 0 18px 30px -18px rgba(232, 185, 198, .5); }
html[data-theme="constelacion"] .inv-stepper { background: #0F1534; border-color: rgba(201, 209, 222, .16); }
html[data-theme="constelacion"] .inv-stepper__label { color: var(--ink-soft); }
html[data-theme="constelacion"] .inv-stepper__btn { background: #172046; color: var(--cs-rose); border-color: rgba(232, 185, 198, .45); }
html[data-theme="constelacion"] .inv-stepper__val { color: var(--ink); }
html[data-theme="constelacion"] .inv-rsvp__hint, html[data-theme="constelacion"] .inv-rsvp__alt { color: var(--ink-soft); }
html[data-theme="constelacion"] .inv-rsvp__done-title { font-family: var(--font-script); font-weight: 400; font-size: 3.2rem; color: var(--cs-silver-hi); }
html[data-theme="constelacion"] .inv-rsvp__note { background: #0F1534; color: #C7CEDD; }
html[data-theme="constelacion"] .inv-rsvp__change { color: var(--ink-soft); }

/* divider */
html[data-theme="constelacion"] .inv-divider.has-ornament { height: 28px; max-width: 240px; }
html[data-theme="constelacion"] .inv-divider__line { background: linear-gradient(90deg, transparent, rgba(201, 209, 222, .6), transparent); }
html[data-theme="constelacion"] .inv-divider__spark { color: var(--cs-silver-hi); }

/* pie: la constelación de la quinceañera */
html[data-theme="constelacion"] .inv-footer {
  background:
    var(--cs-constellation) 50% 18px / 150px auto no-repeat,
    radial-gradient(70% 55% at 50% 0%, rgba(96, 116, 206, .2), transparent 70%),
    var(--cs-sky) 0 0 / 280px 280px,
    var(--cs-deep);
  border-top: 1px solid rgba(201, 209, 222, .2);
  padding-top: 140px;
}
html[data-theme="constelacion"] .inv-footer__orn { color: var(--cs-silver-hi); }
html[data-theme="constelacion"] .inv-footer__text {
  font-family: var(--font-script); font-size: 3rem; line-height: 1.1;
  background: var(--cs-foil); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--cs-silver-hi);
}
html[data-theme="constelacion"] .inv-footer__date { color: var(--cs-silver); }
html[data-theme="constelacion"] .inv-footer__credit { color: var(--ink-soft); }
html[data-theme="constelacion"] .inv-footer__credit:hover { border-color: rgba(201, 209, 222, .2); color: var(--ink); }
html[data-theme="constelacion"] .inv-footer__brand { color: var(--ink); }
html[data-theme="constelacion"] .inv-footer__access { color: #C7CEDD; border-color: rgba(201, 209, 222, .2); }

/* barra de acciones, música y hoja inferior */
html[data-theme="constelacion"] .inv-actionbar {
  background: rgba(13, 18, 44, .86); border-color: rgba(201, 209, 222, .2);
  box-shadow: 0 20px 44px -16px rgba(0, 0, 0, .95), inset 0 1px 0 rgba(255, 255, 255, .06);
}
html[data-theme="constelacion"] .inv-actionbar__btn:not(.is-primary) { color: #E1E6F0; }
html[data-theme="constelacion"] .inv-actionbar__btn.is-primary { background: linear-gradient(135deg, #F6D5DE, #E8B9C6 50%, #D49CAD); color: var(--accent-ink); }
html[data-theme="constelacion"] .inv-music { background: rgba(13, 18, 44, .86); color: var(--ink); border-color: rgba(201, 209, 222, .25); }
html[data-theme="constelacion"] .inv-sheet__opt { background: #0F1534; }
html[data-theme="constelacion"] .inv-sheet__ico { background: #172046; }

/* ============================================================
   INTRO — sobre de noche (§19). La tarjeta que sale del sobre también es de noche, con tinta de plata,
   para que el acercamiento funda con el hero oscuro; el sobre clásico usa el mismo papel.
   ============================================================ */
html[data-theme="constelacion"] .inv-intro {
  --paper-base: #172046;
  --paper: #18214A;
  --paper-2: #1E2856;
  --paper-3: #121A3E;
  --paper-ink: #EEF1F8;
}
html[data-theme="constelacion"] .inv-intro__bg {
  background-image:
    radial-gradient(90% 60% at 18% 0%, rgba(120, 140, 220, .22), transparent 70%),
    radial-gradient(120% 80% at 50% 46%, transparent 40%, rgba(0, 0, 0, .6) 100%),
    var(--cs-sky);
}
html[data-theme="constelacion"] .inv-intro__eyebrow { color: var(--cs-silver); }
/* destello de marca al abrir: luz de luna (plata y rosa) en lugar del halo dorado, un poco más suave */
html[data-theme="constelacion"] .inv-intro__flash { opacity: .75; }
html[data-theme="constelacion"] .inv-intro__bloom { background: radial-gradient(circle, #fff 0%, rgba(214, 224, 255, .7) 35%, rgba(170, 186, 255, 0) 70%); }
html[data-theme="constelacion"] .inv-intro__flash-spark { filter: drop-shadow(0 0 18px rgba(241, 244, 249, .95)) drop-shadow(0 0 42px rgba(232, 185, 198, .65)); }
/* la misma estrella de la marca, en luz de luna: blanco → rosa empolvado → plata */
html[data-theme="constelacion"] .inv-intro__flash-spark stop:nth-child(1) { stop-color: #FFFFFF; }
html[data-theme="constelacion"] .inv-intro__flash-spark stop:nth-child(2) { stop-color: #F0C9D3; }
html[data-theme="constelacion"] .inv-intro__flash-spark stop:nth-child(3) { stop-color: #C9D1DE; }
html[data-theme="constelacion"] .sob__card {
  background-image:
    radial-gradient(120% 80% at 20% 0%, rgba(120, 140, 220, .3), rgba(120, 140, 220, 0) 60%),
    var(--cs-sky);
  background-size: auto, 280px 280px;
  box-shadow: 0 0 0 1px rgba(201, 209, 222, .25), 0 22px 46px -18px rgba(0, 0, 0, .8);
}
html[data-theme="constelacion"] .sob__card-in { border-color: rgba(201, 209, 222, .6); outline-color: rgba(201, 209, 222, .22); }
html[data-theme="constelacion"] .sob__card-spark { color: var(--cs-rose); }
html[data-theme="constelacion"] .sob__card-eyebrow { color: var(--cs-rose); opacity: 1; }
html[data-theme="constelacion"] .sob__card-title {
  font-size: calc(var(--card-w) * .2);
  background: var(--cs-foil); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  padding: 0 .2em .06em;
}
html[data-theme="constelacion"] .sob__card-to { border-top-color: rgba(201, 209, 222, .4); }
html[data-theme="constelacion"] .sob__card-to strong { color: var(--cs-silver-hi); }

/* ============================================================
   ESCRITORIO Y MOVIMIENTO REDUCIDO
   ============================================================ */
@media (min-width: 700px) {
  html[data-theme="constelacion"] .inv-page { box-shadow: 0 0 0 1px rgba(201, 209, 222, .18), 0 60px 140px -30px rgba(0, 0, 0, .95); }
  html[data-theme="constelacion"] .inv-hero__title { font-size: 6.8rem; }
}
@media (max-width: 380px) {
  html[data-theme="constelacion"] .inv-hero::before { left: -12px; }
  html[data-theme="constelacion"] .inv-hero::after { right: -14px; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-theme="constelacion"] .inv-fx { display: none; }
  html[data-theme="constelacion"] .inv-hero__title,
  html[data-theme="constelacion"] .inv-hero--framed .inv-hero__media::after { animation: none; }
}