/* ===============================
   Base & Paleta
   =============================== */
:root{
  --c-primary: #029aa6;
  --c-primary-10: rgba(2,154,166,.10);
  --c-primary-15: rgba(2,154,166,.15);
  --c-dark: #242a5b;
  --c-text: #0f172a;     /* slate-900 */
  --c-text-2: #334155;   /* slate-700 */
  --c-text-3: #475569;   /* slate-600 */
  --c-border: #e2e8f0;   /* slate-200 */
  --c-bg: #ffffff;
}

*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--c-bg);
  color:var(--c-text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica Neue, Arial, "Apple Color Emoji","Segoe UI Emoji";
  line-height:1.6;
}

/* Links */
a{color:inherit;text-decoration:none}
a:hover{opacity:.9}

/* Utils mínimos */
.container-padrao{max-width:1152px;margin:0 auto}
.flex{display:flex}
.items-center{align-items:center}
.justify-between{justify-content:space-between}
.gap-3{gap:.75rem}
.px-4{padding-left:1rem;padding-right:1rem}

/* -------------------------------
   Header / Navegação
   ------------------------------- */
header{
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.85);
  backdrop-filter: saturate(120%) blur(8px);
  border-bottom: 1px solid var(--c-border);
}
header nav{padding:.75rem 0}

/* -------------------------------
   Tipografia
   ------------------------------- */
.titulo-principal{
  font-weight:800; letter-spacing:-.02em; line-height:1.15;
  font-size: clamp(28px, 4vw, 44px); color: var(--c-dark);
}
.titulo-secundario{
  font-weight:800; letter-spacing:-.01em;
  font-size: clamp(22px, 3vw, 36px); color: var(--c-dark);
}
.texto-base{color:var(--c-text-2); font-size:1.05rem}
.text-secundaria{color:var(--c-primary)}

/* -------------------------------
   Seções
   ------------------------------- */
section{padding: 3rem 0}
#hero{padding-top: 1.25rem; padding-bottom: 1.6rem}
.bloco-claro{
  background: var(--c-primary-10);
  border-top:1px solid var(--c-border);
  border-bottom:1px solid var(--c-border)
}

/* -------------------------------
   Grid utilitário
   ------------------------------- */
.grid{display:grid; gap: 2rem}
@media (min-width: 768px){
  .md\:grid-cols-2{grid-template-columns: 1fr 1fr}
  .md\:grid-cols-3{grid-template-columns: repeat(3, 1fr)}
}

/* -------------------------------
   Cards de Preço
   ------------------------------- */
.card-preco{
  background:#fff; border:1px solid var(--c-border);
  border-radius:16px; padding:1.25rem;
  display:flex; flex-direction:column; gap:.5rem;
  text-align:center; box-shadow: 0 6px 20px rgba(0,0,0,.04);
}
.card-preco img{width:100%; display:block; border:1px solid var(--c-border); border-radius:16px}
.card-preco h4{margin:.85rem 0 .35rem; font-size:1.05rem; color: var(--c-dark)}
.card-preco .faixa-precos{display:flex; flex-direction:column; align-items:center; gap:.2rem; margin:.35rem 0 .25rem}
.card-preco .preco-ancora{font-size:.95rem; color:#64748b; text-decoration: line-through}
.card-preco .preco-parcelado{font-size: clamp(22px, 2.2vw, 28px); font-weight: 900; color: var(--c-dark); letter-spacing: -.01em; line-height:1.1}
.card-preco .preco-avista{font-size:1.05rem; font-weight:700; color: var(--c-primary)}
.card-preco .btn-primaria{margin-top:.9rem; width:100%}

/* Destaque Combo */
.destaque-combo{
  border:2px solid var(--c-primary); background: var(--c-primary-10);
  border-radius: 20px; padding: 1.75rem;
  display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
}
.preco-combo{font-size: clamp(24px, 4vw, 34px); font-weight: 900; color: var(--c-primary)}

/* -------------------------------
   Botões (globais)
   ------------------------------- */
.btn-primaria,.btn-secundaria{
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:14px; padding:.9rem 1.2rem; font-weight:700;
  transition: filter .15s ease, transform .15s ease, box-shadow .15s ease;
  cursor:pointer; border: 1px solid transparent;
}
.btn-primaria{background: var(--c-primary); color: #fff; box-shadow: 0 6px 18px rgba(2,154,166,.18)}
.btn-primaria:hover{filter:brightness(.95)}
.btn-primaria:active{transform:translateY(1px)}
.btn-secundaria{background:#fff; color: var(--c-text-2); border-color: var(--c-border)}
.btn-secundaria:hover{background:#f8fafc}

/* -------------------------------
   Barra de aprovados
   ------------------------------- */
#barra-aprovados{
  background: var(--c-primary); height: 12px; border-radius: 999px;
  width:0%; transition: width .3s ease;
}
#contador-aprovados{color:var(--c-text-2)}

/* -------------------------------
   Rodapé
   ------------------------------- */
.rodape{border-top:1px solid var(--c-border); color:var(--c-text-3); font-size:.95rem; padding: 2.25rem 0}

/* -------------------------------
   Helpers
   ------------------------------- */
.rounded-2xl{border-radius:16px}
.border{border:1px solid var(--c-border)}
.text-center{text-align:center}
.mt-3{margin-top:.75rem}
.mt-4{margin-top:1rem}
.mt-6{margin-top:1.5rem}
.mt-8{margin-top:2rem}
.mt-10{margin-top:2.5rem}
.pt-14{padding-top:3.5rem}
img{max-width:100%; height:auto; display:block}

/* Botões no bloco de preços ocupam largura do card em telas pequenas */
@media (max-width: 480px){
  .card-preco .btn-primaria{width:100%}
}

/* Acessibilidade */
a:focus, button:focus{
  outline:2px solid color-mix(in oklab, var(--c-primary) 40%, #fff);
  outline-offset:2px; border-radius:12px;
}

/* ===============================
   HERO (layout + ajustes finos)
   =============================== */

/* Grid base (mobile): title -> media -> bar -> ctas */
.hero-grid{
  display:grid;
  column-gap: 2rem;
  row-gap: .6rem;                     /* controla as distâncias 1 e 2 */
  grid-template-areas:
    "title"
    "media"
    "bar"
    "ctas";
}

/* Desktop: 2 colunas e linhas esticadas */
@media (min-width: 768px){
  .hero-grid{
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "title media"
      "bar   media"
      "ctas  media";
    align-items: stretch;              /* imagem ocupa a coluna inteira */
  }
}

/* Áreas do grid */
.hero-title{ grid-area: title; }
.hero-bar  { grid-area: bar; }
.hero-ctas { grid-area: ctas; }

/* Texto acima da barra – reduz a distância (1) */
#hero .subtitle{
  margin: .25rem 0 .35rem;            /* menos bottom que o padrão do <p> */
}

/* Barra: reduz a distância para baixo (2) */
.hero-bar{ margin-top: 0; }
.hero-bar > .flex{ margin-bottom: .25rem; }

/* Coluna da imagem */
.hero-media{
  grid-area: media;
  position: relative;
  min-height: 520px;
}
@media (max-width: 767px){
  .hero-media{ display:none !important; }
 
}
.hero-media .hero-img{
  position:absolute; right:0; bottom:0;
  height:100%; width:auto; max-height:640px;
  object-fit:contain; display:block; pointer-events:none;
}

/* BOTÕES do HERO – altura confortável e sem “stretch” */
section#hero .hero-ctas{
  display:flex;
  align-items:center;                 /* evita esticar na vertical */
  gap:.75rem;
  margin-top: 0;                      /* usa só o row-gap do grid */
}
section#hero .hero-ctas .btn-primaria,
section#hero .hero-ctas .btn-secundaria{
  padding: 1rem 1.1rem !important;  /* ↑ altura um pouco maior */
  line-height: 1.1 !important;
  font-size: .97rem;
  height:auto !important;
  min-height:0 !important;
}


/* ====== HERO: remover “folga” embaixo do médico ====== */
#hero{ padding-bottom: 0 !important; }

/* (opcional) se quiser que a próxima seção encoste bem, diminua o padding-top dela */
#comunidade{ padding-top: 2rem; }  /* antes era 3rem (section padrão) */

/* ====== HERO: reduzir pela metade as distâncias 1 e 2 ====== */
/* Metade do espaçamento vertical entre linhas do grid */
.hero-grid{ row-gap: .3rem !important; } /* era .6rem */

/* 1) Texto -> barra: reduz o espaço do parágrafo acima da barra */
#hero .subtitle{ margin: .12rem 0 .18rem !important; } /* antes .25 / .35 */

/* 2) Cabeçalho da barra -> barra: reduzir o “mb-2” e o espaço do wrapper */
#hero .hero-bar > .flex{ margin-bottom: .125rem !important; } /* antes .25 */
#hero .hero-bar .mb-2{ margin-bottom: .125rem !important; } /* neutraliza classes utilitárias */

/* Se ainda quiser colar um pouco mais os botões da barra (metade do que estava): */
#hero .hero-ctas{ margin-top: 0 !important; } /* usa só o row-gap do grid */

/* ====== HERO: altura confortável dos botões (sem esticar) ====== */
#hero .hero-ctas .btn-primaria,
#hero .hero-ctas .btn-secundaria{
  padding: .78rem 1.1rem !important;   /* altura equilibrada (nem fino, nem “almofada”) */
  line-height: 1.1 !important;
  height: auto !important;
  min-height: 0 !important;
}


@media (max-width: 767px){
  #hero .hero-ctas{
    margin-top: .8rem !important;   /* aumenta espaço entre barra e botões */
  }
}

@media (max-width: 767px){
  #hero{
    padding-bottom: 1.2rem !important; /* respiro extra abaixo dos botões */
  }
}

@media (max-width: 767px){
  .hero-grid{
    row-gap: .75rem !important; /* dá mais respiro entre os blocos */
  }
}

/* Vídeo responsivo 16:9 */
.video-wrapper{ position:relative; padding-bottom:56.25%; height:0; border-radius: 16px;     /* borda arredondada */
  overflow: hidden;        /* corta o excesso do iframe */
  box-shadow: 0 6px 18px rgba(0,0,0,.08); /* opcional: sombra */}
.video-wrapper iframe{ position:absolute; inset:0; width:100%; height:100%;  border: 0;              /* remove borda padrão */}

/* Coluna de texto: força empilhamento e alinha botão embaixo */
#plataforma .plataforma-texto{
  display:flex;
  flex-direction:column;
  align-items:flex-start; /* botão fica alinhado à esquerda da coluna */
  gap:.75rem;            /* espaço entre parágrafos e botão */
}

/* Pequeno respiro entre título e grid */
#plataforma .titulo-secundario{ margin-bottom:.5rem; }

/* Mobile: um pouco mais de espaço entre vídeo e texto */
@media (max-width: 767px){
  #plataforma .grid{ row-gap: 1rem; }
}


/* ===============================
   2.11 · Dúvidas (contato + FAQ)
   =============================== */
.duvidas-sec{
  background: linear-gradient(
    180deg,
    color-mix(in oklab, var(--c-primary) 12%, #fff) 0%,
    #fff 100%
  );
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
  padding: 3rem 0;
}

/* Card do WhatsApp */
.wa-card{
  display:flex; align-items:center; gap:.8rem;
  background:#fff; border:1px solid var(--c-border);
  border-radius:14px; padding:.9rem 1rem;
  box-shadow: 0 8px 24px rgba(0,0,0,.04);
}
.wa-icon{
  width:42px; height:42px; min-width:42px;
  display:grid; place-items:center;
  border-radius:10px;
  background: var(--c-primary-10);
  color: var(--c-primary);
}
.wa-icon i{ font-size: 22px; line-height: 1; }

.wa-title{ font-weight:800; color: var(--c-dark) }
.wa-sub{ color: var(--c-text-3); font-size:.98rem }

/* Redes sociais minimalistas */
.sociais{ display:flex; gap:.9rem }
.sociais a{
  width:34px; height:34px; display:grid; place-items:center;
  border:1px solid var(--c-border); border-radius:10px; background:#fff;
  color: var(--c-text-2);
  transition: transform .15s ease, box-shadow .15s ease, color .15s ease, border-color .15s ease;
}
.sociais a:hover{
  transform: translateY(-1px);
  box-shadow:0 6px 18px rgba(0,0,0,.06);
  color: var(--c-primary);
  border-color: color-mix(in oklab, var(--c-primary) 25%, var(--c-border));
}
.sociais i{ font-size: 18px; line-height: 1; }

/* ===== FAQ minimalista ===== */
.faq-q{
  width: 100%;
  /* reset nativo */
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  outline: 0;

  /* layout */
  padding: .9rem 0;
  color: var(--c-dark);
  font-weight: 800;
  text-align: left;
  display: flex; align-items: center; justify-content: space-between;

  /* só a linha inferior */
  border-bottom: 1px solid var(--c-border);
  transition: color .15s ease;
}

/* primeira linha com borda superior para fechar o bloco */
.faq-item:first-child .faq-q{
  border-top: 1px solid var(--c-border);
}

/* foco acessível */
.faq-q:focus-visible{
  outline: 2px solid color-mix(in oklab, var(--c-primary) 40%, #fff);
  outline-offset: 2px;
  border-radius: 8px;
}

/* resposta fechada por padrão */
.faq-a{
  max-height: 0;
  overflow: hidden;
  padding: 0;
  transition: max-height .25s ease, padding .25s ease;
}

/* ===== Ícone “+ → –” (linhas) ===== */
.faq-ico{
  width: 18px; height: 18px;
  position: relative;
  display: inline-block;
  margin-left: .75rem;
}

/* traço horizontal */
.faq-ico::before,
.faq-ico::after{
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 14px; height: 2px;
  background: var(--c-text-2);
  transform: translate(-50%, -50%);
  transition: transform .25s ease, background .25s ease;
}
/* traço vertical (forma o +) */
.faq-ico::after{
  transform: translate(-50%, -50%) rotate(90deg);
}

/* ===== Estado aberto ===== */
.faq-item.is-open .faq-a{
  max-height: 320px;            /* suficiente para respostas comuns */
  padding: .5rem 0 1rem;
}
/* quando aberto: virar “–” mudando o traço vertical para 0deg (sobrepõe) */
.faq-item.is-open .faq-ico::after{
  transform: translate(-50%, -50%) rotate(0deg);
}
/* cor do ícone quando aberto */
.faq-item.is-open .faq-ico::before,
.faq-item.is-open .faq-ico::after{
  background: var(--c-primary);
}



/* ===== Alinhamento perfeito do topo no bloco de Dúvidas ===== */

/* Garante grid e alinhamento pelo topo (independente das classes utilitárias) */
#duvidas .container-padrao{
  display: grid;
  grid-template-columns: 1fr;      /* mobile */
  row-gap: 2rem;
  align-items: start;              /* cola pelo topo */
}
@media (min-width: 768px){
  #duvidas .container-padrao{ grid-template-columns: 1fr 1fr; }
}

/* Remove a margem superior do primeiro elemento de cada coluna
   (ex.: <h2> à esquerda), eliminando o desnível visual */
#duvidas .container-padrao > div > :first-child{
  margin-top: 0 !important;
}

/* Zera qualquer “empurrão” no topo do FAQ */
#duvidas .faq{ margin-top:0; padding-top:0; }

/* O primeiro item do FAQ não deve adicionar linha/margem no topo */
#duvidas .faq .faq-item:first-child .faq-q{
  border-top: 0 !important;
  padding-top: 0 !important;
}
/* ===============================
   2.9 · Garantia
   =============================== */

/* Fundo suave e “cartão” branco por dentro */
.garantia-sec{
  background: linear-gradient(
    180deg,
    color-mix(in oklab, var(--c-primary) 10%, #fff) 0%,
    #fff 100%
  );
  padding: 2.5rem 0;
  border-top: 1px solid var(--c-border);
}

/* Cartão interno (branco arredondado) */
.garantia-card{
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: 20px;
  box-shadow: 0 10px 28px rgba(0,0,0,.06);
  padding: 2rem 1.5rem;
}

/* Grid: empilhado no mobile, 2 colunas no desktop */
.garantia-grid{
  display: grid;
  gap: 1.75rem;
  align-items: center;
}
@media (min-width: 900px){
  .garantia-grid{
    grid-template-columns: 420px 1fr; /* selo à esquerda, texto à direita */
    gap: 2.25rem;
  }
}

/* Coluna do selo */
.garantia-media{
  display: grid;
  place-items: center;
}
.garantia-selo{
  width: 60%;
  max-width: 360px;     /* ajuste fino do tamanho do selo */
  height: auto;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,.08));
}

/* Coluna da copy */
.garantia-copy{
  text-align: left;
}
.garantia-title{
  font-weight: 800;
  line-height: 1.15;
  font-size: clamp(26px, 3.2vw, 42px);
  color: var(--c-dark);
}
.garantia-lead{
  margin-top: .9rem;
  font-size: clamp(16px, 1.3vw, 18px);
  color: var(--c-text-2);
}
.garantia-text{
  margin-top: .75rem;
  color: var(--c-text-2);
}

/* Botão alinhado à esquerda e com respiro */
.garantia-btn{
  margin-top: 1.25rem;
  display: inline-flex;
}

/* Ajustes em telas muito pequenas */
@media (max-width: 480px){
  .garantia-card{ padding: 1.5rem 1rem; }
  .garantia-btn{ width: 100%; justify-content: center; }
}


/* ===============================
   2.10 · Quem sou eu
   =============================== */
.quem-sec{
  background: #fff;                 /* foto “encosta” no bloco abaixo */
  padding-top: 3.25rem;
  padding-bottom: 0;                /* sem padding embaixo pra encostar */
  position: relative;
  overflow: hidden;                 /* resp. ao recorte da imagem */
}

/* grid */
.quem-grid{
  display: grid;
  gap: 2rem;
  align-items: center;              /* <<< centraliza verticalmente no desktop */
}

/* desktop: 2 colunas, texto um pouco maior */
@media (min-width: 992px){
  .quem-grid{
    grid-template-columns: 1.05fr 0.95fr;
    gap: 2.25rem;
  }
}

/* título e textos */
.quem-title{
  font-weight: 800;
  line-height: 1.1;
  font-size: clamp(28px, 4vw, 46px);
  color: var(--c-dark);
  margin: 0 0 1rem 0;
}
.quem-lead{
  color: var(--c-text-2);
  font-size: clamp(16px, 1.25vw, 18px);
  margin-bottom: .9rem;
}
.quem-text{
  color: var(--c-text-2);
  margin-top: .35rem;
}

/* coluna da imagem */
.quem-media{
  position: relative;
  min-height: clamp(380px, 48vw, 680px); /* “palco” da foto */
  order: 2;                               /* <<< no mobile fica por último */
}

/* foto encostada na base e à direita */
.quem-img{
  position: absolute;
  right: -20px;         /* leve avanço */
  bottom: -1px;         /* encosta embaixo */
  height: 100%;         /* impacto visual */
  max-width: none;
  object-fit: contain;
  pointer-events: none;
}

/* mobile: empilha, imagem por último */
@media (max-width: 991px){
  .quem-grid{
    grid-template-columns: 1fr;
  }
  .quem-media{
    order: 2;                  /* <<< garante foto por último */
    min-height: 360px;
    margin-top: .75rem;
  }
  .quem-img{
    right: 0;
    left: 50%;
    transform: translateX(-50%);
    height: 100%;
  }
}



/* ===============================
   2.5 · O que vou receber
   =============================== */
.receber-sec{
  /* fundo escuro usando a sua paleta */
  background: linear-gradient(
    180deg,
    color-mix(in oklab, var(--c-dark) 88%, #0e1b2a) 0%,
    color-mix(in oklab, var(--c-dark) 78%, #0e1b2a) 100%
  );
  padding: 3.5rem 0;
  color: #eaf3f6; /* texto claro no fundo escuro */
}

.receber-grid{
  display: grid; gap: 2rem;
}
@media (min-width: 992px){
  .receber-grid{
    grid-template-columns: 0.9fr 1.1fr;
    gap: 2.25rem;
  }
}

.receber-left .titulo-secundario{ color:#fff }
.receber-left .texto-base{
  color: color-mix(in oklab, #ffffff 82%, var(--c-text-2));
  max-width: 56ch;
}

/* Cartão do acordeão (direita) */
.receber-right{ display:flex }
.receber-card{
  width:100%;
  background: color-mix(in oklab, var(--c-dark) 72%, #0e1b2a);
  border: 1px solid color-mix(in oklab, var(--c-primary) 14%, var(--c-dark));
  border-radius: 18px;
  overflow:hidden;
  box-shadow: 0 20px 40px rgba(0,0,0,.22);
}

/* ===== Acordeão (reaproveita estrutura do FAQ) ===== */
#receber .faq{ margin:0 }

/* Botão da pergunta */
#receber .faq-q{
  width: 100%;
  padding: 1rem 1.15rem;
  background: transparent;
  border: 0;
  border-radius: 0;
  display: flex; align-items: center; justify-content: space-between;
  color:#e8f4f8;
  cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,.08);
  transition: color .15s ease;
}
#receber .faq-q:hover{ color: #fff; }

/* resposta fechada por padrão */
#receber .faq-a{
  max-height: 0;
  overflow: hidden;
  padding: 0 1rem;
  color: color-mix(in oklab, #ffffff 86%, var(--c-text-2));
  transition: max-height .25s ease, padding .25s ease;
}

/* aberto */
#receber .faq-item.is-open .faq-a{
  /* o JS também seta max-height preciso; isso garante fallback */
  max-height: 320px;
  padding: .5rem 1rem 1rem;
}

/* numeração e título à esquerda */
.acc-num{
  font-weight: 800;
  font-size:.95rem;
  color: color-mix(in oklab, var(--c-primary) 92%, #fff);
  margin-right:.8rem;
  letter-spacing:.5px;
  min-width: 2.1ch;
}
.acc-title{ flex:1; display:inline-block }

/* ícone + / – com a sua cor primária */
#receber .faq-ico{
  width: 18px; height: 18px; position: relative; display:inline-block; margin-left:.75rem;
}
#receber .faq-ico::before,
#receber .faq-ico::after{
  content:""; position:absolute; top:50%; left:50%;
  width:14px; height:2px;
  background: color-mix(in oklab, #ffffff 85%, var(--c-primary));
  transform: translate(-50%, -50%);
  transition: transform .25s ease, background .25s ease;
}
#receber .faq-ico::after{ transform: translate(-50%, -50%) rotate(90deg) }
#receber .faq-item.is-open .faq-ico::after{ transform: translate(-50%, -50%) rotate(0deg) }
#receber .faq-item.is-open .faq-ico::before,
#receber .faq-item.is-open .faq-ico::after{ background: var(--c-primary); }

/* acabamento dos cantos */
#receber .faq > .faq-item:first-child .faq-q{ border-top: 0 }
#receber .faq > .faq-item:last-child  .faq-q{ border-bottom: 0 }

/* lista interna */
.acc-list{
  margin: .25rem 0 1rem 0;
  padding-left: 1.1rem;
  line-height: 1.5;
}
.acc-list li{ margin:.25rem 0 }

@media (max-width: 991px){
  .receber-sec{ padding: 2.75rem 0 }
  .receber-card{ border-radius: 16px }
  #receber .faq-q{ padding: .9rem .95rem }
}


#receber .faq-a { display: block; }


/* ===============================
   2.4 · Primeiros depoimentos
   =============================== */
.depos-sec{
  background:#fff;                 /* fundo claro para destacar imagens */
  padding: 3rem 0;
  border-top:1px solid var(--c-border);
  border-bottom:1px solid var(--c-border);
}

.depos-grid{
  display:grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}

@media (min-width: 640px){
  .depos-grid{ grid-template-columns: 1fr 1fr; }
}
@media (min-width: 992px){
  .depos-grid{ grid-template-columns: repeat(3, 1fr); }
}

/* Cartão da imagem do depoimento */
.depo-card{
  margin:0; padding:0;
  background:#fff;
  border:1px solid var(--c-border);
  border-radius:16px;
  overflow:hidden;
  /* sombra mais forte */
  box-shadow: 0 8px 24px rgba(0,0,0,.2), 
              0 12px 32px rgba(0,0,0, .2);
  transition: transform .2s ease, box-shadow .2s ease;
}

/* Mantém proporção vertical 680x800 e cobre o cartão */
.depo-card img{
  display:block;
  width:100%;
  height:100%;
  aspect-ratio: 17 / 20;     /* 680x800 → 0.85 (17:20) */
  object-fit: cover;         /* preenche sem distorcer */
}

/* ===============================
   2.7 · Depoimentos (Carrossel) – versão scrollLeft nativo
   =============================== */
.carrossel-sec{
  background: #fff;
  padding: 3rem 0;
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
}

/* viewport AGORA rola horizontalmente (para arrasto nativo) */
.carrossel-viewport{
  position: relative;
  margin-top: 1rem;
  overflow-x: auto;       /* <<< antes era hidden */
  overflow-y: hidden;
  border-radius: 16px;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;    /* gestos de arrasto no mobile */
  scrollbar-width: none;  /* Firefox: esconde a barra */
}
.carrossel-viewport::-webkit-scrollbar{ display:none; } /* Chrome/Safari */

.carrossel-track{
  display: inline-flex;   /* largura = soma dos filhos */
  gap: 1rem;
  padding: .25rem;
}

/* Cada imagem ocupa largura fixa responsiva */
.depo-img{
  flex: 0 0 auto;
  width: clamp(240px, 28vw, 360px);
  height: auto;
  aspect-ratio: 17 / 20;
  object-fit: cover;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--c-border);
  user-select: none;
  /* NÃO bloqueie eventos: permite toques/clicks se precisar
     (se quiser manter bloqueado, pode remover a linha abaixo) */
  /* pointer-events: none; */
}

/* Acessibilidade: não remova transform (não usamos mais mesmo) */
@media (prefers-reduced-motion: reduce){
  #depoimentos-carrossel .carrossel-viewport{ scroll-behavior: auto; }
  #depoimentos-carrossel .carrossel-track{ transition: none; }
}
/* Forçar botão em 1 linha no mobile */
@media (max-width: 480px){
  header .btn-primaria,
  header a.btn-primaria {
    white-space: nowrap;   /* não deixa quebrar linha */
    font-size: 0.85rem;    /* reduz um pouco a fonte */
    padding-left: 0.9rem;  /* ajustes finos para caber */
    padding-right: 0.9rem;
  }
}
/* Centralizar botões no mobile (exceto o do header) */
@media (max-width: 767px){
  /* regra geral: centraliza */
  .btn-primaria,
  .btn-secundaria{
    display: inline-flex;      /* mantém o mesmo layout do botão */
    margin-left: auto;         /* centraliza horizontalmente */
    margin-right: auto;
  }

  /* exceção: o botão do header mantém o alinhamento original */
  header .btn-primaria,
  header .btn-secundaria{
    margin-left: 0;
    margin-right: 0;
  }

  /* no HERO, garante centralização do grupo de CTAs */
  #hero .hero-ctas{
    justify-content: center;
  }
}
/* ===== CENTRALIZAÇÃO DE BOTÕES NO MOBILE (exceto header) ===== */
@media (max-width: 767px){
  /* centraliza TODOS os botões que estão dentro de seções */
  section a.btn-primaria,
  section a.btn-secundaria,
  section button.btn-primaria,
  section button.btn-secundaria{
    display: flex;                 /* vira block-level */
    width: -moz-fit-content;
    width: fit-content;            /* encolhe ao conteúdo */
    max-width: 100%;
    margin-left: auto;             /* centraliza */
    margin-right: auto;
  }

  /* exceção: botão do header NÃO muda */
  header .btn-primaria,
  header .btn-secundaria{
    display: inline-flex;
    width: auto;
    margin-left: 0;
    margin-right: 0;
  }

  /* preserva os botões dos cards de preço em largura total no mobile */
  .card-preco .btn-primaria,
  .card-preco .btn-secundaria{
    display: flex;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}

/* ===== Comunidade (desktop): título no topo, texto centralizado, botão na base ===== */
@media (min-width: 992px){
  /* duas colunas com mesma altura (altura da imagem) */
  #comunidade .container-padrao{
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
  }

  /* coluna de texto vira um flex-col */
  #comunidade .container-padrao > div:nth-child(2){
    display: flex;
    flex-direction: column;
    min-height: 100%;
  }

  /* título colado no topo */
  #comunidade .container-padrao > div:nth-child(2) h2{
    margin: 0 0 1rem;
  }

  /* TEXTO no centro (volta a ser bloco normal!) */
  #comunidade .container-padrao > div:nth-child(2) p{
    display: block !important;      /* cancela o display:flex anterior */
    margin-top: auto;               /* espaço igual acima… */
    margin-bottom: auto;            /* …e abaixo → centraliza entre título e botão */
  }

  /* botão ancorado na base da coluna (alinha com base da imagem) */
  #comunidade .container-padrao > div:nth-child(2) .btn-primaria{
    margin-top: auto;               /* empurra o botão para baixo */
    align-self: flex-start;         /* mantém a largura do botão */
  }
}
/* ===== Comunidade: ordem no mobile ===== */
@media (max-width: 767px){
  #comunidade .container-padrao{
    display: flex;
    flex-direction: column;
  }

  /* garante ordem: título -> texto -> imagem -> botão */
  #comunidade h2{
    order: 1;
  }
  #comunidade p{
    order: 2;
  }
  #comunidade img{
    order: 3;
    margin: 1rem 0; /* dá um respiro acima/abaixo */
  }
  #comunidade .btn-primaria{
    order: 4;
  }
}
/* ===== Comunidade: ordem no mobile ===== */
@media (max-width: 767px){
  #comunidade .container-padrao{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "text"
      "image"
      "button";
  }

  /* define cada área */
  #comunidade h2{
    grid-area: title;
  }
  #comunidade p{
    grid-area: text;
  }
  #comunidade img{
    grid-area: image;
    margin: 1rem 0;
  }
  #comunidade .btn-primaria{
    grid-area: button;
    justify-self: start; /* ou center se quiser centralizar */
  }
}
/* ===== Comunidade (mobile): Título → Texto → Imagem → Botão ===== */
@media (max-width: 767px){
  /* o container continua sendo grid, mas controlamos a ordem */
  #comunidade .container-padrao{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "text"
      "image"
      "cta";
    row-gap: .8rem;
    align-items: start;       /* não centraliza verticalmente no grid */
  }

  /* achata os dois wrappers internos para virar itens diretos do grid */
  #comunidade .container-padrao > div{
    display: contents;
  }

  /* mapeia cada peça para sua área no grid */
  #comunidade .container-padrao > div:last-child h2{ grid-area: title; margin: 0; }
  #comunidade .container-padrao > div:last-child p{ grid-area: text;  margin: .25rem 0 0; }

  #comunidade .container-padrao > div:first-child img{
    grid-area: image;
    width: 100%;
    height: auto;
    border-radius: 16px;
  }

#comunidade .container-padrao > div:last-child .btn-primaria{
    grid-area: cta;
    align-self: start;
    justify-self: center;       
    margin: .6rem auto 0 auto !important;
}

}
/* MOBILE: reduzir ~10% os "primeiros depoimentos" (grid) */
@media (max-width: 767px){
  .depos-sec .depo-card{
    width: 90%;              /* 10% menor */
    margin-left: auto;
    margin-right: auto;      /* mantém centralizado */
  }
  .depos-sec .depos-grid{
    row-gap: 1rem;           /* opcional: aproxima um pouco */
  }
}

/* RECEBER: não esticar as colunas no desktop */
@media (min-width: 992px){
  .receber-grid{
    align-items: start;         /* em vez de stretch */
  }
  .receber-right{
    align-items: flex-start;    /* evita o filho esticar pelo flex */
  }
  .receber-card{
    height: auto;               /* garante altura natural do conteúdo */
    align-self: start;          /* defesa extra contra estiramento */
  }
}
/* RECEBER: centralizar verticalmente o bloco da direita em relação ao da esquerda */
@media (min-width: 992px){
  .receber-grid{
    align-items: center;   /* centraliza verticalmente as duas colunas */
  }
}


/* RECEBER — layout do grid e ordem dos itens */
@media (min-width: 992px){
  .receber-left .titulo-secundario{ margin-top: 0; }
  .receber-right{
    align-self: start;   /* mantém ancorado no topo da área do grid */
    padding-top: .35rem; /* ajuste fino: teste .25rem ~ .6rem até “bater” no seu olho */
    /* ou use margin-top em vez de padding-top se preferir */
    /* margin-top: .35rem; */
  }
  .receber-grid{
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    grid-template-rows: auto auto;           /* 2 linhas */
    grid-template-areas:
      "left right"   /* linha 1: texto  | acordeão */
      "left cta";    /* linha 2: texto  | botão (depois do acordeão) */
    column-gap: 2.25rem;
    align-items: start;                      /* centraliza verticalmente os itens por padrão */
  }

  .receber-left   { grid-area: left;  align-self: start; }   /* texto fica no topo */
  .receber-right  { grid-area: right; align-self: start; }  /* acordeão centralizado verticalmente */
  .receber-cta    { grid-area: cta;   justify-self: start; margin-top: 0.75rem; }
}

/* Mobile: botão centralizado (mantém comportamento que você queria no mobile) */
@media (max-width: 991px){
  .receber-cta{
    display: flex;
    justify-content: center;
    margin-top: 1rem;
  }
}
/* ====== Plataforma: reordenar no MOBILE (<= 767px) ====== */
@media (max-width: 767px){
  /* usa grid-areas só neste grid do bloco plataforma */
  #plataforma .grid{
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-flow: row;
    align-items: start;                    /* evita sobreposição */
    grid-template-areas:
      "title"
      "text"
      "video"
      "cta";
    row-gap: 0.75rem;
  }

  /* "explode" a coluna de texto para controlar os filhos no grid */
  #plataforma .plataforma-texto{ display: contents; }

  #plataforma .plataforma-texto .titulo-secundario{ grid-area: title; }
  #plataforma .plataforma-texto .texto-base{ grid-area: text; }

  /* vídeo fica entre o texto e o botão */
  #plataforma .video-wrapper{ grid-area: video; margin: .5rem 0; }

  /* botão por último e centralizado */
  #plataforma .plataforma-texto .btn-primaria{
    grid-area: cta;
    justify-self: center;
    margin-top: .75rem;
  }
}

/* ====== Desktop (>= 768px): volta ao normal ====== */
@media (min-width: 768px){
  /* volta o wrapper de texto ao comportamento normal */
  #plataforma .plataforma-texto{ display: block; }
}


/* Alinhar a base do botão com a base do vídeo (mantendo GRID) */
@media (min-width: 992px){
  /* mantém grid e só alinha os itens pelo fundo */
  #plataforma .grid{
    align-items: end !important;   /* bottom-align dos dois blocos */
    column-gap: 2.25rem;           /* mesmo gap que você já usa */
  }

  /* a coluna de texto vira uma coluna flex e ocupa 100% da altura da linha do grid */
  #plataforma .plataforma-texto{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: 100%;                   /* estica para acompanhar a altura do vídeo */
  }

  /* empurra o botão para a base da coluna de texto */
  #plataforma .plataforma-texto .btn-primaria{
    margin-top: auto;
  }
}



/* Rodapé no mobile: links em cima, © embaixo */
@media (max-width: 480px){
  .rodape .container-padrao{
    display: flex;
    flex-direction: column;     /* força empilhar */
    align-items: center;
    text-align: center;
    gap: 0.75rem;               /* espaço entre links e © */
  }

  /* bloco de links */
  .rodape .container-padrao > .flex{
    flex-direction: column;     /* um embaixo do outro */
    gap: 0.25rem;
    font-size: 0.82rem;
  }

  /* texto © */
  .rodape .container-padrao > div:first-child{
    font-size: 0.82rem;
    line-height: 1.4;
  }
}
/* ====== Combo Box ====== */
.combo-box{
  position: relative;
  background: #eaf7f8;
  border: 1px solid var(--c-primary, #0097a4);
  border-radius: 12px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  text-align: center;
  box-shadow: 0 4px 14px rgba(0,0,0,.06);

  max-width: 700px;        /* <<< diminui a largura máxima */
  margin: 2rem auto 0;     /* <<< centraliza e dá distância dos cards de cima */
}

/* selo */
.selo-mais-vendido{
  position: absolute;
  top: -12px;
  right: 20px;             /* <<< aproxima um pouco da borda */
  background: #f44336;
  color: #fff;
  font-size: .75rem;
  font-weight: 700;
  padding: .35rem .65rem;
  border-radius: 6px;
  box-shadow: 0 3px 10px rgba(0,0,0,.2);
}

/* textos */
.combo-eyebrow{
  font-weight: 800;
  font-size: 1.1rem;
  color: #00303a;
}

.combo-de{
  font-size: .95rem;
  color: #777;
  margin-top: .25rem;
}
.combo-de span{
  text-decoration: line-through;
}

.combo-parcelado{
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--c-primary, #0097a4);
  margin: .25rem 0;
}
.combo-parcelado strong{
  font-weight: 900;
}

.combo-avista{
  font-size: 1rem;
  color: #333;
}

.combo-box .btn-primaria{
  margin-top: .75rem;
}



/* Centralizar ícones sociais no mobile */
@media (max-width: 768px){
  .sociais {
    display: flex;               /* garante que seja flex */
    justify-content: center;     /* centraliza horizontalmente */
    gap: 16px;                   /* espaço entre ícones */
    font-size: 1.5rem;           /* opcional: deixa os ícones maiores */
  }
}