html{
    box-sizing:border-box;
    overflow-x:clip;
}

*,
*::before,
*::after{
    box-sizing:inherit;
}



body{
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    margin-top:50px;
    max-width: 100%;
    overflow-x:clip;
   
}

body.articulosparaiglesia{
    background-color: white;
}

body.regaleria{
    background-color: rgb(240, 148, 240);
}

header{
    position:static;
    top: 0px;
    width:100%;
    z-index: 1000;
    background-color:rgb(239, 181, 239);
    color: blueviolet;
    text-align:center;
    padding: 15px;
    border-bottom: 1px solid violet;
    
}

.LogoMeI1 img {
    width: 150px;
    height: auto;
    float: left;
    border-radius: 10px;
}

.LogoMeI2 img {
    width: 80px;
    height: auto;
    border-radius: 10px;
    border-color: blueviolet;
    border: 2px solid blueviolet;
    float: left;
        margin-top: -18px;
}





/*.subtitulo {
    margin:5px 0 10px 0;
}*/






#menu{
    position:relative;
    display:block;
    
    
}

.menu-btn{
    padding: 8px 15px;
    cursor:pointer;
    font-size: 16px;
    float:left;
     margin-top: -18px;
     margin-left: 20px;
}

.menu-lista {
   
    list-style: none;
    padding:0;
    margin:0;
    background-color: white;
    position:absolute;
    width:160px;
    left: 19%;
    transform:translateX(-50%);

    max-height:0;
    overflow:hidden;
    transition:max-height 0.4s ease, opacity 0.3s ease;opacity: 0;
     border-radius: 10px;
     border: 2px solid blueviolet;
     z-index: 1000;
}

.menu-lista.activo{
    max-height:500px;
    opacity: 1;
    margin-top: auto;
    
}

.menu-lista li {
    padding:10px;
    border-bottom: 1px solid white;
}

.menu-lista li a {
    text-decoration:none;
    color:rgb(210, 13, 13);

}


.contenedor{
    display:flex;
    flex-direction: column;
    justify-content: flex-start;
    margin-left: 25px;
    gap:40px;
    padding:20px;
    
}

.div-imggrande{
    display:flex;
    flex-direction: row;
    justify-content: flex-start;
    margin-left: 25px;
    gap:40px;
    padding:20px;
    align-items:flex-start;
}   
   





.contenedor2{
    display:flex;
    flex-direction: column;
    justify-content:flex-end;
    margin-top: -50px;
    gap:40px;
    padding:20px;
    align-items:flex-start;
}

#contenedor3{
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    align-items:flex-start;
    gap:40px;
    padding:20px;
    
}

.contenedor-miniaturas{
    display:flex;
    flex-direction: row;
    justify-content: center;
    margin-inline: initial;
    gap:20px;
    padding:20px;
    
}

.layout-producto{
    display:grid;
    grid-template-columns: minmax(0,2.5fr) minmax(0,3fr) minmax(0,2fr);
    gap:40px clamp(12px,1.5vw,20px);
    align-items:start;
    padding:20px clamp(8px,1.5vw,16px)24px;
    width:100%;
    max-width:100%;
}

.layout-producto .div-imggrande {
    display: contents;
}

.layout-producto .imagen-grande{
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    max-width:100%;
}

.layout-producto .miniaturas,
.layout-producto .contenedor-miniaturas {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    max-width:100%;
    box-sizing:border-box;
    align-self:start;
}


.layout-producto .contenedor-miniaturas{
    margin: 0;
    padding: 0;
}

.layout-producto .miniaturas {
    width:100%;
    margin-top: 0;
    grid-template-columns: repeat(auto-fill,minmax(min(72px,100%),1fr));       
}

.layout-producto .mini{
    width:100%;
    max-width: 100px;
    height: auto;
    aspect-ratio: 1;
}

.layout-producto .sidebar{
    grid-column: 3;
    grid-row: 1;
    width:100%;
    min-width:0;
    max-width:100%;
    justify-self:stretch;
    margin-top:0;
}

.layout-producto .div.tufi{
    grid-column: 1;
    grid-row: 1;
    width:0;
    height:0;
    overflow:visible;
    padding:0;
    margin:0;
}

.imagen-grande img{
    width: 400px;
    height:400px;
    object-fit:scale-down;
    border-radius: 10px;
    border-color: blueviolet;
    border: 3px solid blueviolet;
    background-color: white;
}

.layout-producto .imagen-grande img{
    max-width:100%;
}

.imagen-grandeinicio img{
    width: 300px;
    height:400px;
    object-fit:scale-down;
    border-radius: 10px;
    border-color: blueviolet;
    border: 2px solid blueviolet;
}




.div.tufi{
    display:flex;
    flex-direction:row;
    align-items:left;
    gap:10px;
}


.tufi{
    width:80px;
    height:80px;
    object-fit:cover;
    display: flex;
    justify-content:flex-start;
     padding-right: 80px;  
     position:fixed;
     bottom: 70px;
     left:40px;
     z-index: 2000;
     
}  
/*
#tufiConsultas img{
    width:100%;
    height: 100%;
    object-fit:cover;
    border-radius:15px;
    position:fixed;
    bottom:0;
    right:0;
    cursor:pointer;
};
*/

#boton-Consultas{
    padding: 20px 30px;
    font-size:14px;
    cursor:pointer;
    border-radius: 10px ;
    border: 1px solid blueviolet;
    background-color:rgb(239, 181, 239);
    color:blueviolet;
    position:fixed;
    bottom: 0px;
    left: 0px;
}


.miniaturas{
    display: grid;
   grid-template-columns: repeat(5, 1fr);
    gap: 15px;
    margin-top: 20px;
    }

.mini{
    width: 100px;
    height: 100px;
    object-fit:cover;
    cursor:pointer;
    border-radius:5px;
    border-color: blueviolet;
    border: 2px solid blueviolet;
    transition: 0.3s;
    background-color: white
}

.mini:hover{
    transform:scale(1.1);
}


.mini2{
    width: 100px;
    height: 100px;
    object-fit:scale-down;
    cursor:pointer;
    border-radius:5px;
    border-color: blueviolet;
    border: 2px solid blueviolet;
    transition: 0.3s;
    background-color: white
}

.mini2:hover{
    transform:scale(1.1);
}


.descripcion{
    text-align:center;
    margin-bottom: 50px;
}




/*color de botones
background-color: rgb(239, 181, 239);
    color: blueviolet;
    border: 1px solid blueviolet;
    */




button{
    padding: 12px 25px;
    margin:25px;
    font-size:16px;
    cursor:pointer;
    border-radius: 10px ;
    border: 1px solid blueviolet;


}


#botonW{

background-color:rgb(239, 181, 239);
color:blueviolet;
border: 1px solid blueviolet;
}

#botonPrecios{
    background-color: rgb(239, 181, 239);
    color: blueviolet;
    border: 1px solid blueviolet;
}


#botonRegresar{
    background-color: rgb(239, 181, 239);
    color: blueviolet;
    border: 1px solid blueviolet;
}

#boton-liturgia{
    background-color: rgb(239, 181, 239);
    color: blueviolet;
    border: 1px solid blueviolet;
}
#boton-regaleria{
    background-color: rgb(239, 181, 239);
    color: blueviolet;
    border: 1px solid blueviolet;
}

#boton-ArticulosParaIglesia{
    background-color: rgb(239, 181, 239);
    color: blueviolet;
    border: 1px solid blueviolet;
}

#boton-Discontinuos{
    background-color: rgb(239, 181, 239);
    color: blueviolet;
    border: 1px solid blueviolet;
}


#boton-Youtube{
    background-color: rgb(239, 181, 239);
    color: blueviolet;
    border: 1px solid blueviolet;
}


#boton-Facebook{
    background-color: rgb(239, 181, 239);
    color: blueviolet;
    border: 1px solid blueviolet;
}

#boton-Instagram{
    background-color: rgb(239, 181, 239);
    color: blueviolet;
    border: 1px solid blueviolet;
}

#boton-AbbapadreFacebook{
    background-color: rgb(239, 181, 239);
    color: blueviolet;
    border: 1px solid blueviolet;
}


p.futuro-botón{
    font-size: 18px;
   text-align: left;
    color: rgb(126, 16, 229);
    margin: 20px;
    padding: 10px;
    border-radius: 10px;
    border: 2px solid blueviolet;
    background-color: white;
}



/*codigo de los sidebar de las paginas*/

.layout2 {
    display: flex;
    flex-direction: row;
    right: 25px;
    top: auto;
     margin-top: 20px;
     
}

.sidebar2{
    width: 200px;
    background-color: rgb(239, 181, 239);
    padding: 20px;
    border-radius: 10px;
    border: 2px solid blueviolet;
    margin-left: 200px;
    margin-top: 25px;
}


.layout {
    display: flex;
    flex-direction: row;
    right: 25px;
    top: auto;
     margin-top: 25px;
}

.sidebar{
    width: 200px;
    background-color: rgb(239, 181, 239);
    padding: 20px;
    border-radius: 10px;
    border: 2px solid blueviolet;    ;
    margin-top: 25px;
    text-align: center;
    list-style-position:outside;
}

.sidebar a{
    overflow-wrap:break-word;
    word-break:break-word
}

.sidebar ul{
    list-style:none;
    margin:0;
    padding:0
}

.sidebar .titulo{
    color:white;
    font-weight:bold;
    font-size:0.95rem;
    margin-bottom: 12px;
}

.sidebar .subcategorias{
    padding:0;
    }


/*categorias principales (mayúsculas,viñeta negra)*/

.sidebar .subcategorias >li {
    margin-bottom: 10px;
    text-align:center;
}

.sidebar .subcategorias >li >a {
    color:blueviolet;
    text-decoration:underline;
    text-transform:uppercase;
    font-size: 0.9rem;
    display:list-item;
    list-style:disc;
    list-style-position:outside;
    margin-left: 1em;
}
    
/*subcategorias (viñeta blanca, más identación) */

.sidebar .subcategorias >ul.sub-subcategoria,
.sidebar .subcategorias >ul.sub-subcategoria,
.sidebar .sub-categoria,
.sidebar .sub-subcategoria {
    margin:4px 0 8px 0;
    padding-left: 0.5em;
}

.sidebar .subcategorias li,
.sidebar .sub-subcategoria li {
    margin: 3px 0;
    text-align: center;
}

.sidebar .subcategorias a,
.sidebar .sub-subcategoria  a{
    color:blueviolet;
    text-decoration:underline;
    text-transform:none;
    font-size: 0.85rem;
    display:list-item;
    list-style:circle;
    list-style-position:outside;
    margin-left: 1.5em;
}

.categorias {
    margin-bottom:0;
}


/*para el cel es todo lo que sigue*/

@media (max-width: 768px){
   
   nav {
      flex-direction: column;
   }


   .layout-producto {
    grid-template-columns:1fr;
    padding:0 12px 20px;
   }

    .layout-producto .imagen-grande,
    .layout-producto .miniaturas,
    .layout-producto .contenedor-miniaturas,
    .layout-producto .sidebar {
        grid-column: 1;
        grid-row: auto;
        max-width: 100%;
   }

   .layout-producto .sidebar{
    max-width:none;
   }

    .contenedor{
flex-direction: column;
align-items: center;
    }


.imagen-grande img {
    width:300px;
    height:300px;
}
/*
.tufi img{
    width: 50px;
    height: 50px;
}       

#tufiConsultas img{
     width:70px;
    height: 70px;
}
*/
.miniaturas {
    grid-template-columns: repeat(3,80px);
}

.mini{
    width: 80px;
    height: 80px;
 }

}