/* ============================================================
   HIDROMIRO — folha de estilo principal
   ------------------------------------------------------------
   TROQUE AS CORES AQUI EMBAIXO. Só neste bloco.
   O site inteiro (6 páginas) usa estas variáveis.
   ============================================================ */

:root{
  /* --- PALETA (edite só estes valores) ---
     Cores tiradas diretamente do Oliver:
     azul do macacão, azul do boné e vermelho da chave de grifo. */
  --azul-900:#01243F;   /* azul quase preto — topo e rodapé */
  --azul-700:#024073;   /* azul do macacão — cor principal */
  --azul-500:#0A5C9C;   /* azul do boné — destaques e links */
  --azul-200:#C5DDEF;   /* azul claro — fundos suaves */
  --vermelho:#D42B23;   /* vermelho da chave — botões de ação */
  --vermelho-200:#F7D8D6;/* vermelho claro — fundos suaves */

  --gelo:#EEF4F8;       /* fundo geral (branco levemente azulado) */
  --branco:#FFFFFF;
  --grafite:#12181D;    /* texto forte */
  --cinza:#5B6B78;      /* texto secundário */
  --linha:#D7E3EC;      /* bordas */

  /* --- TIPOGRAFIA --- */
  --display:'Archivo', system-ui, sans-serif;
  --corpo:'Instrument Sans', system-ui, sans-serif;
  --dado:'IBM Plex Mono', ui-monospace, monospace;

  /* --- MEDIDAS --- */
  --largura:1220px;
  --raio:14px;
  --raio-p:8px;
  --sombra:0 10px 30px rgba(6,35,56,.10);
  --sombra-forte:0 18px 45px rgba(6,35,56,.18);
  --transicao:.25s cubic-bezier(.22,.61,.36,1);
}

/* ============================================================
   BASE
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--corpo);
  font-size:17px;
  line-height:1.65;
  color:var(--grafite);
  background:var(--gelo);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit}

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:800;
  letter-spacing:-.025em;
  line-height:1.08;
  margin:0 0 .5em;
  color:var(--azul-900);
}
h1{font-size:clamp(2.3rem,5.2vw,3.9rem)}
h2{font-size:clamp(1.9rem,3.6vw,2.9rem)}
h3{font-size:clamp(1.15rem,1.7vw,1.4rem)}
p{margin:0 0 1.1em}

.container{width:min(var(--largura),92vw);margin-inline:auto}
.secao{padding:88px 0}
.secao--fina{padding:58px 0}
.centro{text-align:center}

/* Etiqueta de seção — usa fonte de dados (mono), como catálogo técnico */
.etiqueta{
  font-family:var(--dado);
  font-size:.74rem;
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--vermelho);
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  margin-bottom:1rem;
}
.etiqueta::before{
  content:"";width:26px;height:2px;background:var(--vermelho);display:block;
}
.centro .etiqueta{justify-content:center}

.subtitulo{
  color:var(--cinza);
  font-size:1.06rem;
  max-width:62ch;
}
.centro .subtitulo{margin-inline:auto}

/* Régua — divisor com marcas de fita métrica (motivo da loja) */
.regua{
  height:12px;
  background-image:repeating-linear-gradient(90deg,var(--linha) 0 1px,transparent 1px 12px);
  border-top:1px solid var(--linha);
  opacity:.9;
}

/* ============================================================
   BOTÕES
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.92rem 1.7rem;
  border-radius:999px;
  font-family:var(--display);
  font-weight:700;
  font-size:.97rem;
  letter-spacing:-.01em;
  border:2px solid transparent;
  cursor:pointer;
  transition:transform var(--transicao),box-shadow var(--transicao),background var(--transicao),color var(--transicao);
}
.btn:hover{transform:translateY(-2px)}
.btn svg{width:19px;height:19px;flex:none}

.btn--vermelho{background:var(--vermelho);color:#fff;box-shadow:0 8px 20px rgba(212,43,35,.30)}
.btn--vermelho:hover{background:#bd2119;box-shadow:0 12px 26px rgba(212,43,35,.38)}

.btn--azul{background:var(--azul-700);color:#fff}
.btn--azul:hover{background:var(--azul-500)}

.btn--contorno{border-color:var(--azul-700);color:var(--azul-700);background:transparent}
.btn--contorno:hover{background:var(--azul-700);color:#fff}

.btn--claro{background:#fff;color:var(--azul-900)}
.btn--claro:hover{background:var(--azul-200)}

.btn--fantasma-claro{border-color:rgba(255,255,255,.5);color:#fff}
.btn--fantasma-claro:hover{background:#fff;color:var(--azul-900)}

.btn--pequeno{padding:.62rem 1.15rem;font-size:.86rem}
.btn--grande{padding:1.08rem 2.3rem;font-size:1.06rem}
.btn--vermelho.btn--grande{box-shadow:0 10px 26px rgba(212,43,35,.45)}

/* letra miúda para ressalvas */
.nota{font-family:var(--dado);font-size:.72rem;letter-spacing:.02em;color:var(--cinza);opacity:.9}
.clube-lista .nota{color:#8FB0C8}
.nota-clara{display:block;margin-top:1.4rem;color:#B7D2E6;font-family:var(--dado);font-size:.74rem}

/* ============================================================
   TOPBAR + CABEÇALHO
   ============================================================ */
.topbar{
  background:var(--azul-900);
  color:#BCD3E4;
  font-family:var(--dado);
  font-size:.76rem;
  letter-spacing:.02em;
  padding:.5rem 0;
}
.topbar .container{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
.topbar-itens{display:flex;gap:1.6rem;flex-wrap:wrap}
.topbar-itens span{display:inline-flex;align-items:center;gap:.45rem}
.topbar b{color:#fff;font-weight:500}
.topbar a{color:#BCD3E4;transition:color var(--transicao)}
.topbar a:hover{color:var(--vermelho)}
.ponto-aberto{width:7px;height:7px;border-radius:50%;background:#3FD07A;display:inline-block}

.cabecalho{
  position:sticky;top:0;z-index:60;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--linha);
  transition:box-shadow var(--transicao),padding var(--transicao);
}
.cabecalho.rolou{box-shadow:0 6px 22px rgba(6,35,56,.10)}
.cabecalho .container{display:flex;align-items:center;gap:1.4rem;padding:.7rem 0}

.marca{display:flex;align-items:center;gap:.7rem;flex:none}
.marca img{height:54px;width:auto;transition:height var(--transicao)}
.cabecalho.rolou .marca img{height:44px}
.marca-texto{display:flex;flex-direction:column;line-height:1}
.marca-nome{font-family:var(--display);font-weight:900;font-size:1.22rem;letter-spacing:-.04em;color:var(--azul-900)}
.marca-sub{font-family:var(--dado);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--cinza);margin-top:.28rem}

.menu{display:flex;gap:.3rem;margin-left:auto;align-items:center}
.menu a{
  font-family:var(--display);font-weight:600;font-size:.95rem;
  padding:.55rem .85rem;border-radius:999px;color:var(--azul-900);
  transition:background var(--transicao),color var(--transicao);
}
.menu a:hover{background:var(--gelo);color:var(--azul-500)}
.menu a.ativo{color:var(--vermelho)}
.menu a.ativo::after{
  content:"";display:block;height:3px;width:22px;background:var(--vermelho);
  border-radius:2px;margin:.22rem auto 0;
}
.acoes-cabecalho{display:flex;gap:.5rem;align-items:center;flex:none}

.hamburguer{
  display:none;background:none;border:0;cursor:pointer;padding:.5rem;
  flex-direction:column;gap:5px;
}
.hamburguer span{display:block;width:26px;height:2.5px;background:var(--azul-900);border-radius:2px;transition:var(--transicao)}
.hamburguer.aberto span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.hamburguer.aberto span:nth-child(2){opacity:0}
.hamburguer.aberto span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

/* ============================================================
   HERÓI
   ============================================================ */
.heroi{
  position:relative;overflow:hidden;
  padding:118px 0 112px;
  background:var(--azul-900);
  color:#fff;
  isolation:isolate;
}
.heroi-fundo{
  position:absolute;inset:0;z-index:-2;
  background-position:center 38%;
  background-size:cover;
  background-repeat:no-repeat;
  transform:scale(1.04);
}
/* escurecimento: mais forte à esquerda, onde fica o texto */
.heroi::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg,rgba(1,36,63,.55) 0%,rgba(1,36,63,0) 22%,rgba(1,36,63,.55) 78%,rgba(1,36,63,.92) 100%),
    linear-gradient(95deg,rgba(1,36,63,.95) 0%,rgba(1,36,63,.88) 42%,rgba(1,36,63,.62) 72%,rgba(1,36,63,.55) 100%);
}
/* marcas de fita métrica no rodapé do herói */
.heroi::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:12px;
  background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.30) 0 1.5px,transparent 1.5px 13px);
}

.heroi-conteudo{position:relative;max-width:720px}
.heroi h1{color:#fff;margin-bottom:1rem;text-shadow:0 3px 24px rgba(0,0,0,.42)}
.heroi h1 em{font-style:normal;color:#FF8D86}
.heroi .etiqueta{color:#FF8D86}
.heroi .etiqueta::before{background:#FF8D86}
.heroi-texto{
  font-size:1.14rem;color:#DCEAF5;max-width:54ch;margin-bottom:2rem;
  text-shadow:0 2px 14px rgba(0,0,0,.45);
}
.heroi-botoes{display:flex;gap:.85rem;flex-wrap:wrap;margin-bottom:2.6rem}

.selos{display:flex;gap:2.4rem;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.28);padding-top:1.6rem}
.selo-num{font-family:var(--display);font-weight:800;font-size:1.75rem;color:#fff;line-height:1}
.selo-txt{font-family:var(--dado);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:#A8C6DC;margin-top:.35rem}

/* ============================================================
   MARQUEE DE MARCAS
   ============================================================ */
.faixa-marcas{background:var(--branco);border-block:1px solid var(--linha);padding:1.6rem 0;overflow:hidden}
.faixa-titulo{
  font-family:var(--dado);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--cinza);text-align:center;margin-bottom:1.1rem;
}
.marquee{display:flex;gap:.8rem;width:max-content;animation:desliza 38s linear infinite}
.faixa-marcas:hover .marquee{animation-play-state:paused}
@keyframes desliza{to{transform:translateX(-50%)}}
.chip-marca{
  font-family:var(--display);font-weight:700;font-size:.95rem;
  color:var(--azul-700);background:var(--gelo);
  border:1px solid var(--linha);border-radius:999px;
  padding:.55rem 1.3rem;white-space:nowrap;
}

/* ============================================================
   CARTÕES DE CATEGORIA
   ============================================================ */
.grade{display:grid;gap:1.4rem}
.grade--3{grid-template-columns:repeat(3,1fr)}
.grade--4{grid-template-columns:repeat(4,1fr)}
.grade--2{grid-template-columns:repeat(2,1fr)}

.cartao-cat{
  background:#fff;border:1px solid var(--linha);border-radius:var(--raio);
  padding:1.7rem 1.5rem;display:flex;flex-direction:column;
  transition:transform var(--transicao),box-shadow var(--transicao),border-color var(--transicao);
  position:relative;overflow:hidden;
}
.cartao-cat::after{
  content:"";position:absolute;left:0;top:0;height:4px;width:0;background:var(--vermelho);
  transition:width var(--transicao);
}
.cartao-cat:hover{transform:translateY(-5px);box-shadow:var(--sombra);border-color:var(--azul-200)}
.cartao-cat:hover::after{width:100%}
.cartao-icone{
  width:52px;height:52px;border-radius:12px;background:var(--azul-200);
  display:grid;place-items:center;margin-bottom:1.1rem;color:var(--azul-700);
}
.cartao-icone svg{width:27px;height:27px}
.cartao-cat h3{margin-bottom:.4rem}
.cartao-cat p{color:var(--cinza);font-size:.95rem;margin:0}
.cartao-bitolas{
  font-family:var(--dado);font-size:.72rem;color:var(--azul-500);
  margin-top:1rem;padding-top:.85rem;border-top:1px dashed var(--linha);
}

/* Cartão de categoria em destaque (fundo escuro) */
.cartao-cat--forte{background:var(--azul-700);border-color:var(--azul-700);color:#fff}
.cartao-cat--forte h3{color:#fff}
.cartao-cat--forte p{color:#C7DEF0}
.cartao-cat--forte .cartao-icone{background:rgba(255,255,255,.14);color:#fff}
.cartao-cat--forte .cartao-bitolas{color:var(--vermelho-200);border-color:rgba(255,255,255,.2)}

/* ============================================================
   BLOCO CLUBE DO INSTALADOR
   ============================================================ */
.clube{background:var(--azul-900);color:#fff;position:relative;overflow:hidden}
.clube::before{
  content:"";position:absolute;top:-140px;right:-100px;width:420px;height:420px;
  border-radius:50%;background:radial-gradient(circle,rgba(212,43,35,.30),transparent 68%);
}
.clube h2{color:#fff}
.clube .subtitulo{color:#AFC9DC}
.clube-grade{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center;position:relative}
.clube-lista{list-style:none;padding:0;margin:0 0 2rem;display:grid;gap:1rem}
.clube-lista li{display:flex;gap:.9rem;align-items:flex-start;color:#D6E6F2;font-size:1rem}
.clube-lista svg{width:22px;height:22px;color:var(--vermelho);flex:none;margin-top:3px}
.clube-caixa{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);
  border-radius:20px;padding:2rem;
}
.clube-numero{
  font-family:var(--display);font-weight:900;font-size:3.6rem;color:var(--vermelho);line-height:1;
}
.clube-caixa hr{border:0;border-top:1px dashed rgba(255,255,255,.22);margin:1.5rem 0}
.clube-caixa p{color:#C7DEF0;font-size:.96rem;margin:0}
.clube-caixa .rotulo{
  font-family:var(--dado);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:#9FBED4;margin:.5rem 0 0;
}

/* ============================================================
   BLOCO OLIVER (assinatura da marca)
   ============================================================ */
.oliver{background:var(--branco)}
.oliver-grade{display:grid;grid-template-columns:.9fr 1.1fr;gap:3rem;align-items:center}
.oliver-painel{
  position:relative;border-radius:24px;padding:2rem 1rem 0;
  background:linear-gradient(170deg,var(--azul-200),#fff 78%);
  display:flex;justify-content:center;align-items:flex-end;overflow:hidden;
  border:1px solid var(--linha);
}
.oliver-painel::before{  /* marcas de fita métrica ao fundo */
  content:"";position:absolute;left:0;right:0;bottom:0;height:14px;
  background-image:repeating-linear-gradient(90deg,rgba(2,64,115,.28) 0 1.5px,transparent 1.5px 13px);
}
.oliver-painel img{width:min(330px,82%);height:auto;filter:drop-shadow(0 16px 22px rgba(1,36,63,.22))}

.dicas{display:grid;gap:1rem;margin-top:1.6rem}
.dica{
  background:var(--gelo);border-left:4px solid var(--vermelho);border-radius:0 var(--raio-p) var(--raio-p) 0;
  padding:1.1rem 1.3rem;
}
.dica h4{font-size:1rem;margin:0 0 .3rem;color:var(--azul-900)}
.dica p{margin:0;color:var(--cinza);font-size:.94rem}

/* ============================================================
   ENTREGA
   ============================================================ */
.entrega{background:var(--azul-900);color:#fff;position:relative;overflow:hidden}
.entrega::before{
  content:"";position:absolute;top:-160px;left:-120px;width:460px;height:460px;border-radius:50%;
  background:radial-gradient(circle,rgba(2,64,115,.55),transparent 70%);
}
.entrega > .container{position:relative}
.entrega h2{color:#fff}
.entrega-grade{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:2.2rem}
.entrega-item{
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.2);
  border-radius:var(--raio);padding:1.6rem;
}
.entrega-item .grande{font-family:var(--display);font-weight:900;font-size:2.2rem;line-height:1}
.entrega-item p{margin:.5rem 0 0;color:#D9EAF7;font-size:.95rem}

/* ============================================================
   DEPOIMENTOS
   ============================================================ */
.depo{
  background:#fff;border:1px solid var(--linha);border-radius:var(--raio);
  padding:1.8rem;display:flex;flex-direction:column;gap:1rem;
}
.depo p{font-size:1rem;color:var(--grafite);margin:0}
.depo footer{display:flex;align-items:center;gap:.8rem;margin-top:auto}
.depo-inicial{
  width:40px;height:40px;border-radius:50%;background:var(--azul-200);color:var(--azul-700);
  display:grid;place-items:center;font-family:var(--display);font-weight:800;
}
.depo-nome{font-family:var(--display);font-weight:700;font-size:.95rem;line-height:1.2}
.depo-cargo{font-family:var(--dado);font-size:.7rem;color:var(--cinza);letter-spacing:.06em}
.estrelas{color:var(--vermelho);letter-spacing:.15em;font-size:.9rem}

/* Avaliações do Google */
.depo-topo{display:flex;align-items:center;justify-content:space-between;gap:.8rem}
.marca-google{
  font-family:var(--dado);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--cinza);display:inline-flex;align-items:center;gap:.4rem;
}
.marca-google svg{width:15px;height:15px}
.depo-meta{font-family:var(--dado);font-size:.68rem;color:var(--cinza);letter-spacing:.04em}
.selo-guia{
  display:inline-block;background:var(--azul-200);color:var(--azul-700);
  font-family:var(--dado);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;
  padding:.15rem .45rem;border-radius:4px;margin-left:.4rem;vertical-align:middle;
}
.resumo-nota{
  display:flex;align-items:center;justify-content:center;gap:1.4rem;flex-wrap:wrap;
  background:#fff;border:1px solid var(--linha);border-radius:999px;
  padding:.9rem 1.8rem;width:fit-content;margin:0 auto 2.4rem;box-shadow:var(--sombra);
}
.resumo-nota .estrelas{font-size:1.05rem}
.resumo-nota span{font-family:var(--dado);font-size:.78rem;color:var(--cinza)}

/* ============================================================
   CHAMADA FINAL
   ============================================================ */
.chamada{
  background:var(--vermelho);color:#fff;border-radius:26px;padding:3.2rem;
  display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap;
}
.chamada > div{flex:1 1 320px}
.chamada{position:relative}
.chamada h2{color:#fff;margin-bottom:.35rem}
.chamada-oliver{
  height:212px;width:auto;align-self:center;margin:0;flex:none;
  filter:drop-shadow(0 14px 20px rgba(0,0,0,.25));
}
.chamada p{margin:0;color:#FFEBDA}

/* ============================================================
   PÁGINAS INTERNAS — cabeçalho de página
   ============================================================ */
.capa{
  background:var(--azul-900);color:#fff;padding:70px 0 62px;position:relative;overflow:hidden;
}
.capa::before{
  content:"";position:absolute;right:-80px;top:-80px;width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle,rgba(20,118,190,.45),transparent 70%);
}
.capa h1{color:#fff;position:relative;margin-bottom:.6rem}
.capa p{color:#AFC9DC;max-width:62ch;position:relative;margin:0}
.migalhas{
  font-family:var(--dado);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;
  color:#7FA5C0;margin-bottom:1rem;position:relative;
}
.migalhas a:hover{color:var(--vermelho)}

/* ============================================================
   PRODUTOS — filtros e itens
   ============================================================ */
.filtros{display:flex;gap:.55rem;flex-wrap:wrap;justify-content:center;margin-bottom:2.4rem}
.filtro{
  border:1.5px solid var(--linha);background:#fff;color:var(--azul-900);
  border-radius:999px;padding:.55rem 1.15rem;cursor:pointer;
  font-family:var(--display);font-weight:600;font-size:.9rem;
  transition:var(--transicao);
}
.filtro:hover{border-color:var(--azul-500);color:var(--azul-500)}
.filtro.ativo{background:var(--azul-700);border-color:var(--azul-700);color:#fff}

.item{
  background:#fff;border:1px solid var(--linha);border-radius:var(--raio);
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform var(--transicao),box-shadow var(--transicao);
}
.item:hover{transform:translateY(-4px);box-shadow:var(--sombra)}
.item-img{aspect-ratio:5/3;background:var(--gelo);display:grid;place-items:center;overflow:hidden}
.item-img img{width:100%;height:100%;object-fit:cover}
.item-corpo{padding:1.2rem 1.3rem 1.4rem;display:flex;flex-direction:column;flex:1}
.item-cat{
  font-family:var(--dado);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--vermelho);margin-bottom:.5rem;
}
.item h3{font-size:1.02rem;margin-bottom:.5rem}
.item p{font-size:.9rem;color:var(--cinza);margin:0 0 1.1rem}
.item .btn{margin-top:auto;align-self:flex-start}

/* ============================================================
   FORMULÁRIO
   ============================================================ */
.formulario{
  background:#fff;border:1px solid var(--linha);border-radius:var(--raio);
  padding:2.2rem;box-shadow:var(--sombra);
}
.campo{margin-bottom:1.15rem}
.campo label{
  display:block;font-family:var(--display);font-weight:600;font-size:.9rem;
  margin-bottom:.4rem;color:var(--azul-900);
}
.campo input,.campo select,.campo textarea{
  width:100%;padding:.85rem 1rem;border:1.5px solid var(--linha);border-radius:var(--raio-p);
  font-family:var(--corpo);font-size:1rem;background:var(--gelo);color:var(--grafite);
  transition:border-color var(--transicao),background var(--transicao);
}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:none;border-color:var(--azul-500);background:#fff;
}
.campo textarea{min-height:130px;resize:vertical}
.campo-duplo{display:grid;grid-template-columns:1fr 1fr;gap:1.15rem}
.ajuda{font-family:var(--dado);font-size:.74rem;color:var(--cinza);margin-top:.4rem}

.aviso-form{
  background:var(--azul-200);border-radius:var(--raio-p);padding:.9rem 1.1rem;
  font-size:.88rem;color:var(--azul-900);margin-bottom:1.6rem;
}

/* ============================================================
   CONTATO / INFO
   ============================================================ */
.info-cartao{
  background:#fff;border:1px solid var(--linha);border-radius:var(--raio);padding:1.7rem;
}
.info-cartao h3{display:flex;align-items:center;gap:.6rem;font-size:1.05rem;margin-bottom:.7rem}
.info-cartao h3 svg{width:20px;height:20px;color:var(--vermelho)}
.info-cartao p{margin:0;color:var(--cinza);font-size:.96rem}
.info-cartao a{color:var(--azul-500);font-weight:600}
.info-cartao a:hover{text-decoration:underline}

.mapa{border-radius:var(--raio);overflow:hidden;border:1px solid var(--linha);box-shadow:var(--sombra)}
.mapa iframe{display:block;width:100%;height:420px;border:0}

.horarios{list-style:none;padding:0;margin:0}
.horarios li{
  display:flex;justify-content:space-between;gap:1rem;
  padding:.65rem 0;border-bottom:1px dashed var(--linha);
  font-family:var(--dado);font-size:.86rem;
}
.horarios li:last-child{border-bottom:0}
.horarios b{font-family:var(--corpo);font-weight:600;color:var(--azul-900)}

/* ============================================================
   SOBRE — história
   ============================================================ */
.historia{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}
.historia img{border-radius:20px;box-shadow:var(--sombra)}
.valores{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;margin-top:2.4rem}
.valor{background:#fff;border:1px solid var(--linha);border-radius:var(--raio);padding:1.5rem}
.valor h4{font-family:var(--display);font-size:1.02rem;margin:0 0 .4rem;color:var(--azul-900)}
.valor p{margin:0;font-size:.92rem;color:var(--cinza)}
.valor-marca{
  font-family:var(--dado);font-size:.72rem;color:var(--vermelho);letter-spacing:.14em;margin-bottom:.7rem;
}

/* Linha do tempo */
.linha-tempo{position:relative;padding-left:2.2rem;margin-top:2rem}
.linha-tempo::before{
  content:"";position:absolute;left:7px;top:6px;bottom:6px;width:2px;background:var(--linha);
}
.marco{position:relative;padding-bottom:1.9rem}
.marco:last-child{padding-bottom:0}
.marco::before{
  content:"";position:absolute;left:-2.2rem;top:6px;width:16px;height:16px;border-radius:50%;
  background:var(--vermelho);border:3px solid var(--gelo);
}
.marco-data{font-family:var(--dado);font-size:.76rem;letter-spacing:.12em;color:var(--vermelho);text-transform:uppercase}
.marco h4{font-family:var(--display);font-size:1.1rem;margin:.25rem 0 .35rem;color:var(--azul-900)}
.marco p{margin:0;color:var(--cinza);font-size:.95rem}

/* ============================================================
   RODAPÉ
   ============================================================ */
.rodape{background:var(--azul-900);color:#AFC9DC;padding:70px 0 0;font-size:.95rem}
.rodape-grade{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.1fr;gap:2.4rem}
.rodape h4{
  color:#fff;font-family:var(--display);font-size:.85rem;letter-spacing:.14em;
  text-transform:uppercase;margin-bottom:1.1rem;
}
.rodape img.logo-rodape{width:190px;margin-bottom:1.3rem}
.rodape ul{list-style:none;padding:0;margin:0;display:grid;gap:.6rem}
.rodape a{transition:color var(--transicao)}
.rodape a:hover{color:var(--vermelho)}
.rodape p{margin:0 0 .8rem}
.redes{display:flex;gap:.6rem;margin-top:1.2rem}
.redes a{
  width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.09);
  display:grid;place-items:center;color:#fff;transition:var(--transicao);
}
.redes a:hover{background:var(--vermelho);transform:translateY(-3px)}
.redes svg{width:19px;height:19px}
.rodape-base{
  border-top:1px solid rgba(255,255,255,.12);margin-top:3rem;padding:1.5rem 0;
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font-family:var(--dado);font-size:.75rem;color:#7FA5C0;
}

/* ============================================================
   FLUTUANTES
   ============================================================ */
.zap{
  position:fixed;right:20px;bottom:20px;z-index:80;
  width:60px;height:60px;border-radius:50%;background:#25D366;color:#fff;
  display:grid;place-items:center;box-shadow:0 10px 26px rgba(37,211,102,.45);
  transition:transform var(--transicao);
}
.zap:hover{transform:scale(1.08)}
.zap svg{width:31px;height:31px}
.zap::after{
  content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #25D366;
  animation:pulso 2.4s ease-out infinite;
}
@keyframes pulso{0%{transform:scale(1);opacity:.8}100%{transform:scale(1.7);opacity:0}}

.trilho{
  position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:70;
  display:flex;flex-direction:column;gap:2px;
}
.trilho a{
  background:var(--azul-700);color:#fff;padding:.85rem;display:grid;place-items:center;
  transition:background var(--transicao);
}
.trilho a:first-child{border-radius:10px 0 0 0}
.trilho a:last-child{border-radius:0 0 0 10px}
.trilho a:hover{background:var(--vermelho)}
.trilho svg{width:21px;height:21px}

.topo{
  position:fixed;left:20px;bottom:20px;z-index:80;
  width:46px;height:46px;border-radius:50%;background:var(--azul-700);color:#fff;
  display:grid;place-items:center;border:0;cursor:pointer;
  opacity:0;pointer-events:none;transition:var(--transicao);
}
.topo.visivel{opacity:1;pointer-events:auto}
.topo:hover{background:var(--vermelho)}

/* ============================================================
   ANIMAÇÃO DE ENTRADA
   ============================================================ */
.revela{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.revela.visivel{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .revela{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

:focus-visible{outline:3px solid var(--vermelho);outline-offset:3px;border-radius:4px}

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width:1024px){
  .grade--4{grid-template-columns:repeat(2,1fr)}
  .valores{grid-template-columns:repeat(2,1fr)}
  .rodape-grade{grid-template-columns:1fr 1fr}
  .clube-grade,.oliver-grade,.historia{grid-template-columns:1fr;gap:2.4rem}
  .trilho{display:none}
}

@media (max-width:940px){
  .menu{
    position:fixed;inset:0 0 0 auto;width:min(320px,84vw);
    background:#fff;flex-direction:column;align-items:stretch;
    padding:100px 1.4rem 2rem;gap:.2rem;
    transform:translateX(102%);transition:transform var(--transicao);
    box-shadow:-14px 0 40px rgba(6,35,56,.18);z-index:55;
  }
  .menu.aberto{transform:none}
  .menu a{padding:.95rem 1rem;border-bottom:1px solid var(--linha);border-radius:0;font-size:1.05rem}
  .menu a.ativo::after{margin:.25rem 0 0}
  .hamburguer{display:flex;order:3;margin-left:auto;z-index:60}
  .acoes-cabecalho .btn{display:none}
}

@media (max-width:820px){
  .topbar-itens span:not(:first-child){display:none}
}

@media (max-width:680px){
  body{font-size:16px}
  .secao{padding:60px 0}
  .grade--3,.grade--4,.grade--2,.entrega-grade,.valores,.campo-duplo{grid-template-columns:1fr}
  .chamada{padding:2.2rem;text-align:center;justify-content:center}
  .rodape-grade{grid-template-columns:1fr}
  .heroi{padding:76px 0 72px}
  .selos{gap:1.6rem}
  .chamada-oliver{display:none}
  .selos{gap:1.6rem}
  .formulario{padding:1.4rem}
}

/* ============================================================
   ESCOPO POR PÁGINA
   ------------------------------------------------------------
   Cada página tem um <main> com sua própria classe:
     pag-home · pag-produtos · pag-clube
     pag-sobre · pag-orcamento · pag-contato

   Para mudar algo em UMA página sem afetar as outras, escreva
   a regra com a classe da página na frente. Exemplo:

     .pag-produtos .cartao-cat{ ... }   -> só em Produtos
     .cartao-cat{ ... }                 -> em TODAS as páginas

   Regras específicas de cada página vão daqui para baixo.
   ============================================================ */

/* ---------- PÁGINA DE PRODUTOS ---------- */
.pag-produtos .item-img{background:#fff;border-bottom:1px solid var(--linha)}
.pag-produtos .item-img img{object-fit:cover}

.pag-produtos .item-img--vazio{
  background:var(--gelo);
  border-bottom:1px dashed var(--linha);
  display:grid;place-items:center;text-align:center;
}
.pag-produtos .item-img--vazio span{
  font-family:var(--dado);font-size:.72rem;line-height:1.7;
  color:var(--cinza);letter-spacing:.06em;text-transform:uppercase;
}

.pag-produtos .item-tags{
  font-family:var(--dado);font-size:.72rem;color:var(--azul-500);
  margin:0 0 1.1rem;padding-top:.8rem;border-top:1px dashed var(--linha);
}

/* ---------- PÁGINA CLUBE DO INSTALADOR ---------- */

.pag-clube .capa-conteudo h1{font-size:clamp(2.1rem,3.6vw,3.1rem)}
.pag-clube .capa-botoes{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.8rem}
.pag-clube .capa-nota{
  font-family:var(--dado);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:#7FA5C0;margin:1.6rem 0 0;
}

/* campos obrigatórios e aceite */
.obrig{color:var(--vermelho)}
.aceite{
  display:flex;gap:.75rem;align-items:flex-start;
  background:var(--gelo);border:1px solid var(--linha);border-radius:var(--raio-p);
  padding:1rem 1.1rem;margin:0 0 1.4rem;cursor:pointer;
}
.aceite input{width:19px;height:19px;flex:none;margin-top:2px;accent-color:var(--vermelho);cursor:pointer}
.aceite span{font-size:.86rem;line-height:1.55;color:var(--cinza)}

@media (max-width:900px){
}

/* ---------- CAPA DO CLUBE: banner de fundo com texto por cima ---------- */
.pag-clube .capa--clube{
  padding:0;
  min-height:clamp(440px,47vw,880px);   /* 47vw = proporção do banner: acima de ~940px não corta nada */
  display:flex;align-items:center;
  background:var(--azul-900);
  overflow:hidden;
}
.pag-clube .capa--clube::before{display:none}

.pag-clube .capa-fundo{
  position:absolute;inset:0;z-index:0;
  background-image:url('imagens/clube-banner-960.jpg');
  background-size:cover;background-position:center;background-repeat:no-repeat;
}
/* escurecimento: forte na esquerda, onde fica o texto; leve na direita, para as fotos aparecerem */
.pag-clube .capa-fundo::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(1,36,63,.42) 0%,rgba(1,36,63,0) 26%,rgba(1,36,63,0) 74%,rgba(1,36,63,.52) 100%),
    linear-gradient(100deg,rgba(1,36,63,.95) 0%,rgba(1,36,63,.88) 32%,rgba(1,36,63,.52) 62%,rgba(1,36,63,.34) 100%);
}

.pag-clube .capa--clube .container{position:relative;z-index:2;padding-block:72px}
.pag-clube .capa-conteudo{max-width:min(620px,62%)}
.pag-clube .capa-conteudo h1{text-shadow:0 3px 26px rgba(0,0,0,.48)}
.pag-clube .capa-conteudo > p{text-shadow:0 2px 16px rgba(0,0,0,.52)}

/* versão do arquivo conforme a tela — sempre a maior nitidez possível sem peso extra */
@media (min-width:961px){
  .pag-clube .capa-fundo{background-image:url('imagens/clube-banner-1400.jpg')}
}
@media (min-width:1401px){
  .pag-clube .capa-fundo{background-image:url('imagens/clube-banner.jpg')}
}

@media (max-width:900px){
  .pag-clube .capa-conteudo{max-width:none}
  .pag-clube .capa-fundo::after{
    background:linear-gradient(180deg,rgba(1,36,63,.90),rgba(1,36,63,.82) 55%,rgba(1,36,63,.94));
  }
}

/* ---------- PÁGINA SOBRE NÓS ---------- */
.pag-sobre .valores{grid-template-columns:repeat(3,1fr)}
.pag-sobre .valor-marca{font-size:.74rem;letter-spacing:.2em}

.pag-sobre .oliver-grade{grid-template-columns:.75fr 1.25fr}
.pag-sobre .retrato-oliver{margin:0;text-align:center}
.pag-sobre .retrato-oliver img{
  width:281px;max-width:100%;height:auto;      /* tamanho do arquivo — nunca amplia */
  border-radius:18px;border:7px solid #fff;box-shadow:var(--sombra-forte);
}
.pag-sobre .retrato-oliver figcaption{
  font-family:var(--dado);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--cinza);margin-top:1rem;
}
@media (max-width:1024px){
  .pag-sobre .valores{grid-template-columns:1fr}
  .pag-sobre .oliver-grade{grid-template-columns:1fr}
}

/* ============================================================
   CAMADA DE RESPONSIVIDADE
   ------------------------------------------------------------
   Só layout, espaçamento e tamanho. Nenhum conteúdo muda.
   ============================================================ */

/* --- segurança geral --- */
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{overflow-x:clip}
img{height:auto}                       /* impede distorção quando a largura encolhe */
[id]{scroll-margin-top:96px}           /* âncoras não param embaixo do cabeçalho fixo */

/* --- 1200px: container respira nas laterais --- */
@media (max-width:1200px){
  .container{width:min(var(--largura),94vw)}
}

/* --- 1024px: três colunas ficam estreitas demais --- */
@media (max-width:1024px){
  .grade--3{grid-template-columns:repeat(2,1fr)}
  .entrega-grade{grid-template-columns:repeat(2,1fr)}
  .pag-sobre .valores{grid-template-columns:repeat(2,1fr)}
  .secao{padding:72px 0}
  .capa{padding:58px 0 50px}
}

/* --- 940px: cabeçalho vira sanfona; topbar enxuga --- */
@media (max-width:940px){
  .topbar{font-size:.72rem}
  .cabecalho .container{padding:.55rem 0}
  .pag-clube .capa--clube .container{padding-block:56px}
}

/* --- 820px: duas colunas viram uma nas áreas densas --- */
@media (max-width:820px){
  .grade--2{grid-template-columns:1fr}
  .historia,.oliver-grade,.clube-grade{gap:2rem}
  .mapa iframe{height:340px}
}

/* --- 680px: telefone --- */
@media (max-width:680px){
  .grade--3,.entrega-grade,.pag-sobre .valores{grid-template-columns:1fr}
  .secao{padding:52px 0}
  .secao--fina{padding:40px 0}
  .capa{padding:46px 0 42px}

  .selo-num{font-size:1.45rem}
  .selos{gap:1.2rem 1.8rem;padding-top:1.2rem}
  .heroi{padding:64px 0 60px}
  .heroi-botoes .btn{flex:1 1 100%}

  .clube-numero{font-size:2.6rem}
  .clube-caixa{padding:1.5rem}
  .chamada{padding:1.8rem;border-radius:20px}
  .chamada .btn{width:100%}

  .resumo-nota{border-radius:16px;padding:1rem 1.2rem;text-align:center}
  .filtros{gap:.45rem}
  .filtro{padding:.5rem .95rem;font-size:.85rem}

  .mapa iframe{height:300px}
  .info-cartao,.depo,.item-corpo{padding:1.2rem}
  .aceite{padding:.9rem}
  .pag-sobre .retrato-oliver img{border-width:5px}
  [id]{scroll-margin-top:78px}
}

/* --- 420px: telefone pequeno --- */
@media (max-width:420px){
  .container{width:92vw}
  h1{font-size:1.95rem}
  .marca img{height:44px}
  .cabecalho.rolou .marca img{height:38px}
  .btn{padding:.85rem 1.35rem;font-size:.92rem}
  .btn--grande{padding:.95rem 1.5rem;font-size:.98rem}
  .selo-num{font-size:1.25rem}
  .clube-numero{font-size:2.2rem}
  .etiqueta{font-size:.68rem;letter-spacing:.16em}
  .zap{width:54px;height:54px}
  .zap svg{width:27px;height:27px}
}

/* --- telefone deitado: capa alta demais atrapalha --- */
@media (max-height:520px) and (orientation:landscape){
  .pag-clube .capa--clube{min-height:auto}
  .pag-clube .capa--clube .container{padding-block:48px}
  .heroi{padding:52px 0}
}

/* ============================================================
   CORREÇÃO DA GAVETA DO MENU
   ------------------------------------------------------------
   backdrop-filter no cabeçalho vira bloco de contenção para
   elementos position:fixed — a gaveta ficava presa dentro dele
   e aparecia sem fundo. Abaixo de 940px o desfoque sai.
   ============================================================ */
@media (max-width:940px){
  .cabecalho{
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    background:#fff;
  }
  .menu{
    background:#fff;
    height:100dvh;
    overflow-y:auto;
    padding:96px 1.4rem 2.4rem;
    border-left:1px solid var(--linha);
  }
  .menu::before{                       /* topo da gaveta, atrás do botão de fechar */
    content:"";position:absolute;top:0;left:0;right:0;height:88px;
    background:#fff;border-bottom:1px solid var(--linha);
  }
  .menu a{position:relative;background:#fff}
}

/* ============================================================
   CARROSSEL (avaliações da home)
   ============================================================ */
.carrossel{position:relative}

.carrossel-trilho{
  display:flex;gap:1.4rem;
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding-block:.4rem;
  padding-inline:calc((100% - min(720px,86%)) / 2);
  scrollbar-width:none;-ms-overflow-style:none;
}
.carrossel-trilho::-webkit-scrollbar{display:none}
.carrossel-trilho:focus-visible{outline:3px solid var(--vermelho);outline-offset:4px;border-radius:var(--raio)}

.carrossel-trilho > .depo{
  flex:0 0 min(720px,86%);
  scroll-snap-align:center;
  min-height:100%;
}
.carrossel-trilho > .depo p{font-size:1.08rem;line-height:1.7}

.carrossel-controles{
  display:flex;align-items:center;justify-content:center;gap:1.1rem;margin-top:1.6rem;
}
.carrossel-btn{
  width:46px;height:46px;border-radius:50%;flex:none;
  border:1.5px solid var(--linha);background:#fff;color:var(--azul-700);
  display:grid;place-items:center;cursor:pointer;
  transition:background var(--transicao),color var(--transicao),border-color var(--transicao),opacity var(--transicao);
}
.carrossel-btn svg{width:20px;height:20px}
.carrossel-btn:hover{background:var(--azul-700);color:#fff;border-color:var(--azul-700)}
.carrossel-btn:disabled{opacity:.3;cursor:default;background:#fff;color:var(--azul-700);border-color:var(--linha)}

.carrossel-pontos{display:flex;gap:.5rem;align-items:center}
.carrossel-ponto{
  width:9px;height:9px;border-radius:999px;padding:0;border:0;cursor:pointer;
  background:var(--linha);transition:background var(--transicao),width var(--transicao);
}
.carrossel-ponto.ativo{background:var(--vermelho);width:28px}

@media (max-width:680px){
  .carrossel-trilho{gap:1rem;padding-inline:calc((100% - 88%) / 2)}
  .carrossel-trilho > .depo{flex:0 0 88%}
  .carrossel-trilho > .depo p{font-size:1rem}
  .carrossel-btn{width:42px;height:42px}
}

/* ---------- carrossel de produtos: vários cartões por vez ---------- */
.carrossel--produtos .carrossel-trilho{
  padding-inline:.4rem;
  padding-block:.6rem;
  gap:1.3rem;
}
.carrossel--produtos .carrossel-trilho > .item{
  flex:0 0 clamp(258px,30%,320px);
  scroll-snap-align:start;
}
@media (max-width:820px){
  .carrossel--produtos .carrossel-trilho > .item{flex:0 0 clamp(240px,46%,300px)}
}
@media (max-width:520px){
  .carrossel--produtos .carrossel-trilho > .item{flex:0 0 82%}
}

/* ---------- botão do WhatsApp mais alto ---------- */
.zap{bottom:96px}
.topo{bottom:96px}

/* ---------- foto do Oliver centralizada quando a coluna quebra ---------- */
.pag-sobre .retrato-oliver img{margin-inline:auto}