/* ==========================================================================
   PsicoElo — folha de estilo do site institucional
   Reconstrucao da landing do psicoeloApp (Next/Tailwind) em Bootstrap 5.3 +
   CSS proprio. Tokens da paleta oficial da marca (manual de identidade):
   Teal Profundo #0E4F5D, Coral Suave #FF8066, Azul Gelo #EAF2F4,
   Cinza Escuro #2C3E50, Cinza Muted #7F8C8D. Tipografia Noto Sans.
   Tema claro fixo: e material de venda, nao interface de trabalho.
   ========================================================================== */

:root {
  --pe-teal:        #0E4F5D;   /* marca / institucional */
  --pe-teal-dark:   #0A3B45;
  --pe-coral:       #FF8066;   /* accent / destaque */
  --pe-coral-dark:  #E5654B;
  --pe-coral-contraste: #4A1C10;
  --pe-gelo:        #EAF2F4;   /* superficie-2 */
  --pe-grafite:     #2C3E50;   /* texto */
  --pe-cinza:       #7F8C8D;   /* texto fraco */

  --pe-fundo:       #F4F8F9;
  --pe-superficie:  #FFFFFF;
  --pe-borda:       #D8E4E7;

  --pe-container:   1152px;    /* max-w-6xl */
  --pe-radius:      12px;
  --pe-radius-lg:   16px;
  --pe-font:        "Noto Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  --bs-body-font-family: var(--pe-font);
  --bs-body-color: var(--pe-grafite);
  --bs-link-color: var(--pe-teal);
  --bs-link-hover-color: var(--pe-teal-dark);
}

/* ------------------------------------------------------------------ base -- */

body {
  font-family: var(--pe-font);
  color: var(--pe-grafite);
  background: var(--pe-superficie);
  overflow-x: hidden;
}

.container { max-width: var(--pe-container); }

.pe-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--pe-teal);
  color: #fff;
  padding: .6rem 1rem;
  z-index: 1000;
}
.pe-skip:focus { left: 0; }

a { text-decoration: none; }

.pe-teal   { color: var(--pe-teal); }
.pe-accent { color: var(--pe-coral); }
.pe-fraco  { color: var(--pe-cinza); }

/* ---------------------------------------------------------------- botoes -- */

.pe-btn-accent,
.pe-btn-outline,
.pe-btn-teal {
  display: inline-block;
  border-radius: var(--pe-radius);
  padding: .75rem 1.5rem;
  font-weight: 700;
  line-height: 1.2;
  border: 1px solid transparent;
  transition: opacity .15s ease, background-color .15s ease;
}
.pe-btn-accent {
  background: var(--pe-coral);
  color: var(--pe-coral-contraste);
}
.pe-btn-accent:hover { opacity: .9; color: var(--pe-coral-contraste); }

.pe-btn-teal {
  background: var(--pe-teal);
  color: #fff;
}
.pe-btn-teal:hover { opacity: .9; color: #fff; }

.pe-btn-outline {
  background: transparent;
  border-color: var(--pe-borda);
  color: var(--pe-grafite);
}
.pe-btn-outline:hover { background: var(--pe-gelo); color: var(--pe-grafite); }

.pe-btn-sm { padding: .5rem 1rem; font-size: .875rem; }
.pe-btn-block { display: block; width: 100%; text-align: center; }

/* --------------------------------------------------------------- header --- */

.pe-header {
  position: sticky;
  top: 0;
  z-index: 30;
  border-bottom: 1px solid var(--pe-borda);
  background: rgba(255, 255, 255, .9);
  backdrop-filter: blur(8px);
}
.pe-header .navbar { padding: 0; }
.pe-header .container { min-height: 64px; }

.pe-wordmark {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: var(--pe-teal);
}
.pe-logo { height: 36px; width: 36px; color: var(--pe-teal); }
.pe-wordmark-text { font-size: 1.25rem; color: var(--pe-teal); }
.pe-wordmark-text b { font-weight: 700; }

.pe-header .nav-link {
  color: var(--pe-cinza);
  font-size: .9rem;
  font-weight: 500;
}
.pe-header .nav-link:hover { color: var(--pe-grafite); }
.navbar-toggler { border: none; font-size: 1.5rem; color: var(--pe-teal); }
.navbar-toggler:focus { box-shadow: none; }

/* ----------------------------------------------------------------- hero --- */

.pe-section { border-bottom: 1px solid var(--pe-borda); }
.pe-section-gelo { background: var(--pe-gelo); }
.pe-py { padding-top: 5rem; padding-bottom: 5rem; }
@media (min-width: 992px) { .pe-hero .pe-py { padding-top: 7rem; padding-bottom: 7rem; } }

.pe-hero {
  border-bottom: 1px solid var(--pe-borda);
  background: linear-gradient(to bottom, var(--pe-gelo), var(--pe-superficie));
}
.pe-eyebrow {
  display: inline-block;
  border: 1px solid var(--pe-teal);
  border-radius: 999px;
  padding: .25rem .75rem;
  font-size: .75rem;
  font-weight: 700;
  color: var(--pe-teal);
}
.pe-hero h1 {
  margin-top: 1.25rem;
  font-size: 2.25rem;
  line-height: 1.15;
  font-weight: 700;
  color: var(--pe-grafite);
}
@media (min-width: 576px) { .pe-hero h1 { font-size: 3rem; } }
.pe-hero-lead {
  margin-top: 1.25rem;
  font-size: 1.125rem;
  color: var(--pe-cinza);
}
.pe-hero-nota { margin-top: 1rem; font-size: .875rem; color: var(--pe-cinza); }

/* Amostra da tela real do sistema */
.pe-mock {
  overflow: hidden;
  border-radius: var(--pe-radius-lg);
  border: 1px solid var(--pe-borda);
  background: var(--pe-superficie);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
}
.pe-mock-bar {
  display: flex;
  align-items: center;
  gap: .5rem;
  border-bottom: 1px solid var(--pe-borda);
  background: var(--pe-gelo);
  padding: .75rem 1rem;
}
.pe-dot { height: 10px; width: 10px; border-radius: 999px; background: rgba(127, 140, 141, .4); }
.pe-dot--on { background: var(--pe-coral); }
.pe-mock-bar span.pe-mock-label { margin-left: .5rem; font-size: .75rem; color: var(--pe-cinza); }
.pe-mock-body { padding: 1.25rem; }
.pe-mock-body table { width: 100%; font-size: .75rem; margin-top: 1rem; }
.pe-mock-body th { color: var(--pe-cinza); font-weight: 700; padding-bottom: .5rem; text-align: left; }
.pe-mock-body td { padding: .625rem .75rem .625rem 0; border-top: 1px solid var(--pe-borda); }
.pe-mock-body td.pe-val { color: var(--pe-teal); font-weight: 700; }
.pe-mock-row-alt { background: rgba(255, 128, 102, .06); }
.pe-tag-diverge {
  display: inline-block;
  margin-left: .375rem;
  border-radius: 999px;
  background: var(--pe-coral);
  color: var(--pe-coral-contraste);
  padding: .05rem .375rem;
  font-size: .625rem;
  font-weight: 700;
}
.pe-mock-nota { margin-top: 1rem; font-size: .75rem; color: var(--pe-cinza); }

/* ------------------------------------------------------------- tipografia - */

.pe-h2 { font-size: 1.875rem; font-weight: 700; color: var(--pe-grafite); }
.pe-lead { color: var(--pe-cinza); }
.pe-max2 { max-width: 42rem; }
.scroll-mt { scroll-margin-top: 5rem; }

/* -------------------------------------------------------------- cartoes --- */

.pe-card {
  border: 1px solid var(--pe-borda);
  border-radius: var(--pe-radius);
  background: var(--pe-superficie);
  padding: 1.5rem;
  height: 100%;
}
.pe-card-lg { padding: 1.75rem; }
.pe-card h3 { font-weight: 700; }
.pe-card-titulo-teal { color: var(--pe-teal); font-weight: 700; }
.pe-card p { color: var(--pe-cinza); font-size: .875rem; margin-bottom: 0; }

.pe-elo-nome {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--pe-coral);
}
.pe-elo-frase { margin-top: .5rem; font-size: 1.25rem; font-weight: 700; color: var(--pe-grafite); }

/* lista "o basico, bem feito" */
.pe-basico-item {
  display: flex;
  gap: .5rem;
  font-size: .875rem;
  color: var(--pe-cinza);
}
.pe-bullet {
  margin-top: .5rem;
  height: 6px;
  width: 6px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--pe-coral);
}
.pe-bullet--teal { background: var(--pe-teal); }

/* ---------------------------------------------------------------- planos -- */

.pe-plano {
  border: 1px solid var(--pe-borda);
  border-radius: var(--pe-radius);
  background: var(--pe-superficie);
  padding: 2rem;
  height: 100%;
}
.pe-plano--destaque { border: 2px solid var(--pe-coral); }
.pe-plano-rotulo {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--pe-cinza);
}
.pe-plano-selo {
  border-radius: 999px;
  background: var(--pe-coral);
  color: var(--pe-coral-contraste);
  padding: .1rem .625rem;
  font-size: .75rem;
  font-weight: 700;
}
.pe-plano-preco { margin-top: .75rem; font-size: 2.25rem; font-weight: 700; color: var(--pe-teal); }
.pe-plano-preco small { font-size: 1rem; font-weight: 400; color: var(--pe-cinza); }
.pe-plano-resumo { margin-top: .5rem; font-size: .875rem; color: var(--pe-cinza); }
.pe-plano-itens { margin-top: 1.5rem; list-style: none; padding: 0; font-size: .875rem; }
.pe-plano-itens li { display: flex; gap: .5rem; margin-bottom: .625rem; }
.pe-plano-nota { margin-top: .75rem; font-size: .75rem; color: var(--pe-cinza); }

/* ------------------------------------------------------ formulario lista -- */

.pe-form-wrap {
  border: 1px solid var(--pe-borda);
  border-radius: var(--pe-radius);
  background: var(--pe-superficie);
  padding: 1.75rem;
}
.pe-label {
  display: block;
  margin-bottom: .375rem;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--pe-cinza);
}
.pe-label .pe-opcional { font-weight: 400; text-transform: none; }
.pe-campo {
  width: 100%;
  border: 1px solid var(--pe-borda);
  border-radius: var(--pe-radius);
  background: var(--pe-superficie);
  padding: .625rem .75rem;
  font-size: .875rem;
  color: var(--pe-grafite);
}
.pe-campo:focus { outline: 2px solid rgba(14, 79, 93, .45); outline-offset: 1px; border-color: var(--pe-teal); }
.pe-honeypot { position: absolute; left: -9999px; height: 0; width: 0; overflow: hidden; }
.pe-form-nota { font-size: .75rem; color: var(--pe-cinza); }
.pe-form-erro { font-size: .875rem; font-weight: 700; color: var(--pe-coral-dark); }

.pe-sucesso {
  border: 1px solid var(--pe-teal);
  border-radius: var(--pe-radius);
  background: var(--pe-superficie);
  padding: 2rem;
  text-align: center;
}
.pe-sucesso p:first-child { font-size: 1.125rem; font-weight: 700; color: var(--pe-teal); }
.pe-sucesso p:last-child { font-size: .875rem; color: var(--pe-cinza); margin-bottom: 0; }

/* ------------------------------------------------------------------ faq --- */

.pe-faq details {
  border-top: 1px solid var(--pe-borda);
  padding: 1rem 0;
}
.pe-faq details summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  cursor: pointer;
  font-weight: 700;
  list-style: none;
}
.pe-faq details summary::-webkit-details-marker { display: none; }
.pe-faq details summary .pe-faq-sinal { color: var(--pe-cinza); transition: transform .15s ease; }
.pe-faq details[open] summary .pe-faq-sinal { transform: rotate(45deg); }
.pe-faq details p { margin-top: .75rem; font-size: .875rem; color: var(--pe-cinza); margin-bottom: 0; }

.pe-cta-login {
  margin-top: 3rem;
  border: 1px solid var(--pe-borda);
  border-radius: var(--pe-radius);
  background: var(--pe-gelo);
  padding: 1.75rem;
  text-align: center;
}
.pe-cta-login p { font-weight: 700; margin-bottom: .75rem; }

/* ------------------------------------------------------- novidades / blog - */

.pe-post-card {
  border: 1px solid var(--pe-borda);
  border-radius: var(--pe-radius);
  overflow: hidden;
  background: var(--pe-superficie);
  height: 100%;
}
.pe-post-card img { width: 100%; height: 180px; object-fit: cover; }
.pe-post-card .pe-post-body { padding: 1.25rem; }
.pe-post-card h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: .5rem; }
.pe-post-card h3 a { color: var(--pe-grafite); }
.pe-post-card p { font-size: .875rem; color: var(--pe-cinza); }

/* --------------------------------------------------------------- footer --- */

.pe-footer {
  border-top: 1px solid var(--pe-borda);
  background: var(--pe-gelo);
  padding: 3rem 0;
}
.pe-footer-brand { margin-bottom: .75rem; }
.pe-footer-sobre { font-size: .875rem; color: var(--pe-cinza); }
.pe-footer-titulo { font-weight: 700; margin-bottom: .75rem; }
.pe-footer-links { list-style: none; padding: 0; margin: 0; }
.pe-footer-links li { margin-bottom: .5rem; }
.pe-footer-links a { color: var(--pe-cinza); font-size: .9rem; }
.pe-footer-links a:hover { color: var(--pe-grafite); }
.pe-footer-legal {
  margin-top: 2.5rem;
  border-top: 1px solid var(--pe-borda);
  padding-top: 1.5rem;
  font-size: .75rem;
  color: var(--pe-cinza);
}

/* -------------------------------------------------- paginas de texto ----- */

.pe-prosa { max-width: 48rem; }
.pe-prosa h1 { font-size: 1.875rem; font-weight: 700; }
.pe-prosa .pe-prosa-data { margin-top: .5rem; font-size: .875rem; color: var(--pe-cinza); }
.pe-prosa section { margin-top: 2rem; }
.pe-prosa h2 { font-size: 1.125rem; font-weight: 700; }
.pe-prosa p { margin-top: .5rem; font-size: .9rem; line-height: 1.7; color: var(--pe-cinza); }
.pe-prosa a { color: var(--pe-teal); font-weight: 700; }