/* ==========================================================================
   BOT Internet — landing Black Friday "Black BOT" (template-parts/blackfriday.php)
   Carregado só em /blackfriday/. Complementa bot.css/theme.css (.bot-landing__*).
   Paleta do banner da campanha (webhook/banner-example-blackfriday).
   ========================================================================== */

.bot-black__hero,
.bot-black__plans-section {
  --bb-azul: #0019e2;
  --bb-azul-claro: #2a4bff;
  --bb-azul-escuro: #0a0e3a;
  --bb-ciano: #21def7;
  --bb-jet: #040616;
  --bb-gelo: #e0efff;
}

/* ----- Hero ----- */
.bot-black__hero { position: relative; isolation: isolate; overflow: hidden; background: var(--bb-jet); color: #fff; }
/* Fundo azul em diagonal à direita (como no banner) + grade de pontos */
.bot-black__hero:before { content: ''; position: absolute; z-index: -2; top: 0; bottom: 0; left: 46%; right: -10%; background: radial-gradient(80% 120% at 60% 40%, var(--bb-azul-claro) 0%, var(--bb-azul) 55%, #0010a8 100%); transform: skewX(-14deg); transform-origin: top; }
.bot-black__hero:after { content: ''; position: absolute; z-index: -1; inset: 0; background-image: radial-gradient(rgba(255,255,255,.12) 1.2px, transparent 1.4px); background-size: 34px 34px; pointer-events: none; }

.bot-black__hero-inner { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 30px; padding: 54px 0 46px; }

.bot-black__badge { display: inline-block; padding: 9px 20px; border-radius: 99px; background: var(--bb-ciano); color: var(--bb-jet); font-size: 14px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; transform: rotate(-6deg); box-shadow: 0 10px 24px rgba(33,222,247,.25); }

.bot-home h1.bot-black__title { display: flex; flex-direction: column; max-width: none; margin: 18px 0 18px; font-size: clamp(64px, 9vw, 128px); font-weight: 900; line-height: .84; letter-spacing: -.045em; color: #fff; transform: rotate(-6deg); transform-origin: left top; }
.bot-black__title-accent { color: var(--bb-ciano); }

.bot-black__tagline { margin: 34px 0 8px; font-size: 14px; font-weight: 800; letter-spacing: .18em; color: var(--bb-gelo); }
.bot-black__tagline span { color: var(--bb-ciano); }
.bot-black__subtitle { max-width: 520px; margin: 0 0 22px; font-size: 17px; line-height: 1.5; color: rgba(224,239,255,.88); }

/* Botões do hero da home (template-parts/home/blackfriday.php) */
.bot-black__actions { margin-top: 6px; }
.bot-home .bot-black__actions .bot-black__cta { background: var(--bb-ciano); color: var(--bb-jet); }
.bot-home .bot-black__actions .bot-black__cta:hover { box-shadow: 0 10px 22px rgba(33,222,247,.35); }

/* Formulário sobre o fundo escuro */
.bot-black__form-slot .bot-landing__form { border-color: rgba(33,222,247,.35); background: rgba(10, 14, 58, .72); }
.bot-black__form-slot .bot-home__form-required { color: var(--bb-ciano); }
.bot-black__form-slot .bot-landing__form button.bot-home__button { background: var(--bb-ciano); color: var(--bb-jet); }
.bot-black__form-slot .bot-landing__form button.bot-home__button:hover { box-shadow: 0 10px 22px rgba(33,222,247,.35); }

/* Mascote + etiqueta de preço */
.bot-black__visual { position: relative; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: 0; }
.bot-black__floor { position: absolute; left: 4%; bottom: 0; width: 46%; height: 50px; border-radius: 50%; background: radial-gradient(closest-side, rgba(33,222,247,.5), rgba(33,222,247,0)); }
.bot-home .bot-black__mascot { position: relative; width: 100%; max-width: 300px; justify-self: center; filter: drop-shadow(0 0 14px rgba(33,222,247,.45)) drop-shadow(0 16px 22px rgba(2,4,21,.5)); }

.bot-black__tag { position: relative; z-index: 2; margin-left: -10px; padding: 26px 22px 24px 40px; color: var(--bb-azul-escuro); background: #fff; clip-path: polygon(16% 0, 100% 0, 100% 100%, 16% 100%, 0 50%); border-radius: 14px; transform: rotate(6deg); filter: drop-shadow(0 22px 34px rgba(2,4,21,.45)); }
.bot-black__tag:before { content: ''; position: absolute; left: 7%; top: 50%; width: 16px; height: 16px; margin-top: -8px; border-radius: 50%; background: var(--bb-azul); }
.bot-black__tag p { margin: 0; }
.bot-black__tag-lead { padding-left: 14%; font-size: 22px; font-weight: 900; line-height: 1; letter-spacing: -.01em; }
.bot-black__tag-lead span { color: var(--bb-azul); }
.bot-black__tag-por { padding-left: 14%; margin-top: 8px !important; font-size: 15px; font-weight: 600; }
.bot-black__tag-price { display: flex; align-items: flex-start; gap: 4px; padding-left: 10%; color: var(--bb-azul); }
.bot-black__tag-prefix { margin-top: 18px; font-size: 22px; font-weight: 800; }
.bot-black__tag-price strong { font-size: clamp(72px, 8vw, 104px); font-weight: 900; line-height: .9; letter-spacing: -.06em; }
.bot-black__tag-cents { margin-top: 10px; font-size: 32px; font-weight: 900; line-height: 1; }
.bot-black__tag-boletos { display: inline-flex; margin: 6px 0 0 10% !important; padding: 8px 12px; border-radius: 9px; background: var(--bb-jet); color: #fff; font-size: 14px; font-weight: 700; white-space: nowrap; }
.bot-black__tag-boletos b { margin-left: 5px; color: var(--bb-ciano); }

/* Faixa inferior: apps + condições */
.bot-black__strip { position: relative; background: var(--bb-jet); border-top: 1px solid rgba(33,222,247,.18); }
.bot-black__strip-inner { display: flex; align-items: center; gap: 22px; padding: 16px 0; }
.bot-black__strip-label { flex: none; margin: 0; color: var(--bb-ciano); font-size: 13px; font-weight: 900; line-height: 1.1; max-width: 70px; }
.bot-black__apps { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin: 0; padding: 0; list-style: none; }
.bot-black__apps li { display: flex; align-items: center; }
/* Imagens em 2x exibidas na metade do tamanho (altura vem do template), nítidas em telas retina */
.bot-home .bot-black__apps img { display: block; width: auto; max-width: none; }
.bot-black__strip-note { margin: 0 0 0 auto; max-width: 420px; font-size: 12px; line-height: 1.4; color: rgba(224,239,255,.8); }

/* ----- Planos (seção escura) ----- */
.bot-black__plans-section { background: linear-gradient(180deg, var(--bb-jet) 0%, #070b2c 100%); }
.bot-black__plans-section .bot-home__kicker { color: var(--bb-ciano); }
.bot-home .bot-black__plans-section h2 { color: #fff; }
.bot-black__plans-section .bot-home__section-head p { color: rgba(224,239,255,.78); }

.bot-home__plan.bot-black__plan { position: relative; color: #fff; background: linear-gradient(160deg, #0d1450 0%, #080c33 100%); border-color: rgba(33,222,247,.22); box-shadow: 0 16px 35px rgba(0, 4, 30, .4); transition: border-color .2s, transform .2s; }
.bot-home__plan.bot-black__plan:hover { border-color: var(--bb-ciano); transform: translateY(-4px); }
.bot-black__plan-flag { align-self: flex-start; padding: 5px 10px; border-radius: 99px; background: var(--bb-ciano); color: var(--bb-jet); font-size: 11px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.bot-landing__plans .bot-black__plan h3 { margin-top: 14px; color: #fff; }
.bot-black__plan .bot-landing__plan-subtitle { color: var(--bb-ciano); }
.bot-black__plan-por { margin: 6px 0 0; font-size: 13px; font-weight: 700; color: rgba(224,239,255,.75); }
.bot-landing__plans .bot-black__plan .bot-home__price { margin: 2px 0 6px; font-size: 40px; color: #fff; }
.bot-black__plan-boletos { align-self: flex-start; margin: 0 0 10px; padding: 6px 10px; border-radius: 8px; background: rgba(33,222,247,.12); font-size: 13px; font-weight: 700; }
.bot-black__plan-boletos b { color: var(--bb-ciano); }
.bot-black__plan-after { margin: 0 0 18px; font-size: 13px; color: rgba(224,239,255,.7); }
.bot-black__plan-after b { color: #fff; }
.bot-black__plan ul { color: rgba(224,239,255,.82); }
.bot-black__plan li:before { color: var(--bb-ciano); }
.bot-home .bot-landing__plans .bot-black__plan .bot-landing__plan-actions button.bot-black__button,
.bot-home .bot-black__plan a.bot-black__button { background: var(--bb-ciano); color: var(--bb-jet); }

.bot-black__note { border-color: rgba(33,222,247,.3); background: rgba(33,222,247,.08); }
.bot-black__note .bot-home__plans-note-icon { background: var(--bb-ciano); color: var(--bb-jet); }
.bot-black__note p { color: rgba(224,239,255,.85); }

/* ----- Responsivo ----- */
@media (max-width: 1100px) {
  .bot-black__strip-inner { flex-wrap: wrap; }
  .bot-black__strip-note { margin-left: 0; max-width: none; flex-basis: 100%; }
}
@media (max-width: 900px) {
  .bot-black__hero:before { left: 0; right: 0; top: auto; height: 46%; bottom: 0; transform: none; clip-path: polygon(0 18%, 100% 0, 100% 100%, 0 100%); }
  .bot-black__hero-inner { grid-template-columns: 1fr; padding: 40px 0 36px; }
  .bot-black__visual { max-width: 520px; margin: 10px auto 0; width: 100%; }
}
@media (max-width: 560px) {
  .bot-home h1.bot-black__title { font-size: 68px; }
  .bot-black__visual { grid-template-columns: 1fr; justify-items: center; }
  .bot-home .bot-black__mascot { max-width: 200px; }
  .bot-black__floor { left: 25%; width: 50%; bottom: auto; top: 160px; }
  .bot-black__tag { margin: -20px 0 0; width: min(320px, 100%); transform: rotate(3deg); }
  .bot-black__tag-price strong { font-size: 76px; }
}