/* === APARICIÓN CÍCLICA DEL CONTENEDOR PRINCIPAL === */

/* ESTADO INICIAL: Oculta el contenedor al cargar la página */
/* Selector Único: EL data-ss-id de tu contenedor principal */
[data-ss-id="_X46zlKLis32ku7Ie5jsb"] {
    /* Oculto por defecto */
    opacity: 0 !important;
    visibility: hidden !important;
    
    /* Prepara una transición suave de 1 segundo para la aparición/desaparición */
    transition: opacity 1s ease-in-out, visibility 1s; 
}

/* ESTADO FINAL: Clase que lo hará visible (añadida/quitada con JavaScript) */
.contenedor-visible {
    opacity: 1 !important;
    visibility: visible !important;
}

/* === ESTILOS PARA EL PRELOADER === */
/* Asegúrate que el logo no se vea cortado, le damos un ancho máximo */
#preloader img {
  max-width: 120px !important; 
  height: auto !important; 
}
/* Estilo del preloader */
#preloader { 
  background-color: #c50000; 
  position: fixed; 
  top: 0; 
  left: 0; 
  width: 100vw; 
  height: 100vh; 
  z-index: 9999; 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  /* Estilos para la transición de cierre del preloader */
  transition: opacity 0.5s ease;
} 

#preloader img { 
  width: 120px; 
  height: auto; 
  animation: preloaderFade 2s ease-in-out infinite; 
} 

@keyframes preloaderFade { 
  0%, 100% { 
    opacity: 1; 
    transform: scale(1); 
  } 
  50% { 
    opacity: 0.5; 
    transform: scale(1.1); 
  } 
}

/* === BOTÓN ANIMADO (.mi-boton) - ESTILOS DE ESCRITORIO === */ 
.mi-boton { 
  position: relative; 
  display: inline-block; 
  padding: 12px 30px; 
  font-size: 16px; 
  font-weight: 600; 
  color: #c50000 !important; 
  background: none !important; 
  border: 2px solid #c50000; 
  cursor: pointer; 
  overflow: hidden; 
  transition: color 0.4s ease; 
  z-index: 1; 
  border-radius: 4px; 
  text-decoration: none !important; 
} 

.mi-boton::before { 
  content: ""; 
  position: absolute; 
  top: 50%; 
  left: 50%; 
  width: 0; 
  height: 0; 
  background: #c50000; 
  border-radius: 100%; 
  transform: translate(-50%, -50%); 
  transition: width 0.5s ease, height 0.5s ease; 
  z-index: -1; 
} 

.mi-boton:hover::before { 
  width: 300%; 
  height: 300%; 
} 

.mi-boton:hover { 
  color: #ffffff !important; 
} 

/* === CARRUSEL DE LOGOS === */ 
.marcas-container { 
  overflow: hidden; 
  width: 100%; 
  margin: 40px 0; 
} 
.marcas-row { 
  display: flex; 
  white-space: nowrap; 
  animation: carrusel-movimiento 20s linear infinite; 
} 
.row2 { 
  animation: carrusel-movimiento-inverso 20s linear infinite; 
} 
.marcas-row img { 
  height: 80px; 
  margin: 0 60px; 
  flex-shrink: 0; 
  filter: grayscale(100%);
  transition: transform 0.3s ease, filter 0.3s ease; 
} 
.marcas-row img:hover { 
  transform: scale(1.1); 
  filter: grayscale(0%);
} 
@keyframes carrusel-movimiento { 
  from { transform: translateX(0); } 
  to { transform: translateX(-50%); } 
} 
@keyframes carrusel-movimiento-inverso { 
  from { transform: translateX(-50%); } 
  to { transform: translateX(0); } 
}

/* === SLIDER DE BANNERS === */
.ss-page-block[data-ss-padding] {
    padding-left: 0px !important;
    padding-right: 0px !important;
}
.slider {
  position: relative;
  width: 100%;
  max-width: 100vw;
  height: 250px;
  margin: auto;
  overflow: hidden;
  border-radius: 8px;
}
.slides {
  display: flex;
  width: 400%;
  height: 100%;
  animation: slide 16s infinite;
}
.slides img {
  width: 25%;
  height: 100%;
  object-fit: cover;
}
@keyframes slide {
  0%   { transform: translateX(0%); }
  20%  { transform: translateX(0%); }
  25%  { transform: translateX(-25%); }
  45%  { transform: translateX(-25%); }
  50%  { transform: translateX(-50%); }
  70%  { transform: translateX(-50%); }
  75%  { transform: translateX(-75%); }
  95%  { transform: translateX(-75%); }
  100% { transform: translateX(0%); }
}

/* === ICONOS HOVER === */
.ssc-col i {
    font-size: 30px !important; 
    color: #000000 !important; 
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4); 
    transition: transform 0.3s ease;
}
.ssc-col i:hover {
    transform: scale(1.5); 
}

/* === ESTILOS PARA ESCRITORIO (Botón único de Service Multimarca) === */
.image-button-overlay-container a.new-lubriclub-button {
    /* POSICIONAMIENTO FIJO QUE FUNCIONÓ EN TU PC */
    position: absolute !important; 
    left: 850px !important; 
    margin-left: 0 !important; 
    transform: translateX(-50%) !important; 
    bottom: 12% !important; 
    
    /* TAMAÑO Y FORMATO PEQUEÑO */
    width: 200px !important; 
    height: 38px !important; 
    line-height: 38px !important; 
    padding: 0 20px !important; 
    
    font-size: 14px !important; 
    text-align: center !important; 
    
    /* Propiedades de Limpieza */
    right: auto !important; 
    display: block !important; 
    z-index: 10;
}


/* ------------------------------------------------------------------ */
/* === AJUSTES PARA DISPOSITIVOS MÓVILES (max-width: 767px) === */
/* ------------------------------------------------------------------ */
@media (max-width: 767px) {

    /* --- CORRECCIONES EN LA SECCIÓN HOME (Botones .mi-boton) --- */
    
    /* 1. Reducción de PADDING de la sección Home (FmV1b8ATAISvq4vU1ft7h) */
    div[data-ss-id="FmV1b8ATAISvq4vU1ft7h"] {
        padding: 100px 20px 100px !important; 
    }

    /* 2. Centrado de Logo y Texto (JG5Mx2U69mbTsB-svnfzH) */
    div[data-ss-id="JG5Mx2U69mbTsB-svnfzH"] {
        align-items: center !important; /* Centra los elementos internos (logo, texto) */
    }
    div[data-ss-id="JG5Mx2U69mbTsB-svnfzH"] h3 {
        text-align: center !important; /* Centra el texto descriptivo */
        width: 100% !important;
    }
    
    /* 3. Contenedor de Botones - Apilamiento y Centrado (HBVkSvjVVfwnMQgolCX9s) */
    div[data-ss-id="HBVkSvjVVfwnMQgolCX9s"] {
        flex-direction: column !important; /* CLAVE: Los fuerza a apilarse verticalmente */
        align-items: center !important; /* Centra la pila de botones horizontalmente */
        gap: 15px !important; 
        width: 100% !important;
    }

    /* 4. Tamaño Individual de Botones (.mi-boton) */
    div[data-ss-id="HBVkSvjVVfwnMQgolCX9s"] .mi-boton {
        width: 80% !important; 
        height: 45px !important; 
        line-height: 45px !important; 
        margin: 0 !important; 
        padding: 0 10px !important;
        font-size: 16px !important;
        text-align: center !important;
    }

/* DEFINICIÓN DE ANIMACIONES EXCLUSIVAS PARA MÓVIL (FUERA DE @MEDIA) */
@keyframes carrusel-movimiento-movil { 
  from { transform: translateX(0); } 
  to { transform: translateX(-50%); } /* AHORA: -50% (Flujo de loop estándar) */
} 
@keyframes carrusel-movimiento-inverso-movil { 
  from { transform: translateX(-50%); } /* AHORA: -50% */
  to { transform: translateX(0); } 
}
    /* --- CORRECCIONES GENERALES Y ANTERIORES (767px) --- */

    /* Ajusta el banner principal */
    .ssc-flex-row.ssc-flex-wrap.ssc-justify-start.ssc-align-start[style*="background-color: rgb(197, 0, 0)"] {
      flex-direction: column !important;
      padding: 20px 10px !important;
    }
    .ssc-col img[src*="CHICALUBRI.webp"] {
      width: 100% !important;
      height: auto !important;
      max-width: 100% !important;
      object-fit: contain !important;
    }
    .ssc-flex.ssc-flex-column.ssc-flex-wrap.ssc-justify-center.ssc-align-center h2 {
      font-size: 20px !important;
      text-align: center !important;
      width: 100% !important;
    }
    /* Ajustes para el texto y los botones principales (REDUNDANTE PERO CONSERVADO) */
    .ssc-flex-column h3 {
      font-size: 16px !important;  
      padding: 0 10px !important;
    }
    .ssc-flex-row { /* Este bloque ya es manejado por el selector HBVkSvjVVfwnMQgolCX9s, pero se conserva por seguridad */
      flex-direction: column !important;
      gap: 15px !important;
      align-items: center !important;
      padding: 0 15px !important;
    }
    .mi-boton { /* Este bloque ya es manejado por el selector más específico arriba, pero se conserva por seguridad */
      width: 100% !important;
      padding: 15px !important;
    }
/* --- CORRECCIONES GENERALES Y ANTERIORES (767px) --- */
/* ... (Deja todo el código anterior intacto hasta aquí) ... */

/* [INICIO DEL BLOQUE A REEMPLAZAR] */
/* SOLUCIÓN FINAL CARRUSEL MÓVIL: Alta Velocidad (10s) y Ancho Forzado */

.marcas-row, .row2 {
    /* CLAVE: Forzamos un ancho gigantesco para asegurar que el contenido duplicado quepa */
    width: 250vw !important; /* 250vw = 250% del ancho de la vista (esto casi siempre soluciona el salto) */
    
    /* Restauramos la velocidad a 10s */
    animation: carrusel-movimiento-movil 10s linear infinite !important; 
}
.row2 {
    animation: carrusel-movimiento-inverso-movil 10s linear infinite !important; 
}

/* Ajuste de Imágenes: Altura cómoda y márgenes casi nulos */
.marcas-row img {
    height: 60px !important; /* Altura cómoda */
    margin: 0 10px !important; /* Margen un poco más amplio que antes */
    flex-shrink: 0 !important; /* Esencial para que no se compriman */
    object-fit: contain !important; 
}

/* [FIN DEL BLOQUE A REEMPLAZAR] */
    /* Estilo para el banner animado (slider de banners) */
    .slider {
      height: 180px !important;  
      max-width: 100% !important;
      overflow: hidden !important;
    }
    .slides {
      width: 400% !important;  
      height: 100% !important;
      animation: slide-movil 16s infinite !important;  
    }
    .slides img {
      width: 25% !important;
      height: 100% !important;
      object-fit: cover !important;
      margin: 0 !important;
      padding: 0 !important;
    }
    /* Animación para el slider de banners */
    @keyframes slide-movil {
      0%   { transform: translateX(0%); }
      20%  { transform: translateX(0%); }
      25%  { transform: translateX(-25%); }  
      45%  { transform: translateX(-25%); }
      50%  { transform: translateX(-50%); }  
      70%  { transform: translateX(-50%); }
      75%  { transform: translateX(-75%); }
      95%  { transform: translateX(-75%); }
      100% { transform: translateX(0%); }
    }
    
    /* --- CORRECCIONES ESPECÍFICAS (Service Multimarca) --- */
    
    /* 1. VISIBILIDAD DE IMÁGENES: OCULTA PC, MUESTRA MÓVIL */
    .image-button-overlay-container .img-desktop-only {
        display: none !important;
    }
    .image-button-overlay-container .img-mobile-only {
        display: block !important; 
    }

    /* 2. POSICIONAMIENTO DEL BOTÓN 'SOLICITAR TURNO' EN MÓVIL */
    .image-button-overlay-container a.new-lubriclub-button {
        /* Centrado Horizontal */
        position: absolute !important; 
        left: 50% !important; 
        margin-left: 0 !important;
        transform: translateX(-50%) !important;
        
        /* TAMAÑO y FORMATO */
        width: 80% !important;
        height: 50px !important; 
        line-height: 50px !important; 
        padding: 0 10px !important; 
        font-size: 16px !important; 
        text-align: center !important; 
        
        /* ALTURA DEL BOTÓN: Lo anclamos muy abajo. */
        bottom: 5% !important; 
        
        /* Aseguramos que el botón no se oculte */
        z-index: 9999 !important; 
        display: block !important; 
    }
}