/* =========================================================
   Design System
   Paleta, tipografia, efeitos e animacoes
   ========================================================= */

:root {
  --dark-blue-0: #000;
  --dark-blue-1: #050d15;
  --dark-blue-2: #121f2d;
  --dark-blue-3: #132436;
  --paragraphs: #6f87a0eb;
  --paragraphs-dark: #6f87a099;
  --white: #fff;
  --gradient: #bdd7f180;
  --blue-1: #2a3ded;
  --blue-2: #5566ff;
  --blue-3: #6472f3;
  --green-1: #186f44;
  --green-2: #35a670;
  --transparent-bg: #02090fcc;
  --blur-blue: #2a3ded66;
  --circle-1: #2a3dedcc;
  --circle-2: #000000b3;
  --circle-border: #ffffff26;
  --circle-accent: #fff;
  --ease: cubic-bezier(.25, .46, .45, .94);
}

/* Fonte de exibicao.
   O site usa a Figtree (Google Fonts), de metrica proxima a Creato Display.
   Se voce licenciar a Creato Display, coloque os arquivos .otf em
   assets/fonts/ e descomente o bloco abaixo — ela passa a ser usada
   automaticamente, sem nenhuma outra alteracao.

@font-face {
  font-family: "Creato Display";
  src: url("../assets/fonts/CreatoDisplay-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Creato Display";
  src: url("../assets/fonts/CreatoDisplay-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Creato Display";
  src: url("../assets/fonts/CreatoDisplay-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
*/

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background-color: var(--dark-blue-0);
  color: var(--paragraphs);
  font-family: "Creato Display", Figtree, "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.62em;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; border: 0; display: block; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; margin: 0; }

/* ---------- Tipografia ---------- */

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: 500;
  color: var(--white);
}

h1 {
  background-image: linear-gradient(140deg, var(--white), var(--gradient));
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  font-size: 4.75em;
  line-height: 1.06em;
}

h2.heading, .heading {
  background-image: linear-gradient(140deg, var(--white), var(--gradient));
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  font-size: 3em;
  line-height: 1.1em;
}

h3 { font-size: 2.1em; line-height: 1.2em; }
h4 { font-size: 1.6em; line-height: 1.25em; }
h5 { font-size: 1.25em; line-height: 1.35em; }
h6 { font-size: 1em;   line-height: 1.5em; }

p { margin: 0; }

/* ---------- Layout ---------- */

.overflow { overflow: hidden; position: relative; }

.content {
  width: 100%;
  max-width: 75em;
  margin: 0 auto;
}

.content-narrow {
  width: 100%;
  max-width: 55em;
  margin: 0 auto;
}

.section {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6em 1.8em;
}

.section.first { padding-top: 3em; }

.block-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .9em;
  text-align: center;
  max-width: 40em;
  margin: 0 auto 4em;
}

.block-heading-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .9em;
  margin-bottom: 2.4em;
}

.subtitle {
  color: var(--blue-3);
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: .78em;
  font-weight: 500;
  line-height: 1.2em;
}

.paragraph-block { max-width: 34em; }

/* ---------- Navbar ---------- */

.navbar {
  z-index: 500;
  position: fixed;
  inset: 0% 0% auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: .7em 2.2em 0;
  background-color: transparent;
}

.nav-block {
  position: relative;
  width: 100%;
  max-width: 74em;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: .6em .65em;
  border: 1px solid var(--dark-blue-3);
  border-radius: 50em;
  background-color: #000000b3;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}

.brand {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: .55em;
  margin: 0 .6em;
  padding: .5em .4em;
  opacity: .9;
  transition: opacity .2s var(--ease);
}
.brand:hover, .brand.is-current { opacity: 1; }

.logo { height: 2em; width: auto; }

.nav {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.nav-menu {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.nav-link {
  color: var(--paragraphs);
  text-align: center;
  letter-spacing: .025em;
  padding: .7em 1.1em;
  font-size: .94em;
  font-weight: 500;
  line-height: 1.2em;
  transition: color .2s var(--ease);
}
.nav-link:hover, .nav-link.is-current:hover { color: var(--white); }
.nav-link.is-current { color: var(--paragraphs); }

/* Links presentes na marcacao, mas ocultos por CSS — igual ao original.
   O header renderizado mostra apenas Sobre e Contato. */
.nav-link._1, .nav-link._2, .nav-link._3, .nav-link._5 { display: none; }

.nav-link-extra {
  color: var(--paragraphs);
  text-align: center;
  letter-spacing: .025em;
  padding: .7em 1.1em;
  font-size: .94em;
  font-weight: 500;
  line-height: 1.2em;
  transition: color .2s var(--ease);
  display: none;
}
.nav-link-extra:hover { color: var(--white); }

.nav-button {
  background-color: var(--dark-blue-2);
  color: var(--white);
  text-align: center;
  letter-spacing: .025em;
  border-radius: 50em;
  padding: .7em 1.4em;
  margin-left: .55em;
  font-size: .94em;
  font-weight: 500;
  line-height: 1.2em;
  transition: box-shadow .4s var(--ease);
  display: none;
}
.nav-button:hover {
  box-shadow: 0 5px 40px -10px var(--blue-2),
              inset -15px 13px 20px 0 var(--blue-3),
              inset 20px -55px 20px 0 var(--blue-1);
}

/* Carrinho: presente na marcacao, oculto por CSS — igual ao original. */
.cart { flex: none; margin-left: .5em; }
.cart-button {
  display: none;
  position: relative;
  align-items: center;
  gap: .25em;
  padding: .6em 1.2em;
  border-radius: 50em;
  background-color: var(--dark-blue-2);
  transition: box-shadow .4s var(--ease);
}
.cart-button:hover {
  box-shadow: 0 5px 40px -10px var(--blue-2),
              inset -15px 13px 20px 0 var(--blue-3),
              inset 20px -55px 20px 0 var(--blue-1);
}
.icon-cart { flex: none; width: 1.2em; height: 1.2em; }
.text-cart { color: var(--white); font-size: .94em; font-weight: 500; }
.icon-cart-quantity {
  background-color: var(--blue-1);
  color: var(--white);
  border-radius: 50em;
  padding: 0 .45em;
  font-size: .75em;
  line-height: 1.6em;
}

.block-nav-button { display: flex; align-items: center; }

.menu-button {
  display: none;
  width: 2.6em;
  height: 2.6em;
  margin-left: .4em;
  border-radius: 50em;
  background-color: var(--dark-blue-2);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  border: none;
}
.menu-icon { position: relative; display: block; width: 1.05em; height: 1.5px; background-color: var(--white); transition: background-color .2s var(--ease); }
.menu-icon::before, .menu-icon::after {
  content: "";
  position: absolute;
  left: 0;
  display: block;
  width: 1.05em;
  height: 1.5px;
  background-color: var(--white);
  transition: transform .3s var(--ease);
}
.menu-icon::before { top: -5px; }
.menu-icon::after  { top: 5px; }
.menu-button.is-open .menu-icon { background-color: transparent; }
.menu-button.is-open .menu-icon::before { transform: translateY(5px) rotate(45deg); }
.menu-button.is-open .menu-icon::after  { transform: translateY(-5px) rotate(-45deg); }

/* ---------- Botoes ---------- */

.button {
  display: inline-block;
  background-color: var(--dark-blue-2);
  color: var(--white);
  text-align: center;
  letter-spacing: .025em;
  border: none;
  border-radius: 50em;
  padding: .95em 1.9em;
  font-size: .96em;
  font-weight: 500;
  line-height: 1.2em;
  cursor: pointer;
  transition: box-shadow .4s var(--ease);
}
.button:hover {
  box-shadow: 0 5px 40px -10px var(--blue-2),
              inset -15px 13px 20px 0 var(--blue-3),
              inset 20px -55px 20px 0 var(--blue-1);
}

.button-ghost {
  display: inline-block;
  border: 1px solid var(--dark-blue-3);
  border-radius: 50em;
  padding: .95em 1.9em;
  color: var(--white);
  font-size: .96em;
  font-weight: 500;
  transition: border-color .3s var(--ease), background-color .3s var(--ease);
}
.button-ghost:hover { border-color: var(--blue-3); background-color: var(--dark-blue-1); }

/* ---------- Hero ---------- */

.section-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 13em 1.8em 7em;
}

.grid-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 2em;
}

.block-hero {
  z-index: 50;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 2.4em;
  text-align: left;
}

.heading-hero { max-width: 12em; margin-bottom: -.15em; }
.heading-hero.large { font-size: 4em; line-height: 1em; max-width: 12em; word-break: normal; }

.paragraph-hero { max-width: 30em; }
.paragraph-hero.max-w { max-width: 34em; }

.blur-top {
  z-index: -10;
  position: absolute;
  inset: -12em auto auto -25%;
  width: 75%;
  height: 22em;
  background-color: var(--blur-blue);
  filter: blur(150px);
  border-radius: 100%;
  transform: perspective(1000px);
}

.blur-hero {
  z-index: -10;
  position: absolute;
  bottom: -4em;
  width: 50em;
  max-width: 100%;
  height: 20em;
  background-color: var(--blur-blue);
  filter: blur(150px);
  border-radius: 100%;
  transform: perspective(1000px);
}

/* ---------- Circulo orbital ---------- */

.wrapper-circle {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 26em;
}

.content-wrapper-circle {
  position: absolute;
  inset: 0%;
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 2000px;
  transform: perspective(2000px);
}

.circle-hero, .circle-b {
  position: relative;
  top: 1.4em;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.2em;
  transform-style: preserve-3d;
  transform: rotateX(60deg) rotateY(26deg) rotateZ(0deg);
  animation: orbit-spin 26s linear infinite;
}

@keyframes orbit-spin {
  from { transform: rotateX(60deg) rotateY(26deg) rotateZ(0deg); }
  to   { transform: rotateX(60deg) rotateY(26deg) rotateZ(360deg); }
}

.area-main-a6 {
  z-index: 5;
  position: relative;
  width: 30em;
  height: 30em;
  border-radius: 100%;
}

.circle-b { font-size: .9em; animation-duration: 34s; animation-direction: reverse; }

.area-a1, .area-a2, .area-a3, .area-a4, .area-a5,
.area-a7, .area-a8, .area-a9, .area-a10 {
  position: absolute;
  border-radius: 100%;
  transform-style: preserve-3d;
}

.area-a5  { z-index: 6;  width: 100%; height: 100%; transform: translate3d(0, 0, 3em); }
.area-a4  { z-index: 7;  width: 93%;  height: 93%;  transform: translate3d(0, 0, 6em); }
.area-a3  { z-index: 8;  width: 82%;  height: 82%;  transform: translate3d(0, 0, 9em);  filter: blur(10px); }
.area-a2  { z-index: 9;  width: 64%;  height: 64%;  transform: translate3d(0, 0, 12em); filter: blur(15px); }
.area-a1  { z-index: 10; width: 38%;  height: 38%;  transform: translate3d(0, 0, 15em); filter: blur(20px); }
.area-a7  { z-index: 4;  width: 93%;  height: 93%;  transform: translate3d(0, 0, -3em); }
.area-a8  { z-index: 3;  width: 82%;  height: 82%;  transform: translate3d(0, 0, -6em);  filter: blur(10px); }
.area-a9  { z-index: 2;  width: 64%;  height: 64%;  transform: translate3d(0, 0, -9em);  filter: blur(15px); }
.area-a10 { z-index: 1;  width: 38%;  height: 38%;  transform: translate3d(0, 0, -12em); filter: blur(20px); }

.color-circle {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 100%;
  background-image: linear-gradient(72deg, var(--circle-1), var(--circle-2) 80%);
  box-shadow: inset 0 0 0 1px var(--circle-border);
  transition: transform .45s var(--ease);
}

/* Cada camada da esfera encolhe sob o cursor. Como as camadas estao
   empilhadas por z-index, o ponteiro atinge a que estiver por cima
   naquele ponto — passar o mouse pela esfera vai afundando uma a uma. */
.color-circle:hover { transform: scale(.85); }

.color-circle.line {
  background-image: none;
  box-shadow: inset 0 0 0 3px var(--circle-accent);
}

.blur-block-b {
  z-index: -10;
  position: absolute;
  width: 34em;
  max-width: 100%;
  height: 16em;
  background-color: var(--blur-blue);
  filter: blur(150px);
  border-radius: 100%;
}

/* ---------- Cards com brilho ---------- */

.wrapper {
  position: relative;
  border-radius: 1.6em;
  padding: 1px;
  overflow: hidden;
  background-color: var(--dark-blue-3);
}

.blurred-color {
  position: absolute;
  inset: -40%;
  background-image: conic-gradient(from 0deg,
    transparent 0%, var(--blue-1) 18%, var(--blue-3) 26%, transparent 42%, transparent 100%);
  filter: blur(30px);
  opacity: 0;
  transition: opacity .5s var(--ease);
  animation: sweep 8s linear infinite;
}
.wrapper:hover .blurred-color { opacity: 1; }

.blurred-color.small-blur { filter: blur(14px); inset: -60%; }

@keyframes sweep {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.content-wrapper {
  position: relative;
  z-index: 2;
  height: 100%;
  border-radius: calc(1.6em - 1px);
  background-color: var(--dark-blue-1);
  overflow: hidden;
}

/* ---------- Servicos ---------- */

.grid-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.6em;
  margin-bottom: 1.6em;
}

.grid-features-small {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6em;
}

.feature {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.image-feature { width: 100%; height: auto; object-fit: cover; }

.block-feature {
  display: flex;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 1.7em;
  width: 100%;
  padding: 2em 2.5em 2.5em;
}
.block-feature.top { padding: 2.5em 2.5em 1.5em; }

.heading-feature { font-size: 1.5em; line-height: 1.2em; color: var(--white); }
.paragraph-feature { font-size: .98em; }

/* ---------- CTA ---------- */

.block-cta {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2em;
  text-align: center;
  max-width: 44em;
  margin: 0 auto;
  padding: 4em 2em;
}
.block-cta .button { margin-top: 1.6em; }

.heading.opacity {
  background-image: none;
  -webkit-text-fill-color: currentColor;
  color: var(--paragraphs);
  font-size: 1.15em;
  font-weight: 400;
  line-height: 1.6em;
  max-width: 38em;
}

.blur-block {
  z-index: -10;
  position: absolute;
  inset: auto 15% -3em;
  height: 12em;
  background-color: var(--blur-blue);
  filter: blur(150px);
  border-radius: 100%;
}

/* ---------- Ferramentas / integracoes ---------- */

.grid-tools {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.4em 1.6em;
}

.tool { display: flex; flex-direction: column; align-items: flex-start; gap: .8em; }

.block-icon-tool { margin-bottom: .5em; }
.block-icon-tool .wrapper { border-radius: .9em; }
.block-icon-tool .content-wrapper {
  border-radius: calc(.9em - 1px);
  padding: .9em;
  display: flex;
}

.icon-tool { width: 1.7em; height: 1.7em; }
.heading-tool { font-size: 1.05em; color: var(--white); }
.paragraph-tool { font-size: .92em; }

/* ---------- Grid generico ---------- */

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 3em;
}

.block { display: flex; flex-direction: column; align-items: flex-start; gap: 1.5em; }
.paragraph { max-width: 25em; }

/* ---------- Lista de diferenciais ---------- */

.grid-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3em;
  align-items: center;
}

.list { display: flex; flex-direction: column; gap: 2em; }
.list-item { display: flex; gap: 1.1em; align-items: flex-start; }

.icon-list-block {
  flex: 0 0 auto;
  width: 2.6em;
  height: 2.6em;
  border-radius: .8em;
  border: 1px solid var(--dark-blue-3);
  background-color: var(--dark-blue-1);
  display: flex;
  align-items: center;
  justify-content: center;
}
.icon-list { width: 1.1em; height: 1.1em; }

.block-list { display: flex; flex-direction: column; gap: .35em; }
.heading-list { font-size: 1.15em; color: var(--white); }
.paragraph-list { font-size: .96em; }

/* ---------- Accordion (FAQ) ---------- */

.accordion-list {
  display: flex;
  flex-direction: column;
  gap: 1em;
  width: 100%;
  max-width: 52em;
  margin: 0 auto;
}

.accordion {
  border: 1px solid var(--dark-blue-3);
  border-radius: 1.1em;
  background-color: var(--dark-blue-1);
  overflow: hidden;
  transition: border-color .3s var(--ease);
}
.accordion.is-open { border-color: #24405c; }

.accordion-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5em;
  padding: 1.4em 1.7em;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
}

.heading-accordion { font-size: 1.08em; line-height: 1.4em; color: var(--white); font-weight: 500; }

.icon-accordion {
  flex: 0 0 auto;
  width: .85em;
  height: .85em;
  transition: transform .35s var(--ease);
}
.accordion.is-open .icon-accordion { transform: rotate(180deg); }

.accordion-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .4s var(--ease);
}
.accordion.is-open .accordion-body { grid-template-rows: 1fr; }
.accordion-body > div { overflow: hidden; }

.paragraph-accordion { padding: 0 1.7em 1.5em; font-size: .97em; }

/* ---------- Publicacoes ---------- */

.publication-list {
  display: flex;
  flex-direction: column;
  gap: .9em;
  width: 100%;
  max-width: 52em;
  margin: 0 auto;
}

.publication {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5em;
  padding: 1.3em 1.7em;
  border: 1px solid var(--dark-blue-3);
  border-radius: 1.1em;
  background-color: var(--dark-blue-1);
  transition: border-color .3s var(--ease), transform .3s var(--ease);
}
.publication:hover { border-color: var(--blue-3); transform: translateX(4px); }
.publication h5 { font-size: 1.02em; font-weight: 500; }
.publication .arrow { flex: 0 0 auto; width: .9em; height: .9em; opacity: .6; }

/* ---------- Paginas internas: topo ---------- */

.section-top {
  position: relative;
  display: flex;
  justify-content: center;
  padding: 12em 1.8em 4em;
}

.block-top { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.3em; }
.block-heading-top { display: flex; flex-direction: column; align-items: center; gap: 1.2em; max-width: 42em; }
.block-heading-top .heading-hero { max-width: none; }
/* Titulos longos que devem caber em 2 linhas (ex.: pagina Sobre). */
.block-heading-top.wide { max-width: 54em; }

/* ---------- Perfis (sobre) ---------- */

.grid-plans { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6em; }

.plan { display: flex; flex-direction: column; gap: 1.5em; padding: 2.6em; height: 100%; }
.heading-plan { font-size: 1.8em; color: var(--white); }
.paragraph-plan { font-size: .99em; }
.plan-list { display: flex; flex-direction: column; gap: 1.1em; margin-top: .4em; padding-top: 1.6em; border-top: 1px solid var(--dark-blue-3); }
.email-plan { color: var(--blue-3); font-size: .99em; margin-top: -.7em; width: fit-content; transition: color .3s var(--ease); }
.email-plan:hover { color: var(--white); }
.avatar-plan-block { width: 5.4em; height: 5.4em; border-radius: 100%; overflow: hidden; border: 1px solid var(--circle-border); background: var(--dark-blue-2); }
.avatar-plan { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-plan.retrato { object-position: 50% 20%; }
.plan-list .heading-list { font-size: .97em; font-weight: 400; color: var(--paragraphs); line-height: 1.55em; }

.grid-benefits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6em; }
.benefit { display: flex; flex-direction: column; gap: .7em; padding: 2.2em; height: 100%; }
.heading-benefit { font-size: 1.1em; color: var(--white); }
.paragraph-benefit { font-size: .95em; }

/* ---------- Contato ---------- */

/* Coluna unica: dados de contato em linha no topo, formulario centralizado abaixo. */
.grid-contact { display: flex; flex-direction: column; align-items: center; gap: 3.5em; }
.grid-contact > .wrapper { width: 100%; max-width: 46em; }

.block-contact { display: flex; flex-direction: column; gap: 1.1em; }

.field-label {
  display: block;
  color: var(--paragraphs-dark);
  letter-spacing: .05em;
  font-size: .85em;
  margin-bottom: .5em;
}

.text-field, .textarea {
  width: 100%;
  padding: .95em 1.2em;
  background-color: var(--dark-blue-1);
  border: 1px solid var(--dark-blue-3);
  border-radius: .8em;
  color: var(--white);
  font-size: .97em;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.text-field::placeholder, .textarea::placeholder { color: #4a5b6d; }
.text-field:focus, .textarea:focus {
  outline: none;
  border-color: var(--blue-3);
  box-shadow: 0 0 0 3px #5566ff2a;
}
.textarea { min-height: 9em; resize: vertical; font-family: inherit; }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1em; }

.submit-button { align-self: flex-start; margin-top: .6em; }

.form-message {
  display: none;
  margin-top: 1.2em;
  padding: 1em 1.3em;
  border-radius: .8em;
  font-size: .95em;
  background-color: #186f4433;
  border: 1px solid var(--green-1);
  color: var(--green-2);
}
.form-message.is-visible { display: block; }
.form-message.is-error { background-color: #6f18183d; border-color: #a63535; color: #e08585; }

/* Armadilha anti-spam: invisivel para pessoas, preenchida por robos. */
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.submit-button[disabled] { opacity: .6; cursor: progress; }

.contact-info { display: flex; flex-flow: row wrap; justify-content: center; align-items: flex-start; gap: 1.6em 4.5em; text-align: center; }
.contact-info .contact-item { align-items: center; }
.contact-item { display: flex; flex-direction: column; gap: .2em; }
.contact-item .label { color: var(--blue-3); font-size: .8em; text-transform: uppercase; letter-spacing: .12em; }
.contact-item .value { color: var(--white); font-size: 1.05em; }

/* ---------- Blog ---------- */

.grid-posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6em; }
.post { display: flex; flex-direction: column; height: 100%; }
.post-image { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.post-body { display: flex; flex-direction: column; gap: .7em; padding: 1.8em; }
.post-meta { color: var(--paragraphs-dark); font-size: .82em; letter-spacing: .05em; text-transform: uppercase; }
.post-title { font-size: 1.2em; color: var(--white); }
.post-excerpt { font-size: .94em; }

/* ---------- Rodape ---------- */

.section-footer {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: auto;
  padding: 5.3em 1.8em 0;
}

.grid-footer {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 3em 4em;
  width: 100%;
  max-width: 1200px;
  padding-bottom: 3.4em;
}

.block-footer-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 1em; }
.brand-footer { display: flex; flex-direction: row; align-items: center; gap: .55em; opacity: .85; transition: opacity .2s var(--ease); }
.brand-footer:hover { opacity: 1; }
.block-footer-links { display: flex; flex-flow: row wrap; align-items: center; gap: .7em 1.7em; }
.block-footer-links .subtitle-footer { flex-basis: 100%; margin-bottom: 0; }

.logo-footer { height: 2em; width: auto; }

.paragraph-footer {
  max-width: 22em;
  color: var(--paragraphs-dark);
  font-size: .93em;
}

.subtitle-footer {
  color: var(--paragraphs-dark);
  text-align: left;
  letter-spacing: .13em;
  text-transform: uppercase;
  margin-bottom: .5em;
  font-size: .63em;
  font-weight: 500;
  line-height: 1.2em;
}

.footer-bottom {
  width: 100%;
  max-width: 1200px;
  padding: 1.8em 0 2.6em;
  border-top: 1px solid var(--dark-blue-3);
}

.text-footer-down { color: var(--paragraphs-dark); font-size: .85em; }

.link-footer { color: var(--paragraphs); font-size: .93em; transition: color .2s var(--ease); }
.link-footer.is-current { color: var(--white); }
.link-footer:hover { color: var(--white); }

/* ---------- Animacoes de entrada (scroll reveal) ---------- */

.reveal {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.reveal.is-visible { opacity: 1; transform: translate3d(0, 0, 0); }

.reveal-d1 { transition-delay: .08s; }
.reveal-d2 { transition-delay: .16s; }
.reveal-d3 { transition-delay: .24s; }
.reveal-d4 { transition-delay: .32s; }

/* ---------- Responsivo ---------- */

@media (max-width: 991px) {
  body { font-size: 15px; }

  .nav-menu {
    position: absolute;
    top: 100%;
    left: 2.2em;
    right: 2.2em;
    margin-top: .7em;
    flex-direction: column;
    align-items: stretch;
    padding: .7em;
    border: 1px solid var(--dark-blue-3);
    border-radius: 1.2em;
    background-color: #050d15cc;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
  }
  .nav-menu.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
  .nav-link { text-align: left; padding-top: .9em; padding-bottom: .9em; }
  .menu-button {
    display: flex;
    color: var(--paragraphs);
    transition: box-shadow .4s var(--ease), color .2s var(--ease);
  }
  .menu-button.is-open {
    color: var(--white);
    background-color: transparent;
    box-shadow: 0 5px 40px -10px var(--blue-2),
                inset -15px 13px 20px 0 var(--blue-3),
                inset 20px -55px 20px 0 var(--blue-1);
  }

  .grid-hero { grid-template-columns: 1fr; }
  h1, .heading-hero.large { font-size: 3.2em; }
  .heading { font-size: 2.4em; }
  .grid, .grid-list, .grid-contact, .grid-plans { grid-template-columns: 1fr; }
  .grid-tools { grid-template-columns: repeat(2, 1fr); }
  .grid-posts, .grid-benefits, .grid-features-small { grid-template-columns: repeat(2, 1fr); }
  .section-hero { padding-top: 10em; }
}

@media (max-width: 767px) {
  .navbar { padding-left: 1.8em; padding-right: 1.8em; }
  .nav-menu { left: 1.8em; right: 1.8em; }
  .block-hero { text-align: center; justify-content: center; align-items: center; }
  .grid-account { grid-template-columns: 1fr; }
  .sing-up-banner { display: none; }
  .grid-product { grid-template-columns: 1fr; }
  .grid-checkout { grid-template-columns: 1fr; }
}

@media (max-width: 479px) {
  body { font-size: 14px; }
  .grid-footer { gap: 2.4em 3em; }
  .nav-block { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .navbar { padding-left: .7em; padding-right: .7em; }
  .nav-menu { left: .7em; right: .7em; }
  .section { padding: 4em 1.2em; }
  .section-hero { padding: 9em 1.2em 4em; }
  .section-top { padding: 9em 1.2em 3em; }
  h1, .heading-hero.large { font-size: 2.6em; }
  .heading { font-size: 2.1em; }
  .account-form, .block-product { padding: 1.8em; }
  .grid-features, .grid-features-small, .grid-tools,
  .grid-posts, .grid-benefits { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .contact-info { flex-direction: column; gap: 1.6em; }
  .block-feature { padding: 1.6em; }
  .block-feature.top { padding: 1.6em 1.6em 1em; }
  .plan, .benefit { padding: 1.8em; }
  .circle-hero, .circle-b { font-size: .62em; }
  .wrapper-circle { min-height: 20em; }
}

@media (prefers-reduced-motion: reduce) {
  .circle-hero, .circle-b, .blurred-color { animation: none; }
  .color-circle { transition: none; }
  .color-circle:hover { transform: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* =========================================================
   Paginas de conta (log-in / sing-up)
   ========================================================= */

.account {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 100vh;
  padding: 7em 1em 4em;
  overflow: hidden;
}

.brand-account {
  z-index: 100;
  position: absolute;
  top: 1.4em;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: .55em;
  padding: .5em .4em;
  filter: grayscale(90%);
  transition: filter .2s var(--ease);
}
.brand-account:hover { filter: grayscale(0%); }

.block-account { width: 100%; max-width: 33.7em; margin: 0 auto; }

.account-form { padding: 3.7em; }

.block-heading-account {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: .8em;
  text-align: center;
  margin-bottom: 2.5em;
}

.form { display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; gap: 1.1em; }

.text-account {
  color: var(--paragraphs-dark);
  text-align: center;
  letter-spacing: .025em;
  margin-top: 2.2em;
  font-size: .94em;
  line-height: 1.4em;
}

.link-account { color: var(--paragraphs); font-weight: 500; transition: color .2s var(--ease); }
.link-account:hover { color: var(--white); }

.grid-account { display: grid; grid-template-columns: 1fr 2.2fr; }

.sing-up-banner { display: flex; padding: 1em; }

.img-sing-up-banner {
  width: 100%;
  border: 1px solid var(--dark-blue-3);
  border-radius: 1.2em;
  background-image: linear-gradient(150deg, #101d2e, #050d15 70%);
  background-size: cover;
  background-position: 50%;
}

/* =========================================================
   Loja (shop) e produto
   ========================================================= */

.utility-page-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-bottom: 3.1em;
  padding: .7em;
  border: 1px solid var(--dark-blue-3);
  border-radius: 1.2em;
}

.subtitle-categories {
  position: absolute;
  inset: -.7em auto auto;
  background-color: var(--dark-blue-0);
  color: var(--paragraphs);
  text-align: center;
  letter-spacing: .13em;
  text-transform: uppercase;
  border-radius: .6em;
  padding: 0 1em;
  font-size: .63em;
  font-weight: 500;
  line-height: 1.2em;
}

.block-categories { display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; width: 100%; }

.link-category {
  display: block;
  color: var(--paragraphs);
  letter-spacing: .025em;
  border-radius: .8em;
  padding: 1em 1.4em;
  font-size: .94em;
  font-weight: 500;
  line-height: 1.2em;
  transition: color .2s var(--ease);
}
.link-category:hover, .link-category.is-current { color: var(--white); }

.grid-shop { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6em; }

.block-product {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 2.2em;
  height: 100%;
}

.link-product-thumbnail {
  display: block;
  width: 100%;
  margin-bottom: 1.4em;
  border: 1px solid transparent;
  border-radius: 1em;
  transition: border-color .4s var(--ease);
}
.link-product-thumbnail:hover { border-color: var(--blue-2); }

.image-product-thumbnail { width: 100%; border-radius: 1em; object-fit: cover; }

.link-product { margin-bottom: .6em; }
.heading-product { font-size: 1.15em; color: var(--white); }
.block-price { line-height: 1.2em; }
.price { display: inline-block; color: var(--blue-2); font-size: 1em; font-weight: 500; line-height: 1.2em; }
.compare-at-price {
  display: inline-block;
  color: var(--paragraphs-dark);
  margin-left: .8em;
  font-size: 1em;
  line-height: 1.2em;
  text-decoration: line-through;
}

/* =========================================================
   Checkout
   ========================================================= */

.grid-checkout { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1.8em; align-items: start; }

.checkout-block { padding: 2.4em; display: flex; flex-direction: column; gap: 1.1em; }
.heading-checkout { font-size: 1.25em; color: var(--white); margin-bottom: .4em; }

.order-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  padding: .9em 0;
  border-bottom: 1px solid var(--dark-blue-3);
  font-size: .96em;
}
.order-line:last-of-type { border-bottom: none; }
.order-line .value { color: var(--white); }
.order-total { display: flex; align-items: center; justify-content: space-between; gap: 1em; padding-top: 1.1em; border-top: 1px solid var(--dark-blue-3); }
.order-total .value { color: var(--white); font-size: 1.25em; font-weight: 500; }

.order-item { display: flex; align-items: center; gap: 1em; padding: .9em 0; border-bottom: 1px solid var(--dark-blue-3); }
.order-item img { width: 3.4em; height: 3.4em; border-radius: .7em; object-fit: cover; }
.order-item .info { display: flex; flex-direction: column; gap: .1em; flex: 1; }
.order-item .name { color: var(--white); font-size: .98em; }
.order-item .meta { color: var(--paragraphs-dark); font-size: .85em; }

/* ---------- Rodape: blocos adicionais ---------- */

.link-block {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .5em;
  background-color: var(--dark-blue-2);
  color: var(--paragraphs);
  border-radius: .94em;
  padding: .7em 1.2em;
  font-weight: 500;
  line-height: 1.25em;
  transition: box-shadow .4s var(--ease), color .4s var(--ease);
}
.link-block:hover {
  color: var(--white);
  box-shadow: 0 5px 50px -12px var(--blue-2),
              inset -15px 13px 20px 0 var(--blue-3),
              inset 20px -55px 20px 0 var(--blue-1);
}

.icon-link { mix-blend-mode: screen; width: 1.25em; height: 1.25em; }

.text-footer-down { color: var(--paragraphs-dark); }
.link-footer-down { color: var(--paragraphs); font-weight: 500; transition: color .2s var(--ease); }
.link-footer-down:hover { color: var(--white); }