@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&display=swap');

/* Scrollbar Personalizado */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: #d6d3d1; /* stone-300 */
    border-radius: 20px;
    border: 2px solid transparent;
    background-clip: content-box;
}
.dark ::-webkit-scrollbar-thumb {
    background: #44403c; /* stone-700 */
}
::-webkit-scrollbar-thumb:hover {
    background: #a8a29e; /* stone-400 */
}

/* Evitar FOUC */
[x-cloak] { display: none !important; }

/* Focus Visible */
*:focus-visible {
    outline: 2px solid #10b981;
    outline-offset: 2px;
}

/* Animaciones Modal */
.modal-enter {
    transform: translateX(100%);
    opacity: 0;
}
.modal-enter-active {
    transform: translateX(0);
    opacity: 1;
    transition: all 300ms ease-out;
}
.modal-exit {
    transform: translateX(100%);
    opacity: 0;
    transition: all 200ms ease-in;
}