/* Reset básico y estilos generales */
body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
    color: #333;
    line-height: 1.6;
    background: #343379 url('./bg_horoscopo.jpg') no-repeat;
    background-size: cover; /* Asegura que la imagen cubra todo el fondo */
    background-position: center center; /* Centra la imagen de fondo */
    background-attachment: fixed; /* Opcional: para que el fondo sea fijo al hacer scroll */
}

h2 { /* Este h2 es para los h2 fuera del modal */
    color: #fff;
    text-align: center;
    margin: 0px;
}

main {
    padding: 20px;
    max-width: 1200px;
    margin: 20px auto;
}

/* Estilos de la parrilla de signos */
.zodiac-grid-container {
    display: grid;
    /* Mantiene 150px como mínimo. Auto-fit intentará poner el máximo de columnas. */
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 20px;
    margin-top: 20px;
    padding: 20px;
    background-color: rgb(255, 255, 255, 0.2);
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.zodiac-grid-item {
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 15px;
    text-align: center;
    cursor: pointer;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

    .zodiac-grid-item:hover {
        transform: translateY(-5px);
        box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    }

    .zodiac-grid-item img {
        width: 100%; /* La imagen ocupa el 100% del ancho disponible del item */
        max-width: 150px; /* Pero nunca será más ancha de 150px */
        height: auto;
        object-fit: cover;
        margin-bottom: 0px;
        border-radius: 8px;
    }

    .zodiac-grid-item h3 {
        margin: 10px 0 0; /* Añadido un pequeño margen superior para separar de la imagen */
        color: #555;
        font-size: 1.2em;
    }

/* Estilos del Overlay (Ventana Modal) */
.overlay {
    display: none; /* Oculto por defecto */
    position: fixed; /* Fijo en la pantalla */
    z-index: 1000; /* Por encima de todo */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* Permite scroll si el contenido es largo */
    background-color: rgba(0,0,0,0.7); /* Fondo oscuro semitransparente */
}

    /* Nueva clase para cuando el overlay está activo y visible */
    .overlay.active {
        display: flex; /* Ahora solo se muestra cuando tiene la clase 'active' */
        justify-content: center;
        align-items: center;
    }

.modal-content {
    background-color: #fff;
    margin: auto;
    padding: 30px; /* Mantén el padding general del modal */
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    position: relative;
    max-width: 90%; /* Ancho máximo del modal */
    width: 800px; /* Ancho preferido */
    animation: fadeIn 0.3s ease-out; /* Animación de aparición */
}

/* Estilos para la sección superior del modal (perfil + descripción) */
.modal-top-section {
    display: flex;
    align-items: center; /* Alinea verticalmente los elementos (perfil y descripción) */
    justify-content: space-between; /* Empuja el perfil a la izquierda y la descripción a la derecha */
    gap: 20px; /* Espacio entre el perfil y la descripción */
    margin-bottom: 30px; /* Espacio debajo de esta sección y antes de los productos */
    padding-bottom: 20px; /* Pequeño padding inferior */
    border-bottom: 1px solid #eee; /* Separador sutil */
    flex-wrap: wrap; /* Permite que los elementos se apilen en pantallas pequeñas */
}

/* Estilos del Perfil del Signo en el Modal */
.modal-profile-header {
    display: flex;
    align-items: center; /* Centra verticalmente la imagen y el texto */
    gap: 20px; /* Espacio entre la imagen y el nombre */
    flex-shrink: 0; /* Evita que el perfil se encoja demasiado */
}

#modal-sign-image {
    width: 90px; /* Tamaño de la imagen circular */
    height: 90px;
    border-radius: 50%; /* Hace la imagen circular */
    object-fit: cover; /* Asegura que la imagen cubra el área sin distorsionarse */
    border: 4px solid #4CAF50; /* Borde distintivo */
    box-shadow: 0 4px 10px rgba(0,0,0,0.15); /* Sombra para profundidad */
    background-color: #f0f0f0; /* Fondo por si la imagen no carga */
}

.modal-profile-header h2 {
    margin: 0; /* Elimina márgenes por defecto del h2 */
    font-size: 2.2em; /* Tamaño de fuente más grande para el nombre del signo (revertido a em) */
    color: #333; /* Color oscuro para el nombre */
    text-transform: uppercase; /* Opcional: para que el nombre esté en mayúsculas */
    letter-spacing: 1px; /* Espaciado entre letras */
}

/* Estilos para el texto descriptivo del match */
.match-description {
    border-left: 1px solid #555555;
    padding-left: 10px;
    flex: 1; /* Permite que el texto descriptivo ocupe el espacio restante */
    text-align: left; /* Alineación a la izquierda para el texto */
    font-size: 0.875em; /* Revertido a em */
    color: #666;
    line-height: 1.6;
    min-width: 300px; /* Asegura que el texto tenga un ancho mínimo antes de apilarse */
}

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

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.close-button {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    position: absolute;
    top: 10px;
    right: 20px;
    cursor: pointer;
}

    .close-button:hover,
    .close-button:focus {
        color: #333;
        text-decoration: none;
        cursor: pointer;
    }

.product-display {
    display: flex;
    flex-wrap: wrap; /* Permite que los items se envuelvan en pantallas pequeñas */
    gap: 20px;
    justify-content: center;
    margin-top: 0; /* Aseguramos que no haya margen superior si el .modal-top-section ya tiene margin-bottom */
}

.product-item {
    flex: 1; /* Ocupa el espacio disponible */
    min-width: 280px; /* Ancho mínimo para cada item */
    border: 1px solid #eee;
    padding: 15px;
    border-radius: 8px;
    text-align: center;
    background-color: #fcfcfc;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

    .product-item h4 { /* Nombre específico del producto (ahora el título principal) */
        color: #333; /* Puedes ajustar el color si quieres */
        margin-top: 0; /* Ajustado para que no haya margen superior si es el primer elemento */
        margin-bottom: 10px; /* Espacio debajo del nombre */
        font-size: 1.3em; /* Le damos el tamaño del antiguo h3 para que sea más prominente */
        font-weight: bold; /* Opcional: para que se vea más como un título */
    }

    .product-item img {
        max-width: 75%;
        height: auto;
        border-radius: 5px;
        margin-bottom: 10px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }

    .product-item p { /* Descripción del producto */
        font-size: 0.9em;
        color: #666;
        text-align: left;
    }

/* Media Queries para responsividad */

/* Para pantallas medianas (tablets, etc.) */
@media (max-width: 768px) {
    .zodiac-grid-container {
        gap: 15px;
    }

    .zodiac-grid-item h3 {
        font-size: 1em;
    }

    .modal-content {
        padding: 20px;
        max-width: 95%;
    }

    /* Estilos responsivos para la sección superior del modal */
    .modal-top-section {
        flex-direction: column; /* Apila el perfil y la descripción */
        align-items: center; /* Centra los elementos apilados */
        gap: 15px; /* Reduce el espacio */
        margin-bottom: 25px;
        padding-bottom: 15px;
    }

    .modal-profile-header {
        justify-content: center; /* Centra el perfil (imagen + nombre) cuando está apilado */
    }

    .match-description {
        text-align: center; /* Centra el texto descriptivo cuando está apilado */
        min-width: unset; /* Elimina el min-width para que se ajuste al 100% */
    }

    .product-display {
        flex-direction: column; /* Apila los productos en pantallas pequeñas */
        gap: 15px;
    }

    .product-item {
        min-width: unset; /* Elimina el ancho mínimo para que se ajuste */
    }
}

/* Para pantallas muy pequeñas (móviles) */
@media (max-width: 500px) { /* Nuevo breakpoint para forzar una columna */
    .zodiac-grid-container {
        grid-template-columns: 1fr; /* ¡Fuerza una sola columna! */
        gap: 10px;
    }

    header h1 {
        font-size: 1.8em;
    }

    header p {
        font-size: 0.9em;
    }

    h2 { /* Este h2 es para los h2 fuera del modal */
        font-size: 1.5em;
    }

    .zodiac-grid-item h3 {
        font-size: 0.9em;
    }

    .modal-content {
        padding: 15px;
    }

    .close-button {
        font-size: 24px;
        top: 5px;
        right: 10px;
    }

    /* Estilos responsivos para el perfil del modal (dentro de .modal-top-section) */
    #modal-sign-image {
        width: 70px; /* Reduce el tamaño de la imagen circular */
        height: 70px;
        border-width: 3px; /* Reduce el grosor del borde */
    }

    .modal-profile-header h2 {
        font-size: 1.8em; /* Reduce el tamaño de la fuente */
    }

    .match-description {
        font-size: 0.95em; /* Reduce el tamaño de la fuente en móviles */
        padding: 0 10px; /* Reduce el padding lateral */
    }

    .product-item h3 {
        font-size: 1.1em;
    }

    .product-item h4 {
        font-size: 1em;
    }

    .product-item p {
        font-size: 0.8em;
    }
}