/* ==========================================================================
   Calculadora de pedido — redesign
   --------------------------------------------------------------------------
   Carregado DEPOIS do servicos.css, então sobrescreve o que precisa sem
   mexer no arquivo original (dá para voltar atrás só removendo este link).

   Objetivos:
   - o bloco inteiro cabe na tela, sem rolagem para ver o resumo
   - cards de elo maiores, com o emblema em destaque
   - resumo fixo à direita, autocontido
   ========================================================================== */

:root {
  --calc-menta: #2dd4bf;
  --calc-menta-fraco: rgba(45, 212, 191, .13);
  --calc-borda: #1c2431;
  --calc-fundo: #0d1016;
  --calc-fundo-2: #11151d;
  --calc-texto-fraco: #8b96a8;
}

/* ------------------------------------------------------------------ seção */

.sectElo .ptb_100Elo,
.sectElo.ptb_100Elo {
  padding: 1.25rem 0 2.5rem;
}

/* Em telas altas o conjunto ocupa a tela sem exigir rolagem. */
@media (min-width: 992px) and (min-height: 720px) {
  .sectElo .container > .row {
    min-height: calc(100vh - 190px);
    align-items: flex-start;
  }
}

/* Alinhados pelo topo. Esticar os cards de elo até a altura do resumo deixava
   um vazio enorme dentro deles — melhor cada um com a sua altura. */
.sectElo .container > .row {
  align-items: flex-start;
}

.sectElo .col-xl-8.flex > .row > [class^="col-"] {
  display: flex;
  flex-direction: column;
}

/* ----------------------------------------------------------------- títulos */

.titleElo {
  font-size: .95rem;
  letter-spacing: .16em;
  font-weight: 700;
  color: #e8edf5;
  padding: 0 0 .9rem;
  margin-top: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
}

.titleElo::before,
.titleElo::after {
  content: "";
  height: 1px;
  flex: 1;
  max-width: 54px;
  background: linear-gradient(90deg, transparent, var(--calc-borda));
}

.titleElo::after {
  background: linear-gradient(90deg, var(--calc-borda), transparent);
}

/* ---------------------------------------------------------- cards de elo */

.cardElo {
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(45, 212, 191, .07), transparent 60%),
    linear-gradient(180deg, var(--calc-fundo-2), var(--calc-fundo));
  border: 1px solid var(--calc-borda);
  border-radius: 18px;
  padding: 1.5rem 1.4rem 1.4rem;
  min-height: 470px;
  justify-content: space-between;
  gap: .25rem;
  box-shadow: 0 18px 46px rgba(0, 0, 0, .55);
  transition: border-color .25s, box-shadow .25s;
}

.cardElo:hover {
  border-color: #26404a;
  box-shadow: 0 18px 52px rgba(0, 0, 0, .62), 0 0 0 1px rgba(45, 212, 191, .10);
}

/* O emblema do elo é o herói do card. */
.cardElo .imgElo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  width: 100%;
  padding: .5rem 0 1.1rem;
}

.cardElo .imgElo img {
  width: 215px;
  max-width: 68%;
  height: auto;
  filter: drop-shadow(0 14px 30px rgba(0, 0, 0, .65))
          drop-shadow(0 0 26px rgba(45, 212, 191, .18));
  transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}

.cardElo:hover .imgElo img {
  transform: translateY(-4px) scale(1.03);
}

/* --------------------------------------------------------------- seletores */

.cardElo .form {
  width: 100%;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  gap: .85rem;
}

.cardElo .form-group {
  margin: 0;
  text-align: left;
}

.cardElo .form-group label,
.cardEloFinal .form-group label {
  display: block;
  font-size: .72rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--calc-texto-fraco);
  margin-bottom: .4rem;
  font-weight: 600;
}

.cardElo .custom-select,
.cardEloFinal .custom-select {
  background-color: #080b11;
  border: 1px solid #222c3a;
  border-radius: 11px;
  color: #fff;
  height: auto;
  padding: .78rem 2.2rem .78rem .95rem;
  font-size: .95rem;
  font-weight: 500;
  transition: border-color .18s, box-shadow .18s;
  /* seta própria, para não depender do tema do sistema */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b96a8' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .85rem center;
  background-size: 16px;
}

.cardElo .custom-select:focus,
.cardEloFinal .custom-select:focus {
  border-color: var(--calc-menta);
  box-shadow: 0 0 0 3px var(--calc-menta-fraco);
  outline: 0;
}

/* ------------------------------------------------------------ card resumo */

.resumo-pedido {
  max-width: 100%;
  top: 96px;
  padding-bottom: 0;
}

.cardEloFinal {
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(45, 212, 191, .08), transparent 62%),
    linear-gradient(180deg, var(--calc-fundo-2), var(--calc-fundo));
  border: 1px solid var(--calc-borda);
  border-radius: 18px;
  box-shadow: 0 18px 46px rgba(0, 0, 0, .6);
  padding: 1.25rem 1.25rem 1.35rem;
  min-height: 0;
  width: 100%;
}

/* elos de origem e destino no topo do resumo */
.cardEloFinal .contentEloFinal .row {
  justify-content: center;
  gap: .35rem;
}

.cardEloFinal h6 {
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--calc-texto-fraco);
  margin-bottom: .45rem;
  font-weight: 600;
}

.cardEloFinal .imgEloFinal img {
  width: 52px;
  height: auto;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .6));
}

.cardEloFinal hr {
  border-color: #1a2230;
  width: 100%;
  margin: .85rem 0;
}

/* preço */
#desconto {
  font-size: 1rem !important;
  color: #5d6879;
  margin-bottom: .1rem !important;
}

#desconto small,
#valor small {
  display: block;
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--calc-texto-fraco);
  text-decoration: none;
  margin-bottom: .1rem;
}

#desconto small { color: #4d5766; }

#valor {
  font-size: 2.35rem !important;
  font-weight: 800;
  letter-spacing: -1.5px;
  color: #fff;
  line-height: 1.1;
  margin-bottom: .2rem !important;
}

/* botão comprar */
#comprar {
  background: linear-gradient(135deg, #2dd4bf, #12a594);
  color: #04211d;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  border: 0;
  border-radius: 999px;
  padding: .85rem 1.5rem;
  width: 100%;
  font-size: .95rem;
  box-shadow: 0 10px 26px rgba(45, 212, 191, .22);
  transition: filter .2s, transform .2s, box-shadow .2s;
}

#comprar:hover {
  filter: brightness(1.07);
  transform: translateY(-1px);
  box-shadow: 0 14px 32px rgba(45, 212, 191, .3);
}

/* Os enfeites de canto foram feitos para o card antigo; no layout novo
   eles brigam com a borda arredondada. */
.cardElo .primeiro-quadrado,
.cardElo .segundo-quadrado,
.cardElo .terceiro-quadrado,
.cardElo .primeiro-quadrado-esquerdo,
.cardElo .primeiro-quadrado-direito,
.cardElo .segundo-quadrado-esquerdo,
.cardElo .segundo-quadrado-direito,
.cardEloFinal .primeiro-quadrado,
.cardEloFinal .segundo-quadrado,
.cardEloFinal .terceiro-quadrado,
.cardEloFinal .primeiro-quadrado-esquerdo,
.cardEloFinal .primeiro-quadrado-direito,
.cardEloFinal .segundo-quadrado-esquerdo,
.cardEloFinal .segundo-quadrado-direito,
.cardEloFinal::before,
.cardEloFinal::after {
  display: none !important;
}

/* --------------------------------------------------------------- responsivo */

@media (max-width: 991px) {
  .cardElo { min-height: 0; padding: 1.3rem 1.1rem; }
  .cardElo .imgElo img { width: 150px; }
  .resumo-pedido { position: static; margin-top: 1.5rem; }
  #valor { font-size: 2.3rem !important; }
}

@media (max-width: 575px) {
  .cardElo .imgElo img { width: 130px; }
  .titleElo { font-size: .85rem; }
}

/* ------------------------------------------------- ajustes finos do preço */

/* O "DE:" e o valor riscado ficam na mesma linha: o <small> não pode ser
   block, senão quebra. O risco fica só no valor, não no rótulo. */
#desconto {
  display: block;
  text-decoration: none;
  line-height: 1.25;
  color: #5d6879;
}

#desconto small {
  display: inline;
  margin: 0 .35rem 0 0;
  text-decoration: none;
}

#valor small { margin-bottom: .05rem; }

/* Grade de adicionais mais compacta dentro do resumo.
   Prefixado com .cardEloFinal porque o <style> do adicionais.js é injetado
   no <head> em runtime e, sem isso, venceria por vir depois. */
.cardEloFinal .tsp { margin: 12px 0 2px; }
.cardEloFinal .tsp-titulo { margin-bottom: 9px; font-size: 12px; }
.cardEloFinal .tsp-grade { gap: 7px; }
.cardEloFinal .tsp-item { padding: 9px 11px; border-radius: 10px; }
.cardEloFinal .tsp-nome { font-size: 12px; }
.cardEloFinal .tsp-tag { font-size: 11px; }
.cardEloFinal .tsp-prazo { margin: 12px 0 2px; font-size: 13px; gap: 8px; }
.cardEloFinal .tsp-prazo-ic { width: 22px; height: 22px; }

/* Risca só o número (marcado com <s> pelo JS), nunca o rótulo "DE:". */
#desconto { text-decoration: none; }
#desconto s { text-decoration: line-through; text-decoration-color: #4b5566; }
#desconto small { text-decoration: none; }

/* ------------------------------------------------- telas de pouca altura */
/* Notebooks de 768px não comportam o card no tamanho cheio; aqui o resumo
   encolhe o suficiente para o botão COMPRAR continuar visível sem rolar. */
@media (min-width: 992px) and (max-height: 950px) {
  .titleElo { margin-top: .75rem; padding-bottom: .6rem; font-size: .85rem; }
  .cardElo { min-height: 380px; padding: 1.1rem 1.2rem 1.2rem; }
  .cardElo .imgElo { padding: .25rem 0 .8rem; }
  .cardElo .imgElo img { width: 155px; }
  .cardElo .form { gap: .6rem; }
  .cardElo .custom-select,
.cardEloFinal .custom-select { padding: .6rem 2.2rem .6rem .9rem; }

  .cardEloFinal { padding: 1rem 1.1rem 1.1rem; }
  .cardEloFinal .imgEloFinal img { width: 42px; }
  .cardEloFinal hr { margin: .6rem 0; }
  #valor { font-size: 1.95rem !important; }
  #desconto { font-size: .9rem !important; }

  .cardEloFinal .tsp { margin: 8px 0 2px; }
  .cardEloFinal .tsp-titulo { margin-bottom: 6px; font-size: 11px; }
  .cardEloFinal .tsp-grade { gap: 5px; }
  .cardEloFinal .tsp-item { padding: 5px 9px; border-radius: 9px; }
  .cardEloFinal .tsp-nome { font-size: 11px; line-height: 1.2; }
  .cardEloFinal .tsp-tag { font-size: 10px; }

  /* prazo numa linha só, sem o ícone, para poupar altura */
  .cardEloFinal .tsp-prazo { margin: 8px 0 2px; font-size: 11.5px; gap: 5px; row-gap: 0; }
  .cardEloFinal .tsp-prazo-ic { display: none; }
  .cardEloFinal .tsp-prazo-inicio { font-size: 10.5px; margin-bottom: 0; }

  #comprar { padding: .68rem 1.4rem; font-size: .88rem; }
}

/* ------------------------------------------------ decoração do Coach/MD5 */
/* Esses dois emblemas são só enfeite (ferro -> desafiante). O filtro inline
   original os deixava quase pretos, virando manchas no fundo escuro novo. */
.elo-decor {
  width: 54px;
  height: auto;
  filter: grayscale(1) brightness(1.6);
  opacity: .28;
}

.imgEloFinal .fa-angles-right {
  color: var(--calc-menta);
  opacity: .5;
  margin: 0 .6rem;
}

/* ==========================================================================
   Fazer o botão COMPRAR caber na primeira tela, sem rolagem
   --------------------------------------------------------------------------
   Em notebooks (768–900px de altura) o cabeçalho do serviço — rótulo do jogo,
   título grande, subtítulo e parágrafo — empurrava a calculadora para baixo da
   dobra. Aqui esse cabeçalho encolhe proporcionalmente, sem sumir.
   ========================================================================== */

@media (min-width: 992px) and (max-height: 950px) {
  .sectElo .container .text-center .display-4,
  #title {
    font-size: 2.4rem !important;
    line-height: 1.1;
    margin-bottom: 0 !important;
  }

  #eloRoyal {
    font-size: 1.15rem !important;
    line-height: 1.2;
  }

  .subtitle {
    font-size: .88rem;
    line-height: 1.45;
    margin-top: .5rem !important;
    margin-bottom: .35rem !important;
    max-width: 780px;
    margin-left: auto;
    margin-right: auto;
  }

  .choice {
    font-size: .72rem;
    letter-spacing: .18em;
  }
}

/* Telas realmente baixas (720–800px). Aqui o subtítulo entre parênteses sai —
   ele só repete o título — e a descrição vira uma linha discreta, para o
   botão COMPRAR continuar acima da dobra. */
@media (min-width: 992px) and (max-height: 800px) {
  #title { font-size: 1.75rem !important; }
  #eloRoyal { display: none; }
  .subtitle {
    font-size: .76rem;
    line-height: 1.4;
    margin-top: .3rem !important;
    margin-bottom: .2rem !important;
    max-width: 720px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .titleElo { margin-top: .35rem; padding-bottom: .4rem; font-size: .8rem; }
  .sectElo .ptb_100Elo, .sectElo.ptb_100Elo { padding-top: .3rem; }

  .cardElo { min-height: 330px; padding: 1rem 1.1rem 1.05rem; }
  .cardElo .imgElo img { width: 130px; }
  .cardEloFinal { padding: .85rem 1rem .95rem; }
  .cardEloFinal .imgEloFinal img { width: 38px; }
  .cardEloFinal h6 { font-size: .66rem; margin-bottom: .3rem; }
  .cardEloFinal hr { margin: .5rem 0; }
  #valor { font-size: 1.75rem !important; }
  #desconto { font-size: .82rem !important; }
  .cardEloFinal .tsp-item { padding: 4px 8px; }
  .cardEloFinal .tsp-nome { font-size: 10.5px; }
  #comprar { padding: .6rem 1.3rem; font-size: .84rem; }
}

/* Folga extra na faixa média: 1536x864 ficava com o botão colado no limite. */
@media (min-width: 992px) and (min-height: 801px) and (max-height: 950px) {
  .cardEloFinal .tsp-grade { gap: 4px; }
  .cardEloFinal .tsp-item { padding: 5px 9px; }
  .cardEloFinal hr { margin: .55rem 0; }
  #valor { font-size: 1.85rem !important; }
}

/* 1280x720 e afins: o parágrafo de descrição sai de cena. Ele continua
   disponível mais abaixo na página; aqui o que importa é o cliente ver o
   preço e o botão sem rolar. */
@media (min-width: 992px) and (max-height: 745px) {
  .subtitle { display: none; }
  #title { font-size: 1.6rem !important; }
  .cardElo { min-height: 300px; }
  .cardElo .imgElo img { width: 115px; }
}

/* Margem de segurança na faixa de 864px, que estava com folga de poucos px. */
@media (min-width: 992px) and (min-height: 801px) and (max-height: 900px) {
  .cardEloFinal { padding: .95rem 1.05rem 1rem; }
  .cardEloFinal .imgEloFinal img { width: 38px; }
  #valor { font-size: 1.75rem !important; }
  .cardEloFinal hr { margin: .5rem 0; }
}

/* Full HD (1080p) ficava com apenas 16px de folga — pouco para navegadores
   com barra de favoritos ou zoom. Uma compressão leve resolve. */
@media (min-width: 992px) and (min-height: 951px) and (max-height: 1100px) {
  #title { font-size: 2.6rem !important; }
  .subtitle { margin-bottom: .4rem !important; }
  .titleElo { margin-top: .9rem; }
  .cardElo { min-height: 420px; }
  .cardEloFinal { padding: 1.1rem 1.15rem 1.2rem; }
}

/* ==========================================================================
   Arte de fundo — duas camadas
   --------------------------------------------------------------------------
   Antes: o personagem ficava à direita (background-position: 120%) com opacidade
   .8, ou seja, a parte mais clara e detalhada da arte ficava exatamente atrás do
   card de preço e do botão COMPRAR — o lugar que mais precisa estar limpo —
   enquanto a metade esquerda da tela ficava preta e vazia.

   Agora são duas camadas:
     ::before  = ambiente (aurora + malha hexagonal), cobre a tela inteira e
                 tira o "buraco preto" sem disputar leitura com nada;
     ::after   = personagem, discreto, ancorado na esquerda e desaparecendo
                 antes de chegar no resumo do pedido.

   O container tem ~3000px de altura, então height:100% esticaria as camadas
   para mais de 3400px. Tudo aqui é medido em vh, pela janela.
   ========================================================================== */

.body-content-calc::before {
  top: 0 !important;
  left: 0 !important;
  right: auto !important;
  width: 100% !important;
  height: 100vh !important;
  background-image: url(../imagens/background/calc-aurora.webp) !important;
  background-position: center top !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  opacity: 1 !important;
  /* dissolve na vertical para emendar com o resto da página */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 100%);
}

.body-content-calc::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  top: 0;
  left: 0;
  width: 48%;
  height: 100vh;
  background: url(../imagens/background/tresh.webp) left -7% bottom / auto 92vh no-repeat;
  opacity: .34;
  filter: grayscale(.2);
  /* Duas máscaras cruzadas (intersect): a horizontal apaga o personagem antes
     do card de resumo; a vertical apaga a cabeça dele na faixa do título e dos
     rótulos "1. LIGA E DIVISÃO ATUAL". */
  -webkit-mask-image:
    linear-gradient(90deg, #000 0%, #000 44%, transparent 100%),
    linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .55) 22%, #000 40%);
  mask-image:
    linear-gradient(90deg, #000 0%, #000 44%, transparent 100%),
    linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .55) 22%, #000 40%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

/* Valorant tem a própria personagem (Viper) e o mesmo tratamento. */
.body-content-calc.vava::before {
  background-image: url(../imagens/background/calc-aurora.webp) !important;
}

.body-content-calc.vava::after {
  background-image: url(../imagens/background/viper.webp);
}

/* No celular a coluna vira uma só e o personagem passaria por baixo do texto.
   Fica só o ambiente, mais fraco, e ele sai de cena. */
@media (max-width: 992px) {
  .body-content-calc::before,
  .body-content-calc.vava::before {
    opacity: .55 !important;
    height: 70vh !important;
  }

  .body-content-calc::after,
  .body-content-calc.vava::after {
    display: none;
  }
}

/* Brilho suave atrás do card do resumo, para ele descolar do fundo. */
.body-resumo-pedido::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 4%;
  right: -12%;
  width: 125%;
  height: 80%;
  pointer-events: none;
  background: radial-gradient(60% 55% at 55% 40%, rgba(45, 212, 191, .10), transparent 70%);
}

/* ==========================================================================
   Painel de vídeo — abaixo das etapas 1 e 2
   --------------------------------------------------------------------------
   Ocupa exatamente a mesma largura das duas cartas de liga, alinhado nas duas
   bordas. A capa é o próprio frame do vídeo; o player do YouTube só é criado
   no clique (js/serviços/video.js), então a página não paga o carregamento
   dele em toda visita.
   ========================================================================== */

/* Sem margem lateral: o .row interno tem margin -15px e as colunas das cartas
   têm padding 15px, então a borda da carta cai exatamente na borda de conteúdo
   da coluna — que é onde este bloco começa. As três bordas ficam alinhadas. */
.vidbox {
  position: relative;
  z-index: 4;
  margin: 1.35rem 0 0;
  text-align: left;
}

/* ---- faixa de título ---- */

.vidbox-topo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: .7rem;
  padding: 0 2px;
}

.vidbox-pisca {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--calc-menta, #2dd4bf);
  box-shadow: 0 0 0 0 rgba(45, 212, 191, .55);
  animation: vidboxPisca 2.4s ease-out infinite;
  flex-shrink: 0;
}

@keyframes vidboxPisca {
  0%   { box-shadow: 0 0 0 0 rgba(45, 212, 191, .5); }
  70%  { box-shadow: 0 0 0 9px rgba(45, 212, 191, 0); }
  100% { box-shadow: 0 0 0 0 rgba(45, 212, 191, 0); }
}

.vidbox-rotulo {
  font-family: Poppins, system-ui, sans-serif;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #d8e2ee;
  white-space: nowrap;
}

.vidbox-fio {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(45, 212, 191, .45), rgba(45, 212, 191, .05) 60%, transparent);
}

.vidbox-selo {
  font-family: Poppins, system-ui, sans-serif;
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #6f7c8d;
  border: 1px solid #212a38;
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
}

/* ---- moldura ---- */

.vidbox-moldura {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: #080b11;
  border: 1px solid rgba(45, 212, 191, .16);
  box-shadow:
    0 22px 50px -22px rgba(0, 0, 0, .95),
    0 0 0 1px rgba(255, 255, 255, .02) inset,
    0 0 46px -18px rgba(45, 212, 191, .35);
  transition: border-color .25s ease, box-shadow .25s ease;
}

.vidbox-moldura:hover {
  border-color: rgba(45, 212, 191, .38);
  box-shadow:
    0 26px 56px -22px rgba(0, 0, 0, .95),
    0 0 0 1px rgba(255, 255, 255, .03) inset,
    0 0 62px -14px rgba(45, 212, 191, .5);
}

/* Fio de luz no topo da moldura. */
.vidbox-moldura::before {
  content: "";
  position: absolute;
  z-index: 3;
  top: 0;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(45, 212, 191, .8), transparent);
  pointer-events: none;
}

/* Cantos em L, estilo mira de HUD. */
.vidbox-canto {
  position: absolute;
  z-index: 3;
  width: 22px;
  height: 22px;
  pointer-events: none;
  border: 0 solid rgba(45, 212, 191, .55);
  transition: border-color .25s ease;
}

.vidbox-moldura:hover .vidbox-canto { border-color: rgba(45, 212, 191, .95); }

.vidbox-canto.ce { top: 11px;    left: 11px;  border-top-width: 2px; border-left-width: 2px;  border-top-left-radius: 6px; }
.vidbox-canto.cd { top: 11px;    right: 11px; border-top-width: 2px; border-right-width: 2px; border-top-right-radius: 6px; }
.vidbox-canto.be { bottom: 11px; left: 11px;  border-bottom-width: 2px; border-left-width: 2px;  border-bottom-left-radius: 6px; }
.vidbox-canto.bd { bottom: 11px; right: 11px; border-bottom-width: 2px; border-right-width: 2px; border-bottom-right-radius: 6px; }

/* ---- capa clicável ---- */

.vidbox-gatilho {
  display: block;
  position: relative;
  width: 100%;
  padding: 0;
  border: 0;
  background: #080b11;
  cursor: pointer;
  /* aspect-ratio moderno; o padding-bottom abaixo é o plano B em navegador antigo */
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

@supports not (aspect-ratio: 16 / 9) {
  .vidbox-gatilho { height: 0; padding-bottom: 56.25%; }
}

.vidbox-capa {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .62;
  filter: saturate(.9) contrast(1.05);
  transform: scale(1.01);
  transition: transform .5s cubic-bezier(.2, .7, .2, 1), opacity .35s ease;
}

.vidbox-moldura:hover .vidbox-capa { transform: scale(1.055); opacity: .74; }

/* Escurece o pé da capa para o texto ficar legível em qualquer frame. */
.vidbox-veu {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(58% 62% at 50% 46%, rgba(45, 212, 191, .13), transparent 72%),
    linear-gradient(180deg, rgba(8, 11, 17, .55) 0%, rgba(8, 11, 17, .12) 34%, rgba(8, 11, 17, .82) 82%, rgba(8, 11, 17, .96) 100%);
}

.vidbox-play {
  position: absolute;
  z-index: 2;
  top: 46%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 68px;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #04231f;
  background: linear-gradient(145deg, #5eead4, #14b8a6);
  box-shadow: 0 12px 30px -8px rgba(45, 212, 191, .75);
  transition: transform .28s cubic-bezier(.2, .7, .2, 1), box-shadow .28s ease;
}

.vidbox-play svg { margin-left: 3px; }

/* Anel que pulsa em volta do play. */
.vidbox-play::after {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 1.5px solid rgba(94, 234, 212, .5);
  animation: vidboxAnel 2.6s ease-out infinite;
}

@keyframes vidboxAnel {
  0%   { transform: scale(.86); opacity: .85; }
  70%  { transform: scale(1.22); opacity: 0; }
  100% { transform: scale(1.22); opacity: 0; }
}

.vidbox-moldura:hover .vidbox-play {
  transform: translate(-50%, -50%) scale(1.09);
  box-shadow: 0 16px 38px -8px rgba(45, 212, 191, .9);
}

.vidbox-texto {
  position: absolute;
  z-index: 2;
  left: 26px;
  right: 26px;
  bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: left;
  font-family: Poppins, system-ui, sans-serif;
}

.vidbox-texto strong {
  font-size: 1.02rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.25;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .9);
}

.vidbox-texto em {
  font-style: normal;
  font-size: .78rem;
  color: #a9b5c4;
  line-height: 1.35;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .9);
}

/* ---- player, depois do clique ---- */

.vidbox-player {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  background: #000;
}

@supports not (aspect-ratio: 16 / 9) {
  .vidbox-player { height: 400px; }
}

.vidbox-moldura.tocando .vidbox-canto { opacity: 0; }

/* ---- ajustes por altura de tela ---- */

@media (min-width: 992px) and (max-height: 950px) {
  .vidbox { margin-top: 1.05rem; }
  .vidbox-play { width: 60px; height: 60px; }
  .vidbox-texto strong { font-size: .94rem; }
  .vidbox-texto em { font-size: .74rem; }
}

@media (min-width: 992px) and (max-height: 800px) {
  .vidbox { margin-top: .85rem; }
  .vidbox-topo { margin-bottom: .5rem; }
  .vidbox-play { width: 54px; height: 54px; }
  .vidbox-texto { left: 20px; right: 20px; bottom: 15px; }
  .vidbox-texto strong { font-size: .88rem; }
}

@media (max-width: 991px) {
  .vidbox { margin: 1.6rem 0 .4rem; }
  .vidbox-selo { display: none; }
  .vidbox-play { width: 58px; height: 58px; }
  .vidbox-texto { left: 18px; right: 18px; bottom: 14px; }
  .vidbox-texto strong { font-size: .92rem; }
  .vidbox-texto em { font-size: .72rem; }
  .vidbox-canto { width: 16px; height: 16px; }
}

@media (max-width: 575px) {
  .vidbox-texto em { display: none; }
}

/* ==========================================================================
   Resumo que acompanha a rolagem
   --------------------------------------------------------------------------
   Com o vídeo abaixo das etapas 1 e 2, a coluna da esquerda ficou mais alta que
   a do resumo. O .resumo-pedido já era sticky no CSS original, mas nunca grudava:
   a coluna que o contém tinha a altura do próprio conteúdo, então não sobrava
   trilho para ele correr. Basta esticar a coluna.

   Efeito: ao rolar para assistir o vídeo, o preço e o botão COMPRAR continuam
   à direita, sempre visíveis.
   ========================================================================== */

@media (min-width: 992px) {
  .sectElo .container > .row > .body-resumo-pedido {
    align-self: stretch;
  }

  .resumo-pedido {
    position: sticky;
    top: 96px;
  }
}