/* =========================================================================
   O TRAÇO DA MARCA — o problema no risco de cima, o que fazemos descendo

   A seção é a própria marca em escala de página. A geometria vem do
   `marca.svg` (viewBox 100×100) e está anotada no gerador, em `tracoMarca()`.
   O resumo do que importa aqui:

     · duas barras de largura cheia, em cima e embaixo;
     · a barra do meio RECUADA em 10,6% — é esse recuo que faz a forma ler
       como "S" e não como três traços empilhados;
     · a vertical FLUSH À DIREITA, fechando o lado; as horizontais terminam
       nela.

   A ESPESSURA NÃO ESCALA COM A POSIÇÃO. Na marca a vertical é 14,8% da
   largura; numa seção de 1.320px isso seria uma laje de 196px. Posição em
   porcentagem, espessura em constante — e a constante é o maior valor que a
   ALTURA consegue pagar, porque é a altura que tem teto: a peça precisa caber
   na tela sem rolar.
   ========================================================================= */

.s3-marcaS-secao { position: relative; overflow: hidden; }
/* O RESPIRO CABE NA JANELA. O cabecalho e sticky e encolhe de 125px para 49
   ao rolar, entao a altura util com a secao na tela e `janela menos 49`: 719px
   num notebook de 1366x768, que e o caso que aperta. */
/* O RESPIRO DE BAIXO E MAIOR que o de cima de propósito: nesta página a seção
   é seguida DIRETAMENTE pela chamada final, que tem fundo terracota. Sem esse
   respiro o ladrilho e ela encostariam, e dois blocos terracota encostados
   leem como um só. */
/* O RESPIRO SEGURA O TETO DAS SETE. A peça foi dimensionada contra o problema
   mais curto das sete soluções — 182 caracteres, duas linhas na barra do topo.
   As outras seis têm de 214 a 241 e ocupam TRÊS linhas, e uma linha da fonte
   de display a 19px custa 28px contra 26 de folga: cinco páginas passavam do
   teto por 2px. Os pixels que faltavam saíram daqui e de mais três respiros —
   nunca da proporção da marca. */
.s3-marcaS-secao { padding-block: clamp(16px, 1.8vw, 26px) clamp(20px, 2.2vw, 32px); }
.s3-marcaS-secao::before {
  content: '';
  position: absolute; left: 50%; top: 0;
  width: 900px; height: 420px; translate: -50% 0;
  background: radial-gradient(closest-side, rgba(166, 67, 43, .09), transparent 72%);
  pointer-events: none;
}
.s3-marcaS-secao > .s3-container { position: relative; z-index: 1; }

/* A ESPESSURA DA BARRA É A UNIDADE. No SVG toda medida é múltipla dela, e é
   isso que faz a forma continuar sendo a forma quando muda de escala:

     U = 11,24  (altura da barra do topo)
     margem do ladrilho .. 12,75 = 1,134 U
     raio das barras ..... 4     = 0,356 U
     vão topo→meio ....... 15,00 = 1,335 U
     recuo do meio ....... 7,91  = 0,704 U
     largura da haste .... 11,06 = 0,984 U  → é a própria espessura

   Havia aqui duas constantes soltas, um recuo em % e uma espessura em px, sem
   relação entre si — mexer numa desmontava a proporção da outra. Com `--u`,
   cada medida diz de onde veio e o conjunto anda junto.

   O QUE NÃO ESCALA COM U é a própria U: na marca a haste tem 14,8% da largura
   do desenho, e numa seção de 980px isso seria uma laje de 145px. Posição em
   múltiplos de U, U em px. */
/* O LADRILHO. O `marca.svg` começa por ele — `<rect width="100" height="100"
   rx="18" fill="#903A27"/>` — e é dele que o "S/3" se destaca. Sem o ladrilho
   as barras não tinham de onde sair.

   Ele obriga a INVERTER A POLARIDADE, porque no logo o fundo é terracota e as
   barras são claras. Pôr o ladrilho sem inverter não resolveria: terracota
   sobre terracota some.

   O RAIO É CONSTANTE, e não proporção. No SVG são 18 de 100, 18%; aqui o
   ladrilho é largo e baixo, e 18% da largura daria um raio maior que a altura
   inteira. Mesma lógica da espessura.

   E A PONTA FUNDA DA RAMPA, de propósito: nesta página a seção é seguida
   DIRETAMENTE pela chamada final, que é `--s3-laranja` chapado. Dois blocos
   terracota encostados leem como um só — aqui o ladrilho fica mais escuro que
   ela, e são dois planos. */
.s3-marcaS {
  /* A ESPESSURA. Era 7px, e a 7px as duas barras que são SÓ traço — a base e a
     haste — tinham espessura de fio de cabelo ao lado das duas que carregam
     texto. Na marca as quatro têm a mesma.

     O ideal é inalcançável, e vale dizer o número: U vale 11,24 de 100, e
     sobre os 936px úteis do ladrilho isso daria 105px de barra — numa peça de
     583px de altura interna. Quatro barras dessas não são uma adaptação da
     marca, são um bloco.

     Então a pergunta não é qual é a proporção: é QUANTO A SEÇÃO PAGA. O teto é
     duro — a peça tem de caber na tela sem rolar, 719px úteis no notebook de
     1366x768 — e a folga medida era de 31,5px contra 57 de custo. Os 26 que
     faltavam vieram do vão entre as linhas da lista: com um fundo próprio
     embaixo delas a lista virou PAINEL, e dentro de um painel quem separa
     linha é divisória, não espaço. As linhas não encolheram.

     A 32px, TRÊS das quatro barras têm exatamente a mesma espessura: meio,
     base e haste. A do topo é a exceção, e é a única que se justifica —
     carrega um parágrafo. */
  --u: 32px;
  --recuo: 10.6%;                  /* 0,704 U sobre a largura útil do SVG */
  --vao: calc(var(--u) * 1.335);   /* o vão entre a barra do topo e a do meio */
  /* O RAIO É 0,356 U — 4 sobre 11,24 na marca —, e NÃO metade da espessura.
     A 7px os dois valores davam 2,5 e 3,5 e ninguém via a diferença; a 32px
     dão 11 e 16, que é a diferença entre a barra da marca e uma pílula. */
  --raio: calc(var(--u) * .356);
  position: relative;
  max-width: 980px; margin-inline: auto;
  padding: clamp(14px, 1.6vw, 22px);
  border-radius: 22px;
  background-image: linear-gradient(150deg, #8E3B27 0%, #7A2F1F 52%, #6B2A1C 100%);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 236, 226, .22),
    0 26px 54px -26px rgba(45, 16, 9, .6),
    0 6px 14px -8px rgba(45, 16, 9, .4);
}

/* ---------------------------------------------------- A BARRA DO TOPO
   Largura cheia, como a barra de cima da marca. É nela que o problema mora —
   foi o pedido, e faz sentido de leitura: a dor vem primeiro e é uma só. */
/* O METAL DAS BARRAS.

   Elas eram terracota com um degradê de 150° — cor, não matéria. Aqui recebem
   o vocabulário completo do `.s3-selo3d` e do disco dos cartões de dor:

   · REFLEXO ANISOTRÓPICO: paradas alternando claro e escuro AO LONGO da
     barra. É a alternância que faz metal; degradê de duas paradas lê como
     plástico brilhante, por mais bonita que seja a cor.
   · CRISTA DE LUZ no alto e SOMBRA INTERNA no pé — é o par que dá espessura.
   · SOMBRA PROJETADA: a barra POUSA na página em vez de estar pintada nela.
   · a LÂMINA que atravessa ao apontar reusa `@keyframes s3-selo-varrer`, que
     já existe e já veste o selo da casa. */
.s3-marcaS__barra,
.s3-marcaS__topo,
.s3-marcaS__meio,
.s3-marcaS__base {
  position: relative;
  overflow: hidden;                    /* a lâmina corre por dentro */
  /* METAL CLARO. Mesma alternância anisotrópica de antes, invertida: papel e
     creme no lugar de terracota e café. Metal claro tem menos amplitude que
     metal escuro, então as paradas precisam de MAIS contraste entre si, e não
     menos — senão a alternância some e volta a ler como chapado. */
  background-image: linear-gradient(97deg,
    #FFFDFA  0%,    /* brilho */
    #E4D8CB 16%,    /* vale */
    #FBF5EE 32%,    /* brilho */
    #DCCEBF 50%,    /* vale fundo */
    #F7F0E7 66%,    /* brilho */
    #E0D3C4 84%,    /* vale */
    #FEFBF6 100%);  /* brilho de saída */
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, .9),
    inset 0 -5px 10px -6px rgba(107, 42, 28, .35),
    0 10px 22px -12px rgba(45, 16, 9, .5),
    0 2px 4px -2px rgba(45, 16, 9, .35);
  transition: transform 420ms var(--s3-curva-expressiva),
              box-shadow 420ms var(--s3-curva-expressiva);
}
/* A LÂMINA DE LUZ, a mesma do selo da casa — inclusive o mesmo keyframes. Não
   escrevi animação nova: usei a que o site já tem. */
.s3-marcaS__luz {
  position: absolute; inset: 0; overflow: hidden;
  border-radius: inherit; pointer-events: none;
}
.s3-marcaS__luz::after {
  content: ''; position: absolute; top: -40%; bottom: -40%;
  left: -30%; width: 22%;
  background: linear-gradient(90deg,
    transparent, rgba(255, 255, 255, .9) 42%, rgba(255, 255, 255, .9) 58%, transparent);
  transform: translateX(-140%) rotate(14deg);
  opacity: 0;
}
.s3-marcaS__topo:hover .s3-marcaS__luz::after,
.s3-marcaS__meio:hover .s3-marcaS__luz::after {
  animation: s3-selo-varrer 900ms cubic-bezier(.3, 0, .2, 1) 40ms;
}
/* SOBRESSALTO: a barra sobe e a sombra aprofunda junto */
.s3-marcaS__topo:hover,
.s3-marcaS__meio:hover {
  transform: translateY(-3px);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 244, 236, .5),
    inset 0 -6px 12px -6px rgba(45, 16, 9, .75),
    0 20px 36px -14px rgba(63, 21, 12, .58),
    0 3px 6px -2px rgba(63, 21, 12, .4);
}

.s3-marcaS__topo {
  padding: var(--s3-e-4) var(--s3-e-7);
  border-radius: var(--raio);
  color: var(--s3-texto);
}
.s3-marcaS__rot {
  margin: 0 0 var(--s3-e-4);
  font-family: var(--s3-fonte-mono);
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--s3-laranja-texto);
}
.s3-marcaS__prob {
  margin: 0;
  font-family: var(--s3-fonte-display);
  font-size: clamp(16px, 1.5vw, 19px); line-height: 1.45;
  font-weight: var(--s3-peso-forte);
  color: var(--s3-tinta);
  text-wrap: pretty;
}

/* -------------------------------------------------- A BARRA DO MEIO
   É ela que faz o desenho ler como "S" e não como duas barras com coisas no
   meio. Começa RECUADA — 20,66 contra 12,75 no SVG — e é desse recuo que as
   frentes herdam o alinhamento. O vão acima dela é 1,335 U, o mesmo do
   desenho: no ícone aquele espaço é vazio, e aqui também. */
.s3-marcaS__meio {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s3-e-6);
  /* ELA TEM EXATAMENTE U. Tinha 36px de conteúdo mais respiro, cinco vezes a
     espessura da base — três barras da mesma letra com três espessuras. Agora
     a altura É a espessura, e os rótulos se centram dentro dela. */
  min-height: var(--u);
  margin: var(--vao) 0 0 var(--recuo);
  padding: var(--s3-e-1) var(--s3-e-7);
  border-radius: var(--raio);
  /* ACIMA da haste: é a sobreposição que solda o canto, como no SVG, onde os
     retângulos se cruzam em vez de se encostar */
  z-index: 1;
}
.s3-marcaS__meio .s3-marcaS__rot { margin: 0; }
.s3-marcaS__conta {
  margin: 0;
  font-family: var(--s3-fonte-mono);
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--s3-laranja-texto);
}

/* ------------------------------------------------------- A DESCIDA
   As frentes são as horizontais da marca: recuadas à esquerda como a barra do
   meio, e terminando na vertical da direita. */
/* CABER SEM ROLAR. A peça media 1.205px numa janela útil de ~780. O corte
   veio do espaço, não do conteúdo: as seis frentes continuam com título E
   descrição à mostra. Encolheram os respiros e a altura de cada linha. */
.s3-marcaS__descida {
  position: relative; z-index: 0;
  list-style: none;
  margin: 0 0 0 var(--recuo);
  /* O RESPIRO DA HASTE NÃO MORA AQUI. Ele estava neste padding, e com isso a
     caixa de cada linha — e o filete que a fecha — terminava 52px antes da
     vertical. Seis filetes parando no mesmo x desenham uma aresta no meio da
     contraforma, justamente onde o desenho manda a horizontal ENCONTRAR a
     vertical. A 7px de haste o respiro era 27 e ninguém via; a 32 são 52. */
  padding: var(--s3-e-3) 0;
  /* SEM VÃO: as linhas se encostam e quem separa é o filete. Foi essa troca
     que pagou os 26px que faltavam para engrossar o traço — e ela é a leitura
     certa de qualquer jeito, porque dentro de um painel linha se separa com
     divisória, não com espaço. O respiro interno das linhas não mudou. */
  display: flex; flex-direction: column; gap: 0;
}
/* O FUNDO DA LISTA É UM RECESSO — e já foi um véu claro, que foi um erro de
   leitura do pedido.

   O pedido era "um pouco de contraste mais claro no fundo da lista", e eu
   tratei "mais claro" como o requisito. O requisito era CONTRASTE: o campo da
   lista precisa se distinguir do ladrilho. "Mais claro" era o meio — e esse
   meio briga com o fim, porque o texto da lista É CLARO, então clarear o chão
   aproxima os dois. A descrição caiu de 5,6:1 para 4,79:1 e foi apontada como
   pouco legível. O campo ficou visível às custas da leitura.

   O campo continua existindo; o que mudou foi PARA QUE LADO ele se distingue.
   Escuro resolve os dois de uma vez — o campo se separa do ladrilho, o texto
   claro ganha chão, e de quebra a contraforma escurece, então o "S" lê melhor.

   E é a leitura física certa, que a anterior não era. Eu contei uma história
   de luz rebatida, mas as barras são RELEVO e já projetam sombra aqui no CSS.
   O que existe entre barras em relevo não é um clarão: é um POÇO. A barra do
   meio joga sombra para baixo, sobre o topo da lista, e a haste faz parede à
   direita. O painel é o fundo desse poço.

   A SOMBRA É CHAPADA NO MIOLO, e só reforça encostada nas duas barras. Um
   degradê forte faria a legibilidade variar de linha para linha — que é
   exatamente o defeito que este bloco está consertando.

   O QUE FAZ O PAINEL NÃO TER CAIXA são os quatro lados, cada um resolvido de
   um jeito: em cima ele enfia sob a barra do meio, que tem z-index 1; embaixo
   sob a barra da base, que pinta depois; à direita sob a haste; e à esquerda
   uma máscara de 26px o apaga antes que ele vire aresta. Nenhum dos quatro
   aparece como linha. */
.s3-marcaS__descida::before {
  content: '';
  position: absolute; z-index: -1; pointer-events: none;
  top: calc(var(--u) * -.3);
  bottom: calc((var(--s3-e-5) + var(--u) * .3) * -1);
  left: 0; right: calc(var(--u) * .4);
  border-radius: var(--raio);
  background-image:
    /* a sombra que a barra do meio joga na boca do poço */
    linear-gradient(180deg,
      rgba(38, 13, 7, .32) 0%,
      rgba(38, 13, 7, .23) 30%,
      rgba(38, 13, 7, .2) 100%),
    /* e a parede da haste, à direita */
    linear-gradient(270deg, rgba(38, 13, 7, .1), transparent 52%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 26px);
          mask-image: linear-gradient(90deg, transparent 0, #000 26px);
}

/* A VERTICAL. Encosta na direita e desce da primeira frente até a barra da
   base — na marca ela vai do topo da barra do meio ao pé da barra da base. O
   `bottom` negativo é o que a faz encontrar a base, e não parar antes. */
.s3-marcaS__descida::after {
  content: '';
  position: absolute; right: 0;
  /* sobe ATÉ DENTRO da barra do meio e desce ATÉ DENTRO da barra da base: as
     pontas arredondadas somem sob elas e os dois cantos ficam soldados. Uma
     haste que parasse rente às barras leria como encostada, não soldada — que
     é a diferença entre o desenho e a colagem. */
  top: calc(var(--u) * -.5);
  bottom: calc((var(--s3-e-5) + var(--u) * .5) * -1);
  z-index: 0;
  width: var(--u);
  border-radius: var(--raio);
  /* O REFLEXO CORRE NO SENTIDO DELA. Metal escovado tem direção: uma haste
     com o brilho deitado leria como um pedaço de outra peça. Mesmas paradas
     alternadas das barras, giradas 90°. */
  background-image: linear-gradient(187deg,
    #FFFDFA 0%, #E4D8CB 16%, #FBF5EE 32%, #DCCEBF 50%,
    #F7F0E7 66%, #E0D3C4 84%, #FEFBF6 100%);
  box-shadow:
    inset 1.5px 0 0 rgba(255, 255, 255, .9),
    inset -2px 0 5px -2px rgba(107, 42, 28, .3);
}

/* AS FRENTES VIVEM NA CONTRAFORMA, e não em cartões.

   No logo, o espaço entre a barra do meio e a base, à esquerda da haste, é
   VAZIO — é a contraforma da letra, e é ela que faz o olho ler "S" e "3". Um
   "S" com o miolo preenchido não é um S, é um retângulo.

   Havia aqui seis cartões brancos preenchendo exatamente esse miolo, e com
   isso o branco deixava de ser o traço e virava a massa: um bloco claro no
   meio de um quadro terracota, com quatro riscos em volta que ninguém mais
   lia como letra.

   A REGRA QUE FICA: no ladrilho, claro é cor de TRAÇO. Se não é um dos quatro
   riscos da marca, não pode ser claro. Texto pode — texto não é massa. */
.s3-marcaS__frente {
  position: relative;
  display: flex; align-items: baseline; gap: var(--s3-e-6);
  /* de ponta a ponta: o filete corre até se enfiar SOB a haste, soldado, como
     as horizontais da marca encontram a vertical. O respiro que afasta o
     texto do tronco é este padding à direita. */
  padding: 9px calc(var(--u) + var(--s3-e-7)) 9px var(--s3-e-4);
  border-radius: 8px;
  /* filete finíssimo entre as linhas, no lugar da borda de um cartão */
  box-shadow: inset 0 -1px 0 rgba(255, 240, 232, .17);
  transition: background-color 260ms ease;
}
.s3-marcaS__n, .s3-marcaS__txt {
  transition: transform 300ms var(--s3-curva-saida);
}
.s3-marcaS__frente:last-child { box-shadow: none; }
/* O SELO DO NÚMERO É O `.s3-selo3d` DA CASA — a mesma peça do botão
   "Siga-nos" do cabeçalho, na variante numerada que já existia.

   Ele já esteve aqui, saiu, e volta — e o que mudou não foi a opinião, foi o
   CHÃO. Enquanto a lista tinha o ladrilho terracota por baixo, relevo
   terracota sobre terracota não se via. Quando o fundo virou recesso, o chão
   caiu de 65,5 para 50,6 e abriu-se faixa de valor para o selo morar:

       chão da lista ..... ~50    (o recesso)
       o selo ............ ~85    (o ladrilho terracota em relevo)
       as barras ......... ~220   (o traço)

   Três valores separados: o selo aparece sem nunca ser confundido com traço.
   A regra "no ladrilho, claro é cor de traço" não foi flexibilizada — é ela
   que decide que este selo é terracota e não chapa clara.

   AQUI SÓ MORA O QUE O FUNDO ESCURO EXIGE. Tudo o mais — tamanho por `--selo`,
   gradiente de 150°, crista, lâmina, sobressalto por `[data-selo-palco]` — vem
   de componentes.css e não é repetido. */
.s3-marcaS__selo {
  /* centrado na linha: o selo marca a LINHA INTEIRA, não o título. Alinhado
     ao topo ele ficava pendurado na altura da primeira linha. */
  align-self: center;
  /* O ARO DE LUZ, emprestado do medalhão das OSCs, e a única coisa que este
     selo tem a mais que o do cabeçalho. Motivo: lá ele pousa em PAPEL (~245) e
     o pé escuro do gradiente (#6E2B1D, ~56) desenha a silhueta sozinho; aqui
     o chão é o recesso (~50) e esse mesmo pé fica a 6 pontos dele — a borda de
     baixo dissolve no fundo. Alfa baixo de propósito: não muda a cor nem a
     leitura, só garante que o contorno exista do lado onde o gradiente é
     escuro demais para se separar do chão. */
  box-shadow:
    inset 0 0 0 1px rgba(255, 240, 230, .2),
    inset 0 1px 0 rgba(251, 248, 243, .38),
    inset 0 -3px 8px -3px rgba(45, 16, 9, .6),
    /* a sombra projetada encolhe: sobre papel ela afasta a peça do fundo, e
       sobre um recesso escuro ela quase não aparece — não vale o borrão */
    0 3px 7px -3px rgba(24, 8, 4, .6);
}

/* A CUNHAGEM NA ENTRADA é `animation`, e nunca `transition` a partir de um
   estado parado — a diferença já me custou caro. Um selo esperando em
   `scale(.7)` por `[data-visivel]` fica encolhido para sempre se o observador
   não disparar. Com animação, o estado natural do selo É o estado final: sem
   revelação ele simplesmente está certo, só não teve entrada.
   E a escada sai de graça: o interacoes.js liga `data-visivel` linha a linha
   com setTimeout, então cada selo é cunhado no seu tempo. */
@keyframes s3-marcaS-cunhar {
  0%   { transform: rotate(-14deg) scale(.62); }
  58%  { transform: rotate(3deg) scale(1.06); }
  100% { transform: none; }
}
.s3-marcaS__frente[data-visivel="true"] .s3-marcaS__selo {
  animation: s3-marcaS-cunhar 620ms var(--s3-curva-expressiva);
}

/* OS TRAVESSÕES SAÍRAM. Eram riscos claros ligando cada linha à haste —
   discretos como hairlines, mas ainda assim MARCAS CLARAS DENTRO DA
   CONTRAFORMA, que é a mesma falha dos cartões em dose menor. As linhas já
   terminam na haste; não precisam de um risco dizendo isso. */

/* presença sem virar massa: o véu acende PARADO e quem dá o passo é o
   conteúdo. Antes andava a linha inteira, e agora que a caixa vai até a
   borda isso faria o véu passar 5px ALÉM da haste — um coto claro do outro
   lado do tronco. */
.s3-marcaS__frente:hover {
  background-color: rgba(255, 240, 232, .1);
}
.s3-marcaS__frente:hover .s3-marcaS__txt { transform: translateX(5px); }
/* SOBRESSALTO: é o da casa — sobe e cresce —, com o passo de 5px da linha
   somado na mesma transformação. O GIRO SAIU junto com o disco redondo: ele
   existia para denunciar metal anisotrópico girando, e obrigava o numeral a
   girar ao contrário para não tombar. Ladrilho quadrado não gira. */
.s3-marcaS__frente:hover .s3-marcaS__selo,
.s3-marcaS__frente:focus-within .s3-marcaS__selo {
  transform: translate(5px, -5px) scale(1.08);
  box-shadow:
    inset 0 0 0 1px rgba(255, 244, 236, .3),
    inset 0 1px 0 rgba(251, 248, 243, .5),
    inset 0 -3px 8px -3px rgba(45, 16, 9, .6),
    0 10px 18px -6px rgba(24, 8, 4, .7);
}
.s3-marcaS__frente:hover .s3-marcaS__n { color: rgba(255, 246, 238, .95); }
.s3-marcaS__txt { min-width: 0; }
/* claro sobre o ladrilho — mas TEXTO, não superfície */
.s3-marcaS__txt .s3-titulo-cartao {
  margin: 0 0 2px; font-size: 15.5px; line-height: 1.25;
  color: #FFFBF6;
}
.s3-marcaS__txt .s3-apoio {
  font-size: 13px; line-height: 1.4;
  /* 84% e não 78%: num texto de 13px não há por que gastar contraste à toa. A
     hierarquia contra o título continua de pé pelo tamanho e pelo peso, que é
     onde ela deve morar — não na opacidade. */
  color: rgba(255, 236, 226, .84);
}
.s3-marcaS__txt .s3-apoio { margin: 0; }

/* -------------------------------------------------- A BARRA DA BASE
   Fecha a forma. Fina de propósito: a de cima carrega texto e por isso é um
   bloco; esta é só o traço que termina o "S". */
.s3-marcaS__base {
  display: block;
  height: var(--u);
  margin-top: var(--s3-e-4);
  border-radius: var(--raio);
}

/* ------------------------------------------------------------ celular
   Abaixo de 720px o recuo sai e o trilho vai para a ESQUERDA. Não é
   inconsistência: numa coluna estreita, um trilho à direita empurraria o
   texto para longe da margem de leitura, e o recuo de 10,6% comeria largura
   que não sobra. A forma cede à leitura, e é a leitura que paga a conta. */
@media (max-width: 720px) {
  /* NO ESTREITO A ESPESSURA CAI, mas não volta a ser fio: 14px sobre uma
     coluna de ~330px é proporcionalmente MAIS grosso que os 32 sobre 936 do
     desktop. O que limita aqui é a largura que sobra para o texto. */
  .s3-marcaS { --u: 14px; }
  /* O PAINEL VIRA JUNTO COM A HASTE. Ela vai para a esquerda no celular, e é
     dela que a luz rebate: o véu passa a se enfiar sob ela e a se apagar do
     outro lado. */
  .s3-marcaS__descida::before {
    left: calc(var(--u) * .4); right: 0;
    -webkit-mask-image: linear-gradient(270deg, transparent 0, #000 26px);
            mask-image: linear-gradient(270deg, transparent 0, #000 26px);
  }
  .s3-marcaS__descida { margin-left: 0; padding: var(--s3-e-8) 0; }
  /* o respiro do tronco troca de lado junto com ele */
  .s3-marcaS__frente {
    padding-right: var(--s3-e-4);
    padding-left: calc(var(--u) + var(--s3-e-7));
  }
  .s3-marcaS__descida::after { right: auto; left: 0; }
  /* E O RECUO TROCA DE LADO JUNTO COM ELA. Faltava esta linha, e a falta
     quebrava a letra no celular: a haste ia para a esquerda e o recuo da barra
     do meio ficava na esquerda também, então as duas coisas que desenham o "S"
     ficavam do MESMO lado e o canto onde elas deviam se cruzar ficava vazio —
     a ponta arredondada da haste boiando no terracota, e a aresta de cima do
     painel exposta no vão, porque a barra que deveria cobri-la tinha saído de
     posição.

     Não é `margin-left: 0` e pronto: isso solda o canto e perde o recuo, e é o
     recuo que faz a forma ler como "S" em vez de três traços empilhados. A
     barra começa rente à esquerda, cobrindo a ponta da haste, e recua à
     direita — o lado oposto ao tronco, como na marca. */
  .s3-marcaS__meio { margin-left: 0; margin-right: var(--recuo); }
  /* O SELO ENCOLHE NO ESTREITO. A 34px ele e o vao comiam 50 dos ~330px do
     painel, e as descricoes passaram a quebrar em tres linhas. Aqui a conta
     nao e de acabamento, e de largura de coluna: 26px e o vao menor devolvem
     12px de texto por linha. */
  .s3-marcaS__selo { --selo: 26px; }
  .s3-marcaS__frente { gap: var(--s3-e-5); }
  .s3-marcaS__frente:hover .s3-marcaS__txt { transform: none; }
  .s3-marcaS__frente:hover .s3-marcaS__selo { transform: translateY(-4px) scale(1.06); }
  .s3-marcaS__topo { padding: var(--s3-e-7); }
}

@media (prefers-reduced-motion: reduce) {
  .s3-marcaS__frente, .s3-marcaS__topo, .s3-marcaS__meio,
  .s3-marcaS__selo, .s3-marcaS__txt { transition: none; }
  .s3-marcaS__topo:hover, .s3-marcaS__meio:hover,
  .s3-marcaS__frente:hover .s3-marcaS__selo,
  .s3-marcaS__frente:hover .s3-marcaS__txt { transform: none; }
  /* a cunhagem some junto: quem pediu menos movimento não quer seis discos
     girando na entrada */
  .s3-marcaS__frente[data-visivel="true"] .s3-marcaS__selo { animation: none; }
  .s3-marcaS__luz::after { animation: none !important; }
}