/* =========================================================================
   MEDC — Home (proposta v2)
   Carregado DEPOIS de base.css e styles.css: as seções novas usam nomes
   próprios (.v2-*, .dores, .recurso) e não colidem com o CSS antigo; o
   fim do arquivo harmoniza os blocos reaproveitados com a identidade nova.

   Identidade: o azul da marca e o verde de confirmação do próprio sistema.
   ========================================================================= */

:root {
    --v2-azul:       #0052CC;
    --v2-azul-forte: #003D99;
    --v2-noite:      #071A3D;
    --v2-veu:        #EAF1FD;

    --v2-verde:      #0F7A55;
    --v2-verde-veu:  #E3F3EC;
    --v2-zap:        #25D366;

    --v2-tinta:      #06183A;
    --v2-tinta-2:    #3D4F68;
    --v2-tinta-3:    #7386A0;
    --v2-linha:      #DCE5F2;
    --v2-papel:      #FFFFFF;
    --v2-fundo:      #F4F7FB;

    --v2-titulo: Poppins, system-ui, -apple-system, "Segoe UI", sans-serif;
}

.v2 { font-family: var(--v2-titulo); color: var(--v2-tinta); }

.v2 h1, .v2 h2, .v2 h3, .v2 .num {
    letter-spacing: -0.02em;
    text-wrap: balance;
}

.v2 .faixa { padding: 84px 0; }
.v2 .faixa-clara { background: var(--v2-fundo); }
.v2 .interna { max-width: 1240px; margin: 0 auto; padding: 0 24px; }

.v2 .rotulo {
    display: inline-block;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--v2-azul);
    background: var(--v2-veu);
    padding: 6px 12px;
    border-radius: 4px;
    margin-bottom: 18px;
}

.v2 .titulo-secao {
    font-size: clamp(1.75rem, 3.4vw, 2.5rem);
    line-height: 1.15;
    color: var(--v2-tinta);
    margin: 0 0 16px;
}

.v2 .apoio {
    font-size: 1.08rem;
    line-height: 1.65;
    color: var(--v2-tinta-2);
    max-width: 62ch;
    margin: 0 0 40px;
}

/* ------------------------------- HERO --------------------------------- */
.v2-hero {
    /* 88px de respiro + 70px da navbar fixa do base.css */
    padding: 158px 0 0;
    background: var(--v2-papel);
}

.hero-grade {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(430px, 1fr));
    gap: 64px;
    align-items: center;
}

.v2-hero h1 {
    font-size: clamp(34px, 4.05vw, 54px);
    line-height: 1.05;
    letter-spacing: -0.028em;
    font-weight: 700;
    color: var(--v2-tinta);
    margin: 0 0 24px;
}

.v2-hero h1 .grifo {
    color: var(--v2-azul);
}

.v2-hero .chamada {
    font-size: 19px;
    line-height: 1.6;
    color: var(--v2-tinta-2);
    margin: 0 0 34px;
    max-width: 34em;
}

.v2-hero .chamada strong { color: var(--v2-tinta); font-weight: 600; }

.v2-hero .chamada a { color: var(--v2-azul); font-weight: 600; }

.v2-botoes {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 44px;
}

.bt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 17px 32px;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    border: 2px solid transparent;
    transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.bt-azul { background: var(--v2-azul); color: #fff; }
.bt-azul:hover { background: var(--v2-azul-forte); color: #fff; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 82, 204, 0.28); }

.bt-zap { background: var(--v2-zap); color: #fff; }
.bt-zap:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(37, 211, 102, 0.34); }

.bt-vazado { background: var(--v2-papel); color: var(--v2-tinta); border: 1.5px solid var(--v2-linha); padding: 16px 30px; }
.bt-vazado:hover { border-color: var(--v2-azul); color: var(--v2-azul); transform: translateY(-2px); }

.bt:focus-visible { outline: 3px solid var(--v2-azul); outline-offset: 3px; }

/* Credenciais: números que o comprador entende, não métricas de vaidade */
.credenciais {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 20px;
    padding-top: 26px;
    border-top: 1px solid var(--v2-linha);
}

.credenciais div { min-width: 0; }
.credenciais .num {
    display: block;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--v2-tinta);
    line-height: 1.1;
}
.credenciais span:last-child {
    display: block;
    margin-top: 3px;
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--v2-tinta-3);
}

/* ------------------------------- DORES --------------------------------
   Achado P8 da auditoria: a página nunca dizia a dor na voz do médico.
   Medidas conforme o arquivo de referência do sandbox. */
.dores {
    background: #06183A;
    padding: 100px 0;
    margin-top: 40px;
}

.dores-cabeca { max-width: 52em; }

.dores .rotulo {
    display: block;
    padding: 0;
    background: none;
    border-radius: 0;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #6FB0FF;
    margin-bottom: 18px;
}

.dores .titulo-secao {
    margin: 0 0 18px;
    font-size: clamp(30px, 3.4vw, 46px);
    line-height: 1.1;
    letter-spacing: -0.025em;
    font-weight: 700;
    color: #fff;
}

.dores .apoio {
    margin: 0 0 56px;
    font-size: 18px;
    line-height: 1.6;
    color: #C7D6EA;
    max-width: 32em;
}

.lista-dores {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.dor {
    background: #0B2350;
    border: 1px solid #163464;
    border-radius: 14px;
    padding: 30px 26px 28px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.dor blockquote {
    margin: 0;
    font-size: 19px;
    line-height: 1.4;
    font-weight: 600;
    color: #fff;
    letter-spacing: -0.01em;
}

/* filete curto entre a fala e a resposta */
.dor i {
    display: block;
    width: 34px;
    height: 2px;
    background: #6FB0FF;
}

.dor.verde i,
.dor.verde .dor-link { color: #58D6BE; }
.dor.verde i { background: #58D6BE; }

.dor .resposta {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.65;
    color: #C7D6EA;
    flex: 1 1 auto;
    padding: 0;
    border: 0;
}

.dor .resposta strong { color: #fff; font-weight: 600; }

.dor-link {
    font-size: 14px;
    font-weight: 600;
    color: #6FB0FF;
    text-decoration: none;
}

.dor-link:hover { color: #fff; }

.dores-rodape {
    margin-top: 52px;
    padding-top: 36px;
    border-top: 1px solid #163464;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.dores-rodape p {
    margin: 0;
    font-size: 19px;
    font-weight: 500;
    color: #fff;
    letter-spacing: -0.01em;
    max-width: 30em;
}

.dores-rodape a {
    font-size: 15px;
    font-weight: 600;
    color: #06183A;
    background: #fff;
    padding: 15px 28px;
    border-radius: 10px;
    text-decoration: none;
    white-space: nowrap;
}

.dores-rodape a:hover { background: #6FB0FF; color: #06183A; }

/* ------------------------- RECURSOS COM PRINT -------------------------
   Medidas conforme o arquivo de referência do sandbox. */
.recurso { padding: 104px 0; background: var(--v2-papel); }
.recurso-fundo { background: var(--v2-fundo); }

.recurso-grade {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
    gap: 64px;
    align-items: center;
}

.recurso-grade.invertido > .recurso-texto { order: 2; }
.recurso-grade.invertido > .recurso-arte  { order: 1; }

/* Nas seções de recurso o rótulo é texto solto, não pílula */
.recurso .rotulo {
    display: block;
    padding: 0;
    background: none;
    border-radius: 0;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--v2-azul);
    margin-bottom: 16px;
}

.recurso h2 {
    margin: 0 0 22px;
    font-size: clamp(28px, 3.1vw, 42px);
    line-height: 1.12;
    letter-spacing: -0.025em;
    font-weight: 700;
    color: var(--v2-tinta);
}

.recurso p {
    margin: 0 0 18px;
    font-size: 17.5px;
    line-height: 1.65;
    color: var(--v2-tinta-2);
}

/* Destaque com filete à esquerda: onde mora o número com nota de rodapé */
.destaque-num {
    border-left: 3px solid var(--v2-azul);
    padding: 4px 0 4px 20px;
    margin: 0 0 30px;
}

.destaque-num p {
    margin: 0;
    font-size: 17.5px;
    line-height: 1.6;
    color: var(--v2-tinta);
    font-weight: 500;
}

.destaque-num strong { font-weight: 700; }

.destaque-num .ref-mark {
    font-size: 12px;
    vertical-align: super;
    font-weight: 600;
    text-decoration: none;
}

.ganhos {
    list-style: none;
    margin: 0 0 32px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ganhos li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    font-size: 15.5px;
    line-height: 1.6;
    color: var(--v2-tinta-2);
}

/* O texto do <li> vai num <span>: em flex, cada trecho solto viraria item
   próprio e o gap abriria buraco no meio da frase. */
.ganhos li::before {
    content: "";
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-top: 3px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%23E8F0FC'/%3E%3Cpath d='M6 10.4l2.6 2.6L14 7.6' fill='none' stroke='%230052CC' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ganhos li strong { color: var(--v2-tinta); font-weight: 600; }

.link-recurso {
    display: inline-block;
    font-size: 15.5px;
    font-weight: 600;
    color: var(--v2-azul);
    text-decoration: none;
}
.link-recurso:hover { text-decoration: underline; }

/* Imagem sem moldura de janela: borda fina e sombra, como na referência */
.arte { margin: 0; }

.arte img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 14px;
    border: 1px solid var(--v2-linha);
    box-shadow: 0 20px 50px rgba(6, 24, 58, 0.12);
}

.legenda {
    margin: 16px 0 0;
    font-size: 13px;
    color: var(--v2-tinta-3);
}

/* Par de artes: a agenda no desktop e a mesma confirmação no WhatsApp */
.par-arte { display: grid; gap: 26px; }

/* ------- Harmonização dos blocos reaproveitados do styles.css --------- */
.v2 .pricing,
.v2 .testimonials,
.v2 .faq,
.v2 .contact-section { font-family: inherit; }

.v2 .testimonials h2,
.v2 .faq h2,
.v2 .contact-section h2,
.v2 .references h2 {
    font-family: var(--v2-titulo);
    letter-spacing: -0.02em;
}

/* Os blocos reaproveitados usam .section-container (1400px / 32px) do
   base.css. Sem isto ficam mais largos que as seções novas, que usam
   .interna (1240px / 24px), e a página perde o alinhamento vertical. */
.v2 .section-container {
    max-width: 1240px;
    padding: 0 24px;
}

.v2 .testimonials { background: var(--v2-fundo); }

/* ------------------------------ Responsivo ---------------------------- */
@media (max-width: 940px) {
    .hero-grade,
    .recurso-grade {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    /* No mobile a arte sempre vem depois do texto, inclusive nas invertidas */
    .recurso-grade.invertido > .recurso-texto { order: 1; }
    .recurso-grade.invertido > .recurso-arte  { order: 2; }

    .v2 .faixa, .dores, .recurso { padding: 60px 0; }
    .v2-hero { padding: 96px 0 56px; }
}

@media (max-width: 560px) {
    .v2 .interna { padding: 0 20px; }
    .v2-botoes .bt { width: 100%; }
    .credenciais { gap: 14px 24px; }
}

@media (prefers-reduced-motion: reduce) {
    .bt { transition: none; }
    .bt:hover { transform: none; }
}

/* ------------------------- SUPORTE HUMANO ----------------------------
   Medidas do sandbox: faixa clara, numeração 01/02/03 em verde-azulado
   e divisórias de 2px feitas com o gap sobre o fundo do container. */
.humano { background: var(--v2-fundo); padding: 104px 0; }

.humano-cabeca { max-width: 46em; margin-bottom: 56px; }

.humano .rotulo {
    display: block;
    padding: 0;
    background: none;
    border-radius: 0;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #0A6B69;
    margin-bottom: 16px;
}

.humano .titulo-secao {
    margin: 0 0 20px;
    font-size: clamp(28px, 3.1vw, 42px);
    line-height: 1.12;
    letter-spacing: -0.025em;
    font-weight: 700;
    color: var(--v2-tinta);
    max-width: none;
}

.humano .apoio {
    margin: 0;
    font-size: 17.5px;
    line-height: 1.65;
    color: var(--v2-tinta-2);
    max-width: none;
}

/* Três colunas fixas, não auto-fit: com auto-fit uma linha incompleta
   deixaria célula vazia pintada com a cor da divisória. */
.trio {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    background: var(--v2-linha);
    border-radius: 14px;
    overflow: hidden;
}

.trio article { background: var(--v2-papel); padding: 36px 30px; }

.trio .n {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: #0A6B69;
    margin-bottom: 14px;
}

.trio h3 {
    margin: 0 0 12px;
    font-size: 19px;
    line-height: 1.3;
    letter-spacing: -0.015em;
    font-weight: 600;
    color: var(--v2-tinta);
}

.trio p {
    margin: 0;
    font-size: 15px;
    line-height: 1.65;
    color: #52657F;
}

@media (max-width: 860px) {
    .trio { grid-template-columns: 1fr; }
}

@media (max-width: 940px) {
    .humano { padding: 60px 0; }
    .humano-cabeca { margin-bottom: 40px; }
}

/* ------------------------ GRADE DE FUNCIONALIDADES --------------------
   Medidas do sandbox: linhas com filete, sem cartão e sem ícone. */
.tudo { padding: 104px 0; background: var(--v2-papel); }

.tudo-cabeca { max-width: 44em; margin-bottom: 48px; }

.tudo .rotulo {
    display: block;
    padding: 0;
    background: none;
    border-radius: 0;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--v2-azul);
    margin-bottom: 16px;
}

.tudo .titulo-secao {
    margin: 0 0 20px;
    font-size: clamp(28px, 3.1vw, 42px);
    line-height: 1.12;
    letter-spacing: -0.025em;
    font-weight: 700;
    color: var(--v2-tinta);
}

.tudo .apoio {
    margin: 0;
    font-size: 17.5px;
    line-height: 1.65;
    color: var(--v2-tinta-2);
    max-width: none;
}

.grade {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 0;
    border-top: 1px solid var(--v2-linha);
}

.grade article {
    border-bottom: 1px solid var(--v2-linha);
    padding: 26px 28px 26px 0;
}

.grade h3 {
    margin: 0 0 8px;
    font-size: 16.5px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--v2-tinta);
}

.grade p {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.6;
    color: #52657F;
}

.grade a { color: var(--v2-azul); font-weight: 600; }

/* Chamada de preço: faixa escura no fim da seção */
/* Duas colunas explícitas: com auto-fit minmax(300px) cabiam três nesta
   largura e, como só há dois filhos, sobrava uma coluna vazia à direita. */
.teaser-planos {
    margin-top: 56px;
    background: var(--v2-noite);
    border-radius: 18px;
    padding: clamp(28px, 4vw, 44px);
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: 40px;
    align-items: center;
}

.teaser-planos h3 {
    margin: 0 0 12px;
    font-size: 26px;
    line-height: 1.2;
    letter-spacing: -0.02em;
    font-weight: 700;
    color: #fff;
}

/* classe própria: o seletor de descendente vencia .teaser-preco na
   especificidade e achatava o valor */
.teaser-texto {
    margin: 0;
    font-size: 16.5px;
    line-height: 1.6;
    color: #C7D6EA;
    max-width: 36em;
}

.teaser-rotulo { font-size: 12.5px; color: #7386A0; margin-bottom: 4px; }

.teaser-preco {
    font-size: 38px;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: #fff;
    line-height: 1;
}

.teaser-preco span { font-size: 16px; font-weight: 500; color: #C7D6EA; }

.teaser-unidade { font-size: 12.5px; color: #7386A0; margin: 6px 0 20px; }

.teaser-planos a {
    display: inline-block;
    font-size: 15px;
    font-weight: 600;
    color: var(--v2-noite);
    background: #fff;
    padding: 15px 28px;
    border-radius: 10px;
    text-decoration: none;
}

.teaser-planos a:hover { background: #6FB0FF; color: var(--v2-noite); }

@media (max-width: 940px) {
    .tudo { padding: 60px 0; }
    .grade article { padding-right: 0; }
}

/* --------------------------- AIVA (faixa escura) ----------------------
   Medidas do sandbox; acento verde-água #58D6BE, que é a cor da Aiva. */
.aiva { background: #041129; }

.aiva .rotulo { color: #58D6BE; }
.aiva h2 { color: #fff; }
.aiva p { color: #C7D6EA; margin: 0 0 32px; }

.aiva .link-recurso { color: #58D6BE; }
.aiva .link-recurso:hover { color: #fff; text-decoration: none; }

.aiva .arte img {
    border-color: #163464;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
}

.aiva .legenda { color: #7386A0; }

.aiva-grade {
    margin-top: 64px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.aiva-grade article {
    background: #0B2350;
    border: 1px solid #163464;
    border-radius: 14px;
    padding: 24px 22px;
}

.aiva-grade h3 {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 10px;
    font-size: 16px;
    line-height: 1.3;
    font-weight: 600;
    color: #fff;
    letter-spacing: -0.01em;
}

.aiva-grade h3::before {
    content: "";
    flex: none;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #58D6BE;
}

.aiva-grade p {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.6;
    color: #C7D6EA;
}

/* ------------------ Passos da transcrição (sequência real) ------------
   Numerado porque a ordem carrega informação: escuta → transcreve →
   estrutura → o médico assina. Não é numeração decorativa. */
.passos {
    list-style: none;
    margin: 72px 0 0;
    padding: 44px 0 0;
    border-top: 1px solid var(--v2-linha);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 34px 32px;
}

.passos .n {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #E8F0FC;
    color: var(--v2-azul);
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 14px;
}

.passos h3 {
    margin: 0 0 8px;
    font-size: 16.5px;
    line-height: 1.3;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--v2-tinta);
}

.passos p {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--v2-tinta-2);
}

.passos strong { color: var(--v2-tinta); font-weight: 600; }

/* ---------------------- HERO: selo de linhagem ------------------------ */
.selo-marca {
    display: inline-flex;
    align-items: center;
    /* o texto vai num <span> único: em flex, cada trecho solto viraria
       item próprio e o gap abriria buraco em volta do <b> */
    gap: 10px;
    padding: 7px 14px;
    margin-bottom: 28px;
    border: 1px solid var(--v2-linha);
    border-radius: 999px;
    background: var(--v2-fundo);
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: #26374E;
}

.selo-marca::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #0A6B69;
    flex: none;
}

.selo-marca b { color: var(--v2-tinta); font-weight: 600; }

/* Quarta credencial em destaque: é a oferta, não um histórico */
.credenciais .destaque .num { color: var(--v2-azul); }

/* ------------------- HERO: faixa de segurança ------------------------- */
.faixa-seguranca {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 40px;
    margin-top: 72px;
    padding: 22px 0;
    border-top: 1px solid #EEF2F8;
}

.faixa-seguranca dt {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--v2-tinta-3);
}

.faixa-seguranca dd { margin: 0; font-size: 14px; color: #52657F; }

/* ------------- Arte do hero: imagem com cartão deslocado atrás -------- */
.hero-arte { position: relative; min-width: 0; margin: 0; }

.hero-arte::before {
    content: "";
    position: absolute;
    inset: auto -40px -28px 40px;
    height: 78%;
    background: var(--v2-fundo);
    border-radius: 20px;
}

.hero-arte img {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    border-radius: 14px;
    border: 1px solid var(--v2-linha);
    box-shadow: 0 24px 60px rgba(6, 24, 58, 0.14);
}

.dores { margin-top: 40px; }

@media (max-width: 560px) {
    .faixa-seguranca { gap: 10px 22px; }
}

/* --------------------------- DEPOIMENTOS ------------------------------
   Medidas do sandbox. minmax(320px) para dar exatamente 3 colunas em
   1240px: com 6 depoimentos fecham duas linhas cheias, sem cartão órfão. */
.depoimentos { background: var(--v2-fundo); padding: 104px 0; }

.dep-cabeca { max-width: 44em; margin-bottom: 52px; }

.depoimentos .rotulo {
    display: block;
    padding: 0;
    background: none;
    border-radius: 0;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--v2-azul);
    margin-bottom: 16px;
}

.depoimentos .titulo-secao {
    margin: 0;
    font-size: clamp(28px, 3.1vw, 42px);
    line-height: 1.12;
    letter-spacing: -0.025em;
    font-weight: 700;
    color: var(--v2-tinta);
}

.dep-grade {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 20px;
}

/* display:flex no figure venceria o [hidden]{display:none} do navegador,
   e os depoimentos extras apareceriam mesmo marcados como ocultos */
.dep-grade figure[hidden] { display: none; }

.dep-grade figure {
    margin: 0;
    background: var(--v2-papel);
    border: 1px solid var(--v2-linha);
    border-radius: 14px;
    padding: 32px 28px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.dep-grade blockquote {
    margin: 0;
    font-size: 15.5px;
    line-height: 1.7;
    color: #26374E;
}

.dep-grade figcaption {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 14px;
    padding-top: 20px;
    border-top: 1px solid #EEF2F8;
}

.dep-grade figcaption img {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
    background: #EEF2F8;
}

.dep-grade figcaption > div { min-width: 0; }

.dep-nome { display: block; font-size: 14.5px; font-weight: 600; color: var(--v2-tinta); }
.dep-cargo { display: block; font-size: 12.5px; color: var(--v2-tinta-3); line-height: 1.4; }

@media (max-width: 940px) {
    .depoimentos { padding: 60px 0; }
    .dep-cabeca { margin-bottom: 36px; }
}

/* -------------- Cartão da API Oficial do WhatsApp ---------------------
   Sai da coluna e vira faixa própria abaixo da agenda, como na referência.
   A telinha é a conversa em HTML do index2, não a versão escura do arquivo. */
.cartao-api {
    margin-top: 72px;
    background: var(--v2-papel);
    border: 1px solid var(--v2-linha);
    border-radius: 18px;
    padding: clamp(24px, 3.5vw, 40px);
    display: grid;
    /* duas colunas explícitas, pelo mesmo motivo do .teaser-planos */
    grid-template-columns: 1.15fr 1fr;
    gap: 56px;
    align-items: center;
}

.selo-api {
    display: inline-block;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #0A6B69;
    background: #E6F5F2;
    padding: 6px 12px;
    border-radius: 6px;
    margin-bottom: 20px;
}

.cartao-api h3 {
    margin: 0 0 16px;
    font-size: 26px;
    line-height: 1.2;
    letter-spacing: -0.02em;
    font-weight: 700;
    color: var(--v2-tinta);
}

.cartao-api p {
    margin: 0 0 20px;
    font-size: 16.5px;
    line-height: 1.65;
    color: var(--v2-tinta-2);
}

.cartao-api p strong { color: var(--v2-tinta); font-weight: 600; }
.cartao-api .nota { margin: 0; font-size: 13.5px; color: var(--v2-tinta-3); }

/* ---- Recorte de conversa do WhatsApp ----
   Mesmas cores e construção de bolha da página da Aiva (src/aiva/styles.css):
   fundo #efeae2, bolha recebida branca, enviada #d9fdd3, tique azul #53bdeb. */
.zap {
    width: 100%;
    max-width: 372px;
    margin: 0 auto;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 14px 34px rgba(6, 24, 58, 0.18);
    font-family: "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.zap-topo {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 12px;
    background: #008069;
    color: #fff;
}

.zap-av {
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #1d9e86;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
}

.zap-topo b { display: block; font-size: 14.5px; font-weight: 600; line-height: 1.2; }
.zap-topo span { font-size: 11.5px; color: rgba(255, 255, 255, 0.85); }

.zap-corpo {
    background: #efeae2;
    padding: 12px 9px 14px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.zap-dia {
    align-self: center;
    margin-bottom: 8px;
    padding: 4px 11px;
    border-radius: 8px;
    background: #fff;
    color: #54656f;
    font-size: 11px;
    font-weight: 600;
    box-shadow: 0 1px .5px rgba(11, 20, 26, .13);
}

.zap-msg { display: flex; }
.zap-msg.in  { justify-content: flex-start; }
.zap-msg.out { justify-content: flex-end; }

.zap-bolha {
    position: relative;
    max-width: 85%;
    border-radius: 8px;
    box-shadow: 0 1px .5px rgba(11, 20, 26, .13);
}

.zap-msg.in  .zap-bolha { background: #fff;     border-top-left-radius: 2px; }
.zap-msg.out .zap-bolha { background: #d9fdd3;  border-top-right-radius: 2px; }

.zap-msg.in .zap-bolha::before {
    content: "";
    position: absolute; top: 0; left: -7px;
    width: 8px; height: 12px; background: #fff;
    clip-path: polygon(100% 0, 0 0, 100% 100%);
}

.zap-msg.out .zap-bolha::before {
    content: "";
    position: absolute; top: 0; right: -7px;
    width: 8px; height: 12px; background: #d9fdd3;
    clip-path: polygon(0 0, 100% 0, 0 100%);
}

.zap-texto { padding: 6px 9px 5px; }
.zap-texto p { margin: 0 0 4px; font-size: 13.5px; line-height: 1.36; color: #111b21; }
.zap-texto p:last-of-type { margin-bottom: 0; }
.zap-texto strong { font-weight: 600; }

.zap-hora {
    float: right;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin: 4px 0 -2px 10px;
    font-size: 10.5px;
    color: #667781;
    line-height: 1;
}

.zap-hora svg { color: #53bdeb; }

/* Botões de resposta rápida da API de negócios do WhatsApp */
.zap-acoes { border-top: 1px solid #e9edef; }
.zap-acoes span {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 8px;
    color: #027eb5;
    font-size: 13px;
    font-weight: 500;
}
.zap-acoes span + span { border-top: 1px solid #e9edef; }

/* Botão "ver todos" dos depoimentos */
.dep-acao { margin-top: 28px; text-align: center; }

.dep-acao button {
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--v2-azul);
    background: var(--v2-papel);
    border: 1.5px solid var(--v2-linha);
    padding: 14px 28px;
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.16s ease;
}

.dep-acao button:hover { border-color: var(--v2-azul); }
.dep-acao button:focus-visible { outline: 3px solid var(--v2-azul); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
    .dep-acao button { transition: none; }
}

/* ---------------------- PERGUNTAS FREQUENTES --------------------------
   <details>/<summary> nativo: o abre-e-fecha vem do navegador, sem JS,
   e o teclado já funciona. O +/− é pseudo-elemento comandado por [open]. */
.faq-v2 { background: var(--v2-papel); padding: 104px 0; }
.faq-caixa { max-width: 900px; margin: 0 auto; padding: 0 24px; }

.faq-v2 h2 {
    margin: 0 0 16px;
    font-size: clamp(28px, 3.1vw, 42px);
    line-height: 1.12;
    letter-spacing: -0.025em;
    font-weight: 700;
    color: var(--v2-tinta);
}

.faq-lead { margin: 0 0 44px; font-size: 17.5px; line-height: 1.65; color: var(--v2-tinta-2); }

.faq-lista { border-top: 1px solid var(--v2-linha); }
.faq-lista details { border-bottom: 1px solid var(--v2-linha); }

.faq-lista summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 24px 0;
    cursor: pointer;
    list-style: none;
}

.faq-lista summary::-webkit-details-marker { display: none; }
.faq-lista summary:focus-visible { outline: 3px solid var(--v2-azul); outline-offset: 3px; }

.faq-q {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--v2-tinta);
}

.faq-sinal {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--v2-fundo);
    color: var(--v2-azul);
    font-size: 17px;
    font-weight: 600;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.faq-sinal::before { content: "+"; }
.faq-lista details[open] .faq-sinal::before { content: "–"; }

.faq-lista details p {
    margin: 0;
    padding: 0 0 26px;
    font-size: 16px;
    line-height: 1.7;
    color: var(--v2-tinta-2);
    max-width: 46em;
}

/* ------------------------------ CONTATO -------------------------------- */
.contato { background: var(--v2-noite); padding: 104px 0; }

.contato .interna {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 64px;
    align-items: start;
}

.contato h2 {
    margin: 0 0 20px;
    font-size: clamp(28px, 3.1vw, 42px);
    line-height: 1.12;
    letter-spacing: -0.025em;
    font-weight: 700;
    color: #fff;
}

.contato-lead { margin: 0 0 40px; font-size: 17.5px; line-height: 1.65; color: #C7D6EA; max-width: 30em; }

.contato-lista { margin: 0; border-top: 1px solid #163464; }
.contato-lista > div { padding: 20px 0; border-bottom: 1px solid #163464; }
.contato-lista > div:last-child { border-bottom: 0; }

.contato-lista dt {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--v2-tinta-3);
    margin-bottom: 7px;
}

.contato-lista dd { margin: 0; }

.contato-lista dd a {
    font-size: 20px;
    font-weight: 600;
    color: #fff;
    letter-spacing: -0.01em;
    text-decoration: none;
}

.contato-lista dd a:hover { color: #6FB0FF; }
.contato-lista .sem-link { font-size: 16px; color: #C7D6EA; }

.contato-cartao {
    min-width: 0;
    background: var(--v2-papel);
    border-radius: 18px;
    padding: 40px;
}

.contato-cartao h3 {
    margin: 0 0 26px;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--v2-tinta);
}

.contato-cartao form { display: flex; flex-direction: column; gap: 18px; }
.contato-cartao .form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 18px; }
.contato-cartao .form-group { display: flex; flex-direction: column; gap: 7px; margin: 0; }

.contato-cartao label { font-size: 13px; font-weight: 600; color: #26374E; }

.contato-cartao input,
.contato-cartao select,
.contato-cartao textarea {
    font-family: inherit;
    font-size: 15px;
    color: var(--v2-tinta);
    padding: 13px 14px;
    border: 1.5px solid var(--v2-linha);
    border-radius: 9px;
    outline: none;
    background: var(--v2-papel);
    width: 100%;
}

.contato-cartao textarea { resize: vertical; }

.contato-cartao input:focus,
.contato-cartao select:focus,
.contato-cartao textarea:focus { border-color: var(--v2-azul); }

.contato-cartao .form-submit {
    margin-top: 6px;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    background: var(--v2-azul);
    border: 0;
    padding: 17px 24px;
    border-radius: 10px;
    cursor: pointer;
    width: 100%;
}

.contato-cartao .form-submit:hover { background: var(--v2-azul-forte); }
.contato-cartao .form-submit:disabled { opacity: .6; cursor: default; }

.contato-nota { margin: 18px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--v2-tinta-3); }

@media (max-width: 940px) {
    .faq-v2, .contato { padding: 60px 0; }
    .contato-cartao { padding: 28px 24px; }
}

@media (max-width: 860px) {
    .teaser-planos,
    .cartao-api { grid-template-columns: 1fr; }
}

/* A barra é sticky, não fixa: o hero não precisa mais compensar a altura */
.v2-hero { padding-top: 76px; }

/* As âncoras do menu param abaixo da barra grudada */
.v2 [id] { scroll-margin-top: 88px; }