/* ==========================================================================
   UpLog Design System v2 — Camada 4: Casca e seções
   Só composição e posicionamento. O visual dos blocos vem da camada 3.
   ========================================================================== */

/* ==========================================================================
   HEADER
   Barra de 64px, densa. A navegação é mono em caixa alta — mesma linguagem
   dos rótulos do resto do produto — com numeração que casa com o índice
   lateral. Compacta o suficiente para não roubar altura útil de quem lê.
   ========================================================================== */

.site-header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: var(--z-header);
    height: var(--header-h);
    display: flex;
    align-items: center;
    /* Referência de posicionamento da barra de progresso */
    isolation: isolate;
    background: rgba(10, 11, 12, 0.82);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid transparent;
    transition: border-color var(--d-base) var(--e-out),
                background-color var(--d-base) var(--e-out);
}

.site-header.is-scrolled {
    background: rgba(10, 11, 12, 0.94);
    border-bottom-color: var(--line);
}

/* Progresso de leitura: 1px no rodapé do header. Diz "quanto falta" sem
   ocupar espaço nem pedir atenção. Largura controlada por main.js. */
.site-header__progress {
    position: absolute;
    left: 0;
    bottom: -1px;
    height: 1px;
    width: 0;
    background: var(--accent);
    transition: width 90ms linear;
}

.site-header__inner {
    display: flex;
    align-items: center;
    gap: var(--s-8);
    width: 100%;
}

/* O CTA do menu mobile não deve aparecer no desktop: lá quem mostra a ação
   é o .site-header__cta. Sem isto, o botão aparece duas vezes na barra. */
.site-nav__cta { display: none; }

@media (max-width: 860px) {
    .site-nav__cta { display: inline-flex; }
}

.site-logo { display: flex; align-items: center; min-height: 44px; flex: none; }
.site-logo img { height: 26px; width: auto; object-fit: contain; }

.site-nav {
    display: flex;
    align-items: center;
    gap: var(--s-6);
    margin-left: auto;
}

.site-nav__list { display: flex; align-items: center; gap: var(--s-1); }

.site-nav__link {
    display: flex;
    align-items: baseline;
    gap: var(--s-2);
    padding: var(--s-2) var(--s-3);
    border-radius: var(--r-sm);
    font-family: var(--font-mono);
    font-size: var(--t-micro);
    font-weight: var(--w-medium);
    letter-spacing: var(--ls-micro);
    text-transform: uppercase;
    color: var(--fg-tertiary);
    transition: color var(--d-quick) var(--e-out),
                background-color var(--d-quick) var(--e-out);
}

/* Índice do item, na cor de destaque só quando é a seção atual */
.site-nav__link i {
    font-style: normal;
    font-size: 0.9em;
    opacity: 0.5;
    transition: color var(--d-quick) var(--e-out), opacity var(--d-quick) var(--e-out);
}

.site-nav__link:hover { color: var(--fg-primary); background: var(--bg-raised); }

.site-nav__link[aria-current="true"] { color: var(--fg-primary); }
.site-nav__link[aria-current="true"] i { color: var(--accent); opacity: 1; }

.site-header__cta { display: flex; align-items: center; gap: var(--s-3); }

/* Botão do menu — só no mobile */
.nav-toggle {
    display: none;
    width: 40px;
    height: 40px;
    place-items: center;
    margin-left: auto;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    color: var(--fg-primary);
}

.nav-toggle svg { width: 18px; height: 18px; }
.nav-toggle .i-x { display: none; }
.nav-toggle[aria-expanded="true"] .i-x { display: block; }
.nav-toggle[aria-expanded="true"] .i-menu { display: none; }

@media (max-width: 1024px) {
    .site-header__cta .btn { display: none; }
}

@media (max-width: 860px) {
    .nav-toggle { display: grid; }
    .site-header__cta { display: none; }

    .site-nav {
        position: fixed;
        inset: var(--header-h) 0 auto 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        margin: 0;
        padding: var(--s-3) var(--shell-pad) var(--s-6);
        background: var(--bg-overlay);
        border-bottom: 1px solid var(--line);
        box-shadow: var(--elev-menu);
        transform: translateY(-101%);
        opacity: 0;
        visibility: hidden;
        transition: transform var(--d-base) var(--e-out),
                    opacity var(--d-quick) var(--e-out),
                    visibility var(--d-base);
    }

    .site-nav.is-open { transform: translateY(0); opacity: 1; visibility: visible; }

    .site-nav__list { flex-direction: column; align-items: stretch; gap: 0; }

    .site-nav__link {
        justify-content: flex-start;
        gap: var(--s-4);
        padding: var(--s-4) var(--s-2);
        font-size: var(--t-xs);
        border-bottom: 1px solid var(--line-faint);
        border-radius: 0;
    }

    .site-nav .btn {
        margin-top: var(--s-5);
        height: 48px;
    }
}

/* ==========================================================================
   ÍNDICE LATERAL (rail)
   Coluna fixa de 1px com um marcador por seção. Responde "onde estou" o
   tempo todo, sem ocupar área de conteúdo. Só em tela larga — no notebook
   e abaixo, o header já cumpre esse papel.
   ========================================================================== */

.rail {
    position: fixed;
    /* Encostado na borda esquerda, não calculado a partir do container:
       o rótulo expandido tem ~110px e, posicionado perto do shell, invadia
       a coluna de texto em telas de 1500–1700px. */
    left: var(--s-5);
    top: 50%;
    transform: translateY(-50%);
    z-index: var(--z-rail);
    display: none;
    flex-direction: column;
    gap: var(--s-4);
}

/* Só a partir de 1560px sobra margem suficiente à esquerda do conteúdo
   para o rótulo expandir sem encostar no texto. */
@media (min-width: 1560px) { .rail { display: flex; } }

.rail__item {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    color: var(--fg-tertiary);
    transition: color var(--d-quick) var(--e-out);
}

.rail__item:hover { color: var(--fg-primary); }

.rail__tick {
    display: block;
    width: 14px;
    height: 1px;
    background: currentColor;
    opacity: 0.45;
    transition: width var(--d-base) var(--e-out),
                opacity var(--d-base) var(--e-out),
                background-color var(--d-base) var(--e-out);
}

.rail__label {
    font-family: var(--font-mono);
    font-size: var(--t-micro);
    letter-spacing: var(--ls-micro);
    text-transform: uppercase;
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity var(--d-quick) var(--e-out),
                transform var(--d-quick) var(--e-out);
}

.rail__item:hover .rail__label { opacity: 1; transform: none; }

.rail__item[aria-current="true"] { color: var(--accent); }
.rail__item[aria-current="true"] .rail__tick {
    width: 26px;
    opacity: 1;
    background: var(--accent);
}
.rail__item[aria-current="true"] .rail__label { opacity: 1; transform: none; }

/* ==========================================================================
   SEÇÃO
   ========================================================================== */

.section {
    position: relative;
    padding-block: var(--section-y);
}

/* Faixa alternada — separa seções por VALOR, sem borda nem card */
.section--surface { background: var(--bg-surface); }

/* Cabeçalho de seção: etiqueta + título ocupando faixa estreita da grade,
   texto de apoio deslocado. Assimetria deliberada. */
.section__head { display: flex; flex-direction: column; gap: var(--s-5); }
.section__head .tag { align-self: flex-start; }

.section__title { max-width: 20ch; }

.section__intro {
    font-size: var(--t-lead);
    line-height: var(--lh-relaxed);
    color: var(--fg-tertiary);
    max-width: 46ch;
}

/* Variante que alinha o texto de apoio pelo rodapé do título ao lado */
.section__intro--end { align-self: end; }

/* ==========================================================================
   HERO
   Assimétrico: título na faixa esquerda, painel de estado na direita.
   Nada centralizado, nada de gradiente colorido.
   ========================================================================== */

.hero {
    position: relative;
    isolation: isolate;
    /* O respiro é medido a partir do FIM do header, por isso a altura dele
       entra na conta. O valor fluido foi reduzido de 3.5–8rem para
       2.25–5.25rem: o vão de 135px no desktop deixava a etiqueta solta
       longe demais da barra. */
    padding-top: calc(var(--header-h) + clamp(2.25rem, 1.5rem + 3.6vw, 5.25rem));
    padding-bottom: clamp(3rem, 2rem + 4vw, 6rem);
    overflow: hidden;
}

/* Luz monocromática única, muito discreta. Não é gradiente colorido:
   é um clareamento do próprio neutro para dar profundidade ao topo. */
.hero__wash {
    position: absolute;
    inset: -20% -10% auto -10%;
    height: 70%;
    z-index: -2;
    background: radial-gradient(55% 70% at 22% 0%, rgba(255, 255, 255, 0.055) 0%, transparent 70%);
    pointer-events: none;
}

/* Malha técnica: linhas verticais alinhadas à grade editorial. Estrutura
   visível, não textura decorativa. */
.hero__rules {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: linear-gradient(90deg, var(--line-faint) 1px, transparent 1px);
    background-size: calc(100% / 6) 100%;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 82%);
    mask-image: linear-gradient(180deg, #000 0%, transparent 82%);
    pointer-events: none;
}

.hero__grid { align-items: end; row-gap: var(--s-12); }

.hero__logo {
    display: block;
    width: clamp(11rem, 8rem + 9vw, 17rem);
    height: auto;
}

.hero__title {
    margin-top: var(--s-6);
    max-width: 15ch;
}

/* A segunda linha do título recebe a cor de destaque — um único ponto de
   cor na maior tipografia da página. */
.hero__title em {
    font-style: normal;
    color: var(--accent);
}

.hero__lead {
    margin-top: var(--s-6);
    max-width: 48ch;
    font-size: var(--t-lead);
    line-height: var(--lh-relaxed);
    color: var(--fg-tertiary);
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-3);
    margin-top: var(--s-8);
}

/* Painel de estado à direita: informação operacional real, em densidade
   alta, alinhada ao rodapé do título. É o contraponto assimétrico. */
.hero__panel {
    /* A largura da primeira coluna vive aqui, e não em cada regra: é ela que
       faz o cabeçalho e as oito linhas compartilharem a MESMA grade. Sem um
       valor único, cada linha calculava a sua e nada alinhava. */
    --hero-col: 6.75rem;

    display: flex;
    flex-direction: column;
    gap: var(--s-5);
    padding-left: var(--s-6);
    border-left: 1px solid var(--line);
}

@media (max-width: 1024px) {
    .hero__panel { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); padding-top: var(--s-6); }
}

/* Cabeçalho e linhas na MESMA grade de duas colunas.

   Antes os dois eram flex com `space-between`, que empurra cada pedaço para
   uma borda e deixa o meio vazio. Medido: entre o nome da integração e a sua
   descrição havia de 76 a 237px de vão, e cada descrição começava numa
   vertical diferente — oito linhas, oito posições. O olho não achava coluna
   nenhuma, e o painel parecia texto espalhado em vez de tabela.

   Com a grade, "8+ plataformas" cai exatamente sobre a coluna das descrições
   e vira o cabeçalho dela; os nomes formam a primeira coluna. O vão deixa de
   ser um rio irregular e passa a ser a medida fixa entre duas colunas. */
.hero__panel-head {
    display: grid;
    grid-template-columns: var(--hero-col) minmax(0, 1fr);
    align-items: center;
    gap: var(--s-4);
}

/* O status (badge de contagem) volta a colar na borda direita do painel —
   é um resumo solto, não faz parte da coluna de descrições das linhas. */
.hero__panel-head .status {
    justify-self: end;
    text-align: right;
}

.hero__integrations { display: flex; flex-direction: column; }

.hero__integration {
    display: grid;
    grid-template-columns: var(--hero-col) minmax(0, 1fr);
    align-items: baseline;
    gap: var(--s-4);
    padding-block: var(--s-2);
    border-bottom: 1px solid var(--line-faint);
    font-size: var(--t-sm);
    color: var(--fg-secondary);
}

/* A coluna (largura fixa via --hero-col) é quem garante o alinhamento entre
   as linhas — o texto pode ficar à direita, ecoando o badge do cabeçalho,
   sem voltar ao problema antigo do flex (era a coluna que variava, não o
   texto dentro dela). */
.hero__integration span:last-child {
    font-family: var(--font-mono);
    font-size: var(--t-micro);
    letter-spacing: 0.04em;
    color: var(--fg-tertiary);
    text-align: right;
}

/* A última linha da lista não leva filete: quem separa os dois grupos é a
   borda do cabeçalho "Recursos" logo abaixo. Com as duas, apareciam dois
   traços quase colados. */
.hero__integration:last-child { border-bottom: 0; }

/* Cabeçalho do segundo grupo: separado por filete, sem repetir o peso do
   primeiro — é subordinado a ele. */
.hero__panel-head--sub {
    margin-top: var(--s-2);
    padding-top: var(--s-5);
    border-top: 1px solid var(--line);
}

/* Capacidades em duas colunas: mais compacto que a lista de integrações,
   porque aqui não há um segundo dado por linha. */
.hero__caps {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-2) var(--s-4);
}

.hero__caps li {
    display: flex;
    align-items: baseline;
    gap: var(--s-2);
    font-size: var(--t-sm);
    color: var(--fg-secondary);
}

/* Marcador de 3px: o menor sinal possível, sem virar bullet decorativo */
.hero__caps li::before {
    content: '';
    flex: none;
    width: 3px;
    height: 3px;
    border-radius: 1px;
    background: var(--accent);
    transform: translateY(-3px);
}

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

    /* Duas colunas em 360px de tela deixam ~90px para a descrição, e
       "NFS-e, NF-e, CT-e e vale-pedágio" quebra em quatro linhas. Empilhado,
       o par nome/descrição continua legível. */
    .hero__panel-head,
    .hero__integration {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--s-1, 4px);
    }

    /* Empilhado não há coluna à direita para acompanhar: o texto à direita
       ficaria solto do nome que está logo acima, à esquerda. */
    .hero__panel-head .status,
    .hero__integration span:last-child {
        justify-self: start;
        text-align: left;
    }
}

.hero__panel-note { line-height: 1.7; max-width: none; }

/* ==========================================================================
   FAIXA DE MÉTRICAS
   Números grandes direto sobre o fundo. Sem card, sem borda em volta.
   ========================================================================== */

.figures {
    padding-block: clamp(3rem, 2rem + 3vw, 4.5rem);
    border-block: 1px solid var(--line-faint);
}

.figures__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--s-10) var(--s-8);
}

/* Filete separador entre métricas, só do 2º item em diante */
.figures__grid > * + * {
    padding-left: var(--s-8);
    border-left: 1px solid var(--line-faint);
}

@media (max-width: 700px) {
    .figures__grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-8) var(--s-5); }
    .figures__grid > * + * { padding-left: 0; border-left: 0; }
    .figures__grid > :nth-child(even) {
        padding-left: var(--s-5);
        border-left: 1px solid var(--line-faint);
    }
}

/* ==========================================================================
   SOLUÇÕES
   ========================================================================== */

.solutions__head { margin-bottom: var(--s-10); }

.solutions__head-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
    gap: var(--grid-gap);
    align-items: end;
}

@media (max-width: 900px) {
    .solutions__head-grid { grid-template-columns: 1fr; gap: var(--s-6); }
}

/* ==========================================================================
   PROCESSO
   Régua horizontal com quatro marcações. Não são cards: são etapas de
   uma linha do tempo, com o número como âncora visual.
   ========================================================================== */

.process__track {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--grid-gap);
    margin-top: var(--s-12);
    border-top: 1px solid var(--line);
}

@media (max-width: 900px) { .process__track { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .process__track { grid-template-columns: 1fr; } }

.step {
    position: relative;
    padding-top: var(--s-6);
    padding-right: var(--s-5);
}

/* Marca de régua sobre a linha: o "tick" da etapa */
.step::before {
    content: '';
    position: absolute;
    left: 0;
    top: -1px;
    width: 28px;
    height: 2px;
    background: var(--accent);
}

.step__num {
    font-family: var(--font-mono);
    font-size: var(--t-micro);
    letter-spacing: var(--ls-micro);
    color: var(--accent);
}

.step__title {
    margin-top: var(--s-3);
    font-size: var(--t-h4);
    font-weight: var(--w-semibold);
    color: var(--fg-primary);
}

.step__text {
    margin-top: var(--s-2);
    font-size: var(--t-sm);
    line-height: var(--lh-relaxed);
    color: var(--fg-tertiary);
}

@media (max-width: 560px) {
    .step { padding-bottom: var(--s-6); border-bottom: 1px solid var(--line-faint); }
}

/* ==========================================================================
   SOBRE
   ========================================================================== */

.about__grid { row-gap: var(--s-12); align-items: start; }

.about__text > * + * { margin-top: var(--s-5); }

.about__aside { display: flex; flex-direction: column; gap: var(--s-6); }

.about__list { display: flex; flex-direction: column; border-top: 1px solid var(--line-faint); }

.about__list li {
    display: flex;
    align-items: flex-start;
    gap: var(--s-3);
    padding-block: var(--s-4);
    border-bottom: 1px solid var(--line-faint);
    font-size: var(--t-sm);
    color: var(--fg-secondary);
}

.about__list svg {
    flex: none;
    width: 15px;
    height: 15px;
    margin-top: 3px;
    color: var(--accent);
}

/* ==========================================================================
   FAQ
   Título na faixa estreita à esquerda, perguntas na faixa larga à direita.
   A assimetria dá ao bloco um eixo de leitura só dele.
   ========================================================================== */

.faq__grid { row-gap: var(--s-10); align-items: start; }

.faq__head { grid-column: 1 / span 4; }
.faq__body { grid-column: 6 / -1; }

@media (max-width: 1024px) {
    .faq__head, .faq__body { grid-column: 1 / -1; }
}

/* ==========================================================================
   CONTATO
   Formulário sem card: encostado na grade, separado por hairline.
   ========================================================================== */

.contact__grid { row-gap: var(--s-12); align-items: start; }

.contact__aside { grid-column: 1 / span 4; }
.contact__main  { grid-column: 6 / -1; }

@media (max-width: 1024px) {
    .contact__aside, .contact__main { grid-column: 1 / -1; }
}

.contact__aside > * + * { margin-top: var(--s-6); }

a.spec__val--link:hover { color: var(--accent-hover); }

.contact__form {
    display: flex;
    flex-direction: column;
    gap: var(--s-5);
}

.contact__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-5);
}

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

.contact__submit {
    display: flex;
    align-items: center;
    gap: var(--s-5);
    flex-wrap: wrap;
    margin-top: var(--s-2);
}

.contact__note {
    font-size: var(--t-xs);
    line-height: var(--lh-normal);
    color: var(--fg-tertiary);
    max-width: 42ch;
}

/* ==========================================================================
   RODAPÉ
   ========================================================================== */

.site-footer {
    padding-block: var(--s-16) var(--s-8);
    border-top: 1px solid var(--line);
}

.site-footer__grid { row-gap: var(--s-10); }

/* Faixas do rodapé na grade de 12: marca larga, colunas de links estreitas */
.site-footer__brand { grid-column: span 4; }
.site-footer__col   { grid-column: span 2; }
.site-footer__col--wide { grid-column: span 3; }

@media (max-width: 1024px) {
    .site-footer__brand { grid-column: 1 / -1; }
    .site-footer__col,
    .site-footer__col--wide { grid-column: span 4; }
}

@media (max-width: 640px) {
    .site-footer__col,
    .site-footer__col--wide { grid-column: span 6; }
}

.site-footer__brand img { height: 24px; width: auto; margin-bottom: var(--s-5); }

.site-footer__brand p {
    font-size: var(--t-sm);
    color: var(--fg-tertiary);
    max-width: 34ch;
}

.site-footer__col h2 {
    font-family: var(--font-mono);
    font-size: var(--t-micro);
    font-weight: var(--w-medium);
    letter-spacing: var(--ls-micro);
    text-transform: uppercase;
    color: var(--fg-tertiary);
    margin-bottom: var(--s-4);
}

.site-footer__links { display: flex; flex-direction: column; }

.site-footer__links a {
    display: block;
    padding-block: var(--s-2);
    font-size: var(--t-sm);
    color: var(--fg-secondary);
}

.site-footer__links a:hover { color: var(--accent-hover); }

@media (max-width: 860px) {
    .site-footer__links a { padding-block: var(--s-3); }
}

.site-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--s-4);
    margin-top: var(--s-12);
    padding-top: var(--s-5);
    border-top: 1px solid var(--line-faint);
}

.site-footer__bottom p {
    font-family: var(--font-mono);
    font-size: var(--t-micro);
    letter-spacing: 0.04em;
    color: var(--fg-tertiary);
    max-width: none;
}

/* ==========================================================================
   VOLTAR AO TOPO
   ========================================================================== */

.to-top {
    position: fixed;
    right: var(--s-5);
    bottom: var(--s-5);
    z-index: var(--z-rail);
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--bg-overlay);
    color: var(--fg-secondary);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity var(--d-base) var(--e-out),
                transform var(--d-base) var(--e-out),
                visibility var(--d-base),
                border-color var(--d-quick) var(--e-out),
                color var(--d-quick) var(--e-out);
}

.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { border-color: var(--line-strong); color: var(--fg-primary); }
.to-top svg { width: 16px; height: 16px; }


/* ==========================================================================
   ALVOS DE TOQUE
   O desktop mantém os controles compactos — é o que dá a densidade da
   interface. Em tela de toque, os mesmos controles crescem para os 44px
   mínimos. Densidade não pode custar a capacidade de acertar o botão.
   ========================================================================== */

@media (pointer: coarse) {
    .nav-toggle { width: 44px; height: 44px; }
    .to-top { width: 44px; height: 44px; }

    /* Links de dado (e-mail no bloco de contato) viram linha tocável */
    .spec__val--link { display: flex; align-items: center; min-height: 44px; }
    .spec__row { padding-block: var(--s-2); }
}