/* [cfp_atalhos] — "O que você procura?" da página inicial. Cores do cabeçalho (--cfp-*): segue o modo claro/escuro sozinho. */
.cfpi { --i-cartao: #ffffff; --i-fundo2: #f4f6f7; --i-sombra: 0 1px 2px rgba(16, 34, 44, 0.05), 0 10px 30px rgba(16, 34, 44, 0.07);
    box-sizing: border-box; max-width: 1240px; margin: 0 auto 28px; font-family: 'Inter', 'Segoe UI', Roboto, sans-serif; color: var(--cfp-tinta); line-height: 1.45; }
html.ceclimar-dark-mode .cfpi { --i-cartao: #1c1c1c; --i-fundo2: #242424; --i-sombra: 0 0 0 1px rgba(255, 255, 255, 0.06); }
.cfpi *, .cfpi *::before, .cfpi *::after { box-sizing: border-box; }
.cfpi a { text-decoration: none !important; color: inherit; }
.cfpi p, .cfpi h2, .cfpi ol { margin: 0; padding: 0; }
.cfpi svg { display: block; flex: none; }
.cfpi .cfpi-h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; font: 700 clamp(1.4rem, 2.4vw, 1.8rem)/1.2 'Fraunces', Georgia, serif; color: var(--cfp-tinta); }
.cfpi-h2::before { content: ''; flex: none; width: 10px; height: 10px; margin-right: 4px; border-radius: 50%; background: var(--cfp-agua); box-shadow: 4px 0 0 var(--cfp-coral); }

/* ---------- 2. O que você procura ---------- */
/* sem ícones: cada bloco tem uma ilustração viva do próprio assunto (foto, dado real, ondas, rede, editais passando) */
.cfpi-atalhos { margin-top: 44px; }
.cfpi-atalhos:first-child { margin-top: 0; }
.cfpi-bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-areas: "museu museu pesq pesq" "museu museu bio ext" "edit edit cont cont"; gap: 14px; }
.cfpi-tile { position: relative; display: flex; flex-direction: column; gap: 4px; min-height: 178px; padding: 22px; border-radius: 22px; background: var(--i-cartao); box-shadow: var(--i-sombra); overflow: hidden; isolation: isolate; transition: transform 0.25s ease, box-shadow 0.25s ease; }
a.cfpi-tile:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(16, 34, 44, 0.06), 0 18px 40px rgba(16, 34, 44, 0.14); }
html.ceclimar-dark-mode a.cfpi-tile:hover { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 18px 40px rgba(0, 0, 0, 0.5); }
.cfpi-tile b { position: relative; z-index: 2; font: 700 1.3rem/1.2 'Fraunces', Georgia, serif; }
.cfpi-tile-txt { position: relative; z-index: 2; font-size: 0.86rem; color: var(--cfp-suave); }
.cfpi-seta { position: absolute; z-index: 2; right: 20px; top: 20px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(255, 255, 255, 0.55); font-weight: 700; color: var(--cfp-tinta); backdrop-filter: blur(6px); transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease; }
html.ceclimar-dark-mode .cfpi-seta { background: rgba(255, 255, 255, 0.1); color: #fff; }
a.cfpi-tile:hover .cfpi-seta { transform: translateX(3px); background: var(--cfp-coral); color: #fff; }

/* museu: a foto */
.cfpi-tile-museu { grid-area: museu; justify-content: flex-end; min-height: 370px; padding: 28px; }
.cfpi .cfpi-tile-museu { color: #fff !important; }
.cfpi-tile-museu::before { content: ''; position: absolute; inset: 0; z-index: -2; background: var(--foto) 62% 40% / cover no-repeat; transition: transform 0.8s ease; }
.cfpi-tile-museu::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(6, 22, 34, 0.92) 0%, rgba(6, 22, 34, 0.55) 38%, rgba(6, 22, 34, 0) 68%); }
.cfpi-tile-museu:hover::before { transform: scale(1.04); }
.cfpi-tile-museu > * { position: relative; z-index: 1; }
.cfpi-tile-museu .cfpi-tile-rotulo { position: absolute; top: 22px; left: 24px; padding: 6px 12px; border-radius: 999px; background: rgba(6, 22, 34, 0.55); backdrop-filter: blur(6px); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.cfpi-tile-museu b { font-size: clamp(1.7rem, 2.8vw, 2.4rem); text-shadow: 0 2px 16px rgba(0, 0, 0, 0.35); }
.cfpi-tile-museu .cfpi-tile-txt { max-width: 38ch; color: rgba(255, 255, 255, 0.85); }
.cfpi-tile-pe { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.cfpi-tile-museu .cfpi-seta { position: static; background: rgba(255, 255, 255, 0.18); color: #fff; }
.cfpi-pilula { padding: 9px 18px; border-radius: 999px; background: #fff; color: #0e2a3f; font-weight: 800; font-size: 0.88rem; }

/* ciência, biologia marinha e extensão: fotos, como o museu (texto embaixo, sobre o escurecido) */
.cfpi-tile-pesq { grid-area: pesq; --pos: 50% 42%; } .cfpi-tile-bio { grid-area: bio; } .cfpi-tile-ext { grid-area: ext; }
.cfpi .cfpi-tile-foto { color: #fff !important; }
.cfpi-tile-foto::before { content: ''; position: absolute; inset: 0; z-index: -2; background: var(--foto) var(--pos, center) / cover no-repeat; transition: transform 0.8s ease; }
.cfpi-tile-foto { justify-content: flex-end; }
.cfpi-tile-foto::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(6, 22, 34, 0.88) 0%, rgba(6, 22, 34, 0.45) 42%, rgba(6, 22, 34, 0) 72%); }
.cfpi-tile-foto:hover::before { transform: scale(1.05); }
.cfpi-tile-foto .cfpi-tile-txt { color: rgba(255, 255, 255, 0.85); }
.cfpi-tile-foto .cfpi-seta { background: rgba(255, 255, 255, 0.18); color: #fff; }
.cfpi-tile-bio { --pos: 50% 18%; }
.cfpi-tile-ext { --pos: 68% 45%; }

/* editais: um por vez, com "Inscrições abertas" (verde) ou "Inscrições encerradas" */
.cfpi-tile-edit { grid-area: edit; }
/* editais e perguntas lado a lado: o item que passa logo abaixo do título, o botão embaixo (os dois blocos alinhados) */
.cfpi-tile-edit .cfpi-editais { margin-top: 14px; height: 4.2em; }
/* perguntas: rótulo + até 3 linhas de pergunta (as longas não ficam mais cortadas no meio da linha) */
.cfpi-editais.cfpi-perguntas { margin-top: 14px; height: calc(12px + 1.25rem + 3 * 0.95rem * 1.35); }
.cfpi-tile-pe-btn { position: relative; z-index: 1; display: flex; margin-top: auto; padding-top: 14px; }
.cfpi-tile-edit:hover .cfpi-pilula-faq { background: var(--cfp-agua); color: #fff !important; }
.cfpi-editais { position: relative; z-index: 1; display: block; height: 3.6em; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--cfp-linha); overflow: hidden; }
.cfpi-edital { position: absolute; left: 0; right: 0; top: 12px; display: block; font: 600 0.95rem/1.35 'Fraunces', Georgia, serif; color: var(--cfp-tinta);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transform: translateY(80%); transition: opacity 0.5s ease, transform 0.5s ease; }
.cfpi-edital.is-ativa { opacity: 1; transform: none; }
.cfpi-edital.is-saindo { opacity: 0; transform: translateY(-80%); }
.cfpi-edital i { display: flex; align-items: center; gap: 6px; font: 800 0.66rem 'Inter', sans-serif; font-style: normal; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cfp-suave); }
.cfpi-edital i::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: 0.6; }
.cfpi-edital.is-aberto i { color: #1d9a52; }
.cfpi-edital.is-aberto i::before { opacity: 1; }

/* perguntas frequentes: as perguntas da página de FAQ se revezando; o contato embaixo, para quem não achou */
.cfpi-tile-faq { grid-area: cont; gap: 0; }
.cfpi-faq-cab { position: relative; display: flex; flex-direction: column; gap: 4px; padding-right: 44px; }
.cfpi-faq-cab .cfpi-seta { right: 0; top: 0; }
.cfpi-tile-faq:hover .cfpi-faq-cab .cfpi-seta { transform: translateX(3px); background: var(--cfp-coral); color: #fff; }
.cfpi-perguntas .cfpi-edital { white-space: normal; }
.cfpi-perguntas .cfpi-q { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cfpi-perguntas .cfpi-edital i { color: var(--cfp-agua); }
.cfpi-perguntas .cfpi-edital i::before { opacity: 1; }
.cfpi-perguntas:hover .cfpi-edital.is-ativa { color: var(--cfp-coral); }
.cfpi-faq-pe { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-top: auto; padding-top: 14px; }
.cfpi .cfpi-pilula-faq { padding: 9px 16px; border-radius: 999px; background: var(--cfp-tinta); color: var(--i-cartao) !important; font-size: 0.86rem; font-weight: 700; transition: background 0.2s ease; }
.cfpi .cfpi-pilula-faq:hover { background: var(--cfp-agua); color: #fff !important; }
.cfpi-faq-contato { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 0.8rem; color: var(--cfp-suave); }
.cfpi-faq-contato a { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; color: var(--cfp-tinta); }
.cfpi-faq-contato a:hover { color: var(--cfp-coral) !important; }
.cfpi-faq-contato svg { width: 14px; height: 14px; color: var(--cfp-agua); }

/* ---------- telas menores ---------- */
@media (max-width: 1000px) {
    .cfpi-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "museu museu" "pesq pesq" "bio ext" "edit edit" "cont cont"; }
    .cfpi-tile-museu { min-height: 300px; }
}
@media (max-width: 640px) {
    .cfpi { margin-bottom: 20px; }
    .cfpi-tile { min-height: 160px; padding: 18px; }
    .cfpi-bento { grid-template-columns: 1fr; grid-template-areas: "museu" "pesq" "bio" "ext" "edit" "cont"; }
    .cfpi-tile-museu { min-height: 330px; padding: 22px; }
}
@media (prefers-reduced-motion: reduce) { .cfpi *, .cfpi *::before { transition: none !important; animation: none !important; } }