/* Página Marketing e conteúdo: layout próprio (centralizado, linhas grandes, mês na vertical, antes x depois). */

/* topo centralizado com o mês inteiro embaixo */
.mk-hero { padding: 64px 0 88px; position: relative; overflow: hidden; }
.mk-hero::before { content: ''; position: absolute; left: 50%; top: -320px; width: 1000px; height: 700px; transform: translateX(-50%); background: radial-gradient(ellipse, rgba(203, 161, 53, 0.14), transparent 62%); pointer-events: none; }
.mk-hero__texto { position: relative; text-align: center; max-width: 860px; }
.mk-hero h1 { font-size: clamp(40px, 5.2vw, 70px); }
.mk-hero__sub { color: var(--txt-2); font-size: 18.5px; max-width: 620px; margin: 26px auto 0; }
.mk-hero__acoes { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 28px; margin-top: 36px; }
.mk-palco { position: relative; margin-top: 64px; }
.mk-mes { background: var(--cartao); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 20px; padding: 26px 28px; box-shadow: 0 40px 90px rgba(0, 0, 0, 0.5); }
.mk-mes__topo { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; padding-bottom: 18px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.mk-mes__titulo { font-weight: 600; font-size: 18.5px; }
.mk-mes__sub { font-size: 13.5px; color: #8f877a; }
.mk-mes .cal__legenda { margin-top: 0; }
.mk-mes .cal { margin: 20px 0; }
.mk-mes .cal__grade { grid-template-columns: repeat(14, 1fr); gap: 8px; }
.mk-mes .cal__dia { height: 64px; }
.mk-mes .cal__tag { font-size: 11px; height: 20px; line-height: 20px; left: 5px; right: 5px; bottom: 5px; }
.mk-mes .numeros strong { font-size: 30px; }
.mk-selo { position: absolute; z-index: 2; font-size: 13.5px; font-weight: 600; white-space: nowrap; padding: 9px 15px; border-radius: 999px; background: rgba(27, 24, 19, 0.95); border: 1px solid rgba(203, 161, 53, 0.4); color: #f2eee6; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5); animation: paira 6s ease-in-out infinite; }
.mk-selo::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--ouro); margin-right: 9px; vertical-align: 1px; }
.mk-selo--1 { top: -18px; left: 6%; }
.mk-selo--2 { top: 38%; right: -18px; animation-delay: -2s; }
.mk-selo--3 { bottom: -18px; left: 34%; animation-delay: -4s; }

/* o que fazemos: linhas largas com números vazados */
.mk-linhas { border-top: 1px solid var(--linha); }
.mk-linha { display: grid; grid-template-columns: 170px 1.1fr 1fr; gap: 40px; align-items: center; padding: 40px 0; border-bottom: 1px solid var(--linha); }
.mk-linha__n { font-size: 108px; font-weight: 500; line-height: 0.9; letter-spacing: -0.05em; color: transparent; -webkit-text-stroke: 1.5px rgba(23, 21, 15, 0.3); transition: color .5s var(--ease), -webkit-text-stroke-color .5s; }
.mk-linha:hover .mk-linha__n { color: var(--ouro); -webkit-text-stroke-color: var(--ouro); }
.mk-linha__verbo { font-size: 12.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ouro-texto); }
.mk-linha h3 { font-size: 27px; margin: 10px 0 10px; }
.mk-linha p:not(.mk-linha__verbo) { color: var(--txt-2); }
.mk-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.mk-chips li { font-size: 15px; font-weight: 500; padding: 9px 15px; border-radius: 999px; border: 1px solid var(--linha); background: rgba(255, 255, 255, 0.5); }

/* como fazemos: um mês, linha do tempo vertical que se preenche ao rolar */
.mk-centro { text-align: center; max-width: 640px; margin: 0 auto 56px; }
.mk-centro .secao__sub { margin-inline: auto; }
.mk-tempo { list-style: none; position: relative; max-width: 960px; margin: 0 auto; }
.mk-tempo::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--linha); }
.mk-tempo::after { content: ''; position: absolute; left: 50%; top: 0; width: 2px; margin-left: -1px; height: var(--preenchido, 0%); background: var(--ouro); }
.mk-tempo li { position: relative; width: 50%; padding: 0 48px 36px 0; }
.mk-tempo li:nth-child(even) { margin-left: 50%; padding: 0 0 36px 48px; }
.mk-tempo li::before { content: ''; position: absolute; top: 22px; right: -8px; width: 16px; height: 16px; border-radius: 50%; background: var(--preto); border: 2px solid var(--ouro); z-index: 1; }
.mk-tempo li:nth-child(even)::before { right: auto; left: -8px; }
.mk-tempo__cartao { background: var(--cartao); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 16px; padding: 22px 24px; }
.mk-tempo__quando { font-size: 12.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ouro); }
.mk-tempo h3 { font-size: 22px; margin: 8px 0 6px; }
.mk-tempo p { color: var(--txt-2); font-size: 15px; }

/* antes x depois */
.mk-compara { border-top: 1px solid var(--linha); }
.mk-compara__cab, .mk-compara__linha { display: grid; grid-template-columns: 1fr 1.3fr; gap: 40px; }
.mk-compara__cab { padding: 18px 0; font-size: 12.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--txt-3); border-bottom: 1px solid var(--linha); }
.mk-compara__cab span:last-child { color: var(--ouro-texto); }
.mk-compara__linha { padding: 22px 0; border-bottom: 1px solid var(--linha); align-items: center; }
.mk-compara__linha p:first-child { color: var(--txt-3); font-size: 16.5px; text-decoration: line-through; text-decoration-color: rgba(23, 21, 15, 0.25); }
.mk-compara__linha p:last-child { font-size: 18.5px; font-weight: 500; display: flex; gap: 14px; align-items: baseline; }
.mk-compara__linha p:last-child::before { content: '✓'; color: var(--ouro-texto); font-weight: 700; }

/* dúvidas centralizadas */
.mk-duvidas { max-width: 820px; }
.mk-duvidas .mk-centro { margin-bottom: 40px; }
.mk-duvidas__mais { margin-top: 28px; text-align: center; color: var(--txt-2); display: flex; justify-content: center; align-items: center; gap: 12px; flex-wrap: wrap; }
.mk-duvidas__mais .link-seta { color: var(--ouro-texto); }

/* final em faixa dividida */
.mk-final { padding: 96px 0; position: relative; overflow: hidden; }
.mk-final::before { content: ''; position: absolute; right: -200px; top: -200px; width: 700px; height: 600px; background: radial-gradient(circle, rgba(203, 161, 53, 0.14), transparent 62%); }
.mk-final__in { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 48px; flex-wrap: wrap; }
.mk-final h2 { font-size: clamp(32px, 3.6vw, 48px); max-width: 640px; }
.mk-final p:not(.rotulo) { color: var(--txt-2); margin-top: 16px; }

@media (max-width: 1000px) {
  .mk-mes .cal__grade { grid-template-columns: repeat(7, 1fr); gap: 6px; }
  .mk-mes .cal__dia { height: 48px; }
  .mk-selo--2 { right: 8px; }
  .mk-linha { grid-template-columns: 110px 1fr; gap: 24px; }
  .mk-linha__n { font-size: 76px; }
  .mk-chips { grid-column: 1 / -1; justify-content: flex-start; }
  .mk-tempo::before, .mk-tempo::after { left: 8px; }
  .mk-tempo li, .mk-tempo li:nth-child(even) { width: auto; margin-left: 0; padding: 0 0 26px 40px; }
  .mk-tempo li::before, .mk-tempo li:nth-child(even)::before { left: 0; right: auto; }
}
@media (max-width: 640px) {
  .mk-hero { padding: 40px 0 64px; }
  .mk-hero__sub { font-size: 16.5px; }
  .mk-palco { margin-top: 48px; }
  .mk-mes { padding: 18px; }
  .mk-mes .cal__dia { height: 40px; padding: 3px 4px; }
  .mk-mes .cal__tag { font-size: 9.5px; height: 15px; line-height: 15px; left: 2px; right: 2px; bottom: 3px; }
  .mk-mes .numeros strong { font-size: 20px; }
  .mk-selo { font-size: 12.5px; padding: 7px 12px; }
  .mk-selo--2 { display: none; }
  .mk-selo--3 { left: auto; right: 10px; }
  .mk-linha { grid-template-columns: 1fr; gap: 12px; padding: 30px 0; }
  .mk-linha__n { font-size: 60px; }
  .mk-compara__cab { display: none; }
  .mk-compara__linha { grid-template-columns: 1fr; gap: 6px; }
  .mk-final { padding: 72px 0; }
}

/* ajustes (2026-10-25): linha do tempo encaixada (mais curta) e selo fora do calendário */
@media (min-width: 1001px) {
  .mk-tempo li + li { margin-top: -64px; }
  .mk-tempo li { padding-bottom: 0; }
  .mk-tempo { padding-bottom: 8px; }
}
.mk-selo--2 { top: -18px; right: 6%; }