/* ============================================================
   PAGES — Grupo Modão
   Padrões compartilhados pelas páginas internas: banner de topo,
   breadcrumb, filtros/tabs, lightbox, cards de download, formulário.
   ============================================================ */

/* ==================== PAGE HEADER (BANNER) ==================== */
.page-header {
  position: relative;
  padding-block: calc(var(--space-10) + var(--space-6)) var(--space-8);
  background: var(--gradient-surface);
  overflow: hidden;
  border-bottom: 1px solid var(--glass-border);
}

.page-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gradient-stage);
  pointer-events: none;
}

.page-header__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-xs);
  color: var(--color-white-muted);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
}

.breadcrumb a {
  color: var(--color-white-muted);
  transition: color var(--duration-fast) var(--ease-out-soft);
}

.breadcrumb a:hover {
  color: var(--color-gold-light);
}

.breadcrumb span[aria-current] {
  color: var(--color-gold-light);
}

.page-header__title {
  max-width: 760px;
}

.page-header__desc {
  max-width: 640px;
  color: var(--color-white-muted);
  font-size: var(--fs-md);
}

/* ==================== FILTROS / TABS ==================== */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-7);
}

.filter-btn {
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-pill);
  border: 1px solid var(--glass-border);
  background: transparent;
  color: var(--color-white-muted);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  transition: border-color var(--duration-base) var(--ease-out-soft),
              color var(--duration-base) var(--ease-out-soft),
              background var(--duration-base) var(--ease-out-soft);
}

.filter-btn:hover {
  color: var(--color-white);
  border-color: var(--color-gold-dim);
}

.filter-btn.is-active {
  background: var(--gradient-gold);
  color: var(--color-black-deep);
  border-color: transparent;
}

/* ==================== GRIDS GENÉRICOS ==================== */
/* minmax(0, 1fr) em vez de só 1fr: sem isso, o CSS Grid não deixa a
   coluna encolher abaixo do conteúdo interno (título longo, vídeo,
   etc.) — em telas estreitas isso "estoura" a grade pra fora da tela
   em vez de encolher, cortando os itens da direita. */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-5);
}

/* ==================== GALERIA / MOSAICO ==================== */
.gallery-item {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--glass-border);
  cursor: pointer;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-cinematic);
}

.gallery-item:hover img {
  transform: scale(1.08);
}

.gallery-item__scrim {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: var(--space-4);
  background: linear-gradient(180deg, rgba(11,11,11,0) 40%, rgba(11,11,11,0.85) 100%);
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-out-soft);
}

.gallery-item:hover .gallery-item__scrim {
  opacity: 1;
}

.gallery-item__tag {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-gold-light);
}

.gallery-item--video::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 52px;
  height: 52px;
  transform: translate(-50%, -50%);
  background: url("/assets/icons/2x/play.png") no-repeat center / contain;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.6));
  transition: transform var(--duration-base) var(--ease-cinematic);
}

.gallery-item--video:hover::after {
  transform: translate(-50%, -50%) scale(1.08);
}

/* ==================== LIGHTBOX ==================== */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  background: rgba(11, 11, 11, 0.94);
  backdrop-filter: var(--glass-blur);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-base) var(--ease-out-soft),
              visibility var(--duration-base) var(--ease-out-soft);
}

.lightbox.is-open {
  opacity: 1;
  visibility: visible;
}

.lightbox__figure {
  position: relative;
  max-width: min(1000px, 90vw);
  max-height: 85vh;
}

.lightbox__figure img {
  max-width: 100%;
  max-height: 85vh;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-stage);
}

.lightbox__caption {
  margin-top: var(--space-4);
  text-align: center;
  color: var(--color-white-muted);
  font-size: var(--fs-sm);
}

.lightbox__close,
.lightbox__nav {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  transition: transform var(--duration-fast) var(--ease-out-soft),
              filter var(--duration-base) var(--ease-out-soft);
}

.lightbox__close {
  top: var(--space-6);
  right: var(--space-6);
  border-radius: 50%;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  color: var(--color-white);
  transition: border-color var(--duration-fast) var(--ease-out-soft),
              color var(--duration-fast) var(--ease-out-soft);
}

.lightbox__close:hover {
  border-color: var(--color-gold);
  color: var(--color-gold-light);
}

.lightbox__share-wrap {
  position: absolute;
  top: var(--space-6);
  left: var(--space-6);
  z-index: 1;
}

.lightbox__share {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  color: var(--color-white);
  transition: border-color var(--duration-fast) var(--ease-out-soft),
              color var(--duration-fast) var(--ease-out-soft);
}

.lightbox__share:hover,
.lightbox__share[aria-expanded="true"] {
  border-color: var(--color-gold);
  color: var(--color-gold-light);
}

.lightbox__share-menu {
  position: absolute;
  top: calc(100% + var(--space-3));
  left: 0;
  display: flex;
  flex-direction: column;
  z-index: 2;
  gap: var(--space-1);
  min-width: 190px;
  padding: var(--space-2);
  border-radius: var(--radius-md);
  background: var(--color-black-raised);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-stage);
}

.lightbox__share-link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--color-white-soft);
  font-size: var(--fs-sm);
  text-align: left;
  transition: background var(--duration-fast) var(--ease-out-soft),
              color var(--duration-fast) var(--ease-out-soft);
}

.lightbox__share-link:hover {
  background: rgba(216, 166, 67, 0.12);
  color: var(--color-gold-light);
}

.lightbox__share-link img,
.lightbox__share-link svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.lightbox__share-menu[hidden] {
  display: none;
}

.lightbox__nav {
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.5));
}

.lightbox__nav:hover {
  transform: scale(1.08);
  filter: drop-shadow(0 0 14px rgba(244, 211, 122, 0.6));
}

.lightbox__nav--prev { left: var(--space-6); top: 50%; transform: translateY(-50%); }
.lightbox__nav--next { right: var(--space-6); top: 50%; transform: translateY(-50%); }
.lightbox__nav--prev:hover { transform: translateY(-50%) scale(1.08); }
.lightbox__nav--next:hover { transform: translateY(-50%) scale(1.08); }

/* -------- Variante de vídeo (video-lightbox.js) -------- */
.lightbox__figure--video {
  max-width: min(900px, 90vw);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.lightbox__video {
  display: block;
  width: 100%;
  max-height: 78vh;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-stage);
  background: #000;
}

.lightbox__download {
  margin-top: var(--space-4);
}

/* ==================== VÍDEOS — ÁREA DO CONTRATANTE (AO VIVO / VIDEOMAKER) ==================== */
/* Vídeos ficam visíveis (poster + título), mas embaçados/dessaturados e
   sem o ícone de play enquanto a senha não é confirmada — só o cadeado
   aparece. Clicar num item bloqueado não abre o vídeo, leva até o campo
   de senha (ver focarSenhaVideos() em page-contratantes.js). */
.video-thumb__lock {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  background: rgba(11, 11, 11, 0.45);
  color: var(--color-gold-light);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  text-align: center;
  padding: var(--space-3);
}

.video-thumb--locked img {
  filter: blur(7px) grayscale(0.55);
}

.video-thumb--locked:hover img {
  transform: none;
}

.video-thumb--locked .video-thumb__lock {
  display: flex;
}

.video-thumb--locked .video-thumb__play {
  display: none;
}

.area-protegida-gate {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-7);
  padding: var(--space-5);
  border-radius: var(--radius-md);
  background: rgba(216, 166, 67, 0.08);
  border: 1px dashed var(--color-gold-dim);
}

.area-protegida-gate__icon {
  flex-shrink: 0;
  color: var(--color-gold);
}

.area-protegida-gate__form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  flex: 1;
}

.area-protegida-gate__input {
  flex: 1;
  min-width: 180px;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  border: 1px solid var(--glass-border);
  background: var(--color-black-raised);
  color: var(--color-white);
  font-size: var(--fs-sm);
}

.area-protegida-gate__input:focus {
  outline: none;
  border-color: var(--color-gold);
}

.area-protegida-gate__erro {
  width: 100%;
  color: #E17878;
  font-size: var(--fs-xs);
}

.area-protegida-gate__unlocked-msg {
  display: none;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-gold-light);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
}

.area-protegida-gate.is-unlocked .area-protegida-gate__form {
  display: none;
}

.area-protegida-gate.is-unlocked .area-protegida-gate__unlocked-msg {
  display: flex;
}

.videos-vazio {
  color: var(--color-white-muted);
  font-size: var(--fs-sm);
}

/* Downloads (rider, press kit, logos, fotos oficiais) bloqueados pela
   mesma senha da área de vídeos acima. Diferente dos vídeos (que usam
   blur no poster), aqui é só esmaecido + dessaturado — não tem imagem
   grande pra borrar, só ícone+texto — e o ícone/rótulo da ação trocam de
   "Baixar" para um cadeado. Clique redireciona pro campo de senha em vez
   de baixar (ver focarSenhaArea() em page-contratantes.js). */
.download-item--locked {
  opacity: 0.55;
  filter: grayscale(0.7);
  cursor: pointer;
}

.download-item--locked:hover {
  border-color: var(--glass-border);
  transform: none;
}

.download-item--locked .download-item__action {
  color: var(--color-white-muted);
}

/* ==================== DOWNLOAD CARDS (PRESS KIT / CONTRATANTES) ==================== */
.download-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.download-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5);
  border-radius: var(--radius-md);
  background: var(--gradient-surface);
  border: 1px solid var(--glass-border);
  transition: border-color var(--duration-base) var(--ease-out-soft),
              transform var(--duration-fast) var(--ease-out-soft);
}

.download-item:hover {
  border-color: var(--color-gold-dim);
  transform: translateX(4px);
}

.download-item__info {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.download-item__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
}

.download-item__icon svg {
  width: 20px;
  height: 20px;
  color: var(--color-gold-light);
}

.download-item__icon .icon-badge {
  width: 44px;
  height: 44px;
}

.download-item__name {
  color: var(--color-white);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
}

.download-item__meta {
  color: var(--color-white-muted);
  font-size: var(--fs-xs);
}

.download-item__action {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-gold-light);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  white-space: nowrap;
}

/* ==================== TABELA TÉCNICA (RIDER) ==================== */
.tech-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}

.tech-table th,
.tech-table td {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--glass-border);
}

.tech-table th {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-gold-light);
}

.tech-table td {
  color: var(--color-white-soft);
}

.tech-table-wrap {
  overflow-x: auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--glass-border);
  background: var(--color-black-raised);
}

/* ==================== EQUIPAMENTOS (RESPONSABILIDADE) ==================== */
.equip-card h3 {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
  font-size: var(--fs-md);
}

.equip-card h3 .icon-badge,
.equip-card h3 svg {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}

.equip-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.equip-list li {
  position: relative;
  padding-left: var(--space-6);
  color: var(--color-white-soft);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
}

.equip-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gradient-gold);
  box-shadow: var(--glow-gold-soft);
}

.equip-note {
  margin-top: var(--space-6);
  font-size: var(--fs-xs);
  color: var(--color-white-muted);
}

/* ==================== TIMELINE (SOBRE) ==================== */
.timeline {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding-left: var(--space-6);
  border-left: 1.5px solid var(--glass-border);
}

.timeline-item {
  position: relative;
}

.timeline-item::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--space-6) - 5px);
  top: 4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--gradient-gold);
  box-shadow: var(--glow-gold-soft);
}

.timeline-item__year {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--color-gold-light);
  letter-spacing: var(--ls-wide);
}

.timeline-item__title {
  margin-block: var(--space-2);
}

/* ==================== VALORES (CARDS) ==================== */
.value-card {
  text-align: center;
  padding: var(--space-6) var(--space-5);
}

.value-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-inline: auto;
  margin-bottom: var(--space-4);
  border-radius: 50%;
  background: rgba(216, 166, 67, 0.12);
  color: var(--color-gold-light);
}

.value-card__icon svg {
  width: 24px;
  height: 24px;
}

.value-card__icon .icon-badge {
  width: 34px;
  height: 34px;
}

/* ==================== EMBEDS (MÚSICAS / VÍDEOS) ==================== */
.embed-frame {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-card);
}

.embed-frame iframe {
  display: block;
  width: 100%;
  border: 0;
}

/* ==================== FORMULÁRIO DE CONTATO ==================== */
.form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.form-field label {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-white-muted);
}

.form-field input,
.form-field select,
.form-field textarea {
  padding: var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--color-black-raised);
  border: 1px solid var(--glass-border);
  color: var(--color-white);
  font-size: var(--fs-base);
  transition: border-color var(--duration-fast) var(--ease-out-soft);
}

.form-field input::placeholder,
.form-field textarea::placeholder {
  color: var(--color-white-muted);
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--color-gold);
}

.form-field textarea {
  resize: vertical;
  min-height: 140px;
}

.form-note {
  font-size: var(--fs-xs);
  color: var(--color-white-muted);
}

.form-status {
  font-size: var(--fs-sm);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  display: none;
}

.form-status.is-visible {
  display: block;
}

.form-status--success {
  background: rgba(216, 166, 67, 0.12);
  border: 1px solid rgba(216, 166, 67, 0.35);
  color: var(--color-gold-light);
}

/* ==================== CONTATO — INFO CARDS ==================== */
.contact-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.contact-info__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
}

.contact-info__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(216, 166, 67, 0.12);
  color: var(--color-gold-light);
}

.contact-info__icon svg {
  width: 20px;
  height: 20px;
}

.contact-info__icon .icon-badge {
  width: 30px;
  height: 30px;
}

.contact-info__label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--color-white-muted);
  margin-bottom: var(--space-1);
}

.contact-info__value {
  color: var(--color-white);
  font-weight: var(--fw-medium);
}

.map-frame {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--glass-border);
  aspect-ratio: 16 / 9;
}

.map-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(0.4) invert(0.92) contrast(0.9);
}

/* ==================== PROMOÇÃO (ESTREIA PORTAL MODÃO) ==================== */
.promo-test-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  background: rgba(216, 166, 67, 0.12);
  border: 1px solid rgba(216, 166, 67, 0.35);
  color: var(--color-gold-light);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

.promo-prize-card {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  align-items: center;
  justify-content: space-between;
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--gradient-surface);
  border: 1px solid var(--glass-border);
}

.promo-prize-card__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.promo-prize-card__label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--color-white-muted);
}

.promo-prize-card__value {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--color-gold-light);
}

.promo-steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  counter-reset: promo-step;
}

.promo-steps li {
  position: relative;
  padding-left: var(--space-8);
  color: var(--color-white-soft);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
}

.promo-steps li::before {
  counter-increment: promo-step;
  content: counter(promo-step);
  position: absolute;
  left: 0;
  top: -0.1em;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--gradient-gold);
  color: var(--color-black-deep);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
}

/* -------- Passo 1: botões de rede social -------- */
.promo-social-btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5);
  border-radius: var(--radius-md);
  background: var(--gradient-surface);
  border: 1px solid var(--glass-border);
  text-align: left;
  transition: border-color var(--duration-base) var(--ease-out-soft),
              transform var(--duration-fast) var(--ease-out-soft);
}

.promo-social-btn:hover {
  border-color: var(--color-gold-dim);
  transform: translateY(-2px);
}

.promo-social-btn__label {
  color: var(--color-white);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
}

.promo-social-btn__check {
  margin-left: auto;
  display: none;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--gradient-gold);
  color: var(--color-black-deep);
}

.promo-social-btn.is-done {
  border-color: var(--color-gold);
}

.promo-social-btn.is-done .promo-social-btn__check {
  display: flex;
}

/* -------- Passo 2: gerador -------- */
.promo-gerador {
  position: relative;
}

.promo-gerador.is-locked .promo-gerador__conteudo {
  filter: blur(4px) grayscale(0.4);
  pointer-events: none;
  user-select: none;
}

.promo-gerador__lock-msg {
  display: none;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  background: rgba(216, 166, 67, 0.08);
  border: 1px dashed var(--color-gold-dim);
  color: var(--color-white-muted);
  font-size: var(--fs-sm);
}

.promo-gerador.is-locked .promo-gerador__lock-msg {
  display: flex;
}

.promo-upload {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-6);
  margin-bottom: var(--space-6);
}

.promo-upload__dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  width: 100%;
  max-width: 260px;
  aspect-ratio: 1;
  border-radius: var(--radius-md);
  border: 1.5px dashed var(--glass-border);
  background: var(--color-black-raised);
  color: var(--color-white-muted);
  font-size: var(--fs-xs);
  text-align: center;
  padding: var(--space-4);
  overflow: hidden;
  transition: border-color var(--duration-fast) var(--ease-out-soft);
}

.promo-upload__dropzone:hover {
  border-color: var(--color-gold-dim);
}

.promo-upload__dropzone img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

.promo-estilos-grid {
  margin-bottom: var(--space-6);
}

.promo-estilo-card {
  position: relative;
  display: block;
  padding: var(--space-5);
  border-radius: var(--radius-md);
  background: var(--gradient-surface);
  border: 1px solid var(--glass-border);
  cursor: pointer;
  transition: border-color var(--duration-base) var(--ease-out-soft);
}

.promo-estilo-card:hover {
  border-color: var(--color-gold-dim);
}

.promo-estilo-card.is-selected {
  border-color: var(--color-gold);
  box-shadow: var(--glow-gold-soft);
}

.promo-estilo-card input {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  width: 18px;
  height: 18px;
  accent-color: var(--color-gold);
}

.promo-estilo-card__nome {
  display: block;
  margin-bottom: var(--space-2);
  padding-right: var(--space-6);
  color: var(--color-white);
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
}

.promo-estilo-card__desc {
  display: block;
  color: var(--color-white-muted);
  font-size: var(--fs-xs);
  line-height: var(--lh-body);
}

.promo-gerador__status {
  display: none;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-5);
  color: var(--color-gold-light);
  font-size: var(--fs-sm);
}

.promo-gerador__status.is-visible {
  display: flex;
}

.promo-spinner {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 2px solid rgba(216, 166, 67, 0.25);
  border-top-color: var(--color-gold);
  animation: promoSpin 0.8s linear infinite;
}

@keyframes promoSpin {
  to { transform: rotate(360deg); }
}

/* -------- Resultado -------- */
.promo-resultado-card {
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--gradient-surface);
  border: 1px solid var(--glass-border);
  text-align: center;
}

.promo-resultado-card.is-chosen {
  border-color: var(--color-gold);
  box-shadow: var(--glow-gold-soft);
}

.promo-resultado-card img {
  width: 100%;
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-4);
}

.promo-resultado-card__nome {
  display: block;
  margin-bottom: var(--space-4);
  color: var(--color-white);
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
}

.promo-baixar-wrap {
  margin-top: var(--space-7);
  text-align: center;
}

/* -------- Concorrer / Regulamento -------- */
.promo-concorrer-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--gradient-surface);
  border: 1px solid var(--glass-border);
}

.promo-regulamento {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.promo-regulamento li {
  position: relative;
  padding-left: var(--space-6);
  color: var(--color-white-soft);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
}

.promo-regulamento li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gradient-gold);
  box-shadow: var(--glow-gold-soft);
}

.promo-already-card {
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--gradient-surface);
  border: 1px solid var(--glass-border);
  text-align: center;
}

@media (max-width: 599px) {
  .promo-prize-card,
  .promo-concorrer-card {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }
}

/* ==================== BALÃO FLUTUANTE "SOLICITAR ACESSO" ==================== */
/* Só existe em pages/contratantes.html (ver comentário no HTML) — CTA fixo
   que acompanha o scroll, leva pro WhatsApp com mensagem pré-pronta pedindo
   a senha da área protegida (ver "Área protegida por senha" no CLAUDE.md).
   z-index igual ao da navbar (--z-nav): abaixo do banner de cookies de
   propósito — quando o banner aparece (mesmo canto/rodapé), o balão sobe
   via :has() em vez de disputar z-index com ele. */
.balao-solicitar-acesso {
  position: fixed;
  right: var(--space-5);
  bottom: var(--space-5);
  z-index: var(--z-nav);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5) var(--space-3) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--gradient-gold);
  color: var(--color-black-deep);
  box-shadow: var(--glow-gold-strong);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  transition: transform var(--duration-fast) var(--ease-out-soft),
              bottom var(--duration-base) var(--ease-out-soft);
}

.balao-solicitar-acesso:hover {
  transform: translateY(-3px);
}

.balao-solicitar-acesso__icone {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.balao-solicitar-acesso__icone img {
  width: 28px;
  height: 28px;
}

/* Sobe o balão quando o banner de cookies estiver visível, pra não
   sobrepor os botões dele (os dois são fixed no rodapé). */
body:has(.cookie-banner.is-visible) .balao-solicitar-acesso {
  bottom: 130px;
}

/* ==================== RESPONSIVO ==================== */
@media (max-width: 1023px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-2 { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
}

@media (max-width: 599px) {
  /* Em telas de celular pequenas, tudo que era lado a lado empilha —
     2 colunas de vídeo/card nessa largura fica apertado demais. */
  .grid-4,
  .grid-3 { grid-template-columns: 1fr; }

  .download-item {
    flex-direction: column;
    align-items: flex-start;
  }

  .lightbox__nav { display: none; }

  /* Só o ícone em telas pequenas — o texto ao lado competiria por espaço
     horizontal com pouca sobra na tela. */
  .balao-solicitar-acesso {
    padding: var(--space-4);
    right: var(--space-4);
    bottom: var(--space-4);
  }

  .balao-solicitar-acesso__texto {
    display: none;
  }

  body:has(.cookie-banner.is-visible) .balao-solicitar-acesso {
    bottom: 160px; /* banner de cookies costuma ficar mais alto aqui (botões empilhados) */
  }
}