/* Mis 12 meses — base: colores, tipografía, escenario, marco de teléfono en computadora, botones, hojas (sheets),
   avisos y visor. Todo bajo html.m12 (prototipo aislado). Paleta elegida por los papás (variables que pone
   js/palette.js: --bg, --ink, --accent…) + el dorado común. Por dentro todo se mide contra el marco (.app es un
   contenedor de tamaño: cqw/cqh), nunca contra la ventana. */
.m12 {
  --bg: #FFF8F6; --ink: #4A3438; --ink-2: #7A5F64; --line: #F1DCDD; --accent: #C98A9A; --accent-2: #A86C7C; --soft: #FBEAEC;
  --wall: #FBEDEE; --wall-2: #F6DCE0;
  --gold: #D4AF5A; --gold-d: #A9873A; --gold-l: #F3DFA6; --on-gold: #3B2A1E;
  --shadow: 0 14px 36px rgba(74, 52, 56, .18);
  --radius: 24px;
  --font-d: "Cormorant Garamond", Georgia, serif;
  --font-s: "Great Vibes", "Cormorant Garamond", cursive;
  --font-b: "Nunito Sans", "Nunito", system-ui, sans-serif;
  --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px);
}
.m12 *, .m12 *::before, .m12 *::after { box-sizing: border-box; }
.m12 body { height: 100%; overflow: hidden; color: var(--ink); font: 400 16px/1.45 var(--font-b); -webkit-tap-highlight-color: transparent; overscroll-behavior: none; }
/* ---------- computadora: el cuarto, difuminado, alrededor del teléfono ---------- */
.m12 .room { position: fixed; inset: 0; z-index: 0; overflow: hidden; background:
  radial-gradient(40% 35% at 18% 22%, rgba(255, 250, 235, .9), transparent 70%),
  linear-gradient(180deg, var(--wall) 0%, var(--wall) 62%, var(--wall-2) 62.5%, var(--wall-2) 100%); }
.m12 .room::before { /* globos y guirnalda desenfocados */
  content: ""; position: absolute; inset: 0;
  background-image:
    radial-gradient(ellipse 4% 5.5% at 12% 30%, rgba(212, 175, 90, .55), transparent 70%), radial-gradient(ellipse 5% 7% at 20% 52%, var(--accent), transparent 72%),
    radial-gradient(ellipse 4.5% 6% at 82% 26%, var(--gold-l), transparent 72%), radial-gradient(ellipse 5% 7% at 88% 50%, var(--accent), transparent 72%),
    radial-gradient(ellipse 3.5% 5% at 74% 70%, rgba(212, 175, 90, .5), transparent 70%), radial-gradient(ellipse 3.5% 5% at 26% 74%, var(--gold-l), transparent 70%);
  opacity: .55; filter: blur(10px); }
.m12 .app { position: fixed; inset: 0; z-index: 1; overflow: hidden; isolation: isolate; container-type: size; container-name: marco; transition: opacity .5s ease; }
/* (mismo marco de teléfono que los demás diseños: Misión Estrella, El Nido, Caja Musical…) */
@media (min-width: 560px) and (min-height: 560px) {
  .m12 .app { inset: auto; left: 50%; top: 50%; width: min(430px, 100vw - 32px); height: min(932px, 100dvh - 40px); transform: translate(-50%, -50%);
    border-radius: 36px; box-shadow: 0 0 0 10px #FFFDF8, 0 0 0 11px rgba(212, 175, 90, .55), 0 30px 80px rgba(74, 52, 56, .28), 0 0 90px rgba(255, 230, 190, .35); }
}
.m12.is-showcase .app { inset: 0 !important; width: auto !important; height: auto !important; transform: none !important; border-radius: 0 !important; box-shadow: none !important; }
.m12 .stage { position: absolute; inset: 0; overflow: hidden; background: linear-gradient(180deg, var(--wall), var(--wall-2)); }
.m12 .gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; outline: none; }
.m12 .poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.m12.is-ready .poster { animation: m12-fade-out .6s ease .25s forwards; }
@keyframes m12-fade-out { to { opacity: 0; visibility: hidden; } }
.m12 .veil { position: absolute; inset: 0; background: var(--bg); opacity: 0; pointer-events: none; transition: opacity .22s ease; z-index: 3; }
.m12 .veil.is-on { opacity: 1; }
.m12 .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.m12 .noscript { position: fixed; inset: auto 16px 16px; padding: 16px; border-radius: 16px; background: var(--bg); color: var(--ink); }
.m12 .ui { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.m12 .ui > * { pointer-events: auto; }
.m12 button { font: inherit; color: inherit; }
.m12 :focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

/* (sólo para generar la imagen OG: ?showcase=1&still=1&og=1) */
.m12 .og-title { position: absolute; left: 0; right: 0; top: 26px; z-index: 4; text-align: center; pointer-events: none; }
.m12 .og-title p { margin: 0; font: 600 40px/1 var(--font-d); color: var(--ink); letter-spacing: .02em; }
.m12 .og-title strong { display: block; margin-top: 4px; font: 400 92px/1.05 var(--font-s); background: linear-gradient(180deg, #F3DFA6, #D4AF5A 55%, #A9873A); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 1px rgba(120, 90, 40, .25)); }

/* ---------- botones ---------- */
.m12 .gbtn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 18px; border: 1px solid var(--line); border-radius: 999px; background: #FFFDF9; color: var(--ink); font: 700 15px/1.1 var(--font-b); letter-spacing: .01em; text-decoration: none; cursor: pointer; box-shadow: 0 2px 8px rgba(74, 52, 56, .08); transition: transform .12s ease, box-shadow .12s ease, background .2s; }
.m12 .gbtn:active { transform: translateY(1px); }
.m12 .gbtn.is-primary { border-color: transparent; background: linear-gradient(180deg, #F0D58F, var(--gold) 60%, #C49E48); color: var(--on-gold); box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 6px 16px rgba(169, 135, 58, .35); }
.m12 .gbtn.is-soft { background: rgba(255, 253, 249, .75); }
.m12 .gbtn.is-big { min-height: 52px; font-size: 16px; padding: 0 24px; }
.m12 .gbtn.is-small { min-height: 44px; font-size: 14px; padding: 0 14px; }
.m12 .gbtn[disabled] { opacity: .45; cursor: default; }
.m12 .round-btn { display: inline-grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 1px solid rgba(212, 175, 90, .35); border-radius: 50%; background: rgba(255, 253, 249, .92); color: var(--ink); cursor: pointer; box-shadow: 0 4px 14px rgba(74, 52, 56, .14); }
.m12 .round-btn[disabled] { opacity: .4; cursor: default; }

/* ---------- hojas (confirmación, información, álbum) ---------- */
.m12 .sheet { position: absolute; inset: 0; z-index: 30; display: flex; align-items: flex-end; justify-content: center; background: rgba(74, 52, 56, 0); pointer-events: auto; transition: background .35s ease; }
.m12 .sheet.is-on { background: rgba(74, 52, 56, .2); }
.m12 .sheet.is-rsvp.is-on { background: rgba(74, 52, 56, 0); } /* (su globo 3D se ve arriba) */
.m12 .sheet-panel { display: flex; flex-direction: column; width: 100%; max-height: 78cqh; border-radius: var(--radius) var(--radius) 0 0; background: var(--bg); box-shadow: var(--shadow); transform: translateY(105%); transition: transform .4s cubic-bezier(.2, .9, .25, 1); overflow: hidden; padding-bottom: var(--safe-b); border-top: 1px solid rgba(212, 175, 90, .45); }
.m12 .sheet.is-on .sheet-panel { transform: none; }
.m12 .sheet.is-rsvp .sheet-panel { max-height: 64cqh; }
.m12 .sheet.is-details .sheet-panel { max-height: 92cqh; }
.m12 .sheet.is-album .sheet-panel { max-height: 86cqh; }
.m12 .sh-head { display: flex; align-items: flex-start; gap: 12px; padding: 16px 16px 10px 20px; border-bottom: 1px solid var(--line); }
.m12 .sh-head > div:first-child, .m12 .sh-titles { flex: 1; min-width: 0; }
.m12 .sh-head.is-sticky { flex-wrap: wrap; }
.m12 .sh-head .chips { flex-basis: 100%; }
.m12 .kick { margin: 0; font: 600 22px/1.15 var(--font-d); color: var(--ink); }
.m12 .sub { margin: 2px 0 0; font-size: 14px; color: var(--ink-2); }
.m12 .sh-titles h2 { margin: 2px 0 0; font: 400 34px/1.1 var(--font-s); color: var(--gold-d); }
.m12 .sh-body, .m12 .rv-body { flex: 1; overflow: auto; padding: 12px 20px 16px; overscroll-behavior: contain; }
.m12 .sh-bar { display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 10px 16px 14px; border-top: 1px solid var(--line); background: var(--bg); }
.m12 .sh-bar .dead { margin: 0; text-align: center; font-size: 14px; font-weight: 700; color: var(--ink-2); }
.m12 .c-close { flex: none; width: 42px; height: 42px; box-shadow: none; background: var(--soft); }
.rm.m12 .sheet-panel { transition: opacity .2s ease; transform: none; opacity: 0; }
.rm.m12 .sheet.is-on .sheet-panel { opacity: 1; }

/* ---------- avisos ---------- */
.m12 .toast { position: absolute; left: 50%; top: calc(var(--safe-t) + 72px); z-index: 40; width: max-content; max-width: 88cqw; padding: 12px 18px; border-radius: 18px; border: 1px solid rgba(212, 175, 90, .45); background: var(--bg); color: var(--ink); font: 600 19px/1.25 var(--font-d); text-align: center; box-shadow: var(--shadow); transform: translate(-50%, -12px); opacity: 0; transition: opacity .3s ease, transform .3s ease; pointer-events: none; }
.m12 .toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.m12 .notice { position: absolute; inset: 0; z-index: 50; display: grid; place-items: center; padding: 20px; background: rgba(74, 52, 56, .4); opacity: 0; transition: opacity .25s ease; pointer-events: auto; }
.m12 .notice.is-on { opacity: 1; }
.m12 .notice-card { width: min(380px, 100%); padding: 22px 20px 18px; border-radius: var(--radius); background: var(--bg); text-align: center; box-shadow: var(--shadow); border: 1px solid rgba(212, 175, 90, .45); }
.m12 .notice-card h2 { margin: 8px 0 6px; font: 600 26px/1.15 var(--font-d); }
.m12 .notice-card p { margin: 0 0 10px; color: var(--ink-2); }
.m12 .notice-ic { display: inline-grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; background: #E6F4E3; color: #2F7A3A; }
.m12 .notice-msg { margin: 0 0 14px; padding: 12px; border-radius: 14px; background: #fff; text-align: left; white-space: pre-wrap; font: 600 14px/1.45 var(--font-b); color: var(--ink); max-height: 30cqh; overflow: auto; }
.m12 .notice-card .gbtn { width: 100%; }

/* ---------- visor de fotos ---------- */
.m12 .viewer { position: absolute; inset: 0; z-index: 45; background: rgba(46, 32, 34, .94); opacity: 0; transition: opacity .25s ease; pointer-events: auto; transform: translateY(var(--drag, 0)); }
.m12 .viewer.is-on { opacity: 1; }
.m12 .v-track { display: flex; width: 100%; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.m12 .v-track::-webkit-scrollbar { display: none; }
.m12 .v-slide { flex: 0 0 100%; height: 100%; margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 64px 16px 72px; scroll-snap-align: center; }
.m12 .v-frame { max-width: 100%; max-height: calc(100% - 40px); padding: 10px 10px 34px; border-radius: 4px; background: #FFFDF9; box-shadow: 0 16px 40px rgba(0, 0, 0, .35); }
.m12 .v-frame.is-polaroid { padding: 0; background: none; }
.m12 .v-frame img, .m12 .v-frame canvas { display: block; max-width: calc(100cqw - 64px); max-height: calc(100cqh - 190px); object-fit: contain; }
.m12 .v-frame canvas { width: auto; height: auto; max-height: calc(100cqh - 170px); aspect-ratio: 512 / 616; border-radius: 3px; }
.m12 .v-slide figcaption { color: #FFF6EA; font: 400 32px/1.1 var(--font-s); }
.m12 .v-count { position: absolute; left: 50%; bottom: calc(var(--safe-b) + 22px); margin: 0; transform: translateX(-50%); color: #FFF6EA; font-weight: 700; }
.m12 .v-nav { position: absolute; top: 50%; transform: translateY(-50%); }
.m12 .v-prev { left: 12px; } .m12 .v-next { right: 12px; }
.m12 .v-close { position: absolute; top: calc(var(--safe-t) + 12px); right: 12px; }