:root{
    --rojo:#D50005;           /* Rojo Bosch (oficial boschcarservice.com) */
    --azul:#006EAD;           /* Azul Bosch Car Service oficial */
    --azul-oscuro:#003253;    /* Azul marino BCS oficial */
    --tinta:#2E3033;          /* Gris Bosch oscuro (textos) */
    --gris:#71767C;
    --nube:#EFF1F1;           /* Gris Bosch claro (fondos) */
    --blanco:#fff;
    --grad:linear-gradient(90deg,#D50005 0%,#9E2896 50%,#006EAD 100%); /* supergraphic Bosch */
    --sombra:0 8px 30px rgba(46,48,51,.10);
    --radio:14px;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{font-family:'Inter',sans-serif;color:var(--tinta);background:var(--blanco);line-height:1.65;font-size:16px}
  img{max-width:100%;display:block}
  a{text-decoration:none;color:inherit}
  .wrap{max-width:1200px;margin:0 auto;padding:0 24px}
  h1,h2,h3{font-weight:800;letter-spacing:-.02em;line-height:1.15}
  .kicker{display:inline-block;font-size:.8rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--azul);margin-bottom:10px}
  .kicker::before{content:'';display:inline-block;width:26px;height:3px;background:var(--grad);margin-right:10px;vertical-align:middle;border-radius:2px}

  /* ---------- Header ---------- */
  header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);box-shadow:0 1px 0 rgba(46,48,51,.08)}
  header::after{content:'';display:block;height:3px;background:var(--grad)}
  .nav{display:flex;align-items:center;justify-content:space-between;padding:12px 24px;max-width:1280px;margin:0 auto}
  .logo{height:52px}
  nav{display:flex;gap:6px;align-items:center}
  nav a{font-weight:600;font-size:.93rem;color:var(--tinta);padding:10px 16px;border-radius:8px;transition:.18s}
  nav a:hover{background:var(--nube);color:var(--azul-oscuro)}
  .btn{display:inline-block;font-weight:700;font-size:.95rem;padding:13px 26px;border-radius:10px;transition:.18s;text-align:center}
  .btn-rojo{background:var(--rojo);color:#fff}
  .btn-rojo:hover{background:#b30004;transform:translateY(-1px)}
  .btn-borde{border:2px solid rgba(255,255,255,.85);color:#fff}
  .btn-borde:hover{background:rgba(255,255,255,.14)}
  .btn-azul{background:var(--azul-oscuro);color:#fff}
  .btn-azul:hover{background:#00294a}
  nav .btn-rojo{padding:10px 20px;margin-left:8px}

  /* ---------- Hero ---------- */
  .hero{position:relative;min-height:78vh;display:flex;align-items:center;
    background:linear-gradient(100deg,rgba(0,23,44,.88) 0%,rgba(0,50,83,.72) 45%,rgba(0,50,83,.25) 100%),
    url('https://tallerllave12.com/img/hero.jpg') center/cover}
  .hero .wrap{padding-top:70px;padding-bottom:110px}
  .hero h1{color:#fff;font-size:clamp(2.2rem,5vw,3.6rem);max-width:640px}
  .hero h1 span{color:#8fd0ff}
  .hero p{color:#dbe7f0;font-size:1.15rem;max-width:560px;margin:22px 0 34px}
  .hero .cta{display:flex;gap:14px;flex-wrap:wrap}
  .hero .conf{display:flex;gap:26px;margin-top:44px;flex-wrap:wrap}
  .hero .conf div{color:#fff;font-size:.9rem;display:flex;align-items:center;gap:9px;font-weight:600}
  .hero .conf b{color:#ffd200}

  /* Tarjetas info flotantes */
  .info-cards{position:relative;margin-top:-64px;z-index:5}
  .info-cards .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
  .icard{background:#fff;border-radius:var(--radio);box-shadow:var(--sombra);padding:24px 26px;display:flex;gap:16px;align-items:flex-start;border-top:3px solid transparent}
  .icard:hover{border-top-color:var(--azul)}
  .icard .ic{font-size:1.5rem;background:var(--nube);border-radius:10px;width:48px;height:48px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
  .icard h3{font-size:.98rem;margin-bottom:3px}
  .icard p{font-size:.9rem;color:var(--gris)}
  .icard a{color:var(--azul);font-weight:600}

  section{padding:90px 0}
  .titulo{font-size:clamp(1.7rem,3.2vw,2.4rem);margin-bottom:14px}
  .sub{color:var(--gris);max-width:640px;font-size:1.05rem}

  /* ---------- Servicios ---------- */
  .servicios{background:var(--nube)}
  .grid-serv{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:22px;margin-top:44px}
  .scard{background:#fff;border-radius:var(--radio);padding:30px 28px;box-shadow:0 2px 10px rgba(46,48,51,.06);transition:.22s;position:relative;overflow:hidden}
  .scard::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad);opacity:0;transition:.22s}
  .scard:hover{transform:translateY(-6px);box-shadow:var(--sombra)}
  .scard:hover::before{opacity:1}
  .scard img{width:64px;height:64px;object-fit:contain;margin-bottom:18px}
  .scard h3{font-size:1.08rem;margin-bottom:9px}
  .scard p{font-size:.93rem;color:var(--gris);margin-bottom:16px}
  .scard a{color:var(--rojo);font-weight:700;font-size:.9rem}
  .scard a::after{content:' →';transition:.18s}
  .scard a:hover::after{margin-left:4px}

  /* ---------- Conócenos ---------- */
  .conocenos .cols{display:grid;grid-template-columns:1.05fr 1fr;gap:60px;align-items:center}
  @media(max-width:880px){.conocenos .cols{grid-template-columns:1fr}}
  .conocenos img{border-radius:var(--radio);box-shadow:var(--sombra)}
  .conocenos p{color:#4a4e53;margin-bottom:16px}
  .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:28px 0}
  .stat{background:var(--nube);border-radius:12px;padding:18px 14px;text-align:center}
  .stat b{display:block;font-size:1.6rem;font-weight:800;color:var(--azul-oscuro)}
  .stat span{font-size:.8rem;color:var(--gris);font-weight:600}

  /* ---------- Reseñas ---------- */
  .resenas{background:linear-gradient(180deg,#fff 0%,var(--nube) 100%)}
  .rating-head{display:flex;align-items:center;gap:22px;margin-top:26px;flex-wrap:wrap}
  .rating-head .nota{font-size:3rem;font-weight:800;color:var(--azul-oscuro)}
  .estrellas{color:#FFB300;font-size:1.25rem;letter-spacing:2px}
  .rating-head p{color:var(--gris);font-size:.92rem}
  .grid-res{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:20px;margin-top:38px}
  .rcard{background:#fff;border-radius:var(--radio);padding:26px;box-shadow:0 2px 10px rgba(46,48,51,.07);display:flex;flex-direction:column;gap:12px}
  .rcard .estrellas{font-size:1rem}
  .rcard p{font-size:.92rem;color:#4a4e53;flex:1}
  .rcard footer{font-size:.85rem;font-weight:700;color:var(--azul-oscuro)}
  .rcard footer span{display:block;font-weight:500;color:var(--gris);font-size:.78rem}
  .res-link{display:inline-block;margin-top:30px;color:var(--azul);font-weight:700}

  /* ---------- Galería ---------- */
  .galeria .grid-gal{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:40px}
  .gitem{border-radius:var(--radio);overflow:hidden;aspect-ratio:4/3;background:var(--nube)}
  .gitem img{width:100%;height:100%;object-fit:cover;transition:.35s}
  .gitem:hover img{transform:scale(1.06)}
  .gitem.ph{display:flex;align-items:center;justify-content:center;color:var(--gris);font-size:.88rem;font-weight:600;border:2px dashed #d5dade}

  /* Premio atención al cliente */
  .premio-band{margin-top:26px}
  .premio-card{background:#fff;border-radius:var(--radio);box-shadow:var(--sombra);padding:26px 32px;display:flex;align-items:center;gap:32px}
  .premio-card img{width:100%;max-width:260px;flex-shrink:0}
  .premio-card h2{font-size:1.35rem;margin-bottom:6px}
  .premio-card p{color:var(--gris)}
  @media(max-width:640px){.premio-card{flex-direction:column;text-align:center}}

  /* Póster campaña aire acondicionado */
  .bloque-servicio img.poster-aire{width:100%;border-radius:var(--radio);margin:16px 0 10px;display:block}

  /* ---------- CTA band ---------- */
  .cta-band{background:var(--azul-oscuro);position:relative;overflow:hidden}
  .cta-band::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:var(--grad)}
  .cta-band .wrap{display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap;padding-top:64px;padding-bottom:64px}
  .cta-band h2{color:#fff;font-size:clamp(1.5rem,2.8vw,2.1rem);max-width:520px}
  .cta-band p{color:#a9c3d8;margin-top:8px}
  .cta-band .botones{display:flex;gap:14px;flex-wrap:wrap}

  /* ---------- Footer ---------- */
  footer.pie{background:#1c1e20;color:#9aa0a6;padding:64px 0 0;font-size:.92rem}
  .pie .cols{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:44px}
  @media(max-width:760px){.pie .cols{grid-template-columns:1fr}}
  .pie h4{color:#fff;font-size:1rem;margin-bottom:14px}
  .pie li{list-style:none;margin-bottom:9px}
  .pie a:hover{color:#fff}
  .pie .logo-f{height:46px;margin-bottom:14px;filter:brightness(1.1)}
  .copy{border-top:1px solid #33363a;margin-top:44px;padding:20px 0;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:.83rem}
  .firma-osuagem{font-size:13px;color:#87868a;padding:0 0 22px;text-align:right}
  .firma-osuagem a{color:#9aa5ad;font-weight:600}
  @media(max-width:640px){.firma-osuagem{text-align:center}}

  /* WhatsApp */
  .wa-burbuja{position:fixed;bottom:22px;right:22px;width:58px;height:58px;background:#25D366;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(0,0,0,.3);z-index:90;transition:transform .15s}
  .wa-burbuja:hover{transform:scale(1.1)}
  .wa-burbuja svg{width:32px;height:32px;fill:#fff}

  
  @media(max-width:800px){nav a:not(.btn-rojo){display:none}}

  /* ---------- Páginas interiores ---------- */
  .banda-titulo{background:var(--nube);border-bottom:1px solid #e2e5e6;padding:44px 0}
  .banda-titulo h1{font-size:clamp(1.8rem,3.4vw,2.5rem)}
  .banda-titulo p{color:var(--gris);margin-top:6px}
  .contenido{padding:60px 0}
  .bloque-servicio{display:grid;grid-template-columns:120px 1fr;gap:30px;padding:36px 0;border-bottom:1px solid #e6e9ea;align-items:start}
  .bloque-servicio:last-child{border-bottom:none}
  .bloque-servicio img{width:100px}
  .bloque-servicio h2{font-size:1.4rem;margin-bottom:10px}
  .bloque-servicio p{margin-bottom:10px;color:#4a4e53}
  .bloque-servicio ul{margin:8px 0 12px 20px;color:#4a4e53}
  @media(max-width:640px){.bloque-servicio{grid-template-columns:1fr}}
  .lista-check{list-style:none;margin:16px 0}
  .lista-check li{padding:10px 0 10px 32px;position:relative;border-bottom:1px dotted #dfe3e4;color:#4a4e53}
  .lista-check li::before{content:'✓';position:absolute;left:4px;color:var(--azul);font-weight:800}
  .cols-2{display:grid;grid-template-columns:340px 1fr;gap:48px}
  @media(max-width:860px){.cols-2{grid-template-columns:1fr}}
  .dato{margin-bottom:20px}
  .dato h4{font-size:1rem;margin-bottom:3px;color:var(--azul-oscuro)}
  .dato p,.dato a{color:#4a4e53}
  .dato a:hover{color:var(--azul)}
  .mapa-iframe{width:100%;height:360px;border:0;border-radius:var(--radio);margin-top:40px}
  .pol h2{font-size:1.25rem;margin:28px 0 8px}
  .pol p{margin-bottom:12px;color:#4a4e53}

  /* ---------- Formulario presupuesto ---------- */
  .presupuesto{background:var(--azul-oscuro);position:relative}
  .presupuesto::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:var(--grad)}
  .presupuesto .kicker{color:#8fd0ff}
  .presupuesto .titulo,.presupuesto h2{color:#fff}
  .presupuesto .sub{color:#a9c3d8}
  .form-card{background:#fff;border-radius:var(--radio);box-shadow:0 12px 40px rgba(0,0,0,.25);padding:36px;margin-top:38px;min-height:320px}
  .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
  .campo-full{grid-column:1/-1}
  @media(max-width:640px){.form-grid{grid-template-columns:1fr}}
  .form-card label{display:block;font-weight:700;font-size:.85rem;color:var(--azul-oscuro);margin-bottom:6px;text-transform:uppercase;letter-spacing:.04em}
  .form-card input,.form-card textarea{width:100%;padding:13px 15px;border:1.5px solid #d5dade;border-radius:10px;font-family:inherit;font-size:.98rem;color:var(--tinta);transition:.15s}
  .form-card input:focus,.form-card textarea:focus{outline:none;border-color:var(--azul)}
  .form-card textarea{min-height:110px;resize:vertical}
  .fila-matricula{display:flex;gap:10px}
  .fila-matricula input{flex:1}
  .btn-buscar{white-space:nowrap;background:var(--azul);color:#fff;border:none;border-radius:10px;padding:0 22px;font-weight:700;font-family:inherit;font-size:.92rem;cursor:pointer}
  .btn-buscar:hover{background:#005d92}
  .tarjeta-vehiculo{display:none;margin-top:12px;background:#eef7ee;border-left:4px solid #2e7d32;border-radius:8px;padding:12px 16px;color:#1b5e20;font-weight:600}
  .chips{display:flex;flex-wrap:wrap;gap:10px}
  .chip{border:1.5px solid #d5dade;border-radius:24px;padding:10px 18px;font-size:.92rem;font-weight:600;color:var(--tinta);cursor:pointer;user-select:none;transition:.15s;background:#fff}
  .chip:hover{border-color:var(--azul)}
  .chip.sel{background:var(--azul);border-color:var(--azul);color:#fff}
  .grupo-triaje{display:none;background:var(--nube);border-radius:10px;padding:16px 18px;margin-top:4px}
  .grupo-triaje p{font-weight:700;font-size:.88rem;color:var(--azul-oscuro);margin-bottom:8px}
  .grupo-triaje .chips{margin-bottom:12px}
  .grupo-triaje .chips:last-child{margin-bottom:0}
  .priv{display:flex;gap:10px;align-items:flex-start;font-size:.88rem;color:var(--gris)}
  .priv input{width:auto;margin-top:3px}
  .priv a{color:var(--azul);font-weight:600}
  .msg-ok{display:none;text-align:center;padding:40px 20px}
  .msg-ok .icono{font-size:3.4rem;line-height:1}
  .msg-ok h3{font-size:1.5rem;margin:14px 0 8px}
  .msg-ok p{color:var(--gris);max-width:520px;margin:0 auto}
  .msg-ok a{color:var(--azul);font-weight:700}
  .aviso-error{background:#fdf0ee;border:1.5px solid #e5b1a8;border-radius:10px;padding:13px 16px;color:#b03225;font-size:.95rem;font-weight:600}
  /* Validación en rojo */
  .campo-error input,.campo-error textarea{border-color:var(--rojo)!important;background:#fff5f5}
  .campo-error .chips{outline:2px solid var(--rojo);outline-offset:6px;border-radius:24px}
  .txt-error{display:none;color:var(--rojo);font-size:.8rem;font-weight:600;margin-top:5px}
  .campo-error .txt-error{display:block}

  /* Firma OSUAGEM */
  .firma-osuagem{font-size:13px;color:#87868a;padding:8px 0 20px;text-align:right;font-family:'Inter',sans-serif}
  .firma-osuagem a{color:#9aa5ad;font-weight:600;text-decoration:none}
  .firma-osuagem a:hover{color:#c5ced4}
  .firma-osuagem a:focus-visible{outline:2px solid #c5ced4;outline-offset:3px;border-radius:2px}
  @media(max-width:640px){.firma-osuagem{text-align:center}}
  /* Burbuja WhatsApp */
  .wa-burbuja{position:fixed;bottom:22px;right:22px;width:58px;height:58px;background:#25D366;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(0,0,0,.3);z-index:90;transition:transform .15s}
  .wa-burbuja:hover{transform:scale(1.1)}
  .wa-burbuja svg{width:32px;height:32px;fill:#fff}