/* =========================================================================
   Galeria Frammer — sistema de design
   HTML/CSS/JS puro, sem build. Abre com dois cliques.

   Tema claro: branco quente, marrom claro (areia) e terracota de acento.
   Os tons vêm da cartela da marca — #C96A25, #A7510F, #863B0A, #C5AE96,
   #A5927E, #897868, #6E5B48.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  /* superfícies */
  --branco:       #FFFFFF;
  --papel:        #FCF9F5;   /* branco quente, fundo padrão */
  --areia:        #F3EADD;   /* marrom claro, seções alternadas */
  --areia-forte:  #E8DAC7;
  --escuro:       #33261C;   /* marrom profundo — rodapé e blocos de contraste */
  --escuro-alto:  #43332A;
  --marrom-medio: #6F5440;   /* marrom quente da amostra do Marcus */

  /* Os mesmos marrons em componentes r,g,b — véus de degradê precisam de
     rgba(), e não dá para tirar transparência de um hex em CSS puro.       */
  --escuro-rgb:       51,38,28;
  --marrom-medio-rgb: 111,84,64;
  --terra-rgb:        167,81,15;
  /* cor da faixa em que o bloco está: é o que os véus usam para fundir */
  --faixa-rgb:        var(--escuro-rgb);

  /* texto */
  --tinta:        #2E211A;
  --tinta-suave:  #6E5B48;
  --tinta-fraca:  #897868;   /* só para texto secundário grande */
  --sobre-foto:   #FFFFFF;   /* não inverte com o tema */

  /* linhas */
  --linha:        #E7DBCB;
  --linha-forte:  #C5AE96;

  /* terracota */
  --terra:        #A7510F;
  --terra-claro:  #C96A25;
  --terra-suave:  #F8AE61;
  --terra-escuro: #863B0A;
  --terra-fundo:  #F7E9DA;

  /* verde de "no ar" — o selo de episódio novo */
  --verde:        #25D366;
  --verde-escuro: #06371E;

  /* medidas */
  --largura:      1240px;
  --largura-texto:760px;
  --raio:         14px;
  --raio-g:       22px;
  --header-h:     108px;

  --sombra:       0 24px 60px rgba(51,38,28,.16);
  --sombra-sutil: 0 10px 30px rgba(51,38,28,.10);
  /* cards com foto não têm contorno: quem separa do fundo é a sombra */
  --sombra-card:  0 3px 8px rgba(51,38,28,.05), 0 12px 28px rgba(51,38,28,.09);
  --sombra-card-alta: 0 6px 14px rgba(51,38,28,.07), 0 22px 46px rgba(51,38,28,.15);
  /* sobre o marrom a sombra precisa de mais peso para existir */
  --sombra-card-escura: 0 4px 10px rgba(14,9,5,.24), 0 16px 38px rgba(14,9,5,.30);
  --sombra-card-escura-alta: 0 8px 18px rgba(14,9,5,.30), 0 26px 56px rgba(14,9,5,.38);

  color-scheme: light;
}

/* ---------------------------------------------------------------- base -- */

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 16px); }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation:none !important; transition:none !important; }
}

body{
  margin:0;
  background:var(--papel);
  color:var(--tinta);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:16.5px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }

h1,h2,h3,h4{
  font-family:'Fraunces',Georgia,serif;
  font-weight:600;
  line-height:1.12;
  margin:0;
  letter-spacing:-.015em;
}
h1{ font-size:clamp(2.6rem,7vw,5.4rem); }
h2{ font-size:clamp(1.9rem,3.6vw,3rem); }
h3{ font-size:clamp(1.15rem,1.7vw,1.5rem); }
p{ margin:0 0 1.05em; }
p:last-child{ margin-bottom:0; }

::selection{ background:var(--terra-suave); color:#3A1E08; }

:focus-visible{ outline:2px solid var(--terra); outline-offset:3px; border-radius:4px; }

.pular{
  position:absolute; left:-9999px; top:0; z-index:300;
  background:var(--terra); color:#fff; padding:12px 18px;
  border-radius:0 0 10px 0; font-weight:600;
}
.pular:focus{ left:0; }

/* ------------------------------------------------------------ estrutura -- */

.env{ width:100%; max-width:var(--largura); margin:0 auto; padding:0 26px; }
.env-estreito{ max-width:880px; }
/* a galeria pede mais respiro: mais obras por linha na mesma tela */
.env-largo{ max-width:1620px; }

.secao{ padding:clamp(68px,8.5vw,124px) 0; position:relative; }
.secao-curta{ padding:clamp(48px,5.5vw,78px) 0; position:relative; }
.secao--areia{ background:var(--areia); }
.secao--branco{ background:var(--branco); }
.secao--escuro{ background:var(--escuro); color:#F6EFE7; }
/* mesma família do .secao--escuro, só que no marrom mais claro da amostra.
   Usar as duas classes juntas herda todo o tratamento de texto claro.   */
.secao--marrom{ background:var(--marrom-medio); --faixa-rgb:var(--marrom-medio-rgb); }

/* Faixa no terracota do botão. O terracota é mais claro que os marrons, então
   o texto precisa clarear junto — os cremes do tema escuro não alcançam
   contraste suficiente sobre ele.                                          */
.secao--terracota{ background:var(--terra); --faixa-rgb:var(--terra-rgb); }
.secao--terracota p,
.secao--terracota .cabeca-secao p,
.secao--terracota .olho{ color:#FFEEDC; }
.secao--terracota .rotulo{ color:#FFE0C2; }
.secao--terracota .rotulo::before{ background:#FFE0C2; }
.secao--terracota .lista li{ color:#FFEEDC; }
.secao--terracota .lista svg{ color:#FFE0C2; }
.secao--terracota .link-seta{ color:#FFF3E8; }
.secao--terracota .mono{ color:#FBDCC2; }
.secao--terracota .numeros div{ background:var(--terra); }
.secao--terracota .numeros b{ color:#FFF3E8; }
.secao--terracota .btn--linha{ border-color:rgba(255,255,255,.45); color:#FFF8F0; }
.secao--terracota .btn--linha:hover{ border-color:#fff; background:rgba(0,0,0,.16); color:#fff; }
.secao--terracota .btn--acento{ background:var(--papel); color:var(--terra-escuro); }
.secao--terracota .btn--acento:hover{ background:#fff; }
.secao--terracota .editavel{
  background:rgba(0,0,0,.30); color:#FFEBD5; border-bottom-color:#FFD9B4;
}
/* sobre o terracota o rótulo do convidado ficava apagado no laranja-claro */
.secao--terracota .convidado__papel{ color:#FFE2C6; }
.secao--terracota .convidado__resumo{ color:#FBEADB; }
.secao--escuro h2,.secao--escuro h3{ color:#FFF8F0; }
.secao--escuro p{ color:#E0D2C4; }

.regua{ border:0; border-top:1px solid var(--linha); margin:0; }

.rotulo{
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:.72rem; letter-spacing:.19em; text-transform:uppercase;
  color:var(--terra); display:flex; align-items:center; gap:10px; margin:0 0 16px;
}
.rotulo::before{ content:''; width:28px; height:1px; background:var(--terra-claro); flex:none; }
.rotulo--centro{ justify-content:center; }
.secao--escuro .rotulo{ color:var(--terra-suave); }
.secao--escuro .rotulo::before{ background:var(--terra-suave); }

.cabeca-secao{ max-width:680px; margin-bottom:clamp(36px,4.5vw,58px); }
.cabeca-secao.centro{ margin-left:auto; margin-right:auto; text-align:center; }
.cabeca-secao.centro .rotulo{ justify-content:center; }
.cabeca-secao p{ color:var(--tinta-suave); font-size:1.08rem; margin-top:18px; }

.olho{ color:var(--tinta-suave); font-size:1.08rem; }
.mono{ font-family:'IBM Plex Mono',ui-monospace,monospace; }
.acento{ color:var(--terra); }

/* ---------------------------------------------------------------- botão -- */

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:14px 28px; border-radius:999px; border:1px solid transparent;
  font-weight:600; font-size:.95rem; line-height:1;
  text-decoration:none; cursor:pointer;
  transition:transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); }
.btn svg{ width:17px; height:17px; flex:none; }

.btn--acento{ background:var(--terra); color:#fff; box-shadow:0 6px 20px rgba(167,81,15,.24); }
.btn--acento:hover{ background:var(--terra-escuro); }

.btn--linha{ border-color:var(--linha-forte); color:var(--tinta); background:transparent; }
.btn--linha:hover{ border-color:var(--terra); color:var(--terra); background:var(--terra-fundo); }

.btn--claro{ background:#fff; color:var(--tinta); }
.btn--claro:hover{ background:var(--areia); }

.btn--peq{ padding:11px 20px; font-size:.87rem; }

.grupo-btn{ display:flex; flex-wrap:wrap; gap:13px; }

.link-seta{
  display:inline-flex; align-items:center; gap:8px;
  color:var(--terra); text-decoration:none; font-weight:600; font-size:.92rem;
}
.link-seta svg{ width:15px; height:15px; transition:transform .18s ease; }
.link-seta:hover svg{ transform:translateX(4px); }
.secao--escuro .link-seta{ color:var(--terra-suave); }

/* --------------------------------------------------------------- header -- */
/* Transparente sobre a imagem do topo; vira sólido claro ao rolar.          */

.topo{
  position:fixed; inset:0 0 auto 0; z-index:200;
  height:var(--header-h);
  display:flex; align-items:center;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background .3s ease, border-color .3s ease, height .3s ease, box-shadow .3s ease;
}
.topo::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to bottom, rgba(28,19,13,.55), rgba(28,19,13,0));
  transition:opacity .3s ease;
}
/* Ao rolar, a barra assume o mesmo marrom das faixas que vêm depois das
   imagens de destaque. O botão fica terracota: contrasta com o marrom e é o
   único ponto de cor da barra.                                             */
.topo.fixo{
  background:var(--escuro);
  border-bottom-color:rgba(255,255,255,.10);
  height:82px;
  box-shadow:0 6px 26px rgba(24,16,11,.28);
}
.topo.fixo::before{ opacity:0; }
.topo.fixo .nav > a.btn--acento,
.topo.fixo .nav a.btn--acento{
  background:var(--terra-claro); color:#fff;
  box-shadow:0 4px 16px rgba(0,0,0,.28);
}
.topo.fixo .nav a.btn--acento:hover{ background:var(--terra-suave); color:#3A1E08; }

/* Com um mega menu aberto a barra toda assume o terracota do painel, para
   os dois lerem como uma peça só.                                          */
.topo.menu-aberto{ background:var(--terra); border-bottom-color:rgba(0,0,0,.14); }
.topo.menu-aberto::before{ opacity:0; }
.topo.menu-aberto .marca span{ color:#FFF6EC; text-shadow:none; }
.topo.menu-aberto .nav > a,
.topo.menu-aberto .nav .suspenso > a,
.topo.menu-aberto .acao-topo{ color:rgba(255,255,255,.92); text-shadow:none; }
.topo.menu-aberto .nav > a:hover,
.topo.menu-aberto .nav .suspenso > a:hover,
.topo.menu-aberto .acao-topo:hover{ background:rgba(0,0,0,.18); color:#fff; }
.topo.menu-aberto .suspenso.aberto > a{ background:rgba(0,0,0,.22); }
.topo.menu-aberto .nav a[aria-current="page"]{ color:#fff; background:rgba(0,0,0,.18); }
.topo.menu-aberto .idiomas button{ color:rgba(255,255,255,.72); text-shadow:none; }
.topo.menu-aberto .idiomas button:hover{ color:#fff; background:rgba(0,0,0,.18); }
.topo.menu-aberto .idiomas button[aria-current="true"]{ color:#fff; background:rgba(0,0,0,.24); }
.topo.menu-aberto .hamburguer{ background:rgba(0,0,0,.16); border-color:rgba(255,255,255,.4); }
/* sobre o terracota o botão precisa inverter para continuar destacado */
.topo.menu-aberto .nav a.btn--acento{
  background:var(--papel); color:var(--terra-escuro); box-shadow:0 4px 14px rgba(0,0,0,.2);
}
.topo.menu-aberto .nav a.btn--acento:hover{ background:#fff; color:var(--terra-escuro); }

.topo .env{ display:flex; align-items:center; gap:26px; position:relative; z-index:2; }

/* -- marca: a logo completa, inteira, sem contorno nem recorte --
   O arquivo já traz o disco e a tipografia ("Galeria FRAMMER FINEART") sobre
   fundo transparente, então nada de border-radius, fundo ou anel em volta:
   a marca aparece exatamente como foi desenhada.                            */
.marca{
  display:flex; align-items:center;
  text-decoration:none; margin-right:auto; flex:none;
}
.marca img{
  height:86px; width:auto;
  border-radius:0; background:none; box-shadow:none;
  transition:height .3s ease;
}
.topo.fixo .marca img{ height:62px; }

/* -- navegação -- */
.nav{ display:flex; align-items:center; gap:2px; }
.nav > a,
.nav .suspenso > a{
  display:flex; align-items:center; gap:6px;
  padding:10px 15px; border-radius:10px;
  text-decoration:none; font-size:.96rem; font-weight:500;
  color:rgba(255,255,255,.92);
  text-shadow:0 1px 10px rgba(0,0,0,.35);
  transition:color .2s ease, background .2s ease;
  white-space:nowrap;
}
.nav > a:hover,.nav .suspenso > a:hover{ background:rgba(255,255,255,.14); color:#fff; }
.topo.fixo .nav > a,
.topo.fixo .nav .suspenso > a{ color:rgba(255,255,255,.9); text-shadow:none; }
.topo.fixo .nav > a:hover,
.topo.fixo .nav .suspenso > a:hover{ background:rgba(255,255,255,.09); color:#fff; }
.nav a[aria-current="page"]{ color:#fff; font-weight:600; }
.topo.fixo .nav a[aria-current="page"]{ color:var(--terra-suave); background:rgba(255,255,255,.07); }

/* -- menu suspenso --
   O painel pequeno saiu: os dois submenus (Serviços e Galeria) agora são
   mega menus. Ficam só as regras do gatilho, que os dois usam.            */
.suspenso{ position:relative; }
.suspenso > a svg{ width:12px; height:12px; transition:transform .2s ease; }
.suspenso:hover > a svg,.suspenso:focus-within > a svg,
.suspenso.aberto > a svg{ transform:rotate(180deg); }
.suspenso.aberto > a{ background:rgba(255,255,255,.14); }
.topo.fixo .suspenso.aberto > a{ background:rgba(255,255,255,.09); }

/* -- mega menu: painel largo, com colunas e um cartão de chamada -- */
/* Fica dentro do .topo (que é fixed) e vira uma faixa da largura da tela.
   Só funciona porque nenhum ancestral tem filter/transform/backdrop-filter —
   qualquer um dos três criaria bloco de contenção e prenderia o painel.    */
.suspenso--mega{ position:static; }
.suspenso--mega .mega{
  position:fixed; left:0; right:0; top:var(--header-h);
  background:var(--terra);
  border-top:1px solid rgba(0,0,0,.14);
  box-shadow:0 26px 50px rgba(51,38,28,.28);
  opacity:0; visibility:hidden; pointer-events:none;
  transform:translateY(-8px);
  transition:opacity .22s ease, transform .22s ease, visibility .22s;
  max-height:calc(100dvh - var(--header-h)); overflow-y:auto;
}
.topo.fixo .suspenso--mega .mega{ top:82px; }
.suspenso--mega.aberto .mega,
.suspenso--mega:hover .mega,
.suspenso--mega:focus-within .mega{
  opacity:1; visibility:visible; pointer-events:auto; transform:none;
}
/* ponte sobre o vão entre o link e o painel */
.suspenso--mega .mega::before{
  content:''; position:absolute; left:0; right:0; top:-14px; height:14px;
}

.mega__env{
  width:100%; max-width:var(--largura); margin:0 auto;
  padding:clamp(28px,3vw,44px) 26px clamp(30px,3.5vw,46px);
  display:grid; grid-template-columns:1fr 1fr 1fr 300px;
  gap:clamp(24px,3vw,46px);
}
@media (max-width:1180px){
  .mega__env{ grid-template-columns:1fr 1fr 1fr; }
  .mega__cta{ display:none; }
}

.mega__col h4{
  font-family:'Fraunces',serif; font-size:1.45rem; font-weight:600;
  color:#FFF8F0; margin:0 0 18px; letter-spacing:-.01em;
}
.mega__col ul{ list-style:none; margin:0; padding:0; display:grid; gap:3px; }
.mega__col ul a{
  display:block; padding:7px 0;
  color:rgba(255,255,255,.84); text-decoration:none; font-size:.97rem;
  transition:color .16s ease, padding-left .16s ease;
}
.mega__col ul a:hover{ color:#fff; padding-left:5px; }
.mega__col ul small{
  display:block; font-size:.78rem; color:rgba(255,255,255,.6); margin-top:1px;
}
.mega__todas{
  display:inline-block; margin-top:18px;
  color:#FFF8F0; font-weight:600; font-size:.93rem;
  text-decoration:none; border-bottom:1.5px solid rgba(255,255,255,.6);
  padding-bottom:3px;
}
.mega__todas:hover{ border-bottom-color:#fff; }

/* atalho para a galeria inteira, acima das categorias */
.mega__destaque{
  display:block; text-decoration:none;
  background:rgba(0,0,0,.20); border:1px solid rgba(255,255,255,.22);
  border-radius:14px; padding:14px 16px; margin-bottom:18px;
  transition:background .16s ease, border-color .16s ease;
}
.mega__destaque:hover{ background:rgba(0,0,0,.30); border-color:rgba(255,255,255,.45); }
.mega__destaque b{ display:block; color:#FFF8F0; font-size:.99rem; }
.mega__destaque small{ display:block; margin-top:3px; font-size:.8rem; color:rgba(255,255,255,.68); }

.mega__etiquetas{ display:flex; flex-wrap:wrap; gap:8px; }
.mega__etiquetas a{
  border:1px solid rgba(255,255,255,.28); border-radius:999px;
  padding:6px 13px; font-size:.83rem; color:rgba(255,255,255,.84);
  text-decoration:none; transition:border-color .16s ease, color .16s ease, background .16s ease;
}
.mega__etiquetas a:hover{ border-color:rgba(255,255,255,.7); color:#fff; background:rgba(0,0,0,.18); }

.mega__cta{
  position:relative; border-radius:var(--raio-g); overflow:hidden;
  min-height:280px; display:flex; align-items:flex-end;
  text-decoration:none;
}
.mega__cta img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.mega__cta::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(20,13,9,.92), rgba(20,13,9,.30) 62%, rgba(20,13,9,.08));
}
.mega__cta div{ position:relative; z-index:2; padding:24px; }
.mega__cta b{
  display:block; font-family:'Fraunces',serif; font-weight:600;
  font-size:1.4rem; line-height:1.14; color:var(--sobre-foto);
  text-shadow:0 2px 16px rgba(0,0,0,.5);
}
.mega__cta span{
  display:inline-block; margin-top:16px;
  background:var(--branco); color:var(--tinta);
  font-size:.83rem; font-weight:600;
  padding:10px 18px; border-radius:999px;
}

@media (max-width:980px){
  /* no celular o mega vira lista dentro do menu, como os outros */
  .suspenso--mega{ position:relative; }
  .suspenso--mega .mega{
    position:static; opacity:1; visibility:visible; pointer-events:auto;
    transform:none; box-shadow:none; border:0; background:transparent;
    max-height:none; overflow:visible;
    padding:0 0 12px 6px; border-left:2px solid var(--linha); margin-left:4px;
  }
  .mega__env{ display:block; padding:0; }
  .suspenso--mega .mega{ background:transparent; }
  .mega__col h4{ color:var(--tinta); }
  .mega__col ul a{ color:var(--tinta-suave); }
  .mega__col ul a:hover{ color:var(--terra); }
  .mega__todas{ color:var(--tinta); border-bottom-color:var(--terra); }
  .mega__destaque{ background:var(--areia); border-color:var(--linha); }
  .mega__destaque b{ color:var(--tinta); }
  .mega__destaque small{ color:var(--tinta-suave); }
  .mega__col{ margin-bottom:20px; }
  .mega__col h4{ font-size:1.05rem; margin-bottom:8px; }
  /* a nuvem de etiquetas deixa o menu do celular longo demais */
  .mega__col--etiquetas{ display:none; }
}

/* -- ícones de conta e carrinho -- */
.acoes-topo{ display:flex; align-items:center; gap:4px; flex:none; }
.acao-topo{
  position:relative;
  width:42px; height:42px; border-radius:12px;
  background:transparent; border:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.92);
  transition:background .18s ease, color .18s ease;
}
.acao-topo svg{ width:21px; height:21px; }
.acao-topo:hover{ background:rgba(255,255,255,.14); color:#fff; }
.topo.fixo .acao-topo{ color:rgba(255,255,255,.9); }
.topo.fixo .acao-topo:hover{ background:rgba(255,255,255,.09); color:#fff; }
.acao-topo__conta{
  position:absolute; top:5px; right:4px;
  min-width:18px; height:18px; padding:0 5px;
  border-radius:999px; background:var(--terra-claro); color:#fff;
  font-family:'IBM Plex Mono',monospace; font-size:.64rem; font-weight:500;
  display:flex; align-items:center; justify-content:center;
}
.acao-topo__conta[hidden]{ display:none; }

/* -- gaveta lateral (conta e carrinho) -- */
.gaveta{
  position:fixed; inset:0; z-index:300;
  display:flex; justify-content:flex-end;
  background:rgba(24,16,11,.52);
  opacity:0; transition:opacity .25s ease;
}
/* Sem isto o `display:flex` acima vence o [hidden] do navegador: a gaveta
   fica invisível (opacity 0) mas cobrindo a tela inteira, e engole TODOS os
   cliques da página. Vale para qualquer camada em tela cheia.              */
.gaveta[hidden]{ display:none; }
.gaveta.aberta{ opacity:1; }
.gaveta__painel{
  width:min(420px,100%); height:100%;
  background:var(--papel);
  display:flex; flex-direction:column;
  transform:translateX(100%);
  transition:transform .3s cubic-bezier(.22,1,.36,1);
  box-shadow:-20px 0 60px rgba(24,16,11,.28);
}
.gaveta.aberta .gaveta__painel{ transform:none; }
.gaveta__topo{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:26px 26px 20px;
  border-bottom:1px solid var(--linha);
}
.gaveta__topo h2{ font-size:1.5rem; margin:0; }
.gaveta__fechar{
  width:40px; height:40px; border-radius:50%; flex:none;
  border:1px solid var(--linha-forte); background:transparent; cursor:pointer;
  display:flex; align-items:center; justify-content:center; color:var(--tinta);
  transition:border-color .18s ease, background .18s ease;
}
.gaveta__fechar:hover{ border-color:var(--terra); background:var(--terra-fundo); }
.gaveta__fechar svg{ width:17px; height:17px; }
.gaveta__corpo{ padding:26px; overflow-y:auto; flex:1; }
.gaveta__pe{ padding:22px 26px 26px; border-top:1px solid var(--linha); }

@media (prefers-reduced-motion: reduce){
  .gaveta,.gaveta__painel{ transition:none; }
  .gaveta__painel{ transform:none; }
}

/* -- as duas portas de login -- */
.porta{
  display:block; text-decoration:none;
  border:1px solid var(--linha); border-radius:var(--raio-g);
  padding:22px 22px 24px; margin-bottom:16px;
  background:var(--branco);
  transition:border-color .18s ease, box-shadow .2s ease, transform .2s ease;
}
.porta:hover{ border-color:var(--terra); box-shadow:var(--sombra-card); transform:translateY(-2px); }
.porta__icone{
  width:44px; height:44px; border-radius:13px; margin-bottom:16px;
  background:var(--terra-fundo); color:var(--terra);
  display:flex; align-items:center; justify-content:center;
}
.porta__icone svg{ width:22px; height:22px; }
.porta b{ display:block; font-family:'Fraunces',serif; font-size:1.2rem; color:var(--tinta); }
.porta p{ margin:8px 0 0; font-size:.9rem; color:var(--tinta-suave); }
.porta__nota{
  display:inline-block; margin-top:14px;
  font-family:'IBM Plex Mono',monospace; font-size:.7rem;
  letter-spacing:.1em; text-transform:uppercase;
}

/* -- carrinho -- */
.carrinho-vazio{ color:var(--tinta-suave); font-size:.95rem; }
.carrinho-item{
  display:grid; grid-template-columns:74px 1fr auto; gap:14px;
  padding:16px 0; border-bottom:1px solid var(--linha); align-items:start;
}
.carrinho-item img{ width:74px; height:74px; object-fit:cover; border-radius:10px; }
.carrinho-item b{ display:block; font-size:.95rem; color:var(--tinta); }
.carrinho-item small{
  display:block; margin-top:4px; font-size:.79rem; color:var(--tinta-suave); line-height:1.45;
}
.carrinho-item__preco{ font-family:'IBM Plex Mono',monospace; font-size:.86rem; color:var(--tinta); white-space:nowrap; }
.carrinho-item__tirar{
  background:none; border:0; cursor:pointer; padding:4px;
  color:var(--tinta-fraca); font-size:.75rem; text-decoration:underline;
  display:block; margin-top:8px;
}
.carrinho-item__tirar:hover{ color:var(--terra); }
.carrinho-total{
  display:flex; align-items:baseline; justify-content:space-between; margin-bottom:16px;
}
.carrinho-total span{ font-size:.92rem; color:var(--tinta-suave); }
.carrinho-total b{ font-family:'Fraunces',serif; font-size:1.7rem; font-weight:600; }
.gaveta__pe .btn{ width:100%; }
.gaveta__nota{ margin-top:12px; font-size:.79rem; color:var(--tinta-fraca); line-height:1.5; }

/* -- idiomas -- */
.idiomas{ display:flex; align-items:center; gap:2px; flex:none; margin-left:4px; }
.idiomas button{
  background:none; border:0; cursor:pointer;
  font-family:'IBM Plex Mono',monospace; font-size:.74rem; font-weight:500;
  letter-spacing:.08em;
  padding:7px 8px; border-radius:8px;
  color:rgba(255,255,255,.72); text-shadow:0 1px 10px rgba(0,0,0,.35);
  transition:color .2s ease, background .2s ease;
}
.idiomas button:hover{ color:#fff; background:rgba(255,255,255,.14); }
.idiomas button[aria-current="true"]{ color:#fff; background:rgba(255,255,255,.2); }
.topo.fixo .idiomas button{ color:rgba(255,255,255,.72); text-shadow:none; }
.topo.fixo .idiomas button:hover{ color:#fff; background:rgba(255,255,255,.09); }
.topo.fixo .idiomas button[aria-current="true"]{ color:var(--terra-suave); background:rgba(255,255,255,.12); }

.hamburguer{
  display:none; width:46px; height:46px; flex:none;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.35);
  border-radius:12px; cursor:pointer; align-items:center; justify-content:center;
  transition:background .2s ease, border-color .2s ease;
}
.hamburguer span{ display:block; width:20px; height:1.6px; background:#fff; position:relative; transition:background .18s ease; }
.hamburguer span::before,.hamburguer span::after{
  content:''; position:absolute; left:0; width:20px; height:1.6px; background:#fff;
  transition:transform .22s ease, top .18s ease;
}
.topo.fixo .hamburguer{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.34); }
.hamburguer span::before{ top:-6.5px; }
.hamburguer span::after{ top:6.5px; }
.hamburguer[aria-expanded="true"] span{ background:transparent !important; }
.hamburguer[aria-expanded="true"] span::before{ top:0; transform:rotate(45deg); }
.hamburguer[aria-expanded="true"] span::after{ top:0; transform:rotate(-45deg); }

@media (max-width:1120px){ .topo .btn--acento{ display:none; } }

@media (max-width:980px){
  :root{ --header-h:82px; }
  .hamburguer{ display:flex; }
  .marca img{ height:64px; }

  .nav{
    position:fixed; inset:var(--header-h) 0 auto 0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--papel);
    border-bottom:1px solid var(--linha);
    box-shadow:var(--sombra);
    padding:12px 26px 28px;
    max-height:calc(100dvh - var(--header-h)); overflow-y:auto;
    transform:translateY(-8px); opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .2s ease, transform .2s ease, visibility .2s;
  }
  .nav.aberto{ opacity:1; visibility:visible; transform:none; pointer-events:auto; }
  .nav > a,.nav .suspenso > a{
    padding:16px 4px; border-bottom:1px solid var(--linha); border-radius:0;
    font-size:1.05rem; color:var(--tinta) !important; text-shadow:none;
  }
  .nav > a[aria-current="page"]{ color:var(--terra) !important; }
  .suspenso{ border-bottom:1px solid var(--linha); }
  .suspenso > a{ border-bottom:0 !important; }
  .suspenso__menu{
    position:static; transform:none; opacity:1; visibility:visible; pointer-events:auto;
    box-shadow:none; border:0; background:transparent; min-width:0;
    padding:0 0 12px 6px; border-left:2px solid var(--linha);
    margin-left:4px;
  }
  .suspenso__menu a{ padding:10px 12px; }
  .nav .btn{ margin-top:20px; }
  .nav .btn--acento{ display:inline-flex; }
  .idiomas{ margin-left:0; }
}
@media (max-width:520px){
  .marca img{ height:54px; }
}

/* ----------------------------------------------------------------- hero -- */
/* O conteúdo passa por baixo do header transparente de propósito.           */

.hero{
  position:relative; overflow:hidden;
  min-height:min(119vh,1090px);  /* +15% e depois +10% sobre o original */
  display:flex; align-items:center; justify-content:center;
  text-align:center;
}
.hero__foto{
  position:absolute; inset:-14% 0 -14% 0;
  will-change:transform;
}
/* O véu fica no bloco, NÃO na camada da foto: a camada da foto se move com o
   parallax, e o degradê preso nela nunca chegava ao marrom na borda de baixo
   — dava para ver a emenda. Aqui ele termina exatamente na cor da faixa
   seguinte, no pixel exato onde a imagem acaba.                            */
.hero::after{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(to bottom,
      rgba(24,16,11,.58) 0%,
      rgba(24,16,11,.28) 32%,
      rgba(41,30,22,.62) 68%,
      rgba(51,38,28,.94) 92%,
      var(--escuro) 100%);
}
.hero .env{ position:relative; z-index:2; padding-top:var(--header-h); }
.hero__texto{ max-width:1000px; margin:0 auto; }
.hero h1{ color:var(--sobre-foto); text-wrap:balance; text-shadow:0 2px 30px rgba(0,0,0,.32); }
.hero h1 em{ font-style:normal; color:var(--terra-suave); }
.hero__olho{
  margin:26px auto 0; max-width:620px;
  color:#F0E5D9; font-size:clamp(1.02rem,1.6vw,1.22rem);
  text-shadow:0 1px 16px rgba(0,0,0,.4);
}
.hero .grupo-btn{ margin-top:36px; justify-content:center; }
.hero .rotulo{ justify-content:center; color:var(--terra-suave); }
.hero .rotulo::before{ background:var(--terra-suave); }

/* -- zoom lento da imagem de destaque (referência: pandorapix) --
   Precisa ser uma camada separada da do parallax: as duas usam `transform`,
   e uma sobrescreveria a outra. A de fora translada, esta aqui recua o zoom. */
.hero__zoom,
.hero-int__zoom{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  transform-origin:center;
  animation:zoomDestaque 18s cubic-bezier(.18,.6,.24,1) forwards;
  will-change:transform;
}
@keyframes zoomDestaque{
  from{ transform:scale(1.14); }
  to{ transform:scale(1); }
}
@media (prefers-reduced-motion: reduce){
  .hero__zoom,.hero-int__zoom{ animation:none; transform:none; }
}

/* seta de rolagem */
.hero__desce{
  position:absolute; left:50%; bottom:34px; transform:translateX(-50%);
  z-index:2; color:rgba(255,255,255,.75);
  animation:desce 2.4s ease-in-out infinite;
}
.hero__desce svg{ width:26px; height:26px; }
@keyframes desce{
  0%,100%{ transform:translate(-50%,0); }
  50%{ transform:translate(-50%,9px); }
}

/* hero das páginas internas — só título e frase, sem botão */
.hero-int{
  position:relative; overflow:hidden;
  min-height:min(89vh,787px);    /* +15% e depois +10% sobre o original */
  display:flex; align-items:center; justify-content:center; text-align:center;
}
.hero-int__foto{
  position:absolute; inset:-14% 0 -14% 0;
  will-change:transform;
}
.hero-int::after{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(to bottom,
      rgba(24,16,11,.60) 0%,
      rgba(24,16,11,.32) 34%,
      rgba(41,30,22,.66) 70%,
      rgba(51,38,28,.94) 92%,
      var(--escuro) 100%);
}
/* vídeo no lugar da foto de destaque: mesma camada, mesmo parallax e mesmo
   véu. `object-fit:cover` faz o papel do background-size:cover.            */
.hero-int__video{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  background:var(--escuro);
}

.hero-int .env{ position:relative; z-index:2; padding-top:var(--header-h); }

/* versão curta: usada onde o conteúdo é o que importa e a imagem só ambienta
   — a galeria, por exemplo, precisa que as obras apareçam logo             */
.hero-int--curto{ min-height:min(56vh,470px); }
.hero-int--curto h1{ font-size:clamp(2.1rem,4.4vw,3.4rem); }
.hero-int--curto p{ font-size:clamp(.96rem,1.3vw,1.06rem); margin-top:16px; }
.hero-int h1{ color:var(--sobre-foto); text-wrap:balance; text-shadow:0 2px 30px rgba(0,0,0,.32); }
.hero-int p{
  max-width:640px; margin:24px auto 0; color:#F0E5D9;
  font-size:clamp(1rem,1.5vw,1.18rem); text-shadow:0 1px 16px rgba(0,0,0,.4);
}
.hero-int .rotulo{ justify-content:center; color:var(--terra-suave); }
.hero-int .rotulo::before{ background:var(--terra-suave); }

/* faixa rasa para páginas sem imagem de destaque: o cabeçalho é branco e
   transparente, e sobre fundo claro ele desapareceria                      */
.faixa-topo{
  background:var(--escuro);
  height:calc(var(--header-h) + 22px);
}

/* ------------------------------------------------------- credenciais -- */

.credenciais{ background:var(--branco); border-bottom:1px solid var(--linha); }
.credenciais ul{
  list-style:none; margin:0; padding:26px 0;
  display:grid; grid-template-columns:repeat(4,1fr); gap:22px;
}
.credenciais li{ display:flex; align-items:center; gap:12px; font-size:.88rem; color:var(--tinta-suave); line-height:1.35; }
.credenciais b{ color:var(--tinta); }
.credenciais svg{ width:23px; height:23px; color:var(--terra); flex:none; }
@media (max-width:820px){ .credenciais ul{ grid-template-columns:repeat(2,1fr); gap:18px; } }
@media (max-width:420px){ .credenciais ul{ grid-template-columns:1fr; } }

/* --------------------------------------------------------------- cards -- */

.grade{ display:grid; gap:22px; }
.grade-2{ grid-template-columns:repeat(2,1fr); }
.grade-3{ grid-template-columns:repeat(3,1fr); }
.grade-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:940px){ .grade-3,.grade-4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .grade-2,.grade-3,.grade-4{ grid-template-columns:1fr; } }

.card{
  background:var(--branco);
  border:1px solid var(--linha);
  border-radius:var(--raio-g);
  padding:30px;
  position:relative; overflow:hidden;
  transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.card h3{ margin-bottom:11px; }
.card p{ color:var(--tinta-suave); font-size:.96rem; }
a.card{ text-decoration:none; display:block; }
a.card:hover{ transform:translateY(-4px); border-color:var(--linha-forte); box-shadow:var(--sombra-sutil); }
a.card:hover .link-seta svg{ transform:translateX(4px); }
.card .link-seta{ margin-top:18px; }
.secao--areia .card{ background:var(--branco); }

.icone{
  width:56px; height:56px; border-radius:16px;
  background:var(--terra-fundo); border:1px solid rgba(167,81,15,.16);
  display:flex; align-items:center; justify-content:center;
  color:var(--terra); margin-bottom:22px;
}
.icone svg{ width:26px; height:26px; }

/* card de contraste — o que o Marcus gosta */
.card--destaque{
  background:linear-gradient(158deg,var(--escuro),#4A382C 100%);
  border-color:transparent; color:#F6EFE7;
  box-shadow:var(--sombra-card);
}
a.card--destaque:hover{ box-shadow:var(--sombra-card-alta); }
.card--destaque h3{ color:#FFF8F0; }
.card--destaque p{ color:#DFD0C0; }
.card--destaque .icone{ background:var(--terra); border-color:var(--terra); color:#fff; }
.card--destaque .link-seta{ color:var(--terra-suave); }
.card--destaque .lista li{ color:#DFD0C0; }
.card--destaque .lista b{ color:#FFF8F0; }
.card--destaque .lista svg{ color:var(--terra-suave); }

.card--terra{ background:var(--terra-fundo); border-color:rgba(167,81,15,.18); }

/* card com foto */
.card-foto{
  background:var(--branco); border:0;
  border-radius:var(--raio-g); overflow:hidden; text-decoration:none; display:block;
  box-shadow:var(--sombra-card);
  transition:transform .2s ease, box-shadow .25s ease;
}
.card-foto:hover{ transform:translateY(-5px); box-shadow:var(--sombra-card-alta); }
.card-foto__img{ aspect-ratio:4/3; overflow:hidden; }
.card-foto__img img{ width:100%; height:100%; object-fit:cover; transition:transform .55s ease; }
.card-foto:hover .card-foto__img img{ transform:scale(1.05); }
.card-foto__txt{ padding:26px 28px 30px; }
.card-foto h3{ margin-bottom:10px; }
.card-foto p{ color:var(--tinta-suave); font-size:.95rem; }
.card-foto .link-seta{ margin-top:16px; }

/* --------------------------------------------------------------- números -- */

.numeros{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--linha); border:1px solid var(--linha);
  border-radius:var(--raio-g); overflow:hidden;
}
.numeros div{ background:var(--branco); padding:34px 24px; text-align:center; }
.numeros b{
  display:block; font-family:'Fraunces',serif; font-weight:600;
  font-size:clamp(2.2rem,4.2vw,3.1rem); color:var(--terra); line-height:1;
}
.numeros span{ display:block; margin-top:11px; font-size:.85rem; color:var(--tinta-suave); line-height:1.45; }
@media (max-width:760px){ .numeros{ grid-template-columns:repeat(2,1fr); } }

/* ------------------------------------------------------- blocos com foto -- */

.duo{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(34px,5.5vw,74px); align-items:center; }
.duo--invertido .duo__foto{ order:2; }
@media (max-width:900px){
  .duo{ grid-template-columns:1fr; gap:38px; }
  .duo--invertido .duo__foto{ order:0; }
}
.duo__foto{ border-radius:var(--raio-g); overflow:hidden; box-shadow:var(--sombra); }
.duo__foto img{ width:100%; height:auto; max-height:clamp(360px,46vw,620px); object-fit:cover; }
.duo__txt h2{ margin-bottom:20px; }
.duo__txt p{ color:var(--tinta-suave); }
.duo__txt .grupo-btn{ margin-top:28px; }

/* -- composição de imagens sobrepostas (referência: pandorapix /sobre) --
   A imagem menor é sempre recortada em 4/3: assim a sobreposição fica igual
   qualquer que seja a proporção do arquivo original.                        */
.composicao{ position:relative; padding-bottom:13%; }
.composicao img{ border-radius:var(--raio-g); box-shadow:var(--sombra); display:block; }
/* teto de altura: foto vertical não pode virar um bloco gigante */
.composicao__a{ width:100%; height:auto; max-height:clamp(360px,44vw,600px); object-fit:cover; }
.composicao__b{
  position:absolute;
  right:-8%; bottom:0;
  width:50%; height:auto;
  aspect-ratio:4/3; object-fit:cover;
  border:7px solid var(--papel);
  border-radius:calc(var(--raio-g) + 5px);
}
.composicao--esq .composicao__b{ right:auto; left:-8%; }
/* a borda finge um recorte no papel: precisa ter a cor da seção */
.secao--areia .composicao__b{ border-color:var(--areia); }
.secao--branco .composicao__b{ border-color:var(--branco); }
.secao--escuro .composicao__b{ border-color:var(--escuro); }
.secao--marrom .composicao__b{ border-color:var(--marrom-medio); }
@media (max-width:900px){
  .composicao{ padding-bottom:15%; }
  .composicao__b{ right:-3%; width:46%; border-width:5px; }
  .composicao--esq .composicao__b{ left:-3%; }
}

/* -- faixa parallax de largura total -- */
.faixa{
  position:relative; overflow:hidden;
  min-height:min(67vh,552px);    /* acompanha as imagens de destaque */
  display:flex; align-items:center; justify-content:center; text-align:center;
}
.faixa__foto{
  position:absolute; inset:-16% 0 -16% 0;
  background-size:cover; background-position:center;
  will-change:transform;
}
.faixa::after{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to bottom, rgba(30,20,13,.60), rgba(30,20,13,.68));
}
.faixa .env{ position:relative; z-index:2; padding:70px 26px; }
.faixa h2{ color:var(--sobre-foto); max-width:20ch; margin:0 auto; text-wrap:balance; text-shadow:0 2px 26px rgba(0,0,0,.34); }
.faixa p{ color:#EFE3D6; max-width:58ch; margin:20px auto 0; text-shadow:0 1px 16px rgba(0,0,0,.4); }
.faixa .grupo-btn{ justify-content:center; margin-top:30px; }
.faixa .rotulo{ justify-content:center; color:var(--terra-suave); }
.faixa .rotulo::before{ background:var(--terra-suave); }

/* lista de itens */
.lista{ list-style:none; margin:24px 0 0; padding:0; display:grid; gap:14px; }
.lista li{ display:flex; gap:12px; align-items:flex-start; color:var(--tinta-suave); font-size:.97rem; line-height:1.5; }
.lista svg{ width:19px; height:19px; color:var(--terra); flex:none; margin-top:3px; }
.lista b{ color:var(--tinta); font-weight:600; }

/* ------------------------------------------------------- papéis / selos -- */

.selos{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:18px; }
.selo{
  background:var(--branco); border:1px solid var(--linha);
  border-radius:var(--raio); padding:28px 22px; text-align:center;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.selo:hover{ border-color:var(--linha-forte); box-shadow:var(--sombra-sutil); }
.selo__marca{
  font-family:'Fraunces',serif; font-size:1.2rem; font-weight:600;
  letter-spacing:.06em; color:var(--tinta); display:block; line-height:1.2;
}
.selo__sub{
  display:block; margin-top:8px; font-family:'IBM Plex Mono',monospace;
  font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--terra);
}
.selo__nota{ display:block; margin-top:14px; font-size:.84rem; color:var(--tinta-suave); line-height:1.5; }

.tecnicos{ display:grid; grid-template-columns:repeat(auto-fit,minmax(155px,1fr)); gap:20px; }
.tecnico{ text-align:center; }
.tecnico__disco{
  width:80px; height:80px; margin:0 auto 15px; border-radius:50%;
  border:1px solid var(--linha-forte); background:var(--branco);
  display:flex; align-items:center; justify-content:center; color:var(--terra);
}
.tecnico__disco svg{ width:35px; height:35px; }
.tecnico b{ display:block; font-size:.92rem; margin-bottom:4px; }
.tecnico span{ font-size:.82rem; color:var(--tinta-suave); line-height:1.45; }

/* --------------------------------------------------------------- mosaico -- */

.mosaico{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:200px; gap:16px; }
.mosaico a{ display:block; border-radius:var(--raio); overflow:hidden; position:relative; }
.mosaico img{ width:100%; height:100%; object-fit:cover; transition:transform .55s ease; }
.mosaico a:hover img{ transform:scale(1.05); }
.mosaico .g-alto{ grid-row:span 2; }
.mosaico .g-largo{ grid-column:span 2; }
@media (max-width:860px){
  .mosaico{ grid-template-columns:repeat(2,1fr); grid-auto-rows:165px; }
  .mosaico .g-largo{ grid-column:span 2; }
}

/* ----------------------------------------------------------- bastidores -- */
/* Galeria por convidado: sem o filtro vira um monte de foto solta, que é
   exatamente o que a faixa não deve parecer.                               */

.bastidores__menu{
  display:flex; flex-wrap:wrap; gap:10px; margin-bottom:26px;
}

.grade-bastidores{
  display:grid; grid-template-columns:repeat(4,1fr); gap:16px;
}
@media (max-width:940px){ .grade-bastidores{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .grade-bastidores{ grid-template-columns:1fr; } }

.bastidor{
  position:relative; display:block; overflow:hidden;
  border-radius:var(--raio); aspect-ratio:4/3;
  box-shadow:var(--sombra-card);
  transition:transform .2s ease, box-shadow .25s ease;
}
.bastidor:hover{ transform:translateY(-3px); box-shadow:var(--sombra-card-alta); }
.bastidor img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.bastidor:hover img{ transform:scale(1.05); }
.bastidor::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(20,13,9,.82), rgba(20,13,9,.10) 55%, transparent);
}
.bastidor span{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:14px 16px; color:var(--sobre-foto);
  font-family:'IBM Plex Mono',monospace; font-size:.72rem;
  letter-spacing:.1em; text-transform:uppercase;
  text-shadow:0 1px 10px rgba(0,0,0,.6);
}
.bastidor[hidden]{ display:none; }

.bastidores__vazio{
  grid-column:1 / -1; padding:34px 0; text-align:center;
  color:var(--tinta-suave); font-size:.95rem;
}

/* ---------------------------------------------------------------- vídeo -- */
/* Fachada: mostra o pôster e só carrega o YouTube depois do clique.         */

.video{
  position:relative; border-radius:var(--raio-g); overflow:hidden;
  aspect-ratio:16/9; background:var(--escuro);
  box-shadow:var(--sombra); cursor:pointer;
}
.video img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease, filter .3s ease; }
.video:hover img{ transform:scale(1.03); filter:brightness(.86); }
.video::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(30,20,13,.55), rgba(30,20,13,.06) 60%);
  pointer-events:none;
}
.video__play{
  position:absolute; inset:0; margin:auto;
  width:82px; height:82px; border-radius:50%;
  background:rgba(255,255,255,.94); color:var(--terra);
  display:flex; align-items:center; justify-content:center;
  border:0; cursor:pointer; z-index:2;
  box-shadow:0 10px 34px rgba(0,0,0,.32);
  transition:transform .22s ease, background .22s ease;
}
.video:hover .video__play{ transform:scale(1.08); background:#fff; }
.video__play svg{ width:32px; height:32px; margin-left:4px; }
.video__nota{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:18px 22px; color:#F3E7DA; font-size:.85rem;
  display:flex; align-items:center; gap:10px;
}
.video iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
/* o vídeo agora abre em janela flutuante; o card em si nunca vira player */

/* vídeo de abertura: mesmo bloco lado a lado, só que com mais largura que o
   texto — e o play acompanha o tamanho novo                                */
.duo--midia{ grid-template-columns:1.45fr 1fr; }
@media (max-width:900px){ .duo--midia{ grid-template-columns:1fr; } }

.video--largo{ box-shadow:0 26px 66px rgba(14,9,5,.38); }
.video--largo .video__play{ width:92px; height:92px; }
.video--largo .video__play svg{ width:35px; height:35px; margin-left:5px; }
@media (max-width:620px){
  .video--largo .video__play{ width:72px; height:72px; }
  .video--largo .video__play svg{ width:27px; height:27px; }
}

/* ------------------------------------------------------------ convidado -- */
/* Card do PodFoto: é ao mesmo tempo a capa do convidado e o player do
   episódio. A foto ocupa o card inteiro; título, profissão·cidade e a linha
   de descrição ficam sobre ela, centralizados. Herda de .video — por isso o
   clique já abre o YouTube sem código novo.                                 */

.convidado{
  aspect-ratio:3/4;
  background:var(--escuro);
  box-shadow:var(--sombra-sutil);
}
.convidado img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
}
/* o véu termina exatamente na cor da faixa: o card funde com o fundo em vez
   de terminar num preto que não existe em lugar nenhum do site             */
.convidado::after{
  background:linear-gradient(to top,
    rgb(var(--faixa-rgb)) 0%,
    rgba(var(--faixa-rgb),.94) 16%,
    rgba(var(--faixa-rgb),.72) 34%,
    rgba(var(--faixa-rgb),.30) 60%,
    rgba(var(--faixa-rgb),.06) 82%,
    rgba(var(--faixa-rgb),.20) 100%);
}
.convidado:hover img{ transform:scale(1.05); }

/* selo do canto, como na referência */
.convidado__selo{
  position:absolute; top:18px; left:18px; z-index:3;
  background:var(--verde); color:var(--verde-escuro);
  font-size:.74rem; font-weight:600; letter-spacing:.02em;
  padding:7px 15px; border-radius:999px;
  display:inline-flex; align-items:center; gap:7px;
  box-shadow:0 4px 14px rgba(0,0,0,.28);
  animation:selaPisca 1.8s ease-in-out infinite;
}
/* o pontinho é o que "pisca" de verdade; o selo só respira junto, para não
   virar um estrobo — texto piscando forte cansa e atrapalha quem lê devagar */
.convidado__selo::before{
  content:''; width:8px; height:8px; border-radius:50%; flex:none;
  background:var(--verde-escuro);
  animation:pontoPisca 1.8s ease-in-out infinite;
}
@keyframes selaPisca{
  0%,100%{ box-shadow:0 4px 14px rgba(0,0,0,.28), 0 0 0 0 rgba(37,211,102,.55); }
  50%    { box-shadow:0 4px 14px rgba(0,0,0,.28), 0 0 0 9px rgba(37,211,102,0); }
}
@keyframes pontoPisca{
  0%,100%{ opacity:1; }
  50%    { opacity:.25; }
}
@media (prefers-reduced-motion: reduce){
  .convidado__selo,
  .convidado__selo::before{ animation:none; }
}

/* Centralizado na parte da foto, não no card inteiro: o texto ocupa o terço
   de baixo e o botão caía em cima do nome do convidado.                    */
.convidado .video__play{
  inset:0 0 32% 0; margin:auto; transform:none;
  width:62px; height:62px;
}
.convidado:hover .video__play{ transform:scale(1.08); }
.convidado .video__play svg{ width:25px; height:25px; }

.convidado__txt{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:0 24px 30px;
  color:var(--sobre-foto); text-align:center;
}
.convidado__titulo{
  display:block;
  font-family:'Fraunces',serif; font-weight:600;
  font-size:clamp(1.5rem,2.1vw,1.85rem); line-height:1.1;
  letter-spacing:-.01em; color:var(--sobre-foto);
  text-shadow:0 2px 18px rgba(0,0,0,.5);
  text-wrap:balance;
}
.convidado__risco{
  display:block; width:30px; height:3px; margin:20px auto 16px;
  background:var(--sobre-foto); border-radius:2px; opacity:.9;
}
.convidado__papel{
  display:block;
  font-family:'IBM Plex Mono',monospace; font-size:.73rem;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--terra-suave);
  text-shadow:0 1px 12px rgba(0,0,0,.6);
}
.convidado__resumo{
  margin:11px 0 0; font-size:.88rem; line-height:1.5;
  color:#E4D6C7;
  text-shadow:0 1px 12px rgba(0,0,0,.6);
}

/* Nos cards, um selo só avisa que o conteúdo é de exemplo — marcar as três
   linhas de texto polui e impede de julgar o layout.                        */
.convidado__selo--aviso{
  background:rgba(201,106,37,.94); color:#fff;
  border:1px dashed rgba(255,255,255,.55);
  animation:none; box-shadow:none;
}
.convidado__selo--aviso::before{ display:none; }
@media (max-width:620px){
  .convidado{ aspect-ratio:4/5; }
}
/* três por linha: cards grandes, é a faixa que apresenta as pessoas */
.grade-convidados{ grid-template-columns:repeat(3,1fr); gap:24px; }
@media (max-width:900px){ .grade-convidados{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .grade-convidados{ grid-template-columns:1fr; } }

/* ------------------------------------------------------------- lightbox -- */
/* O vídeo abre numa janela flutuante, com o site desfocado atrás.
   Atenção: `backdrop-filter` cria bloco de contenção para `position:fixed`
   nos descendentes — por isso a caixa é filha direta do <body>, criada pelo
   JS, e não fica dentro de nenhuma seção.                                   */

.lightbox[hidden]{ display:none; }   /* mesma armadilha da gaveta */
.lightbox{
  position:fixed; inset:0; z-index:400;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(16px,4vw,56px);
  background:rgba(24,16,11,.72);
  -webkit-backdrop-filter:blur(10px) saturate(.85);
  backdrop-filter:blur(10px) saturate(.85);
  opacity:0;
  transition:opacity .25s ease;
}
.lightbox.aberto{ opacity:1; }

.lightbox__caixa{
  position:relative;
  width:min(1100px,100%);
  aspect-ratio:16/9;
  border-radius:var(--raio-g);
  overflow:hidden;
  background:#000;
  box-shadow:0 40px 100px rgba(0,0,0,.55);
  transform:scale(.94) translateY(12px);
  transition:transform .3s cubic-bezier(.22,1,.36,1);
}
.lightbox.aberto .lightbox__caixa{ transform:none; }
.lightbox__caixa iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

.lightbox__fechar{
  position:absolute; top:clamp(12px,2.5vw,26px); right:clamp(12px,2.5vw,26px);
  z-index:2;
  width:46px; height:46px; border-radius:50%;
  background:rgba(255,255,255,.94); color:#22160F;
  border:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:transform .2s ease, background .2s ease;
}
.lightbox__fechar:hover{ transform:scale(1.08); background:#fff; }
.lightbox__fechar svg{ width:20px; height:20px; }

/* a legenda vive FORA da caixa: dentro dela o overflow:hidden a cortava */
.lightbox__conteudo{ width:min(1100px,100%); }
.lightbox__legenda{
  margin:0 0 16px;
  color:#F3E7DA; text-align:center;
  font-family:'Fraunces',serif; font-size:1.15rem;
  text-shadow:0 2px 16px rgba(0,0,0,.6);
}
.lightbox__conteudo .lightbox__caixa{ width:100%; }
@media (max-width:700px){ .lightbox__legenda{ display:none; } }

@media (prefers-reduced-motion: reduce){
  .lightbox,.lightbox__caixa{ transition:none; }
  .lightbox__caixa{ transform:none; }
}

/* ---------------------------------------------------------------- passos -- */

.passos{ counter-reset:passo; display:grid; }
.passo{
  counter-increment:passo;
  display:grid; grid-template-columns:84px 1fr; gap:26px;
  padding:30px 4px; border-top:1px solid var(--linha); align-items:start;
}
.passo:last-child{ border-bottom:1px solid var(--linha); }
.passo::before{
  content:counter(passo,decimal-leading-zero);
  font-family:'IBM Plex Mono',monospace; font-size:1.6rem; color:var(--terra-claro); line-height:1;
}
.passo h3{ margin-bottom:9px; }
.passo p{ color:var(--tinta-suave); font-size:.97rem; max-width:64ch; }
@media (max-width:560px){ .passo{ grid-template-columns:1fr; gap:10px; } }

/* ------------------------------------------------------------------- faq -- */

.faq details{ border-bottom:1px solid var(--linha); }
.faq summary{
  cursor:pointer; list-style:none; padding:24px 46px 24px 4px;
  font-family:'Fraunces',serif; font-size:1.14rem; font-weight:600; position:relative;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:''; position:absolute; right:12px; top:50%;
  width:11px; height:11px; margin-top:-7px;
  border-right:1.6px solid var(--terra); border-bottom:1.6px solid var(--terra);
  transform:rotate(45deg); transition:transform .22s ease;
}
.faq details[open] summary::after{ transform:rotate(-135deg); margin-top:-2px; }
.faq .resposta{ padding:0 46px 26px 4px; color:var(--tinta-suave); font-size:.99rem; }

/* --------------------------------------------------------------- chamada -- */

.chamada{
  position:relative; overflow:hidden;
  border-radius:var(--raio-g);
  padding:clamp(42px,5.5vw,72px); text-align:center;
  background:linear-gradient(158deg,var(--escuro),#4A382C);
  color:#F6EFE7;
}
.chamada h2{ max-width:20ch; margin:0 auto 18px; text-wrap:balance; color:#FFF8F0; }
.chamada p{ max-width:58ch; margin:0 auto; color:#DFD0C0; }
.chamada .grupo-btn{ justify-content:center; margin-top:32px; }
.chamada .rotulo{ justify-content:center; color:var(--terra-suave); }
.chamada .rotulo::before{ background:var(--terra-suave); }

/* ------------------------------------------------------------ depoimento -- */

.depoimento{
  background:var(--branco); border:1px solid var(--linha);
  border-left:3px solid var(--terra); border-radius:var(--raio); padding:30px 32px;
}
.depoimento p{ font-family:'Fraunces',serif; font-size:1.08rem; line-height:1.55; color:var(--tinta); }
/* assinatura: foto, nome, atividade e cidade */
.depoimento__quem{
  margin-top:24px; padding-top:20px;
  border-top:1px solid var(--linha);
  display:flex; align-items:center; gap:14px;
}
.depoimento__foto{
  width:54px; height:54px; flex:none;
  border-radius:50%; object-fit:cover;
  background:var(--areia-forte);
  display:flex; align-items:center; justify-content:center;
  color:var(--linha-forte);
  border:1px solid var(--linha);
}
.depoimento__foto svg{ width:26px; height:26px; }
.depoimento__quem b{
  display:block; font-size:.95rem; font-weight:600; color:var(--tinta);
  line-height:1.3;
}
.depoimento__quem small{
  display:block; margin-top:3px;
  font-family:'IBM Plex Mono',monospace; font-size:.74rem;
  letter-spacing:.08em; color:var(--tinta-suave);
}

/* --------------------------------------------------------------- editável -- */

.editavel{
  background:rgba(201,106,37,.13);
  border-bottom:1px dashed var(--terra-claro);
  color:var(--terra-escuro);
  padding:0 3px; border-radius:3px; cursor:help;
}
.card--destaque .editavel,.chamada .editavel,.secao--escuro .editavel{
  background:rgba(248,174,97,.2); color:var(--terra-suave); border-bottom-color:var(--terra-suave);
}
.numeros b.editavel{ font-size:1.05rem; font-family:'Inter',sans-serif; font-weight:500; line-height:1.4; display:inline-block; }

/* ------------------------------------------------------------- formulário -- */

.form{ display:grid; gap:19px; }
.campo{ display:grid; gap:7px; }
.campo label{ font-size:.87rem; color:var(--tinta-suave); font-weight:500; }
.campo input,.campo select,.campo textarea{
  width:100%; padding:14px 16px;
  background:var(--branco); border:1px solid var(--linha-forte);
  border-radius:12px; color:var(--tinta);
  font-family:inherit; font-size:.96rem;
  transition:border-color .16s ease, box-shadow .16s ease;
}
.campo textarea{ min-height:140px; resize:vertical; }
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:none; border-color:var(--terra); box-shadow:0 0 0 3px rgba(167,81,15,.14);
}
.campo input::placeholder,.campo textarea::placeholder{ color:var(--tinta-fraca); }
.form-2{ display:grid; grid-template-columns:1fr 1fr; gap:19px; }
@media (max-width:600px){ .form-2{ grid-template-columns:1fr; } }

.contato-item{ display:flex; gap:16px; align-items:flex-start; padding:20px 0; border-bottom:1px solid var(--linha); }
.contato-item:last-child{ border-bottom:0; }
.contato-item svg{ width:21px; height:21px; color:var(--terra); flex:none; margin-top:3px; }
.contato-item b{ display:block; font-size:.95rem; margin-bottom:3px; }
.contato-item a,.contato-item span{ color:var(--tinta-suave); font-size:.93rem; text-decoration:none; }
.contato-item a:hover{ color:var(--terra); }

/* ------------------------------------------------------- mapa e chegada -- */

.mapa{ border-radius:var(--raio-g); overflow:hidden; border:1px solid var(--linha); }
.mapa iframe{ display:block; width:100%; height:100%; border:0; }

/* foto da fachada ao lado do mapa, mesma altura */
.chegar{
  display:grid; grid-template-columns:1fr 1fr; gap:22px;
  grid-auto-rows:clamp(320px,38vw,440px);
}
@media (max-width:820px){
  .chegar{ grid-template-columns:1fr; grid-auto-rows:clamp(260px,58vw,360px); }
}
.chegar__foto{
  position:relative; margin:0;
  border-radius:var(--raio-g); overflow:hidden;
  box-shadow:var(--sombra-card);
}
.chegar__foto img{ width:100%; height:100%; object-fit:cover; }
.chegar__foto figcaption{
  position:absolute; left:0; right:0; bottom:0;
  padding:34px 22px 18px;
  background:linear-gradient(to top, rgba(20,13,9,.88), rgba(20,13,9,0));
  color:#F2E6D9; font-size:.86rem; text-align:center;
}

/* lista de contato dentro do card de contraste: sobre o terracota tudo
   precisa clarear, senão some                                              */
.card--destaque .rotulo{ color:#FBE7D5; }
.card--destaque .rotulo::before{ background:#FBE7D5; }
.card--destaque .contato-item{ border-color:rgba(255,255,255,.24); }
.card--destaque .contato-item svg{ color:#FFF8F0; }
.card--destaque .contato-item b{ color:#FFF8F0; }
.card--destaque .contato-item a,
.card--destaque .contato-item span{ color:#FBE7D5; }
.card--destaque .contato-item a:hover{ color:#fff; }
.card--destaque .editavel{
  background:rgba(0,0,0,.38); color:#FFF1E2; border-bottom-color:#FFD9B4;
}

/* -------------------------------------------------------- caixas creme -- */
/* Numa faixa marcada assim, as caixas deixam o branco e assumem o creme do
   site — o mesmo tom da faixa "Como chegar".                               */
/* A regra do tema escuro pinta .card de branco e vem depois no arquivo, por
   isso aqui somam-se as duas classes. E o :not() é o que impede o creme de
   engolir o card de contraste — sem ele, "Arquivo grande?" ficava creme com
   texto claro, ilegível.                                                    */
.caixas-creme .card:not(.card--destaque),
.secao--escuro.caixas-creme .card:not(.card--destaque),
.caixas-creme .campo input,
.caixas-creme .campo select,
.caixas-creme .campo textarea{ background:var(--areia); }

.caixas-creme .campo input,
.caixas-creme .campo select,
.caixas-creme .campo textarea{ border-color:var(--linha-forte); color:var(--tinta); }
.caixas-creme .campo input::placeholder,
.caixas-creme .campo textarea::placeholder{ color:var(--tinta-fraca); }
.caixas-creme .contato-item{ border-color:var(--linha); }

/* dentro da caixa creme o texto volta ao tema claro: o `.secao--escuro b`
   deixava os rótulos brancos sobre o creme                                  */
.secao--escuro.caixas-creme .card:not(.card--destaque) b,
.secao--escuro.caixas-creme .card:not(.card--destaque) strong,
.secao--escuro.caixas-creme .card:not(.card--destaque) h3{ color:var(--tinta); }
.secao--escuro.caixas-creme .card:not(.card--destaque) p,
.secao--escuro.caixas-creme .card:not(.card--destaque) span,
.secao--escuro.caixas-creme .card:not(.card--destaque) a{ color:var(--tinta-suave); }
.secao--escuro.caixas-creme .card:not(.card--destaque) .link-seta,
.secao--escuro.caixas-creme .card:not(.card--destaque) .contato-item a:hover{ color:var(--terra); }
.secao--escuro.caixas-creme .card:not(.card--destaque) .editavel{
  background:rgba(201,106,37,.15); color:var(--terra-escuro);
  border-bottom-color:var(--terra-claro);
}

/* --------------------------------------------------------------- rodapé -- */

.rodape{ background:var(--escuro); color:#E4D7C9; padding:clamp(58px,6.5vw,86px) 0 32px; }
.rodape__grade{ display:grid; grid-template-columns:1.7fr 1fr 1fr 1.2fr; gap:40px; }
@media (max-width:900px){ .rodape__grade{ grid-template-columns:1fr 1fr; gap:34px; } }
@media (max-width:520px){ .rodape__grade{ grid-template-columns:1fr; } }

.rodape h4{
  font-family:'IBM Plex Mono',monospace; font-size:.72rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--terra-suave); margin-bottom:18px;
}
.rodape ul{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.rodape a{ color:#D6C6B6; text-decoration:none; font-size:.93rem; }
.rodape a:hover{ color:var(--terra-suave); }
.rodape__sobre p{ color:#C9B8A7; font-size:.93rem; max-width:36ch; margin-top:20px; }
.rodape .marca{ margin-right:0; }
.rodape .marca img{ height:112px; width:auto; }

.rodape__fim{
  margin-top:48px; padding-top:26px; border-top:1px solid rgba(255,255,255,.1);
  display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between;
  font-size:.81rem; color:#A8968A;
}

.sociais{ display:flex; gap:11px; margin-top:24px; }
.sociais a{
  width:42px; height:42px; border-radius:12px;
  border:1px solid rgba(255,255,255,.18);
  display:flex; align-items:center; justify-content:center; color:#D6C6B6;
  transition:border-color .18s ease, color .18s ease, background .18s ease;
}
.sociais a:hover{ border-color:var(--terra-suave); color:var(--terra-suave); background:rgba(255,255,255,.06); }
.sociais svg{ width:18px; height:18px; }

/* --------------------------------------------------------- whatsapp fixo -- */

.zap{
  position:fixed; right:22px; bottom:22px; z-index:150;
  width:58px; height:58px; border-radius:50%;
  background:#25D366; color:#06301A;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 12px 32px rgba(0,0,0,.26);
  transition:transform .2s ease;
}
.zap:hover{ transform:scale(1.07); }
.zap svg{ width:30px; height:30px; }

/* --------------------------------------------------- seções marrons -- */
/* A faixa logo abaixo da imagem de destaque é sempre marrom. Como quase
   todo componente pode cair dentro dela, o tema escuro precisa cobrir tudo. */

.secao--escuro{ color:#EFE3D6; }
.secao--escuro h2,
.secao--escuro h3,
.secao--escuro h4{ color:#FFF8F0; }
.secao--escuro p,
.secao--escuro .olho,
.secao--escuro .cabeca-secao p,
.secao--escuro .passo p,
.secao--escuro .faq .resposta{ color:#D9C9B9; }
.secao--escuro b,
.secao--escuro strong{ color:#FFF8F0; }
.secao--escuro .rotulo{ color:var(--terra-suave); }
.secao--escuro .rotulo::before{ background:var(--terra-suave); }
.secao--escuro .link-seta{ color:var(--terra-suave); }
.secao--escuro .lista li{ color:#D9C9B9; }
.secao--escuro .lista b{ color:#FFF8F0; }
.secao--escuro .lista svg{ color:var(--terra-suave); }
.secao--escuro .passo{ border-color:rgba(255,255,255,.14); }
.secao--escuro .passo::before{ color:var(--terra-suave); }
.secao--escuro .faq details{ border-color:rgba(255,255,255,.14); }
.secao--escuro .faq summary::after{ border-color:var(--terra-suave); }
.secao--escuro .btn--linha{ border-color:rgba(255,255,255,.34); color:#FFF8F0; }
.secao--escuro .btn--linha:hover{ border-color:var(--terra-suave); color:var(--terra-suave); background:rgba(255,255,255,.06); }
.secao--escuro .mono{ color:#B7A493; }
.secao--escuro .editavel{ background:rgba(248,174,97,.18); color:var(--terra-suave); border-bottom-color:var(--terra-suave); }

/* cartões brancos sobre o marrom: é o contraste mais forte do site */
.secao--escuro .card,
.secao--escuro .selo,
.secao--escuro .depoimento{ background:var(--branco); color:var(--tinta); border-color:rgba(255,255,255,.12); }
.secao--escuro .card-foto{ background:var(--branco); color:var(--tinta); }
.secao--escuro .card-foto,
.secao--escuro .card--destaque{ box-shadow:var(--sombra-card-escura); }
.secao--escuro .card-foto:hover,
.secao--escuro a.card--destaque:hover{ box-shadow:var(--sombra-card-escura-alta); }
.secao--escuro .card h3,
.secao--escuro .card-foto h3,
.secao--escuro .depoimento p{ color:var(--tinta); }
.secao--escuro .card p,
.secao--escuro .card-foto p{ color:var(--tinta-suave); }
.secao--escuro .card .link-seta,
.secao--escuro .card-foto .link-seta{ color:var(--terra); }
.secao--escuro .card .lista li{ color:var(--tinta-suave); }
.secao--escuro .card .lista b{ color:var(--tinta); }
.secao--escuro .card .lista svg{ color:var(--terra); }
.secao--escuro .card .editavel{ background:rgba(201,106,37,.13); color:var(--terra-escuro); border-bottom-color:var(--terra-claro); }
/* o card de contraste inverte de novo: no marrom ele vira terracota */
.secao--escuro .card--destaque{ background:linear-gradient(158deg,var(--terra-escuro),var(--terra)); border-color:transparent; }
.secao--escuro .card--destaque h3{ color:#FFF8F0; }
.secao--escuro .card--destaque p{ color:#FBE7D5; }
.secao--escuro .card--destaque .icone{ background:rgba(255,255,255,.92); border-color:transparent; color:var(--terra-escuro); }
.secao--escuro .card--destaque .link-seta{ color:#FFF8F0; }

.secao--escuro .tecnico__disco{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.22); color:var(--terra-suave); }
.secao--escuro .tecnico b{ color:#FFF8F0; }
.secao--escuro .tecnico span{ color:#C3B2A1; }
.secao--escuro .numeros{ background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.14); }
.secao--escuro .numeros div{ background:var(--escuro); }
.secao--marrom .numeros div{ background:var(--marrom-medio); }
.secao--escuro .numeros b{ color:var(--terra-suave); }
.secao--escuro .numeros span{ color:#C3B2A1; }
.secao--escuro .campo label{ color:#D9C9B9; }
.secao--escuro .campo input,
.secao--escuro .campo select,
.secao--escuro .campo textarea{ border-color:rgba(255,255,255,.24); }
.secao--escuro .contato-item{ border-color:rgba(255,255,255,.12); }
.secao--escuro .mapa{ border-color:rgba(255,255,255,.14); }

/* ======================================================= galeria de obras */

/* -- seletor de categorias, no topo da página -- */
.cats{
  display:flex; flex-wrap:wrap; gap:10px;
  padding-bottom:clamp(24px,3vw,36px);
  border-bottom:1px solid var(--linha);
}
.cat-chip{
  border:1px solid var(--linha-forte); background:transparent;
  color:var(--tinta); cursor:pointer;
  font-family:inherit; font-size:.93rem; font-weight:500;
  padding:11px 20px; border-radius:999px;
  transition:background .18s ease, border-color .18s ease, color .18s ease;
}
.cat-chip:hover{ border-color:var(--terra); color:var(--terra); background:var(--terra-fundo); }
.cat-chip[aria-current="true"]{ background:var(--terra); border-color:var(--terra); color:#fff; }

/* -- corpo: barra de filtros à esquerda, grade à direita -- */
.galeria-corpo{
  display:grid; grid-template-columns:250px 1fr;
  gap:clamp(28px,4vw,54px);
  margin-top:clamp(28px,3.5vw,44px);
  align-items:start;
}
@media (max-width:900px){ .galeria-corpo{ grid-template-columns:1fr; } }

.galeria-lado{ position:sticky; top:calc(var(--header-h) + 18px); }
@media (max-width:900px){ .galeria-lado{ position:static; } }

.filtro{ margin-bottom:30px; }
.filtro h3{
  font-family:'IBM Plex Mono',monospace; font-size:.72rem; font-weight:500;
  letter-spacing:.17em; text-transform:uppercase; color:var(--tinta-fraca);
  padding-bottom:12px; margin-bottom:12px;
  border-bottom:1px solid var(--linha);
}
.filtro ul{ list-style:none; margin:0; padding:0; display:grid; gap:2px; }
.filtro ul button{
  width:100%; text-align:left; background:none; border:0; cursor:pointer;
  font-family:inherit; font-size:.94rem; color:var(--tinta-suave);
  padding:8px 10px; border-radius:8px;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  transition:background .16s ease, color .16s ease;
}
.filtro ul button span{
  font-family:'IBM Plex Mono',monospace; font-size:.68rem; color:var(--tinta-fraca);
}
.filtro ul button:hover{ background:var(--areia); color:var(--tinta); }
.filtro ul button[aria-current="true"]{ color:var(--terra); font-weight:600; background:var(--terra-fundo); }

.etiquetas{ display:flex; flex-wrap:wrap; gap:8px; }
.etiqueta{
  display:inline-flex; align-items:center; gap:7px;
  border:1px solid var(--linha); background:transparent; cursor:pointer;
  font-family:inherit; font-size:.83rem; color:var(--tinta-suave);
  padding:7px 12px; border-radius:999px;
  transition:background .16s ease, border-color .16s ease, color .16s ease;
}
.etiqueta span{
  font-family:'IBM Plex Mono',monospace; font-size:.68rem; color:var(--tinta-fraca);
}
.etiqueta:hover{ border-color:var(--linha-forte); color:var(--tinta); }
.etiqueta[aria-current="true"]{
  background:var(--terra); border-color:var(--terra); color:#fff;
}
.etiqueta[aria-current="true"] span{ color:rgba(255,255,255,.72); }
.etiqueta[disabled],
.cor[disabled]{ opacity:.35; cursor:not-allowed; }

/* -- predominância de cor -- */
.cores{ display:grid; gap:4px; }
.cor{
  display:flex; align-items:center; gap:11px;
  width:100%; background:none; border:0; cursor:pointer;
  font-family:inherit; padding:7px 10px; border-radius:8px;
  transition:background .16s ease;
}
.cor:hover:not([disabled]){ background:var(--areia); }
.cor[aria-current="true"]{ background:var(--terra-fundo); }
.cor__amostra{
  width:18px; height:18px; border-radius:5px; flex:none;
  border:1px solid rgba(0,0,0,.14);
}
.cor__nome{ font-size:.9rem; color:var(--tinta-suave); flex:1; text-align:left; }
.cor[aria-current="true"] .cor__nome{ color:var(--terra); font-weight:600; }
.cor__conta{
  font-family:'IBM Plex Mono',monospace; font-size:.68rem; color:var(--tinta-fraca);
}

.galeria-topo{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:16px; margin-bottom:20px;
}
.galeria-topo p{
  font-family:'IBM Plex Mono',monospace; font-size:.78rem;
  letter-spacing:.1em; color:var(--tinta-fraca); margin:0;
}
.vazio{ color:var(--tinta-suave); padding:40px 0; }

/* -- grade de obras -- */
.grade-obras{
  display:grid; grid-template-columns:repeat(4,1fr); gap:22px;
}
@media (max-width:1400px){ .grade-obras{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:1040px){ .grade-obras{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .grade-obras{ grid-template-columns:1fr; } }

/* título, artista e preço vivem SOBRE a imagem */
.obra-card{
  position:relative; display:block; text-decoration:none; overflow:hidden;
  border-radius:var(--raio); aspect-ratio:4/3;
  background:var(--areia);
  box-shadow:var(--sombra-card);
  transition:box-shadow .25s ease, transform .2s ease;
}
.obra-card:hover{ transform:translateY(-4px); box-shadow:var(--sombra-card-alta); }
.obra-card img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  transition:transform .55s ease;
}
.obra-card:hover img{ transform:scale(1.05); }
.obra-card::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top,
    rgba(18,12,8,.90) 0%, rgba(18,12,8,.62) 26%,
    rgba(18,12,8,.16) 55%, rgba(18,12,8,0) 78%);
}
.obra-card__txt{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:20px 20px 18px; color:var(--sobre-foto);
}
.obra-card__txt h3{
  font-size:1.12rem; line-height:1.22; margin:0; color:var(--sobre-foto);
  text-shadow:0 1px 14px rgba(0,0,0,.5); text-wrap:balance;
}
.obra-card__txt small{
  display:block; margin-top:5px;
  font-family:'IBM Plex Mono',monospace; font-size:.7rem;
  letter-spacing:.11em; text-transform:uppercase; color:var(--terra-suave);
  text-shadow:0 1px 12px rgba(0,0,0,.6);
}
.obra-card__txt p{
  margin:10px 0 0; font-size:.88rem; color:#E7DACC;
  text-shadow:0 1px 12px rgba(0,0,0,.6);
}
.obra-card__txt p b{ color:var(--sobre-foto); font-weight:600; }

/* ============================================================ uma obra == */

.obra-corpo{
  display:grid; grid-template-columns:1.25fr 1fr;
  gap:clamp(30px,4vw,60px); align-items:start;
}
@media (max-width:960px){ .obra-corpo{ grid-template-columns:1fr; } }

.visor{
  border-radius:var(--raio-g); overflow:hidden;
  background:var(--areia); box-shadow:var(--sombra-card);
}
.visor__foto{ width:100%; display:block; }

/* "na parede": simulação montada em CSS — a galeria ainda não tem mockup
   fotografado de cada obra                                                 */
.visor__parede{
  aspect-ratio:4/3;
  background:linear-gradient(170deg,#EFE6D9 0%,#E2D4C1 60%,#D6C6B0 100%);
  display:flex; align-items:center; justify-content:center;
}
.visor__quadro{
  width:56%; background:#fff;
  box-shadow:0 20px 44px rgba(51,38,28,.30);
  transition:box-shadow .3s ease;
}
.visor__quadro img{ width:100%; display:block; }
/* sem moldura: só a impressão, com a sombra mais discreta */
.visor__quadro:not([style*="border"]){ box-shadow:0 14px 30px rgba(51,38,28,.22); }
/* detalhe: a mesma foto bem ampliada, para mostrar textura */
.visor__detalhe{
  aspect-ratio:4/3;
  background-size:260%; background-position:center;
}

.miniaturas{ display:flex; gap:12px; margin-top:16px; }
.mini{
  flex:1; background:none; border:0; padding:0; cursor:pointer;
  font-family:inherit; text-align:center;
}
.mini img{
  width:100%; aspect-ratio:4/3; object-fit:cover;
  border-radius:10px; border:2px solid transparent;
  transition:border-color .18s ease, opacity .18s ease;
  opacity:.62;
}
.mini span{
  display:block; margin-top:7px;
  font-family:'IBM Plex Mono',monospace; font-size:.68rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--tinta-fraca);
}
.mini:hover img{ opacity:.85; }
.mini[aria-current="true"] img{ border-color:var(--terra); opacity:1; }
.mini[aria-current="true"] span{ color:var(--terra); }

/* -- coluna da direita -- */
.obra-info h1{ font-size:clamp(1.9rem,3vw,2.6rem); margin:6px 0 0; }
.obra__texto{ color:var(--tinta-suave); margin-top:16px; }
.obra__tiragem{
  font-family:'IBM Plex Mono',monospace; font-size:.76rem;
  letter-spacing:.06em; color:var(--tinta-fraca);
  padding:14px 0; margin:18px 0 0;
  border-top:1px solid var(--linha); border-bottom:1px solid var(--linha);
}
.obra__tiragem b{ color:var(--tinta); }

.aviso-exemplo{
  display:block; font-size:.82rem; margin:0 0 18px; padding:9px 13px;
  border-radius:10px;
}

.obra__grupo{ margin-top:30px; }
.obra__grupo h2{
  font-family:'Inter',sans-serif; font-size:1.02rem; font-weight:600;
  display:flex; align-items:center; gap:11px; margin-bottom:14px;
  letter-spacing:0;
}
.obra__grupo h2 span{
  width:24px; height:24px; border-radius:50%; flex:none;
  background:var(--terra); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-family:'IBM Plex Mono',monospace; font-size:.74rem;
}

.opcoes{ display:grid; gap:9px; }
.opcao{
  display:grid; grid-template-columns:1fr auto; align-items:center;
  gap:4px 14px;
  width:100%; text-align:left; cursor:pointer;
  background:var(--branco); border:1px solid var(--linha);
  border-radius:12px; padding:13px 16px;
  font-family:inherit;
  transition:border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.opcao:hover{ border-color:var(--linha-forte); }
.opcao[aria-current="true"]{
  border-color:var(--terra); background:var(--terra-fundo);
  box-shadow:0 0 0 2px rgba(167,81,15,.16);
}
.opcao__nome{ font-size:.96rem; font-weight:600; color:var(--tinta); }
.opcao__desc{
  grid-column:1; font-size:.81rem; color:var(--tinta-suave); line-height:1.4;
}
.opcao__valor{
  grid-column:2; grid-row:1 / span 2;
  font-family:'IBM Plex Mono',monospace; font-size:.83rem;
  color:var(--terra); white-space:nowrap;
}

/* opção com amostra da moldura ao lado */
.opcao--com-amostra{ grid-template-columns:52px 1fr auto; }
.opcao--com-amostra .opcao__nome{ grid-column:2; }
.opcao--com-amostra .opcao__desc{ grid-column:2; }
.opcao--com-amostra .opcao__valor{ grid-column:3; }
.opcao__foto{
  grid-column:1; grid-row:1 / span 2;
  width:52px; height:52px; border-radius:9px; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 8px rgba(51,38,28,.18);
}
/* o desenho: quadrado externo é a moldura, o interno é o passe-partout */
.opcao__foto > span{
  width:60%; height:60%; border-radius:2px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);
}
.opcao__foto--sem{
  background:var(--areia); color:var(--tinta-fraca); box-shadow:none;
  border:1px dashed var(--linha-forte);
}
.opcao__foto--sem svg{ width:22px; height:22px; }
img.opcao__foto{ object-fit:cover; }

.obra__fechar{
  margin-top:32px; padding-top:24px; border-top:1px solid var(--linha);
}
.obra__total{
  display:flex; align-items:baseline; justify-content:space-between;
  margin:0 0 18px;
}
.obra__total span{ font-size:.9rem; color:var(--tinta-suave); }
.obra__total b{
  font-family:'Fraunces',serif; font-size:clamp(1.7rem,2.6vw,2.2rem);
  font-weight:600; color:var(--tinta);
}
.obra__fechar .btn{ width:100%; }
.obra__nota{
  margin-top:14px; font-size:.8rem; color:var(--tinta-fraca); line-height:1.5;
}

/* ---------------------------------------------------------- animação -- */

.surge{ opacity:0; transform:translateY(22px); }
.surge.visivel{
  opacity:1; transform:none;
  transition:opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1);
}
@media (prefers-reduced-motion: reduce){ .surge{ opacity:1; transform:none; } }