@CHARSET "UTF8";

:root { --accent:#c43540; }

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: 'Quicksand';
    font-weight: 500;
}

/*modificacion para contendor voltistar de 80% al 100%*/
img{
    max-width: 100%;
}
a img{
    max-width: 100%;
}
#header{
    padding-top: 1em;
    background-color: #fff;
}
#top_menu{
    background-color: #de0322;
    color: #fff;
    font-family: 'Open Sans', sans-serif;
    padding: 0;
}
#top_menu a{
    color: #ffffff;
    text-decoration: none;
    text-align: center;
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
}
#top_menu a:hover{
    background-color: #000000;
}
#top_menu li a{
    padding-left: 8px;
    padding-right: 8px;
}
#logo{
	margin-bottom: 10px;
}
#contact{
    font-family: 'Open Sans', sans-serif;
    padding: 20px;
}
#contact a{
    color: #000000;
    text-decoration: none;
    display: inline;
    font-size: 14px;
    font-weight: bold;
}
#contact_link{
    border-right-style: solid;
    border-right-width: thin;
    border-right-color: #000000;
    margin-right: .5em;
    padding-right: 1em;
}
#title_description{
    padding: 0;
    color: #434142;
}
#title{
    color: #434142;
    font-weight: bold;
    font-size: 25px;
    border-bottom: solid thin #cccccc;
    margin-bottom: 10px;
    padding-bottom: 10px;
}
#title_description p{
    font-size: 13px;
    padding: 0;
    text-align: justify;
    color: #434142;   
}
#quienes-somos h3, #pagos h3, #entrega h3, #contacto h3{
    font-size: 1.15em;
    font-weight: bold;
    color: #ffcc00;
}
#quienes-somos, #pagos, #entrega, #contacto {
    padding: 0;
    font-family: 'Open Sans', sans-serif;
}
#pagos ul,li{
    font-size: 12.8px;
}
#pagos{
    margin-bottom: .7em;
}
#pagos li{
     color: #434142;
}
#entrega ul, #entrega li{
	list-style-type: none;
    font-size: 13px;
}
#entrega{
    margin-bottom: .7em;
}
#entrega li{
     color: #434142;
}
#quienes-somos p, #pagos p, #entrega p, #contacto p{
    font-size: 13px;
    text-align: justify;
    line-height: 1.5em;
    color: #434142;
}
#info{
    font-family: 'Open Sans', sans-serif;
    padding-top: 10px;
}
@media (max-width: 800px){
    #contact {
        text-align: center;
	    margin-top: 0px;
	    padding: 15px;
	}
    #logo img{
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 10px;
    }
}
#politicas{
    margin-top: 3em;
    font-family: 'Open Sans', sans-serif;
    padding: 15px 30px;
    background-color: #f3f3f3;
}
hr{
    border-top: 1px solid #ccc;
}
.more_info_feature_title, .pagos-titulo, .quienes-somos-titulo, .entrega-titulo{
    font-size: 18px;
    color: #000000;
    margin-bottom: 1em;
    padding-bottom: .3em;
    font-family: 'Open Sans', sans-serif;
}
.lista{
    color: #434142;
    font-size: 12.8px;
    font-family: 'Open Sans', sans-serif;
}
.lista > p {
	margin-left: 15px;
	margin-right: 15px;
	text-align: justify;
}
.lista .row{
     color: #434142;
}
.lista .row{
    padding-left: 15px;
}

/* Servicios */
.servicios{
    margin-top: 70px;
    margin-bottom: 20px;
}

.servicios p{
    font-size: 14px;
    padding-top: 10px;
}

/* Aviso top */
.aviso_top{
    background: #000000;
    padding: 60px 30px 10px 15px;
	color: #ffffff;
    font-family: 'Open Sans', sans-serif;
    font-size: 9px;
    margin-bottom: 20px;
}
.aviso_top span, .aviso_top p {
	color: #fff;
	margin: 0;
}
@media (max-width: 768px) {
    .aviso_top {
        padding: 20px 30px 20px 15px;
    }
    #top_menu{
        margin-top: 10px;
    }
}

/* Banners */
.banners img{
    width:100%;
}

/* MENU */
@media (min-width: 768px){
    .navbar-nav {
        float: unset;
    }
    .nav>li {
        position: relative;
        display: inline-flex;
    }
    .navbar-nav>li {
        float: unset;
    }
}




/* ——— Bloques "Protecciones" y "Certificaciones" ——— */
.psx-title { margin: 0 0 .4rem; color: var(--accent); }

.psx-certs { margin-top: .6rem; overflow: hidden; } /* oculta cualquier 1px suelto */


.psx-cert-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .55rem .5rem .65rem; /* compacto */
  border: 1.2px solid rgba(196,53,64,.5);
  border-radius: 10px;
  background: transparent;
  transition: border-color .2s, box-shadow .2s, transform .1s;
  max-width: 100%;
}

.psx-cert-card::before {
  content:"";
  position: absolute;
  left: 0; top: 0; bottom: 0; /* dentro del borde, no -1px */
  width: 3px;
  background: var(--accent);
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}

.psx-cert-card:hover,
.psx-cert-card:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(196,53,64,.14);
  transform: translateY(-1px);
}

.psx-thumb-wrap{
  width: 40px; height: 40px; flex: 0 0 40px;
  display: grid; place-items: center;
  border: 1.5px solid var(--accent);
  border-radius: 8px;
}

.psx-cert-thumb{ 
  max-width: 28px; max-height: 28px; 
  object-fit: contain; display:block;
}

/* Iconos FA: evita inline y compacta altura */
.psx-prot-icon i{ font-size: 1.2rem !important; line-height: 1; color: var(--accent); }

/* Texto compacto (no tocamos tus tamaños globales) */
.psx-cert-body{ display: grid; gap: .1rem; min-width: 0; }
.psx-cert-name{ color: var(--accent); font-weight: 700; line-height: 1.15; }
.psx-cert-sub{ opacity: .9; }

/* Responsive fino */
@media (max-width: 560px){
  .psx-cert-card{ padding: .45rem .5rem; }
  .psx-thumb-wrap{ width: 36px; height: 36px; flex-basis:36px; }
  .psx-cert-thumb{ max-width: 24px; max-height: 24px; }
}
@media (max-width: 380px){
  .psx-cert-sub{ display:none; } /* recorta altura en móviles muy pequeños */
}



/*Añadir estilos a contenedor Voltistar*/

.product-container-description-img {
  position: relative;
  display: inline-block;
  width: 100%;
}

.product-container-description-img img {
  position: absolute;
  border-radius: 10px;
  top: 0;
  left: 0;
  z-index: 5;
  width: 100%;
}

.product-container-description-img img.main {
  position: relative;
  border-radius: 10px;
}

/* BUBBLES */
.bubble {
  position: absolute;
  width: 3%;
  height: 3.5%;
  background: #c43540;
  border-style: solid;
  border-radius: 50%;
  border-width: 5px;
  cursor: pointer;
  transition: transform 0.2s ease;
  opacity: 0.8;
  z-index: 10;
}

.bubble:hover {
  transform: scale(1.3);
  opacity: 1;
  z-index: 20;
}

/* posiciones */
#pasta {
  top: 35%;
  left: 66%;
}
#placa {
  top: 13%;
  left: 60%;
}
#cable-reforzado {
  top: 6%;
  left: 83%;
}
#cable-interno {
  top: 36%;
  left: 72%;
}
#enchufe {
  top: 77%;
  left: 18%;
}
#arrancador {
  top: 76%;
  left: 37%;
}
#cargador {
  top: 72%;
  left: 66%;
}
#bateria {
  top: 78%;
  left: 80%;
}

.bubble-info {
  position: absolute;
  bottom: 140%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(40, 40, 40, 0.95);
  color: #fff;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.4;
  min-width: 160px;
  max-width: min(80vw, 260px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  text-align: center;
  z-index: 20;
  box-sizing: border-box;
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.bubble:hover .bubble-info {
  opacity: 1;
}

/* Para móviles */
@media (max-width: 750px) {
  .bubble {
    width: 4%;
    height: 4.6%;
  }

  .bubble:hover {
  transform: scale(1.5);
  }
  
  .bubble-info {
    font-size: 9px; 
    padding: 4px 8px;
    min-width: 100px;
    max-width: 120px;
    bottom: 130%; 
    line-height: 1.2;
  }
}




/*Se añade estilos para las clases de las descripciones*/
.compatibles {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
    list-style: none;
    padding: 0;
    margin: 0;
    width: 96% !important;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    font-size: 16px;
    line-height: 26px;
    color: var(--color_font);
    box-sizing: inherit;
    outline: none!important;
    font-family: var(--font-primary);
    padding-left: .75rem;
    list-style-position: inside;
    list-style-type: disc;
}


.compatibles li {

    direction: ltr;
    -webkit-font-smoothing: antialiased;
    list-style: none;
    list-style-position: inside;
    list-style-type: disc;
    font-family: var(--font-primary);
    user-select: none;
    border: 1px solid transparent;
    color: var(--button_p_color);
    border-color: var(--button_p_border);
    background-color: transparent;
    font-size: 12px!important;
    line-height: 1.35!important;
    box-sizing: border-box;
    outline: none!important;
    text-align: center;
    vertical-align: middle;
    cursor: default;
    white-space: normal;
    word-break: break-word;
    padding: 8px 8px!important;
    min-height: 35px!important;
    flex: 1 1 200px!important;
    max-width: 300px;
    border-radius: var(--border-radius-xs);
    display: flex!important;
    align-items: center;
    justify-content: center;
    gap: var(--spaces-sm);
    font-weight: 500!important;
    width: fit-content;
    min-width: 100px;
    height: 40px;
    transition: all .2s linear;
}


.compatibles li:hover {
    color: var(--button_p_color_hover);
    background-color: var(--button_p_bk_hover);
    border-color: var(--button_p_border_hover);
    transition: all .2s linear;
}





img#product_picture_1 {
    max-width: 80%;
}