/* ============================================================
   Planeja Festa — landing (estilo "Steep": papel claro/creme,
   serif editorial, acento pêssego único, botões pretos arredondados,
   fotos full-bleed em seções separadas, vídeo que EXPANDE no scroll).
   Serif: Source Serif 4 · Sans: Inter
   ============================================================ */
:root {
  --ink: #17191c;
  --paper: #fbf8f2;     /* creme claro — canvas */
  --card: #ffffff;
  --mist: #f2efe8;
  --fog: #f6f2ea;
  --slate: #78756d;
  --ash: #9a978f;
  --smoke: #a8a49c;
  --peach: #fbe1d1;     /* acento único */
  --sienna: #5d2a1a;
  --line: #e8e1d5;

  --serif: "Source Serif 4", ui-serif, Georgia, "Times New Roman", serif;
  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --max: 1200px;
  --shadow-float: rgba(4,23,43,0.05) 0 0 0 1px, rgba(0,0,0,0.10) 0 20px 25px -5px, rgba(0,0,0,0.10) 0 8px 10px -6px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: 32px; }

h1, h2 { font-family: var(--serif); font-weight: 400; margin: 0; }
h1 { font-size: clamp(2.7rem, 6.4vw, 5.4rem); line-height: 1.1; letter-spacing: -0.025em; }
h2 { font-size: clamp(2rem, 4.6vw, 3.7rem); line-height: 1.14; letter-spacing: -0.018em; }
.it { font-style: italic; }
.eyebrow { font-family: var(--sans); font-weight: 500; font-size: 14px; color: var(--ash); margin: 0 0 18px; letter-spacing: 0.02em; }

/* ---------- Botões pretos arredondados (pílula) ---------- */
.btn { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--sans); font-weight: 500; font-size: 16px; line-height: 1; padding: 14px 24px; border-radius: 9999px; border: 1px solid transparent; cursor: pointer; transition: background .18s, color .18s, border-color .18s, transform .18s, opacity .18s; }
.btn-fill { background: var(--ink); color: #fff; }
.btn-fill:hover { transform: translateY(-1px); opacity: .9; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: #fff; }
.btn-light { background: #fff; color: var(--ink); }
.btn-light:hover { transform: translateY(-1px); }
.arrow { font-weight: 500; }
.link { font-family: var(--sans); font-weight: 500; font-size: 16px; display: inline-flex; align-items: center; gap: .4rem; }
.link::after { content: "→"; transition: transform .18s; } .link:hover { text-decoration: underline; text-underline-offset: 3px; } .link:hover::after { transform: translateX(3px); }

/* ---------- Header ---------- */
.top { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--paper) 84%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.top .wrap { display: flex; align-items: center; gap: 1.5rem; height: 74px; }
.logo { font-family: var(--serif); font-size: 1.5rem; letter-spacing: -0.01em; }
.logo .it { font-style: italic; }
.nav { display: flex; gap: 2rem; margin-left: auto; font-size: 16px; color: var(--slate); }
.nav a:hover { color: var(--ink); }
.top-cta { display: flex; gap: .6rem; align-items: center; }
.top-cta .btn { padding: 11px 18px; font-size: 15px; }
@media (max-width: 920px) { .nav { display: none; } .top-cta .ghost-hide { display: none; } }

/* ---------- Hero ---------- */
.hero { padding-top: 74px; padding-bottom: 46px; text-align: center; }
.hero h1 { max-width: 16ch; margin-inline: auto; }
.hero .sub { font-size: 20px; color: var(--slate); max-width: 52ch; margin: 26px auto 0; line-height: 1.5; }
.hero-actions { display: flex; gap: 12px; justify-content: center; margin-top: 34px; flex-wrap: wrap; }
.collage { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 60px; align-items: start; text-align: left; }
.artifact { background: var(--card); border-radius: 20px; box-shadow: var(--shadow-float); padding: 20px; }
.art-label { font-family: var(--sans); font-size: 13px; color: var(--slate); margin: 0 0 6px; }
.art-metric { font-family: var(--serif); font-size: 46px; line-height: 1; }
.art-delta { font-family: var(--sans); font-size: 13px; color: var(--slate); margin-top: 6px; }
.art-delta b { color: var(--sienna); font-weight: 600; }
.art-chart { margin-top: 14px; } .art-chart svg { width: 100%; height: 46px; display: block; }
.mini-row { display: flex; align-items: center; gap: 12px; }
.avatar { width: 40px; height: 40px; border-radius: 9999px; display: grid; place-items: center; font-family: var(--sans); font-size: 14px; font-weight: 500; color: #2a3d2a; background: #e6ecdf; flex: 0 0 auto; }
.mini-name { font-family: var(--sans); font-weight: 500; font-size: 15px; }
.mini-sub { font-family: var(--sans); font-size: 13px; color: var(--slate); }
.tag-status { margin-top: 14px; display: inline-block; font-family: var(--sans); font-size: 12px; color: var(--slate); border: 1px solid var(--line); border-radius: 9999px; padding: 4px 12px; }
.tag-status::before { content: "●"; color: #cf7d52; font-size: 9px; margin-right: 6px; vertical-align: 2px; }
.composer { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 14px; padding: 12px 12px 12px 16px; }
.composer .ph { flex: 1; font-family: var(--sans); color: var(--smoke); font-size: 14px; }
.composer .ic { color: var(--smoke); font-size: 16px; }
.composer .send { width: 40px; height: 40px; border-radius: 9999px; background: var(--ink); color: #fff; display: grid; place-items: center; flex: 0 0 auto; }
.composer-label { font-family: var(--sans); font-size: 13px; color: var(--slate); margin: 0 0 12px; }

/* ---------- Seções ---------- */
section.band { padding-block: 104px; }
.band.fog { background: var(--fog); }
.section-head { max-width: 60ch; margin-bottom: 40px; }
.section-head.center { margin-inline: auto; text-align: center; margin-bottom: 56px; }
.section-head h2 { margin-bottom: 14px; }
.section-head p { color: var(--slate); font-size: 18px; margin: 0; }
.tag { font-family: var(--sans); font-size: 14px; color: var(--ash); }
.placeholder-note { font-family: var(--sans); font-size: 14px; color: var(--smoke); }

/* ---------- Seção de FOTO full-bleed (sem borda) ---------- */
.showcase { position: relative; width: 100%; min-height: 86vh; background: var(--mist) center/cover no-repeat; display: grid; align-items: end; }
.showcase.parallax { background-attachment: fixed; }
.showcase::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(18,16,13,.70) 0%, rgba(18,16,13,.18) 46%, rgba(18,16,13,0) 72%); }
.showcase .cap { position: relative; z-index: 1; width: 100%; max-width: var(--max); margin-inline: auto; padding: 0 32px 60px; color: #fff; }
/* sombreamento sutil apenas nos textos sobre imagem */
.showcase .cap .eyebrow, .showcase .cap h2, .showcase .cap p { text-shadow: 0 2px 6px rgba(0,0,0,.45); }
.showcase .cap .btn { text-shadow: none; }
.showcase .cap .eyebrow { color: #f4d9c6; }
.showcase .cap h2 { color: #fff; max-width: 20ch; }
.showcase .cap p { color: rgba(255,255,255,.86); font-size: 19px; max-width: 44ch; margin: 16px 0 0; }
.showcase .cap .btn { margin-top: 26px; }
/* Variante CONTIDA com bordas arredondadas (formato novo) */
.showcase.contained { width: min(1240px, calc(100% - 48px)); margin-inline: auto; min-height: 74vh; border-radius: 28px; overflow: hidden; }
@media (hover: none) { .showcase.parallax { background-attachment: scroll; } }
@media (max-width: 920px) { .showcase.contained { width: calc(100% - 32px); border-radius: 20px; min-height: 64vh; } }

/* Split de foto — card arredondado e contido */
.split { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; min-height: 540px; border-radius: 24px; overflow: hidden; background: var(--card); box-shadow: var(--shadow-float); }
.split .ph { background: var(--mist) center/cover no-repeat; min-height: 320px; }
.split .txt { display: grid; align-content: center; padding: clamp(40px, 5vw, 76px); }
.split .txt .lead { color: var(--slate); font-size: 19px; margin: 18px 0 0; }
@media (max-width: 920px) { .split { grid-template-columns: 1fr; } .split .ph { min-height: 300px; } }

/* ---------- STORY VIDEO — Remotion autoral (planeja-story.mp4 / planeja-agenda.mp4) ----------
   .story-hold = caixa de layout (estável, não escala) — usada pra medir o scroll.
   .story-video = o vídeo que CRESCE com o scroll no desktop (transform: scale).
   UMA borda só (o anel do shadow-float) — sem ::after, que duplicava a borda no mobile. */
.story-hold { position: relative; width: 100%; max-width: 1080px; margin-inline: auto; }
.story-video { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 24px;
               overflow: hidden; box-shadow: var(--shadow-float); background: var(--paper);
               transform-origin: center center; will-change: transform; }
.story-video video { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 920px) {
  .story-hold { max-width: none; }                 /* ocupa a largura toda disponível */
  .wrap-video { padding-inline: 14px; }            /* menos margem lateral → vídeo maior no celular */
  .story-video { border-radius: 14px; transform: none !important; } /* sem scale no mobile */
}

/* ---------- Sobre / Para quem ---------- */
.about { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.about .lead { color: var(--slate); font-size: 19px; margin: 18px 0 0; }
.about-list { list-style: none; padding: 0; margin: 28px 0 0; }
.about-list li { display: flex; gap: 16px; padding: 16px 0; border-top: 1px solid var(--line); align-items: baseline; }
.about-list li:last-child { border-bottom: 1px solid var(--line); }
.about-list .n { font-family: var(--serif); font-style: italic; font-size: 20px; color: var(--sienna); flex: 0 0 auto; width: 1.8rem; }
.about .ph { aspect-ratio: 3/4; background: var(--mist) center/cover no-repeat; border-radius: 16px; }
.about .ph.pessego { background-position: center 82%; }
.audience { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 48px; }
.aud { display: flex; gap: 14px; align-items: baseline; padding: 18px 0; border-top: 1px solid var(--line); }
.aud .em { font-size: 20px; flex: 0 0 auto; } .aud b { font-weight: 600; } .aud span { color: var(--slate); }

/* ---------- Funcionalidades ---------- */
.feature { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; padding-block: 72px; border-top: 1px solid var(--line); }
.feature:first-of-type { border-top: none; }
.feature.rev .f-text { order: 2; }
.f-text .tag { display: block; margin-bottom: 14px; color: var(--sienna); font-weight: 500; }
.f-text h2 { font-size: clamp(1.9rem, 3.4vw, 2.8rem); }
.f-text .f-lead { color: var(--slate); font-size: 19px; margin: 16px 0 0; line-height: 1.5; }
.f-text .f-body { color: var(--ink); margin: 14px 0 0; font-size: 16px; line-height: 1.6; }
.f-points { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 10px; }
.f-points li { display: flex; gap: 12px; color: var(--ink); font-size: 16px; }
.f-points li::before { content: "→"; color: var(--sienna); }
.f-text .link { margin-top: 24px; }
.f-card { background: var(--card); border-radius: 20px; box-shadow: var(--shadow-float); padding: 24px; }
.slots-demo { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.slot-chip { font-family: var(--sans); font-size: 14px; padding: 8px 14px; border-radius: 9999px; border: 1px solid var(--line); color: var(--ink); }
.slot-chip.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.slot-chip.off { color: var(--smoke); text-decoration: line-through; }
.doc { background: var(--card); border-radius: 14px; box-shadow: var(--shadow-float); padding: 24px; }
.doc-line { height: 9px; border-radius: 6px; background: var(--mist); margin-bottom: 10px; }
.doc-line.s { width: 40%; } .doc-line.m { width: 70%; } .doc-line.l { width: 100%; }
.doc-total { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: baseline; }
.doc-total b { font-family: var(--serif); font-size: 32px; font-weight: 400; }
.doc-total span { font-family: var(--sans); font-size: 13px; color: var(--slate); }
.bars { display: flex; align-items: flex-end; gap: 8px; height: 94px; margin-top: 8px; }
.bars i { flex: 1; background: var(--sienna); border-radius: 4px 4px 0 0; transform-origin: bottom; opacity: .92; }

/* Passo a passo */
.walk { max-width: 880px; margin-inline: auto; }
.walk-step { display: grid; grid-template-columns: auto 1fr; gap: 30px; padding: 32px 0; border-top: 1px solid var(--line); align-items: start; }
.walk-step:last-child { border-bottom: 1px solid var(--line); }
.walk-step .wn { font-family: var(--serif); font-size: 46px; line-height: 1; color: var(--sienna); width: 2.6rem; }
.walk-step h3 { font-family: var(--sans); font-weight: 500; font-size: 22px; margin: 2px 0 6px; }
.walk-step p { margin: 0; color: var(--slate); font-size: 17px; line-height: 1.55; }

/* FAQ */
.faq { max-width: 860px; margin-inline: auto; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 24px 0; font-family: var(--serif); font-size: 24px; display: flex; justify-content: space-between; gap: 20px; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--sans); font-size: 26px; color: var(--slate); line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: -4px 0 24px; color: var(--slate); font-size: 17px; line-height: 1.6; max-width: 68ch; }

/* Momento */
.moment { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.moment h2 { font-size: clamp(2rem, 4vw, 3.2rem); }
.moment p { color: var(--slate); font-size: 19px; margin: 18px 0 0; }
.moment .ph { aspect-ratio: 4/3; background: var(--mist) center/cover no-repeat; border-radius: 16px; }

/* Exemplo Janaina — card pêssego */
.feature-card { background: var(--peach); color: var(--sienna); border-radius: 24px; padding: 56px; display: grid; grid-template-columns: 1.15fr .85fr; gap: 44px; align-items: center; }
.feature-card .eyebrow { color: var(--sienna); opacity: .7; }
.feature-card h2 { color: var(--sienna); }
.feature-card p { color: var(--sienna); opacity: .85; margin: 16px 0 28px; font-size: 19px; }
.feature-card .btn-fill { background: var(--sienna); }
.feature-card .shot { aspect-ratio: 3/4; background: var(--mist) center/cover no-repeat; border-radius: 16px; }

/* Planos */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.plan { background: var(--card); border-radius: 24px; box-shadow: var(--shadow-float); padding: 32px; display: flex; flex-direction: column; }
.plan.featured { outline: 2px solid var(--ink); }
.plan h3 { font-family: var(--serif); font-size: 28px; margin: 0; }
.plan-price { font-family: var(--serif); font-size: 48px; line-height: 1; margin: 14px 0 0; }
.plan-price small { font-family: var(--sans); font-size: 14px; color: var(--slate); }
.plan-feats { list-style: none; padding: 0; margin: 22px 0 26px; display: grid; gap: 10px; font-size: 15px; color: var(--slate); flex: 1; }
.plan-feats li { display: flex; gap: 8px; } .plan-feats li::before { content: "—"; color: var(--sienna); }
.plan .btn { justify-content: center; }

/* CTA final */
.cta { background: var(--ink); color: #fff; border-radius: 24px; padding: 92px 32px; text-align: center; }
.cta h2 { color: #fff; margin-bottom: 14px; }
.cta p { color: rgba(255,255,255,.75); max-width: 46ch; margin: 0 auto 30px; font-size: 19px; }
/* Botões do CTA escuro: só o hover simples do próprio .btn (sem pulse, sem brilho). */
.cta .btn-ghost { color: #fff; border-color: rgba(255,255,255,.5); }
.cta .btn-ghost:hover { background: #fff; color: var(--ink); border-color: #fff; }

/* Footer */
.foot { background: var(--ink); color: #fff; padding-block: 54px; }
.foot .wrap { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between; }
.foot .logo { color: #fff; font-size: 1.3rem; }
.foot-links { display: flex; gap: 24px; flex-wrap: wrap; font-family: var(--sans); font-size: 14px; }
.foot-links a { color: rgba(255,255,255,.6); } .foot-links a:hover { color: #fff; }
.foot .copy { font-family: var(--sans); font-size: 13px; color: rgba(255,255,255,.5); }

/* ---------- HERO com arco de balões (ilustração) ----------
   Layout "moldura": o arco emoldura o texto. Fundo creme (mesmo do PNG) para
   não haver contorno; sem overlay escuro. `.hero-arco-inner` tem a proporção
   nativa do arco, então a posição relativa do título dentro da abertura
   se mantém em qualquer tamanho de tela — sem "chute" de posicionamento. */
.hero-arco { position: relative; overflow: hidden;
             /* Sem chão: só o cream + o arco em PNG transparente por cima.
                Um respiro pequeno no rodapé para os pés do arco não colarem
                na borda da seção. */
             padding: clamp(20px, 3vw, 40px) 24px clamp(20px, 3vw, 40px);
             background: #f7e7c5; }
/* Moldura menor no desktop → hero cabe na dobra sem forçar rolagem.
   A abertura continua confortável para o texto porque as fontes escalam
   junto (usam vw), então a proporção texto/moldura fica igual. */
.hero-arco-inner { position: relative; width: 100%; max-width: 1100px; margin: 0 auto;
                   aspect-ratio: 1192 / 896; }
.hero-arco-arte { position: absolute; inset: 0; width: 100%; height: 100%;
                  object-fit: contain; animation: fadeUp .9s .05s ease both; }
/* Texto ancorado dentro da abertura do arco. Larguras/tamanhos em % da
   moldura, para escalar juntos e nunca "vazar" da abertura. */
/* Texto ancorado dentro da abertura do arco. A abertura NÃO é um retângulo —
   é um arco, então a largura útil na altura do subtítulo é menor que a do topo.
   Por isso: container conservador (34%/440px), h1 mais compacto e o `.sub` com
   `max-width` extra, forçando a quebra ANTES dos balões laterais. */
.hero-arco-texto { position: absolute; left: 50%; top: 48%;
                   transform: translate(-50%, -50%); z-index: 2;
                   width: min(38%, 490px); text-align: center; color: var(--ink); }
.hero-arco-texto .eyebrow { color: var(--sienna); margin: 0 0 12px;
                            animation: fadeUp .9s .14s ease both; }
.hero-arco-texto h1 { font-size: clamp(1.75rem, 3.1vw, 3rem); line-height: 1.08;
                      max-width: none; margin: 0 0 14px;
                      animation: fadeUp .9s .24s ease both; }
.hero-arco-texto .sub { font-size: clamp(13.5px, 1.2vw, 16.5px); color: var(--slate);
                        margin: 0 auto 22px; max-width: 92%; line-height: 1.45;
                        animation: fadeUp .9s .34s ease both; }
.hero-arco-texto .hero-actions { justify-content: center; margin-top: 4px; gap: 10px;
                                 animation: fadeUp .9s .44s ease both; }
.hero-arco-texto .btn { padding: 11px 18px; font-size: 14.5px; }

/* Setinha "role para baixo" — versão escura para o fundo creme */
.hero-cue { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 3;
            width: 26px; height: 42px; border: 2px solid color-mix(in srgb, var(--ink) 45%, transparent);
            border-radius: 9999px; display: grid; justify-items: center; padding-top: 7px;
            animation: fadeUp 1s .6s ease both; }
.hero-cue span { width: 4px; height: 8px; border-radius: 9999px; background: var(--ink);
                 animation: cue 1.7s ease-in-out infinite; }
@keyframes cue { 0%,100% { transform: translateY(0); opacity: 1 } 50% { transform: translateY(12px); opacity: .25 } }
.hero-cue:hover { border-color: var(--ink); }

/* Mobile: a abertura do arco fica pequena demais para o texto. Vira layout linear:
   arco em cima como imagem decorativa + texto embaixo, tudo centralizado. */
@media (max-width: 720px) {
  .hero-arco-inner { aspect-ratio: auto; }
  .hero-arco-arte { position: static; width: 100%; max-width: 480px; height: auto;
                    margin: 0 auto; display: block; }
  .hero-arco-texto { position: static; transform: none; width: 100%; max-width: 460px;
                     margin: 12px auto 0; }
  .hero-arco-texto h1 { font-size: clamp(1.9rem, 6vw, 2.6rem); }
  .hero-arco-texto .sub { font-size: 16px; margin-bottom: 22px; }
  .hero-arco-texto .btn { padding: 13px 22px; font-size: 15px; }
  .hero-cue { display: none; }   /* no mobile some, já dá para ver que tem conteúdo abaixo */
}

/* ---------- Seção de ILUSTRAÇÃO (arte em balão) ----------
   Fundo na cor exata do creme da própria arte (#f7e7c5), para a imagem
   se fundir sem emenda. Imagem inteira, texto escuro (ao contrário das
   seções de FOTO, que usam overlay escuro + texto branco). */
/* UMA cor só para todas as seções de ilustração. O fundo dos PNGs foi achatado
   para exatamente este creme, então a imagem se funde com a seção — sem contorno.
   (A árvore vinha com um degradê sutil no fundo; por isso aparecia uma borda.) */
.ilustra { background: #f7e7c5; }
.ilustra-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(24px, 5vw, 64px); align-items: center; }
.ilustra-grid.inverso { grid-template-columns: .95fr 1.05fr; }   /* arte à esquerda */
.ilustra-txt h2 { margin-bottom: 16px; }
.ilustra-txt .lead { color: var(--sienna); font-size: 19px; line-height: 1.55; margin: 0 0 30px; max-width: 44ch; }
.ilustra-art img { width: 100%; max-width: 560px; height: auto; margin-inline: auto; }
@media (max-width: 920px) {
  /* Precisa repetir o `.inverso`: `.ilustra-grid.inverso` (2 classes) tem peso
     MAIOR que `.ilustra-grid` (1 classe) e continuaria mandando 2 colunas no
     celular — era o que espremia o texto ao lado da árvore. */
  .ilustra-grid,
  .ilustra-grid.inverso { grid-template-columns: 1fr; text-align: center; }
  .ilustra-txt .lead { margin-inline: auto; }
  /* imagem SEMPRE acima do texto, igual à seção da flor */
  .ilustra-art { order: -1; }
  .ilustra-txt { order: 0; }
  .ilustra-art img { max-width: 380px; }
}

/* ---------- Vitrine dos cards ---------- */
.hero-cards { padding-block: 84px 96px; background: var(--paper); }
.cards-label { font-family: var(--sans); font-size: 14px; color: var(--ash); text-align: center; margin: 0 0 30px; }
.hero-cards .collage { margin-top: 0; }

/* ---------- Animações + reveal ---------- */
@keyframes fadeUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes riseBar { from { transform: scaleY(0); } to { transform: scaleY(1); } }
/* Entrada = ANIMAÇÃO com fill "backwards" (não trava o transform depois de terminar,
   senão o efeito de hover dos cards não funcionaria). Hover = transição, abaixo. */
/* Só esconde se o JS estiver vivo (classe .js no <html>). Sem JS, tudo aparece
   normalmente — nada pode ficar invisível para sempre. */
.js .reveal { opacity: 0; }
/* SEM fill-mode e SEM delay, de propósito: a opacidade final (1) vem da REGRA,
   não da animação. Se o navegador não executar animações, o conteúdo aparece
   mesmo assim em vez de ficar invisível para sempre. O escalonamento vem do JS. */
.js .reveal.in { opacity: 1; animation: fadeUp .8s cubic-bezier(.2,.8,.2,1); }

/* Cards: animam AO ENTRAR NA TELA (não no carregamento) e reagem ao mouse */
.artifact { transition: transform .32s cubic-bezier(.2,.8,.2,1), box-shadow .32s ease; }
.artifact.in:hover { transform: translateY(-8px); box-shadow: rgba(4,23,43,.06) 0 0 0 1px, rgba(0,0,0,.16) 0 28px 34px -8px, rgba(0,0,0,.12) 0 10px 14px -8px; }
.art-metric { transition: transform .32s cubic-bezier(.2,.8,.2,1), color .32s ease; transform-origin: left center; }
.artifact.in:hover .art-metric { transform: scale(1.08); color: var(--sienna); }
.chart-path { stroke-dasharray: 640; stroke-dashoffset: 640; }
.artifact.in .chart-path { animation: draw 1.7s .25s ease forwards; }
.artifact.in:hover .chart-path { animation: draw 1s ease forwards; }   /* redesenha ao passar o mouse */
.avatar { transition: transform .32s cubic-bezier(.2,.8,.2,1); }
.artifact.in:hover .avatar { transform: scale(1.12) rotate(-6deg); }
.tag-status { transition: background .3s ease, color .3s ease, border-color .3s ease; }
.artifact.in:hover .tag-status { background: var(--peach); border-color: var(--peach); color: var(--sienna); }
.composer { transition: border-color .3s ease, box-shadow .3s ease; }
.artifact.in:hover .composer { border-color: var(--smoke); box-shadow: rgba(0,0,0,.06) 0 6px 14px -6px; }
.composer .send { transition: transform .32s cubic-bezier(.2,.8,.2,1); }
.artifact.in:hover .composer .send { transform: translateX(4px) scale(1.06); }

.in .bars i { animation: riseBar .9s cubic-bezier(.2,.8,.2,1) both; }
.in .bars i:nth-child(2){animation-delay:.08s}.in .bars i:nth-child(3){animation-delay:.16s}
.in .bars i:nth-child(4){animation-delay:.24s}.in .bars i:nth-child(5){animation-delay:.32s}.in .bars i:nth-child(6){animation-delay:.40s}

@media (max-width: 920px) {
  .hero-cards { padding-block: 56px 64px; }
}
/* Quem pede "reduzir movimento" no sistema não deve levar deslocamento, zoom
   nem parallax (é o que causa desconforto vestibular). Mas ANTES isso apagava
   TUDO com `*{animation:none!important}` e o site ficava congelado no desktop.
   Agora mantemos um fade suave de opacidade — que é seguro para essa preferência
   — e desligamos só o movimento de verdade. */
@keyframes fadeSuave { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  /* movimento pesado: desligado */
  .hero-arco-arte { animation: none; }
  .hero-cue span { animation: none; }
  .artifact.in:hover { transform: none; }
  .artifact.in:hover .art-metric, .artifact.in:hover .avatar { transform: none; }
  .artifact.in .chart-path, .artifact.in:hover .chart-path { animation: none; }
  .chart-path { stroke-dashoffset: 0; }
  .in .bars i { animation: none; }
  /* aparecer ao rolar: mantém, mas só com fade (sem subir) */
  .js .reveal { opacity: 0; }
  .js .reveal.in { opacity: 1; animation: fadeSuave .5s ease; }
}

/* ---------- Responsivo ---------- */
@media (max-width: 920px) {
  .collage, .about, .plans, .feature, .moment, .audience, .feature-card { grid-template-columns: 1fr; }
  .feature.rev .f-text { order: 0; }
  section.band { padding-block: 68px; }
  .feature-card, .cta { padding: 34px; }
  .wrap { padding-inline: 22px; }
  .showcase { min-height: 68vh; }
}
@media (min-width: 921px) and (max-width: 1040px) { .plans { grid-template-columns: repeat(3, 1fr); } }

/* ============================================================
   PROVA — passo a passo com mockups da tela real (/criar)
   Cada passo tem uma "mini janela" com o que aparece na tela,
   estilizada mas fiel: campo do nome, paleta, prévia, modal.
   ============================================================ */
.prova .section-head p { max-width: 62ch; margin-inline: auto; }

.prova-passos { list-style: none; padding: 0; margin: 56px 0 0; display: grid; gap: 34px; }
.prova-passo { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(20px, 4vw, 56px);
               align-items: center; background: var(--card); border: 1px solid var(--line);
               border-radius: 22px; padding: clamp(18px, 3vw, 32px); box-shadow: var(--shadow-float); }
.prova-passo:nth-child(even) { grid-template-columns: .95fr 1.05fr; }
.prova-passo:nth-child(even) .mock { order: 2; }
.prova-passo:nth-child(even) .prova-txt { order: 1; }

.prova-txt .prova-tag { display: inline-block; font-family: var(--sans); font-size: 12.5px;
                        font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
                        color: var(--sienna); background: var(--peach); padding: 5px 12px;
                        border-radius: 9999px; margin-bottom: 14px; }
.prova-txt h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.5rem, 2.6vw, 2rem);
                line-height: 1.15; margin: 0 0 12px; }
.prova-txt p { color: var(--slate); font-size: 17px; line-height: 1.55; margin: 0; }

/* ---------- MOCKUP (mini janela do navegador) ---------- */
.mock { border-radius: 14px; overflow: hidden; background: var(--paper); border: 1px solid var(--line);
        box-shadow: 0 20px 44px rgba(4,23,43,.10); font-family: var(--sans); }
.mock-barra { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: #ece7dc;
              border-bottom: 1px solid var(--line); }
.mock-barra i { width: 9px; height: 9px; border-radius: 9999px; background: #d5cebe; display: block; }
.mock-url { margin-left: 10px; flex: 1; background: #fff; border-radius: 6px; padding: 3px 10px;
            font-size: 11.5px; color: var(--slate); }

.mock-corpo { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 16px; min-height: 260px; }

/* --- campo do formulário --- */
.mock-campo { display: flex; flex-direction: column; justify-content: center; }
.mock-label { font-size: 12px; font-weight: 500; color: var(--ink); margin-bottom: 6px; }
.mock-input { background: var(--card); border: 1px solid var(--line); border-radius: 9px;
              padding: 9px 12px; font-size: 13.5px; color: var(--ink); position: relative; }
.mock-input-vazio { color: var(--smoke); }
.mock-cursor { display: inline-block; width: 1.5px; height: 14px; background: var(--ink);
               margin-left: 2px; vertical-align: -3px; animation: piscaCursor 1s steps(2) infinite; }
@keyframes piscaCursor { 50% { opacity: 0; } }
.mock-hint { font-size: 11.5px; color: var(--slate); margin-top: 6px; }
.mock-hint b { color: var(--ink); }
.mock-campo-linha { margin-bottom: 10px; }

/* --- paletinha (passo 2) --- */
.mock-paletas { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0; }
.mock-tema { border: 1px solid var(--line); background: var(--card); color: var(--ink);
             font-family: var(--sans); font-size: 11px; padding: 5px 10px; border-radius: 9999px;
             cursor: pointer; }
.mock-tema-on { border-color: transparent; color: #fff; font-weight: 600;
                background: linear-gradient(90deg, #e63946, #f4a261, #ffd166, #2a9d8f, #4ea8de, #9d4edd); }

/* --- prévia do site --- */
.mock-previa { border-radius: 9px; overflow: hidden; border: 1px solid var(--line);
               display: flex; flex-direction: column; }
.mock-previa-vazia { background: #fff; }
.mock-p-topo { display: flex; align-items: center; padding: 7px 10px; border-bottom: 1px solid rgba(0,0,0,.06); }
.mock-p-marca { font-family: var(--serif); font-size: 12px; color: var(--ink); flex: 1; }
.mock-p-cta { font-size: 9.5px; padding: 4px 9px; border-radius: 9999px; background: var(--ink); color: #fff; }
.mock-p-hero { text-align: center; padding: 16px 10px; flex: 1;
               display: flex; flex-direction: column; justify-content: center; }
.mock-p-h1 { font-family: var(--serif); font-size: 15px; line-height: 1.15; color: var(--ink);
             margin: 0 auto; max-width: 14ch; }
.mock-p-sub { font-size: 10px; color: var(--slate); margin-top: 6px; }

/* --- prévia com o tema Arco-íris ligado --- */
.mock-previa-arcoiris { background: #fffdfb; }
.mock-previa-arcoiris .mock-p-cta { background: #e63946; }
.mock-p-baloes { display: flex; justify-content: center; gap: 5px; margin-bottom: 10px; }
.mock-p-baloes i { width: 18px; height: 22px; border-radius: 46% 54% 50% 50% / 46% 46% 54% 54%;
                   display: block; box-shadow: inset -2px -3px 5px rgba(0,0,0,.08); }
.mock-p-baloes i:nth-child(1) { background: #e63946; }
.mock-p-baloes i:nth-child(2) { background: #ffd166; }
.mock-p-baloes i:nth-child(3) { background: #2a9d8f; }
.mock-p-baloes i:nth-child(4) { background: #4ea8de; }

/* --- modal do passo 3 --- */
.mock-corpo-modal { grid-template-columns: 1fr; place-items: center; padding: 20px; background: rgba(23,25,28,.35); }
.mock-modal { background: var(--card); border-radius: 12px; padding: 20px; width: 100%; max-width: 320px;
              box-shadow: 0 10px 30px rgba(0,0,0,.2); }
.mock-passo { font-size: 10.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
              color: var(--ash); margin: 0 0 4px; }
.mock-modal-titulo { font-family: var(--serif); font-size: 20px; line-height: 1.15;
                     color: var(--ink); margin-bottom: 14px; }
.mock-resumo { display: flex; align-items: center; gap: 10px; background: var(--fog);
               border-radius: 9px; padding: 8px 10px; margin-bottom: 12px; }
.mock-cores { display: flex; gap: 3px; flex: 0 0 auto; }
.mock-cores i { width: 12px; height: 12px; border-radius: 9999px; display: block; border: 1px solid rgba(0,0,0,.06); }
.mock-cores i:nth-child(1) { background: #e63946; }
.mock-cores i:nth-child(2) { background: #ffd166; }
.mock-cores i:nth-child(3) { background: #fffdfb; }
.mock-resumo-txt { font-size: 11px; color: var(--slate); line-height: 1.3; }
.mock-resumo-txt b { display: block; color: var(--ink); font-size: 12.5px; font-weight: 600; }
.mock-botao { background: var(--ink); color: #fff; text-align: center; padding: 10px;
              border-radius: 9999px; font-size: 12.5px; font-weight: 500; margin-top: 6px; }

/* ---------- Rodapé "1 min" ---------- */
.prova-total { display: flex; align-items: center; gap: 24px; justify-content: center;
               flex-wrap: wrap; margin-top: 44px; padding: 24px 30px; background: var(--card);
               border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-float); }
.prova-total-num { font-family: var(--serif); font-size: clamp(2.2rem, 4vw, 3rem); color: var(--sienna);
                   line-height: 1; }
.prova-total-txt { display: flex; flex-direction: column; }
.prova-total-txt b { font-family: var(--sans); font-size: 17px; color: var(--ink); }
.prova-total-txt span { font-size: 14px; color: var(--slate); }

@media (max-width: 800px) {
  .prova-passo, .prova-passo:nth-child(even) { grid-template-columns: 1fr; }
  .prova-passo:nth-child(even) .mock { order: 0; }
  .prova-passo:nth-child(even) .prova-txt { order: 0; }
  .mock-corpo { min-height: 220px; }
  .prova-total { flex-direction: column; text-align: center; gap: 10px; padding: 24px; }
}