/* ============================================================
   Diesel Buscaglia — estilos del sitio demostrativo
   BUILD: hero-v21   <-- si NO ves este texto en el CSS que carga tu navegador, estás con la versión vieja (caché)
   ============================================================ */

:root{
  /* Paleta de marca Diesel Buscaglia: azul marino (cartelería) + rojo (letras/logo) + blanco */
  --steel-950:#0a0f1a;   /* base azul-noche */
  --steel-900:#0f1728;
  --steel-850:#131d31;
  --steel-800:#172236;
  --steel-line:#26344d;  /* líneas / bordes acero-azul */
  --brand:#e11d2b;       /* rojo de marca (letras del cartel / logo) */
  --brand-deep:#b3121e;
  --brand-glow:rgba(225,29,43,.38);
  --chrome:#cfd8e3;      /* blanco/acero frío */
  --text:#eef2f7;
  --muted:#8b97a6;
  --wa:#25d366;

  --maxw:1180px;
  --pad:clamp(20px,5vw,64px);
  --r:14px;
  --ease:cubic-bezier(.22,.61,.36,1);

  --f-display:"Barlow Condensed",Impact,"Arial Narrow",sans-serif;
  --f-body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden}
body{
  margin:0;
  background:var(--steel-950);
  color:var(--text);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--f-display);font-weight:700;line-height:1;margin:0;text-transform:uppercase;letter-spacing:.5px}

.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
.section{padding-block:clamp(72px,11vw,140px)}
[id]{scroll-margin-top:88px}

/* Eyebrow tipo etiqueta de tablero */
.eyebrow{
  font-family:var(--f-display);
  font-weight:600;
  letter-spacing:3px;
  text-transform:uppercase;
  font-size:14px;
  color:var(--brand);
  display:inline-flex;align-items:center;gap:10px;
  margin:0 0 18px;
}
.eyebrow::before{content:"//";color:var(--steel-line);font-weight:700}

.section-title{
  font-size:clamp(34px,5.5vw,64px);
  letter-spacing:1px;
}
.section-title .hl{color:var(--brand)}
.lead{color:var(--muted);font-size:clamp(16px,1.6vw,19px);max-width:56ch;margin-top:16px}

/* ---------- Botones ---------- */
.btn{
  --bg:var(--brand);--fg:#fff;
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--f-display);font-weight:600;letter-spacing:1.5px;
  text-transform:uppercase;font-size:15px;
  padding:14px 26px;border-radius:999px;border:1px solid transparent;
  background:var(--bg);color:var(--fg);cursor:pointer;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 30px -8px var(--brand-glow)}
.btn:focus-visible{outline:2px solid var(--chrome);outline-offset:3px}
.btn--ghost{--bg:transparent;--fg:var(--text);border-color:var(--steel-line)}
.btn--ghost:hover{border-color:var(--brand);box-shadow:none;color:var(--brand)}
.btn--wa{--bg:var(--wa);--fg:#04310f}
.btn svg{width:18px;height:18px}

/* ============================================================
   NAVBAR
   ============================================================ */
.nav{
  position:fixed;inset:0 0 auto;z-index:60;
  display:flex;align-items:center;justify-content:space-between;
  padding:16px var(--pad);
  transition:background .35s var(--ease),box-shadow .35s,padding .35s,backdrop-filter .35s;
  background:linear-gradient(180deg,rgba(255,255,255,.78),rgba(237,241,246,.56));
  backdrop-filter:blur(16px) saturate(1.25);-webkit-backdrop-filter:blur(16px) saturate(1.25);
  border-bottom:1px solid rgba(20,30,45,.08);
  box-shadow:0 10px 30px -14px rgba(8,12,20,.45), inset 0 1px 0 rgba(255,255,255,.55);
}
.nav.scrolled{
  background:linear-gradient(180deg,rgba(255,255,255,.66),rgba(233,238,245,.46));
  backdrop-filter:blur(22px) saturate(1.35);-webkit-backdrop-filter:blur(22px) saturate(1.35);
  padding-block:11px;
  box-shadow:0 16px 36px -16px rgba(8,12,20,.55), inset 0 1px 0 rgba(255,255,255,.5);
}
/* Navbar claro: textos oscuros y marca en rojo */
.nav .brand b{color:var(--brand)}
.nav .brand span{color:#66707e}
.nav .nav-links a{color:#48505f}
.nav .nav-links a:hover{color:var(--brand)}
.nav .burger{color:#1a2230}
.brand{display:flex;align-items:center;gap:12px;font-family:var(--f-display);font-weight:700;letter-spacing:1px}
.brand .mark{
  width:38px;height:38px;border-radius:9px;
  display:grid;place-items:center;
  background:linear-gradient(145deg,var(--brand),var(--brand-deep));
  color:#fff;box-shadow:0 6px 18px -6px var(--brand-glow);
}
.brand .mark svg{width:22px;height:22px}
.brand-logo{height:50px;width:auto;object-fit:contain;flex:none}
.foot .brand-logo{height:44px}
.brand b{font-size:20px;text-transform:uppercase;line-height:1}
.brand span{color:var(--muted);font-family:var(--f-body);font-size:11px;letter-spacing:3px;text-transform:uppercase;display:block}

.nav-links{display:flex;align-items:center;gap:30px;list-style:none;margin:0;padding:0}
.nav-links a{
  font-family:var(--f-display);font-weight:600;letter-spacing:1.5px;
  text-transform:uppercase;font-size:15px;color:var(--muted);
  position:relative;padding:4px 0;transition:color .2s;
}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-2px;height:2px;width:0;background:var(--brand);transition:width .25s var(--ease)}
.nav-links a:hover{color:var(--text)}
.nav-links a:hover::after{width:100%}

.nav-cta{display:flex;align-items:center;gap:14px}
.burger{display:none;background:none;border:0;color:var(--text);cursor:pointer;padding:6px}
.burger svg{width:28px;height:28px}

/* ============================================================
   HERO — signature: tacómetro
   ============================================================ */
.hero{
  position:relative;min-height:100svh;display:flex;align-items:flex-start;
  padding-block:116px 40px;
  background:
    linear-gradient(180deg,rgba(10,15,26,.74) 0%,rgba(10,15,26,.9) 62%,var(--steel-950) 100%),
    radial-gradient(120% 90% at 85% 15%,rgba(225,29,43,.14),transparent 55%),
    url('../img/hero.jpg');
  background-size:cover;background-position:center;
}
.hero::before{ /* grilla técnica tenue */
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(var(--steel-line) 1px,transparent 1px),
                   linear-gradient(90deg,var(--steel-line) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(120% 80% at 50% 30%,#000,transparent 75%);
}
.hero .wrap{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr minmax(360px,.95fr);
  grid-template-areas:"kicker kicker" "title tach" "desc stats";
  column-gap:48px;row-gap:18px;align-items:start;width:100%}
.hero-kicker{grid-area:kicker}
.hero-title{grid-area:title;align-self:start}
.hero-desc{grid-area:desc;align-self:start}
.tach{grid-area:tach;align-self:start}
.hero-stats{grid-area:stats;align-self:start}
.hero-title{font-size:clamp(44px,6.4vw,88px);letter-spacing:1px}
.hero-title .hl{
  color:var(--brand);position:relative;
}
.hero-title .hl::after{content:"";position:absolute;left:0;right:0;bottom:.06em;height:5px;background:var(--brand);opacity:.35}
.hero-desc{color:var(--chrome);font-size:clamp(17px,2vw,21px);max-width:48ch;margin:0}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px}
.hero-kicker{width:100%;display:flex;align-items:center;justify-content:center;gap:18px;color:var(--text);letter-spacing:3px;text-align:center;text-shadow:0 2px 12px rgba(0,0,0,.6);margin:0 0 10px}
.hero-kicker::before,.hero-kicker::after{content:"";display:block;flex:none;width:72px;height:1px;background:linear-gradient(90deg,transparent,rgba(207,216,227,.55))}
.hero-kicker::after{background:linear-gradient(90deg,rgba(207,216,227,.55),transparent)}

.hero-stats{position:relative;width:100%;margin-top:0;border:1px solid var(--steel-line);border-radius:var(--r);overflow:hidden;min-height:200px;display:flex;align-items:flex-end}
.hero-stats-bg{position:absolute;inset:0;display:flex}
.hero-stats-bg img{width:50%;height:100%;object-fit:cover;opacity:.4;filter:grayscale(1) contrast(1.05)}
.hero-stats::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(10,15,26,.28) 0%,rgba(10,15,26,.55) 55%,rgba(10,15,26,.85) 100%)}
.hero-stats > .hero-badges{position:relative;z-index:2;width:100%;margin:0;padding:20px 20px;gap:10px;flex-wrap:nowrap;justify-content:space-between}
.hero-stats .hero-badges b{font-size:26px}
.hero-stats .hero-badges small{font-size:10px;letter-spacing:.4px}
.hero-badges{display:flex;gap:26px;margin-top:40px;flex-wrap:wrap}
.hero-badges div{display:flex;flex-direction:column}
.hero-badges b{font-family:var(--f-display);font-size:34px;color:var(--text);line-height:1}
.hero-badges small{color:var(--muted);letter-spacing:1px;text-transform:uppercase;font-size:12px}

/* tacómetro */
.tach{width:100%;max-width:272px;margin-inline:auto;filter:drop-shadow(0 20px 40px rgba(0,0,0,.5))}
.tach .needle{transform-origin:200px 200px;transform:rotate(-120deg)}
.tach .tick{stroke:var(--steel-line)}
.tach .tick-red{stroke:var(--brand)}
.tach .digits{fill:var(--chrome);font-family:var(--f-display);font-weight:600}
.tach .rpm-val{fill:var(--text);font-family:var(--f-display);font-weight:700}
.tach .rpm-lab{fill:var(--muted);font-family:var(--f-body);letter-spacing:2px}

.scroll-cue{
  position:absolute;left:50%;bottom:26px;translate:-50% 0;z-index:2;
  color:var(--muted);font-size:12px;letter-spacing:3px;text-transform:uppercase;
  display:flex;flex-direction:column;align-items:center;gap:8px;
}
.scroll-cue span{width:1px;height:34px;background:linear-gradient(var(--brand),transparent);animation:cue 1.8s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}100%{transform:scaleY(0);transform-origin:bottom}}

/* ============================================================
   SERVICIOS
   ============================================================ */
.grid-serv{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:52px}
.card{
  background:linear-gradient(180deg,var(--steel-900),var(--steel-850));
  border:1px solid var(--steel-line);border-radius:var(--r);
  padding:30px 28px;position:relative;overflow:hidden;
  transition:transform .3s var(--ease),border-color .3s;
}
.card::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,var(--brand),transparent);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.card:hover{transform:translateY(-6px);border-color:var(--brand)}
.card:hover::before{transform:scaleX(1)}
.card .ic{
  width:54px;height:54px;border-radius:12px;display:grid;place-items:center;
  background:var(--steel-800);border:1px solid var(--steel-line);color:var(--brand);margin-bottom:20px;
}
.card .ic svg{width:28px;height:28px}
.card h3{font-size:24px;letter-spacing:.5px;margin-bottom:10px}
.card p{color:var(--muted);font-size:15px;margin:0}
.card .num{position:absolute;top:22px;right:24px;font-family:var(--f-display);font-size:15px;color:var(--steel-line);letter-spacing:1px}

/* ============================================================
   NOSOTROS + STATS
   ============================================================ */
.about{display:grid;grid-template-columns:1fr .9fr;gap:56px;align-items:center}
.about ul{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:14px}
.about li{display:flex;gap:14px;align-items:flex-start;color:var(--chrome)}
.about li svg{width:22px;height:22px;color:var(--brand);flex:none;margin-top:2px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.stat{
  background:var(--steel-900);border:1px solid var(--steel-line);border-radius:var(--r);
  padding:26px 24px;position:relative;
}
.stat b{font-family:var(--f-display);font-size:clamp(40px,6vw,58px);color:var(--brand);line-height:1;display:block}
.stat span{color:var(--muted);text-transform:uppercase;letter-spacing:1.5px;font-size:13px}
.stat::after{content:"";position:absolute;right:20px;top:20px;width:28px;height:28px;border-radius:50%;border:2px solid var(--steel-line);border-top-color:var(--brand)}

/* ============================================================
   GALERÍA (carrusel)
   ============================================================ */
.carousel{position:relative;margin-top:52px}
.carousel-view{overflow:hidden;border-radius:var(--r);border:1px solid var(--steel-line)}
.carousel-track{display:flex;transition:transform .55s var(--ease)}
.slide{
  min-width:100%;position:relative;aspect-ratio:16/9;
  background:linear-gradient(135deg,var(--steel-800),var(--steel-950));
  display:grid;place-items:center;
}
.slide img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.slide-tag{
  position:relative;z-index:1;font-family:var(--f-display);letter-spacing:3px;
  text-transform:uppercase;color:var(--steel-line);font-size:clamp(20px,4vw,40px);
  display:flex;flex-direction:column;align-items:center;gap:10px;
}
.slide-tag svg{width:44px;height:44px;color:var(--steel-line)}
.slide-cap{
  position:absolute;left:0;right:0;bottom:0;z-index:2;padding:22px 26px;
  background:linear-gradient(transparent,rgba(14,17,22,.92));
  font-family:var(--f-display);letter-spacing:1px;text-transform:uppercase;font-size:20px;
}
.car-btn{
  position:absolute;top:50%;translate:0 -50%;z-index:5;
  width:52px;height:52px;border-radius:50%;border:1px solid var(--steel-line);
  background:rgba(14,17,22,.7);backdrop-filter:blur(6px);color:var(--text);
  display:grid;place-items:center;cursor:pointer;transition:.2s;
}
.car-btn:hover{background:var(--brand);color:#0e1116;border-color:var(--brand)}
.car-btn svg{width:22px;height:22px}
.car-prev{left:16px}.car-next{right:16px}
.car-dots{display:flex;gap:10px;justify-content:center;margin-top:22px}
.car-dots button{width:34px;height:4px;border-radius:2px;border:0;background:var(--steel-line);cursor:pointer;transition:.25s;padding:0}
.car-dots button[aria-current="true"]{background:var(--brand);width:52px}

/* ============================================================
   TESTIMONIOS
   ============================================================ */
.quotes{max-width:820px;margin:44px auto 0;text-align:center}
.quote{display:none}
.quote.on{display:block;animation:fade .5s var(--ease)}
.quote p{font-family:var(--f-display);font-weight:500;font-size:clamp(22px,3.4vw,34px);line-height:1.25;letter-spacing:.5px}
.quote footer{margin-top:20px;color:var(--muted);text-transform:uppercase;letter-spacing:2px;font-size:13px}
.quote footer b{color:var(--brand)}
.q-dots{display:flex;gap:10px;justify-content:center;margin-top:26px}
.q-dots button{width:10px;height:10px;border-radius:50%;border:0;background:var(--steel-line);cursor:pointer;padding:0;transition:.25s}
.q-dots button[aria-current="true"]{background:var(--brand)}
@keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ============================================================
   CONTACTO (CTA band)
   ============================================================ */
.contact{
  background:
    radial-gradient(90% 140% at 100% 0,rgba(255,106,31,.14),transparent 60%),
    var(--steel-900);
  border-top:1px solid var(--steel-line);border-bottom:1px solid var(--steel-line);
}
.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.contact h2{font-size:clamp(34px,5.5vw,60px)}
.info-list{list-style:none;margin:0;padding:0;display:grid;gap:20px}
.info-list li{display:flex;gap:16px;align-items:flex-start}
.info-list .ic{width:46px;height:46px;flex:none;border-radius:11px;background:var(--steel-800);border:1px solid var(--steel-line);display:grid;place-items:center;color:var(--brand)}
.info-list .ic svg{width:22px;height:22px}
.info-list b{display:block;font-family:var(--f-display);letter-spacing:1px;text-transform:uppercase;font-size:16px}
.info-list span{color:var(--muted);font-size:15px}
.map-embed{margin-top:44px}
.map-embed iframe{width:100%;height:360px;border:0;display:block;border-radius:var(--r);border:1px solid var(--steel-line);filter:grayscale(.15) contrast(1.04)}

/* ============================================================
   FOOTER
   ============================================================ */
.foot{padding:56px var(--pad) 104px;background:var(--steel-950)}
.foot-top{display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;align-items:center;border-bottom:1px solid var(--steel-line);padding-bottom:26px}
.foot nav{display:flex;gap:26px;flex-wrap:wrap}
.foot nav a{color:var(--muted);text-transform:uppercase;letter-spacing:1.5px;font-family:var(--f-display);font-size:14px}
.foot nav a:hover{color:var(--brand)}
.foot-bottom{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;color:var(--muted);font-size:13px;padding-top:22px}
.foot-bottom .credit{font-size:15px;letter-spacing:.2px}
.foot-bottom .credit a{color:var(--chrome);display:inline-flex;align-items:center;gap:8px;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.foot-bottom .credit a:hover{color:#4aa3ec;border-bottom-color:#4aa3ec}
.foot-bottom .credit svg{width:20px;height:20px;flex:none;border-radius:5px}

/* ============================================================
   WHATSAPP FLOTANTE
   ============================================================ */
.wa-float{
  position:fixed;right:22px;bottom:22px;z-index:80;
  display:flex;align-items:center;gap:0;
}
.wa-float a{
  width:60px;height:60px;border-radius:50%;background:var(--wa);color:#04310f;
  display:grid;place-items:center;box-shadow:0 12px 30px -6px rgba(37,211,102,.5);
  position:relative;transition:transform .25s var(--ease);
}
.wa-float a:hover{transform:scale(1.06)}
.wa-float a svg{width:32px;height:32px}
.wa-float a::before{ /* pulso */
  content:"";position:absolute;inset:0;border-radius:50%;background:var(--wa);
  animation:pulse 2.2s ease-out infinite;z-index:-1;
}
.wa-tip{
  position:absolute;right:72px;white-space:nowrap;background:var(--steel-800);
  border:1px solid var(--steel-line);color:var(--text);padding:8px 14px;border-radius:10px;
  font-size:14px;opacity:0;pointer-events:none;transform:translateX(8px);transition:.25s;
}
.wa-float:hover .wa-tip{opacity:1;transform:none}
@keyframes pulse{0%{transform:scale(1);opacity:.6}100%{transform:scale(1.9);opacity:0}}

/* ============================================================
   REVEAL AL SCROLLEAR
   ============================================================ */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}
.reveal.d2{transition-delay:.16s}
.reveal.d3{transition-delay:.24s}
.reveal.d4{transition-delay:.32s}
.reveal.d5{transition-delay:.40s}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:920px){
  .hero .wrap{grid-template-columns:1fr;grid-template-areas:"kicker" "tach" "title" "desc" "stats";gap:26px;flex-shrink:0}
  .hero{flex-direction:column;align-items:stretch;padding-bottom:34px}
  .scroll-cue{position:static;transform:none;translate:none;left:auto;bottom:auto;margin:26px auto 0}
  .tach{max-width:280px}
  .grid-serv{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(2,1fr)}
  .about,.contact-grid{grid-template-columns:1fr;gap:36px}
  .map-embed{margin-top:28px}
  .map-embed iframe{height:180px}
}
@media(max-width:640px){
  .nav-links,.nav-cta .btn{display:none}
  .burger{display:block}
  .nav.open .nav-links{
    display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;
    background:rgba(255,255,255,.98);border-bottom:1px solid rgba(20,30,45,.10);padding:8px 0;
  }
  .nav.open .nav-links a{padding:14px var(--pad);width:100%}
  .grid-serv{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr);gap:12px}
  .stat{padding:22px 18px}
  .stat b{font-size:clamp(34px,9vw,52px)}
  .car-btn{width:42px;height:42px}
  .hero-title{font-size:clamp(32px,9vw,54px);letter-spacing:0}
  .hero-kicker{gap:10px;letter-spacing:2px;font-size:12px}
  .hero-kicker::before,.hero-kicker::after{display:none}
  .hero-stats > .hero-badges{padding:16px 12px;gap:6px}
  .hero-badges b{font-size:20px}
  .hero-badges small{font-size:8px;letter-spacing:0}
}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .tach .needle{transform:rotate(70deg)}
  .reveal{opacity:1;transform:none}
}