/* =========================================================
   AXYS Wheels — Stylesheet unico (home + catalogo + fichas)
   Dark editorial. Sin frameworks, sin build.
   ========================================================= */

/* ---------- Tokens ---------- */
:root {
  --bg:            #0a0a0a;
  --bg-elevated:   #111111;
  --surface:       #161616;
  --text:          #f2f2f2;
  --text-muted:    #8a8a8a;
  --text-dim:      #7a7a7a;   /* 4.6:1 sobre --bg (antes #5a5a5a = 2.9:1) */
  --border:        rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);
  --accent:        #d4d4d4;
  --wa:            #25d366;

  --font-display:  'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:     'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  --text-label:    clamp(0.7rem,  0.66rem + 0.12vw, 0.75rem);
  --text-body:     clamp(0.95rem, 0.9rem  + 0.2vw,  1.05rem);
  --text-lead:     clamp(1.35rem, 1.1rem  + 1vw,   2rem);
  --text-h2:       clamp(2.25rem, 1.5rem  + 3vw,   4.5rem);
  --text-display:  clamp(2.75rem, 1rem    + 8vw,   9rem);

  --space-xs:      clamp(0.5rem, 0.4rem + 0.4vw, 0.75rem);
  --space-sm:      clamp(1rem,   0.8rem + 0.8vw, 1.5rem);
  --space-md:      clamp(2rem,   1.5rem + 2vw,   3.5rem);
  --space-lg:      clamp(4rem,   3rem   + 4vw,   7rem);
  --space-xl:      clamp(5rem,   3.5rem + 6vw,   10rem);

  --duration-fast: 200ms;
  --duration:      450ms;
  --ease:          cubic-bezier(0.16, 1, 0.3, 1);

  --gutter:        clamp(1.25rem, 0.5rem + 3vw, 3rem);
  --max-w:         1440px;
  --nav-h:         64px;
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.55;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

img,
svg {
  display: block;
  max-width: 100%;
}

a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; color: inherit; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- Utilidades ---------- */
.section-label {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--text-label);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--border);
}

.section-title {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.025em;
  color: var(--text);
  margin-top: var(--space-sm);
  max-width: 18ch;
}

.wrap {
  max-width: var(--max-w);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* Estado del modelo — un solo vocabulario en las 3 paginas */
.state {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.state::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Navegacion ---------- */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--nav-h);
  /* La barra es full-bleed pero el contenido tiene que caer sobre la misma
     linea que las secciones, que estan limitadas a --max-w y centradas. */
  padding: 1.1rem calc(max(0px, (100% - var(--max-w)) / 2) + var(--gutter));
  border-bottom: 1px solid transparent;
  transition: border-color var(--duration) var(--ease);
}

/* El desenfoque va en un pseudo-elemento, NO en .nav.
   backdrop-filter convierte al elemento en bloque contenedor de sus hijos
   position:fixed. Con el filtro puesto en .nav, el cajon del menu mobile se
   posicionaba contra la barra de 64 px en vez de contra la pantalla: quedaba
   de 81 px de alto y se veia una sola opcion por vez. */
.nav::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(10, 10, 10, 0.55);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  transition: background var(--duration) var(--ease);
}

.nav--scrolled::before { background: rgba(10, 10, 10, 0.92); }

.nav--scrolled { border-bottom-color: var(--border); }

.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--text);
}

/* El logo oficial de AXYS. Nunca reemplazarlo por un dibujo ni por texto.
   La estrella que estaba antes era un placeholder. */
.nav__logo { height: 42px; width: auto; display: block; }

/* .nav__wordmark eliminado: el wordmark viene dentro del logo oficial */

.nav__links {
  display: flex;
  gap: clamp(1rem, 0.5rem + 2vw, 2.5rem);
  align-items: center;
}

.nav__links a {
  font-family: var(--font-display);
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  position: relative;
  padding: 0.4rem 0;
  transition: color var(--duration-fast) var(--ease);
}

.nav__links a:hover,
.nav__links a:focus-visible,
.nav__links a[aria-current='page'] { color: var(--text); }

.nav__links a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background: var(--text);
  transition: width var(--duration) var(--ease);
}

.nav__links a:hover::after,
.nav__links a:focus-visible::after,
.nav__links a[aria-current='page']::after { width: 100%; }

/* El CTA vive dos veces en el marcado: uno en la barra (escritorio) y otro
   dentro del cajon (mobile). Cada uno se muestra solo donde corresponde. */
.nav__links .nav__cta { display: none; }

.nav__cta {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bg);
  background: var(--text);
  padding: 0.75rem 1.5rem;
  border: 1px solid var(--text);
  white-space: nowrap;
  transition: background var(--duration-fast) var(--ease),
              color var(--duration-fast) var(--ease);
}

.nav__cta:hover,
.nav__cta:focus-visible {
  background: transparent;
  color: var(--text);
}

/* Hamburguesa — solo mobile */
.nav__burger {
  display: none;
  width: 44px;
  height: 44px;
  margin-right: -0.5rem;
  background: none;
  border: 0;
  cursor: pointer;
  position: relative;
}

.nav__burger span {
  position: absolute;
  left: 11px;
  width: 22px;
  height: 1.5px;
  background: var(--text);
  transition: transform var(--duration) var(--ease),
              opacity var(--duration-fast) var(--ease);
}

.nav__burger span:nth-child(1) { top: 16px; }
.nav__burger span:nth-child(2) { top: 21.5px; }
.nav__burger span:nth-child(3) { top: 27px; }

.nav__burger[aria-expanded='true'] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.nav__burger[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.nav__burger[aria-expanded='true'] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

@media (max-width: 860px) {
  .nav { padding: 0.85rem var(--gutter); }
  .nav__burger { display: block; }
  .nav > .nav__cta { display: none; }

  .nav__links {
    position: fixed;
    inset: var(--nav-h) 0 0;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 0;
    padding: var(--space-sm) var(--gutter) var(--space-lg);
    background: rgba(10, 10, 10, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid var(--border);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    overflow-y: auto;
    /* visibility es discreta: si entra al shorthand, al abrir el cajon queda
       invisible la mitad de la animacion. Va con delay solo para cerrar. */
    transition: opacity var(--duration) var(--ease),
                transform var(--duration) var(--ease),
                visibility 0s linear var(--duration);
  }

  .nav__links.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity var(--duration) var(--ease),
                transform var(--duration) var(--ease),
                visibility 0s;
  }

  .nav__links a {
    font-size: 1.35rem;
    letter-spacing: 0.02em;
    text-transform: none;
    color: var(--text);
    padding: 1.15rem 0;
    border-bottom: 1px solid var(--border);
  }

  .nav__links a::after { display: none; }

  .nav__links a.nav__cta {
    display: block;
    /* .nav__links a le gana en especificidad a .nav__cta y le pintaba el texto
       de blanco sobre fondo blanco: el boton quedaba como un cuadrado vacio. */
    color: var(--bg);
    margin-top: var(--space-sm);
    text-align: center;
    font-size: 0.85rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 1.1rem 1.5rem;
    border-bottom: 1px solid var(--text);
  }
}

/* ---------- Boton flotante de WhatsApp ---------- */
.wa-float {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 45;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.9rem 1.25rem;
  background: var(--wa);
  color: #06301a;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 999px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
  transition: transform var(--duration-fast) var(--ease);
}

.wa-float:hover { transform: translateY(-2px); }
.wa-float svg { width: 20px; height: 20px; flex: none; }

@media (max-width: 560px) {
  .wa-float { padding: 0.9rem 1.1rem; font-size: 0.72rem; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 0 var(--gutter) var(--space-md);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
}

.hero__media { position: absolute; inset: 0; z-index: 0; }

.hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
  filter: saturate(0.95) contrast(1.05);
  will-change: transform;
}

.hero__vignette {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(10,10,10,0.55) 0%, rgba(10,10,10,0) 25%, rgba(10,10,10,0.15) 50%, rgba(10,10,10,0.92) 100%),
    radial-gradient(ellipse at center, rgba(10,10,10,0) 0%, rgba(10,10,10,0.35) 100%);
}

.hero__grain {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.18 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: 0.35;
  mix-blend-mode: overlay;
  pointer-events: none;
}

.hero__content {
  position: relative;
  z-index: 2;
  max-width: var(--max-w);
  width: 100%;
  margin: 0 auto;
  padding-bottom: clamp(3rem, 6vw, 6rem);
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text);
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border-strong);
  padding: 0.5rem 0.9rem;
  backdrop-filter: blur(8px);
  margin-bottom: var(--space-md);
}

.hero__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #e1e1e1;
  box-shadow: 0 0 0 2px rgba(225,225,225,0.18);
  animation: pulse 2.2s var(--ease) infinite;
}

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(225,225,225,0.18); }
  50%      { box-shadow: 0 0 0 6px rgba(225,225,225,0); }
}

.hero__title {
  font-family: var(--font-display);
  font-size: var(--text-display);
  font-weight: 500;
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--text);
  margin-bottom: var(--space-md);
  overflow-wrap: break-word;
  hyphens: none;
}

.hero__title-line { display: block; }

.hero__title-line--outline {
  color: transparent;
  -webkit-text-stroke: 1px rgba(242,242,242,0.6);
  font-weight: 300;
  font-style: italic;
}

.hero__meta {
  display: flex;
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--border-strong);
  max-width: 620px;
}

.hero__meta-label {
  display: block;
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.35rem;
}

.hero__meta-value {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-bottom: var(--space-md);
}

.btn {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 1rem 1.75rem;
  border: 1px solid var(--text);
  text-align: center;
  transition: background var(--duration-fast) var(--ease),
              color var(--duration-fast) var(--ease),
              border-color var(--duration-fast) var(--ease);
}

.btn--solid { background: var(--text); color: var(--bg); }
.btn--solid:hover, .btn--solid:focus-visible { background: transparent; color: var(--text); }

.btn--ghost {
  background: rgba(10,10,10,0.35);
  color: var(--text);
  border-color: var(--border-strong);
  backdrop-filter: blur(8px);
}
.btn--ghost:hover, .btn--ghost:focus-visible { border-color: var(--text); }

@media (max-width: 560px) {
  .hero__title {
    font-size: clamp(2.4rem, 1.5rem + 7vw, 3.25rem);
    letter-spacing: -0.03em;
  }
  .hero__eyebrow { font-size: 0.66rem; padding: 0.45rem 0.75rem; margin-bottom: var(--space-sm); }
  .hero__meta { gap: 1.5rem; flex-wrap: wrap; }
  .hero__actions .btn { flex: 1 1 100%; }
}

/* ---------- Manifiesto ---------- */
.manifesto {
  padding: var(--space-xl) var(--gutter);
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
  gap: var(--space-md);
}

.manifesto__lead {
  font-family: var(--font-display);
  font-size: var(--text-lead);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--text);
  margin-bottom: var(--space-md);
  max-width: 24ch;
}

.manifesto__columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-md);
}

.manifesto__columns p {
  color: var(--text-muted);
  line-height: 1.65;
  max-width: 42ch;
}

@media (max-width: 780px) {
  .manifesto { grid-template-columns: 1fr; gap: var(--space-sm); }
}

/* ---------- Modelos (home) ---------- */
.models {
  padding: var(--space-lg) var(--gutter) var(--space-xl);
  max-width: var(--max-w);
  margin: 0 auto;
}

.models__head {
  margin-bottom: var(--space-md);
  max-width: 900px;
}

.models__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: clamp(1.5rem, 1rem + 2vw, 2.5rem) clamp(1rem, 0.5rem + 1.5vw, 2rem);
}

.model-card {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.model-card__photo {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
}

.model-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease);
  will-change: transform;
}

.model-card:hover .model-card__photo img,
.model-card:focus-visible .model-card__photo img { transform: scale(1.04); }

.model-card__index {
  position: absolute;
  top: 0.75rem;
  left: 0.9rem;
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text);
  text-shadow: 0 1px 6px rgba(0,0,0,0.7);
}

.model-card__name {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
}

.model-card__desc {
  color: var(--text-muted);
  font-size: 0.92rem;
  line-height: 1.5;
}

.model-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 0.8rem;
  border-top: 1px solid var(--border);
}

.model-card__link {
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text);
}

.model-card:hover .model-card__link { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Fitment ---------- */
.fitment {
  padding: var(--space-xl) var(--gutter);
  max-width: var(--max-w);
  margin: 0 auto;
}

.fitment__head { margin-bottom: var(--space-md); }

.fitment__list {
  display: grid;
  /* 320px para que en escritorio ancho queden 4 columnas y no 5 apretadas:
     con 5, "BMW M2 · M240i · Serie 3" parte en dos lineas. */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  border-top: 1px solid var(--border);
}

.fitment__list li {
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
  padding: 1.3rem 0;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-display);
  font-size: clamp(1rem, 0.85rem + 0.5vw, 1.2rem);
  letter-spacing: -0.01em;
  color: var(--text);
  transition: transform var(--duration-fast) var(--ease);
}

.fitment__list li:hover { transform: translateX(4px); }

.fitment__list li span {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--text-muted);
  min-width: 1.8rem;
}

.fitment__note {
  margin-top: var(--space-md);
  color: var(--text-muted);
  max-width: 56ch;
  font-size: 0.95rem;
}

.fitment__pcd {
  margin-top: var(--space-md);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.fitment__pcd span {
  width: 100%;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.25rem;
}

.fitment__pcd a {
  font-family: var(--font-display);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  color: var(--text);
  padding: 0.55rem 0.9rem;
  border: 1px solid var(--border-strong);
  transition: border-color var(--duration-fast) var(--ease), background var(--duration-fast) var(--ease);
}

.fitment__pcd a:hover { border-color: var(--text); background: rgba(255, 255, 255, 0.04); }

/* ---------- Como comprar ---------- */
.proceso {
  padding: var(--space-lg) var(--gutter);
  max-width: var(--max-w);
  margin: 0 auto;
}

.proceso__head { margin-bottom: var(--space-md); }

.proceso__steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: var(--space-sm);
}

.step {
  padding: var(--space-sm);
  background: var(--surface);
  border: 1px solid var(--border);
}

.step__n {
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  color: var(--text-muted);
  display: block;
  margin-bottom: 0.75rem;
}

.step h3 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-bottom: 0.4rem;
}

.step p {
  color: var(--text-muted);
  font-size: 0.92rem;
  line-height: 1.55;
}

/* ---------- Galeria ---------- */
.gallery-home {
  padding: var(--space-lg) var(--gutter) var(--space-xl);
  max-width: var(--max-w);
  margin: 0 auto;
}

.gallery-home .section-label { margin-bottom: var(--space-md); }

.gallery-home__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: clamp(0.5rem, 0.25rem + 0.8vw, 1rem);
}

.gallery-home__item {
  overflow: hidden;
  background: var(--bg-elevated);
  aspect-ratio: 4 / 5;
}

.gallery-home__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease), filter var(--duration) var(--ease);
  filter: saturate(0.95);
}

.gallery-home__item:hover img { transform: scale(1.04); filter: saturate(1.05); }

/* ---------- Contacto ---------- */
.contact {
  padding: var(--space-xl) var(--gutter);
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-lg);
  align-items: end;
  border-top: 1px solid var(--border);
}

.contact__head { display: flex; flex-direction: column; gap: var(--space-sm); }

.contact__title {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.03em;
}

.contact__sub {
  color: var(--text-muted);
  max-width: 44ch;
  line-height: 1.55;
}

.contact__channels {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.channel {
  display: grid;
  grid-template-columns: minmax(110px, auto) minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.5rem;
  padding: 1.4rem 1.6rem;
  background: var(--surface);
  border: 1px solid var(--border);
  transition: background var(--duration-fast) var(--ease),
              border-color var(--duration-fast) var(--ease),
              transform var(--duration-fast) var(--ease);
}

.channel:hover,
.channel:focus-visible {
  background: var(--bg-elevated);
  border-color: var(--border-strong);
  transform: translateY(-2px);
}

.channel--primary {
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
}

.channel--primary:hover,
.channel--primary:focus-visible {
  background: transparent;
  color: var(--text);
  border-color: var(--text);
}

.channel__label {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.7;
}

.channel__value {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}

.channel svg {
  width: 18px;
  height: 18px;
  transition: transform var(--duration-fast) var(--ease);
}

.channel:hover svg { transform: translateX(4px); }

@media (max-width: 780px) {
  .contact { grid-template-columns: 1fr; gap: var(--space-md); }
  .channel { grid-template-columns: minmax(84px, auto) 1fr auto; padding: 1.15rem; gap: 0.9rem; }
  .channel__value { font-size: 0.95rem; }
}

/* ---------- Footer ---------- */
.footer {
  padding: var(--space-md) var(--gutter) calc(var(--space-sm) + 4rem);
  border-top: 1px solid var(--border);
  max-width: var(--max-w);
  margin: 0 auto;
}

.footer__top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-md);
  flex-wrap: wrap;
  padding-bottom: var(--space-md);
}

.footer__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
}

.footer__logo { height: 46px; width: auto; display: block; }

.footer__nav {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  font-family: var(--font-display);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

.footer__nav a:hover { color: var(--text); }

.footer__bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-top: var(--space-sm);
  border-top: 1px solid var(--border);
  font-size: 0.78rem;
  color: var(--text-dim);
  font-family: var(--font-display);
  letter-spacing: 0.08em;
}

/* =========================================================
   Catalogo (shop.html)
   ========================================================= */
.shop {
  padding: calc(var(--nav-h) + var(--space-md)) var(--gutter) var(--space-lg);
  max-width: var(--max-w);
  margin: 0 auto;
}

.shop__head {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: var(--space-sm);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--border);
}

.shop__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2rem, 1rem + 4vw, 4rem);
  letter-spacing: -0.025em;
  line-height: 0.95;
}

.shop__sub {
  color: var(--text-muted);
  max-width: 62ch;
  font-size: var(--text-body);
  margin-top: 0.5rem;
}

.filters {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
  margin: var(--space-sm) 0 var(--space-md);
}

.filter {
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 0.55rem 1rem;
  border: 1px solid var(--border-strong);
  background: transparent;
  cursor: pointer;
  transition: color var(--duration-fast), border-color var(--duration-fast), background var(--duration-fast);
}

.filter:hover { color: var(--text); border-color: var(--text); }
.filter--active { background: var(--text); color: var(--bg); border-color: var(--text); }

.filters__count {
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-left: auto;
}

/* Misma grilla que el catalogo completo: 215px de base y 145px en celular,
   asi la Linea tambien entra de a dos por fila en el telefono. */
.catalog {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 215px), 1fr));
  gap: 2rem 1.4rem;
}

@media (max-width: 640px) {
  .catalog {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 145px), 1fr));
    gap: 1.4rem 0.8rem;
  }
}

.wheel-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.wheel-card__photo {
  width: 100%;
  aspect-ratio: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at center, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.04) 35%, rgba(255,255,255,0.01) 65%, transparent 80%);
}

.wheel-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 600ms var(--ease);
}


.wheel-card:hover .wheel-card__photo img { transform: scale(1.06); }

/* Modelo sin la foto de estudio todavia. Las tarjetas de la Linea siguen un
   patron: rueda plateada sobre negro, siempre el mismo angulo. Antes que meter
   una foto que rompa la serie, la tarjeta va vacia y lo dice. */
.wheel-card__photo--pendiente {
  border: 1px dashed rgba(255,255,255,0.16);
  border-radius: 2px;
  background: rgba(255,255,255,0.015);
}

.wheel-card__photo--pendiente span {
  font-family: var(--font-display);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  text-align: center;
  padding: 0 1rem;
  line-height: 1.7;
}

.alsolike__hueco {
  width: 100%;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed rgba(255,255,255,0.16);
  border-radius: 2px;
  font-family: var(--font-display);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.wheel-card__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.85rem;
  width: 100%;
}

/* El nombre del modelo. Mismo tamano y peso que en catalogo.html para que las
   dos grillas se lean igual. */
.wheel-card__code {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.1;
  color: var(--text);
}

/* La volanta chica de arriba: en el catalogo es la marca de auto, aca el numero */
.wheel-card__mk {
  font-family: var(--font-display);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.wheel-card__spec {
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.wheel-card__spec b { color: var(--text); font-weight: 500; }

.wheel-card__swatches {
  display: flex;
  gap: 0.28rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 0.15rem;
}

.wheel-card__swatches i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
}

.catalog__empty {
  grid-column: 1 / -1;
  padding: var(--space-md) 0;
  color: var(--text-muted);
  text-align: center;
}

.shop__footer {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.shop__footer a {
  color: var(--text);
  border-bottom: 1px solid var(--text);
  white-space: nowrap;
}

/* =========================================================
   Ficha de producto (product-axys-0X.html)
   ========================================================= */
.product {
  padding: calc(var(--nav-h) + var(--space-md)) var(--gutter) var(--space-lg);
  max-width: var(--max-w);
  margin: 0 auto;
}

.breadcrumbs {
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-md);
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.breadcrumbs a:hover { color: var(--text); }
.breadcrumbs [aria-current] { color: var(--text); }
.breadcrumbs .sep { color: var(--text-dim); }

.product__main {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  align-items: start;
}

@media (max-width: 900px) {
  .product__main { grid-template-columns: 1fr; }
}

/* Galeria */
.pgallery { display: flex; flex-direction: column; gap: 0.6rem; }

.pgallery__main {
  aspect-ratio: 4 / 5;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  overflow: hidden;
}

.pgallery__main img { width: 100%; height: 100%; object-fit: cover; }

.pgallery__thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 0.5rem;
}

.pgallery__thumb {
  aspect-ratio: 1;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  cursor: pointer;
  overflow: hidden;
  padding: 0;
  transition: border-color var(--duration-fast);
}

.pgallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.pgallery__thumb:hover { border-color: var(--border-strong); }
.pgallery__thumb[aria-current='true'] { border-color: var(--text); }

/* Info */
.info { padding-top: 0.25rem; }

.info__code {
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.75rem;
}

.info__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2rem, 1rem + 4vw, 3.5rem);
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 0.4rem;
}

.info__finish {
  color: var(--text-muted);
  font-size: 1.05rem;
  margin-bottom: 0.75rem;
}

.info__state { margin-bottom: var(--space-sm); }

.info__lead {
  font-size: 1.02rem;
  line-height: 1.6;
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-sm);
}

.group {
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-sm);
}

.group__label {
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.85rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.group__label .selected { color: var(--text); text-align: right; }

/* Acabados */
.colors { display: flex; gap: 0.6rem; flex-wrap: wrap; }

.color {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  box-shadow: inset 0 0 0 1px var(--border-strong);
  padding: 0;
  position: relative;
  transition: border-color var(--duration-fast), transform var(--duration-fast);
}

.color:hover { transform: scale(1.05); }
.color[aria-checked='true'] { border-color: var(--text); }

/* Acabado sin foto propia: se marca, no se disimula */
.color--consultar::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 1px dashed var(--text-dim);
}

.color--matte-black      { background: linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 100%); }
.color--silver           { background: linear-gradient(135deg, #ffffff 0%, #d6dbe2 18%, #6a7280 48%, #aab1bb 56%, #ecf0f5 75%, #b8bec7 100%); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.4), inset 0 -8px 12px rgba(0,0,0,0.15); }
.color--pearl-white      { background: linear-gradient(135deg, #fafaf7 0%, #e8eaee 45%, #d4dae1 100%); }
.color--gunmetal         { background: linear-gradient(135deg, #4a4d52 0%, #2a2c30 100%); }
.color--graphite-shadow  { background: linear-gradient(135deg, #2c2c2c 0%, #1a1a1a 60%, #0a0a0a 100%); }
.color--bronze           { background: linear-gradient(135deg, #a87642 0%, #6e4a26 100%); }

/* Los dos de la tanda de septiembre. El black machined face es negro con el
   filo del radio mecanizado: la banda clara del medio es ese corte. El brushed
   es aluminio cepillado, mas apagado que el polished silver de arriba. */
.color--bmf              { background: linear-gradient(135deg, #141414 0%, #1c1c1c 38%, #cfd3d8 48%, #e6e9ed 52%, #1c1c1c 62%, #0d0d0d 100%); }
.color--brushed          { background: linear-gradient(135deg, #e2e5e9 0%, #b2b7bd 30%, #8f959c 52%, #c3c8ce 72%, #9aa0a7 100%); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.28); }

/* Los de octubre. El gloss black lleva un reflejo para no confundirse con el
   matte black. El graphite machined es como el bmf pero sobre grafito. */
.color--gloss-black      { background: linear-gradient(135deg, #3a3a3a 0%, #0e0e0e 35%, #050505 65%, #2a2a2a 100%); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18); }
.color--gold             { background: linear-gradient(135deg, #d9c38c 0%, #b39a5e 45%, #8a7442 100%); }
.color--graphite-machined { background: linear-gradient(135deg, #2e3034 0%, #3a3d42 38%, #c9cdd2 48%, #e1e4e8 52%, #3a3d42 62%, #24262a 100%); }

.colors__note {
  margin-top: 0.85rem;
  font-size: 0.85rem;
  color: var(--text-muted);
  min-height: 1.3em;
}

/* Medidas */
.sizes { display: flex; gap: 0.5rem; flex-wrap: wrap; }

.size {
  font-family: var(--font-display);
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  padding: 0.7rem 1.1rem;
  border: 1px solid var(--border-strong);
  background: transparent;
  cursor: pointer;
  transition: background var(--duration-fast), color var(--duration-fast), border-color var(--duration-fast);
}

.size:hover { border-color: var(--text); }
.size[aria-checked='true'] { background: var(--text); color: var(--bg); border-color: var(--text); }

.size[disabled] {
  color: var(--text-dim);
  cursor: not-allowed;
  position: relative;
}

.size[disabled]::after {
  content: '';
  position: absolute;
  top: 50%; left: 8%; right: 8%;
  border-top: 1px solid var(--text-dim);
}

.sizes__note {
  margin-top: 0.85rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* Construccion: mismo lenguaje que los botones de diametro, pero a lo ancho
   porque las etiquetas son largas. */
.builds { display: flex; gap: 0.5rem; flex-wrap: wrap; }

.build {
  flex: 1 1 8rem;
  font-family: var(--font-display);
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.85rem 1rem;
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition: background var(--duration-fast), color var(--duration-fast), border-color var(--duration-fast);
}

.build:hover { border-color: var(--text); }
.build[aria-checked='true'] { background: var(--text); color: var(--bg); border-color: var(--text); }

.builds__note {
  margin-top: 0.85rem;
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.55;
}

/* Specs */
.specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 0 1.5rem;
  font-size: 0.95rem;
}

.specs > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0;
  border-bottom: 1px dashed var(--border);
}

.specs dt { color: var(--text-muted); }
.specs dd { color: var(--text); font-weight: 500; text-align: right; }

/* CTA */
.cta-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  margin-top: var(--space-sm);
}

@media (max-width: 520px) { .cta-row { grid-template-columns: 1fr; } }

.cta {
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 1.1rem 1.5rem;
  text-align: center;
  border: 1px solid transparent;
  transition: background var(--duration-fast), color var(--duration-fast), border-color var(--duration-fast);
}

.cta--primary { background: var(--text); color: var(--bg); border-color: var(--text); }
.cta--primary:hover { background: transparent; color: var(--text); }

.cta--secondary { background: transparent; color: var(--text); border-color: var(--border-strong); }
.cta--secondary:hover { border-color: var(--text); }

.cta-note {
  margin-top: 0.85rem;
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.5;
}

/* Tira de detalles */
.detail-strip {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: var(--space-md);
}

.detail-strip__item h3 {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}

.detail-strip__item p { font-size: 0.95rem; }

/* En la calle */
.oncar {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border);
}

.oncar h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  letter-spacing: -0.02em;
  margin-bottom: var(--space-sm);
}

.oncar__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 0.6rem;
}

.oncar__grid img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border: 1px solid var(--border);
}

/* Otros modelos */
.alsolike {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border);
}

.alsolike h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.25rem, 1rem + 1.2vw, 1.75rem);
  letter-spacing: -0.02em;
  margin-bottom: var(--space-sm);
}

.alsolike__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
  gap: var(--space-sm);
}

.alsolike__item {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  text-align: center;
}

.alsolike__item img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  background: radial-gradient(ellipse at center, rgba(255,255,255,0.08) 0%, transparent 70%);
}

.alsolike__item span {
  font-family: var(--font-display);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
}

.alsolike__item:hover span { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- 404 ---------- */
.oops {
  min-height: 72vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-sm);
  padding: calc(var(--nav-h) + var(--space-lg)) var(--gutter) var(--space-lg);
  max-width: var(--max-w);
  margin: 0 auto;
}

.oops h1 {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
}

.oops p { color: var(--text-muted); max-width: 46ch; }
.oops .btn { align-self: flex-start; }

/* ---------- Scroll-reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}

.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ---------- Seleccion y foco ---------- */
::selection { background: var(--text); color: var(--bg); }

:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 3px;
}


/* ---------- Catalogo completo, bloque de la home ---------- */
.mas {
  padding: var(--space-lg) var(--gutter);
  max-width: var(--max-w);
  margin: 0 auto;
}

.mas__head { margin-bottom: var(--space-md); }

.mas__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(1.5rem, 1rem + 3vw, 4rem);
  align-items: center;
}

.mas__copy p {
  color: var(--text-muted);
  max-width: 48ch;
  line-height: 1.65;
  margin-bottom: var(--space-sm);
}

.mas__nums {
  display: flex;
  gap: clamp(1.5rem, 1rem + 2vw, 3rem);
  flex-wrap: wrap;
  margin: var(--space-sm) 0;
  padding-top: var(--space-sm);
  border-top: 1px solid var(--border);
}

.mas__num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.4rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
}

.mas__lbl {
  display: block;
  margin-top: 0.4rem;
  font-family: var(--font-display);
  font-size: 0.64rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.mas__copy .btn { display: inline-block; margin-top: 0.5rem; }

.mas__mosaic {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}

.mas__mosaic img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  padding: 8%;
  background: radial-gradient(ellipse at center, rgba(255,255,255,0.09) 0%, rgba(255,255,255,0.03) 45%, transparent 75%);
  border: 1px solid var(--border);
}

@media (max-width: 780px) {
  .mas__grid { grid-template-columns: 1fr; }
  .mas__copy .btn { display: block; text-align: center; }
}


/* ---------- Instagram en la barra (15/10/2026) ----------
   En el evento la gente escaneaba el QR y para llegar al Instagram tenia que bajar hasta
   el pie. Ahora esta arriba de todo, tambien en el celular. */
.nav__links { margin-left: auto; }
.nav__ig {
  margin-left: auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; color: var(--text);
  border: 1px solid var(--border-strong); border-radius: 2px;
  transition: background var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease);
}
.nav__ig svg { width: 20px; height: 20px; }
.nav__ig:hover, .nav__ig:focus-visible { background: var(--text); color: var(--bg); }
.nav__ig:active { transform: translateY(1px); }
@media (max-width: 860px) {
  .nav__ig { width: 40px; height: 40px; margin-right: 0.25rem; }
}

/* ---------- Linea AXYS + catalogo completo en una sola pagina (15/10/2026) ---------- */
#linea, #catalogo { scroll-margin-top: calc(var(--nav-h) + 1rem); }
.linea-axys { padding-bottom: 0; }


/* ---------- Intro al abrir la web (15/10/2026) ----------
   Pedido de Nadia: "una animacion para cuando apenas abris la web, que haya algo lindo",
   pensada para celular. Pantalla negra, el logo ORIGINAL aparece con un reflejo de luz
   que lo cruza (como en el metal), se abre una linea fina con "Llantas de aleacion" y la
   pantalla sube y deja ver la portada. ~2 s. Solo CSS: si el JS no carga, igual termina sola.
   El JS solo hace dos cosas: que no se repita en la misma visita y que un toque la saltee. */
.intro {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  background: var(--bg);
  animation: intro-sube 700ms cubic-bezier(0.76, 0, 0.24, 1) 1900ms forwards;
  cursor: pointer;
}
.intro__centro { display: flex; flex-direction: column; align-items: center; gap: 1.1rem; }
.intro__logo { position: relative; width: min(58vw, 260px); }
.intro__logo img {
  display: block; width: 100%; height: auto;
  opacity: 0; transform: translateY(10px) scale(0.96);
  animation: intro-logo 900ms var(--ease) 150ms forwards;
}
/* el reflejo: una banda de luz que pasa una vez, recortada con la forma del propio logo */
.intro__logo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,0.95) 50%, transparent 65%) no-repeat;
  background-size: 250% 100%; background-position: 120% 0;
  -webkit-mask: url("../assets/marca/axys-logo.webp") center / contain no-repeat;
          mask: url("../assets/marca/axys-logo.webp") center / contain no-repeat;
  animation: intro-brillo 1000ms ease-in-out 750ms forwards;
}
.intro__linea { width: min(58vw, 260px); height: 1px; background: rgba(255,255,255,0.35); transform: scaleX(0); animation: intro-linea 700ms var(--ease) 900ms forwards; }
.intro__texto {
  font-family: var(--font-display); font-size: 0.7rem; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--text-muted); opacity: 0; animation: intro-texto 600ms var(--ease) 1150ms forwards;
}
@keyframes intro-logo   { to { opacity: 1; transform: none; } }
@keyframes intro-brillo { to { background-position: -40% 0; } }
@keyframes intro-linea  { to { transform: scaleX(1); } }
@keyframes intro-texto  { to { opacity: 1; } }
@keyframes intro-sube   { to { transform: translateY(-100%); visibility: hidden; } }

/* la portada se acomoda mientras sube la intro: la foto llega un poco mas cerca y se asienta */
.con-intro .hero__media { animation: intro-hero 1400ms var(--ease) 1900ms both; }
@keyframes intro-hero { from { transform: scale(1.08); } to { transform: none; } }

/* ya la vio en esta visita, o la salteo con un toque */
.intro-vista .intro { display: none; }
.intro--saltar { animation: intro-sube 450ms cubic-bezier(0.76, 0, 0.24, 1) forwards !important; }

/* movimiento reducido: sin intro */
@media (prefers-reduced-motion: reduce) {
  .intro { display: none; }
  .con-intro .hero__media { animation: none; }
}

/* ---------- Instagram en la portada, al lado de los botones (15/10/2026) ---------- */
.hero__ig {
  display: inline-flex; align-items: center; gap: 0.55rem; margin-top: 1.1rem;
  font-family: var(--font-display); font-size: 0.82rem; letter-spacing: 0.08em; color: var(--text);
  border-bottom: 1px solid rgba(255,255,255,0.35); padding-bottom: 0.2rem;
  transition: border-color var(--duration-fast) var(--ease);
}
.hero__ig svg { width: 18px; height: 18px; }
.hero__ig:hover, .hero__ig:focus-visible { border-color: var(--text); }