/* sytle.css */

/* Estilos base para el scroll suave en todo el documento */
html {
    scroll-behavior: smooth;
}

/* Personalización de la barra de desplazamiento (Scrollbar) 
   para que coincida con la estética 'barro' */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #f5f3ef; /* Coincide con barro-100 */
}

::-webkit-scrollbar-thumb {
    background: #b5957b; /* Coincide con barro-500 */
    border-radius: 5px;
    border: 2px solid #f5f3ef;
}

::-webkit-scrollbar-thumb:hover {
    background: #8a6a56; /* Coincide con barro-700 */
}

/* Clase de utilidad personalizada para las animaciones de scroll.
   En Tailwind podríamos usar 'transition-all duration-700 ease-out',
   pero aquí definimos el comportamiento base para limpiar el HTML.
*/
.reveal-on-scroll {
    transition: all 0.8s cubic-bezier(0.22, 1, 0.36, 1); /* Curva suave */
    will-change: transform, opacity;
}

/* Ajuste visual para el foco en botones/inputs para accesibilidad */
:focus-visible {
    outline: 2px solid #d97706; /* Fuego-500 */
    outline-offset: 2px;
}