/* Paginas publicas (landing + precos). Usa as mesmas variaveis de marca de
   style.css (--rose-deep, --gold, --ivory...), mas com componentes proprios
   (prefixo mkt-) em vez dos componentes do app autenticado. */

/* margin:0 porque o UA-default (8px no Chrome) nunca foi zerado nestas
   paginas - sem isso sobra uma fresta clara ao redor de .mkt-band-dark.
   font-family sobrescreve a Nunito Sans herdada de style.css so aqui nas
   paginas de marketing (Poppins carregada em views/layouts/marketing.ejs). */
body.mkt-body { margin: 0; padding-bottom: 0; font-family: 'Poppins', sans-serif; }

/* Nav fixo/flutuante ao rolar (inspirado no header sticky do
   mymusicstaff.com): fica "colado" no topo da pagina inteira (position:
   sticky, nao so dentro do hero) em ambas as paginas. No topo da landing
   ele se mistura com o hero escuro (mesma faixa dourado->roxo de antes);
   assim que rola um pouco (.is-scrolled, via scroll listener no partial
   marketing-nav.ejs) vira uma barra solida branca com sombra, flutuando
   por cima do conteudo claro que vem depois do hero - e a pagina de
   precos (sem hero escuro) ja usa essa mesma barra branca desde o inicio. */
.mkt-nav {
    position: sticky;
    top: 0;
    z-index: 50;
    max-width: 1100px;
    margin: 0 auto;
    padding: 16px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background 0.25s ease, box-shadow 0.25s ease, padding 0.25s ease;
}
.mkt-logo { text-decoration: none; }
/* Nav aparece tanto sobre fundo claro (pagina de precos) quanto sobre a
   faixa escura da landing (.mkt-nav-on-dark) - cores base pensadas pro
   fundo claro, com override pro estado sobre o hero escuro. */
/* O texto "Notta" vem embutido em branco na imagem do logo - sobre fundo
   claro (padrao/precos e a barra flutuante apos rolar) precisa de um chip
   escuro atras pra nao sumir; sobre o hero escuro (.mkt-nav-on-dark, antes
   de rolar) a imagem fica direto no fundo, sem chip. */
.mkt-logo .brand-mark {
    font-size: 1.3rem;
    background: var(--rose-deep);
    padding: 0.25em 0.6em;
    border-radius: var(--radius-pill);
}

/* .brand-wordmark (icone + "AgeNota") agora e definido globalmente em
   style.css - reaproveitado aqui via mesma classe, sem duplicar regra. */

.mkt-nav-links { display: flex; align-items: center; gap: 22px; }
.mkt-nav-link { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-weight: 600; font-size: 0.92rem; text-decoration: none; }
.mkt-nav-link:hover, .mkt-nav-link.active { color: var(--ink); }
.mkt-nav-link-buscar i { font-size: 0.86rem; }

.mkt-nav-on-dark .mkt-logo .brand-mark { background: none; padding: 0; }
.mkt-nav-on-dark .mkt-nav-link { color: rgba(243,240,248,0.78); }
.mkt-nav-on-dark .mkt-nav-link:hover, .mkt-nav-on-dark .mkt-nav-link.active { color: #fff; }
/* Hero fica mais largo que o resto do site pra caber a composicao dos dois
   cards (ver .mkt-hero abaixo) - alinha o nav com essa largura so na
   landing. width:100% garante que preencha a largura mesmo se algum
   ancestral virar flex/grid no caminho (margin:auto sem width explicito
   encolhe pro conteudo em contextos flex/grid). */
.mkt-nav-on-dark { max-width: 1320px; width: 100%; }

/* Estado "sobre o hero escuro, no topo da pagina" (antes de rolar): uma
   faixa de cor destacada em vez do nav flutuar "invisivel" direto sobre o
   degrade do hero - da uma quebrada visual logo no topo, com as cores da
   marca (dourado -> roxo). O fundo fica num ::before em 100vw (truque
   full-bleed) pra cobrir a tela inteira em QUALQUER largura, inclusive
   acima de 1320px onde o proprio .mkt-nav (com max-width) nao chegaria
   nas bordas - o conteudo (logo, links) continua centralizado por cima,
   sem esticar. Some quando .is-scrolled entra (vira barra solida branca). */
.mkt-nav-on-dark:not(.is-scrolled)::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100vw;
    margin-left: -50vw;
    /* Gradiente OPACO (nao translucido) de roxo, nas mesmas cores do fundo
       do hero (.mkt-band-dark). Precisa ser opaco porque o nav agora fica
       ANTES do .mkt-band-dark no DOM (pra ser sticky na pagina inteira) -
       nao tem mais o roxo escuro do hero por tras dele pra as cores
       translucidas de antes se misturarem; sem opacidade essas mesmas
       cores baixinhas ficavam lavanda claro por cima do fundo --ivory do
       body. */
    background: linear-gradient(90deg, #5A4481 0%, #382A5C 55%, #7357A5 100%);
    /*background: linear-gradient(90deg, #854E28 0%, #854E28 55%, #854E28 100%); /*NOVAIDENT*/
    border-bottom: 1px solid rgba(154,107,255,0.30);
    box-shadow: 0 10px 28px -20px rgba(0,0,0,0.65);
    z-index: -1;
    pointer-events: none;
}

/* Estado flutuante (rolou a pagina): barra solida branca com sombra,
   sticky no topo por cima de qualquer conteudo - em ambas as paginas. As
   cores do .mkt-nav-on-dark voltam a ser as de fundo claro aqui, porque
   uma vez solida a barra deixa de estar "sobre" o hero escuro. */
.mkt-nav.is-scrolled {
    background: var(--white);
    box-shadow: var(--shadow-md);
    padding-top: 10px;
    padding-bottom: 10px;
    /* Vira uma barra flutuante "de verdade": afasta um pouco do topo e das
       laterais pra as bordas arredondadas ficarem visiveis - encostada nas
       bordas da tela, o arredondado nao apareceria. width:calc(100% -
       32px) + margin-left/right:auto (nao um valor fixo de 16px) e' o que
       centraliza certo em qualquer largura - com margin fixo, quando o
       max-width (1320px do .mkt-nav-on-dark) entra em acao em telas
       largas, a barra ficava ancorada a 16px da esquerda em vez de
       centralizar a sobra, deixando um vao enorme so do lado direito. */
    margin-top: 12px;
    margin-left: auto;
    margin-right: auto;
    width: calc(100% - 32px);
    border-radius: var(--radius-lg);
}
/* So na landing (nav sobre o hero escuro), flutuante: 20% maior em cada
   lateral do que o padrao (16px de recuo -> 12.8px), ou seja, a barra fica
   mais larga/mais perto das bordas. Precos continua com os 16px normais. */
.mkt-nav.mkt-nav-on-dark.is-scrolled {
    width: calc(100% - 25.6px);
}
.mkt-nav-on-dark.is-scrolled .mkt-logo .brand-mark { background: var(--rose-deep); padding: 0.25em 0.6em; }
.mkt-nav-on-dark.is-scrolled .mkt-nav-link { color: var(--muted); }
.mkt-nav-on-dark.is-scrolled .mkt-nav-link:hover, .mkt-nav-on-dark.is-scrolled .mkt-nav-link.active { color: var(--ink); }
.mkt-nav-on-dark.is-scrolled .mkt-btn-ghost {
    background: var(--white);
    color: var(--rose-deep-dark);
    border-color: var(--border);
}
.mkt-nav-on-dark.is-scrolled .mkt-btn-ghost:hover { background: var(--blush-tint); border-color: var(--blush); }

/* ---------- Botoes ---------- */

.mkt-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: var(--radius-pill);
    font-weight: 700;
    font-size: 0.92rem;
    padding: 12px 22px;
    border: 1.5px solid transparent;
    cursor: pointer;
    text-decoration: none;
    font-family: inherit;
    transition: transform 0.12s ease, background 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.mkt-btn:hover { text-decoration: none; }
.mkt-btn:active { transform: scale(0.98); }
.mkt-btn-sm { padding: 8px 16px; font-size: 0.82rem; }
.mkt-btn-block { width: 100%; }

.mkt-btn-primary {
    background: linear-gradient(135deg, var(--rose-deep), var(--rose-deep-dark));
    color: #fff;
    box-shadow: 0 12px 26px -10px rgba(115, 87, 165, 0.55);
}
.mkt-btn-primary:hover { background: linear-gradient(135deg, var(--rose-deep-dark), var(--rose-deep)); color: #fff; }

.mkt-btn-ghost {
    background: var(--white);
    color: var(--rose-deep-dark);
    border-color: var(--border);
}
.mkt-btn-ghost:hover { background: var(--blush-tint); border-color: var(--blush); color: var(--rose-deep-dark); }

.mkt-band-dark .mkt-btn-ghost {
    background: rgba(255,255,255,0.10);
    color: #fff;
    border-color: rgba(255,255,255,0.28);
}
.mkt-band-dark .mkt-btn-ghost:hover { background: rgba(255,255,255,0.18); color: #fff; }

.mkt-btn-outline {
    background: var(--white);
    color: var(--rose-deep-dark);
    border-color: var(--border);
}
.mkt-btn-outline:hover { background: var(--blush-tint); border-color: var(--blush); color: var(--rose-deep-dark); }

/* Planos pagos desativados na versao demo - "Em breve", nao navega. */
.mkt-btn-disabled,
.mkt-btn-disabled:hover {
    background: var(--border);
    color: var(--muted);
    border-color: var(--border);
    box-shadow: none;
    cursor: not-allowed;
    pointer-events: none;
}

/* ---------- Dropdown "Entrar" (professor x aluno/responsavel) ----------
   O botao Entrar nao navega direto - abre um painel de escolha alinhado a
   direita, ancorado no wrapper .mkt-entrar (position:relative). Aberto via
   classe .is-open no wrapper (toggle no clique do botao, fecha em clique
   fora e em Esc - logica em marketing-nav.ejs), nao :focus-within, pra
   poder fechar clicando de novo no proprio botao sem perder o foco antes. */
.mkt-entrar { position: relative; }
.mkt-entrar-btn { gap: 8px; }
.mkt-entrar-chevron { font-size: 0.65em; transition: transform 0.2s ease; }
.mkt-entrar.is-open .mkt-entrar-chevron { transform: rotate(180deg); }

.mkt-entrar-panel {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    width: 300px;
    max-width: calc(100vw - 32px);
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: 8px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
    z-index: 60;
}
.mkt-entrar.is-open .mkt-entrar-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.mkt-entrar-panel-head { display: flex; align-items: flex-start; gap: 10px; padding: 12px 12px 14px; }
.mkt-entrar-panel-wave { font-size: 1.3rem; line-height: 1.1; }
.mkt-entrar-panel-title { font-weight: 700; color: var(--ink); font-size: 0.94rem; }
.mkt-entrar-panel-sub { color: var(--muted); font-size: 0.8rem; margin-top: 2px; }

.mkt-entrar-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-top: 1px solid var(--border);
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: background 0.15s ease;
}
.mkt-entrar-option:hover { background: var(--blush-tint); text-decoration: none; }

.mkt-entrar-option-ic {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: #fff;
    background: linear-gradient(135deg, var(--rose-deep), var(--rose-deep-dark));
    box-shadow: 0 8px 18px -8px rgba(115,87,165,0.55);
}
.mkt-entrar-option-ic-aluno { background: linear-gradient(135deg, var(--gold), var(--rose-deep)); }

.mkt-entrar-option-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mkt-entrar-option-body .t { font-weight: 700; color: var(--ink); font-size: 0.88rem; }
.mkt-entrar-option-body .d { color: var(--muted); font-size: 0.78rem; line-height: 1.35; }

.mkt-entrar-option-arrow {
    flex-shrink: 0;
    color: var(--muted);
    font-size: 0.8rem;
    opacity: 0.35;
    transform: translateX(-2px);
    transition: opacity 0.15s ease, transform 0.15s ease, color 0.15s ease;
}
.mkt-entrar-option:hover .mkt-entrar-option-arrow { opacity: 1; transform: translateX(0); color: var(--rose-deep-dark); }

/* ---------- Faixa escura (nav + hero) ---------- */

.mkt-band-dark {
    background:
        radial-gradient(640px 480px at 102% -8%, rgba(203,163,110,0.22), transparent 60%),
        radial-gradient(560px 460px at -8% 108%, rgba(150,120,196,0.32), transparent 55%),
        linear-gradient(150deg, #4A3872 0%, #382A5C 50%, #251C3E 100%);
    position: relative;
    overflow: hidden;
    padding-bottom: 64px;
}
/* Hero do tamanho da tela - padrao comum em landing pages pra garantir que
   o CTA principal apareca sem rolar. min-height (nao height fixo) pra nao
   cortar quando o conteudo precisa de mais espaco do que a tela (ex.:
   telas baixas, ou o mobile quando os cards + texto passam de 100dvh) -
   nesses casos a banda so cresce um pouco alem da tela, nunca corta nada.
   100dvh (com 100vh de fallback pra navegadores sem suporte) em vez de so
   100vh pro mobile nao "pular"/sobrar espaco quando a barra de
   endereco do navegador esconde/aparece. */
.mkt-band-dark {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}
.mkt-hero { flex: 1; align-content: center; }
.mkt-band-dark::before {
    content: "";
    position: absolute;
    width: 340px;
    height: 340px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.10);
    top: -120px;
    right: 6%;
}

/* Notas musicais douradas flutuando no fundo escuro - so decorativas
   (aria-hidden, pointer-events:none), espalhadas nas bordas pra nao brigar
   com o texto do hero. */
.mkt-note {
    position: absolute;
    color: var(--gold);
    opacity: 0.45;
    pointer-events: none;
    text-shadow: 0 0 18px rgba(203,163,110,0.5);
    animation: mkt-note-float 7s ease-in-out infinite;
}
.mkt-note.n1 { top: 12%; left: 5%; font-size: 1.3rem; animation-duration: 6.5s; }
.mkt-note.n2 { top: 66%; left: 3%; font-size: 2rem; animation-duration: 8s; animation-delay: 1.2s; }
.mkt-note.n3 { top: 7%; right: 32%; font-size: 1.1rem; animation-duration: 7.5s; animation-delay: 0.6s; }
.mkt-note.n4 { bottom: 6%; right: 8%; font-size: 1.8rem; animation-duration: 9s; animation-delay: 2s; }
.mkt-note.n5 { top: 42%; right: 3%; font-size: 1.2rem; animation-duration: 6s; animation-delay: 0.3s; }

@keyframes mkt-note-float {
    0%, 100% { transform: translateY(0) rotate(-8deg); opacity: 0.3; }
    50% { transform: translateY(-16px) rotate(8deg); opacity: 0.65; }
}
@media (prefers-reduced-motion: reduce) {
    .mkt-note { animation: none; }
}

/* Ilustracao enviada pelo usuario (fundo branco solido no PNG original) -
   recortada em circulo em vez de um retangulo branco solto no fundo
   escuro, como um "selo" flutuante. No desktop fica sobre o canto do card
   Caderno; no mobile (onde o Caderno some, ver .mkt-card-caderno abaixo)
   fica sobre o canto do proprio card Agenda - mesma ideia visual, so que
   contra o unico card que sobra. */
.mkt-illustration {
    display: block;
    position: absolute;
    /*border-radius: 50%;*/
    overflow: hidden;
    z-index: 3;
    /*background: #fff;*/
    /* box-shadow: 0 0 0 6px rgba(255,255,255,0.05), 0 22px 44px -16px rgba(0,0,0,0.5);*/
    animation: mkt-card-float 7.2s ease-in-out infinite;
    animation-delay: -1.6s;
}
.mkt-illustration img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 32%;
    display: block;
}
@media (min-width: 1240px) {
    .mkt-illustration {
        /* 5% de .mkt-stack (546x421) a menos pra direita (mais esquerda) e
           a mais pra baixo do que a posicao anterior, 20% maior
           (140px -> 168px), e mais 3% de altura pra cima (296 -> 283). */
        right: -28px;
        top: 253px;
        width: 168px;
        height: 168px;
    }
}

.mkt-hero {
    position: relative;
    z-index: 1;
    max-width: 1320px;
    margin: 0 auto;
    padding: 56px 24px 0;
    display: grid;
    /* 50% texto / 50% ilustracao. Grid simples de 2 colunas/1 linha (sem
       row-span - isso da um jeito de a linha "esticar" pra caber o card
       mais alto do lado, distorcendo o espaco entre o texto e os botoes).
       .mkt-hero-left agrupa texto+botoes num unico item de grid pra ficar
       colado (gap interno proprio) e centralizado como bloco contra o
       preview; no mobile ele "dissolve" (display:contents) pra texto,
       botoes e preview reordenarem livremente - ver max-width:900px. */
    grid-template-columns: 1fr 1fr;
    column-gap: 40px;
    align-items: center;
}
.mkt-hero-left { display: flex; flex-direction: column; align-self: start; margin-top: 24px; }
.mkt-hero-actions { margin-top: 28px; }

.mkt-eyebrow { font-size: 1.08rem; font-weight: 700; color: var(--gold); margin-bottom: 14px; }

.mkt-hero-text h1 {
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.14;
    letter-spacing: -0.03em;
    color: #F3F0F8;
    margin: 0 0 18px;
}
.mkt-hero-text h1 .grad {
    background: linear-gradient(90deg, var(--gold), var(--rose), var(--rose-dark));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Segundo H1, com efeito de maquina de escrever: frases digitadas letra a
   letra e depois apagadas em loop (ver script no final de landing.ejs).
   Menor e mais leve que o H1 fixo acima, pra ficar claro que e' o
   "complemento" dinamico, nao o titulo principal. */
.mkt-hero-text h1.mkt-h1-dynamic {
    font-size: clamp(1.3rem, 2.3vw, 1.7rem);
    font-weight: 600;
    color: var(--gold);
    margin: 0 0 20px;
}
.mkt-caret {
    display: inline-block;
    width: 2px;
    height: 0.95em;
    margin-left: 2px;
    background: var(--gold);
    vertical-align: -0.12em;
    animation: mkt-caret-blink 0.9s step-end infinite;
}
@keyframes mkt-caret-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .mkt-caret { animation: none; }
}

.mkt-lead { color: rgba(243,240,248,0.72); font-size: 1.05rem; line-height: 1.65; max-width: 55ch; }
/* Da mais destaque as palavras-chave do paragrafo (agenda, alunos,
   anotacoes de aula, mensalidades) - branco+negrito em vez do cinza
   translucido do resto do texto, com um sublinhado dourado fino. */
.mkt-lead .mkt-hl {
    color: #fff;
    font-weight: 700;
}
.mkt-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* flex-direction:column porque a legenda (.mkt-preview-caption) e' irma de
   .mkt-stack aqui dentro - sem isso os dois viravam itens lado a lado numa
   row e espremiam os cards. align-items:center centraliza a composicao
   dentro da coluna do hero (metade direita). */
.mkt-hero-preview { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; }

.mkt-preview-caption {
    align-self: center;
    text-align: center;
    color: rgba(243,240,248,0.5);
    font-size: 0.76rem;
    margin-top: 14px;
}

/* Dois cards horizontais em "escada": Agenda em cima/esquerda, Caderno
   embaixo e BEM mais pra direita, sobrepondo so o canto inferior direito
   da Agenda. Caderno fica na frente (z-index maior) mesmo estando embaixo
   na composicao. So no desktop largo, onde ha espaco pra isso sem espremer
   o texto do hero - abaixo do breakpoint os cards caem em fluxo normal
   empilhado, com uma sobreposicao minima. */
.mkt-stack { position: relative; }
/* Espacamento interno compactado (padding do card, header, linhas de aula
   e registros do caderno) em QUALQUER largura - nao ha motivo pro card
   ficar espaçoso feito o app autenticado aqui; texto, cores e conteudo
   continuam os mesmos, so mais proximos verticalmente. Isso sozinho ja
   encolhe bastante o hero no mobile. */
.mkt-stack-card { margin-bottom: 0; padding: 14px 20px; }
.mkt-stack-card .notta-card-header { margin-bottom: 8px; }
.mkt-stack-card .notta-lesson-row { padding: 6px 0; }
.mkt-stack-card .notta-note-entry { padding: 3px 0; }

@media (min-width: 1240px) {
    /* Caixa exata que envolve os dois cards deslocados - a coluna do
       preview e' 50% do hero, entao ainda ha folga (~576px no breakpoint
       de 1240px pros 546px que a caixa precisa). */
    .mkt-stack { width: 546px; height: 421px; }
    /* Retangulares e horizontais, nunca quadrados. 509px = 463px +10%. */
    .mkt-stack-card { width: 509px; height: 237px; overflow: hidden; }
    .mkt-card-agenda {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        box-shadow: 0 14px 30px -16px rgba(20, 10, 40, 0.28);
    }
    .mkt-card-caderno {
        /* Desloca 37px pra direita e 184px pra baixo. */
        position: absolute;
        top: 184px;
        left: 37px;
        z-index: 2;
        box-shadow: 0 22px 46px -16px rgba(20, 10, 40, 0.42);
    }
}
@media (max-width: 1239px) {
    /* Abaixo do breakpoint da composicao em escada: so a Agenda aparece
       (o Caderno some, ver .mkt-card-caderno) - largura contida (nao
       estica feito o app numa tela media) e a ilustracao sobreposta no
       canto, quase como no desktop. */
    .mkt-stack-card { max-width: 420px; margin-left: auto; margin-right: auto; box-shadow: 0 16px 34px -18px rgba(20, 10, 40, 0.32); }
    .mkt-card-agenda { position: relative; z-index: 1; }
    .mkt-card-caderno { display: none; }
    .mkt-illustration {
        right: -12px;
        bottom: -12px;
        width: 100px;
        height: 100px;
    }
}

/* Flutuacao sutil dos dois cards - so translateY (transform), nao mexe em
   top/left/layout, entao a composicao diagonal e a sobreposicao continuam
   corretas o tempo todo. Fases diferentes (delay negativo no caderno) pra
   nao subirem/descerem em sincronia perfeita. */
.mkt-card-agenda, .mkt-card-caderno {
    animation: mkt-card-float 6.5s ease-in-out infinite;
}
.mkt-card-caderno { animation-delay: -3.2s; }

@keyframes mkt-card-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}
@media (prefers-reduced-motion: reduce) {
    .mkt-card-agenda, .mkt-card-caderno { animation: none; }
}

/* ---------- Faixas alternadas (bandas de fundo por secao) ---------- */
/* Cada secao publica depois do hero vira uma faixa de largura total com uma
   cor propria (branco / lilas / creme), sem vao entre elas - a MUDANCA de
   cor e' o unico separador visual, sem gap do --ivory do body no meio.
   Evita a pagina "toda branca" que era o problema antes: agora da pra ver
   onde uma secao termina e a proxima comeca so pela cor de fundo. Tons
   propios (nao os *-tint ja usados em botoes/badges, que sao translucidos
   demais pra servir de fundo de secao inteira) definidos so aqui. */
:root {
    --mkt-tint-lilac: #F1ECFA;
    --mkt-tint-cream: #FBF1E2;
}
.mkt-band { width: 100%; }
.mkt-band-white { background: var(--white); }
.mkt-band-lilac { background: var(--mkt-tint-lilac); }
.mkt-band-cream { background: var(--mkt-tint-cream); }

/* ---------- Features (fundo claro) ---------- */

.mkt-features { max-width: 1100px; margin: 0 auto; padding: 72px 24px; }
.mkt-section-title {
    text-align: center;
    font-size: 1.7rem;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin-bottom: 40px;
}

.mkt-feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}
.mkt-feature {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.mkt-feature .ic {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--rose), var(--rose-deep));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    margin-bottom: 14px;
    box-shadow: 0 10px 22px -8px rgba(115,87,165,0.55);
}
.mkt-feature h3 { font-size: 1rem; margin-bottom: 6px; color: var(--ink); }
.mkt-feature p { color: var(--muted); font-size: 0.88rem; line-height: 1.55; }

/* ---------- Busca publica (mapa) ---------- */
/* Chama atencao pra pagina publica /buscar (professores por cidade + mapa
   Leaflet, ja existente) - texto + CTA de um lado, ilustracao de mapa
   (SVG desenhado na mao, sem depender de imagem externa) do outro, no
   mesmo esquema 2 colunas do hero. */
.mkt-locate {
    max-width: 1100px;
    margin: 0 auto;
    padding: 72px 24px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
}
.mkt-locate-eyebrow {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--gold-dark);
    font-weight: 700;
    font-size: 0.92rem;
    margin-bottom: 12px;
}
.mkt-locate-text h2 { font-size: 1.6rem; letter-spacing: -0.02em; margin-bottom: 14px; }
.mkt-locate-desc { color: var(--muted); font-size: 1rem; line-height: 1.6; max-width: 46ch; margin-bottom: 24px; }

.mkt-locate-art { display: flex; flex-direction: column; align-items: center; }
.mkt-locate-card {
    width: 100%;
    max-width: 340px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: 14px;
    animation: mkt-card-float 7s ease-in-out infinite;
}
.mkt-map-svg { display: block; width: 100%; height: auto; border-radius: var(--radius-md); }
.mkt-preview-caption-light { color: var(--muted); margin-top: 14px; }
@media (prefers-reduced-motion: reduce) {
    .mkt-locate-card { animation: none; }
}
@media (max-width: 900px) {
    .mkt-locate { grid-template-columns: 1fr; text-align: center; gap: 28px; }
    .mkt-locate-eyebrow { justify-content: center; }
    .mkt-locate-desc { margin-left: auto; margin-right: auto; }
}

/* ---------- Fluxo de acesso (professor x responsavel x aluno) ---------- */
/* Logo apos o mapa de busca: 3 cards numerados (1,2,3) explicando que cada
   perfil entra pelo proprio link/portal - reusa o mesmo cartao de
   .mkt-feature (icone + titulo + texto), so que com selo numerado e um
   link direto pro login/portal de cada um. Setas entre os cards (grid
   "auto" nas colunas impares) so reforcam a leitura em sequencia; no
   mobile viram uma seta apontando pra baixo entre os cards empilhados. */
.mkt-flow { max-width: 1100px; margin: 0 auto; padding: 72px 24px; }
.mkt-flow-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
    gap: 8px;
}
.mkt-flow-step {
    position: relative;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 28px 22px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1 1 280px;
    max-width: 360px;
}
.mkt-flow-step-num {
    position: absolute;
    top: -12px;
    left: 20px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--gold-dark);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 14px -4px rgba(203,163,110,0.6);
}
.mkt-flow-step .ic {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--rose), var(--rose-deep));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    margin-bottom: 14px;
    box-shadow: 0 10px 22px -8px rgba(115,87,165,0.55);
}
.mkt-flow-step .ic.ic-gold { background: linear-gradient(135deg, var(--gold), var(--rose-deep)); }
.mkt-flow-step h3 { font-size: 1.02rem; color: var(--ink); margin-bottom: 8px; }
.mkt-flow-step p { color: var(--muted); font-size: 0.86rem; line-height: 1.55; flex: 1; margin-bottom: 16px; }
.mkt-flow-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--rose-deep-dark);
    font-weight: 700;
    font-size: 0.82rem;
    text-decoration: none;
}
.mkt-flow-link:hover { text-decoration: underline; }
.mkt-flow-link i { font-size: 0.72rem; }
.mkt-flow-arrow { display: flex; align-items: center; color: var(--border); font-size: 1.3rem; }
@media (max-width: 900px) {
    .mkt-flow { padding: 48px 20px; }
    .mkt-flow-grid { flex-direction: column; align-items: center; gap: 16px; }
    .mkt-flow-step { max-width: 420px; width: 100%; }
    .mkt-flow-arrow { transform: rotate(90deg); }
}

/* ---------- Faixa de CTA ---------- */

.mkt-cta-band { max-width: 1100px; margin: 0 auto; padding: 72px 24px; }
.mkt-cta-inner {
    background: linear-gradient(135deg, var(--rose-deep), var(--rose-deep-dark));
    border-radius: var(--radius-lg);
    padding: 36px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    box-shadow: 0 20px 46px -18px rgba(115, 87, 165, 0.55);
}
.mkt-cta-inner h2 { color: #fff; font-size: 1.4rem; margin-bottom: 6px; }
.mkt-cta-inner p { color: rgba(255,255,255,0.78); font-size: 0.92rem; }

/* ---------- Contato ---------- */

.mkt-contact { max-width: 1100px; margin: 0 auto; padding: 72px 24px; }
.mkt-contact-subtitle {
    text-align: center;
    color: var(--muted);
    font-size: 0.94rem;
    margin: -24px 0 32px;
}
.mkt-contact-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}
/* Cada item e um link de verdade (whatsapp/instagram/mailto) - o card
   inteiro reage ao hover pra deixar claro que e clicavel. */
.mkt-contact-item {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-decoration: none;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.mkt-contact-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 34px -14px rgba(115,87,165,0.4);
    border-color: var(--blush);
    text-decoration: none;
}
.mkt-contact-item-highlight {
    border-color: var(--rose-deep);
    box-shadow: 0 14px 30px -14px rgba(115,87,165,0.45);
}
.mkt-contact-item .ic {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--rose), var(--rose-deep));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    margin-bottom: 14px;
    box-shadow: 0 10px 22px -8px rgba(115,87,165,0.55);
}
/*.mkt-contact-item .ic-whatsapp { background: linear-gradient(135deg, #3FCB6F, #1F9B4C); box-shadow: 0 10px 22px -8px rgba(31,155,76,0.55); }
.mkt-contact-item .ic-instagram { background: linear-gradient(135deg, #F5A45D, #D62F8B, #7053C4); box-shadow: 0 10px 22px -8px rgba(214,47,139,0.45); }*/
.mkt-contact-item h3 { font-size: 1rem; color: var(--ink); margin-bottom: 8px; }
.mkt-contact-value {
    display: inline-block;
    background: var(--blush-tint);
    color: var(--rose-deep-dark);
    font-size: 0.82rem;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: var(--radius-pill);
}

/* ---------- Precos ---------- */

.mkt-precos-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--ivory);
}

/* Faixa escura no topo, inspirada em .mkt-band-dark (mesmas radiais
   dourado/lavanda sobre um degrade roxo escuro, dourado so como acento -
   ver eyebrow abaixo). Reusa a mesma paleta roxa da landing (identidade
   predominante da marca), so que num tom levemente mais claro/vivo (roxo
   cheio em vez do quase-preto do hero) pra essa pagina nao ficar identica
   a landing, mas continuar reconhecivelmente "Notta". Padding generoso -
   pagina rola normalmente (nao tenta mais caber tudo numa unica tela),
   entao a faixa pode respirar em vez de ficar espremida. */
.mkt-precos-band {
    position: relative;
    overflow: hidden;
    padding: 64px 24px 96px;
    text-align: center;
    background:
        radial-gradient(680px 420px at 106% -16%, rgba(203,163,110,0.24), transparent 58%),
        radial-gradient(620px 420px at -8% 114%, rgba(150,120,196,0.28), transparent 55%),
        linear-gradient(150deg, #6B4E9E 0%, #4A3872 55%, #2E2350 100%);
}
.mkt-pricing-head { max-width: 640px; margin: 0 auto; position: relative; z-index: 1; }
.mkt-precos-band .mkt-eyebrow { color: var(--gold); font-size: 0.94rem; font-weight: 700; margin-bottom: 10px; }
.mkt-precos-band h1 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); letter-spacing: -0.03em; color: #F3F0F8; margin-bottom: 14px; }
.mkt-precos-band .mkt-lead { color: rgba(243,240,248,0.78); margin: 0 auto; font-size: 1rem; line-height: 1.5; }

/* Nav sobre a faixa escura desta pagina reaproveita .mkt-nav-on-dark (logo
   e links brancos) e o MESMO degrade roxo do estado padrao (ver
   .mkt-nav-on-dark:not(.is-scrolled)::before no topo do arquivo) - so a
   largura muda (max-width menor, alinhada com o conteudo mais estreito da
   pagina de precos). */
.mkt-nav-precos { max-width: 1100px; padding-top: 11px; padding-bottom: 11px; }
.mkt-nav-precos { max-width: 1100px; padding-top: 11px; padding-bottom: 11px; }

.mkt-precos-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-bottom: 40px;
}

/* Grade puxada pra cima por cima da borda da faixa escura (margin negativa
   ~= metade do padding-bottom da banda) - cards "flutuando" sobre a
   transicao em vez de comecarem exatamente onde o fundo muda de cor,
   efeito comum em pricing pages modernas. */
.mkt-pricing-grid {
    max-width: 1140px;
    margin: -64px auto 0;
    padding: 0 24px;
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    align-items: stretch;
}

.mkt-plan {
    position: relative;
    background: var(--white);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: 36px 32px 30px;
    display: flex;
    flex-direction: column;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.mkt-plan:hover {
    transform: translateY(-6px);
    box-shadow: 0 30px 60px -24px rgba(41, 38, 46, 0.28);
}
/* Card em destaque ganha um tint roxo (em vez de branco puro) e um leve
   "levante" - reforca "mais escolhido" sem depender so da tag. */
.mkt-plan-highlight {
    background: linear-gradient(180deg, var(--rose-deep-tint), var(--white) 55%);
    border-color: var(--rose-deep);
    box-shadow: 0 26px 54px -20px rgba(115, 87, 165, 0.5);
    transform: scale(1.03);
}
.mkt-plan-highlight:hover {
    transform: scale(1.03) translateY(-6px);
    box-shadow: 0 34px 64px -22px rgba(115, 87, 165, 0.55);
}
.mkt-plan-tag {
    position: absolute;
    top: -14px;
    left: 32px;
    background: linear-gradient(90deg, var(--gold), var(--rose-deep));
    color: #fff;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    box-shadow: 0 8px 18px -6px rgba(115, 87, 165, 0.55);
}

/* Selo redondo por plano - mesma dupla dourado/roxo da marca, cada plano
   com sua propria mistura pra dar identidade visual sem precisar de mais
   uma cor fora da paleta. */
.mkt-plan-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: var(--radius-pill);
    font-size: 1.1rem;
    color: #fff;
    margin-bottom: 18px;
}
.mkt-plan-icon-free { background: linear-gradient(135deg, var(--gold), var(--gold-dark)); }
.mkt-plan-icon-essencial { background: linear-gradient(135deg, var(--gold), var(--rose-deep)); }
.mkt-plan-icon-pro { background: linear-gradient(135deg, var(--rose-deep), var(--rose-deep-dark)); }

.mkt-plan h3 { font-size: 1.3rem; color: var(--ink); margin-bottom: 10px; }

.mkt-plan-price { font-size: clamp(2.2rem, 2.8vw, 2.6rem); font-weight: 800; color: var(--rose-deep-dark); letter-spacing: -0.03em; line-height: 1; margin-bottom: 12px; }
.mkt-plan-price .cur { font-size: 1.15rem; font-weight: 700; vertical-align: top; margin-right: 3px; }
.mkt-plan-price .per { font-size: 0.94rem; font-weight: 600; color: var(--muted); margin-left: 4px; }

.mkt-plan-limit {
    display: inline-block;
    background: var(--rose-deep-tint);
    color: var(--rose-deep);
    font-size: 0.84rem;
    font-weight: 600;
    border-radius: var(--radius-pill);
    padding: 6px 16px;
    margin-bottom: 22px;
}
.mkt-plan-limit strong { font-weight: 800; }

.mkt-plan-features { list-style: none; margin-bottom: 22px; flex: 1; }
.mkt-plan-features li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.92rem;
    color: var(--ink);
    padding: 7px 0;
    line-height: 1.4;
}
.mkt-plan-features li i { color: var(--success); margin-top: 3px; font-size: 0.78rem; width: 14px; text-align: center; }

/* Linha de suporte e' o diferencial real entre os planos agora - separada
   das outras (que sao identicas nos tres cards) com um icone proprio (nao
   o check verde) e cor dourada pra chamar atencao sem precisar de mais
   texto. */
.mkt-plan-support {
    border-top: 1px dashed var(--border);
    margin-top: 6px;
    padding-top: 16px !important;
    font-weight: 700;
    color: var(--gold-dark);
}
.mkt-plan-support i { color: var(--gold-dark) !important; font-size: 0.85rem !important; }

.mkt-plan .mkt-btn { padding: 13px 20px; font-size: 0.94rem; }

.mkt-pricing-foot { text-align: center; padding: 32px 24px 8px; color: var(--muted); font-size: 0.9rem; flex: 0 0 auto; }
.mkt-pricing-foot a { font-weight: 700; }

/* ---------- Depoimentos ---------- */

.mkt-testimonials { max-width: 1100px; margin: 0 auto; padding: 72px 24px; }
.mkt-section-sub {
    text-align: center;
    color: var(--muted);
    font-size: 0.92rem;
    max-width: 52ch;
    margin: -24px auto 32px;
}

/* Ilustracoes de alunos (mesmo estilo flat da mulher no hero) flanqueando o
   titulo dos depoimentos - reforcam visualmente que os relatos vem tanto de
   professores quanto de alunos. So a partir de 860px: no mobile ocupariam
   espaco demais ao lado de um titulo que ja quebra linha. */
.mkt-testimonials-head { display: flex; align-items: center; justify-content: center; gap: 16px; }
.mkt-testimonials-head-text { flex: 1; max-width: 620px; }
.mkt-testimonials-deco {
    display: none;
    width: 128px;
    height: auto;
    flex-shrink: 0;
    filter: drop-shadow(0 14px 22px rgba(41,38,46,0.14));
    animation: mkt-card-float 6.5s ease-in-out infinite;
}
.mkt-testimonials-deco-left { transform: scaleX(-1); }
.mkt-testimonials-deco-right { animation-delay: -3.2s; }
@media (min-width: 860px) {
    .mkt-testimonials-deco { display: block; }
}
@media (min-width: 1100px) {
    .mkt-testimonials-deco { width: 156px; }
}

.mkt-testimonial-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}
.mkt-testimonial {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 22px 22px 20px;
    display: flex;
    flex-direction: column;
}
.mkt-testimonial-stars { color: var(--gold); font-size: 0.78rem; margin-bottom: 10px; letter-spacing: 2px; }
.mkt-testimonial-quote {
    color: var(--ink);
    font-size: 0.9rem;
    line-height: 1.55;
    flex: 1;
    margin-bottom: 16px;
}
.mkt-testimonial-author { display: flex; align-items: center; gap: 12px; }
.mkt-testimonial-avatar {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(135deg, var(--rose-deep), var(--rose-deep-dark));
}
.mkt-testimonial-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mkt-testimonial-info .n { font-weight: 700; color: var(--ink); font-size: 0.86rem; }
.mkt-testimonial-info .r { color: var(--muted); font-size: 0.76rem; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.mkt-testimonial-tag {
    display: inline-block;
    background: var(--rose-deep-tint);
    color: var(--rose-deep);
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
}
.mkt-testimonial-tag-aluno { background: var(--gold-tint); color: var(--gold-dark); }
.mkt-testimonial-tag-pai { background: var(--success-tint); color: var(--success); }

/* ---------- Frases de marketing (tagline strips) ---------- */
/* Faixas curtas espalhadas entre secoes, reforcando o posicionamento da
   marca em poucas palavras - a propria .mkt-band ao redor (ver acima) e'
   quem da a cor de fundo aqui, entao o paragrafo em si fica so com o
   espacamento vertical e a tipografia (fonte normal, nao italica). */
.mkt-tagline {
    max-width: 900px;
    margin: 0 auto;
    padding: 40px 24px;
    text-align: center;
    font-size: 1.15rem;
    font-weight: 700;
    font-style: normal;
    color: var(--rose-deep-dark);
}
.mkt-tagline i { color: var(--gold-dark); margin-right: 10px; }

/* ---------- Rodape ---------- */
/* Roxo escuro, mesmo degrade radial+linear do hero (.mkt-band-dark) - o
   rodape fecha a pagina retomando a cor de abertura, em vez de terminar num
   branco qualquer. Todo o texto/links dentro precisa ser claro por causa
   disso (equivalente ao que .mkt-nav-on-dark ja faz no header). */
.mkt-footer-band {
    width: 100%;
    flex: 0 0 auto;
    background:
        radial-gradient(640px 480px at 102% -8%, rgba(203,163,110,0.18), transparent 60%),
        radial-gradient(560px 460px at -8% 108%, rgba(150,120,196,0.28), transparent 55%),
        linear-gradient(150deg, #4A3872 0%, #382A5C 50%, #251C3E 100%);
}
.mkt-footer {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px 20px;
}
.mkt-footer-top {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: 32px;
    padding: 40px 0 28px;
    border-top: 1px solid rgba(255,255,255,0.14);
}
.mkt-footer-brand .brand-mark {
    /* Sobre o roxo escuro o texto "Notta" ja embutido em branco na imagem
       aparece direto, sem precisar do chip de fundo usado sobre claro (ver
       .mkt-nav-on-dark .mkt-logo .brand-mark, mesma logica). */
    display: inline-flex;
    font-size: 1.3rem;
    background: none;
    padding: 0;
    margin-bottom: 12px;
}
.mkt-footer-tagline { color: #F3F0F8; font-weight: 700; font-size: 0.86rem; margin-bottom: 6px; }
.mkt-footer-desc { color: rgba(243,240,248,0.65); font-size: 0.78rem; line-height: 1.5; max-width: 34ch; margin-bottom: 16px; }
.mkt-footer-social { display: flex; gap: 10px; }
.mkt-footer-social-link {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255,255,255,0.10);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    transition: background 0.15s ease, transform 0.15s ease;
}
.mkt-footer-social-link:hover { background: rgba(255,255,255,0.22); transform: translateY(-2px); }

.mkt-footer-col { display: flex; flex-direction: column; gap: 10px; }
.mkt-footer-col h4 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: #F3F0F8; margin-bottom: 2px; }
.mkt-footer-col a { color: rgba(243,240,248,0.72); font-size: 0.84rem; text-decoration: none; }
.mkt-footer-col a:hover { color: #fff; }

.mkt-footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 16px 0 20px;
    border-top: 1px solid rgba(255,255,255,0.14);
    color: rgba(243,240,248,0.55);
    font-size: 0.72rem;
}
.mkt-footer-credit a { color: var(--gold); font-weight: 700; text-decoration: none; }

@media (max-width: 760px) {
    .mkt-footer-top { grid-template-columns: 1fr 1fr; }
    .mkt-footer-brand { grid-column: 1 / -1; }
    .mkt-footer-bottom { justify-content: center; text-align: center; }
}

@media (max-width: 900px) {
    /* Texto do hero primeiro (sem order:-1) - no mobile a primeira coisa
       que aparece precisa ser a proposta de valor, nao os cards. Espacos
       verticais mais enxutos que o desktop pra caber mais tela util. */
    .mkt-hero { grid-template-columns: 1fr; padding: 28px 20px 0; gap: 28px; }
    /* Ordem no mobile: texto, depois preview (cards), depois os botoes de
       CTA por ultimo - pedido explicito, diferente do desktop (onde os
       botoes ficam logo abaixo do texto, ao lado do preview). display:
       contents "dissolve" o wrapper .mkt-hero-left, entao texto e botoes
       viram itens irmaos de .mkt-hero-preview no grid, livres pra
       reordenar via order. */
    .mkt-hero-left { display: contents; }
    .mkt-hero-text { order: 1; }
    .mkt-hero-preview { order: 2; }
    .mkt-hero-actions { order: 3; margin-top: 0; }
    .mkt-lead { max-width: none; }
    .mkt-eyebrow { font-size: 0.92rem; margin-bottom: 10px; }
    .mkt-hero-text h1 { margin-bottom: 14px; }
    .mkt-preview-caption { margin-top: 10px; font-size: 0.72rem; }
    .mkt-band-dark { padding-bottom: 36px; }
    .mkt-features, .mkt-locate, .mkt-testimonials, .mkt-cta-band, .mkt-contact { padding: 48px 20px; }
    .mkt-feature-grid { grid-template-columns: 1fr 1fr; }
    .mkt-testimonial-grid { grid-template-columns: 1fr 1fr; }
    .mkt-contact-grid { grid-template-columns: 1fr 1fr; }
    .mkt-tagline { font-size: 1rem; padding: 28px 20px; }
    .mkt-precos-band { padding: 36px 20px 60px; }
    /* Cards compactos no mobile - o padding/gap generoso do desktop
       empilhado verticalmente vira uma coluna comprida demais pra ler.
       Mesmo padrao dos grandes sites (Stripe, Linear, Notion): mobile
       reduz padding/tipografia dos cards em vez de so estreitar a coluna,
       pra cada card ficar compacto (mais "cartao", menos "bloco de
       texto"). */
    .mkt-pricing-grid { grid-template-columns: 1fr; max-width: 420px; margin-top: -40px; gap: 14px; }
    .mkt-plan-highlight { transform: none; }
    .mkt-plan-highlight:hover { transform: translateY(-6px); }
    .mkt-plan { padding: 22px 22px 18px; }
    .mkt-plan-icon { width: 36px; height: 36px; font-size: 0.9rem; margin-bottom: 10px; }
    .mkt-plan h3 { font-size: 1.1rem; margin-bottom: 4px; }
    .mkt-plan-price { font-size: 1.9rem; margin-bottom: 6px; }
    .mkt-plan-limit { margin-bottom: 12px; padding: 5px 14px; font-size: 0.8rem; }
    .mkt-plan-features { margin-bottom: 12px; }
    .mkt-plan-features li { padding: 4px 0; font-size: 0.86rem; }
    .mkt-plan-support { margin-top: 2px; padding-top: 10px !important; }
    .mkt-plan .mkt-btn { padding: 10px 20px; }
}
@media (max-width: 560px) {
    .mkt-feature-grid { grid-template-columns: 1fr; }
    .mkt-testimonial-grid { grid-template-columns: 1fr; }
    .mkt-contact-grid { grid-template-columns: 1fr; }
    .mkt-cta-inner { flex-direction: column; align-items: flex-start; }
    .mkt-nav-links { gap: 12px; }
    /* "Para alunos" some do menu superior no mobile - o acesso do
       aluno/responsavel fica só no rodapé e na tela de destino do link
       "Entrar", sem disputar espaço com Preços/Entrar na barra estreita. */
    .mkt-nav-links > a[href="/portal/entrar"] { display: none; }
    /* "Encontre uma escola" some do menu superior no mobile - nem o icone
       sozinho cabia ao lado de Preços/Entrar na barra estreita sem vazar o
       layout (ver /precos). /buscar continua acessível pela seção dedicada
       na home. */
    .mkt-nav-links > a.mkt-nav-link-buscar { display: none; }
    /* Botoes de CTA empilhados e largura total - mais facil de tocar e
       fica mais "moderno" do que dois chips pequenos lado a lado. */
    .mkt-hero-actions { flex-direction: column; align-items: stretch; }
    .mkt-hero-actions .mkt-btn { width: 100%; }
}

/* ---------- /buscar (busca publica de professor por cidade) ---------- */

/* min-height evita a sensacao de "colado no rodape" quando nao ha
   resultados ainda (so hero + seletor de cidade) - o rodape so aparece
   depois de uma altura minima de conteudo, como nas outras paginas do
   site (que tem hero/secoes bem mais altas). */
.buscar-page {
    min-height: 66vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-bottom: 48px;
}

.buscar-hero {
    /* width:100% e necessario porque .buscar-page e flex-direction:column -
       margens auto no eixo cruzado de um item flex sobrepoem align-items:
       stretch e o encolhem pro tamanho do conteudo (fit-content). Sem
       width:100%, o grid de .buscar-results (mais abaixo) perde a largura
       do container e a coluna 1fr do mapa colapsa quase a zero. */
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    padding: 6px 24px 8px;
    text-align: center;
}
.buscar-hero .mkt-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
}
.buscar-hero h1 { font-size: 2.1rem; margin-bottom: 10px; }
.buscar-hero h1 .grad {
    /* Fundo claro aqui (ao contrario do hero escuro da landing) - gradiente
       em tons escuros da marca pra manter contraste com o texto "cravado". */
    background: linear-gradient(90deg, var(--gold-dark), var(--rose-deep), var(--rose-deep-dark));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
/* .mkt-lead por padrao usa cor clara (pra hero escuro) - aqui o fundo e
   claro (ver comentario do .grad acima), entao precisa de cor escura. */
.buscar-hero .mkt-lead { color: var(--muted); margin: 0 auto 28px; max-width: 560px; }

.buscar-select-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 420px;
    margin: 0 auto;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: 18px 22px;
    text-align: left;
}
.buscar-select-label {
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--rose-deep-dark);
    display: flex;
    align-items: center;
    gap: 8px;
}
.buscar-select {
    width: 100%;
    padding: 12px 14px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: var(--ivory);
    color: var(--ink);
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237357A5' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 17px;
    padding-right: 40px;
}
.buscar-select:focus { outline: none; border-color: var(--rose-deep); box-shadow: 0 0 0 3px var(--rose-tint); }
.buscar-select:disabled { opacity: 0.6; cursor: not-allowed; }

/* Combobox de cidade: input de texto + lista filtrada flutuante por baixo */
.buscar-combobox { position: relative; }
.buscar-combobox-list {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    margin: 0;
    padding: 6px;
    list-style: none;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    max-height: 240px;
    overflow-y: auto;
    z-index: 20;
}
.buscar-combobox-option {
    padding: 9px 12px;
    border-radius: var(--radius-sm);
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--ink);
    cursor: pointer;
}
.buscar-combobox-option:hover,
.buscar-combobox-option.is-active { background: var(--rose-tint); color: var(--rose-deep-dark); }

.buscar-empty {
    max-width: 420px;
    margin: 24px auto 0;
    padding: 28px 20px;
    text-align: center;
    color: var(--muted);
    font-size: 0.9rem;
}
.buscar-empty i { font-size: 1.6rem; color: var(--gold); display: block; margin-bottom: 10px; }

.buscar-results {
    /* width:100% - mesma razao do .buscar-hero acima: sem isso a coluna 1fr
       do mapa colapsa quase a zero dentro do flex-direction:column de
       .buscar-page. */
    width: 100%;
    display: grid;
    grid-template-columns: minmax(280px, 380px) 1fr;
    gap: 20px;
    max-width: 1100px;
    margin: 32px auto 64px;
    padding: 0 24px;
    align-items: start;
}

.buscar-list-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

.buscar-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.buscar-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 13px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border);
    background: var(--white);
    color: var(--muted);
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.buscar-filter-chip:hover { border-color: var(--rose-deep); color: var(--rose-deep-dark); }
.buscar-filter-chip.is-active { background: var(--rose-deep); border-color: var(--rose-deep); color: #fff; }
.buscar-filter-count { opacity: 0.75; font-weight: 600; }

.buscar-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 440px;
    overflow-y: auto;
    padding-right: 4px;
}

.buscar-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    text-align: left;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 14px 16px;
    cursor: pointer;
    font-family: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}
.buscar-card:hover { border-color: var(--rose-deep); box-shadow: var(--shadow-sm); transform: translateY(-1px); }

.buscar-card-icon {
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--rose-tint);
    color: var(--rose-deep);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    margin-top: 2px;
}
.buscar-card-body { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 0; }
.buscar-card-name { font-weight: 700; color: var(--ink); font-size: 0.94rem; }
.buscar-card-address { font-size: 0.8rem; color: var(--muted); line-height: 1.35; }
.buscar-card-arrow { color: var(--rose-deep); font-size: 0.9rem; flex: none; margin-top: 10px; }

.buscar-card-instruments, .buscar-popup .buscar-card-instruments { display: flex; flex-wrap: wrap; gap: 5px; }
.buscar-instrument-tag {
    display: inline-block;
    padding: 2px 9px;
    border-radius: var(--radius-pill);
    background: var(--gold-tint);
    color: var(--gold-dark);
    font-size: 0.7rem;
    font-weight: 700;
}

.buscar-whatsapp {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    margin-top: 2px;
    padding: 5px 12px;
    border-radius: var(--radius-pill);
    background: #25D366;
    color: #fff;
    font-size: 0.76rem;
    font-weight: 700;
    text-decoration: none;
}
.buscar-whatsapp:hover { background: #1ebe57; text-decoration: none; }

.buscar-map-wrap {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border);
}
.buscar-map { width: 100%; height: 480px; background: var(--blush-tint); }
.buscar-popup { font-family: 'Poppins', sans-serif; display: flex; flex-direction: column; gap: 6px; }
.buscar-popup strong { display: block; color: var(--rose-deep-dark); }

@media (max-width: 860px) {
    .buscar-results { grid-template-columns: 1fr; }
    .buscar-list { max-height: none; }
    .buscar-list-col { order: 2; }
    .buscar-map-wrap { order: 1; }
    .buscar-map { height: 340px; }
}

/* Pagina de Termos de Uso (/termos) - texto corrido, sem grid/cards. */
.mkt-legal-band {
    max-width: 760px;
    margin: 0 auto;
    padding: 48px 24px 24px;
}
.mkt-legal-band .mkt-eyebrow { margin-bottom: 8px; }
.mkt-legal-band h1 { margin: 0 0 6px; }
.mkt-legal-updated { color: var(--rose-deep-dark); opacity: 0.7; font-size: 0.85rem; margin: 0; }

.mkt-legal-main {
    max-width: 760px;
    margin: 0 auto;
    padding: 8px 24px 72px;
    color: #3d3550;
    line-height: 1.65;
}
.mkt-legal-main section { margin-bottom: 30px; }
.mkt-legal-main h2 {
    font-size: 1.05rem;
    color: var(--rose-deep-dark);
    margin: 0 0 10px;
}
.mkt-legal-main p, .mkt-legal-main li { font-size: 0.95rem; }
.mkt-legal-main ul { padding-left: 20px; margin: 0 0 10px; }
.mkt-legal-main li { margin-bottom: 6px; }
.mkt-legal-main strong { color: var(--rose-deep-dark); }
.mkt-legal-toc {
    background: var(--rose-deep-tint);
    border-radius: var(--radius-lg);
    padding: 18px 22px;
    margin-bottom: 34px;
}
.mkt-legal-toc p { margin: 0 0 8px; font-weight: 600; color: var(--rose-deep-dark); }
.mkt-legal-toc ol { margin: 0; padding-left: 20px; columns: 2; column-gap: 24px; }
.mkt-legal-toc li { font-size: 0.85rem; margin-bottom: 4px; }
.mkt-legal-toc a { color: #3d3550; }
@media (max-width: 640px) {
    .mkt-legal-toc ol { columns: 1; }
}