/* ===================================================================== TEFI'S AUTO SERVICE — REDISEÑO PREMIUM COMPLETO (v2 - fondo oscuro) ----------------------------------------------------------------------- Este archivo se carga DESPUÉS de inicio.css y transforma visualmente TODO el sitio a un estilo oscuro, técnico y premium (inspirado en la imagen de referencia), manteniendo los colores de marca (rojo/azul del logo). No modifica lógica, rutas, formularios ni JavaScript. Instalación en las 4 páginas (index.php, servicios.php, galeria.php, contacto.php), dentro del , debajo de la línea de inicio.css: ===================================================================== *//* ============================================= 1. PALETA Y TOKENS============================================= */:root{--primary:#0d0d0f;/* texto oscuro:se usa DENTRO de tarjetas claras */ --secondary:#d62828;--secondary-dark:#a11c1c;--azul-tefi:#2f6fae;--azul-tefi-light:#4a90d9;--accent-glow:#b6ff3c;--gold:#e0b04b;--white:#ffffff;--light:#f4f5f7;--gray:#71757b;--border:#e7e9ec;--dark-bg:#0a0a0c;/* lienzo general del sitio */ --dark-bg-2:#111214;/* variación para alternar secciones */ --dark-surface:#17181b;/* tarjetas oscuras (reseñas, etc.) */ --dark-surface-2:#1f2024;--dark-border:rgba(255,255,255,.09);--text-light:rgba(255,255,255,.92);--text-light-soft:rgba(255,255,255,.68);--shadow-sm:0 2px 10px rgba(0,0,0,.20);--shadow-md:0 10px 30px rgba(0,0,0,.28);--shadow-lg:0 22px 50px rgba(0,0,0,.35);--shadow-xl:0 32px 80px rgba(0,0,0,.45);--shadow-glow-red:0 0 0 1px rgba(214,40,40,.25), 0 18px 45px rgba(214,40,40,.28);--shadow-glow-blue:0 0 0 1px rgba(47,111,174,.25), 0 18px 45px rgba(47,111,174,.24);--shadow-glow-accent:0 0 0 1px rgba(182,255,60,.32), 0 0 30px rgba(182,255,60,.24);--radius:14px;--radius-lg:20px;--radius-xl:28px;--transition:.3s cubic-bezier(.4,0,.2,1);--transition-smooth:.5s cubic-bezier(.16,1,.3,1);--font-display:'Oswald','Montserrat',sans-serif;--gradient-primary:linear-gradient(135deg,#d62828 0%,#ff5252 55%,#ff7a3d 100%);--gradient-dark:linear-gradient(160deg,#0a0a0c 0%,#232427 100%);--gradient-accent:linear-gradient(135deg,#2f6fae 0%,#5aa6e6 100%);--gradient-gold:linear-gradient(135deg,#caa14d 0%,#f1d98b 50%,#caa14d 100%);}/* ============================================= 2. LIENZO GENERAL — TODO EL SITIO EN OSCURO============================================= */body{background:var(--dark-bg);color:var(--text-light);}::selection{background:var(--secondary);color:var(--white);}html{scroll-padding-top:110px;}*:focus-visible{outline:2px solid var(--accent-glow);outline-offset:3px;}::-webkit-scrollbar{width:10px;}::-webkit-scrollbar-track{background:var(--dark-bg);}::-webkit-scrollbar-thumb{background:var(--secondary);border-radius:10px;}::-webkit-scrollbar-thumb:hover{background:var(--secondary-dark);}/* Patrón técnico tipo "plano de diagnóstico" — reutilizable */.tech-grid-bg::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);background-size:44px 44px;-webkit-mask-image:radial-gradient(ellipse at center, rgba(0,0,0,.9) 0%, transparent 75%);mask-image:radial-gradient(ellipse at center, rgba(0,0,0,.9) 0%, transparent 75%);}/* ============================================= 3. NAVBAR — VIDRIO OSCURO PREMIUM============================================= */.navbar{background:rgba(9,9,11,.82);backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);border-bottom:1px solid rgba(255,255,255,.08);}.navbar.scrolled{background:rgba(7,7,9,.96);box-shadow:0 12px 35px rgba(0,0,0,.5);border-bottom-color:rgba(255,255,255,.06);}.logo{filter:drop-shadow(0 4px 12px rgba(0,0,0,.4));}.nav-link{color:rgba(255,255,255,.8);letter-spacing:.2px;}.nav-link::after{background:var(--accent-glow);height:2px;box-shadow:0 0 10px rgba(182,255,60,.7);}.nav-link:hover,.nav-link.active{color:var(--white);}.btn-navbar{background:var(--gradient-primary);box-shadow:var(--shadow-glow-red);border:1px solid rgba(255,255,255,.14);}.btn-navbar:hover{box-shadow:0 14px 34px rgba(214,40,40,.5);}.lang-toggle{border-color:rgba(255,255,255,.2);color:rgba(255,255,255,.9);}.lang-toggle:hover{background:var(--accent-glow);color:#0a0a0c;border-color:var(--accent-glow);}.bar{background:var(--white);}@media(max-width:768px){#nav-menu{background:rgba(6,6,8,.98);}.nav-link::after{display:none;}.nav-link{position:relative;padding:8px 22px;border:1px solid transparent;border-radius:50px;}.nav-link.active{border-color:rgba(182,255,60,.4);color:var(--accent-glow);}}/* ============================================= 4. HERO============================================= */.hero-overlay{background:linear-gradient(180deg, rgba(4,4,6,.5) 0%, rgba(4,4,6,.85) 60%, rgba(4,4,6,.98) 100%);}.hero-background img{filter:blur(3px) saturate(1.1) contrast(1.05) brightness(.85);}.hero-content{background:rgba(8,8,10,.4);border:1px solid rgba(255,255,255,.14);border-radius:var(--radius-xl);box-shadow:0 0 0 1px rgba(214,40,40,.14), 0 45px 110px rgba(0,0,0,.6), 0 0 70px rgba(214,40,40,.10);position:relative;}.hero-content::before,.hero-content::after{content:'';position:absolute;width:42px;height:42px;border:2px solid var(--accent-glow);opacity:.85;filter:drop-shadow(0 0 6px rgba(182,255,60,.5));}.hero-content::before{top:-11px;left:-11px;border-right:none;border-bottom:none;border-top-left-radius:18px;}.hero-content::after{bottom:-11px;right:-11px;border-left:none;border-top:none;border-bottom-right-radius:18px;}.hero-badge{font-family:var(--font-display);letter-spacing:1px;text-transform:uppercase;font-size:.82rem;box-shadow:var(--shadow-glow-red);border:1px solid rgba(255,255,255,.22);}.hero h1{font-family:var(--font-display);font-weight:700;letter-spacing:.5px;font-size:clamp(2.4rem, 6vw, 4.6rem);background:linear-gradient(180deg,#ffffff 0%, #e9e9e9 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}.hero h1 span{background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;filter:drop-shadow(0 6px 22px rgba(214,40,40,.35));}.hero p{color:rgba(255,255,255,.88);font-weight:500;}.btn-primary, .btn-whatsapp{font-family:var(--font-display);letter-spacing:1px;border-radius:var(--radius);border:1px solid rgba(255,255,255,.14);}.btn-primary{background:var(--gradient-primary);box-shadow:var(--shadow-glow-red);}.btn-primary:hover{box-shadow:0 16px 38px rgba(214,40,40,.5);}.btn-whatsapp{box-shadow:var(--shadow-glow-accent);}.btn-whatsapp:hover{box-shadow:0 16px 38px rgba(37,211,102,.45);}.hero::after{content:"\f078";font-family:"Font Awesome 6 Free";font-weight:900;position:absolute;bottom:30px;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.55);font-size:1.3rem;z-index:3;animation:scrollCue 1.8s ease-in-out infinite;}@keyframes scrollCue{0%,100%{opacity:.35;transform:translateX(-50%) translateY(0);}50%{opacity:1;transform:translateX(-50%) translateY(8px);}}@media(max-width:768px){.hero::after{display:none;}}/* ============================================= 5. ENCABEZADOS DE SECCIÓN (color claro, sección oscura)============================================= */.section-tag{font-family:var(--font-display);letter-spacing:1.6px;background:var(--gradient-accent);box-shadow:var(--shadow-glow-blue);border:1px solid rgba(255,255,255,.22);}.section-tag::before{font-family:"Font Awesome 6 Free";font-weight:900;content:"\f00c";margin-right:8px;}.section-title{font-family:var(--font-display);font-weight:700;letter-spacing:.2px;color:var(--text-light);position:relative;z-index:1;}.section-title::after{content:'';display:block;width:64px;height:4px;margin:16px auto 0;background:var(--gradient-primary);border-radius:4px;}.section-description{color:var(--text-light-soft);font-weight:500;position:relative;z-index:1;}/* ============================================= 6. SECCIÓN "TRABAJOS REALIZADOS" (home) — antes sin fondo propio============================================= */.gallery{position:relative;background:var(--dark-bg-2);padding:100px 0;overflow:hidden;}.gallery::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);background-size:44px 44px;-webkit-mask-image:radial-gradient(ellipse at center, rgba(0,0,0,.9) 0%, transparent 75%);mask-image:radial-gradient(ellipse at center, rgba(0,0,0,.9) 0%, transparent 75%);}.gallery .container{position:relative;z-index:1;}.gallery-item{border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);border:1px solid rgba(255,255,255,.06);}.gallery-item::after{background:linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.55) 100%);}.gallery-item::before{content:"\f00e";font-family:"Font Awesome 6 Free";font-weight:900;position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%) scale(.6);color:var(--white);font-size:1.6rem;width:56px;height:56px;display:flex;align-items:center;justify-content:center;border:2px solid rgba(255,255,255,.5);border-radius:50%;background:rgba(214,40,40,.3);opacity:0;transition:var(--transition-smooth);}.gallery-item:hover::before{opacity:1;transform:translate(-50%,-50%) scale(1);}.gallery-item:hover{box-shadow:var(--shadow-xl);transform:translateY(-6px);}/* ============================================= 7. RESEÑAS (home)============================================= */.reviews{position:relative;background:var(--dark-bg);padding:100px 0;overflow:hidden;}.reviews::before{content:'';position:absolute;z-index:0;pointer-events:none;top:-10%;right:-10%;width:50%;height:70%;background:radial-gradient(circle, rgba(214,40,40,.14), transparent 65%);}.reviews::after{content:'';position:absolute;z-index:0;pointer-events:none;bottom:-10%;left:-10%;width:50%;height:70%;background:radial-gradient(circle, rgba(47,111,174,.14), transparent 65%);}.reviews .container{position:relative;z-index:1;}.google-rating-box{background:var(--dark-surface);border:1px solid var(--dark-border);box-shadow:var(--shadow-lg);}.google-left h3{font-family:var(--font-display);letter-spacing:.3px;}.google-right span{font-family:var(--font-display);color:var(--white);}.review-card{background:var(--dark-surface);border:1px solid var(--dark-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);}.review-card:hover{border-color:rgba(214,40,40,.55);box-shadow:var(--shadow-glow-red), var(--shadow-xl);transform:translateY(-8px);}.review-top h3{font-family:var(--font-display);letter-spacing:.2px;}.google-btn{font-family:var(--font-display);letter-spacing:.6px;background:linear-gradient(135deg,#4285F4 0%, #5c9bff 100%);}/* Reviews Slider */.reviews-slider-wrapper{position:relative;margin:40px 0;}.reviews-slider{position:relative;overflow:hidden;}.review-slide{display:none;animation:fadeIn 0.5s ease-in-out;}.review-slide.active{display:block;}@keyframes fadeIn{from{opacity:0;transform:translateX(20px);}to{opacity:1;transform:translateX(0);}}.reviews-slider-wrapper .slider-btn{position:absolute;top:50%;transform:translateY(-50%);background:var(--dark-surface);border:1px solid var(--dark-border);color:var(--white);width:50px;height:50px;border-radius:50%;cursor:pointer;z-index:10;transition:all 0.3s ease;display:flex;align-items:center;justify-content:center;}.reviews-slider-wrapper .slider-btn:hover{background:var(--gradient-primary);border-color:var(--accent-red);box-shadow:var(--shadow-glow-red);}.reviews-slider-wrapper .prev-btn{left:-25px;}.reviews-slider-wrapper .next-btn{right:-25px;}@media(max-width:768px){.reviews-slider-wrapper .prev-btn{left:10px;}.reviews-slider-wrapper .next-btn{right:10px;}}#reviewsSliderDots{display:flex;justify-content:center;gap:10px;margin-top:30px;}#reviewsSliderDots .dot{width:12px;height:12px;border-radius:50%;background:var(--dark-border);border:none;cursor:pointer;transition:all 0.3s ease;}#reviewsSliderDots .dot.active{background:var(--accent-red);transform:scale(1.2);}#reviewsSliderDots .dot:hover{background:rgba(214,40,40,0.7);}.google-btn:hover{box-shadow:0 18px 38px rgba(66,133,244,.45);transform:translateY(-3px);}/* ============================================= 8. MAPA / UBICACIÓN============================================= */.map-section{background:var(--dark-bg-2);padding:100px 0;position:relative;}.map-container{border-radius:var(--radius-lg);border:1px solid rgba(255,255,255,.08);box-shadow:var(--shadow-xl);filter:grayscale(.15) contrast(1.05);}.map-info-item{background:var(--dark-surface);border:1px solid var(--dark-border);color:var(--text-light);padding:14px 22px;border-radius:50px;box-shadow:var(--shadow-sm);}.map-info-item p{color:var(--text-light);}.map-info .btn-primary{font-family:var(--font-display);letter-spacing:1px;background:var(--gradient-primary);box-shadow:var(--shadow-glow-red);}/* ============================================= 9. PÁGINA DE SERVICIOS============================================= */.services-page{position:relative;background:var(--dark-bg);overflow:hidden;}.services-page::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(circle at 10% 10%, rgba(47,111,174,.14), transparent 45%), radial-gradient(circle at 90% 85%, rgba(214,40,40,.12), transparent 45%), linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);background-size:auto, auto, 44px 44px, 44px 44px;}.services-page .container{position:relative;z-index:1;}.services-grid,.services-page .services-grid{counter-reset:servicenum;gap:28px;}.service-card,.services-page .service-card{counter-increment:servicenum;background:var(--dark-surface);border-radius:var(--radius-lg);border:1px solid var(--dark-border);box-shadow:var(--shadow-lg);padding-top:42px;position:relative;}.service-card::after{content:counter(servicenum, decimal-leading-zero);position:absolute;top:14px;right:20px;font-family:var(--font-display);font-weight:700;font-size:.85rem;letter-spacing:1px;color:rgba(255,255,255,.10);}.service-card:hover,.services-page .service-card:hover{border-color:transparent;background:var(--dark-surface-2);box-shadow:var(--shadow-glow-red), var(--shadow-xl);transform:translateY(-10px);}.service-icon,.services-page .service-icon{background:var(--gradient-accent);color:var(--white);box-shadow:var(--shadow-glow-blue);position:relative;}.service-icon::after{content:'';position:absolute;inset:-6px;border:1px dashed rgba(47,111,174,.35);border-radius:50%;}.service-card h3,.services-page .service-card h3{font-family:var(--font-display);text-transform:uppercase;font-weight:600;font-size:1.05rem;letter-spacing:.3px;color:var(--text-light);}.service-card p,.services-page .service-card p{color:var(--text-light-soft);}.service-card.destacar-servicio{border:2px solid var(--gold);background:linear-gradient(180deg, #241d0f 0%, var(--dark-surface) 100%);box-shadow:0 0 0 1px rgba(224,176,75,.3), var(--shadow-glow-accent), var(--shadow-lg);}.service-card.destacar-servicio::before{background:var(--gradient-gold);}.services-cta{background:var(--gradient-dark);border-radius:var(--radius-lg);box-shadow:var(--shadow-xl);position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.08);}.services-cta::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 15% 20%, rgba(214,40,40,.28), transparent 45%), radial-gradient(circle at 85% 80%, rgba(47,111,174,.28), transparent 45%);}.cta-text{position:relative;z-index:1;color:var(--white);font-family:var(--font-display);letter-spacing:.3px;}.cta-buttons{position:relative;z-index:1;}/* ============================================= 10. PÁGINA DE PROMOCIONES / SLIDER============================================= */.promo-page{position:relative;background:var(--dark-bg);overflow:hidden;}.promo-page::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(circle at 85% 15%, rgba(214,40,40,.16), transparent 45%), radial-gradient(circle at 15% 85%, rgba(47,111,174,.14), transparent 45%);}.promo-page .container{position:relative;z-index:1;}.promo-card{border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);border:1px solid rgba(255,255,255,.06);}.promo-card:hover{box-shadow:var(--shadow-glow-red), var(--shadow-xl);}.slider-btn{background:var(--dark-surface);border:1px solid var(--dark-border);color:var(--white);box-shadow:var(--shadow-sm);}.slider-btn:hover{background:var(--gradient-primary);border-color:transparent;box-shadow:var(--shadow-glow-red);}.dot{background:rgba(255,255,255,.18);}.dot.active{background:var(--secondary);box-shadow:0 0 0 4px rgba(214,40,40,.22);}.dot:hover{background:var(--secondary);}/* ============================================= 11. PÁGINA DE CONTACTO============================================= */.contact-page{position:relative;background:var(--dark-bg);overflow:hidden;}.contact-page::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(circle at 20% 15%, rgba(224,176,75,.10), transparent 45%), radial-gradient(circle at 90% 90%, rgba(214,40,40,.12), transparent 45%);}.contact-page .container{position:relative;z-index:1;}.contact-page .contact-form,.contact-form{background:var(--dark-surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-xl);border:1px solid var(--dark-border);}.contact-page .form-group label,.form-group label{font-family:var(--font-display);letter-spacing:.3px;text-transform:uppercase;font-size:.78rem;color:var(--text-light-soft);}.contact-page .form-group input,.contact-page .form-group textarea,.contact-page .form-group select,.form-group input, .form-group textarea, .form-group select{border-radius:var(--radius);border-color:var(--dark-border);background:var(--dark-surface-2);color:var(--text-light);}.contact-page .form-group input::placeholder,.contact-page .form-group textarea::placeholder,.form-group input::placeholder, .form-group textarea::placeholder{color:rgba(255,255,255,.38);}.contact-page .form-group select option,.form-group select option{color:var(--primary);background:var(--white);}.contact-page .form-group input:focus,.contact-page .form-group textarea:focus,.contact-page .form-group select:focus,.form-group input:focus, .form-group textarea:focus, .form-group select:focus{background:var(--dark-surface);border-color:var(--secondary);box-shadow:0 0 0 4px rgba(214,40,40,.18);}.contact-page .btn-submit, .btn-submit{font-family:var(--font-display);letter-spacing:1px;box-shadow:var(--shadow-glow-accent);}.contact-page .contact-info-card, .contact-info-card{background:var(--gradient-dark);border-radius:var(--radius-lg);box-shadow:var(--shadow-xl);position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.08);}.contact-page .contact-info-card::before, .contact-info-card::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 90% 0%, rgba(214,40,40,.24), transparent 50%);pointer-events:none;}.contact-page .contact-info-card h3, .contact-info-card h3{font-family:var(--font-display);letter-spacing:.3px;position:relative;z-index:1;}.contact-page .info-item, .info-item{position:relative;z-index:1;}.contact-page .info-icon, .info-icon{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);}/* ============================================= 12. FOOTER============================================= */.footer{background:#050506;position:relative;}.footer::before{content:'';position:absolute;top:0;left:0;width:100%;height:3px;background:var(--gradient-primary);}.footer-logo{font-family:var(--font-display);letter-spacing:.5px;}.footer-contact h4{font-family:var(--font-display);letter-spacing:.5px;text-transform:uppercase;font-size:.9rem;}.footer-social{display:flex;gap:12px;margin-top:18px;}.footer-social img{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.08);padding:8px;border:1px solid rgba(255,255,255,.14);transition:var(--transition);}.footer-social img:hover{transform:translateY(-4px);border-color:var(--secondary);}/* ============================================= 13. BOTÓN FLOTANTE DE WHATSAPP============================================= */.whatsapp-float{box-shadow:0 14px 34px rgba(37,211,102,.5);border:2px solid rgba(255,255,255,.25);}.whatsapp-float::before{content:"¿Necesitas ayuda?";position:absolute;right:72px;top:50%;transform:translateY(-50%) translateX(6px);background:var(--dark-surface);color:var(--white);padding:8px 14px;border-radius:8px;font-size:.8rem;font-weight:600;white-space:nowrap;opacity:0;pointer-events:none;box-shadow:var(--shadow-md);transition:var(--transition-smooth);}.whatsapp-float:hover::before{opacity:1;transform:translateY(-50%) translateX(0);}@media(max-width:768px){.whatsapp-float::before{display:none;}}/* ============================================= 14. FRANJA DE CONFIANZA (opcional, ver instrucciones)============================================= */.trust-bar{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:30px;}.trust-bar span{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);color:var(--white);padding:9px 18px;border-radius:50px;font-size:.82rem;font-weight:600;letter-spacing:.3px;backdrop-filter:blur(6px);}.trust-bar span i{color:var(--accent-glow);}/* ============================================= 15. RESPONSIVE============================================= */@media(max-width:992px){.gallery, .reviews, .map-section{padding:80px 0;}}@media(max-width:768px){.hero-content::before, .hero-content::after{width:28px;height:28px;}.section-title::after{width:50px;}.gallery, .reviews, .map-section{padding:60px 0;}}@media(max-width:480px){.hero-content::before, .hero-content::after{display:none;}.gallery, .reviews, .map-section{padding:50px 0;}}