/* ============================================================
   Dra. Juliana Assunção — sistema visual compartilhado
   Usado por: index, consulta, ansiedade, sobrecarga, maes, temperamento
   ============================================================ */

:root {
  --gx-1: 6%; --gx-2: 28%; --gx-3: 62%; --gx-4: 94%; --gy-1: 12%;
  --teal: #0d9488; --teal-light: #5eead4; --sky: #7dd3fc;
}

html { scroll-behavior: smooth; }
body { font-family: 'Inter', system-ui, sans-serif; }

/* ===== AURA — aurora lenta de cor no topo da página ===== */
.aura {
  position: absolute; top: 0; left: 0; right: 0; height: 920px; z-index: -10;
  overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 68%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 0%, black 68%, transparent 100%);
}
.aura::before, .aura::after {
  content: ""; position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.25;
}
.aura::before {
  width: 62vw; height: 62vw; left: -5vw; top: -16vw;
  background: radial-gradient(circle at 30% 30%, #2dd4bf 0%, #14b8a6 40%, transparent 70%);
  animation: aura-drift-1 20s ease-in-out infinite;
}
.aura::after {
  width: 58vw; height: 58vw; right: -8vw; top: -12vw;
  background: radial-gradient(circle at 60% 40%, #38bdf8 0%, #0ea5e9 44%, transparent 72%);
  animation: aura-drift-2 26s ease-in-out infinite;
}
.aura .aura-blob {
  position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.16;
  width: 44vw; height: 44vw; left: 30vw; top: -8vw;
  background: radial-gradient(circle at 50% 50%, #22d3ee 0%, #06b6d4 46%, transparent 70%);
  animation: aura-drift-3 31s ease-in-out infinite;
}
/* Aura das subpáginas.
   O hero delas é texto sobre fundo liso — sem a foto e o layout denso da home
   para competir, a aura em intensidade cheia satura a tela e derruba o contraste
   da segunda linha do h1 (slate-400). Menor, mais fraca e mais espalhada. */
.aura-sm { height: 560px; }
.aura-sm::before, .aura-sm::after { opacity: .38; filter: blur(110px); }
.aura-sm::before { width: 52vw; height: 52vw; top: -22vw; }
.aura-sm::after { width: 48vw; height: 48vw; top: -20vw; }
.aura-sm .aura-blob { opacity: .26; filter: blur(110px); width: 38vw; height: 38vw; top: -14vw; }

/* Ondulação da aura.
   Ciclos fechados (0% == 100%) em vez de 'alternate': o movimento nunca
   "volta pelo mesmo caminho", que é o que denuncia uma animação simples.
   Três durações primas entre si para as camadas nunca sincronizarem — é daí
   que vem a sensação de líquido em vez de loop.
   Só transform e opacity: ambos rodam no compositor, sem repintar o blur. */
@keyframes aura-drift-1 {
  0%   { transform: translate(0, 0)        scale(1)    rotate(0deg); }
  25%  { transform: translate(7vw, 4vw)    scale(1.14) rotate(6deg); }
  50%  { transform: translate(13vw, -3vw)  scale(1.04) rotate(-4deg); }
  75%  { transform: translate(5vw, 6vw)    scale(1.20) rotate(7deg); }
  100% { transform: translate(0, 0)        scale(1)    rotate(0deg); }
}
@keyframes aura-drift-2 {
  0%   { transform: translate(0, 0)        scale(1.05) rotate(0deg); }
  25%  { transform: translate(-8vw, 5vw)   scale(1.16) rotate(-7deg); }
  50%  { transform: translate(-3vw, -4vw)  scale(1)    rotate(5deg); }
  75%  { transform: translate(-11vw, 2vw)  scale(1.12) rotate(-3deg); }
  100% { transform: translate(0, 0)        scale(1.05) rotate(0deg); }
}
@keyframes aura-drift-3 {
  0%   { transform: translate(0, 0)        scale(1)    rotate(0deg); opacity: .55; }
  33%  { transform: translate(-9vw, 6vw)   scale(1.18) rotate(8deg);  opacity: .40; }
  66%  { transform: translate(6vw, -5vw)   scale(0.92) rotate(-6deg); opacity: .62; }
  100% { transform: translate(0, 0)        scale(1)    rotate(0deg); opacity: .55; }
}

/* ===== blobs ambientes (respiração) ===== */
.ambient-blob { position: absolute; border-radius: 50%; filter: blur(100px); pointer-events: none; }
.breathe-1 { animation: breathe 12s ease-in-out infinite; }
.breathe-2 { animation: breathe 15s ease-in-out infinite 2s; }
@keyframes breathe { 0%,100%{opacity:.45; transform:scale(1)} 50%{opacity:.7; transform:scale(1.12)} }

/* ===== GRID + BEAMS (luz correndo pelas linhas) ===== */
.grid-line-v { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(15,23,42,0.035); overflow: hidden; }
.grid-line-h { position: absolute; left: 0; right: 0; height: 1px; background: rgba(15,23,42,0.035); overflow: hidden; }
.beam-v { position: absolute; left: 0; width: 1px; height: 140px; top: -140px;
  background: linear-gradient(to bottom, transparent, var(--teal-light), transparent); }
.beam-h { position: absolute; top: 0; height: 1px; width: 140px; left: -140px;
  background: linear-gradient(to right, transparent, var(--teal-light), transparent); }
@keyframes beam-v { 0%{top:-140px} 100%{top:100%} }
@keyframes beam-h { 0%{left:-140px} 100%{left:100%} }

.marker { position: absolute; width: 5px; height: 5px; border: 1px solid rgba(13,148,136,0.5); background: #fff; z-index: 30; }

/* ===== revelações ===== */
@keyframes reveal { from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:translateY(0)} }
.animate-reveal { animation: reveal .8s cubic-bezier(0.22,1,0.36,1) both; }
.delay-100{animation-delay:.1s} .delay-200{animation-delay:.2s} .delay-300{animation-delay:.3s} .delay-500{animation-delay:.5s}

.scroll-reveal { opacity:0; transform:translateY(26px); transition:opacity .8s cubic-bezier(0.22,1,0.36,1), transform .8s cubic-bezier(0.22,1,0.36,1); }
.scroll-reveal.is-visible { opacity:1; transform:translateY(0); }
.scroll-reveal.delay-200{transition-delay:.15s} .scroll-reveal.delay-300{transition-delay:.25s} .scroll-reveal.delay-500{transition-delay:.4s}

/* ===== pulso do hero: mancha de luz difusa nascendo no centro e se espalhando até a borda, em loop ===== */
@keyframes pulse-ring {
  0% { transform: translate(-50%, -50%) scale(0.1) rotate(0deg); opacity: 1; border-radius: 42% 58% 65% 35% / 45% 40% 60% 55%; }
  35% { border-radius: 55% 45% 40% 60% / 55% 65% 35% 45%; }
  70% { opacity: 0.55; border-radius: 60% 40% 55% 45% / 40% 55% 45% 60%; }
  100% { transform: translate(-50%, -50%) scale(1) rotate(12deg); opacity: 0; border-radius: 45% 55% 50% 50% / 50% 45% 55% 50%; }
}
.pulse-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 900px;
  height: 900px;
  max-width: 140vw;
  max-height: 140vw;
  border-radius: 9999px;
  background: radial-gradient(circle, rgba(255,255,255,0.95) 0%, rgba(186,230,253,0.95) 14%, rgba(56,189,248,0.75) 38%, rgba(45,212,191,0.55) 60%, transparent 78%);
  filter: blur(40px);
  animation: pulse-ring 7.2s cubic-bezier(0.15,0.6,0.35,1) infinite;
  pointer-events: none;
}
.pulse-ring.delay-1 { animation-delay: 2.4s; }
.pulse-ring.delay-2 { animation-delay: 4.8s; }
.pulse-ring.pulse-sm { width: 480px; height: 480px; max-width: 90vw; max-height: 90vw; filter: blur(30px); }

/* ===== linha conectora dos planos: traço correndo até a seta ===== */
@keyframes plano-flow { from { stroke-dashoffset: 24; } to { stroke-dashoffset: 0; } }
.plano-flow { animation: plano-flow 1s linear infinite; filter: drop-shadow(0 0 4px rgba(13,148,136,0.6)); }

/* ===== seletor de planos: botão ativo (teal) vs inativo (vidro) ===== */
.plano-btn-active { background: linear-gradient(90deg, #0d9488, #0891b2); color: #fff; box-shadow: 0 10px 30px -8px rgba(13,148,136,0.45); }
.plano-btn-inactive { background: rgba(255,255,255,0.25); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border: 1px solid rgba(255,255,255,0.6); color: #334155; }
.plano-btn-inactive:hover { background: rgba(255,255,255,0.4); }

/* ===== "Sobre mim" mobile: por padrão mostra a foto; toque revela o texto ===== */
@keyframes pulse-soft { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }
.animate-pulse-soft { animation: pulse-soft 1.8s ease-in-out infinite; }
@media (max-width: 1023px) {
  #sobre-card { background-color: transparent; transition: background-color .35s ease; }
  #sobre-card-inner { opacity: 0; pointer-events: none; transition: opacity .3s ease; }
  #sobre-card.sobre-card-open { background-color: rgba(255,255,255,0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 20px 40px -12px rgba(15,23,42,0.15); }
  #sobre-card.sobre-card-open #sobre-card-inner { opacity: 1; pointer-events: auto; }
  #sobre-card.sobre-card-open #sobre-hint { display: none; }
  #sobre-card.sobre-card-open #sobre-toggle-btn { animation: none; }
}

/* ===== card de área "ativado" no toque (mobile, sem hover) ===== */
.area-active { transform: scale(1.05) translateY(-4px); box-shadow: 0 25px 50px -12px rgba(15,23,42,0.25); z-index: 10; border-color: rgba(13,148,136,0.5) !important; }

/* ===== carrossel horizontal com barra de rolagem visível (depoimentos) ===== */
.h-scroll { scrollbar-width: thin; scrollbar-color: #0d9488 #e2e8f0; }
.h-scroll::-webkit-scrollbar { height: 8px; }
.h-scroll::-webkit-scrollbar-track { background: #e2e8f0; border-radius: 999px; }
.h-scroll::-webkit-scrollbar-thumb { background: #0d9488; border-radius: 999px; }
.h-scroll::-webkit-scrollbar-thumb:hover { background: #0f766e; }

/* ===== menu mobile ===== */
.hidden-menu { transform:translateX(100%); transition:transform .4s cubic-bezier(0.22,1,0.36,1); }
.hidden-menu.open { transform:translateX(0); }

/* ===== dropdown "Temas" do header ===== */
.nav-drop { position: relative; }
.nav-drop-panel {
  position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(-6px);
  min-width: 208px; background: rgba(255,255,255,0.96); backdrop-filter: blur(12px);
  border: 1px solid #e2e8f0; border-radius: 4px; box-shadow: 0 12px 32px -8px rgba(15,23,42,0.16);
  padding: 6px; opacity: 0; visibility: hidden; transition: opacity .22s ease, transform .22s ease, visibility .22s;
  z-index: 60;
}
.nav-drop:hover .nav-drop-panel,
.nav-drop:focus-within .nav-drop-panel { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.nav-drop-panel a { display: block; padding: 9px 12px; border-radius: 3px; font-size: 13px; color: #475569; transition: background .15s, color .15s; }
.nav-drop-panel a:hover { background: #f0fdfa; color: #0d9488; }

/* ===== glow no mouse sobre cards ===== */
.glow-card::before {
  content:""; position:absolute; inset:-1px; border-radius:inherit; opacity:0; transition:opacity .3s;
  background: radial-gradient(360px circle at var(--mx) var(--my), rgba(13,148,136,0.10), transparent 42%); z-index:0;
}
.glow-card:hover::before { opacity:1; }

/* ============================================================
   Componentes das subpáginas
   ============================================================ */

/* --- tipografia de artigo --- */
.prose-clinical p { color:#64748b; font-weight:300; line-height:1.75; font-size:1.0625rem; }
.prose-clinical p + p { margin-top:1.25rem; }
.prose-clinical strong { color:#1e293b; font-weight:500; }

/* --- citação em destaque --- */
.pull-quote {
  position: relative; border-left: 2px solid var(--teal); padding: .25rem 0 .25rem 1.75rem; margin: 2.25rem 0;
  font-family: 'Playfair Display', serif; font-size: 1.375rem; line-height: 1.4; font-weight: 500; color: #0f172a; letter-spacing: -0.01em;
}
@media (min-width: 1024px) { .pull-quote { font-size: 1.625rem; } }

/* --- lista de sintomas ("você se reconhece?") --- */
.symptom-list { display: grid; grid-template-columns: 1fr; gap: 0; }
@media (min-width: 768px) { .symptom-list { grid-template-columns: 1fr 1fr; column-gap: 3rem; } }
.symptom-list li {
  display: flex; gap: .875rem; align-items: flex-start;
  padding: 1.125rem 0; border-bottom: 1px solid #f1f5f9;
  font-size: .9375rem; line-height: 1.6; color: #475569;
}
.symptom-list li iconify-icon { color: var(--teal); flex-shrink: 0; margin-top: .1875rem; }

/* --- timeline numerada do atendimento --- */
.step-list { counter-reset: step; }
.step-item { position: relative; padding-left: 4.5rem; padding-bottom: 2.75rem; }
.step-item:last-child { padding-bottom: 0; }
.step-item::before {
  counter-increment: step; content: "0" counter(step);
  position: absolute; left: 0; top: -.125rem;
  font-family: 'JetBrains Mono', monospace; font-size: .8125rem; font-weight: 500;
  color: var(--teal); letter-spacing: .05em;
  width: 2.75rem; height: 2.75rem; border: 1px solid #ccfbf1; border-radius: 9999px;
  display: flex; align-items: center; justify-content: center; background: #f0fdfa;
}
.step-item::after {
  content: ""; position: absolute; left: 1.375rem; top: 2.875rem; bottom: .5rem; width: 1px; background: #e2e8f0;
}
.step-item:last-child::after { display: none; }

/* Em telas estreitas o recuo de 4.5rem come quase um quarto da largura:
   a 320px sobravam 185px de texto. O círculo tem 2.75rem, então 3.75rem
   mantém a folga visual e devolve 12px por linha. */
@media (max-width: 420px) {
  .step-item { padding-left: 3.75rem; padding-bottom: 2.25rem; }
  .step-item::after { left: 1.375rem; }
}

/* --- numeração 01–06 nos cards de área (home) --- */
.area-num {
  font-family: 'JetBrains Mono', monospace; font-size: .6875rem; font-weight: 500;
  letter-spacing: .12em; color: #cbd5e1; transition: color .3s;
}
.glow-card:hover .area-num { color: var(--teal); }

/* ============================================================
   Teste de temperamento
   ============================================================ */

.quiz-progress-track { height: 2px; background: #e2e8f0; border-radius: 2px; overflow: hidden; }
.quiz-progress-fill { height: 100%; background: linear-gradient(to right, var(--teal), var(--sky)); transition: width .45s cubic-bezier(0.22,1,0.36,1); }

.quiz-option {
  display: flex; gap: 1rem; align-items: flex-start; width: 100%; text-align: left;
  padding: 1.125rem 1.25rem; border: 1px solid #e2e8f0; border-radius: 2px; background: rgba(255,255,255,.7);
  transition: border-color .2s, background .2s, transform .2s; cursor: pointer;
  font-size: .9375rem; line-height: 1.5; color: #334155;
}
.quiz-option:hover { border-color: #5eead4; background: #f0fdfa; transform: translateX(3px); }
.quiz-option .opt-key {
  flex-shrink: 0; width: 1.625rem; height: 1.625rem; border: 1px solid #cbd5e1; border-radius: 3px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'JetBrains Mono', monospace; font-size: .6875rem; color: #64748b; transition: all .2s;
}
.quiz-option:hover .opt-key { border-color: var(--teal); background: var(--teal); color: #fff; }

.score-row { display: flex; align-items: center; gap: 1rem; margin-bottom: .875rem; }
.score-label { min-width: 120px; font-size: .8125rem; color: #475569; }
.score-track { flex: 1; height: 6px; background: #f1f5f9; border-radius: 3px; overflow: hidden; }
.score-fill { height: 100%; background: linear-gradient(to right, var(--teal), var(--sky)); border-radius: 3px; width: 0; transition: width .9s cubic-bezier(0.22,1,0.36,1); }
.score-count { min-width: 1.5rem; text-align: right; font-family: 'JetBrains Mono', monospace; font-size: .8125rem; color: #94a3b8; }

.tag { display: inline-block; padding: .3125rem .75rem; border-radius: 9999px; font-size: .75rem; font-weight: 500; margin: 0 .375rem .5rem 0; }
.tag-strong { background: #f0fdfa; color: #0f766e; border: 1px solid #ccfbf1; }
.tag-weak { background: #f8fafc; color: #64748b; border: 1px solid #e2e8f0; }

/* ============================================================
   Acessibilidade
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .animate-reveal, .scroll-reveal, .beam-v, .beam-h,
  .aura::before, .aura::after, .aura .aura-blob,
  .breathe-1, .breathe-2, .quiz-progress-fill, .score-fill, .quiz-option {
    animation: none !important; transition: none !important;
    opacity: 1 !important; transform: none !important;
  }
}