/* site-prumo.css — as peças do SITE que as provas não tinham (12/09/2026).

   Pedido dele: "vamos montar o site com a café... uma página por vez, começando
   pela página inicial". A roupa é a da prova café, sem mudar nada: este arquivo
   só acrescenta o que uma página de verdade precisa e uma prova não tinha
   (menu, cartão de serviço, portfólio, dúvidas, formulário que envia, rodapé e
   barra fixa no celular).

   Regras:
   · carregado por ÚLTIMO, depois de tema-prumo, mov, espaco, vida, fundo e perf
   · só usa os tokens do tema-prumo.css; o único hex novo é o do erro de campo,
     medido abaixo
   · nada daqui esconde conteúdo */

:root { color-scheme: dark; }

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

.pular { position: absolute; left: 1rem; top: -4rem; z-index: 60; padding: .6rem 1rem;
  background: var(--acento); color: #241905; border-radius: 9px; font-weight: 600;
  text-decoration: none; }
.pular:focus { top: .8rem; }

/* ------------------------------------------------------------------ nav -- */
.nav a.nav__marca { padding: 0; background: none; margin-right: auto; }
/* logo HORIZONTAL (símbolo + HOUZZES): no quadrado, 20 px de altura deixavam o
   nome ilegível, porque o nome ocupava um quinto da imagem */
.nav__marca img { height: 30px; width: auto; display: block; }
@media (max-width: 620px) { .nav__marca img { height: 26px; } }
.nav__links { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .4rem; }
/* o .nav a do tema é mais forte que o .botao: o botão da navegação precisa
   ser redeclarado aqui, senão vira link cinza */
.nav a.botao { font-family: var(--casa); font-size: .875rem; padding: .5rem 1rem; margin-left: .5rem; }
.nav a.botao--principal { color: #241905; background: var(--acento); }

.menu { display: none; position: relative; }
.menu > summary { list-style: none; cursor: pointer; display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: 9px; border: 1px solid var(--borda); color: var(--texto); }
.menu > summary::-webkit-details-marker { display: none; }
.menu[open] > summary { border-color: var(--acento); color: var(--acento); }
.menu__painel { position: absolute; right: 0; top: calc(100% + .5rem); min-width: 220px;
  display: grid; gap: .15rem; padding: .5rem; background: var(--poco);
  border: 1px solid var(--borda); border-radius: var(--raio);
  box-shadow: 0 16px 40px -12px rgba(0, 0, 0, .8); }
.nav .menu__painel a { font-family: var(--casa); font-size: .9375rem; color: var(--texto); padding: .6rem .8rem; }

@media (max-width: 760px) {
  .nav__links { display: none; }
  .menu { display: block; }
}

/* ----------------------------------------- cabeçalho que aparece ao rolar -- */
/* Escolha dele (13/09): sem cabeçalho na primeira dobra, com o logo solto na
   abertura; ao rolar, o cabeçalho desce trazendo o logo. Tudo depende de
   html.js-cab, que o cabecalho.js escreve: sem script, o cabeçalho segue
   visível e no fluxo, como sempre foi. */
html.js-cab { scroll-padding-top: 4.5rem; }
html.js-cab .nav {
  position: fixed; top: 0; left: 0; right: 0;
  transform: translateY(-100%); opacity: 0; visibility: hidden;
  transition: transform .5s cubic-bezier(.22, .61, .36, 1), opacity .4s ease, visibility 0s linear .5s;
}
/* :focus-within: quem navega pelo teclado nunca cai num link invisível */
html.js-cab .nav.nav--visivel,
html.js-cab .nav:focus-within {
  transform: none; opacity: 1; visibility: visible;
  transition: transform .5s cubic-bezier(.22, .61, .36, 1), opacity .4s ease, visibility 0s;
}
@media (prefers-reduced-motion: reduce) {
  html.js-cab .nav, html.js-cab .nav.nav--visivel { transition: none; }
}

/* o logo da abertura: é ele que "vira" o logo do cabeçalho */
.hero__marca { display: block; height: 34px; width: auto; margin-bottom: clamp(var(--e5, 3.4rem), 9vh, var(--e6, 5.5rem)); }
@media (max-width: 620px) { .hero__marca { height: 28px; } }
/* sem a barra em cima, o topo da abertura não precisa do respiro de 5 a 9 rem */
.hero { padding-top: clamp(var(--e4, 2.1rem), 6vh, var(--e5, 3.4rem)); }

/* ----------------------------------------------------------------- hero -- */
/* a unidade menor que o número: "5 dias" lê como medida, não como frase */
.medida__valor small { font-size: .42em; font-weight: 500; color: var(--apoio); margin-left: .25em; letter-spacing: 0; }
/* o título fica em UMA linha no computador, como na prova aprovada */
.hero__sub { max-width: 56ch; }

/* ------------------------------------------------------ cartão de serviço -- */
.servico { display: flex; flex-direction: column; }
.servico h3 { font-size: 1.25rem; margin-top: var(--e2, .8rem); }
.servico__para { color: var(--apoio); font-size: .9375rem; }
.servico ul { list-style: none; margin: 0 0 var(--e3, 1.3rem); padding: 0; display: grid; gap: .45rem;
  font-size: .9375rem; }
.servico li { display: flex; gap: .6rem; align-items: flex-start; }
.servico li::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: .62rem;
  border-radius: 50%; background: var(--acento); }
.servico__preco { margin-top: auto; padding-top: var(--e3, 1.3rem); border-top: 1px solid var(--borda);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem; }
.servico__valor { display: block; font-family: var(--maquina); font-variant-numeric: tabular-nums;
  font-size: 1.6rem; font-weight: 700; line-height: 1; color: var(--creme); }
.servico__valor small { font-size: .9rem; font-weight: 500; color: var(--apoio); }
.servico__unidade { display: block; font-size: var(--fs-nota); color: var(--apoio); margin-top: .3rem; }

/* ------------------------------------------------------- passo numerado -- */
.passo__num { display: block; font-family: var(--maquina); font-variant-numeric: tabular-nums;
  font-size: 2rem; font-weight: 700; line-height: 1; color: var(--acento); margin-bottom: var(--e3, 1.3rem); }

/* ---------------------------------------------------- crescer numa seção -- */
/* O fundo.css só conhece o #movimento da prova. Aqui a mesma regra vale para
   qualquer seção marcada com data-crescer: um lugar só da página, como ele
   pediu ("não deixaria no site inteiro"). Mesma opacidade medida na prova. */
[data-fundo~="crescer-secao"] [data-crescer] { position: relative; isolation: isolate; overflow: hidden; }
[data-fundo~="crescer-secao"] [data-crescer] .crescer-local {
  display: block; position: absolute; z-index: -1; pointer-events: none; opacity: .10;
  right: -2vw; bottom: 0; width: min(40vw, 500px); }
@media (max-width: 760px) {
  [data-fundo~="crescer-secao"] [data-crescer] .crescer-local { width: 92vw; right: -4vw; opacity: .035; }
}

/* ------------------------------------------------------------ portfólio -- */
a.bloco { display: flex; flex-direction: column; gap: .35rem; color: inherit; text-decoration: none; }
.portfolio__onde { color: var(--apoio); font-size: .9375rem; margin: 0; }
.portfolio__url { margin-top: auto; padding-top: var(--e2, .8rem); font-family: var(--maquina);
  font-size: var(--fs-nota); color: var(--acento); overflow-wrap: anywhere; }
.portfolio__url::before { content: "↗ "; }

/* --------------------------------------------------------------- dúvidas -- */
.faq { max-width: 52rem; border-top: 1px solid var(--borda); }
.faq details { border-bottom: 1px solid var(--borda); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between;
  align-items: center; gap: 1rem; padding: 1.15rem 0; font-weight: 600; transition: color var(--lento); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font-family: var(--maquina); font-size: 1.4rem;
  font-weight: 400; line-height: 1; color: var(--acento); transition: transform var(--lento); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--acento); }
.faq details p { color: var(--apoio); max-width: 64ch; padding-bottom: 1.2rem; margin: 0; }

/* -------------------------------------------------------------- contato -- */
.contato { display: grid; gap: var(--e5, 3.4rem); align-items: start; }
@media (min-width: 880px) { .contato { grid-template-columns: 1fr minmax(0, 30rem); } }
.contato__whats { margin-top: var(--e4, 2.1rem); }

/* ----------------------------------------------------------- formulário -- */
/* Os nomes de classe são os que o form.js procura (.campo, .campo__erro,
   .armadilha, .form__status, .form__sucesso, .enviado). Não renomear. */
.form { background: var(--sup); border: 1px solid var(--borda); border-radius: var(--raio);
  padding: 1.6rem 1.7rem; position: relative; }
.form::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: rgba(255, 255, 255, .07); }
.form__titulo { font-size: 1.25rem; margin-bottom: .3rem; }
.form__apoio { color: var(--apoio); font-size: .9375rem; }
.campos--2 { display: grid; gap: 0 1rem; grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr)); }
.campo > label { display: block; font-family: var(--maquina); font-size: var(--fs-nota);
  letter-spacing: .06em; text-transform: uppercase; color: var(--apoio); margin-bottom: .32rem; }
/* o tema-prumo estiliza TODO `.campo span` (bloco, maiúscula, cinza), e isso
   pegava o "(opcional)" e a mensagem de erro: medido no navegador, o erro saía
   na cor do apoio. Os dois seletores abaixo têm força maior de propósito. */
.campo span.opcional { display: inline; font-family: inherit; text-transform: none; letter-spacing: 0; margin: 0; }
.campo textarea { min-height: 6rem; resize: vertical; }
/* #FFB4A0 sobre o bloco #322822 mede 8,40 e sobre o campo #42352C mede 6,91:
   o erro se lê sem virar alarme vermelho no meio do café */
.campo span.campo__erro { display: none; font-family: var(--casa); font-size: var(--fs-nota);
  text-transform: none; letter-spacing: 0; color: #FFB4A0; margin: .3rem 0 0; }
.campo.erro span.campo__erro { display: block; }
.campo.erro input, .campo.erro select { border-color: #FFB4A0; }
.armadilha { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form .botao { width: 100%; justify-content: center; margin-top: .3rem; }
.form__status { font-size: .9375rem; margin: .7rem 0 0; min-height: 1.4rem; }
.form__status--bad { color: #FFB4A0; font-weight: 600; }
.form__nota { font-size: var(--fs-nota); color: var(--apoio); margin: 0; }
.form__sucesso { display: none; text-align: center; padding: 1rem 0; }
.form__sucesso .botao { width: auto; }
.form.enviado > :not(.form__sucesso) { display: none; }
.form.enviado .form__sucesso { display: block; }

/* --------------------------------------------------------------- rodapé -- */
.rodape { border-top: 1px solid var(--borda); background: var(--poco); }
.rodape__grade { display: grid; gap: var(--e4, 2.1rem); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.rodape img { height: 28px; width: auto; margin-bottom: 1rem; }
.rodape h2 { font-family: var(--maquina); font-size: var(--fs-nota); font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--apoio); margin-bottom: .8rem; }
.rodape ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.rodape a { color: var(--texto); text-decoration: none; }
.rodape a:hover { color: var(--acento); }
.rodape__fim { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1.5rem;
  margin-top: var(--e5, 3.4rem); padding-top: var(--e3, 1.3rem); border-top: 1px solid var(--borda); }

/* ------------------------------------------------- barra fixa no celular -- */
.barra-fixa { display: none; }
@media (max-width: 760px) {
  .barra-fixa { display: flex; gap: .5rem; position: fixed; left: 0; right: 0; bottom: 0; z-index: 35;
    padding: .6rem clamp(1.1rem, 4vw, 2rem) calc(.6rem + env(safe-area-inset-bottom));
    background: rgba(12, 9, 8, .95); border-top: 1px solid var(--borda); backdrop-filter: blur(12px); }
  .barra-fixa .botao { flex: 1; justify-content: center; }
  body { padding-bottom: 4.6rem; }
}