/* ═══════════════════════════════════════════════════════════════════════════
 * arke-me.css — a lente PESSOAL da arquitetura archē.
 *
 * IDENTIDADE PRÓPRIA, MESMO SISTEMA. A camada de componentes do site
 * (arke-home.css + arke-arche.css) já consome --accent/--accent-rgb, então
 * retintar a página inteira é redefinir DOIS tokens no wrapper. Nenhum
 * componente é duplicado para ficar azul: é o mesmo card, o mesmo grafo, o
 * mesmo badge — vestidos com a cor do produto. O chrome do archēLAB (header e
 * rodapé) segue dourado de propósito: você está no archēLAB olhando o archēME.
 *
 * A paleta não foi inventada aqui — vem de css/arke-themes.css e
 * css/arke-products.css, onde o archēME já era azul.
 * ═══════════════════════════════════════════════════════════════════════════ */

.tema-me {
  --accent:       #3B82F6;      /* azul archēME (o mesmo de arke-products) */
  --accent-rgb:   59, 130, 246;
  --accent-hover: #60A5FA;
  --accent-text:  #60A5FA;
  --me-ciano:     #67E8F9;      /* apoio, usado com parcimônia */
  --me-fundo:     #05070C;      /* base escura levemente azulada */
  --me-superficie:#0C111B;
}
.tema-me .ark-sec--surface { background: var(--me-superficie); }
.tema-me .ark-sec--deep,
.tema-me .ark-final { background: var(--me-fundo); }
.tema-me .faz-passo,
.tema-me .arq-qual > div,
.tema-me .ark-step { background: #090D15; }

/* VAZAMENTOS DO TEMA: o theme-override.css do site pinta alguns elementos com
   `var(--gold) !important` — regra global, feita quando só existia dourado. Como
   é !important, herdar --accent não basta: precisa ser reafirmado aqui dentro.
   Só o CONTEÚDO da página muda; header e rodapé seguem dourados de propósito. */
.tema-me .tp-section-title-playfair span,
.tema-me .st-hero-title i { color: var(--accent) !important; }
.tema-me a:hover,
.tema-me .tp-line-white:hover,
.tema-me .tp-line-black:hover { color: var(--accent-hover) !important; }
.tema-me .tp-btn-border-2.st { border-color: rgba(var(--accent-rgb),.55); color: #DCE8F7; }
.tema-me .tp-btn-border-2.st:hover { background: var(--accent); border-color: var(--accent); color: #05070C; }
/* O botão circular herdado do hero do tema é branco/marrom: aqui ele é azul. */
.tema-me .st-hero-btn a { background-color: var(--accent); color: #05070C; }
.tema-me .st-hero-btn a:hover { background-color: #EAF1FB; color: #0B1220; }
.tema-me .st-hero-btn a:hover .st-hero-btn-text { color: #0B1220; }

/* Atmosfera: brilho azul MUITO controlado — introspecção, não neon. */
.tema-me .ark-arche::after {
  background: radial-gradient(56% 52% at 50% 46%, rgba(var(--accent-rgb),.10), transparent 72%);
}

/* ═══ §1 · HERO — a pessoa no centro, as dimensões surgindo devagar ════════ */
.me-hero {
  position: relative; overflow: hidden;
  background: var(--me-fundo);
  padding-block: clamp(120px, 14vh, 180px) clamp(70px, 8vh, 110px);
}
.me-hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(45% 55% at 12% 28%, rgba(59,130,246,.13), transparent 70%),
    radial-gradient(38% 46% at 88% 22%, rgba(103,232,249,.07), transparent 70%),
    radial-gradient(44% 52% at 55% 88%, rgba(37,99,235,.10), transparent 70%);
}
.me-hero > .container { position: relative; z-index: 2; }
.me-hero__word {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(48px, 8vw, 118px); line-height: .88; font-weight: 500;
  letter-spacing: -.035em; color: #EAF1FB; margin: 0 0 clamp(20px, 2.4vw, 34px);
}
.me-hero__word em { font-style: italic; color: var(--accent); }
.me-hero__t {
  margin: 0; font-size: clamp(30px, 4.4vw, 66px); font-weight: 800;
  line-height: 1.0; letter-spacing: -.03em; color: #EAF1FB;
}
.me-hero__t em {
  display: block; margin-top: .18em;
  font-style: italic; font-weight: 400; font-family: 'Playfair Display', Georgia, serif;
  color: var(--accent);
}
.me-hero__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(18px, 2.4vw, 36px); margin-top: clamp(28px, 3vw, 44px); }

/* O anel de dimensões: a pessoa ao centro, os pilares nascendo em volta. */
.me-anel { position: relative; aspect-ratio: 1 / .92; margin-top: clamp(30px, 4vw, 20px); }
.me-anel__centro {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: min(300px, 62%); z-index: 3;
}
.me-anel__dim {
  position: absolute; left: var(--x); top: var(--y); transform: translate(-50%,-50%);
  padding: 7px 14px; border-radius: 999px; white-space: nowrap;
  background: rgba(12,17,27,.86); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid rgba(var(--accent-rgb),.24);
  color: #A9BCD6; font-size: 12.5px; font-weight: 500;
  opacity: 0; animation: meSurge .9s cubic-bezier(.16,1,.3,1) forwards;
  animation-delay: var(--i, 0ms);
}
@keyframes meSurge { from { opacity: 0; transform: translate(-50%,-50%) scale(.9); } to { opacity: 1; transform: translate(-50%,-50%) scale(1); } }
.me-anel__aro {
  position: absolute; inset: 0; pointer-events: none;
}
.me-anel__aro circle, .me-anel__aro ellipse { fill: none; stroke: rgba(var(--accent-rgb),.16); stroke-width: 1; }

/* ═══ §6 · O DIA COMO CONTEXTO ═════════════════════════════════════════════ */
.me-dia { position: relative; margin-top: clamp(38px, 4vw, 62px); padding-left: 84px; }
.me-dia::before {
  content: ""; position: absolute; left: 63px; top: 12px; bottom: 12px; width: 1px;
  background: linear-gradient(180deg, rgba(var(--accent-rgb),.7), rgba(var(--accent-rgb),.12));
}
.me-momento { position: relative; padding: 0 0 20px; }
.me-momento__h {
  position: absolute; left: -84px; top: 2px; width: 52px; text-align: right;
  font-family: var(--font-mono, monospace); font-size: 12px; color: var(--accent);
}
.me-momento::before {
  content: ""; position: absolute; left: -22px; top: 6px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--me-fundo); border: 1.5px solid rgba(var(--accent-rgb),.75);
}
.me-momento__t { margin: 0 0 4px; font-size: 15px; font-weight: 600; color: #EAF1FB; }
.me-momento__d { margin: 0; font-size: 13px; color: #7E8FA6; }
.me-momento__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }

/* leitura da IA no fim do dia — observação, nunca diagnóstico */
.me-leitura {
  margin-top: 8px; padding: clamp(18px, 2vw, 26px);
  border-radius: 4px; border: 1px solid rgba(var(--accent-rgb),.28);
  background: linear-gradient(135deg, rgba(var(--accent-rgb),.10) 0%, rgba(var(--accent-rgb),.02) 100%);
}
.me-leitura__k {
  font-family: var(--font-mono, monospace); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent); display: block; margin-bottom: 12px;
}
.me-cadeia { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.me-cadeia span { color: #C6D6EA; font-size: 13.5px; }
.me-cadeia i { color: rgba(var(--accent-rgb),.7); font-style: normal; }
.me-nota {
  margin: 14px 0 0; font-size: 12px; line-height: 1.55; color: #6B7C93;
  font-style: italic;
}

/* ═══ §8 · MEMÓRIA — o tempo como relação ══════════════════════════════════ */
.me-tempo { position: relative; margin-top: clamp(38px, 4vw, 62px); }
.me-tempo__trilho { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; position: relative; z-index: 2; }
.me-tempo__mes {
  font-family: var(--font-mono, monospace); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent); display: block; margin-bottom: 10px;
}
.me-tempo__arco { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: visible; }
.me-tempo__arco path {
  fill: none; stroke: rgba(var(--accent-rgb),.45); stroke-width: 1; stroke-dasharray: 4 5;
}
.me-tempo__legenda {
  margin-top: 16px; font-size: 12.5px; color: #7E8FA6; font-style: italic;
}

/* ═══ §9 · INDICADORES ═════════════════════════════════════════════════════ */
.me-graf { margin-top: clamp(34px, 3.6vw, 56px); }
.me-graf__bar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.me-graf__b {
  cursor: pointer; padding: 8px 16px; border-radius: 999px;
  background: none; border: 1px solid rgba(233,241,251,.16); color: #7E8FA6;
  font-family: var(--font-mono, monospace); font-size: 11px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  transition: color .3s ease, border-color .3s ease, background .3s ease;
}
.me-graf__b:hover { color: #EAF1FB; border-color: rgba(233,241,251,.32); }
.me-graf__b.is-on { color: #05070C; background: var(--accent); border-color: var(--accent); }
.me-graf__palco {
  border: 1px solid var(--border, #2A2A2A); border-radius: 6px;
  background: var(--me-superficie); padding: clamp(20px, 2.2vw, 30px);
}
.me-graf__svg { width: 100%; height: auto; display: block; }
.me-graf__linha { fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.me-graf__area { fill: rgba(var(--accent-rgb),.10); stroke: none; }
.me-graf__grade { stroke: rgba(233,241,251,.07); stroke-width: 1; }
.me-graf__eixo {
  font-family: var(--font-mono, monospace); font-size: 9px; fill: #55647A; letter-spacing: .1em;
}
.me-graf__obs {
  margin: 18px 0 0; padding-top: 16px; border-top: 1px solid rgba(233,241,251,.08);
  font-size: 13px; line-height: 1.6; color: #8FA2BA;
}
.me-graf__obs b { color: var(--accent); font-weight: 600; }

/* ═══ §11 · A IA QUE PERGUNTA ══════════════════════════════════════════════ */
.me-chat {
  border: 1px solid var(--border, #2A2A2A); border-radius: 6px;
  background: var(--me-superficie); overflow: hidden;
  box-shadow: 0 30px 70px rgba(0,0,0,.5);
}
.me-chat__topo {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 18px; border-bottom: 1px solid var(--border, #2A2A2A);
  background: #070B12;
}
.me-chat__topo b { font-size: 13px; color: #EAF1FB; font-weight: 600; }
.me-chat__topo span {
  margin-left: auto; font-family: var(--font-mono, monospace); font-size: 10px;
  letter-spacing: .12em; text-transform: uppercase; color: #55647A;
}
.me-chat__corpo { padding: clamp(18px, 2vw, 26px); display: grid; gap: 14px; }
.me-bolha { max-width: 78%; padding: 13px 17px; border-radius: 14px; font-size: 14px; line-height: 1.6; }
.me-bolha--ia {
  justify-self: start; border-bottom-left-radius: 4px;
  background: rgba(var(--accent-rgb),.12); border: 1px solid rgba(var(--accent-rgb),.24); color: #DCE8F7;
}
.me-bolha--eu {
  justify-self: end; border-bottom-right-radius: 4px;
  background: rgba(233,241,251,.05); border: 1px solid rgba(233,241,251,.12); color: #C6D6EA;
}
.me-chat__rodape {
  padding: 14px 18px; border-top: 1px solid var(--border, #2A2A2A);
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  background: #070B12;
}
.me-chat__rodape span {
  font-family: var(--font-mono, monospace); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: #55647A; margin-right: 4px;
}

/* ═══ §13/§14 · DESAFIO E PROGRESSO ════════════════════════════════════════ */
.me-progresso { height: 4px; border-radius: 999px; background: rgba(233,241,251,.09); overflow: hidden; margin: 14px 0 12px; }
.me-progresso i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent), var(--me-ciano)); }
.me-painel { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-top: clamp(32px, 3.4vw, 52px);
  background: rgba(233,241,251,.08); border: 1px solid rgba(233,241,251,.08); }
.me-painel > div { background: #090D15; padding: clamp(22px, 2.4vw, 34px); text-align: center; }
.me-painel b {
  display: block; font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(30px, 3.4vw, 48px); font-weight: 500; color: var(--accent); line-height: 1;
}
.me-painel span {
  display: block; margin-top: 10px;
  font-family: var(--font-mono, monospace); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: #6B7C93;
}

/* ═══ §15 · EVOLUÇÃO ═══════════════════════════════════════════════════════ */
.me-evo { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: clamp(34px, 3.6vw, 56px); }
.me-evo__col { border: 1px solid rgba(233,241,251,.10); border-radius: 4px; padding: clamp(18px, 2vw, 26px); }
.me-evo__col--hoje { border-color: rgba(var(--accent-rgb),.34); background: linear-gradient(180deg, rgba(var(--accent-rgb),.08), transparent); }
.me-evo__q {
  font-family: var(--font-mono, monospace); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent); display: block; margin-bottom: 16px;
}
.me-evo__col ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.me-evo__col li { font-size: 13px; color: #8FA2BA; display: flex; justify-content: space-between; gap: 12px; }
.me-evo__col li b { color: #EAF1FB; font-weight: 600; }

/* ═══ §17 · PRIVACIDADE ════════════════════════════════════════════════════ */
.me-privado { position: relative; margin-top: clamp(34px, 3.6vw, 56px); display: grid; place-items: center; padding: clamp(30px, 4vw, 60px) 0; }
.me-privado__aro {
  position: absolute; width: min(560px, 88%); aspect-ratio: 1; border-radius: 50%;
  border: 1px dashed rgba(var(--accent-rgb),.30);
}
.me-privado__aro--2 { width: min(400px, 64%); border-style: solid; border-color: rgba(var(--accent-rgb),.18); }
.me-privado__centro { position: relative; z-index: 2; width: min(320px, 82%); }
.me-privado__sel {
  position: absolute; z-index: 3; left: 50%; bottom: 4px; transform: translateX(-50%);
  font-family: var(--font-mono, monospace); font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: #55647A;
  background: var(--me-fundo); padding: 0 12px;
}

/* ═══ §18 · A SEÇÃO SILENCIOSA ═════════════════════════════════════════════ */
.me-silencio { padding-block: clamp(120px, 16vw, 240px); text-align: center; background: var(--me-fundo); }
.me-silencio p {
  margin: 0 auto; max-width: 16ch;
  font-size: clamp(34px, 6.4vw, 96px); font-weight: 800; line-height: 1.0;
  letter-spacing: -.035em; color: #EAF1FB;
}
.me-silencio p + p { margin-top: clamp(40px, 6vw, 100px); }
.me-silencio em { font-style: italic; font-weight: 400; font-family: 'Playfair Display', Georgia, serif; color: var(--accent); }
.me-silencio__txt {
  margin: clamp(50px, 6vw, 96px) auto 0; max-width: 46ch;
  font-size: clamp(15px, 1.2vw, 18px); line-height: 1.85; color: #7E8FA6;
}

/* ═══ §20 · MANIFESTO — quebra clara, azulada ══════════════════════════════ */
.me-manifesto { background: #E8EEF7; color: #0B1220; padding-block: clamp(96px, 12vw, 180px); }
.me-manifesto__t {
  margin: 0 auto; max-width: 20ch; text-align: center;
  font-size: clamp(29px, 4.8vw, 70px); font-weight: 800; line-height: 1.03; letter-spacing: -.03em;
  color: #0B1220;
}
.me-manifesto__t em {
  display: block; margin-top: .22em;
  font-style: italic; font-weight: 400; font-family: 'Playfair Display', Georgia, serif;
  color: #1D4ED8;
}
.me-manifesto__p {
  margin: clamp(34px, 4vw, 56px) auto 0; max-width: 30ch; text-align: center;
  font-size: clamp(17px, 1.5vw, 22px); line-height: 1.7; color: #3B4757;
}
.me-manifesto__assin { margin-top: clamp(40px, 4.4vw, 64px); text-align: center; padding-top: 28px; border-top: 1px solid rgba(11,18,32,.14); }
.me-manifesto__assin b {
  display: block; font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(26px, 3vw, 40px); font-weight: 500; color: #0B1220;
}
.me-manifesto__assin span {
  font-family: var(--font-mono, monospace); font-size: 11px; letter-spacing: .2em;
  text-transform: uppercase; color: #5A6B80;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVO — a pessoa continua no centro narrativo; o resto vira sequência
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1199px) {
  .me-painel { grid-template-columns: repeat(2, 1fr); }
  .me-evo { grid-template-columns: repeat(2, 1fr); }
  .me-tempo__trilho { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 991px) {
  /* O anel não cabe: vira a pessoa em cima e as dimensões em faixa rolável */
  .me-anel { aspect-ratio: auto; }
  .me-anel__aro { display: none; }
  .me-anel__centro { position: static; transform: none; width: 100%; margin-bottom: 22px; }
  .me-anel__dim {
    position: static; transform: none; opacity: 1; animation: none;
    display: inline-flex; margin: 0 6px 6px 0;
  }
  .me-anel__dims-mob { display: flex; flex-wrap: wrap; }
  .me-dia { padding-left: 66px; }
  .me-dia::before { left: 45px; }
  .me-momento__h { left: -66px; width: 40px; }
}

@media (max-width: 767px) {
  .me-painel, .me-evo { grid-template-columns: 1fr; }
  .me-tempo__trilho { grid-template-columns: 1fr; }
  .me-tempo__arco { display: none; }
  .me-bolha { max-width: 92%; }
  .me-graf__bar { gap: 6px; }
  .me-graf__b { padding: 7px 12px; font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .me-anel__dim { animation: none !important; opacity: 1 !important; }
}