:root {
  --blue: #004ca5;
  --ink: #151515;
  --muted: #757575;
  --paper: #fff;
  --soft: #f9f9f9;
  --line: #e7e7e7;
  --container: 1132px;
}
.container {
  width: min(var(--container), calc(100% - 48px));
  margin-inline: auto;
}
.site-header {
  height: 100px;
  background: #fff;
  position: relative;
  z-index: 10;
}
.header__inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  color: #757575;
  line-height: 1;
}
.brand__mark {
  background: #757575;
  color: #ebebeb;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  font-size: 25px;
  font-weight: 800;
}
.brand strong {
  display: block;
  font-size: 19px;
  letter-spacing: -0.8px;
}
.brand small {
  display: block;
  font-size: 6px;
  letter-spacing: 1.4px;
  margin-top: 4px;
  text-transform: uppercase;
}
.main-nav {
  display: flex;
  align-items: center;
  gap: 27px;
}
.main-nav a {
  color: #161616;
  font:
    700 11px Montserrat,
    sans-serif;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.main-nav a:hover,
.main-nav .is-active {
  color: var(--blue);
}
.main-nav .nav-cta {
  color: var(--blue);
  border: 2px solid var(--blue);
  padding: 12px 21px;
  border-radius: 8px;
  font-weight: 800;
  letter-spacing: 0.12em;
}
.main-nav .nav-cta:hover {
  background: var(--blue);
  color: #fff;
}
.menu-toggle {
  display: none;
}
.hero {
  min-height: 540px;
  overflow: hidden;
  background-color: #f9f9f9;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='79' height='79' viewBox='0 0 79 79'%3E%3Cpath d='M36.7 35.7 39.5 32.5l2.8 3.2 2.7-3.2.4.5-2.7 3.2 2.7 3.2-.4.4-2.7-3.2-2.8 3.2-.4-.4 2.7-3.2-2.7-3.2z' fill='%23d1d1d1'/%3E%3C/svg%3E");
}
.hero__inner {
  min-height: 540px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
}
.hero__copy {
  align-self: center;
  padding-left: 306px;
  margin-left: -306px;
}
.hero h1 {
  color: var(--blue);
  font:
    700 38px/1.05 Montserrat,
    sans-serif;
  letter-spacing: -0.025em;
  margin: 0 0 32px;
}
.button {
  display: inline-flex;
  align-items: center;
  gap: 28px;
  justify-content: center;
  min-height: 38px;
  padding: 0 20px;
  border-radius: 8px;
  font:
    800 11px Montserrat,
    sans-serif;
  letter-spacing: 0.125em;
}
.button--outline {
  color: var(--blue);
  border: 2px solid var(--blue);
}
.button span {
  font-size: 18px;
  line-height: 0;
}
.button--outline:hover {
  background: var(--blue);
  color: white;
}
.hero__art {
  height: 540px;
  position: relative;
  overflow: hidden;
  background: transparent;
}
.project {
  padding: 111px 0 100px;
  text-align: center;
}
.project h2 {
  font:
    700 30px Montserrat,
    sans-serif;
  letter-spacing: -0.025em;
  margin: 0 0 12px;
}
.lead {
  color: var(--muted);
  font:
    400 18px Roboto,
    sans-serif;
  margin: 0 auto 47px;
  max-width: 700px;
}
.solution-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.solution-card {
  min-height: 330px;
  padding: 28px 36px;
  border: 1px solid var(--line);
  border-radius: 12px;
}
.solution-card__icon {
  margin: 0 auto 23px;
  width: 110px;
  height: 110px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--blue);
  font-size: 52px;
  font-weight: 700;
}
.solution-card h3 {
  color: var(--blue);
  font:
    800 22px Montserrat,
    sans-serif;
  margin: 0 0 12px;
}
.solution-card p {
  color: var(--muted);
  font:
    400 15px/1.45 Roboto,
    sans-serif;
  margin: 0 0 21px;
}
.solution-card a {
  color: var(--blue);
  font:
    700 11px Montserrat,
    sans-serif;
  letter-spacing: 0.125em;
}
.solution-card a span {
  margin-left: 12px;
  font-size: 17px;
}
.development {
  background: #fafafa;
  padding: 92px 0 40px;
}
.development-step {
  min-height: 320px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 74px;
  align-items: center;
  margin-bottom: 30px;
}
.development-step:nth-child(even) .development-step__illustration {
  order: 2;
}
.development-step__illustration {
  height: 280px;
  position: relative;
  display: grid;
  place-items: center;
}
.hexagon {
  width: 180px;
  height: 180px;
  clip-path: polygon(25% 6.7%, 75% 6.7%, 100% 50%, 75% 93.3%, 25% 93.3%, 0 50%);
  background: #f2f2f2;
  color: var(--blue);
  border: 3px solid var(--blue);
  display: grid;
  place-items: center;
  font:
    800 62px Montserrat,
    sans-serif;
}
.orbit {
  position: absolute;
  border: 3px solid var(--blue);
  border-radius: 50%;
  opacity: 0.35;
}
.orbit--a {
  width: 110px;
  height: 110px;
  left: 60px;
  top: 30px;
}
.orbit--b {
  width: 62px;
  height: 62px;
  right: 65px;
  bottom: 27px;
  border-color: #64c0ff;
}
.eyebrow {
  color: var(--blue);
  font:
    700 11px Montserrat,
    sans-serif;
  letter-spacing: 0.2em;
}
.development-step h3 {
  margin: 16px 0 8px;
  font:
    700 22px Montserrat,
    sans-serif;
  letter-spacing: -0.025em;
}
.development-step p {
  color: var(--muted);
  font:
    400 15px/1.48 Roboto,
    sans-serif;
  max-width: 470px;
  margin: 0;
}
.contact-banner {
  padding: 58px 0;
  background: var(--blue);
}
.contact-banner__inner {
  min-height: 163px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 115px;
}
.contact-banner h2 {
  color: #fff;
  font:
    700 30px Montserrat,
    sans-serif;
  letter-spacing: -0.025em;
  margin: 0 0 9px;
}
.contact-banner p {
  color: #fff;
  font:
    400 18px Roboto,
    sans-serif;
  margin: 0;
}
.button--light {
  border: 2px solid #fff;
  color: #fff;
}
.button--light:hover {
  background: #fff;
  color: var(--blue);
}
.site-footer {
  background: #ebebeb;
  padding: 90px 0 0;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.55fr repeat(3, 1fr);
  gap: 36px;
  padding-bottom: 85px;
}
.footer__grid h4 {
  color: var(--muted);
  font:
    700 11px Montserrat,
    sans-serif;
  letter-spacing: 0.2em;
  margin: 0 0 27px;
}
.footer__grid a {
  display: block;
  color: var(--blue);
  font:
    400 18px/2 Roboto,
    sans-serif;
}
.footer__bottom {
  height: 60px;
  background: #f9f9f9;
  color: #b1b1b1;
  display: grid;
  place-items: center;
  font:
    400 11px Roboto,
    sans-serif;
}
.whatsapp-float {
  display: none;
}
.hero__art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.brand img {
  display: block;
  width: 185px;
  height: 41px;
}
.brand--footer {
  filter: grayscale(1);
  opacity: 0.68;
}
.solution-card__icon {
  background: transparent;
}
.solution-card__icon img {
  width: 100%;
  height: 100%;
}
.development-step__illustration {
  display: block;
}
.development-step__illustration img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.fade-up {
  opacity: 1;
  transform: none;
}
@media (max-width: 900px) {
  .site-header {
    height: 76px;
  }
  .main-nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 76px;
    background: #fff;
    padding: 26px;
    display: none;
    flex-direction: column;
    box-shadow: 0 12px 20px #0001;
    gap: 19px;
  }
  .main-nav.active {
    display: flex;
  }
  .menu-toggle {
    display: grid;
    gap: 5px;
    padding: 6px;
  }
  .menu-toggle span {
    width: 26px;
    height: 2px;
    background: var(--blue);
  }
  .hero,
  .hero__inner {
    min-height: auto;
  }
  .hero__inner {
    grid-template-columns: 1fr;
  }
  .hero__copy {
    padding: 70px 0 30px;
    margin: 0;
    text-align: center;
  }
  .hero__art {
    height: 390px;
  }
  .hero h1 {
    font-size: 31px;
  }
  .solution-grid {
    grid-template-columns: 1fr;
  }
  .solution-card {
    min-height: 0;
  }
  .development-step,
  .development-step:nth-child(even) {
    grid-template-columns: 1fr;
    gap: 0;
    text-align: center;
    margin-bottom: 55px;
  }
  .development-step:nth-child(even) .development-step__illustration {
    order: 0;
  }
  .development-step p {
    margin-inline: auto;
  }
  .contact-banner__inner {
    padding: 0;
    flex-direction: column;
    text-align: center;
    gap: 25px;
  }
  .footer__grid {
    grid-template-columns: 1fr 1fr;
  }
  .brand--footer {
    grid-column: span 2;
  }
  .footer__bottom {
    text-align: center;
    padding: 0 20px;
  }
  .art-window {
    left: 20%;
  }
  .art-person {
    right: 8%;
  }
}
@media (max-width: 520px) {
  .container {
    width: min(var(--container), calc(100% - 32px));
  }
  .hero h1 {
    font-size: 27px;
  }
  .project {
    padding: 70px 0;
  }
  .project h2,
  .contact-banner h2 {
    font-size: 25px;
  }
  .lead {
    font-size: 16px;
  }
  .development {
    padding-top: 60px;
  }
  .development-step__illustration {
    height: 220px;
  }
  .footer__grid {
    grid-template-columns: 1fr;
  }
  .brand--footer {
    grid-column: auto;
  }
  .footer__grid {
    padding-bottom: 50px;
  }
  .hero__art {
    transform: scale(0.88);
    transform-origin: top center;
    margin-bottom: -42px;
  }
}

/* Superfície contínua do cabeçalho e banner, extraída do grupo bg-slideshow do layout. */
.futuriti-home .site {
  background: #f9f9f9 url('../images/bg-slideshow.svg') center top / auto 540px
    no-repeat;
}
.futuriti-home .site-header,
.futuriti-home .site-header.scrolled,
.futuriti-home .hero,
.futuriti-home .hero__art {
  background: transparent;
}
.futuriti-home .site-header.scrolled {
  box-shadow: none;
}
@media (min-width: 901px) {
  .futuriti-home .site-header {
    height: 90px;
  }
  .futuriti-home .hero,
  .futuriti-home .hero__inner,
  .futuriti-home .hero__art {
    min-height: 450px;
    height: 450px;
  }
}
/* Fontes locais que correspondem aos font-family presentes no SVG de referência. */
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat/Montserrat-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat/Montserrat-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat/Montserrat-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Roboto';
  src: url('../fonts/Roboto/Roboto-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Roboto';
  src: url('../fonts/Roboto/Roboto-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
body {
  font-family: Roboto, Arial, sans-serif;
}

/* O grupo ilustration parte de x:899/y:126 e ultrapassa a base bg-slideshow no SVG original. */
@media (min-width: 901px) {
  .futuriti-home .hero {
    overflow: visible;
    position: relative;
    z-index: 1;
  }
  .futuriti-home .hero__art {
    width: 627px;
    min-height: 500px;
    height: 500px;
    margin-left: -61px;
    margin-top: 36px;
    align-self: start;
    overflow: visible;
    position: relative;
    z-index: 2;
  }
  .futuriti-home .hero__art img {
    object-fit: fill;
  }
}
/* Botões do banner conforme os retângulos arredondados do SVG. */
.futuriti-home .button--outline,
.futuriti-home .main-nav .nav-cta {
  border-radius: 19px;
}
.futuriti-home .button--outline {
  gap: 0;
  padding-inline: 24px;
}
.futuriti-home .button--outline span {
  display: none;
}

/* Elipses decorativas de fundo presentes no layout de referência. */
.development {
  overflow: hidden;
}
.development::before,
.development::after {
  content: '';
  position: absolute;
  pointer-events: none;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  border: 1px solid #f0f0f0;
  background: radial-gradient(circle at center, #fff 0 57%, #fafafa 58% 100%);
  opacity: 0.95;
  z-index: 0;
}
.development::before {
  left: -380px;
  top: 610px;
}
.development::after {
  right: -380px;
  top: 1040px;
}
.development .container {
  position: relative;
  z-index: 1;
}
.development-step:nth-child(5)::before,
.development-step:nth-child(7)::before {
  content: '';
  position: absolute;
  pointer-events: none;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  border: 1px solid #f0f0f0;
  background: #fafafa;
  z-index: -1;
}
.development-step:nth-child(5)::before {
  left: -520px;
  top: 50%;
}
.development-step:nth-child(7)::before {
  right: -520px;
  top: 30%;
}
/* Elipses vetoriais extraídas de content_development (Elipse e Elipse-2). */
.development::before,
.development::after,
.development-step:nth-child(5)::before,
.development-step:nth-child(7)::before {
  content: none;
}
.development {
  background-color: #fff;
  background-image:
    url('../images/development-ellipse.svg'),
    url('../images/development-ellipse.svg');
  background-repeat: no-repeat;
  background-size:
    875px 701px,
    875px 701px;
  background-position:
    calc(50% - 1415px) 800px,
    calc(50% + 510px) 330px;
}

/* CTA content_cta: cartão central de 1132 × 279 px com conteúdo centralizado. */
.contact-banner {
  background: #fff;
  padding: 90px 0 0;
}
.contact-banner__inner {
  width: min(1132px, calc(100% - 48px));
  min-height: 279px;
  margin-inline: auto;
  padding: 42px 24px;
  background: #004ca5;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 16px;
  text-align: center;
}
.contact-banner__inner::before {
  content: '';
  width: 42px;
  height: 28px;
  border: 2px solid #fff;
  border-radius: 3px;
  background:
    linear-gradient(135deg, transparent 49%, #fff 50% 52%, transparent 53%),
    linear-gradient(225deg, transparent 49%, #fff 50% 52%, transparent 53%);
}
.contact-banner h2 {
  margin: 0;
  font-size: 30px;
}
.contact-banner p {
  max-width: 600px;
  margin: 0;
  font-size: 18px;
}
.contact-banner .button--light {
  margin-top: 2px;
  min-height: 38px;
  padding-inline: 24px;
  border-radius: 8px;
}
@media (max-width: 900px) {
  .contact-banner {
    padding-top: 60px;
  }
  .contact-banner__inner {
    width: min(1132px, calc(100% - 32px));
    min-height: unset;
    padding: 45px 22px;
  }
  .development {
    background-size:
      520px 417px,
      520px 417px;
    background-position:
      calc(50% - 730px) 850px,
      calc(50% + 310px) 350px;
  }
}
/* Coordenadas originais das elipses: direita em y:1434 e esquerda em y:1906. */
.development {
  background-position:
    calc(50% - 1592px) 903px,
    calc(50% + 426px) 431px;
}

/* A CTA invade 138 px do rodapé, exatamente como content_cta sobre content_footer. */
.contact-banner {
  position: relative;
  z-index: 2;
  margin-bottom: -139px;
}
.site-footer {
  position: relative;
  z-index: 1;
  padding-top: 249px;
}
.footer__grid {
  grid-template-columns: repeat(3, 1fr);
  max-width: 760px;
  margin-inline: auto;
  padding-bottom: 70px;
}
.footer__brand {
  width: min(1132px, calc(100% - 48px));
  margin-inline: auto;
  padding: 50px 0 68px;
  border-top: 1px solid #dedede;
  display: flex;
  justify-content: center;
}
.footer__brand img {
  width: 145px;
  height: auto;
  filter: grayscale(1);
  opacity: 0.68;
}
.footer__bottom {
  height: 60px;
}
@media (max-width: 900px) {
  .development {
    background-position:
      calc(50% - 935px) 903px,
      calc(50% + 230px) 431px;
  }
  .contact-banner {
    margin-bottom: -80px;
  }
  .site-footer {
    padding-top: 160px;
  }
  .footer__grid {
    max-width: none;
  }
  .footer__brand {
    width: min(1132px, calc(100% - 32px));
  }
}
/* As elipses são ancoradas às etapas para preservar as posições do arquivo de 1920 px. */
.development {
  background-image: none;
}
.development-step {
  position: relative;
  z-index: 0;
}
.development-step > * {
  position: relative;
  z-index: 1;
}
.development-step:nth-child(2)::after,
.development-step:nth-child(3)::after {
  content: '';
  position: absolute;
  display: block;
  width: 875px;
  height: 701px;
  background: url('../images/development-ellipse.svg') center / 100% 100%
    no-repeat;
  pointer-events: none;
  z-index: 0;
}
/* Elipse-2: centro em x:1824, à direita, entre as etapas 2 e 3. */
.development-step:nth-child(2)::after {
  left: 992px;
  top: 81px;
}
/* Elipse: centro em x:-195, à esquerda, entre as etapas 3 e 4. */
.development-step:nth-child(3)::after {
  left: -1026px;
  top: 203px;
}
@media (max-width: 900px) {
  .development-step:nth-child(2)::after,
  .development-step:nth-child(3)::after {
    width: 520px;
    height: 417px;
    opacity: 0.8;
  }
  .development-step:nth-child(2)::after {
    left: 65%;
    top: 100px;
  }
  .development-step:nth-child(3)::after {
    left: -380px;
    top: 160px;
  }
}
/* Linha de encontro: o rodapé inicia exatamente no meio do cartão de 279 px. */
@media (min-width: 901px) {
  .contact-banner {
    height: 230px;
    margin-bottom: 0;
    padding: 90px 0 0;
    overflow: visible;
  }
  .contact-banner__inner {
    position: relative;
    z-index: 2;
  }
  .site-footer {
    margin-top: 0;
    padding-top: 249px;
  }
}
.contact-banner__inner::before {
  content: none;
}
.cta-mail {
  display: block;
  width: 57px;
  height: 37px;
  margin: 0 auto 17px;
}

.project {
  background: #fff;
}

/* Página de contato e orçamento. */
.contact-page { background:#fff; }
.contact-page__hero { padding:92px 0 78px; background:#f9f9f9 url('../images/bg-slideshow.svg') center top / auto 540px no-repeat; }
.contact-page__hero-inner { display:grid; grid-template-columns:1.45fr .55fr; align-items:center; gap:40px; }
.contact-page .eyebrow { display:block; color:#004ca5; font:700 11px Montserrat,sans-serif; letter-spacing:.2em; margin-bottom:18px; }
.contact-page__hero h1 { max-width:700px; margin:0 0 20px; color:#004ca5; font:700 44px/1.06 Montserrat,sans-serif; letter-spacing:-.035em; }
.contact-page__hero p { max-width:610px; margin:0; color:#757575; font:400 18px/1.55 Roboto,sans-serif; }
.contact-page__hero-mark { width:170px; height:170px; margin-left:auto; border-radius:50%; background:#004ca5; display:grid; place-items:center; box-shadow:25px 25px 0 #dbe8f5; }
.contact-page__hero-mark img { width:70px; height:auto; }
.contact-page__content { padding:95px 0 130px; }
.contact-page__grid { display:grid; grid-template-columns:.78fr 1.22fr; gap:92px; align-items:start; }
.contact-page__aside { padding-top:28px; }
.contact-page__aside h2,.contact-page__form-card h2 { margin:0 0 15px; color:#151515; font:700 30px/1.16 Montserrat,sans-serif; letter-spacing:-.025em; }
.contact-page__aside > p,.contact-page__form-card > p { margin:0 0 30px; color:#757575; font:400 16px/1.55 Roboto,sans-serif; }
.contact-channel { display:block; padding:19px 0; border-top:1px solid #dedede; color:#004ca5; }
.contact-channel:last-child { border-bottom:1px solid #dedede; }
.contact-channel span { display:block; color:#757575; font:700 10px Montserrat,sans-serif; letter-spacing:.16em; text-transform:uppercase; margin-bottom:6px; }
.contact-channel strong { font:700 15px Roboto,sans-serif; }
.contact-page__form-card { padding:47px 48px; border-radius:12px; background:#fff; box-shadow:0 18px 55px rgba(0,76,165,.12); border:1px solid #e9eef4; }
.contact-page__form-card .eyebrow { margin-bottom:14px; }
.contact-page__form-card h2 { color:#004ca5; }
.contact-page__form-card .form-row { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.contact-page__form-card .form-group { margin-bottom:19px; }
.contact-page__form-card label { display:block; color:#151515; font:700 12px Montserrat,sans-serif; margin-bottom:8px; }
.contact-page__form-card input,.contact-page__form-card select,.contact-page__form-card textarea { width:100%; min-height:48px; padding:13px 15px; border:1px solid #d9e0e8; border-radius:6px; background:#fff; color:#151515; font:400 15px Roboto,sans-serif; transition:border-color .2s, box-shadow .2s; }
.contact-page__form-card textarea { min-height:130px; resize:vertical; }
.contact-page__form-card input:focus,.contact-page__form-card select:focus,.contact-page__form-card textarea:focus { outline:0; border-color:#004ca5; box-shadow:0 0 0 3px rgba(0,76,165,.1); }
.contact-submit { width:100%; min-height:46px; border:2px solid #004ca5; border-radius:23px; background:#004ca5; color:#fff; font:800 11px Montserrat,sans-serif; letter-spacing:.125em; transition:.2s; }
.contact-submit:hover { background:#fff; color:#004ca5; }
.form-feedback { display:none; margin-top:17px; text-align:center; font:700 14px Roboto,sans-serif; }
@media (max-width:900px) { .contact-page__hero { padding:70px 0 60px; } .contact-page__hero-inner,.contact-page__grid { grid-template-columns:1fr; gap:38px; } .contact-page__hero h1 { font-size:34px; } .contact-page__hero-mark { margin:0; width:125px; height:125px; } .contact-page__content { padding:65px 0 95px; } .contact-page__aside { padding-top:0; } .contact-page__form-card { padding:32px 24px; } }
@media (max-width:560px) { .contact-page__form-card .form-row { grid-template-columns:1fr; gap:0; } .contact-page__hero h1 { font-size:29px; } }