/* Reset básico e cores */
body{margin:0;background:#000;color:#fff;font-family:Arial,Helvetica,sans-serif;min-height:100vh}
.header{position:fixed;top:0;width:100%;display:flex;justify-content:space-between;align-items:center;padding:15px 25px;background:rgba(0,0,0,.6);backdrop-filter:blur(6px);z-index:100}
.header .logo{font-weight:700}
.header .nav a{color:#fff;margin:0 10px;text-decoration:none}
.hero{text-align:center;padding:140px 20px 80px;background:linear-gradient(rgba(0,0,0,0.45),rgba(0,0,0,0.45)), url('assets/family.jpg') center/cover no-repeat fixed}
.btn{background:#ff4f00;padding:12px 25px;border-radius:6px;color:#fff;text-decoration:none;display:inline-block;margin-top:12px}
.section{text-align:center;padding:60px 20px}
.beneficios li{list-style:none;margin:10px;font-size:18px}
.carrossel{padding:40px 0;overflow:hidden}
.slide-track{display:flex;gap:20px;align-items:center;justify-content:flex-start;animation:scroll 20s linear infinite}
.slide-track img { background:#000; padding:10px; border-radius:6px; max-height:90px; }
@keyframes scroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* Plans */
.plans{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;}{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.plan{background:rgba(255,255,255,0.03);padding:16px;border-radius:8px;min-width:120px}

/* FAQ */
.faq .accordion .item{border:1px solid #333;padding:12px;margin:10px 0;border-radius:6px;text-align:left;max-width:900px;margin-left:auto;margin-right:auto}
.faq .accordion .item h3{margin:0;cursor:pointer}
.faq .accordion .item p{margin:8px 0 0;display:block}

/* Reviews */
.reviews .cards{display:flex;gap:20px;justify-content:center;flex-wrap:wrap}
.reviews .card{border:1px solid rgba(255,255,255,0.06);padding:12px;border-radius:8px;width:220px border:2px solid #ff7a00; box-shadow:0 0 12px #ff7a00}
.reviews .card img{width:100%;height:120px;object-fit:cover;border-radius:6px}

/* Footer */
.footer a{color:#ffcc66;text-decoration:none}
@media(max-width:800px){
  .header{padding:10px}
  .hero{padding:120px 12px}
  .slide-track{animation-duration:30s}
}

.plan-card{
    border:2px solid #ff7a00!important;
    box-shadow:0 0 10px #ff7a00!important;
    background:#1a1a1a!important;
}
.plan-card:hover{
    transform:scale(1.05);
    transition:0.2s;
}

/* RESPONSIVE FIXES */
@media(max-width:768px){
    .plan-box{display:flex;flex-direction:column;gap:20px;}
    .plan-card{font-size:1.2rem;padding:18px;}
    .slide-track img{max-height:70px;}
}
@media(max-width:480px){
    .hero h1{font-size:1.8rem;}
    .hero p{font-size:1rem;}
    .btn{font-size:1rem;padding:12px 18px;}
}

.slide-track img{
    background:#000!important;
    padding:12px!important;
    border-radius:8px!important;
    max-height:90px!important;
}

.plan-card{
    border:2px solid #ff7a00!important;
    box-shadow:0 0 12px #ff7a00!important;
    background:#1a1a1a!important;
}
.plan-btn{
    margin-top:12px;
    display:block;
    background:#ff7a00!important;
    color:#000!important;
    padding:10px;
    border-radius:6px;
    text-align:center;
    font-weight:bold;
}

@media(max-width:768px){
    .plan-card{padding:20px!important;}
    .review-card{flex-direction:column;text-align:center;}
}

.plan-card{
    border:3px solid #ff7a00 !important;
    transition:transform .25s, box-shadow .25s;
}
.plan-card:hover{
    transform:translateY(-6px);
    box-shadow:0 0 20px rgba(255,122,0,.6);
}
.btn:hover{
    opacity:.85;
    transform:scale(1.05);
}

/* RESPONSIVE FIXES */
@media(max-width:900px){
  .plans{flex-direction:column;align-items:center;}
  .plan-card{width:90%;}
}
@media(max-width:600px){
  header nav{flex-direction:column;gap:10px;}
  .carousel img{width:120px;}
}



/* ----- PLANOS EM CARDS PROFISSIONAIS ----- */
.planos {
  text-align: center;
  padding: 60px 20px;
}
.planos h2 {
  margin-bottom: 8px;
}
.planos-subtitle {
  text-align: center;
  max-width: 620px;
  margin: 0 auto 24px;
  font-size: 0.95rem;
  color: #ddd;
}
.planos-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 24px;
  max-width: 1100px;
  margin: 0 auto;
}
.plano-card {
  position: relative;
  background: radial-gradient(circle at top, rgba(255,122,0,0.12), rgba(0,0,0,0.95));
  border-radius: 18px;
  padding: 24px 20px 22px;
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 16px 40px rgba(0,0,0,0.7);
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border .25s ease;
}
.plano-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,122,0,0.30), transparent 55%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
.plano-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 55px rgba(0,0,0,0.85);
  border-color: rgba(255,122,0,0.85);
}
.plano-card:hover::before {
  opacity: 1;
}
.plano-card h3 {
  margin: 0 0 4px;
  font-size: 1.2rem;
}
.plan-tag {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #ffb36a;
  margin-bottom: 8px;
}
.plano-card strong {
  display: block;
  font-size: 1.35rem;
  margin-bottom: 10px;
  color: #ffdb9b;
}
.plan-benefits {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
  font-size: 0.9rem;
}
.plan-benefits li {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}
.plan-benefits li::before {
  content: "✔";
  font-size: 0.8rem;
  opacity: 0.9;
}
.plano-card.destaque {
  border: 1px solid rgba(255,179,106,0.9);
  box-shadow: 0 24px 60px rgba(255,122,0,0.55);
}
.plano-card button,
.plano-card .wa-btn {
  display: block;
  width: 100%;
  text-align: center;
  margin-top: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
}
.plano-card button {
  background: linear-gradient(135deg, #ff7a00, #ffb800);
  color: #fff;
  box-shadow: 0 10px 26px rgba(255,122,0,0.55);
}
.plano-card button:hover {
  filter: brightness(1.07);
}
.plano-card .wa-btn {
  background: #25D366;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 10px 26px rgba(37,211,102,0.45);
}
.plano-card .wa-btn:hover {
  filter: brightness(1.05);
}

/* ----- COMENTÁRIOS COM FOTOS ----- */
.comentarios-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 22px;
  max-width: 900px;
  margin: 20px auto 0;
}
.comentario-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 22px 18px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.35);
  text-align: center;
}
.comentario-card img {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 10px;
}
.comentario-card h4,
.comentario-card p {
  color: #111;
}
.comentario-card p {
  font-size: 0.9rem;
  margin-top: 6px;
}

/* ----- FAQ COM IMAGEM DE FUNDO DA FAMÍLIA E DEGRADÊ ESCURO ----- */
.faq {
  position: relative;
  padding: 60px 20px;
  background: url('assets/family.jpg') center/cover no-repeat fixed;
}
.faq::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(0,0,0,0.92) 0%,
    rgba(0,0,0,0.8) 45%,
    rgba(0,0,0,0.5) 100%);
}
.faq h2,
.faq .accordion {
  position: relative;
  z-index: 1;
}
.faq .accordion {
  max-width: 900px;
  margin: 20px auto 0;
  text-align: left;
}
.faq .accordion .item {
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(0,0,0,0.6);
}

/* ----- CARROSSEL DE LOGOS AJUSTADO ----- */
.slide-track img {
  max-height: 60px;
  width: auto;
  background: #ffffffcc;
  padding: 10px 18px;
  border-radius: 14px;
  box-shadow: 0 0 14px rgba(255,120,0,0.45);
}
@media (max-width: 768px) {
  .slide-track img {
    max-height: 40px;
    padding: 8px 14px;
  }
}