/*
 * ContratoTec — landing.
 *
 * Conceito: a página é uma MESA (fria) sobre a qual repousam DOCUMENTOS
 * (papel quente). Conteúdo sobre o documento vive em papel; conteúdo sobre o
 * software vive na mesa. É o que separa as duas tipografias e as duas
 * temperaturas de cor.
 */

:root {
    /* Materiais do assunto, não papéis abstratos de cor. */
    --tinta:   #0B2545;   /* texto de documento e títulos */
    --caneta:  #1D6FB8;   /* ação, badges */
    --carimbo: #E8A33D;   /* CTA principal — e SÓ ele */
    --papel:   #FBFAF7;   /* superfície de documento (quente) */
    --mesa:    #EEF2F8;   /* fundo da página (fria) */
    --grafite: #4A5568;
    --linha:   #D9E1EC;

    /* Duas famílias do sistema: contratos são serifados, interfaces são sans.
       O contraste entre elas carrega a promessa do produto. */
    --fonte-documento: Georgia, 'Times New Roman', 'Liberation Serif', serif;
    --fonte-interface: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

    --escala-display: clamp(2.4rem, 5.2vw, 4.1rem);
    --escala-secao:   clamp(1.7rem, 3vw, 2.4rem);
}

body {
    font-family: var(--fonte-interface);
    background: var(--mesa);
    color: var(--tinta);
    overflow-x: hidden;
}

/* ---------- superfícies ---------- */

.documento {
    background: var(--papel);
    border: 1px solid var(--linha);
    border-radius: 3px;                     /* papel não tem canto arredondado de app */
    box-shadow: 0 1px 2px rgba(11,37,69,.06), 0 12px 32px -18px rgba(11,37,69,.5);
    font-family: var(--fonte-documento);
    color: var(--tinta);
}
.documento p { text-align: justify; text-indent: 1.4em; margin: 0 0 .7em; line-height: 1.75; }
.documento p:last-child { margin-bottom: 0; }

/* ---------- tipografia ---------- */

.display-contrato {
    font-size: var(--escala-display);
    line-height: 1.04;
    letter-spacing: -.022em;
    font-weight: 700;
}
.titulo-secao {
    font-size: var(--escala-secao);
    line-height: 1.15;
    letter-spacing: -.015em;
    font-weight: 700;
    color: var(--tinta);
}
.clausula {
    font-family: var(--fonte-documento);
    font-size: .74rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--caneta);
    font-weight: 700;
}
.olho {
    font-size: .74rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--grafite);
    font-weight: 600;
}

/* ---------- badge: o mecanismo do produto ---------- */

.sc {
    display: inline-block;
    background: var(--caneta);
    color: #fff;
    border-radius: 3px;
    padding: 0 .38em;
    font-family: var(--fonte-interface);
    font-size: .86em;
    font-weight: 600;
    text-indent: 0;
    white-space: nowrap;
}
.sc--resolvido {
    background: transparent;
    color: var(--tinta);
    font-family: inherit;
    font-weight: 700;
    padding: 0;
    box-shadow: inset 0 -.42em 0 rgba(232,163,61,.32);   /* marca-texto do carimbo */
}
/* A troca é uma transição de estado, não um efeito solto. */
.sc { transition: background-color .34s ease, color .34s ease, box-shadow .34s ease, padding .34s ease; }

/* ---------- CTA: o carimbo ---------- */

.btn-carimbo {
    background: var(--carimbo);
    border: 1px solid #d9922c;
    color: #22160a;
    font-weight: 700;
    letter-spacing: .01em;
    border-radius: 3px;
    padding: .78rem 1.6rem;
    transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease;
    box-shadow: 0 2px 0 #b9781f;
}
.btn-carimbo:hover, .btn-carimbo:focus-visible {
    background: #f0ae4b;
    color: #22160a;
    transform: translateY(-1px);
    box-shadow: 0 3px 0 #b9781f;
}
.btn-carimbo:active { transform: translateY(1px); box-shadow: 0 1px 0 #b9781f; }

.btn-contorno {
    border: 1px solid var(--linha);
    background: #fff;
    color: var(--tinta);
    font-weight: 600;
    border-radius: 3px;
    padding: .78rem 1.4rem;
    transition: border-color .16s ease, background-color .16s ease;
}
.btn-contorno:hover { border-color: var(--caneta); color: var(--caneta); }

/* ---------- cartões ---------- */

.cartao {
    background: #fff;
    border: 1px solid var(--linha);
    border-radius: 4px;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.cartao:hover {
    transform: translateY(-3px);
    border-color: #bcc9dc;
    box-shadow: 0 14px 30px -20px rgba(11,37,69,.55);
}

/* ---------- acessibilidade e movimento ---------- */

:focus-visible { outline: 3px solid var(--carimbo); outline-offset: 2px; border-radius: 2px; }

/* Revelação ao rolar. A opacidade inicial é aplicada por JS (classe .pronto no
   <html>), NUNCA no CSS puro: se o JS falhar ou estiver desativado, a página
   ficaria em branco. */
.pronto .revelar { opacity: 0; transform: translateY(14px); }
.pronto .revelar.visivel {
    opacity: 1; transform: none;
    transition: opacity .55s ease, transform .55s cubic-bezier(.22,.61,.36,1);
}

@media (prefers-reduced-motion: reduce) {
    .pronto .revelar, .pronto .revelar.visivel { opacity: 1 !important; transform: none !important; transition: none !important; }
    .sc, .cartao, .btn-carimbo, .btn-contorno { transition: none !important; }
    * { animation: none !important; }
}

/* ---------- vitrine de produtos TecnoTip (ECO-12) ---------- */

.ad-banner-wrapper {
    border: 1px solid var(--linha); border-radius: 4px; overflow: hidden;
    background: #fff; box-shadow: 0 2px 12px rgba(11,37,69,.06);
    max-width: 860px; margin: 0 auto;
}
.ad-banner-label {
    background: var(--mesa); border-bottom: 1px solid var(--linha);
    padding: 6px 16px; font-size: .72rem; color: var(--grafite);
    letter-spacing: .04em; text-transform: uppercase; user-select: none;
}
.ad-banner-body { position: relative; }
.ad-track-outer { overflow: hidden; }
.ad-track { display: flex; transition: transform .42s cubic-bezier(.4,0,.2,1); will-change: transform; }
.ad-slide { flex: 0 0 100%; display: flex; align-items: center; gap: 24px; padding: 28px 56px 28px 28px; }
.ad-slide-img { width: 90px; height: 90px; object-fit: contain; border-radius: 6px; flex-shrink: 0; }
.ad-slide-icon {
    width: 80px; height: 80px; border-radius: 8px; flex-shrink: 0;
    background: var(--mesa); display: flex; align-items: center; justify-content: center;
    font-size: 2rem; color: var(--caneta);
}
.ad-slide-body { flex: 1; min-width: 0; }
.ad-slide-title { font-size: 1.05rem; font-weight: 700; color: var(--tinta); margin-bottom: 5px; }
.ad-slide-desc {
    font-size: .82rem; color: var(--grafite); line-height: 1.5; margin-bottom: 14px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ad-slide-cta {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--carimbo); color: #22160a; font-weight: 700; font-size: .82rem;
    padding: 7px 18px; border-radius: 999px; text-decoration: none;
    transition: opacity .2s, transform .2s;
}
.ad-slide-cta:hover { opacity: .9; transform: translateX(2px); color: #22160a; }
.ad-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--linha);
    background: #fff; color: var(--grafite); font-size: .8rem;
    display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 2;
    transition: background-color .2s, border-color .2s;
}
.ad-nav:hover { background: var(--mesa); border-color: var(--caneta); }
.ad-nav-prev { left: 10px; } .ad-nav-next { right: 10px; }
.ad-dots { display: flex; justify-content: center; gap: 2px; padding: 4px 0 8px; }
/* O ponto é 8px, mas o alvo de toque tem 24px (WCAG 2.2 — Target Size);
   o padding faz a área clicável e `background-clip` mantém o desenho pequeno. */
.ad-dot {
    width: 24px; height: 24px; padding: 8px; background-clip: content-box;
    border-radius: 50%; border: none; background-color: var(--linha);
    cursor: pointer; transition: background-color .25s, padding .25s;
}
/* O ponto ativo cresce pelo padding, não por `transform`: escalar o botão
   invadiria o alvo vizinho e voltaria a reprovar em Target Size. */
.ad-dot.active { background-color: var(--carimbo); padding: 7px; }

@media (max-width: 575px) {
    .ad-slide { flex-direction: column; text-align: center; padding: 22px 40px 16px; gap: 14px; }
    .ad-slide-icon { margin: 0 auto; }
    .ad-slide-desc { -webkit-line-clamp: 3; }
}

/* ---------- banner de cookies (LAND-28) ---------- */

.cookies-barra {
    position: fixed; inset: auto 0 0 0; z-index: 1040;
    background: #fff; border-top: 1px solid var(--linha);
    box-shadow: 0 -6px 24px -12px rgba(11,37,69,.35);
}
/* Fica no rodapé e não bloqueia rolagem nem cobre o CTA do hero. */
@media (max-width: 575px) { .cookies-barra .container { padding-block: .75rem; } }

/* ---------- botão flutuante de WhatsApp ---------- */

.zap-flutuante {
    position: fixed;
    right: 1.25rem;
    /* Sobe exatamente a altura da barra de cookies enquanto ela existir; a
       medida é publicada pelo cookies_controller. Fora dela, `0px`. */
    bottom: calc(1.25rem + var(--altura-cookies, 0px));
    z-index: 1035;
    width: 56px; height: 56px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    /* Verde escuro da própria marca WhatsApp: o #25D366 claro sobre branco
       some no fundo claro da página e não destaca o ícone. */
    background: #128C7E;
    color: #fff;
    font-size: 1.75rem;
    text-decoration: none;
    box-shadow: 0 6px 20px -6px rgba(11,37,69,.45);
    transition: transform .16s ease, background-color .16s ease, bottom .2s ease;
}
.zap-flutuante:hover, .zap-flutuante:focus-visible {
    background: #0f7568; color: #fff; transform: translateY(-2px);
}
@media (max-width: 575px) {
    .zap-flutuante { width: 52px; height: 52px; font-size: 1.6rem; right: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
    .zap-flutuante { transition: none; }
}

/* ---------- para quem serve (SEO de cauda longa) ---------- */

.publico-item {
    display: flex; gap: .85rem; align-items: flex-start;
    padding: .9rem 0;
    border-bottom: 1px dashed var(--linha);
}
.publico-item:last-child { border-bottom: 0; }
.publico-item i {
    color: var(--caneta); font-size: 1.05rem;
    width: 1.6rem; text-align: center; flex-shrink: 0; margin-top: .15rem;
}
.publico-item h3 { font-size: .98rem; font-weight: 700; margin: 0 0 .15rem; }
.publico-item p  { font-size: .86rem; color: var(--grafite); margin: 0; line-height: 1.5; }

/* ---------- comparativo Word/Excel × plataforma ---------- */

.comparativo { width: 100%; border-collapse: separate; border-spacing: 0; }
.comparativo th, .comparativo td {
    padding: .8rem .9rem; border-bottom: 1px solid var(--linha);
    vertical-align: top; font-size: .9rem;
}
.comparativo thead th {
    font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
    color: var(--grafite); font-weight: 700; white-space: nowrap;
}
.comparativo tbody th { font-weight: 600; color: var(--tinta); text-align: left; }
/* A coluna do produto é a que a página defende: fundo de papel e borda viva. */
.comparativo .col-nos {
    background: var(--papel);
    border-inline: 1px solid var(--linha);
    color: var(--tinta);
}
.comparativo thead .col-nos { color: var(--caneta); }
.comparativo tbody tr:last-child th, .comparativo tbody tr:last-child td { border-bottom: 0; }
.comparativo .marca-nao { color: #B23A48; }
.comparativo .marca-sim { color: #1F7A5A; }
.tabela-rolavel { overflow-x: auto; }

/* No celular, três colunas em 375 px espremem justamente a coluna do produto.
   A tabela vira uma lista de fichas: pergunta em cima, as duas respostas
   rotuladas embaixo. Continua sendo uma <table> na marcação — o cabeçalho é
   escondido só visualmente e cada célula recebe seu rótulo por `::before`. */
@media (max-width: 767.98px) {
    .comparativo, .comparativo tbody, .comparativo tr, .comparativo th, .comparativo td { display: block; }
    .comparativo thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .comparativo tbody tr {
        border: 1px solid var(--linha); border-radius: 4px;
        padding: .9rem 1rem; margin-bottom: .85rem;
    }
    .comparativo tbody tr:last-child { margin-bottom: 0; }
    .comparativo tbody th { border-bottom: 0; padding: 0 0 .55rem; font-size: 1rem; }
    .comparativo tbody td { border-bottom: 0; padding: .45rem 0 0; }
    .comparativo tbody td::before {
        content: attr(data-rotulo);
        display: block; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
        color: var(--grafite); font-weight: 700; margin-bottom: .15rem;
    }
    .comparativo .col-nos {
        border-inline: 0; border-radius: 3px;
        padding: .5rem .6rem; margin-top: .5rem;
    }
    .comparativo tbody tr:last-child td { border-bottom: 0; }
}

/* ADM-09 §2 — faixa de personificação. Mesma regra do layout de /app: a faixa
   precisa existir também nas páginas públicas, onde o operador pode cair ainda
   autenticado como o cliente. */
.faixa-personificacao {
    position: sticky; top: 0; z-index: 1080;
    display: flex; flex-wrap: wrap; gap: .5rem;
    align-items: center; justify-content: space-between;
    background: #C1121F; color: #fff;
    padding: .5rem 1rem; font-size: .9rem;
}