* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Roboto', sans-serif;
            background-color: #010115;
            color: #daa520; 
            color: #daa520;
        }

        /* --- Encabezado y Navegación --- */
        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1rem 3rem;
            background-color: 00172D;
            border-bottom: 1px solid #222;
        }

        .logo {
            font-size: 1.8rem;
            color: #daa520; 
            font-weight: 700;
        }

        .nav-button {
            background: none;
            border: none;
            color: #daa520;
            font-size: 1rem;
            font-weight: 500;
            margin-left: 1.5rem;
            cursor: pointer;
            padding: 0.5rem 0;
            border-bottom: 2px solid transparent;
            transition: color 0.3s, border-color 0.3s;
        }

        .nav-button:hover {
            color: #fff;
        }

        .nav-button.active {
            color: #fff;
            border-bottom: 2px solid #daa520;
        }

        /* --- Contenido Principal y Secciones --- */
        .main-content {
            padding: 2rem 3rem;
        }

        .content-section {
            display: none; 
        }

        .content-section.active {
            display: block; /* Mostrar solo la sección activa */
        }

        .content-section h2 {
            font-size: 1.5rem;
            margin-bottom: 1.5rem;
            font-weight: 500;
        }

        /* --- Cuadrícula de Películas (Movie Grid) --- */
        .movie-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 1.5rem; /* Espacio entre tarjetas */
        }

        .movie-card {
            background-color: #00040761;
            border-radius: 8px;
            overflow: hidden;
            cursor: pointer;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            flex-basis: calc(50% - 1.5rem); /* 2 columnas en móvil */
            display: flex;
            flex-direction: column;
        }

        .movie-card:hover {
            transform: scale(1.05);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
            
        }

        .movie-card img {
            width: 100%;
            height: auto;
            aspect-ratio: 2 / 3; 
            object-fit: cover;
        }

        /* --- Controles de Búsqueda y Filtro --- */
        .search-controls {
            margin-bottom: 2rem;
        }

        #search-input {
            width: 100%;
            padding: 0.8rem 1rem;
            font-size: 1rem;
            background-color: #daa520;
            border: 1px solid #daa520;
            border-radius: 4px;
            color: #0b0b0b;
            margin-bottom: 1.5rem;
        }

        .alphabet-filter {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 0.5rem;
        }

        .alphabet-filter button {
            background-color: #333;
            border: none;
            color: #0f0f0e;
            cursor: pointer;
            font-size: 0.9rem;
            width: 35px;
            height: 35px;
            border-radius: 50%;
            transition: background-color 0.3s, transform 0.2s;
        }

        .alphabet-filter button:hover {
            background-color: #daa520;
        }

        .alphabet-filter button.active-filter {
            background-color: #daa520;
            transform: scale(1.1);
        }

        /* --- Mensaje de "No Resultados" --- */
        .no-results-message {
            display: none; /* Oculto por defecto */
            width: 100%;
            text-align: center;
            font-size: 1.2rem;
            padding: 3rem 0;
        }
        footer {
    /* centrar todo el texto dentro del footer */
    text-align: center;
    
    /* Estilos de apariencia */
    padding: 20px 0; /* Espacio vertical para que no se pegue al contenido */
    background-color: #040836; /* Fondo oscuro */
    color: #daa520; 
    font-family: 'Roboto', sans-serif; 
    font-size: 14px;
    /* Estilos para el enlace de GitHub */

}
.developer-credit {
    color: #daa520; /* <<--  DEFINE EL COLOR DEL ENLACE */
    text-decoration: underline;
    font-weight: 100;
    
    }


        /* --- Media Queries para Responsividad --- */

        /* Tablets pequeñas (a partir de 600px) - 3 columnas */
        @media (min-width: 600px) {
            .movie-card {
                flex-basis: calc(33.333% - 1.5rem);
            }
        }

        /* Tablets grandes (a partir de 900px) - 4 columnas */
        @media (min-width: 900px) {
            .movie-card {
                flex-basis: calc(25% - 1.5rem);
            }
        }

        /* Escritorios (a partir de 1200px) - 6 columnas */
        @media (min-width: 1200px) {
            .movie-card {
                flex-basis: calc(16.666% - 1.5rem);
            }
        }

        /* Ajustes de padding en pantallas pequeñas */
        @media (max-width: 600px) {
            .header, .main-content {
                padding: 1rem;
            }
            .logo {
                font-size: 1.5rem;
            }
            .nav-button {
                margin-left: 1rem;
            }
        }