.EspecialDeTemporada {
    color: red;
}

.EspecialDeTemporada-p{
    p {
        color: red;
    }
}

.EspecialDeTemporada-p:hover {
    p {
        color: white;
    }
}

.especialdetemporada {

    /* Links */

    a {
        color: #749af3;
        text-decoration: none; /* removes underline from links */
    }
    
    a:visited {
        color: #749af3;
    }
    
    a:hover,
    a:focus {
        color: #749af3;
    }
    
    a:active {
        color: #749af3;
    }

}

/* Imágenes */


figure.image-container {
    float: left; /* Alinea la imagen y el pie de foto a la izquierda(no) del texto */
    width: 45vw; /* Tamaño reducido por defecto */
    /* margin: 10px 10px 100px 0; Espacio alrededor de la imagen */
    text-align: center; /* Centra el pie de foto */
    border-radius: 12px; /* Bordes redondeados para un estilo más moderno */
    overflow: hidden; /* Asegura que los bordes redondeados no se corten */
    position: relative; /* Permite la posición del pie de foto */
}

figure.image-container img {
    border-radius: 12px; /* Bordes redondeados de la imagen */
    box-shadow: 
        inset 0 2px 5px rgba(0, 0, 0, 0.15), /* Sombra interior sutil */
        0 4px 12px rgba(0, 0, 0, 0.2); /* Sombra exterior más prominente */
    width: 100%; /* Imagen ocupa el 100% del ancho del contenedor */
    height: auto; /* Mantiene la proporción */
    max-width: 100%; /* La imagen no excederá el ancho del contenedor */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Efectos suaves de zoom y sombra */
}

figure.image-container img:hover {
    transform: scale(1.03); /* Efecto de zoom sutil al pasar el mouse */
    box-shadow: 
        inset 0 4px 10px rgba(0, 0, 0, 0.25), /* Sombra interior más prominente al hacer hover */
        0 8px 16px rgba(0, 0, 0, 0.3); /* Sombra exterior más prominente al hacer hover */
}

figure.image-container figcaption {
    margin-top: 8px; /* Separación del pie de foto */
    font-size: 0.9rem; /* Tamaño del texto del pie de foto */
    color: #ddd; /* Color gris claro para el texto del pie de foto */
    font-weight: 300; /* Peso de fuente más ligero */
    line-height: 1.4; /* Mejora la legibilidad del pie de foto */
}

hr {
    border: 0; /* Elimina el borde predeterminado */
    border-top: 2px solid #002b36; /* Línea horizontal azul muy oscuro, casi negro */
    margin: 3rem 0; /* Espacio adicional arriba y abajo de la línea */
}

/* Consulta de medios para pantallas grandes */
@media (min-width: 768px) {
    figure.image-container {
        /*width: 300px; /* Tamaño mayor en pantallas grandes */
        margin: 0 4rem 1rem 0; /* Espacio alrededor de la imagen */
    }

    hr {
        clear: both; /* Asegura que la línea horizontal esté por debajo de la imagen */
    }
}

/* Consulta de medios para pantallas pequeñas */
@media (max-width: 767px) {
    figure.image-container {
        float: none; /* La imagen no flota */
        width: 100%; /* Imagen ocupa el 100% del ancho del contenedor */
        margin: 0 2rem 1rem 0; /* Espacio solo abajo de la imagen */
        text-align: center; /* Centra la imagen y el pie de foto */
    }

    hr {
        clear: both; /* Asegura que la línea horizontal esté por debajo de la imagen en pantallas pequeñas */
    }
}