/* =========================================================
   CAIO PRADO ARQUITETURA E INTERIORES
   Estrutura e escalas medidas na referência (Studio Roca),
   com a tipografia do design system do escritório.
   ========================================================= */

/* ---------- 0. TIPOGRAFIA ----------
   As fontes moram no proprio site, em /assets/fonts/.

   Antes vinham do Google. Parecia de graca, mas custava caro: o
   navegador tinha de resolver dois dominios novos (fonts.googleapis.com
   e fonts.gstatic.com), abrir conexao segura com cada um e so entao
   descobrir quais arquivos baixar -- tudo isso ANTES de desenhar a
   primeira letra na tela. Servidas daqui, chegam na mesma conexao que
   ja esta aberta, e ficam guardadas seis meses.

   Sao exatamente os mesmos cortes que o Google entregava, nos mesmos
   pesos, para o texto nao mudar de aparencia.

   font-display:swap -- o texto aparece de imediato na fonte do sistema
   e troca quando a definitiva chega. Melhor isso do que tela em branco.
   ---------- */
@font-face{font-family:'Montserrat';font-style:normal;font-weight:400;font-display:swap;
  src:url(/assets/fonts/montserrat-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:500;font-display:swap;
  src:url(/assets/fonts/montserrat-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:600;font-display:swap;
  src:url(/assets/fonts/montserrat-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:300;font-display:swap;
  src:url(/assets/fonts/poppins-latin-300-normal.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;
  src:url(/assets/fonts/poppins-latin-400-normal.woff2) format('woff2')}

/* ---------- 1. TOKENS ---------- */
:root{
  --black:#000000; --gray-900:#1a1a1a; --gray-700:#3d3d3d; --gray-500:#6e6e6e;
  --gray-400:#8f8f8f; --gray-300:#a7a7a7; --gray-200:#c9c9c9; --gray-100:#e4e4e4;
  --gray-50:#f4f4f4; --white:#ffffff;

  --rust-500:#a1543a; --rust-100:#f2e4de;
  --olive-500:#5f6b46; --olive-100:#e6e9de;
  --danger:#8c2f22; --success:#5f6b46;

  --font-display:'Montserrat',-apple-system,sans-serif;
  --font-body:'Poppins',-apple-system,sans-serif;

  /* medidas da referência */
  --container:1600px;
  --pad-x:48px;
  --grid-gap:20px;      /* grid de projetos */
  --stack-gap:70px;     /* respiro entre as fotos do projeto */
  /* Altura das fotos: desconta o cabeçalho e ainda tem teto absoluto,
     senão em monitor grande a foto fica gigante. */
  /* Tetos de altura em porcentagem da tela, não em pixels descontados.
     Com desconto fixo (100vh - 230px) a foto ENCOLHIA ao dar zoom, porque
     a tela diminui e os 230px não. Em vh a foto nunca diminui com o zoom. */
  --foto-max-h:min(78vh, 720px);
  --capa-h:min(66vh, 600px);
  --press-ar:16/9;      /* proporção dos itens da página de imprensa */
  --nav-size:14px;
  --label-size:10px;

  --space-section:clamp(56px,7vw,104px);
  --space-block:clamp(28px,3.5vw,48px);
  /* altura do cabeçalho aberto, usada como espaçador */
  --header-h:calc(72px + clamp(42px,4.4vw,64px));

  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--white);
  color:var(--black);
  font-family:var(--font-body);
  font-weight:300;
  font-size:15px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul{list-style:none;margin:0;padding:0}
:focus-visible{outline:2px solid var(--rust-500);outline-offset:3px}

/* ---------- 3. TIPOGRAFIA ---------- */
h1,h2,h3,h4{font-family:var(--font-display);font-weight:400;letter-spacing:-.02em;line-height:1.15;margin:0}

.t-lead{font-family:var(--font-display);font-size:clamp(19px,2.1vw,26px);font-weight:400;line-height:1.4;letter-spacing:-.015em;max-width:26ch}
.t-h2{font-size:clamp(18px,2vw,22px)}

/* Rótulos: caixa alta, 10px, SEM tracking — é o que define o ar da referência */
.label,.eyebrow{
  font-family:var(--font-display);
  font-size:var(--label-size);
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:0;
  display:block;
}
.eyebrow{color:var(--gray-500)}

p{margin:0 0 1.1em;max-width:60ch}
p:last-child{margin-bottom:0}
.muted{color:var(--gray-500)}
.small{font-size:13px}

/* ---------- 4. LAYOUT ---------- */
/* Duas larguras: o cabeçalho ocupa a tela quase cheia,
   o conteúdo fica num container de 1600px centralizado. */
.container{max-width:var(--container);margin-inline:auto;padding-inline:var(--pad-x)}
.container-wide{max-width:none;padding-inline:var(--pad-x)}

main{padding-top:var(--header-h)}
main:has(.hero){padding-top:0}

section{padding-block:var(--space-section)}
section.tight{padding-block:var(--space-block)}
section.flush{padding-block:0}

.cols-2{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,6fr);gap:clamp(24px,4vw,72px);align-items:start}
@media(max-width:860px){.cols-2{grid-template-columns:1fr;gap:24px}}

/* ---------- 5. CABEÇALHO ---------- */
.site-header{
  /* fora do fluxo: assim ele encolhe sem empurrar o conteúdo,
     que era o que fazia a página tremer ao rolar */
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:var(--white);
  padding-block:36px;
  transition:padding 400ms var(--ease);
}
.site-header::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--gray-200);opacity:0;transition:opacity 400ms var(--ease);
}
.site-header.solid{padding-block:18px}
.site-header.solid::after{opacity:1}

.site-header .container-wide{display:flex;align-items:center;justify-content:space-between;gap:32px}

.logo img{height:clamp(42px,4.4vw,64px);width:auto;transition:height 400ms var(--ease),filter 400ms var(--ease)}
.site-header.solid .logo img{height:clamp(34px,3.2vw,46px)}

/* Sobre o vídeo da home: logo branco e menu branco */
.site-header.over-dark:not(.solid){background:transparent}
.site-header.over-dark:not(.solid),
.site-header.over-dark:not(.solid) a{color:var(--white)}
.site-header.over-dark:not(.solid) .logo img{filter:brightness(0) invert(1)}
.site-header.over-dark:not(.solid) .nav-toggle span{background:var(--white)}
.site-header.over-dark:not(.solid)::after{opacity:0}

.nav ul{display:flex;align-items:center;gap:30px}
.nav a{
  font-family:var(--font-display);
  font-size:var(--nav-size);
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:0;
  position:relative;
  padding-bottom:3px;
}
.nav a::after{
  content:'';position:absolute;left:0;bottom:0;width:100%;height:1px;
  background:var(--rust-500);transform:scaleX(0);transform-origin:left;
  transition:transform 400ms var(--ease);
}
.nav a:hover::after{transform:scaleX(1)}
.nav a[aria-current="page"]{font-weight:600}

.nav .ig svg{width:19px;height:19px;display:block}
.nav .ig::after{display:none}

.nav-toggle{display:none;width:24px;height:15px;position:relative}
.nav-toggle span{position:absolute;left:0;width:100%;height:1px;background:var(--black);transition:transform .3s var(--ease),opacity .2s}
.nav-toggle span:nth-child(1){top:0}
.nav-toggle span:nth-child(2){top:50%}
.nav-toggle span:nth-child(3){top:100%}

@media(max-width:820px){
  :root{--pad-x:20px}
  .nav-toggle{display:block;z-index:101}
  .nav{position:fixed;inset:0;background:var(--white);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .4s var(--ease)}
  .nav.open{opacity:1;pointer-events:auto}
  .nav ul{flex-direction:column;gap:26px;text-align:center}
  .nav a{font-size:19px;color:var(--black)!important}
  body.nav-open{overflow:hidden}
  body.nav-open .nav-toggle span:nth-child(1){top:50%;transform:rotate(45deg);background:var(--black)}
  body.nav-open .nav-toggle span:nth-child(2){opacity:0}
  body.nav-open .nav-toggle span:nth-child(3){top:50%;transform:rotate(-45deg);background:var(--black)}
}

/* ---------- 6. HOME: vídeo em tela cheia, logo centralizado ---------- */
.hero{position:relative;height:100svh;min-height:520px;overflow:hidden;padding:0}
/* apenas os filhos diretos: senão esta regra captura o logo central */
.hero > img,.hero > video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero::after{content:'';position:absolute;inset:0;background:rgba(0,0,0,.18)}

/* Abertura em vídeo. O logo está gravado no próprio vídeo, então a home
   não tem logo nem no topo nem sobreposto — e o cabeçalho dela sai sem
   logo, com um bloco vazio no lugar para o menu continuar à direita. */
.logo-vazio{flex:0 0 auto}
.hero-poster,.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* o vídeo entra por cima da imagem de espera, sem salto */
.hero-video{opacity:0;transition:opacity 800ms var(--ease)}
.hero-video.tocando{opacity:1}
/* com "reduzir movimento" ligado no sistema, fica só a imagem */
@media(prefers-reduced-motion:reduce){.hero-video{display:none}}

/* Respiro padrão entre o cabeçalho e o conteúdo das páginas internas */
.topo-pagina{padding-top:clamp(40px,5vw,72px)}

/* ---------- 7. GRID DE PROJETOS ---------- */
.list-projects{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--grid-gap)}
.project a{display:block}
.project .media{overflow:hidden;background:var(--gray-100);aspect-ratio:3/2}
.project img{width:100%;height:100%;object-fit:cover;transition:transform 900ms var(--ease)}
.project a:hover img{transform:scale(1.02)}

/* Legenda embaixo da imagem, alinhada à direita */
.project .label{margin-top:8px;text-align:right;transition:color 300ms var(--ease)}
.project a:hover .label{color:var(--rust-500)}

@media(max-width:1000px){.list-projects{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.list-projects{grid-template-columns:1fr}}

/* ---------- 8. PÁGINA DE PROJETO ---------- */
/* A orientação da foto define o layout: horizontal ocupa a largura
   inteira, vertical ocupa metade — então duas verticais caem lado
   a lado sozinhas. Respiro de 70px, como na referência. */
.project-head{padding-top:var(--space-block);padding-bottom:var(--space-block)}

.breadcrumb{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-family:var(--font-display);font-size:var(--label-size);text-transform:uppercase;letter-spacing:0}
.breadcrumb a{color:var(--gray-500);transition:color 300ms var(--ease)}
.breadcrumb a:hover{color:var(--rust-500)}
.breadcrumb svg{width:9px;height:9px;color:var(--gray-400)}
.breadcrumb h1{font-family:var(--font-display);font-size:var(--label-size);font-weight:500;text-transform:uppercase;letter-spacing:0;margin:0}

/* Nenhuma foto passa da altura da tela: a imagem inteira sempre cabe,
   sem recorte e sem obrigar a rolar. A caixa encolhe junto com a foto,
   senão sobra um vão entre duas fotos em pé. */
.grid-roca{
  display:flex;
  flex-wrap:wrap;
  gap:var(--stack-gap);
  align-items:flex-start;
  justify-content:center;
}
/* a foto fica centrada dentro da caixa, senão sobra um vão de um lado só */
.grid-roca figure{margin:0;background:none;display:flex;justify-content:center}
.grid-roca img{
  display:block;
  max-height:var(--foto-max-h);
  max-width:100%;
  width:auto;
  height:auto;
}

/* deitada: ocupa a linha e fica centrada */
.grid-roca .horz{width:100%;display:flex;justify-content:center}

/* em pé: a caixa tem o tamanho da foto, com teto de meia linha */
.grid-roca .vert{flex:0 1 auto;max-width:calc((100% - var(--stack-gap)) / 2)}

/* Capa do projeto: faixa larga, no mesmo espírito da referência */
.capa-projeto{margin:0 0 var(--stack-gap);overflow:hidden;background:var(--gray-100)}
/* A faixa da capa corta a foto. Por padrao o corte e centralizado; quando
   a parte de baixo da foto nao interessa (piso, sombra), a figura declara
   --capa-foco com uma porcentagem: 0% encosta no topo, 50% centraliza. */
.capa-projeto img{width:100%;height:var(--capa-h);object-fit:cover;display:block;
  object-position:var(--capa-foco, center)}

@media(max-width:820px){
  :root{--stack-gap:28px;--capa-h:min(50vh, 420px)}
  /* uma foto por linha: no celular duas em pé lado a lado ficavam
     com 161px de largura. O max-width precisa ser anulado aqui,
     senão ele vence o width e a foto continua com meia linha. */
  .grid-roca .vert{width:100%;max-width:100%}
}

/* Identificação do projeto: título à esquerda, ficha à direita */
.proj-id{
  display:flex;
  justify-content:space-between;
  gap:clamp(24px,5vw,80px);
  align-items:flex-start;
  padding-block:var(--space-block);
}
.proj-id .eyebrow{margin-bottom:8px}
.proj-id h1{
  font-family:var(--font-display);
  font-size:clamp(26px,3.4vw,40px);
  font-weight:400;
  letter-spacing:-.02em;
  margin:0;
}
.proj-ficha{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,max-content));
  gap:8px 48px;
  text-align:right;
  justify-content:end;
}
.proj-ficha dt{
  font-family:var(--font-display);
  font-size:var(--label-size);
  text-transform:uppercase;
  color:var(--gray-500);
  margin:0 0 2px;
}
.proj-ficha dd{margin:0;font-size:14px;line-height:1.5}

@media(max-width:820px){
  .proj-id{flex-direction:column;gap:24px}
  .proj-ficha{text-align:left;justify-content:start}
}

/* Ficha técnica em linha (uso alternativo) */
.ficha-linha{display:flex;flex-wrap:wrap;gap:8px 28px;padding-top:16px;border-top:1px solid var(--gray-200);font-family:var(--font-display);font-size:var(--label-size);text-transform:uppercase;color:var(--gray-500)}
.ficha-linha b{font-weight:500;color:var(--black)}

.status{display:inline-block;font-family:var(--font-display);font-size:var(--label-size);text-transform:uppercase;padding:1px 7px;border:1px solid currentColor;color:var(--olive-500)}
.status.executing{color:var(--rust-500)}

/* ---------- 9. ESCRITÓRIO: foto e texto lado a lado ---------- */
/* Medidas da referência: container de 1280px, duas colunas iguais com
   150px de respiro, foto em 3:2 à esquerda e texto à direita.
   A foto não é recortada em faixa larga — isso cortava o rosto. */
.duas-colunas{
  align-items:stretch;
  max-width:1260px;          /* largura útil da referência */
  box-sizing:content-box;    /* o recuo lateral fica por fora */
  margin-inline:auto;
  padding-inline:var(--pad-x);
  display:flex;
  gap:150px;
  align-items:flex-start;
}
.duas-colunas > *{flex:1 1 0;min-width:0}

/* mesma caixa das duas colunas, para blocos de largura cheia */
.wrap-1260{max-width:1260px;box-sizing:content-box;margin-inline:auto;padding-inline:var(--pad-x)}

/* A foto acompanha a altura do texto ao lado. Fica em posição absoluta
   para não empurrar o layout, e o enquadramento puxa para o alto, de
   modo que o rosto nunca seja cortado. */
.duas-colunas figure{
  margin:0;
  position:relative;
  overflow:hidden;
  background:var(--gray-100);
  align-self:stretch;
  min-height:420px;
}
.duas-colunas figure img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  object-position:center 25%;
  display:block;
}

.prosa p{font-size:16px;line-height:1.6;margin-bottom:25px;max-width:none}
.prosa p:last-child{margin-bottom:0}

@media(max-width:900px){
  .duas-colunas{flex-direction:column;gap:32px}
  /* empilhado, a base 0 do flex zerava a altura da foto */
  .duas-colunas > *{flex:0 0 auto;width:100%}
}

/* ---------- 10. SERVIÇOS ---------- */
.services{border-top:1px solid var(--gray-200)}
.service-row{display:grid;grid-template-columns:44px minmax(0,4fr) minmax(0,6fr);gap:clamp(14px,3vw,48px);padding-block:clamp(22px,2.8vw,38px);border-bottom:1px solid var(--gray-200);align-items:start}
.service-row .num{font-family:var(--font-display);font-size:var(--label-size);color:var(--gray-300);padding-top:6px;font-variant-numeric:tabular-nums}
.service-row .more{display:inline-block;margin-top:14px;font-family:var(--font-display);font-size:var(--label-size);text-transform:uppercase;border-bottom:1px solid var(--rust-500);padding-bottom:3px;color:var(--rust-500)}
@media(max-width:860px){.service-row{grid-template-columns:1fr;gap:8px}.service-row .num{padding-top:0}}

/* links dentro do texto corrido: fio fino que acende no rust */
.prosa a{
  border-bottom:1px solid var(--gray-300);
  padding-bottom:1px;
  transition:color 300ms var(--ease),border-color 300ms var(--ease);
}
.prosa a:hover{color:var(--rust-500);border-color:var(--rust-500)}

/* ---------- 11. DEPOIMENTOS ---------- */
/* Depoimentos: título com peso, textos completos, grade que se
   reorganiza sozinha conforme a quantidade. */

/* Os depoimentos começam um assunto novo, não são continuação do texto
   do escritório. O espaço acima é bem maior que o de um bloco comum.
   Para mudar o respiro, altere só o padding-top abaixo. */
.sec-depoimentos{
  padding-top:clamp(96px,11vw,180px);
  padding-bottom:var(--space-section);
}
.t-depoimentos{
  font-family:var(--font-display);
  font-size:clamp(22px,2.6vw,30px);
  font-weight:400;
  letter-spacing:-.02em;
  margin:0 0 clamp(28px,3.5vw,48px);
}

.quotes{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:clamp(32px,4vw,64px);
  align-items:start;
}
.quotes blockquote{margin:0;padding-top:22px;border-top:1px solid var(--gray-300)}
.quotes p{font-size:15px;line-height:1.75;color:var(--gray-700);max-width:none}
.quotes cite{
  display:block;margin-top:18px;font-style:normal;
  font-family:var(--font-display);font-size:var(--label-size);
  text-transform:uppercase;color:var(--gray-500);
}

/* página só de depoimentos, linkada a partir do Sobre */
.sec-depo-pagina{padding-block:var(--space-section)}

/* Na página de depoimentos os textos têm tamanhos muito diferentes —
   um deles tem cinco parágrafos. Em grade, a fileira inteira ganha a
   altura do maior e sobra vão embaixo dos curtos. Em colunas, eles
   fluem e o navegador equilibra as alturas sozinho. */
.sec-depo-pagina .quotes{
  display:block;
  column-count:3;
  column-gap:clamp(32px,4vw,64px);
}
.sec-depo-pagina .quotes blockquote{
  break-inside:avoid;
  -webkit-column-break-inside:avoid;
  margin-bottom:clamp(36px,4vw,60px);
  display:inline-block;width:100%;
}
.sec-depo-pagina .quotes p + p{margin-top:12px}
@media(max-width:1100px){.sec-depo-pagina .quotes{column-count:2}}
@media(max-width:700px){.sec-depo-pagina .quotes{column-count:1}}
.depo-fonte{
  font-size:14px;color:var(--gray-500);
  margin:0 0 clamp(36px,4vw,56px);
}
.depo-fonte a{border-bottom:1px solid var(--gray-300);padding-bottom:2px;white-space:nowrap;
  transition:color 300ms var(--ease),border-color 300ms var(--ease)}
.depo-fonte a:hover{color:var(--rust-500);border-color:var(--rust-500)}

.depo-rodape{margin:clamp(48px,5vw,72px) 0 0}
.link-seta{
  font-family:var(--font-display);font-size:var(--label-size);
  text-transform:uppercase;letter-spacing:.08em;
  border-bottom:1px solid var(--rust-500);padding-bottom:3px;
  color:var(--rust-500);
  white-space:nowrap;
  transition:opacity 300ms var(--ease);
}
.link-seta:hover{opacity:.7}

/* ---------- 12. IMPRENSA ---------- */
/* Medidas da referência: 3 colunas, gap 115px na vertical e 140px na
   horizontal, imagem em altura natural (sem recorte) e legenda em
   16px caixa baixa, alinhada à direita. */
.press-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:115px 140px;
  align-items:start;
}

.press-item{display:block}

/* Todos os itens na mesma proporção, para a fileira ficar alinhada
   mesmo misturando página de revista com capa de vídeo.
   Para mudar, troque --press-ar no topo do arquivo. */
.press-img{
  position:relative;
  overflow:hidden;
  background:none;
  aspect-ratio:var(--press-ar);
}

/* marcador de play: distingue vídeo e podcast de publicação impressa */
.press-play{
  position:absolute;inset:0;z-index:2;
  display:grid;place-items:center;
  pointer-events:none;
}
.press-play svg{
  width:54px;height:54px;
  padding:14px;
  border-radius:50%;
  background:rgba(0,0,0,.55);
  color:var(--white);
  transition:background 300ms var(--ease),transform 300ms var(--ease);
}
a.press-item:hover .press-play svg{background:var(--rust-500);transform:scale(1.06)}
/* contain: a peça aparece inteira, sem corte, dentro da mesma caixa */
.press-img img{
  width:100%;height:100%;
  object-fit:contain;
  display:block;
  transition:transform 900ms var(--ease);
}
a.press-item:hover .press-img img{transform:scale(1.02)}

.press-veiculo{
  padding-top:15px;
  font-family:var(--font-body);
  font-size:16px;
  font-weight:400;
  text-transform:none;
  letter-spacing:0;
  text-align:right;
  transition:color 300ms var(--ease);
}
a.press-item:hover .press-veiculo{color:var(--rust-500)}

/* Linha extra que a referência não tem: título e ano.
   É o que dá contexto ao buscador e às IAs, sem pesar na tela. */
.press-meta{
  text-align:right;
  font-size:12px;
  line-height:1.5;
  color:var(--gray-500);
  margin-top:2px;
}

@media(max-width:1100px){.press-grid{grid-template-columns:repeat(2,1fr);gap:72px 64px}}
@media(max-width:640px){.press-grid{grid-template-columns:1fr;gap:56px}}

/* ---------- 13. CONTATO ---------- */
/* Medidas da referência: painel de meia tela. Conteúdo à esquerda com
   100px de recuo, imagem à direita sangrando até a borda da tela. */
/* O painel acompanha o container do resto do site em vez de ocupar a
   largura solta da tela. Solto, em monitor largo a coluna de texto
   inchava ate 50% da tela e abria um vao enorme ate a imagem. */
.half-panel{display:flex;align-items:stretch;gap:80px;
  max-width:var(--container);margin-inline:auto;padding-inline:var(--pad-x)}

/* o texto absorve a sobra; a imagem tem largura propria */
.half-panel .painel-texto{flex:1 1 auto;min-width:0;max-width:none;padding:0}
/* linha de leitura curta mesmo quando a coluna e larga */
.contato-dados p{max-width:560px}
/* A imagem acompanha a altura do texto ao lado. Ela fica em posição
   absoluta para não empurrar o layout com a própria altura. */
.half-panel{align-items:stretch}
/* A imagem nao sangra mais ate a borda e nao acompanha mais a altura
   do texto ao lado. Esticada, ela virava um retangulo deitado em tela
   larga e o recorte saia acidental. Agora a caixa tem proporcao propria
   -- 3:4, a mesma em que a foto foi cortada --, largura com teto e
   respiro na direita. Precisa sair da regra dos 50% da linha de cima,
   senao a margem empurraria a caixa para fora da tela. */
.half-panel .painel-img{position:relative;overflow:hidden;background:var(--gray-100);
  flex:0 0 clamp(380px, 46%, 680px);max-width:none;
  align-self:stretch;          /* volta a terminar junto com o texto */
  margin:0}
.half-panel .painel-img img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;display:block;
}

.contato-dados p{font-size:16px;line-height:1.6;margin-bottom:22px;max-width:none}
.contato-dados a{border-bottom:1px solid transparent;transition:border-color 300ms var(--ease)}
.contato-dados a:hover{border-color:var(--rust-500)}

/* Formulário: 400px de largura, rótulo acima, linha fina embaixo */
.form-contato{max-width:400px;margin-top:40px}
.form-contato label{
  display:block;font-family:var(--font-display);font-size:var(--label-size);
  text-transform:uppercase;letter-spacing:0;color:var(--gray-500);
  margin:22px 0 0;   /* respiro entre a linha do campo anterior e o rótulo */
}
.form-contato label:first-of-type{margin-top:0}
.form-contato input,.form-contato textarea{
  width:100%;font-family:var(--font-body);font-size:16px;font-weight:300;
  padding:15px 0;background:none;border:0;border-bottom:1px solid var(--black);
  color:var(--black);transition:border-color 300ms var(--ease);
}
.form-contato input:focus,.form-contato textarea:focus{outline:none;border-bottom-color:var(--rust-500)}
.form-contato textarea{resize:vertical;min-height:120px}

/* Botão: só texto sublinhado, como na referência */
.form-contato .enviar{
  display:block;width:100%;margin-top:8px;padding:15px 0;
  font-family:var(--font-display);font-size:14px;text-transform:uppercase;
  letter-spacing:0;color:var(--black);background:none;border:0;
  text-align:center;cursor:pointer;transition:color 300ms var(--ease);
}
.form-contato .enviar span{border-bottom:1px solid currentColor;padding-bottom:2px}
.form-contato .enviar:hover{color:var(--rust-500)}

@media(max-width:900px){
  .half-panel{flex-direction:column}
  .half-panel > *{flex:1 1 auto;max-width:none}
  .half-panel{gap:0;padding-inline:0}
  .half-panel .painel-texto{padding:0 var(--pad-x) 40px}
  /* empilhado, a imagem precisa de altura própria: o container define */
  .half-panel .painel-img{aspect-ratio:4/3;flex:1 1 auto;margin:0}
}

/* ---------- 13b. FORMULÁRIO GENÉRICO ---------- */
.form-grid{display:grid;gap:18px;max-width:520px}
label{display:block;font-family:var(--font-display);font-size:var(--label-size);text-transform:uppercase;color:var(--gray-500);margin-bottom:6px}
input,textarea,select{width:100%;font-family:var(--font-body);font-size:15px;font-weight:300;padding:10px 0;background:none;border:0;border-bottom:1px solid var(--gray-300);color:var(--black);transition:border-color 300ms var(--ease)}
input:focus,textarea:focus,select:focus{outline:none;border-bottom-color:var(--rust-500)}
textarea{resize:vertical;min-height:92px}

.btn{display:inline-block;font-family:var(--font-display);font-size:var(--label-size);text-transform:uppercase;padding:13px 26px;background:var(--rust-500);color:var(--white);transition:background 300ms var(--ease)}
.btn:hover{background:var(--gray-900)}
.btn-ghost{background:none;border:1px solid var(--gray-300);color:var(--black)}
.btn-ghost:hover{background:var(--gray-900);border-color:var(--gray-900);color:var(--white)}

/* ---------- 14. RODAPÉ ---------- */
.site-footer{padding-top:var(--space-section);padding-bottom:48px;font-size:var(--label-size);line-height:2.1}
/* o rodapé usa a mesma largura do cabeçalho: tela cheia com o mesmo recuo */
/* Na home o rodapé vem logo depois da imagem de tela cheia:
   sem isso sobra um vão branco grande. */
main:has(.hero) + .site-footer{padding-top:36px}
.site-footer .rule{height:1px;background:var(--gray-200);border:0;margin:0 0 14px}
.site-footer a{border-bottom:1px solid transparent;transition:border-color 300ms var(--ease)}
.site-footer a:hover{border-color:var(--gray-400)}
.site-footer .legal{color:var(--gray-500);margin-top:6px}

/* ---------- Botões flutuantes (canto inferior direito) ----------
   O WhatsApp fica embaixo, sempre visível. O voltar-ao-topo aparece
   acima dele depois que a página rola. */
.whats{
  position:fixed;
  right:28px;bottom:28px;
  width:54px;height:54px;
  border-radius:50%;
  background:var(--gray-900);   /* troque por #25D366 para o verde do WhatsApp */
  color:var(--white);
  display:grid;place-items:center;
  box-shadow:0 4px 16px rgba(0,0,0,.18);
  transition:background 300ms var(--ease),transform 300ms var(--ease);
  z-index:95;
}
.whats:hover{background:#25D366;transform:translateY(-2px)}
.whats svg{width:27px;height:27px}

.to-top{
  position:fixed;
  right:35px;bottom:94px;      /* logo acima do botão do WhatsApp */
  width:40px;height:40px;
  background:var(--gray-900);color:var(--white);
  display:grid;place-items:center;
  opacity:0;pointer-events:none;
  transition:opacity 400ms var(--ease),background 300ms var(--ease);
  z-index:90;
}
.to-top.show{opacity:1;pointer-events:auto}
.to-top:hover{background:var(--rust-500)}
.to-top svg{width:13px;height:13px}

@media(max-width:560px){
  .whats{right:18px;bottom:18px;width:50px;height:50px}
  .whats svg{width:25px;height:25px}
  .to-top{right:23px;bottom:80px}
}

/* ---------- 15. MOVIMENTO ---------- */
/* O conteúdo nasce visível. Só esconde quando o JavaScript confirma
   que vai animar — assim nada some se o script falhar. */
.js .reveal{opacity:0;transform:translateY(16px);transition:opacity 900ms var(--ease),transform 900ms var(--ease)}
.js .reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}

/* ---------- 16. UTILITÁRIOS ---------- */
.skip{position:absolute;left:-9999px;background:var(--gray-900);color:var(--white);padding:12px 20px;z-index:200}
.skip:focus{left:12px;top:12px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- 17. ÁLBUM (foto em tela cheia) ---------- */
/* O JavaScript monta esta caixa sozinho, não há nada dela no HTML.
   Sem JavaScript a galeria continua igual, apenas sem a ampliação. */

.clicavel{cursor:zoom-in}
.clicavel:focus-visible{outline:2px solid var(--rust-500);outline-offset:6px}

/* Sinal de que a foto abre. Fica POR CIMA da foto, nunca mexendo nela:
   na galeria do projeto a foto aparece inteira, sem caixa que corte,
   então crescer empurraria o layout e escurecer estragaria a foto —
   que é o que o site existe para mostrar.
   Para tirar o ícone, apague deste bloco até o fim da seção. */
.grid-roca .foto{position:relative;display:block;line-height:0;max-width:100%}

.lupa{
  position:absolute;right:14px;bottom:14px;
  width:40px;height:40px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(12,12,12,.5);color:var(--white);
  opacity:0;transform:translateY(6px);
  pointer-events:none;
  transition:opacity 320ms var(--ease),transform 320ms var(--ease),background 320ms var(--ease);
}
.lupa svg{width:17px;height:17px}

/* mouse: aparece ao passar por cima */
@media(hover:hover){
  .clicavel:hover .lupa{opacity:1;transform:none;background:rgba(12,12,12,.68)}
}
/* toque: não existe passar o mouse, então o sinal fica sempre,
   discreto — senão ninguém descobre que a foto abre */
@media(hover:none){
  .lupa{opacity:.7;transform:none}
}
/* teclado */
.clicavel:focus-visible .lupa{opacity:1;transform:none}

@media(max-width:560px){
  .lupa{right:10px;bottom:10px;width:34px;height:34px}
  .lupa svg{width:15px;height:15px}
}

/* a página não rola por trás enquanto o álbum está aberto */
body.lb-aberto{overflow:hidden}

.lb{
  position:fixed;inset:0;z-index:300;
  /* fundo fechado: com fundo vazado o menu e os botões flutuantes
     apareciam por trás e poluíam a foto */
  background:#0b0b0b;
  opacity:0;
  transition:opacity 260ms var(--ease);
}
.lb.on{opacity:1}
.lb[hidden]{display:none}

.lb-palco{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  padding:clamp(30px,5vh,60px) clamp(76px,9vw,130px);
  box-sizing:border-box;
}
.lb-palco picture{display:contents}
.lb-palco img{
  max-width:100%;max-height:100%;
  width:auto;height:auto;
  display:block;object-fit:contain;
}

.lb button{
  position:absolute;z-index:2;
  display:grid;place-items:center;
  background:none;border:0;padding:0;cursor:pointer;
  color:rgba(255,255,255,.72);
  transition:color 250ms var(--ease),transform 250ms var(--ease);
}
.lb button:hover{color:var(--white)}
.lb button:focus-visible{outline:2px solid var(--white);outline-offset:4px}

.lb-fechar{top:20px;right:24px;width:46px;height:46px}
.lb-fechar svg{width:21px;height:21px}

.lb-ant,.lb-prox{top:50%;transform:translateY(-50%);width:58px;height:58px}
.lb-ant{left:12px}
.lb-prox{right:12px}
.lb-ant svg,.lb-prox svg{width:30px;height:30px}
.lb-ant:hover{transform:translateY(-50%) translateX(-3px)}
.lb-prox:hover{transform:translateY(-50%) translateX(3px)}

.lb-conta{
  position:absolute;left:0;right:0;bottom:20px;
  text-align:center;pointer-events:none;
  font-family:var(--font-display);font-size:var(--label-size);
  text-transform:uppercase;letter-spacing:.08em;
  color:rgba(255,255,255,.55);
}

/* foto única: não há o que passar */
.lb.unica .lb-ant,
.lb.unica .lb-prox,
.lb.unica .lb-conta{display:none}

/* No celular quem passa é o dedo, então as setas saem e a foto
   ganha a largura que elas ocupavam. */
@media(max-width:700px){
  /* precisa do .lb na frente: a regra .lb button acima define display
     e venceria um seletor de uma classe só, mesmo dentro da media query */
  .lb .lb-ant,.lb .lb-prox{display:none}
  .lb-palco{padding:66px 14px 54px}
  .lb-fechar{top:12px;right:12px}
}


/* Recado de erro do formulario de contato. Fica escondido por padrao;
   o main.js revela quando a URL traz ?erro=1 ou ?erro=2. */
.form-aviso{
  margin-bottom:22px;padding:12px 16px;
  border-left:2px solid var(--rust-500);
  background:var(--gray-100);
  font-size:15px;line-height:1.5;color:var(--black);max-width:520px;
}
.form-aviso[hidden]{display:none}