/* Estilos do site comercial LaMüller — layout, componentes e páginas.
   Nomes de classe em minúsculas, com hífen, conforme o design system. */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--cor-branco);
  color: var(--cor-texto-900);
  font-family: var(--fonte-texto);
  font-size: var(--corpo);
  line-height: var(--linha);
}

img {
  max-width: 100%;
  height: auto;
}

/* O <picture> é um bloco de layout. Com `display: contents` (regra da Fase 7) o
   Chromium reservava a coluna do grid para um elemento sem caixa e jogava o
   <img> para a linha seguinte: a arte da abertura caía abaixo do texto,
   inclusive no desktop. Corrigido na Fase 11 — como bloco, o <picture> ocupa o
   próprio espaço e o <img> (width/height declarados) o preenche, sem salto de
   layout. Na Fase 12 ele passou a ser a camada de fundo da abertura da home. */
picture {
  display: block;
}

a {
  color: var(--cor-azul-600);
}

a:hover {
  text-decoration-thickness: 2px;
}

p {
  margin: 0 0 var(--esp-4);
  max-width: 68ch;
  overflow-wrap: break-word;
}

h1,
h2,
h3 {
  margin: 0 0 var(--esp-4);
  line-height: 1.2;
  overflow-wrap: break-word;
}

:focus-visible {
  outline: var(--foco) solid var(--cor-foco);
  outline-offset: 3px;
}

.container {
  width: 100%;
  max-width: var(--largura-conteudo);
  margin-inline: auto;
  padding-inline: var(--margem-lateral);
}

.pular-conteudo {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  padding: var(--esp-3) var(--esp-4);
  background: var(--cor-branco);
  color: var(--cor-azul-600);
  font-weight: 600;
  transform: translateY(-200%);
}

.pular-conteudo:focus {
  transform: none;
}

/* Texto só para leitor de tela (Fase 20): fica no HTML — é o nome acessível de
   quem depende dele, como o acionador do seletor de idioma, que passou a
   mostrar apenas a bandeira — mas sai do desenho. Caixa de 1 px fora do fluxo,
   recortada, sem tocar no layout. */
.apenas-leitor {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Cabeçalho e navegação */

.cabecalho {
  background: var(--cor-azul-900);
  color: var(--cor-branco);
}

.cabecalho__interno {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "marca acionador"
    "acoes acoes"
    "navegacao navegacao";
  gap: var(--esp-3) var(--esp-4);
  align-items: center;
  padding-block: var(--esp-3);
}

/* Registre-se e Acessar painel ficam juntos e sempre visíveis — no celular
   ocupam a própria linha, sem depender do menu recolhido (Fase 15). A linha
   fecha na BASE, não no centro (Fase 465): os campos do login têm o rótulo acima
   e os botões não, então centralizar deixava o Registre-se e o acionador do
   idioma mais altos que o botão Entrar (medido em 1440 px: 4,21 px de diferença
   no topo). Com todos os controles na altura da regra seguinte e alinhados pela
   base, os quatro fecham no mesmo topo e no mesmo pé. */
.cabecalho__acoes {
  grid-area: acoes;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--esp-3);
}

/* Fase 465 — uma altura só para os controles desta linha: os dois campos do
   login, o Entrar, o Registre-se e o acionador do idioma. Medido antes: quatro
   alturas diferentes (45,19 / 53,19 / 44,8 / 44 px) e nenhum topo em comum — o
   botão Entrar herdava a entrelinha do corpo (`font: inherit`, 1,6) e ficava
   8,39 px mais alto que o Registre-se, que segue `.botao` (1 rem e 1,3). A altura
   é o alvo mínimo de toque, o mesmo da altura mínima dos botões, e o
   `box-sizing: border-box` do reset faz dela a altura final. */
.cabecalho__acoes .acesso__entrada,
.cabecalho__acoes .botao,
.cabecalho__acoes .idiomas__acionador {
  height: var(--toque-min);
}

.marca {
  grid-area: marca;
  font-family: var(--fonte-marca);
  font-size: clamp(1.5rem, 1.1rem + 1.1vw, 1.875rem);
  font-weight: 400;
  line-height: 1;
  color: var(--cor-branco);
  text-decoration: none;
  white-space: nowrap;
}

.navegacao {
  grid-area: navegacao;
  min-width: 0;
}

.navegacao__lista {
  display: flex;
  flex-direction: column;
  gap: var(--esp-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.navegacao__link {
  display: flex;
  align-items: center;
  min-height: var(--toque-min);
  color: var(--cor-branco);
  text-decoration: none;
}

.navegacao__link:hover {
  text-decoration: underline;
}

.cabecalho__acionador {
  grid-area: acionador;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--toque-min);
  padding: var(--esp-2) var(--esp-4);
  border: 1px solid var(--cor-azul-300);
  border-radius: var(--raio-p);
  background: transparent;
  color: var(--cor-branco);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

[data-menu="aberto"] .cabecalho__acionador {
  background: rgba(255, 255, 255, 0.12);
}

@media (max-width: 767px) {
  html.tem-js [data-menu="fechado"] .navegacao {
    display: none;
  }
}

@media (min-width: 768px) {
  .cabecalho__interno {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "marca navegacao acoes";
    gap: var(--esp-5);
  }

  .navegacao__lista {
    flex-direction: row;
    gap: var(--esp-5);
  }

  .cabecalho__acionador {
    display: none;
  }
}

/* Tablet com o acesso de cliente (Fase 18): a linha única não comporta marca,
   navegação, dois campos, o botão Entrar e o Registre-se — em vez de a coluna de
   ações engolir a navegação (medido: 0 px em 768 px), o cabeçalho empilha. */
@media (min-width: 768px) and (max-width: 1023px) {
  .cabecalho__interno {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "marca"
      "navegacao"
      "acoes";
  }
}

/* No desktop a coluna de ações tem teto e fica alinhada à direita: o formulário
   se ajusta e a navegação mantém o espaço dela (sem teto, medido: 102 px em
   1024 px). O alinhamento à direita vale quando o grupo não cabe em uma linha
   (1024–1199 px, medido): aí o Registre-se e a bandeira descem para a segunda
   linha alinhados à borda direita, e não soltos à esquerda sob o login. */
@media (min-width: 1024px) {
  html.tem-js .cabecalho__acoes {
    justify-content: flex-end;
    max-width: 30rem;
  }
}

/* Fase 20 — a partir de 1200 px o teto de 30 rem sai de cena: o quadro de login
   inteiro cabe na mesma linha, com o Registre-se e a bandeira do idioma à
   direita dele. O campo do login e o da senha ficam em 8 rem e o grupo todo mede
   de 571 px (en) a 675 px (ru) nas oito línguas geradas, contra os 1136 px de
   conteúdo do cabeçalho nesta faixa: a navegação fica com 311 px no pior caso
   (ru), acima do mínimo dela (295 px medidos). Abaixo de 1200 px o teto de 30 rem
   volta, porque a linha não comporta o grupo inteiro e quem perderia espaço é a
   navegação. */
@media (min-width: 1200px) {
  html.tem-js .cabecalho__acoes {
    max-width: 43rem;
  }

  html.tem-js .acesso__campo {
    max-width: 8rem;
  }
}

/* Botões e links */

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--toque-min);
  padding: var(--esp-3) var(--esp-5);
  border-radius: var(--raio-p);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
}

.botao--principal {
  background: var(--cor-azul-600);
  color: var(--cor-branco);
  box-shadow: var(--sombra-1);
}

.botao--principal:hover {
  filter: brightness(0.92);
}

.botao--secundario {
  border: 1px solid var(--cor-borda-100);
  background: var(--cor-branco);
  color: var(--cor-texto-900);
}

.botao--secundario:hover {
  border-color: var(--cor-azul-600);
  color: var(--cor-azul-600);
}

.botao--painel {
  border: 1px solid var(--cor-azul-300);
  background: transparent;
  color: var(--cor-branco);
}

.botao--painel:hover {
  background: rgba(255, 255, 255, 0.12);
}

/* Registre-se — ação comercial do cabeçalho (Fase 15): botão cheio sobre o fundo
   azul-900, com o texto no azul da marca para não depender de cor de destaque. */
.botao--registro {
  background: var(--cor-branco);
  color: var(--cor-azul-900);
  box-shadow: var(--sombra-1);
}

.botao--registro:hover {
  background: var(--cor-clara-100);
}

/* Abaixo do desktop de referência os dois botões do cabeçalho convivem com o
   menu: a caixa menor mantém tudo em uma linha, sem rolagem horizontal. */
@media (max-width: 1023px) {
  .cabecalho__acoes .botao {
    padding-inline: var(--esp-4);
  }
}

/* Seletor de idioma (Fase 17; com bandeiras desde a Fase 19): lista de links
   reais com a bandeira do idioma e o autônimo, sem JavaScript novo. No cabeçalho
   o ícone da bandeira do idioma atual fica no acionador — o mesmo grupo de ações
   do acesso de cliente, no fim à direita — e clicar nele abre a lista com as
   bandeiras dos idiomas contidos, como painel sobre a página (sem empurrar a
   navegação). No rodapé a lista aparece completa, como as outras colunas. O
   idioma atual leva `aria-current`, que também dá o realce visual. As bandeiras
   são desenho próprio em SVG, publicado junto do site (interface/img/bandeiras):
   nenhuma requisição para outro domínio. */

.idiomas__caixa {
  position: relative;
}

.idiomas__acionador {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-3);
  min-height: var(--toque-min);
  padding: var(--esp-2) var(--esp-4);
  border: 1px solid var(--cor-azul-300);
  border-radius: var(--raio-p);
  color: var(--cor-branco);
  font-weight: 600;
  cursor: pointer;
}

.idiomas__caixa[open] .idiomas__acionador {
  background: rgba(255, 255, 255, 0.12);
}

/* A bandeira é decorativa: o nome acessível vem do rótulo que a acompanha — o
   autônimo, no link, e o rótulo do grupo escrito só para leitor de tela no
   acionador, que desde a Fase 20 mostra apenas a bandeira — e do nome do grupo
   (`aria-label` da navegação). O contorno claro sustenta a leitura da arte
   sobre o azul do cabeçalho e do rodapé. */

.idiomas__bandeira {
  display: block;
  flex: none;
  width: 24px;
  height: 16px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.45);
}

/* A lista do cabeçalho é painel: abre por cima do conteúdo, ancorada à direita
   do acionador — o `details` nativo segue sendo o controle, sem script novo. */

.idiomas__lista {
  position: absolute;
  top: calc(100% + var(--esp-2));
  right: 0;
  z-index: 20;
  min-width: 11.5rem;
  margin: 0;
  padding: var(--esp-2);
  border: 1px solid var(--cor-azul-300);
  border-radius: var(--raio-p);
  background: var(--cor-azul-900);
  box-shadow: var(--sombra-2);
  list-style: none;
}

.idiomas__link {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  min-height: var(--toque-min);
  padding-inline: var(--esp-2);
  border-radius: var(--raio-p);
  color: var(--cor-branco);
  text-decoration: none;
}

.idiomas__link:hover,
.idiomas__link:focus-visible,
.idiomas__link[aria-current="true"] {
  background: rgba(255, 255, 255, 0.12);
  text-decoration: underline;
}

.idiomas__link[aria-current="true"] {
  font-weight: 700;
}

.rodape__link[aria-current="true"] {
  color: var(--cor-branco);
  font-weight: 700;
  text-decoration: underline;
}

/* Acesso de cliente no topo da home (Fase 18): campo de login e senha com o
   botão Entrar, no lugar do "Acessar painel" do cabeçalho. O formulário é
   escondido sem JavaScript — quem não tem JS continua entrando pelo Acessar
   painel, que segue no HTML, no rodapé e no apoio da abertura. Desde a Fase 20,
   de 1200 px em diante o quadro do login abre a linha do grupo à esquerda e o
   Registre-se e a bandeira do idioma ficam à direita dele. */
.acesso {
  display: none;
}

html.tem-js .acesso {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--esp-2) var(--esp-3);
}

html.tem-js .pagina--home .botao--painel {
  display: none;
}

.acesso__campo {
  display: flex;
  flex: 1 1 8rem;
  flex-direction: column;
  gap: var(--esp-1);
  min-width: 0;
}

.acesso__rotulo {
  color: var(--cor-branco);
  font-size: 0.8125rem;
  font-weight: 600;
}

.acesso__entrada {
  width: 100%;
  min-height: var(--toque-min);
  padding: var(--esp-2) var(--esp-3);
  border: 1px solid var(--cor-azul-300);
  border-radius: var(--raio-p);
  background: var(--cor-branco);
  color: var(--cor-texto-900);
  font: inherit;
}

.botao--entrar {
  border: 1px solid var(--cor-azul-600);
  background: var(--cor-azul-600);
  color: var(--cor-branco);
  cursor: pointer;
  font: inherit;
  font-weight: 600;
}

.botao--entrar:hover {
  filter: brightness(0.92);
}

.botao--entrar[disabled] {
  cursor: progress;
  filter: none;
  opacity: 0.75;
}

/* Aviso do formulário (erro do aplicativo ou estado da tentativa): ocupa a linha
   toda e só existe quando tem texto. Fica no grupo de ações, como irmão do
   formulário — não dentro dele (Fase 465): dentro do `.acesso` a mensagem entrava
   na altura do quadro do login e a linha inteira (Registre-se e idioma) se
   deslocava quando ela aparecia. */
.acesso__estado {
  flex-basis: 100%;
  margin: 0;
  /* Com o grupo alinhado à direita (>= 1024 px) o aviso continuaria à esquerda,
     sob o quadro do login, em vez de escorregar para debaixo dos botões. */
  margin-inline-end: auto;
  color: var(--cor-branco);
  font-size: 0.875rem;
}

.acesso__estado:empty {
  display: none;
}

/* Em telas menores o formulário ocupa a própria linha do cabeçalho, com os
   campos dividindo o espaço — a marca, os botões e o menu não competem com ele,
   e o aviso cai logo abaixo do formulário (a posição de sempre). */
@media (max-width: 1023px) {
  html.tem-js .acesso {
    flex-basis: 100%;
  }
}

/* De 1024 px em diante o aviso vai para o FIM da linha (Fase 465): assim ele não
   entra na conta do alinhamento dos controles e o Registre-se e o idioma fecham
   com o botão Entrar mesmo com a mensagem na tela. */
@media (min-width: 1024px) {
  .acesso__estado {
    order: 4;
  }
}

.botao--secundario-claro {
  border: 1px solid var(--cor-azul-300);
  background: transparent;
  color: var(--cor-branco);
}

.botao--secundario-claro:hover {
  background: rgba(255, 255, 255, 0.12);
}

.acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-4);
  margin-block: var(--esp-5);
}

.acoes .botao {
  flex: 1 1 auto;
}

.link {
  color: var(--cor-azul-600);
  font-weight: 600;
}

.link-claro {
  color: var(--cor-azul-300);
  font-weight: 600;
}

/* Abertura */

.abertura {
  padding-block: var(--esp-secao);
  background: var(--cor-azul-900);
  color: var(--cor-texto-claro);
}

.abertura__interno {
  display: grid;
  gap: var(--esp-7);
  align-items: center;
}

/* Abertura da home: a arte horizontal v2 (muller-hero-sap-ia-v2) ocupa a
   **largura total** da seção como fundo, no tamanho natural (proporção 3:2), e o
   texto com as ações fica **sobre a área vazia à esquerda** dela — a composição
   para a qual a arte foi desenhada. O texto segue em coluna única; as páginas
   internas, que não têm arte, não usam estas classes. Fase 12 (D41). */
.abertura--com-arte {
  position: relative;
  isolation: isolate;
  display: grid;
  align-content: center;
  overflow: hidden;
}

.abertura__fundo {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: block;
  margin: 0;
}

.abertura__fundo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Ancorado à direita: quando a banda fica mais alta que a proporção da arte
     (telas estreitas e zoom alto), o recorte acontece na área vazia da esquerda
     e o personagem — que ocupa os últimos 34% da arte — continua inteiro. */
  object-position: right center;
}

/* Véu de contraste: a cor do fundo da seção (#071426, com alfa) forte onde o
   texto fica e transparente onde o personagem aparece. Preserva a leitura do
   texto quando a arte é recortada — telas estreitas e zoom alto. */
.abertura--com-arte::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    90deg,
    rgba(7, 20, 38, 0.94) 0%,
    rgba(7, 20, 38, 0.9) 30%,
    rgba(7, 20, 38, 0.8) 45%,
    rgba(7, 20, 38, 0.5) 58%,
    rgba(7, 20, 38, 0) 74%
  );
  pointer-events: none;
}

/* No celular o texto ocupa a largura toda, então o véu sobe e fica quase
   uniforme: a arte continua inteira atrás do texto, com o personagem sob o
   véu, e o texto mantém o contraste. */
@media (max-width: 767px) {
  .abertura--com-arte::after {
    background: linear-gradient(
      180deg,
      rgba(7, 20, 38, 0.94) 0%,
      rgba(7, 20, 38, 0.88) 50%,
      rgba(7, 20, 38, 0.8) 100%
    );
  }
}

.etiqueta {
  display: inline-block;
  margin: 0 0 var(--esp-4);
  padding: var(--esp-1) var(--esp-3);
  border: 1px solid var(--cor-azul-300);
  border-radius: 999px;
  color: var(--cor-azul-300);
  font-size: 0.9375rem;
  font-weight: 600;
}

.abertura__titulo {
  color: var(--cor-branco);
  font-size: clamp(2.125rem, 1.5rem + 2.6vw, 4rem);
  font-weight: 700;
  line-height: 1.1;
}

.abertura__resumo {
  color: var(--cor-texto-claro);
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
}

.apoio {
  color: var(--cor-texto-claro);
  font-size: 0.9375rem;
}

/* A partir de 768 px a banda acompanha a proporção da arte (3:2 na largura
   total) e para em 1040 px de altura nas telas muito largas; o texto ocupa no
   máximo metade da largura (até 34rem), para ficar sobre a área escura da arte
   e longe do personagem. */
@media (min-width: 768px) {
  .abertura--com-arte {
    min-height: clamp(520px, 66.66vw, 1040px);
  }

  .abertura--com-arte .abertura__texto {
    max-width: min(100%, 50vw, 34rem);
  }
}

.abertura p a,
.secao--azul p a,
.secao--escura p a {
  color: var(--cor-azul-300);
}

.cabecalho :focus-visible,
.abertura :focus-visible,
.secao--azul :focus-visible,
.secao--escura :focus-visible,
.rodape :focus-visible {
  outline-color: var(--cor-foco-escuro);
}

/* Seções */

.secao {
  padding-block: var(--esp-secao);
}

.secao--clara {
  background: var(--cor-clara-100);
}

.secao--azul {
  background: var(--cor-azul-900);
  color: var(--cor-texto-claro);
}

.secao--escura {
  background: var(--cor-preto-900);
  color: var(--cor-texto-claro);
}

.secao__interno {
  max-width: 60rem;
}

.secao__titulo {
  color: var(--cor-texto-900);
  font-size: clamp(1.625rem, 1.3rem + 1.4vw, 2.5rem);
  font-weight: 700;
}

.secao--azul .secao__titulo,
.secao--escura .secao__titulo {
  color: var(--cor-azul-300);
}

.secao__texto {
  font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.25rem);
}

.secao__texto:last-child {
  margin-bottom: 0;
}

/* Cartões de benefício e de situação */

.cartoes {
  display: grid;
  gap: var(--esp-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.cartao {
  padding: var(--esp-5);
  border: 1px solid var(--cor-borda-100);
  border-radius: var(--raio-m);
  background: var(--cor-branco);
  box-shadow: var(--sombra-1);
}

.cartao__titulo {
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  font-weight: 600;
}

.cartao__texto {
  margin-bottom: 0;
  font-size: 1rem;
}

@media (min-width: 768px) {
  .cartoes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .cartoes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .cartoes--dois {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Passos da jornada */

.passos {
  display: grid;
  gap: var(--esp-5);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: passo;
}

.passo {
  position: relative;
  padding-left: 3.25rem;
}

.passo::before {
  counter-increment: passo;
  content: counter(passo);
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--cor-azul-600);
  color: var(--cor-branco);
  font-weight: 700;
}

.passo__titulo {
  font-size: 1.125rem;
  font-weight: 600;
}

.passo__texto {
  margin-bottom: 0;
  font-size: 1rem;
}

@media (min-width: 768px) {
  .passos {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Produto em destaque */

.produto__interno {
  display: grid;
  gap: var(--esp-7);
  align-items: center;
}

.produto__figura {
  margin: 0;
}

.produto__imagem {
  display: block;
  width: auto;
  max-height: 320px;
  margin-inline: auto;
}

@media (min-width: 1024px) {
  .produto__interno {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  }

  .produto__imagem {
    max-height: 420px;
  }
}

/* Recursos do produto — lista de rótulo e descrição em fundo escuro (Fase 4).
   Reaproveitada na Fase 13 para a lista de guardas do ambiente (mesmo par
   rótulo/descrição, também sobre fundo azul). */

.recursos {
  display: grid;
  gap: var(--esp-6) var(--esp-7);
  margin: var(--esp-7) 0 0;
}

.recurso__titulo {
  margin-bottom: var(--esp-1);
  color: var(--cor-azul-300);
  font-size: 1.125rem;
  font-weight: 600;
}

.recurso__texto {
  margin: 0;
  color: var(--cor-texto-claro);
  font-size: 1rem;
}

@media (min-width: 768px) {
  .recursos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Temas de funcionalidades (Fase 13) — cartão por tema, com o resumo e a lista
   de capacidades. O fundo claro vem da seção e a lista usa marcadores porque
   cada capacidade é lida item por item. */

.topicos {
  display: grid;
  gap: var(--esp-5);
  margin: var(--esp-7) 0 0;
  padding: 0;
  list-style: none;
}

.topico {
  padding: var(--esp-5);
  border: 1px solid var(--cor-borda-100);
  border-radius: var(--raio-m);
  background: var(--cor-branco);
  box-shadow: var(--sombra-1);
}

.topico__titulo {
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  font-weight: 600;
}

.topico__resumo {
  font-size: 1rem;
}

.topico__itens {
  display: grid;
  gap: var(--esp-2);
  margin: 0;
  padding-left: var(--esp-5);
  font-size: 0.9375rem;
}

@media (min-width: 1024px) {
  .topicos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Tabela de planos e observações das assinaturas (Fase 5; lidas da API na
   Fase 14). A tabela é montada no navegador a partir da resposta da API
   pública do aplicativo; sem resposta conferida ela não existe. */

.secao__subtitulo {
  margin: var(--esp-7) 0 var(--esp-3);
  color: var(--cor-texto-900);
  font-size: clamp(1.1875rem, 1rem + 0.6vw, 1.5rem);
  font-weight: 700;
}

.tabela-planos {
  width: 100%;
  margin-block: var(--esp-6);
  border: 1px solid var(--cor-borda-100);
  border-collapse: separate;
  border-spacing: 0;
  border-radius: var(--raio-m);
  background: var(--cor-branco);
  text-align: left;
}

.tabela-planos__legenda {
  padding: var(--esp-4) var(--esp-5);
  color: var(--cor-texto-900);
  font-size: 0.9375rem;
  font-weight: 600;
  text-align: left;
}

.tabela-planos__coluna,
.tabela-planos__plano,
.tabela-planos__celula {
  padding: var(--esp-4) var(--esp-5);
  border-top: 1px solid var(--cor-borda-100);
  vertical-align: top;
}

.tabela-planos__coluna {
  background: var(--cor-clara-100);
  color: var(--cor-texto-900);
  font-size: 0.9375rem;
  font-weight: 700;
}

.tabela-planos__linha:nth-child(even) .tabela-planos__plano,
.tabela-planos__linha:nth-child(even) .tabela-planos__celula {
  background: var(--cor-clara-100);
}

.tabela-planos__nome {
  display: block;
  font-size: 1.0625rem;
  font-weight: 700;
}

.tabela-planos__acao {
  display: inline-flex;
  align-items: center;
  min-height: var(--toque-min);
}

/* Rótulo de cada célula: escondido no desktop, onde o cabeçalho da coluna faz
   esse papel; visível no celular, onde a tabela vira cartões por plano. */
.tabela-planos__rotulo {
  display: none;
}

.notas {
  display: grid;
  gap: var(--esp-2);
  margin: 0;
  padding-left: var(--esp-5);
  color: var(--cor-texto-900);
  font-size: 0.9375rem;
}

/* Estado da leitura, falha, lista vazia e origem dos valores (Fase 14).
   O script esconde estes elementos com [hidden]: nenhuma regra aqui declara
   "display", para que o atributo continue valendo. */

.planos__texto,
.planos__origem {
  margin: var(--esp-4) 0 0;
  color: var(--cor-texto-900);
  font-size: 0.9375rem;
}

.planos__origem {
  font-size: 0.875rem;
}

[data-planos-falha] .acoes {
  margin-top: var(--esp-4);
}

@media (max-width: 767px) {
  .tabela-planos,
  .tabela-planos__linha,
  .tabela-planos__plano,
  .tabela-planos__celula {
    display: block;
    width: auto;
  }

  .tabela-planos {
    margin-block: var(--esp-5);
    border: 0;
    background: transparent;
  }

  .tabela-planos__cabecalho {
    display: none;
  }

  .tabela-planos__legenda {
    padding: 0 0 var(--esp-4);
  }

  .tabela-planos__linha {
    margin-bottom: var(--esp-5);
    padding: var(--esp-5);
    border: 1px solid var(--cor-borda-100);
    border-radius: var(--raio-m);
    background: var(--cor-branco);
  }

  .tabela-planos__linha:nth-child(even) .tabela-planos__plano,
  .tabela-planos__linha:nth-child(even) .tabela-planos__celula {
    background: transparent;
  }

  .tabela-planos__plano,
  .tabela-planos__celula {
    padding: 0;
    border-top: 0;
  }

  .tabela-planos__celula {
    margin-top: var(--esp-3);
    padding-top: var(--esp-3);
    border-top: 1px solid var(--cor-borda-100);
  }

  .tabela-planos__rotulo {
    display: block;
    margin-bottom: var(--esp-1);
    color: var(--cor-azul-600);
    font-size: 0.875rem;
    font-weight: 700;
  }
}

/* Fatos do site e ficha de rótulo/valor — página de privacidade (Fase 6)
   A lista de fatos só existe quando conteudo/privacidade.json declara que o
   fato é verdadeiro (e o validador confere a declaração no artefato); a ficha
   apresenta os dados institucionais fornecidos pelo responsável. */

.fatos {
  display: grid;
  gap: var(--esp-3);
  margin: var(--esp-5) 0 0;
  padding: 0;
  list-style: none;
}

.fatos__item {
  position: relative;
  padding-left: var(--esp-6);
  color: var(--cor-texto-900);
  font-size: 1rem;
}

.fatos__item::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--cor-azul-600);
  font-weight: 700;
}

.ficha {
  display: grid;
  gap: var(--esp-1) var(--esp-5);
  margin: var(--esp-5) 0 0;
}

.ficha__termo {
  color: var(--cor-texto-900);
  font-size: 0.875rem;
  font-weight: 700;
}

.ficha__dado {
  margin: 0;
  color: var(--cor-texto-900);
}

@media (min-width: 768px) {
  .ficha {
    grid-template-columns: minmax(0, 0.35fr) minmax(0, 0.65fr);
  }

  /* Dentro do cartão a ficha fica em uma coluna: o cartão é estreito e o
     rótulo precisa continuar colado ao valor que ele nomeia. */
  .cartao .ficha {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Perguntas frequentes */

.acordeao {
  display: grid;
  gap: var(--esp-3);
}

.acordeao__item {
  border: 1px solid var(--cor-borda-100);
  border-radius: var(--raio-p);
  background: var(--cor-branco);
}

.acordeao__pergunta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-4);
  min-height: var(--toque-min);
  padding: var(--esp-4) var(--esp-5);
  font-size: 1.0625rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.acordeao__pergunta::-webkit-details-marker {
  display: none;
}

.acordeao__pergunta::after {
  content: "Mostrar";
  color: var(--cor-azul-600);
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
}

.acordeao__item[open] .acordeao__pergunta::after {
  content: "Ocultar";
}

.acordeao__resposta {
  margin: 0;
  padding: 0 var(--esp-5) var(--esp-4);
  font-size: 1rem;
}

/* Rodapé */

.rodape {
  padding-block: var(--esp-7);
  background: var(--cor-preto-900);
  color: var(--cor-texto-claro);
}

.rodape__interno {
  display: grid;
  gap: var(--esp-7);
}

.marca--rodape {
  margin: 0 0 var(--esp-3);
  color: var(--cor-branco);
  font-family: var(--fonte-marca);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1;
}

.rodape__frase {
  font-size: 0.9375rem;
}

.rodape__navegacao {
  display: grid;
  gap: var(--esp-6);
}

.rodape__titulo {
  color: var(--cor-azul-300);
  font-size: 1rem;
}

.rodape__lista {
  margin: 0;
  padding: 0;
  list-style: none;
}

.rodape__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--toque-min);
  color: var(--cor-texto-claro);
  text-decoration: none;
}

.rodape__link:hover {
  text-decoration: underline;
}

@media (min-width: 768px) {
  .rodape__interno {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: var(--esp-8);
  }

  .rodape__navegacao {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .rodape__navegacao {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Aviso de independência e atribuição de marcas: texto pequeno e discreto,
   dentro do rodapé, longe dos blocos de navegação. */

.rodape__aviso {
  padding-top: var(--esp-5);
  border-top: 1px solid rgba(214, 226, 242, 0.25);
}

.rodape__aviso-texto {
  margin: 0 0 var(--esp-3);
  font-size: 0.8125rem;
  line-height: 1.5;
}

.rodape__aviso-texto:last-child {
  margin-bottom: 0;
}

/* Página de erro — fundo claro, portanto sem as cores do título de abertura */

.pagina-erro {
  padding-block: var(--esp-secao);
  background: var(--cor-clara-100);
}

.pagina-erro__titulo {
  color: var(--cor-texto-900);
  font-size: clamp(1.875rem, 1.4rem + 1.6vw, 2.75rem);
  font-weight: 700;
  line-height: 1.1;
}

.pagina-erro__apoio {
  color: var(--cor-texto-900);
  font-size: 0.9375rem;
}

/* Movimento reduzido: nenhuma animação obrigatória */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}