/* =========================================================================
   COMPONENTES DE PÁGINA — Sistema Rocktron

   Sistema editorial: laranja Rocktron sobre papel morno e tinta grafite.
   Uma cor cromática só, dois pesos de fonte, raio largo e constante, e
   nenhuma sombra em lugar nenhum — camadas se separam por tom.

   A pilha de superfícies, do fundo para a frente:
     branco (#fff) → papel (#f4f3ef) → laranja (#e18600) → ilha (#2f3238)

   Nada aqui tem valor solto. Cor, espaço, raio, curva e duração saem dos
   tokens. Mudou o token, mudou o site inteiro.
   ========================================================================= */

/* --- Container ----------------------------------------------------------- */

.pg {
  --pg-max: var(--wp--style--global--wide-size, 75rem);
  --pg-pad: clamp(1.25rem, 5vw, 2.5rem);
  --pg-rule: 1px solid var(--wp--preset--color--line);
  --pg-card-pad: clamp(2rem, 3.5vw, 3rem); /* 32 a 48px, regra 9 do manual */

  max-width: var(--pg-max);
  margin-inline: auto;
  padding-inline: var(--pg-pad);
  color: var(--wp--preset--color--ink);
  font-weight: var(--rt-weight-regular);
}

/* Faixas de borda a borda. O conteúdo interno volta para a medida do
   container por .pg-bleed__in. */
.pg-bleed {
  position: relative;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
}

.pg-bleed__in {
  max-width: var(--pg-max, 75rem);
  margin-inline: auto;
  padding-inline: var(--pg-pad, clamp(1.25rem, 5vw, 2.5rem));
}

/* As bandas tonais alternam o fundo da página. Sem borda, sem sombra:
   a mudança de tom é o separador. */
.pg-bleed--paper { background: var(--wp--preset--color--surface-muted); }
.pg-bleed--cool  { background: var(--wp--preset--color--surface-cool); }

/* Ilha escura: momento raro, para virar a página do claro ao escuro. */
.pg-bleed--dark {
  background: var(--wp--preset--color--surface-strong);
  color: var(--wp--preset--color--surface);
}

/* Banda de ação: o laranja É o fundo, não precisa de mais nada em cima. */
.pg-bleed--acao {
  background: var(--wp--preset--color--action);
  color: var(--wp--preset--color--brand);
}

.pg-bleed--dark :where(h1, h2, h3, h4) { color: var(--wp--preset--color--surface); }
.pg-bleed--dark .pg-idx,
.pg-bleed--dark .pg-eyebrow { color: var(--wp--preset--color--action); }

/* O cabeçalho e o corpo da seção têm regra própria de cor, mais específica
   que a da faixa. Sobre grafite ela deixaria o texto ilegível. */
.pg-bleed--dark p,
.pg-bleed--dark .pg-sec__head p,
.pg-bleed--dark .pg-sec__body p { color: var(--wp--preset--color--surface); opacity: 0.82; }

.pg-bleed--dark .pg-spec { border-top-color: rgba(255, 255, 255, 0.2); }

.pg-bleed--acao :where(h1, h2, h3, h4, p),
.pg-bleed--acao .pg-idx,
.pg-bleed--acao .pg-eyebrow { color: var(--wp--preset--color--brand); }

/* --- Tipografia ---------------------------------------------------------- */

/* balance equilibra o comprimento das linhas e, em cartao estreito, produz
   uma palavra por linha. pretty so evita orfao — que e o que queremos. */
.pg :where(h1, h2, h3, h4, h5) {
  font-weight: var(--rt-weight-medium);
  text-wrap: pretty;
}

.pg-display,
.pg h1 {
  margin: 0;
  font-size: var(--rt-size-display);
  line-height: var(--rt-leading-display);
  letter-spacing: var(--rt-tracking-display);
}

.pg h2 {
  margin: 0;
  font-size: var(--rt-size-heading-lg);
  line-height: var(--rt-leading-heading-lg);
  letter-spacing: var(--rt-tracking-display);
}

.pg h3 {
  margin: 0;
  font-size: var(--rt-size-heading);
  line-height: var(--rt-leading-heading);
  letter-spacing: var(--rt-tracking-heading);
}

.pg h4 {
  margin: 0;
  font-size: var(--rt-size-subheading);
  line-height: var(--rt-leading-subheading);
}

.pg p {
  font-size: var(--rt-size-body);
  line-height: var(--rt-leading-body);
}

/* Micro-rótulo: o único lugar do sistema com caixa alta e entreletras aberto. */
.pg-eyebrow,
.pg-idx,
.pg-spec__n,
.pg-card__label,
.pg-mod__n,
.pg-num small {
  font-size: var(--rt-size-caption);
  font-weight: var(--rt-weight-medium);
  letter-spacing: var(--rt-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--wp--preset--color--ink-muted);
}

.pg-eyebrow,
.pg-idx {
  display: block;
  margin: 0 0 var(--wp--preset--spacing--sm);
}

/* --- Abertura ------------------------------------------------------------ */

.pg-open {
  position: relative;
  padding-block: clamp(3.5rem, 9vw, 7.5rem) clamp(3rem, 6vw, 5rem);
}

.pg-open__lead {
  max-width: 46ch;
  margin: var(--wp--preset--spacing--md) 0 0;
  font-size: var(--rt-size-subheading);
  line-height: 1.35;
  color: var(--wp--preset--color--ink-muted);
}

/* --- Seções -------------------------------------------------------------- */

/* Ritmo editorial: 80 a 120px entre seções, e uma régua marcando o limite.
   O sistema usa linha, não só espaço em branco. */
/* Ritmo editorial: 80 a 120px ENTRE secoes. Como cada secao paga metade em
   cima e metade embaixo, o valor aqui e a metade — senao viram 240px de vao. */
.pg-sec {
  padding-block: clamp(2.5rem, 4vw, 3.5rem);
  border-top: var(--pg-rule);
}

.pg-sec:first-child,
.pg-bleed .pg-sec,
.pg-open + .pg-sec { border-top: 0; }

/* A medida em ch e calculada no tamanho do CONTAINER, nao no do titulo.
   Com 46ch aqui, um h2 de 60px quebrava a cada duas palavras. A medida do
   texto de apoio continua sendo 46ch — mas aplicada no proprio paragrafo. */
.pg-sec__head {
  display: grid;
  gap: var(--wp--preset--spacing--md);
  margin-bottom: var(--wp--preset--spacing--lg);
  max-width: 54rem;
}

.pg-sec__head h2 {
  max-width: 24ch;
}

.pg-sec__head p {
  max-width: 52ch;
  margin: var(--wp--preset--spacing--sm) 0 0;
  font-size: var(--rt-size-subheading);
  line-height: 1.35;
  color: var(--wp--preset--color--ink-muted);
}

.pg-sec__body { display: grid; gap: var(--wp--preset--spacing--lg); }

/* --- Botões -------------------------------------------------------------- */

.pg-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wp--preset--spacing--sm);
  margin: 0;
  padding: 0;
}

.pg-open .pg-actions { margin-top: var(--wp--preset--spacing--lg); }

.pg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0.875rem 1.75rem;
  border: 0;
  border-radius: var(--rt-radius-button);
  font-size: var(--rt-size-body);
  font-weight: var(--rt-weight-medium);
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--rt-duration-fast) var(--rt-ease),
    color var(--rt-duration-fast) var(--rt-ease),
    transform var(--rt-duration-base) var(--rt-ease);
}

/* O ÚNICO botão preenchido do sistema. Laranja com texto grafite: 5.6:1,
   passa em AA. Branco sobre laranja daria 2.76:1 e está proibido. */
.pg-btn--acao {
  background: var(--wp--preset--color--action);
  color: var(--wp--preset--color--brand);
}

.pg-btn--acao:hover { background: var(--rt-accent-hover, #c97800); }
.pg-btn--acao:active { transform: translateY(1px); }

/* Secundário e fantasma são o mesmo gesto: sem preenchimento, a borda é a
   afordância. Não existe um segundo botão colorido. */
.pg-btn--primary,
.pg-btn--ghost {
  background: transparent;
  color: var(--wp--preset--color--ink);
  box-shadow: inset 0 0 0 1px var(--wp--preset--color--line-strong);
}

.pg-btn--primary:hover,
.pg-btn--ghost:hover {
  background: var(--wp--preset--color--surface-muted);
  box-shadow: inset 0 0 0 1px var(--wp--preset--color--ink);
}

/* Sobre foto ou faixa escura o contorno cinza some. Este e o mesmo botao
   secundario, so que desenhado em branco. */
.pg-btn--claro {
  background: transparent;
  color: var(--wp--preset--color--surface);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55);
}

.pg-btn--claro:hover {
  background: rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 0 0 1px var(--wp--preset--color--surface);
}

.pg-btn--claro:focus-visible { outline-color: var(--wp--preset--color--surface); }

.pg-bleed--dark .pg-btn--primary,
.pg-bleed--dark .pg-btn--ghost {
  color: var(--wp--preset--color--surface);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}

.pg-bleed--dark .pg-btn--primary:hover,
.pg-bleed--dark .pg-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 0 1px var(--wp--preset--color--surface);
}

.pg-btn:focus-visible {
  outline: var(--rt-focus-width) solid var(--rt-focus-color);
  outline-offset: var(--rt-focus-offset);
}

.pg-bleed--dark .pg-btn:focus-visible { outline-color: var(--wp--preset--color--surface); }

/* --- Cartões ------------------------------------------------------------- */

/* O cartão é a peça central do sistema: papel morno sobre branco, raio
   largo, sem borda e sem sombra. Ele se levanta da página por tom. */
.pg-cards,
.pg-specs,
.pg-mods {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--wp--preset--spacing--md);
}

@media (min-width: 40rem) {
  .pg-cards, .pg-specs, .pg-mods { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 62rem) {
  .pg-cards, .pg-specs, .pg-mods { grid-template-columns: repeat(3, 1fr); }
}

.pg-card,
.pg-spec,
.pg-mod {
  display: grid;
  align-content: start;
  gap: var(--wp--preset--spacing--xs);
  padding: var(--pg-card-pad, 2rem);
  border: 0;
  border-radius: var(--rt-radius-card);
  background: var(--wp--preset--color--surface-muted);
}

/* Sobre papel, o cartão inverte: fica branco para se destacar do fundo. */
.pg-bleed--paper .pg-card,
.pg-bleed--paper .pg-spec,
.pg-bleed--paper .pg-mod { background: var(--wp--preset--color--surface); }

.pg-bleed--dark .pg-card,
.pg-bleed--dark .pg-spec,
.pg-bleed--dark .pg-mod { background: rgba(255, 255, 255, 0.06); }

.pg-card h3,
.pg-spec h3,
.pg-mod h3,
.pg-card h2,
.pg-mod h2 {
  font-size: var(--rt-size-heading);
  line-height: var(--rt-leading-heading);
  letter-spacing: var(--rt-tracking-heading);
}

.pg-card p,
.pg-spec p,
.pg-mod p {
  margin: 0;
  color: var(--wp--preset--color--ink-muted);
  font-size: var(--rt-size-body);
  line-height: var(--rt-leading-body);
}

/* A tampa cega era peça do desenho antigo, de painel. Aqui não existe:
   uma grade de cartões pode terminar incompleta sem parecer defeito. */
.pg-mod--cega { display: none; }

/* --- Números ------------------------------------------------------------- */

.pg-nums {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
  gap: var(--wp--preset--spacing--lg);
}

.pg-num b {
  display: block;
  font-size: var(--rt-size-heading-lg);
  font-weight: var(--rt-weight-medium);
  line-height: 1;
  letter-spacing: var(--rt-tracking-display);
}

.pg-num small {
  display: block;
  margin-top: var(--wp--preset--spacing--sm);
  text-transform: none;
  letter-spacing: normal;
  font-size: var(--rt-size-body-sm);
  line-height: 1.4;
}

/* --- Listas e definições ------------------------------------------------- */

.pg-list,
.pg-steps {
  margin: 0;
  padding-left: 1.25rem;
  display: grid;
  gap: var(--wp--preset--spacing--sm);
}

.pg-steps li::marker { color: var(--wp--preset--color--action-strong); }

.pg-def {
  display: grid;
  grid-template-columns: minmax(8rem, 14rem) 1fr;
  gap: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--md);
  margin: 0;
  padding-top: var(--wp--preset--spacing--md);
  border-top: var(--pg-rule);
}

.pg-def dt {
  font-size: var(--rt-size-caption);
  font-weight: var(--rt-weight-medium);
  letter-spacing: var(--rt-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--wp--preset--color--ink-muted);
}

.pg-def dd { margin: 0; }

@media (max-width: 40rem) {
  .pg-def { grid-template-columns: 1fr; gap: var(--wp--preset--spacing--xxs); }
  .pg-def dd { margin-bottom: var(--wp--preset--spacing--sm); }
}

/* --- Texto corrido ------------------------------------------------------- */

.pg-prose { max-width: 62ch; display: grid; gap: var(--wp--preset--spacing--md); }
.pg-prose p { margin: 0; color: var(--wp--preset--color--ink-soft); }

.pg-prose__lead {
  font-size: var(--rt-size-subheading);
  line-height: 1.35;
  color: var(--wp--preset--color--ink) !important;
}

.pg-note {
  max-width: 62ch;
  color: var(--wp--preset--color--ink-muted);
  font-size: var(--rt-size-body-sm);
}

.pg-split {
  display: grid;
  gap: var(--wp--preset--spacing--lg);
  align-items: start;
}

@media (min-width: 56rem) {
  .pg-split { grid-template-columns: 1fr 1fr; gap: var(--wp--preset--spacing--xl); }
}

/* --- Imagens ------------------------------------------------------------- */

/* Imagem é inserção editorial, não atmosfera: contida no raio do sistema,
   sobre branco ou papel, sem moldura e sem sombra. */
.pg-fig {
  margin: 0;
  border-radius: var(--rt-radius-card);
  overflow: hidden;
  background: var(--wp--preset--color--surface-muted);
}

.pg-fig img {
  display: block;
  width: 100%;
  height: auto;
}

.pg-fig figcaption {
  padding: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--md);
  color: var(--wp--preset--color--ink-muted);
  font-size: var(--rt-size-body-sm);
  line-height: 1.4;
}

/* Numa faixa de borda a borda, a figura larga respeita a medida da página
   e mantém o raio: nada encosta no canto da tela. */
.pg-bleed > .pg-fig--wide {
  max-width: var(--pg-max, 75rem);
  margin-inline: auto;
  margin-block: clamp(2rem, 5vw, 4rem);
  padding-inline: 0;
  width: calc(100% - 2 * var(--pg-pad, 2.5rem));
}

/* --- Higiene ------------------------------------------------------------- */

/* Sem isso, .pg-bleed com 100vw cria barra de rolagem horizontal. Vai no
   main e não no html, para não quebrar o cabeçalho fixo. */
main { overflow-x: clip; }

/* O sistema nao usa elevacao: os tokens --rt-shadow-* ja valem none. Nao
   existe regra varrendo box-shadow aqui, porque ela zerava o contorno dos
   botoes secundarios, que usam inset como borda. */

/* =========================================================================
   GRADE DE FAMILIAS

   Usada na home e no indice de solucoes. Mora aqui, e nao no CSS de uma
   pagina, justamente porque duas paginas dependem dela.
   ========================================================================= */

/* --- Famílias de solução: foto com o nome dentro ------------------------- */

/* O formato que o site atual acerta: a foto ocupa o cartão inteiro e o nome
   vive sobre ela. Ler a grade é ver os produtos, não ler uma lista. */
.home-fams {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--wp--preset--spacing--sm);
}

@media (min-width: 40rem) { .home-fams { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .home-fams { grid-template-columns: repeat(3, 1fr); } }

.home-fam {
  position: relative;
  isolation: isolate;
  display: block;
  aspect-ratio: 4 / 5;
  border-radius: var(--rt-radius-card);
  overflow: hidden;
  background: var(--wp--preset--color--surface-cool);
  color: var(--wp--preset--color--surface);
  text-decoration: none;
}

.home-fam__foto {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: end;
  gap: 0.35rem;
  padding: clamp(2rem, 3vw, 2.5rem);
}

.home-fam__foto img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--rt-duration-slow) var(--rt-ease);
}

/* Degradê só no pé: o produto continua visível em cima. */
.home-fam__foto::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    180deg,
    rgba(20, 24, 29, 0.05) 0%,
    rgba(20, 24, 29, 0.35) 45%,
    rgba(20, 24, 29, 0.92) 100%
  );
}

.home-fam__n {
  color: var(--wp--preset--color--action);
  font-size: var(--rt-size-caption);
  font-weight: var(--rt-weight-medium);
  letter-spacing: var(--rt-tracking-eyebrow);
  text-transform: uppercase;
}

.home-fam strong {
  font-size: var(--rt-size-subheading);
  font-weight: var(--rt-weight-medium);
  line-height: var(--rt-leading-subheading);
  letter-spacing: -0.01em;
  text-wrap: pretty;
}

/* A descrição fica sempre à vista. Escondê-la atrás do hover economizaria
   pixel e custaria clareza — e quem chega por toque não tem hover nenhum. */
.home-fam__desc {
  display: block;
  margin-top: 0.15rem;
  color: var(--wp--preset--color--surface);
  font-size: var(--rt-size-body-sm);
  line-height: 1.45;
  opacity: 0.8;
  transition: opacity var(--rt-duration-base) var(--rt-ease);
}

.home-fam:hover .home-fam__desc { opacity: 1; }

/* Seta no canto: diz que o cartão leva a algum lugar antes de qualquer hover. */
.home-fam::before {
  content: "→";
  position: absolute;
  top: clamp(1rem, 2.5vw, 1.5rem);
  right: clamp(1rem, 2.5vw, 1.5rem);
  z-index: 1;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--rt-radius-pill);
  background: var(--wp--preset--color--surface);
  color: var(--wp--preset--color--brand);
  font-size: var(--rt-size-body);
  transition:
    background-color var(--rt-duration-fast) var(--rt-ease),
    transform var(--rt-duration-base) var(--rt-ease);
}

.home-fam:hover::before,
.home-fam:focus-visible::before {
  background: var(--wp--preset--color--action);
  transform: translateX(4px);
}

.home-fam:hover .home-fam__foto img { transform: scale(1.05); }

/* Regra 12 do manual: o anel de foco e solido, nunca laranja. Sobre a foto
   o grafite desaparece, entao vale a variante de superficie escura: branco. */
.home-fam:focus-visible {
  outline: var(--rt-focus-width) solid var(--wp--preset--color--surface);
  outline-offset: var(--rt-focus-offset);
}


/* =========================================================================
   FAMÍLIA E SOLUÇÃO

   As duas aberturas usam a mesma anatomia: selo da marca, chapéu, título
   grande, texto e ações — com a foto do produto ocupando metade da tela.
   ========================================================================= */

/* --- O selo: a marca reduzida ao "R" ------------------------------------- */

/* O manual pede ícone tipográfico, glifo da própria fonte, e não biblioteca
   de ícones ilustrados. Este é o único símbolo gráfico do sistema — é a
   assinatura da Rocktron, não enfeite. */
.rt-selo {
  display: inline-grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  flex: none;
  border-radius: var(--rt-radius-pill);
  background: var(--wp--preset--color--action);
  color: var(--wp--preset--color--brand);
  font-size: var(--rt-size-body-sm);
  font-weight: var(--rt-weight-medium);
  line-height: 1;
}

/* --- Abertura da família -------------------------------------------------- */

.rt-fam,
.rt-sol {
  display: grid;
  gap: var(--wp--preset--spacing--lg);
  align-items: center;
  padding-block: clamp(2rem, 5vw, 4rem) clamp(2.5rem, 5vw, 4rem);
}

@media (min-width: 56rem) {
  .rt-fam,
  .rt-sol { grid-template-columns: 1fr 1fr; gap: var(--wp--preset--spacing--xl); }
  .rt-fam__foto { order: 2; }
}

.rt-fam__foto,
.rt-sol__foto {
  margin: 0;
  border-radius: var(--rt-radius-card);
  overflow: hidden;
  background: var(--wp--preset--color--surface-muted);
  aspect-ratio: 4 / 3;
}

.rt-fam__foto img,
.rt-sol__foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rt-fam__chapeu,
.rt-sol__chapeu {
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--xs);
  margin: 0 0 var(--wp--preset--spacing--sm);
  font-size: var(--rt-size-caption);
  font-weight: var(--rt-weight-medium);
  letter-spacing: var(--rt-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--wp--preset--color--ink-muted);
}

.rt-sol__chapeu a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}

.rt-fam__nome,
.rt-sol__nome {
  margin: 0;
  font-size: var(--rt-size-heading-lg);
  font-weight: var(--rt-weight-medium);
  line-height: var(--rt-leading-heading-lg);
  letter-spacing: var(--rt-tracking-display);
  text-wrap: pretty;
}

.rt-fam__lead,
.rt-sol__lead {
  max-width: 52ch;
  margin: var(--wp--preset--spacing--md) 0 0;
  font-size: var(--rt-size-subheading);
  line-height: 1.35;
  color: var(--wp--preset--color--ink-muted);
}

.rt-fam__meta {
  margin: var(--wp--preset--spacing--sm) 0 0;
  color: var(--wp--preset--color--ink-muted);
  font-size: var(--rt-size-body-sm);
}

/* Aviso honesto: a origem não tem ficha técnica desta solução. Melhor dizer
   do que preencher com texto inventado. */
.rt-sol__pendente {
  max-width: 52ch;
  margin: var(--wp--preset--spacing--md) 0 0;
  padding: var(--wp--preset--spacing--md);
  border-radius: var(--rt-radius-inner);
  background: var(--wp--preset--color--surface-muted);
  color: var(--wp--preset--color--ink-soft);
  font-size: var(--rt-size-body-sm);
  line-height: var(--rt-leading-body);
}

.rt-fam__acoes,
.rt-sol__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wp--preset--spacing--sm);
  margin: var(--wp--preset--spacing--lg) 0 0;
}

/* --- Grade de soluções dentro da família --------------------------------- */

/* O post-template do WordPress vira a mesma grade de cartões do índice: cada
   item é a foto do produto com o nome por cima. */
.pg-familia .home-fams > li {
  position: relative;
  isolation: isolate;
  aspect-ratio: 4 / 5;
  border-radius: var(--rt-radius-card);
  overflow: hidden;
  background: var(--wp--preset--color--surface-cool);
  color: var(--wp--preset--color--surface);
  list-style: none;
}

.pg-familia .home-fams > li .wp-block-post-featured-image {
  position: absolute;
  inset: 0;
  z-index: -2;
  margin: 0;
  height: 100%;
}

.pg-familia .home-fams > li .wp-block-post-featured-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--rt-duration-slow) var(--rt-ease);
}

.pg-familia .home-fams > li::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    180deg,
    rgba(20, 24, 29, 0.05) 0%,
    rgba(20, 24, 29, 0.4) 45%,
    rgba(20, 24, 29, 0.93) 100%
  );
}

.pg-familia .home-fams > li .wp-block-post-title,
.pg-familia .home-fams > li .wp-block-post-excerpt {
  position: relative;
  padding-inline: clamp(1.25rem, 3vw, 1.75rem);
}

.pg-familia .home-fams > li .wp-block-post-title {
  margin: 0;
  padding-top: clamp(1.25rem, 3vw, 1.75rem);
  font-size: var(--rt-size-subheading);
  font-weight: var(--rt-weight-medium);
  line-height: var(--rt-leading-subheading);
  text-wrap: pretty;
}

.pg-familia .home-fams > li .wp-block-post-title a {
  color: var(--wp--preset--color--surface);
  text-decoration: none;
}

/* A foto é absoluta, então o texto precisa ser empurrado para o pé do cartão. */
.pg-familia .home-fams > li {
  display: grid;
  align-content: end;
  padding-bottom: clamp(1.25rem, 3vw, 1.75rem);
}

.pg-familia .home-fams > li .wp-block-post-excerpt {
  margin: 0.35rem 0 0;
  color: var(--wp--preset--color--surface);
  opacity: 0.82;
  font-size: var(--rt-size-body-sm);
  line-height: 1.45;
}

.pg-familia .home-fams > li:hover .wp-block-post-featured-image img { transform: scale(1.05); }

/* Seta no canto, igual à do índice: o cartão inteiro leva a algum lugar. */
.pg-familia .home-fams > li::after {
  content: "→";
  position: absolute;
  top: clamp(1rem, 2.5vw, 1.5rem);
  right: clamp(1rem, 2.5vw, 1.5rem);
  z-index: 1;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--rt-radius-pill);
  background: var(--wp--preset--color--surface);
  color: var(--wp--preset--color--brand);
  font-size: var(--rt-size-body);
  transition:
    background-color var(--rt-duration-fast) var(--rt-ease),
    transform var(--rt-duration-base) var(--rt-ease);
}

.pg-familia .home-fams > li:hover::after {
  background: var(--wp--preset--color--action);
  transform: translateX(4px);
}

.rt-irmas { border-top: var(--pg-rule); }

@media (prefers-reduced-motion: reduce) {
  .pg-familia .home-fams > li .wp-block-post-featured-image img,
  .pg-familia .home-fams > li::after { transition: none; }
  .pg-familia .home-fams > li:hover::after { transform: none; }
  .pg-familia .home-fams > li:hover .wp-block-post-featured-image img { transform: none; }
}


/* =========================================================================
   MOVIMENTO

   O sistema é plano, editorial e rápido. O movimento existe para dizer que
   algo chegou ou que algo responde — nunca para enfeitar. Uma curva só,
   durações documentadas, e só transform/opacity: nada que force layout.

   Os motivos ilustrativos do desenho anterior (barramento com pulso de
   corrente, prumada lateral, gaveta de CCM) saíram. Eram atmosfera; este
   sistema separa camadas por tom e confia no espaço em branco.
   ========================================================================= */

/* --- Entrada de conteúdo ao rolar ---------------------------------------- */

.rv {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity var(--rt-duration-reveal, 500ms) var(--rt-ease) var(--rv-atraso, 0ms),
    transform var(--rt-duration-reveal, 500ms) var(--rt-ease) var(--rv-atraso, 0ms);
}

.rv.is-in {
  opacity: 1;
  transform: none;
}

/* --- Resposta ao toque e ao ponteiro ------------------------------------- */

/* Cartão responde por tom, não por sombra: o fundo escurece um passo na
   pilha de superfícies. É o mesmo princípio da elevação do sistema. */
.pg-card,
.pg-mod {
  transition: background-color var(--rt-duration-fast) var(--rt-ease);
}

a.pg-card:hover,
a.pg-mod:hover,
a.pg-card:focus-within,
a.pg-mod:focus-within {
  background: var(--wp--preset--color--surface-cool);
}

a.pg-card,
a.pg-mod {
  color: inherit;
  text-decoration: none;
}

a.pg-card:focus-visible,
a.pg-mod:focus-visible {
  outline: var(--rt-focus-width) solid var(--rt-focus-color);
  outline-offset: var(--rt-focus-offset);
}

/* --- Movimento reduzido: tudo estático, nada deixa de funcionar ---------- */

@media (prefers-reduced-motion: reduce) {
  .rv,
  .rv.is-in {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .pg-card,
  .pg-mod,
  .pg-btn {
    transition: none;
  }

  .pg-btn--acao:active {
    transform: none;
  }
}