:root {
    --color-primary-dark: #184173;      
    --color-primary: #33ADE2;           
    --color-primary-light: #91D8F7;
    --color-primary-action: #137CA8;
    --color-white: #FEFEFE;
    --color-gray-100: #F5F7FA;
    --color-gray-200: #E4E7EB;
    --color-gray-300: #CBD2D9;
    --color-gray-400: #9AA5B1;
    --color-gray-500: #7B8794;
    --color-gray-600: #616E7C;
    --color-gray-700: #3E4C59;
    --color-gray-800: #323F4B;
    --color-gray-900: #1F2933;
    --color-black: #0D1117;
    --color-success: #10B981;
    --color-warning: #F59E0B;
    --color-error: #EF4444;
    --color-info: #3B82F6;
    --font-display: 'Space Grotesk', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-primary: 'IBM Plex Sans', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-secondary: 'Space Grotesk', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'IBM Plex Mono', 'JetBrains Mono', 'Consolas', monospace;
    --text-xs: 0.75rem;                 
    --text-sm: 0.875rem;                
    --text-base: 1rem;                  
    --text-lg: 1.125rem;                
    --text-xl: 1.25rem;                 
    --text-2xl: 1.5rem;                 
    --text-3xl: 1.875rem;               
    --text-4xl: 2.25rem;                
    --text-5xl: 3rem;                   
    --text-6xl: 3.75rem;                
    --text-7xl: 4.5rem;                 
    --font-light: 300;
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --font-extrabold: 800;
    --leading-none: 1;
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;
    --leading-loose: 2;
    --tracking-tighter: -0.05em;
    --tracking-tight: -0.025em;
    --tracking-normal: 0;
    --tracking-wide: 0.025em;
    --tracking-wider: 0.05em;
    --tracking-widest: 0.1em;
    --space-0: 0;
    --space-1: 0.25rem;                 
    --space-2: 0.5rem;                  
    --space-3: 0.75rem;                 
    --space-4: 1rem;                    
    --space-5: 1.25rem;                 
    --space-6: 1.5rem;                  
    --space-8: 2rem;                    
    --space-10: 2.5rem;                 
    --space-12: 3rem;                   
    --space-16: 4rem;                   
    --space-20: 5rem;                   
    --space-24: 6rem;                   
    --space-32: 8rem;                   
    --section-padding-y: var(--space-20);
    --section-padding-y-mobile: var(--space-12);
    --container-max-width: 1280px;
    --container-padding-x: var(--space-6);
    --container-padding-x-mobile: var(--space-4);
    --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    --shadow-card: 0 4px 20px rgba(24, 65, 115, 0.08);
    --shadow-card-hover: 0 8px 30px rgba(24, 65, 115, 0.15);
    --radius-none: 0;
    --radius-sm: 0.25rem;               
    --radius-md: 0.375rem;              
    --radius-lg: 0.5rem;                
    --radius-xl: 0.75rem;               
    --radius-2xl: 1rem;                 
    --radius-full: 9999px;
    --border-width: 1px;
    --border-width-2: 2px;
    --border-width-4: 4px;
    --transition-fast: 150ms ease;
    --transition-base: 200ms ease;
    --transition-slow: 300ms ease;
    --transition-slower: 500ms ease;
    --transition-colors: color 200ms ease, background-color 200ms ease, border-color 200ms ease;
    --transition-transform: transform 200ms ease;
    --transition-shadow: box-shadow 200ms ease;
    --transition-all: all 200ms ease;
    --z-behind: -1;
    --z-base: 0;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-header: 300;
    --z-modal-backdrop: 400;
    --z-modal: 500;
    --z-tooltip: 600;
    --z-cookies: 700;
}
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html {
    font-size: 100%;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}
body {
    min-height: 100vh;
    font-family: var(--font-primary);
    font-size: var(--text-base);
    font-weight: var(--font-normal);
    line-height: var(--leading-normal);
    color: var(--color-gray-900);
    background-color: var(--color-white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
    height: auto;
}
input,
button,
textarea,
select {
    font: inherit;
    color: inherit;
}
button {
    cursor: pointer;
    background: none;
    border: none;
}
a {
    color: inherit;
    text-decoration: none;
}
ul,
ol {
    list-style: none;
}
p,
h1,
h2,
h3,
h4,
h5,
h6 {
    overflow-wrap: break-word;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
h1,
h2 {
    font-family: var(--font-display);
    font-weight: var(--font-bold);
    line-height: var(--leading-tight);
    color: var(--color-gray-900);
}
h3,
h4,
h5,
h6 {
    font-family: var(--font-primary);
    font-weight: var(--font-bold);
    line-height: var(--leading-tight);
    color: var(--color-gray-900);
}
h1 {
    font-size: var(--text-4xl);
    letter-spacing: var(--tracking-tight);
}
h2 {
    font-size: var(--text-3xl);
    letter-spacing: var(--tracking-tight);
}
h3 {
    font-size: var(--text-2xl);
}
h4 {
    font-size: var(--text-xl);
}
h5 {
    font-size: var(--text-lg);
}
h6 {
    font-size: var(--text-base);
}
p {
    margin-bottom: var(--space-4);
}
p:last-child {
    margin-bottom: 0;
}
strong,
b {
    font-weight: var(--font-semibold);
}
em,
i {
    font-style: italic;
}
small {
    font-size: var(--text-sm);
}
a {
    color: var(--color-primary);
    transition: var(--transition-colors);
}
a:hover {
    color: var(--color-primary-dark);
}
*:focus {
    outline: none;
}
*:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}
::selection {
    background-color: var(--color-primary);
    color: var(--color-white);
}
.skip-link {
    position: absolute;
    top: -100%;
    left: 50%;
    transform: translateX(-50%);
    padding: var(--space-3) var(--space-6);
    background: var(--color-primary-dark);
    color: var(--color-white);
    text-decoration: none;
    border-radius: var(--radius-md);
    z-index: var(--z-tooltip);
    transition: top var(--transition-base);
}
.skip-link:focus {
    top: var(--space-4);
}
.container {
    width: 100%;
    max-width: var(--container-max-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--container-padding-x-mobile);
    padding-right: var(--container-padding-x-mobile);
}
@media (min-width: 640px) {
    .container {
        padding-left: var(--container-padding-x);
        padding-right: var(--container-padding-x);
    }
}
.grid {
    display: grid;
    gap: var(--space-6);
}
.grid--cols-1 {
    grid-template-columns: 1fr;
}
.grid--cols-2 {
    grid-template-columns: 1fr;
}
.grid--cols-3 {
    grid-template-columns: 1fr;
}
.grid--cols-4 {
    grid-template-columns: 1fr;
}
@media (min-width: 640px) {
    .grid--cols-2 {
        grid-template-columns: repeat(2, 1fr);
    }
    .grid--cols-3 {
        grid-template-columns: repeat(2, 1fr);
    }
    .grid--cols-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (min-width: 1024px) {
    .grid--cols-3 {
        grid-template-columns: repeat(3, 1fr);
    }
    .grid--cols-4 {
        grid-template-columns: repeat(4, 1fr);
    }
}
.section {
    padding-top: var(--section-padding-y-mobile);
    padding-bottom: var(--section-padding-y-mobile);
}
@media (min-width: 1024px) {
    .section {
        padding-top: var(--section-padding-y);
        padding-bottom: var(--section-padding-y);
    }
}
.section--gray {
    background-color: var(--color-gray-100);
}
.section--dark {
    background-color: var(--color-primary-dark);
    color: var(--color-white);
}
.section__header {
    text-align: center;
    margin-bottom: var(--space-12);
}
.section__title {
    font-size: var(--text-2xl);
    margin-bottom: var(--space-4);
}
.section__subtitle {
    font-size: var(--text-lg);
    color: var(--color-gray-600);
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}
.section--dark .section__subtitle {
    color: var(--color-gray-300);
}
@media (min-width: 640px) {
    .section__title {
        font-size: var(--text-3xl);
    }
}
@media (min-width: 1024px) {
    .section__title {
        font-size: var(--text-4xl);
    }
}
.text-center {
    text-align: center;
}
.text-left {
    text-align: left;
}
.text-right {
    text-align: right;
}
.text-primary {
    color: var(--color-primary);
}
.text-primary-dark {
    color: var(--color-primary-dark);
}
.text-gray {
    color: var(--color-gray-600);
}
.text-white {
    color: var(--color-white);
}
.text-sm {
    font-size: var(--text-sm);
}
.text-lg {
    font-size: var(--text-lg);
}
.font-medium {
    font-weight: var(--font-medium);
}
.font-semibold {
    font-weight: var(--font-semibold);
}
.font-bold {
    font-weight: var(--font-bold);
}
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.hidden {
    display: none !important;
}
.block {
    display: block;
}
.inline-block {
    display: inline-block;
}
.flex {
    display: flex;
}
.inline-flex {
    display: inline-flex;
}
.mt-4 {
    margin-top: var(--space-4);
}
.mt-8 {
    margin-top: var(--space-8);
}
.mb-4 {
    margin-bottom: var(--space-4);
}
.mb-8 {
    margin-bottom: var(--space-8);
}
.mx-auto {
    margin-left: auto;
    margin-right: auto;
}
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: var(--color-white);
    box-shadow: var(--shadow-sm);
    z-index: var(--z-header);
    transition: var(--transition-base);
}
.header--transparent {
    background-color: transparent;
    box-shadow: none;
}
.header--scrolled {
    background-color: var(--color-white);
    box-shadow: var(--shadow-sm);
}
.header__container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 72px;
}
@media (min-width: 1024px) {
    .header__container {
        height: 80px;
    }
}
.header__logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.header__logo img {
    height: 36px;
    width: auto;
}
.header__logo-dark {
    display: block;
}
.header__logo-light {
    display: none;
}
@media (min-width: 1024px) {
    .header__logo img {
        height: 40px;
    }
}
.header__toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    padding: 8px;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: calc(var(--z-modal) + 1);
}
@media (min-width: 1024px) {
    .header__toggle {
        display: none;
    }
}
.header__toggle-bar {
    display: block;
    width: 24px;
    height: 2px;
    background-color: var(--color-gray-900);
    transition: var(--transition-base);
    transform-origin: center;
}
.header__toggle[aria-expanded="true"] .header__toggle-bar:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}
.header__toggle[aria-expanded="true"] .header__toggle-bar:nth-child(2) {
    opacity: 0;
}
.header__toggle[aria-expanded="true"] .header__toggle-bar:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}
.header__overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: var(--transition-base);
    z-index: calc(var(--z-modal) - 1);
}
.header__overlay.is-visible {
    opacity: 1;
    visibility: visible;
}
@media (min-width: 1024px) {
    .header__overlay {
        display: none;
    }
}
.header__nav {
    position: fixed;
    top: 0;
    right: -100%;
    width: 80%;
    max-width: 320px;
    height: 100vh;
    background: var(--color-white);
    box-shadow: var(--shadow-2xl);
    transition: right var(--transition-slow);
    z-index: var(--z-modal);
    overflow-y: auto;
    padding: var(--space-20) var(--space-6) var(--space-6);
}
.header__nav.is-open {
    right: 0;
}
@media (min-width: 1024px) {
    .header__nav {
        position: static;
        width: auto;
        max-width: none;
        height: auto;
        background: transparent;
        box-shadow: none;
        padding: 0;
        overflow: visible;
    }
}
.header__menu {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}
@media (min-width: 1024px) {
    .header__menu {
        flex-direction: row;
        align-items: center;
        gap: var(--space-1);
    }
}
.header__item {
    position: relative;
}
.header__link {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    color: var(--color-gray-700);
    border-radius: var(--radius-md);
    transition: var(--transition-colors);
}
.header__link:hover {
    color: var(--color-primary-dark);
    background-color: var(--color-gray-100);
}
.header__link[aria-current="page"] {
    color: var(--color-primary-dark);
}
@media (min-width: 1024px) {
    .header__link {
        padding: var(--space-2) var(--space-3);
    }
    .header__link:hover {
        background-color: transparent;
    }
}
.header__arrow {
    width: 16px;
    height: 16px;
    transition: var(--transition-transform);
}
.header__submenu {
    display: none;
    flex-direction: column;
    padding-left: var(--space-4);
    margin-top: var(--space-1);
}
.header__item--dropdown.is-open .header__submenu {
    display: flex;
}
.header__item--dropdown.is-open .header__arrow {
    transform: rotate(180deg);
}
@media (min-width: 1024px) {
    .header__submenu {
        position: absolute;
        top: 100%;
        left: 0;
        min-width: 220px;
        background-color: var(--color-white);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-lg);
        padding: var(--space-2);
        padding-top: var(--space-4);
        margin-top: 0;
        opacity: 0;
        visibility: hidden;
        transform: translateY(0);
        transition: opacity 0.2s ease, visibility 0.2s ease;
    }
    .header__item--dropdown::after {
        content: '';
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        height: 20px;
        background: transparent;
    }
    .header__item--dropdown:hover .header__submenu,
    .header__item--dropdown:focus-within .header__submenu {
        display: flex;
        opacity: 1;
        visibility: visible;
    }
    .header__item--dropdown:hover .header__arrow,
    .header__item--dropdown:focus-within .header__arrow {
        transform: rotate(180deg);
    }
    .header__item--dropdown.is-open .header__submenu {
        display: flex;
        opacity: 1;
        visibility: visible;
    }
}
.header__submenu a {
    display: block;
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-sm);
    color: var(--color-gray-600);
    border-radius: var(--radius-md);
    transition: var(--transition-colors);
}
.header__submenu a:hover {
    color: var(--color-primary-dark);
    background-color: var(--color-gray-100);
}
.header__cta {
    display: none;
}
@media (min-width: 1024px) {
    .header__cta {
        display: inline-flex;
        margin-left: var(--space-4);
    }
}
.header__cta-mobile {
    display: block;
    margin-top: var(--space-6);
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-gray-200);
}
@media (min-width: 1024px) {
    .header__cta-mobile {
        display: none;
    }
}
.main {
    padding-top: 72px;
}
@media (min-width: 1024px) {
    .main {
        padding-top: 80px;
    }
}
.main--hero-transparent {
    padding-top: 0;
}
/* ============================================
   FOOTER — refator pos-diagnostico ux-ui-revisor (5 fixes)
   ============================================ */

.footer {
    background-color: #1F2933;          /* D100 — volta cor original (cinza-quase-preto), cria contraste com CTA navy acima */
    color: var(--color-gray-300);
    padding-top: 48px;
    padding-bottom: 24px;
    border-top: 3px solid #91D8F7;      /* mantem filete editorial ciano (D98) */
}

.footer__grid {
    display: grid;
    grid-template-columns: 1fr;     /* mobile: 1 col com accordion */
    gap: 0;
    margin-bottom: 24px;
}

/* Tablet 640-1023: 2 cols + brand row propria (FIX 2) */
@media (min-width: 640px) and (max-width: 1023px) {
    .footer__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 32px 24px;
        margin-bottom: 32px;
    }
}

/* Desktop >=1024: 4 cols + brand row propria (FIX 1) */
@media (min-width: 1024px) {
    .footer__grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 32px 24px;
        margin-bottom: 32px;
    }
}

/* Brand vira ROW separada acima das colunas — desktop e tablet */
.footer__brand {
    max-width: none;
    margin-bottom: 0;
}

@media (min-width: 640px) {
    .footer__brand {
        grid-column: 1 / -1;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 12px 32px;
        padding-bottom: 20px;
        margin-bottom: 8px;
        border-bottom: 1px solid rgba(145, 216, 247, 0.18);   /* D98 — borda sutil ciano em vez de cinza escuro */
    }
    .footer__brand .footer__description,
    .footer__brand .footer__tagline {
        margin: 0;
        flex-shrink: 1;
    }
    .footer__brand .footer__tagline {
        margin-left: auto;
        color: #91D8F7;
        /* D98 — italico removido (padrao Estratigrafia evita italico em componentes principais) */
    }
}

.footer__logo {
    height: 32px;
    width: auto;
    margin: 0;
    flex-shrink: 0;
}

/* Estilo de coluna padrao + accordion mobile via <details> */
.footer__column {
    border-bottom: 1px solid rgba(145, 216, 247, 0.12);   /* D98 — separador sutil em fundo navy */
}

.footer__column[open] summary {
    color: #91D8F7;       /* D98 — mantem cor eyebrow editorial mesmo aberto */
}

/* Summary mobile — D98: eyebrow editorial padrao Estratigrafia (era 13px/700/0.06em #FFFFFF) */
.footer__title,
.footer__column > summary {
    font-family: var(--font-primary, 'IBM Plex Sans', sans-serif);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: #91D8F7;
    margin: 0;
    list-style: none;
}

.footer__column > summary {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
}

.footer__column > summary::-webkit-details-marker { display: none; }

.footer__column > summary::after {
    content: "+";
    font-size: 22px;
    color: var(--color-primary-light, #91D8F7);
    font-weight: 400;
    line-height: 1;
}
.footer__column[open] > summary::after { content: "−"; }

.footer__column > ul,
.footer__column > .footer__contact {
    padding: 0 0 16px;
}

@media (min-width: 640px) {
    .footer__column {
        border-bottom: none;
    }
    .footer__column > summary {
        cursor: default;
        pointer-events: none;
        padding: 0;
        margin-bottom: 16px;
    }
    .footer__column > summary::after { display: none; }
    .footer__column > ul,
    .footer__column > .footer__contact {
        padding: 0;
        display: block !important;   /* forca aberto em desktop/tablet */
    }
    /* Reset do <details> em desktop — esconde estado open/closed */
    .footer__column[open] > ul,
    .footer__column:not([open]) > ul {
        display: block !important;
    }
}

/* Links FIX 4 — densidade e cor mais quente */
.footer__links {
    display: flex;
    flex-direction: column;
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.footer__links a {
    color: #CBD2D9;
    font-size: 14px;
    text-decoration: none;
    transition: color .2s ease;
}
.footer__links a:hover {
    color: #91D8F7;       /* D98 — alinha com padrao Estratigrafia sobre fundo navy */
}

/* Coluna 4 — Contato & Legal */
.footer__column--contact small {
    color: #7B8794;
    font-size: 0.85em;
}
.footer__column--contact .footer__contact {
    margin-bottom: 16px;
    line-height: 1.7;
}
.footer__column--contact .footer__contact a {
    color: #CBD2D9;
    transition: color .2s ease;
    text-decoration: none;
}
.footer__column--contact .footer__contact a:hover {
    color: var(--color-primary, #33ADE2);
}
/* ============================================
   SECTION HEADER — eyebrow + numeração enterprise
   (estilo Pentagram / Bloomberg / FT — autoridade editorial)
   ============================================ */

.section__eyebrow {
    display: flex;
    align-items: center;
    gap: var(--space-3, 0.75rem);
    font-family: var(--font-primary, 'IBM Plex Sans', sans-serif);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--color-primary-action, #137CA8);
    margin-bottom: var(--space-3, 0.75rem);
}

.section__eyebrow::before {
    content: '';
    width: 28px;
    height: 1px;
    background-color: var(--color-primary-action, #137CA8);
    flex-shrink: 0;
}

.section__eyebrow-number {
    font-family: var(--font-display, 'Space Grotesk', sans-serif);
    font-weight: 500;
    color: var(--color-primary-dark, #184173);
    opacity: 0.6;
}

/* Aumenta ritmo vertical das section__header (respiração institucional) */
.section__header {
    margin-bottom: var(--space-12, 3rem);
}

@media (min-width: 1024px) {
    .section__header {
        margin-bottom: var(--space-16, 4rem);
    }
}

.footer__description {
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    margin-bottom: var(--space-2);
}
.footer__tagline {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--color-primary-light, #91D8F7);
    line-height: var(--leading-relaxed);
    margin-bottom: var(--space-6);
}
.footer__social {
    display: flex;
    gap: var(--space-3);
}
.footer__social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: var(--color-gray-800);
    border-radius: var(--radius-full);
    color: var(--color-gray-400);
    transition: var(--transition-all);
}
.footer__social a:hover {
    background-color: var(--color-primary);
    color: var(--color-white);
}
.footer__social svg {
    width: 20px;
    height: 20px;
}
/* Min-width 0 evita overflow em grid items com texto longo */
.footer__column { min-width: 0; }

.footer__contact { font-style: normal; }
.footer__contact p {
    font-size: 14px;
    line-height: 1.7;
    margin: 0 0 12px;
    color: #CBD2D9;
}
.footer__contact p:last-child { margin-bottom: 0; }
.footer__contact strong {
    display: block;
    color: var(--color-gray-200);
    margin-bottom: 2px;
}
/* FIX 5 — bottom row: copyright esquerda + legal direita em desktop */
.footer__bottom {
    padding-top: 20px;
    margin-top: 24px;
    border-top: 1px solid rgba(203, 210, 217, 0.08);   /* separador sutil premium */
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 8px 20px;
}
.footer__copyright {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    align-items: center;
    font-size: 12px;
    color: #9AA5B1;
    margin: 0;
    line-height: 1.6;
}
.footer__cnpj {
    color: #7B8794;
}
.footer__legal-links {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    font-size: 12px;
    color: #7B8794;
    margin: 0;
    list-style: none;
    padding: 0;
}
.footer__legal-links a {
    color: #CBD2D9;
    text-decoration: none;
    transition: color .2s ease;
}
.footer__legal-links a:hover {
    color: var(--color-primary, #33ADE2);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.footer__legal-links span {
    color: #4A5568;
    user-select: none;
}
/* Mobile <480px — copyright vertical */
@media (max-width: 480px) {
    .footer__copyright {
        flex-direction: column;
        gap: 2px;
        align-items: flex-start;
    }
    .footer__bottom {
        flex-direction: column;
        align-items: flex-start;
    }
}
.cta-section {
    background-color: var(--color-primary-dark);
    padding: var(--space-16) 0;
    text-align: center;
}
.cta-section__title {
    font-size: var(--text-2xl);
    color: var(--color-white);
    margin-bottom: var(--space-4);
}
@media (min-width: 640px) {
    .cta-section__title {
        font-size: var(--text-3xl);
    }
}
@media (min-width: 1024px) {
    .cta-section__title {
        font-size: var(--text-4xl);
    }
}
.cta-section__text {
    font-size: var(--text-lg);
    color: var(--color-gray-300);
    max-width: 600px;
    margin: 0 auto var(--space-8);
}
.cta-section .btn {
    min-width: 200px;
}
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    font-family: var(--font-primary);
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    line-height: var(--leading-tight);
    text-decoration: none;
    border-radius: var(--radius-md);
    border: var(--border-width-2) solid transparent;
    cursor: pointer;
    transition: var(--transition-all);
}
.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.btn--primary {
    background-color: var(--color-primary-action);
    color: var(--color-white);
    border-color: var(--color-primary-action);
}
.btn--primary:hover:not(:disabled) {
    background-color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    color: var(--color-white);
}
.btn--secondary {
    background-color: transparent;
    color: var(--color-primary-action);
    border-color: var(--color-primary-action);
}
.btn--secondary:hover:not(:disabled) {
    background-color: var(--color-primary-action);
    color: var(--color-white);
}
.btn--ghost {
    background-color: transparent;
    color: var(--color-primary-action);
    border-color: transparent;
}
.btn--ghost:hover:not(:disabled) {
    background-color: var(--color-gray-100);
}
.btn--white {
    background-color: var(--color-white);
    color: var(--color-primary-dark);
    border-color: var(--color-white);
}
.btn--white:hover:not(:disabled) {
    background-color: var(--color-gray-100);
    border-color: var(--color-gray-100);
}
.btn--sm {
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-sm);
}
.btn--lg {
    padding: var(--space-4) var(--space-8);
    font-size: var(--text-lg);
}
.btn__icon {
    width: 1.25em;
    height: 1.25em;
    flex-shrink: 0;
}
.card {
    background-color: var(--color-white);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    box-shadow: var(--shadow-card);
    transition: var(--transition-shadow), var(--transition-transform);
}
.card:hover {
    box-shadow: var(--shadow-card-hover);
}
.card--solution {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.card--solution:hover {
    transform: translateY(-4px);
}
.card__icon {
    width: 48px;
    height: 48px;
    margin-bottom: var(--space-4);
    color: var(--color-primary);
}
.card__icon svg {
    width: 100%;
    height: 100%;
}
.card__title {
    font-size: var(--text-xl);
    font-weight: var(--font-semibold);
    margin-bottom: var(--space-3);
    color: var(--color-gray-900);
}
.card__description {
    font-size: var(--text-base);
    color: var(--color-gray-600);
    line-height: var(--leading-relaxed);
    margin-bottom: var(--space-4);
    flex-grow: 1;
}
.card__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    color: var(--color-primary);
    transition: var(--transition-colors);
}
.card__link:hover {
    color: var(--color-primary-dark);
}
.card__link svg {
    width: 1em;
    height: 1em;
    transition: var(--transition-transform);
}
.card__link:hover svg {
    transform: translateX(4px);
}
.card--partner {
    text-align: center;
    padding: var(--space-8);
}
.card__logo {
    max-width: 120px;
    height: 60px;
    object-fit: contain;
    margin: 0 auto var(--space-4);
    filter: grayscale(100%);
    opacity: 0.7;
    transition: var(--transition-all);
}
.card--partner:hover .card__logo {
    filter: grayscale(0%);
    opacity: 1;
}
.card--feature {
    text-align: center;
    padding: var(--space-8);
    background-color: var(--color-gray-100);
    border: none;
    box-shadow: none;
}
.card__number {
    display: block;
    font-size: var(--text-5xl);
    font-weight: var(--font-extrabold);
    color: var(--color-primary);
    line-height: var(--leading-none);
    margin-bottom: var(--space-2);
}
.card--feature .card__title {
    font-size: var(--text-lg);
    font-weight: var(--font-medium);
    margin-bottom: var(--space-2);
}
.card--feature .card__description {
    font-size: var(--text-sm);
    margin-bottom: 0;
}
.form {
    width: 100%;
}
.form__group {
    margin-bottom: var(--space-5);
}
.form__label {
    display: block;
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--color-gray-700);
    margin-bottom: var(--space-2);
}
.form__required {
    color: var(--color-error);
}
.form__input,
.form__select,
.form__textarea {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-base);
    color: var(--color-gray-900);
    background-color: var(--color-white);
    border: var(--border-width) solid var(--color-gray-300);
    border-radius: var(--radius-md);
    transition: var(--transition-colors), var(--transition-shadow);
}
.form__input:focus,
.form__select:focus,
.form__textarea:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(51, 173, 226, 0.2);
    outline: none;
}
.form__input::placeholder,
.form__textarea::placeholder {
    color: var(--color-gray-400);
}
.form__input--error,
.form__select--error,
.form__textarea--error {
    border-color: var(--color-error);
}
.form__input--error:focus,
.form__select--error:focus,
.form__textarea--error:focus {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2);
}
.form__textarea {
    min-height: 120px;
    resize: vertical;
}
.form__select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237B8794' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-3) center;
    padding-right: var(--space-10);
}
.form__error {
    display: block;
    font-size: var(--text-sm);
    color: var(--color-error);
    margin-top: var(--space-1);
    opacity: 0;
    height: 0;
    overflow: hidden;
    transition: var(--transition-fast);
}
.form__error--visible {
    opacity: 1;
    height: auto;
    margin-top: var(--space-2);
}
.form__group--checkbox {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
}
.form__checkbox {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: var(--color-primary);
    cursor: pointer;
}
.form__label--checkbox {
    margin-bottom: 0;
    font-size: var(--text-base);
    font-weight: var(--font-normal);
    cursor: pointer;
}
.form__label--checkbox a {
    text-decoration: underline;
}
.form__honeypot {
    position: absolute;
    left: -9999px;
    opacity: 0;
    pointer-events: none;
}
.form__group--submit {
    margin-top: var(--space-6);
}
.form__submit {
    width: 100%;
}
@media (min-width: 640px) {
    .form__submit {
        width: auto;
    }
}
.form__submit-loading {
    display: none;
}
.form__submit--loading .form__submit-text {
    display: none;
}
.form__submit--loading .form__submit-loading {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}
.form__feedback {
    padding: var(--space-4);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    margin-top: var(--space-4);
    opacity: 0;
    height: 0;
    overflow: hidden;
    transition: var(--transition-base);
}
.form__feedback--visible {
    opacity: 1;
    height: auto;
}
.form__feedback--success {
    background-color: rgba(16, 185, 129, 0.1);
    color: var(--color-success);
    border: 1px solid var(--color-success);
}
.form__feedback--error {
    background-color: rgba(239, 68, 68, 0.1);
    color: var(--color-error);
    border: 1px solid var(--color-error);
}
.badge {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    border-radius: var(--radius-full);
}
.badge--primary {
    background-color: rgba(51, 173, 226, 0.1);
    color: var(--color-primary);
}
.badge--dark {
    background-color: rgba(24, 65, 115, 0.1);
    color: var(--color-primary-dark);
}
.badge--light {
    background-color: rgba(255, 255, 255, 0.2);
    color: var(--color-white);
}
.breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-gray-500);
    margin-bottom: var(--space-4);
}
.breadcrumb__item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.breadcrumb__link {
    color: var(--color-gray-500);
    transition: var(--transition-colors);
}
.breadcrumb__link:hover {
    color: var(--color-primary);
}
.breadcrumb__separator {
    color: var(--color-gray-400);
}
.breadcrumb__current {
    color: var(--color-gray-700);
    font-weight: var(--font-medium);
}
.breadcrumb--light {
    color: var(--color-gray-300);
}
.breadcrumb--light .breadcrumb__link {
    color: var(--color-gray-300);
}
.breadcrumb--light .breadcrumb__link:hover {
    color: var(--color-white);
}
.breadcrumb--light .breadcrumb__current {
    color: var(--color-white);
}
.cookies {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--color-gray-900);
    color: var(--color-white);
    padding: var(--space-4) 0;
    z-index: var(--z-cookies);
    transform: translateY(100%);
    transition: transform var(--transition-slow);
}
.cookies.is-visible {
    transform: translateY(0);
}
.cookies__container {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
@media (min-width: 768px) {
    .cookies__container {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}
.cookies__text {
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    margin: 0;
}
.cookies__text a {
    color: var(--color-primary-light);
    text-decoration: underline;
}
.cookies__actions {
    display: flex;
    gap: var(--space-3);
    flex-shrink: 0;
}
.cookies__accept {
    padding: var(--space-2) var(--space-4);
}
.cookies__decline {
    padding: var(--space-2) var(--space-4);
    color: var(--color-gray-300);
}
.cookies__decline:hover {
    color: var(--color-white);
    background-color: transparent;
}
.cookies__customize {
    padding: var(--space-2) var(--space-4);
    color: var(--color-primary-light);
    background: transparent;
    border: 1px solid var(--color-gray-700);
}
.cookies__customize:hover {
    color: var(--color-white);
    border-color: var(--color-primary);
    background: rgba(255, 255, 255, 0.05);
}
.cookies__actions {
    flex-wrap: wrap;
}

/* ============================================
   COOKIES MODAL — personalização granular (LGPD + ANPD CD/4/2024)
   ============================================ */

.cookies-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(15, 42, 77, 0.7);
    backdrop-filter: blur(4px);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
}
.cookies-modal.is-visible {
    display: flex;
}
.cookies-modal__content {
    background-color: var(--color-white);
    border-radius: var(--radius-lg);
    max-width: 640px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px -10px rgba(0, 0, 0, 0.4);
}
.cookies-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-6);
    border-bottom: 1px solid var(--color-gray-200);
}
.cookies-modal__header h2 {
    font-size: var(--text-xl);
    margin: 0;
    color: var(--color-primary-dark);
}
.cookies-modal__close {
    background: transparent;
    border: none;
    font-size: 1.75rem;
    line-height: 1;
    color: var(--color-gray-600);
    cursor: pointer;
    padding: 0 var(--space-2);
    transition: color .2s ease;
}
.cookies-modal__close:hover {
    color: var(--color-primary-dark);
}
.cookies-modal__body {
    padding: var(--space-6);
    color: var(--color-gray-700);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
}
.cookies-modal__legal {
    font-size: var(--text-xs);
    color: var(--color-gray-600);
    font-style: italic;
    margin-top: var(--space-6);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-gray-200);
}
.cookies-modal__footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-6);
    background-color: var(--color-gray-100);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    flex-wrap: wrap;
}

.cookies-cat {
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-gray-200);
}
.cookies-cat:last-of-type {
    border-bottom: none;
}
.cookies-cat__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
}
.cookies-cat__header h3 {
    font-size: var(--text-base);
    font-weight: var(--font-bold);
    color: var(--color-primary-dark);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.cookies-cat__badge {
    font-size: 0.625rem;
    font-weight: var(--font-semibold);
    padding: 2px 8px;
    border-radius: var(--radius-full);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.cookies-cat__badge--required {
    background-color: var(--color-gray-200);
    color: var(--color-gray-700);
}
.cookies-cat__desc {
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    color: var(--color-gray-700);
    margin: 0;
}
.cookies-cat__toggle {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}
.cookies-cat__toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}
.cookies-cat__toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: var(--color-gray-300);
    border-radius: 24px;
    transition: background-color .2s ease;
}
.cookies-cat__toggle-slider::before {
    content: '';
    position: absolute;
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: var(--color-white);
    border-radius: 50%;
    transition: transform .2s ease;
}
.cookies-cat__toggle input:checked + .cookies-cat__toggle-slider {
    background-color: var(--color-primary, #33ADE2);
}
.cookies-cat__toggle input:checked + .cookies-cat__toggle-slider::before {
    transform: translateX(20px);
}
.cookies-cat__toggle input:focus + .cookies-cat__toggle-slider {
    outline: 2px solid var(--color-primary, #33ADE2);
    outline-offset: 2px;
}

.related {
    padding: var(--space-12) 0;
    background-color: var(--color-gray-100);
}
.related__title {
    font-size: var(--text-2xl);
    margin-bottom: var(--space-8);
}
.related__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-8);
    margin-bottom: var(--space-8);
}
@media (min-width: 640px) {
    .related__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (min-width: 1024px) {
    .related__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
.related__subtitle {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--color-primary-dark);
    margin-bottom: var(--space-4);
}
.related__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.related__list a {
    color: var(--color-gray-700);
    font-size: var(--text-base);
    transition: var(--transition-colors);
}
.related__list a:hover {
    color: var(--color-primary);
}
.related__cta {
    text-align: center;
    padding-top: var(--space-8);
    border-top: 1px solid var(--color-gray-200);
}
.related__cta p {
    font-size: var(--text-lg);
    color: var(--color-gray-700);
    margin-bottom: var(--space-4);
}
.animate-on-scroll {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================
   HERO-INTERNAL — Estratigrafia (D88, Nivel 2)
   Aplica peca grafica nos heros de 83 paginas internas via ::after.
   Nao toca markup HTML — pseudo-elemento + SVG via background-image.
   ============================================ */

.hero-internal {
    overflow: hidden;       /* impede ::after de escapar do hero */
}

.hero-internal::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 32%;
    height: 100%;
    background-image: url('/assets/svg/hero-estratigrafia-internal.svg');
    background-repeat: no-repeat;
    background-position: center right;
    background-size: cover;
    pointer-events: none;
    opacity: 0.85;
    z-index: 0;
}

/* Eleva o conteudo acima do pseudo-elemento */
.hero-internal > .container,
.hero-internal .container {
    position: relative;
    z-index: 1;
}

/* Limita largura do conteudo a ~62% para respeitar a peca a direita.
   Sem isso titulos longos invadem a Estratigrafia (ex: /ferramentas/3cx,
   /produtos/spkr-shield com titulo "Perimetro Sophos NGFW gerenciado..."). */
.hero-internal__title,
.hero-internal__subtitle,
.hero-internal .container > h1,
.hero-internal .container > p,
.hero-internal .container > .btn,
.hero-internal .container > a.btn,
.hero-internal .container > div:not(.hero-internal__icon) {
    max-width: 62%;
}

/* Mobile: libera largura total — Estratigrafia ja vai pra opacity baixa */
@media (max-width: 767px) {
    .hero-internal__title,
    .hero-internal__subtitle,
    .hero-internal .container > h1,
    .hero-internal .container > p,
    .hero-internal .container > .btn,
    .hero-internal .container > a.btn,
    .hero-internal .container > div:not(.hero-internal__icon) {
        max-width: 100%;
    }
}

/* Mobile: reduz peca grafica para nao competir com texto em telas estreitas */
@media (max-width: 767px) {
    .hero-internal::after {
        width: 45%;
        opacity: 0.45;     /* ainda mais discreta no mobile */
    }
}

/* ============================================
   STRATA-CARD — sistema de card pillars-style reutilizavel (D92)
   Padrao: filete topo colorido + filete sutil rodape + hover sutil +
   variant --featured (fundo navy escuro). Aplicado em Solutions, Products,
   Sectors, Cases na home. Reusa em qualquer outra secao do site.
   ============================================ */

.strata-grid {
    display: grid;
    gap: 20px;
    margin-top: 48px;
    align-items: stretch;
}
.strata-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.strata-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.strata-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }

.strata-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: #FFFFFF;
    color: #1F2933;
    text-decoration: none;
    padding: 0 28px;
    transition: transform 240ms cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 240ms ease;
    --strata-acc: #137CA8;       /* cor acento default — pode ser sobrescrita por data-strata-section */
}
.strata-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 36px rgba(15, 31, 46, 0.10);
}
.strata-card:focus-visible {
    outline: 3px solid var(--strata-acc);
    outline-offset: 4px;
}

/* Variante --featured: card destacado em fundo navy escuro */
.strata-card--featured {
    background-color: #184173;
    color: #FFFFFF;
    --strata-acc: #91D8F7;
}
.strata-card--featured:hover {
    box-shadow: 0 14px 40px rgba(24, 65, 115, 0.35);
}

/* Filetes top + bottom (acentos editoriais) */
.strata-card__rule {
    display: block;
    width: 100%;
    background-color: var(--strata-acc);
}
.strata-card__rule--top {
    height: 4px;
    transition: height 240ms ease;
}
.strata-card__rule--bottom {
    height: 1px;
    margin-top: auto;
    opacity: 0.35;
    transition: opacity 240ms ease;
}
.strata-card:hover .strata-card__rule--top { height: 6px; }
.strata-card:hover .strata-card__rule--bottom { opacity: 0.7; }

/* Body */
.strata-card__body {
    padding: 36px 0 28px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.strata-card__eyebrow {
    font-family: var(--font-primary, 'IBM Plex Sans', sans-serif);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--strata-acc);
    margin: 0 0 14px;
    display: flex;
    align-items: baseline;
    gap: 12px;
}
.strata-card--featured .strata-card__eyebrow { color: #91D8F7; }

.strata-card__code {
    font-family: var(--font-display, 'Space Grotesk', sans-serif);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.08em;
    opacity: 0.85;
    user-select: none;
    text-transform: none;
}

.strata-card__title {
    font-family: var(--font-display, 'Space Grotesk', sans-serif);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.32;
    letter-spacing: -0.01em;
    margin: 0 0 12px;
    color: #1F2933;
}
.strata-card--featured .strata-card__title { color: #FFFFFF; }

.strata-card__description {
    font-size: 14.5px;
    line-height: 1.60;
    margin: 0 0 20px;
    color: #4A5568;
    flex-grow: 1;
}
.strata-card--featured .strata-card__description {
    color: rgba(255, 255, 255, 0.86);
}

.strata-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 600;
    color: #137CA8;
    min-height: 24px;
    padding: 4px 0;
    transition: gap 220ms ease, color 220ms ease;
    align-self: flex-start;
}
.strata-card--featured .strata-card__cta { color: #91D8F7; }
.strata-card:hover .strata-card__cta { gap: 14px; }
.strata-card__cta svg {
    flex-shrink: 0;
    transition: transform 220ms ease;
}
.strata-card:hover .strata-card__cta svg { transform: translateX(2px); }

/* Acentos por secao — sobrescreve --strata-acc por data-strata-section */
[data-strata-section="solutions"] .strata-card:not(.strata-card--featured) { --strata-acc: #137CA8; }
[data-strata-section="products"]  .strata-card:not(.strata-card--featured) { --strata-acc: #91D8F7; }
[data-strata-section="sectors"]   .strata-card:not(.strata-card--featured) { --strata-acc: #33ADE2; }
[data-strata-section="cases"]     .strata-card:not(.strata-card--featured) { --strata-acc: #137CA8; }

/* ============================================
   STRATA CONTAINER ON-DARK + FLAGSHIP variant (D93)
   Fundo seção navy + cards brancos com filete topo ciano-claro.
   Usado em Products SPKR — inversao cromatica vs Solutions.
   ============================================ */

.section--dark {
    background-color: #184173;
    color: #FFFFFF;
}

.section__header--on-dark .section__title { color: #FFFFFF; }
.section__header--on-dark .section__subtitle { color: rgba(255, 255, 255, 0.86); }
.section__header--on-dark .section__eyebrow { color: #91D8F7; }
.section__header--on-dark .section__eyebrow::before { background-color: #91D8F7; }
.section__header--on-dark .section__eyebrow-number { color: rgba(145, 216, 247, 0.85); }
/* Lead/subtitle em fundo escuro precisa cor clara — fix contraste WCAG (mesmo problema dos cards Products) */
.section__header--on-dark .pillars__lead {
    color: rgba(255, 255, 255, 0.86);
}
.section__header--on-dark .pillars__lead strong {
    color: #FFFFFF;
}

/* CTA (botao) sobre fundo navy — versao clara
   Usa .btn.btn--on-dark (especificidade 0,0,2,0) para vencer .btn do CSS critico
   inline que define border:2px solid transparent. */
.btn.btn--on-dark,
.btn--on-dark {
    background-color: transparent;
    border: 2px solid #91D8F7;
    color: #91D8F7;
}
.btn.btn--on-dark:hover,
.btn--on-dark:hover {
    background-color: #91D8F7;
    color: #184173;
    border-color: #91D8F7;
}

/* Card flagship — primeiro produto, filete TOP mais grosso (6px) e cor brand */
.strata-card--flagship {
    --strata-acc: #33ADE2;
}
.strata-card--flagship .strata-card__rule--top {
    height: 6px;
}
.strata-card--flagship:hover .strata-card__rule--top {
    height: 8px;
}

/* Card beta — peca em desenvolvimento, opacity reduzida sutil */
.strata-card--beta {
    opacity: 0.92;
}
.strata-card--beta .strata-card__code::after {
    content: ' β';
    font-size: 11px;
    color: #137CA8;
    font-weight: 700;
}

/* Quando a secao tem fundo escuro, cards ja sao brancos por default —
   --strata-acc usado para filete (decorativo). Eyebrow e codigo precisam
   manter cor escura legivel no card branco (WCAG 1.4.3 AA — fix critico).
   Antes: #91D8F7 sobre branco = 1.69:1 (FAIL).
   Agora: filete decorativo continua #91D8F7 (3:1 ok non-text); texto vira #137CA8 (4.74:1 PASS). */
[data-strata-bg="dark"] .strata-card:not(.strata-card--featured):not(.strata-card--flagship) {
    --strata-acc: #91D8F7;
}
[data-strata-bg="dark"] .strata-card:not(.strata-card--featured) .strata-card__eyebrow,
[data-strata-bg="dark"] .strata-card:not(.strata-card--featured) .strata-card__code {
    color: #137CA8;
}

/* ============================================
   STRATA CARD --FUSED — D95: setor + case real no mesmo card vertical
   2 blocos internos (sector + case) separados por divisor + CTA único.
   Usado na seção 04 Verticais & Cases (substituiu Sectors + Cases).
   ============================================ */

[data-strata-section="sectors"] .strata-card { --strata-acc: #33ADE2; }

.strata-card--fused {
    padding: 0 36px;
}

.strata-card--fused .strata-card__body {
    padding: 40px 0 32px;
    gap: 24px;
}

.strata-card__sector,
.strata-card__case {
    display: flex;
    flex-direction: column;
}

/* Sector block (topo) — eyebrow padrao + h3 + descricao */
.strata-card__sector .strata-card__title {
    font-size: 24px;
    margin-bottom: 12px;
}

/* Divisor visual entre sector e case */
.strata-card__divider {
    height: 1px;
    background: linear-gradient(to right,
        rgba(51, 173, 226, 0) 0%,
        rgba(51, 173, 226, 0.35) 20%,
        rgba(51, 173, 226, 0.35) 80%,
        rgba(51, 173, 226, 0) 100%);
    margin: 4px 0;
}

/* Case block (baixo) — eyebrow secundario + h4 + descricao + extra */
.strata-card__eyebrow--case {
    color: #7B8794;
    font-weight: 500;
    letter-spacing: 0.10em;
}

.strata-card__case-title {
    font-family: var(--font-display, 'Space Grotesk', sans-serif);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.35;
    color: #184173;
    margin: 0 0 10px;
    letter-spacing: -0.005em;
}

.strata-card__description--case {
    font-size: 14px;
    line-height: 1.58;
    color: #4A5568;
    margin: 0 0 12px;
}

.strata-card__extra {
    font-size: 12px;
    line-height: 1.5;
    color: #7B8794;
    margin: 8px 0 0;
    padding-top: 10px;
    border-top: 1px dashed rgba(51, 173, 226, 0.20);
    font-style: italic;
}

.strata-card--fused .strata-card__cta {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid rgba(51, 173, 226, 0.10);
    align-self: stretch;
    justify-content: flex-start;
}

@media (max-width: 767px) {
    .strata-card--fused { padding: 0 24px; }
    .strata-card--fused .strata-card__body {
        padding: 32px 0 28px;
        gap: 20px;
    }
    .strata-card__sector .strata-card__title { font-size: 20px; }
    .strata-card__case-title { font-size: 16px; }
}

/* ============================================
   CERT-CHIP — D96: chip-card editorial miniatura para Certificacoes
   "Tabela periodica de competencias" (atelier-criativo).
   Variante miniatura do .strata-card: filete topo + filete rodape sutil
   + SVG monocromatico autoral + brand label + cert label.
   Grid 4x4 com 3 vazios deliberados no canto inferior direito.
   ============================================ */

.cert-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    list-style: none;
    padding: 0;
    margin: 48px 0 0;
}
.cert-grid > li { display: flex; }

.cert-chip {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    padding: 0 18px;
    background-color: #FFFFFF;
    border: 1px solid #E4E7EB;
    color: #1F2933;
    text-decoration: none;
    transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 220ms ease,
                background-color 220ms ease;
    --chip-acc: #137CA8;
}
.cert-chip:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(15, 31, 46, 0.08);
    background-color: #F7FAFC;
}
.cert-chip:focus-visible {
    outline: 2px solid var(--chip-acc);
    outline-offset: 3px;
}

/* Filetes topo + rodape (DNA strata-card em escala reduzida) */
.cert-chip__rule {
    display: block;
    width: calc(100% + 36px);
    margin-left: -18px;
    background-color: var(--chip-acc);
}
.cert-chip__rule--top {
    height: 3px;
    transition: height 220ms ease;
}
.cert-chip__rule--bottom {
    height: 1px;
    margin-top: auto;
    opacity: 0.35;
    transition: opacity 220ms ease;
}
.cert-chip:hover .cert-chip__rule--top { height: 4px; }
.cert-chip:hover .cert-chip__rule--bottom { opacity: 0.7; }

/* Icone via mask-image — cor controlada por CSS (nao por <img>).
   HTML usa <span style="--icon:url(...)"> para apontar o SVG especifico. */
.cert-chip__icon {
    display: block;
    width: 32px;
    height: 32px;
    margin: 18px 0 12px;
    background-color: var(--chip-acc);
    -webkit-mask-image: var(--icon);
            mask-image: var(--icon);
    -webkit-mask-size: contain;
            mask-size: contain;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    transition: transform 320ms ease, background-color 220ms ease;
}
.cert-chip:hover .cert-chip__icon {
    transform: scale(1.05);
}

.cert-chip__brand {
    font-family: var(--font-display, 'Space Grotesk', sans-serif);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--chip-acc);
    margin-bottom: 4px;
    line-height: 1.2;
}
.cert-chip__brand em {
    font-style: normal;
    font-weight: 500;
    letter-spacing: 0.08em;
    opacity: 0.7;
}

.cert-chip__label {
    font-family: var(--font-primary, 'IBM Plex Sans', sans-serif);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;
    color: #1F2933;
    margin-bottom: 18px;
}

/* Variante --featured: 3CX em fundo navy escuro (1 destaque, padrao da familia) */
.cert-chip--featured {
    background-color: #184173;
    color: #FFFFFF;
    border-color: #184173;
    --chip-acc: #91D8F7;
}
.cert-chip--featured:hover {
    background-color: #1E4F8C;
    box-shadow: 0 6px 20px rgba(24, 65, 115, 0.30);
}
.cert-chip--featured .cert-chip__brand { color: #91D8F7; }
.cert-chip--featured .cert-chip__label { color: #FFFFFF; }
.cert-chip--featured .cert-chip__icon { color: #91D8F7; }

@media (min-width: 768px) and (max-width: 1023px) {
    .cert-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
    .cert-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 32px; }
    .cert-chip { padding: 0 14px; }
    .cert-chip__icon { margin: 14px 0 10px; }
    .cert-chip__label { font-size: 12px; margin-bottom: 14px; }
}

@media (prefers-reduced-motion: reduce) {
    .cert-chip,
    .cert-chip__rule,
    .cert-chip__icon { transition: none; }
}

/* Header alinhado a esquerda — usado em Verticais&Cases, Certificacoes, CTA Final */
.section__header--left {
    text-align: left;
}
.section__header--left .section__eyebrow { justify-content: flex-start; }
.section__header--left .section__title,
.section__header--left .section__subtitle,
.section__header--left .pillars__lead {
    margin-left: 0;
    margin-right: 0;
    max-width: 100%; /* D156 fix v2: estende ao limite do container (era 920px, ficava estreito) */
    text-align: left; /* garante alinhamento explicito a esquerda */
}

/* CTA Final — D97: bloco de fechamento alinhado ao padrao section--dark */
.cta-final .section__header { margin-bottom: 32px; }
.cta-final__actions { display: flex; gap: 16px; flex-wrap: wrap; }

/* ============================================
   MODELO UNIVERSAL paginas secundarias — D99
   4 classes novas: .crumb + .strata-card--cols-4-list + .related-chip + .lead--editorial
   ============================================ */

/* 1. Breadcrumb editorial — Pentagram-grade, antes do H1 do hero */
.crumb {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono, 'IBM Plex Mono', 'Consolas', monospace);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(145, 216, 247, 0.7);     /* visivel sobre hero internal navy */
    margin-bottom: 16px;
}
.crumb a {
    color: inherit;
    text-decoration: none;
    transition: color 200ms ease;
}
.crumb a:hover { color: #91D8F7; }
.crumb__sep {
    color: rgba(145, 216, 247, 0.35);
    user-select: none;
}
.crumb__current {
    color: #FFFFFF;
}
.crumb__list {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.crumb__list li {
    display: inline-flex;
    align-items: center;
}

/* 2. Lead editorial — paragrafo destaque pos-hero ou pos-H2 (substitui Overview 2-col) */
.lead--editorial {
    font-family: var(--font-display, 'Space Grotesk', sans-serif);
    font-size: 22px;
    font-weight: 400;
    line-height: 1.45;
    letter-spacing: -0.005em;
    color: #1F2933;
    max-width: 720px;
    margin: 0 0 24px;
}
.lead--editorial strong {
    color: #137CA8;
    font-weight: 600;
}
.section--dark .lead--editorial,
.section__header--on-dark .lead--editorial {
    color: rgba(255, 255, 255, 0.92);
}
.section--dark .lead--editorial strong,
.section__header--on-dark .lead--editorial strong {
    color: #91D8F7;
}

/* 3. Strata card variant --cols-4-list (categoria + lista interna com filete vertical)
   Substitui .solution-includes__category genericos */
.strata-card--cols-4-list .strata-card__body {
    padding: 36px 0 32px;
    gap: 18px;
}
.strata-card--cols-4-list .strata-card__title {
    font-size: 20px;
    margin-bottom: 4px;
}
.strata-card__items {
    list-style: none;
    padding: 0;
    margin: 12px 0 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.strata-card__items li {
    position: relative;
    padding-left: 14px;
    font-size: 14px;
    line-height: 1.55;
    color: #4A5568;
    border-left: 2px solid var(--strata-acc);    /* filete vertical em vez de checkmark */
}
.strata-card--featured .strata-card__items li,
[data-strata-bg="dark"] .strata-card--featured .strata-card__items li {
    color: rgba(255, 255, 255, 0.86);
    border-left-color: #91D8F7;
}

/* 4. Related chip — variant menor de .cert-chip, sem icone, com seta a direita */
.related-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    background-color: #FFFFFF;
    border: 1px solid #E4E7EB;
    border-left: 3px solid #137CA8;
    color: #1F2933;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
    transition: border-left-width 200ms ease, background-color 200ms ease, transform 200ms ease;
    min-height: 44px;       /* WCAG 2.5.8 */
}
.related-chip:hover {
    border-left-width: 5px;
    background-color: #F7FAFC;
    transform: translateY(-1px);
}
.related-chip:focus-visible {
    outline: 2px solid #137CA8;
    outline-offset: 3px;
}
.related-chip::after {
    content: '→';
    color: #137CA8;
    font-weight: 600;
    margin-left: auto;
    transition: transform 200ms ease;
}
.related-chip:hover::after { transform: translateX(2px); }

.related-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.related-grid > li { display: flex; }

/* Layout 2-col editorial: label esquerda + chips direita (D101) */
.related-group {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 32px;
    align-items: start;
    padding: 20px 0;
    border-top: 1px solid #E4E7EB;
}
.related-group:last-child { padding-bottom: 0; }
.related-group:first-of-type {
    border-top: 1px solid #CBD2D9;     /* primeira linha um pouco mais marcada */
}

.related-group__title {
    font-family: var(--font-primary, 'IBM Plex Sans', sans-serif);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #137CA8;
    margin: 0;
    padding-top: 14px;       /* alinha com line-height dos chips */
    line-height: 1.3;
}

/* Mobile: volta pra stack vertical (label em cima, chips embaixo) */
@media (max-width: 767px) {
    .related-group {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 16px 0;
    }
    .related-group__title {
        padding-top: 0;
    }
}

/* Hero internal — D102: navy solido em TODAS paginas internas via data-page-type
   (sobrescreve gradient diagonal legado do CSS critico inline). */
body[data-page-type="solucao"] .hero-internal,
body[data-page-type="parceiro"] .hero-internal,
body[data-page-type="ferramenta"] .hero-internal,
body[data-page-type="sobre"] .hero-internal,
body[data-page-type="contato"] .hero-internal {
    background: #0F1F2E !important;       /* navy solido paleta Estratigrafia */
}

/* Hero internal — variant com SVG conceitual proprio por pagina (D99 ponto 6)
   Substitui o Estratigrafia generico (D88 ::after) quando data-hero-art e setado. */
.hero-internal[data-hero-art] {
    background: #0F1F2E !important;
}
.hero-internal[data-hero-art]::after {
    background-image: var(--hero-art) !important;
    width: 38%;
    opacity: 0.95;
}
@media (max-width: 767px) {
    .hero-internal[data-hero-art]::after {
        width: 50%;
        opacity: 0.55;
    }
}

/* Actions do hero internal — substitui inline style antigo */
.hero-internal__actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 24px;
}

/* Strata FAQ — refator visual do <details> nativo dentro do padrao */
.strata-faq {
    max-width: 880px;
    margin: 0 auto;
}
.strata-faq__item {
    border-top: 1px solid #E4E7EB;
    padding: 0;
}
.strata-faq__item:last-child {
    border-bottom: 1px solid #E4E7EB;
}
.strata-faq__item summary {
    cursor: pointer;
    list-style: none;
    padding: 22px 32px 22px 0;
    font-family: var(--font-display, 'Space Grotesk', sans-serif);
    font-size: 17px;
    font-weight: 600;
    color: #1F2933;
    line-height: 1.4;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
    transition: color 200ms ease;
    position: relative;
    min-height: 24px;
}
.strata-faq__item summary::-webkit-details-marker { display: none; }
.strata-faq__item summary::after {
    content: '+';
    font-family: var(--font-display, 'Space Grotesk', sans-serif);
    font-size: 24px;
    font-weight: 300;
    color: #137CA8;
    flex-shrink: 0;
    line-height: 1;
    transition: transform 200ms ease;
}
.strata-faq__item[open] summary::after {
    content: '−';
}
.strata-faq__item summary:hover { color: #137CA8; }
.strata-faq__item summary:focus-visible {
    outline: 2px solid #137CA8;
    outline-offset: 4px;
}
.strata-faq__answer {
    padding: 0 32px 24px 0;
    font-size: 15px;
    line-height: 1.65;
    color: #4A5568;
    max-width: 720px;
}
.strata-faq__answer p:last-child { margin-bottom: 0; }
.strata-faq__answer a {
    color: #137CA8;
    border-bottom: 1px solid currentColor;
}
.strata-faq__answer a:hover { color: #184173; }
.strata-faq__eyebrow {
    font-family: var(--font-primary, 'IBM Plex Sans', sans-serif);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #137CA8;
    margin: 0 0 4px;
    user-select: none;
}

/* TL;DR box — citation magnet GEO 2026 (apos H1 do hero) */
.hero-tldr {
    max-width: 720px;
    margin: 16px 0 24px;
    padding: 16px 20px;
    background-color: rgba(145, 216, 247, 0.08);
    border-left: 3px solid #91D8F7;
    font-size: 15px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.92);
}
.hero-tldr strong { color: #FFFFFF; font-weight: 600; }

/* Scroll padding global — WCAG 2.4.11 Focus Not Obscured (header sticky 80px) */
html { scroll-padding-top: 96px; }

/* Responsivo */
@media (min-width: 768px) and (max-width: 1023px) {
    .strata-grid--cols-2,
    .strata-grid--cols-3,
    .strata-grid--cols-4 { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
@media (max-width: 767px) {
    .strata-grid--cols-2,
    .strata-grid--cols-3,
    .strata-grid--cols-4 { grid-template-columns: 1fr; gap: 14px; margin-top: 36px; }
    .strata-card { padding: 0 22px; }
    .strata-card__body { padding: 28px 0 24px; }
    .strata-card__title { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
    .strata-card,
    .strata-card__rule,
    .strata-card__cta,
    .strata-card__cta svg {
        transition: none;
    }
}

/* ============================================================
   PILLAR-COL — componente editorial reutilizavel
   D154: migrado de pages/home.css para styles.css (uso em /sobre tambem).
   Padrao: 3 colunas, numeral romano, eyebrow + H3 + descricao + CTA.
   Variante --featured (fundo navy) opcional. data-pillar define cor-acento.
   ============================================================ */

/* GRID 3 COLUNAS */
.pillars__row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 64px;
    align-items: stretch;
}

/* COLUNA-PILAR */
.pillar-col {
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: #FFFFFF;
    color: #1F2933;
    text-decoration: none;
    padding: 0 32px;
    transition: transform 240ms cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 240ms ease;
}
.pillar-col:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 36px rgba(15, 31, 46, 0.10);
}
.pillar-col:focus-visible {
    outline: 3px solid #137CA8;
    outline-offset: 4px;
}

/* Cor-acento por contexto (data-pillar) */
.pillar-col[data-pillar="consultoria"] { --acc: #184173; }
.pillar-col[data-pillar="infra"]       { --acc: #91D8F7; }
.pillar-col[data-pillar="seguranca"]   { --acc: #137CA8; }
.pillar-col[data-pillar="proposito"]   { --acc: #184173; }
.pillar-col[data-pillar="audiencia"]   { --acc: #137CA8; }
.pillar-col[data-pillar="tese"]        { --acc: #184173; } /* D156 fix: era #91D8F7, contraste WCAG falhou sobre fundo branco */

/* FILETES TOPO E RODAPE — moldura editorial */
.pillar-col__rule {
    display: block;
    height: 4px;
    width: 100%;
    background-color: var(--acc);
    transition: height 240ms ease, background-color 240ms ease;
}
.pillar-col__rule--top {
    margin-bottom: 0;
}
.pillar-col__rule--bottom {
    height: 1px;
    margin-top: auto;
    background-color: var(--acc);
    opacity: 0.35;
}
.pillar-col:hover .pillar-col__rule--top { height: 6px; }
.pillar-col:hover .pillar-col__rule--bottom { opacity: 0.7; }

/* CARD DESTACADO (opcional) */
.pillar-col--featured {
    background-color: #184173;
    color: #FFFFFF;
}
.pillar-col--featured:hover {
    box-shadow: 0 14px 40px rgba(24, 65, 115, 0.35);
}

/* CONTEUDO TEXTUAL */
.pillar-col__body {
    padding: 48px 0 36px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.pillar-col__eyebrow {
    font-family: var(--font-primary, 'IBM Plex Sans', sans-serif);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--acc);
    margin: 0 0 14px;
    display: flex;
    align-items: baseline;
    gap: 12px;
}
.pillar-col--featured .pillar-col__eyebrow { color: #91D8F7; }

.pillar-col__numeral {
    font-family: var(--font-display, 'Space Grotesk', sans-serif);
    font-size: 28px;
    font-weight: 300;
    line-height: 1;
    letter-spacing: -0.02em;
    opacity: 0.85;
    user-select: none;
}
.pillar-col--featured .pillar-col__numeral { color: #91D8F7; }

.pillar-col__title {
    font-family: var(--font-display, 'Space Grotesk', sans-serif);
    font-size: 22px;
    font-weight: 600;
    line-height: 1.30;
    letter-spacing: -0.01em;
    margin: 0 0 14px;
    color: #1F2933;
}
.pillar-col--featured .pillar-col__title { color: #FFFFFF; }

.pillar-col__description {
    font-size: 15px;
    line-height: 1.62;
    margin: 0 0 22px;
    color: #4A5568;
    flex-grow: 1;
}
.pillar-col--featured .pillar-col__description {
    color: rgba(255, 255, 255, 0.88);
}

.pillar-col__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #137CA8;
    min-height: 24px;
    padding: 4px 0;
    transition: gap 220ms ease, color 220ms ease;
    align-self: flex-start;
}
.pillar-col--featured .pillar-col__cta { color: #91D8F7; }
.pillar-col:hover .pillar-col__cta { gap: 14px; }
.pillar-col__cta svg {
    flex-shrink: 0;
    transition: transform 220ms ease;
}
.pillar-col:hover .pillar-col__cta svg { transform: translateX(2px); }

/* RESPONSIVO */
@media (min-width: 768px) and (max-width: 1023px) {
    .pillars__row {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }
    .pillar-col--featured {
        grid-column: 1 / -1;
    }
}

@media (max-width: 767px) {
    .pillars__row {
        grid-template-columns: 1fr;
        gap: 18px;
        margin-top: 40px;
    }
    .pillar-col {
        padding: 0 24px;
    }
    .pillar-col__body {
        padding: 36px 0 28px;
    }
    .pillar-col__title { font-size: 20px; }
    .pillar-col__numeral { font-size: 24px; }
}

@media (prefers-reduced-motion: reduce) {
    .pillar-col,
    .pillar-col__rule,
    .pillar-col__cta,
    .pillar-col__cta svg {
        transition: none;
    }
}

/* ============================================================
   STRATA-PULLQUOTE — Sprint C1 (D156)
   Manifesto editorial gigante. Substitui grid de cards homogeneos
   por declaracao tipografica forte. Usado em /sobre section 02.
   ============================================================ */
.strata-pullquote {
    position: relative;
    max-width: 1040px;
    margin: 48px auto 0;
    padding: 56px 24px;
    border-left: 4px solid #137CA8;
    background: linear-gradient(180deg, transparent 0%, rgba(145, 216, 247, 0.05) 100%);
}
.strata-pullquote::before {
    content: "\201C"; /* aspa esquerda tipografica */
    position: absolute;
    top: -8px;
    left: 12px;
    font-family: var(--font-display, 'Space Grotesk', sans-serif);
    font-size: 120px;
    line-height: 1;
    color: #91D8F7;
    opacity: 0.45;
    pointer-events: none;
    user-select: none;
}
.strata-pullquote__text {
    font-family: var(--font-display, 'Space Grotesk', sans-serif);
    font-size: 36px; /* D156 fix: era clamp, agora fixo para garantir 1 linha por sentenca em desktop */
    font-weight: 600;
    line-height: 1.5; /* acomoda chips */
    letter-spacing: -0.015em;
    color: #1F2933;
    margin: 0;
}
.strata-pullquote__text strong {
    color: #137CA8;
    font-weight: 700;
}

/* D156 Sprint C1 v2: chips destacando S/P/K/R */
.strata-pullquote__chip {
    display: inline-block;
    background: #184173; /* navy escuro — D158 fix WCAG 1.4.3: era var(--color-primary) #33ADE2 (2.4:1 FAIL AA); navy da 10:1 PASS AAA */
    color: #FFFFFF;
    font-family: var(--font-display, 'Space Grotesk', sans-serif);
    font-weight: 700;
    line-height: 1;
    padding: 0.18em 0.42em;
    border-radius: 6px;
    margin-right: 1px;
    vertical-align: 0.04em;
    letter-spacing: -0.01em;
}
.strata-pullquote__word {
    color: #137CA8;
    font-weight: 700;
}
.strata-pullquote__footer {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 32px;
    align-items: baseline;
    padding-top: 24px;
    border-top: 1px solid rgba(24, 65, 115, 0.12);
}
.strata-pullquote__attribution {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #137CA8;
    margin: 0;
}
.strata-pullquote__decoder {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 14px;
    color: #4A5568;
}
.strata-pullquote__decoder li {
    position: relative;
    padding-right: 20px;
    white-space: nowrap;
}
.strata-pullquote__decoder li::after {
    content: "\00B7"; /* middot */
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    color: #B8C2CC;
}
.strata-pullquote__decoder li:last-child {
    padding-right: 0;
}
.strata-pullquote__decoder li:last-child::after { content: none; }
.strata-pullquote__decoder li strong {
    color: #1F2933;
    font-weight: 700;
    letter-spacing: 0.02em;
}

@media (max-width: 1023px) {
    .strata-pullquote__text {
        font-size: 28px; /* tablet — pode quebrar 1-2 linhas, OK */
    }
}

@media (max-width: 640px) {
    .strata-pullquote {
        padding: 40px 20px;
        margin-top: 32px;
    }
    .strata-pullquote::before {
        font-size: 80px;
        top: -4px;
        left: 8px;
    }
    .strata-pullquote__text {
        font-size: 22px; /* mobile — quebra natural */
        margin-bottom: 0;
    }
}

/* ============================================================
   STRATA-BIGNUM — Sprint C1 (D156)
   Numeros gigantes tipograficos para section--dark. Substitui
   cards homogeneos por declaracao numerica forte. Usado em
   /sobre section 05.
   ============================================================ */
.strata-bignum-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px 24px;
    margin-top: 56px;
}
/* D162: variante 6 cards com ancora dominante 23 anos */
.strata-bignum-grid--anchored {
    grid-template-columns: repeat(3, 1fr);
}
.strata-bignum--anchor .strata-bignum__number {
    font-size: clamp(72px, 12vw, 128px);
    color: #91D8F7; /* cyan light — destaque tonal sobre fundo dark */
}
.strata-bignum--anchor .strata-bignum__label {
    color: #FFFFFF;
    font-size: 17px;
}
.strata-bignum--anchor {
    border-top-color: rgba(145, 216, 247, 0.45);
    border-top-width: 2px;
    border-top-style: solid;
}
.strata-bignum {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 24px 0;
    border-top: 1px solid rgba(145, 216, 247, 0.22);
}
.strata-bignum__eyebrow {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #91D8F7;
    margin: 0;
}
.strata-bignum__number {
    font-family: var(--font-display, 'Space Grotesk', sans-serif);
    font-size: clamp(52px, 7vw, 88px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
    color: #FFFFFF;
    margin: 4px 0 0;
    white-space: nowrap;
}
.strata-bignum__number sup {
    font-size: 0.45em;
    font-weight: 600;
    color: #91D8F7;
    margin-left: 2px;
    vertical-align: super;
    letter-spacing: 0;
    line-height: 0;
}
.strata-bignum__label {
    font-family: var(--font-primary, 'IBM Plex Sans', sans-serif);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.005em;
    color: #91D8F7;
    margin: 10px 0 0;
    line-height: 1.3;
}
.strata-bignum__description {
    font-size: 14px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.78);
    margin: 12px 0 0;
}
.strata-bignum__description a {
    color: #91D8F7;
    text-decoration: underline;
    text-decoration-color: rgba(145, 216, 247, 0.4);
    text-underline-offset: 3px;
    transition: text-decoration-color 200ms ease;
}
.strata-bignum__description a:hover {
    text-decoration-color: #91D8F7;
}

@media (min-width: 768px) and (max-width: 1023px) {
    .strata-bignum-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 28px 24px;
    }
}

@media (max-width: 767px) {
    .strata-bignum-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px 16px;
        margin-top: 40px;
    }
    .strata-bignum {
        padding: 18px 0;
    }
    .strata-bignum__description {
        font-size: 13px;
    }
}

@media (max-width: 420px) {
    .strata-bignum-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   STRATA-TIMELINE-H — Sprint C2 (D157)
   Timeline horizontal infografica com 4 nodes + SVG icons.
   Desktop: linha horizontal central, markers numerados, conteudo abaixo.
   Mobile: timeline vertical com linha lateral.
   Paleta: navy (#184173) + primary (#33ADE2) + light (#91D8F7) + action (#137CA8).
   ============================================================ */
.strata-timeline-h {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin: 72px 0 0;
    padding: 0;
    list-style: none;
    counter-reset: timeline;
}

/* Linha horizontal central que conecta os 4 markers (desktop) */
.strata-timeline-h::before {
    content: "";
    position: absolute;
    top: 36px;
    left: calc(12.5% + 36px);
    right: calc(12.5% + 36px);
    height: 2px;
    background: linear-gradient(90deg,
        #184173 0%,
        #137CA8 33%,
        #33ADE2 66%,
        #91D8F7 100%);
    z-index: 0;
}

/* Cada step e uma "coluna" da grid com marker em cima + conteudo embaixo */
.strata-timeline-h__step {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    z-index: 1;
}

/* MARKER — circulo com numero + SVG icon */
.strata-timeline-h__marker {
    position: relative;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #FFFFFF;
    border: 3px solid #184173;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #184173;
    box-shadow: 0 4px 12px rgba(24, 65, 115, 0.12);
    transition: transform 240ms ease, box-shadow 240ms ease, border-color 240ms ease;
}
.strata-timeline-h__icon {
    width: 32px;
    height: 32px;
}
.strata-timeline-h__num {
    position: absolute;
    bottom: -28px;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-display, 'Space Grotesk', sans-serif);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #137CA8;
    background: #FFFFFF;
    padding: 4px 10px;
    border-radius: 12px;
    border: 1px solid rgba(24, 65, 115, 0.18);
}

/* Cor-acento progressiva por step */
.strata-timeline-h__step[data-step="1"] .strata-timeline-h__marker { border-color: #184173; color: #184173; }
.strata-timeline-h__step[data-step="2"] .strata-timeline-h__marker { border-color: #137CA8; color: #137CA8; }
.strata-timeline-h__step[data-step="3"] .strata-timeline-h__marker { border-color: #33ADE2; color: #33ADE2; }
.strata-timeline-h__step[data-step="4"] .strata-timeline-h__marker {
    border-color: #33ADE2;
    color: #FFFFFF;
    background: linear-gradient(135deg, #137CA8 0%, #33ADE2 100%);
}

.strata-timeline-h__step:hover .strata-timeline-h__marker {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(24, 65, 115, 0.22);
}

/* CONTENT — caixa abaixo do marker, alinhada ao padrao strata-card (D157 fix:
   bordas retangulares + filetes top/bottom em vez de border-radius curvo) */
.strata-timeline-h__content {
    position: relative;
    margin-top: 48px;
    padding: 28px 22px 26px;
    background: #FFFFFF;
    border-top: 4px solid var(--strata-acc); /* filete top — espelha .strata-card__rule--top */
    border-radius: 0;                         /* retangular puro, padrao SPKR */
    flex-grow: 1;
    text-align: left;
    width: 100%;
    transition: transform 240ms cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 240ms ease;
}
/* Filete bottom 1px com opacidade — espelha .strata-card__rule--bottom */
.strata-timeline-h__content::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--strata-acc);
    opacity: 0.35;
    transition: opacity 240ms ease;
}
.strata-timeline-h__step:hover .strata-timeline-h__content {
    transform: translateY(-2px);
    box-shadow: 0 14px 36px rgba(15, 31, 46, 0.08);
}
.strata-timeline-h__step:hover .strata-timeline-h__content::after {
    opacity: 0.7;
}

.strata-timeline-h__period {
    font-family: var(--font-primary, 'IBM Plex Sans', sans-serif);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #137CA8;
    margin: 0 0 8px;
}

.strata-timeline-h__title {
    font-family: var(--font-display, 'Space Grotesk', sans-serif);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.015em;
    color: #1F2933;
    margin: 0 0 12px;
}

.strata-timeline-h__text {
    font-size: 14px;
    line-height: 1.6;
    color: #4A5568;
    margin: 0;
}
.strata-timeline-h__text strong {
    color: #184173;
    font-weight: 700;
}

/* RESPONSIVO — tablet (2 colunas) */
@media (min-width: 768px) and (max-width: 1023px) {
    .strata-timeline-h {
        grid-template-columns: repeat(2, 1fr);
        gap: 56px 24px;
    }
    .strata-timeline-h::before {
        display: none; /* nao vale a pena calcular linha em 2 colunas */
    }
}

/* RESPONSIVO — mobile (timeline vertical com linha lateral) */
@media (max-width: 767px) {
    .strata-timeline-h {
        grid-template-columns: 1fr;
        gap: 40px;
        margin-top: 48px;
        padding-left: 56px;
    }
    .strata-timeline-h::before {
        top: 0;
        bottom: 0;
        left: 35px;
        right: auto;
        width: 2px;
        height: auto;
        background: linear-gradient(180deg,
            #184173 0%,
            #137CA8 33%,
            #33ADE2 66%,
            #91D8F7 100%);
    }
    .strata-timeline-h__step {
        align-items: flex-start;
        text-align: left;
        flex-direction: row;
        gap: 0;
    }
    .strata-timeline-h__marker {
        position: absolute;
        left: -56px;
        top: 0;
        width: 56px;
        height: 56px;
        flex-shrink: 0;
    }
    .strata-timeline-h__icon {
        width: 26px;
        height: 26px;
    }
    .strata-timeline-h__num {
        bottom: -22px;
        font-size: 11px;
        padding: 3px 8px;
    }
    .strata-timeline-h__content {
        margin-top: 0;
        margin-left: 12px;
    }
    .strata-timeline-h__title {
        font-size: 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .strata-timeline-h__marker {
        transition: none;
    }
    .strata-timeline-h__step:hover .strata-timeline-h__marker {
        transform: none;
    }
}

/* ============================================
   TIMELINE VERTICAL (strata-timeline-v) — historia longa (8 fases)
   Fluxo vertical: linha + marker a esquerda, conteudo a direita.
   ============================================ */
.strata-timeline-v {
    position: relative;
    margin: 56px 0 0;
    padding: 0;
    list-style: none;
}
.strata-timeline-v__step {
    position: relative;
    display: grid;
    grid-template-columns: 72px 1fr;
    gap: 28px;
    padding-bottom: 40px;
}
/* linha vertical conectando os markers */
.strata-timeline-v__step::before {
    content: "";
    position: absolute;
    left: 35px;
    top: 40px;
    bottom: -16px;
    width: 2px;
    background: rgba(24, 65, 115, 0.16);
    z-index: 0;
}
.strata-timeline-v__step:last-child::before { display: none; }

.strata-timeline-v__marker {
    position: relative;
    z-index: 1;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #FFFFFF;
    border: 3px solid var(--strata-acc, #184173);
    color: var(--strata-acc, #184173);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(24, 65, 115, 0.12);
    transition: transform 240ms ease, box-shadow 240ms ease;
}
.strata-timeline-v__icon { width: 30px; height: 30px; }
.strata-timeline-v__num {
    position: absolute;
    bottom: -12px;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-display, 'Space Grotesk', sans-serif);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #137CA8;
    background: #FFFFFF;
    padding: 2px 8px;
    border-radius: 10px;
    border: 1px solid rgba(24, 65, 115, 0.18);
}
/* cor-acento progressiva por fase (8) */
.strata-timeline-v__step[data-step="1"] { --strata-acc: #184173; }
.strata-timeline-v__step[data-step="2"] { --strata-acc: #1B5089; }
.strata-timeline-v__step[data-step="3"] { --strata-acc: #137CA8; }
.strata-timeline-v__step[data-step="4"] { --strata-acc: #1E90C4; }
.strata-timeline-v__step[data-step="5"] { --strata-acc: #33ADE2; }
.strata-timeline-v__step[data-step="6"] { --strata-acc: #56BFE8; }
.strata-timeline-v__step[data-step="7"] { --strata-acc: #75CEF0; }
.strata-timeline-v__step[data-step="8"] .strata-timeline-v__marker {
    --strata-acc: #33ADE2;
    color: #FFFFFF;
    background: linear-gradient(135deg, #137CA8 0%, #33ADE2 100%);
    border-color: #33ADE2;
}
.strata-timeline-v__step:hover .strata-timeline-v__marker {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(24, 65, 115, 0.22);
}

.strata-timeline-v__content {
    position: relative;
    padding: 24px 24px 22px;
    background: #FFFFFF;
    border-top: 4px solid var(--strata-acc, #184173);
    transition: transform 240ms cubic-bezier(0.4,0,0.2,1), box-shadow 240ms ease;
}
.strata-timeline-v__content::after {
    content: "";
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 1px;
    background: var(--strata-acc, #184173);
    opacity: 0.35;
}
.strata-timeline-v__step:hover .strata-timeline-v__content {
    transform: translateY(-2px);
    box-shadow: 0 14px 36px rgba(15, 31, 46, 0.08);
}
.strata-timeline-v__period {
    font-family: var(--font-primary, 'IBM Plex Sans', sans-serif);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #137CA8;
    margin: 0 0 8px;
}
.strata-timeline-v__title {
    font-family: var(--font-display, 'Space Grotesk', sans-serif);
    font-size: 21px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.015em;
    color: #1F2933;
    margin: 0 0 10px;
}
.strata-timeline-v__text {
    font-size: 14px;
    line-height: 1.65;
    color: #4A5568;
    margin: 0;
}
.strata-timeline-v__text strong { color: #184173; font-weight: 700; }

/* PULL-QUOTE entre fases (respiro de impacto) — linha vertical continua */
.strata-timeline-v__quote {
    position: relative;
    margin: 0 0 40px;
    padding: 0;
}
.strata-timeline-v__quote::before {
    content: "";
    position: absolute;
    left: 35px;
    top: -20px;
    bottom: -20px;
    width: 2px;
    background: rgba(24, 65, 115, 0.16);
    z-index: 0;
}
.strata-timeline-v__quote p {
    margin: 0 0 0 100px;
    padding: 0 0 0 24px;
    border-left: 3px solid #33ADE2;
    font-family: var(--font-display, 'Space Grotesk', sans-serif);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.015em;
    color: #184173;
}
/* DESKTOP (>=860px): ZIGZAG CLASSICO — cada fase no seu nivel, marker numerado 1..8
   descendo pela linha central, card alternando de lado (padrao vertical timeline infographic) */
@media (min-width: 860px) {
    .strata-timeline-v { margin-top: 64px; }
    /* linha central — termina no centro do ultimo marker (bottom casa com min-height da fase 8) */
    .strata-timeline-v::before {
        content: "";
        position: absolute;
        left: 50%;
        top: 8px;
        bottom: 170px;
        width: 2px;
        background: rgba(24, 65, 115, 0.16);
        transform: translateX(-50%);
        z-index: 0;
    }
    /* remove as linhas laterais individuais (step + quote) */
    .strata-timeline-v__step::before,
    .strata-timeline-v__quote::before { display: none; }

    /* RITMO COMPACTO: cada fase avanca ~112px (era ~188px); o card (absolute) vaza para
       baixo na faixa da proxima fase do LADO OPOSTO, sem colidir (gap central de 48px ao
       marker). Reduz ~40-50% a distancia entre markers consecutivos. */
    .strata-timeline-v__step {
        position: relative;
        display: block;
        width: 100%;
        box-sizing: border-box;
        min-height: 132px;
        margin: 0;
        padding: 0;
        text-align: left;
    }
    /* ultima fase (8): altura suficiente para o card caber antes do fecho da secao */
    .strata-timeline-v__step[data-step="8"] { min-height: 206px; }

    /* marker SEMPRE no centro da linha, no topo da faixa (numero unico por fase) */
    .strata-timeline-v__marker {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        z-index: 2;
    }
    .strata-timeline-v__step:hover .strata-timeline-v__marker {
        transform: translateX(-50%) translateY(-2px);
    }
    /* o card e ABSOLUTE (nao empurra o ritmo), ocupa metade com gap de 48px ate a linha */
    .strata-timeline-v__content {
        position: absolute;
        top: 0;
        width: calc(50% - 48px);
        box-sizing: border-box;
    }
    /* IMPARES (1,3,5,7) -> card a esquerda, texto alinhado a direita (junto da linha) */
    .strata-timeline-v__step[data-step="1"] .strata-timeline-v__content,
    .strata-timeline-v__step[data-step="3"] .strata-timeline-v__content,
    .strata-timeline-v__step[data-step="5"] .strata-timeline-v__content,
    .strata-timeline-v__step[data-step="7"] .strata-timeline-v__content {
        right: calc(50% + 48px);
        left: auto;
        text-align: right;
    }
    /* PARES (2,4,6,8) -> card a direita */
    .strata-timeline-v__step[data-step="2"] .strata-timeline-v__content,
    .strata-timeline-v__step[data-step="4"] .strata-timeline-v__content,
    .strata-timeline-v__step[data-step="6"] .strata-timeline-v__content,
    .strata-timeline-v__step[data-step="8"] .strata-timeline-v__content {
        left: calc(50% + 48px);
        right: auto;
        text-align: left;
    }

    /* pull-quote: largura total, centralizado, sobre a linha */
    .strata-timeline-v__quote {
        clear: both;
        width: 100%;
        margin: 8px auto 16px;
        padding: 0;
    }
    .strata-timeline-v__quote p {
        position: relative;
        z-index: 1;
        margin: 0 auto;
        max-width: 600px;
        padding: 14px 30px;
        border-left: none;
        border-top: 3px solid #33ADE2;
        background: #FFFFFF;
        text-align: center;
    }
}
@media (max-width: 767px) {
    .strata-timeline-v__step { grid-template-columns: 52px 1fr; gap: 16px; }
    .strata-timeline-v__step::before { left: 25px; }
    .strata-timeline-v__marker { width: 52px; height: 52px; }
    .strata-timeline-v__icon { width: 24px; height: 24px; }
    .strata-timeline-v__title { font-size: 19px; }
    .strata-timeline-v__quote::before { left: 25px; }
    .strata-timeline-v__quote p { margin-left: 68px; font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
    .strata-timeline-v__marker, .strata-timeline-v__content { transition: none; }
    .strata-timeline-v__step:hover .strata-timeline-v__marker,
    .strata-timeline-v__step:hover .strata-timeline-v__content { transform: none; }
}
/* Lead de secao (dek abaixo do H2) + fecho da historia */
.section__lead {
    font-size: 17px;
    line-height: 1.6;
    color: #4A5568;
    max-width: 760px;
    margin: 14px 0 0;
}
.history__close {
    margin: 44px auto 0;
    max-width: 840px;
    font-size: 17px;
    line-height: 1.6;
    color: #3E4C59;
    text-align: center;
}
.history__close strong { color: #184173; }
@media (max-width: 767px) {
    .section__lead, .history__close { font-size: 15px; }
    .history__close { text-align: left; }
}

/* D157 fix: define --strata-acc no escopo do timeline-content para que
   .strata-card__eyebrow + .strata-card__code (reaproveitadas no HTML) tenham
   a cor de acento correta. Espelha a progressao cromatica dos markers. */
.strata-timeline-h__content {
    --strata-acc: #137CA8;
}
.strata-timeline-h__step[data-step="1"] .strata-timeline-h__content { --strata-acc: #184173; }
.strata-timeline-h__step[data-step="2"] .strata-timeline-h__content { --strata-acc: #137CA8; }
.strata-timeline-h__step[data-step="3"] .strata-timeline-h__content { --strata-acc: #33ADE2; }
.strata-timeline-h__step[data-step="4"] .strata-timeline-h__content { --strata-acc: #33ADE2; }

/* ============================================================
   STRATA-SPLIT — Sprint C2 (D157)
   Split-screen editorial 50/50 alternando esquerda/direita (zigzag).
   Cada D/0X tem coluna textual + coluna visual com SVG icon + label.
   ============================================================ */
.strata-split-list {
    display: flex;
    flex-direction: column;
    gap: 48px;
    margin-top: 56px;
}

.strata-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
    padding: 32px 0;
    border-top: 1px solid rgba(24, 65, 115, 0.08);
}

/* Alternancia zigzag: pares invertidos */
.strata-split:nth-child(even) .strata-split__text { order: 2; }
.strata-split:nth-child(even) .strata-split__visual { order: 1; }

/* TEXT SIDE */
.strata-split__text {
    padding: 0 8px;
}
.strata-split__eyebrow {
    font-family: var(--font-primary, 'IBM Plex Sans', sans-serif);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #137CA8;
    margin: 0 0 14px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.strata-split__code {
    display: inline-block;
    font-family: var(--font-display, 'Space Grotesk', sans-serif);
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    background: rgba(24, 65, 115, 0.08);
    color: #184173;
    border-radius: 4px;
    letter-spacing: 0.06em;
}
.strata-split__title {
    font-family: var(--font-display, 'Space Grotesk', sans-serif);
    font-size: 26px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.018em;
    color: #1F2933;
    margin: 0 0 16px;
}
.strata-split__description {
    font-size: 16px;
    line-height: 1.65;
    color: #4A5568;
    margin: 0;
}
.strata-split__description strong {
    color: #1F2933;
    font-weight: 600;
}
.strata-split__description a {
    color: #137CA8;
    text-decoration: underline;
    text-decoration-color: rgba(19, 124, 168, 0.4);
    text-underline-offset: 3px;
    transition: text-decoration-color 200ms ease;
}
.strata-split__description a:hover {
    text-decoration-color: #137CA8;
}

/* VISUAL SIDE — D157 v2: SVG conceitual amplo + pattern grid sutil + multi-layer gradient */
.strata-split__visual {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 320px;
    padding: 48px 32px;
    background: linear-gradient(135deg, #184173 0%, #137CA8 100%);
    border-radius: 16px;
    color: #FFFFFF;
    overflow: hidden;
}
/* Camada 1: glow radial superior-esquerdo */
.strata-split__visual::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 25% 25%, rgba(145, 216, 247, 0.22), transparent 55%);
    pointer-events: none;
}
/* Camada 2: grid pattern sutil sobrepondo o gradient */
.strata-split__visual::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
    background-size: 24px 24px;
    background-position: -1px -1px;
    pointer-events: none;
    mask-image: radial-gradient(circle at center, black 30%, transparent 80%);
    -webkit-mask-image: radial-gradient(circle at center, black 30%, transparent 80%);
}

.strata-split__icon {
    width: 200px;
    height: 200px;
    max-width: 80%;
    color: rgba(255, 255, 255, 0.96);
    margin-bottom: 22px;
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.18));
}

.strata-split__label {
    font-family: var(--font-primary, 'IBM Plex Sans', sans-serif);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #91D8F7;
    margin: 0;
    text-align: center;
    position: relative;
    z-index: 1;
    /* D168: rule visual antes do label para indicar que e legenda do SVG */
    padding-top: 14px;
}
.strata-split__label::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 32px;
    height: 1px;
    background: rgba(145, 216, 247, 0.55);
    max-width: 280px;
    line-height: 1.4;
}

/* Variacao de tonalidade por diff (gradient progressivo) */
.strata-split[data-diff="01"] .strata-split__visual { background: linear-gradient(135deg, #184173 0%, #137CA8 100%); }
.strata-split[data-diff="02"] .strata-split__visual { background: linear-gradient(135deg, #137CA8 0%, #33ADE2 100%); }
.strata-split[data-diff="03"] .strata-split__visual { background: linear-gradient(135deg, #184173 0%, #33ADE2 100%); }
.strata-split[data-diff="04"] .strata-split__visual { background: linear-gradient(135deg, #1F2933 0%, #184173 100%); }

/* RESPONSIVO — tablet/mobile colapsam para 1 coluna stack */
@media (max-width: 1023px) {
    .strata-split {
        grid-template-columns: 1fr;
        gap: 28px;
        padding: 24px 0;
    }
    /* Anula zigzag em mobile — sempre texto antes do visual */
    .strata-split:nth-child(even) .strata-split__text { order: 1; }
    .strata-split:nth-child(even) .strata-split__visual { order: 2; }
    .strata-split__visual {
        min-height: 260px;
        padding: 36px 24px;
    }
    .strata-split__icon {
        width: 160px;
        height: 160px;
    }
}

@media (max-width: 640px) {
    .strata-split-list {
        gap: 32px;
        margin-top: 40px;
    }
    .strata-split__title {
        font-size: 22px;
    }
    .strata-split__description {
        font-size: 15px;
    }
}