:root {
  --naval: #071f46;
  --naval-profundo: #030f22;
  --naval-claro: #12305f;
  --papel: #fbf8f1;
  --creme: #f4efe6;
  --branco: #fffdf8;
  --cobre: #925f39;
  --cobre-claro: #c58a5c;
  --oliva: #59624e;
  --alerta: #a4382f;
  --texto: #071f46;
  --texto-suave: #5f6470;
  --borda: rgba(146, 95, 57, 0.24);
  --faixa: 76rem;
  --titulo: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --fonte-texto: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --curva: cubic-bezier(0.22, 0.61, 0.36, 1);
}

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

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

body {
  margin: 0;
  background: var(--papel);
  color: var(--texto);
  font-family: var(--fonte-texto);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

html[lang="zh"] body { font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif; }
html[lang="zh"] :is(h1, h2, .telas-texto h3) { font-family: "Noto Serif SC", "Songti SC", SimSun, serif; }

img { display: block; max-width: 100%; }
a { color: inherit; }
button, input { font: inherit; }

.faixa { width: min(calc(100% - 2.5rem), var(--faixa)); margin-inline: auto; }

.pular { position: fixed; left: -9999px; top: 1rem; z-index: 100; }
.pular:focus { left: 1rem; padding: 0.75rem 1rem; background: var(--papel); color: var(--naval); border-radius: 0.5rem; }

/* Navegacao */
.topo {
  position: fixed;
  inset: 0 0 auto;
  z-index: 20;
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,0.14);
  background: rgba(3, 15, 34, 0.34);
  backdrop-filter: blur(14px);
  transition: background 240ms var(--curva), box-shadow 240ms var(--curva), border-color 240ms var(--curva);
}
.topo.rolou { background: rgba(3,15,34,0.9); border-bottom-color: rgba(197,138,92,0.28); box-shadow: 0 14px 34px -28px rgba(0,0,0,0.85); }

.topo-faixa { min-height: 4.75rem; display: flex; align-items: center; gap: 2rem; }
.marca { display: inline-flex; align-items: center; gap: 0.65rem; text-decoration: none; font: 700 1.45rem/1 var(--titulo); }
.marca img { width: 1.8rem; height: 1.8rem; }
.menu { display: flex; align-items: center; gap: 1.6rem; margin-inline-start: auto; font-size: 0.86rem; }
.menu a { text-decoration: none; padding-block: 0.25rem; border-bottom: 1px solid transparent; opacity: 0.82; }
.menu a:hover, .menu a:focus-visible { opacity: 1; border-bottom-color: var(--cobre-claro); }

.seletor-idioma { position: relative; flex: 0 0 auto; }
.seletor-idioma summary {
  display: flex; align-items: center; gap: 0.48rem; min-height: 2.6rem; padding: 0.5rem 0.7rem;
  border: 1px solid rgba(255,255,255,0.34); border-radius: 0.62rem; cursor: pointer;
  color: #fff; background: rgba(3,15,34,0.28); font-size: 0.78rem; font-weight: 800;
}
.seletor-idioma summary:hover, .seletor-idioma[open] summary { border-color: var(--cobre-claro); background: rgba(3,15,34,0.7); }
.seletor-idioma summary img { width: 1.2rem; height: 1.2rem; filter: brightness(0) invert(1); }
.seletor-idioma .idiomas {
  position: absolute; z-index: 40; top: calc(100% + 0.55rem); right: 0; display: grid; min-width: 10.5rem;
  padding: 0.45rem; border: 1px solid var(--borda); border-radius: 0.75rem; color: var(--naval);
  background: rgba(255,253,248,0.98); box-shadow: 0 20px 45px -25px rgba(3,15,34,0.72); backdrop-filter: blur(14px);
}
.seletor-idioma .idioma { padding: 0.55rem 0.7rem; border-radius: 0.45rem; text-decoration: none; }
.seletor-idioma a.idioma:hover, .seletor-idioma a.idioma:focus-visible { background: var(--creme); }
.seletor-idioma .idioma.atual { color: var(--cobre); background: rgba(146,95,57,0.08); }

.botao {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 3rem;
  padding: 0.75rem 1.35rem;
  border: 1px solid transparent;
  border-radius: 0.62rem;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.9rem;
  transition: transform 180ms var(--curva), background 180ms var(--curva), border-color 180ms var(--curva);
}
.botao:hover { transform: translateY(-2px); }
.botao:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.botao-cobre { background: var(--cobre); color: #fff; box-shadow: 0 12px 30px -18px rgba(197,138,92,0.75); }
.botao-cobre:hover { background: #a66b40; }
.botao-vazado-claro { color: #fff; border-color: rgba(255,255,255,0.46); background: rgba(3,15,34,0.18); }
.botao-vazado-claro:hover { border-color: #fff; background: rgba(3,15,34,0.44); }
.botao-topo { min-height: 2.65rem; margin-inline-start: 0; white-space: nowrap; }

/* Hero */
.heroi {
  position: relative;
  min-height: min(62rem, 100svh);
  overflow: hidden;
  color: #fff;
  background: var(--naval-profundo);
}
.heroi-imagem {
  /*
    IMPRIME O FUNDO. Sem isto o navegador descarta imagem de fundo ao imprimir
    ou exportar PDF, e o heroi — que carrega a mensagem inteira — sai VAZIO.

    Encontrado pelo owner: ele exportou a pagina em PDF e o herói veio em
    branco, enquanto no navegador estava correto. Nao muda nada na tela.
  */
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;

  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(90deg, rgba(3,15,34,0.96) 0%, rgba(3,15,34,0.78) 28%, rgba(3,15,34,0.08) 58%, rgba(3,15,34,0.02) 100%),
    url("/marca/ciclo-vivo/heroi-patio-showroom.png");
  background-size: cover;
  background-position: center;
  transform: translate3d(0, var(--rolagem-heroi, 0), 0) scale(1.06);
  animation: heroi-respira 16s ease-in-out infinite alternate;
  will-change: transform;
}
/*
  O ESCURECIMENTO PRECISA ACOMPANHAR A LARGURA, e nao ser fixo.

  Defeito medido a 820px: o gradiente do heroi apaga em 58% da largura, mas a
  coluna de texto tem 34rem (544px). Em telas entre ~700px e ~1080px o texto
  passava de 476px e caia em cima da pedra CLARA — "Venda em movimento." e o
  paragrafo inteiro ficavam brancos sobre bege, ilegiveis.

  Apareceu quando o owner exportou a pagina em PDF (largura de A4, ~820px) e
  mandou o arquivo. No desktop e no celular o texto sempre teve fundo escuro;
  a faixa do meio era a unica quebrada, e ninguem olha a faixa do meio.
*/
@media (max-width: 68rem) {
  .heroi-imagem {
    background-image:
      linear-gradient(90deg, rgba(3,15,34,0.97) 0%, rgba(3,15,34,0.93) 46%, rgba(3,15,34,0.7) 72%, rgba(3,15,34,0.15) 100%),
      url("/marca/ciclo-vivo/heroi-patio-showroom.png");
  }
}
@media (max-width: 44rem) {
  /* No celular a imagem quase nao aparece atras do texto; o escurecimento
     vertical preserva o rodape da foto em vez de apagar tudo. */
  .heroi-imagem {
    background-image:
      linear-gradient(180deg, rgba(3,15,34,0.96) 0%, rgba(3,15,34,0.93) 55%, rgba(3,15,34,0.72) 100%),
      url("/marca/ciclo-vivo/heroi-patio-showroom.png");
  }
}

.heroi-conteudo { position: relative; z-index: 2; min-height: min(54rem, calc(100svh - 7rem)); display: grid; align-items: center; padding-block: 8rem 5rem; }
.heroi-texto { max-width: 34rem; }
.sobrancelha { margin: 0 0 1rem; color: var(--cobre-claro); text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.72rem; font-weight: 800; }
.heroi h1, .etapa h2, .integracao h2, .raio-x h2, .telas h2 {
  margin: 0;
  font-family: var(--titulo);
  font-weight: 600;
  letter-spacing: -0.025em;
}
.heroi h1 { max-width: 15ch; font-size: clamp(2.8rem, 4.6vw, 4.75rem); line-height: 1.01; text-wrap: balance; }
.heroi .chamada { max-width: 34rem; color: rgba(255,255,255,0.82); }
.chamada { margin: 1.4rem 0 0; max-width: 56ch; color: var(--texto-suave); font-size: 1.03rem; }
.acoes { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 2rem; }
.garantia { margin: 1.35rem 0 0; max-width: 31rem; color: rgba(255,255,255,0.68); font-size: 0.82rem; }

.ficha-material { display: inline-flex; align-items: center; gap: 0.7rem; margin-bottom: 1.6rem; }
.ficha-material > span:last-child { display: grid; }
.ficha-material strong { font-family: var(--titulo); font-size: 1rem; }
.ficha-material small { color: inherit; opacity: 0.68; font-size: 0.74rem; }
.amostra {
  width: 2.4rem; height: 2.4rem; flex: 0 0 auto; border-radius: 50%;
  background: url("/marca/ciclo-vivo/dolomita-cristal.png") 62% 48% / 420% auto;
  border: 1px solid rgba(197,138,92,0.7);
  box-shadow: 0 5px 15px -8px #000;
}
.heroi .ficha-material { color: var(--cobre-claro); }

.heroi-trilho { position: absolute; z-index: 3; left: 0; right: 0; bottom: 1.4rem; }
.trilho { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); background: rgba(3,15,34,0.72); border: 1px solid rgba(197,138,92,0.5); border-radius: 0.75rem; backdrop-filter: blur(10px); overflow: hidden;
  /*
    ROLA NA HORIZONTAL QUANDO NAO CABE.

    Medido no navegador a 390px: o trilho tinha `overflow-x: hidden`, conteudo
    de 654px e a etapa "05 Aprende" terminando em 667px — fora da janela, SEM
    como chegar nela. Metade do ciclo simplesmente nao existia no celular, e
    "o trilho navega entre as etapas" e interacao obrigatoria no doc de
    direcao.

    `scroll-snap` faz a etapa parar alinhada em vez de meio cortada, e a
    mascara nas bordas avisa que ha mais coisa para o lado — sem isso o usuario
    nao descobre que da para arrastar.
  */
  /*
    `max-width: 100%` E O QUE FAZ O `overflow-x` VALER.

    Sem ele o proprio trilho media 654px numa janela de 390 — nao havia
    container para rolar, ele so transbordava o pai. Medido: `clientWidth` 654,
    `scrollWidth` 654, e a ultima etapa em 667px continuava inalcancavel mesmo
    com `overflow-x: auto`.
  */
  max-width: 100%;
  overflow-x: auto;
  scroll-snap-type: x proximate;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
}
.trilho-etapa { position: relative; display: flex; align-items: center; gap: 0.6rem; min-height: 3.8rem; padding: 0.7rem 1rem; text-decoration: none; font-size: 0.8rem; font-weight: 700; }
.trilho-etapa:not(:last-child) { border-inline-end: 1px solid rgba(255,255,255,0.12); }
.trilho-etapa span { color: var(--cobre-claro); font-size: 0.65rem; letter-spacing: 0.08em; }
.trilho::after { content: ""; position: absolute; inset: auto 0 0; height: 2px; background: linear-gradient(90deg, transparent, var(--cobre-claro), transparent); animation: trilho-vivo 5.5s ease-in-out infinite; }
.trilho-etapa:hover { background: rgba(146,95,57,0.22); }

/* O fio que acompanha o mesmo material */
.ciclo { position: relative; overflow: hidden; }
.ciclo-linha { position: absolute; z-index: 3; top: 0; bottom: 0; left: max(1.25rem, calc((100% - var(--faixa)) / 2 - 2.2rem)); width: 2px; background: rgba(146,95,57,0.18); }
.ciclo-linha::after { content: ""; position: absolute; inset: 0 0 auto; height: var(--progresso-ciclo, 0%); background: linear-gradient(var(--cobre-claro), var(--cobre)); box-shadow: 0 0 18px rgba(197,138,92,0.55); transition: height 120ms linear; }
.etapa { position: relative; padding-block: clamp(5.5rem, 8vw, 8.5rem); border-bottom: 1px solid var(--borda); }
.etapa::before { content: ""; position: absolute; z-index: 4; top: 7.1rem; left: max(0.94rem, calc((100% - var(--faixa)) / 2 - 2.5rem)); width: 0.9rem; height: 0.9rem; border-radius: 50%; background: var(--papel); border: 3px solid var(--cobre); }
.etapa-grade { display: grid; grid-template-columns: minmax(18rem, 0.72fr) minmax(30rem, 1.28fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.etapa-copy { position: relative; z-index: 2; }
.palavra-fundo {
  position: absolute; z-index: 0; top: 1rem; left: 50%; transform: translateX(-47%);
  color: var(--naval); opacity: 0.025; font: 600 clamp(5rem, 15vw, 13rem)/1 var(--titulo);
  letter-spacing: -0.06em; white-space: nowrap; pointer-events: none;
  transition: transform 1.15s var(--curva), opacity 1.15s var(--curva);
}
.etapa.etapa-ativa .palavra-fundo { transform: translateX(-53%); opacity: 0.055; }
.etapa-numero { display: block; margin-bottom: 2rem; color: var(--cobre); font: 500 1rem/1 var(--titulo); letter-spacing: 0.08em; }
.etapa h2, .integracao h2, .raio-x h2 { font-size: clamp(2.4rem, 4.4vw, 4.65rem); line-height: 1.03; text-wrap: balance; }
.etapa-copy .ficha-material { margin: 2rem 0 0; color: var(--cobre); }

/* Recomendacao */
.etapa-recomendacao { background: var(--papel); }
.pedra-recomendacao { position: relative; min-width: 0; }
.pedra-recomendacao > img { width: 100%; aspect-ratio: 3/2; object-fit: cover; border-radius: 1.15rem; box-shadow: 0 26px 60px -40px rgba(7,31,70,0.55); }
.cartao-recomendacao {
  position: absolute; right: clamp(1rem, 4vw, 3rem); bottom: clamp(1rem, 4vw, 3rem); width: min(23rem, calc(100% - 2rem));
  padding: 1.35rem; border: 1px solid rgba(146,95,57,0.36); border-radius: 0.9rem;
  background: rgba(255,253,248,0.92); backdrop-filter: blur(14px); box-shadow: 0 22px 60px -35px rgba(7,31,70,0.65);
}
.etapa-ativa .cartao-recomendacao { animation: cartao-flutua 4.8s ease-in-out infinite; }
.cartao-topo { display: grid; gap: 0.35rem; }
.cartao-topo span { color: var(--cobre); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 800; }
.cartao-topo strong { font: 600 1.45rem/1.15 var(--titulo); }
.cartao-recomendacao > p { margin: 0.85rem 0 1.1rem; color: var(--texto-suave); font-size: 0.83rem; }
.cartao-recomendacao dl { display: grid; grid-template-columns: 1fr 1.25fr; margin: 0; border-top: 1px solid var(--borda); }
.cartao-recomendacao dl div { padding-top: 0.9rem; }
.cartao-recomendacao dt { color: var(--texto-suave); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.08em; }
.cartao-recomendacao dd { margin: 0.2rem 0 0; font-size: 0.8rem; font-weight: 700; }

/* Etapa 02 — a oferta que o cliente abre (substitui o Showroom, apagado do produto em 10/10) */
.etapa-oferta { background: var(--creme); }
.oferta-grade { grid-template-columns: minmax(18rem, 0.82fr) minmax(0, 1.18fr); }
.oferta-pontos { display: grid; gap: 0.55rem; padding: 0; margin: 1.8rem 0 0; list-style: none; }
.oferta-pontos li { position: relative; padding-inline-start: 1.5rem; color: var(--texto); font-size: 0.88rem; font-weight: 600; }
.oferta-pontos li::before { content: "✓"; position: absolute; inset-inline-start: 0; color: var(--oliva); font-weight: 800; }

/* Moldura dos prints do app: uma janela de navegador, para ler como tela e nao como ilustracao */
.janela { min-width: 0; margin: 0; overflow: hidden; border: 1px solid rgba(7,31,70,0.14); border-radius: 0.9rem; background: var(--branco); box-shadow: 0 30px 70px -46px rgba(7,31,70,0.75); }
.janela-barra { display: flex; align-items: center; gap: 0.4rem; height: 2.1rem; padding-inline: 0.85rem; background: #eceae4; border-bottom: 1px solid rgba(7,31,70,0.1); }
.janela-barra i { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: rgba(7,31,70,0.18); }
.janela-barra span { margin-inline-start: 0.6rem; padding: 0.15rem 0.75rem; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,0.8); color: var(--texto-suave); font-size: 0.68rem; white-space: nowrap; text-overflow: ellipsis; }
.janela img { width: 100%; height: auto; }
.janela > a { display: block; cursor: zoom-in; }
.janela > a:focus-visible { outline: 3px solid var(--cobre-claro); outline-offset: -3px; }
.janela figcaption { padding: 0.55rem 0.95rem; border-top: 1px solid rgba(7,31,70,0.08); color: var(--texto-suave); font-size: 0.7rem; }

/* Chat */
.etapa-chat { background: var(--papel); }
.etapa-chat .etapa-copy { max-width: 54rem; margin-bottom: 3rem; }
.chat-demo { display: grid; grid-template-columns: 1fr 8rem 1fr; gap: 1.25rem; align-items: center; }
.chat-coluna { min-height: 24rem; padding: 1.4rem; border: 1px solid var(--borda); border-radius: 1rem; background: rgba(255,255,255,0.68); box-shadow: 0 18px 50px -38px rgba(7,31,70,0.55); }
.chat-cliente { background: rgba(89,98,78,0.08); }
.chat-rotulo { margin: 0 0 1.5rem; color: var(--texto-suave); font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; }
.mensagem { display: grid; gap: 0.6rem; max-width: 87%; padding: 1rem; border-radius: 0.85rem; font-size: 0.88rem; line-height: 1.5; box-shadow: 0 10px 26px -22px rgba(7,31,70,0.7); }
.mensagem small { color: var(--texto-suave); text-align: end; font-size: 0.64rem; }
.mensagem-casa { margin-inline-start: auto; background: var(--branco); border: 1px solid rgba(7,31,70,0.1); }
.mensagem-cliente { margin-inline-start: auto; background: #e5ebdd; }
.mensagem-resposta { margin-top: 1rem; background: var(--branco); border: 1px solid rgba(7,31,70,0.1); }
.chat-transferencia { display: grid; justify-items: center; gap: 0.45rem; color: var(--cobre); text-align: center; }
.chat-transferencia span { font-size: 0.72rem; font-weight: 800; }
.chat-transferencia b { font: 400 2.3rem/1 var(--titulo); }
.etapa-ativa .chat-transferencia b { animation: pulso-transferencia 1.8s ease-in-out infinite; }
.chat-idiomas { display: flex; gap: 0.45rem; margin-top: 2rem; }
.idioma-chat { min-width: 3.1rem; min-height: 2.4rem; border: 1px solid var(--borda); border-radius: 999px; background: transparent; color: var(--naval); cursor: pointer; font-weight: 800; }
.idioma-chat.ativo { background: var(--naval); color: #fff; border-color: var(--naval); }
.chat-cliente .mensagem { transition: opacity 220ms var(--curva), transform 220ms var(--curva); }
.chat-demo.mudando .chat-cliente .mensagem { opacity: 0.18; transform: translateX(0.7rem); }
.resultado-chat { display: inline-flex; margin-top: 1.2rem; padding: 0.4rem 0.7rem; border-radius: 999px; background: var(--cobre); color: #fff; font-size: 0.7rem; font-weight: 800; }
.visibilidade { margin: 1.5rem 0 0; color: var(--texto-suave); text-align: center; font-size: 0.82rem; }

/* Aprendizado e retorno */
.etapa-aprende { color: #fff; background: var(--naval-profundo); border-bottom: 0; }
.etapa-aprende::before { background: var(--naval-profundo); }
.etapa-aprende .palavra-fundo { color: #fff; }
.aprende-grade { display: grid; grid-template-columns: 1fr minmax(18rem, 0.65fr); gap: clamp(3rem, 8vw, 7rem); align-items: center; }
.etapa-aprende .chamada { color: rgba(255,255,255,0.68); }
.sinais { display: grid; gap: 0; padding: 0; margin: 2.3rem 0 0; list-style: none; border-top: 1px solid rgba(255,255,255,0.14); }
.sinais li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.9rem 0; border-bottom: 1px solid rgba(255,255,255,0.14); }
.sinais span { color: rgba(255,255,255,0.62); font-size: 0.78rem; }
.sinais strong { color: var(--cobre-claro); font-size: 0.82rem; }
.proxima-recomendacao { position: relative; display: grid; gap: 0.7rem; padding: 2rem; border: 1px solid var(--cobre); border-radius: 1rem; background: rgba(18,48,95,0.55); box-shadow: 0 0 50px -24px rgba(197,138,92,0.8); }
.proxima-recomendacao::before { content: ""; position: absolute; inset: -3rem -2rem; border: 1px solid rgba(197,138,92,0.2); border-radius: 50%; pointer-events: none; }
.proxima-recomendacao p { margin: 0; color: var(--cobre-claro); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 800; }
.proxima-recomendacao strong { font: 600 1.8rem/1.1 var(--titulo); }
.proxima-recomendacao span { color: rgba(255,255,255,0.72); font-size: 0.86rem; }
.proxima-recomendacao small { margin-top: 0.7rem; padding-top: 0.8rem; border-top: 1px solid rgba(255,255,255,0.13); color: rgba(255,255,255,0.58); }
.retorno { position: relative; display: flex; justify-content: space-between; gap: 1.5rem; margin-top: 5rem; padding-top: 1.5rem; border-top: 1px solid var(--cobre); color: var(--cobre-claro); font: 500 1.05rem/1.3 var(--titulo); }
.retorno::after { content: "↗"; position: absolute; right: -0.2rem; top: -1.25rem; color: var(--cobre); font-size: 1.7rem; }
.retorno a { color: #fff; font-family: var(--fonte-texto); font-size: 0.75rem; font-weight: 800; text-decoration: none; text-transform: uppercase; letter-spacing: 0.08em; }

/* Etapa 04 — o painel do gerente */
.visualmente-oculto { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.etapa-acompanha { background: var(--creme); }
.etapa-acompanha .etapa-copy { max-width: 54rem; margin-bottom: 3rem; }
.painel-gerente { width: 100%; border-collapse: separate; border-spacing: 0; overflow: hidden; border: 1px solid var(--borda); border-radius: 1rem; background: var(--branco); box-shadow: 0 26px 52px -42px rgba(7,31,70,0.6); }
.painel-gerente thead th { padding: 0.85rem 1.15rem; text-align: start; background: rgba(146,95,57,0.07); border-bottom: 1px solid var(--borda); color: var(--texto-suave); font-size: 0.65rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.09em; }
.painel-linha > * { padding: 1.05rem 1.15rem; text-align: start; vertical-align: top; font-size: 0.85rem; font-weight: 400; color: var(--texto); border-bottom: 1px solid rgba(146,95,57,0.16); }
.painel-linha:last-child > * { border-bottom: 0; }
.painel-rotulo { display: none; }
.painel-vendedor { display: flex; align-items: center; gap: 0.5rem; font-weight: 800; }
.painel-vendedor i { flex: none; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--cobre); }
.painel-estado { display: block; margin-top: 0.28rem; padding-inline-start: 1.05rem; color: var(--texto-suave); font-size: 0.7rem; font-weight: 600; }
.estado-quente .painel-vendedor i { background: var(--oliva); }
.estado-aguarda .painel-vendedor i { background: var(--cobre-claro); }
.estado-parado .painel-vendedor i { background: var(--alerta); }
.painel-linha strong { font-weight: 800; }
.painel-acao { color: var(--cobre); font-weight: 800; }
.etapa-acompanha .visibilidade { margin-top: 1.6rem; }

/* A nova versao por dentro — prints reais da v2, uma tela por vez */
.telas { padding-block: clamp(5rem, 8vw, 8rem); background: var(--naval); color: #fff; border-bottom: 1px solid var(--borda); }
.telas .sobrancelha { color: var(--cobre-claro); }
.telas h2 { margin: 0; font-size: clamp(2.2rem, 4vw, 3.9rem); line-height: 1.05; text-wrap: balance; }
.telas-cabeca > p:not(.sobrancelha) { max-width: 62ch; margin: 1.2rem 0 0; color: rgba(255,255,255,0.74); }
.telas-abas { display: flex; gap: 0.5rem; max-width: 100%; margin: 2.6rem 0 1.8rem; padding-bottom: 0.2rem; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximate; }
.telas-aba { flex: none; min-height: 2.6rem; padding: 0.55rem 1.05rem; border: 1px solid rgba(197,138,92,0.5); border-radius: 999px; background: transparent; color: rgba(255,255,255,0.82); font-size: 0.8rem; font-weight: 700; cursor: pointer; scroll-snap-align: start; transition: background 200ms var(--curva), color 200ms var(--curva); }
.telas-aba:hover { background: rgba(146,95,57,0.22); }
.telas-aba[aria-selected="true"] { background: var(--cobre); border-color: var(--cobre); color: #fff; }
.telas-aba:focus-visible { outline: 2px solid var(--cobre-claro); outline-offset: 2px; }
.telas-painel { display: grid; grid-template-columns: minmax(16rem, 0.5fr) minmax(0, 1.5fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; animation: painel-entra 420ms var(--curva); }
.telas-painel[hidden] { display: none; }
.telas-papel { display: inline-block; padding: 0.3rem 0.7rem; border: 1px solid rgba(197,138,92,0.5); border-radius: 999px; color: var(--cobre-claro); font-size: 0.66rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.09em; }
.telas-texto h3 { margin: 1rem 0 0.8rem; font: 500 clamp(1.65rem, 2.6vw, 2.35rem)/1.1 var(--titulo); }
.telas-texto p { margin: 0; color: rgba(255,255,255,0.76); font-size: 0.92rem; }
.telas .janela { border-color: rgba(255,255,255,0.16); box-shadow: 0 34px 80px -40px rgba(0,0,0,0.85); }
.telas-legenda { margin: 1rem 0 0; color: rgba(255,255,255,0.56); font-size: 0.72rem; text-align: end; }
.telas-tambem-rotulo { margin: 2.6rem 0 0; color: var(--cobre-claro); font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; }
.telas-tambem { display: flex; flex-wrap: wrap; gap: 0.6rem; padding: 0; margin: 0.8rem 0 0; list-style: none; }
.telas-tambem li { padding: 0.42rem 0.85rem; border: 1px solid rgba(255,255,255,0.2); border-radius: 999px; color: rgba(255,255,255,0.88); font-size: 0.74rem; font-weight: 700; }
@keyframes painel-entra { from { opacity: 0; transform: translateY(0.5rem); } to { opacity: 1; transform: none; } }

/* Integracao e CTA */
.integracao { padding-block: 5rem; background: var(--creme); border-bottom: 1px solid var(--borda); }
.integracao-faixa { display: grid; grid-template-columns: 0.6fr 1fr; column-gap: 4rem; align-items: end; }
.integracao .sobrancelha { grid-column: 1 / -1; }
.integracao h2 { font-size: clamp(2.1rem, 3.8vw, 3.7rem); }
.integracao p:not(.sobrancelha) { margin: 0; color: var(--texto-suave); max-width: 58ch; }
.fontes-rotulo { grid-column: 1 / -1; margin: 2.2rem 0 0 !important; color: var(--cobre); font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; }
.integracao .fontes { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0.65rem; padding: 0; margin: 0.75rem 0 0; list-style: none; }
.integracao .fontes li { padding: 0.42rem 0.8rem; border: 1px solid var(--borda); border-radius: 999px; background: rgba(255,255,255,0.5); font-size: 0.72rem; font-weight: 800; }

/* A prova: de onde sai, como entra, o que chega */
.prova-integracao { margin-top: 3.2rem; }
.prova-rotulo { margin: 0 0 1.15rem; color: var(--cobre); font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; }
.prova-passos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; padding: 0; margin: 0; list-style: none; }
.prova-passos li { position: relative; padding: 1.45rem 1.5rem; border: 1px solid var(--borda); border-radius: 1rem; background: var(--branco); }
.prova-passos li:not(:last-child)::after { content: "\2192"; position: absolute; top: 50%; right: -0.92rem; z-index: 2; color: var(--cobre); font-size: 0.95rem; line-height: 1; transform: translateY(-50%); }
.prova-numero { display: block; margin-bottom: 0.7rem; color: var(--cobre-claro); font: 500 0.85rem/1 var(--titulo); letter-spacing: 0.08em; }
.prova-passos strong { display: block; font-size: 0.95rem; }
.prova-passos p { margin: 0.45rem 0 0 !important; color: var(--texto-suave); font-size: 0.82rem; }
.prova-fecho { margin: 1.35rem 0 0 !important; color: var(--texto-suave); font-size: 0.86rem; }

.raio-x { padding-block: clamp(5rem, 8vw, 8rem); background: var(--papel); }
.raio-x-grade { display: grid; grid-template-columns: 1fr 0.85fr; gap: clamp(3rem, 8vw, 7rem); align-items: start; }
.raio-x h2 { font-size: clamp(2.6rem, 5vw, 4.7rem); }
.raio-x p { max-width: 52ch; color: var(--texto-suave); }
.raio-x-acao { padding: 2rem; border: 1px solid var(--borda); border-radius: 1rem; background: var(--creme); }
.raio-x-acao ul { display: grid; gap: 0.75rem; padding: 0; margin: 0 0 1.6rem; list-style: none; }
.raio-x-acao li { padding-bottom: 0.75rem; border-bottom: 1px solid rgba(146,95,57,0.18); font-size: 0.86rem; font-weight: 700; }
.raio-x-acao li::before { content: "✓"; margin-inline-end: 0.6rem; color: var(--oliva); }
.raio-x-acao small { display: block; margin-top: 1rem; color: var(--texto-suave); }
.limite-promessa { margin-top: clamp(3rem, 6vw, 4.5rem); padding: 1.1rem 1.4rem; border-inline-start: 3px solid var(--cobre); border-radius: 0 0.6rem 0.6rem 0; background: var(--creme); color: var(--texto-suave); font-size: 0.9rem; }

.rodape { color: rgba(255,255,255,0.68); background: var(--naval-profundo); }
.rodape-faixa { min-height: 7rem; display: flex; align-items: center; justify-content: space-between; gap: 2rem; font-size: 0.75rem; }
/* Movimento */
.surge.armado { opacity: 0; transform: translateY(1.3rem); transition: opacity 700ms var(--curva) var(--d, 0s), transform 700ms var(--curva) var(--d, 0s); }
.surge.armado.dentro { opacity: 1; transform: none; }

@keyframes heroi-respira {
  from { transform: translate3d(0, var(--rolagem-heroi, 0), 0) scale(1.06); }
  to { transform: translate3d(-1.25%, var(--rolagem-heroi, 0), 0) scale(1.1); }
}
@keyframes trilho-vivo { 0%, 100% { transform: translateX(-75%); opacity: 0; } 18%, 82% { opacity: 1; } 50% { transform: translateX(75%); } }
@keyframes cartao-flutua { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-0.5rem); } }
@keyframes pulso-transferencia { 0%, 100% { transform: translateX(-0.2rem); opacity: 0.45; } 50% { transform: translateX(0.35rem); opacity: 1; } }

@media (max-width: 64rem) {
  .menu { display: none; }
  .seletor-idioma { margin-inline-start: auto; }
  .botao-topo { margin-inline-start: 0; }
  .heroi h1 { font-size: clamp(3rem, 8vw, 5rem); }
  .etapa-grade, .aprende-grade, .raio-x-grade { grid-template-columns: 1fr; }
  .telas-painel { grid-template-columns: 1fr; }
  .pedra-recomendacao { margin-top: 1rem; }
  .chat-demo { grid-template-columns: 1fr; }
  .chat-transferencia { grid-template-columns: auto auto; justify-content: center; }
  .chat-transferencia b { transform: rotate(90deg); }
  .integracao-faixa { grid-template-columns: 1fr; gap: 1rem; }
  .prova-passos { grid-template-columns: 1fr; }
  .prova-passos li:not(:last-child)::after { top: auto; right: auto; bottom: -0.92rem; left: 1.5rem; transform: rotate(90deg); }
}

@media (max-width: 46rem) {
  .faixa { width: min(calc(100% - 1.5rem), var(--faixa)); }
  .topo-faixa { min-height: 4.25rem; }
  .marca { font-size: 1.2rem; }
  .marca img { width: 1.55rem; height: 1.55rem; }
  .topo-faixa { gap: 0.6rem; }
  .seletor-idioma { margin-inline-start: auto; }
  .seletor-idioma summary { min-width: 2.55rem; justify-content: center; padding-inline: 0.6rem; }
  .seletor-idioma summary span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .botao-topo { margin-inline-start: 0; min-height: 2.35rem; padding: 0.55rem 0.72rem; font-size: 0.7rem; }
  .heroi { min-height: 52rem; }
  .heroi-imagem {
    background-image:
      linear-gradient(180deg, rgba(3,15,34,0.78) 0%, rgba(3,15,34,0.3) 35%, rgba(3,15,34,0.96) 76%),
      url("/marca/ciclo-vivo/heroi-patio-showroom.png");
    background-position: 56% center;
  }
  .heroi-conteudo { align-items: end; min-height: 45rem; padding-block: 7rem 8rem; }
  .heroi-texto { max-width: none; }
  .heroi h1 { max-width: 12ch; font-size: clamp(2.45rem, 10.5vw, 3.5rem); }
  .heroi .chamada { font-size: 0.94rem; }
  .heroi .ficha-material { margin-bottom: 1rem; }
  .heroi-trilho { width: calc(100% - 1.5rem); overflow-x: auto; bottom: 0.75rem; }
  .trilho { width: 49rem; }
  .trilho-etapa { min-height: 3.2rem; }
  .ciclo-linha, .etapa::before { display: none; }
  .palavra-fundo { top: 1.2rem; font-size: clamp(4.5rem, 22vw, 7rem); }
  .etapa { padding-block: 4.8rem; }
  .etapa h2 { font-size: clamp(2.25rem, 10vw, 3.3rem); }
  .cartao-recomendacao { position: relative; right: auto; bottom: auto; width: calc(100% - 1.5rem); margin: -4.5rem auto 0; }
  .chat-coluna { min-height: 20rem; }
  /*
    NO CELULAR A TABELA VIRA BLOCO. Quatro colunas numa janela de 390px
    espremeriam "Enviar cotacao hoje" em uma letra por linha; empilhado, cada
    celula leva o proprio rotulo e a linha continua sendo uma oportunidade.
  */
  .painel-gerente, .painel-gerente tbody, .painel-linha { display: block; }
  .painel-gerente thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .painel-linha { padding-block: 0.7rem; border-bottom: 1px solid rgba(146,95,57,0.16); }
  .painel-linha:last-child { border-bottom: 0; }
  .painel-linha > * { display: block; padding: 0.42rem 1.15rem; border-bottom: 0; }
  .painel-rotulo { display: block; margin-bottom: 0.12rem; color: var(--texto-suave); font-size: 0.61rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.09em; }
  .retorno { flex-direction: column; }
  .rodape-faixa { padding-block: 2rem; flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .surge.armado { opacity: 1; transform: none; }
}

@supports not (backdrop-filter: blur(1px)) {
  .topo { background: rgba(3,15,34,0.94); }
  .cartao-recomendacao { background: var(--branco); }
}


/* ---------- trilho rolavel: acabamento ---------- */

.trilho::-webkit-scrollbar { display: none; }
.trilho-etapa { scroll-snap-align: center; }

/*
  Ancora do cartao de recomendacao: sem margem de rolagem, o cabecalho fixo
  cobre o topo do cartao e o clique na etapa "Recomenda" parece nao ter feito
  nada.
*/
#recomendacao { scroll-margin-top: 6rem; }

/* A mascara so faz sentido enquanto ha o que revelar; em tela larga o trilho
   cabe inteiro e a borda apagada vira defeito visual. */
@media (min-width: 68rem) {
  .trilho {
    -webkit-mask-image: none;
    mask-image: none;
    overflow-x: visible;
  }
}


/* ---------- entrar ---------- */

/*
  Usa a MESMA gramatica dos outros botoes do site — `.botao` de base, mesmo
  raio, mesma altura, mesma transicao — em vez de um estilo proprio que
  denunciaria enxerto. O que muda e o PESO: o CTA de cobre e o unico cheio da
  pagina, e o Entrar nao pode disputar com ele.

  O vidro (`backdrop-filter`) e emprestado do seletor de idioma, que e o
  vizinho no cabecalho: os dois sao controles de contexto, nao chamadas.

  A borda vira cobre no hover, que e o mesmo sinal do menu e do seletor.
*/
.botao-entrar {
  gap: 0.45rem;
  color: #fff;
  border-color: rgba(255,255,255,0.38);
  background: rgba(3,15,34,0.3);
  backdrop-filter: blur(10px);
  font-weight: 600;
}
.botao-entrar:hover {
  border-color: var(--cobre-claro);
  background: rgba(3,15,34,0.62);
}

/* A seta anda no hover: diz "sai daqui e vai para o app" sem precisar de
   texto explicando. Nao anda para quem pediu menos movimento. */
.entrar-seta {
  display: inline-block;
  transition: transform 180ms var(--curva);
  font-size: 0.95em;
  opacity: 0.85;
}
.botao-entrar:hover .entrar-seta { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
  .botao-entrar:hover .entrar-seta { transform: none; }
}

/*
  NO CELULAR O CTA DO TOPO SAI, E O ENTRAR FICA.

  Medido a 390px: com os dois, o cabecalho estourava — a marca colidia com o
  icone de idioma e o "Entrar" ficava CORTADO na borda direita, ou seja,
  justamente o botao que existe para ninguem ficar de fora.

  Sai o CTA, e nao o Entrar, porque o CTA se repete no heroi a um dedo de
  distancia; o Entrar nao tem segunda chance na pagina. Quem esta avaliando
  encontra o Raio-X rolando; quem so quer entrar precisa achar agora.
*/
@media (max-width: 52rem) {
  .botao-topo { display: none; }
  .botao-entrar { min-height: 2.6rem; padding: 0.5rem 0.85rem; font-size: 0.82rem; }
}

/* ===========================================================================
   PAGINAS INTERNAS (/como-funciona/, /seguranca/, /privacidade/, ...)

   Reusam o cabecalho, o rodape e os tokens da home. O que muda e' que aqui o
   fundo e' claro do topo ao fim — a home tem um heroi escuro atras do
   cabecalho translucido, e estas nao tem. Sem `.topo-solido` o menu sairia
   branco sobre creme.

   A `.sobrancelha` e' a mesma da home, mas ali ela vive sobre fundo escuro e
   usa `--cobre-claro`. Aqui escurece para `--cobre`, que e' o que passa no
   contraste sobre `--papel`.
   =========================================================================== */

.topo-solido { background: var(--naval-profundo); backdrop-filter: none; }
.corpo-pagina { background: var(--papel); }

.pagina { padding: 8.5rem 0 5rem; }
.pagina .sobrancelha { color: var(--cobre); }

.pagina h1 {
  margin: 0;
  max-width: 22ch;
  font-family: var(--titulo);
  font-weight: 600;
  font-size: clamp(2.1rem, 3.6vw, 3.2rem);
  line-height: 1.06;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.pagina-resumo {
  max-width: 58ch;
  margin: 1.5rem 0 0;
  font-size: 1.12rem;
  line-height: 1.62;
  color: var(--texto);
}

/* O AVISO E' A FAIXA DO LIMITE, e ela fica ANTES do sumario de proposito:
   quem le "privacidade" precisa saber que o texto nao passou por advogado
   antes de ler o texto, e nao depois. */
.pagina-aviso {
  max-width: 62ch;
  margin: 2rem 0 0;
  padding: 1rem 1.15rem;
  border-inline-start: 3px solid var(--alerta);
  border-radius: 0 0.4rem 0.4rem 0;
  background: rgba(164, 56, 47, 0.07);
  font-size: 0.93rem;
  line-height: 1.58;
}

.pagina-sumario {
  margin: 2.75rem 0 0;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--borda);
  border-radius: 0.6rem;
  background: var(--branco);
}
.pagina-sumario > p {
  margin: 0 0 0.6rem;
  color: var(--cobre);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.68rem;
  font-weight: 800;
}
.pagina-sumario ol { margin: 0; padding-inline-start: 1.15rem; display: grid; gap: 0.25rem; font-size: 0.92rem; }
/* `inline-block` + padding para o alvo passar de 18px para 26px de altura. A
   WCAG 2.2 (AA, 2.5.8) pede 24px minimo, e o `conferir.mjs` reprova abaixo
   disso — foi ele que achou isto, em 20 links, nas duas larguras. Sem o
   `inline-block` o padding vertical de um `<a>` em linha nao conta na caixa. */
.pagina-sumario a { display: inline-block; padding-block: 0.25rem; text-decoration: none; border-bottom: 1px solid transparent; }
.pagina-sumario a:hover, .pagina-sumario a:focus-visible { border-bottom-color: var(--cobre); }

.pagina-secao { max-width: 64rem; margin-top: 3.5rem; }
.pagina-secao h2 {
  margin: 0 0 1rem;
  font-family: var(--titulo);
  font-weight: 600;
  font-size: clamp(1.4rem, 2vw, 1.8rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
  scroll-margin-top: 6.5rem;
}
.pagina-secao p { max-width: 68ch; margin: 0 0 1rem; }
.pagina-secao strong { font-weight: 700; }

.pagina-lista, .pagina-passos { max-width: 68ch; margin: 0 0 1.25rem; display: grid; gap: 0.7rem; }
.pagina-lista { padding-inline-start: 1.1rem; }
.pagina-passos { padding-inline-start: 1.4rem; }
.pagina-lista li::marker { color: var(--cobre); }
.pagina-passos li::marker { color: var(--cobre); font-weight: 700; }

/* A NOTA E' O LIMITE DA SECAO — nunca decoracao. Ela e' visualmente distinta
   do paragrafo por isso: quem varre a pagina precisa achar os limites sem ler
   tudo. */
.pagina-nota {
  max-width: 68ch;
  margin: 1.25rem 0 0;
  padding: 0.9rem 1.1rem;
  border-inline-start: 3px solid var(--oliva);
  border-radius: 0 0.4rem 0.4rem 0;
  background: rgba(89, 98, 78, 0.07);
  font-size: 0.93rem;
  line-height: 1.56;
  color: var(--texto);
}

/* Rolo horizontal com `tabindex` no HTML nao existe aqui de proposito: no
   celular a tabela vira blocos empilhados (abaixo), entao nao ha o que rolar.
   O rolo so vale no intervalo entre 46rem e a largura da tabela. */
.pagina-tabela-rolo { max-width: 100%; overflow-x: auto; margin: 0 0 1.25rem; }
.pagina-tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  text-align: start;
}
.pagina-tabela th, .pagina-tabela td {
  padding: 0.75rem 0.9rem;
  border-bottom: 1px solid var(--borda);
  vertical-align: top;
  text-align: start;
}
.pagina-tabela thead th {
  border-bottom-width: 2px;
  color: var(--cobre);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.68rem;
  font-weight: 800;
  white-space: nowrap;
}
.pagina-tabela tbody th { font-weight: 700; }
.pagina-rotulo { display: none; }

.pagina-atualizado {
  margin: 4rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--borda);
  color: var(--texto-suave);
  font-size: 0.8rem;
}

.rodape-paginas { display: flex; flex-wrap: wrap; align-items: center; gap: 0.15rem 1.25rem; justify-content: flex-end; }
/* Mesmo motivo do sumario: o alvo vinha com 20px de altura, e a WCAG 2.2 (AA)
   pede 24. Vale tambem para o rodape da HOME, que usa esta mesma classe. */
.rodape-paginas a { display: inline-block; padding-block: 0.3rem; text-decoration: none; opacity: 0.78; border-bottom: 1px solid transparent; }
.rodape-paginas a:hover, .rodape-paginas a:focus-visible { opacity: 1; border-bottom-color: var(--cobre-claro); }

@media (max-width: 46rem) {
  .pagina { padding-top: 7rem; }

  /* A TABELA VIRA BLOCOS, e cada celula carrega o proprio rotulo. Sem isso,
     "sim — hold real" apareceria sozinho, sem dizer que e' a resposta de
     "mexe no estoque?". Mesmo padrao do painel do gerente na home. */
  .pagina-tabela, .pagina-tabela tbody, .pagina-tabela tr, .pagina-tabela th, .pagina-tabela td { display: block; }
  .pagina-tabela thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .pagina-tabela tr {
    margin-bottom: 1rem;
    padding: 0.35rem 0.9rem 0.9rem;
    border: 1px solid var(--borda);
    border-radius: 0.5rem;
    background: var(--branco);
  }
  .pagina-tabela th, .pagina-tabela td { border-bottom: 0; padding: 0.55rem 0; }
  .pagina-rotulo {
    display: block;
    margin-bottom: 0.15rem;
    color: var(--cobre);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.64rem;
    font-weight: 800;
  }
  .rodape-paginas { justify-content: flex-start; }
}

@media (max-width: 64rem) {
  /* Na home o menu some abaixo de 64rem porque sao QUATRO ancoras do ciclo e
     elas nao cabem. Nas internas ele tem UM item — "Voltar ao inicio" — e sem
     ele o unico caminho de volta seria a marca, que nem todo visitante sabe
     que e' clicavel. Um item cabe em qualquer largura. */
  .corpo-pagina .menu { display: flex; }
}