/* ============================================================
   PLAS — ponte entre plas-lp.css (CSS original, sem alteracoes) e o
   DOM que o Elementor realmente gera. NAO redefine aparencia — so
   reancora regras nos elementos onde a estrutura do Elementor difere
   da pagina estatica original:

   - Container: "css_classes" aplica a classe no PROPRIO elemento
     (confirmado por sonda) -> `.crs-card`, `.offer-box`, `.hero` etc.
     ja caem exatamente onde caiam na pagina original. Sem ajuste.
   - Heading com tag h1-h6: o texto real fica em <h1..h6 class=
     "elementor-heading-title">, filho do wrapper que recebe a classe
     custom. A tipografia base (fonte, peso, uppercase, tamanho) vem
     de global.css por SELETOR DE TAG (`h1,h2,...`) e ja funciona por
     heranca/selecao direta de tag. So' falta o que NAO e' tag-based.
   - Heading com tag "div" (rotulos): a div nao herda a base de
     h1-h6, entao a tipografia precisa ser reancorada aqui.
   - Texto (text-editor) e botao (button): a classe cai no wrapper;
     cor/tamanho de fonte propagam por heranca (paragrafo/link
     herdam), so' o BACKGROUND do botao (nao herda) precisa ser
     reancorado no <a class="elementor-button">.
   - Imagem: a classe cai no wrapper, nao na <img>; box do bio precisa
     ser reancorada.
   ============================================================ */

/* --- Rotulos em <div> (nao herdam a base tipografica de h1-h6) --- */
.section-label .elementor-heading-title {
  display: block;
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.crs-meta .elementor-heading-title {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-weight: 600;
}
.bonus-icon .elementor-heading-title { font-size: 2rem; line-height: 1; }
.offer-header .elementor-heading-title {
  font-family: var(--font-title);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
}
.offer-price-main .elementor-heading-title,
.offer-price-main .elementor-widget-container > div {
  font-family: var(--font-title);
  font-size: clamp(3.5rem, 10vw, 5.5rem);
  line-height: 1;
}
.offer-price-main sup { font-size: 0.35em; vertical-align: top; margin-top: 0.4em; }
.offer-price-main small { font-size: 0.3em; color: var(--plas-grey); }
.plas-bio-label .elementor-heading-title {
  font-family: var(--font-title);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: .14em;
}

/* --- accent/orange: spans inline dentro de titulos, sem depender de ancestor --- */
.accent, .orange { color: var(--plas-orange); }

/* --- Botao: classe cai no wrapper do widget, nao no <a>.
   Visual completo (padding/cor/raio/hover) reancorado no link real. --- */
.btn.btn-primary .elementor-button {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  padding: 16px 40px;
  border-radius: 4px;
  background-color: var(--plas-orange);
  color: var(--plas-white);
  border: none;
  transition: opacity 0.2s, transform 0.2s, box-shadow 0.25s var(--ease-out);
}
.btn.btn-primary .elementor-button:hover {
  opacity: 0.88;
  transform: translateY(-1px);
  box-shadow: 0 0 0 2px rgba(250, 66, 0, 0.25), 0 8px 28px rgba(250, 66, 0, 0.30);
}
.btn .elementor-button-text { color: inherit; font: inherit; }

.btn-hero .elementor-button {
  font-size: 1rem;
  padding: 18px 44px;
  border-radius: 3px;
  position: relative;
  overflow: hidden;
}
.btn-hero .elementor-button::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.1) 50%, transparent 100%);
  transform: translateX(-100%);
  animation: shimmer 3s ease-in-out infinite;
}
.btn-hero-pulse .elementor-button { animation: hero-pulse 2.5s ease-in-out infinite; }

.offer-cta-btn .elementor-button {
  display: block;
  width: 100%;
  font-size: 1rem;
  padding: 18px 32px;
  border-radius: 3px;
  animation: hero-pulse 2.5s ease-in-out infinite;
}

/* --- Imagem do bio: classe cai no wrapper, nao na <img> --- */
.plas-bio-photo img {
  width: 280px;
  height: 340px;
  object-fit: cover;
  object-position: top;
  border: 1px solid rgba(250, 66, 0, .2);
}
@media (max-width: 720px) {
  .plas-bio-photo img { width: 100%; height: 260px; }
}

/* --- Ribbon "BONUS" do bonus-card: o ::before esta computando
   width/height ~1150px (herdando a largura do container em vez de
   shrink-to-fit da propria regra), o que produz um triangulo laranja
   solido cobrindo o card inteiro (clipado pelo overflow:hidden do pai
   em vez do pequeno selo rotacionado pretendido). Causa exata nao
   identificada (possível regra de base do Elementor para containers
   flex disputando o sizing do pseudo-elemento); forcando as dimensoes
   aqui resolve sem depender de entender o motivo. --- */
.bonus-card::before {
  width: auto !important;
  height: auto !important;
  inset: auto auto auto auto !important;
}

/* --- Laptop da "videochamada" (mockup do bonus AO VIVO): CSS que no
   HTML original vivia num <style> inline da propria pagina (nao em
   style.css) — faltava no porte inicial, o widget-html renderizava
   sem estilo nenhum. Portado aqui na integra. --- */
.vc-laptop-wrap { display: flex; justify-content: center; }
.vc-laptop { width: 320px; filter: drop-shadow(0 24px 48px rgba(232,93,4,0.18)); }
.vc-screen {
  background: #0d0d0d; border: 2px solid #2a2a2a; border-radius: 10px 10px 0 0;
  padding: 10px; display: flex; flex-direction: column; gap: 8px;
}
.vc-topbar { display: flex; justify-content: space-between; align-items: center; padding: 2px 4px 4px; }
.vc-meeting-title { font-size: 10px; color: #666; letter-spacing: .06em; }
.vc-live-badge { font-size: 9px; color: #ff4444; font-weight: 700; letter-spacing: .1em; animation: vc-blink 1.4s ease-in-out infinite; }
@keyframes vc-blink { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
.vc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.vc-tile {
  background: #141414; border-radius: 6px; padding: 16px 8px 10px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  border: 2px solid transparent; min-height: 88px;
}
.vc-tile-1 { animation: vc-s1 9s infinite; }
.vc-tile-2 { animation: vc-s2 9s infinite; }
.vc-tile-3 { animation: vc-s3 9s infinite; }
.vc-tile-4 { animation: vc-s4 9s infinite; }
@keyframes vc-s1 { 0%,18%,70%,100% { border-color: transparent; box-shadow: none; } 25%,58% { border-color: #e85d04; box-shadow: 0 0 10px rgba(232,93,4,.35); } }
@keyframes vc-s2 { 0%,40%,100% { border-color: transparent; box-shadow: none; } 48%,85% { border-color: #e85d04; box-shadow: 0 0 10px rgba(232,93,4,.35); } }
@keyframes vc-s3 { 0%,10%,62%,100% { border-color: transparent; box-shadow: none; } 18%,50% { border-color: #e85d04; box-shadow: 0 0 10px rgba(232,93,4,.35); } }
@keyframes vc-s4 { 0%,55%,96%,100% { border-color: transparent; box-shadow: none; } 64%,88% { border-color: #e85d04; box-shadow: 0 0 10px rgba(232,93,4,.35); } }
.vc-avatar { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; color: #fff; }
.vc-av-o { background: #e85d04; }
.vc-av-b { background: #2563eb; }
.vc-av-g { background: #16a34a; }
.vc-av-p { background: #7c3aed; }
.vc-name { font-size: 9px; color: #777; letter-spacing: .05em; }
.vc-controls { display: flex; justify-content: center; gap: 8px; padding: 6px 0 2px; }
.vc-ctrl { width: 28px; height: 28px; border-radius: 50%; background: #1e1e1e; display: flex; align-items: center; justify-content: center; font-size: 11px; }
.vc-ctrl-end { background: #dc2626; }
.vc-hinge { height: 5px; background: #1a1a1a; border-left: 2px solid #2a2a2a; border-right: 2px solid #2a2a2a; }
.vc-base { background: #161616; border-radius: 0 0 8px 8px; border: 2px solid #2a2a2a; border-top: none; height: 18px; display: flex; justify-content: center; align-items: center; }
.vc-base-pad { width: 80px; height: 5px; background: #222; border-radius: 3px; }

/* --- Grade de cursos: original era carrossel com scroll horizontal;
   aqui e' grade estatica (sem depender de JS, melhor no mobile). O
   card em si (.crs-card) usa o CSS original ja carregado sem alteracao;
   so' o container/rail original nao existe, entao nada a reancorar. --- */
@media (max-width: 767px) {
  .crs-card { width: 100%; }
}