/* ===========================================================================
   ECOCASA — Preview navegável (site estático) — folha de estilo COMUM
   Padrão "editorial hídrico / fluxo contínuo" aprovado (home-redesign-v1).
   =========================================================================== */
:root{
  --verde:#0B3D2C; --deep:#082A1E; --verde700:#0F4C37;
  --lima:#729F28; --lima-soft:#A9CF5B; --lima-ink:#557519;
  --azul:#0071E3; --pale:#E9F2EA; --paper:#FBFDFB; --areia:#F1D2A9;
  --muted:#5B6B61; --ease:cubic-bezier(.22,.61,.36,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Poppins',sans-serif;color:#0E1A14;background:var(--paper);overflow-x:hidden}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
em{font-style:italic}
.wrap{max-width:1200px;margin:0 auto;padding:0 clamp(24px,5vw,80px)}
.eyebrow{font-family:'Montserrat',sans-serif;font-weight:600;font-size:12.5px;letter-spacing:3.4px;text-transform:uppercase;display:inline-flex;align-items:center;gap:12px}
.eyebrow::before{content:"";width:34px;height:2px;background:currentColor;border-radius:2px}
.eyebrow.lima{color:var(--lima-ink)} .eyebrow.lsoft{color:var(--lima-soft)}
.eyebrow.center{justify-content:center}
h2.sec{font-family:'Montserrat',sans-serif;font-weight:800;font-size:clamp(28px,4vw,46px);line-height:1.1;letter-spacing:-1px;color:var(--verde);margin:16px 0 0}
.lead{font-weight:300;font-size:clamp(15px,1.6vw,18px);line-height:1.7;color:var(--muted)}

/* reveal on scroll (transform-only, à prova de WP Rocket) */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.32s}

/* wave dividers */
.wave{position:absolute;left:0;right:0;line-height:0;z-index:2}.wave svg{width:100%;height:70px;display:block}.wave.bottom{bottom:-1px}

/* ondas concêntricas ecoPulse */
.rings{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.rings span{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);border-radius:50%;border:1px solid var(--lima-soft);opacity:.13;animation:ecoPulse 7s var(--ease) infinite}
.rings span:nth-child(1){width:420px;height:420px}
.rings span:nth-child(2){width:760px;height:760px;animation-delay:1.4s;opacity:.10}
.rings span:nth-child(3){width:1140px;height:1140px;animation-delay:2.8s;opacity:.07}
@keyframes ecoPulse{0%{transform:translate(-50%,-50%) scale(.82)}100%{transform:translate(-50%,-50%) scale(1.18)}}

/* =================== HEADER GLASS v7 (flip por scroll) =================== */
.eco-hdr{position:fixed;top:0;left:0;right:0;z-index:60;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(18px,2.4vw,34px);
  padding:34px clamp(22px,3.4vw,44px);background:rgba(255,255,255,.55);
  -webkit-backdrop-filter:blur(20px) saturate(140%);backdrop-filter:blur(20px) saturate(140%);
  border-bottom:1px solid rgba(11,61,44,.08);
  transition:background .48s var(--ease),backdrop-filter .48s,box-shadow .48s,padding .48s,border-color .48s}
.eco-hdr.is-dark{background:rgba(8,42,30,.72);-webkit-backdrop-filter:blur(24px) saturate(150%);backdrop-filter:blur(24px) saturate(150%);
  box-shadow:0 14px 38px -20px rgba(0,0,0,.55);border-bottom-color:rgba(255,255,255,.10);padding-top:26px;padding-bottom:26px}
.eco-logo{position:relative;height:50px;flex:none;display:inline-block}
.eco-logo img{height:50px;width:auto;display:block;transition:opacity .48s var(--ease)}
.eco-logo .lc{position:relative;z-index:1}
.eco-logo .lw{position:absolute;top:0;left:0;opacity:0}
.eco-hdr.is-dark .eco-logo .lc{opacity:0}
.eco-hdr.is-dark .eco-logo .lw{opacity:1}
.eco-nav{display:flex;align-items:center;justify-content:center;gap:clamp(10px,1.1vw,18px);flex-wrap:nowrap;min-width:0}
.eco-nav>a,.eco-drop>span{font-family:'Montserrat',sans-serif;font-weight:600;font-size:12.5px;letter-spacing:.2px;color:var(--verde);cursor:pointer;position:relative;padding:6px 0;display:inline-flex;align-items:center;gap:6px;transition:color .48s var(--ease);white-space:nowrap}
.eco-hdr.is-dark .eco-nav>a,.eco-hdr.is-dark .eco-drop>span{color:rgba(255,255,255,.92)}
.eco-nav>a::after,.eco-drop>span::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--azul);border-radius:2px;transition:width .3s var(--ease),background .48s}
.eco-hdr.is-dark .eco-nav>a::after,.eco-hdr.is-dark .eco-drop>span::after{background:var(--lima-soft)}
.eco-nav>a:hover,.eco-drop:hover>span{color:var(--azul)}
.eco-hdr.is-dark .eco-nav>a:hover,.eco-hdr.is-dark .eco-drop:hover>span{color:var(--lima-soft)}
.eco-nav>a:hover::after,.eco-drop:hover>span::after{width:100%}
/* board final: "Nossos Produtos" é dropdown E link p/ a página nova produtos.html */
.eco-drop>.drop-head{font-family:'Montserrat',sans-serif;font-weight:600;font-size:12.5px;letter-spacing:.2px;color:var(--verde);cursor:pointer;position:relative;padding:6px 0;display:inline-flex;align-items:center;gap:6px;transition:color .48s var(--ease);white-space:nowrap;text-decoration:none}
.eco-hdr.is-dark .eco-drop>.drop-head{color:rgba(255,255,255,.92)}
.eco-drop>.drop-head::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--azul);border-radius:2px;transition:width .3s var(--ease),background .48s}
.eco-hdr.is-dark .eco-drop>.drop-head::after{background:var(--lima-soft)}
.eco-drop:hover>.drop-head{color:var(--azul)}
.eco-hdr.is-dark .eco-drop:hover>.drop-head{color:var(--lima-soft)}
.eco-drop:hover>.drop-head::after{width:100%}
.eco-drop{position:relative}
.eco-drop .caret{font-size:9px;transition:transform .3s}
.eco-drop:hover .caret{transform:rotate(180deg)}
.eco-menu{position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%) translateY(8px);min-width:230px;
  background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);border:1px solid rgba(11,61,44,.10);
  border-radius:16px;padding:8px;opacity:0;visibility:hidden;transition:opacity .28s var(--ease),visibility .28s,transform .28s var(--ease);box-shadow:0 30px 70px -28px rgba(8,42,30,.35)}
.eco-hdr.is-dark .eco-menu{background:rgba(10,46,33,.95);border-color:rgba(255,255,255,.12)}
.eco-drop:hover .eco-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.eco-menu a{display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:10px;font-family:'Poppins',sans-serif;font-weight:400;font-size:14px;color:var(--verde);transition:background .2s,color .48s}
.eco-hdr.is-dark .eco-menu a{color:rgba(255,255,255,.9)}
.eco-menu a:hover{background:rgba(114,159,40,.14)}
.eco-hdr.is-dark .eco-menu a:hover{background:rgba(169,207,91,.18);color:#fff}
.eco-menu .dot{width:7px;height:7px;border-radius:50%;flex:none}
.dot.agua{background:var(--azul)}.dot.esg{background:var(--lima)}
.eco-hdr.is-dark .dot.agua{background:#3FA0FF}.eco-hdr.is-dark .dot.esg{background:var(--lima-soft)}
.eco-menu.tecmenu{min-width:264px} /* ⚠ não usar classe "tec" no dropdown — colide com a section .tec (position:relative) */
.eco-menu .grp{font-family:'Montserrat',sans-serif;font-weight:700;font-size:10.5px;letter-spacing:1.2px;text-transform:uppercase;color:var(--azul);opacity:.72;padding:10px 14px 3px;pointer-events:none}
.eco-menu .grp:first-child{padding-top:4px}
.eco-hdr.is-dark .eco-menu .grp{color:var(--lima-soft);opacity:.85}
.eco-menu a .ext{font-size:10px;opacity:.55;margin-left:auto}
/* dropdown do GRUPO: nome da empresa em Montserrat + qualificador em itálico leve */
.eco-menu.grupomenu{min-width:296px}
.eco-menu.grupomenu a{font-family:'Montserrat',sans-serif;font-weight:700;font-size:13.5px;white-space:nowrap}
.eco-menu.grupomenu a em{font-style:italic;font-weight:600;opacity:.72;margin-left:-4px}
.eco-menu a .soon{font-family:'Poppins',sans-serif;font-size:10.5px;font-weight:400;opacity:.55;margin-left:auto;white-space:nowrap}
.eco-logo-txt{text-decoration:none}
.ge-wordmark{font-family:'Montserrat',sans-serif;font-weight:800;font-size:18px;letter-spacing:.4px;color:var(--verde);white-space:nowrap}
.ge-wordmark b{font-weight:800;color:var(--azul)}
.eco-hdr.is-dark .ge-wordmark{color:#fff}
.eco-hdr.is-dark .ge-wordmark b{color:var(--lima-soft)}
.eco-footer .ge-wordmark.fw{display:inline-block;font-size:21px;color:#fff;margin-bottom:6px}
.eco-footer .ge-wordmark.fw b{color:var(--lima-soft)}
.eco-orc{font-family:'Montserrat',sans-serif;font-weight:700;font-size:13px;color:#fff;background:var(--verde);border:1px solid var(--verde);
  padding:11px 22px;border-radius:100px;box-shadow:0 12px 26px -14px rgba(11,61,44,.5);white-space:nowrap;
  transition:background .48s var(--ease),border-color .48s,color .48s,transform .35s}
.eco-orc:hover{background:var(--lima);border-color:var(--lima);color:#08301F;transform:translateY(-2px)}
.eco-hdr.is-dark .eco-orc{background:var(--lima-soft);border-color:var(--lima-soft);color:#08301F}
.eco-hdr.is-dark .eco-orc:hover{background:#fff;border-color:#fff}
.eco-burger{display:none;font-size:22px;color:var(--verde);background:none;border:none;cursor:pointer}
.eco-hdr.is-dark .eco-burger{color:#fff}
@media(max-width:1280px){.eco-nav{display:none}.eco-burger{display:block}}

/* =================== HERO =================== */
.hero{position:relative;min-height:94vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  padding:150px 24px 120px;overflow:hidden;background:radial-gradient(120% 90% at 50% 0%,#11553C 0%,var(--verde) 45%,var(--deep) 100%)}
.hero.short{min-height:78vh;padding:160px 24px 110px}
.hero .inner{position:relative;z-index:3;max-width:820px}
.hero h1{font-family:'Montserrat',sans-serif;font-weight:800;color:#fff;font-size:clamp(34px,5.6vw,62px);line-height:1.07;letter-spacing:-1.4px;margin:22px 0 0}
.hero h1 em{color:var(--lima-soft)}
.hero .sub{font-weight:300;font-size:clamp(16px,2vw,19px);line-height:1.7;color:rgba(255,255,255,.86);max-width:620px;margin:22px auto 0}
.cta{display:flex;gap:15px;justify-content:center;flex-wrap:wrap;margin-top:36px}
.b1{background:var(--azul);color:#fff;font-family:'Montserrat',sans-serif;font-weight:600;padding:16px 32px;border-radius:100px;box-shadow:0 14px 34px -12px rgba(0,113,227,.85);transition:transform .3s var(--ease),box-shadow .3s}
.b1.lime{background:var(--lima);box-shadow:0 14px 34px -12px rgba(114,159,40,.7);color:#08301F}
.b1:hover{transform:translateY(-3px);box-shadow:0 20px 40px -12px rgba(0,113,227,.9)}
.b2{color:#fff;font-family:'Montserrat',sans-serif;font-weight:600;padding:16px 28px;border-radius:100px;border:1px solid rgba(255,255,255,.32);background:rgba(255,255,255,.06);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:inline-flex;align-items:center;gap:9px;transition:all .3s var(--ease)}
.b2:hover{background:rgba(255,255,255,.14);transform:translateY(-3px)}
.b2 i{color:#25D366}
.badge{display:inline-flex;margin:32px auto 0;padding:10px 20px;border-radius:100px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-size:13.5px;color:rgba(255,255,255,.9)}
.badge b{font-family:'Montserrat',sans-serif;color:var(--lima-soft);font-weight:700}

/* =================== STATS =================== */
.stats{background:var(--deep);padding:78px 24px;position:relative}
/* flex-wrap + célula por CONTEÚDO (não 1fr): números longos (+43.200m³) estouravam a
   célula fixa de ~250px e SOBREPUNHAM o vizinho. Unidade vai em <small>. */
.stats .row{display:flex;max-width:1140px;margin:0 auto;align-items:center;justify-content:center;flex-wrap:wrap;row-gap:34px}
.stat{flex:1 1 auto;min-width:0;text-align:center;padding:0 clamp(12px,1.8vw,22px)}
.stat .n{font-family:'Montserrat',sans-serif;font-weight:700;font-size:clamp(34px,4.2vw,52px);color:var(--lima-soft);line-height:1;letter-spacing:-1px;white-space:nowrap}
.stat .n small{font-size:.52em;font-weight:800;margin-left:2px}
.stat .l{font-weight:300;font-size:14px;color:rgba(233,242,234,.72);margin-top:8px}
.vdiv{width:1px;align-self:stretch;background:rgba(169,207,91,.25);margin:6px 0}
@media(max-width:760px){.stats .row{flex-direction:column;gap:34px}.vdiv{width:60%;height:1px;margin:0 auto}}

/* =================== SOBRE / SPLIT EDITORIAL =================== */
.split{padding:clamp(56px,6vw,84px) 0;position:relative}
/* fr, NÃO %: com `46% 54%` as colunas somam 100% e o `gap` soma POR CIMA — a grade
   ficava 60px mais larga que o container e a PÁGINA INTEIRA rolava de lado entre
   ~880 e ~1100px (faixa de laptop), em toda página com .split. `fr` reparte o
   espaço que sobra DEPOIS do gap, então a proporção é a mesma e nada estoura. */
.split .grid{display:grid;grid-template-columns:46fr 54fr;gap:60px;align-items:center}
/* grid item tem min-width:auto por padrão: o .panel travava no min-content do .selo
   (~442px) e CORTAVA ~67px do conteúdo no mobile. min-width:0 deixa encolher. */
.split .grid>*{min-width:0}
.split.rev .grid{grid-template-columns:54fr 46fr}
.split .panel{max-width:520px}
.split.rev .panel{margin-left:auto}
.chips{display:flex;flex-direction:column;gap:12px;margin:24px 0}
.chip{display:flex;align-items:center;gap:11px;font-size:15px;color:var(--verde)}
.chip i{width:26px;height:26px;border-radius:50%;background:rgba(114,159,40,.14);color:var(--lima-ink);display:grid;place-items:center;font-size:12px;flex:none}
.selo{display:flex;background:#fff;border:1px solid var(--pale);border-radius:18px;box-shadow:0 18px 44px -26px rgba(8,42,30,.3);overflow:hidden;margin:8px 0 26px}
.selo .cell{flex:1 1 0;min-width:0;padding:18px 14px;text-align:center;position:relative}
.selo .cell + .cell::before{content:"";position:absolute;left:0;top:18%;height:64%;width:1px;background:rgba(114,159,40,.24)}
.selo .n{font-family:'Montserrat',sans-serif;font-weight:700;font-size:21px;color:var(--lima-ink);line-height:1}
.selo .l{font-size:10.5px;letter-spacing:.4px;text-transform:uppercase;color:var(--muted);margin-top:6px;line-height:1.3}
/* telas estreitas: 4 células em linha não cabem — vira 2×2 */
@media(max-width:560px){
  .selo{flex-wrap:wrap}
  .selo .cell{flex:1 1 50%}
  .selo .cell + .cell::before{display:none}
  .selo .cell:nth-child(even)::before{content:"";position:absolute;left:0;top:18%;height:64%;width:1px;background:rgba(114,159,40,.24);display:block}
  .selo .cell:nth-child(n+3){border-top:1px solid rgba(114,159,40,.18)}
}
.btn-azul{display:inline-flex;align-items:center;gap:9px;background:var(--azul);color:#fff;font-family:'Montserrat',sans-serif;font-weight:600;font-size:14px;padding:14px 28px;border-radius:100px;box-shadow:0 14px 30px -14px rgba(0,113,227,.7);transition:transform .3s var(--ease)}
.btn-azul:hover{transform:translateY(-3px)}
.photo{position:relative;aspect-ratio:4/5;border-radius:20px;overflow:hidden;box-shadow:0 24px 60px -24px rgba(8,42,30,.4);background:var(--deep)}
.photo img,.photo video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 38%;filter:grayscale(.28) contrast(1.04) brightness(1.12) saturate(.95)}
.photo::after{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(155deg,rgba(11,61,44,.34) 0%,rgba(8,42,30,.12) 50%,rgba(15,76,55,.10) 100%);mix-blend-mode:multiply}
.photo .frame{position:absolute;inset:0;z-index:2;border-radius:20px;box-shadow:inset 0 0 0 1px rgba(169,207,91,.20);pointer-events:none}
.photo .float-selo{position:absolute;bottom:18px;left:18px;right:18px;z-index:3;display:flex;align-items:center;gap:14px;background:rgba(8,42,30,.55);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border:1px solid rgba(169,207,91,.25);border-radius:14px;padding:14px 18px}
.photo .float-selo .big{font-family:'Montserrat',sans-serif;font-weight:800;font-size:30px;color:var(--lima-soft);line-height:1}
.photo .float-selo .txt{font-size:12.5px;color:rgba(255,255,255,.86);line-height:1.4}
@media(max-width:860px){.split .grid,.split.rev .grid{grid-template-columns:1fr;gap:36px}.photo{order:-1;aspect-ratio:16/11}}

/* =================== BENTO / CARDS =================== */
.section{padding:clamp(56px,6vw,84px) 0;position:relative}
.section .head{text-align:center;max-width:700px;margin:0 auto 50px}
.bento{display:flex;flex-wrap:wrap;gap:22px}
.card{flex:1 1 30%;min-width:260px;position:relative;background:#fff;border:1px solid var(--pale);border-radius:18px;padding:30px 26px;overflow:hidden;transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .35s var(--ease);box-shadow:0 8px 24px -16px rgba(11,61,44,.18)}
.card:hover{transform:translateY(-6px);box-shadow:0 26px 50px -24px rgba(11,61,44,.34);background:var(--verde)}
.card .ghost{position:absolute;top:8px;right:18px;font-family:'Montserrat',sans-serif;font-weight:800;font-size:78px;color:rgba(11,61,44,.05);line-height:1;transition:color .35s}
.card:hover .ghost{color:rgba(255,255,255,.08)}
.card .ic{width:52px;height:52px;border-radius:13px;display:grid;place-items:center;font-size:23px;margin-bottom:18px;transition:all .35s var(--ease)}
.card.agua .ic{background:rgba(0,113,227,.10);color:var(--azul)}
.card.esg .ic{background:rgba(114,159,40,.12);color:var(--lima-ink)}
.card:hover .ic{background:rgba(169,207,91,.2);color:var(--lima-soft)}
.card h3{font-family:'Montserrat',sans-serif;font-weight:700;font-size:19px;color:var(--verde);transition:color .35s;position:relative;z-index:2}
.card p{font-size:14px;line-height:1.6;color:var(--muted);margin:10px 0 16px;transition:color .35s;position:relative;z-index:2}
.card .more{font-family:'Montserrat',sans-serif;font-weight:600;font-size:13px;color:var(--azul);display:inline-flex;align-items:center;gap:7px;transition:gap .3s,color .35s;position:relative;z-index:2}
.card.esg .more{color:var(--lima-ink)}
.card:hover h3,.card:hover p,.card:hover .more{color:#fff}.card:hover .more{gap:12px}
@media(max-width:1024px){.card{flex:1 1 46%}}@media(max-width:620px){.card{flex:1 1 100%}}

/* ---- Tecnologias pilarizadas por segmento (rev01) ---- */
.tech-pillars{display:flex;flex-direction:column;gap:34px}
.tech-pillar-h{display:flex;align-items:center;flex-wrap:wrap;gap:10px;font-family:'Montserrat',sans-serif;font-weight:800;font-size:15px;letter-spacing:.6px;text-transform:uppercase;color:var(--verde);margin-bottom:18px;padding-bottom:11px;border-bottom:1px solid rgba(11,61,44,.10)}
.tech-pillar-h em{font-family:'Poppins',sans-serif;font-weight:400;font-size:12.5px;letter-spacing:0;text-transform:none;color:var(--verde);opacity:.55;font-style:normal}
.tech-pillar-dot{width:9px;height:9px;border-radius:50%;flex:none}
.tech-pillar-dot.agua{background:var(--azul)}
.tech-pillar-dot.esg{background:var(--lima)}
.tech-pillar-dot.outros{background:#C9A24B}
.tech-pillar-cards{display:flex;flex-wrap:wrap;gap:22px}
.tech-pillar-cards .card{flex:0 1 340px}
@media(max-width:760px){.tech-pillar-cards .card{flex:1 1 100%}}

/* ---- Clientes categorizados (rev01) ---- */
.confia-group{margin-top:32px}
.confia-group:first-of-type{margin-top:8px}
.confia-group-h{font-family:'Montserrat',sans-serif;font-weight:800;font-size:13px;letter-spacing:1px;text-transform:uppercase;color:var(--verde);opacity:.7;margin-bottom:16px}
.confia-brasil{margin-top:40px;font-family:'Montserrat',sans-serif;font-weight:700;font-size:16px;color:var(--verde);display:inline-flex;align-items:center;gap:9px}
.confia-brasil b{color:var(--azul)}
.confia-ref{margin-top:24px;background:#fff;border:1px solid var(--pale);border-radius:22px;padding:clamp(20px,3vw,42px);box-shadow:0 18px 44px -26px rgba(11,61,44,.22)}
.confia-ref img{display:block;width:100%;max-width:1040px;margin:0 auto;height:auto}

/* ---- Clientes v2 (rev01): logos individuais em ALTA (nativos da apresentação), verde → cor real no hover ---- */
/* Mural uniforme (rev01 r23): categorias empilhadas full-width, caixas de largura
   FIXA e linhas centralizadas → última linha sempre centra (sem vão à direita nem
   logo órfão). Antes era grid 2-col assimétrico + auto-fill = nº de colunas flutuava. */
.confia2{max-width:1080px;margin:30px auto 0;text-align:center}
.c2group{margin-bottom:40px}
.c2group:last-child{margin-bottom:0}
.c2group h3{font-family:'Montserrat',sans-serif;font-weight:800;font-size:13px;letter-spacing:2.2px;text-transform:uppercase;color:var(--verde);text-align:center;margin-bottom:16px}
.logos2{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.lg2{flex:0 0 clamp(128px,13.5vw,156px);display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid var(--pale);border-radius:12px;min-height:72px;padding:12px 14px;transition:transform .3s var(--ease),border-color .3s,box-shadow .3s}
.lg2 img{max-width:100%;max-height:42px;width:auto;height:auto;object-fit:contain;
  filter:grayscale(1) sepia(1) hue-rotate(52deg) saturate(.55) brightness(.92);opacity:.82;
  transition:filter .35s var(--ease),opacity .35s var(--ease)}
.lg2:hover{transform:translateY(-3px);border-color:rgba(114,159,40,.5);box-shadow:0 14px 26px -18px rgba(11,61,44,.35)}
.lg2:hover img{filter:none;opacity:1}
/* .c2badge (selo "Atendemos em todo o Brasil" com PNG chapado do mapa) foi REMOVIDO em
   16/07/2026: virou a faixa .c2map com o mapa 3D interativo (css/mapa-brasil.css). */

/* ---- Global · COMO TRABALHAMOS (rev01, modelo do PDF) ---- */
.gcv-work{display:grid;grid-template-columns:0.82fr 1.18fr;gap:clamp(28px,4vw,54px);align-items:start;margin-top:10px}
@media(max-width:900px){.gcv-work{grid-template-columns:1fr;gap:30px}}
.gcv-warranty{display:flex;align-items:center;gap:16px;margin-top:28px;padding:18px 22px;background:rgba(0,113,227,.06);border:1px solid rgba(0,113,227,.18);border-radius:16px}
.gcv-warranty-n{font-family:'Montserrat',sans-serif;font-weight:800;font-size:32px;color:var(--azul);line-height:1;white-space:nowrap}
.gcv-warranty-tx{display:flex;flex-direction:column}
.gcv-warranty-tx b{font-family:'Montserrat',sans-serif;font-weight:700;color:var(--verde);text-transform:uppercase;letter-spacing:.6px;font-size:11.5px}
.gcv-warranty-tx span{font-size:13.5px;line-height:1.5;color:var(--muted);margin-top:3px}
.gcv-cycle{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:560px){.gcv-cycle{grid-template-columns:1fr}}
.gcv-cycle .gcv-step{margin:0}

/* ---- Global · Diagrama de soluções (rev01, corrigido pelo diagrama OFICIAL da revista técnica) ----
   Estrutura HUB: 4 cantos (água de chuva / esgoto doméstico / água potável / outros efluentes)
   conectam no núcleo "Soluções integradas"; o núcleo irradia pilares (cima) e resultados (baixo). */
.dgm3{--dg-agua:var(--azul);--dg-esg:#9C7B4A;max-width:880px;margin:34px auto 0;display:grid;grid-template-columns:1fr auto 1fr;gap:10px clamp(12px,2.4vw,26px);align-items:center}
.dgm3 .dg-io{background:#fff;border:1px solid var(--pale);border-radius:14px;padding:13px 16px;display:flex;align-items:center;gap:12px;box-shadow:0 8px 22px -16px rgba(11,61,44,.20)}
.dgm3 .dg-ic{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;font-size:16px;flex:none;background:rgba(11,61,44,.06);color:var(--verde)}
.dgm3 .agua{border-top:3px solid var(--dg-agua)}
.dgm3 .agua .dg-ic{background:rgba(0,113,227,.10);color:var(--dg-agua)}
.dgm3 .esg{border-top:3px solid var(--dg-esg)}
.dgm3 .esg .dg-ic{background:rgba(156,123,74,.14);color:var(--dg-esg)}
.dgm3 .dg-tx{display:flex;flex-direction:column;min-width:0}
.dgm3 .dg-tx strong{font-family:'Montserrat',sans-serif;font-weight:700;font-size:13.5px;color:var(--verde);line-height:1.2;text-transform:uppercase;letter-spacing:.4px}
.dgm3 .dg-tx span{font-size:11.5px;color:var(--muted);margin-top:2px;line-height:1.35}
.dgm3 .dg-attrs{display:flex;flex-direction:column;align-items:center;gap:7px}
.dgm3 .dg-attrs-row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.dgm3 .dg-chip{background:#fff;border:1px solid var(--pale);border-radius:12px;padding:9px 14px;display:flex;align-items:center;gap:9px;font-family:'Montserrat',sans-serif;font-weight:700;font-size:12px;letter-spacing:.5px;text-transform:uppercase;color:var(--verde);box-shadow:0 6px 18px -14px rgba(11,61,44,.22)}
.dgm3 .dg-chip i{color:var(--azul);font-size:13px}
.dgm3 .dg-varrow{color:var(--muted);opacity:.6;font-size:15px;line-height:1}
.dgm3 .dg-harrow{color:var(--muted);opacity:.6;font-size:17px;text-align:center}
.dgm3 .dg-core{justify-self:center;text-align:center;background:linear-gradient(145deg,var(--verde),#0a2e21);color:#fff;border-radius:50%;width:clamp(150px,18vw,185px);height:clamp(150px,18vw,185px);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px;box-shadow:0 20px 40px -20px rgba(11,61,44,.5)}
.dgm3 .dg-core strong{font-family:'Montserrat',sans-serif;font-weight:800;font-size:15px;letter-spacing:.4px;line-height:1.25;text-transform:uppercase}
.dgm3 .dg-core span{font-size:10.5px;opacity:.82;margin-top:5px;line-height:1.35}
.dgm3 .dg-lb{grid-column:1/4;text-align:center;font-family:'Montserrat',sans-serif;font-weight:800;font-size:10.5px;letter-spacing:1.4px;text-transform:uppercase;color:var(--verde);opacity:.5;margin-top:4px}

/* ==== DIAGRAMA DE SOLUÇÕES v4 (a-empresa) — fiel ao PDF (ap. TECNOLOGIAS p.20),
   conectores SVG animados via js/diagrama.js, foco por corrente no hover ==== */
.dgm4{--dg-agua:var(--azul);--dg-esg:#9C7B4A;position:relative;max-width:980px;margin:38px auto 0;
  display:grid;grid-template-columns:minmax(200px,1fr) minmax(230px,auto) minmax(200px,1fr);
  grid-template-areas:"in1 pil in2" ". core ." "out1 res out2";
  /* Henrique, 29/07/2026: "as setas estão coladas, dê mais altura". O vão entre a
     fileira de chips e a engrenagem era o mesmo das colunas — as curvas saíam e
     chegavam no mesmo fôlego, sem espaço para desenhar. Quase o dobro de vão
     VERTICAL; o horizontal fica como estava, senão o diagrama estoura a largura. */
  gap:clamp(58px,9vw,104px) clamp(16px,3vw,36px);align-items:center}
.dgm4 .in1{grid-area:in1;justify-self:start}
.dgm4 .in2{grid-area:in2;justify-self:end}
.dgm4 .out1{grid-area:out1;justify-self:start}
.dgm4 .out2{grid-area:out2;justify-self:end}
.dgm4 .pil{grid-area:pil}
.dgm4 .res{grid-area:res}
.dgm4 .dg4-core{grid-area:core;justify-self:center}
.dgm4-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.dg4-p{fill:none;stroke-width:2;opacity:.8;transition:opacity .35s var(--ease)}
.dg4-p.agua{stroke:var(--dg-agua)}
.dg4-p.esg{stroke:var(--dg-esg)}
.dg4-p.attr{stroke:var(--lima);stroke-dasharray:3 6;opacity:.65}
.dg4-p.agua,.dg4-p.esg{stroke-dasharray:7 7;animation:dg4flow 1.1s linear infinite}
@keyframes dg4flow{to{stroke-dashoffset:-14}}
.dg4-no{position:relative;z-index:1;background:#fff;border:1px solid var(--pale);border-radius:16px;
  padding:13px 16px 15px;max-width:290px;display:grid;grid-template-columns:auto 1fr;column-gap:12px;row-gap:8px;
  align-items:center;box-shadow:0 10px 26px -18px rgba(11,61,44,.25);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),opacity .35s var(--ease)}
.dg4-no:hover{transform:translateY(-3px);box-shadow:0 18px 36px -20px rgba(11,61,44,.35)}
.dg4-no.agua{border-top:3px solid var(--dg-agua)}
.dg4-no.esg{border-top:3px solid var(--dg-esg)}
.dg4-kicker{grid-column:1/3;font-family:'Montserrat',sans-serif;font-weight:800;font-size:10px;
  letter-spacing:1.6px;text-transform:uppercase;display:inline-flex;align-items:center;gap:6px;opacity:.85}
.dg4-no.agua .dg4-kicker{color:var(--dg-agua)}
.dg4-no.esg .dg4-kicker{color:var(--dg-esg)}
.dg4-ic{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;font-size:16px;flex:none}
.dg4-no.agua .dg4-ic{background:rgba(0,113,227,.10);color:var(--dg-agua)}
.dg4-no.esg .dg4-ic{background:rgba(156,123,74,.14);color:var(--dg-esg)}
.dg4-tx{display:flex;flex-direction:column;min-width:0}
.dg4-tx strong{font-family:'Montserrat',sans-serif;font-weight:700;font-size:13.5px;color:var(--verde);line-height:1.2;text-transform:uppercase;letter-spacing:.4px}
.dg4-tx span{font-size:11.5px;color:var(--muted);margin-top:2px;line-height:1.35}
.dg4-attrs{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:8px;transition:opacity .35s var(--ease)}
.dg4-alb{font-family:'Montserrat',sans-serif;font-weight:800;font-size:10.5px;letter-spacing:1.6px;text-transform:uppercase;color:var(--lima-ink);opacity:.75}
.dg4-arow{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.dg4-chip{background:#fff;border:1px solid var(--pale);border-radius:12px;padding:9px 14px;display:flex;align-items:center;gap:9px;
  font-family:'Montserrat',sans-serif;font-weight:700;font-size:12px;letter-spacing:.5px;text-transform:uppercase;color:var(--verde);
  box-shadow:0 6px 18px -14px rgba(11,61,44,.22)}
.dg4-chip i{color:var(--lima-ink);font-size:13px}
.dg4-core{position:relative;z-index:1;text-align:center;background:linear-gradient(145deg,var(--verde),#0a2e21);color:#fff;border-radius:50%;
  width:clamp(160px,19vw,196px);height:clamp(160px,19vw,196px);display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:16px;box-shadow:0 20px 40px -20px rgba(11,61,44,.5);transition:opacity .35s var(--ease)}
.dg4-core strong{font-family:'Montserrat',sans-serif;font-weight:800;font-size:15.5px;letter-spacing:.4px;line-height:1.25;text-transform:uppercase}
.dg4-core span{font-size:10.5px;opacity:.82;margin-top:5px;line-height:1.35}
.dg4-core-rings{position:absolute;inset:0;pointer-events:none}
.dg4-core-rings span{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(169,207,91,.55);opacity:0;animation:dg4pulse 3.4s var(--ease) infinite}
.dg4-core-rings span:nth-child(2){animation-delay:1.7s}
@keyframes dg4pulse{0%{transform:scale(1);opacity:.5}100%{transform:scale(1.4);opacity:0}}
/* --- DIAGRAMA v5: núcleo = engrenagem girando (Sérgio 20/07/2026) -------------
   O SVG gira; o disco verde e o texto ficam PARADOS por cima. Girar o texto junto
   deixaria o núcleo ilegível — e o que precisa dizer "mecanismo em operação" é a
   silhueta dos dentes, não o rótulo. */
.dg4-gear{position:absolute;left:50%;top:50%;width:132%;height:132%;
  transform:translate(-50%,-50%);pointer-events:none;z-index:-1}
.dg4-gear svg{width:100%;height:100%;display:block;transform-origin:50% 50%;
  animation:dg4gear 34s linear infinite}
.dg4-gear-dentes{fill:#0a2e21}
.dg4-gear-aro{fill:none;stroke:rgba(169,207,91,.34);stroke-width:1.1;stroke-dasharray:2.4 4.2}
@keyframes dg4gear{to{transform:rotate(360deg)}}
/* o disco verde precisa criar contexto de empilhamento pra ficar por cima do z-index:-1 */
.dg4-core{isolation:isolate}
/* No mobile o núcleo encolhe pro mínimo do clamp (160px), mas a engrenagem é 132%
   DELE — 211px, ou seja transborda 25.5px de cada lado. O layout empilhado usa
   gap 24px, então os dentes encostavam ~1.5px no card de cima. E como a engrenagem
   fica presa no stacking context do .dg4-core (isolation:isolate) e os chips vêm
   ANTES no DOM, ela passava por cima de fundo branco. Medido no Chrome a 555px:
   com gap 24 a engrenagem entrava 7px no bloco de baixo. Mais gap resolve e ainda
   dá o respiro que a coluna única precisava.
   Seletor com #id de propósito: a media query mobile do site (mais abaixo neste
   arquivo) também define `gap` em `.dgm4`, e media query NAO soma especificidade —
   uma regra `.dgm4` aqui perderia por ordem. `.dgm4#dgm4` ganha independente de onde
   cada uma esteja no arquivo, então isso não quebra se alguém reordenar o CSS. */
@media(max-width:760px){.dgm4#dgm4{gap:46px}}
@media(prefers-reduced-motion:reduce){.dg4-gear svg{animation:none}}
/* --- fim diagrama v5 --------------------------------------------------------- */
/* foco por corrente (hover): a corrente ativa acende, o resto esmaece */
.dgm4[data-foco="agua"] .dg4-no.esg,.dgm4[data-foco="agua"] .dg4-p.esg,
.dgm4[data-foco="esg"] .dg4-no.agua,.dgm4[data-foco="esg"] .dg4-p.agua{opacity:.28}
.dgm4[data-foco="agua"] .dg4-p.agua,.dgm4[data-foco="esg"] .dg4-p.esg,.dgm4[data-foco="all"] .dg4-p{opacity:1;stroke-width:3}
.dgm4-como{max-width:760px;margin:26px auto 0;text-align:center;font-size:13.5px;line-height:1.65;color:var(--muted)}
.dgm4-como i{color:var(--lima-ink);margin-right:6px}
.dgm4-como b{color:var(--verde)}
@media(max-width:760px){
  .dgm4{grid-template-columns:1fr;grid-template-areas:"in1" "in2" "pil" "core" "res" "out1" "out2";gap:24px;justify-items:center}
  .dgm4::before{content:'';position:absolute;left:50%;top:14px;bottom:14px;border-left:2px dashed rgba(11,61,44,.16);z-index:0}
  .dgm4-svg{display:none}
  .dgm4 .in1,.dgm4 .in2,.dgm4 .out1,.dgm4 .out2{justify-self:center;width:min(100%,340px);max-width:none}
}
@media(prefers-reduced-motion:reduce){
  .dg4-p.agua,.dg4-p.esg{animation:none}
  .dg4-core-rings span{animation:none}
  .dg4-no,.dg4-no:hover{transform:none}
}
@media(max-width:680px){
  .dgm3{grid-template-columns:1fr;justify-items:stretch}
  .dgm3 .dg-core{justify-self:center}
  .dgm3 .dg-harrow{transform:rotate(90deg)}
  .dgm3 .o1{order:1}.dgm3 .o2{order:2}.dgm3 .o3{order:3}.dgm3 .o4{order:4}.dgm3 .o5{order:5}.dgm3 .o6{order:6}.dgm3 .o7{order:7}.dgm3 .o8{order:8}.dgm3 .o9{order:9}
}
/* legado */
.dgm2{--dg-agua:var(--azul);--dg-esg:#9C7B4A;max-width:720px;margin:34px auto 0;display:grid;grid-template-columns:1fr 1fr;gap:12px clamp(24px,4vw,48px);position:relative}
.dgm2 .dg-io,.dgm2 .dg-mid{background:#fff;border:1px solid var(--pale);border-radius:14px;padding:13px 16px;display:flex;align-items:center;gap:12px;box-shadow:0 8px 22px -16px rgba(11,61,44,.20)}
.dgm2 .dg-ic{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;font-size:16px;flex:none;background:rgba(11,61,44,.06);color:var(--verde)}
.dgm2 .agua{border-top:3px solid var(--dg-agua)}
.dgm2 .agua .dg-ic{background:rgba(0,113,227,.10);color:var(--dg-agua)}
.dgm2 .esg{border-top:3px solid var(--dg-esg)}
.dgm2 .esg .dg-ic{background:rgba(156,123,74,.14);color:var(--dg-esg)}
.dgm2 .dg-tx{display:flex;flex-direction:column;min-width:0}
.dgm2 .dg-tx strong{font-family:'Montserrat',sans-serif;font-weight:700;font-size:14px;color:var(--verde);line-height:1.2}
.dgm2 .dg-tx span{font-size:11.5px;color:var(--muted);margin-top:2px;line-height:1.35}
.dgm2 .dg-band{grid-column:1/3;text-align:center;font-family:'Montserrat',sans-serif;font-weight:800;font-size:10.5px;letter-spacing:1.4px;text-transform:uppercase;color:var(--verde);opacity:.5;margin-top:6px}
.dgm2 .dg-band:first-child{margin-top:0}
.dgm2 .dg-core{grid-column:1/3;justify-self:center;text-align:center;background:linear-gradient(145deg,var(--verde),#0a2e21);color:#fff;border-radius:18px;padding:18px 32px;box-shadow:0 20px 40px -20px rgba(11,61,44,.5);margin:2px 0}
.dgm2 .dg-core strong{display:block;font-family:'Montserrat',sans-serif;font-weight:800;font-size:16px;letter-spacing:.3px}
.dgm2 .dg-core span{display:block;font-size:11.5px;opacity:.82;margin-top:3px}
.dgm2 .dg-conv{grid-column:1/3;text-align:center;color:var(--azul);font-size:16px;opacity:.55;line-height:.7}
@media(max-width:520px){.dgm2{grid-template-columns:1fr}.dgm2 .dg-core,.dgm2 .dg-band,.dgm2 .dg-conv{grid-column:1/2}}

/* ---- Global · banner slogan reforçado + movido p/ antes do processo (rev01) ---- */
.gcv-hero-band{position:relative;overflow:hidden;background:linear-gradient(135deg,#0a2e21,var(--verde) 55%,#06283F);padding:clamp(48px,7vw,84px) 0}
.gcv-hero-band .wrap{position:relative;z-index:2}
.gcv-hero-band-in{max-width:860px;margin:0 auto;text-align:center;color:#fff}
.gcv-hero-band-ic{width:64px;height:64px;border-radius:50%;display:inline-grid;place-items:center;font-size:26px;background:rgba(169,207,91,.16);color:var(--lima-soft);margin-bottom:22px}
.gcv-hero-band blockquote{font-family:'Montserrat',sans-serif;font-weight:800;font-size:clamp(28px,4.5vw,46px);line-height:1.1;letter-spacing:-.5px;margin:0}
.gcv-hero-band blockquote em{color:var(--lima-soft);font-style:italic}
.gcv-hero-band p{margin:18px auto 0;font-size:clamp(15px,1.6vw,18px);color:rgba(255,255,255,.82);max-width:620px}
/* ---- Global · CTA nova página de engenharia (rev01) ---- */
.eng-cta-wrap{text-align:center;padding:8px 0 clamp(28px,5vw,56px)}

/* ---- Global · FORMATOS = expanding panels (padrão da biblioteca: painéis dividem o espaço, hover expande) ---- */
/* flex:1 = os painéis absorvem a altura sobrando da coluna (senão a coluna estica e eles não, abrindo buraco).
   Empilhados: a coluna é retrato (~560x740), então bandas deitadas leem; fatias em pé viram sliver de 175px. */
.fmt-xp{display:flex;flex-direction:column;gap:12px;flex:1;min-height:540px}
.fmt-xp-panel{position:relative;flex:1;min-width:0;min-height:80px;border-radius:18px;overflow:hidden;cursor:pointer;transition:flex .55s var(--ease);outline:none;background:var(--verde)}
.fmt-xp-panel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .65s var(--ease)}
/* SCRIM em ::before, não ::after — e isto NÃO é preferência de estilo.
   O eco-ui (lightbox) marca a foto com .ecozoom-wrap e desenha o ícone de lupa em
   ::after. Mesma especificidade (classe + pseudo) e eco-ui.css é carregado DEPOIS
   do style.css ⇒ ele vencia e substituía o gradiente pelo SVG da lupa. Resultado:
   estes cards ficaram SEM scrim desde que o eco-ui entrou (20/07) — o texto branco
   caiu para 3,1:1 no card "Horizontais" (céu claro), abaixo do mínimo 4,5:1 do AA.
   ::before está livre e não colide com nada. */
.fmt-xp-panel::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,42,30,0) 30%,rgba(8,42,30,.42) 62%,rgba(8,42,30,.88) 100%)}
.fmt-xp-panel:hover,.fmt-xp-panel:focus-visible{flex:3}
.fmt-xp:not(:hover):not(:focus-within) .fmt-xp-panel:first-child{flex:3}
.fmt-xp-panel:hover img,.fmt-xp-panel:focus-visible img{transform:scale(1.05)}
.fmt-xp-num{position:absolute;top:14px;left:16px;z-index:2;font-family:'Montserrat',sans-serif;font-weight:800;font-size:13px;color:rgba(255,255,255,.9);background:rgba(8,42,30,.45);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);padding:5px 11px;border-radius:100px}
.fmt-xp-cap{position:absolute;left:16px;right:14px;bottom:14px;z-index:2;color:#fff}
.fmt-xp-label{font-family:'Montserrat',sans-serif;font-weight:800;font-size:17px;letter-spacing:.3px;white-space:nowrap}
.fmt-xp-cap p{font-size:13px;line-height:1.5;color:rgba(255,255,255,.86);margin-top:6px;max-width:52ch;opacity:0;transform:translateY(6px);transition:opacity .4s .12s,transform .4s .12s}
.fmt-xp-panel:hover .fmt-xp-cap p,.fmt-xp-panel:focus-visible .fmt-xp-cap p{opacity:1;transform:none}
.fmt-xp:not(:hover):not(:focus-within) .fmt-xp-panel:first-child .fmt-xp-cap p{opacity:1;transform:none}
@media(max-width:760px){
  .fmt-xp{min-height:640px}   /* já é column; aqui só ganha respiro no 1 coluna */
  .fmt-xp-panel{min-height:72px}
}

/* ---- Global · renders técnicos do trem (rev01: imagens da apresentação TECNOLOGIAS) ---- */
.tec-real{margin:22px 0 0}
.tec-real img{display:block;width:100%;height:auto;border-radius:14px;box-shadow:0 16px 36px -22px rgba(11,61,44,.35)}
.tec-real figcaption{margin-top:9px;font-size:12.5px;color:var(--muted)}
.tec-real figcaption b{font-family:'Montserrat',sans-serif;font-weight:700;color:var(--verde);letter-spacing:.4px}

/* =================== STEPS (como funciona) =================== */
.steps{display:flex;flex-wrap:wrap;gap:26px;counter-reset:step}
.step{flex:1 1 21%;min-width:210px;position:relative;padding:14px 6px 0}
.step .num{font-family:'Montserrat',sans-serif;font-weight:800;font-size:64px;color:rgba(11,61,44,.08);line-height:1}
.step h4{font-family:'Montserrat',sans-serif;font-weight:700;font-size:17px;color:var(--verde);margin:6px 0 0;position:relative}
.step h4::before{content:"";position:absolute;left:0;top:-12px;width:30px;height:3px;background:var(--azul);border-radius:3px}
.step.esg h4::before{background:var(--lima)}
.step p{font-size:14px;line-height:1.6;color:var(--muted);margin-top:10px}
/* ciclo do passo a passo (js/stepper.js r2): o passo "da vez" acende em sequência */
.step .num{transition:color .5s var(--ease)}
.step h4::before{transition:width .5s var(--ease),background .5s var(--ease)}
.step{transition:transform .5s var(--ease)}
.step.on{transform:translateY(-4px)}
.step.on .num{color:rgba(0,113,227,.28)}
.step.on h4::before{width:56px}
.step.esg.on .num{color:rgba(114,159,40,.35)}
@media(prefers-reduced-motion:reduce){.step,.step .num,.step h4::before{transition:none}.step.on{transform:none}}
@media(max-width:900px){.step{flex:1 1 45%}}@media(max-width:560px){.step{flex:1 1 100%}}

/* =================== FRASE-GUIA =================== */
.frase{position:relative;background:var(--deep);padding:clamp(80px,10vw,118px) 24px;text-align:center;overflow:hidden}
.frase .filete{width:48px;height:3px;background:var(--lima);border-radius:3px;margin:0 auto 22px}
.frase blockquote{font-family:'Montserrat',sans-serif;font-weight:600;font-size:clamp(28px,4vw,46px);line-height:1.25;color:var(--paper);max-width:860px;margin:0 auto;position:relative;z-index:3;letter-spacing:-.5px}
.frase blockquote em{color:var(--lima-soft)}
.frase .sign{font-size:14px;color:rgba(251,253,251,.6);margin-top:22px;position:relative;z-index:3}

/* =================== CONTATO =================== */
.contato{position:relative;background:radial-gradient(110% 90% at 50% 0%,#11553C,var(--verde) 55%,var(--deep));padding:clamp(56px,6vw,84px) 24px;text-align:center;overflow:hidden}
.contato h2{font-family:'Montserrat',sans-serif;font-weight:800;font-size:clamp(28px,4.4vw,48px);color:#fff;line-height:1.1;max-width:780px;margin:16px auto 0;position:relative;z-index:3}
.contato h2 em{color:var(--lima-soft)}
.contato .sub{color:rgba(255,255,255,.82);max-width:540px;margin:18px auto 0;position:relative;z-index:3;font-weight:300}
.contato .cta{margin-top:32px;position:relative;z-index:3}

/* =================== QUEM CONFIA =================== */
.confia{background:var(--paper);padding:clamp(64px,7vw,90px) 0;text-align:center}
.logos{display:flex;justify-content:center;gap:54px;flex-wrap:wrap;margin-top:36px;align-items:center}
.logos .lg{width:120px;height:48px;border-radius:8px;background:#E7EEE8;display:grid;place-items:center;color:#9fb4a6;font-family:'Montserrat',sans-serif;font-weight:700;font-size:14px;filter:grayscale(1);opacity:.7;transition:all .3s var(--ease)}
.logos .lg:hover{filter:none;opacity:1;transform:translateY(-4px);background:#dfeae1;color:var(--verde)}

/* =================== BLOG =================== */
.blog{background:var(--pale);padding:clamp(80px,9vw,118px) 0 clamp(90px,10vw,130px);position:relative}
.posts{display:flex;gap:24px;flex-wrap:wrap}
.post{flex:1 1 22%;min-width:240px;background:var(--paper);border:1px solid #dfeae1;border-radius:16px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 8px 24px -16px rgba(11,61,44,.16);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.post:hover{transform:translateY(-6px);box-shadow:0 26px 48px -24px rgba(11,61,44,.3)}
.post .cover{aspect-ratio:16/10;overflow:hidden;position:relative;background:#0f4c37}
.post .cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.post:hover .cover img{transform:scale(1.05)}
.post .cover .badge-cat{position:absolute;top:12px;left:12px;z-index:2;font-size:10.5px;font-weight:600;letter-spacing:.5px;color:#fff;background:rgba(8,42,30,.55);padding:4px 10px;border-radius:50px;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}
.post .body{padding:20px;position:relative;flex:1;display:flex;flex-direction:column}
.post .body::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--lima);transition:height .3s var(--ease)}
.post:hover .body::before{height:5px}
.post .cat{font-family:'Montserrat',sans-serif;font-weight:600;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--lima-ink)}
.post h4{font-family:'Montserrat',sans-serif;font-weight:600;font-size:16px;line-height:1.35;color:var(--verde);margin:8px 0 0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.post .date{font-size:12.5px;color:#8aa092;margin:10px 0 14px}
.post .more{margin-top:auto;font-family:'Montserrat',sans-serif;font-weight:600;font-size:13px;color:var(--azul);display:inline-flex;align-items:center;gap:7px;transition:gap .3s var(--ease)}
.post:hover .more{gap:12px}
.blog .actions{display:flex;flex-direction:column;align-items:center;gap:16px;margin-top:48px}
.ghost-btn{font-family:'Montserrat',sans-serif;font-weight:600;font-size:14px;color:var(--verde);border:1px solid var(--verde);background:transparent;padding:12px 30px;border-radius:100px;transition:all .3s var(--ease);cursor:pointer}
.ghost-btn:hover{background:rgba(11,61,44,.06)}
.prim-btn{font-family:'Montserrat',sans-serif;font-weight:700;font-size:14px;color:#fff;background:var(--verde);border:1px solid var(--verde);padding:14px 34px;border-radius:100px;box-shadow:0 14px 30px -14px rgba(11,61,44,.5);transition:all .3s var(--ease);cursor:pointer}
.prim-btn:hover{background:var(--lima);border-color:var(--lima);color:#08301F;transform:translateY(-2px)}
.blog.list .posts{gap:28px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start}
.blog.list .post{flex:none;min-width:0}
@media(max-width:920px){.blog.list .posts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.blog.list .posts{grid-template-columns:1fr}}
@media(max-width:980px){.post{flex:1 1 44%}}@media(max-width:560px){.post{flex:1 1 100%}}

/* =================== REVENDAS GRID =================== */
.revendas-grid{display:flex;flex-wrap:wrap;gap:22px}
.rev-card{flex:1 1 340px;background:#fff;border:1px solid var(--pale);border-radius:16px;padding:26px;box-shadow:0 8px 24px -16px rgba(11,61,44,.16);transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s}
.rev-card:hover{transform:translateY(-5px);box-shadow:0 22px 44px -22px rgba(11,61,44,.28);border-color:rgba(114,159,40,.4)}
.rev-card .city{display:inline-block;font-family:'Montserrat',sans-serif;font-weight:600;font-size:11px;letter-spacing:.6px;text-transform:uppercase;color:var(--lima-ink);background:rgba(114,159,40,.1);padding:4px 12px;border-radius:50px}
.rev-card h4{font-family:'Montserrat',sans-serif;font-weight:700;font-size:18px;color:var(--verde);margin:12px 0 10px}
.rev-card .line{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--muted);margin-top:6px}
.rev-card .line i{color:var(--lima-ink);width:16px}
@media(max-width:980px){.rev-card{flex:1 1 45%}}@media(max-width:560px){.rev-card{flex:1 1 100%}}

/* =================== FOOTER =================== */
/* ===================== PARCEIROS — OCULTOS TEMPORARIAMENTE ==================
   28/07/2026. Henrique, por WhatsApp: "pode deixar ela oculta por enquanto,
   vamos rever os contratos primeiro". Sai de cena a página de parceiros e TODO
   widget que exponha a rede: item no menu (topo e gaveta), item no rodapé, o
   painel do mapa na home, o canal "Parceiros pelo Brasil" no contato e o mapa
   do global.html.

   ⚠ O mapa do global.html entra nesta lista e a nota de 27/07 dizia o contrário
   ("o mapa FICA — é a atuação nacional do grupo, não a rede de revendas").
   Estava errado: aquele host não traz <script class="eco-map3d-data">, e o
   eco-map3d.js faz `var PINS = REVENDAS` por padrão — ou seja, os pinos ali são
   as 6 cidades dos parceiros com outra legenda. Os mapas de engenharia.html e
   projetos-pequenos.html trazem pontos próprios e por isso CONTINUAM no ar.

   UMA CHAVE SÓ, de propósito: espalhar `style="display:none"` por 6 arquivos faz
   alguém esquecer um pedaço na hora de reverter.
   PARA REVERTER: apagar esta regra e renomear _revendas.html -> revendas.html.
   Nada foi deletado. */
.parceiros-oculto{display:none!important}

.eco-footer{position:relative;background:linear-gradient(180deg,var(--verde) 0%,var(--deep) 100%);color:#fff;padding:70px 0 0;overflow:hidden}
.eco-footer .cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;gap:40px;position:relative;z-index:2}
.eco-footer .logo-f img{height:40px;width:auto;margin-bottom:16px}
/* board final: logo do rodapé COLORIDA (em selo claro p/ legibilidade no fundo escuro) por
   padrão; no hover o selo some e vira a logo BRANCA limpa sobre o verde (crossfade). */
/* Logo colorida DIRETO no navy (Sérgio 17/07): caiu o "pill" branco.
   DUAS camadas independentes:
   1) SOMBRA (elevação Material) na PRÓPRIA logo — contato curto + ambiente difuso;
   2) VINHETA (r27) — pool radial escuro ATRÁS, num WRAPPER separado (nunca no mesmo
      elemento da drop-shadow, senão a sombra sairia retangular pelo box do gradiente).
      Escurece o fundo num raio e devolve contraste ao wordmark escuro (Global) SEM halo
      branco (adesivo) nem pill (box duro): o radial vai a transparent, não tem borda.
   `.logo-f-swap` = wrapper da ECOCASA (já existia); `.logo-f-vign` = wrapper da Global. */
.eco-footer .logo-f-swap{display:inline-block;margin-bottom:16px}
/* 22/07/2026 — MORREU a vinheta escura dos dois rodapés (Sérgio: "preto de fundo
   ridículo e amador"). Ela existia desde 17/07 porque o wordmark das logos
   COLORIDAS é PRETO e sumia no verde do rodapé; a "solução" era um retângulo
   radial rgba(2,12,8,.74) atrás — que na tela virava uma caixa preta.
   Correção de raiz: no fundo escuro usa-se a logo BRANCA (existe para os dois:
   img/logo-white.png e img/logo-global-white.png). Aí não precisa de caixa
   nenhuma. Verificado compondo as 4 variantes sobre o verde #0B3D2C: a colorida
   é ilegível — MAS inverter o swap (branca por padrão) atropelava um pedido do
   CLIENTE: o Henrique pediu COLORIDA por padrão, virando BRANCA no hover (board
   14/07). Então a ordem do swap fica como ele pediu, e o que muda é a ARTE: a
   "colorida" do rodapé é uma variante para FUNDO ESCURO
   (img/marcas/footer/*-color-dark.png), onde só o que era escuro demais foi
   clareado mantendo o matiz — o "G" da Global e o globo da ECOCASA continuam
   coloridos, e o wordmark preto virou branco. Assim atende o pedido, é legível
   e não precisa de caixa nenhuma atrás. */
.eco-footer .logo-f-vign{display:inline-block;margin-bottom:16px}
.eco-footer .logo-f-swap .lf-stack{position:relative;display:block;height:48px}
.eco-footer .logo-f-swap img{height:48px;width:auto;margin:0;display:block;transition:opacity .32s var(--ease)}
.eco-footer .logo-f-swap .lf-white{position:absolute;left:0;top:0;opacity:0}
/* sombra suave só p/ descolar do fundo — sem caixa */
.eco-footer .logo-f-swap img,.eco-footer .logo-f-relief{filter:drop-shadow(0 2px 6px rgba(0,0,0,.28))}
.eco-footer .logo-f-swap:hover .lf-color,.eco-footer .logo-f-swap:focus-visible .lf-color{opacity:0}
.eco-footer .logo-f-swap:hover .lf-white,.eco-footer .logo-f-swap:focus-visible .lf-white{opacity:1}
/* o rodapé da Global usa a mesma mecânica, só um pouco maior */
.eco-footer .logo-f-swap.glb .lf-stack,.eco-footer .logo-f-swap.glb img{height:58px}
.eco-footer .tag{font-weight:300;font-size:14px;color:rgba(255,255,255,.7);line-height:1.7;max-width:260px}
.eco-footer .social{display:flex;gap:12px;margin-top:18px}
.eco-footer .social a{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.08);display:grid;place-items:center;color:#fff;transition:all .3s var(--ease)}
.eco-footer .social a:hover{background:var(--lima-soft);color:#08301F;transform:translateY(-3px)}
.eco-footer h5{font-family:'Montserrat',sans-serif;font-weight:700;font-size:13px;letter-spacing:1px;text-transform:uppercase;color:var(--lima-soft);margin-bottom:16px}
.eco-footer ul{list-style:none}
.eco-footer ul li{margin-bottom:10px}
.eco-footer ul li a{font-size:14px;color:rgba(255,255,255,.78);transition:color .25s,padding .25s;display:inline-flex;align-items:center;gap:8px}
.eco-footer ul li a:hover{color:#fff;padding-left:3px}
.eco-footer ul li a .dot{width:6px;height:6px;border-radius:50%;flex:none}
.eco-footer .contact-line{font-size:14px;color:rgba(255,255,255,.78);line-height:1.7;margin-bottom:10px;display:flex;gap:9px;align-items:flex-start}
.eco-footer .contact-line i{color:var(--lima-soft);margin-top:4px}
.eco-footer .foot-orc{display:inline-flex;align-items:center;gap:8px;margin-top:8px;background:var(--azul);color:#fff;font-family:'Montserrat',sans-serif;font-weight:600;font-size:13px;padding:11px 22px;border-radius:100px;transition:transform .3s var(--ease)}
.eco-footer .foot-orc:hover{transform:translateY(-2px)}
.eco-footer .bar{margin-top:54px;border-top:1px solid rgba(255,255,255,.1);padding:22px 0;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:13px;color:rgba(255,255,255,.6);position:relative;z-index:2}
.eco-footer .bar a{color:var(--lima-soft)}
@media(max-width:860px){.eco-footer .cols{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.eco-footer .cols{grid-template-columns:1fr}}

/* mobile drawer */
/* ═══ MENU MOBILE ═══════════════════════════════════════════════════════════
   Reescrito em 27/07/2026. O anterior era `justify-content:center` + `gap`
   com 19 itens: o conteúdo (903px) não cabia na tela (664px) e, por estar
   CENTRADO, sobrava metade para cima e metade para baixo — cortando 8 itens,
   entre eles Home, Blog e Contato. Sem overflow-y, não havia como rolar até
   eles: o menu escondia as páginas mais importantes do site.
   Agora: coluna que começa no topo, lista que rola, hierarquia por indentação
   (não por "↳"), e alvos de toque de 52px. */
.eco-drawer{position:fixed;inset:0;z-index:80;background:rgba(8,42,30,.98);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  display:flex;flex-direction:column;opacity:0;visibility:hidden;
  overscroll-behavior:contain;                      /* não arrasta a página atrás */
  transition:opacity .3s var(--ease),visibility .3s}
.eco-drawer.open{opacity:1;visibility:visible}

/* topo fixo: só o botão fechar, sempre alcançável com o polegar */
.dw-topo{flex:0 0 auto;display:flex;align-items:center;justify-content:flex-end;
  padding:calc(env(safe-area-inset-top,0px) + 10px) 14px 6px;
  border-bottom:1px solid rgba(255,255,255,.08)}
.eco-drawer .close{position:static;display:flex;align-items:center;justify-content:center;
  width:48px;height:48px;font-size:30px;line-height:1;color:#fff;background:none;border:none;cursor:pointer}

/* a lista rola — é o que faltava */
.dw-nav{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:8px 20px calc(env(safe-area-inset-bottom,0px) + 32px);
  display:flex;flex-direction:column}

.dw-item{display:flex;align-items:center;min-height:52px;padding:8px 2px;
  font-family:'Montserrat',sans-serif;font-weight:600;font-size:17px;letter-spacing:.1px;
  color:#fff;text-align:left;border-bottom:1px solid rgba(255,255,255,.07)}
.dw-item:active{background:rgba(255,255,255,.06)}

/* rótulo do grupo: hierarquia sem depender de setinha */
.dw-titulo{display:block;margin:22px 0 2px;font-family:'Montserrat',sans-serif;
  font-weight:800;font-size:11.5px;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--lima-soft,#A9CF5B);opacity:.9}

/* filho: indentação real + fio lima. Substitui o "↳" que virava ruído em 12 linhas */
.dw-sub{font-size:15.5px;font-weight:500;color:rgba(255,255,255,.88);
  min-height:48px;margin-left:3px;padding-left:16px;border-bottom:0;
  border-left:2px solid rgba(169,207,91,.28)}
.dw-sub:first-of-type{padding-top:4px}

/* link que sai do site: seta discreta, sem poluir o texto */
.dw-ext::after{content:'↗';margin-left:7px;font-size:12px;opacity:.55;font-weight:600}
.dw-item.ativo{color:var(--lima-soft,#A9CF5B)}
.eco-nav a.ativo{color:var(--azul)}  /* desktop: mantem o azul de antes */

/* Henrique 31/07/2026: "quando eu desco a pagina a selecao do menu some, tem como manter?"
   Nao era o .ativo caindo — era ESPECIFICIDADE. Ao rolar, o header ganha .is-dark, e a
   regra da linha 57 (.eco-hdr.is-dark .eco-nav>a, peso 0-3-1) vence a do .ativo acima
   (peso 0-2-1): o item selecionado voltava ao branco dos demais. Aqui damos ao ativo um
   seletor MAIS especifico (0-4-1) dentro do header escuro. A cor e o lima-soft, o mesmo
   destaque que o hover ja usa no header escuro (linha 61) — o azul nao tem contraste
   suficiente sobre o verde translucido do .is-dark.
   O sublinhado ::after fica sempre visivel no ativo (fora do ativo ele so aparece no hover),
   pra selecao sobreviver tambem a quem enxerga mal a diferenca de cor. */
.eco-hdr.is-dark .eco-nav>a.ativo{color:var(--lima-soft)}
.eco-nav>a.ativo::after{width:100%}   /* o sublinhado anima por WIDTH (linha 58), nao por scaleX */

/* "em breve": era <a href="#"> e parecia link quebrado ao ser tocado.
   Virou <span> — sem destino falso, e legível como o que é. */
.dw-breve{color:rgba(255,255,255,.5);cursor:default}
.dw-breve em{font-style:normal;font-size:11px;font-weight:700;letter-spacing:.8px;
  text-transform:uppercase;margin-left:8px;padding:3px 8px;border-radius:999px;
  background:rgba(255,255,255,.09);color:rgba(255,255,255,.62)}

/* o menu ocupa a tela toda: sem isto a página continua rolando por trás dele */
body.dw-aberto{overflow:hidden}


/* ===== S14 - COMPARATIVO SATE (.cmp) ===== */
/* =================== COMPARATIVO "POR QUE A SATE?" (cmp — sate.html) ===================
   Síntese das 2 variantes: estrutura por-linha (robusta/acessível) + coluna SATE
   elevada com TRACK contínuo (sem costura entre células). Acento esgoto = lima.
   Mobile = um card por critério (SATE primeiro/realçada). Sem overflow-x. */
.cmp{--cmp-rail:clamp(168px,22vw,260px);--cmp-line:rgba(11,61,44,.08);
  --cmp-par:#9A6A1C;--cmp-par-bg:rgba(241,210,169,.40);
  --cmp-neg:#A04834;--cmp-neg-bg:rgba(160,72,52,.12);
  --cmp-nd:var(--muted);--cmp-nd-bg:rgba(91,107,97,.14)}
.cmp .head{max-width:760px}

/* legenda de status */
.cmp-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 18px;margin:0 auto 30px;max-width:760px}
.cmp-lg{display:inline-flex;align-items:center;gap:8px;font-family:'Montserrat',sans-serif;font-weight:600;font-size:12px;letter-spacing:.3px;color:var(--muted)}
.cmp-lg i{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:10px;flex:none}
.cmp-lg.ok i{background:rgba(114,159,40,.16);color:var(--lima-ink)}
.cmp-lg.part i{background:var(--cmp-par-bg);color:var(--cmp-par)}
.cmp-lg.no i{background:var(--cmp-neg-bg);color:var(--cmp-neg)}
.cmp-lg.na i{background:var(--cmp-nd-bg);color:var(--cmp-nd)}

/* board: contexto p/ a coluna SATE elevar-se em profundidade */
.cmp-board{position:relative;margin-top:8px}

/* grid de 4 trilhas (critério + 3 soluções) — colunas fluidas, sem px fixo que estoure */
.cmp-grid{display:grid;grid-template-columns:var(--cmp-rail) repeat(3,minmax(0,1fr));gap:0;align-items:stretch}

/* ---- cabeçalho de colunas ---- */
.cmp-thead{margin-bottom:0}
.cmp-rail-h{display:flex;align-items:flex-end;padding:0 18px 16px 4px;font-family:'Montserrat',sans-serif;font-weight:700;font-size:12px;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted)}
.cmp-col{min-width:0;padding:22px 16px 18px;text-align:center;border-radius:16px 16px 0 0;background:#fff;border:1px solid var(--cmp-line);border-bottom:none}
.cmp-col .cmp-sol{font-family:'Montserrat',sans-serif;font-weight:800;font-size:clamp(16px,1.7vw,20px);color:var(--verde);line-height:1.1;letter-spacing:-.4px}
.cmp-col .cmp-solsub{font-size:11.5px;letter-spacing:.3px;color:var(--muted);margin-top:5px;line-height:1.3}
.cmp-tag{display:inline-block;font-family:'Montserrat',sans-serif;font-weight:700;font-size:10px;letter-spacing:1.2px;text-transform:uppercase;color:#08301F;background:var(--lima-soft);padding:4px 12px;border-radius:50px;margin-bottom:10px}

/* coluna SATE em destaque: header elevado, faixa lima no topo, sombra de profundidade */
.cmp-col-sate{position:relative;background:linear-gradient(180deg,#fff,#FAFCF3);border-color:rgba(114,159,40,.42);
  box-shadow:0 -3px 0 0 var(--lima) inset,0 26px 50px -28px rgba(11,61,44,.4);transform:translateY(-16px);z-index:3;padding-top:30px}
.cmp-col-sate .cmp-sol{color:var(--lima-ink);font-size:clamp(20px,2vw,24px)}

/* ---- linhas ---- */
.cmp-rows{position:relative}
.cmp-row{border-bottom:1px solid var(--cmp-line)}
.cmp-row:last-child{border-bottom:none}
.cmp-rail{display:flex;align-items:center;min-height:62px;padding:14px 18px 14px 4px;
  font-family:'Montserrat',sans-serif;font-weight:600;font-size:14px;line-height:1.3;color:var(--verde)}
.cmp-cell{min-width:0;display:flex;align-items:center;gap:12px;min-height:62px;padding:14px 16px;
  background:#fff;border-left:1px solid var(--cmp-line)}
.cmp-cell:nth-child(2){border-left:none}
.cmp-lbl{display:none}

/* coluna SATE: TRACK contínuo elevado (uma peça só, sem costura entre células) */
.cmp-cell.cmp-sate{position:relative;background:linear-gradient(180deg,rgba(114,159,40,.06),rgba(114,159,40,.08));
  border-left:1px solid rgba(114,159,40,.30);z-index:2}
.cmp-cell.cmp-sate::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--lima)}
/* topo e base do track recebem o arredondamento + sombra (não cada célula) */
.cmp-rows .cmp-row:first-child .cmp-cell.cmp-sate{box-shadow:-2px -2px 30px -16px rgba(11,61,44,.32)}
.cmp-rows .cmp-row:last-child .cmp-cell.cmp-sate{border-radius:0 0 16px 16px;box-shadow:0 30px 48px -30px rgba(11,61,44,.45)}

/* badges de status */
.cmp-badge{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:12px}
.cmp-badge.ok{background:rgba(114,159,40,.16);color:var(--lima-ink)}
.cmp-badge.part{background:var(--cmp-par-bg);color:var(--cmp-par)}
.cmp-badge.no{background:var(--cmp-neg-bg);color:var(--cmp-neg)}
.cmp-badge.na{background:var(--cmp-nd-bg);color:var(--cmp-nd)}
.cmp-cell.cmp-sate .cmp-badge.ok{background:var(--lima);color:#08301F}
.cmp-val{min-width:0;font-size:13.5px;line-height:1.4;color:var(--muted)}
.cmp-cell.cmp-sate .cmp-val{color:var(--verde);font-weight:500}

/* nota + cta */
.cmp-note{display:flex;align-items:flex-start;gap:9px;max-width:760px;margin:26px auto 0;font-size:13px;line-height:1.6;color:var(--muted)}
.cmp-note i{color:var(--lima-ink);margin-top:3px;flex:none}
.cmp-cta{display:flex;justify-content:center;margin-top:34px}

/* ============ MOBILE: cards por critério (SATE primeiro/realçada) ============ */
@media(max-width:880px){
  .cmp-board{display:flex;flex-direction:column;gap:16px;margin-top:4px}
  .cmp-thead{display:none}
  .cmp-rows{display:flex;flex-direction:column;gap:16px}
  .cmp-row{display:block;border:1px solid var(--cmp-line);border-radius:16px;background:#fff;
    padding:16px 16px 6px;box-shadow:0 8px 24px -16px rgba(11,61,44,.16)}
  .cmp-grid{display:block}
  .cmp-rail{display:block;min-height:0;padding:0 0 12px;font-size:15px;font-weight:700;color:var(--verde);
    border-bottom:1px solid var(--cmp-line);margin-bottom:8px}
  .cmp-cell{min-height:0;padding:11px 0;border-left:none;background:transparent;transform:none!important;
    box-shadow:none!important;border-bottom:1px solid var(--cmp-line)}
  .cmp-cell:last-child{border-bottom:none}
  .cmp-cell::before{display:none!important}
  .cmp-cell.cmp-sate{background:rgba(114,159,40,.07);border-radius:12px;padding:11px 13px;border-bottom:none;
    box-shadow:inset 3px 0 0 var(--lima)!important;margin-bottom:6px}
  .cmp-lbl{display:inline-block;flex:none;font-family:'Montserrat',sans-serif;font-weight:700;font-size:11px;
    letter-spacing:.5px;text-transform:uppercase;color:var(--muted);width:96px}
  .cmp-cell.cmp-sate .cmp-lbl{color:var(--lima-ink)}
  .cmp-val{font-size:14px}
}
@media(max-width:420px){
  .cmp-cell{align-items:flex-start;flex-wrap:wrap}
  .cmp-lbl{display:block;width:auto;margin-bottom:6px}
  .cmp-val{flex:1 1 0;min-width:0}
}

/* ===== S14 - DIAGRAMA DE SOLUCOES (.dgm) ===== */
/* =================== DIAGRAMA DE SOLUÇÕES (ciclo integrado) — .dgm ===================
   Síntese final: cascata vertical em torno de uma ESPINHA azul→lima (mapeia as 2 correntes),
   tiers com ritmo (nós largos → pílulas → núcleo circular → pílulas → nós), conector "+" nos
   pares de entrada/saída, núcleo verde com ondas concêntricas (reusa ecoPulse aprovado).
   Acento misto: água=azul · esgoto=areia · pilares/ROI=lima · núcleo=verde · outros efluentes=cinza. */
.dgm{position:relative;overflow:hidden;background:linear-gradient(180deg,#F4F8F4,var(--paper))}
.dgm-rings span{border-color:var(--lima-soft);top:60%}
.dgm-rings span:nth-child(1){width:540px;height:540px;opacity:.09}
.dgm-rings span:nth-child(2){width:1000px;height:1000px;opacity:.05}

/* ESPECIALIDADES — 2 cartões assimétricos (residuais ligeiramente mais largo) */
.dgm-spec{display:flex;flex-wrap:wrap;gap:22px;margin:0 auto 56px;max-width:1000px}
.dgm-spec-card{flex:1 1 0;min-width:0;display:flex;gap:18px;background:#fff;border:1px solid var(--pale);border-radius:18px;padding:26px 24px;box-shadow:0 10px 30px -20px rgba(11,61,44,.2);position:relative;overflow:hidden}
.dgm-spec-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px}
.dgm-spec-card.esg{flex:1.16 1 0}
.dgm-spec-card.agua::before{background:var(--azul)}
.dgm-spec-card.esg::before{background:var(--lima)}
.dgm-spec-ic{width:50px;height:50px;flex:none;border-radius:14px;display:grid;place-items:center;font-size:21px}
.dgm-spec-card.agua .dgm-spec-ic{background:rgba(0,113,227,.10);color:var(--azul)}
.dgm-spec-card.esg .dgm-spec-ic{background:rgba(114,159,40,.12);color:var(--lima-ink)}
.dgm-spec-card h3{font-family:'Montserrat',sans-serif;font-weight:700;font-size:18px;color:var(--verde)}
.dgm-spec-card p{font-size:13.5px;line-height:1.6;color:var(--muted);margin-top:8px}
.dgm-spec-card p + p{margin-top:8px}
.dgm-spec-card p b{color:var(--verde);font-weight:600}

/* FLUXO / cascata */
.dgm-flow{position:relative;max-width:760px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:8px;z-index:1}
.dgm-spine{position:absolute;top:38px;bottom:38px;left:50%;width:2px;transform:translateX(-50%);border-radius:2px;z-index:0;
  background:linear-gradient(180deg,var(--azul) 0%,rgba(114,159,40,.6) 50%,var(--lima) 100%);opacity:.22}

.dgm-tier{position:relative;z-index:1;width:100%;text-align:center}
.dgm-tier-tag{display:inline-block;font-family:'Montserrat',sans-serif;font-weight:700;font-size:10.5px;letter-spacing:2.2px;text-transform:uppercase;color:var(--lima-ink);background:rgba(114,159,40,.10);padding:5px 14px;border-radius:50px;margin-bottom:14px}
.dgm-row{display:flex;align-items:stretch;justify-content:center;gap:16px;flex-wrap:nowrap;width:100%}

/* NÓS (entradas/saídas) — caixas com profundidade */
.dgm-node{flex:1 1 0;min-width:0;display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--pale);border-radius:16px;padding:18px 18px;border-left-width:4px;box-shadow:0 14px 36px -22px rgba(11,61,44,.32);transition:transform .32s var(--ease),box-shadow .32s var(--ease)}
.dgm-node:hover{transform:translateY(-4px);box-shadow:0 24px 48px -24px rgba(11,61,44,.4)}
.dgm-node-ic{width:48px;height:48px;flex:none;border-radius:12px;display:grid;place-items:center;font-size:20px}
.dgm-node-tx{display:flex;flex-direction:column;gap:2px;min-width:0;text-align:left}
.dgm-node-tx strong{font-family:'Montserrat',sans-serif;font-weight:700;font-size:15.5px;color:var(--verde);line-height:1.2}
.dgm-node-tx span{font-size:12px;color:var(--muted);line-height:1.35}
/* água = azul */
.dgm-node.agua{border-left-color:var(--azul)}
.dgm-node.agua .dgm-node-ic{background:rgba(0,113,227,.10);color:var(--azul)}
/* esgoto (entrada) = areia/marrom */
.dgm-node.areia{border-left-color:var(--areia)}
.dgm-node.areia .dgm-node-ic{background:rgba(241,210,169,.36);color:var(--lima-ink)}
/* outros efluentes = cinza/neutro */
.dgm-node.neutral{border-left-color:#9fb4a6}
.dgm-node.neutral .dgm-node-ic{background:rgba(91,107,97,.12);color:var(--muted)}
/* saídas (sólido) */
.dgm-node.solid.agua .dgm-node-ic{background:var(--azul);color:#fff}
.dgm-node.solid.neutral .dgm-node-ic{background:#6B7A72;color:#fff}

/* conector "+" entre os pares */
.dgm-plus{flex:none;align-self:center;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:#fff;border:1px solid var(--pale);color:var(--verde);font-size:11px;box-shadow:0 6px 16px -10px rgba(11,61,44,.3)}

/* PÍLULAS (pilares/resultados) — chips elevados, ritmo distinto dos nós */
.dgm-pill{flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:center;gap:12px;background:#fff;border:1px solid var(--pale);border-radius:100px;padding:14px 22px;box-shadow:0 10px 26px -18px rgba(11,61,44,.26);transition:transform .32s var(--ease),box-shadow .32s var(--ease)}
.dgm-pill:hover{transform:translateY(-3px);box-shadow:0 20px 40px -20px rgba(11,61,44,.32)}
.dgm-pill-ic{width:36px;height:36px;flex:none;border-radius:50%;display:grid;place-items:center;font-size:15px}
.dgm-pill-ic.agua{background:rgba(0,113,227,.10);color:var(--azul)}
.dgm-pill-ic.esg{background:rgba(114,159,40,.12);color:var(--lima-ink)}
.dgm-pill strong{font-family:'Montserrat',sans-serif;font-weight:600;font-size:14px;color:var(--verde)}

/* NÚCLEO verde circular — peça de maior profundidade, ondas concêntricas */
.dgm-core{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:6px;
  width:min(100%,300px);min-height:200px;margin:4px auto;padding:30px 26px;border-radius:50%;overflow:hidden;
  background:radial-gradient(130% 120% at 30% 18%,#1d6e4e,var(--verde) 48%,var(--deep));color:#fff;
  box-shadow:0 34px 70px -28px rgba(8,42,30,.6),inset 0 0 0 1px rgba(169,207,91,.22)}
.dgm-core-rings{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.dgm-core-rings span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;border:1px solid var(--lima-soft);opacity:.18;animation:ecoPulse 7s var(--ease) infinite}
.dgm-core-rings span:nth-child(1){width:130px;height:130px}
.dgm-core-rings span:nth-child(2){width:240px;height:240px;animation-delay:1.4s;opacity:.13}
.dgm-core-rings span:nth-child(3){width:360px;height:360px;animation-delay:2.8s;opacity:.08}
.dgm-core-ic{position:relative;z-index:2;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;font-size:23px;color:var(--lima-soft);background:rgba(169,207,91,.16);box-shadow:inset 0 0 0 1px rgba(169,207,91,.32)}
.dgm-core-tx{position:relative;z-index:2;font-family:'Montserrat',sans-serif;font-weight:800;font-size:clamp(19px,2.6vw,24px);line-height:1.1;letter-spacing:-.4px;margin-top:6px}
.dgm-core-sub{position:relative;z-index:2;font-size:11.5px;color:rgba(233,242,234,.78);letter-spacing:.3px;max-width:200px}

/* SETAS de fluxo */
.dgm-arrow{position:relative;z-index:1;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#fff;border:1px solid var(--pale);color:var(--lima-ink);font-size:14px;box-shadow:0 6px 16px -10px rgba(11,61,44,.3)}

/* RESPONSIVO — sem overflow-x */
@media(max-width:860px){
  .dgm-spec,.dgm-spec-card.esg{flex-basis:100%}
  .dgm-spec{flex-direction:column}
}
@media(max-width:560px){
  .dgm-row{flex-wrap:wrap;gap:12px}
  .dgm-node{flex:1 1 100%}
  .dgm-pill{flex:1 1 100%;justify-content:flex-start}
  .dgm-plus{order:0;width:30px;height:30px}
  .dgm-spine{display:none}
  .dgm-core{width:100%;border-radius:24px;min-height:0}
}

/* ===== S14 - FORMATOS (.fmt) ===== */
/* =================== FOTO 5 · SISTEMAS DESCENTRALIZADOS + FORMATOS (.fmt) ===================
   Síntese: painel editorial escuro (profundidade/manifesto) à esquerda +
   galeria escalonada construída sobre o componente .photo aprovado (identidade total).
   Acento corporativo/esgoto = lima. Escopo: .fmt */
.fmt .fmt-grid{display:grid;grid-template-columns:0.88fr 1.12fr;gap:clamp(36px,5vw,64px);align-items:stretch}
/* coluna vira flex p/ o .fmt-xp poder crescer e encostar no pé do card escuro */
.fmt .fmt-gallery{display:flex;flex-direction:column}

/* --- coluna esquerda: painel editorial escuro --- */
.fmt .fmt-intro{position:relative;background:radial-gradient(130% 100% at 12% 6%,var(--verde700) 0%,var(--verde) 46%,var(--deep) 100%);
  border-radius:24px;padding:clamp(26px,2.9vw,38px);color:#fff;overflow:hidden;
  box-shadow:0 30px 70px -34px rgba(8,42,30,.55)}
.fmt .fmt-intro::before{content:"";position:absolute;right:-70px;top:-70px;width:240px;height:240px;border-radius:50%;
  border:1px solid rgba(169,207,91,.22);pointer-events:none}
.fmt .fmt-intro::after{content:"";position:absolute;right:-120px;bottom:-120px;width:320px;height:320px;border-radius:50%;
  border:1px solid rgba(169,207,91,.14);pointer-events:none}
.fmt .fmt-intro .eyebrow{position:relative;z-index:2}
.fmt .fmt-title{font-family:'Montserrat',sans-serif;font-weight:800;font-size:clamp(24px,2.7vw,34px);line-height:1.12;
  letter-spacing:-.8px;color:#fff;margin:12px 0 0;position:relative;z-index:2}
.fmt .fmt-title em{color:var(--lima-soft)}

/* lista de personalização (ritmo vertical + linha-guia lima) */
.fmt .fmt-list{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-direction:column;gap:0;position:relative;z-index:2}
.fmt .fmt-list::before{content:"";position:absolute;left:17px;top:14px;bottom:14px;width:2px;
  background:linear-gradient(180deg,rgba(169,207,91,.4),rgba(169,207,91,.08));border-radius:2px}
.fmt .fmt-list li{position:relative;display:flex;align-items:center;gap:14px;padding:7px 0;z-index:1}
.fmt .fmt-bullet{flex:none;width:36px;height:36px;border-radius:11px;display:grid;place-items:center;font-size:13px;
  color:var(--lima-soft);background:rgba(169,207,91,.14);border:1px solid rgba(169,207,91,.26);
  transition:transform .3s var(--ease),background .3s var(--ease),color .3s var(--ease)}
.fmt .fmt-list li:hover .fmt-bullet{transform:translateY(-3px);background:var(--lima-soft);color:#08301F}
.fmt .fmt-bx{min-width:0;font-family:'Montserrat',sans-serif;font-weight:600;font-size:15px;letter-spacing:-.2px;color:#fff}

.fmt .fmt-lead{font-weight:300;font-size:14.5px;line-height:1.68;color:rgba(233,242,234,.82);margin:18px 0 0;
  padding-top:18px;border-top:1px solid rgba(255,255,255,.12);position:relative;z-index:2}
.fmt .fmt-pills{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 0;position:relative;z-index:2}
.fmt .fmt-pill{display:inline-flex;align-items:center;gap:8px;font-family:'Montserrat',sans-serif;font-weight:600;
  font-size:12px;letter-spacing:.3px;color:#fff;background:rgba(255,255,255,.07);
  border:1px solid rgba(169,207,91,.28);border-radius:100px;padding:8px 15px}
.fmt .fmt-pill i{color:var(--lima-soft);font-size:12px}

/* --- coluna direita: galeria escalonada sobre o componente .photo aprovado --- */
.fmt .fmt-kicker{display:inline-flex;align-items:center;gap:10px;font-family:'Montserrat',sans-serif;font-weight:700;
  font-size:11.5px;letter-spacing:2.6px;text-transform:uppercase;color:var(--lima-ink);margin:0 0 22px}
.fmt .fmt-kicker::before{content:"";width:28px;height:2px;background:var(--lima);border-radius:2px}

.fmt .fmt-stack{display:grid;grid-template-columns:1fr 1fr;grid-template-areas:"tall mid" "tall wide";gap:22px}
.fmt .fmt-card{position:relative;display:flex}
.fmt .fmt-tall{grid-area:tall;min-height:440px}
.fmt .fmt-mid{grid-area:mid;min-height:206px;margin-top:30px}
.fmt .fmt-wide{grid-area:wide;min-height:206px}
.fmt .fmt-card>.photo{width:100%;transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.fmt .fmt-card:hover>.photo{transform:translateY(-6px);box-shadow:0 34px 70px -28px rgba(8,42,30,.55)}

/* número fantasma + glyph do formato (lima) */
.fmt .fmt-num{position:absolute;top:14px;right:18px;z-index:3;font-family:'Montserrat',sans-serif;font-weight:800;
  font-size:46px;line-height:1;color:rgba(169,207,91,.22);letter-spacing:-1px}
.fmt .fmt-glyph{position:absolute;inset:0;z-index:2;display:grid;place-items:center;color:rgba(169,207,91,.5);
  font-size:clamp(40px,5.5vw,64px);transition:transform .5s var(--ease),color .4s var(--ease)}
.fmt .fmt-card:hover .fmt-glyph{transform:scale(1.08);color:rgba(169,207,91,.72)}

/* selo "Foto · pendente" (some quando entrar a foto real) */
.fmt .fmt-pend{position:absolute;top:14px;left:16px;z-index:3;display:inline-flex;align-items:center;gap:7px;
  font-family:'Montserrat',sans-serif;font-weight:600;font-size:9.5px;letter-spacing:.6px;text-transform:uppercase;
  color:rgba(255,255,255,.8);background:rgba(8,42,30,.5);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border:1px solid rgba(169,207,91,.24);border-radius:100px;padding:4px 11px}
.fmt .fmt-pend i{font-size:9px;color:var(--lima-soft)}

/* legenda glass (reusa a linguagem do .float-selo aprovado) */
.fmt .fmt-cap{position:absolute;left:16px;right:16px;bottom:16px;z-index:3;background:rgba(8,42,30,.55);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid rgba(169,207,91,.26);
  border-radius:14px;padding:13px 16px}
.fmt .fmt-label{font-family:'Montserrat',sans-serif;font-weight:800;font-size:17px;color:var(--lima-soft);letter-spacing:.2px;line-height:1}
.fmt .fmt-cap p{font-size:12.5px;line-height:1.45;color:rgba(255,255,255,.86);margin-top:6px}
.fmt .fmt-tall .fmt-cap p{font-size:13px}

/* responsivo — empilhar sem overflow */
@media(max-width:980px){
  .fmt .fmt-grid{grid-template-columns:1fr;gap:40px}
  .fmt .fmt-stack{grid-template-columns:1fr 1fr;grid-template-areas:"tall tall" "mid wide"}
  .fmt .fmt-tall{min-height:340px}
  .fmt .fmt-mid{margin-top:0}
}
@media(max-width:560px){
  .fmt .fmt-stack{grid-template-columns:1fr;grid-template-areas:"tall" "mid" "wide";gap:18px}
  .fmt .fmt-tall{min-height:300px}
  .fmt .fmt-mid,.fmt .fmt-wide{min-height:200px;margin-top:0}
  .fmt .fmt-num{font-size:38px}
}

/* ===== S14 - TECNOLOGIAS (.tec) ===== */
/* =================== TEC — Estações sob demanda + Tecnologias aplicadas (global.html) =================== */
.tec{padding:clamp(80px,9vw,120px) 0;position:relative;background:linear-gradient(180deg,#F4F8F4,var(--paper))}
/* rev01 "unificar sessões": quando o bloco tec vive DENTRO da seção de sistemas, sem seam de fundo/padding */
.tec.tec-merged{padding:clamp(48px,6vw,76px) 0 0;background:transparent}

/* split assimétrico 40/60 — intro sticky compensa header fixo */
/* sem o trem (removido 17/07), o split vira texto | foto da estação instalada */
.tec .tec-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);gap:clamp(36px,5vw,64px);align-items:center}
.tec .tec-intro{align-self:center}
.tec .tec-intro .sec{margin-top:14px}
.tec .tec-cap{display:flex;align-items:center;gap:16px;margin-top:30px;background:#fff;border:1px solid var(--pale);border-left:4px solid var(--lima);border-radius:0 16px 16px 0;padding:18px 22px;box-shadow:0 14px 36px -24px rgba(8,42,30,.3)}
.tec .tec-cap-ic{width:48px;height:48px;flex:none;border-radius:13px;display:grid;place-items:center;font-size:20px;background:rgba(114,159,40,.12);color:var(--lima-ink)}
.tec .tec-cap-tx{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.tec .tec-cap-k{font-family:'Montserrat',sans-serif;font-weight:700;font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
.tec .tec-cap-v{font-family:'Montserrat',sans-serif;font-weight:600;font-size:16px;color:var(--verde);margin-top:3px}
.tec .tec-cap-v strong{color:var(--lima-ink);font-weight:800}

/* As regras `.tec-photo` (incl. `body.brand-global .tec .tec-photo`, que pintava de AZUL
   por cima do fundo claro do `.render` e gerou o bug do "PNG preto no fundo azul")
   foram REMOVIDAS em 16/07/2026: a visualização das renders do trem agora é o palco 3D
   em `.tec-vis` (css/tec-stage.css + js/tec-stage.js). Não reintroduzir a classe.
   Backup desta folha antes da limpeza: css/style.css.bak-tecphoto */

/* trem de tratamento (UASB/FASB/Decantador) removido 17/07 — CSS/JS(tec-flow,tec-stage)/imgs deletados */

/* tecnologias — chips lima ritmados */
.tec .tec-techs{margin-top:clamp(48px,6vw,72px);padding-top:clamp(40px,5vw,56px);border-top:1px solid var(--pale)}
.tec .tec-techs-head .eyebrow i{font-size:13px}
/* grade de tecnologias (17/07): os chips viraram cards com a DEFINIÇÃO do processo.
   Cards estáticos de propósito — accordion/tooltip dependeria de JS e o conteúdo
   sumiria onde o JS não roda. Sem número/eficiência aqui (depende do PDF do cliente). */
.tec .tec-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:14px;margin-top:26px}
.tec .tec-card{background:#fff;border:1px solid rgba(114,159,40,.24);border-radius:16px;padding:18px 20px;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease)}
.tec .tec-card:hover{transform:translateY(-3px);box-shadow:0 18px 34px -22px rgba(11,61,44,.4);border-color:var(--lima)}
.tec .tec-card-k{font-family:'Montserrat',sans-serif;font-weight:800;font-size:19px;line-height:1.1;color:var(--lima-ink);letter-spacing:.2px}
.tec .tec-card-n{font-family:'Montserrat',sans-serif;font-weight:700;font-size:11px;letter-spacing:1.1px;text-transform:uppercase;color:var(--muted);margin-top:6px}
.tec .tec-card-d{font-family:'Poppins',sans-serif;font-weight:300;font-size:13px;line-height:1.6;color:var(--muted);margin-top:11px}

/* B2 — Henrique 27/07/2026: "deixar só na sigla ali, e na hora que você passa o mouse
   ele expande o texto. Fica menos poluído visualmente e mais intuitivo."
   Colapsado: sigla + nome. Aberto: entra a descrição.

   Três decisões que não são óbvias:
   · Abre no :hover E no :focus-within, e o card virou focável (tabindex="0" no HTML).
     Conteúdo que só existe no hover não existe para quem navega por teclado.
   · Em ponteiro grosso (celular/tablet) NÃO há hover: lá o texto fica sempre aberto,
     senão a descrição simplesmente nunca apareceria. É o @media(hover:hover) que
     liga o comportamento — o padrão do arquivo é tudo aberto.
   · Anima por max-height e não por height:auto (que não anima). O valor é um teto
     folgado; se um texto passar disso ele corta, então mede-se o maior antes de
     baixar esse número. Hoje o maior descritivo cabe com sobra em 16em. */
.tec .tec-card{position:relative;cursor:default}
.tec .tec-card:focus-visible{outline:2px solid var(--lima-ink);outline-offset:3px}

/* B2, 2ª volta — 28/07/2026. Henrique pediu mais enxuto ainda: em repouso o chip
   mostra SÓ A SIGLA. Nome e descrição saíram do corpo do card e foram para um
   painel (.tec-card-pop) ancorado nele.
   POR QUE PAINEL E NÃO CRESCER NO LUGAR: com os chips numa faixa flex-wrap,
   crescer no lugar reflui a linha inteira e as pílulas vizinhas pulam de posição
   embaixo do cursor — o usuário persegue o alvo. O painel sai por cima e a faixa
   não se mexe.
   O painel abre no :hover E no :focus-within (os cards têm tabindex="0"): texto
   que só existe no hover não existe para quem navega por teclado. */
@media(hover:hover){
  .tec .tec-grid{display:flex;flex-wrap:wrap;gap:10px}
  .tec .tec-card{flex:0 0 auto;border-radius:999px;padding:9px 18px}
  .tec .tec-card-k{font-size:15px;padding-right:16px}
  .tec .tec-card::after{content:"+";position:absolute;top:50%;right:14px;transform:translateY(-50%);
    font-family:'Montserrat',sans-serif;font-weight:700;font-size:14px;line-height:1;
    color:var(--lima);opacity:.55;transition:transform .35s var(--ease),opacity .35s var(--ease)}
  .tec .tec-card:hover::after,.tec .tec-card:focus-within::after{
    transform:translateY(-50%) rotate(45deg);opacity:.9}

  .tec .tec-card-pop{position:absolute;left:0;top:calc(100% + 9px);z-index:6;
    width:296px;max-width:86vw;text-align:left;
    background:#fff;border:1px solid var(--pale);border-radius:14px;padding:14px 16px;
    box-shadow:0 24px 46px -20px rgba(11,61,44,.42);
    opacity:0;visibility:hidden;transform:translateY(-6px);
    /* ⚠ visibility com DURAÇÃO ZERO e atraso só no fechamento. Pôr `visibility .22s`
       na transição (o jeito "óbvio") faz o painel NUNCA abrir pelo teclado: medido
       aqui, com a transição o computed ficava travado em hidden/0 mesmo com
       :focus-within casando; tirando a transição, virava visible/1 na hora.
       Assim: ao abrir, visibility vira `visible` imediatamente (0s, sem atraso);
       ao fechar, espera os .22s do fade para não sumir antes de terminar. */
    transition:opacity .22s var(--ease),transform .22s var(--ease),visibility 0s linear .22s}
  .tec .tec-card:hover .tec-card-pop,
  .tec .tec-card:focus-within .tec-card-pop{opacity:1;visibility:visible;transform:none;
    transition:opacity .22s var(--ease),transform .22s var(--ease),visibility 0s linear 0s}
  .tec .tec-card-n{margin-top:0}
  /* chips do fim da faixa abrem para a ESQUERDA: com left:0 o painel de 296px
     estoura a borda direita da tela. Medido no navegador, não no papel. */
  .tec .tec-card.pop-esq .tec-card-pop{left:auto;right:0}
}
@media(prefers-reduced-motion:reduce){
  .tec .tec-card-pop{transition:none}
  .tec .tec-card::after{transition:none}
}
/* Ponteiro grosso (celular/tablet) não tem hover: painel ancorado ficaria
   inalcançável. Lá o padrão do arquivo vale — card inteiro, tudo aberto. */
@media(max-width:560px){.tec .tec-grid{grid-template-columns:1fr}}
.tec .tec-chips{list-style:none;display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.tec .tec-chip{display:inline-flex;align-items:center;gap:9px;flex:0 1 auto;min-width:0;background:rgba(114,159,40,.1);border:1px solid rgba(114,159,40,.24);border-radius:100px;padding:11px 20px;font-family:'Montserrat',sans-serif;font-weight:700;font-size:14px;color:var(--lima-ink);transition:transform .28s var(--ease),background .3s,border-color .3s,color .3s}
.tec .tec-chip i{font-size:7px;color:var(--lima);transition:color .3s}
.tec .tec-chip em{font-style:normal;font-family:'Poppins',sans-serif;font-weight:300;font-size:12.5px;color:var(--muted);margin-left:2px;transition:color .3s}
.tec .tec-chip:hover{transform:translateY(-3px);background:var(--lima);border-color:var(--lima);color:#08301F}
.tec .tec-chip:hover i{color:#08301F}
.tec .tec-chip:hover em{color:rgba(8,48,31,.78)}

/* normas — faixa rodapé escura */
.tec .tec-normas{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:34px;background:var(--deep);border-radius:18px;padding:22px 28px}
.tec .tec-normas-lb{display:inline-flex;align-items:center;gap:9px;font-family:'Montserrat',sans-serif;font-weight:600;font-size:12.5px;letter-spacing:.6px;text-transform:uppercase;color:rgba(233,242,234,.78)}
.tec .tec-normas-lb i{color:var(--lima-soft);font-size:15px}
.tec .tec-normas-list{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.tec .tec-normas-org{font-family:'Montserrat',sans-serif;font-weight:600;font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--lima-soft)}
.tec .tec-normas-list b{font-family:'Montserrat',sans-serif;font-weight:700;font-size:15px;color:#fff}
.tec .tec-normas-list i{width:5px;height:5px;border-radius:50%;background:rgba(169,207,91,.55);flex:none}

@media(max-width:960px){
  .tec .tec-split{grid-template-columns:1fr;gap:40px}
  .tec .tec-intro{position:static;top:auto}
}
@media(max-width:560px){
  .tec .tec-normas{padding:20px;gap:12px}
}
/* ===== S14 - MURAL DE LOGOS REAIS (clientes) — P&B -> cor no hover ===== */
.confia .logos{gap:clamp(24px,3vw,46px) clamp(30px,4vw,56px)}
.confia .logos img.lg{width:auto;height:46px;max-width:155px;border-radius:0;background:none;display:block;place-items:initial;object-fit:contain;filter:grayscale(1);opacity:.6;font-size:0;transition:filter .35s var(--ease),opacity .35s var(--ease),transform .35s var(--ease)}
.confia .logos img.lg:hover{filter:none;opacity:1;transform:translateY(-4px)}
@media(max-width:600px){.confia .logos img.lg{height:38px}}
/* ===== S14 - BLOCO PROTEJA A NATUREZA · VIDEO FACADE ===== */
.eco-video{position:relative;aspect-ratio:16/9;border-radius:20px;overflow:hidden;cursor:pointer;background:var(--deep);box-shadow:0 24px 60px -24px rgba(8,42,30,.4);outline:none}
.eco-video .eco-video-thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.eco-video:hover .eco-video-thumb{transform:scale(1.05)}
.eco-video .eco-video-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(160deg,rgba(8,42,30,.34),rgba(8,42,30,.12) 45%,rgba(11,61,44,.34));pointer-events:none}
.eco-video .frame{position:absolute;inset:0;z-index:3;border-radius:20px;box-shadow:inset 0 0 0 1px rgba(169,207,91,.22);pointer-events:none}
.eco-video .eco-video-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;width:74px;height:74px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.16);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.42);color:#fff;font-size:23px;transition:transform .3s var(--ease),background .3s var(--ease),border-color .3s}
.eco-video .eco-video-play i{margin-left:4px}
.eco-video:hover .eco-video-play{transform:translate(-50%,-50%) scale(1.08);background:var(--azul);border-color:var(--azul)}
.eco-video .eco-video-cap{position:absolute;left:16px;bottom:16px;z-index:2;font-size:12.5px;color:rgba(255,255,255,.9);background:rgba(8,42,30,.5);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(169,207,91,.22);border-radius:50px;padding:7px 14px}
.eco-video .eco-video-cap b{font-family:'Montserrat',sans-serif;color:var(--lima-soft);font-weight:700}
.eco-video:focus-visible{box-shadow:0 0 0 3px var(--azul),0 24px 60px -24px rgba(8,42,30,.4)}
.eco-video.playing{cursor:default}
.eco-video.playing .eco-video-thumb,.eco-video.playing .eco-video-scrim,.eco-video.playing .eco-video-play,.eco-video.playing .eco-video-cap{display:none}
.eco-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:4}
/* ===== S14 - BUSCA NO HEADER (produtos + blog tema/titulo) ===== */
.eco-actions{display:flex;align-items:center;gap:14px}
.eco-search-btn{width:40px;height:40px;border-radius:50%;border:1px solid rgba(11,61,44,.16);background:rgba(255,255,255,.5);color:var(--verde);font-size:15px;cursor:pointer;display:grid;place-items:center;transition:background .3s var(--ease),color .3s,border-color .3s,transform .3s}
.eco-search-btn:hover{background:var(--verde);color:#fff;border-color:var(--verde);transform:translateY(-2px)}
.eco-hdr.is-dark .eco-search-btn{color:#fff;border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.08)}
.eco-hdr.is-dark .eco-search-btn:hover{background:var(--lima-soft);color:#08301F;border-color:var(--lima-soft)}
.eco-search-ov{position:fixed;inset:0;z-index:120;background:rgba(8,42,30,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility .3s;display:flex;justify-content:center;align-items:flex-start;padding:14vh 20px 20px}
.eco-search-ov.open{opacity:1;visibility:visible}
.eco-search-box{width:100%;max-width:680px;background:var(--paper);border-radius:20px;box-shadow:0 40px 90px -30px rgba(8,42,30,.6);overflow:hidden;transform:translateY(-16px);transition:transform .35s var(--ease)}
.eco-search-ov.open .eco-search-box{transform:none}
.eco-search-bar{display:flex;align-items:center;gap:12px;padding:18px 20px;border-bottom:1px solid var(--pale)}
.eco-search-bar > i{color:var(--lima-ink);font-size:17px}
.eco-search-bar input{flex:1;min-width:0;border:none;outline:none;font-family:'Poppins',sans-serif;font-size:16px;color:#0E1A14;background:none}
.eco-search-close{border:none;background:none;font-size:26px;line-height:1;color:var(--muted);cursor:pointer}
.eco-search-close:hover{color:var(--verde)}
.eco-search-res{max-height:56vh;overflow-y:auto;padding:8px 10px 14px}
.eco-sr-group{padding:10px 10px 4px}
.eco-sr-group h4{font-family:'Montserrat',sans-serif;font-size:11px;letter-spacing:1.4px;text-transform:uppercase;color:var(--lima-ink);margin-bottom:6px}
.eco-sr-item{display:flex;align-items:center;gap:13px;padding:11px 12px;border-radius:12px;transition:background .2s}
.eco-sr-item:hover{background:rgba(114,159,40,.1)}
.eco-sr-ic{width:38px;height:38px;border-radius:10px;flex:none;display:grid;place-items:center;background:rgba(0,113,227,.1);color:var(--azul);font-size:15px}
.eco-sr-ic.tema{background:rgba(114,159,40,.14);color:var(--lima-ink)}
.eco-sr-ic.art{background:rgba(11,61,44,.08);color:var(--verde)}
.eco-sr-item b{display:block;font-family:'Montserrat',sans-serif;font-weight:600;font-size:14.5px;color:var(--verde)}
.eco-sr-item em{font-style:normal;font-size:12.5px;color:var(--muted)}
.eco-sr-none{font-size:13px;color:var(--muted);padding:4px 12px 8px}
@media(max-width:560px){.eco-actions .eco-orc{display:none}}

/* ===== S15 - CONTATO (formulário WhatsApp + canais + mapa) — .cform / .cmap ===== */
.cform{--cf-neg:#A04834}
.cform-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,4vw,48px);align-items:start}

/* --- cartão do formulário --- */
.cform-card{background:#fff;border:1px solid var(--pale);border-radius:24px;padding:clamp(26px,3.4vw,42px);box-shadow:0 30px 70px -34px rgba(8,42,30,.4)}
.cform-card>.cform-row,.cform-card>.cform-field{margin-top:20px}
.cform-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cform-field{display:flex;flex-direction:column;gap:8px;min-width:0}
.cform-label{display:inline-flex;align-items:center;gap:8px;font-family:'Montserrat',sans-serif;font-weight:600;font-size:12.5px;letter-spacing:.3px;color:var(--verde)}
.cform-label i{color:var(--lima-ink);font-size:12px;width:15px;text-align:center}
.cform-req{color:var(--azul);font-weight:800}

/* inputs unificados */
.cform-input{width:100%;font-family:'Poppins',sans-serif;font-size:15px;color:#0E1A14;background:#fff;border:1px solid var(--pale);border-radius:12px;padding:13px 15px;transition:border-color .25s var(--ease),box-shadow .25s var(--ease)}
.cform-input::placeholder{color:#9fb1a6}
.cform-input:focus{outline:none;border-color:var(--azul);box-shadow:0 0 0 4px rgba(0,113,227,.12)}
.cform-input.err{border-color:var(--cf-neg);box-shadow:0 0 0 4px rgba(160,72,52,.10)}
textarea.cform-input{resize:vertical;min-height:108px;line-height:1.55}

/* select com seta custom */
.cform-select{position:relative}
select.cform-input{appearance:none;-webkit-appearance:none;-moz-appearance:none;padding-right:42px;cursor:pointer}
.cform-caret{position:absolute;right:16px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--lima-ink);font-size:12px}

/* chips de rádio (CSS puro :checked) */
.cform-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:2px}
.cform-chips input{position:absolute;opacity:0;width:0;height:0}
.cform-chips label{font-family:'Montserrat',sans-serif;font-weight:600;font-size:13px;color:var(--muted);background:#fff;border:1px solid var(--pale);border-radius:100px;padding:9px 16px;cursor:pointer;transition:background .25s,border-color .25s,color .25s,box-shadow .25s,transform .25s}
.cform-chips label:hover{border-color:rgba(0,113,227,.4);color:var(--verde);transform:translateY(-2px)}
.cform-chips input:checked+label{background:var(--azul);border-color:var(--azul);color:#fff;box-shadow:0 10px 22px -12px rgba(0,113,227,.7)}
.cform-chips input:focus-visible+label{box-shadow:0 0 0 3px rgba(0,113,227,.35)}

/* botão enviar (whatsapp) */
.cform-send{width:100%;margin-top:24px;display:inline-flex;align-items:center;justify-content:center;gap:11px;font-family:'Montserrat',sans-serif;font-weight:700;font-size:15.5px;color:#fff;background:var(--verde);border:1px solid var(--verde);border-radius:100px;padding:16px 28px;cursor:pointer;box-shadow:0 16px 34px -16px rgba(11,61,44,.6);transition:transform .3s var(--ease),background .35s,border-color .35s,color .35s}
.cform-send i{font-size:19px;color:#25D366;transition:color .35s}
.cform-send:hover{transform:translateY(-3px);background:var(--lima);border-color:var(--lima);color:#08301F}
.cform-send:hover i{color:#08301F}
.cform-note{display:flex;align-items:center;gap:8px;justify-content:center;margin-top:16px;font-size:12.5px;line-height:1.5;color:var(--muted);text-align:center}
.cform-note i{color:var(--lima-ink);flex:none}
.cform-note.err{color:var(--cf-neg)}
.cform-note.err i{color:var(--cf-neg)}

/* --- coluna de canais --- */
.cform-side{display:flex;flex-direction:column;gap:14px}
.cform-ch{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--pale);border-radius:16px;padding:16px 18px;box-shadow:0 10px 30px -22px rgba(11,61,44,.26);transition:transform .3s var(--ease),box-shadow .3s,border-color .3s}
a.cform-ch:hover{transform:translateY(-3px);box-shadow:0 20px 40px -22px rgba(11,61,44,.3);border-color:rgba(0,113,227,.35)}
.cform-ch-ic{width:46px;height:46px;flex:none;border-radius:13px;display:grid;place-items:center;font-size:19px;background:rgba(0,113,227,.10);color:var(--azul)}
.cform-ch-tx{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:3px}
.cform-ch-tx b{font-family:'Montserrat',sans-serif;font-weight:700;font-size:15px;color:var(--verde)}
.cform-ch-tx em{font-style:normal;font-size:12.5px;color:var(--muted);line-height:1.45;word-break:break-word}
.cform-ch-go{color:var(--azul);font-size:13px;flex:none;transition:transform .3s var(--ease)}
a.cform-ch:hover .cform-ch-go{transform:translateX(4px)}
.cform-ch.wa{border-color:rgba(37,211,102,.32);background:linear-gradient(180deg,#fff,#f4fdf7)}
.cform-ch.wa .cform-ch-ic{background:rgba(37,211,102,.14);color:#1bbe5b}
.cform-ch.static{cursor:default}
.cform-ch.ghost{background:rgba(114,159,40,.06);border:1px dashed rgba(114,159,40,.42);box-shadow:none}
.cform-ch.ghost .cform-ch-ic{background:rgba(114,159,40,.12);color:var(--lima-ink)}
.cform-side-foot{position:relative;overflow:hidden;margin-top:6px;background:radial-gradient(120% 100% at 20% 0%,var(--verde700),var(--verde) 55%,var(--deep));border-radius:18px;padding:26px 22px;text-align:center}
.cform-side-foot>i{position:relative;z-index:2;font-size:24px;color:var(--lima-soft)}
.cform-side-foot p{position:relative;z-index:2;font-size:13.5px;line-height:1.6;color:rgba(233,242,234,.86);margin-top:10px}
.cform-side-foot p b{color:#fff;font-weight:600;font-family:'Montserrat',sans-serif}

/* --- mapa --- */
.cmap{position:relative;height:clamp(300px,42vh,440px);background:var(--pale)}
.cmap iframe{width:100%;height:100%;border:0;display:block;filter:grayscale(.18) contrast(1.04)}
.cmap-tag{position:absolute;top:18px;left:50%;transform:translateX(-50%);z-index:2;display:inline-flex;align-items:center;gap:9px;font-family:'Montserrat',sans-serif;font-weight:700;font-size:12.5px;letter-spacing:.4px;color:var(--verde);background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--pale);border-radius:100px;padding:10px 20px;box-shadow:0 14px 34px -18px rgba(8,42,30,.4)}
.cmap-tag i{color:var(--azul)}

@media(max-width:960px){.cform-grid{grid-template-columns:1fr;gap:32px}}
@media(max-width:560px){.cform-row{grid-template-columns:1fr}}

/* bloco de contato na HOME (variante 2-col da .contato) */
.contato.home-cta{text-align:left;padding-top:clamp(72px,8vw,104px);padding-bottom:clamp(72px,8vw,104px)}
.home-cta .wrap{position:relative;z-index:3}
.home-cta-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,60px);align-items:center}
.home-cta-tx h2{margin:14px 0 0;max-width:none}
.home-cta-tx .sub{margin:16px 0 0;max-width:480px}
.home-cta-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}
.home-cta-actions .b1{display:inline-flex;align-items:center;gap:9px}
.home-cta-trust{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:24px}
.home-cta-trust span{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:rgba(255,255,255,.82)}
.home-cta-trust i{color:var(--lima-soft)}
.home-cta-form{text-align:left}
.home-cta-form-t{font-family:'Montserrat',sans-serif;font-weight:800;font-size:clamp(21px,2.4vw,26px);color:var(--verde);margin-top:6px;line-height:1.12}
@media(max-width:860px){.home-cta-grid{grid-template-columns:1fr;gap:34px}}

/* ===== S15 - FAQ accordion (SEO, reutilizável nos produtos) — .faq ===== */
.faq{max-width:840px;margin:clamp(44px,5vw,64px) auto 0}
.faq-head{text-align:center;max-width:720px;margin:0 auto 26px}
.faq-item{background:#fff;border:1px solid var(--pale);border-radius:14px;margin-top:12px;overflow:hidden;transition:box-shadow .3s var(--ease),border-color .3s}
.faq-item[open]{box-shadow:0 18px 44px -26px rgba(11,61,44,.34);border-color:rgba(0,113,227,.26)}
.faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:14px;padding:18px 22px;font-family:'Montserrat',sans-serif;font-weight:600;font-size:15.5px;line-height:1.4;color:var(--verde)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"\f067";font-family:"Font Awesome 5 Free";font-weight:900;margin-left:auto;font-size:13px;color:var(--azul);flex:none;transition:transform .3s var(--ease)}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-a{padding:0 22px 20px;font-size:14.5px;line-height:1.7;color:var(--muted)}

/* ===== S15 - FOTO em cor (renders/fotos reais do Drive) — .photo.real ===== */
/* tratamento leve: preserva cor real e dá legibilidade ao float-selo (sem o grayscale/multiply dramático) */
.photo.real img,.photo.real video{filter:contrast(1.03) saturate(1.04) brightness(1.02);object-position:center}
/* vídeo no card: sem movimento pra quem pediu sem movimento. O browser não
   pausa <video autoplay loop> sozinho — escondê-lo revela o poster, que já é
   o background do .photo-video (css/global-slots.css). */
@media (prefers-reduced-motion:reduce){ .photo video{display:none} }
.photo.real::after{background:linear-gradient(180deg,rgba(8,42,30,.12) 0%,transparent 28%,transparent 60%,rgba(8,42,30,.58) 100%)}

/* ===== S16 - FOTO real nos cards Tecnologias (UASB/FASB) da Global ===== */

/* ===== S16 - FASE 4: identidade GLOBAL ECOSOLUTIONS (AZUL) — escopo body.brand-global ===== */
/* Vira a paleta da global.html p/ azul via tokens herdados. Header/rodapé permanecem ECOCASA (verde). Lima = acento de engenharia, mantido. */
body.brand-global{
  --verde:#0A3D66; --deep:#06283F; --verde700:#0F5488;
  --pale:#E6F0FB; --muted:#566573;
}
/* header e rodapé mantêm a marca ECOCASA (verde) p/ consistência de navegação site-wide */
body.brand-global #ecoHeader, body.brand-global #ecoFooter{
  --verde:#0B3D2C; --deep:#082A1E; --verde700:#0F4C37; --pale:#E9F2EA; --muted:#5B6B61;
}
/* hardcodes verdes nas seções da Global -> azul (substitui o #1d6e4e cravado nos gradientes) */
body.brand-global .dgm-core{ background:radial-gradient(130% 120% at 30% 18%,#1E6FA8,var(--verde) 48%,var(--deep)) }
/* onda do hero: o fill fica CRAVADO no SVG (#082A1E = deep da ECOCASA). Nas páginas compartilhadas
   (contato/blog com ?brand=global) isso deixa uma onda VERDE fechando um hero navy. CSS `fill` vence
   o atributo de apresentação; nas páginas 100% Global o valor já é o mesmo, então é no-op. */
body.brand-global .hero.short > .wave path{ fill:var(--deep) }
/* ===== LUPA · filtros (temas, ano, autor) — mesma fonte de dados do blog =====
   ⚠ ARQUEOLOGIA (17/07/2026): havia um `body.brand-global` ÓRFÃO colado antes deste comentário.
   Comentário não separa seletor ⇒ o parser lia `body.brand-global .eco-search-filters` e a barra
   de filtros ficava SEM ESTILO em toda página ECOCASA (só o Global pegava).
   Origem: era o resto de `body.brand-global .tec .tec-photo{…}`, removida em 16/07 (ver l.829 e
   css/tec-stage.css) — apagaram ` .tec .tec-photo{…}` e o prefixo ficou. Confirmado no backup
   `style.css.bak-tecphoto`. NÃO é regra perdida: a remoção foi proposital ("não reintroduzir").
   Esta regra é site-wide — se um dia precisar de override do Global aqui, escreva regra própria. */
.eco-search-filters{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;
  padding:14px 18px;border-bottom:1px solid #e4ede6;background:#f7faf8}
.ess-chips{display:flex;gap:7px;flex-wrap:wrap;flex:1 1 auto}
.ess-chip{padding:6px 12px;border:1px solid #dfeae1;border-radius:50px;background:#fff;color:var(--verde);
  font:600 11.5px/1 Poppins,system-ui,sans-serif;cursor:pointer;transition:all .2s var(--ease)}
.ess-chip:hover{border-color:var(--lima)}
.ess-chip[aria-pressed="true"]{background:var(--verde);border-color:var(--verde);color:#fff}
.ess-selects{display:flex;gap:8px}
.ess-selects select{padding:7px 12px;border:1px solid #dfeae1;border-radius:50px;background:#fff;color:var(--verde);
  font:500 11.5px/1 Poppins,system-ui,sans-serif;cursor:pointer}
.ess-selects select:focus{outline:none;border-color:var(--lima)}
.ess-selects select[hidden]{display:none}
.eco-search-foot{padding:0 18px}
.eco-search-foot:empty{padding:0}
.eco-sr-all{display:flex;align-items:center;justify-content:center;gap:9px;padding:15px;margin:0 -18px;
  background:var(--verde);color:#fff;font:700 13.5px/1 Poppins,system-ui,sans-serif;text-decoration:none;
  transition:background .2s var(--ease)}
.eco-sr-all:hover{background:var(--verde700)}
.eco-sr-all b{color:var(--lima-soft)}
@media (max-width:640px){
  .eco-search-filters{flex-direction:column;align-items:stretch}
  .ess-selects{width:100%}
  .ess-selects select{flex:1}
}

/* visível só para leitor de tela (o canvas WebGL do mapa não é navegável por teclado) */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}
.sr-only a:focus{position:static;width:auto;height:auto;clip:auto}

/* =============== TRANSIÇÃO MAPA → REVENDAS (luz verde, tecnológica) ===============
   .eco-sweep  = na origem (global.html): a luz NASCE do marcador clicado e cobre a tela.
   .eco-arrive = no destino (revendas.html): a luz continua e some -> sem flash branco.
   O elo entre as duas páginas é sessionStorage 'ecoSweep' (setado no eco-map3d.js). */
.eco-sweep{position:fixed;inset:0;z-index:9999;pointer-events:none;
  background:radial-gradient(circle at var(--sx,50%) var(--sy,50%),
    rgba(214,255,158,.96) 0%, rgba(114,159,40,.96) 20%, rgba(11,61,44,.98) 55%, #082A1E 100%);
  clip-path:circle(0px at var(--sx,50%) var(--sy,50%));
  transition:clip-path .52s cubic-bezier(.7,0,.3,1)}
.eco-sweep.go{clip-path:circle(160vmax at var(--sx,50%) var(--sy,50%))}

.eco-arrive{position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:1;
  background:radial-gradient(circle at 50% 42%, rgba(114,159,40,.96), rgba(11,61,44,.98) 58%, #082A1E 100%);
  transition:opacity .6s var(--ease)}
.eco-arrive.out{opacity:0}

/* a revenda que veio do mapa chega destacada.
   scroll-margin-top: o header é fixed e comia 125px do card (inclusive o nome).
   opacity/transform: vence a corrida contra o .reveal, que senão deixava o alvo invisível. */
.rev-card{scroll-margin-top:130px}
.rev-card:target,.rev-card.eco-alvo{outline:2px solid var(--lima);outline-offset:3px;opacity:1;transform:none;
  box-shadow:0 0 0 7px rgba(169,207,91,.16),0 24px 54px -26px rgba(114,159,40,.65);
  transition:box-shadow .45s var(--ease),outline-color .45s var(--ease)}

@media (prefers-reduced-motion:reduce){
  .eco-sweep,.eco-arrive{display:none}
}

/* =================== WHATSAPP FLUTUANTE — eco pulse + liquid glass 3D ===================
   Vidro da marca no canto. 3 camadas:
     1) eco pulse  — anéis lima saindo do botão (mesma assinatura dos .rings da seção contato)
     2) liquid glass — fallback fosco + rim light AQUI; js/liquid-glass.js faz o upgrade
        para refração real (só Chromium). O CSS é auto-suficiente de propósito: o
        liquid-glass.css não está em todas as páginas, o style.css está.
     3) domo 3D    — gradiente radial (luz em cima/esquerda) + tilt seguindo o ponteiro.
   O href ganha a mensagem contextual em setupWhatsAppLinks() (o FAB é um a[href*=wa.me]). */
.eco-wa{position:fixed;right:clamp(16px,2.2vw,30px);bottom:clamp(16px,2.2vw,30px);z-index:70;
  width:74px;height:74px;perspective:640px}

/* 1) eco pulse — derivado do @keyframes ecoPulse dos .rings, com fade (onda que sai e some) */
.eco-wa-rings{position:absolute;inset:0;pointer-events:none}
.eco-wa-rings span{position:absolute;left:50%;top:50%;width:100%;height:100%;border-radius:50%;
  border:1.5px solid var(--lima-soft);animation:ecoWaPulse 3.6s var(--ease) infinite}
.eco-wa-rings span:nth-child(2){animation-delay:1.2s}
.eco-wa-rings span:nth-child(3){animation-delay:2.4s}
@keyframes ecoWaPulse{
  0%{transform:translate(-50%,-50%) scale(.86);opacity:.6}
  70%{opacity:0}
  100%{transform:translate(-50%,-50%) scale(2.2);opacity:0}
}

/* 2+3) o botão: vidro + tint da marca + domo 3D */
.eco-wa-btn{position:relative;display:grid;place-items:center;width:100%;height:100%;
  border-radius:50%;text-decoration:none;color:#fff;font-size:33px;isolation:isolate;
  transform-style:preserve-3d;
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale(var(--s,1));
  transition:transform .3s var(--ease),box-shadow .35s var(--ease);
  /* tint da marca sobre o vidro — mantém o ícone branco legível também sobre fundo claro */
  background:radial-gradient(120% 120% at 32% 26%,rgba(169,207,91,.62),rgba(114,159,40,.74) 42%,rgba(11,61,44,.88) 100%);
  -webkit-backdrop-filter:blur(6px) saturate(150%) brightness(1.06);
  backdrop-filter:blur(6px) saturate(150%) brightness(1.06);
  box-shadow:0 16px 34px -8px rgba(8,42,30,.58),
             inset 1.5px 1.5px 1px rgba(255,255,255,.7),
             inset -1px -1.5px 1px rgba(255,255,255,.3),
             inset 0 0 16px rgba(255,255,255,.14)}
/* reflexo especular: a luz batendo no topo do domo (o que vende a esfera de vidro) */
.eco-wa-btn::before{content:"";position:absolute;left:17%;right:17%;top:7%;height:33%;
  border-radius:50%;pointer-events:none;transform:translateZ(8px);
  background:linear-gradient(180deg,rgba(255,255,255,.6),rgba(255,255,255,0));
  filter:blur(2.5px);opacity:.9;transition:opacity .35s var(--ease)}
.eco-wa-btn i{transform:translateZ(18px);filter:drop-shadow(0 2px 5px rgba(8,42,30,.5))}
.eco-wa:hover .eco-wa-btn{--s:1.06}
.eco-wa-btn:hover{box-shadow:0 26px 50px -10px rgba(8,42,30,.66),
             inset 1.5px 1.5px 1px rgba(255,255,255,.85),
             inset -1px -1.5px 1px rgba(255,255,255,.38),
             inset 0 0 20px rgba(255,255,255,.22)}
.eco-wa-btn:hover::before{opacity:1}
.eco-wa-btn:focus-visible{outline:3px solid var(--lima-soft);outline-offset:4px}

/* rótulo (não é vidro de propósito: vidro sobre vidro vira ruído) */
.eco-wa-tip{position:absolute;right:calc(100% + 12px);top:50%;white-space:nowrap;
  transform:translateY(-50%) translateX(8px);opacity:0;pointer-events:none;
  background:var(--verde);color:#fff;font-family:'Montserrat',sans-serif;font-weight:600;font-size:12.5px;
  padding:8px 14px;border-radius:100px;box-shadow:0 10px 24px -10px rgba(8,42,30,.6);
  transition:opacity .28s var(--ease),transform .28s var(--ease)}
.eco-wa:hover .eco-wa-tip{opacity:1;transform:translateY(-50%) translateX(0)}

/* 4) pulinho — Henrique 17/07: "quando você entra no site e ele pula pra chamar
   atenção... conversa aqui". Anima o WRAPPER, nunca o .eco-wa-btn: o botão usa
   transform pro domo 3D (rotateX/rotateY/scale via --rx/--ry/--s) e uma animation
   no mesmo elemento sobrescreveria o tilt do ponteiro.
   transform-origin embaixo = a bolinha "pisa" no chão (squash/stretch). */
.eco-wa{transform-origin:50% 100%}
@keyframes ecoWaJump{
  0%,100%{transform:translateY(0)    scaleX(1)    scaleY(1)}
  10%    {transform:translateY(0)    scaleX(1.06) scaleY(.9)}
  30%    {transform:translateY(-15px) scaleX(.96) scaleY(1.07)}
  48%    {transform:translateY(0)    scaleX(1.05) scaleY(.94)}
  62%    {transform:translateY(-7px)  scaleX(.98) scaleY(1.03)}
  78%    {transform:translateY(0)    scaleX(1.02) scaleY(.98)}
  90%    {transform:translateY(-2px)  scaleX(1)   scaleY(1)}
}
.eco-wa.jump{animation:ecoWaJump 1.15s var(--ease)}
/* enquanto pula, o rótulo aparece sozinho — é o "conversa aqui" que ele pediu */
.eco-wa.jump .eco-wa-tip{opacity:1;transform:translateY(-50%) translateX(0)}
@media(prefers-reduced-motion:reduce){
  .eco-wa.jump{animation:none}
  .eco-wa.jump .eco-wa-tip{opacity:0;transform:translateY(-50%) translateX(8px)}
}

@media(max-width:900px){
  .eco-wa{width:64px;height:64px}
  .eco-wa-btn{font-size:28px}
}
@media(max-width:640px){
  .eco-wa{width:56px;height:56px}
  .eco-wa-btn{font-size:25px}
  .eco-wa-tip{display:none}
}
@media (prefers-reduced-motion:reduce){
  .eco-wa-rings span{animation:none;opacity:.28}
  .eco-wa-btn{transition:none}
}

/* ===================================================================
   AS SOLUÇÕES — roteador editorial (rev02)
   Substitui o .bento de 3 cards iguais. Sem JS, sem libs.
   Prefixo .rota-* conferido: livre em todos os 19 css/ do site.
   =================================================================== */

/* -- cabeçalho assimétrico: título à esquerda, lead à direita, sobre um fio -- */
.rota-head{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(20px,4vw,56px);align-items:end;
  margin:0 0 clamp(34px,4vw,52px);padding-bottom:clamp(20px,2.4vw,26px);
  border-bottom:1px solid rgba(11,61,44,.12)}
.rota-head-r{margin-bottom:4px}
@media(max-width:820px){
  .rota-head{grid-template-columns:1fr;align-items:start;gap:16px}
  .rota-head-r{margin-bottom:0}
}

/* A10 (Henrique 27/07): "da um pouquinho mais de espaco aqui que ficou meio
   encavalado" - o ar entra em DOIS niveis: entre os grupos (este gap) e dentro de
   cada linha (padding do .rota-row). Mexer so no gap separava os blocos e deixava
   as linhas igualmente apertadas por dentro, que era metade da queixa. */
.rota{display:flex;flex-direction:column;gap:clamp(48px,6vw,72px)}

/* -- rótulo de grupo: kicker + fio que atravessa + contagem -- */
.rota-gh{display:flex;align-items:center;flex-wrap:wrap;gap:14px;margin:0 0 2px;
  font-family:'Montserrat',sans-serif;font-weight:800;font-size:12.5px;letter-spacing:2.4px;
  text-transform:uppercase;color:var(--verde)}
.rota-dot{width:9px;height:9px;border-radius:50%;flex:none}
.rota-gh.agua .rota-dot{background:var(--azul)}
.rota-gh.esg  .rota-dot{background:var(--lima)}
.rota-gh-t{flex:none}
.rota-gh-rule{flex:1 1 auto;min-width:12px;height:1px;background:rgba(11,61,44,.14)}
.rota-gh-n{flex:0 1 auto;min-width:0;font-family:'Poppins',sans-serif;font-weight:400;font-size:11.5px;
  letter-spacing:.4px;text-transform:none;color:var(--muted)}

/* -- as linhas -- */
.rota-list{list-style:none;margin:0;padding:0}
.rota-row{position:relative;display:grid;grid-template-columns:.86fr 1.14fr;
  gap:clamp(16px,3vw,44px);align-items:start;
  padding:clamp(30px,3.4vw,40px) clamp(10px,1.4vw,18px) clamp(30px,3.4vw,40px) clamp(16px,2vw,26px);
  border-top:1px solid rgba(11,61,44,.12);transition:background .35s var(--ease)}
.rota-list .rota-row:last-child{border-bottom:1px solid rgba(11,61,44,.12)}
/* --ac = cor de TEXTO do grupo. Azul de marca (#0071E3) reprova WCAG AA em texto
   pequeno sobre o fim do gradiente (#F4F8F4 = 4.38). Escurecido p/ 5.58, seguindo a
   convenção que a folha já usa em --lima (3.06, decorativo) -> --lima-ink (5.21, texto). */
.rota-row.agua{--ac:#0060C8}
.rota-row.esg{--ac:var(--lima-ink)}

/* trilho de acento à esquerda (cresce no hover; fixo no carro-chefe) */
.rota-row::before{content:"";position:absolute;left:0;top:-1px;bottom:-1px;width:2px;
  background:var(--ac);transform:scaleY(0);transform-origin:50% 0;
  transition:transform .4s var(--ease),opacity .35s var(--ease)}
.rota-row:hover{background:rgba(255,255,255,.72)}
.rota-row:hover::before{transform:scaleY(1)}

/* Henrique 27/07/2026 — as TRÊS soluções pesam igual.
   Era um "carro-chefe": a Cisterna Pronta tinha escala tipográfica maior, proporção de
   colunas invertida e trilho de acento permanente. Resultado medido: 187px de altura
   contra 147px da SATE e 148px da ECOTED. A queixa foi exatamente essa leitura —
   "batendo o olho dá a impressão que a cisterna pronta é mais importante que as outras;
   aí tudo tem a sua mesma importância". Então .rota-primary deixou de escalar: agora só
   marca QUAL é a linha principal para quem lê o HTML, sem privilégio visual.
   As regras que davam o destaque estão logo abaixo, neutralizadas no lugar de apagadas —
   se ele voltar atrás, é um bloco só para restaurar. */
.rota-primary{grid-template-columns:.86fr 1.14fr}
.rota-primary::before{transform:scaleY(0);width:2px;opacity:1}
.rota-primary:hover::before{transform:scaleY(1)}

/* nome do produto */
.rota-name{font-family:'Montserrat',sans-serif;font-weight:800;letter-spacing:-.6px;line-height:1.04;
  font-size:clamp(22px,2.3vw,29px);color:var(--verde);margin:0;transition:color .35s var(--ease)}
.rota-primary .rota-name{font-size:clamp(22px,2.3vw,29px);letter-spacing:-.6px}
.rota-name a{color:inherit}
/* link esticado: a linha toda clica, mas o nome acessível é só o do produto */
.rota-name a::after{content:"";position:absolute;inset:0;z-index:2}
.rota-name a:focus-visible{outline:2px solid var(--ac);outline-offset:4px;border-radius:4px}
.rota-row:hover .rota-name{color:var(--ac)}
.rota-row:has(a:focus-visible){background:rgba(255,255,255,.72)}
.rota-row:has(a:focus-visible)::before{transform:scaleY(1)}

/* a linha de resultado — o que o grupo entrega */
.rota-io{display:flex;align-items:center;gap:9px;margin:14px 0 0;
  font-family:'Montserrat',sans-serif;font-weight:600;font-size:13.5px;line-height:1.35;color:var(--ac)}
.rota-primary .rota-io{font-size:13.5px;margin-top:14px}
/* seta desenhada em CSS, não em icon-font: nesta linha a seta CARREGA O SENTIDO
   ("resulta em"). Todos os outros ícones FA do site são decorativos; se o CDN da
   Font Awesome cair, aqui o significado sumiria junto. Em CSS ela nunca falha,
   herda currentColor/peso e anima com precisão. */
.rota-io-ar{position:relative;flex:none;width:15px;height:1.6px;background:currentColor;border-radius:2px;
  transition:width .35s var(--ease),transform .35s var(--ease)}
.rota-io-ar::after{content:"";position:absolute;right:0;top:50%;width:5.5px;height:5.5px;
  border-right:1.6px solid currentColor;border-top:1.6px solid currentColor;border-radius:1px;
  transform:translate(1px,-50%) rotate(45deg)}
.rota-primary .rota-io-ar{width:15px}
.rota-row:hover .rota-io-ar{transform:translateX(3px)}

/* coluna direita: descrição + chamada */
.rota-c2{display:flex;flex-direction:column;align-items:flex-start;gap:16px;padding-top:4px}
.rota-desc{font-weight:300;font-size:14.6px;line-height:1.7;color:var(--muted);margin:0}
.rota-primary .rota-desc{font-size:14.6px;line-height:1.7;color:var(--muted)}
.rota-cta{font-family:'Montserrat',sans-serif;font-weight:600;font-size:13px;color:var(--ac);
  display:inline-flex;align-items:center;gap:8px;transition:gap .3s var(--ease)}
.rota-row:hover .rota-cta{gap:13px}

@media(max-width:820px){
  .rota-row,.rota-primary{grid-template-columns:1fr;gap:14px;padding-right:0;padding-left:18px}
  .rota-c2{padding-top:0}
  .rota-name{font-size:clamp(20px,5.6vw,25px)}
  .rota-primary .rota-name{font-size:clamp(20px,5.6vw,25px);letter-spacing:-.6px}
}
@media(max-width:420px){
  .rota-gh{gap:10px;font-size:11.5px;letter-spacing:1.8px}
  .rota-gh-n{font-size:10.5px}
}
@media(prefers-reduced-motion:reduce){
  .rota-row,.rota-row::before,.rota-io-ar,.rota-cta,.rota-name{transition:none}
  .rota-row::before{transform:scaleY(1);opacity:.28}
  .rota-primary::before{opacity:.28}
}
/* -- rota humana (enxerto): a 4ª saída, quando o leitor não se encaixa em nenhuma -- */
.rota-help{display:flex;align-items:center;gap:16px;margin-top:20px;padding:20px 22px;
  border:1px solid rgba(11,61,44,.16);border-radius:16px;background:#fff;
  box-shadow:0 2px 10px rgba(11,61,44,.06);
  transition:border-color .35s var(--ease),background .35s var(--ease),transform .35s var(--ease)}
.rota-help:hover{border-color:var(--lima);background:#fff;transform:translateY(-2px)}
.rota-help:focus-visible{outline:2px solid var(--lima-ink);outline-offset:3px}
.rota-help-ic{width:42px;height:42px;flex:none;border-radius:12px;display:grid;place-items:center;
  font-size:17px;background:rgba(114,159,40,.12);color:var(--lima-ink)}
.rota-help-tx{display:flex;flex-direction:column;gap:3px;flex:1 1 auto;min-width:0}
.rota-help-tx b{font-family:'Montserrat',sans-serif;font-weight:700;font-size:15px;color:var(--verde)}
.rota-help-tx span{font-size:13.5px;line-height:1.55;color:var(--muted)}
.rota-help-ar{flex:none;color:var(--lima-ink);transition:transform .3s var(--ease)}
.rota-help:hover .rota-help-ar{transform:translateX(4px)}
/* A11 (Henrique 27/07): a seta virou BOTÃO. Uma seta solta sinaliza "tem mais
   conteúdo aqui" — foi por isso que ele clicou esperando que "descesse uma resposta".
   Um retângulo com rótulo e verbo ("Falar no WhatsApp") promete a ação certa: sair
   para uma conversa. Fica no verde de ação da casa, e não no verde do WhatsApp, para
   não parecer um selo de terceiro dentro do cartão. */
.rota-help-bt{flex:none;display:inline-flex;align-items:center;gap:9px;
  padding:13px 21px;border-radius:100px;background:var(--lima-ink);color:#fff;
  font-family:'Montserrat',sans-serif;font-weight:700;font-size:13.5px;letter-spacing:.2px;
  box-shadow:0 4px 12px rgba(11,61,44,.18);
  transition:background .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease)}
.rota-help-bt i{font-size:16px}
.rota-help:hover .rota-help-bt{background:var(--verde);transform:translateY(-1px);
  box-shadow:0 7px 18px rgba(11,61,44,.26)}
@media(max-width:640px){
  /* empilhado, o botão vira a última linha do cartão e ocupa a largura toda:
     alvo de toque grande e ordem de leitura texto → ação. */
  .rota-help{flex-wrap:wrap}
  .rota-help-bt{flex:1 1 100%;justify-content:center}
}
@media(max-width:560px){.rota-help{align-items:flex-start}.rota-help-ar{display:none}}
@media(prefers-reduced-motion:reduce){.rota-help,.rota-help-ar{transition:none}.rota-help:hover{transform:none}}

/* ===========================================================================
   AS SOLUÇÕES — "Corte do lote" (prancha técnica de escolha)
   Substitui o bento de 3 cards iguais. Usa só tokens do design system.
   Sem JS: o realce é 100% CSS (:has). Sem :has, tudo continua legível.
   Arquivo: css/lote.css
   =========================================================================== */
.lote{--lote-agua:var(--azul);--lote-esg:var(--lima-ink)}

.lote-prancha{
  margin-top:clamp(30px,4vw,44px);background:#fff;
  border:1px solid rgba(11,61,44,.10);border-radius:22px;
  padding:clamp(16px,2.4vw,30px);
  box-shadow:0 18px 50px -34px rgba(11,61,44,.55)
}

/* ---------- o desenho ---------- */
.lote-fig{margin:0;overflow-x:auto;overscroll-behavior-x:contain}
.lote-canvas{
  position:relative;min-width:560px;aspect-ratio:1200/560;
  border:1px solid rgba(11,61,44,.09);border-radius:14px;overflow:hidden;
  background-image:
    linear-gradient(rgba(11,61,44,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(11,61,44,.045) 1px,transparent 1px),
    linear-gradient(180deg,rgba(0,113,227,.05),rgba(0,113,227,0) 54%);
  background-size:28px 28px,28px 28px,100% 100%
}
.lote-canvas svg{width:100%;height:100%;display:block}

/* traços — tudo herda currentColor do grupo.
   Nomes curtos (.lp/.lh/.lz) ficam ESCOPADOS em .lote-canvas p/ não colidir
   com nenhum outro componente do site. */
.lote-canvas .lp{stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.lote-canvas .lp-hair{stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.lote-canvas .lp-alt{stroke-dasharray:8 7}
.lote-canvas .lh{fill:currentColor;stroke:none}
.lote-canvas .lote-tank{stroke:currentColor;stroke-width:2.6}

.lote-canvas .lote-st{color:var(--verde)}
.lote-canvas .lote-tr{color:var(--muted)}
.lote-canvas .lote-rain{color:var(--lote-agua);opacity:.42}
.lote-canvas .lz-cisterna{color:var(--lote-agua)}
.lote-canvas .lz-sate,.lote-canvas .lz-ecoted{color:var(--lote-esg)}
.lote-canvas .lz{transition:opacity .35s var(--ease)}

/* ---------- balões e micro-rótulos sobre o desenho ---------- */
.lote-pin,.lote-or,.lote-note{
  position:absolute;left:var(--x);top:var(--y);
  transform:translate(-50%,-50%);pointer-events:none;
  font-family:'Montserrat',sans-serif
}
.lote-pin{
  width:clamp(22px,2vw,28px);height:clamp(22px,2vw,28px);border-radius:50%;
  display:grid;place-items:center;font-weight:800;font-size:clamp(11px,1.05vw,13px);
  background:#fff;color:var(--c);border:2px solid var(--c);
  box-shadow:0 3px 10px -3px rgba(11,61,44,.4);
  transition:opacity .3s var(--ease),transform .3s var(--ease),background .3s var(--ease),color .3s var(--ease)
}
.lote-pin[data-t=cisterna]{--c:var(--lote-agua)}
.lote-pin[data-t=sate],.lote-pin[data-t=ecoted]{--c:var(--lote-esg)}

.lote-or{
  font-weight:700;font-size:11px;color:var(--muted);background:#fff;
  border:1px dashed rgba(11,61,44,.3);border-radius:100px;padding:2px 9px
}
.lote-note{
  font-weight:700;font-size:10px;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--c);background:#fff;padding:2px 7px;border-radius:4px;white-space:nowrap;
  transition:opacity .3s var(--ease)
}
.lote-note[data-t=cisterna]{--c:var(--lote-agua)}
.lote-note[data-t=sate],.lote-note[data-t=ecoted]{--c:var(--lote-esg)}

/* ---------- realce cruzado legenda <-> desenho (CSS puro, sem JS) ---------- */
.lote-prancha:has(.rota-row:is(:hover,:focus-within)) :is(.lz,.lote-pin,.lote-note){opacity:.18}

.lote-prancha:has(.rota-row[data-t=cisterna]:is(:hover,:focus-within)) :is(.lz-cisterna,.lote-pin[data-t=cisterna],.lote-note[data-t=cisterna]){opacity:1}
.lote-prancha:has(.rota-row[data-t=sate]:is(:hover,:focus-within)) :is(.lz-sate,.lote-pin[data-t=sate],.lote-note[data-t=sate]){opacity:1}
.lote-prancha:has(.rota-row[data-t=ecoted]:is(:hover,:focus-within)) :is(.lz-ecoted,.lote-pin[data-t=ecoted],.lote-note[data-t=ecoted]){opacity:1}

/* a alternativa escolhida "resolve": tracejado vira contínuo */
.lote-prancha:has(.rota-row[data-t=sate]:is(:hover,:focus-within)) .lz-sate .lp-alt,
.lote-prancha:has(.rota-row[data-t=ecoted]:is(:hover,:focus-within)) .lz-ecoted .lp-alt{stroke-dasharray:none;stroke-width:3.2}

.lote-prancha:has(.rota-row[data-t=cisterna]:is(:hover,:focus-within)) .lote-pin[data-t=cisterna],
.lote-prancha:has(.rota-row[data-t=sate]:is(:hover,:focus-within)) .lote-pin[data-t=sate],
.lote-prancha:has(.rota-row[data-t=ecoted]:is(:hover,:focus-within)) .lote-pin[data-t=ecoted]{
  transform:translate(-50%,-50%) scale(1.16);background:var(--c);color:#fff
}

.lote-cap{margin-top:12px;font-size:11.5px;line-height:1.5;color:var(--muted);font-weight:300}
.lote-scroll{display:none;font-size:11.5px;color:var(--muted);text-align:center;margin-top:10px}
.lote-scroll i{color:var(--azul)}

/* ---------- MESCLA: o índice editorial É a legenda do corte ----------------
   O realce cruzado acima aponta p/ `.rota-row` (não mais p/ a legenda própria do
   corte, que foi descartada). `:focus-within` no lugar de `:focus-visible`: o
   foco cai no <a> DENTRO da linha, então o :has precisa olhar o ancestral.
   Sem `:has()` (~3% dos browsers) nada acende — desenho e índice seguem legíveis. */
.lote .rota{margin-top:clamp(26px,3vw,38px)}
.lote .rota-row{cursor:default}
/* item de grid tem min-width:auto: sem isto o nome grande ("Cisterna Pronta" a
   ~32px + a tag A) fixa o min-content da coluna e a PÁGINA passa a rolar de lado
   no mobile (440px num viewport de 375). Mesma armadilha do .split .grid. */
.rota-c1,.rota-c2{min-width:0}
.rota-name a{min-width:0;overflow-wrap:anywhere}
/* tag A/B/C: costura visual entre a linha do índice e o balão no desenho */
.rota-tag{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;
  margin-right:10px;vertical-align:middle;flex:none;
  font-family:'Montserrat',sans-serif;font-weight:800;font-size:11px;
  background:#fff;color:var(--ac);border:2px solid var(--ac);
  transition:background .3s var(--ease),color .3s var(--ease),transform .3s var(--ease)}
.rota-primary .rota-tag{width:26px;height:26px;font-size:12.5px;margin-right:12px}
.rota-row:is(:hover,:focus-within) .rota-tag{background:var(--ac);color:#fff;transform:scale(1.1)}
.rota-name{display:flex;align-items:center}
@media(prefers-reduced-motion:reduce){
  .rota-tag{transition:none}
  .rota-row:is(:hover,:focus-within) .rota-tag{transform:none}
}
/* mobile: o corte rola dentro do próprio container — a página NUNCA rola de lado */
@media(max-width:720px){
  .lote-scroll{display:block}
  .lote-prancha{padding:14px}
}

/* ===========================================================================
   AS SOLUÇÕES — "O corte gruda" (rev03)
   Corrige 2 defeitos reportados na rev02:
   1. o realce era INVISÍVEL: o corte ficava acima da viewport ao percorrer o
      índice. Agora `.lote-fig` é sticky -> o desenho fica SEMPRE em cena.
   2. mobile: o corte tinha min-width:560px e era ARRASTÁVEL dentro da figure,
      e no toque não existe :hover (o <a> esticado navegava). Agora o corte cabe
      inteiro (zero arrasto) e no TOQUE quem acende a rota é a ROLAGEM (scroll-spy
      em js/lote.js -> .is-on). Sem JS: nada acende, tudo continua legível.
   MEDIDO em Chrome real (não chutado):
   - o header NÃO tem 76px nem altura fixa: 119px parado, 105-109px depois de rolar.
     Nesta seção ele está SEMPRE rolado -> o corte pina em ~105. Ver --lote-top.
   - `body{overflow-x:hidden}` NÃO quebra este sticky (testado: pina exato ao longo
     de 750px de rolagem). Nada global foi tocado. Obs.: a nota contrária em
     empresa.css vale p/ aquele caso, não p/ este.
   - ao medir, lembre que `.reveal` começa com transform:translateY(22px): medir
     antes de assentar dá 22px a mais e parece que o sticky está furado.
   =========================================================================== */
.lote{
  /* O corte encosta na barriga do header — folga vira FRESTA por onde o índice passa
     correndo (pego em screenshot). O respiro vem do padding-top do .lote-fig, que é
     branco e tampa a fresta.
     O header NÃO tem altura fixa: 119px parado, ~105-109px depois de rolar
     (.is-dark troca padding 34->26) e varia com a largura. js/lote.js mede ao vivo
     e escreve --eco-hdr-h. O fallback SEM JS é 104px de propósito: um pouco MENOR
     que o menor header real medido (105), então o corte entra 1-5px POR BAIXO do
     header (que é z-index 60 e tampa) em vez de deixar fresta. O -1px mata costura
     de subpixel. Errar para baixo é invisível; errar para cima é uma fresta. */
  --lote-top:calc(var(--eco-hdr-h,104px) - 1px);
  /* teto de altura do corte: ele é landscape (15/7) e não pode comer a tela */
  --lote-h:clamp(190px,40vh,430px)
}

/* ---------- o corte gruda ---------- */
.lote-fig{
  position:sticky;top:var(--lote-top);z-index:2;
  overflow:visible;                 /* mata o overflow-x:auto: não há mais o que arrastar */
  background:#fff;                  /* o índice desliza POR BAIXO do corte */
  padding:12px 0 14px;border-bottom:1px solid rgba(11,61,44,.08)
}
/* largura derivada do TETO de altura: mantém o box em 1200/560 exatos.
   (limitar por max-height letterboxaria o SVG e os pins — que são % do BOX —
   sairiam do lugar. Por isso o teto é aplicado na LARGURA.) */
.lote-canvas{
  min-width:0;                      /* mata o min-width:560px -> zero arrasto no mobile */
  width:min(100%,calc(var(--lote-h) * 15 / 7));
  margin-inline:auto
}
.lote-scroll{display:none !important}  /* "arraste o corte": virou mentira, nada arrasta */

/* ---------- o realce também atende ao scroll-spy (.is-on), não só :hover ---------- */
.lote-prancha:has(.rota-row:is(:hover,:focus-within,.is-on)) :is(.lz,.lote-pin,.lote-note){opacity:.18}
.lote-prancha:has(.rota-row[data-t=cisterna]:is(:hover,:focus-within,.is-on)) :is(.lz-cisterna,.lote-pin[data-t=cisterna],.lote-note[data-t=cisterna]){opacity:1}
.lote-prancha:has(.rota-row[data-t=sate]:is(:hover,:focus-within,.is-on)) :is(.lz-sate,.lote-pin[data-t=sate],.lote-note[data-t=sate]){opacity:1}
.lote-prancha:has(.rota-row[data-t=ecoted]:is(:hover,:focus-within,.is-on)) :is(.lz-ecoted,.lote-pin[data-t=ecoted],.lote-note[data-t=ecoted]){opacity:1}
.lote-prancha:has(.rota-row[data-t=sate]:is(:hover,:focus-within,.is-on)) .lz-sate .lp-alt,
.lote-prancha:has(.rota-row[data-t=ecoted]:is(:hover,:focus-within,.is-on)) .lz-ecoted .lp-alt{stroke-dasharray:none;stroke-width:3.2}
.lote-prancha:has(.rota-row[data-t=cisterna]:is(:hover,:focus-within,.is-on)) .lote-pin[data-t=cisterna],
.lote-prancha:has(.rota-row[data-t=sate]:is(:hover,:focus-within,.is-on)) .lote-pin[data-t=sate],
.lote-prancha:has(.rota-row[data-t=ecoted]:is(:hover,:focus-within,.is-on)) .lote-pin[data-t=ecoted]{
  transform:translate(-50%,-50%) scale(1.16);background:var(--c);color:#fff
}
/* a linha ativa no toque se comporta como a linha sob o mouse */
.rota-row.is-on{background:rgba(255,255,255,.72)}
.rota-row.is-on::before{transform:scaleY(1)}
.rota-row.is-on .rota-tag{background:var(--ac);color:#fff}
.rota-row.is-on .rota-name{color:var(--ac)}

/* ---------- mobile: o corte cabe inteiro, então o traço precisa engrossar ----------
   em 375 o corte fica ~307px de largura = escala .26 do viewBox: o stroke 2.6
   renderizaria a .67px (quase invisível). Valores em unidade de viewBox. */
@media(max-width:720px){
  .lote-prancha{padding:14px}
  .lote-canvas .lp{stroke-width:6}
  .lote-canvas .lp-hair{stroke-width:4}
  .lote-canvas .lote-tank{stroke-width:6}
  .lote-canvas .lp-alt{stroke-dasharray:14 11}
  .lote-prancha:has(.rota-row:is(:hover,:focus-within,.is-on)) .lz-sate .lp-alt,
  .lote-prancha:has(.rota-row:is(:hover,:focus-within,.is-on)) .lz-ecoted .lp-alt{stroke-width:7}
  .lote-pin{width:17px;height:17px;font-size:9px;border-width:1.5px}
  .lote-note{font-size:8px;letter-spacing:.6px;padding:1px 4px}
  .lote-or{font-size:8px;padding:1px 6px}
  .lote-fig{padding-bottom:10px}
  .lote-cap{margin-top:8px;font-size:10.5px}
}
@media(prefers-reduced-motion:reduce){
  .lote-canvas .lz,.lote-pin,.lote-note{transition:none}
  .rota-row.is-on .rota-tag{transform:none}
}
/* a dica muda com o aparelho: "passe o mouse" é mentira no toque.
   `hover:none` sem JS. Ambas são a copy que já existia, reescrita p/ o toque. */
.rota-hint-touch{display:none}
@media(hover:none){
  .rota-hint-hover{display:none}
  .rota-hint-touch{display:inline}
}


/* =================== CURSOR ECOCASA (r2 "moderno") ===================
   Refeito 17/07 (Sérgio): a seta recolorida lia como "cursor de Windows pintado".
   Agora e a linguagem dos sites modernos: PONTO no estado normal, ANEL + gota
   no clicavel. Continua 100% CSS (SVG em data-URI): sem JS, sem lag, sem
   "cursor follower" que arrasta atras do mouse.

   POR QUE VERDE COM CONTORNO BRANCO: o site tem secao CLARA (--paper) e ESCURA
   (hero, .frase). Verde sozinho sumiria no hero; branco sozinho no paper. O
   contorno branco e o truque do cursor nativo do SO — legivel nos dois.

   HOTSPOT = O CENTRO nos dois estados (12,12 e 16,16): ponto e anel apontam
   pelo centro, e trocar de imagem no hover nao desloca o alvo do clique.

   ESTADO CLICAVEL: anel verde debruado de branco + a gota OFICIAL no miolo
   (mesmo path do --gv-gota e do SDF do shader da gota volumetrica).

   LIMITES ASSUMIDOS (herdados do r1):
   - Safari nao suporta cursor SVG: fallback depois da virgula (auto/pointer).
   - `cursor` e herdada; inputs de texto voltam pra `auto` logo abaixo (I-beam).
   - Regras com especificidade maior (.eco-map3d.is-hover, .cena-st.tech)
     seguem com a maozinha nativa.
   - Touch nao tem cursor: `pointer:coarse` desliga a peca.
   - 32x32 e o teto seguro de tamanho de cursor nos browsers — nao subir. */
/* Henrique, 29/07/2026: "quer o cursor normal padrão". As duas peças de cursor
   desenhado (a bolinha da marca aqui e o anel+gota nos clicáveis, logo abaixo)
   saíram. O resto do bloco fica documentado porque as regras de exceção — campo
   de texto com I-beam, mapa 3D com mãozinha — continuam valendo com o padrão. */
html{ cursor: auto }

/* clicaveis: anel + gota. `:any-link`/`:enabled` sobem a especificidade p/ (0,1,1)
   e vencem as classes que ja cravavam cursor:pointer (0,1,0). */
a:any-link, button:enabled, [role="button"], summary, label[for],
input[type="submit"]:enabled, input[type="checkbox"]:enabled, input[type="radio"]:enabled,
select:enabled, .b1, .b2, .eco-orc, .foot-orc, .cform-send{
  cursor: pointer;
}

/* campo de texto NUNCA perde o I-beam — `auto` deixa o UA decidir */
input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
textarea, [contenteditable]{ cursor: auto }

button:disabled, input:disabled, .disabled, [aria-disabled="true"]{ cursor: not-allowed }

@media (pointer: coarse){
  html, a:any-link, button:enabled, [role="button"], summary, label[for],
  select:enabled, .b1, .b2, .eco-orc, .foot-orc, .cform-send{ cursor: auto }
}

/* =================== FMT variante TARJA + 3 BLOCOS (.fmt-row) ===================
   Reunião Henrique 17/07: "jogar esse descritivo horizontal e depois os três
   blocos". O acordeão vertical colapsava cada foto numa fatia de ~80px — "essa
   imagem tá difícil de entender, ela é grande pra cima". Agora: o manifesto vira
   TARJA (texto | lista lado a lado) e os 3 formatos ficam LADO A LADO, IGUAIS,
   sem expansão — o efeito aprovado é só o zoom da imagem no hover (regra base).
   Variante em classe própria de propósito (não disputa especificidade). */
.fmt.fmt-row .fmt-grid{display:flex;flex-direction:column;gap:30px}
.fmt.fmt-row .fmt-intro{display:grid;grid-template-columns:1.25fr .95fr;column-gap:clamp(28px,4vw,60px);align-items:center}
.fmt.fmt-row .fmt-intro>*{grid-column:1}
.fmt.fmt-row .fmt-intro .fmt-list{grid-column:2;grid-row:1/span 9;align-self:center;margin-top:0}
/* flex:0 0 auto obrigatório: a base tem flex:1 (basis 0) e, num pai coluna sem
   altura fixa, o basis 0 IGNORA o height e colapsa o bloco no min-height (80px) */
.fmt.fmt-row .fmt-xp{flex:0 0 auto;flex-direction:row;min-height:0;height:clamp(230px,26vw,330px)}
.fmt.fmt-row .fmt-xp-panel{flex:1 1 0;min-width:0}
/* mata a expansão do acordeão (as regras base têm :not/:hover de alta especificidade) */
.fmt.fmt-row .fmt-xp-panel:hover,
.fmt.fmt-row .fmt-xp-panel:focus-visible{flex:1 1 0}
.fmt.fmt-row .fmt-xp:not(:hover):not(:focus-within) .fmt-xp-panel:first-child{flex:1 1 0}
/* descrição sempre visível: sem estado expandido, esconder o texto = perder info */
.fmt.fmt-row .fmt-xp-cap p{opacity:1;transform:none}
@media(max-width:860px){
  .fmt.fmt-row .fmt-intro{grid-template-columns:1fr}
  .fmt.fmt-row .fmt-intro .fmt-list{grid-column:1;grid-row:auto;margin-top:20px}
  .fmt.fmt-row .fmt-xp{flex-direction:column;height:auto}
  .fmt.fmt-row .fmt-xp-panel{min-height:210px}
}

/* ═══ ACABAMENTO MOBILE (27/07/2026) ═══════════════════════════════════════
   Auditoria com iPhone nas 13 páginas (ecocasa/audita-mobile.py) apontou dois
   padrões: alvos de toque menores que os 44px do guia da Apple/WCAG, e textos
   entre 10,5 e 11,5px — legíveis no monitor, apertados no celular.
   Tudo aqui vive DENTRO da media query: o desktop já foi aprovado e não muda.

   🔴 O prefixo `body` NÃO é enfeite. Metade destes seletores é definida em CSS
   que a página carrega DEPOIS do style.css (produto-extra, produto-3d, orbital,
   empresa, eco-map3d). Media query não soma especificidade: sem o `body`, a
   regra de lá — mesma especificidade, arquivo posterior — continua vencendo, e
   a correção simplesmente não aparece. Foi o que aconteceu na primeira tentativa.

   Um caso ficou de fora de propósito: link solto dentro de parágrafo (137
   ocorrências, ~19px de altura). Forçar 44px ali quebraria o entrelinhamento do
   texto corrido — a regra de alvo de toque vale para controle, não para palavra
   sublinhada no meio de uma frase. */
@media(max-width:767px){
  /* o botão mais tocado do site tinha 19x26 — menos da metade do mínimo */
  body .eco-burger{display:flex;align-items:center;justify-content:center;
    width:46px;height:46px;margin-right:-8px;font-size:24px}
  body .eco-search-btn{width:44px;height:44px}

  /* controles que existem PARA ser tocados */
  body .istep-hot{width:44px;height:44px;font-size:15px}   /* nº da instalação: 28px */
  body .istep-b{min-height:44px}                            /* passo a passo: 40px */
  body .produto-3d-btn{width:44px;height:44px}              /* zoom do 3D: 34px */
  body .eco-map3d-btn{width:44px;height:44px}               /* mapa: 36px */
  body .cena-toggle button{min-height:44px}                 /* alternar cenário: 33px */

  /* Links de LISTA e de rodapé: 70 ocorrências com ~20px de altura. Aqui o alvo
     grande é seguro — é navegação empilhada, não texto corrido. */
  body .eco-footer li a,body .eco-footer .social a,body .eco-footer .bar a,
  body .rota-name a{min-height:44px;display:inline-flex;align-items:center}
  body .eco-footer .social a{width:44px;height:44px;justify-content:center}

  /* rodapé: telefone e e-mail são o que mais se toca no celular */
  body .contact-line{min-height:44px;display:flex;align-items:center;gap:10px}
  body .foot-orc{min-height:46px}

  /* textos que a auditoria pegou abaixo de 12px */
  body .tl2-desc{font-size:12.5px;line-height:1.55}
  body .pex-v,body .rota-gh-t,body .fmt-kicker{font-size:12.5px}
  body .city,body .pc-tag,body .cat,body .p3d-hint,body div.l{font-size:12px}
  body .orb-go,body .rota-gh-n,body .badge-cat,body .eco-map3d-hint{font-size:12px}
  body .pex-chip .pex-v{font-size:12.5px}   /* (0,2,0) em produto-extra vencia body .pex-v (0,1,1) */

  /* Piso de 12px para o que estava em 10–10,5px: nessa faixa o texto deixa de ser
     lido e passa a ser adivinhado. Os rótulos de apoio em 11–11,5px ficam como
     estão — é a escala aprovada no desktop, e reduzi-la aqui mudaria o desenho
     sem necessidade. Cada seletor repete o caminho da regra original porque
     várias delas têm dois níveis de classe. */
  body .orb-node em,body .emp-pillar-badge span,body .selo .l,body .dep-prod,
  body .dgm3 .dg-core span,body .dgm3 .dg-lb,body .dg4-kicker,body .lote-cap,
  body .cmp-tag,body .mapc-badge,body .eco-map3d-tip-badge{font-size:12px}

  /* cards de revenda: o link do parceiro tinha 23px de altura */
  body .rev-card a{min-height:44px;display:inline-flex;align-items:center}
}

/* ═══ WHATSAPP: UM SÓ POR PÁGINA ═══════════════════════════════════════════
   O site tem o plugin "WhatsApp Chat by NinjaTeam" ativo desde antes, e o site
   novo traz o próprio botão flutuante — no WordPress apareciam os dois, colados
   no mesmo canto.

   Esconder por CSS em vez de desativar o plugin é de propósito: este arquivo só
   carrega nas páginas do site novo, então o botão do plugin some AQUI e continua
   funcionando no /blog/ e nas páginas de funil (arquivos BIM, e-book), que
   seguem sendo WordPress puro. Desativar o plugin deixaria essas sem nenhum
   WhatsApp — o efeito colateral que a gente não quer. */
.wa__btn_popup,.wa__popup_chat_box,[class*="wa__"]{display:none!important}