/* ═══════════════════════════════════════════════════════════════════
   ATELIÊ 3D — a porta da frente

   Mesma estante de pigmentos da bancada. A diferença é o ritmo: aqui
   a página rola, respira e tem uma coisa só para pedir — criar conta.

   Verdete continua sendo quem age. Nenhum pigmento aqui é enfeite.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  --breu:#16121F; --bancada:#201A2D; --bancada-2:#2A2239;
  --risco:#3B3154; --risco-2:#51446F;
  --gesso:#F6F2FF; --poeira:#D2CBE8; --poeira-2:#A79DC4;
  --verdete:#25D9A6; --verdete-2:#57F0C4; --verdete-vel:rgba(37,217,166,.13);
  --acafrao:#FFB43D; --acafrao-vel:rgba(255,180,61,.13);
  --magenta:#FF5C9E; --cobalto:#5F8CFF; --lilas:#B478FF;
  --serif:"Instrument Serif",Georgia,serif;
  --sans:"Instrument Sans",system-ui,-apple-system,sans-serif;
  --mono:"DM Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --mola:cubic-bezier(.2,.75,.3,1);
  --troca:.16s var(--mola);
  --r:6px; --rg:10px;
  --largura:1120px;
}

/* A preferência da bancada acompanha a porta da frente. */
:root[data-tema="claro"]{
  --breu:#ECE8F0; --bancada:#FAF8F5; --bancada-2:#E9E3EE;
  --risco:#D6CEDF; --risco-2:#B8ACC8;
  --gesso:#302B3B; --poeira:#554D65; --poeira-2:#665C76;
  --verdete:#0B725C; --verdete-2:#127D66; --verdete-vel:rgba(11,114,92,.09);
  --acafrao:#8A5A00; --acafrao-vel:rgba(138,90,0,.11);
  --magenta:#BC0F58; --cobalto:#2649BE; --lilas:#6C34C0;
  color-scheme:light;
}

*{box-sizing:border-box;margin:0;padding:0}

/* O atributo hidden PERDE para qualquer classe que declare display —
   e aqui .planos é grid. Sem esta linha, esconder um bloco por
   hidden não faz nada, e o "Carregando…" fica na tela para sempre.
   A mesma regra existe no estilo.css; faltava nesta folha. */
[hidden]{display:none !important}
em,i,cite,address,dfn,var{font-style:normal}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
svg{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

html{scroll-behavior:smooth}
body{
  background:var(--breu);color:var(--gesso);
  font-family:var(--sans);font-size:16px;line-height:1.6;font-style:normal;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse 46% 38% at 6% 0%,rgba(180,120,255,.13),transparent 62%),
    radial-gradient(ellipse 42% 34% at 97% 4%,rgba(37,217,166,.10),transparent 62%),
    radial-gradient(ellipse 60% 40% at 50% 100%,rgba(255,92,158,.07),transparent 66%);
}
main,header,footer{position:relative;z-index:1}

a{color:inherit}
:focus-visible{outline:2px solid var(--verdete);outline-offset:3px;border-radius:3px}

/* ─── barra do topo ─────────────────────────────────────────────── */
.crista{
  display:flex;align-items:center;gap:26px;flex-wrap:wrap;
  max-width:var(--largura);margin:0 auto;padding:20px 22px;
}
.marca{
  display:flex;align-items:center;gap:9px;text-decoration:none;
  font-family:var(--serif);font-size:21px;letter-spacing:.01em;
}
.marca__ic{width:22px;height:22px;color:var(--verdete);stroke-width:1.6}
.selo-beta{
  display:inline-flex;align-items:center;flex:0 0 auto;
  padding:3px 7px;border:1px solid color-mix(in srgb,var(--acafrao) 42%,transparent);
  border-radius:5px;background:var(--acafrao-vel);color:var(--acafrao);
  font-family:var(--mono);font-size:9px;font-weight:500;
  line-height:1.2;letter-spacing:.1em;text-transform:uppercase;
}
.crista__nav{display:flex;gap:22px;margin-left:auto;font-size:14px}
.crista__nav a{color:var(--poeira);text-decoration:none;transition:color var(--troca)}
.crista__nav a:hover{color:var(--gesso)}
.crista__bts{display:flex;gap:9px}

.bt{
  display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,var(--verdete-2),var(--verdete));
  color:#062119;border:0;border-radius:var(--r);
  padding:10px 18px;font-size:14px;font-weight:600;text-decoration:none;
  cursor:pointer;transition:transform var(--troca),filter var(--troca);
  white-space:nowrap;
}
.bt:hover{transform:translateY(-1px);filter:brightness(1.06)}
.bt:active{transform:scale(.97)}
.bt--fraco{
  background:transparent;color:var(--gesso);
  border:1px solid var(--risco-2);
}
.bt--fraco:hover{border-color:var(--verdete);color:var(--verdete);filter:none}
.bt--grande{padding:14px 26px;font-size:15.5px}

/* ─── capa ──────────────────────────────────────────────────────── */
.capa{
  max-width:var(--largura);margin:0 auto;padding:52px 22px 74px;
  display:grid;grid-template-columns:1.05fr .95fr;gap:46px;align-items:center;
}
.olho{
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--verdete);margin-bottom:16px;
}
h1{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(38px,5.2vw,62px);line-height:1.04;letter-spacing:-.017em;
  text-wrap:balance;margin-bottom:20px;
}
.linha-fina{
  font-size:17px;color:var(--poeira);max-width:52ch;text-wrap:pretty;
  margin-bottom:28px;
}
.linha-fina strong{color:var(--gesso);font-weight:600}
.capa__bts{display:flex;gap:11px;flex-wrap:wrap}
.capa__pe{
  font-family:var(--mono);font-size:11.5px;color:var(--poeira-2);
  margin-top:16px;letter-spacing:.03em;
}

.palco{width:100%;height:auto;display:block}
.palco .grade{stroke:var(--verdete);stroke-width:1;opacity:.32}
.palco .peca{filter:drop-shadow(0 0 26px rgba(37,217,166,.28))}
.palco .cota{stroke:var(--poeira-2);stroke-width:1;opacity:.75}
.palco .cota text{
  font-family:var(--mono);font-size:11px;fill:var(--poeira-2);stroke:none;
  letter-spacing:.06em;
}

/* ─── o que diferencia ──────────────────────────────────────────── */
.faixa{max-width:var(--largura);margin:0 auto;padding:0 22px 78px}
.faixa__g{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));
  gap:1px;background:var(--risco);border:1px solid var(--risco);
  border-radius:var(--rg);overflow:hidden;
}
.cartao{background:var(--bancada);padding:24px 22px 26px}
.cartao__ic{width:22px;height:22px;color:var(--verdete);margin-bottom:14px}
.cartao h3{font-size:16px;font-weight:600;margin-bottom:8px;text-wrap:balance}
.cartao p{font-size:14px;color:var(--poeira);line-height:1.55;text-wrap:pretty}

/* ─── seções ────────────────────────────────────────────────────── */
section h2{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(28px,3.8vw,42px);line-height:1.08;letter-spacing:-.012em;
  text-wrap:balance;margin-bottom:14px;
}
.sub{font-size:15.5px;color:var(--poeira);max-width:60ch;text-wrap:pretty;margin-bottom:30px}

.passos{max-width:var(--largura);margin:0 auto;padding:0 22px 84px}
.passos__l{list-style:none;display:grid;gap:1px;background:var(--risco);
  border:1px solid var(--risco);border-radius:var(--rg);overflow:hidden;margin-top:30px}
.passos__l li{
  background:var(--bancada);padding:24px 24px 26px;
  display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start;
}
.passos__n{
  font-family:var(--serif);font-size:34px;line-height:1;color:var(--verdete);
  font-variant-numeric:tabular-nums;min-width:34px;
}
.passos__l h3{font-size:17px;font-weight:600;margin-bottom:7px}
.passos__l p{font-size:14.5px;color:var(--poeira);text-wrap:pretty;max-width:64ch}

/* ─── preços ────────────────────────────────────────────────────── */
.precos{max-width:var(--largura);margin:0 auto;padding:0 22px 84px}
.planos{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:13px}
.carregando{font-family:var(--mono);font-size:12px;color:var(--poeira-2)}
.plano{
  background:var(--bancada);border:1px solid var(--risco);
  border-radius:var(--rg);padding:24px 22px 26px;display:flex;flex-direction:column;
  transition:border-color var(--troca),transform var(--troca);
}
.plano:hover{border-color:var(--risco-2);transform:translateY(-2px)}
.plano--destaque{border-color:var(--verdete);background:var(--verdete-vel)}
.plano__selo{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--verdete);margin-bottom:11px;
}
.plano__n{font-size:17px;font-weight:600;margin-bottom:6px}
.plano__p{font-family:var(--serif);font-size:38px;line-height:1;margin-bottom:4px}
.plano__p small{font-family:var(--sans);font-size:14px;color:var(--poeira-2)}
.plano__cr{
  font-family:var(--mono);font-size:12px;color:var(--verdete);
  margin-bottom:16px;letter-spacing:.02em;
}
.plano__q{font-size:13.5px;color:var(--poeira);line-height:1.5;margin-bottom:20px;flex:1}
.plano .bt{width:100%}

.pacotes{margin-top:44px;padding-top:34px;border-top:1px solid var(--risco)}
.pacotes h3{font-family:var(--serif);font-weight:400;font-size:25px;margin-bottom:8px}
.pacotes__g{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:11px}
.pacote{
  background:var(--bancada);border:1px solid var(--risco);border-radius:var(--r);
  padding:17px 18px;display:flex;align-items:baseline;justify-content:space-between;gap:12px;
}
.pacote b{font-family:var(--mono);font-size:14px;color:var(--verdete)}
.pacote span{font-family:var(--serif);font-size:22px}

/* ─── dúvidas ───────────────────────────────────────────────────── */
.duvidas{max-width:840px;margin:0 auto;padding:0 22px 84px}
.duvidas details{
  border-bottom:1px solid var(--risco);
}
.duvidas summary{
  cursor:pointer;padding:19px 30px 19px 0;font-size:16px;font-weight:500;
  position:relative;list-style:none;transition:color var(--troca);
}
.duvidas summary::-webkit-details-marker{display:none}
.duvidas summary::after{
  content:"";position:absolute;right:6px;top:26px;
  width:8px;height:8px;border-right:1.6px solid var(--poeira-2);
  border-bottom:1.6px solid var(--poeira-2);transform:rotate(45deg);
  transition:transform var(--troca),border-color var(--troca);
}
.duvidas details[open] summary::after{transform:rotate(-135deg);border-color:var(--verdete)}
.duvidas summary:hover{color:var(--verdete)}
.duvidas details p{
  font-size:14.5px;color:var(--poeira);padding-bottom:20px;max-width:66ch;text-wrap:pretty;
}
.duvidas details p a{color:var(--verdete)}

/* ─── chamada final ─────────────────────────────────────────────── */
.fim{
  max-width:var(--largura);margin:0 auto 84px;padding:52px 22px 58px;
  text-align:center;border:1px solid var(--risco);border-radius:var(--rg);
  background:var(--bancada);
}
.fim p{color:var(--poeira);margin-bottom:26px}

/* ─── rodapé ────────────────────────────────────────────────────── */
.pe{border-top:1px solid var(--risco);padding:34px 22px 46px}
.pe__g{
  max-width:var(--largura);margin:0 auto;display:flex;gap:32px;
  justify-content:space-between;flex-wrap:wrap;
}
.marca--pe{font-size:18px;margin-bottom:9px}
.pe__d{font-size:13px;color:var(--poeira-2);line-height:1.5}
.pe__links{display:flex;flex-direction:column;gap:8px;font-size:13.5px}
.pe__links a{color:var(--poeira);text-decoration:none;transition:color var(--troca)}
.pe__links a:hover{color:var(--verdete)}
.pe__nota{
  max-width:var(--largura);margin:26px auto 0;
  font-family:var(--mono);font-size:11px;color:var(--poeira-2);letter-spacing:.03em;
}

/* Superfícies suaves, com o mesmo contraste da bancada clara. */
:root[data-tema="claro"] body::before{
  background:
    radial-gradient(ellipse 60% 42% at 8% 0%,rgba(180,120,255,.045),transparent 70%),
    radial-gradient(ellipse 46% 40% at 97% 4%,rgba(11,114,92,.03),transparent 70%);
}
:root[data-tema="claro"] .bt:not(.bt--fraco){color:#FFF}
:root[data-tema="claro"] .bt--fraco{background:rgba(250,248,245,.7)}
:root[data-tema="claro"] :is(.faixa__g,.passos__l,.plano,.pacote,.fim){box-shadow:0 4px 18px rgba(66,48,88,.04)}
:root[data-tema="claro"] .plano--destaque{background:#E3EFE8}
:root[data-tema="claro"] .capa__arte{
  background:radial-gradient(ellipse at center,rgba(250,248,245,.88),transparent 70%);
}
:root[data-tema="claro"] .palco .peca{filter:drop-shadow(0 5px 14px rgba(11,114,92,.12))}
:root[data-tema="claro"] .palco .peca path{stroke:var(--verdete)}
:root[data-tema="claro"] .palco stop{stop-color:var(--verdete)}

/* ─── telas pequenas ────────────────────────────────────────────── */
@media (max-width:900px){
  .capa{grid-template-columns:1fr;gap:30px;padding-top:34px;padding-bottom:56px}
  .capa__arte{order:-1;max-width:420px;margin:0 auto}
  .crista__nav{display:none}
  .crista{gap:14px}
  .crista__bts{margin-left:auto}
}
@media (max-width:520px){
  .capa__bts{flex-direction:column;align-items:stretch}
  .capa__bts .bt{width:100%}
  .passos__l li{grid-template-columns:1fr;gap:8px}
  .pe__g{flex-direction:column;gap:24px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important}
  html{scroll-behavior:auto}
}