/*
Theme Name: Oca Vegetal
Theme URI: https://ocacontemporanea.com.br
Description: Mundo visual da Oca Contemporânea — cópia heliográfica e papel vegetal. O desenho vem antes do espaço.
Author: Vitor Cavalcante
Template: astra
Version: 1.0.0
Text Domain: oca-vegetal
*/

/* ============================================================
   1. TOKENS — heliográfica, vegetal, grafite
   ============================================================ */
:root{
  /* tintas: três, e só */
  --tinta:#1F3A22;            /* cópia heliográfica: carrega as grandes regiões */
  --tinta-funda:#152B17;      /* o fundo da folha exposta */
  --tinta-viva:#6C7800;      /* linha viva, estado ativo */
  --papel:#FAF5E9;         /* papel vegetal */
  --papel-2:#F0E7D2;       /* vegetal na dobra */
  --grafite:#23260E;         /* o traço */
  --linha:rgba(255,255,255,.72);

  /* texto sobre cada ground, tingido da própria matiz — nunca cinza */
  --sobre-tinta:#FAF5E9;
  --sobre-tinta-2:#D3D6B4;
  --sobre-papel:#26290F;
  --sobre-papel-2:#5A5E3C;

  --medida:65ch;
  --borda:1px solid rgba(250,245,233,.22);      /* sobre tinta */
  --borda-papel:1px solid rgba(35,38,14,.22);   /* sobre papel */
  --borda-vegetal:var(--borda-papel);

  /* escala tipográfica */
  --t-display:clamp(2.6rem,7.2vw,5.6rem);
  --t-h2:clamp(1.9rem,3.6vw,3.1rem);
  --t-h3:clamp(1.25rem,1.8vw,1.6rem);
  --t-corpo:clamp(1rem,.42vw + .92rem,1.12rem);
  --t-cota:.72rem;

  /* ritmo */
  --sp-1:.5rem; --sp-2:1rem; --sp-3:1.75rem; --sp-4:3rem;
  --sp-5:5rem; --sp-6:8rem; --sp-7:12rem;

  --ease:cubic-bezier(.16,1,.3,1);
}

/* ============================================================
   2. FACES — self-hosted, variáveis
   ============================================================ */
@font-face{
  font-family:"Bricolage";
  src:url("assets/fonts/BricolageGrotesque.woff2") format("woff2-variations");
  font-weight:400 800; font-stretch:75% 100%; font-display:swap;
}
@font-face{
  font-family:"Archivo";
  src:url("assets/fonts/Archivo.woff2") format("woff2-variations");
  font-weight:300 700; font-stretch:75% 125%; font-display:swap;
}

/* ============================================================
   3. BASE
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body.oca{
  margin:0; background:var(--papel); color:var(--grafite);
  font-family:"Archivo",ui-sans-serif,system-ui,sans-serif;
  font-size:var(--t-corpo); line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit}

h1,h2,h3{
  font-family:"Bricolage",ui-sans-serif,system-ui,sans-serif;
  font-weight:600; line-height:1.02; letter-spacing:-.035em;
  text-wrap:balance; margin:0;
}
h1{font-size:var(--t-display)}
h2{font-size:var(--t-h2)}
h3{font-size:var(--t-h3); letter-spacing:-.02em; line-height:1.14}
p{margin:0 0 1em; max-width:var(--medida)}

/* superfícies do navegador que também são o projeto */
::selection{background:#DDE3A8; color:var(--grafite)}
:focus-visible{outline:2px solid #96502F; outline-offset:3px}
.folha--tinta :focus-visible,.hero :focus-visible,.menu :focus-visible,.carimbo :focus-visible{outline-color:#C9DB4F}
html{scrollbar-color:var(--tinta-viva) var(--papel-2)}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--papel-2)}
::-webkit-scrollbar-thumb{background:var(--tinta-viva)}
a{text-underline-offset:.22em; text-decoration-thickness:1px}

.wrap{width:min(1180px,92vw); margin-inline:auto}
.pular{position:absolute;left:-9999px;top:0;background:var(--papel);color:var(--grafite);padding:.8rem 1.2rem;z-index:99}
.pular:focus{left:.5rem;top:.5rem}

/* a cota: legenda de prancha. medida e referência, nunca enfeite */
.cota{
  font-family:"Archivo"; font-size:var(--t-cota); font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; font-stretch:88%;
  color:var(--sobre-papel-2);
}
.folha--tinta .cota,.hero .cota,.carimbo .cota{color:var(--sobre-tinta-2)}
.cota{color:var(--sobre-papel-2)}

/* ============================================================
   4. FOLHAS — a alternância entre cópia e vegetal
   ============================================================ */
.folha{padding:var(--sp-6) 0; position:relative; background:var(--papel); color:var(--grafite)}
.folha--tinta{background:var(--tinta-funda); color:var(--sobre-tinta)}
.folha--tinta h2,.folha--tinta h3{color:var(--sobre-tinta)}



/* margem de prancha: o fio duplo que cerca o desenho */
.folha:not(.folha--tinta)::before,
.folha--tinta::before{
  content:""; position:absolute; inset:1.1rem;
  border:var(--borda-vegetal); pointer-events:none;
}
@media(max-width:700px){.folha::before{inset:.6rem}}

/* ============================================================
   5. CABEÇALHO — carimbo fixo, não barra de tema
   ============================================================ */
.topo{
  position:fixed; inset:0 0 auto 0; z-index:50;
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3);
  padding:1rem clamp(1rem,4vw,2.6rem);
  background:var(--papel); color:var(--grafite); border-bottom:1px solid transparent;
  transition:background .4s var(--ease), border-color .4s var(--ease);
}
.topo.is-preso{border-bottom-color:rgba(35,38,14,.16)}
/* na home o cabeçalho começa por cima da foto do hero */
body.tem-hero .topo{
  background:transparent; color:var(--papel); border-bottom-color:transparent;
}
body.tem-hero .topo.is-preso{background:var(--papel); color:var(--grafite); border-bottom-color:rgba(35,38,14,.16)}
body.tem-hero .topo .marca span{color:rgba(250,245,233,.72)}
body.tem-hero .topo.is-preso .marca span{color:var(--sobre-papel-2)}
.marca{display:flex; align-items:center; gap:.7rem; text-decoration:none}
.marca img{width:30px;height:auto}
.marca b{font-family:"Bricolage"; font-weight:600; font-size:1.06rem; letter-spacing:-.02em}
.marca span{font-weight:400; color:var(--sobre-papel-2); margin-left:.3ch}

.menu{display:flex; gap:clamp(1rem,2.4vw,2.2rem); align-items:center}
.menu a{
  text-decoration:none; font-size:.92rem; font-weight:500;
  padding:.35rem 0; border-bottom:1px solid transparent; transition:border-color .25s var(--ease), color .25s;
}
.menu a:hover{border-bottom-color:currentColor}
.menu a[aria-current="page"]{border-bottom-color:#96502F}
body.tem-hero .topo:not(.is-preso) .menu a[aria-current="page"]{border-bottom-color:#C9DB4F}
.menu-abrir{display:none}

@media(max-width:860px){
  .menu-abrir{
    display:inline-flex; align-items:center; gap:.5rem; background:none; cursor:pointer;
    border:var(--borda-papel); color:inherit; font:inherit; font-size:.82rem;
    letter-spacing:.14em; text-transform:uppercase; padding:.55rem .9rem;
  }
  .menu{
    position:fixed; inset:0; background:var(--tinta-funda);
    flex-direction:column; justify-content:center; gap:var(--sp-3);
    font-size:1.4rem; transform:translateY(-100%); transition:transform .5s var(--ease);
  }
  .menu{color:var(--sobre-tinta); transition:transform .5s var(--ease), visibility 0s .5s}
  .menu[data-aberto="1"]{transform:none; visibility:visible; transition:transform .5s var(--ease)}
  .menu:not([data-aberto="1"]){visibility:hidden}
  .menu a{font-size:1.5rem; font-family:"Bricolage"}
  .menu-abrir{position:relative; z-index:2}
  body.menu-aberto .menu-abrir{color:var(--sobre-tinta); border-color:rgba(250,245,233,.5)}
  body.menu-aberto{overflow:hidden}
}

/* ============================================================
   6. HERO — o vegetal se descola e a obra aparece
   ============================================================ */
.hero{position:relative; min-height:100svh; display:grid; align-items:end; overflow:clip;
  background:var(--grafite); color:var(--papel)}
.hero :is(h1,h2,h3){color:var(--papel)}
.hero__obra{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.hero__obra{filter:saturate(.92) contrast(1.04)}
.hero::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    linear-gradient(to bottom,rgba(21,43,23,.72) 0,rgba(21,43,23,.28) 120px,rgba(21,43,23,0) 220px),
    linear-gradient(to top,rgba(21,43,23,.95) 0%,rgba(21,43,23,.6) 42%,rgba(21,43,23,.15) 74%),
    linear-gradient(to right,rgba(31,58,34,.8),rgba(31,58,34,0) 66%);
}
.hero__texto{position:relative; z-index:3; padding:0 0 var(--sp-5)}
.hero h1{max-width:16ch}
.hero__linha-apoio{margin-top:var(--sp-2); max-width:46ch; color:rgba(250,245,233,.86); font-size:1.08rem}
.hero__acoes{display:flex; flex-wrap:wrap; gap:var(--sp-2); margin-top:var(--sp-3)}
.hero__rodape{
  position:absolute; z-index:3; left:0; right:0; bottom:1.4rem;
  display:flex; justify-content:space-between; gap:var(--sp-2);
}
@media(max-width:760px){
  .hero{grid-template-rows:1fr auto; align-content:end}
  .hero__rodape{position:static; padding:0 0 var(--sp-4); flex-direction:column; gap:.35rem}
  .hero__texto{padding-bottom:var(--sp-2); align-self:end}
}

/* botões: carimbo, não pílula */
.btn{
  display:inline-flex; align-items:center; gap:.6rem; text-decoration:none;
  font-weight:600; font-size:.94rem; letter-spacing:.02em;
  padding:.85rem 1.5rem; border:1px solid currentColor; background:transparent; color:var(--grafite);
  transition:background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.btn:hover{background:var(--grafite); color:var(--papel); transform:translateY(-2px)}
.btn--forte{
  background:#CE7A45; border-color:#CE7A45; color:#1A1A0C; font-weight:700;
  box-shadow:0 10px 24px -14px rgba(26,26,12,.65);
}
.btn--forte:hover{
  background:#E08B4E; border-color:#E08B4E; color:#1A1A0C;
  transform:translateY(-2px); box-shadow:0 16px 30px -16px rgba(26,26,12,.7);
}
.folha--tinta .btn:not(.btn--forte),.hero .btn:not(.btn--forte){
  color:var(--papel); border-color:rgba(250,245,233,.75);
  background:rgba(21,43,23,.35); backdrop-filter:blur(3px);
}
.folha--tinta .btn:not(.btn--forte):hover,.hero .btn:not(.btn--forte):hover{background:var(--papel); color:var(--grafite); border-color:var(--papel)}

/* ============================================================
   7. RÉGUA DE PROJETOS — itens idênticos lidos varrendo a linha
   (o metadado só aparece no que está em foco)
   ============================================================ */
.regua{display:grid; grid-template-columns:repeat(4,1fr); border-top:var(--borda-papel); border-left:var(--borda-papel)}
.projeto{
  position:relative; display:block; text-decoration:none;
  border-right:var(--borda-papel); border-bottom:var(--borda-papel);
  background:var(--papel); padding-bottom:1.1rem;
}
.projeto__moldura{position:relative; overflow:clip; aspect-ratio:3/4; background:var(--papel-2)}
/* a obra visível é o estado base: a folha que a cobre só entra quando o
   script garante que sabe removê-la (sem JS ou com movimento reduzido, ela nunca aparece) */
.projeto__moldura::after{
  content:""; position:absolute; inset:0; z-index:1; background:var(--papel);
  opacity:0; transition:opacity .7s var(--ease);
}
body.anima-regua .projeto:not(.is-lido):not(:hover):not(:focus-within) .projeto__moldura::after{opacity:1}
.projeto__obra{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:saturate(.9); transform:scale(1.02);
  transition:transform .9s var(--ease), filter .6s var(--ease);
}
.projeto__linha{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:2;
  filter:invert(1); opacity:0; transition:opacity .7s var(--ease);
}
body.anima-regua .projeto:not(.is-lido):not(:hover):not(:focus-within) .projeto__linha{opacity:1}

.projeto__ident{padding:1rem 1.1rem 0}
.projeto__ident h3{color:var(--grafite); transition:color .3s var(--ease)}
.projeto:hover .projeto__ident h3{color:#96502F}
.projeto__ident h3{margin-bottom:.35rem}
.projeto__meta{display:flex; gap:.9rem; flex-wrap:wrap; color:var(--sobre-papel-2)}
.projeto:hover .projeto__obra,
.projeto:focus-visible .projeto__obra{transform:scale(1.06); filter:saturate(1)}


.projeto[aria-disabled="true"]{cursor:default}
.projeto[aria-disabled="true"]:hover .projeto__ident h3{color:var(--grafite)}
.projeto[aria-disabled="true"]:hover .projeto__obra{transform:scale(1.02); filter:saturate(.9)}

@media(max-width:980px){.regua{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){
  .regua{grid-template-columns:1fr}
  .projeto__moldura{aspect-ratio:4/3}
}

/* ============================================================
   8. MANIFESTO — texto sobre vegetal, com cotas na margem
   ============================================================ */
.manifesto{display:grid; grid-template-columns:minmax(0,9rem) minmax(0,1fr); gap:clamp(1.5rem,5vw,4.5rem); align-items:start}
.manifesto__texto p{font-size:clamp(1.06rem,.5vw + 1rem,1.28rem); max-width:58ch}
.manifesto__texto p:first-of-type{
  font-family:"Bricolage"; font-size:clamp(1.5rem,2.4vw,2.2rem); font-weight:500;
  line-height:1.22; letter-spacing:-.025em; max-width:24ch; color:var(--grafite);
}
.frentes{display:grid; gap:0; margin-top:var(--sp-4); border-top:var(--borda-vegetal)}
.frente{display:grid; grid-template-columns:auto 1fr; gap:clamp(1rem,4vw,3rem);
  padding:1.3rem 0; border-bottom:var(--borda-vegetal); align-items:baseline}
.frente h3{font-size:1.15rem}
.frente p{margin:0; color:var(--sobre-papel-2); font-size:.98rem}
@media(max-width:820px){
  .manifesto{grid-template-columns:1fr; gap:var(--sp-3)}
  .frente{grid-template-columns:1fr; gap:.3rem}
}

/* ============================================================
   9. CIDADE — os textos de urbanismo
   ============================================================ */
.cidade{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr)); gap:1px; background:rgba(35,38,14,.22); border:var(--borda-papel)}
.texto-cidade{
  background:var(--papel); color:var(--grafite); padding:clamp(1.5rem,3vw,2.6rem);
  text-decoration:none; display:flex; flex-direction:column; gap:.8rem;
  transition:background .35s var(--ease);
}
.texto-cidade:hover{background:var(--papel-2)}
.texto-cidade h3{max-width:22ch}
.texto-cidade p{color:var(--sobre-papel-2); font-size:.98rem; margin:0}
.texto-cidade .cota{margin-top:auto}

/* ============================================================
   10. CARIMBO — o rodapé/contato como legenda de prancha
   ============================================================ */
.carimbo{display:grid; grid-template-columns:1.7fr .9fr .9fr; border:var(--borda)}
.carimbo>div{padding:clamp(1.2rem,2.4vw,2rem); border-right:var(--borda);
  display:flex; flex-direction:column; justify-content:flex-end}
.carimbo>div:last-child{border-right:0}
.carimbo dt{margin-bottom:.5rem}
.carimbo dd{margin:0 0 .9rem; font-size:1rem}
.carimbo dd:last-of-type{margin-bottom:0}
.carimbo a{text-decoration:none; border-bottom:1px solid rgba(255,255,255,.4)}
.carimbo a:not(.btn):hover{border-bottom-color:#E0A98D; color:#E0A98D}
.carimbo h2{margin-bottom:.8rem}
@media(max-width:820px){
  .carimbo{grid-template-columns:1fr}
  .carimbo>div{border-right:0; border-bottom:var(--borda)}
}
.rodape{padding:var(--sp-3) 0; display:flex; justify-content:space-between; gap:var(--sp-2); flex-wrap:wrap}

/* ============================================================
   11. PÁGINAS INTERNAS — o conteúdo em blocos, domado
   ============================================================ */
.pagina{padding-block:calc(var(--sp-6) + 3rem) var(--sp-6)}
.pagina__cabeca{margin-bottom:var(--sp-4)}
.pagina__cabeca h1{max-width:18ch}
.conteudo{max-width:none}
/* a medida de leitura vale para o texto corrido, não para os blocos de layout */
.conteudo > :is(p,ul,ol,blockquote,h2,h3){max-width:var(--medida)}
.conteudo :is(h2,h3){margin:var(--sp-4) 0 var(--sp-2)}
.conteudo :is(h2,h3):first-child{margin-top:0}
.conteudo img{margin:var(--sp-3) 0}
.conteudo figure{margin:var(--sp-3) 0}
.conteudo figcaption{font-size:.86rem; color:var(--sobre-tinta-2); margin-top:.5rem}
.conteudo figcaption{color:var(--sobre-papel-2)}
.conteudo ul,.conteudo ol{padding-left:1.1rem}
.conteudo li{margin-bottom:.4rem}
.conteudo a{color:#C68461}
.conteudo a{color:#96502F}

/* galeria de projeto: as imagens ganham a folha inteira */
.conteudo .wp-block-gallery{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr)); gap:1rem; max-width:none}
.conteudo .wp-block-gallery figure{margin:0}

/* formulário (WPForms) no vocabulário da prancha */
.wpforms-container{max-width:38rem}
.wpforms-field-label{font-size:var(--t-cota)!important; letter-spacing:.16em!important; text-transform:uppercase!important; font-weight:500!important; color:var(--sobre-papel-2)!important}
.wpforms-field-label{color:var(--sobre-papel-2)!important}
.wpforms-field input[type=text],.wpforms-field input[type=email],.wpforms-field input[type=tel],.wpforms-field textarea{
  width:100%; background:transparent; color:inherit; font:inherit;
  border:0; border-bottom:1px solid rgba(255,255,255,.35); border-radius:0;
  padding:.6rem 0; transition:border-color .3s var(--ease);
}
.wpforms-field input,.wpforms-field textarea{border-bottom-color:rgba(38,41,15,.3)}
.wpforms-field input:focus,.wpforms-field textarea:focus{border-bottom-color:#C68461; outline:none}
.wpforms-submit{
  background:#C68461!important; color:var(--grafite)!important; border:0!important; border-radius:0!important;
  font-family:"Archivo"!important; font-weight:600!important; letter-spacing:.04em;
  padding:.9rem 1.8rem!important; cursor:pointer; transition:transform .3s var(--ease)!important;
}
.wpforms-submit:hover{transform:translateY(-2px)}
.wpforms-error{color:#8E2F16!important; font-size:.86rem!important}

/* ============================================================
   12. MOVIMENTO — um momento autoral: o vegetal se descolando
   ============================================================ */
.projeto__linha{will-change:opacity}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important; transition-duration:.001ms!important}
  .projeto__linha,.projeto__moldura::after{opacity:0!important}
}

/* ============================================================
   13. IMPRESSÃO
   ============================================================ */
@media print{
  .topo{display:none}
  body.oca{background:#fff; color:#000}
}

/* ============================================================
   14. BLOCOS HERDADOS — o conteúdo antigo, sem o visual antigo
   As páginas internas ainda são blocos Spectra: aqui eles perdem
   fundo, padding e cor próprios e passam a obedecer a folha.
   ============================================================ */
.conteudo :is(.uagb-container,.wp-block-uagb-container,.uagb-container-inner-blocks-wrap){
  background:none!important; background-image:none!important;
  min-height:0!important; padding:0!important; margin-inline:0!important;
  max-width:none!important; width:auto!important; border:0!important;
}
.conteudo :is(.uagb-heading-text,.uagb-ifb-title,.wp-block-heading){color:inherit!important}
.conteudo :is(.uagb-desc-text,.uagb-ifb-desc,p){color:inherit!important}
.conteudo .uagb-container::before,.conteudo .uagb-container::after{display:none!important}
.conteudo .wp-block-image img{width:100%}
.conteudo :is(h1,h2,h3,h4,p,li){color:var(--sobre-papel)}
.conteudo p{color:#3A3C22}

/* ============================================================
   15. CORREÇÕES DE INSPEÇÃO
   ============================================================ */
/* títulos nunca quebram no meio da palavra */
h1,h2,h3,.conteudo :is(h1,h2,h3){overflow-wrap:normal; word-break:normal; hyphens:none}

/* respiro no cabeçalho das internas e depois da régua */
.pagina__cabeca{padding-bottom:var(--sp-2)}
.pagina__cabeca p{margin-top:1.1rem}
.pagina__cabeca p{color:var(--sobre-tinta-2); max-width:52ch}
.pagina__cabeca p{color:var(--sobre-papel-2)}
#projetos .wrap:last-child{padding-top:var(--sp-4)!important}

/* formulário: os campos do WPForms obedecem a prancha */
.wpforms-container .wpforms-field-container input[type=text],
.wpforms-container .wpforms-field-container input[type=email],
.wpforms-container .wpforms-field-container input[type=tel],
.wpforms-container .wpforms-field-container input[type=number],
.wpforms-container .wpforms-field-container textarea{
  background:transparent!important; color:inherit!important; font:inherit!important;
  border:0!important; border-bottom:1px solid rgba(38,41,15,.32)!important; border-radius:0!important;
  box-shadow:none!important; padding:.55rem 0!important;
}
.wpforms-container .wpforms-field-container :is(input,textarea):focus{
  border-bottom-color:#96502F!important; outline:2px solid transparent; outline-offset:2px;
}
.wpforms-container .wpforms-field-container ::placeholder{color:rgba(38,41,15,.45)}
.wpforms-container button[type=submit]{
  background:var(--grafite)!important; color:var(--papel)!important; border:0!important;
  border-radius:0!important; padding:.9rem 1.9rem!important; font-weight:600!important;
  letter-spacing:.03em; cursor:pointer;
}
.wpforms-container button[type=submit]:hover{background:#96502F!important}
.conteudo iframe{width:100%; border:var(--borda-vegetal); filter:grayscale(.35) contrast(1.05)}

/* o botão flutuante do WhatsApp entra no vocabulário do site */
.scb-button,.scb-chat-button,#scb-button,.scb-widget-button{
  filter:saturate(.55) brightness(.92);
  box-shadow:0 10px 26px -12px rgba(43,51,12,.7)!important;
}
.scb-button:hover,.scb-chat-button:hover{filter:none}

/* a folha de papel guarda margem para o fio duplo não encostar no texto */
.folha--tinta .wrap{position:relative; z-index:1}

/* ---- rodada 2 de inspeção ---- */

/* o cabeçalho sobre folha de papel: o menu não pode ficar em texto claro */
@media(max-width:860px){
    }

/* blocos herdados: colunas param de espremer o texto em uma letra por linha */
.conteudo :is(.uagb-container-inner-blocks-wrap,.wp-block-columns){
  display:flex!important; flex-wrap:wrap!important; gap:clamp(1rem,3vw,2.5rem)!important;
  align-items:start!important;
}
.conteudo :is(.uagb-container-inner-blocks-wrap,.wp-block-columns)>*{
  flex:1 1 min(100%,18rem)!important; min-width:min(100%,15rem)!important; width:auto!important;
}
.conteudo :is(p,li,dd,span){overflow-wrap:break-word}

/* ficha do projeto: os dados viram uma linha de cotas, não uma coluna torta */
.conteudo .uagb-container-inner-blocks-wrap p strong{
  display:block; font-family:"Archivo"; font-size:var(--t-cota); font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--sobre-tinta-2); margin-bottom:.15rem;
}
.conteudo .uagb-container-inner-blocks-wrap p strong{color:var(--sobre-papel-2)}

/* o botão do WhatsApp, no vocabulário do site */
#simple-chat-button--button{
  filter:saturate(.5) brightness(.9); transition:filter .3s var(--ease), transform .3s var(--ease);
}
#simple-chat-button--button:hover{filter:none; transform:translateY(-2px)}

/* as colunas herdadas repartem a folha inteira */
.conteudo :is(.uagb-container-inner-blocks-wrap,.wp-block-columns){width:100%!important}
.conteudo .uagb-ifb-content{max-width:none}
.conteudo .uagb-ifb-desc,.conteudo .uagb-ifb-title{max-width:var(--medida)}

/* ---- rodada 3 ---- */

/* ---- as sócias ---- */
.socias{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(1.2rem,3.5vw,3rem)}
.socia img{aspect-ratio:4/5; object-fit:cover; object-position:center 22%}
.socia{margin:0}
.socia img{width:100%; filter:saturate(.9) contrast(1.02)}
.socia figcaption{padding-top:.9rem; border-top:var(--borda-vegetal); margin-top:.9rem}
.socia h3{margin-bottom:.2rem}
.socia .cota{margin:0}
@media(max-width:640px){.socias{grid-template-columns:1fr; gap:var(--sp-3)}}

/* o cabeçalho fixo não come o título quando a âncora rola até ele */
:is(h1,h2,h3,section,.socias,.regua){scroll-margin-top:6rem}

/* ---- contato: os dados de um lado, a escrita do outro ---- */
.contato{display:grid; grid-template-columns:1fr 1.35fr; gap:clamp(2rem,6vw,5rem); align-items:start}
.contato__dados dl{margin:0}
.contato__dados dt{margin-bottom:.45rem}
.contato__dados dd{margin:0 0 var(--sp-3); font-size:1.05rem}
.contato__dados dd a:not(.btn){border-bottom:1px solid rgba(38,41,15,.3); text-decoration:none}
.contato__dados dd a:not(.btn):hover{border-bottom-color:#96502F; color:#96502F}
.contato__forma h2{margin-bottom:var(--sp-3)}
.contato__mapa{margin-top:var(--sp-5)}
.contato__mapa iframe{width:100%; display:block}
@media(max-width:860px){.contato{grid-template-columns:1fr; gap:var(--sp-4)}}

/* o campo com máscara do WPForms vinha com caixa completa; segue a linha dos outros */
.wpforms-container input.wpforms-masked-input,
.wpforms-container .wpforms-field input[type=tel]{
  border:0!important; border-bottom:1px solid rgba(38,41,15,.32)!important;
  background:transparent!important; border-radius:0!important; box-shadow:none!important;
}

/* assinatura de quem fez, junto ao copyright */
.rodape__fim{display:flex; gap:1.4rem; align-items:baseline}
.assinatura{
  text-decoration:none; color:var(--sobre-tinta-2);
  border-bottom:1px solid rgba(250,245,233,.28); transition:color .25s var(--ease), border-color .25s var(--ease);
}
.assinatura:hover{color:#E0A98D; border-bottom-color:#E0A98D}
@media(max-width:640px){.rodape__fim{width:100%; justify-content:space-between}}

.mapa__acao{margin-top:.9rem}
.mapa__acao a{color:#96502F; text-decoration:none; border-bottom:1px solid rgba(150,80,47,.4)}
.mapa__acao a:hover{border-bottom-color:#96502F}

/* as cotas continuam tabulares: ali o número é medida */
.cota{font-variant-numeric:tabular-nums}

/* o plugin de formulário traz vermelho de estoque e cinza puro, ambos fora do mundo */
.wpforms-container{
  --wpforms-label-error-color:#8E2F16;
  --wpforms-label-sublabel-color:#5A5E3C;
  --wpforms-field-border-color:rgba(35,38,14,.32);
}
.wpforms-container input[type=number]{-moz-appearance:textfield}
.wpforms-container input[type=number]::-webkit-outer-spin-button,
.wpforms-container input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}

/* o filtro do título duplicado deixava a caixa do bloco de pé, vazia e ocupando meia linha */
.conteudo .wp-block-uagb-info-box:not(:has(.uagb-ifb-desc, img, p, a)){display:none}

/* projeto que ainda não tem página: o estado é dito, não deixado no silêncio */
.projeto__estado{opacity:.72; font-style:normal}

/* o botão do plugin entra no mundo: canto reto e sombra com deslocamento real */
#simple-chat-button--button{
  border-radius:2px!important;
  box-shadow:0 12px 24px -14px rgba(21,43,23,.85)!important;
}
#simple-chat-button--button:before{display:none!important}   /* a onda pulsante não é deste mundo */
#simple-chat-button--text{border-radius:2px!important}

/* ============================================================
   16. POLISH — leitura, ritmo e proporção
   ============================================================ */

/* O post é para ler: a coluna de texto se centra em vez de deixar
   metade da folha vazia à direita, e o título desce do tamanho de
   hero (89px) para o tamanho de um título de artigo. */
.pagina--texto .pagina__cabeca,
.pagina--texto .conteudo{margin-inline:auto; max-width:var(--medida)}
.pagina--texto .pagina__cabeca h1{font-size:clamp(2.1rem,4.4vw,3.5rem); max-width:22ch}
.pagina--texto .conteudo > :is(p,ul,ol,blockquote){max-width:none}
.pagina--texto .conteudo :is(h2,h3){max-width:none}

/* Títulos de página interna não competem com o hero */
.pagina:not(.pagina--texto) .pagina__cabeca h1{font-size:clamp(2.4rem,5.6vw,4.4rem)}

/* Ritmo: o que se relaciona fica junto, o que separa respira.
   Antes toda seção tinha os mesmos 128px, sem hierarquia. */
.folha + .folha{padding-top:var(--sp-5)}
.folha--tinta{padding-top:var(--sp-6)}
h2 + .cidade,h2 + .socias,h2 + .regua{margin-top:var(--sp-3)}

/* No celular o botão flutuante cobre texto: encolhe e recua */
@media(max-width:760px){
  #simple-chat-button--button{width:48px!important; height:48px!important}
  #simple-chat-button--button img,#simple-chat-button--button svg{width:48px!important; height:48px!important}
  #simple-chat-button--container{bottom:14px!important; right:14px!important}
}