/* ============================================================
   SISTEMA VISUAL — Casa Diesel
   base.css: reset, variables, tipografía global, utilidades, botones
   ============================================================ */
:root{
  /* Paleta acero diésel — editorial oscura (referencia: dark steel premium) */
  --navy:        #0B2A45;   /* Diesel Navy — primario */
  --navy-700:    #0E3457;   /* profundidad */
  --navy-deep:   #081826;   /* fondo extra-profundo (más acerado) */
  --ink:         #0A1622;   /* el negro azulado más profundo — bandas editoriales */
  --precision:   #00A3DA;   /* Precision Blue — acento primario */
  --precision-d: #0086B3;   /* hover state */
  --precision-l: #4FC4ED;   /* highlight claro */
  --amber:       #F2A413;   /* Industrial Amber — acento secundario (energía/alerta) */
  --amber-d:     #D98C00;
  --graphite:    #14181C;   /* texto largo / tinta */
  --white:       #FFFFFF;
  --steel:       #5A6B78;   /* texto secundario */
  --steel-l:     #8A99A5;   /* texto terciario sobre claro */
  --mist:        #EEF2F6;   /* fondo de descanso (más limpio) */
  --mist-d:      #DCE4EB;
  --line:        #D2DBE3;   /* hairlines más sutiles */
  --line-soft:   #E4EAF0;
  --line-dark:   rgba(255,255,255,.10);

  --r-sm: 4px;
  --r-md: 9px;
  --r-lg: 16px;
  --r-xl: 24px;

  --shadow-sm: 0 1px 2px rgba(11,42,69,.06);
  --shadow-md: 0 6px 24px rgba(8,24,38,.08);
  --shadow-lg: 0 18px 50px rgba(8,24,38,.14);
  --shadow-xl: 0 30px 80px rgba(8,24,38,.20);

  --display: "Saira Condensed", -apple-system, BlinkMacSystemFont, sans-serif;
  --body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --ease: cubic-bezier(.22,.61,.36,1);   /* easeOutQuint suave */

  --max: 1240px;
  --pad: 28px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--body);
  color:var(--graphite);
  background:var(--white);
  line-height:1.55;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;border:none;cursor:pointer;background:none;color:inherit}
input{font:inherit}
::selection{background:var(--precision);color:var(--white)}

.wrap{
  max-width:var(--max);margin:0 auto;
  padding-left:max(var(--pad), env(safe-area-inset-left));
  padding-right:max(var(--pad), env(safe-area-inset-right));
}
/* Móvil: márgenes laterales más ajustados para aprovechar el ancho del teléfono */
@media(max-width:540px){
  :root{--pad:18px}
}

/* ============================================================
   TIPOGRAFÍA UTILITARIA
   ============================================================ */
.display{
  font-family:var(--display);
  font-weight:800;
  letter-spacing:-.005em;
  text-transform:uppercase;
  line-height:.92;
}
.eyebrow{
  font-family:var(--display);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:12px;
  color:var(--precision);
}
.eyebrow .dot{
  display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--precision);margin-right:10px;vertical-align:middle;
  box-shadow:0 0 0 4px rgba(0,163,218,.18);
  animation:pulse 2.2s ease-in-out infinite;
}
@keyframes pulse{0%,100%{box-shadow:0 0 0 4px rgba(0,163,218,.18)}50%{box-shadow:0 0 0 8px rgba(0,163,218,.05)}}

/* ============================================================
   BOTONES
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--display);font-weight:700;font-size:14px;letter-spacing:.06em;
  text-transform:uppercase;padding:14px 22px;border-radius:var(--r-md);
  transition:all .18s ease;white-space:nowrap;cursor:pointer;
  border:1.5px solid transparent;
}
.btn svg{width:16px;height:16px;flex:none}
.btn-primary{background:var(--navy);color:var(--white)}
.btn-primary:hover{background:var(--graphite);transform:translateY(-1px);box-shadow:0 10px 30px rgba(11,42,69,.28)}
.btn-precision{background:var(--precision);color:var(--white)}
.btn-precision:hover{background:var(--precision-d);transform:translateY(-1px);box-shadow:0 10px 30px rgba(0,163,218,.32)}
.btn-whatsapp{background:#25D366;color:var(--white)}
.btn-whatsapp:hover{background:#1ebd5a;transform:translateY(-1px);box-shadow:0 10px 30px rgba(37,211,102,.32)}
.btn-ghost{background:transparent;color:var(--navy);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--navy);background:var(--mist)}
.btn-on-navy{background:rgba(255,255,255,.10);color:var(--white);border-color:rgba(255,255,255,.20)}
.btn-on-navy:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.40)}
.btn-lg{padding:18px 28px;font-size:15px}
.btn-sm{padding:10px 16px;font-size:12px}
.btn:focus-visible{outline:3px solid var(--precision);outline-offset:2px}

/* ============================================================
   FADE-IN ON SCROLL
   ============================================================ */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* Reveal escalonado: cada hijo entra con su propio delay (set por JS) */
.stagger-child{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in .stagger-child{opacity:1;transform:none}

/* Defensa: si JS falla o el usuario pide menos movimiento, nada queda oculto */
@media (prefers-reduced-motion: reduce){
  .reveal,.stagger-child{opacity:1 !important;transform:none !important;transition:none !important}
  html{scroll-behavior:auto}
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important}
}

/* ============================================================
   ENHANCEMENT LAYER — elevación editorial (no toca contenido)
   ============================================================ */

/* Tipografía global afinada */
body{font-size:16.5px;letter-spacing:.002em}
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}

/* Hairlines / divisores editoriales con guiones (estilo Prometheus) */
.rule-dashed{
  height:1px;width:100%;border:0;
  background-image:repeating-linear-gradient(90deg,var(--line) 0 8px,transparent 8px 16px);
}
.rule-dashed.on-dark{
  background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.16) 0 8px,transparent 8px 16px);
}

/* Eyebrow: variante ámbar para acentos secundarios */
.eyebrow.amber{color:var(--amber)}
.eyebrow.amber .dot{
  background:var(--amber);
  box-shadow:0 0 0 4px rgba(242,164,19,.18);
  animation:pulseAmber 2.2s ease-in-out infinite;
}
@keyframes pulseAmber{0%,100%{box-shadow:0 0 0 4px rgba(242,164,19,.18)}50%{box-shadow:0 0 0 8px rgba(242,164,19,.05)}}

/* Botones: micro-interacción premium con barrido de brillo */
.btn{
  position:relative;overflow:hidden;isolation:isolate;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .2s ease,border-color .2s ease,color .2s ease;
}
.btn::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.22) 50%,transparent 70%);
  transform:translateX(-120%);transition:transform .6s var(--ease);
}
.btn:hover::after{transform:translateX(120%)}
.btn:active{transform:translateY(0) scale(.985)}

/* Botón ámbar (CTA de alto impacto / cotización) */
.btn-amber{background:var(--amber);color:var(--ink)}
.btn-amber:hover{background:var(--amber-d);transform:translateY(-2px);box-shadow:0 14px 34px rgba(242,164,19,.34)}

/* Realce de hover en botones existentes (mayor elevación) */
.btn-primary:hover,.btn-precision:hover,.btn-whatsapp:hover{transform:translateY(-2px)}

/* Barra de progreso de lectura */
.scroll-progress{
  position:fixed;top:0;left:0;right:0;height:3px;z-index:300;
  background:transparent;pointer-events:none;
}
.scroll-progress span{
  display:block;height:100%;width:0%;
  background:linear-gradient(90deg,var(--precision),var(--precision-l));
  box-shadow:0 0 12px rgba(0,163,218,.5);
  transition:width .08s linear;
}

/* Selección coherente con la marca */
::selection{background:var(--precision);color:var(--white)}

/* Entrada del hero (independiente del scroll, al cargar) */
.hero-left--anim > *{opacity:0;transform:translateY(22px);animation:heroIn .9s var(--ease) forwards}
.hero-left--anim > *:nth-child(1){animation-delay:.05s}
.hero-left--anim > *:nth-child(2){animation-delay:.16s}
.hero-left--anim > *:nth-child(3){animation-delay:.27s}
.hero-left--anim > *:nth-child(4){animation-delay:.38s}
.hero-left--anim > *:nth-child(5){animation-delay:.49s}
@keyframes heroIn{to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){
  .hero-left--anim > *{opacity:1 !important;transform:none !important;animation:none !important}
}

/* Foco accesible global */
a:focus-visible,button:focus-visible,input:focus-visible{
  outline:3px solid var(--precision);outline-offset:3px;border-radius:3px;
}