/* =====================================================================
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%);
box-shadow:0 14px 30px rgba(66,133,244,.32);
}
.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; }
}