/* ============================================================
   MOBE · camada visual 2026 (07.10.2026)
   Mesmo conteúdo, layout editorial: degradê laranja da marca,
   rótulos [ entre colchetes ], seta ↗, numeração discreta,
   shapes oficiais bem suaves, sem fundos marrons.
   Carregada depois de styles.css. Para voltar ao visual anterior,
   basta remover o <link> de v2.css das páginas.
   ============================================================ */
:root{
  --grad:radial-gradient(ellipse 85% 110% at 25% 10%,#FF7A45 0%,#E2552C 30%,#A83C22 66%,#7A2A17 100%);
  --grad-lat:linear-gradient(90deg,rgba(122,42,23,.96) 0%,rgba(168,60,34,.88) 30%,rgba(226,85,44,.55) 55%,rgba(226,85,44,0) 80%);
  --papel:#F6F6EE;
  --fundo:#FBFAF5;
}
body{background:var(--fundo)}

/* tipografia mais editorial */
h1,h2{font-weight:300;letter-spacing:-.02em;color:var(--cacau)}
h2{font-size:clamp(2.1rem,4.2vw,3.6rem)}
h3{font-weight:400;color:var(--cacau)}
h2 strong,h1 strong{font-weight:600}

/* rótulos [ ENTRE COLCHETES ] */
.kicker{font-weight:600;font-size:.7rem;letter-spacing:.3em;color:var(--coral);gap:0}
.kicker::before{content:"[";width:auto;height:auto;background:none!important;margin-right:.6em;color:currentColor;opacity:.7}
.kicker::after{content:"]";margin-left:.6em;opacity:.7}
.hero .kicker,.bg-cacau .kicker,.bg-oliva .kicker,.page-hero .kicker{color:#FFE0CF}

/* botões: pílula, seta em círculo */
.btn{border-radius:999px;padding:13px 14px 13px 26px;font-weight:600;font-size:.74rem;letter-spacing:.14em}
.btn .ico{border-radius:50%;border:0;background:rgba(255,255,255,.2);width:32px;height:32px}
.btn-primary,.btn-oliva{background:var(--coral);color:#fff}
.btn-primary:hover,.btn-oliva:hover{background:var(--terracota)}
.btn-light{background:#fff;color:var(--cacau)}
.btn-light .ico{background:var(--coral);color:#fff}
.btn-light:hover{background:var(--cacau);color:#fff}
.btn-outline{border-color:rgba(53,30,28,.25)}
.btn-outline:hover{background:var(--coral);border-color:var(--coral);color:#fff}
.btn:not(:has(.ico)){padding:15px 28px}

/* cabeçalho */
.site-header::before{background:linear-gradient(180deg,rgba(60,22,12,.45) 0%,rgba(60,22,12,0) 100%)}
.site-header.scrolled{background:rgba(251,250,245,.92)}
.menu a{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;font-weight:500}

/* hero: foto inteira com o degradê entrando pela lateral (padrão aprovado nas apresentações) */
.hero::after{background:var(--grad-lat),linear-gradient(0deg,rgba(90,31,19,.55) 0%,rgba(90,31,19,0) 45%)}
.hero h1{font-weight:300;letter-spacing:-.025em;max-width:15ch}
.hero-foot .note{border-left-color:#fff}

/* páginas internas: degradê laranja no lugar do marrom */
.page-hero{background:var(--grad);position:relative;overflow:hidden}
.page-hero::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.035;
  background:url(shapes-fileiras.svg) center/900px auto repeat}
.page-hero .container{position:relative;z-index:1}
.crumb{color:#FFE0CF}

/* seções */
.section{padding:clamp(90px,11vw,170px) 0}
.bg-bege2{background:var(--papel)}
.bg-cacau{background:var(--grad);position:relative;overflow:hidden}
.bg-cacau::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.035;background:url(shapes-fileiras.svg) center/900px auto repeat}
.bg-cacau .container{position:relative;z-index:1}
.bg-cacau h1,.bg-cacau h2,.bg-cacau h3{color:#fff}
.bg-cacau p{color:rgba(255,255,255,.82)}
.bg-oliva{background:var(--oliva)}
.rule-oliva{background:var(--coral);height:2px;width:64px}

/* numeração discreta ao lado do título das seções de topo */
body{counter-reset:sec}
.section > .container > .center > .kicker,
.section > .container > .split > div > .kicker,
.section > .container.split > div > .kicker{counter-increment:sec}
.section > .container > .center > .kicker::before,
.section > .container.split > div > .kicker::before{content:counter(sec,decimal-leading-zero) "  [";}

/* cards: sem borda pesada, fio coral no topo, número grande */
.card{border:0;border-top:2px solid var(--coral);background:#fff;padding:38px 32px 34px;box-shadow:0 1px 0 rgba(53,30,28,.06)}
.card:hover{transform:translateY(-6px);box-shadow:0 28px 60px rgba(122,42,23,.14)}
.card .cnum{font-size:2.1rem;font-weight:300;letter-spacing:0;color:var(--coral);margin-bottom:22px}
.card .more{color:var(--coral);font-weight:600}
.card .more span{display:inline-block}
.card .more span::before{content:""}
.tint-oliva{background:var(--oliva)!important;border-top-color:#fff!important}
.tint-oliva h3,.tint-oliva p,.tint-oliva .more,.tint-oliva .cnum{color:#fff!important}

/* sócios: foto P&B que ganha cor no hover */
.person{border:0;background:transparent;padding:0;text-align:left}
.person-photo{height:440px;border:0;filter:grayscale(1) contrast(1.05);transition:filter .6s var(--ease),transform .6s var(--ease)}
.person:hover .person-photo{filter:none}
.person h3{font-size:1.6rem;font-weight:300;margin-top:4px}
.person .role{color:var(--coral);font-weight:600}

/* projetos: cartões altos, rótulo e seta */
.proj{min-height:520px}
.proj::after{background:linear-gradient(180deg,transparent 35%,rgba(90,31,19,.88))}
.proj .info{padding:30px}
.proj h3{font-size:1.7rem;font-weight:300}
.proj h3::after{content:" ↗";color:var(--coral);font-size:.8em}
.proj .meta{color:#FFE0CF;font-weight:600}
.proj img,.proj .ph{transition:transform 1s var(--ease)}
.proj:hover img{transform:scale(1.04)}

/* processo */
.step .sn{font-size:2.6rem;font-weight:300;color:var(--coral);line-height:1}
.step h3{font-size:1.4rem;font-weight:400}

/* stats */
.stat .num{color:var(--coral);font-weight:300}

/* checks */
.checks li::before{width:14px;height:2px;flex:0 0 14px;margin-top:12px}

/* faixa de chamada: degradê laranja com shapes */
.cta-band{background:var(--grad);position:relative;overflow:hidden;border-radius:28px}
.cta-band::after{content:"";position:absolute;inset:0;opacity:.04;background:url(shapes-fileiras.svg) center/700px auto repeat;pointer-events:none}
.cta-band > *{position:relative;z-index:1}
.cta-band h2{font-weight:300}

/* FAQ */
.faq summary{color:var(--cacau)}
.faq summary::after{content:"↗";transform:rotate(90deg);font-size:1.2rem}
.faq details[open] summary::after{transform:rotate(0)}

/* formulário */
.field label{color:var(--coral);font-weight:600}
.field input,.field select,.field textarea{background:#fff;border:0;border-bottom:1px solid rgba(53,30,28,.25);padding:14px 2px}
.field input:focus,.field select:focus,.field textarea:focus{border-bottom-color:var(--coral)}
.contact-info .item .k{color:var(--coral);font-weight:600}

/* rodapé: degradê laranja, sem marrom */
.site-footer{background:var(--grad);position:relative;overflow:hidden}
.site-footer::after{content:"";position:absolute;inset:0;opacity:.035;background:url(shapes-fileiras.svg) center/900px auto repeat;pointer-events:none}
.site-footer .container{position:relative;z-index:1}
.foot-top{border-bottom-color:rgba(255,255,255,.2)}
.foot-top p,.foot-col a{color:rgba(255,255,255,.82)}
.foot-col a:hover{color:#fff;text-decoration:underline}
.foot-col h4{color:#fff}
.foot-bottom{color:rgba(255,255,255,.7)}
.foot-bottom .assin{color:#fff}

/* stats-box e placeholders escuros */
.stats-box{background:var(--grad)}
.stats-box .num{color:#fff}
.stats-box .cell p{color:rgba(255,255,255,.8)}
.ph.cacau{background:var(--grad)}

/* mídia com cantos suaves */
.media{border:0}

/* 07.10 · ajustes da VP: faixas em degradê sem shapes; títulos dos cards nessas faixas em branco */
.bg-cacau::after{display:none}
.bg-cacau .card{background:rgba(255,255,255,.08);border-top-color:rgba(255,255,255,.55)}
.bg-cacau .card .cnum{color:#fff;font-size:1.25rem;font-weight:500;letter-spacing:.12em;line-height:1.35}
.bg-cacau .card h3{color:#fff}
.bg-cacau .card p,.bg-cacau .card li{color:rgba(255,255,255,.88)}
.bg-cacau .checks li::before{background:#fff}
.bg-cacau .card ol li::before{background:none;color:#fff;font-weight:600}

/* 07.10 · "Sobre o projeto" nas páginas de projeto: degradê laranja da marca com texto branco */
.sobre-proj{background:var(--grad)}
.sobre-proj h2,.sobre-proj h3{color:#fff}
.sobre-proj p,.sobre-proj li{color:rgba(255,255,255,.9)}
.sobre-proj .kicker{color:#FFE0CF}
.sobre-proj .rule-oliva{background:#fff}
.sobre-proj strong{color:#fff}
.crumb a{color:#fff;text-decoration:underline;text-underline-offset:3px}

/* 07.10 · efeito vidro fosco (glass) sobre o degradê */
.sobre-proj{position:relative;overflow:hidden}
.sobre-proj::before{content:"";position:absolute;width:620px;height:620px;border-radius:50%;left:-140px;top:-160px;
  background:radial-gradient(circle,rgba(255,170,120,.55),rgba(255,170,120,0) 70%);pointer-events:none}
.sobre-proj .split > div:last-child,
.bg-cacau .card{
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.28);border-top:1px solid rgba(255,255,255,.45);
  border-radius:22px;
  -webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);
  box-shadow:0 20px 50px rgba(90,31,19,.22), inset 0 1px 0 rgba(255,255,255,.25);
}
.sobre-proj .split > div:last-child{padding:clamp(28px,3.5vw,48px)}
.sobre-proj .container{position:relative;z-index:1}

/* 07.10 · vidro mais evidente + aplicado em mais pontos */
.glass,.sobre-proj .split > div:last-child,.bg-cacau .card{
  background:linear-gradient(135deg,rgba(255,255,255,.26),rgba(255,255,255,.08));
  border:1px solid rgba(255,255,255,.38);
  -webkit-backdrop-filter:blur(22px) saturate(160%);backdrop-filter:blur(22px) saturate(160%);
  box-shadow:0 24px 60px rgba(90,31,19,.25), inset 0 1px 0 rgba(255,255,255,.45);
}
/* manchas de luz por trás, para o desfoque aparecer */
.sobre-proj::after,.bg-cacau::before{content:"";position:absolute;width:520px;height:520px;border-radius:50%;right:6%;top:18%;
  background:radial-gradient(circle,rgba(255,214,191,.75),rgba(255,214,191,0) 68%);pointer-events:none;z-index:0}
.bg-cacau::before{left:8%;right:auto;top:auto;bottom:-120px}
.bg-cacau .container{position:relative;z-index:1}

/* cabeçalho em vidro ao rolar */
.site-header.scrolled{background:rgba(251,250,245,.62);-webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%);
  box-shadow:0 1px 0 rgba(255,255,255,.6),0 8px 30px rgba(53,30,28,.06)}

/* hero: texto de apoio num cartão de vidro */
.hero-foot .note{border:1px solid rgba(255,255,255,.35);border-radius:18px;padding:18px 22px;
  background:linear-gradient(135deg,rgba(255,255,255,.22),rgba(255,255,255,.06));
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
/* botão secundário do hero em vidro */
.hero .btn-outline{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.45)!important;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}

/* chamada final: conteúdo num vidro */
.cta-band{padding:clamp(28px,4vw,56px)}
.cta-band > *{position:relative;z-index:1}
.cta-band h2,.cta-band p,.cta-band .hero-actions{max-width:none}
.cta-band::before{content:"";position:absolute;width:460px;height:460px;border-radius:50%;left:-80px;top:-140px;background:radial-gradient(circle,rgba(255,214,191,.7),rgba(255,214,191,0) 68%);z-index:0}

/* projetos: rótulo da obra em vidro sobre a foto */
.proj .info{margin:16px;border-radius:16px;padding:20px 22px;
  background:linear-gradient(135deg,rgba(255,255,255,.22),rgba(255,255,255,.06));border:1px solid rgba(255,255,255,.32);
  -webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%)}
.proj::after{background:linear-gradient(180deg,transparent 55%,rgba(90,31,19,.45))}

/* números da Sobre: células em vidro */
.stats-box{gap:14px;padding:14px;border-radius:24px}
.stats-box .cell{border-right:0!important;border-bottom:0!important;border-radius:16px;
  background:linear-gradient(135deg,rgba(255,255,255,.2),rgba(255,255,255,.05));border:1px solid rgba(255,255,255,.3)!important}

/* 07.10 · contato: quadro em vidro sobre manchas do degradê da marca */
.contato-vidro{position:relative;isolation:isolate}
.contato-vidro::before,.contato-vidro::after{content:"";position:absolute;border-radius:50%;z-index:-1;pointer-events:none}
.contato-vidro::before{width:300px;height:300px;right:-40px;top:-50px;background:radial-gradient(circle,#FF7A45 0%,rgba(255,122,69,0) 70%);opacity:.85}
.contato-vidro::after{width:340px;height:340px;left:-60px;bottom:-70px;background:radial-gradient(circle,#A83C22 0%,rgba(168,60,34,0) 70%);opacity:.6}
.glass-claro{
  background:linear-gradient(135deg,rgba(255,255,255,.72),rgba(255,255,255,.38));
  border:1px solid rgba(255,255,255,.85);border-radius:24px;padding:40px;
  -webkit-backdrop-filter:blur(26px) saturate(160%);backdrop-filter:blur(26px) saturate(160%);
  box-shadow:0 30px 70px rgba(168,60,34,.18), inset 0 1px 0 rgba(255,255,255,.9);
}

/* 07.10 · VP: sem manchas de luz desfocadas; chamada final sem shapes */
.cta-band::before,.cta-band::after,.sobre-proj::before,.sobre-proj::after,.bg-cacau::before,.contato-vidro::before,.contato-vidro::after{display:none!important}
.glass-claro{background:#fff;border:1px solid rgba(255,96,54,.22);border-top:3px solid var(--coral);box-shadow:0 24px 60px rgba(168,60,34,.10)}

/* crédito da agência no rodapé */
.foot-bottom{align-items:center}
.foot-bottom .credito{color:rgba(255,255,255,.75);font-size:.78rem;letter-spacing:.04em;border-bottom:1px solid rgba(255,255,255,.35);padding-bottom:1px;transition:.3s}
.foot-bottom .credito:hover{color:#fff;border-bottom-color:#fff}
@media(min-width:761px){.foot-bottom{display:grid;grid-template-columns:1fr auto auto;gap:28px}}
.split{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
@media(max-width:980px){.split{grid-template-columns:1fr}}

/* 07.10 · VP: capa com véu amarronzado quente (no lugar do laranja) */
.hero::after{background:
  linear-gradient(90deg,rgba(58,32,22,.82) 0%,rgba(70,40,26,.62) 45%,rgba(70,40,26,.30) 100%),
  linear-gradient(0deg,rgba(45,24,16,.78) 0%,rgba(45,24,16,0) 50%),
  linear-gradient(180deg,rgba(45,24,16,.45) 0%,rgba(45,24,16,0) 25%)}
.hero h1.hero-h1{max-width:none;white-space:nowrap}
@media(max-width:760px){.hero h1.hero-h1{white-space:normal}.hero h1.hero-h1 br{display:none}}

/* 07.10 · VP: hover dos botões em verde oliva */
.btn-light:hover,.btn-primary:hover,.btn-oliva:hover,.btn-outline:hover{background:var(--oliva)!important;border-color:var(--oliva)!important;color:#fff!important}
.btn:hover .ico{background:rgba(255,255,255,.22)!important;color:#fff}

/* 07.10 · VP: fotos com cantos levemente arredondados */
:root{--r-foto:16px}
.media,.person-photo,.proj,.ph,.mapa,.card img,.split img,.grid img,.gal img,.galeria img,section img:not(.brand-img):not(.bg):not([src*="logo"]):not(.hero-bg img){border-radius:var(--r-foto)}
.proj{overflow:hidden}
.hero-bg img,.brand-img,.site-footer img{border-radius:0}