/*
 * STRATUM EXECUTIVE ACADEMY — Folha de estilos principal
 * Redesign v2.0 — Junho 2026
 * Sistema editorial: contraste claro/escuro, tipografia de exibição, acento dourado contido.
 * Sem dependências externas. Mobile-first, WCAG AA.
 */

/* =============================================================================
   1. TOKENS DE DESIGN — propriedades CSS globais
   ============================================================================= */

:root {
    /* — Fundos — */
    --bg-escuro:        #09090D;
    --bg-escuro-soft:   #111116;
    --bg-claro:         #F8F6F1;
    --bg-claro-alt:     #F0EDE7;
    --bg-branco:        #FFFFFF;

    /* — Texto — */
    --txt-escuro:       #0E0E12;
    --txt-medio:        #4D4D5E;
    --txt-suave:        #7E7E8F;
    --txt-claro:        #EDE9E1;
    --txt-claro-suave:  #7A7A8A;

    /* — Acento dourado — máximo 5-8% do écran — */
    --ouro:             #B8933C;
    --ouro-claro:       #C9A24B;
    --ouro-alfa:        rgba(184,147,60,.12);
    --ouro-borda:       rgba(184,147,60,.28);
    --ouro-texto:       #91702A; /* Dourado acessível de alto contraste para fundos claros (WCAG AA) */

    /* — Bordas — */
    --borda:            #E5E2DB;
    --borda-escura:     #232328;
    --borda-hover:      #C8C5BC;

    /* — Tipografia — */
    --fonte-display:    'Playfair Display', Georgia, 'Times New Roman', serif;
    --fonte-corpo:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* — Escalas tipográficas — */
    --t-display:    clamp(40px, 5.5vw, 68px);
    --t-h1:         clamp(32px, 4.5vw, 52px);
    --t-h2:         clamp(24px, 3vw,   38px);
    --t-h3:         clamp(19px, 2.2vw, 26px);
    --t-h4:         clamp(15px, 1.6vw, 18px);
    --t-corpo-lg:   18px;
    --t-corpo:      16px;
    --t-corpo-sm:   14px;
    --t-label:      12px;

    /* — Espaçamentos — */
    --s1:   8px;
    --s2:  16px;
    --s3:  24px;
    --s4:  32px;
    --s5:  48px;
    --s6:  64px;
    --s7:  96px;
    --s8: 128px;
    --s9: 160px;

    /* — Secção — */
    --pad-sec:      clamp(72px, 10vw, 128px);
    --pad-h:        clamp(20px, 5vw,  80px);
    --max-w:        1280px;
    --max-texto:    720px;

    /* — Transições — */
    --ease:         .25s ease;
    --ease-saida:   .4s cubic-bezier(.25,.46,.45,.94);

    /* — Sombras — */
    --sombra-card:  0 2px 12px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.08);
    --sombra-hover: 0 8px 32px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.08);
}


/* =============================================================================
   2. RESET E BASE
   ============================================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin:  0;
    padding: 0;
    -webkit-tap-highlight-color: rgba(184, 147, 60, 0.15);
}

::selection {
    background-color: rgba(184, 147, 60, 0.25);
    color: var(--txt-escuro);
}
.fundo-escuro ::selection,
.secao--escuro ::selection,
.hero ::selection,
.sec-cta-final ::selection {
    background-color: rgba(184, 147, 60, 0.35);
    color: var(--txt-claro);
}

html {
    scroll-behavior: smooth;
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family:      var(--fonte-corpo);
    font-size:        var(--t-corpo);
    line-height:      1.72;
    color:            var(--txt-escuro);
    background-color: var(--bg-claro);
    -webkit-font-smoothing:  antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

img, video, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button, input, select, textarea { font: inherit; }

:focus-visible {
    outline: 2px solid var(--ouro);
    outline-offset: 3px;
    border-radius: 2px;
}

/* Autofill stylings to match stratum identity */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--txt-escuro);
    -webkit-box-shadow: 0 0 0px 1000px var(--bg-branco) inset;
    transition: background-color 5000s ease-in-out 0s;
}
.form-escuro input:-webkit-autofill,
.form-escuro input:-webkit-autofill:hover, 
.form-escuro input:-webkit-autofill:focus,
.form-escuro textarea:-webkit-autofill,
.form-escuro textarea:-webkit-autofill:hover,
.form-escuro textarea:-webkit-autofill:focus,
.form-escuro select:-webkit-autofill,
.form-escuro select:-webkit-autofill:hover,
.form-escuro select:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--txt-claro);
    -webkit-box-shadow: 0 0 0px 1000px var(--bg-escuro-soft) inset;
}


/* =============================================================================
   3. TIPOGRAFIA — sistema editorial
   ============================================================================= */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--fonte-display);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -.02em;
    color: var(--txt-escuro);
}

.fundo-escuro h1,
.fundo-escuro h2,
.fundo-escuro h3,
.fundo-escuro h4 { color: var(--txt-claro); }

h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); }
h4 { font-size: var(--t-h4); }

p { margin-bottom: var(--s3); max-width: var(--max-texto); }
p:last-child { margin-bottom: 0; }

/* Label de secção */
.label-sec {
    display:         inline-flex;
    align-items:     center;
    gap:             var(--s2);
    font-family:     var(--fonte-corpo);
    font-size:       var(--t-label);
    font-weight:     600;
    letter-spacing:  .12em;
    text-transform:  uppercase;
    color:           var(--cor-label, var(--ouro)); /* suporta override via CSS var inline */
    margin-bottom:   var(--s3);
}
.secao--claro .label-sec,
.secao--branco .label-sec,
.secao--alt .label-sec {
    --cor-label: var(--ouro-texto);
}
.label-sec::before {
    content:    '';
    display:    block;
    width:      28px;
    height:     1px;
    background: var(--cor-label, var(--ouro));
    flex-shrink: 0;
}

/* Destaque itálico dourado nos títulos */
em.acento, .titulo-acento em {
    font-style: italic;
    color:      var(--ouro-claro);
}

/* Separador decorativo */
.divisor {
    width:      48px;
    height:     1px;
    background: var(--ouro);
    margin:     var(--s4) 0;
}
.divisor--centro { margin-left: auto; margin-right: auto; }

blockquote {
    font-family:   var(--fonte-display);
    font-size:     var(--t-h3);
    font-weight:   400;
    font-style:    italic;
    line-height:   1.4;
    border-left:   2px solid var(--ouro);
    padding-left:  var(--s4);
    margin:        var(--s5) 0;
}


/* =============================================================================
   4. LAYOUT
   ============================================================================= */

.contentor {
    width:   100%;
    max-width: var(--max-w);
    margin:  0 auto;
    padding: 0 var(--pad-h);
}

.secao { padding: var(--pad-sec) 0; }
.secao--claro  { background: var(--bg-claro); }
.secao--alt    { background: var(--bg-claro-alt); }
.secao--escuro { background: var(--bg-escuro); color: var(--txt-claro); }
.secao--branco { background: var(--bg-branco); }

.grelha-2 { display: grid; grid-template-columns: repeat(2,1fr); gap: var(--s6); align-items: start; }
.grelha-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--s5); }
.grelha-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--s4); }

.texto-centro { text-align: center; }
.m-auto       { margin-left: auto; margin-right: auto; }


/* =============================================================================
   5. BOTÕES
   ============================================================================= */

.btn {
    display:         inline-flex;
    align-items:     center;
    gap:             var(--s2);
    padding:         14px 28px;
    font-size:       var(--t-corpo-sm);
    font-weight:     600;
    letter-spacing:  .04em;
    text-transform:  uppercase;
    border:          1.5px solid transparent;
    cursor:          pointer;
    transition:      background var(--ease), color var(--ease), border-color var(--ease), transform var(--ease);
    white-space:     nowrap;
    text-decoration: none;
    line-height: 1;
}
.btn:hover { transform: translateY(-1px); }
.btn:active{ transform: none; }

.btn--primario {
    background: var(--ouro);
    color:      #fff;
    border-color: var(--ouro);
}
.btn--primario:hover {
    background: var(--ouro-claro);
    border-color: var(--ouro-claro);
    color: #fff;
}
.btn--primario:focus,
.btn--primario:active,
.btn--primario:visited {
    background-color: var(--ouro);
    border-color: var(--ouro);
    color: #fff;
}
.btn--primario:focus-visible {
    background-color: var(--ouro);
    border-color: var(--ouro);
    color: #fff;
    outline: 2px solid var(--ouro-claro);
    outline-offset: 3px;
}

.btn--contorno-ouro {
    background:   transparent;
    color:        var(--ouro-claro);
    border-color: var(--ouro-borda);
}
.btn--contorno-ouro:hover { background: var(--ouro-alfa); border-color: var(--ouro-claro); }

.btn--fantasma {
    background:   transparent;
    color:        var(--txt-claro);
    border-color: rgba(237,233,225,.38);
}
.btn--fantasma:visited {
    color: var(--txt-claro);
}
.btn--fantasma:hover,
.btn--fantasma:focus,
.btn--fantasma:active {
    color: var(--ouro-claro);
    background: rgba(184,147,60,.12);
    border-color: rgba(201,162,75,.72);
}
.btn--fantasma:focus { outline: none; }
.btn--fantasma:focus-visible {
    outline: 2px solid var(--ouro-claro);
    outline-offset: 3px;
    color: var(--txt-claro);
    background: rgba(184,147,60,.16);
    border-color: var(--ouro-claro);
}

.btn--outline {
    background:   transparent;
    color:        var(--txt-escuro);
    border-color: var(--borda-hover);
}
.btn--outline:hover { background: var(--txt-escuro); color: var(--txt-claro); border-color: var(--txt-escuro); }

.btn-grupo {
    display:   flex;
    flex-wrap: wrap;
    gap:       var(--s2);
    margin-top: var(--s5);
}

.btn .seta { transition: transform var(--ease); }
.btn:hover .seta { transform: translateX(4px); }


/* =============================================================================
   6. CABEÇALHO
   ============================================================================= */

.site-header {
    position:   fixed;
    top: 0; left: 0; right: 0;
    z-index:    200;
    height:     72px;
    display:    flex;
    align-items: center;
    transition: background var(--ease-saida), box-shadow var(--ease-saida), border-bottom-color var(--ease-saida);
    border-bottom: 1px solid transparent;
}

.site-header--transparente { background: transparent; border-color: transparent; }

.site-header--solido {
    background:    rgba(9,9,13,.92);
    backdrop-filter: blur(16px) saturate(1.4);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    border-color:  var(--borda-escura);
    box-shadow:    0 1px 24px rgba(0,0,0,.28);
}

.header__inner {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             var(--s4);
    width:           100%;
    padding: 0 var(--pad-h);
    max-width: var(--max-w);
    margin: 0 auto;
}

.header__logo { flex-shrink: 0; text-decoration: none; }
.header__logo-img { height: 36px; width: auto; }
.header__logo-texto {
    font-family:   var(--fonte-display);
    font-size:     20px;
    font-weight:   700;
    letter-spacing: .06em;
    color:         var(--txt-claro);
    line-height:   1;
}
.header__logo-texto span {
    display:    block;
    font-size:  8px;
    font-family: var(--fonte-corpo);
    font-weight: 400;
    letter-spacing: .18em;
    text-transform: uppercase;
    color:      var(--txt-claro-suave);
    margin-top: 4px;
}

.site-nav { display: flex; align-items: center; }

.site-nav ul {
    display:     flex;
    align-items: center;
    gap:         2px;
    list-style:  none;
    margin:      0;
    padding:     0;
}

.site-nav ul li a,
.site-nav ul li > span {
    display:       block;
    padding:       8px 12px;
    font-size:     13px;
    font-weight:   500;
    letter-spacing: .02em;
    color:         rgba(237,233,225,.78);
    transition:    color var(--ease), opacity var(--ease);
    white-space:   nowrap;
    cursor:        pointer;
}
.site-nav ul li a:hover,
.site-nav ul li:hover > span { color: var(--txt-claro); }

/* Dropdown */
.site-nav ul li { position: relative; }

.site-nav ul li ul {
    display:    block;
    position:   absolute;
    top:        calc(100% + 10px);
    left:       0;
    min-width:  240px;
    background: var(--bg-escuro-soft);
    border:     1px solid var(--borda-escura);
    border-top: 2px solid var(--ouro);
    padding:    var(--s2) 0;
    opacity:    0;
    pointer-events: none;
    transform:  translateY(-6px);
    transition: opacity var(--ease), transform var(--ease);
    z-index:    100;
}
.site-nav ul li:hover > ul,
.site-nav ul li:focus-within > ul {
    opacity:        1;
    pointer-events: auto;
    transform:      none;
}
.site-nav ul li ul li a {
    padding:  10px 20px;
    font-size: 13px;
    color:    rgba(237,233,225,.65);
    display:  block;
}
.site-nav ul li ul li a:hover { color: var(--txt-claro); background: rgba(255,255,255,.04); }

.site-nav__mobile-cta { display: none; }

.header__cta {
    margin-left: var(--s3);
    padding:     9px 18px;
    font-size:   12px;
    letter-spacing: .06em;
}

.header__burger {
    display:        none;
    flex-direction: column;
    gap:            5px;
    background:     transparent;
    border:         1px solid transparent;
    cursor:         pointer;
    padding:        8px;
    margin-left:    auto;
    color:          var(--txt-claro);
    border-radius:  2px;
    box-shadow:     none;
    min-width:      40px;
    min-height:     32px;
    align-items:    center;
    justify-content: center;
    transition:     background var(--ease), border-color var(--ease), color var(--ease);
}
.header__burger,
.header__burger:hover,
.header__burger:focus,
.header__burger:active,
.header__burger[aria-expanded="true"] {
    background: transparent !important;
    background-color: transparent !important;
    border-color: transparent !important;
    color: var(--txt-claro) !important;
    box-shadow: none !important;
}
.header__burger:hover,
.header__burger[aria-expanded="true"] {
    background: rgba(184,147,60,.10) !important;
    border-color: rgba(184,147,60,.22) !important;
}
.header__burger:focus { outline: none; }
.header__burger:focus-visible {
    outline: 2px solid var(--ouro-claro);
    outline-offset: 3px;
    background: rgba(184,147,60,.10) !important;
    border-color: rgba(184,147,60,.28) !important;
}
.header__burger span {
    display:    block;
    width:      24px;
    height:     1.5px;
    background: var(--txt-claro);
    transition: transform var(--ease), opacity var(--ease);
}

@media (max-width: 900px) {
    .header__burger { display: flex; }

    .site-nav {
        position:   fixed;
        inset:      72px 0 auto;
        width:      100%;
        height:     calc(100svh - 72px);
        max-height: calc(100dvh - 72px);
        background: rgba(9,9,13,.98);
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        padding:    var(--s3) var(--pad-h) var(--s4);
        opacity:    0;
        visibility: hidden;
        pointer-events: none;
        transform:  translateY(-8px);
        transition: opacity var(--ease-saida), transform var(--ease-saida), visibility 0s;
        overflow:   hidden;
        z-index:    190;
        border-top: 1px solid rgba(237,233,225,.08);
    }
    .site-nav.aberto {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none;
        overflow-y: auto;
        transition: opacity var(--ease-saida), transform var(--ease-saida), visibility 0s;
    }
    .site-nav ul {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        width: 100%;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none;
    }
    .site-nav ul li { width: 100%; border-bottom: 1px solid rgba(237,233,225,.08); }
    .site-nav ul li a,
    .site-nav ul li > span {
        padding: 12px 0;
        font-size: 15px;
        line-height: 1.25;
        color: rgba(237,233,225,.86);
        text-shadow: none;
        white-space: normal;
    }
    .site-nav ul li a:hover,
    .site-nav ul li a:focus,
    .site-nav ul li:hover > span,
    .site-nav ul li:focus-within > span {
        color: var(--ouro-claro);
    }
    .site-nav ul li a:focus-visible {
        outline: 2px solid var(--ouro-claro);
        outline-offset: 3px;
        border-radius: 2px;
    }
    .site-nav ul li ul {
        position: static; opacity: 1; pointer-events: auto; transform: none;
        border: none; padding: 0 0 0 var(--s3); background: transparent;
    }
    .site-nav ul li ul li a { font-size: 15px; padding: 10px 0; }
    .site-nav a.site-nav__mobile-cta,
    .site-nav a.site-nav__mobile-cta:visited {
        display: inline-flex;
        width: 100%;
        justify-content: center;
        margin-top: var(--s3);
        padding: 13px 20px;
        border: 1.5px solid rgba(201,162,75,.64);
        color: var(--ouro-claro) !important;
        -webkit-text-fill-color: var(--ouro-claro);
        background: rgba(184,147,60,.14);
        font-size: 12px;
        font-weight: 700;
        letter-spacing: .08em;
        line-height: 1;
        text-transform: uppercase;
        text-decoration: none;
        text-shadow: none;
        box-shadow: inset 0 0 0 1px rgba(237,233,225,.04);
        transition: border-color var(--ease), box-shadow var(--ease);
    }
    .site-nav a.site-nav__mobile-cta:hover,
    .site-nav a.site-nav__mobile-cta:focus,
    .site-nav a.site-nav__mobile-cta:active {
        color: var(--bg-escuro) !important;
        -webkit-text-fill-color: var(--bg-escuro);
        background: var(--ouro-claro);
        border-color: var(--ouro-claro);
    }
    .site-nav a.site-nav__mobile-cta:focus-visible {
        outline: 2px solid var(--ouro-claro);
        outline-offset: 3px;
    }
    .header__cta { display: none; }
}


/* =============================================================================
   7. HERO — editorial, conceito STRATUM/CAMADAS
   ============================================================================= */

.hero {
    position:   relative;
    min-height: 100svh;
    display:    flex;
    flex-direction: column;
    justify-content: center;
    background: var(--bg-escuro);
    overflow:   hidden;
    padding-top:    calc(72px + var(--s6));  /* 72px header + 32px respiro */
    padding-bottom: var(--s6);               /* simetria visual */
}

/* Grain texture subtil */
.hero::before {
    content:    '';
    position:   absolute;
    inset:      0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.028'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 1;
}

/* Gradiente de profundidade */
.hero::after {
    content:    '';
    position:   absolute;
    inset:      0;
    background: radial-gradient(ellipse 70% 60% at 80% 40%, rgba(184,147,60,.05) 0%, transparent 60%),
                radial-gradient(ellipse 50% 80% at 10% 80%, rgba(20,15,5,.5) 0%, transparent 55%);
    pointer-events: none;
    z-index: 1;
}

.hero__inner {
    position:   relative;
    z-index:    2;
    display:    grid;
    grid-template-columns: 1fr 380px;
    gap:        var(--s8);
    align-items: center;
    padding:    var(--s8) var(--pad-h);
    max-width:  var(--max-w);
    margin:     0 auto;
    width:      100%;
}

.hero__kicker {
    display:       inline-flex;
    align-items:   center;
    gap:           var(--s2);
    font-size:     var(--t-label);
    font-weight:   600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color:         var(--ouro);
    margin-bottom: var(--s4);
}
.hero__kicker::before {
    content:    '';
    width:      32px;
    height:     1px;
    background: var(--ouro);
}

.hero__titulo {
    font-size:     var(--t-display);
    font-weight:   700;
    line-height:   .96;
    letter-spacing: -.03em;
    color:         var(--txt-claro);
    margin-bottom: var(--s5);
}

.hero__desc {
    font-size:   var(--t-corpo-lg);
    line-height: 1.65;
    color:       rgba(237,233,225,.68);
    max-width:   520px;
    margin-bottom: 0;
}

.hero__acoes {
    display:   flex;
    flex-wrap: wrap;
    gap:       var(--s2);
    margin-top: var(--s5);
}

.hero__indicadores {
    display:   flex;
    flex-wrap: wrap;
    gap:       var(--s4);
    margin-top: var(--s6);
    padding-top: var(--s4);
    border-top: 1px solid var(--borda-escura);
}
.hero__ind-item {
    font-size:   11px;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    color:       rgba(237,233,225,.36);
}

/* — Composição visual direita: Camadas STRATUM — */
.hero__visual {
    display:        flex;
    flex-direction: column;
    gap:            0;
}

.hero__camadas-titulo {
    font-size:   9px;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color:       rgba(237,233,225,.2);
    margin-bottom: var(--s4);
}

.hero__camada {
    display:      grid;
    grid-template-columns: 24px 1fr;
    align-items:  center;
    gap:          var(--s3);
    padding:      20px 0;
    border-bottom: 1px solid rgba(255,255,255,.055);
    transition:   border-color var(--ease);
}
.hero__camada:first-of-type { border-top: 1px solid rgba(255,255,255,.055); }
.hero__camada:hover { border-bottom-color: rgba(184,147,60,.22); }

.hero__camada-num {
    font-size:   10px;
    font-weight: 600;
    color:       var(--ouro);
    letter-spacing: .04em;
    opacity:     .65;
}

.hero__camada-conteudo {
    display:     flex;
    align-items: center;
    gap:         var(--s3);
    flex:        1;
}

.hero__camada-nome {
    font-family:   var(--fonte-display);
    font-size:     clamp(15px, 1.6vw, 21px);
    font-weight:   700;
    color:         var(--txt-claro);
    letter-spacing: -.01em;
}

.hero__camada-barra {
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, rgba(184,147,60,.28), transparent);
}

.hero__mote {
    margin-top: var(--s5);
    font-size:   12px;
    color:       rgba(237,233,225,.22);
    line-height: 1.6;
    font-style:  italic;
    max-width:   300px;
}

/* Scroll indicator */
.hero__scroll {
    position:    absolute;
    bottom:      var(--s5);
    left:        50%;
    transform:   translateX(-50%);
    display:     flex;
    flex-direction: column;
    align-items: center;
    gap:         6px;
    cursor:      pointer;
    background:  none;
    border:      none;
    color:       rgba(237,233,225,.28);
    font-size:   9px;
    letter-spacing: .14em;
    text-transform: uppercase;
    transition:  color var(--ease);
    z-index:     2;
}
.hero__scroll:hover { color: rgba(237,233,225,.6); }
.hero__scroll-linha {
    width:  1px;
    height: 36px;
    background: linear-gradient(to bottom, transparent, rgba(237,233,225,.28));
    animation: scroll-linha 1.8s ease-in-out infinite;
}
@keyframes scroll-linha {
    0%,100% { transform: scaleY(0); transform-origin: top; opacity: 0; }
    40%      { transform: scaleY(1); transform-origin: top; opacity: 1; }
    80%      { transform: scaleY(1); transform-origin: bottom; opacity: 0; }
}

@media (max-width: 960px) {
    .hero__inner { grid-template-columns: 1fr; gap: var(--s6); padding: var(--s7) var(--pad-h); }
    .hero__visual { display: none; }
    .hero__titulo { font-size: clamp(40px, 8vw, 64px); }
}
@media (max-width: 600px) {
    .hero__titulo { font-size: clamp(34px, 9vw, 52px); }
    .hero__desc   { font-size: 16px; }
    .hero__scroll { display: none; }
}


/* =============================================================================
   8. BARRA DE AUTORIDADE
   ============================================================================= */

.barra-autoridade {
    background:  var(--bg-escuro-soft);
    border-top:  1px solid var(--borda-escura);
    border-bottom: 1px solid var(--borda-escura);
    padding:     14px var(--pad-h);
}

.barra-autoridade__inner {
    max-width:   var(--max-w);
    margin:      0 auto;
    display:     flex;
    align-items: center;
    justify-content: center;
    gap:         clamp(16px, 4vw, 56px);
    flex-wrap:   wrap;
}

.barra-autoridade__item {
    font-size:   11px;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color:       rgba(237,233,225,.35);
    white-space: nowrap;
}
.barra-autoridade__sep { color: rgba(184,147,60,.28); font-size: 10px; }


/* =============================================================================
   9. SECÇÃO POSICIONAMENTO
   ============================================================================= */

.sec-posicionamento .grelha-2 { align-items: center; gap: var(--s7); }

.sec-posicionamento__titulo {
    font-size:   var(--t-h2);
    line-height: 1.1;
}

.sec-posicionamento__features {
    display:        flex;
    flex-direction: column;
    gap:            var(--s4);
    margin-top:     var(--s5);
}

.feature-pill {
    display:     flex;
    align-items: flex-start;
    gap:         var(--s3);
    padding:     var(--s3) var(--s4);
    background:  var(--bg-branco);
    border:      1px solid var(--borda);
    border-left: 3px solid var(--ouro);
    transition:  box-shadow var(--ease);
}
.feature-pill:hover { box-shadow: var(--sombra-card); }

.feature-pill__titulo {
    font-size:   var(--t-corpo-sm);
    font-weight: 600;
    color:       var(--txt-escuro);
    margin-bottom: 2px;
    font-family: var(--fonte-corpo);
}
.feature-pill__desc {
    font-size: 13px;
    color:     var(--txt-medio);
    line-height: 1.5;
    margin:    0;
}

@media (max-width: 720px) {
    .sec-posicionamento .grelha-2 { grid-template-columns: 1fr; }
}


/* =============================================================================
   10. CARDS DE PROGRAMAS
   ============================================================================= */

.cards-programas {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap:                   var(--s4);
    margin-top:            var(--s6);
}

.card-programa {
    background:    var(--bg-branco);
    border:        1px solid var(--borda);
    padding:       var(--s5);
    display:       flex;
    flex-direction: column;
    gap:           var(--s3);
    transition:    box-shadow var(--ease), border-color var(--ease), transform var(--ease);
    text-decoration: none;
    color:         inherit;
}
.card-programa:hover {
    box-shadow:   var(--sombra-hover);
    border-color: var(--ouro-borda);
    transform:    translateY(-3px);
}

.card-programa__area {
    font-size:   10px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color:       var(--ouro);
}

.card-programa__titulo {
    font-family:   var(--fonte-display);
    font-size:     20px;
    font-weight:   700;
    line-height:   1.22;
    color:         var(--txt-escuro);
    letter-spacing: -.01em;
}

.card-programa__desc {
    font-size:  14px;
    color:      var(--txt-medio);
    line-height: 1.6;
    flex:        1;
    margin:      0;
}

.card-programa__meta {
    display:   flex;
    flex-wrap: wrap;
    gap:       var(--s2);
    margin-top: var(--s1);
    padding-top: var(--s3);
    border-top: 1px solid var(--borda);
}

.tag-meta {
    font-size:   11px;
    font-weight: 500;
    padding:     4px 10px;
    background:  var(--bg-claro-alt);
    color:       var(--txt-medio);
    border:      1px solid var(--borda);
}

.card-programa__link {
    display:     flex;
    align-items: center;
    gap:         6px;
    font-size:   12px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color:       var(--ouro);
    margin-top:  auto;
}
.card-programa__link::after { content: '→'; transition: transform var(--ease); }
.card-programa:hover .card-programa__link::after { transform: translateX(4px); }


/* =============================================================================
   11. SOLUÇÕES CORPORATIVAS (fundo escuro)
   ============================================================================= */

.sec-corporativo {
    background: var(--bg-escuro);
    position:   relative;
    overflow:   hidden;
}
.sec-corporativo::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--ouro-borda), transparent);
}

.sec-corporativo .grelha-2 { align-items: center; gap: var(--s7); }

.sec-corporativo__titulo { font-size: var(--t-h2); line-height: 1.08; color: var(--txt-claro); }

.sec-corporativo__subtitulo {
    font-size:  var(--t-corpo-lg);
    color:      rgba(237,233,225,.6);
    line-height: 1.65;
    margin-top: var(--s3);
}

.lista-beneficios {
    display:        flex;
    flex-direction: column;
    gap:            var(--s4);
    margin-top:     var(--s5);
}

.beneficio { display: flex; gap: var(--s3); align-items: flex-start; }

.beneficio__num {
    font-size:   var(--t-corpo-sm);
    font-weight: 700;
    color:       var(--ouro);
    letter-spacing: .04em;
    flex-shrink: 0;
    min-width:   28px;
}

.beneficio__texto strong {
    display:    block;
    font-size:  var(--t-corpo);
    font-weight: 600;
    color:      var(--txt-claro);
    margin-bottom: 2px;
}
.beneficio__texto span {
    font-size: 14px;
    color:     rgba(237,233,225,.5);
    line-height: 1.5;
}

.sec-corporativo__cta-box {
    background:  var(--bg-escuro-soft);
    border:      1px solid var(--borda-escura);
    border-top:  2px solid var(--ouro);
    padding:     var(--s6);
    display:     flex;
    flex-direction: column;
    gap:         var(--s4);
    align-self:  stretch;
    justify-content: center;
}

.sec-corporativo__cta-titulo { font-size: var(--t-h3); color: var(--txt-claro); line-height: 1.2; }

.sec-corporativo__cta-desc {
    font-size: 14px;
    color:     rgba(237,233,225,.5);
    line-height: 1.6;
    margin: 0;
}

@media (max-width: 720px) {
    .sec-corporativo .grelha-2 { grid-template-columns: 1fr; }
}


/* =============================================================================
   12. MODELO STRATUM DE DESENVOLVIMENTO
   ============================================================================= */

.sec-modelo__intro { max-width: 600px; margin-bottom: var(--s7); }

.etapas-modelo {
    display:               grid;
    grid-template-columns: repeat(5, 1fr);
    gap:                   0;
    position:              relative;
    margin-top:            var(--s6);
}

.etapas-modelo::before {
    content:  '';
    position: absolute;
    top:      32px;
    left:     10%;
    right:    10%;
    height:   1px;
    background: linear-gradient(to right, var(--ouro-borda), var(--ouro), var(--ouro-borda));
    z-index:  0;
}

.etapa-modelo {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    text-align:     center;
    padding:        0 var(--s2);
    position:       relative;
    z-index:        1;
}

.etapa-modelo__num {
    width:           64px;
    height:          64px;
    border:          1.5px solid var(--ouro-borda);
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-family:     var(--fonte-display);
    font-size:       20px;
    font-weight:     700;
    color:           var(--ouro);
    background:      var(--bg-claro);
    margin-bottom:   var(--s4);
    transition:      background var(--ease), border-color var(--ease);
}
.etapa-modelo:hover .etapa-modelo__num { background: var(--ouro-alfa); border-color: var(--ouro); }

.etapa-modelo__titulo { font-family: var(--fonte-display); font-size: 16px; font-weight: 700; margin-bottom: var(--s1); }
.etapa-modelo__desc   { font-size: 12px; color: var(--txt-suave); line-height: 1.5; margin: 0; }

@media (max-width: 720px) {
    .etapas-modelo { grid-template-columns: 1fr 1fr; gap: var(--s5); }
    .etapas-modelo::before { display: none; }
    .etapa-modelo { align-items: flex-start; text-align: left; flex-direction: row; gap: var(--s3); }
    .etapa-modelo__num { width: 48px; height: 48px; font-size: 16px; flex-shrink: 0; margin-bottom: 0; }
    .etapas-modelo .etapa-modelo:last-child { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
    .etapas-modelo { grid-template-columns: 1fr; }
    .etapas-modelo .etapa-modelo:last-child { grid-column: auto; }
}


/* =============================================================================
   13. NÚMEROS / ESTATÍSTICAS
   ============================================================================= */

.sec-numeros {
    background: var(--bg-escuro);
    padding:    var(--s7) 0;
    position:   relative;
}
.sec-numeros::before,
.sec-numeros::after {
    content:  '';
    position: absolute;
    left: 0; right: 0;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--borda-escura), transparent);
}
.sec-numeros::before { top: 0; }
.sec-numeros::after  { bottom: 0; }

.numeros-grelha {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 0;
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 var(--pad-h);
}

.numero-item {
    padding:      var(--s5);
    text-align:   center;
    border-right: 1px solid var(--borda-escura);
    display:      flex;
    flex-direction: column;
    align-items:  center;
    gap:          var(--s2);
}
.numero-item:last-child { border-right: none; }

.numero-item__valor {
    font-family:   var(--fonte-display);
    font-size:     var(--t-h1);
    font-weight:   700;
    color:         var(--txt-claro);
    line-height:   1;
    letter-spacing: -.04em;
}
.numero-item__rotulo {
    font-size:   12px;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
    color:       rgba(237,233,225,.35);
}

@media (max-width: 640px) {
    .numeros-grelha { grid-template-columns: repeat(2,1fr); }
    .numero-item:nth-child(2) { border-right: none; }
    .numero-item { border-bottom: 1px solid var(--borda-escura); }
    .numero-item:nth-child(3),
    .numero-item:nth-child(4) { border-bottom: none; }
}


/* =============================================================================
   14. EVENTOS
   ============================================================================= */

.cards-eventos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px,1fr));
    gap: var(--s4);
    margin-top: var(--s6);
}

.card-evento {
    background: var(--bg-branco);
    border:     1px solid var(--borda);
    display:    flex;
    gap:        var(--s4);
    padding:    var(--s4);
    transition: box-shadow var(--ease), transform var(--ease);
    text-decoration: none;
    color: inherit;
}
.card-evento:hover { box-shadow: var(--sombra-hover); transform: translateY(-2px); }

.card-evento__data { flex-shrink: 0; width: 56px; display: flex; flex-direction: column; align-items: center; padding-top: 4px; }
.card-evento__dia  { font-family: var(--fonte-display); font-size: 36px; font-weight: 700; color: var(--ouro); line-height: 1; letter-spacing: -.02em; }
.card-evento__mes  { font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--txt-suave); }

.card-evento__info { flex: 1; }
.card-evento__titulo { font-family: var(--fonte-display); font-size: 18px; font-weight: 700; color: var(--txt-escuro); line-height: 1.3; margin-bottom: var(--s2); }
.card-evento__meta   { font-size: 13px; color: var(--txt-medio); display: flex; flex-wrap: wrap; gap: var(--s2); }

.eventos-placeholder {
    text-align: center;
    padding:    var(--s7) var(--s4);
    border:     2px dashed var(--borda);
    color:      var(--txt-suave);
}


/* =============================================================================
   15. CTA FINAL
   ============================================================================= */

.sec-cta-final {
    background: var(--bg-escuro);
    text-align: center;
    position:   relative;
    overflow:   hidden;
}
.sec-cta-final::before {
    content:    '';
    position:   absolute;
    inset:      0;
    background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(184,147,60,.06) 0%, transparent 70%);
    pointer-events: none;
}
.sec-cta-final::after {
    content:  '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--ouro-borda), transparent);
}

.sec-cta-final__inner { position: relative; z-index: 1; max-width: 680px; margin: 0 auto; }

.sec-cta-final__titulo { font-size: var(--t-h1); line-height: 1.08; color: var(--txt-claro); }
.sec-cta-final__subtitulo { font-size: var(--t-corpo-lg); color: rgba(237,233,225,.55); line-height: 1.65; margin-top: var(--s3); }

.sec-cta-final__contacto {
    margin-top:  var(--s6);
    padding-top: var(--s5);
    border-top:  1px solid var(--borda-escura);
    font-size:   13px;
    color:       rgba(237,233,225,.28);
    letter-spacing: .04em;
}
.sec-cta-final__contacto a { color: rgba(237,233,225,.5); transition: color var(--ease); }
.sec-cta-final__contacto a:hover { color: var(--ouro-claro); }



/* =============================================================================
   17. PÁGINA SOBRE NÓS
   ============================================================================= */

.sobre-declaracao {
    font-family:   var(--fonte-display);
    font-size:     var(--t-h2);
    font-weight:   400;
    font-style:    italic;
    line-height:   1.3;
    color:         var(--txt-escuro);
    border-left:   3px solid var(--ouro);
    padding-left:  var(--s5);
    max-width:     780px;
}

.mvv-grelha {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   var(--s4);
    margin-top:            var(--s6);
}
.mvv-card {
    padding:     var(--s5);
    border:      1px solid var(--borda);
    background:  var(--bg-branco);
    border-top:  3px solid var(--ouro);
}
.mvv-card__rotulo { font-size: 10px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--ouro-texto); margin-bottom: var(--s3); }
.mvv-card__titulo { font-family: var(--fonte-display); font-size: 22px; font-weight: 700; margin-bottom: var(--s3); }
.mvv-card__texto  { font-size: 15px; color: var(--txt-medio); line-height: 1.7; margin: 0; }

.valores-lista    { display: flex; flex-direction: column; gap: 0; margin-top: var(--s5); }
.valor-item {
    display:     grid;
    grid-template-columns: 80px 1fr;
    align-items: start;
    gap:         var(--s4);
    padding:     var(--s4) 0;
    border-bottom: 1px solid var(--borda);
}
.valor-item:first-child { border-top: 1px solid var(--borda); }

.valor-num {
    font-family:   var(--fonte-display);
    font-size:     36px;
    font-weight:   700;
    color:         var(--ouro);
    opacity:       .32;
    line-height:   1;
    letter-spacing: -.02em;
}
.valor-titulo { font-family: var(--fonte-display); font-size: 20px; font-weight: 700; margin-bottom: var(--s2); }
.valor-desc   { font-size: 15px; color: var(--txt-medio); line-height: 1.65; margin: 0; }

@media (max-width: 720px) { .mvv-grelha { grid-template-columns: 1fr; } }


/* =============================================================================
   18. CATÁLOGO DE FORMAÇÕES
   ============================================================================= */

.filtros-barra { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s5); }

.filtro-btn {
    padding:       7px 18px;
    font-size:     12px;
    font-weight:   600;
    letter-spacing: .05em;
    border:        1.5px solid var(--borda);
    border-radius: 100px;
    background:    var(--bg-branco);
    color:         var(--txt-medio);
    cursor:        pointer;
    transition:    background var(--ease), color var(--ease), border-color var(--ease);
    white-space:   nowrap;
}
.filtro-btn:hover { background: var(--bg-claro-alt); border-color: var(--borda-hover); color: var(--txt-escuro); }
.filtro-btn:focus,
.filtro-btn:active {
    background: var(--bg-claro-alt);
    border-color: var(--ouro-borda);
    color: var(--txt-escuro);
}
.filtro-btn:focus { outline: none; }
.filtro-btn:focus-visible {
    outline: 2px solid var(--ouro);
    outline-offset: 3px;
}
.filtro-btn.activo { background: var(--txt-escuro); color: var(--txt-claro); border-color: var(--txt-escuro); }

.catalogo-grelha {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(300px,1fr));
    gap:                   var(--s4);
}

.card-curso {
    background:    var(--bg-branco);
    border:        1px solid var(--borda);
    border-top:    2px solid var(--ouro-borda);
    padding:       var(--s5);
    display:       flex;
    flex-direction: column;
    gap:           var(--s2);
    transition:    box-shadow var(--ease), border-color var(--ease), border-top-color var(--ease), transform var(--ease);
    text-decoration: none;
    color:         inherit;
}
.card-curso:hover { box-shadow: var(--sombra-hover); border-color: var(--ouro-borda); border-top-color: var(--ouro); transform: translateY(-2px); }
.card-curso[data-hidden] { display: none; }

.card-curso__area   { font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ouro-texto); }
.card-curso__titulo { font-family: var(--fonte-display); font-size: 18px; font-weight: 700; color: var(--txt-escuro); line-height: 1.25; }
.card-curso__desc   { font-size: 14px; color: var(--txt-medio); line-height: 1.6; flex: 1; margin: 0; }

.card-curso__footer {
    display:     flex;
    align-items: center;
    justify-content: space-between;
    padding-top: var(--s3);
    border-top:  1px solid var(--borda);
    margin-top:  var(--s1);
}

.card-curso__ver-link {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ouro-texto);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: color var(--ease);
}
.card-curso__ver-link .seta {
    display: inline-block;
    transition: transform var(--ease);
}
.card-curso:hover .card-curso__ver-link .seta {
    transform: translateX(4px);
}

.sem-resultados { grid-column: 1/-1; text-align: center; padding: var(--s7) var(--s4); color: var(--txt-suave); }


/* =============================================================================
   19. SINGLE CURSO
   ============================================================================= */

.curso-layout {
    display:               grid;
    grid-template-columns: 1fr 340px;
    gap:                   var(--s7);
    align-items:           start;
    /* Topo mais compacto (--s6) — o hero já tem padding inferior generoso;
       o fundo mantém-se folgado (--s7) antes da secção de relacionados. */
    padding:               var(--s6) var(--pad-h) var(--s7);
    max-width:             var(--max-w);
    margin:                0 auto;
}

.curso-corpo h2 {
    font-size:   var(--t-h3);
    margin:      var(--s6) 0 var(--s3);
    padding-top: var(--s5);
    border-top:  1px solid var(--borda);
}
.curso-corpo h2:first-child { margin-top: 0; border-top: none; padding-top: 0; }
.curso-corpo ul { list-style: disc; padding-left: var(--s4); display: flex; flex-direction: column; gap: var(--s1); }
.curso-corpo ul li { font-size: 15px; color: var(--txt-medio); line-height: 1.6; }
.curso-corpo ul li::marker { color: var(--ouro); }

.curso-ficha {
    position:  sticky;
    top:       calc(72px + var(--s5));
    background: var(--bg-branco);
    border:     1px solid var(--borda);
    border-top: 3px solid var(--ouro);
    padding:    var(--s5);
}
.curso-ficha__titulo { font-family: var(--fonte-display); font-size: 18px; font-weight: 700; margin-bottom: var(--s4); padding-bottom: var(--s3); border-bottom: 1px solid var(--borda); }
.curso-ficha__campo  { display: flex; flex-direction: column; gap: 2px; margin-bottom: var(--s3); }
.curso-ficha__campo:last-of-type { margin-bottom: var(--s5); }
.curso-ficha__label  { font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--txt-suave); }
.curso-ficha__valor  { font-size: 15px; font-weight: 500; color: var(--txt-escuro); }
.curso-ficha__acoes  { display: flex; flex-direction: column; gap: var(--s2); margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--borda); }
.curso-ficha__acoes .btn { justify-content: center; }

@media (max-width: 840px) {
    .curso-layout { grid-template-columns: 1fr; padding: var(--s5) var(--pad-h); }
    .curso-ficha  { position: static; }
}

/* --- Plano por módulos — acordeão nativo <details>, premium e acessível --- */
.curso-modulos { display: flex; flex-direction: column; gap: var(--s2); margin-bottom: var(--s5); }

.curso-modulo {
    border: 1px solid var(--borda);
    background: var(--bg-branco);
    transition: border-color var(--ease), box-shadow var(--ease);
}
.curso-modulo[open] { border-color: var(--ouro-borda); box-shadow: 0 4px 18px rgba(0,0,0,.05); }

.curso-modulo__cab {
    display: flex;
    align-items: center;
    gap: var(--s3);
    padding: 16px 20px;
    cursor: pointer;
    list-style: none;
    -webkit-user-select: none;
    user-select: none;
}
.curso-modulo__cab::-webkit-details-marker { display: none; }
.curso-modulo__cab:hover .curso-modulo__titulo { color: var(--ouro-texto); }

.curso-modulo__codigo {
    flex-shrink: 0;
    min-width: 30px;
    font-family: var(--fonte-display);
    font-weight: 700;
    font-size: 15px;
    color: var(--ouro-texto);
}
.curso-modulo__titulo {
    flex: 1;
    font-size: 16px;
    font-weight: 600;
    color: var(--txt-escuro);
    line-height: 1.4;
    transition: color var(--ease);
}
.curso-modulo__horas {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--ouro-texto);
    background: var(--ouro-alfa);
    border: 1px solid var(--ouro-borda);
    border-radius: 100px;
    padding: 3px 10px;
}
.curso-modulo__seta {
    flex-shrink: 0;
    width: 9px; height: 9px;
    border-right: 2px solid var(--txt-suave);
    border-bottom: 2px solid var(--txt-suave);
    transform: rotate(45deg);
    transition: transform var(--ease), border-color var(--ease);
}
.curso-modulo[open] .curso-modulo__seta { transform: rotate(-135deg); border-color: var(--ouro); }

.curso-corpo ul.curso-modulo__topicos {
    display: block;
    list-style: disc;
    margin: 2px 20px 18px 52px;
    padding-left: 18px;
}
.curso-corpo ul.curso-modulo__topicos li {
    font-size: 14px;
    color: var(--txt-medio);
    line-height: 1.55;
    margin-bottom: 6px;
}
.curso-corpo ul.curso-modulo__topicos li::marker { color: var(--ouro); }

@media (prefers-reduced-motion: reduce) {
    .curso-modulo, .curso-modulo__seta, .curso-modulo__titulo { transition: none; }
}

@media (max-width: 560px) {
    /* Sem flex-wrap: o título quebra em várias linhas, mas o código, o badge de
       horas e a seta mantêm-se alinhados (sem o badge "saltar" para outra linha). */
    .curso-modulo__cab    { gap: var(--s2); padding: 14px 16px; }
    .curso-modulo__codigo { min-width: 26px; font-size: 14px; }
    .curso-modulo__titulo { font-size: 15px; }
    .curso-modulo__horas  { padding: 3px 8px; }
    .curso-corpo ul.curso-modulo__topicos { margin-left: 26px; padding-left: 16px; }
}


/* =============================================================================
   20. FORMULÁRIO DE CONTACTO
   ============================================================================= */

.form-contacto { display: flex; flex-direction: column; gap: var(--s3); }

.campo-grupo { display: flex; flex-direction: column; gap: 6px; }

.campo-grupo label {
    font-size:   12px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color:       var(--txt-medio);
}

.campo-grupo input,
.campo-grupo select {
    width:       100%;
    height:      50px;           /* altura idêntica em todos os campos (alinhamento) */
    padding:     0 16px;
    background:  var(--bg-branco);
    border:      1.5px solid var(--borda);
    color:       var(--txt-escuro);
    font-size:   var(--t-corpo);
    line-height: 47px;           /* 50px - 3px borders */
    transition:  border-color var(--ease), box-shadow var(--ease);
    outline:     none;
    -webkit-appearance: none;
    -moz-appearance:    none;
    appearance:  none;
    border-radius: 0;
}
.campo-grupo input:focus,
.campo-grupo select:focus,
.campo-grupo textarea:focus {
    border-color: var(--ouro);
    box-shadow:   0 0 0 3px var(--ouro-alfa);
}
.campo-grupo textarea {
    width:       100%;
    min-height:  140px;
    padding:     12px 16px;
    background:  var(--bg-branco);
    border:      1.5px solid var(--borda);
    color:       var(--txt-escuro);
    font-size:   var(--t-corpo);
    line-height: 1.5;
    transition:  border-color var(--ease), box-shadow var(--ease);
    outline:     none;
    -webkit-appearance: none;
    -moz-appearance:    none;
    appearance:  none;
    border-radius: 0;
    resize:      vertical;
}

/* Select "Assunto" — mesma caixa dos inputs + seta personalizada dourada.
   appearance:none remove a seta nativa, por isso desenhamos a nossa (SVG). */
.campo-grupo select {
    padding-right:       44px; /* espaço para a seta não sobrepor o texto */
    cursor:              pointer;
    background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23C9A24B' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat:   no-repeat;
    background-position: right 16px center;
    background-size:     14px;
}
/* Opção placeholder ("Seleccionar...") com o mesmo cinza dos placeholders dos inputs */
.campo-grupo select:invalid { color: var(--txt-suave); }
.campo-grupo select option   { color: var(--txt-escuro); }

.form-escuro .campo-grupo input,
.form-escuro .campo-grupo select,
.form-escuro .campo-grupo textarea {
    background-color: rgba(255,255,255,.06); /* background-color (não shorthand) preserva a seta SVG do select */
    border-color: var(--borda-escura);
    color:       var(--txt-claro);
}
.form-escuro .campo-grupo input::placeholder,
.form-escuro .campo-grupo textarea::placeholder { color: rgba(237,233,225,.25); }
.form-escuro .campo-grupo label { color: rgba(237,233,225,.45); }

.campo-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
/* Empilhar os pares mais cedo: em telemóveis grandes/tablets pequenos os campos
   lado a lado ficavam demasiado estreitos. */
@media (max-width: 768px) { .campo-row { grid-template-columns: 1fr; } }

.form-feedback { padding: var(--s3) var(--s4); font-size: 14px; font-weight: 500; }
.form-feedback--sucesso { background: rgba(40,120,60,.12); color: #1a6a30; border-left: 3px solid #2d9a4e; }
.form-feedback--erro    { background: rgba(180,30,30,.08); color: #b42020; border-left: 3px solid #c43030; }

.btn-spinner {
    display: inline-block;
    width: 14px; height: 14px;
    border: 2px solid rgba(255,255,255,.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin .7s linear infinite;
}
/* CRÍTICO: a regra de autor acima (display:inline-block) sobrepõe-se à regra
   user-agent [hidden]{display:none}. Sem esta linha, o atributo hidden NÃO
   esconde o spinner e o botão parece girar para sempre, mesmo após o envio. */
.btn-spinner[hidden] { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }

#form-submit {
    width: auto;
    align-self: flex-start;
    justify-content: center;
}
@media (max-width: 768px) {
    #form-submit {
        width: 100%;
        align-self: stretch;
    }
}

.contacto-layout { display: grid; grid-template-columns: 1fr 380px; gap: var(--s7); align-items: start; }

.contacto-info {
    background:  var(--bg-escuro-soft);
    border:      1px solid var(--borda-escura);
    border-top:  2px solid var(--ouro);
    padding:     var(--s5);
    display:     flex;
    flex-direction: column;
    gap:         var(--s5);
}
.contacto-info__titulo { font-family: var(--fonte-display); font-size: var(--t-h4); color: var(--txt-claro); margin-bottom: var(--s3); }
.contacto-item { display: flex; flex-direction: column; gap: 4px; }
.contacto-item__label { font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ouro); }
.contacto-item__valor { font-size: 15px; color: var(--txt-claro); line-height: 1.5; }
.contacto-item__valor a { color: var(--txt-claro); transition: color var(--ease); }
.contacto-item__valor a:hover { color: var(--ouro-claro); }

.mapa-embed { 
    margin-top: var(--s5); 
    border: 1px solid var(--borda-escura); 
    overflow: hidden; 
}
.mapa-embed iframe { 
    display: block; 
    width: 100%; 
    filter: grayscale(1) contrast(1.1) brightness(0.95);
    transition: filter var(--ease);
}
.mapa-embed iframe:hover {
    filter: grayscale(0.35) contrast(1.05) brightness(0.98);
}

@media (max-width: 840px) {
    .contacto-layout {
        grid-template-columns: 1fr;
        gap: var(--s5);
    }
    .contacto-layout > div {
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
    }
    .contacto-info {
        padding: var(--s3); /* Reduzir de var(--s5) (48px) para 24px no mobile */
        gap: var(--s4);
    }
}


/* =============================================================================
   21. SERVIÇOS
   ============================================================================= */

.servico-bloco { padding: var(--pad-sec) var(--pad-h); }
.servico-bloco:nth-child(even) { background: var(--bg-claro-alt); }

.servico-layout { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s7); align-items: center; }
.servico-bloco:nth-child(even) .servico-layout { direction: rtl; }
.servico-bloco:nth-child(even) .servico-texto, .servico-bloco:nth-child(even) .servico-visual { direction: ltr; }

.servico-visual {
    background:  var(--bg-escuro);
    padding:     var(--s7) var(--s6);
    display:     flex;
    align-items: center;
    justify-content: center;
    min-height:  280px;
    position:    relative;
    overflow:    hidden;
}
.servico-visual::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 70% 70% at 50% 50%, var(--ouro-alfa) 0%, transparent 70%);
}
.servico-visual__icone {
    position: relative;
    z-index:  1;
    font-size: 72px;
    opacity:   .12;
    color:     var(--ouro);
    font-family: var(--fonte-display);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.04em;
}

.servico-lista { margin-top: var(--s4); display: flex; flex-direction: column; gap: var(--s2); }
.servico-lista li { display: flex; gap: var(--s2); font-size: 15px; color: var(--txt-medio); align-items: flex-start; }
.servico-lista li::before { content: '—'; color: var(--ouro); font-weight: 700; flex-shrink: 0; }

@media (max-width: 720px) {
    .servico-layout { grid-template-columns: 1fr; direction: ltr !important; }
    .servico-bloco:nth-child(even) .servico-layout { direction: ltr; }
}


/* =============================================================================
   22. FOOTER
   ============================================================================= */

.site-footer { background: var(--bg-escuro); border-top: 1px solid var(--borda-escura); color: var(--txt-claro); }

.footer__principal {
    padding:     var(--s7) var(--pad-h);
    max-width:   var(--max-w);
    margin:      0 auto;
    display:     grid;
    grid-template-columns: 280px 1fr 1fr 1fr;
    gap:         var(--s6);
}

.footer__marca-nome { font-family: var(--fonte-display); font-size: 20px; font-weight: 700; letter-spacing: .04em; color: var(--txt-claro); margin-bottom: var(--s2); }
.footer__marca-sub  { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: rgba(237,233,225,.52); margin-bottom: var(--s4); }
.footer__mote       { font-family: var(--fonte-display); font-style: italic; font-size: 14px; color: rgba(237,233,225,.42); line-height: 1.6; }

.footer__col-titulo { font-size: 10px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--ouro); margin-bottom: var(--s3); }
.footer__col ul { display: flex; flex-direction: column; gap: var(--s2); }
.footer__col ul li a { font-size: 14px; color: rgba(237,233,225,.62); transition: color var(--ease); line-height: 1.5; }
.footer__col ul li a:hover { color: var(--txt-claro); }

.footer__contacto { display: flex; flex-direction: column; gap: var(--s3); }
.footer__contacto-item { display: flex; flex-direction: column; gap: 2px; }
.footer__contacto-label { font-size: 10px; color: rgba(237,233,225,.46); font-weight: 500; letter-spacing: .1em; text-transform: uppercase; }
.footer__contacto-valor { font-size: 14px; color: rgba(237,233,225,.68); }
.footer__contacto-valor a { color: rgba(237,233,225,.68); transition: color var(--ease); }
.footer__contacto-valor a:hover { color: var(--ouro-claro); }

.footer__rodape {
    border-top: 1px solid var(--borda-escura);
    padding:    var(--s3) var(--pad-h);
    max-width:  var(--max-w);
    margin:     0 auto;
    display:    flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap:  wrap;
    gap:        var(--s3);
}
.footer__copy { font-size: 12px; color: rgba(237,233,225,.40); letter-spacing: .02em; }
.footer__rodape-links { display: flex; gap: var(--s4); }
.footer__rodape-links a { font-size: 12px; color: rgba(237,233,225,.40); transition: color var(--ease); }
.footer__rodape-links a:hover { color: rgba(237,233,225,.70); }

@media (max-width: 960px) {
    .footer__principal { grid-template-columns: 1fr 1fr; gap: var(--s5); }
    .footer__marca     { grid-column: 1 / -1; }
}
@media (max-width: 560px) { 
    .footer__principal { 
        grid-template-columns: 1fr; 
        gap: var(--s4); 
    }
    .footer__col {
        border-bottom: 1px solid var(--borda-escura);
        padding-bottom: var(--s3);
    }
    .footer__col:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }
}


/* =============================================================================
   23. ANIMAÇÕES DE ENTRADA
   ============================================================================= */

.fade-entrada {
    opacity:   0;
    transform: translateY(20px);
    transition: opacity .65s ease, transform .65s ease;
}
.fade-entrada.visivel { opacity: 1; transform: none; }
.fade-entrada:nth-child(1) { transition-delay: 0s; }
.fade-entrada:nth-child(2) { transition-delay: .1s; }
.fade-entrada:nth-child(3) { transition-delay: .18s; }
.fade-entrada:nth-child(4) { transition-delay: .26s; }
.fade-entrada:nth-child(5) { transition-delay: .34s; }

@media (prefers-reduced-motion: reduce) {
    .fade-entrada { opacity: 1; transform: none; transition: none; }
    .hero__scroll-linha { animation: none; }
    .hero__scroll-icone { animation: none; }
    .btn-spinner { animation: none; }
    /* Microinterações sem deslocamento para quem prefere menos movimento
       (a cor/borda continuam a dar feedback). */
    .btn:hover,
    a.barra-id__tag:hover { transform: none; box-shadow: none; }
}


/* =============================================================================
   24. INSIGHTS / BLOG
   ============================================================================= */

.cards-insights {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(300px,1fr));
    gap:                   var(--s4);
}

.card-insight {
    background:    var(--bg-branco);
    border:        1px solid var(--borda);
    display:       flex;
    flex-direction: column;
    transition:    box-shadow var(--ease), transform var(--ease);
    text-decoration: none;
    color:         inherit;
}
.card-insight:hover { box-shadow: var(--sombra-hover); transform: translateY(-3px); }

.card-insight__corpo { padding: var(--s5); flex: 1; display: flex; flex-direction: column; gap: var(--s2); }
.card-insight__categoria { font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ouro-texto); }
.card-insight__titulo    { font-family: var(--fonte-display); font-size: 20px; font-weight: 700; line-height: 1.25; flex: 1; }
.card-insight__excerpt   { font-size: 14px; color: var(--txt-medio); line-height: 1.65; margin: 0; }

.card-insight__meta {
    padding:     var(--s3) var(--s5);
    border-top:  1px solid var(--borda);
    display:     flex;
    align-items: center;
    justify-content: space-between;
    font-size:   12px;
    color:       var(--txt-suave);
}


/* =============================================================================
   25. UTILITÁRIOS E MICRO-COMPONENTES
   ============================================================================= */

.breadcrumb { font-size: 13px; color: rgba(237,233,225,.32); display: flex; gap: 8px; align-items: center; margin-bottom: var(--s3); }
.breadcrumb a { color: rgba(237,233,225,.32); transition: color var(--ease); }
.breadcrumb a:hover { color: var(--ouro-claro); }

.badge {
    display:     inline-block;
    padding:     4px 12px;
    font-size:   10px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    border:      1px solid;
    border-radius: 2px;
}
/* Badges em fundo claro */
.badge--presencial { color: #1a6a30; border-color: rgba(26,106,48,.3); background: rgba(26,106,48,.08); }
.badge--online     { color: #1a4a8a; border-color: rgba(26,74,138,.3); background: rgba(26,74,138,.08); }
.badge--blended    { color: #6a3a1a; border-color: rgba(106,58,26,.3); background: rgba(106,58,26,.08); }

/* Badges em fundo escuro (secção de eventos) */
.secao--escuro .badge--presencial,
.sec-cta-final .badge--presencial  { color: #5abf7e; border-color: rgba(90,191,126,.35); background: rgba(90,191,126,.1); }
.secao--escuro .badge--online,
.sec-cta-final .badge--online      { color: #6baee8; border-color: rgba(107,174,232,.35); background: rgba(107,174,232,.1); }
.secao--escuro .badge--blended,
.sec-cta-final .badge--blended     { color: #e8a46b; border-color: rgba(232,164,107,.35); background: rgba(232,164,107,.1); }

.texto-lead { font-size: var(--t-corpo-lg); line-height: 1.65; color: var(--txt-medio); }
.linha-ouro { width: 100%; height: 1px; background: linear-gradient(to right, var(--ouro-borda), transparent); margin: var(--s5) 0; }

.nota-disponibilidade { font-size: 13px; color: var(--txt-suave); font-style: italic; text-align: center; margin-top: var(--s5); }

/* Skip link — acessibilidade */
.skip-link {
    position: absolute;
    top: -40px;
    left: var(--s4);
    background: var(--ouro);
    color: #fff;
    padding: 8px 16px;
    z-index: 9999;
    font-size: 13px;
    font-weight: 600;
    transition: top var(--ease);
}
.skip-link:focus { top: var(--s4); }


/* =============================================================================
   26. OVERRIDES ASTRA — neutralizar layout do tema pai
   ============================================================================= */

/* O Astra injeta ast-hfb-header no <body>, por isso não podemos usar esse selector aqui.
   Como o nosso header.php substitui completamente o do Astra, estes elementos nunca são gerados
   — mas mantemos os seletores genéricos para segurança. */
#masthead,
#colophon,
.ast-hfb-footer,
.ast-above-header-wrap,
.ast-below-header-wrap,
.ast-footer-copyright,
.ast-primary-header-bar {
    display: none !important;
}

.ast-page-builder-template .entry-content,
.hfeed .site,
.ast-separate-container .ast-article-single,
body.page .entry-content,
.site-content,
.ast-container,
#primary,
#content,
.entry-content,
.page-content {
    padding:   0 !important;
    margin:    0 !important;
    max-width: none !important;
    width:     100% !important;
}

body { padding-top: 0 !important; margin-top: 0 !important; }
.site { padding-top: 0 !important; }


/* =============================================================================
   27. REDESIGN v2.1 — HERO COM IMAGEM REAL
   ============================================================================= */

/* Esconder pseudo-elementos antigos do hero (substituídos pelo overlay) */
.hero::before, .hero::after { display: none; }

/* Camada de imagem de fundo + parallax */
.hero__fundo {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background: var(--bg-escuro); /* fallback se imagem não carregar */
}

.hero__img {
    width: 100%;
    height: 110%; /* sobra para o parallax não revelar bordas */
    object-fit: cover;
    object-position: center center;
    display: block;
    transform: translateY(0) scale(1.05);
    filter: brightness(.65) saturate(.8);
    will-change: transform;
}

/* Overlay gradiente cinematográfico */
.hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(105deg,
            rgba(9,9,13,.92) 0%,
            rgba(9,9,13,.70) 38%,
            rgba(9,9,13,.35) 65%,
            rgba(9,9,13,.72) 100%),
        radial-gradient(ellipse 60% 80% at 20% 50%, rgba(184,147,60,.06) 0%, transparent 60%);
    pointer-events: none;
}

/* Conteúdo hero: texto esquerda + stats direita */
.hero__inner {
    position:  relative;
    z-index:   2;
    display:   grid;
    grid-template-columns: 1fr auto;
    gap:       var(--s6);
    align-items: center;
    padding:   clamp(72px, 9vw, 120px) var(--pad-h) clamp(56px, 7vw, 88px);
    max-width: var(--max-w);
    margin:    0 auto;
    width:     100%;
}

/* Animação de entrada do hero (sem necessidade de JS) */
@keyframes heroEntrar {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
}

.hero-anim {
    animation: heroEntrar .85s cubic-bezier(.25,.46,.45,.94) var(--delay, 0s) both;
}

@media (prefers-reduced-motion: reduce) {
    .hero-anim { animation: none; opacity: 1; transform: none; }
}

/* Kicker — linha de categorias */
.hero__kicker {
    display:    inline-flex;
    align-items: center;
    gap:        10px;
    font-size:  var(--t-label);
    font-family: var(--fonte-corpo);
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase;
    color:      var(--ouro-claro);
    margin-bottom: var(--s3);
}

.hero__kicker::before {
    content: '';
    display: block;
    width:   32px;
    height:  1px;
    background: var(--ouro);
}

/* Título principal */
.hero__titulo {
    font-family: var(--fonte-display);
    font-size:   clamp(38px, 5vw, 64px);
    font-weight: 700;
    line-height: 1.0;
    color:       var(--txt-claro);
    margin-bottom: var(--s4);
    letter-spacing: -.02em;
}

.hero__titulo em {
    font-style: italic;
    color:      var(--ouro-claro);
    font-weight: 400;
}

/* Descrição */
.hero__desc {
    font-size:   clamp(15px, 1.3vw, 18px);
    color:       rgba(237,233,225,.75);
    line-height: 1.78;
    max-width:   560px;
    margin-bottom: var(--s5);
}

/* Botões de acção */
.hero__acoes {
    display: flex;
    gap:     var(--s3);
    flex-wrap: wrap;
    align-items: center;
}

/* Painel de estatísticas no hero (canto direito) */
.hero__numeros {
    display:   grid;
    grid-template-columns: 1fr 1fr;
    gap:       1px;
    background: rgba(237,233,225,.07);
    border:    1px solid rgba(237,233,225,.07);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    min-width: 220px;
}

.hero__num-item {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    padding:        20px var(--s3);
    background:     rgba(9,9,13,.48);
    gap:            4px;
    text-align:     center;
}

.hero__num-val {
    font-family: var(--fonte-display);
    font-size:   clamp(22px, 2.2vw, 32px);
    font-weight: 700;
    color:       var(--ouro-claro);
    line-height: 1;
}

.hero__num-label {
    font-size:   10px;
    color:       rgba(237,233,225,.5);
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 500;
}

/* Scroll indicator — badge premium dourado */
.hero__scroll {
    position:  absolute;
    bottom:    var(--s5);
    left:      50%;
    transform: translateX(-50%);
    z-index:   3;
    display:   flex;
    flex-direction: column;
    align-items: center;
    gap:       var(--s1);
    color:     var(--ouro-claro);
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    background: rgba(184, 147, 60, 0.05);
    border: 1px solid var(--ouro-borda);
    border-radius: 100px;
    cursor: pointer;
    padding: 10px 24px;
    transition: color var(--ease), background var(--ease), border-color var(--ease);
    animation: heroEntrar .6s ease 1.4s both;
}

.hero__scroll:hover {
    color: var(--ouro-claro);
    background: var(--ouro-alfa);
    border-color: var(--ouro-claro);
}
.hero__scroll:focus {
    color: var(--ouro-claro);
    background: rgba(184, 147, 60, 0.05);
    outline: none;
}
.hero__scroll:focus-visible {
    outline: 2px solid var(--ouro);
    outline-offset: 2px;
}
.hero__scroll:active {
    color: var(--ouro-claro);
    background: var(--ouro-alfa);
}

.hero__scroll-icone {
    display: block;
    animation: scrollDescer 1.8s ease-in-out infinite;
}

@keyframes scrollDescer {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(6px); }
}


/* =============================================================================
   28. BARRA DE IDENTIDADE (tags de áreas)
   ============================================================================= */

.barra-id {
    background:  var(--bg-escuro-soft);
    border-top:  1px solid var(--borda-escura);
    border-bottom: 1px solid var(--borda-escura);
    overflow:    hidden;
    padding:     var(--s3) 0;
}

.barra-id__inner {
    display:      flex;
    gap:          var(--s3);
    padding-left: var(--pad-h);
    overflow-x:   auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

/* Spacer direito: corrige o bug de browsers que ignoram padding-right
   em flex containers com overflow-x: auto. */
.barra-id__inner::after {
    content:   '';
    flex-shrink: 0;
    min-width: var(--pad-h);
}

.barra-id__inner::-webkit-scrollbar { display: none; }

.barra-id__tag {
    white-space:    nowrap;
    font-size:      var(--t-label);
    letter-spacing: .12em;
    text-transform: uppercase;
    color:          rgba(237,233,225,.4);
    padding:        6px var(--s3);
    border:         1px solid rgba(237,233,225,.08);
    border-radius:  100px;
    flex-shrink:    0;
}


/* =============================================================================
   29. SOBRE / POSICIONAMENTO — split
   ============================================================================= */

.sobre-split {
    display:   grid;
    grid-template-columns: 1fr 1fr;
    gap:       var(--s8);
    align-items: start;
}

.pilar-item {
    display:  flex;
    gap:      var(--s4);
    padding:  var(--s4) 0;
    border-bottom: 1px solid var(--borda);
}

.pilar-item:first-child { border-top: 1px solid var(--borda); }

.pilar-item__num {
    font-family: var(--fonte-display);
    font-size:   var(--t-h3);
    color:       var(--ouro);
    font-weight: 700;
    line-height: 1;
    flex-shrink: 0;
    min-width:   48px;
}

.pilar-item__corpo { display: flex; flex-direction: column; gap: 6px; }

.pilar-item__titulo {
    font-family: var(--fonte-display);
    font-size:   18px;
    font-weight: 700;
    color:       var(--txt-escuro);
}

.pilar-item__desc {
    font-size:  14px;
    color:      var(--txt-medio);
    line-height: 1.65;
    margin: 0;
}


/* =============================================================================
   30. GRELHA DE 13 ÁREAS DE FORMAÇÃO
   ============================================================================= */

.grelha-areas {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
    background: rgba(0,0,0,.05);
}

.area-card {
    position:   relative;
    display:    flex;
    flex-direction: column;
    gap:        var(--s2);
    padding:    var(--s5) var(--s4);
    min-height: 220px;
    color:      var(--txt-claro);
    text-decoration: none;
    overflow:   hidden;
    transition: transform .3s ease, box-shadow .3s ease;
    cursor:     pointer;
}

/* Linha dourada no topo no hover */
.area-card::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--ouro), var(--ouro-claro));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s ease;
}

.area-card:hover::after    { transform: scaleX(1); }
.area-card:hover           { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(0,0,0,.35); }
.area-card:focus-visible   { outline: 2px solid var(--ouro); outline-offset: 2px; }

/* Ícone SVG */
.area-card__icone {
    width:  40px;
    height: 40px;
    color:  var(--ouro);
    margin-bottom: var(--s1);
    flex-shrink: 0;
}

.area-card__icone svg { width: 100%; height: 100%; }

.area-card__titulo {
    font-family: var(--fonte-display);
    font-size:   clamp(15px, 1.2vw, 18px);
    font-weight: 700;
    color:       var(--txt-claro);
    line-height: 1.2;
}

.area-card__desc {
    font-size:  13px;
    color:      rgba(237,233,225,.55);
    line-height: 1.65;
    flex: 1;
    margin: 0;
}

.area-card__ver {
    font-size:   13px;
    color:       var(--ouro);
    font-weight: 600;
    margin-top:  auto;
    display:     block;
    opacity:     0;
    transform:   translateY(6px);
    transition:  opacity .25s, transform .25s;
}

.area-card:hover .area-card__ver {
    opacity: 1;
    transform: translateY(0);
}

/* Cores únicas por área */
.area--azul-escuro  { background: linear-gradient(150deg, #0e1726 0%, #080c14 100%); }
.area--verde-escuro { background: linear-gradient(150deg, #11211b 0%, #08110e 100%); }
.area--bordaux      { background: linear-gradient(150deg, #2a1618 0%, #170b0c 100%); }
.area--violeta      { background: linear-gradient(150deg, #1c1f24 0%, #101215 100%); }
.area--laranja      { background: linear-gradient(150deg, #262423 0%, #151312 100%); }
.area--ciano        { background: linear-gradient(150deg, #0e1726 0%, #080c14 100%); }
.area--petroleo     { background: linear-gradient(150deg, #11211b 0%, #08110e 100%); }
.area--areia        { background: linear-gradient(150deg, #262423 0%, #151312 100%); }
.area--lima         { background: linear-gradient(150deg, #1c1f24 0%, #101215 100%); }
.area--ouro-escuro  { background: linear-gradient(150deg, #2a1618 0%, #170b0c 100%); }
.area--coral        { background: linear-gradient(150deg, #262423 0%, #151312 100%); }
.area--cinza-azul   { background: linear-gradient(150deg, #0e1726 0%, #080c14 100%); }
.area--noite        { background: linear-gradient(150deg, #1c1f24 0%, #101215 100%); }


/* =============================================================================
   31. SOLUÇÕES CORPORATIVAS — SPLIT IMAGEM + TEXTO
   ============================================================================= */

.sec-corp {
    background: var(--bg-claro-alt);
}

.corp-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap:     var(--s8);
    align-items: center;
}

.corp-split__media {
    position: relative;
    border-radius: 4px;
    overflow: hidden;
    aspect-ratio: 4/3;
    box-shadow: 0 24px 64px rgba(0,0,0,.18);
}

.corp-split__media img {
    width:  100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .6s ease;
}

.corp-split:hover .corp-split__media img {
    transform: scale(1.04);
}

.corp-split__media-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(9,9,13,.55) 100%);
    pointer-events: none;
}

.corp-split__badge {
    position:   absolute;
    bottom:     var(--s4);
    left:       var(--s4);
    display:    flex;
    align-items: center;
    gap:        var(--s2);
    background: var(--ouro);
    color:      var(--bg-escuro);
    font-size:  12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding:    8px 14px;
    border-radius: 2px;
}

.corp-split__badge strong {
    font-size: 13px;
}

/* Lista de benefícios com check dourado */
.lista-check {
    display: flex;
    flex-direction: column;
    gap: var(--s2);
    margin: 0;
    padding: 0;
}

.lista-check__item {
    display:  flex;
    gap:      var(--s2);
    align-items: flex-start;
    font-size: 15px;
    color:    var(--txt-escuro);
    line-height: 1.6;
}

.lista-check__icone {
    display:    flex;
    align-items: center;
    justify-content: center;
    width:      22px;
    height:     22px;
    border-radius: 50%;
    background: var(--ouro);
    color:      #fff;
    flex-shrink: 0;
    margin-top: 2px;
}

.lista-check__icone svg { width: 10px; height: 10px; }


/* =============================================================================
   32. PORQUE STRATUM — DIFERENCIAIS
   ============================================================================= */

.diff-card {
    display:  flex;
    flex-direction: column;
    gap:      var(--s3);
    padding:  var(--s5) var(--s4);
    background: var(--bg-branco);
    border:   1px solid var(--borda);
    border-top: 3px solid transparent;
    transition: border-color var(--ease), box-shadow var(--ease), transform var(--ease);
    text-align: center;
    align-items: center;
}

.diff-card:hover {
    border-top-color: var(--ouro);
    box-shadow: var(--sombra-hover);
    transform: translateY(-4px);
}

.diff-card__icone {
    width:  56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ouro-alfa);
    border-radius: 50%;
    color: var(--ouro);
    flex-shrink: 0;
}

.diff-card__icone svg { width: 28px; height: 28px; }

.diff-card__titulo {
    font-family: var(--fonte-display);
    font-size:   var(--t-h4);
    font-weight: 700;
    color:       var(--txt-escuro);
}

.diff-card__desc {
    font-size:  14px;
    color:      var(--txt-medio);
    line-height: 1.7;
    margin: 0;
}


/* =============================================================================
   33. SECÇÃO CTA FINAL — IMAGEM DE FUNDO A FUNDO INTEIRO
   ============================================================================= */

.sec-cta-final {
    position: relative;
    min-height: 500px;
    display:    flex;
    align-items: center;
    overflow:   hidden;
    background: var(--bg-escuro);
}

.sec-cta-final__fundo {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.sec-cta-final__fundo img {
    width:  100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(.5) saturate(.7);
}

.sec-cta-final__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(9,9,13,.9) 0%, rgba(9,9,13,.6) 50%, rgba(9,9,13,.85) 100%);
    z-index: 1;
    pointer-events: none;
}

.sec-cta-final__conteudo {
    position:   relative;
    z-index:    2;
    text-align: center;
    padding-top: var(--s8);
    padding-bottom: var(--s8);
}

.sec-cta-final__titulo {
    font-family: var(--fonte-display);
    font-size:   var(--t-h1);
    font-weight: 700;
    color:       var(--txt-claro);
    line-height: 1.1;
    margin-bottom: var(--s4);
}

.sec-cta-final__desc {
    font-size:   var(--t-corpo-lg);
    color:       rgba(237,233,225,.7);
    line-height: 1.7;
    margin-bottom: 0;
}


/* =============================================================================
   34. BOTÕES ADICIONAIS
   ============================================================================= */

/* Contorno claro — para fundos escuros */
.btn--contorno-claro {
    background: transparent;
    color:      var(--txt-claro);
    border:     1.5px solid rgba(237,233,225,.4);
}

.btn--contorno-claro:hover {
    border-color: var(--ouro-claro);
    color:        var(--ouro-claro);
    background:   rgba(184,147,60,.06);
}
.btn--contorno-claro:focus,
.btn--contorno-claro:active,
.btn--contorno-claro:visited {
    color: var(--txt-claro);
    background: transparent;
    border-color: rgba(237,233,225,.4);
}
.btn--contorno-claro:focus-visible {
    outline: 2px solid var(--ouro);
    outline-offset: 3px;
    color: var(--txt-claro);
}

/* Grande — para CTAs principais */
.btn--grande {
    padding:   16px 32px;
    font-size: 16px;
}


/* =============================================================================
   35. RESPONSIVE — MOBILE / TABLET
   ============================================================================= */

@media (max-width: 1024px) {
    .grelha-areas { grid-template-columns: repeat(3, 1fr); }
    .hero__inner   { grid-template-columns: 1fr; }
    .hero__numeros {
        grid-template-columns: repeat(4, 1fr);
        min-width: 0;
        width: 100%;
    }
    .sobre-split { grid-template-columns: 1fr; gap: var(--s6); }
    .corp-split  { grid-template-columns: 1fr; }
    .corp-split__media { aspect-ratio: 16/9; }
}

@media (max-width: 900px) {
    .grelha-2 {
        grid-template-columns: 1fr;
        gap: var(--s5) !important;
    }
}

@media (max-width: 768px) {
    .grelha-areas { grid-template-columns: repeat(2, 1fr); }
    .hero__numeros {
        grid-template-columns: repeat(2, 1fr);
    }
    .area-card { min-height: 180px; padding: var(--s4) var(--s3); }
    .sec-cta-final__titulo { font-size: clamp(28px, 7vw, 44px); }
    .barra-id__inner { gap: var(--s2); }
}

@media (max-width: 480px) {
    .hero__acoes { flex-direction: column; align-items: flex-start; }
    .hero__acoes .btn { width: 100%; justify-content: center; }
    .grelha-areas { grid-template-columns: 1fr; }
}


/* =============================================================================
   36. UTILITÁRIOS GLOBAIS ADICIONAIS
   ============================================================================= */

/* Título de secção */
.titulo-sec {
    font-family:   var(--fonte-display);
    font-size:     var(--t-h2);
    font-weight:   700;
    line-height:   1.1;
    color:         var(--txt-escuro);
    margin-bottom: var(--s5);
    letter-spacing: -.015em;
}

/* Itálico dourado para palavras em destaque nos títulos */
.acento-ouro {
    color:      var(--ouro);
    font-style: italic;
    font-weight: 400;
}

/* Cabeçalho de secção: texto à esquerda + botão à direita */
.sec-cabecalho {
    display:         flex;
    align-items:     flex-end;
    justify-content: space-between;
    gap:             var(--s5);
    margin-bottom:   var(--s7);
    flex-wrap:       wrap;
}

.sec-cabecalho .titulo-sec { margin-bottom: 0; }

/* Contentor centrado para secções sem layout de colunas */
.contentor--centro {
    max-width:  900px;
    margin:     0 auto;
    text-align: center;
}

.contentor--centro .titulo-sec { margin-bottom: var(--s4); }

/* Texto de corpo genérico */
.texto-corpo {
    font-size:   var(--t-corpo);
    color:       var(--txt-medio);
    line-height: 1.78;
    margin:      0;
}

/* Sobre-split layout */
.sobre-split__pilares {
    display: flex;
    flex-direction: column;
}

/* Responsive para utilitários */
@media (max-width: 768px) {
    .sec-cabecalho { flex-direction: column; align-items: flex-start; }
    .grelha-4 { grid-template-columns: repeat(2,1fr); }
    .grelha-3 { grid-template-columns: 1fr; }
    .titulo-sec { font-size: clamp(24px, 6vw, 36px); }
    .corp-split, .sobre-split { gap: var(--s5); }
}


/* =============================================================================
   37. EVENTO CARDS — design dark section
   ============================================================================= */

.evento-card {
    display:   flex;
    gap:       var(--s4);
    padding:   var(--s4) var(--s5);
    background: rgba(255,255,255,.04);
    border:    1px solid rgba(255,255,255,.07);
    border-left: 3px solid var(--ouro);
    transition: background var(--ease), border-color var(--ease), transform var(--ease);
}

.evento-card:hover {
    background: rgba(255,255,255,.07);
    transform:  translateY(-2px);
}

/* Data: caixa numérica à esquerda */
.evento-card__data {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    justify-content: center;
    min-width:      56px;
    padding:        var(--s2) var(--s3);
    background:     var(--ouro);
    color:          var(--bg-escuro);
    flex-shrink:    0;
    text-align:     center;
    line-height:    1;
}

.evento-card__dia {
    font-family: var(--fonte-display);
    font-size:   28px;
    font-weight: 700;
    display:     block;
}

.evento-card__mes {
    font-size:   10px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    display:     block;
    margin-top:  2px;
}

/* Corpo do card */
.evento-card__corpo {
    display:        flex;
    flex-direction: column;
    gap:            var(--s2);
    flex: 1;
    min-width: 0;
}

.evento-card__titulo {
    font-family: var(--fonte-display);
    font-size:   var(--t-h4);
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
}

.evento-card__titulo a {
    color: var(--txt-claro);
    text-decoration: none;
    transition: color var(--ease);
}

.evento-card__titulo a:hover { color: var(--ouro-claro); }

.evento-card__local {
    font-size: 13px;
    color:     rgba(237,233,225,.5);
    margin: 0;
}

.evento-card__cta {
    font-size:   13px;
    font-weight: 600;
    color:       var(--ouro);
    text-decoration: none;
    margin-top:  auto;
    display:     inline-block;
    transition:  color var(--ease);
}

.evento-card__cta:hover { color: var(--ouro-claro); }

/* Evento card em fundo claro (página de eventos) */
.secao--claro .evento-card,
.secao--branco .evento-card {
    background: var(--bg-branco);
    border-color: var(--borda);
    border-left-color: var(--ouro);
    box-shadow: var(--sombra-card);
}

.secao--claro .evento-card__titulo a,
.secao--branco .evento-card__titulo a { color: var(--txt-escuro); }

.secao--claro .evento-card__local,
.secao--branco .evento-card__local { color: var(--txt-medio); }


/* =============================================================================
   38. TESTEMUNHOS
   ============================================================================= */

.sec-testemunhos { background: var(--bg-claro-alt); }

.testemunho-card {
    background:  var(--bg-branco);
    border:      1px solid var(--borda);
    padding:     var(--s5) var(--s5) var(--s4);
    position:    relative;
    margin: 0;
    transition:  box-shadow var(--ease), transform var(--ease);
}

.testemunho-card:hover {
    box-shadow: var(--sombra-hover);
    transform:  translateY(-4px);
}

/* Aspas decorativas */
.testemunho-card::before {
    content:     '\201C'; /* " */
    font-family: var(--fonte-display);
    font-size:   80px;
    line-height: 1;
    color:       var(--ouro-alfa);
    position:    absolute;
    top:         var(--s3);
    left:        var(--s4);
    color:       var(--ouro);
    opacity:     .18;
    pointer-events: none;
}

.testemunho-card__texto {
    font-size:   16px;
    line-height: 1.75;
    color:       var(--txt-escuro);
    font-style:  italic;
    margin-bottom: var(--s4);
    position:    relative;
    z-index:     1;
}

.testemunho-card__autor {
    display:     flex;
    gap:         var(--s3);
    align-items: center;
    padding-top: var(--s3);
    border-top:  1px solid var(--borda);
}

.testemunho-card__avatar {
    width:       44px;
    height:      44px;
    border-radius: 50%;
    background:  linear-gradient(135deg, var(--ouro), var(--ouro-claro));
    color:       var(--bg-escuro);
    font-size:   15px;
    font-weight: 700;
    display:     flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-family: var(--fonte-display);
}

.testemunho-card__nome {
    display:     block;
    font-weight: 700;
    font-size:   14px;
    color:       var(--txt-escuro);
    line-height: 1.3;
}

.testemunho-card__cargo {
    display:     block;
    font-size:   12px;
    color:       var(--txt-suave);
    line-height: 1.4;
}

/* Estrelas de classificação */
.testemunho-card__estrelas {
    display:     flex;
    gap:         2px;
    margin-bottom: var(--s3);
    color:       var(--ouro);
    font-size:   16px;
}


/* =============================================================================
   39. HERO INTERNO (páginas secundárias)
   ============================================================================= */

.hero-interno {
    position:   relative;
    background: var(--bg-escuro);
    overflow:   hidden;
    padding:    clamp(120px,14vw,160px) 0 clamp(60px,8vw,96px);
}

@media (max-width: 900px) {
    .hero-interno {
        padding: 104px 0 52px;
    }
}

@media (max-width: 600px) {
    .hero-interno {
        padding: 92px 0 44px;
    }
}

.hero-interno::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(184,147,60,.06) 0%, transparent 50%);
    pointer-events: none;
}

.hero-interno::after {
    content:    '';
    position:   absolute;
    inset:      0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cpath d='M0 60 Q 30 45, 60 60 T 120 60' fill='none' stroke='rgba(184,147,60,0.045)' stroke-width='1.2'/%3E%3Cpath d='M0 20 Q 30 5, 60 20 T 120 20' fill='none' stroke='rgba(184,147,60,0.025)' stroke-width='1'/%3E%3Cpath d='M0 100 Q 30 85, 60 100 T 120 100' fill='none' stroke='rgba(184,147,60,0.025)' stroke-width='1'/%3E%3C/svg%3E");
    background-size: 240px 240px;
    pointer-events: none;
    z-index: 0;
}

.hero-interno__inner {
    position:     relative;
    z-index:      2;
    max-width:    800px;
    padding:      0 var(--pad-h);
    margin:       0 auto;
    border-left:  2px solid var(--ouro);
}

.hero-interno__kicker {
    display:    block;
    font-size:  var(--t-label);
    font-weight: 600;
    letter-spacing: .15em;
    text-transform: uppercase;
    color:      var(--ouro);
    margin-bottom: var(--s3);
}

.hero-interno__titulo {
    font-family: var(--fonte-display);
    font-size:   var(--t-h1);
    font-weight: 700;
    color:       var(--txt-claro);
    line-height: 1.06;
    margin-bottom: var(--s4);
}

.hero-interno__titulo em {
    font-style: italic;
    color:      var(--ouro-claro);
    font-weight: 400;
}

.hero-interno__desc {
    font-size:   clamp(15px,1.3vw,18px);
    color:       rgba(237,233,225,.65);
    line-height: 1.75;
    max-width:   600px;
    margin: 0;
}


/* =============================================================================
   40. RESPONSIVE ADICIONAL
   ============================================================================= */

@media (max-width: 768px) {
    .evento-card { flex-direction: column; gap: var(--s3); }
    .evento-card__data {
        flex-direction: row;
        gap: var(--s2);
        width: fit-content;
        padding: var(--s2) var(--s3);
    }
    .evento-card__dia { font-size: 20px; }
}


/* =============================================================================
   41. PÁGINA DE EVENTOS — componentes específicos
   ============================================================================= */

/* Lista de próximos eventos */
.eventos-lista {
    display:        flex;
    flex-direction: column;
    gap:            var(--s4);
}

/* Card completo de evento (página eventos — versão expandida) */
.evento-card-full {
    display:    grid;
    grid-template-columns: 80px 1fr auto;
    gap:        var(--s5);
    align-items: start;
    padding:    var(--s5);
    background: var(--bg-branco);
    border:     1px solid var(--borda);
    border-left: 4px solid var(--ouro);
    box-shadow: var(--sombra-card);
    transition: box-shadow var(--ease), transform var(--ease), border-color var(--ease);
}

.evento-card-full:hover {
    box-shadow:      var(--sombra-hover);
    transform:       translateY(-3px);
    border-left-color: var(--ouro-claro);
}

/* Caixa da data */
.evento-card-full__data {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    background:      var(--ouro);
    color:           var(--bg-escuro);
    padding:         var(--s2) var(--s2);
    text-align:      center;
    line-height:     1;
    flex-shrink:     0;
    min-height:      80px;
}

.evento-card-full__dia {
    font-family: var(--fonte-display);
    font-size:   32px;
    font-weight: 700;
    display:     block;
}

.evento-card-full__mes {
    font-size:      10px;
    font-weight:    700;
    letter-spacing: .12em;
    text-transform: uppercase;
    display:        block;
    margin-top:     4px;
}

.evento-card-full__ano {
    font-size:      10px;
    font-weight:    600;
    color:          rgba(9,9,13,.6);
    display:        block;
    margin-top:     2px;
}

/* Área de conteúdo */
.evento-card-full__corpo {
    display:        flex;
    flex-direction: column;
    gap:            var(--s2);
    min-width:      0;
}

.evento-card-full__meta {
    display:     flex;
    align-items: center;
    flex-wrap:   wrap;
    gap:         var(--s2);
}

.evento-card-full__local {
    font-size: 13px;
    color:     var(--txt-suave);
}

.evento-card-full__titulo {
    font-family: var(--fonte-display);
    font-size:   var(--t-h3);
    font-weight: 700;
    line-height: 1.15;
    margin:      0;
}

.evento-card-full__titulo a {
    color:           var(--txt-escuro);
    text-decoration: none;
    transition:      color var(--ease);
}

.evento-card-full__titulo a:hover { color: var(--ouro-texto); }

.evento-card-full__desc {
    font-size:   var(--t-corpo);
    color:       var(--txt-medio);
    line-height: 1.7;
    margin:      0;
}

.evento-card-full__info {
    display:     flex;
    gap:         var(--s4);
    flex-wrap:   wrap;
    font-size:   13px;
    color:       var(--txt-suave);
    margin-top:  var(--s1);
}

/* Área de acções (botões) */
.evento-card-full__acoes {
    display:        flex;
    flex-direction: column;
    gap:            var(--s2);
    flex-shrink:    0;
    align-items:    stretch;
    min-width:      140px;
}

/* Estado vazio */
.eventos-vazio {
    text-align: center;
    padding:    var(--s9) var(--s5);
    color:      var(--txt-suave);
}

.eventos-vazio__icone {
    display:       flex;
    align-items:   center;
    justify-content: center;
    width:         72px;
    height:        72px;
    margin:        0 auto var(--s4);
    background:    var(--bg-claro-alt);
    border-radius: 50%;
    color:         var(--ouro);
}

.eventos-vazio h3 {
    font-family:   var(--fonte-display);
    font-size:     var(--t-h3);
    color:         var(--txt-escuro);
    margin-bottom: var(--s2);
}

.eventos-vazio p {
    font-size:     var(--t-corpo);
    max-width:     420px;
    margin:        0 auto;
}

/* Cards de eventos anteriores */
.evento-passado-card {
    display:        flex;
    flex-direction: column;
    gap:            var(--s2);
    padding:        var(--s4);
    background:     var(--bg-branco);
    border:         1px solid var(--borda);
    border-top:     3px solid var(--borda);
    transition:     border-top-color var(--ease), box-shadow var(--ease), transform var(--ease);
}

.evento-passado-card:hover {
    border-top-color: var(--ouro);
    box-shadow:       var(--sombra-card);
    transform:        translateY(-2px);
}

.evento-passado-card__data {
    font-size:      12px;
    font-weight:    600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color:          var(--txt-suave);
}

.evento-passado-card__titulo {
    font-family: var(--fonte-display);
    font-size:   var(--t-h4);
    font-weight: 700;
    color:       var(--txt-escuro);
    line-height: 1.25;
    margin:      0;
}

.evento-passado-card__local {
    font-size: 13px;
    color:     var(--txt-suave);
    margin:    0;
}

/* Responsive — página de eventos */
@media (max-width: 900px) {
    .evento-card-full {
        grid-template-columns: 72px 1fr;
        grid-template-rows:    auto auto;
    }

    .evento-card-full__acoes {
        grid-column: 1 / -1;
        flex-direction: row;
        min-width: auto;
    }

    .evento-card-full__acoes .btn {
        flex: 1;
        text-align: center;
    }
}

@media (max-width: 600px) {
    .evento-card-full {
        grid-template-columns: 1fr;
    }

    .evento-card-full__data {
        flex-direction: row;
        gap:            var(--s3);
        min-height:     auto;
        width:          fit-content;
        padding:        var(--s2) var(--s3);
    }
}


/* =============================================================================
   42. FAQ ACORDEÃO
   ============================================================================= */

.faq-lista {
    display:        flex;
    flex-direction: column;
    border-top:     1px solid var(--borda);
}

.faq-item {
    border-bottom: 1px solid var(--borda);
    transition:    background-color var(--ease), border-color var(--ease),
                   padding var(--ease), margin var(--ease), box-shadow var(--ease);
    border-radius: 4px;
}

/* Item aberto — card premium escuro */
.faq-item.faq-item--aberto {
    background-color: var(--bg-escuro-soft);
    border: 1px solid var(--ouro);
    margin: var(--s1) 0;
    padding: 0 var(--s3);
    box-shadow: var(--sombra-card);
}

.faq-item__pergunta {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    width:           100%;
    padding:         var(--s4) 0;
    background:      transparent;
    border:          none;
    cursor:          pointer;
    text-align:      left;
    font-family:     var(--fonte-corpo);
    font-size:       17px;
    font-weight:     600;
    color:           var(--txt-escuro);
    gap:             var(--s4);
    transition:      color var(--ease), background var(--ease);
    outline:         none;
}

.faq-item__pergunta:hover  { color: var(--ouro-texto); background: transparent; }
.faq-item__pergunta:focus  { color: var(--ouro-texto); background: transparent; outline: none; }
.faq-item__pergunta:active { color: var(--ouro-texto); background: transparent; }
.faq-item__pergunta:focus-visible {
    outline: 2px solid var(--ouro);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Pergunta no item aberto */
.faq-item--aberto .faq-item__pergunta {
    color: var(--bg-claro);
    padding: var(--s3) 0 var(--s2) 0;
}
.faq-item--aberto .faq-item__pergunta:hover,
.faq-item--aberto .faq-item__pergunta:focus {
    color: var(--ouro-claro);
}

.faq-item__icone {
    flex-shrink: 0;
    color:       var(--ouro-texto);
    transition:  transform .3s ease, color .3s ease;
}

.faq-item--aberto .faq-item__icone {
    transform: rotate(180deg);
    color:     var(--ouro-claro);
}

.faq-item__resposta {
    padding-bottom: var(--s4);
}

.faq-item__resposta p {
    font-size:   var(--t-corpo);
    color:       var(--txt-medio);
    line-height: 1.78;
    margin:      0;
}

/* Resposta no item aberto */
.faq-item--aberto .faq-item__resposta {
    padding-bottom: var(--s3);
}
.faq-item--aberto .faq-item__resposta p {
    color: rgba(237, 233, 225, 0.8);
}

/* Animação de abertura */
.faq-item__resposta[data-animating] {
    overflow: hidden;
    transition: height .3s cubic-bezier(.25,.46,.45,.94);
}


/* =============================================================================
   43. REDES SOCIAIS NO RODAPÉ
   ============================================================================= */

.footer__social {
    display:         flex;
    justify-content: center;
    gap:             var(--s3);
    padding:         var(--s4) var(--pad-h);
    border-top:      1px solid var(--borda-escura);
}

.footer__social-link {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           40px;
    height:          40px;
    border:          1px solid var(--borda-escura);
    color:           rgba(237,233,225,.35);
    transition:      color var(--ease), border-color var(--ease), background var(--ease);
    text-decoration: none;
}

.footer__social-link:hover {
    color:        var(--ouro);
    border-color: var(--ouro-alfa);
    background:   rgba(184,147,60,.06);
}


/* =============================================================================
   44. EVENTO INDIVIDUAL (single-evento.php)
   ============================================================================= */

.evento-single-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap:     var(--s8);
    align-items: start;
}

.evento-single-corpo { min-width: 0; }

.evento-single-conteudo {
    font-size:   var(--t-corpo);
    line-height: 1.78;
    color:       var(--txt-medio);
}

.evento-single-conteudo h2,
.evento-single-conteudo h3 {
    font-family:  var(--fonte-display);
    color:        var(--txt-escuro);
    margin-top:   var(--s6);
    margin-bottom: var(--s3);
}

.evento-single-conteudo p  { margin-bottom: var(--s4); }
.evento-single-conteudo ul { padding-left: var(--s4); margin-bottom: var(--s4); }
.evento-single-conteudo li { margin-bottom: var(--s2); }

/* Ficha técnica lateral */
.evento-single-ficha {
    position: sticky;
    top:      100px;
}

.ficha-tecnica {
    border:  1px solid var(--borda);
    padding: var(--s4);
}

.ficha-tecnica__titulo {
    font-size:      10px;
    font-weight:    700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color:          var(--ouro);
    margin-bottom:  var(--s4);
    padding-bottom: var(--s3);
    border-bottom:  1px solid var(--borda);
}

.ficha-tecnica__campo {
    display:        flex;
    flex-direction: column;
    gap:            3px;
    padding:        var(--s3) 0;
    border-bottom:  1px solid var(--borda);
}

.ficha-tecnica__campo:last-child { border-bottom: none; }

.ficha-tecnica__label {
    font-size:      10px;
    font-weight:    600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color:          var(--txt-suave);
}

.ficha-tecnica__valor {
    font-size:  15px;
    color:      var(--txt-escuro);
    font-weight: 500;
}

/* Navegação entre eventos */
.evento-nav {
    display:         flex;
    justify-content: space-between;
    flex-wrap:       wrap;
    gap:             var(--s3);
    margin-top:      var(--s7);
    padding-top:     var(--s5);
    border-top:      1px solid var(--borda);
}

.evento-nav__link {
    font-size:   14px;
    font-weight: 600;
    color:       var(--txt-medio);
    text-decoration: none;
    transition:  color var(--ease);
    max-width:   45%;
}

.evento-nav__link:hover  { color: var(--ouro); }
.evento-nav__link--seguinte { text-align: right; margin-left: auto; }

/* Responsive */
@media (max-width: 900px) {
    .evento-single-layout { grid-template-columns: 1fr; }
    .evento-single-ficha  { position: static; }
}


/* =============================================================================
   45. INSIGHTS / BLOG
   ============================================================================= */

.insight-card {
    display:        flex;
    flex-direction: column;
    background:     var(--bg-branco);
    border:         1px solid var(--borda);
    overflow:       hidden;
    transition:     box-shadow var(--ease), transform var(--ease);
}

.insight-card:hover {
    box-shadow: var(--sombra-hover);
    transform:  translateY(-4px);
}

.insight-card__imagem {
    display:    block;
    overflow:   hidden;
    aspect-ratio: 16/9;
    background: var(--bg-claro-alt);
}

.insight-card__imagem img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    transition: transform .55s ease;
    display:    block;
}

.insight-card:hover .insight-card__imagem img { transform: scale(1.05); }

.insight-card__corpo {
    display:        flex;
    flex-direction: column;
    gap:            var(--s2);
    padding:        var(--s4);
    flex:           1;
}

.insight-card__cat {
    font-size:      10px;
    font-weight:    700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color:          var(--ouro);
}

.insight-card__titulo {
    font-family: var(--fonte-display);
    font-size:   var(--t-h4);
    font-weight: 700;
    line-height: 1.2;
    margin:      0;
}

.insight-card__titulo a {
    color:           var(--txt-escuro);
    text-decoration: none;
    transition:      color var(--ease);
}

.insight-card__titulo a:hover { color: var(--ouro-texto); }

.insight-card__excerpt {
    font-size:   14px;
    color:       var(--txt-medio);
    line-height: 1.65;
    margin:      0;
    flex:        1;
}

.insight-card__meta {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    margin-top:      var(--s3);
    padding-top:     var(--s3);
    border-top:      1px solid var(--borda);
}

.insight-card__meta time {
    font-size: 12px;
    color:     var(--txt-suave);
}

.insight-card__cta {
    font-size:   12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color:       var(--ouro);
    text-decoration: none;
    transition:  color var(--ease);
}

.insight-card__cta:hover { color: var(--ouro-claro); }

/* Paginação */
.paginacao {
    margin-top: var(--s7);
    display:    flex;
    justify-content: center;
}

.paginacao .page-numbers {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--s2);
    list-style: none;
    padding: 0;
    margin: 0;
}

.paginacao .page-numbers li a,
.paginacao .page-numbers li span {
    display:         flex;
    align-items:     center;
    justify-content: center;
    min-width:       40px;
    height:          40px;
    padding:         0 var(--s3);
    border:          1px solid var(--borda);
    color:           var(--txt-medio);
    text-decoration: none;
    font-size:       14px;
    font-weight:     600;
    transition:      background var(--ease), color var(--ease), border-color var(--ease);
}

.paginacao .page-numbers li a:hover {
    border-color: var(--ouro);
    color:        var(--ouro);
}

.paginacao .page-numbers li span.current {
    background:   var(--txt-escuro);
    color:        var(--txt-claro);
    border-color: var(--txt-escuro);
}


/* =============================================================================
   46. PÁGINA DE SERVIÇOS — v2.1
   ============================================================================= */

/* Cards mini de visão geral (4 serviços em grelha) */
.servico-mini-card {
    display:        flex;
    flex-direction: column;
    gap:            var(--s2);
    padding:        var(--s5) var(--s4);
    background:     var(--bg-branco);
    border:         1px solid var(--borda);
    border-top:     3px solid transparent;
    text-decoration: none;
    transition:     border-top-color var(--ease), box-shadow var(--ease), transform var(--ease);
}

.servico-mini-card:hover {
    border-top-color: var(--ouro);
    box-shadow:       var(--sombra-hover);
    transform:        translateY(-3px);
}

.servico-mini-card__icone {
    color:         var(--ouro);
    margin-bottom: var(--s2);
}

.servico-mini-card__kicker {
    font-size:      10px;
    font-weight:    700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color:          var(--txt-suave);
}

.servico-mini-card__titulo {
    font-family: var(--fonte-display);
    font-size:   var(--t-h4);
    font-weight: 700;
    color:       var(--txt-escuro);
    line-height: 1.2;
    margin:      0;
}

/* Layout split de cada serviço individual */
.servico-detalhe-layout {
    display:     grid;
    grid-template-columns: 1fr 360px;
    gap:         var(--s8);
    align-items: center;
}

.servico-detalhe-layout--invertido {
    direction: rtl;
}

.servico-detalhe-layout--invertido > * {
    direction: ltr;
}

.servico-detalhe__icone {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           64px;
    height:          64px;
    background:      var(--ouro-alfa);
    border:          1px solid var(--ouro-alfa);
    color:           var(--ouro);
    margin-bottom:   var(--s4);
}

/* Lista de pontos de valor dentro do serviço */
.servico-detalhe__pontos {
    background: var(--bg-escuro);
    padding:    var(--s5);
    display:    flex;
    flex-direction: column;
    gap:        0;
}

.servico-ponto-item {
    display:     flex;
    align-items: flex-start;
    gap:         var(--s3);
    padding:     var(--s3) 0;
    border-bottom: 1px solid var(--borda-escura);
    font-size:   15px;
    color:       var(--txt-claro);
    line-height: 1.5;
}

.servico-ponto-item:last-child { border-bottom: none; }

.servico-ponto-item__check {
    flex-shrink: 0;
    width:       24px;
    height:      24px;
    display:     flex;
    align-items: center;
    justify-content: center;
    background:  rgba(184,147,60,.15);
    border:      1px solid rgba(184,147,60,.3);
    color:       var(--ouro);
    margin-top:  2px;
}

/* Secção individual de serviço — separação visual */
.servico-detalhe { scroll-margin-top: 80px; }

/* Responsive */
@media (max-width: 900px) {
    .servico-detalhe-layout,
    .servico-detalhe-layout--invertido { grid-template-columns: 1fr; direction: ltr; }
    .servico-detalhe__pontos { order: -1; }
}


/* =============================================================================
   47. PÁGINA DE SERVIÇO INDIVIDUAL
   ============================================================================= */

.servico-conteudo-layout {
    display:     grid;
    grid-template-columns: 1fr 300px;
    gap:         var(--s8);
    align-items: start;
}

.servico-conteudo-corpo {
    font-size:   var(--t-corpo);
    line-height: 1.78;
    color:       var(--txt-medio);
    min-width:   0;
}

.servico-conteudo-corpo h2,
.servico-conteudo-corpo h3 {
    font-family:   var(--fonte-display);
    color:         var(--txt-escuro);
    margin-top:    var(--s6);
    margin-bottom: var(--s3);
}

.servico-conteudo-corpo p  { margin-bottom: var(--s4); }
.servico-conteudo-corpo ul { padding-left: var(--s4); margin-bottom: var(--s4); }
.servico-conteudo-corpo li { margin-bottom: var(--s2); }
.servico-conteudo-corpo li::marker { color: var(--ouro); }

.servico-sidebar { position: sticky; top: 100px; }

.servico-sidebar__caixa {
    background: var(--bg-branco);
    border:     1px solid var(--borda);
    border-top: 3px solid var(--ouro);
    padding:    var(--s4);
}

@media (max-width: 900px) {
    .servico-conteudo-layout { grid-template-columns: 1fr; }
    .servico-sidebar { position: static; }
}


/* =============================================================================
   48. SINGLE-CURSO — background envolvente
   ============================================================================= */

.curso-layout-wrapper {
    background: var(--bg-claro-alt);
    /* Sem padding próprio: o espaçamento interno é dado por .curso-layout.
       (Antes duplicava 96px com .curso-layout → área clara grande no topo.) */
    padding:    0;
}


/* =============================================================================
   49. FOCUS-VISIBLE — acessibilidade por teclado
   ============================================================================= */

:focus-visible {
    outline:        2px solid var(--ouro);
    outline-offset: 3px;
}

button:focus:not(:focus-visible),
a:focus:not(:focus-visible) {
    outline: none;
}


/* =============================================================================
   49b. ANTI-AZUL — neutralizar azul herdado (Astra / WP core / browser)
   SEM impor cor.

   ANTES usávamos `color: inherit` nos estados interactivos. Em fundos escuros
   isso resolvia para a cor do body (--txt-escuro #0E0E12) e produzia texto
   PRETO sobre PRETO (ex.: chips da faixa de categorias depois de visitados/
   clicados/focados) e achatava o hover (a cor de hover ficava igual à normal,
   deixando o site estático).

   AGORA cada componente controla a sua própria cor (botões, chips, nav, FAQ
   têm estados próprios). Aqui apenas garantimos que nada herda azul.
   ============================================================================= */

/* O azul por defeito dos links já é eliminado por `a { color: inherit }` (base).
   :visited iguala o estado normal (mata o roxo/azul) com BAIXA especificidade,
   para que as regras de cada componente ganhem sempre. */
a:visited { color: inherit; }

/* Sem anel de foco azul do browser/Astra — o dourado vem de :focus-visible.
   NÃO mexemos na cor do texto nem no fundo, para não achatar os estados
   hover/focus/active definidos por cada componente. */
body a:focus:not(:focus-visible),
body button:focus:not(:focus-visible) {
    outline: none;
}

/* Tap highlight — dispositivos móveis sem azul */
*,
*::before,
*::after {
    -webkit-tap-highlight-color: rgba(184, 147, 60, 0.15);
}


/* =============================================================================
   50. ESTILOS DE IMPRESSÃO
   ============================================================================= */

@media print {
    .site-header,
    .site-footer,
    .hero__scroll,
    .btn,
    .sec-cta-final,
    .fade-entrada { display: none !important; }

    .hero-interno {
        background: #fff;
        padding:    20px 0 10px;
    }

    .hero-interno__titulo,
    .hero-interno__kicker,
    .hero-interno__desc {
        color: #000 !important;
    }

    .curso-layout,
    .evento-single-layout { grid-template-columns: 1fr; }

    .curso-ficha,
    .evento-single-ficha {
        position: static;
        border:   1px solid #ccc;
    }

    body { font-size: 12pt; color: #000; }
}


/* =============================================================================
   51. FASE 4.5 — REFINAMENTOS VISUAIS PREMIUM
   ============================================================================= */

/* --- Grain subtil no hero (reactivado via overlay, sem conflito com v2.1) --- */
.hero__overlay::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.028'/%3E%3C/svg%3E");
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .hero__overlay::after { display: none; }
}


/* --- Linha separadora dourada entre secção Sobre e secção Áreas --- */
#areas {
    position: relative;
}
#areas::before {
    content: '';
    position: absolute;
    top: 0;
    left: 12%;
    right: 12%;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--ouro-borda), transparent);
    pointer-events: none;
}


/* --- Correcção do card orfão na grelha das 13 áreas --- */
/* Desktop 4 colunas: card 13 fica sozinho na col 1 → centra nas colunas 2-3 */
.grelha-areas .area-card:nth-child(4n+1):last-child {
    grid-column: 2 / 4;
}

/* Tablet 3 colunas: card 13 fica sozinho na col 1 → centra na coluna 2 */
@media (max-width: 1024px) {
    .grelha-areas .area-card:nth-child(3n+1):last-child {
        grid-column: 2 / 3;
    }
}

/* Mobile 2 colunas: card 13 fica na col 1 — aceitável, sem centrar */
/* Mobile 1 coluna: sem problema */


/* --- Estado vazio da agenda — classes reutilizáveis (substitui inline styles) --- */
.evento-vazio {
    text-align: center;
    max-width:  560px;
    margin:     0 auto;
    padding:    32px 0;
}

.evento-vazio__titulo {
    font-family: var(--fonte-display);
    font-size:   22px;
    font-weight: 700;
    color:       var(--txt-claro);
    margin-bottom: var(--s2);
    line-height: 1.2;
}

.evento-vazio__linha {
    width:      40px;
    height:     1px;
    background: var(--ouro-borda);
    margin:     var(--s3) auto;
}

.evento-vazio__desc {
    color:       rgba(237,233,225,.58);
    line-height: 1.72;
    font-size:   var(--t-corpo);
    margin-bottom: var(--s5);
    max-width: none;
}


/* =============================================================================
   52. FASE 4.7 — Coerência de marca: footer logo, barra clicável, hero, scroll-top
   ============================================================================= */

/* Logótipo real no footer */
.footer__logo-link {
    display:        block;
    margin-bottom:  var(--s4);
    text-decoration: none;
}
.footer__logo-img {
    height:  44px;
    width:   auto;
    display: block;
    opacity: .88;
    transition: opacity var(--ease);
}
.footer__logo-link:hover .footer__logo-img { opacity: 1; }

/* Barra de identidade — chips são links <a>. Estados COMPLETOS (normal,
   visited, hover, focus-visible, active) para nunca herdarem preto do global
   e nunca usarem azul. Especificidade (0,2,1) vence o reset global. */
a.barra-id__tag,
a.barra-id__tag:visited {
    color:           rgba(237,233,225,.72);   /* off-white legível (antes .4 = quase invisível) */
    border-color:    rgba(237,233,225,.14);
    background:       transparent;
    text-decoration: none;
    cursor:          pointer;
    transition:      color var(--ease), border-color var(--ease),
                     background var(--ease), transform var(--ease),
                     box-shadow var(--ease);
}
a.barra-id__tag:hover {
    color:        var(--ouro-claro);          /* dourado claro */
    border-color: var(--ouro-borda);
    background:   var(--ouro-alfa);           /* dourado translúcido */
    transform:    translateY(-1px);           /* leve elevação */
    box-shadow:   0 4px 14px rgba(184,147,60,.18); /* brilho dourado subtil */
}
a.barra-id__tag:focus-visible {
    outline:        2px solid var(--ouro-claro);
    outline-offset: 3px;
    border-radius:  100px;
    color:          rgba(237,233,225,.92);
}
a.barra-id__tag:active {
    color:        #fff;
    background:   rgba(184,147,60,.28);       /* dourado mais forte */
    border-color: var(--ouro-claro);
    transform:    translateY(0);
}

/* Override do botão "Voltar ao topo" do Astra — reestilizado para identidade STRATUM */
#ast-scroll-top {
    background:    var(--bg-escuro) !important;
    border:        1px solid var(--ouro-borda) !important;
    border-radius: 3px !important;
    box-shadow:    0 4px 20px rgba(0,0,0,.55) !important;
    color:         var(--ouro) !important;
}
#ast-scroll-top:hover {
    background:    var(--borda-escura) !important;
    border-color:  var(--ouro) !important;
}
#ast-scroll-top .ast-icon svg {
    fill:   var(--ouro) !important;
    stroke: var(--ouro) !important;
}
#ast-scroll-top .ast-icon svg path {
    fill:   var(--ouro) !important;
    stroke: var(--ouro) !important;
}


/* =============================================================================
   53. FASE 4.8 — Hero laptop, contraste header, prefers-reduced-motion
   ============================================================================= */

/* Hero acima do fold em ecrãs de baixa altura (portáteis 1366×768, 1280×800, 1440×900)
   Reduz padding interno e título para que os CTAs fiquem visíveis above-the-fold. */
@media (max-height: 820px) and (min-width: 961px) {
    .hero { padding-top: 80px; }
    .hero__inner {
        padding-top:    clamp(32px, 4vw, 56px);
        padding-bottom: clamp(24px, 3vw, 48px);
        gap:            var(--s4);
    }
    .hero__titulo { font-size: clamp(38px, 4.5vw, 60px); }
}

/* Contraste do header transparente sobre a imagem hero
   text-shadow garante legibilidade mesmo em zonas mais claras da fotografia. */
.site-header--transparente .site-nav ul li a,
.site-header--transparente .site-nav ul li > span {
    text-shadow: 0 1px 8px rgba(0,0,0,.6);
}
.site-header--transparente .site-header__logo-link {
    filter: drop-shadow(0 1px 6px rgba(0,0,0,.4));
}


/* =============================================================================
   54. FASE 4.9 — Hero V3: mobile single-column + stats compactos
   ============================================================================= */

/* Correcção de cascade: Section 27 define grid-template-columns: 1fr auto
   sem condição, sobrepondo o breakpoint de Section 7 em mobile.
   Este bloco repõe o comportamento correcto a ≤960px. */
@media (max-width: 960px) {
    .hero__inner {
        grid-template-columns: 1fr;
        gap:     var(--s5);
        padding: var(--s7) var(--pad-h) var(--s6);
    }
    .hero__titulo { font-size: clamp(36px, 8vw, 56px); }

    /* Stats em chips horizontais — painel 2×2 prejudica a primeira dobra */
    .hero__numeros {
        display:    flex;
        flex-wrap:  wrap;
        gap:        10px;
        min-width:  0;
        background: transparent;
        border:     none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    .hero__num-item {
        flex-direction: row;
        align-items:    center;
        padding:        6px 14px;
        gap:            8px;
        text-align:     left;
        background:     rgba(9,9,13,.55);
        border:         1px solid rgba(237,233,225,.1);
        flex:           0 0 auto;
    }
    .hero__num-val   { font-size: 18px; }
    .hero__num-label { font-size: 10px; }
}

@media (max-width: 600px) {
    .hero__titulo  { font-size: clamp(32px, 9vw, 48px); }
    .hero__desc    { font-size: 15px; }
    .hero__scroll  { display: none; }
}


/* =============================================================================
   55. FRENTE A - guards finais contra overflow mobile
   ============================================================================= */

.barra-id,
.barra-id__inner {
    max-width: 100%;
    min-width: 0;
}

.barra-id__inner {
    width: 100%;
    overscroll-behavior-x: contain;
}

@media (max-width: 600px) {
    .filtros-barra {
        align-items: stretch;
    }

    .filtro-btn {
        flex: 1 1 100%;
        max-width: 100%;
        min-width: 0;
        white-space: normal;
        line-height: 1.28;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .grelha-4 {
        grid-template-columns: 1fr;
    }

    .diff-card {
        padding: var(--s4) var(--s3);
    }
}