:root{
  --amarelo:#E9B44A; 
  --oliva:#6F7326; 
  --verde:#142E21; --grafite:#181C1F; --creme:#F6EBEB;
  --bg:#F6EBEB; --bg2:#ffffff; --texto:#181C1F; --suave:#4a5a52; --borda:#d9cccc; --destaque:#6F7326; --hero:#142E21; --hero-texto:#F6EBEB;
  box-sizing:border-box; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#181C1F; --bg2:#142E21; --texto:#F6EBEB; --suave:#c9bfbf; --borda:#2c4437; --destaque:#E9B44A; --hero:#142E21; --hero-texto:#F6EBEB;}}
:root[data-theme="dark"]{--bg:#181C1F; --bg2:#142E21; --texto:#F6EBEB; --suave:#c9bfbf; --borda:#2c4437; --destaque:#E9B44A;}
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 80px);scroll-behavior:smooth}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--texto);font-family:'Montserrat',system-ui,sans-serif;line-height:1.65;font-size:16px}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
section{padding:72px 0}
h1,h2,h3{line-height:1.15;margin:0 0 .5em;font-weight:800}
h1{font-size:clamp(2rem,5vw,3.4rem)} h2{font-size:clamp(1.6rem,3.5vw,2.3rem)} h3{font-size:1.2rem}
.eyebrow{font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--destaque);margin-bottom:.8rem;display:block}
.lead{font-size:1.1rem;color:var(--suave);max-width:60ch}

/* BOTÕES */
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:14px 26px;border-radius:999px;font-weight:700;text-decoration:none;border:2px solid transparent;cursor:pointer;font-family:inherit;font-size:.95rem;transition:transform .15s}
.btn:hover{transform:translateY(-2px)}
.btn-zap{background:#E9B44A;color:#142E21}
.btn-line{border-color:currentColor;background:transparent}

/* CABEÇALHO / ABAS */
header{position:sticky;top:0;z-index:20;background:var(--verde);color:var(--creme);padding-top:env(safe-area-inset-top,0px)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:68px;flex-wrap:wrap;padding-top:8px;padding-bottom:8px}
.logo_img{max-height:30px}
.logo_container{display:flex;flex-direction:row  ;gap:12px}
.logo_{font-weight:800;line-height:1.1;text-decoration:none;font-size:1rem}
.logo{font-weight:800;line-height:1.1;text-decoration:none;font-size:1rem}
.logo small{display:block;font-weight:500;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:#E9B44A}
.logoh_img{max-height:88px;margin-bottom:12px}
.tabs{display:flex;gap:6px}
.tab{background:none;border:0;color:var(--creme);font-family:inherit;font-weight:600;font-size:.92rem;padding:10px 16px;border-radius:999px;cursor:pointer}
.tab[aria-selected="true"]{background:#E9B44A;color:#142E21}
.nav .btn{padding:10px 20px;font-size:.85rem}
.pagina{display:none}.pagina.ativa{display:block}

/* ESPAÇO DE IMAGEM — troque o conteúdo por <img src="..." alt="..."> */
.img{background:repeating-linear-gradient(45deg,rgba(111,115,38,.12),rgba(111,115,38,.12) 12px,rgba(233,180,74,.12) 12px,rgba(233,180,74,.12) 24px);border:2px dashed var(--oliva);border-radius:18px;display:flex;align-items:center;justify-content:center;text-align:center;padding:16px;font-size:.8rem;font-weight:600;color:var(--suave);overflow:hidden;min-height:200px}
.img img{width:100%;height:100%;object-fit:cover}
.r43{aspect-ratio:4/3}.r11{aspect-ratio:1/1}.r169{aspect-ratio:16/9}.r34{aspect-ratio:3/4}

/* HERO */
.hero{background:var(--hero);color:var(--hero-texto);padding:64px 0 80px}
.hero .grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.hero .lead{color:#d9cfcf}
.hero em{font-style:normal;color:#E9B44A}
.hero .eyebrow{color:#E9B44A}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}

/* CURSOS */
.cursos{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:36px}
.card{background:var(--bg2);border:1px solid var(--borda);border-radius:22px;padding:20px;display:flex;flex-direction:column;gap:14px}
.card ul{list-style:none;padding:0;margin:0;font-size:.92rem;color:var(--suave)}
.card li{padding:8px 0;border-top:1px solid var(--borda);display:flex;justify-content:space-between;gap:12px}
.card li b{color:var(--texto);font-weight:600}
.card .btn{justify-content:center;margin-top:auto}
.tag{align-self:flex-start;background:var(--oliva);color:#F6EBEB;font-size:.72rem;font-weight:700;padding:4px 12px;border-radius:999px;letter-spacing:.08em;text-transform:uppercase}

/* PASSOS / NÚMEROS */
.passos{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;margin-top:32px
}

.passo{
  border-left:3px solid #E9B44A;
  padding-left:16px
}

.passo span{
  font-family:Arial, Helvetica, sans-serif;
  font-size:2rem;
  font-weight:800;
  color:var(--destaque)
}


.faixa{background:var(--verde);color:var(--creme)}
.faixa .lead{color:#d9cfcf}
.faixa .eyebrow{color:#E9B44A}
.nums{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:32px;text-align:center}
.nums strong{display:block;font-size:2.4rem;font-weight:800;color:#E9B44A}
.dois{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.valores{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:28px}
.valor{background:var(--bg2);border:1px solid var(--borda);border-radius:18px;padding:22px}
.depo{background:var(--bg2);border:1px solid var(--borda);border-radius:18px;padding:22px;font-size:.95rem}
.depo p{margin:0 0 12px;font-style:italic}.depo b{font-style:normal;color:var(--destaque)}
.tres{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:28px}
.galeria{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:28px}
details{background:var(--bg2);border:1px solid var(--borda);border-radius:14px;padding:16px 20px;margin-bottom:10px}
summary{font-weight:700;cursor:pointer}
details p{margin:10px 0 0;color:var(--suave)}

/* EVENTOS */
.evento{display:grid;grid-template-columns:110px 1fr 220px;gap:24px;align-items:center;background:var(--bg2);border:1px solid var(--borda);border-radius:22px;padding:18px;margin-bottom:16px}
.data{background:var(--amarelo);color:#142E21;border-radius:16px;text-align:center;padding:14px 6px;font-weight:800;line-height:1}
.data span{display:block;font-size:2rem}.data small{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase}
.evento p{margin:0;color:var(--suave);font-size:.93rem}

footer{background:var(--grafite);color:var(--creme);padding:48px 0 32px;font-size:.9rem}
footer .grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:32px}
footer h4{margin:0 0 10px;color:#E9B44A;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase}
footer a{text-decoration:none;display:block;margin-bottom:6px}
.flutuante{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:30;box-shadow:0 8px 24px rgba(0,0,0,.3)}

@media(max-width:860px){
  .hero .grid,.dois,footer .grid{grid-template-columns:1fr}
  .cursos,.valores,.tres{grid-template-columns:1fr}
  .passos,.nums,.galeria{grid-template-columns:1fr 1fr}
  .evento{grid-template-columns:90px 1fr}.evento .img{grid-column:1/-1}
  .nav .btn{display:none}section{padding:52px 0}
}

/* ===== Acréscimos v2 ===== */
.relatos{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:28px}
.relato{background:var(--bg2);border:1px solid var(--borda);border-radius:18px;padding:22px;border-top:4px solid var(--amarelo)}
.relato h3{font-size:1.05rem;color:var(--destaque)}.relato p{margin:0;font-size:.9rem;color:var(--suave)}
.prof{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:28px}
.prof .card{text-align:left}
.mapa{border:0;width:100%;height:340px;border-radius:18px;background:var(--borda)}
.aviso{background:var(--bg2);border:2px dashed var(--oliva);border-radius:18px;padding:28px;text-align:center;margin-top:28px}
.logo img{height:44px;width:auto}
@media(max-width:860px){.relatos,.prof{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.relatos,.prof{grid-template-columns:1fr}}

.faixa .passo span{color:#E9B44A}
.faixa .passo p{color:#d9cfcf;font-size:.92rem;margin:0}

/* ================= v3 — identidade de ateliê + animações ================= */
body{overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:60;opacity:.06;mix-blend-mode:multiply;
 background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
@keyframes rise{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
@keyframes entra{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes flutua{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-18px) rotate(3deg)}}
@keyframes morph{0%,100%{border-radius:60% 40% 55% 45%/50% 60% 40% 50%}50%{border-radius:42% 58% 40% 60%/58% 42% 60% 40%}}
@keyframes traco{to{transform:scaleX(1)}}
@keyframes rola{to{transform:translateX(-50%)}}
@keyframes pulsa{0%{box-shadow:0 0 0 0 rgba(233,180,74,.7)}70%,100%{box-shadow:0 0 0 18px rgba(233,180,74,0)}}
.pagina.ativa{animation:entra .6s ease both}

/* títulos com pincelada */
h2::after{content:"";display:block;width:56px;height:6px;border-radius:6px 2px 6px 2px;background:var(--amarelo);margin-top:14px;transform:rotate(-1.5deg)}
[style*="center"] h2::after{margin-inline:auto}

/* hero: manchas de tinta, arco de janela e entrada em cascata */
.hero{position:relative;overflow:hidden}
.hero .wrap{position:relative;z-index:1}
.hero::before,.hero::after{content:"";position:absolute;z-index:0;animation:morph 11s ease-in-out infinite,flutua 9s ease-in-out infinite}
.hero::before{width:380px;height:380px;left:-120px;bottom:-140px;background:rgba(111,115,38,.55)}
.hero::after{width:260px;height:260px;right:6%;top:-90px;background:rgba(233,180,74,.35);animation-delay:-4s}
.hero .eyebrow,.hero h1,.hero .lead,.hero .cta-row{animation:rise .9s cubic-bezier(.2,.8,.2,1) both}
.hero h1{animation-delay:.12s}.hero .lead{animation-delay:.28s}.hero .cta-row{animation-delay:.42s}
.hero em{position:relative;display:inline-block;isolation:isolate}
.hero em::after{content:"";position:absolute;left:-3%;bottom:.04em;width:106%;height:.34em;background:rgba(233,180,74,.4);border-radius:50% 40% 60% 30%/60% 50% 50% 40%;transform:scaleX(0);transform-origin:left;animation:traco 1s .9s cubic-bezier(.2,.8,.2,1) forwards;z-index:-1}
.hero .img{border:0;border-radius:240px 240px 26px 26px;box-shadow:16px 16px 0 #E9B44A;animation:rise 1.1s .2s cubic-bezier(.2,.8,.2,1) both;background:rgba(246,235,235,.08);color:#d9cfcf}

/* faixa de técnicas rolando */
.tecnicas{background:#E9B44A;color:#142E21;overflow:hidden;padding:16px 0;transform:rotate(-1deg);margin:-14px -10px 0;position:relative;z-index:2;box-shadow:0 10px 24px -14px rgba(0,0,0,.5)}
.trilho{display:flex;gap:36px;width:max-content;animation:rola 32s linear infinite;font-weight:800;text-transform:uppercase;letter-spacing:.14em;font-size:.9rem;white-space:nowrap}
.trilho span::after{content:"✦";margin-left:36px;color:#6F7326}

/* imagens com cantos orgânicos */
.img{border-radius:28px 8px 28px 8px;transition:border-radius .5s,transform .5s}
.img:hover{border-radius:8px 28px 8px 28px}
.img:has(img){border:0;background:none}
.img img{transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.img:hover img,.card:hover .img img{transform:scale(1.07)}
.galeria .img:nth-child(odd){transform:rotate(-1.6deg)}.galeria .img:nth-child(even){transform:rotate(1.4deg) translateY(10px)}
.galeria .img:hover{transform:rotate(0) scale(1.03)}

/* cards */
.card{position:relative;overflow:hidden;transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s}
.card::before{content:"";position:absolute;left:0;top:0;height:5px;width:100%;background:linear-gradient(90deg,#E9B44A,#6F7326);transform:scaleX(0);transform-origin:left;transition:transform .5s}
.card:hover{transform:translateY(-10px) rotate(-.6deg);box-shadow:0 26px 40px -22px rgba(20,46,33,.55)}
.card:hover::before{transform:scaleX(1)}
.cursos .card:nth-child(2){translate:0 -16px}
.tag{background:#E9B44A;color:#142E21;border-radius:6px;transform:rotate(-3deg);box-shadow:2px 2px 0 var(--oliva)}
.relato,.valor,.depo,details{transition:transform .3s,box-shadow .3s}
.relato:hover,.valor:hover{transform:translateY(-6px);box-shadow:0 16px 28px -18px rgba(20,46,33,.5)}
details[open]{border-color:var(--destaque)}
summary{list-style:none;display:flex;justify-content:space-between;gap:12px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-weight:800;font-size:1.3rem;line-height:1;color:var(--destaque);transition:transform .3s}
details[open] summary::after{transform:rotate(45deg)}
details[open] p{animation:entra .4s ease both}

/* botões */
.btn{position:relative;overflow:hidden}
.btn::after{content:"";position:absolute;top:0;left:-70%;width:50%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);transition:left .6s}
.btn:hover::after{left:130%}
.btn-zap{box-shadow:0 6px 0 #a87a1c}.btn-zap:hover{box-shadow:0 8px 0 #a87a1c;transform:translateY(-3px)}.btn-zap:active{transform:translateY(4px);box-shadow:0 2px 0 #a87a1c}
.flutuante{animation:pulsa 2.4s infinite}
.tab{transition:background .3s,color .3s,transform .3s}.tab:hover{transform:translateY(-2px)}

/* passos e faixas */
.faixa{position:relative;overflow:hidden}
.faixa>.wrap{position:relative;z-index:1}
.faixa::before{content:"";position:absolute;width:420px;height:420px;right:-120px;top:-150px;background:radial-gradient(circle at 30% 30%,rgba(233,180,74,.3),transparent 65%);border-radius:50%;animation:flutua 9s ease-in-out infinite}
.passo{transition:transform .3s,border-color .3s}.passo:hover{transform:translateX(6px)}
.passo span{font-size:3.2rem;line-height:1;display:block;color:transparent;-webkit-text-stroke:1.5px var(--destaque);transition:color .3s}
.passo:hover span{color:var(--destaque)}
.faixa .passo span{color:transparent;-webkit-text-stroke:1.5px #E9B44A}.faixa .passo:hover span{color:#E9B44A}

/* revelar ao rolar (classes aplicadas pelo JS) */
.rv{opacity:0;transform:translateY(34px) scale(.98);transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1)}
.rv.on{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{animation:none!important;transition:none!important}
 .rv{opacity:1;transform:none}.hero em::after{transform:none}
}
@media(max-width:860px){.cursos .card:nth-child(2){translate:none}.tecnicas{transform:none;margin:0}}


/*botão flutuante*/
.btn.flutuante{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:70}

/* ===== v4 — imagens preenchem a moldura sem esticar ===== */
/* A moldura (.r34, .r11, .r43...) define a proporção; a foto preenche tudo (cover), sem distorcer.
   Use a moldura com a MESMA proporção da foto para não cortar nada. */
.img:has(img){padding:0;min-height:0;display:block}
.img img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 30%}


/* ===== v5 — um design de card para cada curso ===== */

/* 1) DESENHO — folha de caderno de esboços (papel quadriculado, fita, sombra de lápis) */
.c-desenho{
  --bg2:#fbf7ec; --texto:#181C1F; --suave:#4a5a52; --borda:#cdbf9f;
  color:var(--texto);
  background-color:#fbf7ec;
  background-image:linear-gradient(rgba(111,115,38,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(111,115,38,.14) 1px,transparent 1px);
  background-size:22px 22px;
  border:2px solid #181C1F; border-radius:6px 24px 6px 24px;
  box-shadow:6px 6px 0 #181C1F;
  padding-top:34px;
}
.c-desenho:hover{box-shadow:10px 10px 0 #181C1F}
.c-desenho::before{display:none}
.c-desenho::after{content:"";position:absolute;top:-4px;left:50%;width:96px;height:28px;margin-left:-48px;background:rgba(233,180,74,.75);transform:rotate(-3deg);box-shadow:0 1px 2px rgba(0,0,0,.2)}
.c-desenho .img{border-radius:3px;transform:rotate(-1.2deg);box-shadow:0 0 0 7px #fff,0 0 0 8px rgba(24,28,31,.25),0 6px 12px rgba(0,0,0,.18);margin:6px 7px 4px}
.c-desenho .img:hover{border-radius:3px;transform:rotate(0)}
.c-desenho .tag{background:transparent;color:#181C1F;border:1.5px solid #181C1F;border-radius:3px;box-shadow:none;transform:rotate(-2deg)}
.c-desenho h3{align-self:flex-start;background:linear-gradient(transparent 62%,rgba(233,180,74,.6) 62%);padding:0 4px;margin-bottom:0}
.c-desenho li{border-top:1px dashed rgba(24,28,31,.45)}

/* 2) PINTURA EM TELA — obra emoldurada em galeria (fundo verde, moldura dourada, plaquinha) */
.c-tela{
  --bg2:#142E21; --texto:#F6EBEB; --suave:#d4cbcb; --borda:rgba(233,180,74,.35);
  color:var(--texto);
  background:radial-gradient(120% 70% at 50% 0%,#21493a 0%,#142E21 62%);
  border:1px solid #E9B44A; border-radius:22px;
  box-shadow:inset 0 0 0 7px #142E21,inset 0 0 0 8px rgba(233,180,74,.65);
  padding:34px 30px 30px;
  text-align:center;
}
.c-tela:hover{box-shadow:inset 0 0 0 7px #142E21,inset 0 0 0 8px rgba(233,180,74,.65),0 26px 40px -22px rgba(233,180,74,.4)}
.c-tela::before{display:none}
.c-tela .img{border-radius:2px;margin:8px 10px 6px;box-shadow:0 0 0 7px #E9B44A,0 0 0 9px #a87a1c,0 16px 26px rgba(0,0,0,.5);color:var(--suave)}
.c-tela .img:hover{border-radius:2px}
.c-tela .tag{align-self:center;background:#E9B44A;color:#142E21;border-radius:2px;transform:none;box-shadow:none;letter-spacing:.16em;margin-top:6px}
.c-tela h3{font-family:Georgia,'Times New Roman',serif;font-style:italic;font-size:1.55rem;margin-bottom:0}
.c-tela p{margin:0}
.c-tela ul{text-align:left}

/* 3) Gravura — gravura impressa (papel kraft, traços de goiva, carimbo, preto sólido) */
.c-xilo{
  --bg2:#efe4d0; --texto:#181C1F; --suave:#33383b; --borda:#181C1F;
  color:var(--texto);
  background:#efe4d0;
  border:4px solid #181C1F; border-radius:0;
  box-shadow:8px 8px 0 #E9B44A,8px 8px 0 3px #181C1F;
  padding-top:38px;
}
.c-xilo:hover{box-shadow:12px 12px 0 #E9B44A,12px 12px 0 3px #181C1F}
.c-xilo::before{height:16px;transform:none;background:repeating-linear-gradient(100deg,#181C1F 0 5px,transparent 5px 11px)}
.c-xilo .img{border-radius:0;border:4px solid #181C1F;box-shadow:6px 6px 0 #181C1F;margin:0 6px 4px 0}
.c-xilo .img:has(img){border:4px solid #181C1F;background:#181C1F}
.c-xilo .img:hover{border-radius:0}
.c-xilo .tag{background:transparent;color:#181C1F;border:2px solid #181C1F;border-radius:0;box-shadow:none;transform:rotate(3deg);letter-spacing:.14em;margin-left:4px}
.c-xilo h3{text-transform:uppercase;letter-spacing:.07em;font-size:1.45rem;padding-bottom:8px;border-bottom:5px solid #181C1F;margin-bottom:0}
.c-xilo li{border-top:2px solid #181C1F}
.c-xilo .btn-zap{background:#181C1F;color:#E9B44A;border-radius:0;box-shadow:5px 5px 0 #E9B44A}
.c-xilo .btn-zap:hover{box-shadow:7px 7px 0 #E9B44A;transform:translate(-2px,-2px)}
.c-xilo .btn-zap:active{box-shadow:1px 1px 0 #E9B44A;transform:translate(4px,4px)}
@media(prefers-reduced-motion:reduce){.c-desenho .img{transform:rotate(-1.2deg)}}


/* ===== v6 — aba Quem Somos ===== */
/* filtros por curso */
.filtros{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.filtros[hidden]{display:none}
.chip{font-family:inherit;font-weight:700;font-size:.85rem;padding:9px 18px;border-radius:999px;border:2px solid var(--borda);background:var(--bg2);color:var(--texto);cursor:pointer;transition:background .3s,color .3s,border-color .3s,transform .3s}
.chip:hover{transform:translateY(-2px);border-color:var(--destaque)}
.chip[aria-pressed="true"]{background:#E9B44A;border-color:#E9B44A;color:#142E21}

/* grade de obras */
.port-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:40px 26px;margin-top:36px}
.port-item{margin:0}
.port-item[hidden]{display:none}
.port-btn{display:block;position:relative;width:100%;padding:0;border:0;background:none;font:inherit;color:inherit;text-align:left;cursor:zoom-in}
.port-btn .img{width:100%;box-shadow:8px 8px 0 #E9B44A}
.port-item:nth-child(odd) .port-btn .img{transform:rotate(-1.4deg)}
.port-item:nth-child(even) .port-btn .img{transform:rotate(1.2deg) translateY(8px)}
.port-btn:hover .img,.port-btn:focus-visible .img{transform:rotate(0) scale(1.03)}
.port-btn:focus-visible{outline:3px solid var(--destaque);outline-offset:8px;border-radius:12px}
.port-zoom{position:absolute;right:12px;bottom:12px;background:#E9B44A;color:#142E21;font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:6px 12px;border-radius:6px;box-shadow:2px 2px 0 var(--oliva);opacity:0;transform:translateY(8px);transition:opacity .3s,transform .3s}
.port-btn:hover .port-zoom,.port-btn:focus-visible .port-zoom{opacity:1;transform:none}
@media(hover:none){.port-zoom{opacity:1;transform:none}}
.port-item figcaption{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin-top:26px}
.port-titulo{font-weight:700;font-size:.98rem;line-height:1.3}

/* visualizador de obras */
.lb{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;background:rgba(20,46,33,.98);padding:max(64px,env(safe-area-inset-top,0px)) 20px max(64px,env(safe-area-inset-bottom,0px));animation:entra .3s ease both}
.lb[hidden]{display:none}
html.lb-aberto,html.lb-aberto body{overflow:hidden}
.lb figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:20px;color:#F6EBEB;text-align:center}
.lb img{width:auto;height:auto;max-width:min(88vw,760px);max-height:calc(100vh - 210px);max-height:calc(100dvh - 210px);object-fit:contain;border-radius:2px;box-shadow:0 0 0 6px #E9B44A,0 0 0 8px #a87a1c,0 20px 40px rgba(0,0,0,.5)}
.lb figcaption{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 14px}
.lb figcaption strong{font-size:1.05rem}
.lb-cont{font-size:.85rem;color:#d9cfcf;letter-spacing:.1em}
.lb-btn{position:absolute;width:48px;height:48px;border-radius:50%;border:0;background:#E9B44A;color:#142E21;font-family:inherit;font-size:1.7rem;font-weight:800;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 4px 0 #a87a1c;transition:transform .15s}
.lb-btn:hover{transform:translateY(-2px)}
.lb-btn[hidden]{display:none}
.lb-btn:focus-visible{outline:3px solid #F6EBEB;outline-offset:3px}
.lb-fechar{top:max(16px,env(safe-area-inset-top,0px));right:16px}
.lb-ant,.lb-prox{top:50%;margin-top:-24px}
.lb-ant{left:16px}.lb-prox{right:16px}
@media(max-width:700px){
  .lb-ant,.lb-prox{top:auto;margin-top:0;bottom:max(14px,env(safe-area-inset-bottom,0px))}
}

/* menu com 4 abas: cabe em telas menores */
@media(max-width:980px){.nav .btn{display:none}}
@media(max-width:700px){
  .tabs{order:3;width:100%;justify-content:center;gap:2px}
  .tab{padding:8px 11px;font-size:.82rem;white-space:nowrap}
}
@media(max-width:560px){.port-grid{grid-template-columns:1fr 1fr;gap:34px 16px}.port-btn .img{box-shadow:5px 5px 0 #E9B44A}.port-zoom{right:8px;bottom:8px;padding:4px 8px;font-size:.6rem}}






/* =========================================
   Quem Somos DE EVENTOS 2026
========================================= */

.quemsomos-hero {
  background: var(--bg2);
  padding-top: 48px;
}

.quemsomos-capa {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 40px;
  align-items: center;
  padding: 38px;
  background: var(--verde);
  color: var(--creme);
  border-radius: 28px 8px 28px 8px;
  overflow: hidden;
}

.quemsomos-capa .lead {
  color: #d9cfcf;
}

.quemsomos-capa .eyebrow {
  color: var(--amarelo);
}

.quemsomos-capa h1 {
  font-size: clamp(2rem, 4.5vw, 3.4rem);
}

.quemsomos-capa .btn-line {
  color: var(--creme);
}

.quemsomos-capa-imagens {
  display: grid;
  gap: 16px;
}

.quemsomos-capa-imagens .img {
  background: rgba(246, 235, 235, .07);
  border: 1px dashed rgba(246, 235, 235, .4);
  color: var(--creme);
}

.quemsomos-intro {
  margin-bottom: 40px;
}

.quemsomos-retrato {
  min-width: 0;
}

.quemsomos-legenda {
  margin: 12px 0 0;
  font-size: .82rem;
  color: var(--suave);
}

.quemsomos-numeros {
  margin-top: 40px;
  gap: 18px;
}

.quemsomos-numeros > div {
  padding: 22px 12px;
  border-top: 2px solid var(--destaque);
}

.quemsomos-numeros span {
  display: block;
  font-size: .88rem;
  color: var(--suave);
}

.quemsomos-numeros strong {
  font-size: clamp(1.7rem, 3vw, 2.5rem);
  overflow-wrap: anywhere;
}

.quemsomos-proposito {
  margin-top: 42px;
  padding: 30px;
  background: var(--verde);
  color: var(--creme);
  border-radius: 8px 24px 8px 24px;
}

.quemsomos-proposito h3 {
  color: var(--amarelo);
}

.quemsomos-proposito p {
  margin-bottom: 0;
  max-width: 75ch;
}

.quemsomos-menu {
  padding-top: 24px;
  padding-bottom: 24px;
  background: var(--bg2);
}

.quemsomos-links {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 26px;
}

.quemsomos-links a {
  padding: 18px;
  background: var(--bg);
  border: 1px solid var(--borda);
  border-radius: 12px;
  font-size: .9rem;
  font-weight: 700;
  text-decoration: none;
  transition: background .2s, transform .2s;
}

.quemsomos-links a:hover {
  background: var(--amarelo);
  color: var(--verde);
  transform: translateY(-3px);
}

.quemsomos-projeto {
  margin-top: 32px;
}

.quemsomos-texto h3 {
  margin-top: 22px;
}

.quemsomos-lista {
  padding-left: 20px;
  color: var(--suave);
}

.quemsomos-lista li {
  padding: 5px 0;
}

.quemsomos-galeria {
  margin-top: 32px;
}

.quemsomos-resultado {
  margin-top: 32px;
  padding: 24px;
  background: var(--bg2);
  border-left: 4px solid var(--amarelo);
  border-radius: 4px 16px 16px 4px;
}

.quemsomos-resultado p {
  color: var(--suave);
  margin-bottom: 0;
}

.quemsomos-subtitulo {
  margin-top: 56px;
}

.quemsomos-imprensa {
  margin-top: 28px;
}

.quemsomos-numero {
  display: block;
  font-size: 3.5rem;
  line-height: 1.1;
  color: var(--amarelo);
}

.quemsomos-oficina-destaque {
  background: var(--verde);
  color: var(--creme);
}

.quemsomos-oficina-destaque p {
  color: #d9cfcf;
}

.quemsomos-oficina-destaque .eyebrow {
  color: var(--amarelo);
}

.quemsomos-expo-capa{
  margin-top:30px;
  max-width:720px;
  margin-left:auto;
  margin-right:auto;
}

.quemsomos-encerramento {
  background: #e9f0e4;
  color: #142e21;
}

.quemsomos-encerramento .lead {
  color: #4a5a52;
}

.quemsomos-encerramento .btn-line {
  color: #142e21;
}

#p-quemsomos section[id] {
  scroll-margin-top: 100px;
}

@media (max-width: 860px) {
  .quemsomos-capa,
  .quemsomos-intro,
  .quemsomos-projeto,
  .quemsomos-encerramento {
    grid-template-columns: 1fr;
  }

  .quemsomos-capa {
    padding: 26px;
  }

  .quemsomos-links {
    grid-template-columns: 1fr 1fr;
  }

  .quemsomos-numeros {
    grid-template-columns: 1fr 1fr;
  }

  .quemsomos-oficinas,
  .quemsomos-imprensa {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .quemsomos-capa {
    padding: 22px;
  }

  .quemsomos-links {
    grid-template-columns: 1fr;
  }

  .quemsomos-numeros {
    grid-template-columns: 1fr 1fr;
  }

  .quemsomos-proposito {
    padding: 22px;
  }

}



/* O que nos move: imagens + texto lado a lado */
.quemsomos-move{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:32px;
  align-items:center;
  margin-top:32px;
}
.quemsomos-move-imagens{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
.quemsomos-move .quemsomos-proposito{margin-top:0}

@media(max-width:860px){
  .quemsomos-move{grid-template-columns:1fr}
}



/* ===== 03 · Exposição coletiva ===== */

/* texto + capa menor */
.quemsomos-expo-topo{
  grid-template-columns:1.15fr .85fr;
  align-items:center;
}
.quemsomos-expo-capa{
  max-width:420px;
  width:100%;
  margin:0 auto;
}
.quemsomos-expo-capa .img{min-height:0}

/* data do período um pouco menor para caber */
.quemsomos-numeros .quemsomos-data{
  font-size:clamp(1.3rem,2.2vw,1.8rem);
  line-height:1.6;
}

/* duas fotos lado a lado */
.quemsomos-expo-fotos{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  margin-top:32px;
}

/* recortes de imprensa: aparecem inteiros, sem corte */
.quemsomos-imprensa .img.recorte{
  aspect-ratio:auto;
  background:#fff;
  padding:0;
}
.quemsomos-imprensa .img.recorte img{
  width:100%;
  height:auto;
  object-fit:contain;
}

@media(max-width:860px){
  .quemsomos-expo-topo{grid-template-columns:1fr}
  .quemsomos-expo-capa{max-width:520px}
}
@media(max-width:560px){
  .quemsomos-expo-fotos{grid-template-columns:1fr}
}