/* ==========================================================================
   Uman — seções de landing page
   Biblioteca de seções compartilhada entre as LPs de nicho. Depende de
   core.css. O ajuste fino de cada nicho fica no nicho.css da própria LP.
   ========================================================================== */

/* --------------------------------------------------------------------------
   HERO COM VÍDEO
   -------------------------------------------------------------------------- */
.hero{
  position:relative;
  isolation:isolate;
  display:flex;
  align-items:flex-end;
  min-height:clamp(600px, 86vh, 820px);
  padding:176px 0 48px;
  background:var(--preto);
  color:var(--texto-claro);
  overflow:hidden;
}

.hero__video{
  position:absolute;
  inset:0;
  z-index:-2;
  width:100%;
  height:100%;
  object-fit:cover;
  will-change:transform;
}

/* Película: escura só onde o texto passa (à esquerda e nas bordas), quase
   limpa no terço direito, que é onde o vídeo tem o que mostrar. Os valores
   não são estéticos: foram medidos contra 33 quadros do próprio vídeo, para
   cada linha de texto continuar acima do mínimo de contraste. */
.hero__overlay{
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(90deg, rgba(10,10,10,.90) 0%, rgba(10,10,10,.80) 36%, rgba(10,10,10,.26) 68%, rgba(10,10,10,.03) 100%),
    linear-gradient(180deg, rgba(10,10,10,.62) 0%, rgba(10,10,10,0) 30%, rgba(10,10,10,0) 66%, rgba(10,10,10,.68) 100%);
}

.hero__content{ position:relative; }

.hero__texto{
  max-width:56ch;
  margin:26px 0 0;
  font-size:1rem;
  line-height:1.72;
  color:var(--texto-claro);
}

.hero__acoes{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:28px;
  margin-top:34px;
}

/* Rodapé do hero: rótulos à esquerda, assinatura à direita */
.hero__base{
  display:flex;
  justify-content:center;
  margin-top:46px;
}

.hero__rotulos{
  text-align:center;
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.14em;
  color:var(--texto-claro);
}



/* --------------------------------------------------------------------------
   SEÇÃO — COMO TRABALHAMOS
   -------------------------------------------------------------------------- */
.trabalhamos__grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:34px;
  margin-top:70px;
}
.passo-num{
  display:block;
  font-family:var(--serif);
  font-size:2.15rem;
  color:var(--amber);
  line-height:1;
  margin-bottom:18px;
}
.trabalhamos__item{
  padding-top:24px;
  border-top:1px solid var(--borda-clara);
}
.trabalhamos__item h3{
  font-size:1.14rem;
  line-height:1.3;
  margin-bottom:12px;
}
.trabalhamos__item p{
  margin:0;
  font-size:.95rem;
  line-height:1.62;
  color:rgba(26,26,26,.65);
}


/* --------------------------------------------------------------------------
   HERO — convite de microcompromisso
   -------------------------------------------------------------------------- */
/* "Pesquise seu nome agora". Quem faz confirma o problema sozinho. */
.hero__convite{
  margin:22px 0 0;
  font-family:var(--serif);
  font-size:1.06rem;
  line-height:1.5;
  color:var(--texto-claro);
}

/* --------------------------------------------------------------------------
   TÍTULO SOLTO DE BLOCO
   -------------------------------------------------------------------------- */
.bloco__titulo{ max-width:26ch; }

/* --------------------------------------------------------------------------
   SEÇÃO — O QUE ELA ENCONTRA
   -------------------------------------------------------------------------- */
.cenas{
  display:grid;
  gap:0;
  margin-top:52px;
  max-width:70ch;
}
.cenas li{
  padding:20px 0;
  border-top:1px solid var(--borda-clara);
  font-size:1.08rem;
  line-height:1.55;
  color:rgba(26,26,26,.86);
}

/* --------------------------------------------------------------------------
   SEÇÃO — AS TRÊS FRENTES
   -------------------------------------------------------------------------- */
.frentes{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:44px;
  margin-top:60px;
}
.frente{
  padding-top:26px;
  border-top:2px solid var(--amber);
}
.frente h3{
  font-family:var(--serif);
  font-size:1.38rem;
  line-height:1.25;
  margin-bottom:14px;
}
.frente__serve{
  margin:0 0 12px;
  font-size:1.04rem;
  line-height:1.6;
  color:rgba(26,26,26,.88);
}
.frente__exemplos{
  margin:0;
  font-size:.94rem;
  line-height:1.62;
  color:rgba(26,26,26,.62);
}

/* --------------------------------------------------------------------------
   SEÇÃO — QUEM FAZ
   -------------------------------------------------------------------------- */
.numeros--claro{
  border-top-color:var(--borda-clara);
  border-bottom-color:var(--borda-clara);
}
.numeros--claro .numero__rotulo{ color:rgba(26,26,26,.66); }
.garantias{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:38px;
  margin-top:54px;
}
.garantias li{
  position:relative;
  padding-left:22px;
  font-size:1rem;
  line-height:1.58;
  color:rgba(26,26,26,.84);
}
.garantias li::before{
  content:"–";
  position:absolute;
  left:0;
  color:var(--amber);
}

/* --------------------------------------------------------------------------
   DIAGNÓSTICO — o que a pessoa recebe
   -------------------------------------------------------------------------- */
.entrega{
  display:grid;
  gap:11px;
  margin:26px 0 0;
}
.entrega li{
  position:relative;
  padding-left:22px;
  font-size:.96rem;
  line-height:1.58;
  color:rgba(244,241,236,.84);
}
.entrega li::before{
  content:"–";
  position:absolute;
  left:0;
  color:var(--amber);
}
.diagnostico__risco{
  margin:26px 0 0;
  font-size:.9rem;
  line-height:1.6;
  color:rgba(244,241,236,.62);
  max-width:38ch;
}

/* --------------------------------------------------------------------------
   COMPOSIÇÃO DUPLA — imagem de um lado, texto do outro
   -------------------------------------------------------------------------- */
/* Resolve o vazio à direita das seções de coluna única. */
.dupla{
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1fr);
  gap:72px;
  align-items:center;
}
.dupla__figura{ margin:0; }
.dupla__imagem{
  width:100%;
  height:auto;
  aspect-ratio:4 / 3;
  object-fit:cover;
  border-radius:2px;
}
.dupla .cenas{ max-width:none; }
.dupla .fecho{ margin-top:38px; padding-top:24px; }
.dupla .lead{ max-width:none; }

/* Variante alinhada pelo topo. O padrão centraliza cada coluna na linha,
   o que deixa a imagem flutuando no meio de um vazio quando a coluna de
   texto é bem mais alta. */
.dupla--topo{ align-items:start; }

/* Coluna que empilha a imagem e o que vem sob ela (um fecho, por exemplo),
   ocupando a altura que a imagem sozinha deixava em branco. */
.dupla__pilha{
  display:flex;
  flex-direction:column;
}
.dupla__pilha .fecho{
  margin-top:40px;
  max-width:none;
}

/* Imagem mais alta, para a coluna não terminar num vazio ao lado de um texto
   comprido. Proporção fixa em 1/1 em vez de height:100%: acompanhar a altura
   da coluna vizinha dá recorte imprevisível (em 1024px a foto virava uma
   tira e cortava as pessoas) e zera a imagem quando a dupla empilha. */
@media (min-width:901px){
  .dupla--imagem-alta .dupla__imagem{
    aspect-ratio:1 / 1;
    object-position:50% 40%;
  }
}

/* Variante com o texto antes da imagem, mantendo a mesma proporção */
.dupla--texto-antes{ grid-template-columns:minmax(0,1fr) minmax(0,.85fr); }

/* A imagem sobre fundo escuro pede um contorno mínimo para não flutuar */
.section--escuro .dupla__imagem{ box-shadow:0 0 0 1px var(--borda-escura); }

/* --------------------------------------------------------------------------
   GARANTIAS — quatro compromissos, com título e explicação
   -------------------------------------------------------------------------- */
.garantias{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:36px;
  margin-top:52px;
}
.garantias li{
  padding-top:22px;
  padding-left:0;
  border-top:1px solid var(--borda-clara);
}
.garantias li::before{ content:none; }
.garantias h3{
  font-family:var(--serif);
  font-size:1.16rem;
  line-height:1.3;
  margin-bottom:11px;
}
.garantias p{
  margin:0;
  font-size:.95rem;
  line-height:1.62;
  color:rgba(26,26,26,.68);
}

/* --------------------------------------------------------------------------
   FAQ — parágrafos dentro da resposta
   -------------------------------------------------------------------------- */
.faq__painel-inner p strong{
  font-weight:600;
  color:var(--texto-escuro);
}

/* --------------------------------------------------------------------------
   ENTRADA DOS ELEMENTOS
   -------------------------------------------------------------------------- */
/* O JS marca .revela nos alvos e liga .visivel quando entram na tela.
   Sem JS, ou com reduced-motion, tudo nasce visível. */
.revela{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .68s cubic-bezier(.22,.61,.36,1),
             transform .68s cubic-bezier(.22,.61,.36,1);
  will-change:opacity, transform;
}
.revela.visivel{
  opacity:1;
  transform:none;
}

/* --------------------------------------------------------------------------
   FECHO — declaração que encerra uma seção
   -------------------------------------------------------------------------- */
.fecho{
  margin:60px 0 0;
  padding-top:30px;
  border-top:1px solid var(--borda-clara);
  font-family:var(--serif);
  font-size:clamp(1.2rem, 1.7vw, 1.55rem);
  line-height:1.45;
  max-width:64ch;
}
.fecho--escuro{ border-top-color:var(--borda-escura); }

/* --------------------------------------------------------------------------
   AÇÃO NO FIM DE UMA SEÇÃO
   -------------------------------------------------------------------------- */
.secao__acao{ margin-top:52px; }

/* --------------------------------------------------------------------------
   SEÇÃO — ESCOLHER O FORMATO
   -------------------------------------------------------------------------- */
.formatos{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 72px;
  margin-top:60px;
}
.formato{
  padding:32px 0;
  border-top:1px solid var(--borda-escura);
}
.formato__nome{
  display:block;
  font-family:var(--serif);
  font-size:clamp(1.6rem, 2.2vw, 2.1rem);
  line-height:1.1;
  color:var(--amber);
  margin-bottom:14px;
}
.formato p{
  margin:0;
  font-size:.9rem;
  line-height:1.7;
  color:rgba(244,241,236,.74);
  max-width:46ch;
}

/* --------------------------------------------------------------------------
   SEÇÃO — CONHEÇA A UMAN
   -------------------------------------------------------------------------- */
.numeros{
  display:flex;
  flex-wrap:wrap;
  gap:70px;
  margin:64px 0 0;
  padding:34px 0;
  border-top:1px solid var(--borda-escura);
  border-bottom:1px solid var(--borda-escura);
}
.numero{ display:flex; align-items:baseline; gap:18px; }
.numero__valor{
  font-family:var(--serif);
  font-size:clamp(2.4rem, 3.6vw, 3.4rem);
  line-height:1;
  color:var(--amber);
}
.numero__rotulo{
  font-size:.95rem;
  line-height:1.5;
  color:rgba(244,241,236,.7);
  max-width:24ch;
}

/* Números dentro de uma coluna de texto: valor em cima, rótulo embaixo.
   Lado a lado com o rótulo, em coluna, o rótulo ficava numa tira estreita. */
.numeros--empilhado{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:34px;
  margin-top:48px;
  padding:30px 0;
}
.numeros--empilhado .numero{
  flex-direction:column;
  align-items:flex-start;
  gap:10px;
}
.numeros--empilhado .numero__valor{ font-size:clamp(2.6rem, 3.2vw, 3.2rem); }
.numeros--empilhado .numero__rotulo{ max-width:20ch; }
#uman .compromisso__grid{ margin-top:52px; }
#uman .cabecalho-duplo .lead + .lead{ margin-top:18px; }

/* --------------------------------------------------------------------------
   PILARES — usado em Conheça a Uman
   -------------------------------------------------------------------------- */
.compromisso__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:44px;
  margin-top:66px;
}
.compromisso__item{
  padding-top:24px;
  border-top:1px solid var(--borda-escura);
}
.compromisso__item h3{
  font-family:var(--sans);
  font-size:.94rem;
  font-weight:600;
  line-height:1.4;
  margin-bottom:12px;
}
.compromisso__item p{
  margin:0;
  font-size:.83rem;
  line-height:1.65;
  color:rgba(244,241,236,.7);
}


/* --------------------------------------------------------------------------
   SEÇÃO — PERGUNTAS FREQUENTES (accordion)
   -------------------------------------------------------------------------- */
.faq__grid{
  display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:78px;
  align-items:start;
}
/* Apoio sob o título do FAQ: leva quem não achou a pergunta ao formulário */
.faq__apoio{
  margin:34px 0 0;
  font-size:.98rem;
  line-height:1.72;
  color:rgba(26,26,26,.72);
  max-width:34ch;
}
.faq__acao{ margin-top:24px; }
.section--escuro .faq__apoio{ color:rgba(244,241,236,.72); }

.faq__lista{ border-top:1px solid var(--borda-clara); }
.faq__item{ border-bottom:1px solid var(--borda-clara); }

.faq__botao{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  width:100%;
  padding:22px 4px;
  background:transparent;
  border:0;
  text-align:left;
  font-size:1.04rem;
  line-height:1.45;
  color:var(--texto-escuro);
  cursor:pointer;
  transition:color .2s ease;
}
.faq__botao:hover{ color:var(--amber); }
.faq__sinal{
  position:relative;
  flex:0 0 auto;
  width:13px; height:13px;
  color:rgba(26,26,26,.55);
}
.faq__sinal::before,
.faq__sinal::after{
  content:"";
  position:absolute;
  top:50%; left:50%;
  background:currentColor;
  transform:translate(-50%,-50%);
  transition:opacity .2s ease, transform .2s ease;
}
.faq__sinal::before{ width:13px; height:1.5px; }
.faq__sinal::after{  width:1.5px; height:13px; }
.faq__botao[aria-expanded="true"] .faq__sinal{ color:var(--amber); }
.faq__botao[aria-expanded="true"] .faq__sinal::after{ opacity:0; transform:translate(-50%,-50%) rotate(90deg); }

.faq__painel{
  overflow:hidden;
  height:0;
  transition:height .28s ease;
}
.faq__painel-inner{
  padding:0 4px 24px;
  font-size:.98rem;
  line-height:1.7;
  color:rgba(26,26,26,.7);
  max-width:60ch;
}
.faq__painel-inner p{ margin:0 0 12px; }
.faq__painel-inner p:last-child{ margin-bottom:0; }

/* Placeholder discreto caso uma LP fique com a resposta em aberto */
.faq__painel-inner:empty::before{
  content:"Resposta em breve.";
  color:rgba(26,26,26,.66);
  font-style:italic;
}


/* --------------------------------------------------------------------------
   SEÇÃO — DIAGNÓSTICO DE CORTESIA (formulário)
   -------------------------------------------------------------------------- */
.diagnostico__grid{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,1.25fr) minmax(0,.7fr);
  gap:44px;
  align-items:start;
}
.diagnostico__lateral .dupla__imagem{
  box-shadow:0 0 0 1px var(--borda-escura);
}
.diagnostico__aparte{
  font-family:var(--serif);
  font-size:1.02rem;
  line-height:1.5;
  color:rgba(244,241,236,.8);
  margin:20px 0 0;
}

.form__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.campo{ display:block; }
.campo--largo{ grid-column:1 / -1; }

.campo input,
.campo select{
  width:100%;
  padding:14px 15px;
  font-family:var(--sans);
  font-size:.95rem;
  color:var(--texto-claro);
  background:var(--grafite);
  border:1px solid var(--borda-escura);
  border-radius:var(--radius);
  transition:border-color .2s ease, background-color .2s ease;
  appearance:none;
}
.campo input::placeholder{ color:rgba(244,241,236,.64); }
.campo input:focus,
.campo select:focus{ border-color:var(--amber); outline:none; }
.campo select{
  color:rgba(244,241,236,.64);
  background-image:linear-gradient(45deg,transparent 50%,rgba(244,241,236,.64) 50%),
                   linear-gradient(135deg,rgba(244,241,236,.64) 50%,transparent 50%);
  background-position:calc(100% - 19px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
  padding-right:38px;
}
.campo select.tem-valor{ color:var(--texto-claro); }
.campo select option{ color:var(--texto-escuro); background:var(--branco); }

.campo--check{
  grid-column:1 / -1;
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-top:6px;
  font-size:.88rem;
  line-height:1.5;
  color:rgba(244,241,236,.7);
  cursor:pointer;
}
.campo--check input{
  flex:0 0 auto;
  width:14px; height:14px;
  margin-top:3px;
  accent-color:var(--amber);
  appearance:auto;
  padding:0;
}

.form__acao{ grid-column:1 / -1; margin-top:6px; }
.form__acao .btn{ justify-content:space-between; }

.form__retorno{
  grid-column:1 / -1;
  margin:4px 0 0;
  font-size:.88rem;
  color:var(--amber);
}
.form__retorno--erro{ color:#FF8A80; }

/* Armadilha para robô: fora da tela, fora da ordem de tabulação */
.campo--armadilha{
  position:absolute;
  left:-9999px;
  width:1px; height:1px;
  overflow:hidden;
}


/* Método com 4 etapas em vez de 6 */
.trabalhamos__grid--4{ grid-template-columns:repeat(4,1fr); }

/* Microcopy sob o botão do formulário */
.form__microcopy{
  grid-column:1 / -1;
  margin:14px 0 0;
  font-size:.86rem;
  line-height:1.6;
  color:rgba(244,241,236,.6);
}

/* --------------------------------------------------------------------------
   10b. PALETA ESCURA — sobrescritas de cor
   As seções da biblioteca nasceram em fundo claro. Quando a mesma seção é
   usada em .section--escuro (aqui ou em outra LP de nicho), o texto de apoio
   precisa virar. Sem isto o texto fica preto sobre preto.
   -------------------------------------------------------------------------- */
.section--escuro .cenas li{
  border-top-color:var(--borda-escura);
  color:rgba(244,241,236,.86);
}

.section--escuro .frente__serve{    color:rgba(244,241,236,.86); }
.section--escuro .frente__exemplos{ color:rgba(244,241,236,.64); }

.section--escuro .trabalhamos__item p{ color:rgba(244,241,236,.65); }

.section--escuro .garantias li{ color:rgba(244,241,236,.84); }
.section--escuro .garantias p{  color:rgba(244,241,236,.68); }

.section--escuro .faq__lista{ border-top-color:var(--borda-escura); }
.section--escuro .faq__item{  border-bottom-color:var(--borda-escura); }
.section--escuro .faq__botao{ color:var(--texto-claro); }
.section--escuro .faq__sinal{ color:rgba(244,241,236,.55); }
.section--escuro .faq__painel-inner{ color:rgba(244,241,236,.7); }
.section--escuro .faq__painel-inner:empty::before{ color:rgba(244,241,236,.66); }

/* --------------------------------------------------------------------------
   11. RESPONSIVO (seções)
   -------------------------------------------------------------------------- */
@media (max-width:1180px){
  .cabecalho-duplo,
  .faq__grid{ gap:52px; }
  .diagnostico__grid{
    grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
    gap:48px;
  }
  .diagnostico__aparte{ max-width:38ch; margin-top:26px; }
  .diagnostico__lateral{ grid-column:1; }
}

@media (max-width:900px){

  /* Hero */
  .hero{
    min-height:auto;
    padding:150px 0 44px;
    align-items:flex-start;
  }
  /* No mobile o texto ocupa a tela inteira, entao a película não tem canto
     livre para ceder: dá para clarear pouco. Medido contra 33 quadros do
     hero-light.mp4, sobra 3% acima do mínimo de contraste. */
  .hero__overlay{
    background:linear-gradient(180deg, rgba(10,10,10,.85) 0%, rgba(10,10,10,.58) 48%, rgba(10,10,10,.88) 100%);
  }
  .hero__acoes{ gap:20px; }
  .hero__base{ margin-top:36px; }

  /* Grids em uma coluna */
  .cabecalho-duplo,
  .faq__grid,
  .diagnostico__grid{ grid-template-columns:1fr; }


  .trabalhamos__grid{ grid-template-columns:repeat(2,1fr); margin-top:48px; }
  .compromisso__grid{ grid-template-columns:1fr; gap:30px; }


  .cabecalho-duplo{ align-items:start; }
  .cabecalho-duplo .lead{ margin-top:4px; }

  /* Formulário empilha */
  .form__grid{ grid-template-columns:1fr; }
  .campo{ grid-column:1 / -1; }
  .diagnostico__lateral{ grid-column:auto; }

}

@media (max-width:560px){
  .trabalhamos__grid,
  .hero__rotulos{ font-size:11px; line-height:1.9; }
}

/* --------------------------------------------------------------------------
   12. MOVIMENTO REDUZIDO
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .faq__painel{ transition:none; }
  /* Quem pediu menos movimento recebe a página inteira, parada. */
  .revela{ opacity:1 !important; transform:none !important; transition:none !important; }
}


@media (max-width:900px){
  .numeros{ gap:34px; flex-direction:column; }
  .fecho{ margin-top:44px; }
}

@media (max-width:560px){
}

@media (max-width:1180px){
  .frentes{ grid-template-columns:1fr; gap:0; }
  .frente{ padding:24px 0; }
  .garantias{ grid-template-columns:1fr; gap:14px; }
}

@media (max-width:900px){
  .trabalhamos__grid--4{ grid-template-columns:1fr; gap:0; }
  .numeros{ gap:30px; flex-direction:column; }
  .cenas li{ font-size:1.02rem; }
  .hero__convite{ font-size:.98rem; }
}

@media (max-width:1180px){
  .garantias{ grid-template-columns:repeat(2,1fr); gap:30px 36px; }
}

@media (max-width:900px){
  .dupla,
  .dupla--texto-antes{ grid-template-columns:1fr; gap:38px; }
  .garantias{ grid-template-columns:1fr; gap:0; }
  .garantias li{ padding:20px 0; }
}