/* ----------------------------------------------------------- IDB — Processo Seletivo (STYLE COMPLETO) — v5 - Navbar + sheet - Hero - Modal - Seções + polaroids com efeito álbum (hover 3D) - Parallax, logos - Footer (menu, contatos, unidades, redes sociais) - Recuo de parágrafos e links-ação Tipografia: Nunito (títulos) + Source Sans 3 (textos) ----------------------------------------------------------- */ /* Fontes (alternativa ao no ) */ @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@700;800;900&family=Source+Sans+3:wght@400;500;600;700&display=swap'); @font-face { font-family: 'futura-medium'; src: url('../../../portal-assets/fonts/futura-medium-bt.ttf') format('truetype'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'futura-heavy-font'; src: url('../../../portal-assets/fonts/futura-heavy-font.ttf') format('truetype'); font-weight: normal; font-style: normal; font-display: swap; } /* ========== Variáveis ========== */ :root{ --navy:#031E4A; --navy-2:#082552; --orange:#FEA939; --paper:#F8FCFC; --ink:#0F172A; --muted:#475569; --title-blue:#031E4A; --subtitle-yellow:#FEA939; --para-gray:#475569; --radius:14px; --shadow:0 12px 30px rgba(0,0,0,.16); } /* Utilidades */ .text-white { color:#fff } .justify{ text-align:justify; text-justify:inter-word } /* ========== Reset/Globais ========== */ *{box-sizing:border-box} html,body{margin:0} html{scroll-behavior:smooth} img{max-width:100%;display:block} a{color:inherit;text-decoration:none} ul{margin:0;padding:0;list-style:none} button{font:inherit} body{ font-family:"Source Sans 3", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto; color:var(--para-gray); background:#fff; } h1,h2,h3,h4,.s-title{ font-family:"futura-heavy-font", "Nunito", ui-sans-serif, system-ui; color:var(--title-blue); font-weight:900; margin:0 0 .4em; } .s-sub,.subtitle{color:var(--subtitle-yellow); font-weight:800} /* ----- Parágrafos (recuo) ----- */ p,li{color:var(--para-gray); font-family:"futura-medium", "Source Sans 3", ui-sans-serif, system-ui; font-weight:500; line-height:1.7} p{ text-indent:1.25em; margin-top:.75em } /* Reseta onde não deve indentar */ .hero p, .modal p, footer p, .dropdown-menu a, .badge-date, .alert, .b-actions .btn, .qr-item p{ text-indent:0 } /* Containers com mesma largura do hero */ .wrap, .wrap-narrow, .hero__wrap, .nav-inner { max-width:1220px } .wrap{ padding:40px 16px; margin:0 auto } .wrap-narrow{ padding:36px 16px; margin:0 auto } section{ scroll-margin-top:80px } /* ========== NAVBAR ========== */ .navbar{ position:sticky; top:0; z-index:40; background:linear-gradient(180deg,var(--navy),var(--navy-2)); color:#fff; border-bottom:1px solid rgba(255,255,255,.08) } .nav-inner{ margin-inline:auto; padding:14px 16px; display:flex; align-items:center; gap:14px } .nav-left{ display:flex; align-items:center; gap:12px } .logo{ height:44px; width:auto; image-rendering:-webkit-optimize-contrast } @font-face { font-family: 'Brody'; src: url('../font/BRODY.TTF') format('truetype'); /* respeita o nome maiúsculo */ font-weight: normal; font-style: normal; } .brody-text { font-family: 'Brody', sans-serif; font-size: 35px; text-decoration: none; /* remove sublinhado */ color: inherit; /* herda a cor do contexto */ } .brand-text{ font:900 14px/1 ui-sans-serif; letter-spacing:.06em; text-transform:uppercase; opacity:.9 } .nav-right{ margin-left:auto; display:flex; align-items:center; gap:6px } .nav-list{ display:flex; align-items:center; gap:4px } .nav-item>a,.nav-item>button,.dd-btn{ appearance:none; border:0; background:transparent; cursor:pointer; color:#fff; font:500 14px/1.1 ui-sans-serif,system-ui,Inter; padding:12px 14px; border-radius:12px; position:relative; transition:transform .12s ease, background .2s ease; } .nav-item>a:hover,.nav-item>button:hover,.dd-btn:hover{ background:rgba(255,255,255,.10) } .nav-item>a:active,.nav-item>button:active,.dd-btn:active{ transform:translateY(1px) } .nav-item>a:focus-visible,.nav-item>button:focus-visible,.burger:focus-visible{ outline:3px solid rgba(254,169,57,.85); outline-offset:2px } .nav-item>a::after,.nav-item>button::after,.dd-btn::after{ content:""; position:absolute; left:12px; right:12px; bottom:8px; height:2px; background:linear-gradient(90deg,transparent 0 10%, rgba(255,255,255,.9), transparent 90% 100%); transform:scaleX(0); transform-origin:center; transition:transform .18s ease; } .nav-item>a:hover::after,.nav-item>button:hover::after,.dd-btn:hover::after{ transform:scaleX(1) } .nav-item .accent{ display:inline-flex; min-width:122px; align-items:center; justify-content:center; gap:9px; padding:11px 15px; border:1px solid rgba(255,255,255,.16); background:var(--orange); color:var(--navy); font:800 13px/1 "futura-medium", "Source Sans 3", ui-sans-serif; letter-spacing:.02em; border-radius:10px; box-shadow:0 8px 18px rgba(254,169,57,.28); transition:transform .16s ease, background .2s ease, box-shadow .2s ease; } .nav-item .accent::after{ content:none } .nav-item .accent:hover{ background:#ffc064; box-shadow:0 10px 22px rgba(254,169,57,.38); transform:translateY(-1px) } .nav-item .accent:active{ transform:translateY(1px) } .accent__arrow{ display:inline-block; font:700 17px/1 Arial,sans-serif; transition:transform .16s ease } .accent:hover .accent__arrow{ transform:translateX(3px) } /* Dropdown */ .dropdown{ position:relative } .dropdown-menu{ position:absolute; left:0; top:calc(100% + 8px); min-width:260px; padding:10px; background:#fff; color:var(--title-blue); border:1px solid rgba(0,0,0,.08); border-radius:14px; box-shadow:var(--shadow); opacity:0; transform:translateY(6px) scale(.98); pointer-events:none; transition:opacity .18s ease, transform .18s ease; z-index:10; } .dropdown[aria-expanded="true"] .dropdown-menu{opacity:1; transform:none; pointer-events:auto} .dropdown-menu a{ display:flex; justify-content:space-between; align-items:center; padding:10px 12px; border-radius:10px; font-weight:800; color:var(--navy); } .dropdown-menu a small{ color:#64748b; font-weight:700 } .dropdown-menu a:hover{ background:rgba(3,30,74,.06) } /* caret visual (opcional) */ .caret { border: solid white; border-width: 0 2px 2px 0; display: inline-block; padding: 3px; margin-left: 6px; transform: rotate(45deg); } /* Hamburger + sheet mobile */ .burger{ display:none; width:44px; height:44px; border-radius:12px; border:1px solid rgba(255,255,255,.25); background:transparent; justify-content:center; align-items:center; cursor:pointer } .burger span{ width:22px; height:2px; background:#fff; border-radius:2px; position:relative; transition:all .22s ease } .burger span::before,.burger span::after{ content:""; position:absolute; left:0; width:22px; height:2px; background:#fff; border-radius:2px; transition:inherit } .burger span::before{ top:-7px } .burger span::after{ top:7px } .burger.active span{ background:transparent } .burger.active span::before{ transform:translateY(7px) rotate(45deg) } .burger.active span::after{ transform:translateY(-7px) rotate(-45deg) } .sheet{ position:fixed; inset:0; overflow:hidden; background:rgba(0,0,0,.35); opacity:0; pointer-events:none; transition:opacity .2s ease; z-index:50 } .sheet.open{ opacity:1; pointer-events:auto } .sheet-panel{ position:absolute; right:0; top:0; bottom:0; width:min(86vw,360px); background:#fff; padding:16px; box-shadow:-10px 0 30px rgba(0,0,0,.25); transform:translateX(100%); transition:transform .28s cubic-bezier(.2,.8,.2,1); display:flex; flex-direction:column; gap:8px; } .sheet.open .sheet-panel{ transform:translateX(0) } .sheet a{ padding:12px 10px; border-radius:10px; font-weight:800; color:var(--navy) } .sheet .sheet-cta{ display:flex; align-items:center; justify-content:center; gap:9px; margin-top:8px; padding:13px 14px; background:var(--orange); color:var(--navy); border:1px solid rgba(3,30,74,.12); box-shadow:0 8px 18px rgba(254,169,57,.28); font:800 14px/1 "futura-medium", "Source Sans 3", ui-sans-serif; } .sheet .sheet-cta:hover{ background:#ffc064 } .sheet .group-title{ margin:8px 2px 4px; color:#6b7a90; font:700 12px/1 ui-sans-serif; letter-spacing:.06em; text-transform:uppercase } @media (max-width:980px){ .nav-list{display:none} .burger{display:flex} } @media (max-width:620px){ .nav-inner{ padding:10px 14px; gap:8px } .nav-left{ min-width:0 } .brody-text{ font-size:27px; line-height:1; white-space:nowrap } .burger{ width:40px; height:40px; flex:0 0 40px } } /* ========== HERO (fullbanner) ========== */ .ps-fullbanner{ position:relative; width:100%; overflow:hidden; background:#f4f6f8 } .ps-fullbanner__viewport{ position:relative; width:100%; aspect-ratio:3 / 1; min-height:0; overflow:hidden } .ps-fullbanner__slide{ position:absolute; inset:0; display:block; visibility:hidden; opacity:0; transition:opacity .35s ease, visibility .35s ease } .ps-fullbanner__slide.is-active{ visibility:visible; opacity:1 } .ps-fullbanner__slide img{ width:100%; height:100%; object-fit:cover } .ps-fullbanner__content{ position:absolute; z-index:1; right:clamp(52px,8vw,132px); bottom:clamp(36px,8vw,96px); left:clamp(24px,8vw,132px); display:flex; max-width:620px; flex-direction:column; align-items:flex-start; gap:16px; padding:clamp(22px,3vw,34px); border-left:4px solid var(--orange); background:linear-gradient(90deg,rgba(3,30,74,.88),rgba(3,30,74,.62) 78%,rgba(3,30,74,0)); color:#fff; } .ps-fullbanner__text{ max-width:30ch; margin:0; color:#fff; font:800 clamp(24px,3.5vw,48px)/1.08 "futura-heavy-font","Nunito",ui-sans-serif; text-indent:0; text-wrap:balance; } .ps-fullbanner__cta{ display:inline-flex; align-items:center; min-height:42px; padding:11px 16px; border-radius:10px; background:var(--orange); color:#111; font:900 14px/1 "futura-medium","Source Sans 3",ui-sans-serif; box-shadow:0 8px 20px rgba(0,0,0,.2); transition:filter .2s ease, transform .12s ease; } .ps-fullbanner__cta::after{ content:"\2192"; margin-left:8px; font-size:17px } .ps-fullbanner__cta:hover{ filter:brightness(1.06) } .ps-fullbanner__cta:active{ transform:translateY(1px) } .ps-fullbanner__cta:focus-visible{ outline:3px solid #fff; outline-offset:3px } .ps-fullbanner__control{ position:absolute; top:50%; z-index:1; display:grid; width:42px; height:42px; place-items:center; border:1px solid rgba(255,255,255,.5); border-radius:50%; background:rgba(3,30,74,.48); color:#fff; cursor:pointer; font-size:24px; line-height:1; transform:translateY(-50%); transition:background .2s ease, border-color .2s ease } .ps-fullbanner__control:hover{ border-color:#fff; background:rgba(3,30,74,.8) } .ps-fullbanner__control:focus-visible{ outline:3px solid rgba(254,169,57,.75); outline-offset:3px } .ps-fullbanner__control--prev{ left:18px } .ps-fullbanner__control--next{ right:18px } .ps-fullbanner__dots{ position:absolute; right:0; bottom:18px; left:0; z-index:1; display:flex; justify-content:center; gap:8px } .ps-fullbanner__dot{ width:9px; height:9px; border:1px solid rgba(255,255,255,.85); border-radius:50%; padding:0; background:transparent; cursor:pointer } .ps-fullbanner__dot.is-active{ background:#fff; box-shadow:0 0 0 3px rgba(255,255,255,.2) } .ps-fullbanner__dot:focus-visible{ outline:3px solid rgba(254,169,57,.75); outline-offset:3px } .hero{ min-height:clamp(360px, 42vw, 560px); display:flex; align-items:center; background-image:linear-gradient(90deg, rgba(3,30,74,.88) 0%, rgba(3,30,74,.67) 48%, rgba(3,30,74,.38) 100%), url("https://api-gallery.dombarreto.com/uploads/2026/09/image/20260909195050_6aa1b89ac49ed.png"); background-color:var(--navy); background-position:center; background-size:cover; color:#fff; } .hero__wrap{ width:100%; margin:0 auto; padding:clamp(56px,8vw,104px) 16px } .badge{ display:inline-flex; gap:8px; align-items:center; background:rgba(255,255,255,.16); padding:8px 12px; border-radius:999px; font:900 13px/1 ui-sans-serif; letter-spacing:.06em } .hero h1{ font:800 clamp(28px, 5.8vw, 62px)/1.04 "Nunito", ui-sans-serif; margin:.5em 0 .25em } .hero h1 .highlight{ color:var(--orange) } .hero p{ max-width:65ch; font:500 18px/1.7 "Source Sans 3", ui-sans-serif; color:rgba(255,255,255,.9) } /* Botões */ .cta{ display:flex; gap:12px; margin-top:18px; flex-wrap:wrap } .btn{ display:inline-flex; align-items:center; gap:8px; padding:12px 16px; border-radius:12px; font:900 15px/1 "futura-medium", ui-sans-serif; border:0; cursor:pointer; transition:transform .12s ease, filter .2s ease } .btn:active{ transform:translateY(1px) } .btn--accent{ background:var(--orange); color:#111; box-shadow:0 10px 24px rgba(254,169,57,.35) } .btn--light{ background:#fff; color:#0f172a } /* ========== MODAL (Edital & Inscrições) ========== */ .modal{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.48); opacity:0; pointer-events:none; transition:opacity .2s ease; z-index:60 } .modal.open{ opacity:1; pointer-events:auto } .modal__panel{ width:min(960px, 94vw); max-height:86vh; overflow:auto; background:#fff; border-radius:16px; box-shadow:var(--shadow) } .modal__head{ display:flex; justify-content:space-between; align-items:center; padding:14px 16px; border-bottom:1px solid rgba(0,0,0,.08) } .modal__heading{ min-width:0 } .modal__title{ font:900 20px/1.2 "Nunito"; color:var(--navy); margin:0 } .x{ width:38px; height:38px; border-radius:10px; border:1px solid rgba(0,0,0,.12); background:#fff; display:grid; place-items:center; cursor:pointer } .x:hover{ filter:brightness(0.95) } .modal__body{ padding:16px } .note{ font-size:13px; color:#64748b; margin-bottom:10px } .modal--edital{ align-items:flex-start; padding:16px 22px; background:rgba(3,20,47,.7); backdrop-filter:blur(6px) } .modal--edital .modal__panel{ width:min(1120px,96vw); max-height:calc(100vh - 32px); border-radius:14px; box-shadow:0 24px 70px rgba(3,20,47,.3) } .modal--edital .modal__head{ align-items:flex-start; padding:16px 24px 14px } .modal-kicker{ display:block; margin-bottom:4px; color:var(--orange); font:800 12px/1 "Source Sans 3",ui-sans-serif; letter-spacing:.12em; text-transform:uppercase } .modal--edital .modal__title{ font-size:28px; line-height:1.1 } .modal--edital .modal__body{ padding:20px 24px 24px; background:#fbfdff } .modal--edital .note{ margin:0 0 16px; color:#587296; font-size:15px; line-height:1.45; text-indent:0 } .modal--vagas{ align-items:flex-start; padding:clamp(64px,7vh,92px) 2vw 20px } .modal--vagas .modal__panel{ width:min(1240px,96vw); max-height:calc(100vh - 84px); } .modal--vagas .modal__head{ padding:16px 20px 14px } .modal--vagas .modal__body{ padding:18px 20px 20px } .vagas-kicker{ display:block; margin-bottom:4px; color:var(--orange); font:800 11px/1 "Source Sans 3",ui-sans-serif; letter-spacing:.12em; text-transform:uppercase } .vagas-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px } .vagas-unit{ overflow:hidden; border:1px solid rgba(3,30,74,.1); border-radius:9px; background:#fff; box-shadow:0 8px 24px rgba(3,30,74,.08) } .vagas-unit__head{ display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:78px; padding:15px 20px; background:linear-gradient(115deg,var(--navy),var(--navy-2)); color:#fff } .vagas-unit__head h4{ margin:3px 0 0; color:#fff; font:900 25px/1 "Nunito",ui-sans-serif; letter-spacing:.06em } .vagas-unit__eyebrow{ color:var(--orange); font:800 10px/1 "Source Sans 3",ui-sans-serif; letter-spacing:.14em; text-transform:uppercase } .vagas-unit__total{ display:flex; flex-direction:column; align-items:flex-end; gap:3px; text-align:right } .vagas-unit__total strong{ color:#fff; font:900 17px/1 "Source Sans 3",ui-sans-serif } .vagas-unit__total small{ color:rgba(255,255,255,.62); font:600 11px/1 "Source Sans 3",ui-sans-serif } .vagas-stages{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:start; gap:0; padding:14px 0 8px } .vagas-stage{ min-width:0; padding:0 8px 8px } .vagas-stage + .vagas-stage{ border-left:1px solid rgba(3,30,74,.1) } .vagas-stage__head{ display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:48px; padding:0 1px 10px; border-bottom:1px solid rgba(3,30,74,.1) } .vagas-stage__identity{ display:flex; min-width:0; align-items:center; gap:8px } .vagas-stage__icon{ display:grid; flex:0 0 38px; width:38px; height:38px; place-items:center; border-radius:50%; } .vagas-stage__icon svg{ width:21px; height:21px; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.7 } .vagas-stage__icon--infantil{ background:#fdebf1; color:#d94c73 } .vagas-stage__icon--fundamental{ background:#e5f1ff; color:#2878c8 } .vagas-stage__icon--medio{ background:#eee8ff; color:#7351be } .vagas-stage__head h5{ margin:0; color:var(--navy); font:900 13px/1.05 "Source Sans 3",ui-sans-serif; } .vagas-stage__head small{ display:block; margin-top:4px; color:#7690b2; font:600 10px/1.05 "Source Sans 3",ui-sans-serif } .vagas-stage__count{ display:grid; flex:0 0 auto; min-width:25px; height:25px; place-items:center; border-radius:50%; background:#eef3fb; color:var(--navy); font:800 11px/1 "Source Sans 3",ui-sans-serif } .vagas-table{ width:100%; margin-top:10px; border:1px solid #e7edf5; border-spacing:0; border-radius:7px; color:var(--navy); font:600 11px/1.2 "Source Sans 3",ui-sans-serif; table-layout:fixed; overflow:hidden } .vagas-table th,.vagas-table td{ min-width:0; padding:9px 5px; border-right:1px solid #e7edf5; border-bottom:1px solid #e7edf5; overflow:hidden; overflow-wrap:break-word; text-align:left; vertical-align:middle; white-space:normal; word-break:normal } .vagas-table tr:last-child th,.vagas-table tr:last-child td{ border-bottom:0 } .vagas-table th:last-child,.vagas-table td:last-child{ border-right:0 } .vagas-table thead th{ background:#f4f8fd; color:#6680a4; font:800 9px/1 "Source Sans 3",ui-sans-serif; letter-spacing:.08em; text-transform:uppercase } .vagas-table thead th:first-child{ width:36% } .vagas-table tbody th{ color:var(--navy); font:800 11px/1.15 "Source Sans 3",ui-sans-serif; overflow-wrap:normal } .vagas-table tbody td{ background:#fff } .vagas-status{ display:flex; min-width:0; max-width:100%; align-items:flex-start; gap:3px; color:#64748b; font:800 9px/1.1 "Source Sans 3",ui-sans-serif; overflow-wrap:normal; white-space:normal; word-break:normal } .vagas-status>span:last-child{ min-width:0; overflow-wrap:normal } .vagas-table .vagas-status__dot{ display:none } .vagas-status__dot{ display:inline-block; flex:0 0 8px; width:8px; height:8px; border-radius:50%; background:#94a3b8 } .vagas-status.is-available{ color:#12734f } .vagas-status__dot.is-available{ background:#1d9b6c } .vagas-status.is-limited{ color:#a76600 } .vagas-status__dot.is-limited{ background:#ee9700 } .vagas-status.is-unavailable{ color:#c3292d } .vagas-status__dot.is-unavailable{ background:#e62e37 } .vagas-empty{ color:#a6b4c5 } .vagas-legend{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:6px 16px 8px; padding:13px 16px; border-radius:11px; background:#f4f8fd } .vagas-legend--top{ margin:0 0 16px; } .vagas-legend__item{ display:flex; min-width:0; align-items:flex-start; gap:9px } .vagas-legend__item>.vagas-status__dot{ flex-basis:15px; width:15px; height:15px; margin-top:2px } .vagas-legend__item strong,.vagas-legend__item small{ display:block } .vagas-legend__item strong{ color:var(--navy); font:800 12px/1.1 "Source Sans 3",ui-sans-serif } .vagas-legend__item small{ margin-top:4px; color:#7891b2; font:600 10px/1.1 "Source Sans 3",ui-sans-serif } .modal--vagas .note{ margin-top:0; margin-bottom:16px; text-indent:0 } .b-grid{ display:grid; gap:16px } .block{ background:#fff; border:1px solid #e2ebf5; border-radius:16px; padding:15px 19px 16px; box-shadow:0 8px 22px rgba(3,30,74,.07) } .block__top{ display:flex; align-items:flex-start; justify-content:space-between; gap:18px } .b-left{ flex:1 1 280px; min-width:0 } .inscricao-identity{ display:flex; min-width:0; align-items:flex-start; gap:22px } .inscricao-icon{ display:grid; flex:0 0 54px; width:54px; height:54px; place-items:center; border-radius:50% } .inscricao-icon svg{ width:29px; height:29px; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.8 } .inscricao-icon--infantil{ background:#ffe7ef; color:#ed1455 } .inscricao-icon--fundamental{ background:#d9f7e9; color:#08a66b } .inscricao-icon--medio{ background:#eae3ff; color:#7650c7 } .inscricao-content{ min-width:0; padding-top:2px } .b-left h3{ margin:0; color:var(--navy); overflow-wrap:break-word } .inscricao-title{ font:900 20px/1.18 "Nunito",ui-sans-serif } .badge-date{ display:inline-flex; align-items:center; gap:8px; margin-top:8px; background:#eef4fb; color:#29486f; padding:6px 10px; border-radius:10px; font:600 13px/1.25 "Source Sans 3",ui-sans-serif } .badge-date svg{ flex:0 0 16px; width:16px; height:16px; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.8 } .badge-date span{ display:inline-flex; align-items:center; flex-wrap:wrap; gap:7px } .badge-date b{ font-weight:900; color:#7890b0 } .alert{ display:flex; align-items:center; gap:12px; padding:11px 14px; border-radius:12px; background:#fff4e5; border:1px solid #ffb154; color:#a34e00; font:700 15px/1.35 "Source Sans 3",ui-sans-serif; margin-top:12px; text-indent:0 } .alert::before{ display:grid; flex:0 0 22px; width:22px; height:22px; place-items:center; border-radius:50%; background:#d97700; color:#fff; content:'i'; font:900 14px/1 ui-sans-serif } .b-actions{ display:flex; flex:0 0 auto; gap:10px; align-items:center; flex-wrap:wrap } .modal--edital .b-actions .btn{ min-height:44px; padding:11px 17px; border-radius:12px; font-size:16px; white-space:nowrap } .modal--edital .btn--accent{ color:#5a3b19; background:linear-gradient(135deg,#ffd79d,#ffc46d); box-shadow:0 8px 18px rgba(254,169,57,.22) } .modal--edital .btn[aria-disabled="true"]{ opacity:1 } .modal--edital .btn--accent:hover{ filter:brightness(.98); transform:translateY(-1px) } .btn__icon{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.8 } .btn--ghost{ background:transparent; border:1px solid rgba(0,0,0,.12); color:var(--navy) } .btn--outline{ display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:10px 20px; background:transparent; color:var(--navy); font:700 14px/1 "futura-medium","Source Sans 3",ui-sans-serif; border:1.5px solid var(--navy); border-radius:10px; text-decoration:none; cursor:pointer; transition:background .2s ease,color .2s ease,transform .12s ease; white-space:nowrap } .btn--outline:hover{ background:var(--navy); color:#fff; transform:translateY(-1px) } .btn--outline:active{ transform:translateY(1px) } .btn[disabled], .btn[aria-disabled="true"]{ opacity:.6; cursor:not-allowed } @media (max-width:640px){ .modal--edital{ padding:8px 8px 10px } .modal--edital .modal__panel{ width:100%; max-height:calc(100vh - 18px); border-radius:13px } .modal--edital .modal__head{ padding:14px 15px 12px } .modal--edital .modal__title{ font-size:23px } .modal--edital .modal__body{ padding:15px } .modal--edital .note{ font-size:14px; margin-bottom:14px } .block{ padding:14px } .block__top{ flex-wrap:wrap; gap:12px } .inscricao-identity{ gap:12px } .inscricao-icon{ flex-basis:46px; width:46px; height:46px } .inscricao-icon svg{ width:25px; height:25px } .inscricao-title{ font-size:18px } .badge-date{ font-size:12px; margin-top:7px } .b-actions{ margin-left:auto } .modal--edital .b-actions .btn{ min-height:42px; padding:10px 14px; font-size:15px } .alert{ align-items:flex-start; font-size:14px; padding:10px 12px } .modal--vagas{ padding:54px 10px 16px } .modal--vagas .modal__panel{ width:100%; max-height:calc(100vh - 70px); border-radius:14px } .vagas-grid{ grid-template-columns:1fr; gap:12px } .modal--vagas .modal__head{ padding:14px 14px 12px } .modal--vagas .modal__body{ padding:14px } .vagas-unit__head{ min-height:70px; padding:13px 14px 12px } .vagas-unit__head h4{ font-size:21px } .vagas-unit__total strong{ font-size:15px } .vagas-stages{ grid-template-columns:1fr; padding:12px 0 2px } .vagas-stage{ padding:0 10px 12px } .vagas-stage + .vagas-stage{ border-top:1px solid rgba(3,30,74,.1); border-left:0; padding-top:12px } .vagas-table{ font-size:12px } .vagas-table th,.vagas-table td{ padding:10px 8px } .vagas-status{ font-size:11px } .vagas-legend{ margin-right:0; margin-left:0; padding:12px 10px; gap:8px } .vagas-legend--top{ margin-bottom:12px } .vagas-legend__item{ gap:6px } .vagas-legend__item strong{ font-size:11px } .vagas-legend__item small{ font-size:9px } .ps-fullbanner__viewport{ aspect-ratio:3 / 1; min-height:0 } .ps-fullbanner__content{ right:18px; bottom:26px; left:18px; gap:12px; padding:18px 18px 18px 20px } .ps-fullbanner__text{ max-width:24ch; font-size:clamp(22px,7vw,32px) } .ps-fullbanner__cta{ min-height:38px; padding:10px 13px; font-size:13px } .ps-fullbanner__control{ width:34px; height:34px; font-size:19px } .ps-fullbanner__control--prev{ left:10px } .ps-fullbanner__control--next{ right:10px } .ps-fullbanner__dots{ bottom:11px } } @media (prefers-reduced-motion:reduce){ .ps-fullbanner__slide{ transition:none } } /* ========== Seções genéricas / títulos ========== */ .s-title{ font:800 clamp(26px,4.5vw,44px)/1.1 "futura-heavy-font","Nunito"; color:var(--title-blue); margin:0 0 8px } .s-sub{ font:800 18px/1.2 "Nunito"; color:var(--subtitle-yellow); margin:0 0 16px } .s-lead{ color:var(--muted); max-width:75ch } .content-anchor{ display:block; height:0; scroll-margin-top:80px } /* grid texto + mídia lateral */ .s-cols{ display:grid; gap:28px; grid-template-columns:1.3fr .7fr } .s-cols.reverse{ grid-template-columns:.7fr 1.3fr } @media (max-width:960px){ .s-cols,.s-cols.reverse{ grid-template-columns:1fr } } /* Blocos de texto sem “card” */ .text-block{ background:transparent; border:0; box-shadow:none; padding:0 } .text-block p{ margin:.75em 0 } .split .text-block.justify{ text-align:left; text-justify:auto } /* ========== Conteúdo rico do cronograma ========== */ #processo-insercao .cronograma-content{ color:#263442; font:500 16px/1.7 "futura-medium", "Source Sans 3", ui-sans-serif, system-ui; } #processo-insercao .cronograma-content .text-block, #processo-insercao .cronograma-content .ed-bloco{ margin:0; padding:0; background:transparent; border:0; box-shadow:none; } #processo-insercao .cronograma-content h1, #processo-insercao .cronograma-content h2, #processo-insercao .cronograma-content h3, #processo-insercao .cronograma-content h4, #processo-insercao .cronograma-content h5{ font-family:"futura-heavy-font", "Nunito", ui-sans-serif, system-ui; font-weight:800; text-indent:0; } #processo-insercao .cronograma-content h1, #processo-insercao .cronograma-content h2, #processo-insercao .cronograma-content h3{ font-family:"futura-heavy-font", "Nunito", ui-sans-serif, system-ui; } #processo-insercao .cronograma-content h2{ margin:1.25em 0 .45em; color:#031e4a; font-size:1.45rem; line-height:1.2; } #processo-insercao .cronograma-content h3{ margin:1.1em 0 .35em; color:#fea939; font-size:1.1rem; line-height:1.25; } #processo-insercao .cronograma-content h4, #processo-insercao .cronograma-content h5{ margin:1em 0 .35em; color:#18385d; font-size:1rem; line-height:1.3; } #processo-insercao .cronograma-content p, #processo-insercao .cronograma-content li{ margin:.8em 0; color:#263442; font:500 16px/1.7 "futura-medium", "Source Sans 3", ui-sans-serif, system-ui; text-indent:0; } #processo-insercao .cronograma-content ul, #processo-insercao .cronograma-content ol{ margin:.8em 0; padding-left:1.5em; list-style:revert; } #processo-insercao .cronograma-content blockquote{ margin:1em 0; padding-left:1em; border-left:3px solid #f2a735; color:#627184; } #processo-insercao .cronograma-content hr{ margin:1.25em 0; border:0; border-top:1px solid #dbe4ed; } #processo-insercao .cronograma-content a{ color:#1f70e8; text-decoration:underline; text-underline-offset:2px; } /* ========== Destaque institucional da Home ========== */ .history-feature{ position:relative; max-width:1280px; padding:64px 32px 76px; overflow:hidden; isolation:isolate; } .history-feature::before{ content:""; position:absolute; z-index:-2; top:8%; right:-14%; width:58%; height:84%; background:#eaf2fb; border-radius:48% 0 0 42%; transform:rotate(-4deg); } .history-feature::after{ content:""; position:absolute; z-index:-1; top:18%; right:8%; width:86px; height:5px; border-radius:999px; background:var(--orange); transform:rotate(-4deg); } .history-feature .s-cols{ grid-template-columns:minmax(0, 45fr) minmax(0, 55fr); gap:clamp(36px, 5vw, 72px); align-items:start; } .history-feature .s-title{ margin-top:8px; margin-bottom:10px; font-size:clamp(42px, 4vw, 52px); line-height:1.02; } .history-feature .s-sub{ margin-bottom:28px; font-size:19px; } .history-feature .text-block p{ max-width:52ch; text-indent:0; line-height:1.7; } .history-feature .b-actions{ margin-top:28px } .history-feature .btn--accent{ min-width:228px; justify-content:center; padding:14px 20px; font-size:15px; } .history-media{ position:relative; min-height:0 !important; display:block !important; padding-top:30px; } .history-image{ position:relative; z-index:1; width:100% !important; height:auto; aspect-ratio:16 / 9; object-fit:cover; margin:0 !important; border-radius:18px; box-shadow:0 22px 46px rgba(3,30,74,.18); -webkit-mask-image:none !important; mask-image:none !important; } .history-media__accent{ position:absolute; z-index:0; top:0; left:-18px; width:46%; height:82%; border-radius:18px; background:var(--navy); opacity:.94; transform:rotate(-5deg); } .history-badge{ position:absolute; z-index:2; right:-18px; bottom:20px; display:flex; align-items:center; gap:10px; min-width:174px; padding:12px 16px; color:#fff; background:var(--navy); border:3px solid #fff; border-radius:14px; box-shadow:0 12px 24px rgba(3,30,74,.2); } .history-badge strong{ font:900 30px/1 "Nunito", ui-sans-serif; color:var(--orange); } .history-badge span{ font:700 13px/1.15 "Source Sans 3", ui-sans-serif; color:#fff; } .history-feature--roots::before{ right:auto; left:-14%; border-radius:0 48% 42% 0; transform:rotate(4deg); } .history-feature--roots::after{ right:auto; left:8%; transform:rotate(4deg); } .history-feature--roots .s-cols{ grid-template-columns:minmax(0, 55fr) minmax(0, 45fr); } .history-feature--roots .history-media__accent{ right:-18px; left:auto; transform:rotate(5deg); } .history-feature--roots .history-badge{ right:auto; left:-18px; } @media (max-width:960px){ .history-feature{ padding:52px 24px 64px } .history-feature .s-cols{ grid-template-columns:1fr } .history-media{ padding-top:18px } .history-badge{ right:10px; bottom:14px } .history-feature--roots .history-badge{ right:10px; left:auto } } @media (max-width:620px){ .history-feature{ padding:42px 16px 52px } .history-feature .s-title{ font-size:clamp(36px, 11vw, 46px) } .history-feature::before{ right:-42%; width:96%; height:52%; top:48% } .history-feature::after{ right:14%; top:53%; width:60px } .history-media__accent{ left:-8px; width:42%; height:78% } .history-badge{ right:6px; bottom:10px; min-width:158px; padding:10px 12px } .history-badge strong{ font-size:26px } .history-feature--roots .history-media__accent{ right:-8px; left:auto } .history-feature--roots::before{ right:auto; left:-42% } .history-feature--roots::after{ right:auto; left:14% } .history-feature--roots .history-badge{ right:auto; left:6px } } /* ========== Polaroids com efeito “álbum” ========== */ .foto-stack{ position:relative; min-height:260px; perspective:1200px; } .foto-pola{ position:absolute; width:clamp(220px, 42vw, 380px); background:#fff; border-radius:6px; padding:10px 10px 50px; box-shadow:0 14px 30px rgba(0,0,0,.22), 0 2px 0 rgba(0,0,0,.06) inset; transform-style:preserve-3d; transition:transform .35s ease, box-shadow .35s ease, filter .35s ease; will-change:transform, box-shadow, filter; } .foto-pola::before{ content:""; position:absolute; inset:8px 8px 46px 8px; border-radius:4px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.05); pointer-events:none; } .foto-pola figcaption{ position:absolute; left:10px; right:10px; bottom:8px; background:rgba(0,0,0,.06); border-radius:12px; text-align:center; font:700 13px/1 ui-sans-serif; color:#475569; padding:8px } .foto-left{ left:0; transform:rotate(-2deg); transform-origin:12% 8% } .foto-right{ right:0; transform:rotate(2deg); transform-origin:88% 8% } .foto-left:hover{ transform:rotate(-5deg) rotateY(-7deg) translateY(-6px); box-shadow:0 22px 40px rgba(0,0,0,.28), 0 2px 0 rgba(0,0,0,.06) inset; filter:saturate(1.03); } .foto-right:hover{ transform:rotate(5deg) rotateY(7deg) translateY(-6px); box-shadow:0 22px 40px rgba(0,0,0,.28), 0 2px 0 rgba(0,0,0,.06) inset; filter:saturate(1.03); } .foto-pola:focus-within{ outline:2px solid rgba(3,30,74,.25); outline-offset:3px; } /* Mobile: empilhar sem sobreposição */ @media (max-width:720px){ .foto-pola{ position:relative; transform:none; width:100%; margin:10px 0 } .foto-stack{ min-height:0; perspective:none } } /* Desktop: NÃO sobrepor (lado a lado) */ @media (min-width:1024px){ .foto-stack{ position:relative; min-height:auto; display:flex; gap:28px; align-items:center; justify-content:flex-end; flex-direction: column; } .foto-pola{ position:relative !important; width:clamp(280px, 38vw, 420px); margin:0; } } /* ========== Split com imagem lateral + parallax suave ========== */ .split{ position:relative; isolation:isolate } .split .media-side{ position:relative; min-height:520px; display:flex; align-items:center; justify-content:center } .side-img{ position:absolute; inset:0; background-size:cover; background-position:center; border-radius:0 !important; box-shadow:none !important; transform:translateY(0); will-change:transform; } /* #propositos: imagem ocupa 100% da coluna */ #propositos .media-side { display:flex; align-items:center; justify-content:center; } #propositos .media-side .side-img { max-width:100%; height:100%; object-fit:cover; } /* ========== Bloco “decretos” (moldura laranja) ========== */ .decretos{ border:2px solid var(--orange); border-radius:14px; padding:14px } .decretos h4{ margin:.2em 0 .6em; color:var(--navy) } .decretos p{ margin:.5em 0 } /* ========== Parallax de faixa inteira ========== */ .parallax{ position:relative; background-attachment:fixed; background-position:center; background-size:cover; min-height:60vh; } .parallax::before{ content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(3,30,74,.55), rgba(3,30,74,.55)) } .parallax .parallax-inner{ position:relative; z-index:1; padding:12vh 16px; color:#fff; text-align:center } .parallax--lg{ min-height:66vh } .parallax--xl{ min-height:72vh } /* ========== Listas simples / Cartões ========== */ .card,.s-card{ background:transparent; border:0; box-shadow:none; padding:0 } .s-card h3{ margin:.2em 0 .4em; color:var(--navy) } .ul-clean{ padding-left:1.1em } .ul-clean li{ margin:.35em 0 } /* ========== Imagens soltas ========== */ .centered-img, .maker-img, .full-img{ display:block; width:100%; max-width:100%; margin-top:16px; border-radius:0; box-shadow:none } /* ========== Duas colunas (fundamental/poesia) ========== */ .two-cols{ display:grid; gap:28px; grid-template-columns:1fr 1fr } @media (max-width:960px){ .two-cols{ grid-template-columns:1fr } } /* ========== Parceiros/Logos (bilíngue, médio, esportes) ========== */ .partners, .sports-icons{ display:flex; gap:24px; flex-wrap:wrap; justify-content:center; align-items:center; margin:24px 0 } .partner-logo, .sport-logo{ flex:0 1 160px; max-width:160px; height:80px; display:flex; justify-content:center; align-items:center; background:#fff; border-radius:12px; padding:8px; box-shadow:0 4px 12px rgba(0,0,0,.08) } .partner-logo img, .sport-logo img{ max-height:64px; max-width:100%; object-fit:contain } /* ========== QR Codes ========== */ .qr-flex{ display:flex; gap:24px; flex-wrap:wrap; justify-content:center; margin:20px 0 } .qr-item{ display:flex; flex-direction:column; align-items:center; gap:8px; border-radius:12px; transition:transform .15s ease, box-shadow .2s ease } .qr-item:hover{ transform:translateY(-2px); box-shadow:0 10px 26px rgba(0,0,0,.18) } .qr-item img{ width:140px; height:140px; object-fit:contain; border-radius:12px; box-shadow:var(--shadow) } /* ========== Links de ação (tel, mapa, e-mail, whatsapp) ========== */ .link-cta{ font-weight:800; text-decoration:underline; text-underline-offset:3px; } .link-cta:hover{ filter:brightness(1.05) } /* ========== CTA flutuante do WhatsApp ========== */ .ps-whatsapp-widget{ position:fixed; right:24px; bottom:24px; z-index:20; display:flex; align-items:center; width:56px; height:56px; border-radius:20px; transition:width .25s ease, height .25s ease, padding .25s ease, background-color .25s ease, box-shadow .25s ease; } .ps-whatsapp-widget.is-open{ width:min(390px, calc(100vw - 32px)); height:auto; min-height:72px; gap:12px; padding:10px 12px 10px 10px; background:#fff; border:1px solid rgba(37,211,102,.28); border-radius:18px; box-shadow:0 14px 34px rgba(3,30,74,.2); } .ps-whatsapp-widget.is-open:hover{ transform:translateY(-3px); box-shadow:0 18px 38px rgba(3,30,74,.26); } .ps-whatsapp-cta__toggle{ display:grid; flex:0 0 56px; place-items:center; width:56px; height:56px; padding:0; cursor:pointer; background:transparent; border:0; border-radius:50%; } .ps-whatsapp-cta__toggle:focus-visible, .ps-whatsapp-cta__schedule:focus-visible, .ps-whatsapp-cta__close:focus-visible{ outline:3px solid rgba(37,211,102,.5); outline-offset:3px; } .ps-whatsapp-cta__icon{ display:grid; flex:0 0 48px; place-items:center; width:48px; height:48px; color:#fff; background:#25d366; border-radius:50%; } .ps-whatsapp-cta__icon svg{ width:27px; height:27px; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.7 } .ps-whatsapp-cta__icon path + path{ stroke-width:1.5 } .ps-whatsapp-cta__panel{ display:grid; flex:1 1 auto; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:10px; min-width:0; max-width:0; overflow:hidden; opacity:0; pointer-events:none; visibility:hidden; transition:max-width .2s ease, opacity .15s ease, visibility .2s ease; } .ps-whatsapp-widget.is-open .ps-whatsapp-cta__panel{ max-width:290px; opacity:1; pointer-events:auto; visibility:visible; } .ps-whatsapp-cta__copy{ display:grid; gap:2px; min-width:0 } .ps-whatsapp-cta__copy strong{ color:#17332a; font:800 16px/1.2 "Nunito", sans-serif } .ps-whatsapp-cta__copy span{ color:#527064; font:600 14px/1.25 "Source Sans 3", sans-serif } .ps-whatsapp-cta__actions{ display:grid; gap:6px; justify-items:end } .ps-whatsapp-cta__schedule{ display:inline-flex; align-items:center; gap:4px; padding:7px 9px; color:#fff; background:#159447; border-radius:8px; font:800 12px/1 "Source Sans 3", sans-serif; white-space:nowrap; } .ps-whatsapp-cta__schedule:hover{ background:#117c3b } .ps-whatsapp-cta__close{ padding:0; color:#527064; cursor:pointer; background:transparent; border:0; font-size:15px; line-height:1; } .ps-whatsapp-cta__close:hover{ color:#17332a } @media (max-width:640px){ .ps-whatsapp-widget{ right:16px; bottom:16px } .ps-whatsapp-widget.is-open{ width:calc(100vw - 32px); padding:8px 10px 8px 8px } .ps-whatsapp-cta__toggle{ flex-basis:48px; width:48px; height:48px } .ps-whatsapp-cta__icon{ width:48px; height:48px } .ps-whatsapp-cta__icon svg{ width:24px; height:24px } .ps-whatsapp-cta__copy strong{ font-size:15px } .ps-whatsapp-cta__copy span{ font-size:13px } .ps-whatsapp-cta__schedule{ padding:7px; font-size:11px } } @media (prefers-reduced-motion: reduce){ .ps-whatsapp-widget, .ps-whatsapp-cta__panel{ transition:none } .ps-whatsapp-widget.is-open:hover{ transform:none } } /* ========== FOOTER INSTITUCIONAL ========== */ footer.site-footer{ position:relative; overflow:hidden; margin-top:40px; padding:42px 24px 54px; background:#032657; color:#fff } footer.site-footer::before, footer.site-footer::after{ position:absolute; border:1px solid rgba(35,118,218,.2); border-radius:50%; content:""; pointer-events:none } footer.site-footer::before{ width:460px; height:460px; right:-280px; top:-250px } footer.site-footer::after{ width:380px; height:380px; left:-300px; bottom:-230px } .footer-inner{ position:relative; z-index:1; width:min(1220px,100%); margin:0 auto } .footer-brandbar{ display:flex; align-items:center; justify-content:space-between; gap:32px; padding:0 10px 34px; border-bottom:1px solid rgba(91,174,255,.42) } .footer-grid{ display:grid; grid-template-columns:minmax(220px,1fr) minmax(300px,1.25fr) minmax(350px,1.3fr) minmax(220px,.85fr); gap:0; padding-top:38px } .f-col{ min-width:0; padding:0 38px } .f-col + .f-col{ border-left:1px solid rgba(68,143,229,.32) } .footer-brand{ padding-left:0 } .footer-logo{ width:min(410px,100%); height:auto; object-fit:contain; object-position:left center } .footer-column-title{ margin:0 0 24px; color:#fff; font:800 clamp(20px,1.6vw,26px)/1.1 "Nunito",ui-sans-serif } .f-list{ list-style:none; padding:0; margin:0 } .footer-menu{ display:grid; gap:2px } .footer-menu a{ display:flex; min-height:36px; align-items:center; gap:12px; padding:5px 10px; border-radius:6px; color:#f2f6fd; font:600 15px/1.2 "Source Sans 3",ui-sans-serif; transition:background .2s ease,color .2s ease } .footer-menu a:hover,.footer-menu a.is-current{ background:#0b4b91; color:#fff; text-decoration:none } .footer-menu svg{ width:25px; height:25px; flex:0 0 25px; fill:none; stroke:#71c7ff; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.7 } .footer-column h3{ margin:0; color:#fff; font:800 18px/1.2 "Nunito",ui-sans-serif } .footer-column a{ color:#eef4ff; font:500 14px/1.45 "Source Sans 3",ui-sans-serif } .footer-column a:hover{ color:#fff; text-decoration:underline } .footer-place-heading{ display:flex; align-items:flex-start; gap:12px } .footer-place-heading>div{ min-width:0 } .footer-place-heading h3{ margin:3px 0 10px } .footer-icon-circle{ display:grid; flex:0 0 42px; width:42px; height:42px; place-items:center; border-radius:50%; background:transparent; color:#71c7ff } .footer-icon-circle svg{ width:32px; height:32px; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.65 } .footer-contact-list{ display:grid; gap:12px; margin:24px 0 0 } .footer-contact-list a,.footer-unit-contact{ display:flex; align-items:center; gap:12px; font-weight:700 } .footer-contact-list small{ margin-left:2px; color:#d9e6fa; font-size:12px; font-weight:500 } .footer-contact-icon{ display:grid; flex:0 0 36px; width:36px; height:36px; place-items:center; border-radius:8px; background:transparent; color:#71c7ff } .footer-contact-icon svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.8 } .footer-contact-list .is-whatsapp .footer-contact-icon{ background:#08b967 } .footer-unit{ padding:0 0 24px; margin:0 0 24px; border-bottom:1px solid rgba(68,143,229,.45) } .footer-unit:last-child{ margin-bottom:0; border-bottom:0 } .footer-unit .footer-place-heading{ gap:12px } .footer-unit .footer-icon-circle{ flex-basis:42px; width:42px; height:42px } .footer-unit .footer-icon-circle svg{ width:30px; height:30px } .footer-unit h3{ font-size:18px } .footer-unit .footer-place-heading h3{ margin:1px 0 7px } .footer-unit-contact{ margin:9px 0 0; font-size:14px !important } .footer-unit-contact .footer-contact-icon{ flex-basis:36px; width:36px; height:36px; border-radius:8px } .footer-unit-contact .footer-contact-icon svg{ width:18px; height:18px } .footer-social>p{ margin:0 0 22px; color:#a7c2e5; font:500 15px/1.45 "Source Sans 3",ui-sans-serif; text-indent:0 } .socials{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; list-style:none; padding:0; margin:0 } .social-link{ display:flex; align-items:center; flex-direction:column; gap:10px; color:#eef4ff !important; font-size:14px !important; text-align:center } .social-link:hover{ text-decoration:none !important; transform:translateY(-2px) } .social-link svg{ display:block; width:42px; height:42px; padding:8px; border-radius:10px; fill:none; stroke:#fff; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.7 } .social-link--instagram svg{ background:linear-gradient(135deg,#ec4899,#f43f5e) } .social-link--facebook svg{ background:#1475df; stroke-width:1.4 } .social-link--youtube svg{ background:#ef1b27; stroke-width:1.5 } .footer-motto{ display:flex; align-items:center; gap:14px; color:#fff } .footer-motto svg{ width:60px; height:60px; flex:0 0 60px; fill:none; stroke:#28a3ff; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.4 } .footer-motto strong{ font:500 clamp(15px,1.2vw,19px)/1.3 "Source Sans 3",ui-sans-serif } @media (max-width:1100px){ .footer-grid{ grid-template-columns:1fr 1.2fr; gap:36px 0 } .footer-brand{ padding-left:0 } .f-col:nth-child(3){ border-left:0 } } @media (max-width:640px){ footer.site-footer{ padding:38px 18px 42px } .footer-brandbar{ align-items:flex-start; flex-direction:column; gap:24px; padding:0 0 28px } .footer-logo{ width:280px } .footer-motto{ gap:10px } .footer-motto svg{ width:48px; height:48px; flex-basis:48px } .footer-motto strong{ font-size:17px } .footer-grid{ grid-template-columns:1fr; gap:30px } .f-col,.f-col + .f-col{ padding:0; border-left:0 } .f-col + .f-col{ padding-top:30px; border-top:1px solid rgba(68,143,229,.32) } .footer-column-title{ margin-bottom:20px } .footer-menu a{ min-height:36px; font-size:14px } .footer-column a{ font-size:13px } .footer-social>p{ font-size:14px } } /* ========== Acessibilidade/Movimento reduzido ========== */ @media (prefers-reduced-motion: reduce){ .dropdown-menu,.sheet,.sheet-panel,.burger span,.burger span::before,.burger span::after,.modal, .parallax,.side-img,.foto-pola { transition:none !important; transform:none !important } } /* força a ordem no desktop */ .gentileza { display: grid; grid-template-columns: 1fr 1fr; } .gentileza img { order: 2; } .gentileza .text-block { order: 1; } /* no mobile mantém normal (empilha) */ @media (max-width: 960px) { .gentileza { grid-template-columns: 1fr; } .gentileza img, .gentileza .text-block { order: unset; } } /* ====== ENSINOS: GRID ====== */ .hero--segments{ min-height:0; display:grid; grid-template-columns:minmax(220px,.7fr) minmax(0,1.3fr); align-items:center; gap:clamp(30px,5vw,78px); padding:clamp(56px,7vw,88px) max(16px,calc((100vw - 1220px)/2)); background-image: linear-gradient(110deg,rgba(3,30,74,.98) 0%,rgba(3,30,74,.9) 48%,rgba(3,30,74,.67) 100%), url('../../img/banner/wallpaper.png'); background-position:center; background-size:cover; } .hero--segments .hero__wrap{ width:auto; max-width:330px; padding:0 } .hero--segments .s-title{ position:relative; max-width:10ch; margin:0; color:#fff; font-size:clamp(32px,4.2vw,54px); line-height:1.02; text-wrap:balance; } .hero--segments .s-title::after{ display:block; width:68px; height:5px; margin-top:24px; border-radius:999px; background:var(--orange); content:""; } .hero--segments .ensinos-grid{ width:auto; margin:0; padding:0; } .hero--segments .flip-card.ens-card{ aspect-ratio:16 / 9; border:1px solid rgba(255,255,255,.16); box-shadow:0 18px 34px rgba(0,0,0,.25); } .ensinos-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; width:min(100%, 1040px); margin:0 auto clamp(36px,5vw,72px); padding:0 16px; } @media (max-width:620px){ .ensinos-grid{ grid-template-columns:1fr; gap:16px } } /* ====== FLIP CARD BASE ====== */ .flip-card.ens-card{ position:relative; display:block; border-radius:18px; perspective:1200px; text-decoration:none; min-width:0; min-height:0; aspect-ratio:16 / 10; outline:0; overflow:visible; } .flip-card .flip-inner{ position:relative; width:100%; height:100%; min-height:100%; border-radius:inherit; transform-style:preserve-3d; transition:transform .6s cubic-bezier(.2,.7,.2,1); } .flip-card:hover .flip-inner, .flip-card:focus-within .flip-inner{ transform:rotateY(180deg) } .flip-front, .flip-back{ position:absolute; inset:0; border-radius:inherit; backface-visibility:hidden; overflow:hidden; display:flex; align-items:stretch; justify-content:stretch; } .flip-card:focus-visible{ outline:3px solid var(--orange); outline-offset:5px } /* ====== FRENTE: imagem + título ====== */ .card-media{ position:relative; flex:1; min-height:100%; display:block } .card-img{ width:100%; height:100%; object-fit:cover; display:block; transform:scale(1.02); /* leve zoom pra ficar premium */ } .front-overlay{ position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,.02) 0%, rgba(0,0,0,.35) 55%, rgba(0,0,0,.55) 100%); /* sutil borda conforme paleta navy */ box-shadow: inset 0 0 0 1px rgba(3,30,74,.06); } .card-title{ position:absolute; left:14px; right:14px; bottom:12px; display:flex; min-height:56px; align-items:center; gap:10px; margin:0; padding:9px 12px; font:900 22px/1.15 "Nunito", ui-sans-serif; color:#fff; background:linear-gradient(180deg, rgba(3,30,74,.55), rgba(3,30,74,.80)); border-left:3px solid var(--orange); border-radius:12px; text-shadow:0 2px 10px rgba(0,0,0,.35); letter-spacing:.01em; } .card-title__icon{ display:grid; flex:0 0 34px; width:34px; height:34px; place-items:center; border-radius:10px; background:var(--orange); color:var(--navy); text-shadow:none; } .card-title__icon svg{ width:21px; height:21px; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.7 } /* ====== VERSO: fundo de cor (sem imagem) ====== */ .flip-back{ transform:rotateY(180deg); padding:18px; gap:12px; flex-direction:column; justify-content:flex-end; border:1px solid rgba(3,30,74,.08); box-shadow:0 14px 30px rgba(0,0,0,.12); } .flip-back .card-text{ margin:0; text-indent:0; font-weight:600; line-height:1.55; color:var(--ink); } .flip-back .btn.sm{ align-self:flex-start; padding:9px 12px; border-radius:9px; font-size:13px; background:var(--orange); color:#111; border:0; box-shadow:0 10px 24px rgba(254,169,57,.28); transition:filter .2s ease, transform .12s ease; } .flip-back .btn.sm:active{ transform:translateY(1px) } .flip-back .btn.sm:hover{ filter:brightness(1.05) } /* ====== TEMAS (usam *apenas* sua paleta, em tints suaves) ====== Usamos camadas com alpha pra criar tons leves fiéis à paleta */ .ens-card.infantil .flip-back{ background: linear-gradient(0deg, rgba(254,169,57,.14), rgba(254,169,57,.14)), var(--paper); } .ens-card.fundamental .flip-back{ background: linear-gradient(0deg, rgba(3,30,74,.12), rgba(3,30,74,.12)), var(--paper); } .ens-card.medio .flip-back{ background: linear-gradient(0deg, rgba(8,37,82,.12), rgba(8,37,82,.12)), var(--paper); } .ens-card.after .flip-back{ background: linear-gradient(0deg, rgba(254,169,57,.10), rgba(254,169,57,.10)), var(--paper); } /* Micro interações */ .flip-card:hover .card-img{ transform:scale(1.04); transition:transform .5s ease } .flip-card:hover{ filter:saturate(1.02) } /* ========== RANKING ENEM 2025 ========== */ .enem-ranking{ margin:0; padding:clamp(48px,6vw,72px) 16px; color:#fff; overflow:hidden; background: linear-gradient(135deg, rgba(8,37,82,.86), rgba(3,30,74,.94)), url('../../img/banner/wallpaper.png') center / cover no-repeat; } .enem-ranking__inner{ width:min(100%,1220px); margin:0 auto; } .enem-ranking__intro{ max-width:720px; margin:0 auto clamp(24px,4vw,36px); text-align:center; } .enem-ranking__eyebrow{ margin:0 0 10px; color:var(--orange); font:800 12px/1.2 "Source Sans 3",ui-sans-serif; letter-spacing:.14em; text-indent:0; text-transform:uppercase; } .enem-ranking h2{ color:#fff; font:900 clamp(28px,4vw,52px)/.98 "futura-heavy-font","Nunito",ui-sans-serif; text-transform:uppercase; } .enem-ranking h2 strong{ color:var(--orange); font-weight:inherit } .enem-ranking__subtitle{ margin:14px 0 0; color:rgba(255,255,255,.88); font:600 clamp(16px,2.2vw,22px)/1.15 "Source Sans 3",ui-sans-serif; text-indent:0; text-transform:uppercase; } .enem-ranking__source{ margin:14px 0 0; color:rgba(255,255,255,.78); font:700 13px/1.3 "Source Sans 3",ui-sans-serif; letter-spacing:.08em; text-indent:0; text-transform:uppercase; } .enem-ranking__table-wrap{ width:min(100%,1040px); margin:0 auto; overflow-x:auto; -webkit-overflow-scrolling:touch; } .enem-ranking__table{ width:100%; min-width:680px; border-collapse:collapse; color:#fff; font-family:"Source Sans 3",ui-sans-serif; } .enem-ranking__table caption{ position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } .enem-ranking__table th, .enem-ranking__table td{ padding:10px 12px; border-bottom:1px solid rgba(255,255,255,.14); text-align:left; white-space:nowrap; } .enem-ranking__table thead th{ color:var(--orange); font:800 11px/1.2 "Source Sans 3",ui-sans-serif; letter-spacing:.08em; text-transform:uppercase; } .enem-ranking__table tbody th{ width:48px; color:rgba(255,255,255,.72); font-weight:700; } .enem-ranking__table tbody td{ font-size:15px; font-weight:600 } .enem-ranking__blurred{ display:inline-block; color:rgba(255,255,255,.9); filter:blur(4px); opacity:.82; user-select:none; } .enem-ranking__table tbody tr:not(.is-highlighted){ color:rgba(255,255,255,.76) } .enem-ranking__table tbody tr.is-highlighted{ color:#fff; background:rgba(254,169,57,.28); box-shadow:inset 4px 0 0 var(--orange); } .enem-ranking__table tbody tr.is-highlighted td, .enem-ranking__table tbody tr.is-highlighted th{ font-weight:800 } .enem-ranking__table tbody tr.is-highlighted th:first-child{ color:var(--orange) } .enem-ranking__table tbody tr:last-child th, .enem-ranking__table tbody tr:last-child td{ border-bottom:0 } .enem-results{ width:min(100%,1040px); margin:clamp(32px,4vw,48px) auto 0; padding-top:clamp(28px,4vw,40px); border-top:1px solid rgba(255,255,255,.22); } .enem-results__heading{ text-align:center } .enem-results h3{ color:#fff; font:900 clamp(24px,3.8vw,44px)/1 "futura-heavy-font","Nunito",ui-sans-serif; text-transform:uppercase; } .enem-geography{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:22px 0 34px; } .enem-geography__item{ display:flex; min-height:116px; padding:18px 16px; flex-direction:column; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.22); background:rgba(3,30,74,.58); text-align:center; } .enem-geography__item strong{ color:var(--orange); font:900 clamp(42px,6vw,68px)/.85 "futura-heavy-font","Nunito",ui-sans-serif; } .enem-geography__item span{ margin-top:10px; color:#fff; font:800 clamp(14px,1.8vw,19px)/1.1 "Source Sans 3",ui-sans-serif; text-transform:uppercase; } .enem-universities h3{ margin-bottom:16px; text-align:center; font-size:clamp(20px,2.6vw,30px) } .enem-universities__list{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px 18px; margin:0; padding:0; list-style:none; } .enem-universities__list li{ display:flex; min-width:0; min-height:64px; align-items:center; gap:10px; padding:4px 8px; border:0; background:transparent; } .enem-university__logo{ display:block; width:48px; height:48px; flex:0 0 48px; padding:0; border-radius:0; background:transparent; object-fit:contain; } .enem-universities__list li > span:last-child{ min-width:0; display:flex; flex-direction:column; gap:3px } .enem-universities__list strong{ color:var(--orange); font:800 13px/1.1 "Source Sans 3",ui-sans-serif; text-transform:uppercase; } .enem-universities__list small{ color:#fff; font:700 15px/1.1 "Source Sans 3",ui-sans-serif; } @media (max-width:760px){ .enem-ranking__table-wrap{ overflow:visible } .enem-ranking__table{ min-width:0; display:block } .enem-ranking__table thead{ display:none } .enem-ranking__table tbody{ display:grid; gap:8px } .enem-ranking__table tbody tr{ display:grid; grid-template-columns:30px minmax(0,1fr) auto; grid-template-areas: "rank school score" "rank city students"; gap:4px 10px; padding:11px 12px; border:1px solid rgba(255,255,255,.18); border-radius:6px; background:rgba(3,30,74,.45); } .enem-ranking__table tbody tr.is-highlighted{ border-color:rgba(254,169,57,.55); background:rgba(254,169,57,.24); } .enem-ranking__table th, .enem-ranking__table td{ width:auto; min-width:0; padding:0; border:0; white-space:normal; } .enem-ranking__table th{ grid-area:rank; align-self:start; padding-top:1px; } .enem-ranking__table td:nth-of-type(1){ grid-area:school; overflow-wrap:anywhere; font-size:15px; } .enem-ranking__table td:nth-of-type(2){ grid-area:city; color:rgba(255,255,255,.78); font-size:13px; } .enem-ranking__table td:nth-of-type(3){ grid-area:score; text-align:right; font-size:16px; font-weight:800; } .enem-ranking__table td:nth-of-type(4){ grid-area:students; color:rgba(255,255,255,.74); font-size:12px; text-align:right; } .enem-ranking__table td:nth-of-type(2)::before, .enem-ranking__table td:nth-of-type(3)::before, .enem-ranking__table td:nth-of-type(4)::before{ margin-right:4px; color:rgba(255,255,255,.58); font:700 10px/1 "Source Sans 3",ui-sans-serif; letter-spacing:.04em; text-transform:uppercase; } .enem-ranking__table td:nth-of-type(2)::before{ content:"Cidade" } .enem-ranking__table td:nth-of-type(3)::before{ content:"Média" } .enem-ranking__table td:nth-of-type(4)::before{ content:"Alunos" } } @media (max-width:900px){ .hero--segments{ grid-template-columns:1fr; gap:34px; } .hero--segments .hero__wrap{ max-width:620px } .hero--segments .s-title{ max-width:18ch } .hero--segments .ensinos-grid{ width:min(100%,720px) } } /* Acessibilidade: menos movimento */ @media (prefers-reduced-motion:reduce){ .flip-inner{ transition:none } .flip-card:hover .flip-inner, .flip-card:focus-within .flip-inner{ transform:none } .flip-card:hover .card-img{ transform:none } } /* ========== GINCANA CULTURAL: GALERIA ========== */ .gincana-feature{ position:relative; max-width:1280px; padding:clamp(56px,7vw,84px) clamp(16px,4vw,40px); overflow:hidden; isolation:isolate; background:#f4faf9; } .gincana-feature::before{ content:""; position:absolute; z-index:-1; top:-18%; left:-12%; width:48%; height:74%; border-radius:0 0 55% 0; background:#e4f2ef; transform:rotate(-5deg); } .gincana-feature::after{ content:""; position:absolute; z-index:-1; right:7%; bottom:14%; width:94px; height:5px; border-radius:999px; background:var(--orange); transform:rotate(-4deg); } .gincana-feature .s-cols{ grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr); gap:clamp(32px,5vw,72px); align-items:center; } .gincana-feature .content{ position:relative; z-index:1 } .gincana-feature .s-title{ margin-bottom:10px; font-size:clamp(36px,4vw,52px); line-height:1.04 } .gincana-feature .s-sub{ margin-bottom:24px; font-size:19px } .gincana-feature .text-block p{ max-width:50ch; text-indent:0; line-height:1.7 } .gincana-feature .b-actions{ margin-top:28px } .gincana-feature .btn--accent{ min-width:220px; justify-content:center; padding:14px 20px } .gincana-gallery{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); grid-template-rows:auto 170px; gap:14px; width:100%; max-width:720px; } .gincana-gallery figure{ margin:0; min-width:0; overflow:hidden; border-radius:18px; background:var(--navy); box-shadow:0 16px 30px rgba(3,30,74,.14) } .gincana-gallery figure img{ width:100%; height:100%; display:block; object-fit:cover; transition:transform .5s ease } .gincana-gallery__main{ grid-column:1 / -1; aspect-ratio:16 / 6; } .gincana-gallery__main img{ object-position:center 52% } .gincana-gallery__secondary{ grid-column:1; min-height:0 } .gincana-gallery__secondary img{ object-position:center 44% } .gincana-gallery__note{ grid-column:2; display:flex; min-width:0; flex-direction:column; justify-content:center; gap:6px; padding:20px; border-radius:18px; background:var(--navy); color:#fff; box-shadow:0 16px 30px rgba(3,30,74,.14); } .gincana-gallery__note span{ color:rgba(255,255,255,.72); font:600 14px/1.3 "Source Sans 3",ui-sans-serif } .gincana-gallery__note strong{ color:#fff; font:900 clamp(20px,2.4vw,29px)/1.05 "Nunito",ui-sans-serif } .gincana-gallery__note .gincana-gallery__eyebrow{ color:var(--orange); font:800 11px/1.2 "Source Sans 3",ui-sans-serif; letter-spacing:.12em; text-transform:uppercase } .gincana-gallery:hover figure img{ transform:scale(1.025) } @media (max-width:960px){ .gincana-feature .s-cols{ grid-template-columns:1fr; gap:38px } .gincana-gallery{ max-width:none } } @media (max-width:620px){ .enem-geography{ grid-template-columns:1fr; gap:10px; margin-bottom:36px } .enem-geography__item{ min-height:102px; padding:16px } .enem-geography__item strong{ font-size:48px } .enem-universities__list{ grid-template-columns:1fr 1fr; gap:10px } .enem-universities__list li{ min-height:64px; padding:4px } .enem-university__logo{ width:44px; height:44px; flex-basis:44px; padding:0 } .enem-universities__list small{ font-size:15px } .flip-card.ens-card{ min-width:0; min-height:0; aspect-ratio:16 / 9 } .card-title{ left:12px; right:12px; bottom:11px; font-size:20px } .enem-ranking{ padding:48px 16px 56px } .gincana-feature{ padding:52px 16px 64px } .gincana-feature .s-title{ font-size:36px } .gincana-gallery{ grid-template-columns:1fr; grid-template-rows:auto auto auto; gap:12px } .gincana-gallery__main{ grid-column:1; aspect-ratio:16 / 8 } .gincana-gallery__secondary{ grid-column:1; aspect-ratio:4 / 3 } .gincana-gallery__note{ grid-column:1; min-height:144px } .gincana-feature .btn--accent{ width:100% } } .media-side img.side-float { display: block; width: 85%; height: auto; margin-right: 15%; /* máscara que faz o fade na lateral direita */ -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,1) 80%, rgba(0,0,0,0) 100%); -webkit-mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-image: linear-gradient(to right, rgba(0,0,0,1) 80%, rgba(0,0,0,0) 100%); mask-repeat: no-repeat; mask-size: 100% 100%; } .fade-right { position: relative; display: inline-block; overflow: hidden; } .fade-right::after { content: ""; position: absolute; top: 0; right: 0; width: 40%; /* controla onde começa o fade */ height: 100%; background: linear-gradient(to right, rgba(255,255,255,0) 0%, #fff 100%); } .edital-group { margin-bottom: 2rem; } .edital-list { list-style: none; padding: 0; } .edital-list li { margin: 0.5rem 0; } .edital-list a { display: flex; align-items: center; gap: 6px; text-decoration: none; color: var(--text); font-weight: 500; } .edital-list .edital-item { display: flex; align-items: center; gap: 6px; color: var(--text); font-weight: 500; } .edital-list a:hover { color: var(--orange); } /* ============================================================ MOBILE LOGO + INSCREVA-SE BUTTON ============================================================ */ /* Desktop: hide mobile-only elements */ .brand-logo--mobile, .nav-mobile-cta, .nav-mobile-conteudos { display: none; } /* Mobile: hide desktop logo, show mobile logo + CTA */ @media (max-width: 980px) { .brand-logo--desktop { display: none; } .brand-logo--mobile { display: flex; align-items: center; } .logo--mobile { height: 36px; width: auto; image-rendering: -webkit-optimize-contrast; } .nav-mobile-conteudos { display: inline-flex; align-items: center; justify-content: center; padding: 8px 14px; background: transparent; color: #fff; font: 700 12px/1 "futura-medium", "Source Sans 3", ui-sans-serif; letter-spacing: .02em; border: 1.5px solid rgba(255,255,255,.6); border-radius: 8px; text-decoration: none; white-space: nowrap; flex-shrink: 0; transition: background .2s ease, color .2s ease, transform .12s ease; } .nav-mobile-conteudos:hover { background: rgba(255,255,255,.15); color: #fff; transform: translateY(-1px); } .nav-mobile-conteudos:active { transform: translateY(1px); } .nav-mobile-cta { display: inline-flex; align-items: center; justify-content: center; padding: 8px 16px; background: var(--orange); color: var(--navy); font: 800 12px/1 "futura-medium", "Source Sans 3", ui-sans-serif; letter-spacing: .02em; border-radius: 8px; text-decoration: none; white-space: nowrap; flex-shrink: 0; box-shadow: 0 4px 12px rgba(254, 169, 57, .3); transition: background .2s ease, transform .12s ease; } .nav-mobile-cta:hover { background: #ffc064; transform: translateY(-1px); } .nav-mobile-cta:active { transform: translateY(1px); } } /* Small screens: tighten spacing */ @media (max-width: 620px) { .logo--mobile { height: 30px; } .nav-mobile-conteudos { padding: 7px 11px; font-size: 11px; border-radius: 7px; } .nav-mobile-cta { padding: 7px 12px; font-size: 11px; border-radius: 7px; } }