/* Estilos do Atelier Gustavo Gomes que não cabem em widget de builder.
   Carregado pelo mu-plugin fluxxo-assets.php */

:root{
  --gg-ink:#110F12;
  /* Cores da marca, medidas no arquivo da logo entregue em 15/09.
     Sao so duas: azul e laranja. O magenta e o limao do mockup sairam. */
  --gg-azul:#2D7AB9;          /* azul da logo */
  --gg-laranja:#ED7424;       /* laranja da logo */
  /* As variacoes existem por contraste, nao por gosto:
     branco sobre o azul da logo da 4,6:1 e laranja sobre branco da 3,0:1.
     Faixa com texto branco usa o azul fechado (7,1:1).
     O laranja fechado ficou so pra TEXTO MIUDO sobre claro, que precisa de
     4,5:1. Titulo grande usa o laranja da marca mesmo: foi escolha do
     Gustavo em 15/09, e em corpo de 46px a leitura aguenta. */
  --gg-azul-fundo:#225C8B;
  --gg-azul-claro:#4E9AD8;   /* azul so p/ texto sobre escuro (6,3:1) */
  --gg-laranja-texto:#B4500F;
  --gg-suave:#6B6B6E;
  --gg-linha:#DCDBD8;
  --gg-papel2:#F1F0EE;
}

/* ---------- faixa rolante ---------- */
.gg-ticker{background:var(--gg-azul-fundo);color:#fff;overflow:hidden;padding:7px 0}
.gg-ticker__track{
  display:flex;gap:40px;width:max-content;
  animation:gg-slide 38s linear infinite;
}
.gg-ticker span{
  font-family:'Chakra Petch',system-ui,-apple-system,sans-serif;
  font-size:clamp(13px,1.5vw,18px);font-weight:700;font-style:italic;
  letter-spacing:.04em;white-space:nowrap;
}
@keyframes gg-slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- barra do rodapé ---------- */
.gg-strip{
  background:var(--gg-azul-fundo);color:#fff;
  display:flex;justify-content:space-between;align-items:center;gap:24px;
  padding:7px clamp(20px,5vw,64px);
  font-family:'Chakra Petch',system-ui,sans-serif;
}
.gg-strip b{font-size:clamp(12px,1.5vw,19px);font-weight:700;font-style:italic;letter-spacing:.04em}
.gg-strip span{font-size:12px}

@media (prefers-reduced-motion:reduce){
  .gg-ticker__track{animation:none}
}
@media (max-width:640px){
  .gg-strip{flex-direction:column;align-items:flex-start;gap:4px;text-align:left}
}

/* ---------- ficha de dados do projeto ---------- */
.gg-dados{
  display:flex;flex-wrap:wrap;gap:0;
  border-top:2px solid var(--gg-ink);margin:24px 0 32px;
}
.gg-dado{
  flex:1 1 160px;padding:14px 20px 16px 0;
  border-bottom:1px solid var(--gg-linha);
}
.gg-dado span{
  display:block;font-size:11px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gg-suave);margin-bottom:4px;
}
.gg-dado b{font-size:16px;font-weight:700;letter-spacing:-.01em}

/* ---------- grid de projetos ---------- */
.gg-dados + *{margin-top:0}

/* ================= HOME ================= */
.gg-hero{position:relative}
/* O Elementor poe position:relative no wrapper do widget, entao inset:0 no
   botao se resolvia contra um wrapper de altura zero e ele colava no topo.
   Centraliza pelo flex do proprio container, que e o que o Elementor ja usa. */
.gg-hero{justify-content:center;align-items:center}
.gg-play{
  position:static;width:84px;height:84px;border-radius:999px;
  border:2px solid rgba(255,255,255,.92);background:rgba(0,0,0,.15);
  display:grid;place-items:center;cursor:pointer;
  transition:transform .7s cubic-bezier(.32,.72,0,1),background .7s cubic-bezier(.32,.72,0,1);
}
.gg-play:hover{transform:scale(1.08);background:rgba(0,0,0,.35)}
.gg-play svg{width:28px;height:28px;fill:#fff;margin-left:5px}

.gg-disc{list-style:none;margin:0;padding:0;counter-reset:d}
.gg-disc li{
  counter-increment:d;border-top:1px solid var(--gg-ink);
  padding:24px 0 32px;display:grid;grid-template-columns:44px 1fr;gap:16px;
}
.gg-disc li:last-child{border-bottom:1px solid var(--gg-ink)}
.gg-disc li::before{
  content:"0" counter(d);font-size:13px;font-weight:700;letter-spacing:.1em;
  color:var(--gg-azul-fundo);padding-top:4px;
}
.gg-disc h3{font-size:clamp(17px,1.5vw,21px);font-weight:700;margin:0 0 6px}
.gg-disc p{margin:0;font-size:15px;line-height:1.5;color:var(--gg-suave)}

/* ---------- lema do Atelier ----------
   Veio do portfolio (pagina 16) e substituiu o manifesto palavra a palavra.
   Tarja laranja inclinada com o texto em tinta, e a versao em ingles em azul
   italico embaixo, sem tarja. A inclinacao e de 12 graus, medida no arquivo
   original: a tarja desloca 9px em 42px de altura.

   So a tarja e inclinada, o texto fica em pe. Por isso ela e um pseudo-
   elemento atras, e nao um skew no elemento inteiro.

   Caixa alta vem do CSS e nao do HTML: leitor de tela soletra palavra escrita
   em CAIXA, e texto copiado da pagina volta legivel. */
.gg-lema{margin:0}
.gg-lema__pt{margin:0;display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.gg-lema__tarja{
  position:relative;display:inline-block;
  padding:6px 20px 8px;
  isolation:isolate;
}
.gg-lema__tarja::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--gg-laranja);
  transform:skewX(-12deg);
  transform-origin:left center;
  transition:transform .9s cubic-bezier(.32,.72,0,1);
}
.gg-lema__tarja b{
  font-size:clamp(26px,4.2vw,54px);font-weight:700;
  text-transform:uppercase;letter-spacing:-.01em;line-height:1.06;
  color:var(--gg-ink);
}
.gg-lema__en{
  margin:14px 0 0;
  font-size:clamp(20px,3.1vw,42px);font-weight:600;font-style:italic;
  text-transform:uppercase;letter-spacing:-.01em;line-height:1.1;
  color:var(--gg-azul);
  transition:opacity .9s cubic-bezier(.32,.72,0,1),transform .9s cubic-bezier(.32,.72,0,1);
}

/* Estado ESCONDIDO e o de excecao, nao o padrao. Se o observador nunca rodar
   (movimento reduzido, JS fora do ar), o lema aparece inteiro em vez de
   sumir. O contrario ja aconteceu neste site. */
.gg-rv:not(.on) .gg-lema__tarja::before{transform:skewX(-12deg) scaleX(0)}
.gg-rv:not(.on) .gg-lema__en{opacity:0;transform:translateY(10px)}
.gg-lema__tarja:nth-child(2)::before{transition-delay:.14s}
.gg-lema__en{transition-delay:.3s}

.gg-mapa{position:relative;max-width:1180px;margin:0 auto}
.gg-mapa img{width:100%;display:block}
.gg-pin{
  position:absolute;transform:translate(-50%,-50%);width:26px;height:26px;padding:0;
  border:0;background:none;cursor:pointer;display:grid;place-items:center;
}
.gg-pin i{
  width:11px;height:11px;border-radius:999px;background:var(--gg-azul);
  transition:transform .7s cubic-bezier(.32,.72,0,1),background .7s cubic-bezier(.32,.72,0,1);
}
.gg-pin::before{
  content:"";position:absolute;width:11px;height:11px;border-radius:999px;
  border:1px solid var(--gg-azul);animation:gg-ping 2.8s cubic-bezier(.32,.72,0,1) infinite;
}
@keyframes gg-ping{0%{transform:scale(1);opacity:.9}70%,100%{transform:scale(3.4);opacity:0}}
.gg-pin:hover i{transform:scale(1.6);background:var(--gg-laranja)}
.gg-pin__tip{
  position:absolute;bottom:22px;left:50%;transform:translate(-50%,6px);
  background:#fff;color:var(--gg-ink);padding:8px 12px;border-radius:3px;
  white-space:nowrap;text-align:left;opacity:0;pointer-events:none;z-index:5;
  transition:opacity .5s,transform .5s;
}
.gg-pin:hover .gg-pin__tip,.gg-pin:focus-visible .gg-pin__tip{opacity:1;transform:translate(-50%,0)}
.gg-pin:hover,.gg-pin:focus-visible{z-index:6}
.gg-pin__tip strong{display:block;font-size:14px;font-weight:700}
.gg-pin__tip span{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--gg-suave)}

.gg-faq{border-top:1px solid var(--gg-linha)}
.gg-faq details{border-bottom:1px solid var(--gg-linha)}
.gg-faq summary{
  cursor:pointer;list-style:none;padding:24px 0;font-size:17px;font-weight:700;
  display:flex;gap:12px;align-items:baseline;
}
.gg-faq summary::-webkit-details-marker{display:none}
.gg-faq summary::before{content:"+";color:var(--gg-azul-fundo);font-weight:700}
.gg-faq details[open] summary::before{content:"\2013"}
.gg-faq p{margin:0 0 24px;font-size:15px;line-height:1.55;color:var(--gg-suave);max-width:62ch}

@media (prefers-reduced-motion:reduce){
  .gg-pin::before{animation:none;opacity:.4}
  .gg-tag .w{color:var(--gg-ink)}
}

/* ---------- ficha do pico ---------- */
.gg-pico{
  display:grid;grid-template-columns:.72fr 1.28fr;gap:clamp(24px,4vw,64px);
  align-items:start;max-width:1180px;margin:56px auto 64px;color:#fff;
}
.gg-pico__conta{
  font-size:12px;font-weight:700;letter-spacing:.2em;
  color:var(--gg-azul-claro);margin:0 0 12px;
}
.gg-pico__nome{
  font-size:clamp(28px,3.6vw,50px);font-weight:700;line-height:1.03;
  letter-spacing:-.03em;margin:0;color:#fff;
}
.gg-pico__onde{
  font-size:13px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.55);margin:12px 0 0;
}
.gg-pico__nav{display:flex;gap:8px;margin-top:32px}
.gg-pico__nav button{
  width:38px;height:38px;border-radius:999px;cursor:pointer;
  border:1px solid rgba(255,255,255,.16);background:none;color:#fff;
  display:grid;place-items:center;
  /* padding:0 e obrigatorio. O botao herdava 8px/16px de outro lugar, e com
     box-sizing:border-box isso deixava a caixa de conteudo com 4px de largura
     num botao de 38: a seta ficava 17px da borda esquerda e 5 da direita.
     Parecia problema do desenho do icone e era padding. */
  padding:0;
  transition:background .7s cubic-bezier(.32,.72,0,1),color .7s cubic-bezier(.32,.72,0,1);
}
.gg-pico__nav button:hover{background:var(--gg-laranja);color:var(--gg-ink);border-color:var(--gg-laranja)}
.gg-pico__nav svg{width:16px;height:16px;fill:currentColor}

.gg-pico__media{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:16px}
.gg-pico__media figure{margin:0;overflow:hidden;background:rgba(255,255,255,.05)}
.gg-pico__media > *{min-width:0}
.gg-pico__media img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}
.gg-pico__blank{
  aspect-ratio:16/7;display:flex;align-items:flex-end;padding:24px;color:var(--gg-ink);
}
.gg-pico__blank b{font-size:clamp(22px,3vw,40px);font-weight:700;line-height:.95;letter-spacing:-.03em}
.gg-pico__blank--0{background:var(--gg-azul)}
.gg-pico__blank--1{background:var(--gg-laranja)}
.gg-pico__blank--2{background:var(--gg-azul-fundo);color:#fff}
.gg-pico__blank--3{background:var(--gg-ink);color:#fff}
.gg-pico__blank--4{background:#fff}
.gg-pico.is-troca .gg-pico__media,
.gg-pico.is-troca .gg-pico__head > *{opacity:0;transform:translateY(10px)}
.gg-pico__media,.gg-pico__head > *{
  transition:opacity .45s cubic-bezier(.32,.72,0,1),transform .45s cubic-bezier(.32,.72,0,1);
}

/* ---------- lista de lugares ---------- */
.gg-places{
  display:grid;grid-template-columns:repeat(4,1fr);gap:32px;
  max-width:1180px;margin:0 auto;
}
.gg-place h3{
  font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#fff;
  padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,.16);margin:0 0 12px;
}
.gg-place ul{list-style:none;margin:0;padding:0}
.gg-place li button{
  border:0;background:none;padding:0;cursor:pointer;font:inherit;
  font-size:14px;line-height:1.7;letter-spacing:.06em;text-transform:uppercase;
  color:rgba(255,255,255,.62);text-align:left;
  transition:color .7s cubic-bezier(.32,.72,0,1);
}
.gg-place li button:hover,
.gg-place li button[aria-selected="true"]{color:var(--gg-laranja)}
.gg-pin[aria-selected="true"] i{transform:scale(1.6);background:var(--gg-laranja)}
.gg-pin[aria-selected="true"]::before{border-color:var(--gg-laranja)}

@media (max-width:1080px){
  .gg-pico{grid-template-columns:1fr;gap:32px}
  .gg-places{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .gg-pico__media{grid-auto-flow:row}
  .gg-pico__blank{aspect-ratio:16/9}
  .gg-places{grid-template-columns:1fr}
}

/* ---------- abre-seção com número gigante ---------- */
.gg-secnum{
  display:flex;align-items:baseline;gap:24px;
  border-top:2px solid currentColor;padding-top:16px;margin:0 0 56px;
}
.gg-secnum b{
  font-size:clamp(40px,7vw,88px);font-weight:700;
  line-height:.82;letter-spacing:-.04em;
}
.gg-secnum h2{
  font-size:clamp(22px,2.6vw,34px);font-weight:700;
  text-transform:uppercase;letter-spacing:.02em;margin:0;
}
.gg-secnum p{margin:0 0 0 auto;max-width:34ch;font-size:14px;text-align:right;color:var(--gg-suave)}
.gg-secnum--escuro{color:#fff;border-top-color:rgba(255,255,255,.16)}
.gg-secnum--escuro h2{color:#fff}
.gg-secnum--escuro p{color:rgba(255,255,255,.5)}

/* ---------- grid assimétrico de projetos ---------- */
.gg-shots{display:grid;gap:24px}
.gg-par{display:grid;grid-template-columns:1.32fr 1fr;gap:24px}
.gg-shot{position:relative;display:block;overflow:hidden;text-decoration:none;background:var(--gg-papel2)}
.gg-shot img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.4s cubic-bezier(.32,.72,0,1)}
.gg-shot:hover img{transform:scale(1.045)}
.gg-shot--banner img,.gg-shot--offset img{aspect-ratio:16/3.4}
.gg-shot--par img{aspect-ratio:4/3.4}
.gg-shot--offset{width:82%;margin-left:auto}
.gg-shot::after{
  content:"";position:absolute;inset:auto 0 0 0;height:45%;
  background:linear-gradient(to top,rgba(17,15,18,.72),rgba(17,15,18,0));
  opacity:0;transition:opacity .7s cubic-bezier(.32,.72,0,1);pointer-events:none;
}
.gg-shot:hover::after,.gg-shot:focus-within::after{opacity:1}
.gg-shot__cap{
  position:absolute;left:24px;right:24px;bottom:24px;color:#fff;z-index:2;
  opacity:0;transform:translateY(14px);
  transition:opacity .7s cubic-bezier(.32,.72,0,1),transform .7s cubic-bezier(.32,.72,0,1);
}
.gg-shot:hover .gg-shot__cap,.gg-shot:focus-within .gg-shot__cap{opacity:1;transform:translateY(0)}
.gg-shot__cap strong{display:block;font-size:19px;font-weight:700;letter-spacing:-.01em}
.gg-shot__cap span{font-size:13px;letter-spacing:.1em;text-transform:uppercase;opacity:.82}
.gg-shot__vazio{display:flex;align-items:flex-end;padding:24px;color:var(--gg-ink)}
.gg-shot--banner .gg-shot__vazio,.gg-shot--offset .gg-shot__vazio{aspect-ratio:16/3.4}
.gg-shot--par .gg-shot__vazio{aspect-ratio:4/3.4}
.gg-shot__vazio b{font-size:clamp(20px,2.6vw,34px);font-weight:700;line-height:.95;letter-spacing:-.03em}
.gg-shot__vazio--0{background:var(--gg-azul)}
.gg-shot__vazio--1{background:var(--gg-laranja)}
.gg-shot__vazio--2{background:var(--gg-azul-fundo);color:#fff}
.gg-shot__vazio--3{background:var(--gg-ink);color:#fff}
.gg-shot__vazio--4{background:var(--gg-papel2)}

/* ---------- números do World ---------- */
.gg-tally{
  display:flex;flex-wrap:wrap;gap:48px;max-width:1180px;margin:48px auto 0;
  border-top:1px solid rgba(255,255,255,.16);padding-top:24px;color:#fff;
}
.gg-tally div b{
  display:block;font-size:clamp(28px,4vw,44px);font-weight:700;
  line-height:1;letter-spacing:-.03em;
}
.gg-tally div span{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.55)}

@media (max-width:1080px){
  .gg-par{grid-template-columns:1fr}
  .gg-shot--offset{width:100%}
  .gg-secnum p{display:none}
}

/* ---------- grão: quebra a chapadura sem gradiente ---------- */
body::after{
  content:"";position:fixed;inset:0;z-index:9;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- entrada por rolagem ---------- */
.gg-rv{opacity:0;transform:translateY(48px);filter:blur(6px)}
.gg-rv.on{
  opacity:1;transform:none;filter:none;
  transition:opacity .85s cubic-bezier(.32,.72,0,1),
             transform .85s cubic-bezier(.32,.72,0,1),
             filter .85s cubic-bezier(.32,.72,0,1);
}
@media (prefers-reduced-motion:reduce){
  .gg-rv{opacity:1;transform:none;filter:none}
  body::after{display:none}
}

/* Container do Elementor 4 resolve altura por variavel: .e-con{min-height:var(--min-height)}.
   A folha dele carrega depois da nossa e tem a mesma especificidade, entao setar
   min-height direto perde no desempate. Setando a variavel, funciona.
   dvh em vez de vh pra nao dar salto na barra do Safari do iPhone. */
.gg-hero{--min-height:64dvh;min-height:64dvh}

/* foco visível no play, que é botão de verdade */
.gg-play:focus-visible{outline:3px solid var(--gg-laranja);outline-offset:4px}

/* ================= CELULAR ================= */
@media (max-width:767px){

  /* O hero é um mural panorâmico. Com altura de viewport em tela retrato,
     o cover recorta pra um filete de concreto e some com a obra.
     Em celular vira faixa de proporção fixa, mostrando o mural inteiro. */
  .gg-hero{
    --min-height:0;min-height:0;
    aspect-ratio:16/10;
    background-size:cover;background-position:center center;
  }
  .gg-play{width:64px;height:64px}
  .gg-play svg{width:22px;height:22px}

  /* Container "boxed" do Elementor põe os filhos dentro de .e-con-inner.
     Regra de flex no container não pega nada: tem que mirar o wrapper. */
  .elementor-element-ggtopo > .e-con-inner{
    gap:12px!important;flex-wrap:nowrap!important;
    justify-content:space-between!important;align-items:center!important;
  }
  .elementor-element-ggtopo{
    padding-left:16px!important;padding-right:16px!important;
  }
  .elementor-element-ggmarca .elementor-heading-title{font-size:15px!important}
  /* marca + hambúrguer + botão não cabem em 390px. O botão sai:
     o menu já tem Contato, e a âncora fica a um toque. */
  .elementor-element-ggbtn{display:none!important}
  .elementor-element-ggnav{flex:0 0 auto}
  .elementor-element-ggnav .elementor-widget-container{display:flex;align-items:center}

  /* faixa rolante não precisa de texto gigante no celular */
  .gg-ticker span{font-size:12px}

  /* abre-seção: número e título um sobre o outro cansam menos */
  .gg-secnum{gap:12px;margin-bottom:32px}

  /* statement: a régua vertical vira horizontal */
  .elementor-element-ggstmt2{
    border-left:0!important;border-top:2px solid #110F12!important;
    padding-left:0!important;padding-top:16px!important;
  }

  /* ficha do pico e grid já empilham, só falta respiro */
  .gg-pico{margin:32px auto 40px}
  .gg-disc li{grid-template-columns:32px 1fr;gap:12px;padding:16px 0 24px}
  .gg-shots{gap:16px}
  .gg-par{gap:16px}
}

/* tablet: o par assimétrico fica apertado antes de empilhar */
@media (min-width:768px) and (max-width:1023px){
  .gg-par{grid-template-columns:1fr 1fr}
  .gg-shot--offset{width:92%}
}

/* ---------- widget não pode encolher abaixo do conteúdo ----------
   Container do Elementor 4 é flex em coluna. Item de flex encolhe no eixo
   principal por padrão, então widget com filho de aspect-ratio (o grid de
   projetos, a ficha do pico) era medido menor que o conteúdo e vazava por
   cima da seção de baixo. flex-shrink:0 resolve na raiz. */
/* flex-shrink:0 foi removido daqui: impedia o widget de encolher e
   empurrava a coluna das disciplinas pra fora da tela no desktop. */

/* ---------- widget de shortcode com altura fixa ----------
   O Elementor renderiza o widget de shortcode com altura travada (32px aqui),
   e o conteúdo vazava por cima da seção seguinte. Altura tem que ser do conteúdo. */
.e-con > .elementor-widget,
.e-con-inner > .elementor-widget,
.elementor-widget-shortcode .elementor-shortcode{height:auto!important}

/* ---------- no celular o par vira bloco, não grid ----------
   Em grid de uma coluna, a altura do widget do Elementor era medida com o
   layout de desktop (uma linha de duas colunas) e a segunda peça vazava por
   cima da seção seguinte. Fluxo de bloco tem altura sempre correta. */
@media (max-width:767px){
  .gg-par{display:block}
  .gg-par > .gg-shot + .gg-shot{margin-top:16px}
  .gg-shots{display:block}
  .gg-shots > * + *{margin-top:16px}
}

/* ---------- container de projetos em fluxo de bloco no celular ----------
   O .e-con-inner do Elementor é flex em coluna e mede o widget do grid mais
   curto que o conteúdo: sobrava 190px vazando por cima da seção de baixo.
   Fluxo de bloco mede o filho corretamente e o container cresce junto. */
@media (max-width:767px){
  .elementor-element-ggproj > .e-con-inner{display:block}
  .elementor-element-ggproj > .e-con-inner > .elementor-widget + .elementor-widget{margin-top:24px}
}

/* ---------- colunas do 01 Since 2001 ----------
   Sem largura explicita a citacao empurra a lista pra fora da tela.
   min-width:0 e obrigatorio: item de flex nao encolhe abaixo do conteudo sem ele. */
@media (min-width:768px){
  .elementor-element-ggsince > .e-con-inner{align-items:flex-start}
  .elementor-element-ggsince1{flex:1 1 56%;min-width:0}
  .elementor-element-ggsince2{flex:1 1 40%;min-width:0}
  .elementor-element-ggstmt1,
  .elementor-element-ggstmt2{min-width:0}
  .elementor-element-ggman > .e-con-inner > .elementor-widget{min-width:0}
}

/* nada na pagina pode empurrar rolagem lateral */
html,body{overflow-x:hidden}
.e-con,.e-con-inner{max-width:100%}

/* ---------- composição do statement ----------
   Errado antes: space-between espalhou os tres elementos e virou ilha boiando
   no branco. No mockup isso e UM objeto tipografico denso, com o laranja colado
   na regua e o spray encostado no conjunto, nao decorando o canto. */
@media (min-width:768px){
  /* justify-content e align-items NAO vem daqui: o Elementor aplica
     `justify-content: var(--justify-content)` no .e-con-inner e a variavel
     vem da configuracao do container, em folha que carrega depois desta.
     Regra direta com a mesma especificidade perde calada. Isso mora em
     flex_justify_content / flex_align_items no _elementor_data. */
  .elementor-element-ggstmt > .e-con-inner{gap:0!important}

  /* o par de tipos anda junto, sem folga */
  .elementor-element-ggstmt1{margin:0 20px 0 0;min-width:0}
  .elementor-element-ggstmt2{margin:0;min-width:0}

  /* escala: este e o segundo momento mais forte da pagina, depois do hero */
  .elementor-element-ggstmt1 .elementor-heading-title{
    font-size:clamp(32px,3.6vw,48px)!important;line-height:1.05!important;
  }
  .elementor-element-ggstmt2 .elementor-heading-title{
    font-size:clamp(48px,7vw,96px)!important;line-height:.98!important;
    letter-spacing:-.035em!important;
  }
  .elementor-element-ggstmt2{padding-left:24px!important}

  /* o spray encosta no conjunto e sobe um pouco, como no desenho dele */
  /* o spray acompanha o bloco sem encostar na letra: folga de 40px e
     altura limitada a linha de baixo, senao ele sobe e cobre o "Creative" */
  .elementor-element-ggstmt3{
    margin:0 0 0 48px;align-self:center;
  }
  /* O adesivo desenhado a mao (1178x1303) e bem mais largo em relacao a
     altura que a lata chapada de antes (proporcao 0,90 contra 0,63). Na
     mesma largura ele ficaria 100px mais baixo e perderia presenca ao lado
     das tres linhas do "Creative visual arts". Por isso a largura sobe:
     o que importa aqui e a altura bater com o bloco de texto.
     A sombra propria do adesivo ja separa ele do fundo branco, entao nao
     precisa de contorno nem de caixa. */
  .elementor-element-ggstmt3 img{
    width:clamp(150px,18vw,290px)!important;max-width:none!important;
    transform:none;
  }
}

@media (max-width:767px){
  .elementor-element-ggstmt2 .elementor-heading-title{font-size:clamp(36px,11vw,56px)!important}
  .elementor-element-ggstmt1 .elementor-heading-title{font-size:clamp(24px,7vw,34px)!important}
  /* 120px era da lata antiga, que era estreita e alta. O adesivo e mais
     largo que alto, entao na mesma largura encolhia demais. */
  .elementor-element-ggstmt3 img{width:158px!important}
}

/* ---------- tablet em retrato ----------
   Abaixo de 1024 a tela ainda é mais alta que larga, e o mural panorâmico
   com altura de viewport vira um recorte de concreto. Mesma solução do
   celular: faixa de proporção fixa, que mostra a obra inteira. */
@media (max-width:1023px){
  .gg-hero{--min-height:0;min-height:0;aspect-ratio:16/9}
}

/* as duas colunas do 01 ficam em 379 e 270px no tablet: apertado demais.
   Empilhar dá largura de leitura confortável pros dois blocos. */
@media (max-width:1023px){
  .elementor-element-ggsince > .e-con-inner{flex-direction:column;gap:40px}
  .elementor-element-ggsince1,
  .elementor-element-ggsince2{flex:1 1 auto!important;width:100%}
}

/* ================= LOJA =================
   O WooCommerce chega com roxo, bordas arredondadas e tipografia do tema.
   Aqui ele passa a falar a mesma língua do resto do site. */

/* ---------- botões ---------- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce .wp-element-button{
  background:var(--gg-laranja);color:var(--gg-ink);
  font-family:'Chakra Petch',system-ui,sans-serif;font-weight:700;
  font-size:14px;letter-spacing:.04em;text-transform:none;
  border:0;border-radius:3px;padding:12px 20px;
  transition:background .7s cubic-bezier(.32,.72,0,1),transform .7s cubic-bezier(.32,.72,0,1);
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover{
  background:var(--gg-ink);color:#fff;
}
.woocommerce a.button:active,
.woocommerce button.button:active{transform:scale(.98)}
.woocommerce a.button:focus-visible,
.woocommerce button.button:focus-visible{outline:3px solid var(--gg-azul);outline-offset:3px}

/* ---------- preço ---------- */
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.woocommerce ul.products li.product .price{
  color:var(--gg-ink);font-family:'Chakra Petch',system-ui,sans-serif;
  font-weight:700;font-size:22px;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.woocommerce ul.products li.product .price{font-size:16px;font-weight:700}
.woocommerce div.product p.price del,
.woocommerce ul.products li.product .price del{color:var(--gg-suave);font-weight:400}
.woocommerce div.product p.price ins{text-decoration:none;color:var(--gg-laranja-texto)}

/* ---------- vitrine ---------- */
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family:'Chakra Petch',system-ui,sans-serif;font-weight:700;font-size:17px;
  letter-spacing:-.01em;color:var(--gg-ink);padding:12px 0 4px;
}
.woocommerce ul.products li.product a img{margin-bottom:0;border-radius:2px}
.woocommerce ul.products li.product{text-align:left}
.woocommerce ul.products li.product .button{margin-top:12px;display:inline-block}
.woocommerce span.onsale{
  background:var(--gg-laranja);color:var(--gg-ink);border-radius:2px;
  font-family:'Chakra Petch',system-ui,sans-serif;font-weight:700;font-size:12px;
  letter-spacing:.1em;text-transform:uppercase;min-height:0;min-width:0;
  padding:4px 10px;line-height:1.4;
}

/* ---------- quantidade ---------- */
.woocommerce .quantity .qty{
  border:2px solid var(--gg-ink);border-radius:3px;padding:10px 8px;
  font-family:'Chakra Petch',system-ui,sans-serif;font-weight:700;
  font-variant-numeric:tabular-nums;
}

/* ---------- migalhas ---------- */
.woocommerce .woocommerce-breadcrumb{
  font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gg-suave);margin-bottom:24px;
}
.woocommerce .woocommerce-breadcrumb a{color:var(--gg-suave);text-decoration:none}
.woocommerce .woocommerce-breadcrumb a:hover{color:var(--gg-azul-fundo)}

/* ---------- abas ---------- */
.woocommerce div.product .woocommerce-tabs ul.tabs{padding:0;margin:0 0 24px}
.woocommerce div.product .woocommerce-tabs ul.tabs::before{border-bottom-color:var(--gg-linha)}
.woocommerce div.product .woocommerce-tabs ul.tabs li{
  background:none;border:0;border-radius:0;margin:0 24px 0 0;padding:0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after{display:none}
.woocommerce div.product .woocommerce-tabs ul.tabs li a{
  font-family:'Chakra Petch',system-ui,sans-serif;font-weight:600;font-size:13px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--gg-suave);
  padding:10px 0;border-bottom:2px solid transparent;
  transition:color .7s cubic-bezier(.32,.72,0,1),border-color .7s cubic-bezier(.32,.72,0,1);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover{
  color:var(--gg-ink);border-bottom-color:var(--gg-azul);
}
.woocommerce div.product .woocommerce-tabs .panel h2{
  font-family:'Chakra Petch',system-ui,sans-serif;font-weight:700;font-size:24px;letter-spacing:-.02em;
}

/* ---------- meta e avisos ---------- */
.woocommerce div.product .product_meta{
  font-size:13px;color:var(--gg-suave);border-top:1px solid var(--gg-linha);
  padding-top:16px;margin-top:24px;
}
.woocommerce div.product .product_meta a{color:var(--gg-ink);text-decoration:none}
.woocommerce div.product .product_meta a:hover{color:var(--gg-azul-fundo)}
.woocommerce-message,.woocommerce-info,.woocommerce-error{
  border-top-color:var(--gg-azul);font-family:'Chakra Petch',system-ui,sans-serif;
}
.woocommerce-message::before,.woocommerce-info::before{color:var(--gg-azul-fundo)}

/* ---------- 404 ---------- */
.gg-404{max-width:680px}
.gg-404__num{
  font-size:clamp(72px,14vw,160px);font-weight:700;
  line-height:.8;letter-spacing:-.05em;color:var(--gg-azul);margin:0 0 16px;
}
.gg-404 h1{
  font-size:clamp(32px,5vw,56px);font-weight:700;letter-spacing:-.03em;
  line-height:1.04;margin:0 0 16px;
}
.gg-404__txt{font-size:17px;line-height:1.55;color:var(--gg-suave);margin:0 0 40px;max-width:52ch}
.gg-404__links{display:flex;flex-wrap:wrap;gap:24px;align-items:center}
.gg-404__links a{
  font-size:14px;font-weight:600;letter-spacing:.04em;color:var(--gg-ink);
  text-decoration:none;border-bottom:2px solid var(--gg-linha);padding-bottom:2px;
  transition:border-color .7s cubic-bezier(.32,.72,0,1),color .7s cubic-bezier(.32,.72,0,1);
}
.gg-404__links a:hover{border-bottom-color:var(--gg-azul-fundo);color:var(--gg-azul-fundo)}
.gg-404__cta{
  background:var(--gg-laranja);border:0!important;border-radius:3px;
  padding:12px 20px!important;font-weight:700;
}
.gg-404__cta:hover{background:var(--gg-ink);color:#fff!important}

/* ---------- carrinho no cabeçalho ---------- */
.elementor-menu-cart__toggle .elementor-button{background:transparent!important;padding:6px!important}
.elementor-menu-cart__toggle .elementor-button-icon{font-size:22px}

/* ---------- dados de contato ---------- */
.gg-contato__linha{
  font-size:15px;color:rgba(255,255,255,.72);margin:0 0 32px;
  padding-bottom:24px;border-bottom:1px solid rgba(255,255,255,.16);
}
.gg-contato__lista{list-style:none;margin:0;padding:0;display:grid;gap:20px}
.gg-contato__lista span{
  display:block;font-size:11px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(255,255,255,.45);margin-bottom:4px;
}
.gg-contato__lista a{
  font-size:17px;font-weight:600;color:#fff;text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.2);padding-bottom:2px;
  transition:color .7s cubic-bezier(.32,.72,0,1),border-color .7s cubic-bezier(.32,.72,0,1);
}
.gg-contato__lista a:hover{color:var(--gg-laranja);border-bottom-color:var(--gg-laranja)}

/* ---------- formulário no fundo escuro ---------- */
.elementor-element-ggform .elementor-field-group > label{
  font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.6);margin-bottom:8px;
}
.elementor-element-ggform .elementor-field-textual{
  background:#fff;border:0;border-radius:3px;padding:14px 16px;
  font-family:'Chakra Petch',system-ui,sans-serif;font-size:16px;color:var(--gg-ink);
}
.elementor-element-ggform .elementor-field-textual:focus{
  outline:3px solid var(--gg-laranja);outline-offset:2px;
}
.elementor-element-ggform .elementor-button{border-radius:3px;padding:14px 26px}
.elementor-element-ggform .elementor-button:hover{background:#fff!important}
.elementor-element-ggform .elementor-message{font-family:'Chakra Petch',system-ui,sans-serif}
.elementor-element-ggform .elementor-message.elementor-message-success{color:var(--gg-laranja)}

/* ---------- hero: faixa deliberada ----------
   A FOTO ja vem cortada. Foi recortada do PDF do mockup, onde o mural ja
   aparecia cortado pra caber numa faixa do layout, e as cabecas das quatro
   faces nao existem em pixel nenhum. mural-1 e a mesma parede, cortada ainda
   mais. Proporcao nenhuma conserta isso.
   Entao o corte vira escolha: faixa larga, enquadrada na altura dos olhos,
   que le como recorte de direcao e nao como foto que nao coube.
   TROCAR por aspect-ratio 1778/716 quando a foto original do Gustavo chegar. */
@media (min-width:1024px){
  .gg-hero{
    --min-height:0;min-height:0;
    aspect-ratio:16/5;max-height:58dvh;
    background-size:cover;background-position:center 38%;
  }
}
@media (min-width:768px) and (max-width:1023px){
  .gg-hero{aspect-ratio:16/7;background-position:center 38%}
}
@media (max-width:767px){
  .gg-hero{aspect-ratio:16/9;background-position:center 38%}
}

/* ---------- contato por WhatsApp ---------- */
.gg-wa__topo{
  font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gg-laranja);margin:0 0 24px;
}
.gg-wa__botoes{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 28px}
.gg-wa__btn{
  display:inline-block;padding:14px 22px;border-radius:3px;text-decoration:none;
  font-family:'Chakra Petch',system-ui,sans-serif;font-size:15px;font-weight:600;
  letter-spacing:.01em;color:#fff;border:1px solid rgba(255,255,255,.28);
  transition:background .7s cubic-bezier(.32,.72,0,1),color .7s cubic-bezier(.32,.72,0,1),
             border-color .7s cubic-bezier(.32,.72,0,1),transform .7s cubic-bezier(.32,.72,0,1);
}
.gg-wa__btn:hover{background:#fff;color:var(--gg-ink);border-color:#fff}
.gg-wa__btn:active{transform:scale(.98)}
.gg-wa__btn:focus-visible{outline:3px solid var(--gg-laranja);outline-offset:3px}
.gg-wa__btn--principal{
  background:var(--gg-laranja);color:var(--gg-ink);border-color:var(--gg-laranja);
  font-weight:700;
}
.gg-wa__btn--principal:hover{background:#fff;border-color:#fff}
.gg-wa__ou{font-size:14px;color:rgba(255,255,255,.55);margin:0}
.gg-wa__ou a{color:rgba(255,255,255,.85);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.28)}
.gg-wa__ou a:hover{color:var(--gg-laranja);border-bottom-color:var(--gg-laranja)}
@media (max-width:767px){
  .gg-wa__botoes{flex-direction:column;align-items:stretch}
  .gg-wa__btn{text-align:center}
}

/* ---------- galeria do projeto ----------
   As fotos do portfolio vem em proporcoes muito diferentes (parede de 2,5:1,
   escultura de 0,56:1). Grid com altura fixa cortaria as duas. Aqui cada foto
   entra na altura que tem, em uma ou duas colunas conforme o formato. */
.gg-galeria{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:24px;margin:48px 0 0;
}
.gg-galeria__item{margin:0}
.gg-galeria__item img{width:100%;height:auto;display:block;border-radius:2px}
.gg-galeria__item figcaption{
  font-size:13px;line-height:1.5;color:var(--gg-suave);margin-top:10px;
}
/* foto sozinha ocupa a largura toda, senao fica uma coluna orfa */
.gg-galeria__item:only-child{grid-column:1 / -1}

/* ---------- recortes de imprensa ----------
   Prova de terceiro, nao obra: entra menor, depois das fotos, com borda
   porque quase todo recorte tem fundo branco e sumiria no papel da pagina. */
.gg-imprensa{margin:56px 0 0;border-top:1px solid var(--gg-linha);padding-top:32px}
.gg-imprensa h2{
  font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gg-suave);margin:0 0 20px;
}
.gg-imprensa__lista{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:start}
.gg-imprensa__item{margin:0}
.gg-imprensa__item img{
  width:100%;height:auto;display:block;
  border:1px solid var(--gg-linha);border-radius:2px;
}

@media (max-width:767px){
  .gg-galeria{grid-template-columns:1fr;gap:16px}
  .gg-imprensa__lista{grid-template-columns:1fr 1fr;gap:12px}
}

/* ---------- capa da pagina de projeto ----------
   As capas vem em proporcao muito diferente: o paredao do MPF e 2,3:1, a
   escultura do CIEE e 0,56:1. Faixa fixa recortava a escultura no meio e
   ninguem via que ela tem vinte metros. Aqui a foto mantem a propria
   proporcao, com teto de altura: a larga preenche a largura, a alta para no
   teto e fica centrada no campo escuro, como parede de galeria. */
.gg-projcapa{background:var(--gg-ink)}
.gg-projcapa .elementor-widget-container,
.gg-projcapa .elementor-widget-theme-post-featured-image{display:flex;justify-content:center}
.gg-projcapa img{
  display:block;width:auto;max-width:100%;
  max-height:72dvh;height:auto;object-fit:contain;
}
@media (max-width:767px){
  .gg-projcapa img{max-height:56dvh}
}

/* ---------- parede de marcas ----------
   Trinta e sete logos. Em faixa unica eles ficariam do tamanho de um selo;
   em grid dao pra ler, e o proprio numero de linhas ja e o argumento.
   Altura travada e largura livre porque as marcas tem proporcoes muito
   diferentes: travar a largura deixaria a Unylaser gigante e a Art Battle
   minuscula. */
.gg-marcas{max-width:1180px;margin:0 auto}
/* Flex e nao grid de propósito: 37 nao divide por 6, e em grid a ultima
   linha ficava com uma marca sozinha encostada na esquerda, parecendo erro.
   Em flex com justify-content:center a sobra centraliza. */
.gg-marcas__grid{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:clamp(22px,3vw,46px) clamp(16px,2.5vw,32px);
}
.gg-marca{
  flex:0 0 calc((100% - 5 * clamp(16px,2.5vw,32px)) / 6);
  display:flex;align-items:center;justify-content:center;min-width:0;
}
.gg-marca img{
  max-width:100%;max-height:46px;width:auto;height:auto;display:block;
  opacity:.78;
  transition:opacity .7s cubic-bezier(.32,.72,0,1);
}
.gg-marca:hover img{opacity:1}
.gg-marcas__conta{
  margin:clamp(32px,4vw,56px) 0 0;padding-top:20px;
  border-top:1px solid var(--gg-linha);
  font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gg-suave);
}
.gg-marcas__conta b{color:var(--gg-ink);font-size:14px;letter-spacing:.1em}

@media (max-width:1023px){
  .gg-marca{flex:0 0 calc((100% - 3 * 24px) / 4)}
  .gg-marca img{max-height:38px}
}
@media (max-width:600px){
  .gg-marcas__grid{gap:26px 16px}
  .gg-marca{flex:0 0 calc((100% - 2 * 16px) / 3)}
  .gg-marca img{max-height:32px}
}


/* ---------- blocos que estavam encostados na esquerda ----------
   Pedido do Gustavo em 15/09. O container e de 1280, mas o conteudo do
   statement e do manifesto soma bem menos que isso e o resto virava um vazio
   de quase 400px so do lado direito, que lia como erro de montagem e nao
   como respiro. Centralizar so a partir de 768: no celular eles empilham e
   texto centralizado fica pior de ler. */
/* (a centralizacao do ggman tambem mora na configuracao do container,
   pelo mesmo motivo do ggstmt) */

/* A secao da bio e diferente: a foto sangra na borda esquerda de proposito,
   entao centralizar o par so criaria uma folga torta do lado de la. Aqui o
   que sobrava era a coluna do FAQ nao chegar na borda direita. Ela passa a
   ocupar o que resta, e a foto acompanha a altura da secao em vez de parar
   no meio e deixar um degrau branco. */
@media (min-width:768px){
  .elementor-element-ggbio > .e-con-inner{align-items:stretch}
  .elementor-element-ggbioi{flex:0 0 46%;min-width:0;align-self:stretch}
  .elementor-element-ggbioi .elementor-widget-container,
  .elementor-element-ggbioi figure,
  .elementor-element-ggbioi a{height:100%}
  .elementor-element-ggbioi img{width:100%;height:100%;object-fit:cover;display:block}
  .elementor-element-ggbiof{flex:1 1 auto;min-width:0}
}

/* ---------- botao de "ver todos" ----------
   O grid da home mostra cinco dos onze projetos. Sem saida dali, os outros
   seis so existem pra quem adivinhar a URL do arquivo. */
.gg-maisproj{margin:40px 0 0;display:flex;justify-content:center}
.gg-maisproj a{
  display:inline-flex;align-items:center;gap:12px;
  font-family:'Chakra Petch',system-ui,sans-serif;
  font-size:15px;font-weight:700;letter-spacing:.02em;
  color:var(--gg-ink);text-decoration:none;
  padding:14px 26px;border:2px solid var(--gg-ink);border-radius:3px;
  transition:background .7s cubic-bezier(.32,.72,0,1),color .7s cubic-bezier(.32,.72,0,1),
             transform .7s cubic-bezier(.32,.72,0,1);
}
.gg-maisproj a::after{
  content:"";width:18px;height:2px;background:currentColor;
  transition:width .7s cubic-bezier(.32,.72,0,1);
}
.gg-maisproj a:hover{background:var(--gg-ink);color:#fff}
.gg-maisproj a:hover::after{width:28px}
.gg-maisproj a:active{transform:scale(.98)}
.gg-maisproj a:focus-visible{outline:3px solid var(--gg-laranja);outline-offset:3px}
.gg-maisproj b{font-weight:700}
.gg-maisproj span{
  font-weight:400;font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  opacity:.55;
}

/* No celular a linha mais longa do lema ("assim como na vida.") encosta na
   borda: sao 19 caracteres em caixa alta mais o respiro da tarja. Tipo e
   respiro menores, senao a tarja estoura a tela. */
@media (max-width:600px){
  .gg-lema__tarja{padding:5px 14px 7px}
  .gg-lema__tarja b{font-size:clamp(21px,5.6vw,30px)}
  .gg-lema__pt{gap:8px}
  .gg-lema__en{font-size:clamp(17px,4.4vw,24px);margin-top:12px}
}

/* ---------- subdivisoes do WORLD ----------
   A secao passou a cobrir tres assuntos (viagens, coletivos e o livro), entao
   precisa de rotulo interno. Mesma familia visual dos titulos de coluna da
   lista de lugares: miudo, em caixa, bem espacado, com regua em cima. */
.gg-wrotulo{
  max-width:1180px;margin:0 auto 24px;padding-top:20px;
  border-top:1px solid rgba(255,255,255,.16);
  font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.55);
}
.gg-wbloco{max-width:1180px;margin:56px auto 0}
.gg-wbloco .gg-wrotulo{margin-bottom:28px}

.gg-coletivos{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px;max-width:760px;
}
.gg-coletivos li{
  border-left:2px solid var(--gg-laranja);padding:2px 0 2px 18px;
  display:flex;flex-direction:column;gap:6px;
}
.gg-coletivos b{
  font-size:clamp(19px,2.2vw,26px);font-weight:700;letter-spacing:-.01em;color:#fff;
}
.gg-coletivos a{
  font-size:14px;letter-spacing:.06em;color:var(--gg-laranja);text-decoration:none;
  border-bottom:1px solid transparent;width:max-content;
  transition:border-color .7s cubic-bezier(.32,.72,0,1);
}
.gg-coletivos a:hover{border-bottom-color:var(--gg-laranja)}
.gg-coletivos a:focus-visible{outline:3px solid var(--gg-laranja);outline-offset:3px}

@media (max-width:640px){
  .gg-coletivos{grid-template-columns:1fr;gap:20px}
  .gg-wbloco{margin-top:40px}
}

/* ==================================================================
   PAGINAS SEM ELEMENTOR
   Carrinho, finalizar compra, minha conta e as paginas de texto caem
   no template do Hello Elementor, que nao tem largura maxima nem
   respiro: o titulo encostava na faixa rolante e a linha de leitura
   ia de ponta a ponta. A classe .gg-simples vem do mu-plugin.
   ================================================================== */
.gg-simples main.site-main{
  max-width:1280px;margin:0 auto;
  padding:clamp(48px,6vw,80px) 20px clamp(72px,8vw,110px);
}
.gg-simples .page-header{margin:0 0 clamp(28px,4vw,44px)}
.gg-simples .entry-title{
  font-family:'Chakra Petch',system-ui,sans-serif;
  font-size:clamp(30px,4.4vw,52px);font-weight:700;letter-spacing:-.03em;
  line-height:1.04;color:var(--gg-ink);margin:0;
}

/* texto corrido das paginas legais: medida de leitura, nao largura da tela */
.gg-simples .page-content > h2,
.gg-simples .page-content > h3,
.gg-simples .page-content > p,
.gg-simples .page-content > ul,
.gg-simples .page-content > ol{max-width:68ch}
.gg-simples .page-content h2{
  font-size:clamp(20px,2.4vw,27px);font-weight:700;letter-spacing:-.02em;
  margin:44px 0 12px;
}
.gg-simples .page-content h3{
  font-size:clamp(17px,2vw,20px);font-weight:600;margin:32px 0 8px;
}
.gg-simples .page-content p,
.gg-simples .page-content li{font-size:16px;line-height:1.65;color:#3A3A3E}
.gg-simples .page-content li{margin-bottom:6px}
.gg-simples .page-content a{color:var(--gg-azul-fundo);text-decoration:underline;text-underline-offset:3px}
.gg-simples .page-content a:hover{color:var(--gg-ink)}

/* ==================================================================
   CARRINHO E CHECKOUT EM BLOCOS
   Estas duas paginas NAO usam a marcacao classica do WooCommerce, e
   sim os blocos (wc-block-*). Todo o CSS de loja que ja existe acima
   nao alcanca nada aqui: sao outros nomes de classe. Descobri isso
   olhando o conteudo das paginas, que comeca em wp:woocommerce/cart.
   ================================================================== */

/* ---------- tipografia comum dos blocos ---------- */
.wc-block-cart,.wc-block-checkout{
  font-family:'Chakra Petch',system-ui,sans-serif;color:var(--gg-ink);
}
.wc-block-cart-items__header,
.wc-block-cart__totals-title{
  font-family:'Chakra Petch',system-ui,sans-serif!important;
  font-size:12px!important;font-weight:700!important;
  letter-spacing:.18em!important;text-transform:uppercase!important;
  color:var(--gg-suave)!important;
}
.wc-block-components-checkout-step__title{
  font-family:'Chakra Petch',system-ui,sans-serif!important;
  font-size:13px!important;font-weight:700!important;
  letter-spacing:.14em!important;text-transform:uppercase!important;
  color:var(--gg-ink)!important;
}
.wc-block-components-product-name{
  font-weight:700;font-size:17px;letter-spacing:-.01em;
  color:var(--gg-ink)!important;text-decoration:none!important;
  border-bottom:1px solid transparent;
  transition:border-color .7s cubic-bezier(.32,.72,0,1);
}
.wc-block-components-product-name:hover{border-bottom-color:var(--gg-ink)}
.wc-block-components-product-metadata__description p{
  font-size:13px;line-height:1.5;color:var(--gg-suave);
}
.wc-block-components-product-price__value,
.wc-block-components-formatted-money-amount,
.wc-block-formatted-money-amount{font-variant-numeric:tabular-nums;font-weight:700}
.wc-block-components-totals-item__label{color:var(--gg-suave)}
.wc-block-components-totals-footer-item{font-size:19px}
.wc-block-cart-items__row{border-color:var(--gg-linha)!important}

/* ---------- botoes dos blocos ----------
   Mesma regra do resto do site: laranja e acao, tinta no hover. */
.wc-block-components-button:not(.is-link),
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button{
  background:var(--gg-laranja)!important;color:var(--gg-ink)!important;
  border:0!important;border-radius:3px!important;
  font-family:'Chakra Petch',system-ui,sans-serif!important;
  font-weight:700!important;font-size:15px!important;letter-spacing:.02em!important;
  text-decoration:none!important;padding:15px 24px!important;
  transition:background .7s cubic-bezier(.32,.72,0,1),color .7s cubic-bezier(.32,.72,0,1),
             transform .7s cubic-bezier(.32,.72,0,1);
}
.wc-block-components-button:not(.is-link):hover,
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover{
  background:var(--gg-ink)!important;color:#fff!important;
}
.wc-block-components-button:not(.is-link):active,
.wc-block-components-checkout-place-order-button:active{transform:scale(.98)}
.wc-block-components-button:not(.is-link):focus-visible,
.wc-block-components-checkout-place-order-button:focus-visible{
  outline:3px solid var(--gg-azul)!important;outline-offset:3px!important;
}
.wc-block-components-button__text,
.wc-block-components-checkout-place-order-button__text{text-decoration:none!important}

/* ---------- campos do checkout ---------- */
.wc-block-components-text-input input,
.wc-block-components-country-input select,
.wc-block-components-state-input select,
.wc-block-components-textarea{
  border:2px solid var(--gg-linha)!important;border-radius:3px!important;
  font-family:'Chakra Petch',system-ui,sans-serif!important;font-size:16px!important;
  color:var(--gg-ink)!important;
  transition:border-color .5s cubic-bezier(.32,.72,0,1);
}
.wc-block-components-text-input input:focus,
.wc-block-components-country-input select:focus,
.wc-block-components-textarea:focus{
  border-color:var(--gg-ink)!important;
  outline:3px solid var(--gg-laranja)!important;outline-offset:2px!important;
}
.wc-block-components-text-input label{color:var(--gg-suave)!important}
.wc-block-components-checkout-step__description,
.wc-block-checkout__guest-checkout-notice{font-size:13px;color:var(--gg-suave)}

/* ---------- painel do resumo e avisos ---------- */
.wc-block-components-sidebar .wc-block-components-panel,
.wc-block-cart__sidebar,
.wc-block-checkout__no-payment-methods-notice{border-radius:3px}
.wc-block-components-checkout-order-summary__title{
  font-family:'Chakra Petch',system-ui,sans-serif!important;font-weight:700!important;
}
.wc-block-checkout__terms{font-size:13px;color:var(--gg-suave)}
.wc-block-checkout__terms a{color:var(--gg-azul-fundo)}

/* ==================================================================
   MINHA CONTA (marcacao classica, entao o CSS de loja la de cima pega)
   ================================================================== */
.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-form-register,
.woocommerce-account .woocommerce-ResetPassword{
  max-width:440px;border:1px solid var(--gg-linha)!important;border-radius:3px;
  padding:28px!important;
}
.woocommerce-account .woocommerce-form-login label,
.woocommerce-account .woocommerce-form-register label{
  font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gg-suave);margin-bottom:6px;display:block;
}
.woocommerce-account .woocommerce-form-login input.input-text,
.woocommerce-account .woocommerce-form-register input.input-text{
  border:2px solid var(--gg-linha);border-radius:3px;padding:12px 14px;
  font-family:'Chakra Petch',system-ui,sans-serif;font-size:16px;width:100%;
}
.woocommerce-account .woocommerce-form-login input.input-text:focus,
.woocommerce-account .woocommerce-form-register input.input-text:focus{
  border-color:var(--gg-ink);outline:3px solid var(--gg-laranja);outline-offset:2px;
}
.woocommerce-account h2{
  font-size:clamp(20px,2.6vw,26px);font-weight:700;letter-spacing:-.02em;margin:0 0 16px;
}
.woocommerce-account .woocommerce-LostPassword a{
  color:var(--gg-azul-fundo);font-size:14px;text-underline-offset:3px;
}
.woocommerce-account .woocommerce-LostPassword a:hover{color:var(--gg-ink)}
.woocommerce-account .woocommerce-MyAccount-navigation ul{list-style:none;margin:0;padding:0}
.woocommerce-account .woocommerce-MyAccount-navigation a{
  display:block;padding:10px 0;color:var(--gg-ink);text-decoration:none;
  border-bottom:1px solid var(--gg-linha);font-weight:600;font-size:15px;
}
.woocommerce-account .woocommerce-MyAccount-navigation .is-active a{color:var(--gg-laranja-texto)}

@media (max-width:640px){
  .gg-simples main.site-main{padding-left:16px;padding-right:16px}
}

/* ==================================================================
   CHECKOUT CLASSICO
   A pagina voltou pra marcacao classica porque o checkout em blocos
   nao renderiza CPF nem numero do endereco (o plugin brasileiro so
   registra esses campos no classico). O visual abaixo repete o que
   ja vale pro resto da loja.
   ================================================================== */
.woocommerce form.checkout h3,
.woocommerce-checkout h3#order_review_heading{
  font-family:'Chakra Petch',system-ui,sans-serif;
  font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gg-ink);margin:0 0 20px;padding-bottom:12px;
  border-bottom:1px solid var(--gg-linha);
}
.woocommerce form .form-row label{
  font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gg-suave);margin-bottom:6px;
}
.woocommerce form .form-row label .required{color:var(--gg-laranja-texto);border:0}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection--single{
  border:2px solid var(--gg-linha)!important;border-radius:3px!important;
  padding:12px 14px!important;height:auto!important;
  font-family:'Chakra Petch',system-ui,sans-serif!important;font-size:16px!important;
  color:var(--gg-ink)!important;background:#fff!important;
  transition:border-color .5s cubic-bezier(.32,.72,0,1);
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus{
  border-color:var(--gg-ink)!important;
  outline:3px solid var(--gg-laranja)!important;outline-offset:2px!important;
}
.woocommerce form .form-row.woocommerce-invalid input.input-text{
  border-color:var(--gg-laranja-texto)!important;
}
.woocommerce form .form-row.woocommerce-validated input.input-text{
  border-color:var(--gg-linha)!important;
}
.woocommerce form .form-row{margin-bottom:18px}

/* resumo do pedido */
.woocommerce-checkout #order_review{
  border:1px solid var(--gg-linha);border-radius:3px;padding:24px;
}
.woocommerce table.shop_table{
  border:0;border-radius:0;font-family:'Chakra Petch',system-ui,sans-serif;
}
.woocommerce table.shop_table th{
  font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gg-suave);border-bottom:1px solid var(--gg-linha);padding:10px 0;
}
.woocommerce table.shop_table td{
  border-top:1px solid var(--gg-linha);padding:12px 0;font-size:15px;
}
.woocommerce table.shop_table tfoot .order-total td,
.woocommerce table.shop_table tfoot .order-total th{
  font-size:19px;font-weight:700;border-top:2px solid var(--gg-ink);
}
.woocommerce table.shop_table .amount{font-variant-numeric:tabular-nums;font-weight:700}

/* barra do cupom e avisos */
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info,
.woocommerce .checkout_coupon{
  border-radius:3px;font-family:'Chakra Petch',system-ui,sans-serif;font-size:14px;
}
.woocommerce-checkout #payment{background:transparent;border-radius:3px}
.woocommerce-checkout #payment div.form-row{padding:16px 0 0}
.woocommerce-checkout #place_order{width:100%;font-size:16px!important;padding:16px 24px!important}

@media (max-width:767px){
  .woocommerce-checkout #order_review{padding:16px}
}

/* ---------- botao flutuante de WhatsApp ----------
   Laranja e nao verde do WhatsApp: no site inteiro laranja e acao, e o icone
   ja diz sozinho de que aplicativo se trata. Texto em tinta sobre o laranja
   da 6,5:1, que passa folgado.

   Nao aparece no carrinho nem no checkout: la ele cobriria o resumo do pedido
   e o botao de finalizar bem na hora da compra. Isso e controlado no PHP.

   env(safe-area-inset-bottom) e por causa da barra do iPhone: sem isso o
   botao fica embaixo dela em tela cheia. */
.gg-zap{
  position:fixed;z-index:900;
  right:clamp(16px,2.4vw,28px);
  bottom:calc(clamp(16px,2.4vw,28px) + env(safe-area-inset-bottom,0px));
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 20px 14px 16px;border-radius:999px;
  background:var(--gg-laranja);color:var(--gg-ink);text-decoration:none;
  font-family:'Chakra Petch',system-ui,sans-serif;
  font-size:15px;font-weight:700;letter-spacing:.01em;line-height:1;
  box-shadow:0 10px 30px rgba(17,15,18,.22);
  transition:background .7s cubic-bezier(.32,.72,0,1),
             color .7s cubic-bezier(.32,.72,0,1),
             transform .7s cubic-bezier(.32,.72,0,1),
             box-shadow .7s cubic-bezier(.32,.72,0,1);
}
.gg-zap svg{width:24px;height:24px;fill:currentColor;flex:0 0 auto;display:block}
.gg-zap:hover{
  background:var(--gg-ink);color:#fff;
  transform:translateY(-2px);
  box-shadow:0 16px 38px rgba(17,15,18,.3);
}
.gg-zap:active{transform:translateY(0) scale(.98)}
.gg-zap:focus-visible{outline:3px solid var(--gg-ink);outline-offset:3px}

/* No celular so o icone: rotulo ocupa quase um terco da largura da tela e
   cobre conteudo. O aria-label continua dizendo o que o botao faz. */
@media (max-width:640px){
  .gg-zap{padding:0;width:54px;height:54px;justify-content:center;gap:0}
  .gg-zap span{display:none}
}
@media (prefers-reduced-motion:reduce){
  .gg-zap{transition:none}
  .gg-zap:hover{transform:none}
}

/* No fim da pagina o botao cobriria o texto da faixa azul. Empurrar a faixa
   pra dentro resolveria, mas custaria 250px de recuo o tempo todo pra
   resolver um encontro que so acontece no ultimo rolar.
   Melhor: o botao sai de cena quando a secao de contato ou o rodape entram na
   tela. Nessa altura ja existem quatro botoes de WhatsApp na pagina, entao o
   flutuante ali e repeticao, nao ajuda.
   Se o JS nao rodar, ele simplesmente fica visivel: some e o estado de
   excecao, aparecer e o padrao. */
.gg-zap.is-oculto{
  opacity:0;transform:translateY(14px) scale(.94);pointer-events:none;
}

/* ---------- foto do mapa: botao, nao figura ----------
   Vira botao pra quem navega por teclado alcancar e pro cursor avisar que
   aquilo abre. Reset de botao porque o tema entrega borda e respiro proprios. */
/* O seletor carrega o pai porque a regra de botao do tema ganhava no
   desempate e devolvia o cursor pra "pointer". Aqui o cursor precisa dizer
   que amplia, nao que navega. */
.gg-pico__media .gg-pico__foto{
  margin:0;padding:0;border:0;background:rgba(255,255,255,.05);
  overflow:hidden;cursor:zoom-in;display:block;width:100%;
  position:relative;
}
.gg-pico__foto img{
  transition:transform 1.2s cubic-bezier(.32,.72,0,1),opacity .6s cubic-bezier(.32,.72,0,1);
}
.gg-pico__foto:hover img{transform:scale(1.04);opacity:.88}
.gg-pico__foto:focus-visible{outline:3px solid var(--gg-laranja);outline-offset:3px}

/* ---------- lupa ----------
   Fundo tinta quase opaco em vez de preto puro: o preto do site e #110F12 e
   o corte com o resto da pagina fica mais natural assim. */
.gg-lupa{
  position:fixed;inset:0;z-index:1000;
  display:flex;align-items:center;justify-content:center;
  flex-direction:column;gap:20px;
  padding:clamp(16px,4vw,48px);
  background:rgba(17,15,18,.95);
  opacity:0;transition:opacity .3s cubic-bezier(.32,.72,0,1);
}
.gg-lupa.on{opacity:1}
.gg-lupa[hidden]{display:none}

.gg-lupa__quadro{
  margin:0;display:flex;flex-direction:column;align-items:center;gap:14px;
  max-width:100%;min-height:0;
}
.gg-lupa__quadro img{
  max-width:min(100%,1400px);max-height:76dvh;
  width:auto;height:auto;object-fit:contain;display:block;
  transform:scale(.97);
  transition:transform .45s cubic-bezier(.32,.72,0,1);
}
.gg-lupa.on .gg-lupa__quadro img{transform:scale(1)}
.gg-lupa__quadro figcaption{
  font-family:'Chakra Petch',system-ui,sans-serif;
  font-size:14px;line-height:1.5;color:rgba(255,255,255,.62);
  text-align:center;max-width:66ch;margin:0;
}

.gg-lupa__barra{display:flex;align-items:center;gap:20px}
.gg-lupa__conta{
  font-family:'Chakra Petch',system-ui,sans-serif;
  font-size:12px;font-weight:700;letter-spacing:.2em;
  color:rgba(255,255,255,.55);margin:0;font-variant-numeric:tabular-nums;
}
.gg-lupa__ant,.gg-lupa__prox,.gg-lupa__fecha{
  width:44px;height:44px;padding:0;border-radius:999px;cursor:pointer;
  border:1px solid rgba(255,255,255,.2);background:none;color:#fff;
  display:grid;place-items:center;
  transition:background .7s cubic-bezier(.32,.72,0,1),
             color .7s cubic-bezier(.32,.72,0,1),
             border-color .7s cubic-bezier(.32,.72,0,1);
}
.gg-lupa__ant svg,.gg-lupa__prox svg,.gg-lupa__fecha svg{
  width:18px;height:18px;fill:currentColor;
}
.gg-lupa__ant:hover,.gg-lupa__prox:hover,.gg-lupa__fecha:hover{
  background:var(--gg-laranja);color:var(--gg-ink);border-color:var(--gg-laranja);
}
.gg-lupa__ant:focus-visible,.gg-lupa__prox:focus-visible,.gg-lupa__fecha:focus-visible{
  outline:3px solid var(--gg-laranja);outline-offset:3px;
}
.gg-lupa__fecha{position:absolute;top:clamp(12px,2.4vw,28px);right:clamp(12px,2.4vw,28px)}
.gg-lupa__ant[hidden],.gg-lupa__prox[hidden],.gg-lupa__conta[hidden]{display:none}

/* enquanto a lupa esta aberta a pagina de tras nao rola */
html.gg-travado{overflow:hidden}

@media (max-width:640px){
  .gg-lupa__quadro img{max-height:66dvh}
  .gg-lupa__barra{gap:14px}
}
@media (prefers-reduced-motion:reduce){
  .gg-lupa,.gg-lupa__quadro img,.gg-pico__foto img{transition:none}
  .gg-lupa__quadro img{transform:none}
  .gg-pico__foto:hover img{transform:none}
}

/* ---------- botao de ampliar nas galerias de projeto ----------
   Mesmo papel do .gg-pico__foto no mapa, mas aqui o botao mora dentro de um
   <figure> que ja tem legenda, entao ele so embrulha a imagem. */
.gg-galeria__item .gg-amplia,
.gg-imprensa__item .gg-amplia{
  display:block;width:100%;margin:0;padding:0;border:0;background:none;
  cursor:zoom-in;overflow:hidden;border-radius:2px;
}
.gg-galeria__item .gg-amplia img,
.gg-imprensa__item .gg-amplia img{
  transition:transform 1.2s cubic-bezier(.32,.72,0,1),opacity .6s cubic-bezier(.32,.72,0,1);
}
.gg-galeria__item .gg-amplia:hover img{transform:scale(1.03);opacity:.9}
.gg-imprensa__item .gg-amplia:hover img{opacity:.78}
.gg-galeria__item .gg-amplia:focus-visible,
.gg-imprensa__item .gg-amplia:focus-visible{
  outline:3px solid var(--gg-laranja);outline-offset:3px;
}
/* o recorte ja tem borda propria no figure; dentro do botao ela ficaria dupla */
.gg-imprensa__item .gg-amplia img{border:0}
.gg-imprensa__item{border:1px solid var(--gg-linha);border-radius:2px;overflow:hidden}

@media (prefers-reduced-motion:reduce){
  .gg-galeria__item .gg-amplia img,
  .gg-imprensa__item .gg-amplia img{transition:none}
  .gg-galeria__item .gg-amplia:hover img{transform:none}
}

/* ---------- rodape da parede de marcas: contagem + clipagem ----------
   O botao da clipagem mora aqui porque faz o mesmo trabalho da parede:
   provar por terceiro. */
.gg-marcas__rodape{
  margin:clamp(32px,4vw,56px) 0 0;padding-top:20px;
  border-top:1px solid var(--gg-linha);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:20px;
}
.gg-marcas__rodape .gg-marcas__conta{margin:0;padding:0;border:0}
.gg-marcas__clip{
  display:inline-flex;align-items:center;gap:10px;
  font-family:'Chakra Petch',system-ui,sans-serif;
  font-size:14px;font-weight:700;letter-spacing:.02em;
  color:var(--gg-ink);text-decoration:none;
  padding:12px 20px;border:2px solid var(--gg-ink);border-radius:3px;
  transition:background .7s cubic-bezier(.32,.72,0,1),
             color .7s cubic-bezier(.32,.72,0,1),
             transform .7s cubic-bezier(.32,.72,0,1);
}
.gg-marcas__clip svg{width:15px;height:15px;fill:currentColor;flex:0 0 auto}
.gg-marcas__clip:hover{background:var(--gg-ink);color:#fff}
.gg-marcas__clip:active{transform:scale(.98)}
.gg-marcas__clip:focus-visible{outline:3px solid var(--gg-laranja);outline-offset:3px}

/* Aviso de que o link sai do site: invisivel na tela, lido em voz alta.
   Quem usa leitor de tela merece saber que vai cair em outro dominio. */
.gg-fora{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

@media (max-width:640px){
  .gg-marcas__rodape{flex-direction:column;align-items:flex-start;gap:16px}
  .gg-marcas__clip{width:100%;justify-content:center}
}