/* ============================================================
   sennze.com.br/assets/site.css
   Site institucional SENNZE

   MOVEL PRIMEIRO. O estilo base e o do celular; os pontos de
   quebra apenas acrescentam colunas para telas maiores.

   Pontos de quebra:  768px (tablete)  ·  1024px (desktop)

   Cores conforme o manual da marca. Tons intermediarios vem de
   transparencia sobre a cor de marca, nao de hexadecimal novo.
   ============================================================ */

/* ---------- 1. FONTE ---------- */
@font-face {
  font-family: 'Montserrat';
  src: url('/assets/fontes/montserrat-latin-light.woff2') format('woff2');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('/assets/fontes/montserrat-latin-regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('/assets/fontes/montserrat-latin-bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('/assets/fontes/montserrat-latin-extrabold.woff2') format('woff2');
  font-weight: 800; font-style: normal; font-display: swap;
}

/* ---------- 2. VARIAVEIS DE COR ---------- */
:root {
  --azul:        #173761;   /* azul institucional  — Pantone 534 C */
  --vermelho:    #E41E2F;   /* vermelho chama      — Pantone 1788 C */
  --azul-chama:  #2675A5;   /* azul chama          — Pantone 647 C */
  --grafite:     #333333;   /* Pantone 447 C */
  --cinza:       #B2B2B2;   /* Pantone 421 C */
  --branco:      #FFFFFF;

  /* --- SUPERFICIE ESCURA ----------------------------------------
     Degrade VERTICAL, do topo para a base.                        */
  --nav-bg-topo:      #1E3145;
  --nav-bg-base:      #273F58;
  --nav-item-hover:   #2F4C6A;
  --nav-item-ativo:   #37597E;
  --nav-divisoria:    #416A95;
  --nav-texto:        #FFFFFF;
  --nav-texto-fraco:  #A9BDD4;
  --nav-barra-ativa:  #6BA9DC;

  /* --- SUPERFICIE CLARA ----------------------------------------- */
  --bg-base:          #F4F5F7;
  --bg-surface:       #FFFFFF;
  --bg-surface-alt:   #FAFBFC;
  --text-primary:     #333333;
  --text-secondary:   #5B6270;
  --text-muted:       #767D8A;
  --border:           #D9DBE0;
  --border-strong:    #8A929E;
  --link:             #1F5F8B;
  --focus-ring:       #1F5F8B;

  /* --- AZUL INSTITUCIONAL: SO ACENTO, dose curta -----------------
     Mesmo valor de --azul. Nome separado para deixar o USO
     explicito: numero de KPI, destaque, sublinhado. Nunca fundo
     de bloco inteiro.                                              */
  --accent:           #173761;

  /* Derivados por transparencia — nao sao cores novas */
  --azul-veu:    rgba(23, 55, 97, .05);
  --azul-linha:  rgba(23, 55, 97, .14);
  --claro-veu:   rgba(255, 255, 255, .10);
  --claro-linha: rgba(255, 255, 255, .22);
  --claro-texto: rgba(255, 255, 255, .88);

  --raio:    6px;
  --sombra:  0 2px 10px rgba(23, 55, 97, .10);
  --coluna:  1200px;
  --suave:   .2s ease;
}

/* ---------- 3. BASE ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 76px; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.65;
  color: var(--grafite);
  background: var(--branco);
  overflow-x: hidden;
}

img, picture, svg { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.22; font-weight: 700; }
p  { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding: 0; }

a { color: var(--azul-chama); text-decoration: none; transition: color var(--suave); }
a:hover { color: var(--vermelho); }

:focus-visible { outline: 3px solid var(--vermelho); outline-offset: 2px; }

.oculto {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.pular {
  position: absolute; left: -9999px; top: 0; z-index: 2000;
  background: var(--vermelho); color: var(--branco);
  padding: 10px 18px; border-radius: 0 0 var(--raio) 0;
}
.pular:focus { left: 0; color: var(--branco); }

.faixa { width: 100%; max-width: var(--coluna); margin: 0 auto; padding: 0 20px; }
.faixa--estreita { max-width: 820px; }

/* ---------- 4. BOTOES ---------- */
.botao {
  display: inline-block;
  padding: 13px 26px;
  border: 2px solid transparent;
  border-radius: var(--raio);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: background var(--suave), color var(--suave), border-color var(--suave);
}
.botao--principal { background: var(--vermelho); color: var(--branco); border-color: var(--vermelho); }
.botao--principal:hover { background: var(--azul); border-color: var(--azul); color: var(--branco); }

.botao--vazado { background: transparent; color: var(--azul); border-color: var(--azul); }
.botao--vazado:hover { background: var(--azul); color: var(--branco); }

.secao--azul .botao--vazado { color: var(--branco); border-color: var(--claro-linha); }
.secao--azul .botao--vazado:hover { background: var(--branco); color: var(--azul); border-color: var(--branco); }

.botao--portal { background: var(--azul); color: var(--branco); border-color: var(--azul); font-size: 13px; letter-spacing: .04em; }
.botao--portal:hover { background: var(--azul-chama); border-color: var(--azul-chama); color: var(--branco); }

.botao--envio { background: var(--vermelho); color: var(--branco); border-color: var(--vermelho); width: 100%; font-size: 16px; padding: 15px 26px; }
.botao--envio:hover { background: var(--branco); color: var(--azul); border-color: var(--branco); }
.botao--envio[disabled] { opacity: .6; cursor: progress; }

.elo { font-weight: 700; border-bottom: 2px solid currentColor; }

/* ---------- 5. CABECALHO ---------- */
.cabecalho {
  position: sticky; top: 0; z-index: 900;
  background: var(--branco);
  box-shadow: var(--sombra);
}
.cabecalho__interno { display: flex; align-items: center; gap: 16px; min-height: 64px; }
.cabecalho__marca { flex: 0 0 auto; line-height: 0; }
.cabecalho__marca img { height: 38px; width: auto; }

.cabecalho__botao {
  margin-left: auto;
  display: flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; padding: 10px;
  background: none; border: 0; cursor: pointer;
}
.cabecalho__barra { display: block; height: 2px; background: var(--azul); transition: transform var(--suave), opacity var(--suave); }
.cabecalho__botao[aria-expanded="true"] .cabecalho__barra:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.cabecalho__botao[aria-expanded="true"] .cabecalho__barra:nth-child(2) { opacity: 0; }
.cabecalho__botao[aria-expanded="true"] .cabecalho__barra:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Menu — no celular abre abaixo do cabecalho */
.menu {
  display: none;
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--branco);
  box-shadow: var(--sombra);
  padding: 8px 20px 20px;
}
.menu.esta-aberto { display: block; }

.menu__lista { list-style: none; }
.menu__item { border-bottom: 1px solid var(--azul-linha); }
.menu__link { display: block; padding: 14px 2px; color: var(--grafite); font-weight: 500; }
.menu__link:hover, .menu__link--atual { color: var(--vermelho); }

/* --- SUBMENU DE DOIS NIVEIS --- */
.menu__link--grupo {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
  padding: 14px 2px;
  background: none; border: 0;
  font-family: inherit; font-size: inherit; font-weight: 500;
  line-height: inherit;
  color: var(--grafite); text-align: left; cursor: pointer;
}
.menu__link--grupo:hover, .menu__link--grupo.menu__link--atual { color: var(--vermelho); }

.menu__seta {
  width: 8px; height: 8px; margin-left: 10px; flex: 0 0 auto;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--suave);
}
.menu__link--grupo[aria-expanded="true"] .menu__seta {
  transform: rotate(-135deg) translate(-2px, -2px);
}

.submenu {
  display: none;
  list-style: none;
  margin: 0 0 10px;
  padding: 0 0 0 14px;
  border-left: 2px solid var(--azul-linha);
}
.menu__link--grupo[aria-expanded="true"] + .submenu { display: block; }
.submenu__link { display: block; padding: 11px 2px; font-size: 15px; color: var(--grafite); }
.submenu__link:hover, .submenu__link--atual { color: var(--vermelho); }

.menu__extra { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding-top: 16px; }
.menu__extra .botao--portal { flex: 1 1 auto; }

.idiomas { display: flex; gap: 4px; list-style: none; }
.idiomas__link {
  display: block; padding: 7px 11px;
  border: 2px solid var(--azul-linha); border-radius: var(--raio);
  font-size: 13px; font-weight: 700; color: var(--grafite);
}
.idiomas__link:hover { border-color: var(--vermelho); color: var(--vermelho); }
.idiomas__link--atual { background: var(--azul); border-color: var(--azul); color: var(--branco); }
.idiomas__link--atual:hover { color: var(--branco); }

/* ---------- 6. SECOES ---------- */
.secao { padding: 60px 0; }
.secao--clara { background: var(--branco); }

/* Superficie escura: degrade vertical. */
.secao--azul {
  background: linear-gradient(180deg, var(--nav-bg-topo) 0%, var(--nav-bg-base) 100%);
  color: var(--claro-texto);
}
.secao--azul h2, .secao--azul h3, .secao--azul h4, .secao--azul strong { color: var(--branco); }

.secao__titulo {
  font-size: clamp(28px, 5vw, 40px);
  font-weight: 800;
  text-align: center;
  color: var(--azul);
}
.secao--azul .secao__titulo { color: var(--branco); }

.secao__titulo::after {
  content: ''; display: block;
  width: 62px; height: 4px; margin: 16px auto 0;
  background: var(--vermelho); border-radius: 2px;
}
.secao__linha { text-align: center; font-size: 16px; margin: 0 auto 40px; max-width: 720px; }
.secao__acao  { text-align: center; margin-top: 28px; }

/* ---------- 7. HERO ---------- */
.hero { background: var(--azul-veu); padding: 40px 0 0; }
.hero__interno { display: grid; gap: 28px; }
.hero__titulo { font-size: clamp(28px, 6vw, 44px); font-weight: 800; color: var(--azul); }
.hero__linha  { font-size: 17px; margin-bottom: 26px; }
.hero__acoes  { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__figura img { width: 100%; border-radius: var(--raio) var(--raio) 0 0; object-fit: cover; }

/* ---------- 8. NUMEROS ---------- */
/* Clara de proposito: separa o hero do bloco escuro seguinte. */
.numeros {
  background: var(--bg-surface);
  color: var(--text-secondary);
  padding: 34px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.numeros__lista { list-style: none; display: grid; gap: 20px; text-align: center; }
.numeros__valor { display: block; font-size: 36px; font-weight: 800; color: var(--accent); line-height: 1.1; }
.numeros__texto { display: block; font-size: 14px; color: var(--text-secondary); }
.numeros__setores {
  margin: 22px 0 0; padding-top: 18px;
  border-top: 1px solid var(--border);
  text-align: center; font-size: 14px;
}
.numeros__setores span { color: var(--accent); font-weight: 700; }

/* ---------- 9. GRADES E CARTOES ---------- */
.grade { display: grid; gap: 24px; }
.dupla { display: grid; gap: 24px; }

.painel { background: var(--branco); color: var(--grafite); border-radius: var(--raio); padding: 32px; }
.painel__titulo { font-size: 21px; color: var(--azul); }
.painel--problema { border-top: 5px solid var(--vermelho); }
.painel--solucao  { border-top: 5px solid var(--azul-chama); }
.painel__nota { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--azul-linha); font-size: 15px; }
.secao--azul .painel h3, .secao--azul .painel strong { color: var(--azul); }

.lista { list-style: none; }
.lista li { position: relative; padding-left: 26px; margin-bottom: 9px; }
.lista li::before { position: absolute; left: 0; top: 0; font-weight: 700; }
.lista--problema li::before { content: '\2715'; color: var(--vermelho); }
.lista--solucao  li::before { content: '\2713'; color: var(--azul-chama); }
.lista--marca    li::before { content: '\25B8'; color: var(--vermelho); }

.cartao {
  background: var(--branco);
  border: 1px solid var(--azul-linha);
  border-radius: var(--raio);
  padding: 28px;
  transition: transform var(--suave), box-shadow var(--suave);
}
.cartao:hover { transform: translateY(-3px); box-shadow: var(--sombra); }
.cartao__titulo { font-size: 18px; color: var(--azul); }
.cartao p:last-child, .cartao ul:last-child { margin-bottom: 0; }

/* ---------- 10. PASSOS ---------- */
.passos { list-style: none; counter-reset: passo; display: grid; gap: 20px; }
.passos__item {
  display: flex; gap: 18px; align-items: flex-start;
  background: var(--claro-veu);
  border-left: 4px solid var(--vermelho);
  border-radius: var(--raio);
  padding: 22px;
}
.passos__numero {
  flex: 0 0 auto;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--vermelho); color: var(--branco);
  display: grid; place-items: center;
  font-size: 19px; font-weight: 800;
}
.passos__titulo { font-size: 18px; }
.passos__item p:last-child { margin-bottom: 0; }

/* ---------- 11. SETORES ---------- */
.setor {
  background: var(--branco);
  border: 1px solid var(--azul-linha);
  border-radius: var(--raio);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.setor__figura { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.setor__corpo { padding: 22px; }
.setor__titulo { font-size: 20px; color: var(--azul); margin-bottom: 2px; }
.setor__linha { color: var(--vermelho); font-weight: 700; font-size: 14px; margin-bottom: 12px; }

/* ---------- 12. CASOS ---------- */
.caso {
  background: var(--branco); color: var(--grafite);
  border-radius: var(--raio); padding: 24px;
  border-top: 5px solid var(--vermelho);
}
.caso__titulo { font-size: 19px; color: var(--azul); }
.caso__rotulo {
  font-size: 12px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--azul-chama); margin: 16px 0 5px;
}
.caso p { font-size: 15px; }
.caso ul:last-child { margin-bottom: 0; }
.secao--azul .caso h3, .secao--azul .caso h4 { color: inherit; }
.secao--azul .caso__titulo { color: var(--azul); }
.secao--azul .caso__rotulo { color: var(--azul-chama); }

/* ---------- 13. TABELA COMPARATIVA ---------- */
.tabela__area { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabela {
  width: 100%; min-width: 560px;
  border-collapse: collapse;
  background: var(--branco); color: var(--grafite);
  border-radius: var(--raio); overflow: hidden;
}
.tabela th, .tabela td { padding: 13px 14px; text-align: center; border-bottom: 1px solid var(--azul-linha); font-size: 15px; }
.tabela thead th { background: var(--azul); color: var(--branco); font-size: 14px; }

/* --- TEXTO CORRIDO --- */
.texto-longo { max-width: 68ch; margin: 0 auto; text-align: left; }
.texto-longo h2 { font-size: 21px; color: var(--azul); margin: 34px 0 10px; }
.texto-longo h2:first-child { margin-top: 0; }
.texto-longo p  { margin: 0 0 14px; }
.texto-longo ul { margin: 0 0 14px; padding-left: 22px; }
.texto-longo li { margin-bottom: 7px; }
.texto-longo__nota {
  margin-top: 30px; padding: 14px 16px;
  background: var(--bg-surface-alt);
  border-left: 3px solid var(--vermelho);
  border-radius: 0 var(--raio) var(--raio) 0;
  font-size: 14px; color: var(--text-secondary);
}
.tabela tbody th { text-align: left; font-weight: 500; }
.tabela__destaque { background: var(--azul-veu); font-weight: 700; }
.tabela thead .tabela__destaque { background: var(--vermelho); }

/* Estado NUNCA so por cor: simbolo mais rotulo, para leitor de tela. */
.marca { font-size: 15px; line-height: 1; }
.marca--sim { color: var(--azul-chama); }
.marca--nao { color: var(--vermelho); }
.marca--na  { color: var(--cinza); font-size: 13px; }

/* ---------- 14. FAQ ---------- */
.faq { display: grid; gap: 12px; }
.faq__item { border: 1px solid var(--azul-linha); border-radius: var(--raio); background: var(--branco); }
.faq__pergunta {
  cursor: pointer; list-style: none;
  padding: 17px 46px 17px 18px; position: relative;
  font-weight: 700; color: var(--azul);
}
.faq__pergunta::-webkit-details-marker { display: none; }
.faq__pergunta::after {
  content: '+'; position: absolute; right: 18px; top: 50%;
  transform: translateY(-50%);
  font-size: 24px; font-weight: 400; color: var(--vermelho);
}
.faq__item[open] .faq__pergunta::after { content: '\2212'; }
.faq__resposta { padding: 0 18px 18px; font-size: 15px; }
.faq__resposta p:last-child { margin-bottom: 0; }

/* ---------- 15. FORMULARIO ---------- */
.formulario { margin-top: 30px; text-align: left; }
.formulario__grade { display: grid; gap: 16px; }
.campo { margin: 0; }
.campo__rotulo { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 700; color: var(--branco); }
.campo__caixa {
  width: 100%; padding: 13px 15px;
  font-family: inherit; font-size: 16px; color: var(--grafite);
  background: var(--branco);
  border: 2px solid transparent; border-radius: var(--raio);
}
.campo__caixa:focus { border-color: var(--vermelho); outline: none; }
.campo__caixa--area { resize: vertical; min-height: 130px; }

.campo--extra {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* --- CONSENTIMENTO --- */
.campo--consentimento { margin-top: 18px; }
.campo__consentimento {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 14px; line-height: 1.5; color: var(--claro-texto);
  cursor: pointer;
}
.campo__consentimento input[type="checkbox"] {
  flex: 0 0 auto;
  width: 18px; height: 18px;
  margin: 2px 0 0;
  accent-color: var(--vermelho);
  cursor: pointer;
}
.campo__consentimento a { color: var(--branco); text-decoration: underline; }
.campo__consentimento a:hover { color: var(--vermelho); }

.formulario__aviso { margin: 14px 0 0; min-height: 1.5em; font-size: 15px; font-weight: 700; }
.formulario__aviso--ok  { color: var(--branco); }
.formulario__aviso--erro { color: var(--branco); background: var(--vermelho); padding: 10px 14px; border-radius: var(--raio); }

/* ---------- 16. RODAPE ---------- */
.rodape { background: var(--grafite); color: var(--claro-texto); padding: 44px 0 22px; font-size: 15px; }
.rodape__grade { display: grid; gap: 30px; }
.rodape__marca { height: 38px; width: auto; margin-bottom: 16px; }
.rodape__titulo { font-size: 16px; color: var(--branco); }
.rodape__lista { list-style: none; }
.rodape__lista li { margin-bottom: 8px; }
.rodape a { color: var(--claro-texto); }
.rodape a:hover { color: var(--vermelho); }
.rodape__base {
  margin: 30px 0 0; padding-top: 18px;
  border-top: 1px solid var(--claro-linha);
  text-align: center; font-size: 13px;
}

/* ============================================================
   17. TABLETE — 768px
   ============================================================ */
@media (min-width: 768px) {
  .secao { padding: 80px 0; }
  .secao__linha { font-size: 18px; margin-bottom: 60px; }
  .cartao { padding: 32px; }
  .painel { padding: 40px; }
  .grade--2, .grade--3, .grade--4 { grid-template-columns: repeat(2, 1fr); }
  .dupla { grid-template-columns: repeat(2, 1fr); }
  .numeros__lista { grid-template-columns: repeat(3, 1fr); }
  .rodape__grade { grid-template-columns: repeat(3, 1fr); }
  .formulario__grade { grid-template-columns: repeat(2, 1fr); }
  .campo--largo { grid-column: 1 / -1; }
  .botao--envio { width: auto; min-width: 240px; }
  .hero { padding-top: 52px; }
}

/* ============================================================
   18. DESKTOP — 1024px
   ============================================================ */
@media (min-width: 1024px) {
  .cabecalho__botao { display: none; }

  .menu {
    display: flex !important;
    align-items: center;
    gap: 26px;
    position: static;
    box-shadow: none;
    background: none;
    padding: 0;
    margin-left: auto;
  }
  .menu__lista { display: flex; gap: 26px; }
  .menu__item { border-bottom: 0; }
  .menu__link { padding: 6px 0; font-size: 15px; position: relative; }
  .menu__link::after {
    content: ''; position: absolute; left: 0; bottom: 0;
    width: 0; height: 2px; background: var(--vermelho);
    transition: width var(--suave);
  }
  .menu__link:hover::after, .menu__link--atual::after { width: 100%; }
  .menu__extra { padding-top: 0; }
  .menu__extra .botao--portal { flex: 0 0 auto; }

  /* --- SUBMENU FLUTUANTE --- */
  .menu__item--grupo { position: relative; }
  .menu__link--grupo {
    width: auto; padding: 6px 0; font-size: 15px;
    justify-content: flex-start;
  }
  .submenu {
    position: absolute; top: 100%; left: -16px; z-index: 10;
    min-width: 214px;
    margin: 0; padding: 6px 0;
    background: var(--branco);
    border-left: 0;
    border-top: 3px solid var(--vermelho);
    border-radius: 0 0 var(--raio) var(--raio);
    box-shadow: var(--sombra);
  }
  .menu__item--grupo:hover > .submenu,
  .menu__item--grupo:focus-within > .submenu { display: block; }
  .submenu__link { padding: 10px 16px; white-space: nowrap; }
  .submenu__link:hover { background: var(--azul-veu); }

  .grade--3 { grid-template-columns: repeat(3, 1fr); }
  .grade--4 { grid-template-columns: repeat(4, 1fr); }

  .hero { padding: 0; }
  .hero__interno { grid-template-columns: 1fr 1fr; align-items: center; gap: 44px; padding-top: 56px; }
  .hero__figura img { border-radius: var(--raio); }

  .passos { grid-template-columns: repeat(2, 1fr); gap: 22px; }
  .tabela { min-width: 0; }
}

/* ---------- 19. PREFERENCIAS DO SISTEMA ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

@media print {
  .cabecalho, .menu, .pular, .botao { display: none !important; }
  body { color: #000; }
  .secao--azul, .numeros, .rodape { background: #FFF !important; color: #000 !important; }
}