:root{
  --brand:#0e5a3a;
  --brand-2:#0f7a4a;
  --ink:#1d232a;
  --muted:#6b7280;
  --bg:#ffffff;
  --bg-alt:#f7faf8;
  --radius:16px;
  --shadow:0 10px 30px rgba(0,0,0,.08);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, 'Apple Color Emoji','Segoe UI Emoji';
  color:var(--ink);
  background:var(--bg);
  line-height:1.5;
}
img{max-width:100%;height:auto;display:block}
.container{width:min(1120px,92%);margin-inline:auto}
.header{
  position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid #e5e7eb
}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:.75rem 0;gap:1rem}
.brand{display:flex;align-items:center;gap:.5rem;text-decoration:none;color:var(--ink);font-weight:700}
.brand img{width:32px;height:32px;border-radius:8px}
.nav{display:flex;gap:1rem;align-items:center}
.nav a{color:var(--ink);text-decoration:none;font-weight:600;opacity:.9}
.nav a:hover{opacity:1}
.nav .btn{margin-left:.25rem}
.nav-toggle{display:none;font-size:1.5rem;background:none;border:none;cursor:pointer}
@media (max-width:900px){
  .nav{display:none;position:absolute;inset:60px 0 auto 0;background:#fff;padding:1rem .5rem;border-bottom:1px solid #e5e7eb;flex-direction:column}
  .nav-toggle{display:block}
}

/* HERO BANNER */
.hero{position:relative;min-height:52vh;display:grid;place-items:center;overflow:hidden}

/* 🔧 CORREÇÃO DO BUG DE IMAGEM GIGANTE */
.hero picture {
  display: block;
  position: relative;
  width: 100%;
  overflow: hidden;
}

.hero picture img,
.hero picture source {
  width: 100%;
  height: 60vh; /* fixa altura proporcional à viewport */
  object-fit: cover; /* mantém proporção e corta o excesso */
  object-position: center;
  display: block;
}

/* Opcional: para telas menores */
@media (max-width:700px){
  .hero picture img,
  .hero picture source {
    height: 50vh; /* um pouco menor no mobile */
  }
}

.hero img{width:100%;height:56vh;object-fit:cover;filter:brightness(.75)}
.hero-overlay{position:absolute;inset:0;display:grid;place-items:center;text-align:center;color:#fff;padding:1rem}
.hero-overlay h1{font-size:clamp(2rem,6vw,4rem);margin:.25rem 0}
.hero-overlay p{font-size:clamp(1rem,2.4vw,1.25rem);max-width:900px;margin:0 auto 1rem}
.hero-cta{display:flex;gap:.75rem;flex-wrap:wrap;justify-content:center}

/* SEÇÕES E GRID */
.section{padding:3.5rem 0}
.section-alt{background:var(--bg-alt)}

.grid.two{display:grid;grid-template-columns:1.1fr .9fr;gap:2rem;align-items:center}
.grid.three{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
@media (max-width:900px){
  .grid.two,.grid.three{grid-template-columns:1fr}
}
.gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;align-items:end}

/* CARTÕES */
.cards .card{background:#fff;border-radius:var(--radius);padding:1rem;border:1px solid #eef1f0;box-shadow:var(--shadow)}
.card h3{margin-top:.25rem}

/* TABELA */
.table{width:100%;border-collapse:collapse;background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.table th,.table td{padding:.75rem 1rem;border-bottom:1px solid #eef1f0;text-align:left}
.table thead{background:#f0f5f2}
.table tr:last-child td{border-bottom:none}

/* LISTAS */
.bullet{padding-left:1rem}
.bullet li{margin:.35rem 0}
.bullet-check{list-style:none;padding:0;margin:1rem 0}
.bullet-check li{margin:.35rem 0;padding-left:1.75rem;position:relative}
.bullet-check li::before{content:'✓';position:absolute;left:.25rem;color:var(--brand)}
.steps{list-style:decimal;padding-left:1rem}

.note{color:var(--muted);font-size:.95rem}

/* FORMULÁRIOS */
.form{display:grid;gap:.75rem;background:#fff;padding:1rem;border-radius:var(--radius);box-shadow:var(--shadow)}
.form input,.form textarea{width:100%;padding:.7rem .8rem;border:1px solid #d1d5db;border-radius:10px;font:inherit}
.form button{justify-self:start}

/* BOTÕES */
.btn{display:inline-block;padding:.7rem 1rem;border-radius:999px;font-weight:700;text-decoration:none;border:2px solid transparent;cursor:pointer}
.btn-primary{background:var(--brand);color:white;border-color:var(--brand)}
.btn-primary:hover{background:var(--brand-2);border-color:var(--brand-2)}
.btn-ghost{background:transparent;border-color:#d1d5db;color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink)}

/* RODAPÉ */
.footer{background:#0b1f16;color:#cfe6da}
.footer .container{padding:1.25rem 0;text-align:center}

/* FAQ */
details{background:#fff;border-radius:var(--radius);padding:.75rem 1rem;margin:.5rem 0;border:1px solid #eef1f0;box-shadow:var(--shadow)}
summary{cursor:pointer;font-weight:700}

/* === HOTFIX: Banner principal fixo e sem esticar === */
.hero {
  position: relative;
  overflow: hidden;
}

/* Garante que o <picture> não herde estilos estranhos do tema */
.hero picture {
  display: block;
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

/* Corrige o <img> dentro do <picture> mesmo se o servidor/tema setar height:auto!important */
.hero picture img {
  display: block !important;
  width: 100% !important;
  height: 60vh !important;        /* altura fixa proporcional à viewport */
  max-height: 720px !important;   /* limite superior opcional */
  min-height: 320px !important;   /* limite inferior opcional */
  object-fit: cover !important;   /* preenche sem distorcer */
  object-position: center !important;
  filter: brightness(.75);         /* se quiser manter o efeito escurecido */
}

/* Ajuste no mobile: um pouco menor */
@media (max-width: 700px) {
  .hero picture img {
    height: 50vh !important;
    max-height: 560px !important;
  }
}

/* Cobre variações de seletor do tema (caso exista .hero img sem <picture>) */
.hero img {
  width: 100% !important;
  height: 60vh !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* Se o tema tiver alguma regra global tipo img{height:auto!important}, esse seletor extra “vence” */
.hero picture > img,
.hero > picture > img {
  height: 60vh !important;
  width: 100% !important;
  object-fit: cover !important;
}

/* (Opcional) Se quiser reduzir ainda mais no mobile “apertado” */
@media (max-width: 380px) {
  .hero picture img,
  .hero img {
    height: 45vh !important;
  }
}


/* ===== Visual Enhancements ===== */
.center{text-align:center}
.sub{color:var(--muted);margin-top:.25rem;margin-bottom:1.25rem}
.grid.four{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem}
@media(max-width:900px){.grid.four{grid-template-columns:repeat(2,1fr)}}
.card-media img{height:220px;object-fit:contain;margin:auto}
.icon-card{background:#fff;border:1px solid #eef1f0;border-radius:16px;padding:1rem;display:grid;place-items:center;gap:.5rem;box-shadow:var(--shadow)}
.icon-card img{width:56px;height:56px}
.steps.big{font-size:1.05rem}
.photo-card img{border-radius:16px;box-shadow:var(--shadow)}
.final-cta .card{box-shadow:var(--shadow)}
.product-cards .card{transition:transform .2s ease, box-shadow .2s ease}
.product-cards .card:hover{transform:translateY(-4px);box-shadow:0 14px 40px rgba(0,0,0,.12)}
.showcase h2{margin-bottom:.25rem}


/* ======= CARROSSEL ANTES & DEPOIS (V-MAX) ======= */
.vmax-carousel { --h: 72vh; --radius: 16px; }
.vmax-carousel .ba-radio { position: absolute; opacity: 0; pointer-events: none; }

.vmax-carousel .ba-viewport{
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius);
}

.vmax-carousel .ba-track{
  display: flex;
  width: 300%;
  transform: translateX(0%);
  transition: transform .5s ease;
}

.vmax-carousel .ba-item{
  flex: 0 0 100%;
  padding: 0 0 1rem 0;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: .75rem;
}

.vmax-carousel .ba-item img{
  width: auto;
  height: auto;             /* mantém proporção (sem distorcer) */
  max-height: var(--h);     /* grande, até 72% da viewport */
  object-fit: contain;      /* mostra a imagem inteira */
  border-radius: var(--radius);
  box-shadow: 0 14px 40px rgba(0,0,0,.12);
  background: #fff;
}

.vmax-carousel figcaption{
  text-align: center;
  font-size: 1rem;
  color: var(--ink);
  opacity: .95;
  padding: 0 .5rem;
}

/* estados do slider (CSS-only) */
#ba1:checked ~ .ba-viewport .ba-track { transform: translateX(0%); }
#ba2:checked ~ .ba-viewport .ba-track { transform: translateX(-100%); }
#ba3:checked ~ .ba-viewport .ba-track { transform: translateX(-200%); }

/* setas */
.vmax-carousel .ba-nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  line-height: 40px;
  text-align: center;
  font-size: 28px;
  font-weight: 700;
  color: #fff;
  background: rgba(0,0,0,.35);
  border: 2px solid rgba(255,255,255,.7);
  border-radius: 50%;
  cursor: pointer;
  user-select: none;
  backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease;
}
.vmax-carousel .ba-prev{ left: .5rem; }
.vmax-carousel .ba-next{ right: .5rem; }

/* mostra as setas corretas conforme o slide ativo */
#ba1:checked ~ .ba-viewport .p1,
#ba1:checked ~ .ba-viewport .n1,
#ba2:checked ~ .ba-viewport .p2,
#ba2:checked ~ .ba-viewport .n2,
#ba3:checked ~ .ba-viewport .p3,
#ba3:checked ~ .ba-viewport .n3 { opacity: 1; pointer-events: auto; }

/* dots */
.vmax-carousel .ba-dots{
  display: flex; gap: .5rem; justify-content: center; margin-top: .5rem;
}
.vmax-carousel .dot{
  width: 10px; height: 10px; border-radius: 50%;
  background: #cfd8d3; cursor: pointer; border: 2px solid transparent;
}
#ba1:checked ~ .ba-dots label:nth-child(1),
#ba2:checked ~ .ba-dots label:nth-child(2),
#ba3:checked ~ .ba-dots label:nth-child(3){
  background: var(--brand); border-color: var(--brand);
}

/* responsivo */
@media (max-width: 900px){
  .vmax-carousel { --h: 56vh; }
}
@media (max-width: 480px){
  .vmax-carousel { --h: 48vh; }
}