/* Abertura no desenho da referência: menu flutuante, texto à esquerda, retrato à direita com selo e seta para descer. */

/* Menu em barra flutuante, com vidro escuro. */
.header{top:18px;left:50%;right:auto;width:min(1180px,calc(100% - 48px));height:74px;translate:-50% 0;padding:0 14px 0 26px;border:1px solid #ffffff1c;border-radius:18px;background:#0b151c8f;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.header .brand-name{font-size:30px}
.header .brand-caption{font-size:8px;letter-spacing:1.8px}
.header .desktop-nav{gap:28px;font-size:13px}
.header .desktop-nav a{opacity:.86;transition:opacity .2s}
.header .desktop-nav a:hover{opacity:1}
.header-cta{min-height:46px;padding:10px 20px;border-radius:40px;font-size:13px;border-color:#ffffff3d;background:#ffffff0a}
.header-cta:hover{background:#ffffff17}

/* Palco: fundo escuro contínuo com a foto ocupando a metade direita. */
#inicio.hero-ref{position:relative;background:radial-gradient(ellipse at 72% 38%,#1e2836 0%,#121b26 38%,#0b151c 72%)}
#inicio.hero-ref .cinema-stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4%;align-items:center;min-height:clamp(600px,74svh,760px);padding:128px max(6%,calc((100% - 1180px)/2)) 92px}
#inicio.hero-ref .cinema-photo{background:none}
/* A foto começa abaixo da barra do menu e fica deslocada à direita. */
#inicio.hero-ref .cinema-photo .hero-photo-original{inset:104px 0 0 7%;width:93%;height:calc(100% - 104px);-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 12%,#000 100%),linear-gradient(180deg,transparent 0%,#000 7%,#000 100%);mask-image:linear-gradient(90deg,transparent 0%,#000 12%,#000 100%),linear-gradient(180deg,transparent 0%,#000 7%,#000 100%);-webkit-mask-composite:source-in;mask-composite:intersect}
/* Foto do escritório em tela cheia: a parede escura da esquerda recebe o texto. */
#inicio.hero-ref .cinema-photo .hero-photo-original img{object-position:100% 0%;-webkit-mask-image:none;mask-image:none}
#inicio.hero-ref .cinema-shade{background:linear-gradient(90deg,#0b151cf7 0%,#0b151ce0 30%,#0b151c8a 44%,#0b151c1a 56%,#0b151c00 66%),linear-gradient(180deg,#0b151cb3 0%,#0b151c00 18%),linear-gradient(0deg,#0b151c 0%,#0b151c00 26%)}

/* Coluna de texto. */
#inicio.hero-ref .cinema-opening{min-height:0;justify-content:center;max-width:600px}
.hero-tag{align-self:flex-start;padding:7px 15px;border:1px solid #ffffff2e;border-radius:40px;background:#ffffff08;font-size:10.5px;font-weight:600;letter-spacing:1.6px;color:#e3d4b9}
#inicio.hero-ref h1{margin-top:22px;font-size:clamp(46px,4.6vw,74px);line-height:1.1;letter-spacing:-2px}
#inicio.hero-ref .hero-action{margin-top:22px}
#inicio.hero-ref .hero-action p{max-width:520px;font-size:16px;line-height:1.75;color:#d3d7d8}
#inicio.hero-ref .hero-action .hero-note{margin-top:18px;font-size:12px;color:#aab3b8}
.hero-cta{display:inline-flex;align-items:center;gap:18px;margin-top:16px;padding:9px 10px 9px 22px;min-height:54px;border:1px solid #eed8b7;border-radius:10px;background:linear-gradient(180deg,#efd8b6,#c9a06b);color:#28231c;font-size:14px;font-weight:600;box-shadow:0 10px 30px #c9a06b26;transition:transform .25s,box-shadow .25s}
.hero-cta span{display:grid;place-items:center;width:32px;height:32px;border-radius:7px;background:#fff8ec;color:#28231c;font-size:16px}
.hero-cta:hover{transform:translateY(-2px);box-shadow:0 14px 34px #c9a06b3d}
.hero-cta:focus-visible{outline:2px solid #efd8b6;outline-offset:5px}
/* Credenciais presas à área escura, sem avançar sobre o retrato. */
#inicio.hero-ref .hero-credentials{margin-top:36px;max-width:470px;grid-template-columns:auto auto max-content;align-items:center}
#inicio.hero-ref .hero-credentials>div{gap:10px;padding-inline:14px}
#inicio.hero-ref .hero-credentials strong{font-size:25px}
#inicio.hero-ref .hero-credentials>div:last-child strong{font-size:17px;line-height:1.3;letter-spacing:-.3px;white-space:normal}
#inicio.hero-ref .hero-credentials span{font-size:11px}

/* Selo girando sobre o retrato. */
.hero-seal{position:absolute;z-index:2;right:3%;top:24%;width:150px;height:150px;pointer-events:none}
.hero-seal svg{width:100%;height:100%;overflow:visible}
.hero-seal-outer{fill:#0b151c59;stroke:#f2f1eb40;stroke-width:1}
.hero-seal-inner{fill:#0b151ca6;stroke:#e3d4b980;stroke-width:.8}
.hero-seal-text{transform-origin:80px 80px;animation:hero-seal-turn 36s linear infinite}
.hero-seal-text text{fill:#e9e3d6;font:7.4px var(--sans);letter-spacing:1.6px}
.hero-seal-mark{fill:#e4cba6;font:italic 500 40px var(--serif);letter-spacing:-1px}
@keyframes hero-seal-turn{to{rotate:360deg}}

/* Seta de rolagem no encaixe inferior, avançando sobre a seção clara. */
.hero-scroll{position:absolute;z-index:6;left:50%;bottom:-30px;display:grid;place-items:center;width:84px;height:60px;translate:-50% 0;border-radius:0 0 42px 42px;background:#0b151c}
.hero-scroll span{position:relative;display:grid;place-items:center;width:34px;height:34px;margin-top:-6px;border:1px solid #f2f1eb73;border-radius:50%;animation:hero-scroll-nudge 2.2s var(--ease) infinite}
.hero-scroll span::before{content:'';width:7px;height:7px;margin-top:-4px;border-right:1.5px solid #f2f1eb;border-bottom:1.5px solid #f2f1eb;rotate:45deg}
.hero-scroll:hover span{background:#f2f1eb1a}
.hero-scroll:focus-visible{outline:2px solid #e4cba6;outline-offset:4px}
@keyframes hero-scroll-nudge{0%,100%{translate:0 0}50%{translate:0 4px}}

/* Seção do formulário, logo após a abertura. */
.diagnostic-section{position:relative;z-index:1;background:#f2f1eb;color:#0b151c;padding:96px 0 44px}
.diagnostic-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr);gap:8%;align-items:center}
.diagnostic-intro .eyebrow{font-size:11px;letter-spacing:1.8px;color:#92784f}
.diagnostic-intro h2{margin-top:22px;font:500 clamp(38px,4vw,58px)/1.06 var(--sans);letter-spacing:-2.4px}
.diagnostic-intro h2 em{display:block;font:italic 500 1.1em/1.05 var(--serif);letter-spacing:-1px;color:#a0834c}
.diagnostic-intro>p:not(.eyebrow){max-width:440px;margin-top:22px;font-size:15px;line-height:1.8;color:#4f585c}
.diagnostic-steps{margin:34px 0 0;padding:0;list-style:none;border-top:1px solid #0b151c1f}
.diagnostic-steps li{display:flex;gap:22px;padding:17px 0;border-bottom:1px solid #0b151c1f}
.diagnostic-steps li>span{flex:0 0 26px;font:500 22px/1.2 var(--serif);color:#a0834c}
.diagnostic-steps strong{display:block;font-size:14px;font-weight:700}
.diagnostic-steps p{margin-top:2px;font-size:13px;line-height:1.6;color:#5c666b}
#diagnostico.diagnostic-panel{width:100%;max-width:520px;justify-self:end;padding:34px;background:linear-gradient(160deg,#16222d,#0b151c);border-color:#0b151c;box-shadow:0 30px 70px #0b151c33;scroll-margin-top:110px}

/* Botão verde para falar direto no WhatsApp, abaixo do envio do formulário. */
.whatsapp-direct{display:flex;align-items:center;justify-content:center;gap:11px;width:fit-content;margin:16px auto 0;padding:13px 24px;border-radius:9px;background:#25d366;color:#0a2c17;font-size:14px;font-weight:700;letter-spacing:-.1px;box-shadow:0 10px 26px #25d3662e;transition:background .25s,transform .25s,box-shadow .25s}
.whatsapp-direct svg{width:19px;height:19px;fill:currentColor}
.whatsapp-direct:hover{background:#1fbe5a;transform:translateY(-2px);box-shadow:0 14px 30px #25d36640}
.whatsapp-direct:focus-visible{outline:2px solid #25d366;outline-offset:4px}

/* Entrada dos blocos ao chegar na seção do diagnóstico. */
.motion-ready .diagnostic-section .diagnostic-intro>h2{--enter-delay:.1s}
.motion-ready .diagnostic-section .diagnostic-intro>p:not(.eyebrow){--enter-delay:.2s}
.motion-ready .diagnostic-section .diagnostic-panel{--enter-delay:.18s}
.motion-ready .diagnostic-steps li{--enter-delay:.34s}
.motion-ready .diagnostic-steps li:nth-child(2){--enter-delay:.46s}
.motion-ready .diagnostic-steps li:nth-child(3){--enter-delay:.58s}

/* O botão de envio dá um pulinho discreto de tempos em tempos. */
.motion-ready .diagnostic-panel .form-submit{animation:submit-nudge 4.6s var(--ease) 1.6s infinite}
@keyframes submit-nudge{0%,86%,100%{transform:none}90%{transform:translateY(-4px)}94%{transform:translateY(0)}97%{transform:translateY(-2px)}}
.diagnostic-panel .form-submit:hover{animation-play-state:paused}
.motion-paused .diagnostic-panel .form-submit{animation:none}
@media(prefers-reduced-motion:reduce){.diagnostic-panel .form-submit{animation:none}.whatsapp-direct{transition:none}}

/* Movimento desligado: selo e seta ficam parados. */
.motion-paused .hero-seal-text,.motion-paused .hero-scroll span{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.hero-seal-text,.hero-scroll span{animation:none}}

@media(min-width:901px) and (max-width:1100px){
  .header .desktop-nav{gap:16px}
  #inicio.hero-ref h1{font-size:44px}
  .hero-seal{width:120px;height:120px}
  .diagnostic-grid{gap:5%}
}
@media(max-width:900px){
  .header{top:12px;width:calc(100% - 24px);height:64px;padding:0 10px 0 18px;border-radius:14px}
  .header .brand-name{font-size:26px}
  .mobile-nav{top:calc(100% + 8px)!important;left:0;right:0;border:1px solid #ffffff1c;border-radius:14px;background:#0b151cf2!important}
  #inicio.hero-ref .cinema-stage{display:flex;flex-direction:column;min-height:0;padding:0 6% 96px}
  #inicio.hero-ref .cinema-photo{top:84px;left:0;width:100%;height:540px}
  #inicio.hero-ref .cinema-photo .hero-photo-original{inset:0;width:100%;-webkit-mask-image:none;mask-image:none}
  #inicio.hero-ref .cinema-photo .hero-photo-original img{object-position:62% 0%;transform:none;-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 55%,transparent 100%);mask-image:linear-gradient(180deg,#000 0%,#000 55%,transparent 100%)}
  #inicio.hero-ref .cinema-shade{background:linear-gradient(180deg,#0b151c00 0px,#0b151c00 400px,#0b151cd9 560px,#0b151c 624px)}
  #inicio.hero-ref .cinema-opening{max-width:none;min-height:0;padding-top:470px}
  #inicio.hero-ref h1{font-size:clamp(40px,10vw,58px);letter-spacing:-1.5px}
  .hero-seal{top:104px;right:2%;width:80px;height:80px}
  .diagnostic-section{padding:80px 0 36px}
  .diagnostic-grid{grid-template-columns:1fr;gap:40px}
  #diagnostico.diagnostic-panel{justify-self:stretch;max-width:none;padding:28px 22px}
  .whatsapp-direct{width:100%;padding:14px 20px}
  .diagnostic-intro h2{font-size:clamp(36px,9vw,48px);letter-spacing:-1.6px}
}
@media(max-width:370px){
  #inicio.hero-ref .cinema-opening{padding-top:420px}
  #inicio.hero-ref .cinema-photo{height:480px}
  .hero-seal{top:108px;width:76px;height:76px}
}