/* ==========================================================================
   MORFO — Concesionario de automóviles de lujo
   style.css — Diseño y animaciones
   ========================================================================== */

/* ---------- 1. VARIABLES ---------- */
:root{
  /* Colores — negro / blanco / grafito / plata */
  --c-black:        #050505;
  --c-black-soft:   #0b0b0c;
  --c-graphite:     #141416;
  --c-graphite-2:   #1e1f22;
  --c-line:         rgba(255,255,255,.1);
  --c-line-strong:  rgba(255,255,255,.22);
  --c-white:        #f6f6f4;
  --c-off-white:    rgba(246,246,244,.72);
  --c-silver:       #c7c9cc;
  --c-chrome:       #9a9ea3;
  --c-accent:       #dfe3e6;      /* acento cromado, casi blanco */
  --c-neon:         #7c3aed;      /* violeta oscuro para el resplandor neón del hero */
  --c-glow:         rgba(255,255,255,.35);
  --c-error:        #e5484d;
  --c-success:      #7fd9a8;

  /* Tipografía */
  --font-display: 'Space Grotesk', 'Inter', sans-serif;
  --font-body:    'Inter', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  /* Espaciado fluido */
  --gutter: clamp(20px, 5vw, 64px);
  --container: 1440px;
  --section-pad: clamp(72px, 12vw, 160px);

  /* Movimiento */
  --ease: cubic-bezier(.16,1,.3,1);
  --ease-soft: cubic-bezier(.22,.61,.36,1);
  --dur-fast: .25s;
  --dur-med: .5s;
  --dur-slow: .9s;

  --radius: 2px;
}

/* ---------- 2. RESET ---------- */
*, *::before, *::after{ box-sizing: border-box; margin:0; padding:0; }
html{ scroll-behavior: smooth; }
html, body{ overflow-x: hidden; max-width: 100%; }
body{
  background: var(--c-black);
  color: var(--c-white);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
ul, li{ list-style:none; }
button, select, input, textarea{ font: inherit; color: inherit; background: none; border: none; }
button{ cursor: pointer; }
h1,h2,h3,h4{ font-family: var(--font-display); font-weight: 500; letter-spacing: -0.01em; }
:focus-visible{ outline: 2px solid var(--c-white); outline-offset: 3px; }
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:10000;
  background:var(--c-white); color:var(--c-black); padding: 12px 20px;
}
.skip-link:focus{ left: 16px; top: 16px; }

section{ position: relative; padding: var(--section-pad) var(--gutter); }

/* ---------- 3. UTILIDADES ---------- */
.eyebrow{
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--c-chrome);
  margin-bottom: 18px;
  display:block;
}
.mono-tag{
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .1em;
  color: var(--c-chrome);
  display:block;
  margin-bottom: 16px;
}
.section-title{
  font-size: clamp(1.9rem, 4.6vw, 3.4rem);
  line-height: 1.08;
  margin-bottom: 20px;
  max-width: 18ch;
}
.section-sub{
  color: var(--c-off-white);
  max-width: 46ch;
  font-size: clamp(.95rem, 1.4vw, 1.1rem);
}
.section-sub code, .catalog-empty-note code{
  font-family: var(--font-mono);
  font-size: .82em;
  background: var(--c-graphite-2);
  padding: .1em .4em;
  border: 1px solid var(--c-line);
}
.section-head{ max-width: 900px; margin-bottom: clamp(40px, 6vw, 72px); }
.italic-serif{ font-style: italic; font-weight: 300; color: var(--c-chrome); }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding: 16px 34px;
  font-family: var(--font-body);
  font-size: .92rem;
  font-weight: 500;
  letter-spacing: .02em;
  border: 1px solid transparent;
  border-radius: var(--radius);
  transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
  white-space: nowrap;
  min-height: 44px;
}
.btn-solid{ background: var(--c-white); color: var(--c-black); }
.btn-solid:hover{ background: var(--c-accent); transform: translateY(-2px); }
.btn-ghost{ border-color: rgba(255,255,255,.5); color: var(--c-white); }
.btn-ghost:hover{ border-color: var(--c-white); background: rgba(255,255,255,.06); transform: translateY(-2px); }
.btn-outline{ border-color: var(--c-line-strong); color: var(--c-white); }
.btn-outline:hover{ border-color: var(--c-white); background: rgba(255,255,255,.05); }
.btn-sm{ padding: 10px 20px; font-size: .82rem; }

.link-arrow{
  display:inline-flex; align-items:center; gap:8px; font-weight:500;
  border-bottom: 1px solid var(--c-line-strong); padding-bottom: 6px;
  transition: gap var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.link-arrow:hover{ gap: 14px; border-color: var(--c-white); }
.link-arrow svg{ fill:none; }

.reveal-up{ opacity: 1; transition: opacity .8s var(--ease), transform .8s var(--ease); }
html:not(.reduced-motion) .reveal-up{ opacity: 0; transform: translateY(24px); }
html:not(.reduced-motion) .reveal-up.in-view{ opacity: 1; transform: translateY(0); }
html:not(.reduced-motion) .reveal-up.gsap-managed{ transition: none; }

/* ---------- 4. CURSOR / GRAIN / SCROLL PROGRESS ---------- */
.cursor{
  position: fixed; top:0; left:0; width:0; height:0; pointer-events:none; z-index: 9999;
  mix-blend-mode: difference;
}
.cursor-dot, .cursor-ring{
  position:absolute; top:0; left:0; border-radius:50%;
  transform: translate(-50%,-50%);
  transition: width var(--dur-fast) var(--ease), height var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.cursor-dot{ width:6px; height:6px; background:var(--c-white); }
.cursor-ring{ width:36px; height:36px; border:1px solid var(--c-white); }
.cursor-label{
  position:absolute; top:0; left:0; transform: translate(-50%,-50%);
  font-family: var(--font-mono); font-size:.6rem; letter-spacing:.15em;
  color:var(--c-white); opacity:0; transition: opacity var(--dur-fast) var(--ease);
  white-space:nowrap;
}
body.cursor-active{ cursor:none; }
body.cursor-active a, body.cursor-active button, body.cursor-active select, body.cursor-active input, body.cursor-active textarea{ cursor:none; }
.cursor.is-active .cursor-ring{ width:64px; height:64px; }
.cursor.is-label .cursor-label{ opacity:1; }
.cursor.is-label .cursor-dot{ opacity:0; }

.grain{
  position: fixed; inset: -60px; z-index: 3; pointer-events:none;
  opacity: .045; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 220px;
}
.scroll-progress{
  position: fixed; top:0; left:0; height: 2px; width: 0%;
  background: var(--c-white); z-index: 9998;
}

/* ---------- 5. NAVBAR ---------- */
.navbar{
  position: fixed; top:0; left:0; width:100%; z-index: 500;
  padding: 26px var(--gutter);
  transition: padding var(--dur-med) var(--ease), background var(--dur-med) var(--ease), backdrop-filter var(--dur-med) var(--ease), border-color var(--dur-med) var(--ease);
  border-bottom: 1px solid transparent;
}
.navbar.scrolled{
  padding: 14px var(--gutter);
  background: rgba(5,5,5,.72);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom-color: var(--c-line);
}
.navbar-inner{
  max-width: var(--container); margin: 0 auto;
  display:flex; align-items:center; justify-content:space-between; gap: 24px;
}
.navbar-logo{
  font-family: var(--font-display); font-weight:600; font-size: 1.15rem;
  letter-spacing: .12em;
}
.navbar-links{ display:none; align-items:center; gap: clamp(20px,2.4vw,40px); }
.navbar-links a{
  position:relative; font-size: .88rem; color: var(--c-off-white);
  padding: 6px 0; transition: color var(--dur-fast) var(--ease);
}
.navbar-links a::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:1px; background: var(--c-white);
  transition: width var(--dur-fast) var(--ease);
}
.navbar-links a:hover{ color: var(--c-white); }
.navbar-links a:hover::after{ width:100%; }
.navbar-cta{ display:none; }

.menu-toggle{
  width: 44px; height:44px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  z-index: 600;
}
.menu-toggle span{ width:24px; height:1.5px; background:var(--c-white); transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease); }
.menu-toggle.active span:nth-child(1){ transform: translateY(7.5px) rotate(45deg); }
.menu-toggle.active span:nth-child(2){ opacity:0; }
.menu-toggle.active span:nth-child(3){ transform: translateY(-7.5px) rotate(-45deg); }

.mobile-menu{
  position: fixed; inset:0; background: var(--c-black); z-index: 550;
  display:flex; flex-direction:column; justify-content:space-between;
  padding: 26px var(--gutter) 48px;
  transform: translateY(-100%);
  transition: transform .6s var(--ease);
}
.mobile-menu.active{ transform: translateY(0); }
.mobile-menu-head{ display:flex; align-items:center; justify-content:space-between; }
.menu-close{ width:44px; height:44px; display:flex; align-items:center; justify-content:center; }
.mobile-menu-links{ display:flex; flex-direction:column; gap: 6px; }
.mobile-menu-links a{
  font-family: var(--font-display); font-size: clamp(2rem, 10vw, 3.2rem);
  padding: 10px 0; border-bottom: 1px solid var(--c-line);
  opacity:0; transform: translateY(20px);
  transition: opacity .5s var(--ease), transform .5s var(--ease), color var(--dur-fast);
}
.mobile-menu.active .mobile-menu-links a{ opacity:1; transform:translateY(0); }
.mobile-menu-links a:hover{ color: var(--c-chrome); }
.mobile-menu-cta{ align-self: flex-start; }

/* ---------- 6. HERO ---------- */
.hero{
  height: 100svh; min-height: 560px; padding:0; overflow:hidden;
  display:flex; align-items:center;
}
.hero-bg{ position:absolute; inset:0; z-index:0; }
.hero-img{
  width:100%; height:100%; object-fit:cover; object-position: 55% 35%;
  transform: scale(1.12);
  animation: heroKen 22s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes heroKen{ from{ transform: scale(1.12) translate(0,0);} to{ transform: scale(1.22) translate(-1.2%, -1%);} }
.hero-blur{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  backdrop-filter: blur(24px) saturate(1.05);
  -webkit-backdrop-filter: blur(24px) saturate(1.05);
  mask-image: linear-gradient(to right, #000 0%, #000 34%, transparent 58%);
  -webkit-mask-image: linear-gradient(to right, #000 0%, #000 34%, transparent 58%);
}
.hero-scrim{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(5,5,5,.55) 0%, rgba(5,5,5,.15) 32%, rgba(5,5,5,.35) 62%, rgba(5,5,5,.96) 100%);
}
.hero-vignette{
  position:absolute; inset:0;
  box-shadow: inset 0 0 220px 60px rgba(0,0,0,.85);
  pointer-events:none;
}
.hero-particles{ position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
.hero-particle{
  position:absolute; bottom:-10px; border-radius:50%;
  background: radial-gradient(circle, rgba(255,255,255,.55), transparent 70%);
  filter: blur(.5px);
}

.hero-content{
  position:relative; z-index:2; width:100%; max-width: min(760px, 90vw); margin: 0;
  padding: 0 var(--gutter);
}
.hero-title{
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.8rem, 6.2vw, 4.4rem);
  line-height: 1.08; letter-spacing: -0.01em;
  margin-bottom: 22px;
  color: var(--c-white);
  text-shadow: 0 2px 4px rgba(0,0,0,.9), 0 10px 40px rgba(0,0,0,.85);
  -webkit-text-stroke: 1px rgba(0,0,0,.35);
}
.hero-title .line{ display:block; overflow:hidden; }
.hero-title .word{ display:inline-block; }
.hero-title .accent-word{
  color: #fff; font-style: italic; font-weight: 700;
  text-shadow:
    0 0 4px #fff,
    0 0 14px #fff,
    0 0 26px var(--c-neon),
    0 0 48px var(--c-neon),
    0 0 90px var(--c-neon);
  -webkit-text-stroke: 0;
}
.hero-subtitle{
  max-width: 46ch; font-size: clamp(1.05rem, 1.8vw, 1.3rem); margin-bottom: 36px;
  color: var(--c-white);
  -webkit-text-stroke: .6px var(--c-black);
  text-shadow: 0 1px 2px rgba(0,0,0,.9), 0 1px 10px rgba(0,0,0,.8);
}
.hero-actions{ display:flex; flex-wrap:wrap; gap: 16px; }

.hero-stats{
  position:absolute; left:0; right:0; bottom: 0; z-index:2;
  display:flex; align-items:center; gap: clamp(16px,3vw,40px);
  padding: 22px var(--gutter);
  border-top: 1px solid var(--c-line);
  background: linear-gradient(0deg, rgba(0,0,0,.55), transparent);
  max-width: var(--container); margin: 0 auto; width:100%;
  overflow-x:auto;
}
.hero-stat{ display:flex; flex-direction:column; gap:2px; white-space:nowrap; }
.hero-stat-num{ font-family: var(--font-mono); font-size: clamp(1.2rem,2vw,1.6rem); font-weight:500; }
.hero-stat-label{ font-size:.72rem; letter-spacing:.06em; color: var(--c-chrome); text-transform:uppercase; }
.hero-stat-divider{ width:1px; height:26px; background:var(--c-line); }

.scroll-cue{
  position:absolute; right: var(--gutter); bottom: 130px; z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:10px;
}
.scroll-cue span{ font-family: var(--font-mono); font-size:.65rem; letter-spacing:.2em; color: var(--c-chrome); writing-mode: vertical-rl; }
.scroll-cue-line{ width:1px; height:50px; background: var(--c-line); position:relative; overflow:hidden; }
.scroll-cue-line i{ position:absolute; top:-50%; left:0; width:100%; height:50%; background:var(--c-white); animation: cueMove 1.8s ease-in-out infinite; }
@keyframes cueMove{ 0%{ top:-50%;} 100%{ top:100%;} }

/* ---------- 7. EXPERIENCIA INTERACTIVA ---------- */
.scene3d{
  background: var(--c-black-soft);
  overflow:hidden;
}
.scene3d-head{ max-width:900px; margin: 0 auto clamp(20px,4vw,40px); text-align:center; }
.scene3d-head .section-title{ margin: 0 auto; }
.scene3d-showcase{
  display:grid; gap: clamp(32px,6vw,80px);
  align-items:center;
  max-width: var(--container); margin: 0 auto;
}
.scene3d-media{
  position:relative; overflow:hidden; aspect-ratio: 4/3;
  border: 1px solid var(--c-line); background: var(--c-graphite);
}
.scene3d-media img{
  width:100%; height:100%; object-fit:cover; object-position: 50% 55%;
  filter: contrast(1.08) brightness(.96);
}
.scene3d-media-tag{
  position:absolute; left:0; right:0; bottom:0;
  padding: 14px var(--gutter);
  background: linear-gradient(0deg, rgba(5,5,5,.85) 0%, transparent 100%);
  font-family: var(--font-mono); font-size:.7rem; letter-spacing:.16em; color: var(--c-chrome);
}
.scene3d-stats{ display:flex; flex-direction:column; gap: clamp(20px,3vw,30px); }
.skillbar-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom: 10px; }
.skillbar-label{ font-size: 1rem; letter-spacing:.02em; }
.skillbar-value{ font-family: var(--font-mono); font-size:.85rem; color: var(--c-chrome); }
.skillbar-track{ height: 3px; background: var(--c-line); border-radius: 999px; overflow:hidden; }
.skillbar-fill{
  height:100%; width:0; border-radius: 999px;
  background: linear-gradient(90deg, var(--c-chrome), var(--c-white));
  box-shadow: 0 0 12px rgba(255,255,255,.35);
  transition: width 1.3s var(--ease);
}

/* ---------- 8. EDITORIAL ---------- */
.editorial{
  display:grid; gap: clamp(32px,6vw,80px);
  align-items:center;
}
.editorial-media{ overflow:hidden; aspect-ratio: 4/5; clip-path: inset(0 0 0 0); }
.editorial-img{
  width:100%; height:100%; object-fit:cover; object-position: 78% 42%;
  filter: grayscale(.25) contrast(1.15) brightness(.85);
  transform: scale(1.15);
}
.editorial-copy{ max-width: 46ch; }
.editorial-text{ color: var(--c-off-white); margin-bottom: 26px; }

/* ---------- 9. CATÁLOGO ---------- */
.catalog{ background: var(--c-black); }
.catalog-filters{
  display:flex; flex-wrap:wrap; gap: 12px; margin-bottom: 20px;
}
.catalog-filters select{
  border: 1px solid var(--c-line-strong); padding: 12px 16px; min-width: 150px;
  background: var(--c-graphite); font-size:.85rem;
}
.filter-reset{
  font-size:.8rem; color: var(--c-chrome); border-bottom: 1px solid transparent; padding: 12px 4px;
}
.filter-reset:hover{ color:var(--c-white); border-color: var(--c-line-strong); }
.catalog-empty-note{
  font-size:.8rem; color: var(--c-chrome); margin-bottom: 36px; max-width: 60ch;
}
.catalog-grid{
  display:grid; grid-template-columns: 1fr; gap: 20px;
}
.catalog-card{
  border: 1px solid var(--c-line); background: var(--c-graphite);
  overflow:hidden; position:relative;
  transition: transform var(--dur-med) var(--ease), border-color var(--dur-fast);
}
.catalog-card:hover{ transform: translateY(-6px); border-color: var(--c-line-strong); }
.catalog-card-media{
  position:relative; aspect-ratio: 16/10; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.catalog-card-media img{
  width:100%; height:100%; object-fit:cover;
  transition: transform var(--dur-slow) var(--ease), filter var(--dur-slow) var(--ease);
  filter: brightness(.92) saturate(1.02);
}
.catalog-card:hover .catalog-card-media img{ transform: scale(1.08); filter: brightness(1); }
.placeholder-art{
  width:100%; height:100%; position:relative; display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.placeholder-art svg{ width: 62%; opacity:.9; transition: transform var(--dur-slow) var(--ease); }
.catalog-card:hover .placeholder-art svg{ transform: scale(1.06) translateX(6px); }
.placeholder-art::after{
  content:''; position:absolute; inset:0;
  background: repeating-linear-gradient(115deg, rgba(255,255,255,.035) 0 2px, transparent 2px 40px);
}
.pa-1{ background: linear-gradient(135deg,#1c1d20,#050505); color:#e7e8ea; }
.pa-2{ background: linear-gradient(135deg,#26282b,#0a0a0b); color:#c9cbce; }
.pa-3{ background: linear-gradient(135deg,#111214,#000); color:#f2f2f0; }
.pa-4{ background: linear-gradient(135deg,#202124,#08090a); color:#d7d9db; }
.pa-5{ background: linear-gradient(135deg,#17181a,#020202); color:#e2e3e5; }
.catalog-tag{
  position:absolute; top:14px; left:14px; z-index:2;
  font-family: var(--font-mono); font-size:.65rem; letter-spacing:.12em; text-transform:uppercase;
  padding: 6px 10px; background: rgba(5,5,5,.6); border:1px solid var(--c-line-strong);
  backdrop-filter: blur(6px);
}
.catalog-card-body{ padding: 20px 22px 24px; }
.catalog-card-brand{ font-family: var(--font-mono); font-size:.72rem; letter-spacing:.15em; color: var(--c-chrome); text-transform:uppercase; }
.catalog-card-model{ font-family: var(--font-display); font-size: 1.3rem; margin: 4px 0 14px; }
.catalog-card-specs{
  display:flex; flex-wrap:wrap; gap: 8px 16px; font-size:.78rem; color: var(--c-off-white);
  border-top:1px solid var(--c-line); padding-top: 12px; margin-bottom: 16px;
}
.catalog-card-specs span{ display:flex; align-items:center; gap:6px; }
.catalog-card-specs span::before{ content:''; width:3px; height:3px; background: var(--c-chrome); border-radius:50%; }
.catalog-card-footer{ display:flex; align-items:center; justify-content:space-between; gap: 12px; }
.catalog-card-price{ font-family: var(--font-mono); font-size: .92rem; }
.catalog-card-cta{
  display:flex; align-items:center; gap:8px; font-size:.85rem; font-weight:500;
  padding-bottom: 2px; border-bottom: 1px solid var(--c-line-strong);
  transition: gap var(--dur-fast) var(--ease);
}
.catalog-card:hover .catalog-card-cta{ gap:14px; }
.catalog-empty-state{ text-align:center; padding: 60px 0; color: var(--c-chrome); }
.catalog-footer{ text-align:center; margin-top: 44px; }

/* ---------- 11. MARCAS ---------- */
.brands{ background: var(--c-black-soft); overflow:hidden; }
.brands-track-wrap{ overflow:hidden; border-top:1px solid var(--c-line); border-bottom:1px solid var(--c-line); }
.brands-track{ display:flex; width:max-content; animation: brandsScroll 34s linear infinite; }
.brands-track:hover{ animation-play-state: paused; }
@keyframes brandsScroll{ from{ transform: translateX(0);} to{ transform: translateX(-50%);} }
.brand-item{
  display:flex; align-items:center; justify-content:center;
  padding: clamp(28px,5vw,56px) clamp(28px,4vw,56px);
  font-family: var(--font-display); font-size: clamp(1.3rem,2.4vw,2rem);
  color: var(--c-chrome); border-right: 1px solid var(--c-line);
  white-space:nowrap; transition: color var(--dur-fast) var(--ease);
}
.brand-item:hover{ color: var(--c-white); }
.brands-note{ text-align:center; margin-top: 20px; font-size:.78rem; color: var(--c-chrome); }

/* ---------- 12. PROCESO ---------- */
.process-line{
  position:relative; display:grid; grid-template-columns: 1fr; gap: 40px;
  max-width: var(--container); margin: 0 auto;
}
.process-line::before{
  content:''; position:absolute; top:0; bottom:0; left: 11px; width:1px; background: var(--c-line);
}
.process-line-fill{
  position:absolute; top:0; left:11px; width:1px; height:0; background: var(--c-white);
  transition: height .2s linear;
}
.process-step{ padding-left: 44px; position:relative; }
.process-num{ font-family: var(--font-mono); font-size:.9rem; color: var(--c-chrome); display:block; margin-bottom:10px; }
.process-step h3{ font-size:1.3rem; margin-bottom: 8px; }
.process-step p{ color: var(--c-off-white); max-width: 40ch; }

/* ---------- 13. SERVICIOS ---------- */
.services-grid{ display:grid; grid-template-columns: 1fr; gap: 1px; background: var(--c-line); border:1px solid var(--c-line); }
.service-card{ background: var(--c-black); padding: 32px clamp(22px,3vw,36px); transition: background var(--dur-fast) var(--ease); }
.service-card:hover{ background: var(--c-graphite); }
.service-index{ font-family: var(--font-mono); color: var(--c-chrome); font-size:.8rem; }
.service-card h3{ font-size: 1.15rem; margin: 14px 0 10px; }
.service-card p{ color: var(--c-off-white); font-size:.92rem; }

/* ---------- 14. FORMULARIOS (valoración / prueba / contacto) ---------- */
.valuation, .testdrive, .contact{ background: var(--c-black-soft); }
.valuation-copy, .testdrive-copy{ max-width: 640px; margin: 0 auto clamp(32px,5vw,56px); text-align:center; }
.valuation-copy .section-title, .testdrive-copy .section-title{ margin: 0 auto 20px; }
.valuation-copy .section-sub, .testdrive-copy .section-sub{ margin: 0 auto; }

.form-card{ max-width: 760px; margin: 0 auto; }
.form-card-wide{ max-width: 900px; }
.form-grid{ display:grid; grid-template-columns: 1fr; gap: 20px; margin-bottom: 30px; }
.form-field{ display:flex; flex-direction:column; gap:8px; position:relative; }
.form-field-wide{ grid-column: 1 / -1; }
.form-field label{ font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; color: var(--c-chrome); }
.form-field input, .form-field select, .form-field textarea{
  border: 1px solid var(--c-line-strong); background: transparent; padding: 14px 4px;
  font-size: .95rem; transition: border-color var(--dur-fast) var(--ease);
  border-radius:0; min-height:44px;
}
.form-field select{ padding: 14px 4px; background: var(--c-black); }
.form-field textarea{ resize: vertical; min-height: 90px; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{ border-color: var(--c-white); }
.form-field.field-error input, .form-field.field-error select, .form-field.field-error textarea{ border-color: var(--c-error); }
.form-error{ font-size:.75rem; color: var(--c-error); min-height: 1em; display:block; }
.form-submit{ position:relative; width:100%; }
.form-submit .btn-spinner{ display:none; width:16px; height:16px; border-radius:50%; border:2px solid rgba(5,5,5,.3); border-top-color: var(--c-black); animation: spin .7s linear infinite; }
.form-submit.loading .btn-text{ opacity:.4; }
.form-submit.loading .btn-spinner{ display:inline-block; }
@keyframes spin{ to{ transform: rotate(360deg); } }
.form-status{ margin-top: 16px; font-size:.88rem; min-height: 1.2em; }
.form-status.success{ color: var(--c-success); }
.form-status.error{ color: var(--c-error); }

/* ---------- 15. SOBRE NOSOTROS ---------- */
.about{ text-align:center; }
.about-copy{ max-width: 700px; margin: 0 auto clamp(40px,6vw,72px); }
.about-copy .section-title{ margin: 0 auto 20px; }
.about-copy .section-sub{ margin: 0 auto; }
.about-stats{ display:grid; grid-template-columns: repeat(2,1fr); gap: 32px; max-width: var(--container); margin: 0 auto; }
.about-stat{ display:flex; flex-direction:column; gap:6px; }
.about-stat-num{ font-family: var(--font-mono); font-size: clamp(2rem,5vw,3.2rem); }
.about-stat-label{ font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; color: var(--c-chrome); }

/* ---------- 16. GALERÍA + LIGHTBOX ---------- */
.gallery-carousel{
  position:relative; height: clamp(320px, 42vw, 480px);
  display:flex; align-items:center; justify-content:center;
  perspective: 1600px; -webkit-perspective: 1600px;
  touch-action: pan-y;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%);
}
.gallery-carousel-stage{
  position:relative; width:2px; height:2px;
  transform-style: preserve-3d;
  cursor: grab;
}
.gallery-carousel-stage.dragging{ cursor: grabbing; }
.gallery-c-item{
  position:absolute; top:50%; left:50%;
  width: var(--item-w); height: var(--item-h);
  margin: calc(var(--item-h) / -2) 0 0 calc(var(--item-w) / -2);
  transform-style: preserve-3d;
}
.gallery-c-item-inner{
  position:relative; width:100%; height:100%; overflow:hidden; cursor:pointer;
  background: var(--c-graphite);
  box-shadow: 0 20px 50px rgba(0,0,0,.55);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.gallery-c-item:hover .gallery-c-item-inner{
  transform: scale(1.14);
  box-shadow: 0 30px 70px rgba(0,0,0,.7), 0 0 44px rgba(124,58,237,.3);
}
.gallery-c-item-inner img{ width:100%; height:100%; object-fit:cover; display:block; }
.gallery-c-item-label{
  position:absolute; left:0; right:0; bottom:0; padding: 14px;
  background: linear-gradient(0deg, rgba(0,0,0,.8), transparent);
  font-size:.72rem; letter-spacing:.05em; opacity:0; transform: translateY(6px);
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
  pointer-events:none;
}
.gallery-c-item:hover .gallery-c-item-label{ opacity:1; transform:translateY(0); }

.lightbox{
  position:fixed; inset:0; z-index: 2000; background: rgba(3,3,3,.96);
  display:flex; align-items:center; justify-content:center;
  backdrop-filter: blur(6px);
}
.lightbox[hidden]{ display:none; }
.lightbox img{ max-width: min(88vw, 1100px); max-height: 82vh; object-fit:contain; }
.lightbox-close{ position:absolute; top: 22px; right: 22px; width:44px; height:44px; display:flex; align-items:center; justify-content:center; }
.lightbox-arrow{ position:absolute; top:50%; transform: translateY(-50%); width:52px; height:52px; display:flex; align-items:center; justify-content:center; border:1px solid var(--c-line-strong); border-radius:50%; }
.lightbox-arrow:hover{ background: rgba(255,255,255,.08); }
.lightbox-prev{ left: clamp(10px,3vw,40px); }
.lightbox-next{ right: clamp(10px,3vw,40px); }
.lightbox-counter{ position:absolute; bottom: 24px; left:50%; transform: translateX(-50%); font-family: var(--font-mono); font-size:.8rem; color: var(--c-chrome); }

/* ---------- 18. UBICACIÓN ---------- */
.location{ display:grid; grid-template-columns: 1fr; gap: clamp(32px,5vw,60px); background: var(--c-black); }
.location-list{ display:flex; flex-direction:column; gap: 16px; margin: 26px 0 34px; }
.location-list li{ display:flex; flex-direction:column; gap:2px; border-top:1px solid var(--c-line); padding-top: 12px; }
.location-list strong{ font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color: var(--c-chrome); }
.location-actions{ display:flex; flex-wrap:wrap; gap: 12px; }
.location-map{ min-height: 320px; border: 1px solid var(--c-line); }
.location-map iframe{ width:100%; height: 100%; min-height: 320px; border:0; filter: grayscale(.4) invert(.92) contrast(.9); }
.map-note{ font-size:.72rem; color: var(--c-chrome); margin-top: 10px; }

/* ---------- 19. CTA FINAL ---------- */
.cta-final{ padding:0; height: 90svh; min-height: 480px; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.cta-final-bg{ position:absolute; inset:0; }
.cta-final-bg img{ width:100%; height:100%; object-fit:cover; object-position: 30% 40%; transform: scale(1.18); filter: brightness(.6); }
.cta-final-content{ position:relative; z-index:1; text-align:center; max-width: 760px; padding: 0 var(--gutter); }
.cta-final-content h2{ font-size: clamp(2rem,5.5vw,3.6rem); margin-bottom: 18px; line-height:1.1; }
.cta-final-content p{ color: var(--c-off-white); margin-bottom: 34px; font-size: clamp(1rem,1.6vw,1.15rem); }
.cta-final-content .hero-actions{ justify-content:center; }

/* ---------- 20. FOOTER ---------- */
.footer{ background: var(--c-black-soft); border-top: 1px solid var(--c-line); padding: 64px var(--gutter) 0; }
.footer-top{ display:grid; grid-template-columns: 1fr; gap: 40px; max-width: var(--container); margin: 0 auto; padding-bottom: 48px; }
.footer-brand p{ color: var(--c-chrome); margin-top: 12px; max-width: 34ch; font-size:.9rem; }
.footer-col h4{ font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color: var(--c-chrome); margin-bottom: 16px; }
.footer-col{ display:flex; flex-direction:column; gap: 10px; font-size:.92rem; }
.footer-col a{ color: var(--c-off-white); transition: color var(--dur-fast); }
.footer-col a:hover{ color: var(--c-white); }
.footer-social{ display:flex; flex-direction:column; gap:10px; }

.footer-marquee{ border-top:1px solid var(--c-line); border-bottom:1px solid var(--c-line); overflow:hidden; padding: 18px 0; }
.footer-marquee-track{ display:flex; width:max-content; animation: brandsScroll 18s linear infinite; font-family: var(--font-display); font-size: clamp(1.4rem,4vw,2.6rem); color: var(--c-graphite-2); -webkit-text-stroke: 1px var(--c-line-strong); }

.footer-bottom{
  max-width: var(--container); margin: 0 auto; padding: 22px 0;
  display:flex; flex-wrap:wrap; gap: 14px; align-items:center; justify-content:space-between;
  font-size:.78rem; color: var(--c-chrome);
}
/* ---------- 21. BACK TO TOP ---------- */
.back-to-top{
  position: fixed; right: 20px; bottom: 20px; z-index: 400;
  width: 48px; height:48px; border-radius:50%; border: 1px solid var(--c-line-strong);
  background: rgba(5,5,5,.7); backdrop-filter: blur(8px);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transform: translateY(10px);
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.back-to-top.visible{ opacity:1; visibility:visible; transform:translateY(0); }
.back-to-top svg{ fill:none; }
.back-to-top:hover{ border-color: var(--c-white); }

/* ==========================================================================
   RESPONSIVE — mobile-first enhancements
   ========================================================================== */
@media (min-width: 640px){
  .about-stats{ grid-template-columns: repeat(4,1fr); }
  .catalog-grid{ grid-template-columns: repeat(2,1fr); }
  .services-grid{ grid-template-columns: repeat(2,1fr); }
  .process-line{ grid-template-columns: repeat(2,1fr); gap: 48px 40px; }
  .footer-top{ grid-template-columns: 1.3fr 1fr 1fr; }
}

@media (min-width: 860px){
  .editorial{ grid-template-columns: 1fr 1fr; }
  .scene3d-showcase{ grid-template-columns: 1fr 1fr; }
  .location{ grid-template-columns: 1fr 1fr; }
  .form-grid{ grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1024px){
  .navbar-links{ display:flex; }
  .navbar-cta{ display:inline-flex; }
  .menu-toggle{ display:none; }
  .mobile-menu{ display:none; }

  .catalog-grid{ grid-template-columns: repeat(3,1fr); }
  .catalog-grid .catalog-card:nth-child(3n+1){ grid-row: span 1; }
  .services-grid{ grid-template-columns: repeat(3,1fr); }
  .process-line{ grid-template-columns: repeat(4,1fr); }
  .process-line::before, .process-line-fill{ top: 11px; left:0; right:0; bottom:auto; height:1px; width:0; }
  .process-line-fill{ width:0; height:1px; }
  .process-step{ padding-left:0; padding-top: 44px; }
  .process-line::before{ width:100%; }

  .footer-top{ grid-template-columns: 1.4fr .8fr .8fr .8fr; }
}

@media (min-width: 1440px){
  .catalog-grid{ grid-template-columns: repeat(4,1fr); }
}

/* Evitar scroll horizontal accidental en cualquier viewport */
.hero-stats::-webkit-scrollbar{ display:none; }

/* ---------- 22. PREFERS-REDUCED-MOTION ---------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .hero-img{ animation:none; transform: scale(1.05); }
  .scroll-cue-line i{ animation:none; }
  .brands-track, .footer-marquee-track{ animation:none; }
  *{ transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
html.reduced-motion .hero-img{ animation:none; transform:scale(1.05); }
html.reduced-motion .brands-track, html.reduced-motion .footer-marquee-track{ animation:none; }
html.reduced-motion .scroll-cue-line i{ animation:none; }