/* ============================================================
   sopy-assinatura.css
   Estilos exclusivos da página "Plano de Assinatura".
   Não depende de sopy-landing.js (sem GSAP/Lenis/3D).
   Usa a mesma tipografia (Houschka Pro / corpo) e paleta real da
   marca (Citrus/Aqua) já definidas em sopy-landing.css, através da
   classe .sopy-main, mas com tokens de cor próprios (--sa-*) para
   não depender de nenhum estado só setado via JS.
============================================================ */

:root {
  --sa-ink: #0E0F12;
  --sa-paper: #FFFFFF;
  /* ---- Azuis da marca ----
     São EXATAMENTE três, os mesmos que a home usa. Não derive tons
     novos a partir deles (clarear, escurecer, mudar saturação): se
     precisar de um azul mais claro ou mais forte, use um dos três ou
     uma transparência de um deles sobre o fundo. Já aconteceu de a
     página ganhar tons petróleo e navy cobalto por derivação, e eles
     destoavam da home.

     Esta página não recebe a classe `theme-aqua` (quem a aplica é o
     sopy-landing.js, que nunca carrega aqui), então var(--brand*) não
     existe e os valores precisam ser literais. */
  --sa-aqua: #26A6E0;
  /* header/footer da loja — o azul âncora */
  --sa-aqua-light: #48ACF8;
  /* claro — a home usa no FAQ aberto */
  --sa-aqua-strong: #017FFF;
  /* forte — a home usa no fundo dos depoimentos */

  /* Lavagem clara para fundo de seção: transparência do azul âncora
     sobre branco, não um hex novo. */
  --sa-aqua-wash: rgba(38, 166, 224, 0.08);

  /* Verdes da linha Citrus, usados como ACENTO — o "✔" da comparação e
     o botão do card em destaque. Como fundo de card inteiro foi testado
     e descartado (ficou feio).
     ⚠️ Texto branco não funciona sobre eles (2,01:1 e 2,43:1); use
     texto escuro, que dá 9,52:1 e 7,88:1. */
  --sa-citrus: #25D16F;
  --sa-citrus-strong: #00BF63;
}

/* Gradiente "entrando na água": só no hero + "Como funciona", não na
   página inteira. Depois disso a página volta a alternar branco/azul
   claro/escuro por seção, como a home faz — pedido explícito do
   usuário depois de ver a versão com um gradiente único até o fim. */
.sa-water-intro {
  background: var(--sa-paper);
}

/* Restaura o que sopy-landing.css esconde/desativa globalmente
   (scrollbar, foco, scroll suave) — essa página não tem o Lenis
   que os substitui na home, então precisam voltar ao padrão. */
html {
  scrollbar-width: auto;
  -ms-overflow-style: auto;
}

html::-webkit-scrollbar {
  width: auto;
  height: auto;
}

/* auto, não smooth: o Lenis cuida da suavidade do scroll, e
   scroll-behavior: smooth brigaria com ele (dois motores animando o
   mesmo scroll ao mesmo tempo). */
html,
body {
  scroll-behavior: auto;
}

.sopy-assin :focus-visible {
  outline: 2px solid var(--sa-aqua-strong);
  outline-offset: 2px;
}

/* ========== Base ========== */

.sopy-assin {
  color: var(--sa-ink);
  overflow-x: clip;
}

.sopy-assin section {
  padding: clamp(48px, 7vw, 88px) clamp(20px, 5vw, 64px);
}

.sa-inner {
  max-width: 1120px;
  margin: 0 auto;
}

.sa-eyebrow {
  display: inline-block;
  font-family: 'Houschka Pro', sans-serif;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sa-aqua-strong);
  margin-bottom: 10px;
}

.sa-section-head {
  max-width: 640px;
  margin: 0 0 40px;
}

.sa-section-head h2 {
  margin: 0;
}

.sa-section-head--center {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* ========== Botões ========== */

.sa-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 30px;
  border-radius: 999px;
  font-family: 'Houschka Pro', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  border: 2px solid transparent;
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.sa-btn:hover {
  transform: translateY(-2px);
}

/* Ripple igual ao do botão "EXPLORE AQUA BLU" da home (conferido nos
   valores reais do CSS ao vivo): um círculo cresce a partir do ponto
   onde o mouse entrou no botão (--xPos/--yPos, setados por JS em
   sopy-assinatura.js) até cobrir o botão inteiro. Sem GSAP — é puro
   CSS + um listener de mousemove leve. */
.sa-btn::before {
  content: "";
  position: absolute;
  left: var(--xPos, 50%);
  top: var(--yPos, 50%);
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  background-color: rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  transition: width 1.5s ease, height 1.5s ease;
  pointer-events: none;
}

.sa-btn:hover::before {
  width: 400px;
  height: 400px;
}

/* O brilho é absolutamente posicionado, então fica acima do texto
   por padrão (regra de stacking do CSS) a não ser que o conteúdo
   também ganhe seu próprio contexto de empilhamento. */
.sa-btn > span,
.sa-btn-arrow {
  position: relative;
  z-index: 1;
}

.sa-btn-arrow {
  width: 14px;
  height: 14px;
  fill: currentColor;
  transition: transform 0.25s ease;
}

.sa-btn:hover .sa-btn-arrow {
  transform: translateX(4px);
}

/* Prefixo .sopy-assin nas regras de cor dos botões: sopy-landing.css
   define `.sopy-main a { color: inherit }` (especificidade 0,1,1),
   que vence uma classe sozinha (0,1,0) e apaga o texto do botão
   (herda a cor escura do body em vez do branco do botão). Duas
   classes (0,2,0) resolve isso sem depender de !important. */
.sopy-assin .sa-btn--primary {
  background: var(--sa-ink);
  color: var(--sa-paper);
  box-shadow: 0 10px 24px rgba(14, 15, 18, 0.18);
}

.sa-btn--primary:hover {
  box-shadow: 0 14px 30px rgba(14, 15, 18, 0.24);
}

.sopy-assin .sa-btn--outline {
  background: transparent;
  color: var(--sa-ink);
  border-color: var(--sa-ink);
}

.sopy-assin .sa-btn--outline:hover {
  background: var(--sa-ink);
  color: var(--sa-paper);
}

/* ========== Hero ========== */

.sa-hero {
  position: relative;
}

.sa-hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(24px, 5vw, 56px);
  align-items: center;
  max-width: 1120px;
  margin: 0 auto;
}

.sa-hero-copy h1 {
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  line-height: 1.02;
  margin: 0 0 20px;
  max-width: 12ch;
}

.sa-hero-copy p {
  font-size: 1.05rem;
  line-height: 1.6;
  max-width: 46ch;
  margin: 0 0 32px;
  color: rgba(14, 15, 18, 0.78);
}

.sa-hero-art {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 320px;
}

.sa-hero-capsule {
  position: relative;
  width: min(84%, 380px);
  /* Transparência do azul âncora (#26A6E0), não um azul escuro novo */
  filter: drop-shadow(0 30px 40px rgba(38, 166, 224, 0.45));
}

.sa-hero-drop {
  position: absolute;
  border-radius: 50%;
  background: var(--sa-paper);
  opacity: 0.7;
}

.sa-hero-drop--1 {
  width: 22px;
  height: 22px;
  top: 10%;
  left: 6%;
}

.sa-hero-drop--2 {
  width: 14px;
  height: 14px;
  bottom: 16%;
  right: 10%;
  background: var(--sa-aqua-strong);
  opacity: 0.35;
}

/* ========== Como funciona (4 passos na horizontal) ==========
   Era uma timeline vertical, uma etapa por vez, que empurrava a dobra
   para ~4 telas de scroll. O cliente pediu leitura horizontal: as 4
   etapas lado a lado, a dobra inteira num olhar. No celular a grade
   cai para 2x2 — não para uma coluna, que traria de volta o problema
   da rolagem longa. */

.sa-steps-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(18px, 3vw, 32px);
}

/* A régua no topo de cada card costura as 4 etapas numa linha só, que
   é o que faz a sequência ser lida como sequência sem a timeline. */
.sa-step-card {
  padding-top: 22px;
  border-top: 2px solid rgba(38, 166, 224, 0.28);
}

.sa-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--sa-aqua-wash);
  color: var(--sa-aqua-strong);
  font-family: 'Houschka Pro', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 14px;
}

.sa-step-card h3 {
  font-size: 1.1rem;
  margin: 0 0 8px;
}

.sa-step-card p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(14, 15, 18, 0.72);
}

.sa-step-media {
  margin-top: 14px;
}

.sa-step-media img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  display: block;
}

/* 2 e 2 no celular (pedido explícito). O texto encolhe junto, senão
   quatro parágrafos em meia largura viram quatro paredes. */
@media (max-width: 760px) {
  .sa-steps-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 16px;
  }

  .sa-step-num {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    font-size: 0.85rem;
    margin-bottom: 10px;
  }

  .sa-step-card h3 {
    font-size: 0.98rem;
  }

  .sa-step-card p {
    font-size: 0.86rem;
    line-height: 1.5;
  }
}

/* ========== CTA de fim de dobra ==========
   "Quero assinar" se repete no fim de toda dobra (pedido do cliente). */

.sa-section-cta {
  text-align: center;
  margin-top: clamp(32px, 5vw, 48px);
}

/* ========== Fades entre seções ==========
   Cada seção de cor chapada ganha um degradê no topo, saindo da cor
   da seção anterior até transparente — evita o corte seco entre uma
   cor e outra (pedido do usuário). Fica atrás do conteúdo (z-index
   negativo dentro do próprio contexto de empilhamento da seção, que
   é criado por position:relative), na frente só do fundo chapado. */

.sa-products,
.sa-compare,
#assin-faq {
  position: relative;
}

.sa-products::before,
.sa-compare::before,
#assin-faq::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 140px;
  pointer-events: none;
  z-index: -1;
}

.sa-products::before {
  background: linear-gradient(180deg, var(--sa-paper) 0%, transparent 100%);
}

/* Acompanha a cor da seção de cima (.sa-products, agora azul forte).
   Na prática está escondido — todos esses ::before têm z-index:-1 atrás
   de fundos opacos — mas se um dia forem ativados, tem que casar. */
.sa-compare::before {
  background: linear-gradient(180deg, var(--sa-aqua-strong) 0%, transparent 100%);
}

#assin-faq::before {
  background: linear-gradient(180deg, var(--sa-aqua-wash) 0%, transparent 100%);
}

/* ========== Produtos em destaque ========== */

/* Azul forte no lugar do quase-preto: os cards de produto do tema são
   caixas BRANCAS, e branco sobre preto ficava duro demais. O #017FFF é
   o mesmo azul que a home usa como fundo de seção inteira. */
.sa-products {
  background: var(--sa-aqua-strong);
  color: var(--sa-paper);
}

.sa-products .sa-section-head h2,
.sa-products .sa-eyebrow {
  color: var(--sa-paper);
}

/* Branco CHEIO, não um azul nem branco translúcido: o fundo desta seção
   agora é #017FFF, então qualquer azul da paleta some em cima dele, e a
   75% de opacidade o contraste caía para 2,78:1. Branco cheio dá 3,83:1
   — ainda abaixo do AA para texto pequeno (4,5:1), que é o teto do que
   dá para alcançar sobre esse azul. */
.sa-products .sa-eyebrow {
  color: var(--sa-paper);
}

/* SEM display:grid aqui. Este container é um `.row` do Bootstrap e os
   cards do item.tpl são colunas (col-6 col-md-3) que dependem do flex
   do .row para calcular a largura. Um display:grid por cima quebrava
   esse cálculo e colapsava os cards. O espaçamento fica por conta do
   .row-grid do próprio tema. */
.sa-products-grid {
  margin-bottom: 32px;
  /* Centraliza: com 3 produtos numa grade de 4 colunas sobrava um vão à
     direita e o bloco ficava torto em relação ao título e ao botão. */
  justify-content: center;
}

/* O card aqui é o MESMO da página de categoria (.sopy-product-card, em
   style-critical.scss): selo "-10% OFF", "Compra única", preço com o
   valor cheio riscado e a caixa verde de assinatura. Foi pedido assim,
   com a categoria como referência.

   Por isso não há override de card nesta folha. Já houve — o card era
   `reduced_item`, uma caixa crua, e esta folha recriava borda, sombra,
   tipografia e enquadramento da foto na mão. Trocar por `reduced_item`
   ausente apagou as ~110 linhas: o tema já entrega tudo, incluindo o
   gutter (padding 8px + margin-bottom 24px) e as 2 colunas no celular
   (grid_columns_mobile = 2).

   A ÚNICA coisa que continua daqui é o branco herdado: .sa-products
   pinta a seção inteira de branco para o título, e o nome do produto
   ficaria branco no branco — mas .sopy-product-card .item-link já
   resolve com color !important. Nada a fazer. */

.sa-products .sa-btn--outline {
  border-color: var(--sa-paper);
  color: var(--sa-paper);
}

.sa-products .sa-btn--outline:hover {
  background: var(--sa-paper);
  color: var(--sa-ink);
}

/* ========== "Ver todos os produtos" ==========
   A grade traz TODOS os produtos da categoria; os que passam do 8º
   ficam escondidos até o botão ligar .is-expanded (sopy-assinatura.js).
   ⚠️ O 9 aqui é o `sopy_assin_visible = 8` do templates/page.tpl + 1.
   Esconder por CSS em vez de cortar no Twig é o que permite expandir
   sem ida ao servidor. */

.sa-products-grid:not(.is-expanded) > :nth-child(n + 9) {
  display: none;
}

/* O CTA virou <button> (antes era <a>). Não é só o reset do navegador:
   o sopy-landing.css tem `.sopy-main button { background:none; border:none }`
   (0,1,1), que ganha do `border: 2px solid` do `.sa-btn` (0,1,0) e apagaria
   o contorno do botão. Esta regra empata em especificidade e vence por vir
   depois na ordem de carga (landing na linha 86, assinatura na 91 do
   page.tpl). A cor da borda continua vindo de .sa-products .sa-btn--outline. */
button.sa-btn {
  background: transparent;
  border-width: 2px;
  border-style: solid;
  font-family: 'Houschka Pro', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
}

/* ========== Comparação assinatura vs. avulso ==========
   Card "vencedor" (assinando) elevado e escuro, card "perdedor"
   (avulso) apagado — com selo acima de cada card e ícones em
   círculo na lista, inspirado nas referências que o usuário mandou. */

/* Fundo OPACO, obrigatoriamente. O .sa-compare::before de fade tem
   z-index:-1, ou seja, fica atrás deste fundo: se o fundo for
   translúcido, o gradiente preto→transparente vaza e vira um borrão
   cinza no topo da seção. Por isso a lavagem vai composta sobre o
   branco (dois layers) em vez de ser uma rgba solta — mantém a cor
   sem hex novo e sem deixar o ::before aparecer. */
.sa-compare {
  background: linear-gradient(var(--sa-aqua-wash), var(--sa-aqua-wash)), var(--sa-paper);
}

.sa-compare-table {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 4vw, 40px);
  align-items: start;
  max-width: 900px;
  margin: 0 auto;
}

.sa-compare-col-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.sa-compare-badge {
  display: inline-flex;
  align-items: center;
  padding: 8px 18px;
  border-radius: 999px;
  font-family: 'Houschka Pro', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  margin-bottom: 18px;
  background: var(--sa-paper);
  color: rgba(14, 15, 18, 0.6);
  border: 1px solid rgba(14, 15, 18, 0.12);
}

/* Selo no mesmo azul do card, com texto branco para casar com ele. */
.sa-compare-badge--yes {
  background: var(--sa-aqua);
  color: var(--sa-paper);
  border-color: var(--sa-aqua);
}

.sa-compare-col {
  width: 100%;
  border-radius: 22px;
  padding: clamp(24px, 3vw, 34px);
  text-align: left;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.sa-compare-col--no {
  background: var(--sa-paper);
  border: 1px solid rgba(14, 15, 18, 0.08);
}

.sa-compare-col--no:hover {
  transform: translateY(-8px);
  border-color: rgba(14, 15, 18, 0.22);
  box-shadow: 0 18px 34px rgba(14, 15, 18, 0.14);
}

/* Card "vencedor" no azul do header/rodapé da loja (--sa-aqua).
   O header renderiza #25A6E0 e este token é #26A6E0 — 1/255 de
   diferença, mesma cor a olho nu.

   Sombra mais densa e escala levemente maior que o card "avulso": os
   dois tinham o mesmo peso visual e o destaque não se lia. */
.sa-compare-col--yes {
  background: var(--sa-aqua);
  box-shadow: 0 24px 48px rgba(14, 15, 18, 0.22);
  transform: scale(1.02);
}

.sa-compare-col--yes:hover {
  transform: scale(1.02) translateY(-8px);
  box-shadow: 0 34px 60px rgba(14, 15, 18, 0.3);
}

/* O selo acompanha o card num respiro sutil no hover. */
.sa-compare-col-wrap:hover .sa-compare-badge {
  transform: translateY(-2px);
}

.sa-compare-badge {
  transition: transform 0.3s ease;
}

.sa-compare-col h3 {
  font-size: 1.3rem;
  margin: 0 0 20px;
}

.sa-compare-col--no h3 {
  color: var(--sa-ink);
}

/* Branco por decisão de design (pedido). Sobre este azul dá 2,76:1,
   abaixo do AA — o h3 é grande e passa como texto grande, os itens da
   lista não. Trocar para --sa-ink daria 6,95:1 se um dia for revisto. */
.sa-compare-col--yes h3 {
  color: var(--sa-paper);
}

.sa-compare-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sa-compare-col li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 11px 10px;
  margin: 0 -10px;
  border-radius: 10px;
  font-size: 0.96rem;
  line-height: 1.45;
}

.sa-compare-col--no li + li {
  border-top: 1px solid rgba(14, 15, 18, 0.1);
}

/* Divisória clara, agora que o texto do card voltou a ser branco. */
.sa-compare-col--yes li + li {
  border-top: 1px solid rgba(255, 255, 255, 0.28);
}

.sa-compare-icon {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
  font-weight: 800;
}

.sa-compare-col--no .sa-compare-icon {
  background: rgba(14, 15, 18, 0.08);
  color: rgba(14, 15, 18, 0.5);
}

.sa-compare-col--no li {
  color: rgba(14, 15, 18, 0.62);
}

/* "✔" verde Citrus, maior que os do card avulso para dar destaque.
   Verde e azul têm luminância parecida (1,37:1), então em escala de
   cinza o disco não separa do card — mas o olho distingue bem pelo
   matiz, e o glifo escuro dentro (9,52:1) dá a nitidez. */
.sa-compare-col--yes .sa-compare-icon {
  background: var(--sa-citrus);
  color: var(--sa-ink);
  flex-basis: 24px;
  width: 24px;
  height: 24px;
  font-size: 0.78rem;
}

.sa-compare-col--yes li {
  color: var(--sa-paper);
}

@media (max-width: 640px) {
  .sa-compare-table {
    grid-template-columns: 1fr;
    max-width: 420px;
  }
}

/* ========== Responsivo ========== */

@media (max-width: 900px) {
  .sa-hero-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .sa-hero-copy h1,
  .sa-hero-copy p {
    max-width: none;
    margin-left: auto;
    margin-right: auto;
  }

  .sa-hero-art {
    order: -1;
    min-height: 240px;
  }
}

/* ========== FAQ — cartões horizontais (desktop) ==========
   Inspirado no shot "Structura FAQ – Experience Design Refined"
   (dribbble.com/shots/25733454): uma fileira de cartões, um aberto
   por vez (escuro, mostra pergunta+resposta no rodapé do cartão), os
   outros recolhidos (claros, estreitos, só a pergunta, também no
   rodapé). Setas de navegação pulam pergunta anterior/seguinte. A
   largura é animada via JS (width em px, não flex-basis) porque
   transições de flex-basis em vários irmãos ao mesmo tempo travam
   visualmente em alguns navegadores — width puro anima liso. Abaixo
   de 900px vira o acordeão vertical de sempre. */

.sa-faq-accordion-list {
  display: none;
}

/* Cabeçalho da seção: título grande à esquerda, descrição + setas à
   direita, como na referência (não centralizado). */
.sa-faq-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: start;
  margin-bottom: 36px;
}

.sa-faq-head h2 {
  margin: 0;
  font-size: clamp(2rem, 3.6vw, 2.9rem);
  line-height: 1.1;
}

.sa-faq-head-side {
  max-width: 280px;
  padding-top: 6px;
}

.sa-faq-head-side p {
  font-size: 0.9rem;
  line-height: 1.5;
  color: rgba(14, 15, 18, 0.65);
  margin: 0 0 14px;
}

.sa-faq-nav {
  display: flex;
  gap: 10px;
}

/* .sopy-main button { background: none } (sopy-landing.css, 0,1,1)
   vence uma classe sozinha e apaga o fundo do botão — mesmo problema
   de especificidade dos .sa-btn. Prefixo .sopy-assin resolve. */
.sopy-assin .sa-faq-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(14, 15, 18, 0.2);
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.2s ease;
}

.sopy-assin .sa-faq-nav-btn:hover {
  transform: translateY(-2px);
  border-color: var(--sa-aqua-strong);
}

.sopy-assin .sa-faq-nav-btn--dark {
  background: var(--sa-aqua-strong);
  border-color: var(--sa-aqua-strong);
}

.sa-faq-nav-icon {
  width: 13px;
  height: 13px;
  fill: var(--sa-ink);
}

.sa-faq-nav-btn--dark .sa-faq-nav-icon {
  fill: var(--sa-paper);
}

.sa-faq-cards {
  display: flex;
  gap: 18px;
  align-items: stretch;
  min-height: 360px;
}

/* Prefixo .sopy-assin de novo: os cartões são <button>, e
   `.sopy-main button { background: none; border: none }` (0,1,1)
   apagaria fundo e borda dos cartões recolhidos. */
.sopy-assin .sa-faq-card {
  position: relative;
  flex: 0 0 auto;
  width: 190px;
  min-height: 360px;
  border-radius: 20px;
  border: 1px solid rgba(14, 15, 18, 0.08);
  background: #EFF2F5;
  color: var(--sa-ink);
  text-align: left;
  padding: 26px 24px;
  margin: 0;
  cursor: pointer;
  overflow: hidden;
  font-family: inherit;
  display: flex;
  flex-direction: column;
  /* Perguntas ancoradas no TOPO, sempre. Antes era flex-end e a
     pergunta ficava no rodapé do cartão fechado, saltando para o topo
     ao abrir — o título trocava de lugar bem na hora em que o olho
     estava nele. Fixo no topo, só a resposta se move. */
  justify-content: flex-start;
  transition: width 0.6s cubic-bezier(0.65, 0, 0.35, 1), background 0.4s ease, border-color 0.4s ease;
}

.sopy-assin .sa-faq-card:hover:not(.is-open) {
  background: #E5EAEF;
}

.sopy-assin .sa-faq-card.is-open {
  background: var(--sa-aqua-strong);
  border-color: var(--sa-aqua-strong);
  box-shadow: 0 22px 44px rgba(1, 127, 255, 0.28);
  cursor: default;
}

/* O font-size da pergunta é o MESMO nos dois estados. Ele já foi maior
   no cartão aberto, e isso obrigava a esconder o texto atrás de um fade
   em JS enquanto o tamanho trocava, senão as quebras de linha
   rebobinavam à vista. Com o tamanho fixo o título simplesmente fica
   parado: só a cor muda. Não reintroduza a troca de tamanho aqui. */
.sa-faq-card-q {
  display: block;
  font-family: 'Houschka Pro', sans-serif;
  font-weight: 500;
  font-size: 1.15rem;
  line-height: 1.35;
  color: rgba(14, 15, 18, 0.72);
  transition: color 0.35s ease;
}

.sa-faq-card.is-open .sa-faq-card-q {
  color: var(--sa-paper);
}

/* A resposta é o único elemento que se move: sobe de baixo enquanto
   aparece, já com a largura do cartão a caminho.

   Não usa `display: none`, que não é animável e fazia a resposta
   simplesmente surgir. Fica sempre no fluxo, invisível e recortada pelo
   `overflow: hidden` do cartão; `visibility` entra junto para tirá-la
   da árvore de acessibilidade enquanto está fechada — sem delay ao
   abrir, com delay ao fechar para não cortar a saída. */
.sa-faq-card-a {
  display: block;
  /* height:0 quando fechada, e NÃO só opacidade. Sem isto o texto
     invisível continua ocupando espaço no fluxo e estica o cartão: com
     display:block puro os cartões passaram de 360px para 444px, porque
     as respostas escondidas mediam de 147px a 273px dentro de uma
     coluna de 190px. */
  height: 0;
  margin-top: 0;
  overflow: hidden;
  font-size: 0.82rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
  opacity: 0;
  visibility: hidden;
  transform: translateY(28px);
  transition:
    opacity 0.3s ease,
    transform 0.4s cubic-bezier(0.22, 0.8, 0.28, 1),
    visibility 0s linear 0.4s;
}

.sa-faq-card.is-open .sa-faq-card-a {
  height: auto;
  margin-top: 18px;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  /* Atraso para a resposta entrar depois que o cartão já alargou a
     maior parte do caminho, senão o texto sobe dentro de uma caixa
     ainda estreita e reflui à vista. */
  transition:
    opacity 0.45s ease 0.25s,
    transform 0.6s cubic-bezier(0.22, 0.8, 0.28, 1) 0.25s,
    visibility 0s;
}

@media (prefers-reduced-motion: reduce) {

  .sa-faq-card-a,
  .sa-faq-card.is-open .sa-faq-card-a {
    transform: none;
    transition: opacity 0.2s linear, visibility 0s;
  }
}

@media (max-width: 900px) {
  .sa-faq-head {
    grid-template-columns: 1fr;
    gap: 16px;
    text-align: center;
  }

  .sa-faq-head-side {
    max-width: none;
  }

  .sa-faq-nav {
    display: none;
  }

  .sa-faq-cards {
    display: none;
  }

  .sa-faq-accordion-list {
    display: block;
  }
}

/* FAQ accordion — mirrors sopy-landing.css's #faq accordion rules,
   retargeted to #assin-faq since this page never sets body.theme-aqua/
   theme-citrus (no sopy-landing.js on this page) and has its own id. */

#assin-faq {
  background: var(--sa-paper);
}

#assin-faq .sopy-faq-accordion {
  --d: 0deg;
  --circle-x: 1.8rem;
  --circle-y: 50%;
  --circle-r: 200%;
  --size-accordion-title: 1.15rem;
  --size-accordion-content: 1rem;
  --slide-ease: cubic-bezier(0.86, 0, 0.07, 1);
  --slide-duration: 400ms;
  --slide-delay: 450ms;
  --circle-duration: 900ms;

  background-color: #FFFFFF;
  color: #000000;

  width: min(900px, 100%);
  margin: 0 auto 1rem;
  border-radius: min(12px, 0.5rem);
  border: 2px solid #000000;
  display: grid;
  grid-template-rows: auto 0fr;
  overflow: hidden;
  position: relative;

  transition: box-shadow 200ms ease,
    grid-template-rows var(--slide-duration) var(--slide-ease),
    color var(--circle-duration) ease;
  box-shadow: none;
  scroll-margin-top: 88px;

  /* Zera o padding de seção. Cada item deste acordeão é um <section>, e
     `.sopy-assin section` (linha ~86) dá clamp(48px, 7vw, 88px) de
     padding vertical a toda section da página — isso caía em cima de
     cada faixa e inflava os cards: 186px de altura para um título de
     86px, sendo 96px só de padding herdado. A home não sofre disso
     porque o acordeão dela não está dentro de .sopy-assin. */
  padding: 0;
}

#assin-faq .sopy-faq-accordion::before,
#assin-faq .sopy-faq-accordion::after {
  box-shadow: none !important;
  outline: none !important;
  background-clip: padding-box !important;
}

#assin-faq .sopy-faq-accordion.open {
  --d: 90deg;
  grid-template-rows: auto 1fr;
}

#assin-faq .sopy-faq-accordion .sopy-content {
  overflow: hidden;
  font-size: var(--size-accordion-content);
  line-height: 140%;
  z-index: 2;
  position: relative;
}

/* Idêntico à home: SEM translateY nem opacidade aqui.

   Cheguei a acrescentar os dois para imitar a subida do cartão do
   desktop, e ficou pior — o texto deslizava dentro do .sopy-content,
   que tem overflow hidden, então a borda inferior da caixa aparecia
   como um corte reto enquanto a faixa abria. A animação da home é só o
   grid abrindo com o círculo de fundo, e é mais limpa justamente por
   não mover o texto dentro de uma caixa que está sendo recortada.

   Se for mexer aqui, compare lado a lado com #faq em sopy-landing.css
   antes. */
#assin-faq .sopy-faq-accordion .sopy-wrapper {
  padding-block: 0 1.05rem;
  padding-inline: 1.25rem;
}

#assin-faq .sopy-faq-accordion .sopy-content p {
  margin: 0;
  color: currentColor;
}

#assin-faq .sopy-faq-accordion .sopy-title {
  z-index: 2;
}

#assin-faq .sopy-faq-accordion .sopy-title a {
  padding: 1rem 1.25rem;
  font-size: var(--size-accordion-title);
  font-weight: 800;
  color: currentColor;
  text-decoration: none;
  display: flex;
  align-items: center;
  position: relative;
  z-index: 2;
}

#assin-faq .sopy-faq-accordion .sopy-title a::before {
  --chevron-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath fill='currentColor' d='M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z'/%3E%3C/svg%3E");
  content: "";
  width: 0.65rem;
  aspect-ratio: 320 / 512;
  display: inline-block;
  margin-right: 0.75rem;
  transform: rotate(var(--d, 0deg));
  transition: transform var(--slide-ease) var(--slide-duration) var(--slide-delay);
  mask-image: var(--chevron-icon);
  mask-size: 100%;
  background-color: currentColor;
}

/* Mesmo token do cartão aberto no desktop (.sa-faq-card.is-open): este
   acordeão é o MESMO componente abaixo de 900px, só com markup separado,
   e antes usava um azul diferente do desktop. */
#assin-faq .sopy-faq-accordion::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: var(--sa-aqua-strong);
  transition: clip-path var(--circle-duration) ease;
  pointer-events: none;
  clip-path: circle(0% at var(--circle-x) var(--circle-y));
  border-radius: inherit;
  z-index: 1;
}

#assin-faq .sopy-faq-accordion.open::before {
  clip-path: circle(var(--circle-r) at var(--circle-x) var(--circle-y));
}

#assin-faq .sopy-faq-accordion .sopy-title a:focus-visible {
  outline: 2px solid var(--sa-ink);
  outline-offset: 3px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.03);
}