/* Fox Alfa — página Consultoria e Implementação de IA.
   Usa style.css + fx.css do site; aqui só o que é próprio desta página. */

/* ---------- Header (esta página não tem o controlador do vídeo da home) ---------- */
.page-ia .header{transition:background .3s var(--ease),border-color .3s var(--ease),height .3s var(--ease)}

.page-ia .desktop-nav a[aria-current="page"]{color:var(--orange)}
.page-ia .mobile-menu a[aria-current="page"]{color:var(--orange)}

/* ---------- Hero com o robô ---------- */
.ia-hero{position:relative;height:100svh;min-height:620px;overflow:hidden;isolation:isolate;background:linear-gradient(90deg,#faf5ef 0%,#f6efe8 45%,#ece2dc 100%)}
.ia-stage{position:absolute;inset:0;z-index:-1;pointer-events:none}
.ia-stage img,.ia-stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.ia-stage video{opacity:0;transition:opacity .6s var(--ease)}
.ia-hero.is-ready .ia-stage video{opacity:1}
/* desktop: robô centralizado, em quadro 16:9 logo abaixo do header, bordas fundidas ao fundo */
@media(min-width:761px){
 .ia-stage img,.ia-stage video{inset:auto;top:62px;left:50%;height:65%;width:auto;max-width:none;aspect-ratio:16/9;transform:translateX(-50%);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 13%,#000 87%,transparent 100%),linear-gradient(180deg,transparent 0,#000 9%,#000 86%,transparent 100%);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0,#000 13%,#000 87%,transparent 100%),linear-gradient(180deg,transparent 0,#000 9%,#000 86%,transparent 100%);mask-composite:intersect}
}
/* ---------- Loading do vídeo (imagem de fundo visível, levemente desfocada) ---------- */
.ia-poster{transition:filter .9s var(--ease)}
.ia-hero.is-loading .ia-poster{filter:blur(4px) saturate(.9) brightness(1.03)}
.ia-loader{position:absolute;left:50%;top:30%;z-index:2;display:flex;align-items:center;gap:12px;padding:10px 18px 10px 12px;border-radius:99px;transform:translate(-50%,-50%);transition:opacity .6s var(--ease),transform .6s var(--ease);pointer-events:none;white-space:nowrap;
 background:linear-gradient(150deg,rgba(255,255,255,.72),rgba(255,255,255,.45));-webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);
 border:1px solid rgba(255,255,255,.8);box-shadow:inset 0 1.5px 0 #fff,inset 0 -1px 0 rgba(255,255,255,.45),0 14px 30px -14px rgba(70,45,20,.35)}
.ia-loader[hidden]{display:none}
.ia-hero:not(.is-loading) .ia-loader{opacity:0;transform:translate(-50%,-50%) scale(.94)}
.ia-loader-ring{width:26px;height:26px;flex:none;transform:rotate(-90deg);overflow:visible}
.ia-loader-ring circle{fill:none;stroke-width:3.5}
.ia-loader-ring .track{stroke:rgba(37,35,33,.1)}
.ia-loader-ring .bar{stroke:var(--orange);stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:calc(100 - var(--p,0));transition:stroke-dashoffset .35s var(--ease)}
.ia-loader.is-indeterminate .bar{stroke-dashoffset:72}
.ia-loader.is-indeterminate .ia-loader-ring{animation:ia-spin 1.1s linear infinite}
@keyframes ia-spin{from{transform:rotate(-90deg)}to{transform:rotate(270deg)}}
.ia-loader-label{font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.ia-loader-pct{font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--orange);min-width:3.2ch;text-align:right}
.ia-loader.is-indeterminate .ia-loader-pct{display:none}
.ia-hero.is-loading .ia-hint{opacity:0}
.ia-hint{transition:opacity .4s var(--ease)}

/* card de vidro centralizado na parte de baixo (desktop e celular) */
.ia-copy{position:absolute;left:50%;bottom:66px;transform:translateX(-50%);width:min(720px,calc(100% - 2 * var(--pad)));min-height:36%;
 display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:clamp(24px,2.6vw,36px) clamp(24px,4vw,56px);border-radius:32px;isolation:isolate;
 background:linear-gradient(150deg,rgba(255,255,255,.5) 0%,rgba(255,255,255,.28) 50%,rgba(255,255,255,.4) 100%);
 -webkit-backdrop-filter:blur(22px) saturate(180%) brightness(1.05);backdrop-filter:blur(22px) saturate(180%) brightness(1.05);
 border:1px solid rgba(255,255,255,.7);
 box-shadow:inset 0 1.5px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(255,255,255,.35),inset 0 0 28px rgba(255,255,255,.22),0 24px 50px -18px rgba(70,45,20,.28)}
.ia-copy::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;background:radial-gradient(90% 55% at 18% 0%,rgba(255,255,255,.55),rgba(255,255,255,0) 65%),radial-gradient(70% 45% at 90% 100%,rgba(255,255,255,.28),rgba(255,255,255,0) 70%)}
.ia-copy .eyebrow{margin-bottom:14px}
.ia-copy h1{font-size:clamp(28px,2.75vw,44px);line-height:1.04}
.ia-copy h1 span{display:block}
.ia-copy h1 span{color:var(--orange)}
.ia-copy .description{max-width:52ch;margin:14px auto 0;font-size:clamp(14px,1.05vw,16px)}
.ia-copy .actions{justify-content:center;margin-top:20px}
@media(min-width:761px) and (max-height:760px){.ia-copy .description{display:none}.ia-copy{min-height:0}}
.ia-bottom{position:absolute;left:var(--pad);right:var(--pad);bottom:26px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.ia-hint{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:600;color:var(--muted);margin:0}
.ia-hint-dot{width:8px;height:8px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 0 rgba(230,91,24,.5)}
.ia-hero.is-ready .ia-hint-dot{animation:ia-pulse 2.2s infinite}
@keyframes ia-pulse{0%{box-shadow:0 0 0 0 rgba(230,91,24,.45)}70%{box-shadow:0 0 0 10px rgba(230,91,24,0)}100%{box-shadow:0 0 0 0 rgba(230,91,24,0)}}
.ia-pause{border:0;border-bottom:1px solid currentColor;background:transparent;padding:7px 0;font-size:12px;color:var(--ink)}
.ia-pause[hidden]{display:none}

/* ---------- Frase de abertura ---------- */
.ia-intro{background:var(--paper)}
.ia-statement{font:700 clamp(38px,4.6vw,76px)/1.04 var(--display);text-transform:uppercase;letter-spacing:-.01em;max-width:22ch;margin:0}
.ia-statement em{font-style:normal;color:var(--orange)}
.ia-statement .w{transition:opacity .5s var(--ease)}
.fx .ia-statement .w{opacity:.14}
.fx .ia-statement .w.is-lit{opacity:1}

/* ---------- Dúvidas frequentes ---------- */
.ia-faq{display:grid;grid-template-columns:.8fr 1.2fr;gap:10%;background:var(--paper);border-top:1px solid var(--line)}
.ia-faq-head h2{font-size:clamp(44px,5vw,76px)}
.ia-faq-head h2 span{color:var(--muted)}
.ia-faq-list details{border-top:1px solid var(--line)}
.ia-faq-list details:last-child{border-bottom:1px solid var(--line)}
.ia-faq-list summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:26px 0;cursor:pointer;font-size:clamp(17px,1.4vw,21px);font-weight:600}
.ia-faq-list summary::-webkit-details-marker{display:none}
.ia-faq-list .plus::before,.ia-faq-list .plus::after{background:var(--ink)}
.ia-faq-list details p{margin:0;padding:0 48px 28px 0;color:var(--muted);font-size:15px;line-height:1.7;max-width:60ch}

/* conversa: cabeçalho um pouco mais contido nesta página */
.page-ia .ai-title .fx-chat{margin-top:44px}

/* ---------- Celular ---------- */
@media(max-width:760px){
 .ia-hero{height:100svh;min-height:680px}
 .ia-stage img,.ia-stage video{top:56px;bottom:auto;height:54%;object-position:50% 0;-webkit-mask-image:linear-gradient(180deg,#000 78%,transparent 100%);mask-image:linear-gradient(180deg,#000 78%,transparent 100%)}
 .ia-copy{top:auto;bottom:58px;left:16px;right:16px;width:auto;transform:none;min-height:0;padding:22px 20px 22px;border-radius:28px;isolation:isolate;
  background:linear-gradient(145deg,rgba(255,255,255,.56) 0%,rgba(255,255,255,.34) 55%,rgba(255,255,255,.45) 100%);
  -webkit-backdrop-filter:blur(22px) saturate(180%) brightness(1.06);backdrop-filter:blur(22px) saturate(180%) brightness(1.06);
  border:1px solid rgba(255,255,255,.7);box-shadow:inset 0 1.5px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(255,255,255,.35),inset 0 0 24px rgba(255,255,255,.25),0 18px 40px -12px rgba(70,45,20,.22)}
 .ia-copy .eyebrow{font-size:10px;letter-spacing:.14em;margin-bottom:12px}
 .ia-copy h1{font-size:clamp(28px,8.2vw,38px)}
 .ia-copy .description{font-size:13.5px;line-height:1.6;margin-top:12px}
 .ia-copy .actions{margin-top:16px;gap:12px 18px}
 .ia-copy .actions .button{font-size:12px;padding:12px 16px;min-height:44px}
 .ia-copy .actions .text-link{font-size:12px}
 .ia-bottom{bottom:18px;left:24px;right:24px}
 .ia-loader{top:24%}
 .ia-hint,.ia-pause{font-size:11px}
 .ia-statement{font-size:clamp(32px,9vw,44px)}
 .ia-faq{grid-template-columns:1fr;gap:36px}
 .ia-faq-list details p{padding-right:0}
}
@media(max-width:760px) and (max-height:760px){
 .ia-copy .description{display:none}
 .ia-copy h1{font-size:clamp(30px,8.4vw,40px)}
}
@media (prefers-reduced-transparency: reduce){
 @media(max-width:760px){.ia-copy{background:rgba(250,246,240,.95);backdrop-filter:none;-webkit-backdrop-filter:none}}
}