/* =====================================================================
   sistemas.css — a página /sistemas: apresentação dos seis sistemas.

   Usa as variáveis e os utilitários do style.css (container, row, col,
   section-pad, section-eyebrow, btn-*). Aqui ficam só as peças próprias:
   a matriz de escolha, o bloco de cada sistema, a fachada do vídeo e o
   comparativo.
   ===================================================================== */

/* ===== Hero ===== */
.sis-hero{
	background:linear-gradient(160deg,#0B1220 0%,#132339 55%,#1B3A22 100%);
	color:#fff;padding:clamp(3.5rem,9vw,6.5rem) 0 clamp(3rem,7vw,5rem);position:relative;overflow:hidden;
}
.sis-hero::after{ /* brilho discreto, para o fundo não ficar chapado */
	content:"";position:absolute;width:52rem;height:52rem;right:-16rem;top:-22rem;border-radius:50%;
	background:radial-gradient(circle,rgba(139,195,74,.20),transparent 62%);pointer-events:none;
}
.sis-hero h1{font-weight:800;line-height:1.08;letter-spacing:-.02em;margin:0 0 1rem;font-size:clamp(2rem,4.4vw,3.4rem)}
.sis-hero h1 span{color:var(--brand-light)}
.sis-hero .lead{color:#C7D3E4;max-width:42rem;font-size:clamp(1rem,1.6vw,1.18rem);line-height:1.6}
.sis-hero .numeros{display:flex;gap:2.4rem;flex-wrap:wrap;margin-top:2.2rem}
.sis-hero .numeros b{display:block;font-size:1.9rem;font-weight:800;color:#fff;line-height:1}
.sis-hero .numeros span{font-size:.92rem;color:#9DABBE}

/* ===== Matriz de escolha =====
   Duas perguntas resolvem a escolha do sistema: o que dispara a
   participação e como o prêmio é entregue. A matriz mostra isso de uma vez;
   as células vazias são conversa de projeto sob medida, não erro. */
.matriz{width:100%;border-collapse:separate;border-spacing:.5rem;margin-top:1.5rem}
.matriz th{font-size:.82rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
           color:var(--muted,#5A6577);padding:.4rem .6rem;vertical-align:bottom;text-align:center}
.matriz th.eixo{text-align:left;width:11rem;vertical-align:middle;text-transform:none;letter-spacing:0;
                font-size:.95rem;color:var(--ink);line-height:1.3}
.matriz td{padding:0;vertical-align:stretch}
.matriz a,.matriz .vazia{
	display:flex;flex-direction:column;justify-content:center;gap:.15rem;height:100%;min-height:5.2rem;
	padding:.9rem 1rem;border-radius:.8rem;text-decoration:none;text-align:center;
	border:1px solid var(--line,#E3E8DF);background:#fff;transition:transform .16s,box-shadow .16s,border-color .16s;
}
.matriz a{color:var(--ink);box-shadow:0 .3rem .9rem rgba(26,34,51,.05)}
.matriz a:hover{transform:translateY(-2px);border-color:var(--brand);box-shadow:0 .8rem 1.8rem rgba(76,140,33,.16)}
.matriz a b{font-weight:700;font-size:1rem;line-height:1.2}
.matriz a span{font-size:.8rem;color:var(--muted,#5A6577)}
.matriz .vazia{background:transparent;border-style:dashed;color:#9DABBE;font-size:.85rem;justify-content:center}

/* ===== Bloco de cada sistema ===== */
.sis-bloco{padding:clamp(2.6rem,6vw,4.4rem) 0;border-top:1px solid var(--line,#E3E8DF)}
.sis-bloco:nth-child(even){background:var(--surface,#F6F8F4)}
.sis-selo{display:inline-flex;align-items:center;gap:.5rem;font-size:.82rem;font-weight:700;
          letter-spacing:.04em;text-transform:uppercase;color:var(--brand-dark);
          background:rgba(76,140,33,.12);border-radius:999px;padding:.38rem .9rem;margin-bottom:.9rem}
.sis-bloco h2{font-weight:800;letter-spacing:-.02em;line-height:1.14;margin:0 0 .7rem;font-size:clamp(1.5rem,2.8vw,2.1rem)}
.sis-bloco .resumo{color:var(--muted,#5A6577);font-size:1.03rem;line-height:1.65;margin-bottom:1.3rem}
.sis-passos{list-style:none;padding:0;margin:0 0 1.6rem}
.sis-passos li{display:flex;gap:.7rem;align-items:flex-start;padding:.34rem 0;font-size:.97rem;line-height:1.45}
.sis-passos i{color:var(--brand);flex:none;margin-top:.15rem}
.sis-acoes{display:flex;gap:.7rem;flex-wrap:wrap;align-items:center}

/* ===== Fachada do vídeo =====
   O iframe só entra quando a pessoa clica: seis players carregando de uma
   vez seriam seis páginas com fonte, CSS e JS próprios. Até lá, o que se vê
   é HTML puro. */
.sis-video{position:relative;aspect-ratio:16/9;border-radius:1rem;overflow:hidden;
           box-shadow:0 1.6rem 3.4rem rgba(11,18,32,.24);background:#0B1220}
.sis-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.sis-capa{position:absolute;inset:0;width:100%;height:100%;border:0;cursor:pointer;color:#fff;
          display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.9rem;
          background:linear-gradient(150deg,#0B1220 0%,#16283F 58%,#24451F 100%);
          font-family:inherit;transition:filter .2s}
.sis-capa::before{ /* mesma vinheta dos vídeos, para a capa parecer um quadro deles */
	content:"";position:absolute;inset:0;
	background:radial-gradient(70% 60% at 50% 45%,rgba(139,195,74,.18),transparent 70%);
}
.sis-capa:hover{filter:brightness(1.12)}
.sis-capa .play{width:4.6rem;height:4.6rem;border-radius:50%;display:grid;place-items:center;
                background:rgba(255,255,255,.16);border:2px solid rgba(255,255,255,.82);
                box-shadow:0 0 0 .55rem rgba(139,195,74,.14),0 .6rem 1.6rem rgba(0,0,0,.35);
                backdrop-filter:blur(2px);font-size:1.6rem;position:relative;padding-left:.18rem;
                transition:transform .2s,box-shadow .2s,background .2s}
.sis-capa:hover .play{transform:scale(1.08);background:rgba(139,195,74,.9);
                      box-shadow:0 0 0 .7rem rgba(139,195,74,.2),0 .8rem 2rem rgba(0,0,0,.4)}
.sis-capa strong{position:relative;font-size:1.08rem;font-weight:700;letter-spacing:.01em}
.sis-capa span{position:relative;font-size:.86rem;color:#9DABBE}
.sis-extra{display:block;margin-top:.7rem;font-size:.88rem;color:var(--muted,#5A6577);text-align:center}

/* ===== Comparativo ===== */
.sis-tabela-rolo{overflow-x:auto;-webkit-overflow-scrolling:touch}
.sis-tabela{width:100%;min-width:46rem;border-collapse:collapse;background:#fff;
            border-radius:.9rem;overflow:hidden;box-shadow:0 .6rem 1.8rem rgba(26,34,51,.07)}
.sis-tabela th,.sis-tabela td{padding:.9rem 1rem;text-align:left;font-size:.93rem;
                              border-bottom:1px solid var(--line,#E3E8DF);vertical-align:top}
.sis-tabela thead th{background:var(--ink);color:#fff;font-size:.8rem;text-transform:uppercase;
                     letter-spacing:.05em;border-bottom:0}
.sis-tabela tbody tr:last-child th,.sis-tabela tbody tr:last-child td{border-bottom:0}
.sis-tabela tbody th{font-weight:700;color:var(--ink);white-space:nowrap}
.sis-tabela tbody tr:hover{background:rgba(76,140,33,.04)}
.sis-tabela a{color:var(--brand-dark);font-weight:600;text-decoration:none}
.sis-tabela a:hover{text-decoration:underline}

/* ===== Fecho ===== */
.sis-fecho{background:linear-gradient(160deg,#0B1220,#1B3A22);color:#fff;text-align:center;
           padding:clamp(3rem,7vw,5rem) 0}
.sis-fecho h2{font-weight:800;margin:0 0 .8rem;font-size:clamp(1.6rem,3.2vw,2.4rem)}
.sis-fecho p{color:#C7D3E4;max-width:38rem;margin:0 auto 1.8rem;line-height:1.6}

@media (max-width:991px){
	.matriz{border-spacing:.35rem}
	.matriz th.eixo{width:7.5rem;font-size:.85rem}
	.matriz a b{font-size:.92rem}
	.matriz a span{display:none}
}
@media (max-width:575px){
	.sis-hero .numeros{gap:1.4rem}
	.sis-capa .play{width:3.6rem;height:3.6rem;font-size:1.2rem}
}