@charset "UTF-8";
/* =============================================================================
   RedXCorp — Folha de estilo única
   -----------------------------------------------------------------------------
   Design reconstruído a partir do CSS do site anterior (WordPress + Elementor),
   extraído do backup. Paleta, tipografia, escala de títulos, formato de botão e
   largura de container reproduzem o original.

   Sumário
     01. Fontes
     02. Variáveis (design tokens)
     03. Reset e base
     04. Acessibilidade
     05. Layout (container, seções)
     06. Tipografia
     07. Botões
     08. Cabeçalho e navegação
     09. Menu mobile
     10. Hero
     11. Cards e grades
     12. Blocos de conteúdo
     13. Logos de clientes
     14. CTA
     15. Contato (cartões e atalhos)
     16. Rodapé
     17. Botão flutuante do WhatsApp
     18. Página 404
     19. Animações de entrada
     20. Trilha de navegação (breadcrumb)
     21. Perguntas frequentes (FAQ)
     22. Selos de confiança
     23. Depoimentos (componente pronto, sem conteúdo ainda)
     24. Introdução de página simples (Privacidade, Sobre)
   ========================================================================== */


/* =============================================================================
   01. Fontes
   -----------------------------------------------------------------------------
   Plus Jakarta Sans nos títulos e na interface, Inter no texto corrido.
   Um arquivo variável por família cobre todos os pesos: 74 KB no total.

   Histórico das escolhas, para não repetir o caminho:
     Heebo 300      (original) — apagada demais, parecia fonte padrão de editor
     Space Grotesk  — personalidade excessiva, leitura estranha
     Plus Jakarta Sans — humanista e corporativa, o meio-termo entre as duas
   ========================================================================== */

@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('../fonts/jakarta-variable.woff2') format('woff2');
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter-variable.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}


/* =============================================================================
   02. Variáveis
   -----------------------------------------------------------------------------
   Valores retirados do kit Elementor do site anterior:
     primary   #272B36   títulos
     secondary #FF4255   acento, botões, links
     text      #7A7A7A   texto corrido
     branco / #E6E6E6    superfícies e bordas
     #1B1E22             seções escuras
     #F3D9D0             seção de destaque em tom pêssego

   Dois ajustes de contraste, ambos imperceptíveis a olho nu:
     --text     #7A7A7A → #757575   (4,29:1 → 4,61:1 sobre branco)
     --accent-ink #FF4255 → #D81E35 só para links de texto (3,41:1 → 5,05:1)
   O #FF4255 continua intacto em botões, ícones, bordas e detalhes.
   ========================================================================== */

:root {
    /* Superfícies */
    --bg:            #ffffff;
    --bg-alt:        #f7f7f8;
    --bg-peach:      #f3d9d0;
    --bg-dark:       #1b1e22;
    --bg-dark-2:     #272b36;

    /* Bordas */
    --border:        #e6e6e6;
    --border-2:      #d5d5d7;

    /* Texto */
    --heading:       #272b36;
    --text:          #6f6f6f;
    --text-on-dark:  #d8d9dc;
    --white:         #ffffff;

    /* -------------------------------------------------------------------------
       Marca — três tons do mesmo coral, escolhidos por onde cada um é legível:
         --accent      #ff4255  cor original. Decoração, ícones, bordas e
                                qualquer texto sobre fundo ESCURO (4,91:1).
         --accent-ink  #d81e35  texto e elementos pequenos sobre fundo CLARO
                                (5,05:1 — o #ff4255 daria só 3,41:1).
         --accent-btn  #e5253b  preenchimento de botão com rótulo branco
                                (4,51:1 — o #ff4255 daria 3,41:1).
       ---------------------------------------------------------------------- */
    --accent:            #ff4255;
    --accent-ink:        #d81e35;
    --accent-btn:        #e5253b;
    --accent-btn-hover:  #c8172c;
    --accent-soft:       rgba(255, 66, 85, 0.10);
    --accent-glow:       rgba(255, 66, 85, 0.38);

    /* Tipografia */
    --font-head:     'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    --font-body:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;

    --fs-h1:         clamp(2.25rem, 5.2vw, 3.625rem);  /*  36 → 58 px */
    --fs-h2:         clamp(1.75rem, 3.6vw, 2.375rem);  /*  28 → 38 px */
    --fs-h3:         1.5rem;                            /*  24 px */
    --fs-h4:         1.125rem;                          /*  18 px */
    --fs-lg:         1.25rem;                           /*  20 px */
    --fs-base:       1rem;                              /*  16 px */
    --fs-sm:         0.875rem;                          /*  14 px */
    --fs-xs:         0.75rem;                           /*  12 px */
    --fs-display:    clamp(4rem, 14vw, 9.125rem);       /* 146 px */

    --lh-tight:      1.2;
    --lh-normal:     1.5;
    --lh-relaxed:    1.7;
    --ls-accent:     1.3px;

    /* Espaçamento */
    --sp-1:          0.25rem;
    --sp-2:          0.5rem;
    --sp-3:          0.75rem;
    --sp-4:          1rem;
    --sp-5:          1.5rem;
    --sp-6:          2rem;
    --sp-7:          3rem;
    --sp-8:          4.5rem;
    --sp-9:          6rem;

    /* Formas — o original usa cantos retos em botões e cards */
    --radius:        0;
    --radius-sm:     2px;
    --radius-full:   999px;

    /* Efeitos */
    --transition:    0.25s ease;
    --shadow:        0 10px 40px rgba(39, 43, 54, 0.10);
    --shadow-card:   0 2px 14px rgba(39, 43, 54, 0.07);

    /* Medidas */
    --max-w:         1140px;
    --max-w-narrow:  980px;
    --max-w-prose:   68ch;

    /* Altura do cabeçalho: 32px de padding em cima e embaixo + logo.
       O hero é puxado para baixo dele, como no original. */
    --header-h:      92px;
}

@media (min-width: 1024px) {
    :root { --header-h: 124px; }
}


/* =============================================================================
   03. Reset e base
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; padding: 0; }

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + var(--sp-4));
    -webkit-text-size-adjust: 100%;
}

body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: var(--fs-base);
    font-weight: 400;
    line-height: var(--lh-relaxed);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

img,
picture,
svg,
video {
    display: block;
    max-width: 100%;
}

img { height: auto; }

a { color: inherit; text-decoration: none; }

ul, ol { list-style: none; }

button,
input,
textarea,
select { font: inherit; color: inherit; }

button { background: none; border: 0; cursor: pointer; }

address { font-style: normal; }


/* =============================================================================
   04. Acessibilidade
   ========================================================================== */

.skip-link {
    position: absolute;
    left: var(--sp-4);
    top: -100px;
    z-index: 999;
    background: var(--accent);
    color: var(--white);
    padding: var(--sp-3) var(--sp-5);
    font-family: var(--font-head);
    font-weight: 600;
    transition: top var(--transition);
}

.skip-link:focus { top: var(--sp-4); }

:focus-visible {
    outline: 3px solid var(--accent-ink);
    outline-offset: 3px;
}

:focus:not(:focus-visible) { outline: none; }

/* Sobre fundo escuro o contorno escuro some: usa o coral, que ali tem contraste. */
.section--dark :focus-visible,
.hero :focus-visible,
.cta :focus-visible,
.footer :focus-visible { outline-color: var(--accent); }

.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .reveal { opacity: 1 !important; transform: none !important; }
}


/* =============================================================================
   05. Layout
   ========================================================================== */

.container {
    width: 100%;
    max-width: var(--max-w);
    margin-inline: auto;
    padding-inline: var(--sp-5);
}

/* Várias seções do original usam um container mais estreito, de 980px. */
.container--narrow { max-width: var(--max-w-narrow); }

.section { padding-block: var(--sp-8); }

.section--tight { padding-block: var(--sp-7); }
.section--bg    { background: var(--bg-alt); }

/* Seções escuras — usadas no original para contraste entre blocos. */
.section--dark {
    background: var(--bg-dark);
    color: var(--text-on-dark);
}

.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4 { color: var(--white); }

.section--peach { background: var(--bg-peach); }

.section-header {
    text-align: center;
    max-width: 62ch;
    margin: 0 auto var(--sp-7);
}

/* Sobrelinha em caixa alta — padrão do original em toda seção. */
.section-label {
    display: inline-block;
    font-family: var(--font-head);
    font-size: var(--fs-base);
    font-weight: 600;
    line-height: 1;
    letter-spacing: var(--ls-accent);
    text-transform: uppercase;
    color: var(--accent-ink);
    margin-bottom: var(--sp-4);
}

/* Sobre fundo escuro o coral original já tem contraste de sobra. */
.section--dark .section-label,
.cta .section-label { color: var(--accent); }

.section-footer { text-align: center; margin-top: var(--sp-7); }

/* Cabeçalho de seção com respiro menor, para páginas curtas. */
.section-header--tight { margin-bottom: var(--sp-5); }

@media (min-width: 768px) {
    .section { padding-block: var(--sp-9); }
}


/* =============================================================================
   06. Tipografia
   ========================================================================== */

h1, h2, h3, h4 {
    font-family: var(--font-head);
    color: var(--heading);
    line-height: var(--lh-tight);
    text-wrap: balance;
}

/* Tracking negativo leve. A Plus Jakarta já é bem ajustada, então precisa de
   menos correção que a Space Grotesk — só o suficiente para o H1 de 58px não
   ficar com as letras soltas. */
h1 { font-size: var(--fs-h1); font-weight: 800; letter-spacing: -0.022em; }
h2 { font-size: var(--fs-h2); font-weight: 700; letter-spacing: -0.018em; }
h3 { font-size: var(--fs-h3); font-weight: 700; line-height: 1.25; letter-spacing: -0.012em; }
h4 { font-size: var(--fs-h4); font-weight: 600; line-height: 1.3; }

p { text-wrap: pretty; }

.lead {
    font-size: var(--fs-lg);
    line-height: var(--lh-normal);
}

.prose { max-width: var(--max-w-prose); }

.prose p + p { margin-top: var(--sp-4); }

.prose a {
    color: var(--accent-ink);
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.prose a:hover { color: var(--heading); }

.section--dark .prose a { color: var(--accent); }

.text-center { text-align: center; }



/* =============================================================================
   07. Botões
   Retangulares, sem raio, caixa alta — exatamente como no site anterior.
   ========================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    padding: var(--sp-4) var(--sp-6);
    border-radius: var(--radius);
    font-family: var(--font-head);
    font-size: var(--fs-base);
    font-weight: 600;
    line-height: 1;
    letter-spacing: var(--ls-accent);
    text-transform: uppercase;
    text-align: center;
    cursor: pointer;
    border: 2px solid transparent;
    transition: background-color var(--transition),
                border-color var(--transition),
                color var(--transition);
}

.btn--primary {
    background: var(--accent-btn);
    color: var(--white);
    border-color: var(--accent-btn);
}

.btn--primary:hover {
    background: var(--accent-btn-hover);
    border-color: var(--accent-btn-hover);
}

.btn--outline {
    border-color: var(--border-2);
    color: var(--heading);
}

.btn--outline:hover {
    border-color: var(--accent);
    color: var(--accent-ink);
}

/* Variante para uso sobre fundo escuro ou imagem. */
.btn--ghost,
.hero .btn--outline,
.cta .btn--outline,
.section--dark .btn--outline,
.error-page .btn--outline {
    border-color: rgba(255, 255, 255, 0.55);
    color: var(--white);
}

.btn--ghost:hover,
.hero .btn--outline:hover,
.cta .btn--outline:hover,
.section--dark .btn--outline:hover,
.error-page .btn--outline:hover {
    background: var(--white);
    border-color: var(--white);
    color: var(--heading);
}

.btn--sm { padding: var(--sp-3) var(--sp-4); font-size: var(--fs-xs); }
.btn--lg { padding: 20px 40px; font-size: var(--fs-base); }

.btn--block { display: flex; width: 100%; }


/* =============================================================================
   08. Cabeçalho e navegação
   ========================================================================== */

/* -----------------------------------------------------------------------------
   No site anterior o cabeçalho é TRANSPARENTE e fica por cima do hero
   (o hero usava margin-top:-124px para subir por baixo dele). Não é fixo:
   rola junto com a página. O logotipo é claro, feito para esse fundo escuro.
   -------------------------------------------------------------------------- */
.header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99;
    display: flex;
    align-items: center;
    padding-block: var(--sp-6);
    background: transparent;
}

.header__inner {
    display: flex;
    align-items: center;
    gap: var(--sp-5);
}

.header__logo img { width: auto; height: 44px; }

@media (max-width: 1023px) {
    .header { padding-block: var(--sp-4); }
    .header__logo img { height: 36px; }
}

/* Enquanto o menu mobile está aberto o fundo fica sólido, senão o logotipo
   claro desapareceria sobre o painel branco. */
body.menu-open .header { background: var(--bg-dark); }

.header__nav { display: none; margin-left: auto; }

/* Botão do cabeçalho: transparente com contorno claro, texto branco.
   No hover só a cor muda para o coral — sem preenchimento, para não competir
   com o botão principal do hero. */
.header__cta {
    display: none;
    background: transparent;
    border-color: rgba(255, 255, 255, 0.45);
    color: var(--white);
    padding: 14px 20px;
}

.header__cta:hover,
.header__cta:focus-visible {
    background: transparent;
    border-color: var(--accent);
    color: var(--accent);
}

.nav-list {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
}

/* -----------------------------------------------------------------------------
   Links brancos (16,7:1 sobre o hero escuro) com uma barra coral marcando a
   página atual. A barra anima por transform: scaleX, não por width — só
   composição, sem recalcular layout a cada quadro.
   -------------------------------------------------------------------------- */
.nav-list__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    padding: var(--sp-3) var(--sp-2) calc(var(--sp-3) + 4px);
    font-family: var(--font-head);
    font-size: var(--fs-sm);
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--white);
    transition: color var(--transition);
}

.nav-list__link::after {
    content: '';
    position: absolute;
    left: var(--sp-2);
    right: var(--sp-2);
    bottom: 0;
    height: 2px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform var(--transition);
}

.nav-list__link:hover::after,
.nav-list__link:focus-visible::after { transform: scaleX(1); }

/* Página atual: barra sempre visível, texto no coral da marca. */
.nav-list__link.is-active {
    color: var(--accent);
}

.nav-list__link.is-active::after {
    transform: scaleX(1);
    transform-origin: left;
}

/* O botão "Soluções" também recebe o marcador quando a página aberta é uma das
   filhas — assim a seção fica sinalizada mesmo com o submenu fechado. Quem
   define isso é nav_is_active(), em includes/functions.php. */

.nav-list__item--has-sub { position: relative; }

.nav-list__chevron {
    width: 6px;
    height: 6px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform var(--transition);
}

.nav-list__toggle[aria-expanded="true"] .nav-list__chevron {
    transform: rotate(-135deg) translate(-3px, -3px);
}

.subnav {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 250px;
    background: var(--white);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    padding: var(--sp-2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}

.nav-list__toggle[aria-expanded="true"] + .subnav,
.nav-list__item--has-sub:hover .subnav,
.nav-list__item--has-sub:focus-within .subnav {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* No submenu (fundo branco) a marcação é uma borda lateral: em lista vertical
   ela lê melhor que um sublinhado. */
.subnav__link {
    display: block;
    padding: var(--sp-3) var(--sp-4);
    border-left: 3px solid transparent;
    font-family: var(--font-head);
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--heading);
    transition: color var(--transition), background-color var(--transition), border-color var(--transition);
}

.subnav__link:hover {
    color: var(--accent-ink);
    background: var(--bg-alt);
}

.subnav__link.is-active {
    color: var(--accent-ink);
    background: var(--bg-alt);
    border-left-color: var(--accent);
    font-weight: 600;
}

.hamburger {
    margin-left: auto;
    width: 44px;
    height: 44px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.hamburger span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--white);
    transition: transform var(--transition), opacity var(--transition);
}

.hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.is-open span:nth-child(2) { opacity: 0; }
.hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (min-width: 1024px) {
    .header__nav { display: block; }
    .header__cta { display: inline-flex; }
    .hamburger   { display: none; }
}


/* =============================================================================
   09. Menu mobile
   ========================================================================== */

.mobile-menu {
    position: fixed;
    inset: var(--header-h) 0 0 0;
    z-index: 99;
    background: var(--white);
    padding: var(--sp-5) var(--sp-5) var(--sp-8);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--sp-6);
}

.mobile-menu[hidden] { display: none; }

.mobile-menu__list { display: flex; flex-direction: column; }

.mobile-menu__link {
    display: block;
    padding: var(--sp-4) var(--sp-2);
    border-left: 3px solid transparent;
    font-family: var(--font-head);
    font-size: var(--fs-base);
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--heading);
    border-bottom: 1px solid var(--border);
    transition: color var(--transition), border-color var(--transition);
}

.mobile-menu__link:hover { color: var(--accent-ink); }

.mobile-menu__link.is-active {
    color: var(--accent-ink);
    border-left-color: var(--accent);
    padding-left: var(--sp-4);
}

.mobile-menu__heading {
    display: block;
    padding: var(--sp-5) var(--sp-2) var(--sp-2);
    font-family: var(--font-head);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: var(--ls-accent);
    text-transform: uppercase;
    color: var(--accent-ink);
}

.mobile-menu__sublist .mobile-menu__link {
    padding-left: var(--sp-5);
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    font-size: var(--fs-base);
}

@media (min-width: 1024px) {
    .mobile-menu { display: none !important; }
}


/* =============================================================================
   10. Hero
   Imagem de fundo com camada escura e texto claro — como no original.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   Alturas retiradas do CSS do site anterior. O hero começa no topo absoluto da
   página (o cabeçalho transparente fica sobre ele) e é bem alto:
     home    260px de padding em cima, 372px embaixo   (tablet 180/200)
     internas 248px em cima, 320px embaixo             (tablet 180/242)
     contato  248px em cima, 220px embaixo             (tablet 180/200)
   -------------------------------------------------------------------------- */
.hero {
    position: relative;
    display: flex;
    align-items: center;
    padding: 140px 0 120px;
    overflow: hidden;
    background: var(--bg-dark);
}

@media (min-width: 768px) {
    .hero { padding: 180px 0 200px; }
}

@media (min-width: 1024px) {
    .hero { padding: 260px 0 372px; }
}

/* Heros das páginas internas. */
.hero--compact { padding: 130px 0 90px; }

@media (min-width: 768px) {
    .hero--compact { padding: 180px 0 242px; }
}

@media (min-width: 1024px) {
    .hero--compact { padding: 248px 0 320px; }
}

/* A página de contato é curta e direta: o hero é bem mais raso que o das
   páginas de solução, para o conteúdo útil aparecer sem rolagem. */
.hero--contact { padding: 120px 0 64px; }

@media (min-width: 768px) {
    .hero--contact { padding: 150px 0 90px; }
}

@media (min-width: 1024px) {
    .hero--contact { padding: 190px 0 110px; }
}

.hero__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }

.hero__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Camada 1 — zoom lento. O site anterior tinha um vídeo em loop aqui;
       o movimento contínuo devolve aquela sensação sem custo de rede. */
    animation: hero-zoom 28s ease-in-out infinite alternate;
    will-change: transform;
}

@keyframes hero-zoom {
    from { transform: scale(1); }
    to   { transform: scale(1.12); }
}

.hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(27, 30, 34, 0.92) 0%, rgba(27, 30, 34, 0.72) 55%, rgba(27, 30, 34, 0.55) 100%);
}

/* Camada 2 — brilho pulsante, evocando o neon do vídeo original. */
.hero__glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(45% 55% at 78% 42%, var(--accent-glow) 0%, transparent 68%);
    opacity: 0.55;
    animation: hero-glow 9s ease-in-out infinite alternate;
    will-change: opacity, transform;
}

@keyframes hero-glow {
    from { opacity: 0.35; transform: scale(0.94); }
    to   { opacity: 0.75; transform: scale(1.08); }
}

/* Camada 3 — varredura diagonal, bem sutil, cruzando a área a cada 14s. */
.hero__sheen {
    position: absolute;
    top: -50%;
    bottom: -50%;
    left: -30%;
    width: 28%;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.055), transparent);
    transform: rotate(14deg) translateX(0);
    animation: hero-sheen 14s linear infinite;
    will-change: transform;
}

@keyframes hero-sheen {
    0%       { transform: rotate(14deg) translateX(0); }
    55%, 100% { transform: rotate(14deg) translateX(560%); }
}

/* Quem pediu menos movimento não vê nenhuma das três camadas em movimento.
   A regra global do bloco 04 zera transições, mas animações infinitas
   precisam ser desligadas explicitamente. */
@media (prefers-reduced-motion: reduce) {
    .hero__bg img,
    .hero__glow,
    .hero__sheen { animation: none !important; }

    .hero__sheen { display: none; }
    .hero__glow  { opacity: 0.5; transform: none; }
}

.hero__content {
    position: relative;
    z-index: 1;
    max-width: 46rem;
}

/* Entrada em cascata: sobrelinha, título, texto e botões, 90ms entre cada um.
   Roda uma vez, no carregamento — não depende de JavaScript. */
.js .hero__content > * {
    animation: hero-in 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
}

.js .hero__content > *:nth-child(1) { animation-delay: 0.10s; }
.js .hero__content > *:nth-child(2) { animation-delay: 0.19s; }
.js .hero__content > *:nth-child(3) { animation-delay: 0.28s; }
.js .hero__content > *:nth-child(4) { animation-delay: 0.37s; }

@keyframes hero-in {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .js .hero__content > * { animation: none !important; }
}

.hero__eyebrow {
    display: block;
    font-family: var(--font-head);
    font-size: var(--fs-base);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: var(--ls-accent);
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: var(--sp-4);
}

.hero__title {
    color: var(--white);
    margin-bottom: var(--sp-5);
}

.hero__title em {
    display: block;
    font-style: normal;
    color: var(--accent);
}

.hero__text {
    font-size: var(--fs-lg);
    color: var(--text-on-dark);
    line-height: var(--lh-normal);
    margin-bottom: var(--sp-6);
    max-width: 40rem;
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-4);
}


/* =============================================================================
   11. Cards e grades
   ========================================================================== */

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

@media (min-width: 640px) {
    .grid--2, .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
    .grid--3 { grid-template-columns: repeat(3, 1fr); }
    .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

.card {
    background: var(--white);
    border: 1px solid var(--border);
    padding: var(--sp-6);
    transition: border-color var(--transition), box-shadow var(--transition);
}

.card:hover {
    border-color: var(--accent);
    box-shadow: var(--shadow);
}

.section--dark .card {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.12);
}

.card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background: var(--accent-soft);
    color: var(--accent-ink);
    margin-bottom: var(--sp-4);
}

.section--dark .card__icon { color: var(--accent); }

.card__title { margin-bottom: var(--sp-3); }

.card__text {
    font-size: var(--fs-base);
    line-height: var(--lh-relaxed);
}

.section--dark .card__text { color: var(--text-on-dark); }

.card__link {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    margin-top: var(--sp-4);
    font-family: var(--font-head);
    font-size: var(--fs-sm);
    font-weight: 600;
    letter-spacing: var(--ls-accent);
    text-transform: uppercase;
    color: var(--accent-ink);
    transition: gap var(--transition);
}

.card__link:hover { gap: var(--sp-3); }

.section--dark .card__link { color: var(--accent); }

.card--link { position: relative; }

.card--link .card__link::after {
    content: '';
    position: absolute;
    inset: 0;
}


/* =============================================================================
   12. Blocos de conteúdo
   ========================================================================== */

.split {
    display: grid;
    gap: var(--sp-6);
    align-items: center;
    grid-template-columns: 1fr;
}

@media (min-width: 900px) {
    .split { grid-template-columns: 1fr 1fr; gap: var(--sp-8); }
    .split--reverse .split__media { order: -1; }
}

.split__media img { width: 100%; }

/* O folheto é um retrato alto: sem limite ele domina a seção inteira. */
.split__media--flyer img {
    width: auto;
    max-width: 100%;
    max-height: 520px;
    margin-inline: auto;
    box-shadow: var(--shadow);
}

.split__title { margin-bottom: var(--sp-4); }

.checklist { display: flex; flex-direction: column; gap: var(--sp-5); }

.checklist li {
    display: flex;
    gap: var(--sp-4);
    align-items: flex-start;
    line-height: var(--lh-relaxed);
}

.checklist svg {
    flex-shrink: 0;
    margin-top: 5px;
    color: var(--accent);
}

.checklist strong {
    display: block;
    font-family: var(--font-head);
    font-size: var(--fs-h4);
    font-weight: 600;
    color: var(--heading);
    margin-bottom: var(--sp-1);
}

.section--dark .checklist strong { color: var(--white); }

/* Faixa de números — o original usa um display muito grande. */
.stats {
    display: grid;
    gap: var(--sp-6);
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    text-align: center;
}

.stat__value {
    display: block;
    font-family: var(--font-head);
    font-size: clamp(3rem, 8vw, 5rem);
    font-weight: 700;
    line-height: 1.1;
    color: var(--accent-ink);
}

.section--dark .stat__value { color: var(--accent); }

.stat__label {
    display: block;
    margin-top: var(--sp-2);
    font-family: var(--font-head);
    font-size: var(--fs-sm);
    font-weight: 600;
    letter-spacing: var(--ls-accent);
    text-transform: uppercase;
    color: var(--heading);
}

.section--dark .stat__label { color: var(--white); }


/* =============================================================================
   13. Logos de clientes
   ========================================================================== */

.clients {
    display: grid;
    gap: var(--sp-4);
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
}

@media (min-width: 640px)  { .clients { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .clients { grid-template-columns: repeat(6, 1fr); } }

.client {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-4);
    background: var(--white);
    border: 1px solid var(--border);
    aspect-ratio: 3 / 2;
    transition: border-color var(--transition);
}

.client:hover { border-color: var(--accent); }

.client img {
    max-width: 100%;
    max-height: 70px;
    width: auto;
    height: auto;
    object-fit: contain;
    /* Fundo claro: dessatura no repouso e devolve a cor no hover. */
    filter: grayscale(1);
    opacity: 0.65;
    transition: filter var(--transition), opacity var(--transition);
}

.client:hover img { filter: none; opacity: 1; }



/* =============================================================================
   14. CTA
   ========================================================================== */

.cta {
    position: relative;
    overflow: hidden;
    padding-block: var(--sp-9);
    background: var(--bg-dark);
    color: var(--text-on-dark);
}

.cta__bg { position: absolute; inset: 0; z-index: 0; }

.cta__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cta__overlay {
    position: absolute;
    inset: 0;
    background: rgba(27, 30, 34, 0.88);
}

.cta__content {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 64ch;
    margin-inline: auto;
}

.cta__title { color: var(--white); margin-bottom: var(--sp-4); }

.cta__text {
    font-size: var(--fs-lg);
    line-height: var(--lh-normal);
    margin-bottom: var(--sp-6);
}

.cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-4);
    justify-content: center;
}

/*
   Os dois botões dividem a mesma largura: lado a lado quando cabem os dois
   (cada um cresce a partir de 220px), empilhados e a largura toda do bloco
   quando não cabem. Sem isso, cada botão ficava do tamanho do próprio texto —
   "VER FORMAS DE CONTATO" bem mais largo que "FAÇA UMA COTAÇÃO" — e a
   diferença lia como desalinhamento ao empilhar no mobile.
*/
.cta__actions .btn {
    flex: 1 1 220px;
    max-width: 320px;
}

/* Telefone como contato secundário, abaixo dos botões principais do CTA. */
.cta__phone {
    margin-top: var(--sp-5);
    font-size: var(--fs-sm);
}

.cta__phone a {
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--white);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(255, 255, 255, 0.4);
    transition: color var(--transition);
}

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


/* =============================================================================
   15. Contato (cartões e atalhos)
   ========================================================================== */

/* Cartões de contato */
.contact-cards { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; }

@media (min-width: 640px) { .contact-cards { grid-template-columns: repeat(3, 1fr); } }

.contact-card {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    padding: var(--sp-6);
    background: var(--white);
    border: 1px solid var(--border);
    transition: border-color var(--transition), box-shadow var(--transition);
}

.contact-card:hover { border-color: var(--accent); box-shadow: var(--shadow); }

.contact-card__icon { color: var(--accent-ink); }

.contact-card__label {
    font-family: var(--font-head);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: var(--ls-accent);
    text-transform: uppercase;
    color: var(--accent-ink);
}

.contact-card__value {
    font-family: var(--font-head);
    font-size: var(--fs-base);
    font-weight: 600;
    color: var(--heading);
    line-height: var(--lh-normal);
}

.contact-card__hint {
    margin-top: auto;
    padding-top: var(--sp-2);
    font-size: var(--fs-sm);
    color: var(--text);
}

/* Cartão inteiro clicável (WhatsApp e e-mail). */
.contact-card--action:hover .contact-card__value { color: var(--accent-ink); }

.contact-card--action:focus-visible {
    outline: 3px solid var(--accent-ink);
    outline-offset: 3px;
}


/* -----------------------------------------------------------------------------
   Atalhos por solução — cada um abre o WhatsApp com a mensagem já escrita.
   -------------------------------------------------------------------------- */

.quick-links {
    display: grid;
    gap: var(--sp-3);
    grid-template-columns: 1fr;
}

@media (min-width: 640px)  { .quick-links { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .quick-links { grid-template-columns: repeat(3, 1fr); } }

.quick-link {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    height: 100%;
    padding: var(--sp-4) var(--sp-5);
    background: var(--white);
    border: 1px solid var(--border);
    font-family: var(--font-head);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--heading);
    transition: border-color var(--transition), color var(--transition), box-shadow var(--transition);
}

.quick-link:hover {
    border-color: var(--accent);
    color: var(--accent-ink);
    box-shadow: var(--shadow-card);
}

.quick-link__icon {
    display: flex;
    flex-shrink: 0;
    color: var(--accent-ink);
}

.quick-link__text { flex: 1; }

.quick-link__arrow {
    display: flex;
    flex-shrink: 0;
    color: var(--accent);
    transform: translateX(0);
    transition: transform var(--transition);
}

.quick-link:hover .quick-link__arrow { transform: translateX(4px); }


/* =============================================================================
   16. Rodapé
   ========================================================================== */

.footer {
    background: var(--bg-dark);
    color: var(--text-on-dark);
    padding-block: var(--sp-8) var(--sp-5);
}

.footer__grid {
    display: grid;
    gap: var(--sp-6);
    grid-template-columns: 1fr;
}

@media (min-width: 640px)  { .footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .footer__grid { grid-template-columns: 2fr 1fr 1fr 1.4fr; gap: var(--sp-7); } }

/* O logotipo já é claro, feito para fundo escuro — nada de filtro aqui. */
.footer__logo img { width: auto; height: 40px; }

.footer__desc {
    margin-top: var(--sp-4);
    font-size: var(--fs-sm);
    line-height: var(--lh-relaxed);
    max-width: 34ch;
}

.footer__social { display: flex; gap: var(--sp-3); margin-top: var(--sp-5); }

.footer__social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: var(--white);
    transition: background-color var(--transition), border-color var(--transition);
}

.footer__social-link:hover { background: var(--accent); border-color: var(--accent); }

.footer__heading {
    font-family: var(--font-head);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: var(--ls-accent);
    text-transform: uppercase;
    color: var(--white);
    margin-bottom: var(--sp-4);
}

.footer__links { display: flex; flex-direction: column; gap: var(--sp-3); }

.footer__links a {
    font-size: var(--fs-sm);
    transition: color var(--transition);
}

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

.footer__contact { display: flex; flex-direction: column; gap: var(--sp-4); }

.footer__contact li {
    display: flex;
    gap: var(--sp-3);
    align-items: flex-start;
    font-size: var(--fs-sm);
    line-height: var(--lh-relaxed);
}

.footer__contact-icon { color: var(--accent); flex-shrink: 0; margin-top: 4px; }

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

.footer__bottom {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3) var(--sp-6);
    justify-content: space-between;
    align-items: center;
    margin-top: var(--sp-7);
    padding-top: var(--sp-5);
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    font-size: var(--fs-xs);
}

.footer__legal-link {
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color var(--transition);
}

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


/* =============================================================================
   17. Botão flutuante do WhatsApp
   ========================================================================== */

.wa-float {
    position: fixed;
    right: var(--sp-5);
    bottom: var(--sp-5);
    z-index: 90;
    display: inline-flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3);
    background: #25d366;
    color: #05301a;
    border-radius: var(--radius-full);
    box-shadow: 0 6px 20px rgba(39, 43, 54, 0.28);
    transition: transform var(--transition), box-shadow var(--transition);
}

.wa-float:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 26px rgba(39, 43, 54, 0.36);
}

.wa-float__label {
    display: none;
    font-family: var(--font-head);
    font-size: var(--fs-sm);
    font-weight: 700;
    padding-right: var(--sp-2);
}

@media (min-width: 768px) { .wa-float__label { display: inline; } }


/* =============================================================================
   18. Página 404
   ========================================================================== */

/* Sem hero nesta página: o fundo escuro garante que o cabeçalho transparente,
   com logotipo claro e links coral, continue legível. */
.error-page {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 180px 0 var(--sp-9);
    background: var(--bg-dark);
    color: var(--text-on-dark);
}

@media (min-width: 1024px) {
    .error-page { padding-top: 240px; }
}

.error-page__code {
    font-family: var(--font-head);
    font-size: var(--fs-display);
    font-weight: 700;
    line-height: 1.1;
    color: var(--accent);
}

.error-page__title { margin: var(--sp-4) 0; color: var(--white); }

.error-page__text {
    max-width: 52ch;
    margin: 0 auto var(--sp-6);
    line-height: var(--lh-relaxed);
}

.error-page .card {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.12);
}

.error-page .card__title { color: var(--white); }
.error-page .card__text  { color: var(--text-on-dark); }
.error-page .card__icon,
.error-page .card__link  { color: var(--accent); }


/* =============================================================================
   19. Animações de entrada
   Sem JavaScript a classe .js nunca entra e tudo fica visível.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   Base: tudo que tem .reveal entra com fade + deslocamento. As variantes trocam
   só a direção. O atraso da cascata vem de --i, que o JS numera nos filhos de
   .grid, .clients e .checklist.
   -------------------------------------------------------------------------- */
.js .reveal {
    opacity: 0;
    transform: translateY(28px);
    transition:
        opacity 0.62s cubic-bezier(0.22, 0.61, 0.36, 1),
        transform 0.62s cubic-bezier(0.22, 0.61, 0.36, 1);
    transition-delay: calc(var(--i, 0) * 90ms);
    will-change: opacity, transform;
}

.js .reveal--left  { transform: translateX(-34px); }
.js .reveal--right { transform: translateX(34px); }
.js .reveal--zoom  { transform: scale(0.94); }

.js .reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* Depois de entrar, libera a dica de composição — manter will-change em dezenas
   de elementos consome memória de vídeo à toa. */
.js .reveal.is-visible { will-change: auto; }

/* Parallax das imagens dos blocos texto+imagem. O deslocamento vem de --shift,
   escrito pelo JS dentro de requestAnimationFrame. */
.js .split__media img {
    transform: translate3d(0, var(--shift, 0px), 0);
    will-change: transform;
}


/* =============================================================================
   20. Trilha de navegação (breadcrumb)
   Nas páginas de serviço, logo abaixo do hero. Renderizada por
   includes/breadcrumb.php a partir de $page_breadcrumb.
   ========================================================================== */

.breadcrumb-bar {
    padding-block: var(--sp-4);
    background: var(--bg-alt);
    border-bottom: 1px solid var(--border);
}

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-sm);
}

.breadcrumb li {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

/* Barra "/" entre os itens — decorativa, não precisa do contraste de texto. */
.breadcrumb li:not(:last-child)::after {
    content: '/';
    color: var(--border-2);
}

.breadcrumb a {
    color: var(--text);
    transition: color var(--transition);
}

.breadcrumb a:hover { color: var(--accent-ink); }

.breadcrumb li:last-child span {
    color: var(--heading);
    font-weight: 600;
}


/* =============================================================================
   21. Perguntas frequentes (FAQ)
   <details>/<summary> nativos: funcionam sem JavaScript e são operáveis por
   teclado por padrão (Enter/Espaço no <summary> alterna o estado aberto).
   ========================================================================== */

.faq {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

.faq__item {
    background: var(--white);
    border: 1px solid var(--border);
    padding: var(--sp-5);
}

.faq__item[open] { border-color: var(--accent); }

.faq__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    cursor: pointer;
    list-style: none;
    font-family: var(--font-head);
    font-weight: 600;
    font-size: var(--fs-base);
    color: var(--heading);
}

/* Remove o triângulo padrão do navegador — o ícone +/- abaixo o substitui. */
.faq__question::-webkit-details-marker { display: none; }
.faq__question::marker { content: ''; }

.faq__icon {
    position: relative;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
}

.faq__icon::before,
.faq__icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    background: var(--accent-ink);
    transform: translate(-50%, -50%);
    transition: transform var(--transition), opacity var(--transition);
}

.faq__icon::before { width: 12px; height: 2px; }
.faq__icon::after   { width: 2px; height: 12px; }

.faq__item[open] .faq__icon::after {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(90deg);
}

.faq__answer {
    margin-top: var(--sp-4);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--border);
    line-height: var(--lh-relaxed);
}


/* =============================================================================
   22. Selos de confiança
   Rótulos curtos, factuais, reutilizados perto dos CTAs — ver includes/cta-section.php.
   ========================================================================== */

.badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    margin-top: var(--sp-5);
    margin-bottom: var(--sp-6);
}

.badges--center { justify-content: center; }

.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-4);
    /*
       Fundo mais claro que --accent-soft de propósito: aqui dentro vai TEXTO
       (precisa 4,5:1), não um ícone decorativo como em .card__icon (que só
       precisa 3:1 e por isso pode usar o tom mais forte de --accent-soft).
       accent-ink sobre --accent-soft mede 4,45:1 — reprova por pouco.
       Neste tom mais claro mede 4,63:1.
    */
    background: rgba(255, 66, 85, 0.07);
    border: 1px solid rgba(255, 66, 85, 0.25);
    font-family: var(--font-head);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.4px;
    color: var(--accent-ink);
}

.badge svg { flex-shrink: 0; }

/* Dentro do CTA (fundo escuro), o rosa claro não teria contraste — troca para
   um contorno translúcido branco. */
.cta .badge {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
    color: var(--white);
}


/* =============================================================================
   23. Depoimentos
   Componente pronto, mas sem conteúdo: o site não tem nenhuma citação real de
   cliente ainda. Ver relatorio/pendencias.md. Só passa a aparecer quando algum
   HTML usar .testimonials — hoje nenhuma página inclui esse bloco.
   ========================================================================== */

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

@media (min-width: 768px) { .testimonials { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .testimonials { grid-template-columns: repeat(3, 1fr); } }

.testimonial {
    display: flex;
    flex-direction: column;
    padding: var(--sp-6);
    background: var(--white);
    border: 1px solid var(--border);
}

.testimonial__quote {
    flex: 1;
    font-size: var(--fs-lg);
    line-height: var(--lh-relaxed);
    color: var(--heading);
}

.testimonial__quote::before { content: '\201C'; }
.testimonial__quote::after  { content: '\201D'; }

.testimonial__author {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-top: var(--sp-5);
    padding-top: var(--sp-5);
    border-top: 1px solid var(--border);
}

.testimonial__avatar {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-full);
    object-fit: cover;
}

.testimonial__name {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: var(--fs-sm);
    color: var(--heading);
}

.testimonial__role {
    font-size: var(--fs-xs);
    color: var(--text);
}


/* =============================================================================
   24. Introdução de página simples
   Para páginas sem hero fotográfico (Privacidade, Sobre): mesmo espaçamento de
   topo do .hero--compact, para o cabeçalho transparente continuar legível,
   mas sem imagem, glow ou sheen — não combina com o tom dessas páginas.
   ========================================================================== */

.page-intro {
    padding: 130px 0 var(--sp-8);
    background: var(--bg-dark);
    color: var(--text-on-dark);
    text-align: center;
}

@media (min-width: 768px)  { .page-intro { padding-top: 180px; } }
@media (min-width: 1024px) { .page-intro { padding-top: 248px; padding-bottom: var(--sp-9); } }

.page-intro__eyebrow {
    display: block;
    font-family: var(--font-head);
    font-size: var(--fs-sm);
    font-weight: 600;
    letter-spacing: var(--ls-accent);
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: var(--sp-4);
}

.page-intro h1 { color: var(--white); }

.page-intro__text {
    max-width: 56ch;
    margin: var(--sp-4) auto 0;
    font-size: var(--fs-lg);
    color: var(--text-on-dark);
}

/* Conteúdo em prosa longa (política de privacidade) — largura de leitura
   confortável, títulos internos destacados. */
.legal-content {
    max-width: var(--max-w-prose);
    margin-inline: auto;
}

.legal-content h2 {
    font-size: var(--fs-h4);
    margin-top: var(--sp-8);
    margin-bottom: var(--sp-3);
}

.legal-content h2:first-child { margin-top: 0; }

.legal-content p,
.legal-content li {
    color: var(--text);
    line-height: var(--lh-relaxed);
}

.legal-content p + p { margin-top: var(--sp-4); }

.legal-content ul {
    margin-top: var(--sp-3);
    padding-left: var(--sp-5);
    list-style: disc;
}

.legal-content li + li { margin-top: var(--sp-2); }

.legal-content strong { color: var(--heading); }

.legal-content a {
    color: var(--accent-ink);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.legal-content a:hover { color: var(--heading); }

@media (prefers-reduced-motion: reduce) {
    .js .split__media img { transform: none !important; }
}