/* ============================================================
   Cheeky by Vølden · versión de boda (más elegante)
   La misma familia que la web de Cheeky (tinta morada, moflete,
   cristal y manchas de color), con tonos rosé y marfil, serif fina
   y mucho aire. Se carga la última en las páginas de la boda:
   invitados, mural de la tele, impresora y póster de los novios.
   ============================================================ */
@import url("https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700&display=swap");

:root {
  --papel: #FBF5F1; --papel-2: #EEDFDD; --blanco: #FFFBF8;
  --tinta: #2B2240; --tinta-suave: #6E6380;
  --oliva: #2B2240;                 /* botones principales: tinta de Cheeky */
  --oro: #C46A55;                   /* rosé: el naranja de Cheeky, en versión boda */
  --oro-claro: #EFC3B3;             /* moflete */
  --noche: #1C1627; --noche-2: #2B2240;
  --error: #B4432F;
  --radio: 22px;
  --sans: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --lila: #CFC2EE; --menta: #BFE6D8;
  --logo-a: #EFC3B3; --logo-b: #2B2240;
  --cristal: rgba(255, 255, 255, .62); --cristal-linea: rgba(255, 255, 255, .85);
  --sombra: 0 14px 40px -18px rgba(43, 34, 64, .3);
}

/* ---------- logo de Cheeky (discreto) ---------- */
.firma-cheeky { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 18px; opacity: .85; text-decoration: none; color: var(--tinta-suave); }
.firma-cheeky small { font-size: .62rem; letter-spacing: .22em; text-transform: uppercase; }
.firma-cheeky svg { width: 92px; height: auto; display: block; }

/* ---------- botones ---------- */
.btn { font-family: var(--sans); font-weight: 600; letter-spacing: .01em; }
.btn:not(.linea):not(.peligro):not(.oro) {
  background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 60%), var(--oliva); color: var(--blanco);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 10px 24px -12px rgba(43, 34, 64, .7);
}
.btn.oro {
  background: linear-gradient(180deg, rgba(255, 255, 255, .32), rgba(255, 255, 255, 0) 58%), var(--oro); color: #FFFBF8;
  border: 1px solid rgba(255, 255, 255, .45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 12px 26px -12px rgba(196, 106, 85, .85);
}
.btn.linea { background: rgba(255, 255, 255, .55); color: var(--tinta); box-shadow: inset 0 0 0 1px rgba(43, 34, 64, .2); }
:focus-visible { outline: 2px solid var(--oro); outline-offset: 3px; border-radius: 6px; }
.spinner { border-color: var(--oro-claro); border-top-color: var(--oro); }
.aviso-demo { background: var(--oro-claro); color: var(--tinta); }

/* ============================================================
   Móvil de los invitados (index.html)
   ============================================================ */
body.p-invitados { background: var(--papel); position: relative; }
body.p-invitados::before {
  content: ""; position: fixed; inset: -10vmax; z-index: -1; pointer-events: none;
  background:
    radial-gradient(34vmax 34vmax at 6% 4%, rgba(239, 195, 179, .7), transparent 70%),
    radial-gradient(30vmax 30vmax at 100% 38%, rgba(207, 194, 238, .55), transparent 70%),
    radial-gradient(26vmax 26vmax at 20% 100%, rgba(191, 230, 216, .5), transparent 70%);
  filter: blur(18px);
}
.p-invitados .novios { font-weight: 400; letter-spacing: -.01em; }
.p-invitados .novios em { color: var(--oro); font-style: italic; }
.p-invitados .fecha { letter-spacing: .32em; font-weight: 500; color: var(--oro); }
.p-invitados .como > div {
  background: var(--cristal); border: 1px solid var(--cristal-linea); border-radius: 18px; padding: 10px 4px 9px;
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: inset 0 1px 0 #fff, var(--sombra);
}
.p-invitados .como b { color: var(--oro); }
.p-invitados .zona-foto { background: var(--cristal); border-color: rgba(196, 106, 85, .55); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.p-invitados .consejos span { background: var(--cristal); border: 1px solid var(--cristal-linea); }
.p-invitados .campo input, .p-invitados .objeto-libre, .p-invitados textarea {
  background: rgba(255, 255, 255, .78); border-color: rgba(43, 34, 64, .12);
}
.p-invitados .campo input:focus, .p-invitados .objeto-libre:focus { border-color: var(--oro); box-shadow: 0 0 0 4px rgba(196, 106, 85, .18); }
.p-invitados .objetos button { background: rgba(255, 255, 255, .72); border-color: rgba(43, 34, 64, .1); }
.p-invitados .objetos button.on { border-color: var(--oro); background: #FBEAE4; box-shadow: 0 0 0 2px var(--oro) inset; }
.p-invitados .impresion.lista { background: #E9F5F0; }

/* ============================================================
   Mural de la tele (muro.html)
   ============================================================ */
body.p-muro { background: radial-gradient(ellipse at 30% 10%, #3a2d55, #1C1627 70%) !important; }
body.p-muro::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(40vmax 40vmax at 95% 0%, rgba(239, 195, 179, .16), transparent 70%),
    radial-gradient(36vmax 36vmax at 70% 110%, rgba(207, 194, 238, .14), transparent 70%);
}
.p-muro .poster { background: #FFFBF8 !important; }
.p-muro .poster .vacio { color: var(--oro) !important; }
.p-muro .qr { background: rgba(255, 251, 248, .9); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: inset 0 1px 0 #fff, 0 2vh 6vh -2vh #0009; }
.p-muro .qr .firma-cheeky { align-items: flex-start; margin-top: 1vh; }
.p-muro .qr .firma-cheeky svg { width: 11vh; }
.p-muro .qr .firma-cheeky small { font-size: 1.1vh; }

/* ============================================================
   Estación de impresión y póster de los novios
   ============================================================ */
body.p-impresora { background: radial-gradient(ellipse at 30% 0%, #3a2d55, #1C1627 70%); }
body.p-poster { background: var(--papel); }
body.p-poster::before {
  content: ""; position: fixed; inset: -10vmax; z-index: -1; pointer-events: none;
  background:
    radial-gradient(34vmax 34vmax at 4% 0%, rgba(239, 195, 179, .6), transparent 70%),
    radial-gradient(30vmax 30vmax at 100% 60%, rgba(207, 194, 238, .45), transparent 70%);
  filter: blur(18px);
}
.p-poster .item { border-radius: 18px; box-shadow: 0 10px 28px -18px rgba(43, 34, 64, .45); }
.p-poster .item.on, .p-poster .item.sel { border-color: var(--oro); }