@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/*Scroll lateral-----------------------------------------------------------------------*/

body::-webkit-scrollbar {
    width: 15px;
}

body::-webkit-scrollbar-track {
    background: #1F4A82;
}

body::-webkit-scrollbar-thumb {
    background-color: rgb(191, 191, 191);
    border-radius: 20px;
    border: 3px solid #1F4A82;
}


/***************Busquedad***************/

/**********************************Recetas********************************************/
.highlight {
    border: 2px solid red; /* Borde rojo */
    margin-bottom: 16px; /* Espacio debajo del producto resaltado */
    background-color: #ffeeee; /* Fondo ligeramente rosado */
}

/* Estilo para la clase de resaltado */
/*.highlight-img {
        border: 4px solid red; 
        box-shadow: 0 0 10px red; 
        transition: border 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    }*/

/******************************Catalogo***********************/
.highlight-cat {
    border: 2px solid black; /* Borde rojo */
    margin-bottom: 15px; /* Espacio debajo del producto resaltado */
    background-color: #fcfcfc;
    border-radius: 15px;
    height: 322px;
    width: 322px;
}


/**************HTML*********************/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
    text-decoration: none;
}



/*section azul ID*/

/*#sec{
    background-color: #0074C7;
    color: white;
    font-family: Cormorant Garamond;
    font-size: 50px;
    height: auto;
    border-radius: 10px;    
}
#sec1{
    background-color: #0074C7;
    color: white;
    font-family: open sans-serif;

}

#imgsec{
   filter: drop-shadow(2px 3px 20px rgb(251, 251, 251)); 
}*/

.btsec {
    background-color: #0074C7;
    color: white;
    border-radius: 30px;
    height: auto;
    width: auto;
}

a {
    color: white;
}
/****/
.btsec {
    background-color: #0074C7;
    color: white;
    border-radius: 30px;
    height: auto;
    width: auto;
}

a {
    color: white;
}
/***************************/


/* Sección de fondo completo */
.seccion-recetas {
    width: 100vw;
    background-color: #0074C7;
    color: white;
    font-family: Cormorant Garamond;
    border-radius: 0;
    padding: 3rem 1rem;
    margin: 0;
}

/* Contenido centrado */
.contenido-recetas {
    max-width: 1200px;
    margin: 0 auto;
}

/* Imagen */
#imgsec3 {
    height: 300px;
    width: 300px;
    max-width: 100%;
    filter: drop-shadow(2px 3px 20px rgb(251, 251, 251));
}

/* Títulos */
.titulo {
    font-size: 3rem;
    margin-bottom: 0.5rem;
}

.subtitulo {
    font-size: 1.5rem;
    font-style: italic;
}

/* Responsividad */
@media (max-width: 768px) {
    #imgsec3 {
        height: 200px;
        width: 200px;
    }

    .titulo {
        font-size: 2.2rem;
    }

    .subtitulo {
        font-size: 1.2rem;
    }
}

@media (max-width: 480px) {
    #imgsec3 {
        height: 150px;
        width: 150px;
    }

    .titulo {
        font-size: 1.8rem;
    }

    .subtitulo {
        font-size: 1rem;
    }
}

/**************************/
/*/*ELEMENTOS RESPONSIVOS*/
/* Header con fondo */
.custom-header {
    background-color: #eb4242;
    padding: 10px 0; /* más corto */
}

/* Imagen personaje */
.personaje {
    height: 300px;
    width: 300px;
    object-fit: contain;
}

/* Responsiva en móviles */
@media (max-width: 768px) {
    .personaje {
        height: auto;
        width: 100%;
        max-width: 250px;
    }
}

/*************************************/
.icon__menu {
    font-size: 26px;
    color: white;
    cursor: pointer;
    width: 26px;
    height: 100%;
    display: none;
    align-items: center;
}

#label__check {
    width: 26px;
    height: 100%;
    display: none;
}

#check__menu {
    display: none;
}

@media screen and (max-width: 800px) {

    #ctn-bars-search,
    #ctn-bars-search input,
    #box-search {
        width: 100%;
    }

    #icon-search {
        right: 100px;
    }

    .header__superior {
        padding: 10px;
    }

    .logo img {
        width: 200px;
    }

    nav > ul {
        flex-direction: column;
        background-color: #023877;
        position: fixed;
        left: 0;
        top: 158px;
        width: 100%;
        height: 0px;
        transition: all 300ms ease;
        z-index: 100;
        opacity: 0;
        visibility: hidden;
    }

        nav > ul > li > a:hover {
            transform: scale(1);
        }

    nav ul li ul {
        left: 90px;
    }

    nav > ul > li:hover ul {
        top: 50px;
    }

    nav > ul > li:first-child a {
        background-position: 20px;
    }

    #selected {
        transform: scale(1);
    }

    #label__check {
        display: block;
    }

    .icon__menu {
        display: flex;
        margin-top: 22.5px;
        right: 60px;
    }

    #check__menu:checked ~ nav > ul {
        height: 300px;
        visibility: visible;
        opacity: 1;
    }

    main {
        margin-top: 250px;
    }
}

*/
/**Carta**/
main {
    width: 100%;
    max-width: 1000px;
    margin: auto;
}

.title {
    text-align: center;
    margin-top: 60px;
}

.container-box {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.box {
    width: 250px;
    height: 250px;
    margin: 10px;
    padding: 20px;
    border: 2px solid #0074C7;
    border-radius: 14px;
    text-align: center;
    margin-top: 100px;
    position: relative;
}

    .box img {
        width: 60%;
        transition: all 400ms;
    }

    .box h2 {
        font-size: 16px;
        margin-top: 10px;
        transition: all 500ms;
    }

.b1 {
    color: red;
    font-family: Cormorant Garamond;
    font-weight: bold;
}

.box .container-p {
    width: 100%;
    height: 150px;
    position: absolute;
    left: 0;
    bottom: 0;
    overflow: hidden;
    padding: 0px 10px;
    border-radius: 0px 0px 14px 14px;
}

.box p {
    font-size: 14px;
    color: #494646;
    opacity: 0;
    transform: translateY(150px);
    transition: all 600ms;
}

.box .check {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translate(-50%);
    border: 2px solid #b9b6b6;
    border-radius: 100%;
    width: 30px;
    height: 30px;
    background: rgb(204, 196, 196);
}

    .box .check i {
        margin-top: 6px;
        display: none;
        color: rgb(207, 207, 207);
    }

/*Efecto Hover*/


.box:hover {
    background: #fbfbfe;
}

    .box:hover img {
        transform: translateY(-90px);
    }

    .box:hover h2 {
        transform: translateY(-90px);
    }

    .box:hover .container-p p {
        transform: translateY(0px);
        opacity: 1;
    }


/*Clases que estaremos utilizando en JavaScript*/

.box-selected {
    border-color: green;
    transition: all 600ms;
}

.icon-check {
    display: block !important;
}

.check-selected {
    background: green !important;
    border: none;
    transition: all 600ms;
}


/*****************INIT/INDEX***********************/
.bini {
    width: 300px;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
    filter: drop-shadow(2px 3px 20px rgb(255, 255, 255));
}

.secini {
    background-color: #0074C7;
    color: white;
    font-size: 50px;
}

.bodyini {
    background-color: #0074C7;
}

.dini {
    background-color: #eb4242;
    width: auto 100%;
    height: 110px;
}

.imini {
    float: center;
    resize: horizontal;
    resize: both;
    filter: drop-shadow(2px 3px 20px rgb(255, 255, 255));
    /************/
    width: 100px;
    max-width: 100%;
    height: auto;
}

.ih1 {
    color: white;
    text-decoration: underline;
}

.ih3 {
    color: white;
    font-weight: normal;
    font-family: Cormorant Garamond;
}

.ih31 {
    color: white;
    font-weight: normal;
    font-family: Cormorant Garamond;
}
/********numero y img whatsapp**********/
.ih32 {
    color: white;
}

.contacto {
    display: flex;
    align-items: center; /* 🔹 centra verticalmente */
    justify-content: center; /* 🔹 centra horizontalmente dentro del div */
    gap: 10px; /* espacio entre imagen y texto */
}

    .contacto img {
        flex-shrink: 0; /* evita que la imagen se achique */
    }


.inmg {
    flex: 1;
    order: 2;
}

.ab {
    color: white;
    border-radius: 10px;
    background-color: red;
    font-family: Cormorant Garamond;
    font-size: 20px;
}

.fs {
    background-color: /*#d6d9d9*/ /*#d6d9d9*/ white;
}

.fsi {
    border: 3px #000;
    /*filter: drop-shadow(2px 3px 29px rgb(0, 25, 243));*/
}

/*****************RECETAS***********************/
.txtre {
    font-family: Cormorant Garamond;
    color:white;
}

.img-fluid {
    filter: drop-shadow(1px 1px 10px rgb(255, 255, 255));
}

.img-fluid1 {
    filter: drop-shadow(1px 1px 10px rgb(255, 255, 255));
    max-width: 250px; /* tamaño máximo del logo en pantallas grandes */
    height: auto;
}

.imgre {
    height: 300px;
    width: 300px;
}

.bodyre {
    background-color: #EBE7DD;
    background-image: url('../Img/Recetas-02.png');
    background-repeat: repeat;
    background-size: 150px;
}

.imgre:hover {
    background-color: rgb(247, 133, 247);
}

.contenedor-imagenes {
    display: flex;
    justify-content: center; /* centra horizontal */
    align-items: center;
    gap: 20px; /* espacio entre imágenes */
    flex-wrap: wrap; /* permite que en pantallas muy chicas bajen */
}

.img-resp {
    width: 20%; /* cada imagen ocupa el 30% del contenedor */
    height: auto; /* mantiene proporción */
    max-width: 400px; /* límite para que no crezca demasiado */
    object-fit: contain; /* evita deformación */
}

/* Para pantallas muy chicas */
@media (max-width: 600px) {
    .img-resp {
        width: 100px; /* se hacen pequeñas */
    }
}

.d {
    background-color: #0074C7;
    padding: 20px;
    color: white;
    text-align: center;
}

.fter-rec {
    display: flex;
    flex-wrap: wrap; /* Se acomodan en varias filas si no caben */
    justify-content: center; /* Centra horizontalmente */
    gap: 20px; /* Espacio entre cada tarjeta */
    padding: 20px;
    /*background-color: #0074C7; /* Color de fondo del footer */
    background: #0074C7;
    background: linear-gradient(171deg,rgba(0, 116, 199, 1) 0%, rgba(219, 217, 217, 1) 60%);
    color: white;
    text-align: center;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
}

.footer-logos,
.footer-redes {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px; /* espacio entre imágenes */
    flex-wrap: wrap; /* permite que bajen en móviles */
    margin-bottom: 20px;
}

.footer-texto h1 {
    font-size: 24px;
    margin: 10px 0;
}

.footer-texto h3 {
    font-size: 16px;
    margin: 5px 0;
}

.imagen-recetas {
    width: 200px;
    height: 200px;
}

.imagen-recetas1 {
    width: 200px;
    height: 250px;
}

/* 📱 Responsivo */
@media (max-width: 768px) {
    .imagen-recetas {
        width: 120px;
    }

    .imagen-recetas1 {
        width: 100px;
    }

    .footer-texto h1 {
        font-size: 20px;
    }

    .footer-texto h3 {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .footer-logos,
    .footer-redes {
        flex-direction: column;
    }

    .imagen-recetas,
    .imagen-recetas1 {
        width: 100px;
    }
}

.footer-redes {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
}

.icono-red {
    position: relative;
    display: inline-block;
    text-align: center;
}

.imagen-recetasr {
    width: 440px;
    height: 150px;
    display: block;
}

.texto-icono {
    position: absolute;
    top: 60%; /* centrado vertical */
    left: 50%; /* centrado horizontal */
    transform: translate(-50%, -50%);
    color: black !important;
    font-size: 16px;
    font-weight: bold;
    text-shadow: 2px 2px 5px rgba(0,0,0,0.7); /* para que siempre se lea */
    pointer-events: none; /* permite hacer clic en la imagen */
}

.texto-icoo {
    position: absolute;
    top: 50%; /* centrado vertical */
    left: 50%; /* centrado horizontal */
    transform: translate(-50%, -50%);
    font-size: 20px;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(255,255,255,0.3); /* sombra clara para que no se pierda */
    pointer-events: none;
}

/*recetas- imagen*/
.uno {
    width: 500px;
    height: 700px;
    border: 2px solid gray;
    filter: drop-shadow(1px 1px 10px gray);
}


/**************BUSCADOR******************/
#searchInput {
    margin: 20px;
    background-color: #EBE7DD;
    border-radius: 10px;
    max-width: 600px;
    margin: 0 auto;
}

.bt {
    background-color: #0074C7;
    color: white;
    border-radius: 10px;
    max-width: 600px;
    margin: 0 auto;
}


/*******************TEXTO************************/

.wrapper {
    /*height: 50px;*/
    /*display: grid;*/
    place-items: center;
}

.typing-demo {
    width: 20ch;
    animation: typing 2s steps(17), blink .9s;
    white-space: nowrap;
    overflow: hidden;
    border-right: 2px solid;
    font-family: Cormorant Garamond;
    font-size: 2em;
}

@keyframes typing {
    from {
        width: 0;
    }
}

@keyframes blink {
    5% {
        border-color: transparent;
    }

    0% {
        border-color: transparent;
    }
}

/********************MENU********************/
.mn {
    background-color: white;
    border-radius: 15px;
}
/*.bodymenu{
  background-image: url('../Img/dulce.png');
    background-repeat: repeat;
    background-size: 150px;
}*/
.imgre3 {
    width: 200px;
    height: 200px;
}

.amn:hover {
    background-color: rgba(187, 154, 241, 0.537);
    border-radius: 15px;
    border: 2px solid #2B65A3;
}

.amn {
    border: 2px solid #2B65A3;
    border-radius: 15px;
    height: 300px;
    width: 300px;
    margin-left: auto;
    margin-right: auto;
}

.tbf {
    resize: both;
    transform: translate(-15px);
    background-image: url('../Img/Mapa-01.png');
}

.fm {
    resize: horizontal;
    resize: both;
    /*background-image: url('../Img/Fondo-01.png');*/
    background-color: #2B65A3;
    background-repeat: no-repeat;
    background-image: url('../Img/Mapa\ 4-01.png');
    background-size: cover;
    background-repeat: no-repeat;
}

.im {
    width: 100px;
    height: 100px;
}

.h1m {
    color: white;
}

.btm {
    /* background-color: #2c32e4;
    color: white;
    border-radius: 10px;*/
    background-color: transparent;
    width: 200px;
    height: auto;
    font-family: ExtraBold;
    color: #2B65A3;
    color: white;
    font: bold;
    font-size: 20px;
    border: 0px;
}

.btm3 {
    /* background-color: #2c32e4;
    color: white;
    border-radius: 10px;*/
    background-color: transparent;
    border-radius: 10px;
}

.btmimg {
    width: 40px;
    height: 40px;
    flex-shrink: 0; /* evita que el icono se deforme */
}

.imgm {
    height: 100px;
    width: 300px;
}

.btm:hover {
    background-color: white;
    color: #000;
    border-radius: 10px;
}

.btm1 {
    background-color: #2c32e4;
    color: white;
    border-radius: 10px;
    width: 150px;
    height: 45px;
}

    .btm1:hover {
        background-color: white;
        color: #000;
    }

.btmc {
    background-color: #2c32e4;
    color: white;
    border-radius: 10px;
}

    .btmc:hover {
        background-color: white;
        color: #000;
    }

/* --- Modal estilo escritorio --- */
#modal7, #modal6, #modal5, #modal4, #modal3, #modal2, #modal1, #modal:popover-open {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 1rem;
    border-radius: 10px;
    background: white;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    border: 2px solid #000;
    background-color: rgb(246, 248, 229);
    width: 90%;
    max-width: 500px; /* 🔹 tamaño máximo en PC/tablet */
    max-height: 80vh; /* 🔹 nunca más alto que 80% de pantalla */
    overflow-y: auto;
    box-sizing: border-box;
}

/* --- Mapa dentro del modal --- */
#map7, #map6, #map5, #map4, #map3, #map2, #map1, #map0 {
    height: 250px;
    width: 100%;
    border-radius: 8px;
    margin: 0.8rem 0;
}

/* ---Vista móvil (pantallas menores a 600px) --- */
@media (max-width: 600px) {
    #modal7, #modal6, #modal5, #modal4, #modal3, #modal2, #modal1, #modal:popover-open {
        top: 0;
        left: 0;
        transform: none; /* 🔹 se quita el centrado */
        width: 100%;
        height: 100%; /* 🔹 ocupa toda la pantalla */
        max-width: none;
        max-height: none;
        border-radius: 0; /* 🔹 sin bordes redondeados */
        padding: 1rem;
    }

    #map7, #map6, #map5, #map4, #map3, #map2, #map1, #map0 {
        height: 200px; /* 🔹 mapa más pequeño */
    }

    h2 {
        font-size: 18px;
        margin-bottom: 8px;
    }

    h3 {
        font-size: 14px;
        margin: 4px 0;
    }

    h4 {
        font-size: 14px;
        margin: 4px 0;
    }

    .btm, .btm1 {
        font-size: 14px;
        padding: 8px 12px;
    }
}

/*****************CATALOGOS********************/
.bodyca {
    /*background-color:#CCCCCC;*/
    background-color: #DDDDDD;
    background-image: url('../Img/cocina0.png');
    background-repeat: repeat;
    background-size: 150px;
}

.imgre1 {
    height: 300px;
    width: 300px;
    background-color: #dedede;
    border-radius: 15px;
}

    .imgre1:hover {
        /* background-color: rgb(133, 137, 247);*/
        background-color: rgb(255, 255, 255);
        border-radius: 15px;
    }
/*boton atras*/
.btn-atras {
    position: absolute;
    top: 20px;
    left: 20px;
    background-color: white;
    color: #000000;
    border: none;
    border-radius: 20px;
    padding: 10px 20px;
    font-size: 16px;
    font-weight: bold;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: background-color 0.3s ease;
}

    .btn-atras:hover {
        background-color: #f0f0f0;
    }


/***********************Capacillos*********************/
.al {
    background-color: lawngreen;
    font-family: Cormorant Garamond;
    margin-left: -30px;
    text-align: center;
    font-weight: bold;
}

.al1 {
    font-family: Cormorant Garamond;
    margin: 0;
    font-size: 1.2rem;
    margin-left: 50px;
}
/* Responsivo */
@media (max-width: 600px) {
    .al h5 {
        font-size: 1rem;
        padding: 10px;
    }
}

/******************Especiales***********************/
/*dia de muertos*/
.muertos {
    height: 300px;
    width: 300px;
    background-color: #dedede;
    border-radius: 15px;
}

.bodymuertos {
    background-image: url('../Img/diamuertos.png'); /* Ruta a tu imagen */
    background-repeat: no-repeat; /* No repite la imagen */
    background-size: cover; /* La imagen cubre todo el elemento */
    background-position: center; /* Centra la imagen */
    background-attachment: fixed; /* Mantiene la imagen fija al hacer scroll */
}

.muertos:hover {
    background: linear-gradient(rgba(41, 41, 41, 0.8), transparent), url('../Img/Muertos.gif') center center / cover no-repeat;
}

@media (max-width: 480px) {
    .muertos {
        background:
        /*linear-gradient(transparent, transparent),*/
        linear-gradient(rgba(41, 41, 41, 0.8), transparent), url('../Img/Muertos.gif') center center / cover no-repeat;
    }
}

/*fiestas patrias*/
.mexico {
    height: 300px;
    width: 300px;
    background-color: #dedede;
    border-radius: 15px;
}

    .mexico:hover {
        background: linear-gradient(rgba(255, 255, 255, 0.8), transparent), url('../Img/mexico.gif') center center / cover no-repeat;
        height: 300px;
        width: 300px;
    }

.bodymexico {
    background-image: url('../Img/vivamexico.png'); /* Ruta a tu imagen */
    background-repeat: no-repeat; /* No repite la imagen */
    background-size: cover; /* La imagen cubre todo el elemento */
    background-position: center; /* Centra la imagen */
    background-attachment: fixed; /* Mantiene la imagen fija al hacer scroll */
}

@media (max-width: 480px) {
    .mexico {
        background: linear-gradient(rgba(255, 255, 255, 0.8), transparent), url('../Img/mexico.gif') center center / cover no-repeat;
        height: 300px;
        width: 300px;
    }
}

.alM {
    display: flex;
    width: 100%;
    max-width: 100%;
    font-family: "Cormorant Garamond", serif;
    font-weight: bold;
    text-align: center;
    height: auto;
}

.franja {
    flex: 1;
    min-width: 0; /* Evita que las franjas fuercen overflow */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    box-sizing: border-box;
}

.verde {
    background-color: #006847;
}

.blanca {
    background-color: white;
}

.roja {
    background-color: #ce1126;
}

.al1M {
    margin: 0;
    font-size: 1rem;
    color: black;
    max-width: 100%;
    word-break: break-word;
    padding: 0 10px;
}
/* Ajustes para pantallas pequeñas */
@media (max-width: 480px) {
    .al1M {
        font-size: 0.9rem;
    }
}

/*haloween*/
.haloween {
    height: 300px;
    width: 300px;
    background-color: #dedede;
    border-radius: 15px;
}

.bodyhaloween {
    background-image: url('../Img/haloween.png'); /* Ruta a tu imagen */
    background-repeat: no-repeat; /* No repite la imagen */
    background-size: cover; /* La imagen cubre todo el elemento */
    background-position: center; /* Centra la imagen */
    background-attachment: fixed; /* Mantiene la imagen fija al hacer scroll */
}

.haloween:hover {
    background: linear-gradient(rgba(41, 41, 41, 0.8), transparent), url('../Img/haloweenn.gif') center center / cover no-repeat;
}

@media (max-width: 480px) {
    .haloween {
        background:
        /*linear-gradient(transparent, transparent),*/
        linear-gradient(rgba(41, 41, 41, 0.8), transparent), url('../Img/haloweenn.gif') center center / cover no-repeat;
    }
}

.alH {
    background-color: #2B3359;
    font-family: Cormorant Garamond;
    margin-left: -30px;
    text-align: center;
    font-weight: bold;
}

.al1H {
    font-family: Cormorant Garamond;
    margin: 0;
    font-size: 2rem;
    margin-left: 50px;
    color: orange;
}
/* Responsivo */
@media (max-width: 600px) {
    .alH h5 {
        font-size: 1rem;
        padding: 10px;
    }
}

/*AMOR*/
.lov {
    background-color: /*#eb4242*/ pink;
    width: auto 100%;
    height: 110px;
}

#amo {
    background-color: /*#0074C7*/ pink;
    color: red;
    font-family: Cormorant Garamond;
    font-size: 50px;
    height: auto;
    border-radius: 10px;
}

#amo1 {
    background-color: pink;
    color: red;
    font-family: open sans-serif;
}

#imgsec {
    filter: drop-shadow(2px 3px 20px rgb(251, 251, 251));
}


.amor {
    height: 300px;
    width: 300px;
    background-color: #dedede;
    border-radius: 15px;
}

.bodyamor {
    background-image: url('../Img/amoor.png'); /* Ruta a tu imagen */
    background-repeat: no-repeat; /* No repite la imagen */
    background-size: cover; /* La imagen cubre todo el elemento */
    background-position: center; /* Centra la imagen */
    background-attachment: fixed; /* Mantiene la imagen fija al hacer scroll */
}

.amor:hover {
    background: linear-gradient(rgba(231, 226, 226, 0.8), transparent), url('../Img/amor.gif') center center / cover no-repeat;
}

@media (max-width: 480px) {
    .amor {
        background:
        /*linear-gradient(transparent, transparent),*/
        linear-gradient(rgba(231, 226, 226, 0.8), transparent), url('../Img/amor.gif') center center / cover no-repeat;
    }
}

.alA {
    background-color: pink;
    font-family: Cormorant Garamond;
    margin-left: -30px;
    text-align: center;
    font-weight: bold;
}

.al1A {
    font-family: Cormorant Garamond;
    margin: 0;
    font-size: 2rem;
    margin-left: 50px;
    color: red;
}
/* Responsivo */
@media (max-width: 600px) {
    .alA h5 {
        font-size: 1rem;
        padding: 10px;
    }
}

/*dia de los niños*/
.niños {
    height: 300px;
    width: 300px;
    background-color: #dedede;
    border-radius: 15px;
}

.bodyniños {
    background-image: url('../Img/niño.png'); /* Ruta a tu imagen */
    background-repeat: no-repeat; /* No repite la imagen */
    background-size: cover; /* La imagen cubre todo el elemento */
    background-position: center; /* Centra la imagen */
    background-attachment: fixed; /* Mantiene la imagen fija al hacer scroll */
}

.niños:hover {
    background: linear-gradient(rgba(231, 226, 226, 0.8), transparent), url('../Img/niñoo.gif') center center / cover no-repeat;
}

@media (max-width: 480px) {
    .niños {
        background:
        /*linear-gradient(transparent, transparent),*/
        linear-gradient(rgba(231, 226, 226, 0.8), transparent), url('../Img/niñoo.gif') center center / cover no-repeat;
    }
}

/*dia de las madres*/
.madres {
    height: 300px;
    width: 300px;
    background-color: #dedede;
    border-radius: 15px;
}

.bodymadres {
    background-image: url('../Img/mamáa.png'); /* Ruta a tu imagen */
    background-repeat: no-repeat; /* No repite la imagen */
    background-size: cover; /* La imagen cubre todo el elemento */
    background-position: center; /* Centra la imagen */
    background-attachment: fixed; /* Mantiene la imagen fija al hacer scroll */
}

.madres:hover {
    background: linear-gradient(rgba(231, 226, 226, 0.8), transparent), url('../Img/mamá.gif') center center / cover no-repeat;
}

@media (max-width: 480px) {
    .madres {
        background:
        /*linear-gradient(transparent, transparent),*/
        linear-gradient(rgba(41, 41, 41, 0.8), transparent), url('../Img/mamá.gif') center center / cover no-repeat;
    }
}