{"id":4782,"date":"2026-03-06T12:47:52","date_gmt":"2026-03-06T12:47:52","guid":{"rendered":"https:\/\/unifacp.edu.br\/Home-page\/?page_id=4782"},"modified":"2026-03-06T13:32:33","modified_gmt":"2026-03-06T13:32:33","slug":"vitrine-ciee","status":"publish","type":"page","link":"https:\/\/unifacp.edu.br\/Home-page\/vitrine-ciee\/","title":{"rendered":"Vitrine CIEE"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"4782\" class=\"elementor elementor-4782\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2dfc415 e-flex e-con-boxed e-con e-parent\" data-id=\"2dfc415\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d1d10c3 elementor-widget elementor-widget-shortcode\" data-id=\"d1d10c3\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">      <style>\/* \u2500\u2500 Paleta \u2500\u2500 *\/\r\n:root {\r\n  --ciee-blue:    #091946;\r\n  --ciee-blue-90: rgba(9,25,70,.90);\r\n  --ciee-blue-10: rgba(9,25,70,.08);\r\n  --ciee-blue-20: rgba(9,25,70,.15);\r\n  --ciee-lav:     #EBEBF2;\r\n  --ciee-lav-d:   #d8d8e8;\r\n  --ciee-black:   #000000;\r\n  --ciee-text:    #0d1630;\r\n  --ciee-muted:   rgba(9,25,70,.58);\r\n  --ciee-bg:      #ffffff;\r\n  --ciee-soft:    #f5f5fa;\r\n  --ciee-border:  #dcdce8;\r\n  --ciee-shadow:  0 16px 40px rgba(9,25,70,.10);\r\n  --ciee-radius:  16px;\r\n}\r\n\r\n\/* \u2500\u2500 Wrapper \u2500\u2500 *\/\r\n.ciee-vitrine {\r\n  max-width: 1100px;\r\n  margin: 0 auto;\r\n  color: var(--ciee-text);\r\n  font-family: inherit;\r\n}\r\n\r\n\/* \u2500\u2500 Hero \/ painel de filtros \u2500\u2500 *\/\r\n.ciee-hero {\r\n  background: linear-gradient(135deg, var(--ciee-blue) 0%, #162966 100%);\r\n  border-radius: calc(var(--ciee-radius) + 4px);\r\n  padding: 28px 28px 22px;\r\n  box-shadow: var(--ciee-shadow);\r\n  color: #fff;\r\n}\r\n.ciee-hero h2 {\r\n  font-size: 22px;\r\n  font-weight: 900;\r\n  letter-spacing: -.02em;\r\n  margin: 0 0 6px;\r\n  color: #fff;\r\n}\r\n.ciee-hero p {\r\n  margin: 0;\r\n  color: rgba(255,255,255,.72);\r\n  font-size: 14px;\r\n}\r\n\r\n\/* \u2500\u2500 Filtros \u2500\u2500 *\/\r\n.ciee-filtros {\r\n  margin-top: 22px;\r\n  display: grid;\r\n  grid-template-columns: 2fr 1fr 1fr auto;\r\n  gap: 12px;\r\n  align-items: end;\r\n}\r\n.ciee-field label {\r\n  display: block;\r\n  font-size: 11.5px;\r\n  font-weight: 700;\r\n  letter-spacing: .04em;\r\n  text-transform: uppercase;\r\n  color: rgba(255,255,255,.65);\r\n  margin: 0 0 7px;\r\n}\r\n.ciee-field input,\r\n.ciee-field select {\r\n  width: 100%;\r\n  padding: 11px 14px;\r\n  border: 1.5px solid rgba(255,255,255,.18);\r\n  border-radius: 12px;\r\n  background: rgba(255,255,255,.10);\r\n  color: #fff;\r\n  font-size: 14px;\r\n  outline: none;\r\n  transition: border-color .18s, background .18s, box-shadow .18s;\r\n  -webkit-appearance: none;\r\n  appearance: none;\r\n  box-sizing: border-box;\r\n}\r\n.ciee-field input::placeholder { color: rgba(255,255,255,.45); }\r\n.ciee-field select option       { background: var(--ciee-blue); color: #fff; }\r\n.ciee-field input:focus,\r\n.ciee-field select:focus {\r\n  border-color: rgba(255,255,255,.55);\r\n  background: rgba(255,255,255,.16);\r\n  box-shadow: 0 0 0 3px rgba(255,255,255,.12);\r\n}\r\n\r\n\/* Wrapper do campo com sugest\u00f5es *\/\r\n.ciee-sug { position: relative; }\r\n\r\n\/* \u2500\u2500 Sugest\u00f5es ABAIXO do campo \u2500\u2500 *\/\r\n.ciee-sugbox {\r\n  position: absolute;\r\n  z-index: 999;\r\n  left: 0;\r\n  right: 0;\r\n  top: calc(100% + 6px);\r\n  background: #fff;\r\n  border: 1.5px solid var(--ciee-border);\r\n  border-radius: 14px;\r\n  box-shadow: 0 20px 50px rgba(9,25,70,.18);\r\n  overflow: hidden;\r\n  animation: cieeFadeDown .14s ease;\r\n}\r\n@keyframes cieeFadeDown {\r\n  from { opacity: 0; transform: translateY(-6px); }\r\n  to   { opacity: 1; transform: translateY(0); }\r\n}\r\n.ciee-sugit {\r\n  padding: 11px 14px;\r\n  cursor: pointer;\r\n  font-size: 13.5px;\r\n  color: var(--ciee-text);\r\n  transition: background .1s;\r\n  border-bottom: 1px solid var(--ciee-lav);\r\n}\r\n.ciee-sugit:last-child   { border-bottom: none; }\r\n.ciee-sugit:hover,\r\n.ciee-sugit.is-active    {\r\n  background: var(--ciee-blue-10);\r\n  color: var(--ciee-blue);\r\n  font-weight: 600;\r\n}\r\n\r\n\/* \u2500\u2500 Bot\u00e3o Buscar \/ Ver mais \u2500\u2500 *\/\r\n.ciee-btn {\r\n  padding: 11px 20px;\r\n  border: 0;\r\n  border-radius: 12px;\r\n  cursor: pointer;\r\n  background: var(--ciee-lav);\r\n  color: var(--ciee-blue);\r\n  font-size: 14px;\r\n  font-weight: 900;\r\n  letter-spacing: .01em;\r\n  white-space: nowrap;\r\n  transition: transform .08s, background .15s, color .15s, box-shadow .15s;\r\n  box-shadow: 0 4px 14px rgba(9,25,70,.18);\r\n}\r\n.ciee-btn:hover {\r\n  background: var(--ciee-blue);\r\n  color: var(--ciee-lav);\r\n  box-shadow: 0 6px 20px rgba(9,25,70,.30);\r\n}\r\n.ciee-btn:active { transform: translateY(1px); }\r\n\r\n\/* remove qualquer \"rosa\" do estado focus padr\u00e3o do browser *\/\r\n.ciee-btn:focus,\r\n.ciee-btn:focus-visible {\r\n  background: var(--ciee-lav);\r\n  color: var(--ciee-blue);\r\n  box-shadow: 0 0 0 3px rgba(9,25,70,.20);\r\n  outline: none;\r\n}\r\n\r\n.ciee-btn-outline {\r\n  background: transparent;\r\n  border: 2px solid var(--ciee-blue);\r\n  color: var(--ciee-blue);\r\n  box-shadow: none;\r\n  padding: 10px 24px;\r\n  transition: background .15s, color .15s, box-shadow .15s;\r\n}\r\n.ciee-btn-outline:hover {\r\n  background: var(--ciee-blue);\r\n  color: var(--ciee-lav);\r\n}\r\n.ciee-btn-outline:focus,\r\n.ciee-btn-outline:focus-visible {\r\n  background: transparent;\r\n  color: var(--ciee-blue);\r\n  box-shadow: 0 0 0 3px rgba(9,25,70,.20);\r\n  outline: none;\r\n}\r\n\r\n\/* \u2500\u2500 Toolbar resultado \u2500\u2500 *\/\r\n.ciee-toolbar {\r\n  margin-top: 18px;\r\n  display: flex;\r\n  justify-content: space-between;\r\n  align-items: center;\r\n  gap: 12px;\r\n}\r\n.ciee-count {\r\n  font-size: 13px;\r\n  color: rgba(255,255,255,.65);\r\n}\r\n\r\n\/* \u2500\u2500 Mensagens \u2500\u2500 *\/\r\n.ciee-msg {\r\n  margin-top: 16px;\r\n  padding: 18px 20px;\r\n  border-radius: var(--ciee-radius);\r\n  border: 1.5px solid var(--ciee-border);\r\n  background: var(--ciee-bg);\r\n  font-size: 14px;\r\n}\r\n.ciee-msg.is-soft { background: var(--ciee-soft); color: var(--ciee-muted); }\r\n.ciee-msg.is-err  { border-color: #f0d0d0; background: #fff8f8; color: #6b1010; }\r\n\r\n\/* \u2500\u2500 Grid de vagas \u2500\u2500 *\/\r\n.ciee-grid {\r\n  margin-top: 20px;\r\n  display: grid;\r\n  grid-template-columns: repeat(3, minmax(0, 1fr));\r\n  gap: 14px;\r\n}\r\n\r\n\/* \u2500\u2500 Card \u2500\u2500 *\/\r\n.ciee-card {\r\n  border: 1.5px solid var(--ciee-border);\r\n  background: var(--ciee-bg);\r\n  border-radius: var(--ciee-radius);\r\n  padding: 18px;\r\n  box-shadow: 0 6px 20px rgba(9,25,70,.06);\r\n  transition: transform .14s, box-shadow .14s, border-color .14s;\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 0;\r\n  min-height: 200px;\r\n}\r\n.ciee-card:hover {\r\n  transform: translateY(-3px);\r\n  box-shadow: 0 20px 44px rgba(9,25,70,.12);\r\n  border-color: var(--ciee-blue-20);\r\n}\r\n\r\n\/* Badge de tipo *\/\r\n.ciee-badge {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 7px;\r\n  font-size: 11px;\r\n  font-weight: 800;\r\n  letter-spacing: .06em;\r\n  text-transform: uppercase;\r\n  padding: 5px 11px;\r\n  border-radius: 999px;\r\n  background: var(--ciee-blue-10);\r\n  color: var(--ciee-blue);\r\n  width: fit-content;\r\n}\r\n.ciee-badge-dot {\r\n  width: 6px;\r\n  height: 6px;\r\n  border-radius: 50%;\r\n  background: var(--ciee-blue);\r\n  flex-shrink: 0;\r\n}\r\n\r\n.ciee-card h3 {\r\n  font-size: 15px;\r\n  line-height: 1.3;\r\n  margin: 12px 0 5px;\r\n  font-weight: 900;\r\n  letter-spacing: -.01em;\r\n  color: var(--ciee-text);\r\n}\r\n.ciee-meta {\r\n  font-size: 13px;\r\n  color: var(--ciee-muted);\r\n  margin: 0 0 5px;\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 5px;\r\n}\r\n.ciee-bolsa { margin-bottom: 0; }\r\n.ciee-icon  { width: 14px; height: 14px; flex-shrink: 0; color: var(--ciee-muted); }\r\n\r\n.ciee-actions {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  gap: 10px;\r\n  margin-top: auto;   \/* garante que \"Inscrever-se\" v\u00e1 para o rodap\u00e9 do card *\/\r\n  padding-top: 12px;\r\n  border-top: 1px solid var(--ciee-lav);\r\n}\r\n\r\n\/* Link \"Inscrever-se\" *\/\r\n.ciee-link {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 6px;\r\n  text-decoration: none;\r\n  font-size: 13.5px;\r\n  font-weight: 900;\r\n  color: var(--ciee-blue);\r\n  transition: gap .15s, color .15s;\r\n}\r\n.ciee-link:hover {\r\n  gap: 9px;\r\n  color: #A30F18; \/* vermelho no hover *\/\r\n}\r\n.ciee-arrow { width: 15px; height: 15px; }\r\n\r\n.ciee-mini {\r\n  font-size: 11.5px;\r\n  color: var(--ciee-muted);\r\n  border: 1px solid var(--ciee-border);\r\n  background: var(--ciee-soft);\r\n  padding: 4px 10px;\r\n  border-radius: 999px;\r\n}\r\n\r\n\/* \u2500\u2500 Skeleton \u2500\u2500 *\/\r\n.ciee-skeleton {\r\n  border-radius: var(--ciee-radius);\r\n  height: 160px;\r\n  background: linear-gradient(90deg, var(--ciee-lav) 25%, #f5f5fa 50%, var(--ciee-lav) 75%);\r\n  background-size: 200% 100%;\r\n  animation: cieeShimmer 1.3s infinite;\r\n}\r\n@keyframes cieeShimmer {\r\n  0%   { background-position: 200% 0; }\r\n  100% { background-position: -200% 0; }\r\n}\r\n\r\n\/* \u2500\u2500 Bot\u00e3o ver mais \u2500\u2500 *\/\r\n.ciee-more-wrap {\r\n  margin-top: 20px;\r\n  display: flex;\r\n  justify-content: center;\r\n}\r\n\r\n\/* \u2500\u2500 Responsivo \u2500\u2500 *\/\r\n@media (max-width: 1020px) {\r\n  .ciee-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }\r\n}\r\n\r\n@media (max-width: 768px) {\r\n  .ciee-hero    { padding: 20px 16px 18px; }\r\n  .ciee-filtros {\r\n    grid-template-columns: 1fr;\r\n    gap: 10px;\r\n  }\r\n  .ciee-btn     { width: 100%; justify-content: center; }\r\n  .ciee-grid    { grid-template-columns: 1fr; }\r\n  .ciee-toolbar { flex-direction: column; align-items: flex-start; }\r\n}\r\n\r\n@media (max-width: 480px) {\r\n  .ciee-hero h2 { font-size: 18px; }\r\n  .ciee-card    { padding: 14px; }\r\n}<\/style>\r\n\r\n      <div class=\"ciee-vitrine\" data-version=\"0.4.3\">\r\n        <div class=\"ciee-hero\">\r\n          <h2>Vitrine de Vagas<\/h2>\r\n          <p>Encontre oportunidades de est\u00e1gio e aprendizagem por cidade, n\u00edvel e \u00e1rea.<\/p>\r\n\r\n          <div class=\"ciee-filtros\">\r\n\r\n            <!-- Cidade com autocomplete -->\r\n            <div class=\"ciee-field ciee-sug\">\r\n              <label for=\"ciee-city\">Cidade<\/label>\r\n              <input\r\n                id=\"ciee-city\"\r\n                type=\"text\"\r\n                placeholder=\"Digite a cidade (ex.: S\u00e3o Paulo)\"\r\n                autocomplete=\"off\"\r\n                aria-label=\"Buscar cidade\"\r\n                aria-autocomplete=\"list\"\r\n                aria-controls=\"ciee-sugestoes\"\r\n              >\r\n              <!-- Sugest\u00f5es renderizadas ABAIXO pelo JS -->\r\n              <div id=\"ciee-sugestoes\" role=\"listbox\"><\/div>\r\n            <\/div>\r\n\r\n            <!-- N\u00edvel de ensino -->\r\n            <div class=\"ciee-field\">\r\n              <label for=\"ciee-nivel\">N\u00edvel<\/label>\r\n              <select id=\"ciee-nivel\" aria-label=\"N\u00edvel de ensino\">\r\n                <option value=\"SU\">Superior<\/option>\r\n                <option value=\"TE\">T\u00e9cnico<\/option>\r\n                <option value=\"EM\">Ensino M\u00e9dio<\/option>\r\n                <option value=\"EF\">Ensino Fundamental<\/option>\r\n              <\/select>\r\n            <\/div>\r\n\r\n            <!-- \u00c1rea profissional -->\r\n            <div class=\"ciee-field\">\r\n              <label for=\"ciee-area\">\u00c1rea<\/label>\r\n              <select id=\"ciee-area\" aria-label=\"\u00c1rea profissional\">\r\n                <option value=\"\">Todas<\/option>\r\n              <\/select>\r\n            <\/div>\r\n\r\n            <!-- Bot\u00e3o buscar -->\r\n            <button id=\"ciee-buscar\" class=\"ciee-btn\" type=\"button\" aria-label=\"Buscar vagas\">\r\n              Buscar\r\n            <\/button>\r\n\r\n          <\/div><!-- .ciee-filtros -->\r\n\r\n          <div class=\"ciee-toolbar\">\r\n            <div class=\"ciee-count\" id=\"ciee-count\">Pronto para buscar.<\/div>\r\n            <div class=\"ciee-count\">Selecione a cidade na lista para ativar a busca.<\/div>\r\n          <\/div>\r\n        <\/div><!-- .ciee-hero -->\r\n\r\n        <div id=\"ciee-out\"><\/div>\r\n      <\/div><!-- .ciee-vitrine -->\r\n    <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-5f3d279 e-flex e-con-boxed e-con e-parent\" data-id=\"5f3d279\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-858017d e-flex e-con-boxed e-con e-parent\" data-id=\"858017d\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-67b956c e-flex e-con-boxed e-con e-parent\" data-id=\"67b956c\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-5fb9fc5 e-flex e-con-boxed e-con e-parent\" data-id=\"5fb9fc5\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0a148c7 elementor-widget elementor-widget-spacer\" data-id=\"0a148c7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6e19622 elementor-widget elementor-widget-spacer\" data-id=\"6e19622\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-482ac68 elementor-widget elementor-widget-spacer\" data-id=\"482ac68\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-4782","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/unifacp.edu.br\/Home-page\/wp-json\/wp\/v2\/pages\/4782","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/unifacp.edu.br\/Home-page\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/unifacp.edu.br\/Home-page\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/unifacp.edu.br\/Home-page\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/unifacp.edu.br\/Home-page\/wp-json\/wp\/v2\/comments?post=4782"}],"version-history":[{"count":0,"href":"https:\/\/unifacp.edu.br\/Home-page\/wp-json\/wp\/v2\/pages\/4782\/revisions"}],"wp:attachment":[{"href":"https:\/\/unifacp.edu.br\/Home-page\/wp-json\/wp\/v2\/media?parent=4782"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}