/* ============================================================
   AZVEN — camada 4: SEÇÕES
   Só composição. Cor e tamanho continuam vindo dos tokens.
   ============================================================ */

/* ============ HERO ============ */

.hero{
  position:relative;
  min-height:min(100svh,960px);
  display:flex;flex-direction:column;justify-content:center;
  padding-top:clamp(84px,6.6vw,112px);
  padding-bottom:clamp(2rem,1.6rem + 1.6vw,3rem);
  overflow:hidden;
  background:var(--bg);
}

/* camadas de fundo com parallax: velocidades diferentes */
.hero__camada{position:absolute;will-change:transform}

.hero__aura{
  top:-24%;right:-16%;
  width:min(80vw,980px);aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle,var(--accent-aura-1) 0%,var(--accent-aura-2) 42%,transparent 68%);
  pointer-events:none;
}
.hero__malha{
  inset:0;
  background-image:
    linear-gradient(var(--line) 1px,transparent 1px),
    linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:clamp(48px,6vw,88px) clamp(48px,6vw,88px);
  mask-image:radial-gradient(120% 85% at 15% 0%,#000 8%,transparent 70%);
  -webkit-mask-image:radial-gradient(120% 85% at 15% 0%,#000 8%,transparent 70%);
  pointer-events:none;
}

.hero .wrap{position:relative;z-index:2;width:100%}

/* texto à esquerda, palco de telas à direita */
.hero__grade{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.94fr);
  gap:clamp(2rem,1.2rem + 3.4vw,5.5rem);
  align-items:center;
}

.hero__topo{
  display:flex;flex-wrap:wrap;align-items:center;gap:.75em 1.15em;
  font-family:var(--f-mono);font-size:var(--t-xs);
  letter-spacing:var(--tr-wide);text-transform:uppercase;
  color:var(--fg-faint);
  margin-bottom:clamp(1rem,.7rem + 1vw,1.8rem);
}
.hero__topo i{
  width:6px;height:6px;border-radius:50%;
  background:var(--accent-pure);flex:none;
  box-shadow:0 0 0 4px var(--accent-wash);
}
.hero__topo span{white-space:nowrap}
.hero__topo em{font-style:normal;color:var(--line-strong)}

.hero h1{max-width:14ch;font-size:var(--t-hero)}

.hero__sub{
  margin-top:clamp(1rem,.8rem + .9vw,1.5rem);
  font-size:var(--t-lg);color:var(--fg-muted);
  line-height:1.56;max-width:48ch;
}

.hero__acoes{
  display:flex;flex-wrap:wrap;gap:.8rem;
  margin-top:clamp(1.4rem,1rem + 1.4vw,2.2rem);
}

/* ---- palco: três telas reais em perspectiva, cada uma numa profundidade.
   O JS só escreve --px/--py (parallax) e --rx/--ry (inclinação); a
   composição inteira vive aqui, em porcentagem do palco, e escala junto. */
.hero__palco{
  position:relative;
  /* avança um pouco sobre a margem direita; o .hero corta o excesso */
  width:112%;
  aspect-ratio:1/.90;
  perspective:1600px;
}
.hero__cena{
  position:absolute;inset:0;
  transform-style:preserve-3d;
  transform:rotateY(var(--ry,0deg)) rotateX(var(--rx,0deg));
  will-change:transform;
}
.hero__peca{position:absolute}
.hero__peca > *{
  transform:translate3d(var(--px,0px),var(--py,0px),0) rotate(var(--rot,0deg));
  will-change:transform;
}
.hero__peca .navegador,
.hero__peca .foto{box-shadow:var(--sombra-3)}

/* A foto manda (z-index 3). Os dois mockups nascem ATRAS da borda direita
   dela, empilhados: a Ana Paula mais funda (z 1), a ProArqui na frente
   dela (z 2). O recorte da foto sobre os dois e o que da profundidade. */
.hero__peca--a{left:0;  top:2%; width:60%;z-index:3;--rot:-1.5deg}
.hero__peca--c{left:52%;top:3%; width:42%;z-index:1;--rot:-2.4deg}
.hero__peca--b{left:56%;top:42%;width:44%;z-index:2;--rot:2.2deg}
.hero__peca--d{left:60%;top:80%;         z-index:4;--rot:1.5deg}
.hero__peca--e{left:4%; top:88%;         z-index:4;--rot:-1.5deg}

/* entrada das peças: sobem mais que um .rev comum, e em cascata */
.anim .hero__peca.rev{transform:translateY(56px)}
.anim .hero__peca.rev.vis{transform:none}

.hero__pe{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:var(--gap-sm);
  margin-top:clamp(1.4rem,1rem + 1.8vw,2.4rem);
  padding-top:clamp(.8rem,.7rem + .7vw,1.2rem);
  border-top:1px solid var(--line);
}
.hero__pe div{display:grid;gap:.25em}
.hero__pe b{
  font-family:var(--f-display);font-size:var(--t-md);
  font-weight:600;letter-spacing:-.015em;
}
.hero__pe span{
  font-family:var(--f-mono);font-size:var(--t-xs);
  letter-spacing:.06em;color:var(--fg-faint);
}

@media(max-width:980px){
  .hero{min-height:0;justify-content:flex-start}
  .hero__grade{grid-template-columns:1fr;gap:clamp(2.4rem,1.6rem + 3vw,4rem)}
  .hero h1{max-width:16ch}
  /* display:contents dissolve os containers e joga as peças direto no
     grid, para eu poder intercalar foto e texto por `order` */
  .hero__texto,
  .hero__palco,
  .hero__cena{display:contents}
  .hero__grade{gap:0}
  .hero__peca{position:static}
  .hero__peca > *{transform:none}
  .hero__cena{transform:none}

  .hero__topo   {order:1}
  .hero__peca--a{order:2}
  .hero h1      {order:3}
  .hero__sub    {order:4}
  .hero__acoes  {order:5}
  .hero__peca--b{order:6}
  .hero__peca--c{order:7}
  .hero__peca--d{order:8}
  .hero__peca--e{order:9}

  /* sangra até a borda usando o próprio gutter do .wrap — nada de 100vw,
     que soma a barra de rolagem e devolve scroll horizontal */
  .hero__peca--a{
    width:calc(100% + var(--gutter) * 2);
    margin-inline:calc(var(--gutter) * -1);
    margin-block:1.1rem 1.4rem;
  }
  .hero__peca--a .foto{border-radius:0}
  .hero__peca--a .foto img{aspect-ratio:16/9;object-position:50% 27%}

  .hero__peca--b,
  .hero__peca--c{margin-top:clamp(1.6rem,1.2rem + 2vw,2.4rem)}
  .hero__peca--d,
  .hero__peca--e{margin-top:.9rem}
}
@media(max-width:700px){
  /* o cabeçalho mede 65px; 80 deixa 15 de folga e devolve 16px ao CTA */
  .hero{padding-top:80px}
}

/* ============ DIAGNÓSTICO ============ */

.diag{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));
  gap:0;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
  background:var(--bg-raised);
}
.diag > div{
  padding:clamp(1.6rem,1.2rem + 1.6vw,2.6rem);
  border-right:1px solid var(--line);
  display:grid;align-content:start;gap:.7em;
}
.diag > div:last-child{border-right:0}
.diag__n{
  font-family:var(--f-mono);font-size:var(--t-xs);
  letter-spacing:var(--tr-wide);color:var(--accent);
}
.diag h3{max-width:20ch}
.diag p{color:var(--fg-muted);font-size:var(--t-sm);max-width:40ch}
.diag__flecha{
  margin-top:.4em;
  font-family:var(--f-mono);font-size:var(--t-xs);
  letter-spacing:.05em;color:var(--fg-faint);
  display:flex;align-items:center;gap:.5em;
}
.diag__flecha b{color:var(--fg);font-weight:500}

@media(max-width:900px){
  .diag > div{border-right:0;border-bottom:1px solid var(--line)}
  .diag > div:last-child{border-bottom:0}
}

/* ============ SERVIÇOS ============ */

.grade-serv{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,282px),1fr));
  gap:var(--gap-sm);
  align-items:stretch;
}

/* ============ TRABALHOS ============ */

.mosaico{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  grid-auto-rows:minmax(0,auto);
  gap:var(--gap-sm);
  margin-bottom:var(--gap);
}
/* Conta-se a UNIDADE da grade, não o item: 3+3 / 2+2+2 */
.mosaico .peca:nth-child(1),
.mosaico .peca:nth-child(2){grid-column:span 3}
.mosaico .peca:nth-child(3),
.mosaico .peca:nth-child(4),
.mosaico .peca:nth-child(5){grid-column:span 2}
.mosaico .peca:nth-child(6){grid-column:span 6;min-height:clamp(150px,14vw,190px)}

@media(max-width:820px){
  .mosaico{grid-template-columns:repeat(2,1fr)}
  .mosaico .peca:nth-child(n){grid-column:span 1}
  .mosaico .peca:nth-child(6){grid-column:span 2;min-height:clamp(190px,20vw,268px)}
}
@media(max-width:520px){
  .mosaico{grid-template-columns:1fr}
  .mosaico .peca:nth-child(6){grid-column:span 1}
}

/* ============ PROCESSO ============ */

.proc-grade{
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:var(--gap-lg);align-items:start;
}
@media(max-width:900px){.proc-grade{grid-template-columns:1fr}}

/* ============ SOBRE ============ */

.sobre-grade{
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:var(--gap-lg);align-items:center;
}
.sobre-grade p{color:var(--fg-muted);max-width:54ch}
.sobre-grade h2 + p{margin-top:clamp(1.1rem,.9rem + .9vw,1.7rem)}
.sobre-grade p + p{margin-top:1.05em}

.assina{
  display:grid;gap:.2em;
  margin-top:clamp(1.6rem,1.2rem + 1.4vw,2.4rem);
  padding-top:clamp(1.1rem,.9rem + .9vw,1.6rem);
  border-top:1px solid var(--line);
}
.assina b{
  font-family:var(--f-display);font-size:var(--t-lg);font-weight:600;
}
.assina span{
  font-family:var(--f-mono);font-size:var(--t-xs);
  letter-spacing:.06em;color:var(--fg-faint);
}

.foto{position:relative;border-radius:var(--r-lg);overflow:hidden}
.foto img{width:100%;aspect-ratio:4/5;object-fit:cover}
.foto figcaption{
  position:absolute;left:0;right:0;bottom:0;
  display:grid;gap:.15em;
  padding:clamp(2.4rem,3vw,3.6rem) clamp(1.1rem,1.4vw,1.6rem) clamp(1rem,1.2vw,1.4rem);
  background:linear-gradient(180deg,transparent,rgba(12,12,14,.86));
  color:var(--ink-000);
}
/* A legenda vive sobre um gradiente escuro, independente do tema da seção.
   Sem forçar a cor aqui, a regra global strong,b{color:var(--fg)} deixa o
   título preto sobre preto em seção clara. */
.foto figcaption b{
  font-family:var(--f-display);font-size:var(--t-md);
  color:var(--ink-000);
}
.foto figcaption span{
  font-family:var(--f-mono);font-size:var(--t-xs);
  letter-spacing:.06em;color:var(--ink-300);
}

@media(max-width:900px){
  .sobre-grade{grid-template-columns:1fr}
  .foto{max-width:440px}
}

/* ============ ATENDIMENTO ============ */

.atend{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));
  gap:var(--gap);
}
.atend > div{
  display:grid;align-content:start;gap:.55em;
  padding-top:1.15rem;border-top:2px solid var(--accent-line);
}
.atend h4{font-size:var(--t-lg)}
.atend p{color:var(--fg-muted);font-size:var(--t-sm)}

/* ============ PERGUNTAS ============ */

.faq-grade{
  display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:var(--gap-lg);align-items:start;
}
@media(max-width:900px){.faq-grade{grid-template-columns:1fr}}

/* ============ CONTATO ============ */

.contato-grade{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:var(--gap-lg);align-items:start;
}
@media(max-width:900px){.contato-grade{grid-template-columns:1fr}}

.zap{
  font-family:var(--f-mono);font-size:var(--t-lg);
  color:var(--accent);letter-spacing:-.01em;
  border-bottom:1px solid var(--accent-line);
  padding-bottom:2px;
  transition:border-color var(--dur-fast) var(--ease-io);
}
.zap:hover{border-bottom-color:var(--accent)}

.contato-cx{
  background:var(--bg-raised);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:clamp(1.5rem,1.1rem + 1.6vw,2.5rem);
}

/* ============ RODAPÉ ============ */

.rodape{
  position:relative;overflow:hidden;
  background:var(--bg);color:var(--fg);
  padding-top:clamp(3.2rem,2.2rem + 3.4vw,5.4rem);
  padding-bottom:0;
}
/* Marca d'água: a assinatura fecha a página, metade dentro, metade fora */
.marcona{
  position:relative;z-index:1;
  font-family:var(--f-display);font-weight:700;
  font-size:var(--t-marca);line-height:.78;letter-spacing:-.045em;
  color:var(--marca-agua);
  text-align:center;white-space:nowrap;
  user-select:none;pointer-events:none;
  margin-top:clamp(1.2rem,.8rem + 1.4vw,2rem);
  margin-bottom:calc(var(--t-marca) * -.30);
}
.rd{
  display:grid;
  grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));
  gap:var(--gap);
  padding-bottom:clamp(2.2rem,1.6rem + 2.4vw,3.6rem);
  border-bottom:1px solid var(--line);
}
@media(max-width:820px){
  .rd{grid-template-columns:1fr 1fr}
  .rd > div:first-child{grid-column:span 2}
}
@media(max-width:480px){
  .rd{grid-template-columns:1fr}
  .rd > div:first-child{grid-column:span 1}
}
.rd-marca{display:flex;align-items:center;gap:10px;margin-bottom:1em}
.rd-marca img{width:26px}
.rd-marca span{
  font-family:var(--f-display);font-weight:700;
  font-size:var(--t-md);letter-spacing:.10em;
}
.rd > div > p{color:var(--fg-muted);font-size:var(--t-sm);max-width:36ch}
.rd h5{
  font-family:var(--f-mono);font-size:var(--t-xs);font-weight:500;
  letter-spacing:var(--tr-wide);text-transform:uppercase;
  color:var(--fg-faint);margin-bottom:1.15em;
}
.rd-col{display:grid;align-content:start;gap:.62em}
.rd-col a,.rd-col p{
  font-size:var(--t-sm);color:var(--fg-muted);
  transition:color var(--dur-fast) var(--ease-io);
}
.rd-col a:hover{color:var(--accent)}

.copy{
  display:flex;flex-wrap:wrap;gap:.6em 1.4em;
  justify-content:space-between;
  padding-top:clamp(1.2rem,1rem + 1vw,1.8rem);
  padding-bottom:clamp(1.2rem,1rem + 1vw,1.8rem);
  font-family:var(--f-mono);font-size:var(--t-xs);
  letter-spacing:.05em;color:var(--fg-faint);
}

/* ============ VARIANTE DE FUNDO ============ */
.secao--suave{background:var(--bg-soft)}
.secao--suave + .secao:not(.is-dark){border-top:0}

/* ============ FECHAMENTO DE SEÇÃO ============ */
.fecha{
  display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:1rem 1.6rem;
  padding-top:clamp(1.1rem,.9rem + .9vw,1.6rem);
  border-top:1px solid var(--line);
}
.fecha p{
  font-size:var(--t-sm);color:var(--fg-muted);max-width:52ch;margin:0;
}

/* ============ NÚMEROS ============ */
.numeros{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,168px),1fr));
  gap:var(--gap-sm);
  margin-bottom:var(--gap-lg);
  padding:clamp(1.4rem,1rem + 1.4vw,2.1rem) 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.numeros > div{display:grid;gap:.15em;align-content:start}
.numeros b{
  display:flex;align-items:baseline;
  font-family:var(--f-display);font-weight:600;
  font-size:clamp(2.4rem,1.7rem + 2.8vw,3.9rem);
  line-height:1;letter-spacing:var(--tr-tight);
  /* tabular evita o número "dançar" enquanto conta */
  font-variant-numeric:tabular-nums;
  font-feature-settings:'tnum' 1;
}
.numeros b i{
  font-style:normal;color:var(--accent);
  font-size:.52em;margin-left:.06em;
}
.numeros > div > span{
  font-family:var(--f-mono);font-size:var(--t-xs);
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--fg-faint);
}

/* ============ ABA DE SERVIÇOS E REGIÕES ============
   Discreta no rodapé, mas com conteúdo real e rastreável.
   O Google indexa o que está dentro de <details>. */
.chaves{
  border-top:1px solid var(--line);
  margin-top:clamp(1.2rem,1rem + 1vw,1.8rem);
}
.chaves summary{
  display:inline-flex;align-items:center;gap:.6em;
  padding:clamp(.9rem,.8rem + .5vw,1.2rem) 0;
  cursor:pointer;list-style:none;
  font-family:var(--f-mono);font-size:var(--t-xs);
  letter-spacing:var(--tr-wide);text-transform:uppercase;
  color:var(--fg-faint);
  transition:color var(--dur-fast) var(--ease-io);
}
.chaves summary::-webkit-details-marker{display:none}
.chaves summary:hover{color:var(--accent)}
.chaves__mais{position:relative;width:9px;height:9px;flex:none}
.chaves__mais::before,.chaves__mais::after{
  content:'';position:absolute;left:50%;top:50%;
  width:9px;height:1px;background:currentColor;
  transform:translate(-50%,-50%);
  transition:transform var(--dur-base) var(--ease-out),opacity var(--dur-fast);
}
.chaves__mais::after{transform:translate(-50%,-50%) rotate(90deg)}
.chaves[open] .chaves__mais::after{transform:translate(-50%,-50%) rotate(0);opacity:0}

.chaves__corpo{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));
  gap:var(--gap-sm) var(--gap);
  padding-bottom:clamp(1.2rem,1rem + 1vw,1.8rem);
}
.chaves__corpo h6{
  font-family:var(--f-mono);font-size:var(--t-xs);font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent);margin-bottom:.6em;
}
.chaves__corpo p{
  font-size:var(--t-xs);line-height:1.7;color:var(--fg-muted);
}

/* ============ GALERIA DE TRABALHOS ============
   Duas fileiras em sentidos opostos. A animação é de CSS puro: sem JS ela
   continua rodando, e com movimento reduzido ela para com o conteúdo à vista. */
.galeria{
  display:grid;
  gap:var(--gap-sm);
  margin-bottom:var(--gap);
}
.galeria__fila{
  overflow:hidden;
  /* apaga as pontas para as telas entrarem e saírem sem corte seco */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
}
.galeria__track{
  display:flex;
  gap:var(--gap-sm);
  width:max-content;
  animation:galeria-desliza 46s linear infinite;
  will-change:transform;
}
.galeria__fila--inv .galeria__track{
  animation-duration:54s;
  animation-direction:reverse;
}
.galeria__fila:hover .galeria__track{animation-play-state:paused}

@keyframes galeria-desliza{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-50%,0,0)}
}

.tela{
  flex:none;
  width:clamp(232px,26vw,384px);
  transition:border-color var(--dur-base) var(--ease-io),
             box-shadow var(--dur-base) var(--ease-io),
             transform var(--dur-base) var(--ease-out);
}
.tela:hover{
  border-color:var(--accent-line);
  box-shadow:var(--sombra-2);
  transform:translateY(-4px);
}
.tela img{
  width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;
  object-position:top center;
  border-bottom:1px solid var(--line);
}
.tela figcaption{
  padding:.85em 1em;
  font-family:var(--f-mono);font-size:var(--t-xs);
  letter-spacing:.06em;text-transform:uppercase;
  color:var(--fg-muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

@media(prefers-reduced-motion:reduce){
  .galeria__track{animation:none !important}
  /* parada, a fileira vira uma faixa rolável na mão */
  .galeria__fila{
    overflow-x:auto;
    -webkit-mask-image:none;mask-image:none;
    scrollbar-width:thin;
  }
}

/* ============ ATENDIMENTO COM FOTO ============ */
.atend-grade{
  display:grid;
  grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);
  gap:var(--gap-lg);
  align-items:center;
}
.atend-grade .atend{
  margin-top:clamp(1.6rem,1.2rem + 1.6vw,2.6rem);
  grid-template-columns:1fr;
  gap:var(--gap-sm);
}
@media(max-width:900px){
  .atend-grade{grid-template-columns:1fr}
  .atend-grade .foto{max-width:420px}
  .atend-grade .atend{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
}

/* ============ FOTO DENTRO DO PROCESSO ============
   Ocupa o vazio da coluna esquerda e ilustra as duas primeiras etapas. */
.foto--proc{
  margin-top:clamp(1.8rem,1.3rem + 1.8vw,2.8rem);
  max-width:420px;
}
@media(max-width:900px){
  .foto--proc{max-width:100%;margin-bottom:clamp(1.6rem,1.2rem + 1.6vw,2.4rem)}
}

/* ============ FOTO NO PALCO DO HERO ============
   Reusa o componente .foto inteiro (moldura, recorte 4:5, legenda com
   gradiente e cor forçada). Só a proporção muda no celular. */
.foto--palco{margin:0}

/* ============ VÍDEO SOBRE O PÔSTER ============
   O vídeo cobre a imagem só depois que o JS o liga. Enquanto isso, e para
   sempre em quem tem movimento reduzido ou JS desligado, vale o pôster. */
.foto__palco{position:relative;line-height:0}
.foto__palco img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 40%}
.foto__video{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;object-position:50% 40%;
  opacity:0;transition:opacity var(--dur-slow) var(--ease-io);
}
.foto__video[data-on]{opacity:1}

@media(max-width:700px){
  /* fonte de 464px esticada em 3dpr vira mingau, e são 273 KB em 4G */
  .foto__video{display:none}
}
@media(prefers-reduced-motion:reduce){
  .foto__video{display:none !important}
}