/* ========================================================================== cortex.css · fundacao visual compartilhada Identidade Squad. Tokens em referencia/identidade-squad.md. Vale para o hub, o HTML de estudo e o HTML de direcao de todos os modulos. Regra fixa: nunca cor fora dos tokens. Nunca travessao. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Tokens As 9 cores sao a marca (identidade-squad.md). Os demais tokens sao derivados nao cromaticos (raio, sombra, espacamento, largura), livres. -------------------------------------------------------------------------- */ :root{ /* cores (marca, nao alterar) */ --navy:#0b1a3a; /* fundo do hero, badge de numero */ --navy-2:#1a3a7a; /* segundo tom do gradiente, titulos de bloco */ --ciano:#2ec4e6; /* destaque: eyebrow, foco, estado dominado */ --laranja:#ff8a3d; /* borda esquerda de titulos, acento de acao */ --bg:#eef1f7; /* fundo da pagina */ --card:#ffffff; /* cartao */ --texto:#1b2436; /* texto principal */ --suave:#5b6678; /* texto secundario */ --linha:#dde3ee; /* bordas e divisorias */ /* escala de espacamento */ --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-5:1.5rem; --sp-6:2rem; --sp-7:3rem; /* raios */ --radius:12px; --radius-hero:18px; --radius-pill:999px; /* sombras (navy translucido, derivado da marca) */ --shadow:0 6px 20px rgba(11,26,58,.08); --shadow-lg:0 12px 36px rgba(11,26,58,.14); /* layout */ --maxw:1180px; --maxw-direcao:1080px; /* transicoes discretas e funcionais (nada de loop, isso e o MIRA) */ --t:.2s ease; } /* -------------------------------------------------------------------------- 2. Base Montserrat importada no de cada HTML (file:// nao usa @import). -------------------------------------------------------------------------- */ *,*::before,*::after{ box-sizing:border-box; } html{ scroll-behavior:smooth; } body{ margin:0; font-family:"Montserrat", system-ui, -apple-system, sans-serif; font-weight:400; color:var(--texto); background:var(--bg); line-height:1.55; -webkit-font-smoothing:antialiased; } h1,h2,h3,h4{ margin:0 0 var(--sp-3); line-height:1.2; font-weight:800; } p{ margin:0 0 var(--sp-3); } a{ color:var(--navy-2); } .cortex-main{ max-width:var(--maxw); margin:0 auto; padding:var(--sp-6) var(--sp-5) var(--sp-7); } .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 var(--sp-5); } /* -------------------------------------------------------------------------- 3. Hero Gradiente navy -> navy-2, eyebrow ciano em maiusculas, h1 pesado. -------------------------------------------------------------------------- */ .hero{ background:linear-gradient(135deg, var(--navy), var(--navy-2)); color:#fff; border-radius:var(--radius-hero); padding:var(--sp-7) var(--sp-6); margin-bottom:var(--sp-6); box-shadow:var(--shadow-lg); } .hero__eyebrow{ color:var(--ciano); text-transform:uppercase; letter-spacing:.12em; font-weight:700; font-size:.78rem; margin:0 0 var(--sp-3); } .hero h1{ font-weight:900; font-size:clamp(1.6rem, 4vw, 2.6rem); color:#fff; margin-bottom:var(--sp-3); } .hero__lead{ color:rgba(255,255,255,.82); font-size:1.05rem; margin:0; } /* -------------------------------------------------------------------------- 4. Titulo de bloco Maiusculas, barra lateral laranja a esquerda. -------------------------------------------------------------------------- */ .bloco-titulo{ text-transform:uppercase; letter-spacing:.05em; font-size:1.15rem; font-weight:800; color:var(--navy-2); border-left:4px solid var(--laranja); padding-left:var(--sp-3); margin:var(--sp-7) 0 var(--sp-4); } .bloco-titulo__eyebrow{ display:block; font-size:.72rem; letter-spacing:.14em; color:var(--ciano); margin-bottom:var(--sp-1); } /* -------------------------------------------------------------------------- 5. Card Branco, cantos arredondados, sombra suave. Badge numerico que vira ciano quando o conceito e marcado como dominado. -------------------------------------------------------------------------- */ .card{ background:var(--card); border:1px solid var(--linha); border-radius:var(--radius); box-shadow:var(--shadow); padding:var(--sp-5); margin-bottom:var(--sp-4); } .card__head{ display:flex; align-items:flex-start; gap:var(--sp-3); } .card__badge{ flex:0 0 auto; width:2rem; height:2rem; border-radius:var(--radius-pill); background:var(--navy); color:#fff; font-weight:800; font-size:.9rem; display:flex; align-items:center; justify-content:center; transition:background var(--t); } .card__title{ font-size:1.1rem; font-weight:700; color:var(--texto); margin:0; } /* card marcado como dominado: badge vira ciano */ .card.is-dominado .card__badge{ background:var(--ciano); } /* barra de progresso no pe do card: respiro do botao Dominei acima dela */ .card > .barra-progresso{ margin-top:var(--sp-5); } /* -------------------------------------------------------------------------- 6. Selo "E DAI?" Faixa laranja curta ao pe do conceito, amarra na realidade do Bruno. -------------------------------------------------------------------------- */ .selo-edai{ margin-top:var(--sp-4); border-left:4px solid var(--laranja); background:rgba(255,138,61,.08); border-radius:0 var(--radius) var(--radius) 0; padding:var(--sp-3) var(--sp-4); } .selo-edai__rotulo{ display:inline-block; text-transform:uppercase; letter-spacing:.08em; font-weight:800; font-size:.72rem; color:var(--laranja); margin-bottom:var(--sp-1); } .selo-edai p{ margin:0; color:var(--texto); } /* -------------------------------------------------------------------------- 6b. Fontes do card (video, referencia externa, atividade do AVA) Bloco de links ao pe do conceito. So link, nada transcrito. Tipo marcado por etiqueta colorida: video (laranja), ref (navy), AVA (ciano). -------------------------------------------------------------------------- */ .card__fontes{ margin-top:var(--sp-4); padding-top:var(--sp-3); border-top:1px dashed var(--linha); } .card__fontes__rotulo{ display:block; text-transform:uppercase; letter-spacing:.08em; font-size:.68rem; font-weight:800; color:var(--suave); margin-bottom:var(--sp-2); } .card__fontes ul{ list-style:none; margin:0; padding:0; display:grid; gap:var(--sp-2); } .card__fontes a{ display:inline-flex; align-items:baseline; flex-wrap:wrap; gap:var(--sp-2); color:var(--navy-2); text-decoration:none; font-weight:700; font-size:.9rem; } .card__fontes a:hover{ text-decoration:underline; } .fonte-tipo{ text-transform:uppercase; font-size:.62rem; letter-spacing:.06em; font-weight:800; color:#fff; background:var(--navy-2); border-radius:var(--radius-pill); padding:.1rem .5rem; align-self:center; } .fonte-tipo.is-video{ background:var(--laranja); } .fonte-tipo.is-ava{ background:var(--ciano); color:var(--navy); } .fonte-meta{ color:var(--suave); font-weight:500; font-size:.82rem; } /* -------------------------------------------------------------------------- 7. Accordion (estudo em camadas) · controlado por initAccordion Titulo sempre visivel; profundidade abre ao clicar. Varios abertos juntos. -------------------------------------------------------------------------- */ .js-accordion .acc__trigger{ width:100%; text-align:left; background:none; border:0; padding:0; cursor:pointer; font:inherit; color:inherit; display:flex; align-items:center; gap:var(--sp-2); } .acc__caret{ margin-left:auto; color:var(--suave); transition:transform var(--t); font-size:.9rem; } .acc__corpo{ overflow:hidden; max-height:0; transition:max-height var(--t); } .js-accordion.is-aberto .acc__corpo{ max-height:none; } .js-accordion.is-aberto .acc__caret{ transform:rotate(90deg); } .acc__corpo > div{ padding-top:var(--sp-3); } /* -------------------------------------------------------------------------- 8. Flashcard (autoteste) · controlado por initFlashcards Pergunta visivel; clique revela a resposta. -------------------------------------------------------------------------- */ .js-flashcard{ border:1px solid var(--linha); border-radius:var(--radius); background:var(--card); box-shadow:var(--shadow); padding:var(--sp-5); margin-bottom:var(--sp-3); cursor:pointer; transition:border-color var(--t); } .js-flashcard:hover{ border-color:var(--ciano); } .flash__rotulo{ text-transform:uppercase; letter-spacing:.1em; font-size:.68rem; font-weight:700; color:var(--ciano); margin-bottom:var(--sp-2); } .flash__pergunta{ font-weight:700; margin:0; } .flash__resposta{ margin:var(--sp-3) 0 0; padding-top:var(--sp-3); border-top:1px solid var(--linha); color:var(--suave); } .js-flashcard:not(.is-revelado) .flash__resposta{ display:none; } /* -------------------------------------------------------------------------- 9. Quiz (autoavaliacao) · controlado por initQuiz Sem
nativo. Feedback imediato: certo (ciano) / errado (navy suave). -------------------------------------------------------------------------- */ .js-quiz{ border:1px solid var(--linha); border-radius:var(--radius); background:var(--card); box-shadow:var(--shadow); padding:var(--sp-5); margin-bottom:var(--sp-4); } .quiz__enunciado{ font-weight:700; margin-bottom:var(--sp-3); } .quiz__opcao{ display:block; width:100%; text-align:left; font:inherit; color:inherit; background:var(--bg); border:1px solid var(--linha); border-radius:var(--radius); padding:var(--sp-3) var(--sp-4); margin-bottom:var(--sp-2); cursor:pointer; transition:border-color var(--t), background var(--t); } .quiz__opcao:hover{ border-color:var(--ciano); } .quiz__opcao.is-certa{ border-color:var(--ciano); background:rgba(46,196,230,.12); } .quiz__opcao.is-errada{ border-color:var(--navy-2); background:rgba(26,58,122,.08); } .quiz__feedback{ margin-top:var(--sp-3); padding-top:var(--sp-3); border-top:1px solid var(--linha); color:var(--suave); font-size:.95rem; } .quiz__feedback:empty{ display:none; border-top:0; padding-top:0; } /* -------------------------------------------------------------------------- 10. Checklist "dominei" · controlado por initDominar Botao por conceito; ao marcar, vira ciano e atualiza a barra. -------------------------------------------------------------------------- */ .dominar-btn{ display:inline-flex; align-items:center; gap:var(--sp-2); margin-top:var(--sp-4); font:inherit; font-weight:700; font-size:.85rem; cursor:pointer; background:var(--bg); color:var(--suave); border:1px solid var(--linha); border-radius:var(--radius-pill); padding:var(--sp-2) var(--sp-4); transition:background var(--t), color var(--t), border-color var(--t); } .dominar-btn::before{ content:"\2713"; font-weight:900; } .dominar-btn.is-dominado{ background:var(--ciano); border-color:var(--ciano); color:var(--navy); } /* Anotacao por conceito (autosave). Campo discreto no corpo do card. */ .nota-bloco{ margin-top:var(--sp-4); } .nota-bloco__rotulo{ display:block; font-size:.78rem; font-weight:700; letter-spacing:.02em; text-transform:uppercase; color:var(--suave); margin-bottom:var(--sp-2); } .nota-conceito{ display:block; width:100%; box-sizing:border-box; font:inherit; font-size:.95rem; line-height:1.5; color:var(--texto); background:var(--bg); border:1px solid var(--linha); border-radius:var(--radius); padding:var(--sp-3); resize:vertical; min-height:4.5rem; transition:border-color var(--t), box-shadow var(--t); } .nota-conceito:focus{ outline:none; border-color:var(--ciano); box-shadow:0 0 0 3px rgba(46,196,230,.25); } .nota-bloco__status{ display:block; margin-top:var(--sp-1); min-height:1rem; font-size:.72rem; color:var(--suave); opacity:0; transition:opacity var(--t); } .nota-bloco__status.is-visivel{ opacity:1; } /* Revisao do modulo: acoes, grupos por eixo, notas agregadas, estado vazio. */ .revisao-acoes{ margin:var(--sp-4) 0 var(--sp-5); } .btn-export{ font:inherit; font-weight:700; font-size:.9rem; cursor:pointer; color:var(--navy); background:var(--laranja); border:none; border-radius:var(--radius-pill); padding:var(--sp-3) var(--sp-5); transition:filter var(--t); } .btn-export:hover{ filter:brightness(1.05); } .btn-export:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(46,196,230,.4); } .revisao-eixo{ margin-top:var(--sp-6); } .revisao-eixo__titulo{ margin-bottom:var(--sp-3); } .revisao-nota{ margin-top:var(--sp-3); } .revisao-nota__texto{ margin:var(--sp-2) 0 0; white-space:pre-wrap; color:var(--texto); } .revisao-vazio{ margin-top:var(--sp-5); padding:var(--sp-5); border:1px dashed var(--linha); border-radius:var(--radius); color:var(--suave); background:var(--card); } /* -------------------------------------------------------------------------- 11. Barra de progresso Trilho cinza, preenchimento ciano. Usada no rodape do modulo e no hub. -------------------------------------------------------------------------- */ .barra-progresso{ height:8px; border-radius:var(--radius-pill); background:var(--linha); overflow:hidden; } .barra-progresso__fill{ height:100%; width:0; background:var(--ciano); border-radius:var(--radius-pill); transition:width var(--t); } /* -------------------------------------------------------------------------- 12. Nav interna por eixo -------------------------------------------------------------------------- */ .nav-interna{ position:sticky; top:0; z-index:5; background:rgba(238,241,247,.92); backdrop-filter:blur(8px); border-bottom:1px solid var(--linha); padding:var(--sp-3) 0; margin-bottom:var(--sp-5); } .nav-interna__inner{ max-width:var(--maxw); margin:0 auto; padding:0 var(--sp-5); display:flex; align-items:center; gap:var(--sp-2) var(--sp-3); } .nav-interna__brand{ text-decoration:none; color:var(--navy); font-weight:800; font-size:.9rem; white-space:nowrap; flex:0 0 auto; } .nav-interna ul{ list-style:none; margin:0; padding:0; flex:1 1 auto; display:flex; flex-wrap:wrap; gap:var(--sp-2); } .nav-interna a{ text-decoration:none; color:var(--navy-2); font-weight:700; font-size:.82rem; text-transform:uppercase; letter-spacing:.04em; padding:var(--sp-1) var(--sp-3); border-radius:var(--radius-pill); transition:background var(--t), color var(--t), box-shadow var(--t); } .nav-interna a:hover{ background:var(--navy-2); color:#fff; } /* pagina atual: pilula preenchida com anel ciano */ .nav-interna a.is-atual{ background:var(--navy-2); color:#fff; box-shadow:0 0 0 2px var(--ciano) inset; } /* progresso do modulo na barra superior */ .nav-interna__progresso{ flex:0 0 auto; display:inline-flex; align-items:baseline; gap:.35rem; white-space:nowrap; } .nav-interna__progresso-num{ color:var(--ciano); font-weight:800; font-size:.95rem; } .nav-interna__progresso-rotulo{ color:var(--suave); font-weight:700; font-size:.68rem; text-transform:uppercase; letter-spacing:.06em; } /* -------------------------------------------------------------------------- 13. Barra fixa no rodape (progresso do modulo) Fundo com blur. So no HTML de estudo. -------------------------------------------------------------------------- */ .barra-rodape{ position:fixed; left:0; right:0; bottom:0; z-index:10; background:rgba(255,255,255,.86); backdrop-filter:blur(10px); border-top:1px solid var(--linha); padding:var(--sp-3) var(--sp-5); } .barra-rodape__inner{ max-width:var(--maxw); margin:0 auto; display:flex; align-items:center; gap:var(--sp-4); } .barra-rodape__label{ font-weight:700; font-size:.85rem; color:var(--navy-2); white-space:nowrap; } .barra-rodape .barra-progresso{ flex:1; } .barra-rodape__pct{ font-weight:800; color:var(--ciano); font-size:.9rem; min-width:3ch; text-align:right; } /* compensa a barra fixa pra nao cobrir o fim do conteudo */ .tem-rodape{ padding-bottom:5rem; } /* -------------------------------------------------------------------------- 14. Glossario (chip clicavel) · controlado por initGlossario -------------------------------------------------------------------------- */ .glossario-lista{ display:flex; flex-wrap:wrap; gap:var(--sp-3); } .chip-glossario{ border:1px solid var(--linha); border-radius:var(--radius); background:var(--card); box-shadow:var(--shadow); padding:var(--sp-3) var(--sp-4); } .chip-glossario__sigla{ font:inherit; font-weight:800; color:var(--navy-2); background:none; border:0; cursor:pointer; padding:0; } .chip-glossario__def{ margin:var(--sp-2) 0 0; color:var(--suave); font-size:.92rem; max-width:42ch; } .chip-glossario:not(.is-aberto) .chip-glossario__def{ display:none; } /* -------------------------------------------------------------------------- 15. Hub: cabecalho do curso, calendario, cards de modulo -------------------------------------------------------------------------- */ .timeline{ display:grid; gap:var(--sp-4); } .modulo-card{ background:var(--card); border:1px solid var(--linha); border-left:4px solid var(--linha); border-radius:var(--radius); box-shadow:var(--shadow); padding:var(--sp-5); transition:border-color var(--t), box-shadow var(--t); } .modulo-card.is-atual{ border-left-color:var(--ciano); box-shadow:var(--shadow-lg); } .modulo-card.is-planejado{ opacity:.72; } .modulo-card__top{ display:flex; align-items:center; gap:var(--sp-3); margin-bottom:var(--sp-2); } .modulo-card__num{ flex:0 0 auto; width:2.2rem; height:2.2rem; border-radius:var(--radius-pill); background:var(--navy); color:#fff; font-weight:800; display:flex; align-items:center; justify-content:center; } .modulo-card.is-atual .modulo-card__num{ background:var(--ciano); color:var(--navy); } .modulo-card__titulo{ font-size:1.05rem; font-weight:700; margin:0; } .modulo-card__meta{ color:var(--suave); font-size:.85rem; margin:0 0 var(--sp-3); } .modulo-card__status{ display:inline-block; text-transform:uppercase; letter-spacing:.06em; font-size:.66rem; font-weight:800; padding:var(--sp-1) var(--sp-3); border-radius:var(--radius-pill); background:var(--bg); color:var(--suave); } .modulo-card.is-atual .modulo-card__status{ background:var(--ciano); color:var(--navy); } .modulo-card__barra{ margin:var(--sp-4) 0; } .modulo-card__acoes{ display:flex; flex-wrap:wrap; gap:var(--sp-3); } /* botoes de acesso (Estudar / Apresentar a direcao) */ .btn{ display:inline-block; text-decoration:none; font-weight:700; font-size:.85rem; padding:var(--sp-2) var(--sp-4); border-radius:var(--radius-pill); cursor:pointer; border:1px solid transparent; transition:background var(--t), color var(--t), border-color var(--t); } .btn--primario{ background:var(--navy-2); color:#fff; } .btn--primario:hover{ background:var(--navy); } .btn--secundario{ background:transparent; color:var(--navy-2); border-color:var(--navy-2); } .btn--secundario:hover{ background:var(--navy-2); color:#fff; } /* acesso inerte (modulo planejado, sem HTML ainda) */ .btn.is-inerte{ background:var(--bg); color:var(--suave); border-color:var(--linha); cursor:not-allowed; pointer-events:none; } /* -------------------------------------------------------------------------- 16. modo-direcao · body do HTML estrategico para apresentar a direcao Mesma casca Squad, densidade condensada. Esconde mecanismos de estudo. Escada MSQ em 1 ou 2 linhas por conceito, leitura corrida. -------------------------------------------------------------------------- */ .modo-direcao{ background:var(--bg); font-size:1.12rem; line-height:1.6; } .modo-direcao .cortex-main{ max-width:var(--maxw-direcao); } /* nada de mecanismo de estudo no documento de direcao */ .modo-direcao .js-flashcard, .modo-direcao .js-quiz, .modo-direcao .dominar-btn, .modo-direcao .barra-rodape, .modo-direcao .glossario-lista{ display:none; } /* conceito condensado: sem accordion, profundidade sempre aberta e enxuta */ .modo-direcao .acc__corpo{ max-height:none; overflow:visible; } .modo-direcao .acc__caret{ display:none; } .modo-direcao .acc__trigger{ cursor:default; } .modo-direcao .card{ padding:var(--sp-5); margin-bottom:var(--sp-4); } .modo-direcao .card__title{ font-size:1.18rem; } .modo-direcao .ponto-estrategico__rotulo{ font-size:.82rem; } /* ponto estrategico condensado: rotulo + uma a duas linhas */ .ponto-estrategico{ border-left:3px solid var(--navy-2); padding-left:var(--sp-4); margin-bottom:var(--sp-4); } .ponto-estrategico__rotulo{ display:block; text-transform:uppercase; letter-spacing:.08em; font-size:.7rem; font-weight:800; color:var(--navy-2); margin-bottom:var(--sp-1); } .ponto-estrategico p{ margin:0; } /* -------------------------------------------------------------------------- 18. Painel de Interpretacao (Fase 1 do MSQ) Abre todo modulo. Compartilhado. Questao central, condicionantes (tempo em destaque), centro de gravidade. -------------------------------------------------------------------------- */ .interpreta-intro{ color:var(--suave); margin-bottom:var(--sp-5); } /* questao central: o destaque do painel */ .interpreta-destaque{ background:linear-gradient(135deg, rgba(11,26,58,.04), rgba(46,196,230,.09)); border:1px solid var(--linha); border-left:4px solid var(--ciano); border-radius:var(--radius); padding:var(--sp-5); margin-bottom:var(--sp-5); } .interpreta-destaque__rotulo{ display:block; text-transform:uppercase; letter-spacing:.08em; font-size:.72rem; font-weight:800; color:var(--ciano); margin-bottom:var(--sp-2); } .interpreta-destaque p{ margin:0; font-size:1.08rem; font-weight:500; } .interpreta-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:var(--sp-4); margin-bottom:var(--sp-5); } /* subtitulo dentro de uma secao (Condicionantes, Centro de gravidade) */ .sub-bloco{ text-transform:uppercase; letter-spacing:.05em; font-size:.9rem; font-weight:800; color:var(--navy-2); margin:var(--sp-5) 0 var(--sp-3); } /* condicionante com o relogio em destaque (laranja) */ .ponto-estrategico.is-tempo{ border-left-color:var(--laranja); } .ponto-estrategico.is-tempo .ponto-estrategico__rotulo{ color:var(--laranja); } /* centro de gravidade: lista numerada com badge navy */ .cdg-lista{ list-style:none; margin:0; padding:0; display:grid; gap:var(--sp-3); } .cdg-lista li{ display:flex; gap:var(--sp-3); align-items:flex-start; background:var(--card); border:1px solid var(--linha); border-radius:var(--radius); box-shadow:var(--shadow); padding:var(--sp-4); } .cdg-lista .cdg-num{ flex:0 0 auto; width:1.8rem; height:1.8rem; border-radius:var(--radius-pill); background:var(--navy); color:#fff; font-weight:800; font-size:.82rem; display:flex; align-items:center; justify-content:center; } .cdg-lista p{ margin:0; } /* -------------------------------------------------------------------------- 19. Tabela (comparativos dentro de um card) -------------------------------------------------------------------------- */ .tabela-wrap{ overflow-x:auto; margin:var(--sp-3) 0; } .tabela-cortex{ width:100%; border-collapse:collapse; font-size:.9rem; min-width:520px; } .tabela-cortex th, .tabela-cortex td{ text-align:left; padding:var(--sp-3); border-bottom:1px solid var(--linha); vertical-align:top; } .tabela-cortex th{ background:var(--bg); color:var(--navy-2); text-transform:uppercase; letter-spacing:.04em; font-size:.7rem; font-weight:800; } .tabela-cortex tbody tr:last-child td{ border-bottom:0; } .tabela-cortex td strong{ color:var(--navy-2); } /* -------------------------------------------------------------------------- 20. Deck embutido (secao Apresentacao por modulo). So no HTML de estudo. iframe responsivo 16:9 mais barra com acesso em tela cheia. O deck e o arquivo decks/mXX/index.html (nativo agora, animado do MIRA depois). -------------------------------------------------------------------------- */ .deck-mira{ border:1px solid var(--linha); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); background:var(--navy); } .deck-mira__frame{ display:block; width:100%; aspect-ratio:16 / 9; border:0; } .deck-mira__barra{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:var(--sp-3); padding:var(--sp-3) var(--sp-4); background:var(--card); border-top:1px solid var(--linha); } .deck-mira__rotulo{ color:var(--suave); font-size:.85rem; font-weight:700; margin:0; } /* destaque conceitual em linha (ex: a equacao da capacidade de IA) */ .destaque-linha{ background:rgba(46,196,230,.10); border-radius:var(--radius); padding:var(--sp-3) var(--sp-4); font-weight:700; color:var(--navy-2); margin:var(--sp-3) 0; } /* -------------------------------------------------------------------------- 17. Responsivo -------------------------------------------------------------------------- */ @media (max-width:640px){ .cortex-main{ padding:var(--sp-5) var(--sp-4) 5rem; } .hero{ padding:var(--sp-6) var(--sp-5); } .barra-rodape__inner{ gap:var(--sp-3); } .modulo-card__acoes{ flex-direction:column; } .modulo-card__acoes .btn{ text-align:center; } .nav-interna__inner{ padding:0 var(--sp-4); flex-wrap:wrap; } .nav-interna ul{ order:3; flex-basis:100%; } .interpreta-grid{ grid-template-columns:1fr; } }