/* ===========================
   Sistema de Agendamento Simples
   CSS robusto contra overrides do style.css
   =========================== */

/* Base */
.ag-hero .hero-content p strong,
.ag-note strong { font-weight: 700; }

/* HERO bullets */
.ag-hero .ag-bullets{
  list-style: none !important;
  padding: 0 !important;
  margin: 18px 0 0 !important;
  display: grid !important;
  gap: 10px !important;
}
.ag-hero .ag-bullets li{
  display: flex !important;
  gap: 10px !important;
  align-items: center !important;
}

/* Seções */
.features-section.ag-section{
  padding-top: 56px;
  padding-bottom: 56px;
}
.features-section.ag-muted{
  background: rgba(255,255,255,0.02);
}

/* Grid */
.features-section.ag-section .features-grid.ag-grid{
  display: grid !important;
  gap: 18px !important;
  grid-template-columns: 1fr;
}
@media (min-width: 980px){
  .features-section.ag-section .features-grid.ag-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.features-section.ag-muted .features-grid.ag-grid{
  grid-template-columns: 1fr !important;
}
@media (min-width: 900px){
  .features-section.ag-muted .features-grid.ag-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Cards */
.features-section.ag-section .feature-item.ag-card{
  border-radius: 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.10);
}

/* Steps */
#como-funciona .ag-steps{
  display: grid !important;
  gap: 14px !important;
  margin-top: 18px !important;
}
#como-funciona .ag-step{
  display: grid !important;
  grid-template-columns: 44px 1fr !important;
  gap: 12px !important;
  align-items: start !important;
  padding: 16px !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
}
#como-funciona .ag-step-num{
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-weight: 700;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
}
#como-funciona .ag-note{
  margin-top: 18px;
  padding: 16px;
  border-radius: 14px;
  background: rgba(91,95,255,0.08);
  border: 1px solid rgba(91,95,255,0.22);
}

/* ===========================
   FAQ (funciona mesmo se virar UL)
   =========================== */

#faq .ag-faq{
  max-width: 820px;
  margin: 18px auto 0;
  display: grid !important;
  gap: 10px !important;

  /* Se por algum motivo estiver como UL */
  list-style: none !important;
  padding: 0 !important;
}

/* Card base do FAQ */
#faq .ag-faq-item{
  border-radius: 14px !important;
  overflow: hidden !important;
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
}

/* Força details virar bloco (caso style.css altere) */
#faq details.ag-faq-item{
  display: block !important;
}

/* Summary “bonito” */
#faq .ag-faq-item summary{
  cursor: pointer !important;
  padding: 16px !important;
  font-weight: 700 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;

  list-style: none !important;
}
#faq .ag-faq-item summary::-webkit-details-marker{ display:none !important; }

#faq .ag-faq-item summary::after{
  content: "▾";
  opacity: .85;
  transform: translateY(-1px);
}
#faq .ag-faq-item[open] summary{
  border-bottom: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.02);
}
#faq .ag-faq-item[open] summary::after{
  content: "▴";
}
#faq .ag-faq-body{
  padding: 0 16px 16px !important;
}

/* ===========================
   CTA Form (blindado contra style.css)
   =========================== */

.cta-section.ag-cta .ag-form{
  width: 100% !important;
  max-width: 720px !important;
  margin: 18px auto 0 !important;

  display: grid !important;
  gap: 14px !important;

  padding: 18px !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;

  /* evita colapsos */
  box-sizing: border-box !important;
}

.cta-section.ag-cta .ag-field{
  display: grid !important;
  gap: 8px !important;
}

.cta-section.ag-cta .ag-field label{
  font-weight: 600 !important;
  opacity: .9;
}

/* força inputs/textarea a respeitar largura */
.cta-section.ag-cta .ag-field input,
.cta-section.ag-cta .ag-field textarea{
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
  box-sizing: border-box !important;

  padding: 12px 12px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  background: rgba(0,0,0,0.15) !important;
  color: inherit !important;
  outline: none !important;

  min-height: 44px !important;
  line-height: 1.2 !important;
}

.cta-section.ag-cta .ag-field textarea{
  min-height: 110px !important;
  resize: vertical;
}

.cta-section.ag-cta .ag-field input:focus,
.cta-section.ag-cta .ag-field textarea:focus{
  border-color: rgba(91,95,255,0.55) !important;
  box-shadow: 0 0 0 3px rgba(91,95,255,0.18) !important;
}

.cta-section.ag-cta .ag-hint{
  font-size: 0.9rem !important;
  opacity: 0.85 !important;
  margin: 0 !important;
}

.cta-section.ag-cta .ag-form .btn-primary{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
}