/* ==================================================================
   IRON ROAD — Trucks & Equipment
   styles.css · HTML5 + CSS3, sin frameworks
   ==================================================================
   ÍNDICE
   01. Variables y base
   02. Utilidades (container, botones, títulos, animaciones)
   03. Preloader / progreso / cursor
   04. Header y navegación
   05. Hero
   06. Marquee
   07. Categorías
   08. Inventario + filtros + swiper
   09. Sección cinemática
   10. Números
   11. Por qué IRON ROAD
   12. Nosotros
   13. Refacciones (blueprint)
   14. CTA WhatsApp
   15. Contacto
   16. Footer
   17. Flotantes (WhatsApp, back-top)
   18. Responsive
   19. Accesibilidad / reduced motion
   ================================================================== */

/* ---------- 01. VARIABLES Y BASE ---------- */
:root{
  /* Paleta de marca */
  --orange:        #FF6200;
  --orange-dark:   #D95300;
  --orange-glow:   rgba(255, 98, 0, .35);
  --black:         #111111;   /* negro carbón */
  --black-deep:    #050505;   /* negro profundo */
  --graphite:      #24272B;   /* gris grafito */
  --gray:          #9BA0A6;   /* gris metálico (texto secundario) */
  --gray-line:     rgba(255,255,255,.08);
  --white:         #FFFFFF;

  /* Layout */
  --container-width: 1240px;
  --gutter: clamp(1.1rem, 4vw, 2.5rem);
  --radius: 14px;

  /* Tipografía */
  --font-display: "Barlow Condensed", "Arial Narrow", Impact, sans-serif;
  --font-body:    "Barlow", "Segoe UI", Arial, sans-serif;

  /* Movimiento */
  --transition: .35s cubic-bezier(.22,.61,.36,1);
  --transition-slow: .7s cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; }

/* FIX móvil: el recorte horizontal debe aplicarse también a html,
   porque los transforms laterales de las animaciones generaban
   scroll horizontal en celulares */
html, body{ overflow-x:hidden; }
@supports (overflow-x: clip){ html, body{ overflow-x:clip; } }

body{
  font-family:var(--font-body);
  background:var(--black-deep);
  color:var(--white);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
button{ font:inherit; cursor:pointer; background:none; border:0; color:inherit; }

::selection{ background:var(--orange); color:var(--black-deep); }

/* Scrollbar sutil (WebKit) */
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:var(--black-deep); }
::-webkit-scrollbar-thumb{ background:var(--graphite); border-radius:8px; }
::-webkit-scrollbar-thumb:hover{ background:var(--orange-dark); }

:focus-visible{
  outline:2px solid var(--orange);
  outline-offset:3px;
  border-radius:4px;
}

/* ---------- 02. UTILIDADES ---------- */
.container{
  width:min(var(--container-width), 100% - var(--gutter)*2);
  margin-inline:auto;
}

.text-orange{ color:var(--orange); }

.section{ position:relative; padding-block:clamp(4.5rem, 10vw, 8.5rem); }

.section__head{ margin-bottom:clamp(2.5rem, 6vw, 4.5rem); }
.section__head--row{
  display:flex; flex-wrap:wrap; gap:1.5rem 3rem;
  align-items:flex-end; justify-content:space-between;
}

.section__eyebrow{
  display:inline-flex; align-items:center; gap:.7rem;
  font-family:var(--font-display);
  font-weight:600; letter-spacing:.28em; text-transform:uppercase;
  font-size:clamp(.75rem, 1.4vw, .9rem);
  color:var(--orange);
  margin-bottom:1rem;
}
.section__eyebrow::before{
  content:""; width:34px; height:2px; background:var(--orange);
}

.section__title{
  font-family:var(--font-display);
  font-weight:800; text-transform:uppercase; line-height:1.02;
  letter-spacing:.01em;
  font-size:clamp(2.1rem, 5.4vw, 4rem);
}

/* Botones */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  gap:.6rem;
  font-family:var(--font-display); font-weight:700; text-transform:uppercase;
  letter-spacing:.14em; font-size:clamp(.85rem, 1.5vw, 1rem);
  padding:.95em 2.1em;
  border-radius:6px;
  transition:transform var(--transition), box-shadow var(--transition),
             background var(--transition), color var(--transition), border-color var(--transition);
  will-change:transform;
}
.btn--solid{
  background:var(--orange); color:var(--black-deep);
  clip-path:polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  border-radius:0;
}
.btn--solid:hover{
  background:var(--white);
  box-shadow:0 10px 34px var(--orange-glow);
}
.btn--ghost{
  color:var(--white);
  border:1px solid rgba(255,255,255,.35);
  backdrop-filter:blur(6px);
  background:rgba(255,255,255,.04);
}
.btn--ghost:hover{ border-color:var(--orange); color:var(--orange); }
.btn--xl{ padding:1.15em 2.9em; font-size:clamp(1rem, 2vw, 1.2rem); }
.btn--full{ width:100%; }
.btn i, .btn svg{ width:1.2em; height:1.2em; }

/* Estados de animación por scroll (JS agrega .is-inview) */
[data-anim]{ opacity:0; will-change:transform, opacity; }
[data-anim="fade-up"]{ transform:translateY(46px); }
[data-anim="slide-right"]{ transform:translateX(-70px); }
[data-anim="slide-left"]{ transform:translateX(70px); }
[data-anim="mask"]{
  transform:none;
  clip-path:inset(0 0 100% 0);
}
[data-anim].is-inview{
  opacity:1; transform:none;
  clip-path:inset(0 0 0 0);
  transition:opacity .9s ease, transform .9s cubic-bezier(.22,.61,.36,1),
             clip-path .9s cubic-bezier(.22,.61,.36,1);
}

/* ---------- 03. PRELOADER / PROGRESO / CURSOR ---------- */
.preloader{
  position:fixed; inset:0; z-index:1000;
  display:grid; place-items:center;
  background:transparent;
}
.preloader__panel{
  position:absolute; top:0; bottom:0; width:50.5%;
  background:var(--black-deep);
  transition:transform .8s cubic-bezier(.7,0,.2,1);
}
.preloader__panel--left{ left:0; }
.preloader__panel--right{ right:0; }
.preloader__inner{
  position:relative; z-index:2; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:1.4rem;
  transition:opacity .4s ease;
}
.preloader__logo{
  width:clamp(84px, 14vw, 128px); height:auto; border-radius:50%;
  box-shadow:0 0 60px var(--orange-glow);
}
.preloader__bar{
  width:min(260px, 60vw); height:3px;
  background:var(--graphite); overflow:hidden; border-radius:3px;
}
.preloader__fill{
  display:block; height:100%; width:0%;
  background:var(--orange);
  box-shadow:0 0 18px var(--orange);
  transition:width .2s ease;
}
.preloader__percent{
  font-family:var(--font-display); font-weight:700; letter-spacing:.3em;
  color:var(--gray); font-size:.85rem;
}
.preloader.is-done .preloader__inner{ opacity:0; }
.preloader.is-done .preloader__panel--left{ transform:translateX(-101%); }
.preloader.is-done .preloader__panel--right{ transform:translateX(101%); }
.preloader.is-removed{ display:none; }

/* Barra de progreso de scroll */
.scroll-progress{
  position:fixed; top:0; left:0; z-index:990;
  height:3px; width:0%;
  background:linear-gradient(90deg, var(--orange-dark), var(--orange));
  box-shadow:0 0 12px var(--orange-glow);
}

/* Cursor personalizado (activado por JS solo en escritorio con puntero fino) */
.cursor-dot,.cursor-ring{
  position:fixed; top:0; left:0; z-index:995; pointer-events:none;
  border-radius:50%; opacity:0;
  transform:translate(-50%,-50%);
}
.cursor-dot{ width:6px; height:6px; background:var(--orange); }
.cursor-ring{
  width:38px; height:38px;
  border:1px solid rgba(255,98,0,.7);
  transition:width .25s ease, height .25s ease, border-color .25s ease, opacity .3s ease;
}
body.has-cursor .cursor-dot,
body.has-cursor .cursor-ring{ opacity:1; }
body.has-cursor.cursor-hover .cursor-ring{
  width:64px; height:64px; border-color:var(--orange);
}
body.has-cursor{ cursor:none; }
body.has-cursor a, body.has-cursor button{ cursor:none; }

/* ---------- 04. HEADER Y NAVEGACIÓN ---------- */
.header{
  position:fixed; top:0; left:0; right:0; z-index:900;
  padding-block:1rem;
  background:transparent;
  transition:background var(--transition), padding var(--transition),
             box-shadow var(--transition), backdrop-filter var(--transition);
}
.header.is-scrolled{
  background:rgba(5,5,5,.78);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  padding-block:.55rem;
  box-shadow:0 8px 30px rgba(0,0,0,.45);
  border-bottom:1px solid var(--gray-line);
}
.header__inner{
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
}
.header__brand{ display:flex; align-items:center; gap:.8rem; flex-shrink:0; }
.header__brand img{
  width:48px; height:48px; border-radius:50%;
  box-shadow:0 0 0 2px rgba(255,98,0,.4);
}
.header__brand-text{ display:flex; flex-direction:column; line-height:1.05; }
.header__brand-text strong{
  font-family:var(--font-display); font-weight:800; font-size:1.25rem;
  letter-spacing:.06em; white-space:nowrap;
}
.header__brand-text small{
  font-size:.6rem; letter-spacing:.32em; color:var(--gray);
}

.nav{ display:flex; align-items:center; gap:2rem; }
.nav__list{ display:flex; gap:clamp(1rem, 2vw, 1.8rem); }
.nav__link{
  position:relative;
  font-family:var(--font-display); font-weight:600; text-transform:uppercase;
  letter-spacing:.14em; font-size:.9rem; color:var(--white);
  padding-block:.4rem;
  transition:color var(--transition);
}
/* Indicador naranja de sección activa + subrayado que se dibuja */
.nav__link::after{
  content:""; position:absolute; left:0; bottom:0;
  width:100%; height:2px; background:var(--orange);
  transform:scaleX(0); transform-origin:left;
  transition:transform var(--transition);
}
.nav__link:hover{ color:var(--orange); }
.nav__link:hover::after,
.nav__link.is-active::after{ transform:scaleX(1); }
.nav__link.is-active{ color:var(--orange); }

.hamburger{
  display:none; flex-direction:column; gap:6px; padding:.6rem;
  z-index:920;
}
.hamburger span{
  width:28px; height:2px; background:var(--white);
  transition:transform var(--transition), opacity var(--transition), background var(--transition);
}
.hamburger.is-open span:nth-child(1){ transform:translateY(8px) rotate(45deg); background:var(--orange); }
.hamburger.is-open span:nth-child(2){ opacity:0; }
.hamburger.is-open span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); background:var(--orange); }

/* ---------- 05. HERO ---------- */
.hero{
  position:relative; min-height:100svh;
  display:flex; align-items:center;
  overflow:hidden;
  padding-block:8rem 5rem;
}
.hero__bg{ position:absolute; inset:0; z-index:0; }
.hero__bg img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1);
  animation:heroZoom 26s ease-out forwards;
}
@keyframes heroZoom{ to{ transform:scale(1.12); } }

.hero__overlay{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg, rgba(5,5,5,.72) 0%, rgba(5,5,5,.35) 45%, rgba(5,5,5,.92) 100%),
    radial-gradient(ellipse at 30% 60%, rgba(5,5,5,0) 0%, rgba(5,5,5,.55) 80%);
}
.hero__glow{
  position:absolute; z-index:1; left:-10%; bottom:-20%;
  width:60vw; height:60vw; max-width:900px; max-height:900px;
  background:radial-gradient(circle, var(--orange-glow) 0%, transparent 62%);
  filter:blur(30px); pointer-events:none;
}
.hero__particles{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.hero__particles i{
  position:absolute; display:block;
  width:3px; height:3px; border-radius:50%;
  background:var(--orange); opacity:.35;
  animation:particle 9s linear infinite;
}
@keyframes particle{
  0%{ transform:translateY(0); opacity:0; }
  15%{ opacity:.4; }
  85%{ opacity:.25; }
  100%{ transform:translateY(-45vh); opacity:0; }
}

.hero__content{ position:relative; z-index:2; }
.hero__logo{
  width:clamp(72px, 9vw, 110px); border-radius:50%;
  box-shadow:0 0 46px var(--orange-glow);
  margin-bottom:1.4rem;
}
.hero__line{
  display:block; height:3px; width:0; max-width:200px;
  background:linear-gradient(90deg, var(--orange), transparent);
  margin-bottom:1.6rem;
  transition:width 1s cubic-bezier(.22,.61,.36,1);
}
.hero__line.is-drawn{ width:200px; }
.hero__eyebrow{
  font-family:var(--font-display); font-weight:600;
  letter-spacing:.4em; font-size:clamp(.75rem, 1.5vw, .95rem);
  color:var(--gray); margin-bottom:1rem;
}
.hero__title{
  font-family:var(--font-display); font-weight:800; font-style:italic;
  text-transform:uppercase; line-height:.94; letter-spacing:.01em;
  font-size:clamp(3.2rem, 11vw, 8.2rem);
  text-shadow:0 20px 60px rgba(0,0,0,.55);
}
.hero__title-mask{ display:block; overflow:hidden; }
.hero__title-mask > span{
  display:block; transform:translateY(110%);
  transition:transform .9s cubic-bezier(.22,.61,.36,1);
}
.hero__title.is-revealed .hero__title-mask > span{ transform:translateY(0); }
.hero__title.is-revealed .hero__title-mask:nth-child(2) > span{ transition-delay:.12s; }
.hero__title.is-revealed .hero__title-mask:nth-child(3) > span{ transition-delay:.24s; }

.hero__subtitle{
  max-width:520px; color:#D5D8DC;
  font-size:clamp(1rem, 2vw, 1.25rem);
  margin-block:1.6rem 2.4rem;
}
.hero__actions{ display:flex; flex-wrap:wrap; gap:1rem; }

/* Secuencia de entrada del hero (JS agrega .is-loaded por pasos) */
.reveal-load{ opacity:0; transform:translateY(26px); transition:opacity .8s ease, transform .8s cubic-bezier(.22,.61,.36,1); }
.reveal-load.is-loaded{ opacity:1; transform:none; }

.hero__scroll{
  position:absolute; z-index:2; left:50%; bottom:2rem;
  transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.7rem;
  color:var(--gray);
}
.hero__scroll-text{
  font-family:var(--font-display); letter-spacing:.34em; font-size:.7rem;
  text-transform:uppercase;
}
.hero__scroll-track{
  width:24px; height:40px; border:1px solid rgba(255,255,255,.35);
  border-radius:14px; display:flex; justify-content:center; padding-top:7px;
}
.hero__scroll-dot{
  width:4px; height:8px; border-radius:3px; background:var(--orange);
  animation:scrollDot 1.8s ease-in-out infinite;
}
@keyframes scrollDot{
  0%{ transform:translateY(0); opacity:1; }
  70%{ transform:translateY(14px); opacity:0; }
  100%{ transform:translateY(0); opacity:0; }
}

/* ---------- 06. MARQUEE ---------- */
.marquee{
  overflow:hidden; border-block:1px solid var(--gray-line);
  background:var(--black);
  padding-block:1.1rem;
  position:relative; z-index:2;
}
.marquee__track{
  display:flex; gap:2.6rem; width:max-content;
  animation:marquee 26s linear infinite;
  font-family:var(--font-display); font-weight:700; font-size:1.15rem;
  letter-spacing:.3em; color:var(--gray); text-transform:uppercase;
  white-space:nowrap;
}
.marquee__track span:nth-child(even){ color:var(--orange); }
.marquee:hover .marquee__track{ animation-play-state:paused; }
@keyframes marquee{ to{ transform:translateX(-50%); } }

/* ---------- 07. CATEGORÍAS ---------- */
.categories{ background:var(--black-deep); }
.categories__grid{
  display:grid; gap:1.6rem;
  grid-template-columns:repeat(3, 1fr);
}
.cat-card{
  position:relative; display:block; overflow:hidden;
  border-radius:var(--radius);
  background:var(--graphite);
  border:1px solid var(--gray-line);
  isolation:isolate;
  transition:transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}
/* Borde naranja que se "dibuja" al pasar el cursor */
.cat-card::before{
  content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
  border-radius:var(--radius);
  border:1px solid var(--orange);
  clip-path:inset(0 100% 0 0);
  transition:clip-path .6s cubic-bezier(.22,.61,.36,1);
}
.cat-card:hover::before,
.cat-card:focus-visible::before{ clip-path:inset(0 0 0 0); }
.cat-card:hover{
  transform:translateY(-8px);
  box-shadow:0 24px 50px rgba(0,0,0,.5), 0 0 0 1px rgba(255,98,0,.15);
}
.cat-card__media{ aspect-ratio:16/10; overflow:hidden; }
.cat-card__media img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .8s cubic-bezier(.22,.61,.36,1), filter .5s ease;
}
.cat-card:hover .cat-card__media img{ transform:scale(1.08); filter:brightness(1.08); }
.cat-card__body{
  position:relative; padding:1.4rem 1.5rem 1.6rem;
  background:linear-gradient(180deg, rgba(17,17,17,.4), rgba(5,5,5,.85));
  backdrop-filter:blur(4px);
}
.cat-card__num{
  position:absolute; top:-1.4rem; right:1.3rem;
  font-family:var(--font-display); font-weight:800; font-size:2.6rem; font-style:italic;
  color:rgba(255,255,255,.14);
  transition:color var(--transition);
}
.cat-card:hover .cat-card__num{ color:var(--orange); }
.cat-card__icon{ width:26px; height:26px; color:var(--orange); margin-bottom:.6rem; }
.cat-card__name{
  font-family:var(--font-display); font-weight:700; text-transform:uppercase;
  letter-spacing:.08em; font-size:1.45rem;
}
.cat-card__desc{ color:var(--gray); font-size:.92rem; margin-top:.3rem; max-width:34ch; }
.cat-card__arrow{
  position:absolute; right:1.5rem; bottom:1.5rem;
  font-size:1.3rem; color:var(--orange);
  transform:translateX(-8px); opacity:.6;
  transition:transform var(--transition), opacity var(--transition);
}
.cat-card:hover .cat-card__arrow{ transform:translateX(0); opacity:1; }

/* ---------- 08. INVENTARIO ---------- */
.inventory{
  background:
    linear-gradient(180deg, var(--black-deep) 0%, var(--black) 18%, var(--black) 82%, var(--black-deep) 100%);
}
.filters{ display:flex; flex-wrap:wrap; gap:.5rem; }
.filters__btn{
  font-family:var(--font-display); font-weight:600; text-transform:uppercase;
  letter-spacing:.12em; font-size:.85rem;
  padding:.55em 1.2em; border-radius:100px;
  border:1px solid var(--gray-line); color:var(--gray);
  transition:color var(--transition), border-color var(--transition), background var(--transition);
}
.filters__btn:hover{ color:var(--white); border-color:rgba(255,255,255,.3); }
.filters__btn.is-active{
  color:var(--black-deep); background:var(--orange); border-color:var(--orange);
  box-shadow:0 6px 22px var(--orange-glow);
}

.inventory__swiper{ overflow:hidden; padding-bottom:3rem; }
.swiper-pagination-bullet{ background:var(--gray); opacity:.5; }
.swiper-pagination-bullet-active{ background:var(--orange); opacity:1; }

/* Cuando Swiper no está disponible (sin internet), degradar a grid */
.inventory__swiper.is-static .swiper-wrapper{
  display:grid; gap:1.5rem;
  grid-template-columns:repeat(auto-fill, minmax(290px, 1fr));
}
.inventory__swiper.is-static + .inventory__nav{ display:none; }

.inv-card{
  display:flex; flex-direction:column; height:auto;
  border-radius:var(--radius); overflow:hidden;
  background:var(--graphite);
  border:1px solid var(--gray-line);
  transition:transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.inv-card:hover{
  transform:translateY(-6px);
  border-color:rgba(255,98,0,.5);
  box-shadow:0 22px 44px rgba(0,0,0,.5);
}
.inv-card__media{ position:relative; aspect-ratio:16/10; overflow:hidden; }
.inv-card__media img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .8s cubic-bezier(.22,.61,.36,1);
}
.inv-card:hover .inv-card__media img{ transform:scale(1.07); }
.inv-card__tag{
  position:absolute; top:.9rem; left:.9rem;
  font-family:var(--font-display); font-weight:700; font-size:.72rem;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--black-deep); background:var(--orange);
  padding:.3em .9em;
  clip-path:polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
}
.inv-card__year{
  position:absolute; top:.9rem; right:.9rem;
  font-family:var(--font-display); font-weight:700; font-size:.8rem;
  letter-spacing:.1em; color:var(--white);
  background:rgba(5,5,5,.65); backdrop-filter:blur(6px);
  padding:.3em .8em; border-radius:4px; border:1px solid var(--gray-line);
}
.inv-card__body{ padding:1.3rem 1.4rem 1.5rem; display:flex; flex-direction:column; gap:.9rem; flex:1; }
.inv-card__title{
  font-family:var(--font-display); font-weight:700; text-transform:uppercase;
  font-size:1.35rem; letter-spacing:.04em; line-height:1.1;
}
.inv-card__title small{
  display:block; font-family:var(--font-body); font-weight:500;
  font-size:.8rem; letter-spacing:.14em; color:var(--gray); margin-top:.2rem;
}
.inv-card__specs{
  display:flex; flex-wrap:wrap; gap:.4rem .9rem;
  color:var(--gray); font-size:.85rem;
}
.inv-card__specs span{ display:inline-flex; align-items:center; gap:.35rem; }
.inv-card__specs b{ color:#C9CDD2; font-weight:600; }
.inv-card__footer{
  margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  border-top:1px solid var(--gray-line); padding-top:1rem;
}
.inv-card__price{
  font-family:var(--font-display); font-weight:800; font-size:1.3rem;
  color:var(--orange); letter-spacing:.02em;
}
.inv-card__price small{ display:block; font-size:.65rem; color:var(--gray); letter-spacing:.2em; font-weight:600; }
.inv-card__btn{
  font-family:var(--font-display); font-weight:700; text-transform:uppercase;
  letter-spacing:.12em; font-size:.8rem; color:var(--white);
  border:1px solid rgba(255,255,255,.25); padding:.6em 1.2em; border-radius:4px;
  transition:background var(--transition), color var(--transition), border-color var(--transition);
}
.inv-card__btn:hover{ background:var(--orange); border-color:var(--orange); color:var(--black-deep); }

.inventory__nav{ display:flex; justify-content:flex-end; gap:.6rem; margin-top:.5rem; }
.inventory__prev,.inventory__next{
  width:48px; height:48px; border-radius:50%;
  border:1px solid var(--gray-line); color:var(--white); font-size:1.2rem;
  display:grid; place-items:center;
  transition:background var(--transition), border-color var(--transition), color var(--transition);
}
.inventory__prev{ transform:scaleX(-1); }
.inventory__prev:hover,.inventory__next:hover{
  background:var(--orange); border-color:var(--orange); color:var(--black-deep);
}
.inventory__empty{ color:var(--gray); margin-top:1.5rem; }
.inventory__empty code{ color:var(--orange); }

/* ---------- 09. CINEMÁTICA ---------- */
.cinematic{
  position:relative; min-height:92vh;
  display:flex; align-items:center; overflow:hidden;
  background:var(--black-deep);
}
.cinematic__bg{ position:absolute; inset:-12% 0; z-index:0; }
.cinematic__bg img{ width:100%; height:100%; object-fit:cover; opacity:.5; }
.cinematic::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, var(--black-deep) 0%, transparent 25%, transparent 70%, var(--black-deep) 100%);
}
/* Línea naranja que recorre la pantalla como trayectoria (animada con scroll por JS) */
.cinematic__road{
  position:absolute; z-index:2; left:0; bottom:22%;
  width:100%; height:3px;
  background:linear-gradient(90deg, transparent, var(--orange) 25%, var(--orange) 75%, transparent);
  box-shadow:0 0 20px var(--orange-glow);
  transform:scaleX(0); transform-origin:left;
  transition:transform 1.4s cubic-bezier(.22,.61,.36,1);
}
.cinematic__road.is-inview{ transform:scaleX(1); }
.cinematic__content{ position:relative; z-index:3; }
.cinematic__title{
  font-family:var(--font-display); font-weight:800; font-style:italic;
  text-transform:uppercase; line-height:1;
  font-size:clamp(2.6rem, 8vw, 6.4rem);
  text-shadow:0 18px 50px rgba(0,0,0,.6);
}
.cinematic__vehicle{
  position:absolute; z-index:2; right:-4%; bottom:6%;
  width:clamp(300px, 44vw, 760px);
  filter:drop-shadow(0 30px 50px rgba(0,0,0,.6));
  opacity:.92;
}

/* ---------- 10. NÚMEROS ---------- */
.numbers{ background:var(--black-deep); border-block:1px solid var(--gray-line); }
.numbers__grid{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:2rem;
  text-align:center;
}
.numbers__item{ position:relative; padding-block:1rem; }
.numbers__item:not(:first-child)::before{
  content:""; position:absolute; left:-1rem; top:15%; bottom:15%;
  width:1px; background:var(--gray-line);
}
.numbers__value{
  font-family:var(--font-display); font-weight:800; font-style:italic;
  font-size:clamp(2.6rem, 6vw, 4.6rem); line-height:1;
  color:var(--white);
}
.numbers__value b{ color:var(--orange); font-weight:800; }
.numbers__label{
  display:block; margin-top:.6rem;
  font-family:var(--font-display); font-weight:600;
  letter-spacing:.22em; text-transform:uppercase;
  font-size:clamp(.68rem, 1.3vw, .82rem); color:var(--gray);
}

/* ---------- 11. POR QUÉ IRON ROAD ---------- */
.why{ background:var(--black); }
.why__grid{
  display:grid; gap:1.4rem;
  grid-template-columns:repeat(3, 1fr);
}
.why-card{
  padding:2rem 1.8rem;
  border-radius:var(--radius);
  background:rgba(255,255,255,.03);
  border:1px solid var(--gray-line);
  backdrop-filter:blur(6px);
  transition:transform var(--transition), border-color var(--transition), background var(--transition);
}
.why-card:hover{
  transform:translateY(-6px);
  border-color:rgba(255,98,0,.45);
  background:rgba(255,255,255,.05);
}
.why-card i, .why-card svg{
  width:34px; height:34px; color:var(--orange); margin-bottom:1rem;
}
.why-card h3{
  font-family:var(--font-display); font-weight:700; text-transform:uppercase;
  letter-spacing:.08em; font-size:1.2rem; margin-bottom:.5rem;
}
.why-card p{ color:var(--gray); font-size:.95rem; }

/* ---------- 12. NOSOTROS ---------- */
.about{ background:var(--black-deep); padding-block:0; }
.about__grid{
  display:grid; grid-template-columns:1fr 1fr; min-height:88vh;
}
.about__media{ position:relative; overflow:hidden; }
.about__media img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position:center 72%;
}
.about__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent 55%, var(--black-deep) 100%);
}
.about__body{
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(3rem, 7vw, 6rem);
}
.about__text{ color:#C9CDD2; max-width:52ch; margin-bottom:1.2rem; }
.about__quote{
  display:flex; align-items:center; gap:1rem;
  font-family:var(--font-display); font-weight:800; font-style:italic;
  font-size:clamp(1.4rem, 3vw, 2rem); letter-spacing:.1em;
  color:var(--orange);
  margin-block:1.4rem 2rem;
}
.about__quote-line{ width:52px; height:3px; background:var(--orange); flex-shrink:0; }
.about .btn{ align-self:flex-start; }

/* ---------- 13. REFACCIONES (blueprint) ---------- */
.parts{ background:var(--black); overflow:hidden; }
/* Fondo técnico tipo blueprint muy sutil, dibujado con gradientes */
.parts__blueprint{
  position:absolute; inset:0; opacity:.5; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.014) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.014) 1px, transparent 1px);
  background-size:110px 110px, 110px 110px, 22px 22px, 22px 22px;
}
.parts__grid{
  position:relative; display:grid; grid-template-columns:1.05fr .95fr;
  gap:clamp(2rem, 6vw, 5rem); align-items:center;
}
.parts__text{ color:#C9CDD2; max-width:54ch; margin-bottom:1.6rem; }
.parts__list{ display:grid; gap:.8rem; margin-bottom:2.2rem; }
.parts__list li{
  display:flex; align-items:center; gap:.8rem;
  color:var(--gray); font-size:.98rem;
}
.parts__list i, .parts__list svg{ width:20px; height:20px; color:var(--orange); flex-shrink:0; }
.parts__media{
  border-radius:var(--radius); overflow:hidden;
  border:1px solid var(--gray-line);
  box-shadow:0 30px 70px rgba(0,0,0,.55);
}

/* ---------- 14. CTA WHATSAPP ---------- */
.cta{
  position:relative; overflow:hidden; text-align:center;
  background:
    radial-gradient(ellipse at 50% 120%, rgba(255,98,0,.22) 0%, transparent 60%),
    var(--black-deep);
}
/* Líneas de carril diagonales */
.cta__lines{
  position:absolute; inset:0; pointer-events:none; opacity:.55;
  background:repeating-linear-gradient(
    -35deg,
    transparent 0 90px,
    rgba(255,255,255,.025) 90px 92px
  );
}
.cta__inner{ position:relative; }
.cta__title{
  font-family:var(--font-display); font-weight:800; font-style:italic;
  text-transform:uppercase; line-height:1;
  font-size:clamp(2.4rem, 7vw, 5.4rem);
}
.cta__subtitle{
  color:var(--gray); font-size:clamp(1rem, 2.2vw, 1.3rem);
  margin-block:1.4rem 2.6rem;
}

/* ---------- 15. CONTACTO ---------- */
.contact{ background:var(--black); }
.contact__grid{
  display:grid; grid-template-columns:1fr 1.15fr;
  gap:clamp(2.5rem, 6vw, 5rem);
}
.contact__list{ display:grid; gap:1.4rem; margin-top:2.2rem; }
.contact__list li{ display:flex; gap:1rem; align-items:flex-start; }
.contact__list i, .contact__list svg{
  width:22px; height:22px; color:var(--orange); flex-shrink:0; margin-top:.2rem;
}
.contact__list strong{
  display:block; font-family:var(--font-display); text-transform:uppercase;
  letter-spacing:.14em; font-size:.8rem; color:var(--gray); margin-bottom:.15rem;
}
.contact__list span, .contact__list a{ color:#D5D8DC; }
.contact__list a{ text-decoration:underline; text-decoration-color:rgba(255,98,0,.5); text-underline-offset:3px; }
.contact__list a:hover{ color:var(--orange); }

.contact__form{
  display:grid; grid-template-columns:1fr 1fr; gap:1.1rem;
  padding:clamp(1.6rem, 4vw, 2.6rem);
  border-radius:var(--radius);
  background:rgba(255,255,255,.03);
  border:1px solid var(--gray-line);
  backdrop-filter:blur(8px);
}
.field{ grid-column:1 / -1; display:flex; flex-direction:column; gap:.45rem; }
.field--half{ grid-column:auto; }
.field label{
  font-family:var(--font-display); font-weight:600; text-transform:uppercase;
  letter-spacing:.16em; font-size:.75rem; color:var(--gray);
}
.field input,.field select,.field textarea{
  min-width:0; width:100%;
  font:inherit; color:var(--white);
  background:rgba(5,5,5,.55);
  border:1px solid var(--gray-line);
  border-radius:8px; padding:.85em 1em;
  transition:border-color var(--transition), box-shadow var(--transition);
}
.field select{ appearance:none; background-image:linear-gradient(45deg, transparent 50%, var(--gray) 50%), linear-gradient(135deg, var(--gray) 50%, transparent 50%); background-position:calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size:6px 6px; background-repeat:no-repeat; }
.field input::placeholder,.field textarea::placeholder{ color:#5A6067; }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--orange);
  box-shadow:0 0 0 3px rgba(255,98,0,.18);
}
.field__error{
  display:none; color:#FF8B4D; font-size:.8rem;
}
.field.is-invalid input,.field.is-invalid select,.field.is-invalid textarea{
  border-color:#E0501B;
}
.field.is-invalid .field__error{ display:block; }
.contact__form .btn{ grid-column:1 / -1; }
.contact__note{
  grid-column:1 / -1; color:var(--gray); font-size:.9rem;
  border-left:3px solid var(--orange); padding-left:1rem;
}
.contact__note code{ color:var(--orange); }

/* ---------- 16. FOOTER ---------- */
.footer{ position:relative; background:var(--black-deep); padding-top:4.5rem; }
/* Línea naranja animada superior */
.footer__topline{
  position:absolute; top:0; left:0; height:2px; width:100%;
  background:linear-gradient(90deg, transparent, var(--orange), transparent);
  background-size:50% 100%; background-repeat:no-repeat;
  animation:topline 4s ease-in-out infinite alternate;
}
@keyframes topline{
  from{ background-position:-60% 0; }
  to{ background-position:160% 0; }
}
.footer__grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:2.5rem; padding-bottom:3rem;
}
.footer__brand{ display:flex; flex-direction:column; gap:.35rem; }
.footer__brand img{ width:64px; border-radius:50%; margin-bottom:.8rem; }
.footer__brand strong{
  font-family:var(--font-display); font-weight:800; font-size:1.5rem; letter-spacing:.06em;
}
.footer__brand span{ font-size:.68rem; letter-spacing:.34em; color:var(--gray); }
.footer__brand em{
  margin-top:.7rem; font-family:var(--font-display); font-style:italic; font-weight:700;
  color:var(--orange); letter-spacing:.14em; font-size:.95rem;
}
.footer__col{ display:flex; flex-direction:column; gap:.7rem; }
.footer__col h4{
  font-family:var(--font-display); font-weight:700; text-transform:uppercase;
  letter-spacing:.2em; font-size:.85rem; color:var(--white); margin-bottom:.4rem;
}
.footer__col a, .footer__col span{ color:var(--gray); font-size:.95rem; width:fit-content; }
.footer__col a{ position:relative; transition:color var(--transition); }
.footer__col a::after{
  content:""; position:absolute; left:0; bottom:-2px; width:100%; height:1px;
  background:var(--orange); transform:scaleX(0); transform-origin:left;
  transition:transform var(--transition);
}
.footer__col a:hover{ color:var(--orange); }
.footer__col a:hover::after{ transform:scaleX(1); }
.footer__social{ display:flex; gap:.7rem; }
.footer__social a{
  width:42px; height:42px; border-radius:50%;
  display:grid; place-items:center;
  border:1px solid var(--gray-line); color:var(--gray);
  transition:border-color var(--transition), color var(--transition), transform var(--transition);
}
.footer__social a:hover{ border-color:var(--orange); color:var(--orange); transform:translateY(-3px); }
.footer__social i, .footer__social svg{ width:18px; height:18px; }
.footer__bottom{
  border-top:1px solid var(--gray-line);
  padding-block:1.4rem; text-align:center;
  color:#5A6067; font-size:.85rem;
}

/* ---------- 17. FLOTANTES ---------- */
.whatsapp-float{
  position:fixed; right:1.4rem; bottom:1.4rem; z-index:940;
  width:58px; height:58px; border-radius:50%;
  display:grid; place-items:center;
  background:#25D366; color:#fff;
  box-shadow:0 12px 30px rgba(37,211,102,.35);
  transition:transform var(--transition), box-shadow var(--transition);
}
.whatsapp-float:hover{ transform:scale(1.08); }
/* Animación discreta de atención cada cierto tiempo */
.whatsapp-float.is-pulsing{ animation:waPulse 1.1s ease; }
@keyframes waPulse{
  0%,100%{ transform:scale(1); }
  30%{ transform:scale(1.12) rotate(-6deg); }
  60%{ transform:scale(1.05) rotate(5deg); }
}

.back-top{
  position:fixed; right:1.55rem; bottom:6.4rem; z-index:940;
  width:44px; height:44px; border-radius:8px;
  display:grid; place-items:center;
  background:rgba(17,17,17,.85); color:var(--white);
  border:1px solid var(--gray-line); backdrop-filter:blur(8px);
  font-size:1.1rem;
  opacity:0; pointer-events:none; transform:translateY(14px);
  transition:opacity var(--transition), transform var(--transition),
             background var(--transition), border-color var(--transition);
}
.back-top.is-visible{ opacity:1; pointer-events:auto; transform:none; }
.back-top:hover{ background:var(--orange); border-color:var(--orange); color:var(--black-deep); }

/* ---------- 18. RESPONSIVE ---------- */
@media (max-width: 1100px){
  .categories__grid{ grid-template-columns:repeat(2, 1fr); }
  .why__grid{ grid-template-columns:repeat(2, 1fr); }
  .cinematic__vehicle{ opacity:.55; }
}

@media (max-width: 920px){
  /* Menú móvil */
  .nav{
    position:fixed; inset:0; z-index:910;
    flex-direction:column; justify-content:center; align-items:center; gap:2.4rem;
    background:rgba(5,5,5,.96); backdrop-filter:blur(16px);
    clip-path:circle(0% at calc(100% - 3rem) 3rem);
    transition:clip-path .65s cubic-bezier(.7,0,.2,1);
    visibility:hidden;
  }
  .nav.is-open{ clip-path:circle(140% at calc(100% - 3rem) 3rem); visibility:visible; }
  .nav__list{ flex-direction:column; text-align:center; gap:1.4rem; }
  .nav__link{ font-size:1.5rem; }
  .hamburger{ display:flex; }
  body.nav-locked{ overflow:hidden; }

  /* FIX móvil: sin desplazamientos laterales que ensanchen la página */
  [data-anim="slide-right"],
  [data-anim="slide-left"]{ transform:translateY(46px); }

  .about__grid{ grid-template-columns:1fr; min-height:0; }
  .about__media{ min-height:46vh; }
  .about__media::after{ background:linear-gradient(180deg, transparent 55%, var(--black-deep) 100%); }
  .parts__grid{ grid-template-columns:1fr; }
  .contact__grid{ grid-template-columns:1fr; }
  .numbers__grid{ grid-template-columns:repeat(2, 1fr); gap:2.5rem 1.5rem; }
  .numbers__item:nth-child(3)::before{ display:none; }
  .footer__grid{ grid-template-columns:1fr 1fr; }
}

@media (max-width: 640px){
  .categories__grid{ grid-template-columns:1fr; }
  .why__grid{ grid-template-columns:1fr; }
  .field--half{ grid-column:1 / -1; }
  .footer__grid{ grid-template-columns:1fr; }
  .section__head--row{ align-items:flex-start; flex-direction:column; }
  .hero{ padding-block:7rem 6rem; }
  .hero__actions .btn{ width:100%; }
  .cinematic{ min-height:70vh; }
  .cinematic__vehicle{ width:78vw; right:-14%; opacity:.4; }
  .whatsapp-float{ width:52px; height:52px; right:1rem; bottom:1rem; }
  .back-top{ right:1.1rem; bottom:5.6rem; }
}

/* ---------- 19. ACCESIBILIDAD / REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  [data-anim], .reveal-load{ opacity:1 !important; transform:none !important; clip-path:none !important; }
  .hero__title-mask > span{ transform:none; }
  .hero__line{ width:200px; }
  .cinematic__road{ transform:scaleX(1); }
  .cursor-dot,.cursor-ring{ display:none; }
}