/* Lancei · reforma 1 · as seções comuns aos três sites completos (2 a 7, o cabeçalho, o rodapé e a abertura).
   Vem depois do previa.css e do opcao-N.css: usa os mesmos tokens (--lima, --vidro, --cromo, --escovado…).
   Celular primeiro; nenhum rótulo abaixo de 12 px; com "reduzir movimento" (sem a classe .anima) tudo fica parado e à vista. */

:root {
  --fibra: url('../img/reforma/lancei-fibra-carbono-plus-ia-640.webp');
  --metal: url('../img/reforma/lancei-metal-escovado-plus-ia-640.webp');
  --grade: url('../img/reforma/lancei-grade-perfurada-plus-ia-512.webp');
  --raios: url('../img/reforma/lancei-raios-plus-ia-960.webp');
  --horizonte: url('../img/reforma/lancei-horizonte-vertical-plus-ia-640.webp');
  --texto-suave: rgba(245, 245, 240, 0.8);
  --linha-vidro: rgba(245, 245, 240, 0.16);
  --mono: ui-monospace, 'Cascadia Code', 'Cascadia Mono', Consolas, 'SFMono-Regular', Menlo, monospace;
  --mola: cubic-bezier(0.34, 1.4, 0.5, 1);
  --sai: cubic-bezier(0.2, 0.7, 0.2, 1);
}
@media (min-width: 48rem) {
  :root {
    --fibra: url('../img/reforma/lancei-fibra-carbono-plus-ia-1254.webp');
    --metal: url('../img/reforma/lancei-metal-escovado-plus-ia-1254.webp');
    --grade: url('../img/reforma/lancei-grade-perfurada-plus-ia-1024.webp');
    --raios: url('../img/reforma/lancei-raios-plus-ia-1536.webp');
    --horizonte: url('../img/reforma/lancei-horizonte-plus-ia-1536.webp');
  }
}

/* as texturas só baixam perto da tela: o reforma.js põe .perto na seção quando ela chega a uma tela e meia (a abertura
   leva só o topo). Sem .js no seletor: o base.js chega com defer, e o navegador já pedia as texturas antes dele; sem
   JS, as seções ficam lisas, com a cor e o texto inteiros */
main > section:not(.topo):not(.perto), .decolagem:not(.perto), .rodape-r:not(.perto) {
  --fibra: none; --metal: none; --grade: none; --raios: none; --horizonte: none;
}

html { overflow-x: clip; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { overflow-x: clip; }
.site-r [id] { scroll-margin-top: calc(var(--altura-cabecalho) + 0.75rem); }

/* ---------- Peças comuns ---------- */

/* o respiro entre as seções ficou mais curto (rodada "nenhum vazio": as duas folgas somadas faziam faixas lisas de
   meia tela entre as seções) */
.secao { position: relative; isolation: isolate; padding: clamp(3rem, 5.5vw, 4.5rem) 0; overflow-x: clip; }
.fundo-secao { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.fundo-secao--fibra {
  background:
    radial-gradient(60% 50% at 85% 10%, rgba(198, 255, 0, 0.1), transparent 70%),
    radial-gradient(70% 60% at 0% 100%, rgba(245, 245, 240, 0.06), transparent 70%),
    linear-gradient(180deg, rgba(11, 11, 11, 0.62), rgba(11, 11, 11, 0.84)),
    var(--fibra) 0 0 / 300px auto repeat,
    var(--fundo);
}
.fundo-secao__trilhas {
  position: absolute;
  inset: 0;
  background: url('../previa/trilhas.svg') 50% 0 / min(1400px, 160%) auto no-repeat;
  opacity: 0.32;
  mask-image: linear-gradient(180deg, transparent, #000 20%, #000 80%, transparent);
}
.fundo-secao--metal {
  background:
    radial-gradient(50% 40% at 50% 0%, rgba(245, 245, 240, 0.16), transparent 70%),
    linear-gradient(180deg, rgba(11, 11, 11, 0.55), rgba(11, 11, 11, 0.8) 40%, rgba(11, 11, 11, 0.9)),
    var(--metal) 50% 0 / 640px auto repeat,
    var(--grafite);
}
.fundo-secao--metal::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 45%;
  background: linear-gradient(180deg, transparent, rgba(11, 11, 11, 0.7)), var(--grade) 0 0 / 220px auto repeat;
  opacity: 0.35;
  mask-image: linear-gradient(180deg, transparent, #000);
}
.fundo-secao--raios {
  background:
    linear-gradient(180deg, var(--fundo), rgba(11, 11, 11, 0.55) 25%, rgba(11, 11, 11, 0.6) 70%, var(--fundo)),
    var(--raios) 50% 30% / cover no-repeat,
    linear-gradient(180deg, rgba(11, 11, 11, 0.7), rgba(11, 11, 11, 0.85)),
    var(--fibra) 0 0 / 300px auto repeat,
    var(--fundo);
}
.fundo-secao--horizonte {
  background:
    linear-gradient(180deg, var(--fundo) 0%, rgba(11, 11, 11, 0.5) 30%, rgba(11, 11, 11, 0.35) 70%, rgba(11, 11, 11, 0.85)),
    var(--horizonte) 50% 100% / cover no-repeat,
    var(--fibra) 0 0 / 300px auto repeat,
    var(--fundo);
}

.secao__cabeca { display: grid; gap: 0.9rem; max-width: 48rem; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.titulo-secao { font-size: clamp(2.1rem, 1.25rem + 3.4vw, 4.4rem); text-wrap: balance; }
.secao__entrada { max-width: 42rem; font-size: clamp(1rem, 0.95rem + 0.3vw, 1.18rem); color: var(--texto-suave); text-wrap: pretty; }
.site-r p { text-wrap: pretty; }
.site-r h2, .site-r h3 { text-wrap: balance; }

.vidro-cartao {
  position: relative;
  background: var(--vidro);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  border-radius: var(--raio-vidro);
  box-shadow: var(--vidro-sombra), inset 0 0 0 1px var(--linha-vidro);
}
.vidro-cartao::before {
  content: '';
  position: absolute;
  inset: 1px 1px auto 1px;
  height: min(46%, 9rem);
  border-radius: inherit;
  border-bottom-left-radius: 50% 22%;
  border-bottom-right-radius: 50% 22%;
  background: linear-gradient(180deg, rgba(245, 245, 240, 0.13), rgba(245, 245, 240, 0));
  pointer-events: none;
}

.linha-risco { margin: 0; font-size: 0.875rem; color: rgba(245, 245, 240, 0.76); }
.topo__risco { margin-top: 0.85rem; }
.selo-demo {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  width: max-content;
  padding: 0.35em 0.8em;
  border-radius: 999px;
  background: rgba(11, 11, 11, 0.82);
  box-shadow: inset 0 0 0 1px rgba(198, 255, 0, 0.6);
  color: var(--papel);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.selo-demo::before { content: ''; width: 0.5em; height: 0.5em; border-radius: 50%; background: var(--lima); box-shadow: var(--brilho-lima); }
/* os avisos e os rótulos: 14 px (o rótulo 13), lidos no celular sem esforço (revisão de 06/11) */
.site-r .rotulo { font-size: 0.8125rem; }
.aviso-exemplo, .depoimento__aviso, .tf-etiqueta {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(245, 245, 240, 0.78);
}
.icone-linha { width: 48%; height: auto; fill: none; stroke: var(--lima); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px rgba(198, 255, 0, 0.55)); }
.botao--grande { min-height: 56px; padding: 0 1.9rem; font-size: 1.06rem; }
.botao:focus-visible, .site-r a:focus-visible, .site-r button:focus-visible, .site-r summary:focus-visible { outline: 3px solid var(--lima); outline-offset: 3px; }

/* o comando já executado no topo: com "reduzir movimento" e depois da abertura */
.topo__comando {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2em 0.55em;
  margin: 0 0 0.9rem;
  padding: 0.45rem 0.8rem;
  width: max-content;
  max-width: 100%;
  box-sizing: border-box; /* o 100% conta o padding (sem isso passava 26 px da coluna) */
  border-radius: 12px;
  background: rgba(11, 11, 11, 0.72);
  box-shadow: inset 0 0 0 1px rgba(198, 255, 0, 0.35);
  font: 500 0.8125rem/1.35 var(--mono);
  color: var(--papel);
}
.topo__comando b { color: var(--lima); font-weight: 600; }
.topo__comando span { color: var(--lima); }
.anima .site-r--1 .topo__comando, .anima.site-r--1 .topo__comando { opacity: 0; transform: translateY(6px); transition: opacity 0.5s var(--sai), transform 0.5s var(--sai); }
.anima.site-r--1.abriu .topo__comando { opacity: 1; transform: none; }

/* ---------- Cabeçalho: o chip da opção e o menu com Portfólio ---------- */

.cabecalho .cabecalho-celular__acao { white-space: nowrap; }
@media (max-width: 47.99rem) {
  .cabecalho .cabecalho-celular__acao-texto { font-size: 0.875rem; }
}
@media (max-width: 26rem) {
  .cabecalho .cabecalho-celular__acao-texto { display: none; }
  .cabecalho .cabecalho-celular__acao { min-width: 44px; padding-inline: 0.75rem; }
}

/* ---------- 2 · Por que ter um site (dentro do palco do topo) ---------- */

.sobre__grade {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: 'texto' 'monitor' 'lista' 'pontos' 'fecho';
  gap: 0.9rem;
  align-items: start;
}
.sobre .motivos__texto { grid-area: texto; }
.sobre .motivos__titulo { margin: 0.6rem 0 0.6rem; }
.sobre__entrada { margin: 0; max-width: 34rem; color: var(--texto-suave); }
.sobre__lista { grid-area: lista; grid-template-columns: minmax(0, 1fr); gap: 0.55rem; }
.sobre__monitor { grid-area: monitor; min-width: 0; }
.sobre__pontos { grid-area: pontos; display: none; font: 600 0.8125rem/1 var(--mono); color: rgba(245, 245, 240, 0.7); letter-spacing: 0.06em; }
.sobre__conta { color: var(--lima); }
.sobre__fecho { grid-area: fecho; margin: 0; font-size: 0.9375rem; color: var(--texto-suave); }
.sobre__fecho a { color: var(--lima); font-weight: 600; text-underline-offset: 3px; }

.sobre .motivo {
  grid-template-rows: auto 1fr;
  gap: 0;
  padding: 0.75rem 0.95rem;
  border-radius: 20px;
  background: var(--vidro);
  box-shadow: inset 0 0 0 1px var(--linha-vidro), 0 18px 40px -26px #000;
  transition: box-shadow 0.35s var(--sai), background-color 0.35s var(--sai);
}
.sobre .motivo__frase { min-height: 0; overflow: hidden; margin: 0; color: var(--texto-suave); font-size: 0.9375rem; line-height: 1.45; }
.sobre .motivo__frase::before { content: ''; display: block; height: 0.55rem; }
.sobre .motivo .bolha { --bolha: 44px; }
/* os ícones de vidro do 3D (render com alfa, o brilho lima já vem nele): a peça já é a bolha, sem o círculo por baixo */
.bolha--vidro { background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.bolha--vidro .icone-vidro { grid-area: 1 / 1; width: 100%; height: auto; filter: none; }
.sobre .motivo .bolha--vidro { --bolha: 60px; margin: -0.35rem 0; }
@media (min-width: 48rem) { .sobre .motivo .bolha--vidro { --bolha: 72px; } }
.sobre .motivo.atual { box-shadow: inset 0 0 0 1px rgba(198, 255, 0, 0.6), 0 0 34px -12px rgba(198, 255, 0, 0.55), 0 18px 40px -26px #000; }

/* no celular, com movimento: um motivo por vez, no mesmo lugar, e o contador 01 / 04 */
.anima .sobre__lista { display: grid; }
.anima .sobre .motivo { grid-area: 1 / 1; visibility: hidden; }
.anima .sobre .motivo.atual { visibility: inherit; }
.anima .sobre__pontos { display: block; }
@media (max-width: 47.99rem) and (max-height: 760px) {
  .anima .sobre__entrada { display: none; }
}
@media (max-width: 47.99rem) and (max-height: 700px) {
  .anima .sobre__fecho { display: none; }
  .anima .sobre .motivos__titulo { font-size: 1.85rem; }
  /* o monitor cresceu para a busca caber inteira (06/11): o contador sobe para a linha do rótulo e o vão encolhe,
     para o cartão do motivo terminar dentro da tela no 360 × 660 e no 320 × 640 */
  .anima .sobre__grade { gap: 0.7rem; }
  .anima .sobre__pontos { grid-area: texto; justify-self: end; align-self: start; }
}

@media (min-width: 48rem) {
  .sobre__grade {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-areas: 'texto monitor' 'lista monitor' 'fecho monitor';
    column-gap: clamp(1.5rem, 4vw, 4.5rem);
    row-gap: 1rem;
    align-items: center;
  }
  .sobre .motivos__texto { align-self: end; }
  .sobre__fecho { align-self: start; }
  /* com movimento: os 4 motivos em fila, só o atual aberto */
  .anima .sobre .motivo { grid-area: auto; visibility: inherit; grid-template-rows: auto 0fr; transition: grid-template-rows 0.45s var(--sai), box-shadow 0.35s var(--sai); }
  .anima .sobre .motivo.atual { grid-template-rows: auto 1fr; }
  .anima .sobre .motivo:not(.atual) h3 { color: rgba(245, 245, 240, 0.72); }
  .anima .sobre__pontos { display: none; }
  .sobre .motivo { cursor: default; }
  .anima .sobre .motivo { cursor: pointer; }
}
@media (min-width: 48rem) and (max-height: 760px) {
  .sobre .motivos__titulo { font-size: clamp(1.9rem, 1rem + 2.6vw, 3.2rem); }
  .anima .sobre__entrada { display: none; }
}
/* sem movimento: os 4 abertos, em duas colunas no computador */
html:not(.anima) .sobre .motivo { grid-template-rows: auto 1fr; visibility: inherit; }
@media (min-width: 72rem) {
  html:not(.anima) .sobre__lista { grid-template-columns: 1fr 1fr; }
}

/* ---------- O monitor de vidro e o celular de vidro (as telas falsas) ---------- */

.monitor-vidro {
  position: relative;
  display: grid;
  aspect-ratio: 16 / 10.4;
  padding: 2.1rem 0.6rem 0.6rem;
  border: 2px solid transparent;
  border-radius: clamp(20px, 2.4vw, 30px);
  background: linear-gradient(180deg, #1d1d1d, #0d0d0d) padding-box, var(--cromo) border-box;
  box-shadow: inset 0 1px 0 rgba(245, 245, 240, 0.35), 0 40px 80px -36px #000, 0 0 60px -30px rgba(198, 255, 0, 0.45);
}
.monitor-vidro::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(115deg, rgba(245, 245, 240, 0.14), transparent 30%, transparent 70%, rgba(245, 245, 240, 0.06));
  pointer-events: none;
}
.monitor-vidro__barra { position: absolute; left: 0.9rem; top: 0.8rem; display: flex; gap: 6px; }
.monitor-vidro__barra i { width: 9px; height: 9px; border-radius: 50%; background: rgba(245, 245, 240, 0.35); }
.monitor-vidro__barra i:first-child { background: var(--lima); box-shadow: var(--brilho-lima); }
.monitor-vidro .tf-etiqueta, .celular-vidro .tf-etiqueta { position: absolute; right: 0.9rem; top: 0.55rem; }
.celular-vidro .tf-etiqueta { position: static; display: block; margin-top: 0.6rem; text-align: center; }

.celular-vidro {
  position: relative;
  display: grid;
  aspect-ratio: 9 / 18.6;
  padding: 10px;
  border: 2px solid transparent;
  border-radius: 42px;
  background: linear-gradient(180deg, #1d1d1d, #0d0d0d) padding-box, var(--cromo) border-box;
  box-shadow: inset 0 1px 0 rgba(245, 245, 240, 0.35), 0 40px 80px -36px #000, 0 0 60px -30px rgba(198, 255, 0, 0.45);
}
.celular-vidro__ilha { position: absolute; z-index: 3; left: 50%; top: 18px; width: 30%; height: 18px; translate: -50% 0; border-radius: 999px; background: #050505; }

.tela-falsa {
  grid-area: 1 / 1;
  position: relative;
  display: grid;
  align-content: start;
  gap: 10px;
  min-height: 0;
  padding: 14px;
  border-radius: clamp(12px, 1.4vw, 18px);
  overflow: hidden;
  background: linear-gradient(180deg, #FAFAF6, #ECECE4);
  color: #141414;
  font-size: 0.8125rem;
  line-height: 1.35;
  opacity: 0;
  transform: translateY(10px) scale(0.985);
  transition: opacity 0.4s var(--sai), transform 0.5s var(--sai);
}
.celular-vidro .tela-falsa { border-radius: 32px; padding: 40px 12px 14px; }
.tela-falsa.atual { opacity: 1; transform: none; }
/* sem JS: a primeira tela à vista */
.monitor-vidro:not(:has(.atual)) .tela-falsa[data-ato='0'],
.celular-vidro:not(:has(.atual)) .tela-falsa[data-ato='0'] { opacity: 1; transform: none; }
.tela-falsa b { font-weight: 700; }
.tela-falsa i { display: block; height: 7px; border-radius: 4px; background: rgba(20, 20, 20, 0.14); }

.tf-site { display: grid; gap: 8px; padding: 10px; border-radius: 12px; background: #fff; box-shadow: 0 6px 18px -10px rgba(0, 0, 0, 0.35); }
.tf-site__topo { display: flex; align-items: center; gap: 8px; }
.tf-site__topo b { margin-right: auto; font-family: var(--letra-titulo); font-size: 0.9rem; }
.tf-site__topo i { width: 28px; }
.tf-site__produtos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.tf-foto { display: block; aspect-ratio: 1; border-radius: 10px; }
.tf-foto--bolo { background: linear-gradient(180deg, #F4D9E0 0 16%, #5B2B1C 16% 34%, #F6E7D2 34% 42%, #6E3622 42% 62%, #F6E7D2 62% 70%, #5B2B1C 70%); }
.tf-foto--doce { background: radial-gradient(circle at 30% 34%, #6B3420 0 17%, transparent 18%), radial-gradient(circle at 70% 34%, #5B2B1C 0 17%, transparent 18%), radial-gradient(circle at 50% 70%, #7A3F25 0 17%, transparent 18%), #F6E7D2; }
.tf-foto--torta { background: radial-gradient(circle at 30% 30%, #C2185B 0 9%, transparent 10%), radial-gradient(circle at 62% 26%, #AD1457 0 9%, transparent 10%), radial-gradient(circle at 46% 46%, #D81B60 0 9%, transparent 10%), linear-gradient(180deg, transparent 58%, #E2B77E 58%), #FFF3E3; }
.tf-foto--grande { aspect-ratio: 16 / 10; }
.tf-botao { display: inline-flex; justify-content: center; align-items: center; min-height: 30px; padding: 0 12px; border-radius: 999px; background: #E6E6DE; font-weight: 700; font-size: 0.75rem; }
.tf-botao--zap { background: #141414; color: var(--lima); }
.tf-botao--lima { background: var(--lima); color: #0B0B0B; }
.tf-botao--brilho { box-shadow: 0 0 0 3px rgba(198, 255, 0, 0.45), 0 0 22px rgba(198, 255, 0, 0.75); }
.tf-aviso {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: grid;
  gap: 2px;
  max-width: 72%;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(20, 20, 20, 0.92);
  color: var(--papel);
  box-shadow: inset 0 0 0 1px rgba(198, 255, 0, 0.55), 0 14px 30px -12px rgba(0, 0, 0, 0.6);
  font-size: 0.75rem;
  transform: translateY(120%);
  transition: transform 0.6s var(--mola) 0.25s;
}
.tf-aviso__rotulo { color: var(--lima); font-weight: 700; }
.atual .tf-aviso, html:not(.anima) .tf-aviso { transform: none; }
.tf-busca { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px rgba(20, 20, 20, 0.14); }
.tf-busca svg, .tf-endereco svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.tf-cursor-texto { width: 2px; height: 1.1em; margin-left: -6px; background: #141414; }
.anima .tf-cursor-texto { animation: piscar 1s steps(1) infinite; }
.tf-resultado { position: relative; display: grid; gap: 5px; padding: 10px 12px; border-radius: 12px; }
.tf-resultado small { font-size: 0.75rem; color: #3D6B00; }
.tf-resultado b { font-size: 0.875rem; color: #1B3A9C; }
.tf-resultado--nosso { background: #fff; box-shadow: inset 0 0 0 2px var(--lima), 0 10px 24px -14px rgba(0, 0, 0, 0.4); }
.tf-ponteiro { position: absolute; right: 14%; bottom: -6px; width: 16px; height: 22px; background: #141414; clip-path: polygon(0 0, 100% 62%, 56% 64%, 78% 100%, 62% 100%, 42% 68%, 0 90%); filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.4)); }
/* a tela da busca (seção 2): a lista desce até as pesquisas relacionadas, sem barra cinza; o nosso resultado tem a
   descrição e os atalhos que o Google mostra */
.tela-falsa--busca { grid-template-rows: repeat(5, auto) minmax(0, 1fr); align-content: stretch; gap: 8px; }
.tf-abas { display: flex; gap: 14px; padding: 0 8px; border-bottom: 1px solid rgba(20, 20, 20, 0.12); font-size: 0.75rem; font-weight: 600; color: #5E5E57; }
.tf-abas span { margin-bottom: -1px; padding-bottom: 5px; }
.tf-abas .tf-aba--ativa { color: #1B3A9C; border-bottom: 2px solid #1B3A9C; }
.tf-resultado .tf-texto { color: #46463F; }
.tf-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.tf-links span { padding: 3px 10px; border-radius: 999px; background: #EAEFFA; color: #1B3A9C; font-size: 0.75rem; font-weight: 600; }
.tf-relacionadas { display: flex; flex-wrap: wrap; align-content: end; gap: 6px; padding: 0 4px 2px; }
.tf-relacionadas b { flex-basis: 100%; font-size: 0.75rem; }
.tf-relacionadas span { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px rgba(20, 20, 20, 0.14); font-size: 0.75rem; }
.tf-relacionadas span::before { content: ''; width: 7px; height: 7px; border: 2px solid #5E5E57; border-radius: 50%; }
.tf-endereco { display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 12px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px rgba(20, 20, 20, 0.14); }
.tf-endereco svg { color: #3D6B00; }
.tf-endereco span { font-weight: 600; }
.tf-endereco em { margin-left: auto; padding: 2px 8px; border-radius: 999px; background: var(--lima); font-style: normal; font-weight: 700; font-size: 0.75rem; }
.tf-blocos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tf-bloco { display: grid; gap: 6px; padding: 10px; border-radius: 12px; background: #fff; }
.tf-bloco--largo { grid-column: 1 / -1; }
.tf-conversa__topo { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; margin: -14px -14px 2px; background: #141414; color: var(--papel); }
.celular-vidro .tf-conversa__topo { margin: -40px -12px 2px; padding: 40px 14px 10px; }
.tf-conversa__topo span { font-size: 0.75rem; color: var(--lima); }
.tf-balao { justify-self: start; max-width: 86%; margin: 0; padding: 8px 11px; border-radius: 14px 14px 14px 4px; background: #fff; box-shadow: 0 4px 12px -8px rgba(0, 0, 0, 0.4); }
.tf-balao--meu { justify-self: end; border-radius: 14px 14px 4px 14px; background: #E4F7A8; }
.tf-balao--resposta { justify-self: end; border-radius: 14px 14px 4px 14px; background: #E4F7A8; }
.tf-balao small { display: block; margin-bottom: 2px; font-size: 0.75rem; font-weight: 700; color: #3D6B00; }
.tf-arame { display: grid; place-items: center; min-height: 40px; border: 2px dashed rgba(20, 20, 20, 0.35); border-radius: 12px; font-size: 0.75rem; font-weight: 600; color: rgba(20, 20, 20, 0.7); }
.tf-arame--alto { min-height: 120px; }
.tf-arame--botao { min-height: 34px; border-radius: 999px; border-color: #5C8A00; color: #3D6B00; }
.tf-nota { justify-self: center; font-size: 0.75rem; font-weight: 600; color: #3D6B00; }
.tf-site--celular { padding: 8px; }
.tf-comentario { justify-self: end; margin: 0; padding: 8px 11px; border-radius: 14px 14px 4px 14px; background: #141414; color: var(--papel); font-size: 0.75rem; }
.tf-escolha { display: flex; gap: 6px; justify-content: center; }
.tf-noar { justify-self: center; display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: #141414; color: var(--lima); font-weight: 700; font-size: 0.75rem; }
.tf-noar::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--lima); box-shadow: var(--brilho-lima); }
.tf-texto { font-size: 0.75rem; color: #46463F; }
.tf-inicial { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #141414; color: var(--lima); font-weight: 700; font-size: 0.75rem; font-style: normal; }

/* a tela da confiança (seção 2): a loja, o mapa e os comentários enchem o monitor; o selo carimba ao entrar.
   As telas falsas medem pelo monitor (container): no monitor pequeno, a tela fica com o essencial */
.sobre__monitor { container-type: inline-size; }
.tela-falsa--confianca { grid-template-rows: auto minmax(0, 1fr); align-content: stretch; }
.tf-confianca { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; gap: 8px; min-height: 0; }
.tf-confianca .tf-bloco { position: relative; grid-template-rows: minmax(0, 1fr) auto auto; gap: 4px; min-height: 0; padding: 8px; box-shadow: 0 6px 18px -10px rgba(0, 0, 0, 0.35); }
.tf-confianca .tf-foto, .tf-mapa { aspect-ratio: auto; min-height: 0; height: 100%; margin-bottom: 2px; border-radius: 8px; }
.tf-foto--vitrine {
  background:
    repeating-linear-gradient(90deg, #E9A7B8 0 16px, #FFF3E3 16px 32px) 0 0 / 100% 20% no-repeat,
    linear-gradient(#141414, #141414) 50% 31% / 54% 10% no-repeat,
    radial-gradient(closest-side, #F4D9E0 0 90%, transparent) 16% 82% / 13% 16% no-repeat,
    radial-gradient(closest-side, #F6E7D2 0 90%, transparent) 34% 82% / 13% 16% no-repeat,
    radial-gradient(closest-side, #E9A7B8 0 90%, transparent) 52% 82% / 13% 16% no-repeat,
    linear-gradient(180deg, #3A1E14, #6E3622) 12% 86% / 54% 44% no-repeat,
    linear-gradient(#5B2B1C, #5B2B1C) 88% 100% / 18% 60% no-repeat,
    #F6E7D2;
}
.tf-mapa {
  position: relative;
  display: block;
  overflow: hidden;
  background:
    linear-gradient(90deg, transparent 44%, #fff 44% 51%, transparent 51%),
    linear-gradient(0deg, transparent 56%, #fff 56% 63%, transparent 63%),
    linear-gradient(32deg, transparent 47%, rgba(255, 255, 255, 0.9) 47% 50%, transparent 50%),
    linear-gradient(#CFE3B4, #CFE3B4) 8% 12% / 30% 34% no-repeat,
    linear-gradient(#BFD9EE, #BFD9EE) 96% 96% / 34% 26% no-repeat,
    #E6E5DA;
}
.tf-mapa__pino { position: absolute; left: 47.5%; top: 59.5%; width: 16px; height: 16px; margin: -26px 0 0 -8px; border-radius: 50%; background: var(--lima); box-shadow: 0 0 0 4px #141414, 0 8px 12px -2px rgba(0, 0, 0, 0.4); }
.tf-mapa__pino::after { content: ''; position: absolute; left: 50%; top: 100%; margin: 2px 0 0 -6px; border: 6px solid transparent; border-top: 9px solid #141414; border-bottom: 0; }
.tf-mapa__pino::before { content: ''; position: absolute; inset: -4px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(20, 20, 20, 0.5); opacity: 0; }
.tf-selo {
  position: absolute;
  right: 12px;
  top: 12px;
  display: grid;
  place-items: center;
  align-content: center;
  width: 70px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--lima);
  color: #0B0B0B;
  font-weight: 800;
  font-size: 0.75rem;
  line-height: 1.05;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  box-shadow: 0 0 0 3px #141414, 0 10px 22px -8px rgba(0, 0, 0, 0.55);
  rotate: -10deg;
  scale: 0.4;
  opacity: 0;
  transition: scale 0.55s var(--mola) 0.3s, opacity 0.25s var(--sai) 0.3s;
}
.tf-selo svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.atual .tf-selo, html:not(.anima) .tf-selo { scale: 1; opacity: 1; }
.tf-confianca .tf-bloco--avaliacoes { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; row-gap: 6px; }
.tf-bloco--avaliacoes > b { grid-column: 1 / -1; }
.tf-avaliacao { display: flex; align-items: center; gap: 8px; font-size: 0.75rem; color: #2A2A26; }

/* a tela do WhatsApp de noite (seção 2): a conversa desce até a hora da resposta; a caixa de digitar fecha embaixo */
.tela-falsa--conversa { grid-template-rows: auto minmax(0, 1fr) auto; align-content: stretch; background: linear-gradient(180deg, #F1EFE6, #E4E1D4); }
.tf-conversa__topo { gap: 8px; }
.tf-conversa__topo b { margin-right: auto; }
.tf-conversa__topo .tf-inicial { width: 24px; height: 24px; background: var(--lima); color: #0B0B0B; }
.tf-conversa__hora { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; }
.tf-conversa__hora svg { width: 14px; height: 14px; fill: currentColor; }
.tf-fio { display: flex; flex-direction: column; justify-content: flex-end; gap: 7px; min-height: 0; overflow: hidden; -webkit-mask: linear-gradient(transparent, #000 22px); mask: linear-gradient(transparent, #000 22px); }
.tf-fio .tf-balao { flex: none; align-self: flex-start; }
.tf-fio .tf-balao--resposta { align-self: flex-end; }
.tf-dia { flex: none; align-self: center; padding: 2px 10px; border-radius: 999px; background: rgba(20, 20, 20, 0.09); font-size: 0.75rem; font-weight: 600; color: #3A3A35; }
.tf-balao .tf-hora { margin: 2px 0 0; text-align: right; font-weight: 500; color: #4F4F48; }
.tf-digitar { display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 4px 0 14px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px rgba(20, 20, 20, 0.12); color: #5E5E57; font-size: 0.75rem; }
.tf-digitar > span:first-child { margin-right: auto; }
.tf-enviar { position: relative; flex: none; width: 26px; height: 26px; border-radius: 50%; background: #141414; }
.tf-enviar::after { content: ''; position: absolute; inset: 8px 7px 8px 10px; background: var(--lima); clip-path: polygon(0 0, 100% 50%, 0 100%); }

@media (prefers-reduced-motion: no-preference) {
  .anima .atual .tf-mapa__pino::before { animation: tf-pulso 1.8s ease-out infinite; }
}
@keyframes tf-pulso { from { opacity: 0.9; transform: scale(1); } to { opacity: 0; transform: scale(2.6); } }
@container (max-width: 520px) {
  .tf-confianca .tf-texto, .tf-avaliacao + .tf-avaliacao, .tf-bloco--avaliacoes > b { display: none; }
  .tf-confianca .tf-bloco--avaliacoes { grid-template-columns: minmax(0, 1fr); }
  .tf-abas, .tf-relacionadas, .tela-falsa--busca .tf-resultado:not(.tf-resultado--nosso) { display: none; }
  .tela-falsa--busca { grid-template-rows: auto; align-content: start; }
  /* no monitor estreito (Revisor, 06/11: o "WhatsApp" saía pela direita no 390 e os atalhos caíam abaixo da tela no 360
     e no 320): a frase curta, 3 atalhos que quebram em duas linhas, e o monitor cresce até caber a busca inteira. As
     outras telas não contam na altura (contain) e esticam até a da busca; nunca abaixo da proporção de antes */
  .tf-texto__mais, .tf-links span:nth-child(3) { display: none; }
  .tela-falsa--busca { padding: 10px; gap: 6px; }
  .tela-falsa--busca .tf-busca { min-height: 30px; }
  .tf-links { row-gap: 5px; }
  .tf-links span { flex: none; }
  .monitor-vidro { aspect-ratio: auto; min-height: calc(100cqw * 10.4 / 16); }
  .monitor-vidro .tela-falsa:not(.tela-falsa--busca) { contain: size; }
  .tf-selo { width: 54px; right: 8px; top: 8px; font-size: 0.625rem; }
  .tf-selo svg { width: 14px; height: 14px; }
}
@container (max-width: 330px) {
  /* no 360 e no 320 a foto da loja é baixa: o carimbo vira só o visto, no canto da foto, sem cobrir o "Quem somos"
     (o "Site oficial" continua escrito na barra de endereço) */
  .tf-selo { width: 28px; right: 6px; top: 6px; font-size: 0; letter-spacing: 0; box-shadow: 0 0 0 2px #141414, 0 6px 14px -6px rgba(0, 0, 0, 0.55); }
  .tf-selo svg { width: 15px; height: 15px; }
}
@container (max-width: 300px) {
  .tf-links span:nth-child(2) { display: none; }
  /* no 320 a foto é ainda mais baixa: o visto sobe e encolhe um pouco para não encostar no "Quem somos" */
  .tf-selo { width: 26px; top: 3px; right: 4px; }
  .tf-selo svg { width: 14px; height: 14px; }
}

/* os celulares da seção 3: cada etapa enche a tela com o que acontece nela (no celular pequeno, só o essencial) */
.tf-anexos { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; width: 74%; padding: 5px; }
.tf-anexos .tf-foto { border-radius: 9px; }
.tf-arquivo { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 9px; background: rgba(255, 255, 255, 0.75); font-size: 0.75rem; font-weight: 600; }
.tf-arquivo::before { content: ''; width: 11px; height: 14px; background: #141414; clip-path: polygon(0 0, 68% 0, 100% 30%, 100% 100%, 0 100%); }
.tf-orcamento { display: grid; gap: 3px; }
.tf-orcamento > span:not(.tf-botao) { font-size: 0.75rem; color: #46463F; }
.tf-orcamento .tf-botao { justify-self: start; margin-top: 5px; }
.celular-vidro .tf-digitar { position: absolute; left: 10px; right: 10px; bottom: 14px; box-shadow: inset 0 0 0 1px rgba(20, 20, 20, 0.12), 0 -14px 16px 4px #ECECE4; }
.tf-paleta { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 12px; background: #fff; box-shadow: 0 4px 12px -8px rgba(0, 0, 0, 0.4); }
.tf-cor { width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(20, 20, 20, 0.15); }
.tf-cor--rosa { background: #E9A7B8; }
.tf-cor--chocolate { background: #5B2B1C; }
.tf-cor--creme { background: #F6E7D2; }
.tf-paleta b { margin-left: 4px; font-family: var(--letra-titulo); font-size: 1rem; }
.tf-paleta small { margin-left: auto; font-size: 0.75rem; font-weight: 600; color: #3D6B00; }
.tf-arames { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.tf-arames .tf-arame { min-height: 52px; }
.tf-arame--texto { justify-items: start; padding: 0 10px; border-style: solid; border-color: rgba(20, 20, 20, 0.2); color: #141414; }
.tf-site .tf-texto { font-weight: 600; color: #2A2A26; }
.tf-conferido { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; font-size: 0.75rem; font-weight: 600; }
.tf-conferido li { display: flex; align-items: center; gap: 7px; }
.tf-conferido li::before { content: '✓'; display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: #141414; color: var(--lima); font-size: 0.625rem; }
.tf-bio { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px; background: #fff; box-shadow: 0 4px 12px -8px rgba(0, 0, 0, 0.4); font-size: 0.75rem; }
.tf-bio b { padding: 2px 8px; border-radius: 999px; background: #141414; color: var(--lima); }
.tf-bio span { font-weight: 600; color: #1B3A9C; }
@media (max-width: 63.99rem) {
  .como__celular .tf-extra { display: none; }
  .como__celular .tf-arame--alto { min-height: 60px; }
  .como__celular .tf-escolha .tf-botao { padding-inline: 8px; white-space: nowrap; }
}

/* ---------- 3 · Como a Lancei facilita: o celular fica, as etapas passam ---------- */

.como__grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
.como__cabeca { display: grid; gap: 0.9rem; max-width: 44rem; }
.como__celular {
  position: sticky;
  top: var(--altura-cabecalho);
  z-index: 2;
  margin-inline: calc(-1 * var(--gutter));
  padding: 0.6rem var(--gutter) 1.6rem;
  background: linear-gradient(180deg, rgba(11, 11, 11, 0.94) 0%, rgba(11, 11, 11, 0.9) 72%, rgba(11, 11, 11, 0));
}
/* no celular, o título vem primeiro e o celular fica preso logo abaixo do cabeçalho; as etapas passam por baixo dele */
.como__cabeca { order: -2; }
.como__celular { order: -1; }
.como__celular .celular-vidro { height: min(42svh, 400px); width: auto; margin-inline: auto; }
.como__celular .tf-etiqueta { margin-top: 0.4rem; }
.como__passos { display: grid; gap: 1rem; margin: 0; padding: 0 0 12svh; list-style: none; counter-reset: passo; }
.passo {
  position: relative;
  display: grid;
  gap: 0.75rem;
  padding: 1.25rem 1.1rem;
  border-radius: 22px;
  background: var(--vidro);
  box-shadow: inset 0 0 0 1px var(--linha-vidro);
  transition: opacity 0.4s var(--sai), box-shadow 0.4s var(--sai);
}
/* a etapa que não é a da vez apaga só o texto de baixo: o número e o título ficam inteiros (não vira caixa vazia) */
.passo > * { transition: opacity 0.4s var(--sai); }
.anima .passo:not(.atual) > :not(.passo__numero):not(.passo__titulo) { opacity: 0.6; }
.anima .passo:not(.atual) { box-shadow: inset 0 0 0 1px rgba(245, 245, 240, 0.2); }
.anima .passo.atual { opacity: 1; box-shadow: inset 0 0 0 1px rgba(198, 255, 0, 0.6), 0 0 40px -16px rgba(198, 255, 0, 0.55); }
.passo__numero {
  font: 600 clamp(2.6rem, 2rem + 2.4vw, 4rem) / 0.9 var(--letra-titulo);
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(198, 255, 0, 0.85);
}
.passo.atual .passo__numero { color: var(--lima); text-shadow: 0 0 24px rgba(198, 255, 0, 0.45); }
.passo__titulo { font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); }
.passo__papeis { display: grid; gap: 0.6rem; margin: 0; }
.passo__papeis div { display: grid; gap: 0.15rem; padding-left: 0.85rem; border-left: 2px solid rgba(198, 255, 0, 0.6); }
.passo__papeis div + div { border-left-color: rgba(245, 245, 240, 0.4); }
.passo__papeis dt { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lima); }
.passo__papeis div + div dt { color: var(--papel); }
.passo__papeis dd { margin: 0; color: var(--texto-suave); }
.como__pe { display: grid; gap: 1rem; }
.como__prazo { margin: 0; color: var(--texto-suave); }
.como__prazo strong { color: var(--papel); }
.como__acao { display: grid; gap: 0.6rem; justify-items: start; }
.atos-pontos { display: none; }

@media (min-width: 64rem) {
  .como__grade { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(2rem, 6vw, 6rem); align-items: start; }
  .como__cabeca, .como__passos, .como__pe { grid-column: 1; order: 0; }
  .como__celular {
    grid-column: 2;
    grid-row: 1 / span 3;
    top: calc(var(--altura-cabecalho) + (100svh - var(--altura-cabecalho) - min(78svh, 660px)) / 2);
    margin: 0;
    padding: 0;
    background: none;
  }
  .como__celular .celular-vidro { height: min(78svh, 660px); }
  .como__passos { gap: 0; padding: 4svh 0 4svh; }
  .passo { min-height: 46svh; align-content: center; padding: 2rem 2.2rem; margin-bottom: 4svh; grid-template-columns: auto 1fr; column-gap: 1.6rem; }
  .passo__numero { grid-row: 1 / span 2; }
  .tela-falsa { font-size: 0.875rem; }
}

/* opção 3 (Maestro, 08/11), e as opções 1 e 2 desde 09/11 (o Pedro: menos rolagem, cada cena num toque; antes, 19
   toques e 2 telas presas): o "Como" não prende a rolagem. As etapas correm no tempo quando o celular chega (reforma.js).
   No computador, as quatro ficam compactas ao lado do celular, que não é mais preso; no celular, elas viram uma faixa
   de lado, com encaixe, logo abaixo do celular, e os pontos mostram a vez */
.site-r .como__celular { position: relative; top: auto; }
.site-r .passo { cursor: default; }
@media (min-width: 64rem) {
  .site-r .como__celular { top: auto; grid-row: 1 / span 3; align-self: center; }
  .site-r .como__passos { padding: 0.5rem 0; }
  .site-r .passo { min-height: 0; margin-bottom: 0.75rem; padding: 1.1rem 1.6rem; row-gap: 0.55rem; }
  .site-r .passo__numero { font-size: clamp(2.2rem, 1.6rem + 1.8vw, 3.2rem); }
  .site-r .passo__titulo { font-size: clamp(1.25rem, 1rem + 0.7vw, 1.6rem); }
  .site-r .passo__papeis { grid-template-columns: 1fr 1fr; column-gap: 1.2rem; }
}
@media (max-width: 63.99rem) {
  .site-r .como__celular { padding-bottom: 0.4rem; background: none; }
  .site-r .como__passos {
    grid-auto-flow: column; grid-auto-columns: 86%; gap: 0.75rem;
    margin-inline: calc(-1 * var(--gutter)); padding: 0.25rem var(--gutter) 0.4rem;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .site-r .como__passos::-webkit-scrollbar { display: none; }
  .site-r .passo { scroll-snap-align: start; align-content: start; }
  .site-r .atos-pontos { display: flex; order: -1; justify-content: center; gap: 0.6rem; }
  .site-r .atos-pontos i { width: 8px; height: 8px; border-radius: 50%; background: rgba(245, 245, 240, 0.35); transition: background-color 0.3s var(--sai), transform 0.3s var(--sai); }
  .site-r .atos-pontos i.atual { background: var(--lima); transform: scale(1.35); }
}

/* ---------- 4 · O que fazemos: os cartões acendem em fila ---------- */

.servicos-r__grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.9rem; margin: 0; padding: 0; list-style: none; }
.servico {
  --aceso: 0;
  display: grid;
  align-content: start;
  gap: 0.7rem;
  padding: 1.35rem 1.25rem;
  overflow: hidden;
  transition: transform 0.35s var(--sai), box-shadow 0.35s var(--sai);
}
.servico h3 { font-size: 1.3rem; }
.servico p { margin: 0; color: var(--texto-suave); }
.servico .bolha { --bolha: 52px; }
.servico::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 0%), rgba(198, 255, 0, 0.16), transparent 70%);
  opacity: var(--aceso);
  transition: opacity 0.5s var(--sai);
  pointer-events: none;
}
.servico.aceso { box-shadow: var(--vidro-sombra), inset 0 0 0 1px rgba(198, 255, 0, 0.45); }
.servico.aceso { --aceso: 1; }
.anima .servico:not(.aceso) .bolha { filter: grayscale(1) brightness(0.8); }
.servico .bolha { transition: filter 0.5s var(--sai); }

.mini {
  position: relative;
  display: grid;
  gap: 5px;
  margin-top: 0.4rem;
  padding: 10px 10px 28px;
  border-radius: 14px;
  background: rgba(11, 11, 11, 0.55);
  box-shadow: inset 0 0 0 1px rgba(245, 245, 240, 0.12);
  min-height: 92px;
}
.mini > small { position: absolute; left: 10px; bottom: 7px; font-size: 0.75rem; font-weight: 600; color: rgba(245, 245, 240, 0.72); }
.mini i { display: block; height: 6px; border-radius: 3px; background: rgba(245, 245, 240, 0.22); }
.mini i:nth-of-type(2n) { width: 70%; }
.mini b { display: block; height: 10px; width: 60%; border-radius: 4px; background: rgba(245, 245, 240, 0.6); }
.mini__barra { display: flex; gap: 4px; }
.mini__barra i { width: 6px; height: 6px; border-radius: 50%; }
.mini__foto { height: 30px; border-radius: 8px; background: linear-gradient(120deg, rgba(198, 255, 0, 0.6), rgba(198, 255, 0, 0.1)); }
.mini__botao { width: 46%; height: 16px; border-radius: 999px; background: var(--lima); box-shadow: var(--brilho-lima); }
.mini__vitrine { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.mini__vitrine i { width: auto !important; height: 30px; border-radius: 7px; background: rgba(245, 245, 240, 0.2); }
.mini__carrinho { position: absolute; right: 10px; bottom: 6px; display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--lima); color: var(--fundo); font-size: 0.75rem; font-weight: 700; }
.mini em { position: absolute; right: 40px; bottom: 8px; font-size: 0.75rem; font-style: normal; color: rgba(245, 245, 240, 0.72); }
.mini--fluxo { grid-template-columns: repeat(5, auto); align-items: center; justify-content: start; gap: 6px; }
.mini--fluxo i { width: 22px !important; height: 22px; border-radius: 7px; background: rgba(245, 245, 240, 0.2); box-shadow: inset 0 0 0 1px rgba(245, 245, 240, 0.3); }
.mini--fluxo b { width: 22px; height: 2px; background: var(--lima); box-shadow: var(--brilho-lima); }
.mini--painel { grid-template-columns: 24px 1fr; gap: 8px; }
.mini__lado { border-radius: 6px; background: rgba(245, 245, 240, 0.14); }
.mini__grafico { display: flex; align-items: flex-end; gap: 5px; height: 52px; }
.mini__grafico i { flex: 1; width: auto !important; height: calc(var(--h) * 100%); border-radius: 4px 4px 2px 2px; background: linear-gradient(180deg, var(--lima), rgba(198, 255, 0, 0.2)); transform-origin: 50% 100%; }
.anima .servico:not(.aceso) .mini__grafico i { transform: scaleY(0.15); }
.mini__grafico i { transition: transform 0.7s var(--mola); }
.mini__grafico i:nth-child(2) { transition-delay: 60ms; }
.mini__grafico i:nth-child(3) { transition-delay: 120ms; }
.mini__grafico i:nth-child(4) { transition-delay: 180ms; }
.mini__grafico i:nth-child(5) { transition-delay: 240ms; }

.destaque-cardapio {
  display: grid;
  gap: 1.25rem;
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
  padding: 1.25rem;
  overflow: hidden;
}
.destaque-cardapio > .selo-demo { position: absolute; z-index: 2; left: 1.25rem; top: 1.25rem; }
.destaque-cardapio__texto { display: grid; gap: 0.8rem; justify-items: start; padding-top: 2.4rem; }
.destaque-cardapio__texto h3 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.6rem); }
.destaque-cardapio__texto p:not(.rotulo) { margin: 0; color: var(--texto-suave); max-width: 32rem; }
.destaque-cardapio__foto { width: 100%; height: auto; border-radius: calc(var(--raio-vidro) - 8px); box-shadow: 0 30px 60px -30px #000, inset 0 0 0 1px var(--linha-vidro); }

@media (min-width: 48rem) {
  .servicos-r__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .destaque-cardapio { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; padding: 1.75rem; }
}
@media (min-width: 72rem) {
  .servicos-r__grade { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .servico--tela { grid-row: span 1; }
}

/* ---------- 5 · A vitrine do 3D (opções 1 e 2): três monitores Y2K no plinto ---------- */

.vitrine { position: relative; margin: 0 0 clamp(1.5rem, 4vw, 2.5rem); }
.vitrine__palco { position: relative; aspect-ratio: 1600 / 1000; }
.vitrine__telas { position: absolute; z-index: 1; inset: 0; isolation: isolate; overflow: hidden; }
.vitrine__jogo { position: absolute; inset: 0; }
.vitrine__jogo[hidden] { display: none; }
.vitrine .vitrine__quadros { position: absolute; z-index: 2; inset: 0; }
.vitrine .vitrine__quadros--cel { display: none; }
/* sem JS: o selo na placa do plinto do quadro parado; com JS, ele segue a placa */
.vitrine .vitrine__selo { position: absolute; z-index: 3; left: 57.5%; top: 49.5%; transform: translate(-50%, -50%); white-space: nowrap; }
@media (max-width: 47.99rem) {
  .vitrine { margin-inline: -0.5rem; }
  .vitrine__palco { aspect-ratio: 780 / 1000; }
  .vitrine .vitrine__quadros--pc { display: none; }
  .vitrine .vitrine__quadros--cel { display: block; }
  .vitrine .vitrine__selo { left: 58.5%; top: 41.1%; }
}
/* no computador largo, a vitrine fica ao lado do título (nada de meia seção vazia) */
@media (min-width: 72rem) {
  .projetos-r--pilha .dentro { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(1.5rem, 3vw, 3rem); align-items: center; }
  .projetos-r--pilha .dentro > * { grid-column: 1 / -1; }
  .projetos-r--pilha .dentro > .projetos-r__cabeca { grid-column: 1; align-self: start; } /* no alto: centrado no monitor, abria uma faixa lisa antes do título */
  .projetos-r--pilha .dentro > .vitrine { grid-column: 2; margin: 0 -1rem clamp(1.5rem, 4vw, 2.5rem) 0; }
}

/* ---------- 5 · Portfólio (opções 1 e 2): a pilha de vidro ---------- */

.projetos-r__cabeca .selo-demo { margin-top: 0.2rem; }
.filtros { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: -1rem 0 clamp(1.5rem, 4vw, 2.5rem); }
.filtro {
  min-height: 44px;
  padding: 0 1.05rem;
  border: 0;
  border-radius: 999px;
  background: var(--vidro);
  box-shadow: inset 0 0 0 1px rgba(245, 245, 240, 0.25);
  color: var(--papel);
  font: inherit;
  font-weight: 600;
  font-size: 0.9375rem;
  cursor: pointer;
}
.filtro[aria-pressed='true'] { background: linear-gradient(180deg, #e4ff7a, var(--lima) 50%, #a8d900); color: var(--fundo); box-shadow: 0 8px 24px -10px rgba(198, 255, 0, 0.6); }
.pilha { display: grid; gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
.projeto { display: grid; gap: 1.1rem; padding: 0.9rem 0.9rem 1.25rem; overflow: hidden; }
.projeto[hidden] { display: none; }
.projeto__midia { position: relative; margin: 0; padding-right: 22%; }
.projeto__monitor { display: block; overflow: hidden; border: 2px solid transparent; border-radius: 14px; background: #0d0d0d padding-box, var(--cromo) border-box; aspect-ratio: 16 / 10; }
.projeto__monitor img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.projeto__celular { position: absolute; right: 0; bottom: -4%; width: 27%; overflow: hidden; border: 2px solid transparent; border-radius: 16px; background: #0d0d0d padding-box, var(--cromo) border-box; aspect-ratio: 780 / 1688; box-shadow: -16px 20px 40px -18px #000; }
.projeto__celular img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.selo-demo--midia { position: absolute; left: 0.6rem; top: 0.6rem; z-index: 2; }
.projeto__texto { display: grid; gap: 0.6rem; align-content: start; }
.projeto__tipo { margin: 0; display: flex; align-items: center; gap: 0.6rem; font-size: 0.875rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--lima); }
.projeto__n { font-family: var(--mono); color: var(--papel); opacity: 0.75; }
.projeto__nome { font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.8rem); }
.projeto__destaque { margin: 0; font-weight: 600; }
.projeto__ideia { margin: 0; color: var(--texto-suave); }
.projeto__botoes { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-top: 0.35rem; }
.projeto__botoes .botao { white-space: normal; text-align: center; }

@media (min-width: 64rem) {
  .projeto { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: clamp(1.5rem, 3vw, 3rem); padding: clamp(1.1rem, 2vw, 1.75rem); }
}
/* a pilha: no computador alto, cada projeto gruda e o próximo passa por cima */
@media (min-width: 64rem) and (min-height: 40rem) {
  .projetos-r--pilha .pilha { gap: 7svh; padding-bottom: 1svh; }
  .projetos-r--pilha .projeto {
    position: sticky;
    top: calc(var(--altura-cabecalho) + 1rem + var(--i) * 10px);
    /* do tamanho da tela do projeto: sem faixa vazia em cima e embaixo */
    min-height: 0;
    /* opaco (o de baixo não aparece através), mas com a fibra: nada de fundo liso */
    background:
      radial-gradient(70% 60% at var(--mx, 70%) var(--my, 30%), rgba(198, 255, 0, 0.07), transparent 70%),
      linear-gradient(180deg, rgba(30, 30, 30, 0.9), rgba(14, 14, 14, 0.94)),
      var(--fibra) 0 0 / 300px repeat,
      #111;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 64rem) and (min-height: 40rem) {
    .projetos-r--pilha .projeto__midia { animation: midia-entra linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
  }
}
@keyframes midia-entra {
  from { clip-path: inset(0 0 30% 0 round 14px); transform: translateY(40px) scale(0.96); }
  to { clip-path: inset(0 0 0 0 round 14px); transform: none; }
}

/* ---------- 5 · Portfólio (opção 3): os cartões altos de vidro ---------- */

.projetos-r--carrossel { padding: 0; }
.projetos-r--carrossel .carrossel-preso__palco { position: relative; isolation: isolate; padding-block: clamp(4.5rem, 11vw, 8rem); }
/* no computador o palco tem uma tela e não prende mais a rolagem (Maestro, 08/11): a troca é no tempo (reforma.js), e
   a seção perde a altura de 5 trechos que o kit dava ao modo preso */
@media (prefers-reduced-motion: no-preference) and (min-width: 64rem) and (min-height: 36rem) {
  .js .projetos-r--carrossel .carrossel-preso { height: auto; }
  .js .projetos-r--carrossel .carrossel-preso__palco { position: relative; top: auto; padding-block: clamp(1.25rem, 3svh, 2.25rem) 0.5rem; }
}
/* o botão de pausa da troca no tempo, ao lado das bolinhas (só no computador, onde a troca corre sozinha) */
.carrossel-tempo__pausa { display: none; }
.projetos-r--carrossel [data-modo="presa"] .carrossel-tempo__pausa {
  display: grid; place-items: center; width: var(--alvo, 44px); height: var(--alvo, 44px); margin-left: 0.4rem; padding: 0;
  border: 0; border-radius: 50%; background: transparent; color: var(--papel); cursor: pointer;
}
.carrossel-tempo__pausa::before { content: ""; box-sizing: border-box; width: 11px; height: 13px; border-inline: 4px solid currentColor; }
.carrossel-tempo__pausa[aria-pressed="true"]::before { width: 0; height: 0; border: 0; border-block: 7px solid transparent; border-left: 12px solid currentColor; }
.carrossel-tempo__pausa:focus-visible { outline: 3px solid var(--lima); outline-offset: 2px; }
.projeto-alto { display: grid; gap: 0.9rem; padding: 0.8rem; border-radius: var(--raio-vidro); background: var(--vidro); box-shadow: var(--vidro-sombra), inset 0 0 0 1px var(--linha-vidro); }
.projeto-alto__midia { position: relative; overflow: hidden; border: 2px solid transparent; border-radius: 22px; background: #0d0d0d padding-box, var(--cromo) border-box; aspect-ratio: 9 / 16; max-height: 62svh; }
.projeto-alto__midia img, .projeto-alto__midia video { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
/* fora do computador preso, o cartão mostra só a tela do celular (a do computador nem carrega: some antes do lazy) */
.projeto-alto__conjunto { display: contents; }
.projeto-alto__monitor { display: none; }
.projeto-alto__celular { display: block; width: 100%; height: 100%; }
/* o laço do projeto (0.2b): o vídeo por cima do pôster, aceso só quando já toca (reforma.js) */
.projeto-alto__monitor, .projeto-alto__celular { position: relative; }
.projeto-alto__midia video.laco { position: absolute; inset: 0; opacity: 0; transition: opacity 0.35s linear; pointer-events: none; }
.projeto-alto__midia video.laco.toca { opacity: 1; }
.projeto-alto__texto { display: grid; gap: 0.55rem; }
/* o vidro do cartão largo fica escuro atrás do texto, com o brilho só na borda de cima (o vidro claro deixava o cinza do
   kit a 2:1 no computador); o texto em papel, o tipo em lima como nos outros sites */
.projetos-r--carrossel .projeto-alto {
  background:
    linear-gradient(180deg, rgba(245, 245, 240, 0.08), rgba(245, 245, 240, 0) 2.5rem),
    linear-gradient(180deg, rgba(26, 26, 26, 0.9), rgba(10, 10, 10, 0.92));
}
.projetos-r--carrossel .carrossel-preso__texto > p { color: rgba(245, 245, 240, 0.8); }
.projetos-r--carrossel .carrossel-preso__texto > .projeto__destaque { color: var(--papel); }
.projetos-r--carrossel .carrossel-preso__texto > .projeto__tipo { color: var(--lima); }
/* no computador (o modo presa do kit) os 8 cartões dividem a mesma área e o kit esmaece só o texto e a mídia, nunca o
   cartão: com o vidro no cartão, o de cima cobria o texto dos de baixo. Ali o cartão fica sem fundo, o vidro escuro vai
   para o texto e a moldura de cromo fica com a mídia */
@media (prefers-reduced-motion: no-preference) and (min-width: 64rem) and (min-height: 36rem) {
  .js .projetos-r--carrossel .projeto-alto { padding: 0; background: none; box-shadow: none; }
  .js .projetos-r--carrossel .carrossel-preso__texto {
    padding: clamp(1.25rem, 2vw, 1.75rem);
    border-radius: var(--raio-vidro);
    background:
      linear-gradient(180deg, rgba(245, 245, 240, 0.08), rgba(245, 245, 240, 0) 2.5rem),
      linear-gradient(180deg, rgba(26, 26, 26, 0.9), rgba(10, 10, 10, 0.92));
    box-shadow: var(--vidro-sombra), inset 0 0 0 1px var(--linha-vidro);
  }
  /* a mídia vira a composição do projeto: a tela grande do computador, do tamanho da coluna, com o celular por cima no
     canto (só o celular alto deixava a direita da tela vazia). O conjunto mede M = min(86cqw, 130cqh): o celular passa
     14% para a direita e 18% para baixo, e o translate centra os dois juntos */
  .js .projetos-r--carrossel .projeto-alto__midia {
    display: grid; place-items: center; container-type: size;
    aspect-ratio: auto; max-height: none; overflow: visible; border: 0; border-radius: 0; background: none;
  }
  .js .projetos-r--carrossel .projeto-alto__conjunto { display: block; position: relative; width: min(86cqw, 130cqh); translate: -7% -9%; }
  .js .projetos-r--carrossel .projeto-alto__monitor {
    display: block; overflow: hidden; aspect-ratio: 16 / 10;
    border: 2px solid transparent; border-radius: 16px; background: #0d0d0d padding-box, var(--cromo) border-box;
    box-shadow: var(--vidro-sombra);
  }
  .js .projetos-r--carrossel .projeto-alto__celular {
    position: absolute; right: -14%; bottom: -18%; width: 26%; height: auto; overflow: hidden; aspect-ratio: 780 / 1688;
    border: 2px solid transparent; border-radius: 18px; background: #0d0d0d padding-box, var(--cromo) border-box;
    box-shadow: -18px 24px 44px -18px #000;
  }
  /* a troca por encaixe (Revisor, 06/11: parado no meio da troca do kit, duas mídias meio transparentes ficavam uma sobre
     a outra). Só o cartão da vez (a bolinha ativa, marcada pelo reforma.js) aparece, inteiro; os outros saem em 0,18 s e
     o novo entra depois, em 0,3 s: nenhuma posição parada fica no meio do esmaecer, e o próximo não espia mais na borda.
     O número em contorno vai junto com o seu cartão ("03 02" nunca um sobre o outro) */
  .js .projetos-r--carrossel [data-modo="presa"] .carrossel-preso__item > :is(.carrossel-preso__midia, .carrossel-preso__texto, .carrossel-preso__contorno) {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translate3d(0, 12px, 0) !important;
    transition: opacity 0.18s linear, transform 0.18s linear, visibility 0s linear 0.18s;
  }
  .js .projetos-r--carrossel [data-modo="presa"] .carrossel-preso__item.na-vez > :is(.carrossel-preso__midia, .carrossel-preso__texto, .carrossel-preso__contorno) {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    transition: opacity 0.3s var(--sai) 0.16s, transform 0.4s var(--sai) 0.16s, visibility 0s linear 0.16s;
  }
  .js .projetos-r--carrossel [data-modo="presa"] .carrossel-preso__item.na-vez > .carrossel-preso__contorno { opacity: 0.35 !important; }
}

/* ---------- 6 · Diferenciais e depoimentos ---------- */

.capsula {
  position: relative;
  padding: clamp(1.5rem, 4vw, 3rem) clamp(1.1rem, 3vw, 3rem);
  border: 2px solid transparent;
  border-radius: clamp(28px, 4vw, 56px);
  background: linear-gradient(180deg, rgba(36, 36, 36, 0.86), rgba(12, 12, 12, 0.9)) padding-box, var(--cromo) border-box;
  box-shadow: inset 0 0 0 1px rgba(198, 255, 0, 0.25), inset 0 -30px 60px -40px rgba(198, 255, 0, 0.5), 0 50px 90px -50px #000;
}
.capsula::before {
  content: '';
  position: absolute;
  inset: 6px 6px auto;
  height: 40%;
  border-radius: inherit;
  border-bottom-left-radius: 50% 20%;
  border-bottom-right-radius: 50% 20%;
  background: linear-gradient(180deg, rgba(245, 245, 240, 0.12), transparent);
  pointer-events: none;
}
.capsula__titulo { font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.8rem); margin-bottom: 1.25rem; }
.capsula__lista { display: grid; gap: 1.1rem; margin: 0; padding: 0; list-style: none; }
.capsula__lista li { display: grid; gap: 0.4rem; padding-top: 1rem; border-top: 1px solid rgba(245, 245, 240, 0.14); }
.capsula__lista h4 { margin: 0; font-family: var(--letra-titulo); font-size: 1.2rem; font-weight: 600; }
.capsula__lista p { margin: 0; color: var(--texto-suave); font-size: 0.9375rem; }
.capsula__n { font: 600 0.8125rem/1 var(--mono); color: var(--lima); }
.depoimentos { display: grid; gap: 0.8rem; margin-top: clamp(3rem, 7vw, 5rem); }
.depoimentos__titulo { font-size: clamp(1.7rem, 1.2rem + 2vw, 2.8rem); }
.aviso-exemplo { margin: 0; justify-self: start; padding: 0.3em 0.75em; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(245, 245, 240, 0.35); }
.depoimentos__lista { display: grid; gap: 0.9rem; margin: 0.6rem 0 0; padding: 0; list-style: none; }
.depoimento { display: grid; gap: 0.9rem; align-content: space-between; padding: 1.25rem; border-radius: 22px; background: var(--vidro); box-shadow: inset 0 0 0 1px var(--linha-vidro); }
.depoimento blockquote { margin: 0; }
.depoimento blockquote p { margin: 0; font-size: 1.06rem; line-height: 1.45; }
@media (min-width: 48rem) {
  .capsula__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; }
  .depoimentos__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 72rem) {
  .capsula__lista { grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 1.6rem; }
  .depoimentos__lista { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- 7 · Perguntas e a chamada final: o lançamento ---------- */

/* a seção acaba com o palco do lançamento: o respiro do alto e o fundo do horizonte ficam só nas perguntas */
.final-r { padding: 0; }
/* rodada "nenhum vazio": as perguntas acabam curtas e ficam por cima do alto do palco (que sobe 20svh por baixo delas,
   com o fundo do horizonte se apagando ali): sem a faixa lisa entre as perguntas e a chamada */
.final-r__perguntas { position: relative; z-index: 1; padding: clamp(3rem, 5.5vw, 4.5rem) 0 clamp(1.25rem, 3vw, 2rem); }
.final-r__perguntas > .fundo-secao { mask-image: linear-gradient(180deg, #000 calc(100% - 26svh), transparent); }
.perguntas-r { display: grid; gap: 0.9rem; }
.perguntas-r__cabeca { display: grid; gap: 0.9rem; }
.perguntas-r__lista { display: grid; gap: 0.6rem; margin-top: 0.8rem; }
.pergunta { border-radius: 18px; background: var(--vidro); box-shadow: inset 0 0 0 1px var(--linha-vidro); }
.pergunta[open] { box-shadow: inset 0 0 0 1px rgba(198, 255, 0, 0.5); }
.pergunta__resumo { display: flex; align-items: center; gap: 1rem; min-height: 56px; padding: 0.85rem 1.1rem; cursor: pointer; list-style: none; }
.pergunta__resumo::-webkit-details-marker { display: none; }
.pergunta__titulo { flex: 1; font-family: var(--letra-texto); font-size: 1rem; font-weight: 600; letter-spacing: 0; line-height: 1.35; }
.pergunta__sinal { position: relative; flex: none; width: 28px; height: 28px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(198, 255, 0, 0.6); }
.pergunta__sinal::before, .pergunta__sinal::after { content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; translate: -50% -50%; border-radius: 2px; background: var(--lima); transition: transform 0.3s var(--sai); }
.pergunta__sinal::after { transform: rotate(90deg); }
.pergunta[open] .pergunta__sinal::after { transform: rotate(0deg); }
.pergunta__resposta { margin: 0; padding: 0 1.1rem 1.1rem; color: var(--texto-suave); }

/* o palco: no celular (e em tela em pé) a seta fica no alto e a chamada embaixo; no PC a seta à direita e a chamada à esquerda */
.decolagem { position: relative; }
.decolagem__palco {
  position: relative;
  box-sizing: border-box; /* o palco preso tem a altura da tela com o respiro dentro: a chamada cabe embaixo da seta */
  display: grid;
  align-content: end;
  min-height: 100svh;
  overflow: hidden;
  padding: min(112vw, 52.8svh) 0 clamp(1.25rem, 4svh, 2.5rem);
  background:
    linear-gradient(180deg, var(--fundo), transparent 16%),
    radial-gradient(60% 45% at 45% 40%, rgba(198, 255, 0, 0.08), transparent 70%),
    linear-gradient(180deg, rgba(11, 11, 11, 0.62), rgba(11, 11, 11, 0.86)),
    var(--fibra) 0 0 / 300px auto repeat,
    var(--fundo);
}
/* o brilho no alto à direita, para onde a seta vai: acende com o lançamento */
.decolagem__palco::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(48% 42% at 90% 0%, rgba(198, 255, 0, 0.3), transparent 70%);
  opacity: calc(0.5 + var(--lanca, 0) * 0.5);
}
/* a rota da seta: uma linha de circuito do bico da seta até o brilho do alto, no céu do palco que ficava liso enquanto
   a seta paira; some quando ela é lançada */
.decolagem__rota { position: absolute; right: 6%; top: calc(var(--altura-cabecalho) + 3.5rem); width: 46%; height: 19svh; overflow: visible; pointer-events: none; opacity: calc(0.9 - var(--lanca, 0) * 0.9); filter: drop-shadow(0 0 5px rgba(198, 255, 0, 0.5)); }
.decolagem__trilha { fill: none; stroke: rgba(198, 255, 0, 0.55); stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.decolagem__trilha--fina { stroke: rgba(245, 245, 240, 0.28); stroke-width: 1.25; }
.decolagem__no { fill: none; stroke: var(--lima); stroke-width: 7; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.decolagem__parado { position: absolute; top: 0; left: 50%; translate: -50% 0; width: min(100%, 46.8svh); height: auto; pointer-events: none; }
.decolagem__seta, .decolagem__particulas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.decolagem__seta { opacity: 0; }
.decolagem.tocando .decolagem__parado { visibility: hidden; }
.decolagem__dentro { position: relative; }
.chamada-r { max-width: 40rem; margin-inline: auto; padding: clamp(1.25rem, 3vw, 2.5rem); }
.chamada-r__conteudo { position: relative; display: grid; gap: 0.8rem; justify-items: start; }
.chamada-r__titulo { font-size: clamp(1.75rem, 1.2rem + 2.6vw, 3.4rem); }
.chamada-r__texto { margin: 0; color: var(--texto-suave); }
.chamada-r__email { margin: 0; color: var(--texto-suave); }
.chamada-r__email a, .geo a { color: var(--lima); text-underline-offset: 3px; }
.geo { margin-top: clamp(2.5rem, 6vw, 4rem); padding-top: 1.5rem; border-top: 1px solid rgba(245, 245, 240, 0.14); }
.geo__titulo { font-family: var(--letra-texto); font-size: 0.875rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(245, 245, 240, 0.78); margin-bottom: 0.9rem; }
.geo__lista { display: grid; gap: 0.7rem; margin: 0; }
.geo__lista div { display: grid; gap: 0.1rem; }
.geo__lista dt { font-weight: 700; font-size: 0.875rem; }
.geo__lista dd { margin: 0; color: var(--texto-suave); font-size: 0.9375rem; }

/* com movimento: o palco fica preso enquanto a seta paira, recua e é lançada (uma tela de rolagem: a seta inteira no
   começo, o lançamento no meio e o último quadro com a seta segurando o fim, sem cauda escura antes do rodapé) */
.anima .decolagem { height: 200svh; margin-top: -20svh; }
.anima .decolagem__palco { position: sticky; top: 0; height: 100svh; min-height: 0; }
/* opção 3 (Maestro, 08/11), e 1 e 2 desde 09/11 (antes, 1 tela presa e 12 toques): o palco não prende mais; a seta se
   forma e é lançada no tempo (reforma.js) */
.site-r.anima .decolagem { height: 100svh; }

@media (min-aspect-ratio: 11/10) {
  .decolagem__palco { align-content: center; padding: calc(var(--altura-cabecalho) + 1.5rem) 0 1.5rem; }
  .decolagem__parado { left: 0; translate: none; width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; }
  .chamada-r { max-width: min(34rem, 42vw); margin-inline: 0; }
  .decolagem__rota { right: 4%; top: calc(var(--altura-cabecalho) + 5.5rem); width: 24%; height: 20svh; }
  /* sem movimento: o palco do tamanho da chamada, com a seta parada no alto (nada de faixa escura antes do cartão) */
  :root:not(.anima) .decolagem__palco { min-height: 74svh; }
  :root:not(.anima) .decolagem__parado { object-position: 50% 82%; }
}
@media (min-width: 64rem) {
  .perguntas-r { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
  .perguntas-r__cabeca { position: sticky; top: calc(var(--altura-cabecalho) + 1.5rem); }
  .perguntas-r__lista { margin-top: 0; }
  .geo__lista { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.25rem; }
}

/* ---------- Rodapé, o botão fixo e o comercial ---------- */

.rodape-r { position: relative; isolation: isolate; padding: clamp(3rem, 7vw, 5rem) 0 calc(5.5rem + env(safe-area-inset-bottom)); overflow: hidden; }
.rodape-r__grade { display: grid; gap: 1.75rem; }
.rodape-r__marca { display: grid; gap: 0.8rem; }
.rodape-r__logo-mini { width: 122px; height: 32px; color: var(--papel); }
.rodape-r__menu ul, .rodape-r__contato { display: grid; gap: 0.15rem; margin: 0; padding: 0; list-style: none; }
.rodape-r__menu a, .rodape-r__contato a { display: inline-flex; align-items: center; gap: 0.4em; min-height: 44px; color: var(--papel); text-decoration: none; }
.rodape-r__menu a { min-width: 44px; }
.rodape-r__menu a:hover, .rodape-r__contato a:hover { color: var(--lima); }
.rodape-r__contato li:last-child { min-height: 44px; display: flex; align-items: center; color: var(--texto-suave); }
.rodape-r__notas { display: grid; gap: 0.5rem; font-size: 0.875rem; color: rgba(245, 245, 240, 0.72); }
.rodape-r__notas p { margin: 0; }
.rodape-r__notas a { color: var(--papel); }
.rodape-r__logo {
  display: block;
  width: min(100% - 2 * var(--gutter), var(--largura));
  height: auto;
  margin: clamp(2rem, 6vw, 4rem) auto 0;
  aspect-ratio: 3500.3 / 918.6;
  color: transparent;
  stroke: rgba(198, 255, 0, 0.55);
  stroke-width: 6;
  filter: drop-shadow(0 0 30px rgba(198, 255, 0, 0.25));
}
@media (min-width: 48rem) {
  .rodape-r__grade { grid-template-columns: 1.3fr 1fr 1fr 1.6fr; align-items: start; }
}

.zap-fixo-r {
  position: fixed;
  z-index: 40;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 52px;
  padding: 0 1.2rem 0 1rem;
  border-radius: 999px;
  background: linear-gradient(180deg, #e4ff7a 0%, var(--lima) 46%, #a8d900 100%);
  color: var(--fundo);
  font-weight: 700;
  text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(245, 245, 240, 0.9), 0 0 0 1px rgba(11, 11, 11, 0.6), 0 14px 34px -10px rgba(198, 255, 0, 0.6);
  transition: opacity 0.3s var(--sai), transform 0.3s var(--sai);
}
.zap-fixo-r .zap-fixo__icone { width: 22px; height: 22px; }
.anima .zap-fixo-r:not(.mostrar), .zap-fixo-r.cobrindo { opacity: 0; transform: translateY(16px); pointer-events: none; visibility: hidden; transition: opacity 0.3s var(--sai), transform 0.3s var(--sai), visibility 0s 0.3s; }
:root:not(.anima) .zap-fixo-r.cobrindo { transform: none; transition: none; }

.comercial-r { width: min(100% - 2rem, 30rem); max-height: calc(100svh - 2rem); padding: 0; border: 0; background: none; color: var(--papel); }
.comercial-r::backdrop { background: rgba(5, 5, 5, 0.82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.comercial-r__caixa { display: grid; gap: 0.8rem; padding: 1rem; background-color: rgba(20, 20, 20, 0.92); }
.comercial-r__topo { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.comercial-r__titulo { font-size: 1.3rem; }
.comercial-r__fechar { width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--vidro); box-shadow: inset 0 0 0 1px rgba(245, 245, 240, 0.3); color: var(--papel); font-size: 1.5rem; cursor: pointer; }
.comercial-r__abas { display: flex; gap: 0.5rem; }
.comercial-r__aba { flex: 1; min-height: 44px; border: 0; border-radius: 999px; background: var(--vidro); box-shadow: inset 0 0 0 1px rgba(245, 245, 240, 0.25); color: var(--papel); font: inherit; font-weight: 600; font-size: 0.9375rem; cursor: pointer; }
.comercial-r__aba[aria-pressed='true'] { background: var(--lima); color: var(--fundo); }
.comercial-r__video { width: 100%; height: auto; max-height: calc(100svh - 14rem); aspect-ratio: 9 / 16; border-radius: 16px; background: #000; object-fit: contain; }
.comercial-r__legenda { margin: 0; font-size: 0.875rem; color: var(--texto-suave); }

/* ---------- A abertura em terminal (opção 1) ---------- */

.abertura { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .site-r--1 .abertura {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: grid;
    place-items: center;
    padding: var(--gutter);
    background: radial-gradient(60% 50% at 50% 40%, rgba(198, 255, 0, 0.08), transparent 70%), #050505;
    animation: abertura-some 0.5s 4.2s var(--sai) forwards;
  }
}
.abertura.sai { animation: abertura-sai 0.6s var(--sai) forwards; }
.abertura.sai .terminal { animation: terminal-vira 0.6s var(--sai) forwards; }
.abertura.pula, .abertura.pula .terminal { animation-duration: 0.28s; }
.abertura[hidden] { display: none !important; }
.abertura__chuva { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.55; }
.terminal {
  position: relative;
  width: min(100%, 40rem);
  border: 2px solid transparent;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(26, 26, 26, 0.86), rgba(8, 8, 8, 0.92)) padding-box, var(--cromo) border-box;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(245, 245, 240, 0.4), inset 0 -30px 60px -40px rgba(198, 255, 0, 0.55), 0 40px 90px -30px #000, 0 0 80px -30px rgba(198, 255, 0, 0.6);
  overflow: hidden;
  animation: terminal-entra 0.45s var(--mola) both;
}
.terminal::before { content: ''; position: absolute; inset: 0 0 auto; height: 40%; background: linear-gradient(180deg, rgba(245, 245, 240, 0.1), transparent); pointer-events: none; }
.terminal__barra { display: flex; align-items: center; gap: 7px; padding: 0.7rem 1rem; border-bottom: 1px solid rgba(245, 245, 240, 0.12); font: 600 0.75rem var(--mono); color: rgba(245, 245, 240, 0.72); }
.terminal__barra i { width: 11px; height: 11px; border-radius: 50%; background: rgba(245, 245, 240, 0.3); }
.terminal__barra i:first-child { background: var(--lima); box-shadow: var(--brilho-lima); }
.terminal__barra span { margin-left: 0.5rem; }
.terminal__corpo { display: grid; gap: 0.3rem; min-height: 15.5rem; padding: 1rem 1.1rem 0.6rem; font: 500 clamp(0.875rem, 0.8rem + 0.35vw, 1.05rem)/1.45 var(--mono); color: var(--lima); text-shadow: 0 0 10px rgba(198, 255, 0, 0.45); }
.terminal__linha { margin: 0; opacity: 0; transform: translateY(8px); transition: opacity 0.25s var(--sai), transform 0.3s var(--sai); }
.terminal__linha--comando { opacity: 1; transform: none; color: var(--papel); text-shadow: none; }
.terminal__linha--comando b { color: var(--lima); font-weight: 700; }
.terminal__linha.mostra { opacity: 1; transform: none; }
.terminal__linha--fim::after { content: ''; display: inline-block; width: 0.6em; height: 1.05em; margin-left: 0.3em; vertical-align: -0.15em; background: var(--lima); animation: piscar 0.9s steps(1) infinite; }
.terminal__digitado { white-space: pre; }
.terminal__progresso { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0.8rem; padding: 0.4rem 1.1rem 1.1rem; font: 600 0.8125rem var(--mono); color: var(--papel); }
.terminal__trilha { position: relative; height: 10px; border-radius: 999px; background: rgba(245, 245, 240, 0.1); box-shadow: inset 0 0 0 1px rgba(245, 245, 240, 0.18); overflow: hidden; }
.terminal__trilha b { position: absolute; inset: 0 auto 0 0; width: 100%; border-radius: inherit; background: linear-gradient(90deg, #a8d900, var(--lima) 70%, #e4ff7a); box-shadow: var(--brilho-lima); transform: scaleX(var(--carga, 0)); transform-origin: 0 50%; }
.abertura__pular { position: absolute; left: 0; right: 0; bottom: max(1.25rem, env(safe-area-inset-bottom)); margin: 0; text-align: center; font: 600 0.75rem var(--mono); color: rgba(245, 245, 240, 0.7); letter-spacing: 0.08em; }
/* o código vira layout: as linhas viram os blocos de um site */
.abertura.monta .terminal__linha:not(.terminal__linha--comando):not(.terminal__linha--fim) { color: transparent; text-shadow: none; background: linear-gradient(90deg, rgba(198, 255, 0, 0.55), rgba(198, 255, 0, 0.18)); border-radius: 6px; transition: color 0.2s, background-color 0.3s; }
.abertura.monta .terminal__linha:nth-child(2) { width: 22%; }
.abertura.monta .terminal__linha:nth-child(3) { width: 70%; }
.abertura.monta .terminal__linha:nth-child(4) { width: 48%; }
.abertura.monta .terminal__linha:nth-child(5) { width: 86%; }
.abertura.monta .terminal__linha:nth-child(6) { width: 40%; }
.abertura.monta .terminal__linha:nth-child(7) { width: 64%; }
.abertura.monta .terminal__linha:nth-child(8) { width: 30%; border-radius: 999px; background: var(--lima); }

@keyframes terminal-entra { from { opacity: 0; transform: translateY(24px) scale(0.94); } }
@keyframes terminal-vira { to { opacity: 0; transform: scale(1.08) translateY(-3%); filter: blur(6px); } }
@keyframes abertura-sai { to { opacity: 0; visibility: hidden; } }
@keyframes abertura-some { to { opacity: 0; visibility: hidden; } }
@keyframes piscar { 50% { opacity: 0; } }

/* ---------- O toque de ousadia: a luz que segue o mouse ---------- */

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .servico.vidro-cartao, .projeto, .depoimento, .pergunta { transition: transform 0.35s var(--sai), box-shadow 0.35s var(--sai); }
  .servico:hover { transform: translateY(-4px); }
  .depoimento:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px rgba(198, 255, 0, 0.45); }
}

/* ---------- Reduzir movimento: nada anda sozinho ---------- */

@media (prefers-reduced-motion: reduce) {
  .tf-cursor-texto, .terminal__linha--fim::after { animation: none; }
  .projetos-r--pilha .projeto__midia { animation: none; }
}