/* ───────── TOKENS ───────── */
:root{
  --green:        #00995d;
  --green-dark:   #007a4b;
  --green-deep:   #0a6e44;
  --green-light:  #5fb85f;
  --green-btn:    #5cb85c;
  --text:         #1b2a23;
  --muted:        #6b7b73;
  --line:         #cfe3d8;
  --bg:           #ededed;
  --white:        #fff;
  --radius:       14px;
  --shadow:       0 10px 40px rgba(0,0,0,.12);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Inter',sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.5;
}
img{max-width:100%;display:block;}
a{text-decoration:none;color:inherit;transition:.2s;}
.container-xl{max-width:1180px;margin:0 auto;padding:0 24px;}
/* ───────── HERO (vídeo de background fullscreen) ───────── */
.hero{
  position:relative;
  min-height:100vh;            /* cobre a tela inteira */
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

/* iframe do YouTube cobrindo todo o fundo, sem cortar nas laterais */
.hero-bg{
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  /* trick p/ manter 16:9 sempre "cobrindo" a área (cover) */
  width:100vw;
  height:56.25vw;              /* 16:9 → altura = largura * 9/16 */
  min-height:100vh;
  min-width:177.77vh;          /* 16:9 → largura = altura * 16/9 */
  border:0;
  pointer-events:none;
  z-index:0;
}

.hero-overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.30),rgba(0,0,0,.45));
  z-index:1;
}

/* título centralizado sobre o vídeo */
.hero-content{
  position:relative;
  z-index:2;
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 24px;
}
.hero-title{
  color:#fff;font-weight:900;letter-spacing:-.02em;
  font-size:clamp(38px,7vw,84px);
  text-shadow:0 4px 24px rgba(0,0,0,.4);
  text-align:center;
}

/* ───────── NAVBAR (transparente, por cima do vídeo) ───────── */
.site-header{
  position:relative;          /* fica dentro do hero, sobre o vídeo */
  z-index:3;
  background:transparent;     /* sem fundo → vídeo aparece atrás */
  width:100%;
}
.site-header .navbar{padding:18px 0;}
.site-header .container-xl{display:flex;align-items:center;width:100%;}

.brand-pill{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--green);color:#fff;
  font-weight:800;font-size:15px;
  padding:8px 16px;border-radius:8px;
  box-shadow:0 4px 14px rgba(0,0,0,.2);
}
.brand-pill i{font-size:13px;}

.nav-links{
  display:flex;list-style:none;gap:26px;align-items:center;margin:0;
}
.nav-links a{
  font-size:14px;font-weight:600;color:#fff;   /* texto branco sobre o vídeo */
  text-shadow:0 1px 6px rgba(0,0,0,.4);
}
.nav-links a:hover{color:#d7f5e7;}

.btn-client{
  background:var(--green);color:#fff;
  font-size:14px;font-weight:700;
  padding:9px 20px;border-radius:8px;margin-left:26px;
  box-shadow:0 4px 14px rgba(0,0,0,.2);
}
.btn-client:hover{background:var(--green-dark);color:#fff;}

.navbar-toggler{
  border:none;background:none;font-size:30px;color:#fff;
  margin-left:auto;padding:2px 8px;
  text-shadow:0 1px 6px rgba(0,0,0,.4);
}
.navbar-toggler:focus{box-shadow:none;}


/* ───────── HISTÓRIAS REAIS ───────── */
.stories{background:var(--white);padding:42px 0 56px;}
.stories-title{
  text-align:center;color:var(--green);
  font-size:clamp(22px,3vw,30px);font-weight:800;
}
.stories-divider{
  display:block;width:54px;height:3px;border-radius:3px;
  background:var(--green);margin:10px auto 0;
}

.constellation{
  position:relative;margin-top:34px;
  height:380px;width:100%;
  perspective:1000px;
}
.constellation-lines{
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;z-index:1;
}
.constellation-lines line{
  stroke:#cfe3d8;stroke-width:1.5;stroke-linecap:round;
}
.constellation-lines circle{fill:#9ed0b4;}

.node{
  position:absolute;z-index:2;
  border-radius:50%;overflow:hidden;
  border:3px solid #fff;
  box-shadow:0 6px 18px rgba(0,0,0,.14);
  cursor:pointer;
  transition:transform .35s cubic-bezier(.34,1.56,.64,1),
             box-shadow .35s, border-color .35s;
  will-change:transform;
}
.node img{width:100%;height:100%;object-fit:cover;}
.node:hover{
  transform:scale(1.28) translateZ(40px)!important;
  border-color:var(--green-light);
  box-shadow:0 14px 32px rgba(0,153,93,.35);
  z-index:5;
}

/* ───────── CTA ───────── */
.cta{
  background:linear-gradient(160deg,var(--green) 0%,var(--green-deep) 100%);
  color:#fff;padding:52px 0;position:relative;overflow:hidden;
}
.cta-grid{
  display:grid;grid-template-columns:1fr 1.3fr;gap:40px;align-items:center;
}
.cta-left{position:relative;}
.cta-title{font-size:clamp(26px,3vw,34px);font-weight:800;line-height:1.15;margin-bottom:16px;}
.cta-text{font-size:15px;opacity:.92;line-height:1.6;}
.cta-heart{
  position:absolute;bottom:-30px;left:0;
  font-size:120px;color:rgba(255,255,255,.08);z-index:0;
}

.cta-form .form-control,
.cta-form .form-select{
  border:none;border-radius:8px;padding:14px 16px;
  font-size:14px;background:#fff;color:var(--text);
}
.cta-form .form-control:focus,
.cta-form .form-select:focus{
  box-shadow:0 0 0 3px rgba(255,255,255,.4);
}
.btn-submit{
  width:100%;border:none;border-radius:8px;
  background:var(--green-btn);color:#fff;
  font-size:15px;font-weight:700;padding:14px;
  cursor:pointer;transition:.2s;
}
.btn-submit:hover{background:#4ca54c;}
.form-msg{margin-top:12px;font-size:14px;font-weight:600;min-height:18px;}
.form-msg.ok{color:#d8ffe9;}
.form-msg.err{color:#ffd9d9;}
/* ───────── MODAL DEPOIMENTO (YouTube adaptável) ───────── */
.story-modal{
  border:none;border-radius:18px;overflow:hidden;
  box-shadow:0 24px 70px rgba(0,0,0,.35);
}
.story-modal-body{
  padding:0 0 26px;text-align:center;background:#fff;overflow:hidden;
}

/* wrapper do player — a proporção muda via classe */
.story-video-wrap{
  position:relative;width:100%;
  background:#0d1512;
  border-radius:18px 18px 0 0;overflow:hidden;
  aspect-ratio:16/9;                 /* padrão: horizontal */
  transition:aspect-ratio .25s ease;
}
.story-video-wrap iframe{
  position:absolute;inset:0;width:100%;height:100%;border:0;
}

/* VÍDEO HORIZONTAL → modal mais largo */
.modal-dialog.video-h{ max-width:640px; }
.story-video-wrap.is-horizontal{ aspect-ratio:16/9; }

/* VÍDEO VERTICAL → modal estreito + player alto */
.modal-dialog.video-v{ max-width:360px; }
.story-video-wrap.is-vertical{ aspect-ratio:9/16; max-height:70vh; }

.story-modal-info{margin-top:18px;position:relative;z-index:2;}
.story-modal-avatar{
  width:72px;height:72px;border-radius:50%;object-fit:cover;
  margin:0 auto 10px;border:4px solid #fff;
  box-shadow:0 8px 22px rgba(0,153,93,.25);
}
.story-modal-name{font-size:17px;font-weight:800;color:var(--text);}
.story-modal-role{font-size:13px;color:var(--muted);margin-top:2px;}
.story-modal-stars{color:#f6b000;font-size:17px;margin-top:8px;}
.story-close{
  position:absolute;top:12px;right:12px;z-index:5;
  background:rgba(255,255,255,.9);border-radius:50%;padding:8px;opacity:1;
}

/* no mobile, vídeo vertical não estoura a tela */
@media (max-width:767px){
  .modal-dialog.video-v{ max-width:88vw; }
  .story-video-wrap.is-vertical{ max-height:62vh; }
}


/* ───────── RESPONSIVO ───────── */
@media (max-width:991px){
  .navbar-collapse{
    background:#fff;border-top:1px solid #eee;
    padding:14px 0;margin-top:8px;
  }
  .nav-links{flex-direction:column;gap:6px;align-items:flex-start;}
  .nav-links a{padding:8px 4px;display:block;}
  .btn-client{margin:10px 0 0;display:inline-block;}
}

/* MOBILE → continua sendo REDE (constelação compacta) */
@media (max-width:767px){
  .hero-video{aspect-ratio:9/11;}
  .hero-title{font-size:clamp(34px,11vw,52px);line-height:1.05;}

  .constellation{height:420px;perspective:800px;}
  .constellation-lines{display:block;}
  .constellation .node{position:absolute !important;}
  .constellation .node:hover,
  .constellation .node:active{transform:scale(1.18) !important;}

  .cta-grid{grid-template-columns:1fr;gap:24px;}
  .cta-heart{display:none;}
  .cta-form .col-md-6{flex:0 0 100%;max-width:100%;}
}

@media (max-width:380px){
  .constellation{height:400px;}
}
/* ───────── UPLOAD DE DEPOIMENTO (mesmo estilo dos campos) ───────── */
.upload-input{ display:none; }

.upload-drop{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  text-align:center;
  cursor:pointer;
  width:100%;
  /* mesma "pegada" branca dos demais campos do formulário */
  background:#fff;
  border:1.5px dashed #bcd9c9;
  border-radius:8px;
  padding:18px 16px;
  color:var(--green-deep);
  transition:.2s;
}
.upload-drop:hover,
.upload-drop.dragover{
  border-color:var(--green);
  background:#f3fbf6;
}
.upload-drop i{ font-size:24px; color:var(--green); }
.upload-drop span{ font-size:14px; font-weight:700; color:var(--green-deep); }
.upload-drop small{ font-size:11.5px; color:#7c8f85; }

/* estado "arquivo válido selecionado" */
.upload-drop.has-file{
  border-style:solid;
  border-color:var(--green);
  background:#eef9f2;
}
.upload-drop.has-file i{ color:var(--green); }

.upload-msg{
  margin-top:8px;
  font-size:13px;
  font-weight:600;
  min-height:16px;
}
.upload-msg.ok{ color:#d8ffe9; }
.upload-msg.err{ color:#ffd9d9; }