/* ==========================================================================
   OSY IMPLEMENTOS — paginas.css
   Layouts específicos: hero, home, série, produto, guia de indicação,
   comparador, institucionais e contato.
   ========================================================================== */

/* ============================================================ HERO */

.hero {
  position: relative;
  /* Tela cheia de verdade. `svh` = altura da janela com a barra do navegador
     móvel VISÍVEL: é a única unidade que garante que nada nasce cortado no
     iOS/Android. `vh` fica como reserva para navegador antigo.            */
  min-height: 100vh;
  min-height: 100svh;
  /* a barra do grupo e o header são fixos e transparentes sobre o hero:
     reserva a faixa dos dois aqui para o conteúdo centralizar no espaço que
     sobra, e não atrás deles.                                             */
  padding-top: var(--topo-fixo);
  display: flex;
  align-items: flex-end;
  color: #fff;
  overflow: hidden;
}
.hero__fundo { position: absolute; inset: 0; }
.hero__fundo .midia { position: absolute; inset: 0; }

/* leve parallax no fundo — aplicado por js/base.js */
.hero__fundo { will-change: transform; }

.hero__conteudo {
  position: relative;
  z-index: 3;
  width: 100%;
  padding-block: clamp(40px, 7vh, 96px);
}
.hero__texto { max-width: 760px; }

.hero h1 {
  font-family: var(--fonte-condensada);
  font-weight: 600;
  font-size: clamp(2.6rem, 7.4vw, 6.2rem);
  line-height: 0.98;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.hero__apoio {
  margin-top: 22px;
  font-size: clamp(1rem, 1.5vw, 1.22rem);
  line-height: 1.5;
  max-width: 52ch;
  color: rgba(255, 255, 255, 0.9);
}
.hero__botoes { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 12px; }

/* ==========================================================================
   HERO DA HOME EM DUAS COLUNAS
   Texto à esquerda, card do guia à direita. Abaixo de 1023px o card desce
   para baixo do texto — nunca some: ele é a porta do guia, não enfeite.
   ========================================================================== */

.hero--home { align-items: center; }

.hero__conteudo--duplo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
  gap: clamp(28px, 5vw, 76px);
  align-items: center;
}
@media (max-width: 1023px) {
  .hero__conteudo--duplo { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  /* em coluna única o conteúdo é mais alto que a tela: ancora no topo para
     o H1 aparecer inteiro e o card ficar a um dedo de rolagem.            */
  .hero--home { align-items: flex-start; }
  .hero--home .hero__conteudo { padding-block: clamp(28px, 5vh, 56px); }
  /* o piso de 322px existe para o card não pular ao trocar de pergunta;
     em tela estreita um piso menor já cumpre o papel e devolve altura.    */
  .hero .janela__corpo { min-height: 260px; }
}

/* celular baixo (360x640 e afins): aperta o bloco de provas para o card do
   guia — que é a porta da ferramenta — subir na primeira tela.            */
@media (max-width: 1023px) and (max-height: 700px) {
  .hero--home .hero__apoio { margin-top: 16px; }
  .hero--home .hero__botoes { margin-top: 22px; }
  .hero--home .hero__provas {
    margin-top: 20px;
    padding-top: 14px;
    gap: 14px;
    font-size: 0.76rem;
  }
  .hero--home .hero__provas .numero { font-size: 1.3rem; }
  .hero .janela__corpo { min-height: 230px; }
}

/* Telas baixas (notebook de 768px de altura, celular deitado, janela
   dividida): aperta os respiros para o hero caber inteiro na dobra.       */
@media (max-height: 760px) and (min-width: 1024px) {
  .hero__conteudo { padding-block: clamp(24px, 4vh, 56px); }
  .hero__provas { margin-top: 22px; padding-top: 16px; }
  .hero .janela__corpo { min-height: 260px; }
  .hero__rolar { bottom: 20px; }
}

/* O H1 da home é o único lugar em Boldonse: o Brand Book (pág. 26) reserva
   a fonte de apoio para "palavras de destaque", e esta é a frase de
   abertura da marca. Os nomes de produto seguem na condensada do §3.2.   */
/* `.hero h1` (0,1,1) ganharia de `.hero__titulo` (0,1,0) e devolveria o
   título para a condensada — daí o seletor composto.                     */
.hero h1.hero__titulo {
  font-family: var(--fonte-destaque);
  font-weight: 400;
  /* Boldonse é bem mais larga e mais alta que a condensada: no mesmo corpo
     ela ocupa quase o dobro da linha. Daí o corpo menor e a entrelinha
     folgada — em 1.06 o acento de "Alguém" bate na linha de cima.        */
  font-size: clamp(1.6rem, 3.4vw, 2.9rem);
  line-height: 1.34;
  letter-spacing: -0.005em;
  text-transform: none;
}

.hero__provas {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(18px, 3vw, 38px);
  margin-top: 32px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.78);
}
.hero__provas li { display: flex; align-items: baseline; gap: 7px; }
.hero__provas .numero {
  font-family: var(--fonte-condensada);
  font-size: 1.6rem;
  font-weight: 600;
  color: #fff;
}

/* ------------------------------------------------------------ o card */
.hero__card { position: relative; }

.pilula {
  position: absolute;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  background: var(--branco);
  color: var(--navy);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 14px 34px -16px rgba(8, 57, 87, 0.55);
  animation: pilula-entra 0.8s var(--suave) backwards;
}
.pilula::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--teal);
}
.pilula--cima { top: -18px; left: -14px; animation-delay: 0.5s; }
.pilula--baixo { bottom: -18px; right: -12px; animation-delay: 0.72s; }
.pilula--baixo::before { background: #25d366; }

@keyframes pilula-entra {
  from { opacity: 0; transform: translateY(10px) scale(0.94); }
}
@media (max-width: 480px) {
  .pilula--cima { left: 0; }
  .pilula--baixo { right: 0; }
}

/* --------------------------------------------------------- a janela
   Moldura de navegador, a mesma metáfora da referência. A barra de
   endereço adianta para onde o visitante vai se quiser o guia inteiro. */
.janela {
  position: relative;
  background: var(--bone);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 40px 80px -30px rgba(8, 57, 87, 0.6),
              0 0 0 1px rgba(255, 255, 255, 0.14);
  color: var(--navy);
}
.janela__barra {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  background: var(--branco);
  border-bottom: 1px solid var(--linha);
}
.janela__pontos { display: flex; gap: 6px; flex: none; }
.janela__pontos i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--linha-forte);
}
.janela__pontos i:first-child { background: #e0776a; }
.janela__pontos i:nth-child(2) { background: #e3b862; }
.janela__pontos i:last-child { background: #6fb98a; }
.janela__url {
  flex: 1;
  min-width: 0;
  padding: 5px 12px;
  background: var(--bone);
  border-radius: 999px;
  font-size: 0.7rem;
  color: var(--tinta-fraca);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.janela__estado {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--teal);
}
.janela__estado::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  animation: pulso 1.9s ease-in-out infinite;
}
@keyframes pulso { 50% { opacity: 0.25; } }

.janela__corpo {
  padding: clamp(20px, 3vw, 28px);
  min-height: 322px;
  display: flex;
  flex-direction: column;
  transition: opacity var(--rapido), transform var(--rapido);
}
.janela__corpo.trocando { opacity: 0; transform: translateY(8px); }

/* ------------------------------------------------------- o mini-guia */
.mini__conta {
  font-family: var(--fonte-condensada);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--teal);
}
.mini__titulo {
  margin-top: 10px;
  font-family: var(--fonte-condensada);
  font-size: clamp(1.15rem, 2vw, 1.42rem);
  font-weight: 600;
  line-height: 1.18;
}
.mini__ajuda {
  margin-top: 8px;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--tinta-fraca);
}

.mini__opcoes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}
.mini__opcao {
  min-height: 44px;
  padding: 10px 14px;
  background: var(--branco);
  border: 1.5px solid var(--linha);
  border-radius: var(--raio);
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--navy);
  transition: border-color var(--rapido), background var(--rapido), transform var(--rapido);
}
.mini__opcao:hover { border-color: var(--teal); transform: translateY(-2px); }
.mini__opcao.ativo { border-color: var(--teal); background: rgba(31, 122, 140, 0.1); }
.mini__opcao--mais { color: var(--teal); border-style: dashed; }

.mini__pe {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: auto;
  padding-top: 20px;
}
.mini__voltar {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--tinta-fraca);
  transition: color var(--rapido);
}
.mini__voltar:hover { color: var(--teal); }
.mini__selo {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
}
.mini__progresso { display: flex; gap: 5px; }
.mini__progresso i {
  width: 22px;
  height: 3px;
  background: var(--linha-forte);
  transition: background var(--medio);
}
.mini__progresso i.feito { background: var(--teal); }
.mini__progresso i.agora { background: var(--teal-claro); }

/* --------------------------------------------------------- resultado */
.mini__achado {
  margin-top: 16px;
  padding: 16px 18px;
  background: var(--branco);
  border-left: 3px solid var(--teal);
}
.mini__familia {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
}
.mini__nome {
  margin-top: 6px;
  font-family: var(--fonte-condensada);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.mini__assinatura {
  margin-top: 6px;
  font-family: var(--fonte-condensada);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.03em;
}
.mini__faixa { margin-top: 8px; font-size: 0.8rem; color: var(--tinta-fraca); }

.mini__outros { margin-top: 12px; font-size: 0.78rem; color: var(--tinta-fraca); }
.mini__outros a { font-weight: 700; color: var(--teal); }

/* A ressalva não é letra miúda: mesmo corpo do resto do card (doc §7). */
.mini__ressalva {
  margin-top: 14px;
  padding: 11px 13px;
  background: rgba(31, 122, 140, 0.09);
  border-left: 2px solid var(--teal);
  font-size: 0.78rem;
  line-height: 1.45;
}
.mini__acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }

/* indicador de rolagem discreto */
.hero__rolar {
  position: absolute;
  right: var(--margem);
  bottom: 34px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}
.hero__rolar i {
  display: block;
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), #fff);
  animation: rolar 2.2s var(--suave) infinite;
  transform-origin: top;
}
@keyframes rolar {
  0% { transform: scaleY(0); opacity: 0; }
  40% { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1) translateY(40px); opacity: 0; }
}
@media (max-width: 767px) { .hero__rolar { display: none; } }

/* hero menor para páginas internas */
.hero--interno { min-height: clamp(420px, 62vh, 640px); }
/* frases longas de hero interno nao precisam do corpo da home */
.hero--interno h1 { font-size: clamp(2.2rem, 5.6vw, 4.8rem); }
.hero--curto { min-height: clamp(340px, 46vh, 480px); }

/* ============================================================ CABEÇA DE SEÇÃO */

.cabeca {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px 40px;
  margin-bottom: clamp(28px, 4vw, 52px);
}
.cabeca__texto { max-width: 640px; }
.cabeca h2 { text-wrap: balance; }
.cabeca p { margin-top: 14px; color: var(--tinta-fraca); line-height: 1.5; max-width: 56ch; }
.fundo-navy .cabeca p, .fundo-teal .cabeca p { color: rgba(255, 255, 255, 0.82); }

/* ============================================================ HOME — GRADE DA LINHA */

.familia-faixa {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding-bottom: 12px;
  margin-bottom: 20px;
  border-bottom: 2px solid var(--navy);
}
.familia-faixa h3 {
  font-family: var(--fonte-condensada);
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1;
}
.familia-faixa span { font-size: 0.85rem; color: var(--tinta-fraca); }
.familia-faixa a { margin-left: auto; }
@media (max-width: 640px) {
  .familia-faixa { flex-wrap: wrap; gap: 6px 12px; }
  .familia-faixa a { margin-left: 0; flex-basis: 100%; }
}

.grade-produtos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: clamp(14px, 1.6vw, 24px);
}
.grade-familia + .grade-familia { margin-top: clamp(40px, 5vw, 72px); }

/* transição de filtro: cards que saem somem sem pular o layout */
.card-wrap { transition: opacity var(--medio), transform var(--medio); }
.card-wrap.oculto { display: none; }
.card-wrap.entrando { opacity: 0; transform: translateY(14px) scale(0.98); }

.filtro-vazio { padding: 40px 0; font-size: 1.05rem; max-width: 48ch; }

/* faixa de operações */
.operacoes { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; }
@media (min-width: 900px) { .operacoes { flex-wrap: wrap; overflow: visible; } }

/* ============================================================ HOME — BLOCOS */

.bloco-imagem {
  position: relative;
  min-height: clamp(460px, 74vh, 760px);
  display: flex;
  align-items: flex-end;
  color: #fff;
  overflow: hidden;
}
.bloco-imagem .midia { position: absolute; inset: 0; }
.bloco-imagem__conteudo { position: relative; z-index: 3; padding-block: clamp(40px, 6vw, 80px); }
.bloco-imagem h2 { max-width: 18ch; }
.bloco-imagem p { margin-top: 18px; max-width: 50ch; color: rgba(255, 255, 255, 0.9); }

/* ecossistema */
.ecossistema { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2px; }
.empresa {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: clamp(28px, 3vw, 44px);
  min-height: 340px;
  color: #fff;
  overflow: hidden;
  transition: transform var(--medio);
}
.empresa:hover { transform: translateY(-4px); }
.empresa__conteudo {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 18px;
  height: 100%;
}
/* a assinatura horizontal da submarca no lugar do título de texto */
.empresa__marca { line-height: 0; }
.empresa__marca img {
  display: block;
  width: clamp(190px, 68%, 260px);
  height: auto;
}
.empresa p { font-size: 0.94rem; line-height: 1.5; color: rgba(255, 255, 255, 0.88); }
.empresa .link-seta { margin-top: auto; color: #fff; }

/* unidades */
.unidades { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.unidade { background: var(--branco); padding: 26px; border-top: 3px solid var(--teal); }
.unidade h3 { font-family: var(--fonte-condensada); font-size: 1.6rem; text-transform: uppercase; font-weight: 700; }
.unidade p { margin-top: 10px; font-size: 0.9rem; color: var(--tinta-fraca); }

/* ------------------------------------------------------------- o mapa
   Um quadro só, que troca de unidade pelas abas. O iframe do Google vem com
   400x300 fixos; aqui ele é fluido, com proporção, porque a página é lida
   no celular.                                                             */
.mapa { position: relative; }
.mapa__abas { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.mapa__aba {
  padding: 11px 18px;
  min-height: 44px;
  background: var(--branco);
  border: 1.5px solid var(--linha);
  border-radius: var(--raio);
  font-family: var(--fonte-condensada);
  font-size: 0.94rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--navy);
  transition: border-color var(--rapido), background var(--rapido), color var(--rapido);
}
.mapa__aba:hover { border-color: var(--teal); }
.mapa__aba.ativo { background: var(--teal); border-color: var(--teal); color: #fff; }

.mapa__quadro {
  position: relative;
  /* `width` explícito é obrigatório aqui: com a largura automática, o
     `aspect-ratio` calcula a largura a partir do `min-height` e o quadro
     nasce mais largo que a tela do celular.                              */
  width: 100%;
  aspect-ratio: 4 / 3;
  min-height: 320px;
  background: var(--areia);
  border: 1px solid var(--linha);
  overflow: hidden;
}
.mapa__quadro iframe { display: block; width: 100%; height: 100%; border: 0; }
/* Retrato só em "Onde estamos", onde a coluna de cards ao lado é alta. Na
   home o bloco tem dois cards curtos e o mapa deitado equilibra melhor. */
@media (min-width: 1024px) {
  body[data-pagina="onde-estamos"] .mapa__quadro { aspect-ratio: 3 / 4; max-height: 560px; }
  body[data-pagina="home"] .mapa__quadro { aspect-ratio: 16 / 10; }
}

.unidade.ativo { border-top-color: var(--navy); box-shadow: 0 18px 40px -30px rgba(8, 57, 87, 0.7); }
.unidade__endereco { max-width: 34ch; }
/* Telefone em cima, horário embaixo, o número em teal para ler como o que é:
   um link de discar. Os dois chegaram a dividir uma linha, separados por um
   ponto, mas o horário cresceu de "8h às 18h" para "Segunda a sexta, 8h às
   18h": no card estreito da home a linha quebrava e o ponto separador ficava
   sozinho abrindo a segunda linha. Empilhado, é igual em qualquer largura. */
.unidade__contato a { color: var(--teal); font-weight: 600; text-decoration: none; }
.unidade__contato a:hover { text-decoration: underline; }
.unidade__contato span { display: block; margin-top: 2px; font-size: 0.86rem; }

.unidade__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-top: 16px;
}
.unidade__acoes .link-seta { font-size: 0.84rem; }

/* fechamento em teal ocupando a largura total */
.fechamento { padding-block: clamp(60px, 9vw, 130px); }
.fechamento p {
  font-family: var(--fonte-condensada);
  font-size: clamp(2rem, 6vw, 4.6rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.015em;
  max-width: 20ch;
}

/* Só o fechamento da home — os outros seis blocos teal seguem em Oswald.
   Aqui a tagline usa Boldonse, a mesma display do título do hero do site de
   Componentes, para as duas frentes abrirem e fecharem com a mesma letra.
   Boldonse tem um peso só (400): pedir 600 faria o navegador engordar o
   desenho artificialmente, e aí deixaria de bater com a referência.       */
.fechamento--marca p {
  font-family: var(--fonte-destaque);
  font-weight: 400;
}

/* O `20ch` que segurava a linha era medido no `ch` da Oswald. O da Boldonse é
   bem maior, então o mesmo 20ch virou largura livre e o texto entrou por cima
   do símbolo em contorno. Aqui a largura passa a ser descontada da coluna que
   o símbolo ocupa — os mesmos `clamp(180px, 24vw, 340px)` que ele usa —, mais
   uma respiro de 4vw. Assim a folga acompanha o símbolo em qualquer largura,
   em vez de depender da métrica da fonte.

   No celular não entra: lá o símbolo sangra de propósito (`right: -40px`, 45%
   de opacidade) e o texto já passava por cima dele com a Oswald — 118px antes,
   120px agora. Apertar a linha ali mudaria um desenho que está como sempre
   esteve.                                                                  */
@media (min-width: 768px) {
  .fechamento--marca p {
    max-width: min(20ch, calc(100% - clamp(180px, 24vw, 340px) - 4vw));
  }
}

/* ============================================================ SÉRIE INFINITY */

.familia-bloco { border-top: 1px solid var(--linha); padding-block: clamp(44px, 6vw, 86px); }
.familia-bloco__topo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(20px, 4vw, 64px);
  align-items: start;
  margin-bottom: clamp(28px, 3vw, 44px);
}
.familia-bloco__nome {
  font-family: var(--fonte-condensada);
  font-size: clamp(3rem, 9vw, 7.5rem);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 0.84;
  letter-spacing: -0.02em;
}
.familia-bloco__descritor { margin-top: 12px; color: var(--tinta-fraca); font-size: 0.92rem; }
.familia-bloco__criterio { font-size: clamp(1rem, 1.3vw, 1.14rem); line-height: 1.5; }
@media (max-width: 900px) { .familia-bloco__topo { grid-template-columns: minmax(0, 1fr); } }

/* ============================================================ FAMÍLIA (T3)
   Texto à esquerda sobre fundo teal, foto sangrando pela direita (doc §7). */

.hero-familia {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  min-height: clamp(520px, 78vh, 820px);
  background: var(--teal);
  color: #fff;
}
.hero-familia__texto {
  padding: calc(var(--topo-fixo) + clamp(40px, 6vw, 88px)) clamp(24px, 5vw, 84px) clamp(40px, 6vw, 80px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 860px;
  margin-left: auto;
}
.hero-familia__texto .migalhas,
.hero-familia__texto .migalhas a { color: rgba(255, 255, 255, 0.75); }
.hero-familia__figura { position: relative; min-height: 320px; }

.lista-nomes { margin-top: 34px; border-top: 1px solid rgba(255, 255, 255, 0.28); }
.lista-nomes a {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.28);
  font-family: var(--fonte-condensada);
  font-size: 1.45rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  transition: padding-left var(--rapido), background var(--rapido);
}
.lista-nomes a span {
  font-family: var(--fonte-texto);
  font-size: 0.78rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  opacity: 0.82;
  margin-left: auto;
}
.lista-nomes a:hover { padding-left: 12px; background: rgba(255, 255, 255, 0.1); }

@media (max-width: 900px) {
  .hero-familia { grid-template-columns: minmax(0, 1fr); }
  .hero-familia__figura { order: -1; min-height: 44vh; }
  .hero-familia__texto { padding-top: clamp(32px, 6vw, 56px); }
}

/* ============================================================ PÁGINA DE PRODUTO */

/* o nome ocupa a tela (doc §3.2) — precisa vencer a regra genérica .hero h1 */
.hero h1.produto-hero__nome {
  font-family: var(--fonte-condensada);
  font-size: clamp(3.6rem, 16vw, 13rem);
  font-weight: 700;
  line-height: 0.84;
  letter-spacing: -0.02em;
}
.produto-hero__categoria {
  margin-top: 6px;
  font-size: 0.9rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
}
.produto-hero__assinatura {
  margin-top: 24px;
  font-family: var(--fonte-condensada);
  font-weight: 500;
  font-size: clamp(1.3rem, 3vw, 2.4rem);
  line-height: 1.16;
  letter-spacing: 0.01em;
  max-width: 24ch;
  color: #fff;
}

/* faixa de três números */
.destaques {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.destaque {
  padding: clamp(26px, 3.4vw, 48px) clamp(20px, 2.4vw, 40px);
  border-right: 1px solid rgba(255, 255, 255, 0.16);
}
.destaque:last-child { border-right: 0; }
.destaque strong { display: block; font-family: var(--fonte-condensada); font-size: clamp(2.2rem, 4.4vw, 3.6rem); font-weight: 600; line-height: 1; letter-spacing: -0.02em; }
.destaque span { display: block; margin-top: 10px; font-size: 0.86rem; color: rgba(255, 255, 255, 0.76); }

/* barra fixa de ações */
.barra-acoes {
  position: sticky;
  /* Gruda embaixo do cabeçalho, que é fixo e nunca sai da tela. `--topo-grude`
     acompanha o cabeçalho quando ele compacta — com `--topo-fixo` sobrava um
     vão de 10px por onde o conteúdo passava. */
  top: var(--topo-grude);
  z-index: var(--z-barra-acoes);
  background: rgba(238, 233, 227, 0.95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--linha);
  transition: top var(--medio), box-shadow var(--medio);
}
.barra-acoes.presa { box-shadow: 0 12px 26px -22px rgba(8, 57, 87, 0.8); }

/* A barra para a uma altura de cabeçalho do topo — que é o espaço de que a
   pilha flutuante precisa. Passado o hero, porém, a navbar cede e essa faixa
   fica vazia: o conteúdo da página desfilava por trás dela e aparecia
   fatiado pela borda da barra, com a pilha por cima. Aqui a faixa vira
   superfície: a barra estende o próprio fundo até o alto da janela e o que
   passa por baixo passa escondido.                                        */
/* A faixa opaca que ficava acima da barra saiu junto com a pilha: sem ela no
   alto, não sobra vão nenhum entre a barra do grupo e a barra de ações.   */
body.com-pilha .barra-acoes.presa { background: var(--bone); }
.barra-acoes__interno {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-block: 7px;
  overflow-x: auto;
}
/* Barra baixa: no desktop os botões dela são menores que os do resto do
   site. No celular a barra vira os dois CTAs do pé da tela e volta aos 44px
   de alvo de toque — lá o que manda é o dedo, não a altura da faixa.     */
.barra-acoes .btn { white-space: nowrap; }
@media (min-width: 768px) {
  .barra-acoes .btn { min-height: 34px; padding: 8px 14px; font-size: 0.79rem; }
}
.barra-acoes__nome {
  font-family: var(--fonte-condensada);
  font-size: 1.15rem;
  font-weight: 700;
  text-transform: uppercase;
  margin-right: auto;
  white-space: nowrap;
}
@media (max-width: 767px) {
  /* no mobile colapsa para dois botões (doc §7, bloco 3) */
  .barra-acoes { position: fixed; inset: auto 0 0 0; top: auto; border-top: 1px solid var(--linha); border-bottom: 0; }
  .barra-acoes__nome, .barra-acoes .so-desktop, .barra-acoes .so-largo { display: none; }
  .barra-acoes__interno { padding-block: 10px; }
  .barra-acoes__interno .btn { flex: 1; }
  body.tem-barra { padding-bottom: 72px; }
}

/* texto comercial: coluna estreita + imagem vertical ao lado */
.comercial {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: start;
}
.comercial__texto > * + * { margin-top: 20px; }
.comercial__abertura { font-size: clamp(1.15rem, 1.8vw, 1.5rem); line-height: 1.35; font-family: var(--fonte-condensada); font-weight: 400; max-width: 26ch; }
.comercial__rotulo { margin-top: 34px !important; }
@media (max-width: 900px) { .comercial { grid-template-columns: minmax(0, 1fr); } }

/* blocos de argumento — só texto desde 29 de setembro de 2026, quando a
   foto de detalhe saiu a pedido do cliente (ver produto.js, bloco 5). A
   largura fica na de leitura: sem a foto do lado, a linha atravessaria a
   tela inteira. */
.argumento { max-width: 760px; }
.argumento + .argumento { margin-top: clamp(40px, 6vw, 72px); }
.argumento h3 { margin-bottom: 14px; }

/* tabela de configurações interativa */
.config-linha { cursor: pointer; }
.config-linha.ativo td { background: rgba(31, 122, 140, 0.13); box-shadow: inset 3px 0 0 var(--teal); }

.painel-config {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 44px);
  align-items: start;
}
@media (max-width: 900px) { .painel-config { grid-template-columns: minmax(0, 1fr); } }

/* relacionados */
.relacionados { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }

/* ====================================================== GUIA DE INDICAÇÃO
   Três perguntas, uma por tela, com barra de progresso. Opções em cards
   grandes e clicáveis, sem menu suspenso: precisa funcionar com uma mão no
   celular, que é onde a maior parte vai usar (doc §7 — Guia de indicação).
   ------------------------------------------------------------------------ */

.passos {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--linha);
}
.passo {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 6px;
  border-bottom: 3px solid transparent;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--tinta-fraca);
  text-align: left;
  transition: color var(--rapido), border-color var(--rapido);
}
.passo strong {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  font-size: 0.78rem;
}
.passo.ativo { color: var(--navy); border-bottom-color: var(--teal); }
.passo.feito { color: var(--teal); }
.passo.feito strong { background: var(--teal); border-color: var(--teal); color: #fff; }
.passo[disabled] { cursor: not-allowed; opacity: 0.55; }
@media (max-width: 700px) { .passo span { display: none; } .passo { flex: none; padding: 12px 10px; } }

.progresso { height: 3px; background: rgba(8, 57, 87, 0.12); }
.progresso i { display: block; height: 100%; width: 0; background: var(--teal); transition: width var(--medio); }

.guia { max-width: 760px; margin-inline: auto; }
.guia__pergunta { margin-bottom: clamp(20px, 3vw, 32px); }
.guia__numero {
  font-family: var(--fonte-condensada);
  font-size: 0.82rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--teal);
}
.guia__pergunta h2 { margin-top: 8px; }
.guia__ajuda { margin-top: 10px; color: var(--tinta-fraca); font-size: 0.94rem; }

.opcoes { display: grid; gap: 10px; }
/* as oito operações e as treze cargas cabem em duas ou três colunas no
   desktop e empilham no celular */
.opcoes--grade { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.opcao {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  width: 100%;
  padding: 18px 20px;
  text-align: left;
  background: var(--branco);
  border: 1.5px solid var(--linha);
  border-radius: var(--raio);
  transition: border-color var(--rapido), background var(--rapido), transform var(--rapido);
}
.opcao:hover { border-color: var(--teal-claro); transform: translateX(3px); }
.opcao.ativo { border-color: var(--teal); background: rgba(31, 122, 140, 0.08); }
.opcao[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  background: transparent;
  border-style: dashed;
}
.opcao__marca {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  border: 1.5px solid var(--linha-forte);
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: border-color var(--rapido), background var(--rapido);
}
.opcao__marca--quadro { border-radius: 3px; }
.opcao.ativo .opcao__marca,
.seletor-item.ativo .opcao__marca { border-color: var(--teal); background: var(--teal); }
.opcao.ativo .opcao__marca::after,
.seletor-item.ativo .opcao__marca::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: inherit;
  background: #fff;
}
.opcao__titulo { display: block; font-weight: 700; font-size: 0.98rem; line-height: 1.3; }
.opcao__ajuda { display: block; margin-top: 5px; font-size: 0.82rem; color: var(--tinta-fraca); line-height: 1.4; }

/* campo livre no fim da lista de cargas (doc §7 — Guia, passo 1) */
.opcao-livre { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.opcao-livre input {
  flex: 1 1 220px;
  padding: 13px 14px;
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio);
  background: var(--branco);
  transition: border-color var(--rapido), box-shadow var(--rapido);
}
.opcao-livre input:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(31, 122, 140, 0.16);
}

.guia-nav { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; }
.guia-nav .btn { flex: 1 1 160px; }

/* ------------------------------------------------ o guia com uma mão só
   O §7 pede que o guia funcione com uma mão no celular, e a lista de treze
   cargas é o teste dessa regra: em coluna única, o "Continuar" nascia a
   1700px do topo — o visitante escolhia "Areia" na primeira tela e tinha de
   rolar a lista inteira para achar o botão. Duas colunas encurtam a lista
   pela metade e a barra de navegação passa a acompanhar a tela.           */
@media (max-width: 767px) {
  .opcoes--grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .opcoes--grade .opcao { padding: 14px; gap: 10px; }
  .opcoes--grade .opcao__titulo { font-size: 0.92rem; }
  .opcoes--grade .opcao__marca { width: 18px; height: 18px; }

  .guia-nav {
    position: sticky;
    bottom: 0;
    z-index: 4;
    margin-top: 20px;
    margin-inline: calc(var(--margem) * -1);
    padding: 12px var(--margem) calc(12px + env(safe-area-inset-bottom));
    background: var(--bone);
    border-top: 1px solid var(--linha);
    box-shadow: 0 -10px 24px rgba(8, 57, 87, 0.09);
  }
  .guia-nav .btn { flex: 1 1 130px; min-height: 48px; }
}

/* o resultado: de um a três implementos, cada um com assinatura, faixa de
   capacidade e caminho para a página completa */
.indicacoes { display: grid; gap: 14px; }
.indicacao {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  padding: 16px;
  background: var(--branco);
  border: 1px solid var(--linha);
  border-left: 3px solid var(--teal);
}
@media (max-width: 600px) { .indicacao { grid-template-columns: minmax(0, 1fr); } }
.indicacao__ordem {
  font-family: var(--fonte-condensada);
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
}
.indicacao__assinatura {
  margin-top: 8px;
  font-family: var(--fonte-condensada);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: 0.03em;
}
.indicacao__faixa { margin-top: 8px; font-size: 0.88rem; color: var(--tinta-fraca); }

/* A ressalva não é letra miúda: corpo de leitura normal, junto do resultado
   (doc §7 — Guia, ATENÇÃO).                                                */
.ressalva {
  margin-top: 22px;
  padding: 18px 20px;
  background: rgba(31, 122, 140, 0.08);
  border-left: 3px solid var(--teal);
  font-size: 1rem;
  line-height: 1.6;
  max-width: 62ch;
}

.resumo { background: var(--branco); border: 1px solid var(--linha); }
.resumo__linha {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 13px 20px;
  border-bottom: 1px solid var(--linha);
  font-size: 0.9rem;
}
.resumo__linha span:first-child { color: var(--tinta-fraca); }
.resumo__linha strong { text-align: right; }

.saida-acoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }

/* ============================================================ COMPARADOR */

.comparador { display: grid; gap: 24px; }
.comparador__colunas {
  display: grid;
  grid-template-columns: 180px repeat(var(--colunas, 3), minmax(220px, 1fr));
  min-width: 720px;
}
.comparador__rolagem { overflow-x: auto; }
.comparador__celula {
  padding: 15px 18px;
  border-bottom: 1px solid var(--linha);
  border-right: 1px solid var(--linha);
  background: var(--branco);
  font-size: 0.9rem;
}
.comparador__celula--rotulo {
  background: var(--bone);
  font-weight: 700;
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
  position: sticky;
  left: 0;
  z-index: 2;
}
.comparador__celula--topo { padding: 18px; background: var(--branco); }
/* As linhas em que os produtos diferem ficam destacadas; as iguais ficam
   esmaecidas. É isso que faz o comparador ser útil em vez de virar uma
   tabela grande (doc §7 — Comparador). O esmaecido usa a mesma tinta fraca
   do resto do site, não opacidade: continua legível.                       */
.comparador__celula.diferente { background: rgba(31, 122, 140, 0.1); }
.comparador__celula.igual { color: var(--tinta-fraca); }
.comparador__celula--rotulo.igual { color: rgba(74, 106, 128, 0.7); }
.comparador__celula--rotulo.diferente::after {
  content: "difere";
  display: block;
  margin-top: 6px;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal);
}

.seletor-produtos { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.seletor-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1.5px solid var(--linha);
  background: var(--branco);
  text-align: left;
  transition: border-color var(--rapido), background var(--rapido);
}
.seletor-item:hover { border-color: var(--teal-claro); }
.seletor-item.ativo { border-color: var(--teal); background: rgba(31, 122, 140, 0.08); }
.seletor-item[disabled] { opacity: 0.4; cursor: not-allowed; }
.seletor-item strong { font-family: var(--fonte-condensada); font-size: 1.1rem; text-transform: uppercase; font-weight: 600; display: block; }
.seletor-item span { font-size: 0.76rem; color: var(--tinta-fraca); }

/* ============================================================ INSTITUCIONAIS */

.etapas { display: grid; gap: 2px; }
.etapa {
  position: relative;
  min-height: clamp(360px, 62vh, 620px);
  display: flex;
  align-items: flex-end;
  color: #fff;
  overflow: hidden;
}
/* No celular as seis etapas somavam 3.150px — sete telas inteiras só para
   passar pela fábrica. A altura cai porque ali a imagem é fundo de leitura,
   não a peça principal: o que precisa caber na tela é o título e o
   parágrafo, e os dois cabem em 420px.                                   */
@media (max-width: 767px) {
  .etapa { min-height: clamp(300px, 44vh, 420px); }
}
.etapa .midia { position: absolute; inset: 0; }
.etapa__conteudo { position: relative; z-index: 3; padding-block: clamp(28px, 4vw, 60px); width: 100%; }
.etapa__numero {
  font-family: var(--fonte-condensada);
  font-size: 0.9rem;
  letter-spacing: 0.24em;
  color: rgba(255, 255, 255, 0.7);
}
.etapa h3 { margin-top: 8px; }
.etapa p { margin-top: 14px; max-width: 52ch; color: rgba(255, 255, 255, 0.9); }

.destaque-frase {
  font-family: var(--fonte-condensada);
  font-size: clamp(1.6rem, 4vw, 3rem);
  font-weight: 500;
  line-height: 1.1;
  max-width: 20ch;
}

/* Os oito valores.

   Era `auto-fill` com trilho mínimo de 240px. Em tela larga isso abria cinco
   colunas, e oito itens em cinco colunas deixam a última fileira com três
   preenchidos e dois vazios — e vazio aqui não é espaço em branco, é o
   `background: var(--linha)` da grade aparecendo em dois retângulos cinzas.
   Era isso que estava "quebrando" no monitor grande.

   Duas colunas fixas resolvem porque oito é par: quatro fileiras cheias em
   qualquer largura, sem trilho sobrando. No celular vira coluna única.   */
.valores { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--linha); }
@media (min-width: 640px) { .valores { grid-template-columns: repeat(2, 1fr); } }
.valor { background: var(--bone); padding: 22px; display: flex; gap: 14px; }
.valor strong {
  font-family: var(--fonte-condensada);
  font-size: 1.4rem;
  color: var(--teal);
  line-height: 1;
}

.colunas-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(20px, 3vw, 48px); }
.colunas-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: clamp(20px, 3vw, 40px); }

.cartao {
  background: var(--branco);
  padding: clamp(22px, 2.4vw, 34px);
  border-top: 3px solid var(--teal);
}
.cartao h3 { margin-bottom: 12px; }
.cartao p { font-size: 0.94rem; line-height: 1.5; color: var(--tinta-fraca); }

/* ============================================================ CONTATO */

.form-grade {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.form-grade .largura-total { grid-column: 1 / -1; }
@media (max-width: 700px) { .form-grade { grid-template-columns: minmax(0, 1fr); } }

.form-aviso {
  margin-top: 20px;
  padding: 16px 18px;
  background: rgba(31, 122, 140, 0.1);
  border-left: 3px solid var(--teal);
  font-size: 0.92rem;
}
.form-aviso.erro { background: rgba(180, 70, 47, 0.1); border-left-color: #b4462f; }

/* ============================================================ MIGALHAS */

.migalhas { display: flex; flex-wrap: wrap; gap: 8px; font-size: 0.78rem; color: var(--tinta-fraca); }
.migalhas a:hover { color: var(--teal); }
.migalhas li + li::before { content: "/"; margin-right: 8px; opacity: 0.5; }
.migalhas li { display: flex; }