/* ==========================================================================
   Nivua Agenda — o site do produto
   --------------------------------------------------------------------------
   Carregado só na raiz, depois do app.css. Aqui moram os blocos que existem
   uma vez só: o topo do site, o herói, a seção de preço, o rodapé grande.

   A tarefa desta página é responder três perguntas em quinze segundos:
   o que é, para quem é, e quanto custa. Tudo aqui serve a isso.
   ========================================================================== */

.site { background: var(--paper); }

.wrap {
    width: 100%;
    max-width: 68rem;
    margin: 0 auto;
    padding-inline: var(--sp-4);
}

.wrap--narrow { max-width: 46rem; }

.section { padding: var(--sp-8) 0; }
.section--sand { background: var(--sand); }
.section--tight { padding: var(--sp-7) 0; }

.section__head { max-width: 38rem; margin: 0 auto var(--sp-6); text-align: center; }
.section__head--left { margin-inline: 0; text-align: left; }

.eyebrow {
    display: inline-block;
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--brand-600);
    margin-bottom: var(--sp-2);
}

.section__title {
    font-family: var(--serif);
    font-size: var(--text-2xl);
    margin-bottom: var(--sp-3);
}

/* Um traço curto sob o olho-de-boi amarra a seção à marca sem pedir cor no
   texto, que precisaria ser escura para continuar legível. */
.eyebrow::after {
    content: '';
    display: block;
    width: 2rem;
    height: 2px;
    margin: .35rem auto 0;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--brand-500), var(--warm-300));
}

.section__head--left .eyebrow::after,
.split .eyebrow::after { margin-inline: 0; }

.section__sub {
    color: var(--ink-3);
    font-size: var(--text-md);
    margin: 0;
    text-wrap: pretty;
}

/* ==========================================================================
   Topo
   ========================================================================== */

.masthead {
    position: sticky; top: 0; z-index: 50;
    background: rgba(255, 255, 255, .82);
    backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid transparent;
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}

/* A borda só aparece depois que a página rola: no topo, o cabeçalho flutua. */
.masthead.is-stuck { border-bottom-color: var(--line); box-shadow: var(--shadow-sm); }

.masthead__inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--sp-4);
    padding-block: .8rem;
}

.masthead__links { display: flex; align-items: center; gap: var(--sp-5); }

.masthead__link {
    font-size: var(--text-sm);
    color: var(--ink-2);
    text-decoration: none;
    font-weight: 500;
}
.masthead__link:hover { color: var(--brand-700); }

.masthead__actions { display: flex; align-items: center; gap: var(--sp-3); }

/* Abaixo de 56rem os links do meio saem; ficam "Entrar" e o botão, que é o
   que importa no celular. */
@media (max-width: 56rem) {
    .masthead__links { display: none; }
}

/* ==========================================================================
   Herói
   ========================================================================== */

.hero {
    position: relative;
    overflow: hidden;
    padding: var(--sp-8) 0 var(--sp-9);
    /* Os dois tons do símbolo — o roxo e o salmão — reaparecem aqui, bem
       diluídos. É o que faz o topo do site parecer da mesma marca da logo
       sem competir com ela. */
    background:
        radial-gradient(900px 420px at 78% -8%, var(--brand-100), transparent 62%),
        radial-gradient(680px 380px at 6% 8%, var(--warm-100), transparent 58%),
        radial-gradient(500px 300px at 50% 110%, var(--brand-50), transparent 70%),
        var(--paper);
}

.hero__grid {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: var(--sp-7);
    align-items: center;
}

@media (max-width: 60rem) {
    .hero { padding: var(--sp-7) 0 var(--sp-8); }
    .hero__grid { grid-template-columns: 1fr; gap: var(--sp-6); text-align: center; }
    .hero__actions, .hero__trust { justify-content: center; }
}

.hero__badge {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .35rem .8rem .35rem .45rem;
    border-radius: var(--r-pill);
    background: var(--paper);
    border: 1px solid var(--brand-200);
    box-shadow: var(--shadow-sm);
    font-size: var(--text-xs);
    color: var(--brand-700);
    font-weight: 500;
    margin-bottom: var(--sp-4);
}

.hero__badge b {
    background: var(--brand-600); color: #fff;
    padding: .12rem .5rem; border-radius: var(--r-pill);
    font-size: .68rem; font-weight: 700; letter-spacing: .03em;
}

.hero__title {
    font-family: var(--serif);
    font-size: var(--text-3xl);
    line-height: 1.08;
    letter-spacing: -.028em;
    margin: 0 0 var(--sp-4);
}

/*
 * O destaque do título.
 *
 * A cor sólida é literal, não uma variável: esta regra torna o texto
 * transparente e pinta o gradiente por trás, então qualquer coisa que faça o
 * gradiente falhar deixa a frase invisível — e uma frase invisível não parece
 * erro para quem publicou, parece uma linha que sumiu. Já aconteceu aqui, com
 * o app.css preso no cache e a variável indefinida.
 *
 * Por isso: cores fixas, e o truque de transparência isolado dentro de um
 * @supports, para só entrar onde o recorte no texto realmente funciona.
 */
.hero__title em {
    font-style: normal;
    color: #74588A;
}

@supports ((background-clip: text) or (-webkit-background-clip: text)) {
    .hero__title em {
        background-image: linear-gradient(100deg, #7F6E99, #C98F86);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }
}

.hero__sub {
    font-size: var(--text-lg);
    color: var(--ink-3);
    max-width: 32rem;
    margin: 0 0 var(--sp-5);
}

.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-bottom: var(--sp-4); }

.hero__trust {
    display: flex; flex-wrap: wrap; gap: .5rem 1.25rem;
    font-size: var(--text-sm); color: var(--ink-4);
}

.hero__trust span { display: inline-flex; align-items: center; gap: .35rem; }
.hero__trust svg { width: 1rem; height: 1rem; color: var(--ok); flex: none; }

/* ==========================================================================
   Maquete do celular
   --------------------------------------------------------------------------
   Montada com os mesmos componentes da vitrine de verdade, e não com uma
   imagem: além de não precisar refazer captura de tela a cada mudança, o que
   a pessoa vê no site é literalmente o produto.
   ========================================================================== */

.mock {
    position: relative;
    width: min(19rem, 100%);
    margin-inline: auto;
    filter: drop-shadow(0 32px 60px rgba(43, 30, 54, .22));
}

/* Um halo por trás separa o aparelho do fundo claro. Sem ele a maquete
   flutua sem peso, como um recorte colado. */
.mock::before {
    content: '';
    position: absolute;
    inset: 8% -14% -6%;
    border-radius: 50%;
    background: radial-gradient(closest-side, var(--brand-200), transparent 75%);
    opacity: .55;
    z-index: -1;
}

.mock__frame {
    background: #1A1420;
    border-radius: 2.4rem;
    padding: .55rem;
}

.mock__screen {
    background: var(--sand);
    border-radius: 2rem;
    overflow: hidden;
    /* Recorta o conteúdo na altura de um celular sem precisar de rolagem. */
    height: 30rem;
    position: relative;
}

.mock__notch {
    position: absolute; top: .5rem; left: 50%;
    transform: translateX(-50%);
    width: 5rem; height: 1.1rem;
    background: #1A1420;
    border-radius: var(--r-pill);
    z-index: 2;
}

.mock__body { padding: 2.1rem 1rem 1rem; }

/* Some por baixo, para o corte não parecer um erro de renderização. */
.mock__fade {
    position: absolute; inset: auto 0 0 0; height: 4.5rem;
    background: linear-gradient(transparent, var(--sand));
    pointer-events: none;
}

.mock__avatar {
    width: 3rem; height: 3rem; margin: 0 auto .5rem;
    border-radius: 50%;
    background: linear-gradient(140deg, var(--brand-200), var(--brand-100));
    border: 1px solid var(--brand-200);
    display: grid; place-items: center;
    font-family: var(--serif); font-size: 1.2rem; color: var(--brand-700);
}

.mock__name { font-family: var(--serif); font-size: 1rem; text-align: center; font-weight: 600; }
.mock__headline { font-size: .7rem; color: var(--ink-4); text-align: center; margin: 0 0 .9rem; }

.mock__card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: .6rem .7rem;
    margin-bottom: .45rem;
    box-shadow: var(--shadow-sm);
}

.mock__card--on { border-color: var(--brand-300); box-shadow: 0 0 0 2px var(--brand-100); }

.mock__svc  { font-size: .8rem; font-weight: 600; }
.mock__meta { font-size: .68rem; color: var(--ink-4); display: flex; gap: .6rem; margin-top: .15rem; }
.mock__price{ color: var(--brand-600); font-weight: 600; }

.mock__slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: .35rem; margin-top: .2rem; }

.mock__slot {
    text-align: center; font-size: .72rem; font-weight: 600;
    padding: .4rem 0;
    border: 1px solid var(--line-2); border-radius: 8px;
    background: var(--paper);
}

.mock__slot--on { background: var(--brand-600); border-color: var(--brand-600); color: #fff; }

/* Aviso de notificação pousando sobre a maquete. */
.mock__toast {
    position: absolute;
    left: -1.5rem; bottom: 4.5rem;
    width: 15rem;
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(8px);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: .6rem .75rem;
    box-shadow: var(--shadow-lg);
    display: flex; gap: .55rem; align-items: flex-start;
    animation: toast-in .7s var(--ease) .5s both;
}

@media (max-width: 60rem) { .mock__toast { left: -.5rem; } }
@media (max-width: 24rem) { .mock__toast { display: none; } }

@keyframes toast-in {
    from { opacity: 0; transform: translateY(12px) scale(.96); }
    to   { opacity: 1; transform: none; }
}

.mock__toast-icon {
    width: 1.6rem; height: 1.6rem; flex: none;
    border-radius: 7px;
    background: var(--brand-600); color: #fff;
    display: grid; place-items: center; font-size: .75rem;
}

.mock__toast-title { font-size: .72rem; font-weight: 700; }
.mock__toast-text  { font-size: .68rem; color: var(--ink-3); line-height: 1.35; }

/* ==========================================================================
   Nichos
   ========================================================================== */

.niches {
    display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem;
}

.niche {
    padding: .45rem 1rem;
    border-radius: var(--r-pill);
    background: var(--paper);
    border: 1px solid var(--line);
    font-size: var(--text-sm);
    color: var(--ink-2);
}

/* ==========================================================================
   Passos
   ========================================================================== */

.steps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: var(--sp-5);
    counter-reset: step;
}

.step { position: relative; padding-top: var(--sp-5); }

.step::before {
    counter-increment: step;
    content: counter(step);
    position: absolute; top: 0; left: 0;
    width: 2.2rem; height: 2.2rem;
    border-radius: 50%;
    background: var(--brand-600); color: #fff;
    display: grid; place-items: center;
    font-family: var(--serif); font-weight: 700; font-size: 1rem;
    box-shadow: var(--shadow);
}

.step h3 { margin-top: var(--sp-4); }
.step p  { color: var(--ink-3); font-size: var(--text-sm); margin: 0; }

/* ==========================================================================
   Recursos
   ========================================================================== */

.features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: var(--sp-4);
}

.feature {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: var(--sp-5);
    box-shadow: var(--shadow-sm);
    transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}

.feature:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: var(--brand-200);
}

.feature__icon {
    width: 2.75rem; height: 2.75rem;
    border-radius: 14px;
    background: linear-gradient(140deg, var(--brand-200), var(--brand-50));
    border: 1px solid var(--brand-200);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
    color: var(--brand-700);
    display: grid; place-items: center;
    margin-bottom: var(--sp-3);
}

.feature__icon svg { width: 1.25rem; height: 1.25rem; }

.feature h3 { margin-bottom: .35rem; }
.feature p  { color: var(--ink-3); font-size: var(--text-sm); margin: 0; }

/* ==========================================================================
   Destaque com duas colunas
   ========================================================================== */

.split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-7);
    align-items: center;
}

@media (max-width: 56rem) { .split { grid-template-columns: 1fr; gap: var(--sp-5); } }

.checklist { list-style: none; padding: 0; margin: var(--sp-4) 0 0; }

.checklist li {
    display: flex; gap: .65rem; align-items: flex-start;
    padding: .45rem 0;
    font-size: var(--text-sm);
    color: var(--ink-2);
}

.checklist svg { width: 1.15rem; height: 1.15rem; color: var(--ok); flex: none; margin-top: .12rem; }

/* ==========================================================================
   Preço
   ========================================================================== */

.plan {
    max-width: 25rem;
    margin: 0 auto;
    background: var(--paper);
    border: 1px solid var(--brand-200);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.plan__top {
    position: relative;
    padding: var(--sp-6) var(--sp-5) var(--sp-4);
    text-align: center;
    background:
        radial-gradient(90% 70% at 50% 0%, var(--brand-100), transparent 70%),
        linear-gradient(165deg, var(--brand-50), var(--paper));
    border-bottom: 1px solid var(--line);
}

/* Fio de cor no topo do cartão: o detalhe que separa "caixa com preço" de
   "plano". */
.plan__top::before {
    content: '';
    position: absolute; inset: 0 0 auto 0;
    height: 4px;
    background: linear-gradient(90deg, var(--brand-500), var(--warm-300));
}

.plan__name {
    font-size: var(--text-xs); font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--brand-600);
}

.plan__price {
    display: flex; align-items: baseline; justify-content: center; gap: .2rem;
    margin: var(--sp-3) 0 .2rem;
}

.plan__currency { font-size: var(--text-lg); color: var(--ink-3); font-weight: 600; }

.plan__amount {
    font-family: var(--serif);
    font-size: 3.1rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -.03em;
}

.plan__period { color: var(--ink-4); font-size: var(--text-sm); }
.plan__note   { font-size: var(--text-sm); color: var(--ink-3); margin: 0; }

.plan__body { padding: var(--sp-5); }
.plan__body .checklist { margin-top: 0; }
.plan__body .btn { margin-top: var(--sp-4); }

.plan__fine { font-size: var(--text-xs); color: var(--ink-4); text-align: center; margin: var(--sp-3) 0 0; }

/* ==========================================================================
   Perguntas frequentes
   ========================================================================== */

.faq { max-width: 42rem; margin: 0 auto; }

.faq details {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: var(--sp-4);
    margin-bottom: .6rem;
    box-shadow: var(--shadow-sm);
    transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}

.faq details[open] { border-color: var(--brand-200); box-shadow: var(--shadow); }
.faq details:hover { border-color: var(--brand-200); }

.faq summary {
    cursor: pointer;
    font-weight: 600;
    font-size: var(--text-md);
    list-style: none;
    display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4);
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
    content: '+';
    font-size: 1.4rem;
    color: var(--brand-500);
    font-weight: 400;
    line-height: 1;
    flex: none;
    transition: transform .2s var(--ease);
}

.faq details[open] summary::after { transform: rotate(45deg); }

.faq p { margin: var(--sp-3) 0 0; color: var(--ink-3); font-size: var(--text-sm); }

/* ==========================================================================
   Chamada final e formulário
   ========================================================================== */

.cta {
    background:
        radial-gradient(700px 300px at 20% 0%, rgba(255, 255, 255, .14), transparent 60%),
        linear-gradient(150deg, var(--brand-800), var(--brand-900));
    color: #fff;
    border-radius: var(--r-xl);
    padding: var(--sp-7) var(--sp-5);
    box-shadow: var(--shadow-lg);
}

.cta h2 { font-family: var(--serif); font-size: var(--text-2xl); color: #fff; }
.cta p  { color: rgba(255, 255, 255, .78); }

.cta .card {
    background: rgba(255, 255, 255, .97);
    border-color: transparent;
    box-shadow: var(--shadow-lg);
}

.cta-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-6);
    align-items: center;
}

@media (max-width: 56rem) {
    .cta-grid { grid-template-columns: 1fr; gap: var(--sp-5); }
    .cta { padding: var(--sp-6) var(--sp-4); }
}

/* ==========================================================================
   Rodapé grande
   ========================================================================== */

.site-footer {
    background: var(--brand-900);
    color: rgba(255, 255, 255, .68);
    padding: var(--sp-7) 0 var(--sp-5);
    font-size: var(--text-sm);
}

.site-footer__grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: var(--sp-6);
    padding-bottom: var(--sp-6);
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}

@media (max-width: 46rem) { .site-footer__grid { grid-template-columns: 1fr; gap: var(--sp-5); } }

.site-footer h4 {
    color: #fff; font-size: var(--text-xs);
    letter-spacing: .1em; text-transform: uppercase;
    margin-bottom: var(--sp-3); opacity: .55;
}

.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { padding: .28rem 0; }
.site-footer a  { color: rgba(255, 255, 255, .74); text-decoration: none; }
.site-footer a:hover { color: #fff; }

.site-footer__bottom {
    padding-top: var(--sp-4);
    display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-3);
    font-size: var(--text-xs);
    color: rgba(255, 255, 255, .5);
}

/* ==========================================================================
   Entrada suave ao rolar
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
    .reveal {
        opacity: 0;
        transform: translateY(18px);
        transition: opacity .55s var(--ease), transform .55s var(--ease);
    }
    .reveal.is-visible { opacity: 1; transform: none; }
}