:root {
  --vermelho-900: #770a0f;
  --vermelho-700: #a20d13;
  --vermelho-600: #b51016;
  --vermelho-500: #c9080e;
  --grafite-950: #18191b;
  --grafite-800: #303236;
  --grafite-650: #54575d;
  --cinza-200: #dedfe2;
  --cinza-100: #eff0f2;
  --cinza-50: #f7f7f8;
  --branco: #fff;
  --sombra: 0 24px 80px rgba(24, 25, 27, .12);
  --raio-pequeno: .7rem;
  --raio: 1.25rem;
  --largura: 1180px;
  --fonte: "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 6rem; }
body { margin: 0; color: var(--grafite-950); background: var(--branco); font-family: var(--fonte); font-size: 1rem; line-height: 1.65; }
body, button, input, select, textarea { font-family: var(--fonte); }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { color: inherit; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { line-height: 1.1; letter-spacing: -.035em; }
h1 { font-size: clamp(2.65rem, 9vw, 5.7rem); }
h2 { font-size: clamp(2rem, 6vw, 3.65rem); }
h3 { font-size: 1.35rem; }
p { color: var(--grafite-650); }
address { color: var(--grafite-650); font-style: normal; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.pular-conteudo { position: fixed; z-index: 1000; top: .5rem; left: .5rem; padding: .7rem 1rem; color: #fff; background: #000; transform: translateY(-150%); }
.pular-conteudo:focus { transform: translateY(0); }
.conteiner { width: min(calc(100% - 2.25rem), var(--largura)); margin-inline: auto; }

.cabecalho { position: sticky; z-index: 100; top: 0; background: rgba(255,255,255,.96); border-bottom: 1px solid rgba(48,50,54,.1); backdrop-filter: blur(18px); }
.cabecalho__conteudo { min-height: 4.85rem; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.marca { display: inline-flex; align-items: center; width: 7.3rem; }
.menu-botao { width: 2.8rem; height: 2.8rem; display: grid; place-items: center; background: var(--cinza-50); border: 1px solid var(--cinza-200); border-radius: 50%; cursor: pointer; }
.menu-botao__linhas, .menu-botao__linhas::before, .menu-botao__linhas::after { width: 1.15rem; height: 2px; display: block; background: var(--grafite-950); transition: transform .2s ease; }
.menu-botao__linhas { position: relative; }
.menu-botao__linhas::before, .menu-botao__linhas::after { position: absolute; content: ""; left: 0; }
.menu-botao__linhas::before { top: -.38rem; }
.menu-botao__linhas::after { top: .38rem; }
.menu-botao[aria-expanded="true"] .menu-botao__linhas { background: transparent; }
.menu-botao[aria-expanded="true"] .menu-botao__linhas::before { transform: translateY(.38rem) rotate(45deg); }
.menu-botao[aria-expanded="true"] .menu-botao__linhas::after { transform: translateY(-.38rem) rotate(-45deg); }
.menu { position: fixed; inset: 4.85rem 0 auto; display: none; padding: 1.1rem 1.25rem 1.4rem; background: #fff; border-bottom: 1px solid var(--cinza-200); box-shadow: var(--sombra); }
.menu--aberto { display: grid; }
.menu > a, .menu summary { padding: .8rem .35rem; font-weight: 650; text-decoration: none; cursor: pointer; }
.menu > a[aria-current="page"] { color: var(--vermelho-600); }
.menu__solucoes summary { list-style: none; }
.menu__solucoes summary::-webkit-details-marker { display: none; }
.submenu { display: grid; gap: .15rem; padding: .35rem 0 .8rem .8rem; }
.submenu a { padding: .5rem; color: var(--grafite-650); text-decoration: none; }

.botao { min-height: 3.15rem; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .78rem 1.3rem; color: #fff; background: var(--vermelho-600); border: 1px solid var(--vermelho-600); border-radius: .45rem; font-weight: 700; text-align: center; text-decoration: none; transition: background .2s ease, border-color .2s ease, transform .2s ease; }
.botao:hover { background: var(--vermelho-700); border-color: var(--vermelho-700); transform: translateY(-1px); }
.botao:focus-visible, a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid #ffb4b7; outline-offset: 3px; }
.botao--compacto { min-height: 2.65rem; padding: .55rem 1rem !important; color: #fff !important; }
.botao--fantasma { color: #fff; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.5); }
.botao--fantasma:hover { background: rgba(255,255,255,.16); border-color: #fff; }
.botao--claro { color: var(--vermelho-700); background: #fff; border-color: #fff; }
.botao--claro:hover { color: var(--vermelho-900); background: var(--cinza-50); border-color: var(--cinza-50); }

.hero { min-height: min(47rem, calc(100svh - 4.85rem)); position: relative; display: grid; align-items: end; isolation: isolate; overflow: hidden; background: var(--grafite-950); }
.hero__imagem, .hero__sobreposicao { position: absolute; z-index: -2; inset: 0; }
.hero__imagem { overflow: hidden; transform: scale(1.01); }
.hero__imagem img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero__sobreposicao { z-index: -1; background: linear-gradient(180deg, rgba(10,11,12,.2), rgba(10,11,12,.88)), linear-gradient(90deg, rgba(10,11,12,.7), transparent 75%); }
.hero__conteudo { padding-block: 5.8rem 3.6rem; }
.hero h1 { max-width: 12ch; margin-bottom: 1.25rem; color: #fff; }
.hero p { max-width: 42rem; margin-bottom: 1.8rem; color: rgba(255,255,255,.82); font-size: clamp(1.05rem, 2vw, 1.25rem); }
.hero__acoes { display: grid; gap: .75rem; }
.etiqueta { display: inline-block; margin-bottom: 1.05rem; color: var(--vermelho-600); font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.etiqueta--clara { color: #ffb4b7; }

.secao { padding-block: 5rem; }
.secao--solucoes { background: var(--cinza-50); }
.titulo-secao { margin-bottom: 2.4rem; }
.titulo-secao h2 { max-width: 16ch; margin-bottom: 1rem; }
.titulo-secao > p { max-width: 38rem; }
.grade-solucoes { display: grid; gap: .9rem; }
.cartao-solucao { min-height: 19rem; display: flex; flex-direction: column; justify-content: space-between; padding: 1.45rem; background: #fff; border: 1px solid var(--cinza-200); border-radius: var(--raio-pequeno); transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease; }
.cartao-solucao:hover { border-color: rgba(181,16,22,.4); box-shadow: 0 18px 55px rgba(24,25,27,.09); transform: translateY(-3px); }
.cartao-solucao__siglas { display: block; margin-bottom: .65rem; color: var(--vermelho-600); font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.cartao-solucao h3 { margin-bottom: .75rem; }
.cartao-solucao p { font-size: .95rem; }
.cartao-solucao > a { color: var(--vermelho-600); font-weight: 750; text-decoration: none; }

.secao--empresa { overflow: hidden; }
.empresa { display: grid; gap: 2.7rem; }
.empresa__imagem { position: relative; }
.empresa__imagem::before { position: absolute; z-index: -1; inset: -1rem 2rem 2rem -1rem; content: ""; background: var(--vermelho-600); border-radius: var(--raio); }
.empresa__imagem img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--raio); box-shadow: var(--sombra); }
.empresa__conteudo h2 { max-width: 14ch; }
.numeros { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin: 2rem 0 0; }
.numeros div { display: flex; flex-direction: column-reverse; padding-top: 1.15rem; border-top: 2px solid var(--vermelho-600); }
.numeros dt { color: var(--grafite-650); font-size: .85rem; }
.numeros dd { margin: 0 0 .2rem; color: var(--grafite-950); font-size: clamp(2rem, 8vw, 3.3rem); font-weight: 800; line-height: 1; }

.secao--contato { color: #fff; background: var(--vermelho-700); }
.contato { display: grid; gap: 2.5rem; }
.contato__introducao h2 { max-width: 15ch; }
.contato__introducao > p { max-width: 42rem; color: rgba(255,255,255,.76); }
.contato__dados { display: grid; gap: .8rem; padding: 0; margin: 2rem 0 0; list-style: none; }
.contato__dados li { display: grid; }
.contato__dados strong { color: rgba(255,255,255,.62); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; }
.contato__dados a { font-size: 1.1rem; font-weight: 700; text-underline-offset: .2rem; }

.formulario { display: grid; gap: 1rem; }
.formulario label { display: grid; gap: .38rem; font-size: .88rem; font-weight: 750; }
.formulario label > span[aria-hidden="true"], .formulario legend > span { color: var(--vermelho-500); }
.formulario small { color: var(--grafite-650); font-weight: 500; }
.formulario input, .formulario select, .formulario textarea { width: 100%; min-height: 3.15rem; padding: .75rem .85rem; color: var(--grafite-950); background: #fff; border: 1px solid #c9cbd0; border-radius: .4rem; font-size: 1rem; transition: border-color .2s ease, box-shadow .2s ease; }
.formulario textarea { min-height: 8rem; resize: vertical; }
.formulario input:focus, .formulario select:focus, .formulario textarea:focus { border-color: var(--vermelho-600); outline: 0; box-shadow: 0 0 0 3px rgba(181,16,22,.14); }
.formulario fieldset { padding: 0; margin: .25rem 0; border: 0; }
.formulario legend { margin-bottom: .55rem; font-size: .88rem; font-weight: 750; }
.formulario__grupo { display: grid; gap: 1rem; }
.formulario--claro { padding: 1.3rem; color: var(--grafite-950); background: #fff; border-radius: var(--raio); box-shadow: 0 20px 65px rgba(70,0,4,.25); }
.formulario--claro .botao { width: 100%; }
.botao--escuro { background: var(--grafite-950); border-color: var(--grafite-950); }
.botao--escuro:hover { background: #000; border-color: #000; }
.formulario__status { min-height: 1.5rem; margin: 0; color: inherit; font-size: .9rem; font-weight: 700; }
.formulario__status--sucesso { color: #0b6b3a; }
.formulario__status--erro { color: #a20d13; }
.formulario--claro .formulario__status--sucesso { color: #0b6b3a; }
.campo-armadilha { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.opcoes-area { display: flex; flex-wrap: wrap; gap: .55rem; }
.opcoes-area label { position: relative; display: inline-flex; cursor: pointer; }
.opcoes-area input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opcoes-area span { padding: .5rem .7rem; color: var(--grafite-650); background: var(--cinza-50); border: 1px solid var(--cinza-200); border-radius: 2rem; font-size: .78rem; font-weight: 700; }
.opcoes-area input:checked + span { color: #fff; background: var(--vermelho-600); border-color: var(--vermelho-600); }
.opcoes-area input:focus-visible + span { outline: 3px solid #ffb4b7; outline-offset: 2px; }

.hero-solucao { min-height: 38rem; position: relative; display: grid; align-items: end; isolation: isolate; overflow: hidden; background: var(--grafite-950); }
.hero-solucao__imagem { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-solucao__sobreposicao { position: absolute; z-index: -1; inset: 0; background: linear-gradient(180deg, rgba(10,11,12,.28), rgba(10,11,12,.92)), linear-gradient(90deg, rgba(10,11,12,.76), transparent); }
.hero-solucao__conteudo { padding-block: 6rem 3.6rem; }
.hero-solucao h1 { max-width: 13ch; margin-bottom: 1.2rem; color: #fff; font-size: clamp(2.8rem, 8vw, 5.2rem); }
.hero-solucao p { max-width: 43rem; margin-bottom: 1.6rem; color: rgba(255,255,255,.8); font-size: 1.1rem; }
.atalhos-sistemas { background: #fff; border-bottom: 1px solid var(--cinza-200); }
.atalhos-sistemas .conteiner { display: flex; gap: 1rem; overflow-x: auto; padding-block: 1rem; }
.atalhos-sistemas a { min-width: 13rem; display: grid; padding: .65rem .8rem; background: var(--cinza-50); border-radius: .4rem; text-decoration: none; }
.atalhos-sistemas strong { color: var(--vermelho-600); font-size: .82rem; }
.atalhos-sistemas span { color: var(--grafite-650); font-size: .8rem; }
.sistema:nth-of-type(even) { background: var(--cinza-50); }
.sistema__cabecalho { display: grid; gap: 2.2rem; align-items: center; margin-bottom: 3rem; }
.sistema__cabecalho h2 { max-width: 14ch; }
.sistema__imagem img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border: 1px solid var(--cinza-200); border-radius: var(--raio); box-shadow: var(--sombra); }
.grade-recursos { display: grid; gap: .8rem; }
.recurso { padding: 1.3rem; background: #fff; border: 1px solid var(--cinza-200); border-radius: var(--raio-pequeno); }
.recurso h3 { margin: 0 0 .65rem; font-size: 1.15rem; }
.recurso p { margin-bottom: 0; font-size: .92rem; }
.galeria-sistema { display: grid; gap: 1rem; margin-top: 2.5rem; }
.galeria-sistema img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border: 1px solid var(--cinza-200); border-radius: var(--raio-pequeno); }
.chamada-final { color: #fff; background: var(--vermelho-700); }
.chamada-final__conteudo { display: grid; gap: 1.5rem; align-items: center; }
.chamada-final h2 { max-width: 16ch; margin-bottom: 0; }

.pagina-login { background: var(--cinza-50); }
.login { min-height: 100svh; display: grid; place-items: center; padding: 1.25rem; background: linear-gradient(145deg, var(--cinza-50), #fff 60%); }
.login__cartao { width: min(100%, 28rem); padding: 1.6rem; background: #fff; border: 1px solid var(--cinza-200); border-radius: var(--raio); box-shadow: var(--sombra); }
.login__marca { width: 8rem; margin-bottom: 2.5rem; }
.login h1 { margin-bottom: .8rem; font-size: 2.25rem; }
.login__voltar { display: inline-block; margin-top: 1.5rem; color: var(--grafite-650); font-size: .85rem; }
.alerta { padding: .8rem 1rem; margin-bottom: 1rem; border-radius: .4rem; font-size: .9rem; font-weight: 700; }
.alerta--erro { color: var(--vermelho-900); background: #fff0f0; border: 1px solid #ffc8ca; }

.pagina-admin { background: var(--cinza-50); }
.admin-cabecalho { position: sticky; z-index: 50; top: 0; min-height: 4.5rem; display: flex; align-items: center; justify-content: space-between; padding: .7rem 1.2rem; background: #fff; border-bottom: 1px solid var(--cinza-200); }
.admin-cabecalho > div { display: flex; align-items: center; gap: .8rem; color: var(--grafite-650); font-size: .85rem; }
.admin-cabecalho form { display: inline; }
.admin-cabecalho button { padding: .45rem .7rem; background: var(--cinza-50); border: 1px solid var(--cinza-200); border-radius: .3rem; cursor: pointer; }
.admin { display: grid; }
.admin-menu { display: flex; gap: .5rem; overflow-x: auto; padding: .8rem 1rem; background: var(--grafite-950); }
.admin-menu a { display: flex; gap: .5rem; align-items: center; padding: .65rem .8rem; color: rgba(255,255,255,.75); border-radius: .35rem; font-size: .85rem; font-weight: 700; text-decoration: none; white-space: nowrap; }
.admin-menu a:hover { color: #fff; background: rgba(255,255,255,.08); }
.admin-menu span { min-width: 1.3rem; height: 1.3rem; display: grid; place-items: center; padding: 0 .3rem; background: var(--vermelho-600); border-radius: 2rem; color: #fff; font-size: .7rem; }
.admin-conteudo { min-width: 0; padding: 1.2rem; }
.admin-titulo { display: grid; gap: .5rem; margin-bottom: 2rem; }
.admin-titulo h1 { margin-bottom: 0; font-size: clamp(2rem, 6vw, 3.3rem); }
.admin-secao { scroll-margin-top: 5.5rem; padding: 1.1rem; margin-bottom: 1rem; background: #fff; border: 1px solid var(--cinza-200); border-radius: var(--raio-pequeno); }
.admin-secao__titulo { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem; margin-bottom: 1rem; }
.admin-secao__titulo h2 { margin: 0; font-size: 1.45rem; }
.admin-secao__titulo p { margin: 0; font-size: .85rem; }
.metricas-grade { display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem; }
.metricas-grade article { display: grid; gap: .35rem; padding: 1rem; background: var(--cinza-50); border-radius: .5rem; }
.metricas-grade span { color: var(--grafite-650); font-size: .75rem; font-weight: 700; text-transform: uppercase; }
.metricas-grade strong { font-size: 1.9rem; line-height: 1; }
.metricas-grade small { color: var(--grafite-650); }
.metrica-desempenho { grid-column: span 2; }
.tabela-responsiva { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .82rem; }
th, td { padding: .85rem .7rem; border-bottom: 1px solid var(--cinza-200); text-align: left; vertical-align: top; }
th { color: var(--grafite-650); background: var(--cinza-50); font-size: .7rem; letter-spacing: .05em; text-transform: uppercase; }
td strong, td small { display: block; }
td small { margin-top: .25rem; color: var(--grafite-650); }
td a { color: var(--vermelho-700); }
.status { display: inline-flex; padding: .25rem .5rem; background: var(--cinza-100); border-radius: 2rem; font-size: .66rem; font-weight: 800; letter-spacing: .03em; }
.status--enviado { color: #075b32; background: #def6e9; }
.status--falha { color: #851219; background: #ffe4e5; }
.status--pendente, .status--nao_configurado { color: #7b4b00; background: #fff0cc; }
.estado-vazio { padding: 2rem; color: var(--grafite-650); background: var(--cinza-50); border: 1px dashed var(--cinza-200); border-radius: .5rem; text-align: center; }

.rodape { padding-top: 4rem; background: var(--grafite-950); color: #fff; }
.rodape p, .rodape address { color: rgba(255,255,255,.62); }
.rodape a { text-decoration-color: rgba(255,255,255,.35); text-underline-offset: .2rem; }
.rodape__grade { display: grid; gap: 2.4rem; padding-bottom: 3.25rem; }
.rodape__grade h2 { margin-bottom: .85rem; font-size: .9rem; letter-spacing: .09em; text-transform: uppercase; }
.marca--rodape { width: 8.5rem; padding: .35rem; margin-bottom: 1rem; background: #fff; border-radius: .35rem; }
.rodape__links { display: grid; gap: .5rem; }
.rodape__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding-block: 1.25rem; border-top: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.55); }
.rodape__base a { font-size: .82rem; }

.pagina-estado { min-height: 62vh; display: grid; place-items: center; padding-block: 5rem; text-align: center; }
.pagina-estado__conteudo { max-width: 46rem; }
.pagina-estado h1 { margin-bottom: 1rem; }
.pagina-estado p { margin-bottom: 1.6rem; }

@media (min-width: 660px) {
  .hero__acoes { display: flex; flex-wrap: wrap; }
  .grade-solucoes { grid-template-columns: repeat(2, 1fr); }
  .rodape__grade { grid-template-columns: repeat(2, 1fr); }
  .formulario__grupo--duplo { grid-template-columns: repeat(2, 1fr); }
  .grade-recursos { grid-template-columns: repeat(2, 1fr); }
  .galeria-sistema { grid-template-columns: repeat(2, 1fr); }
  .metricas-grade { grid-template-columns: repeat(3, 1fr); }
  .metrica-desempenho { grid-column: span 1; }
}

@media (min-width: 980px) {
  .conteiner { width: min(calc(100% - 4rem), var(--largura)); }
  .cabecalho__conteudo { min-height: 5.7rem; }
  .marca { width: 8.8rem; }
  .menu-botao { display: none; }
  .menu { position: static; display: flex; align-items: center; gap: 1.25rem; padding: 0; background: transparent; border: 0; box-shadow: none; }
  .menu > a, .menu summary { padding: .65rem .15rem; font-size: .94rem; }
  .menu__solucoes { position: relative; }
  .submenu { position: absolute; top: calc(100% + .7rem); left: 50%; width: 18rem; padding: .65rem; background: #fff; border: 1px solid var(--cinza-200); border-radius: var(--raio-pequeno); box-shadow: var(--sombra); transform: translateX(-50%); }
  .submenu a { border-radius: .35rem; }
  .submenu a:hover { color: var(--vermelho-600); background: var(--cinza-50); }
  .hero { min-height: min(49rem, calc(100svh - 5.7rem)); }
  .hero__conteudo { padding-block: 8rem 5.4rem; }
  .secao { padding-block: 7.5rem; }
  .titulo-secao--dividido { display: grid; grid-template-columns: 1.15fr .85fr; gap: 5rem; align-items: end; }
  .grade-solucoes { grid-template-columns: repeat(3, 1fr); }
  .cartao-solucao:first-child { grid-column: span 2; }
  .cartao-solucao { min-height: 21rem; padding: 1.8rem; }
  .empresa { grid-template-columns: .9fr 1.1fr; gap: 7rem; align-items: center; }
  .contato { grid-template-columns: .82fr 1.18fr; gap: 5rem; align-items: start; }
  .sistema__cabecalho { grid-template-columns: 1.1fr .9fr; gap: 5rem; }
  .sistema__cabecalho--invertido .sistema__imagem { order: 2; }
  .grade-recursos { grid-template-columns: repeat(3, 1fr); }
  .chamada-final__conteudo { grid-template-columns: 1fr auto; }
  .rodape__grade { grid-template-columns: 1.35fr repeat(3, 1fr); }
  .login__cartao { padding: 2.3rem; }
  .admin { grid-template-columns: 15rem minmax(0, 1fr); }
  .admin-menu { position: sticky; top: 4.5rem; height: calc(100svh - 4.5rem); display: flex; flex-direction: column; padding: 1.2rem .8rem; }
  .admin-conteudo { padding: 2.2rem; }
  .admin-titulo { grid-template-columns: 1fr auto; align-items: end; }
  .admin-secao { padding: 1.5rem; margin-bottom: 1.5rem; }
  .metricas-grade { grid-template-columns: repeat(6, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}
