*{
            margin: 0 auto;
        }

        body {
            font-family: 'Chakra Petch', sans-serif;
        }

        .logo-seguros-motos{
            text-align: center; 
            background-color: black;
        }

        @media only screen and (max-width: 600px) {
            /* Aplica estilos solo cuando el ancho de la pantalla es 600px o menos (tamaño típico de un dispositivo móvil) */
            .logo-seguros-motos img{
                
                width: 98% ; /* Cambia el ancho de la imagen a 100px */
            }
        }

        .nav-color{
            background-color: #292929;
        }

        .menu-opciones {
            font-size: 20px;
        }
        .portada {
            margin: 0;
            padding: 0;
            overflow: hidden; /* Evita la barra de desplazamiento */
            display: flex;
            justify-content: center;
            align-items: center;
            height: 50vh;
            background-color: white; /* Color de fondo del cuerpo */
            color: white; /* Color del texto */
        }

        #video-container {
            position: relative;
            width: 100vw; /* 100% del ancho de la ventana de visualización */
            height: 130vh; /* 100% de la altura de la ventana de visualización */
            overflow: hidden; /* Evita que el video sobresalga del contenedor */
        }

        video {
            width: 100%;
            height: 100%;
            object-fit: cover; /* Cubre completamente el contenedor manteniendo la proporción del video */

        }

        #video-overlay {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 2em; /* Tamaño del texto */
        }

        /* -------- remimensionar logo en dip movil ----- */
        @media only screen and (max-width: 600px) {
            /* Aplica estilos solo cuando el ancho de la pantalla es 600px o menos (tamaño típico de un dispositivo móvil) */
            .logo-video {
                margin-left: 30px;
                margin-bottom: 30px;
                width: 340px; /* Cambia el ancho de la imagen a 100px */
            }
        }

        /* config imagen tarjetas marcas */
        .image-container {
            width: 100%;
            height: 200px;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .image-container img {
            max-width: 100%;
            max-height: 100%;
            width: auto;
            height: auto;
        }

        /* animacion slider portada */

        #slider-container {
            text-align: center;
            font-size: 24px;
            margin-top: 50px;
            overflow: hidden;
            position: relative;
        }

        .slides {
            display: flex;
            transition: transform 1s ease-in-out;
        }

        .slide {
            min-width: 100%;
            box-sizing: border-box;
        }

        /* ---------------contenedor marcas responsibe mobiles--------------- */
        /* Estilos generales para el div */
        #contenedor-tarjetas-marcas-movil {
            display: none; /* Por defecto, oculto */
            background-color: #292929;
            padding-top: 20px;
            text-align: center;
            color: white;
        }

        .contenedor-logo-marca-movil img{
            background-color: white;
        }



        /* Media query para dispositivos con un ancho máximo de 767px (generalmente dispositivos móviles) */
        @media (max-width: 767px) {
            #contenedor-tarjetas-marcas-movil {
                display: block; /* Mostrar solo en dispositivos móviles */
            }

            #contenedor-tarjetas-marcas-pc{
                display: none;
            }
        }

        /* Estilos generales para las tarjetas y el contenedor */
        .tarjeta-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            padding: 10px;
        }

        .tarjeta {
            width: calc(33.33% - 20px);
            margin-bottom: 20px;
            text-align: center;
        }

        .tarjeta img {
            max-width: 100%;
            height: auto;
            border-radius: 8px;
        }

        /* Estilos específicos para dispositivos móviles */
        @media (max-width: 767px) {
            .tarjeta {
                width: calc(50% - 20px);
            }
        }

        /* -- fin tarjetas marcas responsive mobiles --*/

        




        /* ---------------Estilos movil tarjetas marcas--------------- */
        .tarjeta-container-movil {
            background-color: #292929;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            padding: 0px;
        }

        .tarjeta-movil {
            width: calc(33% - 10px);
            margin-bottom: 20px;
            text-align: center;
        }

        .tarjeta-movil img {
            width: 100%;
            height: 80px;
            max-width: 100%; /* Asegura que la imagen no exceda el ancho del contenedor */
            max-height: 100%; /* Asegura que la imagen no exceda la altura del contenedor */
            object-fit: contain; /* Centra la imagen manteniendo la proporción */
            border-radius: 8px;
        }



        

/* config imagen tarjetas marcas */
        .mapa-concesionario-container {
            width: 100%;
            height: 200px;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        /* Estilos para el footer */
        footer {
            background-color: #333;
            color: white;
            padding: 20px;
            text-align: center;
           
            bottom: 0;
            width: 100%;
        }

        /* Estilos para los enlaces del footer */
        footer a {
            color: white;
            text-decoration: none;
            margin: 0 10px;
        }

        /* Estilos para el logo en el footer */
        footer img {
            max-width: 250px;
            max-height: 50px;
            margin-bottom: 10px;
        }

        /* Estilos para la información legal en el footer */
        .legal-info {
            font-size: 14px;
            margin-top: 15px;
        }

        .card {
        transition: transform 0.3s ease-in-out;
    }

    .card:hover {
        transform: scale(1.1); /* Puedes ajustar el valor según tus preferencias */
        z-index: 1; /* Asegura que la tarjeta ampliada esté encima de las demás */
    }



        /* estilo para mostrar logo oferta en la tarjeta productos */
        .position-relative {
    position: relative;
}

.oferta-badge {
    position: absolute;
    top: -9px; /* Ajusta la posición vertical según tu diseño */
    left: -9px; /* Ajusta la posición horizontal según tu diseño */
    width: 100px; /* Ajusta el ancho según tu diseño */
    height: auto; /* Mantiene la proporción original */
    z-index: 1; /* Asegura que la imagen de oferta esté sobre la imagen principal */
}

/*cookies div*/
#cookie-banner {
      display: none;
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      padding: 10px;
      background-color: #e64545;
      text-align: center;
      z-index: 9999;
      opacity: 0.9;
      border-radius: 25px;
      border: 4px solid  white;
      
    }

#cookie-banner button {
    background-color: black;
    color: white;
    border-radius: 5px;
    border: 4px solid  black;
    margin: 5px;


}