/* ==========================================================================
   NOESIS ENTERPRISES, LDA — style.css
   --------------------------------------------------------------------------
   BREAKPOINTS
   Este projecto usa DOIS conjuntos de breakpoints, deliberadamente:

   992px  → comutação da NAVEGAÇÃO (hamburger ↔ nav horizontal).
            Alinhado com o `lg` do Bootstrap para manter coerência com as
            utilities e o grid do framework usados noutros pontos do site.

   1024px → comutação do LAYOUT principal (grelhas, colunas, composição).
   1280px → refinamentos de composição em ecrãs largos.
            Ambos preservam o comportamento do protótipo de referência,
            que não coincide com a escala do Bootstrap.

   Não unificar estes valores sem rever o header e as grelhas em conjunto.
   --------------------------------------------------------------------------
   ÍNDICE
    1. DESIGN TOKENS
    2. RESET / BASE
    3. TYPOGRAPHY
    4. LAYOUT
    5. GLOBAL COMPONENTS
    6. HEADER / NAVIGATION
    7. BUTTONS
    8. HERO
    9. AREAS
   10. SECTIONS
   11. CARDS
   12. FOOTER
   13. MODALS
   14. ANIMATIONS
   15. RESPONSIVE
   16. ACCESSIBILITY / REDUCED MOTION
   ========================================================================== */


/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */
:root {

    /* --- Cor: neutros escuros ------------------------------------------- */
    --noesis-black:        #1D1F22;
    --noesis-ink:          #20262B;
    --noesis-graphite:     #262D34;
    --noesis-slate:        #323C45;
    --noesis-grey:         #687178;

    /* --- Cor: accent (cobre) -------------------------------------------- */
    --noesis-copper:       #B18467;
    --noesis-copper-dark:  #8B5D48;
    --noesis-copper-light: #D8B295;

    /* --- Cor: neutros claros -------------------------------------------- */
    --noesis-white:        #FFFFFF;
    --noesis-off-white:    #F5F4F1;
    --noesis-mist:         #ECEDEA;

    /* --- Cor: superfícies e traços derivados ---------------------------- */
    --surface-glass:       rgba(29, 31, 34, 0.85);
    --border-on-dark:      rgba(255, 255, 255, 0.15);
    --border-on-dark-soft: rgba(255, 255, 255, 0.07);
    --border-on-light:     rgba(29, 31, 34, 0.10);
    --text-on-dark:        rgba(255, 255, 255, 0.74);
    --text-on-dark-soft:   rgba(255, 255, 255, 0.55);

    /* --- Tipografia ------------------------------------------------------ */
    --font-heading: 'Manrope', system-ui, -apple-system, sans-serif;
    --font-body:    'Inter', system-ui, -apple-system, sans-serif;

    --tracking-tight: -0.035em;
    --tracking-title:  0.015em;
    --tracking-label:  0.28em;
    --tracking-cta:    0.14em;

    /* --- Espaçamento (escala oficial do design system) ------------------- */
    --space-4:    4px;
    --space-8:    8px;
    --space-12:  12px;
    --space-16:  16px;
    --space-24:  24px;
    --space-32:  32px;
    --space-48:  48px;
    --space-64:  64px;
    --space-80:  80px;
    --space-96:  96px;
    --space-120: 120px;

    /* --- Raio ------------------------------------------------------------ */
    --radius-card:  12px;
    --radius-image: 14px;
    --radius-input:  8px;
    --radius-btn:    6px;
    --radius-pill: 999px;

    /* --- Movimento ------------------------------------------------------- */
    --ease-reveal: cubic-bezier(0.22, 1, 0.36, 1);   /* saída expressiva */
    --ease-ui:     cubic-bezier(0.40, 0, 0.20, 1);   /* estados de UI */

    --dur-reveal: 600ms;
    --dur-ui:     300ms;
    --dur-slow:  1400ms;

    /* --- Layout ---------------------------------------------------------- */
    --container-max:          1280px;
    --header-height:            72px;
    --header-height-scrolled:   64px;
    --hero-grid-cell:           80px;
    --scrollbar-w:               0px;  /* medido em JS */

    /* --- Camadas --------------------------------------------------------- */
    --z-header: 1030;
    --z-menu:   1040;
    --z-modal:  1050;
}


/* ==========================================================================
   2. RESET / BASE
   ========================================================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    overscroll-behavior-y: none;
}

html {
    scroll-padding-top: calc(var(--header-height) + var(--space-24));
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.6;
    color: var(--noesis-black);
    background-color: var(--noesis-white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Bloqueio de scroll com compensação da barra, para evitar salto lateral */
body.has-menu-open {
    overflow: hidden;
    padding-right: var(--scrollbar-w);
}

body.has-menu-open .site-header {
    padding-right: var(--scrollbar-w);
}

img,
svg {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

a {
    color: inherit;
}

button {
    font: inherit;
    color: inherit;
}

::selection {
    background-color: var(--noesis-copper);
    color: var(--noesis-white);
}

/* Foco global — sobreposto por regras mais específicas quando necessário */
:focus-visible {
    outline: 2px solid var(--noesis-copper);
    outline-offset: 3px;
    border-radius: var(--radius-btn);
}


/* ==========================================================================
   3. TYPOGRAPHY
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--noesis-black);
}

p {
    margin-top: 0;
}

/* Etiqueta de secção — reutilizada em toda a navegação editorial do site */
.section-label {
    display: flex;
    align-items: center;
    gap: var(--space-16);
    margin-bottom: var(--space-24);
    font-family: var(--font-body);
    font-size: .7rem;
    font-weight: 500;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--noesis-copper-dark);
}

.section-label--on-dark {
    color: rgba(216, 178, 149, 0.85);
}

.section-rule {
    display: block;
    width: 48px;
    height: 1px;
    flex-shrink: 0;
    background: linear-gradient(to right, var(--noesis-copper-dark), var(--noesis-copper-light));
}

/* Título de secção */
.section-title {
    margin-bottom: var(--space-24);
    font-size: clamp(1.9rem, 4.2vw, 3.35rem);
    line-height: 1.1;
    letter-spacing: -0.03em;
}

.section-title-soft {
    color: var(--noesis-grey);
}

/* Texto de apoio */
.section-lead {
    max-width: 58ch;
    margin-bottom: 0;
    font-size: clamp(.98rem, 1.3vw, 1.115rem);
    font-weight: 300;
    line-height: 1.75;
    color: var(--noesis-slate);
}


/* ==========================================================================
   4. LAYOUT
   ========================================================================== */
.container {
    --bs-gutter-x: 2.5rem;
    max-width: var(--container-max);
}

/* Ritmo vertical padrão das secções */
.section {
    padding-block: clamp(var(--space-80), 12vw, var(--space-120));
}

.section--light {
    background-color: var(--noesis-off-white);
    color: var(--noesis-black);
}

.section--dark {
    background-color: var(--noesis-black);
    color: var(--noesis-white);
}

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

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

.section--mist {
    background-color: var(--noesis-mist);
    color: var(--noesis-black);
}

/* Cabeçalho de introdução de secção */
.section-intro {
    max-width: 760px;
    margin-bottom: clamp(var(--space-48), 8vw, var(--space-96));
}

.section--slate {
    background-color: var(--noesis-slate);
    color: var(--noesis-white);
}

.section--slate .section-title {
    color: var(--noesis-white);
}

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


/* ==========================================================================
   5. GLOBAL COMPONENTS
   ========================================================================== */

/* --- Skip link ---------------------------------------------------------- */
.skip-link {
    position: absolute;
    top: var(--space-8);
    left: var(--space-8);
    z-index: calc(var(--z-modal) + 1);
    padding: var(--space-12) var(--space-24);
    border-radius: var(--radius-btn);
    background-color: var(--noesis-copper);
    color: var(--noesis-white);
    font-family: var(--font-body);
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none;
    transform: translateY(-200%);
    transition: transform var(--dur-ui) var(--ease-ui);
}

.skip-link:focus-visible {
    transform: translateY(0);
    outline-offset: 4px;
}

/* --- Logótipo NOESIS ----------------------------------------------------- */
.ne-logo {
    display: inline-flex;
    align-items: center;
    gap: var(--space-12);
    text-decoration: none;
}

.ne-logo svg {
    flex-shrink: 0;
}

.ne-wordmark {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.ne-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.14em;
    color: var(--noesis-copper-light);
}

.ne-sub {
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 8px;
    letter-spacing: 0.34em;
    color: rgba(177, 132, 103, 0.75);
    margin-top: 5px;
}

/* --- Formulário NOESIS ---------------------------------------------------
   Usado na página de Contactos e, futuramente, no modal "Fale Connosco".
------------------------------------------------------------------------- */
.form-noesis {
    display: grid;
    gap: var(--space-24);
}

.form-row {
    display: grid;
    gap: var(--space-24);
}

.form-field {
    display: flex;
    flex-direction: column;
}

.form-label {
    margin-bottom: var(--space-8);
    font-family: var(--font-body);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--noesis-slate);
}

.form-label .is-optional {
    font-weight: 400;
    letter-spacing: 0.06em;
    text-transform: none;
    color: var(--noesis-grey);
}

.form-control-noesis {
    width: 100%;
    padding: var(--space-12) var(--space-16);
    border: 1px solid var(--border-on-light);
    border-radius: var(--radius-input);
    background-color: var(--noesis-white);
    font-family: var(--font-body);
    font-size: .95rem;
    line-height: 1.6;
    color: var(--noesis-black);
    transition: border-color var(--dur-ui) var(--ease-ui),
                box-shadow var(--dur-ui) var(--ease-ui);
}

.form-control-noesis::placeholder {
    color: var(--noesis-grey);
}

.form-control-noesis:hover {
    border-color: rgba(29, 31, 34, 0.22);
}

.form-control-noesis:focus {
    outline: none;
    border-color: var(--noesis-copper);
    box-shadow: 0 0 0 3px rgba(177, 132, 103, 0.16);
}

textarea.form-control-noesis {
    min-height: 150px;
    resize: vertical;
}

/* --- Grupo de opções (área de interesse) --------------------------------- */
.form-fieldset {
    margin: 0;
    padding: 0;
    border: 0;
}

.form-legend {
    float: left;           /* corrige a largura do legend em Safari */
    width: 100%;
    margin-bottom: var(--space-12);
    padding: 0;
    font-family: var(--font-body);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--noesis-slate);
}

.form-options {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-12);
    clear: both;
}

.form-option input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.form-option span {
    display: inline-block;
    padding: var(--space-8) var(--space-16);
    border: 1px solid var(--border-on-light);
    border-radius: var(--radius-pill);
    font-size: .875rem;
    color: var(--noesis-slate);
    cursor: pointer;
    transition: border-color var(--dur-ui) var(--ease-ui),
                background-color var(--dur-ui) var(--ease-ui),
                color var(--dur-ui) var(--ease-ui);
}

.form-option:hover span {
    border-color: var(--noesis-copper);
}

.form-option input:checked + span {
    border-color: var(--noesis-copper);
    background-color: var(--noesis-copper);
    color: var(--noesis-white);
}

.form-option input:focus-visible + span {
    outline: 2px solid var(--noesis-copper);
    outline-offset: 3px;
}

/* --- Erros ---------------------------------------------------------------- */
.form-control-noesis[aria-invalid="true"] {
    border-color: #B4472F;
}

.form-error {
    margin-top: var(--space-8);
    font-size: .82rem;
    color: #B4472F;
}

.form-error:empty {
    display: none;
}

/* --- Aviso de demonstração ------------------------------------------------ */
.form-notice {
    display: flex;
    align-items: flex-start;
    gap: var(--space-12);
    padding: var(--space-16);
    border: 1px solid rgba(177, 132, 103, 0.35);
    border-radius: var(--radius-input);
    background-color: rgba(177, 132, 103, 0.07);
    font-size: .85rem;
    line-height: 1.6;
    color: var(--noesis-slate);
}

.form-notice::before {
    content: "";
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    margin-top: .5rem;
    border-radius: 50%;
    background-color: var(--noesis-copper);
}
/* --- Estado de envio ------------------------------------------------------ */
.form-status {
    margin: 0;
    font-size: .9rem;
    line-height: 1.6;
    color: var(--noesis-slate);
}

.form-status:empty {
    display: none;
}

.form-status.is-error {
    color: #B4472F;
}

.btn-noesis:disabled {
    opacity: .6;
    cursor: not-allowed;
}

/* --- Estado de sucesso ------------------------------------- */
.form-success {
    display: none;
    padding: var(--space-48) var(--space-32);
    border: 1px solid var(--border-on-light);
    border-radius: var(--radius-card);
    background-color: var(--noesis-white);
    text-align: center;
}

.form-success.is-visible {
    display: block;
}

.form-success-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: var(--space-24);
    border-radius: 50%;
    border: 1px solid var(--noesis-copper);
    color: var(--noesis-copper);
    font-size: 1.4rem;
}

.form-success h3 {
    margin-bottom: var(--space-12);
    font-size: 1.25rem;
}

.form-success p {
    max-width: 46ch;
    margin: 0 auto var(--space-32);
    font-size: .95rem;
    color: var(--noesis-slate);
}


/* ==========================================================================
   6. HEADER / NAVIGATION
   ========================================================================== */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: var(--z-header);
    background-color: transparent;
    border-bottom: 1px solid transparent;
    transition: background-color .35s var(--ease-ui),
                border-color .35s var(--ease-ui);
}

.site-header.is-scrolled {
    background-color: var(--surface-glass);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom-color: var(--border-on-dark-soft);
}

.site-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: var(--header-height);
    padding-block: var(--space-16);
    transition: min-height .35s var(--ease-ui),
                padding-block .35s var(--ease-ui);
}

.site-header.is-scrolled .site-header-inner {
    min-height: var(--header-height-scrolled);
    padding-block: var(--space-12);
}

/* --- Navegação desktop (≥992px) ----------------------------------------- */
.nav-desktop {
    display: none;
}

.nav-list {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    margin: 0;
    padding: 0;
    list-style: none;
}

.nav-link {
    position: relative;
    display: inline-block;
    padding: var(--space-8) var(--space-12);
    font-family: var(--font-body);
    font-size: .875rem;
    font-weight: 500;
    letter-spacing: .01em;
    text-decoration: none;
    color: var(--text-on-dark);
    transition: color var(--dur-ui) var(--ease-ui);
}

.nav-link:hover,
.nav-link:focus-visible {
    color: var(--noesis-copper);
}

.nav-link::after {
    content: "";
    position: absolute;
    left: var(--space-12);
    right: var(--space-12);
    bottom: 2px;
    height: 1px;
    background-color: var(--noesis-copper);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--dur-ui) var(--ease-ui);
}

.nav-link:hover::after,
.nav-link:focus-visible::after,
.nav-link[aria-current="page"]::after {
    transform: scaleX(1);
}

.nav-link[aria-current="page"] {
    color: var(--noesis-white);
}

/* --- Botão hamburger (<992px) ------------------------------------------- */
.nav-toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0 10px;
    border: 0;
    border-radius: var(--radius-btn);
    background: transparent;
    cursor: pointer;
}

.nav-toggle span {
    display: block;
    height: 1.5px;
    width: 100%;
    border-radius: 2px;
    background-color: var(--noesis-white);
    transition: transform var(--dur-ui) var(--ease-ui),
                opacity var(--dur-ui) var(--ease-ui);
}

.nav-toggle span:nth-child(2) {
    width: 70%;
    margin-left: auto;
}

.nav-toggle:hover span {
    background-color: var(--noesis-copper-light);
}

/* --- Menu fullscreen mobile --------------------------------------------- */
.nav-mobile {
    position: fixed;
    inset: 0;
    z-index: var(--z-menu);
    display: flex;
    flex-direction: column;
    background-color: var(--noesis-black);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity var(--dur-ui) var(--ease-ui),
                transform var(--dur-ui) var(--ease-ui),
                visibility 0s linear var(--dur-ui);
}

.nav-mobile.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity var(--dur-ui) var(--ease-ui),
                transform var(--dur-ui) var(--ease-ui),
                visibility 0s;
}

.nav-mobile-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: var(--header-height);
    padding: var(--space-16) 0;
    border-bottom: 1px solid var(--border-on-dark-soft);
}

.nav-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: var(--radius-btn);
    background: transparent;
    color: var(--noesis-white);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    transition: color var(--dur-ui) var(--ease-ui);
}

.nav-close:hover {
    color: var(--noesis-copper);
}

.nav-mobile-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-block: var(--space-32);
    overflow-y: auto;
}

.nav-mobile-list {
    margin: 0 0 var(--space-48);
    padding: 0;
    list-style: none;
}

.nav-mobile-list li + li {
    border-top: 1px solid var(--border-on-dark-soft);
}

.nav-mobile-link {
    display: block;
    padding: var(--space-16) 0;
    font-family: var(--font-heading);
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-decoration: none;
    color: var(--noesis-white);
    transition: color var(--dur-ui) var(--ease-ui),
                padding-left var(--dur-ui) var(--ease-ui);
}

.nav-mobile-link:hover,
.nav-mobile-link:focus-visible {
    color: var(--noesis-copper-light);
    padding-left: var(--space-8);
}

.nav-mobile .btn-noesis {
    width: 100%;
    justify-content: space-between;
}


/* ==========================================================================
   7. BUTTONS
   ========================================================================== */
.btn-noesis {
    display: inline-flex;
    align-items: center;
    gap: var(--space-12);
    padding: var(--space-8) var(--space-24);
    border: 1px solid var(--noesis-copper);
    border-radius: var(--radius-btn);
    background-color: var(--noesis-copper);
    color: var(--noesis-white);
    font-family: var(--font-body);
    font-size: .875rem;
    font-weight: 600;
    letter-spacing: .02em;
    line-height: 1.5;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--dur-ui) var(--ease-ui),
                border-color var(--dur-ui) var(--ease-ui);
}

.btn-noesis:hover,
.btn-noesis:focus-visible {
    background-color: var(--noesis-copper-dark);
    border-color: var(--noesis-copper-dark);
    color: var(--noesis-white);
}

.btn-noesis--ghost {
    background-color: transparent;
    border-color: var(--border-on-dark);
    color: var(--noesis-white);
}

.btn-noesis--ghost:hover,
.btn-noesis--ghost:focus-visible {
    background-color: transparent;
    border-color: var(--noesis-copper);
    color: var(--noesis-copper-light);
}

/* Seta com deslocação subtil — partilhada por botões e links de acção */
.btn-arrow {
    display: inline-block;
    line-height: 1;
    transition: transform var(--dur-ui) var(--ease-ui);
}

.btn-noesis:hover .btn-arrow,
.btn-noesis:focus-visible .btn-arrow {
    transform: translateX(4px);
}

/* Link de acção sem caixa */
.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-12);
    font-family: var(--font-body);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: var(--tracking-cta);
    text-transform: uppercase;
    text-decoration: none;
    color: var(--noesis-copper-dark);
    transition: color var(--dur-ui) var(--ease-ui);
}

.link-arrow:hover,
.link-arrow:focus-visible {
    color: var(--noesis-copper);
}

.link-arrow:hover .btn-arrow,
.link-arrow:focus-visible .btn-arrow {
    transform: translateX(6px);
}


/* ==========================================================================
   8. HERO
   ========================================================================== */
.hero {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100svh;
    overflow: hidden;
    background-color: var(--noesis-black);
    background-image: linear-gradient(
        170deg,
        var(--noesis-black) 0%,
        var(--noesis-black) 45%,
        var(--noesis-ink) 100%
    );
    color: var(--noesis-white);
}

.hero-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* Grelha técnica 80×80 */
.hero-grid {
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(
            to right,
            rgba(255, 255, 255, 0.028) 0 1px,
            transparent 1px var(--hero-grid-cell)
        ),
        repeating-linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0.028) 0 1px,
            transparent 1px var(--hero-grid-cell)
        );
    -webkit-mask-image: radial-gradient(ellipse 70% 65% at 50% 45%, #000 20%, transparent 78%);
    mask-image: radial-gradient(ellipse 70% 65% at 50% 45%, #000 20%, transparent 78%);
}

.hero-glow {
    position: absolute;
    top: -18%;
    right: -12%;
    width: 62vw;
    height: 62vw;
    max-width: 900px;
    max-height: 900px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(177, 132, 103, 0.17) 0%,
        rgba(139, 93, 72, 0.07) 42%,
        transparent 68%
    );
    filter: blur(20px);
}

.hero-inner {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: calc(var(--header-height) + var(--space-48));
    padding-bottom: var(--space-32);
}

.hero-foot {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    padding-bottom: var(--space-48);
}

.hero-eyebrow {
    display: flex;
    align-items: center;
    gap: var(--space-16);
    margin-bottom: var(--space-32);
    font-family: var(--font-body);
    font-size: .7rem;
    font-weight: 500;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: rgba(216, 178, 149, 0.85);
}

.hero-title {
    max-width: 16ch;
    margin-bottom: var(--space-32);
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: clamp(2.6rem, 7.2vw, 6.25rem);
    line-height: 0.96;
    letter-spacing: var(--tracking-tight);
    text-transform: uppercase;
    color: var(--noesis-white);
}

.hero-accent {
    color: var(--noesis-copper-light); /* fallback */
    background-image: linear-gradient(
        120deg,
        var(--noesis-copper-dark) 0%,
        var(--noesis-copper) 45%,
        var(--noesis-copper-light) 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-lead {
    max-width: 42ch;
    margin-bottom: 0;
    font-size: clamp(1rem, 1.5vw, 1.25rem);
    font-weight: 300;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.6);
}

.hero-scroll {
    display: inline-flex;
    align-items: center;
    gap: var(--space-16);
    padding-block: var(--space-8);
    font-family: var(--font-body);
    font-size: .7rem;
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--text-on-dark-soft);
    transition: color var(--dur-ui) var(--ease-ui);
}

.hero-scroll:hover,
.hero-scroll:focus-visible {
    color: var(--noesis-copper);
}

.hero-scroll-label {
    position: relative;
}

.hero-scroll-label::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -6px;
    height: 1px;
    background-color: var(--noesis-copper);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .35s var(--ease-ui);
}

.hero-scroll:hover .hero-scroll-label::after,
.hero-scroll:focus-visible .hero-scroll-label::after {
    transform: scaleX(1);
}

.hero-scroll-arrow {
    display: inline-block;
    font-size: .95rem;
    line-height: 1;
    animation: heroArrow 2.4s var(--ease-ui) infinite;
}

.hero-scroll:focus-visible {
    outline-offset: 6px;
}


/* ==========================================================================
   9. AREAS
   ========================================================================== */
.areas {
    position: relative;
    overflow: hidden;
}

.areas-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-24);
}

.area-panel {
    --panel-pad: clamp(var(--space-32), 4vw, var(--space-48));

    position: relative;
    display: flex;
    flex-direction: column;
    isolation: isolate;
    overflow: hidden;
    border-radius: var(--radius-card);
    padding: var(--panel-pad);
    min-height: clamp(460px, 62vh, 560px);
    background-color: var(--noesis-black);
    color: var(--noesis-white);
    text-decoration: none;
}

.area-panel:focus-visible {
    outline: 2px solid var(--noesis-copper-light);
    outline-offset: 4px;
}

.area-panel > *:not(.area-media) {
    position: relative;
    z-index: 1;
}

/* Imagem de fundo + overlay */
.area-media {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    background-color: var(--noesis-graphite);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transform: scale(1);
    transition: transform var(--dur-slow) var(--ease-ui);
}

.area-panel--tech .area-media {
    background-image: url("../images/technology.png");
}

.area-panel--trade .area-media {
    background-image: url("../images/trade.jpg");
}

.area-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(
        180deg,
        rgba(29, 31, 34, 0.52) 0%,
        rgba(29, 31, 34, 0.68) 42%,
        rgba(29, 31, 34, 0.88) 100%
    );
    transition: opacity .8s var(--ease-ui);
}

.area-panel:hover .area-media,
.area-panel:focus-visible .area-media {
    transform: scale(1.055);
}

.area-panel:hover .area-media::after,
.area-panel:focus-visible .area-media::after {
    opacity: .88;
}

/* Linha de acento superior */
.area-panel::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 2px;
    background: linear-gradient(to right, var(--noesis-copper), var(--noesis-copper-light));
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .7s var(--ease-reveal);
}

.area-panel:hover::before,
.area-panel:focus-visible::before {
    transform: scaleX(1);
}

/* Numeração */
.area-number {
    display: block;
    margin-bottom: var(--space-24);
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: clamp(2.5rem, 5vw, 3.75rem);
    line-height: 1;
    letter-spacing: -0.04em;
    color: rgba(255, 255, 255, 0.22);
    transition: color .6s var(--ease-ui);
}

.area-panel:hover .area-number,
.area-panel:focus-visible .area-number {
    color: rgba(216, 178, 149, 0.75);
}

/* Título */
.area-title {
    display: block;
    margin-bottom: var(--space-16);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: clamp(1.45rem, 2.5vw, 2.05rem);
    line-height: 1.15;
    letter-spacing: var(--tracking-title);
    text-transform: uppercase;
    color: var(--noesis-white);
}

/* Descrição */
.area-desc {
    display: block;
    max-width: 42ch;
    margin-bottom: var(--space-32);
    font-size: clamp(.94rem, 1.1vw, 1.02rem);
    font-weight: 300;
    line-height: 1.7;
    color: var(--text-on-dark);
}

/* Serviços */
.area-services {
    display: block;
    margin: 0 0 var(--space-32);
    border-top: 1px solid var(--border-on-dark);
}

.area-services span {
    position: relative;
    display: block;
    padding: var(--space-12) 0 var(--space-12) var(--space-24);
    border-bottom: 1px solid var(--border-on-dark);
    font-size: .9rem;
    color: rgba(255, 255, 255, 0.88);
}

.area-services span::before {
    content: "";
    position: absolute;
    top: 1.2rem;
    left: 0;
    width: 7px;
    height: 1px;
    background-color: var(--noesis-copper);
    transition: width .45s var(--ease-ui);
}

.area-panel:hover .area-services span::before,
.area-panel:focus-visible .area-services span::before {
    width: 15px;
}

/* CTA — texto dentro do link, não um link próprio */
.area-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-12);
    margin-top: auto;
    align-self: flex-start;
    padding-block: var(--space-4);
    font-family: var(--font-body);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: var(--tracking-cta);
    text-transform: uppercase;
    color: var(--noesis-copper-light);
    transition: color var(--dur-ui) var(--ease-ui);
}

.area-panel:hover .area-cta,
.area-panel:focus-visible .area-cta {
    color: var(--noesis-white);
}

.area-panel:hover .btn-arrow,
.area-panel:focus-visible .btn-arrow {
    transform: translateX(6px);
}


/* ==========================================================================
   10. SECTIONS
   ========================================================================== */

/* --- Cabeçalho de página interna -----------------------------------------
   Padrão partilhado por todas as páginas de pages/. Fundo escuro obrigatório:
   o header do site é transparente no topo e o seu texto é branco.
------------------------------------------------------------------------- */
.page-header {
    position: relative;
    overflow: hidden;
    padding-top: calc(var(--header-height) + clamp(var(--space-64), 9vw, var(--space-120)));
    padding-bottom: clamp(var(--space-48), 7vw, var(--space-96));
    background-color: var(--noesis-black);
    background-image: linear-gradient(
        170deg,
        var(--noesis-black) 0%,
        var(--noesis-black) 55%,
        var(--noesis-ink) 100%
    );
    color: var(--noesis-white);
}

.page-header-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        repeating-linear-gradient(to right,
            rgba(255,255,255,0.028) 0 1px, transparent 1px var(--hero-grid-cell)),
        repeating-linear-gradient(to bottom,
            rgba(255,255,255,0.028) 0 1px, transparent 1px var(--hero-grid-cell));
    -webkit-mask-image: radial-gradient(ellipse 80% 90% at 30% 40%, #000 10%, transparent 75%);
    mask-image: radial-gradient(ellipse 80% 90% at 30% 40%, #000 10%, transparent 75%);
}

.page-header .container {
    position: relative;
    z-index: 1;
}

.page-header-inner {
    max-width: 800px;
}

.page-title {
    margin-bottom: var(--space-24);
    font-size: clamp(2.15rem, 5.5vw, 4rem);
    line-height: 1.05;
    letter-spacing: var(--tracking-tight);
    color: var(--noesis-white);
}

.page-lead {
    max-width: 52ch;
    margin-bottom: 0;
    font-size: clamp(1rem, 1.4vw, 1.15rem);
    font-weight: 300;
    line-height: 1.7;
    color: var(--text-on-dark);
}

/* --- Contactos ------------------------------------------------------------ */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(var(--space-48), 6vw, var(--space-64));
}

.contact-aside-title {
    margin-bottom: var(--space-16);
    font-size: 1.35rem;
}

.contact-aside-text {
    max-width: 42ch;
    margin-bottom: var(--space-32);
    font-size: .95rem;
    font-weight: 300;
    line-height: 1.75;
    color: var(--noesis-slate);
}

.contact-details {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--border-on-light);
}

.contact-details li {
    padding-block: var(--space-16);
    border-bottom: 1px solid var(--border-on-light);
}

.contact-details-label {
    display: block;
    margin-bottom: var(--space-4);
    font-family: var(--font-body);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--noesis-copper-dark);
}

.contact-details-value {
    font-size: .95rem;
    color: var(--noesis-black);
}

.contact-details-value--pending {
    display: inline-flex;
    align-items: center;
    gap: var(--space-8);
    font-size: .92rem;
    font-style: italic;
    color: var(--noesis-grey);
}

.contact-details-value--pending::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: var(--noesis-copper);
    flex-shrink: 0;
}

.contact-form-wrap {
    padding: clamp(var(--space-24), 4vw, var(--space-48));
    border: 1px solid var(--border-on-light);
    border-radius: var(--radius-card);
    background-color: var(--noesis-white);
}

/* --- Diagrama: uma operação ----------------------------------------------
   Fornecedor → NOESIS → etapas → Cliente. CSS puro, sem SVG.
------------------------------------------------------------------------- */
.operation-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(var(--space-48), 6vw, var(--space-64));
    align-items: center;
}

/* Barra Complexidade → Simplicidade */
.complexity-bar {
    display: flex;
    align-items: center;
    gap: var(--space-16);
    margin-top: var(--space-48);
    font-family: var(--font-body);
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.complexity-bar-from {
    color: var(--noesis-grey);
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}

.complexity-bar-mark {
    position: relative;
    padding: var(--space-4) var(--space-12);
    border-radius: var(--radius-btn);
    background-color: var(--noesis-copper);
    color: var(--noesis-white);
    font-size: .68rem;
    letter-spacing: 0.12em;
}

/* Traços verticais acima e abaixo do marcador */
.complexity-bar-mark::before,
.complexity-bar-mark::after {
    content: "";
    position: absolute;
    left: 50%;
    width: 1px;
    height: 26px;
    background-color: var(--noesis-copper-dark);
    opacity: .55;
}

.complexity-bar-mark::before { bottom: 100%; margin-bottom: var(--space-8); }
.complexity-bar-mark::after  { top: 100%;    margin-top: var(--space-8); }

.complexity-bar-to {
    color: var(--noesis-black);
    font-weight: 600;
}

/* Diagrama */
.flow {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: clamp(var(--space-32), 4vw, var(--space-48)) var(--space-24);
    border: 1px solid var(--border-on-light);
    border-radius: var(--radius-card);
    background-color: var(--noesis-white);
}

.flow-node {
    padding: var(--space-12) var(--space-32);
    border: 1px solid var(--border-on-light);
    border-radius: var(--radius-btn);
    background-color: var(--noesis-off-white);
    font-family: var(--font-body);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--noesis-slate);
    text-align: center;
}

/* Nó central NOESIS */
.flow-node--core {
    position: relative;
    border-color: var(--noesis-black);
    background-color: var(--noesis-black);
    color: var(--noesis-white);
}

/* Ponto pulsante */
.flow-node--core::after {
    content: "";
    position: absolute;
    top: -4px;
    right: -4px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--noesis-copper);
    animation: flowPulse 2.6s var(--ease-ui) infinite;
}

/* Nó de destino */
.flow-node--target {
    border-color: var(--noesis-copper);
    background-color: var(--noesis-white);
    color: var(--noesis-copper-dark);
}

/* Conector vertical pontilhado */
.flow-link {
    display: block;
    width: 1px;
    height: 28px;
    background-color: var(--noesis-grey);
    opacity: .5;
    -webkit-mask-image: repeating-linear-gradient(to bottom, #000 0 3px, transparent 3px 7px);
    mask-image: repeating-linear-gradient(to bottom, #000 0 3px, transparent 3px 7px);
}

/* Linha de etapas intermédias */
.flow-steps {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-12);
    width: 100%;
}

.flow-step {
    padding: var(--space-12) var(--space-8);
    border: 1px solid var(--border-on-light);
    border-radius: var(--radius-btn);
    background-color: var(--noesis-white);
    font-size: .82rem;
    color: var(--noesis-slate);
    text-align: center;
}

.flow-note {
    margin: var(--space-32) 0 0;
    font-size: .85rem;
    font-style: italic;
    color: var(--noesis-grey);
    text-align: center;
}


/* --- Processo em etapas (fundo escuro) -----------------------------------
   Numeração grande, separador horizontal entre colunas.
------------------------------------------------------------------------- */
.process-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-32);
}

.process-step {
    position: relative;
}

.process-step-number {
    display: block;
    margin-bottom: var(--space-16);
    font-family: var(--font-heading);
    font-weight: 300;
    font-size: clamp(2.25rem, 4vw, 3rem);
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--noesis-copper);
}

.process-step-title {
    margin-bottom: var(--space-8);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--noesis-white);
}

.process-step-text {
    margin-bottom: 0;
    font-size: .9rem;
    font-weight: 300;
    line-height: 1.65;
    color: var(--text-on-dark);
}


/* --- Corredor origem → destino -------------------------------------------
   Duas colunas contrastantes ligadas por um traço pontilhado.
------------------------------------------------------------------------- */
.corridor-label {
    display: block;
    margin-bottom: var(--space-24);
    font-family: var(--font-body);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--noesis-copper-dark);
}

.corridor {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-32);
}

.corridor-panel {
    padding: clamp(var(--space-24), 3vw, var(--space-32));
    border: 1px solid var(--border-on-light);
    border-radius: var(--radius-card);
    background-color: var(--noesis-white);
}

.corridor-panel--destination {
    border-color: transparent;
    background-color: var(--noesis-black);
}

.corridor-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-16);
    margin-bottom: var(--space-24);
}

.corridor-place {
    display: flex;
    align-items: center;
    gap: var(--space-12);
    margin: 0;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--noesis-black);
}

.corridor-panel--destination .corridor-place {
    color: var(--noesis-white);
}

.corridor-place::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--noesis-copper);
    flex-shrink: 0;
}

.corridor-role {
    font-family: var(--font-body);
    font-size: .66rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--noesis-grey);
    white-space: nowrap;
}

.corridor-panel--destination .corridor-role {
    color: var(--text-on-dark-soft);
}

.corridor-list {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: corridor;
}

.corridor-list li {
    display: flex;
    align-items: baseline;
    gap: var(--space-16);
    padding-block: var(--space-8);
    counter-increment: corridor;
    font-size: .95rem;
    color: var(--noesis-slate);
}

.corridor-panel--destination .corridor-list li {
    color: rgba(255, 255, 255, 0.88);
}

.corridor-list li::before {
    content: "0" counter(corridor);
    flex-shrink: 0;
    font-family: var(--font-body);
    font-size: .78rem;
    font-weight: 500;
    color: var(--noesis-copper);
}

/* Ligação pontilhada entre os dois painéis (desktop) */
.corridor-bridge {
    display: none;
}

.corridor-note {
    margin: var(--space-32) 0 0;
    font-size: .85rem;
    font-style: italic;
    color: var(--noesis-grey);
    text-align: center;
}

/* --- Sobre Nós: prosa institucional -------------------------------------- */
.about-prose {
    max-width: 68ch;
}

.about-prose p {
    margin-bottom: var(--space-24);
    font-size: clamp(1rem, 1.25vw, 1.1rem);
    font-weight: 300;
    line-height: 1.8;
    color: var(--noesis-slate);
}

.about-prose p:last-child {
    margin-bottom: 0;
}

.about-prose strong {
    font-weight: 600;
    color: var(--noesis-black);
}

/* --- Missão e Visão ------------------------------------------------------ */
.statement-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-32);
}

.statement {
    padding: clamp(var(--space-24), 3vw, var(--space-32));
    border: 1px solid var(--border-on-light);
    border-left: 2px solid var(--noesis-copper);
    border-radius: var(--radius-card);
    background-color: var(--noesis-white);
}

.statement-title {
    margin-bottom: var(--space-16);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--noesis-black);
}

.statement-text {
    margin-bottom: 0;
    font-size: .98rem;
    font-weight: 300;
    line-height: 1.75;
    color: var(--noesis-slate);
}

/* --- Remissão para as áreas ---------------------------------------------- */
.area-link-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-24);
}

.area-link {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: clamp(var(--space-24), 3vw, var(--space-32));
    border: 1px solid var(--border-on-light);
    border-radius: var(--radius-card);
    background-color: var(--noesis-white);
    text-decoration: none;
    transition: border-color var(--dur-ui) var(--ease-ui),
                transform var(--dur-ui) var(--ease-ui);
}

.area-link:hover,
.area-link:focus-visible {
    border-color: rgba(177, 132, 103, 0.45);
    transform: translateY(-3px);
}

.area-link-index {
    display: block;
    margin-bottom: var(--space-16);
    font-family: var(--font-body);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--noesis-copper-dark);
}

.area-link-title {
    display: block;
    margin-bottom: var(--space-16);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.35rem;
    letter-spacing: var(--tracking-title);
    text-transform: uppercase;
    color: var(--noesis-black);
}

.area-link-items {
    display: block;
    margin-bottom: var(--space-32);
    border-top: 1px solid var(--border-on-light);
}

.area-link-items span {
    position: relative;
    display: block;
    padding: var(--space-12) 0 var(--space-12) var(--space-24);
    border-bottom: 1px solid var(--border-on-light);
    font-size: .9rem;
    font-weight: 300;
    line-height: 1.5;
    color: var(--noesis-slate);
}

.area-link-items span::before {
    content: "";
    position: absolute;
    top: 1.35rem;
    left: 0;
    width: 7px;
    height: 1px;
    background-color: var(--noesis-copper);
    transition: width .45s var(--ease-ui);
}

.area-link:hover .area-link-items span::before,
.area-link:focus-visible .area-link-items span::before {
    width: 15px;
}

.area-link-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-12);
    margin-top: auto;
    font-family: var(--font-body);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: var(--tracking-cta);
    text-transform: uppercase;
    color: var(--noesis-copper-dark);
    transition: color var(--dur-ui) var(--ease-ui);
}

.area-link:hover .area-link-cta,
.area-link:focus-visible .area-link-cta {
    color: var(--noesis-copper);
}

.area-link:hover .btn-arrow,
.area-link:focus-visible .btn-arrow {
    transform: translateX(6px);
}

/* --- Nota destacada ------------------------------------------------------ */
.callout {
    max-width: 68ch;
    margin-top: clamp(var(--space-48), 6vw, var(--space-64));
    padding: var(--space-24) var(--space-32);
    border-left: 2px solid var(--noesis-copper);
    background-color: var(--noesis-white);
    font-size: .95rem;
    font-weight: 300;
    font-style: italic;
    line-height: 1.75;
    color: var(--noesis-slate);
}

/* --- Porquê a NOESIS: grelha de células ----------------------------------
   As divisórias pertencem a cada célula, não ao contentor: uma linha
   incompleta termina sem deixar moldura suspensa.
------------------------------------------------------------------------- */
.why-grid {
    display: grid;
    grid-template-columns: 1fr;
    margin-top: clamp(var(--space-48), 6vw, var(--space-64));
}

.why-cell {
    padding: clamp(var(--space-32), 4vw, var(--space-48)) 0;
    border-top: 1px solid rgba(255, 255, 255, 0.10);
    transition: background-color var(--dur-ui) var(--ease-ui);
}

.why-number {
    display: block;
    margin-bottom: var(--space-24);
    font-family: var(--font-heading);
    font-weight: 300;
    font-size: clamp(2rem, 3.2vw, 2.5rem);
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--noesis-copper);
}

.why-title {
    margin-bottom: var(--space-12);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--noesis-white);
}

.why-text {
    margin-bottom: 0;
    font-size: .9rem;
    font-weight: 300;
    line-height: 1.65;
    color: var(--text-on-dark);
}

/* --- Secção de área na homepage ------------------------------------------
   Texto à esquerda, índice de serviços em duas colunas à direita.
------------------------------------------------------------------------- */
.area-section-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(var(--space-48), 6vw, var(--space-80));
    align-items: start;
}

.area-section-title {
    margin-bottom: var(--space-24);
    font-size: clamp(2rem, 4vw, 3.15rem);
    line-height: 1.08;
    letter-spacing: -0.03em;
}

.area-section-lead {
    max-width: 46ch;
    margin-bottom: var(--space-32);
    font-size: clamp(1rem, 1.25vw, 1.1rem);
    font-weight: 300;
    line-height: 1.75;
}

/* Índice de serviços numerado */
.service-index {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0 var(--space-48);
    margin: 0;
    padding: 0;
    list-style: none;
}

.service-index li {
    display: flex;
    align-items: baseline;
    gap: var(--space-24);
    padding-block: var(--space-16);
    border-bottom: 1px solid var(--border-on-light);
    font-size: .98rem;
    color: var(--noesis-black);
}

.service-index-number {
    flex-shrink: 0;
    font-family: var(--font-body);
    font-size: .8rem;
    font-weight: 500;
    color: var(--noesis-copper);
}

.service-index-note {
    margin: var(--space-32) 0 0;
    font-size: .88rem;
    font-style: italic;
    line-height: 1.6;
    color: var(--noesis-grey);
}

/* --- Destaque de fluxo ---------------------------------------------------- */
.highlight-box {
    margin-bottom: var(--space-32);
    padding: var(--space-24);
    border: 1px solid var(--border-on-light);
    border-radius: var(--radius-card);
}

.highlight-label {
    display: block;
    margin-bottom: var(--space-12);
    font-family: var(--font-body);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--noesis-copper);
}

.highlight-text {
    margin-bottom: var(--space-16);
    font-size: .95rem;
    font-weight: 300;
    line-height: 1.65;
}

/* --- Variantes sobre fundo escuro ----------------------------------------- */
.section--dark .area-section-title,
.section--slate .area-section-title {
    color: var(--noesis-white);
}

.section--dark .service-index li,
.section--slate .service-index li {
    border-bottom-color: var(--border-on-dark);
    color: rgba(255, 255, 255, 0.92);
}

.section--dark .area-section-lead,
.section--slate .area-section-lead {
    color: var(--text-on-dark);
}

.section--dark .service-index-note,
.section--slate .service-index-note {
    color: var(--text-on-dark-soft);
}

.section--dark .highlight-box,
.section--slate .highlight-box {
    border-color: var(--border-on-dark);
}

.section--dark .highlight-text,
.section--slate .highlight-text {
    color: var(--text-on-dark);
}

.section--dark .link-arrow,
.section--slate .link-arrow {
    color: var(--noesis-copper-light);
}

.section--dark .link-arrow:hover,
.section--dark .link-arrow:focus-visible,
.section--slate .link-arrow:hover,
.section--slate .link-arrow:focus-visible {
    color: var(--noesis-white);
}

/* ==========================================================================
   INSIGHTS — ÍNDICE EDITORIAL
   ========================================================================== */

/* --- Destaque principal --------------------------------------------------- */
.insight-feature {
    display: block;
    padding-bottom: clamp(var(--space-48), 6vw, var(--space-64));
    border-bottom: 1px solid var(--border-on-light);
    text-decoration: none;
    color: inherit;
}

.insight-feature:hover .insight-feature-title,
.insight-feature:focus-visible .insight-feature-title {
    color: var(--noesis-copper-dark);
}

.insight-feature-title {
    margin-bottom: var(--space-24);
    font-size: clamp(1.75rem, 4vw, 2.85rem);
    line-height: 1.12;
    letter-spacing: -0.03em;
    transition: color var(--dur-ui) var(--ease-ui);
}

.insight-feature-excerpt {
    max-width: 62ch;
    margin-bottom: var(--space-32);
    font-size: clamp(1rem, 1.25vw, 1.1rem);
    font-weight: 300;
    line-height: 1.75;
    color: var(--noesis-slate);
}

/* --- Etiqueta de categoria ------------------------------------------------ */
.insight-category {
    display: inline-block;
    padding: var(--space-4) var(--space-12);
    border: 1px solid rgba(177, 132, 103, 0.4);
    border-radius: var(--radius-pill);
    font-family: var(--font-body);
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--noesis-copper-dark);
}

.insight-category--on-dark {
    border-color: rgba(216, 178, 149, 0.35);
    color: var(--noesis-copper-light);
}

/* --- Meta: autor e data --------------------------------------------------- */
.insight-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-12);
    margin-bottom: var(--space-24);
    font-family: var(--font-body);
    font-size: .8rem;
    color: var(--noesis-grey);
}

.insight-meta-sep {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background-color: var(--noesis-copper);
    flex-shrink: 0;
}

/* --- Lista editorial ------------------------------------------------------ */
.insight-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.insight-item {
    border-bottom: 1px solid var(--border-on-light);
}

.insight-link {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-12);
    padding-block: clamp(var(--space-32), 4vw, var(--space-48));
    text-decoration: none;
    color: inherit;
}

.insight-link:hover .insight-title,
.insight-link:focus-visible .insight-title {
    color: var(--noesis-copper-dark);
}

.insight-title {
    margin-bottom: var(--space-12);
    font-size: clamp(1.15rem, 1.9vw, 1.5rem);
    line-height: 1.25;
    letter-spacing: -0.02em;
    transition: color var(--dur-ui) var(--ease-ui);
}

.insight-excerpt {
    max-width: 62ch;
    margin-bottom: 0;
    font-size: .95rem;
    font-weight: 300;
    line-height: 1.7;
    color: var(--noesis-slate);
}

.insight-aside {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.insight-date {
    font-family: var(--font-body);
    font-size: .8rem;
    color: var(--noesis-grey);
}


/* ==========================================================================
   ARTIGO
   ========================================================================== */
.article-header .page-header-inner {
    max-width: 840px;
}

.article-byline {
    display: flex;
    align-items: center;
    gap: var(--space-16);
    margin-top: clamp(var(--space-32), 4vw, var(--space-48));
    padding-top: var(--space-32);
    border-top: 1px solid var(--border-on-dark-soft);
}

.article-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    border-radius: 50%;
    background-color: var(--noesis-copper-dark);
    font-family: var(--font-heading);
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--noesis-white);
}

.article-author {
    display: block;
    font-family: var(--font-body);
    font-size: .95rem;
    font-weight: 600;
    color: var(--noesis-white);
}

.article-author-meta {
    display: block;
    font-size: .85rem;
    color: var(--text-on-dark-soft);
}

/* --- Coluna de leitura ---------------------------------------------------- */
.article-wrap {
    max-width: 780px;
}

/* --- Caixa "Em resumo" ---------------------------------------------------- */
.article-summary {
    margin-bottom: clamp(var(--space-48), 6vw, var(--space-64));
    padding: clamp(var(--space-24), 3vw, var(--space-32));
    border-top: 3px solid var(--noesis-copper);
    background-color: var(--noesis-mist);
}

.article-summary h2 {
    margin-bottom: var(--space-16);
    font-size: 1.2rem;
}

.article-summary ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.article-summary li {
    position: relative;
    padding: var(--space-8) 0 var(--space-8) var(--space-24);
    font-size: .95rem;
    font-weight: 300;
    line-height: 1.7;
    color: var(--noesis-slate);
}

.article-summary li::before {
    content: "";
    position: absolute;
    top: 1.05rem;
    left: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--noesis-copper);
}

/* --- Corpo do artigo ------------------------------------------------------ */
.article-body h2 {
    margin-top: clamp(var(--space-48), 6vw, var(--space-64));
    margin-bottom: var(--space-24);
    font-size: clamp(1.35rem, 2.2vw, 1.75rem);
    line-height: 1.25;
    letter-spacing: -0.02em;
}

.article-body h3 {
    margin-top: var(--space-48);
    margin-bottom: var(--space-16);
    font-size: 1.1rem;
}

.article-body p {
    margin-bottom: var(--space-24);
    font-size: clamp(1rem, 1.2vw, 1.075rem);
    font-weight: 300;
    line-height: 1.8;
    color: var(--noesis-slate);
}

.article-body > ul {
    margin: 0 0 var(--space-32);
    padding: 0;
    list-style: none;
}

.article-body > ul > li {
    position: relative;
    padding: var(--space-8) 0 var(--space-8) var(--space-24);
    font-size: clamp(.98rem, 1.15vw, 1.05rem);
    font-weight: 300;
    line-height: 1.75;
    color: var(--noesis-slate);
}

.article-body > ul > li::before {
    content: "";
    position: absolute;
    top: 1.1rem;
    left: 0;
    width: 7px;
    height: 1px;
    background-color: var(--noesis-copper);
}

.article-body ol {
    margin: 0 0 var(--space-32);
    padding-left: var(--space-24);
}

.article-body ol li {
    margin-bottom: var(--space-12);
    padding-left: var(--space-8);
    font-size: clamp(.98rem, 1.15vw, 1.05rem);
    font-weight: 300;
    line-height: 1.75;
    color: var(--noesis-slate);
}

.article-body ol li::marker {
    color: var(--noesis-copper);
    font-weight: 600;
}

.article-body strong {
    font-weight: 600;
    color: var(--noesis-black);
}

/* --- Tabelas -------------------------------------------------------------- */
.table-block {
    margin-bottom: clamp(var(--space-32), 4vw, var(--space-48));
}

.table-caption {
    margin-bottom: var(--space-16);
    font-family: var(--font-body);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--noesis-copper-dark);
}

/* O scroll horizontal fica contido aqui: o corpo da página nunca desliza */
.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--border-on-light);
    border-radius: var(--radius-card);
}

.data-table {
    width: 100%;
    min-width: 520px;
    border-collapse: collapse;
    font-size: .92rem;
}

.data-table th,
.data-table td {
    padding: var(--space-16);
    border-bottom: 1px solid var(--border-on-light);
    text-align: left;
    vertical-align: top;
    line-height: 1.6;
}

.data-table thead th {
    background-color: var(--noesis-black);
    border-bottom: 0;
    font-family: var(--font-body);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--noesis-white);
}

.data-table tbody tr:last-child td {
    border-bottom: 0;
}

.data-table tbody tr:nth-child(even) {
    background-color: rgba(29, 31, 34, 0.02);
}

.data-table td:first-child {
    font-weight: 500;
    color: var(--noesis-black);
}

.data-table .is-total td {
    border-top: 2px solid var(--noesis-copper);
    font-weight: 600;
    color: var(--noesis-black);
}

.data-table .is-numeric {
    text-align: right;
    white-space: nowrap;
}

.table-note {
    margin: var(--space-16) 0 0;
    font-size: .82rem;
    font-style: italic;
    line-height: 1.6;
    color: var(--noesis-grey);
}

/* --- Aviso ---------------------------------------------------------------- */
.callout--warn {
    margin-bottom: clamp(var(--space-32), 4vw, var(--space-48));
    padding: var(--space-24);
    border-left: 3px solid var(--noesis-copper);
    background-color: var(--noesis-mist);
    font-size: .96rem;
    font-weight: 300;
    line-height: 1.75;
    color: var(--noesis-slate);
}

.callout--warn strong {
    font-weight: 600;
    color: var(--noesis-black);
}

/* --- Passos numerados ----------------------------------------------------- */
.step-list {
    margin: 0 0 clamp(var(--space-32), 4vw, var(--space-48));
    padding: 0;
    list-style: none;
    counter-reset: step;
    border-top: 1px solid var(--border-on-light);
}
/* --- Blocos de pergunta (artigo de auto-avaliação) ------------------------ */
.question-list {
    margin: 0 0 clamp(var(--space-32), 4vw, var(--space-48));
    padding: 0;
    list-style: none;
}

.question {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-24);
    margin-bottom: var(--space-16);
    padding: var(--space-24);
    border-left: 3px solid var(--noesis-copper);
    background-color: var(--noesis-mist);
}

.question-number {
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 300;
    line-height: 1;
    color: var(--noesis-copper);
}

.question-title {
    margin-top: 0;
    margin-bottom: var(--space-12);
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--noesis-black);
}

.question-text {
    margin-bottom: var(--space-16);
    font-size: .96rem;
    font-weight: 300;
    line-height: 1.7;
    color: var(--noesis-slate);
}

.question-answer {
    margin-bottom: 0;
    padding-top: var(--space-16);
    border-top: 1px solid rgba(29, 31, 34, 0.12);
    font-size: .92rem;
    font-weight: 300;
    line-height: 1.65;
    color: var(--noesis-grey);
}

.question-answer strong {
    font-weight: 600;
    color: var(--noesis-slate);
}

.step-list li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-24);
    padding: var(--space-24) 0;
    border-bottom: 1px solid var(--border-on-light);
    counter-increment: step;
}

.step-list li::before {
    content: "0" counter(step);
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--noesis-copper);
}

.step-title {
    display: block;
    margin-bottom: var(--space-8);
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--noesis-black);
}

.step-text {
    display: block;
    font-size: .95rem;
    font-weight: 300;
    line-height: 1.7;
    color: var(--noesis-slate);
}

/* --- Gráfico de barras ----------------------------------------------------
   Cada barra é uma linha de tabela: o valor é sempre legível como texto,
   e a barra é uma camada visual sobre ele.
------------------------------------------------------------------------- */
.bar-chart .data-table {
    min-width: 400px;
}

.bar-cell {
    position: relative;
    min-width: 180px;
}

.bar-track {
    display: block;
    height: 8px;
    border-radius: var(--radius-pill);
    background-color: rgba(29, 31, 34, 0.07);
    overflow: hidden;
}

.bar-fill {
    display: block;
    height: 100%;
    border-radius: var(--radius-pill);
    background-color: var(--noesis-copper);
    width: var(--pct, 0%);
}

.bar-fill--muted {
    background-color: rgba(104, 113, 120, 0.55);
}

/* --- Assinatura ----------------------------------------------------------- */
.article-signature {
    display: flex;
    align-items: center;
    gap: var(--space-16);
    margin-top: clamp(var(--space-48), 6vw, var(--space-64));
    padding-top: var(--space-32);
    border-top: 1px solid var(--border-on-light);
}

.article-signature .article-avatar {
    background-color: var(--noesis-copper-dark);
}

.article-signature-name {
    display: block;
    font-family: var(--font-body);
    font-size: .95rem;
    font-weight: 600;
    color: var(--noesis-black);
}

.article-signature-meta {
    display: block;
    font-size: .85rem;
    color: var(--noesis-grey);
}

/* --- Disclaimer ----------------------------------------------------------- */
.article-disclaimer {
    margin-top: var(--space-32);
    padding: var(--space-24);
    border: 1px solid var(--border-on-light);
    border-radius: var(--radius-card);
    font-size: .85rem;
    font-weight: 300;
    line-height: 1.7;
    color: var(--noesis-grey);
}

/* --- Acesso ao PDF -------------------------------------------------------- */
.pdf-access {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-16);
    margin-top: var(--space-32);
    padding: var(--space-24);
    border: 1px solid var(--border-on-light);
    border-radius: var(--radius-card);
    background-color: var(--noesis-mist);
}

.pdf-access-text {
    margin: 0;
    font-size: .92rem;
    font-weight: 300;
    color: var(--noesis-slate);
}

.pdf-access-text strong {
    display: block;
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 700;
    color: var(--noesis-black);
}

/* --- Checklist interactiva ------------------------------------------------ */
.checklist {
    margin: 0 0 var(--space-24);
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--border-on-light);
}

.checklist li {
    border-bottom: 1px solid var(--border-on-light);
}

.checklist label {
    display: flex;
    align-items: flex-start;
    gap: var(--space-16);
    padding: var(--space-16) 0;
    font-size: .96rem;
    font-weight: 300;
    line-height: 1.6;
    color: var(--noesis-slate);
    cursor: pointer;
}

.checklist input {
    width: 20px;
    height: 20px;
    margin-top: 2px;
    flex-shrink: 0;
    accent-color: var(--noesis-copper);
    cursor: pointer;
}

.checklist input:checked + span {
    color: var(--noesis-black);
    font-weight: 500;
}

.checklist-count {
    margin: 0 0 clamp(var(--space-32), 4vw, var(--space-48));
    font-size: .9rem;
    color: var(--noesis-grey);
}

.checklist-count strong {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    color: var(--noesis-copper-dark);
}


/* ==========================================================================
   INSIGHTS NA HOMEPAGE
   ========================================================================== */
.insights-home-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-32);
}

.insight-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: clamp(var(--space-24), 3vw, var(--space-32));
    border: 1px solid var(--border-on-light);
    border-radius: var(--radius-card);
    background-color: var(--noesis-white);
    text-decoration: none;
    color: inherit;
    transition: border-color var(--dur-ui) var(--ease-ui),
                transform var(--dur-ui) var(--ease-ui);
}

.insight-card:hover,
.insight-card:focus-visible {
    border-color: rgba(177, 132, 103, 0.45);
    transform: translateY(-3px);
}

.insight-card .insight-category {
    align-self: flex-start;
    margin-bottom: var(--space-24);
}

.insight-card-title {
    display: block;
    margin-bottom: var(--space-16);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.1rem;
    line-height: 1.3;
    letter-spacing: -0.015em;
    color: var(--noesis-black);
}

.insight-card--lead .insight-card-title {
    font-size: clamp(1.35rem, 2.2vw, 1.85rem);
    line-height: 1.2;
}

.insight-card-excerpt {
    margin-bottom: var(--space-24);
    font-size: .92rem;
    font-weight: 300;
    line-height: 1.7;
    color: var(--noesis-slate);
}

.insight-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-16);
    margin-top: auto;
    padding-top: var(--space-16);
    border-top: 1px solid var(--border-on-light);
    font-size: .8rem;
    color: var(--noesis-grey);
}
.insights-home-more {
    margin-top: clamp(var(--space-32), 4vw, var(--space-48));
    margin-bottom: 0;
}

.insight-card:hover .btn-arrow,
.insight-card:focus-visible .btn-arrow {
    transform: translateX(4px);
}
/* --- CTA final ------------------------------------------------------------
   Componente global. Usado no fim das páginas de área e da homepage.
------------------------------------------------------------------------- */
.final-cta {
    position: relative;
    overflow: hidden;
    padding-block: clamp(var(--space-96), 14vw, 160px);
    background-color: var(--noesis-black);
    color: var(--noesis-white);
    text-align: center;
}

.final-cta-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        repeating-linear-gradient(to right,
            rgba(255,255,255,0.028) 0 1px, transparent 1px var(--hero-grid-cell)),
        repeating-linear-gradient(to bottom,
            rgba(255,255,255,0.028) 0 1px, transparent 1px var(--hero-grid-cell));
    -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, #000 15%, transparent 80%);
    mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, #000 15%, transparent 80%);
}

.final-cta .container {
    position: relative;
    z-index: 1;
}

/* Elemento gráfico vertical pontilhado */
.final-cta-mark {
    display: block;
    width: 1px;
    height: 56px;
    margin: 0 auto var(--space-48);
    background-image: linear-gradient(
        to bottom,
        transparent 0%,
        var(--noesis-copper) 100%
    );
    -webkit-mask-image: repeating-linear-gradient(
        to bottom, #000 0 3px, transparent 3px 8px);
    mask-image: repeating-linear-gradient(
        to bottom, #000 0 3px, transparent 3px 8px);
}

.final-cta-label {
    margin-bottom: var(--space-32);
    font-family: var(--font-body);
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--noesis-copper);
}

.final-cta-title {
    max-width: 18ch;
    margin-inline: auto;
    margin-bottom: var(--space-48);
    font-size: clamp(1.9rem, 5vw, 3.5rem);
    line-height: 1.12;
    letter-spacing: -0.03em;
    color: var(--noesis-white);
}

.final-cta-title-accent {
    color: var(--noesis-copper-light);
}
 
/* ==========================================================================
   11. CARDS
   ========================================================================== */

/* --- Card base ------------------------------------------------------------
   Anatomia partilhada: número decorativo em cobre, título, descrição.
   Usado em "O que fazemos" e, futuramente, em How We Work.
------------------------------------------------------------------------- */
.card-base {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: clamp(var(--space-24), 3vw, var(--space-32));
    border: 1px solid var(--border-on-light);
    border-radius: var(--radius-card);
    background-color: var(--noesis-white);
    transition: border-color var(--dur-ui) var(--ease-ui),
                transform var(--dur-ui) var(--ease-ui);
}

.card-base:hover {
    border-color: rgba(177, 132, 103, 0.45);
    transform: translateY(-3px);
}

.card-number {
    display: block;
    margin-bottom: var(--space-24);
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 1.6rem;
    line-height: 1;
    letter-spacing: -0.01em;
    color: var(--noesis-copper);
}

.card-title {
    margin-bottom: var(--space-12);
    font-size: 1.075rem;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.01em;
    color: var(--noesis-black);
}

.card-text {
    margin-bottom: 0;
    font-size: .92rem;
    font-weight: 300;
    line-height: 1.65;
    color: var(--noesis-slate);
}

/* --- Grelha de cards ----------------------------------------------------- */
.card-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-24);
}


/* ==========================================================================
   12. FOOTER
   ========================================================================== */
.site-footer {
    position: relative;
    overflow: hidden;
    padding-top: clamp(var(--space-64), 9vw, var(--space-96));
    background-color: var(--noesis-black);
    color: var(--noesis-white);
}

/* Linha de acento no topo — fecha a página com a assinatura da marca */
.site-footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(
        to right,
        transparent 0%,
        var(--noesis-copper-dark) 18%,
        var(--noesis-copper) 50%,
        var(--noesis-copper-dark) 82%,
        transparent 100%
    );
    opacity: .5;
}

/* --- Grelha principal ---------------------------------------------------- */
.footer-main {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-48);
    padding-bottom: clamp(var(--space-48), 7vw, var(--space-80));
}

/* --- Coluna da marca ----------------------------------------------------- */
.footer-brand .ne-logo {
    margin-bottom: var(--space-24);
}

.footer-slogan {
    max-width: 22ch;
    margin-bottom: 0;
    font-family: var(--font-heading);
    font-size: .8rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    line-height: 1.7;
    text-transform: uppercase;
    color: rgba(216, 178, 149, 0.8);
}

/* --- Colunas de navegação ------------------------------------------------ */
.footer-nav-group {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-32);
}

.footer-heading {
    margin-bottom: var(--space-24);
    font-family: var(--font-body);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--noesis-copper);
}

.footer-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer-list li + li {
    margin-top: var(--space-12);
}

.footer-link {
    display: inline-block;
    font-size: .9rem;
    font-weight: 400;
    text-decoration: none;
    color: var(--text-on-dark);
    transition: color var(--dur-ui) var(--ease-ui);
}

.footer-link:hover,
.footer-link:focus-visible {
    color: var(--noesis-copper-light);
}

/* --- Coluna de contacto -------------------------------------------------- */
.footer-contact-list {
    margin: 0 0 var(--space-32);
    padding: 0;
    list-style: none;
}

.footer-contact-list li + li {
    margin-top: var(--space-16);
}

.footer-contact-label {
    display: block;
    margin-bottom: var(--space-4);
    font-family: var(--font-body);
    font-size: .68rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--noesis-grey);
}

.footer-contact-value {
    display: block;
    font-size: .9rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.88);
}

/* Placeholder — visivelmente por preencher, sem parecer erro */
.footer-contact-value--pending {
    display: inline-flex;
    align-items: center;
    gap: var(--space-8);
    font-size: .9rem;
    font-style: italic;
    color: var(--noesis-grey);
}

.footer-contact-value--pending::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: var(--noesis-copper-dark);
    flex-shrink: 0;
}

/* --- Barra legal --------------------------------------------------------- */
.footer-legal {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
    padding-block: var(--space-32);
    border-top: 1px solid var(--border-on-dark-soft);
}

.footer-legal p {
    margin: 0;
    font-size: .8rem;
    color: var(--noesis-grey);
}

.footer-legal-company {
    font-family: var(--font-heading);
    font-weight: 500;
    letter-spacing: 0.04em;
}


/* ==========================================================================
   13. MODALS
   --------------------------------------------------------------------------
   Modal global "Fale Connosco". A implementar na fase respectiva.
   ========================================================================== */


/* ==========================================================================
   14. ANIMATIONS
   ========================================================================== */

/* Sistema de revelação:
   - contentor com [data-io]  → observado pelo IntersectionObserver
   - filhos com [data-reveal] → revelados em cascata via --d
   O estado inicial depende de .js, para que o conteúdo permaneça
   visível se o JavaScript falhar ou estiver desactivado. */
.js [data-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity var(--dur-reveal) var(--ease-reveal) var(--d, 0ms),
                transform var(--dur-reveal) var(--ease-reveal) var(--d, 0ms);
}

.js .is-inview [data-reveal],
.js [data-reveal].is-inview {
    opacity: 1;
    transform: none;
}

@keyframes heroArrow {
    0%, 100% { transform: translateY(0);   opacity: .55; }
    50%      { transform: translateY(5px); opacity: 1; }
}

@keyframes flowPulse {
    0%, 100% { transform: scale(1);   opacity: 1; }
    50%      { transform: scale(1.5); opacity: .45; }
}


/* ==========================================================================
   15. RESPONSIVE
   --------------------------------------------------------------------------
   992px  → navegação (ver nota de topo)
   1024px → layout principal
   1280px → refinamentos
   ========================================================================== */

/* --- ≥992px: navegação horizontal, hamburger sai -------------------------- */
@media (min-width: 992px) {
    .nav-desktop {
        display: flex;
        align-items: center;
        gap: var(--space-32);
    }

    .nav-toggle,
    .nav-mobile {
        display: none;
    }
}

@media (min-width: 640px) {
    .form-row--two {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

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

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

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

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

    .why-cell {
        padding: var(--space-32);
    }

    .why-cell:not(:nth-child(2n + 1)) {
        border-left: 1px solid rgba(255, 255, 255, 0.10);
    }

    .why-cell:hover {
        background-color: var(--noesis-black);
    }

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

        .insight-link {
        grid-template-columns: 1fr auto;
        gap: var(--space-48);
        align-items: start;
    }

    .insight-aside {
        text-align: right;
        align-items: flex-end;
    }
}

/* --- ≥1024px: layout desktop --------------------------------------------- */
@media (min-width: 1024px) {
    .areas-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-32);
        align-items: start;
    }

    .area-panel {
        min-height: clamp(600px, 76vh, 780px);
    }

    /* Assimetria: o painel 02 desce */
    .area-panel + .area-panel {
        margin-top: var(--space-80);
    }

    .footer-main {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr) minmax(0, 1fr);
        gap: var(--space-64);
    }

    .footer-legal {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-32);
    }

    .contact-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
        gap: var(--space-96);
        align-items: start;
    }

    .card-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--space-32);
    }

    .operation-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
        gap: var(--space-96);
    }

    .process-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: var(--space-48) var(--space-32);
    }

    /* Separador horizontal entre colunas, alinhado com a numeração */
    .process-step:not(:nth-child(4n + 1))::before {
        content: "";
        position: absolute;
        top: 1.5rem;
        left: calc(var(--space-32) / -2 - 12px);
        width: 24px;
        height: 1px;
        background-color: var(--border-on-dark);
    }
    .corridor {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-96);
        align-items: start;
    }
    .corridor-bridge {
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        width: calc(var(--space-64) + 60px);
        transform: translate(-50%, -50%);
        pointer-events: none;
    }
    .corridor-bridge svg {
        display: block;
        width: 100%;
        height: auto;
        overflow: visible;
    }

    .statement-grid {
        gap: var(--space-48);
    }

    .area-link-grid {
        gap: var(--space-32);
    }

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

    .why-cell {
        padding: var(--space-48);
    }

    /* Redefine as divisórias para três colunas */
    .why-cell {
        border-left: 0;
    }
    .why-cell:not(:nth-child(3n + 1)) {
        border-left: 1px solid rgba(255, 255, 255, 0.10);
    }
    .area-section-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
        gap: var(--space-96);
    }
    .insights-home-grid {
        grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
        grid-template-rows: auto auto;
    }
    .insight-card--lead {
        grid-row: 1 / 3;
    }
}



/* --- ≥1280px: refinamentos ----------------------------------------------- */
@media (min-width: 1280px) {
    .areas-grid {
        gap: var(--space-48);
    }
}

@media (min-width: 640px) and (max-width: 1023.98px) {
    .footer-main {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-48);
    }

    .footer-brand {
        grid-column: 1 / -1;
    }
}

/* --- Tablet (768–1023px) -------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1023.98px) {
    .area-panel {
        min-height: 520px;
    }

    .area-services {
        columns: 2;
        column-gap: var(--space-48);
    }

    .area-services span {
        break-inside: avoid;
    }
}

/* --- Ecrãs baixos em desktop --------------------------------------------- */
@media (max-height: 700px) and (min-width: 1024px) {
    .hero {
        min-height: 640px;
    }

    .hero-inner {
        padding-top: calc(var(--header-height) + var(--space-24));
    }

    .hero-eyebrow,
    .hero-title {
        margin-bottom: var(--space-24);
    }
}

/* --- Mobile pequeno ------------------------------------------------------- */
@media (max-width: 575.98px) {
    .container {
        --bs-gutter-x: 1.5rem;
    }

    .hero-title,
    .hero-lead,
    .area-desc,
    .section-lead {
        max-width: none;
    }

    .hero-foot {
        padding-bottom: var(--space-32);
    }

    .area-panel {
        min-height: 0;
    }

    .area-cta {
        width: 100%;
        justify-content: space-between;
        padding-block: var(--space-12);
    }
}

@media (max-width: 400px) {
    .ne-sub {
        letter-spacing: 0.24em;
    }
}


/* ==========================================================================
   16. ACCESSIBILITY / REDUCED MOTION
   ========================================================================== */
.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    .js [data-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }

    /* Desactivar transições — nunca transform, que quebraria o layout */
    .site-header,
    .site-header-inner,
    .nav-link,
    .nav-link::after,
    .nav-toggle span,
    .nav-mobile,
    .nav-mobile-link,
    .btn-noesis,
    .btn-arrow,
    .link-arrow,
    .skip-link,
    .hero-scroll,
    .hero-scroll-label::after,
    .area-media,
    .area-media::after,
    .area-panel::before,
    .area-number,
    .area-cta,
    .area-link,
    .area-link-items span::before,
    .area-link-cta
    .area-services span::before,
    .form-control-noesis,
    .form-option span,
    .why-cell,
    .insight-feature-title,
    .insight-title,
    .insight-card
    .footer-link,
    .card-base {
        transition: none;
    }

    .card-base:hover {
        transform: none;
    }
    .insight-card:hover,
    .insight-card:focus-visible {
        transform: none;
    }

    .area-link:hover,
    .area-link:focus-visible {
        transform: none;
    }

    .hero-scroll-arrow {
        animation: none;
        opacity: .75;
    }

    .area-panel:hover .area-media,
    .area-panel:focus-visible .area-media {
        transform: none;
    }

    .area-panel:hover::before,
    .area-panel:focus-visible::before {
        transform: scaleX(1);
    }

    .flow-node--core::after {
        animation: none;
    }
}