/* ============================================================
   BYD · paleta y tipografía (extraída de byd.com/en)
   - Carbón `#252728`, blanco `#F7F7F7`, BYD Red `#D70C19` accent
   - Tipografía: Montserrat (real BYD overseas)
   ============================================================ */
@import url("../_shared/micro-base.css");
@import url("../_shared/reveal.css");

:root {
  --byd-carbon: #252728;       /* primario dark, real */
  --byd-bg-light: #F7F7F7;     /* light bg, real */
  --byd-red: #D70C19;          /* BYD Red, real */
  --byd-red-deep: #A60912;
  --byd-gray: #7C7D7E;
  --byd-gray-soft: #DCDDDF;
  --byd-pale: #FBFCFC;

  --brand-bg: var(--byd-carbon);
  --brand-fg: #FFFFFF;
  --brand-primary: var(--byd-carbon);
  --brand-accent: var(--byd-red);
  --brand-accent-soft: rgba(215, 12, 25, 0.08);
  --brand-section-bg: var(--byd-bg-light);
  --brand-section-fg: var(--byd-carbon);
  --brand-card-bg: #FFFFFF;
  --brand-card-border: rgba(37, 39, 40, 0.1);

  /* Real BYD: Montserrat */
  --font-sans: 'Montserrat', -apple-system, sans-serif;
  --font-display: 'Montserrat', sans-serif;
}

body { background: var(--byd-bg-light); color: var(--byd-carbon); }

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

.btn-primary {
  background: var(--byd-red);
  color: #FFF;
  border-radius: 0; /* BYD overseas usa rectos */
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  font-size: var(--fs-sm);
}
.btn-primary:hover { background: var(--byd-red-deep); }
.btn-ghost {
  border-radius: 0;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 500;
  font-size: var(--fs-sm);
}

/* Headlines técnicos: Montserrat bold, no serif */
.m-hero__claim,
.m-concept__title,
.m-activations__intro h2,
.m-activation__title,
.m-final h2,
.m-events h2,
.m-ambient h2,
.byd-ambient h2 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
}
.m-hero__claim { font-weight: 800; letter-spacing: -0.04em; line-height: 0.95; }
.m-activation__num { font-family: var(--font-display); color: var(--byd-red); font-weight: 800; }

.m-hero__eyebrow {
  border-radius: 0;
  border-color: rgba(255,255,255,0.5);
  color: #FFF;
  font-weight: 600;
}

.m-attr { border-left-color: var(--byd-red); }
.m-attr__label { color: var(--byd-carbon); }

.m-concept__eyebrow { color: var(--byd-red); font-weight: 700; }

.m-events { background: var(--byd-carbon); border-top: 1px solid rgba(255,255,255,0.06); }
.m-events__date { color: var(--byd-red); font-weight: 700; }

.m-final__primary {
  background: var(--byd-red);
  color: #FFF;
  border-radius: 0;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.m-final__primary:hover { background: var(--byd-red-deep); }
.m-final__secondary {
  border-color: var(--byd-carbon);
  color: var(--byd-carbon);
  border-radius: 0;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.m-final__secondary:hover { background: var(--byd-carbon); color: #FFF; }

.m-activation__cta {
  border-color: var(--byd-carbon);
  color: var(--byd-carbon);
  border-radius: 0;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}
.m-activation__cta:hover { background: var(--byd-carbon); color: #FFF; }

/* Showroom del Futuro — bloque ambient con métricas en vivo */
.byd-ambient { background: var(--byd-carbon); color: #FFF; padding: var(--sp-9) 0; }
.byd-ambient__inner {
  display: grid; grid-template-columns: 1fr; gap: var(--sp-6);
  align-items: center;
}
@media (min-width: 900px) { .byd-ambient__inner { grid-template-columns: 1fr 1fr; gap: var(--sp-8); } }
.byd-ambient__media { aspect-ratio: 16/9; border-radius: 0; overflow: hidden; }
.byd-ambient__media img { width: 100%; height: 100%; object-fit: cover; }
.byd-ambient__eyebrow {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--byd-red);
  margin-bottom: var(--sp-3);
  font-weight: 700;
  display: block;
}
.byd-ambient h2 {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: 700;
  letter-spacing: -0.025em;
  margin-bottom: var(--sp-4);
}
.byd-ambient__metrics {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3);
  margin-top: var(--sp-5);
}
.byd-ambient__metric {
  padding: var(--sp-3);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 0;
}
.byd-ambient__metric strong {
  display: block;
  font-size: var(--fs-2xl);
  color: var(--byd-red);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.byd-ambient__metric span { font-size: var(--fs-xs); color: rgba(255,255,255,0.7); text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600; }