/* ============================================================
   VW TERA · paleta extraída de volkswagen.co/Tera/tera
   Real: VW Blue #001E50 (44 hits), Cyan #00B0F0 (32 hits) accent,
   Bright Blue #0040C5 (16 hits), white #FFFFFF.
   Tipografía: VW Head + VW Text proprietary — fallback Inter.
   ============================================================ */
@import url("../_shared/micro-base.css");
@import url("../_shared/reveal.css");

:root {
  --vw-blue: #001E50;        /* VW Blue corporativo, real */
  --vw-cyan: #00B0F0;        /* Tera launch site accent, real */
  --vw-bright: #0040C5;      /* azul brillante secundario, real */
  --vw-light: #DFE4E8;       /* gris-azulado UI, real */
  --vw-mid: #6A767D;
  --vw-pale: #F3F4F5;

  --brand-bg: var(--vw-blue);
  --brand-fg: #FFFFFF;
  --brand-primary: var(--vw-blue);
  --brand-accent: var(--vw-cyan);
  --brand-section-bg: #FFFFFF;
  --brand-section-fg: #0A0A0A;
  --brand-card-bg: var(--vw-pale);
  --brand-card-border: rgba(0, 30, 80, 0.1);

  /* TODO: reemplazar por VW Head / VW Text oficiales cuando Dietrich provea licencia.
     Inter es el fallback web más cercano (geométrica neutra, mismos pesos). */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-display: 'Inter', -apple-system, sans-serif;
}

:focus-visible { outline-color: var(--vw-cyan); }

.btn-primary {
  background: var(--vw-cyan);
  color: var(--vw-blue);
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: 0;
}
.btn-primary:hover { background: #33C5F8; transform: translateY(-2px); }

.btn-ghost {
  border-color: rgba(255,255,255,0.6);
  border-radius: 999px;
  font-weight: 500;
}
.btn-ghost:hover { border-color: var(--vw-cyan); color: var(--vw-cyan); }

/* VW Tera site usa headlines bold sans, sin serif */
.m-hero__claim,
.m-concept__title,
.m-activations__intro h2,
.m-activation__title,
.m-final h2,
.m-events h2 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
}
.m-hero__claim { font-weight: 800; letter-spacing: -0.04em; }
.m-activation__num { font-family: var(--font-display); font-weight: 800; color: var(--vw-cyan); font-size: var(--fs-2xl); }

.m-hero__eyebrow {
  border-color: var(--vw-cyan);
  color: var(--vw-cyan);
  font-weight: 600;
}

.m-attr { border-left-color: var(--vw-cyan); }
.m-attr__label { color: var(--vw-blue); font-weight: 700; }

.m-concept__eyebrow { color: var(--vw-cyan); font-weight: 700; }

.m-events { background: var(--vw-blue); }
.m-events__date { color: var(--vw-cyan); font-weight: 700; }
.m-events__item { border-color: rgba(255,255,255,0.14); }

.m-final__primary {
  background: var(--vw-blue);
  color: #FFF;
  border-radius: 999px;
  font-weight: 700;
}
.m-final__primary:hover { background: var(--vw-cyan); color: var(--vw-blue); }
.m-final__secondary {
  border-color: var(--vw-blue);
  color: var(--vw-blue);
  border-radius: 999px;
  font-weight: 600;
}
.m-final__secondary:hover { background: var(--vw-blue); color: #FFF; }

.m-activation__cta {
  border-color: var(--vw-blue);
  color: var(--vw-blue);
  border-radius: 999px;
  font-weight: 600;
}
.m-activation__cta:hover { background: var(--vw-blue); color: #FFF; }

/* Botón compartir — Tera necesita ser posteable */
.tera-share {
  position: fixed;
  right: var(--sp-4); bottom: var(--sp-4);
  z-index: 30;
  padding: var(--sp-3) var(--sp-4);
  background: var(--vw-cyan);
  color: var(--vw-blue);
  border-radius: 999px;
  font-weight: 700;
  font-size: var(--fs-sm);
  box-shadow: var(--shadow-md);
  display: inline-flex; align-items: center; gap: var(--sp-2);
  transition: transform var(--transition-base);
}
.tera-share:hover { transform: scale(1.05); }

/* Layout reel-style: 9:16 cards verticales */
.m-activation__media--vertical { aspect-ratio: 9 / 16; max-width: 360px; margin: 0 auto; }