/* ==========================================================================
BASE.CSS
========================================================================== */

body {

font-family:
"Poppins",
sans-serif;

background:
var(--color-background);

color:
var(--color-text);

line-height:
1.7;

font-size:
1rem;
}

/* ==========================================================================
CONTAINER
========================================================================== */

.container {

width:
min(100% - 2rem, var(--container-width));

margin-inline:
auto;
}

/* ==========================================================================
TIPOGRAFIA
========================================================================== */

h1,
h2,
h3,
h4 {

color:
var(--color-text);

line-height:
1.2;

font-weight:
700;
}

h1 {

font-size:
clamp(2.2rem, 5vw, 4.2rem);

letter-spacing:
-1px;
}

h2 {

font-size:
clamp(1.8rem, 4vw, 3rem);

letter-spacing:
-.5px;
}

h3 {

font-size:
1.25rem;
}

p {

color:
var(--color-text-light);
}

/* ==========================================================================
SECTIONS
========================================================================== */

section {

padding:
var(--space-xxl)
var(--space-sm);
}

/* ==========================================================================
LINKS
========================================================================== */

a {

transition:
var(--transition);
}

/* ==========================================================================
IMAGENS
========================================================================== */

img {

height:
auto;
}

/* ==========================================================================
TOP BAR
========================================================================== */

.top-bar {

background:
var(--color-primary);

color:
var(--color-white);

padding:
.75rem
1rem;

text-align:
center;

font-size:
.9rem;

font-weight:
500;
}

.top-bar p {
  color: #ffffff;
  font-weight: 500;
}

/* ==========================================================================
HERO
========================================================================== */

.hero-text p {

font-size:
1.1rem;
}

/* ==========================================================================
LISTAS
========================================================================== */

.pain-points li,
.benefits li {

font-size:
1rem;
}

/* ==========================================================================
FOOTER
========================================================================== */

footer {

font-size:
.95rem;
}

footer p {

color:
var(--color-text-light);
}

@media (max-width: 767px) {
  body {
    padding-bottom: 72px;
  }
}