/* Brand Kit — Marc Zamora Asesor Financiero
   Extraído de Elementor Site Settings el 20/05/2026
   Importar en web-3.0 como base del design system */


:root {
  /* ─── Colors ─── */
  --color-primary:   #1B1832;
  --color-white:     #FFFFFF;
  --color-text:      #1B1832;
  --color-link:      #000000;
  --color-cta:       #00EBA3;

  /* ─── Typography: Families ─── */
  --font-heading:    'Open Sans', sans-serif;
  --font-body:       'Roboto', sans-serif;

  /* ─── Typography: Weights ─── */
  --fw-heading:      600;
  --fw-body:         400;
  --fw-accent:       500;

  /* ─── Typography: Scale (desktop) ─── */
  --text-body:       18px;
  --text-link:       18px;
  --text-h1:         48px;
  --text-h2:         40px;
  --text-h3:         32px;
  --text-h4:         28px;
  --text-h5:         24px;
  --text-h6:         20px;

  /* ─── Typography: Scale (mobile) ─── */
  --text-body-mobile: 16px;
  --text-link-mobile: 16px;
  --text-h1-mobile:   40px;
  --text-h2-mobile:   32px;
  --text-h3-mobile:   28px;
  --text-h4-mobile:   24px;
  --text-h5-mobile:   20px;
  --text-h6-mobile:   18px;

  /* ─── Line heights ─── */
  --lh-heading:      1.3em;
  --lh-body:         1.6em;

  /* ─── Breakpoints (reference only — use in media queries) ─── */
  --bp-tablet:       768px;
  --bp-desktop:      1025px;
}

/* ─── Base styles ─── */

body, .nv-content-wrap {
  font-family: var(--font-body) !important;
  font-weight: var(--fw-body);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  color: var(--color-text) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--color-link);
  font-family: var(--font-body);
  font-size: var(--text-link);
}

h1, h2, h3, h4, h5, h6,
.nv-content-wrap h1, .nv-content-wrap h2, .nv-content-wrap h3, .nv-content-wrap h4, .nv-content-wrap h5, .nv-content-wrap h6 {
  font-family: var(--font-heading) !important;
  font-weight: var(--fw-heading);
  text-transform: uppercase !important;
  line-height: var(--lh-heading);
  margin-top: 0;
}

h1 { font-size: var(--text-h1); color: #000000; }
h2 { font-size: var(--text-h2); color: var(--color-primary); }
h3 { font-size: var(--text-h3); color: var(--color-primary); }
h4 { font-size: var(--text-h4); color: #000000; }
h5 { font-size: var(--text-h5); color: #000000; }
h6 { font-size: var(--text-h6); color: #000000; }

/* ─── Mobile overrides ─── */

@media (max-width: 767px) {
  body { font-size: var(--text-body-mobile); }
  a    { font-size: var(--text-link-mobile); }
  h1   { font-size: var(--text-h1-mobile); }
  h2   { font-size: var(--text-h2-mobile); }
  h3   { font-size: var(--text-h3-mobile); }
  h4   { font-size: var(--text-h4-mobile); }
  h5   { font-size: var(--text-h5-mobile); }
  h6   { font-size: var(--text-h6-mobile); }

  h1, h2, h3, h4, h5, h6 { line-height: 1.3em; }
}