/* ==================================================================== UMANUT - camada de graduacao Folha das paginas de /graduacoes//. Carrega DEPOIS do base.css, que traz tokens, reset, tipografia, botoes, grao e rodape. Aqui fica so o que e proprio de uma pagina de graduacao. Uma pagina de curso nova nao redefine nada disto: ela carrega as duas folhas, escreve o HTML das secoes e so acrescenta o que for dela. Alterou aqui, alterou em todos os cursos - confira mais de uma pagina antes de dar por pronto. Ordem no : base.css -> graduacao.css -> nav.css ==================================================================== */ /* Titulos de duas partes: a linha escura prepara, a italica azul entrega. Sem isto o text-wrap:balance parte o no meio ("Esse assunto se / trata de perto") e as duas cores se misturam na mesma linha. Mesma convencao ja usada em .tl-copy h3 em na pagina Sobre nos. */ #sobre-curso-title em, #publico-title em, #diferenciais-title em, #matriz-title em, #atuacao-title em, #docentes-title em, #depoimentos-title em, #investimento-title em, #processo-title em, #faq-title em, #interesse-title em, #cta-title em { display: block; } /* ==================================================== PAGE HERO - mesma estrutura das demais páginas internas ==================================================== */ .page-hero { position: relative; min-height: 70svh; display: flex; align-items: flex-end; overflow: hidden; background: linear-gradient(180deg, var(--azul-nevoa) 0%, var(--areia-papel) 100%); padding-block: 10rem 4.5rem; } /* Duas correcoes contra o corte seco do azul nas bordas do hero: 1. O blur fica em cada mancha, nao na camada. Com filter na camada (que tem inset:0, o retangulo exato do hero) o navegador recorta o que alimenta o desfoque na moldura da camada, e a parte das manchas que nasce fora dela some de um pixel para o outro - o que aparecia como um risco vertical perto da margem esquerda. 2. A mascara apaga a camada antes do rodape da secao. Sem ela a mancha azul da esquerda ainda esta em forca total quando o hero termina, e o overflow:hidden corta ela a seco no canto de baixo. So no eixo vertical: mascarar tambem as laterais tirava metade do azul, e ali nao ha corte a resolver depois da correcao 1. */ .aurora-light { position: absolute; inset: 0; z-index: 0; -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 97%); mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 97%); } .aurora-light i { position: absolute; border-radius: 50%; filter: blur(70px); } .aurora-light i:nth-child(1) { width: 55vmax; height: 55vmax; right: -18vmax; top: -24vmax; background: radial-gradient(circle at 45% 45%, rgba(190,210,240,0.95) 0%, transparent 62%); } .aurora-light i:nth-child(2) { width: 44vmax; height: 44vmax; left: -14vmax; top: 6vmax; background: radial-gradient(circle at 55% 45%, rgba(80,150,190,0.45) 0%, transparent 62%); } .aurora-light i:nth-child(3) { width: 40vmax; height: 40vmax; right: 14vmax; bottom: -22vmax; background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.9) 0%, transparent 60%); } @media (prefers-reduced-motion: no-preference) { .aurora-light i:nth-child(1) { animation: auroraDrift1 18s ease-in-out infinite alternate; } .aurora-light i:nth-child(2) { animation: auroraDrift2 22s ease-in-out infinite alternate; } .aurora-light i:nth-child(3) { animation: auroraDrift3 15s ease-in-out infinite alternate; } } @keyframes auroraDrift1 { from { transform: translate(0, 0) scale(1); } to { transform: translate(10vmax, 6vmax) scale(1.18); } } @keyframes auroraDrift2 { from { transform: translate(0, 0) scale(1.1); } to { transform: translate(-8vmax, 8vmax) scale(0.92); } } @keyframes auroraDrift3 { from { transform: translate(0, 0) scale(0.95); } to { transform: translate(6vmax, -10vmax) scale(1.22); } } /* O "U" tem que caber inteiro dentro do hero. Cortado embaixo (era bottom:-7rem com 36vw) ele perde a curva, que e a unica parte que identifica a letra - sobram dois tracos verticais que leem como retangulos partindo o fundo azul. Dai o corpo menor, o line-height apertado e o afastamento positivo do rodape da secao. */ .page-hero-monogram { position: absolute; right: clamp(-2rem, -1.5vw, -0.5rem); bottom: 1.5rem; font-family: var(--font-display); font-weight: 900; font-size: clamp(11rem, 26vw, 20rem); line-height: 0.72; color: transparent; -webkit-text-stroke: 1.2px rgba(20,60,140,0.1); z-index: 1; pointer-events: none; user-select: none; } .page-hero-content { position: relative; z-index: 2; width: min(var(--max-w), 100% - 3rem); margin-inline: auto; text-align: left; } .breadcrumb { display: inline-flex; align-items: center; gap: 0.6rem; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--azul-umanut); margin-bottom: 1.75rem; padding: 0.55rem 1.4rem; border: 1px solid rgba(20,60,140,0.22); border-radius: 50px; background: rgba(255,255,255,0.55); backdrop-filter: blur(8px); flex-wrap: wrap; } .breadcrumb a { transition: opacity 200ms; opacity: 0.75; } .breadcrumb a:hover { opacity: 1; } .breadcrumb .sep { opacity: 0.45; } /* No mobile os 36 caracteres com 0.2em de entreletra nao cabiam nos 265px uteis: quebrava em duas linhas, deixando um separador solto no fim da primeira e esticando a pilula. Entreletra e respiro menores resolvem sem cortar nenhum nivel da trilha. */ @media (max-width: 768px) { .breadcrumb { letter-spacing: 0.05em; padding: 0.5rem 0.9rem; gap: 0.4rem; font-size: 0.63rem; } } .page-hero h1 { color: var(--tinta-profunda); /* 10vw e nao 8.4vw: o titulo desta pagina e curto e cabe em uma linha, entao ha folga para o tipo crescer no mobile. A 360px isso da 36px de fonte para 288px de texto num container de 312px. */ font-size: clamp(2rem, 10vw, 7.6rem); line-height: 1.05; } .page-hero h1 .line { display: block; overflow: hidden; padding-block: 0.08em; } .page-hero h1 .line > span { display: inline-block; /* sem white-space:nowrap: se um titulo futuro nao couber, ele quebra em vez de ser cortado em silencio pelo overflow:hidden do hero */ } @media (prefers-reduced-motion: no-preference) { /* O deslocamento inicial do titulo vive AQUI DENTRO, e nao no bloco base. Fora do media query, quem pede movimento reduzido nao recebe a animacao que o desfaz - e o h1 fica preso 115% abaixo, invisivel sob o overflow:hidden da .line. O titulo da pagina sumia por completo. */ .page-hero h1 .line > span { transform: translateY(115%); } /* Delays recalibrados em 14/08/2026, quando o preloader saiu desta pagina. Eram 1.35s / 1.5s / 1.65s / 1.95s: o hero comecava junto com a cortina subindo. Sem cortina, aquilo virava tela parada por quase dois segundos. Subtrai-se 1.3s de cada um, entao o ritmo entre os quatro continua o mesmo (0.15s, 0.15s, 0.30s) - so saiu a espera. A HOME NAO: la a cortina continua, e os delays de la seguem em 1.35s+ de proposito. Nao "uniformizar" os dois. */ .breadcrumb { animation: heroRise 0.9s var(--ease-out-expo) 0.05s both; } .page-hero h1 .line:nth-child(1) > span { animation: heroLine 1.1s var(--ease-out-expo) 0.2s both; } .page-hero h1 .line:nth-child(2) > span { animation: heroLine 1.1s var(--ease-out-expo) 0.35s both; } .page-hero-tagline, .page-hero-meta, .page-hero-actions { animation: heroRise 1s var(--ease-out-expo) 0.65s both; } } @keyframes heroLine { to { transform: translateY(0); } } @keyframes heroRise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } } .page-hero h1 em { font-style: italic; color: var(--azul-umanut); } .page-hero-tagline { font-size: clamp(1rem, 1.9vw, 1.3rem); font-weight: 300; color: var(--texto-muted); max-width: 62ch; margin-top: 1.75rem; line-height: 1.8; } .page-hero-meta { display: flex; align-items: center; gap: 1rem; margin-top: 2.25rem; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--azul-horizonte); } .page-hero-meta::before { content: ''; flex: 0 0 auto; width: 44px; height: 1px; background: currentColor; opacity: 0.5; } /* No mobile a linha quebrava em tres, com o traco centralizado ao lado da linha do meio e "2 / ANOS" partido. Sem o traco e com entreletra menor ela fecha em duas linhas inteiras. */ @media (max-width: 768px) { .page-hero-meta { letter-spacing: 0.1em; gap: 0; } .page-hero-meta::before { display: none; } } .page-hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 2.5rem; } /* ==================================================== QUEM FICA NO TOPO DEPENDE DA LARGURA. Desktop: o menu do site sai de cena e a barra de seções assume o topo. Dois menus fixos empilhados comeriam ~140px e competiriam entre si. Mobile (até 768px, onde o nav.css troca o menu pelo hambúrguer): manda o padrão da plataforma - menu do site fixo, retraindo ao descer e voltando ao subir, e a barra de seções rolando junto com a página. Em tela pequena o hambúrguer precisa estar sempre a um toque, e 64px permanentes de barra secundária custam caro. O seletor leva "body" na frente de proposito: o nav.css e carregado DEPOIS deste bloco, entao com a mesma especificidade ele venceria. ==================================================== */ @media (min-width: 769px) { body .site-header { position: absolute; } body .site-header.hidden { transform: none; } } /* ==================================================== BARRA DE SEÇÕES - navegação interna do curso ==================================================== */ .curso-nav { position: static; z-index: 90; padding-block: 0; background: rgba(247,244,236,0.88); backdrop-filter: blur(12px); border-block: 1px solid rgba(20,60,140,0.12); transition: background 250ms, box-shadow 250ms, border-color 250ms; } /* Depois da regra base de propósito: a media query não acrescenta especificidade, então declarada antes ela seria sobrescrita pelo position:static acima. */ @media (min-width: 769px) { .curso-nav { position: sticky; top: 0; } } @media (prefers-reduced-motion: reduce) { .curso-nav { transition: none; } } /* Quebra em vez de rolar na horizontal. Rolando, o ultimo item aparecia cortado no meio da palavra ("Matriz curricula") sem nenhum sinal de que havia mais - e uma fileira que rola sem afordancia nao se le como menu. Quebrando, todos os destinos ficam visiveis em qualquer largura. */ .curso-nav-inner { display: flex; align-items: center; flex-wrap: wrap; gap: 0.35rem; padding-block: 0.7rem; } .curso-nav-rotulo { flex: 0 0 100%; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--texto-muted); margin-bottom: 0.15rem; } /* No desktop a barra gruda no topo e se explica sozinha; o rotulo so serve na versao que rola junto com a pagina. */ @media (min-width: 769px) { .curso-nav-rotulo { display: none; } } .curso-nav.fixa .curso-nav-rotulo { color: rgba(255,255,255,0.62); } /* No mobile as pilulas quebravam em fileiras desiguais (2, 2, 3, 1) e liam como um amontoado. Duas colunas alinhadas leem como menu; sem a pilula, "Matriz curricular" cabe na coluna de 152px. */ @media (max-width: 768px) { .curso-nav-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 0.1rem 1rem; padding-block: 0.9rem 1.1rem; } .curso-nav-rotulo { grid-column: 1 / -1; margin-bottom: 0.45rem; } .curso-nav a { justify-self: start; padding: 0.42rem 0; border-radius: 0; background: none; } .curso-nav a:hover { background: none; } .curso-nav a.ativo { background: none; color: var(--azul-umanut); border-bottom: 2px solid currentColor; } } .curso-nav a { flex: 0 0 auto; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.02em; color: var(--texto-muted); padding: 0.5rem 0.95rem; border-radius: 50px; white-space: nowrap; transition: color 220ms, background 220ms; } .curso-nav a:hover { color: var(--azul-umanut); background: rgba(20,60,140,0.07); } .curso-nav a.ativo { color: var(--azul-umanut); background: var(--azul-nevoa); } .curso-nav a:focus-visible { outline: 2px solid var(--azul-umanut); outline-offset: 2px; } /* Estado grudado: em repouso a barra vive sobre o areia-papel e some nele. Assim que gruda no topo, ela precisa se separar do conteudo que passa por baixo - e a pagina tem seis fundos diferentes (branco, areia, areia-quente, nevoa, gradiente escuro, tinta), entao nenhum tom claro serve para todos. O escuro serve, e ainda casa com o header. */ .curso-nav.fixa { background: rgba(10,21,48,0.92); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); border-block-color: rgba(190,210,240,0.16); box-shadow: 0 8px 28px rgba(10,21,48,0.22); } .curso-nav.fixa a { color: rgba(255,255,255,0.78); } .curso-nav.fixa a:hover { color: var(--branco); background: rgba(255,255,255,0.12); } .curso-nav.fixa a.ativo { color: var(--tinta-profunda); background: var(--azul-manha); } .curso-nav.fixa a:focus-visible { outline-color: var(--azul-manha); } .curso-nav.fixa a.curso-nav-cta { background: var(--branco); color: var(--azul-umanut); } .curso-nav.fixa a.curso-nav-cta:hover { background: var(--azul-manha); color: var(--tinta-profunda); } .curso-nav a.curso-nav-cta { margin-left: auto; color: var(--branco); background: var(--azul-umanut); padding: 0.55rem 1.35rem; box-shadow: 0 3px 12px rgba(20,60,140,0.24); } .curso-nav a.curso-nav-cta:hover { color: var(--branco); background: var(--azul-horizonte); } /* abaixo disso a fileira de seções já ocupa a largura toda: o CTA sai daqui e continua disponível no fim da página. Era 1100px, de quando a barra tinha nove destinos; com "Diferenciais" os links passaram a somar 1142px e o CTA caia para uma segunda fileira sozinho entre 1101px e 1249px. */ @media (max-width: 1249px) { .curso-nav a.curso-nav-cta { display: none; } } /* âncoras param abaixo da barra de seções (64px) e não do header, que aqui já saiu de cena quando qualquer âncora é acionada */ :target, [id] { scroll-margin-top: 84px; } /* ==================================================== FICHA - dados objetivos do curso, logo abaixo do hero ==================================================== */ /* Sem margem negativa. A sobreposicao com o hero era de apenas 13px - nem card flutuante nem card separado, so um meio-termo que deixava o card colado nos botoes (31px). Agora ele assenta inteiro na faixa clara, com respiro proprio. */ /* Topo zerado e base igual à cauda do hero (4.5rem, o mesmo respiro que ele já dá abaixo dos botões). O espaço acima do card não vem daqui: vem do padding-bottom do hero, que esta regra não enxerga. Somando os dois dava 108px acima contra 48 abaixo no desktop, e o card lia como descentralizado. Agora fica 72/72 em qualquer largura. */ .ficha { padding-block: 0 4.5rem; } .ficha-inner { background: var(--branco); border: 1px solid rgba(20,60,140,0.1); border-radius: 20px; box-shadow: 0 18px 48px rgba(10,21,48,0.09); /* Correção óptica de 2px. A primeira linha é "GRAU", caixa alta, que deixa 5,7px de vazio entre o topo da caixa de linha e o topo dos glifos; a última é "...chaguim", cujo "g" desce e deixa só 1,9px. Com padding geométrico igual (28/28) o card lê como se o conteúdo estivesse alto - 36,7px ópticos acima contra 32,5 abaixo. */ padding-inline: clamp(1.5rem, 4vw, 3rem); padding-block: calc(clamp(1.75rem, 4vw, 2.5rem) - 2px) calc(clamp(1.75rem, 4vw, 2.5rem) + 2px); display: grid; /* Cinco colunas so cabem em largura de desktop: a 1200px cada coluna fica com 189px, que e o minimo para "Segue o luach" nao quebrar. Abaixo de 1024px a ficha cai direto para duas colunas - tres colunas com cinco itens deixaria a segunda fila com um buraco no meio. */ grid-template-columns: repeat(5, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); } .ficha-item { position: relative; } /* filete separador entre as colunas (nunca na primeira) */ .ficha-item + .ficha-item::before { content: ''; position: absolute; left: calc(clamp(1.5rem, 3vw, 2.5rem) / -2); top: 0.15rem; bottom: 0.15rem; width: 1px; background: rgba(20,60,140,0.12); } .ficha-item dt { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--azul-horizonte); margin-bottom: 0.45rem; } .ficha-item dd { font-family: var(--font-display); font-size: clamp(1.05rem, 1.7vw, 1.35rem); font-weight: 600; line-height: 1.3; color: var(--tinta-profunda); letter-spacing: -0.01em; } .ficha-item dd small { display: block; font-family: var(--font-body); font-size: 0.8rem; font-weight: 400; color: var(--texto-muted); letter-spacing: 0; margin-top: 0.15rem; } @media (max-width: 1023px) { .ficha-inner { grid-template-columns: 1fr 1fr; } /* o quinto item ficaria sozinho na terceira fila, com metade do card vazia ao lado; ocupando a fila inteira ele vira o fecho da lista */ .ficha-item:nth-child(5) { grid-column: 1 / -1; } .ficha-item:nth-child(odd)::before { display: none; } .ficha-item:nth-child(n+3)::after { content: ''; position: absolute; left: 0; right: 0; /* +2px pela mesma razão do padding do card: acima do filete termina um texto com descendente, abaixo começa um rótulo em caixa alta. */ top: calc(clamp(1.5rem, 3vw, 2.5rem) / -2 + 2px); height: 1px; background: rgba(20,60,140,0.12); } } @media (max-width: 440px) { .ficha-inner { grid-template-columns: 1fr; } .ficha-item::before { display: none; } .ficha-item:nth-child(n+2)::after { content: ''; position: absolute; left: 0; right: 0; /* +2px pela mesma razão do padding do card: acima do filete termina um texto com descendente, abaixo começa um rótulo em caixa alta. */ top: calc(clamp(1.5rem, 3vw, 2.5rem) / -2 + 2px); height: 1px; background: rgba(20,60,140,0.12); } } /* ==================================================== SOBRE O CURSO ==================================================== */ .sobre-curso-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(2.5rem, 6vw, 5rem); align-items: start; } .sobre-curso-copy p { color: var(--texto-muted); max-width: 62ch; } .sobre-curso-copy p + p { margin-top: 1.1rem; } .sobre-curso-copy h2 { margin-bottom: 1.5rem; } .sobre-curso-copy h2 em { font-style: italic; color: var(--azul-horizonte); } .sobre-curso-media { position: relative; border-radius: 20px; overflow: hidden; box-shadow: 0 16px 44px rgba(10,21,48,0.2); aspect-ratio: 4/5; position: sticky; top: 7rem; } .sobre-curso-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease-smooth), filter 400ms; } .sobre-curso-media:hover img { transform: scale(1.05); filter: saturate(1.1); } .sobre-curso-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,21,48,0.3) 0%, transparent 45%); pointer-events: none; } /* competências: lista tipográfica, sem caixa */ .competencias { margin-top: 2.75rem; } .competencias h3 { font-size: 1.05rem; font-weight: 600; margin-bottom: 1rem; } .competencias ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 0 2.5rem; } .competencias li { display: flex; align-items: flex-start; gap: 0.85rem; padding-block: 0.85rem; border-top: 1px solid rgba(20,60,140,0.12); font-size: 0.95rem; color: var(--texto-muted); line-height: 1.6; } .competencias li svg { flex: 0 0 auto; width: 17px; height: 17px; margin-top: 0.28rem; stroke: var(--azul-horizonte); fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } @media (max-width: 900px) { .sobre-curso-grid { grid-template-columns: 1fr; } .sobre-curso-media { position: relative; top: auto; aspect-ratio: 16/10; order: -1; } } /* ==================================================== MATRIZ CURRICULAR - colunas tipográficas por semestre ==================================================== */ .matriz { background: var(--areia-quente); } .matriz-header { max-width: 62ch; margin-bottom: clamp(2.5rem, 5vw, 3.5rem); } .matriz-header h2 em { font-style: italic; color: var(--azul-horizonte); } .matriz-header p { color: var(--texto-muted); margin-top: 1rem; } .matriz-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: clamp(1.75rem, 3.5vw, 2.75rem); } /* coluna em flex + lista com flex:1: os totais ficam alinhados entre as colunas mesmo quando um nome de disciplina quebra em duas linhas */ .semestre { border-top: 2px solid var(--azul-umanut); padding-top: 1.25rem; display: flex; flex-direction: column; } .semestre h3 { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--azul-umanut); margin-bottom: 1.1rem; } .semestre ul { display: flex; flex-direction: column; flex: 1; } .semestre li { display: flex; align-items: baseline; justify-content: space-between; gap: 0.9rem; font-size: 0.92rem; line-height: 1.5; color: var(--tinta-profunda); padding-block: 0.7rem; border-bottom: 1px solid rgba(20,60,140,0.13); } .semestre li .ch { flex: 0 0 auto; font-size: 0.76rem; font-weight: 600; color: var(--texto-muted); font-variant-numeric: tabular-nums; } .semestre-total { display: flex; align-items: baseline; justify-content: space-between; gap: 0.9rem; margin-top: 0.9rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--azul-umanut); } /* Faixa-resumo das 1.600 horas. Ocupa a largura toda de proposito: o que estava aqui era um paragrafo de 70ch encostado na esquerda embaixo de uma grade de 4 colunas, e a metade direita ficava vazia. */ .matriz-resumo { margin-top: clamp(2rem, 4vw, 3rem); display: grid; /* auto | 1fr: o total ocupa so o que o rotulo dele pede, as quatro parcelas dividem o resto. */ grid-template-columns: auto 1fr; align-items: center; gap: clamp(1.5rem, 3vw, 2.5rem); background: var(--areia-papel); border: 1px solid rgba(20,60,140,0.13); border-radius: 14px; padding: clamp(1.5rem, 3vw, 2.25rem); } /* Quatro parcelas em 4 / 2 / 1 colunas - os tres unicos numeros que dividem 4 sem sobra. Nao usar auto-fit aqui: ele passa por 3 colunas no caminho e deixa a quarta celula orfa sozinha na segunda fila (medido a 600px). Divisao exata precisa ser declarada. */ .matriz-resumo-partes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.25rem, 2.5vw, 2rem); } @media (max-width: 620px) { .matriz-resumo-partes { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 400px) { .matriz-resumo-partes { grid-template-columns: minmax(0, 1fr); } } .matriz-resumo-total, .matriz-resumo-item { display: flex; flex-direction: column; gap: 0.35rem; } /* O total se distingue por um filete, nao por corpo maior: cinco numeros em tamanhos diferentes na mesma faixa viram ruido. */ .matriz-resumo-total { border-left: 2px solid var(--azul-umanut); padding-left: clamp(0.9rem, 1.6vw, 1.15rem); } @media (max-width: 900px) { .matriz-resumo { grid-template-columns: 1fr; align-items: stretch; } } .matriz-resumo .numero { font-size: clamp(1.5rem, 2.6vw, 1.9rem); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; color: var(--azul-umanut); font-variant-numeric: tabular-nums; } .matriz-resumo .rotulo { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; line-height: 1.45; color: var(--texto-muted); } /* Duas colunas para as notas de rodape: uma so voltaria a encostar na esquerda. Cada coluna fica com medida de leitura confortavel. */ .matriz-notas { margin-top: clamp(1.5rem, 3vw, 2.25rem); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: clamp(1rem, 3vw, 2.5rem); } .matriz-notas p { font-size: 0.82rem; line-height: 1.65; color: var(--texto-muted); max-width: 58ch; } /* ==================================================== ATUAÇÃO - banda escura, quebra o ritmo das seções claras ==================================================== */ .atuacao { background: var(--areia-papel); } .atuacao-band { border-radius: 24px; background: linear-gradient(135deg, var(--azul-umanut) 0%, var(--azul-abissal) 55%, var(--tinta-profunda) 100%); padding: clamp(2.5rem, 6vw, 4.5rem); position: relative; overflow: hidden; display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(2rem, 4vw, 4rem); align-items: center; } .atuacao-band::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 85% at 88% 115%, rgba(80,150,190,0.4) 0%, transparent 65%); pointer-events: none; } .atuacao-mark { position: absolute; right: -1.5rem; top: -3.5rem; font-family: var(--font-display); font-weight: 900; font-size: 13rem; line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(190,210,240,0.14); pointer-events: none; user-select: none; } .atuacao-band > div { position: relative; z-index: 1; } .atuacao-tag { display: inline-flex; align-items: center; gap: 0.75rem; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--azul-manha); margin-bottom: 1rem; } .atuacao-tag::before { content: ''; width: 28px; height: 1px; background: currentColor; opacity: 0.6; } .atuacao-band h2 { font-size: clamp(1.6rem, 3.2vw, 2.4rem); color: var(--branco); line-height: 1.25; } .atuacao-band h2 em { font-style: italic; color: var(--azul-manha); } .atuacao-band > div > p { color: rgba(255,255,255,0.82); font-size: 0.95rem; margin-top: 1rem; max-width: 40ch; } /* Grade de duas colunas em vez de flex-wrap: com larguras irregulares o wrap fechava em 3/2/2/1, sobrando um chip orfao na ultima fileira e um vazio grande a direita. Oito itens em 2x4 fecham o bloco. */ .atuacao-lista { display: grid; grid-template-columns: repeat(2, max-content); gap: 0.6rem; justify-content: start; } @media (max-width: 520px) { .atuacao-lista { grid-template-columns: 1fr; } } .atuacao-lista li { font-size: 0.88rem; font-weight: 500; color: var(--branco); background: rgba(255,255,255,0.08); border: 1px solid rgba(190,210,240,0.24); padding: 0.6rem 1.25rem; border-radius: 50px; transition: background 250ms, border-color 250ms; } .atuacao-lista li:hover { background: rgba(255,255,255,0.15); border-color: rgba(190,210,240,0.5); } @media (max-width: 860px) { .atuacao-band { grid-template-columns: 1fr; } .atuacao-mark { font-size: 9rem; right: -2rem; top: -2.5rem; } .atuacao-band > div > p { max-width: none; } } /* ==================================================== CORPO DOCENTE ==================================================== */ .docentes-header { max-width: 62ch; margin-bottom: clamp(2.5rem, 5vw, 3.5rem); } .docentes-header h2 em { font-style: italic; color: var(--azul-horizonte); } .docentes-header p { color: var(--texto-muted); margin-top: 1rem; } .docentes-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: clamp(1.5rem, 3vw, 2rem); } /* Quatro docentes (Gestao Comercial). Com o minimo de 280px a fila de 1200px so comporta tres, e o quarto card fica sozinho embaixo. A 1200px quatro colunas dao 276px - o minimo cai para 270px so nesta variante, e o auto-fit continua cuidando das larguras menores. */ .docentes-grid.quatro { grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr)); } /* Sem caixa. A secao de depoimentos, logo abaixo, ja usa cards - duas grades de tres cards seguidas leem como a mesma coisa repetida duas vezes. Aqui a coluna e tipografica, com filete no topo, da mesma familia de .semestre na matriz. */ .docente { border-top: 1px solid rgba(20,60,140,0.18); padding-top: 1.35rem; } .docente-avatar { width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 0.92rem; font-weight: 600; letter-spacing: 0.04em; color: var(--azul-umanut); background: var(--azul-nevoa); margin-bottom: 1rem; } .docente h3 { font-size: 1.15rem; margin-bottom: 0.3rem; } .docente .docente-cargo { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; /* azul-umanut e nao azul-horizonte: sem o card branco por baixo, este rotulo caiu para o areia-papel, onde o horizonte da 4.38:1 - abaixo do minimo de 4.5 para texto pequeno */ color: var(--azul-umanut); display: block; margin-bottom: 0.9rem; } /* Sem bio, o rotulo e o ultimo elemento do card e o 0.9rem viraria um vao morto no rodape da coluna. Enquanto os minicurriculos nao chegam, os cards de Gestao Comercial caem neste caso. */ .docente .docente-cargo:last-child { margin-bottom: 0; } .docente p { font-size: 0.9rem; line-height: 1.65; color: var(--texto-muted); } /* ==================================================== PERGUNTAS FREQUENTES ==================================================== */ .faq { background: var(--azul-nevoa); } .faq-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(2.5rem, 6vw, 5rem); align-items: start; } .faq-header h2 em { font-style: italic; color: var(--azul-horizonte); } .faq-header p { color: var(--texto-muted); margin-top: 1rem; max-width: 34ch; } .faq-header .btn { margin-top: 1.75rem; } .faq-list { display: flex; flex-direction: column; } .faq-item { border-bottom: 1px solid rgba(20,60,140,0.16); } .faq-item:first-child { border-top: 1px solid rgba(20,60,140,0.16); } .faq-item summary { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; padding-block: 1.4rem; cursor: pointer; list-style: none; font-family: var(--font-display); font-size: 1.02rem; font-weight: 600; line-height: 1.45; color: var(--tinta-profunda); transition: color 250ms; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary:hover { color: var(--azul-umanut); } .faq-item summary:focus-visible { outline: 2px solid var(--azul-umanut); outline-offset: 3px; border-radius: 4px; } .faq-item summary .faq-sinal { flex: 0 0 auto; width: 22px; height: 22px; margin-top: 0.18rem; position: relative; } .faq-item summary .faq-sinal::before, .faq-item summary .faq-sinal::after { content: ''; position: absolute; left: 50%; top: 50%; background: var(--azul-umanut); border-radius: 2px; transform: translate(-50%, -50%); transition: transform 300ms var(--ease-smooth), opacity 250ms; } .faq-item summary .faq-sinal::before { width: 13px; height: 2px; } .faq-item summary .faq-sinal::after { width: 2px; height: 13px; } .faq-item[open] summary .faq-sinal::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; } .faq-item .faq-resposta { padding-bottom: 1.5rem; font-size: 0.95rem; color: var(--texto-muted); max-width: 68ch; } @media (prefers-reduced-motion: no-preference) { .faq-item[open] .faq-resposta { animation: faqAbre 400ms var(--ease-out-expo) both; } } @keyframes faqAbre { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } @media (max-width: 860px) { .faq-grid { grid-template-columns: 1fr; } .faq-header p { max-width: none; } } /* ==================================================== PÚBLICO-ALVO ==================================================== */ .publico { background: var(--branco); } .publico-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2.5rem, 6vw, 5rem); align-items: start; } .publico-header h2 em { font-style: italic; color: var(--azul-horizonte); } .publico-header p { color: var(--texto-muted); margin-top: 1rem; max-width: 36ch; } .publico-lista li { display: grid; grid-template-columns: auto 1fr; gap: 1.25rem; padding-block: 1.35rem; border-top: 1px solid rgba(20,60,140,0.13); } .publico-lista li:last-child { border-bottom: 1px solid rgba(20,60,140,0.13); } .publico-lista .publico-icone { width: 40px; height: 40px; border-radius: 12px; background: var(--azul-nevoa); display: flex; align-items: center; justify-content: center; margin-top: 0.15rem; } .publico-lista .publico-icone svg { width: 19px; height: 19px; stroke: var(--azul-umanut); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .publico-lista h3 { font-size: 1.02rem; margin-bottom: 0.3rem; } .publico-lista p { font-size: 0.92rem; color: var(--texto-muted); line-height: 1.65; } @media (max-width: 860px) { .publico-grid { grid-template-columns: 1fr; } .publico-header p { max-width: none; } } /* ==================================================== DIFERENCIAIS Fica entre "para quem e" (branco) e a matriz (areia quente), entao usa o azul nevoa: sao tres faixas claras diferentes em sequencia. Sem moldura de card de proposito - publico, docentes e processo ja usam cartao, e mais um deixaria a pagina inteira com a mesma textura. Aqui a coluna e aberta e so o filete superior separa. ==================================================== */ .diferenciais { background: var(--azul-nevoa); } .diferenciais-header { max-width: 62ch; margin-bottom: clamp(2.5rem, 5vw, 3.5rem); } .diferenciais-header h2 em { font-style: italic; color: var(--azul-horizonte); } .diferenciais-header p { color: var(--texto-muted); margin-top: 1rem; } .diferenciais-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(2rem, 4vw, 3.25rem); } /* Variante de quatro itens (Gestao Comercial). Em tres colunas o quarto ficaria orfao numa segunda fila, com dois vaos vazios ao lado; 2x2 fecha o retangulo. Entre 900px e 620px vale a mesma logica, entao a quebra para uma coluna continua vindo do @media de 900px la embaixo. */ .diferenciais-grid.quatro { grid-template-columns: repeat(2, 1fr); } .diferenciais-item { border-top: 2px solid var(--azul-umanut); padding-top: 1.4rem; } .diferenciais-item h3 { font-size: clamp(1.1rem, 1.8vw, 1.35rem); color: var(--tinta-profunda); margin-bottom: 0.6rem; } .diferenciais-item p { font-size: 0.95rem; line-height: 1.7; color: var(--texto-muted); } @media (max-width: 900px) { /* uma coluna so: com gap zero os filetes se encostam e as tres viram uma lista pautada, em vez de tres blocos soltos */ /* .quatro repetido: a variante tem especificidade 0,2,0 e venceria este bloco se aqui ficasse so .diferenciais-grid (0,1,0). */ .diferenciais-grid, .diferenciais-grid.quatro { grid-template-columns: 1fr; gap: 0; } .diferenciais-item { padding-block: 1.4rem; } } /* ==================================================== COORDENAÇÃO ==================================================== */ .coordenacao-band { display: grid; grid-template-columns: auto 1fr; gap: clamp(1.75rem, 4vw, 3rem); align-items: center; background: var(--branco); border: 1px solid rgba(20,60,140,0.1); border-radius: 20px; padding: clamp(1.75rem, 4vw, 2.75rem); box-shadow: 0 14px 40px rgba(10,21,48,0.07); margin-bottom: clamp(2.5rem, 5vw, 3.5rem); } .coordenacao-avatar { width: 96px; height: 96px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 1.6rem; font-weight: 600; letter-spacing: 0.04em; color: var(--branco); background: linear-gradient(135deg, var(--azul-umanut), var(--azul-horizonte)); } .coordenacao-band .coordenacao-tag { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--azul-horizonte); display: block; margin-bottom: 0.5rem; } .coordenacao-band h3 { font-size: clamp(1.2rem, 2.2vw, 1.5rem); margin-bottom: 0.6rem; } .coordenacao-band p { font-size: 0.94rem; color: var(--texto-muted); max-width: 62ch; } @media (max-width: 620px) { .coordenacao-band { grid-template-columns: 1fr; text-align: left; } } /* ==================================================== DEPOIMENTOS ==================================================== */ .depoimentos { background: var(--areia-quente); } .depoimentos-header { max-width: 62ch; margin-bottom: clamp(2.5rem, 5vw, 3.5rem); } .depoimentos-header h2 em { font-style: italic; color: var(--azul-horizonte); } .depoimentos-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: clamp(1.5rem, 3vw, 2rem); } .depoimento { background: var(--areia-papel); border: 1px solid rgba(20,60,140,0.1); border-radius: 18px; padding: clamp(1.75rem, 3vw, 2.25rem); display: flex; flex-direction: column; gap: 1.5rem; } .depoimento-aspas { font-family: var(--font-display); font-size: 3.2rem; font-weight: 700; line-height: 0.6; color: var(--azul-manha); height: 1.4rem; } .depoimento blockquote { font-size: 1rem; line-height: 1.7; color: var(--tinta-profunda); flex: 1; } .depoimento figcaption { display: flex; align-items: center; gap: 0.85rem; border-top: 1px solid rgba(20,60,140,0.13); padding-top: 1.25rem; } .depoimento figcaption .depoimento-avatar { width: 42px; height: 42px; flex: 0 0 auto; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 0.85rem; font-weight: 600; color: var(--branco); background: linear-gradient(135deg, var(--azul-umanut), var(--azul-horizonte)); } .depoimento figcaption b { display: block; font-family: var(--font-display); font-size: 0.95rem; font-weight: 600; } .depoimento figcaption span { font-size: 0.8rem; color: var(--texto-muted); } /* ==================================================== INVESTIMENTO + PROCESSO SELETIVO ==================================================== */ .investimento { background: var(--areia-papel); } .investimento-grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: clamp(2.5rem, 5vw, 4rem); /* center e nao start: a coluna da esquerda e curta e o card e alto - alinhados pelo topo sobrava um vazio de ~300px sob o texto */ align-items: center; } .investimento-header h2 em { font-style: italic; color: var(--azul-horizonte); } .investimento-header p { color: var(--texto-muted); margin-top: 1rem; max-width: 36ch; } .valores { background: var(--branco); border: 1px solid rgba(20,60,140,0.1); border-radius: 20px; box-shadow: 0 14px 40px rgba(10,21,48,0.07); overflow: hidden; } .valores-texto { padding: clamp(1.75rem, 3.5vw, 2.5rem); } .valores-texto p { color: var(--texto-muted); } .valores-texto p + p { margin-top: 1rem; } .valores-texto .btn { margin-top: 1.75rem; } .valores-nota { padding: 1.15rem clamp(1.5rem, 3vw, 2.25rem); background: rgba(20,60,140,0.04); font-size: 0.82rem; color: var(--texto-muted); line-height: 1.6; } /* etapas do processo seletivo: a numeração É a informação */ .processo { background: var(--branco); } .processo-header { max-width: 62ch; margin-bottom: clamp(2.5rem, 5vw, 3.5rem); } .processo-header h2 em { font-style: italic; color: var(--azul-horizonte); } .processo-header p { color: var(--texto-muted); margin-top: 1rem; } .processo-etapas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: clamp(1.5rem, 3vw, 2.25rem); counter-reset: etapa; } /* Cinco etapas (Gestao Comercial). Mesmo caso da grade de docentes: com o minimo de 220px cabem quatro e a quinta desce sozinha. A 1200px cinco colunas dao 211px, entao o minimo desta variante e 210px. */ .processo-etapas.cinco { grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); } /* Mesma coluna com filete no topo que .semestre usa na matriz: a pagina passa a ter uma linguagem unica para "colunas ordenadas", em vez de um circulo flutuante com conector aqui e um filete ali. O conector tambem sai - ele so existia para amarrar circulos soltos, e precisava de media query para nao ficar pendurado quando a grade quebrava. */ .etapa { border-top: 2px solid var(--azul-umanut); padding-top: 1.25rem; } .etapa::before { counter-increment: etapa; content: "Etapa " counter(etapa); display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--azul-umanut); margin-bottom: 0.85rem; } .etapa h3 { font-size: 1.05rem; margin-bottom: 0.55rem; } .etapa p { font-size: 0.92rem; color: var(--texto-muted); line-height: 1.65; } @media (max-width: 900px) { .investimento-grid { grid-template-columns: 1fr; } .investimento-header p { max-width: none; } } /* ==================================================== FORMULÁRIO DE INTERESSE ==================================================== */ .interesse { background: linear-gradient(135deg, var(--azul-umanut) 0%, var(--azul-abissal) 55%, var(--tinta-profunda) 100%); position: relative; overflow: hidden; } .interesse::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 55% 80% at 85% 110%, rgba(80,150,190,0.38) 0%, transparent 65%); pointer-events: none; } .interesse .container { position: relative; z-index: 1; } .interesse-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: start; } .interesse-copy h2 { color: var(--branco); } .interesse-copy h2 em { font-style: italic; color: var(--azul-manha); } .interesse-copy p { color: rgba(255,255,255,0.8); margin-top: 1rem; max-width: 38ch; font-size: 0.95rem; } .interesse-copy .kicker { color: var(--azul-manha); } .interesse-contatos { margin-top: 2rem; display: flex; flex-direction: column; gap: 0.85rem; } .interesse-contatos a { display: inline-flex; align-items: center; gap: 0.7rem; font-size: 0.9rem; color: rgba(255,255,255,0.82); transition: color 200ms; width: fit-content; } .interesse-contatos a:hover { color: var(--branco); } .interesse-contatos svg { width: 16px; height: 16px; stroke: var(--azul-manha); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .form-interesse { background: rgba(255,255,255,0.06); border: 1px solid rgba(190,210,240,0.22); border-radius: 20px; padding: clamp(1.75rem, 4vw, 2.5rem); /* sem backdrop-filter: o painel assenta sobre um gradiente liso, entao o blur nao produzia efeito visivel - so custava composicao por frame */ display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; } .campo { display: flex; flex-direction: column; gap: 0.5rem; } .campo.largo { grid-column: 1 / -1; } .campo label { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--azul-manha); } /* O