/* Entry Studio Digital
   Padrões da casa: cores, tipos, espaçamentos e componentes.
   Os sites dos clientes partem destes mesmos padrões, com identidade própria. */

:root {
  --preto: #0F0F0F;
  --grafite: #2A2A2A;
  --dourado: #C8A96E;
  --dourado-claro: #DCC494;
  --offwhite: #F5F5F0;
  --branco: #FFFFFF;
  --cinza: #9A9A94;
  --linha-escura: rgba(255, 255, 255, .1);
  --linha-clara: rgba(15, 15, 15, .12);

  --serifa: "Libre Baskerville", Georgia, "Times New Roman", serif;
  --sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;

  --raio: 14px;
  --gutter: 20px;
  --largura: 1120px;
  --sec: clamp(48px, 5.5vw, 64px);
}

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

html { scroll-behavior: smooth; scroll-padding-top: 76px; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--preto);
  color: var(--offwhite);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }

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

.wrap { width: min(100% - 2 * var(--gutter), var(--largura)); margin-inline: auto; }
.wrap--estreita { --largura: 760px; }

/* ---------- Marca ---------- */

.porta { display: block; width: 26px; height: auto; overflow: visible; }
.porta__batente { fill: none; stroke: var(--branco); stroke-width: 3.5; }
.porta__folha { fill: var(--grafite); stroke: var(--dourado); stroke-width: 1.4; stroke-linejoin: round; }
.porta__macaneta { fill: var(--dourado); }

.marca { display: inline-flex; align-items: center; gap: 12px; }
.marca__txt { display: grid; gap: 3px; line-height: 1; }
.marca__nome { font-family: var(--serifa); font-weight: 700; font-size: 20px; letter-spacing: .28em; }
.marca__sub { font-size: 8.5px; font-weight: 600; letter-spacing: .42em; color: var(--dourado); }

/* ---------- Botões ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 28px;
  border: 1px solid transparent; border-radius: 999px;
  font-weight: 700; font-size: 15px; letter-spacing: .04em;
  transition: transform .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn--p { min-height: 42px; padding: 0 20px; font-size: 14px; }
.btn--ouro { background: var(--dourado); color: var(--preto); }
.btn--ouro:hover { background: var(--dourado-claro); }
.btn--linha { border-color: var(--linha-escura); color: var(--offwhite); }
.btn--linha:hover { border-color: var(--dourado); color: var(--dourado); }
.btn--escuro { background: var(--preto); color: var(--offwhite); }
.btn--escuro:hover { background: var(--grafite); }

/* ---------- Navegação ---------- */

.nav {
  position: sticky; top: 0; z-index: 20;
  background: rgba(15, 15, 15, .86);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--linha-escura);
}
.nav__in { display: flex; align-items: center; justify-content: space-between; min-height: 68px; }

.nav__botao {
  display: grid; gap: 7px; place-content: center;
  width: 44px; height: 44px; padding: 0;
  background: none; border: 0; cursor: pointer;
}
.nav__botao span { display: block; width: 24px; height: 2px; background: var(--offwhite); transition: transform .25s ease; }
.nav__botao[aria-expanded="true"] span:first-child { transform: translateY(4.5px) rotate(45deg); }
.nav__botao[aria-expanded="true"] span:last-child { transform: translateY(-4.5px) rotate(-45deg); }

.nav__menu {
  position: absolute; inset: 68px 0 auto 0;
  display: none; flex-direction: column; align-items: center; gap: 22px;
  padding: 28px var(--gutter) 34px;
  background: var(--preto); border-bottom: 1px solid var(--linha-escura);
  font-size: 15px; font-weight: 500;
}
.nav__menu.aberto { display: flex; }
.nav__menu a:not(.btn) { color: var(--cinza); transition: color .2s ease; }
.nav__menu a:not(.btn):hover { color: var(--offwhite); }

@media (min-width: 860px) {
  .nav__botao { display: none; }
  .nav__menu {
    position: static; display: flex; flex-direction: row; gap: 34px;
    padding: 0; background: none; border: 0; font-size: 14px;
  }
}

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

.hero { position: relative; text-align: center; }
.hero__in {
  position: relative;
  display: grid; justify-items: center;
  padding-block: clamp(64px, 12vw, 120px) clamp(80px, 13vw, 140px);
}
.porta--hero { width: clamp(56px, 12vw, 76px); margin-bottom: 32px; }

/* ---------- Hero da home: a porta ----------
   O fundo escuro tem um recorte no vão da porta e, por ele, se vê a seção
   seguinte subindo por trás. Ao rolar, a porta abre e o recorte cresce até
   virar a tela inteira. As variáveis --abre, --zoom, --txt e --luz vêm do script. */

.p3d { position: relative; z-index: 2; width: clamp(96px, 21vw, 136px); aspect-ratio: 64 / 88; perspective: 620px; }
.p3d__vao { position: absolute; inset: 5px; border-radius: 3px; overflow: hidden; }
.p3d__vao::after {
  content: ""; position: absolute; inset: 0; opacity: var(--luz);
  background: linear-gradient(180deg, #FFFBEF 0%, #F3DDAE 55%, #C8A96E 100%);
}
.p3d__batente { position: absolute; inset: 0; border: 3px solid var(--branco); border-radius: 6px; }
.p3d__folha {
  position: absolute; inset: 5px;
  border: 1.5px solid var(--dourado); border-radius: 2px;
  background: linear-gradient(90deg, #353535, #232323);
  transform-origin: left center;
  transform: rotateY(calc(var(--abre) * 84deg));
  filter: brightness(calc(1 - var(--abre) * .32));
}
.p3d__folha i {
  position: absolute; right: 13%; top: 50%; width: 10%; aspect-ratio: 1; translate: 0 -50%;
  border-radius: 50%; background: var(--dourado);
}

.hero--porta { --abre: .16; --zoom: 1; --txt: 1; --luz: 1; }
.porta-palco { position: relative; display: grid; place-items: center; padding-block: 72px 96px; }
.porta-palco__fundo { position: absolute; inset: 0; background: var(--preto); }
.porta-palco__in { position: relative; display: grid; justify-items: center; }
.porta-palco__porta { position: relative; z-index: 2; transform: scale(var(--zoom)); will-change: transform; animation: surgir 1s .15s both; }
.porta-palco__txt {
  position: relative; z-index: 1; display: grid; justify-items: center; margin-top: 36px;
  opacity: var(--txt); transform: translateY(calc((1 - var(--txt)) * -26px));
}
.porta-palco__txt > * { animation: subir .9s both; }
.porta-palco__txt > :nth-child(1) { animation-delay: .35s; }
.porta-palco__txt > :nth-child(2) { animation-delay: .5s; }
.porta-palco__txt > :nth-child(3) { animation-delay: .65s; }
.porta-palco__txt > :nth-child(4) { animation-delay: .8s; }
@keyframes surgir { from { opacity: 0; } }
@keyframes subir { from { opacity: 0; transform: translateY(14px); } }

/* Só com o script ativo: palco fixo e a seção seguinte subindo por trás. */
.porta-ativa .hero--porta { height: 230svh; background: var(--offwhite); }
.porta-ativa .porta-palco { position: sticky; top: 0; z-index: 2; height: 100svh; padding: 68px 0 0; overflow: hidden; }
.porta-ativa .hero--porta + .sec { position: relative; z-index: 1; margin-top: -100svh; }

@media (prefers-reduced-motion: reduce) {
  .hero--porta { --abre: .75; }
  .porta-palco__porta, .porta-palco__txt > * { animation: none; }
}

.sobretitulo {
  font-size: 11.5px; font-weight: 600; letter-spacing: .34em; text-transform: uppercase;
  color: var(--dourado);
}
.sobretitulo--escuro { color: #8E7440; }

h1 {
  margin-top: 20px;
  font-family: var(--serifa); font-weight: 700;
  font-size: clamp(42px, 10.5vw, 88px); line-height: 1.06; letter-spacing: -.015em;
  text-wrap: balance;
}
h1 em { font-style: italic; font-weight: 400; color: var(--dourado); }

.hero__sub {
  max-width: 30em; margin-top: 26px;
  font-size: clamp(17px, 2.4vw, 20px); color: #C9C9C2; text-wrap: balance;
}
.hero__acoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 40px; }

/* ---------- Seções ---------- */

.sec { padding-block: var(--sec); }
.sec--clara { background: var(--offwhite); color: var(--preto); }
.sec--escura { background: var(--preto); }

.sec__topo { display: grid; justify-items: center; gap: 16px; margin-bottom: clamp(40px, 6vw, 68px); text-align: center; }

h2 {
  font-family: var(--serifa); font-weight: 700;
  font-size: clamp(30px, 5.6vw, 48px); line-height: 1.14; letter-spacing: -.01em;
  text-wrap: balance;
}
h3 { font-family: var(--serifa); font-weight: 700; font-size: 21px; line-height: 1.25; }

/* ---------- Vitrine ---------- */

.vitrine { display: grid; gap: 36px; }
@media (min-width: 760px) { .vitrine { grid-template-columns: 1fr 1fr; gap: 44px 32px; } }

.janela {
  display: block; overflow: hidden;
  border-radius: var(--raio); border: 1px solid var(--linha-clara);
  background: var(--grafite);
  box-shadow: 0 22px 44px -26px rgba(15, 15, 15, .5);
  transition: transform .35s ease, box-shadow .35s ease;
}
a.janela:hover { transform: translateY(-6px); box-shadow: 0 32px 54px -26px rgba(15, 15, 15, .58); }
.janela__barra { display: flex; gap: 6px; padding: 11px 14px; background: var(--grafite); }
.janela__barra i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .2); }
.janela__barra i:first-child { background: var(--dourado); }

/* A foto é a página inteira do trabalho; ela rola dentro da moldura
   (mouse em cima no computador, sozinha ao aparecer na tela no celular). */
.janela__tela { container-type: inline-size; aspect-ratio: 16 / 10; overflow: hidden; }
.janela__tela img { width: 100%; height: auto; transition: transform 1.4s cubic-bezier(.3, 0, .2, 1); }
.janela.rolando .janela__tela img { transform: translateY(calc(-100% + 62.5cqw)); transition-duration: 11s; }
@media (hover: hover) {
  .janela:hover .janela__tela img { transform: translateY(calc(-100% + 62.5cqw)); transition-duration: 11s; }
}

.obra__txt { padding: 18px 4px 0; }
.obra__txt p { margin-top: 4px; font-size: 15px; color: #6B6B66; }

/* ---------- Serviços ---------- */

.servicos { display: grid; gap: 18px; }
@media (min-width: 700px) { .servicos { grid-template-columns: 1fr 1fr; gap: 24px; } }
@media (min-width: 1040px) { .servicos { grid-template-columns: repeat(4, 1fr); } }

.servico {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  padding: 26px 26px 28px;
  border: 1px solid var(--linha-escura); border-radius: var(--raio);
  background: linear-gradient(180deg, rgba(42, 42, 42, .7), rgba(42, 42, 42, .22));
  transition: border-color .3s ease;
}
/* luz dourada que acompanha o cursor (posição vem do script) */
.servico::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 0%), rgba(200, 169, 110, .17), transparent 70%);
  opacity: 0; transition: opacity .35s ease;
}
@media (hover: hover) {
  .servico:hover { border-color: rgba(200, 169, 110, .45); }
  .servico:hover::before { opacity: 1; }
}
.servico > * { position: relative; }

/* Miniaturas animadas dos serviços */
.mini {
  position: relative; height: 116px; margin-bottom: 24px; overflow: hidden;
  border: 1px solid var(--linha-escura); border-radius: 10px;
  background: rgba(15, 15, 15, .55);
}
.mini i, .mini b { display: block; position: absolute; border-radius: 3px; background: rgba(245, 245, 240, .16); }

.mini--site .m-barra { inset: 0 0 auto 0; height: 16px; border-radius: 0; background: rgba(245, 245, 240, .07); }
.mini--site .m-barra::before {
  content: ""; position: absolute; left: 9px; top: 6px; width: 4px; height: 4px; border-radius: 50%;
  background: var(--dourado); box-shadow: 8px 0 rgba(245, 245, 240, .25), 16px 0 rgba(245, 245, 240, .25);
}
.mini--site .m-bloco { left: 12px; right: 12px; top: 26px; height: 40px; background: rgba(200, 169, 110, .3); transform-origin: left; animation: mini-crescer 5s ease-in-out infinite; }
.mini--site .m-l1 { left: 12px; top: 76px; width: 58%; height: 6px; transform-origin: left; animation: mini-crescer 5s .35s ease-in-out infinite; }
.mini--site .m-l2 { left: 12px; top: 90px; width: 38%; height: 6px; transform-origin: left; animation: mini-crescer 5s .6s ease-in-out infinite; }
@keyframes mini-crescer { 0%, 6% { transform: scaleX(0); opacity: 0; } 24%, 86% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }

.mini--lp .m-l1 { left: 50%; top: 18px; width: 54%; height: 8px; translate: -50% 0; }
.mini--lp .m-cont { position: absolute; left: 50%; top: 40px; translate: -50% 0; display: flex; gap: 7px; }
.mini--lp .m-cont i { position: static; width: 24px; height: 26px; background: rgba(245, 245, 240, .1); animation: mini-piscar 3s ease-in-out infinite; }
.mini--lp .m-cont i:nth-child(2) { animation-delay: .25s; }
.mini--lp .m-cont i:nth-child(3) { animation-delay: .5s; }
.mini--lp .m-cont i:nth-child(4) { animation-delay: .75s; }
.mini--lp .m-botao { left: 50%; top: 80px; width: 78px; height: 18px; translate: -50% 0; border-radius: 99px; background: var(--dourado); animation: mini-pulsar 3s ease-in-out infinite; }
@keyframes mini-piscar { 0%, 100% { background: rgba(245, 245, 240, .1); } 12% { background: rgba(200, 169, 110, .55); } 30% { background: rgba(245, 245, 240, .1); } }
@keyframes mini-pulsar { 0%, 100% { scale: 1; opacity: .85; } 50% { scale: 1.07; opacity: 1; } }

.mini--app .m-fone {
  position: absolute; left: 50%; top: 12px; width: 62px; height: 122px; translate: -50% 0; overflow: hidden;
  border: 2px solid rgba(245, 245, 240, .34); border-radius: 12px;
}
.mini--app .m-fone i { left: 7px; right: 7px; height: 16px; animation: mini-subir 4.5s cubic-bezier(.3, .6, .2, 1) infinite; }
.mini--app .m-fone i:nth-child(1) { top: 14px; }
.mini--app .m-fone i:nth-child(2) { top: 36px; animation-delay: .15s; }
.mini--app .m-fone i:nth-child(3) { top: 58px; animation-delay: .3s; background: rgba(200, 169, 110, .4); }
.mini--app .m-fone i:nth-child(4) { top: 80px; animation-delay: .45s; }
.mini--app .m-fone b { right: 5px; top: 5px; width: 7px; height: 7px; border-radius: 50%; background: var(--dourado); animation: mini-aviso 4.5s ease-in-out infinite; }
@keyframes mini-subir { 0% { transform: translateY(46px); opacity: 0; } 22%, 84% { transform: none; opacity: 1; } 100% { transform: translateY(-14px); opacity: 0; } }
@keyframes mini-aviso { 0%, 30% { scale: 0; } 40% { scale: 1.5; } 48%, 86% { scale: 1; } 100% { scale: 0; } }

.mini--sis { display: flex; align-items: flex-end; justify-content: center; gap: 9px; padding: 18px 20px 16px; }
.mini--sis::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: 15px; height: 1px; background: rgba(245, 245, 240, .22); }
.mini--sis i { position: static; flex: 1; max-width: 22px; border-radius: 3px 3px 0 0; transform-origin: bottom; animation: mini-barra 4s cubic-bezier(.3, .7, .2, 1) infinite; }
.mini--sis i:nth-child(1) { height: 34%; }
.mini--sis i:nth-child(2) { height: 52%; animation-delay: .12s; }
.mini--sis i:nth-child(3) { height: 44%; animation-delay: .24s; }
.mini--sis i:nth-child(4) { height: 72%; animation-delay: .36s; }
.mini--sis i:nth-child(5) { height: 96%; animation-delay: .48s; background: var(--dourado); }
@keyframes mini-barra { 0%, 4% { transform: scaleY(0); } 28%, 88% { transform: scaleY(1); } 100% { transform: scaleY(0); } }
.servico p { margin-top: 12px; font-size: 16px; color: #B9B9B2; }
.servico__pe {
  margin-top: auto; padding-top: 26px;
  font-size: 13px; font-weight: 600; letter-spacing: .08em; color: var(--cinza);
}
a.servico__pe { color: var(--dourado); transition: color .2s ease; }
a.servico__pe:hover { color: var(--dourado-claro); }

/* ---------- Passos ---------- */

.passos { display: grid; gap: 18px; }
@media (min-width: 860px) { .passos { grid-template-columns: repeat(3, 1fr); gap: 24px; } }

.passo {
  padding: 32px 28px 34px;
  border: 1px solid var(--linha-escura); border-radius: var(--raio);
  background: linear-gradient(180deg, rgba(42, 42, 42, .7), rgba(42, 42, 42, .22));
}
.passo__n { display: block; margin-bottom: 26px; font-family: var(--serifa); font-size: 15px; letter-spacing: .12em; color: var(--dourado); }
.passo p { margin-top: 10px; font-size: 16px; color: #B9B9B2; }

/* ---------- Valor ---------- */

.valor {
  display: grid; justify-items: center;
  max-width: 560px; margin-inline: auto; padding: clamp(36px, 6vw, 56px) clamp(24px, 5vw, 52px);
  background: var(--branco); border: 1px solid var(--linha-clara); border-radius: 22px;
  box-shadow: 0 30px 60px -40px rgba(15, 15, 15, .4);
  text-align: center;
}
.valor__preco { display: flex; align-items: flex-start; gap: 8px; font-family: var(--serifa); font-weight: 700; line-height: 1; }
.valor__moeda { margin-top: .5em; font-size: 22px; color: #8E7440; }
.valor__numero { font-size: clamp(76px, 17vw, 112px); letter-spacing: -.03em; }
.valor__forma { margin-top: 14px; font-size: 15px; font-weight: 600; color: #6B6B66; }

.valor__lista {
  display: grid; gap: 13px; width: 100%;
  margin-block: 34px 0; padding-block: 30px;
  border-block: 1px solid var(--linha-clara);
  text-align: left; font-size: 16px;
}
.valor__lista li { position: relative; padding-left: 30px; }
.valor__lista li::before {
  content: ""; position: absolute; left: 4px; top: .46em;
  width: 11px; height: 6px;
  border-left: 2px solid #8E7440; border-bottom: 2px solid #8E7440;
  transform: rotate(-45deg);
}
.valor__nota { margin-top: 16px; font-size: 14px; color: #6B6B66; }

/* ---------- Dúvidas ---------- */

.faq { border-top: 1px solid var(--linha-escura); }
.faq__item { border-bottom: 1px solid var(--linha-escura); }
.faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 24px 2px; cursor: pointer; list-style: none;
  font-family: var(--serifa); font-weight: 700; font-size: clamp(17px, 2.5vw, 20px);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: ""; flex: none; width: 10px; height: 10px;
  border-right: 2px solid var(--dourado); border-bottom: 2px solid var(--dourado);
  transform: rotate(45deg); transition: transform .25s ease;
}
.faq__item[open] summary::after { transform: rotate(-135deg); }
.faq__item p { padding: 0 2px 26px; max-width: 38em; color: #B9B9B2; }

/* ---------- Chamada final ---------- */

.chamada {
  background: var(--grafite);
  border-top: 1px solid var(--linha-escura);
  text-align: center;
}
.chamada__in { display: grid; justify-items: center; gap: 18px; padding-block: var(--sec); }
.chamada p { color: #C9C9C2; }
.chamada .btn { margin-top: 14px; }
.chamada__email { font-size: 15px; color: var(--cinza); border-bottom: 1px solid transparent; transition: color .2s ease, border-color .2s ease; }
.chamada__email:hover { color: var(--dourado); border-color: var(--dourado); }

/* ---------- Rodapé ---------- */

.rodape { background: var(--preto); border-top: 1px solid var(--linha-escura); }
.rodape__in { display: grid; justify-items: center; gap: 22px; padding-block: 44px; text-align: center; }
.rodape__legal { font-size: 12.5px; color: #77776F; }

/* ---------- Página de sites: ser encontrado ---------- */

.sec--grafite { background: var(--grafite); }

.achados { display: grid; gap: 34px 28px; }
@media (min-width: 640px) { .achados { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .achados { grid-template-columns: repeat(4, 1fr); } }
.achado svg { width: 34px; height: 34px; margin-bottom: 18px; fill: none; stroke: var(--dourado); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.achado p { margin-top: 8px; font-size: 16px; color: #C4C4BD; }

.adicional {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 28px;
  max-width: 560px; margin: 22px auto 0; padding: 24px 28px;
  border: 1px dashed rgba(15, 15, 15, .28); border-radius: 18px;
}
.adicional__rotulo { margin-bottom: 6px; font-size: 11px; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; color: #8E7440; }
.adicional p:not(.adicional__rotulo) { margin-top: 4px; font-size: 15px; color: #6B6B66; }
.adicional__preco { font-size: 13px; font-weight: 700; letter-spacing: .08em; white-space: nowrap; }

/* ---------- Títulos que entram palavra a palavra ---------- */

.palavras .p { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .16em; margin-bottom: -.16em; }
.palavras .p > span {
  display: inline-block; transform: translateY(110%);
  transition: transform .85s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--i) * 70ms);
}
.palavras.visivel .p > span { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .mini *, .mini *::before { animation: none !important; }
  .janela__tela img { transition: none; }
  .palavras .p > span { transform: none; transition: none; }
}

/* ---------- Entrada dos blocos ---------- */

.revela { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.revela.visivel { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .revela { opacity: 1; transform: none; transition: none; }
  .porta--hero .porta__folha { animation: none; }
  .btn, .janela { transition: none; }
}

/* ---------- acabamento (revisão de 12/11) ---------- */
/* o menu fica sempre acima do palco da porta (a sombra da folha não passa por cima dele) */
.nav { z-index: 40; }
/* botão do menu some enquanto o topo, que tem o mesmo chamado, está na tela */
.nav__menu .btn { transition: opacity .3s ease, transform .2s ease, background-color .2s ease; }
.no-topo .nav__menu .btn { opacity: 0; pointer-events: none; }
@media (max-width: 859px) { .no-topo .nav__menu .btn { opacity: 1; pointer-events: auto; } }
/* botão flutuante da página de oferta, só no celular e só com número de WhatsApp */
.flutua { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 30; display: inline-flex; align-items: center; min-height: 52px; padding: 0 22px; border-radius: 999px; background: var(--dourado); color: var(--preto); font-weight: 700; font-size: 15px; box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .6); transition: opacity .3s ease, transform .3s ease; }
.flutua[hidden] { display: none; }
.flutua.escondido { opacity: 0; transform: translateY(14px); pointer-events: none; }
@media (min-width: 860px) { .flutua { display: none !important; } }
.rodape__legal a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
/* quebras de linha equilibradas (revisão de 13/11) */
p { text-wrap: pretty; }
h3, .valor__forma, .chamada p, .faq__item p { text-wrap: balance; }

/* bônus em destaque, fora da lista (13/11) */
.bonus { display: flex; align-items: center; gap: 16px; width: 100%; margin: 22px 0 32px; padding: 18px 20px; border-radius: 16px; background: #FBF4E4; border: 1px dashed #C8A96E; text-align: left; }
.bonus__selo { flex: none; padding: 6px 12px; border-radius: 999px; background: var(--dourado); color: var(--preto); font-size: 11px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; }
.bonus p { margin: 0; font-size: 14px; color: #6B6B66; text-wrap: balance; }
.bonus b { display: block; font-size: 16px; color: var(--preto); }
@media (max-width: 420px) { .bonus { flex-direction: column; align-items: flex-start; gap: 10px; } }
.passo p, .passos p { text-wrap: balance; }

/* ---------- topo da oferta: o produto no lugar da porta (13/11) ---------- */
.hero--oferta { text-align: left; overflow: hidden; }
.oferta__in { display: grid; gap: 48px; align-items: center; padding-block: clamp(48px, 7vw, 88px); }
@media (min-width: 900px) { .oferta__in { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 64px; } }
.hero--oferta .hero__sub { margin-inline: 0; }
.hero--oferta .hero__acoes { justify-content: flex-start; }
.oferta__preco { margin-top: 14px; font-size: 14px; color: var(--cinza); }
@media (max-width: 899px) { .hero--oferta { text-align: center; } .hero--oferta .hero__sub { margin-inline: auto; } .hero--oferta .hero__acoes { justify-content: center; } }

/* celular com o site rolando sozinho */
.celular { position: relative; margin: 0; justify-self: center; display: grid; justify-items: center; gap: 14px; }
.celular__corpo { width: min(68vw, 280px); aspect-ratio: 9 / 19; padding: 10px; border-radius: 42px; background: #1C1C1C; box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 40px 80px -30px rgba(0, 0, 0, .9), 0 0 60px -10px rgba(200, 169, 110, .18); }
.celular__tela { position: relative; height: 100%; border-radius: 33px; overflow: hidden; background: #2A211B; }
.celular__tela img { position: absolute; inset: 0 0 auto; width: 100%; height: auto; opacity: 0; transition: opacity .9s ease; }
.celular__tela img.ativo { opacity: 1; animation: rolar-site 5.6s cubic-bezier(.45, 0, .55, 1) both; }
.celular:hover .celular__tela img { animation-play-state: paused; }
@keyframes rolar-site { 0%, 12% { transform: translateY(0); } 100% { transform: translateY(var(--desce, -1400px)); } }
.celular figcaption { font-size: 13px; color: var(--cinza); }
.celular figcaption a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.celular figcaption a:hover { color: var(--dourado); }
@media (prefers-reduced-motion: reduce) { .celular__tela img { animation: none; } }
.celular figcaption a { transition: opacity .4s ease; }

/* setas e pontos do celular da oferta */
.celular__seta {
  position: absolute; top: calc((min(68vw, 280px) * 19 / 9) / 2); translate: 0 -50%; z-index: 2;
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 1px solid rgba(245, 245, 240, .22); border-radius: 50%; background: rgba(15, 15, 15, .7);
  color: var(--offwhite); cursor: pointer; transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}
.celular__seta:hover { border-color: var(--dourado); color: var(--dourado); }
.celular__seta svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.celular__seta--ant { left: -58px; }
.celular__seta--prox { right: -58px; }
@media (max-width: 420px) { .celular__seta--ant { left: -50px; } .celular__seta--prox { right: -50px; } }
.celular__pontos { display: flex; gap: 4px; }
.celular__pontos button { width: 28px; height: 28px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.celular__pontos button::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: rgba(245, 245, 240, .28); transition: background-color .25s ease, width .25s ease; }
.celular__pontos button[aria-current="true"]::before { width: 22px; border-radius: 4px; background: var(--dourado); }
/* lista de sites com número ímpar: o último fica centralizado */
@media (min-width: 760px) { .vitrine > .obra:last-child:nth-child(odd) { grid-column: 1 / -1; width: calc(50% - 16px); justify-self: center; } }
.celular figcaption a:not([href]) { text-decoration: none; }