/* =========================================================
   KM LIVRE — Visual Moderno Mobile-First (verde)
   Mantém as MESMAS classes do seu HTML
   ========================================================= */

/* ---------- Variáveis de cor ---------- */
:root{
  --bg: #0b0f14;
  --card: rgba(255,255,255,0.03);
  --text: #e6f1ee;
  --text-sub: #b9c6d2;
  --primary: #00e676;
  --primary-dark: #00c86a;
  --border: rgba(255,255,255,0.08);
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}

/* ---------- Reset ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  background: var(--bg);
  color: var(--text);
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

/* ---------- Layout geral ---------- */
main{
  display:flex;flex-direction:column;align-items:center;
  margin:auto;gap:20px;padding:clamp(16px,4vw,40px);
}

/* ---------- Menu ---------- */
.menu-button{
  position:fixed;top:16px;left:16px;height:42px;cursor:pointer;
  filter:drop-shadow(0 4px 12px rgba(0,0,0,.4));
  transition:transform .2s ease;
}
.menu-button:hover{transform:scale(1.05)}

.menu-options{
  display:none;position:fixed;top:68px;left:16px;
  width:min(86vw,360px);max-height:70vh;overflow-y:auto;
  background:rgba(10,15,20,0.95);backdrop-filter:blur(6px);
  border:1px solid var(--border);border-radius:12px;padding:10px;
  box-shadow:var(--shadow);z-index:1000;color:#cfe6d8;
}
.menu-options.visible{display:block}
.menu-options a{
  display:block;padding:12px 10px;font-size:clamp(14px,3.6vw,16px);
  text-decoration:none;color:#cfe6d8;border-radius:8px;
  transition:background .15s ease;
}
.menu-options a:hover{background:rgba(255,255,255,0.07)}

/* ---------- Logo ---------- */
#logo{display:block;margin:24px auto 8px auto;max-width:140px;
  cursor:pointer;filter:drop-shadow(0 6px 24px rgba(0,0,0,.35));}

/* ---------- Ícones sociais ---------- */
#whatsapp,#instagram,#youtube{
  position:fixed;width:56px;cursor:pointer;z-index:1000;
  filter:drop-shadow(0 8px 20px rgba(0,0,0,.4));
  transition:transform .15s ease,opacity .2s ease;
}
#whatsapp{bottom:18px;right:16px}
#instagram{bottom:86px;right:16px}
#youtube{bottom:52px;left:16px}
#whatsapp:hover,#instagram:hover,#youtube:hover{transform:translateY(-3px)}
@media(max-width:420px){#instagram{display:none}}

/* ---------- Rodapé ---------- */
footer{
  width:100%;background:linear-gradient(0deg,#024d28,#013818);
  color:#fff;text-align:center;padding:14px;margin-top:40px;
}
#foostertext{font-size:12px}

/* ---------- Cards/Seções ---------- */
.content{display:flex;flex-direction:column;gap:18px;align-items:center;
  margin:auto;text-align:center;width:min(100%,1100px);}
.item{
  background:linear-gradient(180deg,var(--card),transparent);
  border-radius:16px;padding:clamp(14px,4.5vw,24px);
  border:1px solid var(--border);width:100%;
  transition:transform .2s,box-shadow .2s;
}
.item:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.container-item{
  display:flex;flex-direction:column;width:100%;
  border-radius:14px;border:1px solid var(--border);
  padding:clamp(10px,3vw,16px);background:rgba(255,255,255,0.02);
  text-align:center;
}

/* ---------- Conteúdo em linha ---------- */
.content-row{
  display:flex;gap:12px;align-items:center;justify-content:center;
  border-radius:12px;border:1px solid var(--border);
  background:#0f1722;color:var(--text);font-weight:700;
  padding:clamp(10px,3.4vw,16px);margin:8px 0;
  transition:background .15s ease,transform .15s ease;
}
.content-row:hover{background:#132030;transform:translateY(-1px)}
.content-row span{margin:0}

/* ---------- Descrições e títulos ---------- */
#titulo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  margin: 20px auto;
  padding: 14px;
  max-width: 95%;
  border-radius: 16px;

  background: #0a1118;
  color: var(--primary);
  border: 1px solid var(--border);

  text-align: center;
  font-size: clamp(28px, 6vw, 56px);
  font-weight: 700;
}

#titulo .destaque1 {
  display: block;
  text-align: center;
  color: var(--primary);
  font-size: clamp(18px, 4.5vw, 28px);
  margin-top: 8px;
}

.destaque11 {
  color: var(--primary);
  font-size: clamp(18px, 4.5vw, 28px);
}

.destaque3,
.destaque4,
.destaque5,
.destaque6 {
  font-size: clamp(18px, 4.2vw, 24px);
}

.destaque4 {
  color: #f2f5f9;
}

.destaque5 {
  color: #00e676;
  text-shadow: 0 2px 10px rgba(0, 230, 118, 0.3);
}

.description {
  font-size: clamp(16px, 3.8vw, 20px);
  text-align: justify;
  margin: 3% auto;
  font-weight: 700;
  max-width: 90%;
}

/* ---------- Botões e CTAs ---------- */
.action-button{
  display:block;width:100%;
  background:linear-gradient(90deg,var(--primary),var(--primary-dark));
  color:#fff;font-weight:900;
  border:0;border-radius:14px;padding:14px 18px;
  font-size:clamp(16px,4.4vw,20px);
  cursor:pointer;text-align:center;
  box-shadow:0 10px 30px rgba(0,230,118,.25);
  transition:transform .15s ease,filter .15s ease;
}
.action-button:hover{filter:brightness(.95);transform:translateY(-2px)}
.action-button:active{transform:translateY(0)}
.action-button:focus{outline:2px solid #fff;outline-offset:2px}

.cta-flutuante{
  position:fixed;bottom:18px;left:5%;width:90%;
  background:linear-gradient(90deg,var(--primary),var(--primary-dark));
  color:#0b0f14;font-weight:900;font-size:clamp(16px,4.6vw,20px);
  text-align:center;padding:14px 16px;border-radius:16px;
  z-index:9999;text-decoration:none;
  box-shadow:0 12px 30px rgba(0,230,118,.35);
  transition:transform .15s ease;
}
.cta-flutuante:hover{transform:translateY(-2px)}

/* ---------- Planos ---------- */
.info-block{
  display:block;width:100%;margin:10px auto;padding:14px;
  background:#0f1420;border:1px solid var(--border);
  border-radius:12px;font-size:clamp(14px,3.6vw,16px);
  color:var(--text);text-align:left;line-height:1.6;font-weight:600;
}
.plano-box{
  width:100%;margin:8px auto;padding:clamp(12px,3.6vw,16px);
  background:rgba(255,255,255,0.02);border:1px solid var(--border);
  border-radius:14px;box-shadow:0 12px 28px rgba(0,0,0,.24);
}

/* ---------- Mídias ---------- */
.foto-circular{
  display:block;width:300px;max-width:86%;height:200px;
  margin:8px auto;border-radius:16px;overflow:hidden;
  border:2px solid var(--primary);
  box-shadow:0 12px 24px rgba(0,0,0,.35);object-fit:cover;
}
.foto-circular2{
  display:block;width:min(460px,90%);margin:8px auto;
  border-radius:18px;border:2px solid var(--primary);
  box-shadow:0 12px 24px rgba(0,0,0,.35);object-fit:cover;
}
.video{
  display:block;width:100%;height:clamp(220px,52vw,420px);
  margin:16px auto;border-radius:14px;border:0;
  box-shadow:0 14px 32px rgba(0,0,0,.35);object-fit:cover;
}

/* ---------- FAQ ---------- */
.faq-item{margin-bottom:12px;border-bottom:1px solid var(--border);padding-bottom:12px}
.faq-question{display:flex;justify-content:space-between;cursor:pointer}
.faq-answer{display:none;text-align:left;color:var(--text-sub);padding:8px 0}
.faq-item.active .faq-answer{display:block}

/* ---------- Outras ---------- */
.dedo{font-size:clamp(18px,4vw,24px);text-align:center;animation:move-down 2s infinite}
@keyframes move-down{0%{transform:translateY(0)}15%{transform:translateY(18%)}100%{transform:translateY(0)}}

.interessados{
  display:inline-block;font-size:clamp(16px,4.2vw,24px);font-weight:700;
  background:rgba(231,243,237,0.12);border-radius:16px;
  width:94%;margin:16px auto;padding:10px;border:1px solid var(--border);
}

/* ---------- Responsividade ---------- */
@media(max-width:768px){
  #logo{max-width:22%}
  #titulo{font-size:30px;padding:10px}
  .item{width:95%;padding:10px}
  .description{text-align:center}
  .content-row{flex-direction:column;font-size:16px;padding:5%;margin:10px auto}
  .foto-circular{width:120px;height:auto}
  .foto-circular2{width:90%;margin-left:5%;height:auto}
  .action-button{font-size:14px;padding:10px}
  footer{font-size:10px;padding:10px}
}

/* ---------- Reduz movimento ---------- */
@media(prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}