body {
    font-family:'Roboto', arial;
  margin:0px;
  padding:0px;
  background:white;
  color:black;
}

input, select, button, textarea {
font-size: 16px;
}

input, textarea, select, button {
border: 2px solid #ecf2ff;
color: #666666;
margin: 5px;
padding: 7px 10px;
background: #FFFFFF;
border-radius: 9px;
}
*, :focus, :hover {
outline: none;
}
input:hover,input:focus{
border:solid 2px gray;
}
input[type=button]:hover,input[type=submit]:hover,input[type=button]:focus,input[type=submit]:focus{
background:gray;
color:white
}

input[type=button]:active,input[type=submit]:active{
background:gray;
color:white
}


pre{
   font-family:'Roboto', arial;  
}
    
.rad10{
    border-radius:10px;
}
.rad5{
border-radius:5px;
}
.det-box{

}
table{

overflow: hidden;
}
a{

text-align:center;

text-decoration:none;
}
a:hover{

}
#logo{
border-radius:50%;
background:white;
padding:3px;
}

#cab{

}
#banner{
height: 200px;
width:95%;
overflow:auto;
background:;
}
#det_prod{

border-radius:10px;
box-shadow: ;
padding:10px;
}
#det_prod_img{
background: white;
padding: 10px;
border-radius: 10px 0 0 10px;
height: 420px;
}
#det_prod_img_center{
margin: 0 auto;

height: 400px;
padding-top: 10px;
}
#det_prod_img div{
border-radius:5px;
}
#det_prod_precio{

text-align:initial;
padding:10px;

}
.cab-bco a{
color:white;
}
.cab-bco a:hover{
background:rgba(255,255,255,.5);

}
.cab-bco a:active{
background:rgba(255,255,255,1);
color:rgba(0,0,0,1);
}
.cab-neg a{
color:black;
}
.cab-neg a:hover{
background:rgba(255,255,255,.5);

}
.cab-neg a:active{
background:rgba(255,255,255,1);
color:rgba(0,0,0,1);
}
#CantImgs{
overflow-x:auto;
}
.familias
{
    text-align:center;
    display:inline-block;
    width:100%;
    margin:0px;
    padding-top:5px;
    margin-bottom:0;
    scrollbar-width: none;
}

.fsquare 
{
    width:10%;
    height:30px;
    text-align:center;
    display:inline-block;
    background:#147CC0;
}
.fsquare p{
    margin: auto;
    position: relative;
    top: 50%;
    left:50%;
    transform: translate(-50%, -50%)
}
.sub-familias
{
    display:inline-block;
    width:100%;
    margin:0px;
    padding-left:1%;
    padding-top:5px;
    background:none;
   
    font-size:.9em;
    scrollbar-width: none;
    margin-bottom: 5px;
} 

.nav
{
    display:inline-block;
    width:100%;
    margin:0px;
    padding-left:1%;
    padding-top:5px;
    background:none;
   text-align: left;
    font-size:.9em;
    scrollbar-width: none;
    margin-bottom: 10px;
} 
 
.sfsquare 
{
    width:10%;
    height:25px;
    text-align:center;
    display:inline-block;
    background:#147CC0;
}
.sfsquare p{
    margin: auto;
    position: relative;
    top: 50%;
    left:50%;
    transform: translate(-50%, -50%)
}

.phead{
    background:#d6c0c0;
    width:90%;
    margin:auto;
    
}
.container
{
    background: rgba(255,255,255,.7);
}
.sombra:hover
{
    -webkit-box-shadow: 1px 1px 14px -3px rgba(0,0,0,0.75);
    -moz-box-shadow: 1px 1px 14px -3px rgba(0,0,0,0.75);
    box-shadow: 1px 1px 14px -3px rgba(0,0,0,0.75);
}

.square
{
   
    text-align:left;
    border: 1px solid #DADDE1;
  
    background:white;
    

}
.square_det
{
    margin:auto;
    width:;
    height:350px;
    text-align:left;
    border:;
    display:inline-block;
    background:white;
    overflow:hidden;

}
.pcontainer
{
    text-align:center;
    display:inline-block;
    width:100%;
    margin:0px;
    margin-top:30px;
    margin-bottom:20px;
    
}
.psquare
{
    margin:5px;
    width:30px;
    height:30px;
    text-align:center;
    display:inline-block;
    
}

.art_title{
    padding-top:5px;
    padding-bottom:5px;
}
.art_image{
    
}
.col-6 {
   padding-left: 0.2em;
   padding-right: 0.2em;
   padding-bottom: 0.2em;
}
.card{
    height: 100%;
    padding-top:5%;
    padding-bottom:5%;
}

.container{
    padding:0px;
}


.img-contenedor{    
    position: relative;
    width: 100%;
    padding-bottom: 100%; /* Relacionado al ancho del contenedor */
}
.img-cuadrado {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit:scale-down;
}
.art_image_center{
    
    max-width: 100%;
   height: fit-content;
    justify-content: center;
    align-items: center;
    display: flex;
}
.art_image2{
    border: green solid 1px;
    object-fit:contain;
    object-position: center;
}
.art_title:hover{
    -webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}

.transparente{
float:;
position:fixed;
right:0px;
left:0px;
top:0px;
bottom:0px;
background: black;
z-index: 100;
filter:alpha(opacity=70);
-moz-opacity: 0.8;
opacity: 0.8;
}


.contenedor{
float:;
position: fixed;
background:#D4D0C8;
min-width:50%;
height:90%;
z-index: 150;

top:5%;
left:5%;
right:5%;
filter:alpha(opacity=100);-moz-opacity:;opacity:;
box-shadow: 0 0 10px 0 black;
border-radius:10px;
/*margin: 30px auto auto 30px;*/
/*margin-left:-300px;
margin-top:-200px;*/
}
#contenido{
height:90%;
}
#float_head{
box-shadow: 0 4px 5px -1px gray;
margin-bottom: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}

#float_head h3{
margin:0px
}

</style>

<style>
/*
Slideshow
*/
* {box-sizing: border-box;}

.mySlides {display: none;}

img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
position: relative;
margin: auto;
padding:auto;

}

/* The dots/bullets/indicators */
.dot {
cursor:pointer;
}

.active {
border: solid 2px gray;
}

/* Fading animation */
.fade {
    opacity:1;
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
.fade:not(.show) {
    opacity: 1;
}

@-webkit-keyframes fade {
from {opacity: .4} 
to {opacity: 1}
}

@keyframes fade {
from {opacity: .4} 
to {opacity: 1}
}

.btn{
bg-color:;
}

.btn:hover{
cursor:pointer;
background: lightgreen;
}

.p_mnn{
    padding-top: 1em;
    padding-bottom: 1em;
    color:white;
    background-color: #007BFF;
    text-align: center;
}
.p_mnn a{
    color: white;
}

/* Barra inferior SOLO en móviles */
@media (max-width: 767.98px) {

  /* Contenedor principal */
  .cab-mobilebar{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;

    /* distribución */
    width: 100%;
    display: flex !important;
    justify-content: space-around !important;
    align-items: center !important;
    gap: 0 !important;

    /* look */
    padding: .65rem .75rem;
    background: rgba(15, 15, 15, 0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 -10px 25px rgba(0,0,0,.25);

    /* por si Bootstrap le mete padding a col-* */
    margin: 0 !important;
  }

  /* Cada link como “botón” centrado */
  .cab-mobilebar > a.cab-bco{
    flex: 1 1 0;
    display: flex;
    justify-content: center;
    align-items: center;

    /* tamaño cómodo en móvil */
    font-size: 1.9rem !important;

    /* quita separaciones inline que pusiste */
    margin-right: 0 !important;

    /* área táctil */
    padding: .35rem 0;
    min-height: 48px;

    text-decoration: none;
  }

  /* Ajuste del badge del carrito para que no se salga raro */
  .cab-mobilebar #verCarrito{
    top: 6px !important;
    right: 20px;
    left: auto !important;
    transform: none !important;
  }

  /* Evita que la barra tape el contenido al final de la página */
  body{
    padding-bottom: 72px; /* ajusta si quieres más/menos alto */
  }
}

/* En escritorio: se comporta normal (no fijo abajo) */
@media (min-width: 768px){
  .cab-mobilebar{
    position: static;
    background: transparent;
    box-shadow: none;
    border: 0;
    padding: 0;
  }
}

@media (max-width: 767.98px) {
  /* Forzar que el contenedor col-6 sea 100% en móvil */
  .cab-mobilebar.col-6{
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
}