:root {
    --gold: #bc9c4c;
    --gold-light: #e2c98d;
    --gold-bright: #d4af37;
    --deep-blue: #020617;
    --navy-text: #1e3a45;
    --off-white-warm: #f3f1ed;
    --text-dark: #0f172a;
    --regional-green: #8fa693;
}

body {
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    background-color: var(--deep-blue);
    color: white;
    overflow-x: hidden;
}

.serif-font { font-family: 'Ibarra Real Nova', serif; }

/* --- BANNER E CENTELHA DIVINA --- */
.hero-gradient {
    background:
        radial-gradient(ellipse at 10% 10%, rgba(0, 0, 0, 0.45) 0%, transparent 50%),
        radial-gradient(ellipse at 90% 90%, rgba(0, 0, 0, 0.30) 0%, transparent 45%),
        linear-gradient(135deg, #07111e 0%, #0d2d50 30%, #1a5278 60%, #246890 100%);
    position: relative;
    overflow: hidden;
    min-height: 60vh;
    display: flex;
    align-items: center;
}

.flare-center {
    position: absolute;
    right: 20%;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    pointer-events: none;
}

/* --- CENTELHA DIVINA ---
   Estratégia: nada de raios uniformes (isso vira sol).
   A centelha é um PONTO intenso de luz com halos concêntricos
   e uma cruz sutil de lens-flare (horizontal + vertical). */

/* Aura ambiente bem larga e suave que ilumina toda a volta — tom dourado uniforme */
.sun-flare-outer {
    position: absolute;
    width: 56vmax;
    height: 56vmax;
    border-radius: 50%;
    /* Aura ambiente quase branca — esfumaça o entorno do núcleo
       sem deixar tom dourado pesado no fundo */
    background: radial-gradient(circle,
        rgba(255, 235, 150, 0.18) 0%,
        rgba(240, 215, 120, 0.10) 20%,
        rgba(212, 190, 100, 0.05) 40%,
        rgba(190, 170,  90, 0.02) 60%,
        transparent 75%);
    filter: blur(120px);
    animation: divine-pulse 14s ease-in-out infinite;
}

/* Coroa de raios envolvendo todo o núcleo:
   36 raios finos (a cada 10º), em tons de dourado, suaves,
   pintados via repeating-conic-gradient.
   Uma máscara radial garante que eles "saiam" do núcleo
   sem fronteira/separação visível e desapareçam nas bordas. */
/* Container dos raios — 36 streaks finos distribuídos a cada 10°
   formam uma coroa luminosa em volta do núcleo. */
.sun-rays-container {
    position: absolute;
    width: 0;
    height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: rays-spin 300s linear infinite;
    z-index: 1;
}

/* Streaks brancos visíveis, etéreos como na referência:
   raios bem definidos partindo do núcleo, mas em tom branco-quente
   ao invés de dourado pesado. */
.sun-rays-container .ray {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: 0;
    margin-top: 0;
    transform-origin: 0 50%;
    /* Branco-creme com toque dourado suave */
    background: linear-gradient(to right,
        transparent                  0%,
        rgba(255, 245, 200, 0.55)    4%,
        rgba(255, 238, 170, 0.85)   10%,
        rgba(255, 232, 160, 0.65)   22%,
        rgba(240, 215, 150, 0.40)   40%,
        rgba(220, 195, 130, 0.18)   65%,
        rgba(200, 180, 110, 0.05)   85%,
        transparent 100%);
    border-radius: 50%;
    /* Blur intermediário: raios visíveis mas com contornos suaves */
    filter: blur(4px);
    mix-blend-mode: screen;
    pointer-events: none;
}

/* Variação orgânica: combinação de raios principais bem visíveis com
   secundários menores pra dar a sensação de coroa solar natural. */
.sun-rays-container .ray { width: 220px; height: 2px; opacity: 0.75; }

/* Halo médio branco-luminoso — envolve o núcleo e os raios criando
   o brilho ambiente da coroa solar. */
.sun-flare-core {
    position: absolute;
    width: 432px;
    height: 432px;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(255, 242, 180, 0.45)  0%,
        rgba(255, 232, 150, 0.35) 15%,
        rgba(240, 215, 130, 0.22) 30%,
        rgba(220, 198, 110, 0.10) 50%,
        rgba(200, 180, 100, 0.04) 70%,
        transparent 90%);
    filter: blur(40px);
    mix-blend-mode: screen;
    animation: core-shimmer 12s ease-in-out infinite;
    z-index: 0;
}

/* Núcleo pulsante: bola de luz branca brilhante, mais densa que a aura.
   É o "miolo" radiante de onde os raios parecem brotar. */
.sun-flare-internal {
    position: absolute;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(255, 250, 220, 0.70)  0%,
        rgba(255, 240, 185, 0.55)  10%,
        rgba(255, 228, 155, 0.40)  22%,
        rgba(240, 210, 130, 0.25)  38%,
        rgba(220, 190, 110, 0.12)  58%,
        rgba(200, 175, 100, 0.04)  78%,
        transparent 100%);
    filter: blur(20px);
    mix-blend-mode: screen;
    animation: internal-flash 8s ease-in-out infinite;
    z-index: 3;
}

.divine-particles-wrapper {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    /* Sparks atravessam o hero todo — overflow visible permite que
       eles transitem pelas bordas sem clipping abrupto. O hero tem
       overflow:hidden externo, então saídas reais ficam contidas. */
    overflow: visible;
    pointer-events: none;
}

.divine-dust {
    position: absolute;
    background: #ffe090;
    border-radius: 50%;
    /* Glow dourado suave */
    box-shadow:
        0 0 3px 1px rgba(255, 215, 100, 0.45),
        0 0 8px 2px rgba(212, 175, 55, 0.25);
    opacity: 0;
    /* Default — cada nth-child abaixo vai sobrescrever pra dar direção radial.
       Assim os sparks parecem "brotar" da centelha em todas as direções. */
    animation: spark-drift-ne 12s infinite ease-out;
}

/* 6 trajetórias radiais a partir do núcleo da centelha — alternadas em volta
   das partículas via nth-child pra dar a sensação de irradiação cobrindo
   o hero todo. As variantes "w/w2" são longas pra cruzar a tela. */
.divine-dust:nth-child(6n+1) { animation-name: spark-drift-ne; }
.divine-dust:nth-child(6n+2) { animation-name: spark-drift-nw; }
.divine-dust:nth-child(6n+3) { animation-name: spark-drift-se; }
.divine-dust:nth-child(6n+4) { animation-name: spark-drift-sw; }
.divine-dust:nth-child(6n+5) { animation-name: spark-drift-w;  }
.divine-dust:nth-child(6n+6) { animation-name: spark-drift-w2; }

@keyframes rays-spin {
    0%   { transform: rotate(0deg)   scale(1); }
    50%  { transform: rotate(180deg) scale(1.05); }
    100% { transform: rotate(360deg) scale(1); }
}

/* Sparks "brotam" do núcleo: nascem pequenos, viajam pra longe e
   dissolvem suavemente. Distâncias generosas pra cobrir todo o hero,
   com leve bias pra esquerda (a centelha está em right:20%, então tem
   mais espaço pra "leste" do que pra "oeste"... mas a maioria dos
   sparks deve cruzar a barra azul). */
@keyframes spark-drift-ne {
    0%   { transform: translate(0, 0)             scale(0.3); opacity: 0; }
    15%  { opacity: 0.50; }
    80%  { opacity: 0.18; }
    100% { transform: translate( 320px, -380px)   scale(1.2); opacity: 0; }
}
@keyframes spark-drift-nw {
    0%   { transform: translate(0, 0)             scale(0.3); opacity: 0; }
    15%  { opacity: 0.50; }
    80%  { opacity: 0.18; }
    100% { transform: translate(-820px, -380px)   scale(1.2); opacity: 0; }
}
@keyframes spark-drift-se {
    0%   { transform: translate(0, 0)             scale(0.3); opacity: 0; }
    15%  { opacity: 0.50; }
    80%  { opacity: 0.18; }
    100% { transform: translate( 320px,  380px)   scale(1.2); opacity: 0; }
}
@keyframes spark-drift-sw {
    0%   { transform: translate(0, 0)             scale(0.3); opacity: 0; }
    15%  { opacity: 0.50; }
    80%  { opacity: 0.18; }
    100% { transform: translate(-820px,  380px)   scale(1.2); opacity: 0; }
}
/* Variantes "longas" pra alguns sparks atravessarem a tela toda */
@keyframes spark-drift-w {
    0%   { transform: translate(0, 0)             scale(0.3); opacity: 0; }
    15%  { opacity: 0.45; }
    80%  { opacity: 0.15; }
    100% { transform: translate(-1100px, -120px)  scale(1.3); opacity: 0; }
}
@keyframes spark-drift-w2 {
    0%   { transform: translate(0, 0)             scale(0.3); opacity: 0; }
    15%  { opacity: 0.45; }
    80%  { opacity: 0.15; }
    100% { transform: translate(-1000px,  180px)  scale(1.3); opacity: 0; }
}

@keyframes divine-pulse {
    0%, 100% { transform: scale(1);    opacity: 0.5; }
    50%      { transform: scale(1.1);  opacity: 0.8; }
}

@keyframes core-shimmer {
    0%, 100% { opacity: 0.65; transform: scale(1); }
    50%      { opacity: 1;    transform: scale(1.08); }
}

/* O "piscar" da centelha — bem sutil, como uma respiração luminosa.
   Blur grande mantém a "bola de luz" sempre difusa, sem ponto duro. */
@keyframes internal-flash {
    0%, 100% { opacity: 0.85; transform: scale(0.95); filter: blur(54px); }
    50%      { opacity: 1;    transform: scale(1.08); filter: blur(46px); }
}

.text-glow { text-shadow: 0 0 50px rgba(255, 255, 255, 0.2); }

/* --- CARTÃO DE LOGIN --- */
.login-inline-card {
    background: rgba(12, 26, 46, 0.55);
    backdrop-filter: blur(35px);
    border: 1px solid rgba(188, 156, 76, 0.3);
    border-radius: 3rem;
    padding: 3.5rem 3rem;
    box-shadow: 0 50px 120px rgba(0,0,0,0.5);
    width: 100%;
    max-width: 440px;
    z-index: 10;
}

.login-input {
    width: 100%;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(188, 156, 76, 0.2);
    border-radius: 16px;
    padding: 1.1rem 1.1rem 1.1rem 3.5rem;
    color: white;
    font-size: 0.95rem;
    outline: none;
    transition: all 0.3s ease;
}

.login-btn-inline {
    background: linear-gradient(135deg, #d4af37 0%, #bc9c4c 100%);
    color: var(--deep-blue);
    padding: 1.3rem;
    border-radius: 16px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    font-size: 0.9rem;
    box-shadow: 0 15px 35px rgba(188, 156, 76, 0.25);
    transition: all 0.4s ease;
    width: 100%;
}

.nav-link {
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    transition: all 0.4s ease;
    padding-bottom: 6px;
    color: inherit;
    background: transparent;
    border: none;
    cursor: pointer;
    font-weight: inherit;
    text-transform: inherit;
    font-family: inherit;
}
.nav-link:hover { color: var(--gold-bright); }

/* Item ativo (slug atual / home) — substitui o antigo “destaque” fixo no Início */
.nav-link--current,
.nav-link--current:hover {
    color: var(--gold-bright) !important;
}
.nav-dropdown-toggle.nav-link--current {
    border-bottom: 2px solid var(--gold-bright);
    padding-bottom: 4px;
}
a.nav-link.nav-link--current:not(.border-b-2) {
    border-bottom: 2px solid var(--gold-bright);
}
.nav-dropdown-item.nav-link--current {
    color: var(--gold-bright) !important;
    border-left-color: var(--gold-bright);
    background: rgba(212, 175, 55, 0.12);
}

/* --- DROPDOWN DE SUBMENUS DO HEADER --- */
.nav-dropdown { position: relative; }

.nav-dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.nav-dropdown-chevron {
    transition: transform 0.25s ease;
    opacity: 0.6;
}
.nav-dropdown:hover .nav-dropdown-chevron,
.nav-dropdown:focus-within .nav-dropdown-chevron {
    transform: rotate(180deg);
    opacity: 1;
}

/* Ponte invisível entre o botão e o painel — evita fechamento ao passar o mouse */
.nav-dropdown-bridge {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 16px;
}

.nav-dropdown-panel {
    position: absolute;
    top: calc(100% + 16px);
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    min-width: 260px;
    padding: 0.5rem 0;
    background: rgba(26, 82, 120, 0.96);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border: 1px solid rgba(188, 156, 76, 0.35);
    border-radius: 16px;
    box-shadow: 0 30px 60px rgba(0,0,0,0.55);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
    z-index: 100;
}
.nav-dropdown:hover .nav-dropdown-panel,
.nav-dropdown:focus-within .nav-dropdown-panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.nav-dropdown-item {
    display: block;
    padding: 0.7rem 1.4rem;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.82);
    font-weight: 600;
    text-transform: none;
    transition: background 0.2s ease, color 0.2s ease, padding-left 0.2s ease;
    border-left: 2px solid transparent;
}
.nav-dropdown-item:hover {
    background: rgba(212, 175, 55, 0.08);
    color: var(--gold-bright);
    border-left-color: var(--gold-bright);
    padding-left: 1.6rem;
}

/* ============================================================
   HAMBURGER + MENU MOBILE
   ============================================================ */

/* Botão hamburger — só aparece em < lg */
.hamburger {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
    width: 48px;
    height: 48px;
    padding: 0;
    background: transparent;
    border: 1px solid rgba(212, 175, 55, 0.45);
    border-radius: 12px;
    cursor: pointer;
    z-index: 70;
    position: relative;
    transition: border-color 0.25s ease, background 0.25s ease;
}
.hamburger:hover { border-color: var(--gold-bright); }
.hamburger span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--gold-bright);
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.2s ease;
    transform-origin: center;
}
.hamburger.is-open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.hamburger.is-open span:nth-child(2) { opacity: 0; }
.hamburger.is-open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* Backdrop escuro atrás do menu mobile */
.mobile-nav-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(2, 6, 23, 0.6);
    backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 55;
}
.mobile-nav-backdrop.is-open {
    opacity: 1;
    visibility: visible;
}

/* Bloqueia scroll da página com menu aberto */
body.menu-open { overflow: hidden; }

/* ---------- Mobile (default — até 1023px) ---------- */
.site-nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 86%;
    max-width: 360px;
    background: rgba(12, 26, 46, 0.97);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    padding: 6rem 1.75rem 2.5rem;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1.4rem;
    transform: translateX(110%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 60;
    overflow-y: auto;
    box-shadow: -20px 0 60px rgba(0, 0, 0, 0.5);
    border-left: 1px solid rgba(212, 175, 55, 0.18);
}
.site-nav.is-open { transform: translateX(0); }

/* No mobile, links viram lista (largura total, padding gostoso de toque) */
.site-nav .nav-link {
    font-size: 0.85rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid rgba(212, 175, 55, 0.12);
    width: 100%;
    text-align: left;
    letter-spacing: 0.18em;
}
.site-nav .nav-dropdown { width: 100%; }
.site-nav .nav-dropdown-toggle { width: 100%; justify-content: space-between; }

/* Submenu inline acordeão (sem overlay flutuante) no mobile */
.site-nav .nav-dropdown-bridge { display: none; }
.site-nav .nav-dropdown-panel {
    position: static;
    transform: none;
    background: transparent;
    backdrop-filter: none;
    border: none;
    box-shadow: none;
    min-width: 0;
    padding: 0;
    margin: 0;
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.25s ease, padding 0.25s ease, margin 0.25s ease;
}
.site-nav .nav-dropdown.is-open .nav-dropdown-panel {
    max-height: 600px;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    padding: 0.25rem 0 0.5rem 0.75rem;
    margin-top: 0.25rem;
}
.site-nav .nav-dropdown.is-open .nav-dropdown-chevron {
    transform: rotate(180deg);
    opacity: 1;
}
.site-nav .nav-dropdown-item {
    padding: 0.55rem 0.5rem;
    font-size: 0.78rem;
    border-left: 2px solid rgba(212, 175, 55, 0.2);
}
.site-nav .nav-dropdown-item:hover { padding-left: 0.7rem; }

/* No mobile, neutraliza o hover global do dropdown (sticky hover em touch).
   No mobile o painel só deve aparecer com .is-open (clique). */
.site-nav .nav-dropdown:hover .nav-dropdown-panel,
.site-nav .nav-dropdown:focus-within .nav-dropdown-panel {
    transform: none;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.site-nav .nav-dropdown.is-open:hover .nav-dropdown-panel,
.site-nav .nav-dropdown.is-open:focus-within .nav-dropdown-panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Login dropdown — no mobile vira acordeão (clique no "Entrar" expande o form).
   Tudo escopado em max-width pra não atrapalhar o hover do desktop. */
@media (max-width: 1023.98px) {
    .site-nav .login-wrapper {
        margin-top: auto;
        width: 100%;
        position: relative;
    }
    .site-nav .login-trigger {
        width: 100%;
        padding: 0.85rem 1.5rem;
        font-size: 0.7rem;
        /* Anula o hover sticky do toque (Tailwind hover:bg-... fica preso em touch
           e some o texto/ícone porque o color hover não está no tema). */
        background: transparent !important;
        color: var(--gold-bright) !important;
        transition: border-color 0.25s ease, background 0.25s ease;
    }
    .site-nav .login-trigger svg { color: var(--gold-bright); }
    .site-nav .login-bridge { display: none; }

    .site-nav .login-panel {
        display: block;
        position: static;
        right: auto;
        top: auto;
        width: 100%;
        transform: none;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        max-height: 0;
        overflow: hidden;
        margin: 0;
        transition: max-height 0.4s ease, opacity 0.25s ease, margin 0.25s ease;
    }
    .site-nav .login-wrapper.is-open .login-panel {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        max-height: 700px;
        margin-top: 1rem;
    }
    .site-nav .login-wrapper.is-open .login-trigger {
        border-color: var(--gold-bright);
        background: rgba(212, 175, 55, 0.08) !important;
    }
    /* Card interno mais compacto no mobile */
    .site-nav .login-panel .login-inline-card {
        padding: 1.5rem !important;
        box-shadow: none !important;
        background: rgba(2, 6, 23, 0.55);
        border: 1px solid rgba(212, 175, 55, 0.2);
        border-radius: 12px;
    }
}

/* ---------- Desktop (≥ 1024px) ---------- */
@media (min-width: 1024px) {
    .site-nav {
        position: static;
        background: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        padding: 0;
        transform: none;
        width: auto;
        max-width: none;
        z-index: auto;
        overflow: visible;
        box-shadow: none;
        border-left: none;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        column-gap: 2rem;
        row-gap: 1rem;
    }
    .site-nav .nav-link {
        font-size: 0.75rem;
        padding: 0 0 6px 0;
        border-bottom: 0;
        width: auto;
        letter-spacing: 0.15em;
    }
    .site-nav .nav-dropdown { width: auto; }
    .site-nav .nav-dropdown-toggle { width: auto; justify-content: flex-start; }
    .site-nav .nav-dropdown-bridge { display: block; }
    .site-nav .nav-dropdown-panel {
        position: absolute;
        top: calc(100% + 16px);
        left: 50%;
        transform: translateX(-50%) translateY(8px);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        background: rgba(26, 82, 120, 0.96);
        backdrop-filter: blur(25px);
        border: 1px solid rgba(188, 156, 76, 0.35);
        border-radius: 16px;
        box-shadow: 0 30px 60px rgba(0, 0, 0, 0.55);
        min-width: 260px;
        padding: 0.5rem 0;
        margin: 0;
        /* Reseta o colapso do mobile (max-height:0; overflow:hidden) */
        max-height: none;
        overflow: visible;
        transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
    }
    .site-nav .nav-dropdown:hover .nav-dropdown-panel,
    .site-nav .nav-dropdown:focus-within .nav-dropdown-panel {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateX(-50%) translateY(0);
    }
    .site-nav .nav-dropdown-item {
        padding: 0.7rem 1.4rem;
        font-size: 0.72rem;
        border-left: 2px solid transparent;
    }
    .site-nav .nav-dropdown-item:hover { padding-left: 1.6rem; }

    /* Login: volta ao comportamento original com hover */
    .site-nav .login-wrapper { margin-top: 0; width: auto; }
    .site-nav .login-trigger { width: auto; padding: 0.625rem 1.5rem; font-size: 0.65rem; }
    .site-nav .login-bridge { display: block; }
    .site-nav .login-panel {
        display: block;
        position: absolute;
        right: 0;
        top: calc(100% + 12px);
        width: 360px;
        opacity: 0;
        visibility: hidden;
        transform: translateY(1rem);
        transform-origin: top right;
        transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
    }
    .site-nav .login-wrapper:hover .login-panel,
    .site-nav .login-wrapper:focus-within .login-panel {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
}

/* --- SEÇÕES --- */
.section-warm { background-color: var(--off-white-warm); color: var(--navy-text); }

/* --- ÁREA REGIONAL --- */
.regional-section {
    background-color: var(--regional-green);
    color: var(--navy-text);
    width: 100%;
}

.search-bar {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(30, 58, 69, 0.3);
    border-radius: 100px;
    padding: 0.8rem 2rem;
    display: flex;
    align-items: center;
    width: 100%;
    transition: all 0.3s ease;
}

.search-input::placeholder {
    color: var(--navy-text);
    opacity: 0.6;
}

.btn-outline-navy {
    border: 1.5px solid var(--navy-text);
    color: var(--navy-text);
    padding: 0.7rem 2.2rem;
    border-radius: 100px;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    transition: all 0.3s ease;
    display: inline-block;
    font-family: 'Montserrat', sans-serif;
}
.btn-outline-navy:hover { background: var(--navy-text); color: white; }

.btn-outline-white {
    border: 1.5px solid white;
    color: white;
    padding: 0.7rem 2.2rem;
    border-radius: 100px;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    transition: all 0.3s ease;
    display: inline-block;
    font-family: 'Montserrat', sans-serif;
}
.btn-outline-white:hover { background: white; color: var(--regional-green); }

/* --- FORMULÁRIOS EXPANSÍVEIS (filiação e newsletter) --- */
.filiacao-form-wrapper,
.newsletter-form-wrapper {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transform: translateY(-6px);
    transition: max-height 0.45s ease, opacity 0.35s ease, transform 0.35s ease;
}
.filiacao-form-wrapper[hidden],
.newsletter-form-wrapper[hidden] { display: block !important; }
.filiacao-form-wrapper.is-open,
.newsletter-form-wrapper.is-open {
    max-height: 600px;
    opacity: 1;
    transform: translateY(0);
}

/* --- RODAPÉ --- */
.main-footer {
    background:
        radial-gradient(ellipse at 10% 10%, rgba(0, 0, 0, 0.45) 0%, transparent 50%),
        radial-gradient(ellipse at 90% 90%, rgba(0, 0, 0, 0.30) 0%, transparent 45%),
        linear-gradient(135deg, #07111e 0%, #0d2d50 30%, #1a5278 60%, #246890 100%);
    color: white;
    padding: 6rem 0 2rem;
    border-top: 1px solid rgba(143, 166, 147, 0.2);
}

.footer-heading {
    display: block;
    font-size: 0.7rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    color: var(--gold-bright);
    margin-bottom: 1.5rem;
}

.footer-link {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.55);
    transition: color 0.3s ease;
}
.footer-link:hover { color: var(--gold-bright); }

/* --- FLASH MESSAGES --- */
.flash {
    position: fixed;
    top: 1.5rem;
    right: 1.5rem;
    z-index: 100;
    padding: 1rem 1.5rem;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.9rem;
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
    animation: flash-in 0.4s ease-out;
    max-width: 380px;
}
.flash-success { background: #1a4d2e; color: #b8ecc0; border: 1px solid #2e7d4f; }
.flash-error   { background: #4d1a1a; color: #f0b8b8; border: 1px solid #7d2e2e; }

@keyframes flash-in {
    from { transform: translateX(120%); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}

/* ============================================================
   PÁGINAS EDITORIAIS (pagina.cfm)
   Design inspirado em editoriais modernos: NYT Magazine, Stripe Press, Ghost.
   Deliberadamente NÃO parece blog/WordPress.
   ============================================================ */

body.pagina-editorial {
    background: #f5f2ec;         /* off-white aquecido, sensação de papel */
    color: #1a1f2e;
    overflow-x: hidden;
}
body.pagina-editorial .main-footer { margin-top: 0; }

/* Reading progress */
.reading-progress {
    position: fixed;
    top: 0; left: 0;
    height: 3px;
    width: 0%;
    background: linear-gradient(90deg, var(--gold) 0%, var(--gold-bright) 100%);
    z-index: 200;
    transition: width 0.05s linear;
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
}

/* Larguras de leitura (PT-BR: coluna editorial ampla, ainda legível) */
.pagina-content-width       { max-width: 1080px; margin: 0 auto; padding: 0 1.5rem; }
.pagina-content-width-wide  { max-width: 1180px; margin: 0 auto; padding: 0 1.5rem; }

/* ----------------------------------------
   HERO
   ---------------------------------------- */
.pagina-hero {
    position: relative;
    min-height: 36vh;
    display: flex;
    align-items: center;
    padding: clamp(6.5rem, 11vw, 10rem) 1.5rem clamp(3rem, 5vw, 5rem);
    overflow: hidden;
    color: white;
    background:
        radial-gradient(ellipse at 10% 10%, rgba(0, 0, 0, 0.45) 0%, transparent 50%),
        radial-gradient(ellipse at 90% 90%, rgba(0, 0, 0, 0.30) 0%, transparent 45%),
        linear-gradient(135deg, #07111e 0%, #0d2d50 30%, #1a5278 60%, #246890 100%);
}
.pagina-hero-image {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    z-index: 0;
}
.pagina-hero-fallback {
    background:
        radial-gradient(ellipse at 10% 10%, rgba(0, 0, 0, 0.45) 0%, transparent 50%),
        radial-gradient(ellipse at 90% 90%, rgba(0, 0, 0, 0.30) 0%, transparent 45%),
        linear-gradient(135deg, #07111e 0%, #0d2d50 30%, #1a5278 60%, #246890 100%);
}
.pagina-hero-content {
    position: relative;
    z-index: 1;
    max-width: 1080px;
    margin: 0 auto;
    width: 100%;
    text-align: center;
}

.pagina-breadcrumb {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.72rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 2.5rem;
    font-weight: 500;
}
.pagina-breadcrumb a {
    color: rgba(255, 255, 255, 0.75);
    transition: color 0.2s;
}
.pagina-breadcrumb a:hover { color: var(--gold-bright); }
.pagina-breadcrumb span[aria-hidden="true"] { color: rgba(255, 255, 255, 0.3); }

/* Breadcrumb no corpo (após o hero azul) */
.pagina-bc-strip {
    background: #f5f2ec;
    padding: 1.25rem 0 0;
    text-align: left;
}
.pagina-breadcrumb--content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.65rem;
    margin: 0;
    width: 100%;
    max-width: none;
    text-align: left;
    justify-content: flex-start;
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 600;
    color: rgba(26, 31, 46, 0.45);
}
.pagina-breadcrumb--content a {
    color: rgba(26, 31, 46, 0.55);
    transition: color 0.2s;
    text-decoration: none;
}
.pagina-breadcrumb--content a:hover {
    color: var(--gold);
}
.pagina-bc-sep {
    color: rgba(26, 31, 46, 0.2);
    font-weight: 400;
    user-select: none;
}
.pagina-bc-current {
    color: rgba(26, 31, 46, 0.85);
    font-weight: 700;
}
.pagina-bc-strip + .pagina-intro {
    padding-top: 2rem;
}
.pagina-bc-strip + .pagina-corpo {
    padding-top: 2rem;
}

.pagina-eyebrow {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.7rem;
    letter-spacing: 0.5em;
    text-transform: uppercase;
    color: var(--gold-bright);
    font-weight: 800;
    margin-bottom: 2rem;
    position: relative;
    display: inline-block;
    padding-bottom: 1.25rem;
}
.pagina-eyebrow::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 40px;
    height: 1px;
    background: var(--gold-bright);
    opacity: 0.8;
}

.pagina-titulo {
    font-family: 'Ibarra Real Nova', 'Cormorant Garamond', Georgia, serif;
    font-weight: 700;
    font-size: clamp(1.8rem, 4vw, 3rem);
    line-height: 1.02;
    letter-spacing: -0.01em;
    color: white;
    margin: 0 auto 1.75rem;
    max-width: 18ch;
    text-wrap: balance;
}

.pagina-subtitulo {
    font-family: 'Cormorant Garamond', 'Ibarra Real Nova', Georgia, serif;
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.1rem, 2vw, 1.5rem);
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.82);
    max-width: 56ch;
    margin: 0 auto 2.5rem;
    text-wrap: balance;
}

.pagina-meta {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    font-weight: 600;
    padding: 0.8rem 1.8rem;
    border-top: 1px solid rgba(212, 175, 55, 0.25);
    border-bottom: 1px solid rgba(212, 175, 55, 0.25);
}
.pagina-meta-sep { color: var(--gold-bright); opacity: 0.6; }

/* ----------------------------------------
   INTRO (parágrafo grande + initial letter)
   ---------------------------------------- */
.pagina-intro {
    background: #f5f2ec;
    padding: 5rem 0 2rem;
    position: relative;
}
.pagina-intro-body {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(1rem, 1.5vw, 1.2rem);
    line-height: 1.7;
    color: #2a3142;
    font-weight: 400;
}
.pagina-intro-body p { margin: 0 0 1.4em; }
.pagina-intro-body p:last-child { margin-bottom: 0; }
.pagina-intro-body em,
.pagina-intro-body i { color: #5a4a2a; font-style: italic; }

/* Initial letter (drop cap) — só no primeiro parágrafo da intro */
.pagina-intro-body > p:first-of-type::first-letter {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 600;
    font-size: 4.65em;
    line-height: 0.85;
    float: left;
    padding: 0.08em 0.12em 0 0;
    color: var(--gold);
    margin-top: 0.05em;
}

/* ----------------------------------------
   CORPO DO CONTEÚDO
   ---------------------------------------- */
.pagina-corpo {
    background: #f5f2ec;
    padding: 3rem 0 6rem;
}
.pagina-body {
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    line-height: 1.85;
    color: #1f2837;
    font-weight: 400;
}
.pagina-body > * + * { margin-top: 1.5em; }

/* Parágrafos */
.pagina-body p {
    margin: 0;
    line-height: 1.85;
}
.pagina-body p + p { margin-top: 1.4em; }

/* Títulos do corpo (H2) — estilo editorial com número ornamental */
.pagina-body h2 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 600;
    font-size: clamp(1.5rem, 2.5vw, 2.05rem);
    line-height: 1.15;
    color: #0c1a2e;
    margin: 3.5rem 0 1.2rem;
    letter-spacing: -0.01em;
    position: relative;
    padding-top: 1.5rem;
}
.pagina-body h2::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 50px;
    height: 2px;
    background: var(--gold);
}

.pagina-body h3 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 600;
    font-size: clamp(1.125rem, 1.65vw, 1.38rem);
    line-height: 1.3;
    color: #0c1a2e;
    margin: 2.5rem 0 1rem;
    letter-spacing: -0.005em;
}

/* Links inline — sublinhado dourado fininho que aparece elegante no hover */
.pagina-body a {
    color: #0c1a2e;
    text-decoration: underline;
    text-decoration-color: rgba(188, 156, 76, 0.45);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
.pagina-body a:hover {
    color: var(--gold-bright);
    text-decoration-color: var(--gold-bright);
}

/* Destaques */
.pagina-body strong { color: #0c1a2e; font-weight: 700; }
.pagina-body em { color: #4a3a1a; font-style: italic; }

/* Listas - com bullets/números dourados customizados */
.pagina-body ul,
.pagina-body ol {
    padding-left: 0;
    margin: 1.5em 0;
    list-style: none;
}
.pagina-body ul li,
.pagina-body ol li {
    position: relative;
    padding-left: 2.2rem;
    margin-bottom: 0.9em;
    line-height: 1.75;
}
.pagina-body ul li::before {
    content: "";
    position: absolute;
    left: 0.3rem;
    top: 0.75em;
    width: 8px;
    height: 8px;
    background: var(--gold);
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15);
}
.pagina-body ol {
    counter-reset: item;
}
.pagina-body ol li {
    counter-increment: item;
    padding-left: 3.5rem;
}
.pagina-body ol li::before {
    content: counter(item, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 0;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.6em;
    font-weight: 600;
    color: var(--gold);
    line-height: 1.1;
    letter-spacing: -0.02em;
}

/* Blockquote — pullquote editorial */
.pagina-body blockquote {
    margin: 2.5em 0;
    padding: 2rem 2.5rem;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(1.125rem, 1.9vw, 1.38rem);
    font-weight: 400;
    line-height: 1.5;
    color: #2a3142;
    background: transparent;
    border: none;
    border-left: 3px solid var(--gold);
    position: relative;
    text-wrap: balance;
}
.pagina-body blockquote::before {
    content: """;
    position: absolute;
    left: 1.3rem;
    top: -1.5rem;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 5.85rem;
    pointer-events: none;
}
.pagina-body blockquote p { margin: 0; }
.pagina-body blockquote p + p { margin-top: 0.8em; }

/* Imagens — respeita o tamanho definido no editor (atributo width/height ou inline style).
   max-width:100% impede estouro do container; height:auto preserva a proporção quando o
   max-width clampa a largura. NÃO usar width:auto aqui — ele sobrescreve o tamanho do editor. */
.pagina-body img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    margin: 2.5em auto;
    display: block;
    box-shadow: 0 20px 50px rgba(12, 26, 46, 0.15);
    background: transparent;
}
/* Fundo da página é creme, não branco: PNG com alpha é o ideal. Esta classe ajuda JPEG/PNG com “caixa” branca. */
.pagina-body img.pagina-img-fundo-pagina,
.pagina-body table img.pagina-img-fundo-pagina,
.pagina-body td img.pagina-img-fundo-pagina {
    mix-blend-mode: multiply;
    box-shadow: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    isolation: auto;
    margin: 0;
}

/* Célula e tabela pai precisam ser transparentes para o mix-blend-mode funcionar */
.pagina-body td:has(img.pagina-img-fundo-pagina),
.pagina-body tr:has(img.pagina-img-fundo-pagina),
.pagina-body table:has(img.pagina-img-fundo-pagina) {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

/* ----------------------------------------
   Vídeos embedados (YouTube / Vimeo)
   wrapper mantém 16:9 e o iframe enche o wrapper
   ---------------------------------------- */
.pagina-body .pagina-video {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin: 2.5em auto;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(12, 26, 46, 0.18);
    background: #000;
    clear: both;
}
.pagina-body .pagina-video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}
/* Fallback p/ navegadores sem aspect-ratio (raros) */
@supports not (aspect-ratio: 1) {
    .pagina-body .pagina-video { padding-top: 56.25%; height: 0; }
}
.pagina-body figure {
    margin: 2.5em auto;
    max-width: 100%;
}
.pagina-body figure img { margin: 0 auto; }
.pagina-body figcaption {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 0.82rem;
    color: #6b7280;
    text-align: center;
    margin-top: 1rem;
    font-style: italic;
}

/* Alinhamento de imagens (classes que o TinyMCE aplica) */
/* Default "icon-style": imagem pequena, texto flui ao lado.
   Use img-medium/img-large pra imagens maiores editorialmente. */
.pagina-body img.align-left,
.pagina-body figure.align-left {
    float: left;
    margin: 0.4em 1.8rem 0.8rem 0;
    max-width: 180px;
    box-shadow: none;
}
.pagina-body img.align-right,
.pagina-body figure.align-right {
    float: right;
    margin: 0.4em 0 0.8rem 1.8rem;
    max-width: 180px;
    box-shadow: none;
}
.pagina-body img.align-center,
.pagina-body figure.align-center {
    float: none;
    display: block;
    margin-left: auto;
    margin-right: auto;
    clear: both;
}

/* Tamanhos opcionais — sobrescrevem o default dos alignments */
.pagina-body img.img-small  { max-width: 140px; box-shadow: none; }
.pagina-body img.img-medium { max-width: 360px; }
.pagina-body img.img-large  { max-width: 680px; }

/* Limpa float só nos "grandes blocos" (nova seção) — h3 pode ficar ao lado da imagem */
.pagina-body h2,
.pagina-body .pagina-callout,
.pagina-body blockquote,
.pagina-body hr,
.pagina-body table,
.pagina-body figure + p::after {
    clear: both;
}
/* Truque pra o texto do parágrafo limpar o float quando necessário:
   Use <p class="clear"> se quiser forçar quebra */
.pagina-body .clear { clear: both; }

/* ----------------------------------------
   Cores opcionais em títulos
   ---------------------------------------- */
.pagina-body h2.titulo-dourado,
.pagina-body h3.titulo-dourado {
    color: var(--gold);
}
.pagina-body h2.titulo-dourado::before { background: var(--gold); }
.pagina-body h2.titulo-azul,
.pagina-body h3.titulo-azul {
    color: #4a90b8;
}
.pagina-body h2.titulo-azul::before { background: #4a90b8; }
/* Negrito/itálico dentro do título: senão .pagina-body strong/em ganham e “apagam” dourado/azul */
.pagina-body h2.titulo-dourado strong,
.pagina-body h3.titulo-dourado strong,
.pagina-body h2.titulo-dourado b,
.pagina-body h3.titulo-dourado b,
.pagina-body h2.titulo-azul strong,
.pagina-body h3.titulo-azul strong,
.pagina-body h2.titulo-azul b,
.pagina-body h3.titulo-azul b {
    color: inherit;
    font-weight: 700;
}
.pagina-body h2.titulo-dourado em,
.pagina-body h3.titulo-dourado em,
.pagina-body h2.titulo-azul em,
.pagina-body h3.titulo-azul em {
    color: inherit;
    font-style: italic;
}

/* Destaque dourado/azul sem virar H2: trecho dentro do parágrafo (negrito preservado) */
.pagina-body .titulo-dourado-texto,
.pagina-body .titulo-dourado-texto strong,
.pagina-body .titulo-dourado-texto b {
    color: var(--gold);
    font-weight: 700;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}
.pagina-body .titulo-azul-texto,
.pagina-body .titulo-azul-texto strong,
.pagina-body .titulo-azul-texto b {
    color: #4a90b8;
    font-weight: 700;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

/* ----------------------------------------
   Callouts — blocos com fundo (destaque editorial)
   ---------------------------------------- */
.pagina-body .pagina-callout {
    padding: 2.2rem 2.5rem;
    margin: 2.5em 0;
    border-radius: 8px;
    font-family: inherit;
    font-size: inherit;
    line-height: 1.75;
    position: relative;
}
.pagina-body .pagina-callout > *:first-child { margin-top: 0; }
.pagina-body .pagina-callout > *:last-child  { margin-bottom: 0; }
.pagina-body .pagina-callout p + p { margin-top: 1em; }
.pagina-body .pagina-callout h2,
.pagina-body .pagina-callout h3 {
    margin-top: 0;
    padding-top: 0;
    text-align: center;
}
.pagina-body .pagina-callout h2::before,
.pagina-body .pagina-callout h3::before { display: none; }

/* Variação dourada — estilo "O que NÃO é Pathwork" */
.pagina-body .pagina-callout.dourado {
    background: #ccb97a;
    color: #0c1a2e;
}
.pagina-body .pagina-callout.dourado strong { color: #0c1a2e; }
.pagina-body .pagina-callout.dourado em     { color: #2a3142; }
.pagina-body .pagina-callout.dourado a      { color: #0c1a2e; }

/* Variação azul claro */
.pagina-body .pagina-callout.azul-claro {
    background: #e8f0f7;
    color: #1f2837;
    border-left: 4px solid var(--gold);
}

/* Variação clara / nota */
.pagina-body .pagina-callout.nota {
    background: #fdf8ed;
    color: #4a3a1a;
    border: 1px solid rgba(212, 175, 55, 0.35);
}

/* Variação escura / destaque premium */
.pagina-body .pagina-callout.escuro {
    background: #0c1a2e;
    color: #f5f2ec;
}
.pagina-body .pagina-callout.escuro h2,
.pagina-body .pagina-callout.escuro h3 { color: var(--gold); }
.pagina-body .pagina-callout.escuro strong { color: var(--gold); }
.pagina-body .pagina-callout.escuro em     { color: #e8d6a4; }
.pagina-body .pagina-callout.escuro a      { color: var(--gold); }

/* Tabelas */
.pagina-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 2.5em 0;
    font-size: 1em;
}
.pagina-body th,
.pagina-body td {
    padding: 0.85rem 1rem;
    text-align: left;
    border-bottom: 1px solid rgba(12, 26, 46, 0.1);
}
.pagina-body th {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--gold);
    border-bottom: 2px solid var(--gold);
}

/* Mobile: tabelas de layout (imagem + texto) viram coluna — imagem em cima, texto abaixo */
@media (max-width: 640px) {
    .pagina-body table {
        display: block;
        width: 100% !important;
        box-sizing: border-box;
    }
    .pagina-body tbody {
        display: block;
        width: 100%;
    }
    /* Cada linha vira flex-column para controlar ordem */
    .pagina-body tr {
        display: flex;
        flex-direction: column;
        margin-bottom: 2rem;
        border-bottom: 1px solid rgba(12,26,46,0.1);
        padding-bottom: 1.5rem;
    }
    .pagina-body td,
    .pagina-body th {
        display: block;
        width: 100% !important;
        box-sizing: border-box;
        padding: 0.5rem 0;
        border-bottom: none;
    }
    /* Célula que contém imagem sobe para o topo */
    .pagina-body td:has(img) {
        order: -1;
    }
    .pagina-body td img {
        max-width: 240px !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 auto;
        display: block;
    }
}

/* Tabela só para layout (ícone | título + texto) — alinhamento estável; prefira a isso que img + float */
.pagina-body table.pagina-layout-media {
    width: 100%;
    border-collapse: collapse;
    margin: 2rem 0;
    border: none;
    table-layout: fixed;
}
.pagina-body table.pagina-layout-media th,
.pagina-body table.pagina-layout-media td {
    border: none;
    vertical-align: top;
    padding: 0.35rem 0 1.25rem;
}
.pagina-body table.pagina-layout-media td:first-child {
    width: 92px;
    max-width: 92px;
    padding-right: 1rem;
}
.pagina-body table.pagina-layout-media td:first-child img {
    max-width: 80px !important;
    width: 80px;
    height: auto;
    margin: 0 !important;
    float: none !important;
    display: block;
    box-shadow: none !important;
    border-radius: 8px;
    background: transparent;
    /* Branco “puro” do ícone some no creme; prefira sempre PNG/SVG com transparência real */
    mix-blend-mode: multiply;
}
.pagina-body table.pagina-layout-media td:last-child p {
    margin: 0 0 0.9em;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}
.pagina-body table.pagina-layout-media td:last-child p:first-child {
    margin-top: 0;
}

/* hr decorativo */
.pagina-body hr {
    border: none;
    margin: 3.5em auto;
    width: 60px;
    height: 1px;
    background: var(--gold);
    position: relative;
}
.pagina-body hr::before,
.pagina-body hr::after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 4px;
    background: var(--gold);
    border-radius: 50%;
}
.pagina-body hr::before { left: -20px; }
.pagina-body hr::after  { right: -20px; }

/* ----------------------------------------
   CTA FINAL
   ---------------------------------------- */
.pagina-cta {
    padding: 0 1.5rem 6rem;
    background: #f5f2ec;
}
.pagina-cta-inner {
    max-width: 820px;
    margin: 0 auto;
    padding: 4rem 3rem;
    background: transparent;
    border: none;
    border-radius: 0;
    color: #0c1a2e;
    position: relative;
    overflow: hidden;
    text-align: center;
    box-shadow: 0 30px 80px rgba(12, 26, 46, 0.2);
}
.pagina-cta-ornament {
    display: none;
    pointer-events: none;
}
.pagina-cta-titulo {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 500;
    font-size: clamp(1.5rem, 2.5vw, 2.05rem);
    position: relative;
    color: #0c1a2e;
    text-wrap: balance;
}
.pagina-cta-texto {
    font-size: 1.05rem;
    line-height: 1.65;
    color: rgba(12, 26, 46, 0.70);
    max-width: 54ch;
    margin: 0 auto 2.5rem;
    position: relative;
    text-wrap: balance;
}
.pagina-cta-btn {
    display: inline-flex;
    align-items: center;
    padding: 1rem 2.4rem;
    background: var(--gold-bright);
    color: #0c1a2e;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.7rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    font-weight: 800;
    border-radius: 999px;
    transition: transform 0.25s, box-shadow 0.25s, background 0.25s;
    position: relative;
    box-shadow: 0 15px 30px rgba(212, 175, 55, 0.25);
}
.pagina-cta-btn:hover {
    transform: translateY(-2px);
    background: #e8c157;
    box-shadow: 0 20px 40px rgba(212, 175, 55, 0.35);
}
.pagina-btn-escuro {
    display: inline-block;
    padding: .65rem 2rem;
    background: #1e3a45;
    color: #fff !important;
    font-family: 'Montserrat', sans-serif;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .05em;
    border-radius: .6rem;
    text-decoration: none !important;
    transition: opacity .2s;
}
.pagina-btn-escuro:hover { opacity: .85; }

/* ----------------------------------------
   INSTITUCIONAL (faixa compacta — mesmo verde da .regional-section na index)
   ---------------------------------------- */
.pagina-inst-strip {
    padding: 3.25rem 0 3.5rem;
    border-top: 1px solid rgba(30, 58, 69, 0.12);
    background-color: var(--regional-green);
    color: var(--navy-text);
}
.pagina-inst-strip-inner {
    display: grid;
    gap: 2rem 3rem;
    align-items: start;
}
@media (min-width: 900px) {
    .pagina-inst-strip-inner {
        grid-template-columns: minmax(0, 1fr) auto;
    }
}
.pagina-inst-eyebrow {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.78rem;
    letter-spacing: 0.38em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.92);
    font-weight: 800;
    margin: 0 0 0.85rem;
}
.pagina-inst-title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(1.6rem, 2.35vw, 2.08rem);
    font-weight: 700;
    line-height: 1.15;
    color: var(--navy-text);
    margin: 0 0 1.1rem;
}
.pagina-inst-text {
    font-size: 1.125rem;
    line-height: 1.68;
    color: rgba(30, 58, 69, 0.9);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.pagina-inst-actions {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}
@media (min-width: 900px) {
    .pagina-inst-actions {
        padding-top: 0.35rem;
        border-left: 1px solid rgba(30, 58, 69, 0.22);
        padding-left: 2rem;
    }
}
.pagina-inst-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.85rem 1.65rem;
    border: 1.5px solid white;
    color: white;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.74rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-weight: 800;
    border-radius: 999px;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    text-decoration: none;
    white-space: nowrap;
}
.pagina-inst-primary:hover {
    background: white;
    color: var(--regional-green);
    border-color: white;
}
.pagina-inst-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.35rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.pagina-inst-links a {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.74rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 700;
    color: rgba(30, 58, 69, 0.72);
    text-decoration: none;
    border-bottom: 1px solid rgba(30, 58, 69, 0.35);
    padding-bottom: 0.15rem;
    transition: color 0.2s, border-color 0.2s;
}
.pagina-inst-links a:hover {
    color: var(--navy-text);
    border-bottom-color: var(--navy-text);
}

/* ----------------------------------------
   CONTINUE LENDO
   ---------------------------------------- */
.pagina-continue {
    background: #ebe6dd;
    padding: 6rem 0;
    border-top: 1px solid rgba(12, 26, 46, 0.08);
}
.pagina-continue-header {
    text-align: center;
    margin-bottom: 3.5rem;
}
.pagina-continue-eyebrow {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.7rem;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--gold);
    font-weight: 800;
    margin: 0 0 0.8rem;
}
.pagina-continue-titulo {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 500;
    font-size: clamp(1.65rem, 2.4vw, 2.18rem);
    color: #0c1a2e;
    margin: 0;
}
.pagina-continue-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}
.pagina-continue-card {
    display: flex;
    flex-direction: column;
    background: #f5f2ec;
    border-radius: 10px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    color: inherit;
}
.pagina-continue-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 25px 50px rgba(12, 26, 46, 0.12);
}
.pagina-continue-card-img {
    aspect-ratio: 16 / 10;
    background-size: cover;
    background-position: center;
    background-color: #c8c0b0;
}
.pagina-continue-card-body { padding: 1.8rem 1.8rem 2rem; }
.pagina-continue-card-eyebrow {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.65rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--gold);
    font-weight: 700;
    margin: 0 0 0.8rem;
}
.pagina-continue-card-titulo {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 600;
    font-size: 1.3rem;
    line-height: 1.2;
    color: #0c1a2e;
    margin: 0 0 0.8rem;
    text-wrap: balance;
}
.pagina-continue-card-subtitulo {
    font-size: 0.92rem;
    line-height: 1.55;
    color: #4a5468;
    margin: 0 0 1.5rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.pagina-continue-card-link {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.7rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--gold);
    font-weight: 700;
    transition: letter-spacing 0.25s;
}
.pagina-continue-card:hover .pagina-continue-card-link { letter-spacing: 0.22em; }

/* ----------------------------------------
   404
   ---------------------------------------- */
.pagina-404 {
    background: linear-gradient(135deg, #0c1a2e 0%, #1a3a5c 100%);
    color: white;
}

/* ----------------------------------------
   RESPONSIVO
   ---------------------------------------- */
@media (max-width: 768px) {
    /* No mobile o header é menor (logo h-14 + py-6 ≈ 7rem) — solta um pouco a lateral */
    .pagina-hero { padding-left: 1.25rem; padding-right: 1.25rem; padding-bottom: 1.75rem; }
    .pagina-intro { padding: 3.5rem 0 1.5rem; }
    .pagina-intro-body > p:first-of-type::first-letter { font-size: 3.35em; }
    .pagina-cta { padding: 0 1rem 4rem; }
    .pagina-cta-inner { padding: 2.5rem 1.5rem; }
    .pagina-cta-ornament { width: 220px; height: 220px; top: -25%; right: -25%; }
    .pagina-body blockquote { padding: 1.5rem 1.5rem 1.5rem 1.8rem; margin: 2em 0; }
    .pagina-body blockquote::before { font-size: 4.25rem; top: -1rem; left: 0.8rem; }
    .pagina-corpo { padding: 2rem 0 3.5rem; }
    .pagina-content-width,
    .pagina-content-width-wide { padding: 0 1.25rem; }
    .pagina-continue { padding: 3.5rem 0; }
    .pagina-continue-header { margin-bottom: 2.25rem; }
    .pagina-continue-grid { grid-template-columns: 1fr; gap: 1.5rem; }
    .pagina-continue-card-body { padding: 1.4rem 1.4rem 1.6rem; }
    .pagina-inst-strip { padding: 2.5rem 0 2.75rem; }
    .pagina-inst-strip-inner { gap: 1.5rem; }
    .pagina-body { font-size: 0.95rem; }
    .pagina-body ul li, .pagina-body ol li { padding-left: 1.8rem; }
    .pagina-body ol li { padding-left: 2.6rem; }
    .pagina-body img.align-left,
    .pagina-body figure.align-left,
    .pagina-body img.align-right,
    .pagina-body figure.align-right {
        float: none;
        margin: 1.5em auto;
        max-width: 100%;
        display: block;
    }

    /* 404 */
    .pagina-404 .serif-font { font-size: 2.1rem; line-height: 1.1; }
}