@import url("https://cdn-uicons.flaticon.com/2.6.0/uicons-brands/css/uicons-brands.css");

/* VARIABLES GLOBALES */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

html, body {
  overflow-x: hidden;
}

:root {

  --header-height: 80px;

  /* TIPOGRAFÍAS */
  --font-body: 'Inter', sans-serif;
  --font-title: 'Bebas Neue', sans-serif;

  /* ESCALA TIPOGRÁFICA */

  /* TITULOS */
  --fs-h1: clamp(2rem, 2.5vw, 2.8rem);
  --fs-h2: clamp(1.7rem, 2.2vw, 2.3rem);
  --fs-h3: clamp(1.3rem, 1.6vw, 1.7rem);
  --fs-h4: clamp(1.05rem, 1.2vw, 1.2rem);
  --fs-h5: clamp(0.95rem, 1.1vw, 1.1rem);
  --fs-hero: clamp(2.8rem, 8vw, 5rem);

  /* TEXTOS */
  --fs-body: clamp(0.95rem, 1vw, 1.05rem);
  --fs-small: clamp(0.85rem, 0.9vw, 0.95rem);

  /* BOTONES */
  --fs-button: clamp(0.85rem, 0.9vw, 0.95rem);

  /* COLORES */
  --color1: #282828;
  --color2: #3F3F3F;
  --color3: #FBF8FF;
  --color4: #E81825;
  --color5: #8A8A8A;
  --color6: #BC1C24;
  --color7: #575657;
}

/* BASE */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
  text-decoration: none;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-title);
}

/* Aplicación de escala */

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
h5 { font-size: var(--fs-h5); }

p { font-size: var(--fs-body); }

a:active,
a:visited {
  text-decoration: none;
}

.body {
  width: 100vw;
  margin: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.wrapper {
  width: 100%;
  max-width: 1200px;
  margin: auto;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}