/* style.css */

/* Definición de colores personalizados para fácil manejo y consistencia con tu logo azul */
:root {
    --color-primary-blue-dark: #3730A3; /* Un azul más oscuro para contrastes */
    --color-primary-blue: #4F46E5;    /* Tu azul principal (ej. indigo-600 de Tailwind) */
    --color-primary-blue-light: #6366F1; /* Un azul un poco más claro (ej. indigo-500) */
    --color-accent-blue: #818CF8;     /* Un azul más brillante para acentos (ej. indigo-400) */
    --color-dark-bg: #1a202c;         /* Fondo principal (gray-900) */
    --color-card-bg: #2d3748;         /* Fondo de tarjetas (gray-800) */
    --color-text-light: #e2e8f0;      /* Color de texto principal (gray-200) */
    --color-text-dimmed: #a0aec0;     /* Color de texto secundario (gray-500) */
}

/* Base Body Styles */
body {
    font-family: 'Inter', sans-serif;
    background-color: var(--color-dark-bg);
    color: var(--color-text-light);
    line-height: 1.6; /* Un poco más de espaciado para mejor lectura */
    overflow-x: hidden; /* Evita scroll horizontal no deseado */
}

/* Scrollbar Customization */
body::-webkit-scrollbar {
    width: 8px; /* inline-size en CSS Logical Properties */
}
body::-webkit-scrollbar-track {
    background: var(--color-dark-bg);
}
body::-webkit-scrollbar-thumb {
    background-color: var(--color-primary-blue-light);
    border-radius: 4px;
    border: 2px solid var(--color-dark-bg);
}

/* Headings Typography */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', sans-serif;
    color: var(--color-text-light); /* Default para que los títulos grandes sean blancos */
}

h2 {
    color: var(--color-primary-blue); /* Color principal para los títulos de sección */
}

/* Custom Tailwind Overrides/Extensions */
/* Usamos el @apply para combinar con las clases de Tailwind */
.text-accent-blue {
    color: var(--color-accent-blue);
}
.text-primary-blue {
    color: var(--color-primary-blue);
}
.text-primary-blue-light {
    color: var(--color-primary-blue-light);
}

/* Header Gradient Background */
.header-gradient {
    background: radial-gradient(circle at top left, var(--color-primary-blue-dark) 0%, transparent 40%),
                radial-gradient(circle at bottom right, #1f2937 0%, transparent 50%),
                var(--color-dark-bg);
    background-size: 80% 80%, 70% 70%, 100% 100%;
    background-repeat: no-repeat;
    background-position: top left, bottom right, center center;
    /* Puedes quitar la animación si no la quieres */
    animation: headerBackgroundAnimation 25s infinite alternate ease-in-out;
}

@keyframes headerBackgroundAnimation {
    0% { background-position: top left, bottom right, center center; }
    50% { background-position: top center, center right, center center; }
    100% { background-position: top left, bottom right, center center; }
}

/* Separator Line */
.divider {
    border-top: 1px solid var(--color-card-bg);
    margin-top: 5rem; /* Ajusta según el espacio deseado */
    margin-bottom: 5rem; /* Ajusta según el espacio deseado */
    width: 80%; /* Más estrecho para un toque elegante */
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
    opacity: 0.6;
}

/* Project Grid */
.project-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2.5rem; /* Más espacio entre proyectos */
    align-items: stretch; /* Asegura que las tarjetas tengan la misma altura si el contenido es variable */
}

/* Project Item (Card) */
.project-item {
    background-color: var(--color-card-bg);
    padding: 1.5rem;
    border-radius: 12px;
    box-shadow: 0 6px 12px rgba(0,0,0,0.25);
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease-in-out;
    border: 1px solid transparent;
}

.project-item:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 12px 24px rgba(var(--color-primary-blue-light-rgb), 0.3), 0 0 0 3px var(--color-primary-blue-light);
    border-color: var(--color-primary-blue-light);
}

.project-item img {
    width: 100%;
    height: 220px; /* Un poco más de altura para las imágenes */
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 1.2rem;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3); /* Sombra para la imagen */
}

.project-item .project-info {
    flex-grow: 1; /* Permite que el contenido se expanda */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.project-item h3 {
    color: var(--color-primary-blue-light); /* Títulos de proyectos en azul claro */
    margin-bottom: 0.5rem;
}

.project-item p {
    color: var(--color-text-dimmed); /* Texto de proyectos en gris suave */
    flex-grow: 1; /* Permite que el párrafo ocupe espacio y empuje el botón hacia abajo */
}

.view-project-btn {
    display: inline-flex;
    align-items: center;
    color: var(--color-accent-blue); /* Botones de proyecto en azul brillante */
    font-weight: 600;
    margin-top: 1rem; /* Espacio antes del botón */
    transition: color 0.2s ease-in-out;
}

.view-project-btn:hover {
    color: var(--color-primary-blue-light);
    transform: translateX(5px); /* Pequeño movimiento al hacer hover */
}

/* Filter Buttons */
.filter-btn {
    @apply px-5 py-2.5 rounded-full text-base font-medium bg-gray-700 text-gray-300 hover:bg-indigo-600 hover:text-white transition-all duration-300 ease-in-out;
    cursor: pointer;
    border: 1px solid transparent;
}

.filter-btn.active {
    @apply bg-indigo-500 text-white shadow-lg;
    border-color: var(--color-primary-blue-light);
    transform: scale(1.05); /* Ligeramente más grande cuando está activo */
}

/* Contact Buttons */
.contact-btn {
    @apply inline-flex items-center px-6 py-3 rounded-full text-lg font-semibold bg-indigo-600 text-white hover:bg-indigo-700 transition-colors duration-300 ease-in-out shadow-lg;
    border: 2px solid transparent;
}

.contact-btn:hover {
    border-color: var(--color-accent-blue);
    transform: translateY(-3px);
    box-shadow: 0 8px 16px rgba(var(--color-primary-blue-light-rgb), 0.4);
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
    animation: fadeIn 0.8s ease-out forwards;
    opacity: 0; /* Para asegurar que no se vea antes de la animación */
}

.animate-fade-in-down {
    animation: fadeInDown 0.8s ease-out forwards;
    opacity: 0;
}

.animate-fade-in-up {
    animation: fadeInUp 0.8s ease-out forwards;
    opacity: 0;
}

/* Delay for animations (adjust as needed) */
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; } /* Este delay ahora es para la sección de Proyectos */
/* ... puedes añadir más delays si tienes muchos elementos para animar en secuencia */
.delay-600 { animation-delay: 0.6s; } /* Este delay ahora es para la sección de Contacto */


/* Para definir los colores RGB para las sombras con color */
/* Estos deberían idealmente ir en un archivo de configuración de Tailwind si lo estuvieras usando */
/* Como estamos usando CSS plano, los definimos aquí */
:root {
    --color-primary-blue-light-rgb: 99, 102, 241; /* RGB de #6366F1 */
    --color-accent-blue-rgb: 129, 140, 248; /* RGB de #818CF8 */
}