/* Tokens do design system do DNE usados pelo cabeçalho e pelo rodapé (só o tema claro, decisão de 2026-11-05).
   Valores do design.md (base da Onebox). Todos com prefixo --dne- para não colidir com o CSS das LPs e do site. */
/* Fontes servidas do nosso domínio (Inter 400–700 e Sora 600–700, variáveis, só o subconjunto latino, que cobre o
   português). Nome próprio ("DNE Inter", "DNE Sora") para não misturar com fontes que a página já carregue.
   Licença: SIL Open Font License 1.1 (ver fontes/LICENCA.txt). */
@font-face { font-family: "DNE Inter"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(fontes/inter-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "DNE Sora"; font-style: normal; font-weight: 600 700; font-display: swap;
  src: url(fontes/sora-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --dne-primary: #314d98;
  --dne-primary-container: #e0e3eb;
  --dne-surface: #fcfcfc;
  --dne-surface-container: #f2f2f2;
  --dne-on-surface: #2f3237;
  --dne-on-surface-variant: #5e636e;
  --dne-outline-variant: #caccce;
  --dne-cta: #cc4400;
  --dne-cta-hover: #993300;
  --dne-on-cta: #ffffff;
  --dne-shadow-cabecalho: 0 2px 8px 0 #002d6e0f, 0 1px 2px 0 #002d6e0a;
  --dne-shadow-lg: 0 10px 22px -6px #002d6e33, 0 4px 8px -4px #002d6e1f;
  --dne-radius-md: 12px;
  --dne-radius-sm: 8px;
  --dne-font-sans: "DNE Inter", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --dne-font-head: "DNE Sora", "Sora", "DNE Inter", system-ui, Helvetica, Arial, sans-serif;
  --dne-conteudo: 1152px;
}

/* Cabeçalho e rodapé das LPs do DNE (design system, 2026-11-05).
   Classes com prefixo dne- para conviver com o Bootstrap 3 e o CSS próprio de cada LP.
   Tamanhos: celular até 767px, cabeçalho de desktop a partir de 768px, rodapé em colunas a partir de 1200px
   (largura do contêiner de 1152 + margens; abaixo disso as colunas ficam apertadas e o rodapé empilha). */

.dne-cab, .dne-cab *, .dne-rod, .dne-rod * { box-sizing: border-box; }
/* Blindagem: as LPs trazem CSS que mexe em elementos soltos (há Bootstrap modificado que dá margem de 20px e fonte de
   24px a todo <span>). Dentro do cabeçalho e do rodapé tudo começa zerado e herdado; as medidas vêm das classes abaixo,
   que vêm depois e por isso vencem. */
.dne-cab *, .dne-rod * {
  margin: 0; padding: 0; border: 0; font: inherit; line-height: inherit; letter-spacing: inherit;
  text-transform: none; text-shadow: none; float: none;
}
/* o próprio elemento também: há LPs com regra geral em footer/header (ex.: footer { padding: 70px 0 0 }) */
.dne-cab, .dne-rod { margin: 0; padding: 0; float: none; width: 100%; clear: both; }  /* clear: há LPs com blocos flutuantes (pull-left) passando do fim do conteúdo */
.dne-cab { font-size: 16px; line-height: 1.5; }
.dne-rod { font-size: 13px; line-height: 1.4; }
.dne-cab b, .dne-rod b, .dne-cab strong, .dne-rod strong { font-weight: 700; }
.dne-rod svg { overflow: visible; }
/* cabeçalho e rodapé vão de ponta a ponta: tira a margem padrão do body (8px) das páginas que não a zeram */
body:has(> .dne-cab) { margin: 0; }
.dne-cab img, .dne-rod img { display: block; flex: none; max-width: none; border: 0; }
.dne-cab p, .dne-rod p, .dne-rod h2, .dne-rod ul { margin: 0; padding: 0; }
.dne-rod ul { list-style: none; }

/* ---------- Botão de pedido (CTA) ---------- */
.dne-cta {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  font-family: var(--dne-font-sans); font-size: 16px; font-weight: 600; line-height: 1.5;
  padding: 10px 20px; border-radius: var(--dne-radius-sm);
  background: var(--dne-cta); color: var(--dne-on-cta); text-decoration: none; white-space: nowrap;
}
.dne-cta:hover { background: var(--dne-cta-hover); color: var(--dne-on-cta); text-decoration: none; }
.dne-cta:focus-visible, .dne-rod a:focus-visible {
  outline: 3px solid var(--dne-primary); outline-offset: 2px; border-radius: 4px;
}

/* ---------- Cabeçalho de LP ---------- */
.dne-cab {
  position: sticky; top: 0; z-index: 20; width: 100%;
  background: var(--dne-surface); font-family: var(--dne-font-sans);
  transition: box-shadow 200ms cubic-bezier(.25, 1, .5, 1);
}
.dne-cab.is-rolado { box-shadow: var(--dne-shadow-cabecalho); }
.dne-cab__in {
  display: flex; align-items: center; gap: 32px; height: 72px;
  padding: 0 max(24px, calc((100% - var(--dne-conteudo)) / 2));
}
@media (min-width: 1280px) { .dne-cab__in { padding: 0 max(64px, calc((100% - var(--dne-conteudo)) / 2)); } }
.dne-cab__logos { display: flex; align-items: center; gap: 16px; flex: none; }
.dne-cab__grupo { display: flex; align-items: center; gap: 8px; }
.dne-cab__logos img { height: var(--h); width: auto; }
.dne-cab__div { width: 1px; height: var(--h); background: var(--dne-outline-variant); flex: none; }
.dne-cab__esp { flex: 1; }

@media (max-width: 767px) {
  .dne-cab__in { height: 56px; padding: 0 16px; gap: 8px; }
  .dne-cab__logos { gap: 12px; }
  .dne-cab__logos img { height: var(--hm); }
  .dne-cab__div { height: var(--hm); }
  .dne-cab .dne-cta { font-size: 13px; font-weight: 700; padding: 6px 14px; position: relative; }
  /* área de toque de 44px sem mudar o desenho */
  .dne-cab .dne-cta::after { content: ""; position: absolute; inset: -6px -2px; }
}

/* ---------- Rodapé de LP ---------- */
.dne-rod {
  background: var(--dne-surface-container); border-top: 1px solid var(--dne-outline-variant);
  font-family: var(--dne-font-sans); color: var(--dne-on-surface); -webkit-font-smoothing: antialiased;
}
.dne-rod__in { padding: 48px 16px; display: flex; flex-direction: column; gap: 32px; }
@media (min-width: 768px) and (max-width: 1199px) { .dne-rod__in { padding: 48px 24px; } }
.dne-rod a { color: var(--dne-on-surface-variant); text-decoration: none; }
.dne-rod a:hover { color: var(--dne-on-surface); text-decoration: underline; text-underline-offset: 3px; }
.dne-rod h2 {
  font-family: var(--dne-font-sans); font-size: 13px; line-height: 1.4; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--dne-on-surface);
}
.dne-rod__frase { font-size: 13px; line-height: 1.4; color: var(--dne-on-surface); }
.dne-rod__leg, .dne-rod__qtd, .dne-rod__emp p { font-size: 13px; line-height: 1.4; color: var(--dne-on-surface-variant); }

.dne-rod__topo { display: flex; flex-direction: column; gap: 32px; }
.dne-rod__oficial { display: flex; flex-direction: column; gap: 24px; }
.dne-rod__l1 { display: flex; flex-direction: column; gap: 24px; }
.dne-rod__logos { display: flex; align-items: center; gap: var(--gapm, 9px); }
.dne-rod__grupo { display: flex; align-items: center; gap: 8px; }
.dne-rod__logos img { height: var(--hm); width: auto; }
.dne-rod__marcas { display: flex; flex-wrap: wrap; gap: 16px 24px; }
.dne-rod__marcas > div { display: flex; flex-direction: column; gap: 8px; }
.dne-rod__fila { display: flex; align-items: center; gap: 24px; }
/* ITI, ICP-Brasil e Meia-Entrada em on-surface-variant (máscara sobre o SVG oficial) */
.dne-rod__selo {
  display: block; flex: none; background: var(--dne-on-surface-variant);
  -webkit-mask: var(--img) center / contain no-repeat; mask: var(--img) center / contain no-repeat;
}
.dne-rod__selo--iti { --img: url(img/iti.svg); width: 105.9px; height: 36px; }
.dne-rod__selo--icp { --img: url(img/icp-brasil.svg); width: 29.7px; height: 36px; }
.dne-rod__selo--meia { --img: url(img/meia-entrada.svg); width: 138px; height: 30px; }

.dne-rod__ra { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.dne-rod__ra > span { display: flex; flex-direction: column; gap: 4px; }
.dne-rod__ra-nota { display: flex; align-items: center; gap: 8px; font-size: 13px; line-height: 1.4; color: var(--dne-on-surface); }
.dne-rod__ra-face { display: block; width: 16px; height: 17px; background: url(img/reclame-aqui-carinha.png) 0 0 / 16px 17px no-repeat; }
.dne-rod__ra-selo { display: block; width: 72px; height: 105px; background: url(img/reclame-aqui-ra1000.png) 0 0 / 72px 105px no-repeat; }

.dne-rod__app { display: flex; flex-direction: column; gap: 32px; }
.dne-rod__app section { display: flex; flex-direction: column; gap: 16px; }
.dne-rod__lojas { display: flex; gap: 8px; }
.dne-rod__loja { display: flex; flex-direction: column; gap: 4px; }
.dne-rod__loja img { height: 40px; width: auto; }
.dne-rod__nota { margin-top: 4px !important; font-size: 13px; line-height: 1.4; color: var(--dne-on-surface); }
.dne-rod__nota > span { display: flex; align-items: center; gap: 8px; }
.dne-rod__estrelas { display: inline-flex; gap: 4px; color: var(--dne-on-surface); }
.dne-rod__estrelas svg { display: block; }
.dne-rod__pag { display: flex; flex-wrap: wrap; gap: 24px; }
.dne-rod__pag li { display: flex; align-items: center; gap: 8px; font-size: 13px; line-height: 1.4; color: var(--dne-on-surface-variant); }
.dne-rod__pix { width: 20px; height: 20px; background: currentColor;
  -webkit-mask: url(img/pix.png) -0.69px -0.4px / 61.7px 21.7px no-repeat; mask: url(img/pix.png) -0.69px -0.4px / 61.7px 21.7px no-repeat; }

.dne-rod__legal { border-top: 1px solid var(--dne-outline-variant); padding-top: 16px; display: flex; flex-direction: column-reverse; gap: 16px; }
.dne-rod__emp { display: flex; flex-direction: column; gap: 4px; }
.dne-rod__sep { display: none; }
.dne-rod__quebra { display: block; margin-top: 4px; }  /* no celular, uma linha por informação, 4px entre elas */
.dne-rod__legais { display: flex; flex-wrap: wrap; column-gap: 24px; font-size: 16px; line-height: 1.5; }
.dne-rod__legais a { display: flex; align-items: center; min-height: 44px; }

@media (min-width: 1200px) {
  .dne-rod__in { padding: 48px max(24px, calc((100% - var(--dne-conteudo)) / 2)); gap: 0; }
  .dne-rod__topo {
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px;
    padding-bottom: 32px; border-bottom: 1px solid var(--dne-outline-variant);
  }
  .dne-rod__oficial { grid-column: 1 / 5; }
  .dne-rod__ra { grid-column: 7 / 9; margin-top: 8px; gap: 16px; }
  .dne-rod__app { grid-column: 9 / 13; gap: 24px; }
  /* segunda linha das colunas alinhada: primeiro bloco com 122px */
  .dne-rod__l1 { height: 122px; }
  .dne-rod__app .dne-rod__l1 { gap: 16px; }
  .dne-rod__marcas { gap: 32px; }
  .dne-rod__logos { gap: var(--gap, 11px); }
  .dne-rod__logos img { height: var(--h); }
  .dne-rod__selo--iti { width: 117.6px; height: 40px; }
  .dne-rod__selo--icp { width: 33px; height: 40px; }
  .dne-rod__selo--meia { width: 147px; height: 32px; }
  .dne-rod__legal { border-top: 0; padding-top: 32px; flex-direction: row; justify-content: space-between; align-items: flex-start; gap: 24px; }
  .dne-rod__sep { display: inline; }
  .dne-rod__quebra { display: inline; }
  .dne-rod__legais { flex-wrap: nowrap; font-size: 13px; line-height: 1.4; }
  .dne-rod__legais a { display: inline; min-height: 0; }
}
@media (min-width: 1280px) { .dne-rod__in { padding-left: max(64px, calc((100% - var(--dne-conteudo)) / 2)); padding-right: max(64px, calc((100% - var(--dne-conteudo)) / 2)); } }

/* =====================================================================================================
   Site, blog, Central de ajuda e Meu DNE (2026-11-05)
   Um HTML só: até 1199px o cabeçalho é o do celular (logo, botão ou conta e menu); de 1200px em diante, o de
   desktop (o contêiner de 1152 com os links só cabe a partir daí).
   ===================================================================================================== */
.dne-cab button { appearance: none; -webkit-appearance: none; background: transparent; color: inherit; cursor: pointer; }
.dne-cab a:focus-visible, .dne-cab button:focus-visible { outline: 3px solid var(--dne-primary); outline-offset: 2px; border-radius: 4px; }
.dne-cab [hidden] { display: none !important; }

.dne-cab__logo { display: flex; align-items: center; flex: none; text-decoration: none; }
.dne-cab__logo img { height: var(--h); width: auto; }
.dne-cab__ms { display: flex; align-items: center; gap: 16px; flex: none; }
.dne-cab--site .dne-cab__div { height: 24px; align-self: center; }
.dne-cab__ms .dne-cab__div { height: 20px; }
.dne-cab__secao {
  font-family: var(--dne-font-head); font-weight: 600; font-size: 16px; line-height: 21px; letter-spacing: -.005em;
  color: var(--dne-primary); text-decoration: none; white-space: nowrap;
}
.dne-cab__secao:hover { color: var(--dne-primary); text-decoration: underline; text-underline-offset: 3px; }
.dne-cab__links, .dne-cab__acoes { display: flex; align-items: center; gap: 24px; flex: none; }
.dne-cab__link {
  display: flex; align-items: center; gap: 8px; white-space: nowrap;
  color: var(--dne-on-surface); text-decoration: none; font-size: 16px; line-height: 24px;
}
.dne-cab__link:hover { color: var(--dne-primary); text-decoration: none; }
.dne-cab__link svg, .dne-menucel__item svg { flex: none; }

/* conta (logado) */
.dne-cab__conta {
  display: flex; align-items: center; gap: 8px; flex: none; padding: 6px 0 6px 8px;
  color: var(--dne-on-surface); font-size: 16px; line-height: 24px;
}
.dne-cab__av {
  width: 32px; height: 32px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center;
  background: var(--dne-primary-container); color: var(--dne-primary); font-size: 13px; font-weight: 600; line-height: 1;
}
.dne-cab__nome { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dne-cab__seta { display: flex; }
.dne-conta-lista {
  position: absolute; z-index: 30; top: 66px; right: max(24px, calc((100% - var(--dne-conteudo)) / 2));
  width: 220px; padding: 8px 0; background: var(--dne-surface); border-radius: var(--dne-radius-md); box-shadow: var(--dne-shadow-lg);
}
@media (min-width: 1280px) { .dne-conta-lista { right: max(64px, calc((100% - var(--dne-conteudo)) / 2)); } }
.dne-conta-lista a { display: block; padding: 10px 16px; color: var(--dne-on-surface); text-decoration: none; font-size: 16px; line-height: 1.5; }
.dne-conta-lista a:hover { background: var(--dne-surface-container); color: var(--dne-on-surface); text-decoration: none; }
.dne-conta-lista a[aria-current="page"] { color: var(--dne-primary); font-weight: 600; }

/* botão só de ícone (menu, fechar): área de 43px, avançando sobre a margem */
.dne-cab__ico {
  width: 43px; height: 43px; flex: none; display: flex; align-items: center; justify-content: center;
  color: var(--dne-on-surface); margin-right: -11.5px;
}

/* menu do celular */
.dne-menucel {
  position: fixed; inset: 0; z-index: 30; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; background: var(--dne-surface); font-family: var(--dne-font-sans);
}
.dne-menucel__topo {
  height: 56px; flex: none; display: flex; align-items: center; gap: 8px; padding: 0 16px;
  border-bottom: 1px solid var(--dne-outline-variant);
}
.dne-menucel__topo .dne-cab__logo img { height: var(--hm); }
.dne-menucel__conta { display: flex; align-items: center; gap: 12px; padding: 12px 16px; font-size: 16px; line-height: 1.5; color: var(--dne-on-surface); }
.dne-menucel__conta .dne-cab__av { width: 28px; height: 28px; }
.dne-menucel__nav { display: flex; flex-direction: column; padding: 8px 16px 0; }
.dne-menucel__item {
  display: flex; align-items: center; gap: 8px; min-height: 52px; border-bottom: 1px solid var(--dne-outline-variant);
  color: var(--dne-on-surface); text-decoration: none; font-size: 16px; line-height: 1.5;
}
.dne-menucel__item:hover { color: var(--dne-primary); text-decoration: none; }
.dne-menucel__item[aria-current="page"] { color: var(--dne-primary); font-weight: 600; }
.dne-cab .dne-menucel .dne-menucel__cta { margin: 24px 16px; font-size: 16px; font-weight: 600; padding: 10px 20px; }
.dne-cab .dne-menucel .dne-menucel__cta::after { content: none; }
html.dne-menucel-aberto { overflow: hidden; }

@media (max-width: 1199px) {
  .dne-cab--site .dne-so-desk { display: none !important; }
  .dne-cab--site .dne-cab__in { height: 56px; padding: 0 16px; gap: 8px; }
  .dne-cab--site .dne-cab__logo img { height: var(--hm); }
  .dne-cab--site .dne-cab__in .dne-cta { font-size: 13px; font-weight: 700; padding: 6px 14px; position: relative; }
  .dne-cab--site .dne-cab__in .dne-cta::after { content: ""; position: absolute; inset: -6px -2px; }
  .dne-cab--site .dne-cab__conta { padding: 7.5px; margin-right: -7.5px; }
  .dne-cab--site .dne-cab__conta .dne-cab__av { width: 28px; height: 28px; }
  .dne-cab--site .dne-cab__nome, .dne-cab--site .dne-cab__seta { display: none; }
  .dne-conta-lista { display: none !important; }
}
@media (min-width: 1200px) {
  .dne-cab--site .dne-so-cel { display: none !important; }
  .dne-cab--site .dne-menucel { display: none !important; }
}

/* ---------- Rodapé do site e do Meu DNE (colunas DNE e Atendimento) ---------- */
.dne-rod__aws { display: block; width: 89px; height: 32px; margin-top: 16px; }
.dne-rod__duas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; align-items: start; }
.dne-rod__at, .dne-rod__dne { display: flex; flex-direction: column; gap: 4px; }
.dne-rod__dne .dne-rod__l1 { gap: 4px; }
.dne-rod__dne .dne-rod__lista + .dne-rod__lista { margin-top: 8px; }
.dne-rod__lista { display: flex; flex-direction: column; font-size: 16px; line-height: 1.5; }
.dne-rod__lista a { display: flex; align-items: center; min-height: 44px; }
.dne-rod--site .dne-rod__ra { margin-top: 0; }

@media (min-width: 1200px) {
  .dne-rod__aws { margin-top: 8px; }
  .dne-rod--site .dne-rod__dne { grid-column: 5 / 7; grid-row: 1; gap: 24px; }
  .dne-rod--site .dne-rod__dne .dne-rod__l1 { gap: 16px; }
  .dne-rod--site .dne-rod__dne .dne-rod__lista + .dne-rod__lista { margin-top: 0; }
  .dne-rod--site .dne-rod__duas { grid-column: 7 / 9; grid-row: 1; display: flex; flex-direction: column; gap: 24px; }
  .dne-rod--site .dne-rod__at { gap: 16px; }
  .dne-rod--site .dne-rod__oficial { grid-row: 1; }
  .dne-rod--site .dne-rod__app { grid-row: 1; }
  .dne-rod--site .dne-rod__ra { grid-column: auto; margin-top: 0; }
  .dne-rod__lista { gap: 12px; font-size: 13px; line-height: 1.4; }
  .dne-rod__lista a { display: inline; min-height: 0; }
}
