/* ==========================================================================
   RANERI — Páginas internas
   --------------------------------------------------------------------------
   Componentes exclusivos das páginas internas (Soluções, Mercados, Projetos,
   Insights, Empresa, Contato). Consomem os tokens e os componentes
   compartilhados de base.css e home.css (seção, figura, faixa de proposta).
   Mobile-first; os breakpoints deste arquivo (40/48/60/75em) ficam no FIM
   dele, para manter cada página interna inteira em um só lugar.
   Mapa das páginas e da navegação: docs/ARQUITETURA.md

   Carregamento: tokens → base → header → home → pages → responsive
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero interno (.internal-hero)
   Abertura das páginas internas, sob o header sobreposto. Mais baixo que o
   hero da Home (≈ 55–70% da janela no desktop). Camadas:
     __backdrop   gradiente escuro + grade isométrica (sempre)
     __media      fotografia ou desenho técnico (opcional, <picture>)
     __inner      breadcrumb no topo; conteúdo e aside na base
   Variantes de composição (uma por página, para não parecerem cópias):
     --diagrama   diagrama unifilar à direita (Soluções)
     --media      imagem em largura total com overlay (Mercados)
     --split      texto + figura emoldurada (Projetos)
     --compacto   abertura mais baixa, voltada à ação (Contato)
   -------------------------------------------------------------------------- */
.internal-hero {
    --ih-min-height: min(40rem, 80svh);

    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: var(--ih-min-height);
    padding-block: calc(var(--header-height) + var(--space-sm)) clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
    background-color: var(--color-bg-deep);
    color: var(--color-white);
}

/* Fundo: o mesmo gradiente escuro do hero da Home, com brilho vermelho discreto */
.internal-hero__backdrop {
    position: absolute;
    inset: 0;
    z-index: -2;
    background-image:
        radial-gradient(80% 70% at 82% 38%, rgba(165, 25, 22, 0.1) 0%, rgba(165, 25, 22, 0) 60%),
        linear-gradient(118deg, #090909 0%, #121212 48%, #1b1b1b 100%);
    pointer-events: none;
}

/* Grade isométrica de 30° (o ângulo do símbolo), mais presente à direita */
.internal-hero__backdrop::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("../img/texturas/grade-isometrica-escura.svg");
    background-size: 55.4256px 32px;
    -webkit-mask-image: linear-gradient(100deg, rgba(0, 0, 0, 0.35) 20%, #000 75%);
    mask-image: linear-gradient(100deg, rgba(0, 0, 0, 0.35) 20%, #000 75%);
}

/* Mídia opcional (fotografia ou desenho) em largura total, sob um overlay
   que garante a leitura do texto à esquerda */
.internal-hero__media {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

.internal-hero__media picture,
.internal-hero__image {
    display: block;
    width: 100%;
    height: 100%;
}

.internal-hero__image {
    object-fit: cover;
    object-position: var(--ih-focal, 70% 50%);
}

.internal-hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(10, 10, 10, 0.55) 0%, rgba(10, 10, 10, 0) 30%),
        linear-gradient(0deg, rgba(10, 10, 10, 0.94) 0%, rgba(10, 10, 10, 0.7) 60%, rgba(10, 10, 10, 0.45) 100%);
}

.internal-hero__inner {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--space-lg);
}

.internal-hero__body {
    display: grid;
    gap: var(--space-lg);
    margin-top: auto;
}

.internal-hero__content {
    display: grid;
    justify-items: start;
    gap: var(--space-md);
    max-width: 54rem;
}

.internal-hero__title {
    max-width: 18em;
    font-size: clamp(2.25rem, 1.4rem + 2.6vw, 4rem);
    font-weight: var(--fw-semibold);
    line-height: 1.04;
    letter-spacing: var(--ls-tight);
}

.internal-hero__lead {
    max-width: 40rem;
    font-size: var(--fs-md);
    line-height: var(--lh-relaxed);
    color: rgba(255, 255, 255, 0.76);
}

.internal-hero__actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-xs);
    width: 100%;
    max-width: 24rem;
    margin-top: var(--space-xs);
}

.internal-hero .link-arrow {
    margin-top: var(--space-2xs);
    color: var(--color-white);
}

/* --diagrama: diagrama unifilar da camada técnica do hero da Home, à direita */
.internal-hero--diagrama .internal-hero__backdrop::after {
    content: "";
    position: absolute;
    inset: 0;
    background: url("../img/hero/hero-fallback.svg") right center / cover no-repeat;
    opacity: 0.45;
    -webkit-mask-image: linear-gradient(90deg, transparent 45%, #000 85%);
    mask-image: linear-gradient(90deg, transparent 45%, #000 85%);
}

/* --compacto: abertura mais baixa */
.internal-hero--compacto {
    --ih-min-height: min(34rem, 70svh);
}

/* --------------------------------------------------------------------------
   Breadcrumb — pequeno, técnico, discreto (mono, caixa-alta, barra "/")
   -------------------------------------------------------------------------- */
.breadcrumb {
    font-family: var(--font-mono);
    font-size: var(--fs-2xs);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
}

.breadcrumb__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 0.625rem;
}

.breadcrumb__item {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    color: rgba(255, 255, 255, 0.58);
}

.breadcrumb__item + .breadcrumb__item::before {
    content: "/";
    color: var(--color-accent);
}

.breadcrumb a {
    display: inline-block;
    padding-block: 0.5rem;
    color: inherit;
    text-decoration: none;
    transition: color var(--dur-base) var(--ease-standard);
}

.breadcrumb a:hover,
.breadcrumb a[aria-current="page"] {
    color: var(--color-white);
}

/* --------------------------------------------------------------------------
   Introdução da página — declaração em escala editorial
   Celular: rótulo acima; ≥ 60em: rótulo à esquerda, texto à direita.
   -------------------------------------------------------------------------- */
.page-intro {
    display: grid;
    gap: var(--space-lg);
}

.page-intro__body {
    display: grid;
    gap: var(--space-md);
    max-width: 58rem;
}

.page-intro__title {
    font-size: clamp(1.625rem, 1.1rem + 1.9vw, 2.75rem);
    font-weight: var(--fw-medium);
    line-height: 1.16;
    letter-spacing: var(--ls-snug);
}

.page-intro__text {
    max-width: 44rem;
    font-size: var(--fs-md);
    color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   Visão geral — índice de frentes (Soluções): registro técnico em colunas.
   O título de cada item é o link (cobre o bloco inteiro).
   -------------------------------------------------------------------------- */
.overview {
    display: grid;
    margin-top: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
    border-bottom: var(--border-width) solid var(--color-line);
}

.overview__item {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-content: start;
    gap: var(--space-sm) var(--space-md);
    padding-block: var(--space-lg);
    border-top: var(--border-width) solid var(--color-line);
}

/* Fio vermelho sobre a linha (estende no hover, como em Soluções da Home) */
.overview__item::before {
    content: "";
    position: absolute;
    top: calc(var(--border-width) * -1);
    left: 0;
    width: 100%;
    height: var(--border-accent);
    background-color: var(--color-accent);
    clip-path: inset(0 calc(100% - 2.5rem) 0 0);
    transition: clip-path var(--dur-slower) var(--ease-out-expo);
}

.overview__item:hover::before,
.overview__item:focus-within::before {
    clip-path: inset(0 0 0 0);
}

.overview__index {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: var(--ls-wide);
    color: var(--color-text-subtle);
}

.overview__icon {
    grid-row: 1 / span 2;
    grid-column: 2;
    color: var(--color-text-muted);
}

.overview__title {
    font-size: var(--fs-lg);
    font-weight: var(--fw-medium);
    line-height: 1.2;
    letter-spacing: var(--ls-snug);
}

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

/* Área de clique: o bloco inteiro */
.overview__title a::after {
    content: "";
    position: absolute;
    inset: 0;
}

.overview__text {
    grid-column: 1 / -1;
    max-width: 30rem;
    color: var(--color-text-muted);
}

.overview__more {
    grid-column: 1 / -1;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-mono);
    font-size: var(--fs-2xs);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    color: var(--color-text-subtle);
}

.overview__more svg {
    width: 0.75rem;
    height: 0.75rem;
    color: var(--color-accent);
    rotate: 90deg;
    transition: transform var(--dur-base) var(--ease-out);
}

.overview__item:hover .overview__more svg {
    transform: translateX(3px);
}

/* --------------------------------------------------------------------------
   Bloco editorial alternado (.feature) — texto + figura, com a figura
   trocando de lado a cada bloco (.feature--reverse) a partir de 60em.
   -------------------------------------------------------------------------- */
.feature {
    display: grid;
    gap: clamp(2.5rem, 1.5rem + 4vw, 4rem);
    align-items: center;
}

.feature__body {
    display: grid;
    justify-items: start;
    gap: var(--space-md);
}

.feature__title {
    max-width: 16em;
    font-size: clamp(1.875rem, 1.2rem + 2.4vw, 3.25rem);
    font-weight: var(--fw-semibold);
    line-height: 1.08;
    letter-spacing: var(--ls-tight);
}

.feature__lead {
    max-width: 36rem;
    font-size: var(--fs-md);
    color: var(--color-text);
}

.feature__text {
    max-width: 36rem;
    color: var(--color-text-muted);
}

/* Lista de aplicações: linhas finas com o nó RANERI */
.feature__group {
    width: 100%;
    max-width: 36rem;
    margin-top: var(--space-sm);
}

.feature__group-title {
    margin-bottom: var(--space-2xs);
    font-family: var(--font-mono);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-regular);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    color: var(--color-text-subtle);
}

.feature__list {
    border-top: var(--border-width) solid var(--color-line);
}

.feature__list li {
    display: flex;
    align-items: baseline;
    gap: 0.875rem;
    padding-block: 0.75rem;
    border-bottom: var(--border-width) solid var(--color-line);
    font-size: var(--fs-sm);
    line-height: 1.45;
}

.feature__list li::before {
    content: "";
    flex: none;
    width: 0.75rem;
    height: calc(0.75rem * 0.5774);
    background: linear-gradient(90deg, var(--color-accent) 50%, var(--color-text) 50%);
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
    transform: translateY(-0.1em);
}

/* Frentes relacionadas (Mercados → Soluções): links compactos em mono */
.related {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
}

.related a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.25rem;
    padding: 0.375rem 0.75rem;
    border: var(--border-width) solid var(--color-line-strong);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    font-size: var(--fs-sm);
    line-height: 1.3;
    text-decoration: none;
    transition: border-color var(--dur-base) var(--ease-standard);
}

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

.related__index {
    font-family: var(--font-mono);
    font-size: var(--fs-2xs);
    color: var(--color-text-subtle);
}

/* --------------------------------------------------------------------------
   Fases (Soluções · Como apoiamos): barramento com um nó por fase —
   vertical no celular, horizontal a partir de 48em.
   -------------------------------------------------------------------------- */
.phases {
    position: relative;
    display: grid;
    gap: var(--space-xl);
    padding-left: 2.25rem;
}

/* Barramento */
.phases::before {
    content: "";
    position: absolute;
    top: 0.5rem;
    bottom: 0.5rem;
    left: 0.4375rem;
    width: var(--border-width);
    background-color: var(--color-line-strong);
}

.phases__item {
    position: relative;
    display: grid;
    align-content: start;
    gap: var(--space-xs);
}

.phases__node {
    position: absolute;
    top: 0.55rem;
    left: calc(-2.25rem + 0.4375rem + 0.5px - var(--node-w) / 2);
}

.phases__step {
    font-family: var(--font-mono);
    font-size: var(--fs-2xs);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    color: var(--color-text-subtle);
}

.phases__title {
    font-size: var(--fs-lg);
    font-weight: var(--fw-medium);
    line-height: 1.2;
}

.phases__text {
    max-width: 24rem;
    color: var(--color-text-muted);
}

.phases__refs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
    margin-top: var(--space-2xs);
    font-family: var(--font-mono);
    font-size: var(--fs-2xs);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
}

.phases__refs a {
    display: inline-block;
    padding-block: 0.25rem;
    color: var(--color-text-subtle);
    text-decoration: none;
    transition: color var(--dur-base) var(--ease-standard);
}

.phases__refs a:hover {
    color: var(--color-white);
}

/* --------------------------------------------------------------------------
   Índice em barramento dentro do hero (Mercados): um nó por público,
   cada um levando à sua seção. Celular: duas colunas; ≥ 60em: barramento.
   -------------------------------------------------------------------------- */
.bus-index__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: var(--border-width) solid rgba(255, 255, 255, 0.22);
}

.bus-index__item a {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 3rem;
    padding-block: 0.625rem;
    border-bottom: var(--border-width) solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.84);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    line-height: 1.3;
    text-decoration: none;
    transition: color var(--dur-base) var(--ease-standard);
}

.bus-index__item a:hover {
    color: var(--color-white);
}

/* --------------------------------------------------------------------------
   Lema (Empresa · aside do hero): "Realizar. Inovar. Transformar."
   -------------------------------------------------------------------------- */
.motto {
    display: grid;
    gap: 0.25rem;
    padding-top: var(--space-lg);
    border-top: var(--border-width) solid rgba(255, 255, 255, 0.18);
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 1.2rem + 2vw, 3rem);
    font-weight: var(--fw-medium);
    line-height: 1.12;
    letter-spacing: var(--ls-tight);
}

.motto__line {
    display: flex;
    align-items: baseline;
    gap: var(--space-sm);
}

.motto__line:last-child {
    color: var(--color-white);
}

.motto__line:not(:last-child) {
    color: rgba(255, 255, 255, 0.62);
}

.motto__index {
    min-width: 1.75rem;
    font-family: var(--font-mono);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-regular);
    letter-spacing: var(--ls-wide);
    color: var(--color-text-subtle);
    transform: translateY(-0.9em);
}

/* Figura em retrato (fotografia institucional) */
.feature__figure--retrato {
    --figure-ratio: 4 / 5;

    width: 100%;
    max-width: 32rem;
}

/* --------------------------------------------------------------------------
   Princípios (Empresa · Abordagem): três colunas numeradas
   -------------------------------------------------------------------------- */
.principles {
    display: grid;
    gap: 0 var(--space-xl);
    border-bottom: var(--border-width) solid var(--color-line);
}

.principles__item {
    position: relative;
    display: grid;
    align-content: start;
    gap: var(--space-sm);
    padding-block: var(--space-lg) var(--space-xl);
    border-top: var(--border-width) solid var(--color-line);
}

.principles__item::before {
    content: "";
    position: absolute;
    top: calc(var(--border-width) * -1);
    left: 0;
    width: 2.5rem;
    height: var(--border-accent);
    background-color: var(--color-accent);
}

.principles__index {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: var(--ls-wide);
    color: var(--color-text-subtle);
}

.principles__title {
    font-size: clamp(1.375rem, 1.05rem + 1vw, 2rem);
    font-weight: var(--fw-medium);
    line-height: 1.16;
}

.principles__text {
    max-width: 26rem;
    color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   Compromissos (Empresa): quatro colunas com o nó RANERI
   -------------------------------------------------------------------------- */
.pillars {
    display: grid;
    border-top: var(--border-width) solid var(--color-line);
}

.pillars__item {
    display: grid;
    gap: var(--space-2xs);
    padding: var(--space-md) var(--space-md) var(--space-md) 0;
    border-bottom: var(--border-width) solid var(--color-line);
}

.pillars__title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-family: var(--font-sans);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-wider);
    text-transform: uppercase;
}

.pillars__title::before {
    content: "";
    flex: none;
    width: 0.75rem;
    height: calc(0.75rem * 0.5774);
    background: linear-gradient(90deg, var(--color-accent) 50%, var(--color-text) 50%);
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

.pillars__text {
    max-width: 22rem;
    color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   Canais de contato (Contato): três colunas "rótulo · valor · nota · ação"
   -------------------------------------------------------------------------- */
.channels {
    display: grid;
    gap: 0 var(--space-xl);
}

.channels__item {
    position: relative;
    display: grid;
    align-content: start;
    justify-items: start;
    gap: var(--space-xs);
    padding-block: var(--space-lg);
    border-top: var(--border-width) solid var(--color-line);
}

.channels__item::before {
    content: "";
    position: absolute;
    top: calc(var(--border-width) * -1);
    left: 0;
    width: 2.5rem;
    height: var(--border-accent);
    background-color: var(--color-accent);
}

.channels__label {
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-wider);
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.channels__value {
    font-family: var(--font-display);
    font-size: clamp(1.375rem, 1rem + 0.9vw, 2rem);
    font-weight: var(--fw-medium);
    line-height: 1.15;
    letter-spacing: var(--ls-snug);
    overflow-wrap: anywhere;
}

.channels__text {
    color: var(--color-text-muted);
}

.channels .link-arrow {
    margin-top: var(--space-2xs);
}

/* --------------------------------------------------------------------------
   Solicitação de proposta (Contato): roteiro numerado ao lado das ações
   -------------------------------------------------------------------------- */
.request {
    display: grid;
    gap: var(--space-xl);
}

.checklist {
    counter-reset: none;
    border-top: var(--border-width) solid var(--color-line);
}

.checklist__item {
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr);
    gap: var(--space-2xs) var(--space-sm);
    padding-block: var(--space-md);
    border-bottom: var(--border-width) solid var(--color-line);
}

.checklist__index {
    grid-row: 1 / span 2;
    padding-top: 0.3em;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: var(--ls-wide);
    color: var(--color-text-subtle);
}

.checklist__title {
    font-size: var(--fs-lg);
    font-weight: var(--fw-medium);
    line-height: 1.25;
}

.checklist__text {
    color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   Hero --split (Projetos): texto + figura emoldurada à direita
   -------------------------------------------------------------------------- */
.internal-hero__figure {
    --figure-ratio: 4 / 3;
    --figure-mark-color: rgba(255, 255, 255, 0.32);

    width: 100%;
    max-width: 36rem;
}

.internal-hero__figure .figure__label {
    color: rgba(255, 255, 255, 0.55);
}

.internal-hero__figure .figure__label::after {
    background-color: rgba(255, 255, 255, 0.14);
}

/* Visão geral com links para outra página: seta para a direita */
.overview__more .overview__arrow--right {
    rotate: none;
}

/* --------------------------------------------------------------------------
   Ficha técnica (Projetos · Estrutura): carimbo de prancha em HTML real —
   cada campo com índice, nome e o que ele vai conter
   -------------------------------------------------------------------------- */
.spec {
    display: grid;
    gap: var(--space-xl);
}

.spec-sheet {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;
    border: var(--border-width) solid var(--color-line-strong);
}

/* Nó RANERI no canto do carimbo */
.spec-sheet::before {
    content: "";
    position: absolute;
    top: calc(var(--node-w, 0.875rem) * -0.29);
    left: calc(var(--node-w, 0.875rem) * -0.5);
    width: 0.875rem;
    height: calc(0.875rem * 0.5774);
    background: linear-gradient(90deg, var(--color-accent) 50%, var(--color-text) 50%);
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

.spec-sheet__cell {
    display: grid;
    align-content: start;
    gap: var(--space-2xs);
    padding: var(--space-sm) var(--space-md) var(--space-md);
    border-right: var(--border-width) solid var(--color-line);
    border-bottom: var(--border-width) solid var(--color-line);
}

.spec-sheet__cell--wide,
.spec-sheet__cell--half {
    grid-column: 1 / -1;
}

.spec-sheet__label {
    display: flex;
    align-items: baseline;
    gap: 0.625rem;
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-wider);
    text-transform: uppercase;
}

.spec-sheet__index {
    font-family: var(--font-mono);
    font-weight: var(--fw-regular);
    letter-spacing: var(--ls-wide);
    color: var(--color-text-subtle);
}

.spec-sheet__text {
    margin: 0;
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   Insights — expediente do hero (linha editorial) e temas
   -------------------------------------------------------------------------- */
.masthead {
    padding-top: var(--space-md);
    border-top: var(--border-width) solid rgba(255, 255, 255, 0.18);
}

.masthead__title {
    margin-bottom: var(--space-2xs);
    font-family: var(--font-mono);
    font-size: var(--fs-2xs);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.58);
}

.masthead__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-lg);
}

.masthead__list a {
    display: flex;
    align-items: baseline;
    gap: 0.625rem;
    padding-block: 0.5rem;
    border-bottom: var(--border-width) solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.84);
    font-size: var(--fs-sm);
    text-decoration: none;
    transition: color var(--dur-base) var(--ease-standard);
}

.masthead__list a:hover {
    color: var(--color-white);
}

.masthead__index {
    font-family: var(--font-mono);
    font-size: var(--fs-2xs);
    color: var(--color-text-subtle);
}

.topics {
    display: grid;
    border-top: var(--border-width) solid var(--color-line);
}

.topics__item {
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr);
    gap: var(--space-2xs) var(--space-sm);
    padding-block: var(--space-lg);
    border-bottom: var(--border-width) solid var(--color-line);
    scroll-margin-top: calc(var(--header-height) + var(--space-md));
}

.topics__index {
    grid-row: 1 / span 2;
    padding-top: 0.45em;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: var(--ls-wide);
    color: var(--color-text-subtle);
}

.topics__title {
    font-size: clamp(1.375rem, 1.05rem + 1vw, 2rem);
    font-weight: var(--fw-medium);
    line-height: 1.16;
}

.topics__text {
    max-width: 28rem;
    color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   Anatomia de um artigo (Insights · Publicações): folha desenhada com as
   zonas do futuro artigo, numeradas como a legenda (a legenda é o
   conteúdo acessível; a folha é decorativa)
   -------------------------------------------------------------------------- */
.anatomy {
    display: grid;
    gap: var(--space-2xl);
    align-items: start;
}

.anatomy__legend {
    display: grid;
    width: 100%;
    margin-top: var(--space-sm);
    border-top: var(--border-width) solid var(--color-line);
}

.anatomy__legend li {
    display: flex;
    align-items: baseline;
    gap: 0.875rem;
    padding-block: 0.625rem;
    border-bottom: var(--border-width) solid var(--color-line);
    font-size: var(--fs-sm);
}

.anatomy__index {
    min-width: 1.5rem;
    font-family: var(--font-mono);
    font-size: var(--fs-2xs);
    color: var(--color-text-subtle);
}

.anatomy__sheet {
    --_ink: rgba(255, 255, 255, 0.16);

    position: relative;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.875rem;
    width: 100%;
    max-width: 34rem;
    justify-self: center;
    padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
    border: var(--border-width) solid var(--color-line-strong);
    background-color: var(--color-bg-deep);
}

/* Marcas de registro da folha (mesmo gesto das figuras) */
.anatomy__sheet::before {
    content: "";
    position: absolute;
    inset: -0.5rem;
    background:
        linear-gradient(var(--color-line-strong), var(--color-line-strong)) left top / 0.875rem 1px,
        linear-gradient(var(--color-line-strong), var(--color-line-strong)) left top / 1px 0.875rem,
        linear-gradient(var(--color-line-strong), var(--color-line-strong)) right bottom / 0.875rem 1px,
        linear-gradient(var(--color-line-strong), var(--color-line-strong)) right bottom / 1px 0.875rem;
    background-repeat: no-repeat;
    pointer-events: none;
}

.anatomy__zone {
    position: relative;
    grid-column: 1 / -1;
    min-height: 0.5rem;
    background: repeating-linear-gradient(180deg, var(--_ink) 0 0.375rem, transparent 0.375rem 0.875rem);
}

.anatomy__zone--tag { grid-column: 1 / 3; min-height: 0.375rem; background: var(--color-accent); }
.anatomy__zone--title { min-height: 2.125rem; background: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0 0.75rem, transparent 0.75rem 1.125rem); margin-right: 18%; }
.anatomy__zone--summary { min-height: 1.625rem; margin-right: 8%; }
.anatomy__zone--meta { grid-column: 1 / 5; min-height: 0.375rem; background: repeating-linear-gradient(90deg, var(--_ink) 0 22%, transparent 22% 26%); }
.anatomy__zone--image { aspect-ratio: 16 / 9; background: linear-gradient(118deg, #151515, #1f1f1f); border: var(--border-width) solid var(--color-line); }
.anatomy__zone--body { min-height: 5.125rem; }
.anatomy__zone--table { grid-column: 1 / 4; aspect-ratio: 4 / 3; background:
    linear-gradient(var(--color-line-strong), var(--color-line-strong)) 0 0 / 100% 1px no-repeat,
    repeating-linear-gradient(180deg, var(--color-line) 0 1px, transparent 1px 25%),
    repeating-linear-gradient(90deg, var(--color-line) 0 1px, transparent 1px 33.333%);
    border: var(--border-width) solid var(--color-line); }
.anatomy__zone--diagram { grid-column: 4 / -1; aspect-ratio: 4 / 3; display: grid; place-items: center; background:
    linear-gradient(var(--color-line-strong), var(--color-line-strong)) 50% 50% / 80% 1px no-repeat,
    linear-gradient(var(--color-line-strong), var(--color-line-strong)) 50% 50% / 1px 60% no-repeat;
    border: var(--border-width) solid var(--color-line); }
.anatomy__zone--refs { min-height: 1.625rem; margin-right: 30%; background: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0 0.25rem, transparent 0.25rem 0.625rem); }

/* Número de cada zona, na margem esquerda da folha */
.anatomy__mark {
    position: absolute;
    top: -0.1rem;
    left: calc(clamp(1.5rem, 1rem + 2vw, 2.5rem) * -1 - 0.1rem);
    translate: -50% 0;
    font-family: var(--font-mono);
    font-size: 0.625rem;
    line-height: 1;
    color: var(--color-accent);
}

/* --------------------------------------------------------------------------
   Acompanhe (Insights): redes em linhas "rótulo · valor · seta" — mesmo
   componente dos canais de contato, também no tema claro
   -------------------------------------------------------------------------- */
.follow {
    display: grid;
    gap: var(--space-lg);
}

[data-theme="light"] .contact-link {
    color: var(--color-text);
}

[data-theme="light"] .contact-link:hover .contact-link__icon {
    color: var(--color-text);
}

/* --------------------------------------------------------------------------
   MODELOS FUTUROS (sem uso até haver conteúdo real)
   Grade de projetos (mosaico) e lista de artigos. Marcação de referência em
   docs/templates/componentes.html. Não publicar itens fictícios.
   -------------------------------------------------------------------------- */
.project-grid {
    display: grid;
    gap: var(--space-2xl) var(--space-lg);
}

.project-card {
    position: relative;
}

.project-card__link {
    display: grid;
    gap: var(--space-sm);
    color: inherit;
    text-decoration: none;
}

.project-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--space-md);
    margin-top: var(--space-2xs);
    font-family: var(--font-mono);
    font-size: var(--fs-2xs);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    color: var(--color-text-subtle);
}

.project-card__meta :first-child {
    color: var(--color-accent);
}

.project-card__title {
    font-size: var(--fs-lg);
    font-weight: var(--fw-medium);
    line-height: 1.2;
}

.project-card__text {
    color: var(--color-text-muted);
}

.article-list {
    border-top: var(--border-width) solid var(--color-line);
}

.article-card {
    position: relative;
    display: grid;
    gap: var(--space-2xs);
    padding-block: var(--space-lg);
    border-bottom: var(--border-width) solid var(--color-line);
}

.article-card__category {
    font-family: var(--font-mono);
    font-size: var(--fs-2xs);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    color: var(--color-accent);
}

.article-card__title {
    font-size: clamp(1.375rem, 1.05rem + 1vw, 2rem);
    font-weight: var(--fw-medium);
    line-height: 1.16;
}

.article-card__title a {
    color: inherit;
    text-decoration: none;
}

.article-card__title a::after {
    content: "";
    position: absolute;
    inset: 0;
}

.article-card__summary {
    max-width: 42rem;
    color: var(--color-text-muted);
}

.article-card__meta {
    font-size: var(--fs-xs);
    color: var(--color-text-subtle);
}

/* --------------------------------------------------------------------------
   Revelação ao rolar (ativa só com .has-reveal — reveal.js)
   -------------------------------------------------------------------------- */
.overview__item:nth-child(2) { --reveal-delay: 70ms; }
.overview__item:nth-child(3) { --reveal-delay: 140ms; }
.overview__item:nth-child(4) { --reveal-delay: 210ms; }

.has-reveal .overview__item:not(.is-revealed)::before {
    clip-path: inset(0 100% 0 0);
}

.phases__item:nth-child(2) { --reveal-delay: 90ms; }
.phases__item:nth-child(3) { --reveal-delay: 180ms; }
.phases__item:nth-child(4) { --reveal-delay: 270ms; }

.principles__item:nth-child(2),
.channels__item:nth-child(2),
.checklist__item:nth-child(2) { --reveal-delay: 90ms; }
.principles__item:nth-child(3),
.channels__item:nth-child(3),
.checklist__item:nth-child(3) { --reveal-delay: 180ms; }
.checklist__item:nth-child(4) { --reveal-delay: 270ms; }

.pillars__item:nth-child(2) { --reveal-delay: 70ms; }
.pillars__item:nth-child(3) { --reveal-delay: 140ms; }
.pillars__item:nth-child(4) { --reveal-delay: 210ms; }

.topics__item:nth-child(3n + 2) { --reveal-delay: 80ms; }
.topics__item:nth-child(3n + 3) { --reveal-delay: 160ms; }

/* ==========================================================================
   Breakpoints das páginas internas
   ========================================================================== */

/* ≥ 40em (640px) */
@media (min-width: 40em) {

    .internal-hero__actions {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        width: auto;
        max-width: none;
        gap: var(--space-sm);
    }

    .pillars {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: var(--space-xl);
    }
}

/* ≥ 48em (768px) */
@media (min-width: 48em) {

    .overview {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: var(--space-xl);
    }

    /* Fases: barramento horizontal, nós sobre a linha */
    .phases {
        grid-template-columns: repeat(var(--phases, 4), minmax(0, 1fr));
        gap: var(--space-lg);
        padding: 2.25rem 0 0;
    }

    .phases::before {
        top: 0;
        bottom: auto;
        left: 0;
        right: 0;
        width: auto;
        height: var(--border-width);
    }

    .phases__node {
        top: calc(-2.25rem + 0.5px);
        left: 0;
        translate: 0 -50%;
    }

    .bus-index__list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        column-gap: var(--space-lg);
    }

    .principles {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .channels {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Ficha técnica: campos "meio" lado a lado */
    .spec-sheet__cell--half {
        grid-column: auto;
    }

    .topics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: var(--space-xl);
    }

    .project-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ≥ 60em (960px) */
@media (min-width: 60em) {

    .internal-hero {
        --ih-min-height: clamp(34rem, 68vh, 52rem);

        padding-top: calc(var(--header-height) + var(--space-md));
    }

    .internal-hero--compacto {
        --ih-min-height: clamp(30rem, 56vh, 42rem);
    }

    .internal-hero__body--aside {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        column-gap: clamp(3rem, 0.5rem + 5vw, 8rem);
        align-items: end;
    }

    /* Mídia: "janela" à direita, que surge do fundo a partir da esquerda —
       o texto fica sempre sobre o fundo liso (fotografia ou desenho) */
    .internal-hero__media {
        left: 42%;
        -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 50%);
        mask-image: linear-gradient(90deg, transparent 0%, #000 50%);
    }

    .internal-hero__media::after {
        background:
            linear-gradient(180deg, rgba(10, 10, 10, 0.55) 0%, rgba(10, 10, 10, 0) 28%),
            linear-gradient(0deg, rgba(10, 10, 10, 0.8) 0%, rgba(10, 10, 10, 0) 45%);
    }

    .page-intro {
        grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
        column-gap: clamp(3rem, 0.5rem + 5vw, 8rem);
        align-items: start;
    }

    .page-intro > .eyebrow {
        margin-top: 0.6em;
    }

    .page-intro > .overview {
        grid-column: 1 / -1;
    }

    /* Bloco alternado: texto e figura lado a lado */
    .feature {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        column-gap: clamp(3rem, 0.5rem + 5vw, 8rem);
    }

    .feature--reverse {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    }

    .feature--reverse .feature__body {
        order: 2;
    }

    /* Índice em barramento: nós sobre a linha, rótulos abaixo */
    .bus-index__list {
        grid-template-columns: repeat(var(--bus-items, 5), minmax(0, 1fr));
        border-top-color: rgba(255, 255, 255, 0.34);
    }

    .bus-index__item a {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-sm);
        padding: 0 var(--space-md) 0 0;
        border-bottom: 0;
    }

    .bus-index__node {
        translate: 0 -50%;
    }

    /* Lema (Empresa): na coluna ao lado do título */
    .motto {
        padding-top: 0;
        padding-left: var(--space-lg);
        border-top: 0;
        border-left: var(--border-width) solid rgba(255, 255, 255, 0.18);
    }

    .pillars {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    /* Solicitação (Contato): título e ações à esquerda, roteiro à direita */
    .request {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        column-gap: clamp(3rem, 0.5rem + 5vw, 8rem);
        align-items: start;
    }

    .request__header {
        margin-bottom: 0;
    }

    /* Projetos — ficha: cabeçalho à esquerda, carimbo à direita (4 colunas) */
    .spec {
        grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
        column-gap: clamp(3rem, 0.5rem + 5vw, 8rem);
        align-items: start;
    }

    .spec__header {
        margin-bottom: 0;
    }

    .spec-sheet {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .spec-sheet__cell--half {
        grid-column: span 2;
    }

    /* Insights — temas em três colunas; anatomia com a legenda ao lado */
    .topics {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .anatomy {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        column-gap: clamp(3rem, 0.5rem + 5vw, 8rem);
    }

    .anatomy__header {
        margin-bottom: 0;
    }

    .follow {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        column-gap: clamp(3rem, 0.5rem + 5vw, 8rem);
        align-items: start;
    }

    .follow .section__header {
        margin-bottom: 0;
    }

    /* Modelo futuro: mosaico com o primeiro projeto em destaque */
    .project-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .project-card:first-child {
        grid-column: span 2;
    }
}

/* ≥ 75em (1200px) */
@media (min-width: 75em) {

    .overview {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .overview__item {
        grid-template-rows: auto auto 1fr auto;
    }

    .channels {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}