Files
agenciapsilmno/docs/estrategia/plataforma_saude_mental.html

1799 lines
69 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Plataforma de Saúde Mental — Documento Estratégico</title>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,800;1,400&family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;1,300&family=DM+Mono:wght@400;500&display=swap" rel="stylesheet">
<style>
:root {
--azul-escuro: #0F1F33;
--azul-medio: #1B4F7A;
--azul-claro: #2E7FBF;
--azul-ice: #EAF4FC;
--verde: #1E6B52;
--verde-suave: #EAF5F0;
--laranja: #C96A3A;
--laranja-suave: #FDF0E8;
--roxo: #5C3D8F;
--roxo-suave: #F0EAF8;
--cinza-claro: #F7F9FC;
--cinza-medio: #8A9AB5;
--cinza-texto: #4A5568;
--linha: #DDE6F0;
--branco: #FFFFFF;
--sombra: 0 4px 24px rgba(15,31,51,0.08);
--sombra-hover: 0 8px 40px rgba(15,31,51,0.14);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
font-family: 'DM Sans', sans-serif;
background: var(--cinza-claro);
color: var(--azul-escuro);
line-height: 1.7;
font-size: 16px;
}
/* ── SCROLLBAR ── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--cinza-claro); }
::-webkit-scrollbar-thumb { background: var(--azul-claro); border-radius: 3px; }
/* ── CAPA ── */
.cover {
min-height: 100vh;
background: var(--azul-escuro);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
padding: 4rem 2rem;
}
.cover-bg {
position: absolute; inset: 0;
background:
radial-gradient(ellipse 80% 60% at 20% 40%, rgba(46,127,191,0.18) 0%, transparent 60%),
radial-gradient(ellipse 60% 80% at 80% 70%, rgba(30,107,82,0.12) 0%, transparent 60%),
radial-gradient(ellipse 40% 40% at 60% 10%, rgba(92,61,143,0.1) 0%, transparent 50%);
}
.cover-grid {
position: absolute; inset: 0;
background-image:
linear-gradient(rgba(46,127,191,0.06) 1px, transparent 1px),
linear-gradient(90deg, rgba(46,127,191,0.06) 1px, transparent 1px);
background-size: 60px 60px;
}
.cover-content {
position: relative; z-index: 2;
text-align: center;
max-width: 780px;
}
.cover-eyebrow {
font-family: 'DM Mono', monospace;
font-size: 0.72rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: rgba(46,127,191,0.8);
margin-bottom: 1.5rem;
animation: fadeUp 0.8s ease both;
}
.cover-title {
font-family: 'Playfair Display', serif;
font-size: clamp(3rem, 8vw, 5.5rem);
font-weight: 800;
color: var(--branco);
line-height: 1.05;
margin-bottom: 1rem;
animation: fadeUp 0.8s ease 0.1s both;
}
.cover-title span {
color: transparent;
-webkit-text-stroke: 1.5px rgba(46,127,191,0.6);
}
.cover-subtitle {
font-size: 1.1rem;
color: rgba(255,255,255,0.55);
font-weight: 300;
margin-bottom: 3rem;
animation: fadeUp 0.8s ease 0.2s both;
}
.cover-badges {
display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;
animation: fadeUp 0.8s ease 0.3s both;
}
.badge {
background: rgba(255,255,255,0.07);
border: 1px solid rgba(255,255,255,0.12);
border-radius: 100px;
padding: 0.4rem 1.1rem;
font-size: 0.78rem;
color: rgba(255,255,255,0.65);
font-family: 'DM Mono', monospace;
letter-spacing: 0.05em;
backdrop-filter: blur(8px);
}
.cover-scroll {
position: absolute; bottom: 2.5rem; left: 50%; transform: translateX(-50%);
display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
color: rgba(255,255,255,0.3); font-size: 0.7rem; letter-spacing: 0.1em;
animation: fadeUp 1s ease 0.6s both;
}
.scroll-line {
width: 1px; height: 40px;
background: linear-gradient(to bottom, rgba(46,127,191,0.6), transparent);
animation: scrollPulse 2s ease infinite;
}
/* ── NAV LATERAL ── */
.sidenav {
position: fixed; left: 0; top: 0; bottom: 0;
width: 260px;
background: var(--azul-escuro);
padding: 2rem 0;
overflow-y: auto;
z-index: 100;
transform: translateX(-100%);
transition: transform 0.3s ease;
box-shadow: 4px 0 24px rgba(0,0,0,0.2);
}
.sidenav.open { transform: translateX(0); }
.sidenav-logo {
padding: 0 1.5rem 1.5rem;
border-bottom: 1px solid rgba(255,255,255,0.08);
margin-bottom: 1rem;
}
.sidenav-logo span {
font-family: 'Playfair Display', serif;
font-size: 1rem;
color: var(--branco);
font-weight: 600;
}
.sidenav-logo small {
display: block;
font-size: 0.65rem;
color: var(--cinza-medio);
letter-spacing: 0.1em;
text-transform: uppercase;
margin-top: 0.2rem;
}
.sidenav a {
display: flex; align-items: center; gap: 0.75rem;
padding: 0.6rem 1.5rem;
color: rgba(255,255,255,0.5);
text-decoration: none;
font-size: 0.82rem;
transition: all 0.2s;
border-left: 2px solid transparent;
}
.sidenav a:hover, .sidenav a.active {
color: var(--branco);
background: rgba(46,127,191,0.12);
border-left-color: var(--azul-claro);
}
.sidenav a .num {
font-family: 'DM Mono', monospace;
font-size: 0.65rem;
color: var(--azul-claro);
min-width: 1.5rem;
}
/* ── NAV TOGGLE ── */
.nav-toggle {
position: fixed; top: 1.2rem; left: 1.2rem; z-index: 200;
width: 44px; height: 44px;
background: var(--azul-escuro);
border: 1px solid rgba(46,127,191,0.3);
border-radius: 10px;
cursor: pointer;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
transition: all 0.2s;
box-shadow: var(--sombra);
}
.nav-toggle:hover { background: var(--azul-medio); }
.nav-toggle span { width: 20px; height: 1.5px; background: var(--branco); border-radius: 2px; transition: all 0.2s; }
/* ── OVERLAY ── */
.overlay {
position: fixed; inset: 0; background: rgba(0,0,0,0.5);
z-index: 99; opacity: 0; pointer-events: none; transition: opacity 0.3s;
}
.overlay.show { opacity: 1; pointer-events: all; }
/* ── MAIN CONTENT ── */
.main {
max-width: 860px;
margin: 0 auto;
padding: 0 2rem 6rem;
}
/* ── CHAPTER ── */
.chapter {
margin-top: 5rem;
opacity: 0;
transform: translateY(20px);
transition: opacity 0.6s ease, transform 0.6s ease;
}
.chapter.visible { opacity: 1; transform: translateY(0); }
.chapter-header {
display: flex; align-items: flex-start; gap: 1.5rem;
margin-bottom: 2rem;
padding-bottom: 1.5rem;
border-bottom: 1px solid var(--linha);
}
.chapter-num {
font-family: 'DM Mono', monospace;
font-size: 0.7rem;
color: var(--azul-claro);
letter-spacing: 0.1em;
background: var(--azul-ice);
border: 1px solid rgba(46,127,191,0.2);
border-radius: 8px;
padding: 0.4rem 0.8rem;
white-space: nowrap;
margin-top: 0.3rem;
}
.chapter-title {
font-family: 'Playfair Display', serif;
font-size: clamp(1.6rem, 4vw, 2.2rem);
font-weight: 700;
color: var(--azul-escuro);
line-height: 1.2;
}
/* ── SECTION ── */
.section { margin-top: 2rem; }
.section-title {
font-family: 'DM Sans', sans-serif;
font-size: 1.05rem;
font-weight: 600;
color: var(--azul-medio);
margin-bottom: 0.75rem;
padding-left: 0.75rem;
border-left: 3px solid var(--azul-claro);
}
.subsection-title {
font-size: 0.9rem;
font-weight: 600;
color: var(--verde);
margin: 1.2rem 0 0.4rem;
}
p {
color: var(--cinza-texto);
font-size: 0.97rem;
line-height: 1.75;
margin-bottom: 0.9rem;
font-weight: 300;
}
strong { color: var(--azul-escuro); font-weight: 600; }
/* ── CALLOUT ── */
.callout {
background: var(--azul-ice);
border-left: 4px solid var(--azul-claro);
border-radius: 0 12px 12px 0;
padding: 1.25rem 1.5rem;
margin: 1.5rem 0;
font-style: italic;
font-size: 0.97rem;
color: var(--azul-medio);
font-weight: 400;
line-height: 1.7;
}
/* ── BULLETS ── */
.bullet-list { list-style: none; padding: 0; margin: 0.5rem 0 1rem; }
.bullet-list li {
display: flex; gap: 0.75rem; align-items: flex-start;
padding: 0.4rem 0;
font-size: 0.94rem;
color: var(--cinza-texto);
border-bottom: 1px solid var(--linha);
font-weight: 300;
}
.bullet-list li:last-child { border-bottom: none; }
.bullet-list li::before {
content: '';
width: 6px; height: 6px;
background: var(--azul-claro);
border-radius: 50%;
margin-top: 0.55rem;
flex-shrink: 0;
}
/* ── CARDS PILARES ── */
.cards-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
margin: 1.5rem 0;
}
.card {
background: var(--branco);
border: 1px solid var(--linha);
border-radius: 14px;
padding: 1.25rem;
transition: all 0.25s;
box-shadow: var(--sombra);
}
.card:hover { box-shadow: var(--sombra-hover); transform: translateY(-2px); }
.card-icon {
font-size: 1.5rem;
margin-bottom: 0.75rem;
}
.card-title {
font-weight: 600;
font-size: 0.88rem;
color: var(--azul-escuro);
margin-bottom: 0.4rem;
}
.card-desc {
font-size: 0.8rem;
color: var(--cinza-medio);
line-height: 1.55;
margin: 0;
font-weight: 300;
}
/* ── TABELA ── */
.table-wrap { overflow-x: auto; margin: 1.5rem 0; border-radius: 12px; box-shadow: var(--sombra); }
table {
width: 100%; border-collapse: collapse;
font-size: 0.88rem;
background: var(--branco);
border-radius: 12px;
overflow: hidden;
}
thead { background: var(--azul-escuro); }
thead th {
padding: 0.9rem 1rem;
color: var(--branco);
font-weight: 500;
text-align: left;
letter-spacing: 0.03em;
font-size: 0.82rem;
}
tbody tr:nth-child(even) { background: var(--cinza-claro); }
tbody tr:hover { background: var(--azul-ice); }
tbody td {
padding: 0.85rem 1rem;
border-bottom: 1px solid var(--linha);
color: var(--cinza-texto);
vertical-align: top;
line-height: 1.6;
font-weight: 300;
}
/* ── FASES ── */
.fase {
border-radius: 16px;
overflow: hidden;
margin-bottom: 1.5rem;
box-shadow: var(--sombra);
transition: box-shadow 0.25s;
}
.fase:hover { box-shadow: var(--sombra-hover); }
.fase-header {
display: flex; align-items: center; justify-content: space-between;
padding: 1.1rem 1.5rem;
color: var(--branco);
}
.fase-header-left { display: flex; align-items: center; gap: 1rem; }
.fase-num {
font-family: 'DM Mono', monospace;
font-size: 0.7rem;
background: rgba(255,255,255,0.18);
border-radius: 6px;
padding: 0.25rem 0.6rem;
letter-spacing: 0.08em;
}
.fase-title {
font-family: 'Playfair Display', serif;
font-size: 1.05rem;
font-weight: 600;
}
.fase-period {
font-size: 0.78rem;
opacity: 0.8;
font-family: 'DM Mono', monospace;
white-space: nowrap;
}
.fase-body {
background: var(--branco);
padding: 1.25rem 1.5rem;
border: 1px solid var(--linha);
border-top: none;
border-radius: 0 0 16px 16px;
}
/* ── DOIS PRODUTOS ── */
.produtos-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem;
margin: 1.5rem 0;
}
@media (max-width: 640px) { .produtos-grid { grid-template-columns: 1fr; } }
.produto-card {
border-radius: 16px; overflow: hidden;
box-shadow: var(--sombra);
transition: box-shadow 0.25s;
}
.produto-card:hover { box-shadow: var(--sombra-hover); }
.produto-header {
padding: 1.25rem 1.5rem;
color: var(--branco);
}
.produto-header .label {
font-family: 'DM Mono', monospace;
font-size: 0.65rem;
letter-spacing: 0.12em;
opacity: 0.7;
text-transform: uppercase;
margin-bottom: 0.3rem;
}
.produto-header .name {
font-family: 'Playfair Display', serif;
font-size: 1.1rem;
font-weight: 700;
}
.produto-body {
background: var(--branco);
padding: 1.25rem 1.5rem;
border: 1px solid var(--linha);
border-top: none;
border-radius: 0 0 16px 16px;
font-size: 0.88rem;
color: var(--cinza-texto);
font-weight: 300;
line-height: 1.65;
}
/* ── PAPEIS ── */
.papeis-grid {
display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 1rem; margin: 1.5rem 0;
}
.papel-card {
background: var(--branco);
border: 1px solid var(--linha);
border-radius: 14px;
padding: 1.25rem;
box-shadow: var(--sombra);
transition: all 0.25s;
}
.papel-card:hover { transform: translateY(-3px); box-shadow: var(--sombra-hover); }
.papel-num {
font-family: 'DM Mono', monospace;
font-size: 0.65rem;
color: var(--azul-claro);
letter-spacing: 0.1em;
margin-bottom: 0.5rem;
}
.papel-nome {
font-weight: 700;
font-size: 0.95rem;
color: var(--azul-escuro);
margin-bottom: 0.5rem;
}
.papel-desc {
font-size: 0.8rem;
color: var(--cinza-medio);
line-height: 1.55;
margin: 0;
font-weight: 300;
}
/* ── PLANOS ── */
.planos-grid {
display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
gap: 1rem; margin: 1.5rem 0;
}
.plano-card {
background: var(--branco);
border: 1px solid var(--linha);
border-radius: 16px;
padding: 1.5rem 1.25rem;
box-shadow: var(--sombra);
transition: all 0.25s;
position: relative;
overflow: hidden;
}
.plano-card::before {
content: '';
position: absolute; top: 0; left: 0; right: 0;
height: 3px;
}
.plano-card.free::before { background: var(--cinza-medio); }
.plano-card.pro::before { background: var(--azul-claro); }
.plano-card.clinica::before { background: var(--verde); }
.plano-card.conteudo::before { background: var(--laranja); }
.plano-card:hover { transform: translateY(-3px); box-shadow: var(--sombra-hover); }
.plano-nome {
font-weight: 700;
font-size: 1rem;
color: var(--azul-escuro);
margin-bottom: 0.25rem;
}
.plano-perfil {
font-size: 0.75rem;
color: var(--cinza-medio);
margin-bottom: 1rem;
font-weight: 400;
}
.plano-features {
list-style: none; padding: 0;
}
.plano-features li {
font-size: 0.8rem;
color: var(--cinza-texto);
padding: 0.3rem 0;
border-bottom: 1px solid var(--linha);
display: flex; gap: 0.5rem; align-items: flex-start;
font-weight: 300;
}
.plano-features li:last-child { border-bottom: none; }
.plano-features li::before { content: '→'; color: var(--azul-claro); font-size: 0.7rem; margin-top: 0.15rem; flex-shrink: 0; }
/* ── RISCOS ── */
.risco {
background: var(--branco);
border: 1px solid var(--linha);
border-radius: 14px;
padding: 1.25rem 1.5rem;
margin-bottom: 1rem;
box-shadow: var(--sombra);
display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: start;
}
.risco-title { font-weight: 600; font-size: 0.92rem; color: var(--azul-escuro); margin-bottom: 0.4rem; }
.risco-mit { font-size: 0.84rem; color: var(--cinza-texto); line-height: 1.65; font-weight: 300; }
.risco-tags { display: flex; flex-direction: column; gap: 0.4rem; align-items: flex-end; }
.tag {
font-family: 'DM Mono', monospace;
font-size: 0.65rem;
letter-spacing: 0.06em;
padding: 0.2rem 0.6rem;
border-radius: 100px;
white-space: nowrap;
}
.tag-alto { background: #FDE8E8; color: #B91C1C; }
.tag-medio { background: #FEF3C7; color: #92400E; }
.tag-baixo { background: #D1FAE5; color: #065F46; }
/* ── FUNIL ── */
.funil { margin: 1.5rem 0; }
.funil-step {
display: flex; gap: 1.25rem; align-items: flex-start;
padding: 1.1rem 1.25rem;
background: var(--branco);
border: 1px solid var(--linha);
border-radius: 12px;
margin-bottom: 0.75rem;
box-shadow: var(--sombra);
transition: all 0.25s;
}
.funil-step:hover { box-shadow: var(--sombra-hover); transform: translateX(4px); }
.funil-icon {
width: 40px; height: 40px;
border-radius: 10px;
display: flex; align-items: center; justify-content: center;
font-size: 1.1rem;
flex-shrink: 0;
}
.funil-step-title { font-weight: 600; font-size: 0.9rem; color: var(--azul-escuro); margin-bottom: 0.25rem; }
.funil-step-desc { font-size: 0.84rem; color: var(--cinza-texto); line-height: 1.6; font-weight: 300; }
/* ── CRONO ── */
.crono { margin: 1.5rem 0; }
.crono-mes {
margin-bottom: 2rem;
}
.crono-mes-title {
font-family: 'Playfair Display', serif;
font-size: 1rem;
font-weight: 700;
color: var(--azul-escuro);
padding: 0.6rem 1rem;
background: var(--azul-ice);
border-radius: 8px;
margin-bottom: 0.75rem;
display: flex; align-items: center; gap: 0.75rem;
}
.crono-mes-title span {
font-family: 'DM Mono', monospace;
font-size: 0.68rem;
background: var(--azul-claro);
color: var(--branco);
border-radius: 4px;
padding: 0.15rem 0.5rem;
letter-spacing: 0.06em;
}
.crono-semanas {
display: grid; gap: 0.6rem;
}
.crono-semana {
display: grid; grid-template-columns: 80px 1fr 1fr 1fr;
gap: 0.5rem;
background: var(--branco);
border: 1px solid var(--linha);
border-radius: 10px;
overflow: hidden;
font-size: 0.8rem;
}
.crono-periodo {
background: var(--azul-escuro);
color: var(--branco);
font-family: 'DM Mono', monospace;
font-size: 0.65rem;
letter-spacing: 0.06em;
padding: 0.75rem 0.75rem;
display: flex; align-items: center; justify-content: center;
text-align: center;
line-height: 1.4;
}
.crono-cell {
padding: 0.75rem 0.75rem;
color: var(--cinza-texto);
line-height: 1.55;
border-left: 1px solid var(--linha);
font-weight: 300;
}
.crono-cell.front { background: rgba(46,127,191,0.04); }
.crono-cell.back { background: rgba(30,107,82,0.04); }
.crono-cell.entrega { background: rgba(201,106,58,0.04); font-weight: 500; color: var(--azul-escuro); }
.crono-header {
display: grid; grid-template-columns: 80px 1fr 1fr 1fr;
gap: 0.5rem;
margin-bottom: 0.4rem;
padding: 0 0;
}
.crono-header-cell {
font-size: 0.7rem;
font-weight: 600;
color: var(--cinza-medio);
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 0 0.5rem;
}
/* ── VISÃO FINAL ── */
.visao-grid {
display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem; margin: 1.5rem 0;
}
.visao-card {
background: var(--azul-escuro);
border-radius: 16px;
padding: 1.5rem;
transition: all 0.25s;
}
.visao-card:hover { transform: translateY(-3px); background: var(--azul-medio); }
.visao-card .icon { font-size: 1.75rem; margin-bottom: 0.75rem; }
.visao-card .title {
font-family: 'Playfair Display', serif;
font-size: 0.92rem;
font-weight: 600;
color: var(--branco);
margin-bottom: 0.5rem;
}
.visao-card .desc {
font-size: 0.78rem;
color: rgba(255,255,255,0.5);
line-height: 1.6;
font-weight: 300;
margin: 0;
}
/* ── FOOTER ── */
.footer {
background: var(--azul-escuro);
color: rgba(255,255,255,0.4);
text-align: center;
padding: 3rem 2rem;
font-size: 0.8rem;
font-family: 'DM Mono', monospace;
letter-spacing: 0.06em;
}
.footer strong { color: rgba(255,255,255,0.7); }
/* ── ANIMAÇÕES ── */
@keyframes fadeUp {
from { opacity: 0; transform: translateY(24px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes scrollPulse {
0%, 100% { opacity: 0.4; }
50% { opacity: 1; }
}
/* ── MÓDULOS ── */
.modulo {
background: var(--branco);
border: 1px solid var(--linha);
border-radius: 16px;
margin-bottom: 1.25rem;
box-shadow: var(--sombra);
overflow: hidden;
transition: box-shadow 0.25s;
}
.modulo:hover { box-shadow: var(--sombra-hover); }
.modulo-header {
display: flex; align-items: center; gap: 1rem;
padding: 1.1rem 1.5rem;
background: var(--cinza-claro);
border-bottom: 1px solid var(--linha);
cursor: pointer;
}
.modulo-num {
width: 32px; height: 32px;
background: var(--azul-escuro);
color: var(--branco);
border-radius: 8px;
display: flex; align-items: center; justify-content: center;
font-family: 'DM Mono', monospace;
font-size: 0.72rem;
font-weight: 500;
flex-shrink: 0;
}
.modulo-title { font-weight: 600; font-size: 0.95rem; color: var(--azul-escuro); }
.modulo-body { padding: 1.25rem 1.5rem; }
.modulo-desc { font-size: 0.88rem; color: var(--cinza-texto); margin-bottom: 0.75rem; font-weight: 300; line-height: 1.7; }
/* ── TRILHAS ── */
.trilha {
background: var(--branco);
border: 1px solid var(--linha);
border-radius: 14px;
margin-bottom: 1rem;
box-shadow: var(--sombra);
overflow: hidden;
}
.trilha-header {
padding: 1rem 1.25rem;
background: linear-gradient(135deg, var(--azul-escuro), var(--azul-medio));
color: var(--branco);
font-family: 'Playfair Display', serif;
font-size: 0.95rem;
font-weight: 600;
}
.trilha-body { padding: 1rem 1.25rem; }
/* ── DIVIDER ── */
.divider {
height: 1px;
background: linear-gradient(to right, transparent, var(--linha), transparent);
margin: 3rem 0;
}
/* ── RESPONSIVE ── */
@media (max-width: 768px) {
.chapter-header { flex-direction: column; gap: 0.75rem; }
.risco { grid-template-columns: 1fr; }
.risco-tags { flex-direction: row; }
.crono-semana { grid-template-columns: 60px 1fr; }
.crono-cell.back, .crono-header-cell:nth-child(3) { display: none; }
.crono-header { grid-template-columns: 60px 1fr 1fr; }
}
/* ── PROGRESS BAR ── */
.progress-bar {
position: fixed; top: 0; left: 0; height: 3px;
background: linear-gradient(to right, var(--azul-claro), var(--verde));
z-index: 1000;
transition: width 0.1s;
}
</style>
</head>
<body>
<div class="progress-bar" id="progressBar"></div>
<!-- NAV TOGGLE -->
<button class="nav-toggle" id="navToggle" aria-label="Menu">
<span></span><span></span><span></span>
</button>
<!-- OVERLAY -->
<div class="overlay" id="overlay"></div>
<!-- SIDENAV -->
<nav class="sidenav" id="sidenav">
<div class="sidenav-logo">
<span>Saúde Mental</span>
<small>Documento Estratégico</small>
</div>
<a href="#cap1"><span class="num">01</span> Visão Geral</a>
<a href="#cap2"><span class="num">02</span> Origem e Motivação</a>
<a href="#cap3"><span class="num">03</span> O Problema</a>
<a href="#cap4"><span class="num">04</span> Mercado</a>
<a href="#cap5"><span class="num">05</span> Lacunas</a>
<a href="#cap6"><span class="num">06</span> Arquitetura</a>
<a href="#cap7"><span class="num">07</span> Multi-Papel</a>
<a href="#cap8"><span class="num">08</span> Módulos</a>
<a href="#cap9"><span class="num">09</span> Microlearning</a>
<a href="#cap10"><span class="num">10</span> Monetização</a>
<a href="#cap11"><span class="num">11</span> Fases</a>
<a href="#cap12"><span class="num">12</span> Cronograma MVP</a>
<a href="#cap13"><span class="num">13</span> Riscos</a>
<a href="#cap14"><span class="num">14</span> Adoção</a>
<a href="#cap15"><span class="num">15</span> Visão de Futuro</a>
</nav>
<!-- CAPA -->
<section class="cover">
<div class="cover-bg"></div>
<div class="cover-grid"></div>
<div class="cover-content">
<p class="cover-eyebrow">Documento Estratégico Fundacional</p>
<h1 class="cover-title">Plataforma de<br><span>Saúde Mental</span></h1>
<p class="cover-subtitle">Ecossistema completo para gestão clínica, educação continuada e conexão terapêutica</p>
<div class="cover-badges">
<span class="badge">Versão 1.0</span>
<span class="badge">Confidencial</span>
<span class="badge">MVP em construção</span>
<span class="badge">2025</span>
</div>
</div>
<div class="cover-scroll">
<span>scroll</span>
<div class="scroll-line"></div>
</div>
</section>
<!-- MAIN -->
<main class="main">
<!-- CAP 1 -->
<section class="chapter" id="cap1">
<div class="chapter-header">
<span class="chapter-num">01</span>
<h2 class="chapter-title">Visão Geral do Projeto</h2>
</div>
<p>Este documento descreve de forma completa e minuciosa o projeto de uma <strong>Plataforma de Saúde Mental</strong> — um ecossistema digital integrado que reúne gestão clínica, educação continuada e conexão entre profissionais e pacientes em um único ambiente.</p>
<p>O produto nasce com a missão de simplificar a vida do profissional de saúde mental brasileiro, ao mesmo tempo que eleva a qualidade do cuidado oferecido ao paciente. Não se trata de mais um sistema de agendamento. Trata-se de uma plataforma viva, que cresce com o profissional, conecta especialidades e educa o mercado.</p>
<div class="callout">"Não estamos construindo um software de gestão. Estamos construindo o ecossistema que o profissional de saúde mental brasileiro nunca teve."</div>
<div class="section">
<h3 class="section-title">Pilares Fundadores</h3>
<div class="cards-grid">
<div class="card">
<div class="card-icon">🏛</div>
<div class="card-title">Confiança Clínica</div>
<p class="card-desc">Seriedade, conformidade com LGPD e segurança de dados sensíveis desde a fundação.</p>
</div>
<div class="card">
<div class="card-icon"></div>
<div class="card-title">Redução de Fricção</div>
<p class="card-desc">Cada funcionalidade deve economizar tempo real do profissional, nunca criar mais trabalho.</p>
</div>
<div class="card">
<div class="card-icon">🕸</div>
<div class="card-title">Efeito de Rede</div>
<p class="card-desc">Quanto mais profissionais entram, mais o produto vale para cada um deles.</p>
</div>
<div class="card">
<div class="card-icon">📚</div>
<div class="card-title">Educação como Aquisição</div>
<p class="card-desc">Conteúdo de microlearning que atrai, engaja e converte o profissional ideal.</p>
</div>
</div>
</div>
</section>
<div class="divider"></div>
<!-- CAP 2 -->
<section class="chapter" id="cap2">
<div class="chapter-header">
<span class="chapter-num">02</span>
<h2 class="chapter-title">Origem e Motivação</h2>
</div>
<p>O projeto surgiu da observação direta de um problema recorrente: profissionais de saúde mental altamente capacitados clinicamente, mas completamente despreparados para gerir o aspecto administrativo e financeiro de suas práticas.</p>
<p>A pandemia de COVID-19 acelerou a digitalização do setor — o atendimento online normalizou-se, a demanda por terapia explodiu e o número de profissionais cresceu. Porém, as ferramentas disponíveis no mercado não acompanharam essa evolução em profundidade. Resolvem o agendamento, mas ignoram a clínica. Resolvem o financeiro, mas ignoram o paciente.</p>
<p>A motivação central é construir o produto que o mercado deveria ter criado há anos: uma plataforma que entende que o terapeuta <strong>também é paciente</strong>, que a clínica é feita de relações humanas, e que educação e prática clínica são inseparáveis.</p>
<div class="section">
<h3 class="section-title">O Papel do Parceiro Acadêmico</h3>
<p>Um dos diferenciais estratégicos do projeto é a parceria com um profissional em formação em psicologia e já atuante como psicanalista. Essa combinação é rara: une a visão clínica prática com o rigor acadêmico, permitindo a produção de conteúdo de microlearning com autoridade real.</p>
<p>Com o tempo, esse parceiro poderá atuar também como supervisor clínico dentro da plataforma e como referência de conteúdo para o módulo de inteligência artificial de suporte clínico, previsto nas fases avançadas do produto.</p>
</div>
</section>
<div class="divider"></div>
<!-- CAP 3 -->
<section class="chapter" id="cap3">
<div class="chapter-header">
<span class="chapter-num">03</span>
<h2 class="chapter-title">O Problema que Resolvemos</h2>
</div>
<div class="section">
<h3 class="subsection-title">1. Fragmentação de Ferramentas</h3>
<p>O profissional usa Google Agenda para agendamento, WhatsApp para comunicação, planilha para financeiro, Word para prontuário e e-mail para cobrança. São 5 ferramentas para uma única prática clínica.</p>
<h3 class="subsection-title">2. Ausência de Visão Clínica nos Sistemas Atuais</h3>
<p>Os softwares existentes tratam o atendimento como uma transação comercial. Não há suporte para acompanhamento de evolução do paciente, aplicação de escalas validadas ou registro estruturado por abordagem terapêutica.</p>
<h3 class="subsection-title">3. Isolamento Profissional</h3>
<p>Terapeutas trabalham em silos. Não há plataforma que facilite encaminhamentos entre colegas, supervisão clínica estruturada ou rede de colaboração profissional.</p>
<h3 class="subsection-title">4. Falta de Educação em Gestão</h3>
<p>A formação em psicologia, psicanálise e psiquiatria é excelente clinicamente, mas praticamente nula em gestão. O profissional não sabe precificar, não sabe lidar com inadimplência, não conhece suas obrigações fiscais e de LGPD.</p>
<h3 class="subsection-title">5. Experiência do Paciente Negligenciada</h3>
<p>O paciente é tratado como destinatário passivo do serviço. Não existe ferramenta que engaje o paciente entre sessões, acompanhe seu humor, envie tarefas terapêuticas ou registre seu progresso de forma visual.</p>
</div>
</section>
<div class="divider"></div>
<!-- CAP 4 -->
<section class="chapter" id="cap4">
<div class="chapter-header">
<span class="chapter-num">04</span>
<h2 class="chapter-title">O Mercado e seus Concorrentes</h2>
</div>
<p>O mercado brasileiro de software para saúde mental está em crescimento acelerado, mas ainda dominado por soluções parciais. Os principais players cobrem bem o básico administrativo, porém falham na profundidade clínica e na experiência do usuário.</p>
<div class="table-wrap">
<table>
<thead><tr><th>Player</th><th>Pontos Fortes</th><th>Lacunas Críticas</th></tr></thead>
<tbody>
<tr><td><strong>PsicoManager</strong></td><td>Prontuário, agendamento sólido</td><td>UX datada, sem app do paciente, sem microlearning</td></tr>
<tr><td><strong>Clínica Ágil</strong></td><td>Interface moderna, financeiro</td><td>Sem escalas clínicas, sem rede entre profissionais</td></tr>
<tr><td><strong>Amplimed</strong></td><td>Multi-especialidade, robusto</td><td>Complexo demais para terapeuta solo, custo elevado</td></tr>
<tr><td><strong>Nuvem Psicologia</strong></td><td>Foco em psicólogos, simples</td><td>Funcionalidades limitadas, sem crescimento de produto</td></tr>
<tr><td><strong>Google Agenda + Planilha</strong></td><td>Gratuito, familiar</td><td>Não é um produto — é um remendo</td></tr>
</tbody>
</table>
</div>
<div class="callout">Nossa plataforma compete em uma categoria nova: <strong>ecossistema terapêutico integrado</strong>. Enquanto os concorrentes vendem software de gestão, vendemos crescimento profissional, conexão clínica e educação continuada — com a gestão como consequência natural.</div>
</section>
<div class="divider"></div>
<!-- CAP 5 -->
<section class="chapter" id="cap5">
<div class="chapter-header">
<span class="chapter-num">05</span>
<h2 class="chapter-title">Lacunas de Mercado Identificadas</h2>
</div>
<p>A análise competitiva revelou oportunidades concretas que nenhum player atual preenche de forma satisfatória. São estas lacunas que definem nossa vantagem estratégica.</p>
<div class="section">
<h3 class="subsection-title">Lacuna 1 — Acompanhamento de Progresso Clínico Visual</h3>
<p>Nenhum sistema entrega um painel visual que mostre a evolução do paciente sessão a sessão com métricas e gráficos.</p>
<h3 class="subsection-title">Lacuna 2 — Ferramentas para o Paciente entre Sessões</h3>
<p>Um módulo do paciente com diário de humor, tarefas terapêuticas e check-ins automáticos é praticamente inexistente no Brasil.</p>
<h3 class="subsection-title">Lacuna 3 — Escalas Psicológicas Integradas</h3>
<p>PHQ-9, GAD-7, BDI, Beck e outras escalas amplamente usadas não estão integradas com envio ao paciente, correção automática e gráfico de evolução temporal.</p>
<h3 class="subsection-title">Lacuna 4 — Rede de Encaminhamentos</h3>
<p>Terapeutas frequentemente precisam encaminhar pacientes para colegas. Não existe plataforma que estruture esse processo de forma segura, rastreável e profissional.</p>
<h3 class="subsection-title">Lacuna 5 — Módulo de Supervisão Clínica</h3>
<p>Nenhum sistema tem módulo específico para supervisores acompanharem casos de supervisionados com acesso controlado e seguro.</p>
<h3 class="subsection-title">Lacuna 6 — Educação em Gestão para a Área</h3>
<p>Profissionais não têm acesso fácil a conteúdo específico sobre gestão de clínica, precificação, LGPD aplicada à psicologia e finanças do autônomo.</p>
<h3 class="subsection-title">Lacuna 7 — IA de Suporte Clínico</h3>
<p>Sugestão de bibliografias por apresentação clínica, rascunho de evoluções por voz e alertas baseados em padrões do paciente são funcionalidades com altíssimo valor e quase inexistentes.</p>
</div>
</section>
<div class="divider"></div>
<!-- CAP 6 -->
<section class="chapter" id="cap6">
<div class="chapter-header">
<span class="chapter-num">06</span>
<h2 class="chapter-title">Arquitetura do Produto</h2>
</div>
<p>A plataforma é composta por dois produtos complementares que compartilham a mesma base de usuários, infraestrutura e identidade de marca:</p>
<div class="produtos-grid">
<div class="produto-card">
<div class="produto-header" style="background: linear-gradient(135deg, #1B4F7A, #2E7FBF);">
<div class="label">Produto 1</div>
<div class="name">Sistema de Gestão Clínica</div>
</div>
<div class="produto-body">Agendamento, prontuário, financeiro, multi-papel, escalas clínicas, módulo do paciente, rede de profissionais e supervisão clínica.</div>
</div>
<div class="produto-card">
<div class="produto-header" style="background: linear-gradient(135deg, #1E6B52, #2DA882);">
<div class="label">Produto 2</div>
<div class="name">Plataforma de Microlearning</div>
</div>
<div class="produto-body">Trilhas de microlearning por especialidade, carrossel de slides, quiz, vídeo, banners no sistema e assinatura independente ou inclusa.</div>
</div>
</div>
<div class="section">
<h3 class="section-title">Como os Dois Produtos se Integram</h3>
<ul class="bullet-list">
<li>O mesmo login acessa os dois produtos — a conta é única e os dados são compartilhados.</li>
<li>Banners rotativos dentro do sistema de gestão exibem conteúdos do microlearning, criando exposição passiva e contínua.</li>
<li>O usuário que entra pela plataforma de conteúdo já está dentro do ecossistema quando decide usar o sistema de gestão.</li>
<li>O modelo de planos pagos pode incluir acesso ao microlearning como benefício, aumentando o valor percebido.</li>
<li>O conteúdo de gestão de clínica educa o profissional para usar melhor as funcionalidades do próprio sistema.</li>
</ul>
</div>
</section>
<div class="divider"></div>
<!-- CAP 7 -->
<section class="chapter" id="cap7">
<div class="chapter-header">
<span class="chapter-num">07</span>
<h2 class="chapter-title">O Sistema Multi-Papel</h2>
</div>
<p>Um dos diferenciais arquiteturais mais importantes da plataforma é o sistema de <strong>multi-papel por usuário</strong>. Na maioria dos concorrentes, um usuário é ou terapeuta ou paciente. Em nossa plataforma, um único usuário pode exercer múltiplos papéis simultaneamente, refletindo a realidade clínica.</p>
<div class="callout">Insight central: O terapeuta também faz análise pessoal. Logo, ele é simultaneamente profissional de saúde mental e paciente de outro profissional. O sistema precisa respeitar e suportar essa dualidade de forma natural e sem fricção.</div>
<div class="section">
<h3 class="section-title">Os Quatro Papéis do Sistema</h3>
<div class="papeis-grid">
<div class="papel-card">
<div class="papel-num">PAPEL 01</div>
<div class="papel-nome">Paciente</div>
<p class="papel-desc">Agenda sessões, acessa histórico, responde escalas, usa o diário entre sessões e visualiza tarefas.</p>
</div>
<div class="papel-card">
<div class="papel-num">PAPEL 02</div>
<div class="papel-nome">Terapeuta</div>
<p class="papel-desc">Gerencia agenda e pacientes, registra prontuário, aplica escalas, emite cobranças e acessa relatórios.</p>
</div>
<div class="papel-card">
<div class="papel-num">PAPEL 03</div>
<div class="papel-nome">Clínica</div>
<p class="papel-desc">Gerencia múltiplos terapeutas, controla agenda compartilhada, realiza repasse financeiro e métricas.</p>
</div>
<div class="papel-card">
<div class="papel-num">PAPEL 04</div>
<div class="papel-nome">Supervisor</div>
<p class="papel-desc">Acompanha casos de supervisionados com acesso controlado e emite relatórios de supervisão.</p>
</div>
</div>
</div>
<div class="section">
<h3 class="section-title">Regras de Transição entre Papéis</h3>
<ul class="bullet-list">
<li>Todo usuário começa como <strong>Paciente</strong> — é o papel padrão e gratuito.</li>
<li>Um Paciente pode ativar o papel de Terapeuta mediante verificação de credencial (CRP/CRM) e adesão a um plano pago.</li>
<li>Um Terapeuta pode criar ou se vincular a uma Clínica, que tem plano e faturamento próprios.</li>
<li>Um Terapeuta pode ser designado Supervisor por outro terapeuta ou clínica.</li>
<li>Um usuário Terapeuta pode simultaneamente ser Paciente de outro terapeuta — os dados são completamente segregados.</li>
<li>A troca de contexto entre papéis é feita na interface de forma clara, sem risco de contaminação de dados.</li>
</ul>
</div>
</section>
<div class="divider"></div>
<!-- CAP 8 -->
<section class="chapter" id="cap8">
<div class="chapter-header">
<span class="chapter-num">08</span>
<h2 class="chapter-title">Módulos do Sistema de Gestão</h2>
</div>
<div class="modulo">
<div class="modulo-header">
<div class="modulo-num">M1</div>
<div class="modulo-title">Autenticação e Multi-Papel</div>
</div>
<div class="modulo-body">
<p class="modulo-desc">Fundação de toda a plataforma. Gerencia login unificado, cadastro de usuário, ativação e troca de papéis, permissões granulares por contexto e segurança de sessão. Prioridade máxima — erros aqui geram dívida técnica irreversível.</p>
<ul class="bullet-list">
<li>Login com e-mail, Google e futuramente Apple</li>
<li>Cadastro unificado com ativação progressiva de papéis</li>
<li>JWT com refresh token e controle de sessão por dispositivo</li>
<li>Middleware de permissão por papel em todas as rotas</li>
<li>Auditoria de acesso a dados sensíveis (LGPD)</li>
</ul>
</div>
</div>
<div class="modulo">
<div class="modulo-header">
<div class="modulo-num">M2</div>
<div class="modulo-title">Agendamento</div>
</div>
<div class="modulo-body">
<p class="modulo-desc">Núcleo operacional do produto para o terapeuta. Resolve o problema mais imediato do profissional: organizar sua agenda sem depender de ferramentas genéricas.</p>
<ul class="bullet-list">
<li>Configuração de disponibilidade semanal com exceções</li>
<li>Agendamento pelo paciente dentro da disponibilidade do terapeuta</li>
<li>Confirmação automática por e-mail e WhatsApp</li>
<li>Lembrete configurável (24h, 2h antes da sessão)</li>
<li>Cancelamento e reagendamento com regras de antecedência</li>
<li>Integração com Google Calendar (fase 2)</li>
</ul>
</div>
</div>
<div class="modulo">
<div class="modulo-header">
<div class="modulo-num">M3</div>
<div class="modulo-title">Cadastro e Gestão de Pacientes</div>
</div>
<div class="modulo-body">
<p class="modulo-desc">Centraliza todas as informações do paciente vinculado ao terapeuta, respeitando os princípios de privacidade e minimização de dados da LGPD.</p>
<ul class="bullet-list">
<li>Ficha cadastral completa com dados de contato e emergência</li>
<li>Vínculo terapeuta-paciente com histórico de sessões</li>
<li>Termo de consentimento digital integrado</li>
<li>Controle de status do paciente (ativo, em pausa, encerrado)</li>
<li>Histórico de encaminhamentos recebidos e realizados</li>
</ul>
</div>
</div>
<div class="modulo">
<div class="modulo-header">
<div class="modulo-num">M4</div>
<div class="modulo-title">Prontuário Eletrônico</div>
</div>
<div class="modulo-body">
<p class="modulo-desc">Registro clínico estruturado por sessão, com conformidade com as resoluções do CFP e máxima segurança de dados. Começa simples no MVP e evolui com a plataforma.</p>
<ul class="bullet-list">
<li>Anotação de sessão por texto livre com formatação básica</li>
<li>Campos estruturados opcionais por abordagem (TCC, psicanálise, humanista)</li>
<li>Registro de hipótese diagnóstica por CID-10/CID-11</li>
<li>Criptografia em repouso para todo conteúdo de prontuário</li>
<li>Acesso exclusivo do terapeuta — nem a clínica vê o conteúdo clínico</li>
<li>Escalas psicológicas integradas com correção automática (fase 2)</li>
</ul>
</div>
</div>
<div class="modulo">
<div class="modulo-header">
<div class="modulo-num">M5</div>
<div class="modulo-title">Financeiro e Cobrança</div>
</div>
<div class="modulo-body">
<p class="modulo-desc">Fecha o ciclo operacional do terapeuta: sessão realizada gera cobrança automática, paciente paga, terapeuta recebe. Sem planilhas, sem constrangimento no consultório.</p>
<ul class="bullet-list">
<li>Configuração de valor por sessão ou plano de sessões</li>
<li>Geração automática de cobrança ao confirmar sessão</li>
<li>Link de pagamento Pix e cartão via integração com gateway (Asaas)</li>
<li>Status de pagamento em tempo real: pendente, pago, atrasado</li>
<li>Repasse automático para clínica com percentual configurável</li>
<li>Relatório financeiro mensal do terapeuta</li>
</ul>
</div>
</div>
</section>
<div class="divider"></div>
<!-- CAP 9 -->
<section class="chapter" id="cap9">
<div class="chapter-header">
<span class="chapter-num">09</span>
<h2 class="chapter-title">Plataforma de Microlearning</h2>
</div>
<p>A plataforma de microlearning não é um produto secundário. É o <strong>principal motor de aquisição orgânica</strong> da plataforma e o que diferencia nosso posicionamento de todos os concorrentes.</p>
<div class="callout">Referência estratégica: HubSpot Academy — a maior escola de marketing digital do mundo foi construída para educar o mercado a usar marketing digital... com as ferramentas da HubSpot. Fazemos o mesmo para saúde mental e gestão clínica.</div>
<div class="section">
<h3 class="section-title">Trilhas de Conteúdo por Especialidade</h3>
<div class="trilha">
<div class="trilha-header">Gestão de Clínica para Psicólogos</div>
<div class="trilha-body">
<ul class="bullet-list">
<li>Como precificar sua sessão com confiança</li>
<li>Inadimplência: como prevenir e como cobrar sem destruir o vínculo</li>
<li>LGPD aplicada ao consultório de psicologia</li>
<li>Prontuário eletrônico: o que é obrigatório pelo CFP</li>
<li>Como organizar sua agenda e eliminar o no-show</li>
<li>Nota fiscal e obrigações fiscais do psicólogo autônomo</li>
</ul>
</div>
</div>
<div class="trilha">
<div class="trilha-header" style="background: linear-gradient(135deg, #1E6B52, #2DA882);">Gestão de Clínica para Psicanalistas</div>
<div class="trilha-body">
<ul class="bullet-list">
<li>O setting e o dinheiro: como falar sobre honorários sem quebrar a transferência</li>
<li>Frequência de sessões e modelo de cobrança na psicanálise</li>
<li>Documentação mínima necessária na clínica psicanalítica</li>
<li>Como estruturar uma clínica particular sendo psicanalista</li>
<li>Supervisão e análise pessoal: como e onde buscar</li>
</ul>
</div>
</div>
<div class="trilha">
<div class="trilha-header" style="background: linear-gradient(135deg, #5C3D8F, #8B6FC4);">Gestão de Clínica para Psiquiatras</div>
<div class="trilha-body">
<ul class="bullet-list">
<li>Gestão de tempo com consultas de diferentes durações</li>
<li>Receituário, laudos e documentação clínica</li>
<li>Integração com outros profissionais de saúde mental</li>
<li>Credenciamento e faturamento com planos de saúde</li>
<li>Como montar um consultório particular de psiquiatria</li>
</ul>
</div>
</div>
<div class="trilha">
<div class="trilha-header" style="background: linear-gradient(135deg, #C96A3A, #E8935A);">Para Terapeutas de Abordagens Integrativas</div>
<div class="trilha-body">
<ul class="bullet-list">
<li>Como comunicar o valor do seu trabalho para o paciente</li>
<li>Precificação de sessões mais longas e formatos alternativos</li>
<li>Documentação clínica em abordagens não convencionais</li>
<li>Como crescer com indicações no consultório</li>
</ul>
</div>
</div>
<div class="trilha">
<div class="trilha-header" style="background: linear-gradient(135deg, #374151, #6B7280);">Para Clínicas Multiprofissionais</div>
<div class="trilha-body">
<ul class="bullet-list">
<li>Como estruturar o repasse financeiro entre profissionais</li>
<li>Gestão de agenda compartilhada sem conflitos</li>
<li>Contrato de parceria entre clínica e profissional</li>
<li>Como criar uma cultura clínica coesa em equipe</li>
</ul>
</div>
</div>
</div>
</section>
<div class="divider"></div>
<!-- CAP 10 -->
<section class="chapter" id="cap10">
<div class="chapter-header">
<span class="chapter-num">10</span>
<h2 class="chapter-title">Modelo de Negócio e Monetização</h2>
</div>
<p>O modelo de negócio é SaaS com camada freemium. A estratégia de monetização foi desenhada para alinhar o crescimento da receita com o crescimento real do profissional na plataforma.</p>
<div class="section">
<h3 class="section-title">Estrutura de Planos</h3>
<div class="planos-grid">
<div class="plano-card free">
<div class="plano-nome">Gratuito</div>
<div class="plano-perfil">Paciente / Terapeuta iniciante</div>
<ul class="plano-features">
<li>Até 10 pacientes</li>
<li>Agendamento básico</li>
<li>Conteúdo introdutório grátis</li>
</ul>
</div>
<div class="plano-card pro">
<div class="plano-nome">Profissional</div>
<div class="plano-perfil">Terapeuta autônomo</div>
<ul class="plano-features">
<li>Pacientes ilimitados</li>
<li>Prontuário completo</li>
<li>Financeiro + escalas</li>
<li>Todas as trilhas de conteúdo</li>
</ul>
</div>
<div class="plano-card clinica">
<div class="plano-nome">Clínica</div>
<div class="plano-perfil">Múltiplos terapeutas</div>
<ul class="plano-features">
<li>Multi-terapeuta</li>
<li>Repasse financeiro</li>
<li>Agenda compartilhada</li>
<li>Acesso para toda a equipe</li>
</ul>
</div>
<div class="plano-card conteudo">
<div class="plano-nome">Conteúdo</div>
<div class="plano-perfil">Estudante / Paciente curioso</div>
<ul class="plano-features">
<li>Acesso completo às trilhas</li>
<li>Sem sistema de gestão</li>
<li>Assinatura mensal independente</li>
</ul>
</div>
</div>
</div>
</section>
<div class="divider"></div>
<!-- CAP 11 -->
<section class="chapter" id="cap11">
<div class="chapter-header">
<span class="chapter-num">11</span>
<h2 class="chapter-title">Estratégia de Fases de Desenvolvimento</h2>
</div>
<p>O desenvolvimento é organizado em quatro fases estratégicas, cada uma com objetivos, entregáveis e métricas de sucesso claros.</p>
<div class="fase">
<div class="fase-header" style="background: linear-gradient(135deg, #1B4F7A, #2E7FBF);">
<div class="fase-header-left">
<span class="fase-num">FASE 1</span>
<span class="fase-title">MVP e Validação</span>
</div>
<span class="fase-period">Meses 13</span>
</div>
<div class="fase-body">
<ul class="bullet-list">
<li>Sistema multi-papel funcional e sólido (fundação arquitetural)</li>
<li>Agendamento completo com lembretes via e-mail e WhatsApp</li>
<li>Cadastro de pacientes com vínculo terapeuta-paciente</li>
<li>Prontuário com anotações simples de sessão</li>
<li>Financeiro básico: cobrança automática via Pix (Asaas)</li>
<li>LGPD implementada: criptografia, consentimento, política de privacidade</li>
<li>Beta fechado com 1020 terapeutas reais</li>
<li>Frente pública de microlearning: landing page + 1 trilha inicial</li>
</ul>
</div>
</div>
<div class="fase">
<div class="fase-header" style="background: linear-gradient(135deg, #1E6B52, #2DA882);">
<div class="fase-header-left">
<span class="fase-num">FASE 2</span>
<span class="fase-title">Diferenciação Clínica</span>
</div>
<span class="fase-period">Meses 48</span>
</div>
<div class="fase-body">
<ul class="bullet-list">
<li>Escalas psicológicas integradas (PHQ-9, GAD-7, BDI) com correção automática</li>
<li>Dashboard de evolução do paciente com gráficos longitudinais</li>
<li>Módulo do paciente: diário de humor, tarefas, visualização de agenda (PWA)</li>
<li>Relatórios e laudos com template e exportação em PDF</li>
<li>Módulo de Clínica: vínculo, agenda compartilhada, repasse financeiro</li>
<li>Prontuário completo com campos estruturados por abordagem</li>
<li>Expansão do microlearning: 35 trilhas completas</li>
<li><strong>Meta:</strong> 100 terapeutas pagantes, churn abaixo de 5%/mês</li>
</ul>
</div>
</div>
<div class="fase">
<div class="fase-header" style="background: linear-gradient(135deg, #C96A3A, #E8935A);">
<div class="fase-header-left">
<span class="fase-num">FASE 3</span>
<span class="fase-title">Rede e Crescimento</span>
</div>
<span class="fase-period">Meses 918</span>
</div>
<div class="fase-body">
<ul class="bullet-list">
<li>Diretório de terapeutas: pacientes encontram profissionais na plataforma</li>
<li>Rede de encaminhamentos estruturada entre profissionais</li>
<li>Módulo de supervisão clínica com acesso controlado por caso</li>
<li>Programa de indicação com benefícios para terapeutas indicadores</li>
<li>Expansão para clínicas multiprofissionais</li>
<li><strong>Meta:</strong> 1.000 terapeutas ativos, 20+ clínicas, efeito de rede ativado</li>
</ul>
</div>
</div>
<div class="fase">
<div class="fase-header" style="background: linear-gradient(135deg, #5C3D8F, #8B6FC4);">
<div class="fase-header-left">
<span class="fase-num">FASE 4</span>
<span class="fase-title">Inteligência e Escala</span>
</div>
<span class="fase-period">18+ meses</span>
</div>
<div class="fase-body">
<ul class="bullet-list">
<li>IA de suporte clínico: sugestão bibliográfica por CID, rascunho de evolução por voz</li>
<li>Alertas de risco baseados em padrões comportamentais do paciente</li>
<li>Integração com planos de saúde: credenciamento, guias, faturamento</li>
<li>API aberta para parceiros</li>
<li>Expansão internacional para mercados lusófonos</li>
</ul>
</div>
</div>
</section>
<div class="divider"></div>
<!-- CAP 12 -->
<section class="chapter" id="cap12">
<div class="chapter-header">
<span class="chapter-num">12</span>
<h2 class="chapter-title">Cronograma do MVP (3 Meses)</h2>
</div>
<p>Cronograma desenhado para um time com frontend e backend separados, priorizando entregas que gerem valor real para o primeiro usuário no prazo de 2 a 3 meses.</p>
<div class="crono">
<div class="crono-mes">
<div class="crono-mes-title"><span>MÊS 1</span> Fundação Sólida</div>
<div class="crono-header">
<div class="crono-header-cell"></div>
<div class="crono-header-cell">Frontend</div>
<div class="crono-header-cell">Backend</div>
<div class="crono-header-cell">Entrega</div>
</div>
<div class="crono-semanas">
<div class="crono-semana">
<div class="crono-periodo">Sem<br>12</div>
<div class="crono-cell front">Telas de login, cadastro, troca de papel, navegação base</div>
<div class="crono-cell back">Auth completo, JWT, estrutura de roles no banco, middleware de permissão</div>
<div class="crono-cell entrega">Usuário cria conta e navega entre papéis</div>
</div>
<div class="crono-semana">
<div class="crono-periodo">Sem<br>34</div>
<div class="crono-cell front">Perfil por papel, dashboard inicial por contexto</div>
<div class="crono-cell back">API de usuário multi-papel, segregação de dados por contexto</div>
<div class="crono-cell entrega">Experiência multi-papel funcional e sem fricção</div>
</div>
</div>
</div>
<div class="crono-mes">
<div class="crono-mes-title"><span>MÊS 2</span> Core do Produto</div>
<div class="crono-header">
<div class="crono-header-cell"></div>
<div class="crono-header-cell">Frontend</div>
<div class="crono-header-cell">Backend</div>
<div class="crono-header-cell">Entrega</div>
</div>
<div class="crono-semanas">
<div class="crono-semana">
<div class="crono-periodo">Sem<br>12</div>
<div class="crono-cell front">Tela de agenda do terapeuta, configuração de disponibilidade</div>
<div class="crono-cell back">API de slots, regras de agendamento, validações de conflito</div>
<div class="crono-cell entrega">Terapeuta configura agenda</div>
</div>
<div class="crono-semana">
<div class="crono-periodo">Sem<br>34</div>
<div class="crono-cell front">Fluxo de agendamento pelo paciente, confirmações, tela de sessões</div>
<div class="crono-cell back">Notificações por e-mail, integração WhatsApp, vínculo paciente-terapeuta</div>
<div class="crono-cell entrega">Paciente agenda, ambos recebem confirmação</div>
</div>
</div>
</div>
<div class="crono-mes">
<div class="crono-mes-title"><span>MÊS 3</span> Fechar o Ciclo e Lançar</div>
<div class="crono-header">
<div class="crono-header-cell"></div>
<div class="crono-header-cell">Frontend</div>
<div class="crono-header-cell">Backend</div>
<div class="crono-header-cell">Entrega</div>
</div>
<div class="crono-semanas">
<div class="crono-semana">
<div class="crono-periodo">Sem<br>12</div>
<div class="crono-cell front">Tela financeira, histórico de sessões, status de pagamento</div>
<div class="crono-cell back">Integração Asaas (Pix), geração automática de cobrança, webhooks</div>
<div class="crono-cell entrega">Ciclo financeiro completo funcionando</div>
</div>
<div class="crono-semana">
<div class="crono-periodo">Sem<br>34</div>
<div class="crono-cell front">Anotações de sessão, UX refinado, landing page de microlearning</div>
<div class="crono-cell back">Revisão de segurança, LGPD, ambiente de produção, monitoramento</div>
<div class="crono-cell entrega">Beta com 1020 terapeutas reais</div>
</div>
</div>
</div>
</div>
</section>
<div class="divider"></div>
<!-- CAP 13 -->
<section class="chapter" id="cap13">
<div class="chapter-header">
<span class="chapter-num">13</span>
<h2 class="chapter-title">Riscos e Mitigações</h2>
</div>
<div class="risco">
<div>
<div class="risco-title">Arquitetura multi-papel mal modelada</div>
<p class="risco-mit">Revisar o modelo de dados antes de construir qualquer módulo adicional. Garantir que 'papel' é um atributo do usuário, não uma tabela separada. Code review obrigatório nessa camada.</p>
</div>
<div class="risco-tags"><span class="tag tag-alto">Impacto Alto</span><span class="tag tag-medio">Prob. Médio</span></div>
</div>
<div class="risco">
<div>
<div class="risco-title">Integração de pagamento subestimada</div>
<p class="risco-mit">Reservar pelo menos 2 semanas dedicadas para a integração com Asaas. Testar todos os fluxos de webhook, falha de pagamento e conciliação.</p>
</div>
<div class="risco-tags"><span class="tag tag-medio">Impacto Médio</span><span class="tag tag-alto">Prob. Alto</span></div>
</div>
<div class="risco">
<div>
<div class="risco-title">Dados sensíveis sem criptografia</div>
<p class="risco-mit">Implementar criptografia em repouso para prontuários e anotações desde o início. Refazer depois é caro e arriscado. Tratar como requisito não-negociável.</p>
</div>
<div class="risco-tags"><span class="tag tag-alto">Impacto Alto</span><span class="tag tag-baixo">Prob. Baixo</span></div>
</div>
<div class="risco">
<div>
<div class="risco-title">Desalinhamento frontend/backend</div>
<p class="risco-mit">Definir e documentar todos os contratos de API na semana 1 (Swagger/Notion). Frontend desenvolve contra mocks. Reunião de alinhamento semanal obrigatória.</p>
</div>
<div class="risco-tags"><span class="tag tag-medio">Impacto Médio</span><span class="tag tag-alto">Prob. Alto</span></div>
</div>
<div class="risco">
<div>
<div class="risco-title">Adoção lenta pelos terapeutas</div>
<p class="risco-mit">Beta fechado com 1020 terapeutas antes do lançamento público. Onboarding em 5 minutos. Plano gratuito generoso. Microlearning como canal de aquisição orgânica.</p>
</div>
<div class="risco-tags"><span class="tag tag-alto">Impacto Alto</span><span class="tag tag-medio">Prob. Médio</span></div>
</div>
<div class="risco">
<div>
<div class="risco-title">Escopo crescente comprometendo o prazo</div>
<p class="risco-mit">Definição rígida do que entra e não entra no MVP. Qualquer nova feature proposta vai para o backlog, não para o sprint atual. Product Owner com poder de veto.</p>
</div>
<div class="risco-tags"><span class="tag tag-alto">Impacto Alto</span><span class="tag tag-alto">Prob. Alto</span></div>
</div>
</section>
<div class="divider"></div>
<!-- CAP 14 -->
<section class="chapter" id="cap14">
<div class="chapter-header">
<span class="chapter-num">14</span>
<h2 class="chapter-title">Estratégia de Adoção e Crescimento</h2>
</div>
<div class="section">
<h3 class="section-title">O Funil de Aquisição</h3>
<div class="funil">
<div class="funil-step">
<div class="funil-icon" style="background: var(--azul-ice);">📢</div>
<div>
<div class="funil-step-title">Topo do Funil — Conteúdo</div>
<p class="funil-step-desc">Microlearning gratuito atrai terapeutas buscando aprender gestão. SEO em conteúdo de blog e trilhas. Presença no Instagram e LinkedIn com dicas de gestão clínica.</p>
</div>
</div>
<div class="funil-step">
<div class="funil-icon" style="background: var(--verde-suave);">🔬</div>
<div>
<div class="funil-step-title">Meio do Funil — Experimentação</div>
<p class="funil-step-desc">Plano gratuito com limite generoso. Onboarding em 5 minutos com dados de exemplo. O terapeuta experimenta sem compromisso e vê valor antes de pagar.</p>
</div>
</div>
<div class="funil-step">
<div class="funil-icon" style="background: var(--laranja-suave);">💳</div>
<div>
<div class="funil-step-title">Fundo do Funil — Conversão</div>
<p class="funil-step-desc">Quando ultrapassa o limite do plano gratuito, a conversão é natural. O terapeuta já depende do sistema e o upgrade é a continuação lógica.</p>
</div>
</div>
<div class="funil-step">
<div class="funil-icon" style="background: var(--roxo-suave);">🔒</div>
<div>
<div class="funil-step-title">Retenção — Profundidade</div>
<p class="funil-step-desc">Escalas clínicas, relatórios e histórico acumulado criam lock-in legítimo. O custo de sair é alto porque os dados clínicos estão na plataforma.</p>
</div>
</div>
<div class="funil-step">
<div class="funil-icon" style="background: var(--azul-ice);">🌐</div>
<div>
<div class="funil-step-title">Expansão — Indicação</div>
<p class="funil-step-desc">Programa de indicação: terapeuta indica colega, ambos ganham benefício. Com efeito de rede, cada terapeuta traz naturalmente sua rede de colegas.</p>
</div>
</div>
</div>
</div>
<div class="section">
<h3 class="section-title">Estratégia de Beta — Os Primeiros 20 Terapeutas</h3>
<ul class="bullet-list">
<li>Recrutar manualmente via LinkedIn, grupos de psicólogos no WhatsApp e Facebook, indicações pessoais.</li>
<li>Oferecer 6 meses gratuitos no plano Profissional em troca de uso semanal e feedback honesto.</li>
<li>Realizar call de 30 minutos com cada beta-tester após 2 semanas de uso.</li>
<li>Observar onde travam no onboarding, o que tentam fazer e não encontram, o que elogiam espontaneamente.</li>
<li>Usar esses aprendizados para uma rodada de ajustes de 2 semanas antes do lançamento público.</li>
<li>Transformar os melhores beta-testers em embaixadores com benefícios permanentes.</li>
</ul>
</div>
</section>
<div class="divider"></div>
<!-- CAP 15 -->
<section class="chapter" id="cap15">
<div class="chapter-header">
<span class="chapter-num">15</span>
<h2 class="chapter-title">Visão de Longo Prazo</h2>
</div>
<p>Em 5 anos, a plataforma deve ser reconhecida como a infraestrutura da saúde mental brasileira — o ambiente onde profissionais aprendem, trabalham, colaboram e crescem.</p>
<div class="callout">Visão de longo prazo: Ser para o terapeuta brasileiro o que a Bloomberg é para o mercado financeiro — a plataforma que nenhum profissional sério consegue imaginar trabalhar sem ela.</div>
<div class="visao-grid">
<div class="visao-card">
<div class="icon">🗺</div>
<div class="title">Plataforma de Referência Nacional</div>
<p class="desc">O maior diretório de terapeutas do Brasil, com pacientes encontrando profissionais por abordagem, especialidade e localização.</p>
</div>
<div class="visao-card">
<div class="icon">🎓</div>
<div class="title">Educação Continuada Reconhecida</div>
<p class="desc">Certificações reconhecidas pelo mercado. Parcerias com conselhos profissionais e universidades.</p>
</div>
<div class="visao-card">
<div class="icon">🤖</div>
<div class="title">IA Clínica de Suporte</div>
<p class="desc">Assistente que apoia na documentação, sugestão de intervenções e identificação de padrões de risco — com o profissional como protagonista.</p>
</div>
<div class="visao-card">
<div class="icon">🌍</div>
<div class="title">Expansão Lusófona</div>
<p class="desc">Portugal, Angola e Moçambique como mercados naturais de expansão, aproveitando a base já construída.</p>
</div>
<div class="visao-card">
<div class="icon">💚</div>
<div class="title">Impacto Social Mensurável</div>
<p class="desc">Contribuir para o aumento da qualidade e acessibilidade do cuidado em saúde mental no Brasil, com métricas públicas de impacto.</p>
</div>
</div>
<div style="margin-top: 3rem; text-align: center; padding: 2rem; border: 1px solid var(--linha); border-radius: 16px; background: var(--branco);">
<p style="font-style: italic; color: var(--cinza-medio); font-size: 0.9rem; margin: 0;">Este documento é vivo. Deve ser revisado e atualizado a cada fase concluída, incorporando os aprendizados do mercado e as decisões do time.</p>
</div>
</section>
</main>
<!-- FOOTER -->
<footer class="footer">
<strong>Plataforma de Saúde Mental</strong> — Documento Estratégico Fundacional<br>
Versão 1.0 · 2025 · Uso interno restrito
</footer>
<script>
// Progress bar
window.addEventListener('scroll', () => {
const total = document.documentElement.scrollHeight - window.innerHeight;
const progress = (window.scrollY / total) * 100;
document.getElementById('progressBar').style.width = progress + '%';
});
// Nav toggle
const toggle = document.getElementById('navToggle');
const sidenav = document.getElementById('sidenav');
const overlay = document.getElementById('overlay');
toggle.addEventListener('click', () => {
sidenav.classList.toggle('open');
overlay.classList.toggle('show');
});
overlay.addEventListener('click', () => {
sidenav.classList.remove('open');
overlay.classList.remove('show');
});
sidenav.querySelectorAll('a').forEach(a => {
a.addEventListener('click', () => {
sidenav.classList.remove('open');
overlay.classList.remove('show');
});
});
// Intersection observer for chapters
const chapters = document.querySelectorAll('.chapter');
const obs = new IntersectionObserver((entries) => {
entries.forEach(e => {
if (e.isIntersecting) e.target.classList.add('visible');
});
}, { threshold: 0.08 });
chapters.forEach(c => obs.observe(c));
// Active nav link
const navLinks = document.querySelectorAll('.sidenav a');
const secObs = new IntersectionObserver((entries) => {
entries.forEach(e => {
if (e.isIntersecting) {
navLinks.forEach(a => a.classList.remove('active'));
const id = e.target.getAttribute('id');
const link = document.querySelector(`.sidenav a[href="#${id}"]`);
if (link) link.classList.add('active');
}
});
}, { threshold: 0.3 });
chapters.forEach(c => secObs.observe(c));
</script>
</body>
</html>