/* ===== VARIABLES DE COLOR BASADAS EN EL LOGOTIPO ===== */
:root {
  --tjred: #C21010;        /* Rojo del logo */
  --tjred-dark: #9e0d0d;   /* Rojo más oscuro para hover */
  --tjblack: #111111;      /* Negro puro/oscuro */
  --tjblack-light: #222222;/* Negro para el footer */
  --wa: #25d366;           /* Verde de WhatsApp */
  --gris: #5a6470;
  --gris-claro: #f4f6f9;
  --texto: #1d2733;
  --blanco: #fff;
  --sombra: 0 8px 30px rgba(0,0,0,.08);
  --radio: 16px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Open Sans', system-ui, Arial, sans-serif;
  color: var(--texto);
  line-height: 1.65;
  background: var(--blanco);
  overflow-x: hidden;
}
h1, h2, h3, .logo-text { font-family: 'Montserrat', Arial, sans-serif; line-height: 1.2; }
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* Botones */
.btn {
  display: inline-flex; align-items: center; gap: 10px; font-weight: 700; border: none; cursor: pointer;
  padding: 15px 28px; border-radius: 50px; font-size: 1rem; transition: .3s; font-family: 'Montserrat', Arial;
}
.btn i { font-size: 1.1rem; }
.btn-rojo { background: var(--tjred); color: var(--blanco); box-shadow: 0 4px 15px rgba(194,16,16,.3); }
.btn-rojo:hover { background: var(--tjred-dark); transform: translateY(-3px); box-shadow: 0 6px 20px rgba(194,16,16,.4); }
.btn-wa { background: var(--wa); color: #fff; box-shadow: 0 4px 15px rgba(37,211,102,.3); }
.btn-wa:hover { filter: brightness(.95); transform: translateY(-3px); box-shadow: 0 6px 20px rgba(37,211,102,.4); }
.btn-linea { background: rgba(255,255,255,0.1); backdrop-filter: blur(5px); color: #fff; border: 2px solid rgba(255,255,255,0.5); }
.btn-linea:hover { background: #fff; color: var(--tjblack); border-color: #fff; }

/* ===== Header ===== */
header { position: sticky; top: 0; z-index: 100; background: #fff; color: var(--tjblack); box-shadow: 0 2px 20px rgba(0,0,0,.08); }
.nav { display: flex; align-items: center; justify-content: space-between; height: 80px; }
.logo-container { display: flex; align-items: center; gap: 12px; }
.logo-img { height: 50px; width: auto; object-fit: contain; }
.logo-text { font-weight: 900; font-size: 1.5rem; color: var(--tjblack); }
.menu { display: flex; gap: 30px; list-style: none; align-items: center; }
.menu a { font-weight: 700; font-size: .95rem; color: var(--gris); transition: .3s; }
.menu a:hover { color: var(--tjred); }
.nav-cta { display: flex; gap: 12px; align-items: center; }
.nav-cta .btn { padding: 10px 20px; font-size: .9rem; }
.hamb { display: none; background: none; border: none; color: var(--tjblack); font-size: 1.8rem; cursor: pointer; }

/* ===== Hero ===== */
.hero {
  position: relative; color: #fff; text-align: center; padding: 120px 0 100px;
  overflow: hidden;
}
.hero-content {
  position: relative;
  z-index: 2;
}
.hero-bg {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0;
}
.bg-overlay {
  position: absolute; inset: 0; background: linear-gradient(rgba(17,17,17,.85), rgba(17,17,17,.95)); z-index: 1;
}
.bg-slide {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background-position: center; background-size: cover; 
  opacity: 0;
  animation: slideshow 25s infinite;
}
.slide-1 { background-image: url('../assets/img/Imagen%20frontal%20del%20negocio.jpg'); animation-delay: 0s; }
.slide-2 { background-image: url('../assets/img/Imagen%20Patio-Muro%201.jpg'); animation-delay: 5s; }
.slide-3 { background-image: url('../assets/img/Imagen%20Patio%201.jpg'); animation-delay: 10s; }
.slide-4 { background-image: url('../assets/img/Venta%20de%20Llantas/Foto%20servicios%20de%20llantera%20-%20llantas%20nuevas%202.jpg'); animation-delay: 15s; }
.slide-5 { background-image: url('../assets/img/Venta%20de%20Llantas/Foto%20servicios%20de%20llantera%20-%20llantas%20nuevas.jpg'); animation-delay: 20s; }

@keyframes slideshow {
  0% { opacity: 0; transform: scale(1.05) translateY(0); }
  5% { opacity: 1; }
  20% { opacity: 1; }
  25% { opacity: 0; transform: scale(1) translateY(-15px); }
  100% { opacity: 0; transform: scale(1.05) translateY(0); }
}
.hero h1 { font-size: 3.5rem; margin-bottom: 20px; font-weight: 900; max-width: 1000px; margin-inline: auto; letter-spacing: -1px; }
.hero h1 b { color: var(--tjred); }
.hero p { font-size: 1.25rem; max-width: 800px; margin: 0 auto 40px; opacity: .9; line-height: 1.6; }
.hero-cta { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.hero-info { margin-top: 40px; font-size: 1rem; color: rgba(255,255,255,0.8); display: flex; gap: 15px; justify-content: center; flex-wrap: wrap; align-items: center; }
.estado { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.15); padding: 6px 18px; border-radius: 50px; font-weight: 700; color: #fff; }
.dot { width: 12px; height: 12px; border-radius: 50%; background: var(--wa); box-shadow: 0 0 0 0 rgba(37,211,102,.7); animation: pulse 2s infinite; }
.dot.cerrado { background: #ff5b5b; animation: none; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(37,211,102,.6); } 70% { box-shadow: 0 0 0 10px rgba(37,211,102,0); } 100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); } }

/* ===== Stats ===== */
.stats { background: var(--tjred); color: var(--blanco); }
.stats .container { display: flex; justify-content: space-around; flex-wrap: wrap; padding: 30px 20px; gap: 20px; text-align: center; }
.stat b { font-family: 'Montserrat'; font-size: 2rem; display: block; font-weight: 800; }
.stat span { font-size: .95rem; font-weight: 600; opacity: 0.9; }

/* ===== Secciones Generales ===== */
section { padding: 90px 0; }
.sec-head { text-align: center; max-width: 800px; margin: 0 auto 60px; }
.sec-head h2 { font-size: 2.4rem; color: var(--tjblack); margin-bottom: 16px; font-weight: 800; }
.sec-head p { color: var(--gris); font-size: 1.1rem; }
.tag { display: inline-block; background: rgba(194,16,16,0.1); color: var(--tjred); font-weight: 800; font-size: .85rem; letter-spacing: 1px; text-transform: uppercase; padding: 8px 18px; border-radius: 50px; margin-bottom: 16px; }

/* Por qué elegirnos */
.porque { background: var(--gris-claro); }
.razones { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
.razon { background: #fff; border-radius: var(--radio); padding: 40px 25px; text-align: center; box-shadow: var(--sombra); transition: .3s; }
.razon:hover { transform: translateY(-10px); box-shadow: 0 15px 40px rgba(0,0,0,.12); }
.razon .ico { font-size: 3rem; margin-bottom: 20px; color: var(--tjred); }
.razon h3 { font-size: 1.2rem; color: var(--tjblack); margin-bottom: 10px; font-weight: 800; }
.razon p { font-size: .95rem; color: var(--gris); }

/* Servicios */
.grid-serv { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.serv { background: #fff; border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra); transition: .4s; display: flex; flex-direction: column; border-top: 4px solid transparent; }
.serv:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(194,16,16,.15); border-top: 4px solid var(--tjred); }
.serv .img-wrap { height: 220px; overflow: hidden; }
.serv img { height: 100%; width: 100%; object-fit: cover; transition: .5s; }
.serv:hover img { transform: scale(1.1); }
.serv-body { padding: 30px; flex: 1; display: flex; flex-direction: column; }
.serv-body h3 { color: var(--tjblack); font-size: 1.3rem; margin-bottom: 12px; font-weight: 800; display: flex; align-items: center; gap: 10px; }
.serv-body h3 i { color: var(--tjred); }
.serv-body > p { color: var(--gris); font-size: .95rem; margin-bottom: 20px; flex-grow: 1; }
.serv-body ul { list-style: none; }
.serv-body li { font-size: .9rem; padding-left: 26px; position: relative; margin-bottom: 8px; color: var(--texto); font-weight: 600; }
.serv-body li::before { content: "\f058"; font-family: "Font Awesome 6 Free"; position: absolute; left: 0; color: var(--tjred); font-weight: 900; }

/* Llantas destacado */
.llantas { position: relative; overflow: hidden; color: #fff; text-align: center; }
.llantas .container { position: relative; z-index: 2; }
.llantas-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; }
.llantas-slide-1 { background-image: url('../assets/img/Servicios%20de%20llantera/Maquina%20de%20Nitrogeno.jpg'); animation-delay: 0s; }
.llantas-slide-2 { background-image: url('../assets/img/Servicios%20de%20Direccion%20y%20Alineacion/Alineacion%20por%20computadora%201.jpg'); animation-delay: 5s; }
.llantas-slide-3 { background-image: url('../assets/img/Servicios%20de%20Direccion%20y%20Alineacion/Alineacion%20por%20computadora.jpg'); animation-delay: 10s; }
.llantas-slide-4 { background-image: url('../assets/img/Servicios%20de%20Direccion%20y%20Alineacion/Alineacion%20tradicional.jpg'); animation-delay: 15s; }
.llantas-slide-5 { background-image: url('../assets/img/Venta%20de%20Llantas/Foto%20servicios%20de%20llantera%20-%20vista%20rack%202.jpg'); animation-delay: 20s; }
.llantas h2 { color: #fff; font-size: 2.5rem; margin-bottom: 20px; }
.llantas p { max-width: 750px; margin: 0 auto 30px; opacity: .9; font-size: 1.1rem; }

/* Testimonios */
.testi { background: var(--gris-claro); border-top: 1px solid #e1e5eb; border-bottom: 1px solid #e1e5eb; }
.grid-testi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.card-testi { background: #fff; border-radius: var(--radio); padding: 35px; box-shadow: var(--sombra); position: relative; }
.card-testi::before { content: "\f10d"; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; top: 20px; right: 30px; font-size: 2rem; color: rgba(194,16,16,0.1); }
.estrellas { color: #FFD700; font-size: 1.2rem; margin-bottom: 15px; display: flex; gap: 2px; }
.card-testi p { font-size: 1rem; color: var(--texto); margin-bottom: 25px; font-style: italic; line-height: 1.7; }
.autor { display: flex; align-items: center; gap: 15px; }
.avatar { width: 50px; height: 50px; border-radius: 50%; background: var(--tjblack); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-family: 'Montserrat'; font-size: 1.2rem; }
.autor b { display: block; font-size: 1rem; color: var(--tjblack); }
.autor span { font-size: .85rem; color: var(--gris); }

/* FAQ Acordeón */
.faq-item { background: #fff; border: 1px solid #e4e9f0; border-radius: 12px; margin-bottom: 16px; overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,.03); }
.faq-q { width: 100%; text-align: left; background: none; border: none; padding: 24px 30px; font-size: 1.1rem; font-weight: 800; color: var(--tjblack); cursor: pointer; display: flex; justify-content: space-between; gap: 15px; align-items: center; font-family: 'Montserrat'; }
.faq-q::after { content: "\f067"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 1.2rem; color: var(--tjred); transition: .3s; }
.faq-item.open .faq-q::after { transform: rotate(135deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .4s ease; padding: 0 30px; }
.faq-a p { padding-bottom: 24px; color: var(--gris); font-size: 1rem; line-height: 1.7; }
.faq { max-width: 850px; margin: 0 auto; }

/* Contacto & Formulario */
.contacto { background: var(--tjblack); color: #fff; position: relative; }
.contacto::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url('https://www.transparenttextures.com/patterns/stardust.png'); opacity: 0.2; pointer-events: none; }
.contacto .container { position: relative; z-index: 10; }
.contacto h2 { color: #fff; }
.contacto p { color: rgba(255,255,255,0.7); }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: start; }
.mapa iframe { width: 100%; height: 380px; border: 4px solid var(--tjblack-light); border-radius: var(--radio); box-shadow: 0 10px 30px rgba(0,0,0,.5); }
.datos { margin-top: 30px; list-style: none; }
.datos li { display: flex; gap: 15px; margin-bottom: 20px; align-items: flex-start; font-size: 1.05rem; }
.datos .i { font-size: 1.4rem; color: var(--tjred); background: rgba(194,16,16,0.15); width: 45px; height: 45px; display: flex; align-items: center; justify-content: center; border-radius: 50%; }
.form { background: #fff; color: var(--texto); border-radius: var(--radio); padding: 40px; box-shadow: 0 20px 50px rgba(0,0,0,.3); }
.form h3 { color: var(--tjblack); margin-bottom: 10px; font-size: 1.6rem; font-weight: 900; }
.form p.sub { color: var(--gris); font-size: 1rem; margin-bottom: 25px; }
.form label { display: block; font-weight: 700; font-size: .9rem; margin-bottom: 8px; color: var(--tjblack); }
.form input, .form textarea { width: 100%; padding: 14px 18px; border: 2px solid #e1e5eb; border-radius: 10px; font-family: inherit; font-size: 1rem; margin-bottom: 20px; transition: .3s; background: #f9fafb; }
.form input:focus, .form textarea:focus { outline: none; border-color: var(--tjred); background: #fff; }
.form .btn-wa { width: 100%; justify-content: center; font-size: 1.1rem; padding: 16px; }

/* Footer */
footer { background: #0a0a0a; color: #8a93a0; padding: 70px 0 100px; font-size: .95rem; }
.foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; margin-bottom: 40px; }
footer h4 { color: #fff; font-family: 'Montserrat'; margin-bottom: 20px; font-size: 1.2rem; font-weight: 800; }
footer a:hover { color: var(--tjred); }
footer ul { list-style: none; }
footer li { margin-bottom: 12px; display: flex; align-items: center; gap: 10px; }
footer li i { color: var(--tjred); width: 20px; text-align: center; }
.foot-bottom { border-top: 1px solid rgba(255,255,255,.08); padding-top: 25px; display: flex; justify-content: space-between; align-items: center; font-size: .9rem; }

/* WhatsApp flotante */
.wa-flot { position: fixed; right: 25px; bottom: 25px; z-index: 200; background: var(--wa); color: #fff; width: 65px; height: 65px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2.2rem; box-shadow: 0 10px 25px rgba(37,211,102,.4); transition: .3s; animation: bob 2.6s ease-in-out infinite; }
.wa-flot:hover { transform: scale(1.1); }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* Barra inferior móvil */
.barra-movil { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 190; background: #fff; box-shadow: 0 -4px 20px rgba(0,0,0,.15); grid-template-columns: 1fr 1fr; }
.barra-movil a { padding: 16px; text-align: center; font-weight: 800; font-family: 'Montserrat'; display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 1.1rem; }
.barra-movil .call { background: var(--tjblack); color: #fff; }
.barra-movil .wa { background: var(--wa); color: #fff; }

/* Responsive */
@media(max-width: 1024px) {
  .razones { grid-template-columns: repeat(2, 1fr); }
  .grid-serv, .grid-testi { grid-template-columns: repeat(2, 1fr); }
  .cols { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}
@media(max-width: 768px) {
  .menu, .nav-cta { display: none; }
  .menu.abierto { display: flex; position: absolute; top: 80px; left: 0; right: 0; background: #fff; flex-direction: column; padding: 25px 20px; gap: 20px; box-shadow: 0 10px 20px rgba(0,0,0,.1); }
  .hamb { display: block; }
  .hero { padding: 100px 0 80px; }
  .hero h1 { font-size: 2.5rem; }
  .hero p { font-size: 1.1rem; }
  .grid-serv, .grid-testi, .razones, .foot-grid { grid-template-columns: 1fr; }
  .wa-flot { bottom: 85px; right: 15px; width: 55px; height: 55px; font-size: 1.8rem; }
  .barra-movil { display: grid; }
  .foot-bottom { flex-direction: column; gap: 15px; text-align: center; }
}