/* Página de apresentação do SFCard Terminal Consulta. Tokens próprios, claro/escuro. */
:root {
  --c-fundo: #f4f6fa;
  --c-superficie: #ffffff;
  --c-texto: #14202f;
  --c-suave: #566478;
  --c-borda: #d8dfe9;
  --c-azul: #0b5fd6;
  --c-azul-esc: #0847a3;
  --c-marinho: #0d2748;
  --c-ambar: #f5a623;
  --c-verde: #1f8a4c;
  --c-verde-fundo: #e3f4ea;
  --c-aviso-fundo: #fff3d6;
  --c-aviso: #7a4e00;
  --raio: 14px;
  --sombra: 0 10px 30px rgba(13, 39, 72, .14);
  --fonte: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --c-fundo: #0c1320;
    --c-superficie: #151f31;
    --c-texto: #e8edf5;
    --c-suave: #a6b2c5;
    --c-borda: #2a3850;
    --c-azul: #5b9bff;
    --c-azul-esc: #8ab8ff;
    --c-marinho: #071327;
    --c-verde: #5fd39b;
    --c-verde-fundo: #12342a;
    --c-aviso-fundo: #3a2d10;
    --c-aviso: #ffcf6b;
    --sombra: 0 10px 30px rgba(0, 0, 0, .5);
  }
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--fonte); background: var(--c-fundo); color: var(--c-texto); line-height: 1.6; }
a { color: var(--c-azul); }
:focus-visible { outline: 3px solid var(--c-azul); outline-offset: 3px; border-radius: 4px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pula { position: absolute; left: 1rem; top: -4rem; background: var(--c-superficie); padding: .5rem 1rem; border-radius: 8px; z-index: 10; }
.pula:focus { top: 1rem; }

.miolo { width: min(100% - 2rem, 72rem); margin-inline: auto; }

/* topo */
.topo { background: var(--c-marinho); color: #fff; }
.topo .miolo { display: flex; align-items: center; gap: .6rem 1rem; padding-block: .9rem; flex-wrap: wrap; }
.topo .marca { order: 1; }
.marca { display: inline-flex; align-items: center; font-size: 1.2rem; letter-spacing: .02em; color: #fff; text-decoration: none; }
.marca .logo { width: 2rem; height: auto; flex: none; margin-right: .55rem; }
.marca b { color: #7db2ff; }
.topo nav { order: 3; flex-basis: 100%; display: flex; gap: .4rem 1.25rem; align-items: center; flex-wrap: wrap; }
.topo nav a { padding-block: .35rem; }
.topo nav a { color: #d6e2f5; text-decoration: none; font-weight: 500; }
.topo nav a:hover { color: #fff; text-decoration: underline; }

/* botões */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 2.9rem; padding: .6rem 1.4rem; border-radius: 10px; font-weight: 700; text-decoration: none; border: 2px solid transparent; }
.btn.prim { background: var(--c-ambar); color: #1a1200; }
.btn.prim:hover { background: #ffb940; }
.btn.sec { border-color: #9fbbe6; color: #fff; }
.btn.sec:hover { background: rgba(255, 255, 255, .12); }
.btn.azul { background: var(--c-azul); color: #fff; }
.btn.azul:hover { background: var(--c-azul-esc); }
.btn.peq { min-height: 2.4rem; padding: .35rem 1rem; }

/* herói */
.heroi { background: linear-gradient(160deg, var(--c-marinho) 0%, #0b4a96 100%); color: #fff; padding-block: 2.5rem 2.75rem; overflow: hidden; }
.heroi .miolo { display: grid; gap: 2.5rem; grid-template-columns: minmax(0, 1fr); }
.heroi .sobre { font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; color: #9fc4ff; margin: 0 0 .75rem; font-weight: 700; }
.heroi h1, .heroi .titulo-hero { font-size: clamp(2rem, 4.5vw, 3.1rem); line-height: 1.12; margin: 0 0 1rem; }
.heroi p.lead { font-size: 1.15rem; color: #d3e2f8; max-width: 38rem; margin: 0 0 1.75rem; }
.heroi .acoes { display: flex; gap: .85rem; flex-wrap: wrap; margin-bottom: 2rem; }
.selos { display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: 0 0 2rem; list-style: none; }
.selos li { background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .25); padding: .25rem .8rem; border-radius: 999px; font-size: .9rem; }
.moldura { margin: 0; }
.moldura img { display: block; width: 100%; height: auto; border-radius: var(--raio) var(--raio) 0 0; box-shadow: var(--sombra); border: 1px solid rgba(255, 255, 255, .25); border-bottom: 0; }
.heroi .moldura { align-self: end; }
.heroi figcaption { font-size: .85rem; color: #b9d0f1; padding: .5rem 0 .75rem; }

/* seções */
section { padding-block: 3.5rem; }
section h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin: 0 0 .5rem; line-height: 1.2; }
section .intro { color: var(--c-suave); max-width: 42rem; margin: 0 0 2rem; }
.alt { background: var(--c-superficie); border-block: 1px solid var(--c-borda); }

.grade3 { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.item { background: var(--c-superficie); border: 1px solid var(--c-borda); border-radius: var(--raio); padding: 1.25rem; }
.alt .item { background: var(--c-fundo); }
.item h3 { margin: 0 0 .4rem; font-size: 1.05rem; }
.item p { margin: 0; color: var(--c-suave); font-size: .96rem; }
.item .ico { width: 2.4rem; height: 2.4rem; border-radius: 10px; background: var(--c-azul); color: #fff; display: grid; place-items: center; font-weight: 800; flex: none; }
.item-topo { display: flex; align-items: center; gap: .65rem; margin-bottom: .75rem; }
.item .produto { font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: .2rem .6rem; border-radius: 999px; background: #e3eefc; color: #0847a3; }
.item .produto.caixa { background: var(--c-verde-fundo); color: var(--c-verde); }
@media (prefers-color-scheme: dark) { .item .produto { background: rgba(91, 155, 255, .16); color: var(--c-azul-esc); } .item .produto.caixa { background: rgba(95, 211, 155, .16); color: var(--c-verde); } }

/* telas */
.tela { display: grid; gap: 2rem; align-items: center; grid-template-columns: minmax(0, 1fr); margin-bottom: 3rem; }
.tela:last-child { margin-bottom: 0; }
.tela img { display: block; width: 100%; height: auto; border-radius: var(--raio); border: 1px solid var(--c-borda); box-shadow: var(--sombra); }
.tela h3 { font-size: 1.3rem; margin: 0 0 .5rem; }
.tela p { color: var(--c-suave); margin: 0 0 .75rem; }
.tela ul { margin: 0; padding-left: 1.2rem; color: var(--c-suave); }
.tela .peq-img { max-width: 34rem; margin-inline: auto; }
.tela figcaption { font-size: .85rem; color: var(--c-suave); margin-top: .5rem; }

.aviso-demo { background: var(--c-aviso-fundo); color: var(--c-aviso); border-radius: 10px; padding: .75rem 1rem; font-size: .92rem; margin-top: 1rem; }

/* Engecard */
.duas { display: grid; gap: 2rem; grid-template-columns: minmax(0, 1fr); }
.checks { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; }
.checks li { position: relative; padding-left: 2rem; }
.checks li::before { content: "✓"; position: absolute; left: 0; top: .1rem; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--c-verde-fundo); color: var(--c-verde); display: grid; place-items: center; font-weight: 800; font-size: .85rem; }

/* preço */
.preco { background: var(--c-marinho); color: #fff; border-radius: var(--raio); padding: 2rem; display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); }
.preco .valor { font-size: 2.6rem; font-weight: 800; line-height: 1; }
.preco .valor small { display: block; margin-top: .35rem; font-size: 1rem; font-weight: 500; color: #b9d0f1; }
.preco ul { margin: 0; padding-left: 1.2rem; color: #d3e2f8; }
.preco li { margin-bottom: .4rem; }

/* passos */
.passos { counter-reset: p; list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); }
.passos li { counter-increment: p; background: var(--c-fundo); border: 1px solid var(--c-borda); border-radius: var(--raio); padding: 1.25rem; }
.passos li::before { content: counter(p); display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--c-azul); color: #fff; font-weight: 800; margin-bottom: .6rem; }
.passos b { display: block; margin-bottom: .2rem; }
.passos span { color: var(--c-suave); font-size: .95rem; }

footer { background: var(--c-marinho); color: #b9d0f1; padding-block: 2rem; font-size: .9rem; }
footer .miolo { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
footer a { color: #d6e2f5; }

@media (min-width: 56rem) {
  .tela { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .tela.inv { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .tela.inv > .texto { order: 2; }
  .duas { grid-template-columns: 1fr 1fr; align-items: start; }
  .preco { grid-template-columns: auto 1fr auto; align-items: center; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; animation: none !important; } }
.topo-gap { margin-top: 1.5rem; }

/* vídeo de apresentação */
.video-moldura { position: relative; margin: 0 auto; max-width: 62rem; border-radius: var(--raio); overflow: hidden; box-shadow: var(--sombra); border: 1px solid var(--c-borda); background: #0d2748; }
.video-moldura video { display: block; width: 100%; height: auto; aspect-ratio: 1280 / 854; }
.btn-som { position: absolute; right: .9rem; bottom: .9rem; display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; padding: .45rem 1rem; border: 2px solid rgba(255, 255, 255, .85); border-radius: 999px; background: rgba(13, 39, 72, .88); color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.btn-som:hover { background: rgba(11, 95, 214, .95); }
.btn-som svg { width: 1.3rem; height: 1.3rem; flex: none; }
.btn-som .on { display: none; }
.btn-som:not(.mudo) .off { display: none; }
.btn-som:not(.mudo) .on { display: block; }

/* botões de acesso: Área do cliente e Área de parceiros (topo à direita e rodapé; visíveis em celular e tablet) */
.acessos { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.topo .acessos { order: 2; margin-left: auto; justify-content: flex-end; }
.btn.acesso { min-height: 2.75rem; padding: .45rem 1rem; font-size: .95rem; white-space: nowrap; }
.acessos-rodape { justify-content: flex-start; }
footer .btn.prim { color: #1a1200; }
footer .btn.sec { color: #fff; }
.aviso-marcas { flex-basis: 100%; }
@media (min-width: 56rem) {
  .topo nav { order: 2; flex-basis: auto; margin-left: 1.5rem; }
  .topo .acessos { order: 3; }
  .aviso-marcas { flex-basis: auto; }
}
@media (max-width: 26rem) {
  .btn.acesso { padding-inline: .75rem; font-size: .9rem; }
  .topo .acessos { margin-left: 0; width: 100%; }
  .topo .acessos .btn { flex: 1 1 0; }
  .acessos-rodape .btn { flex: 1 1 0; }
  .acessos-rodape { width: 100%; }
}

/* marca da parceira (quem entrou por um link de parceiro): ao lado da marca SFCard, num selo claro que funciona com qualquer logo */
.topo .parceria { order: 1; display: inline-flex; align-items: center; gap: .65rem; padding-left: 1rem; margin-left: .15rem; border-left: 1px solid rgb(255 255 255 / .28); min-width: 0; }
.parceria-txt { color: #b9c9e4; font-size: .8rem; letter-spacing: .02em; white-space: nowrap; }
.parceria-logo { display: block; height: 2.25rem; width: auto; max-width: min(9.5rem, 38vw); object-fit: contain; background: #fff; border-radius: .5rem; padding: .2rem .6rem; }
.parceria-nome { color: #fff; font-size: 1rem; }
@media (max-width: 26rem) { .parceria-txt { display: none; } .topo .parceria { padding-left: .75rem; } .parceria-logo { height: 2rem; } }

#caixa .grade3 { margin-top: 2rem; }


/* Topo: texto à esquerda; abas e vídeo à direita. Consulta e Caixa tem o mesmo tipo de letra e o mesmo tamanho. */
.heroi h1, .heroi .titulo-hero { font-size: clamp(2rem, 4.5vw, 3.1rem); line-height: 1.12; font-weight: 600; letter-spacing: 0; margin: 0 0 1rem; font-family: inherit; }
.heroi .miolo { display: grid; gap: 1.5rem 2.5rem; grid-template-columns: minmax(0, 1fr); grid-template-areas: "abas" "textos" "midia"; align-items: start; }
@media (min-width: 56rem) {
  .heroi .miolo { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-areas: "textos abas" "textos midia"; align-items: center; }
}
.hero-abas { grid-area: abas; display: inline-flex; gap: .35rem; padding: .3rem; border-radius: 999px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .22); justify-self: start; }
.hero-aba { min-height: 2.5rem; padding: .35rem 1.1rem; border: 0; border-radius: 999px; background: transparent; color: #d3e2f8; font: inherit; font-weight: 700; cursor: pointer; }
.hero-aba:hover { color: #fff; background: rgba(255, 255, 255, .12); }
.hero-aba[aria-selected="true"] { background: var(--c-ambar); color: #1b1300; }
.hero-aba:focus-visible, .heroi .btn-som:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.hero-textos { grid-area: textos; display: grid; }
.hero-texto { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .45s ease, visibility 0s linear .45s; }
.hero-texto.ativo { opacity: 1; visibility: visible; transition: opacity .45s ease, visibility 0s; }
.hero-texto .selos { margin-bottom: 0; }
.hero-texto .acoes { margin-bottom: 1.5rem; }
.hero-midia { grid-area: midia; min-width: 0; }
.hero-quadro { position: relative; display: grid; border-radius: var(--raio); overflow: hidden; box-shadow: var(--sombra); border: 1px solid rgba(255, 255, 255, .25); background: #0d2748; }
.hero-video { grid-area: 1 / 1; display: block; width: 100%; height: auto; aspect-ratio: 1280 / 854; opacity: 0; visibility: hidden; transition: opacity .45s ease, visibility 0s linear .45s; }
.hero-video.ativo { opacity: 1; visibility: visible; transition: opacity .45s ease, visibility 0s; }
.hero-legenda { font-size: .85rem; color: #b9d0f1; margin: .6rem 0 0; }
.heroi .btn-som { right: .75rem; bottom: .75rem; }
@media (prefers-reduced-motion: reduce) { .hero-texto, .hero-texto.ativo, .hero-video, .hero-video.ativo { transition: none; } }
@media (max-width: 40rem) { .hero-aba { padding-inline: .8rem; font-size: .92rem; } }

/* carrossel de valores: um slide por terminal, troca sozinho; pausa com o mouse, o foco ou o botão */
.carrossel { background: var(--c-marinho); color: #fff; border-radius: var(--raio); overflow: hidden; box-shadow: var(--sombra); }
.car-slides { display: grid; }
.car-slide { grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; align-items: center; padding: 1.25rem; opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility 0s linear .35s; }
.car-slide.ativo { opacity: 1; visibility: visible; transition: opacity .35s ease, visibility 0s; }
.car-foto { margin: 0; border-radius: .75rem; overflow: hidden; border: 1px solid rgb(255 255 255 / .25); background: #fff; box-shadow: 0 8px 24px rgb(0 0 0 / .3); }
.car-foto img { display: block; width: 100%; height: auto; aspect-ratio: 1366 / 768; }
.car-produto { display: inline-block; font-size: .85rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: .3rem .85rem; border-radius: 999px; background: var(--c-ambar); color: #1b1300; }
.car-produto.caixa { background: #8fe0b0; color: #07331a; }
.car-ref { margin: .85rem 0 .35rem; color: #c3d6f3; font-size: 1.05rem; }
.car-ref b { color: #fff; }
.car-info .valor { font-size: 2.6rem; font-weight: 800; line-height: 1; }
.car-info .valor small { display: block; margin-top: .35rem; font-size: 1rem; font-weight: 500; color: #b9d0f1; }
.car-info ul { margin: 1rem 0 0; padding-left: 1.2rem; color: #d3e2f8; }
.car-info li { margin-bottom: .4rem; }
.car-info .btn { margin-top: .75rem; }
.car-controles { display: flex; align-items: center; justify-content: center; gap: .35rem; padding: .1rem 1rem 1rem; flex-wrap: wrap; }
.car-pontos { display: flex; }
.car-ponto, .car-seta, .car-pausa { font: inherit; color: #fff; cursor: pointer; }
.car-ponto { min-width: 2.75rem; min-height: 2.75rem; display: grid; place-items: center; background: none; border: 0; padding: 0; }
.car-ponto::before { content: ""; width: .8rem; height: .8rem; border-radius: 50%; border: 2px solid #fff; transition: background .2s, border-color .2s, transform .2s; }
.car-ponto[aria-current="true"]::before { background: var(--c-ambar); border-color: var(--c-ambar); transform: scale(1.15); }
.car-seta { min-width: 2.75rem; min-height: 2.75rem; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgb(255 255 255 / .35); background: rgb(255 255 255 / .08); }
.car-seta svg { width: 1.25rem; height: 1.25rem; }
.car-pausa { min-height: 2.75rem; display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .95rem; margin-left: .6rem; border-radius: 999px; border: 1px solid rgb(255 255 255 / .35); background: rgb(255 255 255 / .08); font-size: .9rem; font-weight: 600; }
.car-pausa svg { width: 1rem; height: 1rem; }
.car-pausa .i-toca { display: none; }
.car-pausa[aria-pressed="true"] .i-pausa { display: none; }
.car-pausa[aria-pressed="true"] .i-toca { display: block; }
.car-seta:hover, .car-pausa:hover { background: rgb(255 255 255 / .2); }
.car-ponto:focus-visible, .car-seta:focus-visible, .car-pausa:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
@media (min-width: 56rem) {
  .car-slide { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 2.25rem; padding: 1.75rem 2rem 1rem; }
}
@media (max-width: 26rem) { .car-info .valor { font-size: 2.2rem; } .car-pausa { margin-left: 0; } }
@media (prefers-reduced-motion: reduce) { .car-slide, .car-slide.ativo, .car-ponto::before { transition: none; } }