/*
  HSA BI · Design tokens
  Clonados del cotizador (hsa.somossinergia.com) para mantener una sola identidad visual.
*/

:root {
  /* Paleta de marca */
  --color-ink: #14304d;
  --color-ink-700: #1d3f63;
  --color-ink-500: #3a5f83;
  --color-ink-300: #7d99b4;

  --color-cream: #f7f2e8;
  --color-cream-200: #efe7d6;
  --color-cream-300: #e4d9c2;

  --color-gold: #b0894e;
  --color-gold-400: #c7a367;
  --color-gold-200: #e6d4ac;

  --color-charcoal: #23201b;
  --color-charcoal-soft: #4a4640;

  --color-wine: #7a2f3a;
  --color-white: #fff;

  /* Estado / semáforo (uso BI, no está en el cotizador) */
  --color-success: #1f7a4d;
  --color-warning: #b0894e;
  --color-danger: #7a2f3a;

  /* Tipografía */
  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-sans: "Archivo", system-ui, -apple-system, sans-serif;

  /* Sombras */
  --shadow-card: 0 1px 2px #14304d0f, 0 12px 30px -12px #14304d2e;
  --shadow-card-hover: 0 4px 10px #14304d14, 0 20px 40px -16px #14304d3d;

  /* Bordes */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;

  /* Layout */
  --header-height: 72px;
  --content-max: 1280px;
}

/*
  Identidad de marca de lujo: la paleta crema/oro/marino se renderiza SIEMPRE igual,
  sin importar si el navegador del visitante esta en modo claro u oscuro. Igual que el
  cotizador, la pagina se compromete con una sola estetica deliberada.
*/
:root { color-scheme: light; }

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--color-cream);
  color: var(--color-charcoal);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .font-display {
  font-family: var(--font-display);
  color: var(--color-ink);
  font-weight: 600;
  margin: 0;
}

a { color: inherit; text-decoration: none; }

.hsa-eyebrow {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-gold);
  font-weight: 600;
}

.hsa-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--color-cream-300);
  transition: box-shadow .2s ease, transform .2s ease;
}

.hsa-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}

.hsa-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.65rem 1.3rem;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
}

.hsa-btn-primary {
  background: var(--color-ink);
  color: var(--color-white);
}

.hsa-btn-primary:hover { background: var(--color-ink-700); }

.hsa-btn-ghost {
  background: transparent;
  border-color: var(--color-cream-300);
  color: var(--color-ink);
}

.hsa-tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
}

.hsa-tag-live {
  background: color-mix(in srgb, var(--color-success) 15%, transparent);
  color: var(--color-success);
}

.hsa-tag-soon {
  background: color-mix(in srgb, var(--color-ink-300) 25%, transparent);
  color: var(--color-ink-700);
}