/* Base independiente de las funciones CSS modernas usadas por Tailwind 4. */
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; }
body { -webkit-text-size-adjust: 100%; }
[hidden], .hidden { display: none !important; }
#main, #view-sobre { height: 100vh; height: 100dvh; width: 100%; }
button, [role="button"] { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
[role="button"], button { cursor: pointer; }
button:focus-visible, [role="button"]:focus-visible { outline: 3px solid #0284c7; outline-offset: -4px; }
#nina, #nino { background: transparent; border: 0; padding: 0; }
#recuperar-video {
    position: fixed; inset: 0; z-index: 70;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0, 0, 0, .7); padding: 24px;
}
.recuperar-video-panel {
    max-width: 340px; padding: 24px; border-radius: 20px;
    background: #faf1e8; color: #262626; text-align: center; font: 16px sans-serif;
}
.recuperar-video-panel button { display: block; min-height: 44px; margin: 12px auto 0; padding: 10px; }
#invitacion {
    box-sizing: border-box; overflow-y: auto; overscroll-behavior: contain;
    padding: env(safe-area-inset-top, 0px) 12px calc(24px + env(safe-area-inset-bottom, 0px));
    color: #343728; background: #faf1e8;
}
#invitacion > * { flex-shrink: 0; }
#view-chisperos2 img { pointer-events: none; }
/* Colores de respaldo para navegadores sin oklch/color-mix. */
@supports not (color: oklch(50% .1 100)) {
    #view-sobre { background: #e7e5e4; }
    #view-sobre p { color: #57534e; }
    .text-white { color: white; }
    .text-slate-800 { color: #1e293b; }
    .text-sky-600 { color: #0284c7; }
    .text-pink-400 { color: #f472b6; }
    .text-lime-800 { color: #3f6212; }
    .bg-white { background: white; }
    #confirmar, #ubicacion { background: #fafaf9; }
}
@supports not (scale: 1) {
    .scale-120 { transform: scale(1.2); }
    .-translate-y-full { transform: translateY(-100%); }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition-duration: 0s !important; transition-delay: 0s !important; }
}