/* Estilos institucionais da 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). */
.cabecalho__acoes {
  grid-area: acoes;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-3);
}

.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. */
.acesso__estado {
  flex-basis: 100%;
  margin: 0;
  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. */
@media (max-width: 1023px) {
  html.tem-js .acesso {
    flex-basis: 100%;
  }

  .acesso__estado {
    order: 3;
  }
}

.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;
}

/* No celular os botões ocupam a largura da coluna; no desktop voltam ao tamanho
   natural, para que um único botão de chamada não se estique pela seção toda. */
@media (min-width: 768px) {
  .acoes .botao {
    flex: 0 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;
}

.produto__legenda {
  margin-top: var(--esp-3);
  color: var(--cor-texto-claro);
  font-size: 0.9375rem;
  text-align: center;
}

@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;
}

/* Bloco "sobre" com o mascote Müller — reaproveita a linguagem visual da
   seção de produto do projeto de referência. */

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

.sobre__figura {
  margin: 0;
}

.sobre__imagem {
  display: block;
  width: auto;
  max-height: 300px;
  margin-inline: auto;
}

.sobre__legenda {
  margin-top: var(--esp-3);
  color: var(--cor-texto-claro);
  font-size: 0.9375rem;
  text-align: center;
}

@media (min-width: 1024px) {
  .secao--azul .sobre__interno,
  .sobre__interno--texto-primeiro {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  }

  .sobre__imagem {
    max-height: 380px;
  }
}

/* Nuvem de tecnologias: grupos com títulos e listas de etiquetas. */

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

.tecnologias__grupo {
  min-width: 0;
}

.tecnologias__titulo {
  margin-bottom: var(--esp-3);
  color: var(--cor-texto-900);
  font-size: 1.125rem;
  font-weight: 700;
}

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

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

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

/* Etiquetas de tecnologia. */

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.tag {
  display: inline-flex;
  align-items: center;
  padding: var(--esp-1) var(--esp-3);
  border: 1px solid var(--cor-borda-100);
  border-radius: 999px;
  background: var(--cor-clara-100);
  color: var(--cor-texto-900);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.4;
}

.secao--azul .tag,
.secao--escura .tag {
  border-color: rgba(96, 165, 250, 0.5);
  background: rgba(37, 99, 235, 0.18);
  color: var(--cor-branco);
}

/* Bloco de contato: e-mail em destaque como endereço real. */

.contato__email {
  display: inline-block;
  margin-top: var(--esp-3);
  font-size: clamp(1.125rem, 1rem + 0.6vw, 1.5rem);
  font-weight: 700;
  word-break: break-word;
}

/* 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;
  }
}

/* Identidade institucional: composição clara, escala discreta e retrato independente. */
.cabecalho { background: #fff; color: var(--cor-texto-900); border-bottom: 1px solid var(--cor-borda-100); }
.cabecalho .marca, .cabecalho .navegacao__link, .cabecalho__acionador, .idiomas__acionador { color: var(--cor-texto-900); }
.cabecalho .marca { font: 400 1.35rem var(--fonte-marca); letter-spacing: normal; }
.cabecalho__interno { padding-block: 18px; }
.cabecalho .botao--registro { background: var(--cor-azul-600); color: white; box-shadow: none; }
.navegacao__lista { justify-content: flex-end; }
.navegacao__link, .botao { font-size: .875rem; }
.abertura { background: #f3f5f3; color: var(--cor-texto-900); padding-block: 48px; border-bottom: 1px solid var(--cor-borda-100); }
.abertura--com-arte { display: block; min-height: 0; }
.abertura--com-arte::after { display: none; }
.abertura--com-arte .abertura__interno { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 64px; }
.abertura--com-arte .abertura__texto { max-width: 38rem; }
.abertura__titulo { font-size: clamp(1.5rem, 1.15rem + 1vw, 2rem); line-height: 1.35; color: var(--cor-texto-900); font-weight: 600; }
.abertura__resumo, .secao__texto { font-size: 1rem; color: inherit; }
.etiqueta { border: 0; border-radius: 0; padding: 0; color: var(--cor-azul-600); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; }
.apoio { color: #56666c; font-size: .8125rem; }
.abertura__retrato { margin: 0; background: #e4eae6; border-bottom: 3px solid var(--cor-azul-600); overflow: hidden; }
.abertura__retrato img { display: block; width: 100%; height: 310px; object-fit: contain; object-position: bottom; padding-top: 12px; }
.botao--secundario-claro { color: var(--cor-azul-600); border-color: var(--cor-azul-600); }
.secao__titulo { font-size: 1.375rem; line-height: 1.4; font-weight: 600; }
.secao--azul, .secao--escura { background: #edf1ef; color: var(--cor-texto-900); border-block: 1px solid var(--cor-borda-100); }
.secao--azul .secao__titulo, .secao--escura .secao__titulo, .secao--azul .tecnologias__titulo, .secao--escura .tecnologias__titulo { color: var(--cor-texto-900); }
.cartoes { gap: 0; border-top: 1px solid var(--cor-borda-100); }
.cartao { border: 0; border-bottom: 1px solid var(--cor-borda-100); border-radius: 0; box-shadow: none; padding: 24px 24px 24px 0; background: transparent; }
.cartao__titulo, .topico__titulo, .passo__titulo, .tecnologias__titulo { font-size: 1rem; }
.cartao__texto, .passo__texto, .topico__resumo { font-size: .9375rem; }
.topico { box-shadow: none; border-radius: 0; }
.tag, .secao--azul .tag, .secao--escura .tag { background: #fff; color: var(--cor-texto-900); border: 1px solid var(--cor-borda-100); border-radius: 3px; font-size: .8125rem; }
.sobre__imagem { max-height: 240px; width: auto; margin-inline: auto; }
.contato__email { font-size: 1.125rem; }
.pagina-erro__titulo { font-size: 2rem; }
.rodape { background: #263338; }
.rodape .marca { font: 400 1.35rem var(--fonte-marca); }
.cabecalho :focus-visible, .abertura :focus-visible, .secao--azul :focus-visible, .secao--escura :focus-visible { outline-color: var(--cor-foco); }
@media (max-width: 767px) {
  .abertura--com-arte .abertura__interno { grid-template-columns: 1fr; gap: 24px; }
  .abertura__retrato { width: 100%; max-width: 340px; justify-self: center; }
  .abertura__retrato img { height: 250px; }
  .abertura { padding-block: 32px; }
  .navegacao__lista { justify-content: flex-start; }
}

.produto { background: #fff; border-block: 1px solid var(--cor-borda-100); }
.produto__interno { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.produto .etiqueta { margin-bottom: 8px; }
.produto .secao__titulo { margin-bottom: 8px; }
.produto .secao__texto { margin-bottom: 0; }
.produto .botao { flex-shrink: 0; }
@media (max-width: 767px) { .produto__interno { flex-direction: column; align-items: flex-start; } }

/* O nome da marca mantém a identidade tipográfica em qualquer texto. */
.marca-texto {
  font-family: var(--fonte-marca);
  font-weight: 400;
  font-style: normal;
  font-synthesis: none;
  letter-spacing: normal;
  text-transform: none;
}