body, html {
    /*overflow:hidden;*/
		/* height: 100%; */
		max-width: 100%; 
		overflow-x: hidden !important;
}
body {
	margin: 0;
	padding: 0;
	font-family:Verdana, Arial;
	font-size:12px;
	color: #000;
}
img{
	border: 0;
}
h1,h2,h3,h4,h5,h6,ol,p,ul{
	margin: 0;
	padding: 0;
}
:root {
  --model-sections-offset: 50px;
}
.noselect {
  -webkit-touch-callout: none;
    -webkit-user-select: none;
     -khtml-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}
#debug{
	display: block;
	width: 100px;
	height: 150px;
	position: fixed;
	top: 0;
	left: 0;
	font-size: 14px;
	background: #EEE;
	color: #000;
	z-index: 99999;
}
.fondo01{
	background: #FFF;
}
.color01{
  color: #000;
}
.fondo02{
	background: #F1F1F1;
}
.color02{
  color: #000;
}
.fondo03{
	background: #000;
}
.color03,
.color03 h2,
.color03 h3,
.color03 h4,
.color03 h5,
.color03 h6{
  color: #FFF !important;
}
td.color03{
  color: #FFF !important;
}
.fondo04{
	background: #F7F7F7;
}
.color04{
  color: #000;
}


.box01{
	margin: auto;
	width: 100%;
	max-width: 1420px;
}
.box02{
	margin: auto;
	width: 100%;
	max-width: 825px;
}
.box03{
	margin: auto;
	width: 100%;
	max-width: 600px;
}

.paddingTop{
  display: block;
  width: 100%;
  padding-top: 40px;
}
.cajaMuestra{
  display: none !important;
}
.logo{
	/* padding-top: 10px; */
  /* width: 96px;
  height: 72;
	background: rgba(255, 255, 255, 0); */
  flex-shrink: 0;
  display: flex;
  align-items: center;
  width: 6rem;
  height: 73px;
  
}
/* .logo a{
	padding: 0;
	display: block;
	width: 75px;
	height: 55px;
} */
.logo-footer{
	display: inline-block;
	width: 90px;
}
.cajaMenu{
  display: inline-block;
  vertical-align: text-top;
  /* margin-top: -3px; */
  height: 73px !important;
}
.cajaMenu2{
  display: inline-block;
}

.marMenos{
  margin-left: 45px;
}

.separa-25{
  padding-top: 25px;
}
.separa-50{
  padding-top: 50px;
}
.separa-75{
  padding-top: 75px;
}
.separa-100{
  padding-top: 100px;
}
.separa-125{
  padding-top: 125px;
}
.separa-150{
  padding-top: 150px;
}
.separa-200{
  padding-top: 200px;
}

/**** MENU **/
#menuPrimario{
  padding-left: 2rem;
  padding-right: calc(2rem + 100% - 100vw);
  /* border-bottom: rgba(153, 153, 153, 1.000); */
  border-bottom: 1px solid #999;
  /* height: 73px; */
}

#menuPrimario {
  width: 100%;
  background: #fff;
  /* padding: 0;
  margin: 0; */
}

/* Contenedor principal */
.menuWrapper {
  display: flex;
  align-items: center;
  background: #FFF;
  width: 100%;
  /*
  gap: 40px;
  padding: 10px 20px;
  */
}

/* Logo */
.logo img {
  /*height: 38px;               /* tamaño perfecto MINI */
  display: block;
}

/* Menú */
.menuNav {
  display: flex;
  align-items: center;
  /* gap: 30px; */
  margin: 0;
  padding: 0;
  list-style: none;
  /* height: 72px; */
  padding-left: 50px;
  /* background: #F00; */
}

.menuNav li a {
  font-family: "MINISansReg";
	font-size: 16px;
  color: #000;
  text-decoration: none;
  padding-top: 23px;
  display: block;
  height: 72px;
  border-bottom: 3px solid rgba(1, 126, 163, 0);
  padding: 24px 17px 0 15px;
  /* background: #CCC; */
}

.menuNav li a:hover {
  text-decoration: none;
	color: #017ea4;
	background: #FFF;
  border-bottom: 3px solid rgba(1, 126, 163, 1);
}


/** menu movil **/
#menuMovil .offcanvas-body {
  padding: 0;
}
#menuMovil{
  --bs-offcanvas-width: 100%;
  z-index: 20000 !important;
}
#menuMovil,
#menuMovil .offcanvas-body {
  overflow-x: hidden;
}

/* Contenedor general dentro del offcanvas */
.mini-mnav {
  position: relative;
  height: 100%;
}

/* Paneles (principal y submenú) */
.mini-mnav-panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: #fff;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Panel principal visible por defecto */
.mini-mnav-panel-main {
  z-index: 1;
  transform: translateX(0);
  opacity: 1;
}

/* Subpaneles: empiezan fuera a la derecha */
.mini-mnav-panel-sub {
  z-index: 2;
  transform: translateX(100%);
  opacity: 0;
  pointer-events: none;
}

/* Cuando hay submenú activo */
.mini-mnav.show-sub .mini-mnav-panel-main {
  transform: translateX(-20%);
  opacity: 0.4;
}

.mini-mnav.show-sub .mini-mnav-panel-sub.is-active {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}

/* Cabecera del submenú (back + título) */
.mini-mnav-subheader {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid #e6e6e6;
}

.mini-mnav-back {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  padding: 4px 8px;
}

.mini-mnav-subtitle {
  font-size: 18px;
  font-weight: 600;
}

/* Lista de opciones */
.mini-mnav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  overflow-y: auto;
}

/* Cada fila del menú */
.mini-mnav-item {
  border-bottom: 1px solid #f0f0f0;
}

/* Enlace / botón de cada fila */
.mini-mnav-link {
  width: 100%;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  border: none;
  text-decoration: none;
  color: #000;
  font-size: 18px;
  text-align: left;
  cursor: pointer;
}

.mini-mnav-link:hover,
.mini-mnav-link:focus {
  /* background: #f7f7f7; */
  color: #0F80A6;
  text-decoration: none;
}

.mini-mnav-text {
  flex: 1;
}

/* Flecha a la derecha para items con submenú */
.mini-mnav-arrow {
  margin-left: 8px;
  font-size: 18px;
}



/** menu movil **/




ul.nav{
  padding: 0;
  margin: 0;
	list-style-type: none;
  vertical-align: bottom;
  /* height: 72px; */
  
    /* background-color: #F00; */
}
.nav li a{
	display: inline-block;
	text-decoration: none;
	color: #000;
	position: relative;
	font-family: "MINISansReg";
	font-size: 16px;
	/* height: 73px; */
	/* padding: 24px 15px; */
  padding: 24px 17px 0 15px;
	/* margin-right: 10px; */
	/* background: rgba(255, 255, 255, .6); */
  border-bottom: 3px solid rgba(1, 126, 163, 0);
  

}
.nav li a:hover{
	text-decoration: none;
	color: #017ea4;
	background: #FFF;
  border-bottom: 3px solid rgba(1, 126, 163, 1);
}
.nav-activo{
	text-decoration: none;
	color: #017ea4 !important;
	background: #FFF;
  border-bottom: 3px solid rgba(1, 126, 163, 1) !important;
}

.iconoDerecha {
  margin-left: auto;
}


.iconosNav{
  display: inline-block;
}
.iconosNav a{
	display: inline-block;
	width: 40px;
	/* height: 65px; */
	color: #000;
	padding-top: 24px;
	/* padding-right: 10px; */
  height: 72px;
  border-bottom: 3px solid #FFF;
	border-bottom: 3px solid rgba(1, 126, 163, 0);
  text-align: center;
  /* background: #F00; */
}
.iconosNav a:hover{
	color: #017ea4;
  border-bottom: 3px solid rgba(1, 126, 163, 1);
}
.iconosNavNoLine a:hover{
  /* color: #FFF !important; */
  border-bottom: 3px solid rgba(1, 126, 163, 0) !important;
}

/** efectos sticky en nav ***/
/* Estado visible: animación de entrada (bajar) */
.uk-navbar-container{
  background: #FFF !important;
}

.sticky-anim-show {
  animation: stickySlideDown 0.35s ease-out forwards;
}

/* Estado oculto: animación de salida (subir) */
.sticky-anim-hide {
  animation: stickySlideUp 0.3s ease-in forwards;
}

/* ---- Animaciones ---- */

@keyframes stickySlideDown {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes stickySlideUp {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-20px);
  }
}




/** hack del nav **/
/* ==========================================================
   UK-SLIDER NAV — ÍCONO CSS PURO (SIN SVG/MASK DE UIKIT)
   ----------------------------------------------------------
   - Se oculta el ícono nativo (svg/mask/background)
   - Ícono chevron dibujado con ::after (bordes)
   - Colores controlados por variables (bg/icon/hover/borde)
   - Hover 100% funcional
   ========================================================== */

/* --- BASE GENERAL (botón redondo) --- */
.uk-slider [uk-slidenav-previous],
.uk-slider [uk-slidenav-next],
.uk-slider .uk-slidenav-previous,
.uk-slider .uk-slidenav-next {
  position: relative;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  background-color: var(--nav-bg, #d8d8d8);   /* fondo */
  color: var(--nav-icon, #ffffff);            /* color del ícono (currentColor) */
  border: var(--nav-border, none);
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
  transition: background-color .2s ease, color .2s ease, transform .12s ease, box-shadow .12s ease;
  outline: none;

  /* Neutraliza cualquier ícono nativo de UIkit (svg, mask, background) */
  background-image: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

/* Oculta SVGs que UIkit inyecte */
.uk-slider [uk-slidenav-previous] > svg,
.uk-slider [uk-slidenav-next] > svg,
.uk-slider .uk-slidenav-previous > svg,
.uk-slider .uk-slidenav-next > svg {
  display: none !important;
}

/* --- ÍCONO CHEVRON CON ::AFTER (usa currentColor) --- */
.uk-slider [uk-slidenav-previous]::after,
.uk-slider [uk-slidenav-next]::after,
.uk-slider .uk-slidenav-previous::after,
.uk-slider .uk-slidenav-next::after {
  content: "";
  position: absolute;
  width: 12px;                 /* tamaño del chevron */
  height: 12px;
  border-right: 2px solid currentColor;  /* “color del ícono” */
  border-bottom: 2px solid currentColor; /* “color del ícono” */
  transition: border-color .2s ease;
}

/* Dirección de cada flecha */
.uk-slider [uk-slidenav-previous]::after,
.uk-slider .uk-slidenav-previous::after {
  transform: rotate(135deg);   /* flecha apuntando a la izquierda */
}

.uk-slider [uk-slidenav-next]::after,
.uk-slider .uk-slidenav-next::after {
  transform: rotate(-45deg);   /* flecha apuntando a la derecha */
}

/* --- HOVER / FOCUS --- */
.uk-slider [uk-slidenav-previous]:hover,
.uk-slider [uk-slidenav-next]:hover,
.uk-slider .uk-slidenav-previous:hover,
.uk-slider .uk-slidenav-next:hover,
.uk-slider [uk-slidenav-previous]:focus,
.uk-slider [uk-slidenav-next]:focus,
.uk-slider .uk-slidenav-previous:focus,
.uk-slider .uk-slidenav-next:focus {
  background-color: var(--nav-bg-hover, #000000);
  color: var(--nav-icon-hover, #ffffff);      /* cambia el color del ícono */
  /* transform: translateY(-1px); */
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}

/* --- RESPONSIVE --- */
@media (max-width: 640px) {
  .uk-slider [uk-slidenav-previous],
  .uk-slider [uk-slidenav-next],
  .uk-slider .uk-slidenav-previous,
  .uk-slider .uk-slidenav-next {
    width: 36px;
    height: 36px;
  }

  .uk-slider [uk-slidenav-previous]::after,
  .uk-slider [uk-slidenav-next]::after,
  .uk-slider .uk-slidenav-previous::after,
  .uk-slider .uk-slidenav-next::after {
    width: 10px;
    height: 10px;
    border-width: 2px;
  }
}

/* ==========================================================
   PALETAS (variables por esquema)
   ========================================================== */

/* Gris */
.nav-gris {
  --nav-bg: #666666;
  --nav-icon: #ffffff;
  --nav-bg-hover: #000000;
  --nav-icon-hover: #ffffff;
}

/* Negro */
.nav-negro {
  --nav-bg: #000000;
  --nav-icon: #ffffff;
  --nav-bg-hover: #333333;
  --nav-icon-hover: #ffffff;
}

/* Rojo MINI */
.nav-rojo {
  --nav-bg: #e30613;
  --nav-icon: #ffffff;
  --nav-bg-hover: #a9000c;
  --nav-icon-hover: #ffffff;
}

/* Blanco */
.nav-blanco {
  --nav-bg: #999;
  --nav-icon: #000000;       /* ícono negro sobre fondo blanco */
  --nav-bg-hover: #000000;   /* hover a fondo negro */
  --nav-icon-hover: #ffffff; /* ícono blanco en hover */
  /* --nav-border: 1px solid #999; */
}



.homeCarro{
	font-family: "MINISansReg";
	color: #000;
	text-transform: uppercase;
	font-size: 16px;
}
.homePrecio{
	font-family: "MINISansReg";
	color: #000;
	font-size: 14px;
}

.titulo-linea {
  position: relative;
  display: inline-block;
  font-family: "MINIItalic", serif; /* opcional, para el estilo elegante */
  font-size: 18px;
  font-style: italic;
  text-align: center;
  color: #000;
}

.titulo-linea::before,
.titulo-linea::after {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 30px;      /* largo de las líneas */
  height: 1px;      /* grosor */
  background-color: #000; /* color de las líneas */
  margin: 0 12px;   /* espacio entre texto y línea */
}

/** Noticias **/
.noticias h3{
	margin: 0; padding: 0;
	font-family: "MINIBold";
	color: #000 !important;
	font-size: clamp(16px, 8vw, 20px);
	/* height: 60px; */
}
/* .noticias h3::before{
  content: '';
  position: absolute;
  width: 100px;
  height: 2px;
  background: #000;
} */
.noticiasCajaTittulo{
  display: block;
  width: 100%;
  height: 90px;
}
.noticiasBarra{
  display: block;
  width: 70px;
  height: 2px;
  background: #000;
}
.noticias h4{
	margin: 0; padding: 0;
	font-family: "MINIRegular";
	color: #000 !important;
	font-size: clamp(14px, 8vw, 14px);
	font-style: italic;
}


/* Mantiene altura constante en el slider */
.uk-slider .uk-card-media-top {
  position: relative;
  width: 100%;
  height: 325px; /* Altura deseada en desktop */
  overflow: hidden;
}

/* Asegura que las imágenes se centren y mantengan proporciones */
.uk-slider .uk-card-media-top img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover;      /* ajusta la imagen sin deformarla */
  object-position: center;/* centrada horizontal y vertical */
  transform: translate(-50%, -50%);
}

.textito01{
  font-family: "MINILight";
  font-size: 12px;
  font-weight: 300;
  color: #656565;
}

/********* menu overlay ****/

/* --- Overlay completo --- */
#menu-secundario-overlay {
  position: fixed;
  top: 74px; /* comienza debajo del menú superior */
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  display: none;
  justify-content: center;
  align-items: flex-start;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.3s ease;
  height: calc(100vh - 65px); /* nunca excede el alto visible */
}

/* --- Contenedor del menú --- */


#menu-secundario {
  background: #FFF;
  width: 100%;
  height: 100%;
  max-height: calc(100vh - 70px);  /* No puede sobrepasar el alto visible */
  overflow-y: auto;                /* Scroll interno */
  opacity: 0;
  transform: translateY(-15px);
  transition: opacity 0.35s ease-out, transform 0.35s ease-out;
  position: relative;
  padding-right: 10px;
}

/* --- Animación al mostrar --- */
#menu-secundario-overlay.activo {
  display: flex;
  opacity: 1;
}

/* --- Estado visible del overlay --- */
#menu-secundario-overlay.activo #menu-secundario {
  opacity: 1;
  transform: translateY(0);  /* baja suavemente */
}

/* --- Salida inmediata sin animación --- */
#menu-secundario-overlay:not(.activo) #menu-secundario {
  transition: none !important;  /* sin animación al cerrar */
}

/* --- Botón de cierre --- */
#cerrar-menu-secundario {
  position: absolute;
  top: 0px;
  right: 30px;
  background: none;
  border: none;
  font-size: 35px;
  color: #999;
  cursor: pointer;
  transition: color 0.3s ease;
}

#cerrar-menu-secundario:hover {
  color: #666;
}

/* --- Contenido de prueba --- */
.contenido-secundario {
  /* padding: 100px 40px; */
  padding: 25px 13px 5px 13px;
  text-align: center;
  color: #000;
}

/********* menu overlay ****/




/** iconos home **/
.icon-button {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #000;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease;
}

.icon-button:hover {
  background: #333;
}

.icon {
  font-family: 'md-icon';
  font-size: 36px;
  color: #fff;
  display: inline-block;
  line-height: 1;
}

/** Modelos home **/

.modelosWrapper {
  display: flex;
  width: 100%;
  align-items: flex-start;
}

/* columna izquierda (fija) */
.modelosIzq {
  width: 385px;
  min-width: 385px;
  max-width: 385px;
  padding-right: 0px;
}

/* columna derecha (fluida) */
.modelosDer {
  flex: 1;
  width: auto;
  min-height: 300px;
}




/* LISTA COMPLETA */
.model-list {
  width: 100%;
  margin: 0 auto;
  /* padding-left: 15px; */
}
.model-comustible{
  font-family: "MINIBold";
  font-size: 16px;
  color: #000;
  font-weight: 300;
  padding-left: 25px;
}

/* ITEM INDIVIDUAL */
.model-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 25px 0;
  cursor: pointer;
  border-bottom: 1px solid rgba(0,0,0,0.12);
  transition: all 0.25s ease;
  /* background: #F00; */
}

/* TEXTO DEL MODELO */
.model-text h3 {
  font-family: "MINISansReg";
  font-size: 16px;
  /* font-weight: 700; */
  margin: 0;
  line-height: 1.3;
  padding-left: 30px;
}

.model-text .price {
  font-family: "MINISansReg";
  display: block;
  margin-top: 4px;
  font-size: 16px;
  padding-left: 30px;

}

/* MEDIA: imagen y flecha */
.model-media {
  display: flex;
  align-items: center;
  gap: 10px;
}

.model-media img {
  width: 90px;
  height: auto;
  transition: transform 0.3s ease;
}

.model-arrow svg {
  width: 20px;
  height: 20px;
  color: #999;
  transition: color .3s ease, transform .3s ease;
}

/* Hover y activo */
.model-item:hover .model-arrow svg,
.model-item.active .model-arrow svg {
  color: #006683;
  transform: translateX(0px);
}


/* HOVER = estilo de activo (azul MINI) */
.model-item:hover,
.model-item.active {
  border-bottom: 1px solid #006683;
}

.model-item:hover h3,
.model-item:hover .price,
.model-item.active h3,
.model-item.active .price {
  color: #006683;
}

.model-item:hover img,
.model-item.active img {
  transform: translateX(0px);
}

.model-item:hover .arrow,
.model-item.active .arrow {
  opacity: 1;
  transform: translateX(3px);
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .model-media img {
    width: 120px;
  }
}


.model-grid{
  padding: 20px 35px 5px 50px;

}

.model-row {
  display: flex;
  align-items: stretch;
  width: 100%;
  gap: 0;
  margin-bottom: 35px;
}

/* cajas izquierda dinámicas según porcentaje */
/*
.box1,
.box3 {
  flex: 0 0 50%;
  max-width: 50%;
  padding-right: 20px;
}
*/
.box1,
.box3 {
  flex: 0 0 50%;
  max-width: 988px;
  padding-right: 20px;
}

/* cajas derecha llenan el resto */
.box2,
.box4 {
  flex: 1;            /* toma lo que sobra */
  min-width: 0;       /* crucial para evitar overflow */
}


.modeloNombre{
  font-family: "MINIBold";
  font-size: clamp(18px, 8vw, 46px);
  color: #000;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 100%;
}
.modeloTexto{
  font-family: "MINIRegular";
  font-size: clamp(14px, 8vw, 24px);
  color: #000;
  font-weight: 400;
  line-height: 100%;
}
.modeloPrecio{
  font-family: "MINISansReg";
  font-size: clamp(14px, 8vw, 18px);
  color: #000;
  font-weight: 400;
  line-height: 100%;
  text-transform: uppercase;
}

.botonModeloExplorar,
.botonModeloCotizacion,
.botonModeloExplorar02{
  display: block;
  width: 100%;
  max-width: 800px;
  text-align: center;
  font-size: clamp(14px, 8vw, 18px);
  border-radius: 25px;
  text-transform: uppercase;
  padding: 13px;
  transition: background 0.3s ease;
  text-decoration: none;
}
.botonModeloExplorar:hover,
.botonModeloCotizacion:hover,
.botonModeloExplorar02:hover{
  text-decoration: none;
}

.botonModeloExplorar{
  background: #006683;
  color: #FFF;
}
.botonModeloExplorar02{
  background: #FFF;
  color: #000;
}
.botonModeloExplorar:hover{
  background: #027FA5;
  color: #FFF;
}
.botonModeloCotizacion{
  background: #000;
  color: #FFF;
}
.botonModeloCotizacion:hover{
  background: #525252;
  color: #FFF;
}

.botonModeloInfo{
  display: inline-block;
  padding: 7px 30px;
  text-align: center;
  font-size: clamp(14px, 8vw, 14px);
  border-radius: 25px;
  text-transform: uppercase;
  /* padding: 13px; */
  transition: background 0.3s ease;
  text-decoration: none;
  background: #000;
  color: #FFF !important;
}
.botonModeloInfo:hover{
  background: #525252;
  color: #FFF;
  text-decoration: none;
}
.botonModeloInfo02{
  display: inline-block;
  padding: 7px 30px;
  text-align: center;
  font-size: clamp(14px, 8vw, 14px);
  border-radius: 25px;
  text-transform: uppercase;
  /* padding: 13px; */
  transition: background 0.3s ease;
  text-decoration: none;
  background: #000;
  color: #FFF !important ;
  border: 2px solid #FFF;
}
.botonModeloInfo02:hover{
  background: #E0DFE0;
  color: #000 !important;
  text-decoration: none;
  
}
.botonArriba{
  display: inline-block;
  width: 40px;
  height: 40px;
  padding-top: 10px;
  text-align: center;
  /* font-size: clamp(14px, 8vw, 14px); */
  border-radius: 25px;
  /* text-transform: uppercase; */
  /* padding: 13px; */
  transition: background 0.3s ease;
  text-decoration: none;
  background: #000;
  color: #FFF;
}
.botonArriba:hover{
  text-decoration: none;
  background: #525252;
  color: #FFF;
}
.textoArriba{
  font-family: "MINISansReg";
  font-size: 12px;
  color: #000;
}

/** icono especificaciones **/
/* Lista completa */
.spec-list {
  display: flex;
  flex-direction: column;
  padding: 10px 0;
}

/* Item individual */
.spec-item {
  display: flex;
  align-items: center;
  gap: 15px;           /* espacio entre icono y texto */
}

/* Caja del icono */
.spec-icon {
  font-family: 'md-icon';
  font-weight: normal;
  font-style: normal;
  font-size: 32px;     /* tamaño ícono */
  line-height: 1;
  display: inline-block;
  color: #000;
  width: 32px;         /* para que todas las cajas midan lo mismo */
  text-align: center;
}

/* Texto */
.spec-text {
  font-family: 'MINISansReg';
  font-size: 18px;
  font-weight: 300;
  color: #000;
  line-height: 100%;
}

.spec-svg img {
  width: 32px;   /* mismo tamaño que los íconos de la fuente */
  height: 32px;
  display: block;
}
.barra-separa{
  display: block !important;
  width: 100%;
  height: 2px;
  background: #979797;
  margin: 15px 0;
}

/** distribuidores **/

.distribuidores ul.fields-container{
  list-style-type: none;
  margin: 0; /* Optional: Remove default margin */
  padding: 0; /* Optional: Remove default padding */

}


/** modelos **/
.mini-hero-frame {
  position: relative;
  /* variables para ajustar fácil por dispositivo */
  --frame-margin: 50px;       /* separación del marco respecto al borde del slider */
  --frame-gap-left: 300px;    /* desde el borde izq. hasta donde empieza la barra superior */
  --frame-gap-top: 230px;     /* desde el borde superior hasta donde empieza la barra izquierda */
  --frame-thickness: 12px;     /* grosor del marco */
  --frame-color: #00e0d3;     /* color del marco */
}

/* color por modelo */
.mini-hero-aceman {
  --frame-margin: 50px;
  --frame-gap-left: 300px;
  --frame-gap-top: 230px;
  --frame-thickness: 12px;
  --frame-color: #00e0d3;
}
.mini-hero-countryman {
  --frame-margin: 50px;
  --frame-gap-left: 135px;
  --frame-gap-top: 230px;
  --frame-thickness: 12px;
  --frame-color: #006A3E;
}
.mini-hero-3-puertas {
  --frame-margin: 50px;
  --frame-gap-left: 380px;
  --frame-gap-top: 275Px;
  --frame-thickness: 12px;
  --frame-color: #35E9C1;
}
.mini-john-cooper-works {
  --frame-margin: 50px;
  --frame-gap-left: 470px;
  --frame-gap-top: 220Px;
  --frame-thickness: 12px;
  --frame-color: #D00E16;
}

/* Estilo base de las líneas del marco */
.mini-frame-line {
  position: absolute;
  background: var(--frame-color);
  z-index: 5;
  pointer-events: none; /* no bloquea clics en el slider */
}

/* Barra superior (con hueco a la izquierda) */
.mini-frame-top {
  height: var(--frame-thickness);
  top: var(--frame-margin);
  right: var(--frame-margin);
  left: var(--frame-gap-left);   /* aquí se crea el hueco en la parte de textos */
}

/* Barra derecha */
.mini-frame-right {
  width: var(--frame-thickness);
  top: var(--frame-margin);
  right: var(--frame-margin);
  bottom: var(--frame-margin);
}

/* Barra inferior */
.mini-frame-bottom {
  height: var(--frame-thickness);
  bottom: var(--frame-margin);
  left: var(--frame-margin);
  right: var(--frame-margin);
}

/* Barra izquierda (arranca más abajo para dejar el hueco de textos) */
.mini-frame-left {
  width: var(--frame-thickness);
  left: var(--frame-margin);
  top: var(--frame-gap-top);     /* hueco vertical para el bloque de textos */
  bottom: var(--frame-margin);
}

/* Tablet */
@media (max-width: 1199px) {
  .mini-hero-aceman {
    --frame-margin: 50px;
    --frame-gap-left: 280px;
    --frame-gap-top: 220px;
    --frame-thickness: 10px;
  }
  .mini-hero-countryman {
    --frame-margin: 50px;
    --frame-gap-left: 135px;
    --frame-gap-top: 230px;
    --frame-thickness: 10px;
  }
  .mini-hero-3-puertas{
    --frame-margin: 50px;
    --frame-gap-left: 350px;
    --frame-gap-top: 255Px;
    --frame-thickness: 10px;
  }
  .mini-john-cooper-works {
    --frame-margin: 40px;
    --frame-gap-left: 440px;
    --frame-gap-top: 210Px;
    --frame-thickness: 12px;
  }

}

/* Móvil */
@media (max-width: 700px) {
  .mini-hero-aceman {
    --frame-margin: 30px;
    --frame-gap-left: 225px;
    --frame-gap-top: 195px;
    --frame-thickness: 7px;
  }
  .mini-hero-countryman {
    --frame-margin: 30px;
    --frame-gap-left: 110px;
    --frame-gap-top: 195px;
    --frame-thickness: 7px;
  }
  .mini-hero-3-puertas{
    --frame-margin: 30px;
    --frame-gap-left: 295px;
    --frame-gap-top: 220Px;
    --frame-thickness: 10px;
  }
  .mini-john-cooper-works {
    --frame-margin: 30px;
    --frame-gap-left: 345px;
    --frame-gap-top: 180Px;
    --frame-thickness: 12px;
  }
}

.seccion01{
  color: #000;
}
.seccion01 h2{
  margin: 0; padding: 0;
  font-family: "MINIBold";
  font-size: clamp(16px, 8vw, 48px);
  font-weight: normal;
}
.seccion01 h3{
  margin: 0; padding: 0;
  font-family: "MINIBold";
  font-size: clamp(12px, 8vw, 24px);
  font-weight: normal;
}
.seccion01 h4{
  margin: 0; padding: 0;
  font-family: "MINISansReg";
  font-size: clamp(12px, 8vw, 18px);
  font-weight: normal;
}
.seccion01 h5{
  margin: 0; padding: 0;
  font-family: "MINIBold";
  font-size: clamp(14px, 8vw, 26px);
  font-weight: normal;
}
.texto01 p{
  margin: 0; padding: 0;
  font-family: "MINISansReg";
  font-size: clamp(16px, 8vw, 16px);
}
.texto01 h2{
  margin: 0; padding: 0;
  font-family: "  ";
  font-size: clamp(16px, 8vw, 42px);
  font-weight: normal;
}
.texto01 h3{
  margin: 0; padding: 0;
  font-family: "MINISansReg";
  font-size: clamp(12px, 8vw, 16px);
  font-weight: normal;
}
.texto01 h4{
  margin: 0; padding: 0;
  font-family: "  ";
  font-size: clamp(16px, 8vw, 34px);
  font-weight: normal;
}
.texto02 p{
  margin: 0; padding: 0;
  font-family: "MINISansReg";
  font-size: clamp(16px, 8vw, 18px);
}
.texto02 h2{
  margin: 0; padding: 0;
  font-family: "  ";
  font-size: clamp(16px, 8vw, 24px);
  font-weight: bold;
}
.texto02 h3{
  margin: 0; padding: 0;
  font-family: "MINISansReg";
  font-size: clamp(12px, 8vw, 16px);
  font-weight: normal;
}
.texto02 h6{
  margin: 0; padding: 0;
  font-family: "MINISansReg";
  font-size: clamp(12px, 8vw, 12px);
  font-weight: normal;
}
.texto02 th{
  font-family: "MINISansBold" !important;
  color: #000 !important;
  vertical-align: text-top !important;
}
.texto02 td p{
  margin: 0; padding: 0;
}
.texto02 td{
  font-family: "MINISansReg";
  color: #000 ;
  vertical-align: text-top !important;
}
.texto02 p strong, .texto02 td strong{
  font-family: "MINISansBold" !important;
  font-weight: bold !important;
}
.texto02 td.sub, .texto02 td.sub strong{
  font-family: "MINIRegular" !important;
  font-size: clamp(14px, 8vw, 28px);
  font-weight: 700;
  text-transform: uppercase;
}
.texto02 a{
  color: #000;
  text-decoration: none;
}
.texto03, .texto03 p{
  
  font-family: "MINISansReg";
  font-size: clamp(14px, 8vw, 14px);
}
.texto03 b, .texto03 strong{
  font-family: "MINISansBold";
}
.texto03 h1{
  margin: 0; padding: 0;
  font-family: "MINIBold";
  font-size: clamp(16px, 8vw, 36px);
  font-weight: 700 ;
}
.texto03 h2{
  margin: 0; padding: 0;
  font-family: "MINIRegular";
  font-size: clamp(16px, 8vw, 32px);
  font-weight: 700 ;
}
.texto03 h3{
  margin: 0; padding: 0;
  font-family: "MINIBold";
  font-size: clamp(14px, 8vw, 20px);
  font-weight: 700;
  text-transform: uppercase;
}
.paddleft p{
  padding-left: 25px;
}

.centrado-vertical{
  display: flex;
  align-items: center;
  justify-content: center;
}
.centrado-top{
  display: flex;
  align-items: top;
  justify-content: top;
}



.accordionTitulo{
	font-family: 'MINISansBold';
	font-size: 20px ;
	color: #000 !important;
  font-weight: 700;
}
.accordionText{
	display: block;
	font-family: 'MINISansReg';
	font-size: 16px !important;
	color: #000;
	/* padding-left: 30px; */
}
/* .accordionText a{
	display: block;
	font-family: 'MINISansReg';
	font-size: 13px !important;
	color: #262626 !important;
	padding-left: 30px;
}
.accordionText a:hover{
	display: block;
	font-family: 'MINISansReg';
	font-size: 13px !important;
	color: #000 !important;
	padding-left: 30px;
} */


/** Hacka para camviar el ícono en el Acordeón **/
.uk-accordion li .uk-accordion-title:before {
	background-image: none !important;
	content: url('data:image/svg+xml; base64, PHN2ZwogIHdpZHRoPSIyNCIKICBoZWlnaHQ9IjI0IgogIHZpZXdCb3g9IjAgMCAyNCAyNCIKICBmaWxsPSJub25lIgogIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKPgogIDxwYXRoCiAgICBkPSJNNi4zNDMxNyA3Ljc1NzMyTDQuOTI4OTYgOS4xNzE1NEwxMiAxNi4yNDI2TDE5LjA3MTEgOS4xNzE1N0wxNy42NTY5IDcuNzU3MzVMMTIgMTMuNDE0Mkw2LjM0MzE3IDcuNzU3MzJaIgogICAgZmlsbD0iY3VycmVudENvbG9yIgogIC8+Cjwvc3ZnPg==') !important;
}
.uk-accordion li.uk-open .uk-accordion-title:before {
	background-image: none !important;
	content: url('data:image/svg+xml; base64, PHN2ZwogIHdpZHRoPSIyNCIKICBoZWlnaHQ9IjI0IgogIHZpZXdCb3g9IjAgMCAyNCAyNCIKICBmaWxsPSJub25lIgogIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKPgogIDxwYXRoCiAgICBkPSJNMTcuNjU2OSAxNi4yNDI3TDE5LjA3MTEgMTQuODI4NUwxMi4wMDAxIDcuNzU3MzlMNC45Mjg5NiAxNC44Mjg1TDYuMzQzMTcgMTYuMjQyN0wxMi4wMDAxIDEwLjU4NThMMTcuNjU2OSAxNi4yNDI3WiIKICAgIGZpbGw9ImN1cnJlbnRDb2xvciIKICAvPgo8L3N2Zz4=') !important;
}





/** cotizador **/
.cotizador{
	font-family: 'MINISansReg';
	color: #262626;
	font-size: clamp(12px, 8vw, 14px);
}
.cotizador h2{
	padding: 0;margin: 0;
	font-size: clamp(14px, 8vw, 18px);
	margin-bottom: 5px;
}
.uk-select, .uk-input{
	border: 1px solid #262626 !important;
}
.mensaje{
	font-family: 'MINISansReg';
	color: #F00;
	font-size: 16px;

}
a.botonEnviar, #Enviar{
	width: 100%;
	max-width: 200px;
	display: inline-block;
	padding: 10px 30px;
	font-family: 'MINISansReg';
	font-size: 16px;
	color: #FFF;
	background: #000;
	text-decoration: none;
	text-align: center;
  border: 0;
  border-radius: 25px;
  
}
a.botonEnviar:hover, #Enviar:hover{
	width: 100%;
	max-width: 200px;
	display: inline-block;
	padding: 10px 30px;
	font-family: 'MINISansReg';
	color: #FFF;
	background: #525252;
	text-decoration: none;
	text-align: center;
}
.formError{
  font-size: 12px;
}



/** Footer **/

.footer-titulo{
	font-family: "MINIRegular";
	color: #000 !important;
	font-size: clamp(18px, 8vw, 48px);
}

.footer-links{
	display: inline-block;
	font-family: "MINISansReg";
	color: #000;
	font-size: clamp(16px, 8vw, 16px);
}
.footer-links a{
	color: #000;
	text-decoration: none;
	padding-bottom: 0px;
	border-bottom: 1px solid #000;
}
.footer-links a:hover{
	text-decoration: none;
	color: #006683;
	border-bottom: 1px solid #006683;
}

.redes {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.redes a {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease, transform 0.3s ease;
  text-decoration: none;
}


.redes a img {
  width: 16px;
  height: 16px;
}

.redes a:hover {
  background: #000;
}

.redes a:hover img {
  filter: brightness(0) invert(1);
}

.creditos{
	font-family: "MINISansReg";
	color: #000;
	font-size: clamp(14px, 8vw, 14px);
}


/** fix menu **/
/* ==== Overlay del menú secundario: pantalla completa ==== */
#menu-secundario-overlay {
  position: fixed;
  top: 65px;          /* altura del menú superior; ajusta si cambia */
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  display: none;      /* se muestra sólo con la clase .activo */
}

/* Cuando el overlay está activo */
#menu-secundario-overlay.activo {
  display: block;
}

/* Contenido interno del menú secundario: scroll propio */
#menu-secundario {
  height: 100%;
  overflow-y: auto;
}

/* === Overlay del menú secundario === */

/* El overlay cubre toda la ventana por debajo del menú principal */
#menu-secundario-overlay {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  /* El top lo ajustamos vía JS según la altura real del menú */
  z-index: 9990;
  display: none;
}

/* Cuando está activo, se muestra */
#menu-secundario-overlay.activo {
  display: block;
}

/* El contenedor interno hace scroll si el contenido es largo */
#menu-secundario {
  height: 100%;
  overflow-y: auto;
}

/* ===========================
   Barra de secciones del modelo
   =========================== */

.model-sections-bar {
  position: relative;
  width: 100%;
  z-index: 9980;
  background: #fff;
  border-bottom: 1px solid #e0e0e0;
  height: var(--model-sections-offset);
}

/* Transiciones suaves de opacidad / posición */
.model-sections-bar,
.model-sections-bar.is-fixed {
  transition:
    opacity 0.25s ease,
    transform 0.25s ease,
    top 0.25s ease;
}

/* Estado base cuando pasa a fixed (arranca oculta y algo hacia arriba) */
.model-sections-bar.is-fixed {
  position: fixed;
  opacity: 0;
  transform: translateY(-8px);
}

/* Visible (fade-in completo) */
.model-sections-bar.is-fixed.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Posiciones verticales según si va arriba o debajo del header */
.model-sections-bar.is-fixed.at-top {
  top: 0;
}

.model-sections-bar.is-fixed.below-header {
  top: 74px;
}

/* Contenido interno del menú */
.model-sections-bar-inner {
  max-width: 1200px;
  /* margin: 0 auto; */
  padding: 10px 20px;
  display: flex;
  gap: 40px;
  align-items: center;
  justify-content: flex-start;
  font-family: 'MINISansReg', sans-serif;
  font-size: 15px;
}
.model-section-link:first-child{
  margin-left: 50px;
}

.model-section-link {
  position: relative;
  text-decoration: none;
  color: #000;
  padding-bottom: 16px;
  white-space: nowrap;
}

/* Línea azul estilo MINI */
.model-section-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 0;
  background: #017EA2;
  /* transition: width .2s ease; */
}
.model-section-link:hover{
  color: #017EA2;
  text-decoration: none;
}

.model-section-link:hover::after,
.model-section-link.activo::after {
  width: 100%;
}

@media (max-width: 900px) {
  .model-sections-bar-inner {
    overflow-x: auto;
    gap: 24px;
  }
}





@media (max-width: 1280px) {
  .cajaOculta{
    display: none;
  }
  .cajaMuestra{
    display: inline-block !important;
  }

  .uk-navbar-item, .uk-navbar-nav>li>a, .uk-navbar-toggle{
    min-height: 60px !important;
  }
  .uk-navbar-dropdown-dropbar {
    padding: 0px 0 15px 0 !important;
  }
  a.sMenu{
    font-family: 'MINISansReg', sans-serif !important;
    font-size: 18px !important;
    color: #000 !important;
  }
  li.sMenuOp a{
    font-family: 'MINISansReg', sans-serif !important;
    font-size: 18px !important;
    color: #000 !important;
  }
  li.sMenuOp a:hover{
    color: #0F80A6 !important;
  }
  li.uk-active a{
    color: #0F80A6 !important;
  }



}


@media (max-width: 960px) {
  .uk-slider .uk-card-media-top {
    height: 320px;
  }
}



@media (max-width: 768px) {
  .uk-navbar-item, .uk-navbar-nav>li>a, .uk-navbar-toggle{
    min-height: 60px !important;
  }
  .uk-navbar-dropdown-dropbar {
    padding: 0px 0 15px 0 !important;
  }
  a.sMenu{
    font-family: 'MINISansReg', sans-serif !important;
    font-size: 18px !important;
    color: #000 !important;
  }
  li.sMenuOp a{
    font-family: 'MINISansReg', sans-serif !important;
    font-size: 18px !important;
    color: #000 !important;
  }
  li.sMenuOp a:hover{
    color: #0F80A6 !important;
  }
  li.uk-active a{
    color: #0F80A6 !important;
  }


}
@media (max-width: 640px) {
  #menuPrimario{
    padding-left: 0.5rem;
    padding-right: calc(0.5rem + 100% - 100vw);
  }
  .model-comustible{
    font-size: 16px;
    padding-left: 10px;
  }
  .uk-slider [uk-slidenav-previous],
  .uk-slider [uk-slidenav-next],
  .uk-slider .uk-slidenav-previous,
  .uk-slider .uk-slidenav-next {
    width: 36px;   /* antes era 48px */
    height: 36px;  /* antes era 48px */
  }

  .uk-slider [uk-slidenav-previous] svg,
  .uk-slider [uk-slidenav-next] svg,
  .uk-slider .uk-slidenav-previous svg,
  .uk-slider .uk-slidenav-next svg {
    width: 16px;   /* antes era 20px */
    height: 16px;  /* antes era 20px */
  }
	.uk-slider .uk-card-media-top {
    height: 220px;
  }
	.footer-links{
		display: block;
	}
  .separa-100, .separa-150, .separa-200{margin-top: 25px;}
}
@media (max-width: 480px) {

}