/* Top bar, header, primary navigation and footer. */

/* ---- Sticky chrome ----
   The top bar and the header stick together as one block. Sticking each of
   them separately would need the header offset by the top bar's height, and
   that number stops being true as soon as the top bar wraps on narrow
   screens. */

.site-chrome {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
}

/* ---- Top bar ---- */

.topbar {
  background: var(--c-gray);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  line-height: var(--topbar-h);
}

.topbar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-5);
  min-height: var(--topbar-h);
}

.topbar__inner a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Stands in for Divi's ETmodules glyphs (\e090 phone, \e076 envelope), which
   were dropped along with the licensed icon font. Sized at 16px because the
   solid glyphs carry ~2px of padding inside their 24-unit box. */
.topbar__icon {
  flex: none;
  width: 16px;
  height: 16px;
}

.topbar a:hover {
  color: var(--c-accent);
}

/* ---- Header ---- */

.header {
  background: #fff;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  min-height: var(--header-h);
  transition: min-height var(--transition);
}

.header.is-stuck .header__inner {
  min-height: var(--header-h-fixed);
}

.header__logo img {
  max-width: 166px;
  height: auto;
  transition: max-width var(--transition);
}

.header.is-stuck .header__logo img {
  max-width: 140px;
}

/* ---- Primary nav ---- */

.nav__list {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav__link {
  font-family: var(--f-heading);
  font-size: var(--fs-nav);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--c-text);
}

.nav__link[aria-current="page"] {
  color: #000;
}

.nav__toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
}

.nav__toggle span,
.nav__toggle span::before,
.nav__toggle span::after {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--c-text);
  transition: transform var(--transition), opacity var(--transition);
}

.nav__toggle span {
  margin-inline: auto;
  position: relative;
}

.nav__toggle span::before,
.nav__toggle span::after {
  content: "";
  position: absolute;
  left: 0;
}

.nav__toggle span::before {
  top: -8px;
}

.nav__toggle span::after {
  top: 8px;
}

.nav__toggle[aria-expanded="true"] span {
  background: transparent;
}

.nav__toggle[aria-expanded="true"] span::before {
  transform: translateY(8px) rotate(45deg);
}

.nav__toggle[aria-expanded="true"] span::after {
  transform: translateY(-8px) rotate(-45deg);
}

@media (max-width: 980px) {
  .nav__toggle {
    display: block;
    position: absolute;
    right: 0;
  }

  .nav__list {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--sp-3) 0;
    background: #fff;
    border-top: 1px solid var(--c-border);
    box-shadow: var(--shadow-card);
  }

  .nav__list[hidden] {
    display: none;
  }

  .nav__link {
    display: block;
    padding: var(--sp-3) var(--gutter);
  }

  .header__inner {
    position: relative;
    min-height: 72px;
  }

  .header__logo img {
    width: 170px;
  }
}

/* ---- Footer ---- */

.footer {
  padding-block: var(--sp-5);
  background: var(--c-dark);
  color: #fff;
  font-size: 14px;
  text-align: center;
}

.footer a {
  color: var(--c-accent);
}

.footer a:hover {
  text-decoration: underline;
}

/* ---- Floating WhatsApp button ---- */

.whatsapp-fab {
  position: fixed;
  left: 20px;
  bottom: 100px;
  z-index: var(--z-float);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  transition: transform var(--transition);
}

.whatsapp-fab:hover {
  transform: scale(1.08);
  color: #fff;
}

.whatsapp-fab svg {
  width: 30px;
  height: 30px;
  fill: currentColor;
}

/* ---- Generic grid ---- */

.grid {
  display: grid;
  gap: var(--sp-7);
}

.grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid--4 {
  grid-template-columns: repeat(4, 1fr);
}

.grid--2 {
  grid-template-columns: repeat(2, 1fr);
}

.grid--sidebar {
  grid-template-columns: 1.5fr .5fr;
  align-items: start;
  &.inv {
    grid-template-columns: .7fr 1.3fr;
    @media (max-width: 750px) {
      grid-template-columns: 1fr;
    }
  }
}
.separador{
  display: block;
  width: 50px;
  height: 5px;
  background-color: var(--c-accent);
  margin: var(--sp-6) 0;
  &.txt-center{
    margin: var(--sp-6) auto;
  }
}
.border-bt{
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
  padding: var(--sp-6) 0;
}

@media (max-width: 980px) {
  .grid--3,
  .grid--4,
  .grid--2,
  .grid--sidebar {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .grid--3,
  .grid--4,
  .grid--2,
  .grid--sidebar {
    grid-template-columns: 1fr;
  }
}