/* =========================================================================
   Home da Avie — a conversa como página

   Mesmo método da variante C do site da Dra. Ingrid, aplicado a outro assunto.
   Lá, todas as formas da página vêm do consultório de verdade: o arco é a porta
   entre as salas, a onda é o lambril iluminado, as listras são a parede. Nada
   é decoração solta — cada forma tem um referente real.

   O "lugar" da Avie não é uma sala: é a conversa. Então as formas vêm de lá:

   - BALÃO: o raio assimétrico (três cantos redondos, um vivo) é a silhueta de
     toda peça de conteúdo — cartão, ladrilho, print, frame. É o arco da C.
   - FIO: uma linha que desce ligando as seções, como o fio de uma thread. É a
     onda: o que separa e ao mesmo tempo costura. Ela se desenha na rolagem.
   - COR POR ASSUNTO: seis tons na família do mural da doutora (rosa, pêssego,
     ouro, sálvia, céu, lilás). O mesmo assunto tem o mesmo tom no ladrilho do
     hero e no cartão de #oferta — é o que liga as seções sem repetir texto.
   - RETICÊNCIAS: os três pontos de "digitando", na encenação da prova.
   - TRILHOS: o que puder rolar de lado, rola de lado, com régua de progresso
     própria (mesma decisão da C: página curta na vertical).

   Carregada DEPOIS de landing.css, que continua cuidando da maquinaria
   (header, menu mobile, botões, FAQ, consentimento, flutuante do WhatsApp).
   Esta folha troca o desenho das seções da home; não duplica maquinaria.

   Movimento: o bloco `prefers-reduced-motion` no fim do arquivo desliga tudo.
   ========================================================================= */

.landing-home {
    /* Tons derivados da paleta oficial (docs/codex/branding.md). Nomes novos e
       não reaproveitados dos --home-*: ali eles já significam outra coisa e
       renomear em silêncio quebraria as seções que landing.css ainda desenha. */
    --hc-cream: #fdf8f3;
    --hc-nude: #f5ece4;
    --hc-nude-deep: #ecdcd2;
    --hc-line: rgba(53, 26, 36, 0.12);
    --hc-line-strong: rgba(53, 26, 36, 0.2);
    --hc-wine: #6d3746;
    --hc-bordo: #351a24;
    --hc-rose: #c9a7a0;
    --hc-rose-soft: #f3e6e2;
    --hc-gold: #b9985a;
    --hc-gold-soft: #f5eddc;
    --hc-ink: #351a24;
    --hc-text: #5a4048;
    /* Mínimo AA (4.5:1) sobre o creme para os textos de apoio pequenos. */
    --hc-muted: #75555c;
    --hc-shell: min(1180px, calc(100vw - 40px));
    --hc-check: #12813f;
}

/* ---- Formas -------------------------------------------------------------- */

/* O FIO. Linha de 1px que desce pelo centro da seção ligando um bloco ao
   próximo. Sozinha ela seria só um traço; o ponto no fim é o que faz ler como
   thread. Decorativa em todo lugar onde aparece. */
.landing-home .hc-thread {
    position: relative;
    height: clamp(38px, 6vw, 64px);
}

.landing-home .hc-thread::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 10px;
    left: 50%;
    width: 1px;
    background: linear-gradient(180deg, transparent, var(--hc-line-strong));
}

.landing-home .hc-thread::after {
    content: "";
    position: absolute;
    bottom: 4px;
    left: 50%;
    width: 7px;
    height: 7px;
    margin-left: -3px;
    border-radius: 999px;
    background: var(--hc-gold);
    box-shadow: 0 0 0 5px rgba(185, 152, 90, 0.16);
}

/* O TIQUE (partials/home/_check.html) marca o selo "incluído no plano" das
   seções de site e relatórios. Não marca número: a página vende produto. */

/* ---- Ritmo das seções ---------------------------------------------------- */

.landing-home .hc-section {
    width: var(--hc-shell);
    margin-inline: auto;
    padding-block: clamp(48px, 7vw, 92px);
    scroll-margin-top: 88px;
}

.landing-home .hc-section + .hc-section {
    border-top: 1px solid var(--hc-line);
}

/* Faixa que sangra até a borda da tela, para as seções que precisam de fundo
   próprio (o painel, o site, os relatórios). O padding interno repete o shell
   para o conteúdo continuar alinhado com o resto da página. */
.landing-home .hc-band {
    width: 100%;
    padding-inline: max(20px, calc((100vw - 1180px) / 2));
    padding-block: clamp(48px, 7vw, 92px);
    scroll-margin-top: 88px;
    background:
        radial-gradient(900px 420px at 88% 0%, rgba(201, 167, 160, 0.22), transparent 70%),
        linear-gradient(180deg, var(--hc-cream), var(--hc-nude));
    border-block: 1px solid var(--hc-line);
}

.landing-home .hc-head {
    max-width: 40rem;
}

.landing-home .hc-head.is-wide {
    max-width: 52rem;
}

.landing-home .hc-eyebrow {
    margin: 0 0 10px;
    color: var(--hc-wine);
    font-family: var(--font-ui);
    font-size: 0.78rem;
    font-weight: 760;
    letter-spacing: 0.14em;
    text-transform: lowercase;
}

/* O título é uma frase inteira, com ponto final — mesma escolha editorial da
   C. Manchete sem ponto lê como slogan; frase com ponto lê como alguém
   falando. */
.landing-home .hc-title {
    margin: 0;
    max-width: 22ch;
    color: var(--hc-ink);
    font-family: var(--font-display);
    font-size: clamp(1.72rem, 3.6vw, 2.6rem);
    font-weight: 600;
    line-height: 1.14;
    letter-spacing: -0.015em;
}

.landing-home .hc-head.is-wide .hc-title {
    max-width: 28ch;
}

.landing-home .hc-body {
    margin: 14px 0 0;
    max-width: 46ch;
    color: var(--hc-text);
    font-size: 1.03rem;
    line-height: 1.62;
}

.landing-home .hc-note {
    margin: 10px 0 0;
    color: var(--hc-muted);
    font-size: 0.86rem;
    line-height: 1.5;
}

/* ---- Hero ---------------------------------------------------------------- */

.landing-home .hc-hero {
    position: relative;
    width: 100%;
    padding-inline: max(20px, calc((100vw - 1180px) / 2));
    padding-block: clamp(34px, 5vw, 68px) clamp(20px, 3vw, 36px);
    overflow: hidden;
    background:
        radial-gradient(1100px 620px at 84% -10%, rgba(201, 167, 160, 0.34), transparent 66%),
        radial-gradient(760px 520px at 2% 18%, rgba(185, 152, 90, 0.12), transparent 68%),
        linear-gradient(180deg, var(--hc-nude) 0%, var(--hc-cream) 100%);
}

.landing-home .hc-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(24px, 4vw, 56px);
    align-items: center;
}

/* 24ch e não 17ch: o H1 passou a carregar a categoria ("secretária de IA para
   o WhatsApp da sua clínica") e o pacote ("gestão, agenda e site inclusos"). É
   mais longo de propósito — quem chega precisa saber o que é o produto sem ler
   duas vezes — então a medida de linha e o corpo acompanham. */
.landing-home .hc-hero h1 {
    margin: 0;
    max-width: 24ch;
    color: var(--hc-ink);
    font-family: var(--font-display);
    font-size: clamp(1.9rem, 3.8vw, 2.85rem);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -0.022em;
}

.landing-home .hc-hero-lead {
    margin: 16px 0 0;
    max-width: 44ch;
    color: var(--hc-text);
    font-size: clamp(1rem, 1.4vw, 1.1rem);
    line-height: 1.6;
}

.landing-home .hc-hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 18px;
    margin-top: 24px;
}

/* Grade de cartões: usada pelos limites (#seguranca). `auto-fit` com piso de
   240px devolve 4 colunas no desktop e 1 no celular sem media query. */
.landing-home .hc-measured {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
    margin: 30px 0 0;
    padding: 0;
    list-style: none;
}

/* ---- Ladrilhos do pacote (hero) -------------------------------------------
   Cinco quadrados com ícone grande em cima e rótulo embaixo. A versão pastilha
   (ícone pequeno + texto na mesma linha) ficava solta: lia como etiqueta
   decorativa, não como "estas são as cinco coisas que você recebe".

   Cada um tem um tom próprio, tirados da mesma família do mural do site da
   doutora (rosa, pêssego, ouro, sálvia, céu, lilás). Cor aqui não é enfeite: é
   o que faz cinco itens iguais virarem cinco coisas distintas num relance. */
.landing-home .hc-tiles {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    margin: 26px 0 0;
    padding: 0;
    list-style: none;
}

.landing-home .hc-tiles li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    padding: 14px 6px 12px;
    border: 1px solid var(--hc-line);
    border-radius: 16px 16px 16px 5px;
    background: rgba(255, 255, 255, 0.72);
    color: var(--hc-ink);
    font-size: 0.76rem;
    font-weight: 660;
    line-height: 1.25;
    text-align: center;
    transition: transform 260ms cubic-bezier(0.16, 0.84, 0.44, 1),
                box-shadow 260ms ease, border-color 260ms ease;
}

.landing-home .hc-tile-ico {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 13px 13px 13px 4px;
    background: var(--tile-bg, var(--hc-rose-soft));
    color: var(--tile-fg, var(--hc-wine));
    transition: transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.landing-home .hc-tiles svg {
    width: 22px;
    height: 22px;
}

.landing-home .hc-tiles li:hover,
.landing-home .hc-tiles li:focus-within {
    transform: translateY(-3px);
    border-color: var(--tile-fg, var(--hc-rose));
    box-shadow: 0 14px 28px rgba(53, 26, 36, 0.12);
}

.landing-home .hc-tiles li:hover .hc-tile-ico {
    transform: scale(1.12) rotate(-4deg);
}

/* Os seis tons. Também usados nos cartões de #oferta (.hc-card.is-*), para o
   mesmo assunto ter a mesma cor nas duas seções — é o que liga a tira do hero
   ao trilho de baixo sem repetir texto. */
.landing-home .is-wa { --tile-bg: #dff1e4; --tile-fg: #12813f; }
.landing-home .is-lilac { --tile-bg: #ece4f4; --tile-fg: #6b4f8a; }
.landing-home .is-sky { --tile-bg: #dfeaf6; --tile-fg: #3c6494; }
.landing-home .is-gold { --tile-bg: var(--hc-gold-soft); --tile-fg: #8a6a2a; }
.landing-home .is-rose { --tile-bg: #f8e2e8; --tile-fg: #a84b66; }
.landing-home .is-sage { --tile-bg: #e2eddd; --tile-fg: #4d6f45; }

/* ---- Prova compacta (hero) ------------------------------------------------
   Três balões e o selo de velocidade. A versão anterior reproduzia meia
   conversa e ocupava a coluna inteira, parecendo um bloco perdido ao lado do
   texto — a conversa completa já vive em #conversa, aqui basta o argumento:
   pergunta chega, resposta volta, consulta marcada.

   Os balões ENTRAM EM SEQUÊNCIA no load (--d por balão), com os pontinhos de
   "digitando" no intervalo. É a única encenação da página e ela conta
   exatamente o que o produto faz. */
.landing-home .hc-proof {
    margin: 0;
    padding: 16px 18px 14px;
    border: 1px solid var(--hc-line);
    border-radius: 24px 24px 24px 7px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 253, 248, 0.9));
    box-shadow: 0 22px 54px rgba(53, 26, 36, 0.13);
}

.landing-home .hc-proof-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--hc-line);
    color: var(--hc-muted);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.landing-home .hc-msg {
    max-width: 86%;
    margin: 0 0 8px;
    padding: 10px 13px;
    border-radius: 16px 16px 16px 5px;
    background: var(--hc-nude);
    color: var(--hc-ink);
    font-size: 0.91rem;
    line-height: 1.42;
}

.landing-home .hc-msg.is-avie {
    margin-left: auto;
    border-radius: 16px 16px 5px 16px;
    background: linear-gradient(140deg, var(--hc-wine), #4f2632);
    color: #fff;
}

.landing-home .hc-msg-time {
    display: block;
    margin-top: 4px;
    opacity: 0.66;
    font-size: 0.68rem;
    font-weight: 600;
}

/* Pontinhos de "digitando" entre a pergunta e a resposta. */
.landing-home .hc-dots {
    display: flex;
    gap: 4px;
    width: max-content;
    margin: 0 0 8px;
    padding: 11px 14px;
    border-radius: 16px 16px 16px 5px;
    background: var(--hc-nude);
}

.landing-home .hc-dots i {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--hc-rose);
    animation: hc-typing 1.3s ease-in-out infinite;
}

.landing-home .hc-dots i:nth-child(2) { animation-delay: 0.16s; }
.landing-home .hc-dots i:nth-child(3) { animation-delay: 0.32s; }

@keyframes hc-typing {
    0%, 60%, 100% { opacity: 0.28; transform: translateY(0); }
    30% { opacity: 1; transform: translateY(-3px); }
}

/* Selo de velocidade: o único número do primeiro fold, no pé do frame, como
   legenda natural do que os balões acabaram de mostrar. */
.landing-home .hc-speed {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 12px 0 0;
    padding-top: 11px;
    border-top: 1px solid var(--hc-line);
    color: var(--hc-text);
    font-size: 0.84rem;
    line-height: 1.4;
}

.landing-home .hc-speed svg {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    margin-top: 1px;
    color: var(--hc-gold);
}

.landing-home .hc-speed strong {
    color: var(--hc-ink);
}

/* Nota de rodapé: numerinho que leva para #notas, no fim da página. É o que
   permite manter a procedência à mão sem gastar linha de argumento com ela. */
.landing-home .hc-fn {
    display: inline-block;
    margin-left: 2px;
    padding: 0 3px;
    border-radius: 4px;
    background: var(--hc-nude-deep);
    color: var(--hc-wine);
    font-size: 0.66em;
    font-weight: 800;
    line-height: 1.6;
    text-decoration: none;
    vertical-align: super;
    transition: background 200ms ease, color 200ms ease;
}

.landing-home .hc-fn:hover,
.landing-home .hc-fn:focus-visible {
    background: var(--hc-gold);
    color: #fff;
}

/* ---- Trilho horizontal --------------------------------------------------- */

/* Mesma decisão da C: o que puder rolar de lado rola de lado, com régua de
   progresso própria. A régua não é enfeite — sem ela, num trilho de 4 itens a
   pessoa não sabe que existe um quarto. */
.landing-home .hc-rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(262px, 1fr);
    gap: 14px;
    margin-top: 28px;
    padding-bottom: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    scrollbar-color: var(--hc-rose) transparent;
    overscroll-behavior-x: contain;
}

.landing-home .hc-rail > * {
    scroll-snap-align: start;
}

.landing-home .hc-rail::-webkit-scrollbar {
    height: 6px;
}

.landing-home .hc-rail::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: var(--hc-rose);
}

.landing-home .hc-rail::-webkit-scrollbar-track {
    border-radius: 999px;
    background: var(--hc-nude-deep);
}

.landing-home .hc-rail-hint {
    margin: 6px 0 0;
    color: var(--hc-muted);
    font-size: 0.8rem;
}

@media (min-width: 981px) {
    .landing-home .hc-rail-hint {
        display: none;
    }
}

/* ---- Cartões de conteúdo ------------------------------------------------- */

.landing-home .hc-card {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 22px;
    border: 1px solid var(--hc-line);
    border-radius: 22px 22px 22px 6px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(53, 26, 36, 0.06);
}

.landing-home .hc-card h3 {
    margin: 0;
    color: var(--hc-ink);
    font-family: var(--font-display);
    font-size: 1.14rem;
    font-weight: 600;
    line-height: 1.24;
}

.landing-home .hc-card p {
    margin: 0;
    color: var(--hc-text);
    font-size: 0.96rem;
    line-height: 1.55;
}

.landing-home .hc-card-mark {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 12px 12px 12px 4px;
    background: var(--hc-rose-soft);
    color: var(--hc-wine);
}

.landing-home .hc-card-mark svg {
    width: 20px;
    height: 20px;
}

/* ---- O relógio do dia ---------------------------------------------------- */

/* Quatro horários reais de um dia de recepção. O contraste "sem a Avie / com a
   Avie" mora dentro do próprio cartão porque separá-lo em duas colunas obriga
   a pessoa a comparar de cabeça — e no celular as colunas viram duas listas
   que ninguém cruza. */
.landing-home .hc-clock-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 22px;
    border: 1px solid var(--hc-line);
    border-radius: 22px 22px 22px 6px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(53, 26, 36, 0.06);
}

.landing-home .hc-clock-hour {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    color: var(--hc-wine);
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.landing-home .hc-clock-hour em {
    color: var(--hc-muted);
    font-family: var(--font-ui);
    font-size: 0.76rem;
    font-style: normal;
    font-weight: 660;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.landing-home .hc-clock-msg {
    margin: 0;
    padding: 12px 14px;
    border-radius: 16px 16px 16px 4px;
    background: var(--hc-nude);
    color: var(--hc-ink);
    font-size: 0.95rem;
    line-height: 1.45;
}

.landing-home .hc-clock-rows {
    display: grid;
    gap: 8px;
    margin: 0;
}

.landing-home .hc-clock-rows div {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    align-items: start;
}

.landing-home .hc-clock-rows dt {
    color: var(--hc-muted);
    font-size: 0.74rem;
    font-weight: 720;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
    padding-top: 2px;
}

.landing-home .hc-clock-rows dd {
    margin: 0;
    color: var(--hc-text);
    font-size: 0.94rem;
    line-height: 1.5;
}

.landing-home .hc-clock-rows .is-avie dt {
    color: var(--hc-check);
}

.landing-home .hc-clock-rows .is-avie dd {
    color: var(--hc-ink);
    font-weight: 600;
}

/* ---- O portal (mock) ------------------------------------------------------
   Desenho próprio, na paleta e nas formas desta folha. O mock antigo
   (.product-window, da landing.css) era de outra época visual e no celular
   virava uma janelinha apertada com três colunas espremidas.

   Aqui as colunas DESLIZAM de lado no celular em vez de encolher: kanban com
   coluna de 90px não é kanban, é confete. */
.landing-home .hc-portal {
    margin: 30px 0 0;
}

.landing-home .hc-portal-win {
    border: 1px solid var(--hc-line);
    border-radius: 20px 20px 20px 6px;
    background: #fff;
    box-shadow: 0 26px 60px rgba(53, 26, 36, 0.14);
    overflow: hidden;
}

.landing-home .hc-portal-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 11px 16px;
    border-bottom: 1px solid var(--hc-line);
    background: var(--hc-nude);
}

.landing-home .hc-portal-bar i {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: var(--hc-rose);
    opacity: 0.75;
}

.landing-home .hc-portal-bar span {
    margin-left: 8px;
    color: var(--hc-muted);
    font-size: 0.78rem;
    font-weight: 700;
}

.landing-home .hc-portal-tabs {
    display: flex;
    gap: 18px;
    padding: 11px 16px 0;
    overflow-x: auto;
    scrollbar-width: none;
    color: var(--hc-muted);
    font-size: 0.8rem;
    font-weight: 640;
    white-space: nowrap;
}

.landing-home .hc-portal-tabs::-webkit-scrollbar { display: none; }

.landing-home .hc-portal-tabs b {
    position: relative;
    padding-bottom: 9px;
    color: var(--hc-wine);
    font-weight: 780;
}

.landing-home .hc-portal-tabs b::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    border-radius: 2px;
    background: var(--hc-wine);
}

.landing-home .hc-portal-board {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(210px, 1fr);
    gap: 12px;
    padding: 16px;
    border-top: 1px solid var(--hc-line);
    background: linear-gradient(180deg, var(--hc-cream), #fff);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--hc-rose) transparent;
}

.landing-home .hc-portal-col {
    scroll-snap-align: start;
    min-width: 0;
}

.landing-home .hc-portal-col h4 {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 9px;
    color: var(--hc-muted);
    font-family: var(--font-ui);
    font-size: 0.73rem;
    font-weight: 780;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.landing-home .hc-portal-col h4 em {
    display: grid;
    place-items: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--hc-nude-deep);
    color: var(--hc-wine);
    font-size: 0.7rem;
    font-style: normal;
    font-weight: 800;
}

.landing-home .hc-portal-card {
    display: grid;
    gap: 3px;
    margin-bottom: 9px;
    padding: 11px 12px;
    border: 1px solid var(--hc-line);
    border-left: 3px solid var(--hc-rose);
    border-radius: 12px 12px 12px 4px;
    background: #fff;
    box-shadow: 0 6px 16px rgba(53, 26, 36, 0.05);
}

.landing-home .hc-portal-card.is-warm { border-left-color: var(--hc-gold); }
.landing-home .hc-portal-card.is-done { border-left-color: var(--hc-check); }

.landing-home .hc-portal-card strong {
    color: var(--hc-ink);
    font-size: 0.87rem;
    font-weight: 720;
}

.landing-home .hc-portal-card span {
    color: var(--hc-text);
    font-size: 0.82rem;
    line-height: 1.35;
}

.landing-home .hc-portal-card small {
    color: var(--hc-muted);
    font-size: 0.72rem;
}

.landing-home .hc-portal figcaption {
    margin-top: 10px;
    color: var(--hc-muted);
    font-size: 0.8rem;
}

/* ---- Blocos com imagem (site, relatórios) -------------------------------- */

.landing-home .hc-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
    gap: clamp(24px, 4vw, 54px);
    align-items: center;
}

.landing-home .hc-split.is-flipped > :first-child {
    order: 2;
}

.landing-home .hc-shot {
    position: relative;
    margin: 0;
}

.landing-home .hc-shot img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 26px 26px 26px 6px;
    box-shadow: 0 26px 60px rgba(53, 26, 36, 0.2);
}

.landing-home .hc-shot figcaption {
    margin-top: 10px;
    color: var(--hc-muted);
    font-size: 0.82rem;
    line-height: 1.45;
}

/* Frame do transcript. `max-width` e não coluna livre: acima de ~520px o balão
   de mensagem deixa de ler como mensagem e vira parágrafo em caixa — a peça
   perde exatamente a propriedade que faz dela evidência. */
.landing-home .hc-chat-frame {
    width: 100%;
    max-width: 520px;
    margin-inline: auto;
}

/* Selo "incluído no plano": a informação que decide a leitura da seção. Sem
   ele, um bloco sobre site parece upsell e a pessoa pula. */
.landing-home .hc-included {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 12px;
    padding: 6px 13px 6px 10px;
    border: 1px solid rgba(185, 152, 90, 0.45);
    border-radius: 999px;
    background: var(--hc-gold-soft);
    color: #6b5423;
    font-size: 0.79rem;
    font-weight: 740;
    letter-spacing: 0.02em;
}

.landing-home .hc-included svg {
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
}

/* ---- Relatório: amostra ---------------------------------------------------
   Mock do relatório em HTML e não imagem: uma imagem de tabela fica ilegível
   no celular e não dá para ler em leitor de tela. Números ilustrativos, ditos
   como tal na legenda. */
.landing-home .hc-report {
    padding: 20px;
    border: 1px solid var(--hc-line);
    border-radius: 22px 22px 22px 6px;
    background: #fff;
    box-shadow: 0 22px 54px rgba(53, 26, 36, 0.12);
}

.landing-home .hc-report-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--hc-line);
}

.landing-home .hc-report-head strong {
    color: var(--hc-ink);
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 600;
}

.landing-home .hc-report-head span {
    color: var(--hc-muted);
    font-size: 0.78rem;
    font-weight: 620;
}

.landing-home .hc-report-rows {
    display: grid;
    gap: 12px;
    margin: 14px 0 0;
}

.landing-home .hc-report-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 12px;
    align-items: baseline;
}

.landing-home .hc-report-row dt {
    color: var(--hc-text);
    font-size: 0.92rem;
}

.landing-home .hc-report-row dd {
    margin: 0;
    color: var(--hc-ink);
    font-family: var(--font-display);
    font-size: 1.16rem;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.landing-home .hc-report-bar {
    grid-column: 1 / -1;
    height: 5px;
    border-radius: 999px;
    background: var(--hc-nude-deep);
    overflow: hidden;
}

.landing-home .hc-report-bar i {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--hc-wine), var(--hc-rose));
}

.landing-home .hc-report-foot {
    margin: 14px 0 0;
    padding-top: 12px;
    border-top: 1px solid var(--hc-line);
    color: var(--hc-muted);
    font-size: 0.8rem;
    line-height: 1.5;
}

/* ---- Passos da implantação ----------------------------------------------- */

.landing-home .hc-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 14px;
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
    counter-reset: hc-step;
}

.landing-home .hc-step {
    position: relative;
    padding: 22px 22px 20px;
    border: 1px solid var(--hc-line);
    border-radius: 22px 22px 22px 6px;
    background: rgba(255, 255, 255, 0.82);
}

.landing-home .hc-step::before {
    counter-increment: hc-step;
    content: counter(hc-step, decimal-leading-zero);
    display: block;
    margin-bottom: 10px;
    color: var(--hc-gold);
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1;
}

.landing-home .hc-step h3 {
    margin: 0 0 6px;
    color: var(--hc-ink);
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 600;
}

.landing-home .hc-step p {
    margin: 0;
    color: var(--hc-text);
    font-size: 0.95rem;
    line-height: 1.55;
}

/* ---- Citação de pesquisa de terceiro -------------------------------------
   Deliberadamente discreto e SEM o duplo tique: número de fora não tem a mesma
   procedência de número medido aqui. Misturar os dois no mesmo destaque foi o
   defeito da home anterior — ela abria com 391%/60x/80% de estudos de mercado
   e só depois mostrava o que a Avie faz de fato. */
.landing-home .hc-cite {
    margin: 26px 0 0;
    padding: 16px 18px;
    border-left: 3px solid var(--hc-rose);
    border-radius: 0 14px 14px 0;
    background: rgba(255, 255, 255, 0.6);
    color: var(--hc-text);
    font-size: 0.94rem;
    line-height: 1.6;
}

.landing-home .hc-cite a {
    color: var(--hc-wine);
    font-weight: 640;
}

/* ---- FAQ ------------------------------------------------------------------
   26 perguntas fechadas ainda eram o bloco mais alto da página (2.100px no
   desktop) porque cada linha vinha com o respiro dos cartões. Aqui a linha é
   uma linha: seta, pergunta, divisória. O conteúdo continua no DOM (é o que o
   Google e as IAs de busca leem do FAQPage), só ocupa metade do espaço. */
.landing-home .faq-list details {
    border-bottom: 1px solid var(--hc-line);
}

.landing-home .faq-list summary {
    padding: 13px 30px 13px 0;
    color: var(--hc-ink);
    font-size: 0.97rem;
    font-weight: 620;
    line-height: 1.4;
    transition: color 180ms ease;
}

.landing-home .faq-list summary:hover {
    color: var(--hc-wine);
}

.landing-home .faq-list details[open] summary {
    color: var(--hc-wine);
}

.landing-home .faq-list details > p {
    margin: 0;
    padding: 0 30px 15px 0;
    color: var(--hc-text);
    font-size: 0.93rem;
    line-height: 1.6;
}

.landing-home .faq-group-label {
    margin: 30px 0 4px;
    color: var(--hc-wine);
    font-family: var(--font-ui);
    font-size: 0.74rem;
    font-weight: 780;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* ---- Movimento ------------------------------------------------------------
   Três camadas, nesta ordem de importância:

   1. ENTRADA DO HERO (.hc-in) — CSS puro, sem JS. O primeiro fold não pode
      depender de script: se o JS demora, o conteúdo tem que estar lá. Cada
      elemento declara seu próprio atraso em `--d`, então a cascata é escrita no
      template, ao lado do conteúdo, e não numa tabela de nth-child aqui.
   2. CASCATA DOS TRILHOS (--i) — os cartões de um trilho entram em sequência
      quando a seção aparece. Reaproveita o `.reveal`/`.is-visible` que a
      landing.css e a landing.js já operam; só acrescenta o atraso por índice.
   3. LIGADAS À ROLAGEM — o fio que se desenha e a régua dos trilhos, com
      `animation-timeline`/`scroll-timeline`. Onde não houver suporte, o fio
      nasce inteiro e a régua não aparece: degradação honesta, nada quebra.

   Tudo desligado em `prefers-reduced-motion` no fim do arquivo. */

.js-enabled .landing-home .hc-in {
    animation: hc-rise 720ms cubic-bezier(0.16, 0.84, 0.44, 1) both;
    animation-delay: var(--d, 0ms);
}

@keyframes hc-rise {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: none; }
}

/* Balões da prova: entram com um leve "pop" vindo do lado de quem fala. */
.js-enabled .landing-home .hc-proof .hc-msg,
.js-enabled .landing-home .hc-proof .hc-dots,
.js-enabled .landing-home .hc-proof .hc-speed {
    animation: hc-pop-left 520ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
    animation-delay: var(--d, 0ms);
}

.js-enabled .landing-home .hc-proof .hc-msg.is-avie {
    animation-name: hc-pop-right;
}

@keyframes hc-pop-left {
    from { opacity: 0; transform: translate(-10px, 8px) scale(0.94); }
    to { opacity: 1; transform: none; }
}

@keyframes hc-pop-right {
    from { opacity: 0; transform: translate(10px, 8px) scale(0.94); }
    to { opacity: 1; transform: none; }
}

/* Cascata por índice dentro dos trilhos e das grades de cartão. `--i` mora no
   template (style="--i: 2"), do lado do cartão que ele atrasa. */
.js-enabled .landing-home .hc-rail .reveal.is-visible,
.js-enabled .landing-home .hc-measured .reveal.is-visible,
.js-enabled .landing-home .hc-steps .reveal.is-visible {
    animation-delay: calc(var(--i, 0) * 80ms);
}

/* Sem --i explícito (seções que não numeram), o nth-child cobre. */
.js-enabled .landing-home :is(.hc-measured, .hc-steps) > .reveal:nth-child(2).is-visible { animation-delay: 80ms; }
.js-enabled .landing-home :is(.hc-measured, .hc-steps) > .reveal:nth-child(3).is-visible { animation-delay: 160ms; }
.js-enabled .landing-home :is(.hc-measured, .hc-steps) > .reveal:nth-child(4).is-visible { animation-delay: 240ms; }

/* Cartões, ladrilhos e prints reagem ao ponteiro. Transform em vez de
   box-shadow sozinho: o navegador anima transform no compositor, sem repintar. */
.landing-home .hc-card,
.landing-home .hc-clock-card,
.landing-home .hc-step {
    transition: transform 280ms cubic-bezier(0.16, 0.84, 0.44, 1),
                box-shadow 280ms ease, border-color 280ms ease;
}

.landing-home .hc-card:hover,
.landing-home .hc-clock-card:hover,
.landing-home .hc-step:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 44px rgba(53, 26, 36, 0.13);
    border-color: var(--tile-fg, var(--hc-rose));
}

/* O ícone do cartão herda o tom do assunto (mesmas classes is-* dos ladrilhos)
   e ganha vida no hover, ligando o trilho de #oferta à tira do hero. */
.landing-home .hc-card.is-wa .hc-card-mark,
.landing-home .hc-card.is-lilac .hc-card-mark,
.landing-home .hc-card.is-sky .hc-card-mark,
.landing-home .hc-card.is-gold .hc-card-mark,
.landing-home .hc-card.is-rose .hc-card-mark,
.landing-home .hc-card.is-sage .hc-card-mark {
    background: var(--tile-bg);
    color: var(--tile-fg);
}

.landing-home .hc-card-mark {
    transition: transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.landing-home .hc-card:hover .hc-card-mark {
    transform: scale(1.1) rotate(-4deg);
}

/* O print do site levanta de leve — é a peça que a pessoa quer clicar. */
.landing-home .hc-shot img {
    transition: transform 420ms cubic-bezier(0.16, 0.84, 0.44, 1), box-shadow 420ms ease;
}

.landing-home .hc-shot:hover img {
    transform: translateY(-5px) scale(1.008);
    box-shadow: 0 34px 70px rgba(53, 26, 36, 0.26);
}

/* Barras do relatório: crescem de 0 até --w quando a seção entra na tela.
   `--w` no template mantém o valor junto do número que ele representa. */
.landing-home .hc-report-bar i { width: var(--w, 0%); }

.js-enabled .landing-home .hc-report.is-visible .hc-report-bar i {
    animation: hc-grow 900ms cubic-bezier(0.16, 0.84, 0.44, 1) both;
    animation-delay: calc(220ms + var(--i, 0) * 110ms);
}

@keyframes hc-grow {
    from { width: 0; }
    to { width: var(--w, 0%); }
}

/* --- Ligadas à rolagem ---------------------------------------------------- */

/* O fio se desenha conforme entra na tela. `scaleY` a partir do topo, guiado
   por `view()`: sem JS, sem listener de scroll. */
@supports (animation-timeline: view()) {
    .landing-home .hc-thread::before {
        transform-origin: top;
        animation: hc-draw linear both;
        animation-timeline: view();
        animation-range: entry 10% cover 45%;
    }

    @keyframes hc-draw {
        from { transform: scaleY(0); }
        to { transform: scaleY(1); }
    }

    /* Régua de progresso do trilho — a mesma ideia da variante C: sem ela, num
       trilho de seis a pessoa não sabe que existe um sexto. Aparece só onde há
       rolagem horizontal de fato (scroll-timeline não avança se não há
       transbordo, então a barra fica parada em 0 e o ::after some). */
    .landing-home .hc-rail {
        scroll-timeline: --hcrail x;
    }

    .landing-home .hc-rail + .hc-rail-hint {
        position: relative;
        padding-top: 12px;
    }

    .landing-home .hc-rail + .hc-rail-hint::before,
    .landing-home .hc-rail + .hc-rail-hint::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        height: 3px;
        border-radius: 999px;
    }

    .landing-home .hc-rail + .hc-rail-hint::before {
        right: 0;
        background: var(--hc-nude-deep);
    }

    .landing-home .hc-rail + .hc-rail-hint::after {
        width: 28%;
        background: var(--hc-wine);
        animation: hc-rail-progress linear both;
        animation-timeline: --hcrail;
    }

    @keyframes hc-rail-progress {
        from { transform: translateX(0); }
        to { transform: translateX(257%); }
    }
}

/* ---- Responsivo ---------------------------------------------------------- */

@media (max-width: 980px) {
    .landing-home .hc-hero-inner,
    .landing-home .hc-split {
        grid-template-columns: minmax(0, 1fr);
    }

    /* No celular a prova vem DEPOIS do pedido: a pessoa lê a promessa, vê o
       botão e só então recebe a evidência. Invertido, o hero abre com um
       print e o CTA cai abaixo da dobra. */
    .landing-home .hc-split.is-flipped > :first-child {
        order: 0;
    }

    .landing-home .hc-hero h1,
    .landing-home .hc-title {
        max-width: none;
    }
}

/* Ladrilhos: 5 numa fila só cabe no desktop. Abaixo disso vira 3+2, que é a
   grade de app que o dono pediu — e o último item ocupando a linha inteira
   ficaria estranho, então o `auto-fit` fica de fora e a contagem é explícita. */
@media (max-width: 900px) {
    .landing-home .hc-tiles {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .landing-home .hc-measured {
        grid-template-columns: minmax(0, 1fr);
    }

    .landing-home .hc-hero-actions .landing-button-primary {
        width: 100%;
    }

    .landing-home .hc-tiles li {
        font-size: 0.72rem;
    }

    .landing-home .hc-tile-ico {
        width: 38px;
        height: 38px;
    }
}

/* Nada de movimento para quem pediu para não ter. Cobre as três camadas:
   entrada do hero, encenação dos balões, cascata dos trilhos e as barras do
   relatório (que precisam nascer na largura final, não em 0). */
@media (prefers-reduced-motion: reduce) {
    .js-enabled .landing-home .hc-in,
    .js-enabled .landing-home .hc-proof .hc-msg,
    .js-enabled .landing-home .hc-proof .hc-dots,
    .js-enabled .landing-home .hc-proof .hc-speed,
    .js-enabled .landing-home .hc-report.is-visible .hc-report-bar i {
        animation: none;
        opacity: 1;
        transform: none;
    }

    .js-enabled .landing-home .hc-report.is-visible .hc-report-bar i {
        width: var(--w, 0%);
    }

    .landing-home .hc-dots i {
        animation: none;
        opacity: 0.7;
    }

    .landing-home .hc-card,
    .landing-home .hc-clock-card,
    .landing-home .hc-step,
    .landing-home .hc-tiles li,
    .landing-home .hc-tile-ico,
    .landing-home .hc-card-mark,
    .landing-home .hc-shot img {
        transition: none;
    }

    .landing-home .hc-card:hover,
    .landing-home .hc-clock-card:hover,
    .landing-home .hc-step:hover,
    .landing-home .hc-tiles li:hover,
    .landing-home .hc-shot:hover img {
        transform: none;
    }

    .landing-home .hc-rail {
        scroll-snap-type: none;
    }
}