/* Camada premium: alinha a landing à linguagem do sistema (login e app).
   Floresta quase-preto, superfícies brancas, rótulos em mono, Sol só nos detalhes.
   Carregada depois de style.css e color.css; para voltar ao visual anterior, basta remover o <link>. */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500;600&display=swap');

:root {
  --ink: #0c1a14; --ink-2: #13261d; --ink-3: #22392e;
  --mint: #5fd39a; --brand-600: #0e7a4e; --sun: #ffc94d;
  --paper: #f6f9f7; --surface: #fff; --card-line: #d6e3db;
  --text-2: #4e6358;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --shadow-card: 0 1px 2px rgb(12 26 20 / .05), 0 8px 24px -10px rgb(12 26 20 / .14);
  --shadow-pop: 0 30px 60px -24px rgb(12 26 20 / .35);
  --dots-dark: radial-gradient(rgb(95 211 154 / .13) 1px, transparent 1px) 0 0 / 22px 22px;
}
body { background: var(--paper); color: var(--ink); }
::selection { background: var(--mint); color: var(--ink); }
:focus-visible { outline: 2px solid var(--brand-600); outline-offset: 3px; }

/* ── Rótulos: mono, maiúsculo, sem pílula (igual "TERAPIAS DO NEURODESENVOLVIMENTO" no login) */
.eyebrow, .step-label {
  font: 600 11.5px/1.2 var(--mono) !important; letter-spacing: .14em; text-transform: uppercase;
  background: none !important; padding: 0 !important; color: var(--brand-600) !important;
}
.eyebrow:before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 4px rgb(95 211 154 / .2); }
.step-label>span { font-family: var(--mono); background: var(--ink) !important; color: var(--mint) !important; }
.operations .eyebrow, .contact-copy .eyebrow, .plan-featured .eyebrow { color: var(--mint) !important; }

/* ── Títulos: tinta Floresta, destaque em verde profundo; no escuro, menta */
.hero h1, .section-heading h2, .journey-heading h2, .feature-copy h2, .trust-card h2, .faq h2 { color: var(--ink); letter-spacing: -.035em; }
.hero h1>span, .section-heading h2>span, .team-section h2>span { color: var(--brand-600); }
.hero h1>span:after { background: var(--sun); }
.plans .plan-featured h2 { color: #fff; }
.operations h2>span, .contact-copy h2>span, .plan-featured h2>span { color: var(--mint); }

/* ── Botões: tinta com seta no círculo menta (botão "Entrar" do sistema) */
.button, .header .button.mint, .hero-actions .button.mint, .plans .button, .button.dark {
  background: var(--ink) !important; color: #fff !important; border: 0 !important;
  border-radius: 14px; box-shadow: 0 10px 24px -12px rgb(12 26 20 / .5) !important;
  padding-right: 10px !important; gap: 14px;
}
.button svg { box-sizing: content-box; width: 14px; height: 14px; padding: 8px; border-radius: 50%; background: var(--mint); color: var(--ink); transition: transform .25s; }
.button:hover svg { transform: translateX(3px); }
.button:hover { background: var(--ink-2) !important; }
.plan-featured .button, .contact-form-card .button { background: var(--mint) !important; color: var(--ink) !important; }
.plan-featured .button svg, .contact-form-card .button svg { background: var(--ink); color: var(--mint); }
.plan-featured .button:hover, .contact-form-card .button:hover { background: #7ce3ae !important; }
.hero-actions .button.mint { padding: 14px 12px 14px 30px !important; }

/* ── Hero: claro e limpo, grade de pontos, sem as bolhas */
.hero-zone { background: linear-gradient(180deg, #e7f3ec 0%, var(--paper) 100%); color: var(--ink); }
.color-shapes { display: none; }
.hero-grid { background-image: radial-gradient(rgb(12 26 20 / .09) 1px, transparent 1px); }
.header, .header nav { color: var(--ink); }
.header nav a { color: var(--text-2); }
.header nav a:hover { color: var(--ink); }
.announcement { background: var(--surface); border-color: var(--card-line); color: var(--ink); box-shadow: var(--shadow-card); }
.announcement-dot { background: var(--sun); box-shadow: 0 0 0 4px rgb(255 201 77 / .25); }
.hero>p, .hero-trust { color: var(--text-2); }
.hero-trust svg { color: var(--brand-600); }
.browser-frame { border-color: var(--card-line); box-shadow: var(--shadow-pop); border-radius: 20px; }
.floating-note, .stage-note, .family-note, .portal-demo-note { background: var(--surface); border-color: var(--card-line); box-shadow: var(--shadow-card); }

/* ── Faixa de especialidades: linha fina, sem caixa */
.specialties { background: none; border: 0; box-shadow: none; border-block: 1px solid var(--card-line); border-radius: 0; }
.specialties>p { font-family: var(--mono); letter-spacing: .14em; }
.specialties i { background: var(--mint); }

/* ── Seções claras: alternam papel e branco em vez de menta sobre menta */
.journey-section, .team-section { background: var(--surface); border-block: 1px solid var(--card-line); }
.clinical, .faq, .footer { background: transparent !important; box-shadow: none !important; border: 0; }
.footer { border-top: 1px solid var(--card-line); }
.intro-card, .journey-detail, .role-panel, .trust-card.migration, .privacy, .clinical-visual, .faq-list details[open] {
  background: var(--surface) !important; border: 1px solid var(--card-line) !important; box-shadow: var(--shadow-card);
}
.journey-detail, .role-panel { background: var(--paper) !important; box-shadow: none; }
.intro-card { border-radius: 24px; }
.intro-card:hover { transform: translateY(-4px); box-shadow: 0 24px 48px -24px rgb(12 26 20 / .3); }
.intro-card:nth-child(2) p, .intro-card:nth-child(2) a { color: inherit; }
.intro-card .feature-icon, .intro-card:nth-child(2) .feature-icon { background: #eefbf3; color: var(--brand-600); }
.session-stage, .family-stage { background: radial-gradient(circle at 50% 40%, #e3f4ea, var(--paper) 70%); border-color: var(--card-line); }

/* Abas e trilhas: selecionado em tinta, como a navegação do sistema */
.journey-track button[aria-selected=true], .visual-tabs button[aria-selected=true], .roles-tabs button[aria-selected=true] {
  background: var(--ink) !important; color: #fff !important; border-color: var(--ink) !important; box-shadow: none;
}
.journey-track button[aria-selected=true] small { color: #a9c2b4; }
.journey-track button[aria-selected=true] .track-dot { border-color: var(--mint); background: var(--mint); }
.journey-symbol, .role-symbol, .journey-detail .journey-symbol { font-family: var(--mono); background: var(--ink); color: var(--mint); border: 0; }
.roles-tabs button, .visual-tabs button { background: var(--surface); }
.journey-tag, .role-tags span, .family-tags span { background: #eefbf3; color: var(--brand-600); border: 1px solid #ccebd9; }

/* ── Seções escuras: Floresta liso com grade de pontos (fundo do login), sem padrão de folhas */
.operations, .contact-section { background: var(--dots-dark), radial-gradient(ellipse at 85% 0%, rgb(95 211 154 / .14), transparent 55%), var(--ink) !important; }
.operations:before { display: none; }
.plan-featured { background: var(--dots-dark), radial-gradient(ellipse at 100% 0%, rgb(95 211 154 / .18), transparent 60%), var(--ink) !important; }
.intro-card:nth-child(3) { background: var(--dots-dark), var(--ink) !important; border-color: var(--ink-3) !important; }
.intro-card:nth-child(3) .feature-icon { background: var(--ink-3); color: var(--mint); }
.automation-flow, .operation-grid article { background: rgb(255 255 255 / .03); border-color: var(--ink-3); box-shadow: none; }
.automation-flow i, .operation-grid article>svg { color: var(--mint); }
.plan-badge { background: var(--sun); color: var(--ink); }
.contact-form-card { background: var(--surface) !important; border: 0; box-shadow: 0 40px 80px -30px rgb(0 0 0 / .6); }
.contact-brand-path i:last-child { background: var(--sun); }

/* Números e detalhes técnicos em mono */
.migration li>span, .screen-period, .visual-header>span:last-child, .faq-instruction, .journey-instruction, .roles-instruction, .chart-instruction, .footer-bottom { font-family: var(--mono); font-size: 12px; letter-spacing: .02em; }
.faq-list summary>span { background: var(--ink); color: var(--mint); }

/* Entrada suave das seções, respeitando quem prefere menos movimento */
@media (prefers-reduced-motion: reduce) { .button svg, .intro-card { transition: none; } }