/* ==========================================================================
   FONTES — AMPLESOFT
   ========================================================================== */

  @font-face {
  font-family: "AmpleSoft";
  src:
    url("../fonts/AmpleSoftPro-Thin.woff2")
    format("woff2");

  font-style: normal;
  font-weight: 100;
  font-display: swap;
}

  @font-face {
  font-family: "AmpleSoft";
  src:
    url("../fonts/AmpleSoftPro-ExtraLight.woff2")
    format("woff2");

  font-style: normal;
  font-weight: 200;
  font-display: swap;
}

  @font-face {
  font-family: "AmpleSoft";
  src:
    url("../fonts/AmpleSoftPro-Light.woff2")
    format("woff2");

  font-style: normal;
  font-weight: 300;
  font-display: swap;
}

  @font-face {
  font-family: "AmpleSoft";
  src:
    url("../fonts/AmpleSoftPro-Regular.woff2")
    format("woff2");

  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

  @font-face {
  font-family: "AmpleSoft";
  src:
    url("../fonts/AmpleSoftPro-Medium.woff2")
    format("woff2");

  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

  @font-face {
  font-family: "AmpleSoft";
  src:
    url("../fonts/AmpleSoftPro-Bold.woff2")
    format("woff2");

  font-style: normal;
  font-weight: 700;
  font-display: swap;
}



/* ========================================================================== 
   MasterTax — landing page estática, responsiva e sem dependência de slider
   ========================================================================== */
:root {
  --color-primary: #ff6a14;
  --color-primary-hover: #e95c00;
  --color-header: #171717;
  --color-text: #282828;
  --color-muted: #6a6a68;
  --color-soft: #f0f0ec;
  --color-line: #deded8;
  --color-white: #ffffff;
  --container: 1180px;
  --header-height: 68px;
  --radius-sm: 4px;
  --radius-md: 28px;
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.1);
  --font-sans: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--color-text);
  background: var(--color-white);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

figure,
p,
h1,
h2,
h3 {
  margin-top: 0;
}

p {
  margin-bottom: 18px;
  color: var(--color-muted);
}

a {
  color: inherit;
}

strong {
  color: var(--color-text);
}

section {
  scroll-margin-top: calc(var(--header-height) + 16px);
}

.container {
  width: min(100% - 48px, var(--container));
  margin-inline: auto;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.skip-link {
  position: fixed;
  top: 8px;
  left: -9999px;
  z-index: 1000;
  padding: 10px 14px;
  color: #111;
  background: #fff;
  border-radius: var(--radius-sm);
}

.skip-link:focus {
  left: 8px;
}

/* Buttons ----------------------------------------------------------------- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 44px;
  padding: 12px 24px;
  border: 0;
  border-radius: var(--radius-sm);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.button:hover,
.button:focus-visible {
  transform: translateY(-2px);
}

.button:focus-visible {
  outline: 3px solid rgba(255, 106, 20, 0.35);
  outline-offset: 3px;
}

.button--accent {
  color: #fff;
  background: var(--color-primary);
  box-shadow: 0 10px 24px rgba(255, 106, 20, 0.2);
}

.button--accent:hover,
.button--accent:focus-visible {
  background: var(--color-primary-hover);
}

.button--header {
  min-height: 38px;
  padding: 10px 19px;
  color: #fff;
  background: #666662;
  font-size: 0.82rem;
}

.button--header:hover,
.button--header:focus-visible {
  background: #777772;
}

.button--center {
  display: flex;
  width: fit-content;
  margin: 34px auto 0;
}

/* Header ------------------------------------------------------------------ */
/* ==========================================================================
   HEADER TRANSPARENTE SOBRE O HERO
   ========================================================================== */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;

  width: 100%;
  height: var(--header-height);

  display: flex;
  align-items: center;

  /*
   * Estado inicial:
   * totalmente transparente sobre o hero.
   */
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.34);
  box-shadow: none;

  backdrop-filter: none;
  -webkit-backdrop-filter: none;

  transition:
    background-color 420ms ease,
    border-color 420ms ease,
    box-shadow 420ms ease,
    backdrop-filter 420ms ease;
}

/*
 * Estado após 10% da rolagem.
 */
.site-header.is-scrolled {
  background-color: rgba(15, 15, 15, 0.74);
  border-bottom-color: rgba(255, 255, 255, 0.18);

  box-shadow:
    0 8px 30px rgba(0, 0, 0, 0.16);

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.header-inner {
  height: 100%;

  display: flex;
  align-items: center;
  justify-content: flex-start;

  gap: 24px;
}

/* Área da logo */
.brand {
  height: 100%;

  display: inline-flex;
  align-items: center;

  padding-right: clamp(28px, 3vw, 48px);

  border-right: 1px solid rgba(255, 255, 255, 0.24);

  text-decoration: none;
}

/*
 * No topo, toda a logo fica branca.
 */
.brand__logo {
  display: block;

  width: 145px;
  max-width: 100%;
  height: auto;

  filter:
    brightness(0)
    invert(1);

  transition:
    filter 420ms ease,
    opacity 420ms ease,
    transform 220ms ease;
}

/*
 * Após a rolagem, volta para a versão original,
 * com o ícone colorido.
 */
.site-header.is-scrolled .brand__logo {
  filter: none;
}

.brand:hover .brand__logo,
.brand:focus-visible .brand__logo {
  opacity: 0.9;
}

/* Navegação principal */
.site-nav {
  display: flex;
  align-items: center;
  gap: 34px;
  margin-right: auto;
}

.site-nav a {
  color: #fff;
  text-decoration: none;
  font-size: 0.94rem;
  font-weight: 700;
}

.site-nav a:hover { color: #ffb181; }

.nav-item--dropdown {
  position: relative;
}

.nav-item--dropdown > a {
  display: inline-flex;
  align-items: center;
}

.nav-caret {
  display: inline-flex;
  margin-left: 3px;
  line-height: 0;
}

.nav-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 10;
  flex-direction: column;
  min-width: 226px;
  padding: 28px 0 10px;
}

.nav-dropdown::before {
  content: "";
  position: absolute;
  top: 18px;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  background: rgba(20, 20, 20, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.nav-item--dropdown:hover .nav-dropdown,
.nav-item--dropdown:focus-within .nav-dropdown {
  display: flex;
}

.nav-dropdown a {
  position: relative;
  padding: 10px 22px;
  font-size: 0.88rem;
  font-weight: 600;
  white-space: nowrap;
}

.nav-dropdown a:hover { background: rgba(255, 255, 255, 0.06); }

.nav-toggle {
  display: none;
  padding: 6px;
  background: none;
  border: 0;
}

.nav-toggle span:not(.visually-hidden) {
  display: block;
  width: 24px;
  height: 2px;
  margin: 5px 0;
  background: #fff;
}

@media (max-width: 760px) {
  .header-inner { gap: 15px; }

  .brand {
    margin-right: auto;
  }

  .nav-toggle { display: block; }

  .site-nav {
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    z-index: 999;
    display: none;
    flex-direction: column;
    align-items: flex-start;
    padding: 24px 28px;
    background: #1c1c1a;
  }

  .site-nav.is-open { display: flex; }

  .button--header { display: none; }

  .nav-item--dropdown {
    width: 100%;
  }

  .nav-dropdown {
    display: flex;
    position: static;
    margin: 6px 0 4px 14px;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
  }

  .nav-dropdown::before {
    display: none;
  }

  .nav-dropdown a {
    padding: 8px 0;
    font-weight: 600;
    opacity: 0.85;
  }
}


/* Botão do header */
.button--header {
  min-height: 44px;

  padding:
    11px
    clamp(18px, 2.2vw, 30px);

  color: #ffffff;
  background-color: rgba(120, 120, 120, 0.56);

  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 7px;

  font-size: clamp(0.78rem, 1vw, 0.92rem);
  font-weight: 700;
  line-height: 1.2;

  box-shadow: none;

  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);

  transition:
    background-color 300ms ease,
    border-color 300ms ease,
    transform 180ms ease,
    box-shadow 300ms ease;
}

.site-header.is-scrolled .button--header {
  background-color: rgba(105, 105, 105, 0.82);
  border-color: rgba(255, 255, 255, 0.08);
}

.button--header:hover,
.button--header:focus-visible {
  color: #ffffff;
  background-color: rgba(130, 130, 130, 0.92);

  box-shadow:
    0 10px 26px rgba(0, 0, 0, 0.2);

  transform: translateY(-1px);
}

.button--header:focus-visible {
  outline: 3px solid rgba(255, 106, 20, 0.4);
  outline-offset: 3px;
}

/*
 * Garante que nenhuma margem ou espaçamento
 * coloque uma faixa branca entre o header e o hero.
 */
main {
  margin-top: 0;
  padding-top: 0;
}

.hero {
  margin-top: 0;
}

/* Tablet */
@media (max-width: 980px) {
  .brand {
    padding-right: 24px;
  }

  .brand__logo {
    width: 138px;
  }
}

/* Celular */
@media (max-width: 720px) {
  .brand {
    padding-right: 16px;
  }

  .brand__logo {
    width: 122px;
  }

  .button--header {
    min-height: 38px;
    padding: 9px 13px;
    font-size: 0.72rem;
  }
}

@media (max-width: 480px) {
  .brand {
    padding-right: 0;
    border-right: 0;
  }

  .brand__logo {
    width: 112px;
  }

  .button--header {
    max-width: 154px;
    min-height: 36px;
    padding: 8px 10px;
    line-height: 1.12;
  }
}
/* Hero -------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: min(820px, calc(100svh - var(--header-height)));
  display: grid;
  align-items: center;
  overflow: hidden;
  color: #fff;
  background: #111;
}

.hero__media,
.hero__overlay {
  position: absolute;
  inset: 0;
}

.hero__media img,
.hero__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero__media video {
  position: absolute;
  inset: 0;
}

.hero__overlay {
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.4) 100%);
}

.hero__inner {
  position: relative;
  z-index: 1;
  padding-block: 76px 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.hero__content {
  max-width: 620px;
}

.hero__mockup {
  display: none;
}

.hero__mockup img {
  display: block;
  width: 100%;
  height: auto;
}

@media (min-width: 1200px) {
  .hero__mockup {
    display: block;
    flex: 0 0 auto;
    width: min(540px, 34vw);
  }
}

.hero h1 {
  max-width: 590px;
  margin-bottom: 24px;
  color: #fff;
  font-size: 48px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: normal;
}

.hero p {
  max-width: 590px;
  color: rgba(255, 255, 255, 0.9);
  font-family: "AmpleSoft", var(--font-sans);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.5;
}

.hero__note {
  margin-top: -2px;
  font-size: 0.84rem !important;
  color: rgba(255, 255, 255, 0.78) !important;
}

.hero .button {
  margin-top: 10px;
}

.hero__subtext {
  max-width: 680px !important;
  margin: 18px 0 0;
  font-size: 0.86rem !important;
  color: rgba(255, 255, 255, 0.72) !important;
}

/* Customer logos: maximum of two carousels ------------------------------- */
.clients {
  overflow: hidden;
  padding: 18px 0;
  background: #fff;
  border-bottom: 1px solid #eee9e2;
}

.logo-marquee {
  --logo-gap: 58px;
  overflow: hidden;
  padding-block: 12px;
  mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%);
}

.logo-marquee + .logo-marquee {
  border-top: 1px solid #eee9e2;
}

.logo-marquee__track {
  display: flex;
  width: max-content;
  gap: var(--logo-gap);
  will-change: transform;
  animation: logo-marquee 34s linear infinite;
}

.logo-marquee--reverse .logo-marquee__track {
  animation-direction: reverse;
  animation-duration: 39s;
}

.logo-marquee__group {
  display: flex;
  align-items: center;
  gap: var(--logo-gap);
  flex: 0 0 auto;
}

.logo-marquee img {
  width: 112px;
  height: 36px;
  object-fit: contain;
  flex: 0 0 auto;
  filter: grayscale(1) contrast(0.8);
  opacity: 0.72;
  transition: filter 180ms ease, opacity 180ms ease;
}

/* Logos começam em preto e branco */
.logo-marquee img {
  width: 112px;
  height: 36px;
  object-fit: contain;
  flex: 0 0 auto;

  filter: grayscale(1) contrast(0.8);
  opacity: 0.72;

  transition:
    filter 220ms ease,
    opacity 220ms ease,
    transform 220ms ease;
}

/* Somente a logo sob o mouse fica colorida */
.logo-marquee img:hover {
  filter: grayscale(0) contrast(1);
  opacity: 1;
  transform: scale(1.05);
}

.logo-marquee.is-paused .logo-marquee__track {
  animation-play-state: paused;
}

@keyframes logo-marquee {
  to {
    transform: translate3d(calc(-50% - (var(--logo-gap) / 2)), 0, 0);
  }
}

/* Generic sections ------------------------------------------------------- */
.section {
  padding: 92px 0;
}

.section--compact {
  padding-top: 64px;
}

.section--soft {
  background: var(--color-soft);
}

.two-column {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(44px, 6vw, 86px);
  align-items: center;
}

.two-column--reverse .section-copy {
  order: 1;
}

.two-column--reverse .media-card {
  order: 2;
}

.two-column--feature {
  align-items: center;
}

.section-copy h2 {
  margin-bottom: 26px;
  color: #151515;
  font-size: clamp(1.7rem, 2.4vw, 2.3rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: normal;
  text-transform: none;
}

.section-copy--bordered {
  position: relative;
  padding-left: 30px;
}

.section-copy--bordered::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 0;
  width: 1px;
  height: 72px;
  background: rgba(255, 106, 20, 0.55);
}

.eyebrow {
  margin-bottom: 12px;
  color: #4b4a48;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.eyebrow--center {
  text-align: center;
}

.media-card {
  margin: 0;
  overflow: hidden;
  background: #e7e7e2;
}

.media-card img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.media-card--feature {
  align-self: center;
  border-radius: 0 44px 0 0;
}

.media-card--top-right {
  border-radius: 0 42px 0 42px;
}

.media-card--top-left {
  border-radius: 42px 0 42px 0;
}

/* ==========================================================================
   MASTER OBRIGAÇÕES — FUNCIONALIDADES
   Baseado na estrutura da página original
   ========================================================================== */

.features-section {
  width: 100%;

  padding:
    78px
    0
    100px;

  background: #e7e5e3;
}

/* ==========================================================================
   COMO O MASTER OBRIGAÇÕES PODE AJUDAR A SUA EQUIPE
   ========================================================================== */

.team-help {
  width: 100%;

  padding:
    88px
    0
    92px;

  background: #f4f4f1;
}


/* ==========================================================================
   GRID
   ========================================================================== */

.team-help__grid {
  display: grid;

  grid-template-columns:
    minmax(0, 1.08fr)
    minmax(0, .92fr);

  gap:
    clamp(
      44px,
      5vw,
      74px
    );

  align-items: center;
}


/* ==========================================================================
   IMAGEM
   ========================================================================== */

.team-help__media {
  margin: 0;

  width: 100%;

  overflow: hidden;

  border-radius:
    0
    70px
    0
    70px;
}


.team-help__media img {
  display: block;

  width: 100%;
  height: 485px;

  object-fit: cover;

  object-position: center;
}


/* ==========================================================================
   CONTEÚDO
   ========================================================================== */

.team-help__content {
  max-width: 610px;
}


/* ==========================================================================
   TÍTULO + LINHA LARANJA
   ========================================================================== */

.team-help__heading {
  position: relative;

  padding-left: 38px;

  margin-bottom: 38px;
}


.team-help__heading::before {
  content: "";

  position: absolute;

  top: 0;
  left: 0;

  width: 1px;
  height: 48px;

  background: #ff9b48;
}


.team-help__heading .eyebrow {
  margin:
    0
    0
    26px;

  color: #66584b;

  font-family:
    "AmpleSoft",
    var(--font-sans);

  font-size: .92rem;

  font-weight: 700;

  letter-spacing: .22em;

  text-transform: uppercase;
}


.team-help__heading h2 {
  max-width: 590px;

  margin: 0;

  color: #151515;

  font-family:
    "AmpleSoft",
    var(--font-sans);

  font-size:
    clamp(
      2rem,
      2.6vw,
      2.8rem
    );

  font-weight: 700;

  line-height: 1.2;

  letter-spacing: -.015em;

  text-transform: none;
}


/* ==========================================================================
   LISTA
   ========================================================================== */

.team-help__list {
  display: flex;

  flex-direction: column;

  gap: 16px;

  margin:
    0
    0
    38px;

  padding: 0;

  list-style: none;
}


.team-help__list li {
  position: relative;

  padding-left: 31px;

  color: #55524f;

  font-size: 1rem;

  line-height: 1.45;
}


.team-help__list li::before {
  content: "✓";

  position: absolute;

  top: -2px;
  left: 0;

  color: #ff6a14;

  font-size: 1.35rem;

  font-weight: 800;
}


/* ==========================================================================
   BOTÃO
   ========================================================================== */

.team-help__button {
  min-width: 355px;

  min-height: 60px;

  padding:
    17px
    30px;

  justify-content: center;

  border-radius: 5px;

  font-size: 1rem;
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 980px) {

  .team-help__grid {
    grid-template-columns: 1fr;

    gap: 48px;
  }


  .team-help__media {
    width: min(
      100%,
      720px
    );

    margin-inline: auto;
  }


  .team-help__media img {
    height: auto;

    aspect-ratio: 16 / 10;
  }


  .team-help__content {
    max-width: 720px;
  }

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 720px) {

  .team-help {
    padding:
      64px
      0
      70px;
  }


  .team-help__media {
    border-radius:
      0
      44px
      0
      44px;
  }


  .team-help__heading {
    padding-left: 24px;
  }


  .team-help__heading::before {
    height: 40px;
  }


  .team-help__heading h2 {
    font-size: 1.85rem;
  }


  .team-help__button {
    width: 100%;

    min-width: 0;
  }

}
/* ==========================================================================
   CABEÇALHO
   ========================================================================== */

.features-heading {
  text-align: center;
}


.features-section .eyebrow {
  margin-bottom: 20px;

  color: #5b5047;

  font-family:
    "AmpleSoft",
    var(--font-sans);

  font-size: .88rem;

  font-weight: 700;

  letter-spacing: .22em;

  text-transform: uppercase;
}


.features-title {
  max-width: 1120px;

  margin:
    0
    auto;

  color: #151515;

  font-family:
    "AmpleSoft",
    var(--font-sans);

  font-size:
    clamp(
      1.9rem,
      2.4vw,
      2.55rem
    );

  font-weight: 700;

  line-height: 1.2;

  text-align: center;
}


/* ==========================================================================
   GRID DOS 3 CARDS
   ========================================================================== */

.feature-cards--three {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 30px;

  margin-top: 46px;
}


/* ==========================================================================
   CARD
   ========================================================================== */

.features-section .feature-card {
  min-height: 365px;

  display: flex;

  flex-direction: column;

  align-items: flex-start;

  padding:
    34px
    30px
    32px;

  color: #fff !important;

  background:
    #66584b !important;

  border:
    0 !important;

  border-radius:
    0
    34px
    0
    34px !important;

  box-shadow: none;
}


/* ==========================================================================
   ÍCONE + FLOW / CHECK / DELIVERY
   ========================================================================== */

.feature-card__label {
  display: flex;

  align-items: center;

  gap: 14px;

  margin-bottom: 28px;
}


.feature-card__icon {
  width: 36px;
  height: 36px;

  flex:
    0
    0
    36px;

  color: #ffb25b;
}


.feature-card__icon svg {
  display: block;

  width: 100%;
  height: 100%;

  fill: none;

  stroke: currentColor;

  stroke-width: 2;

  stroke-linecap: round;
  stroke-linejoin: round;
}


.feature-card__label > span {
  color: #fff;

  font-family:
    "AmpleSoft",
    var(--font-sans);

  font-size: .9rem;

  font-weight: 700;

  line-height: 1;

  letter-spacing: .2em;

  text-transform: uppercase;
}


/* ==========================================================================
   TEXTO DOS CARDS
   ========================================================================== */

.features-section .feature-card h3 {
  margin:
    0
    0
    17px;

  color:
    #fff !important;

  font-family:
    "AmpleSoft",
    var(--font-sans);

  font-size:
    1.35rem;

  font-weight: 700;

  line-height: 1.3;
}


.features-section .feature-card p {
  margin:
    0
    0
    16px;

  color:
    rgba(
      255,
      255,
      255,
      .96
    ) !important;

  font-size:
    .93rem;

  line-height: 1.62;
}


.features-section
.feature-card p:last-child {
  margin-bottom: 0;
}


/* ==========================================================================
   FLOW / CHECK / DELIVERY — DETALHES
   ========================================================================== */

.feature-detail {
  display: grid;

  grid-template-columns:
    minmax(0, 5fr)
    minmax(0, 6fr);

  gap:
    clamp(
      48px,
      7vw,
      100px
    );

  align-items: center;

  padding-top:
    clamp(
      80px,
      9vw,
      125px
    );
}


/* ==========================================================================
   IMAGEM
   ========================================================================== */

.feature-detail__media {
  margin: 0;
}


.feature-detail__media img {
  display: block;

  width: 100%;
  height: auto;

  object-fit: contain;
}


/* ==========================================================================
   TEXTO
   ========================================================================== */

.feature-detail__content {
  position: relative;
  max-width: 610px;
  padding-left: 30px;
}

.feature-detail__content::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 0;
  width: 1px;
  height: 72px;
  background: rgba(255, 106, 20, 0.55);
}


.feature-detail__content .eyebrow {
  margin-bottom: 14px;

  color: #5b5047;
}


.feature-detail__content h2 {
  margin:
    0
    0
    30px;

  color: #181818;

  font-family:
    "AmpleSoft",
    var(--font-sans);

  font-size:
    clamp(
      1.8rem,
      2.55vw,
      2.65rem
    );

  font-weight: 700;

  line-height: 1.2;

  letter-spacing: -.01em;

  text-transform: none;
}


/* ==========================================================================
   CHECK LIST
   ========================================================================== */

.feature-check-list {
  margin: 0;

  padding: 0;

  list-style: none;
}


.feature-check-list li {
  position: relative;

  margin-bottom: 17px;

  padding-left: 28px;

  color: #5f5d59;

  font-size: .97rem;

  line-height: 1.55;
}


.feature-check-list li::before {
  content: "✓";

  position: absolute;

  top: 0;
  left: 0;

  color: #ff6a14;

  font-size: 1.05rem;

  font-weight: 800;
}


/* ==========================================================================
   HOVER DOS CARDS
   ========================================================================== */

.features-section .feature-card {
  transition:
    transform .25s ease,
    box-shadow .25s ease;
}


.features-section .feature-card:hover {
  transform:
    translateY(-4px);

  box-shadow:
    0
    16px
    34px
    rgba(0, 0, 0, .11);
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 980px) {

  .feature-cards--three {
    grid-template-columns: 1fr;
  }


  .features-section .feature-card {
    min-height: 0;
  }


  .feature-detail,
  .feature-detail--reverse {
    grid-template-columns: 1fr;

    gap: 42px;

    padding-top: 80px;
  }


  .feature-detail--reverse
  .feature-detail__content {
    order: 2;
  }


  .feature-detail--reverse
  .feature-detail__media {
    order: 1;
  }


  .feature-detail__media {
    width: min(100%, 650px);

    margin-inline: auto;
  }


  .feature-detail__content {
    max-width: 720px;
  }

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 720px) {

  .features-section {
    padding:
      58px
      0
      72px;
  }


  .feature-cards--three {
    gap: 18px;

    margin-top: 38px;
  }


  .features-section .feature-card {
    padding:
      30px
      25px;
  }


  .feature-detail {
    padding-top: 64px;
  }


  .feature-detail__content h2 {
    font-size: 1.75rem;
  }

}
/* Dark statement --------------------------------------------------------- */
.statement {
  position: relative;
  min-height: 430px;
  display: grid;
  align-items: center;
  overflow: hidden;
  color: #fff;
  background: #09131d;
}

.statement__media,
.statement__overlay {
  position: absolute;
  inset: 0;
}

.statement__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.statement__overlay {
  background: rgba(1, 10, 18, 0.76);
}

.statement__content {
  position: relative;
  z-index: 1;
  max-width: 940px;
  padding-block: 76px;
  text-align: center;
}

.statement h2 {
  max-width: 780px;
  margin: 0 auto 20px;
  color: #fff;
  font-weight: 700;
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  line-height: 1.35;
  letter-spacing: normal;
  text-transform: none;
}

.statement p {
  max-width: 760px;
  margin: 0 auto 13px;
  color: rgba(255, 255, 255, 0.86);
}

.statement .eyebrow {
  color: rgba(255, 255, 255, 0.85);
}

.statement__line {
  display: block;
  width: 92px;
  height: 2px;
  margin: 28px auto 0;
  background: var(--color-primary);
}

/* Faixa "Eficiência" — imagem já traz o texto e o botão
   compostos; a faixa segue a proporção da foto e o botão real
   é posicionado exatamente sobre o botão que já está na imagem. */
.statement--photo-banner {
  min-height: 0;
  aspect-ratio: 1900 / 642;
}

.statement--photo-banner .statement__content {
  position: absolute;
  inset: 0;
  max-width: none;
  padding-block: 0;
}

.statement--photo-banner .statement__cta {
  position: absolute;
  left: 50%;
  top: 73.4%;
  transform: translate(-50%, -50%);
  margin: 0;
  white-space: nowrap;
}

@media (max-width: 720px) {
  .statement--photo-banner {
    aspect-ratio: auto;
    min-height: 320px;
  }

  .statement--photo-banner .statement__cta {
    font-size: 0.82rem;
    padding: 12px 18px;
  }
}

/* FAQ -------------------------------------------------------------------- */
.faq {
  text-align: center;
}

.faq h2,
.solutions h2 {
  margin-bottom: 38px;
  font-size: clamp(1.7rem, 2.4vw, 2.35rem);
  line-height: 1.25;
}

.accordion {
  max-width: 900px;
  margin: 0 auto;
  text-align: left;
}

.accordion__item {
  margin-bottom: 11px;
  overflow: hidden;
  background: #f3f3ef;
  border: 1px solid #e5e5de;
}

.accordion__item summary {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: 15px 48px 15px 18px;
  color: #333;
  font-weight: 700;
  list-style: none;
  cursor: pointer;
}

.accordion__item summary::-webkit-details-marker {
  display: none;
}

.accordion__item summary::after {
  content: "+";
  position: absolute;
  right: 18px;
  color: var(--color-primary);
  font-size: 1.3rem;
}

.accordion__item[open] summary::after {
  content: "−";
}

.accordion__item p {
  padding: 0 18px 18px;
  margin: 0;
}


/* Solutions circles ------------------------------------------------------ */
.solutions {
  min-height: max(760px, calc(100svh - var(--header-height)));
  display: grid;
  align-items: center;
  overflow: hidden;
  padding-block: clamp(88px, 11vh, 138px);
  text-align: center;
}

.solutions .container {
  width: min(100% - 32px, 1500px);
}

.solutions h2 {
  max-width: 860px;
  margin: 0 auto;
}

.solutions-grid {
  --solution-size: clamp(300px, min(31vw, 58svh), 600px);

  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
  min-height: calc(var(--solution-size) + 76px);
  margin-top: clamp(44px, 6vh, 72px);
  padding-block: 30px;
  overflow: visible;
}

.solution-card {
  position: relative;
  width: var(--solution-size);
  height: var(--solution-size);
  margin-left: calc(var(--solution-size) * -0.54);
  display: flex;
  flex: 0 0 auto;
  align-items: stretch;
  justify-content: center;
  overflow: hidden;
  color: #242424;
  background-color: #ffffff;
  border: 1px solid rgba(255, 106, 20, 0.55);
  border-radius: 50%;
  text-align: left;
  text-decoration: none;
  transform: none;
  transition:
    color 380ms ease,
    background-color 380ms ease,
    border-color 380ms ease,
    box-shadow 420ms ease;
}

.solution-card:first-child {
  margin-left: 0;
}

/* Os círculos mais próximos do centro ficam acima dos círculos laterais. */
.solution-card:nth-child(1) {
  z-index: 1;
}

.solution-card:nth-child(2) {
  z-index: 2;
}

.solution-card:nth-child(3) {
  z-index: 3;
}

.solution-card:nth-child(4) {
  z-index: 2;
}

.solution-card:nth-child(5) {
  z-index: 1;
}

.solution-card__media,
.solution-card__overlay {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

.solution-card__media {
  inset: -7%;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 420ms ease,
    visibility 420ms ease;
}

.solution-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) blur(4px);
  transform: scale(1.1);
}

/* O placeholder fica invisível; o círculo ativo mantém o fundo escuro. */
.solution-card__media img[src*="placeholders/module-background.svg"] {
  opacity: 0;
}

.solution-card__overlay {
  z-index: 1;
  opacity: 0;
  visibility: hidden;
  background:
    linear-gradient(135deg, rgba(14, 16, 16, 0.8), rgba(20, 22, 22, 0.62)),
    radial-gradient(circle at 35% 30%, rgba(255, 106, 20, 0.1), transparent 46%);
  transition:
    opacity 380ms ease,
    visibility 380ms ease;
}

.solution-card__content {
  position: relative;
  z-index: 3;
  width: 62%;
  max-width: 340px;
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(16px, 2.1vh, 22px);
}

.solution-card__logo {
  width: auto;
  max-width: 100%;
  height: clamp(38px, min(4.2vw, 7svh), 72px);
  object-fit: contain;
  object-position: left center;
  flex: 0 0 auto;
}

.solution-card__description {
  display: block;
  color: inherit;
  font-size: clamp(0.86rem, 1vw, 1.1rem);
  line-height: 1.55;
}

/* O módulo ativo fica acima dos demais sem mudar de posição ou tamanho. */
.solution-card.is-active,
.solution-card:hover,
.solution-card:focus-visible {
  z-index: 100;
  color: #ffffff;
  background-color: #303333;
  border-color: #ff6a14;
  box-shadow: 0 28px 62px rgba(0, 0, 0, 0.26);
  transform: scale(1.08);
}

.solution-card.is-active .solution-card__media,
.solution-card:hover .solution-card__media,
.solution-card:focus-visible .solution-card__media {
  opacity: 1;
  visibility: visible;
}

.solution-card.is-active .solution-card__overlay,
.solution-card:hover .solution-card__overlay,
.solution-card:focus-visible .solution-card__overlay {
  opacity: 1;
  visibility: visible;
}

.solution-card.is-active .solution-card__logo,
.solution-card:hover .solution-card__logo,
.solution-card:focus-visible .solution-card__logo {
  filter: brightness(1.2) contrast(1.04);
}

.solution-card:focus-visible {
  outline: 3px solid rgba(255, 106, 20, 0.52);
  outline-offset: 5px;
}

@media (max-width: 980px) {
  .solutions {
    min-height: auto;
  }

  .solutions-grid {
    --solution-size: clamp(270px, 38vw, 330px);
    flex-wrap: wrap;
    gap: 18px;
    min-height: 0;
  }

  .solution-card,
  .solution-card:first-child {
    margin-left: 0;
  }
}

@media (max-width: 720px) {
  .solutions {
    padding-block: 72px;
  }

  .solutions-grid {
    --solution-size: min(84vw, 330px);
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 18px;
    margin-top: 38px;
    padding-block: 0;
  }

  .solution-card,
  .solution-card:first-child {
    width: var(--solution-size);
    height: var(--solution-size);
    margin-left: 0;
  }

  .solution-card__content {
    width: 64%;
  }
}

/* HubSpot form section ---------------------------------------------------- */
.demo {
  padding: 84px 0;
  background: #2f281f;
}

.demo__shell {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  overflow: hidden;
  background: #fff;
  border-radius: 0 44px 0 44px;
  box-shadow: var(--shadow);
}

.demo__form {
  min-height: 610px;
  padding: 52px clamp(28px, 4vw, 58px);
  background: #fff;
}

.demo__media {
  margin: 0;
  min-height: 610px;
}

.demo__media img {
  width: 100%;
  height: 100%;
  min-height: 610px;
  object-fit: cover;
}

.hs-form-frame {
  min-height: 500px;
}

/* Footer ------------------------------------------------------------------ */
/* ==========================================================================
   FOOTER — MASTER TAX
   COMPATÍVEL COM O HTML ATUAL
   ========================================================================== */

.site-footer {
  width: 100%;

  padding: 0;

  background: #66584b;

  color: #fff;

  font-size: 16px;
}


/* ==========================================================================
   PARTE PRINCIPAL
   ========================================================================== */

.footer-top {
  width: 100%;

  padding:
    72px
    0
    64px;
}


/* ==========================================================================
   ESTRUTURA
   --------------------------------------------------------------------------
   50% marca
   25% contatos
   25% menus
   ========================================================================== */

.footer-layout {
  display: grid;

  grid-template-columns:
    minmax(0, 2fr)
    minmax(0, 1fr)
    minmax(0, 1fr);

  gap: 54px;

  align-items: start;
}


.footer-col {
  min-width: 0;
}


/* ==========================================================================
   PRIMEIRA COLUNA — MARCA
   ========================================================================== */

.footer-brand-row {
  display: flex;

  align-items: center;

  gap: 38px;
}


/* ==========================================================================
   LOGO
   ========================================================================== */

.footer-logo {
  display: block;

  flex:
    0
    0
    226px;
}


.footer-logo img {
  display: block;

  width: 226px;
  height: auto;

  max-width: 100%;

  filter: none;
}


/* ==========================================================================
   REDES SOCIAIS SUPERIORES
   ========================================================================== */

.footer-social-boxes {
  display: flex;

  align-items: center;

  gap: 8px;

  flex-wrap: nowrap;
}


.footer-social-boxes a {
  width: 44px;
  height: 44px;

  flex:
    0
    0
    44px;

  display: flex;

  align-items: center;
  justify-content: center;

  padding: 0;

  color: #fff;

  background: transparent;

  border:
    1.5px solid
    rgba(255, 255, 255, .9);

  border-radius: 6px;

  text-decoration: none;

  box-sizing: border-box;

  transition:
    background-color .2s ease,
    border-color .2s ease;
}


.footer-social-boxes a:hover {
  background: #ff6a14;

  border-color: #ff6a14;
}


.footer-social-boxes svg {
  display: block;

  width: 16px;
  height: 16px;

  fill: none;

  stroke: currentColor;

  stroke-width: 2;

  stroke-linecap: round;
  stroke-linejoin: round;
}


.footer-social-boxes svg .footer-social-fill {
  fill: currentColor;

  stroke: none;
}


/* ==========================================================================
   FRASE PRINCIPAL
   ========================================================================== */

.footer-brand-text {
  max-width: 680px;

  margin:
    34px
    0
    0;

  color: #fff;

  font-family:
    "AmpleSoft",
    var(--font-sans);

  font-size:
    clamp(
      1.55rem,
      1.8vw,
      2rem
    );

  font-weight: 700;

  line-height: 1.35;
}


/* ==========================================================================
   CONTATOS
   ========================================================================== */

.footer-col--contact h3,
.footer-menu h3 {
  margin:
    0
    0
    22px;

  color: #fff;

  font-family:
    "AmpleSoft",
    var(--font-sans);

  font-size: 1.2rem;

  font-weight: 700;

  line-height: 1.2;
}


.footer-email {
  display: flex;

  align-items: flex-start;

  gap: 8px;

  color: #fff;

  text-decoration: none;

  font-size: .92rem;

  line-height: 1.75;
}


.footer-email svg {
  width: 18px;
  height: 18px;

  flex:
    0
    0
    18px;

  margin-top: 4px;

  fill: none;

  stroke: #ffb25b;

  stroke-width: 2;

  stroke-linecap: round;
  stroke-linejoin: round;
}


/* ==========================================================================
   REDES SOCIAIS DOS CONTATOS
   ========================================================================== */

.footer-social-inline {
  display: flex;

  align-items: center;

  gap: 25px;

  margin-top: 26px;
}


.footer-social-inline a {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  padding: 0;

  color: #fff;

  text-decoration: none;

  font-size: .85rem;

  font-weight: 700;

  line-height: 1;
}


.footer-social-inline a:hover {
  color: #ffb25b;
}


/* ==========================================================================
   ÚLTIMA COLUNA — INSTITUCIONAL + SOLUÇÕES
   ========================================================================== */

.footer-col--menus {
  display: grid;

  grid-template-columns:
    1fr
    1fr;

  gap: 38px;

  min-width: 0;
}


.footer-menu {
  min-width: 0;
}


.footer-menu a {
  display: block;

  width: fit-content;

  margin:
    0
    0
    13px;

  color:
    rgba(
      255,
      255,
      255,
      .97
    );

  text-decoration: none;

  font-size: .92rem;

  line-height: 1.35;

  transition:
    color .2s ease;
}


.footer-menu a:hover {
  color: #ffb25b;
}


/* ==========================================================================
   FAIXA LARANJA
   ========================================================================== */

.footer-bottom {
  width: 100%;

  padding:
    14px
    0;

  background: #ff6a14;

  color: #fff;

  font-size: .72rem;
}


.footer-bottom__inner {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 30px;
}


.footer-bottom a {
  color: #fff;

  text-decoration: none;
}


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


.footer-credit {
  margin-left: auto;

  color: #fff;

  text-align: right;

  white-space: nowrap;
}


/* ==========================================================================
   NOTEBOOK
   ========================================================================== */

@media (max-width: 1150px) {

  .footer-layout {
    grid-template-columns:
      minmax(0, 1.6fr)
      minmax(0, .9fr)
      minmax(0, 1fr);

    gap: 36px;
  }


  .footer-brand-row {
    gap: 24px;
  }


  .footer-logo {
    flex-basis: 205px;
  }


  .footer-logo img {
    width: 205px;
  }


  .footer-social-boxes a {
    width: 38px;
    height: 38px;

    flex-basis: 38px;
  }


  .footer-brand-text {
    font-size: 1.5rem;
  }

}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 920px) {

  .footer-layout {
    grid-template-columns:
      1fr
      1fr;

    gap:
      46px
      55px;
  }


  .footer-col--brand {
    grid-column:
      1 / -1;
  }


  .footer-brand-text {
    max-width: 720px;
  }

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 650px) {

  .footer-top {
    padding:
      52px
      0
      42px;
  }


  .footer-layout {
    grid-template-columns: 1fr;

    gap: 38px;
  }


  .footer-col--brand {
    grid-column: auto;
  }


  .footer-brand-row {
    flex-direction: column;

    align-items: flex-start;
  }


  .footer-logo {
    flex-basis: auto;
  }


  .footer-logo img {
    width: 210px;
  }


  .footer-brand-text {
    margin-top: 28px;

    font-size: 1.4rem;
  }


  .footer-social-boxes {
    flex-wrap: wrap;
  }


  .footer-col--menus {
    grid-template-columns:
      1fr
      1fr;

    gap: 28px;
  }


  .footer-bottom__inner {
    flex-direction: column;

    align-items: flex-start;

    gap: 6px;
  }


  .footer-credit {
    margin-left: 0;

    text-align: left;

    white-space: normal;
  }

}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px 28px;
}

.footer-inner p {
  margin: 0;
  color: inherit;
}

.footer-inner a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Responsive -------------------------------------------------------------- */
@media (max-width: 980px) {
  .hero {
    min-height: 720px;
  }

  .two-column,
  .demo__shell {
    grid-template-columns: 1fr;
  }

  .two-column--reverse .section-copy,
  .two-column--reverse .media-card {
    order: initial;
  }

  .media-card--feature {
    max-width: 680px;
    margin-inline: auto;
  }

  .section-copy {
    max-width: 760px;
  }

  .demo__media,
  .demo__media img {
    min-height: 430px;
  }
}

@media (max-width: 720px) {
  :root {
    --header-height: 62px;
  }

  .container {
    width: min(100% - 32px, var(--container));
  }

  .brand img {
    width: 125px;
  }

  .button--header {
    padding-inline: 12px;
    font-size: 0.72rem;
  }

  .hero {
    min-height: auto;
  }

  .hero__inner {
    padding-block: 72px 54px;
  }

  .hero h1 {
    font-size: clamp(2.25rem, 11vw, 3.2rem);
  }

  .hero__overlay {
    background: rgba(0, 0, 0, 0.72);
  }

  .clients {
    padding-block: 10px;
  }

  .logo-marquee {
    --logo-gap: 38px;
  }

  .logo-marquee img {
    width: 96px;
    height: 31px;
  }

  .section {
    padding: 68px 0;
  }

  .section--compact {
    padding-top: 28px;
  }

  .two-column {
    gap: 38px;
  }

  .section-copy--bordered {
    padding-left: 20px;
  }

  .section-copy h2 {
    letter-spacing: 0.07em;
  }

  .statement__content {
    padding-block: 64px;
  }

  .statement h2 {
    letter-spacing: normal;
  }

  .demo {
    padding: 50px 0;
  }

  .demo__form {
    min-height: 540px;
    padding: 34px 20px;
  }

  .demo__media,
  .demo__media img {
    min-height: 340px;
  }

  .footer-inner {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 480px) {
  .button--header {
    max-width: 150px;
    min-height: 34px;
    padding: 8px 10px;
    line-height: 1.1;
  }

  .hero .button,
  .section-copy .button {
    width: 100%;
  }

  .accordion__item summary {
    font-size: 0.92rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .logo-marquee {
    overflow-x: auto;
    mask-image: none;
    -webkit-mask-image: none;
  }

  .logo-marquee__track {
    animation: none;
  }

  .logo-marquee__group[aria-hidden="true"] {
    display: none;
  }
}
/* ==========================================================================
   AMPLESOFT EM TODOS OS TÍTULOS
   ========================================================================== */

h1,
h2,
h3,
h4,
h5,
h6,
.hero h1,
.section-copy h2,
.features h2,
.statement h2,
.faq h2,
.solutions h2,
.demo h2,
.accordion__item summary,
.eyebrow {
  font-family:
    "AmpleSoft",
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif;
}

/* Títulos principais */
h1,
h2,
h3,
.section-copy h2,
.features h2,
.statement h2,
.faq h2,
.solutions h2,
.demo h2 {
  font-weight: 700;
}

.hero h1 {
  font-weight: 500;
}

/* Títulos pequenos e categorias */
h4,
h5,
h6,
.accordion__item summary,
.eyebrow {
  font-weight: 700;
}
/* ==========================================================================
   Espaçamento e logo do produto no hero
   ========================================================================== */

/*
 * Desce todo o conteúdo do hero,
 * deixando mais espaço em relação ao topo da página.
 */
.hero__content {
  margin-top: clamp(90px, 12vh, 160px);
}

.hero__product-logo {
  display: block;

  width: clamp(190px, 17vw, 270px);
  max-width: 100%;
  height: auto;

  /*
   * Aumenta o espaço entre a logo e o título.
   */
  margin: 0 0 clamp(42px, 5vh, 64px);

  object-fit: contain;
  object-position: left center;
}

.hero__product-logo + h1 {
  margin-top: 0;
}

/* Tablet */
@media (max-width: 980px) {
  .hero__content {
    margin-top: clamp(100px, 13vh, 140px);
  }

  .hero__product-logo {
    width: clamp(180px, 26vw, 240px);
    margin-bottom: 40px;
  }
}

/* Celular */
@media (max-width: 720px) {
  .hero__content {
    margin-top: calc(var(--header-height) + 45px);
  }

  .hero__product-logo {
    width: clamp(160px, 48vw, 220px);
    margin-bottom: 32px;
  }
}


/* ==========================================================================
   FAIXA LARANJA INFERIOR
   ========================================================================== */

.footer-bottom {
  width: 100%;

  padding: 14px 0;

  background: var(--color-primary);

  color: #fff;

  font-size: .72rem;
}


.footer-bottom__inner {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 30px;
}


.footer-bottom a {
  color: #fff;

  text-decoration: none;
}


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


.footer-credit {
  margin-left: auto;

  color: #fff;

  text-align: right;

  white-space: nowrap;
}

/* ==========================================================================
   NOTEBOOK
   ========================================================================== */

@media (max-width: 1200px) {

  .mt-footer-container {
    width:
      calc(100% - 70px);
  }


  .mt-footer-main
  .mt-footer-container {
    grid-template-columns:
      minmax(0, 1.6fr)
      minmax(0, .9fr)
      minmax(0, 1fr);

    gap: 36px;
  }


  .mt-footer-brand-row {
    gap: 24px;
  }


  .mt-footer-logo {
    flex-basis: 205px;
  }


  .mt-footer-logo img {
    width: 205px;
  }


  .mt-footer-social-boxes a {
    width: 38px;
    height: 38px;

    flex-basis: 38px;
  }


  .mt-footer-brand-text {
    font-size: 1.5rem;
  }

}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 920px) {

  .mt-footer-main
  .mt-footer-container {
    grid-template-columns:
      1fr
      1fr;

    gap:
      46px
      55px;
  }


  .mt-footer-brand {
    grid-column:
      1 / -1;
  }


  .mt-footer-brand-text {
    max-width: 720px;
  }

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 650px) {

  .mt-footer-container {
    width:
      calc(100% - 36px);
  }


  .mt-footer-main {
    padding:
      52px
      0
      42px;
  }


  .mt-footer-main
  .mt-footer-container {
    grid-template-columns: 1fr;

    gap: 38px;
  }


  .mt-footer-brand {
    grid-column: auto;
  }


  .mt-footer-brand-row {
    flex-direction: column;

    align-items: flex-start;
  }


  .mt-footer-logo {
    flex-basis: auto;
  }


  .mt-footer-logo img {
    width: 210px;
  }


  .mt-footer-brand-text {
    margin-top: 28px;

    font-size: 1.4rem;
  }


  .mt-footer-social-boxes {
    flex-wrap: wrap;
  }


  .mt-footer-menus {
    gap: 28px;
  }


  .mt-footer-bottom-row {
    flex-direction: column;

    align-items: flex-start;

    gap: 6px;
  }


  .mt-footer-credit {
    margin-left: 0;

    text-align: left;

    white-space: normal;
  }

}
/* ==========================================================================
   WHATSAPP FLUTUANTE
   ========================================================================== */

.whatsapp-float {
  position: fixed;

  right: 28px;
  bottom: 28px;

  z-index: 9999;

  width: 68px;
  height: 68px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: #19cf68;

  border-radius: 50%;

  color: #fff;

  text-decoration: none;

  box-shadow:
    0 7px 20px
    rgba(0, 0, 0, .25);

  transition:
    transform .2s ease,
    box-shadow .2s ease,
    background-color .2s ease;
}


.whatsapp-float svg {
  width: 39px;
  height: 39px;

  fill: currentColor;
}


.whatsapp-float:hover {
  background: #13bd5c;

  transform:
    translateY(-3px)
    scale(1.04);

  box-shadow:
    0 10px 26px
    rgba(0, 0, 0, .28);
}


.whatsapp-float:focus-visible {
  outline:
    3px solid
    rgba(255, 255, 255, .9);

  outline-offset: 4px;
}


/* MOBILE */

@media (max-width: 720px) {

  .whatsapp-float {
    right: 18px;
    bottom: 18px;

    width: 58px;
    height: 58px;
  }


  .whatsapp-float svg {
    width: 34px;
    height: 34px;
  }

}