/* =========================================================
   BASE / TEMA
   ========================================================= */

:root {
    --bg-dark: #0c0c0c;
    --bg-light: #ffffff;

    --text-light: #ffffff;
    --text-dark: #101010;
    --text-muted: #b0b0b0;
    --text-muted-light: #666;

    --accent-blue: #0078d4;
    --accent-blue-hover: #1085e4;
    --ricardo-blue: #1c5ece;

    --border-color: #262626;
    --border-color-light: #e0e0e0;

    --badge-yellow: #f7d64a;
    --badge-yellow-text: #111;

    --card-bg-dark: #151515;
    --card-bg-soft: #10141c;
    --card-bg-nav: #111318;
    --card-elevated: rgba(255, 255, 255, 0.04);

    --shadow-soft: 0 18px 45px rgba(0, 0, 0, 0.55);
    --shadow-subtle: 0 10px 30px rgba(0, 0, 0, 0.4);

    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 14px;
    --radius-full: 999px;

    --transition-fast: 0.18s ease-out;
    --transition-med: 0.28s ease-out;
}

/* Reset básico */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
    margin: 0;
}

html {
    overflow-x: hidden;
    overflow-y: auto;
}

body {
    background: radial-gradient(circle at top, #181818 0, #050505 55%, #000 100%);
    color: var(--text-light);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", sans-serif;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Elementos básicos */

img {
    max-width: 100%;
    display: block;
}

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

/* =========================================================
   LAYOUT PRINCIPAL
   ========================================================= */

main.container {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 5rem 3rem;
    position: relative;
    box-sizing: border-box;
    animation: page-enter 0.5s ease-out 0.12s backwards;
}

/* Animação suave ao entrar em qualquer página (sem blur para evitar pisque) */
@keyframes page-enter {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Layout centralizado (index, página 7) */
.content-centered {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
}

.content-centered > .main-content {
    max-width: 780px;
    margin-bottom: 2rem;
}

/* Layout dividido (texto + mockup) */
.content-split {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 4rem;
    width: 100%;
}

/* Bloco de texto à esquerda */
.text-container {
    flex-basis: 36%;
    max-width: 460px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 360px; /* ajuda a manter botões nivelados entre páginas */
}

/* Conteúdo textual principal dentro do bloco */
.main-content {
    flex-grow: 1;
}

/* Mockup / imagem à direita */
.media-container {
    flex-basis: 64%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.media-image {
    max-width: 100%;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    background-color: #ffffff;
}

/* Ícone circular no topo (index) */
.icon-wrapper {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-blue);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
    margin-bottom: 1.25rem;
    animation: icon-float 4s ease-in-out infinite;
}

@keyframes icon-float {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-6px);
    }
    100% {
        transform: translateY(0);
    }
}

/* =========================================================
   TIPOGRAFIA
   ========================================================= */

h1,
h2,
h3,
p {
    margin: 0;
}

h1 {
    font-weight: 600;
    font-size: clamp(2.6rem, 4vw + 1rem, 4.5rem);
    line-height: 1.08;
    margin: 1.5rem 0 0.75rem;
    white-space: normal; /* evita corte do título */
    background: linear-gradient(to right, #0D3B4C, #A9CCE3, #ffffff);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    animation: title-gradient 8s ease-in-out 1s infinite alternate;
}

@keyframes title-gradient {
    from {
        background-position: 0% 50%;
    }
    to {
        background-position: 100% 50%;
    }
}

h2 {
    font-size: clamp(1.9rem, 2.6vw, 2.4rem);
    line-height: 1.2;
    margin-bottom: 1.1rem;
}

p {
    font-size: 0.98rem;
    line-height: 1.6;
    color: var(--text-light);
}

.secondary-description {
    margin-top: 0.6rem;
    color: var(--text-muted);
}

.final-title {
    font-size: clamp(2rem, 3vw, 2.6rem);
    margin-bottom: 1.75rem;
}

.final-description {
    font-size: 0.94rem;
    line-height: 1.55;
    max-width: 60ch;
    margin: 0 auto;
    color: var(--text-muted);
}

.ricardo-text {
    font-size: 1rem;
    font-weight: 500;
}

/* Negrito sem mudar a cor do tema */
strong,
b {
    font-weight: 600;
    color: inherit;
}

/* =========================================================
   TAG / BADGE
   ========================================================= */

.tag-novo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.1rem 0.75rem;
    margin-bottom: 0.9rem;
    border-radius: var(--radius-full);
    background-color: var(--badge-yellow);
    color: var(--badge-yellow-text);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* =========================================================
   BOTÕES
   ========================================================= */

.btn {
    cursor: pointer;
    border: 1px solid transparent;
    text-decoration: none;
    font-family: inherit;
    box-sizing: border-box;
    transition:
        background-color var(--transition-fast),
        color var(--transition-fast),
        border-color var(--transition-fast),
        transform 0.18s ease-out,
        box-shadow 0.18s ease-out;
}

.navigation-buttons {
    display: flex;
    gap: 8px;
    margin-top: 2rem;
}

.btn-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    border-radius: var(--radius-md);
    background-color: var(--card-bg-nav);
    border: 1px solid var(--border-color);
    color: var(--text-light);
    font-weight: 600;
    font-size: 0.86rem;
    padding: 0 1.4rem;
    min-width: 140px;
}

.btn-nav.btn-primary {
    background: linear-gradient(135deg, var(--accent-blue), var(--accent-blue-hover));
    border-color: transparent;
    box-shadow: 0 10px 25px rgba(0, 120, 212, 0.35);
}

.btn-nav:not(.btn-primary) {
    width: 48px;
    padding: 0;
}

.btn-nav svg {
    width: 17px;
    height: 17px;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}

.btn-nav:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
}

.btn-nav.btn-primary:hover {
    background: linear-gradient(135deg, var(--accent-blue-hover), #21a0f5);
}

.btn-nav:active {
    transform: translateY(0);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6);
}

/* =========================================================
   PÁGINA 4 – CORE / CARDS / DETALHE
   ========================================================= */

/* As duas seções (grid e detalhe) ocupam a mesma área do main */
.page-section {
    position: absolute;
    inset: 2rem 5rem 3rem 5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3.5rem;
    opacity: 0;
    pointer-events: none;
    transform: translateX(12px);
    transition:
        opacity 0.35s var(--transition-med),
        transform 0.35s var(--transition-med);
}

.page-section.active {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
}

.page-section.exiting {
    opacity: 0;
    pointer-events: none;
    transform: translateX(-12px);
}

/* Grid de cards do Core */
.card-grid {
    flex-basis: 64%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.4rem;
}

.feature-card {
    position: relative;
    padding: 1.1rem 1rem;
    border-radius: var(--radius-lg);
    background: radial-gradient(circle at top left, rgba(255, 255, 255, 0.06), rgba(10, 10, 10, 0.96));
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: var(--shadow-subtle);
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    cursor: pointer;
    overflow: hidden;
    transition:
        transform 0.18s ease-out,
        box-shadow 0.18s ease-out,
        border-color 0.18s ease-out,
        background 0.2s ease-out;
}

.feature-card::before {
    content: "";
    position: absolute;
    inset: -40%;
    background: radial-gradient(circle at top, rgba(33, 150, 243, 0.16), transparent 60%);
    opacity: 0;
    transition: opacity 0.25s ease-out;
}

.feature-card:hover {
    transform: translateY(-3px) translateZ(0);
    border-color: rgba(82, 179, 255, 0.85);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.7);
}

.feature-card:hover::before {
    opacity: 1;
}

.feature-card strong {
    font-size: 0.95rem;
}

.feature-card span {
    font-size: 0.82rem;
    color: var(--text-muted);
}

/* Ícone ou miniatura dentro do card */
.feature-card .feature-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.06);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.4rem;
}

/* Miniatura de imagem ao lado do texto */
.card-image-wrapper {
    margin-top: 0.2rem;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

/* Overlay de vidro para quando abre o detalhe */
#detail-overlay {
    position: fixed;
    inset: 0;
    background: radial-gradient(circle at center, rgba(15, 30, 60, 0.75), rgba(3, 3, 3, 0.85));
    backdrop-filter: blur(18px);
    opacity: 0;
    pointer-events: none;
    transition:
        opacity 0.35s ease-out,
        backdrop-filter 0.35s ease-out;
    z-index: 40;
}

#detail-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

/* Detalhe do módulo (tema claro dentro do ambiente escuro) */
#detail-view.theme-light {
    background: rgba(250, 250, 252, 0.98);
    border-radius: 20px;
    box-shadow: 0 26px 70px rgba(0, 0, 0, 0.75);
    color: var(--text-dark);
    inset: 3rem 6rem;
    padding: 2.2rem 2.5rem;
    z-index: 50;
}

#detail-view.theme-light .main-content h2 {
    color: var(--text-dark);
}

#detail-view.theme-light p {
    color: var(--text-muted-light);
    font-size: 0.95rem;
}

/* Botões de fechar */
.close-detail-btn,
.close-detail-btn-bottom {
    border: none;
    background: transparent;
    cursor: pointer;
    color: inherit;
    font-size: 1.2rem;
    opacity: 0.6;
    transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.close-detail-btn {
    position: absolute;
    top: 1.2rem;
    right: 1.2rem;
}

.close-detail-btn-bottom {
    margin-top: 1.5rem;
}

.close-detail-btn:hover,
.close-detail-btn-bottom:hover {
    opacity: 1;
    transform: scale(1.05);
}

/* =========================================================
   PÁGINA 7 – QR CODE / CARDS DE AÇÃO
   ========================================================= */

.header-icon-container {
    position: absolute;
    top: 1.5rem;
    right: 5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.header-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: radial-gradient(circle at top, rgba(255, 255, 255, 0.2), rgba(30, 50, 70, 0.3));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    transition:
        transform 0.18s ease-out,
        box-shadow 0.18s ease-out,
        border-color 0.18s ease-out,
        background 0.18s ease-out;
}

.header-icon svg {
    width: 18px;
    height: 18px;
}

.header-icon:hover {
    transform: translateY(-1px);
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.6);
}

/* Setinha ao lado do ícone */
.qr-arrow {
    font-size: 0.9rem;
    opacity: 0.7;
}

/* Pop-up de QR code */
.qr-popup {
    position: absolute;
    top: 52px;
    right: 0;
    padding: 0.8rem 0.9rem 0.9rem;
    border-radius: var(--radius-lg);
    background: rgba(8, 10, 18, 0.97);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.85);
    min-width: 220px;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    opacity: 0;
    transform: translateY(6px) scale(0.97);
    pointer-events: none;
    transition:
        opacity 0.22s ease-out,
        transform 0.22s ease-out;
    z-index: 60;
}

.qr-popup img {
    border-radius: var(--radius-md);
    background: #ffffff;
}

.qr-popup p {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.qr-popup.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

/* Cards de ação (última página) */
.action-cards-container {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.2rem;
    margin-top: 2rem;
}

.action-card {
    padding: 1rem 1.1rem;
    border-radius: var(--radius-lg);
    background: radial-gradient(circle at top left, rgba(255, 255, 255, 0.08), rgba(9, 9, 9, 0.95));
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: var(--shadow-subtle);
    font-size: 0.9rem;
    color: var(--text-muted);
    text-align: left;
    transition:
        transform 0.18s ease-out,
        box-shadow 0.18s ease-out,
        border-color 0.18s ease-out,
        background 0.2s ease-out;
}

.action-card strong {
    display: block;
    margin-bottom: 0.35rem;
}

.action-card:hover {
    transform: translateY(-2px);
    border-color: rgba(98, 179, 255, 0.9);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.8);
}

/* =========================================================
   SUB-FOOTER / PROGRESSO / RODAPÉ
   ========================================================= */

.sub-footer {
    width: 100%;
    padding: 0.75rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: rgba(0, 0, 0, 0.92);
    backdrop-filter: blur(14px);
    box-sizing: border-box;
    flex-shrink: 0;
    position: relative; /* <- adiciona isso */
}



.sub-footer-logo {
    width: 22px;
    height: 18px;
    border-radius: 3px;
    object-fit: contain;
}

.sub-footer-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.footer-logo {
    width: 22px;
    height: auto;
    flex-shrink: 0;
}


.sub-footer-center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none; /* eles não são clicáveis, então não atrapalha nada */
}


.progress-dots {
    display: flex;
    gap: 8px;
}

.dot {
    width: 30px;
    height: 3px;
    border-radius: 2px;
    background-color: var(--border-color);
}

.dot.active {
    background-color: var(--text-light);
}

.sub-footer-right {
    display: flex;
    justify-content: flex-end;
    min-width: 140px;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.main-footer {
    width: 100%;
    padding: 0.75rem 1.5rem;
    background-color: #000;
    border-top: 1px solid var(--border-color);
    box-sizing: border-box;
    flex-shrink: 0;

    /* garante centralização em qualquer resolução */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;

    font-size: 12px;
    color: var(--text-muted);
}

.main-footer span {
    display: block;
    max-width: 100%;
}


/* =========================================================
   RESPONSIVIDADE
   ========================================================= */

@media (max-width: 1200px) {
    main.container {
        padding: 2.25rem 3.5rem 2.8rem;
    }

    .page-section {
        inset: 2rem 3.5rem 2.8rem 3.5rem;
    }

    .header-icon-container {
        right: 3.5rem;
    }
}

@media (max-width: 900px) {
    .content-split {
        gap: 2.6rem;
    }
}

@media (max-width: 768px) {
    main.container {
        padding: 1.75rem 1.5rem 2.5rem;
        align-items: flex-start;
    }

    .content-split {
        flex-direction: column;
        align-items: flex-start;
        gap: 2rem;
    }

    .text-container,
    .media-container {
        flex-basis: auto;
        max-width: 100%;
    }

    .media-container {
        width: 100%;
    }

    .page-section {
        position: static;
        inset: auto;
        flex-direction: column;
        margin-top: 0.5rem;
    }

    #detail-view.theme-light {
        position: fixed;
        inset: 1.5rem 1.2rem;
        padding: 1.6rem 1.4rem;
    }

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

    .header-icon-container {
        right: 1.5rem;
    }

    .action-cards-container {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 480px) {
    .navigation-buttons {
        width: 100%;
        justify-content: space-between;
    }

    .btn-nav.btn-primary {
        flex: 1;
    }

    .sub-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .sub-footer-right {
        justify-content: flex-start;
        min-width: auto;
    }
}
/* =========================================================
   OVERRIDES – LAYOUT TIPO SLIDE (SEM SCROLL) + TIPOGRAFIA
   ========================================================= */

/* 1) Página sempre encaixada na viewport, sem barra de rolagem */
html,
body {
    height: 100%;
    margin: 0;
    overflow: hidden; /* trava a rolagem no desktop */
}

body {
    display: flex;
    flex-direction: column;
}

/* 2) Main ocupa o espaço entre topo e rodapés */
main.container {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.25rem 4.5rem 2.4rem;
    box-sizing: border-box;
    position: relative;
}

/* 3) Layout padrão de conteúdo dividido (texto + mockup) */
.content-split {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4rem; /* você pode voltar para 3.5rem se preferir menor */
}


/* bloco de texto à esquerda */
.text-container {
    flex: 0 0 38%;
    max-width: 480px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 320px;
}

/* textos de leitura da coluna esquerda */
.text-container p {
    max-width: 48ch;
}

/* mockup à direita */
.media-container {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 4) Tipografia geral – h1..h6 e parágrafos */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-family);
    margin: 0;
}

/* Título da capa (index) */
h1 {
    font-weight: 600;
    font-size: clamp(2.4rem, 4vw + 0.5rem, 3.6rem);
    line-height: 1.08;
    margin: 1.2rem 0 0.7rem;
    white-space: normal; /* não corta o texto */
    background: linear-gradient(to right, #0D3B4C, #A9CCE3, #ffffff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}

/* Títulos das seções internas (páginas 1–7) */
h2 {
    font-weight: 500;
    font-size: clamp(1.8rem, 2.4vw, 2.2rem);
    line-height: 1.25;
    color: #ffffff;
    margin: 0 0 0.9rem;
}

/* Subtítulos menores (se usar h3 em cards etc.) */
h3 {
    font-weight: 500;
    font-size: 1.15rem;
    line-height: 1.35;
    color: #ffffff;
    margin-bottom: 0.4rem;
}

h4,
h5,
h6 {
    font-weight: 500;
    font-size: 0.95rem;
    line-height: 1.4;
}

/* Texto padrão */
p {
    font-family: var(--font-family);
    font-size: 0.95rem;
    line-height: 1.6;
    color: #f5f5f5;
    margin-top: 0.55rem;
}

/* Parágrafos “segundo nível” explicativos */
.secondary-description {
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--text-muted);
    margin-top: 0.45rem;
}

/* Destaque curto em parágrafo final */
.text-container p strong {
    font-weight: 600;
}

/* 5) Botões – manter alinhamento entre páginas */
.navigation-buttons {
    display: flex;
    gap: 8px;
    margin-top: 1.6rem;
}

.btn-nav {
    height: 46px;
    border-radius: 6px;
}

/* 6) Ajustes de responsividade SEM aparecer barra de rolagem */
/* Reduz paddings e fontes para telas mais “baixas” ou estreitas */

@media (max-height: 760px) {
    main.container {
        padding-top: 1.5rem;
        padding-bottom: 1.8rem;
    }

    .text-container {
        min-height: 280px;
    }

    h2 {
        font-size: clamp(1.6rem, 2.1vw, 2rem);
    }

    p {
        font-size: 0.9rem;
    }
}

@media (max-width: 1024px) {
    main.container {
        padding-left: 3rem;
        padding-right: 3rem;
    }

    .content-split {
        gap: 2.5rem;
    }
}

/* Em telas bem estreitas a prioridade é caber, mantendo o conceito de “slide”.
   Se ainda assim não couber em alguns celulares muito pequenos, o conteúdo
   pode ficar mais justo, mas sem aparecer a barra. */
@media (max-width: 768px) {
    main.container {
        padding: 1.6rem 1.8rem 2rem;
    }

    .content-split {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.6rem;
        max-width: 100%;
    }

    .text-container,
    .media-container {
        flex: none;
        max-width: 100%;
        min-height: auto;
    }

    .media-image {
        max-height: 40vh;
        object-fit: contain;
    }
}
/* =========================================================
   AJUSTES FINOS – TIPOGRAFIA, LAYOUT E BOTÕES
   ========================================================= */

/* Texto: cor clara, maior e com mais respiro */
.text-container p,
.media-container p,
.final-description {
    color: #E5E7EB;                   /* cinza bem claro para fundo escuro */
    font-size: 1.125rem;              /* ~18px */
    line-height: 1.75;                /* boa legibilidade */
}

/* Parágrafos secundários (explicações / detalhes) */
.secondary-description {
    color: rgba(229, 231, 235, 0.78); /* um pouco mais suave */
    font-size: 1.05rem;
    line-height: 1.7;
}

/* Controla largura da coluna de leitura para não virar um "tijolo" */
.text-container p {
    max-width: 52ch;
}

/* Títulos mantidos bem claros para hierarquia */
h1,
h2,
h3 {
    color: #FFFFFF;
}

/* Layout geral da área de conteúdo (texto + imagem) */
main.container {
    padding: 2.4rem 5rem 2.6rem;   /* mais espaço lateral */
}

.content-split {
    width: 100%;
    gap: 4.25rem;                  /* mais espaço entre texto e imagem */
}


/* Coluna de texto alinhada com logo/rodapé (já está à esquerda) */
/* Empurra a imagem um pouco mais para a direita */
.media-container {
    justify-content: flex-end;
}

/* Cartão branco de mockup: menos “bolo” e sombra mais elegante */
.media-image {
    border-radius: 14px;           /* levemente menor que antes */
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.85);
}

/* Botões: manter alinhados sob a coluna de texto */
.navigation-buttons {
    margin-top: 2rem;
}

/* Botão de voltar com mais contraste */
.btn-nav:not(.btn-primary) {
    background-color: #050608;
    border-color: rgba(255, 255, 255, 0.32);
    color: #E5E7EB;
}

.btn-nav:not(.btn-primary):hover {
    border-color: rgba(255, 255, 255, 0.6);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.7);
}

/* Ajuste suave para telas mais baixas sem perder leitura */
@media (max-height: 760px) {
    main.container {
        padding-top: 1.8rem;
        padding-bottom: 2.1rem;
    }

    .text-container p,
    .final-description {
        font-size: 1.05rem;
        line-height: 1.65;
    }

    .secondary-description {
        font-size: 0.98rem;
    }
}

/* Em telas estreitas continua modo "slide", mas evitando tudo espremido */
@media (max-width: 768px) {
    main.container {
        padding: 1.6rem 1.8rem 2rem;
    }

    .content-split {
        gap: 1.8rem;
    }

    .media-image {
        max-height: 40vh;
        object-fit: contain;
    }
}
/* =========================================================
   AJUSTE DE TIPOGRAFIA E BOTÕES PARA PÁGINAS 1..N
   ========================================================= */

/* Corpo de texto: cinza claro, tamanho moderado, boa leitura */
.text-container p,
.media-container p {
    color: #D1D5DB;        /* cinza claro */
    font-size: 0.98rem;    /* similar ao que você usava antes */
    line-height: 1.6;
}

/* Parágrafos de apoio */
.secondary-description {
    color: #9CA3AF;        /* cinza um pouco mais frio */
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Destaque final em branco puro quando precisar */
.text-highlight {
    color: #FFFFFF;
    font-weight: 600;
}

/* Mantém largura boa de leitura, sem virar bloco gigante */
.text-container p {
    max-width: 50ch;
}

/* --- Botões no estilo antigo --- */

.navigation-buttons {
    display: flex;
    gap: 8px;
    margin-top: 1.8rem;
}

.btn-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    border-width: 1px;
    border-style: solid;
    transition:
        background-color 0.18s ease-out,
        border-color 0.18s ease-out,
        transform 0.12s ease-out,
        box-shadow 0.18s ease-out;
}

/* Botão azul "Avançar" */
.btn-nav.btn-primary {
    padding: 0 1.6rem;
    background-color: #0078D4;
    border-color: #0078D4;
    color: #FFFFFF;
    box-shadow: 0 10px 25px rgba(0, 120, 212, 0.45);
}

.btn-nav.btn-primary:hover {
    background-color: #1085E4;
    border-color: #1085E4;
    transform: translateY(-1px);
}

/* Botão de voltar: quadrado escuro com borda suave */
.btn-nav:not(.btn-primary) {
    width: 48px;
    padding: 0;
    background-color: #111111;
    border-color: #3F3F46;
    color: #E5E7EB;
    box-shadow: none;
}

.btn-nav:not(.btn-primary):hover {
    border-color: #E5E7EB;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.7);
    transform: translateY(-1px);
}

.btn-nav svg {
    width: 17px;
    height: 17px;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}
/* =========================================================
   BOTÕES NO ESTILO ANTERIOR (SEM GLOW FORTE)
   ========================================================= */

/* Container dos botões */
.navigation-buttons {
    display: flex;
    gap: 8px;
    margin-top: 1.8rem;
}

/* Base dos botões */
.btn-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    border-width: 1px;
    border-style: solid;
    padding: 0 1.6rem;
    transition:
        background-color 0.16s ease-out,
        border-color 0.16s ease-out,
        color 0.16s ease-out,
        transform 0.12s ease-out,
        box-shadow 0.16s ease-out;
}

/* Botão azul "Avançar" – sem brilho exagerado */
.btn-nav.btn-primary {
    background-color: #0078D4;
    border-color: #0078D4;
    color: #FFFFFF;
    box-shadow: none;             /* sem glow azul */
}

.btn-nav.btn-primary:hover {
    background-color: #1085E4;
    border-color: #1085E4;
    box-shadow: none;
    transform: translateY(-1px);
}

/* Botão de voltar – quadrado escuro com borda clara suave */
.btn-nav:not(.btn-primary) {
    width: 48px;
    padding: 0;
    background-color: #111111;
    border-color: #3F3F46;
    color: #E5E7EB;
    box-shadow: none;
}

.btn-nav:not(.btn-primary):hover {
    border-color: #E5E7EB;
    box-shadow: none;
    transform: translateY(-1px);
}

/* Ícone dentro do botão de voltar */
.btn-nav svg {
    width: 17px;
    height: 17px;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}
/* =========================================================
   PÁGINA 4 – AJUSTE DOS CARDS DO CORE PARA CABEREM NA TELA
   ========================================================= */

/* Coluna da direita (cards) na página do Core */
#grid-view .media-container {
    flex-basis: 60%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Grade dos cards: 3 colunas em telas grandes */
#grid-view .card-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.2rem;
}

/* Cards um pouco mais compactos */
#grid-view .feature-card {
    padding: 1rem 0.9rem;
}

/* Miniatura dentro do card com altura controlada */
#grid-view .card-image-wrapper {
    margin-top: 0.2rem;
    margin-bottom: 0.7rem;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.06);
    aspect-ratio: 4 / 3;               /* controla a altura da imagem */
}

/* Imagem preenche o espaço da miniatura */
#grid-view .card-image-wrapper img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Quebra para telas médias: 2 colunas */
@media (max-width: 992px) {
    #grid-view .media-container {
        flex-basis: 100%;
        margin-top: 1.5rem;
    }

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

/* Em telas bem pequenas: 1 coluna (scroll horizontal continua desativado) */
@media (max-width: 640px) {
    #grid-view .card-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* =========================================================
   PÁGINA 4 – AJUSTE FINO DOS CARDS DO CORE
   ========================================================= */

/* Usa melhor o espaço lateral e controla a altura */
#grid-view .media-container {
    flex-basis: 60%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 3 colunas, cards mais “esticados” na largura */
#grid-view .card-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.2rem;
}

/* Card mais compacto verticalmente */
#grid-view .feature-card {
    padding: 1rem 0.9rem;
}

/* Miniatura mais baixa, sem crescer na vertical */
#grid-view .card-image-wrapper {
    margin-top: 0.15rem;
    margin-bottom: 0.45rem;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.06);
    max-height: 130px;        /* controla a altura total do bloco branco */
}

/* Imagem se adapta à altura reduzida */
#grid-view .card-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Limita o texto da descrição a poucas linhas */
#grid-view .feature-card span {
    font-size: 0.8rem;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 3;    /* no máx. 3 linhas */
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* --- Específico da Página Final (TÍTULO) --- */
.final-title {
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 4.5rem;        /* tamanho no nível do H1 da index */
    line-height: 1.1;
    margin: 1.5rem 0;
    white-space: nowrap;

    /* mesmo gradiente do H1 da página inicial */
    background: linear-gradient(to right, #0D3B4C, #A9CCE3, #ffffff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}

.final-description {
    font-size: 15px;
    line-height: 21px;
    max-width: 65ch;
    margin-left: auto;
    margin-right: auto;
    color: var(--text-muted);
}
.action-cards-container {
    display: flex;
    gap: 1.5rem;
    margin-top: 2rem;
    width: 100%;
    max-width: 1100px;
}

.action-card {
    flex: 1;
    background-color: var(--card-bg-nav);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1.5rem;
    text-align: left;
    display: flex;
    flex-direction: column;
}

.action-card h3 {
    margin: 0 0 0.5rem;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-light);
}

.action-card p {
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-muted);
    margin-top: 0.5rem;
}

/* AQUI é o que transforma os links .btn em botões azuis grandes */
.action-card .btn {
    margin-top: auto;
    padding: 0;
    height: 48px;
    border-radius: 4px;
    background-color: var(--accent-blue);
    color: white;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
    width: 100%;
}

.action-card .btn:hover {
    background-color: var(--accent-blue-hover);
}

.media-container .media-image {
  width: 100%;
  height: auto;
  display: block;
}

.media-container video.media-image {
  object-fit: cover;   /* ou 'contain', depende do efeito que você quer */
}

/* =========================================================
   MOBILE & TABLET REFLOW — libera navegação em telas menores
   ========================================================= */
@media (max-width: 1024px) {
  html,
  body {
    height: auto;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
  }

  main.container {
    align-items: flex-start;
    justify-content: flex-start;
    padding: 1.4rem 1.2rem 2rem;
  }

  .content-split {
    flex-direction: column;
    align-items: stretch;
    gap: 1.4rem;
  }

  .text-container {
    flex: none;
    max-width: 100%;
    min-height: auto;
  }

  .media-container {
    width: 100%;
    justify-content: center;
  }

  .media-image {
    width: 100%;
    max-height: none;
    object-fit: contain;
  }

  .navigation-buttons {
    width: 100%;
    flex-wrap: wrap;
    gap: 0.6rem;
  }

  .btn-nav.btn-primary {
    flex: 1;
  }

  .header-icon-container {
    position: static;
    margin-left: auto;
  }

  .page-section {
    position: static;
    inset: auto;
    flex-direction: column;
    gap: 1.6rem;
    width: 100%;
  }

  #detail-view.theme-light {
    position: fixed;
    inset: 1rem;
    padding: 1.4rem 1.25rem;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
  }

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

  .action-cards-container {
    flex-direction: column;
  }

  .action-card {
    width: 100%;
  }

  .final-title {
    font-size: clamp(2.2rem, 6vw, 3.2rem);
    white-space: normal;
  }
}

@media (max-width: 640px) {
  main.container {
    padding: 1.1rem 1rem 1.65rem;
  }

  h1 {
    font-size: clamp(2rem, 5vw + 0.6rem, 2.8rem);
  }

  h2 {
    font-size: clamp(1.45rem, 4.6vw, 1.85rem);
  }

  p,
  .secondary-description,
  .final-description {
    font-size: 0.96rem;
    line-height: 1.6;
  }

  .navigation-buttons {
    gap: 0.5rem;
  }

  .btn-nav {
    height: 44px;
  }

  .sub-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.55rem;
    padding: 0.9rem 1rem;
  }

  .sub-footer-center {
    position: static;
    transform: none;
    width: 100%;
    justify-content: flex-start;
  }

  .header-icon-container {
    width: 100%;
    justify-content: flex-end;
    position: static;
  }

  /* Página 4 – cards em coluna compacta */
  #grid-view .card-grid,
  .card-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
  }

  #grid-view .feature-card,
  .feature-card {
    padding: 0.85rem 0.85rem;
    gap: 0.45rem;
  }

  #grid-view .card-image-wrapper,
  .card-image-wrapper {
    max-height: 120px;
    aspect-ratio: 4 / 3;
  }

  /* Página 7 – ação em coluna */
  .action-cards-container {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    width: 100%;
  }

  .action-card {
    padding: 1rem;
  }

  /* Mídias responsivas */
  .media-container {
    width: 100%;
  }

  .media-container .media-image,
  .media-container video.media-image {
    width: 100%;
    max-height: 50vh;
    object-fit: contain;
  }
}

@media (max-width: 1024px) and (orientation: landscape) {
  html,
  body {
    height: auto;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
  }

  main.container {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: 1.4rem 1.6rem 2rem;
    gap: 1.4rem;
  }

  .content-split {
    flex-direction: row;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 1.6rem;
    width: 100%;
  }

  .text-container,
  .media-container {
    flex: 1 1 340px;
    max-width: 100%;
    min-height: auto;
  }

  .media-container {
    justify-content: center;
  }

  .media-image {
    width: 100%;
    max-height: 70vh;
    object-fit: contain;
  }

  .page-section {
    position: static;
    inset: auto;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1.6rem;
    width: 100%;
  }

  #grid-view .card-grid,
  .card-grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }

  .header-icon-container {
    position: static;
    width: 100%;
    justify-content: flex-end;
    margin-top: 0.4rem;
  }

  .sub-footer {
    flex-wrap: wrap;
    gap: 0.6rem 1rem;
  }

  .sub-footer-center {
    position: static;
    transform: none;
  }

  .action-cards-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    width: 100%;
  }
}

/* =========================================================
   MOBILE BLOCKER — bloqueador de telefones em retrato
   ========================================================= */
#mobile-blocker {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99999;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, rgba(12,12,12,0.96) 0%, rgba(0,0,0,0.92) 100%);
  color: #fff;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  touch-action: none;
  pointer-events: auto;
}

.mobile-blocker-inner {
  width: calc(100% - 48px);
  max-width: 720px;
  margin: 0 24px;
  padding: 28px 28px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 18px 40px rgba(0,0,0,0.6);
  backdrop-filter: blur(6px) saturate(120%);
  transform: translateZ(0);
}

.mobile-blocker-icon {
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.mobile-blocker-icon svg {
  width: 72px;
  height: 72px;
  opacity: 0.98;
}

.mobile-blocker-inner h2 {
  font-size: 1.35rem;
  margin: 6px 0 8px;
  font-weight: 700;
}

.mobile-blocker-desc {
  opacity: 0.96;
  line-height: 1.45;
  max-width: 48rem;
  margin: 0 auto;
  color: rgba(255,255,255,0.95);
}

@media (max-width: 1024px) and (orientation: portrait) {
  #mobile-blocker {
    display: flex;
  }
  .mobile-blocker-inner {
    max-width: 680px;
    padding: 22px;
  }
  .mobile-blocker-desc {
    font-size: 0.98rem;
  }
}

@media (orientation: landscape) and (max-width: 1024px), (min-width: 1025px) {
  #mobile-blocker {
    display: none !important;
  }
}