/* Antolini Meio Ambiente · páginas de frente */

/* ---------- abertura da frente ---------- */
.frente-topo { position: relative; overflow: hidden; isolation: isolate; min-height: min(80vh, 760px); color: var(--papel); background: var(--floresta) center / cover no-repeat; display: grid; align-items: end; }
.frente-topo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(27,33,28,.94) 0%, rgba(27,33,28,.45) 55%, rgba(27,33,28,.2) 100%); }
.frente-topo.ilustra { background: radial-gradient(120% 90% at 75% 45%, var(--floresta-2) 0%, var(--floresta) 60%); }
.frente-topo.ilustra::before { background: repeating-radial-gradient(circle at 74% 46%, transparent 0 38px, rgba(242,239,230,.045) 38px 39px); }
.frente-topo-in { width: 100%; max-width: calc(var(--largura) + 2 * var(--gutter)); margin-inline: auto; padding: 150px var(--gutter) clamp(40px, 7vh, 80px); }
.frente-topo .migalha { display: flex; gap: var(--e-3); align-items: center; margin-bottom: var(--e-5); color: rgba(242,239,230,.7); }
.frente-topo .migalha a { text-decoration: none; }
.frente-topo .migalha a:hover { color: var(--samambaia); }
.frente-topo .migalha .n { color: var(--terra); }
.frente-topo h1 { font-size: clamp(44px, 7vw, 112px); line-height: .92; letter-spacing: -.045em; max-width: 13ch; margin-bottom: var(--e-5); }
.frente-topo .linha { max-width: 46ch; font-size: clamp(17px, 1.5vw, 20px); color: rgba(242,239,230,.86); margin-bottom: var(--e-6); }
.frente-topo-arte { position: absolute; right: 8%; top: 54%; transform: translateY(-50%); width: min(30%, 380px); }
.frente-topo-arte svg { width: 100%; overflow: visible; }

/* ---------- o que é ---------- */
.oque { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-9); align-items: start; }
.oque-txt p { font-size: 18px; line-height: 1.65; max-width: 52ch; }
.oque-txt p + p { margin-top: var(--e-5); }

/* ---------- quando contratar ---------- */
.situacoes { margin-top: var(--e-8); border-top: 1px solid var(--tinta); }
.situacoes li { display: grid; grid-template-columns: clamp(80px, 12vw, 180px) 1fr; gap: var(--e-6); align-items: baseline; padding-block: var(--e-6); border-bottom: 1px solid var(--linha); }
.situacoes .idx { font-size: clamp(40px, 5vw, 72px); line-height: .9; letter-spacing: -.05em; color: var(--terra-escura); }
.situacoes p { font-size: clamp(20px, 2vw, 28px); line-height: 1.3; letter-spacing: -.015em; max-width: 34ch; }

/* ---------- entrega ---------- */
.entrega { display: grid; grid-template-columns: 1fr 1.3fr; gap: var(--e-9); align-items: start; }
.entrega-topo { position: sticky; top: 110px; }
.entrega-topo .intro-bloco { margin-top: var(--e-5); }
.sanfona details { border-top: 1px solid var(--linha); }
.sanfona details:last-child { border-bottom: 1px solid var(--linha); }
.sanfona summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 48px 1fr 36px; gap: var(--e-4); align-items: center; padding: var(--e-5) 0; font-size: clamp(19px, 1.8vw, 24px); letter-spacing: -.015em; line-height: 1.25; transition: color var(--t-rapido); }
.sanfona summary:hover { color: var(--terra-escura); }
.sanfona summary::-webkit-details-marker { display: none; }
.sanfona summary .idx { font: 500 12px var(--mono); color: var(--tinta-suave); }
.sanfona summary::after { content: "+"; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font: 400 20px var(--mono); background: var(--papel); transition: transform var(--t-medio) var(--suave), background var(--t-rapido); }
.sanfona details[open] summary::after { transform: rotate(45deg); background: var(--terra); }
.sanfona details p { padding: 0 52px var(--e-5) 64px; color: var(--tinta-suave); font-size: 16px; max-width: 64ch; }

.etapas-lista { counter-reset: e; position: relative; }
.etapas-lista li { position: relative; display: grid; grid-template-columns: 64px 1fr; gap: var(--e-5); padding: var(--e-5) 0 var(--e-6); }
.etapas-lista li::before { content: ""; position: absolute; left: 21px; top: 60px; bottom: -8px; width: 2px; background: radial-gradient(circle, var(--tinta-suave) 1px, transparent 1.4px) 0 0 / 2px 10px repeat-y; opacity: .5; }
.etapas-lista li:last-child::before { display: none; }
.etapas-lista .n { width: 44px; height: 44px; border-radius: 50%; background: var(--floresta); color: var(--papel); display: grid; place-items: center; font: 500 13px var(--mono); }
.etapas-lista li:first-child .n { background: var(--terra); color: var(--floresta); }
.etapas-lista b { display: block; font-weight: 500; font-size: clamp(20px, 2vw, 26px); letter-spacing: -.015em; line-height: 1.2; margin: 8px 0 var(--e-2); }
.etapas-lista p { color: var(--tinta-suave); font-size: 16px; max-width: 56ch; }

/* ---------- projeto executado ---------- */
.projeto-topo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-9); align-items: end; margin-bottom: var(--e-8); }
.projeto + .projeto { margin-top: var(--secao); padding-top: var(--e-8); border-top: 1px solid var(--linha); }
.projeto-corpo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-9); margin-top: var(--e-7); align-items: start; }
.projeto-corpo > p { font-size: 18px; line-height: 1.6; max-width: 50ch; }
.escopo li { display: grid; grid-template-columns: 28px 1fr; gap: var(--e-3); padding-block: var(--e-4); border-top: 1px solid var(--linha); font-size: 16px; }
.escopo li:last-child { border-bottom: 1px solid var(--linha); }
.escopo svg { width: 20px; height: 20px; color: var(--terra-escura); margin-top: 2px; }
.escopo-titulo { display: flex; gap: 10px; align-items: center; margin-bottom: var(--e-4); color: var(--terra-escura); }
.tambem { margin-top: var(--e-7); padding: var(--e-5); border-radius: var(--raio-sm); background: var(--areia); }
.tambem h3 { font-size: 20px; letter-spacing: -.01em; margin: var(--e-2) 0; }
.tambem p { font-size: 15px; color: var(--tinta-suave); }

/* ---------- chamada ---------- */
.fecho .relacionadas { margin-top: var(--e-7); padding-top: var(--e-5); border-top: 1px solid var(--linha-clara); font-size: 15px; color: var(--papel-72); max-width: 48ch; }
.fecho .relacionadas a { color: var(--papel); text-decoration: none; background: linear-gradient(var(--samambaia), var(--samambaia)) left bottom / 100% 1px no-repeat; padding-bottom: 2px; transition: color var(--t-rapido); }
.fecho .relacionadas a:hover { color: var(--samambaia); }
.assuntos { padding: 0 var(--gutter) var(--e-6); max-width: calc(var(--largura) + 2 * var(--gutter)); margin-inline: auto; font-size: 14px; color: var(--tinta-suave); }
.assuntos b { font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--tinta); margin-right: var(--e-2); }

/* ---------- responsivo ---------- */
@media (max-width: 1080px) {
  .frente-topo-arte { width: min(34%, 300px); right: 4%; }
}
@media (max-width: 820px) {
  .oque, .entrega, .projeto-topo, .projeto-corpo { grid-template-columns: 1fr; gap: var(--e-6); }
  .entrega-topo { position: static; }
  .frente-topo { min-height: 0; }
  .frente-topo-in { padding-top: 120px; }
  .frente-topo.ilustra .frente-topo-in { padding-top: 110px; }
  .frente-topo-arte { position: relative; right: auto; top: auto; transform: none; width: 56%; margin: 110px auto -80px; }
  .frente-topo.ilustra { display: block; }
  .situacoes li { grid-template-columns: 56px 1fr; gap: var(--e-4); }
  .situacoes .idx { font-size: 32px; }
  .sanfona summary { grid-template-columns: 36px 1fr 36px; gap: var(--e-3); }
  .sanfona details p { padding: 0 0 var(--e-5) 48px; }
}

/* =================================================================
   Variações ricas (modelo: estudos ambientais)
   ================================================================= */

/* abertura com fotos em fade e linhas verticais */
.frente-topo.com-slides { background: var(--floresta); min-height: min(88vh, 820px); }
.frente-topo.com-slides .slides { z-index: -2; }
.frente-topo.com-slides::before { background: linear-gradient(0deg, rgba(27,33,28,.92) 0%, rgba(27,33,28,.35) 55%, rgba(27,33,28,.15) 100%); }
.grade-linhas { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, rgba(242,239,230,.16) 1px, transparent 1px) calc(var(--gutter) - 1px) 0 / calc((100% - 2 * var(--gutter)) / 4) 100% repeat-x; }
.slides-barras { position: absolute; right: var(--gutter); bottom: clamp(40px, 7vh, 80px); display: flex; gap: 8px; }
.slides-barras i { width: 36px; height: 3px; border-radius: 3px; background: rgba(242,239,230,.3); overflow: hidden; position: relative; }
.slides-barras i.on::after { content: ""; position: absolute; inset: 0; background: var(--samambaia); animation: barra 5s linear forwards; }
@keyframes barra { from { transform: translateX(-100%); } to { transform: none; } }

/* quando contratar em cartões com foto */
.cenarios { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e-4); margin-top: var(--e-8); }
.cenario { border-radius: var(--raio); overflow: hidden; background: var(--papel); display: flex; flex-direction: column; transition: transform var(--t-medio) var(--suave), box-shadow var(--t-medio); }
.cenario:hover { transform: translateY(-6px); box-shadow: 0 30px 50px -30px rgba(27,33,28,.45); }
.cenario-img { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.cenario-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--suave); }
.cenario:hover .cenario-img img { transform: scale(1.06); }
/* card com gráfico (inventário), na altura do card de foto */
.cenario-img svg { display: block; width: 100%; height: 100%; transition: transform 1.2s var(--suave); }
.cenario:hover .cenario-img svg { transform: scale(1.06); }
.cenario-img .idx { position: absolute; left: var(--e-4); top: var(--e-4); width: 48px; height: 48px; border-radius: 50%; background: var(--terra); color: var(--floresta); display: grid; place-items: center; font: 500 14px var(--mono); }
.cenario-txt { padding: var(--e-5) var(--e-5) var(--e-6); }
.cenario-txt p { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.35; letter-spacing: -.01em; }

/* o que entregamos em vitrine */
.vitrine { display: grid; grid-template-columns: 1.15fr 1fr; border-radius: var(--raio); overflow: hidden; background: var(--floresta); color: var(--papel); min-height: 640px; }
.vitrine-img { position: relative; overflow: hidden; min-height: 420px; }
.vitrine-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.05); transition: opacity .9s ease, transform 6s ease-out; }
.vitrine-img img.on { opacity: 1; transform: scale(1); }
.vitrine-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(27,33,28,.85), rgba(27,33,28,0) 55%); }
.vitrine-legenda { position: absolute; left: var(--e-6); right: var(--e-6); bottom: var(--e-6); z-index: 1; }
.vitrine-legenda .rotulo { color: var(--samambaia); }
.vitrine-legenda b { display: block; font-weight: 400; font-size: clamp(28px, 3vw, 44px); letter-spacing: -.03em; line-height: 1.05; margin-top: var(--e-2); }
.vitrine-lista { padding: var(--e-6); display: grid; gap: var(--e-2); align-content: center; }
.vitrine-item { width: 100%; text-align: left; border: 1px solid var(--linha-clara); background: rgba(242,239,230,.04); border-radius: 12px; padding: var(--e-4) var(--e-4); cursor: pointer; display: grid; grid-template-columns: 40px 1fr 24px; column-gap: var(--e-3); align-items: center; color: var(--papel); transition: background var(--t-rapido), color var(--t-rapido), border-color var(--t-rapido); }
.vitrine-item:hover { border-color: rgba(194,199,122,.6); }
.vitrine-item .idx { font: 500 11px var(--mono); opacity: .6; }
.vitrine-item .vi-t { font-size: 18px; font-weight: 500; letter-spacing: -.01em; }
.vitrine-item .vi-mais { width: 20px; height: 20px; position: relative; }
.vitrine-item .vi-mais::before, .vitrine-item .vi-mais::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 1.5px; background: currentColor; transform: translate(-50%, -50%); transition: transform var(--t-medio) var(--suave); }
.vitrine-item .vi-mais::after { transform: translate(-50%, -50%) rotate(90deg); }
.vitrine-item .vi-d { grid-column: 2 / 4; font-size: 16px; line-height: 1.55; max-height: 0; overflow: hidden; opacity: 0; transition: max-height .5s var(--suave), opacity .4s, margin .4s; }
.vitrine-item.on { background: var(--samambaia); color: var(--floresta); border-color: var(--samambaia); }
.vitrine-item.on .idx { opacity: 1; }
.vitrine-item.on .vi-mais::after { transform: translate(-50%, -50%) rotate(0deg); }
.vitrine-item.on .vi-d { max-height: 260px; opacity: .9; margin-top: var(--e-2); }

/* projeto rico */
.projeto-n { color: var(--terra-escura); display: block; margin-bottom: var(--e-4); }
.projeto-titulo { font-size: clamp(34px, 3.8vw, 58px); line-height: 1.02; letter-spacing: -.035em; }
.projeto-meta p { font-size: 17px; line-height: 1.6; color: var(--tinta-suave); max-width: 50ch; }
.chips { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-top: var(--e-4); }
.chips span { font: 500 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; padding: 7px 11px; border-radius: 99px; border: 1px solid var(--linha); background: #fff; }

.dados-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--e-4); margin-top: var(--e-4); }
.dado-card { border-radius: var(--raio-sm); padding: var(--e-5); min-height: 250px; display: flex; flex-direction: column; justify-content: space-between; gap: var(--e-4); background: var(--floresta); color: var(--papel); }
.dado-card.terra { background: var(--terra); color: var(--floresta); }
.dado-card.samambaia { background: var(--samambaia); color: var(--floresta); }
.dado-card.papel { background: var(--papel); color: var(--tinta); border: 1px solid var(--linha); }
.dado-card .rotulo { opacity: .7; }
.dado-card .grande { font-size: clamp(52px, 5vw, 84px); line-height: .85; letter-spacing: -.055em; }
.dado-card .grande .d-sup { font-size: 11px; top: .7em; }
.dado-card .legenda { font-size: 16px; line-height: 1.5; opacity: .9; }
.dado-card .chips span { background: transparent; border-color: currentColor; color: inherit; opacity: .9; }
.mini-rota { width: 100%; height: 44px; overflow: visible; }
.mini-rota path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.8s var(--suave) .3s; }
.visivel .mini-rota path { stroke-dashoffset: 0; }
.mini-camadas { display: grid; gap: 5px; }
.mini-camadas i { height: 9px; border-radius: 9px; background: var(--floresta); transform-origin: left; transform: scaleX(0); transition: transform 1s var(--suave); }
.mini-camadas i:nth-child(1) { width: 100%; transition-delay: .2s; }
.mini-camadas i:nth-child(2) { width: 82%; opacity: .8; transition-delay: .35s; }
.mini-camadas i:nth-child(3) { width: 64%; opacity: .6; transition-delay: .5s; }
.mini-camadas i:nth-child(4) { width: 46%; opacity: .4; transition-delay: .65s; }
.visivel .mini-camadas i { transform: scaleX(1); }

.estudos-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--e-4); margin-top: var(--e-7); }
.estudos-cards.tres { grid-template-columns: repeat(3, 1fr); }
.estudo-card { background: #fff; border: 1px solid var(--linha); border-radius: var(--raio-sm); padding: var(--e-5); display: grid; gap: var(--e-3); align-content: start; transition: border-color var(--t-rapido), transform var(--t-medio) var(--suave); }
.estudo-card:hover { border-color: var(--terra); transform: translateY(-4px); }
.estudo-card .ico { width: 48px; height: 48px; border-radius: 50%; background: var(--areia); color: var(--terra-escura); display: grid; place-items: center; }
.estudo-card .ico svg { width: 24px; height: 24px; }
.estudo-card b { font-weight: 500; font-size: 18px; letter-spacing: -.01em; }
.estudo-card p { font-size: 16px; color: var(--tinta-suave); line-height: 1.5; }

/* projeto em anel */
.anel-projeto { position: relative; border-radius: var(--raio); background: radial-gradient(90% 80% at 50% 50%, var(--floresta-2) 0%, var(--floresta) 70%); color: var(--papel); min-height: 640px; overflow: hidden; }
.anel-projeto::before { content: ""; position: absolute; left: 50%; top: 50%; width: min(520px, 70%); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; border: 1px dashed rgba(194,199,122,.45); }
.anel-projeto::after { content: ""; position: absolute; left: 50%; top: 50%; width: min(380px, 52%); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; border: 10px solid rgba(220,112,0,.18); }
.anel-centro-p { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(280px, 40%); text-align: center; z-index: 1; }
.anel-centro-p svg { width: 100%; }
.anel-centro-p .rotulo { display: block; margin-top: var(--e-3); color: var(--samambaia); }
.anel-card { position: absolute; z-index: 2; width: 280px; padding: var(--e-4) var(--e-5); border-radius: 12px; background: rgba(242,239,230,.07); border: 1px solid var(--linha-clara); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.anel-card .rotulo { color: var(--samambaia); }
.anel-card b { display: block; font-weight: 500; font-size: 20px; letter-spacing: -.015em; margin: 6px 0 4px; }
.anel-card span.sub { display: block; font-size: 16px; line-height: 1.5; color: var(--papel-72); }
.anel-card.tl { left: 5%; top: 9%; }
.anel-card.tr { right: 5%; top: 14%; }
.anel-card.bl { left: 7%; bottom: 10%; }
.anel-card.br { right: 5%; bottom: 8%; }
.anel-card.tag-terra { background: var(--terra); color: var(--floresta); border-color: var(--terra); }
.anel-card.tag-terra .rotulo, .anel-card.tag-terra span.sub { color: var(--floresta); }

@media (max-width: 1080px) {
  .dados-grid, .estudos-cards { grid-template-columns: repeat(2, 1fr); }
  .anel-card { width: 210px; }
}
@media (max-width: 820px) {
  .cenarios, .vitrine { grid-template-columns: 1fr; gap: var(--e-5); }
  .vitrine-img { min-height: 300px; }
  .vitrine-lista { padding: var(--e-4); }
  .estudos-cards, .estudos-cards.tres { grid-template-columns: 1fr; }
  .dados-grid { grid-template-columns: 1fr 1fr; }
  .dado-card { min-height: 190px; padding: var(--e-4); }
  .anel-projeto { min-height: 0; padding: var(--e-5); display: grid; gap: var(--e-3); }
  .anel-projeto::before, .anel-projeto::after { display: none; }
  .anel-centro-p, .anel-card { position: static; transform: none; width: auto; }
  .anel-centro-p { width: 62%; margin: 0 auto var(--e-4); }
  .slides-barras { display: none; }
}

/* ---------- ajustes de leitura ---------- */
.titulo-bloco.quebra { max-width: none; }
.projeto-cabeca .chips { grid-column: 1 / -1; margin: 0 0 var(--e-5); }
.projeto-resumo { font-size: clamp(17px, 1.4vw, 20px); line-height: 1.55; color: var(--tinta); max-width: 46ch; }
/* o desenho começa na altura do título; abaixo de 1180px ele desce para baixo do texto */
.oque-corte { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: var(--e-8); align-items: start; }
.oque-corte .oque-txt { margin-top: var(--e-6); }
@media (max-width: 1180px) {
  .oque-corte { grid-template-columns: 1fr; gap: var(--e-8); }
  .oque-corte .oque-txt p { max-width: 62ch; }
  .oque-corte .corte { max-width: 760px; }
}

.anel-contador { position: absolute; left: var(--e-5); top: var(--e-5); z-index: 3; color: rgba(242,239,230,.6); }
.anel-linhas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.anel-linhas line { stroke: rgba(194,199,122,.7); stroke-width: 1.2; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.4s var(--suave) .4s; }
.anel-projeto.visivel .anel-linhas line { stroke-dashoffset: 0; }
.anel-no { position: absolute; z-index: 2; width: 10px; height: 10px; border-radius: 50%; background: var(--samambaia); transform: translate(-50%, -50%) scale(0); box-shadow: 0 0 0 5px rgba(194,199,122,.18); transition: transform .5s var(--suave) 1.4s; }
.anel-projeto.visivel .anel-no { transform: translate(-50%, -50%) scale(1); }
@media (max-width: 820px) {
  .anel-linhas, .anel-no { display: none; }
  .anel-contador { position: static; }
}

/* ---------- sobre e contato ---------- */
.topo-simples { max-width: var(--largura); margin-inline: auto; padding: 150px var(--gutter) var(--e-6); }
.topo-simples h1 { font-size: clamp(44px, 7vw, 112px); line-height: .92; letter-spacing: -.045em; max-width: 13ch; margin-bottom: 0; }
.topo-simples .linha { max-width: 46ch; font-size: clamp(17px, 1.5vw, 20px); color: var(--tinta-suave); padding-top: 8px; }
.topo-simples .sobre-cabeca { margin-bottom: 0; }
/* títulos e subtítulos lado a lado, com quebras inteligentes */
.sobre-cabeca .linha-titulo { display: block; }
.sobre-cabeca .oque-txt p { font-size: clamp(17px, 1.4vw, 20px); line-height: 1.55; max-width: 46ch; }
.sobre-cabeca .oque-txt p + p { margin-top: var(--e-5); }
.linha-titulo { display: block; }
.trilha { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--e-4); margin-top: var(--e-8); list-style: none; }
.trilha li { background: #fff; border: 1px solid var(--linha); border-radius: var(--raio-sm); padding: var(--e-5); display: grid; gap: var(--e-2); align-content: start; }
.trilha .trilha-icone { width: 44px; height: 44px; border-radius: 50%; background: var(--areia); color: var(--terra-escura); display: grid; place-items: center; }
.trilha .trilha-icone svg { width: 22px; height: 22px; }
.trilha .t-ano { display: block; font: 500 12px var(--mono); letter-spacing: .06em; color: var(--terra-escura); padding-top: var(--e-3); border-top: 2px solid var(--tinta); }
.trilha h3 { font-size: 20px; letter-spacing: -.015em; line-height: 1.15; font-weight: 500; }
.trilha p { font-size: 15px; line-height: 1.5; color: var(--tinta-suave); }
/* território com foto ao lado do título e texto */
.territorio-destaque { display: grid; grid-template-columns: 1fr 1fr .95fr; gap: var(--e-4); margin-top: var(--e-8); align-items: stretch; }
.territorio-foto { border-radius: var(--raio-sm); overflow: hidden; background: var(--floresta); display: flex; flex-direction: column; margin: 0; min-height: 100%; }
.territorio-foto img { width: 100%; height: 100%; flex: 1 1 auto; min-height: 320px; aspect-ratio: auto; object-fit: cover; }
.territorio-foto figcaption { flex: none; padding: var(--e-4) var(--e-4); color: var(--papel-72); background: var(--floresta); border-top: 1px solid var(--linha-clara); }
.territorio-num { background: var(--floresta); color: var(--papel); border-radius: var(--raio-sm); padding: var(--e-6); display: flex; flex-direction: column; justify-content: flex-start; gap: var(--e-2); }
.territorio-num .rotulo { color: var(--samambaia); }
.territorio-num .grande { font-size: clamp(52px, 5vw, 84px); line-height: .85; letter-spacing: -.055em; margin: 0; }
.territorio-num .grande .d-sup { font-size: 11px; top: .7em; }
.territorio-num .brasil-mapa { width: 100%; height: auto; display: block; margin-top: auto; padding-top: var(--e-5); }
.mapa-brasil { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--e-7); align-items: center; margin-top: var(--e-8); background: var(--floresta); color: var(--papel); border-radius: var(--raio); padding: clamp(28px, 4vw, 64px); }
.mapa-brasil .mapa-svg svg { width: 100%; height: auto; display: block; }
.mapa-brasil .grande { font-size: clamp(52px, 5vw, 84px); line-height: .85; letter-spacing: -.055em; margin: var(--e-3) 0 var(--e-5); }
.mapa-brasil .grande .d-sup { font-size: 11px; top: .7em; }
.mapa-brasil .rotulo { color: var(--samambaia); }
.ufs { display: flex; flex-wrap: wrap; gap: 8px; }
.territorio-num .ufs span { font: 500 11px var(--mono); letter-spacing: .06em; padding: 7px 11px; border-radius: 99px; border: 1px solid var(--linha-clara); color: var(--papel); opacity: .9; }
.mapa-brasil .ufs span { font: 500 11px var(--mono); letter-spacing: .06em; padding: 7px 11px; border-radius: 99px; border: 1px solid var(--linha-clara); color: var(--papel); opacity: .9; }
.equipe-perfis { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-4); margin-block: var(--e-7); }
.perfil { background: #fff; border: 1px solid var(--linha); border-radius: var(--raio-sm); padding: var(--e-6); display: grid; gap: var(--e-4); align-content: start; }
.perfil .mono { width: 64px; height: 64px; border-radius: 50%; background: var(--floresta); color: var(--samambaia); display: grid; place-items: center; font: 500 20px var(--mono); }
.perfil b { display: block; font-weight: 500; font-size: 22px; letter-spacing: -.015em; }
.perfil .cargo { display: block; font-size: 15px; color: var(--tinta-suave); margin-top: 4px; }
.perfil .resumo { font-size: 15px; line-height: 1.5; margin-top: var(--e-3); }
/* equipe e habilitações sem vazios */
.rede { display: grid; grid-template-columns: 56px 1fr; gap: var(--e-4); align-items: start; background: #fff; border: 1px solid var(--linha); border-radius: var(--raio-sm); padding: var(--e-5) var(--e-6); max-width: none; }
.rede-icone { width: 56px; height: 56px; border-radius: 50%; background: var(--samambaia); color: var(--floresta); display: grid; place-items: center; }
.rede-icone svg { width: 26px; height: 26px; }
.rede h3 { font-size: 22px; letter-spacing: -.015em; font-weight: 500; margin-bottom: var(--e-2); }
.rede p { font-size: 16px; color: var(--tinta-suave); max-width: 64ch; }
.habilit { margin-top: var(--e-4); display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e-4); max-width: none; }
.habilit article { background: #fff; border: 1px solid var(--linha); border-radius: var(--raio-sm); padding: var(--e-5) var(--e-5) var(--e-6); display: grid; gap: var(--e-3); align-content: start; }
.habilit-icone { width: 44px; height: 44px; border-radius: 50%; background: var(--floresta); color: var(--samambaia); display: grid; place-items: center; }
.habilit-icone svg { width: 22px; height: 22px; }
.habilit h3 { font-size: 18px; letter-spacing: -.01em; font-weight: 500; line-height: 1.25; }
.habilit p { font-size: 15px; color: var(--tinta-suave); line-height: 1.55; border: 0; padding: 0; }
.habilit strong { color: var(--tinta); }
/* fecho sobre com samambaia em duas linhas */
.fecho-sobre h2 .d-marca { color: var(--floresta); }
.form-proposta { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-4); margin-top: var(--e-7); }
.entrega > .form-proposta { margin-top: 0; }
.form-proposta .campo.cheio .btn { justify-self: start; }
/* contato */
.form-grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: var(--e-9); align-items: start; }
.form-cabeca { position: sticky; top: 110px; }
.form-cabeca .intro-bloco { margin-top: var(--e-5); }
.nota-linha { margin-top: var(--e-4); font-size: 14px; color: var(--tinta-suave); }
.form-card { margin-top: 0; background: #fff; border: 1px solid var(--linha); border-radius: var(--raio); padding: clamp(24px, 3vw, 48px); box-shadow: var(--sombra-tela); }
.opc-bloco { background: var(--papel); }
.opc-bloco legend { color: var(--tinta-suave); }
.contato-cards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-4); margin-top: var(--e-8); }
.contato-cards article { background: #fff; border: 1px solid var(--linha); border-radius: var(--raio-sm); padding: var(--e-5) var(--e-5) var(--e-6); display: grid; gap: var(--e-3); align-content: start; }
.contato-icone { width: 44px; height: 44px; border-radius: 50%; background: var(--floresta); color: var(--samambaia); display: grid; place-items: center; }
.contato-icone svg { width: 22px; height: 22px; }
.contato-cards h3 { font-size: 18px; letter-spacing: -.01em; font-weight: 500; line-height: 1.25; }
.contato-cards p { font-size: 16px; color: var(--tinta-suave); line-height: 1.55; overflow-wrap: anywhere; }
.contato-cards .link-mono { color: var(--tinta); }
/* onde estamos em quadro escuro */
.onde-quadro { display: grid; grid-template-columns: 1fr 1.1fr; gap: var(--e-7); align-items: stretch; background: var(--floresta); color: var(--papel); border-radius: var(--raio); padding: clamp(28px, 4vw, 64px); }
.onde-quadro .kicker { color: rgba(242,239,230,.6); margin-bottom: var(--e-5); }
.onde-quadro .kicker .n { color: var(--terra); }
.onde-quadro .titulo-bloco { font-size: clamp(32px, 3.6vw, 54px); max-width: 14ch; }
.onde-intro { margin-top: var(--e-4); font-size: 17px; color: var(--papel-72); max-width: 44ch; }
.onde-dado { margin-top: var(--e-6); font-size: 16px; line-height: 1.6; color: var(--papel); max-width: 42ch; }
.onde-dado .rotulo { display: block; color: var(--samambaia); margin-bottom: var(--e-2); }
.onde-dado .link-mono { color: var(--papel); text-transform: lowercase; letter-spacing: .04em; font-size: 13px; overflow-wrap: anywhere; }
.onde-mapa { border-radius: var(--raio-sm); overflow: hidden; border: 1px solid var(--linha-clara); min-height: 320px; }
.onde-mapa iframe { display: block; width: 100%; height: 100%; min-height: 320px; border: 0; filter: saturate(.82); }
.campo { display: grid; gap: 8px; align-content: start; }
.campo.cheio { grid-column: 1 / -1; }
.campo label { font: 500 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--tinta); }
.campo .opc { color: var(--tinta-suave); text-transform: none; letter-spacing: 0; }
.campo input, .campo select, .campo textarea { font: 400 16px/1.5 var(--sans); color: var(--tinta); background: #fff; border: 1px solid var(--linha); border-radius: 12px; padding: 14px 16px; width: 100%; }
.campo textarea { resize: vertical; min-height: 140px; }
.campo input:focus-visible, .campo select:focus-visible, .campo textarea:focus-visible { outline: 2px solid var(--terra); outline-offset: 2px; border-color: var(--terra); }
.opc-bloco { grid-column: 1 / -1; border: 1px dashed var(--linha); border-radius: var(--raio-sm); padding: var(--e-5); display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-4); margin: 0; }
.opc-bloco legend { font: 500 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-suave); padding: 0 8px; }
.confirmacao { margin-top: var(--e-4); background: var(--samambaia); color: var(--floresta); border-radius: 12px; padding: 16px 20px; font-size: 16px; }
.erro-form { margin-top: var(--e-4); background: #fff; color: var(--terra-escura); border: 1px solid var(--terra); border-radius: 12px; padding: 16px 20px; font-size: 16px; }
.campo-armadilha { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.endereco-grande { font-size: clamp(28px, 3.4vw, 54px); line-height: 1.05; letter-spacing: -.03em; max-width: 22ch; margin-bottom: var(--e-5); }
.mapa-quadro { margin-top: var(--e-7); border-radius: var(--raio); overflow: hidden; border: 1px solid var(--linha); }
.mapa-quadro iframe { display: block; width: 100%; height: 380px; border: 0; }
@media (max-width: 1080px) {
  .territorio-destaque { grid-template-columns: 1fr 1fr; }
  .territorio-num { grid-column: 1 / -1; }
  .trilha { grid-template-columns: repeat(3, 1fr); }
  .habilit { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 820px) {
  .territorio-destaque { grid-template-columns: 1fr; }
  .trilha { grid-template-columns: 1fr 1fr; }
  .trilha li:last-child { grid-column: 1 / -1; }
  .habilit { grid-template-columns: 1fr; }
  .contato-cards { grid-template-columns: 1fr; }
  .contato-cards .link-mono { font-size: 11px; letter-spacing: .04em; }
  .form-grid { grid-template-columns: 1fr; gap: var(--e-5); }
  .form-cabeca { position: static; }
  .form-card { padding: var(--e-5); }
  .onde-quadro { grid-template-columns: 1fr; gap: var(--e-5); }
  .onde-mapa { min-height: 260px; }
  .onde-mapa iframe { min-height: 260px; }
  .rede { grid-template-columns: 44px 1fr; padding: var(--e-4) var(--e-5); }
  .rede-icone { width: 44px; height: 44px; }
  .mapa-brasil { grid-template-columns: 1fr; }
  .equipe-perfis { grid-template-columns: 1fr; }
  .form-proposta { grid-template-columns: 1fr; }
  .form-proposta .campo.cheio .btn { justify-self: stretch; width: 100%; }
  .opc-bloco { grid-template-columns: 1fr; }
  .topo-simples { padding-top: 120px; }
}

/* ---------- projetos ---------- */
.ver-todos { display: inline-block; margin-top: var(--e-7); }

/* abertura: mural de fotos de campo rolando atrás do título */
.pj-hero { position: relative; min-height: 100vh; min-height: 100svh; background: var(--floresta); color: var(--papel); overflow: hidden; isolation: isolate; display: grid; align-items: end; }
.pj-mural { position: absolute; z-index: 0; top: -12%; bottom: -12%; right: 2%; width: min(58%, 860px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; transform: rotate(-5deg); -webkit-mask-image: linear-gradient(transparent, #000 16%, #000 84%, transparent); mask-image: linear-gradient(transparent, #000 16%, #000 84%, transparent); }
.pj-coluna { overflow: hidden; }
.pj-rolo { display: grid; gap: 16px; animation: pj-rolo var(--vel, 50s) linear infinite; }
.pj-coluna:nth-child(2) .pj-rolo { animation-direction: reverse; }
.pj-rolo img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 14px; }
@keyframes pj-rolo { to { transform: translateY(calc(-50% - 8px)); } }
.pj-hero::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, var(--floresta) 34%, rgba(27,33,28,.55) 58%, rgba(27,33,28,.1) 100%), linear-gradient(0deg, rgba(27,33,28,.7), transparent 40%); pointer-events: none; }
.pj-hero-in { position: relative; z-index: 2; width: 100%; padding-top: 160px; padding-bottom: var(--e-8); }
.pj-hero .kicker { color: rgba(242,239,230,.6); }
.pj-hero .kicker .n { color: var(--terra); }
.pj-hero h1 { font-size: clamp(52px, 8.4vw, 132px); line-height: .9; letter-spacing: -.045em; max-width: 8ch; }
.pj-hero .linha { margin-top: var(--e-6); max-width: 36ch; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.5; color: rgba(242,239,230,.86); }
.pj-numeros { display: flex; flex-wrap: wrap; gap: var(--e-5) var(--e-8); margin-top: var(--e-8); }
.pj-numeros div { display: grid; gap: 6px; }
.pj-numeros dd { order: -1; margin: 0; font-size: clamp(40px, 4vw, 60px); line-height: .9; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.pj-numeros dd .d-sup { font-size: 12px; top: .5em; color: var(--samambaia); }
.pj-numeros dt { font-size: 14px; color: var(--papel-72); }
.pj-descer { display: inline-flex; gap: var(--e-3); align-items: center; margin-top: var(--e-8); color: var(--papel); text-decoration: none; }
.pj-descer span { display: inline-block; animation: pj-desce 1.8s var(--suave) infinite; }
@keyframes pj-desce { 50% { transform: translateY(6px); } }

/* índice dos projetos */
.pj-indice { border-bottom: 1px solid var(--linha); }
.pj-indice ol { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.pj-indice li + li a { border-left: 1px solid var(--linha); }
.pj-indice a { display: grid; gap: 6px; align-content: start; height: 100%; padding: var(--e-6) var(--e-4); text-decoration: none; transition: background var(--t-rapido); }
.pj-indice a:hover { background: var(--samambaia); }
.pj-indice .idx { font: 500 12px var(--mono); color: var(--terra-escura); }
.pj-indice b { font-weight: 500; font-size: 17px; line-height: 1.25; letter-spacing: -.01em; }
.pj-ind-serv { font-size: 14px; color: var(--tinta-suave); }

/* capítulo por projeto: foto que se abre ao entrar na tela, número que conta */
.pj-cap { padding-top: var(--secao); }
.pj-cap:last-of-type { padding-bottom: var(--secao); }
.pj-cap-in { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--e-9); align-items: center; }
.pj-cap.inverso .pj-midia { order: 2; }
.pj-midia { position: relative; display: block; height: min(76vh, 720px); min-height: 420px; }
.pj-foto { width: 100%; height: 100%; object-fit: cover; border-radius: var(--raio); }
.js .pj-midia .pj-foto { clip-path: inset(12% 10% 12% 10% round var(--raio)); transform: scale(1.16); transition: clip-path 1.4s var(--suave), transform 2.2s var(--suave); }
.js .pj-midia.visivel .pj-foto { clip-path: inset(0 round var(--raio)); transform: scale(1); }
.pj-foto-2 { position: absolute; right: -5%; bottom: -7%; width: 36%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 14px; border: 6px solid var(--papel); box-shadow: 0 30px 60px -30px rgba(27,33,28,.6); transform: rotate(3deg); }
.pj-cap.inverso .pj-foto-2 { right: auto; left: -5%; transform: rotate(-3deg); }
.js .pj-foto-2 { opacity: 0; translate: 0 50px; transition: opacity .9s ease .7s, translate 1.2s var(--suave) .7s; }
.js .pj-midia.visivel .pj-foto-2 { opacity: 1; translate: 0 0; }
.pj-midia.arte { display: grid; place-items: center; border-radius: var(--raio); overflow: hidden; background: radial-gradient(80% 70% at 50% 50%, var(--floresta-2) 0%, var(--floresta) 72%); }
.pj-midia.arte svg { position: relative; z-index: 1; width: min(62%, 400px); height: auto; overflow: visible; }
.pj-midia.arte::before, .pj-midia.arte::after { content: ""; position: absolute; inset: 0; margin: auto; aspect-ratio: 1; border-radius: 50%; }
.pj-midia.arte::before { width: min(92%, 600px); border: 1px dashed rgba(194,199,122,.35); }
.pj-midia.arte::after { width: min(66%, 440px); border: 10px solid rgba(220,112,0,.14); }
.js .pj-midia.arte { clip-path: inset(12% 10% 12% 10% round var(--raio)); transition: clip-path 1.4s var(--suave), opacity var(--t-medio) var(--suave), transform var(--t-medio) var(--suave); }
.js .pj-midia.arte.visivel { clip-path: inset(0 round var(--raio)); }
.pj-n { display: flex; gap: var(--e-4); color: var(--terra-escura); }
.pj-n span { color: var(--tinta-suave); }
.pj-cliente { margin-top: var(--e-5); font: 500 14px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-suave); }
.pj-titulo { margin-top: var(--e-3); font-size: clamp(34px, 3.8vw, 58px); line-height: 1.02; letter-spacing: -.035em; }
.pj-resumo { margin-top: var(--e-5); font-size: clamp(17px, 1.4vw, 20px); line-height: 1.55; max-width: 44ch; }
.pj-dado { margin-top: var(--e-6); padding-top: var(--e-5); border-top: 1px solid var(--tinta); display: flex; align-items: flex-end; justify-content: space-between; gap: var(--e-5); }
.pj-dado .grande { font-size: clamp(64px, 7vw, 112px); line-height: .82; letter-spacing: -.055em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pj-dado .grande .d-sup { font-size: 12px; top: .6em; color: var(--terra-escura); }
.pj-dado .rotulo { color: var(--tinta-suave); text-align: right; max-width: 24ch; }
.pj-txt .link-mono { display: inline-block; margin-top: var(--e-6); }

@media (max-width: 1080px) {
  .pj-indice ol { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pj-indice li:nth-child(4) a { border-left: 0; }
  .pj-indice li:nth-child(n+4) a { border-top: 1px solid var(--linha); }
}
@media (max-width: 900px) {
  .pj-mural { width: 100%; right: 0; opacity: .45; }
  .pj-hero::after { background: linear-gradient(0deg, var(--floresta) 45%, rgba(27,33,28,.5)); }
  .pj-cap-in { grid-template-columns: 1fr; gap: var(--e-8); }
  .pj-cap.inverso .pj-midia { order: 0; }
  .pj-midia { height: 72vw; min-height: 280px; }
  .pj-foto-2 { right: 4%; bottom: -8%; width: 40%; }
  .pj-cap.inverso .pj-foto-2 { left: 4%; }
}
@media (max-width: 640px) {
  .pj-indice ol { grid-template-columns: 1fr 1fr; padding-inline: 0; }
  .pj-indice li a { border-left: 0 !important; border-top: 1px solid var(--linha); }
  .pj-indice li:nth-child(odd) a { border-right: 1px solid var(--linha); }
  .pj-dado { flex-direction: column; align-items: flex-start; }
  .pj-dado .rotulo { text-align: left; }
}

/* topo do Sobre: foto leve no celular */
.topo-sobre { background-image: url("/assets/midia/fotos/equipe-vistoria-campo.jpg"); }
@media (max-width: 900px) { .topo-sobre { background-image: url("/assets/midia/fotos/equipe-vistoria-campo-800.webp"); } }
@media (max-width: 900px) and (orientation: portrait) { .topo-sobre { background-image: url("/assets/midia/fotos/equipe-vistoria-campo-retrato.webp"); } }
/* fotos que só baixam depois que a página abriu */
.pj-rolo img { transition: opacity .8s ease; }
.pj-rolo img[data-src] { opacity: 0; }