/***********************************************************************
       ___         __                        __  _          
      /   | __  __/ /_____  ____ ___  ____  / /_(_)   _____ 
     / /| |/ / / / __/ __ \/ __ `__ \/ __ \/ __/ / | / / _ \
    / ___ / /_/ / /_/ /_/ / / / / / / /_/ / /_/ /| |/ /  __/
   /_/  |_\__,_/\__/\____/_/ /_/ /_/\____/\__/_/ |___/\___/   
      __          ________                 ____      _ __     
     / / __ __   /_  __/ / ___ __ _ ___   / __/__ __(_) /____ 
    / _ | // /    / / / _ | -_)  ' | -_) _\ \ / // / / __/ -_)
   /_.__|_, /    /_/ /_//_|__/_/_/_|__/ /___/ \_,_/_/\__/\__/ 
       /___/                                                                                     

   Theme Name:      Automotive Child Theme
   Description:     Finally a gorgeous website template for car dealerships that doesn’t just look beautiful, but also includes complete easy-to-use functionality. Whether your business is a small car dealer or a large fully functional car dealership, you are sure to find what you need in this automotive template.
   Theme URI:       http://demo.themesuite.com/automotive-wp/
   Version:         4.0
   Author:          Theme Suite
   Author URI:      http://www.themesuite.com/
   Support:         http://support.themesuite.com/
   License:         GNU GPL
   Tags:            white, light, one-column, two-columns, right-sidebar, fluid-layout, editor-style, featured-images, sticky-post, translation-ready
   License URI:     http://demo.themesuite.com/automotive-wp/License/
   Template:        automotive
   
   Place custom CSS below this line
***********************************************************************/


/* CSS para el botón */
.btn-whatsapp button,
.btn-whatsapp a{
	border-radius: 10px !important;
    background: #25D366 !important;
    font-size: 20px !important;
    color: #fff !important;
    padding: 7px !important;
    display: flex !important;
	margin: 0 auto;
	justify-content: center;
	width:300px;
}


.btn-whatsapp button i,
.btn-whatsapp a i{
	position: relative !important;
    font-size: 24px !important;
    padding-right: 6px !important;
    padding-left: 10px !important;
	left: inherit !important;
	line-height:initial !important;
	transform: initial !important;
}

.btn-whatsapp button:hover,
.btn-whatsapp a:hover {
    background: #128C53 !important; /* Cambia el color de fondo al pasar el ratón */
    cursor: pointer !important; /* Cambia el cursor a un puntero al pasar el ratón */
}

.btn-whatsapp button:hover i,
.btn-whatsapp a:hover i {
    color: #eee !important; /* Cambia el color del ícono al pasar el ratón */
}

.btn-call button,
.btn-call a{
	border-radius: 10px !important;
    background: #ffffff !important;
    font-size: 20px !important;
    color: #767676 !important;
    padding: 7px !important;
    display: flex !important;
	margin: 0 auto;
	justify-content: center;
	width:300px;
}


.btn-call button i,
.btn-call a i{
	position: relative !important;
    font-size: 24px !important;
    padding-right: 6px !important;
    padding-left: 10px !important;
	left: inherit !important;
	line-height:initial !important;
	transform: initial !important;
}

.btn-call button:hover,
.btn-call a:hover {
    background: #bfbfbf !important; /* Cambia el color de fondo al pasar el ratón */
    cursor: pointer !important; /* Cambia el cursor a un puntero al pasar el ratón */
	color: #fff !important;
}

.btn-call button:hover i,
.btn-call a:hover i {
    color: #fff !important; /* Cambia el color del ícono al pasar el ratón */
}


.inventory-heading h1, .inventory-heading h1 span {
    font-size: 33px;
    font-weight: 700;
    margin: 0;
    letter-spacing: -2.5px;
    line-height: 33px;
}


/* @media (min-width: 1200px) { */
    /* .admin-bar.loading .container { */
        /* width: 100%; */
        /* max-width: 100%; */
		/* padding: 0px; */
    /* } */
	
	/* .admin-bar.loading .inner-page{ */
		/* max-width: 100%; */
		/* margin: auto; */
	/* } */
	
	/* .admin-bar.loading .vc_row-fluid{ */
	    /* display: flex; */
		/* padding-left: calc((100vw - 1170px) / 2); */
		/* padding-right: calc((100vw - 1170px) / 2); */
	/* } */
	
	/* .admin-bar.loading .vc_column_container { */
	    /* max-width: 1170px; */
		/* margin: auto; */
	/* } */
	
/* } */

@media (min-width: 1200px) { 
	.vc_row.row-full{
		margin-left: calc(((100vw - 1170px) / -2) - 14px);
		width: 100vw;
		padding-left: calc((100vw - 1170px) / 2);
		padding-right: calc((100vw - 1170px) / 2);
		box-sizing: border-box;
	}
	.vc_row.row-full .row-full {
       margin-left: calc(((100vw - 1170px) / -2) - 14px);
    }
}

.zoom {
	transition: transform 0.5s ease;
}

.zoom-in {
  transform: scale(1.5);
}

.vc_row:hover .zoom-in{
	transform: scale(1);
}

.zoom:hover,
.vc_row:hover .zoom-in:hover{
  transform: scale(1.5);
}

.vc_separator h1,
.vc_separator h2,
.vc_separator h3,
.vc_separator h4 {
    line-height: 1em;
    font-size: 100%;
    margin: 0;
    word-wrap: break-word;
    -webkit-box-flex: 0;
    -webkit-flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
	margin-right: 10px;
}


.btn-select-left {
	float: left;
    margin-right: 10px;
}

.btn-select-left .vc_btn3.vc_btn3-color-grey.vc_btn3-style-modern {
    background: #d1d1d1;
    border-color: #d1d1d1;
    color: #1d1e21;
    padding: 10px;
    display: inline-block;
    margin-top: 0;
	border-radius: 5px !important;
}

.btn-select-left .vc_btn3.vc_btn3-color-grey.vc_btn3-style-modern:hover,
.box-btn.active button.vc_btn3.vc_btn3-color-grey.vc_btn3-style-modern {
	color: #fff;
    border-color: #000;
    background-color: #000;
}

.btn-select-left.newm button::before {
    content: 'Nuevo modelo';
    position: absolute;
    bottom: 0px;
    left: 3px;
    width: 95%;
    margin: -9px auto;
    background: #72cd72;
    color: #000;
    font-weight: bold;
    padding: 0px 5px;
    text-align: center;
    border-radius: 10px;
    font-size: 12px;
}

.btn-select-left.newm.newmc button::before {
	content: 'Nou model';
}


.btn-select-left.oldm button::before {
    content: 'Modelo anterior';
    position: absolute;
    bottom: 0px;
    left: 3px;
    width: 95%;
    margin: -9px auto;
    background: #ebe9e5;
    color: #000;
    font-weight: bold;
    padding: 0px 5px;
    text-align: center;
    border-radius: 10px;
    font-size: 12px;
}

.btn-select-left.oldm.oldmc button::before {
	content: 'Model anterior';
}

.box-data {
    display: none; /* Oculta todas las cajas por defecto */
}

@media screen and (max-width: 782px) {
	.post-entry .box-data,
	.page-content .box-data h5{
		font-size: 1.5rem !important;
	}
}



.box-data.active {
    display: block; /* Muestra la caja activa */
}

.box-crt {
    display: none; /* Oculta todas las cajas por defecto */
}

.box-crt.active {
    display: block; /* Muestra la caja activa */
}

.spec-list .spec-list__price{
	display: flex;
	font-size: 2rem;
    line-height: 38px;
}

li.promo:after{
    content: 'En promoción';
    width: 95%;
    background: #72cd72;
    color: #000;
    font-weight: 700;
    padding: 0 5px;
    text-align: center;
    border-radius: 10px;
    font-size: 12px;
	margin: 10px;
}

li.promo.cat:after{
    content: 'En promoció';
}

/* Estilos generales para la lista */
.spec-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}

.spec-list li {
	background: #f4f4f4;
    padding: 3px 8px;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    /* font-family: Arial, sans-serif; */
    font-size: 12px;
	line-height: 20px;
    transition: background 0.3s ease;
}

.spec-list li:hover {
  background: #e9e9e9;
}

.spec-list li strong {
  display: block;
  font-weight: bold;
  margin-bottom: 5px;
}


/* Estilos responsive para diferentes columnas */
@media (min-width: 1200px) {
  .spec-list {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  .spec-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .spec-list {
    grid-template-columns: 1fr;
  } 
}


.promo-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
  padding: 6px 20px;
  background-color: #ff1744;
  color: white;
  font-size: 14px;
  font-weight: 700;
  border-radius: 30px;
  text-transform: uppercase;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  position: relative;
  gap: 8px;
}

.promo-label::before,
.promo-label::after {
  content: "★";
  font-size: 22px;
  color: white;
  display: inline-block;
  animation: pulse 0.6s infinite ease-in-out;
}

.promo-label::after {
  animation-delay: 0.3s;
}

@keyframes pulse {
  0% {
    opacity: 0;
    transform: scale(1);
    text-shadow: none;
  }
  50% {
    opacity: 1;
    transform: scale(4.2);
    text-shadow: 0 0 22px rgba(255, 255, 255, 0.9);
  }
  100% {
    opacity: 0;
    transform: scale(1);
    text-shadow: none;
  }
}