/* ═══ DESIGN TOKENS — espelhados do site institucional ═══ */
:root {
    --ink: 248 50% 20%; /* #241a4e roxo profundo  */
    --plum: 290 36% 27%; /* #532c5e ameixa         */
    --wine: 327 38% 35%; /* #7a3760 vinho          */
    --magenta: 339 78% 59%; /* #e8447a magenta vivo   */
    --gold: 36 91% 55%;
    --emerald: 149 78% 33%;
    --bg: 60 9% 98%;
    --fg: 248 50% 12%;

    --grad-aurora: linear-gradient(180deg, hsl(257 39% 20% / 1) 0%, hsl(290 36% 22%) 100%);
    --grad-emerald: linear-gradient(135deg, hsl(var(--emerald)) 0%, hsl(149 78% 28%) 100%);
    --glow-emerald: 0 20px 60px -15px hsl(132 60% 42% / .45);
}

*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
}

body {
    color: hsl(var(--fg));
    background: hsl(var(--bg));
    -webkit-font-smoothing: antialiased;
    display: flex;
    flex-direction: column;
}

h1 {
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 800;
}

h1, h2, h3, h4, h5 {
    letter-spacing: -0.02em;
    margin: 0;
}

a {
    color: inherit;
    text-decoration: none;
    font-weight: normal;
}

.mt-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* ═══ BACKGROUND AURORA (mesmo do Hero institucional) ═══ */
.mt-aurora {
    background: var(--grad-aurora);
    color: #fff;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

/* blobs suaves opcionais — dão profundidade igual ao Hero */
.mt-aurora::before,
.mt-aurora::after {
    content: "";
    position: absolute;
    border-radius: 9999px;
    filter: blur(150px);
    opacity: .35;
    pointer-events: none;
    z-index: 0;
}

.mt-aurora::before {
    width: 520px;
    height: 520px;
    background: hsl(339 78% 35% / 1);
    top: 0;
    right: -135px;
}

.mt-aurora::after {
    width: 460px;
    height: 460px;
    background: hsl(var(--plum));
    bottom: -200px;
    left: -160px;
}

.mt-aurora > * {
    position: relative;
    z-index: 1;
}

/* ═══ HEADER ═══ */
.mt-header {
    position: sticky;
    top: 0;
    z-index: 30;
}

.mt-header-inner {
    background: linear-gradient(45deg, #231a4d 0%, #4b2754 80%, #702e5f 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, .10);
}

.mt-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    height: 66px;
}

.mt-logo {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    color: #fff;
}

.mt-logo svg {
    width: 28px;
    height: 28px;
    color: hsl(var(--magenta));
}

.mt-logo-text {
    font-weight: 800;
    font-size: 1.05rem;
    letter-spacing: -0.01em;
}

.mt-logo-text span {
    color: hsl(var(--magenta));
}

.mt-nav {
    display: none;
    align-items: center;
    gap: .25rem;
}

@media (min-width: 992px) {
    .mt-nav {
        display: inline-flex;
    }
}

.mt-nav a {
    padding: .375rem .75rem;
    border-radius: 6px;
    font-size: 1.10rem;
    font-weight: 500;
    color: rgba(255, 255, 255, .8);
    transition: background .15s, color .15s;
}

.mt-nav a:hover {
    background: rgba(255, 255, 255, .05);
    color: #fff;
}

.mt-nav .mt-chip {
    color: hsl(var(--magenta));
    font-weight: 800;
    letter-spacing: .15em;
    text-transform: uppercase;
    font-size: 0.90rem;
}

@media (max-width: 500px) {
    .mt-header-row {
        height: 110px;
    }

    .mt-header-actions {
        flex-direction: column;

        .mt-btn {
            width: 100%;
        }

        .mt-btn-redondo {
            gap: 16px;
        }
    }


}

.mt-header-actions {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

.mt-btn {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: 9px 14px;
    border-radius: 15px;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid transparent;
    transition: transform .15s, background .15s;
    font-size: 1.15rem;
}

.mt-btn-ghost {
    border-color: rgba(255, 255, 255, .15);
    background: rgba(255, 255, 255, .05);
    color: rgba(255, 255, 255, .85);
}

.mt-btn-ghost:hover {
    background: rgba(255, 255, 255, .10);
    color: #fff;
}

.mt-btn-primary {
    background: var(--grad-emerald);
    color: #fff;
    font-weight: 600;
    box-shadow: var(--glow-emerald);
}

.mt-btn-redondo {
    border-radius: 17px;
}

.mt-btn-primary:hover {
    transform: scale(1.02);
}

/* ═══ CONTEÚDO ═══ */
.mt-content {
    padding: 7rem 0;
    min-height: 50vh;
    flex-grow: 1;

}

.mt-aurora .mt-content {
    color: #fff;
}

/* ═══ FOOTER ═══ */
.mt-footer {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: hsl(var(--ink));
    color: rgba(255, 255, 255, .75);
    padding: 0 2.5rem;
}

.mt-footer-pattern {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: .02;
}

.mt-footer-inner {
    padding: 6rem 0 0 0;
}

.mt-footer-grid {
    display: grid;
    gap: 2.5rem;
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .mt-footer-grid {
        grid-template-columns: 1fr 150px 150px 180px;
        column-gap: 85px;
    }
}

.mt-footer h5 {
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .15em;
    margin-bottom: 1rem;
}

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

.mt-footer li {
    margin-bottom: .625rem;
    font-size: 1rem;
}

.mt-footer li a {
    transition: color .15s;
}

.mt-footer li a:hover {
    color: hsl(var(--magenta));
}

.mt-footer p {
    font-size: 1.05rem;
    line-height: 1.6;
    max-width: 30rem;
}

.mt-socials {
    display: inline-flex;
    gap: .40rem;
    margin-top: 1.25rem;
    font-size: 18px;
}

.mt-socials a {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, .10);
    background: rgba(255, 255, 255, .05);
    transition: background .15s, color .15s;
}

.mt-socials a:hover {
    background: hsl(var(--magenta));
    color: #fff;
}

.mt-footer-bottom {
    margin-top: 3rem;
    padding-top: 1.5rem;
    padding-bottom: 4.5rem;
    border-top: 1px solid rgba(255, 255, 255, .10);
    font-size: 12px;
    color: rgba(255, 255, 255, .55);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
}

@media (min-width: 768px) {
    .mt-footer-bottom {
        flex-direction: row;
        align-items: flex-start;
        flex-wrap: wrap;
        row-gap: 1.5rem;
    }
}

.mt-footer-bottom strong {
    color: #fff;
    font-weight: 600;
}

.mt-platinum-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 63px;
    flex-shrink: 0;
    transition: opacity .2s;
}

.mt-platinum-badge:hover {
    opacity: .9;
}

.mt-platinum-badge img {
    height: 78px;
    width: auto;
    object-fit: contain;
    margin: -4px -9px -9px -8px; /* compensa padding transparente do PNG */
}

.mt-footer-divider {
    height: 63px;
    border-right: 1px solid rgba(255, 255, 255, .10);
}

.mt-footer-text-iso {
    position: absolute;
    left: 50%;
    top: 100%;
    margin-top: 4px;
    transform: translateX(-50%);
    white-space: nowrap;
    font-size: 7px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: rgba(255, 255, 255, .55);
}

/* ═══ PAGE BUTTONS — botões reutilizáveis nas páginas do template-auxiliar ═══
   Uso: styleClass="mt-page-btn mt-page-btn--primary"  ou  "mt-page-btn mt-page-btn--ghost"
   Cor do primário padrão: verde. Sobrescreva --page-accent nas páginas que precisarem.
*/
:root {
    --page-accent:      hsl(149 78% 33%); /* verde padrão — sobrescreva por página apenas se necessário */
    --page-accent-dark: hsl(149 78% 27%);
}

.mt-page-btn.ui-button {
    font-size: .95rem !important;
    font-weight: 500 !important;
    transition: background .15s, color .15s, border-color .15s, transform .12s, filter .12s !important;
    line-height: normal !important;
}

.mt-page-btn--primary.ui-button {
    border-radius: 50px !important;
    background: var(--page-accent) !important;
    border-color: var(--page-accent-dark, var(--page-accent)) !important;
    color: #fff !important;
    font-weight: 600 !important;
}

.mt-page-btn--primary.ui-button:enabled:hover {
    filter: brightness(1.1) !important;
    transform: scale(1.02) !important;
    background: var(--page-accent) !important;
    border-color: var(--page-accent-dark, var(--page-accent)) !important;
    color: #fff !important;
}

.mt-page-btn--ghost.ui-button {
    border-radius: 12px !important;
    background: rgba(255, 255, 255, .07) !important;
    border: 1px solid rgba(255, 255, 255, .18) !important;
    color: rgba(255, 255, 255, .82) !important;
}

.mt-page-btn--ghost.ui-button:enabled:hover {
    background: rgba(255, 255, 255, .13) !important;
    border-color: rgba(255, 255, 255, .25) !important;
    color: #fff !important;
    transform: none !important;
    filter: none !important;
}

/* estado desabilitado */
.mt-page-btn--primary.ui-button.ui-state-disabled,
.mt-page-btn--ghost.ui-button.ui-state-disabled {
    opacity: .42 !important;
    cursor: not-allowed !important;
    pointer-events: none;
    transform: none !important;
    filter: none !important;
}

/* ═══ ANIMAÇÕES DE ENTRADA — compartilhadas entre páginas do template-auxiliar ═══
   Uso: adicione pg-a1 … pg-a5 aos elementos para entrada escalonada.
*/
@keyframes page-enter {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

.pg-a1 { animation: page-enter .65s cubic-bezier(.22, .68, 0, 1.1) .05s both; }
.pg-a2 { animation: page-enter .65s cubic-bezier(.22, .68, 0, 1.1) .20s both; }
.pg-a3 { animation: page-enter .65s cubic-bezier(.22, .68, 0, 1.1) .34s both; }
.pg-a4 { animation: page-enter .65s cubic-bezier(.22, .68, 0, 1.1) .46s both; }
.pg-a5 { animation: page-enter .65s cubic-bezier(.22, .68, 0, 1.1) .57s both; }

@keyframes watermark-drift {
    0%   { transform: translate(0, 0); }
    20%  { transform: translate(-22px, 16px); }
    45%  { transform: translate(-32px, 38px); }
    70%  { transform: translate(12px, 30px); }
    88%  { transform: translate(20px, 10px); }
    100% { transform: translate(0, 0); }
}

/* ═══ PAGE STRUCTURE — componentes de layout comuns a todas as páginas do template-auxiliar ═══
   Hero, watermark, tipografia, card glassmorphism, separador, hint.
   Estilos exclusivos de cada página (cor do ícone, animações de marca, overrides de acento)
   ficam no <style> da própria página.
*/

/* container principal da página */
.mt-page-hero {
    position: relative;
    isolation: isolate;
    overflow-x: clip;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1rem 1rem 3rem;
}

/* ícone/texto decorativo em baixa opacidade, deslocado para a direita */
.mt-page-watermark {
    position: absolute;
    top: -10%;
    right: 2%;
    font-size: clamp(16rem, 55vw, 28rem);
    color: rgba(255, 255, 255, .03);
    line-height: 1;
    pointer-events: none;
    user-select: none;
    z-index: -1;
    animation: page-enter 1.4s ease both, watermark-drift 22s ease-in-out 1.4s infinite;
}

/* tipografia */
.mt-page-title {
    font-size: clamp(2.5rem, 5.5vw, 3.75rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    color: #fff;
    line-height: 1.1;
    margin: 0 0 .8rem;
}

.mt-page-sub {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, .62);
    margin: 0 0 2.75rem;
    width: min(640px, 100%);
}

/* linha de botões de ação */
.mt-page-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .625rem;
    justify-content: center;
}

/* linha separadora entre seções */
.mt-page-sep {
    width: min(640px, 100%);
    height: 1px;
    background: rgba(255, 255, 255, .08);
    margin: 3rem 0 2.5rem;
}

/* card glassmorphism — visual base; layout (flex, width, etc.) é definido pela página */
.mt-page-card {
    background: rgba(255, 255, 255, .055);
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 16px;
    padding: 1.5rem 1.75rem;
    backdrop-filter: blur(14px);
}

/* label uppercase dentro do card */
.mt-page-card-label {
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .16em;
    color: hsl(149 78% 58%);
    margin-bottom: .75rem;
}

/* parágrafo e link dentro do card */
.mt-page-card p {
    color: rgba(255, 255, 255, .7);
    font-size: .975rem;
    line-height: 1.65;
    margin: 0;
}

.mt-page-card ul,
.mt-page-card ol {
    line-height: 1.7;
    margin: .5rem 0 0;
    padding-left: 3.25rem;
}

.mt-page-card a {
    color: rgba(255, 255, 255, .85);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color .15s;
}

.mt-page-card a:hover { color: #fff; }

/* texto de instrução/dica — usado dentro de cards ou próximo a forms */
.mt-page-hint {
    font-size: .975rem;
    color: rgba(255, 255, 255, .65);
    line-height: 1.6;
}

.mt-page-hint strong { color: #fff; }