/* Padrão inspirado na home-2 do Xable, com as cores da Três por Três e fundo claro. Vale para todas as páginas. */

/* Rótulos com o pontinho da referência */
.rotulo{display:inline-flex;align-items:center;gap:10px}
.rotulo::before{content:"";flex-shrink:0;width:10px;height:10px;border-radius:50%;border:2px solid currentColor}
.h2-ponto{display:inline-block;width:10px;height:10px;border-radius:50%;border:2px solid currentColor;margin-right:10px;vertical-align:0}
.hv .hv-rotulo .h2-ponto{color:var(--laranja-claro)}
.h2-sublinhado{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:15px;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;color:var(--musgo);padding-bottom:6px;border-bottom:2px solid var(--laranja);align-self:flex-start}
.h2-sublinhado::after{content:"›";font-size:20px;line-height:1;transition:transform .15s ease}
.h2-sublinhado:hover::after{transform:translateX(4px)}
.h2-sublinhado.claro{color:var(--bege);border-bottom-color:var(--laranja-claro)}
.hv .acoes{align-items:center;gap:28px}

/* Abertura: conteúdo visível mesmo se a animação falhar */
.hv{min-height:clamp(560px, 86vh, 820px)}
.hv-rotulo,.hv-l,.hv-sub,.hv .acoes,.hv-p{opacity:1;transform:none}
.hv-rotulo,.hv-sub,.hv .acoes{animation:h2-entra .6s ease-out both}
.hv-l{animation:h2-entra .6s ease-out both}
.hv-l:nth-child(1){animation-delay:.05s}
.hv-l:nth-child(2){animation-delay:.15s}
.hv-l:nth-child(3){animation-delay:.25s}
.hv-sub{animation-delay:.3s}
.hv .acoes{animation-delay:.4s}
.hv-p{animation:hv-flutua 6s ease-in-out infinite}
.hv-p1{rotate:-6deg}.hv-p2{rotate:5deg}.hv-p3{rotate:-3deg}.hv-p4{rotate:4deg}
.hv h1{font-size:clamp(40px, 6vw, 84px);line-height:1.02}
.hv-sub{max-width:48ch}
@keyframes h2-entra{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.hv .hv-miolo{padding-bottom:clamp(150px, 15vw, 210px)}
@media (max-width: 900px){.hv-veu{background:linear-gradient(180deg, rgba(20,49,38,.8), rgba(20,49,38,.94))}}
@media (prefers-reduced-motion: reduce){
  .hv-rotulo,.hv-l,.hv-sub,.hv .acoes,.hv-p,.hv-video{animation:none!important}
  .h2-serv,.trabalho .print,.h2-sublinhado::after{transition:none!important}
}

/* Faixa sobreposta ao banner */
.h2-destaque{position:relative;z-index:2;margin-top:clamp(-120px, -9vw, -60px)}
.h2-destaque-grade{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);box-shadow:0 40px 80px -50px rgba(20,49,38,.6)}
.h2-destaque-a{background:var(--musgo);color:var(--bege);padding:clamp(32px, 4vw, 56px);display:flex;flex-direction:column;justify-content:center;gap:20px}
.h2-destaque-a h2{font-size:clamp(28px, 2.8vw, 38px);color:var(--bege)}
.h2-destaque-a p{color:#dfe6d2;font-size:17px}
.h2-destaque-b{list-style:none;margin:0;background:var(--laranja);color:var(--bege);padding:clamp(32px, 4vw, 56px);display:flex;flex-direction:column;gap:26px}
.h2-destaque-b li{display:grid;grid-template-columns:48px 1fr;gap:16px;align-items:start}
.h2-destaque-b strong{display:block;font-size:19px;margin-bottom:4px}
.h2-destaque-b p{font-size:16px;color:#fbe3cf}
.h2-ic{width:48px;height:48px;border-radius:50%;background:var(--bege);color:var(--laranja);display:grid;place-items:center}

/* Cabeçalho de seção em duas colunas */
.h2-cabeca{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px, 5vw, 72px);align-items:end;margin-bottom:clamp(36px, 5vw, 56px)}
.h2-cabeca > div{display:flex;flex-direction:column;gap:16px}
.h2-cabeca > p,.h2-cabeca-lado p{color:var(--musgo-2)}
.h2-cabeca-lado{gap:14px!important}

/* Cartões de projeto (home e portfólio): informação abaixo da captura */
.trabalhos{gap:clamp(20px, 2.4vw, 32px)}
.trabalho{background:var(--branco);border:1px solid var(--linha);border-radius:20px;padding:14px 14px 22px;gap:10px;transition:box-shadow .25s ease, transform .25s ease}
.clara .trabalho{background:var(--bege)}
.trabalho:hover{box-shadow:0 30px 50px -36px rgba(20,49,38,.6);transform:translateY(-3px)}
.trabalho:focus-visible{outline:3px solid var(--laranja);outline-offset:4px}
.trabalho > :not(.tela){margin-inline:8px}
.trabalho .tela{aspect-ratio:auto;border-radius:12px;margin-bottom:6px;background:var(--bege-2)}
.trabalho .tela .print{aspect-ratio:4/3;height:auto;flex:none;object-fit:cover;object-position:top}
.trabalho .link-seta{margin-top:auto;padding-top:6px;color:var(--laranja)}
.trabalho:hover .tela{border-color:var(--linha)}

/* Sobre: texto e duas fotos do mesmo tamanho */
.h2-sobre{display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:20px;align-items:stretch}
.h2-sobre-texto{background:var(--musgo);color:#dfe6d2;border-radius:20px;padding:clamp(26px, 3vw, 40px);display:flex;flex-direction:column;gap:16px;font-size:16px}
.h2-sobre-texto .h2-sobre-abre{font-family:var(--display);font-size:clamp(22px, 2vw, 26px);line-height:1.25;color:var(--bege)}
.h2-sobre-texto .h2-sublinhado{color:var(--bege);border-bottom-color:var(--laranja-claro);margin-top:auto}
.h2-foto{margin:0;border-radius:20px;overflow:hidden;background:var(--bege-2);aspect-ratio:4/5}
.h2-foto img{width:100%;height:100%;object-fit:cover;display:block}

/* Seis serviços, todos iguais */
.h2-servicos{display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:16px}
.h2-serv{position:relative;display:flex;flex-direction:column;gap:12px;min-height:260px;padding:30px;border-radius:20px;background:var(--musgo);color:var(--bege);text-decoration:none;border-top:4px solid transparent;transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease}
.h2-serv-ic{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:rgba(247,246,239,.1);color:var(--bege);margin-bottom:auto;transition:background-color .2s ease}
.h2-serv strong{font-family:var(--display);font-size:24px;font-weight:600;line-height:1.15}
.h2-serv p{font-size:16px;color:#dfe6d2}
.h2-mais{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--bege)}
.h2-mais::after{content:"→";transition:transform .15s ease}
.h2-serv:hover,.h2-serv:focus-visible{border-top-color:var(--laranja);transform:translateY(-3px);box-shadow:0 30px 50px -34px rgba(20,49,38,.7)}
.h2-serv:hover .h2-serv-ic,.h2-serv:focus-visible .h2-serv-ic{background:var(--laranja)}
.h2-serv:hover .h2-mais,.h2-serv:focus-visible .h2-mais{color:var(--laranja-claro)}
.h2-serv:hover .h2-mais::after{transform:translateX(4px)}
.h2-serv:focus-visible{outline:3px solid var(--laranja);outline-offset:4px}

/* Faixa escura com moldura laranja e o comparador */
.h2-faixa-escura{padding-block:clamp(16px, 3vw, 40px) clamp(48px, 7vw, 96px)}
.h2-faixa-moldura{background:var(--musgo);color:var(--bege);border-top:5px solid var(--laranja);padding:clamp(28px, 5vw, 64px);border-radius:0 0 24px 24px}
.h2-faixa-moldura .comparar-texto h2{color:var(--bege)}
.h2-faixa-moldura .comparar-texto h2 em{font-style:italic;font-weight:400;color:var(--laranja-claro)}
.h2-faixa-moldura .comparar-texto p{color:#dfe6d2}
.h2-faixa-moldura .rotulo{color:var(--laranja-claro)}
.h2-instrucao{font-size:15px;padding-left:14px;border-left:3px solid var(--laranja-claro)}
.h2-comparar-fig{margin:0;display:flex;flex-direction:column;gap:12px;min-width:0}
.h2-comparar-fig figcaption{font-size:14px;color:#dfe6d2;font-style:italic}
.comparar input[type=range]{touch-action:pan-y}
.comparar:has(input:focus-visible){outline:3px solid var(--laranja-claro);outline-offset:4px}

/* Instagram compacto */
.h2-insta{background:var(--bege-2);padding-block:clamp(40px, 5vw, 64px)}
.h2-insta-grade{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px, 4vw, 56px);align-items:center}
.h2-insta-texto{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.h2-insta-texto h2{font-size:clamp(28px, 3.2vw, 40px)}
.h2-insta-texto p{color:var(--musgo-2)}
.h2-insta-posts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:12px}
.h2-insta-posts .post{aspect-ratio:1;padding:16px;justify-content:flex-start;gap:10px}
.h2-insta-posts .post:hover{transform:none;box-shadow:none}
.h2-insta-posts .post-a b{font-size:clamp(24px, 2.6vw, 34px)}
.h2-insta-posts .post-b b,.h2-insta-posts .post-c b{font-size:clamp(14px, 1.3vw, 17px)}

/* Clientes */
.h2-clientes{padding-block:clamp(36px, 5vw, 60px);border-bottom:1px solid var(--linha)}
.h2-clientes p{text-align:center;font-weight:600;margin-bottom:22px;color:var(--musgo-suave)}
.h2-clientes ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:16px 44px}
.h2-clientes li{font-family:var(--display);font-size:clamp(20px, 2vw, 26px);color:var(--musgo);opacity:.75}

/* Chamada final com formulário */
.h2-final{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border-radius:24px;overflow:hidden;box-shadow:0 40px 80px -50px rgba(20,49,38,.5)}
.h2-final-a{background:var(--musgo);color:var(--bege);padding:clamp(32px, 4vw, 56px);display:flex;flex-direction:column;gap:22px;justify-content:center}
.h2-final-a h2{font-size:clamp(32px, 3.4vw, 46px);color:var(--bege)}
.h2-final-a h2 em{color:var(--laranja-claro)}
.h2-final-a p{color:#dfe6d2}
.h2-cartao{display:flex;align-items:center;gap:16px;background:var(--bege);color:var(--musgo);border-radius:16px;padding:12px;text-decoration:none;align-self:flex-start}
.h2-cartao img{width:72px;height:72px;border-radius:12px;object-fit:cover}
.h2-cartao strong{display:block;font-size:20px}
.h2-cartao small{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--musgo-suave)}
.h2-final-b{background:var(--branco);padding:clamp(28px, 4vw, 56px);display:flex;flex-direction:column;gap:18px}
.h2-campos{display:grid;grid-template-columns:repeat(2, minmax(0,1fr));gap:16px}
.h2-final-b .campo textarea{min-height:110px}
.h2-aviso{font-size:14px;color:var(--musgo-suave)}
.h2-enviar{width:100%}

/* Páginas internas: faixa de título da referência */
.h2-pagina{position:relative;overflow:hidden;background:var(--musgo);color:var(--bege)}
.h2-pagina::before{content:"";position:absolute;inset:0;background:url(../img/hero-oficina.jpg) center/cover;opacity:.28}
.h2-pagina::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg, rgba(20,49,38,.96) 30%, rgba(20,49,38,.6))}
.h2-pagina .miolo{position:relative;z-index:1;display:flex;flex-direction:column;gap:18px;padding-block:clamp(64px, 9vw, 120px) clamp(56px, 7vw, 96px)}
.h2-pagina h1{font-size:clamp(40px, 5.6vw, 72px);letter-spacing:-0.025em;max-width:18ch;color:var(--bege)}
.h2-pagina h1 em{font-style:italic;font-weight:400;color:var(--laranja-claro)}
.h2-pagina p{font-size:clamp(18px, 1.6vw, 21px);color:#dfe6d2;max-width:56ch}
.h2-trilha{display:flex;flex-wrap:wrap;gap:10px;font-size:14px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--laranja-claro)}
.h2-trilha a{color:var(--bege);text-decoration:none}
.h2-trilha a:hover{text-decoration:underline}
.h2-trilha span[aria-hidden]{color:#b9c4ad}

/* Chamada final das páginas internas (dois blocos, como a faixa da home) */
.h2-chamada{padding-block:clamp(56px, 8vw, 104px)}
.h2-chamada-grade{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);border-radius:24px;overflow:hidden;box-shadow:0 40px 80px -50px rgba(20,49,38,.5)}
.h2-chamada-a{background:var(--musgo);color:var(--bege);padding:clamp(32px, 4vw, 56px);display:flex;flex-direction:column;gap:16px;justify-content:center}
.h2-chamada-a h2{font-size:clamp(30px, 3.4vw, 44px);color:var(--bege)}
.h2-chamada-a h2 em{font-style:italic;font-weight:400;color:var(--laranja-claro)}
.h2-chamada-a p{color:#dfe6d2}
.h2-chamada-b{background:var(--laranja);color:var(--bege);padding:clamp(32px, 4vw, 56px);display:flex;flex-direction:column;gap:18px;justify-content:center;align-items:flex-start}
.h2-chamada-b small{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:#fbe3cf}
.h2-chamada-b strong{font-family:var(--display);font-size:clamp(26px, 2.6vw, 34px);font-weight:600}
.h2-chamada-b .botao{background:var(--bege);color:var(--musgo)}
.h2-chamada-b .botao:hover{background:var(--branco)}
.h2-chamada-b .h2-sublinhado{color:var(--bege);border-bottom-color:var(--bege)}

/* Cartões das páginas internas no mesmo padrão */
.parte,.valor,.projetos li,.marcos li{border-radius:20px}
.parte{border-top:4px solid var(--laranja)}
.valor{background:var(--musgo);border-color:var(--musgo);color:var(--bege)}
.valor h3{color:var(--bege)}
.valor p{color:#dfe6d2}
.marcos li{background:var(--branco);border:1px solid var(--linha);border-top:4px solid var(--laranja)}
.marcos strong{color:var(--laranja)}
.projetos li{border-top:4px solid var(--musgo)}
.servico-bloco .lado h2{font-size:clamp(30px, 3.6vw, 44px)}
.filtros button:focus-visible{outline:3px solid var(--laranja);outline-offset:3px}
.formulario{border-radius:20px}
.ceo-foto{border-radius:20px}

@media (max-width: 900px){
  .h2-destaque-grade,.h2-cabeca,.h2-final,.h2-insta-grade,.h2-chamada-grade{grid-template-columns:1fr}
  .h2-servicos{grid-template-columns:repeat(2, minmax(0,1fr))}
  .h2-sobre{grid-template-columns:repeat(2, minmax(0,1fr))}
  .h2-sobre-texto{grid-column:1 / -1}
}
@media (max-width: 600px){
  .h2-servicos,.h2-campos{grid-template-columns:1fr}
  .h2-sobre{gap:12px}
  .h2-foto{aspect-ratio:3/4}
  .h2-serv{min-height:0}
  .h2-serv-ic{margin-bottom:12px}
  .h2-insta-posts{grid-template-columns:repeat(3, minmax(0,1fr));gap:8px}
  .h2-insta-posts .post{padding:10px}
  .h2-insta-posts .post small{display:none}
  .h2-insta-posts .post-b b,.h2-insta-posts .post-c b{font-size:12px}
  .h2-insta-posts .post-a b{font-size:20px}
}

/* Contato */
.h2-cartao-paula{display:flex;align-items:center;gap:16px;background:var(--musgo);color:var(--bege);border-radius:20px;padding:14px;border-left:4px solid var(--laranja)}
.h2-cartao-paula img{width:72px;height:72px;border-radius:14px;object-fit:cover}
.h2-cartao-paula strong{display:block;font-family:var(--display);font-size:22px;font-weight:600}
.h2-cartao-paula span{font-size:14px;color:#dfe6d2}
.formulario .rotulo{align-self:flex-start}
.h2-faixa-moldura.escura .titulo-secao{color:var(--bege)}
.h2-faixa-moldura .passo::before{color:var(--laranja-claro)}

/* Quem é a Paula */
.h2-ceo{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px, 5vw, 72px);align-items:start}
.h2-ceo-foto{position:sticky;top:110px}
@media (max-width: 860px){.h2-ceo{grid-template-columns:1fr}.h2-ceo-foto{position:static;max-width:420px}}

/* Ajustes: fotos do sobre com o mesmo tamanho, sem estourar a grade */
.h2-foto{position:relative;aspect-ratio:auto;min-height:clamp(260px, 34vw, 460px)}
.h2-foto img{position:absolute;inset:0}
.h2-ceo-foto{aspect-ratio:4/5;min-height:0}
.h2-clientes + .secao{padding-top:clamp(40px, 5vw, 64px)}

.h2-cabeca > .filtros{flex-direction:row;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:10px}
@media (max-width: 900px){.h2-cabeca > .filtros{justify-content:flex-start}}

.trabalho[hidden]{display:none!important}

/* Ajustes finais da home */
[id]{scroll-margin-top:96px}
.h2-ver-mais{display:flex;justify-content:center;margin-top:clamp(28px, 4vw, 44px)}
.h2-ver-mais .botao{min-width:260px}
.h2-sobre{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr) minmax(0,.85fr)}
.h2-sobre-texto{background:none;color:var(--musgo-2);padding:0 clamp(0px, 2vw, 24px) 0 0;justify-content:center;gap:18px;font-size:17px}
.h2-sobre-texto .titulo-secao{color:var(--musgo);font-size:clamp(32px, 3.6vw, 46px)}
.h2-sobre-texto .h2-sublinhado{color:var(--musgo);border-bottom-color:var(--laranja);margin-top:6px}
.h2-sobre .h2-foto{min-height:clamp(300px, 30vw, 420px)}
@media (max-width: 900px){.h2-sobre-texto{padding:0}.h2-sobre .h2-foto{min-height:clamp(240px, 56vw, 380px)}}
@keyframes h2-entra{from{transform:translateY(12px)}to{transform:none}}
.hv-rotulo,.hv-l,.hv-sub,.hv .acoes{opacity:1!important}
@media (max-width: 900px){.h2-sobre{grid-template-columns:repeat(2, minmax(0,1fr))}.h2-sobre-texto{grid-column:1 / -1}}

/* Clientes menores e alinhados */
.h2-clientes{padding-block:clamp(28px, 4vw, 44px)}
.h2-clientes p{font-size:13px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:18px}
.h2-clientes ul{display:grid;grid-template-columns:repeat(8, auto);justify-content:space-between;align-items:center;gap:12px 24px}
.h2-clientes li{font-size:clamp(15px, 1.35vw, 18px);white-space:nowrap;text-align:center;opacity:.7}
@media (max-width: 900px){.h2-clientes ul{grid-template-columns:repeat(4, minmax(0,1fr));justify-content:stretch}}
@media (max-width: 480px){.h2-clientes ul{grid-template-columns:repeat(2, minmax(0,1fr))}}