/* Custom styles for SOFC4GREENGRID microsite */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&family=Open+Sans:wght@300;400;500;600;700&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

/* Estilos base */
html {
    scroll-behavior: smooth;
}

body {
    @apply font-sans text-gray-800 bg-white;
}

/* Tipografía */
h1, h2, h3, h4, h5, h6 {
    @apply font-sans font-bold text-gray-900;
    font-family: 'Montserrat', sans-serif;
}

body, p, a, li, span, div {
    font-family: 'Open Sans', sans-serif;
}

/* Justificar texto */
p, li, .prose, .text-justify {
    text-align: justify;
    text-justify: inter-word;
}

/* Ajuste para listas */
ul, ol {
    @apply pl-6;
}

ul li, ol li {
    @apply mb-2;
}

/* Asegurar que los enlaces mantengan su alineación */
a {
    @apply inline-block;
}

/* Ajuste para textos centrados específicos */
.text-center, .text-center * {
    text-align: center !important;
    text-justify: auto !important;
}

/* Ajuste para la navegación */
#nav-menu a {
    @apply inline-block;
}

/* Animaciones personalizadas */
.animate-pulse-slow {
    animation: pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
}

.animate-float {
    animation: float 6s ease-in-out infinite;
}

/* Efectos hover */
.hover-scale {
    @apply transition-transform duration-300 hover:scale-105;
}

/* Personalización de scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    @apply bg-gray-100;
}

::-webkit-scrollbar-thumb {
    @apply bg-green-600 rounded-full;
}

::-webkit-scrollbar-thumb:hover {
    @apply bg-green-700;
}

/* Example hover effect for collaborator logos */
img:hover {
  filter: brightness(1.1);
  transform: scale(1.05);
  transition: transform 0.2s ease, filter 0.2s ease;
}