/* ========================================================================== Naptec — site institucional (vitrine pública clp40.com.br) Design system: tokens do Bootstrap 5.3 — primário #0d6efd, cinzas #212529/#6c757d/#dee2e6/#f8f9fa. Tema claro/escuro via [data-theme] (setado no antes do paint; toggle no header persiste em localStorage). ========================================================================== */ :root { /* Bootstrap 5.3: --bs-primary e derivados */ --primaria: #0d6efd; --primaria-esc: #0b5ed7; /* hover (btn-primary:hover do BS) */ --primaria-claro: #6ea8fe; /* primary text emphasis no dark */ --primaria-suave: #e7f1ff; /* primary-bg-subtle */ --acento-tx: #0a58ca; /* texto/acento primário legível no claro */ /* Superfícies e texto (gray scale do BS) */ --fundo: #ffffff; --fundo-alt: #f8f9fa; /* gray-100 */ --superficie: #ffffff; --tinta: #212529; /* gray-900 / body-color */ --cinza: #6c757d; /* secondary-color */ --linha: #dee2e6; /* border-color */ /* Header / nav */ --header-bg: rgba(255, 255, 255, .9); --nav-tx: #495057; /* Heros */ --hero-glow: rgba(13, 110, 253, .1); --grid-line: rgba(13, 110, 253, .06); /* Sempre-escuros (rodapé, thumbs, CTA) — gray-900/800 do BS */ --escuro: #212529; --escuro-2: #343a40; --rodape-bg: #1a1d20; --card-ratio: 3 / 2; --raio: 16px; --sombra: 0 8px 30px rgba(33, 37, 41, .08); --sombra-forte: 0 20px 50px rgba(33, 37, 41, .16); --max: 1140px; --fonte: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } [data-theme="dark"] { --primaria-suave: rgba(13, 110, 253, .18); --acento-tx: #6ea8fe; --fundo: #212529; --fundo-alt: #1a1d20; --superficie: #2b3035; --tinta: #e9ecef; --cinza: #adb5bd; --linha: #3d434a; --header-bg: rgba(26, 29, 32, .92); --nav-tx: #ced4da; --hero-glow: rgba(13, 110, 253, .22); --grid-line: rgba(110, 168, 254, .07); --sombra: 0 8px 30px rgba(0, 0, 0, .35); --sombra-forte: 0 20px 50px rgba(0, 0, 0, .5); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--fonte); color: var(--tinta); background: var(--fundo); line-height: 1.65; -webkit-font-smoothing: antialiased; transition: background-color .2s ease, color .2s ease; } img { max-width: 100%; display: block; } a { color: inherit; } h1, h2, h3 { line-height: 1.15; color: var(--tinta); margin: 0 0 .5em; font-weight: 800; letter-spacing: -.01em; } .container { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: 20px; } .pular-link { position: absolute; left: -999px; top: 0; z-index: 100; background: var(--primaria); color: #fff; padding: 10px 16px; border-radius: 0 0 8px 0; } .pular-link:focus { left: 0; } /* --- Botões --------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .4em; padding: 13px 26px; border-radius: 999px; font-weight: 700; text-decoration: none; border: 2px solid transparent; cursor: pointer; transition: .18s ease; font-size: .98rem; letter-spacing: .01em; } .btn--primario { background: var(--primaria); color: #fff; box-shadow: 0 8px 22px rgba(13, 110, 253, .32); } .btn--primario:hover { background: var(--primaria-esc); transform: translateY(-2px); box-shadow: 0 12px 26px rgba(13, 110, 253, .4); } .btn--ghost { border-color: currentColor; color: inherit; } .btn--ghost:hover { background: var(--primaria); color: #fff; border-color: var(--primaria); } .btn--claro { color: inherit; } .btn--wa { background: #25d366; color: #fff; padding: 10px 20px; } .btn--wa:hover { background: #1fb457; transform: translateY(-1px); } .btn--portal { background: var(--primaria); color: #fff; padding: 10px 20px; } .btn--portal:hover { background: var(--primaria-esc); transform: translateY(-1px); } .btn--bloco { width: 100%; margin-top: 10px; } /* --- Cabeçalho ------------------------------------------------------------ */ .cabecalho { position: sticky; top: 0; z-index: 50; background: var(--header-bg); backdrop-filter: saturate(140%) blur(10px); border-bottom: 1px solid var(--linha); } .cabecalho__interno { display: flex; align-items: center; justify-content: space-between; min-height: 72px; gap: 16px; } .marca { display: inline-flex; align-items: center; } .marca__img { height: 38px; width: auto; } .marca__img--escuro { display: none; } [data-theme="dark"] .marca__img--claro { display: none; } [data-theme="dark"] .marca__img--escuro { display: block; } .cabecalho__acoes { display: flex; align-items: center; gap: 10px; } .nav { display: flex; align-items: center; gap: 26px; } .nav a { color: var(--nav-tx); text-decoration: none; font-weight: 600; font-size: .95rem; transition: color .15s; } .nav a:hover { color: var(--primaria); } .nav a.btn { color: #fff; } /* Toggle de tema (claro/escuro) */ .tema-toggle { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--linha); color: var(--nav-tx); cursor: pointer; transition: .18s; flex: none; } .tema-toggle:hover { color: var(--primaria); border-color: var(--primaria); transform: rotate(15deg); } .tema-toggle__sol { display: none; } [data-theme="dark"] .tema-toggle__sol { display: block; } [data-theme="dark"] .tema-toggle__lua { display: none; } /* Dropdown do menu (Treinamentos) —
p/ funcionar sem JS e no teclado. */ .nav__drop { position: relative; } .nav__drop summary { list-style: none; cursor: pointer; user-select: none; color: var(--nav-tx); font-weight: 600; font-size: .95rem; transition: color .15s; } .nav__drop summary::-webkit-details-marker { display: none; } .nav__drop summary::after { content: "▾"; font-size: .72em; margin-left: 6px; opacity: .8; } .nav__drop summary:hover, .nav__drop[open] summary { color: var(--primaria); } .nav__drop-menu { position: absolute; top: calc(100% + 16px); left: 50%; transform: translateX(-50%); min-width: 310px; background: var(--superficie); border: 1px solid var(--linha); border-radius: 14px; box-shadow: var(--sombra-forte); padding: 8px; display: flex; flex-direction: column; z-index: 60; } .nav__drop-menu::before { /* “ponte” invisível p/ não fechar ao mover o mouse */ content: ""; position: absolute; top: -16px; left: 0; right: 0; height: 16px; } .nav .nav__drop-menu a { color: var(--tinta); font-size: .93rem; padding: 10px 14px; border-radius: 9px; font-weight: 600; } .nav .nav__drop-menu a:hover { background: var(--primaria-suave); color: var(--acento-tx); } .nav .nav__drop-menu a:first-child { font-weight: 800; color: var(--acento-tx); } .nav__drop-sep { border: 0; border-top: 1px solid var(--linha); margin: 6px 6px; } .menu-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 8px; } .menu-toggle span { width: 24px; height: 2px; background: var(--tinta); border-radius: 2px; transition: .2s; } .menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* --- Heros (home + páginas internas) --------------------------------------- */ .hero, .pagina-hero, .curso-hero { position: relative; overflow: hidden; background: radial-gradient(1100px 480px at 82% -12%, var(--hero-glow), transparent 62%), linear-gradient(180deg, var(--fundo-alt) 0%, var(--fundo) 100%); } .hero::after, .pagina-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: 46px 46px; mask-image: radial-gradient(closest-side at 70% 40%, #000, transparent 130%); } .hero__interno { position: relative; z-index: 1; padding: 92px 20px 98px; max-width: 780px; } .hero__eyebrow { display: inline-flex; align-items: center; gap: 10px; text-transform: uppercase; letter-spacing: .2em; font-size: .76rem; color: var(--acento-tx); font-weight: 800; margin: 0 0 16px; } .hero__eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--primaria); border-radius: 2px; } .hero h1 { font-size: clamp(2.1rem, 5vw, 3.3rem); margin-bottom: 18px; letter-spacing: -.02em; } .hero__sub { font-size: clamp(1.05rem, 2.2vw, 1.22rem); color: var(--cinza); max-width: 620px; } .hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; } /* Vídeo institucional de fundo do banner (só na home). Cobre toda a seção atrás do conteúdo; um véu (::after) escurece/aclara conforme o tema à esquerda — onde fica o texto — mantendo o título legível. */ .hero--video .hero__video { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .hero--video .hero__video video, .hero--video .hero__video img { width: 100%; height: 100%; object-fit: cover; display: block; } .hero--video .hero__video::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 90deg, var(--fundo) 0%, color-mix(in srgb, var(--fundo) 72%, transparent) 46%, color-mix(in srgb, var(--fundo) 32%, transparent) 100% ); } /* Sobre o vídeo, a grade decorativa não é necessária. */ .hero--video::after { display: none; } /* Contraste máximo do texto do banner sobre o vídeo: preto na tela clara, branco no modo noturno. */ .hero--video .hero__eyebrow, .hero--video h1, .hero--video .hero__sub { color: #000; } [data-theme="dark"] .hero--video .hero__eyebrow, [data-theme="dark"] .hero--video h1, [data-theme="dark"] .hero--video .hero__sub { color: #fff; } .pagina-hero__interno { position: relative; z-index: 1; padding: 60px 20px 64px; max-width: 840px; } .pagina-hero h1 { font-size: clamp(1.75rem, 4vw, 2.7rem); letter-spacing: -.02em; } .pagina-hero__sub { color: var(--cinza); font-size: clamp(1rem, 2vw, 1.15rem); max-width: 660px; margin: 0; } .pagina-hero .hero__cta { margin-top: 26px; } /* --- Seções --------------------------------------------------------------- */ .secao { padding: 78px 0; } .secao--alt { background: var(--fundo-alt); } .secao--compacta { padding: 52px 0; } .secao__cabeca { max-width: 720px; margin-bottom: 44px; } .secao__cabeca h2 { font-size: clamp(1.65rem, 3.5vw, 2.25rem); position: relative; padding-top: 16px; } .secao__cabeca h2::before { content: ""; position: absolute; top: 0; left: 0; width: 44px; height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--primaria), var(--primaria-claro)); } .secao__lead { color: var(--cinza); font-size: 1.08rem; margin: 0; } /* Quem somos */ .duo { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } .duo__item { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); padding: 30px; box-shadow: var(--sombra); transition: .2s; } .duo__item:hover { transform: translateY(-3px); box-shadow: var(--sombra-forte); } .duo__item h3 { font-size: 1.3rem; } .duo__item::before { content: ""; display: block; width: 46px; height: 4px; background: var(--primaria); border-radius: 4px; margin-bottom: 18px; } /* Serviços */ .grid-servicos { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; } .servico { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); padding: 26px 24px; transition: .2s; position: relative; overflow: hidden; } .servico::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--primaria), var(--primaria-claro)); opacity: 0; transition: opacity .2s; } .servico:hover { transform: translateY(-4px); box-shadow: var(--sombra); border-color: var(--primaria-claro); } .servico:hover::before { opacity: 1; } .servico h3 { font-size: 1.1rem; margin-bottom: 8px; } .servico p { margin: 0; color: var(--cinza); font-size: .96rem; } /* --- Grade de cursos ------------------------------------------------------ */ .grid-cursos { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 26px; } .curso-card { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; transition: .22s; } .curso-card:hover { transform: translateY(-5px); box-shadow: var(--sombra-forte); border-color: var(--primaria-claro); } .curso-card__link { text-decoration: none; color: inherit; display: block; } /* Thumbs sempre escuros (logo branco por cima) nos dois temas. */ .curso-thumb { position: relative; aspect-ratio: var(--card-ratio); overflow: hidden; background: radial-gradient(400px 220px at 80% -20%, rgba(13, 110, 253, .35), transparent 62%), linear-gradient(158deg, var(--escuro), var(--escuro-2)); } .curso-thumb > img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; } .curso-card:hover .curso-thumb > img { transform: scale(1.045); } .curso-thumb--placeholder { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 16px; text-align: center; color: #ced4da; } .curso-thumb--placeholder::before { content: ""; position: absolute; inset: 0; opacity: .5; background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px); background-size: 26px 26px; } .curso-thumb--placeholder .curso-thumb__logo-img { position: relative; width: 150px; height: auto; object-fit: contain; opacity: .95; } .curso-thumb__nome { position: relative; font-size: .85rem; color: #adb5bd; } .curso-badge { position: absolute; top: 12px; left: 12px; z-index: 1; background: rgba(33, 37, 41, .82); color: #fff; font-size: .72rem; font-weight: 700; padding: 5px 12px; border-radius: 999px; letter-spacing: .03em; border: 1px solid rgba(255, 255, 255, .14); backdrop-filter: blur(4px); } .curso-card__corpo { padding: 22px; } .curso-card__titulo { font-size: 1.12rem; margin-bottom: 10px; } .curso-meta { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; padding: 0; } .curso-meta li { font-size: .75rem; font-weight: 700; color: var(--acento-tx); background: var(--primaria-suave); border-radius: 999px; padding: 4px 11px; } .curso-card__resumo { color: var(--cinza); font-size: .95rem; margin: 0 0 14px; } .curso-card__cta { color: var(--acento-tx); font-weight: 800; font-size: .92rem; } .vazio { color: var(--cinza); font-size: 1.05rem; } /* Perfis / diferenciais / visão */ .perfis { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; } .perfis li { background: var(--superficie); border: 1px solid var(--linha); border-left: 4px solid var(--primaria); border-radius: 10px; padding: 16px 18px; font-weight: 600; transition: .18s; } .perfis li:hover { box-shadow: var(--sombra); transform: translateX(2px); } .grid-dif { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 22px; } .dif h3 { font-size: 1.12rem; } .dif p { color: var(--cinza); margin: 0; } .dif { padding: 8px 0; } .dif h3::before { content: "▸"; color: var(--primaria); margin-right: 8px; } /* Depoimentos de alunos */ .grid-depo { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 26px; } .depo { display: flex; flex-direction: column; gap: 18px; margin: 0; background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); padding: 26px 26px 22px; transition: .18s; } .depo:hover { box-shadow: var(--sombra); transform: translateY(-2px); } .depo__texto { margin: 0; color: var(--cinza); font-size: .97rem; flex: 1; } .depo__texto::before { content: "“"; display: block; color: var(--primaria); font-size: 2.4rem; font-weight: 800; line-height: .5; margin-bottom: 10px; } .depo__autor { display: flex; align-items: center; gap: 12px; } .depo__avatar { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: var(--primaria-suave); color: var(--acento-tx); font-weight: 800; font-size: .92rem; letter-spacing: .02em; } .depo__nome { display: block; font-size: .98rem; } .depo__cargo { display: block; color: var(--cinza); font-size: .86rem; } /* CTA sempre escuro com glow azul (mesmo look nos dois temas). */ .secao--cta { background: radial-gradient(900px 400px at 90% -20%, rgba(13, 110, 253, .35), transparent 60%), linear-gradient(158deg, var(--escuro), var(--escuro-2)); color: #fff; } .secao--cta h2 { color: #fff; } .cta-box { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; } .cta-box > div:first-child { max-width: 640px; } .cta-box p { color: #ced4da; margin: 0; } .cta-box__acao { display: flex; flex-wrap: wrap; gap: 12px; } .secao--cta .btn--ghost { color: #fff; } .secao--visao { text-align: center; } .visao__texto { max-width: 720px; margin: 0 auto; font-size: 1.25rem; color: var(--cinza); } /* --- Cards de formação (padrão do curso-card + selo "Formação") ------------ */ .grid-formacoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 26px; } .formacao-card__eyebrow { display: inline-flex; align-items: center; gap: 8px; text-transform: uppercase; letter-spacing: .18em; font-size: .68rem; font-weight: 800; color: var(--acento-tx); margin: 0 0 8px; } .formacao-card__eyebrow::before { content: ""; width: 20px; height: 2px; background: currentColor; border-radius: 2px; } /* Ação abaixo de uma grade (ex.: "Ver todos os cursos" na home). */ .secao__acao { margin-top: 36px; text-align: center; } /* --- Rodapé (sempre escuro, logo branco) ----------------------------------- */ .rodape { background: var(--rodape-bg); color: #adb5bd; } .rodape__grid { display: grid; grid-template-columns: 1.6fr 1.1fr 1fr; gap: 32px; padding: 60px 20px 44px; } .rodape__logo { height: 42px; width: auto; } .rodape__sobre { margin: 18px 0 20px; max-width: 380px; } .rodape__titulo { color: #fff; font-size: 1.02rem; margin-bottom: 14px; } .rodape__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; } .rodape__aviso { color: var(--primaria-claro); font-weight: 700; font-size: .92rem; border: 1px solid rgba(13, 110, 253, .5); border-radius: 8px; padding: 8px 12px; background: rgba(13, 110, 253, .12); margin-bottom: 4px; width: fit-content; } .redes { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; } .redes__item { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; text-decoration: none; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); color: #ced4da; font-size: .88rem; font-weight: 600; transition: .18s; } .redes__item:hover { background: rgba(13, 110, 253, .25); border-color: var(--primaria); color: #fff; } .rodape a { color: #ced4da; text-decoration: none; } .rodape a:hover { color: var(--primaria-claro); } .rodape__endereco { font-style: normal; line-height: 1.8; } .rodape__base { border-top: 1px solid rgba(255, 255, 255, .08); padding: 18px 0; font-size: .88rem; color: #adb5bd; } /* --- WhatsApp flutuante ---------------------------------------------------- */ .wa-flutuante { position: fixed; right: 22px; bottom: 22px; z-index: 80; width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #25d366; color: #fff; box-shadow: 0 10px 26px rgba(33, 37, 41, .35); transition: .18s; } .wa-flutuante:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 14px 32px rgba(33, 37, 41, .4); } /* --- Detalhe do curso ----------------------------------------------------- */ .curso-hero__interno { padding: 48px 20px 44px; position: relative; z-index: 1; } .curso-hero h1 { font-size: clamp(1.7rem, 4vw, 2.5rem); max-width: 820px; letter-spacing: -.02em; } .migalha { font-size: .85rem; color: var(--cinza); margin-bottom: 12px; } .migalha a { color: var(--tinta); text-decoration: none; } .migalha a:hover { color: var(--primaria); } .curso-meta--hero { margin-bottom: 22px; } /* Linha nível/carga/formato com o CTA flutuando à direita, no mesmo eixo. */ .curso-hero__linha { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; } .curso-hero__linha .curso-meta--hero { margin-bottom: 0; } /* Banner 10x3 do cadastro: abaixo do nome/detalhes, na largura das 2 colunas. */ .banner-detalhe { padding-top: 36px; } .banner-detalhe img { display: block; width: 100%; height: auto; border-radius: var(--raio); border: 1px solid var(--linha); } .curso-conteudo { display: grid; grid-template-columns: 1fr 340px; gap: 40px; padding-top: 52px; padding-bottom: 68px; } .bloco { margin-bottom: 36px; } .bloco h2 { font-size: 1.4rem; border-left: 4px solid var(--primaria); padding-left: 14px; } .prosa { color: var(--tinta); opacity: .92; } .prosa p { margin: 0 0 1em; } .prosa ul, .prosa ol { margin: 0 0 1em; padding-left: 1.3em; } .prosa li { margin-bottom: .35em; } .prosa--sm { font-size: .95rem; } /* Conteúdo programático em lista (tópicos com subitens). */ ul.lista-conteudo { margin: 0; padding-left: 1.3em; } .lista-conteudo > li { margin-bottom: .55em; } .lista-conteudo > li::marker { color: var(--primaria); } .lista-conteudo ul { margin: .35em 0 0; } .lista-conteudo ul li { color: var(--cinza); font-size: .96rem; } /* Galeria com as imagens 3x2 do cadastro (detalhe de curso/formação). */ .galeria-3x2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin: 0 0 32px; } .galeria-3x2 img { display: block; width: 100%; height: auto; border-radius: var(--raio); border: 1px solid var(--linha); } .curso-conteudo__lateral { align-self: start; position: sticky; top: 92px; display: flex; flex-direction: column; gap: 20px; } .ficha { background: var(--fundo-alt); border: 1px solid var(--linha); border-radius: var(--raio); padding: 24px; } .ficha__titulo { font-size: 1.08rem; margin-bottom: 14px; } .ficha dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; } .ficha dt { color: var(--cinza); font-size: .88rem; } .ficha dd { margin: 0; font-weight: 700; text-align: right; } /* Cards laterais de turmas presenciais e EAD (detalhe do curso). */ .ficha__eyebrow { display: inline-flex; align-items: center; gap: 8px; text-transform: uppercase; letter-spacing: .14em; font-size: .7rem; font-weight: 800; color: var(--acento-tx); margin: 0 0 8px; } .ficha__eyebrow::before { content: ""; width: 20px; height: 2px; background: currentColor; border-radius: 2px; } .ficha__nota { color: var(--cinza); font-size: .9rem; margin: -6px 0 14px; } .turmas-lista { list-style: none; margin: 0; padding: 0; } .turmas-lista li { display: flex; flex-direction: column; gap: 2px; font-size: .92rem; border-top: 1px solid var(--linha); padding: 12px 0; } .turmas-lista li:last-child { padding-bottom: 0; } .turmas-lista li > strong { font-size: .98rem; } .turmas-lista__data { display: inline-flex; align-items: center; gap: 6px; } .turmas-lista__data > svg { color: var(--acento-tx); flex: 0 0 auto; } .turmas-lista__vagas { color: var(--acento-tx); font-weight: 700; } .ead-lista { list-style: none; margin: 0 0 16px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .ead-lista li { display: flex; flex-direction: column; align-items: flex-start; background: var(--superficie); border: 1px solid var(--linha); border-radius: 10px; padding: 10px 12px; font-size: .82rem; color: var(--cinza); } .ead-lista__topo { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; color: var(--acento-tx); } .ead-lista__topo > strong { font-size: 1.3rem; } .curso-voltar { padding-bottom: 60px; } .curso-voltar a { color: var(--acento-tx); font-weight: 800; text-decoration: none; } /* --- Responsivo ----------------------------------------------------------- */ @media (max-width: 860px) { .duo, .curso-conteudo { grid-template-columns: 1fr; } .rodape__grid { grid-template-columns: 1fr; gap: 28px; } .curso-conteudo__lateral { position: static; } .marca__img { height: 32px; } .menu-toggle { display: flex; } .nav { position: fixed; inset: 72px 0 auto 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--superficie); padding: 8px 0 16px; border-bottom: 1px solid var(--linha); transform: translateY(-120%); transition: transform .22s ease; box-shadow: var(--sombra-forte); } .nav.aberto { transform: translateY(0); } .nav a { padding: 14px 22px; border-top: 1px solid var(--linha); color: var(--tinta); } .nav a.btn { margin: 12px 22px 4px; justify-content: center; color: #063d1e; } /* Dropdown vira lista embutida no menu mobile. */ .nav__drop summary { display: block; padding: 14px 22px; border-top: 1px solid var(--linha); color: var(--tinta); } .nav__drop-menu { position: static; transform: none; min-width: 0; background: var(--fundo-alt); border: 0; border-radius: 0; box-shadow: none; padding: 0 0 6px; } .nav__drop-menu::before { display: none; } .nav .nav__drop-menu a { padding: 12px 22px 12px 38px; border-radius: 0; } .wa-flutuante { right: 16px; bottom: 16px; width: 52px; height: 52px; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }