/* ============================================================
   PRODUTO
   O acabamento das páginas de linha e da ficha: os fundos da
   marca, os grafismos e os espaços de mídia.

   O que isto resolve: a página de linha era uma coluna de texto
   sobre branco, alternando com creme. Conteúdo denso, sem um
   único ponto de descanso para o olho e sem lugar para foto.

   A saída sai do próprio brand book, e não de invenção: a paleta
   de apoio (teal, areia e opala) e o fundo com a cunha de 50°
   são elementos oficiais da marca — os mesmos seis fundos do
   arquivo "Elementos de marca / Backgrounds". Aqui eles viram
   gradiente em CSS, e não PNG de 8000px: mesma imagem, sem peso.

   Carrega por último, depois de adicoes.css.
   ============================================================ */

:root{
  /* Tons da paleta de apoio rebaixados sobre o branco e o creme.
     São os mesmos pigmentos do manual (areia #bfbbac e opala
     #afd0c9), diluídos até virarem fundo de leitura: cheios eles
     disputam com o texto navy e derrubam o contraste que a
     auditoria WCAG já tinha acertado.                          */
  --areia-cl:#ddd9cd;
  --opala-cl:#dfece9;
  /* a cunha da marca, sempre a 50°, sempre saindo do alto à direita */
  --cunha:140deg;
}

/* ---------- fundos de seção ---------- */
.sec--areia{background:var(--areia-cl);color:var(--ink)}
.sec--opala{background:var(--opala-cl);color:var(--ink)}
.sec--teal{background:var(--teal);color:var(--cream)}
.sec--areia .lead,.sec--opala .lead{color:var(--ink-2)}
/* Sobre os dois tons de apoio o texto secundário precisa de um passo
   a mais de escuro: o --ink-2 de origem dá 3,6:1 sobre a areia, abaixo
   do 4,5:1 que a auditoria WCAG AA cobrou. Redefinir o token dentro da
   seção acerta de uma vez a lead, o corpo da FAQ e a tabela — em vez
   de caçar cada seletor.                                            */
.sec--areia,.sec--opala{--ink-2:#3d5a6b;--ink-3:#415c6d}

.sec--teal .lead{color:#d7e8eb}
.sec--teal .d1,.sec--teal .d2,.sec--teal .d3{color:var(--white)}
/* o amarelo sobre o teal fica em 3,9:1; no creme a linha de apoio
   passa, e o traço da esquerda continua amarelo */
.sec--teal .eyebrow{color:var(--cream)}
.sec--teal .type,.sec--teal .mont{background:rgba(255,255,255,.06);border-color:rgba(234,232,225,.2)}
.sec--teal .type h3,.sec--teal .mont b{color:var(--white)}
.sec--teal .type p,.sec--teal .mont span{color:#d7e8eb}
/* Os cards de passo vinham do fundo navy, onde o cinza-azulado do
   texto de apoio passava. Sobre o teal ele cai para 2,6:1.      */
.sec--teal .fr span,.sec--teal .biglist li{color:#e4eff1}

/* ---------- a cunha ----------
   Um fundo da marca é a cor cheia mais uma cunha de 50° saindo do
   canto superior direito, num tom vizinho. Reproduzida em duas
   camadas: a cunha dura e, por baixo dela, o esfumado que o
   arquivo original tem na borda de baixo.                      */
.sec--marca{position:relative;isolation:isolate}
.sec--marca::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(var(--cunha),transparent 0 61%,var(--cunha-cor,rgba(9,50,74,.07)) 61% 100%),
    radial-gradient(120% 90% at 100% 0%,var(--cunha-brilho,rgba(9,50,74,.05)),transparent 62%);
}
.sec--navy.sec--marca{--cunha-cor:rgba(28,111,128,.42);--cunha-brilho:rgba(28,111,128,.3)}
.sec--deep.sec--marca{--cunha-cor:rgba(28,111,128,.3);--cunha-brilho:rgba(28,111,128,.22)}
.sec--teal.sec--marca{--cunha-cor:rgba(6,28,41,.34);--cunha-brilho:rgba(6,28,41,.26)}
.sec--yellow.sec--marca{--cunha-cor:rgba(9,50,74,.14);--cunha-brilho:rgba(9,50,74,.1)}
.sec--areia.sec--marca,.sec--opala.sec--marca{--cunha-cor:rgba(9,50,74,.08);--cunha-brilho:rgba(9,50,74,.06)}

/* ---------- o símbolo como marca d'água ----------
   O mesmo SVG do herói, virado para o canto e quase apagado. Dá
   profundidade às seções claras sem entrar na frente do texto. */
.sec--marca > .marca-dagua{
  position:absolute;z-index:-1;pointer-events:none;
  right:-8%;bottom:-32%;width:min(560px,44vw);color:var(--navy);opacity:.045;
}
.sec--navy > .marca-dagua,.sec--deep > .marca-dagua,.sec--teal > .marca-dagua{color:var(--cream);opacity:.06}
.sec--yellow > .marca-dagua{color:var(--navy);opacity:.09}
.marca-dagua svg{width:100%;height:auto;display:block}

/* ============================================================
   ESPAÇOS DE MÍDIA
   Enquanto não há foto, o espaço diz o que precisa receber. A
   especificação é conteúdo do protótipo, não decoração: some
   junto com o espaço no dia em que a imagem entrar.
   ============================================================ */
.slot{
  position:relative;aspect-ratio:var(--ar,4/3);width:100%;margin:0;
  display:grid;place-items:center;text-align:center;
  background:var(--cream-l);
  border:2px dashed rgba(9,50,74,.28);
  overflow:hidden;
}
/* a mesma cunha do fundo da marca, aqui como textura do vazio */
.slot::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(140deg,transparent 0 54%,rgba(9,50,74,.05) 54% 100%);
}
.slot-in{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;
  gap:6px;padding:clamp(14px,2.2vw,26px);max-width:46ch}
.slot-vela{width:34px;height:34px;fill:var(--yellow);margin-bottom:2px;flex:none}
.slot-rot{font-size:10.5px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}
.slot-nome{font-size:clamp(15px,1.4vw,18px);font-weight:800;color:var(--navy);line-height:1.2}
.slot-spec{font-size:12.5px;font-weight:700;color:var(--navy);line-height:1.45;
  background:var(--yellow);padding:5px 10px;border-radius:2px;margin-top:4px}
.slot-dica{font-size:12.5px;color:var(--ink-3);line-height:1.45;max-width:38ch}
/* a proporção também no canto, para achar de longe */
.slot-r{position:absolute;top:0;left:0;z-index:3;
  font-size:11px;font-weight:800;letter-spacing:.1em;
  background:var(--navy);color:var(--yellow);padding:5px 9px}

/* sobre fundo escuro o espaço inverte, senão vira um buraco branco */
.slot--escuro{background:rgba(255,255,255,.05);border-color:rgba(234,232,225,.34)}
.slot--escuro::before{background:linear-gradient(140deg,transparent 0 54%,rgba(255,255,255,.05) 54% 100%)}
.slot--escuro .slot-rot{color:#8ba3b2}
.slot--escuro .slot-nome{color:var(--white)}
.slot--escuro .slot-dica{color:#9db3c0}

/* espaços pequenos (miniaturas, logos) escondem o que não cabe */
.slot[style*="3/1"] .slot-vela,.slot[style*="1/1"].slot--mini .slot-vela{display:none}
.slot[style*="3/1"] .slot-dica{display:none}
.slot--mini .slot-in{gap:4px;padding:10px}
.slot--mini .slot-nome{font-size:13.5px}
.slot--mini .slot-spec{font-size:11px;padding:3px 7px}
.slot--mini .slot-dica{display:none}

/* Espaço neutro: o que o comprador vê enquanto a foto não chega.
   Sem tracejado, sem tarja de proporção e sem palavra — só a
   caixa e o grafismo, bem apagado. */
.slot--neutro{border:1px solid var(--line);background:var(--cream-l)}
.slot--neutro .slot-vela{width:clamp(44px,9vw,72px);height:clamp(44px,9vw,72px);margin:0;opacity:.5}

/* Espaço preenchido. Quando a foto chega ela ocupa a mesma caixa,
   na mesma proporção, e o que era legenda do vazio sai junto: a
   borda tracejada, a cunha de textura e a tarja da proporção. */
.slot--foto{border:0;background:var(--cream-l)}
.slot--foto::before{display:none}
.slot--foto img,.slot--foto video{width:100%;height:100%;object-fit:cover;display:block}
/* video na galeria da linha: mesmo recorte da foto. O painel
   aceita mp4 no mesmo campo de imagem, e quem envia nao
   precisa saber que o site desenha os dois com tags
   diferentes. */

/* ============================================================
   HERÓI DA LINHA
   Era título à esquerda e texto à direita, com o pé do bloco
   vazio. Agora o texto fecha numa coluna só e a outra recebe a
   capa da linha — o mesmo arranjo do herói da home.
   ============================================================ */
.cathero .wrap{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center;
  gap:clamp(28px,4vw,64px)}
.cathero-fig{position:relative;z-index:2}
.cathero-fig .slot{background:rgba(255,255,255,.05);border-color:rgba(234,232,225,.3)}
@media (max-width:900px){
  .cathero .wrap{grid-template-columns:minmax(0,1fr)}
  .cathero-fig{order:3}
}
/* "Encontrar pela minha caixa de câmbio" mede 346px de ponta a ponta.
   Com `flex:0 0 auto` o botão nasce do tamanho do texto e não quebra
   linha, então em 360px ele saía 6px pela direita — e 46px em 320px.
   Preso à largura da coluna, o texto passa a quebrar dentro dele. */
@media (max-width:600px){
  .cathero .btns{flex-direction:column;align-items:stretch}
  .cathero .btns .btn{width:100%;justify-content:center;text-align:center}
}

/* ============================================================
   BLOCO "O QUE É"
   O texto ocupava 64ch e deixava a metade direita vazia. Vira
   duas colunas: a explicação e a foto que explica junto.
   ============================================================ */
.prosewrap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(28px,4vw,60px);align-items:start}
.prosewrap .prose{max-width:none}
.prosefig{position:sticky;top:calc(var(--altura-header) + 24px)}
@media (max-width:900px){
  .prosewrap{grid-template-columns:minmax(0,1fr)}
  .prosefig{position:static}
}

/* ---------- cards de tipo com foto ---------- */
/* Cada configuração ganha a sua imagem. É o bloco mais didático
   da página: "direta ou multiplicada" se entende vendo.        */
.type{display:flex;flex-direction:column;padding:0;overflow:hidden}
.type .slot{border:none;border-bottom:1px solid var(--line);aspect-ratio:4/3}
.type .type-txt{padding:24px 24px 28px}
.sec--teal .type .slot{border-bottom-color:rgba(234,232,225,.2)}

/* ---------- galeria da linha ---------- */
.galeria{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.4vw,18px)}
/* O vídeo é o assunto do bloco: ocupa a linha inteira e os três
   detalhes dividem a de baixo. O teto de largura existe porque
   16:9 em 1240px passaria de 690px de altura — mais alto que a
   tela do notebook, para um espaço que ainda está vazio.       */
.galeria > :first-child{grid-column:1/-1;max-width:900px}
@media (max-width:820px){
  .galeria{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:520px){
  .galeria{grid-template-columns:minmax(0,1fr)}
}

/* ---------- cards das dez linhas, na home ----------
   Dentro de um card o espaço não precisa de moldura própria: a
   borda do card já o delimita, e duas bordas viram ruído. Herda
   também a cunha amarela que corria no canto da foto no hover. */
.ccard .slot{border:none;border-bottom:1px solid var(--line);background:var(--cream)}
.ccard .slot::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(140deg,transparent 0 50%,var(--yellow) 50% 100%);
  transform:translate(60%,60%);transition:transform .28s cubic-bezier(.3,.8,.4,1)}
.ccard:hover .slot::after{transform:translate(28%,28%)}

/* No celular o card deita: a foto vira a coluna da esquerda e
   ocupa a altura toda, então a proporção fixa sai e o miolo do
   espaço fica só com o nome e a medida.                        */
@media (max-width:860px){
  .ccard .slot{aspect-ratio:auto;height:100%;min-height:112px;
    border-bottom:none;border-right:1px solid var(--line)}
  .ccard .slot .slot-vela,.ccard .slot .slot-rot{display:none}
  .ccard .slot .slot-in{padding:8px;gap:3px}
  .ccard .slot .slot-nome{font-size:10.5px;line-height:1.15}
  .ccard .slot .slot-spec{font-size:9px;padding:2px 4px;line-height:1.3}
  .ccard .slot-r{font-size:9px;padding:3px 5px;letter-spacing:.04em}
}
@media (max-width:520px){
  .ccard .slot{min-height:104px}
  .ccard .slot .slot-spec{display:none}
}

/* ---------- prova social ----------
   Seis caixas de 150px não comportam uma especificação dentro de
   cada uma: a linha vira uma nota da faixa inteira, que é o que
   ela é — a mesma medida para os seis logos.                    */
.midia-nota{
  display:inline-flex;align-items:center;gap:9px;flex-wrap:wrap;
  margin-bottom:18px;padding:8px 13px;
  background:var(--yellow);color:var(--navy);
  font-size:13px;font-weight:700;line-height:1.4;border-radius:2px;
}
.midia-nota b{font-weight:800;letter-spacing:.1em;text-transform:uppercase;font-size:10.5px}
.sec--deep .midia-nota,.sec--navy .midia-nota{background:var(--yellow);color:var(--navy)}

/* ============================================================
   FICHA DO PRODUTO
   A ficha abria com um retângulo creme e a palavra "foto". Vira
   uma galeria: a principal quadrada e três detalhes embaixo.
   ============================================================ */
.fichagal{display:flex;flex-direction:column;gap:clamp(10px,1.2vw,14px)}
/* a coluna da ficha chega a 840px: um quadrado com essa largura
   empurraria a especificação para fora da primeira tela */
.fichagal > .slot{max-width:640px}
.fichagal .fichagal-mini{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.2vw,14px)}

/* ---------- a galeria com foto de verdade ----------
   Três colunas servem aos três espaços reservados. Com as fotos
   do painel a fileira é de escolha, não de exposição: as
   miniaturas ficam pequenas, quantas vierem, e quebram linha
   sozinhas. O teto de largura é o mesmo da foto principal, senão
   a fileira passa da foto que ela comanda.                     */
.fichagal .fichagal-mini--fotos{grid-template-columns:repeat(auto-fill,minmax(72px,1fr));max-width:640px}
.fichagal-ampliar{display:block;width:100%;height:100%;padding:0;border:0;background:none;cursor:zoom-in}
.fichagal-mini--fotos .slot--mini{padding:0;border:0;cursor:pointer;
  outline:2px solid transparent;outline-offset:2px;transition:outline-color .15s}
.fichagal-mini--fotos .slot--mini:hover{outline-color:var(--line)}
.fichagal-mini--fotos .slot--mini[aria-current="true"]{outline-color:var(--navy)}
.fichagal-ampliar:focus-visible,.fichagal-mini--fotos .slot--mini:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}

/* ---------- a foto ampliada ----------
   Um <dialog> em tela cheia. A foto entra inteira (contain, e não
   cover): quem amplia quer ver a peça toda, com a plaqueta
   legível, e recortar aqui desfaria o motivo de ampliar.       */
dialog.luz{width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;
  background:rgba(6,26,38,.94);color:var(--white)}
dialog.luz[open]{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:minmax(0,1fr) auto;
  align-items:center;gap:0 clamp(4px,1.5vw,20px);padding:clamp(52px,7vh,72px) clamp(8px,2vw,28px) clamp(14px,3vh,28px)}
dialog.luz::backdrop{background:rgba(6,26,38,.6)}
/* a página de trás não rola enquanto a foto está aberta */
html:has(dialog.luz[open]){overflow:hidden}
.luz-fig{grid-column:2;grid-row:1;margin:0;height:100%;min-height:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:12px}
.luz-fig img{max-width:100%;max-height:100%;min-height:0;object-fit:contain;background:var(--white);display:block}
.luz-fig figcaption{font-size:14.5px;font-weight:600;color:var(--cream);text-align:center}
.luz-fig figcaption:empty{display:none}
.luz-seta,.luz-x{width:48px;height:48px;display:grid;place-items:center;padding:0;cursor:pointer;
  border:1px solid rgba(234,232,225,.34);border-radius:2px;background:rgba(255,255,255,.06);
  color:var(--white);font-size:30px;line-height:1;font-family:inherit;transition:background .15s,color .15s}
.luz-seta:hover:not(:disabled),.luz-x:hover{background:var(--yellow);color:var(--navy);border-color:var(--yellow)}
.luz-seta:disabled{opacity:.28;cursor:default}
.luz-seta[hidden]{display:none}
.luz-seta:focus-visible,.luz-x:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}
.luz-seta--ant{grid-column:1;grid-row:1}
.luz-seta--prox{grid-column:3;grid-row:1}
.luz-x{position:absolute;top:clamp(8px,1.6vh,16px);right:clamp(8px,2vw,28px);font-size:26px}
.luz-conta{grid-column:1/-1;grid-row:2;margin:12px 0 0;text-align:center;
  font-size:12.5px;font-weight:800;letter-spacing:.14em;color:var(--cream)}
.luz-conta:empty{display:none}
/* No celular as setas saem da lateral, onde roubariam um terço
   da largura da foto, e vão para baixo, ao lado do contador.   */
@media (max-width:700px){
  dialog.luz[open]{grid-template-columns:auto minmax(0,1fr) auto;gap:10px}
  .luz-fig{grid-column:1/-1}
  .luz-seta--ant{grid-column:1;grid-row:2}
  .luz-seta--prox{grid-column:3;grid-row:2}
  .luz-conta{grid-column:2;grid-row:2;margin:0}
}

/* O miolo da ficha e da listagem ficavam sobre branco puro, de
   ponta a ponta. Um creme muito leve com a cunha da marca separa
   a página do conteúdo sem roubar contraste da tabela.        */
#v-ficha .sheet,#v-list .listwrap{position:relative}
/* cor primeiro, gradiente depois: sem a cor de fundo declarada, o
   que fica por baixo do gradiente é o navy do body               */
#v-ficha,#v-list{background-color:var(--white);
  background-image:linear-gradient(140deg,transparent 0 58%,var(--cream) 58% 100%)}
#v-ficha .spectable,#v-list .rows{background:var(--white)}
/* A linha inteira da listagem abre a ficha (ver catalogo.js). A
   mãozinha só aparece onde há ficha para abrir. */
.prow:has(.act a:not([target])){cursor:pointer}

/* "Sem equivalência levantada…" entra na grade das equivalências
   como se fosse um código, e ficava espremido numa coluna de
   190px. É uma frase: ocupa a linha inteira. */
.eqs > p{grid-column:1/-1}

/* ============================================================
   CELULAR
   ============================================================ */
@media (max-width:700px){
  .slot-dica{display:none}
  .slot-in{gap:5px}
  .slot-spec{font-size:11.5px}
  .type .type-txt{padding:20px 20px 24px}
  /* Três quadrados numa fileira de 393px dão 124px de lado: cabe o
     nome, não o rótulo em caixa alta com entreletra. */
  .slot--mini .slot-rot{display:none}
  .fichagal-mini{gap:8px}
}

/* 16:9 numa tela de 320px fecha em 158px de altura, e a
   especificação de vídeo é a mais longa de todas: o miolo precisa
   encolher junto com a caixa, senão transborda por baixo.       */
@media (max-width:430px){
  .slot[style*="16/9"] .slot-rot{display:none}
  .slot[style*="16/9"] .slot-in{padding:10px;gap:4px}
  .slot[style*="16/9"] .slot-vela{width:22px;height:22px;margin-bottom:0}
  .slot[style*="16/9"] .slot-nome{font-size:13px}
  .slot[style*="16/9"] .slot-spec{font-size:10px;padding:3px 6px;line-height:1.35}
}

/* ============================================================
   HERÓI DA LINHA COM FOTO
   A capa ocupa o herói inteiro e o texto entra por cima, como na
   página de produto do Osy Implementos. Era foto na metade
   direita e três linhas de texto na esquerda; virou uma imagem
   só, com o nome da linha e a descrição curta.

   O véu não é enfeite: a capa é foto real, com faixa clara no
   meio do quadro, e texto branco sobre ela sumia. O degradê
   pesa embaixo, que é onde o texto mora, e alivia em cima.
   ============================================================ */
.cathero--foto{
  /* Tela cheia, descontada a altura do que fica fixo acima dela: a
     barra do grupo e o cabeçalho, que são sticky e ocupam espaço no
     fluxo. Sem o desconto, a soma passaria de uma tela e a foto
     nunca apareceria inteira.

     O `vh` vem antes do `svh` de propósito: é a reserva para quem
     não entende a unidade nova. No celular o `svh` é o que impede a
     barra do navegador de cortar o pé do herói quando ela recolhe. */
  min-height:calc(100vh - var(--altura-barra-grupo,0px) - var(--altura-header,0px));
  min-height:calc(100svh - var(--altura-barra-grupo,0px) - var(--altura-header,0px));
  display:flex;align-items:flex-end;
  /* O bloco encosta no canto de baixo, como no herói de produto do
     Osy Implementos. O padding de cima é só o empurrão que joga o
     texto para lá quando a tela é alta; o de baixo é a margem que
     sobra até a borda. */
  padding-top:clamp(80px,14vh,200px);
  padding-bottom:clamp(26px,4vh,58px);
}
/* O nome da linha é o assunto do herói, e cresce para caber essa
   função: o .d1 de origem trava em 112px, aqui o teto é 152px.
   A entrelinha continua em .92, do .d1, senão duas linhas de 152px
   abrem um vão no meio do título. */
.cathero--foto .d1{font-size:clamp(54px,9vw,152px)}
.cathero--foto .eyebrow{font-size:13px;letter-spacing:.16em}
/* Nas telas estreitas o teto cai: 54px de piso com "Cilindros
   hidráulicos Hyva" em 360px de largura vira cinco linhas e empurra
   os botões para fora da tela. As duas larguras são as mesmas que o
   refinamentos.css já usa para o .d1. */
@media (max-width:560px){ .cathero--foto .d1{font-size:clamp(40px,11vw,72px)} }
@media (max-width:400px){ .cathero--foto .d1{font-size:38px} }
.cathero--foto .cathero-bg{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;object-fit:cover;
}
.cathero--foto .cathero-veu{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(
    to top,
    rgba(6,28,41,.94) 0%,
    rgba(6,28,41,.82) 34%,
    rgba(6,28,41,.52) 62%,
    rgba(6,28,41,.34) 100%);
}
/* uma coluna só: não há mais figura ao lado para equilibrar */
.cathero--foto .wrap{grid-template-columns:minmax(0,1fr);align-items:end}
.cathero--foto .lead{max-width:56ch;color:#dfe7ec}

/* ============================================================
   AS DUAS PECAS QUE DIVIDEM UM CODIGO
   A tela que a busca mostra quando o codigo digitado existe em
   mais de uma linha. Dois cartoes, empilhados no celular, lado
   a lado a partir de 720px — sao sempre dois ou tres, nunca uma
   lista longa.
   ============================================================ */
.duplas{display:grid;gap:14px;margin-top:28px;text-align:left}
@media(min-width:720px){.duplas{grid-template-columns:1fr 1fr}}
.dupla{display:grid;gap:6px;padding:20px;background:var(--cream);
  border:1px solid var(--line);cursor:pointer;text-align:left;
  transition:border-color .16s,background .16s}
.dupla:hover{border-color:var(--yellow);background:#fff}
.dupla-cat{font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3)}
.dupla-nome{font-size:17px;line-height:1.35;color:var(--navy)}
.dupla-marca{font-size:14px;color:var(--ink-3)}
.dupla .go{margin-top:8px;font-size:14px;color:var(--navy);font-weight:600}

/* ============================================================
   SEM FOTO, A PEÇA NÃO É DESENHADA
   Até 6 de outubro o lugar da foto que faltava era um espaço
   reservado com a especificação escrita dentro. Agora o lugar
   some, e o que estava ao lado ocupa a largura que sobra.
   ============================================================ */
/* herói sem capa (linha) e herói da página de marca: uma coluna */
.cathero.cathero--so .wrap{grid-template-columns:minmax(0,1fr)}
.cathero--so .wrap > div{max-width:820px}
/* "o que é" sem a foto ao lado: o texto volta à medida de leitura */
.prosewrap.prosewrap--so{grid-template-columns:minmax(0,1fr)}
.prosewrap.prosewrap--so .prose{max-width:72ch}
/* galeria só com fotos: sem o vídeo, o primeiro item não é mais
   o assunto do bloco e não leva a linha inteira */
.galeria.galeria--so-fotos > :first-child{grid-column:auto;max-width:none}