/*
* legal-shared.css — Tutela Digital®
* Pilar: Base Jurídica
* Versão: 1
*
* Escopo: todas as páginas legais
* body.page-arquitetura-juridica-prova-digital
* body.page-fundamento-juridico
* body.page-preservacao-probatoria-digital
* body.page-institucional
* body.page-politica-de-privacidade
* body.page-termos-de-custodia
* body.page-termos-de-uso
*
* Carregado via em cada página legal, logo após main.css.
* Os CSS individuais de cada página (arquitetura-juridica.css, etc.)
* continuam existindo para overrides pontuais — este arquivo cuida
* da identidade compartilhada do pilar.
*
* Estratégia visual:
* — Hero: fundo escuro com gradiente verde, grade diagonal, pills
* — Seções de texto: alternância clara/muted com linha lateral verde
* — section-muted: fundo --color-surface-muted sem grandes mudanças
* — features / legal-grid: cards com borda-topo verde e hover lift
* — CTA final: fundo escuro --primitive-green-950, dois CTAs
* — SVG legal-graphic: adaptado para fundo claro (mantido onde existe)
*
* Tokens usados (foundation/tokens.css):
* --primitive-green-950: #0b241b (fundo escuro hero e cta)
* --primitive-green-900: #0f3a2a
* --primitive-green-700: #1b6b4d (acento principal)
* --primitive-green-500: #1db954 (acento claro sobre escuro)
* --primitive-green-200: #a8d9b8 (texto suave sobre escuro)
* --primitive-green-100: #deeade
* --primitive-green-050: #edf4ed
* --color-surface-light: #f2f7f5
* --color-surface-muted: #e6f0eb
* --color-text-strong: #0b241b
* --color-text-base: #0f3a2a
* --color-text-muted: #4f7c6b
* --color-border-soft: #c8ddd4
* --font-display: Cormorant Garamond
* --font-body: Inter
*/
/* ═══════════════════════════════════════════════════════════
§ 0 OVERRIDE GLOBAL legal-page — texto alinhado à esquerda
═══════════════════════════════════════════════════════════ */
/* pages-consolidated centraliza todos os h2/h3 em body.legal-page.
Revertemos para alinhamento editorial à esquerda. */
body.legal-page h2,
body.legal-page h3 {
text-align: left;
max-width: none;
margin-left: 0;
margin-right: 0;
}
/* Exceção: elementos que precisam permanecer centralizados */
body.legal-page .legal-section-title-wrapper h2,
body.legal-page .wp-summary-inner h2,
body.legal-page .cta-final h2 {
text-align: center;
margin-left: auto;
margin-right: auto;
}
/* ═══════════════════════════════════════════════════════════
§ 1 HERO — fundo escuro com gradiente verde
═══════════════════════════════════════════════════════════ */
body.legal-page .page-header--legal {
background: linear-gradient(
155deg,
var(--primitive-green-950) 0%,
#16503b 50%,
#1b6b4d 100%
);
border: none;
border-radius: 14px;
margin: var(--space-md) auto var(--space-lg);
max-width: 820px;
padding: 3.5rem 2.5rem 3rem;
position: relative;
overflow: hidden;
}
/* Grade diagonal de fundo */
body.legal-page .page-header--legal::before {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(135deg, rgba(255,255,255,0.035) 1px, transparent 1px),
linear-gradient(45deg, rgba(255,255,255,0.02) 1px, transparent 1px);
background-size: 52px 52px;
pointer-events: none;
}
/* Vinheta radial decorativa */
body.legal-page .page-header--legal::after {
content: '';
position: absolute;
bottom: -80px;
right: -80px;
width: 380px;
height: 380px;
border-radius: 50%;
background: radial-gradient(
circle,
rgba(45, 181, 96, 0.15) 0%,
transparent 68%
);
pointer-events: none;
}
/* Container interno sobre a grade */
body.legal-page .page-header--legal .page-header-inner {
position: relative;
z-index: 1;
}
/* H1 invertido */
body.legal-page .page-header--legal h1 {
color: #ffffff;
font-size: clamp(1.75rem, 3.6vw, 2.8rem);
font-weight: 500;
letter-spacing: -0.02em;
line-height: 1.16;
margin-bottom: var(--space-sm);
}
/* Subtítulo */
body.legal-page .page-header-subtitle,
body.legal-page .page-header--legal .hero-subtitle {
color: rgba(255, 255, 255, 0.68);
max-width: 600px;
margin: 0 auto;
font-size: 1rem;
line-height: 1.68;
}
/* Divisor */
body.legal-page .legal-divider {
width: 40px;
height: 2px;
background: rgba(255, 255, 255, 0.35);
margin: var(--space-sm) auto;
}
/* Linha de corte na base do hero */
body.legal-page .page-header--legal .hero-rule {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(
90deg,
transparent 0%,
rgba(45, 181, 96, 0.55) 30%,
rgba(168, 217, 184, 0.75) 50%,
rgba(45, 181, 96, 0.55) 70%,
transparent 100%
);
}
/* SVG legal-graphic — adapta cores para fundo escuro */
body.legal-page .page-header--legal .legal-graphic {
display: block;
margin: var(--space-md) auto var(--space-sm);
max-width: 680px;
opacity: 0.9;
}
/* Textos SVG sobre fundo escuro */
body.legal-page .page-header--legal .legal-graphic svg text {
fill: rgba(255, 255, 255, 0.75) !important;
}
body.legal-page .page-header--legal .legal-graphic svg circle,
body.legal-page .page-header--legal .legal-graphic svg rect {
fill: rgba(45, 181, 96, 0.75) !important;
}
body.legal-page .page-header--legal .legal-graphic svg line {
stroke: rgba(168, 217, 184, 0.45) !important;
}
/* Pills de atributos (para páginas que as usam) */
.page-header-pills {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.5rem;
margin: var(--space-sm) auto 0;
position: relative;
z-index: 1;
}
.page-header-pills .pill {
display: inline-flex;
align-items: center;
font-family: var(--font-body);
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.13em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.80);
border: 1px solid rgba(255, 255, 255, 0.22);
border-radius: 2px;
padding: 0.28rem 0.85rem;
background: rgba(255, 255, 255, 0.07);
}
/* Supertítulo de seção */
.section-overtitle {
display: block;
font-family: var(--font-body);
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--primitive-green-200, #a8d9b8);
margin-bottom: var(--space-xs);
position: relative;
z-index: 1;
}
/* ═══════════════════════════════════════════════════════════
§ 2 CONTAINER E TEXTO BASE
═══════════════════════════════════════════════════════════ */
body.legal-page .whitepaper-container {
max-width: 820px;
margin: 0 auto;
padding: 0 2rem 5rem;
}
/* Separador de text-block */
body.legal-page .text-block {
padding: var(--space-lg) 0;
border-bottom: 1px solid var(--color-border-soft);
}
body.legal-page .text-block:last-of-type {
border-bottom: none;
}
/* Linha lateral verde nos h2 de text-block */
body.legal-page .text-block-inner h2 {
padding-left: var(--space-sm);
border-left: 3px solid var(--primitive-green-700);
line-height: var(--line-height-tight);
margin-top: 0;
}
/* section-muted — fundo alternado sutil */
body.legal-page .text-block.section-muted {
background: var(--color-surface-muted);
margin: 0 -2rem;
padding: var(--space-lg) 2rem;
}
/* wp-highlight refinado */
body.legal-page .wp-highlight {
background: linear-gradient(135deg, #f7fbf9, #edf6f2);
border-left: 4px solid var(--primitive-green-700);
border-radius: 0 4px 4px 0;
padding: 1rem 1.25rem;
margin-bottom: var(--space-sm);
font-weight: 500;
}
/* Links inline */
body.legal-page .main .insight-link,
body.legal-page .main .insight-link:visited {
color: var(--primitive-green-700);
text-decoration: none;
border-bottom: 1px solid rgba(27, 107, 77, 0.3);
padding-bottom: 1px;
transition: border-color 0.18s ease, color 0.18s ease;
}
body.legal-page .main .insight-link:hover {
border-color: var(--primitive-green-700);
color: var(--primitive-green-900, #0f3a2a);
}
/* Lista dentro de text-block */
body.legal-page .text-block-inner ul {
padding-left: 0;
list-style: none;
margin: var(--space-sm) 0;
}
body.legal-page .text-block-inner ul li {
padding: 0.55rem 0 0.55rem 1.25rem;
border-bottom: 1px solid var(--color-border-soft);
font-size: 0.95rem;
color: var(--color-text-base);
position: relative;
}
body.legal-page .text-block-inner ul li::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--primitive-green-700);
opacity: 0.6;
}
body.legal-page .text-block-inner ul li:last-child {
border-bottom: none;
}
/* Subtítulos dentro de text-block */
body.legal-page .subsection-title {
font-family: var(--font-display);
font-size: 1.1rem;
font-weight: 600;
color: var(--color-text-strong);
margin: var(--space-md) 0 var(--space-xs);
padding-left: var(--space-sm);
border-left: 2px solid var(--color-border-soft);
}
body.legal-page .detail-title {
font-family: var(--font-body);
font-size: 0.875rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--color-text-muted);
margin: var(--space-md) 0 0.4rem;
}
/* ═══════════════════════════════════════════════════════════
§ 3 SEÇÃO ESCURA — .section-dark
Usada para destacar seções técnicas importantes.
No HTML: adicionar classe section-dark à .
═══════════════════════════════════════════════════════════ */
body.legal-page .section-dark {
background: var(--primitive-green-950, #0b241b);
margin: 0 -2rem;
padding: var(--space-xl) 2rem;
border-top: 1px solid rgba(255, 255, 255, 0.04);
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
body.legal-page .section-dark h2 {
color: var(--primitive-green-200, #a8d9b8);
border-left-color: var(--primitive-green-500, #1db954);
}
body.legal-page .section-dark h3 {
color: rgba(255, 255, 255, 0.80);
}
body.legal-page .section-dark p {
color: rgba(255, 255, 255, 0.62);
}
body.legal-page .section-dark .section-overtitle {
color: var(--primitive-green-500, #1db954);
}
body.legal-page .section-dark .features-subtitle {
color: rgba(255, 255, 255, 0.48);
}
/* Tech badges sobre escuro */
body.legal-page .section-dark .tech-badge {
color: rgba(255, 255, 255, 0.55);
background: rgba(255, 255, 255, 0.05);
border-color: rgba(255, 255, 255, 0.12);
}
/* ═══════════════════════════════════════════════════════════
§ 4 FEATURES / LEGAL-GRID — cards com borda-topo verde
═══════════════════════════════════════════════════════════ */
body.legal-page .features {
padding: var(--space-lg) 0;
border-bottom: 1px solid var(--color-border-soft);
}
body.legal-page .features:last-of-type {
border-bottom: none;
}
body.legal-page .features-inner h2,
body.legal-page .features .legal-section-title-wrapper h2 {
padding-left: var(--space-sm);
border-left: 3px solid var(--primitive-green-700);
text-align: left;
margin-left: 0;
margin-bottom: 0.4rem;
}
body.legal-page .features-subtitle {
font-family: var(--font-body);
font-size: 0.875rem;
color: var(--color-text-muted);
margin-bottom: var(--space-md);
line-height: var(--line-height-base);
}
/* Legal-grid wrapper */
body.legal-page .legal-grid-wrapper {
max-width: 960px;
margin: var(--space-md) auto 0;
padding: 0;
}
/* Grid de cards */
body.legal-page .legal-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--space-sm);
}
/* Card individual */
body.legal-page .legal-grid .feature-item {
background: #ffffff;
border: 1px solid var(--color-border-soft);
border-top: 3px solid var(--primitive-green-700);
border-radius: 4px;
padding: var(--space-md) var(--space-sm);
min-height: auto;
text-decoration: none;
display: flex;
flex-direction: column;
gap: 0.4rem;
transition: transform 0.22s ease, box-shadow 0.22s ease, border-top-color 0.22s ease;
}
body.legal-page .legal-grid .feature-item:hover {
transform: translateY(-3px);
box-shadow: 0 10px 28px rgba(11, 36, 27, 0.09);
border-top-color: var(--primitive-green-500, #1db954);
}
body.legal-page .legal-grid .feature-item h3 {
font-family: var(--font-display);
font-size: 1.05rem;
font-weight: 600;
color: var(--color-text-strong);
line-height: 1.2;
margin: 0;
padding: 0;
border: none;
}
body.legal-page .legal-grid .feature-item p {
font-size: 0.875rem;
color: var(--color-text-muted);
line-height: 1.62;
margin: 0;
}
/* Remove o pseudo-elemento ::after do consolidated */
body.legal-page .legal-grid .feature-item::after {
display: none;
}
/* Cards sobre fundo escuro */
body.legal-page .section-dark .legal-grid .feature-item {
background: rgba(255, 255, 255, 0.04);
border-color: rgba(255, 255, 255, 0.09);
border-top-color: var(--primitive-green-500, #1db954);
}
body.legal-page .section-dark .legal-grid .feature-item:hover {
background: rgba(255, 255, 255, 0.07);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
body.legal-page .section-dark .legal-grid .feature-item h3 {
color: #ffffff;
}
body.legal-page .section-dark .legal-grid .feature-item p {
color: rgba(255, 255, 255, 0.55);
}
/* ═══════════════════════════════════════════════════════════
§ 5 CAMADAS DE CONFIANÇA — grid de 4 cards (institucional)
═══════════════════════════════════════════════════════════ */
.camadas-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
gap: var(--space-sm);
margin-top: var(--space-md);
}
.camada-card {
background: #ffffff;
border: 1px solid var(--color-border-soft);
border-top: 3px solid var(--primitive-green-700);
border-radius: 4px;
display: flex;
flex-direction: column;
gap: 0.4rem;
padding: var(--space-md) var(--space-sm);
transition: box-shadow 0.22s ease, transform 0.22s ease;
}
.camada-card:hover {
box-shadow: 0 8px 18px rgba(16, 24, 40, 0.07);
transform: translateY(-2px);
}
.camada-label {
font-family: var(--font-body);
font-size: 0.63rem;
font-weight: 700;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--primitive-green-700);
}
.camada-title {
font-family: var(--font-display);
font-size: 1.05rem;
font-weight: 600;
color: var(--color-text-strong);
line-height: 1.2;
}
.camada-desc {
font-family: var(--font-body);
font-size: 0.83rem;
line-height: var(--line-height-base);
color: var(--color-text-muted);
margin: 0;
}
/* Variante escura */
body.legal-page .section-dark .camada-card {
background: rgba(255, 255, 255, 0.04);
border-color: rgba(255, 255, 255, 0.09);
border-top-color: var(--primitive-green-500, #1db954);
}
body.legal-page .section-dark .camada-card:hover {
background: rgba(255, 255, 255, 0.07);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
body.legal-page .section-dark .camada-label {
color: var(--primitive-green-500, #1db954);
}
body.legal-page .section-dark .camada-title {
color: #ffffff;
}
body.legal-page .section-dark .camada-desc {
color: rgba(255, 255, 255, 0.55);
}
/* ═══════════════════════════════════════════════════════════
§ 6 FINALIDADE / APLICAÇÕES — itens com borda lateral
═══════════════════════════════════════════════════════════ */
body.legal-page .finalidade-grid,
body.legal-page .applications-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 0.75rem;
margin-top: var(--space-md);
}
body.legal-page .finalidade-item,
body.legal-page .application-item {
background: #ffffff;
border-left: 3px solid var(--primitive-green-700);
padding: 0.9rem 1rem;
font-size: 0.9rem;
color: var(--color-text-base);
text-decoration: none;
display: flex;
align-items: flex-start;
transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
body.legal-page a.finalidade-item:hover,
body.legal-page a.application-item:hover {
border-left-color: var(--primitive-green-500, #1db954);
color: var(--primitive-green-700);
background: linear-gradient(135deg, #f7fbf9, #edf6f2);
}
/* ═══════════════════════════════════════════════════════════
§ 7 SVG LEGAL-GRAPHIC — em seções claras
═══════════════════════════════════════════════════════════ */
body.legal-page .text-block .legal-graphic,
body.legal-page .text-block-inner .legal-graphic {
display: block;
margin: var(--space-lg) auto;
max-width: 860px;
opacity: 0.88;
}
body.legal-page .text-block .legal-graphic svg text {
fill: var(--color-text-strong) !important;
}
/* ═══════════════════════════════════════════════════════════
§ 8 TECH BADGES
═══════════════════════════════════════════════════════════ */
.tech-badges {
display: flex;
flex-wrap: wrap;
gap: 0.45rem;
margin-top: var(--space-md);
}
.tech-badge {
font-family: var(--font-body);
font-size: 0.65rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-text-muted);
background: var(--color-surface-muted);
border: 1px solid var(--color-border-soft);
border-radius: 2px;
padding: 0.22rem 0.65rem;
}
/* ═══════════════════════════════════════════════════════════
§ 9 IDENTIFICAÇÃO JURÍDICA — grid (institucional)
═══════════════════════════════════════════════════════════ */
.legal-id-block {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: var(--space-sm);
margin-top: var(--space-md);
padding: var(--space-md);
background: linear-gradient(135deg, #f7fbf9, #edf6f2);
border: 1px solid var(--color-border-soft);
border-radius: 4px;
}
.legal-id-item {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.legal-id-item .label {
font-family: var(--font-body);
font-size: 0.65rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--color-text-muted);
}
.legal-id-item .value {
font-family: var(--font-body);
font-size: 0.9rem;
color: var(--color-text-strong);
line-height: 1.45;
}
/* ═══════════════════════════════════════════════════════════
§ 10 RESUMO TÉCNICO — wp-summary
═══════════════════════════════════════════════════════════ */
body.legal-page .wp-summary {
background: var(--color-surface-muted);
border-top: 1px solid var(--color-border-soft);
border-bottom: 1px solid var(--color-border-soft);
padding: var(--space-xl) var(--space-md);
}
body.legal-page .wp-summary-inner {
max-width: 640px;
margin: 0 auto;
text-align: center;
}
body.legal-page .wp-summary-inner h2 {
font-family: var(--font-display);
font-size: 1.35rem;
font-weight: 600;
color: var(--color-text-strong);
text-align: center;
margin-bottom: var(--space-sm);
}
body.legal-page .wp-summary-inner p {
font-size: 0.95rem;
line-height: var(--line-height-relaxed);
color: var(--color-text-muted);
}
/* ═══════════════════════════════════════════════════════════
§ 11 CTA FINAL — fundo escuro unificado
═══════════════════════════════════════════════════════════ */
body.legal-page .cta-final {
background: var(--primitive-green-950, #0b241b);
border: none;
border-radius: 0;
padding: var(--space-2xl) var(--space-md);
text-align: center;
position: relative;
overflow: hidden;
}
/* Detalhe geométrico de fundo */
body.legal-page .cta-final::before {
content: '';
position: absolute;
top: -100px;
right: -100px;
width: 420px;
height: 420px;
border-radius: 50%;
border: 1px solid rgba(45, 181, 96, 0.07);
pointer-events: none;
}
body.legal-page .cta-final::after {
content: '';
position: absolute;
top: -60px;
right: -60px;
width: 250px;
height: 250px;
border-radius: 50%;
border: 1px solid rgba(45, 181, 96, 0.05);
pointer-events: none;
}
body.legal-page .cta-final-inner {
max-width: 560px;
margin: 0 auto;
position: relative;
z-index: 1;
}
/* Eyebrow decorativo */
.cta-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-body);
font-size: 0.63rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--primitive-green-500, #1db954);
margin-bottom: var(--space-sm);
}
.cta-eyebrow::before,
.cta-eyebrow::after {
content: '';
width: 20px;
height: 1px;
background: var(--primitive-green-500, #1db954);
opacity: 0.45;
}
body.legal-page .cta-final h2 {
color: var(--primitive-green-100, #deeade);
font-size: clamp(1.3rem, 3vw, 1.9rem);
margin-bottom: 0.75rem;
line-height: 1.2;
letter-spacing: -0.02em;
}
body.legal-page .cta-final p {
color: rgba(255, 255, 255, 0.50);
font-size: 0.95rem;
line-height: 1.65;
margin-bottom: var(--space-md);
}
/* Botões */
body.legal-page .cta-final .btn-primary {
background: var(--primitive-green-500, #1db954);
color: #071a11;
border: 1px solid var(--primitive-green-500, #1db954);
font-weight: 700;
}
body.legal-page .cta-final .btn-primary:hover {
background: #17a348;
border-color: #17a348;
color: #071a11;
}
body.legal-page .cta-final .btn-secondary {
background: transparent;
color: rgba(255, 255, 255, 0.75);
border: 1px solid rgba(255, 255, 255, 0.22);
}
body.legal-page .cta-final .btn-secondary:hover {
background: rgba(255, 255, 255, 0.07);
color: #ffffff;
border-color: rgba(255, 255, 255, 0.38);
}
/* Dois botões lado a lado */
.cta-actions {
display: flex;
gap: var(--space-sm);
flex-wrap: wrap;
justify-content: center;
margin-top: var(--space-sm);
}
/* ═══════════════════════════════════════════════════════════
§ 12 BREADCRUMB — refinamento
═══════════════════════════════════════════════════════════ */
body.legal-page .breadcrumb {
padding: 0.875rem 2rem;
background: transparent;
border-bottom: 1px solid var(--color-border-soft);
font-size: 0.82rem;
max-width: 820px;
margin: 0 auto;
}
body.legal-page .breadcrumb ol {
display: flex;
gap: 0.5rem;
list-style: none;
padding: 0;
margin: 0;
align-items: center;
}
body.legal-page .breadcrumb li {
color: var(--color-text-muted);
display: flex;
align-items: center;
}
body.legal-page .breadcrumb li:not(:last-child)::after {
content: '›';
margin-left: 0.5rem;
opacity: 0.5;
}
body.legal-page .breadcrumb a {
color: var(--primitive-green-700);
text-decoration: none;
border-bottom: none;
}
body.legal-page .breadcrumb a:hover {
text-decoration: underline;
}
/* ═══════════════════════════════════════════════════════════
§ 13 ANIMAÇÕES
═══════════════════════════════════════════════════════════ */
body.legal-page .reveal-on-scroll {
opacity: 0;
transform: translateY(16px);
transition: opacity 0.55s cubic-bezier(.4,0,.2,1), transform 0.55s cubic-bezier(.4,0,.2,1);
}
body.legal-page .reveal-on-scroll.visible {
opacity: 1;
transform: translateY(0);
}
body.legal-page .legal-animate {
opacity: 0;
transform: translateY(12px);
transition: opacity 0.45s ease, transform 0.45s ease;
}
body.legal-page .legal-animate.visible {
opacity: 1;
transform: translateY(0);
}
/* ═══════════════════════════════════════════════════════════
§ 14 RESPONSIVIDADE
═══════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
body.legal-page .page-header--legal {
margin: var(--space-sm);
padding: 2.5rem 1.5rem 2.25rem;
}
body.legal-page .whitepaper-container {
padding: 0 1.25rem 3rem;
}
body.legal-page .text-block.section-muted,
body.legal-page .section-dark {
margin: 0 -1.25rem;
padding: var(--space-lg) 1.25rem;
}
body.legal-page .legal-grid {
grid-template-columns: 1fr;
}
body.legal-page .camadas-grid {
grid-template-columns: 1fr;
}
body.legal-page .finalidade-grid,
body.legal-page .applications-grid {
grid-template-columns: repeat(2, 1fr);
}
body.legal-page .legal-id-block {
grid-template-columns: 1fr;
}
.cta-actions {
flex-direction: column;
align-items: center;
}
.cta-actions .btn {
width: 100%;
max-width: 320px;
text-align: center;
}
body.legal-page .breadcrumb {
padding: 0.75rem 1.25rem;
}
}
@media (max-width: 480px) {
body.legal-page .finalidade-grid,
body.legal-page .applications-grid {
grid-template-columns: 1fr;
}
body.legal-page .page-header-pills {
gap: 0.35rem;
}
body.legal-page .page-header-pills .pill {
font-size: 0.62rem;
padding: 0.22rem 0.65rem;
}
}
@media (prefers-reduced-motion: reduce) {
body.legal-page .reveal-on-scroll,
body.legal-page .legal-animate,
body.legal-page .camada-card,
body.legal-page .legal-grid .feature-item {
animation: none !important;
transition: none !important;
transform: none !important;
opacity: 1 !important;
}
}