* {
            box-sizing: border-box; 
        }

        .map-container {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            margin: 20px auto;
            max-width: 40%;
            background: rgba(34, 34, 34, 0.7);
            overflow: hidden;
        }
        

        /* Estilo del mapa */
        #map {
            width: 95%;
            height: 500px;
            aspect-ratio: 16 / 9;
            border-radius: 8px;
            border: 3px solid #ccc;
        }


        /* =========================
           RESET BÁSICO  
        ========================== */
        html {
            scroll-behavior: smooth;
        }

        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
            background-color: transparent;
            overflow: auto; 
            scrollbar-width: none;
            -ms-overflow-style: none;
            overflow-x: hidden;
        }


        html::-webkit-scrollbar,
        body::-webkit-scrollbar {
            display: none;
            width: 0 !important;
            height: 0 !important;
        }

        /* =========================
           SECCIONES
        ========================== */
   
        h2 {
            margin-top: 0;
            font-size: 2em;
            color: white;
            margin-bottom: 20px;
            font-family: 'Roboto', sans-serif;
            
        }

        .categorias_multicomercial img,
        .ubicacion_multicomercial img,
        .promociones_multicomercial img,
        .titulo_multicomercial img {
            display: block !important;
            margin: 0 auto !important;
            max-width: 100%; 
            text-align: center;
        }


        /* =========================
           INPUTS FLOTANTES
        ========================== */
        .inputContainer {
            position: relative;
            height: 45px;
            width: 100%;
            max-width: 360px;
            margin-bottom: 17px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

       .input, .select {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
            box-sizing: border-box;
            border: 1px solid #999;
            border-radius: 7px;
            font-size: 15px;
            padding: 0 15px;
            outline: none;
            background-color: white;
            z-index: 1;
            transition: border 0.3s, box-shadow 0.3s;
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
        }

        /* Flecha personalizada opcional */
        .select {
            background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='20' viewBox='0 0 24 24' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
            background-repeat: no-repeat;
            background-position: right 12px center;
            padding-right: 40px;
        }

        .select:focus {
            border: 2px solid blue;
            box-shadow: 0 0 6px rgba(0, 0, 255, 0.3);
        }

        .input:focus {
            border: 2px solid blue;
            box-shadow: 0 0 6px rgba(0, 0, 255, 0.3);
        }

        .label {
            position: absolute;
            top: 15px;
            left: 15px;
            padding: 0 4px;
            background-color: white;
            color: #999;
            font-size: 14px;
            transition: 0.4s;
            z-index: 2;            
            pointer-events: auto;  
        }

        .select:focus + .label,
        .select:valid + .label {
            top: -7px;
            left: 6px;
            font-size: 13px;
            font-weight: 600;
            color: black;
            z-index: 3;
        }

        .input:focus + .label,
        .input:not(:placeholder-shown) + .label {
            top: -7px;
            left: 6px;
            font-size: 13px;
            font-weight: 600;
            color: black;
            z-index: 3; 
        }

        ::placeholder {
            color: transparent;
        }

        /* =========================
           FORMULARIO EN 2 COLUMNAS
        ========================== */
        .form {
            display: grid;
            grid-template-columns: 1fr 1fr;
            column-gap: 120px;
            row-gap: 15px;
            max-width: 900px;
            margin: 0 auto;
        }

        .form .inputContainer {
            width: 100%;
            margin: 0;
        }

        .form .full-width {
            grid-column: 1 / -1;
            max-width: 100%;    
            width: 97%;
            height: 90px;
            justify-self: stretch;
        }

        .form .full-width .input {
            width: 100%;
        }

        /* =========================
           BOTÓN
        ========================== */
        .submitBtn {
            grid-column: 1 / -1;
            justify-self: center;
            margin-top: 25px;
            width: 220px;
            background-color: black;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
            transition: background 0.3s, transform 0.2s;
        }

        .submitBtn:hover {
            background-color: #222;
            transform: scale(1.03);
        }

        /* =========================
        TEXTAREA MULTILÍNEA
        ========================= */
        .textarea-container {
            height: 110px;   
        }

        .textarea {
            width: 100%;
            height: 100%;
            resize: none;   
            border: 1px solid #999;
            border-radius: 7px;
            font-size: 15px;
            padding: 10px 15px;
            outline: none;
            background-color: white;
            box-sizing: border-box;
            transition: border 0.3s, box-shadow 0.3s;
        }

        .textarea:focus {
            border: 2px solid blue;
            box-shadow: 0 0 6px rgba(0, 0, 255, 0.3);
        }

        /* Label flotante para textarea */
        .textarea:focus + .label,
        .textarea:not(:placeholder-shown) + .label {
            top: -7px;
            left: 6px;
            font-size: 13px;
            font-weight: 600;
            color: black;
            z-index: 3;
        }

        #servicios h2,
        #repuestos h2,
        #agendar h2,
        #inicio h2,
        #nosotros,
        #contacto {
            text-align: center;
        }

        section p {
            text-align: center;
            max-width: 700px;
            margin: 5px auto 0;
            font-size: 20px;
            line-height: 1.6;
            color: black;
        }

        .repuestos-galeria {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
            gap: 30px;
            margin-top: 30px;
            max-width: 1000px;
            margin-left: auto;
            margin-right: auto;
        }

        .repuesto-item {
            background: white;
            border-radius: 16px;
            box-shadow: 0 6px 18px rgba(0,0,0,0.2);
            padding: 18px;
            aspect-ratio: 1 / 1;      
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;      
            transition: transform 0.3s ease;
        }

        .repuesto-item img {
            width: 100%;
            height: 100%;
            object-fit: contain;    
            transition: transform 0.3s ease;
        }

        .repuesto-item:hover img {
            transform: scale(1.12);
        }

        .repuestos-galeria img {
            width: 100%;
            aspect-ratio: 1 / 1;     
            object-fit: contain;    
            background: white;
            padding: 18px;
            border-radius: 16px;
            box-shadow: 0 6px 18px rgba(0,0,0,0.2);
            transition: transform 0.3s ease;
        }

        .repuestos-galeria img:hover {
            transform: scale(1.08);
        }

        .servicio-item {
            position: relative;
            overflow: hidden;
            border-radius: 12px;
        }

        .servicio-item img {
            width: 100%;
            height: 230px;
            object-fit: cover;
            display: block;
            border-radius: 12px;
            transition: transform 0.3s ease;
        }

        .servicio-item:hover img {
            transform: scale(1.05);
        }


        .servicio-texto {
            position: absolute;
            inset: 0;
            background: rgba(0, 0, 0, 0.65);
            color: white;
            font-size: 18px;
            font-weight: bold;

            display: flex;
            align-items: center;
            justify-content: center;

            opacity: 0;
            transition: opacity 0.3s ease;
        }


        .servicio-item:hover .servicio-texto {
            opacity: 1;
        }
        

        /* =========================
           OFERTA DEL DÍA
        ========================= */
        .oferta-titulo-box {
            margin-top: 60px;
            margin-bottom: 20px;
            text-align: center;
            padding: 20px 15px;
            background: linear-gradient(to right, rgba(209, 209, 206, 1), rgb(253, 1, 1));
            border-radius: 18px;
            box-shadow: 0 10px 25px rgba(245, 13, 13, 1);
            color: white;
            max-width: 650px;
            margin-left: auto;
            margin-right: auto;
            position: relative;
        }

        .titulo-oferta {
            margin: 0;
            font-size: 25px;
            font-weight: 800;
            letter-spacing: 1px;
            color:white;
        }

        .subtitulo-oferta {
            margin-top: 8px;
            font-size: 16px;
            opacity: 0.85;
            color:white;
        }
        

        /* =======================
           GALERIA DE FOTOS
        ======================= */
        .banner-container {
            width: 100%;
            overflow: hidden; 
            background-color: transparent;
            padding: 10px 0;
            position: relative;
        } 


        .banner-content {
            display: flex;
            width: max-content; 
            animation: infiniteScroll 20s linear infinite;
        }

        /* Estilo para cada conjunto de imagen y texto */
        .banner-item {
            flex-shrink: 0; 
            margin-right: 25px; 
            text-align: center;
            width: 160px;
            height: auto;
            overflow: hidden;
            text-decoration: none;
            color: inherit;
            cursor: pointer;
        }

        .banner-item img {
            width: 100%;
            height: 150px;
            object-fit: cover;
            display: block;
            border-radius: 5px;
        }

        /* Estilo para el texto debajo de cada imagen */
       .banner-item p {
            margin-top: 10px; 
            font-size: 0.8em;
            color: white;
            font-weight: bold;
            text-transform: uppercase;
            padding: 5px 10px;
            border-radius: 5px;
            word-wrap: break-word;
            white-space: normal;
            max-width: 100%;
            color: black;
            font-family: 'Roboto', sans-serif;
        }
        


        @keyframes infiniteScroll {
            0% {
                transform: translateX(0);
            }
            100% {
                transform: translateX(-50%);
            }
        }
      
       
        /* Opcional: añade un efecto visual cuando el usuario pasa el ratón por encima */
        .banner-item img{
	    transition: transform .25s ease, filter .25s ease;
	}
	
	.banner-item:hover img{
	    transform: scale(1.05);
	    filter: brightness(.75);
	}

        .banner-item:hover p{
		    background: #d32f2f;
		    color: #fff;
		    border-color: #d32f2f;
		    transform: translateY(-2px);
		    color: black;
		}

        /* =======================
           RESPONSIVO
        ======================= */
        @keyframes modalFade {
            from {
                opacity: 0;
                transform: scale(0.95);
            }
            to {
                opacity: 1;
                transform: scale(1);
            }
        }

        .titulo_multicomercial {
            text-align: center;
            margin-top: 0;
            font-size: 2em;
            color: white;
            margin-bottom: 0px;
            font-family: 'Bullpen3d';
        }
        
        .oferta-card {
            flex: 0 0 auto;         
            text-align: center;
            margin-top: 0 !important
        }

        .ofertas-imagenes {
            display: flex;
            justify-content: center;
            align-items: flex-start;
            gap: 30px;              
            flex-wrap: nowrap;      
        }


        .preview {
            background: transparent;
            display: flex;
            justify-content: center;
        }


        .preview img {
            width: 240px;
            max-width: 100%;
            height: auto;
        }

        .sin-imagen {
            color: #aaa;
            font-size: 14px;
            padding: 40px 0;
        }

        input[type="file"] {
            font-size: 13px;
            margin-bottom: 10px;
        }

        .btn-subir {
            width: 200px;
            margin: 12px auto 0;
            display: block;
            text-align: center;
            font-size: 14px;
            font-weight: bold;
            border-radius: 30px;
            background: linear-gradient(to right, rgba(209, 209, 206, 1), rgb(253, 1, 1));
            color: #fff;
            border: none;
            transition: all 0.3s ease;
            text-align: center;
            padding: 10px 20px;
            
        }

        .btn-subir:hover {
            background: linear-gradient(135deg, #0056b3, #003d80);
            transform: translateY(-1px);
            box-shadow: 0 6px 14px rgba(0,0,0,0.25);
        }


        .file-input {
            width: 100%;
            margin-bottom: 10px;
        }

        .file-input input[type="file"] {
            display: none;
        }

        .file-label {
            display: block;
            width: 100%;
            padding: 10px 12px;
            text-align: center;
            background: #e9ecef;
            color: #333;
            border-radius: 8px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: background 0.3s;
        }

        .file-label:hover {
            background: #dcdcdc;
        }


        .oferta-link {
            display: inline-block;
            cursor: pointer;
        }

        .oferta-link img {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .oferta-link:hover img {
            transform: scale(1.04);
            box-shadow: 0 8px 20px rgba(0,0,0,0.25);
        }


        /* =========================
        CUADRO HISTORIA (GLASS)
        ========================= */
        .historia-box {
            max-width: 900px;
            margin: 40px auto;
            padding: 30px 35px;
            background: rgba(34, 34, 34, 0.7);
            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);
            border-radius: 18px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
            color: white;
            font-family: 'Roboto', sans-serif;
        }
        
        .historia-box h2 {
            text-align: center;
            margin-bottom: 20px;
            color: #111;
            text-shadow: 0 2px 3px rgba(0,0,0,0.3);
            color: white;
        }

        .historia-box p {
            line-height: 1.5;
            text-shadow: 0 1px 2px rgba(0,0,0,0.25);
        }

        .historia-box strong {
            color: red;
        }

     
        .caption {
            position: absolute;
            bottom: 20px;
            left: 20px;
            background: rgba(0, 0, 0, 0.6); 
            color: #ffffff;
            padding: 15px 25px;
            border-radius: 5px;
            font-family: sans-serif;
            font-size: 1.2rem;
            text-transform: uppercase;
        }


       /* =======================
        ÍCONOS SOCIALES
        ======================= */
        .social-icons {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 18px;
            margin: 25px 0;
        }

        .social-icons a img {
            width: 52px;
            height: 52px;
            object-fit: contain;
            transition: transform 0.25s ease, opacity 0.25s ease;
            cursor: pointer;
        }

        .social-icons a img:hover {
            transform: scale(1.12);
            opacity: 0.85;
        }


        /* =======================
        ÍCONOS SOCIALES FLOTANTES
        ======================= */
        
        .social-float {
            position: fixed;
            right: 30px;
            top: 25%;
            transform: translateY(-50%);
            display: flex;
            flex-direction: column;
            gap: 12px;
            z-index: 9999;
        }

        /*NUEVO*/
        .social-float img {
            width: 46px;
            height: 46px;
            border-radius: 10px;
            box-shadow: 0 4px 10px rgba(0,0,0,.4);
            transition: transform .2s ease;
        }

        .social-float a img {
            width: 46px;
            height: 46px;
        }
        .social-float img:hover {
            transform: scale(1.1);
        }


        @keyframes slide-down {
            from {
                opacity: 0;
                transform: translateY(-20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

       
        
        /* =========================
        ESTILOS DEL BOTÓN FLOTANTE
        ========================= */

        .floating-btn-container {
            position: fixed;
            left: 12px;
            top: 0;              
            transform: none !important;
            z-index:20001 !important;
        }

        .floating-btn {
            background-color: #2ca546; 
            color: white;
            border: none;
            border-radius: 50%; 
            padding: 10px 15px; 
            font-size: 12px; 
            font-weight: bold;
            text-align: center;
            cursor: pointer;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
            transition: transform 0.3s ease-in-out, background-color 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            text-transform: uppercase;
            letter-spacing: 1px;
            min-width: 60px;
            min-height: 60px;
            position: relative;
            position:relative;
        }

        .floating-btn:hover {
            transform: scale(1.1); 
            background-color: #c1440E; 
        }

        /* Estilos para el menú desplegable */
        .floating-menu{
            position: fixed;     
            left: 12px;
            top: 110px;          
            display: none;
            flex-direction: column;
            gap: 10px;
            background: #ffffff;
            padding: 12px;
            border-radius: 10px;
            box-shadow: 0 8px 25px rgba(0,0,0,.25);
            z-index: 20000;      
        }

        .floating-menu.active {
            display:flex;
            animation: slide-up 0.3s ease-out;
            
        }

        .floating-menu button {
            width: 100%;
            padding: 12px;
            margin: 8px 0;
            font-size: 16px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .floating-menu button:hover {
            background-color: #0056b3;
        }


        .titulo_multicomercial {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 0;
        }

        .logo-img {
            height: 500px;
            object-fit: contain;
        }
      
      
      
        /* =========================
        RESPONSIVE DESIGN – MOBILE PORTRAIT
        ========================= */
        @media (max-width: 768px) and (orientation: portrait) {

        html, body {
            width: 100%;
            max-width: 100%;
            overflow-x: hidden;
        }

        section,
        .historia-box,
        .map-container,
        .ofertas-imagenes {
            overflow-x: hidden;
        }
        
        /* =========================
        LOGO – MÁS ARRIBA
        ========================= */
        .titulo_multicomercial {
            margin-top: 6px !important;
            margin-bottom: 0 !important;
            text-align: center;
        }
	
        .titulo_multicomercial img {
            max-width: 85%;
            height: auto;
            display: block;
            margin: 0 auto;
            margin-bottom:-14px !important;
        }
	  
	    /* =========================
	     BOTÓN FLOTANTE – MÁS ARRIBA
	     ========================= */

        .floating-btn-container{
            position: fixed;
            left: 8px;
            top: 0;
            transform: none;
            z-index: 9999;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
        }
	  
      
	    /* =========================
	     PROMOCIONES DISPONIBLES
	    ========================= */
        .promociones_multicomercial {
            margin-top: 18px !important;
            margin-bottom: 0 !important;
            text-align: center;
        }
	  
        .promociones_multicomercial img {
            /*max-width: 88%;*/
            height: auto;
            display: block;
            margin: 0 auto -12px auto !important;
        }
		
	    /* =========================
	     CATEGORÍAS DISPONIBLES
	    ========================= */
	  
	    h2.titulo_multicomercial,
        h2.promociones_multicomercial,
        h2.categorias_multicomercial{
            margin: 0 !important;
            padding: 0 !important;
            line-height: 0 !important;
            height: auto !important;
        }
	
        h2.categorias_multicomercial img {
            max-width: 88%;
            height: auto;
            display: block;
            margin: 0 auto;   
        }


	    /* =========================
	     OFERTAS
	    ========================= */
        .ofertas-imagenes {
            display: flex !important;
            flex-direction: column !important;   /* 🔑 CLAVE */
            align-items: center;
            gap: 12px;
            margin-top: 12px !important;
            padding: 0 !important;
        }
	
            /* Cada tarjeta ocupa todo el ancho */
        .oferta-card {
            width: 100% !important;
            display: flex;
            justify-content: center;
        }
	
        /* Imagen responsive y vertical */
        .oferta-card img {
            width: 96% !important;
            max-width: 420px;
            height: auto;
            display: block;
            border-radius: 10px;
        }
	  
        /* =========================
            BANNER – SCROLL CON EL DEDO
            ========================= */
        .banner-wrapper {
            position: relative;
            width: 100%;
            overflow: hidden;          
            padding: 10px 0;
        }

        /* ===== VENTANA DEL BANNER ===== */
        .banner-container {
            overflow: hidden;          
            width: 100%;
        }

        /* ===== PISTA ===== */
        .banner-content {
            display: flex;
            flex-wrap: nowrap;
            transition: transform 0.45s ease;
            will-change: transform;
        }

        /* ===== ITEMS ===== */
        .banner-item {
            flex: 0 0 120px;
            text-align: center;
            user-select: none;
        }

        .banner-item img {
            height: 90px;
            object-fit: contain;
            pointer-events: auto;
        }

        .banner-item p {
            font-size: 0.65rem;
            padding: 4px 6px;
            text-align: center;
            color: black;
            font-family: 'Roboto', sans-serif;
        }

        
        .banner-content {
        animation: bannerAuto 25s linear infinite;
        }
       

	.banner-item:active p{
	    background: #d32f2f;
	    color: #fff;
	    border-color: #d32f2f;
	}
	
	
	    /* =========================
	     SOCIAL FLOAT
	    ========================= */
        .social-float {
            bottom: 180px !important;
        }
	  
	  
	 
    
        /* =========================
       MAPA – CUADRADO Y MÁS PEQUEÑO
       ========================= */
    
        .map-container {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 10px;
            margin: 16px auto;
            width: 100%;
            max-width: 100%;
            background: rgba(34, 34, 34, 0.65);
            border-radius: 14px;
            box-shadow: 0 3px 10px rgba(0,0,0,0.25);
            overflow: hidden;
        }
    
        #map {
            width: 92vw;          /* casi todo el ancho */
            max-width: 380px;
            height: 92vw;         /* 🔑 cuadrado real */
            max-height: 380px;
            border-radius: 12px;
            border: 2px solid #ccc;
        }
        
    }
    
    @keyframes bannerAuto {
	    from { transform: translateX(0); }
	    to   { transform: translateX(-50%); }
    }