/* Estilos adicionais para o MVP */
dialog::backdrop { background: rgba(0,0,0,.3); }
.shadow { box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -2px rgba(0,0,0,.05); }
.rounded-xl { border-radius: 0.75rem; }

/* Tipografia gentil para páginas de texto longo */
.content-styled { color: #18181b; }
.content-styled h1 { margin-top: 0.5rem; margin-bottom: 1rem; }
.content-styled h2 { margin-top: 1.75rem; margin-bottom: 0.5rem; font-weight: 600; font-size: 1.125rem; }
.content-styled p { margin-top: .5rem; line-height: 1.75; }
.content-styled ul { margin-top: .5rem; padding-left: 1.25rem; list-style: disc; }
.content-styled li { margin-top: .25rem; }
.content-styled hr { margin: 1.5rem 0; border-color: #e4e4e7; }

/* Landing: cartões de features com ícones SVG via CSS */
#features .grid > div { border: 1px solid #e4e4e7; border-radius: 1rem; padding: 1.5rem; background: #fff; transition: box-shadow .2s, border-color .2s, transform .2s; }
#features .grid > div:hover {
  border-color: #fdba74;
  box-shadow: 0 10px 15px -3px rgba(2,8,23,.10), 0 4px 6px -2px rgba(2,8,23,.06);
  transform: translateY(-1px);
}
/* Ícones antigos removidos - agora usando Lucide Icons diretamente no HTML */

/* Depoimentos: estrelas fixas usando entidades para evitar problemas de encoding */
/* Depoimentos: força estrelas visuais e esconde texto corrompido */
.text-yellow-500.text-xl { color: transparent; position: relative; display: inline-block; }
.text-yellow-500.text-xl::before { content: "\2605\2605\2605\2605\2605"; color: #eab308; font-size: 1.125rem; line-height: 1; }

/* Landing: desativar ícone automático para grids/cartões marcados */
#features .no-feature-icons > div::before,
#features .no-feature-icon::before {
  content: none !important;
  display: none !important;
}

/* Dashboard: esconde o card antigo de Sair dentro do grid */
.dashboard-grid a[href="/sair"] { display: none !important; }

/* Band (faixa suave) para sessões em fundo claro */

/* Scroll offset para âncoras não ficarem escondidas atrás do header */
html { scroll-behavior: smooth; }
section[id], div[id] { scroll-margin-top: 80px; }

@media (min-width: 1024px) {
  /* ajuda a "destacar" a faixa dentro do container */
  #testimonials.cf-band { padding-inline: 32px; }
}

/* Modal Administrativo - Animações e Estilos */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes scaleIn {
  from { 
    opacity: 0; 
    transform: scale(0.9) translateY(-10px); 
  }
  to { 
    opacity: 1; 
    transform: scale(1) translateY(0); 
  }
}

.animate-fade-in {
  animation: fadeIn 0.3s ease-out forwards;
}

.animate-fade-out {
  animation: fadeOut 0.2s ease-in forwards;
}

.animate-scale-in {
  animation: scaleIn 0.3s ease-out forwards;
}

/* Modal responsivo */
#admin-modal .bg-white {
  max-width: 90vw;
  max-height: 90vh;
}

@media (min-width: 640px) {
  #admin-modal .bg-white {
    max-width: 28rem; /* max-w-md */
  }
}

/* Melhorias visuais do modal */
#admin-modal .bg-white {
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

#admin-modal button:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

/* Estilo para conteúdo do modal */
#admin-modal .p-4:last-child {
  line-height: 1.6;
}

#admin-modal .p-4:last-child h1,
#admin-modal .p-4:last-child h2,
#admin-modal .p-4:last-child h3 {
  margin-top: 0;
  margin-bottom: 0.75rem;
  font-weight: 600;
}

#admin-modal .p-4:last-child p {
  margin-bottom: 0.75rem;
}

#admin-modal .p-4:last-child ul,
#admin-modal .p-4:last-child ol {
  margin-bottom: 0.75rem;
  padding-left: 1.25rem;
}

#admin-modal .p-4:last-child li {
  margin-bottom: 0.25rem;
}

#admin-modal .p-4:last-child a {
  color: #2563eb;
  text-decoration: underline;
}

#admin-modal .p-4:last-child a:hover {
  color: #1d4ed8;
}