/* Páginas internas do modelo novo (Marketing e conteúdo · Sites e sistemas), 2026-10-25.
   Usa as cores, fontes e componentes de estilo.css. */

.topo__nav a.atual { color: #17150f; }
.topo__nav a.atual::after { transform: scaleX(1); }

/* cartão do topo: calendário do mês (marketing) */
.cal { margin: 18px 0; }
.cal__cab { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; font-size: 12.5px; font-weight: 600; color: #8f877a; text-align: center; margin-bottom: 6px; }
.cal__grade { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal__dia { height: 46px; border-radius: 8px; background: rgba(255, 255, 255, 0.04); position: relative; padding: 4px 6px; font-size: 12.5px; color: #8f877a; }
.cal__tag { position: absolute; left: 4px; right: 4px; bottom: 4px; height: 16px; border-radius: 4px; font-size: 10.5px; font-weight: 700; line-height: 16px; text-align: center; color: #17130a; opacity: 0; transform: scale(.6); transition: opacity .35s var(--ease), transform .35s var(--ease); white-space: nowrap; overflow: hidden; }
.cal__tag.mostra { opacity: 1; transform: none; }
.cal__tag--video { background: #cba135; }
.cal__tag--post { background: #e9e2d2; }
.cal__tag--ads { background: #5cc28a; }
.cal__tag--data { background: transparent; border: 1.5px solid #cba135; color: #cba135; line-height: 13px; }
.cal__legenda { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 14px; font-size: 12.5px; color: #b3ab9c; }
.cal__legenda span { display: inline-flex; align-items: center; gap: 6px; }
.cal__legenda i { width: 10px; height: 10px; border-radius: 3px; }
.numeros { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.numeros p { font-size: 12.5px; color: #8f877a; }
.numeros strong { display: block; font-size: 22px; font-weight: 600; color: #f2eee6; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.numeros strong.ouro { color: var(--ouro); }
.cartao__nota { font-size: 12.5px; color: #8f877a; margin-top: 10px; }

/* cartão do topo: site se montando (sites e sistemas) */
.navegador { margin-top: 18px; border-radius: 12px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.08); background: #f4f1ea; }
.navegador__barra { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: #e6e1d6; }
.navegador__barra i { width: 9px; height: 9px; border-radius: 50%; background: #c9c2b3; }
.navegador__url { margin-left: 10px; flex: 1; font-size: 12.5px; color: #6b6457; background: #f4f1ea; border-radius: 6px; padding: 3px 10px; }
.navegador__tela { position: relative; height: 262px; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.bloco { border-radius: 6px; background: #ddd6c8; opacity: 0; transform: translateY(8px); transition: opacity .45s var(--ease), transform .45s var(--ease); }
.bloco.mostra { opacity: 1; transform: none; }
.bloco--hero { height: 74px; background: #17150f; display: flex; flex-direction: column; justify-content: center; gap: 7px; padding: 0 14px; }
.bloco--hero b { display: block; height: 9px; width: 62%; border-radius: 3px; background: #f2eee6; }
.bloco--hero b + b { width: 40%; background: #cba135; }
.bloco--linha { height: 8px; width: 90%; }
.bloco--linha.curta { width: 64%; }
.bloco--botao { height: 26px; width: 132px; background: #cba135; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: #17130a; }
.blocos-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.blocos-3 .bloco { height: 44px; }
.aviso-contato { position: absolute; right: 12px; bottom: 12px; display: flex; align-items: center; gap: 10px; background: #17150f; color: #f2eee6; border-radius: 10px; padding: 9px 12px; font-size: 12.5px; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35); opacity: 0; transform: translateY(10px); transition: opacity .45s var(--ease), transform .45s var(--ease); }
.aviso-contato.mostra { opacity: 1; transform: none; }
.aviso-contato i { width: 26px; height: 26px; border-radius: 50%; background: #25d366; display: grid; place-items: center; color: #fff; font-style: normal; font-weight: 700; font-size: 13.5px; }
.aviso-contato b { display: block; font-weight: 600; }
.selos-site { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.selos-site span { font-size: 12.5px; font-weight: 600; color: #8f877a; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 999px; padding: 4px 11px; transition: color .4s, border-color .4s; }
.selos-site span.ativo { color: var(--ouro); border-color: rgba(203, 161, 53, 0.5); }

/* como fazemos: trilha com linha que se preenche ao aparecer */
.trilha { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; position: relative; padding-top: 34px; }
.trilha::before { content: ''; position: absolute; left: 0; right: 0; top: 7px; height: 2px; background: var(--linha); }
.trilha::after { content: ''; position: absolute; left: 0; top: 7px; height: 2px; width: 0; background: var(--ouro); transition: width 2.2s var(--ease); }
.trilha.visivel::after { width: 100%; }
.trilha li { position: relative; }
.trilha li::before { content: ''; position: absolute; top: -34px; left: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--preto); border: 2px solid rgba(255, 255, 255, 0.25); transition: border-color .4s, background .4s; }
.claro .trilha li::before { background: var(--creme); border-color: rgba(23, 21, 15, 0.25); }
.trilha.visivel li::before { border-color: var(--ouro); background: var(--ouro); }
.trilha.visivel li:nth-child(2)::before { transition-delay: .45s; }
.trilha.visivel li:nth-child(3)::before { transition-delay: .9s; }
.trilha.visivel li:nth-child(4)::before { transition-delay: 1.35s; }
.trilha.visivel li:nth-child(5)::before { transition-delay: 1.8s; }
.trilha__n { font-size: 13.5px; font-weight: 600; color: var(--ouro); }
.claro .trilha__n { color: var(--ouro-texto); }
.trilha h3 { font-size: 18.5px; margin: 10px 0 8px; }
.trilha p { color: var(--txt-2); font-size: 15px; }

/* benefícios para quem contrata */
.ganhos { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 40px; }
.ganhos li { padding: 28px 0; border-top: 1px solid var(--linha); display: grid; grid-template-columns: 44px 1fr; gap: 16px; }
.ganhos__icone { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: rgba(203, 161, 53, 0.12); }
.ganhos__icone svg { width: 21px; height: 21px; fill: none; stroke: var(--ouro); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.claro .ganhos__icone svg { stroke: var(--ouro-texto); }
.ganhos h3 { font-size: 18.5px; }
.ganhos p { color: var(--txt-2); font-size: 15px; margin-top: 6px; }

/* o que chega para você: entregas que vão sendo marcadas */
.entregas { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.entregas li { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-radius: 12px; border: 1px solid var(--linha); background: rgba(255, 255, 255, 0.02); transition: border-color .4s, background .4s; }
.entregas li.feita { border-color: rgba(203, 161, 53, 0.45); background: rgba(203, 161, 53, 0.07); }
.entregas__check { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--linha); flex-shrink: 0; display: grid; place-items: center; transition: background .35s, border-color .35s; }
.entregas__check::after { content: ''; width: 6px; height: 11px; border: solid #17130a; border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); margin-top: -2px; transition: transform .3s var(--ease); }
.entregas li.feita .entregas__check { background: var(--ouro); border-color: var(--ouro); }
.entregas li.feita .entregas__check::after { transform: rotate(45deg) scale(1); }
.entregas strong { display: block; font-weight: 600; font-size: 16.5px; }
.entregas span { font-size: 13.5px; color: var(--txt-2); }
.entregas__rodape { margin-top: 26px; color: var(--txt-2); font-size: 15px; }

/* lista de recursos */
.recursos { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
.recursos li { padding: 20px 0; border-top: 1px solid var(--linha); }
.recursos h3 { font-size: 18.5px; display: flex; gap: 12px; align-items: baseline; }
.recursos h3::before { content: '+'; color: var(--ouro-texto); font-weight: 400; }
.escuro .recursos h3::before { color: var(--ouro); }
.recursos p { color: var(--txt-2); font-size: 15px; margin-top: 6px; padding-left: 22px; }

/* prova: o sistema da própria Maxmize */
.prova { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 72px; align-items: center; }
.prova__texto .secao__sub { max-width: 460px; }
.prova__lista { list-style: none; margin-top: 26px; display: grid; gap: 10px; }
.prova__lista li { display: flex; gap: 12px; font-size: 15px; color: var(--txt-2); }
.prova__lista li::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--ouro); margin-top: 9px; flex-shrink: 0; }
.painel-mock { border-radius: 16px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.1); background: #15130f; display: grid; grid-template-columns: 64px 1fr; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5); transform: rotate(-1.5deg); }
.painel-mock__lado { background: #0f0e0b; padding: 16px 0; display: flex; flex-direction: column; align-items: center; gap: 14px; border-right: 1px solid rgba(255, 255, 255, 0.06); }
.painel-mock__lado span { width: 30px; height: 30px; border-radius: 8px; background: rgba(255, 255, 255, 0.06); }
.painel-mock__lado span:first-child { background: var(--ouro); }
.painel-mock__corpo { padding: 18px; }
.painel-mock__titulo { font-size: 15px; font-weight: 600; margin-bottom: 14px; display: flex; justify-content: space-between; gap: 10px; }
.painel-mock__titulo span { font-size: 12.5px; font-weight: 500; color: #8f877a; }
.painel-mock__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.painel-mock__kpis div { background: rgba(255, 255, 255, 0.04); border-radius: 10px; padding: 12px; }
.painel-mock__kpis p { font-size: 12.5px; color: #8f877a; }
.painel-mock__kpis strong { font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
.painel-mock__lista { list-style: none; margin-top: 14px; }
.painel-mock__lista li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid rgba(255, 255, 255, 0.06); font-size: 13.5px; opacity: 0; transform: translateX(-8px); transition: opacity .4s var(--ease), transform .4s var(--ease); }
.painel-mock__lista li.mostra { opacity: 1; transform: none; }
.painel-mock__lista em { font-style: normal; font-size: 12.5px; font-weight: 600; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.st-ok { color: #5cc28a; background: rgba(92, 194, 138, 0.12); }
.st-ouro { color: #cba135; background: rgba(203, 161, 53, 0.14); }
.st-info { color: #b3ab9c; background: rgba(255, 255, 255, 0.06); }
.prova__nota { font-size: 12.5px; color: var(--txt-3); margin-top: 14px; text-align: right; }

/* links de cada coluna na página inicial */
.frente__mais { display: inline-flex; margin-top: 22px; font-weight: 600; font-size: 15px; color: var(--ouro-texto); align-items: center; gap: 10px; padding: 4px 0; }
.frente__mais::after { content: '→'; transition: transform .25s var(--ease); }
.frente__mais:hover::after { transform: translateX(4px); }

@media (max-width: 1000px) {
  .trilha { grid-template-columns: 1fr; gap: 26px; padding-top: 0; padding-left: 34px; }
  .trilha::before { left: 5px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .trilha::after { left: 5px; top: 0; width: 2px; height: 0; transition: height 2.2s var(--ease); }
  .trilha.visivel::after { width: 2px; height: 100%; }
  .trilha li::before { top: 4px; left: -34px; }
  .ganhos, .entregas { grid-template-columns: 1fr 1fr; }
  .recursos { grid-template-columns: 1fr; }
  .prova { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 640px) {
  .ganhos, .entregas { grid-template-columns: 1fr; }
  .cal__dia { height: 38px; padding: 3px 4px; }
  .cal__tag { font-size: 9px; height: 14px; line-height: 14px; left: 2px; right: 2px; bottom: 3px; }
  .navegador__tela { height: 240px; }
  .numeros strong { font-size: 18.5px; }
  .painel-mock { grid-template-columns: 44px 1fr; transform: none; }
  .painel-mock__lado span { width: 24px; height: 24px; }
  .painel-mock__kpis { gap: 6px; }
  .painel-mock__kpis div { padding: 9px; }
  .painel-mock__kpis strong { font-size: 18.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .cal__tag, .bloco, .aviso-contato, .painel-mock__lista li { opacity: 1; transform: none; }
}

/* ajustes de alinhamento (2026-10-25) */
.cal__tag { font-size: 9.5px; letter-spacing: -0.01em; left: 3px; right: 3px; }
@media (min-width: 1001px) {
  .frente__desc { min-height: calc(1.6em * 3); }   /* as listas das três colunas começam na mesma altura */
}
.aviso-contato i { color: #0b3d1f; }

/* página de erro 404 (2026-10-25) */
.erro { min-height: calc(100vh - 66px); display: flex; align-items: center; padding: 64px 0; position: relative; overflow: hidden; }
.erro__in { position: relative; }
.erro__codigo { position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: clamp(160px, 26vw, 360px); font-weight: 600; letter-spacing: -0.06em; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px rgba(203, 161, 53, 0.25); pointer-events: none; }
@media (max-width: 760px) { .erro__codigo { position: static; transform: none; font-size: 120px; margin-bottom: 18px; } }
.erro h1 {font-size: clamp(36px, 4.6vw, 60px); max-width: 720px; }
.erro__sub { color: var(--txt-2); font-size: 17px; margin-top: 22px; }
.erro__links { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 30px; }
.erro__links a { display: inline-block; padding: 10px 18px; border-radius: 999px; border: 1px solid var(--linha); font-weight: 600; font-size: 15px; transition: border-color .25s, color .25s; }
.erro__links a:hover { border-color: var(--ouro); color: var(--ouro); }

/* política de privacidade (2026-10-25) */
.politica__in { max-width: 760px; }
.politica h1 { font-size: clamp(36px, 4.4vw, 56px); }
.politica__data { color: var(--txt-3); font-size: 15px; margin: 12px 0 40px; }
.politica h2 { font-size: 22px; margin: 36px 0 12px; }
.politica p, .politica li { color: var(--txt-2); font-size: 16.5px; line-height: 1.7; }
.politica ul { padding-left: 20px; display: grid; gap: 8px; }
.politica strong { color: var(--txt); }
.politica a { color: var(--ouro-texto); font-weight: 600; text-decoration: underline; }
.politica__in > p + p { margin-top: 12px; }
.politica__contato { margin-top: 32px; padding: 20px 24px; border-radius: 12px; background: #ebe6db; border-left: 3px solid var(--ouro); }