/* =========================================================
   CRIATIVAMENTE CODE
   Arquivo: style.css
   Finalidade: identidade visual, paletas, tipografia
   e base responsiva do portal
   ========================================================= */

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Poppins:wght@500;600;700;800&family=Merriweather:wght@400;700&family=Nunito:wght@400;600;700;800&family=Roboto+Mono:wght@400;500;600&display=swap');

/* =========================================================
   1. VARIÁVEIS GLOBAIS
   ========================================================= */

:root {
    /* Cores institucionais */
    --cor-institucional-primaria: #0f172a;
    --cor-institucional-secundaria: #1e293b;
    --cor-institucional-destaque: #38bdf8;
    --cor-institucional-destaque-forte: #2563eb;

    /* Fundos globais */
    --cor-fundo-principal: #f8fafc;
    --cor-fundo-secundario: #e2e8f0;
    --cor-fundo-escuro: #020617;
    --cor-fundo-card: #ffffff;

    /* Textos globais */
    --cor-texto-principal: #1e293b;
    --cor-texto-secundario: #475569;
    --cor-texto-claro: #f8fafc;
    --cor-texto-suave: #94a3b8;

    /* Bordas */
    --cor-borda-suave: #cbd5e1;
    --cor-borda-destaque: #38bdf8;

    /* Estados */
    --cor-sucesso: #16a34a;
    --cor-alerta: #f59e0b;
    --cor-erro: #dc2626;
    --cor-informacao: #0284c7;

    /* Sombras */
    --sombra-suave: 0 4px 14px rgba(15, 23, 42, 0.08);
    --sombra-media: 0 8px 24px rgba(15, 23, 42, 0.14);
    --sombra-forte: 0 16px 40px rgba(15, 23, 42, 0.22);

    /* Gradientes globais */
    --gradiente-institucional: linear-gradient(135deg, #0f172a, #1e3a8a, #0284c7);
    --gradiente-claro: linear-gradient(135deg, #ffffff, #e0f2fe);
    --gradiente-escuro: linear-gradient(135deg, #020617, #0f172a, #1e3a8a);

    /* Fontes */
    --fonte-principal: 'Inter', Arial, Helvetica, sans-serif;
    --fonte-titulos: 'Poppins', Arial, Helvetica, sans-serif;
    --fonte-leitura: 'Merriweather', Georgia, serif;
    --fonte-suave: 'Nunito', Arial, Helvetica, sans-serif;
    --fonte-codigo: 'Roboto Mono', Consolas, monospace;

    /* Tipografia responsiva */
    --texto-pequeno: clamp(0.8rem, 0.75rem + 0.2vw, 0.9rem);
    --texto-normal: clamp(1rem, 0.95rem + 0.25vw, 1.1rem);
    --texto-medio: clamp(1.1rem, 1rem + 0.4vw, 1.3rem);
    --texto-grande: clamp(1.2rem, 1.05rem + 0.7vw, 1.6rem);

    --titulo-pequeno: clamp(1.3rem, 1.05rem + 1vw, 1.8rem);
    --titulo-medio: clamp(1.7rem, 1.25rem + 1.8vw, 2.6rem);
    --titulo-grande: clamp(2.1rem, 1.5rem + 2.8vw, 3.8rem);
    --titulo-destaque: clamp(2.5rem, 1.7rem + 4vw, 5rem);

    --altura-linha-texto: 1.7;
    --altura-linha-titulo: 1.15;

    /* Medidas */
    --largura-maxima: 1200px;
    --espacamento-secao: clamp(3rem, 6vw, 6rem);

    --borda-arredondada-pequena: 8px;
    --borda-arredondada-media: 16px;
    --borda-arredondada-grande: 28px;

    /* Transições */
    --transicao-padrao: all 0.3s ease;
}

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

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

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

body {
    min-height: 100vh;
    font-family: var(--fonte-principal);
    font-size: var(--texto-normal);
    font-weight: 400;
    line-height: var(--altura-linha-texto);
    color: var(--cor-texto-principal);
    background-color: var(--cor-fundo-principal);
}

img,
video,
iframe {
    max-width: 100%;
    height: auto;
    display: block;
}

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

ul,
ol {
    list-style-position: inside;
}

button,
input,
textarea,
select {
    font-family: var(--fonte-principal);
}

button {
    cursor: pointer;
    border: none;
}

.container {
    width: min(90%, var(--largura-maxima));
    margin: 0 auto;
}

.secao {
    padding: var(--espacamento-secao) 0;
}

/* =========================================================
   3. TIPOGRAFIA GLOBAL
   ========================================================= */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--fonte-titulos);
    font-weight: 700;
    line-height: var(--altura-linha-titulo);
    color: var(--cor-texto-principal);
}

h1 {
    font-size: var(--titulo-destaque);
    font-weight: 800;
}

h2 {
    font-size: var(--titulo-grande);
}

h3 {
    font-size: var(--titulo-medio);
}

h4 {
    font-size: var(--titulo-pequeno);
}

p,
li,
a,
button,
input,
textarea,
select {
    font-size: var(--texto-normal);
}

.texto-pequeno {
    font-size: var(--texto-pequeno);
}

.texto-medio {
    font-size: var(--texto-medio);
}

.texto-grande {
    font-size: var(--texto-grande);
}

.texto-leitura {
    font-family: var(--fonte-leitura);
    font-size: var(--texto-medio);
    line-height: 1.85;
}

.texto-suave {
    font-family: var(--fonte-suave);
    line-height: 1.75;
}

.texto-codigo,
pre,
code {
    font-family: var(--fonte-codigo);
    font-size: 0.95rem;
}

.texto-destaque {
    font-family: var(--fonte-titulos);
    font-size: var(--texto-grande);
    font-weight: 600;
}

.texto-legenda {
    font-size: var(--texto-pequeno);
    color: var(--cor-texto-secundario);
}

.texto-caixa-alta {
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}

/* =========================================================
   4. PALETAS TEMÁTICAS
   ========================================================= */

.tema-institucional {
    --cor-tema-primaria: var(--cor-institucional-primaria);
    --cor-tema-secundaria: var(--cor-institucional-secundaria);
    --cor-tema-destaque: var(--cor-institucional-destaque);
    --cor-tema-destaque-suave: #e0f2fe;
    --cor-tema-fundo: var(--cor-fundo-principal);
    --cor-tema-fundo-card: var(--cor-fundo-card);
    --cor-tema-texto: var(--cor-texto-principal);
    --cor-tema-texto-secundario: var(--cor-texto-secundario);
    --cor-tema-borda: var(--cor-borda-suave);
    --gradiente-tema-principal: var(--gradiente-institucional);
    --gradiente-tema-suave: var(--gradiente-claro);
    --fonte-tema-titulo: var(--fonte-titulos);
    --fonte-tema-texto: var(--fonte-principal);
    --fonte-tema-destaque: var(--fonte-titulos);
}

.tema-tecnologia {
    --cor-tema-primaria: #0f172a;
    --cor-tema-secundaria: #2563eb;
    --cor-tema-destaque: #00d9ff;
    --cor-tema-destaque-suave: #bae6fd;
    --cor-tema-fundo: #f0f9ff;
    --cor-tema-fundo-card: #ffffff;
    --cor-tema-texto: #0f172a;
    --cor-tema-texto-secundario: #334155;
    --cor-tema-borda: #7dd3fc;
    --gradiente-tema-principal: linear-gradient(135deg, #0f172a, #1d4ed8, #00d9ff);
    --gradiente-tema-suave: linear-gradient(135deg, #ffffff, #e0f2fe);
    --fonte-tema-titulo: var(--fonte-titulos);
    --fonte-tema-texto: var(--fonte-principal);
    --fonte-tema-destaque: var(--fonte-codigo);
}

.tema-espiritismo {
    --cor-tema-primaria: #312e81;
    --cor-tema-secundaria: #7c3aed;
    --cor-tema-destaque: #f5d76e;
    --cor-tema-destaque-suave: #fef3c7;
    --cor-tema-fundo: #f8f7ff;
    --cor-tema-fundo-card: #ffffff;
    --cor-tema-texto: #1e1b4b;
    --cor-tema-texto-secundario: #4c1d95;
    --cor-tema-borda: #ddd6fe;
    --gradiente-tema-principal: linear-gradient(135deg, #1e1b4b, #6d28d9, #f5d76e);
    --gradiente-tema-suave: linear-gradient(135deg, #ffffff, #ede9fe, #fef3c7);
    --fonte-tema-titulo: var(--fonte-leitura);
    --fonte-tema-texto: var(--fonte-principal);
    --fonte-tema-destaque: var(--fonte-titulos);
}

.tema-comportamento {
    --cor-tema-primaria: #064e3b;
    --cor-tema-secundaria: #0f766e;
    --cor-tema-destaque: #5eead4;
    --cor-tema-destaque-suave: #ccfbf1;
    --cor-tema-fundo: #f0fdfa;
    --cor-tema-fundo-card: #ffffff;
    --cor-tema-texto: #134e4a;
    --cor-tema-texto-secundario: #475569;
    --cor-tema-borda: #99f6e4;
    --gradiente-tema-principal: linear-gradient(135deg, #064e3b, #0f766e, #5eead4);
    --gradiente-tema-suave: linear-gradient(135deg, #ffffff, #ccfbf1);
    --fonte-tema-titulo: var(--fonte-suave);
    --fonte-tema-texto: var(--fonte-suave);
    --fonte-tema-destaque: var(--fonte-titulos);
}

.tema-interacoes {
    --cor-tema-primaria: #3b0764;
    --cor-tema-secundaria: #7e22ce;
    --cor-tema-destaque: #f97316;
    --cor-tema-destaque-suave: #fed7aa;
    --cor-tema-fundo: #faf5ff;
    --cor-tema-fundo-card: #ffffff;
    --cor-tema-texto: #3b0764;
    --cor-tema-texto-secundario: #581c87;
    --cor-tema-borda: #d8b4fe;
    --gradiente-tema-principal: linear-gradient(135deg, #3b0764, #7e22ce, #f97316);
    --gradiente-tema-suave: linear-gradient(135deg, #ffffff, #faf5ff, #fed7aa);
    --fonte-tema-titulo: var(--fonte-titulos);
    --fonte-tema-texto: var(--fonte-principal);
    --fonte-tema-destaque: var(--fonte-titulos);
}

.tema-cotidiano {
    --cor-tema-primaria: #1f2937;
    --cor-tema-secundaria: #475569;
    --cor-tema-destaque: #f59e0b;
    --cor-tema-destaque-suave: #fde68a;
    --cor-tema-fundo: #f8fafc;
    --cor-tema-fundo-card: #ffffff;
    --cor-tema-texto: #111827;
    --cor-tema-texto-secundario: #4b5563;
    --cor-tema-borda: #cbd5e1;
    --gradiente-tema-principal: linear-gradient(135deg, #111827, #475569, #f59e0b);
    --gradiente-tema-suave: linear-gradient(135deg, #ffffff, #f8fafc, #fde68a);
    --fonte-tema-titulo: var(--fonte-titulos);
    --fonte-tema-texto: var(--fonte-principal);
    --fonte-tema-destaque: var(--fonte-leitura);
}

/* =========================================================
   5. CLASSES DE APOIO TEMÁTICO
   ========================================================= */

.titulo-tema {
    font-family: var(--fonte-tema-titulo);
    color: var(--cor-tema-texto);
}

.texto-tema {
    font-family: var(--fonte-tema-texto);
    color: var(--cor-tema-texto-secundario);
}

.destaque-tema {
    font-family: var(--fonte-tema-destaque);
    color: var(--cor-tema-destaque);
    font-weight: 700;
}

.fundo-tema {
    background-color: var(--cor-tema-fundo);
}

.fundo-card-tema {
    background-color: var(--cor-tema-fundo-card);
}

.gradiente-tema {
    background: var(--gradiente-tema-principal);
}

.gradiente-tema-suave {
    background: var(--gradiente-tema-suave);
}

/* =========================================================
   6. COMPONENTES BASE
   ========================================================= */

.botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.85rem 1.4rem;
    border-radius: var(--borda-arredondada-media);
    font-weight: 700;
    transition: var(--transicao-padrao);
}

.botao-primario {
    color: var(--cor-texto-claro);
    background: var(--gradiente-institucional);
    box-shadow: var(--sombra-suave);
}

.botao-primario:hover {
    transform: translateY(-2px);
    box-shadow: var(--sombra-media);
}

.botao-tema {
    color: var(--cor-texto-claro);
    background: var(--gradiente-tema-principal);
    box-shadow: var(--sombra-suave);
}

.botao-tema:hover {
    transform: translateY(-2px);
    box-shadow: var(--sombra-media);
}

.card {
    background-color: var(--cor-fundo-card);
    border: 1px solid var(--cor-borda-suave);
    border-radius: var(--borda-arredondada-grande);
    box-shadow: var(--sombra-suave);
    transition: var(--transicao-padrao);
}

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

.card-tema {
    background-color: var(--cor-tema-fundo-card);
    border: 1px solid var(--cor-tema-borda);
    border-radius: var(--borda-arredondada-grande);
    box-shadow: var(--sombra-suave);
    transition: var(--transicao-padrao);
}

/* =========================================================
   7. UTILITÁRIOS RESPONSIVOS
   ========================================================= */

.grid-responsivo {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: clamp(1rem, 3vw, 2rem);
}

.flex-responsivo {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(1rem, 3vw, 2rem);
}

.ocultar-mobile {
    display: initial;
}

.mostrar-mobile {
    display: none;
}

/* =========================================================
   8. ACESSIBILIDADE
   ========================================================= */

:focus-visible {
    outline: 3px solid var(--cor-institucional-destaque);
    outline-offset: 4px;
}

::selection {
    color: var(--cor-texto-claro);
    background-color: var(--cor-institucional-destaque-forte);
}

/* =========================================================
   9. MEDIA QUERIES
   ========================================================= */

@media (max-width: 992px) {
    .container {
        width: min(92%, var(--largura-maxima));
    }
}

@media (max-width: 768px) {
    body {
        text-align: left;
    }

    .container {
        width: min(94%, var(--largura-maxima));
    }

    .secao {
        padding: clamp(2.5rem, 8vw, 4rem) 0;
    }

    .ocultar-mobile {
        display: none;
    }

    .mostrar-mobile {
        display: initial;
    }

    .botao {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .container {
        width: min(94%, var(--largura-maxima));
    }

    .card,
    .card-tema {
        border-radius: var(--borda-arredondada-media);
    }
}


/* =========================================================
   HEADER / HERO - PÁGINA INICIAL
   ========================================================= */

.hero {
    position: relative;
    min-height: 100vh;
    padding: 1.5rem;
    color: var(--cor-texto-claro);
    background-image:
        linear-gradient(
            135deg,
            rgba(2, 6, 23, 0.88),
            rgba(15, 23, 42, 0.62),
            rgba(2, 6, 23, 0.82)
        ),
        url("../images/hero/hero-criativamente-code.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
}

.menu-principal {
    position: relative;
    z-index: 5;
    width: min(94%, var(--largura-maxima));
    margin: 0 auto;
    padding: 0.9rem 1.2rem;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;

    background-color: rgba(15, 23, 42, 0.42);
    border: 1px solid rgba(226, 232, 240, 0.22);
    border-radius: var(--borda-arredondada-grande);
    backdrop-filter: blur(14px);
    box-shadow: var(--sombra-media);
}

.menu-logo img {
    width: clamp(150px, 18vw, 260px);
    height: auto;
}

.menu-links {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 2vw, 2rem);
}

.menu-links a {
    font-weight: 600;
    color: var(--cor-texto-claro);
    opacity: 0.9;
    transition: var(--transicao-padrao);
}

.menu-links a:hover {
    color: var(--cor-institucional-destaque);
    opacity: 1;
}

.botao-menu-mobile {
    display: none;
    color: var(--cor-texto-claro);
    background-color: transparent;
    font-size: 2rem;
}

.hero-conteudo {
    position: relative;
    z-index: 3;
    width: min(92%, 860px);
    margin: clamp(5rem, 10vh, 8rem) auto 0;
    text-align: center;
}

.hero-etiqueta {
    margin-bottom: 1rem;
    color: var(--cor-institucional-destaque);
}

.hero-conteudo h1 {
    margin-bottom: 1.5rem;
    color: var(--cor-texto-claro);
    text-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
}

.hero-subtitulo {
    max-width: 760px;
    margin: 0 auto 2rem;
    font-size: var(--texto-medio);
    color: rgba(248, 250, 252, 0.92);
}

.hero-botoes {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.botao-secundario {
    color: var(--cor-texto-claro);
    background-color: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(248, 250, 252, 0.35);
    backdrop-filter: blur(10px);
}

.botao-secundario:hover {
    background-color: rgba(255, 255, 255, 0.16);
    transform: translateY(-2px);
}

.hero-modulos {
    position: relative;
    z-index: 4;
    width: min(94%, var(--largura-maxima));
    margin: clamp(4rem, 10vh, 7rem) auto 0;
    padding: 1rem;

    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;

    background-color: rgba(15, 23, 42, 0.52);
    border: 1px solid rgba(226, 232, 240, 0.22);
    border-radius: var(--borda-arredondada-grande);
    backdrop-filter: blur(16px);
    box-shadow: var(--sombra-forte);
}

.mini-card-modulo {
    min-height: 130px;
    padding: 1rem;

    display: flex;
    align-items: center;
    gap: 1rem;

    border-radius: var(--borda-arredondada-media);
    background-color: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.10);
    transition: var(--transicao-padrao);
}

.mini-card-modulo:hover {
    transform: translateY(-4px);
    background-color: rgba(255, 255, 255, 0.13);
    border-color: var(--cor-tema-destaque);
}

.mini-card-modulo img {
    width: 64px;
    min-width: 64px;
    height: 64px;
    object-fit: contain;
}

.mini-card-modulo h2 {
    margin-bottom: 0.35rem;
    font-size: 1rem;
    color: var(--cor-texto-claro);
}

.mini-card-modulo p {
    font-size: var(--texto-pequeno);
    line-height: 1.45;
    color: rgba(248, 250, 252, 0.82);
}

/* =========================================================
   SEÇÕES INICIAIS
   ========================================================= */

.secao-apresentacao {
    background-color: var(--cor-fundo-principal);
}

.secao-apresentacao:nth-child(even) {
    background-color: var(--cor-fundo-secundario);
}

.secao-apresentacao h2 {
    margin-bottom: 1rem;
}

.secao-apresentacao p {
    max-width: 850px;
    color: var(--cor-texto-secundario);
}

.rodape {
    padding: 2rem 0;
    text-align: center;
    color: var(--cor-texto-claro);
    background-color: var(--cor-fundo-escuro);
}

/* =========================================================
   RESPONSIVIDADE DO HEADER / HERO
   ========================================================= */

@media (max-width: 992px) {
    .hero-modulos {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .hero {
        padding: 1rem;
        min-height: auto;
    }

    .menu-principal {
        align-items: center;
    }

    .menu-links {
        display: none;
    }

    .botao-menu-mobile {
        display: block;
    }

    .hero-conteudo {
        margin-top: 4rem;
    }

    .hero-botoes {
        flex-direction: column;
    }

    .hero-modulos {
        grid-template-columns: 1fr;
        margin-top: 4rem;
    }

    .mini-card-modulo {
        min-height: auto;
    }
}

@media (max-width: 480px) {
    .menu-principal {
        padding: 0.75rem 1rem;
        border-radius: var(--borda-arredondada-media);
    }

    .menu-logo img {
        width: 150px;
    }

    .hero-conteudo {
        width: 100%;
    }

    .hero-subtitulo {
        font-size: var(--texto-normal);
    }

    .mini-card-modulo {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* =========================================================
   SEÇÃO - MÓDULOS DETALHADOS
   ========================================================= */

.secao-modulos-detalhados {
    background: var(--gradiente-claro);
}

.cabecalho-secao {
    max-width: 850px;
    margin: 0 auto 3rem;
    text-align: center;
}

.destaque-secao {
    margin-bottom: 0.75rem;
    color: var(--cor-institucional-destaque-forte);
}

.cabecalho-secao h2 {
    margin-bottom: 1rem;
}

.cabecalho-secao p {
    color: var(--cor-texto-secundario);
}

.cards-modulos-detalhados {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.25rem;
    align-items: stretch;
}

.card-modulo-detalhado {
    width: 100%;
    min-width: 0;
    min-height: 460px;
    padding: 1.4rem;

    display: flex;
    flex-direction: column;

    background-color: var(--cor-tema-fundo-card);
    border: 1px solid var(--cor-tema-borda);
    border-radius: var(--borda-arredondada-grande);
    box-shadow: var(--sombra-suave);
    transition: var(--transicao-padrao);
    overflow: hidden;
}

.card-modulo-detalhado:hover {
    transform: translateY(-6px);
    box-shadow: var(--sombra-media);
}

.imagem-card-modulo {
    width: 100%;
    height: 110px;
    margin-bottom: 1.25rem;

    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--gradiente-tema-suave);
    border-radius: var(--borda-arredondada-media);
}

.imagem-card-modulo img {
    width: 74px;
    height: 74px;
    object-fit: contain;
}

.card-modulo-detalhado h3 {
    margin-bottom: 0.75rem;
    font-size: clamp(1.45rem, 1.4vw, 1.75rem);
    color: var(--cor-tema-texto);
    word-break: normal;
    overflow-wrap: break-word;
}

.card-modulo-detalhado p {
    margin-bottom: 1.5rem;
    color: var(--cor-tema-texto-secundario);
    line-height: 1.55;
}

.card-modulo-detalhado .botao {
    width: fit-content;
    margin-top: auto;
    white-space: nowrap;
}

/* Responsividade */

@media (max-width: 1100px) {
    .cards-modulos-detalhados {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .cards-modulos-detalhados {
        grid-template-columns: 1fr;
    }

    .card-modulo-detalhado {
        min-height: auto;
    }
}

/* Responsividade */

@media (max-width: 1100px) {
    .cards-modulos-detalhados {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .cards-modulos-detalhados {
        grid-template-columns: 1fr;
    }

    .card-modulo-detalhado {
        min-height: auto;
    }
}

/* =========================================================
   SEÇÃO TECNOLOGIA
   ========================================================= */

.secao-tecnologia {
    position: relative;
    overflow: hidden;

    background-image:
        linear-gradient(
            135deg,
            rgba(2, 6, 23, 0.94),
            rgba(15, 23, 42, 0.82),
            rgba(2, 6, 23, 0.94)
        ),
        url("../images/backgrounds/background-tecnologia.png");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.tecnologia-conteudo {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
}

.tecnologia-texto {
    color: var(--cor-texto-claro);
}

.tecnologia-texto h2 {
    margin-bottom: 1.5rem;
    color: var(--cor-texto-claro);
}

.tecnologia-texto p {
    margin-bottom: 1.25rem;
    color: rgba(248, 250, 252, 0.88);
}

.tecnologia-acoes {
    margin-top: 2rem;

    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.tecnologia-destaques {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

.tecnologia-destaques article {
    padding: 1.3rem 1.5rem;

    background-color: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: var(--borda-arredondada-grande);

    backdrop-filter: blur(12px);
    box-shadow: var(--sombra-suave);

    transition: var(--transicao-padrao);
}

.tecnologia-destaques article:hover {
    transform: translateY(-4px);
    background-color: rgba(255, 255, 255, 0.13);
    border-color: var(--cor-tema-destaque);
    box-shadow: var(--sombra-media);
}

.tecnologia-destaques h3 {
    margin-bottom: 0.5rem;
    color: var(--cor-texto-claro);
}

.tecnologia-destaques p {
    margin: 0;
    color: rgba(248, 250, 252, 0.82);
    line-height: 1.55;
}

/* =========================================================
   RESPONSIVIDADE - SEÇÃO TECNOLOGIA
   ========================================================= */

@media (max-width: 900px) {
    .tecnologia-conteudo {
        grid-template-columns: 1fr;
    }

    .tecnologia-destaques {
        margin-top: 1rem;
    }
}

@media (max-width: 640px) {
    .tecnologia-acoes {
        flex-direction: column;
    }

    .tecnologia-acoes .botao {
        width: 100%;
    }

    .tecnologia-destaques article {
        padding: 1.2rem;
        border-radius: var(--borda-arredondada-media);
    }
}


/* =========================================================
   SEÇÃO ESPIRITISMO
   ========================================================= */

.secao-espiritismo {
    position: relative;
    overflow: hidden;

    background-image:
        linear-gradient(
            135deg,
            rgba(30, 27, 75, 0.94),
            rgba(76, 29, 149, 0.82),
            rgba(30, 27, 75, 0.94)
        ),
        url("../images/backgrounds/background-espiritismo.png");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.espiritismo-conteudo {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
}

.espiritismo-texto {
    color: var(--cor-texto-claro);
}

.espiritismo-texto h2 {
    margin-bottom: 1.5rem;
    color: var(--cor-texto-claro);
}

.espiritismo-texto p {
    margin-bottom: 1.25rem;
    color: rgba(248, 250, 252, 0.9);
}

.espiritismo-acoes {
    margin-top: 2rem;

    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.espiritismo-destaques {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

.espiritismo-destaques article {
    padding: 1.3rem 1.5rem;

    background-color: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: var(--borda-arredondada-grande);

    backdrop-filter: blur(12px);
    box-shadow: var(--sombra-suave);

    transition: var(--transicao-padrao);
}

.espiritismo-destaques article:hover {
    transform: translateY(-4px);
    background-color: rgba(255, 255, 255, 0.13);
    border-color: var(--cor-tema-destaque);
    box-shadow: var(--sombra-media);
}

.espiritismo-destaques h3 {
    margin-bottom: 0.5rem;
    color: var(--cor-texto-claro);
}

.espiritismo-destaques p {
    margin: 0;
    color: rgba(248, 250, 252, 0.84);
    line-height: 1.55;
}

/* =========================================================
   RESPONSIVIDADE - SEÇÃO ESPIRITISMO
   ========================================================= */

@media (max-width: 900px) {
    .espiritismo-conteudo {
        grid-template-columns: 1fr;
    }

    .espiritismo-destaques {
        order: 2;
        margin-top: 1rem;
    }

    .espiritismo-texto {
        order: 1;
    }
}

@media (max-width: 640px) {
    .espiritismo-acoes {
        flex-direction: column;
    }

    .espiritismo-acoes .botao {
        width: 100%;
    }

    .espiritismo-destaques article {
        padding: 1.2rem;
        border-radius: var(--borda-arredondada-media);
    }
}

/* =========================================================
   SEÇÃO COMPORTAMENTO
   ========================================================= */

.secao-comportamento {
    position: relative;
    overflow: hidden;

    background-image:
        linear-gradient(
            135deg,
            rgba(6, 78, 59, 0.92),
            rgba(15, 118, 110, 0.78),
            rgba(6, 78, 59, 0.92)
        ),
        url("../images/backgrounds/background-comportamento.png");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.comportamento-conteudo {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
}

.comportamento-texto {
    color: var(--cor-texto-claro);
}

.comportamento-texto h2 {
    margin-bottom: 1.5rem;
    color: var(--cor-texto-claro);
}

.comportamento-texto p {
    margin-bottom: 1.25rem;
    color: rgba(248, 250, 252, 0.9);
}

.comportamento-acoes {
    margin-top: 2rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.comportamento-destaques {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

.comportamento-destaques article {
    padding: 1.3rem 1.5rem;

    background-color: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: var(--borda-arredondada-grande);

    backdrop-filter: blur(12px);
    box-shadow: var(--sombra-suave);

    transition: var(--transicao-padrao);
}

.comportamento-destaques article:hover {
    transform: translateY(-4px);
    background-color: rgba(255, 255, 255, 0.13);
    border-color: var(--cor-tema-destaque);
    box-shadow: var(--sombra-media);
}

.comportamento-destaques h3 {
    margin-bottom: 0.5rem;
    color: var(--cor-texto-claro);
}

.comportamento-destaques p {
    margin: 0;
    color: rgba(248, 250, 252, 0.84);
    line-height: 1.55;
}

/* =========================================================
   RESPONSIVIDADE - SEÇÃO COMPORTAMENTO
   ========================================================= */

@media (max-width: 900px) {
    .comportamento-conteudo {
        grid-template-columns: 1fr;
    }

    .comportamento-destaques {
        margin-top: 1rem;
    }
}

@media (max-width: 640px) {
    .comportamento-acoes {
        flex-direction: column;
    }

    .comportamento-acoes .botao {
        width: 100%;
    }

    .comportamento-destaques article {
        padding: 1.2rem;
        border-radius: var(--borda-arredondada-media);
    }
}

/* =========================================================
   SEÇÃO REDES SOCIAIS
   ========================================================= */

.secao-redes-sociais {
    position: relative;
    overflow: hidden;
    color: var(--cor-texto-claro);
    background:
        radial-gradient(circle at top left, rgba(124, 58, 237, 0.28), transparent 32%),
        radial-gradient(circle at bottom right, rgba(56, 189, 248, 0.20), transparent 30%),
        linear-gradient(135deg, #020617, #0f172a, #1e1b4b);
}

.secao-redes-sociais .container {
    width: min(96%, 1500px);
}

.cabecalho-redes-sociais {
    max-width: 920px;
    margin-bottom: 3.5rem;
}

.cabecalho-redes-sociais h2 {
    color: var(--cor-texto-claro);
}

.cabecalho-redes-sociais p {
    color: rgba(248, 250, 252, 0.84);
}

.cards-redes-sociais {
    display: grid;
    grid-template-columns: repeat(5, minmax(240px, 1fr));
    gap: 1.25rem;
    align-items: stretch;
}

.card-rede-social {
    min-width: 0;
    min-height: 500px;
    padding: 1.4rem;

    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;

    background-color: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--borda-arredondada-grande);
    backdrop-filter: blur(14px);
    box-shadow: var(--sombra-suave);
    transition: var(--transicao-padrao);
}

.card-rede-social:hover {
    transform: translateY(-6px);
    background-color: rgba(255, 255, 255, 0.11);
    box-shadow: var(--sombra-media);
}

.icone-rede-social {
    width: 86px;
    height: 86px;
    margin-bottom: 1.8rem;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;
    font-size: 2.6rem;
    color: var(--cor-texto-claro);
    background: linear-gradient(135deg, #7c3aed, #ec4899, #f97316);
    box-shadow: 0 0 30px rgba(236, 72, 153, 0.38);
}

.card-rede-social h3 {
    width: 100%;
    margin-bottom: 1.1rem;

    font-size: clamp(1rem, 1vw, 1.18rem);
    line-height: 1.2;
    color: var(--cor-texto-claro);

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-rede-social h4 {
    min-height: 2.8rem;
    margin-bottom: 1.2rem;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: clamp(1.05rem, 1vw, 1.2rem);
    line-height: 1.2;
    color: var(--cor-rede-social);
}

.card-rede-social p {
    margin-bottom: 1.8rem;
    color: rgba(248, 250, 252, 0.84);
    line-height: 1.6;
}

.card-rede-social .botao {
    width: 100%;
    margin-top: auto;
    white-space: nowrap;
}

.botao-rede-social {
    color: var(--cor-texto-claro);
    background: var(--gradiente-rede-social);
}

.botao-rede-social:hover {
    transform: translateY(-2px);
    box-shadow: var(--sombra-media);
}

/* Cores específicas de cada rede */

.rede-pessoal {
    --cor-rede-social: #c084fc;
    --gradiente-rede-social: linear-gradient(135deg, #6d28d9, #c026d3);
}

.rede-ventos {
    --cor-rede-social: #60a5fa;
    --gradiente-rede-social: linear-gradient(135deg, #1d4ed8, #0284c7);
}

.rede-code {
    --cor-rede-social: #2dd4bf;
    --gradiente-rede-social: linear-gradient(135deg, #0f766e, #06b6d4);
}

.rede-livros {
    --cor-rede-social: #fbbf24;
    --gradiente-rede-social: linear-gradient(135deg, #d97706, #f59e0b);
}

.rede-terca {
    --cor-rede-social: #f472b6;
    --gradiente-rede-social: linear-gradient(135deg, #be185d, #ec4899);
}

/* =========================================================
   RESPONSIVIDADE - REDES SOCIAIS
   ========================================================= */

@media (max-width: 1400px) {
    .cards-redes-sociais {
        grid-template-columns: repeat(5, minmax(210px, 1fr));
    }

    .card-rede-social h3 {
        font-size: 0.98rem;
    }
}

@media (max-width: 1200px) {
    .cards-redes-sociais {
        grid-template-columns: repeat(3, minmax(230px, 1fr));
    }

    .card-rede-social h3 {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        overflow-wrap: anywhere;
    }
}

@media (max-width: 820px) {
    .cards-redes-sociais {
        grid-template-columns: repeat(2, minmax(230px, 1fr));
    }

    .card-rede-social {
        min-height: auto;
    }
}

@media (max-width: 560px) {
    .cards-redes-sociais {
        grid-template-columns: 1fr;
    }
}