/* ==========================================================================
   persa. — componentes e seções
   Depende de base.css. Nenhuma cor cromática entra aqui.
   ========================================================================== */

/* ==========================================================================
   1. CABEÇALHO
   ========================================================================== */
.topo{
  position:fixed;
  inset:0 0 auto 0;
  z-index:100;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--gutter);
  padding:1.25rem var(--gutter);
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),padding var(--dur) var(--ease);
  border-bottom:1px solid transparent;
  mix-blend-mode:normal;
}
/* sobre o hero o cabeçalho é transparente. ao rolar ganha fundo sólido */
.topo.rolado{
  background:var(--preto);
  border-bottom-color:var(--linha);
  padding-block:.9rem;
}
/* páginas internas já começam com fundo, porque não têm hero de vídeo */
.topo.fixo{background:var(--preto);border-bottom-color:var(--linha)}

.marca{display:flex;align-items:center;gap:.75rem;flex-shrink:0}
.marca img{width:clamp(72px,7vw,104px);height:auto}
.marca-texto{
  font-size:var(--t-xs);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--cinza-texto);
  line-height:1.3;
  max-width:9ch;
}
@media (max-width:900px){.marca-texto{display:none}}

.menu{display:flex;align-items:center;gap:clamp(1rem,2.4vw,2.25rem)}
.menu a{
  font-size:var(--t-sm);
  font-weight:500;
  letter-spacing:.01em;
  padding-block:.35em;
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0% 1px;
  background-position:0 100%;
  background-repeat:no-repeat;
  transition:background-size var(--dur) var(--ease),opacity var(--dur) var(--ease);
}
.menu a:hover,.menu a:focus-visible{background-size:100% 1px}
.menu a.ativo{background-size:100% 1px}

.hamburguer{
  display:none;
  width:44px;height:44px;
  flex-direction:column;
  justify-content:center;
  align-items:flex-end;
  gap:6px;
  margin-right:-10px;
}
.hamburguer span{
  display:block;height:1px;background:currentColor;
  transition:transform var(--dur) var(--ease),opacity var(--dur) var(--ease),width var(--dur) var(--ease);
}
.hamburguer span:nth-child(1){width:26px}
.hamburguer span:nth-child(2){width:18px}
.hamburguer span:nth-child(3){width:26px}
.hamburguer[aria-expanded="true"] span:nth-child(1){width:26px;transform:translateY(7px) rotate(45deg)}
.hamburguer[aria-expanded="true"] span:nth-child(2){opacity:0}
.hamburguer[aria-expanded="true"] span:nth-child(3){width:26px;transform:translateY(-7px) rotate(-45deg)}

@media (max-width:860px){
  .hamburguer{display:flex}
  .menu{
    position:fixed;
    inset:0;
    background:var(--preto);
    flex-direction:column;
    justify-content:center;
    align-items:flex-start;
    gap:.5rem;
    padding:6rem var(--gutter) var(--gutter);
    transform:translateX(100%);
    transition:transform .55s var(--ease);
    overflow-y:auto;
  }
  .menu.aberto{transform:none}
  .menu a{font-size:var(--t-lg);text-transform:lowercase;letter-spacing:-.03em;font-weight:600;padding-block:.25em}
}

/* ==========================================================================
   2. HERO
   ========================================================================== */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  background:var(--preto);
}
.hero-midia{position:absolute;inset:0;z-index:0}
.hero-midia img,.hero-midia video{
  width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.12) brightness(.72);
}
/* véu para garantir contraste do texto sobre qualquer quadro do vídeo */
.hero-midia::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.15) 35%,rgba(0,0,0,.85) 100%);
}
.hero-conteudo{
  position:relative;z-index:1;width:100%;
  padding-block:calc(var(--gutter) * 1.6);
  display:flex;flex-direction:column;gap:1.75rem;
}
.hero-marca{
  font-size:var(--t-mega);
  font-weight:600;
  letter-spacing:-.045em;
  line-height:.88;
  text-transform:lowercase;
}
.hero-sub{
  font-size:var(--t-xs);
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--branco);
  opacity:.75;
}
.hero-frase{
  font-size:var(--t-lg);
  font-weight:400;
  letter-spacing:-.02em;
  max-width:22ch;
  line-height:1.15;
}
.hero-acoes{display:flex;flex-wrap:wrap;gap:1rem;margin-top:.5rem}

/* indicador de rolagem */
.hero-rolar{
  position:absolute;right:var(--gutter);bottom:calc(var(--gutter) * 1.6);z-index:1;
  display:flex;align-items:center;gap:.75rem;
  font-size:var(--t-xs);letter-spacing:.18em;text-transform:uppercase;color:var(--branco);
  opacity:.6;
}
.hero-rolar::after{
  content:'';width:1px;height:56px;background:currentColor;
  transform-origin:top;animation:rolar 2.4s var(--ease) infinite;
}
@keyframes rolar{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(0);transform-origin:bottom}}
@media (max-width:860px){.hero-rolar{display:none}}

/* ==========================================================================
   3. TERRITÓRIOS
   ========================================================================== */
.territorios{border-top:1px solid var(--linha)}
.territorio{
  display:flex;flex-direction:column;gap:1rem;
  padding:calc(var(--gutter) * .9) 0;
  border-bottom:1px solid var(--linha);
  position:relative;
}
@media (min-width:641px){
  .territorios .grade{gap:0}
  .territorio{
    padding:calc(var(--gutter) * 1.1) calc(var(--gutter) * .8);
    border-right:1px solid var(--linha);
    border-bottom:none;
    min-height:clamp(240px,26vw,340px);
  }
  .territorio:first-child{padding-left:0}
  .territorio:last-child{border-right:none;padding-right:0}
}
.territorio-verbo{
  font-size:var(--t-lg);
  font-weight:600;
  letter-spacing:-.035em;
  text-transform:lowercase;
}
.territorio-nome{
  font-size:var(--t-xs);
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--cinza-texto);
}
.territorio p{color:var(--cinza-texto);font-size:var(--t-sm);margin-top:auto}

/* ==========================================================================
   4. MANIFESTO
   ========================================================================== */
.manifesto p{
  font-size:var(--t-xl);
  font-weight:500;
  letter-spacing:-.035em;
  line-height:1.1;
  text-transform:lowercase;
  max-width:20ch;
}
.manifesto p span{color:var(--cinza-texto)}

/* ==========================================================================
   5. CARTÃO DE PROJETO
   ========================================================================== */
.projeto-cartao{display:flex;flex-direction:column;gap:1.1rem}
.projeto-cartao .figura{border:1px solid var(--linha)}
.projeto-cartao h3{font-size:var(--t-md);font-weight:600}
.projeto-cartao .linha-fina{font-size:var(--t-sm)}
.projeto-meta{
  display:flex;flex-wrap:wrap;gap:.5rem;
  font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--cinza-texto);
}
.projeto-meta span::after{content:'  /';margin-left:.5rem;opacity:.5}
.projeto-meta span:last-child::after{content:''}

/* estado vazio quando o filtro não devolve nada */
.vazio{
  border:1px dashed var(--linha-forte);
  padding:calc(var(--gutter) * .9);
  text-align:center;
  color:var(--cinza-texto);
  grid-column:1/-1;
}

/* ==========================================================================
   6. FILTRO DE CATEGORIAS
   ========================================================================== */
.filtros{
  display:flex;flex-wrap:wrap;gap:.5rem;
  padding-block:1.5rem;
  border-block:1px solid var(--linha);
  margin-bottom:calc(var(--gutter) * 1.2);
}
.filtro{
  padding:.6em 1.2em;
  font-size:var(--t-sm);
  font-weight:500;
  text-transform:lowercase;
  border:1px solid var(--linha-forte);
  color:var(--cinza-texto);
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.filtro:hover{color:var(--branco);border-color:currentColor}
.inv .filtro:hover{color:var(--preto)}
.filtro[aria-pressed="true"]{background:var(--branco);color:var(--preto);border-color:var(--branco)}
.inv .filtro[aria-pressed="true"]{background:var(--preto);color:var(--branco);border-color:var(--preto)}
.filtro-contagem{
  margin-left:auto;align-self:center;
  font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--cinza-texto);
}

/* ==========================================================================
   7. CASE PRINCIPAL E SEQUÊNCIA ANTES, PROCESSO, DEPOIS
   ========================================================================== */
.case{border-top:1px solid var(--linha)}
.case-titulo{font-size:var(--t-xl);margin-bottom:.75rem}

.sequencia{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--linha);border:1px solid var(--linha)}
@media (max-width:768px){.sequencia{grid-template-columns:1fr}}
.sequencia-passo{background:var(--preto);padding:0;display:flex;flex-direction:column}
.inv .sequencia-passo{background:var(--branco)}
.sequencia-passo .figura{aspect-ratio:4/3}
.sequencia-passo-texto{padding:1.25rem;display:flex;flex-direction:column;gap:.5rem}
.sequencia-passo-texto strong{
  font-size:var(--t-xs);letter-spacing:.2em;text-transform:uppercase;font-weight:500;
}

/* ==========================================================================
   8. SLIDER ANTES E DEPOIS
   Lógica portada de casamodelo/assets/js/app.js
   ========================================================================== */
.comparador{
  position:relative;
  aspect-ratio:3/2;
  overflow:hidden;
  border:1px solid var(--linha);
  cursor:ew-resize;
  user-select:none;
  touch-action:none;          /* o arraste horizontal é nosso, não do scroll */
  background:var(--preto);
}
.comparador img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  filter:grayscale(1) contrast(1.05);
  pointer-events:none;
}
/* a camada "depois" é recortada pela largura, revelando a de baixo */
.comparador-depois{
  clip-path:inset(0 0 0 0);
  width:100%;
}
.comparador-alca{
  position:absolute;top:0;bottom:0;left:50%;
  width:1px;background:var(--branco);
  transform:translateX(-.5px);
  pointer-events:none;
}
.comparador-alca::before{
  content:'';
  position:absolute;top:50%;left:50%;
  width:48px;height:48px;
  transform:translate(-50%,-50%);
  border:1px solid var(--branco);
  background:rgba(0,0,0,.35);
  backdrop-filter:blur(2px);
}
.comparador-alca::after{
  content:'\003C\00A0\00A0\003E';
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  font-size:var(--t-xs);
  color:var(--branco);
  letter-spacing:.05em;
}
.comparador-rotulo{
  position:absolute;bottom:1rem;z-index:2;
  font-size:var(--t-xs);letter-spacing:.2em;text-transform:uppercase;
  color:var(--branco);
  background:rgba(0,0,0,.65);
  padding:.4em .8em;
  pointer-events:none;
}
.comparador-rotulo.esq{left:1rem}
.comparador-rotulo.dir{right:1rem}

/* ==========================================================================
   9. ETAPAS NUMERADAS DO PROJETO
   ========================================================================== */
.etapa{
  display:grid;
  grid-template-columns:6rem 1fr;
  gap:var(--gutter);
  padding-block:calc(var(--gutter) * .85);
  border-top:1px solid var(--linha);
  align-items:start;
}
.etapa:last-child{border-bottom:1px solid var(--linha)}
@media (max-width:768px){
  .etapa{grid-template-columns:1fr;gap:1rem}
}
.etapa-n{
  font-size:var(--t-lg);
  font-weight:600;
  letter-spacing:-.03em;
  color:var(--cinza-texto);
  line-height:1;
}
.etapa-corpo{display:flex;flex-direction:column;gap:.9rem}
.etapa-corpo h3{font-size:var(--t-md)}

/* ==========================================================================
   10. DIÁRIO
   ========================================================================== */
.diario-entrada{
  display:grid;
  grid-template-columns:minmax(9rem,12rem) 1fr;
  gap:var(--gutter);
  padding-block:calc(var(--gutter) * .8);
  border-top:1px solid var(--linha);
  align-items:start;
}
@media (max-width:768px){
  .diario-entrada{grid-template-columns:1fr;gap:1rem}
}
.diario-carimbo{display:flex;flex-direction:column;gap:.35rem}
.diario-dia{font-size:var(--t-lg);font-weight:600;letter-spacing:-.03em;line-height:1}
.diario-data,.diario-projeto{
  font-size:var(--t-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--cinza-texto);
}
.diario-corpo{display:flex;flex-direction:column;gap:1rem}
.diario-corpo h3{font-size:var(--t-md)}
.diario-midia{display:grid;gap:1px;background:var(--linha);border:1px solid var(--linha)}
.diario-midia.m2{grid-template-columns:repeat(2,1fr)}
.diario-midia.m3{grid-template-columns:repeat(3,1fr)}
@media (max-width:640px){.diario-midia.m2,.diario-midia.m3{grid-template-columns:1fr}}
.diario-midia .figura{aspect-ratio:4/3}

/* ==========================================================================
   11. FAIXA HORIZONTAL DE ACERVO
   ========================================================================== */
.faixa{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:clamp(240px,30vw,400px);
  gap:1px;
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  background:var(--linha);
  border-block:1px solid var(--linha);
  scrollbar-width:thin;
}
.faixa .figura{scroll-snap-align:start;aspect-ratio:3/4;background:var(--preto)}
.faixa-dica{
  font-size:var(--t-xs);letter-spacing:.16em;text-transform:uppercase;
  color:var(--cinza-texto);margin-top:1rem;
}

/* ==========================================================================
   12. FORMULÁRIOS
   ========================================================================== */
.form{display:flex;flex-direction:column;gap:1.5rem;max-width:46rem}
.form-linha{display:grid;gap:1.5rem}
@media (min-width:641px){.form-linha.dupla{grid-template-columns:1fr 1fr}}
.campo{display:flex;flex-direction:column;gap:.5rem}
.campo label{
  font-size:var(--t-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--cinza-texto);
}
.campo input,.campo textarea,.campo select{
  width:100%;
  padding:.9rem 0;
  border-bottom:1px solid var(--linha-forte);
  color:inherit;
  font-size:var(--t-base);
  transition:border-color var(--dur) var(--ease);
}
.campo select{padding-right:1.5rem;cursor:pointer}
/* o select nativo herda o fundo do sistema, então forçamos as opções */
.campo select option{background:var(--preto);color:var(--branco)}
.inv .campo select option{background:var(--branco);color:var(--preto)}
.campo textarea{resize:vertical;min-height:7rem}
.campo input:focus,.campo textarea:focus,.campo select:focus{outline:none;border-bottom-color:currentColor}
.campo input::placeholder,.campo textarea::placeholder{color:var(--cinza-texto);opacity:1}
.campo.erro input,.campo.erro textarea,.campo.erro select{border-bottom-color:currentColor}
.campo-erro{font-size:var(--t-xs);color:var(--branco);letter-spacing:.02em}
.inv .campo-erro{color:var(--preto)}
.campo-erro:empty{display:none}

.btn-enviar{position:relative;align-self:flex-start}
.btn-enviar[disabled]{opacity:.5;cursor:progress}
.btn-enviar .girando{
  width:12px;height:12px;
  border:1px solid currentColor;
  border-top-color:transparent;
  border-radius:50%;              /* exceção deliberada: é um indicador de carga, não um card */
  animation:girar .7s linear infinite;
  display:none;
}
.btn-enviar.carregando .girando{display:block}
@keyframes girar{to{transform:rotate(360deg)}}

.retorno{
  border:1px solid var(--linha-forte);
  padding:calc(var(--gutter) * .7);
  display:flex;flex-direction:column;gap:1rem;
}
.retorno[hidden]{display:none}
.retorno h3{font-size:var(--t-md)}

.aviso-form{
  font-size:var(--t-xs);
  color:var(--cinza-texto);
  max-width:var(--leitura);
}

/* ==========================================================================
   13. ACESSO EXCLUSIVO
   ========================================================================== */
.exclusivo{border:1px solid var(--linha-forte);padding:calc(var(--gutter) * .9)}
.exclusivo h2{margin-bottom:1rem}

/* ==========================================================================
   14. RODAPÉ
   ========================================================================== */
.rodape{border-top:1px solid var(--linha);padding-block:calc(var(--secao) * .5)}
.rodape-grade{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:var(--gutter);
  align-items:start;
}
@media (max-width:1024px){.rodape-grade{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.rodape-grade{grid-template-columns:1fr}}
.rodape h4{
  font-size:var(--t-xs);letter-spacing:.18em;text-transform:uppercase;
  color:var(--cinza-texto);font-weight:500;margin-bottom:1.1rem;
}
.rodape li+li{margin-top:.6rem}
.rodape li a{font-size:var(--t-sm)}
.rodape li a:hover{text-decoration:underline;text-underline-offset:.25em}
.rodape-marca img{width:120px;margin-bottom:1rem}
.rodape-base{
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;
  margin-top:calc(var(--gutter) * 1.2);
  padding-top:1.5rem;
  border-top:1px solid var(--linha);
  font-size:var(--t-xs);
  color:var(--cinza-texto);
  letter-spacing:.02em;
}

/* ==========================================================================
   15. MODAL
   ========================================================================== */
.modal{
  position:fixed;inset:0;z-index:200;
  display:none;align-items:center;justify-content:center;
  padding:var(--gutter);
}
.modal.ativa{display:flex}
.modal-fundo{position:absolute;inset:0;background:rgba(0,0,0,.85)}
.modal-caixa{
  position:relative;
  background:var(--preto);
  border:1px solid var(--linha-forte);
  max-width:44rem;width:100%;
  max-height:82vh;overflow-y:auto;
  padding:calc(var(--gutter) * .9);
}
.modal-caixa h2{margin-bottom:1.25rem}
.modal-caixa p+p{margin-top:1em}
.modal-fechar{
  position:absolute;top:1rem;right:1rem;
  width:40px;height:40px;
  border:1px solid var(--linha-forte);
  font-size:1.1rem;line-height:1;
}
.modal-fechar:hover{background:var(--branco);color:var(--preto)}

/* ==========================================================================
   16. CABEÇALHO DE PÁGINA INTERNA
   ========================================================================== */
.pagina-topo{
  padding-top:calc(var(--secao) * .85 + 4rem);
  padding-bottom:calc(var(--secao) * .5);
  border-bottom:1px solid var(--linha);
}
.pagina-topo h1{font-size:var(--t-mega);line-height:.9;margin-block:.75rem}
.migalha{
  font-size:var(--t-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--cinza-texto);
  display:flex;gap:.6rem;flex-wrap:wrap;
}
.migalha a:hover{color:var(--branco);text-decoration:underline;text-underline-offset:.25em}
.inv .migalha a:hover{color:var(--preto)}

/* impressão: o site vira documento em preto sobre branco */
@media print{
  .topo,.hero-rolar,.hamburguer,.filtros,.modal{display:none !important}
  body{background:#fff;color:#000}
  .figura img{filter:grayscale(1)}
}