/*
 * home-ft-sections.css — seções do passo A4 da Home pública Fixtres (Views/Home/IndexFt.cshtml): ferramentas (#tools),
 * clientes (#clients), rodapé (#footer: implementação, contato, créditos) e aparência dos campos dos formulários.
 * Plano docs/Features/support.md; porte do mockup aprovado pelo dono em 2026-09-28
 * (https://claude.ai/artifact/KX7nwoKZi4GcyseH2JJors). O widget de WhatsApp que o passo A4 pôs aqui saiu no B4:
 * virou o card "Suporte via WhatsApp" do Balcão do assistente, com CSS próprio (Styles/Theme/ft-assistant-desk.css); desta folha
 * sobrou só a regra que sobe o #goUp acima do botão flutuante do assistente.
 *
 * DEPENDE de home-ft.css (tokens --ft-*, --ft-home-*, .ft-home-btn*, .ft-home-grad-anim*, .ft-home-wave*,
 * .ft-home-glass, [data-reveal], diálogos, cookies, subir, toast), carregado ANTES no mesmo bundle
 * ~/wwwroot/css/home-ft. Nada aqui redefine o que é de lá; os complementos estão marcados como tal.
 *
 * NOMES — toda classe nova leva ft-home- (regra de ouro #5, docs/Features/tech-theme.md). Por seção, em BEM
 * (ft-home-tools__row, ft-home-impl__card…) em vez do nome curto do mockup (.row, .card), para não colidir com as
 * seções do passo A3 escritas em paralelo (.ft-home-card e .ft-home-box já existem em home-ft-solutions.css).
 * Classes de ESTADO sem prefixo (is-invalid, is-visible), como em home-ft.css. Ganchos de JS: ids e data-* —
 * contrato no topo de Scripts/home-ft-sections.js.
 */

/* ---------- Ferramentas (#tools) ---------- */
.ft-home-tools { position: relative; color: #fff; padding-block: 110px 120px; overflow: hidden; }
.ft-home-tools .ft-home-wrap { position: relative; }
.ft-home-tools h2 { font-size: clamp(30px, 3.4vw, 44px); font-weight: 800; }
.ft-home-tools h2 span, .ft-home-tools h3 span { color: #ffe4c2; }
.ft-home-tools h3 { font-size: clamp(18px, 1.8vw, 24px); font-weight: 600; margin-top: 10px; color: rgba(255, 255, 255, .92); }
.ft-home-tools__rows { display: grid; gap: 18px; margin-top: 44px; }
/* [data-drift]: home-ft.js aplica o transform ao rolar (desktop); abaixo de 900px ele para e a fileira rola sozinha. */
.ft-home-tools__row { display: flex; gap: 18px; will-change: transform; }
.ft-home-tool {
    flex: 1 1 0; min-width: 0; background: rgba(255, 255, 255, .96); color: var(--ft-text-primary); border-radius: 18px; padding: 22px 20px;
    display: grid; gap: 12px; align-content: start; box-shadow: 0 16px 40px rgba(0, 0, 0, .15);
}
.ft-home-tool__head { display: flex; align-items: center; gap: 12px; }
.ft-home-tool__icon { width: 44px; height: 44px; border-radius: 12px; background: #fff3e2; color: var(--ft-home-orange-deep); display: grid; place-items: center; flex: none; }
.ft-home-tool__icon svg { width: 22px; height: 22px; }
.ft-home-tool h4 { font-size: 16px; font-weight: 700; }
.ft-home-tool p { font-size: 14px; color: var(--ft-text-secondary); }
@media (max-width: 900px) {
    /* No lugar do carrossel de ferramentas do legado: scroll-snap horizontal, uma fileira por vez. */
    .ft-home-tools__rows { margin-inline: -20px; padding-inline: 20px; }
    .ft-home-tools__row { overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; scrollbar-width: thin; transform: none !important; }
    .ft-home-tool { flex: 0 0 82%; scroll-snap-align: start; }
}

/* ---------- Clientes (#clients) ---------- */
.ft-home-clients { padding-block: 96px; background: var(--ft-bg-surface); }
/* align-items: start, NÃO center (o mockup centralizava): cada depoimento tem uma altura, e com center a coluna de
   logos recentralizava a cada troca — o logo saía de baixo do mouse parado, outro entrava, o mouseenter trocava de
   novo e o painel piscava sem parar (medido no A6: ~90 trocas em 1,5 s com o mouse parado no 1º logo). */
.ft-home-clients .ft-home-wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: start; }
.ft-home-clients h2 { font-size: clamp(26px, 2.8vw, 34px); font-weight: 800; }
.ft-home-clients h2 span { color: var(--ft-home-green); }
.ft-home-clients__logos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 26px; }
.ft-home-clients__logo {
    background: var(--ft-bg-page); border: 1px solid var(--ft-border-color); border-radius: 14px; padding: 14px; cursor: pointer;
    display: grid; place-items: center; min-height: 84px; transition: border-color .2s, box-shadow .2s, transform .15s;
}
.ft-home-clients__logo img { max-height: 48px; width: auto; }
.ft-home-clients__logo:hover { border-color: var(--ft-home-green); transform: translateY(-2px); }
.ft-home-clients__logo[aria-pressed="true"] { border-color: var(--ft-home-green); box-shadow: 0 0 0 3px var(--ft-home-green-pale); background: #fff; }
.ft-home-quote { position: relative; background: var(--ft-bg-page); border: 1px solid var(--ft-border-color); border-radius: 24px; padding: 34px 34px 30px 40px; }
/* Aspas decorativas do mockup; escape em vez do caractere porque a folha não declara @charset. */
.ft-home-quote::before { content: "\201C"; position: absolute; left: 18px; top: -6px; font: 800 96px/1 var(--ft-font-display); color: var(--ft-home-orange); opacity: .35; }
.ft-home-quote__img { max-height: 56px; width: auto; margin-bottom: 18px; }
.ft-home-quote__text { font-size: 16px; color: var(--ft-text-primary); }
.ft-home-quote__footer { display: block; margin-top: 18px; font-family: var(--ft-font-display); color: var(--ft-home-green-deep); }
@media (max-width: 900px) {
    .ft-home-clients .ft-home-wrap { grid-template-columns: 1fr; }
    .ft-home-quote { padding: 28px 22px 24px 28px; }
}

/* ---------- Rodapé (#footer): implementação ---------- */
.ft-home-footer { position: relative; color: #fff; padding-block: 120px 40px; overflow: hidden; }
.ft-home-footer .ft-home-wrap { position: relative; }
.ft-home-impl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.ft-home-impl__card { padding: 26px 26px 26px 30px; display: grid; grid-template-columns: 56px 1fr; gap: 20px; align-items: start; }
.ft-home-impl__circle {
    width: 56px; height: 56px; border-radius: 50%; background: var(--ft-home-orange); color: #fff;
    display: grid; place-items: center; box-shadow: 0 10px 24px rgba(0, 0, 0, .2);
}
.ft-home-impl__circle svg { width: 26px; height: 26px; }
.ft-home-impl__card li { position: relative; padding-left: 22px; margin-bottom: 8px; font-size: 15px; }
.ft-home-impl__card li::before { content: ""; position: absolute; left: 0; top: 10px; width: 10px; height: 10px; border-radius: 50%; background: var(--ft-home-orange-soft); }

/* ---------- Rodapé: contato (#contact) ---------- */
.ft-home-contact { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; margin-top: 96px; align-items: start; }
.ft-home-contact h2 { font-size: clamp(26px, 2.8vw, 34px); font-weight: 800; color: #fff; }
.ft-home-contact__hours { margin-top: 8px; color: rgba(255, 255, 255, .92); font-size: 16px; }
.ft-home-contact-form { margin-top: 26px; display: grid; gap: 14px; }
.ft-home-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.ft-home-field--full { grid-column: 1 / -1; }
.ft-home-recaptcha-note { font-size: 12px; color: rgba(255, 255, 255, .75); }
.ft-home-recaptcha-note a { color: #fff; }
.ft-home-links { padding: 30px 28px; display: grid; gap: 22px; }
.ft-home-links__logo { height: 60px; width: auto; }
.ft-home-phones, .ft-home-email { display: grid; gap: 8px; }
.ft-home-phones a, .ft-home-email a { display: inline-flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-size: 16px; }
.ft-home-phones a:hover, .ft-home-email a:hover { text-decoration: underline; }
.ft-home-phones svg, .ft-home-email svg { width: 18px; height: 18px; flex: none; }
.ft-home-socials { display: flex; gap: 10px; }
.ft-home-socials a { width: 42px; height: 42px; border-radius: 12px; background: rgba(255, 255, 255, .14); display: grid; place-items: center; color: #fff; }
.ft-home-socials a:hover { background: var(--ft-home-orange); }
.ft-home-socials svg { width: 20px; height: 20px; }

/* ---------- Rodapé: créditos ---------- */
.ft-home-credits {
    margin-top: 80px; padding-top: 26px; border-top: 1px solid rgba(255, 255, 255, .25);
    display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center;
}
.ft-home-credits__auth { display: flex; gap: 10px; flex-wrap: wrap; }
.ft-home-credits__auth span.ft-home-btn { cursor: default; }   /* o nome do logado não é link (como na legada) */
.ft-home-credits__center { text-align: center; font-size: 14px; color: rgba(255, 255, 255, .9); }
.ft-home-credits__center ul { display: flex; justify-content: center; gap: 18px; margin-top: 6px; }
.ft-home-credits__center .ft-home-linklike { background: none; border: 0; color: #fff; text-decoration: underline; cursor: pointer; font: inherit; padding: 0; }

@media (max-width: 900px) {
    .ft-home-impl { grid-template-columns: 1fr; }
    .ft-home-contact { grid-template-columns: 1fr; margin-top: 64px; }
    .ft-home-credits { grid-template-columns: 1fr; text-align: center; }
    .ft-home-credits__auth { justify-content: center; }
}
@media (max-width: 560px) {
    .ft-home-fields { grid-template-columns: 1fr; }
    .ft-home-impl__card { grid-template-columns: 1fr; }
}

/* ---------- Campos (contrato de home-ft.js: .ft-home-field / .ft-home-feedback / .ft-home-check / .ft-home-phone) ---------- */
/* home-ft.css só esconde/mostra .ft-home-feedback de .ft-home-field; a aparência e o checkbox ficam aqui.
   Base clara; o rodapé verde sobrescreve logo abaixo. */
.ft-home-field { display: grid; gap: 6px; }
.ft-home-field label { font-size: 13px; font-weight: 600; color: var(--ft-text-secondary); }
.ft-home-field input, .ft-home-field textarea {
    width: 100%; border: 1px solid var(--ft-border-color); background: #fff; color: var(--ft-text-primary);
    border-radius: 12px; padding: 12px 14px; font: 15px var(--ft-font-body);
}
.ft-home-field textarea { min-height: 128px; resize: vertical; }
.ft-home-field input:focus, .ft-home-field textarea:focus { outline: 3px solid var(--ft-home-orange-soft); outline-offset: 0; }
.ft-home-field.is-invalid input, .ft-home-field.is-invalid textarea { border-color: #dc3545; outline: 3px solid rgba(220, 53, 69, .25); }
.ft-home-feedback { font-size: 13px; font-weight: 600; color: #b02a37; }
.ft-home-check { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 4px 10px; font-size: 14px; }
.ft-home-check input { width: 20px; height: 20px; margin: 1px 0 0; flex: none; accent-color: var(--ft-home-orange); }
.ft-home-check label { flex: 1 1 0; min-width: 0; cursor: pointer; }
.ft-home-check a { color: inherit; text-decoration: underline; cursor: pointer; }
.ft-home-check .ft-home-feedback { flex-basis: 100%; }
.ft-home-check.is-invalid { color: #b02a37; }
.ft-home-check.is-invalid .ft-home-feedback { display: block; }   /* complemento: home-ft.css só cobre .ft-home-field */

/* Sobre o verde do rodapé */
.ft-home-contact-form .ft-home-field label { color: rgba(255, 255, 255, .9); }
.ft-home-contact-form .ft-home-field input, .ft-home-contact-form .ft-home-field textarea { border-color: rgba(255, 255, 255, .5); background: rgba(255, 255, 255, .96); }
.ft-home-contact-form .ft-home-field.is-invalid input, .ft-home-contact-form .ft-home-field.is-invalid textarea { border-color: #ffb4a8; outline: 3px solid rgba(255, 120, 100, .45); }
.ft-home-contact-form .ft-home-feedback { color: #ffd6cf; }
.ft-home-contact-form .ft-home-check { color: #fff; }
.ft-home-contact-form .ft-home-check a { color: #fff; }
.ft-home-contact-form .ft-home-check.is-invalid { color: #ffd6cf; }

/* ---------- Complementos de home-ft.css ---------- */
/* Fechar dos diálogos com ícone SVG (regra de ouro #5) em vez do "×" de texto. */
.ft-home-policy__close { display: grid; place-items: center; padding: 0; }
.ft-home-policy__close svg { width: 16px; height: 16px; }
/* Toast com várias linhas: o JS troca o <br /> da mensagem de validação do SupportController por quebra de linha. */
.ft-home-toast--multiline { white-space: pre-line; }

/* ---------- Subir x Balcão do assistente ---------- */
/* O #goUp (home-ft.css, bottom 104px) cairia em cima do botão flutuante do assistente (Styles/Theme/ft-assistant-desk.css,
   bottom 84px): sobe enquanto o Balcão estiver na página — o :has() desliga sozinho se o botão sair. */
body:has(.ft-desk-fab) .ft-home-go-up { right: 34px; bottom: calc(168px + env(safe-area-inset-bottom, 0px)); } /* centrado sobre o botão de 72px do assistente (right 20 + (72-44)/2), 12px acima do botão e 6px acima do selo "Ajuda" (medido no B4t) */

@media (prefers-reduced-motion: reduce) {
    .ft-home-clients__logo:hover { transform: none; }
}