/* Seção #planos: PELE BLACK sobre o porte da home (planos.css, gerado).
   Só pele: cor, fonte, fundo e a etiqueta de oferta. Caixas, espaçamentos e posições continuam os da home
   (aceite de layout no relatório da Fase 4, medido com scripts/medir-planos.mjs).
   Ajuste do cliente: a seção é PRETA e NEUTRA. O laranja aparece só nas etiquetas 3D e nos CTAs (o .fbtn laranja,
   no degradê da marca: o botão escuro não destacava sobre o card escuro). Nenhum card tem destaque.
   Carrega DEPOIS de planos.css. As regras daqui usam #planos para vencer as da home sem !important. */

/* ========== Tokens: as fontes e as cores da home viram as da LP dentro da seção ========== */
#planos {
  /* --ncs e --tts (as fontes da home) apontam para estes dois */
  --fonte-display: 'Barlow Condensed', Impact, sans-serif;
  --fonte-corpo: Inter, system-ui, sans-serif;
  --jakarta: 'Plus Jakarta Sans', Inter, system-ui, sans-serif;

  /* o azul da marca da home vira neutro (branco e grafite) */
  --marca: #fff;
  --marca-clara: rgba(255, 255, 255, .8);
  --marca-escura: #1c1614;
  --gradient: linear-gradient(180deg, #2a2220, #1c1614);
  --borda-acesa: rgba(255, 255, 255, .3);
  --borda-marca: rgba(255, 255, 255, .14);
  --foco-cor: var(--cor-luz);

  /* cinza do que não é valor no preço (o mesmo do título dos benefícios) */
  --cinza-preco: rgba(255, 255, 255, .42);

  color: var(--cor-texto);
  /* só o eixo vertical: no bitcoin a home recua a seção nas laterais (section.planos.bit) */
  padding-top: 150px;
  padding-bottom: 110px;
  background: var(--cor-base);
}

/* ========== Fundo: palco de vitrine ==========
   1. feixe de luz branca vindo de cima, centrado nos cards (#planos::before);
   2. gráfico de candles enorme atrás do título (.planos-topo-wrapper::before);
   3. piso em perspectiva sob os cards (.plano-asset::before);
   o grão global (.grao) continua por cima de tudo e a entrada em candles (.div-candles) continua. */

/* 1. Feixe: um cone que abre para baixo, com pico de branco a 6%, e some antes das bordas */
#planos::before {
  content: "";
  inset: 0;
  width: auto;
  height: auto;
  z-index: 0;
  background:
    conic-gradient(from 152deg at 50% -4%, rgba(255, 255, 255, 0) 0deg, rgba(255, 255, 255, .06) 28deg, rgba(255, 255, 255, 0) 56deg);
  -webkit-mask-image: radial-gradient(60% 78% at 50% 0%, #000 30%, transparent 100%);
  mask-image: radial-gradient(60% 78% at 50% 0%, #000 30%, transparent 100%);
  pointer-events: none;
}

/* 2. Gráfico de candles atrás do título: branco a 3,5%, com máscara radial */
#planos .planos-topo-wrapper::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -230px;
  z-index: -1;
  width: min(1600px, 150vw);
  aspect-ratio: 1600 / 640;
  transform: translateX(-50%);
  background: url(../../assets/texturas/planos-grafico.svg) center / 100% 100% no-repeat;
  opacity: .035;
  -webkit-mask-image: radial-gradient(closest-side, #000 35%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 35%, transparent 100%);
  pointer-events: none;
}

/* 3. Piso: uma grade deitada em perspectiva. A borda de cima (o fundo do piso) fica atrás dos cards e é para lá
   que as linhas convergem; a máscara apaga o piso para os lados e para a frente. */
#planos .plano-asset {
  position: relative;
}

#planos .plano-asset::before {
  content: "";
  position: absolute;
  left: -60%;
  right: -60%;
  top: 46%;
  height: 1100px;
  z-index: 0;
  transform-origin: 50% 0;
  transform: perspective(520px) rotateX(74deg);
  background-image:
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 64px 64px;
  background-position: 50% 0;
  -webkit-mask-image: radial-gradient(34% 62% at 50% 0%, #000 25%, transparent 100%);
  mask-image: radial-gradient(34% 62% at 50% 0%, #000 25%, transparent 100%);
  pointer-events: none;
}

/* Topo dos candles (.div-candles, componentes.css): a home usa o ::after para o filete de baixo */
#planos.div-candles::after {
  top: 0;
  bottom: auto;
  left: 0;
  right: 0;
  width: auto;
  height: 48px;
  z-index: 3;
  background: url(../../assets/texturas/candles-tops.svg) repeat-x 0 0 / 360px 48px;
  pointer-events: none;
}

@media (max-width: 600px) {
  #planos.div-candles::after {
    height: 36px;
    background-size: 270px 36px;
  }
}

/* ========== Cabeçalho da LP (Planos Black Friday / título) dentro da seção ========== */
/* Título bicolor como o dos benefícios: "80% OFF para garantir" em branco e "o seu plano perfeito." no cinza .42;
   a partir de 768 px a parte cinza começa numa linha própria (ajuste do cliente) */
#planos .planos__cabecalho {
  margin-bottom: 40px;
  text-align: center;
}

/* O reset da home (:where(#planos) * { font-family: var(--tts) }) põe a fonte do corpo direto em cada filho; no
   cabeçalho da LP eles herdam (especificidade zero: .tag e as outras classes continuam valendo) */
:where(#planos .planos__cabecalho) * {
  font-family: inherit;
}

#planos .planos__h2 > span {
  color: rgba(255, 255, 255, .42);
}

@media (min-width: 768px) {
  #planos .planos__h2 > span {
    display: block;
  }
}

@media (max-width: 767.98px) {
  #planos .planos__cabecalho {
    text-align: left;
  }
}

/* ========== Seletor de mercado e título do mercado ========== */
/* Mais destaque (ajuste do cliente): contêiner de vidro escuro com raio 16px 0, borda de 1 px e uma linha de luz
   laranja bem sutil no topo; opções maiores (60 px no desktop, 52 no mobile; 16 px / 600) e de largura igual; o
   indicador da aba ativa é o laranja dos CTAs (degradê da marca + brilho + sombra material) com um glow embaixo, e
   desliza entre as abas (o .seg__blob da home, posicionado por planosAtivo.js; aqui só transform anima, porque as
   duas abas têm a mesma largura). A semântica é a da home: radiogroup com aria-checked. Texto em 19 px / 700
   (texto grande do WCAG), por causa do branco sobre o laranja da aba ativa. */
#planos .seg--ativo {
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 16px 0;
  background: rgba(14, 11, 10, .72);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 18px 40px -20px rgba(0, 0, 0, .9);
}

#planos .seg--ativo::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 18px;
  right: 18px;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 106, 26, 0), rgba(255, 106, 26, .55), rgba(255, 106, 26, 0));
  pointer-events: none;
}

#planos .seg--ativo .seg__blob {
  top: 6px;
  height: calc(100% - 12px);
  border: 0;
  border-radius: 12px 0;
  background: var(--grad-marca-brilho), var(--grad-marca);
  box-shadow: var(--sombra-material), 0 12px 26px -10px rgba(255, 106, 26, .6);
}

#planos .seg--ativo[data-ready="true"] .seg__blob {
  transition: transform .35s var(--curva);
}

#planos .seg--ativo .seg__option {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 60px;
  padding: 0 34px;
  border-radius: 12px 0;
  /* texto grande do WCAG (19 px / 700, acima de 18,66 px bold): o branco sobre o degradê da marca da aba ativa
     precisa de 3:1, e o mínimo medido é 3,12:1 (regra 9). As duas abas no mesmo peso: a troca não mexe na largura. */
  font: 700 19px/1.2 var(--fonte-texto);
  color: rgba(255, 255, 255, .72);
  text-align: center;
}

#planos .seg--ativo .seg__option:hover {
  color: rgba(255, 255, 255, .95);
}

#planos .seg--ativo .seg__option.selecionado {
  color: #fff;
  font-weight: 700;
}

@media (max-width: 1079.98px) {
  #planos .seg--ativo {
    display: grid;
    width: 100%;
  }

  #planos .seg--ativo .seg__option {
    width: auto;
    padding: 0 12px;
  }
}

@media (max-width: 767.98px) {
  #planos .seg--ativo .seg__option {
    min-height: 52px;
  }

  /* No mobile o rótulo quebra em 2 linhas e sobe até a faixa clara do brilho: sem ele, o branco fica em 3,16:1 no
     mínimo (com o brilho, 2,60:1, abaixo dos 3:1 do texto grande). A partir de 768, uma linha só, com o brilho. */
  #planos .seg--ativo .seg__blob {
    background: var(--grad-marca);
  }
}

@media (prefers-reduced-motion: reduce) {
  #planos .seg--ativo[data-ready="true"] .seg__blob {
    transition: none;
  }
}

#planos header .js-plan-title {
  font-weight: 800;
  letter-spacing: .04em;
}

/* Modos de avaliação (só aparecem com mais de um modo ativo no planos.json): mesma linguagem do seletor */
#planos p.escolha {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--cor-texto-2);
  letter-spacing: var(--ls-rotulo);
}

#planos .botoes button {
  border: 1px solid rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .04);
  color: rgba(255, 255, 255, .55);
}

#planos .botoes button:hover {
  color: #fff;
}

#planos .botoes button.selecionado {
  border-color: rgba(255, 255, 255, .14);
  background: #1c1614;
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14);
}

/* ========== Card (todos iguais: o Sênior não tem destaque) ========== */
#planos .card {
  background: linear-gradient(180deg, #050303, #0d0908);
}

/* Todos os cards com a mesma altura: o slide estica até o mais alto da fileira (no Swiper ele tem height: 100%,
   que não estica). Com o mesmo conteúdo, não muda nada; é a garantia para dados que quebrem linha. */
#planos .swiper-slide.card {
  height: auto;
}

#planos .card .title {
  background: linear-gradient(180deg, #050303, #0b0807);
}

#planos .card .title h3 {
  font-family: var(--fonte-display);
  font-weight: 900;
  font-size: 30px;
  line-height: 1.1;
  letter-spacing: .02em;
}

@media (min-width: 1080px) {
  #planos .card .title h3 {
    font-size: 38px;
    line-height: 1.08;
  }
}

@media (hover: hover) {
  #planos .plano .card:hover {
    border-color: var(--borda-acesa);
  }
}

/* Chips: Inter, rótulo a .58 */
#planos .chip {
  --chip-rotulo: rgba(255, 255, 255, .58);
}

#planos .chip__rotulo {
  font-size: 11px;
}

/* 13 px abaixo de 1080: "R$ 14.997,00" cabe numa linha no chip de 1/3 (em 14 px quebrava e o card do
   Expert e do Master ficava mais alto que os outros) */
#planos .chip__valor {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

/* "100% em conta real" (Repasse, o último chip) não cabe numa linha no chip de 1/3 dos cards do Bitcoin até 768 px:
   com o nowrap ele vazava do chip. Esse texto pode quebrar; os valores em R$ continuam numa linha só. */
#planos .chip:last-child .chip__valor {
  white-space: normal;
}

/* desktop: a mesma rampa da home, que chega a 13 / 16 px em 1920 */
@media (min-width: 1080px) {
  #planos .chip__rotulo {
    font-size: clamp(9px, calc(.9vw - 1.7px), 13px);
  }

  #planos .chip__valor {
    font-size: clamp(11px, calc(.95vw + .2px), 16px);
  }
}

/* "Limite de perda total" subindo: o efeito de alta da home (css/limiteAlta.css, commit 5bedb6b) com a pele da
   Black (js/modulos/limite-alta.js troca os estados). No lugar do verde, o laranja da marca: a seta fica num chip
   com o degradê da marca e a célula ganha uma borda laranja sutil; a piscada é de opacidade (sem vermelho).
   A seta ocupa o lugar desde o início e só muda opacity/transform, para o valor não andar (CLS 0).
   Estado padrão = final (sem JS, com movimento reduzido ou quem já estava na tela). */
#planos .chip.limite-alta {
  --chip-borda: rgba(255, 106, 26, .32);
  container-type: inline-size;
  transition: border-color .35s var(--curva);
}

#planos .chip.limite-alta.is-antigo,
#planos .chip.limite-alta.is-queda,
#planos .chip.limite-alta.is-subindo {
  --chip-borda: transparent;
}

#planos .limite-alta .chip__valor {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .3em;
}

#planos .limite-alta__seta {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.1em;
  height: 1.1em;
  border-radius: 4px 0;
  background: var(--grad-marca-brilho), var(--grad-marca);
  box-shadow: var(--sombra-material);
  transition: opacity .3s var(--curva), transform .3s var(--curva);
}

#planos .limite-alta__seta svg {
  width: .56em;
  height: .45em;
  fill: #fff;
}

/* Célula estreita (menos de 112 px: 360–390, 768, 1080–1279): seta e valor numa linha só não cabem, então a seta
   sobe para cima do valor. Vale para as 8 células desde o início (sem deslocamento). */
@container (max-width: 111.98px) {
  #planos .limite-alta .chip__valor {
    flex-direction: column;
    gap: 4px;
  }
}

#planos .limite-alta__valor {
  text-align: left;
  transition: color .25s ease, opacity .25s ease;
}

/* valor padrão: tom do chip, seta apagada (no lugar dela) */
#planos .limite-alta.is-antigo .limite-alta__valor {
  color: rgba(255, 255, 255, .72);
}

#planos .limite-alta.is-antigo .limite-alta__seta,
#planos .limite-alta.is-queda .limite-alta__seta {
  opacity: 0;
  transform: translateY(.35em) scale(.7);
}

/* a piscada antes de subir */
#planos .limite-alta.is-queda .limite-alta__valor {
  opacity: .3;
}

/* chegou: um pulso laranja em volta da célula */
#planos .chip.limite-alta.is-alta {
  animation: limite-alta-pulso 1.1s ease-out;
}

/* parada no valor da Black, a seta "respira" para cima */
#planos .limite-alta:not(.is-antigo):not(.is-queda):not(.is-subindo) .limite-alta__seta svg {
  animation: limite-alta-seta 2.6s ease-in-out infinite;
}

@keyframes limite-alta-pulso {
  from { box-shadow: 0 0 0 0 rgba(255, 106, 26, .4); }
  to { box-shadow: 0 0 0 12px rgba(255, 106, 26, 0); }
}

@keyframes limite-alta-seta {
  0%, 55%, 100% { transform: translateY(0); }
  25% { transform: translateY(-.16em); }
}

@media (prefers-reduced-motion: reduce) {
  #planos .chip.limite-alta,
  #planos .limite-alta__seta,
  #planos .limite-alta__valor {
    transition: none;
  }

  #planos .chip.limite-alta,
  #planos .limite-alta__seta svg {
    animation: none !important;
  }
}

/* Preço antigo: "de ~~R$ X~~ por" em branco, com o risco cinza no próprio valor (o traço posicionado da home
   dependia da métrica da TT Fors). Claro também no bitcoin, onde a home escurece o texto (o card dela é claro). */
#planos .card .oldPrice p {
  color: var(--cor-titulo);
}

#planos .card .oldPrice p::before {
  content: none;
}

#planos .card .oldPrice .js-old-price {
  text-decoration: line-through 2px var(--cinza-preco);
}

/* Preço: valores em branco; "12x", "ou" e "à vista" no cinza .42 (contraste no relatório: 20 px bold é texto
   grande, e por isso o tamanho fica 20 px em todas as larguras) */
#planos .card .price .js-price-parcel {
  font-family: var(--jakarta);
  font-weight: 800;
  font-size: 36px;
  letter-spacing: -.03em;
  color: var(--cor-texto);
}

#planos .card .price .js-price-avista {
  font-family: var(--jakarta);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0;
  color: var(--cor-texto);
}

#planos .card .price .js-price-parcel span,
#planos .card .price .js-price-avista span {
  background: none;
  -webkit-text-fill-color: currentColor;
  font-family: var(--jakarta);
  font-size: 20px;
  letter-spacing: 0;
  color: var(--cinza-preco);
}

#planos .card .price .js-price-parcel span {
  font-weight: 800;
}

#planos .card .price .js-price-avista span {
  font-weight: 700;
}

@media (min-width: 1080px) {
  #planos .card .price .js-price-parcel {
    font-size: 50px;
  }
}

/* troca de modo: o brilho do preço fica branco */
#planos .flash-active {
  color: #fff;
  text-shadow: 0 0 8px rgba(255, 255, 255, .45), 0 0 16px rgba(255, 255, 255, .3);
}

/* ========== CTA: a caixa do .z7-btnx da home com o desenho do .fbtn laranja ==========
   Ajuste do cliente: o botão escuro sobre o card escuro não destacava. Todos os CTAs dos cards usam o .fbtn
   (componentes.css): degradê da marca com o reflexo de vidro, sombra interna do material, moldura de vidro, texto
   branco e seta laranja na gota branca. A caixa continua a do .z7-btnx (largura total, 70 px, raio 20px 0). As
   camadas da home são reaproveitadas: .z7-btnx__bg = fundo; .z7-btnx__shine = varredura no hover. */
#planos .z7-btnx {
  border: 0;
  box-shadow:
    0 0 0 5px rgba(255, 106, 26, .07),
    0 0 0 6px rgba(255, 140, 70, .24),
    0 10px 26px -6px rgba(255, 90, 20, .7),
    0 0 70px rgba(255, 106, 26, .26);
}

/* o halo azul desfocado e o anel girando da home saem */
#planos .z7-btnx::before,
#planos .z7-btnx::after {
  content: none;
}

/* O fundo cobre as sombras internas do botão; por isso o fundo e a sombra interna do material moram juntos na
   camada .z7-btnx__bg, e o ::before dela (o degradê azul da home) sai. */
#planos .z7-btnx__bg {
  background: var(--grad-marca-brilho), var(--grad-marca);
  box-shadow: var(--sombra-material);
}

#planos .z7-btnx__bg::before {
  content: none;
}

#planos .z7-btnx__shine {
  background: linear-gradient(115deg, rgba(255, 255, 255, 0) 44%, rgba(255, 255, 255, .38) 50%, rgba(255, 255, 255, 0) 56%);
}

#planos .z7-btnx__label,
#planos .z7-btnx__label span {
  font-family: var(--jakarta);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 1px 1px rgba(140, 35, 0, .35);
}

/* seta laranja (SVG de traço 2,4 px, o mesmo do .fbtn) na gota branca */
#planos .z7-btnx__cap {
  border: 0;
  background: #fff;
  color: var(--cor-laranja);
  box-shadow: 0 2px 6px rgba(120, 30, 0, .35), inset 0 -2px 3px rgba(0, 0, 0, .08);
}

#planos .z7-btnx__arrow {
  display: grid;
}

#planos .z7-btnx:hover .z7-btnx__arrow {
  transform: translateX(3px);
}

#planos .z7-btnx:hover {
  filter: none;
  transform: translateY(-1px);
  box-shadow:
    0 0 0 5px rgba(255, 255, 255, .05),
    0 0 0 6px rgba(255, 150, 80, .4),
    0 14px 34px -6px rgba(255, 90, 20, .85),
    0 0 100px rgba(255, 106, 26, .4);
}

#planos .z7-btnx:focus-visible {
  outline: 2px solid var(--cor-luz);
  outline-offset: 4px;
}

/* ========== Setas e indicadores (neutros) ========== */
#planos .swiper-button-prev,
#planos .swiper-button-next {
  background: rgba(255, 255, 255, .04);
  color: #fff;
}

@media (hover: hover) {
  #planos .swiper-button-prev:hover,
  #planos .swiper-button-next:hover {
    background: rgba(255, 255, 255, .1);
  }
}

#planos .plano .swiper-pagination .swiper-pagination-bullet {
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .08em;
}

#planos .plano .swiper-pagination .is-na-tela {
  color: #fff;
  border-bottom-color: #fff;
}

/* ========== Etiqueta de oferta 3D (no lugar do selo serrilhado) ========== */
/* O carrossel recorta só no eixo X, com folga para a etiqueta do card da ponta direita; a etiqueta dos cards
   fora da tela some, para a folga não mostrar a do vizinho. */
#planos .wrapper .swiper.mySwiper4,
#planos .wrapper .swiper.mySwiper11 {
  overflow: clip;
  overflow-clip-margin: 48px;
}

@media (max-width: 1079.98px) {
  #planos .wrapper .swiper.mySwiper4,
  #planos .wrapper .swiper.mySwiper11 {
    overflow: visible;
  }
}

#planos .card-etiqueta {
  position: absolute;
  top: -24px;
  right: -14px;
  z-index: 4;
  width: auto;
  height: 78px;
  transform: rotate(14deg);
  transform-origin: 50% 12%;
  filter: drop-shadow(0 14px 14px rgba(0, 0, 0, .7)) drop-shadow(0 3px 4px rgba(0, 0, 0, .55));
  pointer-events: none;
  animation: planos-etiqueta-balanco 4s ease-in-out infinite;
}

#planos .swiper-initialized .swiper-slide:not(.swiper-slide-visible) .card-etiqueta {
  visibility: hidden;
}

@media (min-width: 1080px) {
  #planos .card-etiqueta {
    top: -34px;
    right: -22px;
    height: 110px;
  }
}

@keyframes planos-etiqueta-balanco {
  0%,
  100% {
    transform: rotate(10deg);
  }

  50% {
    transform: rotate(18deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  #planos .card-etiqueta {
    animation: none;
  }
}


/* Mercado com menos cards do que a tela comporta (o Bitcoin): o Swiper trava o carrossel e põe a classe de trava
   também na paginação, que a home esconde. Os nomes dos planos (indicadores montados um por card em
   carrosselPlanos.js) continuam à vista; as setas somem, pela regra .swiper-button-lock da home. */
#planos .plano .swiper-pagination.swiper-pagination-lock {
  display: flex;
}

/* Carrosséis invisíveis (ocupando o lugar) até o Swiper armar: ver mostrarCarrosseis() em
   js/modulos/home/carrosselPlanos.js. Sem JS (sem .js no <html>), nada se esconde. */
.js #planos:not(.carrossel-armado) .plano {
  visibility: hidden;
  opacity: 0;
}

#planos.carrossel-armado .plano {
  transition: opacity .3s var(--curva);
}

@media (prefers-reduced-motion: reduce) {
  #planos.carrossel-armado .plano {
    transition: none;
  }
}