/* Elemento Digital — site novo
   Mobile primeiro; animação só no carregamento e na interação. */

/* Roboto Condensed variável (Google Fonts, OFL), hospedada no site. */
@font-face {
  font-family: "Roboto Condensed";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/roboto-condensed-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Roboto Condensed Fallback";
  src: local("Arial Narrow"), local("Arial");
  size-adjust: 92%;
  ascent-override: 100%;
  descent-override: 26%;
}

:root {
  --bg: #0a1a30;
  --bg-2: #0c1f38;
  --surface: #12284a;
  --line: rgba(255, 255, 255, .08);
  --line-2: rgba(255, 255, 255, .14);
  --text: #e9eef5;
  --text-2: #c8d3e3;
  --muted: #8fa3c0;
  --blue: #3d7bff;
  --blue-ink: #2050a0;
  --gold: #f2b940;
  --radius: 11px;
  --font: "Roboto Condensed", "Roboto Condensed Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --gutter: 16px;
}

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

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

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font: 400 16px/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 4px;
}

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

/* ---------- Topbar ---------- */

.topbar {
  position: relative;
  z-index: 60;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  line-height: 1;
  letter-spacing: .01em;
}

/* Filete azul no topo: assinatura discreta da marca. */
.topbar::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--blue);
  transform-origin: 0 50%;
}

.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  max-width: 1320px;
  min-height: 42px;
  margin: 0 auto;
  padding: 2px var(--gutter) 0;
}

.topbar__entregas { display: none; }

/* Celular: nota à esquerda, bandeiras à direita. */
.topbar__fatos {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
}

.nota {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 4px;
  color: var(--text-2);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  transition: color .2s var(--ease);
}

.nota__estrelas {
  display: inline-flex;
  gap: 1.5px;
  color: var(--gold);
}

.nota__estrelas svg { width: 11px; height: 11px; }

.nota__valor {
  font-weight: 700;
  color: var(--text);
}

.nota__sep {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--muted);
  opacity: .7;
}

.nota__seta {
  width: 12px;
  height: 12px;
  color: var(--muted);
  transition: transform .25s var(--ease), color .2s var(--ease);
}

.nota:hover,
.nota:focus-visible { color: var(--text); }

.nota:hover .nota__seta,
.nota:focus-visible .nota__seta {
  color: var(--blue);
  transform: translate(2px, -2px);
}

.nota__seta,
.nota__google { display: none; }

@media (min-width: 400px) {
  .nota__google { display: inline; }
}

/* Celulares bem estreitos: bandeiras e nota um pouco mais juntas. */
@media (max-width: 359px) {
  .topbar .nota { gap: 6px; }
  .idiomas .idioma { width: 29px; }
}

.topbar__desde { display: none; }

/* Idiomas: bandeiras desenhadas em vetor; a ativa fica acesa e sublinhada. */
.idiomas {
  position: relative;
  display: flex;
  align-items: center;
  margin-right: -8px;
}

.idioma {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 40px;
  border-radius: 8px;
  text-decoration: none;
}

.bandeira {
  position: relative;
  display: block;
  width: 21px;
  height: 14px;
  overflow: hidden;
  border-radius: 3px;
  opacity: .55;
  filter: saturate(.8);
  transition: opacity .2s var(--ease), filter .2s var(--ease), transform .25s var(--ease);
}

.bandeira svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Filete claro por dentro: a bandeira não "some" no grafite. */
.bandeira::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2);
}

.idioma[aria-current] .bandeira,
.idioma:hover .bandeira,
.idioma:focus-visible .bandeira {
  opacity: 1;
  filter: none;
}

.idioma:hover .bandeira,
.idioma:focus-visible .bandeira { transform: translateY(-1px); }

.idioma[aria-current]::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 5px;
  width: 12px;
  height: 2px;
  margin-left: -6px;
  border-radius: 2px;
  background: var(--blue);
}

/* Nome do idioma ao passar o mouse. */
@media (hover: hover) and (min-width: 768px) {
  .idioma::after {
    content: attr(data-nome);
    position: absolute;
    top: calc(100% - 2px);
    left: 50%;
    z-index: 70;
    padding: 7px 10px;
    border: 1px solid var(--line-2);
    border-radius: 7px;
    background: var(--surface);
    color: var(--text);
    font-size: 12.5px;
    line-height: 1;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 4px);
    transition: opacity .18s var(--ease), transform .24s var(--ease), visibility 0s linear .24s;
  }

  .idioma:hover::after,
  .idioma:focus-visible::after {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
    transition-delay: .08s, .08s, 0s;
  }
}

@media (min-width: 768px) {
  :root { --gutter: 28px; }

  .topbar__inner {
    justify-content: space-between;
    min-height: 44px;
  }

  .topbar__entregas {
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
  }

  .topbar__fatos {
    width: auto;
    gap: 18px;
  }

  .nota__seta { display: block; }

  .idiomas { padding-left: 12px; }

  .idiomas::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 1px;
    height: 14px;
    margin-top: -7px;
    background: var(--line-2);
  }
}

/* Entre 768 e 1099 px, a nota encolhe para caberem clientes e bandeiras. */
@media (min-width: 768px) and (max-width: 1099px) {
  .nota__google { display: none; }
}

@media (min-width: 1200px) {
  .topbar__desde {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    color: var(--muted);
    letter-spacing: .01em;
    white-space: nowrap;
  }

  .topbar__desde::after {
    content: "";
    width: 1px;
    height: 14px;
    background: var(--line-2);
  }
}

/* Rótulo "Projetos recentes" com o ponto que pulsa: está no ar. */
.rotulo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
}

.pulso {
  position: relative;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--blue);
}

.pulso::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--blue);
  animation: pulso 2.6s var(--ease) infinite;
}

@keyframes pulso {
  0% { transform: scale(1); opacity: .9; }
  70%, 100% { transform: scale(3); opacity: 0; }
}

.entregas {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.entrega {
  position: relative;
  display: flex;
  align-items: center;
}

.entrega + .entrega::before {
  content: "";
  width: 3px;
  height: 3px;
  margin: 0 12px;
  border-radius: 50%;
  background: var(--line-2);
}

/* Quantos clientes cabem sem encostar na nota. */
@media (max-width: 899px) {
  .entrega:nth-child(n + 3) { display: none; }
}

@media (min-width: 900px) and (max-width: 999px) {
  .entrega:nth-child(n + 4) { display: none; }
}

@media (min-width: 1000px) and (max-width: 1299px) {
  .entrega:nth-child(n + 5) { display: none; }
}

.entrega__link {
  position: relative;
  padding: 14px 0;
  color: var(--text-2);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: color .2s var(--ease);
}

/* Sublinhado que nasce da esquerda. */
.entrega__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  height: 1px;
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .35s var(--ease);
}

.entrega__link:hover,
.entrega__link:focus-visible,
.entrega:focus-within .entrega__link { color: #fff; }

.entrega__link:hover::after,
.entrega__link:focus-visible::after,
.entrega:focus-within .entrega__link::after { transform: scaleX(1); }

/* Cartão de prévia: só em quem tem mouse; no toque, o nome abre o site direto. */
.cartao { display: none; }

@media (hover: hover) and (min-width: 768px) {
  .cartao {
    position: absolute;
    top: 100%;
    left: -16px;
    z-index: 70;
    display: block;
    width: 296px;
    padding-top: 8px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity .22s var(--ease), transform .28s var(--ease), visibility 0s linear .28s;
  }

  .entrega:hover .cartao,
  .entrega:focus-within .cartao {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: .06s, .06s, 0s;
  }

  .cartao__corpo {
    position: relative;
    display: block;
    padding: 8px;
    border: 1px solid var(--line-2);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: 0 24px 48px -16px rgba(0, 0, 0, .7), 0 2px 6px rgba(0, 0, 0, .35);
    color: var(--text);
    text-decoration: none;
  }

  /* Bico que aponta para o nome. */
  .cartao__corpo::before {
    content: "";
    position: absolute;
    top: -6px;
    left: 26px;
    width: 10px;
    height: 10px;
    border-top: 1px solid var(--line-2);
    border-left: 1px solid var(--line-2);
    background: var(--surface);
    transform: rotate(45deg);
  }

  .cartao__tela {
    overflow: hidden;
    border-radius: 7px;
    background: var(--bg-2);
    aspect-ratio: 16 / 10;
  }

  .cartao__tela img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    transform: scale(1.04);
    transition: transform .9s var(--ease);
  }

  .entrega:hover .cartao__tela img,
  .entrega:focus-within .cartao__tela img { transform: scale(1); }

  .cartao__texto {
    display: block;
    padding: 12px 6px 4px;
  }

  .cartao__nome {
    display: block;
    font-size: 15px;
    line-height: 1.25;
    font-weight: 700;
    color: #fff;
  }

  .cartao__meta {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    line-height: 1.35;
    color: var(--muted);
  }

  .cartao__dif {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--line);
    font-size: 13.5px;
    line-height: 1.4;
    color: var(--text-2);
  }

  .cartao__dif::before {
    content: "";
    flex: none;
    width: 6px;
    height: 6px;
    margin-top: 5px;
    border-radius: 1.5px;
    background: var(--blue);
  }

  .cartao__ir {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 12px;
    padding: 9px 10px 9px 12px;
    border-radius: 8px;
    background: var(--bg-2);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--text);
    transition: background-color .2s var(--ease);
  }

  .cartao__ir svg {
    width: 12px;
    height: 12px;
    color: var(--blue);
    transition: transform .25s var(--ease);
  }

  .cartao__corpo:hover .cartao__ir { background: #17325a; }
  .cartao__corpo:hover .cartao__ir svg { transform: translate(2px, -2px); }
}

/* Entrada no carregamento: só no computador e só para quem não pediu menos movimento. */
@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
  .topbar::before { animation: filete 1.1s var(--ease) both; }

  .topbar__entregas > *,
  .topbar__fatos > * { animation: surge .7s var(--ease) both; }

  .topbar__entregas > :nth-child(2) { animation-delay: .08s; }
  .topbar__fatos > :nth-child(1) { animation-delay: .16s; }
  .topbar__fatos > :nth-child(2) { animation-delay: .22s; }
  .topbar__fatos > :nth-child(3) { animation-delay: .28s; }
}

@keyframes filete { from { transform: scaleX(0); } }
@keyframes surge { from { opacity: 0; transform: translateY(4px); } }

@media (prefers-reduced-motion: reduce) {
  .pulso::after { animation: none; }
  .cartao, .cartao__tela img, .entrega__link::after { transition: none !important; }
}

/* ---------- Botão ---------- */

.botao {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 0 22px 0 12px;
  border: 0;
  border-radius: var(--radius);
  background: var(--blue);
  color: #fff;
  font: 700 16px/1 var(--font);
  letter-spacing: .02em;
  text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 12px 26px -14px rgba(61, 123, 255, .75);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background-color .2s var(--ease);
}

.botao__icone {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .15);
  transition: transform .3s var(--ease);
}

.botao__icone svg { width: 16px; height: 16px; }

.botao:hover {
  background: #4f88ff;
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 0 0 4px rgba(61, 123, 255, .2), 0 18px 32px -14px rgba(61, 123, 255, .8);
}

.botao:hover .botao__icone--volta { transform: translateX(-3px); }

.botao:active { transform: translateY(0); transition-duration: .08s; }

.botao:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* ---------- Página de espera ---------- */

.espera {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 48px var(--gutter);
  text-align: center;
}

.espera__logo { width: 190px; margin: 0 auto 44px; }

.espera__titulo {
  margin: 0;
  font-size: clamp(30px, 6vw, 48px);
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -.01em;
  text-wrap: balance;
}

.espera__texto {
  max-width: 460px;
  margin: 16px auto 36px;
  color: var(--text-2);
  font-size: 17px;
  line-height: 1.6;
  text-wrap: pretty;
}

@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
  .espera__conteudo > * { animation: surge .8s var(--ease) both; }
  .espera__conteudo > :nth-child(2) { animation-delay: .08s; }
  .espera__conteudo > :nth-child(3) { animation-delay: .16s; }
  .espera__conteudo > :nth-child(4) { animation-delay: .24s; }
}

/* ---------- Topo: topbar + cabeçalho, rola junto com a página (nunca fixo) ---------- */

.pular {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 200;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--blue);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform .2s var(--ease);
}

.pular:focus-visible { transform: none; }

.topo {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
}

/* Borda inferior desenhada por dentro, para o facho de luz correr sobre ela sem vazar da tela. */
.cabecalho {
  position: relative;
  overflow: hidden;
}

.cabecalho::before,
.cabecalho::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  pointer-events: none;
}

.cabecalho::before {
  right: 0;
  background: var(--line);
}

/* Facho de luz: um traço azul-claro que atravessa a borda e some nas pontas. */
.cabecalho::after {
  width: 26%;
  min-width: 180px;
  background: #b9d0ff;
  box-shadow: 0 0 12px 1px rgba(111, 155, 255, .6);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 45%, #000 55%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 45%, #000 55%, transparent);
  opacity: 0;
  transform: translateX(-100%);
}

@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
  .cabecalho::after { animation: facho 7s cubic-bezier(.45, 0, .25, 1) 1.6s infinite; }
}

@keyframes facho {
  0% { transform: translateX(-100%); opacity: 0; }
  5% { opacity: 1; }
  36% { opacity: 1; }
  42% { transform: translateX(100vw); opacity: 0; }
  100% { transform: translateX(100vw); opacity: 0; }
}

.cabecalho__inner {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 1320px;
  height: 68px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.marca {
  display: block;
  flex: none;
  margin-right: auto;
  border-radius: 6px;
}

.marca img { width: 148px; }

/* Logo original azul, clareada de leve para o fundo marinho (pedido do Jairo, 01/11). */
.marca img,
.gaveta__logo,
.espera__logo,
.prancha__logo img { filter: brightness(1.3); }

/* Menu do computador: só aparece onde cabe inteiro. */
.menu { display: none; }

.menu__lista {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu__item {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  height: 40px;
  padding: 0 13px;
  border-radius: 9px;
  color: #9fb0c9;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}

/* A palavra é "renderizada": um cursor azul atravessa o nome e o pinta de branco. */
.menu__rotulo {
  position: relative;
  display: inline-block;
}

.menu__tinta {
  position: absolute;
  inset: 0;
  color: #fff;
  white-space: nowrap;
  clip-path: inset(0 100% 0 0);
  transition: clip-path .25s var(--ease);
}

.menu__rotulo::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 2px;
  height: 1.15em;
  margin-top: -.6em;
  border-radius: 1px;
  background: var(--blue);
  opacity: 0;
}

.menu__item:hover .menu__tinta,
.menu__item:focus-visible .menu__tinta {
  clip-path: inset(0 0 0 0);
  transition: clip-path .5s cubic-bezier(.65, 0, .35, 1);
}

.menu__item:hover .menu__rotulo::after,
.menu__item:focus-visible .menu__rotulo::after {
  animation: digita .9s cubic-bezier(.65, 0, .35, 1) forwards;
}

@keyframes digita {
  0% { left: 0; opacity: 1; }
  55% { left: calc(100% + 4px); opacity: 1; }
  70% { opacity: 0; }
  82% { opacity: 1; }
  100% { left: calc(100% + 4px); opacity: 0; }
}

/* Página atual: nome já pintado e o cursor piscando ao lado, como num editor. */
.menu__item[aria-current] .menu__tinta { clip-path: inset(0 0 0 0); }

.menu__item[aria-current] .menu__rotulo::after {
  left: calc(100% + 4px);
  opacity: 1;
  animation: pisca 1.06s steps(1) infinite;
}

/* Passando o mouse na página atual: o cursor corre de novo e volta a piscar no fim. */
.menu__item[aria-current]:hover .menu__rotulo::after,
.menu__item[aria-current]:focus-visible .menu__rotulo::after {
  animation: corre .5s cubic-bezier(.65, 0, .35, 1) both, pisca 1.06s steps(1) .5s infinite;
}

@keyframes pisca {
  0% { opacity: 1; }
  50% { opacity: 0; }
}

@keyframes corre {
  from { left: 0; opacity: 1; }
  to { left: calc(100% + 4px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .menu__tinta { transition: none !important; }
  .menu__item .menu__rotulo::after,
  .menu__item:hover .menu__rotulo::after,
  .menu__item:focus-visible .menu__rotulo::after { animation: none !important; }
}

/* Solicitar orçamento: selo escuro com contorno fino e quadradinho no verde real do WhatsApp. */
.orcar {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 44px;
  padding: 3px;
  border: 1px solid rgba(37, 211, 102, .38);
  border-radius: 11px;
  background: rgba(37, 211, 102, .07);
  color: #eafff2;
  font: 700 13px/1 var(--font);
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: transform .25s var(--ease), background-color .2s var(--ease), border-color .2s var(--ease), box-shadow .25s var(--ease);
}

.orcar__chip {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: #25d366;
  color: #04210f;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3);
  transition: transform .3s var(--ease);
}

.orcar__chip svg { width: 20px; height: 20px; }

/* Celular: só o quadradinho; o texto aparece do tablet para cima. */
.orcar__texto { display: none; }

.orcar:hover {
  background: rgba(37, 211, 102, .14);
  border-color: rgba(37, 211, 102, .65);
  transform: translateY(-1px);
  box-shadow: 0 12px 26px -16px rgba(37, 211, 102, .7);
}

.orcar:hover .orcar__chip { transform: scale(1.05); }
.orcar:active { transform: translateY(0); transition-duration: .08s; }
.orcar:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* Halo discreto no quadradinho: lembra que dá para chamar agora. */
.orcar__chip::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid #25d366;
  opacity: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .cabecalho .orcar__chip::before { animation: halo 3.2s var(--ease) 1.2s infinite; }
}

@keyframes halo {
  0% { transform: scale(1); opacity: .55; }
  45%, 100% { transform: scale(1.45); opacity: 0; }
}

@media (min-width: 768px) {
  .orcar {
    padding: 3px 18px 3px 3px;
  }

  .orcar__texto { display: inline; }
}

.sanduiche {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition: background-color .2s var(--ease), border-color .2s var(--ease);
}

.sanduiche:hover { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .22); }

.sanduiche__linhas,
.sanduiche__linhas::before {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}

.sanduiche__linhas { position: relative; transform: translateY(-3px); }

.sanduiche__linhas::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 12px;
  transition: width .25s var(--ease);
}

.sanduiche:hover .sanduiche__linhas::before { width: 18px; }

@media (min-width: 768px) {
  .cabecalho__inner { height: 80px; gap: 14px; }
  .marca img { width: 164px; }
}

@media (min-width: 1280px) {
  .cabecalho__inner { height: 86px; gap: 20px; }
  .marca img { width: 172px; }
  .menu { display: block; }
  .sanduiche { display: none; }

}

/* Menu e botão de orçamento dividem a linha: itens mais justos até a largura máxima. */
@media (min-width: 1280px) {
  .menu__item { padding: 0 10px; letter-spacing: .06em; }
}

@media (min-width: 1280px) and (max-width: 1399px) {
  .cabecalho__inner { gap: 14px; }
  .menu__item { padding: 0 8px; font-size: 13px; letter-spacing: .045em; }
  .orcar { letter-spacing: .1em; padding-right: 14px; gap: 10px; }
}

/* ---------- Gaveta do celular ---------- */

.gaveta {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: 0 var(--gutter) max(24px, env(safe-area-inset-bottom));
  overflow-y: auto;
  background: var(--bg);
  opacity: 0;
  transition: opacity .3s var(--ease);
}

.gaveta[hidden] { display: none; }
.gaveta.is-aberta { opacity: 1; }

.gaveta__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
  border-bottom: 1px solid var(--line);
}

.gaveta__logo { width: 148px; }

.gaveta__fechar {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
}

.gaveta__fechar svg { width: 22px; height: 22px; }

.gaveta__menu {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 20px 0;
}

.gaveta__menu a {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  font-size: clamp(25px, 7.4vw, 34px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: .01em;
  text-transform: uppercase;
  text-decoration: none;
}

.gaveta__menu span {
  min-width: 22px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
}

.gaveta__menu a[aria-current] span { color: var(--blue); }
.gaveta__menu a:active { color: #fff; }

.gaveta__rodape {
  display: grid;
  gap: 14px;
  padding-top: 8px;
  text-align: center;
}

.orcar--cheio {
  justify-content: center;
  width: 100%;
  height: 56px;
  padding: 4px 18px 4px 4px;
  font-size: 14px;
}

.orcar--cheio .orcar__texto { display: inline; }
.orcar--cheio .orcar__chip { width: 46px; height: 46px; border-radius: 9px; }
.orcar--cheio { justify-content: flex-start; gap: 0; }
.orcar--cheio .orcar__texto { flex: 1; text-align: center; padding-right: 46px; }

.gaveta__fato {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

/* Entrada da gaveta: itens sobem em sequência ao abrir. */
@media (prefers-reduced-motion: no-preference) {
  .gaveta__menu a,
  .gaveta__rodape {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .4s var(--ease), transform .5s var(--ease);
  }

  .gaveta.is-aberta .gaveta__menu a,
  .gaveta.is-aberta .gaveta__rodape { opacity: 1; transform: none; }

  .gaveta.is-aberta .gaveta__menu a:nth-child(2) { transition-delay: .03s; }
  .gaveta.is-aberta .gaveta__menu a:nth-child(3) { transition-delay: .06s; }
  .gaveta.is-aberta .gaveta__menu a:nth-child(4) { transition-delay: .09s; }
  .gaveta.is-aberta .gaveta__menu a:nth-child(5) { transition-delay: .12s; }
  .gaveta.is-aberta .gaveta__menu a:nth-child(6) { transition-delay: .15s; }
  .gaveta.is-aberta .gaveta__menu a:nth-child(7) { transition-delay: .18s; }
  .gaveta.is-aberta .gaveta__rodape { transition-delay: .22s; }
}

@media (min-width: 1280px) {
  .gaveta { display: none !important; }
}

/* ---------- Abertura: a oferta é a prévia ---------- */

.abertura {
  padding: 140px var(--gutter) 64px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
}

.abertura__inner {
  display: grid;
  gap: 48px;
  max-width: 1240px;
  margin: 0 auto;
}

.abertura__texto { text-align: center; }

.abertura__titulo {
  margin: 0;
  font-weight: 700;
}

/* A palavra-chave abre o título; a oferta é a frase grande. */
.abertura__chave {
  display: block;
  color: #8fb3ff;
  font-size: 15px;
  letter-spacing: .16em;
  line-height: 1.3;
  text-transform: uppercase;
}

.abertura__oferta {
  display: block;
  margin-top: 14px;
  font-size: clamp(36px, 9.6vw, 66px);
  line-height: 1.02;
  letter-spacing: -.012em;
  text-wrap: balance;
}

/* "antes de assinar." no dourado das estrelas: o choque quente sobre o azul. */
.abertura__destaque {
  color: var(--gold);
  white-space: nowrap;
  background: linear-gradient(currentColor, currentColor) 0 96% / 100% .06em no-repeat;
}

.abertura__sub {
  max-width: 560px;
  margin: 20px auto 0;
  color: var(--text-2);
  font-size: 17px;
  line-height: 1.6;
  text-wrap: pretty;
}

.abertura__acoes {
  display: grid;
  justify-items: center;
  gap: 18px;
  margin-top: 30px;
}

.botao--seta { padding: 0 12px 0 22px; }
.botao--seta:hover .botao__icone { transform: translateX(3px); }

/* Botão da prévia: o desenho do "Conheça a Elemento" (pedido do Jairo), um pouco maior por ser a ação
   principal da abertura, com um brilho que atravessa no hover e uma vez ao abrir. */
.conheca.conheca--previa {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  height: 52px;
  margin: 0;
  padding-right: 22px;
  font-size: 14.5px;
}

.conheca--previa .conheca__chip { width: 44px; height: 44px; }
.conheca--previa .conheca__chip svg { width: 18px; height: 18px; }

.conheca--previa::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 246, 227, .22) 50%, transparent 70%);
  transform: translateX(-130%);
  transition: transform .8s var(--ease);
}

.conheca--previa:hover::after { transform: translateX(130%); }

/* Carimbo redondo: a prévia aprovada, antes do contrato. */
.carimbo {
  display: block;
  width: 140px;
  height: 140px;
  margin: 30px auto 0;
  color: #6f9bff;
  overflow: visible;
  transform: rotate(-12deg);
}

/* Computador: o carimbo ocupa o vão à direita dos passos. */
@media (min-width: 1100px) {
  .abertura__texto { position: relative; }

  .carimbo {
    position: absolute;
    right: 3%;
    bottom: -18px;
    width: 172px;
    height: 172px;
    margin: 0;
  }
}

@media (min-width: 1100px) and (max-width: 1279px) {
  .carimbo { width: 148px; height: 148px; right: 0; }
}

.carimbo__anel { fill: none; stroke: currentColor; stroke-width: 3; }
.carimbo__anel--fino { stroke-width: 1.2; }
.carimbo__faixa { fill: none; stroke: currentColor; stroke-width: 1.6; }

/* O anel de texto gira devagar; o APROVADO fica parado e legível. */
.carimbo__giro { transform-box: view-box; transform-origin: center; }

.carimbo__volta {
  fill: currentColor;
  font: 700 8.5px/1 var(--font);
  letter-spacing: .1em;
}

.carimbo__palavra {
  fill: currentColor;
  font: 700 14.5px/1 var(--font);
  letter-spacing: .08em;
}

@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
  .carimbo { animation: carimba .55s cubic-bezier(.3, 1.3, .5, 1) .9s both; }
}

@keyframes carimba {
  0% { opacity: 0; transform: rotate(-12deg) scale(1.7); }
  70% { opacity: 1; transform: rotate(-12deg) scale(.95); }
  100% { opacity: 1; transform: rotate(-12deg) scale(1); }
}

@media (prefers-reduced-motion: no-preference) {
  .carimbo__giro { animation: gira 24s linear infinite; }
}

@keyframes gira { to { transform: rotate(360deg); } }

/* Os 3 passos da prévia. */
.passos {
  display: grid;
  gap: 10px;
  justify-content: center;
  margin: 34px 0 0;
  padding: 0;
  list-style: none;
  color: var(--text-2);
  font-size: 15px;
}

.passos li {
  display: flex;
  align-items: center;
  gap: 10px;
}

.passos__n {
  display: grid;
  place-items: center;
  flex: none;
  width: 24px;
  height: 24px;
  border: 1px solid rgba(61, 123, 255, .5);
  border-radius: 7px;
  background: rgba(61, 123, 255, .12);
  color: #b8ceff;
  font-size: 12px;
  font-weight: 700;
}

/* Os passos acendem um de cada vez, em ciclo: 1, depois 2, depois 3. */
@media (prefers-reduced-motion: no-preference) {
  .passos__n { position: relative; isolation: isolate; }

  .passos__n::before {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: -1;
    border-radius: inherit;
    background: var(--blue);
    box-shadow: 0 0 0 4px rgba(61, 123, 255, .2), 0 0 18px rgba(61, 123, 255, .7);
    opacity: 0;
    animation: passo-luz 3.6s var(--ease) infinite;
  }

  .passos li,
  .passos__n { animation: passo-acende 3.6s var(--ease) infinite; }

  .passos li:nth-child(2),
  .passos li:nth-child(2) .passos__n,
  .passos li:nth-child(2) .passos__n::before { animation-delay: 1.2s; }

  .passos li:nth-child(3),
  .passos li:nth-child(3) .passos__n,
  .passos li:nth-child(3) .passos__n::before { animation-delay: 2.4s; }
}

@keyframes passo-luz { 5%, 24% { opacity: 1; } 33% { opacity: 0; } }
@keyframes passo-acende { 5%, 24% { color: #fff; } }

/* Planta da página: desenho técnico em linhas azuis, tom sobre tom. */
.planta { margin: 0; }

.planta__desenho {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #0a1b33;
}

.planta__desenho .tr {
  fill: none;
  stroke: #6f9bff;
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke .25s var(--ease), fill .25s var(--ease);
}

.planta__desenho .fino { stroke: rgba(143, 179, 255, .55); stroke-width: 1; }
.planta__desenho .bloco { fill: rgba(111, 155, 255, .12); }
.planta__desenho .celular-fundo { fill: #0a1b33; }

.planta__desenho .cota .tr { stroke: rgba(143, 179, 255, .45); }

.planta__desenho text {
  fill: #8fa3c0;
  font: 600 10px/1 var(--font);
  letter-spacing: .12em;
}

/* Marcadores numerados sobre a planta. */
.planta__desenho .marca circle {
  fill: var(--blue);
  stroke: #0a1b33;
  stroke-width: 3;
  transition: transform .25s var(--ease);
  transform-box: fill-box;
  transform-origin: center;
}

.planta__desenho .marca text {
  fill: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
}

/* Destaque: a parte escolhida acende em branco. */
.planta.is-foco .parte .tr,
.planta.is-foco [class^="t"] > .tr { opacity: .45; }

.planta.is-foco .parte.is-acesa .tr {
  opacity: 1;
  stroke: #fff;
  stroke-width: 1.6;
}

.planta.is-foco .parte.is-acesa .bloco { fill: rgba(61, 123, 255, .35); }
.planta.is-foco .marca.is-acesa circle { transform: scale(1.18); }

.planta__legenda {
  display: grid;
  justify-items: center;
  gap: 12px;
  margin-top: 18px;
  text-align: center;
}

.planta__titulo {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.planta__itens {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  width: 100%;
}

.planta__item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, .03);
  color: var(--text-2);
  font: 600 14px/1.2 var(--font);
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color .2s var(--ease), background-color .2s var(--ease), color .2s var(--ease);
}

.planta__n {
  display: grid;
  place-items: center;
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}

.planta__item:hover,
.planta__item:focus-visible,
.planta__item.is-acesa {
  border-color: rgba(61, 123, 255, .55);
  background: rgba(61, 123, 255, .1);
  color: #fff;
}

/* Celular estreito: o nome pode quebrar em duas linhas para a legenda caber em 320 px. */
@media (max-width: 374px) {
  .planta__itens { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .planta__item { gap: 8px; padding: 6px 10px; white-space: normal; }
}

@media (min-width: 768px) {
  .abertura { padding: 160px var(--gutter) 72px; }
  .abertura__chave { font-size: 16px; }
  .passos { grid-auto-flow: column; gap: 22px; }
  .abertura__acoes { grid-auto-flow: column; align-items: center; justify-content: center; gap: 28px; }
  .planta__itens { grid-template-columns: repeat(4, auto); justify-content: center; }
}

/* Computador: texto à esquerda, planta à direita, tudo numa dobra só. */
@media (min-width: 1100px) {
  .abertura { padding: 176px var(--gutter) 80px; }

  .abertura__inner {
    grid-template-columns: 1fr 1.02fr;
    align-items: center;
    gap: 64px;
  }

  .abertura__texto { text-align: left; }
  .abertura__oferta { font-size: clamp(48px, 4.6vw, 66px); }
  .abertura__sub { margin-left: 0; text-align: justify; hyphens: auto; }
  .abertura__acoes { justify-content: start; }
  .passos { justify-content: start; grid-auto-flow: row; gap: 10px; }
  .planta__legenda { justify-items: start; text-align: left; }
  .planta__itens { grid-template-columns: repeat(2, 1fr); }
}



/* Entrada no carregamento: só no computador. O cursor "desenha" a planta. */
@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
  .abertura__chave,
  .abertura__oferta,
  .abertura__sub,
  .abertura__acoes,
  .passos { animation: surge .8s var(--ease) both; }

  .abertura__oferta { animation-delay: .06s; }
  .abertura__destaque { animation: risca .9s var(--ease) .7s both; }
  .abertura__sub { animation-delay: .12s; }
  .conheca--previa::after { animation: brilho 1.1s var(--ease) 1.4s; }
  .abertura__acoes { animation-delay: .18s; }
  .passos { animation-delay: .24s; }

  .planta__desenho .tr {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: traca 1s cubic-bezier(.65, 0, .35, 1) forwards;
  }

  .planta__desenho .bloco,
  .planta__desenho .celular-fundo { fill-opacity: 0; animation: traca 1s cubic-bezier(.65, 0, .35, 1) forwards, preenche .6s var(--ease) forwards; }

  .planta__desenho .t0 .tr, .planta__desenho .t0 text { animation-delay: .1s; }
  .planta__desenho .t1 .tr { animation-delay: .2s; }
  .planta__desenho .t2 .tr { animation-delay: .5s; }
  .planta__desenho .t3 .tr { animation-delay: .7s; }
  .planta__desenho .t4 .tr { animation-delay: .85s; }
  .planta__desenho .t5 .tr { animation-delay: 1s; }
  .planta__desenho .t6 .tr { animation-delay: 1.15s; }
  .planta__desenho .t7 .tr { animation-delay: 1.3s; }
  .planta__desenho .t8 .tr { animation-delay: 1.6s; }

  .planta__desenho .t2 .bloco, .planta__desenho .t3 .bloco, .planta__desenho .t5 .bloco { animation-delay: .5s, 1.4s; }
  .planta__desenho .t7 .celular-fundo { animation-delay: 1.3s, 1.3s; }
  .planta__desenho .t7 .bloco { animation-delay: 1.5s, 2s; }

  .planta__desenho text { opacity: 0; animation: aparece .6s var(--ease) 1.8s forwards; }
  .planta__desenho .marca { opacity: 0; animation: aparece .5s var(--ease) 2s forwards; }
  .planta__legenda { animation: surge .8s var(--ease) 2.1s both; }
}

@keyframes risca { from { background-size: 0 .06em; } }
@keyframes brilho { from { transform: translateX(-130%); } to { transform: translateX(130%); } }
@keyframes traca { to { stroke-dashoffset: 0; } }
@keyframes preenche { to { fill-opacity: 1; } }
@keyframes aparece { to { opacity: 1; } }

/* ---------- A Elemento: texto de entidade, duas fotos e o selo do ano ---------- */

.oficio {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 64px var(--gutter) 72px;
  background: #0b2147;
  color: #fff;
}

/* Pontilhado fino atrás das fotos e uma luz dourada discreta perto do selo. */
.oficio::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: radial-gradient(rgba(143, 179, 255, .16) 1px, transparent 1.4px);
  background-size: 18px 18px;
  -webkit-mask-image: radial-gradient(ellipse 50% 60% at 20% 55%, #000 15%, transparent 72%);
  mask-image: radial-gradient(ellipse 50% 60% at 20% 55%, #000 15%, transparent 72%);
}

.oficio::after {
  content: "";
  position: absolute;
  top: 8%;
  left: 18%;
  z-index: -1;
  width: 620px;
  height: 620px;
  background: radial-gradient(closest-side, rgba(242, 185, 64, .1), transparent);
  pointer-events: none;
}

.oficio__inner {
  display: grid;
  grid-template-areas: "cab" "fotos" "corpo";
  gap: 36px;
  max-width: 1240px;
  margin: 0 auto;
}

/* Fotos: a grande com moldura dourada deslocada, a pequena por cima e o selo do ano. */
.oficio__fotos {
  grid-area: fotos;
  position: relative;
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
  padding: 0 0 40px 12px;
}

.oficio__fotos::before {
  content: "";
  position: absolute;
  left: 0;
  top: -12px;
  width: calc((100% - 12px) * .78);
  aspect-ratio: 4 / 5;
  border: 1px solid rgba(242, 185, 64, .55);
  border-radius: 14px;
}

.oficio__f1,
.oficio__f2 { margin: 0; overflow: hidden; }

.oficio__f1 {
  position: relative;
  width: 78%;
  aspect-ratio: 4 / 5;
  border-radius: 14px;
  box-shadow: 0 0 0 1px rgba(143, 179, 255, .16), 0 40px 70px -36px rgba(0, 0, 0, .8);
}

.oficio__f2 {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 54%;
  aspect-ratio: 4 / 3;
  border: 5px solid #0b2147;
  border-radius: 16px;
  box-shadow: 0 30px 50px -26px rgba(0, 0, 0, .85);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}

.oficio__f1 img,
.oficio__f2 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease);
}

.oficio__selo {
  position: absolute;
  top: 22px;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 112px;
  min-height: 112px;
  margin: 0;
  padding: 12px 8px;
  overflow: hidden;
  border-radius: 12px;
  background: #081628;
  box-shadow: inset 0 0 0 1px rgba(242, 185, 64, .5), 0 26px 44px -22px rgba(0, 0, 0, .9);
  text-align: center;
}

.oficio__selo small {
  color: rgba(255, 255, 255, .72);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .2em;
  line-height: 1.2;
  text-transform: uppercase;
}

.oficio__selo strong {
  margin: 4px 0 5px;
  color: var(--gold);
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
}

.oficio__selo span { color: #c8d3e3; font-size: 12.5px; line-height: 1.25; }

/* Um brilho atravessa o selo de tempos em tempos. */
.oficio__selo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .16) 50%, transparent 65%);
  transform: translateX(-120%);
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .oficio__selo::after { animation: oficio-brilho 7s var(--ease) infinite 1s; }
}

@keyframes oficio-brilho { 0%, 70% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }

/* Texto */
.oficio__cab { grid-area: cab; text-align: center; }

.oficio__rotulo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0 0 16px;
  color: #e8c16a;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .22em;
  line-height: 1.2;
  text-transform: uppercase;
}

.oficio__rotulo::before,
.oficio__rotulo::after {
  content: "";
  flex: none;
  width: 24px;
  height: 1px;
  background: rgba(242, 185, 64, .7);
}

.oficio__titulo {
  margin: 0;
  font-size: clamp(28px, 7.8vw, 46px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.012em;
  text-wrap: balance;
}

.oficio__frase { display: block; }
.oficio__ouro { color: var(--gold); white-space: nowrap; }

.oficio__corpo { grid-area: corpo; min-width: 0; }

.oficio__corpo p {
  margin: 0 0 18px;
  color: #c8d3e3;
  font-size: 17px;
  line-height: 1.7;
  text-align: justify;
  hyphens: auto;
  text-wrap: pretty;
}

/* Único botão: o mesmo desenho do selo "Solicitar orçamento" do cabeçalho, menor e no dourado da seção. */
.conheca {
  display: flex;
  align-items: center;
  gap: 12px;
  width: fit-content;
  height: 42px;
  margin: 12px auto 0;
  padding: 3px 18px 3px 3px;
  border: 1px solid rgba(242, 185, 64, .42);
  border-radius: 11px;
  background: rgba(242, 185, 64, .07);
  color: #fff6e3;
  font: 700 13px/1 var(--font);
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: transform .25s var(--ease), background-color .2s var(--ease), border-color .2s var(--ease), box-shadow .25s var(--ease);
}

.conheca__chip {
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--gold);
  color: #1a1203;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35);
}

.conheca__chip svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .3s var(--ease);
}

.conheca:hover {
  background: rgba(242, 185, 64, .14);
  border-color: rgba(242, 185, 64, .7);
  transform: translateY(-1px);
  box-shadow: 0 12px 26px -16px rgba(242, 185, 64, .6);
}

.conheca:hover .conheca__chip svg { transform: translateX(2px); }
.conheca:active { transform: translateY(0); transition-duration: .08s; }
.conheca:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

@media (hover: hover) and (pointer: fine) {
  .oficio__f1:hover img,
  .oficio__f2:hover img { transform: scale(1.05); }
  .oficio__f2:hover { transform: translateY(-6px); box-shadow: 0 40px 60px -26px rgba(0, 0, 0, .9); }
}

@media (min-width: 640px) {
  .oficio__fotos { padding: 0 0 46px 16px; }
  .oficio__fotos::before { top: -16px; width: calc((100% - 16px) * .78); }
  .oficio__f2 { border-width: 6px; }
  .oficio__selo { top: 32px; right: 4%; width: 132px; min-height: 132px; padding: 16px 12px; }
  .oficio__selo small { font-size: 11.5px; }
  .oficio__selo strong { font-size: 42px; }
  .oficio__selo span { font-size: 13.5px; }
  .oficio__corpo { max-width: 680px; margin: 0 auto; }
}

@media (min-width: 1100px) {
  .oficio { padding: 96px var(--gutter) 100px; }
  .oficio__inner {
    grid-template-columns: minmax(0, 500px) minmax(0, 1fr);
    grid-template-areas: "fotos cab" "fotos corpo";
    grid-template-rows: auto auto;
    align-content: center;
    column-gap: 80px;
    row-gap: 0;
  }
  .oficio__fotos { align-self: center; margin: 0; }
  .oficio__cab { align-self: end; margin-bottom: 24px; text-align: left; }
  .oficio__rotulo { justify-content: flex-start; font-size: 13.5px; }
  .oficio__rotulo::before { width: 34px; }
  .oficio__rotulo::after { display: none; }
  .oficio__corpo { align-self: start; max-width: none; margin: 0; }
  .oficio__corpo p { font-size: 18px; }
  .conheca { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .oficio__f1 img, .oficio__f2 img, .oficio__f2, .conheca, .conheca__chip svg { transition: none; }
}

/* ---------- Por que agora: o caminho do cliente num celular ---------- */

.necessario {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 64px var(--gutter) 72px;
  background: #0f2a5f;
  color: #fff;
}

/* Azul safira com pontilhado fino e uma luz suave atrás do celular. */
.necessario::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: radial-gradient(rgba(255, 255, 255, .08) 1px, transparent 1.4px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 80% 75% at 50% 55%, #000 30%, transparent 85%);
  mask-image: radial-gradient(ellipse 80% 75% at 50% 55%, #000 30%, transparent 85%);
}

.necessario::after {
  content: "";
  position: absolute;
  top: 30%;
  left: 50%;
  z-index: -1;
  width: 1000px;
  height: 760px;
  margin-left: -500px;
  background: radial-gradient(closest-side, rgba(84, 140, 255, .28), transparent);
  pointer-events: none;
}

.necessario__inner { max-width: 1240px; margin: 0 auto; }

.necessario__cab { max-width: 760px; margin: 0 auto; text-align: center; }

.necessario__rotulo {
  margin: 0;
  color: #8fb3ff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.necessario__titulo {
  margin: 14px 0 0;
  font-size: clamp(38px, 9.8vw, 76px);
  font-weight: 700;
  line-height: .98;
  letter-spacing: -.018em;
  text-wrap: balance;
}

/* "necessário" grifado com o dourado do "antes de assinar." */
.necessario__grifo {
  color: var(--gold);
  white-space: nowrap;
  background: linear-gradient(var(--gold), var(--gold)) 0 94% / 100% .1em no-repeat;
}

.necessario__lead {
  max-width: 600px;
  margin: 20px auto 0;
  color: #c8d3e3;
  font-size: 18px;
  line-height: 1.6;
  text-wrap: pretty;
}

.palco { display: grid; gap: 28px; }

/* O caminho do cliente: cada frase acende junto com a tela do celular. */
.caminho { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }

.caminho__passo {
  position: relative;
  display: grid;
  gap: 6px;
  width: 100%;
  padding: 18px 20px 22px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: center;
  cursor: pointer;
  opacity: .5;
  transition: opacity .35s var(--ease), background-color .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}

.caminho__passo b { font-size: 21px; font-weight: 700; line-height: 1.2; }
.caminho__passo span { color: #b8c6dc; font-size: 16px; line-height: 1.5; text-wrap: pretty; }
.caminho__passo:hover { opacity: .8; }

.caminho__passo.is-ativo {
  opacity: 1;
  border-color: rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .07);
  box-shadow: 0 26px 50px -30px rgba(0, 0, 0, .55);
}

.caminho__passo:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.caminho__barra {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 10px;
  height: 2px;
  overflow: hidden;
  border-radius: 2px;
  background: rgba(255, 255, 255, .12);
  opacity: 0;
}

.caminho__barra::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
}

.caminho__passo.is-ativo .caminho__barra { opacity: 1; }
.caminho__passo.is-ativo .caminho__barra::after { animation: progresso var(--dur, 5s) linear forwards; }

@keyframes progresso { to { transform: scaleX(1); } }

/* Celular */
.palco__celular { position: relative; display: grid; place-items: center; }

.palco__celular::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 470px;
  height: 470px;
  margin: -235px 0 0 -235px;
  border: 1px solid rgba(143, 179, 255, .18);
  border-radius: 50%;
  box-shadow: 0 0 0 64px rgba(143, 179, 255, .04), 0 0 0 65px rgba(143, 179, 255, .13);
}

.celular {
  position: relative;
  width: 270px;
  aspect-ratio: 300 / 620;
  padding: 10px;
  border-radius: 46px;
  background: #0b0f17;
  box-shadow:
    inset 0 0 0 1.5px #3a4660,
    0 0 0 1px rgba(255, 255, 255, .07),
    0 50px 90px -40px rgba(0, 0, 0, .75),
    0 24px 50px -30px rgba(0, 0, 0, .5);
}

.celular__ilha {
  position: absolute;
  z-index: 6;
  top: 19px;
  left: 50%;
  width: 84px;
  height: 24px;
  margin-left: -42px;
  border-radius: 20px;
  background: #000;
}

.celular__tela {
  position: relative;
  isolation: isolate;
  height: 100%;
  overflow: hidden;
  border-radius: 36px;
  background: #fff;
  font-family: var(--font);
}

.celular__status {
  position: absolute;
  z-index: 5;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 40px;
  padding: 4px 22px 0 26px;
  color: #111;
  font-size: 13px;
  font-weight: 700;
  transition: color .4s var(--ease);
}

.celular__icones { display: flex; align-items: center; gap: 5px; }
.celular__icones svg { height: 10px; width: auto; fill: currentColor; }
.necessario[data-cena="3"] .celular__status { color: #fff; }

.tela {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  transform: translateX(28px);
  transition: opacity .5s var(--ease), transform .6s var(--ease);
}

.tela.is-ativa { opacity: 1; transform: none; }

/* Toque na tela */
.toque {
  position: absolute;
  z-index: 4;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(26, 115, 232, .28);
  opacity: 0;
  pointer-events: none;
}

.tela.is-toque .toque { animation: toque .7s var(--ease) forwards; }

@keyframes toque {
  0% { opacity: .95; transform: scale(.35); }
  100% { opacity: 0; transform: scale(1.7); }
}

/* 1. Busca */
.tela--busca { padding: 48px 12px 0; background: #fff; }

.busca-campo {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 14px;
  border-radius: 20px;
  box-shadow: 0 1px 6px rgba(32, 33, 36, .2);
  color: #202124;
  font-size: 14px;
}

.busca-campo svg { width: 15px; height: 15px; flex: none; fill: none; stroke: #5f6368; stroke-width: 2; stroke-linecap: round; }
.cursor { width: 1.5px; height: 17px; margin-left: -6px; background: #1a73e8; animation: cursor-pisca 1s steps(1) infinite; }

@keyframes cursor-pisca { 50% { opacity: 0; } }

.busca-abas {
  display: flex;
  gap: 14px;
  margin-top: 12px;
  padding: 0 6px;
  border-bottom: 1px solid #ebebeb;
  color: #5f6368;
  font-size: 12px;
}

.busca-abas span { padding-bottom: 8px; }
.busca-abas .is-on { color: #1a73e8; box-shadow: inset 0 -2px #1a73e8; }

.resultados { display: grid; gap: 10px; padding-top: 12px; }

.resultado {
  position: relative;
  padding: 12px;
  border-radius: 14px;
  transition: opacity .4s var(--ease), transform .5s var(--ease), background-color .3s var(--ease);
}

.resultado--destaque { box-shadow: 0 0 0 1px #e8eaed, 0 12px 26px -16px rgba(32, 33, 36, .4); }
.resultado__fonte { display: flex; align-items: center; gap: 8px; color: #202124; }

.resultado__fav {
  display: grid;
  place-items: center;
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #0f4c4a;
  color: #f5efe6;
  font-size: 11px;
  font-weight: 700;
}

.resultado__fonte b { display: block; font-size: 12px; font-weight: 600; }
.resultado__fonte small { display: block; color: #4d5156; font-size: 10.5px; }
.resultado__titulo { margin: 8px 0 0; color: #1a0dab; font-size: 15px; line-height: 1.25; }
.resultado__desc { margin: 4px 0 0; color: #4d5156; font-size: 12px; line-height: 1.4; }
.resultado__nota { display: block; margin-top: 6px; color: #4d5156; font-size: 12px; font-weight: 600; }
.resultado__nota i { color: #fbbc04; font-style: normal; letter-spacing: 1px; }
.resultado--vazio i { display: block; height: 8px; margin-top: 8px; border-radius: 4px; background: #eef0f2; }
.resultado--vazio i:first-child { width: 42%; margin-top: 0; }
.resultado--vazio i:nth-child(2) { width: 92%; }
.resultado--vazio i:nth-child(3) { width: 68%; }

.tela--busca .toque { top: 46px; left: 45%; }
.tela--busca.is-toque .resultado--destaque { background: #f1f6fe; }

/* Enquanto digita, os resultados ainda não apareceram. */
.necessario.is-js .tela--busca:not(.is-pronta) .resultado { opacity: 0; transform: translateY(10px); }
.tela--busca.is-pronta .resultado:nth-child(2) { transition-delay: .12s; }
.tela--busca.is-pronta .resultado:nth-child(3) { transition-delay: .24s; }

/* 2. O site da empresa (marca fictícia, com identidade própria) */
.tela--site { padding-top: 40px; background: #f5efe6; }

/* Faixa da barra de status: o conteúdo que rola passa por baixo dela. */
.tela--site::before { content: ""; position: absolute; z-index: 2; top: 0; left: 0; right: 0; height: 40px; background: #f5efe6; }
.site-rolo { position: relative; z-index: 1; }

.site-topo {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 46px;
  padding: 0 16px;
  border-bottom: 1px solid rgba(15, 76, 74, .1);
  background: #f5efe6;
}

.site-logo { display: flex; align-items: center; gap: 7px; color: #0f4c4a; font-size: 16px; font-weight: 700; letter-spacing: .04em; }
.site-logo i { width: 18px; height: 18px; border-radius: 50%; background: #0f4c4a; box-shadow: inset -5px -4px 0 #c8a25a; }
.site-menu { display: grid; gap: 4px; }
.site-menu i { display: block; width: 18px; height: 2px; border-radius: 2px; background: #0f4c4a; }

.tela--site.is-ativa .site-rolo { animation: rolar 5.6s var(--ease) both; }

@keyframes rolar {
  0%, 24% { transform: none; }
  58%, 100% { transform: translateY(-188px); }
}

.site-hero {
  position: relative;
  height: 300px;
  overflow: hidden;
  padding: 26px 18px;
  background: #0f4c4a;
  color: #f5efe6;
}

.site-hero__sol {
  position: absolute;
  top: 128px;
  right: -46px;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  background: #c8a25a;
  box-shadow: 0 0 0 26px rgba(200, 162, 90, .16), 0 0 0 54px rgba(200, 162, 90, .07);
}

.site-hero__rotulo { position: relative; margin: 0; color: #c8a25a; font-size: 10px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.site-hero__titulo { position: relative; max-width: 190px; margin: 10px 0 0; font-size: 29px; font-weight: 300; line-height: 1.04; }

.site-botao {
  position: absolute;
  left: 18px;
  bottom: 24px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 14px;
  border-radius: 9px;
  background: #f5efe6;
  color: #0f4c4a;
  font-size: 12px;
  font-weight: 700;
}

.site-botao svg { width: 15px; height: 15px; color: #1faa53; }

.site-servicos { display: flex; flex-wrap: wrap; gap: 6px; padding: 18px 16px 4px; }

.site-servicos span {
  padding: 7px 10px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(15, 76, 74, .12);
  color: #0f4c4a;
  font-size: 11.5px;
  font-weight: 600;
}

.site-aval {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0 10px;
  margin: 14px 16px 0;
  padding: 14px;
  border-radius: 12px;
  background: #fff;
}

.site-aval b { grid-row: span 2; color: #0f4c4a; font-size: 28px; line-height: 1; }
.site-aval span { color: #f2b940; font-size: 13px; letter-spacing: 1px; }
.site-aval small { color: #6b6358; font-size: 11px; }

.site-texto { padding: 16px 16px 0; }
.site-texto i { display: block; height: 7px; margin-top: 8px; border-radius: 4px; background: rgba(15, 76, 74, .1); }
.site-texto i:nth-child(2) { width: 86%; }
.site-texto i:nth-child(4) { width: 58%; }

.site-flutuante {
  position: absolute;
  z-index: 3;
  right: 14px;
  bottom: 18px;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: #25d366;
  color: #fff;
  box-shadow: 0 12px 24px -10px rgba(37, 211, 102, .8);
}

.site-flutuante svg { width: 24px; height: 24px; }
.tela--site .toque { right: 14px; bottom: 18px; background: rgba(255, 255, 255, .55); }

/* 3. A conversa no WhatsApp */
.tela--zap { background: #efeae2; }

.zap-topo {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 94px;
  padding: 40px 12px 0;
  background: #008069;
  color: #fff;
}

.zap-voltar { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.zap-avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #f5efe6;
  color: #0f4c4a;
  font-size: 14px;
  font-weight: 700;
}

.zap-nome b { display: block; font-size: 14px; }
.zap-nome small { display: block; font-size: 11px; opacity: .8; }

.zap-conversa {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 8px;
  padding: 12px 10px;
}

.zap-dia {
  align-self: center;
  padding: 4px 10px;
  border-radius: 7px;
  background: #fff;
  color: #54656f;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.zap-msg {
  position: relative;
  display: none;
  max-width: 82%;
  margin: 0;
  padding: 7px 9px 17px;
  border-radius: 9px;
  box-shadow: 0 1px 1px rgba(11, 20, 26, .13);
  color: #111b21;
  font-size: 13px;
  line-height: 1.35;
}

.zap-msg small { position: absolute; right: 8px; bottom: 3px; color: #667781; font-size: 9.5px; }
.zap-msg small b { color: #53bdeb; font-weight: 400; }
.zap-msg--eu { align-self: flex-end; border-top-right-radius: 2px; background: #d9fdd3; }
.zap-msg--ela { align-self: flex-start; border-top-left-radius: 2px; background: #fff; }

.zap-digitando {
  display: none;
  align-self: flex-start;
  gap: 4px;
  margin: 0;
  padding: 11px 12px;
  border-radius: 9px;
  background: #fff;
}

.zap-digitando i { width: 6px; height: 6px; border-radius: 50%; background: #8696a0; animation: ponto 1s var(--ease) infinite; }
.zap-digitando i:nth-child(2) { animation-delay: .15s; }
.zap-digitando i:nth-child(3) { animation-delay: .3s; }

@keyframes ponto { 0%, 60%, 100% { opacity: .35; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }

.tela--zap.is-enviada .zap-msg--eu,
.tela--zap.is-respondida .zap-msg--ela { display: block; animation: msg .35s var(--ease) both; }
.tela--zap.is-digitando .zap-digitando { display: flex; animation: msg .3s var(--ease) both; }
.tela--zap.is-respondida .zap-digitando { display: none; }

@keyframes msg { from { opacity: 0; transform: translateY(8px) scale(.97); } }

.zap-rodape { display: flex; align-items: center; gap: 6px; padding: 6px 8px 20px; }

.zap-campo {
  display: flex;
  flex: 1;
  align-items: center;
  min-width: 0;
  height: 38px;
  overflow: hidden;
  padding: 0 14px;
  border-radius: 20px;
  background: #fff;
  color: #111b21;
  font-size: 12.5px;
  white-space: nowrap;
}

.zap-campo:empty::before { content: "Mensagem"; color: #8696a0; }
:lang(en) .zap-campo:empty::before { content: "Message"; }
:lang(es) .zap-campo:empty::before { content: "Mensaje"; }

.zap-enviar { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 50%; background: #00a884; }
.zap-enviar svg { width: 15px; height: 15px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Fechamento: o que o site precisa ser */
.fecho { display: grid; justify-items: center; gap: 22px; text-align: center; }

.fecho__rotulo {
  margin: 0;
  color: #8fb3ff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.fecho__item b { display: block; font-size: 40px; line-height: 1; letter-spacing: -.012em; }
.fecho__item b span { color: var(--gold); }
.fecho__item p { max-width: 360px; margin: 8px auto 0; color: #b8c6dc; font-size: 16px; line-height: 1.55; text-wrap: pretty; }

/* Solicitar orçamento: o selo do cabeçalho em versão cheia, para fundo claro. */
.orcar-forte {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 16px;
  min-height: 58px;
  margin-top: 6px;
  padding: 4px 26px 4px 4px;
  border-radius: var(--radius);
  background: #0a1a30;
  color: #fff;
  font: 700 16px/1 var(--font);
  letter-spacing: .12em;
  text-decoration: none;
  text-transform: uppercase;
  box-shadow: 0 18px 36px -20px rgba(10, 26, 48, .75);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background-color .2s var(--ease);
}

.orcar-forte__chip {
  display: grid;
  place-items: center;
  flex: none;
  width: 50px;
  height: 50px;
  border-radius: 8px;
  background: #25d366;
  color: #04210f;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3);
  transition: transform .3s var(--ease);
}

.orcar-forte__chip svg { width: 24px; height: 24px; }

.orcar-forte::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .22) 50%, transparent 70%);
  transform: translateX(-130%);
  transition: transform .8s var(--ease);
}

.orcar-forte:hover {
  background: #12284a;
  transform: translateY(-2px);
  box-shadow: 0 0 0 4px rgba(37, 211, 102, .2), 0 22px 40px -20px rgba(10, 26, 48, .8);
}

.orcar-forte:hover::after { transform: translateX(130%); }
.orcar-forte:hover .orcar-forte__chip { transform: scale(1.05); }
.orcar-forte:active { transform: none; transition-duration: .08s; }
.orcar-forte:focus-visible { outline: 2px solid #2050a0; outline-offset: 3px; }

/* No fundo safira o botão fica no marinho mais escuro, com filete claro. */
.necessario .orcar-forte {
  background: #081628;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 18px 36px -20px rgba(0, 0, 0, .7);
}

.necessario .orcar-forte:hover {
  background: #0c1f38;
  box-shadow: inset 0 0 0 1px rgba(37, 211, 102, .5), 0 0 0 4px rgba(37, 211, 102, .18), 0 22px 40px -20px rgba(0, 0, 0, .8);
}

.necessario .orcar-forte:focus-visible { outline-color: #fff; }

@media (min-width: 380px) {
  .celular { width: 290px; }
}

/* Computador: caminho à esquerda, celular no centro, fechamento à direita. */
@media (min-width: 1100px) {
  .necessario { padding: 76px var(--gutter) 80px; }
  .necessario__cab { grid-area: cab; align-self: end; margin: 0; text-align: left; }
  .necessario__titulo { font-size: 52px; }
  .necessario__lead { margin-left: 0; font-size: 17px; text-align: justify; hyphens: auto; }

  .palco {
    grid-template-columns: 1fr 300px 1fr;
    grid-template-areas:
      "cab celular fecho"
      "caminho celular fecho";
    gap: 30px 56px;
  }

  .palco__celular { grid-area: celular; }
  .caminho { grid-area: caminho; align-self: start; }
  .celular { width: 300px; }

  .caminho__passo { text-align: left; }

  /* Fio que liga a frase acesa ao celular. */
  .caminho__passo::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -56px;
    width: 48px;
    height: 1px;
    background: rgba(255, 255, 255, .16);
    transform-origin: left;
    transition: background-color .35s var(--ease);
  }

  .caminho__passo::before {
    content: "";
    position: absolute;
    top: calc(50% - 4px);
    right: -60px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .28);
    transition: background-color .35s var(--ease), box-shadow .35s var(--ease);
  }

  .caminho__passo.is-ativo::after { background: var(--gold); }
  .caminho__passo.is-ativo::before { background: var(--gold); box-shadow: 0 0 0 5px rgba(242, 185, 64, .22); }

  .fecho { grid-area: fecho; align-self: center; justify-items: start; text-align: left; }
  .fecho__item b { font-size: 46px; }
  .fecho__item p { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .tela, .caminho__passo, .resultado { transition: none; }
  .tela--site.is-ativa .site-rolo, .caminho__passo.is-ativo .caminho__barra::after, .cursor, .zap-digitando i { animation: none; }
  .caminho__passo.is-ativo .caminho__barra::after { transform: scaleX(1); }
}

/* ---------- Muito além de um site: o caminho do visitante até o contato ---------- */

.alem {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 84px var(--gutter) 96px;
  background: #081628;
  color: var(--text);
}

/* Textura: malha técnica fina que some nas bordas, com um brilho atrás do esquema. */
.alem::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image:
    linear-gradient(rgba(143, 179, 255, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(143, 179, 255, .07) 1px, transparent 1px);
  background-size: 36px 36px;
  -webkit-mask-image: radial-gradient(ellipse 85% 70% at 50% 50%, #000 35%, transparent 90%);
  mask-image: radial-gradient(ellipse 85% 70% at 50% 50%, #000 35%, transparent 90%);
}

.alem::after {
  content: "";
  position: absolute;
  top: 18%;
  left: 50%;
  z-index: -1;
  width: 900px;
  height: 600px;
  margin-left: -450px;
  background: radial-gradient(closest-side, rgba(61, 123, 255, .16), transparent);
  pointer-events: none;
}

.alem__inner { max-width: 1240px; margin: 0 auto; }

.alem__cab { max-width: 820px; margin: 0 auto; text-align: center; }

.alem__rotulo {
  margin: 0;
  color: #8fb3ff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.alem__titulo {
  margin: 14px 0 0;
  color: #fff;
  font-size: clamp(36px, 8.6vw, 64px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.015em;
  text-wrap: balance;
}

.alem__ouro { color: var(--gold); }

.alem__lead {
  max-width: 680px;
  margin: 20px auto 0;
  color: var(--text-2);
  font-size: 17px;
  line-height: 1.65;
  text-wrap: pretty;
}

/* Esquema: colunas de nós, fios desenhados por baixo e partículas de luz. */
.fluxo { position: relative; display: grid; gap: 30px; margin-top: 48px; }

.fluxo__fios {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.fio {
  fill: none;
  stroke: rgba(143, 179, 255, .2);
  stroke-width: 1.5;
  transition: stroke .4s var(--ease);
}

.fio.is-ativo { stroke: rgba(242, 185, 64, .55); }

.particula {
  fill: #b9d0ff;
  filter: drop-shadow(0 0 5px #3d7bff) drop-shadow(0 0 2px #8fb3ff);
}

.particula.is-ouro {
  fill: #ffe2a0;
  filter: drop-shadow(0 0 6px var(--gold));
}

.fluxo__coluna { position: relative; display: flex; flex-direction: column; align-items: center; }

.fluxo__etapa {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding: 4px 10px;
  border-radius: 8px;
  background: #081628;
  color: #8fa3c0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.fluxo__etapa::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

.fluxo__nos { display: flex; flex: 1; flex-direction: column; justify-content: center; gap: 12px; width: 100%; }
.fluxo__nos--ferramentas,
.fluxo__nos--destinos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }

.no {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
  padding: 12px 14px;
  border: 1px solid var(--line-2);
  border-radius: 14px;
  background: #0c1f38;
  color: #fff;
  font: inherit;
  text-align: left;
}

.no__ic {
  display: grid;
  place-items: center;
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(61, 123, 255, .14);
  color: #8fb3ff;
  transition: background-color .3s var(--ease), color .3s var(--ease);
}

.no__ic svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.no__txt { display: grid; gap: 1px; min-width: 0; }
.no__txt b { font-size: 15px; line-height: 1.2; }
.no__txt small { color: var(--muted); font-size: 12.5px; line-height: 1.3; }
.no__txt b,
.no__txt small { min-width: 0; hyphens: auto; }

/* Celular estreito: nas duplas de nós, o ícone sobe e o texto ganha a largura toda (cabe "Automatización"). */
@media (max-width: 399px) {
  .fluxo__nos--ferramentas .no,
  .fluxo__nos--destinos .no { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px; }
  .no__txt b { font-size: 14px; }
}

.no__onda {
  position: absolute;
  inset: -1px;
  border: 1.5px solid #8fb3ff;
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
}

.no--site { flex-wrap: wrap; gap: 10px; padding: 12px 14px 14px; }
.no__navegador { display: flex; align-items: center; gap: 4px; width: 100%; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.no__navegador i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .25); }
.no__navegador em { margin-left: 6px; color: var(--muted); font-size: 11.5px; font-style: normal; }
.no__pagina { display: grid; gap: 5px; width: 100%; }
.no__pagina i { display: block; height: 6px; border-radius: 3px; background: rgba(143, 179, 255, .2); }
.no__pagina i:first-child { width: 70%; height: 9px; background: rgba(143, 179, 255, .45); }
.no__pagina i:last-child { width: 46%; }

button.no { cursor: pointer; transition: border-color .25s var(--ease), background-color .25s var(--ease), transform .25s var(--ease), box-shadow .3s var(--ease); }
button.no:hover { border-color: rgba(143, 179, 255, .5); transform: translateY(-2px); }
button.no:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

button.no.is-ativa {
  border-color: var(--gold);
  background: #1a2a3f;
  box-shadow: 0 0 0 4px rgba(242, 185, 64, .1), 0 22px 40px -24px rgba(242, 185, 64, .55);
}

button.no.is-ativa .no__ic { background: var(--gold); color: #0a1a30; }

.no--zap .no__ic { background: #25d366; color: #04210f; }
.no--zap .no__ic svg { fill: currentColor; stroke: none; }
.no--crm .no__ic { background: var(--blue); color: #fff; }

/* Painel da ferramenta escolhida + "Chegando agora" */
.alem__baixo { display: grid; gap: 18px; margin-top: 44px; }

.detalhe,
.chegando {
  padding: 22px;
  border: 1px solid var(--line-2);
  border-radius: 18px;
  background: rgba(12, 31, 56, .9);
}

.detalhe { display: grid; gap: 24px; }

.detalhe__tela {
  position: relative;
  min-height: 236px;
  overflow: hidden;
  padding: 18px;
  border-radius: 14px;
  background: #f5f8fc;
  color: #0a1a30;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6);
}

.detalhe__texto { text-align: center; }
.detalhe__rotulo { margin: 0; color: var(--gold); font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.detalhe__nome { margin: 8px 0 0; color: #fff; font-size: 28px; line-height: 1.1; }
.detalhe__desc { max-width: 460px; margin: 12px auto 0; color: var(--text-2); font-size: 16px; line-height: 1.6; text-wrap: pretty; }
.detalhe__cta { margin-top: 20px; }

/* Telinhas de cada ferramenta (mostram a ferramenta funcionando, em ciclo) */
.mini { display: none; gap: 12px; }
.mini.is-ativa { display: grid; animation: surge .4s var(--ease) both; }
.mini__titulo { margin: 0; font-size: 15px; font-weight: 700; }

.mini__campo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(10, 26, 48, .08);
  font-size: 13px;
}

.mini__campo span { color: #5b6c86; }

.mini__faixa { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; font-size: 13px; }
.mini__faixa > span:first-child { color: #5b6c86; }
.mini__trilho { position: relative; height: 6px; border-radius: 3px; background: #dbe4f1; }

.mini__trilho i {
  position: absolute;
  top: 50%;
  left: 62%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 50%;
  background: #2050a0;
  box-shadow: 0 0 0 4px rgba(32, 80, 160, .18);
}

.mini__barras { display: flex; align-items: flex-end; gap: 6px; height: 62px; }
.mini__barras i { flex: 1; height: 100%; border-radius: 4px 4px 0 0; background: #2050a0; transform-origin: bottom; }
.mini__barras i:nth-child(1) { height: 30%; }
.mini__barras i:nth-child(2) { height: 46%; }
.mini__barras i:nth-child(3) { height: 40%; }
.mini__barras i:nth-child(4) { height: 62%; }
.mini__barras i:nth-child(5) { height: 74%; }
.mini__barras i:nth-child(6) { height: 100%; background: var(--gold); }

.mini__ok {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 7px;
  padding: 8px 11px;
  border-radius: 8px;
  background: #25d366;
  color: #04210f;
  font-size: 12.5px;
  font-weight: 700;
}

.mini__ok svg { width: 14px; height: 14px; }

.mini__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mini__chips span { padding: 7px 11px; border: 1px solid rgba(10, 26, 48, .16); border-radius: 8px; background: #fff; color: #3a4c66; font-size: 12.5px; font-weight: 600; }

.mini__nota { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px 10px; font-size: 13px; }
.mini__nota > span:first-child { color: #5b6c86; }
.mini__nota b { grid-row: span 2; align-self: end; color: #8a5d00; }
.mini__medidor { position: relative; height: 8px; overflow: hidden; border-radius: 4px; background: #dbe4f1; }
.mini__medidor i { position: absolute; inset: 0; border-radius: 4px; background: var(--gold); transform: scaleX(.86); transform-origin: left; }

.mini__pedido {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  padding: 12px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(10, 26, 48, .08);
  font-size: 13px;
}

.mini__pedido b { padding: 3px 8px; border-radius: 6px; background: rgba(32, 80, 160, .1); color: #2050a0; font-size: 11.5px; }
.mini__progresso { grid-column: 1 / -1; position: relative; height: 6px; overflow: hidden; border-radius: 3px; background: #dbe4f1; }
.mini__progresso i { position: absolute; inset: 0; border-radius: 3px; background: #2050a0; transform: scaleX(.64); transform-origin: left; }

.mini__docs { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }

.mini__docs li {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(10, 26, 48, .07);
  font-size: 12.5px;
}

.mini__docs li i { width: 14px; height: 17px; border-radius: 2px; background: #c9d6ea; box-shadow: inset -4px 4px 0 #e9eff7; }
.mini__docs small { margin-left: auto; color: #2050a0; font-weight: 700; }

.mini__passos { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; counter-reset: passo; }

.mini__passos li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(10, 26, 48, .07);
  font-size: 13px;
}

.mini__passos li::before {
  content: "\2713";
  display: grid;
  place-items: center;
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #25d366;
  color: #04210f;
  font-size: 11px;
  font-weight: 700;
}

/* As telinhas se movem em ciclo enquanto estão à vista. */
@media (prefers-reduced-motion: no-preference) {
  .mini--simulador.is-ativa .mini__trilho i { animation: arrasta 4s var(--ease) infinite; }
  .mini--simulador.is-ativa .mini__barras i { animation: cresce 4s var(--ease) infinite; }
  .mini--simulador.is-ativa .mini__barras i:nth-child(2) { animation-delay: .06s; }
  .mini--simulador.is-ativa .mini__barras i:nth-child(3) { animation-delay: .12s; }
  .mini--simulador.is-ativa .mini__barras i:nth-child(4) { animation-delay: .18s; }
  .mini--simulador.is-ativa .mini__barras i:nth-child(5) { animation-delay: .24s; }
  .mini--simulador.is-ativa .mini__barras i:nth-child(6) { animation-delay: .3s; }
  .mini--simulador.is-ativa .mini__ok { animation: aparece-ok 4s var(--ease) infinite; }

  .mini--formulario.is-ativa .mini__chips span:nth-child(2) { animation: marca 4s var(--ease) infinite .4s; }
  .mini--formulario.is-ativa .mini__chips span:nth-child(4) { animation: marca 4s var(--ease) infinite .9s; }
  .mini--formulario.is-ativa .mini__medidor i { animation: enche 4s var(--ease) infinite; }

  .mini--area.is-ativa .mini__progresso i { animation: enche-pedido 4s var(--ease) infinite; }
  .mini--area.is-ativa .mini__docs li:nth-child(1) { animation: destaca 4s var(--ease) infinite 1.6s; }

  .mini--automacao.is-ativa .mini__passos li { animation: passo-ok 4.4s var(--ease) infinite both; }
  .mini--automacao.is-ativa .mini__passos li:nth-child(2) { animation-delay: .5s; }
  .mini--automacao.is-ativa .mini__passos li:nth-child(3) { animation-delay: 1s; }
  .mini--automacao.is-ativa .mini__passos li:nth-child(4) { animation-delay: 1.5s; }
}

@keyframes arrasta { 0%, 8% { left: 10%; } 40%, 100% { left: 62%; } }
@keyframes cresce { 0%, 30% { transform: scaleY(.08); } 55%, 100% { transform: none; } }
@keyframes aparece-ok { 0%, 62% { opacity: 0; transform: translateY(6px); } 72%, 100% { opacity: 1; transform: none; } }
@keyframes marca { 0%, 10% { border-color: rgba(10, 26, 48, .16); background: #fff; color: #3a4c66; } 22%, 100% { border-color: #2050a0; background: #2050a0; color: #fff; } }
@keyframes enche { 0%, 35% { transform: scaleX(.08); } 70%, 100% { transform: scaleX(.86); } }
@keyframes enche-pedido { 0%, 15% { transform: scaleX(.2); } 55%, 100% { transform: scaleX(.64); } }
@keyframes destaca { 0%, 100% { box-shadow: 0 0 0 1px rgba(10, 26, 48, .07); } 20%, 45% { box-shadow: 0 0 0 2px #2050a0; } }
@keyframes passo-ok { 0% { opacity: 0; transform: translateX(-8px); } 12%, 100% { opacity: 1; transform: none; } }

.chegando__topo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.chegando__topo small { margin-left: auto; color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: none; }
.chegando__vivo { width: 8px; height: 8px; border-radius: 50%; background: #25d366; }

.chegando__lista { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }

.chegando__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, .03);
}

.chegando__item.is-nova { animation: chega .5s var(--ease) both; }

@keyframes chega { from { opacity: 0; transform: translateY(-10px); } }

.chegando__ic { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 9px; }
.chegando__ic svg { width: 18px; height: 18px; }
.chegando__ic--zap { background: #25d366; color: #04210f; }
.chegando__ic--crm { background: var(--blue); color: #fff; }
.chegando__ic--crm svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.chegando__txt { display: grid; gap: 2px; min-width: 0; }
.chegando__txt b { color: #fff; font-size: 14.5px; line-height: 1.3; }
.chegando__txt small { color: var(--muted); font-size: 13px; line-height: 1.4; }
.chegando__item time { margin-left: auto; color: #25d366; font-size: 11.5px; font-weight: 700; white-space: nowrap; }

@media (prefers-reduced-motion: no-preference) {
  .chegando__vivo { animation: vivo 1.8s var(--ease) infinite; }
}

@keyframes vivo { 0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, .6); } 70%, 100% { box-shadow: 0 0 0 8px rgba(37, 211, 102, 0); } }

/* Computador: o esquema corre da esquerda para a direita. */
@media (min-width: 1100px) {
  .alem { padding: 112px var(--gutter) 120px; }
  .alem__lead { text-align: justify; text-align-last: center; hyphens: auto; }

  .fluxo {
    grid-template-columns: .9fr 1.05fr 1.15fr .95fr;
    gap: 72px;
    margin-top: 64px;
  }

  .fluxo__coluna { align-items: stretch; }
  .fluxo__etapa { align-self: flex-start; }
  .fluxo__nos--ferramentas,
  .fluxo__nos--destinos { display: flex; gap: 12px; }
  .fluxo__nos--destinos { gap: 40px; }
  .no { max-width: none; }

  .alem__baixo { grid-template-columns: 1.65fr 1fr; align-items: stretch; margin-top: 56px; }
  .detalhe { grid-template-columns: 320px 1fr; align-items: center; gap: 32px; padding: 26px; }
  .detalhe__texto { text-align: left; }
  .detalhe__desc { margin-left: 0; text-align: justify; hyphens: auto; }
  .chegando { padding: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .mini.is-ativa, .chegando__item.is-nova { animation: none; }
}

/* ---------- Desenvolvimento de sites profissionais: texto, foto, pilares e entrega ---------- */

.profissional {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 72px var(--gutter) 80px;
  background: #0b1d3d;
  color: #fff;
}

/* Textura: a malha da planta do topo, no canto de cima, e uma luz azul atrás da foto. */
.profissional::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image:
    linear-gradient(rgba(143, 179, 255, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(143, 179, 255, .07) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: radial-gradient(ellipse 60% 55% at 85% 12%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 60% 55% at 85% 12%, #000 20%, transparent 75%);
}

.profissional::after {
  content: "";
  position: absolute;
  top: 0;
  right: -10%;
  z-index: -1;
  width: 900px;
  height: 760px;
  background: radial-gradient(closest-side, rgba(61, 123, 255, .2), transparent);
  pointer-events: none;
}

.profissional__inner { display: grid; gap: 36px; max-width: 1240px; margin: 0 auto; }
.profissional__texto { min-width: 0; }

/* Selo do título: uma luz dourada percorre o contorno sem parar. */
@property --giro {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.profissional__rotulo {
  display: flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  margin: 0 auto;
  padding: 8px 14px;
  border: 1px solid transparent;
  border-radius: 9px;
  background:
    linear-gradient(#0f2550, #0f2550) padding-box,
    conic-gradient(from var(--giro), rgba(143, 179, 255, .22) 0deg, var(--gold) 40deg, rgba(143, 179, 255, .22) 90deg, rgba(143, 179, 255, .22) 360deg) border-box;
  color: #d6e3ff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .14em;
  line-height: 1.3;
  text-align: center;
  text-transform: uppercase;
}

.profissional__rotulo::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--gold);
}

@media (prefers-reduced-motion: no-preference) {
  .profissional__rotulo { animation: giro 4.5s linear infinite; }
  .profissional__rotulo::before { animation: brilho-ponto 2.2s var(--ease) infinite; }
}

@keyframes giro { to { --giro: 360deg; } }
@keyframes brilho-ponto { 0% { box-shadow: 0 0 0 0 rgba(242, 185, 64, .6); } 70%, 100% { box-shadow: 0 0 0 7px rgba(242, 185, 64, 0); } }

.profissional__titulo {
  margin: 18px 0 0;
  font-size: clamp(32px, 7.6vw, 48px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.015em;
  text-align: center;
  text-wrap: balance;
}

.profissional__ouro { color: var(--gold); }

.profissional__texto > p:not(.profissional__rotulo) {
  margin: 18px 0 0;
  color: #c8d3e3;
  font-size: 17px;
  line-height: 1.7;
  text-align: justify;
  hyphens: auto;
  text-wrap: pretty;
}

/* Links do texto: grifo dourado que sobe no hover. */
.profissional__texto a {
  padding: 0 1px;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  background: linear-gradient(rgba(242, 185, 64, .45), rgba(242, 185, 64, .45)) 0 100% / 100% 2px no-repeat;
  transition: background-size .3s var(--ease);
}

.profissional__texto a:hover { background-size: 100% 45%; }
.profissional__texto a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 2px; }

.profissional__foto {
  position: relative;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 0 0 1px rgba(143, 179, 255, .16), 0 50px 80px -40px rgba(0, 0, 0, .75);
}

.profissional__foto img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transition: transform 1.2s var(--ease);
}

.profissional__foto:hover img { transform: scale(1.04); }

/* Legenda da foto: vidro escuro com filete dourado (também no Método). */
.profissional__legenda,
.metodo__legenda {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-left: 3px solid var(--gold);
  border-radius: 12px;
  background: rgba(8, 22, 40, .78);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #c8d3e3;
  font-size: 14px;
  line-height: 1.45;
}

.profissional__legenda b,
.metodo__legenda b { display: block; margin-bottom: 2px; color: #fff; font-size: 17px; }

.profissional__check,
.metodo__lupa {
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--gold);
  color: #0a1a30;
}

.profissional__check svg,
.metodo__lupa svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* Os quatro pilares: cada um com uma ilustração viva e uma luz que segue o mouse. */
.pilares { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }

.pilar {
  --x: 50%;
  --y: 0%;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 22px 22px 26px;
  border: 1px solid rgba(143, 179, 255, .14);
  border-radius: 16px;
  background: rgba(255, 255, 255, .035);
  text-align: center;
  transition: transform .35s var(--ease), border-color .35s var(--ease), background-color .35s var(--ease), box-shadow .35s var(--ease);
}

.pilar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(260px circle at var(--x) var(--y), rgba(242, 185, 64, .16), transparent 60%);
  opacity: 0;
  transition: opacity .35s var(--ease);
  pointer-events: none;
}

.pilar::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s var(--ease);
}

.pilar:hover {
  transform: translateY(-6px);
  border-color: rgba(242, 185, 64, .4);
  background: rgba(255, 255, 255, .055);
  box-shadow: 0 34px 60px -36px rgba(0, 0, 0, .8);
}

.pilar:hover::before { opacity: 1; }
.pilar:hover::after { transform: scaleX(1); }

.pilar__n {
  position: absolute;
  top: 16px;
  right: 18px;
  color: rgba(143, 179, 255, .55);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .14em;
}

.pilar__titulo { margin: 0; color: #fff; font-size: 20px; line-height: 1.2; }
.pilar p { margin: 8px 0 0; color: #b8c6dc; font-size: 16px; line-height: 1.6; text-wrap: pretty; }

.pilar__arte {
  position: relative;
  width: 150px;
  height: 86px;
  margin: 4px auto 18px;
  overflow: hidden;
  border: 1px solid rgba(143, 179, 255, .16);
  border-radius: 12px;
  background: #0a1830;
}

.pilar__arte i { position: absolute; display: block; }

/* 01 Design: a página se monta, peça por peça. */
.pilar__arte--design i:nth-child(1) { top: 12px; left: 12px; width: 62%; height: 6px; border-radius: 3px; background: rgba(143, 179, 255, .35); }
.pilar__arte--design i:nth-child(2) { top: 26px; left: 12px; width: 74%; height: 11px; border-radius: 3px; background: #fff; }
.pilar__arte--design i:nth-child(3) { top: 45px; left: 12px; width: 52%; height: 6px; border-radius: 3px; background: rgba(143, 179, 255, .35); }
.pilar__arte--design i:nth-child(4) { top: 60px; left: 12px; width: 40px; height: 14px; border-radius: 4px; background: var(--gold); }

/* 02 SEO: o resultado dourado sobe para o primeiro lugar. */
.pilar__arte--seo i { left: 12px; right: 12px; height: 16px; border-radius: 5px; background: rgba(143, 179, 255, .16); }
.pilar__arte--seo i::before { content: ""; position: absolute; top: 5px; left: 6px; width: 6px; height: 6px; border-radius: 50%; background: rgba(143, 179, 255, .5); }
.pilar__arte--seo i::after { content: ""; position: absolute; top: 6px; left: 18px; width: 55%; height: 4px; border-radius: 2px; background: rgba(143, 179, 255, .45); }
.pilar__arte--seo i:nth-child(1) { top: 12px; }
.pilar__arte--seo i:nth-child(2) { top: 35px; }
.pilar__arte--seo i:nth-child(3) { top: 58px; background: rgba(242, 185, 64, .22); box-shadow: inset 0 0 0 1px rgba(242, 185, 64, .6); }
.pilar__arte--seo i:nth-child(3)::before { background: var(--gold); }
.pilar__arte--seo i:nth-child(3)::after { background: var(--gold); }

/* 03 Rápido: o ponteiro do medidor vai ao verde. */
.pilar__arte--rapido i:nth-child(1) {
  left: 50%;
  bottom: 12px;
  width: 104px;
  height: 52px;
  margin-left: -52px;
  border-radius: 52px 52px 0 0;
  background: conic-gradient(from 270deg at 50% 100%, #f06a5f 0 45deg, var(--gold) 45deg 110deg, #25d366 110deg 180deg, transparent 180deg);
  -webkit-mask: radial-gradient(circle at 50% 100%, transparent 38px, #000 39px);
  mask: radial-gradient(circle at 50% 100%, transparent 38px, #000 39px);
}

.pilar__arte--rapido i:nth-child(2) {
  left: 50%;
  bottom: 12px;
  width: 3px;
  height: 44px;
  margin-left: -1.5px;
  border-radius: 2px;
  background: #fff;
  transform: rotate(-70deg);
  transform-origin: 50% 100%;
  box-shadow: 0 0 8px rgba(255, 255, 255, .5);
}

.pilar__arte--rapido i:nth-child(2)::after { content: ""; position: absolute; bottom: -4px; left: -3.5px; width: 10px; height: 10px; border-radius: 50%; background: #fff; }

/* 04 Contato: a mensagem chega e a resposta vem em seguida. */
.pilar__arte--contato i:nth-child(1) { top: 12px; right: 12px; width: 78px; height: 18px; border-radius: 9px 9px 2px 9px; background: var(--blue); }
.pilar__arte--contato i:nth-child(2) { top: 36px; left: 12px; display: flex; gap: 4px; padding: 6px 8px; border-radius: 9px 9px 9px 2px; background: rgba(255, 255, 255, .12); }
.pilar__arte--contato i:nth-child(2) b { width: 5px; height: 5px; border-radius: 50%; background: #fff; opacity: .6; }
.pilar__arte--contato i:nth-child(3) { top: 56px; left: 12px; width: 92px; height: 18px; border-radius: 9px 9px 9px 2px; background: #25d366; }

@media (prefers-reduced-motion: no-preference) {
  .pilar__arte--design i { animation: monta 4.2s var(--ease) infinite both; }
  .pilar__arte--design i:nth-child(2) { animation-delay: .15s; }
  .pilar__arte--design i:nth-child(3) { animation-delay: .3s; }
  .pilar__arte--design i:nth-child(4) { animation-delay: .45s; }

  .pilar__arte--seo i:nth-child(1),
  .pilar__arte--seo i:nth-child(2) { animation: desce 4.2s var(--ease) infinite; }
  .pilar__arte--seo i:nth-child(3) { animation: sobe-topo 4.2s var(--ease) infinite; }

  .pilar__arte--rapido i:nth-child(2) { animation: ponteiro 3.6s var(--ease) infinite; }

  .pilar__arte--contato i:nth-child(1) { animation: msg-1 4.4s var(--ease) infinite both; }
  .pilar__arte--contato i:nth-child(2) { animation: msg-2 4.4s var(--ease) infinite both; }
  .pilar__arte--contato i:nth-child(2) b { animation: ponto 1s var(--ease) infinite; }
  .pilar__arte--contato i:nth-child(2) b:nth-child(2) { animation-delay: .15s; }
  .pilar__arte--contato i:nth-child(2) b:nth-child(3) { animation-delay: .3s; }
  .pilar__arte--contato i:nth-child(3) { animation: msg-3 4.4s var(--ease) infinite both; }

  /* No hover, tudo acelera um pouco. */
  .pilar:hover .pilar__arte i { animation-duration: 2.6s; }
}

@keyframes monta {
  0% { opacity: 0; transform: translateX(-16px); }
  12%, 82% { opacity: 1; transform: none; }
  94%, 100% { opacity: 0; transform: none; }
}

@keyframes desce { 0%, 30% { transform: none; } 50%, 85% { transform: translateY(23px); } 100% { transform: none; } }
@keyframes sobe-topo { 0%, 30% { transform: none; } 50%, 85% { transform: translateY(-46px); } 100% { transform: none; } }
@keyframes ponteiro { 0%, 10% { transform: rotate(-70deg); } 45%, 80% { transform: rotate(62deg); } 100% { transform: rotate(-70deg); } }
@keyframes msg-1 { 0%, 4% { opacity: 0; transform: translateY(6px); } 12%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes msg-2 { 0%, 22% { opacity: 0; } 28%, 46% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes msg-3 { 0%, 48% { opacity: 0; transform: translateY(6px); } 56%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* Faixa do que entregamos, com o botão de orçamento */
.faixa-entrega {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  gap: 22px;
  padding: 28px 22px;
  border: 1px solid rgba(143, 179, 255, .18);
  border-radius: 16px;
  background: #12306b;
  color: #e1e8f2;
  text-align: center;
}

.faixa-entrega::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .045) 0 1px, transparent 1px 12px);
  -webkit-mask-image: linear-gradient(90deg, transparent 35%, #000);
  mask-image: linear-gradient(90deg, transparent 35%, #000);
}

.faixa-entrega__rotulo { margin: 0; color: var(--gold); font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.faixa-entrega__texto p:last-child { margin: 8px 0 0; font-size: 16px; line-height: 1.6; text-wrap: pretty; }

.faixa-entrega__botao {
  display: inline-flex;
  align-items: center;
  justify-self: center;
  gap: 14px;
  min-height: 56px;
  padding: 4px 24px 4px 4px;
  border-radius: var(--radius);
  background: #fff;
  color: #0a1a30;
  font: 700 15px/1 var(--font);
  letter-spacing: .1em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 16px 30px -18px rgba(0, 0, 0, .6);
  transition: transform .25s var(--ease), background-color .2s var(--ease), box-shadow .25s var(--ease);
}

.faixa-entrega__chip {
  display: grid;
  place-items: center;
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 8px;
  background: #25d366;
  color: #04210f;
  transition: transform .3s var(--ease);
}

.faixa-entrega__chip svg { width: 24px; height: 24px; }

/* Celular estreito: o botão encolhe para caber sem empurrar a coluna (em 320 px ele passava da borda). */
@media (max-width: 374px) {
  .faixa-entrega { grid-template-columns: minmax(0, 1fr); padding: 26px 18px; }
  .faixa-entrega__botao { gap: 10px; min-height: 50px; padding-right: 16px; font-size: 13.5px; letter-spacing: .06em; }
  .faixa-entrega__chip { width: 42px; height: 42px; }
}

.faixa-entrega__botao:hover { background: var(--gold); transform: translateY(-2px); box-shadow: 0 0 0 4px rgba(242, 185, 64, .2), 0 20px 36px -18px rgba(0, 0, 0, .7); }
.faixa-entrega__botao:hover .faixa-entrega__chip { transform: scale(1.05); }
.faixa-entrega__botao:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

@media (min-width: 640px) {
  .pilares { grid-template-columns: 1fr 1fr; }
}

/* Computador: texto à esquerda, foto à direita; pilares e faixa por baixo. */
@media (min-width: 1100px) {
  .profissional { padding: 96px var(--gutter) 104px; }

  .profissional__inner {
    grid-template-columns: 1.12fr .88fr;
    grid-template-areas:
      "texto foto"
      "pilares pilares"
      "faixa faixa";
    gap: 56px 64px;
    align-items: center;
  }

  .profissional__texto { grid-area: texto; }
  .profissional__rotulo { margin: 0; }
  .profissional__titulo { text-align: left; }
  .profissional__foto { grid-area: foto; justify-self: end; }
  .pilares { grid-area: pilares; grid-template-columns: repeat(4, 1fr); }
  .pilar { text-align: left; }
  .pilar__arte { margin-left: 0; }
  .faixa-entrega { grid-area: faixa; grid-template-columns: 1fr auto; align-items: center; gap: 40px; padding: 30px 36px; text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .pilar, .pilar::before, .pilar::after, .faixa-entrega__botao, .profissional__texto a, .profissional__foto img { transition: none; }
}

/* ---------- Método: como criamos um site (foto à esquerda, etapas à direita) ---------- */

.metodo {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 72px var(--gutter) 80px;
  border-top: 1px solid rgba(143, 179, 255, .12);
  background: #0f2758;
  color: #fff;
}

/* Textura: pontilhado fino atrás da foto e uma luz dourada discreta no canto das etapas. */
.metodo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: radial-gradient(rgba(255, 255, 255, .08) 1px, transparent 1.4px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 55% 60% at 20% 62%, #000 25%, transparent 80%);
  mask-image: radial-gradient(ellipse 55% 60% at 20% 62%, #000 25%, transparent 80%);
}

.metodo::after {
  content: "";
  position: absolute;
  right: -12%;
  bottom: -20%;
  z-index: -1;
  width: 900px;
  height: 700px;
  background: radial-gradient(closest-side, rgba(242, 185, 64, .09), transparent);
  pointer-events: none;
}

.metodo__inner { display: grid; gap: 32px; max-width: 1240px; margin: 0 auto; }

.metodo__cab { text-align: center; }

.metodo__rotulo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--gold);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.metodo__rotulo::before { content: ""; width: 26px; height: 2px; border-radius: 2px; background: currentColor; }

.metodo__titulo {
  max-width: 860px;
  margin: 14px auto 0;
  font-size: clamp(32px, 7.6vw, 50px);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -.015em;
  text-wrap: balance;
}

.metodo__ouro { color: var(--gold); }

.metodo__intro,
.metodo__corpo > p {
  margin: 18px 0 0;
  color: #c8d3e3;
  font-size: 17px;
  line-height: 1.7;
  text-align: justify;
  hyphens: auto;
  text-wrap: pretty;
}

.metodo__corpo > p:first-child { margin-top: 0; }

.metodo__intro a {
  padding: 0 1px;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  background: linear-gradient(rgba(242, 185, 64, .45), rgba(242, 185, 64, .45)) 0 100% / 100% 2px no-repeat;
  transition: background-size .3s var(--ease);
}

.metodo__intro a:hover { background-size: 100% 45%; }
.metodo__intro a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 2px; }

.metodo__lado { min-width: 0; }

.metodo__foto {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 0 0 1px rgba(143, 179, 255, .16), 0 50px 80px -40px rgba(0, 0, 0, .75);
}

.metodo__foto img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  transition: transform 1.2s var(--ease);
}

.metodo__foto:hover img { transform: scale(1.04); }

/* Três números reais, com um brilho que atravessa a faixa de tempos em tempos. */
.metodo__numeros {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 14px 0 0;
  overflow: hidden;
  border: 1px solid rgba(143, 179, 255, .16);
  border-radius: 14px;
  background: rgba(8, 22, 40, .55);
}

.metodo__numeros div { padding: 16px 10px; text-align: center; }
.metodo__numeros div + div { border-left: 1px solid rgba(143, 179, 255, .12); }
.metodo__numeros dt { color: #fff; font-size: 34px; font-weight: 700; line-height: 1; }
.metodo__numeros div:nth-child(2) dt { color: var(--gold); }
.metodo__numeros dd { margin: 6px 0 0; color: #a9b8d0; font-size: 13px; line-height: 1.3; }

.metodo__numeros::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .1) 50%, transparent 65%);
  transform: translateX(-100%);
  pointer-events: none;
}

/* As quatro etapas: acendem uma de cada vez, em ciclo, como o projeto anda. */
.etapas { display: grid; gap: 12px; margin: 26px 0 0; padding: 0; list-style: none; }

.etapa {
  --x: 50%;
  --y: 0%;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 20px 20px 24px;
  border: 1px solid rgba(143, 179, 255, .14);
  border-radius: 14px;
  background: rgba(255, 255, 255, .035);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}

.etapa::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(240px circle at var(--x) var(--y), rgba(242, 185, 64, .15), transparent 60%);
  opacity: 0;
  transition: opacity .35s var(--ease);
  pointer-events: none;
}

.etapa:hover { transform: translateY(-5px); box-shadow: 0 30px 50px -32px rgba(0, 0, 0, .8); }
.etapa:hover::before { opacity: 1; }

.etapa__n {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1.5px solid rgba(242, 185, 64, .6);
  border-radius: 50%;
  color: var(--gold);
  font-size: 14px;
  font-weight: 700;
}

.etapa__titulo { margin: 14px 0 0; color: #fff; font-size: 19px; line-height: 1.2; }
.etapa p { margin: 6px 0 0; color: #b8c6dc; font-size: 15.5px; line-height: 1.6; text-wrap: pretty; }

.etapa__fio {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
}

@media (prefers-reduced-motion: no-preference) {
  .metodo__numeros::after { animation: brilho-faixa 6s var(--ease) infinite 1s; }

  .etapa { animation: etapa-acende 10s var(--ease) infinite; }
  .etapa__n { animation: etapa-numero 10s var(--ease) infinite; }
  .etapa__fio { animation: etapa-fio 10s linear infinite; }

  .etapa:nth-child(2), .etapa:nth-child(2) .etapa__n, .etapa:nth-child(2) .etapa__fio { animation-delay: 2.5s; }
  .etapa:nth-child(3), .etapa:nth-child(3) .etapa__n, .etapa:nth-child(3) .etapa__fio { animation-delay: 5s; }
  .etapa:nth-child(4), .etapa:nth-child(4) .etapa__n, .etapa:nth-child(4) .etapa__fio { animation-delay: 7.5s; }
}

@keyframes brilho-faixa { 0% { transform: translateX(-100%); } 30%, 100% { transform: translateX(100%); } }

@keyframes etapa-acende {
  0%, 24% { border-color: rgba(242, 185, 64, .5); background-color: rgba(255, 255, 255, .07); }
  30%, 100% { border-color: rgba(143, 179, 255, .14); background-color: rgba(255, 255, 255, .035); }
}

@keyframes etapa-numero {
  0%, 24% { border-color: var(--gold); background-color: var(--gold); color: #0a1a30; }
  30%, 100% { border-color: rgba(242, 185, 64, .6); background-color: transparent; color: var(--gold); }
}

@keyframes etapa-fio {
  0% { opacity: 1; transform: scaleX(0); }
  25% { opacity: 1; transform: scaleX(1); }
  30%, 100% { opacity: 0; transform: scaleX(1); }
}

@media (min-width: 640px) {
  .etapas { grid-template-columns: 1fr 1fr; }
}

/* Computador: cabeçalho por cima; foto e números à esquerda, texto e etapas à direita. */
@media (min-width: 1100px) {
  .metodo { padding: 96px var(--gutter) 104px; }

  .metodo__inner {
    grid-template-columns: .92fr 1.08fr;
    grid-template-areas:
      "cab cab"
      "lado corpo";
    gap: 44px 64px;
    align-items: start;
  }

  .metodo__cab { grid-area: cab; max-width: 900px; text-align: left; }
  .metodo__titulo { margin-left: 0; }
  .metodo__lado { grid-area: lado; }
  .metodo__corpo { grid-area: corpo; }
}

@media (prefers-reduced-motion: reduce) {
  .etapa, .etapa::before, .metodo__intro a, .metodo__foto img { transition: none; }
}

/* ---------- Projetos recentes: portfólio com as telas reais ---------- */

.projetos {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 76px var(--gutter) 84px;
  border-top: 1px solid rgba(143, 179, 255, .12);
  background: #091831;
  color: #fff;
}

/* Luz dourada no alto e riscado diagonal fino atrás do título. */
.projetos::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 14px);
  -webkit-mask-image: radial-gradient(ellipse 55% 40% at 50% 8%, #000 20%, transparent 80%);
  mask-image: radial-gradient(ellipse 55% 40% at 50% 8%, #000 20%, transparent 80%);
}

.projetos::after {
  content: "";
  position: absolute;
  top: -260px;
  left: 50%;
  z-index: -1;
  width: 1100px;
  height: 700px;
  margin-left: -550px;
  background: radial-gradient(closest-side, rgba(242, 185, 64, .12), transparent);
  pointer-events: none;
}

.projetos__inner { max-width: 1240px; margin: 0 auto; }

.projetos__cab { max-width: 780px; margin: 0 auto; text-align: center; }

.projetos__rotulo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--gold);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.projetos__rotulo::before,
.projetos__rotulo::after { content: ""; width: 22px; height: 2px; border-radius: 2px; background: currentColor; }

.projetos__titulo {
  margin: 12px 0 0;
  font-size: clamp(42px, 11vw, 76px);
  font-weight: 700;
  line-height: .98;
  letter-spacing: -.02em;
}

.projetos__titulo span { color: var(--gold); }

.projetos__intro {
  max-width: 640px;
  margin: 18px auto 0;
  color: #c8d3e3;
  font-size: 17px;
  line-height: 1.65;
  text-wrap: pretty;
}

.projetos__fatos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.projetos__fatos li {
  padding: 8px 14px;
  border: 1px solid rgba(143, 179, 255, .18);
  border-radius: 10px;
  background: rgba(255, 255, 255, .04);
  color: #c8d3e3;
  font-size: 14px;
}

.projetos__fatos b { color: var(--gold); }

/* Grade: 1 coluna no celular, 2 no tablet; no computador 2 grandes e 8 menores. */
.projetos__grade {
  display: grid;
  gap: 26px 18px;
  margin: 44px 0 0;
  padding: 0;
  list-style: none;
}

.proj { perspective: 1100px; }

.proj__link {
  --rx: 0deg;
  --ry: 0deg;
  display: grid;
  gap: 12px;
  color: #fff;
  text-decoration: none;
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transform-style: preserve-3d;
  transition: transform .5s var(--ease);
}

.proj__tela {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 14px;
  background: #0c1f38;
  box-shadow: 0 0 0 1px rgba(143, 179, 255, .16), 0 30px 60px -36px rgba(0, 0, 0, .85);
  transition: box-shadow .4s var(--ease);
}

.proj__barra {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  padding: 0 12px;
  background: #1b2333;
  color: #8a96aa;
  font-size: 11.5px;
}

.proj__barra i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #3a4458; transition: background-color .3s var(--ease); }
.proj__barra em { min-width: 0; margin-left: 8px; overflow: hidden; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }

.proj__foto { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; }

.proj__foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  transition: transform 1.2s var(--ease);
}

/* Escurece por baixo no hover para o botão aparecer. */
.proj__foto::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(8, 22, 40, .75), transparent 55%);
  opacity: 0;
  transition: opacity .4s var(--ease);
}

.proj__ver {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 18px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--gold);
  color: #0a1a30;
  font: 700 13px/1 var(--font);
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .7);
  opacity: 0;
  transform: translate(-50%, 16px);
  transition: opacity .35s var(--ease), transform .45s var(--ease);
}

.proj__ver svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Reflexo que acompanha o cursor. */
.proj__brilho {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(420px circle at var(--gx, 50%) var(--gy, 0%), rgba(255, 255, 255, .16), transparent 45%);
  opacity: 0;
  transition: opacity .4s var(--ease);
  pointer-events: none;
}

.proj__info { display: grid; gap: 3px; padding: 0 2px; text-align: center; }
.proj__info b { font-size: 18px; line-height: 1.2; }
.proj__info span { color: #a9b8d0; font-size: 14px; line-height: 1.4; }

.proj__link:hover .proj__tela,
.proj__link:focus-visible .proj__tela {
  box-shadow: 0 0 0 1px rgba(242, 185, 64, .6), 0 0 44px -12px rgba(242, 185, 64, .4), 0 40px 70px -36px rgba(0, 0, 0, .9);
}

.proj__link:hover .proj__foto img { transform: scale(1.06); }
.proj__link:hover .proj__foto::after,
.proj__link:focus-visible .proj__foto::after { opacity: 1; }
.proj__link:hover .proj__ver,
.proj__link:focus-visible .proj__ver { opacity: 1; transform: translate(-50%, 0); }
.proj__link:hover .proj__brilho { opacity: 1; }
.proj__link:hover .proj__barra i:nth-child(1) { background: #ff5f57; }
.proj__link:hover .proj__barra i:nth-child(2) { background: #febc2e; }
.proj__link:hover .proj__barra i:nth-child(3) { background: #28c840; }
.proj__link:focus-visible { outline: none; }
.proj__link:focus-visible .proj__info b { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 4px; }

@media (min-width: 640px) {
  .projetos__grade { grid-template-columns: 1fr 1fr; }
  .proj--grande { grid-column: span 2; }
  .proj__info { text-align: left; }
}

@media (min-width: 1100px) {
  .projetos { padding: 104px var(--gutter) 112px; }
  .projetos__intro { text-align: justify; text-align-last: center; hyphens: auto; }
  .projetos__grade { grid-template-columns: repeat(12, 1fr); gap: 34px 20px; margin-top: 56px; }
  .proj { grid-column: span 3; }
  .proj--grande { grid-column: span 6; }
  .proj--grande .proj__info b { font-size: 22px; }
  .proj--grande .proj__info span { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .proj__link, .proj__foto img, .proj__ver, .proj__foto::after, .proj__brilho { transition: none; }
}

/* ---------- Avaliações: trechos reais correndo devagar em duas faixas ---------- */

.depoimentos {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 76px 0 52px;
  border-top: 1px solid rgba(143, 179, 255, .12);
  background: #0c1d3a;
  color: #fff;
}

/* Luz dourada suave atrás do placar. */
.depoimentos::after {
  content: "";
  position: absolute;
  top: -120px;
  right: -8%;
  z-index: -1;
  width: 820px;
  height: 620px;
  background: radial-gradient(closest-side, rgba(242, 185, 64, .1), transparent);
  pointer-events: none;
}

.depoimentos__inner {
  display: grid;
  gap: 30px;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.depoimentos__cab { text-align: center; }

.depoimentos__rotulo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--gold);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.depoimentos__rotulo::before { content: ""; width: 26px; height: 2px; border-radius: 2px; background: currentColor; }

.depoimentos__titulo {
  margin: 12px 0 0;
  font-size: clamp(34px, 8.6vw, 54px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.015em;
  text-wrap: balance;
}

.depoimentos__titulo span { color: var(--gold); }

.depoimentos__intro {
  max-width: 560px;
  margin: 16px auto 0;
  color: #c8d3e3;
  font-size: 17px;
  line-height: 1.6;
  text-wrap: pretty;
}

/* Placar: a nota grande, as estrelas que cintilam em sequência e o link para o Google. */
.placar-google {
  position: relative;
  overflow: hidden;
  display: grid;
  justify-items: center;
  justify-self: center;
  gap: 6px;
  padding: 22px 34px 20px;
  border: 1px solid rgba(242, 185, 64, .3);
  border-radius: 18px;
  background: rgba(255, 255, 255, .035);
  color: #fff;
  text-decoration: none;
  transition: border-color .3s var(--ease), transform .3s var(--ease), background-color .3s var(--ease);
}

.placar-google::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .09) 50%, transparent 65%);
  transform: translateX(-100%);
  pointer-events: none;
}

.placar-google__nota { font-size: 66px; font-weight: 700; line-height: 1; }
.placar-google__estrelas { display: flex; gap: 3px; color: var(--gold); }
.placar-google__estrelas svg { width: 21px; height: 21px; }
.placar-google__total { color: #c8d3e3; font-size: 14px; }

.placar-google__ver {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  color: var(--gold);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.placar-google__ver svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s var(--ease); }
.placar-google:hover { border-color: rgba(242, 185, 64, .6); background: rgba(255, 255, 255, .05); transform: translateY(-3px); }
.placar-google:hover .placar-google__ver svg { transform: translate(2px, -2px); }
.placar-google:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* Faixas de depoimentos: correm devagar, em sentidos opostos, e somem nas bordas. */
.depo-trilhos {
  display: grid;
  gap: 18px;
  margin-top: 46px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.depo-trilho { overflow: hidden; }
.depo-faixa { display: flex; width: max-content; padding: 6px 0 8px; }

.depo {
  position: relative;
  display: flex;
  flex: none;
  flex-direction: column;
  width: 300px;
  margin: 0 18px 0 0;
  padding: 22px 22px 18px;
  border: 1px solid rgba(143, 179, 255, .14);
  border-radius: 16px;
  background: rgba(255, 255, 255, .04);
  transition: transform .35s var(--ease), border-color .35s var(--ease), background-color .35s var(--ease);
}

.depo::before {
  content: "\201C";
  position: absolute;
  top: 2px;
  right: 18px;
  color: rgba(242, 185, 64, .45);
  font: 700 58px/1 var(--font);
}

.depo blockquote { flex: 1; margin: 0; }
.depo p { margin: 0; color: #d6e0ee; font-size: 15.5px; line-height: 1.6; text-wrap: pretty; }

.depo figcaption {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(143, 179, 255, .12);
}

.depo__letra {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #12306b;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
}

.depo:nth-child(3n + 2) .depo__letra { background: var(--gold); color: #0a1a30; }
.depo:nth-child(3n) .depo__letra { background: #1f4fa8; }

.depo__quem { display: grid; gap: 1px; min-width: 0; }
.depo__quem b { color: #fff; font-size: 15px; line-height: 1.25; }
.depo__quem small { color: #8fa3c0; font-size: 12.5px; line-height: 1.3; }

/* Cinco estrelas desenhadas por máscara; a avaliação 4 de 5 apaga a última. */
.depo__nota {
  flex: none;
  width: 65px;
  height: 13px;
  margin-left: auto;
  background: linear-gradient(90deg, var(--gold) var(--nota, 100%), rgba(255, 255, 255, .2) 0);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1.6l2.6 5.3 5.8.8-4.2 4.1 1 5.8L10 14.9l-5.2 2.7 1-5.8L1.6 7.7l5.8-.8z'/%3E%3C/svg%3E") 0 0 / 13px 13px repeat-x;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1.6l2.6 5.3 5.8.8-4.2 4.1 1 5.8L10 14.9l-5.2 2.7 1-5.8L1.6 7.7l5.8-.8z'/%3E%3C/svg%3E") 0 0 / 13px 13px repeat-x;
}

.depo[data-nota="4"] { --nota: 80%; }

.depo:hover { transform: translateY(-4px); border-color: rgba(242, 185, 64, .45); background: rgba(255, 255, 255, .065); }

@media (prefers-reduced-motion: no-preference) {
  .placar-google::after { animation: brilho-faixa 6s var(--ease) infinite 1.5s; }
  .placar-google__estrelas svg { animation: cintila 4s var(--ease) infinite; }
  .placar-google__estrelas svg:nth-child(2) { animation-delay: .12s; }
  .placar-google__estrelas svg:nth-child(3) { animation-delay: .24s; }
  .placar-google__estrelas svg:nth-child(4) { animation-delay: .36s; }
  .placar-google__estrelas svg:nth-child(5) { animation-delay: .48s; }

  .depo-trilho.is-vivo .depo-faixa { animation: corre-depo var(--t, 70s) linear infinite; }
  .depo-trilho--volta.is-vivo .depo-faixa { animation-direction: reverse; }
  .depo-trilho:hover .depo-faixa,
  .depo-trilho:focus-within .depo-faixa { animation-play-state: paused; }
}

@keyframes cintila { 0%, 12%, 100% { transform: none; filter: none; } 6% { transform: scale(1.22); filter: drop-shadow(0 0 6px rgba(242, 185, 64, .9)); } }
@keyframes corre-depo { to { transform: translateX(-50%); } }

/* Sem movimento: as faixas viram listas que a pessoa rola com o dedo ou o mouse. */
@media (prefers-reduced-motion: reduce) {
  .depo-trilho { overflow-x: auto; scroll-snap-type: x mandatory; }
  .depo { scroll-snap-align: start; transition: none; }
  .placar-google { transition: none; }
}

@media (min-width: 640px) {
  .depo { width: 340px; }
}

@media (min-width: 1024px) {
  .depoimentos { padding: 104px 0 64px; }
  .depoimentos__inner { grid-template-columns: 1fr auto; align-items: center; gap: 48px; }
  .depoimentos__cab { text-align: left; }
  .depoimentos__intro { margin-left: 0; text-align: justify; hyphens: auto; }
  .placar-google { justify-self: end; }
  .depo-trilhos { margin-top: 56px; }
}

/* ---------- Rodapé: prancha técnica (régua que mede a tela + quadro de identificação) ---------- */

.prancha {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 0 0 44px;
  background-color: #06122a;
  background-image:
    linear-gradient(rgba(143, 179, 255, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(143, 179, 255, .07) 1px, transparent 1px),
    linear-gradient(rgba(143, 179, 255, .03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(143, 179, 255, .03) 1px, transparent 1px);
  background-size: 80px 80px, 80px 80px, 16px 16px, 16px 16px;
  color: #c8d3e3;
}

/* Emenda com a seção de cima e uma luz azul atrás do quadro. */
.prancha::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, #0c1d3a 0, rgba(12, 29, 58, 0) 120px),
    radial-gradient(ellipse 60% 50% at 50% 40%, rgba(61, 123, 255, .12), transparent 70%);
  pointer-events: none;
}

/* Régua de ponta a ponta: cota com setas e marcas a cada 10 e 100 px reais. */
.regua {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 104px;
}

.regua::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: rgba(143, 179, 255, .45);
}

.regua::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(50% + 1px);
  height: 10px;
  background:
    repeating-linear-gradient(90deg, rgba(143, 179, 255, .5) 0 1px, transparent 1px 100px) 0 0 / 100% 10px no-repeat,
    repeating-linear-gradient(90deg, rgba(143, 179, 255, .22) 0 1px, transparent 1px 10px) 0 0 / 100% 5px no-repeat;
}

.regua__seta {
  position: absolute;
  top: 50%;
  width: 10px;
  height: 8px;
  margin-top: -3.5px;
  background: #8fb3ff;
}

.regua__seta--esq { left: 0; clip-path: polygon(0 50%, 100% 0, 100% 100%); }
.regua__seta--dir { right: 0; clip-path: polygon(100% 50%, 0 0, 0 100%); }

/* Luz que "mede": nasce no centro e corre até as duas pontas. */
.regua__luz {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg, transparent, #8fb3ff 25%, #e3ecff 50%, #8fb3ff 75%, transparent);
  box-shadow: 0 0 10px rgba(143, 179, 255, .8);
  opacity: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .regua__luz { animation: mede 7s var(--ease) 1s infinite; }
}

@keyframes mede {
  0% { opacity: 1; transform: scaleX(0); }
  32% { opacity: 1; transform: scaleX(1); }
  48%, 100% { opacity: 0; transform: scaleX(1); }
}

.regua__valor {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  padding: 10px 18px 8px;
  background: #06122a;
  color: #8fa3c0;
  font: 700 15px/1 var(--font);
  letter-spacing: .06em;
}

.regua__num {
  color: #fff;
  font-size: 22px;
  font-variant-numeric: tabular-nums;
}

.regua__valor small {
  margin-top: 7px;
  color: #6f8fc4;
  font-size: 10.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
}

/* Quadro de identificação: as linhas são o vão da grade sobre o fundo azul-claro. */
.prancha__inner { max-width: 1240px; margin: 0 auto; padding: 0 var(--gutter); }

.prancha__quadro {
  position: relative;
  display: grid;
  grid-template-areas: "marca" "folhas" "campos" "base";
  gap: 1px;
  border: 1px solid rgba(143, 179, 255, .34);
  border-radius: 6px;
  background: rgba(143, 179, 255, .22);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .75);
}

/* Marcas de registro nos cantos, como numa prancha impressa. */
.prancha__quadro::before,
.prancha__quadro::after {
  content: "";
  position: absolute;
  width: 22px;
  height: 22px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22' fill='none' stroke='%238fb3ff' stroke-width='1'%3E%3Ccircle cx='11' cy='11' r='5'/%3E%3Cpath d='M11 0v22M0 11h22'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: .8;
  pointer-events: none;
}

.prancha__quadro::before { top: -11px; left: -11px; }
.prancha__quadro::after { right: -11px; bottom: -11px; }

.prancha__marca,
.folhas,
.campos,
.base__item,
.prancha__topo { background: #071630; }

.prancha__campo {
  display: block;
  margin: 0 0 10px;
  color: #6f8fc4;
  font: 700 10.5px/1.2 var(--font);
  letter-spacing: .2em;
  text-transform: uppercase;
}

/* Marca */
.prancha__marca {
  position: relative;
  grid-area: marca;
  display: grid;
  justify-items: center;
  gap: 16px;
  padding: 34px 20px 28px;
  text-align: center;
}

.prancha__logo { display: inline-block; }
.prancha__logo img { display: block; width: 190px; height: auto; }
.prancha__logo:focus-visible { outline: 2px solid #fff; outline-offset: 4px; border-radius: 4px; }

.prancha__frase { margin: 0; color: #c8d3e3; font-size: 16px; line-height: 1.55; text-wrap: pretty; }
.prancha__frase b { display: block; margin-bottom: 2px; color: #fff; font-size: 19px; }

.orcar--rodape { padding-right: 18px; font-size: 14px; letter-spacing: .1em; }
.orcar--rodape .orcar__texto { display: inline; }

/* Folhas do projeto: o menu numerado; a folha atual tem o cursor piscando, como no menu do topo. */
.folhas { grid-area: folhas; padding: 24px 20px 18px; text-align: center; }

.folhas__lista {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 18px;
  max-width: 360px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  text-align: left;
}

.folhas__lista a {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 11px 0;
  border-bottom: 1px dashed rgba(143, 179, 255, .16);
  color: #c8d3e3;
  font-size: 15.5px;
  line-height: 1.25;
  text-decoration: none;
  transition: color .2s var(--ease);
}

.folhas__n {
  flex: none;
  color: #6f8fc4;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  font-variant-numeric: tabular-nums;
  transition: color .2s var(--ease);
}

.folhas__nome { position: relative; }

.folhas__nome::after {
  content: "";
  position: absolute;
  top: .1em;
  bottom: .05em;
  right: -7px;
  width: 2px;
  background: var(--blue);
  opacity: 0;
}

.folhas__lista a:hover,
.folhas__lista a:focus-visible,
.folhas__lista a[aria-current="page"] { color: #fff; }

.folhas__lista a:hover .folhas__n,
.folhas__lista a:focus-visible .folhas__n,
.folhas__lista a[aria-current="page"] .folhas__n { color: #8fb3ff; }

.folhas__lista a:hover .folhas__nome::after,
.folhas__lista a:focus-visible .folhas__nome::after,
.folhas__lista a[aria-current="page"] .folhas__nome::after { opacity: 1; }

.folhas__lista a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 3px; }

@media (prefers-reduced-motion: no-preference) {
  .folhas__lista a:hover .folhas__nome::after,
  .folhas__lista a:focus-visible .folhas__nome::after,
  .folhas__lista a[aria-current="page"] .folhas__nome::after { animation: pisca 1.06s steps(1) infinite; }
}

/* Campos: escritório, especialidade e endereço */
/* Escritório e especialidade lado a lado; o endereço embaixo, de ponta a ponta. */
.campos { grid-area: campos; display: grid; grid-template-columns: 1fr 1fr; align-content: start; margin: 0; text-align: center; }

.campos__item { padding: 18px 14px; }
.campos__item:nth-child(2) { border-left: 1px solid rgba(143, 179, 255, .16); }
.campos__item--onde { grid-column: 1 / -1; border-top: 1px solid rgba(143, 179, 255, .16); }
.campos dd { margin: 0; color: #fff; font-size: 17px; line-height: 1.4; }

.campos__onde {
  display: block;
  color: #c8d3e3;
  font-size: 15px;
  line-height: 1.55;
  text-decoration: none;
  transition: color .2s var(--ease);
}

/* "Como chegar" é um link à parte: abre a rota no Google Maps (o endereço abre o perfil no Google). */
.campos__chegar {
  display: inline-block;
  margin-top: 10px;
  color: var(--gold);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color .2s var(--ease);
}

.campos__chegar::after { content: "\2197"; display: inline-block; margin-left: 6px; transition: transform .25s var(--ease); }
.campos__onde:hover { color: #fff; }
.campos__chegar:hover { color: #ffd36e; }
.campos__chegar:hover::after { transform: translate(2px, -2px); }
.campos__onde:focus-visible,
.campos__chegar:focus-visible { outline: 2px solid #fff; outline-offset: 4px; border-radius: 4px; }

/* Faixa de baixo: revisão e o voltar ao topo como uma cota vertical. */
.prancha__base {
  grid-area: base;
  display: grid;
  gap: 1px;
}

.base__item {
  margin: 0;
  padding: 14px 20px 16px;
  color: #c8d3e3;
  font-size: 14px;
  line-height: 1.45;
  text-align: center;
  text-wrap: balance;
}

.base__item .prancha__campo { margin-bottom: 6px; }

.prancha__topo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 60px;
  padding: 0 22px;
  border: 0;
  color: #fff;
  font: 700 13px/1 var(--font);
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .25s var(--ease);
}

.prancha__topo-cota { display: grid; place-items: center; color: #8fb3ff; }
.prancha__topo-cota svg { width: 12px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: transform .35s var(--ease); }

.prancha__topo:hover { background: #0b2150; }
.prancha__topo:hover .prancha__topo-cota svg { transform: translateY(-4px); }
.prancha__topo:focus-visible { outline: 2px solid #fff; outline-offset: -5px; }
.prancha__topo.is-subindo .prancha__topo-cota svg { animation: decola .5s var(--ease); }

/* Carimbo da prévia aprovada, batido no alto do quadro da marca, ao lado da logo. */
.prancha__carimbo {
  position: absolute;
  top: 16px;
  right: 10px;
  width: 58px;
  height: 58px;
  color: #6f9bff;
  overflow: visible;
  transform: rotate(-12deg);
  pointer-events: none;
}

/* Celular estreito: logo e carimbo menores para não se tocarem. */
@media (max-width: 399px) {
  .prancha__logo img { width: 160px; }
  .prancha__carimbo { top: 14px; right: 6px; width: 50px; height: 50px; }
}

@media (min-width: 768px) {
  .prancha__quadro {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "marca marca" "folhas campos" "base base";
  }
  .prancha__base { grid-template-columns: 1fr auto; }
  .base__item { padding: 16px 28px 18px; text-align: left; }
  .prancha__topo { padding: 0 30px; }
  .prancha__carimbo { top: 20px; right: 28px; width: 84px; height: 84px; }
}

/* Computador: as três colunas do quadro e a faixa de baixo numa linha só. */
@media (min-width: 1100px) {
  .prancha { padding-bottom: 64px; }
  .regua { height: 92px; }
  .prancha__quadro {
    grid-template-columns: 1.05fr 1.35fr 1fr;
    grid-template-areas: "marca folhas campos" "base base base";
  }
  .prancha__marca { justify-items: start; align-content: start; padding: 38px 34px 34px; text-align: left; }
  .prancha__carimbo { top: 18px; right: 20px; width: 76px; height: 76px; }
  .prancha__frase { max-width: 300px; }
  .folhas { padding: 30px 30px 22px; text-align: left; }
  .folhas__lista { max-width: none; margin: 0; }
  .campos { text-align: left; }
  .campos__item { padding: 22px 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .folhas__lista a, .folhas__n, .campos__onde, .campos__chegar, .campos__chegar::after, .prancha__topo, .prancha__topo-cota svg { transition: none; }
  .prancha__topo.is-subindo .prancha__topo-cota svg { animation: none; }
}

/* =========================================================================
   Página A Elemento
   ========================================================================= */

/* ---------- Abertura: a máquina do tempo (o mesmo site em cada virada da internet) ---------- */

.virada {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 136px var(--gutter) 64px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
}

/* Grade fina que some nas bordas e uma luz azul atrás da janela. */
.virada::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(143, 179, 255, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(143, 179, 255, .06) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 70% 55%, #000 10%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 60% at 70% 55%, #000 10%, transparent 75%);
}

.virada__inner { display: grid; gap: 44px; max-width: 1240px; margin: 0 auto; }
.virada__texto { text-align: center; }

.trilha ol {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 0 0 22px;
  padding: 0;
  color: var(--muted);
  font-size: 13px;
  letter-spacing: .04em;
  list-style: none;
}

.trilha li + li::before { content: "/"; margin-right: 8px; opacity: .5; }
.trilha a { color: #8fb3ff; text-decoration: none; }
.trilha a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.trilha a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 3px; }

.virada__titulo { margin: 0; font-weight: 700; }

.virada__chave {
  display: block;
  color: #8fb3ff;
  font-size: 15px;
  letter-spacing: .16em;
  line-height: 1.3;
  text-transform: uppercase;
}

.virada__frase {
  display: block;
  margin-top: 14px;
  font-size: clamp(34px, 8.8vw, 58px);
  line-height: 1.04;
  letter-spacing: -.012em;
  text-wrap: balance;
}

.virada__ouro {
  color: var(--gold);
  white-space: nowrap;
  background: linear-gradient(currentColor, currentColor) 0 96% / 100% .06em no-repeat;
}

.virada__lead {
  max-width: 580px;
  margin: 20px auto 0;
  color: var(--text-2);
  font-size: 17px;
  line-height: 1.7;
  text-align: justify;
  hyphens: auto;
  text-wrap: pretty;
}

.virada__cta { margin-top: 26px; }
.virada__cta .orcar__chip::before { animation: halo 3.2s var(--ease) 1.2s infinite; }

@media (prefers-reduced-motion: reduce) {
  .virada__cta .orcar__chip::before { animation: none; }
}

/* A janela do navegador */
.maquina { position: relative; width: 100%; max-width: 680px; margin: 0 auto; }

.maquina::before {
  content: "";
  position: absolute;
  inset: -10% -6% 10%;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(61, 123, 255, .28), transparent);
  pointer-events: none;
}

.maquina__janela {
  overflow: hidden;
  border-radius: 14px;
  background: #0b1426;
  box-shadow: 0 0 0 1px rgba(143, 179, 255, .22), 0 50px 90px -40px rgba(0, 0, 0, .85);
}

.maquina__barra {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 14px;
  background: #101c33;
  border-bottom: 1px solid rgba(143, 179, 255, .14);
}

.maquina__barra i { width: 9px; height: 9px; border-radius: 50%; background: #ff5f57; opacity: .85; }
.maquina__barra i:nth-child(2) { background: #febc2e; }
.maquina__barra i:nth-child(3) { background: #28c840; }

.maquina__url {
  display: flex;
  align-items: center;
  flex: 0 1 60%;
  height: 22px;
  margin-left: 12px;
  padding: 0 10px;
  border-radius: 6px;
  background: rgba(255, 255, 255, .06);
  color: var(--muted);
  font-size: 12px;
  letter-spacing: .02em;
  white-space: nowrap;
  overflow: hidden;
}

.maquina__tela {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #fff;
  container-type: inline-size;
}

/* Cada época é uma tela inteira desenhada em código; a ativa aparece por cima. */
.era {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: scale(1.03);
  transition: opacity .7s var(--ease), transform .9s var(--ease), visibility 0s .7s;
}

.era.is-ativa { opacity: 1; visibility: visible; transform: none; transition: opacity .7s var(--ease), transform .9s var(--ease), visibility 0s; }

/* 2002: a vitrine parada */
.era--02 {
  padding: 3cqw 4cqw;
  background: #fff;
  color: #000;
  font: 2.2cqw/1.3 "Times New Roman", Times, serif;
  text-align: center;
}

.e02__topo {
  padding: 1.2cqw;
  border: .5cqw outset #e2e2e2;
  background: linear-gradient(#e6e6e6, #b4b4b4);
  color: #000080;
  font-size: 5cqw;
  font-weight: 700;
  text-shadow: .3cqw .3cqw 0 #c8c8c8;
}

.e02__menu { margin: 1.6cqw 0; color: #0000ee; font-size: 2.4cqw; }

.e02__corpo { display: grid; grid-template-columns: 24cqw 1fr; gap: 2.4cqw; text-align: left; }

.e02__lado {
  display: grid;
  align-content: start;
  gap: .6cqw;
  padding: 1.4cqw;
  border: .3cqw solid #999;
  background: #ffffcc;
  font-size: 2.1cqw;
}

.e02__lado b { color: #cc0000; }
.e02__main { display: grid; gap: 1cqw; }
.e02__main b { color: #000080; font-size: 3.2cqw; }

.e02__foto {
  display: grid;
  place-items: center;
  height: 12cqw;
  border: .3cqw solid #999;
  background: repeating-linear-gradient(45deg, #ddd 0 .8cqw, #eee .8cqw 1.6cqw);
  color: #777;
  font-size: 2cqw;
}

.e02__obra {
  width: fit-content;
  margin: 2.2cqw auto 0;
  padding: .8cqw 2.6cqw;
  outline: .6cqw dashed #111;
  outline-offset: -.3cqw;
  background: #ffcc00;
  color: #111;
  font: 700 2.2cqw/1 Arial, sans-serif;
}

.e02__conta { margin-top: 1.8cqw; font-size: 2cqw; }
.e02__conta span { padding: .2cqw .8cqw; background: #000; color: #2bff2b; font-family: "Courier New", monospace; letter-spacing: .2em; }

/* 2007: o site do computador espremido no celular */
.era--07 { background: linear-gradient(#e8f4ff, #fff 60%); font-family: "Trebuchet MS", Arial, sans-serif; }

.e07__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 11cqw;
  padding: 0 3cqw;
  background: linear-gradient(#7cc4ff, #2a7fd4 50%, #1f6bbd 51%, #3d8fe0);
  color: #fff;
}

.e07__topo b { font-size: 4.2cqw; text-shadow: 0 .3cqw .4cqw rgba(0, 0, 0, .3); }

.e07__abas i {
  display: inline-block;
  margin-left: .8cqw;
  padding: .8cqw 1.6cqw;
  border-radius: 1.2cqw 1.2cqw 0 0;
  background: linear-gradient(#fff, #dbeeff);
  color: #1f6bbd;
  font-size: 1.9cqw;
  font-style: normal;
  font-weight: 700;
}

.e07__corpo {
  position: relative;
  display: grid;
  gap: 1.2cqw;
  width: 54cqw;
  margin: 4cqw 3cqw;
  padding: 3cqw;
  border: .3cqw solid #b9dcff;
  border-radius: 2cqw;
  background: #fff;
  box-shadow: 0 1cqw 2cqw rgba(31, 107, 189, .2);
}

.e07__corpo b { color: #1f6bbd; font-size: 3.4cqw; }
.e07__corpo span { height: 1.4cqw; border-radius: 1cqw; background: #d7e9fb; }
.e07__corpo span:last-child { width: 70%; }

.e07__fotos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2cqw; width: 54cqw; margin: 0 3cqw; }

.e07__fotos i {
  height: 12cqw;
  border: .3cqw solid #fff;
  border-radius: 1.6cqw;
  background: linear-gradient(#fff6, transparent 50%), linear-gradient(135deg, #8fc9ff, #2a7fd4);
  box-shadow: 0 1cqw 1.6cqw rgba(31, 107, 189, .25);
}

.e07__fotos i:nth-child(2) { background: linear-gradient(#fff6, transparent 50%), linear-gradient(135deg, #ffcf8a, #ff8a00); }
.e07__fotos i:nth-child(3) { background: linear-gradient(#fff6, transparent 50%), linear-gradient(135deg, #b6e388, #4caf50); }

.e07__selo {
  position: absolute;
  top: -3.5cqw;
  right: -3.5cqw;
  display: grid;
  place-items: center;
  width: 11cqw;
  height: 11cqw;
  background: #ff8a00;
  color: #fff;
  font-size: 2.3cqw;
  font-weight: 700;
  clip-path: polygon(50% 0, 61% 18%, 82% 10%, 80% 32%, 100% 42%, 84% 57%, 94% 78%, 71% 79%, 62% 100%, 50% 84%, 36% 100%, 28% 79%, 6% 79%, 16% 57%, 0 42%, 20% 32%, 18% 10%, 39% 18%);
  transform: rotate(12deg);
}

.e07__fone {
  position: absolute;
  right: 7cqw;
  bottom: -7cqw;
  width: 22cqw;
  height: 44cqw;
  padding: 5.4cqw 1.4cqw;
  border: .5cqw solid #c4c4c4;
  border-radius: 3.6cqw;
  background: #111;
  box-shadow: -2cqw 2cqw 4cqw rgba(0, 0, 0, .35);
}

.e07__mini { display: grid; align-content: start; gap: .5cqw; height: 100%; padding: .6cqw; overflow: hidden; background: #fff; }
.e07__mini i { height: 1.1cqw; border-radius: .4cqw; background: #d7e9fb; }
.e07__mini i:first-child { height: 3cqw; background: linear-gradient(#7cc4ff, #1f6bbd); }

/* Dois dedos tentando aumentar a página: o gesto de 2007. */
.e07__pinca { position: absolute; left: 50%; top: 42%; }

.e07__pinca::before,
.e07__pinca::after {
  content: "";
  position: absolute;
  width: 3.4cqw;
  height: 3.4cqw;
  margin: -1.7cqw;
  border: .3cqw solid rgba(255, 255, 255, .9);
  border-radius: 50%;
  background: rgba(61, 123, 255, .35);
}

.era--07.is-ativa .e07__pinca::before { animation: pinca-a 1.8s var(--ease) .6s infinite; }
.era--07.is-ativa .e07__pinca::after { animation: pinca-b 1.8s var(--ease) .6s infinite; }

@keyframes pinca-a { 0%, 15% { transform: translate(-1cqw, 1cqw); } 60%, 100% { transform: translate(-5cqw, 5cqw); opacity: 0; } }
@keyframes pinca-b { 0%, 15% { transform: translate(1cqw, -1cqw); } 60%, 100% { transform: translate(5cqw, -5cqw); opacity: 0; } }

/* 2015: o site que se adapta ao celular */
.era--15 { background: #f3efe9; font-family: Arial, Helvetica, sans-serif; color: #2b2b2b; }

.e15__site { position: absolute; top: 0; bottom: 0; left: 0; width: 72cqw; background: #fff; }

.e15__topo { display: flex; align-items: center; justify-content: space-between; height: 8cqw; padding: 0 3cqw; }
.e15__topo b { font-size: 2.6cqw; letter-spacing: .12em; text-transform: uppercase; }
.e15__menu { display: grid; gap: .6cqw; }
.e15__menu i { width: 3.2cqw; height: .5cqw; background: #2b2b2b; }

.e15__hero {
  display: grid;
  align-content: end;
  justify-items: start;
  gap: 1.4cqw;
  height: 27cqw;
  margin: 0 3cqw;
  padding: 3cqw;
  background: linear-gradient(rgba(0, 0, 0, .05), rgba(0, 0, 0, .45)), linear-gradient(135deg, #7a4d31, #c08f62 55%, #e6c79d);
  color: #fff;
}

.e15__hero b { max-width: 40cqw; font-size: 3.6cqw; line-height: 1.1; }
.e15__hero span { padding: 1cqw 2cqw; background: #fff; color: #2b2b2b; font-size: 1.8cqw; font-weight: 700; }

.e15__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2cqw; margin: 2.4cqw 3cqw; }
.e15__cards i { height: 11cqw; background: #e9e2d8; }

.e15__fone {
  position: absolute;
  top: 7cqw;
  right: 4cqw;
  width: 21cqw;
  height: 42cqw;
  overflow: hidden;
  border: 1cqw solid #1d1d1f;
  border-radius: 2.8cqw;
  background: #fff;
  box-shadow: -1.6cqw 2cqw 4cqw rgba(0, 0, 0, .25);
}

.e15__topo--fone { height: 6cqw; padding: 0 1.6cqw; }
.e15__topo--fone b { font-size: 1.5cqw; }
.e15__topo--fone .e15__menu i { width: 2cqw; height: .4cqw; }
.e15__hero--fone { height: 17cqw; margin: 0 1.4cqw; padding: 1.4cqw; gap: .8cqw; }
.e15__hero--fone b { max-width: none; font-size: 2cqw; }
.e15__hero--fone span { padding: .6cqw 1cqw; font-size: 1.2cqw; }
.e15__cards--fone { grid-template-columns: 1fr; margin: 1.4cqw; }
.e15__cards--fone i { height: 9cqw; }

.e15__selo {
  position: absolute;
  bottom: 4cqw;
  left: 4cqw;
  padding: 1cqw 2cqw;
  border-radius: .6cqw;
  background: #0f9d58;
  color: #fff;
  font: 700 1.9cqw/1 Arial, sans-serif;
  box-shadow: 0 1cqw 2cqw rgba(15, 157, 88, .35);
}

.e15__selo::before { content: "\2713"; margin-right: .8cqw; }

/* 2018: o botão de conversa */
.era--18 { background: #fff; color: #222; font-family: var(--font); }

.e18__topo { display: flex; align-items: center; justify-content: space-between; height: 9cqw; padding: 0 4cqw; border-bottom: .2cqw solid #eee; }
.e18__topo b { font-size: 2.8cqw; }
.e18__topo span { padding: .9cqw 2.2cqw; border-radius: 3cqw; background: #222; color: #fff; font-size: 1.7cqw; font-weight: 700; }

.e18__hero {
  display: grid;
  align-content: start;
  gap: 1.6cqw;
  height: calc(100% - 9cqw);
  padding: 6cqw 4cqw;
  background: linear-gradient(90deg, #f6f1ea 0 56%, transparent 56%), linear-gradient(160deg, #b98a5e, #e3c69d);
}

.e18__hero b { max-width: 44cqw; font-size: 4.6cqw; line-height: 1.05; }
.e18__linha { width: 40cqw; height: 1.2cqw; border-radius: 1cqw; background: #e2dad0; }
.e18__linha--curta { width: 28cqw; }

.e18__chat { position: absolute; right: 4cqw; bottom: 15cqw; display: grid; justify-items: end; gap: 1cqw; width: 42cqw; }

.e18__msg {
  padding: 1.4cqw 2cqw;
  border-radius: 1.6cqw 1.6cqw .4cqw 1.6cqw;
  background: #dcf8c6;
  color: #111;
  font-size: 1.9cqw;
  box-shadow: 0 .6cqw 1.6cqw rgba(0, 0, 0, .15);
}

.e18__digita { display: flex; gap: .6cqw; padding: 1.3cqw 1.8cqw; border-radius: 1.6cqw; background: #fff; box-shadow: 0 .6cqw 1.6cqw rgba(0, 0, 0, .15); }
.e18__digita i { width: 1cqw; height: 1cqw; border-radius: 50%; background: #9aa0a6; }

.e18__zap {
  position: absolute;
  right: 4cqw;
  bottom: 4cqw;
  display: grid;
  place-items: center;
  width: 9cqw;
  height: 9cqw;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  box-shadow: 0 1cqw 2.4cqw rgba(37, 211, 102, .5);
}

.e18__zap svg { width: 5cqw; height: 5cqw; }

.era--18.is-ativa .e18__msg { animation: era-entra .6s var(--ease) .5s both; }
.era--18.is-ativa .e18__digita { animation: era-entra .6s var(--ease) 1.1s both; }
.era--18.is-ativa .e18__digita i { animation: ponto 1.2s var(--ease) 1.4s infinite; }
.era--18.is-ativa .e18__digita i:nth-child(2) { animation-delay: 1.55s; }
.era--18.is-ativa .e18__digita i:nth-child(3) { animation-delay: 1.7s; }

@keyframes era-entra { from { opacity: 0; transform: translateY(1.6cqw) scale(.96); } }

/* 2024: a resposta da IA cita o site */
.era--24 { background: #0f1524; color: #e5e7eb; font-family: var(--font); }

.e24__busca {
  display: flex;
  align-items: center;
  gap: 1.4cqw;
  margin: 4.4cqw 5cqw 0;
  padding: 1.8cqw 3cqw;
  border-radius: 5cqw;
  background: #1c2436;
  font-size: 2.2cqw;
}

.e24__busca::before { content: ""; flex: none; width: 2cqw; height: 2cqw; border: .35cqw solid #9ca3af; border-radius: 50%; }

.e24__ia {
  display: grid;
  gap: 1.3cqw;
  margin: 3cqw 5cqw 0;
  padding: 3cqw;
  border: .2cqw solid rgba(143, 179, 255, .3);
  border-radius: 2cqw;
  background: linear-gradient(135deg, rgba(61, 123, 255, .18), rgba(167, 139, 250, .12));
}

.e24__rotulo { display: flex; align-items: center; gap: 1cqw; color: #c7d2fe; font-size: 2cqw; }

.e24__brilho {
  width: 2.6cqw;
  height: 2.6cqw;
  background: linear-gradient(#8fb3ff, #c4b5fd);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
}

.e24__linha { height: 1.3cqw; border-radius: 1cqw; background: rgba(255, 255, 255, .18); transform-origin: left; }
.e24__linha--curta { width: 62%; }

.e24__fonte {
  display: flex;
  align-items: center;
  gap: 1.2cqw;
  width: fit-content;
  padding: 1cqw 1.8cqw 1cqw 1cqw;
  border: .25cqw solid rgba(242, 185, 64, .75);
  border-radius: 1.6cqw;
  background: #0b1120;
  box-shadow: 0 0 0 .6cqw rgba(242, 185, 64, .12);
}

.e24__fonte i {
  display: grid;
  place-items: center;
  width: 3.6cqw;
  height: 3.6cqw;
  border-radius: 50%;
  background: #8a5a3b;
  color: #fff;
  font-size: 1.8cqw;
  font-style: normal;
  font-weight: 700;
}

.e24__fonte span { display: grid; color: #9ca3af; font-size: 1.6cqw; line-height: 1.3; }
.e24__fonte b { color: #fff; font-size: 1.9cqw; }

.e24__fonte--resultado { margin: 3cqw 5cqw 0; border-color: transparent; background: transparent; box-shadow: none; }
.e24__fonte--resultado b { color: #8fb3ff; }

.e24__trecho { display: block; height: 1.2cqw; margin: 1.4cqw 5cqw 0 10.6cqw; border-radius: 1cqw; background: rgba(255, 255, 255, .1); }
.e24__trecho--curto { width: 46cqw; }

.era--24.is-ativa .e24__linha { animation: escreve .7s var(--ease) both; }
.era--24.is-ativa .e24__linha:nth-of-type(2) { animation-delay: .5s; }
.era--24.is-ativa .e24__linha:nth-of-type(3) { animation-delay: .8s; }
.era--24.is-ativa .e24__linha:nth-of-type(4) { animation-delay: 1.1s; }
.era--24.is-ativa .e24__ia .e24__fonte { animation: cita .7s cubic-bezier(.3, 1.3, .5, 1) 1.6s both; }
.era--24.is-ativa .e24__brilho { animation: brilha 2.4s var(--ease) infinite; }

@keyframes escreve { from { transform: scaleX(0); } }
@keyframes cita { from { opacity: 0; transform: scale(.85); } }
@keyframes brilha { 50% { transform: rotate(90deg) scale(.8); opacity: .6; } }

.era--02.is-ativa .e02__obra { animation: pisca 1s steps(1) .8s infinite; }

/* Os anos: trilho com a linha dourada que avança até o ano escolhido. */
.maquina__legenda { margin-top: 22px; }

.anos { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); }

.anos__trilho { position: absolute; top: 0; left: 10%; right: 10%; height: 2px; background: rgba(143, 179, 255, .2); }

.anos__progresso {
  display: block;
  height: 100%;
  background: var(--gold);
  transform: scaleX(1);
  transform-origin: left;
  transition: transform .8s var(--ease);
}

.anos__ano {
  position: relative;
  z-index: 1;
  min-height: 48px;
  padding: 16px 0 6px;
  border: 0;
  background: none;
  color: var(--muted);
  font: 700 15px/1 var(--font);
  letter-spacing: .08em;
  cursor: pointer;
  transition: color .3s var(--ease);
}

.anos__ano::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 50%;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  border: 2px solid rgba(143, 179, 255, .45);
  border-radius: 50%;
  background: var(--bg-2);
  transition: border-color .3s var(--ease), background-color .3s var(--ease), box-shadow .3s var(--ease);
}

.anos__ano.is-passado::before { border-color: var(--gold); background: var(--gold); }
.anos__ano[aria-pressed="true"] { color: #fff; }
.anos__ano[aria-pressed="true"]::before { border-color: var(--gold); background: var(--gold); box-shadow: 0 0 0 5px rgba(242, 185, 64, .2); }
.anos__ano:hover { color: #fff; }
.anos__ano:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 6px; }

/* Os cinco fatos ocupam o mesmo lugar: a altura não pula quando o ano muda. */
.fatos { display: grid; margin: 14px 0 0; padding: 0; list-style: none; }

.fato {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  color: var(--text-2);
  font-size: 16px;
  line-height: 1.6;
  text-align: center;
  text-wrap: pretty;
  transition: opacity .5s var(--ease), transform .5s var(--ease), visibility 0s .5s;
}

.fato.is-ativo { opacity: 1; visibility: visible; transform: none; transition: opacity .5s var(--ease) .15s, transform .5s var(--ease) .15s, visibility 0s; }
.fato b { margin-right: 10px; color: var(--gold); letter-spacing: .06em; }

@media (min-width: 768px) {
  .virada { padding: 160px var(--gutter) 72px; }
  .virada__chave { font-size: 16px; }
}

@media (min-width: 1100px) {
  .virada { padding: 176px var(--gutter) 84px; }
  .virada__inner { grid-template-columns: .92fr 1.08fr; align-items: center; gap: 60px; }
  .virada__texto { text-align: left; }
  .trilha ol { justify-content: flex-start; }
  .virada__frase { font-size: clamp(44px, 4.2vw, 58px); }
  .virada__lead { margin-left: 0; }
  .fato { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .era, .era.is-ativa, .fato, .fato.is-ativo, .anos__progresso { transition: none; }
  .era *, .era *::before, .era *::after { animation: none !important; }
}

/* ---------- Quem somos: texto de entidade e ficha técnica ---------- */

.quem {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 72px var(--gutter) 80px;
  background: #0d2148;
  color: #fff;
}

.quem::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(rgba(143, 179, 255, .15) 1px, transparent 1.4px);
  background-size: 18px 18px;
  -webkit-mask-image: radial-gradient(ellipse 45% 60% at 85% 40%, #000 10%, transparent 72%);
  mask-image: radial-gradient(ellipse 45% 60% at 85% 40%, #000 10%, transparent 72%);
}

.quem__inner { display: grid; gap: 40px; max-width: 1240px; margin: 0 auto; }
.quem__texto { min-width: 0; }

.quem__rotulo,
.ferramentas__rotulo,
.presenca__rotulo,
.duvida__rotulo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0 0 16px;
  color: #e8c16a;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .22em;
  line-height: 1.2;
  text-transform: uppercase;
}

.quem__rotulo::before,
.quem__rotulo::after,
.ferramentas__rotulo::before,
.ferramentas__rotulo::after,
.presenca__rotulo::before,
.presenca__rotulo::after,
.duvida__rotulo::before,
.duvida__rotulo::after {
  content: "";
  flex: none;
  width: 24px;
  height: 1px;
  background: rgba(242, 185, 64, .7);
}

.quem__titulo,
.ferramentas__titulo,
.presenca__titulo,
.duvida__titulo {
  margin: 0;
  font-size: clamp(28px, 7.6vw, 46px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.012em;
  text-align: center;
  text-wrap: balance;
}

.quem__ouro,
.ferramentas__ouro,
.presenca__ouro,
.duvida__ouro { color: var(--gold); }

.quem__texto > p:not(.quem__rotulo),
.presenca__texto > p:not(.presenca__rotulo) {
  margin: 18px 0 0;
  color: #c8d3e3;
  font-size: 17px;
  line-height: 1.7;
  text-align: justify;
  hyphens: auto;
  text-wrap: pretty;
}

.quem__texto > .quem__titulo + p { margin-top: 24px; }

.quem__texto a {
  padding: 0 1px;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  background: linear-gradient(rgba(242, 185, 64, .45), rgba(242, 185, 64, .45)) 0 100% / 100% 2px no-repeat;
  transition: background-size .3s var(--ease);
}

.quem__texto a:hover { background-size: 100% 45%; }
.quem__texto a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 2px; }

.quem__foto {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 0 0 1px rgba(143, 179, 255, .16), 0 50px 80px -44px rgba(0, 0, 0, .85);
}

.quem__foto img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; transition: transform 1.2s var(--ease); }

/* A ficha: os fatos da empresa em linhas, como um documento. */
.ficha {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid rgba(143, 179, 255, .2);
  border-radius: 16px;
  background: #081628;
  box-shadow: 0 50px 80px -44px rgba(0, 0, 0, .85);
}


.ficha__titulo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 18px 22px 14px;
  border-bottom: 1px solid rgba(143, 179, 255, .16);
  color: var(--gold);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.ficha__selo { color: var(--muted); font-size: 11px; letter-spacing: .16em; }

.ficha__lista { margin: 0; padding: 4px 22px 14px; }

.ficha__item {
  display: grid;
  align-content: start;
  grid-template-columns: 100px 1fr;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px dashed rgba(143, 179, 255, .16);
}

.ficha__item:last-child { border-bottom: 0; }

.ficha__item dt {
  padding-top: 3px;
  color: #6f8fc4;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  line-height: 1.3;
  text-transform: uppercase;
  transition: color .25s var(--ease);
}

.ficha__item dd { margin: 0; color: #fff; font-size: 15.5px; line-height: 1.45; text-wrap: pretty; }

.ficha__nota { color: #fff; text-decoration: none; transition: color .2s var(--ease); }
.ficha__estrelas { margin-right: 8px; color: var(--gold); letter-spacing: .08em; }
.ficha__nota:hover { color: var(--gold); }
.ficha__nota:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 3px; }

@media (hover: hover) and (pointer: fine) {
  .quem__foto:hover img { transform: scale(1.04); }
  .ficha__item:hover dt { color: var(--gold); }
}

@media (min-width: 640px) {
  .quem__texto { max-width: 680px; margin: 0 auto; }
  .ficha__item { grid-template-columns: 120px 1fr; }
}

@media (min-width: 1100px) {
  .quem { padding: 104px var(--gutter) 112px; }
  /* Texto e foto lado a lado (a foto acompanha a altura do texto); a ficha embaixo, de ponta a ponta. */
  .quem__inner { grid-template-columns: 1fr 500px; grid-template-areas: "texto foto" "ficha ficha"; gap: 56px 72px; }
  .quem__texto { grid-area: texto; }
  .quem__foto { grid-area: foto; max-width: none; margin: 0; }
  .quem__foto img { height: 100%; aspect-ratio: auto; }
  .ficha { grid-area: ficha; max-width: none; }
  .ficha__lista { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 36px; padding: 6px 28px 10px; }
  .ficha__item { grid-template-columns: 1fr; gap: 6px; padding: 16px 0; }
  .ficha__item:last-child { border-bottom: 1px dashed rgba(143, 179, 255, .16); }
  .ficha__item:nth-last-child(-n + 3) { border-bottom: 0; }
  .ficha__titulo { padding: 18px 28px 14px; }
  .quem__texto { max-width: none; margin: 0; }
  .quem__rotulo { justify-content: flex-start; font-size: 13.5px; }
  .quem__rotulo::before { width: 34px; }
  .quem__rotulo::after { display: none; }
  .quem__titulo { text-align: left; }
  .quem__texto > p:not(.quem__rotulo) { font-size: 18px; }
}

/* ---------- O diferencial: uma ferramenta própria em cada site (leque de telas reais) ---------- */

.ferramentas {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 72px var(--gutter) 80px;
  background: #081628;
  color: #fff;
}

/* Malha técnica fina no canto e uma luz dourada discreta atrás das telas. */
.ferramentas::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(143, 179, 255, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(143, 179, 255, .06) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: radial-gradient(ellipse 55% 70% at 75% 50%, #000 10%, transparent 75%);
  mask-image: radial-gradient(ellipse 55% 70% at 75% 50%, #000 10%, transparent 75%);
}

.ferramentas::after {
  content: "";
  position: absolute;
  top: 20%;
  right: -10%;
  z-index: -1;
  width: 820px;
  height: 680px;
  background: radial-gradient(closest-side, rgba(242, 185, 64, .1), transparent);
  pointer-events: none;
}

.ferramentas__inner { position: relative; max-width: 1240px; margin: 0 auto; }

.ferramentas__lead {
  max-width: 640px;
  margin: 20px auto 0;
  color: #c8d3e3;
  font-size: 17px;
  line-height: 1.7;
  text-align: justify;
  hyphens: auto;
  text-wrap: pretty;
}

.ferr { margin: 34px 0 0; padding: 0; list-style: none; }

.ferr__item { --pos: 0; display: grid; border-top: 1px solid rgba(143, 179, 255, .16); }
.ferr__item:last-child { border-bottom: 1px solid rgba(143, 179, 255, .16); }

.ferr__botao {
  display: flex;
  align-items: baseline;
  gap: 14px;
  width: 100%;
  padding: 18px 0;
  border: 0;
  background: none;
  color: #c8d3e3;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: color .25s var(--ease);
}

.ferr__n { flex: none; color: #6f8fc4; font-size: 13px; font-weight: 700; letter-spacing: .08em; font-variant-numeric: tabular-nums; transition: color .25s var(--ease); }
.ferr__nome { display: grid; gap: 5px; font-size: 19px; font-weight: 700; line-height: 1.2; }
.ferr__nome small { color: var(--muted); font-size: 13.5px; font-weight: 400; line-height: 1.4; }

.ferr__botao:hover,
.ferr__item.is-ativo .ferr__botao { color: #fff; }
.ferr__item.is-ativo .ferr__n { color: var(--gold); }
.ferr__botao:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 4px; }

/* Detalhe que abre e fecha com suavidade (uma ferramenta por vez). */
.ferr__detalhe {
  order: 2;
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .5s var(--ease);
}

.ferr__corpo { display: grid; min-height: 0; overflow: hidden; }
.ferr__item.is-ativo .ferr__detalhe { grid-template-rows: 1fr; }

.ferr__detalhe p { margin: 0; padding-bottom: 12px; color: #c8d3e3; font-size: 16.5px; line-height: 1.65; text-wrap: pretty; }

.ferr__link {
  justify-self: start;
  margin-bottom: 22px;
  color: var(--gold);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-decoration: none;
  text-transform: uppercase;
}

.ferr__link::after { content: "\2197"; display: inline-block; margin-left: 6px; transition: transform .25s var(--ease); }
.ferr__link:hover { color: #ffd36e; }
.ferr__link:hover::after { transform: translate(2px, -2px); }
.ferr__link:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 3px; }

/* A tela real da ferramenta, numa janela de navegador. */
.ferr__tela {
  order: 1;
  margin: 0 0 16px;
  overflow: hidden;
  border-radius: 12px;
  background: #0b1426;
  box-shadow: 0 0 0 1px rgba(143, 179, 255, .2), 0 30px 60px -30px rgba(0, 0, 0, .85);
}

.ferr__barra {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 12px;
  background: #101c33;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: .03em;
  white-space: nowrap;
  overflow: hidden;
}

.ferr__barra i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: rgba(143, 179, 255, .35); }
.ferr__barra i:last-of-type { margin-right: 8px; }
.ferr__tela img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }

/* Celular e tablet: só a tela da ferramenta aberta aparece, com uma entrada curta. */
.ferr__item:not(.is-ativo) .ferr__tela { display: none; }
.ferr__item.is-ativo .ferr__tela { animation: surge .5s var(--ease) both; }

/* Computador: lista à esquerda e as quatro telas em leque à direita; a escolhida vem para a frente. */
@media (min-width: 1100px) {
  .ferramentas { padding: 104px var(--gutter) 112px; }
  /* A segunda coluna fica livre para as telas, que se posicionam por cima dela. */
  .ferramentas__inner { display: grid; grid-template-columns: minmax(0, 1fr) 56%; column-gap: 56px; align-content: center; min-height: 640px; }
  .ferramentas__cab,
  .ferr { grid-column: 1; }
  .ferramentas__rotulo { justify-content: flex-start; font-size: 13.5px; }
  .ferramentas__rotulo::before { width: 34px; }
  .ferramentas__rotulo::after { display: none; }
  .ferramentas__titulo { text-align: left; }
  .ferramentas__lead { margin-left: 0; }

  .ferr__tela,
  .ferr__item:not(.is-ativo) .ferr__tela {
    position: absolute;
    top: 50%;
    right: 0;
    display: block;
    width: 56%;
    margin: 0;
    cursor: pointer;
    transform-origin: 80% 100%;
    transform: translateY(-50%) translate(calc(var(--pos) * -4.5%), calc(var(--pos) * -6%)) rotate(calc(var(--pos) * -2.6deg)) scale(calc(1 - var(--pos) * .05));
    z-index: calc(10 - var(--pos));
    filter: brightness(calc(1 - var(--pos) * .2));
    animation: none;
    transition: transform .8s var(--ease), filter .8s var(--ease);
  }

  .ferr__item.is-ativo .ferr__tela { cursor: default; animation: none; }
  .ferr__item:not(.is-ativo) .ferr__tela:hover { filter: brightness(calc(1.05 - var(--pos) * .2)); }
}

@media (prefers-reduced-motion: reduce) {
  .ferr__detalhe, .ferr__tela, .ferr__botao, .ferr__n { transition: none; }
  .ferr__item.is-ativo .ferr__tela { animation: none; }
}

/* ---------- Onde estamos e reputação ---------- */

.presenca {
  position: relative;
  padding: 72px var(--gutter) 64px;
  background: #0c1d3a;
  color: #fff;
}

.presenca__inner { display: grid; gap: 36px; max-width: 1240px; margin: 0 auto; }

.presenca__foto {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 18px;
  box-shadow: 0 0 0 1px rgba(143, 179, 255, .16), 0 50px 90px -50px rgba(0, 0, 0, .9);
}

.presenca__foto img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: 70% 50%; transition: transform 1.4s var(--ease); }

.presenca__foto::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(12, 29, 58, .55), transparent 40%);
  pointer-events: none;
}

.reputacao { display: grid; gap: 14px; align-content: start; }

.reputacao__placar {
  display: grid;
  margin-top: 28px;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 18px;
  row-gap: 4px;
  padding: 20px 22px;
  border: 1px solid rgba(242, 185, 64, .3);
  border-radius: 16px;
  background: #081628;
  color: #fff;
  text-decoration: none;
  transition: border-color .3s var(--ease), transform .3s var(--ease);
}

.reputacao__nota { grid-row: span 3; font-size: 58px; font-weight: 700; line-height: 1; letter-spacing: -.02em; }
.reputacao__estrelas { display: flex; gap: 3px; color: var(--gold); font-size: 18px; line-height: 1; }
.reputacao__estrelas i { display: inline-block; font-style: normal; }
.reputacao__total { color: #c8d3e3; font-size: 14.5px; }

.reputacao__ver { color: var(--gold); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.reputacao__ver::after { content: "\2197"; display: inline-block; margin-left: 6px; transition: transform .25s var(--ease); }

.reputacao__placar:hover { border-color: rgba(242, 185, 64, .75); transform: translateY(-2px); }
.reputacao__placar:hover .reputacao__ver::after { transform: translate(2px, -2px); }
.reputacao__placar:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

@media (prefers-reduced-motion: no-preference) {
  .reputacao__estrelas i { animation: cintila 4s var(--ease) infinite; }
  .reputacao__estrelas i:nth-child(2) { animation-delay: .15s; }
  .reputacao__estrelas i:nth-child(3) { animation-delay: .3s; }
  .reputacao__estrelas i:nth-child(4) { animation-delay: .45s; }
  .reputacao__estrelas i:nth-child(5) { animation-delay: .6s; }
}

.citacao {
  margin: 0;
  padding: 18px 20px 18px 22px;
  border-left: 3px solid rgba(242, 185, 64, .65);
  border-radius: 0 12px 12px 0;
  background: rgba(255, 255, 255, .035);
}

.citacao p { margin: 0; color: #e9eef5; font-size: 16.5px; line-height: 1.55; text-wrap: pretty; }
.citacao footer { margin-top: 10px; color: var(--muted); font-size: 13.5px; }
.citacao footer b { display: block; color: #fff; font-size: 14.5px; }
.citacao--destaque p { font-size: 21px; font-weight: 700; line-height: 1.3; }

@media (hover: hover) and (pointer: fine) {
  .presenca__foto:hover img { transform: scale(1.03); }
}

@media (min-width: 768px) {
  .presenca__foto img { aspect-ratio: 21 / 9; object-position: 60% 50%; }
}

@media (min-width: 1100px) {
  .presenca { padding: 104px var(--gutter) 72px; }
  .presenca__inner { grid-template-columns: 1fr 1fr; grid-template-areas: "foto foto" "texto reputacao"; gap: 48px 72px; }
  .presenca__foto { grid-area: foto; }
  .presenca__texto { grid-area: texto; }
  .reputacao { grid-area: reputacao; }
  .presenca__rotulo { justify-content: flex-start; font-size: 13.5px; }
  .presenca__rotulo::before { width: 34px; }
  .presenca__rotulo::after { display: none; }
  .presenca__titulo { text-align: left; }
  .presenca__texto > p:not(.presenca__rotulo) { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .quem__foto img, .presenca__foto img, .reputacao__placar, .reputacao__ver::after { transition: none; }
}

/* =========================================================================
   Página Criação de Sites
   ========================================================================= */

/* Perguntas como títulos (o formato que o Google e as IAs citam): rótulo, pergunta e resposta direta. */
.duvida__resposta {
  margin: 18px 0 0;
  color: #c8d3e3;
  font-size: 17px;
  line-height: 1.7;
  text-align: justify;
  hyphens: auto;
  text-wrap: pretty;
}

.duvida__resposta a,
.versus__nota a,
.item dd a {
  padding: 0 1px;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  background: linear-gradient(rgba(242, 185, 64, .45), rgba(242, 185, 64, .45)) 0 100% / 100% 2px no-repeat;
  transition: background-size .3s var(--ease);
}

.duvida__resposta a:hover,
.versus__nota a:hover,
.item dd a:hover { background-size: 100% 45%; }
.duvida__resposta a:focus-visible,
.versus__nota a:focus-visible,
.item dd a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 2px; }

@media (min-width: 1100px) {
  .duvida__rotulo { justify-content: flex-start; font-size: 13.5px; }
  .duvida__rotulo::before { width: 34px; }
  .duvida__rotulo::after { display: none; }
  .duvida__titulo { text-align: left; }
  .duvida__resposta { font-size: 18px; }
}

/* ---------- Abertura: o site desmontado em camadas ---------- */

.obra,
.vitrine,
.raiox,
.leia,
.fale,
.priv {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 136px var(--gutter) 64px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
}

.obra::before,
.vitrine::before,
.raiox::before,
.leia::before,
.fale::before,
.priv::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(143, 179, 255, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(143, 179, 255, .06) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 72% 55%, #000 10%, transparent 75%);
  mask-image: radial-gradient(ellipse 60% 70% at 72% 55%, #000 10%, transparent 75%);
}

.obra::after,
.vitrine::after,
.raiox::after,
.leia::after,
.fale::after,
.priv::after {
  content: "";
  position: absolute;
  top: 18%;
  right: -8%;
  z-index: -1;
  width: 760px;
  height: 640px;
  background: radial-gradient(closest-side, rgba(61, 123, 255, .22), transparent);
  pointer-events: none;
}

.obra__inner,
.vitrine__inner,
.raiox__inner,
.leia__inner,
.fale__inner,
.priv__inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; max-width: 1240px; margin: 0 auto; }
.obra__texto,
.vitrine__texto,
.raiox__texto,
.leia__texto,
.fale__texto,
.priv__texto { text-align: center; }
.obra__titulo,
.vitrine__titulo,
.raiox__titulo,
.leia__titulo,
.fale__titulo,
.priv__titulo { margin: 0; font-weight: 700; }

.obra__chave,
.vitrine__chave,
.raiox__chave,
.leia__chave,
.fale__chave,
.priv__chave {
  display: block;
  color: #8fb3ff;
  font-size: 15px;
  letter-spacing: .16em;
  line-height: 1.3;
  text-transform: uppercase;
}

.obra__frase,
.vitrine__frase,
.raiox__frase,
.leia__frase,
.fale__frase,
.priv__frase {
  display: block;
  margin-top: 14px;
  font-size: clamp(34px, 8.8vw, 58px);
  line-height: 1.04;
  letter-spacing: -.012em;
  text-wrap: balance;
}

.obra__ouro,
.vitrine__ouro,
.raiox__ouro,
.leia__ouro,
.fale__ouro,
.priv__ouro {
  color: var(--gold);
  white-space: nowrap;
  background: linear-gradient(currentColor, currentColor) 0 96% / 100% .06em no-repeat;
}

.obra__lead,
.vitrine__lead,
.raiox__lead,
.leia__lead,
.fale__lead,
.priv__lead {
  max-width: 580px;
  margin: 20px auto 0;
  color: var(--text-2);
  font-size: 17px;
  line-height: 1.7;
  text-align: justify;
  hyphens: auto;
  text-wrap: pretty;
}

@media (max-width: 419px) {
  :lang(en) :is(.obra__ouro, .vitrine__ouro, .raiox__ouro, .leia__ouro, .fale__ouro, .priv__ouro),
  :lang(es) :is(.obra__ouro, .vitrine__ouro, .raiox__ouro, .leia__ouro, .fale__ouro, .priv__ouro) { white-space: normal; }
}

.obra__cta,
.vitrine__cta,
.raiox__cta,
.leia__cta,
.fale__cta,
.priv__cta,
.custo__cta { margin-top: 26px; }
.obra__cta .orcar__chip::before,
.vitrine__cta .orcar__chip::before,
.raiox__cta .orcar__chip::before,
.leia__cta .orcar__chip::before,
.fale__cta .orcar__chip::before,
.priv__cta .orcar__chip::before { animation: halo 3.2s var(--ease) 1.2s infinite; }

/* A pilha: cada camada é um quadrado girado (vista isométrica); a de cima é a ferramenta. */
.anatomia {
  --lado: 136px;
  --passo: 46px;
  position: relative;
  width: calc(var(--lado) * 1.414 + 150px);
  max-width: 100%;
  margin: 0 auto;
}

.anatomia__pilha {
  position: relative;
  width: calc(var(--lado) * 1.414);
  height: calc(var(--passo) * 5 + var(--lado) * .707);
}

.camada {
  --f: calc((var(--i) - 2.5) * 3px);
  --u: calc(var(--lado) / 100);
  position: absolute;
  left: calc(var(--lado) * .207);
  top: calc(var(--i) * var(--passo) - var(--lado) * .1465);
  z-index: calc(10 - var(--i));
  width: var(--lado);
  height: var(--lado);
  transform: rotateX(60deg) rotateZ(-45deg);
  transition: opacity .35s var(--ease), filter .35s var(--ease);
}

.camada__face {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: start;
  gap: 6%;
  padding: 10%;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 7%;
  background: var(--face, #12284a);
  box-shadow: 5px 5px 0 var(--borda, #081628), 18px 18px 30px rgba(0, 0, 0, .35);
}

/* Ferramenta */
.camada--ferramenta { --face: #13284c; --borda: #8a6a1f; }
.camada--ferramenta .camada__face { border-color: rgba(242, 185, 64, .6); }
.cf__campo { height: calc(var(--u) * 12); border-radius: 6px; background: rgba(255, 255, 255, .2); }
.cf__botao { width: 55%; height: calc(var(--u) * 12); border-radius: 6px; background: var(--gold); }
.cf__resultado { justify-self: end; width: 45%; height: calc(var(--u) * 18); border: 2px solid var(--gold); border-radius: 8px; background: rgba(242, 185, 64, .14); }

/* Design */
.camada--design { --face: #eef2f8; --borda: #9fb0c8; }
.cd__topo { height: calc(var(--u) * 9); border-radius: 4px; background: #0a1a30; }
.cd__hero { height: calc(var(--u) * 32); border-radius: 6px; background: linear-gradient(135deg, #2050a0, #3d7bff 60%, #8fb3ff); }
.cd__cartoes { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * 5); height: calc(var(--u) * 20); }
.cd__cartoes i { border-radius: 5px; background: #d5deeb; }

/* Textos */
.camada--textos { --face: #102a5a; --borda: #071735; }
.ct__titulo { width: 70%; height: calc(var(--u) * 8); border-radius: 4px; background: #fff; }
.ct__titulo--sub { width: 48%; margin-top: 4%; }
.ct__linha { height: calc(var(--u) * 4); border-radius: 3px; background: rgba(200, 211, 227, .5); }
.ct__linha--curta { width: 64%; }

/* Código */
.camada--codigo { --face: #0a1324; --borda: #020610; }
.camada--codigo .camada__face { gap: 7%; }
.camada--codigo i { width: var(--w); height: calc(var(--u) * 5); margin-left: calc(var(--r, 0) * 10%); border-radius: 3px; background: #22d3ee; }
.camada--codigo i:nth-child(2n) { background: #3d7bff; }
.camada--codigo i:nth-child(3n) { background: var(--gold); }

/* SEO e GEO: pontos ligados, como os dados que o Google e as IAs leem */
.camada--busca { --face: #1b1745; --borda: #0d0a26; }
.camada--busca .camada__face { background: radial-gradient(rgba(167, 139, 250, .35) 1.2px, transparent 1.6px) 0 0 / 14px 14px, #1b1745; }
.cb__no { position: absolute; width: 11%; height: 11%; border-radius: 50%; background: #a78bfa; box-shadow: 0 0 0 4px rgba(167, 139, 250, .25), 0 0 16px rgba(167, 139, 250, .8); }
.cb__no--a { top: 18%; left: 20%; }
.cb__no--b { top: 30%; left: 62%; }
.cb__no--c { top: 58%; left: 36%; }
.cb__no--d { top: 70%; left: 72%; }
.cb__no--e { top: 46%; left: 84%; width: 7%; height: 7%; }

/* Publicação */
.camada--publicacao { --face: #0d2a22; --borda: #04130e; }
.camada--publicacao .camada__face { grid-template-columns: repeat(3, 12%); grid-auto-rows: auto; gap: 8%; align-content: center; }
.cp__luz { height: 0; padding-bottom: 100%; border-radius: 50%; background: #25d366; box-shadow: 0 0 12px #25d366; }
.cp__trilho { grid-column: 1 / -1; width: 290%; height: calc(var(--u) * 6); border-radius: 3px; background: rgba(37, 211, 102, .25); }

/* Nomes das camadas, cada um alinhado à ponta direita da sua camada */
.anatomia__nomes { position: absolute; inset: 0 0 0 calc(var(--lado) * 1.414); margin: 0; padding: 0; list-style: none; }

.anatomia__nomes li {
  --cor: var(--gold);
  position: absolute;
  top: calc(var(--i) * var(--passo) + var(--lado) * .3535 - 14px);
  left: 22px;
  display: grid;
  color: #fff;
  font-size: 13px;
  line-height: 1.25;
  transition: opacity .35s var(--ease);
}

.anatomia__nomes li:nth-child(2) { --cor: #3d7bff; }
.anatomia__nomes li:nth-child(3) { --cor: #c8d3e3; }
.anatomia__nomes li:nth-child(4) { --cor: #22d3ee; }
.anatomia__nomes li:nth-child(5) { --cor: #a78bfa; }
.anatomia__nomes li:nth-child(6) { --cor: #25d366; }

.anatomia__nomes li::before {
  content: "";
  position: absolute;
  top: 9px;
  right: calc(100% + 4px);
  width: 18px;
  height: 1px;
  background: linear-gradient(90deg, var(--cor), rgba(255, 255, 255, .3));
}

.anatomia__nomes li::after {
  content: "";
  position: absolute;
  top: 6px;
  left: -28px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cor);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .08);
}

.anatomia__nomes b { font-weight: 700; }
.anatomia__nomes span { color: var(--muted); font-size: 11.5px; }

/* Passar o mouse num nome acende a camada dele e apaga as outras. */
@media (hover: hover) and (pointer: fine) {
  .anatomia__nomes li { cursor: default; }
  .anatomia:has(.anatomia__nomes li:hover) .camada { opacity: .32; filter: saturate(.6); }
  .anatomia:has(.anatomia__nomes li:hover) .anatomia__nomes li:not(:hover) { opacity: .45; }
  .anatomia:has(.anatomia__nomes li:nth-child(1):hover) .camada:nth-child(1),
  .anatomia:has(.anatomia__nomes li:nth-child(2):hover) .camada:nth-child(2),
  .anatomia:has(.anatomia__nomes li:nth-child(3):hover) .camada:nth-child(3),
  .anatomia:has(.anatomia__nomes li:nth-child(4):hover) .camada:nth-child(4),
  .anatomia:has(.anatomia__nomes li:nth-child(5):hover) .camada:nth-child(5),
  .anatomia:has(.anatomia__nomes li:nth-child(6):hover) .camada:nth-child(6) { opacity: 1; filter: drop-shadow(0 0 18px rgba(143, 179, 255, .55)); }
}

/* Ao abrir, as camadas descem uma a uma; no computador a pilha respira devagar. */
@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
  .camada { animation: camada-entra .8s var(--ease) calc(.2s + var(--i) * .13s) both; }
  .anatomia__nomes li { animation: surge .6s var(--ease) calc(.6s + var(--i) * .13s) both; }
}

@media (min-width: 1100px) and (prefers-reduced-motion: no-preference) {
  .camada { animation: camada-entra .8s var(--ease) calc(.2s + var(--i) * .13s) both, camada-respira 7s ease-in-out 1.8s infinite; }
}

@keyframes camada-entra { from { opacity: 0; translate: 0 -56px; } }
@keyframes camada-respira { 50% { translate: 0 var(--f); } }

/* Celular estreito: pilha menor para os nomes caberem ao lado. */
@media (max-width: 374px) {
  .anatomia { --lado: 112px; --passo: 40px; width: calc(var(--lado) * 1.414 + 128px); }
  .anatomia__nomes li { left: 16px; font-size: 12px; }
  .anatomia__nomes li::before { width: 12px; }
  .anatomia__nomes li::after { left: -20px; }
  .anatomia__nomes span { font-size: 10.5px; }
}

@media (min-width: 400px) {
  .anatomia { --lado: 150px; --passo: 50px; }
}

@media (min-width: 768px) {
  .obra,
  .vitrine,
  .raiox,
  .leia,
  .fale,
  .priv { padding: 160px var(--gutter) 72px; }
  .obra__chave,
  .vitrine__chave,
  .raiox__chave,
  .leia__chave,
  .fale__chave,
  .priv__chave { font-size: 16px; }
  .anatomia { --lado: 200px; --passo: 64px; width: calc(var(--lado) * 1.414 + 230px); }
  .anatomia__nomes li { left: 30px; font-size: 15.5px; }
  .anatomia__nomes li::before { width: 24px; }
  .anatomia__nomes li::after { left: -36px; }
  .anatomia__nomes span { font-size: 13px; }
}

@media (min-width: 1100px) {
  .obra,
  .vitrine,
  .raiox,
  .leia,
  .fale,
  .priv { padding: 176px var(--gutter) 90px; }
  .obra__inner,
  .vitrine__inner,
  .raiox__inner,
  .leia__inner,
  .fale__inner,
  .priv__inner { grid-template-columns: 1fr 1fr; align-items: center; gap: 56px; }
  .obra__texto,
  .vitrine__texto,
  .raiox__texto,
  .leia__texto,
  .fale__texto,
  .priv__texto { text-align: left; }
  .obra .trilha ol,
  .vitrine .trilha ol,
  .raiox .trilha ol,
  .leia .trilha ol,
  .fale .trilha ol,
  .priv .trilha ol { justify-content: flex-start; }
  .obra__frase,
  .vitrine__frase,
  .raiox__frase,
  .leia__frase,
  .fale__frase,
  .priv__frase { font-size: clamp(44px, 4.2vw, 58px); }
  .obra__lead,
  .vitrine__lead,
  .raiox__lead,
  .leia__lead,
  .fale__lead,
  .priv__lead { margin-left: 0; }
  .anatomia { --lado: 220px; --passo: 74px; margin: 0 0 0 auto; }
}

@media (prefers-reduced-motion: reduce) {
  .obra__cta .orcar__chip::before,
  .vitrine__cta .orcar__chip::before,
  .raiox__cta .orcar__chip::before,
  .leia__cta .orcar__chip::before,
  .fale__cta .orcar__chip::before,
  .priv__cta .orcar__chip::before { animation: none; }
  .camada, .anatomia__nomes li { transition: none; }
}

/* ---------- Como começa: o que precisa e a prévia que se aprova ---------- */

.comeco {
  position: relative;
  padding: 72px var(--gutter) 80px;
  background: #0f2758;
  color: #fff;
}

.comeco::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(143, 179, 255, .14) 1px, transparent 1.4px);
  background-size: 18px 18px;
  -webkit-mask-image: radial-gradient(ellipse 50% 60% at 80% 60%, #000 10%, transparent 70%);
  mask-image: radial-gradient(ellipse 50% 60% at 80% 60%, #000 10%, transparent 70%);
  pointer-events: none;
}

.comeco__inner { position: relative; display: grid; gap: 64px; max-width: 1240px; margin: 0 auto; }
.duvida { min-width: 0; }

/* O que não precisa (riscado) e o que basta (com check dourado). */
.lista-dupla { display: grid; gap: 14px; margin-top: 26px; }

.lista-dupla__col {
  padding: 20px 22px;
  border: 1px solid rgba(143, 179, 255, .16);
  border-radius: 14px;
  background: rgba(8, 22, 40, .45);
}

.lista-dupla__col--sim { border-color: rgba(242, 185, 64, .4); background: rgba(242, 185, 64, .06); }

.lista-dupla__rotulo { margin: 0 0 12px; color: var(--muted); font-size: 11.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.lista-dupla__col--sim .lista-dupla__rotulo { color: var(--gold); }

.lista-dupla ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }

.lista-dupla li {
  position: relative;
  padding-left: 26px;
  color: #fff;
  font-size: 16px;
  line-height: 1.4;
}

.lista-dupla__col--nao li { color: var(--muted); }

.lista-dupla s {
  text-decoration: none;
  background: linear-gradient(rgba(255, 255, 255, .55), rgba(255, 255, 255, .55)) 0 55% / 100% 1.5px no-repeat;
}

.lista-dupla__col--nao li::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 0;
  width: 14px;
  height: 14px;
  background: linear-gradient(45deg, transparent 45%, rgba(255, 255, 255, .45) 45% 55%, transparent 55%), linear-gradient(-45deg, transparent 45%, rgba(255, 255, 255, .45) 45% 55%, transparent 55%);
}

.lista-dupla__col--sim li::before {
  content: "";
  position: absolute;
  top: 1px;
  left: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230a1a30' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8.5l2.6 2.6L12 5.5'/%3E%3C/svg%3E") center / 12px no-repeat;
}

/* A prévia de exemplo: aprovar tira a marca d'água e bate o carimbo. */
.aprova { margin-top: 26px; }

.aprova__janela {
  overflow: hidden;
  border-radius: 12px;
  background: #0b1426;
  box-shadow: 0 0 0 1px rgba(143, 179, 255, .22), 0 40px 70px -36px rgba(0, 0, 0, .85);
}

.aprova__barra {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 30px;
  padding: 0 12px;
  background: #101c33;
  color: var(--muted);
  font-size: 11.5px;
  white-space: nowrap;
  overflow: hidden;
}

.aprova__barra i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: rgba(143, 179, 255, .35); }
.aprova__barra span { margin-left: 8px; }

.aprova__tela {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #f7f8fb;
  color: #0a1a30;
  font-family: var(--font);
  container-type: inline-size;
}

.av__topo { display: flex; align-items: center; gap: 3cqw; height: 9cqw; padding: 0 4cqw; border-bottom: .2cqw solid #e3e8f0; }
.av__topo b { font-size: 3.2cqw; letter-spacing: .04em; text-transform: uppercase; }
.av__menu { display: flex; gap: 2cqw; margin-left: auto; }
.av__menu i { width: 6cqw; height: 1cqw; border-radius: 1cqw; background: #c4cddb; }
.av__botao { width: 12cqw; height: 4.4cqw; border-radius: 1cqw; background: #e8590c; }

.av__hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 4cqw; padding: 5cqw 4cqw 3cqw; }
.av__texto { display: grid; align-content: start; gap: 1.8cqw; }
.av__chave { width: 16cqw; height: 1.2cqw; border-radius: 1cqw; background: #e8590c; }
.av__texto b { font-size: 4.2cqw; line-height: 1.08; }
.av__linha { width: 90%; height: 1.2cqw; border-radius: 1cqw; background: #cfd7e4; }
.av__cta { width: 22cqw; height: 5cqw; border-radius: 1cqw; background: #0a1a30; }
.av__foto { border-radius: 1.4cqw; background: linear-gradient(160deg, rgba(10, 26, 48, .1), rgba(10, 26, 48, .55)), linear-gradient(120deg, #6b7f99, #b8c4d4 45%, #47586e); }

.av__cartoes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3cqw; padding: 0 4cqw; }
.av__cartoes i { height: 12cqw; border-radius: 1.4cqw; background: #fff; box-shadow: 0 .6cqw 1.6cqw rgba(10, 26, 48, .08); }

.aprova__marca {
  position: absolute;
  top: 50%;
  left: 50%;
  padding: 1cqw 4cqw;
  border: .5cqw solid rgba(10, 26, 48, .22);
  border-radius: 1.4cqw;
  color: rgba(10, 26, 48, .22);
  font-size: 9cqw;
  font-weight: 700;
  letter-spacing: .3em;
  text-transform: uppercase;
  transform: translate(-50%, -50%) rotate(-14deg);
  transition: opacity .4s var(--ease);
}

.aprova__carimbo {
  position: absolute;
  right: 6%;
  bottom: 8%;
  width: 28cqw;
  height: 28cqw;
  color: #2050a0;
  overflow: visible;
  opacity: 0;
  transform: rotate(-12deg) scale(1.6);
  pointer-events: none;
}

.aprova.is-aprovada .aprova__marca { opacity: 0; }
.aprova.is-aprovada .aprova__carimbo { opacity: .92; transform: rotate(-12deg) scale(1); transition: transform .45s cubic-bezier(.3, 1.3, .5, 1), opacity .2s; }

.aprova__acao { display: grid; justify-items: center; gap: 12px; margin-top: 18px; text-align: center; }

.aprova__botao {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 46px;
  padding: 3px 20px 3px 3px;
  border: 1px solid rgba(242, 185, 64, .45);
  border-radius: 11px;
  background: rgba(242, 185, 64, .08);
  color: #fff6e3;
  font: 700 13.5px/1 var(--font);
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .25s var(--ease), background-color .2s var(--ease), border-color .2s var(--ease), box-shadow .25s var(--ease);
}

.aprova__check {
  display: grid;
  place-items: center;
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: var(--gold);
  color: #1a1203;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35);
  transition: background-color .3s var(--ease);
}

.aprova__check svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.aprova__botao:hover { background: rgba(242, 185, 64, .15); border-color: rgba(242, 185, 64, .75); transform: translateY(-1px); box-shadow: 0 12px 26px -16px rgba(242, 185, 64, .6); }
.aprova__botao:active { transform: translateY(0); transition-duration: .08s; }
.aprova__botao:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.aprova.is-aprovada .aprova__check { background: #25d366; color: #04210f; }

.aprova__status { margin: 0; color: var(--text-2); font-size: 15px; line-height: 1.5; text-wrap: balance; }
.aprova.is-aprovada .aprova__status { color: #fff; }

@media (min-width: 640px) and (max-width: 1099px) {
  .lista-dupla { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1100px) {
  .comeco { padding: 104px var(--gutter) 112px; }
  .comeco__inner { grid-template-columns: 1fr 1fr; gap: 0; }
  .duvida--precisa { padding-right: 56px; border-right: 1px solid rgba(143, 179, 255, .16); }
  .lista-dupla { gap: 16px; margin-top: 30px; }
  .lista-dupla__col { padding: 24px 26px; }
  .lista-dupla li { font-size: 17px; }
  .duvida--previa { padding-left: 56px; }
  .aprova__acao { grid-template-columns: auto 1fr; justify-items: start; align-items: center; gap: 18px; text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .aprova__marca, .aprova__carimbo, .aprova.is-aprovada .aprova__carimbo, .aprova__botao, .aprova__check { transition: none; }
}

/* ---------- Prazo: 15 dias depois da assinatura ---------- */

.prazo {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 72px var(--gutter) 80px;
  background: #081628;
  color: #fff;
}

.prazo::after {
  content: "";
  position: absolute;
  top: -10%;
  left: -6%;
  z-index: -1;
  width: 640px;
  height: 560px;
  background: radial-gradient(closest-side, rgba(242, 185, 64, .1), transparent);
  pointer-events: none;
}

.prazo__inner { display: grid; gap: 28px; max-width: 1240px; margin: 0 auto; }

.prazo__numero { display: flex; align-items: flex-end; justify-content: center; gap: 12px; line-height: .8; }

.prazo__numero b {
  color: transparent;
  font-size: clamp(120px, 34vw, 210px);
  font-weight: 700;
  letter-spacing: -.04em;
  -webkit-text-stroke: 2px var(--gold);
}

.prazo__numero span { padding-bottom: 6px; color: var(--gold); font-size: 22px; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; }
.prazo__texto { max-width: 680px; margin: 0 auto; }

/* A régua: a prévia vem antes; depois da assinatura, quinze dias que se acendem em onda. */
.regua15 { position: relative; display: grid; gap: 10px; padding-bottom: 30px; }

.regua15__antes {
  display: grid;
  place-items: center;
  min-height: 44px;
  padding: 0 14px;
  border: 1px dashed rgba(143, 179, 255, .4);
  border-radius: 8px;
  background: repeating-linear-gradient(-45deg, rgba(143, 179, 255, .08) 0 6px, transparent 6px 12px);
  color: #c8d3e3;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-align: center;
  text-transform: uppercase;
}

.regua15__dias { display: grid; grid-template-columns: repeat(15, 1fr); gap: 3px; margin: 0; padding: 0; list-style: none; }

.regua15__dias li {
  display: grid;
  place-items: end center;
  height: 44px;
  padding-bottom: 5px;
  border-radius: 5px;
  background: rgba(143, 179, 255, .1);
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.regua15__dias li:last-child { background: rgba(37, 211, 102, .2); color: #fff; }

.regua15__marco {
  position: absolute;
  bottom: 0;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.regua15__marco::before { content: ""; position: absolute; bottom: 100%; width: 1px; height: 10px; background: rgba(143, 179, 255, .5); }
.regua15__marco--inicio { left: 0; }
.regua15__marco--inicio::before { left: 0; }
.regua15__marco--fim { right: 0; color: #25d366; }
.regua15__marco--fim::before { right: 0; background: #25d366; }

@media (prefers-reduced-motion: no-preference) {
  .regua15__dias li { animation: dia 6s var(--ease) calc(var(--d) * .22s) infinite; }
}

@keyframes dia {
  0%, 10% { background: rgba(143, 179, 255, .1); color: var(--muted); }
  14%, 82% { background: rgba(242, 185, 64, .85); color: #0a1a30; }
  100% { background: rgba(143, 179, 255, .1); color: var(--muted); }
}

@media (min-width: 640px) {
  .regua15 { grid-template-columns: minmax(130px, 17%) 1fr; }
  .regua15__dias { gap: 5px; }
  .regua15__dias li { height: 56px; font-size: 12px; }
  .regua15__marco--inicio { left: calc(17% + 10px); }
  .regua15__antes { min-height: 56px; }
}

@media (min-width: 1100px) {
  .prazo { padding: 104px var(--gutter) 112px; }
  .prazo__inner { grid-template-columns: auto 1fr; grid-template-areas: "numero texto" "regua regua"; align-items: center; column-gap: 64px; row-gap: 56px; }
  .prazo__numero { grid-area: numero; }
  .prazo__texto { grid-area: texto; max-width: 720px; margin: 0; }
  .regua15 { grid-area: regua; }
}

/* ---------- O que está incluído: as camadas explicadas, com a mesma cor da abertura ---------- */

.incluso {
  position: relative;
  padding: 72px var(--gutter) 80px;
  background: #0d2148;
  color: #fff;
}

.incluso__inner { display: grid; gap: 40px; max-width: 1240px; margin: 0 auto; }

.incluso__foto {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 0 0 1px rgba(143, 179, 255, .16), 0 50px 80px -44px rgba(0, 0, 0, .85);
}

.incluso__foto img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; transition: transform 1.2s var(--ease); }

.itens { margin: 26px 0 0; }

.item {
  position: relative;
  padding: 16px 0 16px 28px;
  border-top: 1px dashed rgba(143, 179, 255, .18);
}

.item::before {
  content: "";
  position: absolute;
  top: 22px;
  left: 0;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: var(--cor);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .05), 0 0 14px var(--cor);
}

.item dt { font-size: 18px; font-weight: 700; line-height: 1.3; }
.item dd { margin: 6px 0 0; color: #c8d3e3; font-size: 16px; line-height: 1.6; text-wrap: pretty; }

.incluso__nota {
  margin: 22px 0 0;
  padding: 16px 18px;
  border-left: 3px solid var(--gold);
  border-radius: 0 12px 12px 0;
  background: rgba(255, 255, 255, .04);
  color: #c8d3e3;
  font-size: 15.5px;
  line-height: 1.6;
}

.incluso__nota b { color: #fff; }

@media (hover: hover) and (pointer: fine) {
  .incluso__foto:hover img { transform: scale(1.04); }
  .item:hover::before { transform: scale(1.25); }
  .item::before { transition: transform .3s var(--ease); }
}

@media (min-width: 1100px) {
  .incluso { padding: 104px var(--gutter) 112px; }
  .incluso__inner { grid-template-columns: 440px 1fr; align-items: stretch; gap: 72px; }
  .incluso__foto { max-width: none; margin: 0; }
  .incluso__foto img { height: 100%; aspect-ratio: auto; }
  .itens { display: grid; grid-template-columns: 1fr 1fr; column-gap: 36px; }
}

/* ---------- Tipos de site: tabela com exemplos reais ---------- */

.tipos {
  padding: 72px var(--gutter) 80px;
  background: #0a1a30;
  color: #fff;
}

.tipos__inner { max-width: 1240px; margin: 0 auto; }
.tipos__cab { max-width: 760px; margin: 0 auto; }

.tabela { width: 100%; margin-top: 34px; border-collapse: collapse; }

.tabela thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.tabela tr {
  display: grid;
  gap: 6px;
  margin-bottom: 12px;
  padding: 18px 20px;
  border: 1px solid rgba(143, 179, 255, .16);
  border-radius: 14px;
  background: rgba(255, 255, 255, .03);
}

.tabela th,
.tabela td { display: block; padding: 0; text-align: left; }

.tabela tbody th { color: #fff; font-size: 19px; font-weight: 700; }
.tabela td { color: #c8d3e3; font-size: 16px; line-height: 1.55; }

.tabela td::before {
  content: attr(data-rotulo);
  display: block;
  margin: 8px 0 2px;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.tabela td a { color: var(--gold); font-weight: 700; text-decoration: none; }
.tabela td a::after { content: "\2197"; display: inline-block; margin-left: 5px; transition: transform .25s var(--ease); }
.tabela td a:hover { color: #ffd36e; }
.tabela td a:hover::after { transform: translate(2px, -2px); }
.tabela td a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 3px; }
.tabela td small { display: block; color: var(--muted); font-size: 14px; }

@media (min-width: 900px) {
  .tabela thead { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .tabela { display: table; border-collapse: separate; border-spacing: 0; }
  .tabela tr { display: table-row; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; }
  .tabela th, .tabela td { display: table-cell; padding: 20px 22px; border-bottom: 1px solid rgba(143, 179, 255, .14); vertical-align: top; }
  .tabela td::before { display: none; }
  .tabela thead th { padding-top: 0; padding-bottom: 14px; color: var(--muted); font-size: 11.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; border-bottom-color: rgba(143, 179, 255, .3); }
  .tabela tbody th { width: 26%; box-shadow: inset 3px 0 0 transparent; transition: box-shadow .3s var(--ease), background-color .3s var(--ease); }
  .tabela tbody td:last-child { width: 30%; }
  .tabela tbody tr:hover th,
  .tabela tbody tr:hover td { background: rgba(255, 255, 255, .03); }
  .tabela tbody tr:hover th { box-shadow: inset 3px 0 0 var(--gold); }
}

@media (min-width: 1100px) {
  .tipos { padding: 104px var(--gutter) 112px; }
  .tipos__cab { margin: 0; }
}

/* ---------- Quanto custa: a resposta e o "orçamento" que mostra o que muda o valor ---------- */

.custo {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 72px var(--gutter) 88px;
  background: #0f2758;
  color: #fff;
}

.custo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(143, 179, 255, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(143, 179, 255, .06) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: radial-gradient(ellipse 45% 70% at 78% 50%, #000 10%, transparent 72%);
  mask-image: radial-gradient(ellipse 45% 70% at 78% 50%, #000 10%, transparent 72%);
}

.custo__inner { display: grid; gap: 48px; max-width: 1240px; margin: 0 auto; }
.custo__texto { text-align: center; }
.custo__texto .duvida__resposta { text-align: justify; }

/* O recibo: papel claro, levemente torto, com a borda de baixo picotada. */
.recibo {
  --papel: #f6f3ec;
  position: relative;
  width: 100%;
  max-width: 420px;
  margin: 0 auto 12px;
  padding: 26px 24px 22px;
  border-radius: 6px 6px 0 0;
  background: var(--papel);
  color: #1d2a3d;
  box-shadow: 0 40px 60px -30px rgba(0, 0, 0, .7);
  transform: rotate(-1.6deg);
  transition: transform .5s var(--ease);
}

.recibo::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 12px;
  background:
    linear-gradient(135deg, var(--papel) 50%, transparent 50%) 0 0 / 16px 12px repeat-x,
    linear-gradient(-135deg, var(--papel) 50%, transparent 50%) 0 0 / 16px 12px repeat-x;
}

.recibo__titulo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 0 0 14px;
  padding-bottom: 12px;
  border-bottom: 2px solid #1d2a3d;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.recibo__titulo span { color: #6b7a90; font-size: 11px; letter-spacing: .18em; }

.recibo__itens { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }

.recibo__itens li { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 8px; font-size: 15px; }
.recibo__itens i { border-bottom: 2px dotted #b9c1cd; transform: translateY(-4px); }
.recibo__itens b { color: #4a5a70; font-size: 13px; font-weight: 700; letter-spacing: .04em; }
.recibo__gratis { margin-top: 6px; padding-top: 12px; border-top: 1px dashed #b9c1cd; font-weight: 700; }
.recibo__gratis b { color: #0f9d58; font-size: 15px; text-transform: uppercase; letter-spacing: .12em; }

.recibo__rodape { margin: 16px 0 0; color: #6b7a90; font-size: 13px; text-align: center; }

@media (hover: hover) and (pointer: fine) {
  .recibo:hover { transform: rotate(0deg) translateY(-4px); }
}

@media (min-width: 1100px) {
  .custo { padding: 104px var(--gutter) 120px; }
  .custo__inner { grid-template-columns: 1fr 440px; align-items: center; gap: 96px; }
  .custo__texto { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .recibo, .incluso__foto img, .tabela tbody th, .item::before { transition: none; }
}

/* =========================================================================
   Página Marketing Digital (a abertura usa as regras da .obra, acima)
   ========================================================================= */

/* ---------- Abertura: o Perfil da Empresa antes e depois (dois botões alternam o cartão) ---------- */

.perfil { width: 100%; max-width: 420px; margin: 0 auto; }

.perfil__alternar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  width: 240px;
  margin: 0 auto 14px;
  padding: 4px;
  border: 1px solid rgba(143, 179, 255, .2);
  border-radius: 11px;
  background: #081628;
}

.perfil__botao {
  min-height: 40px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font: 700 13px/1 var(--font);
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .3s var(--ease), color .3s var(--ease);
}

.perfil__botao:hover { color: #fff; }
.perfil__botao[aria-pressed="true"] { background: #12284a; color: #fff; box-shadow: inset 0 0 0 1px rgba(143, 179, 255, .25); }
.perfil__botao[data-estado="depois"][aria-pressed="true"] { background: #15803d; box-shadow: none; }
.perfil__botao:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.perfil__palco {
  position: relative;
  display: grid;
  overflow: hidden;
  border-radius: 18px;
  box-shadow: 0 0 0 1px rgba(143, 179, 255, .2), 0 50px 90px -40px rgba(0, 0, 0, .9), 0 0 80px -24px rgba(61, 123, 255, .4);
}

.pf {
  grid-area: 1 / 1;
  display: grid;
  grid-template-rows: auto 1fr;
  background: #fff;
  color: #1f2937;
  font-family: var(--font);
}

/* Os dois cartões ocupam o mesmo lugar; o estado do palco decide qual aparece. */
.pf { transition: opacity .6s var(--ease), visibility 0s .6s; }
.perfil__palco[data-estado="depois"] .pf--antes,
.perfil__palco[data-estado="antes"] .pf--depois { opacity: 0; visibility: hidden; }
.perfil__palco[data-estado="depois"] .pf--depois,
.perfil__palco[data-estado="antes"] .pf--antes { transition: opacity .6s var(--ease), visibility 0s; }

/* No depois, o que mudou dá um pulso dourado ao aparecer. */
.perfil__palco[data-estado="depois"] .pf__nota,
.perfil__palco[data-estado="depois"] .pf__categoria--ok,
.perfil__palco[data-estado="depois"] .pf__info--ok,
.perfil__palco[data-estado="depois"] .pf__botoes,
.perfil__palco[data-estado="depois"] .pf__resposta { animation: pf-muda 1.2s var(--ease) .3s both; }

@keyframes pf-muda { 0% { background-color: rgba(242, 185, 64, 0); } 30% { background-color: rgba(242, 185, 64, .28); } 100% { background-color: rgba(242, 185, 64, 0); } }

.pf__capa { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 3px; height: 136px; }
.pf__capa i:first-child { grid-row: span 2; background: radial-gradient(circle at 70% 30%, rgba(255, 196, 120, .55), transparent 45%), linear-gradient(135deg, #1e2a3c, #3a4c66 60%, #6b7a90); }
.pf__capa i:nth-child(2) { background: linear-gradient(160deg, #f0b45c, #b4652a 70%); }
.pf__capa i:nth-child(3) { background: linear-gradient(200deg, #9fb2c8, #44566e); }

.pf__capa--vazia { display: grid; place-items: center; background: repeating-linear-gradient(45deg, #eceff3 0 10px, #e3e7ec 10px 20px); color: #9ca3af; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

.pf__corpo { display: grid; align-content: start; gap: 8px; padding: 16px 18px 20px; }
.pf__nome { color: #111827; font-size: 21px; line-height: 1.15; }
.pf__nota { display: flex; align-items: center; gap: 7px; color: #374151; font-size: 14px; }
.pf__nota b { color: #111827; }
.pf__nota small { color: #6b7280; font-size: 13px; }

/* Estrelas preenchidas pela nota (máscara com 5 estrelas). */
.pf__estrelas {
  --nota: 5;
  display: inline-block;
  width: 72px;
  height: 13px;
  background: linear-gradient(90deg, #f59e0b calc(var(--nota) / 5 * 100%), #d1d5db 0);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 13'%3E%3Cpath d='M7 0l2 4.3 4.7.6-3.4 3.2.9 4.7L7 10.5 2.8 12.8l.9-4.7L.3 4.9 5 4.3z'/%3E%3C/svg%3E") 0 0 / 14.4px 13px repeat-x;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 13'%3E%3Cpath d='M7 0l2 4.3 4.7.6-3.4 3.2.9 4.7L7 10.5 2.8 12.8l.9-4.7L.3 4.9 5 4.3z'/%3E%3C/svg%3E") 0 0 / 14.4px 13px repeat-x;
}

.pf__categoria,
.pf__info { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: #4b5563; font-size: 13.5px; }
.pf__info--ok b { color: #15803d; }

/* Marcações didáticas: o que está errado no antes e certo no depois. */
.pf__categoria--erro::after,
.pf__info--erro::after {
  content: "corrigir";
  padding: 2px 7px;
  border-radius: 999px;
  background: #fee2e2;
  color: #b91c1c;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.pf__categoria--erro::after { content: "categoria errada"; }
:lang(en) .pf__info--erro::after { content: "fix"; }
:lang(en) .pf__categoria--erro::after { content: "wrong category"; }
:lang(es) .pf__info--erro::after { content: "corregir"; }
:lang(es) .pf__categoria--erro::after { content: "categoría equivocada"; }
.pf__info--erro { color: #b91c1c; }

.pf__categoria--ok::after {
  content: "\2713";
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #dcfce7;
  color: #15803d;
  font-size: 10px;
  font-weight: 700;
}

.pf__botoes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }

.pf__botoes span {
  padding: 7px 12px;
  border: 1px solid #d1d5db;
  border-radius: 999px;
  color: #1d4ed8;
  font-size: 12.5px;
  font-weight: 700;
}

.pf__botoes .is-site { border-color: #1d4ed8; background: #1d4ed8; color: #fff; }
.pf__botoes .is-zap { border-color: #25d366; background: #25d366; color: #04210f; }

.pf__avaliacao { display: grid; gap: 4px; margin-top: 6px; padding-top: 12px; border-top: 1px solid #e5e7eb; color: #374151; font-size: 13.5px; line-height: 1.45; }
.pf__avaliacao p { margin: 0; }
.pf__avaliacao small { color: #9ca3af; font-size: 12px; }
.pf--antes .pf__avaliacao small { color: #b91c1c; }
.pf__autor { display: flex; align-items: center; gap: 8px; }
.pf__autor b { color: #111827; }
.pf__autor .pf__estrelas { width: 58px; height: 11px; -webkit-mask-size: 11.6px 11px; mask-size: 11.6px 11px; }

.pf__resposta { display: grid; gap: 2px; margin-top: 4px; padding: 8px 10px; border-radius: 8px; background: #f3f4f6; color: #374151; font-size: 12.5px; }
.pf__resposta b { color: #111827; font-size: 12px; }

.perfil__legenda { margin-top: 14px; color: var(--muted); font-size: 13.5px; line-height: 1.5; text-align: center; text-wrap: balance; }

@media (min-width: 1100px) {
  .perfil { max-width: 440px; margin: 0 0 0 auto; }
}

/* ---------- As frentes: painel de chaves ligadas ---------- */

.frentes {
  position: relative;
  padding: 72px var(--gutter) 80px;
  background: #0f2758;
  color: #fff;
}

.frentes__inner { display: grid; gap: 34px; max-width: 1240px; margin: 0 auto; }

.painel {
  margin: 0;
  padding: 6px 0;
  overflow: hidden;
  border: 1px solid rgba(143, 179, 255, .18);
  border-radius: 18px;
  background: #081628;
  list-style: none;
  box-shadow: 0 50px 80px -48px rgba(0, 0, 0, .85);
}

.painel__item {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 16px;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(143, 179, 255, .12);
  transition: background-color .3s var(--ease);
}

.painel__item:last-child { border-bottom: 0; }
.painel__texto h3 { margin: 0; font-size: 18px; line-height: 1.3; }
.painel__texto p { margin: 6px 0 0; color: #c8d3e3; font-size: 15.5px; line-height: 1.6; text-wrap: pretty; }

.painel__texto a {
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  background: linear-gradient(rgba(242, 185, 64, .45), rgba(242, 185, 64, .45)) 0 100% / 100% 2px no-repeat;
  transition: background-size .3s var(--ease);
}

.painel__texto a:hover { background-size: 100% 45%; }
.painel__texto a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 2px; }

/* A chave ligada, no verde de "está funcionando". */
.chave {
  position: relative;
  width: 44px;
  height: 26px;
  margin-top: 1px;
  border-radius: 13px;
  background: #1f9d55;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .35), 0 0 0 1px rgba(37, 211, 102, .35);
  transition: box-shadow .3s var(--ease);
}

.chave::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 21px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .35);
  transition: transform .3s var(--ease);
}

@media (hover: hover) and (pointer: fine) {
  .painel__item:hover { background: rgba(255, 255, 255, .03); }
  .painel__item:hover .chave { box-shadow: inset 0 1px 3px rgba(0, 0, 0, .35), 0 0 0 1px rgba(37, 211, 102, .5), 0 0 18px rgba(37, 211, 102, .45); }
  .painel__item:hover .chave::after { transform: scale(1.08); }
}

@media (min-width: 1100px) {
  .frentes { padding: 104px var(--gutter) 112px; }
  .frentes__inner { gap: 44px; }
  .frentes__cab { max-width: 780px; }
  /* Duas colunas de chaves, de ponta a ponta. */
  .painel { display: grid; grid-template-columns: 1fr 1fr; padding: 0; }
  .painel__item { padding: 26px 30px; }
  .painel__item:nth-child(odd) { border-right: 1px solid rgba(143, 179, 255, .12); }
  .painel__item:nth-last-child(-n + 2) { border-bottom: 0; }
}

/* ---------- O ciclo de todo mês ---------- */

.ciclo {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 72px var(--gutter) 80px;
  background: #081628;
  color: #fff;
}

.ciclo::after {
  content: "";
  position: absolute;
  top: 10%;
  right: -10%;
  z-index: -1;
  width: 720px;
  height: 640px;
  background: radial-gradient(closest-side, rgba(242, 185, 64, .09), transparent);
  pointer-events: none;
}

.ciclo__inner { display: grid; gap: 48px; max-width: 1240px; margin: 0 auto; }

/* --raio vale para o aro (r em % da diagonal do viewBox) e para a posição dos quatro passos. */
.roda { --raio: 31%; position: relative; width: min(100%, 460px); aspect-ratio: 1; margin: 0 auto; }

.roda__aro { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.roda__trilho,
.roda__luz { r: var(--raio); }
.roda__trilho { fill: none; stroke: rgba(143, 179, 255, .22); stroke-width: 2; stroke-dasharray: 2 6; }

.roda__luz {
  fill: none;
  stroke: var(--gold);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 14 86;
  filter: drop-shadow(0 0 6px rgba(242, 185, 64, .8));
}

@media (prefers-reduced-motion: no-preference) {
  .roda__luz { animation: roda-gira 8s linear infinite; }
  .roda__passo { animation: roda-acende 8s linear infinite; }
  .roda__passo--l { animation-delay: 2s; }
  .roda__passo--s { animation-delay: 4s; }
  .roda__passo--o { animation-delay: 6s; }
}

@keyframes roda-gira { from { stroke-dashoffset: 7; } to { stroke-dashoffset: -93; } }
@keyframes roda-acende { 0%, 16% { border-color: rgba(242, 185, 64, .8); box-shadow: 0 0 0 4px rgba(242, 185, 64, .14), 0 20px 40px -20px rgba(0, 0, 0, .8); } 30%, 100% { border-color: rgba(143, 179, 255, .2); box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .8); } }

.roda__centro { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.roda__centro b { color: #fff; font-size: 18px; line-height: 1; }
.roda__centro span { margin-top: 6px; color: var(--muted); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; }

.roda__passos { margin: 0; padding: 0; list-style: none; }

.roda__passo {
  position: absolute;
  display: grid;
  gap: 2px;
  width: 108px;
  padding: 8px 8px;
  border: 1px solid rgba(143, 179, 255, .2);
  border-radius: 12px;
  background: #0c1d3a;
  text-align: center;
  transform: translate(-50%, -50%);
  box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .8);
}

.roda__passo b { font-size: 13px; line-height: 1.2; }
.roda__passo span { color: var(--muted); font-size: 11px; line-height: 1.3; }

.roda__passo--n { top: calc(50% - var(--raio)); left: 50%; }
.roda__passo--l { top: 50%; left: calc(50% + var(--raio)); }
.roda__passo--s { top: calc(50% + var(--raio)); left: 50%; }
.roda__passo--o { top: 50%; left: calc(50% - var(--raio)); }

/* Celular estreito: só "Todo mês" no centro, para não encostar nos passos. */
@media (max-width: 399px) {
  .roda__centro b { font-size: 16px; }
  .roda__centro span { display: none; }
}

@media (min-width: 480px) {
  .roda { --raio: 35%; }
  .roda__centro b { font-size: 28px; }
  .roda__centro span { font-size: 12px; }
  .roda__passo { width: 150px; padding: 12px 14px; }
  .roda__passo b { font-size: 15.5px; }
  .roda__passo span { font-size: 12.5px; }
}

@media (min-width: 1100px) {
  .ciclo { padding: 104px var(--gutter) 112px; }
  .ciclo__inner { grid-template-columns: 1fr 500px; align-items: center; gap: 72px; }
  .roda { --raio: 36%; width: 500px; }
}

@media (prefers-reduced-motion: reduce) {
  .roda__luz { stroke-dashoffset: 7; }
}

/* ---------- Diagnóstico e prova ---------- */

.diagnostico {
  padding: 72px var(--gutter) 88px;
  background: #0d2148;
  color: #fff;
}

.diagnostico__inner { display: grid; gap: 40px; max-width: 1240px; margin: 0 auto; }
.diagnostico__texto { min-width: 0; }

.diagnostico__foto {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 0 0 1px rgba(143, 179, 255, .16), 0 50px 80px -44px rgba(0, 0, 0, .85);
}

.diagnostico__foto img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; transition: transform 1.2s var(--ease); }

/* Lista do que lemos, com uma lupa dourada em cada item. */
.lupa { display: grid; gap: 12px; margin: 22px 0 0; padding: 0; list-style: none; }

.lupa li {
  position: relative;
  padding: 14px 16px 14px 50px;
  border: 1px solid rgba(143, 179, 255, .16);
  border-radius: 12px;
  background: rgba(8, 22, 40, .45);
  color: #fff;
  font-size: 16px;
  line-height: 1.45;
}

.lupa li::before {
  content: "";
  position: absolute;
  top: 15px;
  left: 16px;
  width: 20px;
  height: 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23f2b940' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='8.5' cy='8.5' r='5.5'/%3E%3Cpath d='M13 13l4.5 4.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.diagnostico__cta { margin-top: 26px; }
.diagnostico__texto .diagnostico__cta { display: flex; width: fit-content; margin-left: auto; margin-right: auto; }
/* Bilhete: as três informações que bastam para o diagnóstico, como campos já rotulados. */
.bilhete {
  margin-top: 24px;
  padding: 20px 22px;
  border: 1px solid rgba(242, 185, 64, .35);
  border-top: 3px solid var(--gold);
  border-radius: 12px;
  background: rgba(242, 185, 64, .05);
}

.bilhete__titulo { margin: 0 0 14px; color: #fff; font-size: 17px; font-weight: 700; line-height: 1.35; text-wrap: balance; }

.bilhete__campos { display: grid; gap: 10px; margin: 0; }

.bilhete__campo {
  display: grid;
  grid-template-columns: 128px 1fr;
  align-items: baseline;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 1px dashed rgba(143, 179, 255, .25);
}

.bilhete__campo dt { color: var(--gold); font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.bilhete__campo dd { margin: 0; color: var(--muted); font-size: 15.5px; }
.bilhete__nota { margin: 14px 0 0; color: #c8d3e3; font-size: 14.5px; line-height: 1.5; }

@media (max-width: 399px) {
  .bilhete__campo { grid-template-columns: 1fr; gap: 2px; }
}

@media (hover: hover) and (pointer: fine) {
  .diagnostico__foto:hover img { transform: scale(1.04); }
}

@media (min-width: 1100px) {
  .diagnostico { padding: 104px var(--gutter) 120px; }
  .diagnostico__inner { grid-template-columns: 460px 1fr; align-items: stretch; gap: 72px; }
  .diagnostico__foto { max-width: none; margin: 0; }
  .diagnostico__foto img { height: 100%; aspect-ratio: auto; }
  .diagnostico__texto .diagnostico__cta { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .pf, .perfil__palco .pf__nota, .perfil__palco .pf__categoria--ok, .perfil__palco .pf__info--ok, .perfil__palco .pf__botoes, .perfil__palco .pf__resposta { transition: none; animation: none; }
  .diagnostico__foto img, .chave, .chave::after, .painel__item { transition: none; }
}

/* =========================================================================
   Página Serviços de SEO (a abertura usa as regras da .obra/.vitrine, acima)
   ========================================================================= */

/* ---------- Abertura: raio-X do resultado no Google ---------- */

.raio { display: grid; gap: 14px; width: 100%; max-width: 560px; margin: 0 auto; }

.raio__rotulo { margin: 0 0 8px; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }

/* O resultado, num cartão claro como a página de busca. */
.serp {
  display: grid;
  gap: 2px;
  padding: 16px 18px 18px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(143, 179, 255, .2), 0 40px 70px -40px rgba(0, 0, 0, .9);
}

.serp__parte {
  display: block;
  width: calc(100% + 16px);
  margin: 0 -8px;
  padding: 6px 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font-family: Arial, Helvetica, sans-serif;
  text-align: left;
  cursor: pointer;
  transition: background-color .3s var(--ease), box-shadow .3s var(--ease);
}

.serp__parte--url { display: flex; align-items: center; gap: 10px; color: #4d5156; font-size: 12.5px; line-height: 1.35; }
.serp__parte--url b { display: block; color: #202124; font-size: 14px; font-weight: 400; }
.serp__icone { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: #e8f0fe; color: #1a56db; font-size: 13px; font-weight: 700; }
.serp__parte--titulo { color: #1a0dab; font-size: 19px; line-height: 1.3; }
.serp__parte--descricao { color: #4d5156; font-size: 14px; line-height: 1.55; }

.serp__parte.is-ativa { background: rgba(242, 185, 64, .22); box-shadow: inset 0 0 0 2px var(--gold); }
.serp__parte:focus-visible { outline: 2px solid #2050a0; outline-offset: 2px; }

/* O código, num painel escuro; a linha da parte escolhida acende. */
.raio__codigo {
  padding: 14px 16px;
  border: 1px solid rgba(143, 179, 255, .18);
  border-radius: 14px;
  background: #0a1324;
}

.codigo {
  margin: 0;
  color: #c8d3e3;
  font: 12.5px/1.65 ui-monospace, "Cascadia Code", Consolas, "Liberation Mono", monospace;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Cada linha é um bloco; as quebras do HTML entre elas não viram linhas em branco. */
.codigo__linha {
  display: block;
  margin: 0 -8px;
  padding: 3px 8px;
  white-space: pre-wrap;
  border-radius: 6px;
  transition: background-color .3s var(--ease), box-shadow .3s var(--ease);
}

.codigo i { color: #22d3ee; font-style: normal; }
.codigo u { color: #a78bfa; text-decoration: none; }
.codigo__linha.is-ativa { background: rgba(242, 185, 64, .16); box-shadow: inset 3px 0 0 var(--gold); color: #fff; }

.raio__legenda {
  display: grid;
  gap: 4px;
  min-height: 92px;
  padding: 14px 16px;
  border-left: 3px solid var(--gold);
  border-radius: 0 12px 12px 0;
  background: rgba(255, 255, 255, .04);
}

.raio__nome { color: var(--gold); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; }
.raio__explica { color: #c8d3e3; font-size: 15px; line-height: 1.55; text-wrap: pretty; }

@media (min-width: 1100px) {
  .raio { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .serp__parte, .codigo__linha { transition: none; }
}

/* ---------- A base técnica: seis pontos auditados ---------- */

.base {
  position: relative;
  padding: 72px var(--gutter) 80px;
  background: #0f2758;
  color: #fff;
}

.base__inner { max-width: 1240px; margin: 0 auto; }
.base__cab { max-width: 820px; }

.auditoria {
  display: grid;
  gap: 14px;
  margin: 34px 0 0;
  padding: 0;
  list-style: none;
}

.auditoria__item {
  position: relative;
  overflow: hidden;
  padding: 22px 22px 18px;
  border: 1px solid rgba(143, 179, 255, .18);
  border-radius: 14px;
  background: #081628;
}

/* Uma linha de leitura passa por cada item, de cima para baixo, em sequência. */
.auditoria__item::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(143, 179, 255, .9), transparent);
  box-shadow: 0 0 14px rgba(143, 179, 255, .7);
  opacity: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .auditoria__item::before { animation: varre 7.2s var(--ease) infinite; }
  .auditoria__item:nth-child(2)::before { animation-delay: 1.2s; }
  .auditoria__item:nth-child(3)::before { animation-delay: 2.4s; }
  .auditoria__item:nth-child(4)::before { animation-delay: 3.6s; }
  .auditoria__item:nth-child(5)::before { animation-delay: 4.8s; }
  .auditoria__item:nth-child(6)::before { animation-delay: 6s; }
}

@keyframes varre {
  0% { opacity: 1; transform: translateY(0); }
  14% { opacity: 1; transform: translateY(320px); }
  16%, 100% { opacity: 0; transform: translateY(320px); }
}

.auditoria__status {
  position: absolute;
  top: 20px;
  right: 20px;
  padding: 4px 9px;
  border: 1px solid rgba(37, 211, 102, .45);
  border-radius: 6px;
  background: rgba(37, 211, 102, .12);
  color: #4ade80;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.auditoria__item h3 { margin: 0; padding-right: 54px; font-size: 18.5px; line-height: 1.3; }
.auditoria__item p { margin: 8px 0 0; color: #c8d3e3; font-size: 15.5px; line-height: 1.6; text-wrap: pretty; }

.auditoria__item .auditoria__objetivo {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed rgba(143, 179, 255, .2);
  color: var(--gold);
  font-size: 14px;
  font-weight: 700;
}

@media (min-width: 768px) {
  .auditoria { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1100px) {
  .base { padding: 104px var(--gutter) 112px; }
  .auditoria { grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .auditoria__item { padding: 26px 26px 22px; }
}

/* ---------- Uma página para cada busca, e o grupo de páginas ---------- */

.busca {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 72px var(--gutter) 80px;
  background: #081628;
  color: #fff;
}

.busca::after {
  content: "";
  position: absolute;
  top: 15%;
  right: -8%;
  z-index: -1;
  width: 700px;
  height: 640px;
  background: radial-gradient(closest-side, rgba(61, 123, 255, .16), transparent);
  pointer-events: none;
}

.busca__inner { display: grid; gap: 48px; max-width: 1240px; margin: 0 auto; }
.busca__texto { min-width: 0; }

.onpage { margin: 22px 0 0; }
.onpage__item { padding: 14px 0; border-top: 1px dashed rgba(143, 179, 255, .2); }
.onpage__item dt { font-size: 17.5px; font-weight: 700; line-height: 1.3; }
.onpage__item dd { margin: 5px 0 0; color: #c8d3e3; font-size: 15.5px; line-height: 1.6; text-wrap: pretty; }

.busca__nota { margin: 18px 0 0; color: var(--muted); font-size: 15px; line-height: 1.6; }

.busca__nota a {
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  background: linear-gradient(rgba(242, 185, 64, .45), rgba(242, 185, 64, .45)) 0 100% / 100% 2px no-repeat;
  transition: background-size .3s var(--ease);
}

.busca__nota a:hover { background-size: 100% 45%; }
.busca__nota a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 2px; }

/* O grupo: a página principal no centro, as de serviço em volta e os artigos na borda. */
.grupo { position: relative; width: 100%; max-width: 480px; aspect-ratio: 1; margin: 0 auto; }

.grupo__fios { position: absolute; inset: 0; width: 100%; height: 100%; }

.grupo__fios path {
  fill: none;
  stroke: rgba(143, 179, 255, .45);
  stroke-width: 1.5;
  stroke-dasharray: 4 6;
  transition: stroke .3s var(--ease), stroke-width .3s var(--ease);
}

.grupo__fios .grupo__fio-artigo { stroke: rgba(242, 185, 64, .4); }
.grupo__fios path.is-acesa { stroke: var(--gold); stroke-width: 2.5; }

@media (prefers-reduced-motion: no-preference) {
  .grupo__fios path { animation: flui 1.6s linear infinite; }
}

@keyframes flui { to { stroke-dashoffset: -20; } }

.grupo__nos { margin: 0; padding: 0; list-style: none; }

.no-grupo {
  position: absolute;
  top: var(--y);
  left: var(--x);
  width: max-content;
  max-width: 104px;
  padding: 7px 9px;
  border: 1px solid rgba(143, 179, 255, .35);
  border-radius: 10px;
  background: #12284a;
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  transform: translate(-50%, -50%);
  transition: border-color .3s var(--ease), background-color .3s var(--ease);
}

.no-grupo--pilar {
  max-width: 132px;
  padding: 10px 12px;
  border-color: var(--gold);
  background: #1b3a72;
  font-size: 13px;
  box-shadow: 0 0 0 5px rgba(242, 185, 64, .12), 0 0 30px rgba(61, 123, 255, .4);
}

.no-grupo small { display: block; margin-top: 3px; color: #e8c16a; font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; }

.no-grupo--artigo { max-width: 98px; border-style: dashed; border-color: rgba(242, 185, 64, .5); background: #0b1426; color: #c8d3e3; font-weight: 400; }
.no-grupo--direita { text-align: right; transform: translate(-100%, -50%); }
.no-grupo--esquerda { text-align: left; transform: translate(0, -50%); }

.no-grupo:hover { border-color: var(--gold); background: #1b3a72; }

.grupo__legenda {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -34px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 10px;
  color: var(--muted);
  font-size: 12.5px;
}

.grupo__chave { display: inline-block; width: 18px; height: 0; border-top: 2px dashed rgba(143, 179, 255, .7); }
.grupo__chave--artigo { margin-left: 8px; border-top-color: rgba(242, 185, 64, .7); }

/* Celular estreito: nós menores para não encostarem na página principal. */
@media (max-width: 399px) {
  .no-grupo { max-width: 80px; padding: 6px 7px; font-size: 10.5px; }
  .no-grupo--pilar { max-width: 86px; padding: 8px; font-size: 11.5px; }
  .no-grupo small { display: none; }
}

/* Celular: só a página principal e as de serviço; os artigos aparecem a partir de 560 px. */
@media (max-width: 559px) {
  .no-grupo--artigo,
  .grupo__fios .grupo__fio-artigo,
  .grupo__chave--artigo,
  .grupo__legenda-artigo { display: none; }
}

@media (min-width: 480px) {
  .no-grupo { max-width: 130px; padding: 8px 11px; font-size: 13px; }
  .no-grupo--pilar { max-width: 150px; font-size: 14.5px; }
  .no-grupo--artigo { max-width: 120px; font-size: 12.5px; }
}

@media (min-width: 1100px) {
  .busca { padding: 104px var(--gutter) 128px; }
  .busca__inner { grid-template-columns: 1fr 480px; align-items: center; gap: 72px; }
}

@media (prefers-reduced-motion: reduce) {
  .grupo__fios path, .no-grupo { transition: none; }
}

/* ---------- Troca de site: o mapa de redirecionamentos ---------- */

.mudanca {
  padding: 72px var(--gutter) 88px;
  background: #0d2148;
  color: #fff;
}

.mudanca__inner { display: grid; gap: 40px; max-width: 1240px; margin: 0 auto; }
.mudanca__texto { min-width: 0; }

.mudanca__foto {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 0 0 1px rgba(143, 179, 255, .16), 0 50px 80px -44px rgba(0, 0, 0, .85);
}

.mudanca__foto img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; transition: transform 1.2s var(--ease); }

.redirecao {
  margin-top: 26px;
  overflow: hidden;
  border: 1px solid rgba(143, 179, 255, .2);
  border-radius: 14px;
  background: #081628;
}

.redirecao__titulo {
  display: flex;
  justify-content: space-between;
  margin: 0;
  padding: 12px 18px;
  border-bottom: 1px solid rgba(143, 179, 255, .16);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.redirecao__lista { margin: 0; padding: 0; list-style: none; }

.redirecao__lista li {
  --linha: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-bottom: 1px dashed rgba(143, 179, 255, .16);
}

.redirecao__lista li:last-child { border-bottom: 0; }
.redirecao__lista li:nth-child(2) { --linha: 1; }
.redirecao__lista li:nth-child(3) { --linha: 2; }
.redirecao__lista li:nth-child(4) { --linha: 3; }

.redirecao code { color: var(--muted); font: 12.5px/1.4 ui-monospace, "Cascadia Code", Consolas, "Liberation Mono", monospace; overflow-wrap: anywhere; }
.redirecao code:last-child { color: #fff; text-align: right; }

/* A seta: um fio com o 301 no meio e uma luz que corre do antigo para o novo. */
.redirecao__seta { position: relative; display: grid; place-items: center; width: 74px; height: 22px; overflow: hidden; }
.redirecao__seta::before { content: ""; position: absolute; left: 0; right: 6px; top: 50%; height: 1px; background: rgba(242, 185, 64, .6); }
.redirecao__seta::after { content: ""; position: absolute; right: 0; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-top: 1.5px solid var(--gold); border-right: 1.5px solid var(--gold); transform: rotate(45deg); }
.redirecao__seta b { position: relative; z-index: 1; padding: 1px 6px; border-radius: 5px; background: var(--gold); color: #0a1a30; font-size: 10.5px; letter-spacing: .06em; }

.redirecao__seta i {
  position: absolute;
  top: 50%;
  left: 0;
  width: 18px;
  height: 3px;
  margin-top: -1.5px;
  border-radius: 2px;
  background: #fff;
  box-shadow: 0 0 8px #fff;
  opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .redirecao__seta i { animation: salta 3.2s var(--ease) calc(var(--linha) * .45s) infinite; }
}

@keyframes salta { 0% { opacity: 0; transform: translateX(0); } 10% { opacity: 1; } 40% { opacity: 1; transform: translateX(56px); } 46%, 100% { opacity: 0; transform: translateX(56px); } }

@media (hover: hover) and (pointer: fine) {
  .mudanca__foto:hover img { transform: scale(1.04); }
}

/* Celular estreito: antigo em cima, seta para baixo, novo embaixo. */
@media (max-width: 559px) {
  .redirecao__titulo span:last-child { display: none; }
  .redirecao__lista li { grid-template-columns: 1fr; gap: 6px; }
  .redirecao code:last-child { text-align: left; }
  .redirecao__seta { width: 22px; height: 42px; justify-self: start; overflow: visible; }
  .redirecao__seta::before { left: 50%; right: auto; top: 0; bottom: 6px; width: 1px; height: auto; }
  .redirecao__seta::after { right: auto; left: 50%; top: auto; bottom: 0; margin: 0 0 0 -3.5px; transform: rotate(135deg); }
  .redirecao__seta b { position: absolute; left: 30px; top: 50%; transform: translateY(-50%); }
  .redirecao__seta i { display: none; }
}

@media (min-width: 1100px) {
  .mudanca { padding: 104px var(--gutter) 120px; }
  .mudanca__inner { grid-template-columns: 440px 1fr; align-items: stretch; gap: 72px; }
  .mudanca__foto { max-width: none; margin: 0; }
  .mudanca__foto img { height: 100%; aspect-ratio: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .mudanca__foto img { transition: none; }
}

/* =========================================================================
   Página Serviços de GEO (a abertura usa as regras da .obra/.vitrine, acima)
   ========================================================================= */

/* ---------- Abertura: o que está escrito no site e o que a IA entende ---------- */

.leitura { width: 100%; max-width: 560px; margin: 0 auto; }

.leitura__rotulo {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}

/* A página: papel claro, como a pessoa vê o site. */
.leitura__pagina {
  position: relative;
  padding: 18px 20px 20px;
  border-radius: 14px;
  background: #f6f8fc;
  color: #1d2b44;
  text-align: left;
  box-shadow: 0 0 0 1px rgba(143, 179, 255, .2), 0 40px 70px -40px rgba(0, 0, 0, .9);
}

.leitura__pagina .leitura__rotulo { color: #6b7a93; }
.leitura__nome { margin: 0 0 6px; color: #0a1a30; font-size: 22px; font-weight: 700; line-height: 1.2; }
.leitura__corpo { margin: 0; font-size: 15.5px; line-height: 1.8; text-align: left; hyphens: none; }

.leitura mark {
  margin: 0 -2px;
  padding: 1px 2px;
  border-radius: 4px;
  background: transparent;
  color: inherit;
  box-shadow: inset 0 -2px 0 rgba(32, 80, 160, .22);
  transition: background-color .45s var(--ease), box-shadow .45s var(--ease);
}

.leitura mark.is-lida { background: rgba(242, 185, 64, .36); box-shadow: inset 0 -2px 0 #c98a12; }
.leitura mark.is-foco { background: rgba(242, 185, 64, .62); }

/* A ficha: o que a máquina tirou do texto, campo por campo. */
.leitura__ficha {
  position: relative;
  margin-top: 12px;
  padding: 16px 18px 18px;
  border: 1px solid rgba(242, 185, 64, .5);
  border-radius: 14px;
  background: #081628;
  text-align: left;
  box-shadow: 0 40px 70px -40px rgba(0, 0, 0, .95);
}

.leitura__ficha .leitura__rotulo { color: var(--gold); }

/* O brilho de quatro pontas, o sinal que as IAs usam. */
.leitura__brilho {
  flex: none;
  width: 14px;
  height: 14px;
  background: var(--gold);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
}

.leitura__campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; }

.leitura__campos div {
  min-width: 0;
  padding: 8px 10px 9px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .04);
  transition: background-color .4s var(--ease), box-shadow .4s var(--ease);
}

.leitura__campos dt { color: var(--muted); font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }

.leitura__campos dd {
  margin: 3px 0 0;
  color: #fff;
  font-size: 14.5px;
  line-height: 1.35;
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}

/* Com o JS, os campos começam vazios e se preenchem conforme a frase é lida. */
.leitura.is-viva .leitura__campos div:not(.is-lido) dd { opacity: 0; transform: translateY(4px); }

.leitura.is-viva .leitura__campos div:not(.is-lido) {
  background: linear-gradient(100deg, rgba(255, 255, 255, .03) 30%, rgba(255, 255, 255, .09) 50%, rgba(255, 255, 255, .03) 70%) 0 0 / 220% 100%;
}

.leitura__campos div.is-lido { box-shadow: inset 0 0 0 1px rgba(242, 185, 64, .28); }
.leitura__campos div.is-foco { background: rgba(242, 185, 64, .14); box-shadow: inset 0 0 0 1px var(--gold); }

.leitura__legenda { margin-top: 14px; color: var(--muted); font-size: 13px; line-height: 1.5; text-align: center; text-wrap: pretty; }

@media (prefers-reduced-motion: no-preference) {
  .leitura__brilho { animation: faisca 2.6s ease-in-out infinite; }
  .leitura.is-viva .leitura__campos div:not(.is-lido) { animation: espera-campo 1.6s linear infinite; }
}

@keyframes faisca { 0%, 100% { transform: scale(.8); opacity: .75; } 50% { transform: scale(1.12) rotate(45deg); opacity: 1; } }
@keyframes espera-campo { to { background-position: -220% 0; } }

/* A ficha por cima da página, deslocada para a direita. */
@media (min-width: 560px) {
  .leitura__pagina { width: 90%; padding-bottom: 46px; }
  .leitura__ficha { width: 86%; margin: -30px 0 0 auto; }
}

@media (min-width: 1100px) {
  .leitura { max-width: none; }
  .leitura__nome { font-size: 24px; }
  .leitura__corpo { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .leitura mark, .leitura__campos div, .leitura__campos dd { transition: none; }
}

/* ---------- SEO e GEO, lado a lado ---------- */

.versus {
  padding: 72px var(--gutter) 80px;
  background: #081628;
  color: #fff;
}

.versus__inner { max-width: 1240px; margin: 0 auto; }
.versus__cab { max-width: 820px; }
.versus__frase { display: block; }

.versus__quadro { display: grid; gap: 14px; margin-top: 34px; }

.versus__lado {
  padding: 22px 22px 6px;
  border: 1px solid rgba(143, 179, 255, .18);
  border-radius: 14px;
  background: #0c1f38;
}

.versus__lado--geo {
  border-color: rgba(242, 185, 64, .55);
  background: #0f2758;
  box-shadow: 0 40px 70px -48px rgba(242, 185, 64, .4);
}

.versus__nome { margin: 0; font-size: 30px; font-weight: 700; letter-spacing: .06em; line-height: 1; text-align: center; }
.versus__lado--seo .versus__nome { color: #8fb3ff; }
.versus__lado--geo .versus__nome { color: var(--gold); }

/* Miniaturas: a lista de resultados e a resposta escrita. */
.versus__ilustra {
  display: grid;
  gap: 7px;
  margin: 18px 0;
  padding: 14px;
  border-radius: 10px;
  background: rgba(0, 0, 0, .22);
}

.versus__ilustra span { display: block; height: 7px; border-radius: 4px; background: rgba(143, 179, 255, .22); }

.versus__ilustra--lista span { height: auto; padding: 7px 10px; background: transparent; box-shadow: inset 0 0 0 1px rgba(143, 179, 255, .14); border-radius: 7px; }
.versus__ilustra--lista span::before { content: ""; display: block; width: 62%; height: 6px; border-radius: 3px; background: rgba(143, 179, 255, .5); }
.versus__ilustra--lista span::after { content: ""; display: block; width: 88%; height: 5px; margin-top: 6px; border-radius: 3px; background: rgba(255, 255, 255, .12); }
.versus__ilustra--lista .is-sua { box-shadow: inset 0 0 0 1px rgba(143, 179, 255, .55); }
.versus__ilustra--lista .is-sua::before { display: none; }

.versus__ilustra b {
  justify-self: start;
  padding: 2px 8px;
  border-radius: 6px;
  color: #0a1a30;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.versus__ilustra--lista b { display: block; width: max-content; background: #8fb3ff; }
.versus__ilustra--resposta span:nth-child(3) { width: 92%; }
.versus__ilustra--resposta span:nth-child(4) { width: 70%; }
.versus__ilustra--resposta b { margin-top: 4px; background: var(--gold); }

.versus__ilustra .versus__faisca {
  width: 16px;
  height: 16px;
  margin-bottom: 2px;
  border-radius: 0;
  background: var(--gold);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
}

@media (prefers-reduced-motion: no-preference) {
  .versus__ilustra--resposta b { animation: fonte-acende 3.2s var(--ease) infinite; }
}

@keyframes fonte-acende { 0%, 100% { box-shadow: 0 0 0 0 rgba(242, 185, 64, 0); } 40% { box-shadow: 0 0 0 5px rgba(242, 185, 64, .22); } }

.versus__lado dl { margin: 0; }
.versus__lado dl > div { padding: 14px 0 16px; border-top: 1px solid rgba(143, 179, 255, .14); }
.versus__lado dt { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.versus__lado dd { margin: 5px 0 0; color: #e9eef5; font-size: 16.5px; line-height: 1.5; text-wrap: pretty; }
.versus__lado--geo dt { color: #d9c08a; }

.versus__nota {
  max-width: 760px;
  margin: 24px auto 0;
  color: #c8d3e3;
  font-size: 16.5px;
  line-height: 1.65;
  text-align: center;
  text-wrap: pretty;
}

/* Computador: as duas colunas com as linhas alinhadas (subgrid). */
@media (min-width: 900px) {
  .versus__quadro { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(6, auto); gap: 0 18px; }
  .versus__lado { display: grid; grid-row: span 6; grid-template-rows: subgrid; }
  .versus__lado dl { display: contents; }
  .versus__nome { text-align: left; }
}

@media (min-width: 1100px) {
  .versus { padding: 104px var(--gutter) 112px; }
  .versus__lado { padding: 28px 30px 8px; }
  .versus__lado dd { font-size: 17.5px; }
}

/* ---------- O que preparamos: os arquivos, num editor ---------- */

.arquivos {
  position: relative;
  isolation: isolate;
  padding: 72px var(--gutter) 88px;
  background: #0f2758;
  color: #fff;
}

.arquivos::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(rgba(143, 179, 255, .16) 1px, transparent 1.4px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
}

.arquivos__inner { max-width: 1240px; margin: 0 auto; }
.arquivos__cab { max-width: 860px; }

.editor {
  margin-top: 34px;
  overflow: hidden;
  border: 1px solid rgba(143, 179, 255, .24);
  border-radius: 14px;
  background: #0a1324;
  box-shadow: 0 50px 80px -50px rgba(0, 0, 0, .9);
}

.editor__abas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  border-bottom: 1px solid rgba(143, 179, 255, .16);
  background: rgba(143, 179, 255, .16);
}

.editor__aba {
  --tipo: #22d3ee;
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  min-height: 48px;
  padding: 0 14px;
  border: 0;
  background: #0b1730;
  color: var(--muted);
  font: 13px/1.2 ui-monospace, "Cascadia Code", Consolas, "Liberation Mono", monospace;
  text-align: left;
  cursor: pointer;
  transition: background-color .25s var(--ease), color .25s var(--ease);
}

.editor__aba[data-tipo="json"] { --tipo: #a78bfa; }
.editor__aba[data-tipo="txt"] { --tipo: #8fb3ff; }

/* Quadradinho na cor do tipo de arquivo. */
.editor__aba::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 2px; background: var(--tipo); }

/* Filete dourado da aba aberta; enquanto passa sozinho, ele enche no tempo da troca. */
.editor__aba::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
}

.editor__aba[aria-selected="true"] { background: #0a1324; color: #fff; }
.editor__aba[aria-selected="true"]::after { transform: scaleX(1); }
.editor.is-auto .editor__aba[aria-selected="true"]::after { animation: enche-aba 5.6s linear both; }
.editor__aba:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }

@keyframes enche-aba { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.editor__painel { display: grid; }
.editor__painel[hidden] { display: none; }

.editor__codigo {
  margin: 0;
  padding: 20px 18px;
  border-bottom: 1px solid rgba(143, 179, 255, .14);
  color: #c8d3e3;
  font: 13px/1.75 ui-monospace, "Cascadia Code", Consolas, "Liberation Mono", monospace;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.editor__codigo i { color: #22d3ee; font-style: normal; }
.editor__codigo u { color: #a78bfa; text-decoration: none; }
.editor__codigo b { color: var(--gold); font-weight: 400; }

/* Cursor de texto piscando no fim do arquivo, como no menu. */
.editor__codigo::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1.15em;
  margin-left: 3px;
  vertical-align: -.22em;
  background: var(--blue);
  animation: pisca 1.06s steps(1) infinite;
}

.editor__explica { padding: 20px 18px 24px; }
.editor__explica h3 { margin: 0; color: #fff; font-size: 22px; line-height: 1.2; text-align: center; text-wrap: balance; }

.editor__explica p {
  margin: 10px 0 0;
  color: #c8d3e3;
  font-size: 16.5px;
  line-height: 1.7;
  text-align: justify;
  hyphens: auto;
  text-wrap: pretty;
}

@media (prefers-reduced-motion: no-preference) {
  .editor__painel:not([hidden]) > * { animation: painel-entra .5s var(--ease) both; }
  .editor__painel:not([hidden]) > .editor__explica { animation-delay: .08s; }
}

@keyframes painel-entra { from { opacity: 0; transform: translateY(8px); } }

/* Barra de status no pé do editor. */
.editor__status {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 18px;
  margin: 0;
  padding: 9px 18px;
  border-top: 1px solid rgba(143, 179, 255, .16);
  background: #0b1730;
  color: var(--muted);
  font: 11.5px/1.3 ui-monospace, "Cascadia Code", Consolas, "Liberation Mono", monospace;
}

.editor__pronto { display: inline-flex; align-items: center; gap: 7px; color: #c8d3e3; }
.editor__pronto::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #25d366; box-shadow: 0 0 0 3px rgba(37, 211, 102, .18); }

@media (min-width: 640px) {
  .editor__abas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Computador: arquivos na lateral, código e explicação lado a lado. */
@media (min-width: 1100px) {
  .arquivos { padding: 104px var(--gutter) 120px; }
  .editor { display: grid; grid-template-columns: 236px minmax(0, 1fr); }
  .editor__abas { grid-template-columns: 1fr; align-content: start; gap: 0; padding: 12px 0; border-bottom: 0; border-right: 1px solid rgba(143, 179, 255, .16); background: #0b1730; }
  .editor__aba { min-height: 50px; padding: 0 22px; background: transparent; font-size: 13.5px; }
  .editor__aba:hover { color: #fff; background: rgba(143, 179, 255, .06); }
  .editor__aba[aria-selected="true"] { background: #0a1324; }
  .editor__painel { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); min-height: 300px; }
  .editor__codigo { padding: 32px 30px; border-bottom: 0; border-right: 1px solid rgba(143, 179, 255, .14); font-size: 14.5px; }
  .editor__status { grid-column: 1 / -1; justify-content: flex-end; padding: 9px 24px; }
  .editor__pronto { margin-right: auto; }
  .editor__explica { align-self: center; padding: 32px 34px; }
  .editor__explica h3 { font-size: 26px; text-align: left; }
  .editor__explica p { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  .editor__aba { transition: none; }
  .editor__codigo::after { animation: none; }
}

/* ---------- Acompanhamento: as perguntas que fazemos às IAs ---------- */

.pergunta {
  padding: 72px var(--gutter) 88px;
  background: #0b1d3d;
  color: #fff;
}

.pergunta__inner { display: grid; gap: 40px; max-width: 1240px; margin: 0 auto; }
.pergunta__texto { min-width: 0; }

.baloes { display: grid; gap: 10px; margin: 26px 0 0; padding: 0; list-style: none; }

.baloes li {
  --i: 0;
  justify-self: end;
  max-width: 92%;
  padding: 10px 16px 12px;
  border-radius: 16px 16px 4px 16px;
  background: #2050a0;
  color: #fff;
  font-size: 15.5px;
  line-height: 1.45;
  box-shadow: 0 12px 26px -16px rgba(0, 0, 0, .8);
}

.baloes li:nth-child(2) { --i: 1; }
.baloes li:nth-child(3) { --i: 2; }

/* Para qual IA foi a pergunta. */
.baloes li::before {
  content: attr(data-ia);
  display: block;
  margin-bottom: 3px;
  color: #bcd0ff;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

@media (prefers-reduced-motion: no-preference) {
  .baloes li { animation: balao-vez 7.2s var(--ease) calc(var(--i) * 2.4s) infinite; }
}

@keyframes balao-vez {
  0%, 30%, 100% { box-shadow: 0 12px 26px -16px rgba(0, 0, 0, .8); }
  12% { box-shadow: 0 0 0 2px rgba(242, 185, 64, .7), 0 14px 30px -14px rgba(0, 0, 0, .8); }
}

.sincero {
  margin: 26px 0 0;
  padding: 18px 20px 20px;
  border: 1px dashed rgba(242, 185, 64, .55);
  border-radius: 11px;
  background: rgba(242, 185, 64, .06);
  color: #c8d3e3;
  font-size: 16px;
  line-height: 1.65;
  text-align: justify;
  hyphens: auto;
  text-wrap: pretty;
}

.sincero b {
  display: block;
  margin-bottom: 6px;
  color: var(--gold);
  font-size: 12px;
  letter-spacing: .16em;
  text-align: center;
  text-transform: uppercase;
}

.pergunta__foto {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 0 0 1px rgba(143, 179, 255, .16), 0 50px 80px -44px rgba(0, 0, 0, .85);
}

.pergunta__foto img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; transition: transform 1.2s var(--ease); }

@media (hover: hover) and (pointer: fine) {
  .pergunta__foto:hover img { transform: scale(1.04); }
}

@media (min-width: 1100px) {
  .pergunta { padding: 104px var(--gutter) 120px; }
  .pergunta__inner { grid-template-columns: minmax(0, 1fr) 440px; align-items: stretch; gap: 72px; }
  .pergunta__foto { max-width: none; margin: 0; }
  .pergunta__foto img { height: 100%; aspect-ratio: auto; }
  .baloes li { font-size: 16px; }
  .sincero b { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .pergunta__foto img { transition: none; }
}

/* =========================================================================
   Página Contato (a abertura usa as regras da .obra/.vitrine, acima)
   ========================================================================= */

/* ---------- Abertura: os dois botões e o cartão de visita ---------- */

.fale__acoes { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 18px; margin-top: 26px; }
.fale__acoes .fale__cta { margin-top: 0; }
.fale__salvar { margin: 0; }

/* "Salvar o contato" só em aparelho de toque: no computador o vCard viraria um arquivo baixado (lá o QR code faz o papel). */
@media (hover: hover) and (pointer: fine) {
  .fale__salvar { display: none; }
}
.fale__salvar svg { transition: transform .3s var(--ease); }
.fale__salvar:hover .conheca__chip svg { transform: translateY(2px); }

.cartao-visita { width: 100%; max-width: 460px; margin: 0 auto; perspective: 1400px; }

.cartao-visita__giro {
  position: relative;
  aspect-ratio: 1.75;
  transform-style: preserve-3d;
  transition: transform .9s cubic-bezier(.3, .7, .2, 1);
  cursor: pointer;
}

.cartao-visita.is-verso .cartao-visita__giro { transform: rotateY(180deg); }

.cartao-visita__face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 14px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  box-shadow: 0 2px 0 rgba(255, 255, 255, .04) inset, 0 50px 70px -40px rgba(0, 0, 0, .95), 0 18px 30px -22px rgba(0, 0, 0, .8);
}

/* Reflexo que atravessa o cartão ao abrir e no hover. */
.cartao-visita__face::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .16) 48%, transparent 60%) -160% 0 / 100% 100% no-repeat;
  pointer-events: none;
}

/* Frente: marinho com trama fina, logo e filete dourado. */
.cartao-visita__face--frente {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 16px;
  border: 1px solid rgba(143, 179, 255, .2);
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .018) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .018) 0 1px, transparent 1px 3px),
    #0c1f38;
}

.cartao-visita__face--frente img { width: min(62%, 260px); height: auto; filter: brightness(1.3); }

.cartao-visita__lema {
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid rgba(242, 185, 64, .7);
  color: #d9c08a;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .26em;
  text-transform: uppercase;
}

/* Verso: papel claro, dados à esquerda e QR code à direita. */
.cartao-visita__face--verso {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  padding: 18px 20px 18px 24px;
  border-left: 4px solid var(--gold);
  background:
    radial-gradient(circle at 20% 10%, rgba(255, 255, 255, .7), transparent 60%),
    #f4f1ea;
  color: #0a1a30;
  transform: rotateY(180deg);
}

.cartao-visita__nome { margin: 0; font-size: 19px; font-weight: 700; line-height: 1.1; }
.cartao-visita__cargo { margin: 2px 0 10px; color: #8a6514; font-size: 10.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.cartao-visita__lista { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: 12.5px; line-height: 1.3; }
.cartao-visita__lista li { display: grid; grid-template-columns: 62px minmax(0, 1fr); overflow-wrap: anywhere; }
.cartao-visita__lista b { color: #6b7a93; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; line-height: 1.6; }

/* No celular o QR code não serve para nada: some. */
.cartao-visita__qr { display: none; }

.cartao-visita__codigo { display: block; width: 124px; height: 124px; padding: 10px; border-radius: 8px; background: #fff; box-shadow: 0 0 0 1px rgba(10, 26, 48, .12); }
.cartao-visita__qr span { display: block; max-width: 130px; margin-top: 8px; color: #6b7a93; font-size: 10.5px; line-height: 1.35; text-align: center; }

.cartao-visita__rodape { display: flex; justify-content: center; margin-top: 16px; }

.cartao-visita__virar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid rgba(143, 179, 255, .22);
  border-radius: 11px;
  background: transparent;
  color: #c8d3e3;
  font: 700 12px/1 var(--font);
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color .2s var(--ease), color .2s var(--ease), background-color .2s var(--ease);
}

.cartao-visita__virar svg { width: 15px; height: 15px; fill: none; stroke: var(--gold); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .5s var(--ease); }
.cartao-visita__virar:hover { border-color: rgba(242, 185, 64, .6); color: #fff; background: rgba(242, 185, 64, .06); }
.cartao-visita__virar:hover svg { transform: rotate(180deg); }
.cartao-visita__virar:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

@media (prefers-reduced-motion: no-preference) {
  .cartao-visita.is-viva .cartao-visita__face::after { animation: reflexo-cartao 1.4s var(--ease) .3s; }
}

@keyframes reflexo-cartao { to { background-position: 260% 0; } }

@media (hover: hover) and (pointer: fine) {
  .cartao-visita__giro:hover .cartao-visita__face::after { background-position: 260% 0; transition: background-position 1.1s var(--ease); }
}

@media (min-width: 640px) {
  .cartao-visita__face--verso { grid-template-columns: minmax(0, 1fr) auto; padding: 20px 22px 20px 26px; }
  .cartao-visita__qr { display: grid; justify-items: center; }
  .cartao-visita__nome { font-size: 21px; }
}

@media (min-width: 1100px) {
  .fale__acoes { justify-content: flex-start; }
  .cartao-visita { margin: 0 0 0 auto; }
}

/* Abaixo de 375 px: o cartão encolhe a letra para caber. */
@media (max-width: 374px) {
  .cartao-visita__face--verso { padding: 12px 12px 12px 16px; }
  .cartao-visita__nome { font-size: 16px; }
  .cartao-visita__cargo { margin-bottom: 5px; }
  .cartao-visita__lista { gap: 2px; font-size: 11px; }
  .cartao-visita__lista li { grid-template-columns: 58px minmax(0, 1fr); }
  .cartao-visita__lista b { font-size: 9px; letter-spacing: .06em; white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
  .cartao-visita__giro { transition: none; }
}

/* ---------- Canais ---------- */

.canais {
  padding: 72px var(--gutter) 80px;
  background: #0b1d3d;
  color: #fff;
}

.canais__inner { max-width: 1240px; margin: 0 auto; }
.canais__cab { max-width: 820px; }

.canais__lista { margin: 34px 0 0; padding: 0; list-style: none; border-top: 1px solid rgba(143, 179, 255, .18); }

.canal {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 26px 8px 28px;
  border-bottom: 1px solid rgba(143, 179, 255, .18);
  text-align: center;
  transition: background-color .3s var(--ease);
}

/* Filete dourado que entra pela esquerda no hover. */
.canal::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  bottom: -1px;
  width: 3px;
  background: var(--gold);
  transform: scaleY(0);
  transition: transform .35s var(--ease);
}

.canal__n { color: rgba(143, 179, 255, .55); font: 700 13px/1 ui-monospace, "Cascadia Code", Consolas, monospace; letter-spacing: .08em; transition: color .3s var(--ease); }
.canal__id { min-width: 0; }
.canal__nome { margin: 0; font-size: 30px; font-weight: 700; line-height: 1.1; letter-spacing: -.005em; }
.canal__dado { margin: 4px 0 0; color: #8fb3ff; font-size: 17px; overflow-wrap: anywhere; }
.canal__para { max-width: 520px; margin: 0; color: #c8d3e3; font-size: 16.5px; line-height: 1.6; text-wrap: pretty; }

.canal__acoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 4px; }

.canal__botao,
.canal__copiar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 11px;
  font: 700 12.5px/1 var(--font);
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .2s var(--ease), background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), box-shadow .25s var(--ease);
}

.canal__botao { border: 1px solid #3d7bff; background: #3d7bff; color: #fff; }
.canal__botao:hover { background: #5a8fff; border-color: #5a8fff; transform: translateY(-1px); box-shadow: 0 12px 24px -14px rgba(61, 123, 255, .9); }
.canal__botao--zap { border-color: #25d366; background: #25d366; color: #052e16; }
.canal__botao--zap:hover { background: #3ee07a; border-color: #3ee07a; box-shadow: 0 12px 24px -14px rgba(37, 211, 102, .9); }

.canal__copiar { border: 1px solid rgba(143, 179, 255, .3); background: transparent; color: #c8d3e3; }
.canal__copiar:hover { border-color: rgba(242, 185, 64, .6); color: #fff; }
.canal__copiar.is-copiado { border-color: #25d366; color: #7ff0ab; }

.canal__botao:active,
.canal__copiar:active { transform: translateY(0); transition-duration: .08s; }
.canal__botao:focus-visible,
.canal__copiar:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

@media (hover: hover) and (pointer: fine) {
  .canal:hover { background: rgba(255, 255, 255, .025); }
  .canal:hover::before { transform: scaleY(1); }
  .canal:hover .canal__n { color: var(--gold); }
}

/* Computador: cada canal numa linha só, como um índice. */
@media (min-width: 1100px) {
  .canais { padding: 104px var(--gutter) 112px; }
  .canal { grid-template-columns: 56px minmax(0, 1.05fr) minmax(0, 1.25fr) 300px; align-items: center; justify-items: start; gap: 28px; padding: 30px 20px; text-align: left; }
  .canal__nome { font-size: 34px; }
  .canal__para { text-align: justify; hyphens: auto; }
  .canal__acoes { justify-content: flex-end; justify-self: end; margin: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .canal, .canal::before, .canal__botao, .canal__copiar { transition: none; }
}

/* ---------- A sede: planta de situação ---------- */

.sede {
  padding: 72px var(--gutter) 88px;
  background: #0d2148;
  color: #fff;
}

.sede__inner { display: grid; gap: 40px; max-width: 1240px; margin: 0 auto; }
.sede__texto { min-width: 0; }

.sede__endereco {
  display: grid;
  gap: 2px;
  margin-top: 22px;
  padding: 16px 0 16px;
  border-top: 1px solid rgba(143, 179, 255, .18);
  border-bottom: 1px solid rgba(143, 179, 255, .18);
  color: #fff;
  font-size: 17px;
  font-style: normal;
  line-height: 1.5;
  text-align: center;
}

.sede__endereco span:last-child { color: #8fb3ff; }

.sede__acoes { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 22px; margin-top: 22px; }
.sede__rota { margin: 0; }

.sede__perfil {
  color: #c8d3e3;
  font-size: 15px;
  text-decoration: none;
  background: linear-gradient(rgba(242, 185, 64, .5), rgba(242, 185, 64, .5)) 0 100% / 100% 1px no-repeat;
  transition: color .2s var(--ease), background-size .3s var(--ease);
}

.sede__perfil:hover { color: #fff; background-size: 100% 2px; }
.sede__perfil:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 2px; }

/* O quadro: base desenhada (img) + camada viva (svg) com o mesmo recorte; o resto em %. */
.situacao { --x: 26%; --escala: 16%; margin: 0; min-width: 0; }

.situacao__mapa {
  position: relative;
  aspect-ratio: 5 / 4;
  overflow: hidden;
  border: 1px solid rgba(143, 179, 255, .24);
  border-radius: 16px;
  background:
    linear-gradient(rgba(143, 179, 255, .045) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(90deg, rgba(143, 179, 255, .045) 1px, transparent 1px) 0 0 / 40px 40px,
    #09172f;
  box-shadow: 0 50px 80px -50px rgba(0, 0, 0, .9);
}

.situacao__base,
.situacao__camada { position: absolute; inset: 0; width: 100%; height: 100%; }
.situacao__base { object-fit: cover; }

.situacao__rua,
.situacao__lago { font-family: var(--font); font-weight: 700; letter-spacing: .2em; paint-order: stroke; stroke: #09172f; stroke-width: 10px; stroke-linejoin: round; }
.situacao__rua { fill: #c8d3e3; font-size: 26px; letter-spacing: .1em; }
.situacao__lago { fill: #8fb3ff; font-size: 40px; letter-spacing: .5em; }

.situacao__rota { fill: none; stroke: var(--gold); stroke-width: 5; stroke-dasharray: 12 10; stroke-linecap: round; opacity: .75; }
.situacao__luz { fill: none; stroke: #fff6e3; stroke-width: 9; stroke-linecap: round; stroke-dasharray: .08 1; stroke-dashoffset: .08; opacity: 0; filter: drop-shadow(0 0 6px var(--gold)); }

.situacao__torre { fill: var(--gold); stroke: #fff3d4; stroke-width: 2; }
.situacao__torre--vizinha { fill: rgba(242, 185, 64, .25); stroke: rgba(242, 185, 64, .7); }

/* Pino com pulso, na torre (o x depende do recorte: 26% no celular, 31,25% no quadro 16:10). */
.situacao__pino {
  position: absolute;
  left: var(--x);
  top: 50%;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border: 2px solid #fff3d4;
  border-radius: 50%;
  background: var(--gold);
}

.situacao__pino::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 2px solid var(--gold);
  opacity: 0;
}

.situacao__etiqueta {
  position: absolute;
  left: calc(var(--x) + 22px);
  top: calc(50% - 74px);
  display: grid;
  gap: 2px;
  padding: 9px 12px 10px;
  border: 1px solid rgba(242, 185, 64, .7);
  border-radius: 10px;
  background: rgba(9, 23, 47, .92);
  color: #c8d3e3;
  font-size: 11.5px;
  line-height: 1.3;
  white-space: nowrap;
  box-shadow: 0 16px 30px -18px rgba(0, 0, 0, .9);
}

.situacao__etiqueta b { color: #fff; font-size: 14px; letter-spacing: .02em; }

/* Fio da etiqueta até o pino. */
.situacao__etiqueta::before {
  content: "";
  position: absolute;
  left: -16px;
  bottom: -18px;
  width: 22px;
  height: 1px;
  background: rgba(242, 185, 64, .8);
  transform: rotate(-52deg);
  transform-origin: left;
}

.situacao__titulo,
.situacao__coord {
  position: absolute;
  color: #8fb3ff;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.situacao__titulo { left: 14px; top: 12px; padding: 4px 8px; border: 1px solid rgba(143, 179, 255, .3); border-radius: 6px; background: rgba(9, 23, 47, .85); }
.situacao__coord { right: 14px; bottom: 12px; display: none; letter-spacing: .1em; }

.situacao__norte {
  position: absolute;
  right: 14px;
  top: 12px;
  display: grid;
  justify-items: center;
  gap: 2px;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}

.situacao__norte i { width: 0; height: 0; border: 7px solid transparent; border-bottom: 18px solid var(--gold); border-top: 0; }

/* Escala gráfica: o tamanho de 200 m no recorte atual. */
.situacao__escala {
  position: absolute;
  left: 14px;
  bottom: 12px;
  display: grid;
  gap: 4px;
  width: var(--escala);
  min-width: 48px;
  color: #c8d3e3;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .1em;
}

.situacao__escala i {
  height: 6px;
  border: 1px solid #c8d3e3;
  border-top: 0;
  background: linear-gradient(90deg, #c8d3e3 50%, transparent 50%);
}

.situacao__legenda { margin-top: 12px; color: var(--muted); font-size: 13px; line-height: 1.5; text-align: center; text-wrap: pretty; }
.situacao__legenda a { color: #c8d3e3; text-underline-offset: 2px; }

@media (prefers-reduced-motion: no-preference) {
  .situacao__pino::before { animation: pulso-pino 2.4s var(--ease) infinite; }
  .situacao__luz { animation: rota-luz 4.8s cubic-bezier(.4, 0, .2, 1) infinite; }
}

@keyframes pulso-pino { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(4); opacity: 0; } }
@keyframes rota-luz { 0% { stroke-dashoffset: .08; opacity: 0; } 8% { opacity: 1; } 70% { stroke-dashoffset: -.92; opacity: 1; } 78%, 100% { stroke-dashoffset: -.92; opacity: 0; } }

/* Quadro largo (16:10): aparece a planta inteira. */
@media (min-width: 640px) {
  .situacao { --x: 31.25%; --escala: 12.5%; }
  .situacao__mapa { aspect-ratio: 16 / 10; }
  .situacao__coord { display: block; }
  .situacao__etiqueta { font-size: 12.5px; }
  .situacao__etiqueta b { font-size: 15px; }
}

/* Celular estreito: letras do desenho maiores (unidade = metro do desenho). */
@media (max-width: 639px) {
  .situacao__rua { font-size: 28px; letter-spacing: .05em; stroke-width: 12px; }
  .situacao__lago { font-size: 56px; stroke-width: 14px; }
}

@media (min-width: 1100px) {
  .sede { padding: 104px var(--gutter) 120px; }
  .sede__inner { grid-template-columns: minmax(0, 380px) minmax(0, 1fr); align-items: center; gap: 56px; }
  .sede__endereco { text-align: left; }
  .sede__acoes { justify-content: flex-start; }
}

/* =========================================================================
   Página Política de Privacidade (a abertura usa as regras da .obra/.vitrine, acima)
   ========================================================================= */

/* ---------- Abertura: a data da versão e o quadro que verifica o navegador ---------- */

.priv__data {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 22px 0 0;
  padding: 7px 12px;
  border: 1px solid rgba(242, 185, 64, .4);
  border-radius: 8px;
  color: #d9c08a;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
}

.verifica {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: 18px 20px 16px;
  border: 1px solid rgba(143, 179, 255, .24);
  border-radius: 16px;
  background: #081628;
  text-align: left;
  box-shadow: 0 50px 80px -50px rgba(0, 0, 0, .9);
}

/* Linha de leitura que desce uma vez ao abrir. */
.verifica::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 70px;
  background: linear-gradient(180deg, transparent, rgba(37, 211, 102, .12) 70%, rgba(37, 211, 102, .5) 100%);
  opacity: 0;
  pointer-events: none;
}

.verifica__rotulo {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 6px;
  color: #c8d3e3;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.verifica__ponto { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #25d366; box-shadow: 0 0 0 4px rgba(37, 211, 102, .16); }

.verifica__lista { margin: 0; }

.verifica__item { padding: 14px 0; border-bottom: 1px solid rgba(143, 179, 255, .14); }
.verifica__item:last-child { border-bottom: 0; }

.verifica__item dt { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.verifica__item dd { display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: start; gap: 4px 14px; margin: 8px 0 0; }

.verifica__numero { grid-row: span 2; color: var(--gold); font: 700 38px/1 var(--font); font-variant-numeric: tabular-nums; }

.verifica__nota,
.verifica__detalhe { color: #e9eef5; font-size: 14.5px; line-height: 1.45; }

.verifica__nota { align-self: center; }
.verifica__nota.is-ok { color: #7ff0ab; }

.verifica__detalhe { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.verifica__detalhe:empty { display: none; }

.verifica__detalhe li { display: grid; gap: 1px; min-width: 0; padding-left: 12px; border-left: 2px solid rgba(143, 179, 255, .35); }
.verifica__detalhe li.is-proprio { border-left-color: #25d366; }
.verifica__detalhe code { color: #8fb3ff; font: 12.5px/1.4 ui-monospace, "Cascadia Code", Consolas, monospace; overflow-wrap: anywhere; }

.verifica__rodape { margin: 10px 0 0; padding-top: 12px; border-top: 1px dashed rgba(143, 179, 255, .2); color: var(--muted); font-size: 12.5px; line-height: 1.5; text-wrap: pretty; }

@media (prefers-reduced-motion: no-preference) {
  .verifica__ponto { animation: ponto-vivo 2.2s var(--ease) infinite; }
  .verifica.is-lido::after { animation: varre-quadro 1.6s var(--ease) .2s; }
}

@keyframes ponto-vivo { 0%, 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, .45); } 60% { box-shadow: 0 0 0 7px rgba(37, 211, 102, 0); } }
@keyframes varre-quadro { 0% { opacity: 1; transform: translateY(-70px); } 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(520px); } }

@media (min-width: 1100px) {
  .verifica { max-width: none; padding: 22px 26px 18px; }
  .verifica__numero { font-size: 44px; }
}

/* ---------- O texto: sumário e a folha ---------- */

.politica {
  position: relative;
  isolation: isolate;
  padding: 64px var(--gutter) 88px;
  background: #0b1d3d;
}

/* Grade de planta em volta da folha. */
.politica::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(143, 179, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(143, 179, 255, .05) 1px, transparent 1px);
  background-size: 40px 40px;
}

.politica__inner { display: grid; gap: 28px; max-width: 1240px; margin: 0 auto; }

.sumario { min-width: 0; }

.sumario__titulo {
  margin: 0 0 12px;
  color: var(--gold);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .2em;
  text-align: center;
  text-transform: uppercase;
}

.sumario ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 14px; margin: 0; padding: 0; list-style: none; }

.sumario a {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 4px;
  border-bottom: 1px solid rgba(143, 179, 255, .14);
  color: #c8d3e3;
  font-size: 14.5px;
  line-height: 1.3;
  text-decoration: none;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}

.sumario a span { flex: none; color: rgba(143, 179, 255, .6); font: 700 11.5px/1 ui-monospace, "Cascadia Code", Consolas, monospace; transition: color .2s var(--ease); }
.sumario a:hover { color: #fff; border-color: rgba(242, 185, 64, .6); }
.sumario a:hover span { color: var(--gold); }
.sumario a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 4px; }

/* A folha: papel claro, letra escura, filete dourado no topo. */
.folha {
  min-width: 0;
  padding: 22px 20px 30px;
  border-top: 4px solid var(--gold);
  border-radius: 6px 6px 14px 14px;
  background:
    radial-gradient(circle at 15% 0%, rgba(255, 255, 255, .8), transparent 45%),
    #f6f3ec;
  color: #1d2b44;
  box-shadow: 0 60px 90px -50px rgba(0, 0, 0, .95), 0 0 0 1px rgba(255, 255, 255, .06);
}

.folha__cabeca {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 14px;
  margin: 0 0 6px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(29, 43, 68, .14);
  color: #6b7a93;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.folha__parte { padding: 26px 0 4px; border-bottom: 1px solid rgba(29, 43, 68, .1); scroll-margin-top: 24px; }
.folha__parte:last-child { border-bottom: 0; }

.folha h2 {
  display: grid;
  justify-items: center;
  gap: 6px;
  margin: 0 0 12px;
  color: #0a1a30;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-wrap: balance;
}

.folha h2 span { color: #b0821c; font: 700 13px/1 ui-monospace, "Cascadia Code", Consolas, monospace; letter-spacing: .08em; }

.folha p,
.folha li {
  font-size: 16.5px;
  line-height: 1.75;
  text-align: justify;
  hyphens: auto;
  text-wrap: pretty;
}

.folha p { margin: 0 0 14px; }
.folha strong { color: #0a1a30; }

.folha ul { display: grid; gap: 10px; margin: 0 0 16px; padding: 0; list-style: none; }

/* Marcador: filete dourado curto. */
.folha li { position: relative; padding-left: 22px; }
.folha li::before { content: ""; position: absolute; left: 0; top: .86em; width: 12px; height: 2px; border-radius: 1px; background: #c99a2e; }

.folha a:not(.canal__botao) {
  color: #2050a0;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: rgba(32, 80, 160, .35);
  text-underline-offset: 3px;
  transition: text-decoration-color .2s var(--ease);
}

.folha a:not(.canal__botao):hover { text-decoration-color: #2050a0; }
.folha a:focus-visible { outline: 2px solid #2050a0; outline-offset: 2px; border-radius: 2px; }

.folha__acoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 6px 0 22px; }

/* Celular: itens de lista curtos ficam alinhados à esquerda (justificar abriria buracos entre as palavras). */
@media (max-width: 767px) {
  .folha li { text-align: left; hyphens: manual; }
}

@media (min-width: 768px) {
  .folha { padding: 34px 44px 40px; }
  .sumario ol { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Computador: sumário parado na coluna da esquerda, folha à direita. */
@media (min-width: 1100px) {
  .politica { padding: 88px var(--gutter) 120px; }
  .politica__inner { grid-template-columns: 250px minmax(0, 860px); justify-content: center; align-items: start; gap: 48px; }
  .sumario { padding-top: 8px; }
  .sumario__titulo { text-align: left; }
  .sumario ol { grid-template-columns: 1fr; }
  .folha { padding: 48px 64px 52px; }
  .folha__cabeca { justify-content: space-between; }
  .folha h2 { grid-template-columns: auto 1fr; align-items: baseline; justify-items: start; gap: 14px; font-size: 26px; text-align: left; }
  .folha__acoes { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .sumario a, .sumario a span { transition: none; }
}

/* ---------- Criação de Sites: "Já tenho um site" (domínio que continua + sinais de que é hora de refazer) ---------- */

.troca {
  padding: 72px var(--gutter) 80px;
  background: #0b1d3d;
  color: #fff;
}

.troca__inner { display: grid; gap: 56px; max-width: 1240px; margin: 0 auto; }
.troca__col { min-width: 0; }

/* O que continua e o que muda na troca do site. */
.troca__quadro {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  margin: 24px 0 0;
  overflow: hidden;
  border: 1px solid rgba(143, 179, 255, .2);
  border-radius: 14px;
  background: #081628;
}

.troca__lado { padding: 16px 18px 18px; }
.troca__lado--muda { border-left: 1px dashed rgba(143, 179, 255, .25); background: rgba(242, 185, 64, .05); }

.troca__lado dt {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.troca__lado--fica dt { color: #7ff0ab; }
.troca__lado--muda dt { color: var(--gold); }
.troca__lado dt::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }

.troca__lado dd { margin: 0; padding: 6px 0; border-top: 1px solid rgba(143, 179, 255, .1); color: #e9eef5; font-size: 15px; line-height: 1.4; }
.troca__lado dd:first-of-type { border-top: 0; padding-top: 0; }

.troca__mais { margin: 16px 0 0; font-size: 15.5px; }

.troca__mais a {
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  background: linear-gradient(rgba(242, 185, 64, .45), rgba(242, 185, 64, .45)) 0 100% / 100% 2px no-repeat;
  transition: background-size .3s var(--ease);
}

.troca__mais a::after { content: " \2192"; }
.troca__mais a:hover { background-size: 100% 45%; }
.troca__mais a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 2px; }

/* Sinais de que o site precisa ser refeito: lista com marca de alerta. */
.sinais { display: grid; gap: 8px; margin: 24px 0 0; padding: 0; list-style: none; }

.sinais li {
  position: relative;
  padding: 12px 14px 12px 44px;
  border: 1px solid rgba(143, 179, 255, .16);
  border-radius: 11px;
  background: rgba(255, 255, 255, .03);
  color: #e9eef5;
  font-size: 15.5px;
  line-height: 1.45;
  text-wrap: pretty;
}

.sinais li::before {
  content: "!";
  position: absolute;
  left: 14px;
  top: 50%;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  border-radius: 50%;
  background: rgba(242, 185, 64, .16);
  color: var(--gold);
  font-size: 12px;
  font-weight: 700;
}

@media (max-width: 479px) {
  .troca__quadro { grid-template-columns: minmax(0, 1fr); }
  .troca__lado--muda { border-left: 0; border-top: 1px dashed rgba(143, 179, 255, .25); }
  .troca__mais { text-align: center; }
}

@media (min-width: 1100px) {
  .troca { padding: 104px var(--gutter) 112px; }
  .troca__inner { grid-template-columns: 1fr 1fr; align-items: center; gap: 0; }
  .troca__col:first-child { padding-right: 72px; }
  .troca__col + .troca__col { padding-left: 72px; border-left: 1px solid rgba(143, 179, 255, .14); }
}

@media (prefers-reduced-motion: reduce) {
  .troca__mais a { transition: none; }
}

/* Nome de marca que não pode ser partido pela hifenização (What-sApp). */
.sem-hifen { hyphens: none; white-space: nowrap; }

/* ---------- Voltar ao topo ---------- */

/* Computador: botão flutuante, só a partir de 1024 px. */
.topo-flutuante { display: none; }

@media (min-width: 1024px) {
  .topo-flutuante {
    position: fixed;
    right: 24px;
    bottom: 28px;
    z-index: 70;
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(10, 26, 48, .78);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 18px 40px -16px rgba(0, 0, 0, .7);
    color: #fff;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(18px) scale(.86);
    transition: opacity .35s var(--ease), transform .5s cubic-bezier(.3, 1.4, .5, 1), box-shadow .3s var(--ease), visibility 0s linear .5s;
  }

  .topo-flutuante.is-visivel {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .35s var(--ease), transform .5s cubic-bezier(.3, 1.4, .5, 1), box-shadow .3s var(--ease), visibility 0s;
  }

  .topo-flutuante.is-visivel:hover {
    transform: translateY(-3px);
    box-shadow: inset 0 0 0 1px rgba(242, 185, 64, .5), 0 0 0 6px rgba(242, 185, 64, .12), 0 22px 44px -16px rgba(0, 0, 0, .75);
  }

  .topo-flutuante:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
}

/* Anel dourado: mostra quanto da página já foi lido. */
.topo-flutuante__anel { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.topo-flutuante__trilho { fill: none; stroke: rgba(255, 255, 255, .12); stroke-width: 2.5; }

.topo-flutuante__progresso {
  fill: none;
  stroke: var(--gold);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  filter: drop-shadow(0 0 4px rgba(242, 185, 64, .6));
}

/* Duas setas: no hover a de cima sai e a dourada entra por baixo. */
.topo-flutuante__setas { position: relative; width: 18px; height: 18px; overflow: hidden; }

.topo-flutuante__setas svg {
  position: absolute;
  inset: 0;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .45s var(--ease);
}

.topo-flutuante__setas svg:last-child { color: var(--gold); transform: translateY(150%); }
.topo-flutuante:hover .topo-flutuante__setas svg:first-child { transform: translateY(-150%); }
.topo-flutuante:hover .topo-flutuante__setas svg:last-child { transform: none; }

.topo-flutuante__dica {
  position: absolute;
  top: 50%;
  right: calc(100% + 12px);
  padding: 9px 12px;
  border-radius: 8px;
  background: #0a1a30;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 12px 24px -12px rgba(0, 0, 0, .6);
  color: #fff;
  font: 700 12px/1 var(--font);
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  transform: translate(8px, -50%);
  transition: opacity .25s var(--ease), transform .3s var(--ease);
  pointer-events: none;
}

.topo-flutuante:hover .topo-flutuante__dica,
.topo-flutuante:focus-visible .topo-flutuante__dica { opacity: 1; transform: translate(0, -50%); }

/* Ao clicar, a seta "decola". */
.topo-flutuante.is-subindo .topo-flutuante__setas svg:first-child { animation: decola .5s var(--ease); }

@keyframes decola { 50% { transform: translateY(-160%); } 51% { transform: translateY(160%); } }

@media (prefers-reduced-motion: reduce) {
  .topo-flutuante, .topo-flutuante.is-visivel, .topo-flutuante__setas svg, .topo-flutuante__dica { transition: none; }
  .topo-flutuante.is-subindo .topo-flutuante__setas svg:first-child { animation: none; }
}