/* =========================================================================
   HOME — parte escura (da secção "A abordagem Simply" até ao rodapé)
   Mesma linguagem da página Master: preto profundo, o azul Simply como luz,
   painéis translúcidos e sobreposições. Só carregado na home.
   ========================================================================= */
.h-dark,.h-dark-foot,.h-dark-bar{
  --d-bg:#07070B;
  --d-panel:rgba(255,255,255,.045);
  --d-panel-2:rgba(255,255,255,.07);
  --d-line:rgba(255,255,255,.11);
  --d-line-2:rgba(255,255,255,.2);
  --d-text:#F3F3F6;
  --d-soft:rgba(243,243,246,.66);
  --d-glow:#8C8CFF;
}
.h-dark{position:relative;isolation:isolate;background:var(--d-bg);color:var(--d-soft);overflow:hidden;}
.h-dark .x-h2a,.h-dark .x-h2b,.h-dark h2,.h-dark h3{color:#fff;}
.h-dark .x-lede{color:var(--d-soft);}
.h-dark .x-lab{color:var(--d-glow);}
.h-dark .x-lab::before{background:var(--d-glow);}

/* luzes azuis de fundo, contínuas entre secções */
.h-dark::before{content:'';position:absolute;z-index:-1;pointer-events:none;border-radius:50%;
  width:min(760px,80vw);aspect-ratio:1;filter:blur(40px);
  background:radial-gradient(circle,rgba(35,35,254,.3) 0%,rgba(35,35,254,0) 60%);}

/* ---- 1) abordagem: título, foto grande e painel de vidro por cima ---- */
.h-dark-intro{padding-top:clamp(88px,11vw,150px);
  background:linear-gradient(180deg,#0B0B3A 0%,var(--d-bg) 38%);}
.h-dark-intro::before{top:-30%;right:-20%;}
.h-di-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,6vw,96px);align-items:end;}
.h-di-head .x-lede{margin:0;}
.h-di-title{max-width:12em;}
.h-di-stage{position:relative;margin-top:clamp(48px,6vw,80px);}
.h-di-photo{margin:0;border-radius:28px;overflow:hidden;aspect-ratio:2.2/1;position:relative;
  box-shadow:0 60px 120px -50px rgba(0,0,0,.9);}
.h-di-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 45%;display:block;}
.h-di-photo::after{content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(7,7,11,.1) 0%,rgba(7,7,11,0) 40%,rgba(7,7,11,.55) 100%),
             linear-gradient(180deg,rgba(7,7,11,0) 55%,rgba(7,7,11,.6) 100%);}
.h-dark .h-di-panel{
  position:absolute;right:clamp(16px,3vw,40px);bottom:clamp(-56px,-4vw,-32px);width:min(440px,46%);
  margin:0;padding:10px 26px;border-radius:22px;
  background:rgba(14,14,26,.55);border:1px solid var(--d-line-2);
  backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);
  box-shadow:0 40px 80px -30px rgba(0,0,0,.85);
}
.h-dark .h-di-panel li{border-top:0;border-bottom:1px solid var(--d-line);padding:18px 0;color:#fff;}
.h-dark .h-di-panel li:last-child{border-bottom:0;}
.h-dark-intro{padding-bottom:clamp(120px,13vw,170px);}

/* ---- 2) resultados: balões de vidro, avatar sobreposto ---- */
.h-dark[aria-labelledby="h-prova"]::before{left:-22%;top:50%;transform:translateY(-50%);opacity:.75;}
.h-dark .h-proof blockquote{
  background:var(--d-panel);border:1px solid var(--d-line);color:var(--d-text);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-radius:22px 22px 22px 6px;padding:28px 26px 40px;
}
.h-dark .h-proof figcaption{color:#fff;margin-top:-18px;padding-left:22px;position:relative;}
.h-dark .h-proof figcaption::before{box-shadow:0 0 0 4px var(--d-bg),0 10px 24px -6px rgba(35,35,254,.8);}

/* ---- 3) perguntas: lista dentro de um painel translúcido ---- */
.h-dark[aria-labelledby="h-faq"]::before{right:-26%;top:50%;transform:translateY(-50%);opacity:.75;}
.h-dark .x-faq .faq-list{
  background:var(--d-panel);border:1px solid var(--d-line);border-radius:24px;padding:4px 28px;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.h-dark details.faq{border-bottom-color:var(--d-line);}
.h-dark details.faq:last-child{border-bottom:0;}
.h-dark details.faq summary{color:#fff;}
.h-dark details.faq summary::after{color:var(--d-glow);}
.h-dark details.faq p{color:var(--d-soft);}
.h-dark details.faq summary:focus-visible{outline-color:#fff;}

/* ---- 4) fecho: o azul como luz vinda de baixo ---- */
.h-dark-band{background:
  radial-gradient(65% 120% at 50% 115%,rgba(35,35,254,.85) 0%,rgba(35,35,254,.25) 45%,rgba(35,35,254,0) 75%),var(--d-bg);
  border-top:1px solid var(--d-line);}
.h-dark-band::before{display:none;}
.h-dark-band .btn,.h-dark-band .btn-ghost{background:#fff;color:#07070B;border-color:#fff;}
.h-dark-band .btn:focus-visible{outline-color:#fff;}

/* ---- 5) rodapé e barra fixa do WhatsApp ---- */
.h-dark-foot{background:#050508;border-top-color:var(--d-line);}
.h-dark-foot .logo-tagline{filter:brightness(0) invert(1);}
.h-dark-foot nav a,.h-dark-foot small{color:var(--d-soft);}
@media (hover:hover) and (pointer:fine){.h-dark-foot nav a:hover{color:#fff;}}
.h-dark-bar{background:rgba(7,7,11,.88);border-top-color:var(--d-line);}
.h-dark-bar .btn{background:#fff;color:#07070B;}
/* no telemóvel, o espaço da barra fixa fica dentro do rodapé escuro */
@media (max-width:899px){
  body:has(.h-dark-foot){padding-bottom:0;}
  .h-dark-foot{padding-bottom:calc(56px + 78px + env(safe-area-inset-bottom,0px));}
}

@media (max-width:860px){
  .h-di-head{grid-template-columns:1fr;gap:20px;}
  .h-di-photo{aspect-ratio:4/3;}
  .h-dark .h-di-panel{position:relative;right:auto;bottom:auto;width:auto;margin:-64px 14px 0;}
  .h-dark-intro{padding-bottom:clamp(72px,10vw,120px);}
}
@media (prefers-reduced-transparency:reduce){
  .h-dark .h-di-panel,.h-dark .h-proof blockquote,.h-dark .x-faq .faq-list{
    backdrop-filter:none;-webkit-backdrop-filter:none;background:#14141f;}
}