/* =============================================================
   Blue Rose · luxo escuro (escolha do dono em 17/10/2026)
   Preto e azul profundos, títulos em serifada (Cormorant Garamond),
   detalhes em prata, muito espaço e entradas marcantes.
   Vale para todas as páginas (carregado depois do site.css).
   ============================================================= */
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/cormorant-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/cormorant-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 500; font-display: swap; src: url('../fonts/cormorant-500-italic.woff2') format('woff2'); }

:root, html[data-theme="light"] {
  color-scheme: dark;
  --bg: #05070b;
  --bg-2: #080b11;
  --surface: #0a0e15;
  --surface-2: #0f141d;
  --line: rgba(205, 214, 228, 0.08);
  --line-2: rgba(205, 214, 228, 0.15);
  --ink: #eef1f6;
  --ink-2: #aab2c0;
  --ink-3: #808999;
  --accent: #9dbcff;
  --accent-solid: #3a6ef0;
  --accent-soft: rgba(110, 150, 255, 0.09);
  --prata: #cdd4de;
  --prata-2: #8f98a7;
  --serif: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
  --r-sm: 3px;
  --r-lg: 6px;
  --shadow: 0 30px 70px -40px rgba(0, 0, 0, 0.95);
}
body {
  background:
    radial-gradient(1300px 760px at 50% -14%, rgba(58, 110, 240, 0.13), transparent 62%),
    radial-gradient(900px 600px at 100% 40%, rgba(120, 140, 180, 0.05), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}
::selection { background: rgba(157, 188, 255, 0.28); }

/* ---------- títulos em serifada ---------- */
h1, h2, h3, .sec-title, .caminhos-tit { font-family: var(--serif); font-weight: 500; letter-spacing: -0.005em; }
h1, .ini-hero h1, .np-hero h1, .hero h1 { line-height: 0.98; }
.sec-title { font-size: clamp(40px, 5.2vw, 72px); line-height: 1; max-width: 16ch; }
h3 { font-weight: 600; letter-spacing: 0; }
.serif, h1 em, h2 em, .sec-title em { font-family: var(--serif); font-style: italic; font-weight: 500; color: transparent; background: linear-gradient(180deg, #ffffff 0%, #cdd8ea 45%, #8fa2c4 100%); -webkit-background-clip: text; background-clip: text; letter-spacing: 0; }
h1 .serif, h2 .serif { color: transparent; }

/* ---------- rótulos com fio de prata ---------- */
.eyebrow { color: var(--prata); font-size: 11.5px; letter-spacing: 0.32em; }
.eyebrow::before { content: ""; display: inline-block; width: 34px; height: 1px; margin-right: 14px; vertical-align: middle; background: linear-gradient(90deg, transparent, var(--prata)); filter: none; transform-origin: left; }
.js .reveal.eyebrow::before { transform: scaleX(0); transition: transform 1.2s var(--ease) .2s; }
.js .reveal.eyebrow.visto::before { transform: none; }

/* ---------- botões de grife ---------- */
.btn { border-radius: 2px; text-transform: uppercase; letter-spacing: 0.14em; font-size: 12.5px; font-weight: 600; min-height: 50px; padding: 0 28px; }
.btn-primary { background: linear-gradient(180deg, #4a7cf5, #2a58d6); border: 1px solid rgba(255, 255, 255, 0.16); box-shadow: 0 18px 44px -18px rgba(58, 110, 240, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.18); }
.btn-primary:hover { background: linear-gradient(180deg, #5a88f8, #3263e0); }
.btn-ghost { border: 1px solid rgba(205, 214, 228, 0.35); color: var(--prata); background: transparent; }
.btn-ghost:hover { border-color: var(--prata); color: #fff; background: rgba(205, 214, 228, 0.05); }
.nav .btn { min-height: 42px; padding: 0 20px; font-size: 11.5px; }

/* ---------- cabeçalho e rodapé ---------- */
.nav { background: rgba(5, 7, 11, 0.72); border-bottom: 1px solid var(--line); }
.nav .brand { font-family: var(--serif); font-weight: 600; font-size: 21px; letter-spacing: 0.18em; }
.nav-links a:not(.btn) { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }
.rodape-site { border-top: 1px solid var(--line); }

/* ---------- cartões: borda fina, cantos retos, fio de prata no topo ---------- */
.preco2, .prod-c, .sis, .caminho, .sis-duas > div, .np-grade, .np-faq details, .ini-mais, .ini-oferta, .orc, .conta-caixa, .ini-calc-card {
  border-radius: var(--r-lg);
  border-color: var(--line-2);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.028), rgba(255, 255, 255, 0.008));
}
.preco2, .prod-c, .sis, .caminho { position: relative; transition: transform .5s var(--ease), border-color .4s ease, box-shadow .5s ease; }
.preco2::after, .prod-c::after, .caminho::after { content: ""; position: absolute; left: 18px; right: 18px; top: -1px; height: 1px; background: linear-gradient(90deg, transparent, rgba(205, 214, 228, 0.7), transparent); opacity: .55; pointer-events: none; }
.preco2:hover, .prod-c:hover, .caminho:hover { transform: translateY(-6px); border-color: rgba(205, 214, 228, 0.32); box-shadow: 0 40px 80px -50px rgba(120, 160, 255, 0.55); }
.preco2.dest { border-color: rgba(157, 188, 255, 0.5); background: linear-gradient(180deg, rgba(58, 110, 240, 0.12), rgba(255, 255, 255, 0.01) 55%); }
.preco2-valor, .prod-preco b { font-family: var(--serif); font-weight: 600; letter-spacing: 0; }
.et, .preco2-tag, .prod-tag, .sis-tag { border-radius: 2px; letter-spacing: 0.14em; }

/* ---------- entradas mais marcantes ---------- */
.js .reveal { opacity: 0; transform: translateY(40px); filter: blur(8px); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease), filter 1.1s var(--ease); transition-delay: calc(var(--i, 0) * 110ms); }
.js .reveal.visto { opacity: 1; transform: none; filter: none; }
/* títulos que se montam palavra por palavra (js/luxo.js) */
.lx-p { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.lx-p > span { display: inline-block; transform: translateY(105%); transition: transform 1.1s cubic-bezier(.16, 1, .3, 1); transition-delay: calc(var(--w, 0) * 55ms + 80ms); }
.lx-on .lx-p > span { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { filter: none; }
  .lx-p > span { transform: none; transition: none; }
}
/* o degradê prateado do destaque continua quando o título é quebrado em palavras */
.serif .lx-p > span, h1 em .lx-p > span, h2 em .lx-p > span { background: linear-gradient(180deg, #ffffff 0%, #cdd8ea 45%, #8fa2c4 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* números alinhados (a Cormorant usa números antigos por padrão) */
h1, h2, h3, .sec-title, .preco2-valor, .prod-preco b, .lx-numeros b { font-variant-numeric: lining-nums; }
@media (max-width: 600px) { .eyebrow { letter-spacing: .18em; font-size: 10.5px; } .eyebrow::before { width: 22px; margin-right: 10px; } }

/* ---------- página "Como funciona por ramo" ---------- */
.cf-hero { padding: 110px 0 40px; }
.cf-hero h1 { font-size: clamp(48px, 6vw, 96px); max-width: 14ch; margin-top: 20px; }
.cf-hero .sub { margin-top: 26px; font-size: 19px; color: var(--ink-2); max-width: 52ch; line-height: 1.65; }
.cf-atalhos { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 36px; }
.cf-atalhos a { padding: 12px 20px; border: 1px solid var(--line-2); border-radius: 2px; color: var(--prata); text-decoration: none; font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; transition: border-color .3s, color .3s, background .3s; }
.cf-atalhos a:hover { border-color: var(--prata); color: #fff; background: rgba(205, 214, 228, .05); }
.cf-ramo { border-top: 1px solid var(--line); }
.cf-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 72px; align-items: center; }
.cf-ramo.inv .cf-tela { order: -1; }
.cf-dia { list-style: none; margin: 40px 0 0; padding: 0; position: relative; }
.cf-dia::before { content: ""; position: absolute; left: 62px; top: 8px; bottom: 8px; width: 1px; background: linear-gradient(180deg, transparent, var(--prata-2), transparent); }
.cf-dia li { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 28px; padding: 14px 0; position: relative; }
.cf-dia li::after { content: ""; position: absolute; left: 58px; top: 26px; width: 9px; height: 9px; border-radius: 50%; background: var(--bg); border: 1px solid var(--prata); box-shadow: 0 0 12px rgba(157, 188, 255, .5); }
.cf-dia b { font-family: var(--serif); font-weight: 500; font-size: 26px; color: var(--prata); line-height: 1.1; font-variant-numeric: lining-nums; }
.cf-dia strong { display: block; color: var(--ink); font-size: 17px; font-weight: 600; }
.cf-dia p { margin-top: 4px; color: var(--ink-2); font-size: 15.5px; line-height: 1.6; max-width: 46ch; }
.cf-ramo .ctas { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 12px; }
.cf-preco { margin-top: 16px; color: var(--ink-3); font-size: 14px; }
.cf-preco b { color: var(--ink); }
.cf-tela { margin: 0; border: 1px solid var(--line-2); border-radius: var(--r-lg); overflow: hidden; box-shadow: 0 60px 120px -50px rgba(0, 0, 0, .95), 0 0 120px -40px rgba(58, 110, 240, .45); transform: perspective(1600px) rotateY(-5deg); transition: transform .8s var(--ease); }
.cf-ramo.inv .cf-tela { transform: perspective(1600px) rotateY(5deg); }
.cf-tela:hover { transform: none; }
.cf-tela img { display: block; width: 100%; height: auto; }
.cf-outros { border-top: 1px solid var(--line); }
@media (max-width: 900px) {
  .cf-hero { padding: 56px 0 24px; }
  .cf-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .cf-ramo.inv .cf-tela { order: 0; }
  .cf-tela, .cf-ramo.inv .cf-tela { transform: none; }
  .cf-dia::before { left: 50px; }
  .cf-dia li { grid-template-columns: 50px minmax(0, 1fr); gap: 22px; }
  .cf-dia li::after { left: 46px; }
  .cf-dia b { font-size: 22px; }
}

/* ---------- arte enviada pelo dono: estampa de rosas ----------
   Todas as páginas: cada seção leva a estampa num lado só, intercalando direita e esquerda (o topo da inicial leva dos dois lados).
   A rosa sai até a borda da tela e ocupa só a margem livre ao lado do conteúdo; em tela estreita, some.
   Cantos de cima no início da página e cantos de baixo no rodapé, dos dois lados. Tudo parado, sem script. */
main > section { position: relative; isolation: isolate; }
main > section:not(.ini-hero)::after, main > section.ini-hero::before {
  content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; pointer-events: none;
  width: calc(50vw - 600px + 60px); left: calc(50% - 50vw);
  background: url("../img/estampa-esq.webp") left center / auto min(820px, 100%) no-repeat; }
main > section:nth-of-type(odd):not(.ini-hero)::after, main > section.ini-hero:nth-of-type(odd)::before {
  left: auto; right: calc(50% - 50vw); background-image: url("../img/estampa-dir.webp"); background-position: right center; }
main > section.lx-hero::after { left: calc(50% - 50vw); right: calc(50% - 50vw); width: auto;
  background: url("../img/estampa-esq.webp") left center / auto min(820px, 100%) no-repeat, url("../img/estampa-dir.webp") right center / auto min(820px, 100%) no-repeat; }
main { position: relative; }
main::before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: 0; height: 460px; pointer-events: none;
  background: url("../img/canto-se.webp") left top / 400px auto no-repeat, url("../img/canto-sd.webp") right top / 400px auto no-repeat; }
.rodape-site { position: relative; background: url("../img/canto-ie.webp") left bottom / 400px auto no-repeat, url("../img/canto-id.webp") right bottom / 400px auto no-repeat; }
@media (max-width: 1299px) {
  main > section:not(.ini-hero)::after, main > section.ini-hero::before { display: none; }
  main::before { height: 260px; background-size: 210px auto, 210px auto; opacity: .7; }
  .rodape-site { background-size: 210px auto, 210px auto; }
}

/* celular: o cartão do sistema não pode passar da largura da tela */
@media (max-width: 860px) {
  .sis { grid-template-columns: minmax(0, 1fr); }
  .sis-precos, .sis-botoes { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .sis-botoes .btn { white-space: normal; letter-spacing: .06em; padding-inline: 10px; text-align: center; }
}
/* inicial: sistema novo em destaque ocupa a linha inteira (foto ao lado do texto) */
.prod.so-destaque .prod-novo { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; }
.prod.so-destaque .prod-novo .prod-foto { height: 100%; }
.prod.so-destaque .prod-novo .prod-foto img { height: 100%; object-fit: cover; object-position: left top; }
@media (max-width: 760px) { .prod.so-destaque .prod-novo { grid-template-columns: minmax(0, 1fr); } }
/* Minha conta · suporte e feedback */
.conta-suporte { margin-top: 28px; margin-bottom: 40px; }
.sup p { color: var(--ink-2); }
.sup-form, .sup-fb-form form { display: grid; gap: 10px; margin: 14px 0 6px; }
.sup-form label, .sup-fb-form label { display: grid; gap: 5px; font-size: 13px; color: var(--ink-2); }
.sup-form input, .sup-form select, .sup-form textarea, .sup-fb-form select, .sup-fb-form textarea, .sup-resp textarea { width: 100%; padding: 9px 11px; border: 1px solid var(--line-2); border-radius: 8px; background: rgba(255,255,255,.03); color: var(--ink); font: inherit; }
.sup-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sup-form .btn, .sup-fb-form .btn { justify-self: start; }
.sup-erro { color: #f87171; font-size: 13px; min-height: 1em; margin: 0; }
.sup-h3 { font-size: 15px; margin: 22px 0 8px; }
.sup-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sup-item { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.sup-cab { all: unset; box-sizing: border-box; width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 14px; cursor: pointer; }
.sup-cab:hover, .sup-cab:focus-visible { background: rgba(255,255,255,.03); }
.sup-tit { flex: 1; min-width: 0; display: grid; }
.sup-tit b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sup-tit small, .sup-fb small { color: var(--ink-3); font-size: 12px; }
.sup-conversa { padding: 6px 14px 14px; display: grid; gap: 8px; border-top: 1px solid var(--line); }
.sup-msg { padding: 9px 12px; border-radius: 8px; background: rgba(255,255,255,.03); }
.sup-msg.suporte { border-left: 3px solid #4f8cff; }
.sup-msg small { color: var(--ink-3); font-size: 11.5px; }
.sup-msg p { margin: 4px 0 0; white-space: pre-wrap; color: var(--ink); }
.sup-resp { display: grid; gap: 8px; } .sup-botoes { display: flex; gap: 8px; flex-wrap: wrap; }
.sup-ctx pre { white-space: pre-wrap; font-size: 11.5px; color: var(--ink-3); max-height: 220px; overflow: auto; }
.sup-fb { display: grid; gap: 3px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; }
.sup-fb span { color: var(--ink-2); white-space: pre-wrap; }
.sup-fb-form { margin-top: 18px; } .sup-fb-form summary { cursor: pointer; color: var(--ink-2); }
.sup-vazio { color: var(--ink-3); }
@media (max-width: 600px) { .sup-campos { grid-template-columns: 1fr; } }
.sup h2 { font-size: clamp(24px, 3vw, 32px); margin: 0 0 6px; } .sup-h3 { font-size: 19px; }
/* Minha conta · procurar sistema */
.conta-busca { margin: 4px 0 18px; }
.conta-busca input { width: 100%; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: 10px; background: rgba(255,255,255,.03); color: var(--ink); font: inherit; }
.conta-busca-res { display: grid; gap: 8px; margin-top: 10px; }
.conta-busca-item { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; }
.conta-busca-item b { font-size: 15px; } .conta-busca-item span { color: var(--ink-3); font-size: 13px; flex: 1; min-width: 160px; }
.conta-busca-nada { color: var(--ink-3); margin: 0; }