/* ====== Correção de cores que o Tailwind purgou ====== */

/* Botão azul */
.bg-blue-600 { background-color:#2563eb !important; color:#fff !important; }
.hover\:bg-blue-700:hover { background-color:#1d4ed8 !important; }

/* Botão verde */
.bg-green-600 { background-color:#16a34a !important; color:#fff !important; }
.hover\:bg-green-700:hover { background-color:#15803d !important; }

/* (Se ícones/títulos usam essas cores) */
.text-blue-600 { color:#2563eb !important; }
.text-green-600 { color:#16a34a !important; }

/* (Opcional) anel “ring-4 ring-*-100” aproximado */
.ring-4 { box-shadow:0 0 0 4px rgba(0,0,0,0.0) !important; }
.ring-blue-100 { box-shadow:0 0 0 4px #dbeafe !important; }   /* blue-100 */
.ring-green-100 { box-shadow:0 0 0 4px #dcfce7 !important; }  /* green-100 */
.ring-amber-100 { box-shadow:0 0 0 4px #fef3c7 !important; }  /* amber-100 */

/* Aparência de botão para <a> */
a.bg-blue-600, a.bg-green-600, a.bg-amber-600 {
  display:inline-flex; align-items:center; gap:.5rem;
  border-radius:.75rem; padding:.75rem 1.25rem; text-decoration:none;
  font-weight:600;
}

/* Você já tem o laranja funcionando, mas deixo a base aqui */
.bg-amber-600 { background-color:#d97706 !important; color:#fff !important; }
.hover\:bg-amber-700:hover { background-color:#b45309 !important; }
.text-amber-600 { color:#d97706 !important; }

/* Centralizar SEMPRE o popup no meio da tela */
dialog.video-modal{
  position: fixed;          /* garante centralização em todos os browsers */
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(92vw, 520px);
  border: none; padding: 0; margin: 0;
  border-radius: 16px; overflow: hidden; background:#000;
  box-shadow: 0 20px 60px rgba(0,0,0,.55);
  z-index: 99999;
}

/* Escurecer o restante da tela */
dialog.video-modal::backdrop{
  background: rgba(0,0,0,.75);      /* ajuste a opacidade aqui (.6 ~ .85) */
  backdrop-filter: blur(1.5px);     /* opcional: leve blur no fundo */
}

/* Vídeo responsivo (9:16 em mobile, 16:9 em telas maiores) */
.vm-body{ width:100%; aspect-ratio:9/16; background:#000; position:relative;
  max-height: calc(100vh - 64px);   /* evita estourar a altura da viewport */
}
.vm-frame{ width:100%; height:100%; border:0; display:block }

/* Botão X no canto superior direito */
.vm-x{
  position:absolute; top:8px; right:8px;
  width:40px; height:40px; min-width:40px; min-height:40px;
  border-radius:999px; border:2px solid rgba(255,255,255,.85);
  background: rgba(0,0,0,.35); color:#fff; font-size:20px; line-height:1;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.vm-x:focus-visible{ outline:3px solid #fff; outline-offset:2px }

@media (min-width:480px){
  .vm-body{ aspect-ratio:16/9 }
}

.vm-body{
  width:100%;
  aspect-ratio:9/16;
  background:#000;
  position:relative;
  max-height: calc(var(--vh, 1vh) * 100 - 64px);
}
/* ====== FIX BANNER (#inicio) NO MOBILE (parar de cortar) ====== */
@media (max-width: 768px){

  /* não deixa o container cortar conteúdo */
  #inicio{
    overflow: visible !important;
  }

  /* a “caixa” do banner: reduz altura no mobile (menos corte) */
  #inicio .relative.h-\[60vh\]{
    height: auto !important;
    min-height: 220px !important;
  }

  /* se existir imagem dentro do banner, evita cortar */
  #inicio img{
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }
}