/* ============================================================================
   VIPPER HOTEL — CSS do site (complemento ao padrao MAPP Group)
   Aqui ficam SO os blocos novos/ajustados do Vipper. O grosso do layout vem
   de mapp.css + eco.css + eco_mapp_layout.css (ja com a paleta trocada).
   Paleta: vermelho #B12C31 / #8E1F24 / #D34249 · grafite #3A3B3F / #6B6B6B /
   #96979C / prata #D2D3D7
   ========================================================================== */

/* ---------- 1. HEADER: logo + nome ---------- */
.top .top-in{display:flex;align-items:center;gap:18px;min-height:76px}
.top .logo{display:flex;align-items:center;gap:10px;flex:none;overflow:visible}
.top .logo picture,.top .logo img{height:54px;width:auto;max-width:none;object-fit:contain;
  object-position:center;display:block}
.top .lg-txt{display:flex;flex-direction:column;justify-content:center;line-height:1.05}
.top .lg-nome{letter-spacing:.16em;font-weight:800;font-size:17px}
.top .lg-sub{letter-spacing:.11em;text-transform:uppercase;font-size:9.5px;opacity:.8;margin-top:3px}
.top .btn-eco{background:linear-gradient(135deg,#B12C31,#8E1F24)!important;color:#fff!important;
  box-shadow:0 10px 26px rgba(177,44,49,.30)!important}
.top .btn-eco:hover{background:linear-gradient(135deg,#D34249,#B12C31)!important}
.top .btn-wa{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  background:#25D366;color:#fff;flex:none;box-shadow:0 8px 20px rgba(37,211,102,.32)}
.top .btn-wa svg{stroke:#fff;width:20px;height:20px}
.top .tel{color:#3A3B3F;font-weight:700}

/* ---------- 2. HERO = BANNER DO PAINEL (padrao do grupo) ----------
   O banner do painel e uma ARTE PRONTA (1600x600, proporcao 2.667:1) com
   logo, textos e icones desenhados. Por isso:
     - a altura vem da PROPORCAO do banner (nao de um height fixo);
     - a imagem aparece INTEIRA (contain), centralizada, sobre fundo escuro;
     - NAO existe texto sobreposto (a arte ja tem o texto).
   ========================================================================== */
.hero{padding:0!important;margin:0!important;background:#1E1012}
.hb-wrap{position:relative;width:100%;aspect-ratio:1600/600;max-height:82vh;
  overflow:hidden;background:#1E1012}
.hb-slide{position:absolute;inset:0;opacity:0;transition:opacity .7s ease;
  display:flex;align-items:center;justify-content:center;pointer-events:none}
.hb-slide.on{opacity:1;z-index:2}
.hb-slide a{display:block;width:100%;height:100%}
.hb-slide picture{display:block!important;width:100%!important;height:100%!important;
  position:absolute;inset:0}
.hb-slide img{display:block!important;width:100%!important;height:100%!important;
  object-fit:contain!important;object-position:center!important;
  max-width:none!important;max-height:none!important;visibility:visible!important;
  opacity:1!important}
.hb-dots{position:absolute;left:0;right:0;bottom:16px;z-index:4;display:flex;gap:8px;
  justify-content:center}
.hb-dots button{width:30px;height:4px;border:0;border-radius:99px;
  background:rgba(255,255,255,.42);cursor:pointer;transition:.3s}
.hb-dots button.on{background:#fff;width:46px}
@media(max-width:760px){
  /* no celular 2.667:1 fica baixo demais: usa 16:9 com contain */
  .hb-wrap{aspect-ratio:16/9;max-height:none}
  .hb-dots{bottom:10px}
}

/* ---------- 3. RESERVA (barra abaixo do hero) ---------- */
/* UNICA mudanca pedida: o FUNDO cinza da primeira versao.
   Botoes, campos e layout ficam exatamente como estavam. */
.ressec{background:#2E2D2F!important;background-image:none!important;border-top:0;
  padding:26px 0 22px;margin-top:0;position:relative;z-index:5;border-radius:0;box-shadow:none}
body > section.ressec{background:#2E2D2F!important;background-image:none!important}
.res-form{display:grid;grid-template-columns:1.1fr 1.1fr 1fr 1fr auto;gap:12px;align-items:end;
  background:transparent;border:0;border-radius:0;padding:0;box-shadow:none}
.res-form .rf label{display:block;font-size:10.5px;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:#6B6B6B;margin-bottom:7px}
.res-form .rf-iw{display:flex;align-items:center;gap:8px;background:#F9F7F7;border:1px solid #EAE3E4;
  border-radius:12px;padding:0 12px;height:46px;color:#96181D}
.res-form .rf-iw svg{width:16px;height:16px;flex:none}
.res-form input,.res-form select{border:0;background:transparent;height:100%;width:100%;
  font:inherit;font-size:14px;font-weight:600;color:#1D1E21;outline:none;min-width:0}
.res-go{height:46px;padding:0 26px;border-radius:999px;font-weight:800;font-size:13.5px;
  display:inline-flex;align-items:center;gap:8px;letter-spacing:.03em;white-space:nowrap;
  background:linear-gradient(135deg,#B12C31,#8E1F24);color:#fff;border:0;cursor:pointer;
  box-shadow:0 12px 28px rgba(177,44,49,.28);transition:.25s}
.res-go:hover{transform:translateY(-2px);background:linear-gradient(135deg,#D34249,#B12C31)}
.res-hint{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:12px;
  font-size:12px;color:#6B6B6B}
.res-hint svg{width:14px;height:14px;color:#B12C31}
@media(max-width:900px){
  .res-form{grid-template-columns:1fr 1fr;gap:10px;padding:14px}
  .res-go{grid-column:1/-1;justify-content:center}
}
@media(max-width:520px){.res-form{grid-template-columns:1fr}}

/* ==========================================================================
   4. VIDEO / TOUR — duas colunas: texto a esquerda, player a direita.
   CONTRASTE: o titulo e o paragrafo estavam escuros sobre fundo escuro
   (herdados do eco.css) e ficavam ilegiveis. Aqui tudo e' claro.
   ========================================================================== */
.vp-video-sec{background:linear-gradient(150deg,#1E1012 0%,#241416 55%,#3A1A1D 100%);
  color:#fff;padding:clamp(56px,7vw,92px) 0;position:relative;overflow:hidden}
.vp-video-sec::before{content:"";position:absolute;right:-140px;top:-140px;width:520px;height:520px;
  border-radius:50%;background:radial-gradient(circle,rgba(177,44,49,.30),transparent 68%);
  pointer-events:none}

.vp-vid-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(32px,5vw,64px);
  align-items:center;position:relative;z-index:2}

.vp-vid-k{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:800;
  letter-spacing:.18em;text-transform:uppercase;color:#EBA9AD;margin-bottom:16px}
.vp-vid-k svg{width:14px;height:14px;fill:#EBA9AD;stroke:none}

.vp-vid-h{font-family:var(--font-h);font-size:clamp(26px,3.3vw,42px);line-height:1.1;
  font-weight:800;letter-spacing:-.02em;color:#FFFFFF!important;margin:0}
.vp-vid-h em{font-style:normal;color:#EBA9AD!important;-webkit-text-fill-color:#EBA9AD!important}
.vp-vid-p{font-size:clamp(14px,1.25vw,16px);line-height:1.7;
  color:rgba(255,255,255,.84)!important;margin-top:16px;max-width:46ch}

.vp-vid-nums{display:flex;gap:26px;margin-top:26px;padding-top:22px;
  border-top:1px solid rgba(255,255,255,.14)}
.vp-vid-nums div{display:flex;flex-direction:column}
.vp-vid-nums strong{font-family:var(--font-h);font-size:22px;font-weight:800;color:#fff;line-height:1}
.vp-vid-nums span{font-size:11.5px;color:rgba(255,255,255,.62);margin-top:5px;letter-spacing:.03em}

.vp-vid-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.vp-vid-cta .btn-outline{background:transparent!important;color:#fff!important;
  border-color:rgba(255,255,255,.34)!important}
.vp-vid-cta .btn-outline:hover{background:#fff!important;color:#8E1F24!important;border-color:#fff!important}

/* player */
.vp-vid-box{position:relative;border-radius:24px;overflow:hidden;background:#000;
  box-shadow:0 36px 80px rgba(0,0,0,.55);aspect-ratio:16/9}
.vp-vid-box video{display:block;width:100%;height:100%;object-fit:cover}
.vp-play{position:absolute;inset:0;display:grid;place-items:center;border:0;cursor:pointer;
  background:linear-gradient(180deg,rgba(16,8,9,.10),rgba(16,8,9,.46));transition:.3s}
.vp-play::before{content:"";position:absolute;width:92px;height:92px;border-radius:50%;
  background:#B12C31;box-shadow:0 16px 44px rgba(177,44,49,.60);transition:.28s}
.vp-play svg{position:relative;z-index:2;width:32px;height:32px;stroke:#fff;fill:#fff;margin-left:5px}
.vp-play:hover::before{transform:scale(1.08);background:#D34249}
.vp-play.oculto{opacity:0;pointer-events:none}
.vp-vid-tag{position:absolute;left:16px;top:16px;z-index:3;display:inline-flex;align-items:center;
  gap:7px;background:rgba(16,8,9,.62);backdrop-filter:blur(8px);color:#fff;
  font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  padding:7px 13px;border-radius:999px;border:1px solid rgba(255,255,255,.20);
  pointer-events:none;transition:opacity .3s}
.vp-vid-tag svg{width:13px;height:13px;stroke:#EBA9AD}
.vp-vid-box.tocando .vp-vid-tag{opacity:0}

@media(max-width:980px){
  .vp-vid-grid{grid-template-columns:1fr;gap:32px}
  .vp-vid-box{order:-1}
  .vp-vid-p{max-width:100%}
}
@media(max-width:600px){
  .vp-vid-nums{gap:18px}
  .vp-vid-nums strong{font-size:18px}
  .vp-play::before{width:72px;height:72px}
  .vp-play svg{width:26px;height:26px}
}

/* ---------- 5. COMIDA ---------- */
.vp-food{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:230px;gap:14px}
.vp-food figure{position:relative;margin:0;border-radius:var(--r-md);overflow:hidden;
  box-shadow:0 16px 40px rgba(29,30,33,.12);background:#241416}
.vp-food-a{grid-column:span 2;grid-row:span 2}
.vp-food figure picture,.vp-food figure img{display:block;width:100%;height:100%;object-fit:cover;
  transition:transform .6s ease}
.vp-food figure:hover img{transform:scale(1.05)}
.vp-food figcaption{position:absolute;left:0;right:0;bottom:0;padding:34px 18px 16px;color:#fff;
  background:linear-gradient(180deg,transparent,rgba(20,10,11,.88))}
.vp-food figcaption b{display:block;font-family:var(--font-h);font-size:15.5px;font-weight:700}
.vp-food figcaption span{display:block;font-size:12px;color:rgba(255,255,255,.78);margin-top:2px}
@media(max-width:900px){.vp-food{grid-template-columns:1fr 1fr;grid-auto-rows:190px}.vp-food-a{grid-row:span 1}}
@media(max-width:520px){.vp-food{grid-template-columns:1fr;grid-auto-rows:210px}.vp-food-a{grid-column:span 1}}

/* ---------- 6. VISTA ---------- */
.vp-vista-gal{display:grid;gap:14px}
.vp-vista-1{border-radius:var(--r-lg);box-shadow:var(--shadow);width:100%;display:block}
.vp-vista-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.vp-vista-2 img{border-radius:var(--r-md);box-shadow:var(--shadow);width:100%;display:block}
.vp-vista-gal picture img{width:100%;height:auto}
.vp-list{list-style:none;padding:0;margin:20px 0 22px;display:grid;gap:11px}
.vp-list li{display:flex;align-items:center;gap:11px;font-size:15px;color:#3A3B3F}
.vp-list svg{width:19px;height:19px;color:#fff;background:#B12C31;border-radius:50%;padding:3.5px;flex:none}

/* ---------- 7. TURISMO / MISSAS ---------- */
.vp-end{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;color:#6B6B6B;margin-top:12px}
.vp-end svg{width:14px;height:14px;flex:none;margin-top:2px;color:#B12C31}
.vp-nota{font-size:13px;color:#6B6B6B;line-height:1.6;margin:16px 0 22px;max-width:56ch}
.vp-missas-card{background:linear-gradient(155deg,#241416,#5E1A1E 60%,#8E1F24);color:#fff;
  border-radius:var(--r-lg);padding:32px;box-shadow:0 28px 70px rgba(94,26,30,.28)}
.vm-top{display:flex;align-items:center;gap:9px;font-size:11.5px;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;color:#EBA9AD}
.vm-top svg{width:15px;height:15px}
.vm-big{font-family:var(--font-h);font-size:72px;font-weight:800;line-height:1;margin:16px 0 4px;
  display:flex;align-items:baseline;gap:10px}
.vm-big span{font-size:15px;font-weight:600;letter-spacing:.04em;color:rgba(255,255,255,.72)}
.vp-missas-card p{color:rgba(255,255,255,.80);font-size:14px;line-height:1.6}
.vm-link{display:inline-flex;align-items:center;gap:8px;margin-top:18px;font-size:12.5px;
  font-weight:800;color:#EBA9AD;text-decoration:none;letter-spacing:.03em}
.vm-link:hover{color:#fff}
.vm-link svg{width:15px;height:15px}

/* ---------- 8. GRUPO (ajuste de paleta sobre o padrao) ---------- */
.grupo-sec{background:linear-gradient(165deg,#1E1012 0%,#241416 52%,#4A1519 100%)!important}
.grupo-sec .gcard.on{background:rgba(177,44,49,.18)!important;border-color:#D34249!important}
.grupo-sec .gbtn:hover{background:#D34249!important;color:#fff!important;border-color:#D34249!important}
.grupo-sec .eyebrow,.grupo-sec .grp-num strong{color:#EBA9AD!important}
.gtag{display:inline-block;margin-top:10px;font-size:10.5px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:#fff;background:#B12C31;padding:5px 12px;border-radius:999px}

/* ---------- 9. FOOTER ---------- */
.ftr{background:#1E1012!important;color:rgba(255,255,255,.80);padding:56px 0 0}
.ftr-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:38px;padding-bottom:44px}
.ftr-logo{height:74px;width:auto;margin-bottom:16px;display:block}
.ftr-b p{font-size:13.5px;line-height:1.7;color:rgba(255,255,255,.72);max-width:42ch}
.ftr-end{font-size:12.5px!important;color:rgba(255,255,255,.60)!important;margin-top:12px}
.ftr-col h5{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:#EBA9AD;margin:0 0 16px}
.ftr-col a{display:block;font-size:13.5px;color:rgba(255,255,255,.78);text-decoration:none;
  padding:5px 0;transition:.2s}
.ftr-col a:hover{color:#fff;transform:translateX(2px)}
.ftr-redes{display:flex;gap:10px;margin-top:20px}
.ftr-soc{width:40px!important;height:40px;border-radius:50%;display:grid!important;place-items:center;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);padding:0!important}
.ftr-soc svg{width:17px;height:17px;stroke:#fff}
.ftr-soc:hover{background:#B12C31;border-color:#B12C31}
.ftr-b{background:#160B0D;padding:18px 0;border-top:1px solid rgba(255,255,255,.07)}
.ftr-b-in{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  font-size:12px;color:rgba(255,255,255,.55);max-width:var(--maxw);margin:0 auto;padding:0 24px}
.ftr-sahost{display:inline-flex;align-items:center;gap:9px;color:rgba(255,255,255,.72);
  text-decoration:none;font-size:11px;font-weight:800;letter-spacing:.12em}
.ftr-sahost img{height:24px;width:auto}
.ftr-sahost:hover{color:#fff}
@media(max-width:900px){.ftr-grid{grid-template-columns:1fr 1fr;gap:28px}}
@media(max-width:560px){.ftr-grid{grid-template-columns:1fr}.ftr-b-in{justify-content:center;text-align:center}}

/* ---------- 10. ajustes gerais de marca ---------- */
.btn-eco,.btn-green{background:linear-gradient(135deg,#B12C31,#8E1F24)!important;color:#fff!important;
  border:0!important;box-shadow:0 12px 28px rgba(177,44,49,.26)}
.btn-eco:hover,.btn-green:hover{background:linear-gradient(135deg,#D34249,#B12C31)!important}
.btn-outline{border:1.5px solid rgba(177,44,49,.34)!important;color:#8E1F24!important;background:#fff!important}
.btn-outline:hover{background:#B12C31!important;color:#fff!important;border-color:#B12C31!important}
.eyebrow{color:#B12C31!important}
.title em,.title span{color:#B12C31}
.tag{background:#B12C31!important;color:#fff!important}
.final{background:linear-gradient(150deg,#1E1012 0%,#4A1519 55%,#8E1F24 100%)!important}
.final h2{color:#fff!important}
.final h2 em,.final h2 span{color:#EBA9AD!important}
.final p{color:rgba(255,255,255,.82)!important}
.final .btn{background:#fff!important;color:#8E1F24!important}
.final .btn:hover{background:#EBA9AD!important;color:#241416!important}

/* amenidades e cards genericos */
.amen .it .ico{background:rgba(177,44,49,.10)!important;color:#B12C31!important}
.card .ph{background:#F1EDEE}
.card:hover{box-shadow:0 26px 60px rgba(29,30,33,.14)}
.trust .t .ico{color:#B12C31!important}

/* ---------- 11. FUNDOS: CINZA (o Isaac quer cinza, nao branco) ----------
   #F6F5F3 era clarissimo demais e "parecia branco" na tela dele.
   Agora e cinza perceptivel, alternando duas tonalidades. */
.sec-sand,.sec.sec-sand{background:#EDEBEB!important;background-image:none!important}
.sec-tint,.sec.sec-tint{background:#E3E0E1!important;background-image:none!important}
.grupo-sec{background-image:linear-gradient(165deg,#1E1012 0%,#241416 52%,#4A1519 100%)!important}
.final{background-image:linear-gradient(150deg,#1E1012 0%,#4A1519 55%,#8E1F24 100%)!important}
html,body,body.site-vipper{background:#EDEBEB!important}
/* a barra de reserva e' a faixa logo abaixo do banner: tem que ser cinza */

/* barra de reserva no GRAFITE do header (#2E2D2F) — texto legivel sobre o escuro */
.ressec .res-form .rf label{color:#B9B6B7!important}
.ressec .res-form .rf-iw{background:#FFFFFF!important;border-color:rgba(255,255,255,.92)!important;color:#B12C31!important;
  box-shadow:0 2px 10px rgba(0,0,0,.16)}
.ressec .res-form input,.ressec .res-form select{color:#1D1E21!important;font-weight:600}
.ressec .res-form select option{color:#1D1E21}
.ressec .res-hint{color:rgba(255,255,255,.66)!important}
.ressec .res-hint svg{color:#EBA9AD!important}

/* O CSS base do eco injeta um ::after (gradiente escuro) por cima do slide,
   o que deixava o banner do painel INVISIVEL. Aqui ele e neutralizado. */
.hb-wrap .hb-slide::after,.hb-slide::after{display:none!important;content:none!important;
  background:none!important;opacity:0!important}
.hb-wrap::after,.hb-wrap::before,.hero::after,.hero::before{display:none!important;content:none!important}
/* empilhamento explicito: imagem acima de qualquer sombra */
.hb-slide{z-index:2}
.hb-slide.on{z-index:3}
.hb-slide img{position:relative;z-index:2}
.hb-dots{z-index:9!important}

/* ===== BANNER DO PAINEL: garantir que a imagem APARECE =====
   O CSS base do eco/mapp aplica regras na img dentro de .hero que deixavam
   o banner do painel invisivel (opacity/transform/visibility herdados).
   Aqui forcamos a pintura com especificidade alta. */
/* SO o slide ativo fica visivel. Antes este bloco agrupava
   `.hero .hb-wrap .hb-slide` SEM `.on` e forçava opacity:1 em TODOS —
   resultado: os 3 banners ficavam empilhados e so o ultimo aparecia. */
html body .hb-wrap .hb-slide{opacity:0!important;visibility:visible!important;
  display:flex!important;position:absolute!important;inset:0!important;z-index:1!important}
html body .hb-wrap .hb-slide.on{opacity:1!important;z-index:5!important}
html body .hb-wrap .hb-slide{opacity:0!important}
html body .hb-wrap .hb-slide.on{opacity:1!important}
html body section.hero .hb-wrap .hb-slide img,
html body .hb-wrap .hb-slide.on img{opacity:1!important;visibility:visible!important;
  display:block!important;transform:none!important;
  width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;
  object-fit:contain!important;object-position:center!important;
  position:relative!important;z-index:6!important;filter:none!important}
html body section.hero .hb-wrap{background:#1E1012!important}

/* ===== o header e' ABSOLUTE (fica por cima). O banner comeca ABAIXO dele,
   senao o header cobre a logo/topo da arte do painel. ===== */
html body section.hero{margin-top:0!important;padding-top:0!important;background:#1E1012!important}
@media(max-width:760px){ html body section.hero{padding-top:0!important} }

/* banner do painel: garantir que o slide com background pinte acima de tudo */
html body .hb-wrap .hb-slide{background-size:contain!important;background-position:center center!important;
  background-repeat:no-repeat!important}

/* banner: sobe um pouco e cresce para preencher a largura (corte minimo nas pontas) */
html body .hb-wrap{aspect-ratio:1600/600!important;height:auto!important;
  min-height:0!important;max-height:none!important}
html body .hb-wrap .hb-slide{background-size:contain!important;background-position:center center!important}
@media(max-width:760px){
  html body .hb-wrap{aspect-ratio:16/9!important;height:auto!important;max-height:none!important}
}
/* o header acompanha: fundo solido e alinhado ao topo do banner */
/* ===== HEADER — padrao do MAPP (medido no site oficial) =====
   position:fixed, altura 77px, fundo branco 92% com blur(16px), z-index 60.
   O conteudo reserva a altura dele no topo. */
html body header.top{position:fixed!important;top:0!important;left:0!important;right:0!important;
  z-index:60!important;width:100%!important;
  background:rgba(255,255,255,.985)!important;
  -webkit-backdrop-filter:saturate(180%) blur(16px)!important;
  backdrop-filter:saturate(180%) blur(16px)!important;
  border-bottom:1px solid rgba(29,30,33,.08)!important;
  box-shadow:none!important;transition:background .3s ease,box-shadow .3s ease}
/* quando a pagina desce, o header ganha sombra leve (como nos outros) */
html body header.top.rolado,html body header.top.scrolled,body header.top.rolado{background:#FFFFFF!important;
  box-shadow:0 6px 24px rgba(29,30,33,.10)!important}
html body section.hero{padding-top:83px!important}

/* ===== SCROLL: (mantido) ===== */
/* ===== SCROLL: o CSS base deixa html/body com overflow-x hidden nos DOIS,
   o que joga a rolagem para o body e trava a pagina (scrollY fica 0).
   Aqui a rolagem volta para o <html>, que e' o normal. ===== */
/* ===== SCROLL (causa raiz) =====
   O CSS base deixa `.body{overflow:hidden auto}`, e com o overflow-x do html
   tambem hidden o navegador passa a rolar NO BODY em vez de no documento:
   o body entao precisa ter a altura do conteudo. Forcamos o modo normal. */
html{overflow-x:hidden!important;overflow-y:auto!important;height:auto!important}
body{overflow:visible!important;overflow-x:visible!important;overflow-y:visible!important;
  height:auto!important;min-height:0!important;max-height:none!important}

/* header branco: textos do menu no grafite da marca */
html body header.top .menu .nv-link{color:#3A3B3F!important}
html body header.top .menu .nv-link:hover,
html body header.top .menu .nv-link.on{color:#B12C31!important}
html body header.top .menu .nv-link.on{background:rgba(177,44,49,.10)!important}
html body header.top .tel{color:#3A3B3F!important}


html body header.top .burger span{background:#3A3B3F!important}
@media(max-width:760px){ html body section.hero{padding-top:66px!important} }

html body header.top .menu a.nv-link{color:#3A3B3F!important;font-weight:700!important;
  text-shadow:none!important;opacity:1!important}
html body header.top .menu a.nv-link.on,
html body header.top .menu a.nv-link:hover{color:#B12C31!important;background:rgba(177,44,49,.10)!important}


html body header.top .tel{color:#2E2D2F!important;opacity:1!important}
html body header.top{opacity:1!important}

/* ===== HEADER: vencer o gradiente do eco.css (que tem varias .top) =====
   O eco.css define .top com gradiente vermelho em varias regras; a ultima
   ganha. Usamos html body + .top para vencer por especificidade. */
html body header.top,
html body header.top.scrolled,
html body .top,
html body .top.scrolled{
  background:#FFFFFF!important;
  background-image:none!important;
  background-color:#FFFFFF!important;
  border-bottom:1px solid rgba(29,30,33,.10)!important;
  box-shadow:none!important;
}
html body header.top.rolado,html body header.top.scrolled,body header.top.rolado{background:#FFFFFF!important;box-shadow:0 4px 20px rgba(29,30,33,.10)!important}
html body header.top::after,html body header.top::before{display:none!important;content:none!important}

/* O fundo escuro vinha do .top-in (div interno do header), nao do <header> */
html body header.top .top-in,
html body .top .top-in,
html body .top-in{background:transparent!important;background-image:none!important;
  background-color:transparent!important}

/* .lg-nome estava BRANCO sobre header branco (parecia fantasma) */
html body header.top .logo .lg-nome,
html body header.top .logo .lg-txt .lg-nome,

/* ==========================================================================
   HEADER — SEMPRE IGUAL, em qualquer posicao da pagina.
   Regra do Isaac (30/10): o header NAO pode mudar ao rolar
   (nada de virar branco). Fica grafite #2E2D2F com textos claros,
   fixo no topo, e o conteudo comeca abaixo dele.
   ========================================================================== */
html body header.top{
  position:fixed!important;top:0!important;left:0!important;right:0!important;
  z-index:900!important;width:100%!important;
  background:#2E2D2F!important;background-image:none!important;
  border:0!important;border-radius:0!important;
  box-shadow:0 2px 14px rgba(0,0,0,.28)!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  transition:none!important;
}
html body header.top .top-in{background:transparent!important;background-image:none!important;
  border-radius:0!important;box-shadow:none!important}

/* nada de estado "rolado"/"scrolled" alterando o header */
html body header.top.rolado,
html body header.top.scrolled,
html body header.top.rolado.scrolled{
  background:#2E2D2F!important;background-image:none!important;
  border-radius:0!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  box-shadow:0 2px 14px rgba(0,0,0,.28)!important;
}

/* conteudo abaixo do header fixo */
html body section.hero{padding-top:83px!important}

/* ---------- textos CLAROS (sempre, no grafite) ---------- */
html body header.top .menu a.nv-link,
html body header.top.rolado .menu a.nv-link,
html body header.top.scrolled .menu a.nv-link{
  color:rgba(255,255,255,.88)!important;-webkit-text-fill-color:rgba(255,255,255,.88)!important;
  font-weight:600!important;background:transparent!important;text-shadow:none!important}
html body header.top .menu a.nv-link.on,
html body header.top.rolado .menu a.nv-link.on,
html body header.top.scrolled .menu a.nv-link.on{
  color:#fff!important;-webkit-text-fill-color:#fff!important;
  background:rgba(177,44,49,.55)!important}
html body header.top .menu a.nv-link:hover{
  color:#fff!important;-webkit-text-fill-color:#fff!important;
  background:rgba(255,255,255,.14)!important}
html body header.top .tel,
html body header.top.rolado .tel,
html body header.top.scrolled .tel{
  color:#fff!important;-webkit-text-fill-color:#fff!important;opacity:1!important}

/* VIPPER + subtitulo: sempre claros (era isto que ficava invisivel) */
html body header.top .lg-nome,

html body header.top .lg-sub,

html body header.top .burger span,
html body header.top.rolado .burger span,
html body header.top.scrolled .burger span{background:#fff!important}

/* ==========================================================================
   WHATSAPP FLUTUANTE — canto INFERIOR ESQUERDO (padrao MAPP/EcoMAPP)
   (foi retirado do header a pedido do Isaac)
   ========================================================================== */
.wa-float{position:fixed;left:22px;bottom:22px;z-index:800;
  width:58px;height:58px;border-radius:50%;display:grid;place-items:center;
  background:#25D366;color:#fff;text-decoration:none;
  box-shadow:0 10px 28px rgba(37,211,102,.42);
  transition:transform .25s ease,box-shadow .25s ease}
.wa-float svg{width:29px;height:29px;stroke:#fff;fill:none}
.wa-float:hover{transform:translateY(-3px) scale(1.05);
  box-shadow:0 16px 36px rgba(37,211,102,.55)}
.wa-tip{position:absolute;left:70px;top:50%;transform:translateY(-50%) translateX(-6px);
  background:#2E2D2F;color:#fff;font-size:12px;font-weight:700;letter-spacing:.02em;
  padding:8px 14px;border-radius:999px;white-space:nowrap;opacity:0;pointer-events:none;
  transition:opacity .22s ease,transform .22s ease;box-shadow:0 8px 22px rgba(0,0,0,.28)}
.wa-float:hover .wa-tip{opacity:1;transform:translateY(-50%) translateX(0)}
@media(max-width:760px){
  .wa-float{left:16px;bottom:16px;width:52px;height:52px}
  .wa-float svg{width:26px;height:26px}
  .wa-tip{display:none}
}

/* ==========================================================================
   SELETOR DE IDIOMA no header
   ========================================================================== */
.top .lang2{position:relative;flex:none}
.top .lg-cur{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 13px;
  border-radius:999px;border:1px solid rgba(255,255,255,.26);
  background:rgba(255,255,255,.10);color:#fff;font:inherit;font-size:12px;font-weight:800;
  letter-spacing:.06em;cursor:pointer;transition:.2s}
.top .lg-cur:hover{background:rgba(255,255,255,.20);border-color:rgba(255,255,255,.42)}
.top .lg-cur svg{width:12px;height:12px;stroke:currentColor}
.top .lg-cur .fl{width:19px;height:14px;border-radius:2.5px;overflow:hidden;display:block}
.top .lg-menu{position:absolute;top:calc(100% + 10px);left:0;min-width:172px;
  background:#fff;border:1px solid rgba(29,30,33,.10);border-radius:14px;padding:6px;
  box-shadow:0 20px 48px rgba(0,0,0,.20);opacity:0;visibility:hidden;
  transform:translateY(-6px);transition:.2s;z-index:60}
.top .lang2.aberto .lg-menu{opacity:1;visibility:visible;transform:translateY(0)}
.top .lg-opt{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;
  border:0;background:transparent;border-radius:9px;cursor:pointer;
  font:inherit;font-size:13px;font-weight:600;color:#3A3B3F;text-align:left}
.top .lg-opt:hover{background:#F3F0F1;color:#B12C31}
.top .lg-opt.on{background:rgba(177,44,49,.10);color:#B12C31;font-weight:800}
.top .lg-opt .fl{width:21px;height:15px;border-radius:2.5px;overflow:hidden;display:block;flex:none}
@media(max-width:980px){ .top .lang2{display:none} }

/* ===== VIPPER: cor definitiva do texto ao lado da logo (sobre grafite) =====
   Unica regra que toca .lg-nome/.lg-sub depois de limpar as antigas. */
header.top a.logo span.lg-txt span.lg-nome{
  color:#FFFFFF!important;-webkit-text-fill-color:#FFFFFF!important;
  font-size:18px!important;letter-spacing:.16em!important;font-weight:800!important;opacity:1!important}
header.top a.logo span.lg-txt span.lg-sub{
  color:#EBA9AD!important;-webkit-text-fill-color:#EBA9AD!important;
  font-size:9.5px!important;letter-spacing:.12em!important;opacity:1!important}

/* ===== FIX: o .lg-nome estava com fonte GIGANTE e ".lg-sub" com fundo branco
   (regras herdadas do eco.css), o que criava um "VIPPER" fantasma atras da logo. */
header.top a.logo span.lg-txt{display:flex!important;flex-direction:column!important;
  justify-content:center!important;gap:2px!important;min-width:0}
header.top a.logo span.lg-txt span.lg-nome{
  font-size:17px!important;line-height:1.1!important;letter-spacing:.14em!important;
  font-weight:800!important;white-space:nowrap!important;
  background:transparent!important;padding:0!important;margin:0!important}
header.top a.logo span.lg-txt span.lg-sub{
  font-size:9px!important;line-height:1.2!important;letter-spacing:.11em!important;
  text-transform:uppercase!important;white-space:nowrap!important;
  background:transparent!important;padding:0!important;margin:0!important;
  border:0!important;border-radius:0!important}

/* ===== FIX DEFINITIVO do texto ao lado da logo =====
   O .lg-nome herdava display:block + width:100% e caia em 0,0 cobrindo o header.
   Aqui ele volta a ser inline dentro do .lg-txt, ao lado da logo. */
header.top a.logo{display:inline-flex!important;align-items:center!important;gap:11px!important;
  width:auto!important;max-width:none!important;position:static!important}
header.top a.logo span.lg-txt{display:inline-flex!important;flex-direction:column!important;
  justify-content:center!important;position:static!important;width:auto!important;
  max-width:none!important;float:none!important}
header.top a.logo span.lg-txt span.lg-nome,
header.top a.logo span.lg-txt span.lg-sub{
  display:block!important;position:static!important;width:auto!important;max-width:none!important;
  float:none!important;inset:auto!important;transform:none!important;text-indent:0!important}

/* ==========================================================================
   HEADER COMPACTO — mesma metrica do grupo (fonte 14px, padding 10x15, gap 2)
   Ajustado para caber 9 itens + logo + idioma + telefone + CTA + WhatsApp.
   ========================================================================== */
html body header.top .top-in{display:flex!important;align-items:center!important;
  gap:14px!important;min-height:82px!important;padding:0 22px!important;max-width:100%!important}
html body header.top .logo{flex:0 0 auto!important}
html body header.top .menu{display:flex!important;align-items:center!important;gap:1px!important;
  flex:1 1 auto!important;justify-content:center!important;min-width:0!important}
html body header.top .menu a.nv-link{font-size:13.5px!important;padding:9px 11px!important;
  white-space:nowrap!important;border-radius:999px!important}
html body header.top .mt-drop{position:relative!important}
html body header.top .mt-drop > a{display:inline-flex!important;align-items:center!important;gap:4px!important}
html body header.top .mt-drop > a svg{width:10px!important;height:10px!important;opacity:.7}

/* submenu (Nossa Historia / Comodidades / Galeria) */
html body header.top .mt-sub{position:absolute!important;top:calc(100% + 8px)!important;
  left:50%!important;transform:translateX(-50%) translateY(-6px)!important;
  min-width:196px!important;background:#fff!important;border:1px solid rgba(29,30,33,.10)!important;
  border-radius:14px!important;padding:6px!important;box-shadow:0 20px 48px rgba(0,0,0,.22)!important;
  opacity:0!important;visibility:hidden!important;transition:.2s!important;z-index:80!important}
html body header.top .mt-drop:hover .mt-sub,
html body header.top .mt-drop:focus-within .mt-sub{
  opacity:1!important;visibility:visible!important;transform:translateX(-50%) translateY(0)!important}
html body header.top .mt-sub a{display:block!important;padding:10px 13px!important;
  border-radius:9px!important;font-size:13px!important;font-weight:600!important;
  color:#3A3B3F!important;text-decoration:none!important;white-space:nowrap!important}
html body header.top .mt-sub a:hover{background:#F3F0F1!important;color:#B12C31!important}

/* CTA e telefone mais compactos */
html body header.top .top-cta{gap:10px!important;flex:0 0 auto!important}
html body header.top .top-cta .btn-eco{padding:10px 18px!important;font-size:12.5px!important}
html body header.top .tel{font-size:12.5px!important}

/* telas medias: esconde o telefone, mantem menu */
@media(max-width:1280px){
  html body header.top .tel{display:none!important}
  html body header.top .menu a.nv-link{font-size:12.5px!important;padding:8px 9px!important}
}
@media(max-width:1080px){
  html body header.top .menu{display:none!important}
}

/* ===== VIDEO: vencer as regras de cor do eco.css (titulo/paragrafo escuros) =====
   O eco.css aplica .sec h2 / .sec p com cores do tema claro; sobre o fundo
   escuro do video isso deixava o texto quase invisivel. */
html body section.vp-video-sec .vp-vid-h,
html body section.vp-video-sec h2.vp-vid-h,
html body .vp-video-sec .title{color:#FFFFFF!important;-webkit-text-fill-color:#FFFFFF!important}
html body section.vp-video-sec .vp-vid-h em{color:#EBA9AD!important;
  -webkit-text-fill-color:#EBA9AD!important;font-style:normal!important}
html body section.vp-video-sec .vp-vid-p,
html body section.vp-video-sec p{color:rgba(255,255,255,.86)!important;
  -webkit-text-fill-color:rgba(255,255,255,.86)!important}
html body section.vp-video-sec .vp-vid-k,
html body section.vp-video-sec .eyebrow{color:#EBA9AD!important}
html body section.vp-video-sec .vp-vid-nums strong{color:#fff!important}
html body section.vp-video-sec .vp-vid-nums span{color:rgba(255,255,255,.64)!important}

/* ==========================================================================
   ESTRUTURA — grade de 6 cards + faixa de destaques.
   Antes era uma lista solta de <div class="it"> herdada do eco.css, com
   icone pequeno e texto corrido: parecia lista de servicos, nao vitrine.
   ========================================================================== */
.vp-estr{position:relative}
.vp-estr-topo{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,60px);
  align-items:end;margin-bottom:clamp(30px,4vw,48px)}
.vp-estr-topo .title{margin:10px 0 0}
.vp-estr-lead{font-size:clamp(14px,1.2vw,16px);line-height:1.75;color:var(--muted);
  margin:0 0 4px;max-width:52ch}

.vp-estr-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}

.vp-estr-card{background:#fff;border:1px solid var(--linha);border-radius:var(--r-lg);
  padding:26px 24px 24px;position:relative;overflow:hidden;
  box-shadow:0 1px 2px rgba(28,25,26,.04);transition:transform .28s,box-shadow .28s,border-color .28s}
.vp-estr-card::after{content:"";position:absolute;left:0;top:0;height:3px;width:0;
  background:linear-gradient(90deg,#B12C31,#D34249);transition:width .35s}
.vp-estr-card:hover{transform:translateY(-3px);border-color:rgba(177,44,49,.30);
  box-shadow:0 16px 34px rgba(28,25,26,.10)}
.vp-estr-card:hover::after{width:100%}

.vp-estr-ico{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;
  background:linear-gradient(145deg,rgba(177,44,49,.10),rgba(177,44,49,.05));
  border:1px solid rgba(177,44,49,.16);color:#B12C31;font-size:22px;margin-bottom:16px}
.vp-estr-card h3{font-family:var(--font-h);font-size:17px;font-weight:800;color:var(--ink);
  margin:0 0 8px;letter-spacing:-.01em;line-height:1.3}
.vp-estr-card p{font-size:14px;line-height:1.68;color:var(--muted);margin:0}

.vp-estr-faixa{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px;
  padding-top:26px;border-top:1px solid var(--linha)}
.vp-estr-pill{display:inline-flex;align-items:center;gap:9px;background:#fff;
  border:1px solid var(--linha);border-radius:999px;padding:9px 16px 9px 12px;
  font-size:13px;font-weight:600;color:var(--ink);box-shadow:0 1px 2px rgba(28,25,26,.04)}
.vp-estr-pill span{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;
  background:rgba(177,44,49,.09);color:#B12C31;font-size:13px}

@media(max-width:1080px){
  .vp-estr-grid{grid-template-columns:repeat(2,1fr)}
  .vp-estr-topo{grid-template-columns:1fr;align-items:start}
}
@media(max-width:640px){
  .vp-estr-grid{grid-template-columns:1fr;gap:14px}
  .vp-estr-card{padding:22px 20px}
  .vp-estr-faixa{gap:8px}
}

/* ==========================================================================
   HERO / BANNER — correcao do "pisca" no primeiro acesso.
   O .hb-carregando esconde o conteudo ate o JS decidir entre o banner do
   painel e as fotos de fallback. Assim nunca aparece a foto antes do banner.
   ========================================================================== */
#hbWrap{position:relative;width:100%;aspect-ratio:1600/600;max-height:82vh;
  overflow:hidden;background:#1E1012}
#hbWrap.hb-carregando .hb-slide,
#hbWrap.hb-carregando .hb-dots{opacity:0!important;visibility:hidden!important}
#hbWrap.hb-carregando{background:#1E1012}
#hbWrap.hb-pronto .hb-slide{transition:opacity .45s ease}

/* o slide criado pelo JS e' um <div> vazio com background-image:
   display:flex herdado do eco.css deixava a arte desalinhada */
#hbWrap .hb-slide{position:absolute;inset:0;display:block!important;
  opacity:0;visibility:visible;transition:opacity .5s ease;background-color:#1E1012}
#hbWrap .hb-slide.on{opacity:1;z-index:2}

/* as fotos de fallback (HTML) tambem precisam preencher certo */
#hbWrap .hb-slide img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}

@media(max-width:760px){
  #hbWrap{aspect-ratio:4/5;max-height:none}
  #hbWrap .hb-slide{background-size:cover!important}
}



/* ==========================================================================
   GRUPO MAPP — CSS PORTADO do eco_mapp_layout.css do EcoMAPP.
   Estrutura e medidas IDENTICAS ao site oficial do grupo (946px de altura,
   logo 246x112, cards 454x206, glogo 92px). So as CORES foram trocadas:
   verde-escuro/petroleo do Eco -> vermelho/grafite do VIPPER.
   ========================================================================== */
.grupo-sec { background: linear-gradient(#1E1012 0%, #2A1215 55%, #3A1A1D 100%); color: rgb(255, 255, 255); border-top: 0px; }
.grupo-sec .eyebrow { color: #EBA9AD; }
.grupo-sec .grupo-h { color: rgb(255, 255, 255); }
.grupo-sec .grupo-p { color: rgba(255, 255, 255, 0.82); }
.grupo-sec .glogo { width: 100%; height: 92px; display: grid; place-items: center; background: transparent; box-shadow: none; padding: 0px; border-radius: 0px; min-width: 0px; margin: 0px 0px 2px; }
.grupo-sec .glogo img { display: block; margin: 0px auto; max-height: 84px; max-width: 100%; width: auto; height: auto; object-fit: contain; object-position: center center; background: rgb(255, 255, 255); border-radius: 14px; padding: 10px 14px; box-shadow: rgba(0, 0, 0, 0.18) 0px 6px 18px; }
.grupo-sec .gcard { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.18); backdrop-filter: blur(6px); }
.grupo-sec .gcard:hover { background: rgba(255, 255, 255, 0.13); border-color: #EBA9AD; box-shadow: rgba(0, 0, 0, 0.28) 0px 18px 44px; }
.grupo-sec .gcard.on { background: rgba(235, 169, 173, 0.14); border-color: #EBA9AD; }
.grupo-sec .gcard strong { width: 100%; color: rgb(255, 255, 255); }
.grupo-sec .gcard small { width: 100%; color: rgba(255, 255, 255, 0.72); }
.grupo-sec .gbtn { color: rgb(255, 255, 255); border-color: rgba(255, 255, 255, 0.35); }
.grupo-sec .gbtn:hover { background: rgb(255, 255, 255); color: var(--deep); border-color: rgb(255, 255, 255); }
.grupo-sec .gcard.on .gbtn { color: #EBA9AD; border-color: #EBA9AD; }
.grupo-sec .gcard.on .gbtn:hover { background: transparent; color: #EBA9AD; }
.grupo-sec .grupo-selo { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 38px auto 0px; padding-top: 26px; border-top: 1px solid rgba(255, 255, 255, 0.14); max-width: 520px; }
.grupo-sec .grupo-selo img { max-height: 40px; opacity: 0.95; filter: drop-shadow(rgba(0, 0, 0, 0.35) 0px 4px 12px); height: 40px !important; width: auto !important; }
.grupo-sec .grupo-selo .txt { display: flex; flex-direction: column; gap: 2px; text-align: left; }
.grupo-sec .grupo-selo .txt small { font-family: var(--font-h); font-size: 9.5px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); line-height: 1; }
.grupo-sec .grupo-selo .txt strong { font-family: var(--font-h); font-size: 15px; font-weight: 700; color: rgb(255, 255, 255); letter-spacing: 0.02em; line-height: 1.2; }
.grupo-sec { background: linear-gradient(165deg, #241416 0%, #3A1A1D 52%, #1E1012 100%); padding: 74px 0px 78px; position: relative; overflow: hidden; }
.grupo-sec::before { content: ""; position: absolute; top: -120px; right: -80px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(46, 155, 79, 0.28), transparent 68%); }
.grupo-sec::after { content: ""; position: absolute; bottom: -140px; left: -90px; width: 460px; height: 460px; border-radius: 50%; background: radial-gradient(circle, rgba(111, 168, 220, 0.2), transparent 70%); }
.grupo-sec .wrap { max-width: 1200px; margin: 0px auto; padding: 0px 24px; position: relative; z-index: 2; }
.grupo-sec .eyebrow { display: inline-flex; align-items: center; gap: 9px; font-size: 11px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: #EBA9AD; }
.grupo-sec .eyebrow::before { content: ""; width: 30px; height: 1px; background: rgba(235, 169, 173, 0.5); }
.gcard { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 13px; background: rgba(255, 255, 255, 0.07); border: 1.5px solid rgba(255, 255, 255, 0.16); border-radius: 22px; padding: 28px 20px 22px; transition: 0.28s; backdrop-filter: blur(8px); }
.gcard:hover { background: rgba(255, 255, 255, 0.13); border-color: rgba(235, 169, 173, 0.6); transform: translateY(-6px); box-shadow: rgba(0, 0, 0, 0.3) 0px 22px 50px; }
.gcard.on { border-color: #EBA9AD; background: rgba(235, 169, 173, 0.12); box-shadow: rgba(235, 169, 173, 0.45) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.22) 0px 18px 44px; }
.glogo { width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto; background: rgb(255, 255, 255); box-shadow: rgba(0, 0, 0, 0.22) 0px 10px 26px; padding: 12px; transition: 0.28s; }
.gcard:hover .glogo { transform: scale(1.05); }
.glogo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; }
.gcard strong { width: 100%; font-family: var(--font-h); font-size: 17px; color: rgb(255, 255, 255); font-weight: 700; line-height: 1.2; }
.gcard small { width: 100%; font-size: 12.5px; line-height: 1.55; color: rgba(255, 255, 255, 0.7); flex: 1 1 0%; min-height: 38px; }
.gbtn { margin-top: 4px; display: inline-flex; align-items: center; justify-content: center; width: 100%; font-size: 12px; font-weight: 700; color: rgb(255, 255, 255); text-decoration: none; letter-spacing: 0.04em; border: 1.5px solid rgba(255, 255, 255, 0.32); border-radius: 999px; padding: 10px 16px; transition: 0.22s; }
.gbtn:hover { background: rgb(255, 255, 255); color: var(--deep); border-color: rgb(255, 255, 255); }
.gcard.on .gbtn { color: #EBA9AD; border-color: #EBA9AD; cursor: default; }
.gcard.on .gbtn:hover { background: transparent; color: #EBA9AD; }
.grupo-sec .grp-topo { display: grid; grid-template-columns: 300px 1fr; gap: 44px; align-items: center; padding-bottom: 38px; border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
.grupo-sec .grp-marca { display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg, rgb(255, 255, 255) 0%, rgb(242, 246, 252) 100%); border-radius: 24px; padding: 26px 22px; box-shadow: rgba(4, 16, 36, 0.42) 0px 20px 50px; border: 1px solid rgba(255, 255, 255, 0.6); }
.grupo-sec .grp-marca img { display: block; width: 100%; height: auto; max-height: 150px; object-fit: contain; }
.grupo-sec .grp-txt .eyebrow { margin-bottom: 0px; }
.grupo-sec .grupo-h { margin-top: 12px; max-width: 640px; }
.grupo-sec .grupo-p { margin-top: 14px; max-width: 660px; font-size: 15.5px; line-height: 1.78; }
.grupo-sec .grp-nums { display: flex; align-items: stretch; gap: 10px; margin-top: 24px; flex-wrap: wrap; }
.grupo-sec .grp-num { display: flex; flex-direction: column; gap: 2px; padding: 11px 18px; border-radius: 14px; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.15); min-width: 132px; }
.grupo-sec .grp-num strong { font-family: var(--font-h); font-size: 24px; font-weight: 800; color: #EBA9AD; line-height: 1.05; }
.grupo-sec .grp-num span { font-size: 11px; line-height: 1.3; color: rgba(255, 255, 255, 0.72); }
.grupo-sec .grupo-cards { margin-top: 34px; }
.grupo-sec .gcard { padding: 24px 18px 18px; }
.grupo-sec .gcard.on { box-shadow: #EBA9AD 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.28) 0px 18px 40px; }
.grupo-sec .gcard.on::before { content: "★"; position: absolute; top: 12px; right: 14px; font-size: 12px; color: #EBA9AD; }
.grupo-sec .grp-fecho { display: flex; align-items: stretch; justify-content: center; gap: 16px; margin-top: 36px; padding-top: 30px; border-top: 1px solid rgba(255, 255, 255, 0.14); flex-wrap: wrap; }
.grupo-sec .grp-ch { display: flex; align-items: center; gap: 14px; text-decoration: none; padding: 12px 18px; border-radius: 16px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(201, 162, 39, 0.42); transition: transform 0.18s, background 0.18s; }
.grupo-sec .grp-ch:hover { transform: translateY(-2px); background: rgba(255, 255, 255, 0.1); }
.grupo-sec .grp-ch-logo img { display: block; height: 52px; width: auto; max-width: 60px; object-fit: contain; }
.grupo-sec .grp-ch-txt { display: flex; flex-direction: column; line-height: 1.2; text-align: left; }
.grupo-sec .grp-ch-txt small { font-size: 8.5px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: rgb(231, 200, 106); }
.grupo-sec .grp-ch-txt strong { font-family: var(--font-h); font-size: 16px; font-weight: 800; color: rgb(255, 255, 255); margin-top: 2px; }
.grupo-sec .grp-ch-txt em { font-style: normal; font-size: 10.5px; color: rgba(255, 255, 255, 0.66); margin-top: 2px; }
.grupo-sec .grp-seta { color: rgb(231, 200, 106); font-size: 16px; margin-left: 6px; transition: transform 0.18s; }
.grupo-sec .grp-ch:hover .grp-seta { transform: translateX(3px); }
.grupo-sec .grp-insta { display: flex; align-items: center; gap: 12px; text-decoration: none; padding: 12px 18px; border-radius: 16px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.2); transition: transform 0.18s, background 0.18s; }
.grupo-sec .grp-insta:hover { transform: translateY(-2px); background: rgba(255, 255, 255, 0.1); }
.grupo-sec .grp-ig-ico { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 11px; color: rgb(255, 255, 255); flex: 0 0 auto; background: linear-gradient(135deg, rgb(249, 206, 52) 0%, rgb(238, 42, 123) 45%, rgb(98, 40, 215) 100%); }
.grupo-sec .grp-ig-txt { display: flex; flex-direction: column; line-height: 1.2; text-align: left; }
.grupo-sec .grp-ig-txt strong { font-family: var(--font-h); font-size: 15px; font-weight: 800; color: rgb(255, 255, 255); }
.grupo-sec .grp-ig-txt small { font-size: 10.5px; color: rgba(255, 255, 255, 0.7); margin-top: 3px; }
.grupo-sec .grp-ig-ico, .marcas-faixa .mf-ig-ico { position: relative; background: linear-gradient(135deg, rgb(249, 206, 52) 0%, rgb(238, 42, 123) 45%, rgb(98, 40, 215) 100%); padding: 2px; border-radius: 50%; overflow: hidden; }
.grupo-sec .grp-ig-ico img.ig-foto, .marcas-faixa .mf-ig-ico img.ig-foto { display: block; border-radius: 50%; object-fit: cover; object-position: center center; background: rgb(255, 255, 255); border: 2px solid rgb(255, 255, 255); box-sizing: border-box; width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; }
.grupo-sec .grp-ig-ico { width: 34px; height: 34px; border-radius: 50%; }
.grupo-sec .grp-topo { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; gap: 28px !important; padding-bottom: 42px !important; }
.grupo-sec .grp-marca { max-width: 300px !important; width: 100% !important; margin: 0px auto !important; padding: 22px 26px !important; border-radius: 22px !important; }
.grupo-sec .grp-marca img { max-height: 112px !important; }
.grupo-sec .grp-txt { display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; max-width: 780px !important; margin: 0px auto !important; }
.grupo-sec .grp-txt .eyebrow { display: block !important; text-align: center !important; margin: 0px 0px 4px !important; }
.grupo-sec .grupo-h { max-width: 720px !important; margin: 12px auto 0px !important; text-align: center !important; }
.grupo-sec .grupo-p { max-width: 660px !important; margin: 14px auto 0px !important; text-align: center !important; }
.grupo-sec .grp-nums { justify-content: center !important; margin: 28px auto 0px !important; gap: 14px !important; width: 100% !important; }
.grupo-sec .grp-num { align-items: center !important; text-align: center !important; min-width: 160px !important; padding: 16px 24px !important; border-radius: 16px !important; }
.grupo-sec .grp-num strong { font-size: 30px !important; line-height: 1 !important; }
.grupo-sec .grp-num span { font-size: 12px !important; margin-top: 4px !important; }
.grupo-sec .grupo-cards { margin-top: 44px !important; }
html body section.grupo-sec .grp-topo { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; gap: 26px !important; grid-template-columns: none !important; }
html body section.grupo-sec .grp-marca { max-width: 300px !important; width: 100% !important; margin: 0px auto !important; }
html body section.grupo-sec .grp-txt { display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; max-width: 780px !important; margin: 0px auto !important; width: 100% !important; }
html body section.grupo-sec .grp-txt .eyebrow { text-align: center !important; margin: 0px auto 6px !important; }
html body section.grupo-sec .grupo-h { text-align: center !important; margin: 12px auto 0px !important; max-width: 720px !important; }
html body section.grupo-sec .grupo-p { text-align: center !important; margin: 14px auto 0px !important; max-width: 660px !important; }
html body section.grupo-sec .grp-nums { justify-content: center !important; margin: 26px auto 0px !important; gap: 14px !important; }
html body section.grupo-sec .grp-num { align-items: center !important; text-align: center !important; min-width: 158px !important; }
.grupo-sec { background: linear-gradient(165deg, #241416 0%, #3A1A1D 52%, #1E1012 100%) !important; }
.grupo-sec .grp-num strong { color: #EBA9AD !important; }
.grupo-sec .grp-num span { color: #F3D3D5 !important; }
.grupo-sec .eyebrow { color: #EBA9AD !important; }
.grupo-sec .grupo-h { color: rgb(255, 255, 255) !important; }
.grupo-sec .grupo-p { color: rgba(255, 255, 255, 0.8) !important; }
.gcard { background: rgba(255, 255, 255, 0.06) !important; border: 1px solid rgba(177, 44, 49, 0.22) !important; }
.gcard strong { color: rgb(255, 255, 255) !important; }
.gcard small { color: rgba(255, 255, 255, 0.72) !important; }
.gcard.on { background: rgba(177, 44, 49, 0.14) !important; border-color: #EBA9AD !important; box-shadow: rgba(0, 0, 0, 0.3) 0px 14px 40px !important; }
.gcard.on strong { color: #FBEAEB !important; }
.gbtn { color: rgb(255, 255, 255) !important; border-color: rgba(255, 255, 255, 0.34) !important; }
.gbtn:hover { background: #EBA9AD !important; color: #3A1A1D !important; border-color: #EBA9AD !important; }

/* ==========================================================================
   MISSAS / INSTAGRAM / CTA FINAL — CSS portado do EcoMAPP.
   Estrutura e medidas identicas ao site oficial do grupo;
   so as cores foram convertidas verde -> vermelho/grafite.
   ========================================================================== */
/*eco.css*/.final { background: var(--areia-2); padding: 88px 0px; text-align: center; }
/*eco.css*/.final-in { display: flex; flex-direction: column; align-items: center; }
/*eco.css*/.final p { margin-top: 14px; font-size: 15px; color: var(--muted); }
/*eco.css*/.final-actions { display: flex; gap: 14px; margin-top: 28px; flex-wrap: wrap; justify-content: center; }
/*eco.css*/.final { background: rgb(241, 234, 220) !important; }
/*eco_mapp_layout.css*/.final { background: linear-gradient(150deg,var(--deep),var(--green) 62%,#35181B); border-radius: var(--r-lg); padding: 64px 40px; text-align: center; position: relative; overflow: hidden; }
/*eco_mapp_layout.css*/.final::before { content: ""; position: absolute; width: 460px; height: 460px; border-radius: 50%; background: radial-gradient(circle, rgba(161, 40, 45, 0.3), transparent 70%); top: -150px; right: -110px; }
/*eco_mapp_layout.css*/.final h2 { color: rgb(255, 255, 255); font-size: clamp(26px, 3.7vw, 40px); position: relative; z-index: 2; margin-bottom: 16px; }
/*eco_mapp_layout.css*/.final p { color: rgba(255, 255, 255, 0.82); position: relative; z-index: 2; max-width: 600px; margin: 0px auto 30px; }
/*eco_mapp_layout.css*/.final .btn { position: relative; z-index: 2; }
/*eco_mapp_layout.css*/.mass { background: rgb(255, 255, 255); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 30px; }
/*eco_mapp_layout.css*/.mass h3 { font-size: 20px; color: var(--deep); margin-bottom: 5px; }
/*eco_mapp_layout.css*/.mass .sub { font-size: 13px; color: var(--muted); margin-bottom: 18px; }
/*eco_mapp_layout.css*/.mass .days { display: flex; gap: 6px; margin-bottom: 18px; flex-wrap: wrap; }
/*eco_mapp_layout.css*/.mass .days button { border: 1px solid var(--line); background: rgb(255, 255, 255); border-radius: var(--r-pill); font-family: var(--font-h); font-size: 11.5px; font-weight: 600; padding: 8px 14px; cursor: pointer; color: var(--muted); transition: 0.2s; }
/*eco_mapp_layout.css*/.mass .days button.on { background: var(--green); color: rgb(255, 255, 255); border-color: var(--green); }
/*eco_mapp_layout.css*/.mass .list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
/*eco_mapp_layout.css*/.mass .list .h { background: var(--sand); border-radius: var(--r-sm); padding: 13px 10px; text-align: center; font-family: var(--font-h); font-weight: 600; font-size: 16px; color: var(--deep); }
/*eco_mapp_layout.css*/.mass .next { margin-top: 18px; background: linear-gradient(140deg,var(--blue),var(--sky)); color: rgb(255, 255, 255); border-radius: var(--r-md); padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
/*eco_mapp_layout.css*/.mass .next span { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.85; display: block; }
/*eco_mapp_layout.css*/.mass .next strong { font-family: var(--font-h); font-size: 19px; }
/*eco_mapp_layout.css*/.mass .note { font-size: 12px; color: var(--muted); margin-top: 16px; line-height: 1.7; }
/*eco_mapp_layout.css*/.sec-sand .weather, .sec-sand .mass { background: rgb(255, 255, 255); }
/*eco_mapp_layout.css*/.final { background: linear-gradient(150deg, rgb(41, 18, 21) 0%, rgb(38, 17, 20) 50%, rgb(40, 18, 21) 100%) !important; }
/*eco_mapp_layout.css*/.sec-missas .mass { max-width: 980px; margin: 0px auto; background: rgb(255, 255, 255); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 34px 38px; box-shadow: rgba(40, 18, 21, 0.09) 0px 20px 52px; }
/*eco_mapp_layout.css*/.sec-missas .mass h3 { font-family: var(--font-h); font-size: clamp(20px, 2.6vw, 28px); color: var(--deep); margin: 0px; font-weight: 700; text-align: center; }
/*eco_mapp_layout.css*/.sec-missas .mass .sub { font-size: 13.5px; color: var(--muted); text-align: center; margin: 8px 0px 24px; }
/*eco_mapp_layout.css*/.sec-missas .mass .days { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 24px; }
/*eco_mapp_layout.css*/.sec-missas .mass .days button { font-family: var(--font-h); font-size: 13px; font-weight: 700; color: var(--deep); background: rgb(246, 219, 221); border: 1.5px solid transparent; border-radius: 999px; padding: 10px 18px; cursor: pointer; transition: 0.2s; }
/*eco_mapp_layout.css*/.sec-missas .mass .days button:hover { border-color: var(--blue); }
/*eco_mapp_layout.css*/.sec-missas .mass .days button.on { background: linear-gradient(140deg,var(--blue),var(--deep)); color: rgb(255, 255, 255); box-shadow: rgba(40, 18, 21, 0.3) 0px 8px 20px; }
/*eco_mapp_layout.css*/.sec-missas .mass .list { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-bottom: 22px; }
/*eco_mapp_layout.css*/.sec-missas .mass .list span, .sec-missas .mass .list .h { display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 800; color: var(--deep); background: rgb(247, 226, 228); border: 1px solid var(--line); border-radius: 14px; padding: 16px 8px; transition: 0.2s; }
/*eco_mapp_layout.css*/.sec-missas .mass .list .h:hover { background: linear-gradient(140deg,var(--blue),var(--sky)); color: rgb(255, 255, 255); border-color: transparent; transform: translateY(-3px); }
/*eco_mapp_layout.css*/.sec-missas .mass .next { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: linear-gradient(140deg, rgb(41, 18, 21), rgb(38, 17, 20) 60%, rgb(40, 18, 21)); color: rgb(255, 255, 255); border-radius: 18px; padding: 20px 26px; }
/*eco_mapp_layout.css*/.sec-missas .mass .next span { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgb(200, 59, 65); display: block; }
/*eco_mapp_layout.css*/.sec-missas .mass .next strong { font-family: var(--font-h); font-size: 26px; font-weight: 700; display: block; margin-top: 4px; }
/*eco_mapp_layout.css*/.sec-missas .mass .next svg { width: 30px; height: 30px; stroke: rgba(255, 255, 255, 0.6); fill: none; stroke-width: 1.6; }
/*eco_mapp_layout.css*/.sec-missas .mass .note { font-size: 12px; color: var(--muted); line-height: 1.6; margin: 18px 0px 0px; text-align: center; }
/*eco_mapp_layout.css*/.duo.duo-uma .mass { width: 100%; }
/*eco_mapp_layout.css*/.redes-sec .wrap { max-width: 1120px; }
/*eco_mapp_layout.css*/.redes-sec .redes-topo { display: flex; align-items: stretch; gap: 16px; flex-wrap: wrap; justify-content: center; }
/*eco_mapp_layout.css*/.redes-sec .redes-ig { display: flex; align-items: center; gap: 14px; background: rgb(255, 255, 255); border: 1px solid rgb(239, 190, 193); border-radius: 18px; padding: 12px 18px 12px 14px; box-shadow: rgba(38, 17, 20, 0.09) 0px 10px 28px; }
/*eco_mapp_layout.css*/.redes-sec .redes-perfil { display: block; width: 60px; height: 60px; border-radius: 50%; padding: 2px; flex: 0 0 auto; background: linear-gradient(135deg, rgb(249, 206, 52) 0%, rgb(238, 42, 123) 45%, rgb(132, 33, 38) 100%); }
/*eco_mapp_layout.css*/.redes-sec .redes-perfil img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 2px solid rgb(255, 255, 255); box-sizing: border-box; background: rgb(255, 255, 255); }
/*eco_mapp_layout.css*/.redes-sec .redes-id { display: flex; flex-direction: column; line-height: 1.22; min-width: 0px; }
/*eco_mapp_layout.css*/.redes-sec .redes-k { font-size: 8.5px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: rgb(63, 26, 29); }
/*eco_mapp_layout.css*/.redes-sec .redes-id strong { font-size: 16px; font-weight: 800; color: rgb(40, 18, 21); }
/*eco_mapp_layout.css*/.redes-sec .redes-num { font-size: 11px; color: rgb(105, 28, 32); margin-top: 1px; }
/*eco_mapp_layout.css*/.redes-sec .redes-num b { color: rgb(40, 18, 21); font-weight: 800; }
/*eco_mapp_layout.css*/.redes-sec .redes-btn { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 800; color: rgb(255, 255, 255); text-decoration: none; padding: 9px 14px; border-radius: 11px; margin-left: 6px; flex: 0 0 auto; background: linear-gradient(135deg, rgb(238, 42, 123) 0%, rgb(132, 33, 38) 100%); transition: transform 0.18s, box-shadow 0.18s; }
/*eco_mapp_layout.css*/.redes-sec .redes-btn:hover { transform: translateY(-2px); box-shadow: rgba(132, 33, 38, 0.28) 0px 10px 22px; }
/*eco_mapp_layout.css*/.redes-sec .redes-btn-ico { display: inline-flex; align-items: center; justify-content: center; }
/*eco_mapp_layout.css*/.redes-sec .redes-btn-ico.fb { width: 34px; height: 34px; border-radius: 10px; background: rgb(142, 35, 40); color: rgb(255, 255, 255); flex: 0 0 auto; }
/*eco_mapp_layout.css*/.redes-sec .redes-fb { display: flex; align-items: center; gap: 12px; background: rgb(255, 255, 255); border: 1px solid rgb(239, 190, 193); border-radius: 18px; padding: 12px 16px; text-decoration: none; box-shadow: rgba(38, 17, 20, 0.09) 0px 10px 28px; transition: transform 0.18s, box-shadow 0.18s; }
/*eco_mapp_layout.css*/.redes-sec .redes-fb:hover { transform: translateY(-2px); box-shadow: rgba(38, 17, 20, 0.14) 0px 14px 32px; }
/*eco_mapp_layout.css*/.redes-sec .redes-fb-txt { display: flex; flex-direction: column; line-height: 1.22; }
/*eco_mapp_layout.css*/.redes-sec .redes-fb-txt strong { font-size: 14px; font-weight: 800; color: rgb(40, 18, 21); }
/*eco_mapp_layout.css*/.redes-sec .redes-fb-txt small { font-size: 10.5px; color: rgb(105, 28, 32); margin-top: 2px; }
/*eco_mapp_layout.css*/.redes-sec .redes-fb-txt b { color: rgb(40, 18, 21); font-weight: 800; }
/*eco_mapp_layout.css*/.redes-sec .redes-fb-seta { font-size: 15px; color: rgb(182, 47, 52); transition: transform 0.18s; }
/*eco_mapp_layout.css*/.redes-sec .redes-fb:hover .redes-fb-seta { transform: translateX(3px); color: rgb(142, 35, 40); }
/*eco_mapp_layout.css*/.redes-sec .redes-lead { max-width: 720px; margin: 20px auto 0px; text-align: center; font-size: 13.5px; line-height: 1.7; color: rgb(86, 27, 31); }
/*eco_mapp_layout.css*/.redes-sec .redes-grade { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-top: 22px; }
/*eco_mapp_layout.css*/.redes-sec .igp { position: relative; display: block; border-radius: 12px; overflow: hidden; aspect-ratio: 1 / 1; background: rgb(247, 243, 234); text-decoration: none; }
/*eco_mapp_layout.css*/.redes-sec .igp img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.35s; }
/*eco_mapp_layout.css*/.redes-sec .igp:hover img { transform: scale(1.06); }
/*eco_mapp_layout.css*/.redes-sec .igp-ov { position: absolute; inset: 0px; display: grid; place-items: center; color: rgb(255, 255, 255); background: linear-gradient(rgba(38, 17, 20, 0) 40%, rgba(38, 17, 20, 0.55) 100%); opacity: 0; transition: opacity 0.25s; }
/*eco_mapp_layout.css*/.redes-sec .igp:hover .igp-ov { opacity: 1; }
/*eco_mapp_layout.css*/.redes-sec .igp-ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, 0.22); border: 1px solid rgba(255, 255, 255, 0.5); }
/*eco_mapp_layout.css*/.redes-sec .redes-cta { text-align: center; margin-top: 22px; }
/*eco_mapp_layout.css*/.redes-sec { position: relative; overflow: hidden; background: linear-gradient(rgb(250, 247, 239) 0%, rgb(243, 208, 210) 55%, rgb(255, 246, 233) 100%); }
/*eco_mapp_layout.css*/.redes-sec::before { content: ""; position: absolute; top: -160px; right: -120px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(238, 42, 123, 0.16), transparent 68%); pointer-events: none; }
/*eco_mapp_layout.css*/.redes-sec::after { content: ""; position: absolute; bottom: -180px; left: -120px; width: 460px; height: 460px; border-radius: 50%; background: radial-gradient(circle, rgba(40, 18, 21, 0.14), transparent 70%); pointer-events: none; }
/*eco_mapp_layout.css*/.redes-sec .wrap { position: relative; z-index: 2; max-width: 1120px; }
/*eco_mapp_layout.css*/.redes-sec .redes-head { text-align: center; max-width: 760px; margin: 0px auto 26px; }
/*eco_mapp_layout.css*/.redes-sec .redes-eyebrow { display: inline-flex; align-items: center; gap: 9px; font-size: 11px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: rgb(63, 26, 29); }
/*eco_mapp_layout.css*/.redes-sec .redes-eyebrow i { display: block; width: 30px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, rgb(249, 206, 52), rgb(238, 42, 123), rgb(132, 33, 38)); }
/*eco_mapp_layout.css*/.redes-sec .redes-title { font-family: var(--font-h); font-size: clamp(26px, 3.2vw, 40px); line-height: 1.14; font-weight: 800; color: rgb(40, 18, 21); margin: 12px 0px 0px; letter-spacing: -0.015em; }
/*eco_mapp_layout.css*/.redes-sec .redes-title em { font-style: normal; background: linear-gradient(135deg, rgb(249, 206, 52) 0%, rgb(238, 42, 123) 48%, rgb(132, 33, 38) 100%) text; -webkit-text-fill-color: transparent; color: rgb(238, 42, 123); }
/*eco_mapp_layout.css*/.redes-sec .redes-sub { font-size: 14.5px; line-height: 1.7; color: rgb(86, 27, 31); margin: 12px auto 0px; max-width: 640px; }
/*eco_mapp_layout.css*/.redes-sec .redes-topo { display: flex; align-items: stretch; gap: 14px; flex-wrap: wrap; justify-content: center; }
/*eco_mapp_layout.css*/.redes-sec .redes-ig { display: flex; align-items: center; gap: 15px; background: rgb(255, 255, 255); border: 1px solid rgb(239, 190, 193); border-radius: 20px; padding: 13px 20px 13px 14px; box-shadow: rgba(38, 17, 20, 0.11) 0px 14px 34px; }
/*eco_mapp_layout.css*/.redes-sec .redes-perfil { display: block; width: 64px; height: 64px; border-radius: 50%; padding: 2.5px; flex: 0 0 auto; background: linear-gradient(135deg, rgb(249, 206, 52) 0%, rgb(238, 42, 123) 45%, rgb(132, 33, 38) 100%); box-shadow: rgba(238, 42, 123, 0.28) 0px 6px 18px; }
/*eco_mapp_layout.css*/.redes-sec .redes-perfil img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 2.5px solid rgb(255, 255, 255); box-sizing: border-box; background: rgb(255, 255, 255); }
/*eco_mapp_layout.css*/.redes-sec .redes-id { display: flex; flex-direction: column; line-height: 1.2; min-width: 0px; }
/*eco_mapp_layout.css*/.redes-sec .redes-k { font-size: 8.5px; font-weight: 800; letter-spacing: 0.15em; text-transform: uppercase; color: rgb(63, 26, 29); }
/*eco_mapp_layout.css*/.redes-sec .redes-id strong { font-size: 17px; font-weight: 800; color: rgb(40, 18, 21); letter-spacing: -0.01em; }
/*eco_mapp_layout.css*/.redes-sec .redes-num { font-size: 11.5px; color: rgb(105, 28, 32); margin-top: 2px; }
/*eco_mapp_layout.css*/.redes-sec .redes-num b { font-size: 15px; color: rgb(238, 42, 123); font-weight: 800; }
/*eco_mapp_layout.css*/.redes-sec .redes-btn { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; color: rgb(255, 255, 255); text-decoration: none; padding: 10px 16px; border-radius: 12px; margin-left: 8px; flex: 0 0 auto; background: linear-gradient(135deg, rgb(238, 42, 123) 0%, rgb(132, 33, 38) 100%); box-shadow: rgba(238, 42, 123, 0.3) 0px 8px 20px; transition: transform 0.18s, box-shadow 0.18s; }
/*eco_mapp_layout.css*/.redes-sec .redes-btn:hover { transform: translateY(-2px); box-shadow: rgba(132, 33, 38, 0.34) 0px 14px 28px; }
/*eco_mapp_layout.css*/.redes-sec .redes-btn-ico { display: inline-flex; align-items: center; justify-content: center; }
/*eco_mapp_layout.css*/.redes-sec .redes-btn-ico.fb { width: 44px; height: 44px; border-radius: 13px; background: rgb(142, 35, 40); color: rgb(255, 255, 255); flex: 0 0 auto; }
/*eco_mapp_layout.css*/.redes-sec .redes-fb { display: flex; align-items: center; gap: 13px; background: rgb(255, 255, 255); border: 1px solid rgb(239, 190, 193); border-radius: 20px; padding: 13px 18px; text-decoration: none; box-shadow: rgba(38, 17, 20, 0.11) 0px 14px 34px; transition: transform 0.18s, box-shadow 0.18s; }
/*eco_mapp_layout.css*/.redes-sec .redes-fb:hover { transform: translateY(-2px); box-shadow: rgba(38, 17, 20, 0.16) 0px 18px 40px; }
/*eco_mapp_layout.css*/.redes-sec .redes-fb-txt { display: flex; flex-direction: column; line-height: 1.2; }
/*eco_mapp_layout.css*/.redes-sec .redes-fb-txt strong { font-size: 15px; font-weight: 800; color: rgb(40, 18, 21); }
/*eco_mapp_layout.css*/.redes-sec .redes-fb-txt small { font-size: 10.5px; color: rgb(105, 28, 32); margin-top: 3px; }
/*eco_mapp_layout.css*/.redes-sec .redes-fb-txt b { font-size: 14px; color: rgb(142, 35, 40); font-weight: 800; }
/*eco_mapp_layout.css*/.redes-sec .redes-fb-seta { font-size: 16px; color: rgb(182, 47, 52); transition: transform 0.18s; }
/*eco_mapp_layout.css*/.redes-sec .redes-fb:hover .redes-fb-seta { transform: translateX(3px); color: rgb(142, 35, 40); }
/*eco_mapp_layout.css*/.redes-sec .redes-grade { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-top: 26px; }
/*eco_mapp_layout.css*/.redes-sec .igp { position: relative; display: block; border-radius: 14px; overflow: hidden; aspect-ratio: 1 / 1; background: rgb(247, 243, 234); text-decoration: none; box-shadow: rgba(40, 18, 21, 0.1) 0px 8px 22px; }
/*eco_mapp_layout.css*/.redes-sec .igp img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s; }
/*eco_mapp_layout.css*/.redes-sec .igp:hover img { transform: scale(1.07); }
/*eco_mapp_layout.css*/.redes-sec .igp-ov { position: absolute; inset: 0px; display: grid; place-items: center; color: rgb(255, 255, 255); opacity: 0; background: linear-gradient(rgba(132, 33, 38, 0.1) 0%, rgba(238, 42, 123, 0.55) 100%); transition: opacity 0.25s; }
/*eco_mapp_layout.css*/.redes-sec .igp:hover .igp-ov { opacity: 1; }
/*eco_mapp_layout.css*/.redes-sec .igp-ico { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, 0.24); border: 1.5px solid rgba(255, 255, 255, 0.6); backdrop-filter: blur(2px); }
/*eco_mapp_layout.css*/.redes-sec .redes-cta { text-align: center; margin-top: 26px; }
/*eco_mapp_layout.css*/.redes-sec .redes-cta-txt { font-size: 12.5px; color: rgb(105, 28, 32); margin: 0px 0px 12px; }
/*eco_mapp_layout.css*/.redes-sec .redes-cta-txt strong { color: rgb(238, 42, 123); }
/*eco_mapp_layout.css*/.redes-sec .redes-cta-btn { box-shadow: rgba(238, 42, 123, 0.32) 0px 12px 28px; font-weight: 800; background: linear-gradient(135deg, rgb(238, 42, 123) 0%, rgb(132, 33, 38) 100%) !important; border: 0px !important; }
/*eco_mapp_layout.css*/.redes-sec .redes-cta-btn:hover { transform: translateY(-2px); box-shadow: rgba(132, 33, 38, 0.36) 0px 18px 34px; }
/**/.redes-sec { background: rgb(247, 243, 234) !important; }
/**/.redes-sec .eyebrow { color: rgb(57, 26, 29) !important; }
/**/.redes-sec .title { color: rgb(40, 18, 21) !important; }
/**/.redes-sec .redes-k { color: rgb(57, 26, 29) !important; }
/**/.redes-sec .ig-item { box-shadow: rgba(40, 18, 21, 0.12) 0px 8px 26px !important; }
/**/.redes-sec .redes-ig, .redes-sec .redes-fb { background: rgb(40, 18, 21) !important; color: rgb(255, 255, 255) !important; }
/**/.redes-sec .redes-tag { background: rgb(182, 47, 53) !important; color: rgb(40, 18, 21) !important; }
/**/.sec-tint .final-c, .sec-tint h2 { color: rgb(40, 18, 21) !important; }
/**/.redes-sec .e-redes { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 8px; }
/**/.redes-sec .e-rede { display: flex; align-items: center; gap: 14px; background: rgb(255, 255, 255); border: 1px solid rgb(238, 185, 189); border-radius: 16px; padding: 16px 18px; box-shadow: rgba(40, 18, 21, 0.08) 0px 8px 24px; }
/**/.redes-sec .e-rede-ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; flex: 0 0 auto; background: rgb(40, 18, 21); color: rgb(182, 47, 53); font-weight: 900; font-size: 18px; }
/**/.redes-sec .e-rede-txt { min-width: 0px; }
/**/.redes-sec .e-rede-txt b { display: block; font-size: 14px; color: rgb(40, 18, 21); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/**/.redes-sec .e-rede-txt small { display: block; font-size: 12px; color: rgb(81, 27, 31); margin-top: 2px; }
/**/.redes-sec .e-rede a { margin-left: auto; flex: 0 0 auto; background: rgb(40, 18, 21); font-weight: 800; font-size: 12px; padding: 9px 16px; border-radius: 999px; text-decoration: none; white-space: nowrap; color: rgb(255, 255, 255) !important; }
/**/.redes-sec .e-rede a:hover { background: rgb(57, 26, 29); }
/**/.redes-sec .redes-ig, .redes-sec .redes-fb { background: linear-gradient(135deg, rgb(40, 18, 21), rgb(57, 26, 29)) !important; border: 1px solid rgba(182, 47, 53, 0.28) !important; border-radius: 18px !important; box-shadow: rgba(40, 18, 21, 0.18) 0px 12px 30px !important; }
/**/.redes-sec .redes-id, .redes-sec .redes-id strong, .redes-sec .redes-ig strong { color: rgb(255, 255, 255) !important; font-weight: 800 !important; }
/**/.redes-sec .redes-k { color: rgb(200, 59, 65) !important; font-size: 10px !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; font-weight: 800 !important; }
/**/.redes-sec .redes-num, .redes-sec .redes-num span { color: rgb(240, 192, 195) !important; font-size: 11.5px !important; }
/**/.redes-sec .redes-num b, .redes-sec .redes-num b#ig-mapp { color: rgb(182, 47, 53) !important; font-weight: 800 !important; }
/**/.redes-sec .redes-fb-txt strong, .redes-sec .redes-fb-txt b { color: rgb(255, 255, 255) !important; font-weight: 800 !important; }
/**/.redes-sec .redes-fb-txt small { color: rgb(223, 117, 123) !important; }
/**/.redes-sec .redes-btn.ig { background: rgb(182, 47, 53) !important; color: rgb(40, 18, 21) !important; border: 0px !important; font-weight: 800 !important; box-shadow: rgba(0, 0, 0, 0.18) 0px 6px 18px !important; }
/**/.redes-sec .redes-btn.ig:hover { background: rgb(200, 59, 65) !important; }
/**/.redes-sec .redes-btn.ig, .redes-sec .redes-btn.ig .redes-btn-ico { color: rgb(40, 18, 21) !important; }
/**/.redes-sec .redes-btn.ig svg { stroke: rgb(40, 18, 21) !important; }
/**/.redes-sec .redes-btn-ico.fb { background: rgb(255, 255, 255) !important; color: rgb(142, 35, 40) !important; }
/**/.redes-sec .redes-perfil { background: linear-gradient(135deg, rgb(182, 47, 53), rgb(99, 27, 32)) !important; box-shadow: rgba(0, 0, 0, 0.22) 0px 3px 10px !important; }
/**/.redes-sec .redes-fb-seta { color: rgb(182, 47, 53) !important; }
/**/.redes-sec .redes-cta { text-align: center; margin-top: 26px; background: transparent !important; box-shadow: none !important; }
/**/.redes-sec .redes-cta-txt { font-size: 12.5px !important; color: rgb(81, 27, 31) !important; margin: 0px 0px 12px !important; }
/**/.redes-sec .redes-cta-txt strong { color: rgb(40, 18, 21) !important; font-weight: 800 !important; }
/**/.redes-sec .redes-cta-btn { background: rgb(40, 18, 21) !important; color: rgb(255, 255, 255) !important; border: 0px !important; border-radius: 999px !important; font-weight: 800 !important; padding: 13px 30px !important; display: inline-flex !important; align-items: center !important; gap: 9px !important; font-size: 12.5px !important; letter-spacing: 0.04em !important; box-shadow: rgba(40, 18, 21, 0.24) 0px 12px 28px !important; text-decoration: none !important; }
/**/.redes-sec .redes-cta-btn:hover { background: rgb(57, 26, 29) !important; transform: translateY(-2px) !important; }
/**/.redes-sec .redes-cta-btn svg { stroke: rgb(182, 47, 53) !important; }
/**/.redes-sec .redes-title em, .redes-sec .redes-title span { color: rgb(57, 26, 29) !important; font-style: normal !important; }
/**/.redes-sec .redes-fb-seta { color: rgb(182, 47, 53) !important; }
/**/.redes-sec .redes-title em, .redes-sec .redes-title em * { background: linear-gradient(135deg, rgb(57, 26, 29), rgb(99, 27, 32)) text !important; -webkit-text-fill-color: transparent !important; color: rgb(57, 26, 29) !important; font-style: normal !important; }
/**/.final { background: linear-gradient(150deg, rgb(37, 17, 20) 0%, rgb(40, 18, 21) 55%, rgb(43, 18, 21) 100%) !important; }
/**/.final h2 { position: relative; z-index: 2; margin-bottom: 16px; color: rgb(255, 255, 255) !important; font-size: clamp(26px, 3.7vw, 40px) !important; }
/**/.final h2 em, .final h2 span { color: rgb(182, 47, 53) !important; }
/**/.final p { position: relative; z-index: 2; max-width: 600px; margin: 0px auto 30px; color: rgb(233, 161, 165) !important; }
/**/.final p b, .final p strong { color: rgb(255, 255, 255) !important; }
/* CORRIGIDO 31/10/2026: era background branco (!important) e o botao sumia
   no fundo claro do CTA final. Agora usa o vermelho de acao do Vipper,
   com texto branco — mesma linguagem dos outros botoes do site. */
.final .btn, .final .btn.btn-gold, .final a.btn { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 9px; background: #B12C31 !important; color: #fff !important; border: 0px !important; font-weight: 800 !important; padding: 15px 34px !important; border-radius: 999px !important; box-shadow: 0 12px 30px rgba(177,44,49,.34) !important; text-decoration: none !important; }
.final .btn:hover, .final .btn.btn-gold:hover { transform: translateY(-2px); background: #8E2126 !important; color: #fff !important; }
/**/.final .btn span { color: inherit !important; }
/**/.final .btn svg { stroke: currentcolor !important; }

/* ==========================================================================
   AVALIACOES / GOOGLE — CSS portado do EcoMAPP.
   Nota real do VIPPER: 4,7 · 1,2 mil avaliacoes (Google, 29/10/2026).
   ========================================================================== */
/*eco_mapp_layout.css*/.sec-reviews-goog .goog-card { display: grid; grid-template-columns: auto 1fr auto; gap: 28px; align-items: center; background: rgb(255, 255, 255); border: 1px solid rgb(240, 195, 198); border-radius: 20px; padding: 24px 28px; box-shadow: rgba(41, 18, 21, 0.09) 0px 14px 40px; margin-bottom: 22px; }
/*eco_mapp_layout.css*/.sec-reviews-goog .gc-left { display: flex; align-items: center; gap: 16px; }
/*eco_mapp_layout.css*/.sec-reviews-goog .gc-g { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-h); font-size: 23px; font-weight: 700; color: rgb(255, 255, 255); background: conic-gradient(from -45deg, rgb(234, 67, 53) 0deg, rgb(234, 67, 53) 90deg, rgb(251, 188, 5) 90deg, rgb(251, 188, 5) 180deg, rgb(103, 28, 32) 180deg, rgb(103, 28, 32) 270deg, rgb(179, 45, 50) 270deg, rgb(179, 45, 50) 360deg); box-shadow: rgba(179, 45, 50, 0.28) 0px 6px 18px; flex: 0 0 auto; }
/*eco_mapp_layout.css*/.sec-reviews-goog .gc-left > div { display: flex; flex-direction: column; gap: 3px; }
/*eco_mapp_layout.css*/.sec-reviews-goog .gc-nota { font-family: var(--font-h); font-size: 34px; font-weight: 700; color: var(--deep); line-height: 1; }
/*eco_mapp_layout.css*/.sec-reviews-goog .gc-stars { display: flex; gap: 2px; margin-top: 2px; }
/*eco_mapp_layout.css*/.sec-reviews-goog .gc-stars svg { width: 15px; height: 15px; fill: rgb(251, 188, 5); stroke: none; }
/*eco_mapp_layout.css*/.sec-reviews-goog .gc-stars svg.off { fill: rgb(238, 182, 185); }
/*eco_mapp_layout.css*/.sec-reviews-goog .gc-qtd { font-size: 12px; color: var(--muted); margin-top: 2px; }
/*eco_mapp_layout.css*/.sec-reviews-goog .gc-mid { display: flex; flex-direction: column; gap: 5px; min-width: 180px; }
/*eco_mapp_layout.css*/.sec-reviews-goog .gc-bar { display: flex; align-items: center; gap: 8px; }
/*eco_mapp_layout.css*/.sec-reviews-goog .gc-bar > span { font-size: 11.5px; color: var(--muted); width: 10px; text-align: right; flex: 0 0 auto; }
/*eco_mapp_layout.css*/.sec-reviews-goog .gc-bar > i { flex: 1 1 0%; height: 7px; border-radius: 99px; background: rgb(244, 210, 212); overflow: hidden; display: block; }
/*eco_mapp_layout.css*/.sec-reviews-goog .gc-bar > i > b { display: block; height: 100%; border-radius: 99px; background: rgb(251, 188, 5); }
/*eco_mapp_layout.css*/.sec-reviews-goog .gc-right { display: flex; flex-direction: column; gap: 9px; min-width: 210px; }
/*eco_mapp_layout.css*/.sec-reviews-goog .gc-btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 13px 18px; border-radius: 12px; text-decoration: none; font-family: var(--font-h); font-size: 13.5px; font-weight: 700; color: rgb(255, 255, 255); background: linear-gradient(135deg, rgb(40, 18, 21), rgb(38, 17, 20)); box-shadow: rgba(40, 18, 21, 0.3) 0px 8px 22px; transition: transform 0.2s, box-shadow 0.2s, filter 0.2s; }
/*eco_mapp_layout.css*/.sec-reviews-goog .gc-btn-primary:hover { transform: translateY(-2px); filter: brightness(1.07); box-shadow: rgba(40, 18, 21, 0.38) 0px 12px 28px; }
/*eco_mapp_layout.css*/.sec-reviews-goog .gc-btn-primary svg { width: 13px; height: 13px; fill: rgb(251, 188, 5); stroke: none; flex: 0 0 auto; }
/*eco_mapp_layout.css*/.sec-reviews-goog .gc-btn-ghost { display: inline-flex; align-items: center; justify-content: center; padding: 11px 16px; border-radius: 12px; text-decoration: none; font-size: 12.5px; font-weight: 600; color: var(--deep); background: rgb(246, 223, 224); border: 1px solid rgb(238, 184, 188); transition: background 0.2s, border-color 0.2s; }
/*eco_mapp_layout.css*/.sec-reviews-goog .gc-btn-ghost:hover { background: rgb(250, 247, 239); border-color: rgb(224, 123, 128); }
/*eco_mapp_layout.css*/.sec-reviews-goog .rev-goog { background: rgb(255, 255, 255); border: 1px solid rgb(240, 195, 198); border-radius: 16px; padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; transition: transform 0.25s, box-shadow 0.25s; }
/*eco_mapp_layout.css*/.sec-reviews-goog .rev-goog:hover { transform: translateY(-3px); box-shadow: rgba(41, 18, 21, 0.1) 0px 14px 34px; }
/*eco_mapp_layout.css*/.sec-reviews-goog .rg-top { display: flex; align-items: center; gap: 11px; }
/*eco_mapp_layout.css*/.sec-reviews-goog .rg-av { width: 38px; height: 38px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center; font-family: var(--font-h); font-size: 16px; font-weight: 700; color: rgb(255, 255, 255); background: linear-gradient(135deg, rgb(40, 18, 21), rgb(41, 18, 21)); }
/*eco_mapp_layout.css*/.sec-reviews-goog .rg-top strong { display: block; font-size: 13.5px; color: var(--deep); font-weight: 700; line-height: 1.25; }
/*eco_mapp_layout.css*/.sec-reviews-goog .rg-stars { display: flex; gap: 2px; margin-top: 2px; }
/*eco_mapp_layout.css*/.sec-reviews-goog .rg-stars svg { width: 12px; height: 12px; fill: rgb(251, 188, 5); stroke: none; }
/*eco_mapp_layout.css*/.sec-reviews-goog .rg-stars svg.off { fill: rgb(238, 182, 185); }
/*eco_mapp_layout.css*/.sec-reviews-goog .rg-g { width: 22px; height: 22px; border-radius: 50%; flex: 0 0 auto; margin-left: auto; display: grid; place-items: center; font-family: var(--font-h); font-size: 12px; font-weight: 700; color: rgb(255, 255, 255); background: conic-gradient(from -45deg, rgb(234, 67, 53) 0deg, rgb(234, 67, 53) 90deg, rgb(251, 188, 5) 90deg, rgb(251, 188, 5) 180deg, rgb(103, 28, 32) 180deg, rgb(103, 28, 32) 270deg, rgb(179, 45, 50) 270deg, rgb(179, 45, 50) 360deg); }
/*eco_mapp_layout.css*/.sec-reviews-goog .rg-txt { font-size: 13.5px; line-height: 1.65; color: rgb(56, 25, 28); margin: 0px; }
/*eco_mapp_layout.css*/.sec-reviews-goog .rg-when { font-size: 11.5px; color: var(--muted); }
/*eco_mapp_layout.css*/.sec-reviews-goog .gc-foot { text-align: center; font-size: 12.5px; color: var(--muted); margin-top: 22px; }
/*eco_mapp_layout.css*/.sec-reviews-goog .gc-foot a { color: var(--blue); font-weight: 700; text-decoration: none; border-bottom: 1px solid rgba(40, 18, 21, 0.35); }
/*eco_mapp_layout.css*/.sec-reviews-goog .gc-foot a:hover { color: var(--deep); }
/*eco_mapp_layout.css*/.sec-reviews-goog .rev-carrossel { position: relative; overflow: hidden; margin-top: 4px; padding: 4px 0px 0px; }
/*eco_mapp_layout.css*/.sec-reviews-goog .rev-trilho { display: flex; gap: 18px; transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1); will-change: transform; }
/*eco_mapp_layout.css*/.sec-reviews-goog .rev-trilho .rev-goog { flex: 0 0 calc(50% - 9px); min-width: 0px; position: relative; background: rgb(255, 255, 255); border: 1px solid rgb(240, 195, 198); border-radius: 16px; padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; transition: box-shadow 0.25s, transform 0.25s, border-color 0.25s; }
/*eco_mapp_layout.css*/.sec-reviews-goog .rev-trilho .rev-goog:hover { box-shadow: rgba(41, 18, 21, 0.1) 0px 14px 34px; transform: translateY(-2px); }
/*eco_mapp_layout.css*/.sec-reviews-goog .rev-goog.rg-destaque { border-color: rgb(201, 162, 39); box-shadow: rgba(201, 162, 39, 0.18) 0px 10px 30px; background: linear-gradient(rgb(255, 253, 246) 0%, rgb(255, 255, 255) 55%); }
/*eco_mapp_layout.css*/.sec-reviews-goog .rg-badge { position: absolute; top: -9px; left: 16px; padding: 3px 10px; border-radius: 99px; font-family: var(--font-h); font-size: 9.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgb(26, 18, 4); background: linear-gradient(135deg, rgb(227, 188, 74), rgb(201, 162, 39)); box-shadow: rgba(201, 162, 39, 0.35) 0px 4px 12px; }
/*eco_mapp_layout.css*/.sec-reviews-goog .rev-nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 20px; }
/*eco_mapp_layout.css*/.sec-reviews-goog .rev-arw { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgb(238, 184, 188); background: rgb(255, 255, 255); color: var(--deep); cursor: pointer; transition: background 0.2s, border-color 0.2s, transform 0.2s; flex: 0 0 auto; }
/*eco_mapp_layout.css*/.sec-reviews-goog .rev-arw:hover { background: var(--deep); border-color: var(--deep); color: rgb(255, 255, 255); transform: scale(1.06); }
/*eco_mapp_layout.css*/.sec-reviews-goog .rev-arw svg { width: 17px; height: 17px; }
/*eco_mapp_layout.css*/.sec-reviews-goog .rev-dots { display: flex; gap: 7px; }
/*eco_mapp_layout.css*/.sec-reviews-goog .rev-dots button { width: 8px; height: 8px; border-radius: 50%; border: 0px; padding: 0px; cursor: pointer; background: rgb(230, 149, 154); transition: width 0.3s, background 0.3s; }
/*eco_mapp_layout.css*/.sec-reviews-goog .rev-dots button.on { width: 26px; border-radius: 99px; background: var(--blue); }
/**/.rg-fonte { font-size: 10.5px; color: rgb(128, 32, 37); letter-spacing: 0.03em; margin-top: 2px; }
/**/.rev-goog p { font-size: 14px; line-height: 1.62; color: rgb(46, 20, 23); margin-top: 12px; }
/**/.rg-fonte { font-size: 10.5px; color: rgb(128, 32, 37); letter-spacing: 0.03em; margin-top: 2px; }
/**/.rg-tag { display: inline-block; margin-top: 10px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: rgb(57, 26, 29); background: rgba(182, 47, 53, 0.18); padding: 4px 10px; border-radius: 999px; }
/**/.rev-goog p { font-size: 14px; line-height: 1.62; color: rgb(46, 20, 23); margin-top: 12px; }
/**/.rev-goog .rg-av { background: rgb(40, 18, 21); color: rgb(182, 47, 53); }
/**/.rev-goog.rg-destaque .rg-av { background: rgb(182, 47, 53); color: rgb(40, 18, 21); }
/**/.rev-goog .rg-stars svg { fill: rgb(245, 183, 0); stroke: none; }

/* ===== AVALIACOES: o trilho/cards herdaram largura errada do eco.css
   (trilho 429px, cards 206px -> cards finos e empilhados). Fixa o padrao:
   2 cards visiveis no desktop, 1 no celular. ===== */
.sec-reviews-goog .rev-carrossel{overflow:hidden!important;position:relative;width:100%}
.sec-reviews-goog #revTrilho{display:flex!important;gap:18px!important;
  width:100%!important;transition:transform .5s cubic-bezier(.4,0,.2,1);
  will-change:transform}
.sec-reviews-goog #revTrilho > .rev-goog{
  flex:0 0 calc((100% - 18px) / 2)!important;
  width:calc((100% - 18px) / 2)!important;
  max-width:none!important;min-width:0!important;
  display:flex!important;flex-direction:column;
  padding:24px 22px!important;box-sizing:border-box;
  background:#fff!important;border:1px solid var(--linha);border-radius:18px;
  box-shadow:0 2px 10px rgba(28,25,26,.05)}
.sec-reviews-goog #revTrilho > .rev-goog.rg-destaque{
  border-color:rgba(177,44,49,.30);box-shadow:0 10px 30px rgba(177,44,49,.10)}
.sec-reviews-goog .rg-top{display:flex;gap:12px;align-items:flex-start;margin-bottom:12px}
.sec-reviews-goog .rg-av{width:42px;height:42px;flex:0 0 42px;border-radius:50%;
  background:linear-gradient(145deg,#B12C31,#D34249);color:#fff;
  display:grid;place-items:center;font-weight:800;font-size:16px}
.sec-reviews-goog .rg-top strong{display:block;font-size:14px;color:var(--ink);
  font-weight:700;margin-bottom:3px}
.sec-reviews-goog .rg-stars{display:flex;gap:2px;margin-bottom:4px}
.sec-reviews-goog .rg-stars svg{width:13px;height:13px;fill:#D34249;stroke:none}
.sec-reviews-goog .rg-fonte{font-size:11px;color:var(--muted)}
.sec-reviews-goog .rg-tag{display:inline-block;align-self:flex-start;
  font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:#8E1F24;background:rgba(177,44,49,.09);border-radius:999px;
  padding:4px 10px;margin-bottom:10px}
.sec-reviews-goog .rev-goog p{font-size:13.5px;line-height:1.7;color:var(--muted);
  margin:0;flex:1}
.sec-reviews-goog .rg-badge{position:absolute;top:14px;right:14px;font-size:9.5px;
  font-weight:800;letter-spacing:.1em;color:#8E1F24;background:rgba(177,44,49,.10);
  border-radius:999px;padding:4px 9px}
.sec-reviews-goog .rev-goog{position:relative}

@media(max-width:900px){
  .sec-reviews-goog #revTrilho > .rev-goog{
    flex:0 0 100%!important;width:100%!important}
}

/* ===== o .rev-carrossel estava com 429px (largura do conteudo, nao do wrap):
   o grid/flex do .wrap nao esticava. Forca largura cheia ate o trilho. ===== */
.sec-reviews-goog .wrap{display:block!important;width:100%!important;max-width:1180px!important;
  margin:0 auto!important;padding:0 20px!important;box-sizing:border-box}
.sec-reviews-goog .rev-carrossel,
.sec-reviews-goog #revCarrossel{display:block!important;width:100%!important;
  max-width:none!important;flex:1 1 auto!important;box-sizing:border-box}
.sec-reviews-goog #revTrilho{width:100%!important;min-width:100%!important;flex:1 1 100%!important}
.sec-reviews-goog .rev-nav{display:flex!important;justify-content:center;gap:10px;margin-top:18px}
.sec-reviews-goog .rev-dots{display:flex!important;justify-content:center;gap:8px;margin-top:14px}
.sec-reviews-goog .rev-dots button{width:8px;height:8px;border-radius:50%;border:0;
  background:rgba(46,45,47,.22);cursor:pointer;padding:0;transition:.2s}
.sec-reviews-goog .rev-dots button.on{background:#B12C31;width:22px;border-radius:99px}

/* ===== logo oficial do Google no card de avaliacoes:
   antes era um "G" serifado sobre conic-gradient (imitacao).
   Agora e' a googleg colorida oficial, em fundo branco limpo. ===== */
.sec-reviews-goog .gc-g{display:grid!important;place-items:center;
  width:46px!important;height:46px!important;border-radius:50%!important;
  background:#fff!important;box-shadow:0 2px 8px rgba(28,25,26,.12);
  border:1px solid rgba(28,25,26,.06)}
.sec-reviews-goog .gc-g img{width:30px!important;height:30px!important;
  display:block;object-fit:contain}

/* ===== botao flutuante do WhatsApp: glifo oficial, centralizado ===== */
.wa-float{display:grid!important;place-items:center;width:60px;height:60px;
  border-radius:50%;background:#25D366!important;
  box-shadow:0 8px 24px rgba(37,211,102,.42)!important}
.wa-float .wa-ico{width:30px!important;height:30px!important;display:block;
  fill:#fff!important;stroke:none!important}
.wa-float:hover .wa-ico{transform:scale(1.06)}

/* ===== AVALIACOES: badge/estrelas/avatar esticando.
   O .rg-badge era position:absolute SEM largura -> ocupava 531px (a linha
   inteira) e o texto "5 ESTRELAS" ficava solto. As estrelas tambem
   esticavam (463px). Avatar mostrava o nome inteiro em vez da inicial.
   ===== */
.sec-reviews-goog .rg-badge{position:absolute!important;top:14px!important;right:14px!important;
  left:auto!important;width:auto!important;height:auto!important;max-width:max-content!important;
  display:inline-block!important;white-space:nowrap!important;
  font-family:var(--font-b)!important;font-size:9.5px!important;font-weight:800!important;
  letter-spacing:.1em!important;line-height:1.6!important;
  color:#8E1F24!important;background:rgba(177,44,49,.10)!important;
  border:1px solid rgba(177,44,49,.22);border-radius:999px!important;
  padding:4px 10px!important;box-shadow:none!important;transform:none!important}

.sec-reviews-goog .rg-stars{display:flex!important;gap:2px!important;
  width:auto!important;max-width:max-content!important;height:auto!important;
  margin:3px 0 2px!important;line-height:0}
.sec-reviews-goog .rg-stars svg{width:13px!important;height:13px!important;
  max-width:13px!important;flex:0 0 13px!important;fill:#D34249!important;stroke:none!important}

.sec-reviews-goog .rg-av{width:42px!important;height:42px!important;
  min-width:42px!important;max-width:42px!important;flex:0 0 42px!important;
  border-radius:50%!important;overflow:hidden;
  background:linear-gradient(145deg,#B12C31,#D34249)!important;color:#fff!important;
  display:grid!important;place-items:center!important;
  font-family:var(--font-h)!important;font-weight:800!important;font-size:17px!important;
  text-transform:uppercase;line-height:1;letter-spacing:0}

/* ==========================================================================
   LIA — ASSISTENTE VIRTUAL (widget do canto inferior direito).
   CSS portado do EcoMAPP; so as cores foram convertidas para a paleta
   do VIPPER (verde -> vermelho/grafite).
   ========================================================================== */
/*eco.css*/.lia-float { position: fixed !important; right: 22px !important; left: auto !important; bottom: 22px !important; z-index: 71 !important; display: flex !important; align-items: center !important; gap: 11px !important; padding: 6px 16px 6px 6px !important; border-radius: 999px !important; background: rgb(40, 18, 21) !important; text-decoration: none !important; box-shadow: rgba(0, 0, 0, 0.3) 0px 12px 30px !important; transition: transform 0.2s, box-shadow 0.2s, background 0.2s !important; }
/*eco.css*/.lia-float:hover { transform: translateY(-3px) !important; background: rgb(46, 20, 23) !important; box-shadow: rgba(0, 0, 0, 0.38) 0px 16px 38px !important; }
/*eco.css*/.lia-float img { width: 52px !important; height: 52px !important; border-radius: 50% !important; display: block !important; border: 2.5px solid rgb(182, 47, 53) !important; object-fit: cover !important; background: rgb(255, 255, 255) !important; }
/*eco.css*/.lia-tip { display: flex !important; flex-direction: column !important; line-height: 1.15 !important; white-space: nowrap !important; }
/*eco.css*/.lia-tip strong { font-family: var(--font-b,system-ui) !important; font-size: 14px !important; font-weight: 800 !important; color: rgb(255, 255, 255) !important; }
/*eco.css*/.lia-tip small { font-size: 10.5px !important; font-weight: 600 !important; color: rgb(200, 59, 65) !important; letter-spacing: 0.04em !important; margin-top: 2px !important; }
/*eco.css*/.lia-dot { position: absolute !important; left: 44px !important; bottom: 8px !important; width: 12px !important; height: 12px !important; border-radius: 50% !important; background: rgb(168, 42, 47) !important; border: 2.5px solid rgb(40, 18, 21) !important; box-shadow: rgba(168, 42, 47, 0.6) 0px 0px 0px 0px !important; animation: 2s ease-out 0s infinite normal none running liaOnline !important; }
/*eco.css*/.lia-wrap { position: fixed !important; right: 22px !important; bottom: 96px !important; z-index: 90 !important; display: flex !important; flex-direction: column !important; align-items: flex-end !important; gap: 12px !important; font-family: var(--font-b,system-ui) !important; }
/*eco.css*/.lia-card { display: none; flex-direction: column !important; width: 374px !important; max-width: calc(-32px + 100vw) !important; height: min(620px, 72vh) !important; background: rgb(255, 255, 255) !important; border-radius: 20px !important; overflow: hidden !important; box-shadow: rgba(0, 0, 0, 0.34) 0px 30px 70px !important; border: 1px solid rgb(237, 177, 181) !important; }
/*eco.css*/.lia-card.on { display: flex !important; }
/*eco.css*/.lia-head { display: flex !important; align-items: center !important; gap: 12px !important; padding: 14px 16px !important; background: rgb(40, 18, 21) !important; color: rgb(255, 255, 255) !important; position: relative !important; }
/*eco.css*/.lia-head .av { width: 44px !important; height: 44px !important; border-radius: 50% !important; overflow: visible !important; position: relative !important; flex: 0 0 auto !important; background: rgb(182, 47, 53) !important; }
/*eco.css*/.lia-head .av img { width: 100% !important; height: 100% !important; object-fit: cover !important; border-radius: 50% !important; display: block !important; border: 2px solid rgba(255, 255, 255, 0.45) !important; }
/*eco.css*/.lia-head .av .on { position: absolute !important; right: -2px !important; bottom: -2px !important; width: 13px !important; height: 13px !important; border-radius: 50% !important; background: rgb(168, 42, 47) !important; border: 2.5px solid rgb(40, 18, 21) !important; }
/*eco.css*/.lia-head .inf { display: flex !important; flex-direction: column !important; line-height: 1.2 !important; flex: 1 1 auto !important; min-width: 0px !important; }
/*eco.css*/.lia-head .inf strong { font-size: 15px !important; font-weight: 800 !important; color: rgb(255, 255, 255) !important; }
/*eco.css*/.lia-head .inf span { font-size: 11.5px !important; color: rgb(200, 59, 65) !important; font-weight: 600 !important; margin-top: 2px !important; }
/*eco.css*/.lia-head .x { background: rgba(255, 255, 255, 0.14) !important; border: 0px !important; color: rgb(255, 255, 255) !important; width: 32px !important; height: 32px !important; border-radius: 50% !important; cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: center !important; transition: background 0.18s !important; flex: 0 0 auto !important; }
/*eco.css*/.lia-head .x:hover { background: rgba(255, 255, 255, 0.28) !important; }
/*eco.css*/.lia-body { flex: 1 1 auto !important; overflow-y: auto !important; padding: 18px 16px !important; background: rgb(246, 220, 222) !important; display: flex !important; flex-direction: column !important; gap: 10px !important; scroll-behavior: smooth !important; }
/*eco.css*/.lia-body::-webkit-scrollbar { width: 6px; }
/*eco.css*/.lia-body::-webkit-scrollbar-thumb { background: rgb(223, 117, 123); border-radius: 99px; }
/*eco.css*/.lia-typing { display: flex !important; gap: 5px !important; padding: 13px 16px !important; background: rgb(255, 255, 255) !important; border: 1px solid rgb(237, 177, 181) !important; border-radius: 16px 16px 16px 5px !important; align-self: flex-start !important; width: fit-content !important; }
/*eco.css*/.lia-typing i { width: 7px !important; height: 7px !important; border-radius: 50% !important; background: rgb(182, 47, 53) !important; animation: 1.2s ease 0s infinite normal none running tp !important; }
/*eco.css*/.lia-typing i:nth-child(2) { animation-delay: 0.18s !important; }
/*eco.css*/.lia-typing i:nth-child(3) { animation-delay: 0.36s !important; }
/*eco.css*/.lia-ac { display: flex !important; flex-wrap: wrap !important; gap: 7px !important; margin-top: 4px !important; align-self: flex-start !important; }
/*eco.css*/.lia-ac button, .lia-ac a { display: inline-flex !important; align-items: center !important; gap: 6px !important; height: 36px !important; padding: 0px 15px !important; border-radius: 999px !important; background: rgb(182, 47, 53) !important; color: rgb(40, 18, 20) !important; border: 0px !important; cursor: pointer !important; font-size: 12.5px !important; font-weight: 800 !important; text-decoration: none !important; }
/*eco.css*/.lia-ac button:hover, .lia-ac a:hover { background: rgb(200, 59, 65) !important; }
/*eco.css*/.lia-ac .out { background: rgb(255, 255, 255) !important; color: rgb(40, 18, 21) !important; border: 1.5px solid rgb(223, 117, 123) !important; }
/*eco.css*/.lia-ac .out:hover { background: rgb(242, 204, 207) !important; }
/*eco.css*/.lia-chips { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; padding: 12px 14px !important; background: rgb(255, 255, 255) !important; border-top: 1px solid rgb(241, 197, 200) !important; }
/*eco.css*/.lia-chips button { height: 34px !important; padding: 0px 15px !important; border-radius: 999px !important; background: rgb(244, 211, 213) !important; border: 1.5px solid rgb(231, 152, 156) !important; color: rgb(40, 18, 21) !important; font-size: 12.5px !important; font-weight: 700 !important; cursor: pointer !important; transition: 0.18s !important; white-space: nowrap !important; }
/*eco.css*/.lia-chips button:hover { background: rgb(40, 18, 21) !important; color: rgb(255, 255, 255) !important; border-color: rgb(40, 18, 21) !important; }
/*eco.css*/.lia-foot { display: flex !important; align-items: center !important; gap: 9px !important; padding: 12px 14px !important; background: rgb(255, 255, 255) !important; border-top: 1px solid rgb(241, 197, 200) !important; }
/*eco.css*/.lia-foot .lia-mic { background: 0px center !important; border: 0px !important; color: rgb(129, 32, 37) !important; width: 34px !important; height: 34px !important; cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; transition: color 0.18s !important; }
/*eco.css*/.lia-foot .lia-mic:hover { color: rgb(40, 18, 21) !important; }
/*eco.css*/.lia-foot input { flex: 1 1 auto !important; min-width: 0px !important; height: 44px !important; border: 1.5px solid rgb(234, 164, 168) !important; border-radius: 999px !important; padding: 0px 16px !important; font-size: 13.5px !important; color: rgb(41, 18, 21) !important; background: rgb(255, 255, 255) !important; outline: 0px !important; font-family: inherit !important; }
/*eco.css*/.lia-foot input:focus { border-color: rgb(73, 27, 30) !important; box-shadow: rgba(73, 27, 30, 0.12) 0px 0px 0px 3px !important; }
/*eco.css*/.lia-foot button[type="submit"] { width: 44px !important; height: 44px !important; border-radius: 50% !important; background: rgb(40, 18, 21) !important; color: rgb(255, 255, 255) !important; border: 0px !important; cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; transition: background 0.18s !important; }
/*eco.css*/.lia-foot button[type="submit"]:hover { background: rgb(57, 26, 29) !important; }
/*eco.css*/.lia-brand { display: block !important; text-align: center !important; font-size: 9px !important; letter-spacing: 0.22em !important; color: rgb(207, 63, 70) !important; font-weight: 700 !important; padding: 0px 0px 9px !important; background: rgb(255, 255, 255) !important; }
/*eco.css*/.lia-launch { position: relative !important; width: 62px !important; height: 62px !important; border-radius: 50% !important; border: 0px !important; cursor: pointer !important; padding: 0px !important; background: transparent !important; box-shadow: rgba(0, 0, 0, 0.28) 0px 12px 30px !important; transition: transform 0.2s !important; }
/*eco.css*/.lia-launch:hover { transform: translateY(-3px) scale(1.04) !important; }
/*eco.css*/.lia-launch img { width: 62px !important; height: 62px !important; border-radius: 50% !important; display: block !important; object-fit: cover !important; border: 3px solid rgb(182, 47, 53) !important; box-shadow: rgba(255, 255, 255, 0.85) 0px 0px 0px 3px !important; }
/*eco.css*/.lia-badge { position: absolute !important; right: -3px !important; bottom: 2px !important; width: 20px !important; height: 20px !important; border-radius: 50% !important; background: rgb(168, 42, 47) !important; border: 3px solid rgb(255, 255, 255) !important; }
/*eco.css*/.lia-tag { display: flex !important; align-items: center !important; gap: 10px !important; background: rgb(255, 255, 255) !important; border-radius: 14px !important; padding: 10px 12px !important; box-shadow: rgba(0, 0, 0, 0.16) 0px 12px 30px !important; border: 1px solid rgb(237, 177, 181) !important; cursor: pointer !important; max-width: 250px !important; position: relative !important; }
/*eco.css*/.lia-tag-ico { width: 32px !important; height: 32px !important; border-radius: 50% !important; background: rgb(40, 18, 21) !important; display: flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; }
/*eco.css*/.lia-tag-ico svg { width: 16px !important; height: 16px !important; stroke: rgb(182, 47, 53) !important; }
/*eco.css*/.lia-tag-badge { position: absolute !important; top: -7px !important; right: 8px !important; background: rgb(168, 42, 47) !important; color: rgb(38, 17, 20) !important; font-size: 8.5px !important; font-weight: 800 !important; letter-spacing: 0.06em !important; padding: 2px 7px !important; border-radius: 999px !important; text-transform: uppercase !important; }
/*eco.css*/.lia-tag-x { position: absolute !important; top: -8px !important; left: -8px !important; width: 20px !important; height: 20px !important; border-radius: 50% !important; background: rgb(255, 255, 255) !important; border: 1px solid rgb(237, 177, 181) !important; color: rgb(129, 32, 37) !important; cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 11px !important; padding: 0px !important; }
/*eco.css*/.lia-tag-x:hover { background: rgb(244, 211, 213) !important; color: rgb(40, 18, 21) !important; }
/*eco.css*/.lia-wrap { width: auto !important; height: auto !important; max-width: none !important; }
/*eco.css*/.lia-wrap .lia-launch, button.lia-launch, #liaLaunch { width: 62px !important; min-width: 62px !important; max-width: 62px !important; height: 62px !important; min-height: 62px !important; max-height: 62px !important; flex: 0 0 62px !important; display: block !important; padding: 0px !important; margin: 0px !important; border-radius: 50% !important; background: transparent !important; border: 0px !important; box-sizing: border-box !important; overflow: visible !important; }
/*eco.css*/.lia-wrap .lia-launch img, #liaLaunch img { width: 62px !important; min-width: 62px !important; max-width: 62px !important; height: 62px !important; min-height: 62px !important; max-height: 62px !important; border-radius: 50% !important; display: block !important; object-fit: cover !important; box-sizing: border-box !important; }
/*eco.css*/.lia-wrap .lia-tag { width: auto !important; max-width: 250px !important; flex: 0 0 auto !important; }
/*eco.css*/.lia-wrap .lia-card { width: 374px !important; min-width: 0px !important; max-width: calc(-32px + 100vw) !important; }
/*eco.css*/.lia-wrap { right: 22px !important; left: auto !important; bottom: 22px !important; align-items: flex-end !important; gap: 10px !important; z-index: 90 !important; flex-direction: column !important; }
/*eco.css*/.lia-wrap .lia-launch, #liaLaunch { order: 2 !important; margin-bottom: 0px !important; }
/*eco.css*/.lia-wrap .lia-tag { order: 1 !important; margin-bottom: 0px !important; }
/*eco.css*/.lia-wrap .lia-card { order: 0 !important; }
/*eco.css*/.lia-wrap .lia-card.on + .lia-tag { display: none !important; }
/*eco.css*/.lia-wrap .lia-launch, button.lia-launch, #liaLaunch { width: 76px !important; min-width: 76px !important; max-width: 76px !important; height: 76px !important; min-height: 76px !important; max-height: 76px !important; flex: 0 0 76px !important; }
/*eco.css*/.lia-wrap .lia-launch img, #liaLaunch img { width: 76px !important; min-width: 76px !important; max-width: 76px !important; height: 76px !important; min-height: 76px !important; max-height: 76px !important; border: 3px solid rgb(182, 47, 53) !important; box-shadow: rgba(255, 255, 255, 0.9) 0px 0px 0px 3px, rgba(0, 0, 0, 0.32) 0px 14px 34px !important; }
/*eco.css*/.lia-wrap { bottom: 22px !important; }
/*eco.css*/.lia-bubble { position: absolute !important; right: 88px !important; bottom: 14px !important; background: rgb(255, 255, 255) !important; border-radius: 16px 16px 5px !important; padding: 12px 16px !important; box-shadow: rgba(0, 0, 0, 0.2) 0px 14px 36px !important; max-width: 250px !important; display: flex !important; flex-direction: column !important; gap: 4px !important; animation: 0.45s cubic-bezier(0.22, 1.2, 0.4, 1) 0s 1 normal none running bubbleIn !important; z-index: 2 !important; border: 1px solid rgb(237, 177, 181) !important; }
/*eco.css*/.lia-bubble strong { font-size: 12.5px !important; font-weight: 800 !important; color: rgb(40, 18, 21) !important; display: flex !important; align-items: center !important; gap: 6px !important; }
/*eco.css*/.lia-bubble strong .dot-on { width: 7px !important; height: 7px !important; border-radius: 50% !important; background: rgb(168, 42, 47) !important; flex: 0 0 auto !important; }
/*eco.css*/.lia-bubble p { margin: 0px !important; font-size: 12.5px !important; line-height: 1.45 !important; color: rgb(51, 23, 26) !important; }
/*eco.css*/.lia-bubble .hora { font-size: 10px !important; color: rgb(183, 48, 53) !important; margin-top: 2px !important; }
/*eco.css*/.lia-bubble::after { content: "" !important; position: absolute !important; right: -7px !important; bottom: 16px !important; width: 0px !important; height: 0px !important; border-left: 9px solid rgb(255, 255, 255) !important; border-top: 7px solid transparent !important; border-bottom: 7px solid transparent !important; }
/*eco.css*/.lia-count { position: absolute !important; top: -3px !important; right: -3px !important; min-width: 24px !important; height: 24px !important; border-radius: 999px !important; background: rgb(229, 72, 77) !important; color: rgb(255, 255, 255) !important; font-size: 12px !important; font-weight: 800 !important; display: flex !important; align-items: center !important; justify-content: center !important; border: 3px solid rgb(255, 255, 255) !important; box-shadow: rgba(229, 72, 77, 0.45) 0px 4px 12px !important; animation: 2s ease-in-out 0s infinite normal none running countPulse !important; z-index: 3 !important; font-family: var(--font-b,system-ui) !important; }
/*eco.css*/.lia-wrap .lia-badge { display: none !important; }
/*eco_mapp_layout.css*/.lia-tag { background: linear-gradient(135deg, rgb(248, 231, 232) 0%, rgb(255, 255, 255) 45%, rgb(242, 203, 205) 100%); border: 1.5px solid var(--green); border-radius: 12px; align-items: center; white-space: nowrap; gap: 9px; padding: 10px 28px 10px 11px; margin-right: 6px; animation: 0.45s cubic-bezier(0.2, 0.9, 0.25, 1.1) 0s 1 normal both running liaTagIn; display: inline-flex; position: relative; cursor: pointer; box-shadow: rgba(38, 17, 20, 0.2) 0px 14px 34px, rgba(52, 23, 26, 0.26) 0px 4px 11px; }
/*eco_mapp_layout.css*/.lia-tag.hide { display: none; }
/*eco_mapp_layout.css*/.lia-tag-ico { color: rgb(255, 255, 255); background: linear-gradient(135deg,var(--green),var(--teal)); border-radius: 7px; flex: 0 0 auto; padding: 6px; display: grid; place-items: center; box-shadow: rgba(52, 23, 26, 0.4) 0px 3px 8px; }
/*eco_mapp_layout.css*/.lia-tag-ico svg { width: 16px; height: 16px; stroke: rgb(255, 255, 255); fill: none; stroke-width: 2; }
/*eco_mapp_layout.css*/.lia-tag .lt-tx { flex-direction: column; line-height: 1.2; display: flex; }
/*eco_mapp_layout.css*/.lia-tag strong { color: var(--deep); letter-spacing: 0.1px; font-size: 14px; font-weight: 800; font-family: var(--font-h); display: block; line-height: 1.2; }
/*eco_mapp_layout.css*/.lia-tag em { color: rgb(80, 27, 31); font-size: 11px; font-style: normal; font-weight: 600; display: block; margin-top: 2px; }
/*eco_mapp_layout.css*/.lia-tag-badge { color: rgb(255, 255, 255); letter-spacing: 0.3px; text-transform: uppercase; background: linear-gradient(135deg,var(--teal),#832025); border-radius: 999px; flex: 0 0 auto; align-items: center; gap: 4px; padding: 4px 9px; font-size: 10px; font-weight: 800; display: inline-flex; box-shadow: rgba(88, 27, 31, 0.35) 0px 2px 7px; }
/*eco_mapp_layout.css*/.lia-tag-badge::before { content: ""; background: rgb(236, 174, 178); border-radius: 50%; width: 6px; height: 6px; animation: 1.6s ease 0s infinite normal none running liaDot; }
/*eco_mapp_layout.css*/.lia-tag-seta { background: rgb(244, 210, 212); border-bottom: 1.5px solid var(--green); border-right: 1.5px solid var(--green); border-radius: 0px 0px 2px; width: 10px; height: 10px; position: absolute; bottom: -6px; right: 26px; transform: rotate(45deg); }
/*eco_mapp_layout.css*/.lia-tag-x { color: rgb(255, 255, 255); cursor: pointer; background: rgb(143, 32, 32); border: 1.5px solid rgb(255, 255, 255); border-radius: 50%; place-items: center; width: 20px; height: 20px; padding: 0px; transition: 0.2s; display: grid; position: absolute; top: -7px; right: -7px; box-shadow: rgba(0, 0, 0, 0.22) 0px 3px 8px; }
/*eco_mapp_layout.css*/.lia-tag-x:hover { background: rgb(168, 42, 42); transform: scale(1.08); }
/*eco_mapp_layout.css*/.lia-tag-x svg { width: 11px; height: 11px; stroke: rgb(255, 255, 255); stroke-width: 2.6; }
/*eco_mapp_layout.css*/.lia-wrap { position: fixed; bottom: 26px; right: 26px; z-index: 80; font-family: var(--font-b); display: flex; flex-direction: column; align-items: flex-end; gap: 12px; overflow: visible; }
/*eco_mapp_layout.css*/.lia-launcher { width: 78px; height: 78px; border-radius: 50%; border: 0px; cursor: pointer; padding: 0px; background: linear-gradient(140deg,var(--blue),var(--sky)); overflow: visible; position: relative; box-shadow: rgba(161, 40, 45, 0.4) 0px 14px 36px; transition: transform 0.25s; }
/*eco_mapp_layout.css*/.lia-launcher:hover { transform: scale(1.07); }
/*eco_mapp_layout.css*/.lia-launcher img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
/*eco_mapp_layout.css*/.lia-launcher .dot { position: absolute; top: auto; right: 4px; bottom: 4px; width: 20px; height: 20px; border-radius: 50%; background: rgb(126, 31, 36); border: 3px solid rgb(255, 255, 255); box-shadow: rgba(0, 0, 0, 0.35) 0px 2px 8px; z-index: 5; }
/*eco_mapp_layout.css*/.lia-launcher .dot::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid rgb(126, 31, 36); animation: 1.8s ease 0s infinite normal none running liaPulse; pointer-events: none; }
/*eco_mapp_layout.css*/.lia-card { position: absolute; bottom: 76px; right: 0px; width: 370px; max-width: calc(-44px + 100vw); background: rgb(255, 255, 255); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); overflow: hidden; display: none; flex-direction: column; border: 1px solid var(--line); }
/*eco_mapp_layout.css*/.lia-card.open { display: flex; }
/*eco_mapp_layout.css*/.lia-head { background: linear-gradient(140deg,var(--deep),var(--green)); padding: 17px 19px; display: flex; align-items: center; gap: 12px; }
/*eco_mapp_layout.css*/.lia-head .av { position: relative; width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(140deg,var(--blue),var(--sky)); display: grid; place-items: center; flex-shrink: 0; }
/*eco_mapp_layout.css*/.lia-head .av svg { width: 22px; height: 22px; stroke: rgb(255, 255, 255); fill: none; stroke-width: 1.8; }
/*eco_mapp_layout.css*/.lia-head .av .on { position: absolute; right: 0px; bottom: 0px; width: 13px; height: 13px; border-radius: 50%; background: rgb(126, 31, 36); border: 2.5px solid rgb(255, 255, 255); box-shadow: rgba(0, 0, 0, 0.25) 0px 1px 4px; z-index: 2; }
/*eco_mapp_layout.css*/.lia-head .inf { flex: 1 1 0%; min-width: 0px; }
/*eco_mapp_layout.css*/.lia-head strong { display: block; font-family: var(--font-h); font-size: 15px; color: rgb(255, 255, 255); font-weight: 600; }
/*eco_mapp_layout.css*/.lia-head span { font-size: 11.5px; color: rgba(255, 255, 255, 0.7); }
/*eco_mapp_layout.css*/.lia-head .x { background: 0px center; border: 0px; cursor: pointer; padding: 6px; border-radius: 50%; }
/*eco_mapp_layout.css*/.lia-head .x svg { width: 17px; height: 17px; stroke: rgba(255, 255, 255, 0.8); fill: none; stroke-width: 2; }
/*eco_mapp_layout.css*/.lia-head .x:hover { background: rgba(255, 255, 255, 0.14); }
/*eco_mapp_layout.css*/.lia-body { padding: 18px; height: 340px; overflow-y: auto; background: rgb(247, 226, 228); display: flex; flex-direction: column; gap: 12px; }
/*eco_mapp_layout.css*/.lia-body::-webkit-scrollbar { width: 6px; }
/*eco_mapp_layout.css*/.lia-body::-webkit-scrollbar-thumb { background: rgba(40, 18, 20, 0.16); border-radius: 6px; }
/*eco_mapp_layout.css*/.lia-chips { display: flex; gap: 8px; padding: 11px 15px; background: rgb(255, 255, 255); border-top: 1px solid var(--line); flex-wrap: wrap; }
/*eco_mapp_layout.css*/.lia-chips button { background: var(--sand); border: 1px solid var(--line); border-radius: var(--r-pill); font-family: var(--font-h); font-size: 11.5px; font-weight: 500; padding: 8px 14px; cursor: pointer; color: var(--deep); transition: 0.2s; white-space: nowrap; }
/*eco_mapp_layout.css*/.lia-chips button:hover { background: var(--blue); color: rgb(255, 255, 255); border-color: var(--blue); }
/*eco_mapp_layout.css*/.lia-foot { display: flex; gap: 9px; padding: 13px 15px; background: rgb(255, 255, 255); border-top: 1px solid var(--line); align-items: center; }
/*eco_mapp_layout.css*/.lia-foot input { flex: 1 1 0%; height: 44px; border: 1.5px solid var(--line); border-radius: var(--r-pill); padding: 0px 16px; font-family: var(--font-b); font-size: 13.8px; outline: none; transition: 0.2s; }
/*eco_mapp_layout.css*/.lia-foot input:focus { border-color: var(--blue); box-shadow: rgba(161, 40, 45, 0.12) 0px 0px 0px 4px; }
/*eco_mapp_layout.css*/.lia-foot button { width: 44px; height: 44px; border-radius: 50%; border: 0px; background: var(--blue); cursor: pointer; display: grid; place-items: center; flex-shrink: 0; transition: 0.2s; }
/*eco_mapp_layout.css*/.lia-foot button:hover { background: var(--blue-d); }
/*eco_mapp_layout.css*/.lia-foot button:disabled { opacity: 0.45; cursor: not-allowed; }
/*eco_mapp_layout.css*/.lia-foot button svg { width: 17px; height: 17px; stroke: rgb(255, 255, 255); fill: none; stroke-width: 2; }
/*eco_mapp_layout.css*/.lia-brand { display: block; text-align: center; font-family: var(--font-h); font-size: 9.5px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); padding: 9px; background: rgb(255, 255, 255); border-top: 1px solid var(--line); }
/*eco_mapp_layout.css*/.lia-launcher { position: relative; }
/*eco_mapp_layout.css*/.lia-badge { position: absolute; top: -6px; right: -6px; width: 24px; height: 24px; border-radius: 50%; background: rgb(143, 32, 32); color: rgb(255, 255, 255); font-family: var(--font-b); font-size: 11.5px; font-weight: 800; display: grid; place-items: center; border: 2.5px solid rgb(255, 255, 255); line-height: 1; z-index: 9; box-shadow: rgba(0, 0, 0, 0.35) 0px 3px 9px; }
/*eco_mapp_layout.css*/.lia-badge.hide { display: none; }
/*eco_mapp_layout.css*/.lia-badge.hide { animation: auto ease 0s 1 normal none running none; }
/*eco_mapp_layout.css*/.lia-foot .lia-mic { width: 38px; height: 38px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center; background: transparent; border: 0px; cursor: pointer; color: var(--muted); transition: 0.2s; }
/*eco_mapp_layout.css*/.lia-foot .lia-mic svg { width: 18px; height: 18px; stroke: currentcolor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/*eco_mapp_layout.css*/.lia-foot .lia-mic:hover { background: var(--sand); color: var(--blue); }
/*eco_mapp_layout.css*/.lia-foot .lia-mic.gravando { background: rgb(229, 72, 77); color: rgb(255, 255, 255); animation: 1.2s ease 0s infinite normal none running micPulse; }
/*eco_mapp_layout.css*/.lia-foot .lia-mic.gravando::after { content: ""; position: absolute; width: 38px; height: 38px; border-radius: 50%; border: 2px solid rgb(229, 72, 77); animation: 1.2s ease 0s infinite normal none running micRing; }
/*eco_mapp_layout.css*/.lia-foot .lia-mic { position: relative; }
/*eco_mapp_layout.css*/.lia-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0px 10px 2px; }
/*eco_mapp_layout.css*/.lia-act { display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-family: var(--font-h); font-size: 12.5px; font-weight: 700; text-decoration: none; border-radius: 999px; padding: 10px 16px; cursor: pointer; border: 1.5px solid transparent; transition: 0.2s; }
/*eco_mapp_layout.css*/.lia-act.go { background: linear-gradient(140deg,var(--blue),var(--deep)); color: rgb(255, 255, 255); box-shadow: rgba(40, 18, 21, 0.28) 0px 6px 16px; }
/*eco_mapp_layout.css*/.lia-act.go:hover { box-shadow: rgba(40, 18, 21, 0.38) 0px 10px 24px; transform: translateY(-1px); }
/*eco_mapp_layout.css*/.lia-act.wa { background: rgb(126, 31, 36); color: rgb(255, 255, 255); box-shadow: rgba(126, 31, 36, 0.3) 0px 6px 16px; }
/*eco_mapp_layout.css*/.lia-act.wa:hover { background: rgb(103, 28, 32); transform: translateY(-1px); }
/*eco_mapp_layout.css*/.lia-acoes .lia-act { flex: 1 1 auto; }

/* ==========================================================================
   FOOTER — refeito 29/10/2026.
   PROBLEMAS ANTES:
     1. `ftr-b` era usado DUAS VEZES (coluna da logo E barra de copyright),
        entao a coluna da logo ganhava um retangulo escuro destoante e a
        barra inferior virava um bloco preto solto;
     2. colunas desiguais (356 / 237 / 237 / 237) com gap de 44px;
     3. texto rosa (EBA9AD) em paragrafo longo -> footer "lavado";
     4. endereco quebrando em 2 linhas apertadas.
   AGORA: 4 colunas equilibradas, uma cor de fundo so, textos legiveis e
   hierarquia clara (titulos em rosa, corpo em branco 70%).
   ========================================================================== */
footer.ftr{background:#1E1012!important;color:rgba(255,255,255,.72);
  padding:clamp(44px,5vw,64px) 0 0;border-top:1px solid rgba(255,255,255,.08)}

/* grade: marca mais larga + 3 colunas iguais, gap proporcional */
footer.ftr .ftr-grid{display:grid!important;
  grid-template-columns:1.6fr 1fr 1fr 1fr!important;
  gap:clamp(24px,3.5vw,48px)!important;align-items:start;
  max-width:1200px!important;margin:0 auto;padding:0 20px 40px!important}

/* coluna da marca: SEM caixa escura, so conteudo */
footer.ftr .ftr-col.ftr-marca{background:none!important;padding:0!important;
  border:0!important;border-radius:0!important;box-shadow:none!important}
footer.ftr .ftr-logo{display:block;width:auto;height:64px;margin:0 0 16px;filter:none}
footer.ftr .ftr-marca p{font-size:13px!important;line-height:1.72!important;
  color:rgba(255,255,255,.66)!important;margin:0 0 14px;max-width:34ch}
footer.ftr .ftr-marca p.ftr-end{font-size:12.5px!important;line-height:1.65!important;
  color:rgba(255,255,255,.52)!important;margin-bottom:18px}

/* redes sociais da marca */
footer.ftr .ftr-redes{display:flex;gap:9px;margin-top:4px}
footer.ftr .ftr-soc{width:36px;height:36px;border-radius:50%;
  display:grid;place-items:center;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.13);color:#fff!important;
  font-size:15px;transition:.22s;text-decoration:none}
footer.ftr .ftr-soc:hover{background:#B12C31;border-color:#B12C31;transform:translateY(-2px)}

/* colunas de links */
footer.ftr .ftr-col h5{font-family:var(--font-h);font-size:11px!important;
  font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:#EBA9AD!important;margin:0 0 16px!important;padding:0!important}
footer.ftr .ftr-col a{display:block;font-size:13px!important;line-height:1.5!important;
  color:rgba(255,255,255,.70)!important;text-decoration:none;
  padding:5px 0;transition:color .18s,transform .18s}
footer.ftr .ftr-col a:hover{color:#fff!important;transform:translateX(3px)}

/* barra inferior: UMA faixa discreta, nao um bloco solto */
footer.ftr .ftr-barra{background:rgba(0,0,0,.26)!important;border:0!important;
  border-top:1px solid rgba(255,255,255,.08)!important;
  border-radius:0!important;margin:0!important;padding:0!important}
footer.ftr .ftr-barra-in{display:flex!important;align-items:center;justify-content:space-between;
  gap:18px;flex-wrap:wrap;max-width:1200px;margin:0 auto;
  padding:16px 20px!important;font-size:12px!important;
  color:rgba(255,255,255,.50)!important}
footer.ftr .ftr-sahost{display:inline-flex;align-items:center;gap:8px;
  color:rgba(255,255,255,.72)!important;font-size:11.5px!important;font-weight:700;
  letter-spacing:.06em;text-decoration:none;transition:.2s}
footer.ftr .ftr-sahost:hover{color:#fff!important}
footer.ftr .ftr-sahost img{height:20px;width:auto;filter:none;opacity:.92}

/* responsivo */
@media(max-width:980px){
  footer.ftr .ftr-grid{grid-template-columns:1fr 1fr!important;
    gap:32px 28px!important;padding-bottom:32px!important}
  footer.ftr .ftr-marca{grid-column:1 / -1}
  footer.ftr .ftr-logo{height:56px}
}
@media(max-width:560px){
  footer.ftr .ftr-grid{grid-template-columns:1fr!important;gap:26px!important}
  footer.ftr .ftr-barra-in{flex-direction:column;align-items:flex-start;
    gap:10px;font-size:11.5px!important}
}

/* ===== FOOTER: botoes sociais com as LOGOS OFICIAIS =====
   Antes eram 3 botoes cinza com traco generico (telefone, whatsapp, mail).
   Agora: e-mail + Instagram + Facebook, cada um com a cor da propria marca.
   O telefone e o WhatsApp sairam do footer (ficam no header e no botao flutuante). */
footer.ftr .ftr-redes{display:flex;gap:10px;margin-top:2px;align-items:center}
footer.ftr .ftr-soc{width:38px!important;height:38px!important;border-radius:11px!important;
  display:grid!important;place-items:center;background:rgba(255,255,255,.07)!important;
  border:1px solid rgba(255,255,255,.13)!important;color:rgba(255,255,255,.88)!important;
  text-decoration:none;transition:transform .2s,background .2s,border-color .2s,color .2s}
footer.ftr .ftr-soc svg{width:17px!important;height:17px!important;display:block;
  fill:currentColor;stroke:currentColor}
footer.ftr .ftr-soc:hover{transform:translateY(-3px)}

/* e-mail: vermelho da marca */
footer.ftr .ftr-soc.ftr-email:hover{background:#B12C31!important;border-color:#B12C31!important;
  color:#fff!important}

/* Instagram: gradiente oficial da marca */
footer.ftr .ftr-soc.ftr-ig:hover{background:linear-gradient(45deg,#F9CE34,#EE2A7B 48%,#6228D7)!important;
  border-color:transparent!important;color:#fff!important}

/* Facebook: azul oficial */
footer.ftr .ftr-soc.ftr-fb:hover{background:#1877F2!important;border-color:#1877F2!important;
  color:#fff!important}

/* no estado normal o icone do facebook fica com o azul da marca */
footer.ftr .ftr-soc.ftr-fb{color:#7EA9F0!important}
footer.ftr .ftr-soc.ftr-fb:hover{color:#fff!important}
footer.ftr .ftr-soc.ftr-ig{color:#E49AB8!important}
footer.ftr .ftr-soc.ftr-ig:hover{color:#fff!important}

/* ==========================================================================
   NOSSA HISTORIA — correcoes de layout (29/10/2026)
   BUG: .f-stats (grid de 4 numeros do fundador) tinha colunas fixas de
   163.5px somando 654px dentro de um container de 696px => o 4o card
   ("14 anos de operacao") vazava 42px para fora, aparecendo solto na
   margem direita. Tambem o .f-ig (instagram + botao) estourava a linha.
   ========================================================================== */
.founder .f-stats{display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:12px!important;width:100%!important;max-width:100%!important}
.founder .f-stats > div{min-width:0!important;width:auto!important;
  box-sizing:border-box}
.founder .f-stats strong, .founder .f-stats b{font-size:22px!important;line-height:1.1}
.founder .f-stats span, .founder .f-stats small{font-size:11px!important;line-height:1.3}

/* linha do instagram do fundador: nao pode estourar */
.founder .f-ig{display:flex!important;align-items:center!important;gap:12px!important;
  flex-wrap:wrap!important;width:100%!important;max-width:100%!important;
  box-sizing:border-box}
.founder .f-ig > a, .founder .f-ig .btn{flex:0 0 auto!important;width:auto!important;
  max-width:max-content!important;white-space:nowrap}
.founder .f-ig img{flex:0 0 auto}
.founder .f-ig .btn-blue{background:#B12C31!important;border-color:#B12C31!important;
  color:#fff!important;font-size:12.5px!important;padding:9px 18px!important;
  border-radius:999px!important}

/* o container do texto do fundador nao pode transbordar */
.founder{overflow:hidden}
.founder > div{min-width:0!important}

@media(max-width:1100px){
  .founder{grid-template-columns:1fr!important;gap:28px!important}
  .founder .f-stats{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:520px){
  .founder .f-stats{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  .founder .f-stats strong{font-size:19px!important}
}

/* ==========================================================================
   NOSSA HISTORIA — faixa de marcas (.marcas-faixa)
   BUG: no Vipper ela ficou com 162px de altura e margin-left fixa de 126px,
   entao aparecia DESLOCADA para a esquerda, com as logos amontoadas e o
   Instagram espremido. No EcoMAPP e' 900x90 centralizada.
   ========================================================================== */
.marcas-faixa{max-width:900px!important;width:100%!important;
  margin:0 auto 44px!important;padding:14px 26px!important;
  display:flex!important;align-items:center!important;justify-content:space-between!important;
  gap:18px!important;box-sizing:border-box!important;
  border-radius:16px!important;min-height:0!important;height:auto!important}
.marcas-faixa .mf-logos{display:flex!important;align-items:center!important;
  gap:22px!important;flex-wrap:nowrap!important;min-width:0}
.marcas-faixa .mf-item{display:flex!important;align-items:center!important;
  gap:10px!important;text-decoration:none!important;min-width:0!important;
  padding:0!important;margin:0!important;height:auto!important}
.marcas-faixa .mf-item img{height:30px!important;width:auto!important;
  max-width:100px!important;object-fit:contain;flex:0 0 auto}
.marcas-faixa .mf-item span, .marcas-faixa .mf-rot{display:flex;flex-direction:column;
  line-height:1.25;min-width:0}
.marcas-faixa .mf-item small{font-size:9.5px!important;letter-spacing:.12em;
  text-transform:uppercase;opacity:.62;white-space:nowrap}
.marcas-faixa .mf-item strong{font-size:13px!important;font-weight:800;white-space:nowrap}
.marcas-faixa .mf-insta{display:flex!important;align-items:center!important;
  gap:9px!important;text-decoration:none!important;padding:6px 12px!important;
  border-radius:999px!important;background:rgba(177,44,49,.07)!important;
  border:1px solid rgba(177,44,49,.16)!important;flex:0 0 auto!important;
  height:auto!important;min-width:0!important}
.marcas-faixa .mf-insta img{width:28px!important;height:28px!important;
  border-radius:50%!important;object-fit:cover;flex:0 0 28px!important}
.marcas-faixa .mf-insta strong{font-size:12px!important;display:block;line-height:1.2}
.marcas-faixa .mf-insta small{font-size:10px!important;opacity:.68;line-height:1.2}

@media(max-width:900px){
  .marcas-faixa{flex-direction:column!important;align-items:stretch!important;
    gap:14px!important;padding:16px!important}
  .marcas-faixa .mf-logos{flex-wrap:wrap!important;justify-content:center!important}
  .marcas-faixa .mf-insta{justify-content:center!important}
}

/* ===== botao SEGUIR do instagram do fundador estava ROSA (EE2A7B, cor que o
   EcoMAPP usa para o Instagram). No Vipper vai em vermelho da marca. ===== */
.marcas-faixa .mf-ig-seta{background:#B12C31!important;
  border:0!important;color:#fff!important;font-weight:800!important;
  border-radius:999px!important;padding:7px 14px!important;font-size:11px!important;
  letter-spacing:.06em!important;text-transform:uppercase!important;
  display:inline-flex!important;align-items:center!important;gap:4px!important;
  flex:0 0 auto!important;box-shadow:0 3px 10px rgba(177,44,49,.30)!important}
.marcas-faixa .mf-ig-seta:hover{background:#8E1F24!important}

/* ==========================================================================
   FAIXA DE MARCAS — REFEITA (30/10/2026)
   Estava FEIA porque:
     . .mf-txt nao era flex-column -> "Fazemos parte do / MAPP Group / Grupo de
       hoteis..." saiam todos na mesma linha, parecendo texto duplicado;
     . a altura era 148px e o @persiovieira caia desalinhado embaixo;
     . o divisor .mf-div nao aparecia.
   AGORA: 2 itens grandes + Instagram num cartao proprio, todos alinhados ao
   centro, textos empilhados corretamente e hover de verdade.
   ========================================================================== */
.marcas-faixa{max-width:1000px!important;width:100%!important;
  margin:0 auto 46px!important;padding:16px 22px!important;
  display:flex!important;align-items:center!important;
  justify-content:space-between!important;gap:20px!important;
  box-sizing:border-box!important;border-radius:18px!important;
  background:#fff!important;border:1px solid rgba(28,25,26,.08)!important;
  box-shadow:0 2px 14px rgba(28,25,26,.05)!important;
  height:auto!important;min-height:0!important}

/* grupo: MAPP Group + Código Hoteleiro lado a lado, com divisor */
.marcas-faixa .mf-logos{display:flex!important;align-items:center!important;
  gap:22px!important;flex-wrap:nowrap!important;min-width:0;flex:1 1 auto}
.marcas-faixa .mf-item{display:flex!important;align-items:center!important;
  gap:12px!important;text-decoration:none!important;min-width:0!important;
  padding:6px 8px!important;margin:0!important;border-radius:12px;
  height:auto!important;transition:background .22s,transform .22s}
a.marcas-faixa .mf-item:hover, .marcas-faixa a.mf-item:hover{
  background:rgba(177,44,49,.05);transform:translateY(-1px)}

/* LOGO: quadrado claro fixo, a imagem nunca estoura */
.marcas-faixa .mf-logo{display:grid!important;place-items:center;
  width:46px!important;height:46px!important;flex:0 0 46px!important;
  background:#fff!important;border:1px solid rgba(28,25,26,.09);
  border-radius:11px!important;overflow:hidden;box-shadow:0 1px 3px rgba(28,25,26,.06)}
.marcas-faixa .mf-logo img{max-width:36px!important;max-height:36px!important;
  width:auto!important;height:auto!important;object-fit:contain;display:block}

/* TEXTO: EMPILHADO (era o bug — saia tudo na mesma linha) */
.marcas-faixa .mf-txt{display:flex!important;flex-direction:column!important;
  justify-content:center;line-height:1.28;min-width:0;text-align:left}
.marcas-faixa .mf-txt small{font-size:9px!important;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(28,25,26,.45)!important;
  font-weight:700;white-space:nowrap;margin:0}
.marcas-faixa .mf-txt strong{font-family:var(--font-h);font-size:14px!important;
  font-weight:800;color:#1D1E21!important;letter-spacing:-.01em;
  margin:2px 0 1px!important;white-space:nowrap}
.marcas-faixa .mf-txt em{font-style:normal;font-size:11px!important;
  color:rgba(28,25,26,.55)!important;white-space:nowrap;margin:0}

/* divisor vertical entre as duas marcas */
.marcas-faixa .mf-div{width:1px!important;height:34px!important;flex:0 0 1px!important;
  background:rgba(28,25,26,.12)!important;display:block!important}

/* INSTAGRAM: cartao com pill, alinhado à direita */
.marcas-faixa .mf-insta{display:flex!important;align-items:center!important;
  gap:10px!important;text-decoration:none!important;flex:0 0 auto!important;
  padding:7px 8px 7px 10px!important;border-radius:999px!important;
  background:rgba(177,44,49,.05)!important;
  border:1px solid rgba(177,44,49,.14)!important;
  height:auto!important;min-width:0!important;transition:.22s}
.marcas-faixa .mf-insta:hover{background:rgba(177,44,49,.10)!important;
  border-color:rgba(177,44,49,.30)!important}
.marcas-faixa .mf-ig-ico{display:grid!important;place-items:center;
  width:34px!important;height:34px!important;flex:0 0 34px!important;
  border-radius:50%!important;overflow:hidden;
  background:linear-gradient(45deg,#F9CE34,#EE2A7B 48%,#6228D7);padding:2px}
.marcas-faixa .mf-ig-ico img{width:30px!important;height:30px!important;
  border-radius:50%!important;object-fit:cover;display:block}
.marcas-faixa .mf-ig-txt{display:flex!important;flex-direction:column!important;
  line-height:1.22;min-width:0;text-align:left}
.marcas-faixa .mf-ig-txt strong{font-size:12px!important;font-weight:800;
  color:#1D1E21!important;white-space:nowrap;margin:0}
.marcas-faixa .mf-ig-txt small{font-size:10px!important;
  color:rgba(28,25,26,.55)!important;white-space:nowrap;margin:0}
.marcas-faixa .mf-ig-seta{background:#B12C31!important;color:#fff!important;
  font-size:10.5px!important;font-weight:800!important;letter-spacing:.07em!important;
  text-transform:uppercase!important;border-radius:999px!important;
  padding:7px 13px!important;flex:0 0 auto!important;white-space:nowrap;
  box-shadow:0 3px 10px rgba(177,44,49,.28)!important;transition:.2s}
.marcas-faixa .mf-insta:hover .mf-ig-seta{background:#8E1F24!important}

/* responsivo */
@media(max-width:860px){
  .marcas-faixa{flex-direction:column!important;align-items:stretch!important;
    gap:14px!important;padding:16px!important}
  .marcas-faixa .mf-logos{flex-direction:column!important;align-items:flex-start!important;
    gap:8px!important;width:100%!important}
  .marcas-faixa .mf-div{display:none!important}
  .marcas-faixa .mf-insta{justify-content:flex-start!important;width:100%!important}
}
@media(max-width:460px){
  .marcas-faixa .mf-txt em, .marcas-faixa .mf-ig-txt small{white-space:normal}
}

/* ==========================================================================
   GRADE DOS 4 HOTÉIS — REFEITA (30/10/2026)
   PROBLEMAS:
     1. .g-tag ("Você está aqui") estava em top:-11px com o card em
        overflow:hidden -> o selo aparecia CORTADO no topo;
     2. logos em 64px deixavam o card sem identidade visual;
     3. o nome aparecia 2x (logo + <h4>) sem hierarquia;
     4. cards com alturas diferentes quebravam o alinhamento.
   ========================================================================== */
.grid.g4{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:16px!important;align-items:stretch!important}

.grid.g4 .g-card{overflow:visible!important;position:relative!important;
  display:flex!important;flex-direction:column!important;
  align-items:center!important;text-align:center!important;
  padding:26px 18px 18px!important;height:100%!important;
  background:#fff!important;border:1px solid rgba(28,25,26,.09)!important;
  border-radius:18px!important;
  box-shadow:0 1px 3px rgba(28,25,26,.05)!important;
  transition:transform .3s cubic-bezier(.22,.61,.36,1),box-shadow .3s,
             border-color .3s!important}

/* selo "Você está aqui": DENTRO do card, sem corte */
.grid.g4 .g-card .g-tag{position:absolute!important;top:12px!important;right:12px!important;
  left:auto!important;transform:none!important;
  font-size:9px!important;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:#B12C31!important;background:rgba(177,44,49,.10)!important;
  border:1px solid rgba(177,44,49,.22)!important;border-radius:999px!important;
  padding:4px 9px!important;white-space:nowrap;line-height:1.4;z-index:2}

/* LOGO: maior, com respiro e sem borda dura */
.grid.g4 .g-logo{width:100%!important;height:86px!important;
  display:grid!important;place-items:center!important;margin:6px 0 14px!important;
  background:transparent!important;border:0!important;padding:0!important;
  box-shadow:none!important}
.grid.g4 .g-logo img{max-height:74px!important;max-width:78%!important;
  width:auto!important;height:auto!important;object-fit:contain!important;
  filter:none!important;transition:transform .35s cubic-bezier(.22,.61,.36,1)}

/* TÍTULO: hierarquia clara (a logo é o símbolo, o h4 é o nome legível) */
.grid.g4 .g-card h4{font-family:var(--font-h)!important;font-size:15px!important;
  font-weight:800!important;color:#1D1E21!important;margin:0 0 3px!important;
  letter-spacing:-.01em;line-height:1.25}
.grid.g4 .g-card .g-sub{display:block!important;font-size:9.5px!important;
  font-weight:800!important;letter-spacing:.14em!important;text-transform:uppercase!important;
  color:#B12C31!important;margin:0 0 10px!important}
.grid.g4 .g-card p{font-size:12.5px!important;line-height:1.6!important;
  color:rgba(28,25,26,.62)!important;margin:0 0 16px!important;
  flex:1 1 auto!important;min-height:52px;max-width:100%}

/* link */
.grid.g4 .g-card .g-link{margin-top:auto!important;display:inline-flex!important;
  align-items:center!important;gap:5px!important;font-size:12px!important;
  font-weight:800!important;color:#1D1E21!important;text-decoration:none!important;
  border-top:1px solid rgba(28,25,26,.08);padding-top:12px!important;
  width:100%!important;justify-content:center}
.grid.g4 .g-card .g-link svg{width:12px!important;height:12px!important}

/* card ativo (VIPPER): destaque limpo, sem quebrar alinhamento */
.grid.g4 .g-card.on{border-color:rgba(177,44,49,.42)!important;
  background:linear-gradient(180deg,rgba(177,44,49,.045),rgba(177,44,49,.01))!important;
  box-shadow:0 8px 26px rgba(177,44,49,.13)!important}
.grid.g4 .g-card.on .g-logo img{transform:scale(1.04)}
.grid.g4 .g-card.on .g-link{color:#B12C31!important;border-top-color:rgba(177,44,49,.18)}

@media(max-width:1080px){.grid.g4{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:560px){
  .grid.g4{grid-template-columns:1fr!important}
  .grid.g4 .g-logo{height:74px!important}
  .grid.g4 .g-logo img{max-height:64px!important}
}

/* ===== ajuste fino: logos dos 4 hotéis maiores e melhor aproveitadas =====
   A imagem tem o nome escrito dentro, então ela precisa de tamanho suficiente
   para ser legível (antes ficava em 57px e sumia). */
.grid.g4 .g-logo{height:96px!important;margin:10px 0 16px!important}
.grid.g4 .g-logo img{max-height:88px!important;max-width:86%!important}
.grid.g4 .g-card h4{font-size:14.5px!important}


}

/* ==========================================================================
   SEÇÃO DO CURSO — bloco dos 3 números (1 / 4 / 120+)
   DIAGNÓSTICO (30/10/2026): este bloco vive DENTRO do .curso-card, que é
   BRANCO. No EcoMAPP os números são escuros (rgb(22,61,18)); o meu conversor
   de paleta mandou aquele verde escuro para BRANCO, então "1 / 4 / 120+"
   ficavam brancos sobre branco — invisíveis. As legendas herdaram o verde
   dessaturado rgb(138,154,131).
   Correção: texto ESCURO no card branco, cores da marca no destaque.
   ========================================================================== */
.curso-card .curso-stats,
.curso-sec .curso-card .curso-stats{
  display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:0!important;width:auto!important;max-width:none!important;
  background:rgba(177,44,49,.045)!important;
  border:1px solid rgba(177,44,49,.14)!important;
  border-radius:14px!important;padding:14px 6px!important;
  margin:18px 16px 20px!important;box-sizing:border-box}
.curso-card .curso-stats > div,
.curso-sec .curso-card .curso-stats > div{
  display:flex!important;flex-direction:column!important;
  align-items:center!important;justify-content:center!important;
  gap:2px!important;padding:2px 4px!important;min-width:0!important;
  border-right:1px solid rgba(28,25,26,.10)!important}
.curso-card .curso-stats > div:last-child{border-right:0!important}

.curso-card .curso-stats strong,
.curso-sec .curso-card .curso-stats strong{
  display:block!important;font-family:var(--font-h)!important;
  font-size:22px!important;font-weight:800!important;line-height:1.1!important;
  color:#B12C31!important;-webkit-text-fill-color:#B12C31!important;
  letter-spacing:-.02em!important;margin:0!important;text-align:center}

.curso-card .curso-stats span,
.curso-sec .curso-card .curso-stats span{
  display:block!important;font-size:10px!important;font-weight:600!important;
  line-height:1.3!important;text-align:center;
  color:rgba(28,25,26,.60)!important;
  -webkit-text-fill-color:rgba(28,25,26,.60)!important;margin:0!important}

/* o link do site (codigohoteleiro.com.br) */
.curso-card .curso-site, .curso-sec .curso-site{
  display:inline-flex!important;align-items:center!important;gap:5px!important;
  margin:0 16px 18px!important;font-size:12px!important;font-weight:800!important;
  color:#B12C31!important;-webkit-text-fill-color:#B12C31!important;
  text-decoration:none!important;border-top:1px solid rgba(28,25,26,.08);
  padding-top:12px!important;width:calc(100% - 32px)!important}
.curso-card .curso-site:hover{text-decoration:underline}

/* a citação dentro do card: escura e legível */
.curso-card .curso-quote{
  color:rgba(28,25,26,.72)!important;
  -webkit-text-fill-color:rgba(28,25,26,.72)!important;
  font-style:italic!important;font-size:12.5px!important;line-height:1.6!important;
  margin:14px 16px!important;padding:0!important;border:0!important}

/* texto/botão do lado ESQUERDO (fundo escuro) continuam claros */
.curso-sec > .wrap p, .curso-sec p{color:rgba(255,255,255,.80)!important;
  -webkit-text-fill-color:rgba(255,255,255,.80)!important}
.curso-sec h2, .curso-sec h3{color:#FFFFFF!important;
  -webkit-text-fill-color:#FFFFFF!important}
.curso-sec .eyebrow{color:#EBA9AD!important;-webkit-text-fill-color:#EBA9AD!important}

@media(max-width:600px){
  .curso-card .curso-stats strong{font-size:19px!important}
  .curso-card .curso-stats span{font-size:9px!important}
}

/* ===== CITAÇÃO do Pérsio: estava BRANCA sobre o card BRANCO (invisível).
   Precisa vencer a regra .curso-sec p (que é para o lado escuro). ===== */
html body .curso-sec .curso-card .curso-quote,
html body .curso-card .curso-quote{
  color:rgba(28,25,26,.74)!important;
  -webkit-text-fill-color:rgba(28,25,26,.74)!important;
  font-style:italic!important;font-size:12.5px!important;line-height:1.62!important;
  margin:14px 18px 4px!important;padding:0 0 0 12px!important;
  border-left:2px solid rgba(177,44,49,.35)!important;
  border-top:0!important;border-right:0!important;border-bottom:0!important;
  display:block!important;visibility:visible!important;opacity:1!important}

/* ==========================================================================
   ÚLTIMA SEÇÃO — "O que nos guia / Hospitalidade com método"
   BUGS (30/10/2026):
     1. os icones dos 3 cards ficaram INVISIVEIS: o eco.css aplica
        stroke:none / fill:none nos svg, entao so aparecia a sombra rosa;
     2. o botao "Reserve no VIPPER Hotel" ficou BRANCO com fundo transparente
        sobre fundo claro -> invisivel;
     3. o texto dizia "Nascemos a 50 metros da Basílica", que e' do MAPP
        Hotel (o VIPPER fica a 15 min a pe' do Santuario);
     4. titulo desalinhado (eyebrow na mesma linha).
   ========================================================================== */
.vh-guia .center, section.sec-sand:last-of-type .center{text-align:center}

/* ÍCONES VISÍVEIS */
.it .ico{display:grid!important;place-items:center;
  width:48px!important;height:48px!important;border-radius:14px!important;
  background:rgba(177,44,49,.09)!important;
  border:1px solid rgba(177,44,49,.18)!important;
  color:#B12C31!important;margin-bottom:14px!important;flex:none}
.it .ico svg{width:22px!important;height:22px!important;display:block;
  fill:none!important;stroke:#B12C31!important;stroke-width:1.8!important;
  stroke-linecap:round!important;stroke-linejoin:round!important;
  color:#B12C31!important;opacity:1!important;visibility:visible!important}

/* CARDS da seção: padronizados */
.it{background:#fff!important;border:1px solid rgba(28,25,26,.09)!important;
  border-radius:16px!important;padding:24px 22px!important;
  box-shadow:0 1px 3px rgba(28,25,26,.05)!important;
  transition:transform .28s,box-shadow .28s,border-color .28s!important}
.it:hover{transform:translateY(-4px);
  box-shadow:0 14px 30px rgba(28,25,26,.10)!important;
  border-color:rgba(177,44,49,.24)!important}
.it h3, .it h4{font-family:var(--font-h)!important;font-size:16px!important;
  font-weight:800!important;color:#1D1E21!important;margin:0 0 8px!important;
  letter-spacing:-.01em}
.it p{font-size:13px!important;line-height:1.68!important;
  color:rgba(28,25,26,.62)!important;margin:0!important}

/* BOTÃO DE RESERVA — precisa ser visível sobre fundo claro */
section .btn-reserve, section a[href*="reserva"],
section a[class*="btn"][class*="reserve"]{
  background:#B12C31!important;color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  border:1px solid #B12C31!important;border-radius:999px!important;
  font-weight:800!important;font-size:13.5px!important;
  padding:14px 30px!important;display:inline-flex!important;
  align-items:center!important;gap:8px!important;text-decoration:none!important;
  box-shadow:0 8px 22px rgba(177,44,49,.28)!important;
  transition:transform .2s,box-shadow .2s,background .2s!important}
section .btn-reserve:hover, section a[href*="reserva"]:hover{
  background:#8E1F24!important;transform:translateY(-2px);
  box-shadow:0 12px 28px rgba(177,44,49,.36)!important}

/* botão genérico claro que estava invisível (transparente + texto branco) */
.sec-sand .btn:not(.btn-green):not(.btn-gold),
.sec-sand a.btn[style*="transparent"]{
  background:#B12C31!important;color:#fff!important;
  -webkit-text-fill-color:#fff!important;border-color:#B12C31!important}

@media(max-width:900px){
  .it{padding:20px 18px!important}
}

/* ===== última seção: o eyebrow ("O QUE NOS GUIA") estava na MESMA linha do
   titulo, grudado. Precisa vir acima, centralizado. ===== */
section.sec-sand:last-of-type .center,
.sec-sand.vh-guia .center{display:flex!important;flex-direction:column!important;
  align-items:center!important;text-align:center!important;gap:8px!important;
  max-width:720px!important;margin:0 auto 34px!important}
section.sec-sand:last-of-type .center .eyebrow,
section.sec-sand:last-of-type .center > span:first-child{
  display:block!important;margin:0 0 2px!important;
  font-size:11px!important;letter-spacing:.18em!important;text-transform:uppercase!important;
  color:#B12C31!important;-webkit-text-fill-color:#B12C31!important;font-weight:800!important}
section.sec-sand:last-of-type .center h2,
section.sec-sand:last-of-type .center .title{
  display:block!important;margin:0!important;
  font-size:clamp(24px,2.8vw,34px)!important;line-height:1.18!important;
  color:#1D1E21!important;-webkit-text-fill-color:#1D1E21!important}

/* grade dos 3 cards */
section.sec-sand:last-of-type .sec-grid,
section.sec-sand:last-of-type .grid{
  display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:16px!important;max-width:1180px!important;margin:0 auto!important;
  align-items:stretch!important}
section.sec-sand:last-of-type .it{height:100%!important;
  display:flex!important;flex-direction:column!important}
section.sec-sand:last-of-type .it p{flex:1 1 auto!important}

@media(max-width:900px){
  section.sec-sand:last-of-type .sec-grid,
  section.sec-sand:last-of-type .grid{grid-template-columns:1fr!important}
}

/* ===== botão de reserva: dar respiro depois dos cards (estava colado) ===== */
section.sec-sand:last-of-type > .wrap > .center:last-child,
section.sec-sand:last-of-type > .wrap > div:last-child:not(.sec-grid):not(.grid){
  margin-top:32px!important;margin-bottom:8px!important}
section.sec-sand:last-of-type a.btn-reserve,
section.sec-sand:last-of-type a[href*="reserva"]{
  margin-top:0!important;display:inline-flex!important}
/* e o bloco do título ganha respiro embaixo */
section.sec-sand:last-of-type .center:first-child{margin-bottom:38px!important}

/* ==========================================================================
   CTA FINAL ("Reserve agora e venha viver Aparecida") — CORRIGIDO 30/10/2026
   BUG: o fundo caiu para cinza claro rgb(227,224,225) (o gradiente escuro do
   eco_mapp_layout nao foi aplicado), mas o titulo continuou BRANCO -> texto
   invisivel em TODAS as páginas internas que usam .final.
   ========================================================================== */
.final{background:linear-gradient(150deg,#1E1012 0%,#3A1A1D 55%,#8E1F24 100%)!important;
  border-radius:22px!important;position:relative;overflow:hidden;
  padding:clamp(44px,5vw,64px) clamp(24px,4vw,48px)!important;
  max-width:1180px;margin:0 auto}
.final::before{content:"";position:absolute;width:460px;height:460px;border-radius:50%;
  background:radial-gradient(circle,rgba(211,66,73,.26),transparent 70%);
  top:-160px;right:-120px;pointer-events:none}
.final h2, .final .title{color:#FFFFFF!important;-webkit-text-fill-color:#FFFFFF!important;
  font-size:clamp(24px,3.2vw,38px)!important;line-height:1.18!important;
  position:relative;z-index:2;margin:0 0 14px!important;text-align:center}
.final p{color:rgba(255,255,255,.82)!important;
  -webkit-text-fill-color:rgba(255,255,255,.82)!important;
  position:relative;z-index:2;text-align:center;max-width:620px;margin:0 auto 26px!important}
.final .final-actions, .final .center{position:relative;z-index:2;
  display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
.final .btn, .final a.btn, .final button{
  background:#B12C31!important;color:#fff!important;
  -webkit-text-fill-color:#fff!important;border:1px solid #B12C31!important;
  border-radius:999px!important;font-weight:800!important;
  padding:14px 30px!important;box-shadow:0 8px 22px rgba(0,0,0,.28)!important;
  transition:transform .2s,background .2s!important}
.final .btn:hover, .final a.btn:hover{background:#D34249!important;
  border-color:#D34249!important;transform:translateY(-2px)}

/* a seção que envolve o .final precisa de respiro e fundo neutro */
section.sec:has(> .wrap > .final), section.sec-tint:has(.final){
  background:#F6F5F3!important;padding:clamp(34px,4vw,56px) 20px!important}

/* ===== O CTA final tem as classes "sec sec-tint final". A regra
   .sec-tint{background:none rgb(...)!important} (usada para limpar o verde
   do eco) vencia o gradiente. Aqui vencemos com seletor mais forte. ===== */
html body section.sec.sec-tint.final,
html body section.final,
html body .sec-tint.final{
  background:linear-gradient(150deg,#1E1012 0%,#3A1A1D 55%,#8E1F24 100%)!important;
  background-image:linear-gradient(150deg,#1E1012 0%,#3A1A1D 55%,#8E1F24 100%)!important}
html body section.sec.sec-tint.final h2,
html body section.sec.sec-tint.final p,
html body section.sec.sec-tint.final .title{position:relative;z-index:2}

/* =================== BANNERS DO HERO: SETAS + CONTADOR ===================
   Antes o carrossel so tinha bolinhas. Agora tem setas visiveis, contador
   "1 / 3" e transicao suave entre os banners. */
.hb-wrap{position:relative}
.hb-slide{
  position:absolute;inset:0;opacity:0;
  transition:opacity .75s cubic-bezier(.4,0,.2,1);
  will-change:opacity;
}
.hb-slide.on{opacity:1}

/* setas */
.hb-nav{position:absolute;inset:0;pointer-events:none;z-index:6}
.hb-prev,.hb-next{
  position:absolute;top:50%;transform:translateY(-50%);
  width:46px;height:46px;border-radius:50%;border:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.16);color:#fff;
  border:1px solid rgba(255,255,255,.32);
  backdrop-filter:blur(8px);
  opacity:.72;transition:opacity .25s ease,background .2s ease,transform .2s ease;
  pointer-events:auto;
}
.hb-prev{left:22px}
.hb-next{right:22px}
.hb-wrap:hover .hb-prev,.hb-wrap:hover .hb-next,
.hb-wrap:focus-within .hb-prev,.hb-wrap:focus-within .hb-next{opacity:1;background:rgba(255,255,255,.26)}
.hb-prev:hover,.hb-next:hover{background:#B12C31;border-color:#B12C31;transform:translateY(-50%) scale(1.08)}
.hb-prev:active,.hb-next:active{transform:translateY(-50%) scale(.96)}
.hb-prev:focus-visible,.hb-next:focus-visible{outline:2px solid #fff;outline-offset:3px;opacity:1}

/* contador */
.hb-cont{
  position:absolute;right:22px;bottom:22px;z-index:6;
  padding:6px 13px;border-radius:999px;
  background:rgba(20,10,12,.55);color:#fff;
  font-size:11.5px;font-weight:700;letter-spacing:.06em;
  font-variant-numeric:tabular-nums;
  backdrop-filter:blur(6px);
  pointer-events:none;
}

/* bolinhas mais visiveis */
.hb-dots{z-index:6}
.hb-dots button{
  width:9px;height:9px;border-radius:50%;border:0;padding:0;cursor:pointer;
  background:rgba(255,255,255,.45);transition:all .25s ease;
}
.hb-dots button.on{background:#fff;width:26px;border-radius:999px}
.hb-dots button:hover{background:rgba(255,255,255,.75)}

/* no celular as setas ficam sempre visiveis (nao existe hover) */
@media(hover:none),(max-width:820px){
  .hb-prev,.hb-next{opacity:1;width:40px;height:40px}
  .hb-prev{left:12px} .hb-next{right:12px}
  .hb-cont{right:14px;bottom:14px}
}

@media(prefers-reduced-motion:reduce){
  .hb-slide{transition:none}
  .hb-prev,.hb-next{transition:none}
}