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

body{
background:  #fafbec; 
}

.contenedor{
    width: 100%;
    max-width: 1800px;
    margin: 30px auto;
    padding: 0 20px;
}


#encabezado{
    position: sticky;
    top: 0;
    display: flex;
    background:#935392;
    min-height: 100px;
    width:100%;
    justify-content: space-between;
    align-items: center; 
    border-radius: 30px;
    z-index: 1000;
    padding: 20px;
}


#logo img{
    width: 150px;
    height: 120px;
}


/* Menú hamburguesa */
.menu-toggle {
    display: none;
    flex-direction: column;
    cursor: pointer;
    padding: 10px;
}

.menu-toggle span {
    width: 30px;
    height: 3px;
    background: #fafbec;
    margin: 4px 0;
    transition: 0.3s;
    border-radius: 3px;
}

#opciones{
    display: flex;
    padding: 0;
    margin: 0;
    list-style: none;
}

#opciones li{
    padding: 15px;
    list-style: none;
    border: 2px solid #fafbec;
    border-radius: 20px;
    margin-left: 25px;
}


#opciones li:hover{
    background:#dfbddf;   
}

#opciones li a{
    color: #fafbec;
    text-decoration: none;
    font-size: 20px;
    font-weight: bold;    
}



#slogan{
    text-align: center;
    margin-top: 70px;
    font-family: cursive;
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    padding: 0 20px;
}


.banner{
    width: 100%;
    max-width: 1500px;
    margin: 30px auto;
    border: 15px double #935392;
    border-radius: 30px;
    } 
    
    
.banner img{
    width: 100%;
    height: auto;
    min-height: 300px;
    max-height: 560px;
    object-fit: cover;
    display: block;
    border-radius: 20px;
 }

.carousel-indicators [data-bs-target] {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    padding: 10px;
}


.carousel-indicators .active{
    background-color:   #935392;
}


.carousel-control-prev-icon,
.carousel-control-next-icon{
    border-radius: 50%;
    background-color: #935392;
}


#servicios{

    font-family: cursive;
    text-align: center;
    font-size: clamp(2rem, 5vw, 46px);
    margin-top: 50px;
    border: 2px solid  #935392;
    background:  #935392;
    border-radius: 30px;
    padding: 20px;
    color: #fafbec;
}



.card {
width: 100%;
max-width: 360px;
border: 4px solid #935392;
border-radius: 30px;
box-shadow: 2px 2px 2px 2px #deadde;
margin: 0 auto;
}


.card img{
    border-radius: 30px;
    width: 100%;
    height: 305px;
    object-fit: cover;
}

.card:hover{
transform: translateY(-20px);
transition: all 1s;
opacity: .5;
}


.card-title{
    color:  #935392;
    font-size: 24px;
    font-weight: bold; 
    font-family: cursive;
}

.card-text{
    font-family: cursive;
    font-size: 20px;

}

.card-body{
  text-align: center;
}


.row{
    margin: 0px;
}


.col{
    display: flex; 
    justify-content: center;
    align-items: center;
}


#fechas{
    font-family: cursive;
    text-align: center;
    font-size: clamp(2rem, 5vw, 46px);
    margin-top: 50px;
    border: 2px solid  #935392;
    background:  #935392;
    border-radius: 30px;
    padding: 20px;
    color: #fafbec;
}


.boton{
    background: #94c021;
    color: #fafbec;
    font-weight: bold;
    padding: 5px;
    font-size: 20px;
}

.boton:hover{
    background: #d0dbb3;
}


#garantias{
    font-family: cursive;
    text-align: center;
    font-size: clamp(2rem, 5vw, 46px);
    margin-top: 50px;
    border: 2px solid  #935392;
    background:  #935392;
    border-radius: 30px;
    padding: 20px;
    color: #fafbec;
}


.domicilio{
    margin: 0px auto;
    padding: 0px;
    display: flex;
    width: 100%;
    max-width: 1200px;
    flex-wrap: wrap;
    justify-content: center;
}


.tiempo{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 350px;
    width: 100%;
    max-width: 310px;
    padding: 20px;
}


.tiempo img{ 
    width: 120px;
    height: 120px;
    padding: 10px;
}


#lina{
    font-family: cursive;
    text-align: center;
    font-size: clamp(2rem, 5vw, 46px);
    margin-top: 30px;
    border: 2px solid  #935392;
    background:  #935392;
    border-radius: 30px;
    padding: 20px;
    color: #fafbec;
}

#historia{
    display: flex; 
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-top: 50px;
    gap: 30px;
    padding: 20px;
}

#historia img{
    display: block; 
    margin-top: 5px;
    border: 2px double  #935392;
    background:  #935392;
    border-radius: 30px;
    width: 100%;
    max-width: 250px;
    height: auto;
    box-shadow: 2px 2px 2px 2px #deadde;
}

#reseña{
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 800px;
    padding: 20px;
}

#nombre{
    text-align: center;
    font-family: cursive;
    font-size: clamp(1.8rem, 4vw, 38px);
    margin-bottom: 20px;
}

#sueño{
    text-align: justify;
    font-family: cursive;
    font-size: clamp(1rem, 2.5vw, 24px);
}


#pie{
    background: #935392;
    color:  #fafbec;
    font-family: cursive;
    border-radius: 30px;
    margin-top: 50px;
}


#cajas{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    padding: 30px 20px;
    gap: 30px;
}

#cajas > div {
    flex: 1 1 250px;
    min-width: 250px;
}


.titulos{
    font-weight: bold;
    text-align: center;
    font-size: clamp(1.5rem, 3vw, 2rem);
}

#motivos{
    font-size: 20px;
    text-align: center;
}

.parrafo{
    text-align: justify;
    font-size: 20px;
}



#listado li{
    text-align: justify;
    font-size: 20px;
}


#Dulces{
    text-align: center;
}

#Dulces a{
    padding: 20px;

}

#Dulces img:hover{
transform: translateY(-20px);
transition: all 1s;
opacity: .5;
}

#redes{
    font-family: cursive;
    font-size: 26px;
    text-align: center;
}


#copy{
  background: #935392;
  color:  #fafbec;
  text-align: center;
  padding: 20px;
  border-radius: 30px;
}

#final{
    font-size: 20px;
}


#pagos a{
    padding: 30px;

}


#efectivo{
    height: 48px;
    width: 48px;
}


#bancolombia{
    height: 52px;
    width: 52px;
}


#nequi{
    height: 63px;
    width: 63px;
}

#medios{
text-align: center;
font-size: 20px;
font-family: cursive;
word-spacing: 20px;
}

#final{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
#descripción{
    width: 100%;
    max-width: 1300px;
    font-family: cursive;
    text-align: center;
    font-size: clamp(1.5rem, 4vw, 36px);
    margin: 120px auto;
    border: 2px solid  #935392;
    background:  #935392;
    border-radius: 30px;
    padding: 40px 20px;
    color: #fafbec;
}

#copas{
    background-image: url(IMAGENES/ESTAMPACION/COPAS/PORTADA.png);
    background-size: cover;
    background-position: center;
    width: 100%;
    max-width: 352px;
    height: 305px;
    border-radius: 27px;
}

#copas:hover{
    background-image: url(IMAGENES/ESTAMPACION/COPAS/3.png);
}


#gorras{
    background-image: url(IMAGENES/ESTAMPACION/GORRAS/COLORES.png);
    background-size: cover;
    background-position: center;
    width: 100%;
    max-width: 352px;
    height: 305px;
    border-radius: 27px;
}

#gorras:hover{
    background-image: url(IMAGENES/ESTAMPACION/GORRAS/NEGRAS.png);
}

#llaveros{
    background-image: url(IMAGENES/ESTAMPACION/LLAVEROS\ MET/PORTADA.png);
    background-size: cover;
    background-position: center;
    width: 100%;
    max-width: 352px;
    height: 305px;
    border-radius: 27px;
}

#llaveros:hover{
    background-image: url(IMAGENES/ESTAMPACION/LLAVEROS\ MET/2.png);
}

#rompecabezas{
    background-image: url(IMAGENES/ESTAMPACION/ROMPECABEZAS/CUADRADO.png);
    background-size: cover;
    background-position: center;
    width: 100%;
    max-width: 352px;
    height: 305px;
    border-radius: 27px;
}

#rompecabezas:hover{
    background-image: url(IMAGENES/ESTAMPACION/ROMPECABEZAS/2.png);
}

#mouse{
    background-image: url(IMAGENES/ESTAMPACION/PAD\ MOUSE/PORTADA.png);
    background-size: cover;
    background-position: center;
    width: 100%;
    max-width: 352px;
    height: 305px;
    border-radius: 27px;
}

#mouse:hover{
    background-image: url(IMAGENES/ESTAMPACION/PAD\ MOUSE/redon.png);
}



#solitario{
    background-image: url(IMAGENES/ROSAS/solitario\ naranja.png);
    background-size: cover;
    background-position: center;
    width: 100%;
    max-width: 352px;
    height: 420px;
    border-radius: 27px;
}

#solitario:hover{
    background-image: url(IMAGENES/ROSAS/solitario\ rosa.png);
}


#ramillete{
    background-image: url(IMAGENES/ROSAS/ramilleteyo.png);
    background-size: cover;
    background-position: center;
    width: 100%;
    max-width: 352px;
    height: 420px;
    border-radius: 27px;
}


#pequeño{
    background-image: url(IMAGENES/ROSAS/amarilla3.png);
    background-size: cover;
    background-position: center;
    width: 100%;
    max-width: 352px;
    height: 420px;
    border-radius: 27px;
}

#pequeño:hover{
    background-image: url(IMAGENES/ROSAS/roja3.png);
}

.rosas{
    font-family: cursive;
    text-align: center;
    font-size: 20px;
}

.anchetas img{
    width: 100%;
    max-width: 352px;
    height: 365px;
    object-fit: cover;
}


#botones{
    background-image: url(IMAGENES/SOUVENIRS/BOTON2.png);
    background-size: cover;
    background-position: center;
    width: 100%;
    max-width: 352px;
    height: 420px;
    border-radius: 27px;
}

#botones:hover{
    background-image: url(IMAGENES/SOUVENIRS/BOTON1.png);
}



#acrilicos{
    background-image: url(IMAGENES/SOUVENIRS/LLAVERO_TAR.png);
    background-size: cover;
    background-position: center;
    width: 100%;
    max-width: 352px;
    height: 420px;
    border-radius: 27px;
}

#acrilicos:hover{
    background-image: url(IMAGENES/SOUVENIRS/LLAVERO.png);
}



#lapiceros{
    background-image: url(IMAGENES/SOUVENIRS/LAPICERO_TAR.png);
    background-size: cover;
    background-position: center;
    width: 100%;
    max-width: 352px;
    height: 420px;
    border-radius: 27px;
}

#lapiceros:hover{
    background-image: url(IMAGENES/SOUVENIRS/LAPICERO.png);
}



#chocolates{
    background-image: url(IMAGENES/SOUVENIRS/CHOCOX4.png);
    background-size: cover;
    background-position: center;
    width: 100%;
    max-width: 352px;
    height: 420px;
    border-radius: 27px;
}

#chocolates:hover{
    background-image: url(IMAGENES/SOUVENIRS/CHOCO.jfif);
}



#tematicos{
    background-image: url(IMAGENES/SOUVENIRS/MUG_VERDE.png);
    background-size: cover;
    background-position: center;
    width: 100%;
    max-width: 352px;
    height: 420px;
    border-radius: 27px;
}

#tematicos:hover{
    background-image: url(IMAGENES/SOUVENIRS/MUG_KURO.png);
}



#chupetas{
    background-image: url(IMAGENES/SOUVENIRS/CHUPETA_A.png);
    background-size: cover;
    background-position: center;
    width: 100%;
    max-width: 352px;
    height: 420px;
    border-radius: 27px;
}

#chupetas:hover{
    background-image: url(IMAGENES/SOUVENIRS/CHUPETA_V.png);
}


#camisetas{
    background-image: url(IMAGENES/ESTAMPACION/CAMISETAS/ROSADA.png);
    background-size: cover;
    background-position: center;
    width: 100%;
    max-width: 352px;
    height: 400px;
    border-radius: 27px;
}

#camisetas:hover{
    background-image: url(IMAGENES/ESTAMPACION/CAMISETAS/PORTADA.png);
}

#mamelucos{
    background-image: url(IMAGENES/ESTAMPACION/CAMISETAS/MAMELUCO1.png);
    background-size: cover;
    background-position: center;
    width: 100%;
    max-width: 352px;
    height: 400px;
    border-radius: 27px;
}

#mamelucos:hover{
    background-image: url(IMAGENES/ESTAMPACION/CAMISETAS/MAMELUCO2.png);
}


#camifamilia{
    background-image: url(IMAGENES/ESTAMPACION/CAMISETAS/NAVIDAD.png);
    background-size: cover;
    background-position: center;
    width: 100%;
    max-width: 352px;
    height: 400px;
    border-radius: 27px;
}

#camifamilia:hover{
    background-image: url(IMAGENES/ESTAMPACION/CAMISETAS/CORPORATIVO.png);
}


#abecedarios{
    background-image: url(IMAGENES/TEMPORADAS/ESCOLAR/SILABAS.png);
    background-size: cover;
    background-position: center;
    width: 100%;
    max-width: 352px;
    height: 440px;
    border-radius: 27px;
}

#abecedarios:hover{
    background-image: url(IMAGENES/TEMPORADAS/ESCOLAR/LETRAS.png);
}


#tablas{
    background-image: url(IMAGENES/TEMPORADAS/ESCOLAR/FUTBOL.png);
    background-size: cover;
    background-position: center;
    width: 100%;
    max-width: 352px;
    height: 440px;
    border-radius: 27px;
}

#tablas:hover{
    background-image: url(IMAGENES/TEMPORADAS/ESCOLAR/VARIOS2.png);
}

.abecedario{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    max-width: 900px;
    margin: 0px auto;
    padding: 40px 20px;
    justify-content: center;
    gap: 30px;
}

.escolar{
    margin: 0;
}

#Botiquin{
    background-image: url(IMAGENES/TEMPORADAS/SAN\ VALENTIN/BOTIQUIN1.png);
    background-size: cover;
    background-position: center;
    width: 100%;
    max-width: 352px;
    height: 380px;
    border-radius: 27px;
}

#Botiquin:hover{
    background-image: url(IMAGENES/TEMPORADAS/SAN\ VALENTIN/BOTIQUIN2.png);
}



#tazas{
    background-image: url(IMAGENES/TEMPORADAS/SAN\ VALENTIN/MUGS.png);
    background-size: cover;
    background-position: center;
    width: 100%;
    max-width: 352px;
    height: 380px;
    border-radius: 27px;
}

#tazas:hover{
    background-image: url(IMAGENES/TEMPORADAS/SAN\ VALENTIN/MUGS2.png);
}


.mujer img{
    width: 100%;
    max-width: 352px;
    height: 380px;
    object-fit: cover;
}

#bonyurt{
    background-image: url(IMAGENES/TEMPORADAS/NIÑO/BonYurt1-removebg-preview.png);
    background-size: cover;
    background-position: center;
    width: 100%;
    max-width: 352px;
    height: 380px;
    border-radius: 27px;
}

#bonyurt:hover{
    background-image: url(IMAGENES/TEMPORADAS/NIÑO/BonYurt2-removebg-preview.png);
}

#dulcera{
    background-image: url(IMAGENES/TEMPORADAS/NIÑO/CAJA_DULCERA2-removebg-preview.png);
    background-size: cover;
    background-position: center;
    width: 100%;
    max-width: 352px;
    height: 380px;
    border-radius: 27px;
}

#dulcera:hover{
    background-image: url(IMAGENES/TEMPORADAS/NIÑO/CAJA_DULCERA1-removebg-preview.png);
}


#duvalin{
    background-image: url(IMAGENES/TEMPORADAS/NIÑO/Duvalin-removebg-preview.png);
    background-size: cover;
    background-position: center;
    width: 100%;
    max-width: 352px;
    height: 380px;
    border-radius: 27px;
}

#duvalin:hover{
    background-image: url(IMAGENES/TEMPORADAS/NIÑO/Duvalin2-removebg-preview.png);
}


#libritos{
    background-image: url(IMAGENES/TEMPORADAS/NIÑO/libritos1-removebg-preview.png);
    background-size: cover;
    background-position: center;
    width: 100%;
    max-width: 352px;
    height: 380px;
    border-radius: 27px;
}

#libritos:hover{
    background-image: url(IMAGENES/TEMPORADAS/NIÑO/libritos2-removebg-preview.png);
}


#maleta{
    background-image: url(IMAGENES/TEMPORADAS/NIÑO/Maleta_Didáctica1-removebg-preview.png);
    background-size: cover;
    background-position: center;
    width: 100%;
    max-width: 352px;
    height: 380px;
    border-radius: 27px;
}

#maleta:hover{
    background-image: url(IMAGENES/TEMPORADAS/NIÑO/Maleta_Didáctica-removebg-preview.png);
}


#elefante{
    background-image: url(IMAGENES/VELAS/BABY/ELEFANTE1.png);
    background-size: cover;
    background-position: center;
    width: 100%;
    max-width: 352px;
    height: 380px;
    border-radius: 27px;
}

#elefante:hover{
    background-image: url(IMAGENES/VELAS/BABY/ELEFANTE2.png);
}


#oso{
    background-image: url(IMAGENES/VELAS/BABY/OSO1.png);
    background-size: cover;
    background-position: center;
    width: 100%;
    max-width: 352px;
    height: 380px;
    border-radius: 27px;
}

#oso:hover{
    background-image: url(IMAGENES/VELAS/BABY/OSO2.png);
}


#leon{
    background-image: url(IMAGENES/VELAS/BABY/LEON1.png);
    background-size: cover;
    background-position: center;
    width: 100%;
    max-width: 352px;
    height: 380px;
    border-radius: 27px;
}

#leon:hover{
    background-image: url(IMAGENES/VELAS/BABY/LEON2.png);
}


#angel{
    background-image: url(IMAGENES/VELAS/BAUTIZO/ANGEL1.png);
    background-size: cover;
    background-position: center;
    width: 100%;
    max-width: 352px;
    height: 420px;
    border-radius: 27px;
}

#angel:hover{
    background-image: url(IMAGENES/VELAS/BAUTIZO/ANGEL2.png);
}


#conejo{
    background-image: url(IMAGENES/VELAS/BAUTIZO/CONEJO1.png);
    background-size: cover;
    background-position: center;
    width: 100%;
    max-width: 352px;
    height: 420px;
    border-radius: 27px;
}

#conejo:hover{
    background-image: url(IMAGENES/VELAS/BAUTIZO/CONEJO2.png);
}


#primaveral{
    background-image: url(IMAGENES/VELAS/BAUTIZO/ANGELPRIMA1.png);
    background-size: cover;
    background-position: center;
    width: 100%;
    max-width: 352px;
    height: 420px;
    border-radius: 27px;
}

#primaveral:hover{
    background-image: url(IMAGENES/VELAS/BAUTIZO/ANGELPRIMA2.png);
}



#caliz{
    background-image: url(IMAGENES/VELAS/COMUNION/CALIZ1.png);
    background-size: cover;
    background-position: center;
    width: 100%;
    max-width: 352px;
    height: 440px;
    border-radius: 27px;
}

#caliz:hover{
    background-image: url(IMAGENES/VELAS/COMUNION/CALIZ2.png);
}



#crucifijo{
    background-image: url(IMAGENES/VELAS/COMUNION/CRUZ1.png);
    background-size: cover;
    background-position: center;
    width: 100%;
    max-width: 352px;
    height: 440px;
    border-radius: 27px;
}

#crucifijo:hover{
    background-image: url(IMAGENES/VELAS/COMUNION/CRUZ2.png);
}



#lupita{
    background-image: url(IMAGENES/VELAS/COMUNION/GUADALUPEMINI1.png);
    background-size: cover;
    background-position: center;
    width: 100%;
    max-width: 352px;
    height: 440px;
    border-radius: 27px;
}

#lupita:hover{
    background-image: url(IMAGENES/VELAS/COMUNION/GUADALUPEMINI2.png);
}


#bombillo{
    background-image: url(IMAGENES/VELAS/FRASCOS/BOMBILLO1.png);
    background-size: cover;
    background-position: center;
    width: 100%;
    max-width: 352px;
    height: 380px;
    border-radius: 27px;
}

#bombillo:hover{
    background-image: url(IMAGENES/VELAS/FRASCOS/BOMBILLO2.png);
}


#corcho{
    background-image: url(IMAGENES/VELAS/FRASCOS/CORCHO1.png);
    background-size: cover;
    background-position: center;
    width: 100%;
    max-width: 352px;
    height: 380px;
    border-radius: 27px;
}

#corcho:hover{
    background-image: url(IMAGENES/VELAS/FRASCOS/CORCHO2.png);
}


#exagonal{
    background-image: url(IMAGENES/VELAS/FRASCOS/EXAGONAL1.png);
    background-size: cover;
    background-position: center;
    width: 100%;
    max-width: 352px;
    height: 380px;
    border-radius: 27px;
}

#exagonal:hover{
    background-image: url(IMAGENES/VELAS/FRASCOS/EXAGONAL2.png);
}


#mini{
    background-image: url(IMAGENES/VELAS/FRASCOS/MINI1.png);
    background-size: cover;
    background-position: center;
    width: 100%;
    max-width: 352px;
    height: 380px;
    border-radius: 27px;
}

#mini:hover{
    background-image: url(IMAGENES/VELAS/FRASCOS/MINI2.png);
}



#graduado{
    background-image: url(IMAGENES/VELAS/GRADOS/OSITO1.png);
    background-size: cover;
    background-position: center;
    width: 100%;
    max-width: 352px;
    height: 380px;
    border-radius: 27px;
}

#graduado:hover{
    background-image: url(IMAGENES/VELAS/GRADOS/OSITO2.png);
}


#carmen{
    background-image: url(IMAGENES/VELAS/RELIGIOSOS/CARMEN1.png);
    background-size: cover;
    background-position: center;
    width: 100%;
    max-width: 352px;
    height: 440px;
    border-radius: 27px;
}

#carmen:hover{
    background-image: url(IMAGENES/VELAS/RELIGIOSOS/CARMEN2.png);
}


#crucifijo{
    background-image: url(IMAGENES/VELAS/RELIGIOSOS/CRUZ1.png);
    background-size: cover;
    background-position: center;
    width: 100%;
    max-width: 352px;
    height: 440px;
    border-radius: 27px;
}

#crucifijo:hover{
    background-image: url(IMAGENES/VELAS/RELIGIOSOS/CRUZ2.png);
}


#guadalupe{
    background-image: url(IMAGENES/VELAS/RELIGIOSOS/GUADALUPE1.png);
    background-size: cover;
    background-position: center;
    width: 100%;
    max-width: 352px;
    height: 440px;
    border-radius: 27px;
}

#guadalupe:hover{
    background-image: url(IMAGENES/VELAS/RELIGIOSOS/GUADALUPE2.png);
}


#madre{
    background-image: url(IMAGENES/VELAS/RELIGIOSOS/MADRE1.png);
    background-size: cover;
    background-position: center;
    width: 100%;
    max-width: 352px;
    height: 380px;
    border-radius: 27px;
}

#madre:hover{
    background-image: url(IMAGENES/VELAS/RELIGIOSOS/MADRE2.png);
}


#familia{
    background-image: url(IMAGENES/VELAS/RELIGIOSOS/SAGRADAFLIA1.png);
    background-size: cover;
    background-position: center;
    width: 100%;
    max-width: 352px;
    height: 380px;
    border-radius: 27px;
}

#familia:hover{
    background-image: url(IMAGENES/VELAS/RELIGIOSOS/SAGRADAFLIA2.png);
}


#sagrado{
    background-image: url(IMAGENES/VELAS/RELIGIOSOS/SAGRADOCORA1.png);
    background-size: cover;
    background-position: center;
    width: 100%;
    max-width: 352px;
    height: 380px;
    border-radius: 27px;
}

#sagrado:hover{
    background-image: url(IMAGENES/VELAS/RELIGIOSOS/SAGRADOCORA2.png);
}


#tarjeta{
    background-image: url(IMAGENES/VELAS/TARJETAS/MARGARITA.png);
    background-size: cover;
    background-position: center;
    width: 100%;
    max-width: 352px;
    height: 420px;
    border-radius: 27px;
}

#tarjeta:hover{
    background-image: url(IMAGENES/VELAS/NAVIDAD/TARJETA1.png);
}


#rosa{
    background-image: url(IMAGENES/VELAS/QUINCE/ROSA1.png);
    background-size: cover;
    background-position: center;
    width: 100%;
    max-width: 352px;
    height: 380px;
    border-radius: 27px;
}

#rosa:hover{
    background-image: url(IMAGENES/VELAS/QUINCE/ROSA2.png);
}


#arbol{
    background-image: url(IMAGENES/VELAS/NAVIDAD/ARBOL1.png);
    background-size: cover;
    background-position: center;
    width: 100%;
    max-width: 352px;
    height: 380px;
    border-radius: 27px;
}

#arbol:hover{
    background-image: url(IMAGENES/VELAS/NAVIDAD/ARBOL2.png);
}

#nacimiento{
    background-image: url(IMAGENES/VELAS/NAVIDAD/NACIMIENTO1.png);
    background-size: cover;
    background-position: center;
    width: 100%;
    max-width: 352px;
    height: 380px;
    border-radius: 27px;
}

#nacimiento:hover{
    background-image: url(IMAGENES/VELAS/NAVIDAD/NACIMIENTO2.png);
}


#pebetero{
    background-image: url(IMAGENES/VELAS/NAVIDAD/TARJETA1.png);
    background-size: cover;
    background-position: center;
    width: 100%;
    max-width: 352px;
    height: 380px;
    border-radius: 27px;
}

#pebetero:hover{
    background-image: url(IMAGENES/VELAS/NAVIDAD/TARJETA2.png);
}


#deseos{
    background-image: url(IMAGENES/VELAS/NAVIDAD/DESEOS1.png);
    background-size: cover;
    background-position: center;
    width: 100%;
    max-width: 352px;
    height: 380px;
    border-radius: 27px;
}

#deseos:hover{
    background-image: url(IMAGENES/VELAS/NAVIDAD/DESEOS2.png);
}


#motivacional{
    background-image: url(IMAGENES/VELAS/NAVIDAD/MOTIVACION1.png);
    background-size: cover;
    background-position: center;
    width: 100%;
    max-width: 352px;
    height: 380px;
    border-radius: 27px;
}

#motivacional:hover{
    background-image: url(IMAGENES/VELAS/NAVIDAD/MOTIVACION2.png);
}


#navidad{
    background-image: url(IMAGENES/VELAS/NAVIDAD/NAVIDAD1.png);
    background-size: cover;
    background-position: center;
    width: 100%;
    max-width: 352px;
    height: 380px;
    border-radius: 27px;
}

#navidad:hover{
    background-image: url(IMAGENES/VELAS/NAVIDAD/NAVIDAD2.png);
}


#larga{
    background-image: url(IMAGENES/VELAS/NAVIDAD/LARGA1.png);
    background-size: cover;
    background-position: center;
    width: 100%;
    max-width: 352px;
    height: 380px;
    border-radius: 27px;
}

#larga:hover{
    background-image: url(IMAGENES/VELAS/NAVIDAD/LARGA2.png);
}


#mirella{
    background-image: url(IMAGENES/VELAS/NAVIDAD/MIRELLA1.png);
    background-size: cover;
    background-position: center;
    width: 100%;
    max-width: 352px;
    height: 380px;
    border-radius: 27px;
}

#mirella:hover{
    background-image: url(IMAGENES/VELAS/NAVIDAD/MIRELLA2.png);
}


#cuaderno{
    background-image: url(IMAGENES/TEMPORADAS/ENFERMERO/CUADERNO.png);
    background-size: cover;
    background-position: center;
    width: 100%;
    max-width: 352px;
    height: 380px;
    border-radius: 27px;
}

#cuaderno:hover{
    background-image: url(IMAGENES/TEMPORADAS/ENFERMERO/CUADERNO2.png);
}


#choco{
    background-image: url(IMAGENES/TEMPORADAS/ENFERMERO/CHOCOSOBRE1.png);
    background-size: cover;
    background-position: center;
    width: 100%;
    max-width: 352px;
    height: 380px;
    border-radius: 27px;
}

#choco:hover{
    background-image: url(IMAGENES/TEMPORADAS/ENFERMERO/CHOCOSOBRE2.png);
}


#llaveroenfer{
    background-image: url(IMAGENES/TEMPORADAS/ENFERMERO/LLAVERO1.png);
    background-size: cover;
    background-position: center;
    width: 100%;
    max-width: 352px;
    height: 380px;
    border-radius: 27px;
}

#llaveroenfer:hover{
    background-image: url(IMAGENES/TEMPORADAS/ENFERMERO/LLAVERO2.png);
}


#cerveza{
    background-image: url(IMAGENES/TEMPORADAS/PADRE/BOLSILLO.png);
    background-size: cover;
    background-position: center;
    width: 100%;
    max-width: 352px;
    height: 420px;
    border-radius: 27px;
}

#cerveza:hover{
    background-image: url(IMAGENES/TEMPORADAS/PADRE/BOLSILLO2.png);
}


#Chocollavero{
    background-image: url(IMAGENES/TEMPORADAS/PADRE/CHOCOLLAVERO.png);
    background-size: cover;
    background-position: center;
    width: 100%;
    max-width: 352px;
    height: 420px;
    border-radius: 27px;
}

#Chocollavero:hover{
    background-image: url(IMAGENES/TEMPORADAS/PADRE/CHOCOLLAVERO2.png);
}


#Colombina{
    background-image: url(IMAGENES/TEMPORADAS/PADRE/CHUPETA.png);
    background-size: cover;
    background-position: center;
    width: 100%;
    max-width: 352px;
    height: 420px;
    border-radius: 27px;
}

#Colombina:hover{
    background-image: url(IMAGENES/TEMPORADAS/PADRE/CHUPETA2.png);
}


#Cilindro{
    background-image: url(IMAGENES/TEMPORADAS/PADRE/CILINDRO.png);
    background-size: cover;
    background-position: center;
    width: 100%;
    max-width: 352px;
    height: 420px;
    border-radius: 27px;
}

#Cilindro:hover{
    background-image: url(IMAGENES/TEMPORADAS/PADRE/CILINDRO2.png);
}


#Destapador{
    background-image: url(IMAGENES/TEMPORADAS/PADRE/DESTAPADOR.png);
    background-size: cover;
    background-position: center;
    width: 100%;
    max-width: 352px;
    height: 420px;
    border-radius: 27px;
}

#Destapador:hover{
    background-image: url(IMAGENES/TEMPORADAS/PADRE/DESTAPADOR2.png);
}


#Estuche{
    background-image: url(IMAGENES/TEMPORADAS/PADRE/ESTUCHE.png);
    background-size: cover;
    background-position: center;
    width: 100%;
    max-width: 352px;
    height: 420px;
    border-radius: 27px;
}

#Estuche:hover{
    background-image: url(IMAGENES/TEMPORADAS/PADRE/ESTUCHE2.png);
}


#Pack{
    background-image: url(IMAGENES/TEMPORADAS/PADRE/FOURPAC.png);
    background-size: cover;
    background-position: center;
    width: 100%;
    max-width: 352px;
    height: 480px;
    border-radius: 27px;
}

#Pack:hover{
    background-image: url(IMAGENES/TEMPORADAS/PADRE/FOURPAC3.png);
}


#Jarrasce{
    background-image: url(IMAGENES/TEMPORADAS/PADRE/JARRAS.png);
    background-size: cover;
    background-position: center;
    width: 100%;
    max-width: 352px;
    height: 480px;
    border-radius: 27px;
}

#Jarrasce:hover{
    background-image: url(IMAGENES/TEMPORADAS/PADRE/JARRA2.png);
}


#Mugcaja{
    background-image: url(IMAGENES/TEMPORADAS/PADRE/TEMATICO.png);
    background-size: cover;
    background-position: center;
    width: 100%;
    max-width: 352px;
    height: 480px;
    border-radius: 27px;
}

#Mugcaja:hover{
    background-image: url(IMAGENES/TEMPORADAS/PADRE/TEMATICO2.png);
}


#cajaamor{
    background-image: url(IMAGENES/TEMPORADAS/AMOR/BOTIQUIN2.png);
    background-size: cover;
    background-position: center;
    width: 100%;
    max-width: 352px;
    height: 420px;
    border-radius: 27px;
}

#cajaamor:hover{
    background-image: url(IMAGENES/TEMPORADAS/AMOR/BOTIQUIN1.png);
}


#capibara{
    background-image: url(IMAGENES/TEMPORADAS/AMOR/MUGS2.png);
    background-size: cover;
    background-position: center;
    width: 100%;
    max-width: 352px;
    height: 420px;
    border-radius: 27px;
}

#capibara:hover{
    background-image: url(IMAGENES/TEMPORADAS/AMOR/MUGS.png);
}



#Sixpac{
    background-image: url(IMAGENES/TEMPORADAS/AMOR/SIXPAC2.png);
    background-size: cover;
    background-position: center;
    width: 100%;
    max-width: 352px;
    height: 420px;
    border-radius: 27px;
}

#Sixpac:hover{
    background-image: url(IMAGENES/TEMPORADAS/AMOR/SIXPAC.png);
}


#Cora{
    background-image: url(IMAGENES/TEMPORADAS/AMOR/CORAZON.png);
    background-size: cover;
    background-position: center;
    width: 100%;
    max-width: 352px;
    height: 420px;
    border-radius: 27px;
}

#Cora:hover{
    background-image: url(IMAGENES/TEMPORADAS/AMOR/CORAZON2.png);
}


#chupetashallo{
    background-image: url(IMAGENES/TEMPORADAS/HALLOWEEN/CHUPETA.png);
    background-size: cover;
    background-position: center;
    width: 100%;
    max-width: 352px;
    height: 390px;
    border-radius: 27px;
}

#chupetashallo:hover{
    background-image: url(IMAGENES/TEMPORADAS/HALLOWEEN/CHUPETA2.png);
}


#domo{
    background-image: url(IMAGENES/TEMPORADAS/HALLOWEEN/DOMO.png);
    background-size: cover;
    background-position: center;
    width: 100%;
    max-width: 352px;
    height: 400px;
    border-radius: 27px;
}

#domo:hover{
    background-image: url(IMAGENES/TEMPORADAS/HALLOWEEN/DOMO2.png);
}


#esferas{
    background-image: url(IMAGENES/TEMPORADAS/NAVIDAD/ESFERAS.png);
    background-size: cover;
    background-position: center;
    width: 100%;
    max-width: 352px;
    height: 400px;
    border-radius: 27px;
}

#esferas:hover{
    background-image: url(IMAGENES/TEMPORADAS/NAVIDAD/ESFERAS2.png);
}


#mugsnav{
    background-image: url(IMAGENES/TEMPORADAS/NAVIDAD/MUGS.png);
    background-size: cover;
    background-position: center;
    width: 100%;
    max-width: 352px;
    height: 400px;
    /*border-radius: 27px;*/
}

#mugsnav:hover{
    background-image: url(IMAGENES/TEMPORADAS/NAVIDAD/MUGS2.png);
}


#esferassubli{
    background-image: url(IMAGENES/TEMPORADAS/NAVIDAD/SUBLI.png);
    background-size: cover;
    background-position: center;
    width: 100%;
    max-width: 352px;
    height: 400px;
    border-radius: 27px;
}

#esferassubli:hover{
    background-image: url(IMAGENES/TEMPORADAS/NAVIDAD/SUBLI2.png);
}



#velasnavidad{
    background-image: url(IMAGENES/TEMPORADAS/NAVIDAD/VELA.png);
    background-size: cover;
    background-position: center;
    width: 100%;
    max-width: 352px;
    height: 400px;
    border-radius: 27px;
}

#velasnavidad:hover{
    background-image: url(IMAGENES/TEMPORADAS/NAVIDAD/VELA2.png);
}


/* MEDIA QUERIES PARA RESPONSIVE */

/* Tablets y pantallas medianas (hasta 992px) */
@media (max-width: 992px) {
    #encabezado {
    flex-wrap: wrap;
    padding: 15px;
    }

    #logo img {
    width: 120px;
    height: 100px;
    }

    .menu-toggle {
    display: flex;
    }

    #menu {
    width: 100%;
    order: 3;
    }

    #opciones {
    display: none;
    flex-direction: column;
    width: 100%;
    margin-top: 20px;
    }

    #opciones.active {
    display: flex;
    }

    #opciones li {
    margin: 10px 0;
    text-align: center;
    width: 100%;
    }

    .banner {
    border-width: 10px;
    }

    .card {
    max-width: 100%;
    }

    #cajas > div {
    flex: 1 1 100%;
    }
}

/* Móviles (hasta 576px) */
@media (max-width: 576px) {
    .contenedor {
    padding: 0 10px;
    margin: 15px auto;
    }

    #encabezado {
    border-radius: 20px;
    min-height: 80px;
    }

    #logo img {
    width: 100px;
    height: 80px;
    }

    #slogan {
    margin-top: 30px;
    font-size: 1.2rem;
    }

    .banner {
    border-width: 8px;
    border-radius: 20px;
    margin: 20px auto;
    }

    .banner img {
    min-height: 200px;
    border-radius: 15px;
    }

    #servicios, #fechas, #garantias, #lina {
    font-size: 1.8rem;
    margin-top: 30px;
    padding: 15px;
    border-radius: 20px;
    }

    .card {
    border-width: 3px;
    border-radius: 20px;
    }

    .card img {
    height: 250px;
    }

    .card-title {
    font-size: 20px;
    }

    .card-text {
    font-size: 16px;
    }

    .boton {
    font-size: 16px;
    padding: 8px 15px;
    }

    .tiempo {
    min-height: 280px;
    padding: 15px;
    }

    .tiempo img {
    width: 80px;
    height: 80px;
    }

    #historia {
    gap: 20px;
    padding: 15px;
    }

    #historia img {
    max-width: 200px;
    }

    #nombre {
    font-size: 1.5rem;
    }

    #sueño {
    font-size: 1rem;
    }

    #cajas {
    padding: 20px 10px;
    gap: 20px;
    }

    .titulos {
    font-size: 1.3rem;
    }

    .parrafo, #listado li, #motivos {
    font-size: 16px;
    }

    #Dulces a {
    padding: 10px;
    }

    #pagos a {
    padding: 15px;
    }

    #efectivo {
    width: 40px;
    height: 40px;
    }

    #bancolombia {
    width: 44px;
    height: 44px;
    }

    #nequi {
    width: 50px;
    height: 50px;
    }

    #medios {
    font-size: 16px;
    word-spacing: 10px;
    }

    #final {
    font-size: 16px;
    }

    #redes {
    font-size: 20px;
    }

    /* Ajuste para elementos con background-image */
    [id*="copas"], [id*="gorras"], [id*="llaveros"], 
    [id*="rompecabezas"], [id*="mouse"], [id*="solitario"],
    [id*="ramillete"], [id*="pequeño"], [id*="botones"],
    [id*="acrilicos"], [id*="lapiceros"], [id*="chocolates"],
    [id*="tematicos"], [id*="chupetas"], [id*="camisetas"],
    [id*="mamelucos"], [id*="camifamilia"], [id*="abecedarios"],
    [id*="tablas"], [id*="Botiquin"], [id*="tazas"], [id*="bonyurt"],
    [id*="dulcera"], [id*="duvalin"], [id*="libritos"], [id*="maleta"],
    [id*="elefante"], [id*="oso"], [id*="leon"], [id*="angel"],
    [id*="conejo"], [id*="primaveral"], [id*="caliz"], [id*="crucifijo"],
    [id*="lupita"], [id*="bombillo"], [id*="corcho"], [id*="exagonal"],
    [id*="mini"], [id*="graduado"], [id*="carmen"], [id*="guadalupe"],
    [id*="madre"], [id*="familia"], [id*="sagrado"], [id*="tarjeta"],
    [id*="rosa"], [id*="arbol"], [id*="nacimiento"], [id*="pebetero"],
    [id*="deseos"], [id*="motivacional"], [id*="navidad"], [id*="larga"],
    [id*="mirella"], [id*="cuaderno"], [id*="choco"], [id*="llaveroenfer"],
    [id*="cerveza"], [id*="Chocollavero"], [id*="Colombina"], [id*="Cilindro"],
    [id*="Destapador"], [id*="Estuche"], [id*="Pack"], [id*="Jarrasce"],
    [id*="Mugcaja"], [id*="cajaamor"], [id*="capibara"], [id*="Sixpac"],
    [id*="Cora"], [id*="chupetashallo"], [id*="domo"], [id*="esferas"],
    [id*="mugsnav"], [id*="esferassubli"], [id*="velasnavidad"] {
    height: auto;
    min-height: 250px;
    }
}

/* Pantallas muy pequeñas (hasta 412px) */
@media (max-width: 412px) {
  /* Forzar ancho y alto de cada tarjeta de garantía para que no se reduzcan */
  .tiempo {
    flex: 0 0 310px;     /* no se encoge, ocupa 310px de ancho fijo */
    max-width: 310px;
    width: 310px;
    min-height: 350px;   /* conserva la altura usada en 412px */
    box-sizing: border-box;
  }

  /* Imágenes dentro de las tarjetas de garantía: mantener aspecto redondeado */
  .card.tiempo img,
  .tiempo .card-img-top {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 50%;   /* borde circular (si prefieres esquinas redondeadas usa 30px) */
    display: block;
    margin: 0 auto;       /* centra la imagen dentro de la tarjeta */
  }

  /* Permitir scroll horizontal si las tarjetas no caben en pantallas muy estrechas */
  .domicilio {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 20px; /* espacio entre tarjetas en pantallas pequeñas */
    padding-bottom: 10px; /* evita que el scroll tape contenido */
  }
  
  #logo img {
    width: 80px;
    height: 70px;
  }

  .menu-toggle span {
    width: 25px;
  }

  #slogan {
    font-size: 1rem;
    margin-top: 20px;
  }

  .banner img {
    min-height: 180px;
  }

  #servicios, #fechas, #garantias, #lina {
    font-size: 1.5rem;
    padding: 12px;
  }

  .card img {
    height: 220px;
  }

  .card-title {
    font-size: 18px;
  }

  .card-text {
    font-size: 14px;
  }
}