/* =======================================================================
   LEGALIZE HEALTH — LANDING CSS (OTIMIZADO)
   - Mantém o mesmo visual final
   - Remove duplicações e sobrescritas desnecessárias
   - Com comentários por seção para facilitar manutenção
   ======================================================================= */

/* ------------------------------
   Variáveis de design (tema)
-------------------------------- */
:root{
  --container: 1160px;                         /* largura máx. do conteúdo */
  --radius-xl: 28px;                           /* raio padrão de cards grandes */
  --shadow-lg: 0 16px 40px rgba(0,0,0,.10);    /* sombras principais */
  --shadow-md: 0 8px 24px rgba(0,0,0,.08);

  --c-bg: #f4f6f4;                             /* fundo geral da página */
  --c-white: #fff;                             /* branco base */
  --c-text: #6B7968;                           /* cinza/verde do texto */
  --c-strong: #6B7968;                         /* ênfase (igual ao texto) */
  --c-btn-dark: #6B7968;                       /* botões cheios */
  --c-divider: #e5ebe5;                        /* linha divisória */
}

/* ------------------------------
   Reset básico e helpers
-------------------------------- */
*{ box-sizing: border-box; }
img{ max-width:100%; display:block; }

body{
  margin:0;
  background:var(--c-bg);
  font-family:'Montserrat',sans-serif;
  color:var(--c-text);
}

/* Container centralizador com respiro nas laterais */
.container{
  width: min(100% - 40px, var(--container));
  margin-inline: auto;
}

/* =======================================================================
   HEADER
   - Cabeçalho compacto com logo responsiva e hambúrguer
   ======================================================================= */
  
.site-header{
  background:var(--c-white);
  position: sticky; top:0; z-index:10;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.header__wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 0;
}
.brand img{ height:100px; width:auto; }         /* logo (mobile/tablet) */


@media (min-width:1080px){
  .brand img{ height:75px; }                   /* logo (desktop) */
  .header__wrap{ padding:14px 0; }
  
}
/* ===== MENU HAMBURGUER (cores Legalize Health) ===== */
:root{
  --lh-green: #6B7968;
  --lh-overlay: rgba(0,0,0,.45);
  --lh-panel-bg: #fff;
}

/* Botão hamburguer */
body .lh-menu__toggle{
  position: fixed;
  top: 35px;
  right: 85px !important;  /* força o lado direito */
  left: auto !important;   /* cancela qualquer left antigo */
  z-index: 10010;          /* fica por cima do header */
  width: 38px;
  height: 28px;
  appearance: none;
  border: 0;
  background: transparent;
  display: inline-grid;
  align-items: center;
  justify-content: center;
}

/* barras internas continuam iguais */
.lh-menu__bar{
  position: fixed;
  left: 6px;
  right: 6px;
  top:10px;
  height: 2px;
  background: var(--lh-green);
  border-radius: 2px;
  transition: transform .25s ease, opacity .2s ease, top .25s ease;
}
.lh-menu__bar:nth-child(1){ top:6px; }
.lh-menu__bar:nth-child(2){ top:13px; }
.lh-menu__bar:nth-child(3){ top:20px; }

/* Quando o menu estiver ativo, esconda as barras do hambúrguer */
.lh-menu__toggle.is-active .lh-menu__bar{
  opacity: 0;
  transform: none;
}
.site-header {
  background-color: white; /* Garante que o fundo da faixa seja branco */
  padding: 20px; /* Ajuste do padding */
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.hero-title {
  text-align: center;
}

.hero-title h1 {
  font-size: 36px;
}
/* Esconde por padrão no desktop */
.hero-mobile{ display:none; }

/* Mostra a versão mobile e esconde o card com imagem */
@media (max-width: 768px){
  /* se o seu hero com foto usa .hero-card/.hero__imagem/.hero-image, esconda-o: */
  .hero-card,
  .hero__imagem,
  .hero-image{ display:none !important; }

  .hero-mobile{
    display:block;
    background:#fff;                 /* faixa branca como no print */
    padding: 18px 0 10px;
    border-bottom:1px solid rgba(0,0,0,.06);
  }

  .hero-mobile__title{
    margin: 6px 0 14px;
    text-align:center;
    line-height:1.15;
    color:#6B7968;
    font-weight:600;
    /* responsivo e próximo do visual do print */
    font-size: clamp(22px, 6vw, 34px);
  }
  .hero-mobile__title strong{ font-weight:800; color:#6B7968; }

  .hero-mobile__actions{
    display:flex;
    gap:10px;
    justify-content:center;
  }
  .hero-mobile__actions .btn{
    flex:1 1 48%;
    text-align:center;
    padding:14px 16px;      /* igual aos seus botões */
  }
}
@media (max-width: 768px) {
  /* Remove a imagem da mulher e centraliza o conteúdo */
  .hero-image {
    display: none; /* Remove a imagem no mobile */
  }

  .hero-title h1 {
    font-size: 28px;
  }

  .hero-copy {
    text-align: center;
  }

  .processo__botoes {
    display: flex;
    justify-content: center;
    gap: 10px;
  }
}


/* Ajustes para o menu hambúrguer no mobile */
@media (max-width: 768px) {
  /* Ajusta a posição do menu hambúrguer */
  .lh-menu__toggle {
    position: fixed;
    top: 100px;  /* Ajuste a distância do topo conforme necessário */
    right: 20px;
    left: auto !important;  /* Ajuste a distância da direita conforme necessário */
    z-index: 9999;
  }

  /* Exibe o painel do menu lateral quando o menu estiver aberto */
  .lh-menu.is-open .lh-menu__panel {
    transform: translateX(0);
  }

  /* Centraliza o conteúdo do menu */
  .lh-menu__panel {
    width: 250px;  /* Ajuste o tamanho do painel */
    background-color: #ffffff;  /* Ajuste a cor do fundo do menu */
    padding: 20px;
    box-shadow: 4px 0 12px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease-in-out;
  }

  /* Ajusta o menu de links para o mobile */
  .lh-menu__list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;  /* Espaçamento entre os itens */
  }

  /* Estilo dos links no menu */
  .lh-menu__link {
    font-size: 18px;
    color: #333;
    text-decoration: none;
    transition: color 0.3s;
  }

  .lh-menu__link:hover {
    color: #6B7968;  /* Cor ao passar o mouse */
  }
}

/* =======================================================================
   HERO
   - Card com imagem de fundo (você coloca a imagem real)
   - Texto sobreposto e CTAs
   ======================================================================= */
.hero{ padding:24px 0 32px; }

.hero-card{
  position:relative;
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-lg);
  overflow:hidden;
  min-height:420px;
  background: url("mulher-sorrindo.jpg") no-repeat center right / cover; /* sua imagem */
}

.hero__copy{
  position:relative; z-index:2;
  max-width:60%;
  padding:80px 56px 48px;
}
@media (max-width:900px){
  .hero__copy{ max-width:100%; padding:32px; }
}

.hero__title{
  margin:0 0 18px;
  line-height:1.1;
  font-weight:600;
  font-size:clamp(22px,4vw,44px);
  color:var(--c-text);
}
.hero__title strong{ color:var(--c-strong); font-weight:800; }

.hero__actions{
  display:flex; gap:14px; flex-wrap:wrap; margin-top:20px;
}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:14px 22px;
  border-radius:999px;
  font-weight:800;
  border:1.5px solid transparent;
  text-decoration:none;
  box-shadow:var(--shadow-md);
  font-size:14px;
}

.btn--filled{ background:var(--c-btn-dark); color:#fff; }
.btn--ghost{ background:transparent; color:#6B7968; border-color:#7e8d7e; }



/* =======================================================================
   CONDIÇÕES (chips)
   - Título + descrição à direita + grid 3 colunas de chips
   - Botão "SELECIONADO" com contador (feito no JS do HTML)
   ======================================================================= */
.section-condicao{ padding:40px 0; }

/* Cabeçalho da seção (título à esquerda, pill+texto à direita) */
.condicao-head{
  display:grid; grid-template-columns:1fr 360px;
  gap:24px; align-items:start; margin-bottom:24px;
}
.condicao-title{
  margin:0; font-weight:500;
  font-size:clamp(26px,3.8vw,44px);
  line-height:1.15; color:var(--c-text);
}
.condicao-side{ text-align:right; }
.pill{
  display:inline-block;
  background:rgba(107,121,104,0.18);
  color:var(--c-strong);
  border-radius:999px;
  padding:8px 16px;
  font-weight:700; font-size:14px;
}
.condicao-note{ margin:8px 0 0; font-size:14px; color:var(--c-text); }

/* Grid dos chips (3 colunas) */
.condicao-form{
  position:relative;
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap:18px 28px;
}

/* Chip (input escondido + label estilizado) */
.chip{
  position:relative; display:block; user-select:none; cursor:pointer;
  border:2px solid #9AA496; border-radius:999px;
  padding:12px 22px 12px 48px;
  background:#fff; color:var(--c-strong);
  box-shadow:0 2px 0 rgba(0,0,0,.10);
  font-weight:600;
  transition: box-shadow .2s ease, transform .04s ease, border-color .2s ease, background .2s ease;
}
.chip:hover{ box-shadow:0 4px 12px rgba(0,0,0,.08); }
.chip:active{ transform: translateY(1px); }

/* Bolinha do chip */
.chip::before{
  content:""; position:absolute; left:16px; top:50%; transform:translateY(-50%);
  width:18px; height:18px; border-radius:50%;
  border:2px solid #9AA496; background:#fff;
}

/* Input invisível porém acessível ao teclado */
.chip > input{ position:absolute; opacity:0; inset:0; }

/* Estados do chip selecionado */
.chip > input:checked + span{ color:#2E372C; font-weight:700; }
.chip:has(input:checked){
  border-color:var(--c-btn-dark); background:#fff;
}
.chip:has(input:checked)::before{
  background:var(--c-btn-dark); border-color:var(--c-btn-dark);
}

/* Botão "SELECIONADO" (canto inferior direito do grid) */
.condicao-actions{
  grid-column:3; display:flex;
  justify-content:flex-end; align-items:end; padding-top:6px;
}
.btn--confirm{
  background:var(--c-btn-dark); color:#fff; border-radius:12px;
  padding:12px 18px; font-weight:800; font-size:12px; letter-spacing:.6px;
  box-shadow:var(--shadow-md); text-transform:uppercase; border:0; cursor:pointer;
  transition: filter .2s ease, transform .04s ease;
}
.btn--confirm:hover{ filter:brightness(.95); }
.btn--confirm:active{ transform:translateY(1px); }
.btn--confirm:disabled{ background:rgba(107,121,104,.35); box-shadow:none; cursor:default; }

/* Responsivo dos chips */
@media (max-width:1024px){
  .condicao-head{ grid-template-columns:1fr; }
  .condicao-side{ text-align:left; }
  .condicao-form{ grid-template-columns:repeat(2,1fr); }
  .condicao-actions{ grid-column:2; }
}
@media (max-width:560px){
  .condicao-form{ grid-template-columns:1fr; }
  .condicao-actions{ grid-column:1; justify-content:flex-start; }
}
/* Estilo do botão */
.selecionado {
  background: #6B7968;
  color: #fff;
  border: none;
  padding: 12px 24px;
  border-radius: 25px;
  cursor: pointer;
  font-weight: bold;
}
.selecionado:hover {
  background: #5a6757;
}

/* Fundo do modal */
.modal {
  display: none; 
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Caixa do modal */
.modal-content {
  background: #fff;
  padding: 32px;
  border-radius: 20px;
  width: 400px;
  max-width: 90%;
  text-align: center;
  box-shadow: 0 10px 40px rgba(0,0,0,0.3);
}

/* Botão de fechar */
.close {
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 28px;
  cursor: pointer;
}

/* Inputs */
.modal-content input {
  width: 100%;
  padding: 12px;
  margin: 12px 0;
  border: 1px solid #ddd;
  border-radius: 8px;
}

/* Botões */
.modal-actions {
  margin-top: 20px;
  display: flex;
  gap: 10px;
  justify-content: center;
}

.btn-primary {
  background: #6B7968;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 25px;
  cursor: pointer;
  font-weight: bold;
}

.btn-secondary {
  background: #ddd;
  padding: 12px 20px;
  border: none;
  border-radius: 25px;
  cursor: pointer;
  font-weight: bold;
}

/* =======================================================================
   SEÇÃO "A LEGALIZE HEALTH"
   - Texto centralizado com logotipo gigante ao fundo (17% de opacidade)
   ======================================================================= */
.sobre{
  position:relative;
  background-color:#fff;
  padding:120px 40px;                 /* respiro grande */
  text-align:center;
  overflow:hidden;
}
.sobre::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* centraliza no eixo X e Y */
  width: 150%;   /* ajuste o tamanho da logo */
  height: 150%;  /* ajuste o tamanho da logo */
  background: url('logotipo.PNG') no-repeat center/contain;
  opacity: 0.1; /* deixa mais suave no fundo */
  z-index: 0;
}
.sobre-conteudo{
  position:relative; z-index:1;
  max-width:900px; margin:0 auto;
}
.sobre h2{
  font-size:36px; margin-bottom:25px; color:#6B7968;
}
.sobre p{
  font-size:22px; line-height:1.6; color:#444;
}
.sobre {
  position: relative;
  background-color: #fff;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.sobre h2 {
  text-align: center;
  font-size: 36px;
}

.sobre p {
  text-align: center;
  font-size: 22px;
  color: #6B7968;
}

.sobre .hero-logo {
  display: block;
  margin: 0 auto;
  max-width: 300px;
}

@media (max-width: 768px) {
  .sobre {
    height: auto;
    padding: 20px;
  }

  .sobre h2 {
    font-size: 28px;
  }

  .sobre p {
    font-size: 18px;
  }
}

/* =======================================================================
   FORMAS DE CONSUMO (ACORDEÃO)
   - Título grande + "medicamentos" (pill)
   - Cards com BG verde 12%, cantos arredondados e imagem quadrada
   - Itens fechados ficam "apagados"
   ======================================================================= */
/* ====== Formas de consumo – visual refinado ====== */

/* cabeçalho */
.consumo__head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom: 28px;
}
/* Título da seção */
.formas-consumo h2 {
  font-size: 1.9rem;   /* deixa menor */
  margin-bottom: 30px; /* espaçamento abaixo */
  color: #6B7968;
}

/* Cada item da lista */
.formas-consumo .item {
  margin-bottom: 25px;   /* mais espaçamento entre os cards */
  padding: 20px;
  border-radius: 12px;
  background: #6B7968;
  opacity:.9;
  box-shadow: 0px 4px 12px rgba(0,0,0,0.08);
}
.pill.pill--lg{
  background: rgba(107,121,104,.16);
  color:#5f6f60;
  padding: 12px 20px;
  border: 1px solid rgba(107,121,104,.20);
  box-shadow: 0 3px 10px rgba(0,0,0,.06) inset;
}

/* lista */
.consumo__list{
  display:grid;
  gap: 20px;
}

/* CARD – base “clean glass” */
.consumo-item{
  border-radius: 24px;
  background:
    radial-gradient(1200px 400px at 10% -10%, rgba(107,121,104,.06), transparent 45%),
    linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.80));
  border: 1px solid rgba(107,121,104,.18);
  box-shadow:
    0 16px 32px rgba(0,0,0,.08),
    0 2px 0 rgba(255,255,255,.6) inset;
  overflow:hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.consumo-item:hover{
  transform: translateY(-2px);
  box-shadow: 0 20px 40px rgba(0,0,0,.10);
  border-color: rgba(107,121,104,.26);
}

/* TÍTULO / botão */
.consumo-item__heading{ margin:0; }
.consumo-item__btn{
  all:unset;
  display:flex; align-items:center; gap:14px;
  width:100%; cursor:pointer; padding: 22px 26px;
  color:#566556;
  font-weight:600;
  line-height:1.25;
  font-size: clamp(16px, 2.6vw, 24px);
}
.process-container {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.process-container img {
  max-width: 100%;
  margin-bottom: 20px;
}

.process-container h2 {
  font-size: 36px;
  margin-bottom: 20px;
}

.process-container p {
  font-size: 20px;
  color: #6B7968;
}

/* índice em badge */
.consumo-item__index{
  display:inline-grid; place-items:center;
  width:34px; height:34px; border-radius:10px;
  background:#eef2ee;
  color:#6B7968;
  font-weight:800;
  font-size:14px;
  border:1px solid rgba(107,121,104,.22);
  box-shadow: 0 1px 0 rgba(255,255,255,.7) inset;
}

/* chevron (setinha) – só aparece se você incluiu o span */
.consumo-item__chev{
  margin-left:auto;
  inline-size: 20px; block-size: 20px;
  mask: url("data:image/svg+xml,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 10l4 4 4-4' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  background:#6B7968;
  opacity:.9;
  transition: transform .2s ease, opacity .2s ease;
}
.consumo-item[data-open="true"] .consumo-item__chev{ transform: rotate(180deg); }

/* painel */
.consumo-item__panel{
  display:grid;
  grid-template-columns: 1fr 220px;  /* texto | imagem */
  align-items: center;
  gap: 18px;
  padding: 0 22px 22px;
}

/* texto */
.consumo-item__content p{
  margin:0;
  color:#586658;
  font-size: clamp(15px, 1.7vw, 17px);
  line-height: 1.6;
}

/* Mídia — quadrado com luz lateral */
.consumo-item__media{
  width: 200px; height: 200px;
  border-radius: 16px;
  position: relative; isolation:isolate;
  overflow:hidden;
  margin-left:auto;
  box-shadow:
    0 14px 26px rgba(0,0,0,.14),
    0 1px 0 rgba(255,255,255,.6) inset;
}
/* halo suave à esquerda */
.consumo-item__media::before{
  content:""; position:absolute; inset:0;
  background: radial-gradient(240px 160px at -20% 50%, rgba(107,121,104,.18), transparent 55%);
  z-index:0;
}
.consumo-item__media img{
  position:relative; z-index:1;
  width:100%; height:100%; object-fit:cover;
  display:block;
  filter: saturate(1.02) contrast(1.02);
  transition: transform .25s ease;
}
.consumo-item:hover .consumo-item__media img{ transform: scale(1.02); }

/* Estados: fechado fica “ghosted” */
.consumo-item:not([data-open="true"]) .consumo-item__btn{ opacity:.45; }
.consumo-item:not([data-open="true"]) .consumo-item__panel{ display:none !important; }

/* Acessibilidade: foco */
.consumo-item__btn:focus-visible{
  outline:3px solid rgba(107,121,104,.4);
  outline-offset: 6px; border-radius: 14px;
}

/* responsivo */
@media (max-width: 860px){
  .consumo-item__panel{ grid-template-columns: 1fr; }
  .consumo-item__media{ margin:10px auto 0; }
}
section.processo {
  margin-top: 100px;   /* distância do que vem antes */
  margin-bottom: 100px; /* distância do que vem depois */
}
/*chamada para consulta*/
.processo {
  background: rgba(107, 121, 104, 0.08); /* verde #6B7968 com opacidade */
  padding: 80px 20px;
  border-radius: 20px; /* cantos arredondados */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); 
}

.processo__wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

.processo__texto {
  max-width: 500px;
  color: #6B7968;
}

.processo__texto h2 {
  font-size: 1.9rem;
  font-weight: 500;
  color: #6B7968;
  margin-bottom: 20px;
  line-height: 1.3;
}

.processo__texto strong {
  font-weight: 700;
  color: #6B7968;
}

.processo__texto p {
  font-size: 1rem;
  color: #6B7968;
  margin-bottom: 30px;
  line-height: 1.6;
}

.processo__botoes {
  display: flex;
  gap: 15px;
}

.btn {
  padding: 12px 24px;
  border-radius: 30px;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
}

.btn--filled {
  background: #6B7968;
  color: #fff;
}

.btn--filled:hover {
  background: #5a6658;
}

.btn--ghost {
  border: 2px solid #6B7968;
  color: #6B7968;
  background: transparent;
}

.btn--ghost:hover {
  background: #6B7968;
  color: #fff;
}

.processo__imagem img {
  max-width: 380px;
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
}
/* ===== Processo — card com texto e imagem ===== */
.processo{ padding: 28px 0 56px; }

.processo__card{
  display:grid;
  grid-template-columns: 1.1fr 1fr;      /* texto | imagem */
  gap: 32px;
  align-items: center;
  background: rgba(107,121,104,.12);     /* verde 12% */
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: 32px;
}

/* Colunas */
.processo__col.texto{ padding: 12px 8px 12px 12px; }
.processo__col.media{
  border-radius: cover;
  box-shadow: 0 12px 28px rgba(0,0,0,.10);
  padding: 10px;                         /* “moldura” branca sutil */
}
.processo__col.media img{
  display:block; width:100%; height:100%;
  border-radius: 18px; object-fit: cover;    /* foto cheia, sem distorcer */
}

/* Tipografia */
.eyebrow{
  margin:0 0 6px; font-size: 20px; color: var(--c-text); opacity:.9;
}
.processo__title{
  margin:0 0 14px;
  font-weight: 500;
  line-height: 1.15;
  color: var(--c-text);
  font-size: clamp(28px, 4.4vw, 46px);
}
.processo__title strong{ font-weight: 800; color: var(--c-strong); }
.processo__sub{
  margin: 8px 0 22px;
  font-size: clamp(20px, 1.9vw, 18px);
  margin-bottom: 16px;
  line-height: 1.6;
  color: #4a5647;
}

/* Ações */
.processo__actions{ display:flex; gap:12px; flex-wrap:wrap; }

/* Botão com ícone “play” */
.btn--icon{ display:inline-flex; align-items:center; gap:10px; }
.btn--icon .play{
  width: 22px; height: 22px; border-radius:50%;
  display:inline-grid; place-items:center;
  box-shadow: inset 0 0 0 2px #8ea28d;
  position: relative;
}
.btn--icon .play::after{
  content:""; position:absolute; left:8px; top:6px;
  border-left: 8px solid #6B7968;      /* triângulo play */
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}

/* Responsivo */
@media (max-width: 980px){
  .processo__card{
    grid-template-columns: 1fr;         /* empilha */
    padding: 24px;
  }
  .processo__col.media{ order: -1; }    /* imagem primeiro no mobile, opcional */
}
/* ====================== TRATAMENTO DESCOMPLICADO ====================== */
/* Cabeçalho */
.steps { padding: 28px 0 48px; }
.steps__head { margin-bottom: 14px; display:flex; align-items:center; justify-content:space-between; }
.steps__title { 
  margin:0; 
  font: 600 clamp(26px, 3.6vw, 40px) 'Montserrat', sans-serif; 
  color: var(--c-text);
}
.steps__title .em { font-weight: 700; }

/* Grid de 4 cards */
.steps__grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

/* Card base */
.step{
  position: relative;
  padding: 24px;
  border-radius: 22px;
  background: rgba(107,121,104,.12);              /* fundo ~12% como no Figma */
  box-shadow: 0 14px 28px rgba(0,0,0,.10);
  min-height: 220px;
  display: flex;
  flex-direction: column;
  transition: box-shadow .2s ease, background .2s ease, transform .04s ease;
  cursor: pointer;
}
.step:hover{ box-shadow: 0 18px 38px rgba(0,0,0,.12); }
.step:active{ transform: translateY(1px); }

/* Pílula “Etapa” */
.step__badge{
  position: absolute; top: 14px; left: 14px;
  font: 700 12px/1 'Montserrat', sans-serif;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(107,121,104,.18);
  color: var(--c-text);
}

/* Ícone topo-direito */
.step__icon{
  position: absolute; top: 16px; right: 16px;
  width: 44px; height: 44px;
  border-radius: 12px;
  background: rgba(107,121,104,.14);
  display:grid; place-items:center;
  pointer-events: none;
}
.step__icon img{ width:40px; height:40px; }

/* Título do card */
.step__title{
  margin: 50px 0 8px;           /* desce p/ não colidir com pílula/ícone */
  color: var(--c-text);
  font-weight: 600;
  font-size: clamp(18px, 2.2vw, 26px);
  line-height: 1.25;
}
.step__title strong{ font-weight: 800; }

/* Texto (aparece só no aberto) */
.step_desc {
  display: none; /* Esconde as descrições inicialmente */
  transition: all 0.3s ease;
}

.step__more {
  cursor: pointer;
  font-size: 14px;
  color: var(--lh-green); /* Cor para o botão */
  background: transparent;
  border: none;
}

.step__more:hover {
  color: var(--lh-dark); /* Alterar cor quando passar o mouse */
}

/* Estados */
.step[data-open]{
  background: rgba(107,121,104,.16);
  box-shadow: 0 20px 42px rgba(0,0,0,.12);
}
.step[data-open] .step__desc{ display:block; }
.step:not([data-open]) .step__title{ opacity:.9; }
.step:not([data-open]) .step__desc{ display:none; }
.step:not([data-open]) .step__more{ opacity:.7; }

/* Responsivo */
@media (max-width: 1100px){
  .steps__grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px){
  .steps__grid{ grid-template-columns: 1fr; }
  .step{ min-height: 0; }
}
/* Container dos cards */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
  margin-top: 24px;
}

/* Cada card */
.step {
  position: relative;
  background: #f9f9f9;
  border-radius: 18px;
  box-shadow: 0 6px 14px rgba(0,0,0,.08);
  padding: 20px;
  min-height: 220px;   /* mantém altura fixa */
  transition: transform .2s ease;
}
.step:hover { transform: translateY(-3px); }

/* Título */
.step__title {
  margin: 46px 0 6px;
  font-weight: 600;
  font-size: clamp(15px, 1.8vw, 18px); /* menor */
  color: var(--c-text);
}
.step__title strong { font-weight: 800; }

/* Texto */
.step__content {
  font-size: 13px;          /* reduz tamanho */
  line-height: 1.4;         /* menos espaçamento entre linhas */
  color: #555;
  margin-right: 8px;
  margin-bottom: 10px;
  max-height: 70px;         /* limita altura */
  overflow: hidden;         /* corta excesso se passar */
  text-overflow: ellipsis;  /* adiciona "..." se ultrapassar */
}

/* "Mais informação" */
.step__more {
  font-size: 12px;
  font-weight: 500;
  color: #7a7a7a;
  display: block;
  margin-top: auto; /* gruda no final */
}
.step__desc {
  display: none; /* Inicialmente oculto */
}
.step__desc.hidden {
  display: none;
}

.step__desc.visible {
  display: block;
}
/* ===== FAQ ===== */
.faq { padding: 40px 0 60px; }
.faq__head{
  display:grid; grid-template-columns:1fr 300px; gap:20px; align-items:center;
  margin-bottom:24px;
}
.faq__title{ margin:0; font-weight:700; font-size:clamp(24px,4vw,36px); color:#6B7968; }
.faq__side{ text-align:right; }
.faq__note{ margin:6px 0 0; font-size:14px; color:#6B7968; }
@media(max-width:768px){ .faq__head{ grid-template-columns:1fr; } .faq__side{text-align:left;} }

.faq__list{ display:flex; flex-direction:column; gap:12px; }

.faq__item{
  position:relative;
  background:#fff;
  border:1px solid #e5ebe5;
  border-radius:20px;
  box-shadow:0 6px 14px rgba(0,0,0,.08);
  padding:18px 60px 18px 20px; /* espaço p/ o botão à direita */
}
.faq__q{ margin:0; font-size:clamp(16px,2.5vw,20px); font-weight:600; color:#6B7968; }
.faq__btn{
  position:absolute; right:16px; top:50%; transform:translateY(-50%);
  width:36px; height:36px; border-radius:50%;
  background:rgba(107,121,104,.15);
  border:none; cursor:pointer;
}
.faq__btn::before, .faq__btn::after{
  content:""; position:absolute; background:#6B7968;
  top:50%; left:50%; transform:translate(-50%,-50%);
}
.faq__btn::before{ width:18px; height:2px; }
.faq__btn::after{ width:2px; height:18px; }
.faq__btn[aria-expanded="true"]::after{ display:none; } /* vira sinal de – */

.faq__a{
  margin-top:10px;
  font-size:clamp(14px,1.8vw,16px);
  color:#6B7968;
  line-height:1.55;
}

/* ===== CHAMADA: Inicie o tratamento ===== */
.cta-consulta{
  /* fundo suave com o “verde” da marca em baixa opacidade */
  background: radial-gradient(1200px 600px at 15% 20%, rgba(107,121,104,.10), transparent 60%);           
  padding: 48px 0 56px;
  border-radius: 24px;
}

.cta-consulta__wrap{
  display: grid;
  grid-template-columns: 1.1fr .9fr;        /* texto | imagem */
  gap: 36px;
  align-items: center;
  background: #dbe0d9;opacity:.9;
  border-radius: 28px;                       /* cantos arredondados no “fundo” */
  box-shadow: 0 24px 60px rgba(0,0,0,.10);   /* sombra do fundo */
  padding: 48px 48px;
  position: relative;
  overflow: hidden;
}

/* detalhe de luz no fundo */
.cta-consulta__wrap::after{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(500px 300px at 25% 75%, rgba(151, 160, 149, 0.1), transparent 70%);
  pointer-events:none;
}

.cta-consulta__copy{
  color: #6B7968;
}

.pill{
  display:inline-block;
  border-radius: 999px;
  padding: 6px 12px;
  font: 700 11px/1 'Montserrat', sans-serif;
  letter-spacing:.4px;
  text-transform: uppercase;
}
.pill--soft{
  background: rgba(107,121,104,.15);
  color: #6B7968;
}

.cta-consulta__title{
  margin: 14px 0 10px;
  font-weight: 600;
  line-height: 1.15;
  font-size: clamp(24px, 3.2vw, 36px);     /* título equilibrado */
  color: #6B7968;
}
.cta-consulta__title strong{ font-weight: 800; color:#6B7968; }

.cta-consulta__lead{
  margin: 12px 0 22px;
  font-size: clamp(14px, 1.6vw, 18px);
  line-height: 1.6;
  color: #6B7968;
  opacity: .95;
}

/* botão já no estilo do site */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 12px 22px; border-radius: 999px;
  font: 800 14px/1 'Montserrat', sans-serif; text-decoration:none;
  border: 1.5px solid transparent; box-shadow: 0 10px 22px rgba(0,0,0,.08);
}
.btn--filled{ background:#6B7968; color:#fff; }
.btn--filled:hover{ filter: brightness(.95); }

/* cartão da imagem */
.cta-consulta__media{
  margin: 0;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 22px 50px rgba(0,0,0,.18); /* sombra na imagem também */
  background: #596558;                     /* fallback */
  aspect-ratio: 4/5;                        /* mantém proporção elegante */
}
.cta-consulta__media img{
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
}

/* responsivo */
@media (max-width: 980px){
  .cta-consulta__wrap{
    grid-template-columns: 1fr;
    padding: 36px 24px;
  }
  .cta-consulta__media{ order: -1; margin-bottom: 8px; }
}

@media (max-width: 560px){
  .cta-consulta{ padding: 32px 0 40px; }
  .cta-consulta__wrap{ border-radius: 22px; }
  .btn{ padding: 12px 18px; }
}

/* ====== Footer bonito ====== */
.lh-footer{
  --bg: rgba(107,121,104,.08);              /* fundo esverdeado translúcido */
  --blur: blur(6px);
  background:
    radial-gradient(1200px 700px at 85% 30%, rgba(107,121,104,.10), transparent 60%),
    var(--bg);
  backdrop-filter: var(--blur);
  padding: 44px 0 28px;
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(0,0,0,.06);
  border-radius: 24px;
}

/* marca d’água (folha) ao fundo */
.lh-footer::after{
  content:"";
  position:absolute;
  right:-6%;
  bottom:-14%;
  width:520px; height:520px;
  background:url('logotipo.PNG') center/contain no-repeat;
  opacity: .10;                 /* ~10% */
  pointer-events:none;
  
}

/* card interno */
.lh-footer__inner{
  position:relative;
  z-index:1;
  background: rgba(255,255,255,.65);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 24px;
  box-shadow: 0 18px 40px rgba(0,0,0,.10);
  padding: 28px clamp(18px,3vw,28px);
}

/* grid das colunas */
.lh-footer__grid{
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap: clamp(18px,3vw,40px);
  align-items:start;
}

@media (max-width: 900px){
  .lh-footer__grid{ grid-template-columns: 1fr 1fr; }
  .lh-footer__brand{ grid-column: 1 / -1; }
}
@media (max-width: 560px){
  .lh-footer__grid{ grid-template-columns: 1fr; }
}

/* títulos/links */
.lh-footer__title{
  margin: 0 0 12px;
  font: 700 14px/1 'Montserrat', sans-serif;
  letter-spacing:.4px;
  text-transform: uppercase;
  color: #6B7968;
  opacity:.95;
}

.lh-footer__list{ list-style:none; margin:0; padding:0; }
.lh-footer__list li{ margin: 8px 0; }

.lh-footer__list a{
  color:#445047;                 /* tom neutro */
  text-decoration: none;
  padding: 6px 0;
  display:inline-block;
  transition: color .2s ease, text-underline-offset .2s ease;
}
.lh-footer__list a:hover{
  color:#6B7968;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* coluna da marca */
.lh-footer__brand{ text-align:left; }
.lh-footer__logo{ height:40px; width:auto; margin-bottom:10px; opacity:.95; }
.lh-footer__tagline{
  margin:0 0 12px;
  color:#596558;
  font-size:14px;
  line-height:1.45;
}

/* redes sociais (botões circulares) */
.lh-footer__social{ display:flex; gap:10px; }
.lh-social{
  width:38px; height:38px; display:grid; place-items:center;
  border-radius:999px;
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 6px 16px rgba(0,0,0,.10);
  transition:.2s ease transform, .2s ease filter;
}
.lh-social img{ width:20px; height:20px; opacity:.85; }
.lh-social:hover{ transform: translateY(-2px); filter:brightness(.95); }

/* divisor e rodapé base */
.lh-footer__divider{
  border:0; height:1px; background:rgba(0,0,0,.06);
  margin: 18px 0 14px;
}

.lh-footer__base{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; color:#5e6a5d; font-size:13px;
}
.lh-footer__legal{ display:flex; gap:8px; align-items:center; }
.lh-footer__legal a{ color:#5e6a5d; text-decoration:none; }
.lh-footer__legal a:hover{ color:#6B7968; text-decoration:underline; text-underline-offset:3px; }

@media (max-width:560px){
  .lh-footer__base{ flex-direction:column; text-align:center; }
}
/* ===== Modal base ===== */
.modal{
  position: fixed;
  inset: 0;
  display: none;                 /* começa escondido */
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.45);   /* overlay */
  z-index: 9999;
  padding: 24px;
}
.modal.is-open{ display:flex; }  /* classe que abre */

/* Caixa do modal */
.modal__content{
  width: min(92vw, 640px);
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(0,0,0,.18);
  padding: 28px;
  color: #6B7968;
}

/* Form e botões */
#lead-form{ display:grid; gap:14px; margin-top:14px; }
#lead-form input{
  width:100%; padding:14px 16px; border-radius:12px;
  border:1.5px solid #e5ebe5; outline:0; font: 500 16px/1.2 'Montserrat',sans-serif;
  color:#2E372C;
}
.modal__actions{ display:flex; gap:12px; margin-top:8px; }
.btn{ display:inline-flex; align-items:center; justify-content:center; padding:12px 18px; border-radius:999px; font-weight:800; font-size:14px; border:1.5px solid transparent; cursor:pointer; }
.btn--ghost{ background:transparent; color:#6B7968; border-color:#7e8d7e; }
/* ===== MENU HAMBURGUER (cores Legalize Health) ===== */
:root{
  --lh-green: #6B7968;
  --lh-overlay: rgba(0,0,0,.45);
  --lh-panel-bg: #fff;
}

/* Botão hamburguer */
.lh-menu__toggle{
  appearance:none; border:0; background:transparent; cursor:pointer;
  width:38px; height:28px; position:relative; display:inline-flex; align-items:center; justify-content:center;
}
.lh-menu__bar{
  position:absolute; left:6px; right:6px; height:2px; background:var(--lh-green); border-radius:2px;
  transition:transform .25s ease, opacity .2s ease, top .25s ease;
}
.lh-menu__bar:nth-child(1){ top:6px; }
.lh-menu__bar:nth-child(2){ top:13px; }
.lh-menu__bar:nth-child(3){ top:20px; }

/* Estado ativo (vira X) */
.lh-menu__toggle.is-active .lh-menu__bar:nth-child(1){ top:13px; transform:rotate(45deg); }
.lh-menu__toggle.is-active .lh-menu__bar:nth-child(2){ opacity:0; }
.lh-menu__toggle.is-active .lh-menu__bar:nth-child(3){ top:13px; transform:rotate(-45deg); }

/* Overlay + painel */
.lh-menu{
  position:fixed; inset:0; z-index:9999; display:none;
}
.lh-menu.is-open{ display:block; }

.lh-menu__overlay{
  position:absolute; inset:0; background:var(--lh-overlay);
  opacity:0; transition: opacity .25s ease;
}
.lh-menu.is-open .lh-menu__overlay{ opacity:1; }

.lh-menu__panel{
  position:absolute; top:0; right:0; height:100%; width:min(88vw, 360px);
  background:var(--lh-panel-bg); color:var(--lh-green);
  transform: translateX(100%);
  transition: transform .28s ease;
  box-shadow: -20px 0 48px rgba(0,0,0,.18);
  padding: 20px 18px 24px;
  display:flex; flex-direction:column; gap:10px;
}
.lh-menu.is-open .lh-menu__panel{ transform:none; }

/* Botão fechar (mobile) */
.lh-menu__close{
  align-self:flex-end;
  background:transparent; border:0; font-size:28px; line-height:1; cursor:pointer; color:var(--lh-green);
  padding:6px; border-radius:8px;
}
.lh-menu__close:hover{ background:rgba(107,121,104,.12); }

/* Lista */
.lh-menu__list{ list-style:none; margin:8px 0 0; padding:0; display:flex; flex-direction:column; gap:6px; }
.lh-menu__link{
  display:block; padding:12px 10px; border-radius:12px; color:#2e372c; text-decoration:none; font-weight:600;
}
.lh-menu__link:hover, .lh-menu__link:focus{ background:rgba(107,121,104,.12); outline:none; }

/* Bloquear scroll de fundo quando aberto */
.body--menu-open{ overflow:hidden; }


.legal-section {
  padding: 20px;
  background-color: #f9f9f9;
  margin: 20px 0;
}

.legal-section h1 {
  font-size: 2rem;
  color: #333;
}
@media (max-width: 768px) {

  /* Esconde a imagem de fundo e a imagem da mulher */
  .hero-card {
    display: none;
  }
  
  .hero {
    background: none !important; /* Remove o fundo */
  }

  /* Centraliza o conteúdo do texto */
  .hero_copy {
    text-align: center; /* Centraliza o texto */
    padding: 32px;
    max-width: 100%;
  }

  /* Ajusta a largura do texto e dos botões */
  .processo__botoes {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
  }

  .processo__botoes a {
    width: 100%;
    padding: 12px;
    text-align: center;
  }

  .hero-title h1 {
    font-size: 28px; /* Ajusta o tamanho do título */
  }
}
/* Estilos para dispositivos móveis */
@media (max-width: 768px) {
  /* Esconde a imagem da mulher */
  .hero__imagem {
    display: none !important;
  }

  /* Centraliza o conteúdo no mobile */
  .hero__copy {
    text-align: center;
    max-width: 100%; /* Garante que o texto ocupe toda a largura disponível */
    padding: 32px;
  }

  /* Ajusta a altura e largura do título */
  .hero__title {
    font-size: 28px; /* Ajuste para o tamanho do texto */
  }

  /* Centraliza o texto da seção "processo" */
  .processo__texto {
    text-align: center;
  }

  /* Organiza os botões em uma coluna */
  .processo__botoes {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    text-align: center;
  }

  .processo__botoes a {
    width: 100%; /* Faz com que os botões ocupem toda a largura */
    padding: 12px;
  }
}
.site-header {
  background-color: white; /* Garante que o fundo da faixa seja branco */
  padding: 20px; /* Ajuste do padding */
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.hero-title {
  text-align: center;
}

.hero-title h1 {
  font-size: 36px;
}

@media (max-width: 768px) {
  /* Remove a imagem da mulher e centraliza o conteúdo */
  .hero-image {
    display: none; /* Remove a imagem no mobile */
  }

  .hero-title h1 {
    font-size: 28px;
  }

  .hero-copy {
    text-align: center;
  }

  .processo__botoes {
    display: flex;
    justify-content: center;
    gap: 10px;
  }
}.sobre {
  position: relative;
  background-color: #fff;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.sobre h2 {
  text-align: center;
  font-size: 36px;
}

.sobre p {
  text-align: center;
  font-size: 22px;
  color: #6B7968;
}

.sobre .hero-logo {
  display: block;
  margin: 0 auto;
  max-width: 300px;
}

@media (max-width: 768px) {
  .sobre {
    height: auto;
    padding: 20px;
  }

  .sobre h2 {
    font-size: 28px;
  }

  .sobre p {
    font-size: 18px;
  }
}.process-container {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.process-container img {
  max-width: 100%;
  margin-bottom: 20px;
}

.process-container h2 {
  font-size: 36px;
  margin-bottom: 20px;
}

.process-container p {
  font-size: 20px;
  color: #6B7968;
}@media (max-width: 768px) {
  .hero-title {
    font-size: 24px;
  }

  .site-header {
    display: block;
    text-align: center;
    padding: 15px 10px;
  }

  .process-container {
    margin-top: 30px;
    padding: 0 10px;
  }

  .processo__botoes {
    flex-direction: column;
    gap: 10px;
  }

  .processo__imagem {
    display: none;
  }
}