/* =========================================================
   Morning Call — página de obrigado (agendamento + link do encontro)
   Mesmo layout da TYP da Academia Vista Finance, nas cores da LP Morning Call
   (Safira #0a2540 + Turquesa #3fb6c8, botão teal #4ecec5). Mobile-first.
   ========================================================= */

/* Tipografia: Sora = títulos, Manrope = texto, IBM Plex Mono = rótulos. Fontes hospedadas na própria página. */
@font-face { font-family: 'Sora'; font-style: normal; font-weight: 300 800; font-display: swap; src: url('../assets/fonts/sora-300-800-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Sora'; font-style: normal; font-weight: 300 800; font-display: swap; src: url('../assets/fonts/sora-300-800-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 300 800; font-display: swap; src: url('../assets/fonts/manrope-300-800-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 300 800; font-display: swap; src: url('../assets/fonts/manrope-300-800-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('../assets/fonts/ibmplexmono-500-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('../assets/fonts/ibmplexmono-500-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --bg: #0a2540;            /* Safira */
  --bg-2: #12233e;          /* Noturno */
  --cartao: #0f1d33;        /* fundo do calendário */
  --cartao-escuro: #071528; /* balão da dica */
  --turquesa: #3fb6c8;
  --teal: #4ecec5;          /* botão principal, igual ao da LP */
  --teal-hover: #63d8d0;
  --teal-tinta: #0b1229;
  --fg: #ffffff;
  --fg-muted: rgba(255, 255, 255, 0.78);
  --fg-dim: rgba(255, 255, 255, 0.6);
  --rotulo: #8fd3dd;        /* rótulos claros sobre o fundo escuro */
  --linha: rgba(255, 255, 255, 0.14);
  --fonte: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fonte-display: "Sora", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fonte-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); -webkit-font-smoothing: antialiased; }
a { text-decoration: none; }

.mc {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: linear-gradient(160deg, var(--bg-2) 0%, var(--bg) 60%);
  color: var(--fg-muted);
  font-family: var(--fonte);
  line-height: 1.5;
}

.mc__glow { position: absolute; border-radius: 50%; filter: blur(120px); pointer-events: none; }
.mc__glow--a { top: -200px; left: -180px; width: 560px; height: 560px; background: rgba(63, 182, 200, 0.28); }
.mc__simbolo { position: absolute; left: -200px; bottom: -280px; height: 820px; width: auto; opacity: .05; transform: rotate(-18deg); pointer-events: none; }
.mc__glow--b { bottom: -240px; right: -160px; width: 520px; height: 520px; background: rgba(49, 71, 138, 0.45); }

.mc__header {
  position: relative;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 20px 24px 0;
}
.mc__logo { display: block; width: 190px; height: auto; margin: 0 0 10px -10px; }

.mc__conteudo {
  position: relative;
  flex: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 28px 24px 56px;
}

/* texto */
.mc__texto { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.mc__selo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 9999px;
  background: rgba(63, 182, 200, 0.16);
  border: 1px solid rgba(63, 182, 200, 0.4);
  color: var(--turquesa);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.8px;
}
.mc__titulo {
  margin: 0;
  font-size: clamp(34px, 5.6vw, 58px);
  line-height: 1.08;
  letter-spacing: -1.2px;
  font-weight: 700;
  color: var(--fg);
  text-wrap: balance;
}
.mc__destaque {
  background: linear-gradient(90deg, var(--turquesa) 0%, #a9e8ef 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.mc__lead {
  margin: 0;
  max-width: 520px;
  font-size: clamp(17px, 2.2vw, 20px);
  font-stretch: 85%;
  color: var(--fg-muted);
  text-wrap: pretty;
}
.mc__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 14px 30px;
  border-radius: 9999px;
  background: var(--fg);
  color: var(--bg);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.2px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  transition: transform 0.15s ease, background 0.15s ease;
}
.mc__btn:hover { background: #e2f4f7; transform: translateY(-1px); }
.mc__btn:focus-visible, .agenda__rodape:focus-visible { outline: 3px solid var(--turquesa); outline-offset: 3px; }
.mc__nota { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--fg-dim); }
.mc__nota svg { flex: none; }

/* calendário: linha do tempo em fundo escuro (mesmo design da LP) */
.agenda {
  position: relative;
  background: var(--cartao);
  color: var(--fg);
  border-radius: 20px;
  padding: 28px 24px 24px;
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}
.agenda__topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.agenda__titulo { margin: 0; font-size: 28px; line-height: 1.1; letter-spacing: -0.02em; }
.agenda__periodo { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rotulo); white-space: nowrap; }
.agenda__sub { margin: 0 0 26px; font-size: 15px; line-height: 1.5; color: var(--fg-muted); }
.agenda__lista { position: relative; margin: 0; padding: 0 0 0 28px; list-style: none; display: flex; flex-direction: column; gap: 28px; }
.agenda__lista::before { content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 2px; background: rgba(255, 255, 255, 0.14); }
.agenda__aula {
  position: relative;
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr);
  column-gap: 14px;
  align-items: start;
}
.agenda__aula::before {
  content: "";
  position: absolute;
  left: -28px;
  top: 6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  box-shadow: 0 0 0 4px var(--cartao);
}
.agenda__aula--proxima::before { background: var(--turquesa); }
.agenda__data { display: block; font-size: 0; line-height: 1; }
.agenda__dia { font-size: 26px; line-height: 1; letter-spacing: -0.02em; color: var(--fg); }
.agenda__mes { margin-left: 4px; font-family: var(--fonte); font-size: 13px; font-weight: 600; letter-spacing: 0.08em; color: var(--rotulo); }
.agenda__dia-semana { margin: 8px 0 0; font-size: 10.5px; letter-spacing: 0.02em; white-space: nowrap; text-transform: uppercase; color: var(--rotulo); }
.agenda__tema { margin: 0; font-size: 15px; line-height: 1.45; font-weight: 600; color: var(--fg); text-wrap: pretty; }

@media (min-width: 640px) {
  .mc__logo { width: 220px; }
  .agenda { padding: 36px 36px 32px; }
  .agenda__aula { grid-template-columns: 108px minmax(0, 1fr); column-gap: 20px; }
  .agenda__tema { font-size: 16px; }
}

@media (min-width: 960px) {
  .mc__logo { width: 230px; }
  .mc__conteudo { grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: 72px; padding-top: 24px; padding-bottom: 40px; }
}

.mc__nota--forte { color: var(--turquesa); font-size: 15px; font-weight: 600; }
.mc__btn { border: 0; cursor: pointer; font-family: inherit; }
.agenda__add { margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 8px 6px; align-items: center; font-size: 13px; }
.agenda__add-rotulo { flex: 0 0 100%; font-weight: 600; color: var(--fg-muted); }
.agenda__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px 4px 6px;
  border: 1.5px solid #dce3eb;
  border-radius: 9999px;
  background: #f3f7fa;
  color: var(--bg);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.agenda__link:hover { background: #e2f4f7; border-color: var(--turquesa); }
.agenda__link:focus-visible { outline: 3px solid var(--turquesa); outline-offset: 2px; }
@media (max-width: 639px) {
  .agenda__aula { grid-template-columns: minmax(0, 1fr); row-gap: 10px; }
  .agenda__quando { display: flex; align-items: baseline; gap: 12px; }
  .agenda__dia-semana { margin-top: 0; }
}
@media (max-width: 479px) {
  .agenda__add { gap: 8px 4px; }
  .agenda__link { gap: 4px; padding: 3px 9px 3px 4px; font-size: 12px; }
  .agenda__icone { width: 18px; height: 18px; }
}
.agenda__icone { display: block; width: 20px; height: 20px; border-radius: 5px; }

/* Tipografia Morning Call: Sora nos títulos, IBM Plex Mono nos rótulos/dados */
.mc__titulo, .agenda__titulo { font-family: var(--fonte-display); font-weight: 600; }
.mc__titulo { letter-spacing: -0.02em; line-height: 1.08; }
.mc__selo, .agenda__periodo, .agenda__dia-semana { font-family: var(--fonte-mono); font-weight: 500; }
.agenda__dia { font-family: var(--fonte-display); font-weight: 600; }

/* ---------- Dica temporária: "salve no calendário" ---------- */
.dica {
  position: fixed;
  z-index: 50;
  left: 16px;
  right: 16px;
  bottom: 28px;
  max-width: 360px;
  margin: 0 auto;
  padding: 18px 18px 16px;
  font-family: var(--fonte);
  line-height: 1.4;
  border-radius: 16px;
  background: var(--cartao-escuro);
  color: var(--fg);
  box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(63, 182, 200, 0.3);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.dica[hidden] { display: none; }
.dica--visivel { opacity: 1; transform: none; }
.dica__fechar {
  position: absolute;
  top: 6px;
  right: 8px;
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  color: var(--fg-dim);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}
.dica__fechar:hover { color: var(--fg); }
.dica__titulo { margin: 0 24px 2px 0; font-family: var(--fonte-display); font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.dica__texto { margin: 0 0 12px; font-size: 14px; color: var(--fg-muted); }
.dica__apps { margin: 0; padding: 0; list-style: none; display: flex; align-items: center; gap: 12px; }
.dica__apps li { display: block; line-height: 0; }
.dica__apps img { display: block; width: 40px; height: 40px; border-radius: 10px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); }
.dica__ver {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 11px 16px;
  border: 0;
  border-radius: 9999px;
  background: var(--turquesa);
  color: var(--cartao-escuro);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.dica__ver:hover { background: var(--teal-hover); }
.dica__fechar:focus-visible, .dica__ver:focus-visible { outline: 3px solid var(--turquesa); outline-offset: 2px; }

/* celular: pontinha de balão no meio da parte de baixo e balão quicando para baixo ("role para descer") */
.dica::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 50%;
  width: 16px;
  height: 16px;
  margin-left: -8px;
  background: var(--cartao-escuro);
  transform: rotate(45deg);
  border-radius: 3px;
  box-shadow: 1px 1px 0 rgba(63, 182, 200, 0.3);
}
.dica--visivel:not(.dica--ancorada) { animation: dica-quica 1.3s ease-in-out 0.4s infinite; }
@keyframes dica-quica {
  0%, 100% { transform: translateY(0); }
  40% { transform: translateY(12px); }
  60% { transform: translateY(5px); }
  75% { transform: translateY(9px); }
}

/* desktop: balão ancorado nos botões da primeira aula, com seta apontando para eles */
.dica--ancorada {
  position: absolute;
  left: 0;
  right: auto;
  bottom: auto;
  width: min(330px, calc(100vw - 32px));
  max-width: none;
  margin: 0;
}
.dica--ancorada .dica__ver, .dica--ancorada::after { display: none; }
.dica--ancorada::before {
  content: "";
  position: absolute;
  top: -8px;
  left: var(--seta, 40px);
  width: 16px;
  height: 16px;
  background: var(--cartao-escuro);
  transform: rotate(45deg);
  border-radius: 3px;
  box-shadow: -1px -1px 0 rgba(63, 182, 200, 0.3);
}
.agenda__add--destaque .agenda__link { animation: dica-pulso 1.4s ease-in-out infinite; }
@keyframes dica-pulso {
  0%, 100% { box-shadow: 0 0 0 0 rgba(63, 182, 200, 0); }
  50% { box-shadow: 0 0 0 6px rgba(63, 182, 200, 0.4); }
}
@media (prefers-reduced-motion: reduce) {
  .dica { transition: none; transform: none; }
  .dica--visivel:not(.dica--ancorada) { animation: none; }
  .agenda__add--destaque .agenda__link { animation: none; box-shadow: 0 0 0 4px rgba(63, 182, 200, 0.4); }
}

/* ---------- Marca no topo (igual ao cabeçalho da LP) ---------- */
.mc__marca { display: flex; align-items: center; gap: 14px; margin-bottom: 4px; }
.mc__marca .mc__logo { width: auto; height: 26px; margin: 0; }
.mc__divisor { width: 1px; height: 22px; background: rgba(255, 255, 255, .2); }
.mc__nome { font-family: var(--fonte-display); font-weight: 700; font-size: 19px; letter-spacing: -.01em; color: var(--turquesa); }

/* ---------- Botão principal (salvar todos os encontros), no teal da LP ---------- */
.mc__btn--principal {
  background: var(--teal);
  color: var(--teal-tinta);
  box-shadow: 0 4px 12px rgba(78, 206, 197, .35);
}
.mc__btn--principal:hover { background: var(--teal-hover); }

/* Datas que já passaram: esmaecidas e sem os botões de calendário */
.agenda__aula--passada { opacity: 0.45; }
.agenda__aula--passada .agenda__link,
.agenda__aula--passada .agenda__link:hover { cursor: default; pointer-events: none; filter: grayscale(1); background: transparent; border-color: rgba(255, 255, 255, 0.25); color: inherit; }
.agenda__aula--passada .agenda__add-rotulo::before { content: "✓ "; }