/* ============================================
   ELECTROCAR — Tokens de marca v1.0
   Electricidad del automotor
   Manual de marca: ver canvas / PDF
   ============================================ */

/* --- Fuentes ---
   Opción A (recomendada): Google Fonts
   <link href="https://fonts.googleapis.com/css2?family=Archivo+Black&family=Archivo:wght@400;600;700&display=swap" rel="stylesheet">
   Opción B: self-hosted con los TTF de la carpeta /fonts */

/*
@font-face {
  font-family: 'Archivo Black';
  src: url('../fonts/ArchivoBlack-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('../fonts/Archivo-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}
*/

:root {
  /* Colores de marca */
  --ec-carmin: #A8201A;        /* Acento, CTA, detalles. Nunca texto largo */
  --ec-carmin-oscuro: #7F1813; /* Hover de botones, sombras planas */
  --ec-negro: #1B1B1B;         /* Texto, wordmark, ícono */
  --ec-crema: #F3EBDD;         /* Fondo principal */
  --ec-blanco: #FFFDF8;        /* Tarjetas y paneles sobre crema */
  --ec-gris: #5A5248;          /* Texto secundario, etiquetas */
  --ec-borde: #D8CDB8;         /* Bordes suaves sobre crema */

  /* Tipografía */
  --ec-font-display: 'Archivo Black', Arial, sans-serif;
  --ec-font-body: 'Archivo', Arial, Helvetica, sans-serif;

  /* Escala tipográfica */
  --ec-text-h1: 2.5rem;     /* 40px — títulos hero, MAYÚSCULAS */
  --ec-text-h2: 1.75rem;    /* 28px */
  --ec-text-h3: 1.25rem;    /* 20px */
  --ec-text-body: 0.9375rem;/* 15px */
  --ec-text-caption: 0.6875rem; /* 11px — etiquetas, 700 + tracking */

  /* Espaciado (escala de 4) */
  --ec-space-1: 0.25rem;
  --ec-space-2: 0.5rem;
  --ec-space-3: 0.75rem;
  --ec-space-4: 1rem;
  --ec-space-6: 1.5rem;
  --ec-space-8: 2rem;
  --ec-space-12: 3rem;

  /* Bordes y radios */
  --ec-radius: 10px;
  --ec-radius-sm: 6px;
  --ec-border-strong: 2px solid var(--ec-negro);
  --ec-border-soft: 1px solid var(--ec-borde);
}

/* --- Base --- */
body.ec {
  margin: 0;
  background: var(--ec-crema);
  color: var(--ec-negro);
  font-family: var(--ec-font-body);
  font-size: var(--ec-text-body);
  line-height: 1.6;
}

.ec h1, .ec-h1 {
  font-family: var(--ec-font-display);
  font-size: var(--ec-text-h1);
  line-height: 1.05;
  text-transform: uppercase;
  margin: 0 0 var(--ec-space-4);
}
.ec h2, .ec-h2 {
  font-family: var(--ec-font-display);
  font-size: var(--ec-text-h2);
  line-height: 1.1;
  text-transform: uppercase;
  margin: 0 0 var(--ec-space-3);
}
.ec-accent { color: var(--ec-carmin); }

.ec-caption {
  font-size: var(--ec-text-caption);
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--ec-gris);
}

/* --- Componentes --- */
.ec-btn {
  display: inline-block;
  background: var(--ec-carmin);
  color: var(--ec-blanco);
  font-family: var(--ec-font-body);
  font-weight: 700;
  font-size: var(--ec-text-body);
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: var(--ec-radius-sm);
  cursor: pointer;
  text-decoration: none;
}
.ec-btn:hover { background: var(--ec-carmin-oscuro); }

.ec-btn--secundario {
  background: transparent;
  color: var(--ec-negro);
  border: 2px solid var(--ec-negro);
}
.ec-btn--secundario:hover { background: var(--ec-negro); color: var(--ec-crema); }

.ec-card {
  background: var(--ec-blanco);
  border: var(--ec-border-soft);
  border-radius: var(--ec-radius);
  padding: var(--ec-space-6);
}

.ec-card--destacada { border: var(--ec-border-strong); }

/* Banda oscura (footer, CTA section, cartel) */
.ec-banda {
  background: var(--ec-negro);
  color: var(--ec-crema);
}

/* Regla de oro: un solo CTA carmín por vista.
   Si hay carmín en todos lados, no hay jerarquía. */