/* ==========================================================================
   Viva Voz — as páginas de oferta (marcenaria e saúde)
   Camada sobre estilo.css. A direção é a do ORÇAMENTO: item, valor, total.
   É o documento que o dono de marcenaria escreve todo dia e o que o
   consultório entrega ao paciente particular — nos dois casos, um papel que
   se lê de cima para baixo procurando o número. Daí os fios, os totais
   tipografados e a ausência de enfeite.

   As classes daqui são compartilhadas pelas duas páginas: .ficha (o
   combinado na primeira dobra), .conta (o orçamento item por item),
   .duvida (o FAQ em <details>), .corte (o filtro) e .previa (o
   formulário). Só .obra* é exclusivo da marcenaria.
   Paleta e tipografia continuam travadas no Manual de Marca.
   ========================================================================== */

/* ---------- abertura: promessa e preço na mesma tela -------------------- */

.oferta{
  display:grid;grid-template-columns:1.22fr .78fr;
  gap:clamp(2rem,5vw,4.5rem);align-items:center;width:100%;
}
.oferta h1{
  font-size:clamp(2.2rem,5vw,4rem);line-height:1;letter-spacing:-.035em;
  font-weight:300;margin:0 0 1.5rem;max-width:19ch;text-wrap:balance;
}
.oferta__sub{
  max-width:46ch;color:var(--bruma);margin:0 0 2.1rem;
  font-size:clamp(1.02rem,1vw + .7rem,1.2rem);
}
.oferta__sub b{color:var(--creme);font-weight:600}
.oferta__acoes{display:flex;flex-wrap:wrap;gap:.85rem}
.oferta__selo{
  margin:2.2rem 0 0;display:flex;align-items:center;gap:.7rem;
  font-family:var(--display);font-size:.78rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--neblina);
}
.oferta__selo::before{content:"";width:2.2rem;height:1px;background:var(--chama);flex:none}

/* a ficha: o combinado inteiro em quatro linhas, como um orçamento */
.ficha{
  background:var(--breu-carta);border:1px solid var(--breu-linha-forte);
  border-radius:1.1rem;padding:clamp(1.5rem,3vw,2.1rem);
  box-shadow:0 30px 60px -40px rgba(0,0,0,.9);
}
.ficha__titulo{
  font-family:var(--display);font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--chama-clara);margin:0 0 1.4rem;font-weight:500;
}
.ficha__linhas{list-style:none;margin:0;padding:0}
.ficha__linhas li{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding:.9rem 0;border-top:1px solid var(--breu-linha);
}
.ficha__linhas li:first-child{border-top:0;padding-top:0}
.ficha__linhas span{font-size:.92rem;color:var(--bruma);line-height:1.45}
.ficha__linhas b{
  font-family:var(--display);font-weight:400;font-size:1.45rem;letter-spacing:-.025em;
  color:var(--creme);white-space:nowrap;line-height:1;
}
.ficha__linhas .zero b{color:var(--chama-clara);font-weight:600}
.ficha__linhas small{display:block;font-size:.72rem;color:var(--neblina);letter-spacing:.04em}
.ficha__pe{
  margin:1.4rem 0 0;padding-top:1.2rem;border-top:1px solid var(--breu-linha-forte);
  font-size:.88rem;line-height:1.6;color:var(--neblina);
}
.ficha__pe b{color:var(--creme);font-weight:600}

/* ---------- obras: o antes e o depois em tamanho grande ---------------- */

.obras__grade{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.75rem,3.5vw,2.75rem);
  margin-top:clamp(2.5rem,6vw,4rem);
}
.obra{display:flex;flex-direction:column;gap:1.15rem;position:relative}
.obra__janela{
  position:relative;border-radius:.9rem;overflow:hidden;
  border:1px solid var(--creme-linha);background:#fff;
  box-shadow:0 26px 54px -34px rgba(5,19,32,.65);
}
/* Duas laminas do mesmo tamanho, uma sobre a outra, revezando.
   A miniatura no canto escondia o antes — que e justamente metade da
   prova. Aqui os dois aparecem inteiros, cada um na sua vez.
   A de baixo (antes) segura a altura; a de cima (depois) e a que anima. */
/* `z-index:0` (e nao apenas `position`) em cada lamina: a etiqueta tem
   z-index:2 e, sem um contexto de empilhamento proprio, ela subia para o
   nivel da janela e ficava escrito "Antes" por cima do depois. */
.obra__quadro{margin:0;width:100%;position:relative;z-index:0}
.obra__quadro img{width:100%;aspect-ratio:8/5;object-fit:cover;object-position:top;display:block}
.obra__quadro--depois{position:absolute;inset:0;z-index:1}
.obra__etiqueta{
  position:absolute;top:.5rem;left:.5rem;z-index:2;
  font-family:var(--display);font-size:.6rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;padding:.24rem .5rem;border-radius:.3rem;
}
.obra__etiqueta--antes{background:rgba(5,19,32,.88);color:var(--bruma)}
.obra__etiqueta--depois{background:var(--chama);color:#fff}

/* 6s de ciclo: cada lado fica 2,5s parado e a troca leva meio segundo.
   So opacidade, que e trabalho de compositor e nao custa quadro. */
@keyframes reveza{
  0%,42%  {opacity:1}
  50%,92% {opacity:0}
  100%    {opacity:1}
}
@media (prefers-reduced-motion:no-preference){
  .obra__quadro--depois{animation:reveza 6s ease-in-out infinite}
  /* atraso negativo: as quatro janelas entram em pontos diferentes do
     ciclo, senao a secao inteira pisca junto e vira um letreiro */
  .obra:nth-child(2) .obra__quadro--depois{animation-delay:-1.5s}
  .obra:nth-child(3) .obra__quadro--depois{animation-delay:-3s}
  .obra:nth-child(4) .obra__quadro--depois{animation-delay:-4.5s}
}

/* ---------- o mesmo revezamento na grade de casos da saude -------------
   Sao doze cartoes, entao o atraso de cada um vem do proprio HTML, na
   variavel --atraso que o pagina.js escreve. Estas regras vencem as de
   estilo.css porque este arquivo carrega depois.
   ---------------------------------------------------------------------- */

.antesdepois{position:relative;display:block;background:#fff}
.antesdepois .antes,.antesdepois .depois{margin:0;width:100%;position:relative;z-index:0}
.antesdepois .depois{position:absolute;inset:0;z-index:1}
.antesdepois img{width:100%;aspect-ratio:8/5;object-fit:cover;object-position:top;display:block}
@media (prefers-reduced-motion:no-preference){
  .antesdepois .depois{animation:reveza 6s ease-in-out infinite;animation-delay:var(--atraso,0s)}
}
/* quem pediu menos movimento ve os dois lado a lado, sem troca nenhuma */
@media (prefers-reduced-motion:reduce){
  .antesdepois{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--creme-linha)}
  .antesdepois .depois{position:static;inset:auto}
}

/* quem pediu menos movimento ve os dois lado a lado, sem troca nenhuma */
@media (prefers-reduced-motion:reduce){
  .obra__janela{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--creme-linha)}
  .obra__quadro--depois{position:static;inset:auto}
}
.obra__pe h3{
  font-family:var(--display);font-size:clamp(1.15rem,2vw,1.4rem);font-weight:500;
  color:var(--breu);margin:0 0 .3rem;letter-spacing:-.015em;
}
.obra__onde{
  display:block;font-family:var(--display);font-size:.75rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--brasa);margin-bottom:.75rem;
}
.obra__pe p{margin:0 0 .9rem;color:var(--tinta-suave);font-size:.95rem;line-height:1.62}
.obra__link{
  font-family:var(--display);font-size:.85rem;font-weight:500;letter-spacing:.05em;
  color:var(--brasa);text-decoration:none;display:inline-flex;align-items:center;gap:.4rem;
}
.obra__link:hover{text-decoration:underline}
/* O cartão inteiro abre o site no ar. No Clarity, 15 toques caíam na janela
   do antes-e-depois esperando que ela abrisse — e não abria. O link continua
   o mesmo, com o mesmo data-evento; só a área de toque vira o cartão todo. */
.obra__link::after{content:"";position:absolute;inset:0;z-index:3} /* acima das lâminas (1) e da etiqueta (2) */
.obra__link .seta{width:1em;height:1em;flex:none}

/* ---------- falas: o reconhecimento ------------------------------------- */

.falas{
  list-style:none;margin:clamp(2.5rem,6vw,4rem) 0 0;padding:0;
  display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(2rem,5vw,4rem);
}
.falas li{
  display:grid;grid-template-columns:auto 1fr;gap:clamp(1rem,2.5vw,1.9rem);
  padding:clamp(1.35rem,2.6vw,1.8rem) 0;border-top:1px solid var(--breu-linha);
}
.falas b{
  font-family:var(--display);font-weight:300;font-size:1.45rem;line-height:1.15;
  color:var(--chama);letter-spacing:-.02em;min-width:2ch;
}
.falas p{margin:0;color:var(--bruma);font-size:1rem;line-height:1.62}
.falas p em{font-style:normal;color:var(--creme);font-weight:600}

/* ---------- holofote: o argumento do arquiteto -------------------------- */

.holofote{
  border-left:2px solid var(--chama);
  padding:clamp(.5rem,2vw,1rem) 0 clamp(.5rem,2vw,1rem) clamp(1.5rem,4vw,3rem);
  max-width:58rem;
}
.holofote p{
  margin:0;font-family:var(--display);font-weight:300;
  font-size:clamp(1.5rem,3.4vw,2.5rem);line-height:1.14;letter-spacing:-.028em;
  color:var(--creme);
}
.holofote p .acende{font-weight:500}
/* especificidade: `.holofote p` (0,0,1,1) vencia de `.holofote__nota`
   (0,0,1,0) e a nota saia no corpo de display, do tamanho da frase */
.holofote p.holofote__nota{
  margin:1.9rem 0 0;max-width:56ch;color:var(--bruma);
  font-family:var(--texto);font-size:1.02rem;line-height:1.72;font-weight:400;
  letter-spacing:normal;
}

/* ---------- ganhos: o que muda no dia seguinte -------------------------- */

.ganhos{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--breu-linha);border:1px solid var(--breu-linha);
  margin-top:clamp(2.5rem,6vw,4rem);border-radius:1rem;overflow:hidden;
}
.ganho{background:var(--breu);padding:clamp(1.6rem,3vw,2.2rem);display:flex;flex-direction:column;gap:.8rem}
.ganho__n{
  font-family:var(--display);font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--chama-clara);font-weight:500;
}
.ganho h3{font-size:1.2rem;font-weight:500;letter-spacing:-.012em;line-height:1.22}
.ganho p{margin:0;color:var(--bruma);font-size:.97rem;line-height:1.65}

/* ---------- orçamento: item por item ------------------------------------ */

.orcamento{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.25rem,2.5vw,2rem);
  margin-top:clamp(2.5rem,6vw,4rem);align-items:stretch;
}
.conta{
  background:var(--creme-carta);border:1px solid var(--creme-linha);
  border-radius:1.1rem;padding:clamp(1.6rem,3vw,2.35rem);
  display:flex;flex-direction:column;
}
.conta--foco{border-color:rgba(209,100,13,.45);box-shadow:0 0 0 1px rgba(209,100,13,.16)}
.conta__topo{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding-bottom:1.2rem;border-bottom:1px solid var(--creme-linha);
}
.conta__rotulo{
  font-family:var(--display);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--brasa);font-weight:600;
}
.conta__valor{
  font-family:var(--display);font-weight:300;font-size:clamp(2rem,4vw,2.8rem);
  line-height:1;letter-spacing:-.035em;color:var(--breu);
}
.conta__valor small{font-size:.85rem;font-weight:400;letter-spacing:.02em;color:var(--tinta-suave)}
.conta ul{list-style:none;margin:1.4rem 0 0;padding:0;display:grid;gap:.85rem;align-content:start}
.conta li{display:flex;gap:.75rem;align-items:flex-start;font-size:.95rem;line-height:1.55;color:var(--breu)}
.conta li svg{width:1.05rem;height:1.05rem;flex:none;margin-top:.3rem;color:var(--chama)}
/* o rodape de cada conta desce ate a base: as listas tem tamanhos
   diferentes e os dois fios precisam terminar juntos */
.conta__pe{
  margin:1.5rem 0 0;margin-top:auto;padding-top:1.2rem;border-top:1px solid var(--creme-linha);
  font-size:.88rem;line-height:1.62;color:var(--tinta-suave);
}
.conta__pe b{color:var(--breu);font-weight:600}
.orcamento__nota{
  grid-column:1/-1;margin:.5rem 0 0;font-size:.93rem;color:var(--tinta-suave);
  max-width:68ch;line-height:1.72;
}
.orcamento__nota b{color:var(--breu);font-weight:600}

/* ---------- dúvidas: as objeções ditas com as palavras dele -------------
   Acordeão em <details>/<summary>: nativo, acessível por teclado e não
   depende de JS. O `name` no <details> faz uma fechar a outra.
   ---------------------------------------------------------------------- */

.duvidas{margin-top:clamp(2.5rem,6vw,4rem);border-top:1px solid var(--breu-linha)}
.duvida{border-bottom:1px solid var(--breu-linha)}

.duvida__fala{
  display:flex;align-items:flex-start;justify-content:space-between;gap:1.5rem;
  padding:clamp(1.35rem,2.8vw,1.9rem) 0;cursor:pointer;
  transition:color .22s;color:var(--creme);
  /* some o triangulinho padrão em todos os navegadores */
  list-style:none;
}
.duvida__fala::-webkit-details-marker{display:none}
.duvida__fala::marker{content:""}
.duvida__fala:hover{color:var(--chama-clara)}
.duvida__fala h3{
  margin:0;flex:1;font-family:var(--display);font-weight:300;
  font-size:clamp(1.22rem,2.3vw,1.72rem);line-height:1.2;letter-spacing:-.022em;
  color:inherit;text-wrap:balance;
}
/* o "+" que gira 45° e vira "×" quando abre */
.duvida__fala::after{
  content:"+";flex:none;
  font-family:var(--display);font-weight:300;font-size:1.6rem;line-height:1;
  color:var(--chama);margin-top:.2rem;
  transition:transform .3s var(--curva);
}
.duvida[open] .duvida__fala::after{transform:rotate(45deg)}
.duvida[open] .duvida__fala{color:var(--chama-clara)}

.duvida__resposta-bloco{padding:0 0 clamp(1.4rem,3vw,2.1rem);max-width:70ch}
.duvida__resposta{margin:0;color:var(--bruma);font-size:1rem;line-height:1.74}
.duvida__resposta + .duvida__resposta{margin-top:.95rem}
.duvida__resposta b{color:var(--creme);font-weight:600}

/* <details> não anima altura; o que dá para animar de graça é a entrada
   do conteúdo, e isso já basta para a abertura não parecer um corte */
@media (prefers-reduced-motion:no-preference){
  .duvida[open] .duvida__resposta-bloco{animation:abreDuvida .32s var(--curva)}
  @keyframes abreDuvida{
    from{opacity:0;transform:translateY(-6px)}
    to  {opacity:1;transform:none}
  }
}

/* ---------- corte: o filtro assumido ------------------------------------ */

.corte{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,3.5rem);
  margin-top:clamp(2.5rem,6vw,4rem);
}
.corte .lista li{font-size:.99rem}

/* ---------- prévia: o formulário de quatro campos ----------------------- */

/* No desktop: texto em cima da lista na coluna da esquerda, formulário
   ocupando a direita inteira. No celular a grade vira uma coluna e a ordem
   do HTML manda — texto, formulário, lista —, que é o que tira os campos
   de baixo de 800px de leitura. */
.previa{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);
  align-items:start;
}
.previa__texto{grid-column:1;grid-row:1}
.previa__caixa{grid-column:2;grid-row:1 / span 2}
.previa__lembrete{grid-column:1;grid-row:2}
.previa__texto .titulo{max-width:15ch}
.previa__texto .prosa{margin-top:1.6rem}
.previa__lembrete{
  margin:0;padding:1.5rem 0 0;border-top:1px solid var(--breu-linha);
  display:grid;gap:.8rem;list-style:none;
}
.previa__lembrete li{display:flex;gap:.75rem;align-items:flex-start;font-size:.95rem;color:var(--bruma);line-height:1.55}
.previa__lembrete svg{width:1.05rem;height:1.05rem;flex:none;margin-top:.28rem;color:var(--chama)}
.previa__lembrete b{color:var(--creme);font-weight:600}

.form{
  scroll-margin-top:1.4rem;   /* alvo da barra fixa: não encosta no topo */
  background:var(--breu-carta);border:1px solid var(--breu-linha-forte);
  border-radius:1.1rem;padding:clamp(1.6rem,3.2vw,2.4rem);
  display:grid;gap:1.35rem;
}
/* `hidden` sozinho nao vence `display:grid`: sem isto o formulario
   continuava na tela ao lado da confirmacao */
.form[hidden]{display:none}
.campo{display:grid;gap:.5rem}
.campo label{
  font-family:var(--display);font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--neblina);font-weight:500;
}
.campo input{
  font-family:var(--texto);font-size:1.05rem;color:var(--creme);
  background:transparent;border:0;border-bottom:1px solid var(--breu-linha-forte);
  padding:.7rem 0;width:100%;border-radius:0;transition:border-color .2s;
}
.campo input::placeholder{color:#63737F}
.campo input:focus{outline:0;border-bottom-color:var(--chama)}
.campo--destaque label{color:var(--chama-clara)}
.campo--destaque input{font-size:1.15rem}
.campo__dica{font-size:.8rem;color:var(--neblina);line-height:1.5}
.form .botao{width:100%;margin-top:.4rem}
.form__pe{margin:0;font-size:.82rem;color:var(--neblina);line-height:1.55;text-align:center}
.form__erro{
  margin:0;font-size:.88rem;color:#FFE2CE;background:rgba(169,74,5,.4);
  border:1px solid rgba(240,138,52,.55);border-radius:.5rem;padding:.7rem .9rem;
}
.form__erro[hidden]{display:none}

/* o recado depois do envio */
.enviado{
  background:var(--breu-carta);border:1px solid rgba(209,100,13,.5);
  border-radius:1.1rem;padding:clamp(1.8rem,3.5vw,2.6rem);text-align:center;
}
.enviado h3{font-size:clamp(1.45rem,3vw,1.95rem);font-weight:400;margin-bottom:.9rem;letter-spacing:-.02em}
.enviado p{margin:0 auto 1.5rem;color:var(--bruma);max-width:38ch;font-size:.99rem}
.enviado[hidden]{display:none}

/* ==========================================================================
   Responsivo
   ========================================================================== */

@media (max-width:62em){
  .oferta{grid-template-columns:1fr;gap:2.5rem}
  .oferta h1{max-width:none}
  .obras__grade{grid-template-columns:1fr}
  .falas{grid-template-columns:1fr}
  .ganhos{grid-template-columns:1fr 1fr}
  .previa{grid-template-columns:1fr;gap:2.5rem}
  .previa__texto,.previa__caixa,.previa__lembrete{grid-column:auto;grid-row:auto}
}

@media (max-width:46em){
  .orcamento,.corte,.ganhos{grid-template-columns:1fr}
  .ganhos{border-radius:.9rem}
  .oferta__acoes .botao{flex:1 1 100%}
  .ficha__linhas li{flex-wrap:wrap;gap:.2rem 1rem}
  .holofote{padding-left:1.2rem}
}