/* [ceclimar_monitoring_faq] / [cfp_monitoramento] — card "Encontrou um animal marinho na praia?". Cores do cabeçalho (--cfp-*): segue o modo claro/escuro. */
.cfpm { --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 .cfpm { --i-cartao: #1c1c1c; --i-fundo2: #242424; --i-sombra: 0 0 0 1px rgba(255, 255, 255, 0.06); }
.cfpm *, .cfpm *::before, .cfpm *::after { box-sizing: border-box; }
.cfpm a { text-decoration: none !important; color: inherit; }
.cfpm p, .cfpm h2, .cfpm ol { margin: 0; padding: 0; }
.cfpm svg { display: block; flex: none; }
.cfpm-link { font-size: 0.86rem; font-weight: 700; color: var(--cfp-agua) !important; }
.cfpm-link:hover { color: var(--cfp-coral) !important; }

/* ---------- 1. Animal na praia ---------- */
.cfpm-animal { position: relative; overflow: hidden; border-radius: 28px; background: var(--i-cartao); box-shadow: var(--i-sombra); }
.cfpm-animal-corpo > :not(.cfpm-animal-foto) { position: relative; z-index: 1; }   /* conteúdo na frente da foto */
/* foto do monitoramento ao fundo: à direita, esmaecendo para o lado do texto, com movimento lento */
.cfpm-animal-foto { position: absolute; inset: 0 0 0 30%; pointer-events: none; overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 55%); mask-image: linear-gradient(to right, transparent 0%, #000 55%); }
.cfpm-animal-foto::before { content: ''; position: absolute; inset: -6%; background: var(--foto) 28% 55% / cover no-repeat;
    opacity: 0.32; filter: saturate(0.75); }
html.ceclimar-dark-mode .cfpm-animal-foto::before { opacity: 0.22; filter: saturate(0.6) brightness(0.8); }
.cfpm-animal-onda { position: absolute; inset: 0 0 auto; height: 100%; pointer-events: none;
    background: radial-gradient(90% 120% at 100% 0%, rgba(13, 143, 132, 0.13) 0%, transparent 55%), radial-gradient(70% 90% at 0% 100%, rgba(224, 112, 95, 0.10) 0%, transparent 55%); }
.cfpm-animal-corpo { position: relative; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr); gap: 28px 40px; align-items: center; padding: clamp(22px, 3.5vw, 40px); }
.cfpm-sobre { display: flex; align-items: center; gap: 8px; margin-bottom: 10px !important; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cfp-agua); }
.cfpm-pulso { width: 8px; height: 8px; border-radius: 50%; background: var(--cfp-coral); box-shadow: 0 0 0 0 rgba(224, 112, 95, 0.55); animation: cfpm-pulso 2s ease-out infinite; }
@keyframes cfpm-pulso { 70% { box-shadow: 0 0 0 9px rgba(224, 112, 95, 0); } 100% { box-shadow: 0 0 0 0 rgba(224, 112, 95, 0); } }
.cfpm-animal h2 { font: 700 clamp(1.6rem, 3.2vw, 2.35rem)/1.12 'Fraunces', Georgia, serif; letter-spacing: -0.01em; color: var(--cfp-tinta); text-wrap: balance; }
.cfpm-passos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 22px !important; list-style: none; }
.cfpm-passos li { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: 16px; background: var(--i-fundo2); }
.cfpm-passo-n { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--cfp-tinta); color: var(--i-cartao); font: 800 0.9rem 'Inter', sans-serif; }
.cfpm-passos b { display: block; font-size: 0.95rem; }
.cfpm-passos small { display: block; margin-top: 2px; font-size: 0.8rem; color: var(--cfp-suave); }

.cfpm-animal-acoes { display: flex; flex-direction: column; gap: 10px; }
.cfpm-btn-zap, .cfpm-btn-tel { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 18px; font-weight: 800; font-size: 1.12rem; transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; }
.cfpm-btn-zap span, .cfpm-btn-tel span { display: flex; flex-direction: column; line-height: 1.2; white-space: nowrap; }
.cfpm-btn-zap small, .cfpm-btn-tel small { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.85; }
.cfpm-btn-zap svg, .cfpm-btn-tel svg { width: 30px; height: 30px; }
.cfpm .cfpm-btn-zap { background: #1fa855; color: #fff !important; box-shadow: 0 8px 22px rgba(31, 168, 85, 0.32); }
.cfpm .cfpm-btn-zap:hover { transform: translateY(-2px); background: #189247; }
.cfpm .cfpm-btn-tel { background: var(--i-fundo2); color: var(--cfp-tinta) !important; box-shadow: inset 0 0 0 1px var(--cfp-linha); }
.cfpm .cfpm-btn-tel:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1.5px var(--cfp-tinta); }
.cfpm-animal-acoes .cfpm-link { margin-top: 4px; text-align: center; }

.cfpm-faq { position: relative; border-top: 1px solid var(--cfp-linha); }
.cfpm-faq > summary { display: flex; align-items: center; gap: 14px; padding: 16px clamp(22px, 3.5vw, 40px); cursor: pointer; list-style: none; }
.cfpm-faq > summary::-webkit-details-marker, .cfpm-faq-item > summary::-webkit-details-marker { display: none; }
.cfpm-faq > summary span { font-weight: 800; font-size: 0.98rem; }
/* perguntas se revezando ao lado do título; clicar abre a lista já com a pergunta da vez respondida */
.cfpm-faq > summary > span:first-child { flex: none; }
.cfpm-faq-giro { position: relative; flex: 1; min-width: 0; height: 1.4em; overflow: hidden; }
.cfpm-faq-giro small { position: absolute; inset: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 0.88rem; color: var(--cfp-suave);
    opacity: 0; transform: translateY(70%); transition: opacity 0.45s ease, transform 0.45s ease; }
.cfpm-faq-giro small.is-ativa { opacity: 1; transform: none; }
.cfpm-faq-giro small.is-saindo { opacity: 0; transform: translateY(-70%); }
.cfpm-faq > summary:hover .cfpm-faq-giro small.is-ativa { color: var(--cfp-agua); }
.cfpm-faq[open] .cfpm-faq-giro { visibility: hidden; }
.cfpm-faq > summary i { flex: none; margin-left: auto; width: 26px; height: 26px; border-radius: 50%; background: var(--i-fundo2); position: relative; align-self: center; }
.cfpm-faq > summary i::before, .cfpm-faq > summary i::after { content: ''; position: absolute; left: 8px; right: 8px; top: 12px; height: 2px; border-radius: 2px; background: currentColor; transition: transform 0.25s ease; }
.cfpm-faq > summary i::after { transform: rotate(90deg); }
.cfpm-faq[open] > summary i::after { transform: rotate(0); }
.cfpm-faq-lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; padding: 0 clamp(22px, 3.5vw, 40px) 22px; }
.cfpm-faq-item { border-top: 1px solid var(--cfp-linha); }
.cfpm-faq-item > summary { position: relative; padding: 13px 28px 13px 0; cursor: pointer; list-style: none; font-weight: 600; font-size: 0.93rem; }
.cfpm-faq-item > summary::after { content: '+'; position: absolute; right: 4px; top: 10px; font-size: 1.2rem; color: var(--cfp-agua); transition: transform 0.2s ease; }
.cfpm-faq-item[open] > summary::after { transform: rotate(45deg); }
.cfpm-faq-item p { padding: 0 0 14px; font-size: 0.9rem; color: var(--cfp-suave); }
.cfpm-faq-item strong { color: var(--cfp-tinta); }
.cfpm .cfpm-faq-item p a { color: var(--cfp-agua) !important; text-decoration: underline !important; text-underline-offset: 2px; }

/* botão flutuante (celular): aparece quando o card sai da tela */
.cfpm-flutua { position: fixed; z-index: 99980; left: 50%; bottom: 16px; display: none; align-items: center; gap: 8px; padding: 12px 18px 12px 14px; border-radius: 999px;
    background: #1fa855; color: #fff !important; font: 800 0.95rem 'Inter', sans-serif; text-decoration: none !important; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25);
    transform: translate(-50%, 140%); transition: transform 0.35s cubic-bezier(0.3, 1.2, 0.4, 1); }
.cfpm-flutua svg { width: 22px; height: 22px; }
.cfpm-flutua.is-vis { transform: translate(-50%, 0); }


/* ---------- telas menores ---------- */
@media (max-width: 1000px) {
    .cfpm-animal-corpo { grid-template-columns: 1fr; }
    .cfpm-animal-foto { inset: 0; -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 70%); mask-image: linear-gradient(to bottom, #000 0%, transparent 70%); }
}
@media (max-width: 640px) {
    .cfpm { margin-bottom: 20px; }
    .cfpm-passos { grid-template-columns: 1fr; }
    .cfpm-faq-lista { grid-template-columns: 1fr; }
    .cfpm-flutua { display: inline-flex; }
    .cfpm-faq > summary { flex-wrap: wrap; row-gap: 4px; }
    .cfpm-faq-giro { order: 3; flex-basis: 100%; }
    .cfpm-btn-zap, .cfpm-btn-tel { font-size: 1.02rem; padding: 13px 16px; }
}
@media (prefers-reduced-motion: reduce) { .cfpm *, .cfpm *::before, .cfpm-flutua { transition: none !important; animation: none !important; } }