/* =========================================================================== PRÉVIA ESTÁTICA — SINCOFARMA/SP 2027 Direção: BRANCO clean. Blocos de gradiente azul pontuais. Ícones recebem as 4 cores do briefing em rotação. Layout espaçado e assimétrico (menos centralizado). Tipografia: Poppins (títulos) + Montserrat (corpo), como a referência. =========================================================================== */ :root{ /* Escala principal sobre o AZUL PROFUNDO #0C4683 */ --marca-50:#F0F5FA; --marca-100:#DDE9F4; --marca-200:#B6CDE5; --marca-300:#86ACD2; --marca-400:#4A81B4; --marca-500:#175C97; --marca-600:#0C4683; --marca-700:#0A3A6D; --marca-800:#082C53; --marca-900:#051C36; --marca-950:#031223; /* Paleta do briefing — vive nos ícones */ --azul-inst:#363B8E; --azul-prof:#0C4683; --amarelo:#F4BE00; --laranja:#F19000; --ico-1:#0C4683; --ico-2:#363B8E; --ico-3:#F19000; --ico-4:#F4BE00; --acento:#F4BE00; /* Neutros quase brancos */ --tinta:#10172B; --tinta-2:#36405C; --tinta-3:#626C87; --bruma:#FCFDFE; --bruma-2:#F4F7FB; --vidro:#EDF2F9; --branco:#fff; --linha:rgba(12,70,131,.14); --linha-forte:rgba(12,70,131,.26); --linha-clara:rgba(255,255,255,.14); --sobre:rgba(255,255,255,.92); --sobre-2:rgba(255,255,255,.62); /* Tipografia conforme a referencia aprovada (portaldocomercio.org.br): Plus Jakarta Sans nos titulos e no corpo. Os CHAPEUS ficam de fora, como pedido - seguem na condensada. */ --f-tit:"Plus Jakarta Sans",system-ui,sans-serif; --f-corpo:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif; --f-cond:"Barlow Condensed","Oswald",sans-serif; --t-h1:clamp(2.25rem,1.4rem + 3.2vw,4.5rem); --t-h2:clamp(1.75rem,1.25rem + 1.9vw,3rem); --t-h3:clamp(1.5rem,1.2rem + 1vw,2rem); --t-h4:clamp(1.25rem,1.1rem + .5vw,1.5rem); --r-sm:10px; --r-md:14px; --r-card:16px; --r-bloco:24px; /* ---- Ritmo interno dos blocos (item 9.3) --------------------------- Um token por RELACAO, nao por valor solto. Assim "afastar titulo da descricao" e uma mudanca em um lugar so, no site inteiro, em vez de cacar margem em vinte regras. */ --b-pad:2rem; /* respiro interno do card */ --b-gap:1.25rem; /* de um card para o outro */ --b-ico-tit:1.625rem;/* do elemento grafico para o titulo */ --b-tit-txt:1.125rem;/* do titulo para a descricao */ --b-txt-cta:1.75rem;/* da descricao para o CTA */ /* ---- Interacao integrada (itens 9.1 e 9.6) ------------------------- Borda e fundo mudam JUNTOS: o ambar e a cor de acao da identidade, entao a borda assume o ambar cheio e o fundo recebe o mesmo ambar lavado. Uma cor so, duas intensidades - nenhum contraste novo entra na tela e o texto continua legivel por cima. */ /* ---- Moldura dos CTAs (padrao unico) ---------------------------- Antes havia cinco alturas (40 a 52px), dois raios (pilula e 10px), tres paddings e dois pesos. Um token por propriedade resolve de uma vez e mantem resolvido. */ --cta-alt:48px; /* altura minima de todo CTA com moldura */ --cta-pad:1.75rem; /* respiro lateral */ --cta-raio:9999px; /* pilula - a forma da identidade */ --cta-fonte:.9375rem; --cta-peso:600; /* ---- Moldura dos ICONES (padrao unico) -------------------------- Mesma bagunca: chapas de 1,75 a 3,25rem, com raio em 9999px, 10px, 11px e 14px, conforme quem escreveu. Um tamanho e um raio. */ --ico-chapa:2.75rem; --ico-raio:var(--r-sm); /* UM TAMANHO SO, por pedido. A variante pequena continua existindo como token para nao ter de reescrever trinta regras, mas aponta para a mesma medida - a chapa do icone agora e tao padrao quanto o CTA. */ --ico-chapa-peq:var(--ico-chapa); /* O DESENHO dentro da chapa. Antes cada chamada de icone() escolhia o seu numero (13, 14, 15, 16, 17, 18, 20, 22, 24, 26, 28...) e o resultado era um icone de tamanho diferente em cada bloco. Estes tres tokens mandam no CSS e vencem o atributo do SVG: um tamanho na chapa, um na seta de CTA, um na etiqueta miuda. */ --ico-svg:22px; --ico-svg-cta:16px; --ico-svg-tag:13px; --hover-borda:var(--acento); --hover-fundo:rgba(244,190,0,.07); --hover-fundo-escuro:rgba(244,190,0,.1); --t-hover:240ms; --s-card:0 18px 40px -30px rgba(16,23,43,.35); --s-elev:0 40px 80px -45px rgba(16,23,43,.4); --secao:clamp(5.5rem,11vw,11rem); /* Respiro lateral em DEGRAUS fixos, como na referencia (MedicGLOBAL): 16px no celular, 32px no tablet, 56px no desktop. Em degraus e nao em 5vw de proposito - com vw a margem cresce sem parar em tela grande e o conteudo fica espremido no meio; fixa, o site expande e a borda permanece constante. */ --gutter:1rem; } @media(min-width:720px){:root{--gutter:2rem}} @media(min-width:1100px){:root{--gutter:3.5rem}} *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;scroll-padding-top:9rem;-webkit-text-size-adjust:100%} body{background:var(--branco);color:var(--tinta-2);font-family:var(--f-corpo);font-size:1.0625rem;line-height:1.7;-webkit-font-smoothing:antialiased} /* Peso 700: a Plus Jakarta Sans em 500 ficava leve demais para segurar titulo grande sem o apoio do marca-texto que saiu. */ h1,h2,h3,h4{font-family:var(--f-tit);font-weight:700;line-height:1.1;letter-spacing:-.022em;color:var(--tinta);text-wrap:balance} h1{font-size:var(--t-h1)} h2{font-size:var(--t-h2)} h3{font-size:var(--t-h3)} h4{font-size:var(--t-h4)} p{text-wrap:pretty} a{color:inherit;text-decoration:none} img{max-width:100%;display:block} ul,ol{list-style:none} :where(a,button,input,select,textarea):focus-visible{outline:2px solid var(--acento);outline-offset:2px;border-radius:var(--r-sm);box-shadow:0 0 0 5px rgba(244,190,0,.22)} ::selection{background:rgba(244,190,0,.4);color:var(--tinta)} /* 110rem = 1760px: a largura "wide" da referencia. */ .wrap{width:100%;max-width:110rem;margin-inline:auto;padding-inline:var(--gutter)} .secao{padding-block:var(--secao)} /* RESPIRO DEPOIS DE PAINEL COLORIDO DE BORDA A BORDA. Varias secoes zeram o padding-top (style="padding-top:0") de proposito: entre duas secoes claras, o respiro de baixo da primeira ja basta e dois paddings seguidos abririam um vao grande demais. So que esse padding de baixo fica DENTRO da cor quando a secao anterior e um painel colorido. Resultado: o conteudo seguinte encostava na borda do bloco escuro, sem nenhuma folga em branco. Aqui o respiro volta. Precisa de !important porque o padding-top:0 vem em atributo style - e regra de folha de estilo so vence estilo embutido sendo important. */ :is(.g-inst,.g-prof,.g-duo,.duplo-secao,.prlx,.secao.tom) + .secao{padding-top:var(--secao) !important} /* FAIXA DE TOM - intercala o branco sem introduzir cor nova. O mesmo cinza-azulado que ja existe nos elementos de apoio (--bruma-2), agora no fundo de secoes alternadas: a pagina deixa de ser um lencol branco continuo e ganha ritmo, sem precisar de mais um bloco azul. Forca o proprio respiro vertical porque varias secoes zeram o padding-top de proposito - e tom que comeca colado no conteudo anterior vira mancha, nao ritmo. */ .secao.tom{background:var(--bruma-2);padding-block:var(--secao) !important} /* Cartao branco sobre o tom: e o contraste que faz o card existir ali. Sem isto, cartao e fundo teriam a mesma cor e a borda ficaria sozinha segurando a forma. */ .secao.tom :is(.bloco-colunas>li,.faq-item){background:#fff} /* Chapéu LIGHT com fio âmbar */ .chapeu{font-family:var(--f-cond);font-weight:300;text-transform:uppercase;letter-spacing:.2em;font-size:.8125rem;line-height:1;display:inline-flex;align-items:center;gap:.75rem;color:var(--tinta-3)} /* O fio ambar e o UNICO detalhe decorativo da tipografia: marca onde a secao comeca, e some dos titulos. */ .chapeu.fio::before{content:"";width:1.5rem;height:2px;background:var(--acento);flex-shrink:0} .chapeu.claro{color:var(--sobre-2)} /* Sem marca-texto: a segunda metade do titulo muda de COR, nao ganha traco. O detalhe ambar ficou reservado ao chapeu. */ .dest{color:var(--marca-600)} .dest-claro{color:var(--acento)} /* Traço de marca-texto em âmbar por baixo do trecho destacado - o gesto do layout estático (src/components/ui/titulo-secao.tsx). É box-shadow inset, não border nem background: acompanha a quebra de linha palavra a palavra, como caneta marca-texto de verdade, e some atrás do texto em vez de empurrar a linha de base. A altura é em em para escalar com a fonte. */ /* Fio de 2px, e não mais um traço em em. Em em ele crescia junto com o título: num h2 de 3rem, .1em dava quase 5px e voltava a parecer tarja. Fixo em 2px ele se comporta como DETALHE — fino em qualquer corpo de texto, que é o que se quer aqui. Opacidade alta porque 2px lavado simplesmente não aparece. */ .marca-texto{box-shadow:inset 0 -2px 0 rgba(244,190,0,.85);padding-inline:.04em} /* Sobre fundo escuro o fio precisa de presença total para se sustentar. */ .g-inst .marca-texto,.g-prof .marca-texto,.g-duo .marca-texto{box-shadow:inset 0 -2px 0 var(--acento)} /* Blocos de gradiente azul — usados com parcimônia */ /* ---- Gradientes do azul principal ------------------------------------- Tres camadas sobre o #0C4683, em vez de um degrade de duas paradas: 1. um claro frio no alto a direita, que da a sensacao de luz entrando; 2. um quente discretissimo no pe (o ambar a 6%), que impede o azul de virar cinza nas sombras - e dai que vem o ar de profundidade; 3. a base diagonal do profundo ao quase-preto. O ponto e esse: azul puro em area grande achata. Com um calor minimo no pe, a mesma cor ganha volume sem mudar de identidade. ----------------------------------------------------------------------- */ .g-inst{ background: radial-gradient(62rem 36rem at 84% -14%, rgba(74,129,180,.42), transparent 58%), radial-gradient(44rem 30rem at 6% 112%, rgba(244,190,0,.06), transparent 62%), linear-gradient(152deg, var(--marca-500) 0%, var(--azul-prof) 34%, var(--marca-900) 72%, var(--marca-950) 100%); } .g-prof{ background: radial-gradient(52rem 30rem at 92% 0%, rgba(74,129,180,.3), transparent 60%), radial-gradient(40rem 26rem at 0% 100%, rgba(244,190,0,.05), transparent 64%), linear-gradient(152deg, var(--azul-prof) 0%, var(--marca-800) 62%, var(--marca-900) 100%); } .g-duo{background:linear-gradient(118deg,var(--azul-prof) 0%,var(--azul-inst) 100%)} .vidro{background:rgba(255,255,255,.08);backdrop-filter:blur(14px) saturate(130%);-webkit-backdrop-filter:blur(14px) saturate(130%);border:1px solid var(--linha-clara)} /* Rotação cromática dos ícones */ .ico-cores > *:nth-child(4n+1) .ico{color:var(--ico-1)} .ico-cores > *:nth-child(4n+2) .ico{color:var(--ico-2)} .ico-cores > *:nth-child(4n+3) .ico{color:var(--ico-3)} .ico-cores > *:nth-child(4n+4) .ico{color:var(--ico-4)} .ico-selo{background:color-mix(in oklab,currentColor 10%,transparent)} /* Botões */ .btn{min-height:48px;display:inline-flex;align-items:center;justify-content:center;gap:.625rem;border-radius:9999px;font-weight:600;font-size:1rem;font-family:inherit;padding:.875rem 1.75rem;border:0;cursor:pointer;transition:background .25s,border-color .25s,transform .25s} .btn-acao{background:var(--marca-600);color:#fff} .btn-acao:hover{background:var(--marca-700)} .btn-contorno{border:1px solid var(--linha-forte);background:transparent;color:var(--marca-700)} .btn-contorno:hover{border-color:var(--marca-600);background:var(--marca-50)} .btn-claro{border:1px solid var(--linha-clara);background:rgba(255,255,255,.06);color:#fff} .btn-claro:hover{background:rgba(255,255,255,.14)} .btn-branco{background:#fff;color:var(--marca-700)} .btn-branco:hover{background:var(--marca-50)} .btn svg{transition:transform .3s cubic-bezier(.16,1,.3,1)} .btn:hover svg{transform:translateX(3px)} .lk{position:relative;display:inline-flex;align-items:center;gap:.5rem;font-weight:600;color:var(--marca-600)} .lk::after{content:"";position:absolute;left:0;bottom:-3px;height:2px;width:100%;background:var(--acento);transform:scaleX(0);transform-origin:left;transition:transform .34s cubic-bezier(.16,1,.3,1)} .lk:hover::after{transform:scaleX(1)} .lk svg{transition:transform .3s cubic-bezier(.16,1,.3,1)} .lk:hover svg{transform:translateX(3px)} .lk-claro{color:var(--sobre)} /* ---------- CABEÇALHO: 3 faixas + logo sobreposta ---------- */ header.site{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--linha)} .utility{display:none;background:var(--bruma);border-bottom:1px solid var(--linha);font-size:.875rem} @media(min-width:1280px){.utility{display:block}} .utility .faixa{display:flex;align-items:center;justify-content:space-between;height:3.5rem} .utility .dir{display:flex;align-items:center;gap:1.25rem} .utility nav ul{display:flex;align-items:center;gap:1.75rem} .utility a{display:inline-flex;align-items:center;gap:.5rem;color:var(--tinta-2);transition:color .25s} .utility a:hover{color:var(--marca-600)} .utility a svg{color:var(--marca-500)} /* min-width:0 e o que impede o estouro: sem ele um filho flex nunca encolhe abaixo do proprio conteudo, e o menu empurrava a barra para fora da tela. max-width:100% fecha a porta para qualquer item futuro repetir o problema. */ .barra{display:flex;align-items:center;gap:1rem;height:5.25rem;min-width:0;max-width:100%} @media(min-width:1280px){.barra{height:5.5rem;gap:1.5rem}} @media(min-width:1480px){.barra{gap:2.5rem}} .logo-marca{flex-shrink:0} .logo-marca img{height:2.25rem;width:auto} @media(min-width:1280px){.logo-marca img{height:2.75rem}} nav.menu{margin-right:auto;display:none} @media(min-width:1280px){nav.menu{display:block}} nav.menu ul{display:flex;align-items:center;gap:.375rem} .gatilho{display:inline-flex;align-items:center;gap:.4375rem;border:0;background:none;cursor:pointer;font-family:inherit;font-size:.9375rem;color:var(--tinta);padding:.75rem 1rem;border-radius:9999px;white-space:nowrap;transition:background .2s,color .2s} @media(min-width:1480px){.gatilho{font-size:.9375rem;padding-inline:.875rem}} .gatilho:hover{background:var(--bruma-2)} .gatilho[aria-expanded="true"]{background:var(--bruma-2);color:var(--marca-700);font-weight:500} .gatilho svg{width:12px;height:12px;opacity:.6;transition:transform .3s cubic-bezier(.16,1,.3,1)} .gatilho[aria-expanded="true"] svg{transform:rotate(180deg)} .acoes{margin-left:auto;display:flex;align-items:center;gap:.625rem;flex-shrink:0} @media(min-width:1280px){.acoes{margin-left:0}} .icone-btn{width:2.75rem;height:2.75rem;display:grid;place-items:center;border-radius:9999px;border:1px solid var(--linha);background:#fff;color:var(--tinta-2);cursor:pointer;transition:background .2s} .icone-btn:hover{background:var(--bruma)} /* O gatilho da gaveta some onde o menu horizontal aparece - senao os dois convivem na mesma barra e o botao de grade fica sem funcao. */ @media(min-width:1280px){#btn-menu{display:none}} /* .btn-area e .btn-assoc foram REMOVIDOS da barra. Eram eles que estouravam a largura: somados ao menu de seis areas, a barra passava da tela e os dois botoes so apareciam arrastando de lado. Os links continuam no acesso rapido, na gaveta e no painel "Para a sua farmácia" da home. */ .idioma{position:relative} .idioma-btn{display:inline-flex;align-items:center;gap:7px;min-height:42px;padding:0 12px 0 10px;border-radius:9999px;border:0;background:none;color:var(--marca-700);font-family:var(--f-corpo);font-size:.74rem;font-weight:500;letter-spacing:.06em;cursor:pointer;transition:opacity .2s} .idioma-btn:hover,.idioma-btn[aria-expanded="true"]{opacity:.75} .idioma-btn > svg:last-child{width:14px;height:14px;opacity:.6;transition:transform .3s cubic-bezier(.16,1,.3,1)} .idioma-btn[aria-expanded="true"] > svg:last-child{transform:rotate(180deg)} .bandeira{width:18px;height:18px;flex-shrink:0;border-radius:3px} .idioma-menu{position:absolute;right:0;top:calc(100% + .625rem);z-index:60;min-width:12.25rem;padding:.375rem;border-radius:var(--r-card);background:#fff;border:1px solid var(--linha);box-shadow:var(--s-elev)} .idioma-menu[hidden]{display:none} .idioma-menu a{display:flex;align-items:center;gap:.75rem;padding:.6875rem .75rem;border-radius:11px;font-size:.9rem;color:var(--tinta-2);transition:background .2s,color .2s} .idioma-menu a .bandeira{width:22px;height:22px} .idioma-menu a > svg:last-child{width:16px;height:16px;margin-left:auto;color:var(--marca-600);opacity:0} .idioma-menu a[aria-current="true"]{color:var(--marca-700);font-weight:500} .idioma-menu a[aria-current="true"] > svg:last-child{opacity:1} .idioma-menu a:hover{background:var(--bruma)} .idioma a{color:var(--tinta-3);padding-inline:.25rem} .idioma a:hover{color:var(--tinta)} /* MEGA-MENU: intro | links (ícone+rótulo+descrição) | destaque */ /* Controlado pelo atributo [hidden]: sem JavaScript o painel simplesmente nao abre, e o gatilho tem sempre um link equivalente. */ .mega{display:block;position:absolute;inset-inline:0;top:100%;z-index:40;background:#fff;border-top:1px solid var(--linha);box-shadow:var(--s-elev)} .mega[hidden]{display:none} @media(max-width:1279px){.mega{display:none!important}} .mega .grade{display:grid;grid-template-columns:4fr 5fr 3fr;gap:3rem;padding-block:3rem 3.5rem} .mega-intro h2{margin-top:.75rem;font-size:1.75rem;line-height:1.12;min-height:2.24em} .mega-intro p{margin-top:.75rem;max-width:22rem;font-size:.9375rem;line-height:1.6;color:var(--tinta-3)} /* Links do submenu - layout da referencia (MedicGLOBAL): duas colunas fluindo POR COLUNA, links de texto com fio embaixo e a seta surgindo no hover. --rows vem do PHP (metade dos itens, arredondado para cima): e o que diz ao grid onde quebrar a primeira coluna. */ .mega-links{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(var(--rows,3),auto);grid-auto-flow:column;gap:4px 1.5rem;align-content:center} .mega-links a{display:flex;justify-content:space-between;align-items:center;gap:.75rem;padding:.875rem 0;border-bottom:1px solid var(--linha);font-family:var(--f-tit);font-size:.975rem;line-height:1.3;color:var(--tinta);transition:color .2s,padding .3s cubic-bezier(.16,1,.3,1)} .mega-links a::after{content:"\2192";color:var(--marca-500);opacity:0;transform:translateX(-6px);transition:.3s cubic-bezier(.16,1,.3,1)} .mega-links a:hover{color:var(--marca-700);padding-left:6px} .mega-links a:hover::after{opacity:1;transform:none} .mega-destaque{position:relative;overflow:hidden;border-radius:var(--r-bloco);min-height:13.75rem;display:flex;flex-direction:column;justify-content:flex-end;padding:1.5rem;color:#fff} .mega-destaque .bg{position:absolute;inset:0;transition:transform .7s cubic-bezier(.16,1,.3,1)} .mega-destaque:hover .bg{transform:scale(1.05)} .mega-destaque .marca{position:absolute;top:-1.5rem;right:-2.5rem;width:13rem;aspect-ratio:800/880;background:url("../img/elemento-sincofarma.png") no-repeat center/contain;opacity:.05;filter:brightness(0) invert(1)} .mega-destaque strong{position:relative;font-family:var(--f-tit);font-weight:500;font-size:1.15rem;line-height:1.25} .mega-destaque span{position:relative;margin-top:.375rem;font-size:.8125rem;color:var(--sobre-2)} /* ---------- HERO ---------- */ .hero{position:relative;overflow:hidden;color:#fff} .hero .anel{position:absolute;top:-30rem;right:-20rem;width:58rem;height:58rem;border-radius:9999px;border:1px solid rgba(255,255,255,.1)} .hero .marca{position:absolute;bottom:-8rem;left:-6rem;width:30rem;aspect-ratio:800/880;background:url("../img/elemento-sincofarma.png") no-repeat center/contain;opacity:.045;filter:brightness(0) invert(1)} .hero-grid{position:relative;display:grid;gap:3.5rem;padding-block:5rem;align-items:center} @media(min-width:1024px){.hero-grid{grid-template-columns:1.05fr .9fr;gap:5rem;padding-block:7.5rem}} .selo-anos{display:inline-flex;align-items:center;gap:.625rem;border:1px solid var(--linha-clara);padding:.5rem 1rem;border-radius:9999px;color:var(--sobre-2);font-family:var(--f-cond);font-weight:300;text-transform:uppercase;letter-spacing:.2em;font-size:.8125rem} .selo-anos b{color:var(--acento);font-family:var(--f-tit);font-weight:600;letter-spacing:0;font-size:.9375rem} .hero h1{margin-top:1.75rem;color:#fff} .hero .sub{margin-top:1.5rem;max-width:33rem;font-size:1.125rem;line-height:1.75;color:var(--sobre-2)} .hero .acoes-hero{margin-top:2.5rem;display:flex;flex-direction:column;gap:.75rem} @media(min-width:640px){.hero .acoes-hero{flex-direction:row;align-items:center}} .filiacoes{margin-top:3rem;padding-top:2rem;border-top:1px solid var(--linha-clara);display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.25rem;font-size:.9375rem;color:var(--sobre-2)} .visual{position:relative} .moldura{position:absolute;top:-1.25rem;right:-1.25rem;width:100%;height:100%;border-radius:var(--r-bloco);border:1px solid rgba(255,255,255,.15)} .foto{position:relative;aspect-ratio:4/5;border-radius:var(--r-bloco);overflow:hidden;background:linear-gradient(170deg,var(--marca-700),var(--marca-950))} @media(min-width:640px){.foto{aspect-ratio:1}} .foto .legenda{position:absolute;inset-inline:0;bottom:0;padding:1.5rem;text-align:center;font-size:.875rem;color:rgba(255,255,255,.35)} .painel-escuro{position:absolute;bottom:-1.5rem;left:-1rem;width:min(23rem,92%);display:flex;align-items:center;gap:1rem;border-radius:var(--r-card);background:var(--marca-950);border:1px solid rgba(255,255,255,.1);padding:1.125rem 1.375rem 1.125rem 1.125rem;box-shadow:var(--s-elev);transition:background .28s,transform .3s cubic-bezier(.16,1,.3,1)} .painel-escuro:hover{background:var(--marca-900);transform:translateY(-3px)} @media(min-width:640px){.painel-escuro{left:-2rem}} .painel-escuro .circ{width:2.75rem;height:2.75rem;flex-shrink:0;display:grid;place-items:center;border-radius:9999px;background:var(--acento);color:var(--marca-950);transition:transform .3s cubic-bezier(.16,1,.3,1)} .painel-escuro:hover .circ{transform:translateX(3px)} .painel-escuro b{display:block;font-size:1.0625rem;font-weight:600;color:#fff;line-height:1.3} .painel-escuro small{display:block;margin-top:.1875rem;font-size:.8125rem;color:var(--sobre-2);line-height:1.4} /* ---------- Cabeçalho de seção assimétrico ---------- */ .cab{display:flex;flex-direction:column;gap:1.125rem} .cab h2{margin-top:.25rem} .cab .apoio{max-width:38rem;line-height:1.75;color:var(--tinta-3)} .cab-linha{display:flex;flex-direction:column;gap:2rem} @media(min-width:768px){.cab-linha{flex-direction:row;align-items:flex-end;justify-content:space-between}} /* ---------- Acessos rápidos: assimétrico, lista com linhas ---------- */ .ar{display:grid;gap:3rem} @media(min-width:1024px){.ar{grid-template-columns:minmax(0,22rem) 1fr;gap:5rem}} .ar-lista{display:grid;border-top:1px solid var(--linha)} @media(min-width:640px){.ar-lista{grid-template-columns:1fr 1fr;column-gap:3rem}} .ar-lista a{display:flex;align-items:center;gap:1rem;padding:1.25rem 0;border-bottom:1px solid var(--linha);transition:padding-left .3s cubic-bezier(.16,1,.3,1)} .ar-lista a:hover{padding-left:.5rem} .ar-lista .selo{width:2.75rem;height:2.75rem;flex-shrink:0;display:grid;place-items:center;border-radius:var(--r-sm)} .ar-lista b{flex:1;font-weight:500;line-height:1.35;color:var(--tinta);transition:color .25s} .ar-lista a:hover b{color:var(--marca-700)} .ar-lista .seta{flex-shrink:0;color:var(--marca-300);transition:all .3s cubic-bezier(.16,1,.3,1)} .ar-lista a:hover .seta{color:var(--marca-600);transform:translate(3px,-3px)} /* ---------- BENTO DOS CURSOS (protagonista) ---------- */ .bento{display:grid;gap:1rem;grid-template-columns:1fr} @media(min-width:1024px){.bento{grid-template-columns:repeat(12,1fr)}} .tile{border-radius:var(--r-bloco);position:relative;overflow:hidden} .t-busca{display:flex;align-items:center;gap:.75rem;background:#fff;border:1px solid var(--linha);padding:.6875rem .6875rem .6875rem 1.25rem} @media(min-width:1024px){.t-busca{grid-column:span 5}} .t-busca label{display:flex;align-items:center;gap:.625rem;flex-shrink:0;font-weight:600;color:var(--marca-700)} @media(max-width:519px){.t-busca label span{display:none}} .t-busca input{flex:1;min-width:0;border:0;background:transparent;font-family:inherit;font-size:1rem;color:var(--tinta)} .t-busca input:focus{outline:none} .t-busca button{flex-shrink:0;min-height:44px;border-radius:9999px;background:var(--marca-600);color:#fff;font-weight:600;padding-inline:1.5rem;border:0;cursor:pointer;font-family:inherit;transition:background .25s} .t-busca button:hover{background:var(--marca-700)} .t-edit{display:flex;flex-direction:column;color:#fff;padding:2rem} @media(min-width:1024px){.t-edit{grid-column:span 5;grid-row:span 2;padding:2.5rem}} .t-edit h2{margin-top:1.25rem;color:#fff} .t-edit>p{margin-top:1.25rem;color:var(--sobre-2);font-size:.9375rem;line-height:1.7} .mini{margin-top:2rem;border-top:1px solid var(--linha-clara)} .mini li{border-bottom:1px solid var(--linha-clara)} .mini a{display:flex;align-items:center;gap:1rem;padding:.875rem 0;transition:padding-left .3s cubic-bezier(.16,1,.3,1)} .mini a:hover{padding-left:.5rem} .mini span{flex:1;font-weight:500;font-size:.9375rem;color:var(--sobre)} .mini svg{flex-shrink:0;color:rgba(255,255,255,.4);transition:all .3s} .mini a:hover svg{color:var(--acento);transform:translate(3px,-3px)} .t-edit .lk{margin-top:auto;padding-top:2rem;align-self:flex-start} .t-dest{display:block;min-height:17rem} @media(min-width:1024px){.t-dest{grid-column:span 7;min-height:21rem}} .t-dest .bg{position:absolute;inset:0;background:linear-gradient(140deg,var(--marca-700),var(--marca-800) 55%,var(--marca-950));transition:transform .7s cubic-bezier(.16,1,.3,1)} .t-dest:hover .bg{transform:scale(1.03)} .p-glass{position:absolute;left:1rem;right:1rem;bottom:1rem;display:block;border-radius:var(--r-card);padding:1.25rem} @media(min-width:640px){.p-glass{left:1.5rem;right:1.5rem;bottom:1.5rem;padding:1.5rem}} .p-glass strong{display:block;margin-top:.75rem;font-family:var(--f-tit);font-weight:500;font-size:clamp(1.125rem,2vw,1.625rem);line-height:1.2;color:#fff} .p-glass .d{display:block;margin-top:.5rem;font-size:.875rem;color:var(--sobre-2);line-height:1.5} .t-agenda{display:flex;flex-direction:column;background:var(--marca-50);border:1px solid var(--linha);padding:1.75rem} @media(min-width:1024px){.t-agenda{grid-column:span 3}} .t-agenda .selo{width:3rem;height:3rem;display:grid;place-items:center;border-radius:var(--r-md);background:#fff;color:var(--marca-600)} .t-agenda h3{margin-top:1.25rem;font-size:1.25rem} .t-agenda p{margin-top:.625rem;flex:1;font-size:.9375rem;line-height:1.65;color:var(--tinta-3)} .t-agenda .btn{margin-top:1.5rem;width:100%} .t-mot{display:flex;flex-direction:column;color:#fff;padding:1.75rem} @media(min-width:1024px){.t-mot{grid-column:span 4}} .t-mot ul{margin-top:1.5rem;flex:1;display:grid;gap:1rem} @media(min-width:420px){.t-mot ul{grid-template-columns:1fr 1fr;column-gap:1.25rem}} .t-mot li{display:flex;align-items:flex-start;gap:.75rem;font-size:.9375rem;line-height:1.35;color:var(--sobre)} .t-mot li svg{flex-shrink:0;margin-top:1px;color:var(--acento)} .t-mot .lk{margin-top:1.75rem;align-self:flex-start} /* ---------- Cards numerados (serviços) ---------- */ .cards{margin-top:3.5rem;display:grid;border-top:1px solid var(--linha)} @media(min-width:768px){.cards{grid-template-columns:1fr 1fr;column-gap:3rem}} @media(min-width:1200px){.cards{grid-template-columns:repeat(4,1fr)}} .card{position:relative;display:flex;flex-direction:column;height:100%;padding:2.25rem 0 2rem;border-bottom:1px solid var(--linha)} .card::before{content:"";position:absolute;left:0;top:0;height:2px;width:100%;background:var(--acento);transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.16,1,.3,1)} .card:hover::before{transform:scaleX(1)} .num{font-family:var(--f-cond);font-weight:300;font-size:.8125rem;letter-spacing:.2em;color:var(--marca-300)} .card .ico{margin-top:1.5rem} .card h3{margin-top:1.25rem;font-size:1.1875rem;line-height:1.3} .card p{margin-top:.75rem;flex:1;color:var(--tinta-3);line-height:1.7;font-size:.9375rem} .card .lk{margin-top:1.5rem;font-size:.9375rem;align-self:flex-start} /* ---------- Notícias ---------- */ .editorial{margin-top:3.5rem;display:grid;gap:3rem} @media(min-width:1024px){.editorial{grid-template-columns:1.1fr 1fr;gap:4rem}} .mat-img{position:relative;aspect-ratio:16/10;border-radius:var(--r-bloco);overflow:hidden} .mat-img .tag{position:absolute;top:1.25rem;left:1.25rem;background:rgba(255,255,255,.95);border-radius:9999px;padding:.4375rem 1rem;font-size:.8125rem;font-weight:600;color:var(--marca-700)} .meta{margin-top:1.5rem;display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;font-size:.875rem;color:var(--tinta-3)} .meta .ed{color:var(--marca-600);font-weight:600} .pt{width:3px;height:3px;border-radius:9999px;background:var(--marca-300)} .lista-not{border-top:1px solid var(--linha)} .lista-not li{border-bottom:1px solid var(--linha)} .lista-not a{position:relative;display:block;padding:1.375rem 0;transition:padding-left .3s cubic-bezier(.16,1,.3,1)} .lista-not a::before{content:"";position:absolute;left:0;top:1.125rem;bottom:1.125rem;width:2px;background:var(--acento);transform:scaleY(.3);opacity:0;transition:all .3s} .lista-not a:hover::before{opacity:1;transform:scaleY(1)} .lista-not a:hover{padding-left:1.25rem} .lista-not .top{display:flex;flex-wrap:wrap;gap:.25rem .75rem;align-items:center;font-size:.8125rem;color:var(--tinta-3)} .lista-not .ed{color:var(--marca-600);font-weight:600} .lista-not h4{margin-top:.5rem;font-size:1.0625rem;line-height:1.4;font-weight:500;color:var(--tinta);font-family:var(--f-corpo);transition:color .25s} .lista-not a:hover h4{color:var(--marca-700)} /* ---------- Benefícios ---------- */ .benef{display:grid;gap:3rem} @media(min-width:1024px){.benef{grid-template-columns:.8fr 1.2fr;gap:5rem;align-items:start}} .benef-lista{display:grid;border-top:1px solid var(--linha)} @media(min-width:640px){.benef-lista{grid-template-columns:1fr 1fr;column-gap:2.5rem}} .benef-lista a{display:flex;gap:1rem;padding:1.5rem 0;border-bottom:1px solid var(--linha);transition:padding-left .3s cubic-bezier(.16,1,.3,1)} .benef-lista a:hover{padding-left:.5rem} .benef-lista .ico{flex-shrink:0;margin-top:.1875rem} .benef-lista b{display:block;font-size:1.0625rem;font-weight:600;color:var(--tinta);line-height:1.35} .benef-lista span{display:block;margin-top:.375rem;font-size:.9375rem;line-height:1.65;color:var(--tinta-3)} .marq-wrap{margin-top:4.5rem;overflow:hidden;border-top:1px solid var(--linha);border-bottom:1px solid var(--linha);padding-block:1.75rem;-webkit-mask-image:linear-gradient(to right,transparent,black 10%,black 90%,transparent);mask-image:linear-gradient(to right,transparent,black 10%,black 90%,transparent)} .marq{display:flex;width:max-content;align-items:center;gap:3.5rem;animation:desliza 64s linear infinite} .marq-wrap:hover .marq{animation-play-state:paused} @keyframes desliza{from{transform:translateX(0)}to{transform:translateX(-50%)}} .marq li{white-space:nowrap;font-size:1.0625rem;font-weight:500;color:var(--tinta-3);transition:color .25s} .marq li:hover{color:var(--marca-700)} /* ---------- Representatividade ---------- */ .repr{position:relative;overflow:hidden;color:#fff} .repr .marca{position:absolute;top:-4rem;right:-4rem;width:26rem;aspect-ratio:800/880;background:url("../img/elemento-sincofarma.png") no-repeat center/contain;opacity:.05;filter:brightness(0) invert(1)} .repr-grid{position:relative;display:grid;gap:3.5rem} @media(min-width:1024px){.repr-grid{grid-template-columns:1fr 1fr;gap:5rem}} .selo95{display:flex;align-items:baseline;gap:1rem;padding-bottom:1.75rem;border-bottom:1px solid var(--linha-clara)} .selo95 b{font-family:var(--f-tit);font-size:clamp(3.5rem,8vw,5rem);line-height:.9;font-weight:600;color:var(--acento)} .selo95 span{font-size:1.0625rem;line-height:1.4;color:var(--sobre-2)} .pilares{display:grid;border-top:1px solid var(--linha-clara)} @media(min-width:640px){.pilares{grid-template-columns:1fr 1fr;column-gap:2.5rem}} .pilares li{padding:1.75rem 0;border-bottom:1px solid var(--linha-clara)} .pilares .ico{color:var(--acento)} .pilares h3{margin-top:1rem;font-size:1.0625rem;color:#fff} .pilares p{margin-top:.5rem;font-size:.9375rem;line-height:1.65;color:var(--sobre-2)} /* ---------- Oportunidades ---------- */ .oport{margin-top:3.5rem;display:grid;border-top:1px solid var(--linha)} @media(min-width:768px){.oport{grid-template-columns:repeat(3,1fr);column-gap:3rem}} .oport-card{position:relative;display:flex;flex-direction:column;height:100%;padding:2.25rem 0 2rem;border-bottom:1px solid var(--linha)} .oport-card::before{content:"";position:absolute;left:0;top:0;height:2px;width:100%;background:var(--acento);transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.16,1,.3,1)} .oport-card:hover::before{transform:scaleX(1)} .oport-card h3{margin-top:1.25rem;font-size:1.375rem} .oport-card p{margin-top:.75rem;flex:1;line-height:1.7;color:var(--tinta-3);font-size:.9375rem} .oport-card .lk{margin-top:1.75rem;align-self:flex-start;font-size:.9375rem} /* ---------- CTA ---------- */ .cta{position:relative;overflow:hidden;border-radius:var(--r-bloco);color:#fff;padding:3.5rem 1.5rem} @media(min-width:640px){.cta{padding-inline:3rem}} @media(min-width:1024px){.cta{padding:5rem 4.5rem}} .cta .anel{position:absolute;top:-18rem;right:-12rem;width:36rem;height:36rem;border-radius:9999px;border:1px solid rgba(255,255,255,.1)} .cta-grid{position:relative;display:grid;gap:3rem} @media(min-width:1024px){.cta-grid{grid-template-columns:1fr minmax(0,24rem);gap:4.5rem;align-items:center}} .cta h2{color:#fff;margin-top:1.125rem} .cta-lista{margin-top:2.25rem;display:grid;gap:.875rem} @media(min-width:640px){.cta-lista{grid-template-columns:1fr 1fr}} .cta-lista li{display:flex;align-items:flex-start;gap:.75rem;color:var(--sobre);line-height:1.5;font-size:.9375rem} .cta-lista .ck{margin-top:.5rem;width:5px;height:5px;flex-shrink:0;border-radius:9999px;background:var(--acento)} .escolha{display:flex;flex-direction:column;gap:.75rem} .escolha a{display:flex;align-items:center;gap:1rem;padding:1.25rem 1.375rem;border-radius:var(--r-card);border:1px solid var(--linha-clara);transition:all .28s} .escolha a:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.3);transform:translateX(4px)} .escolha .pj{background:#fff;border-color:#fff} .escolha .pj b{color:var(--tinta)} .escolha .pj small{color:var(--tinta-3)} .escolha .pj svg{color:var(--marca-600)} .escolha .pj:hover{background:var(--marca-50);border-color:var(--marca-50)} .escolha b{display:block;font-size:1.0625rem;font-weight:600;color:#fff} .escolha small{display:block;font-size:.875rem;color:var(--sobre-2)} /* ---------- Rodapé ---------- */ footer{position:relative;color:#fff} .news{border-bottom:1px solid var(--linha-clara)} .news .faixa{display:grid;gap:2rem;padding-block:4rem} @media(min-width:1024px){.news .faixa{grid-template-columns:1fr 1fr;gap:4.5rem;align-items:center}} .news h2{color:#fff;margin-top:1rem;font-size:clamp(1.5rem,2.8vw,2.125rem)} .news p{margin-top:.875rem;max-width:34rem;color:var(--sobre-2);font-size:.9375rem} .news form{display:flex;flex-direction:column;gap:.75rem} @media(min-width:640px){.news form{flex-direction:row}} .news input{flex:1;height:3.25rem;border-radius:9999px;border:1px solid var(--linha-clara);background:rgba(255,255,255,.06);padding-inline:1.5rem;color:#fff;font-family:inherit;font-size:1rem} .news input::placeholder{color:rgba(255,255,255,.45)} .news input:focus{outline:none;border-color:var(--acento);box-shadow:0 0 0 4px rgba(244,190,0,.18)} .news button{flex-shrink:0;height:3.25rem;border-radius:9999px;background:#fff;color:var(--marca-700);font-weight:600;padding-inline:2rem;border:0;cursor:pointer;font-family:inherit;font-size:1rem;transition:background .25s} .news button:hover{background:var(--marca-50)} .rod-nav{display:grid;gap:3.5rem;padding-block:4.5rem} @media(min-width:1024px){.rod-nav{grid-template-columns:minmax(0,20rem) 1fr;gap:5rem}} .rod-logo img{height:2.75rem;width:auto;filter:brightness(0) invert(1);opacity:.95} .rod-inst p{margin-top:1.5rem;max-width:22rem;font-size:.9375rem;line-height:1.7;color:var(--sobre-2)} address{font-style:normal;margin-top:1.75rem;display:flex;flex-direction:column;gap:.875rem;font-size:.9375rem;color:var(--sobre-2)} address a{display:flex;align-items:flex-start;gap:.75rem;transition:color .25s} address a:hover{color:#fff} .sociais{margin-top:1.75rem;display:flex;gap:.5rem} .sociais a{width:44px;height:44px;display:grid;place-items:center;border-radius:9999px;border:1px solid var(--linha-clara);color:var(--sobre-2);transition:all .25s} .sociais a:hover{border-color:var(--acento);color:#fff} .cols{display:grid;gap:2.5rem 2rem} @media(min-width:640px){.cols{grid-template-columns:1fr 1fr}} @media(min-width:1024px){.cols{grid-template-columns:repeat(4,1fr)}} .cols h2{font-size:.8125rem;margin-bottom:1.375rem;color:var(--sobre-2);font-family:var(--f-cond);font-weight:300;text-transform:uppercase;letter-spacing:.2em} .cols li+li{margin-top:.75rem} .cols a{position:relative;font-size:.9375rem;color:var(--sobre-2);transition:color .25s} .cols a::after{content:"";position:absolute;left:0;bottom:-2px;height:1px;width:100%;background:var(--acento);transform:scaleX(0);transform-origin:left;transition:transform .3s} .cols a:hover{color:#fff} .cols a:hover::after{transform:scaleX(1)} .legal{border-top:1px solid var(--linha-clara)} .legal .faixa{display:flex;flex-direction:column;gap:1rem;padding-block:1.75rem;font-size:.875rem;color:rgba(255,255,255,.5)} @media(min-width:768px){.legal .faixa{flex-direction:row;align-items:center;justify-content:space-between}} .legal ul{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem} .legal a:hover{color:#fff} /* Flutuantes */ /* --- WhatsApp flutuante ---------------------------------------------------- Circular, so com o glifo, no formato da referencia (sindvale.com.br). 56px de lado: acima dos 44px minimos de alvo de toque mesmo sem rotulo. */ .zap{position:fixed;right:1.25rem;bottom:1.25rem;z-index:45;display:flex;align-items:center;gap:.625rem} @media(min-width:640px){.zap{right:1.75rem;bottom:1.75rem}} .zap-bolha{position:relative;display:grid;place-items:center;width:3.5rem;height:3.5rem;border-radius:9999px;background:#25D366;color:#fff;box-shadow:0 10px 26px -8px rgba(37,211,102,.6),0 2px 8px rgba(16,23,43,.2);transition:transform .25s cubic-bezier(.16,1,.3,1),background .2s} .zap:hover .zap-bolha,.zap:focus-visible .zap-bolha{background:#1FBE5A;transform:scale(1.06)} .zap-bolha svg{position:relative;z-index:1} /* Tarja escrita: aparece no hover e TAMBEM no foco por teclado - sem isso quem navega sem mouse nunca descobre o que o botao faz. */ .zap-tarja{order:-1;max-width:0;overflow:hidden;white-space:nowrap;padding:.625rem 0;border-radius:9999px;background:#fff;color:var(--tinta);font-size:.875rem;font-weight:600;box-shadow:var(--s-card);opacity:0;transition:max-width .3s cubic-bezier(.16,1,.3,1),opacity .2s,padding .3s} .zap:hover .zap-tarja,.zap:focus-visible .zap-tarja{max-width:14rem;padding:.625rem 1rem;opacity:1} /* Anel pulsante - chama o olho sem piscar nem mudar de cor. Some para quem pediu menos movimento: animacao em laco infinito e justamente o que incomoda quem tem sensibilidade vestibular. */ .zap-pulso{position:absolute;inset:0;border-radius:9999px;border:2px solid #25D366} @media(prefers-reduced-motion:no-preference){ .zap-pulso{animation:zap-pulsa 2.4s cubic-bezier(.16,1,.3,1) infinite} } @keyframes zap-pulsa{ 0%{transform:scale(1);opacity:.7} 70%{transform:scale(1.5);opacity:0} 100%{transform:scale(1.5);opacity:0} } html.a11y-sem-movimento .zap-pulso{animation:none;display:none} /* --- Central de acessibilidade --------------------------------------------- Aba fixa na lateral DIREITA, no meio da altura. Fica a direita de proposito: o botao do WhatsApp ocupa o canto inferior e os dois nao podem se sobrepor. Medidas em px para o painel nao crescer junto com o tamanho do texto. */ .a11y-aba{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:2147483000;display:grid;gap:2px;padding:3px;border-radius:12px 0 0 12px;background:var(--marca-600);box-shadow:0 10px 26px -10px rgba(16,23,43,.45)} .a11y-fab{width:36px;height:36px;padding:0;border:0;border-radius:9px;display:grid;place-items:center;background:transparent;color:#fff;cursor:pointer;transition:background .2s} .a11y-fab:hover,.a11y.is-open .a11y-fab:first-child{background:rgba(255,255,255,.16)} .a11y-fab svg{width:20px;height:20px} .a11y-fab:focus-visible{outline:2px solid #fff;outline-offset:-3px;box-shadow:none} #vlibras-access-wrapper{display:none!important} .a11y-painel{position:fixed;right:54px;top:50%;transform:translateY(-50%);z-index:2147483001;width:356px;max-height:calc(100vh - 32px);display:flex;flex-direction:column;background:#fff;color:var(--tinta);border:1px solid var(--linha);border-radius:20px;box-shadow:var(--s-elev);font-family:var(--f-corpo);font-size:14px;line-height:1.35} .a11y-painel[hidden]{display:none} @media(prefers-reduced-motion:no-preference){.a11y-painel{animation:a11y-entra .2s ease-out}} @keyframes a11y-entra{from{opacity:0}to{opacity:1}} @media(max-width:719px){.a11y-painel{top:auto;bottom:8px;left:8px;right:8px;width:auto;max-height:calc(100vh - 16px);transform:none}} .a11y-topo{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 14px 12px 20px;border-bottom:1px solid var(--linha)} .a11y-topo h2{display:inline-flex;align-items:center;gap:8px;font-size:17px;font-weight:600;letter-spacing:-.01em;color:var(--marca-700)} .a11y-topo h2 svg{width:22px;height:22px} .a11y-topo h2:focus{outline:none} .a11y-fechar{width:36px;height:36px;flex-shrink:0;display:grid;place-items:center;border-radius:50%;border:1px solid var(--linha);background:#fff;color:var(--tinta-2);cursor:pointer} .a11y-fechar:hover{background:var(--bruma)} .a11y-fechar svg{width:18px;height:18px} .a11y-corpo{overflow-y:auto;overscroll-behavior:contain;padding:2px 16px 16px} .a11y-rotulo{margin:16px 4px 8px;font-family:var(--f-cond);font-size:11px;font-weight:400;letter-spacing:.12em;text-transform:uppercase;color:var(--tinta-3)} .a11y-grade{display:grid;grid-template-columns:1fr 1fr;gap:8px} .a11y-grade button{display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:10px;min-height:74px;padding:12px;border-radius:12px;border:1px solid var(--linha);background:var(--bruma-2);color:var(--tinta);text-align:left;font:500 13px/1.25 var(--f-corpo);cursor:pointer;transition:background .2s,border-color .2s,color .2s} .a11y-grade button svg{width:22px;height:22px;color:var(--marca-600);flex-shrink:0} .a11y-grade button small{display:block;margin-top:2px;font:400 11px/1.3 var(--f-corpo);color:var(--tinta-3)} .a11y-grade button:hover{background:var(--marca-50);border-color:var(--marca-400)} .a11y-grade button[aria-pressed="true"]{background:var(--marca-600);border-color:var(--marca-600);color:#fff} .a11y-grade button[aria-pressed="true"] svg{color:#fff} .a11y-grade button[aria-pressed="true"] small{color:rgba(255,255,255,.72)} .a11y-grade button:disabled{opacity:.45;cursor:not-allowed} .a11y-grade .larga{grid-column:1/-1;flex-direction:row;align-items:center;justify-content:flex-start;min-height:0;background:var(--marca-50);border-color:var(--marca-200)} .a11y-grade .larga svg{width:26px;height:26px} .a11y-tamanho{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px;padding:6px;border-radius:12px;border:1px solid var(--linha);background:var(--bruma-2);font-size:13px;font-weight:500} .a11y-tamanho button{width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--linha);border-radius:10px;background:#fff;color:var(--marca-600);cursor:pointer} .a11y-tamanho button:hover{border-color:var(--marca-500)} .a11y-tamanho button:disabled{opacity:.4;cursor:not-allowed} .a11y-tamanho button svg{width:18px;height:18px} .a11y-tamanho output{margin-left:4px;font-weight:600;color:var(--marca-700)} .a11y-lendo-barra{display:flex;align-items:center;gap:8px;margin-top:8px;padding:6px 6px 6px 14px;border-radius:12px;background:var(--marca-600);color:#fff;font-size:13px} .a11y-lendo-barra[hidden]{display:none} .a11y-lendo-barra span{flex:1} .a11y-lendo-barra button{width:34px;height:34px;display:grid;place-items:center;border:0;border-radius:50%;background:rgba(255,255,255,.2);color:#fff;cursor:pointer} .a11y-lendo-barra button:hover{background:rgba(255,255,255,.3)} .a11y-lendo-barra button svg{width:18px;height:18px} .a11y-nota{margin:8px 4px 0;font:400 11.5px/1.45 var(--f-corpo);color:var(--tinta-3)} .a11y-rodape{padding:12px 16px 16px;border-top:1px solid var(--linha)} .a11y-restaurar{width:100%;height:44px;display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:9999px;border:1px solid var(--linha-forte);background:#fff;color:var(--tinta);font:500 13px var(--f-corpo);letter-spacing:.04em;text-transform:uppercase;cursor:pointer;transition:background .2s,color .2s} .a11y-restaurar:hover{background:var(--tinta);color:#fff} .a11y-restaurar svg{width:18px;height:18px} /* Recursos aplicados a pagina */ html[data-a11y-tamanho="-1"]{font-size:90%} html[data-a11y-tamanho="1"]{font-size:112.5%} html[data-a11y-tamanho="2"]{font-size:125%} html[data-a11y-tamanho="3"]{font-size:137.5%} html[data-a11y-tamanho="4"]{font-size:150%} /* O filtro vai na RAIZ: e o unico elemento que a especificacao isenta de virar bloco de contencao para descendentes com position:fixed. */ html.a11y-cinza{filter:grayscale(1)} html.a11y-links a:not(.a11y *){text-decoration:underline!important;text-decoration-thickness:2px!important;text-underline-offset:3px;outline:2px solid var(--marca-500)!important;outline-offset:2px} html.a11y-titulos :is(h1,h2,h3,h4,h5,h6):not(.a11y *){outline:2px dashed var(--marca-500);outline-offset:6px;border-radius:4px} html.a11y-sem-imagens :is(img,picture,video):not(.a11y *){visibility:hidden!important} /* Espacamento conforme WCAG 1.4.12 */ html.a11y-espacamento body *:not(.a11y *):not(svg *){line-height:1.5!important;letter-spacing:.12em!important;word-spacing:.16em!important} html.a11y-espacamento p:not(.a11y *){margin-bottom:2em!important} html.a11y-fonte body,html.a11y-fonte body *:not(svg *){font-family:"Atkinson Hyperlegible",Verdana,Tahoma,sans-serif!important} html.a11y-sem-movimento *,html.a11y-sem-movimento *::before,html.a11y-sem-movimento *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important} html.a11y-sem-movimento .rev{opacity:1!important;transform:none!important} /* Alto contraste: eleva os tokens em vez de inverter - inverter destruiria fotografias e logotipos. */ html.a11y-contraste{--tinta:#000;--tinta-2:#000;--tinta-3:#1F1F1F;--bruma:#fff;--bruma-2:#F2F2F2;--vidro:#E8E8E8;--marca-50:#fff;--marca-100:#E8EEF5;--marca-600:#00356B;--marca-700:#002952;--linha:#000;--linha-forte:#000;--sobre:#fff;--sobre-2:#fff} html.a11y-contraste body{background:#fff;color:#000} html.a11y-contraste a:not([class*="btn"]):not(.a11y *){text-decoration:underline;text-underline-offset:3px} html.a11y-contraste :is(.g-inst,.g-prof,.hero.g-inst){background:#000!important} html.a11y-contraste .marca,html.a11y-contraste .anel{display:none} .a11y-faixa-guia{display:none;position:fixed;left:0;right:0;top:0;height:44px;z-index:2147482999;pointer-events:none;background:rgba(74,129,180,.14);border-block:2px solid var(--marca-500)} html.a11y-guia .a11y-faixa-guia{display:block} .a11y-lendo{background:#FBD34D!important;color:#000!important;outline:2px solid #A87F00;outline-offset:2px;border-radius:4px} @media print{.a11y,.a11y-faixa-guia{display:none!important}} .aviso{background:var(--marca-950);color:var(--sobre-2);font-size:.8125rem;padding:.625rem 1.25rem;text-align:center;line-height:1.5} .aviso b{color:var(--acento);font-weight:600} .aviso a{color:#fff;text-decoration:underline;text-underline-offset:3px} .rev{opacity:0;transform:translateY(14px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)} .rev.on{opacity:1;transform:none} @media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}.rev{opacity:1;transform:none}} .pular{position:absolute;left:1rem;top:-100%;z-index:200;background:var(--marca-700);color:#fff;padding:.75rem 1.5rem;border-radius:9999px;font-weight:500;transition:top .18s} .pular:focus{top:1rem} .sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0} /* =========================================================================== PECAS DO SITE EM PHP O que o template renderiza e a folha da previa ainda nao cobria. ========================================================================= */ /* ---- Busca (na faixa de atalho) ---------------------------------------- */ /* So a lupa: 2.5rem de lado garante o alvo de toque sem rotulo escrito. */ .busca-btn{display:grid;place-items:center;width:2.5rem;height:2.5rem;flex-shrink:0;border:1px solid var(--linha);border-radius:9999px;background:#fff;color:var(--marca-600);cursor:pointer;transition:border-color .2s,background .2s,color .2s} .busca-btn:hover,.busca-btn[aria-expanded="true"]{border-color:var(--marca-500);background:var(--marca-50);color:var(--marca-700)} .busca{border-top:1px solid var(--linha);background:var(--bruma)} .busca[hidden]{display:none} .busca form{display:flex;align-items:center;gap:.75rem;padding-block:1.25rem} .busca-campo{position:relative;flex:1} .busca-ico{position:absolute;top:50%;left:1.25rem;transform:translateY(-50%);pointer-events:none;color:var(--tinta-3);display:grid} .busca input{width:100%;height:3.25rem;padding:0 1.25rem 0 3.25rem;border:1px solid var(--linha-forte);border-radius:9999px;background:#fff;font:400 1rem var(--f-corpo);color:var(--tinta);outline:none} .busca input:focus{border-color:var(--marca-500)} .busca button{height:3.25rem;flex-shrink:0;padding-inline:1.75rem;border:0;border-radius:9999px;background:var(--marca-600);color:#fff;font:600 1rem var(--f-corpo);cursor:pointer;transition:background .2s} .busca button:hover{background:var(--marca-700)} /* ---- Mega-menu: link "ver tudo" ---------------------------------------- */ .mega-tudo{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.5rem;font-size:.875rem;font-weight:600;color:var(--marca-600);transition:gap .25s} .mega-tudo:hover{gap:.875rem} /* ---- Migalhas ----------------------------------------------------------- */ .migalhas{border-bottom:1px solid var(--linha);background:var(--bruma)} .migalhas ol{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;padding-block:.875rem;font-size:.8125rem;color:var(--tinta-3)} .migalhas li+li::before{content:"/";margin-right:.5rem;color:var(--linha-forte)} .migalhas a{color:var(--tinta-3)} .migalhas a:hover{color:var(--marca-600);text-decoration:underline;text-underline-offset:3px} .migalhas [aria-current="page"]{color:var(--tinta);font-weight:500} /* ---- Gaveta mobile ------------------------------------------------------ */ .gaveta{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;background:#fff} .gaveta[hidden]{display:none} @media(min-width:1280px){.gaveta{display:none !important}} .gaveta-topo{display:flex;align-items:center;justify-content:space-between;flex-shrink:0;height:5rem;padding-inline:1.25rem;border-bottom:1px solid var(--linha)} .gaveta-corpo{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:1.5rem 1.25rem 2.5rem} .gaveta-acoes{display:grid;grid-template-columns:1fr 1fr;gap:.75rem} .gaveta-acoes a{display:flex;flex-direction:column;justify-content:space-between;gap:1rem;min-height:6rem;padding:1rem;border:1px solid var(--linha-forte);border-radius:var(--r-card);color:var(--marca-700);font-weight:600;font-size:.9375rem} .gaveta-acoes .is-acao{border-color:var(--marca-600);background:var(--marca-600);color:#fff} .gaveta-atalhos{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem;margin-top:1.5rem} .gaveta-atalhos a{display:flex;align-items:center;gap:.625rem;padding-block:.625rem;font-size:.9375rem;color:var(--tinta-2)} .gaveta-atalhos svg{flex-shrink:0;color:var(--marca-500)} .gaveta-idioma{display:flex;align-items:center;justify-content:space-between;margin-top:1.25rem;padding-top:1.25rem;border-top:1px solid var(--linha)} .idioma-linha{display:flex;gap:.5rem} .idioma-linha a{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem .875rem;border:1px solid var(--linha);border-radius:9999px;font-size:.875rem;color:var(--tinta-2)} .idioma-linha a[aria-current="true"]{border-color:var(--marca-600);background:var(--marca-50);color:var(--marca-700);font-weight:600} .gaveta-areas{margin-top:1.5rem;border-block:1px solid var(--linha)} .gaveta-areas>li{border-bottom:1px solid var(--linha)} .gaveta-areas>li:last-child{border-bottom:0} .gaveta-areas>li>button{display:flex;width:100%;align-items:center;justify-content:space-between;gap:.75rem;padding-block:1rem;border:0;background:none;text-align:left;font:600 1.125rem var(--f-tit);color:var(--tinta);cursor:pointer} .gaveta-areas>li>button svg{flex-shrink:0;color:var(--tinta-3);transition:transform .3s} .gaveta-areas>li>button[aria-expanded="true"] svg{transform:rotate(180deg)} .gaveta-areas>li>ul{padding-bottom:.75rem} .gaveta-areas>li>ul[hidden]{display:none} .gaveta-areas>li>ul a{display:flex;align-items:flex-start;gap:.75rem;padding:.75rem .25rem} .gaveta-areas strong{display:block;font-weight:500;line-height:1.35;color:var(--tinta)} .gaveta-areas small{display:block;margin-top:2px;font-size:.8125rem;line-height:1.35;color:var(--tinta-3)} .gaveta-tel{display:flex;align-items:center;justify-content:center;gap:.625rem;margin-top:1.5rem;padding:1rem 1.5rem;border-radius:9999px;background:var(--bruma-2);font-weight:500;color:var(--marca-700)} /* =========================================================================== ACESSOS RAPIDOS Encostam na borda inferior do banner, como na referencia. ========================================================================= */ .atalhos-secao{padding-block:0;margin-top:-3.5rem;position:relative;z-index:3} .atalhos{display:grid;gap:.75rem;grid-template-columns:1fr} @media(min-width:640px){.atalhos{grid-template-columns:1fr 1fr}} @media(min-width:1024px){.atalhos{grid-template-columns:repeat(4,1fr)}} .atalhos a{display:flex;align-items:center;gap:.875rem;height:100%;padding:1.125rem 1.25rem;border:1px solid var(--linha);border-radius:var(--r-card);background:#fff;box-shadow:var(--s-card);font-size:.9375rem;font-weight:500;color:var(--tinta);transition:border-color .2s,transform .25s} .atalhos a:hover{border-color:var(--acento);transform:translateY(-2px)} .atalhos a>span:nth-child(2){flex:1;line-height:1.3} .atalhos a>svg:last-child{flex-shrink:0;color:var(--marca-500);opacity:0;transform:translateX(-4px);transition:all .25s} .atalhos a:hover>svg:last-child{opacity:1;transform:none} .atalhos .selo{flex-shrink:0;display:grid;place-items:center;width:2.5rem;height:2.5rem;border-radius:var(--r-sm);background:var(--marca-50);color:var(--marca-600);transition:background .2s,color .2s} .atalhos a:hover .selo{background:var(--marca-600);color:#fff} /* =========================================================================== CURSOS + AGENDA Formato bento: ladrilhos de tamanhos diferentes, cada um respondendo a uma pergunta distinta - agenda, trilhas, estrutura e os mais procurados. ========================================================================= */ .secao-topo{display:grid;gap:1.5rem;margin-bottom:3rem} @media(min-width:1024px){.secao-topo{grid-template-columns:1fr 1fr;gap:4rem;align-items:end}} .secao-topo h2{margin-top:.875rem} .secao-topo .dest{color:var(--marca-600)} .secao-topo p{font-size:1rem;line-height:1.75;color:var(--tinta-3)} .secao-topo strong{color:var(--tinta-2);font-weight:600} .cursos-grade{display:grid;gap:1rem;grid-template-columns:1fr} @media(min-width:720px){.cursos-grade{grid-template-columns:1fr 1fr}} @media(min-width:1100px){ .cursos-grade{grid-template-columns:repeat(3,1fr);grid-auto-rows:minmax(0,auto)} .ladrilho-agenda{grid-row:span 2} .ladrilho-destaques{grid-column:span 2} } .ladrilho{position:relative;overflow:hidden;display:flex;flex-direction:column;padding:1.75rem;border:1px solid var(--linha);border-radius:var(--r-bloco);background:#fff;transition:border-color .2s,transform .25s} a.ladrilho:hover{border-color:var(--acento);transform:translateY(-2px)} .ladrilho h3{font-size:1.25rem;line-height:1.2} .ladrilho>p{margin-top:.625rem;font-size:.9375rem;line-height:1.6;color:var(--tinta-3)} .ladrilho .selo{display:grid;place-items:center;width:2.75rem;height:2.75rem;margin-bottom:1.25rem;border-radius:var(--r-sm);background:var(--marca-50);color:var(--marca-600);transition:background .2s,color .2s} a.ladrilho:hover .selo{background:var(--marca-600);color:#fff} .ladrilho-topo{display:flex;align-items:center;gap:.875rem;margin-bottom:1.25rem} .ladrilho-topo .selo,.ladrilho-topo .selo-claro{margin-bottom:0} .ladrilho-conta{display:inline-flex;align-items:center;gap:.5rem;margin-top:auto;padding-top:1.5rem;font-size:.875rem;font-weight:600;color:var(--marca-600);transition:gap .25s} a.ladrilho:hover .ladrilho-conta{gap:.875rem} .ladrilho-acao{display:inline-flex;align-items:center;gap:.5rem;margin-top:auto;padding-top:1.5rem;font-size:.875rem;font-weight:600;transition:gap .25s} .ladrilho-acao:hover{gap:.875rem} /* Agenda: ladrilho escuro, o unico da secao - e o que deve ser visto primeiro. */ .ladrilho-agenda{color:#fff;border-color:transparent} .ladrilho-agenda h3{color:#fff} .ladrilho-agenda>p{color:var(--sobre-2)} .ladrilho-agenda .marca{position:absolute;top:-2rem;right:-3rem;width:14rem;aspect-ratio:800/880;background:url("../img/elemento-sincofarma.png") no-repeat center/contain;opacity:.06;filter:brightness(0) invert(1)} .ladrilho-agenda .ladrilho-acao{color:var(--acento)} .selo-claro{display:grid;place-items:center;width:2.75rem;height:2.75rem;flex-shrink:0;border-radius:var(--r-sm);background:rgba(255,255,255,.12);color:#fff} .agenda-meses{position:relative;display:flex;flex-direction:column;gap:.5rem;margin-top:1.5rem} .agenda-meses a{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.875rem 1rem;border:1px solid var(--linha-clara);border-radius:var(--r-sm);font-size:.9375rem;color:var(--sobre-2);transition:background .2s,border-color .2s} .agenda-meses a:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3);color:#fff} .agenda-meses strong{color:#fff;font-weight:600} /* Mais procurados */ .cursos-lista{display:flex;flex-direction:column} .cursos-lista li+li{border-top:1px solid var(--linha)} .cursos-lista a{display:block;padding-block:.875rem} .cursos-lista strong{display:block;font-size:.9375rem;font-weight:600;line-height:1.35;color:var(--tinta);transition:color .2s} .cursos-lista a:hover strong{color:var(--marca-700)} .cursos-lista small{display:block;margin-top:.25rem;font-size:.8125rem;line-height:1.45;color:var(--tinta-3)} @media(min-width:1100px){.ladrilho-destaques .cursos-lista{display:grid;grid-template-columns:1fr 1fr;gap:0 2rem} .ladrilho-destaques .cursos-lista li:nth-child(2){border-top:0}} /* ---- Pagina 404 --------------------------------------------------------- Util, nao um beco sem saida: o site atual tem 160 paginas e muita gente vai chegar aqui por link antigo. ----------------------------------------- */ .erro-404{max-width:48rem} .erro-404 h1{margin-top:1rem;font-size:var(--t-h2)} .erro-404>p{margin-top:1rem;font-size:1.0625rem;line-height:1.75;color:var(--tinta-3)} .erro-404 .atalhos{margin-top:2.5rem} .erro-contato{margin-top:2rem;font-size:.9375rem;color:var(--tinta-3)} .erro-contato a{color:var(--marca-600);font-weight:600;text-decoration:underline;text-underline-offset:3px} /* =========================================================================== PAGINAS INTERNAS ========================================================================= */ /* ---- Banner das paginas internas --------------------------------------- */ /* ========================================================================= BANNER DO TOPO DAS PAGINAS INTERNAS Formato das referencias: fundo CLARO, texto a esquerda e a imagem a direita recortada em ARCO - topo redondo, pe reto. Era painel azul escuro. Virou claro porque o azul cheio no topo de TODA pagina interna repetia o peso do cabecalho e competia com o conteudo logo abaixo. Os blocos azuis continuam - onde carregam conteudo proprio. ========================================================================= */ .hero-pagina{position:relative;overflow:hidden;padding-block:3.5rem 4rem} .hero-pagina-grade{display:grid;gap:2.5rem;align-items:center} @media(min-width:960px){ .hero-pagina-grade{grid-template-columns:1.05fr .95fr;gap:4rem} .hero-pagina{padding-block:4rem 5rem} } .hero-pagina-conteudo{position:relative;max-width:34rem} .hero-pagina-conteudo h1{margin-top:1.25rem;font-size:var(--t-h1);line-height:1.04;letter-spacing:-.025em;color:var(--azul-inst)} .hero-pagina-apoio{margin-top:1.5rem;font-size:1.0625rem;line-height:1.75;color:color-mix(in oklab,var(--azul-inst) 82%,transparent)} .hero-pagina-acoes{display:flex;flex-wrap:wrap;gap:.875rem;margin-top:2.25rem} /* ---- O arco ---- border-radius com barra separa o raio HORIZONTAL do VERTICAL: o topo fica com meia volta larga e o pe quase reto. E o recorte da referencia, feito sem mascara nem imagem - so raio. */ .hero-pagina-arte{position:relative;justify-self:center;width:100%;max-width:30rem} .hero-pagina-foto{ position:relative;display:block;aspect-ratio:4/5; border-radius:50% 50% var(--r-bloco) var(--r-bloco) / 42% 42% var(--r-bloco) var(--r-bloco); background-size:cover;background-position:center;overflow:hidden; } /* FOTOGRAFIA A FORNECER: sem arquivo, o gradiente da identidade assume. */ .hero-pagina-foto.is-vazia{ background: radial-gradient(24rem 20rem at 70% 16%,rgba(74,129,180,.5),transparent 64%), linear-gradient(158deg,var(--marca-500) 0%,var(--azul-prof) 48%,var(--marca-900) 100%); } /* O bloco azul atras, deslocado - gesto da segunda referencia. Da fundo ao arco sem fechar caixa em volta dele. */ .hero-pagina-bloco{ position:absolute;z-index:-1;right:-6%;top:12%;width:62%;height:76%; border-radius:var(--r-bloco);background:var(--vidro); } /* ---- Compacto: leitura de materia, sem arco e sem titulo grande ---- */ .hero-pagina.is-compacto{padding-block:2.5rem 1.5rem} .hero-pagina-rotulo{margin-top:1rem;font-family:var(--f-tit);font-size:var(--t-h4);font-weight:600;color:var(--azul-inst)} @media(max-width:719px){.hero-pagina{padding-block:2.5rem 3rem}} /* ---- Coluna de texto institucional -------------------------------------- */ .texto-coluna{max-width:52rem} .texto-coluna h2{margin-top:.875rem} .texto-coluna .dest{color:var(--marca-600)} .texto-coluna p{margin-top:1.25rem;font-size:1.0625rem;line-height:1.8;color:var(--tinta-2)} /* Numeros grandes: o dado sustenta a afirmacao, nao a decora. */ .fatos{display:grid;gap:1.5rem;margin-top:3rem;padding-top:2.5rem;border-top:1px solid var(--linha)} @media(min-width:640px){.fatos{grid-template-columns:repeat(3,1fr);gap:2.5rem}} .fatos strong{display:block;font-family:var(--f-tit);font-size:clamp(2.25rem,1.6rem + 2vw,3rem);font-weight:600;line-height:1;color:var(--marca-600);letter-spacing:-.02em} .fatos span{display:block;margin-top:.625rem;font-size:.9375rem;line-height:1.5;color:var(--tinta-3)} /* ---- Missao, visao e valores -------------------------------------------- */ .mvv{display:grid;gap:1rem} @media(min-width:900px){.mvv{grid-template-columns:repeat(3,1fr)}} .mvv-bloco{display:flex;flex-direction:column;padding:2rem;border:1px solid var(--linha);border-radius:var(--r-bloco);background:var(--bruma)} .mvv-bloco h3{margin-bottom:.875rem;font-size:1.25rem} .mvv-bloco p{font-size:.9375rem;line-height:1.7;color:var(--tinta-3)} .mvv-bloco .selo{display:grid;place-items:center;width:2.75rem;height:2.75rem;margin-bottom:1.25rem;border-radius:var(--r-sm);background:#fff;border:1px solid var(--linha);color:var(--marca-600)} .mvv-valores{display:flex;flex-direction:column;gap:.75rem} .mvv-valores li{display:flex;align-items:flex-start;gap:.625rem;font-size:.9375rem;line-height:1.6;color:var(--tinta-3)} .mvv-valores svg{flex-shrink:0;margin-top:.3125rem;color:var(--marca-500)} /* ---- Palavra do presidente ---------------------------------------------- */ .presidente-secao{position:relative;overflow:hidden} .presidente-secao .marca{position:absolute;top:-4rem;right:-4rem;width:26rem;aspect-ratio:800/880;background:url("../img/elemento-sincofarma.png") no-repeat center/contain;opacity:.05;filter:brightness(0) invert(1)} .presidente{position:relative;display:grid;gap:3rem} @media(min-width:1024px){.presidente{grid-template-columns:1.6fr 1fr;gap:4.5rem;align-items:start}} .presidente-texto h2{margin-top:1.125rem;color:#fff;font-size:var(--t-h3);max-width:28ch} .presidente-texto p{margin-top:1.125rem;font-size:1rem;line-height:1.8;color:var(--sobre-2)} .presidente-assina{margin-top:2rem!important;padding-top:1.5rem;border-top:1px solid var(--linha-clara)} .presidente-assina strong{display:block;color:#fff;font-weight:600} .presidente-assina span{display:block;margin-top:.25rem;font-size:.875rem;color:rgba(255,255,255,.55)} .presidente-cartao{overflow:hidden;border:1px solid var(--linha-clara);border-radius:var(--r-bloco);background:rgba(255,255,255,.05)} .presidente-cartao .foto{aspect-ratio:4/5;display:grid;place-items:center;background:rgba(255,255,255,.05)} .presidente-dados{padding:1.5rem} .presidente-dados strong{display:block;color:#fff;font-family:var(--f-tit);font-size:1.0625rem;font-weight:600} .presidente-dados p{margin-top:.625rem;font-size:.875rem;line-height:1.6;color:var(--sobre-2)} /* ---- Cartoes (grade generica de itens) ---------------------------------- */ .cartoes{display:grid;gap:1rem;grid-template-columns:1fr} @media(min-width:640px){.cartoes{grid-template-columns:1fr 1fr}} @media(min-width:1100px){.cartoes{grid-template-columns:repeat(3,1fr)}} .cartoes>li>a,.cartao-estatico{position:relative;display:flex;flex-direction:column;height:100%;padding:1.5rem;border:1px solid var(--linha);border-radius:var(--r-card);background:#fff;transition:border-color .2s,transform .25s} .cartoes>li>a:hover{border-color:var(--acento);transform:translateY(-2px)} .cartoes .selo{display:grid;place-items:center;width:2.5rem;height:2.5rem;margin-bottom:1.125rem;border-radius:var(--r-sm);background:var(--marca-50);color:var(--marca-600);transition:background .2s,color .2s} .cartoes>li>a:hover .selo{background:var(--marca-600);color:#fff} .cartoes strong{font-family:var(--f-tit);font-size:1.0625rem;font-weight:600;line-height:1.3;color:var(--tinta)} .cartoes small{margin-top:.5rem;font-size:.875rem;line-height:1.6;color:var(--tinta-3)} .cartao-seta{margin-top:auto;padding-top:1.25rem;color:var(--marca-500);opacity:0;transform:translateX(-4px);transition:all .25s} .cartoes>li>a:hover .cartao-seta{opacity:1;transform:none} /* ---- Servicos: os quatro pilares ---------------------------------------- */ .serv-pilares{display:grid;gap:1rem} @media(min-width:900px){.serv-pilares{grid-template-columns:1fr 1fr;gap:1.25rem}} .serv-pilar{display:flex;flex-direction:column;padding:2rem;border:1px solid var(--linha);border-radius:var(--r-bloco);background:#fff} .serv-pilar h3{font-size:1.375rem} .serv-pilar>p{margin-top:.75rem;font-size:.9375rem;line-height:1.7;color:var(--tinta-3)} .serv-pilar .selo{display:grid;place-items:center;width:3rem;height:3rem;margin-bottom:1.25rem;border-radius:var(--r-sm);background:var(--marca-50);color:var(--marca-600)} .serv-itens{display:flex;flex-direction:column;gap:.625rem;margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid var(--linha)} .serv-itens li{display:flex;align-items:flex-start;gap:.625rem;font-size:.9375rem;line-height:1.5;color:var(--tinta-2)} .serv-itens svg{flex-shrink:0;margin-top:.1875rem;color:var(--marca-500)} /* ---- Diretoria ----------------------------------------------------------- */ .diretoria{display:grid;gap:2.5rem} @media(min-width:720px){.diretoria{grid-template-columns:1fr 1fr}} @media(min-width:1100px){.diretoria{grid-template-columns:repeat(4,1fr);gap:2rem}} /* Sem fio embaixo: o titulo se destaca pela cor e pelo peso, nao por um sublinhado. */ .diretoria-grupo h3{margin-bottom:1.25rem;color:var(--marca-600)} .diretoria-grupo ul{display:flex;flex-direction:column;gap:1rem} .diretoria-cargo{display:block;font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:var(--tinta-3)} .diretoria-nome{display:block;margin-top:.1875rem;font-size:.9375rem;font-weight:500;line-height:1.35;color:var(--tinta)} .galeria-presidentes{margin-top:3.5rem;padding-top:2.5rem;border-top:1px solid var(--linha)} .galeria-presidentes ul{display:flex;flex-wrap:wrap;gap:.625rem;margin-top:1.25rem} .galeria-presidentes li{padding:.5rem 1rem;border:1px solid var(--linha);border-radius:9999px;font-size:.875rem;color:var(--tinta-2)} /* ---- Chamada (CTA) ------------------------------------------------------- */ .cta{display:grid;gap:2rem;padding:3rem 2rem} @media(min-width:900px){.cta{grid-template-columns:1.5fr 1fr;gap:3rem;align-items:center;padding:3.5rem 3rem}} .cta .marca{position:absolute;top:-3rem;right:-3rem;width:20rem;aspect-ratio:800/880;background:url("../img/elemento-sincofarma.png") no-repeat center/contain;opacity:.06;filter:brightness(0) invert(1)} .cta>div{position:relative} .cta p{margin-top:1rem;font-size:.9375rem;line-height:1.7;color:var(--sobre-2)} .cta-acoes{display:flex;flex-wrap:wrap;gap:.875rem} @media(min-width:900px){.cta-acoes{justify-content:flex-end}} /* =========================================================================== CURSOS: cartoes do catalogo ========================================================================= */ .cursos-cartoes{display:grid;gap:1rem;grid-template-columns:1fr} @media(min-width:640px){.cursos-cartoes{grid-template-columns:1fr 1fr}} @media(min-width:1100px){.cursos-cartoes{grid-template-columns:repeat(3,1fr)}} .cursos-cartoes>li>a{display:flex;flex-direction:column;height:100%;padding:1.5rem;border:1px solid var(--linha);border-radius:var(--r-card);background:#fff;transition:border-color .2s,transform .25s} .cursos-cartoes>li>a:hover{border-color:var(--acento);transform:translateY(-2px)} .cursos-cartoes strong{font-family:var(--f-tit);font-size:1.0625rem;font-weight:600;line-height:1.3;color:var(--tinta)} .cursos-cartoes>li>a:hover strong{color:var(--marca-700)} .cursos-cartoes small{margin-top:.5rem;font-size:.875rem;line-height:1.6;color:var(--tinta-3)} /* Etiquetas: contorno em vez de preenchimento. Elas classificam, nao chamam - um retangulo de cor cheia competiria com o proprio titulo do cartao. */ .etiqueta{display:inline-flex;align-items:center;gap:.375rem;align-self:flex-start;margin-bottom:.875rem;padding:.25rem .625rem;border-radius:9999px;background:transparent;border:1px solid var(--acento);color:#8A6A00;font-family:var(--f-cond);font-size:.6875rem;font-weight:400;letter-spacing:.1em;text-transform:uppercase} .etiqueta svg{color:#B38600} /* Faixa da agenda na capa de cursos */ .agenda-faixa{position:relative;overflow:hidden;display:grid;gap:2rem;padding:2.5rem 2rem;border-radius:var(--r-bloco);color:#fff} @media(min-width:900px){.agenda-faixa{grid-template-columns:1fr 1fr;gap:3.5rem;align-items:center;padding:3rem}} .agenda-faixa .marca{position:absolute;top:-3rem;right:-3rem;width:18rem;aspect-ratio:800/880;background:url("../img/elemento-sincofarma.png") no-repeat center/contain;opacity:.06;filter:brightness(0) invert(1)} .agenda-faixa-texto{position:relative} .agenda-faixa h2{margin-top:1rem;color:#fff;font-size:var(--t-h3)} .agenda-faixa p{margin-top:.875rem;font-size:.9375rem;line-height:1.7;color:var(--sobre-2)} /* =========================================================================== CONTATO ========================================================================= */ .contato-grid{display:grid;gap:3rem} @media(min-width:1024px){.contato-grid{grid-template-columns:1.3fr 1fr;gap:4rem;align-items:start}} .contato-grid h2{margin-top:.875rem} .contato-intro{margin-top:1rem;font-size:1rem;line-height:1.75;color:var(--tinta-3)} .contato-aside{display:flex;flex-direction:column;gap:1.25rem} .contato-sede{padding:1.75rem;border:1px solid var(--linha);border-radius:var(--r-bloco);background:var(--bruma)} .contato-sede address{font-style:normal;margin-top:1.25rem} .contato-sede p{font-size:.9375rem;line-height:1.7;color:var(--tinta-2)} .contato-sede strong{display:block;color:var(--tinta);font-weight:600} .contato-ref{margin-top:.75rem;font-size:.8125rem!important;color:var(--tinta-3)} .contato-mapa{overflow:hidden;border:1px solid var(--linha);border-radius:var(--r-bloco)} .contato-mapa iframe{display:block;width:100%;border:0;aspect-ratio:4/3} html.a11y-contraste .contato-mapa{display:none} /* =========================================================================== FORMULARIOS Rotulo SEMPRE visivel acima do campo - nunca so placeholder: placeholder some quando a pessoa comeca a digitar, e quem se distrai perde a referencia. Altura minima de 48px em todo controle (alvo de toque). ========================================================================= */ .form{margin-top:2rem;display:flex;flex-direction:column;gap:1.25rem} .campo{display:flex;flex-direction:column;gap:.5rem} .campo-dupla{display:grid;gap:1.25rem} @media(min-width:560px){.campo-dupla{grid-template-columns:1fr 1fr}} .campo label,.campo-aceite label{font-size:.875rem;font-weight:500;color:var(--tinta-2)} .campo label span{color:#B42318} .campo input,.campo select,.campo textarea{width:100%;min-height:3rem;padding:.75rem 1rem;border:1px solid var(--linha-forte);border-radius:var(--r-sm);background:#fff;font:400 1rem/1.5 var(--f-corpo);color:var(--tinta);outline:none;transition:border-color .2s,box-shadow .2s} .campo textarea{min-height:9rem;resize:vertical} .campo input:hover,.campo select:hover,.campo textarea:hover{border-color:var(--marca-400)} .campo input:focus,.campo select:focus,.campo textarea:focus{border-color:var(--marca-500);box-shadow:0 0 0 4px rgba(12,70,131,.12)} .campo [aria-invalid="true"]{border-color:#B42318} .campo [aria-invalid="true"]:focus{box-shadow:0 0 0 4px rgba(180,35,24,.14)} .campo select{appearance:none;-webkit-appearance:none;padding-right:2.75rem;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230C4683' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;background-size:1rem} .campo-erro{margin-top:.125rem;font-size:.8125rem;line-height:1.4;color:#B42318} .campo-aceite{display:flex;align-items:flex-start;gap:.75rem} .campo-aceite input{width:1.125rem;height:1.125rem;margin-top:.1875rem;flex-shrink:0;accent-color:var(--marca-600);cursor:pointer} .campo-aceite label{font-size:.875rem;line-height:1.6;color:var(--tinta-3);font-weight:400} .campo-aceite a{color:var(--marca-600);font-weight:500;text-decoration:underline;text-underline-offset:3px} .form-obrigatorio{font-size:.8125rem;color:var(--tinta-3)} .form-obrigatorio span{color:#B42318} .form-estado{min-height:1.25rem;font-size:.9375rem;line-height:1.5} .form-estado.is-ok{color:#126B3F;font-weight:500} .form-estado.is-erro{color:#B42318;font-weight:500} /* Armadilha para robo: fora da tela, fora do fluxo de foco. */ .armadilha{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} /* Avisos de resultado (caminho sem JavaScript) */ .aviso{display:flex;align-items:flex-start;gap:.625rem;margin-top:1.5rem;padding:1rem 1.25rem;border-radius:var(--r-sm);font-size:.9375rem;line-height:1.6} .aviso svg{flex-shrink:0;margin-top:.1875rem} .aviso-ok{background:#E8F5EE;border:1px solid #9AD3B4;color:#0F5B35} .aviso-erro{background:#FDECEA;border:1px solid #F3B4AE;color:#8C1C14} /* ---- Botao de envio do formulario ------------------------------------- :not(.btn) e o ponto importante. Estas regras nasceram para o