/* Boas-vindas SAFETY — tela padrão de todos os sistemas (ver boas-vindas.js).
   Brandbook SAFETY 2022: vermelho #C3161C, cinza #383838, Oswald + Montserrat,
   paleta secundária nos valores. Cabe numa tela de computador sem rolagem. */
html.sbv-aberto, html.sbv-aberto body { overflow: hidden; }
.sbv {
  position: fixed; inset: 0; z-index: 2147483000;
  display: grid; grid-template-rows: auto 1fr auto;
  height: 100vh; height: 100dvh;
  background: #f5f6f8; color: #383838;
  font: 400 15px/1.45 Montserrat, ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.sbv *, .sbv *::before, .sbv *::after { box-sizing: border-box; }
.sbv h1, .sbv h2 { font-family: Oswald, Montserrat, sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; margin: 0; }
.sbv-rot { display: block; font: 700 11px/1.2 Montserrat, sans-serif; letter-spacing: .14em; text-transform: uppercase; }

/* faixa vermelha com fotos esmaecidas */
.sbv-topo { position: relative; overflow: hidden; color: #fff; background: #C3161C; }
.sbv-fotos, .sbv-foto, .sbv-veu { position: absolute; inset: 0; }
.sbv-foto { background-size: cover; background-position: right center; opacity: 0; transition: opacity 1.6s ease; transform: scale(1.04); }
.sbv-foto.ativa { opacity: 1; animation: sbv-zoom 7s ease-out both; }
@keyframes sbv-zoom { from { transform: scale(1.08); } to { transform: scale(1.02); } }
/* degradê: vermelho firme à esquerda, mais transparente à direita, onde a foto aparece */
.sbv-veu { background: linear-gradient(90deg, rgba(195,22,28,1) 0%, rgba(195,22,28,.96) 30%, rgba(195,22,28,.70) 55%, rgba(195,22,28,.28) 80%, rgba(195,22,28,.08) 100%); }
.sbv-topo-in { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: clamp(18px, 3vw, 48px); align-items: center; padding: clamp(14px, 2.4vh, 26px) clamp(16px, 3vw, 44px); }
.sbv-marca { display: inline-flex; align-items: center; gap: 8px; margin-bottom: clamp(6px, 1.2vh, 12px); }
.sbv-marca .sbv-sim { height: 28px; width: auto; filter: brightness(0) invert(1); }
.sbv-marca .sbv-pal { height: 17px; width: auto; filter: brightness(0) invert(1); }
.sbv-sistema { margin-left: 6px; padding-left: 10px; border-left: 1px solid rgba(255,255,255,.5); font: 600 14px Oswald, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.sbv-data { display: block; font: 600 12px Montserrat, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.85); }
.sbv-ola h1 { font-size: clamp(28px, 4.2vh, 44px); line-height: 1.05; margin-top: 4px; }
.sbv-frase { margin: 6px 0 0; max-width: 34rem; font-size: clamp(12px, 1.6vh, 13.5px); line-height: 1.45; color: rgba(255,255,255,.9); }
.sbv-versiculo { margin: 0; padding: clamp(12px, 2vh, 20px) clamp(16px, 2vw, 26px); background: rgba(120,10,14,.62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); text-shadow: 0 1px 2px rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.32); border-left: 5px solid #fff; border-radius: 4px 16px 16px 4px; box-shadow: 0 18px 40px -24px rgba(0,0,0,.6); }
.sbv-versiculo .sbv-rot { color: rgba(255,255,255,.88); }
.sbv-versiculo blockquote { margin: 8px 0 8px; font: 600 italic clamp(17px, 2.7vh, 25px)/1.42 Montserrat, sans-serif; }
.sbv-versiculo figcaption { font: 700 14px Montserrat, sans-serif; letter-spacing: .03em; }

/* corpo: visão + missão, valores, botão */
.sbv-corpo { min-height: 0; display: grid; grid-template-rows: auto auto 1fr auto; gap: clamp(8px, 1.6vh, 16px); padding: clamp(12px, 2vh, 22px) clamp(16px, 3vw, 44px) clamp(10px, 1.6vh, 16px); }
.sbv-pilares { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(10px, 1.4vw, 18px); }
.sbv-pilar { display: flex; gap: 14px; align-items: center; background: #fff; border-radius: 14px; padding: clamp(10px, 1.8vh, 18px) 20px; border-left: 5px solid #C3161C; box-shadow: 0 10px 26px -20px rgba(0,0,0,.45); }
.sbv-ico { width: 44px; height: 44px; border-radius: 12px; background: #fdecec; color: #C3161C; display: grid; place-items: center; flex-shrink: 0; }
.sbv-ico svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sbv-pilar .sbv-rot { color: #C3161C; }
.sbv-pilar p { margin: 3px 0 0; font: 600 clamp(14px, 2vh, 18px)/1.35 Montserrat, sans-serif; color: #383838; }
.sbv-tit { font-size: clamp(18px, 2.6vh, 24px); color: #383838; }
.sbv-valores { list-style: none; margin: 0; padding: 0; min-height: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: clamp(8px, 1.2vh, 12px); }
.sbv-valor {
  position: relative; display: flex; align-items: center; gap: 14px; min-height: 0;
  background: #fff; border-radius: 12px; padding: 8px 16px 8px 14px;
  border-top: 4px solid var(--c); border-right: 4px solid var(--c);
  box-shadow: 0 8px 20px -18px rgba(0,0,0,.45);
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.sbv-valor:hover { background: color-mix(in srgb, var(--c) 16%, #fff); transform: translateY(-2px); box-shadow: 0 14px 26px -18px rgba(0,0,0,.5); }
.sbv-num { font: 600 clamp(22px, 3.2vh, 30px)/1 Oswald, sans-serif; color: var(--c); flex-shrink: 0; min-width: 34px; }
.sbv-txt { display: flex; flex-direction: column; min-width: 0; }
.sbv-txt b { font-size: clamp(13.5px, 1.9vh, 15.5px); color: #383838; }
.sbv-txt span { font-size: clamp(12px, 1.65vh, 13.5px); color: #5f6670; line-height: 1.35; }
.sbv-valor.do-dia { background: var(--c); box-shadow: 0 16px 30px -16px color-mix(in srgb, var(--c) 80%, #000); }
.sbv-valor.do-dia:hover { background: color-mix(in srgb, var(--c) 88%, #000); }
.sbv-valor.do-dia .sbv-num, .sbv-valor.do-dia .sbv-txt b, .sbv-valor.do-dia .sbv-txt span { color: #fff; }
/* cores claras da paleta (amarelo, azul-acinzentado): no destaque ganham um tom mais escuro e intenso */
.sbv-valor.do-dia.claro { background: color-mix(in srgb, var(--c) 62%, #1f2a44); border-color: color-mix(in srgb, var(--c) 62%, #1f2a44); }
.sbv-valor.do-dia.claro:hover { background: color-mix(in srgb, var(--c) 52%, #1f2a44); }
.sbv-selo { position: absolute; top: -11px; right: 12px; font: 700 10.5px Montserrat, sans-serif; font-style: normal; letter-spacing: .08em; text-transform: uppercase; background: #fff; color: var(--c); border: 1.5px solid var(--c); border-radius: 999px; padding: 2px 9px; }
.sbv-valor.do-dia.claro .sbv-selo { color: color-mix(in srgb, var(--c) 62%, #1f2a44); border-color: color-mix(in srgb, var(--c) 62%, #1f2a44); }
.sbv-acoes { display: flex; justify-content: center; }
.sbv-btn { font: 700 15px Montserrat, sans-serif; color: #fff; background: #C3161C; border: 0; border-radius: 10px; padding: 12px 30px; cursor: pointer; transition: background .15s ease; }
.sbv-btn:hover { background: #9E0F16; }
.sbv-btn:focus-visible { outline: 3px solid color-mix(in srgb, #C3161C 40%, transparent); outline-offset: 2px; }

/* rodapé padrão dos sistemas SAFETY */
.sbv-rodape, .sbv .sbv-rodape { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 18px; padding: 10px clamp(16px, 3vw, 44px); background: #fff; border-top: 1px solid #e3e7eb; font: 400 12px Montserrat, sans-serif; color: #5f6670; }
.sbv-rodape-marca { display: inline-flex; align-items: center; gap: 8px; }
.sbv-rodape-marca .sbv-sim { height: 20px; width: auto; }
.sbv-rodape-marca .sbv-pal { height: 13px; width: auto; }
.sbv-rodape-sep { color: #c9ced4; }
.sbv-rodape-tag { font: 600 14px Oswald, sans-serif; color: #C3161C; text-transform: uppercase; letter-spacing: .04em; }
.sbv-rodape-dir { margin: 0; }
.sbv-rodape-dir b { color: #383838; }

@media (max-width: 900px) {
  .sbv { overflow-y: auto; grid-template-rows: auto auto auto; }
  .sbv-topo-in, .sbv-pilares { grid-template-columns: 1fr; }
  .sbv-valores { grid-template-columns: 1fr 1fr; grid-auto-rows: auto; }
  .sbv-valor { padding: 12px 14px; }
}
@media (max-width: 560px) { .sbv-valores { grid-template-columns: 1fr; } }
@media (max-height: 640px) and (min-width: 901px) { .sbv { overflow-y: auto; grid-template-rows: auto auto auto; } .sbv-valores { grid-auto-rows: auto; } }
@media (prefers-reduced-motion: reduce) { .sbv-foto.ativa { animation: none; } .sbv-valor { transition: none; } }