/* ================================
   FUENTES PERSONALIZADAS
================================== */
@font-face {
  font-family: "Open Sans";
  src: url('/fonts/OpenSans.ttf');
}

@font-face {
  font-family: "Product Sans";
  src: url('/fonts/ProductSansRegular.ttf');
}

@font-face {
  font-family: "Product Sans Italic";
  src: url('/fonts/ProductSansItalic.ttf');
}

@font-face {
  font-family: "Product Sans Italic Bold";
  src: url('/fonts/ProductSansBoldItalic.ttf');
}

@font-face {
  font-family: "Product Sans Bold";
  src: url('/fonts/ProductSansBold.ttf');
}

:root {
  --light: #f6f6f6;
  --white: #ffffff;
  --blue: #2F6CA3;
  --blue-dark: #0A365E;
  --orange: #e3bb9d;
  --orange-dark: #c1763c;
  --muted: #6c757d;
  --text-dark: #212529;
  --text-light: #ffffff;
  --bg: #efefef;
}

html,
body {
  font-family: "Open Sans", sans-serif;
  color: var(--text-dark);
  background-color: var(--bg);
}

/* Tipografía global */
div,
label,
input,
p,
span,
a,
button {
  font-family: "Open Sans", sans-serif;
  color: var(--text-dark);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Product Sans Bold", sans-serif;
  color: var(--text-dark);
}


main {
  color: var(--text-dark);
  background-color: var(--bg);
}

a {
    color: var(--blue);
}

a:hover {
    color: var(--blue-dark);
}

footer {
    margin-top: 30px;
    text-align: center;
    color: var(--muted);
}