/* J.V Construction · paginas internas (servicos, obras, contato, 404)
   Complementa o site.css e usa so os tokens do :root de la. Nada de cor nova. */

/* ---------- topo das paginas internas: herda a capa da home. Ceu com o titulo, foto grande sem pelicula e o MESMO cartao
   do orcamento, na mesma grade (a direita, embaixo do telefone e das linguas), cruzando do ceu pra foto.
   Classe propria: .capa e data-capa ficam so na home, porque vigiarTopo e ajustarTitulo procuram por elas. ---------- */
.heroi-pagina {
  --hp-pad: max(var(--gutter), calc(50% - 620px));
  /* o cartao e o da capa: la as medidas saem da conta da capa; aqui sao fixas */
  --cartao-sobra: 0px; --cartao-h: auto; --cartao-topo: 24px; --capa-pad-topo: 0px; --cel-cabeca: 46px;
  position: relative;
  display: grid;
  grid-template-columns: var(--hp-pad) minmax(0, 1fr) var(--capa-vao) var(--capa-card) var(--hp-pad);
  grid-template-rows: auto auto auto;
}
/* o ceu da capa, num recorte de 14 KB: so a faixa de ceu da foto do telhado, sem baixar o telhado inteiro */
.heroi-pagina__ceu {
  grid-column: 1 / -1; grid-row: 1;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 296px;
  padding: 12px calc(var(--hp-pad) + var(--capa-card) + var(--capa-vao)) 30px var(--hp-pad);
  background: var(--ceu) url("/img/base/ceu-1600.jpg") no-repeat 50% 0 / cover;
  color: var(--sobre-foto);
}
.heroi-pagina__ceu :focus-visible, .heroi-pagina__contatos :focus-visible { outline-color: var(--ambar-claro); }
.heroi-pagina .prancheta :focus-visible { outline-color: var(--marinho); }
.heroi-pagina h1 { font-size: clamp(44px, 5.6vw, 80px); line-height: 1; letter-spacing: -0.012em; margin-left: -0.022em; }
.heroi-pagina__intro { margin-top: 14px; font-size: 20px; line-height: 1.4; max-width: 54ch; }

/* o site.js monta o topo e o formulario: a altura fica guardada, pra pagina nao pular quando eles entram */
body:not([data-pagina="inicio"]) .topo:empty { min-height: var(--topo-barra); }
.heroi-pagina .formulario--compacto:empty { min-height: 268px; }
@media (min-width: 1101px) and (max-height: 700px) { .heroi-pagina .formulario--compacto:empty { min-height: 254px; } }
@media (max-width: 1100px) { .heroi-pagina .formulario--compacto:empty { min-height: 155px; } }
@media (max-width: 760px) { .heroi-pagina .formulario--compacto:empty { min-height: 169px; } }
@media (max-width: 760px) and (min-height: 830px) { .heroi-pagina:not(.heroi-pagina--galeria) .formulario--compacto:empty { min-height: 240px; } }

/* trilha: alvo de toque de 44 px; branca sobre o ceu */
.trilha { font-size: 15px; font-weight: 600; }
.trilha ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; }
.trilha li { display: inline-flex; align-items: center; }
.trilha li + li::before { content: "/"; margin: 0 8px; opacity: 0.8; }
/* 4 px a mais de cada lado pro dedo, sem mexer no lugar do texto: "Home" chega a 46 px e "Inicio" a 44 */
.trilha a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 4px; margin-inline: -4px; text-decoration: none; }
@media (hover: hover) { .trilha a:hover { text-decoration: underline; text-underline-offset: 3px; } }
.heroi-pagina__ceu .trilha { margin-bottom: auto; padding-bottom: 8px; }

/* a foto do servico: de ponta a ponta, altura reservada pra nada pular enquanto ela carrega */
.heroi-pagina__foto { grid-column: 1 / -1; grid-row: 2; height: clamp(380px, 62vh, 640px); overflow: hidden; background: var(--superficie); border-top: 1px solid var(--ambar); border-bottom: 1px solid var(--ambar); }
.heroi-pagina__foto img { width: 100%; height: 100%; object-fit: cover; }
/* "Example photo" em linha propria, no papel; some sozinha quando a foto for do Juan */
.heroi-pagina__nota { grid-column: 2 / -2; grid-row: 3; padding-top: 8px; font-size: 14px; color: var(--texto-suave); }
/* o cartao: 24 px abaixo da barra, cruzando a borda entre o ceu e a foto. Abrir "mais detalhes" nao empurra nada */
.heroi-pagina .prancheta { grid-column: 4; grid-row: 1 / span 2; min-height: 0; margin-top: var(--cartao-topo); z-index: 2; }

/* ---------- contato: a pagina e uma tela so. Uma imagem so atras de tudo (ceu e madeira, sem emenda), a cumeeira logo abaixo do cartao ---------- */
.heroi-pagina--contato, .heroi-pagina--erro {
  --hp-altura: max(calc(100svh - var(--topo-barra)), 620px);
  --hp-cume: calc(var(--cartao-topo) + 300px);
  --foto-alvo: calc(50vw + var(--capa-util) / 2 - var(--capa-card) - clamp(70px, calc(34vw - 304px), 130px));
  --foto-w: max(110vw, calc((var(--hp-altura) - var(--hp-cume)) * 2.76), calc(var(--foto-alvo) * 1.86));
  isolation: isolate; overflow: hidden; overflow: clip;
  min-height: var(--hp-altura);
  background: var(--ceu);
  border-bottom: 1px solid var(--ambar);
}
.heroi-pagina--contato .heroi-pagina__ceu, .heroi-pagina--erro .heroi-pagina__ceu { background: none; min-height: 0; }
.heroi-pagina--contato { grid-template-rows: auto auto 1fr; }
.heroi-pagina--contato .heroi-pagina__ceu { padding-bottom: 0; }
.heroi-pagina--contato h1 { padding-top: 6px; }
.heroi-pagina--contato .heroi-pagina__intro { max-width: none; }
@media (min-width: 1101px) { html[lang="pt-BR"] .heroi-pagina--contato h1 { font-size: min(clamp(44px, 5.6vw, 80px), calc(var(--capa-col) / 12.2)); white-space: nowrap; } }
.heroi-pagina--contato .prancheta { grid-row: 1 / span 3; align-self: start; }
.heroi-pagina--contato .heroi-pagina__foto, .heroi-pagina--erro .heroi-pagina__foto { grid-column: auto; grid-row: auto; position: absolute; inset: 0; z-index: -1; height: auto; background: none; border: 0; }
.heroi-pagina--contato .heroi-pagina__foto picture, .heroi-pagina--erro .heroi-pagina__foto picture { display: contents; }
/* a mesma conta da capa: a cumeeira cai no ponto certo, nunca falta madeira embaixo nem do lado */
.heroi-pagina--contato .heroi-pagina__foto img, .heroi-pagina--erro .heroi-pagina__foto img { position: absolute; max-width: none; width: var(--foto-w); height: calc(var(--foto-w) * 0.75); left: calc(var(--foto-alvo) - var(--foto-w) * 0.539); top: calc(var(--hp-cume) - var(--foto-w) * 0.75 * 0.517); object-fit: fill; }
.heroi-pagina__contatos { grid-column: 2; grid-row: 2; list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px clamp(24px, 3vw, 40px); }
.heroi-pagina__contatos a { display: block; min-height: 44px; color: var(--sobre-foto); text-decoration: none; }
.heroi-pagina__contatos small { display: block; font-size: 15px; font-weight: 500; line-height: 1.3; }
.heroi-pagina__contatos strong { display: block; font-family: var(--fonte-titulo); font-size: 24px; font-weight: 700; line-height: 1.2; letter-spacing: 0.01em; white-space: nowrap; }
@media (hover: hover) { .heroi-pagina__contatos a:hover strong { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; } }

/* ---------- projetos: faixa de ceu curta; o cartao cruza pro papel e nao ocupa lugar na pagina (aberto, passa por cima das fotos) ---------- */
.heroi-pagina--galeria { z-index: 3; grid-template-rows: auto; }
.heroi-pagina--galeria .heroi-pagina__ceu { min-height: 230px; padding-bottom: 26px; }
.heroi-pagina--galeria .prancheta { grid-column: auto; grid-row: auto; position: absolute; top: 0; right: var(--hp-pad); width: var(--capa-card); }

/* ---------- 404: o mesmo topo, sem formulario ---------- */
.heroi-pagina--erro { display: block; --hp-cume: calc(var(--hp-altura) * 0.46); }
.heroi-pagina--erro .heroi-pagina__ceu { display: block; padding: clamp(28px, 5vh, 56px) var(--hp-pad) 0; }
.heroi-pagina__codigo { font-family: var(--fonte-titulo); font-weight: 700; font-size: 28px; line-height: 1; letter-spacing: 0.02em; color: var(--ambar-claro); margin-bottom: 10px; }
.heroi-pagina--erro .heroi-pagina__intro { max-width: 60ch; }
.heroi-pagina__acoes { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 12px; }
.heroi-pagina__acoes .botao--linha { color: var(--sobre-foto); border-color: rgba(255, 255, 255, 0.72); }
@media (hover: hover) { .heroi-pagina__acoes .botao--linha:hover { background: rgba(255, 255, 255, 0.14); border-color: var(--sobre-foto); } }

/* ---------- tablet: titulo, cartao em largura cheia e a foto embaixo, como a capa da home ---------- */
@media (max-width: 1100px) {
  .heroi-pagina { display: flex; flex-direction: column; background: var(--ceu) url("/img/base/ceu-1600.jpg") no-repeat 50% 0 / max(100%, 1600px) auto; }
  .heroi-pagina__ceu { display: block; min-height: 0; padding: 8px var(--gutter) 0; background: none; }
  .heroi-pagina .prancheta { margin: 22px var(--gutter) 0; align-self: stretch; }
  .heroi-pagina__foto { margin-top: -26px; height: clamp(340px, 46vh, 520px); }
  .heroi-pagina__nota { padding: 8px var(--gutter) 0; background: var(--fundo); }
  .heroi-pagina__ceu .trilha { padding-bottom: 4px; }
  .heroi-pagina--galeria { padding-bottom: 26px; }
  .heroi-pagina--galeria .heroi-pagina__ceu { min-height: 0; padding-bottom: 0; }
  .heroi-pagina--galeria .prancheta { position: relative; right: auto; width: auto; }
  /* contato e 404: o telhado ancorado no pe, com a cumeeira logo abaixo do conteudo */
  .heroi-pagina--contato, .heroi-pagina--erro { --foto-w: max(140vw, 1000px); padding-bottom: calc(var(--foto-w) * 0.75 * 0.483 - 30px); background: var(--ceu); }
  .heroi-pagina--contato .heroi-pagina__foto, .heroi-pagina--erro .heroi-pagina__foto { margin: 0; }
  .heroi-pagina--contato .heroi-pagina__foto img, .heroi-pagina--erro .heroi-pagina__foto img { top: auto; bottom: 0; left: calc(50% - var(--foto-w) * 0.539); }
  .heroi-pagina__contatos { margin: 14px var(--gutter) 0; }
  .heroi-pagina--contato h1 { padding-top: 0; }
  .heroi-pagina--contato .heroi-pagina__ceu { padding-bottom: 0; }
  .heroi-pagina--erro .heroi-pagina__ceu { padding: clamp(24px, 4vh, 40px) var(--gutter) 0; }
}

/* so no tablet o cartao vem antes da foto; no celular ele fica depois dela */
@media (min-width: 761px) and (max-width: 1100px) {
  .heroi-pagina .prancheta { order: 1; }
  .heroi-pagina__foto { order: 2; }
  .heroi-pagina__nota { order: 3; }
  .heroi-pagina__contatos { order: 2; }
}

/* ---------- celular: ceu com a trilha e o titulo, a foto, e o cartao com o botao na primeira tela ---------- */
@media (max-width: 760px) {
  .heroi-pagina { background: var(--fundo); }
  .heroi-pagina__ceu { padding: 0 var(--gutter) 14px; background: var(--ceu) url("/img/base/ceu-cel.jpg") no-repeat 50% 0 / cover; }
  .heroi-pagina__ceu .trilha { padding-bottom: 0; }
  .heroi-pagina h1 { font-size: clamp(34px, 10.4vw, 44px); line-height: 1.02; }
  .heroi-pagina__intro { display: none; }
  .heroi-pagina__foto { margin-top: 0; height: 158px; height: clamp(158px, calc(100svh - 606px), 260px); border-bottom: 0; }
  .heroi-pagina__nota { padding: 4px var(--gutter); font-size: 13px; line-height: 1.3; }
  .heroi-pagina .prancheta { margin: 0; }
  /* o cartao na mesma margem da logo e das secoes (no celular comum da 16 px; ate 760 px chega a 30) */
  .heroi-pagina .prancheta__cabeca { padding-inline: var(--gutter); }
  .heroi-pagina .formulario.formulario--compacto { padding-inline: var(--gutter); }
  /* projetos: o cartao sempre reduzido, pra primeira foto aparecer cedo. O resto abre em "mais detalhes" */
  .heroi-pagina--galeria { padding-bottom: 0; }
  .heroi-pagina--galeria .prancheta { position: relative; }
  .heroi-pagina--galeria .formulario--compacto:not(.formulario--aberto) .dupla--extra { display: none; }
  .heroi-pagina--galeria .heroi-pagina__ceu { padding-bottom: 12px; }
  .galeria-secao { padding-top: 0; }
  .galeria-barra { padding: 10px 0; }
  .galeria__nota { margin: 0 0 12px; }
  /* contato: ceu, cartao, contatos e so entao o telhado */
  .heroi-pagina--contato, .heroi-pagina--erro { min-height: 0; padding-bottom: 0; border-bottom: 0; }
  .heroi-pagina--contato { background: var(--fundo); }
  .heroi-pagina--contato .heroi-pagina__ceu { padding-bottom: 14px; background: var(--ceu) url("/img/base/ceu-cel.jpg") no-repeat 50% 0 / cover; }
  .heroi-pagina--contato .heroi-pagina__foto { position: static; height: 240px; }
  .heroi-pagina--contato .heroi-pagina__foto img { position: static; width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; }
  .heroi-pagina__contatos { margin: 0; padding: 4px var(--gutter) 18px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; background: var(--fundo); }
  .heroi-pagina__contatos strong { white-space: normal; overflow-wrap: anywhere; }
  .heroi-pagina__contatos li + li { border-top: 1px solid var(--linha); }
  .heroi-pagina__contatos a { display: flex; flex-direction: column; justify-content: center; min-height: 64px; padding-block: 6px; color: var(--texto); }
  .heroi-pagina__contatos small { color: var(--texto-suave); }
  .heroi-pagina__contatos :focus-visible { outline-color: var(--marinho); }
  /* 404: o aviso no ceu e o telhado de ponta a ponta embaixo */
  .heroi-pagina--erro { background: var(--ceu); --foto-w: 102vw; padding-bottom: calc(var(--foto-w) * 1.389 * 0.378 + 10px); }
  .heroi-pagina--erro .heroi-pagina__ceu { padding: 24px var(--gutter) 0; background: none; }
  .heroi-pagina--erro .heroi-pagina__intro { display: block; font-size: 18px; }
  .heroi-pagina--erro .heroi-pagina__foto img { width: var(--foto-w); height: calc(var(--foto-w) * 1.389); left: calc(50% - var(--foto-w) * 0.498); }
  .heroi-pagina__acoes .botao { flex: 1 1 100%; }
}
/* ate 829 px o cartao fica sem e-mail e servico: sobra mais tela pra foto */
@media (max-width: 760px) and (max-height: 829px) {
  .heroi-pagina__foto { height: clamp(158px, calc(100svh - 533px), 260px); }
}
/* tela baixa: a foto encolhe antes de o botao do cartao cair atras da barra de baixo */
@media (max-width: 760px) and (max-height: 760px) {
  .heroi-pagina { --cel-cabeca: 42px; }
  .heroi-pagina__foto { height: clamp(84px, calc(100svh - 510px), 158px); }
  .heroi-pagina h1 { font-size: clamp(32px, 9.4vw, 38px); }
}
@media (max-width: 760px) and (max-height: 600px) {
  .heroi-pagina__foto { height: clamp(76px, calc(100svh - 510px), 158px); }
}

/* ---------- o que entra no servico: titulo em cima e a lista em duas colunas de 3 itens, na largura cheia ---------- */
.escopo { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(28px, 6vw, 96px); align-items: start; }
.escopo .titulo-secao { margin-bottom: 0; }
.escopo__lista { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--linha); }
.escopo__lista li { position: relative; padding: 18px 0 18px 30px; border-top: 1px solid var(--linha); font-size: 18px; line-height: 1.45; }
.escopo__lista li::before { content: ""; position: absolute; left: 0; top: calc(18px + 0.72em); width: 14px; height: 3px; background: var(--ambar); }
.escopo--lista .titulo-secao { margin-bottom: clamp(24px, 3vw, 40px); }
.escopo--lista .escopo__lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, auto); grid-auto-flow: column; column-gap: clamp(32px, 6vw, 96px); border-bottom: 0; }
.escopo--lista .escopo__lista li:nth-child(3n), .escopo--lista .escopo__lista li:last-child { border-bottom: 1px solid var(--linha); }
@media (max-width: 860px) {
  .escopo { grid-template-columns: 1fr; }
  .escopo--lista .escopo__lista { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; }
  .escopo--lista .escopo__lista li:nth-child(3n) { border-bottom: 0; }
  .escopo--lista .escopo__lista li:last-child { border-bottom: 1px solid var(--linha); }
}
/* as perguntas ficam no outro bege: as linhas e o botao + precisam de um tom a mais pra aparecer */
.secao--cinza .faq, .secao--cinza .faq__item { border-color: var(--campo-borda); }
.secao--cinza .faq__item summary::after { border-color: var(--campo-borda); }

/* ---------- perguntas frequentes (details) ---------- */
.faq { border-bottom: 1px solid var(--linha); }
.faq__item { border-top: 1px solid var(--linha); }
.faq__item summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 18px;
  min-height: 64px; padding: 16px 0; font-family: var(--fonte-titulo); font-weight: 700; font-size: clamp(18px, 1.6vw, 21px); line-height: 1.3;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+"; flex: none; width: 36px; height: 36px; display: grid; place-items: center;
  border: 1px solid var(--linha); border-radius: var(--canto); color: var(--ambar-escuro);
  font-size: 24px; font-weight: 600; line-height: 1; transition: background-color var(--rapido) var(--saida), border-color var(--rapido) var(--saida);
}
.faq__item[open] summary::after { content: "×"; background: var(--fundo); }
@media (hover: hover) { .faq__item summary:hover::after { border-color: var(--marinho); } }
.faq__item p { padding: 0 54px 24px 0; color: var(--texto-suave); font-size: 17px; max-width: 62ch; }

/* ---------- mostruario de um servico so: some a fila se for uma foto so ---------- */
.mostruario__fila:has(> .miniatura:only-child) { display: none; }
.mostruario__mais .link-seta { min-height: 44px; }

/* galeria completa */
.galeria > p { color: var(--texto-suave); font-size: 18px; }