/* =========================================================
   IMPACTACAMP 2026 - CSS NOVO E LIMPO
   Edite cores, tamanhos e transparências nos blocos abaixo.
   O fundo, logo e vídeo podem ser alterados pelo painel admin.
========================================================= */

/* ===== 1) CORES PRINCIPAIS ===== */
:root{
  --color-white:#ffffff;
  --color-black:#15100e;
  --color-brown:#5a3424;
  --color-brown-dark:#2b1710;
  --color-brown-soft:#f7f1ed;
  --color-line:#e4d5ca;
  --color-muted:#6b5a51;
  --color-danger:#8f1f16;
  --shadow-soft:0 18px 45px rgba(43,23,16,.12);
  --radius:20px;

  /* Variáveis preenchidas pelo PHP a partir do painel admin */
  --site-background-image:none;
  --site-background-opacity:.80;  /* força da imagem do fundo */
  --site-white-overlay:.10;       /* branco por cima do fundo */
  --site-card-opacity:.94;        /* transparência dos cards */
  --site-logo-size:64px;          /* tamanho da logo */
  --site-video-height:320px;      /* altura do vídeo desktop */
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  color:var(--color-black);
  background:var(--color-white);
  min-height:100vh;
}
a{text-decoration:none;color:inherit}
button,input,select,textarea{font:inherit}

/* ===== 2) FUNDO DO SITE - NÃO DEPENDE DE BODY =====
   Essa camada fixa recebe a imagem salva no painel admin.
   Se a imagem não aparecer, o problema estará no upload/caminho salvo.
*/
.site-bg{
  position:fixed;
  inset:0;
  z-index:-2;
  background-image:var(--site-background-image);
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  opacity:var(--site-background-opacity);
  pointer-events:none;
}
.site-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(255,255,255,var(--site-white-overlay));
}

/* ===== 3) BASE ===== */
.wrap{width:min(1080px,92%);margin:auto}
.page{min-height:100vh;padding-bottom:36px}

.hero{padding:20px 0 18px;background:transparent;border-bottom:1px solid rgba(228,213,202,.55)}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}
.brand{display:flex;align-items:center;gap:12px}
.brand-logo{
  width:var(--site-logo-size);
  height:var(--site-logo-size);
  border-radius:16px;
  object-fit:contain;
  background:#fff;
  border:1px solid var(--color-line);
  padding:5px;
  box-shadow:0 12px 25px rgba(43,23,16,.12);
  cursor:pointer;
  user-select:none;
}
.brand strong{display:block;font-size:18px;color:var(--color-brown-dark);font-weight:950}
.brand small{display:block;font-size:12px;color:var(--color-muted);font-weight:700;margin-top:2px}
.badge{display:inline-flex;align-items:center;gap:8px;padding:9px 13px;border-radius:999px;background:var(--color-brown-soft);color:var(--color-brown-dark);font-size:12px;font-weight:950;text-transform:uppercase;letter-spacing:.05em;border:1px solid var(--color-line)}

/* ===== 4) VÍDEO INTRODUTÓRIO ===== */
.video-card{
  width:100%;
  max-width:820px;
  height:var(--site-video-height);
  margin:0 auto;
  border-radius:22px;
  overflow:hidden;
  background:#000;
  border:1px solid rgba(228,213,202,.9);
  box-shadow:var(--shadow-soft);
}
.video-card video{width:100%;height:100%;display:block;object-fit:contain;background:#000}
.video-empty{height:100%;display:grid;place-items:center;text-align:center;color:#fff;padding:24px;background:linear-gradient(135deg,var(--color-brown-dark),var(--color-brown))}

/* ===== 5) CARDS E FORMULÁRIO ===== */
.section{padding:30px 0 46px;background:transparent}
.card,.form-card,.done-card,.admin-card,.metric,.person-card,.question-admin-card{
  background:rgba(255,255,255,var(--site-card-opacity));
  border:1px solid rgba(228,213,202,.9);
  border-radius:var(--radius);
  box-shadow:var(--shadow-soft);
  backdrop-filter:blur(2px);
}
.form-card{padding:28px}
.section-title{display:flex;align-items:center;gap:13px;margin:24px 0 15px}
.section-title .num{
  width:40px;height:40px;border-radius:14px;
  background:linear-gradient(135deg,var(--color-brown-dark),var(--color-brown));
  color:#fff;display:grid;place-items:center;font-weight:950;
  box-shadow:0 0 0 4px rgba(90,52,36,.10),0 0 28px rgba(90,52,36,.45);
  animation:brownGlow 2.2s ease-in-out infinite;
}
@keyframes brownGlow{0%,100%{box-shadow:0 0 0 4px rgba(90,52,36,.10),0 0 20px rgba(90,52,36,.30)}50%{box-shadow:0 0 0 7px rgba(90,52,36,.14),0 0 36px rgba(90,52,36,.58)}}
.section-title h2{font-size:22px;margin:0;color:var(--color-brown-dark)}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.field{display:flex;flex-direction:column;gap:7px}
.field.full{grid-column:1/-1}
label{font-size:13px;font-weight:900;color:#2b211d}
.hint{font-size:12px;color:var(--color-muted);line-height:1.45}
input,select,textarea{
  width:100%;border:1px solid var(--color-line);border-radius:15px;padding:13px 14px;
  background:#fff;color:var(--color-black);outline:none;transition:.18s
}
textarea{min-height:96px;resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--color-brown);box-shadow:0 0 0 4px rgba(90,52,36,.13)}
.check-row{display:flex;gap:10px;align-items:flex-start;padding:13px;border:1px solid var(--color-line);border-radius:15px;background:rgba(247,241,237,.76)}
.check-row input{width:auto;margin-top:3px}.conditional{display:none;margin-top:10px}.conditional.show{display:block}
.submit-box{margin-top:28px;padding:22px;border-radius:20px;background:linear-gradient(135deg,var(--color-brown-dark),var(--color-brown));color:#fff;display:flex;align-items:center;justify-content:space-between;gap:18px}.submit-box p{margin:0;color:#f4e8df}
.btn{border:none;border-radius:14px;padding:14px 20px;font-weight:950;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:.18s;font-size:15px}.btn:hover{transform:translateY(-1px)}.btn-primary{background:#fff;color:var(--color-brown-dark);box-shadow:0 12px 25px rgba(0,0,0,.12);border:1px solid #fff}.btn-dark{background:var(--color-brown-dark);color:#fff}.btn-light{background:#fff;color:var(--color-brown-dark);border:1px solid var(--color-line)}.btn-danger{background:#f7e9e5;color:#7a1b12}.btn-small{padding:9px 12px;border-radius:11px;font-size:13px}
.notice{border-left:5px solid var(--color-brown);background:rgba(251,244,239,.90);padding:14px;border-radius:14px;color:var(--color-brown-dark);margin:18px 0}.error{border-left-color:var(--color-danger);background:#fff1ef;color:#7a1b12}
.footer{padding:28px;text-align:center;color:var(--color-muted);font-size:13px;background:rgba(255,255,255,.75)}

/* ===== 6) PÁGINA DE CONCLUSÃO ===== */
.done-card{padding:30px;margin:26px auto}.checklist{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:18px 0}.checkitem{padding:12px 14px;background:rgba(247,241,237,.82);border:1px solid var(--color-line);border-radius:14px}.actions{display:flex;gap:12px;flex-wrap:wrap}

/* ===== 7) ADMIN ===== */
.admin-login{min-height:100vh;display:grid;place-items:center;padding:20px}.admin-layout{display:grid;grid-template-columns:260px 1fr;min-height:100vh}.sidebar{background:rgba(43,23,16,.96);color:white;padding:22px;position:sticky;top:0;height:100vh}.sidebar h2{margin:0 0 18px}.sidebar a{display:block;padding:12px 14px;border-radius:12px;color:#fff;margin-bottom:6px}.sidebar a:hover,.sidebar a.active{background:rgba(255,255,255,.13)}.admin-main{padding:24px}.admin-top{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:18px}.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}.metric{padding:18px}.metric b{font-size:30px;color:var(--color-brown-dark)}.participant-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.person-card{padding:16px}.person-card h3{margin:0 0 8px}.pill{display:inline-flex;border-radius:999px;padding:6px 9px;font-size:12px;font-weight:950}.pill.ok{background:#efe4dc;color:var(--color-brown-dark)}.pill.no{background:#f7e9e5;color:#9f1d1d}.detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.detail{background:rgba(247,241,237,.82);border:1px solid var(--color-line);border-radius:14px;padding:12px}.detail strong{display:block;font-size:12px;color:var(--color-muted);margin-bottom:5px}.table{width:100%;border-collapse:collapse;background:white;border-radius:18px;overflow:hidden}.table th,.table td{padding:12px;border-bottom:1px solid var(--color-line);text-align:left}.question-admin-card{padding:16px;margin-bottom:12px}
.preview-bg{height:170px;border-radius:18px;border:1px solid var(--color-line);background-size:cover;background-position:center;background-repeat:no-repeat;display:grid;place-items:center;color:#fff;font-weight:900;text-shadow:0 2px 10px rgba(0,0,0,.55);overflow:hidden}.range-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.range-grid input[type=range]{padding:0}

/* ===== 8) IMPRESSÃO A4 ===== */
.print-page{background:white;color:#111}.print-sheet{width:210mm;min-height:297mm;margin:0 auto;background:white;padding:18mm}.print-header{text-align:center;border-bottom:2px solid #111;padding-bottom:8px;margin-bottom:14px}.print-section{margin:12px 0}.print-section h3{margin:0 0 8px;background:#f2f2f2;padding:7px}.print-row{display:grid;grid-template-columns:45mm 1fr;border-bottom:1px solid #ddd;padding:5px 0;font-size:12px}

/* ===== 9) RESPONSIVO ===== */
@media(max-width:900px){.grid,.grid-3,.admin-layout,.detail-grid,.range-grid{grid-template-columns:1fr}.cards,.participant-grid,.checklist{grid-template-columns:1fr}.video-card{height:240px}.submit-box{align-items:stretch;flex-direction:column}.sidebar{position:relative;height:auto}.admin-main{padding:16px}.form-card{padding:20px}}
@media(max-width:520px){.wrap{width:94%}.hero{padding-top:12px}.topbar{gap:8px}.brand-logo{width:52px;height:52px}.brand strong{font-size:14px}.brand small{font-size:10px}.badge{font-size:10px;padding:7px 9px}.video-card{height:200px;border-radius:16px}.form-card{padding:16px;border-radius:16px}.section-title .num{width:35px;height:35px}.section-title h2{font-size:19px}.submit-box{padding:16px}.btn{width:100%}}
@media print{.site-bg,.no-print,.sidebar,.admin-top{display:none!important}.admin-layout{display:block}.admin-main{padding:0}.print-sheet{box-shadow:none;margin:0;padding:10mm}.detail-grid{grid-template-columns:1fr 1fr}body{background:white!important}}