/* ========================================================================== ASSBAN Câmbio — estilos do site institucional Layout em 95% da largura. Cores ASSBAN + destaques do símbolo da logo. ========================================================================== */ /* Fontes hospedadas no tema (@fontsource, OFL) ---------------------------- */ @font-face { font-family: "Montserrat"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/montserrat-latin-400-normal.woff2) format("woff2"); } @font-face { font-family: "Montserrat"; font-style: italic; font-weight: 400; font-display: swap; src: url(../fonts/montserrat-latin-400-italic.woff2) format("woff2"); } @font-face { font-family: "Montserrat"; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/montserrat-latin-500-normal.woff2) format("woff2"); } @font-face { font-family: "Montserrat"; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/montserrat-latin-600-normal.woff2) format("woff2"); } @font-face { font-family: "Montserrat"; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/montserrat-latin-700-normal.woff2) format("woff2"); } @font-face { font-family: "Montserrat"; font-style: normal; font-weight: 800; font-display: swap; src: url(../fonts/montserrat-latin-800-normal.woff2) format("woff2"); } @font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/poppins-latin-500-normal.woff2) format("woff2"); } @font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/poppins-latin-600-normal.woff2) format("woff2"); } @font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/poppins-latin-700-normal.woff2) format("woff2"); } @font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/atkinson-hyperlegible-latin-400-normal.woff2) format("woff2"); } @font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/atkinson-hyperlegible-latin-700-normal.woff2) format("woff2"); } /* Tokens ----------------------------------------------------------------- */ :root { --azul: #3B5488; --azul-claro: #A9B8D8; --fundo: #F3F5F9; --texto: #2B2B2B; --divisoria: #414D76; --marinho: #112B63; --marinho-logo: #011940; --marinho-2: #0A1F4D; --teal: #19C3B1; --ciano: #22B8E8; --laranja: #F5A524; --violeta: #8B5CF6; --azul-vivo: #2563EB; --azul-link: #1D4ED8; --suave: #4A5568; --borda: #DCE3EF; --branco: #fff; --grad-marca: linear-gradient(110deg, #19C3B1 0%, #22B8E8 30%, #F5A524 62%, #8B5CF6 82%, #2563EB 100%); --grad-escuro: radial-gradient(120% 90% at 85% 10%, rgba(34,184,232,.22) 0%, rgba(34,184,232,0) 55%), radial-gradient(90% 80% at 0% 100%, rgba(139,92,246,.22) 0%, rgba(139,92,246,0) 55%), linear-gradient(160deg, #112B63 0%, #011940 70%); --raio-p: 12px; --raio: 18px; --raio-g: 28px; --sombra-p: 0 2px 8px -2px rgba(1,25,64,.12); --sombra: 0 18px 40px -18px rgba(1,25,64,.35); --sombra-g: 0 30px 70px -30px rgba(1,25,64,.5); --fonte: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --fonte-d: "Poppins", "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --topo-h: 76px; --foco: 0 0 0 3px #fff, 0 0 0 5.5px #2563EB; } /* Base ------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--topo-h) + 16px); } body { margin: 0; background: #fff; color: var(--texto); font: 400 1rem/1.65 var(--fonte); overflow-x: clip; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } @media (min-width: 900px) { body { font-size: 1.0625rem; } } img, svg, video, canvas { max-width: 100%; height: auto; } img { display: block; } a { color: var(--azul-link); text-underline-offset: .18em; text-decoration-thickness: 1px; } a:hover { color: var(--marinho); } h1, h2, h3, h4 { font-family: var(--fonte-d); color: var(--marinho-logo); line-height: 1.18; margin: 0 0 .6em; font-weight: 600; letter-spacing: -.01em; } h1 { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.5rem); font-weight: 700; } h2 { font-size: clamp(1.6rem, 1.15rem + 1.6vw, 2.5rem); } h3 { font-size: clamp(1.1rem, 1rem + .35vw, 1.3rem); } p { margin: 0 0 1em; } ul, ol { padding-left: 1.25em; } abbr[title] { text-decoration: none; cursor: help; } :focus { outline: none; } :focus-visible { outline: none; box-shadow: var(--foco); border-radius: 6px; } [hidden] { display: none !important; } .sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .ico { width: 1.25em; height: 1.25em; flex: 0 0 auto; vertical-align: middle; } .cx { width: 95%; margin-inline: auto; } .atalhos { position: absolute; left: 0; top: 0; z-index: 1000; } .pular { position: absolute; left: 16px; top: -100px; white-space: nowrap; background: var(--marinho-logo); color: #fff; padding: 12px 18px; border-radius: 10px; font-weight: 600; text-decoration: none; } .pular:focus { top: 12px; color: #fff; } .pular kbd { margin-left: 6px; padding: 1px 6px; border-radius: 4px; background: rgba(255,255,255,.18); font: 600 .8rem var(--fonte); } .principal { display: block; outline: none; } .grad { background: linear-gradient(100deg, #3FE0CF 0%, #4CC9F5 45%, #FFC15A 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Botões ----------------------------------------------------------------- */ .btn, .ac-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 48px; padding: .7em 1.35em; border-radius: 999px; border: 1.5px solid transparent; font: 600 .97rem/1.2 var(--fonte); text-decoration: none; cursor: pointer; white-space: nowrap; transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease; } .btn .ico, .ac-btn .ico { width: 1.1em; height: 1.1em; transition: transform .2s ease; } .btn:hover .ico--seta, .ac-btn:hover .ico--seta { transform: translateX(3px); } .btn--pq { min-height: 44px; padding: .55em 1.1em; font-size: .9rem; } .btn--gd { min-height: 54px; padding: .8em 1.6em; font-size: 1.02rem; } .btn--bloco { width: 100%; } .btn--plataforma, .ac-btn { background: var(--marinho-logo); color: #fff; position: relative; isolation: isolate; box-shadow: 0 8px 22px -10px rgba(1,25,64,.7); } .btn--plataforma::before { content: ""; position: absolute; inset: -2px; border-radius: inherit; padding: 2px; z-index: -1; background: var(--grad-marca); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; } .btn--plataforma:hover, .ac-btn:hover { background: var(--marinho); color: #fff; transform: translateY(-1px); box-shadow: 0 12px 26px -10px rgba(1,25,64,.75); } .btn--contorno, .ac-btn--sec { background: #fff; color: var(--marinho-logo); border-color: #B9C5DC; box-shadow: none; } .btn--contorno:hover, .ac-btn--sec:hover { background: var(--fundo); color: var(--marinho-logo); border-color: var(--azul); } .btn--claro { background: #fff; color: var(--marinho-logo); box-shadow: 0 10px 28px -12px rgba(0,0,0,.55); } .btn--claro:hover { background: #EAF6FD; color: var(--marinho-logo); transform: translateY(-1px); } .btn--contorno-claro { background: rgba(255,255,255,.06); color: #fff; border-color: rgba(255,255,255,.55); } .btn--contorno-claro:hover { background: rgba(255,255,255,.14); color: #fff; border-color: #fff; } .link-seta { display: inline-flex; align-items: center; gap: .45em; font-weight: 600; color: var(--azul-link); text-decoration: none; } .link-seta .ico { width: 1.05em; height: 1.05em; transition: transform .2s; } .link-seta:hover { color: var(--marinho); text-decoration: underline; } .link-seta:hover .ico { transform: translateX(3px); } .link-seta--claro { color: #9FE3FA; } .link-seta--claro:hover { color: #fff; } /* Olho (rótulo de seção) ---------------------------------------------------- */ .olho { display: inline-flex; align-items: center; gap: .6em; margin: 0 0 .9em; font: 700 .78rem/1.2 var(--fonte); letter-spacing: .14em; text-transform: uppercase; color: var(--azul); } .olho::before { content: ""; width: 26px; height: 3px; border-radius: 3px; background: var(--grad-marca); } .olho--claro { color: #B8E9FB; } /* Topo ------------------------------------------------------------------- */ .topo { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.92); -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid rgba(220,227,239,.9); } .admin-bar .topo { top: 32px; } @media (max-width: 782px) { .admin-bar .topo { top: 46px; } } @media (max-width: 600px) { .admin-bar .topo { top: 0; } } .topo.is-rolado { box-shadow: 0 8px 24px -16px rgba(1,25,64,.35); } .topo__barra { display: flex; align-items: center; gap: 20px; height: var(--topo-h); } .topo__logo { flex: 0 0 auto; display: block; border-radius: 8px; } .topo__logo img { width: 204px; height: auto; } .topo__acoes { margin-left: auto; display: flex; align-items: center; gap: 10px; } .topo__acessar-curto { display: none; } .topo__menu { display: none; width: 46px; height: 46px; border-radius: 12px; border: 1.5px solid var(--borda); background: #fff; color: var(--marinho-logo); align-items: center; justify-content: center; cursor: pointer; } .topo__menu .ico { width: 24px; height: 24px; } .topo__menu--semjs { display: none !important; } /* Megamenu (desktop) ------------------------------------------------------ */ .mm { flex: 1 1 auto; display: flex; justify-content: center; min-width: 0; } .mm__lista { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; } .mm__gatilho { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 13px; border: 0; border-radius: 10px; background: transparent; font: 600 .93rem/1 var(--fonte); color: var(--marinho-logo); cursor: pointer; text-decoration: none; white-space: nowrap; position: relative; } .mm__gatilho:hover, .mm__item.is-aberto > .mm__gatilho { background: var(--fundo); color: var(--marinho-logo); } .mm__gatilho::after { content: ""; position: absolute; left: 13px; right: 13px; bottom: 5px; height: 2.5px; border-radius: 2px; background: var(--grad-marca); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; } .mm__item.is-aberto > .mm__gatilho::after, .mm__gatilho--link:hover::after { transform: scaleX(1); } .mm__seta { width: 16px; height: 16px; transition: transform .25s ease; color: var(--azul); } .mm__item.is-aberto .mm__seta { transform: rotate(180deg); } .mm__painel { position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-top: 1px solid var(--borda); box-shadow: 0 40px 60px -40px rgba(1,25,64,.45); border-radius: 0 0 28px 28px; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .2s ease, transform .22s ease, visibility 0s linear .22s; max-height: calc(100vh - var(--topo-h)); overflow-y: auto; } .mm__item.is-aberto > .mm__painel { opacity: 1; visibility: visible; transform: none; transition: opacity .2s ease, transform .22s ease, visibility 0s; } .no-js .mm__item:hover > .mm__painel, .no-js .mm__item:focus-within > .mm__painel { opacity: 1; visibility: visible; transform: none; transition: none; } .mm__painel-int { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); gap: 28px; padding: 28px 0 32px; } .mm__colunas { gap: 28px; align-items: start; } .mm__coluna-tit { margin: 0 0 10px 12px; font: 700 .72rem/1 var(--fonte); letter-spacing: .14em; text-transform: uppercase; color: #5A6B8C; } .mm__coluna ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; } .mm__link { display: flex; gap: 14px; align-items: flex-start; padding: 11px 12px; border-radius: 14px; text-decoration: none; color: var(--texto); transition: background-color .18s ease, transform .18s ease; } .mm__ico { flex: 0 0 auto; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; color: var(--azul-vivo); background: linear-gradient(135deg, rgba(25,195,177,.13), rgba(37,99,235,.13)); transition: background .2s ease, color .2s ease, transform .2s ease; } .mm__ico .ico { width: 21px; height: 21px; } .mm__txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .mm__link-tit { font: 600 .95rem/1.3 var(--fonte); color: var(--marinho-logo); display: inline-flex; align-items: center; gap: 6px; } .mm__ext .ico { width: 13px; height: 13px; color: #6B7A99; } .mm__link-desc { font-size: .84rem; line-height: 1.45; color: var(--suave); } .mm__link:hover { background: var(--fundo); color: var(--texto); transform: translateX(2px); } .mm__link:hover .mm__ico { background: linear-gradient(135deg, #19C3B1, #2563EB); color: #fff; transform: scale(1.04); } .mm__link:hover .mm__link-tit { color: var(--azul-link); } .mm__destaque { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 24px; border-radius: 22px; color: #fff; background: var(--grad-escuro); box-shadow: var(--sombra); isolation: isolate; } .mm__destaque::after { content: ""; position: absolute; right: -60px; bottom: -60px; width: 200px; height: 200px; border-radius: 50%; border: 1px solid rgba(169,184,216,.25); box-shadow: 0 0 0 26px rgba(169,184,216,.06), 0 0 0 52px rgba(169,184,216,.04); z-index: -1; } .mm__destaque-ico { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); color: #7FE6F7; } .mm__destaque-olho { margin: 6px 0 0; font: 700 .72rem/1.2 var(--fonte); letter-spacing: .14em; text-transform: uppercase; color: #FFC867; } .mm__destaque-tit { margin: 0; font: 600 1.2rem/1.3 var(--fonte-d); color: #fff; } .mm__destaque-txt { margin: 0; font-size: .88rem; line-height: 1.55; color: #D5DEEF; } .mm__destaque-cta { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: #fff; color: var(--marinho-logo); font-weight: 600; font-size: .9rem; text-decoration: none; } .mm__destaque-cta .ico { width: 16px; height: 16px; transition: transform .2s; } .mm__destaque-cta:hover { color: var(--marinho-logo); background: #EAF6FD; } .mm__destaque-cta:hover .ico { transform: translateX(3px); } .mm__destaque--materia { padding: 14px 14px 20px; } .mm__destaque-capa { width: 100%; border-radius: 14px; overflow: hidden; aspect-ratio: 16 / 9; background: #0A1F4D; } .mm__destaque-capa img { width: 100%; height: 100%; object-fit: cover; } .mm__destaque--materia .mm__destaque-olho, .mm__destaque--materia .mm__destaque-tit, .mm__destaque--materia .mm__destaque-cta { margin-left: 6px; margin-right: 6px; } .mm__destaque--materia .mm__destaque-tit { font-size: 1.02rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .mm__emails { list-style: none; margin: 4px 0 8px; padding: 0; display: grid; gap: 10px; width: 100%; } .mm__emails li { display: flex; gap: 10px; align-items: center; } .mm__emails .ico { width: 18px; height: 18px; color: #7FE6F7; } .mm__emails span { display: flex; flex-direction: column; min-width: 0; } .mm__emails small { font-size: .74rem; color: #B8C6E0; } .mm__emails a { color: #fff; font-size: .86rem; font-weight: 600; text-decoration: none; overflow-wrap: anywhere; } .mm__emails a:hover { text-decoration: underline; color: #fff; } .veu { position: fixed; inset: 0; z-index: 90; background: rgba(1,25,64,.28); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); opacity: 0; transition: opacity .2s ease; } .veu.is-visivel { opacity: 1; } /* Topo — pontos de quebra -------------------------------------------------- */ .mm__rot-curto { display: none; } @media (max-width: 1600px) { .mm__rot-longo { display: none; } .mm__rot-curto { display: inline; } } @media (max-width: 1500px) { .mm__gatilho { padding: 0 9px; font-size: .88rem; gap: 4px; } .mm__gatilho::after { left: 9px; right: 9px; } .topo__barra { gap: 12px; } .topo__logo img { width: 184px; } .topo__acoes .btn--pq { padding: .55em .95em; font-size: .86rem; } } .topo__cred-curto { display: none; } @media (max-width: 1439px) { .topo__cred-longo { display: none; } .topo__cred-curto { display: inline; } } @media (max-width: 1320px) { .topo__credenciar { display: none; } } @media (max-width: 1240px) { .topo__cred-longo { display: inline; } .topo__cred-curto { display: none; } .mm { display: none; } .topo__menu { display: inline-flex; } .no-js .topo__menu { display: none; } .no-js .topo__menu--semjs { display: inline-flex !important; } .topo__credenciar { display: inline-flex; } } @media (max-width: 720px) { :root { --topo-h: 66px; } .topo__logo img { width: 160px; } .topo__credenciar { display: none; } } @media (max-width: 420px) { .topo__logo img { width: 138px; } .topo__barra { gap: 8px; } .topo__acoes { gap: 8px; } .topo__acessar-txt { display: none; } .topo__acessar-curto { display: inline; } .topo__acoes .btn--plataforma { padding: .55em .9em; } } /* Gaveta (celular) ------------------------------------------------------- */ .gaveta { position: fixed; top: 0; right: 0; bottom: 0; z-index: 120; width: min(420px, 100%); background: #fff; display: flex; flex-direction: column; box-shadow: -30px 0 60px -30px rgba(1,25,64,.5); transform: translateX(100%); transition: transform .28s cubic-bezier(.2,.8,.2,1); } .gaveta.is-aberta { transform: none; } .gaveta__cab { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--borda); } .gaveta__logo img { width: 176px; height: auto; } .gaveta__fechar { width: 46px; height: 46px; border-radius: 12px; border: 1.5px solid var(--borda); background: #fff; color: var(--marinho-logo); display: grid; place-items: center; cursor: pointer; } .gaveta__nav { flex: 1 1 auto; overflow-y: auto; padding: 8px 12px 16px; overscroll-behavior: contain; } .gaveta__lista { list-style: none; margin: 0; padding: 0; } .gaveta__lista > li { border-bottom: 1px solid #EEF1F7; } .gaveta__acordeao, .gaveta__link-simples { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 10px; min-height: 56px; padding: 0 8px; border: 0; background: none; font: 600 1.05rem/1.2 var(--fonte-d); color: var(--marinho-logo); text-decoration: none; cursor: pointer; text-align: left; } .gaveta__acordeao .ico { color: var(--azul); transition: transform .25s; } .gaveta__acordeao[aria-expanded="true"] .ico { transform: rotate(180deg); } .gaveta__painel { padding: 0 0 14px; } .gaveta__painel ul { list-style: none; margin: 0; padding: 0; } .gaveta__sub { margin: 10px 8px 4px; font: 700 .7rem/1 var(--fonte); letter-spacing: .14em; text-transform: uppercase; color: #5A6B8C; } .gaveta .mm__link { padding: 9px 8px; } .gaveta .mm__ico { width: 38px; height: 38px; } .gaveta__acoes { display: grid; gap: 10px; padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--borda); background: var(--fundo); } html.trava-rolagem { overflow: hidden; } /* Seções ------------------------------------------------------------------ */ .secao { padding-block: clamp(56px, 7vw, 108px); } .secao--clara { background: var(--fundo); } .secao__cabeca { max-width: 860px; margin-bottom: clamp(28px, 4vw, 48px); } .secao__cabeca--linha { max-width: none; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .secao__cabeca--linha > div { max-width: 860px; } .secao__sub { font-size: 1.08rem; color: var(--suave); margin: 0; } .secao__rodape { margin: 32px 0 0; } /* Herói (página inicial) -------------------------------------------------- */ .heroi { position: relative; isolation: isolate; overflow: hidden; margin-top: 18px; border-radius: 32px; color: #fff; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); align-items: center; gap: 24px; padding: clamp(32px, 4.5vw, 72px) clamp(24px, 4vw, 64px) 0; min-height: min(780px, calc(100vh - var(--topo-h) - 36px)); } .heroi__fundo { position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 70% at 78% 45%, rgba(34,184,232,.26) 0%, rgba(34,184,232,0) 60%), radial-gradient(45% 50% at 10% 100%, rgba(139,92,246,.30) 0%, rgba(139,92,246,0) 60%), radial-gradient(35% 40% at 0% 0%, rgba(25,195,177,.20) 0%, rgba(25,195,177,0) 60%), linear-gradient(160deg, #112B63 0%, #071A44 45%, #011940 100%); } .heroi__fundo::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(169,184,216,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(169,184,216,.07) 1px, transparent 1px); background-size: 44px 44px; -webkit-mask-image: radial-gradient(90% 90% at 30% 40%, #000 30%, transparent 85%); mask-image: radial-gradient(90% 90% at 30% 40%, #000 30%, transparent 85%); } .heroi__txt { position: relative; z-index: 2; padding-bottom: clamp(24px, 4vw, 64px); } .heroi__selo { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 22px; padding: 8px 16px 8px 12px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); font-size: .86rem; font-weight: 600; color: #E6EEFB; } .heroi__selo-ponto { width: 9px; height: 9px; border-radius: 50%; background: var(--laranja); box-shadow: 0 0 0 4px rgba(245,165,36,.25); } .heroi__tit { color: #fff; font-size: clamp(2rem, 1.1rem + 2.5vw, 3.35rem); line-height: 1.1; letter-spacing: -.02em; margin-bottom: 22px; } .heroi__sub { font-size: clamp(1.02rem, .95rem + .3vw, 1.2rem); line-height: 1.65; color: #D7E1F2; max-width: 640px; margin-bottom: 30px; } .heroi__acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 28px; } .heroi__fatos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: .9rem; color: #C9D6EC; } .heroi__fatos li { display: inline-flex; align-items: center; gap: 8px; } .heroi__fatos .ico { color: #5BE3D3; width: 18px; height: 18px; } .heroi__globo { position: relative; z-index: 1; align-self: stretch; display: flex; align-items: center; justify-content: center; min-height: 360px; } .globo { --tam: min(100%, 700px); } .globo__palco { position: relative; width: var(--tam); aspect-ratio: 1; margin-inline: auto; cursor: grab; touch-action: pan-y; -webkit-user-select: none; user-select: none; } .globo.is-arrastando .globo__palco { cursor: grabbing; } .globo__estatico { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity .8s ease; pointer-events: none; } .globo__canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; opacity: 0; transition: opacity .8s ease; } .globo--3d .globo__canvas { opacity: 1; } .globo--3d .globo__estatico { opacity: 0; } .globo__rotulos { position: absolute; left: 50%; top: 50%; width: var(--tam); aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none; } .globo__pin { position: absolute; left: 0; top: 0; pointer-events: auto; display: inline-flex; align-items: center; gap: 6px; margin: -14px 0 0 8px; padding: 4px 9px 4px 6px; border-radius: 999px; border: 1px solid rgba(255,255,255,.28); background: rgba(1,25,64,.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #fff; font: 700 .74rem/1 var(--fonte); letter-spacing: .06em; cursor: pointer; transition: opacity .25s ease, background-color .2s; opacity: 0; will-change: transform; } .globo--3d .globo__pin { opacity: 1; } .globo__pin.is-oculto { opacity: 0 !important; pointer-events: none; } .globo__pin-ponto { width: 8px; height: 8px; border-radius: 50%; background: #5BE3D3; box-shadow: 0 0 0 3px rgba(91,227,211,.25); } .globo__pin--origem .globo__pin-ponto { background: var(--laranja); box-shadow: 0 0 0 3px rgba(245,165,36,.3); } .globo__pin:hover, .globo__pin:focus-visible, .globo__pin.is-aberto { background: rgba(17,43,99,.95); z-index: 3; } .globo__pin:focus-visible { box-shadow: 0 0 0 2px #011940, 0 0 0 4px #7FE6F7; } .globo__dica { position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translate(-50%, 6px); width: max-content; max-width: 240px; display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border-radius: 12px; background: #fff; color: var(--texto); font: 500 .8rem/1.4 var(--fonte); letter-spacing: 0; text-align: left; box-shadow: var(--sombra); opacity: 0; visibility: hidden; transition: opacity .18s, transform .18s, visibility 0s .18s; pointer-events: none; } .globo__dica strong { color: var(--marinho-logo); font-size: .84rem; } .globo__dica-cot { color: #0B6B61; font-weight: 600; } .globo__pin:hover .globo__dica, .globo__pin:focus-visible .globo__dica, .globo__pin.is-aberto .globo__dica { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity .18s, transform .18s; } .globo__dica-uso { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); margin: 0; display: inline-flex; align-items: center; gap: 8px; font-size: .78rem; color: #AFC0DD; white-space: nowrap; opacity: 0; transition: opacity .6s .6s; } .globo--3d .globo__dica-uso { opacity: 1; } .globo__dica-uso .ico { width: 15px; height: 15px; } .heroi__ptax { grid-column: 1 / -1; position: relative; z-index: 2; margin: 0 calc(-1 * clamp(24px, 4vw, 64px)); } /* Faixa PTAX ----------------------------------------------------------------- */ .ptax { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; padding: 16px clamp(24px, 4vw, 64px); font-size: .92rem; } .ptax--heroi { background: rgba(1,25,64,.55); border-top: 1px solid rgba(255,255,255,.12); color: #D7E1F2; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .ptax__rotulo { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-size: .74rem; color: #FFC867; } .ptax__rotulo .ico { width: 18px; height: 18px; } .ptax__item strong { font: 600 1.08rem/1 var(--fonte-d); color: #fff; margin-left: 4px; } .ptax__item abbr { font-weight: 700; color: #9FE3FA; } .ptax__data, .ptax__fonte { color: #AFC0DD; font-size: .84rem; } .ptax__fonte { margin-left: auto; } .ptax__fonte a { color: #9FE3FA; } .ptax--pagina { border-radius: var(--raio); background: var(--marinho-logo); color: #D7E1F2; margin: 0 0 24px; } /* Linha do tempo (como funciona) ------------------------------------------- */ .linha-tempo { list-style: none; margin: 0; padding: 0; gap: 16px; position: relative; counter-reset: passo; } .passo { position: relative; padding: 76px 20px 22px; border-radius: var(--raio); background: #fff; border: 1px solid var(--borda); box-shadow: var(--sombra-p); transition: transform .25s ease, box-shadow .25s ease; transform-style: preserve-3d; will-change: transform; } .passo:hover { box-shadow: var(--sombra); } .passo__num { position: absolute; right: 18px; top: 16px; font: 700 .9rem/1 var(--fonte-d); color: #8C9AB8; } .passo__ico { position: absolute; left: 18px; top: 12px; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; color: #fff; background: linear-gradient(135deg, #19C3B1, #2563EB); box-shadow: 0 10px 20px -10px rgba(37,99,235,.8); } .passo:nth-child(2) .passo__ico { background: linear-gradient(135deg, #22B8E8, #2563EB); } .passo:nth-child(3) .passo__ico { background: linear-gradient(135deg, #2563EB, #8B5CF6); } .passo:nth-child(4) .passo__ico { background: linear-gradient(135deg, #8B5CF6, #3B5488); } .passo:nth-child(5) .passo__ico { background: linear-gradient(135deg, #F5A524, #E07B12); } .passo:nth-child(6) .passo__ico { background: linear-gradient(135deg, #112B63, #3B5488); } .passo h3 { font-size: 1.06rem; margin-bottom: .45em; } .passo p { font-size: .9rem; line-height: 1.55; color: var(--suave); margin: 0; } /* Perfis (para quem) ---------------------------------------------------------- */ .perfis { gap: 18px; } .perfil { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 26px; border-radius: var(--raio); background: #fff; border: 1px solid var(--borda); text-decoration: none; color: var(--texto); box-shadow: var(--sombra-p); transition: transform .25s ease, box-shadow .25s ease, border-color .25s; transform-style: preserve-3d; will-change: transform; isolation: isolate; overflow: hidden; } .perfil::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(80% 60% at 100% 0%, rgba(34,184,232,.10), transparent 60%); opacity: 0; transition: opacity .25s; } .perfil:hover { color: var(--texto); box-shadow: var(--sombra); border-color: #B9C5DC; } .perfil:hover::before { opacity: 1; } .perfil__ico { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; color: var(--azul-vivo); background: linear-gradient(135deg, rgba(25,195,177,.14), rgba(37,99,235,.14)); } .perfil__ico .ico { width: 26px; height: 26px; } .perfil__tit { font: 600 1.12rem/1.3 var(--fonte-d); color: var(--marinho-logo); } .perfil__txt { font-size: .93rem; line-height: 1.6; color: var(--suave); } .perfil__mais { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: .9rem; color: var(--azul-link); } .perfil__mais .ico { width: 16px; height: 16px; transition: transform .2s; } .perfil:hover .perfil__mais .ico { transform: translateX(3px); } .perfil--banco { background: var(--grad-escuro); border-color: transparent; color: #D7E1F2; } .perfil--banco:hover { color: #D7E1F2; } .perfil--banco .perfil__tit { color: #fff; } .perfil--banco .perfil__txt { color: #C9D6EC; } .perfil--banco .perfil__ico { color: #7FE6F7; background: rgba(255,255,255,.1); } .perfil--banco .perfil__mais { color: #9FE3FA; } .faixa-interesse { margin-top: 22px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 18px 22px; border-radius: var(--raio); background: #fff; border: 1px dashed #B9C5DC; } .faixa-interesse p { flex: 1 1 360px; margin: 0; color: var(--suave); } .faixa-interesse strong { color: var(--marinho-logo); } .faixa-interesse__ico { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: #FFF4E0; color: #B26A00; } /* Bento (recursos) ---------------------------------------------------------- */ .bento { gap: 16px; } .bento--topo { margin-bottom: 16px; } .bento__item { padding: 24px; border-radius: var(--raio); background: var(--fundo); border: 1px solid #E4E9F2; transition: transform .25s ease, box-shadow .25s ease, background-color .25s; } .bento__item:hover { background: #fff; box-shadow: var(--sombra); transform: translateY(-3px); } .bento__item--gd { padding: 30px; background: #fff; border-color: var(--borda); box-shadow: var(--sombra-p); } .bento__item--escuro { background: var(--grad-escuro); color: #D7E1F2; border-color: transparent; } .bento__item--escuro:hover { background: var(--grad-escuro); } .bento__item--escuro h3 { color: #fff; } .bento__item--escuro .bento__ico { color: #7FE6F7; background: rgba(255,255,255,.1); } .bento__ico { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 14px; border-radius: 14px; color: var(--azul-vivo); background: #fff; box-shadow: var(--sombra-p); } .bento__item--gd .bento__ico { width: 54px; height: 54px; background: linear-gradient(135deg, rgba(25,195,177,.14), rgba(37,99,235,.14)); box-shadow: none; } .bento__item h3 { font-size: 1.05rem; margin-bottom: .4em; } .bento__item--gd h3 { font-size: 1.35rem; } .bento__item p { margin: 0; font-size: .92rem; color: var(--suave); line-height: 1.6; } .bento__item--escuro p { color: #C9D6EC; font-size: 1rem; } .bento__item--gd p { font-size: 1rem; } .bento__lista { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; font-size: .93rem; } .bento__lista li { position: relative; padding-left: 28px; color: var(--texto); } .bento__lista li::before { content: ""; position: absolute; left: 0; top: .2em; width: 18px; height: 18px; border-radius: 50%; background: #E3F8F5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B8C7F' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4L18 8'/%3E%3C/svg%3E") center / 12px no-repeat; } /* Produtos complementares (home) -------------------------------------------- */ .produtos { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr); gap: clamp(28px, 4vw, 64px); align-items: center; padding-top: 0; } .produtos__txt p { color: var(--suave); font-size: 1.05rem; } .produtos__grade { list-style: none; margin: 0; padding: 0; gap: 14px; } .produtos__grade li { display: flex; align-items: center; gap: 12px; padding: 16px; border-radius: 16px; background: #fff; border: 1px solid var(--borda); font-weight: 600; font-size: .92rem; line-height: 1.35; color: var(--marinho-logo); box-shadow: var(--sombra-p); transition: transform .25s ease, box-shadow .25s; transform-style: preserve-3d; } .produtos__grade li:hover { box-shadow: var(--sombra); } .produtos__grade span { flex: 0 0 auto; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; color: #fff; background: linear-gradient(135deg, #22B8E8, #2563EB); } .produtos__grade li:nth-child(3n+2) span { background: linear-gradient(135deg, #19C3B1, #0E8F82); } .produtos__grade li:nth-child(3n) span { background: linear-gradient(135deg, #8B5CF6, #3B5488); } /* Segurança (home) ------------------------------------------------------------ */ .seguranca { position: relative; isolation: isolate; overflow: hidden; border-radius: 32px; padding: clamp(36px, 5vw, 72px) clamp(24px, 4vw, 64px); background: var(--grad-escuro); color: #D7E1F2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px clamp(28px, 4vw, 64px); } .seguranca__malha { position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(rgba(169,184,216,.18) 1px, transparent 1.4px); background-size: 22px 22px; -webkit-mask-image: linear-gradient(120deg, transparent 30%, #000 100%); mask-image: linear-gradient(120deg, transparent 30%, #000 100%); } .seguranca h2 { color: #fff; } .seguranca__cabeca p:last-child { color: #C9D6EC; font-size: 1.05rem; } .seguranca__itens { grid-column: 1; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .seguranca__itens li { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; align-items: start; padding: 16px; border-radius: 16px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); } .seguranca__itens .ico { grid-row: span 2; width: 38px; height: 38px; padding: 8px; border-radius: 12px; background: rgba(127,230,247,.12); color: #7FE6F7; } .seguranca__itens strong { color: #fff; font-weight: 600; font-size: .98rem; } .seguranca__itens span { font-size: .86rem; color: #B8C6E0; } .seguranca__termos { grid-column: 2; grid-row: 1 / span 2; align-self: start; padding: 24px; border-radius: 22px; background: rgba(1,25,64,.5); border: 1px solid rgba(255,255,255,.14); } .seguranca__termos-tit { margin: 0 0 14px; font: 600 1.15rem/1.3 var(--fonte-d); color: #fff; } /* Termos vigentes ---------------------------------------------------------------- */ .termos { display: grid; gap: 10px; margin: 0 0 18px; } .termo { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 14px; background: #fff; border: 1px solid var(--borda); text-decoration: none; color: var(--texto); transition: transform .2s, box-shadow .2s, border-color .2s; } .termo:hover { transform: translateX(3px); box-shadow: var(--sombra-p); border-color: #B9C5DC; color: var(--texto); } .termo__ico { flex: 0 0 auto; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; color: var(--azul-vivo); background: linear-gradient(135deg, rgba(25,195,177,.14), rgba(37,99,235,.14)); } .termo__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; } .termo__tit { font-weight: 600; color: var(--marinho-logo); line-height: 1.35; } .termo__meta { font-size: .82rem; color: var(--suave); } .termo__seta { color: #6B7A99; } .termos--escuro .termo { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.12); color: #D7E1F2; padding: 11px 14px; } .termos--escuro .termo:hover { background: rgba(255,255,255,.09); color: #D7E1F2; } .termos--escuro .termo__ico { width: 36px; height: 36px; color: #7FE6F7; background: rgba(127,230,247,.12); } .termos--escuro .termo__tit { color: #fff; font-size: .93rem; } .termos--escuro .termo__meta { color: #AFC0DD; } .termos--escuro .termo__seta { color: #AFC0DD; } .termos__aviso { display: flex; gap: 8px; align-items: flex-start; font-size: .88rem; color: var(--suave); } /* Matérias recentes + filtro ----------------------------------------------- */ .filtro .abas { margin-bottom: 24px; } /* Abas ------------------------------------------------------------------------ */ .abas { position: relative; display: flex; align-items: center; gap: 6px; min-width: 0; } .abas__trilho { display: flex; gap: 8px; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; padding: 4px; min-width: 0; flex: 1 1 auto; } .abas__trilho::-webkit-scrollbar { display: none; } .abas__aba { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1.5px solid var(--borda); background: #fff; color: var(--marinho-logo); font-weight: 600; font-size: .92rem; text-decoration: none; white-space: nowrap; transition: background-color .2s, color .2s, border-color .2s; } .abas__aba .ico { width: 18px; height: 18px; color: var(--azul); } .abas__aba:hover { border-color: var(--azul); color: var(--marinho-logo); background: var(--fundo); } .abas__aba.is-ativa { background: var(--marinho-logo); border-color: var(--marinho-logo); color: #fff; } .abas__aba.is-ativa .ico { color: #7FE6F7; } .abas__seta { flex: 0 0 auto; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--borda); background: #fff; color: var(--marinho-logo); cursor: pointer; box-shadow: var(--sombra-p); } .abas__seta[hidden] { display: none; } .abas__seta:disabled { opacity: .35; cursor: default; } /* Cartões de matéria --------------------------------------------------------- */ .cartoes { gap: 24px; } .destaque-materia { margin-bottom: 24px; } .cartao { display: flex; flex-direction: column; border-radius: var(--raio); background: #fff; border: 1px solid var(--borda); overflow: hidden; box-shadow: var(--sombra-p); transition: transform .25s ease, box-shadow .25s ease; position: relative; } .cartao:hover { transform: translateY(-4px); box-shadow: var(--sombra); } .cartao__capa { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--marinho-2); } .cartao__capa img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; } .cartao:hover .cartao__capa img { transform: scale(1.04); } .cartao__capa-vazia { display: grid; place-items: center; height: 100%; color: #7FE6F7; background: var(--grad-escuro); } .cartao__capa-vazia .ico { width: 48px; height: 48px; } .cartao__corpo { display: flex; flex-direction: column; gap: 10px; padding: 20px 22px 24px; flex: 1 1 auto; } .cartao__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0; font-size: .82rem; color: var(--suave); } .cartao__tit { margin: 0; font-size: 1.12rem; line-height: 1.35; } .cartao__tit a { color: var(--marinho-logo); text-decoration: none; } .cartao__tit a::after { content: ""; position: absolute; inset: 0; z-index: 1; } .cartao__tit a:hover { color: var(--azul-link); } .cartao__tit a:focus-visible { box-shadow: none; } .cartao:focus-within { box-shadow: var(--foco); } .cartao__resumo { margin: 0; font-size: .92rem; line-height: 1.6; color: var(--suave); } .cartao .selo { position: relative; z-index: 2; } .cartao--grande { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } .cartao--grande .cartao__capa { aspect-ratio: auto; min-height: 100%; } .cartao--grande .cartao__corpo { justify-content: center; padding: clamp(24px, 3vw, 44px); } .cartao--grande .cartao__tit { font-size: clamp(1.35rem, 1.1rem + 1vw, 2rem); } .cartao--grande .cartao__resumo { font-size: 1rem; } .cartao--pagina { background: var(--fundo); } .selo { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font: 700 .72rem/1.1 var(--fonte); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; color: #0F3B8C; background: #E6EEFE; } .selo .ico { width: 14px; height: 14px; } a.selo:hover { filter: brightness(.96); color: #0F3B8C; } .selo--bancos { color: #0F3B8C; background: #E3ECFE; } .selo--prefeituras { color: #0B6B61; background: #DDF6F2; } .selo--estados { color: #5B2DB8; background: #EEE7FE; } .selo--empresas-privadas { color: #8A4B00; background: #FFF0D6; } .selo--pagina { color: var(--marinho-logo); background: #fff; } /* Listagem de matérias --------------------------------------------------------- */ .listagem { padding-block: clamp(28px, 4vw, 48px) clamp(48px, 6vw, 88px); } .listagem__barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 28px; } .listagem__barra .abas { flex: 1 1 520px; } .listagem__barra .busca { flex: 0 1 380px; } .paginacao { margin-top: 40px; } .paginacao ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; } .paginacao a, .paginacao span.page-numbers { display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 12px; border-radius: 12px; border: 1.5px solid var(--borda); color: var(--marinho-logo); font-weight: 600; text-decoration: none; } .paginacao a:hover { background: var(--fundo); border-color: var(--azul); } .paginacao .current { background: var(--marinho-logo); color: #fff; border-color: var(--marinho-logo); } .paginacao .dots { border: 0; } .vazio { text-align: center; padding: 56px 20px; border-radius: var(--raio-g); background: var(--fundo); } .vazio > .ico { width: 48px; height: 48px; color: var(--azul); margin-bottom: 12px; } .vazio p { color: var(--suave); } /* Busca ---------------------------------------------------------------------- */ .busca { position: relative; display: flex; align-items: center; background: #fff; border: 1.5px solid var(--borda); border-radius: 999px; padding: 4px 4px 4px 44px; min-width: 0; } .busca:focus-within { border-color: var(--azul-vivo); box-shadow: 0 0 0 3px rgba(37,99,235,.18); } .busca__ico { position: absolute; left: 16px; color: var(--azul); width: 20px; height: 20px; } .busca__campo { flex: 1 1 auto; min-width: 0; height: 40px; border: 0; background: transparent; font: 500 .95rem var(--fonte); color: var(--texto); } .busca__campo:focus { outline: none; } .busca__campo::placeholder { color: #6B7A99; } .busca__btn { height: 40px; padding: 0 18px; border-radius: 999px; border: 0; background: var(--marinho-logo); color: #fff; font: 600 .9rem var(--fonte); cursor: pointer; } .busca__btn:hover { background: var(--marinho); } /* Cabeçalho de página ------------------------------------------------------------ */ .cabeca { padding-top: 18px; } .cabeca__painel { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: clamp(32px, 4.5vw, 64px) clamp(24px, 4vw, 64px); border-radius: 28px; background: var(--grad-escuro); color: #D7E1F2; min-height: 240px; } .cabeca__malha { position: absolute; inset: 0; z-index: -1; background: radial-gradient(closest-side at 86% 50%, rgba(34,184,232,.22), transparent), repeating-radial-gradient(circle at 86% 50%, rgba(169,184,216,.14) 0 1px, transparent 1px 34px); -webkit-mask-image: linear-gradient(90deg, transparent 35%, #000 80%); mask-image: linear-gradient(90deg, transparent 35%, #000 80%); } .cabeca__txt { max-width: 900px; position: relative; } .cabeca__tit { color: #fff; margin-bottom: .35em; font-size: clamp(1.9rem, 1.25rem + 2.4vw, 3.2rem); } .cabeca__resumo { font-size: clamp(1rem, .95rem + .3vw, 1.18rem); color: #D0DBEE; margin: 0; max-width: 780px; } .cabeca__emblema { flex: 0 0 auto; display: grid; place-items: center; width: clamp(96px, 10vw, 150px); aspect-ratio: 1; border-radius: 34px; color: #7FE6F7; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); box-shadow: inset 0 0 40px rgba(34,184,232,.15); transform: rotate(-6deg); } .cabeca__emblema .ico { width: 46%; height: 46%; stroke-width: 1.4; } /* Trilha de navegação ---------------------------------------------------------- */ .trilha ol { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 0; font-size: .84rem; } .trilha li { display: inline-flex; align-items: center; color: var(--suave); } .trilha li + li::before { content: "/"; margin: 0 8px; color: #94A3B8; } .trilha a { color: var(--azul-link); text-decoration: none; } .trilha a:hover { text-decoration: underline; } .trilha--clara li { color: #C9D6EC; } .trilha--clara li + li::before { color: #7D8FB3; } .trilha--clara a { color: #9FE3FA; } /* Conteúdo de página ---------------------------------------------------------------- */ .pagina { padding-block: clamp(32px, 5vw, 64px) clamp(40px, 6vw, 88px); } .conteudo > * + * { margin-top: 0; } .conteudo--pagina > p, .conteudo--pagina > ul, .conteudo--pagina > ol { max-width: 920px; } .conteudo h2 { margin-top: 1.6em; } .conteudo h3 { margin-top: 1.4em; } .conteudo > h2:first-child, .conteudo > h3:first-child, .conteudo > .pg-secao:first-child { margin-top: 0; } .conteudo li { margin-bottom: .4em; } .conteudo table { width: 100%; border-collapse: collapse; font-size: .95rem; } .conteudo th, .conteudo td { padding: 10px 12px; border-bottom: 1px solid var(--borda); text-align: left; vertical-align: top; } .conteudo th { background: var(--fundo); color: var(--marinho-logo); font-weight: 600; } .tabela-rolagem { overflow-x: auto; margin: 0 0 1.4em; border-radius: 12px; border: 1px solid var(--borda); } .conteudo blockquote { margin: 1.4em 0; padding: 18px 22px; border-left: 4px solid var(--ciano); background: var(--fundo); border-radius: 0 14px 14px 0; } /* Componentes das páginas (pg-) ------------------------------------------------------ */ .pg-secao { margin: 0 0 clamp(44px, 6vw, 80px); } .pg-secao:last-child { margin-bottom: 0; } .pg-secao--clara { padding: clamp(24px, 4vw, 48px); border-radius: var(--raio-g); background: var(--fundo); } .pg-secao--escura { padding: clamp(28px, 4vw, 56px); border-radius: var(--raio-g); background: var(--grad-escuro); color: #D7E1F2; } .pg-secao--escura h2, .pg-secao--escura h3 { color: #fff; } .pg-secao--escura a:not(.ac-btn):not(.btn) { color: #9FE3FA; } .pg-cabeca { max-width: 880px; margin-bottom: 28px; } .pg-cabeca h2 { margin-top: 0; } .pg-sub { font-size: 1.08rem; color: var(--suave); } .pg-secao--escura .pg-sub { color: #C9D6EC; } .pg-intro { font-size: clamp(1.08rem, 1rem + .35vw, 1.28rem); line-height: 1.65; color: #2E3A52; max-width: 980px; margin-bottom: 1.4em; } .pg-grade { gap: 18px; margin: 0 0 1.4em; } .pg-cartao { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 24px; border-radius: var(--raio); background: #fff; border: 1px solid var(--borda); box-shadow: var(--sombra-p); } .pg-secao--clara .pg-cartao { border-color: #E2E8F2; } .pg-cartao h3 { margin: 4px 0 2px; font-size: 1.1rem; } .pg-cartao p { margin: 0; font-size: .95rem; color: var(--suave); line-height: 1.6; } .pg-cartao ul { margin: 6px 0 0; font-size: .93rem; color: var(--suave); } .pg-cartao .link-seta { margin-top: auto; padding-top: 6px; font-size: .92rem; } .pg-ico { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; color: var(--azul-vivo); background: linear-gradient(135deg, rgba(25,195,177,.14), rgba(37,99,235,.14)); } .pg-ico .ico { width: 24px; height: 24px; } .pg-secao--escura .pg-cartao { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); box-shadow: none; } .pg-secao--escura .pg-cartao p, .pg-secao--escura .pg-cartao ul { color: #C9D6EC; } .pg-secao--escura .pg-ico { color: #7FE6F7; background: rgba(127,230,247,.12); } .pg-duas { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, .9fr); gap: clamp(24px, 4vw, 56px); align-items: start; } .pg-duas--form { grid-template-columns: minmax(0, 1.5fr) minmax(300px, .85fr); } .pg-aside { position: sticky; top: calc(var(--topo-h) + 20px); display: grid; gap: 16px; } .pg-caixa { padding: 24px; border-radius: var(--raio); background: var(--fundo); border: 1px solid #E2E8F2; } .pg-caixa h3 { margin-top: 0; font-size: 1.08rem; } .pg-caixa p, .pg-caixa li { font-size: .93rem; color: var(--suave); } .pg-caixa ul { padding-left: 1.1em; margin: 0; } .pg-caixa--escura { background: var(--grad-escuro); border-color: transparent; color: #D7E1F2; } .pg-caixa--escura h3 { color: #fff; } .pg-caixa--escura p, .pg-caixa--escura li { color: #C9D6EC; } .pg-caixa--escura a:not(.ac-btn):not(.btn) { color: #9FE3FA; } .pg-caixa .ac-btn { margin-top: 6px; } .pg-lista-check { list-style: none; padding: 0; margin: 0 0 1.4em; display: grid; gap: 10px; } .pg-lista-check li { position: relative; padding-left: 32px; margin: 0; } .pg-lista-check li::before { content: ""; position: absolute; left: 0; top: .18em; width: 22px; height: 22px; border-radius: 50%; background: #E3F8F5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B8C7F' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4L18 8'/%3E%3C/svg%3E") center / 14px no-repeat; } .pg-lista-check--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 10px 28px; } .pg-secao--escura .pg-lista-check li::before { background-color: rgba(91,227,211,.18); } .pg-passos { list-style: none; margin: 0 0 1.4em; padding: 0; gap: 16px; counter-reset: pgp; } .pg-passos li { counter-increment: pgp; position: relative; margin: 0; padding: 60px 22px 22px; border-radius: var(--raio); background: #fff; border: 1px solid var(--borda); box-shadow: var(--sombra-p); font-size: .95rem; color: var(--suave); } .pg-passos li::before { content: counter(pgp); position: absolute; left: 22px; top: 18px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: #fff; font: 700 .95rem/1 var(--fonte-d); background: linear-gradient(135deg, #19C3B1, #2563EB); } .pg-passos li strong { display: block; color: var(--marinho-logo); font-size: 1.02rem; margin-bottom: 4px; } .pg-ancoras { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 clamp(32px, 5vw, 56px); padding: 0; list-style: none; } .pg-ancoras li { margin: 0; } .pg-ancoras a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--borda); background: #fff; color: var(--marinho-logo); font-weight: 600; font-size: .9rem; text-decoration: none; } .pg-ancoras a .ico { width: 18px; height: 18px; color: var(--azul); } .pg-ancoras a:hover { border-color: var(--azul); background: var(--fundo); } .pg-segmento { scroll-margin-top: calc(var(--topo-h) + 20px); padding: clamp(24px, 3.5vw, 44px); border-radius: var(--raio-g); background: #fff; border: 1px solid var(--borda); box-shadow: var(--sombra-p); margin: 0 0 24px; } .pg-segmento:nth-of-type(even) { background: var(--fundo); border-color: #E2E8F2; } .pg-segmento__cab { display: flex; align-items: center; gap: 18px; margin-bottom: 18px; } .pg-segmento__cab .pg-ico { width: 60px; height: 60px; border-radius: 18px; flex: 0 0 auto; } .pg-segmento__cab .pg-ico .ico { width: 30px; height: 30px; } .pg-segmento__cab h2, .pg-segmento__cab h3 { margin: 0; } .pg-segmento__cab p { margin: 4px 0 0; color: var(--suave); } .pg-segmento__colunas { gap: 24px; } .pg-segmento__colunas h3, .pg-segmento__colunas h4 { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--azul); margin: 0 0 10px; font-family: var(--fonte); font-weight: 700; } .pg-segmento__colunas p, .pg-segmento__colunas li { font-size: .95rem; color: var(--suave); } .pg-segmento__colunas ul { padding-left: 1.1em; margin: 0; } .pg-segmento__rodape { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; padding-top: 18px; border-top: 1px dashed #C9D3E5; } .pg-aviso { display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; border-radius: 16px; background: #EAF2FF; border: 1px solid #C7D9FB; color: #1E3A6E; margin: 0 0 1.4em; font-size: .95rem; } .pg-aviso > .ico { color: #1D4ED8; width: 22px; height: 22px; margin-top: 2px; } .pg-aviso p { margin: 0; } .pg-aviso--alerta { background: #FFF6E5; border-color: #F7D9A0; color: #5C3A00; } .pg-aviso--alerta > .ico { color: #B26A00; } .pg-botoes { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 1.4em; } .pg-numero { font: 700 2rem/1 var(--fonte-d); background: var(--grad-marca); -webkit-background-clip: text; background-clip: text; color: transparent; } .pg-dados-assban { gap: 0; margin: 0 0 1.4em; border: 1px solid var(--borda); border-radius: var(--raio); overflow: hidden; } .pg-dados-assban div { padding: 16px 20px; border-bottom: 1px solid var(--borda); border-right: 1px solid var(--borda); background: #fff; } .pg-dados-assban dt { font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: #5A6B8C; font-weight: 700; margin-bottom: 4px; } .pg-dados-assban dd { margin: 0; color: var(--marinho-logo); font-weight: 600; } .pg-etiquetas { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 1.4em; padding: 0; list-style: none; } .pg-etiquetas li { margin: 0; padding: 6px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--borda); font-size: .85rem; font-weight: 600; color: var(--marinho-logo); } .pg-secao--clara .pg-etiquetas li { background: #fff; } /* Acordeões (details/summary) ------------------------------------------------- */ .acordeao { border: 1px solid var(--borda); border-radius: 16px; background: #fff; margin: 0 0 12px; overflow: hidden; } .acordeao summary { list-style: none; display: flex; align-items: center; gap: 12px; padding: 18px 20px; cursor: pointer; font: 600 1.02rem/1.35 var(--fonte-d); color: var(--marinho-logo); } .acordeao summary::-webkit-details-marker { display: none; } .acordeao summary:hover { background: var(--fundo); } .acordeao__tit { flex: 1 1 auto; } .acordeao__selo { flex: 0 0 auto; padding: 4px 10px; border-radius: 999px; background: #E3F8F5; color: #0B6B61; font: 700 .74rem/1.1 var(--fonte); } .acordeao__seta { color: var(--azul); transition: transform .25s; } .acordeao[open] .acordeao__seta { transform: rotate(180deg); } .acordeao[open] summary { border-bottom: 1px solid var(--borda); } .acordeao__corpo { padding: 8px 24px 24px; } .termo-texto { max-height: 70vh; overflow-y: auto; padding-right: 8px; font-size: .95rem; } .termo-texto h3 { font-size: 1.05rem; margin: 1.3em 0 .5em; } .termo-texto h2 { font-size: 1.2rem; } /* Caixa de protocolo (portal) --------------------------------------------------- */ .protocolo-cx { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 20px; align-items: center; padding: clamp(22px, 3vw, 32px); border-radius: var(--raio-g); background: var(--grad-escuro); color: #D7E1F2; margin: 0 0 32px; box-shadow: var(--sombra); } .protocolo-cx__ico { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 18px; background: rgba(255,200,103,.14); color: #FFC867; } .protocolo-cx__ico .ico { width: 30px; height: 30px; } .protocolo-cx h3 { color: #fff; margin: 0 0 4px; font-size: 1.25rem; } .protocolo-cx p { margin: 0; color: #C9D6EC; font-size: .95rem; } .protocolo-cx__olho { font: 700 .72rem/1.2 var(--fonte) !important; letter-spacing: .14em; text-transform: uppercase; color: #FFC867 !important; margin-bottom: 6px !important; } .protocolo-cx__acoes { display: flex; flex-direction: column; gap: 10px; } .protocolo-cx .ac-btn { background: #fff; color: var(--marinho-logo); } .protocolo-cx .ac-btn:hover { background: #EAF6FD; color: var(--marinho-logo); } .protocolo-cx .ac-btn--sec { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); } .protocolo-cx .ac-btn--sec:hover { background: rgba(255,255,255,.1); color: #fff; } /* E-mails ------------------------------------------------------------------------ */ .emails { list-style: none; margin: 0 0 1.2em; padding: 0; display: grid; gap: 12px; } .emails li { display: flex; gap: 12px; align-items: center; margin: 0; } .emails__ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: #fff; color: var(--azul-vivo); box-shadow: var(--sombra-p); flex: 0 0 auto; } .emails span { display: flex; flex-direction: column; min-width: 0; } .emails small { font-size: .78rem; color: var(--suave); } .emails a { font-weight: 600; overflow-wrap: anywhere; } /* CTA de credenciamento --------------------------------------------------------------- */ .cta-cred { position: relative; isolation: isolate; overflow: hidden; margin-block: clamp(24px, 4vw, 48px) clamp(56px, 7vw, 96px); padding: clamp(32px, 4.5vw, 64px) clamp(24px, 4vw, 64px); border-radius: 32px; background: linear-gradient(120deg, #0B2A6B 0%, #112B63 35%, #1B3F8F 100%); color: #D7E1F2; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 24px clamp(28px, 4vw, 64px); align-items: center; } .cta-cred__brilho { position: absolute; inset: 0; z-index: -1; background: radial-gradient(45% 80% at 100% 0%, rgba(25,195,177,.35), transparent 60%), radial-gradient(40% 70% at 70% 120%, rgba(245,165,36,.28), transparent 60%), radial-gradient(35% 60% at 0% 100%, rgba(139,92,246,.30), transparent 60%); } .cta-cred h2 { color: #fff; } .cta-cred__txt p:last-child { margin: 0; color: #C9D6EC; font-size: 1.04rem; } .cta-cred__passos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .cta-cred__passos li { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); color: #fff; font-weight: 600; font-size: .95rem; line-height: 1.3; } .cta-cred__passos span { flex: 0 0 auto; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #fff; color: var(--marinho-logo); font: 700 .9rem/1 var(--fonte-d); } .cta-cred__acoes { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 12px; } /* Solução nacional ---------------------------------------------------------------- */ .nacional { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: clamp(20px, 3vw, 48px); align-items: center; padding: clamp(28px, 3.5vw, 48px); margin-bottom: clamp(56px, 7vw, 96px); border-radius: 32px; background: var(--fundo); border: 1px solid #E2E8F2; } .nacional__simbolo { width: clamp(88px, 9vw, 140px); height: auto; filter: drop-shadow(0 18px 30px rgba(1,25,64,.25)); } .nacional h2 { margin-bottom: .35em; } .nacional__txt p:last-child { margin: 0; color: var(--suave); } .nacional__acoes { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; } /* Matéria -------------------------------------------------------------------------- */ .materia__cabeca { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.15fr); gap: clamp(24px, 4vw, 56px); align-items: center; padding-block: clamp(24px, 4vw, 48px) clamp(24px, 3vw, 40px); } .materia__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 0 16px; font-size: .88rem; color: var(--suave); } .materia__meta > span { display: inline-flex; align-items: center; gap: 6px; } .materia__meta .ico { width: 16px; height: 16px; color: var(--azul); } .materia__meta .selo .ico { color: currentColor; } .materia__tit { font-size: clamp(1.9rem, 1.2rem + 2.3vw, 3.1rem); line-height: 1.12; margin-bottom: .45em; } .materia__linha-fina { font-size: clamp(1.05rem, 1rem + .3vw, 1.25rem); color: #3A4760; line-height: 1.6; } .materia__assina { margin: 0; font-size: .9rem; color: var(--suave); } .materia__assina strong { color: var(--marinho-logo); } .materia__capa { margin: 0; border-radius: 24px; overflow: hidden; box-shadow: var(--sombra-g); aspect-ratio: 16 / 9; background: var(--marinho-2); } .materia__capa img { width: 100%; height: 100%; object-fit: cover; } .materia__grade { display: grid; grid-template-columns: 230px minmax(0, 780px) 300px; justify-content: space-between; gap: 48px; padding-block: clamp(16px, 2vw, 32px) clamp(48px, 6vw, 80px); } .materia__lateral-fixa { position: sticky; top: calc(var(--topo-h) + 24px); display: grid; gap: 22px; } .materia__compartilhar-fim { display: none; } .indice__tit, .compartilhar__tit { margin: 0 0 10px; font: 700 .74rem/1 var(--fonte); letter-spacing: .14em; text-transform: uppercase; color: #5A6B8C; } .indice ol { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--borda); } .indice li { margin: 0; } .indice a { display: block; padding: 7px 0 7px 14px; margin-left: -2px; border-left: 2px solid transparent; font-size: .87rem; line-height: 1.4; color: var(--suave); text-decoration: none; } .indice a:hover, .indice a.is-atual { color: var(--marinho-logo); border-left-color: var(--azul-vivo); } .indice a.is-atual { font-weight: 600; } .compartilhar ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .compartilhar a, .compartilhar button { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; border: 1.5px solid var(--borda); background: #fff; color: var(--marinho-logo); cursor: pointer; transition: background-color .2s, color .2s, border-color .2s; } .compartilhar a:hover, .compartilhar button:hover { background: var(--marinho-logo); color: #fff; border-color: var(--marinho-logo); } .compartilhar .ico { width: 20px; height: 20px; } .compartilhar__copiar { display: none; } .js .compartilhar__copiar { display: block; } .compartilhar button.is-copiado { background: #0B8C7F; border-color: #0B8C7F; color: #fff; } .cartao-cta { padding: 22px; border-radius: 22px; background: var(--fundo); border: 1px solid #E2E8F2; display: grid; gap: 10px; } .cartao-cta img { width: 52px; height: 52px; } .cartao-cta__tit { margin: 0; font: 600 1.08rem/1.3 var(--fonte-d); color: var(--marinho-logo); } .cartao-cta p { margin: 0; font-size: .9rem; color: var(--suave); line-height: 1.55; } .cartao-cta .btn { white-space: normal; text-align: center; } .materia__seg-link { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--borda); text-decoration: none; color: var(--suave); font-size: .9rem; } .materia__seg-link .ico { color: var(--azul-vivo); width: 22px; height: 22px; } .materia__seg-link strong { color: var(--marinho-logo); } .materia__seg-link:hover { background: var(--fundo); } .materia__tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 36px 0 0; padding-top: 22px; border-top: 1px solid var(--borda); } .materia__tags a { padding: 6px 12px; border-radius: 999px; background: var(--fundo); color: var(--marinho-logo); font-size: .85rem; font-weight: 600; text-decoration: none; } .materia__tags a:hover { background: #E3ECFE; } .relacionadas { padding-bottom: clamp(24px, 4vw, 48px); } /* Corpo da matéria — classes do contrato (ac-*) ---------------------------------------- */ .materia__corpo { font-size: 1.06rem; line-height: 1.8; color: #262F40; min-width: 0; } .materia__corpo > * { margin-top: 0; margin-bottom: 1.25em; } .materia__corpo h2 { font-size: clamp(1.4rem, 1.2rem + .8vw, 1.85rem); margin: 1.8em 0 .6em; scroll-margin-top: calc(var(--topo-h) + 24px); } .materia__corpo h3 { font-size: 1.2rem; margin: 1.5em 0 .5em; } .materia__corpo a { color: var(--azul-link); } .materia__corpo ul, .materia__corpo ol { padding-left: 1.4em; } .materia__corpo li { margin-bottom: .5em; } .materia__corpo figure { margin-left: 0; margin-right: 0; } .materia__corpo img { border-radius: 16px; } .materia__corpo figcaption, .wp-caption-text { margin-top: 10px; font-size: .84rem; line-height: 1.5; color: var(--suave); } .ac-lead { font-size: clamp(1.15rem, 1.05rem + .4vw, 1.36rem); line-height: 1.7; color: var(--marinho-logo); font-weight: 500; padding-left: 20px; border-left: 4px solid; border-image: linear-gradient(180deg, #19C3B1, #2563EB) 1; } .ac-foto img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; box-shadow: var(--sombra); } .ac-grafico { padding: 18px; border-radius: 20px; background: #fff; border: 1px solid var(--borda); box-shadow: var(--sombra-p); } .ac-grafico img { width: 100%; border-radius: 10px; } .materia__corpo { container-type: inline-size; container-name: corpo; } .ac-dados { gap: 14px; margin-block: 1.6em !important; } .ac-dado { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 18px 16px; min-width: 0; border-radius: 18px; background: var(--grad-escuro); color: #C9D6EC; overflow: hidden; } .ac-dado::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--grad-marca); } .ac-dado b { font: 700 clamp(1.2rem, 3.3cqi, 1.9rem)/1.1 var(--fonte-d); color: #fff; overflow-wrap: anywhere; } .ac-dado span { font-size: .86rem; line-height: 1.45; } .ac-curio { padding: 22px 24px; border-radius: 18px; background: #FFF7E8; border: 1px solid #F7DDA8; color: #4A3500; } .ac-curio > b { display: block; font: 600 1.05rem/1.3 var(--fonte-d); color: #7A4B00; margin-bottom: 6px; } .ac-curio p { margin: 0; font-size: 1rem; } .ac-curio p + p { margin-top: .7em; } .ac-passos { padding: 24px; border-radius: 18px; background: var(--fundo); border: 1px solid #E2E8F2; } .ac-passos > b { display: block; font: 600 1.1rem/1.3 var(--fonte-d); color: var(--marinho-logo); margin-bottom: 12px; } .ac-passos ol { list-style: none; margin: 0; padding: 0; counter-reset: acp; display: grid; gap: 12px; } .ac-passos li { counter-increment: acp; position: relative; padding-left: 46px; margin: 0; min-height: 32px; } .ac-passos li::before { content: counter(acp); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: #fff; font: 700 .9rem/1 var(--fonte-d); background: linear-gradient(135deg, #19C3B1, #2563EB); } .ac-leis { list-style: none; padding: 0 !important; display: grid; gap: 10px; } .ac-leis li { margin: 0; padding: 14px 16px 14px 48px; border-radius: 14px; background: #fff; border: 1px solid var(--borda); position: relative; font-size: .97rem; } .ac-leis li::before { content: ""; position: absolute; left: 16px; top: 16px; width: 20px; height: 20px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233B5488' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v16M8 20h8M5 7h14'/%3E%3Cpath d='m5 7-3 6a3 3 0 0 0 6 0L5 7zM19 7l-3 6a3 3 0 0 0 6 0l-3-6z'/%3E%3C/svg%3E") center / contain no-repeat; } .ac-leis b { color: var(--marinho-logo); } .ac-autor { padding: 22px 24px; border-radius: 18px; background: #F1F4FA; border-left: 4px solid var(--azul); } .ac-autor > b { display: block; font: 600 1.02rem/1.3 var(--fonte-d); color: var(--marinho-logo); margin-bottom: 6px; } .ac-autor p { margin: 0 0 .6em; } .ac-autor > span { display: block; font-size: .9rem; color: var(--suave); font-style: italic; } .ac-cta { position: relative; overflow: hidden; isolation: isolate; padding: 28px; border-radius: 22px; background: var(--grad-escuro); color: #D7E1F2; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } .ac-cta p { flex: 1 1 100%; margin: 0 0 6px; color: #D7E1F2; } .ac-cta strong { color: #fff; } .ac-cta .ac-btn { background: #fff; color: var(--marinho-logo); } .ac-cta .ac-btn:hover { background: #EAF6FD; color: var(--marinho-logo); } .ac-cta .ac-btn--sec { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); } .ac-cta .ac-btn--sec:hover { background: rgba(255,255,255,.12); color: #fff; } .materia__corpo .ac-btn { text-decoration: none; white-space: normal; text-align: center; } .aligncenter { margin-inline: auto; } .alignleft { float: left; margin: .3em 1.4em 1em 0; } .alignright { float: right; margin: .3em 0 1em 1.4em; } .wp-block-image img { height: auto; } /* Formulários (complementa o CSS do mu-plugin) -------------------------------------------- */ .pg-form { padding: clamp(22px, 3vw, 36px); border-radius: var(--raio-g); background: #fff; border: 1px solid var(--borda); box-shadow: var(--sombra); } .pg-form > h2:first-child, .pg-form > h3:first-child { margin-top: 0; } /* Erro 404 -------------------------------------------------------------------------------- */ .erro404 { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 64px); align-items: center; padding-block: clamp(48px, 7vw, 110px); } .erro404__arte { display: grid; place-items: center; } .erro404__num { display: inline-flex; align-items: center; font: 700 clamp(6rem, 4rem + 9vw, 13rem)/1 var(--fonte-d); background: linear-gradient(120deg, #112B63, #3B5488 50%, #2563EB); -webkit-background-clip: text; background-clip: text; color: transparent; letter-spacing: -.04em; } .erro404__globo { display: inline-grid; place-items: center; width: .82em; height: .82em; margin: 0 .04em; border-radius: 50%; background: var(--grad-escuro); color: #7FE6F7; box-shadow: var(--sombra-g); animation: gira404 18s linear infinite; } .erro404__globo .ico { width: 62%; height: 62%; stroke-width: 1.2; } @keyframes gira404 { to { transform: rotate(360deg); } } .erro404__txt p { color: var(--suave); font-size: 1.05rem; } .erro404 .busca { max-width: 520px; margin: 22px 0; } .erro404__links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; } .erro404__links a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--borda); color: var(--marinho-logo); font-weight: 600; font-size: .92rem; text-decoration: none; } .erro404__links a:hover { background: var(--fundo); border-color: var(--azul); } .erro404__links .ico { width: 18px; height: 18px; color: var(--azul); } /* Rodapé ------------------------------------------------------------------------------------ */ .rodape { background: var(--marinho-logo); color: #C9D6EC; padding-top: clamp(48px, 6vw, 80px); position: relative; overflow: hidden; isolation: isolate; } .rodape::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(40% 60% at 100% 0%, rgba(34,184,232,.16), transparent 60%), radial-gradient(35% 50% at 0% 100%, rgba(139,92,246,.18), transparent 60%); } .rodape::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--grad-marca); } .rodape a:not(.btn) { color: #E2EAF7; text-decoration: none; } .rodape a:not(.btn):hover { color: #fff; text-decoration: underline; } .rodape__topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; padding-bottom: 36px; border-bottom: 1px solid rgba(255,255,255,.12); } .rodape__marca { max-width: 640px; } .rodape__marca img { width: 204px; height: auto; margin-bottom: 16px; } .rodape__marca p { margin: 0; font-size: .95rem; color: #B8C6E0; } .rodape__cta { display: flex; flex-wrap: wrap; gap: 12px; } .rodape__grade { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px; padding-block: 40px; border-bottom: 1px solid rgba(255,255,255,.12); } .rodape__col-tit { margin: 0 0 14px; font: 700 .76rem/1.2 var(--fonte); letter-spacing: .14em; text-transform: uppercase; color: #FFC867; } .rodape__col ul, .rodape__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: .9rem; } .rodape__dados { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; padding-block: 36px; font-size: .9rem; border-bottom: 1px solid rgba(255,255,255,.12); } .rodape__bloco p { margin: 0 0 10px; line-height: 1.7; } .rodape__link-forte { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: #9FE3FA !important; } .rodape__link-forte .ico { width: 15px; height: 15px; } .rodape__emails { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; } .rodape__emails li { display: flex; align-items: center; gap: 10px; } .rodape__emails .ico { width: 20px; height: 20px; color: #7FE6F7; } .rodape__emails span { display: flex; flex-direction: column; min-width: 0; } .rodape__emails small { font-size: .76rem; color: #9FB0CF; } .rodape__emails a { font-weight: 600; overflow-wrap: anywhere; } .rodape__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; padding-block: 22px 28px; font-size: .84rem; color: #9FB0CF; } .rodape__base p { margin: 0; } .rodape__base-links { display: flex; flex-wrap: wrap; gap: 8px 20px; } /* Revelar ao rolar ------------------------------------------------------------------------ */ /* Só um leve deslocamento: o conteúdo nunca fica invisível (sem JS, robôs, capturas, impressão). */ .js [data-revela] { transform: translateY(14px); transition: transform .7s cubic-bezier(.2,.7,.2,1); } .js [data-revela].is-visto { transform: none; } /* ========================================================================== Grade de cartões — REGRA ÚNICA do site (.grade; .ac-dados das matérias) Computador (>= 1024 px): no máximo 3 por linha e nunca uma última linha com um item só. 1 → 1 · 2 → 2 · 3 → 3 · 4 → 2+2 · 5 → 3+2 · 6 → 3+3 · 7 → 3+2+2 · 8 → 3+3+2 · 9 → 3+3+3 … (grade de 6 trilhas; cada cartão ocupa 2; nas contagens 3n+1 os quatro últimos ocupam 3, nas contagens 3n+2 os dois últimos ocupam 3) Tablet (641–1023 px): 2 colunas (o último ocupa a linha toda se sobrar). Celular: 1 coluna. ========================================================================== */ .grade, .ac-dados { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); } .grade > *, .ac-dados > * { min-width: 0; grid-column: span 6; } @media (min-width: 1024px) { .grade > *, .ac-dados > * { grid-column: span 2; } .grade > :only-child, .ac-dados > :only-child { grid-column: span 6; } .grade > :first-child:nth-last-child(2), .grade > :first-child:nth-last-child(2) ~ *, .ac-dados > :first-child:nth-last-child(2), .ac-dados > :first-child:nth-last-child(2) ~ * { grid-column: span 3; } .grade > :first-child:nth-last-child(4), .grade > :first-child:nth-last-child(3n+4) ~ :nth-last-child(-n+4), .ac-dados > :first-child:nth-last-child(4), .ac-dados > :first-child:nth-last-child(3n+4) ~ :nth-last-child(-n+4) { grid-column: span 3; } .grade > :first-child:nth-last-child(3n+5) ~ :nth-last-child(-n+2), .ac-dados > :first-child:nth-last-child(3n+5) ~ :nth-last-child(-n+2) { grid-column: span 3; } } @media (min-width: 641px) and (max-width: 1023px) { .grade > *, .ac-dados > * { grid-column: span 3; } .grade > :last-child:nth-child(odd), .ac-dados > :last-child:nth-child(odd) { grid-column: span 6; } } /* Responsivo ------------------------------------------------------------------------------- */ @media (max-width: 1360px) { .materia__grade { grid-template-columns: 210px minmax(0, 1fr) 280px; gap: 36px; } } @media (max-width: 1180px) { .materia__grade { grid-template-columns: minmax(0, 1fr) 280px; } .materia__lateral { display: none; } .materia__compartilhar-fim { display: block; margin-top: 28px; } .rodape__grade { grid-template-columns: repeat(3, minmax(0, 1fr)); } .produtos { grid-template-columns: 1fr; } .seguranca { grid-template-columns: 1fr; } .seguranca__termos { grid-column: 1; grid-row: auto; } .seguranca__itens { grid-column: 1; } } @media (max-width: 1000px) { .heroi { grid-template-columns: 1fr; min-height: 0; padding-top: 36px; } .heroi__txt { padding-bottom: 0; } .heroi__globo { min-height: 0; } .globo { --tam: min(100%, 560px); } .cta-cred { grid-template-columns: 1fr; } .materia__cabeca { grid-template-columns: 1fr; } .pg-duas, .pg-duas--form { grid-template-columns: 1fr; } .pg-aside { position: static; } .erro404 { grid-template-columns: 1fr; text-align: left; } .nacional { grid-template-columns: auto minmax(0, 1fr); } .nacional__acoes { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; } .protocolo-cx { grid-template-columns: auto minmax(0, 1fr); } .protocolo-cx__acoes { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; } .cartao--grande { grid-template-columns: 1fr; } .cartao--grande .cartao__capa { aspect-ratio: 16 / 9; } } @media (max-width: 860px) { .materia__grade { grid-template-columns: 1fr; } .materia__extra .materia__lateral-fixa { position: static; } .rodape__dados { grid-template-columns: 1fr 1fr; } } @media (max-width: 720px) { .heroi { border-radius: 24px; margin-top: 12px; padding: 28px 20px 0; } .heroi__ptax { margin: 0 -20px; } .ptax { padding: 14px 20px; gap: 8px 18px; } .ptax__fonte { margin-left: 0; } .passo { padding: 20px 20px 20px 80px; } .passo__ico { left: 18px; top: 20px; } .seguranca, .cta-cred, .nacional { border-radius: 24px; } .seguranca__itens { grid-template-columns: 1fr; } .cta-cred__passos { grid-template-columns: 1fr; } .cabeca__painel { border-radius: 22px; min-height: 0; } .cabeca__emblema { display: none; } .rodape__grade { grid-template-columns: 1fr 1fr; } .rodape__dados { grid-template-columns: 1fr; } .nacional { grid-template-columns: 1fr; } .protocolo-cx { grid-template-columns: 1fr; } .listagem__barra .busca { flex: 1 1 100%; } .secao__cabeca--linha { align-items: flex-start; } .btn--gd { width: 100%; } .heroi__acoes { flex-direction: column; } } @media (max-width: 480px) { .rodape__grade { grid-template-columns: 1fr; } .mm__destaque { padding: 20px; } .pg-segmento__cab { align-items: flex-start; } } /* Movimento reduzido ------------------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } .js [data-revela] { transform: none; transition: none; } } /* Impressão --------------------------------------------------------------------------------- */ @media print { .topo, .gaveta, .veu, .rodape__grade, .rodape__cta, .materia__lateral, .materia__extra, .cta-cred, .compartilhar, .relacionadas { display: none !important; } body { color: #000; } .materia__grade { display: block; } } /* Cartões que são links ------------------------------------------------------------------- */ a.pg-cartao { text-decoration: none; color: var(--texto); transition: transform .2s ease, box-shadow .2s ease, border-color .2s; } a.pg-cartao:hover { color: var(--texto); transform: translateY(-3px); box-shadow: var(--sombra); border-color: #B9C5DC; } a.pg-cartao h3 { color: var(--marinho-logo); } /* Na matéria o título já está logo abaixo: a trilha mostra só o caminho. */ .materia__cabeca .trilha li:last-child { display: none; } /* ========================================================================== Faixa do topo (horário, Conformidade, LGPD, idiomas) ========================================================================== */ .faixa { background: var(--marinho-logo); color: #C9D6EC; font-size: .8rem; position: relative; z-index: 101; } .faixa__int { display: flex; align-items: center; gap: 8px 22px; min-height: 40px; } .faixa__horario { display: inline-flex; align-items: center; gap: 8px; margin: 0 auto 0 0; min-width: 0; } .faixa__horario .ico { width: 15px; height: 15px; color: #7FE6F7; } .faixa__links { display: flex; align-items: center; gap: 4px 18px; flex-wrap: wrap; } .faixa__links a { display: inline-flex; align-items: center; gap: 6px; color: #fff; font-weight: 600; text-decoration: none; padding: 6px 2px; border-radius: 6px; } .faixa__links a:hover { color: #9FE3FA; text-decoration: underline; } .faixa__links .ico { width: 15px; height: 15px; color: #FFC867; } .faixa__par { display: inline-flex; align-items: center; gap: 2px; } .faixa__atalho { padding: 6px !important; } .faixa__atalho .ico { color: #9FE3FA !important; } .faixa__curto { display: none; } .faixa :focus-visible { box-shadow: 0 0 0 2px #011940, 0 0 0 4px #7FE6F7; } .idiomas { display: inline-flex; align-items: center; gap: 4px; } .idiomas__op { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 8px 0 6px; border-radius: 8px; border: 1px solid transparent; background: transparent; color: #E2EAF7; font: 700 .74rem/1 var(--fonte); letter-spacing: .04em; cursor: pointer; text-decoration: none; } .idiomas__op:hover { background: rgba(255,255,255,.08); color: #fff; } .idiomas__op[aria-pressed="true"] { border-color: rgba(255,255,255,.45); background: rgba(255,255,255,.1); color: #fff; } .bandeira { display: block; width: 22px; height: auto; border-radius: 3px; box-shadow: 0 0 0 1px rgba(255,255,255,.25); } .idiomas--gaveta { margin-top: 10px; } .idiomas--gaveta .idiomas__op { color: var(--marinho-logo); border-color: var(--borda); background: #fff; height: 40px; padding: 0 12px 0 10px; font-size: .82rem; } .idiomas--gaveta .idiomas__op[aria-pressed="true"] { border-color: var(--marinho-logo); background: var(--fundo); } .gaveta__extra { padding: 12px 16px 0; border-top: 1px solid var(--borda); background: var(--fundo); } .gaveta__horario { display: flex; gap: 8px; align-items: flex-start; margin: 0; font-size: .84rem; color: var(--suave); } .gaveta__horario .ico { width: 16px; height: 16px; color: var(--azul); margin-top: 2px; } @media (max-width: 1100px) { .faixa__horario span { font-size: .76rem; } } @media (max-width: 900px) { .faixa__horario { display: none; } .faixa__int { justify-content: space-between; } } @media (max-width: 520px) { .faixa__longo { display: none; } .faixa__curto { display: inline; } .faixa__int { min-height: 36px; gap: 6px 10px; } .faixa__links { gap: 2px 10px; } .idiomas__op { padding: 0 5px; gap: 4px; height: 28px; } .idiomas__op span { display: none; } .faixa .idiomas__op span { display: none; } } /* Tradução automática: esconde a barra e os artefatos do Google Tradutor */ .goog-te-banner-frame, iframe.skiptranslate, .skiptranslate > iframe, #goog-gt-tt, .goog-te-balloon-frame, .goog-tooltip, .goog-te-spinner-pos, .VIpgJd-ZVi9od-ORHb-OEVmcd, .VIpgJd-ZVi9od-aZ2wEe-wOHMyf, .VIpgJd-ZVi9od-l4eHX-hSRGPd, .VIpgJd-yAWNEb-L7lbkb, .VIpgJd-ZVi9od-xl07Ob-OEVmcd, #google_translate_element { display: none !important; visibility: hidden !important; } html body { top: 0 !important; } .goog-text-highlight { background: none !important; box-shadow: none !important; } /* ========================================================================== Elementos flutuantes (acessibilidade, Libras, contato) ========================================================================== */ .fl-a11y { position: fixed; left: 0; top: 50%; transform: translateY(-50%); z-index: 96; width: 34px; height: 50px; display: grid; place-items: center; border: 0; border-radius: 0 14px 14px 0; background: #1351B4; color: #fff; cursor: pointer; box-shadow: 0 8px 20px -8px rgba(1,25,64,.6); } .fl-a11y .ico { width: 24px; height: 24px; } .fl-a11y:hover, .fl-a11y[aria-expanded="true"] { background: #0C326F; } .fl-a11y:focus-visible { box-shadow: 0 0 0 3px #fff, 0 0 0 6px #1351B4; } .painel-a11y { position: fixed; left: 46px; top: 50%; transform: translateY(-50%); z-index: 110; width: 330px; max-height: min(calc(100vh - 32px), 640px); overflow-y: auto; padding: 16px 16px 14px; border-radius: 18px; background: #fff; color: var(--texto); border: 1px solid var(--borda); box-shadow: 0 30px 70px -24px rgba(1,25,64,.55); } .painel-a11y__cab { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .painel-a11y__cab h2 { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 1.1rem; } .painel-a11y__cab h2 .ico { color: #1351B4; } .painel-a11y__fechar { width: 38px; height: 38px; border-radius: 10px; border: 1.5px solid var(--borda); background: #fff; color: var(--marinho-logo); display: grid; place-items: center; cursor: pointer; } .painel-a11y__fonte { display: flex; align-items: center; gap: 8px; padding: 10px 12px; margin-bottom: 10px; border-radius: 12px; background: var(--fundo); font-weight: 600; font-size: .88rem; color: var(--marinho-logo); } .painel-a11y__fonte > span { margin-right: auto; } .painel-a11y__fonte output { min-width: 44px; text-align: center; font-weight: 700; } .painel-a11y__ab { width: 40px; height: 40px; border-radius: 10px; border: 1.5px solid #B9C5DC; background: #fff; color: var(--marinho-logo); display: grid; place-items: center; cursor: pointer; } .painel-a11y__ab:disabled { opacity: .4; cursor: default; } .painel-a11y__opcoes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .painel-a11y__op { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; min-height: 68px; padding: 9px 11px; border-radius: 12px; border: 1.5px solid var(--borda); background: #fff; color: var(--marinho-logo); font: 600 .82rem/1.25 var(--fonte); text-align: left; cursor: pointer; } .painel-a11y__op .ico { width: 22px; height: 22px; color: #1351B4; } .painel-a11y__op:hover { border-color: #1351B4; } .painel-a11y__op[aria-pressed="true"] { border-color: #1351B4; background: #EAF1FD; box-shadow: inset 0 0 0 1px #1351B4; } .painel-a11y__op[aria-pressed="true"]::after { content: "Ligado"; font-size: .7rem; color: #0C326F; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; } .painel-a11y__op--redefinir { background: var(--fundo); } .painel-a11y__nota { margin: 12px 0 6px; font-size: .78rem; line-height: 1.5; color: var(--suave); } .painel-a11y__nota kbd { padding: 0 4px; border: 1px solid #B9C5DC; border-radius: 4px; font-size: .72rem; background: var(--fundo); } .painel-a11y__links { margin: 0; font-size: .84rem; } .painel-a11y__libras { border: 0; background: none; padding: 0; color: var(--azul-link); font: 600 .84rem var(--fonte); text-decoration: underline; cursor: pointer; } .fl-libras { position: fixed; right: 10px; top: calc(50vh - 20px); z-index: 96; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 8px; background: #1351B4; color: #fff; cursor: pointer; box-shadow: 0 8px 20px -8px rgba(1,25,64,.6); } .fl-libras .ico { width: 24px; height: 24px; } .fl-libras:hover { background: #0C326F; } .fl-libras:focus-visible { box-shadow: 0 0 0 2px #fff, 0 0 0 5px #1351B4; } .vlibras-ativo .fl-libras { display: none; } .contato-fl { position: fixed; right: 16px; bottom: 16px; z-index: 96; } .contato-fl.is-aberto { z-index: 110; } .contato-fl__btn { position: relative; width: 58px; height: 58px; border-radius: 50%; border: 0; display: grid; place-items: center; color: #fff; cursor: pointer; background: linear-gradient(140deg, #112B63, #011940); box-shadow: 0 14px 30px -10px rgba(1,25,64,.7); isolation: isolate; } .contato-fl__btn::before { content: ""; position: absolute; inset: -3px; border-radius: 50%; z-index: -1; background: var(--grad-marca); } .contato-fl__btn .ico { width: 26px; height: 26px; } .contato-fl__ico-fechar { display: none; } .contato-fl.is-aberto .contato-fl__ico-abrir { display: none; } .contato-fl.is-aberto .contato-fl__ico-fechar { display: inline; } .contato-fl__btn:focus-visible { box-shadow: 0 0 0 3px #fff, 0 0 0 6px #2563EB; } .contato-fl__painel { position: absolute; right: 0; bottom: 72px; width: min(360px, calc(100vw - 24px)); max-height: calc(100vh - 196px); overflow-y: auto; overscroll-behavior: contain; border-radius: 20px; background: #fff; border: 1px solid var(--borda); box-shadow: 0 30px 70px -24px rgba(1,25,64,.55); padding-bottom: 14px; } .contato-fl__cab { padding: 14px 18px 12px; border-radius: 20px 20px 0 0; background: var(--grad-escuro); color: #D7E1F2; } .contato-fl__olho { margin: 0 0 2px; font: 700 .7rem/1.2 var(--fonte); letter-spacing: .14em; text-transform: uppercase; color: #FFC867; } .contato-fl__cab h2 { margin: 0 0 4px; color: #fff; font-size: 1.15rem; } .contato-fl__horario { margin: 0; font-size: .78rem; color: #C9D6EC; } .contato-fl__lista { list-style: none; margin: 0; padding: 6px 10px 8px; } .contato-fl__lista li { display: flex; gap: 12px; align-items: flex-start; padding: 6px 8px; border-radius: 12px; } .contato-fl__lista li:hover { background: var(--fundo); } .contato-fl__ico { flex: 0 0 auto; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; color: var(--azul-vivo); background: linear-gradient(135deg, rgba(25,195,177,.14), rgba(37,99,235,.14)); } .contato-fl__ico .ico { width: 20px; height: 20px; } .contato-fl__ico--wa { color: #0B7A39; background: #E3F7EA; } .contato-fl__txt { display: flex; flex-direction: column; min-width: 0; } .contato-fl__tit { font-weight: 700; font-size: .9rem; color: var(--marinho-logo); text-decoration: none; } .contato-fl__tit:hover { color: var(--azul-link); text-decoration: underline; } .contato-fl__rot { display: block; font-weight: 500; font-size: .78rem; color: var(--suave); } .contato-fl__email { font-size: .8rem; font-weight: 600; color: var(--azul-link); overflow-wrap: anywhere; } .contato-fl__plataforma { margin: 2px 18px 0; width: calc(100% - 36px); } @media (max-width: 720px) { .fl-a11y { width: 24px; height: 38px; border-radius: 0 9px 9px 0; opacity: .6; } .fl-a11y .ico { width: 18px; height: 18px; } .fl-a11y:hover, .fl-a11y:focus-visible, .fl-a11y[aria-expanded="true"] { opacity: 1; } .painel-a11y { left: 8px; right: 8px; width: auto; top: auto; bottom: 74px; transform: none; max-height: calc(100vh - 150px); z-index: 130; } .fl-libras { right: 0; width: 24px; height: 34px; top: calc(50vh - 17px); border-radius: 9px 0 0 9px; opacity: .6; } .fl-libras:hover, .fl-libras:focus-visible { opacity: 1; } .fl-libras .ico { width: 17px; height: 17px; } #vlibras-access-wrapper { zoom: .62; opacity: .7; } .contato-fl { right: 10px; bottom: 12px; } .contato-fl__btn { width: 48px; height: 48px; } .contato-fl__btn .ico { width: 22px; height: 22px; } .contato-fl__painel { bottom: 60px; right: -2px; } .rodape__base { padding-bottom: 84px; } } @media print { .faixa, .fl-a11y, .painel-a11y, .fl-libras, .contato-fl, .ck-aviso, .ck-revisitar, #vlibras-access-wrapper { display: none !important; } } /* ========================================================================== Preferências de acessibilidade (classes no , guardadas no localStorage) ========================================================================== */ html.a11y-fonte-1 { font-size: 115%; } html.a11y-fonte-2 { font-size: 130%; } /* Com texto ampliado o menu completo não cabe: usa o menu lateral até telas bem largas. */ @media (max-width: 1700px) { html.a11y-fonte-1 .mm, html.a11y-fonte-2 .mm { display: none; } html.a11y-fonte-1 .topo__menu:not(.topo__menu--semjs), html.a11y-fonte-2 .topo__menu:not(.topo__menu--semjs) { display: inline-flex; } html.a11y-fonte-1 .topo__credenciar, html.a11y-fonte-2 .topo__credenciar { display: none; } } html.a11y-cinza { filter: grayscale(100%); } html.a11y-sublinhado a { text-decoration: underline !important; text-underline-offset: .18em; } html.a11y-legivel body, html.a11y-legivel body *:not(svg):not(svg *):not(kbd) { font-family: "Atkinson Hyperlegible", Verdana, Tahoma, Arial, sans-serif !important; letter-spacing: 0 !important; } html.a11y-espaco :is(.principal, .rodape, .painel-a11y, .contato-fl__painel, .ck-modal) :is(p, li, dd, dt, td, th, label, blockquote, figcaption, span, a) { line-height: 2 !important; letter-spacing: .04em !important; word-spacing: .14em !important; } html.a11y-espaco .principal p { margin-bottom: 1.6em !important; } html.a11y-sem-animacao *, html.a11y-sem-animacao *::before, html.a11y-sem-animacao *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } html.a11y-sem-animacao [data-revela] { transform: none !important; } html.a11y-cursor, html.a11y-cursor * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath d='M5 2.5l14 8-6.3 1.8-2.9 6.2L5 2.5z' fill='%23000' stroke='%23fff' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E") 10 5, auto !important; } html.a11y-cursor :is(a, button, summary, label, select, [role="button"]), html.a11y-cursor :is(a, button, summary, label, select, [role="button"]) * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath d='M5 2.5l14 8-6.3 1.8-2.9 6.2L5 2.5z' fill='%23FFD400' stroke='%23000' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E") 10 5, pointer !important; } /* Alto contraste (preto, branco e amarelo) */ html.a11y-contraste body, html.a11y-contraste body *:where(:not(svg, svg *, img, canvas, video, .bandeira, .bandeira *)) { background-color: #000 !important; background-image: none !important; color: #fff !important; border-color: #fff !important; box-shadow: none !important; text-shadow: none !important; } html.a11y-contraste *::before, html.a11y-contraste *::after { background-image: none !important; box-shadow: none !important; } html.a11y-contraste a, html.a11y-contraste a *:not(svg):not(svg *) { color: #FFD400 !important; } html.a11y-contraste a { text-decoration: underline !important; } html.a11y-contraste :is(button, .btn, .ac-btn, .ck-btn, select, input, textarea) { border: 2px solid #FFD400 !important; } html.a11y-contraste :is(button, .btn, .ac-btn, .ck-btn) { color: #FFD400 !important; } html.a11y-contraste svg { color: inherit !important; } html.a11y-contraste :is(.heroi__globo, .globo__palco, .globo__rotulos) { background-color: transparent !important; } .topo__logo-alt { display: none !important; } html.a11y-contraste :is(.topo__logo, .gaveta__logo) img:not(.topo__logo-alt) { display: none !important; } html.a11y-contraste :is(.topo__logo, .gaveta__logo) img.topo__logo-alt { display: block !important; } html.a11y-contraste .painel-a11y__op[aria-pressed="true"]::after { color: #FFD400 !important; } html.a11y-contraste :is(.fl-a11y, .fl-libras, .contato-fl__btn, .ck-revisitar) { border: 2px solid #FFD400 !important; } html.a11y-contraste :focus-visible { outline: 3px solid #FFD400 !important; outline-offset: 2px; box-shadow: none !important; } html.a11y-contraste .veu, html.a11y-contraste .ck-fundo { background-color: rgba(0,0,0,.7) !important; } html.a11y-contraste .painel-a11y__op[aria-pressed="true"] { outline: 3px solid #FFD400; } html.a11y-contraste .grad, html.a11y-contraste .pg-numero, html.a11y-contraste .erro404__num { -webkit-text-fill-color: currentColor; } .rodape__botao { border: 0; background: none; padding: 0; color: #E2EAF7; font: inherit; text-decoration: underline; text-underline-offset: .18em; cursor: pointer; } .rodape__botao:hover { color: #fff; }