/* ============================================================
   Página do programa SIA (loja/sia/index.php)
   Só ela carrega este arquivo. Tokens da loja (--ds-*), DM Sans.
   ============================================================ */

/* ---- hero ---- */
.sia-hero { display: grid; grid-template-columns: minmax(280px, 4fr) 8fr; gap: 32px; align-items: center; padding: 34px 0 10px; }
.sia-hero .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: .8rem; color: var(--ds-text-2); margin-bottom: 14px; }
.sia-hero .eyebrow img { width: 22px; height: 22px; border-radius: 50%; }
.sia-hero h1 { font-size: clamp(1.9rem, 3.4vw, 2.75rem); line-height: 1.08; letter-spacing: -.02em; margin: 0 0 16px; text-wrap: balance; }
.sia-hero h1 em { font-style: normal; color: inherit; }
.sia-hero .lead { color: var(--ds-text-2); font-size: 1.02rem; line-height: 1.55; max-width: 46ch; margin-bottom: 22px; }
.sia-hero .cta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.sia-hero .fine { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 14px; font-size: .8rem; color: var(--ds-muted); }
.sia-hero .fine span::before { content: none; }
.sia-hero .fine span:first-child::before { content: none; }
.sia-dl { display: inline-flex; align-items: center; gap: 12px; background: var(--ds-accent); color: #fff; border-radius: 12px; padding: 11px 18px 11px 14px; font-weight: 700; text-decoration: none; line-height: 1.15; transition: background .15s; }
.sia-dl:hover { background: var(--ds-accent-2); color: #fff; }
.sia-dl i { font-size: 1.35rem; }
.sia-dl small { display: block; font-weight: 500; font-size: .74rem; opacity: .85; margin-top: 2px; }
@media (max-width: 991px) { .sia-hero { grid-template-columns: 1fr; gap: 26px; padding-top: 18px; } }

/* ---- monitor 3D (só na página do programa) ---- */
.sia-stage { perspective: 1600px; perspective-origin: 50% 40%; padding: 10px 14px 6px 4px; overflow: hidden; }
.sia-monitor { position: relative; transform-style: preserve-3d; transform-origin: 50% 50%; width: 100%; transform: rotateY(-7deg) rotateX(2deg); transition: transform .35s ease-out; will-change: transform; }
.sia-monitor.no-tilt { transform: none !important; }
.sia-bezel { position: relative; background: #17131f; border: 1px solid #352d4e; border-radius: 16px; padding: 12px 12px 16px; box-shadow: 0 30px 70px -20px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.05) inset; }
.sia-bezel::before { content: ""; position: absolute; left: 50%; bottom: 3px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: #1d1a2c; }
.sia-screen-wrap { position: relative; border-radius: 8px; overflow: hidden; background: #0b0b12; }
.sia-screen-wrap::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,0) 28%, rgba(255,255,255,0) 70%, rgba(255,255,255,.025) 100%); }
.sia-neck { width: 90px; height: 42px; margin: 0 auto; background: linear-gradient(#1c1829, #120f1c); border-left: 1px solid #352d4e; border-right: 1px solid #352d4e; }
.sia-base { width: 260px; height: 12px; margin: 0 auto; border-radius: 0 0 14px 14px / 0 0 10px 10px; background: linear-gradient(#211c33, #100d19); border: 1px solid #352d4e; border-top: 0; box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 18px 30px -12px rgba(0,0,0,.9); }
.sia-stage-note { font-size: .78rem; color: var(--ds-muted); margin-top: 14px; text-align: center; }
.sia-stage-note b { color: var(--ds-text-2); font-weight: 600; }
.sia-screen { cursor: default; }
.sia-screen .sia-ui { pointer-events: auto; }
@media (max-width: 991px) { .sia-stage { perspective: none; padding: 0; } .sia-monitor { transform: none; } .sia-neck, .sia-base { display: none; } .sia-bezel { padding: 8px; border-radius: 12px; } }
@media (prefers-reduced-motion: reduce) { .sia-monitor { transition: none; transform: none; } }

/* ---- corpo: coluna de conteúdo + coluna fixa (como a página de produto) ---- */
.sia-body { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 40px; align-items: start; margin-top: 46px; }
.sia-aside { position: sticky; top: 130px; }
@media (max-width: 991px) { .sia-body { grid-template-columns: 1fr; gap: 26px; margin-top: 30px; } .sia-aside { position: static; order: -1; } }

/* seções: título pequeno alinhado à esquerda com régua — sem ícone, sem kicker */
.sia-sec { padding: 34px 0; border-top: 1px solid var(--ds-border); }
.sia-sec:first-child { border-top: 0; padding-top: 0; }
.sia-sec h2 { font-size: 1.35rem; letter-spacing: -.01em; margin: 0 0 6px; }
.sia-sec .sub { color: var(--ds-text-2); margin: 0 0 20px; max-width: 62ch; }
.sia-sec p { color: var(--ds-text-2); line-height: 1.6; }

/* onde entra: três cenários com a frase que o SIA fala */
.sia-cenarios { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.sia-cen h4 { font-size: .95rem; margin: 0 0 8px; }
.sia-cen q { display: block; quotes: "“" "”"; font-size: .95rem; line-height: 1.5; color: var(--ds-text); padding-left: 14px; border-left: 2px solid var(--ds-accent); margin: 0 0 8px; }
.sia-cen q::before, .sia-cen q::after { color: var(--ds-accent-2); }
.sia-cen small { color: var(--ds-muted); font-size: .8rem; }
@media (max-width: 767px) { .sia-cenarios { grid-template-columns: 1fr; gap: 18px; } }

/* como funciona: passos numerados em linha */
.sia-passos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; counter-reset: p; }
.sia-passo { position: relative; padding-top: 14px; border-top: 1px solid var(--ds-border); }
.sia-passo::before { counter-increment: p; content: "0" counter(p); position: absolute; top: -11px; left: 0; background: var(--ds-bg); padding-right: 10px; font-size: .78rem; font-weight: 700; color: var(--ds-accent-2); letter-spacing: .04em; }
.sia-passo > b { display: block; margin-bottom: 4px; }
.sia-passo span b { color: var(--ds-text); font-weight: 600; }
.sia-passo span { color: var(--ds-text-2); font-size: .9rem; line-height: 1.55; }
@media (max-width: 767px) { .sia-passos { grid-template-columns: 1fr; } }

/* telas: imagem grande + tira de miniaturas com legenda */
.sia-telas figure { margin: 0; }
.sia-telas .big { border-radius: 10px; overflow: hidden; border: 1px solid var(--ds-border); background: #0b0b12; }
.sia-telas .big img { display: block; width: 100%; height: auto; }
.sia-telas figcaption { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; padding: 10px 2px 0; font-size: .88rem; color: var(--ds-text-2); }
.sia-telas figcaption b { color: var(--ds-text); }
.sia-thumbs { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin-top: 12px; }
.sia-thumbs button { padding: 0; border: 1px solid var(--ds-border); border-radius: 8px; overflow: hidden; background: #0b0b12; cursor: pointer; text-align: left; transition: border-color .15s; }
.sia-thumbs button img { display: block; width: 100%; height: auto; opacity: .75; transition: opacity .15s; }
.sia-thumbs button span { display: block; font-size: .7rem; color: var(--ds-text-2); padding: 5px 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sia-thumbs button:hover img, .sia-thumbs button.on img { opacity: 1; }
.sia-thumbs button.on { border-color: var(--ds-accent); }
.sia-thumbs button.on span { color: #fff; }
@media (max-width: 767px) { .sia-thumbs { grid-template-columns: repeat(4, 1fr); } }

/* funções: lista de definição em duas colunas com fio */
.sia-func { display: grid; grid-template-columns: 1fr 1fr; gap: 0 36px; margin: 0; }
.sia-func div { display: grid; grid-template-columns: 150px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--ds-border); }
.sia-func dt { font-weight: 600; font-size: .9rem; margin: 0; }
.sia-func dd { margin: 0; color: var(--ds-text-2); font-size: .88rem; line-height: 1.5; }
@media (max-width: 767px) { .sia-func { grid-template-columns: 1fr; } .sia-func div { grid-template-columns: 1fr; gap: 3px; } }

/* benefícios: quatro afirmações curtas, sem cards */
.sia-vale { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 36px; }
.sia-vale b { display: block; margin-bottom: 3px; }
.sia-vale span { color: var(--ds-text-2); font-size: .9rem; line-height: 1.55; }
@media (max-width: 767px) { .sia-vale { grid-template-columns: 1fr; } }

/* ficha técnica: reaproveita .ds-specs da página de produto */
.sia-ficha .ds-specs th { width: 38%; }

/* faq curto */
.sia-faq details { border-top: 1px solid var(--ds-border); }
.sia-faq details:last-child { border-bottom: 1px solid var(--ds-border); }
.sia-faq summary { cursor: pointer; padding: 13px 0; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.sia-faq summary::-webkit-details-marker { display: none; }
.sia-faq summary::after { content: "+"; color: var(--ds-accent-2); font-weight: 400; }
.sia-faq details[open] summary::after { content: "–"; }
.sia-faq p { padding: 0 0 14px; margin: 0; }

/* coluna fixa: caixa como a de compra da loja */
.sia-box { background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: var(--ds-radius); padding: 20px; }
.sia-box .ver { display: flex; justify-content: space-between; align-items: baseline; font-size: .82rem; color: var(--ds-text-2); padding-bottom: 12px; border-bottom: 1px solid var(--ds-border); margin-bottom: 14px; }
.sia-box .ver b { color: var(--ds-text); font-size: .95rem; }
.sia-box .preco { font-size: 1.6rem; font-weight: 700; line-height: 1.1; }
.sia-box .preco small { display: block; font-size: .8rem; font-weight: 400; color: var(--ds-text-2); margin-top: 3px; }
.sia-box .gratis { margin: 12px 0 14px; padding: 10px 12px; border-radius: 10px; background: rgba(139,92,246,.10); border: 1px solid #3b2d63; font-size: .86rem; }
.sia-box .gratis b { color: var(--ds-accent-2); }
.sia-box .btns { display: grid; gap: 8px; }
.sia-box .btns a, .sia-box .btns button { display: block; width: 100%; text-align: center; }
.sia-box .planos { list-style: none; margin: 16px 0 0; padding: 0; font-size: .85rem; }
.sia-box .planos li { display: flex; justify-content: space-between; padding: 7px 0; border-top: 1px dashed var(--ds-border); color: var(--ds-text-2); }
.sia-box .planos li b { color: var(--ds-text); font-weight: 600; }
.sia-box .planos li a { color: var(--ds-text-2); }
.sia-box .conta { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--ds-border); font-size: .84rem; color: var(--ds-text-2); }
.sia-box .conta .st { font-weight: 700; }
.sia-box .conta .st.on { color: var(--ds-green); } .sia-box .conta .st.off { color: var(--ds-red); }
.sia-trust { list-style: none; padding: 0; margin: 14px 0 0; font-size: .8rem; color: var(--ds-text-2); }
.sia-trust li { display: flex; gap: 8px; align-items: flex-start; padding: 4px 0; }
.sia-trust i { color: var(--ds-accent-2); }
.sia-box .sia-comecar { margin: 14px 0 0; padding-left: 18px; font-size: .82rem; color: var(--ds-text-2); line-height: 1.5; }
.sia-box .sia-comecar li { padding: 2px 0; }
.sia-box .sia-comecar li::marker { color: var(--ds-accent-2); font-weight: 700; }