/* ==========================================================================
   Manejo Fitness - CSS do site codado (substitui Elementor)
   Breakpoints (iguais aos do Elementor): mobile <=767 | tablet 768-1024 | desktop >=1025
   ========================================================================== */

/* ---------- Fontes ---------- */
@font-face { font-family: "Gotham"; font-style: normal; font-weight: 100; font-display: swap; src: url("../fonts/Gotham-XLight.woff2") format("woff2"); }
@font-face { font-family: "Gotham"; font-style: normal; font-weight: 200; font-display: swap; src: url("../fonts/Gotham-Light.woff2") format("woff2"); }
@font-face { font-family: "Gotham"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/Gotham-Book.woff2") format("woff2"); }
@font-face { font-family: "Gotham"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/Gotham-Black.woff2") format("woff2"); }

/* ---------- Tokens ---------- */
:root {
  --primaria: #F8811F;
  --secundaria: #FFC818;
  --marrom: #743200;
  --marrom-escuro: #240F00;
  --marrom-botao: #251000;
  --cinza-texto: #D8D8D8;
  --branco: #FFFFFF;
  --largura-conteudo: 1140px;
  --grad-botao: linear-gradient(90deg, var(--primaria) 0%, var(--marrom-botao) 100%);
  --grad-header: linear-gradient(90deg, var(--primaria) 0%, var(--marrom) 100%);
  --grad-rodape: linear-gradient(90deg, var(--primaria) 0%, var(--marrom-escuro) 100%);
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { max-width: 100vw; overflow-x: hidden !important; }

/* Barras de rolagem no padrao da marca (Chrome/Edge/Safari + Firefox) */
html { scrollbar-width: thin; scrollbar-color: var(--primaria) #111111; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #111111; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--primaria), var(--marrom)); border-radius: 8px; border: 2px solid #111111; }
::-webkit-scrollbar-thumb:hover { background: var(--primaria); }
::-webkit-scrollbar-corner { background: #111111; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: #000;
  color: var(--branco);
  font-family: "Gotham", sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
}
body.fundo-escuro-2 { background: #0D0D0D; }
/* rodape sempre no pe da tela em paginas curtas (404, blog vazio) */
body { min-height: 100vh; display: flex; flex-direction: column; }
#conteudo { flex: 1 0 auto; }
img { max-width: 100%; height: auto; display: inline-block; vertical-align: middle; border: 0; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: inherit; line-height: inherit; }
p { margin: 0 0 .9rem; }
/* blocos que no Elementor eram 'text-editor' (um <p> dentro): mantem o mesmo respiro de .9rem */
.hero__titulo, .hero__subtitulo, .linhas__titulo, .linhas__subtitulo, .titulo-secao, .subtitulo-secao, .processo__titulo, .processo__subtitulo,
.sobre__titulo, .cta-final__titulo, .cta-final__subtitulo, .cabecalho-pagina__titulo, .cabecalho-pagina__subtitulo, .catalogo-instrucao__texto,
.matheus-item__texto, .rodape__copy, .rodape__aviso, .contador-selecionar-produtos { margin-bottom: .9rem; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.visualmente-oculto { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0; }

/* ---------- Utilitarios ---------- */
.container { width: 100%; max-width: var(--largura-conteudo); margin: 0 auto; }
.texto-destacado { color: var(--primaria); }
.texto-destacado-fundo-branco { background-color: #fff; border-radius: 10px; padding: 2px 7px; }
.texto-fundo-animado {
  animation: 3.4s linear infinite alternate brilho;
  background-image: linear-gradient(45deg, var(--primaria), var(--primaria), #FFC818, #FF7B00);
  background-size: 400% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
  transition: all .8s;
  font-weight: 700;
}
@keyframes brilho { 0% { background-position: 20% 0; } 100% { background-position: 100% 0; } }
.circulo-blur {
  position: absolute; width: 200px; height: 200px; border-radius: 50%;
  background-image: linear-gradient(45deg, #ff6e01, #FF7B00);
  filter: blur(190px); opacity: 1; pointer-events: none;
}
.icone { display: inline-block; width: 1em; height: 1em; fill: currentColor; vertical-align: middle; }
.icone svg { width: 100%; height: 100%; display: block; fill: inherit; }
.so-mobile { display: none !important; }
.so-desktop { display: block; }

/* Botao padrao (gradiente laranja) */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 20px 30px; border-radius: 15px;
  background-image: var(--grad-botao);
  font-family: "Roboto", sans-serif; font-size: 20px; font-weight: 500; line-height: 1;
  color: #fff; text-align: center; cursor: pointer;
  transition: transform .3s, filter .3s, box-shadow .3s;
}
.botao .icone { width: 20px; height: 20px; }
.botao:hover, .botao:focus { color: #fff; transform: scale(1.05); filter: brightness(1.12); box-shadow: 0 8px 24px rgba(248, 129, 31, .35); }

/* ==========================================================================
   CABECALHO (fixo)
   ========================================================================== */
.cabecalho {
  position: fixed; top: 0; left: 0; right: 0; z-index: 95;
  min-height: 100px; padding: 0 10%;
  display: flex; flex-direction: column; justify-content: center;
  background-color: rgba(0, 0, 0, .45);
  border-bottom: 2px solid #3B3B3B;
  backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
}
.cabecalho .container { display: flex; align-items: center; justify-content: space-between; }
.cabecalho__logo { width: 207px; flex: 0 0 auto; text-align: center; }
.cabecalho__logo img { width: 100%; display: block; }
.cabecalho__menu { display: flex; align-items: center; justify-content: flex-end; gap: 20px; }
.cabecalho__botao {
  display: inline-block; padding: 12px 24px; border-radius: 20px;
  background-image: var(--grad-header);
  font-family: "Gotham", sans-serif; font-size: 17px; font-weight: 500; line-height: 1;
  text-transform: uppercase; color: #fff; cursor: pointer;
  transition: transform .3s;
}
.cabecalho__botao:hover, .cabecalho__botao:focus, .cabecalho__botao:active { transform: scale(1.1); }
.cabecalho__espaco { height: 100px; }   /* compensa o header fixo */

/* ==========================================================================
   HERO (home e contato)
   ========================================================================== */
.hero {
  position: relative; margin-top: -101px; min-height: 655px;
  background-image: url("../img/hero-academia.jpg");
  background-position: center right; background-repeat: no-repeat; background-size: 50% auto;
}
.hero::before {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(90deg, #000000 50%, #00000096 71%);
}
.hero .container { position: relative; display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; padding: 200px 0 100px; }
.hero__conteudo { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; gap: 15px; padding: 10px; }
.hero__conteudo .circulo-blur { top: -20px; left: -70%; }
.hero__titulo { font-size: 40px; line-height: 48px; color: #fff; }
.hero__subtitulo { font-size: 24px; font-weight: 400; line-height: 1; color: var(--cinza-texto); max-width: 475px; }
.hero__botao { align-self: flex-start; }

/* ==========================================================================
   SECAO LINHAS (fundo fumaca) - home, contato e pagina de produtos
   ========================================================================== */
.linhas {
  position: relative;
  background-image: url("../img/fundo-fumaca.jpg");
  background-position: center right; background-repeat: no-repeat; background-size: cover;
}
.linhas::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(to bottom, #000, rgba(0, 0, 0, .78), #000); }
.linhas .container { position: relative; padding: 50px 0; }
.linhas__conteudo { position: relative; display: flex; flex-direction: column; align-items: center; padding: 10px; }
.linhas__barra { position: absolute; top: -63px; left: -8.542%; width: 77px; opacity: .4; z-index: 1; pointer-events: none; }
.linhas__barra img { width: 100%; display: block; }
.linhas__titulo { font-family: "Roboto", sans-serif; font-size: 40px; line-height: 48px; text-align: center; color: #fff; }
.linhas__subtitulo { font-size: 25px; font-weight: 400; line-height: 25px; text-align: center; color: var(--cinza-texto); max-width: 986px; }
.linhas__grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding: 10px; width: 100%; }
.matheus-item {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center; align-items: stretch;
  padding: 50px 20px; min-height: 100%;
  background-color: rgba(0, 0, 0, .15);
  border: 3px solid rgba(248, 129, 31, .61); border-radius: 20px;
  text-align: center;
}
.matheus-item::before {
  content: ""; position: absolute; top: 10px; left: 10px; width: 50px; height: 50px;
  border-radius: 100px; background-color: var(--primaria); filter: blur(70px); opacity: 1;
}
.matheus-item__logo { position: relative; margin: 0 0 14px; }
.matheus-item__logo--ham { margin-bottom: 16px; }
.matheus-item__logo img { display: inline-block; }
.matheus-item__logo--evo img { width: 218px; }
.matheus-item__logo--ham img { width: 224px; }
.matheus-item__logo--exclusive img { width: 216px; border-radius: 15px; }
.matheus-item__texto { position: relative; font-size: 16px; font-weight: 400; line-height: 16px; color: #fff; }
.matheus-item .botao { position: relative; align-self: center; margin-top: 0; }
.linhas__acao { display: flex; flex-direction: column; align-items: center; width: 100%; padding: 62px 0 30px; }

/* ==========================================================================
   SECAO "POR QUE ESCOLHER"
   ========================================================================== */
.porque { position: relative; border-top: 2px solid #54595FC4; }
.porque .container { padding: 50px 0; }
.porque__conteudo { display: flex; flex-direction: column; align-items: center; padding: 10px; }
.titulo-secao { font-size: 40px; line-height: 48px; text-align: center; color: #fff; }
.subtitulo-secao { font-size: 25px; font-weight: 400; line-height: 25px; text-align: center; color: var(--cinza-texto); max-width: 986px; }
.porque__cards { display: flex; gap: 20px; padding: 10px; width: 100%; }
.item2sessao {
  position: relative; overflow: hidden; flex: 1 1 0;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  padding: 20px; border-radius: 20px; background-color: var(--marrom);
  transition: transform .4s;
}
.item2sessao::before {
  content: ""; position: absolute; top: -30px; left: -50px; width: 100px; height: 100px;
  border-radius: 50%; background-color: var(--primaria); filter: blur(30px); opacity: 1;
}
.item2sessao__icone { display: flex; align-items: center; justify-content: center; padding: 10px; }
.item2sessao__icone .icone { width: 40px; height: 40px; color: #fff; transition: all 1s; }
.item2sessao__texto { display: flex; flex-direction: column; gap: 5px; width: 100%; text-align: center; }
.item2sessao__titulo { font-size: 20px; font-weight: 400; line-height: 20px; color: #fff; }
.porque__cards > .item2sessao:hover, .confianca__cards > .item2sessao:hover { transform: translateY(-10px); }
.porque__cards > .item2sessao:hover .icone, .confianca__cards > .item2sessao:hover .icone { transform: scale(1.1); }

/* ==========================================================================
   SECAO "QUEM JA CONFIA" (gradiente laranja)
   ========================================================================== */
.confianca { background-image: linear-gradient(180deg, var(--primaria) 0%, var(--marrom-escuro) 100%); }
.confianca .container { padding: 50px 0; }
.confianca__conteudo { display: flex; flex-direction: column; align-items: center; padding: 10px; }
.confianca .subtitulo-secao { color: #fff; }
.confianca__cards { display: flex; gap: 20px; padding: 10px; width: 100%; }
.confianca .item2sessao { background: none; padding: 20px 10px; overflow: visible; }
.confianca .item2sessao::before { display: none; }
.confianca .item2sessao__icone .icone { color: var(--primaria); }
.confianca .item2sessao__titulo { font-family: "Roboto", sans-serif; font-size: 20px; font-weight: 600; line-height: 20px; color: #F2F2F2; }
.confianca .item2sessao__desc { font-family: "Roboto", sans-serif; font-size: 14px; font-weight: 400; line-height: 14px; color: #C6C6C6; margin: 0; }

/* ==========================================================================
   SECAO "DO CONTATO A ENTREGA" (processo)
   ========================================================================== */
.processo .container { padding: 50px 0; }
.processo__grade { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; padding: 10px; border-radius: 15px; }
.processo__texto { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 10px; }
.processo__titulo { font-size: 40px; line-height: 48px; color: #fff; padding-bottom: 10px; }
.processo__subtitulo { font-size: 25px; font-weight: 400; line-height: 25px; color: var(--cinza-texto); max-width: 466px; }
.processo__passos { display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 10px; }
.box-shadow-interno-azul-claro {
  position: relative; width: 100%;
  display: grid; grid-template-columns: min-content 1fr; gap: 40px; align-items: center; justify-items: center;
  padding: 10px 20px 10px 40px;
  background-color: var(--marrom); border: 1px solid var(--primaria); border-radius: 40px;
}
.box-shadow-interno-azul-claro--linha::before {
  content: ""; position: absolute; top: 100%; left: calc(50% - 100px); width: 200px; height: 0;
  border: none; border-bottom: dashed; color: var(--primaria);
  transform: rotate(15deg); z-index: -3; background: transparent !important;
}
.passo__icone .icone { width: 50px; height: 50px; color: var(--primaria); }
.passo__texto { display: flex; flex-direction: column; justify-content: center; width: 100%; }
.passo__titulo { font-family: "Roboto", sans-serif; font-size: 30px; font-weight: 600; line-height: 45px; color: #fff; margin: 0 0 -16px; }
.passo__titulo p { margin-bottom: .9rem; }
.passo__desc { font-size: 16px; font-weight: 400; line-height: 1.5; color: #fff; }
.processo__acao { text-align: center; padding: 0 0 20px; }

/* ==========================================================================
   SECAO "SOBRE A MANEJO" e CTA FINAL (fundo padrao M)
   ========================================================================== */
.sobre, .cta-final {
  position: relative;
  background-image: url("../img/padrao-m.png"); background-size: 5% auto;
}
.sobre::before, .cta-final::before { content: ""; position: absolute; inset: 0; background-color: rgba(0, 0, 0, .86); }
.sobre .container { position: relative; display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; padding: 100px 0; }
.sobre__texto { display: flex; flex-direction: column; gap: 20px; padding: 10px; }
.sobre__titulo { font-size: 40px; line-height: 48px; color: #fff; }
.sobre__corpo { padding: 15px; border-radius: 15px; font-size: 25px; font-weight: 400; line-height: 1em; color: var(--cinza-texto); }
.sobre__corpo strong { font-weight: 700; }
.sobre__imagem { display: flex; flex-direction: column; align-items: center; padding: 10px; }
.sobre__imagem img { width: 76%; border-radius: 20px; }

.cta-final .container { position: relative; padding: 0 0 100px; }
.cta-final__caixa {
  position: relative; overflow: hidden;
  display: flex; align-items: center; padding: 100px 50px;
  background-color: rgba(20, 9, 0, .69); border: 2px solid rgba(204, 88, 0, .52); border-radius: 15px;
}
.cta-final__caixa .circulo-blur { top: -60px; left: 0; filter: blur(270px); }
.cta-final__conteudo { position: relative; display: flex; flex-direction: column; align-items: center; padding: 10px; width: 100%; }
.cta-final__titulo { font-size: 40px; line-height: 48px; text-align: center; color: #fff; margin-bottom: calc(.9rem - 10px); }
.cta-final__subtitulo { font-size: 25px; font-weight: 400; line-height: 25px; text-align: center; color: #fff; margin-top: 3px; }

/* ==========================================================================
   RODAPE
   ========================================================================== */
.rodape { background-image: var(--grad-rodape); padding: 0 30px; }
.rodape .container { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; padding: 30px 0; }
.rodape__conteudo { display: flex; flex-direction: column; align-items: center; gap: 20px; width: 75%; padding: 10px; }
.rodape__copy, .rodape__aviso { font-family: "Manrope", sans-serif; text-align: center; color: #fff; width: 100%; }
.rodape__copy { font-weight: 700; }
.rodape__copy a { color: #fff; }
.rodape__copy img.emoji { display: inline; width: 16px; height: 16px; margin: 0 .07em; vertical-align: -.1em; }
.rodape__aviso { font-weight: 400; }
.rodape__menu { display: flex; justify-content: center; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.rodape__menu li { position: relative; display: flex; }
.rodape__menu li:not(:last-child)::after { content: ""; width: 3px; height: 35%; align-self: center; background-color: #fff; }
.rodape__menu a { display: flex; align-items: center; padding: 13px 20px; font-family: "Manrope", sans-serif; font-weight: 600; font-size: 16px; line-height: 20px; color: #fff; text-decoration: underline; transition: color .3s; }
.rodape__menu a:hover { color: #FFA969; }

/* ==========================================================================
   BOTAO FLUTUANTE WHATSAPP
   ========================================================================== */
.flutuante {
  position: fixed; right: 20px; bottom: 20px; z-index: 7;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  width: 200px; padding: 10px;
}
.flutuante a { display: block; width: 70px; height: 70px; transition: transform .3s; }
.flutuante a:hover { transform: scale(1.1); }
.flutuante img { width: 100%; display: block; }

/* ==========================================================================
   POPUP DE CONTATO (formulario do CRM)
   ========================================================================== */
.popup { position: fixed; inset: 0; z-index: 9999; display: none; align-items: center; justify-content: center; background-color: rgba(0, 0, 0, .8); }
.popup.aberto { display: flex; animation: fadeIn .4s; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.popup__caixa { position: relative; width: 641px; max-width: 90vw; max-height: 90vh; overflow-y: auto; overflow-x: hidden; box-shadow: 2px 8px 23px 3px rgba(0, 0, 0, .2); border-radius: 20px; }
.popup__conteudo {
  position: relative; display: flex; flex-direction: column; gap: 20px;
  padding: 30px; border-radius: 20px;
  background-image: linear-gradient(145deg, var(--primaria) 0%, #FFC818 100%);
}
.popup__conteudo::before { content: ""; position: absolute; inset: 0; border-radius: 20px; background-color: #000; opacity: .8; }
.popup__conteudo > * { position: relative; max-width: 100%; }
.popup__logo { align-self: center; width: 41%; padding: 20px 0; background-color: #fff; border-radius: 20px; text-align: center; }
.popup__logo img { width: 80%; }
.popup__texto { font-family: "Roboto", sans-serif; font-weight: 400; text-align: center; color: #fff; }
.popup__form iframe { width: 100%; border: none; border-radius: 8px; min-height: 432px; display: block; }
.popup__fechar {
  position: absolute; top: 12px; right: 12px; z-index: 2; width: 16px; height: 16px; padding: 0;
  display: flex; align-items: center; justify-content: center; color: #fff; border: 1px solid #fff; border-radius: 2px; cursor: pointer;
}
.popup__fechar svg { width: 8px; height: 8px; fill: #fff; }
.popup__fechar:hover { background-color: rgba(255, 255, 255, .2); }
body.popup-aberto { overflow: hidden; }

/* ==========================================================================
   PAGINA "CONHECA NOSSOS PRODUTOS"
   ========================================================================== */
.cabecalho-pagina { position: relative; margin-top: -101px; }
.cabecalho-pagina .container { display: grid; padding: 202px 0 15px; }
.cabecalho-pagina__conteudo { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; padding: 10px; }
.cabecalho-pagina .circulo-blur { top: -20px; left: -70%; z-index: -10; }
.cabecalho-pagina__titulo { font-size: 40px; line-height: 48px; color: #fff; margin-bottom: calc(.9rem - 13px); }
.cabecalho-pagina__subtitulo { font-size: 24px; font-weight: 400; text-align: center; color: var(--cinza-texto); }
.linhas--catalogo .linhas__barra { top: -63px; }
.linhas--catalogo .matheus-item__texto { margin-bottom: 0; }
.linhas--catalogo .matheus-item .botao { margin-top: 0; }

/* ==========================================================================
   PAGINAS DE TEXTO (termos / politicas)
   ========================================================================== */
.pagina-texto { padding: 0 20px; }
.pagina-texto .container { padding: 50px 0; }
.pagina-texto__titulo { font-family: "Roboto", sans-serif; font-size: 45px; font-weight: 600; line-height: 45px; text-align: center; color: #fff; padding-bottom: 30px; }
.pagina-texto__corpo { font-family: "Roboto", sans-serif; font-weight: 400; color: #fff; }
.pagina-texto__corpo--gotham { font-family: "Gotham", sans-serif; }
.pagina-texto__corpo ul { margin: 0; padding-left: 40px; }
/* termos: o texto original tinha paragrafos vazios depois de cada lista (margem de .9rem) */
.pagina-texto__corpo--espacado ul { margin-bottom: .9rem; }
.pagina-texto__corpo li { margin-bottom: 0; }
.pagina-texto__corpo strong { font-weight: 700; }

/* ==========================================================================
   PAGINA "PRODUTOS SELECIONAVEIS" (catalogo sem header/footer)
   ========================================================================== */
.catalogo-abas {
  position: sticky; top: 0; z-index: 90;
  background-color: rgba(0, 0, 0, .45);
  backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
}
.catalogo-abas .container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding: 10px 0; justify-items: center; }
.catalogo-aba {
  display: flex; flex-direction: column; align-items: center; padding: 10px 30px; border-radius: 20px; cursor: pointer;
  transition: background-color .3s;
}
.catalogo-aba h2 { font-size: 25px; font-weight: 600; line-height: 25px; color: #fff; white-space: nowrap; }
.catalogo-aba:hover { background-color: rgba(248, 129, 31, .25); }
.catalogo-aba.ativa { background-color: var(--primaria); color: var(--secundaria); }
.catalogo-instrucao .container { padding: 30px 0 0; }
.catalogo-instrucao__texto { font-size: 30px; font-weight: 600; line-height: 45px; text-align: center; color: #fff; }
.catalogo { padding: 0 10px; }
.catalogo .container { display: grid; grid-template-columns: 840px 1fr; gap: 20px; padding: 10px 0; align-items: start; }
.catalogo__lista { display: flex; flex-direction: column; gap: 20px; padding: 10px; }
.lista-itens { display: none; padding: 0 10px; animation: fadeIn .6s; }
.lista-itens.ativa { display: block; }
.lista-itens__grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding: 20px 0; }
.produto-card {
  position: relative; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 20px;
  padding: 20px; border-radius: 20px; cursor: pointer;
  background-image: linear-gradient(180deg, rgba(248, 129, 31, .5), rgba(36, 15, 0, .5));
  transition: all .5s;
}
.produto-card:hover { transform: scale(.95); }
.produto-card__nome { font-size: 26px; line-height: 33px; text-align: center; color: #fff; }
.produto-card__nome p { margin-bottom: .9rem; }
.produto-card__imagem { text-align: center; }
.produto-card__imagem img { width: 100%; border-radius: 15px; pointer-events: none; display: inline-block; }
.produto-card.produto-adicionado { background-image: linear-gradient(180deg, rgba(248, 129, 31, 1), rgba(36, 15, 0, 1)); }
.produto-card.produto-adicionado::before {
  content: ""; position: absolute; top: 5px; right: 5px; width: 30px; height: 30px; padding: 5px;
  pointer-events: none;
  background-repeat: no-repeat; background-position: center; background-size: 20px 20px;
  /* bootstrap-icons "check-circle-fill" (bi-check-circle-fill), cor #240F00 */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23240F00'><path d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z'/></svg>");
}
.catalogo__lateral { position: sticky; top: 88px; display: flex; flex-direction: column; gap: 20px; padding: 10px; }
.contador-selecionar-produtos { font-weight: 500; color: #fff; }
.catalogo__lateral .botao { align-self: flex-start; padding: 15px 30px; font-size: 19px; }
.catalogo__barra-mobile { display: none; }

/* ==========================================================================
   PAGINA "LISTAR PRODUTOS SELECIONADOS"
   ========================================================================== */
.listar { padding: 0 10px; }
.listar .container { padding: 10px 0; }
.listar .lista-itens { display: block; }
.container-feedback { padding: 10px; text-align: center; font-weight: 500; }

/* ==========================================================================
   CARROSSEL (mobile/tablet) - substitui o nested-carousel do Elementor
   ========================================================================== */
.carrossel { position: relative; width: 100%; display: none; }
.carrossel__viewport { overflow: hidden; }
.carrossel__trilho { display: flex; gap: 10px; transition: transform .3s ease; will-change: transform; }
.carrossel__slide { flex: 0 0 100%; display: flex; flex-direction: column; padding: 0 10px; }
.carrossel__seta {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 25px; height: 25px; padding: 0; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.carrossel__seta svg { width: 25px; height: 25px; fill: #fff; }
.carrossel__seta--ant { left: 0; }
.carrossel__seta--prox { right: 0; }
.carrossel__pontos { display: flex; justify-content: center; gap: 6px; margin-top: 10px; }
.carrossel__ponto { width: 6px; height: 6px; border-radius: 50%; background-color: var(--primaria); opacity: .3; padding: 0; cursor: pointer; }
.carrossel__ponto.ativo { opacity: 1; }
.carrossel .item2sessao { width: 100%; flex: 1 1 auto; min-height: 100%; }

/* ==========================================================================
   TABLET (768px a 1024px)
   ========================================================================== */
@media (max-width: 1024px) {
  :root { --largura-conteudo: 1024px; }
  .cabecalho { min-height: 85px; padding: 20px 40px; }
  .cabecalho__espaco { height: 85px; }

  .hero .container { grid-template-columns: 1fr; }
  .hero__conteudo { padding: 0 20px; }
  .hero__subtitulo { font-size: 21px; line-height: 21px; max-width: none; }

  .linhas__barra { left: -77px; top: -63px; }
  .linhas__grade { margin-top: 12px; }

  .porque__cards, .confianca__cards { display: none; }
  .carrossel { display: block; }
  .carrossel .item2sessao { padding: 40px 20px 40px 30px; justify-content: center; background-image: linear-gradient(90deg, var(--primaria) 0%, var(--marrom-escuro) 100%); }
  .carrossel .item2sessao__icone .icone { width: 64px; height: 64px; }
  .confianca .carrossel .item2sessao { background: none; padding: 10px 20px; }

  .processo__grade { grid-template-columns: 1fr; padding: 0 70px; }
  .processo__titulo { text-align: center; }
  .processo__acao { padding: 40px 0 30px; }

  .sobre .container { grid-template-columns: 1fr; padding: 30px 0; }
  .sobre__titulo { text-align: center; }
  .sobre__corpo { text-align: center; }
  .sobre__imagem { display: none; }
  .cta-final__caixa { padding: 100px 50px; }

  .rodape__conteudo { width: 630px; max-width: 100%; }

  .catalogo .container { grid-template-columns: 1fr 300px; }
  .lista-itens__grade { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   MOBILE (ate 767px)
   ========================================================================== */
@media (max-width: 767px) {
  :root { --largura-conteudo: 767px; }
  .so-mobile { display: block !important; }
  .so-desktop { display: none !important; }

  .cabecalho { min-height: 65px; padding: 20px 24px; }
  .cabecalho .container { flex-wrap: wrap; }
  .cabecalho__logo { width: 166px; padding: 10px; border-radius: 5px; }
  .cabecalho__menu { justify-content: center; }
  .cabecalho__botao { font-size: 12px; }
  .cabecalho__espaco { height: 95px; }

  .hero { min-height: 0; padding: 0 20px; background-position: 8px -99px; background-size: 100% auto; }
  .hero::before { background-image: linear-gradient(0deg, #000000 46%, #00000096 100%); }
  .hero .container { padding: 259px 0 63px; }
  .hero__conteudo { padding: 0; z-index: 1; }
  .hero__conteudo .circulo-blur { top: 0; left: 0; opacity: .7; filter: blur(130px); z-index: 0; }
  .hero__titulo { font-size: 8vw !important; line-height: 1.2; margin-bottom: -11px; position: relative; }
  .hero__subtitulo { font-size: 20px; line-height: 20px; position: relative; }
  .hero__botao { align-self: stretch; font-size: 21px; position: relative; }
  .hero__botao .icone { width: 21px; height: 21px; }

  .linhas { padding: 0 20px; }
  .linhas .container { padding: 10px 0 50px; }
  .linhas__conteudo { padding: 0; }
  .linhas__barra { left: 76.912%; top: -39px; z-index: 0; }
  .linhas__barra img { width: 59%; }
  .linhas__titulo { font-size: 30px; line-height: 36px; text-align: left; width: 100%; }
  .linhas__subtitulo { font-size: 20px; line-height: 20px; text-align: left; width: 100%; }
  .linhas__grade { grid-template-columns: 1fr; gap: 22px 0; margin-top: 12px; }
  .matheus-item { padding: 30px 10px; gap: 15px; border-width: 2px; border-radius: 10px; }
  .matheus-item__logo { margin: 0; }
  .linhas__acao { padding: 30px 0 0; }
  .linhas__acao .botao { width: 100%; font-size: 21px; }

  .porque { padding: 0 20px; }
  .porque .container { padding: 40px 0 50px; }
  .porque__conteudo { padding: 0; }
  .titulo-secao { font-size: 32px; line-height: 38.4px; }
  .subtitulo-secao { font-size: 20px; line-height: 20px; }
  .item2sessao::before { filter: blur(130px); top: 0; left: 0; opacity: .7; }

  .confianca { padding: 0 20px; }
  .confianca .container { padding: 40px 0 50px; }
  .confianca__conteudo { padding: 0; }

  .processo { padding: 0 20px; }
  .processo .container { padding: 40px 0 50px; }
  .processo__grade { padding: 10px 0 0; gap: 20px; }
  .processo__texto { padding: 0; }
  .processo__titulo { font-size: 32px; line-height: 38.4px; text-align: left; }
  .processo__subtitulo { font-size: 20px; line-height: 20px; }
  .processo__passos { padding: 0; }
  .box-shadow-interno-azul-claro { gap: 10px; padding: 10px 10px 10px 20px; border-radius: 20px; }
  .passo__icone .icone { width: 40px; height: 40px; }
  .passo__titulo { font-size: 22px; line-height: 33px; margin-bottom: -10px; }
  .passo__desc { font-size: 14px; line-height: 1.4; }
  .processo__acao { padding: 20px 0; }
  .processo__acao .botao { width: 100%; font-size: 21px; }

  .sobre, .cta-final { background-size: 83px auto; }
  .sobre .container { padding: 20px 0 70px; }
  .sobre { padding: 0 20px; }
  .sobre__texto { padding: 10px; }
  .sobre__titulo { font-size: 32px; line-height: 38.4px; }
  .sobre__corpo { text-align: justify; font-size: 18px; line-height: 1em; }
  .cta-final { padding: 7px 20px 70px; }
  .cta-final .container { padding: 0; }
  .cta-final__caixa { padding: 0; }
  .cta-final__caixa .circulo-blur { filter: blur(100px); top: 0; left: 0; opacity: .7; }
  .cta-final__conteudo { padding: 40px 15px; }
  .cta-final__titulo { font-size: 32px; line-height: 38.4px; }
  .cta-final__subtitulo { font-size: 20px; line-height: 20px; }
  .cta-final .botao { width: 100%; font-size: 21px; }

  .rodape { padding: 0 20px; }
  .rodape .container { gap: 0; padding: 40px 0; }
  .rodape__conteudo { width: 100%; padding: 0; gap: 20px; }
  .rodape__copy, .rodape__aviso { font-size: 15px; margin-bottom: calc(.9rem - 10px); }
  .rodape__menu a { font-size: 13px; padding: 2px 12px; }

  .flutuante { width: 120px; padding: 0; right: 20px; bottom: 40px; }
  .flutuante a { width: 50px; height: 50px; }

  .popup__caixa { width: 90vw; }
  .popup__logo { width: 217px; padding: 10px; border-radius: 10px; }
  .popup__logo img { width: 87%; }

  .cabecalho-pagina { padding: 0 20px; }
  .cabecalho-pagina .container { padding: 150px 0 15px; }
  .cabecalho-pagina__titulo { font-size: 32px; line-height: 38.4px; text-align: center; }
  .cabecalho-pagina__subtitulo { font-size: 20px; line-height: 20px; }

  .pagina-texto__titulo { font-size: 32px; line-height: 38px; }

  /* catalogo */
  .catalogo-abas { position: sticky; margin: 20px 0; min-height: 74px; }
  .catalogo-abas .container { display: flex; gap: 0; overflow-x: scroll; overflow-y: hidden; padding: 10px 0; justify-content: flex-start; }
  .catalogo-abas .container::-webkit-scrollbar { width: 5px; height: 5px; }
  .catalogo-abas .container::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 8px; }
  .catalogo-abas .container::-webkit-scrollbar-thumb { background: var(--primaria); border-radius: 8px; }
  .catalogo-aba { padding: 10px; flex: 0 0 auto; min-width: 137px; }
  .catalogo-aba h2 { font-size: 22px; line-height: 22px; }
  .catalogo-instrucao .container { padding: 30px 0 0; margin-bottom: -11px; }
  .catalogo-instrucao__texto { font-size: 30px; line-height: 33px; max-width: 260px; margin: 0 auto; }
  .catalogo .container { grid-template-columns: 1fr; }
  .catalogo__lista { padding: 10px; padding-bottom: 150px; }
  .lista-itens__grade { grid-template-columns: repeat(2, 1fr); gap: 15px; }
  .produto-card { padding: 20px 10px; gap: 0; }
  .produto-card__nome { font-size: 17px; line-height: 16px; }
  .catalogo__lateral { display: none; }
  .catalogo__barra-mobile {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 100;
    display: grid; padding: 0 5px;
    background-color: rgba(36, 15, 0, .76);
    backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
  }
  .catalogo__barra-mobile > div { display: flex; flex-direction: column; justify-content: center; padding: 10px; }
  .catalogo__barra-mobile > div > div { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 10px; }
  .catalogo__barra-mobile .contador-selecionar-produtos { font-size: 15px; line-height: 1.5; }
  .catalogo__barra-mobile .botao { padding: 15px 30px; font-size: 19px; }
}

@media (max-width: 676px) {
  .hero__conteudo .circulo-blur { filter: blur(130px); top: 0; left: 0; opacity: .7; }
}

/* ==========================================================================
   BLOG (pagina Posts, arquivos, busca e post individual) - so no tema WP
   ========================================================================== */
.secao-blog { padding: 0 20px; }
.secao-blog .container { padding: 50px 0 80px; }
.secao-blog__cabecalho { text-align: center; margin-bottom: 40px; }
.secao-blog__titulo { font-size: 40px; line-height: 48px; color: #fff; }
.secao-blog__subtitulo { font-size: 20px; font-weight: 400; color: var(--cinza-texto); }
.secao-blog__grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.post-card {
  display: flex; flex-direction: column; overflow: hidden; border-radius: 20px;
  background-image: linear-gradient(180deg, rgba(248, 129, 31, .18), rgba(36, 15, 0, .6));
  border: 1px solid rgba(248, 129, 31, .35);
  transition: transform .4s, border-color .4s;
}
.post-card:hover { transform: translateY(-6px); border-color: rgba(248, 129, 31, .8); }
.post-card__imagem { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #111; }
.post-card__imagem img { width: 100%; height: 100%; object-fit: cover; display: block; }
.post-card__corpo { display: flex; flex-direction: column; gap: 10px; padding: 20px; }
.post-card__data { font-family: "Roboto", sans-serif; font-size: 13px; font-weight: 400; color: var(--primaria); text-transform: uppercase; letter-spacing: .04em; }
.post-card__titulo { font-size: 22px; line-height: 1.2; color: #fff; }
.post-card__titulo a:hover { color: var(--primaria); }
.post-card__resumo { font-family: "Roboto", sans-serif; font-size: 15px; font-weight: 400; line-height: 1.5; color: var(--cinza-texto); }
.post-card__resumo p { margin: 0; }
.post-card__link { font-family: "Roboto", sans-serif; font-weight: 500; color: var(--secundaria); text-decoration: underline; }
.secao-blog__paginacao { margin-top: 40px; text-align: center; }
.secao-blog__paginacao .nav-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; }
.secao-blog__paginacao .page-numbers { display: inline-block; padding: 10px 16px; border-radius: 12px; background: rgba(248, 129, 31, .15); color: #fff; font-family: "Roboto", sans-serif; font-weight: 500; }
.secao-blog__paginacao .page-numbers.current, .secao-blog__paginacao .page-numbers:hover { background-image: var(--grad-botao); }
.secao-blog__vazio { text-align: center; font-weight: 400; color: var(--cinza-texto); }

.post-single { padding: 0 20px; }
.post-single .container { max-width: 860px; padding: 50px 0 80px; }
.post-single__cabecalho { text-align: center; margin-bottom: 30px; }
.post-single__data { font-family: "Roboto", sans-serif; font-size: 14px; font-weight: 400; color: var(--primaria); text-transform: uppercase; letter-spacing: .04em; }
.post-single__titulo { font-size: 40px; line-height: 48px; color: #fff; margin: 10px 0; }
.post-single__categorias { font-family: "Roboto", sans-serif; font-weight: 400; color: var(--cinza-texto); }
.post-single__categorias a { color: var(--secundaria); }
.post-single__imagem { margin-bottom: 30px; }
.post-single__imagem img { width: 100%; border-radius: 20px; }
.post-single__conteudo { font-size: 17px; line-height: 1.65; }
.post-single__conteudo h2, .post-single__conteudo h3, .post-single__conteudo h4 { font-family: "Gotham", sans-serif; font-weight: 700; color: #fff; margin: 1.4em 0 .5em; line-height: 1.2; }
.post-single__conteudo h2 { font-size: 30px; }
.post-single__conteudo h3 { font-size: 24px; }
.post-single__conteudo h4 { font-size: 20px; }
.post-single__conteudo a { color: var(--secundaria); text-decoration: underline; }
.post-single__conteudo img { border-radius: 15px; height: auto; }
.post-single__conteudo blockquote { margin: 1.5em 0; padding: 10px 20px; border-left: 4px solid var(--primaria); background: rgba(248, 129, 31, .1); border-radius: 0 12px 12px 0; }
.post-single__conteudo ul, .post-single__conteudo ol { margin: 0 0 1em; padding-left: 28px; }
.post-single__conteudo figure { margin: 1.5em 0; }
.post-single__conteudo figcaption { font-size: 14px; color: var(--cinza-texto); text-align: center; }
.post-single__nav { display: flex; justify-content: space-between; gap: 20px; margin-top: 50px; padding-top: 20px; border-top: 1px solid rgba(248, 129, 31, .35); font-family: "Roboto", sans-serif; font-weight: 500; }
.post-single__nav a { color: var(--secundaria); }
.post-single__nav div:last-child { text-align: right; }
.post-single__voltar { text-align: center; margin-top: 40px; }
.pagina-404 .botao { margin-top: 10px; }

@media (max-width: 1024px) { .secao-blog__grade { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) {
  .secao-blog__grade { grid-template-columns: 1fr; }
  .secao-blog__titulo, .post-single__titulo { font-size: 32px; line-height: 38.4px; }
  .post-single__nav { flex-direction: column; }
  .post-single__nav div:last-child { text-align: left; }
}
