/* board final v2: mapa 3D do Brasil (extrusão) em painel escuro + card LIQUID GLASS ao lado.
   Fix de leitura (foto 2): card fica sobre fundo ESCURO com conteúdo BRANCO — contraste alto. */
.mapbr-panel{position:relative;margin-top:34px;border-radius:30px;padding:40px 34px;overflow:hidden;
  background:radial-gradient(120% 130% at 15% 0%,#0f5a44 0%,#0a3a4e 42%,#06283f 100%)}
.mapbr-panel::before{content:"";position:absolute;inset:0;opacity:.5;pointer-events:none;
  background:radial-gradient(600px 300px at 80% 110%,rgba(63,160,255,.18),transparent 70%),
             radial-gradient(500px 260px at 5% -10%,rgba(139,195,74,.16),transparent 70%)}
/* painel cujo CONTEÚDO é o mapa largo (revendas / home): moldura fina, o mapa é o protagonista.
   `:has()` puro — sem suporte, cai no padding padrão e só fica mais folgado. */
.mapbr-panel:has(.eco-map3d--wide){padding:20px 20px 28px}

/* ---- faixa "Atendemos em todo o Brasil" da HOME (index.html) --------------
   Substituiu o selo .c2badge (PNG chapado do mapa) por este painel com o mapa 3D. */
.c2map{margin-top:clamp(30px,4vw,44px)}
.c2map-head{position:relative;z-index:2;text-align:center;max-width:640px;margin:0 auto 18px}
.c2map-badge{display:inline-flex;align-items:center;gap:10px;font-family:'Montserrat',sans-serif;font-weight:800;
  font-size:clamp(13px,1.5vw,15px);letter-spacing:1.6px;text-transform:uppercase;color:#fff;
  background:rgba(255,255,255,.08);border:1px solid rgba(169,207,91,.35);border-radius:100px;padding:9px 20px;
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.c2map-badge i{color:var(--lima-soft);font-size:15px}
.c2map-badge em{color:var(--lima-soft);font-style:normal}
.c2map-sub{margin-top:12px;font-family:'Poppins',sans-serif;font-weight:300;font-size:13.5px;line-height:1.6;
  color:rgba(255,255,255,.78)}
.c2map-sub b{font-weight:600;color:#fff}
@media(max-width:560px){.c2map-head{margin-bottom:12px}.c2map-sub{font-size:12.5px}}
.mapbr{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:30px;align-items:center}
.mapbr>*{min-width:0}
/* MAIOR + perspectiva p/ o tilt 3D */
.mapbr-svg{position:relative;width:100%;max-width:600px;margin:0 auto;perspective:1100px}
.map-tilt{position:relative;transform-style:preserve-3d;transition:transform .22s ease-out;will-change:transform}
/* mapa REAL do Brasil (SVG com estados) + 3D por drop-shadow empilhado */
.mapbr-svg .map3d{width:100%;height:auto;display:block;
  filter:drop-shadow(0 1.5px 0 #3c7d29) drop-shadow(0 3px 0 #367123) drop-shadow(0 4.5px 0 #30651f)
         drop-shadow(0 6px 0 #2a591b) drop-shadow(0 7.5px 0 #244d17) drop-shadow(0 18px 14px rgba(0,0,0,.5))}
/* estados interativos */
.br-st{transition:fill .22s var(--ease),filter .22s;cursor:pointer}
.br-st:hover{fill:#CBF285 !important}
.br-st.rev{cursor:pointer}
.br-st.rev:hover,.br-st.active{fill:#9AD2FF !important}
.br-st.rev{animation:revpulse 3.4s ease-in-out infinite}
@keyframes revpulse{0%,100%{filter:none}50%{filter:brightness(1.12)}}
@media(prefers-reduced-motion:reduce){.br-st.rev{animation:none}.map-tilt{transition:none}}
/* pinos 3D — “fincados” na superfície */
.mapbr-pin{position:absolute;transform:translate(-50%,-100%);cursor:pointer;font-size:24px;z-index:4;
  color:#3FA0FF;filter:drop-shadow(0 5px 3px rgba(0,0,0,.5));transition:transform .25s cubic-bezier(.2,.9,.3,1)}
.mapbr-pin.esg{color:#A6E05A}
.mapbr-pin::after{content:"";position:absolute;left:50%;bottom:-3px;width:14px;height:5px;border-radius:50%;
  background:rgba(0,0,0,.4);transform:translateX(-50%);filter:blur(1.5px)}
.mapbr-pin:hover,.mapbr-pin.on{transform:translate(-50%,-118%) scale(1.28);z-index:6}
/* card LIQUID GLASS (assets liquid-glass.css) — conteúdo branco, alto contraste */
.mapbr-info{align-self:center}
.mapbr-info.liquid-glass{border-radius:24px;padding:30px 30px}
.mapbr-badge{display:inline-flex;align-items:center;gap:8px;font-family:'Montserrat';font-weight:800;font-size:11.5px;
  letter-spacing:.6px;text-transform:uppercase;color:#EAF6FF;background:rgba(63,160,255,.28);
  padding:6px 13px;border-radius:100px;margin-bottom:14px;backdrop-filter:blur(2px)}
.mapbr-card h4{font-family:'Montserrat';font-weight:800;font-size:20px;color:#fff;margin-bottom:5px;line-height:1.2}
.mapbr-card .loc{font-size:12.5px;color:rgba(255,255,255,.8);font-weight:600;margin-bottom:14px}
.mapbr-card .loc i{color:#A6E05A}
.mapbr-card .quote{font-family:'Poppins';font-size:14px;line-height:1.6;color:rgba(255,255,255,.92);font-style:italic;
  border-left:3px solid #A6E05A;padding-left:14px;margin-bottom:14px}
.mapbr-card .tech{display:inline-block;font-size:11.5px;font-weight:700;color:#0a3a2c;background:#A6E05A;padding:5px 12px;border-radius:100px}
.mapbr-illus{font-size:11px;color:rgba(255,255,255,.6);margin-top:16px;display:flex;align-items:center;gap:6px}
/* ==== CARD DO PROJETO (modo atuação) — o clique num pin preenche isto ========
   Por que existe: o tooltip é pointer-events:none e some ao tirar o mouse — não
   serve p/ ler descritivo nem existe no celular. O board pedia "pins diversos
   para abrir imagens e descritivos": a imagem e o descritivo vivem AQUI.
   Conteúdo BRANCO sobre painel escuro (mesma doutrina de leitura do resto). */
.mapc{position:relative;z-index:2;align-self:center;border-radius:20px;overflow:hidden;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:0 26px 60px -34px rgba(0,0,0,.7);
  opacity:0;transform:translateY(10px);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.mapc.on{opacity:1;transform:none}
.mapc-fig{position:relative;aspect-ratio:16/10;overflow:hidden;background:rgba(0,0,0,.25)}
.mapc-fig img{width:100%;height:100%;object-fit:cover;display:block}
.mapc-fig::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(6,40,63,.55) 100%)}
.mapc-tx{padding:18px 20px 20px}
.mapc-city{display:inline-flex;align-items:center;gap:7px;font-family:'Montserrat',sans-serif;font-weight:800;
  font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:#A6E05A}
.mapc-title{font-family:'Montserrat',sans-serif;font-weight:700;font-size:18px;line-height:1.25;color:#fff;margin:8px 0 0}
.mapc-desc{font-size:13.5px;line-height:1.6;color:rgba(255,255,255,.8);margin:10px 0 0}
.mapc-link{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-family:'Montserrat',sans-serif;
  font-weight:700;font-size:13px;color:#3FA0FF;transition:gap .25s var(--ease)}
.mapc-link:hover{gap:12px}
.mapc-badge{display:block;margin-top:14px;font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
  color:rgba(255,255,255,.55)}
.mapc-badge::before{content:"● ";color:#E0A800}
/* estado zero: instrução, some no 1º clique (o .on troca o innerHTML inteiro) */
.mapc-vazio{padding:34px 22px;text-align:center}
.mapc-vazio i{font-size:26px;color:rgba(166,224,90,.7)}
.mapc-vazio p{margin-top:12px;font-size:13.5px;line-height:1.6;color:rgba(255,255,255,.78)}
@media(max-width:860px){.mapc{margin-top:6px}}
@media(prefers-reduced-motion:reduce){.mapc{transition:none}}

/* ==== DEPOIMENTOS (board: "clientes fake para exemplificação, incluir depoimentos")
   Regra da casa: o LAYOUT vai pronto, o conteúdo vai MARCADO como exemplo — review
   fabricado não sobe como genuíno. O aviso e a tag .dep-tag são parte do design
   enquanto o cliente não manda os depoimentos reais; some os dois na troca. ==== */
.dep{margin-top:44px}
.dep-aviso{display:flex;align-items:flex-start;gap:12px;max-width:820px;margin:0 auto 26px;
  background:#FFF8E6;border:1px solid #F0D999;border-left:4px solid #E0A800;border-radius:0 14px 14px 0;
  padding:14px 18px;font-size:13px;line-height:1.55;color:#6a5320}
.dep-aviso i{color:#E0A800;font-size:15px;margin-top:2px;flex:none}
.dep-aviso b{color:#4a3a12}
/* ---- CARROSSEL AUTOMÁTICO + CARDS 3D COM PARALLAX HÍDRICO ------------------
   Sérgio (16/07): "um monte de cards 3D com efeito parallax personalizado pra
   ECOCASA", andando sozinho pra lateral.

   Loop infinito sem salto: a fita é clonada pelo JS (2 jogos idênticos) e anda
   até -50%. Por isso os cards usam MARGIN-RIGHT e a fita NÃO usa `gap`: com gap,
   metade da fita cai no meio de um vão e o loop pula meio gap a cada volta.

   `.is-live` (posto pelo JS depois de clonar) é que libera a animação — mesma
   doutrina do stepper.js. Sem JS a fita não é clonada, então NÃO pode animar
   (ela sairia da tela e deixaria o vazio): fica uma fita rolável com snap.       */
.dep-car{position:relative;margin-top:4px;perspective:1200px;
  /* respiro p/ o card levantar/inclinar sem ser cortado pelo overflow */
  padding:26px 0 30px;
  /* fita “sangra” pras bordas do wrap e some em fade, em vez de cortar seco */
  margin-inline:calc(clamp(24px,5vw,80px) * -1);
  padding-inline:clamp(24px,5vw,80px);
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.dep-track{display:flex;align-items:stretch;width:max-content;transform-style:preserve-3d}
.dep-car.is-live .dep-track{animation:depMarquee var(--dep-dur,64s) linear infinite}
@keyframes depMarquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
/* pausa: no hover/foco o usuário quer LER (e é quando o tilt 3D faz sentido) */
.dep-car.is-live:hover .dep-track,
.dep-car.is-live:focus-within .dep-track{animation-play-state:paused}
/* fora de tela: não queima CPU rodando esteira que ninguém vê (IO no dep-carousel.js) */
.dep-car.is-off .dep-track{animation-play-state:paused}
/* sem JS: fita rolável na mão */
.dep-car:not(.is-live){overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.dep-car:not(.is-live) .dep-card{scroll-snap-align:center}

.dep-card{position:relative;flex:none;width:clamp(280px,78vw,340px);margin-right:22px;
  background:#fff;border:1px solid var(--pale);border-radius:20px;padding:26px 24px 22px;
  box-shadow:0 14px 36px -26px rgba(11,61,44,.3);
  overflow:hidden;isolation:isolate;
  transform-style:preserve-3d;
  transform:perspective(900px) rotateY(var(--rx,0deg)) rotateX(var(--ry,0deg)) translateZ(0);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .5s var(--ease)}
.dep-card.is-tilt{transition:transform .12s linear,box-shadow .4s var(--ease),border-color .4s var(--ease);
  box-shadow:0 30px 60px -30px rgba(11,61,44,.5);border-color:rgba(114,159,40,.4)}
/* aspas decorativas: camada mais funda do parallax */
.dep-card::before{content:"\201C";position:absolute;top:2px;right:18px;font-family:'Montserrat',sans-serif;
  font-size:64px;line-height:1;color:rgba(114,159,40,.16);pointer-events:none;
  transform:translate3d(calc(var(--px,0) * -14px),calc(var(--py,0) * -10px),-40px)}

/* ---- parallax HÍDRICO: menisco de água no fundo do card -------------------- */
.dep-water{position:absolute;left:-25%;right:-25%;bottom:-42%;height:78%;z-index:-1;pointer-events:none;
  border-radius:50% 50% 42% 42%/38% 38% 62% 62%;
  background:radial-gradient(120% 90% at 50% 0%,rgba(0,113,227,.13),rgba(114,159,40,.10) 55%,transparent 78%);
  transform:translate3d(calc(var(--px,0) * -20px),calc(var(--py,0) * -12px),-60px) scale(1.06)}
.dep-card::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--azul),var(--lima),transparent);opacity:0;
  transition:opacity .45s var(--ease)}
.dep-card.is-tilt::after{opacity:.65}
/* brilho especular que segue o ponteiro (a "água pega a luz") */
.dep-sheen{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;
  background:radial-gradient(340px 240px at calc(var(--mx,50%)) calc(var(--my,50%)),
             rgba(255,255,255,.55),rgba(255,255,255,.12) 42%,transparent 68%);
  transition:opacity .4s var(--ease);mix-blend-mode:overlay}
.dep-card.is-tilt .dep-sheen{opacity:1}

/* ---- camadas do conteúdo: cada uma numa profundidade ---------------------- */
.dep-tag{position:relative;display:inline-block;font-family:'Montserrat',sans-serif;font-weight:800;font-size:9.5px;
  letter-spacing:1.2px;text-transform:uppercase;color:#8a6d1f;background:#FFF3D4;border:1px solid #EBD79A;
  border-radius:100px;padding:3px 9px;transform:translate3d(calc(var(--px,0) * 8px),calc(var(--py,0) * 6px),34px)}
.dep-card blockquote{position:relative;margin:14px 0 0;font-size:14.5px;line-height:1.7;color:#4a5a50;
  transform:translate3d(calc(var(--px,0) * 5px),calc(var(--py,0) * 4px),18px)}
.dep-card figcaption{position:relative;display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;
  margin-top:18px;padding-top:16px;border-top:1px solid var(--pale);
  transform:translate3d(calc(var(--px,0) * 7px),calc(var(--py,0) * 5px),26px)}
.dep-av{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:rgba(11,61,44,.06);color:var(--muted);font-size:15px;transition:background .4s,color .4s}
.dep-card.is-tilt .dep-av{background:rgba(114,159,40,.16);color:var(--lima-ink)}
.dep-id{display:flex;flex-direction:column;min-width:0}
.dep-id b{font-family:'Montserrat',sans-serif;font-weight:700;font-size:14px;color:var(--verde)}
.dep-id span{font-size:11.5px;color:var(--muted);margin-top:2px}
.dep-prod{grid-column:1/3;justify-self:start;font-family:'Montserrat',sans-serif;font-weight:700;font-size:10.5px;
  letter-spacing:.8px;text-transform:uppercase;border-radius:100px;padding:5px 11px}
.dep-prod.agua{background:rgba(0,113,227,.10);color:var(--azul)}
.dep-prod.esg{background:rgba(114,159,40,.14);color:var(--lima-ink)}

@media(max-width:560px){
  .dep-car{padding:20px 0 24px}
  .dep-card{padding:22px 20px 18px}
  .dep-card blockquote{font-size:13.5px}
}
/* motion reduzido: sem esteira, sem tilt — vira fita rolável e estática */
@media(prefers-reduced-motion:reduce){
  .dep-car.is-live .dep-track{animation:none}
  .dep-car{overflow-x:auto;scroll-snap-type:x mandatory}
  .dep-card{scroll-snap-align:center;transform:none;transition:none}
  .dep-card.is-tilt{transform:none}
  .dep-card::before,.dep-water,.dep-tag,.dep-card blockquote,.dep-card figcaption{transform:none}
  .dep-sheen{display:none}
}

.mapbr-legend{display:flex;gap:20px;justify-content:center;margin-top:24px;position:relative;z-index:2;font-size:12.5px;color:rgba(255,255,255,.82)}
.mapbr-legend span{display:inline-flex;align-items:center;gap:6px}
.mapbr-legend i.agua{color:#3FA0FF}.mapbr-legend i.esg{color:#A6E05A}
@media(max-width:860px){.mapbr{grid-template-columns:minmax(0,1fr);gap:24px}.mapbr-panel{padding:26px 16px}}