/* ============================================================
   AUDI · paleta de identidad oficial Audi global
   - Audi Red #F50537 (acento puntual), carbón #1B1B1B, blanco.
   - Tipografía: "Audi Type" propietaria. Fallback: Inter Tight,
     una geométrica neutral con weights ligeros (Audi usa light/regular
     en headlines, no bold).
   - Estética: paddock, mucho whitespace, geometría precisa.
   ============================================================ */
@import url("../_shared/micro-base.css");
@import url("../_shared/reveal.css");

:root {
  --audi-red: #F50537;          /* Audi Red oficial */
  --audi-red-deep: #CC0429;
  --audi-black: #1B1B1B;
  --audi-carbon: #0E0E0E;
  --audi-titanium: #C0C0C0;
  --audi-light: #F4F4F5;
  --audi-mid: #6E6E6E;

  --brand-bg: var(--audi-black);
  --brand-fg: #FFFFFF;
  --brand-primary: var(--audi-black);
  --brand-accent: var(--audi-red);
  --brand-section-bg: var(--audi-light);
  --brand-section-fg: var(--audi-carbon);
  --brand-card-bg: #FFFFFF;
  --brand-card-border: rgba(0, 0, 0, 0.08);

  /* TODO: reemplazar por Audi Type oficial cuando Dietrich provea licencia.
     Inter Tight es la geométrica más cercana en proporción y peso óptico. */
  --font-sans: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: 'Inter Tight', 'Inter', sans-serif;
}

:focus-visible { outline-color: var(--audi-red); }

.btn-primary {
  background: var(--audi-red);
  color: #FFF;
  border-radius: 999px;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.btn-primary:hover { background: var(--audi-red-deep); }
.btn-ghost {
  border-radius: 999px;
  font-weight: 400;
  letter-spacing: 0.02em;
}

/* Headlines Audi: weights ligeros (400-500), geometría limpia.
   Audi prefiere precisión sobre énfasis — nada de bold pesado. */
.m-hero__claim,
.m-concept__title,
.m-activations__intro h2,
.m-activation__title,
.m-final h2,
.m-events h2,
.audi-block h2,
.audi-grid__item h3 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.05;
}
.m-hero__claim { font-weight: 400; letter-spacing: -0.035em; line-height: 1.0; }
.m-activation__num { font-family: var(--font-display); color: var(--audi-red); font-weight: 500; }

.m-attr { border-left-color: var(--audi-red); background: #FFF; }
.m-attr__label { color: var(--audi-black); }

.m-events { background: var(--audi-black); }
.m-events__date { color: var(--audi-red); }

.m-final__primary { background: var(--audi-black); color: #FFF; }
.m-final__primary:hover { background: var(--audi-red); }
.m-final__secondary { border-color: var(--audi-black); color: var(--audi-black); }

/* Bloques especiales Audi (tiene una sola activación + mucho contexto) */
.audi-block { padding: var(--sp-9) 0; }
.audi-block--dark { background: var(--audi-black); color: #FFF; }
.audi-block--light { background: #FFF; color: var(--audi-black); }
.audi-block--gray { background: var(--brand-section-bg); }

.audi-block__eyebrow {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--audi-red);
  margin-bottom: var(--sp-3);
  font-weight: 600;
  display: block;
}
.audi-block h2 { font-size: var(--fs-3xl); font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; margin-bottom: var(--sp-5); max-width: 22ch; }
.audi-block p { color: rgba(255,255,255,0.78); max-width: var(--max-w-prose); line-height: 1.65; }
.audi-block--light p, .audi-block--gray p { color: #444; }

/* Dos columnas: pilotos */
.audi-pilots {
  display: grid; grid-template-columns: 1fr; gap: var(--sp-5);
  margin-top: var(--sp-6);
}
@media (min-width: 720px) { .audi-pilots { grid-template-columns: 1fr 1fr; } }
.audi-pilot {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.audi-pilot img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.audi-pilot__body { padding: var(--sp-4) var(--sp-5); }
.audi-pilot__name { font-size: var(--fs-xl); font-weight: 600; letter-spacing: -0.02em; margin-bottom: var(--sp-1); }
.audi-pilot__role { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.16em; color: var(--audi-red); }
.audi-pilot p { font-size: var(--fs-sm); color: rgba(255,255,255,0.75); margin-top: var(--sp-3); }

/* Grid técnico del trazado */
.audi-trazado-grid {
  display: grid; grid-template-columns: 1fr; gap: var(--sp-5);
  margin-top: var(--sp-6);
}
@media (min-width: 900px) { .audi-trazado-grid { grid-template-columns: 1.2fr 1fr; gap: var(--sp-7); } }
.audi-trazado-grid img { width: 100%; border-radius: var(--radius-md); aspect-ratio: 16/9; object-fit: cover; }

.audi-stats {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3);
  margin-top: var(--sp-4);
}
@media (min-width: 600px) { .audi-stats { grid-template-columns: repeat(4, 1fr); } }
.audi-stat {
  padding: var(--sp-3);
  background: var(--brand-card-bg);
  border-radius: var(--radius-sm);
  border-top: 2px solid var(--audi-red);
}
.audi-stat strong { display: block; font-size: var(--fs-xl); font-weight: 600; color: var(--audi-black); margin-bottom: 2px; font-variant-numeric: tabular-nums; }
.audi-stat span { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.12em; color: #666; }

/* Pasos "Tu vuelta" */
.audi-steps {
  display: grid; grid-template-columns: 1fr; gap: var(--sp-4);
  margin-top: var(--sp-6);
  counter-reset: step;
}
@media (min-width: 720px) { .audi-steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .audi-steps { grid-template-columns: repeat(4, 1fr); } }

.audi-step {
  padding: var(--sp-5);
  background: #FFF;
  border-radius: var(--radius-md);
  border-top: 3px solid var(--audi-red);
  counter-increment: step;
  position: relative;
}
.audi-step::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-sans);
  font-size: var(--fs-2xl);
  font-weight: 600;
  color: var(--audi-red);
  display: block;
  margin-bottom: var(--sp-2);
  line-height: 1;
}
.audi-step h3 { font-size: var(--fs-base); font-weight: 600; margin-bottom: var(--sp-2); }
.audi-step p { font-size: var(--fs-sm); color: #555; line-height: 1.5; }