/**
 * DUOS — paleta e acentos dinâmicos
 *
 * - Logo do cabeçalho (hemisfério): controlada por html[data-duos-section="…"]
 *   (atualizado no scroll em assets/js/main.js).
 * - Cérebros por secção: variáveis no bloco da secção (#hero-scroll-container, #lado-tecnologico…).
 * - data-duos-track="hero" fica em #inicial (viewport), não no wrapper alto do hero —
 *   senão o scroll continua a escolher “hero” quando já estamos em Soluções técnicas.
 *
 * Paleta: marca #6BF3FF; tech #219EBC + #373F51; comunicação #FF8922 + #5929C2.
 */

:root {
    --duos-ink: #0c0c0e;

    /* Referência editorial (derivados da paleta) */
    --duos-palette-lime: #e4f0a8;
    --duos-palette-cyan: #6bf3ff;
    --duos-palette-magenta: #5929c2;
    --duos-palette-peach: #ffc8a8;
    --duos-palette-green: #7dffb3;

    /**
     * Acentos principais
     * Padrão = hero / ecossistema / contatos
     * Técnico = ciano #219EBC + slate #373F51 | Comunicação = laranja + violeta
     */
    --duos-accent-default: #6bf3ff;
    --duos-tech-blue:rgb(33, 139, 188);
    --duos-tech-slate: #373f51;
    --duos-comm-orange:rgb(255, 222, 34);
    --duos-comm-lilac: #5929c2;

    /* Hemisfério da logo + fallback antes de data-duos-section */
    --duos-accent-logo: var(--duos-accent-default);

    /* Cérebros: fallback genérico (secções redefinem abaixo) */
    --duos-brain-left: var(--duos-accent-default);
    --duos-brain-right: var(--duos-comm-lilac);
    --duos-brain-full-accent: var(--duos-accent-default);
}

/* -------------------------------------------------------------------------
 * Logo do cabeçalho (e rodapé): hemisfério acompanha a secção em foco no scroll
 * ------------------------------------------------------------------------- */
html[data-duos-section="hero"] {
    --duos-accent-logo: var(--duos-accent-default);
}

/**
 * Área técnica: hemisfério da logo = mesmo azul do fundo da secção (#lado-tecnologico).
 * (Mesmo token --duos-tech-blue; ajuste em um só lugar.)
 */
html[data-duos-section="tech"] {
    --duos-accent-logo: var(--duos-tech-blue);
}

html[data-duos-section="comm"] {
    --duos-accent-logo: var(--duos-comm-orange);
}

html[data-duos-section="ecossistema"],
html[data-duos-section="contato"] {
    --duos-accent-logo: var(--duos-accent-default);
}

/**
 * Menu principal (fundo escuro): hover / foco alinhados à cor da secção de destino.
 */
header nav[aria-label="Principal"] .duos-nav-link {
    transition: color 0.2s ease;
}

header nav[aria-label="Principal"] .duos-nav-link[data-duos-nav="tech"]:hover {
    color: color-mix(in srgb, var(--duos-tech-blue) 88%, #fff);
}

header nav[aria-label="Principal"] .duos-nav-link[data-duos-nav="ecossistema"]:hover {
    color: color-mix(in srgb, var(--duos-accent-default) 88%, #fff);
}

header nav[aria-label="Principal"] .duos-nav-link[data-duos-nav="comm"]:hover {
    color: color-mix(in srgb, var(--duos-comm-orange) 88%, #fff);
}

header nav[aria-label="Principal"] .duos-nav-link[data-duos-nav="contato"]:hover {
    color: color-mix(in srgb, var(--duos-accent-default) 88%, #fff);
}

header nav[aria-label="Principal"] .duos-nav-link[data-duos-nav="tech"]:focus-visible {
    outline-color: var(--duos-tech-blue);
}

header nav[aria-label="Principal"] .duos-nav-link[data-duos-nav="ecossistema"]:focus-visible {
    outline-color: var(--duos-accent-default);
}

header nav[aria-label="Principal"] .duos-nav-link[data-duos-nav="comm"]:focus-visible {
    outline-color: var(--duos-comm-orange);
}

header nav[aria-label="Principal"] .duos-nav-link[data-duos-nav="contato"]:focus-visible {
    outline-color: var(--duos-accent-default);
}

/* -------------------------------------------------------------------------
 * Rodapé — sócios (perfil editorial; avatares = iniciais + gradiente marca)
 * ------------------------------------------------------------------------- */

/**
 * Grid de 12 colunas sem depender do grid-cols-12 do Tailwind: repeat(12, 1fr)
 * usa mínimo automático do conteúdo e pode estourar a largura no mobile.
 */
footer#contato {
    box-sizing: border-box;
    max-width: 100%;
    min-width: 0;
}

footer#contato .duos-footer-shell {
    grid-template-columns: repeat(12, minmax(0, 1fr));
}

footer#contato .duos-footer-shell > * {
    min-width: 0;
}

.duos-partners-grid {
    align-items: stretch;
    min-width: 0;
    max-width: 100%;
}

/**
 * Trilhas com minmax(0, 1fr): evita que o mínimo intrínseco do conteúdo
 * estoure a largura no mobile (barra/corte à direita). Substitui grid-cols-* só neste bloco.
 */
#contato .duos-partners-grid {
    grid-template-columns: minmax(0, 1fr);
}

#contato .duos-partners-grid > article {
    min-width: 0;
    width: 100%;
    max-width: 100%;
}

@media (min-width: 768px) {
    #contato .duos-partners-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.duos-partner-card {
    position: relative;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    border-radius: 1rem;
    border: 1px solid color-mix(in srgb, var(--duos-ink) 8%, transparent);
    background:
        linear-gradient(165deg, #fff 0%, color-mix(in srgb, var(--duos-accent-default) 4%, #fafafa) 55%, #f4f4f5 100%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.85) inset,
        0 18px 44px -28px rgba(24, 24, 27, 0.22);
    padding: 1.35rem 1.25rem 1.5rem;
    transition:
        transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.35s ease;
}

.duos-partner-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.35s ease;
}

.duos-partner-card--tech::before {
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--duos-tech-blue) 12%, transparent),
        transparent 60%
    );
}

.duos-partner-card--comm::before {
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--duos-comm-orange) 16%, transparent),
        color-mix(in srgb, var(--duos-comm-lilac) 8%, transparent) 58%
    );
}

.duos-partner-card:hover {
    transform: translateY(-3px);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 28px 56px -32px color-mix(in srgb, var(--duos-ink) 28%, transparent);
}

.duos-partner-card:hover::before {
    opacity: 1;
}

.duos-partner-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 4rem;
    height: 4rem;
    border-radius: 10rem;
    overflow: hidden;
    font-family: "Rubik", system-ui, sans-serif;
    font-size: 1.125rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #fff;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        0 8px 20px -10px rgba(0, 0, 0, 0.35),
        0 0 0 2px rgba(255, 255, 255, 0.55);
}

.duos-partner-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
}

@media (min-width: 768px) {
    .duos-partner-avatar {
        width: 4.75rem;
        height: 4.75rem;
        font-size: 1.25rem;
    }
}

.duos-partner-avatar--tech {
    background: linear-gradient(145deg, var(--duos-tech-blue) 0%, var(--duos-tech-slate) 92%);
}

.duos-partner-avatar--comm {
    background: linear-gradient(145deg, var(--duos-comm-orange) 0%, var(--duos-comm-lilac) 95%);
}

.duos-partner-kicker {
    font-family: "Rubik", system-ui, sans-serif;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-bottom: 0.25rem;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.duos-partner-kicker--tech {
    color: var(--duos-tech-blue);
}

.duos-partner-kicker--comm {
    color: var(--duos-comm-orange);
}

.duos-partner-role {
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.duos-partner-card p {
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
}

#contato #footer-equipe-heading {
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.duos-partner-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.5rem;
}

.duos-partner-link {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    touch-action: manipulation;
    border-radius: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    transition: color 0.15s ease;
}

.duos-partner-link:focus-visible {
    outline: 2px solid var(--duos-tech-blue);
    outline-offset: 3px;
}

.duos-partner-card--comm .duos-partner-link--linkedin:focus-visible {
    outline-color: var(--duos-comm-lilac);
}

.duos-partner-link--whatsapp:focus-visible {
    outline-color: var(--duos-ink);
}

/* Flat / minimal: ícone + texto, sem fundo nem relevo */
.duos-partner-link--linkedin {
    flex-shrink: 0;
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: 0.375rem 0.25rem 0.375rem 0;
    color: #71717a;
}

.duos-partner-link--linkedin:hover {
    color: #0a66c2;
}

.duos-partner-icon {
    display: block;
    flex-shrink: 0;
}

.duos-partner-link--whatsapp {
    min-width: 0;
    max-width: 100%;
    min-height: 2.75rem;
    padding: 0.375rem 0;
    gap: 0.4rem;
    font-family: "Rubik", system-ui, sans-serif;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #71717a;
}

.duos-partner-link--whatsapp:hover {
    color: #0f766e;
}

.duos-partner-icon--wa {
    flex-shrink: 0;
    opacity: 0.85;
}

.duos-partner-link--whatsapp:hover .duos-partner-icon--wa {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .duos-partner-card {
        transition: none;
    }

    .duos-partner-card:hover {
        transform: none;
    }

    .duos-partner-link {
        transition: none;
    }
}

/* -------------------------------------------------------------------------
 * Cérebros: cor fixa por secção (independente do data-duos-section global)
 * ------------------------------------------------------------------------- */
#hero-scroll-container {
    --duos-brain-left: var(--duos-accent-default);
    --duos-brain-right: var(--duos-comm-lilac);
    --duos-brain-full-accent: var(--duos-accent-default);
}

#lado-tecnologico {
    /* Hemisfério: ciano técnico sobre fundo slate */
    --duos-tech-brain-fill: #5ec8e0;
    --duos-brain-left: var(--duos-tech-brain-fill);
    --duos-brain-right: var(--duos-tech-brain-fill);
    --duos-tech-heading-accent: #a5e8f5;
    --duos-tech-body-muted: #c8d4dc;
    --duos-tech-surface-deep: #1e2635;
    --duos-tech-surface-mid: color-mix(in srgb, var(--duos-tech-blue) 38%, var(--duos-tech-slate));
}

#lado-humano {
    --duos-comm-brain-fill:rgb(255, 216, 108);
    --duos-brain-left: var(--duos-comm-orange);
    --duos-brain-right: var(--duos-comm-brain-fill);
    --duos-comm-heading-accent:rgb(255, 248, 153);
    --duos-comm-body-muted: rgba(255, 251, 235, 0.85);
    --duos-comm-surface-deep:rgb(53, 35, 85);
    --duos-comm-surface-mid: color-mix(in srgb, var(--duos-comm-lilac) 55%, #1f1525);
}

#sobre {
    --duos-brain-full-accent: var(--duos-accent-default);
}

/**
 * brain-outline.svg: PNG por baixo, outline por cima (DOM: <image> antes do <g> do path).
 * z-index reforça a pilha quando o SVG está inlinado no HTML.
 */
#sobre .ecosistema-brain-stack svg {
    isolation: isolate;
}

@keyframes duos-ecosistema-brain-art-opacity {
    0% {
        opacity: 0.26;
    }

    100% {
        opacity: 0.44;
    }
}

#sobre .ecosistema-brain-stack svg image.duos-ecosistema-brain-art {
    position: relative;
    z-index: 0;
    opacity: 0.35;
    animation: duos-ecosistema-brain-art-opacity 8s ease-in-out infinite alternate;
}

#sobre .ecosistema-brain-stack svg .duos-ecosistema-outline-layer {
    position: relative;
    z-index: 1;
}

#sobre .ecosistema-brain-stack svg path {
    /* Sólido: antes fill com 90% transparente deixava ver orbits do fundo através do traço */
    /* fill: none !important; */
    stroke: var(--duos-accent-default) !important;
    stroke-opacity: 1;
    fill-opacity: 1;
    stroke-width: 0;
    paint-order: stroke fill;
}

/**
 * Hero: arte PNG atrás dos hemisférios; fill-opacity alternado nos paths (ver main.css).
 */
@keyframes duos-hero-hemisphere-fill-pulse {
    0%,
    100% {
        fill-opacity: 0.62;
    }

    50% {
        fill-opacity: 0.88;
    }
}

#hero-scroll-container #brain-left path.duos-brain-left-fill,
#hero-scroll-container #brain-right path.duos-brain-right-fill {
    animation: duos-hero-hemisphere-fill-pulse 8s ease-in-out infinite alternate;
}

#hero-scroll-container #brain-right path.duos-brain-right-fill {
    animation-delay: -4s;
}

/* Tipografia de destaque alinhada aos lados (usar classes .text-duos-tech / .text-duos-comm) */
.text-duos-tech {
    color: var(--duos-tech-blue);
}

.text-duos-comm {
    color: var(--duos-comm-lilac);
}

.text-duos-accent {
    color: var(--duos-accent-default);
}

/**
 * Logo (hemisfério): fill em CSS + !important (Tailwind CDN pode injetar estilos depois dos links).
 * var() no atributo fill do SVG também pode cair no fallback #b1ffea (mint).
 */
#duos-header-logo svg .duos-logo-accent,
footer svg .duos-logo-accent {
    transition: fill 0.35s ease;
}

html[data-duos-section='hero'] #duos-header-logo svg .duos-logo-accent,
html[data-duos-section='hero'] footer svg .duos-logo-accent {
    fill: var(--duos-accent-default) !important;
}

html[data-duos-section='tech'] #duos-header-logo svg .duos-logo-accent,
html[data-duos-section='tech'] footer svg .duos-logo-accent {
    fill: var(--duos-tech-blue) !important;
}

html[data-duos-section='comm'] #duos-header-logo svg .duos-logo-accent,
html[data-duos-section='comm'] footer svg .duos-logo-accent {
    fill: var(--duos-accent-logo) !important;
}

html[data-duos-section='ecossistema'] #duos-header-logo svg .duos-logo-accent,
html[data-duos-section='ecossistema'] footer svg .duos-logo-accent,
html[data-duos-section='contato'] #duos-header-logo svg .duos-logo-accent,
html[data-duos-section='contato'] footer svg .duos-logo-accent {
    fill: var(--duos-accent-default) !important;
}

/* Hemisférios brain-left.svg: fill via CSS (evita fallback mint no atributo) */
#hero-scroll-container svg .duos-brain-left-fill {
    fill: var(--duos-brain-left) !important;
    transition: fill 0.35s ease;
}

#hero-scroll-container svg .duos-brain-right-fill {
    fill: var(--duos-brain-right) !important;
    transition: fill 0.35s ease;
}

#lado-tecnologico svg .duos-brain-left-fill {
    fill: var(--duos-tech-brain-fill) !important;
    transition: fill 0.35s ease;
}

#lado-humano svg .duos-brain-right-fill {
    fill: var(--duos-comm-brain-fill) !important;
    transition: fill 0.35s ease;
}

/* Hero: mesh alinhado ao azul técnico / lilás comunicação */
#inicial .hero-canvas {
    background:
        radial-gradient(
            ellipse 90% 70% at 85% 55%,
            color-mix(in srgb, var(--duos-tech-blue) 14%, transparent),
            transparent 55%
        ),
        radial-gradient(
            ellipse 60% 50% at 10% 20%,
            color-mix(in srgb, var(--duos-comm-lilac) 10%, transparent),
            transparent 50%
        ),
        linear-gradient(165deg, #fafafa 0%, #f4f4f5 45%, #fafafa 100%);
}

/**
 * Área técnica: fundo azul predominante + texto claro.
 * Logo no header: html[data-duos-section="tech"] → --duos-accent-logo (mesmo --duos-tech-blue).
 */
#lado-tecnologico.editorial-section {
    position: relative;
    overflow: hidden;
    background-color: var(--duos-tech-surface-deep);
    background-image:
        radial-gradient(
            ellipse 100% 95% at 0% 42%,
            color-mix(in srgb, var(--duos-tech-blue) 72%, transparent),
            transparent 58%
        ),
        radial-gradient(
            ellipse 55% 50% at 95% 88%,
            color-mix(in srgb, var(--duos-tech-blue) 38%, transparent),
            transparent 52%
        ),
        linear-gradient(
            168deg,
            var(--duos-tech-surface-mid) 0%,
            var(--duos-tech-surface-deep) 52%,
            #020617 100%
        );
    border-top-color: rgba(255, 255, 255, 0.12);
    color: #f1f5f9;
}

#lado-tecnologico.editorial-section::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.22;
    background-image: var(--grain);
    mix-blend-mode: overlay;
}

#lado-tecnologico.editorial-section h2,
#lado-tecnologico.editorial-section h3 {
    color: #ffffff;
}

#lado-tecnologico.editorial-section .duos-tech-card__body {
    color: var(--duos-tech-body-muted);
}

#lado-tecnologico.editorial-section .text-duos-tech,
#lado-tecnologico .duos-tech-heading__accent {
    color: var(--duos-tech-heading-accent);
}

/* Layout & coluna visual */
.duos-tech-inner {
    position: relative;
    z-index: 1;
}

.duos-tech-visual {
    isolation: isolate;
    overflow: hidden;
}

.duos-tech-visual__mesh {
    position: absolute;
    inset: -12% -8%;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 20%, transparent 75%);
    opacity: 0.55;
    pointer-events: none;
}

.duos-tech-visual__glow {
    position: absolute;
    width: min(420px, 85vw);
    height: min(420px, 85vw);
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(
        circle,
        color-mix(in srgb, var(--duos-tech-blue) 35%, transparent) 0%,
        transparent 62%
    );
    filter: blur(36px);
    pointer-events: none;
    z-index: 0;
}

.duos-tech-watermark {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -48%);
    font-size: min(18vw, 13rem);
    font-weight: 800;
    letter-spacing: -0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    color: rgba(255, 255, 255, 0.06);
    z-index: 1;
    pointer-events: none;
    user-select: none;
}

.duos-tech-eyebrow {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0 0 1rem;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--duos-tech-heading-accent);
}

.duos-tech-eyebrow__rule {
    flex-shrink: 0;
    width: 2.75rem;
    height: 2px;
    background: linear-gradient(90deg, var(--duos-tech-heading-accent), transparent);
    border-radius: 1px;
}

.duos-tech-heading__accent {
    display: inline-block;
    margin-top: 0.12em;
}

/* Cartões */
.duos-tech-cards {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.duos-tech-card {
    margin: 0;
    padding: 1.15rem 1.25rem 1.25rem;
    border-radius: 0.875rem;
    border: 1px solid rgba(255, 255, 255, 0.11);
    background: linear-gradient(152deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.02) 100%);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.18);
    transition:
        opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.4s ease,
        box-shadow 0.4s ease;
    opacity: 0;
    transform: translate3d(0, 14px, 0);
}

#lado-tecnologico.is-visible .duos-tech-card {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

#lado-tecnologico.is-visible .duos-tech-card:nth-child(1) {
    transition-delay: 0.06s;
}

#lado-tecnologico.is-visible .duos-tech-card:nth-child(2) {
    transition-delay: 0.14s;
}

#lado-tecnologico.is-visible .duos-tech-card:nth-child(3) {
    transition-delay: 0.22s;
}

.duos-tech-card:hover {
    transform: translate3d(0, -4px, 0);
    border-color: color-mix(in srgb, var(--duos-tech-blue) 42%, rgba(255, 255, 255, 0.2));
    box-shadow:
        0 16px 40px rgba(0, 0, 0, 0.28),
        0 0 0 1px color-mix(in srgb, var(--duos-tech-blue) 25%, transparent);
}

#lado-tecnologico.is-visible .duos-tech-card:hover {
    transform: translate3d(0, -4px, 0);
}

.duos-tech-card__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.65rem;
}

.duos-tech-card__index {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    /* ≥4.5:1 sobre fundos tech (#1e2635 / cartão) */
    color: rgba(255, 255, 255, 0.52);
}

.duos-tech-card__icon {
    font-size: 1.625rem;
    color: var(--duos-tech-heading-accent);
    opacity: 0.95;
    transition: transform 0.35s ease;
}

.duos-tech-card:hover .duos-tech-card__icon {
    transform: scale(1.08);
}

.duos-tech-card__title {
    margin: 0 0 0.45rem;
    font-size: 0.9375rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #fff;
}

.duos-tech-card__body {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.55;
    max-width: 26rem;
}

/**
 * Comunicação: tom editorial / humano (contraste com o bloco técnico azul).
 */
#lado-humano.editorial-section {
    position: relative;
    overflow: hidden;
    background-color: var(--duos-comm-surface-deep);
    background-image:
        radial-gradient(
            ellipse 90% 80% at 100% 20%,
            color-mix(in srgb, var(--duos-comm-lilac) 45%, transparent),
            transparent 55%
        ),
        radial-gradient(
            ellipse 70% 55% at 0% 90%,
            color-mix(in srgb, var(--duos-comm-orange) 28%, transparent),
            transparent 58%
        ),
        linear-gradient(
            168deg,
            var(--duos-comm-surface-mid) 0%,
            var(--duos-comm-surface-deep) 48%,
            #0f0618 100%
        );
    border-top-color: rgba(255, 255, 255, 0.1);
    color: #faf5ff;
}

#lado-humano.editorial-section::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.2;
    background-image: var(--grain);
    mix-blend-mode: overlay;
}

#lado-humano.editorial-section h2,
#lado-humano.editorial-section h3 {
    color: #ffffff;
}

#lado-humano.editorial-section .duos-comm-card__body {
    color: var(--duos-comm-body-muted);
}

#lado-humano.editorial-section .text-duos-comm,
#lado-humano .duos-comm-heading__accent {
    color: var(--duos-comm-heading-accent);
}

.duos-comm-inner {
    position: relative;
    z-index: 1;
}

.duos-comm-visual {
    isolation: isolate;
    overflow: hidden;
}

/* Textura orgânica: pontos suaves (diferente da grelha técnica) */
.duos-comm-visual__blobs {
    position: absolute;
    inset: -10% -10%;
    background-image: radial-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 28px 28px;
    mask-image: radial-gradient(ellipse 70% 65% at 55% 45%, black 25%, transparent 72%);
    opacity: 0.65;
    pointer-events: none;
}

.duos-comm-visual__glow {
    position: absolute;
    width: min(440px, 90vw);
    height: min(440px, 90vw);
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(
        circle,
        color-mix(in srgb, var(--duos-comm-orange) 34%, transparent) 0%,
        color-mix(in srgb, var(--duos-comm-lilac) 22%, transparent) 48%,
        transparent 62%
    );
    filter: blur(40px);
    pointer-events: none;
    z-index: 0;
}

.duos-comm-watermark {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -48%);
    font-size: min(17vw, 12rem);
    font-weight: 800;
    letter-spacing: -0.05em;
    text-transform: uppercase;
    white-space: nowrap;
    color: rgba(255, 255, 255, 0.06);
    z-index: 1;
    pointer-events: none;
    user-select: none;
}

.duos-comm-eyebrow {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0 0 1rem;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--duos-comm-heading-accent);
}

.duos-comm-eyebrow__rule {
    flex-shrink: 0;
    width: 2.75rem;
    height: 2px;
    background: linear-gradient(90deg, var(--duos-comm-heading-accent), transparent);
    border-radius: 1px;
}

.duos-comm-heading__accent {
    display: inline-block;
    margin-top: 0.12em;
}

.duos-comm-cards {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.duos-comm-card {
    margin: 0;
    padding: 1.15rem 1.25rem 1.25rem;
    border-radius: 0.875rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: linear-gradient(
        148deg,
        rgba(255, 255, 255, 0.12) 0%,
        rgba(255, 255, 255, 0.03) 100%
    );
    box-shadow: 0 4px 28px rgba(0, 0, 0, 0.22);
    transition:
        opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.4s ease,
        box-shadow 0.4s ease;
    opacity: 0;
    transform: translate3d(0, 14px, 0);
}

#lado-humano.is-visible .duos-comm-card {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

#lado-humano.is-visible .duos-comm-card:nth-child(1) {
    transition-delay: 0.06s;
}

#lado-humano.is-visible .duos-comm-card:nth-child(2) {
    transition-delay: 0.14s;
}

#lado-humano.is-visible .duos-comm-card:nth-child(3) {
    transition-delay: 0.22s;
}

.duos-comm-card:hover {
    transform: translate3d(0, -4px, 0);
    border-color: color-mix(in srgb, var(--duos-comm-lilac) 48%, rgba(255, 255, 255, 0.18));
    box-shadow:
        0 16px 44px rgba(0, 0, 0, 0.32),
        0 0 0 1px color-mix(in srgb, var(--duos-comm-lilac) 28%, transparent);
}

#lado-humano.is-visible .duos-comm-card:hover {
    transform: translate3d(0, -4px, 0);
}

.duos-comm-card__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.65rem;
}

.duos-comm-card__index {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    /* ≥4.5:1 sobre fundos comm (#352355 / cartão) */
    color: rgba(255, 255, 255, 0.52);
}

.duos-comm-card__icon {
    font-size: 1.625rem;
    color: var(--duos-comm-heading-accent);
    opacity: 0.95;
    transition: transform 0.35s ease;
}

.duos-comm-card:hover .duos-comm-card__icon {
    transform: scale(1.08);
}

.duos-comm-card__title {
    margin: 0 0 0.45rem;
    font-size: 0.9375rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #fff;
}

.duos-comm-card__body {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.55;
    max-width: 26rem;
}

@media (max-width: 767px) {
    .duos-tech-visual,
    .duos-comm-visual {
        min-height: 240px;
    }

    .duos-tech-brain,
    .duos-comm-brain {
        height: min(320px, 44vh) !important;
    }

    .duos-tech-watermark,
    .duos-comm-watermark {
        font-size: min(20vw, 6.25rem);
        transform: translate(-50%, -52%);
        opacity: 0.75;
    }

    .duos-tech-visual__glow,
    .duos-comm-visual__glow {
        filter: blur(28px);
        opacity: 0.85;
    }

    .duos-tech-card,
    .duos-comm-card,
    .duos-partner-card {
        border-radius: 0.75rem;
    }

    .duos-tech-card,
    .duos-comm-card {
        padding: 1rem 0.95rem 1.05rem;
    }

    .duos-tech-card__title,
    .duos-comm-card__title {
        font-size: 0.86rem;
        letter-spacing: 0.08em;
    }

    .duos-tech-card__body,
    .duos-comm-card__body {
        max-width: none;
        font-size: 0.82rem;
        line-height: 1.52;
    }

    .duos-partner-card {
        padding: 1.15rem 1rem 1.2rem;
    }

    .duos-partner-avatar {
        width: 3.25rem;
        height: 3.25rem;
    }

    .duos-partner-actions {
        gap: 0.75rem 1.1rem;
    }

    .duos-partner-link--linkedin,
    .duos-partner-link--whatsapp {
        min-height: 2.5rem;
    }

    .duos-partner-link--whatsapp {
        font-size: 0.625rem;
        letter-spacing: 0.08em;
    }
}