/* =========================================================
   BASE · variables, reinicio, fondo mágico y tipografía
   ========================================================= */
:root {
    --fondo: #fff3f6;
    --tinta: #3b1d42;
    --tinta-suave: #7b5d82;
    --rosa: #e0457b;
    --rosa-fuerte: #c42565;
    --rosa-claro: #ffd6e2;
    --lila: #8e5bd6;
    --lila-claro: #e9dcff;
    --oro: #c98a6b;
    --oro-claro: #f6dfcf;
    --vidrio: rgba(255, 255, 255, .74);
    --vidrio-fuerte: rgba(255, 255, 255, .92);
    --borde: rgba(142, 91, 214, .16);
    --sombra: 0 10px 30px rgba(120, 50, 110, .14);
    --sombra-suave: 0 4px 14px rgba(120, 50, 110, .10);
    --radio: 22px;
    --radio-s: 14px;
    --cab: 56px;
    --titulo: "Playfair Display", "Georgia", "Times New Roman", serif;
    --texto: "Quicksand", "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --seguro-abajo: env(safe-area-inset-bottom, 0px);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
    margin: 0;
    font-family: var(--texto);
    font-weight: 500;
    color: var(--tinta);
    background: var(--fondo);
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
    -webkit-font-smoothing: antialiased;
}
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
h1, h2, h3, h4, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--lila); outline-offset: 2px; border-radius: 8px; }

/* Aurora de fondo */
.aurora { position: fixed; inset: 0; z-index: -2; overflow: hidden; background: linear-gradient(160deg, #fff6f0 0%, #ffe9f1 45%, #f1e6ff 100%); }
.aurora i { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; animation: flotar 22s ease-in-out infinite alternate; }
.aurora i:nth-child(1) { width: 55vmax; height: 55vmax; left: -18vmax; top: -22vmax; background: #ffb7d0; }
.aurora i:nth-child(2) { width: 48vmax; height: 48vmax; right: -16vmax; top: 18vh; background: #cdb4ff; animation-delay: -8s; }
.aurora i:nth-child(3) { width: 44vmax; height: 44vmax; left: 12vw; bottom: -26vmax; background: #ffd9b8; animation-delay: -14s; }
@keyframes flotar { to { transform: translate3d(5vmax, 3vmax, 0) scale(1.12); } }

/* Chispas que flotan (las crea ui.js) */
#chispas { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
#chispas b {
    position: absolute; width: 10px; height: 10px; opacity: 0;
    background: radial-gradient(circle, #fff 0 25%, rgba(255,255,255,0) 70%);
    clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
    animation: titilar var(--d, 5s) ease-in-out infinite; animation-delay: var(--r, 0s);
}
@keyframes titilar { 0%, 100% { opacity: 0; transform: scale(.4) rotate(0); } 50% { opacity: .95; transform: scale(1.5) rotate(90deg); } }

#confeti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 90; }

/* Cabecera fija con el botón de reinicio siempre arriba */
.cabecera {
    position: fixed; inset: 0 0 auto 0; height: var(--cab); z-index: 40;
    display: flex; align-items: center; gap: 8px;
    padding: 0 max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left));
    background: rgba(255, 255, 255, .62);
    backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3);
    border-bottom: 1px solid var(--borde);
}
.marca { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--tinta); min-width: 0; }
.marca-gema { color: var(--rosa); font-size: 1.1rem; animation: latir 3s ease-in-out infinite; }
.marca-texto { font-family: var(--titulo); font-style: italic; font-weight: 600; font-size: clamp(1rem, 4.4vw, 1.25rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@keyframes latir { 50% { transform: scale(1.35) rotate(45deg); color: var(--lila); } }
.cab-espacio { flex: 1; }

#app { position: fixed; inset: var(--cab) 0 0 0; }
.pantalla { position: absolute; inset: 0; display: none; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.pantalla.activa { display: block; animation: aparecer .35s ease both; }
@keyframes aparecer { from { opacity: 0; transform: translateY(8px); } }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
}