/* /servicos/websites-institucionais · porte do "Servico Sites Institucionais.dc.html" (pacote Inovaccio11).
   Os estilos do desenho ficam em linha na view; aqui só o que o script do protótipo calculava pela
   largura (W = 1000 px, M = 700 px), os :hover (style-hover) e as animações. */
@keyframes siIn{from{opacity:0;transform:translateY(14px);filter:blur(6px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes siMq{to{transform:translateX(-50%)}}
@keyframes siDash{to{stroke-dashoffset:-24}}

.si-pg{position:relative;font-family:'Ubuntu',sans-serif;color:#09090B;background:#FAFAF8;overflow-x:clip}
.si-pg a{color:inherit;text-decoration:none}
.si-pg a:hover{opacity:.92}
.si-pg :focus-visible:not(input):not(textarea):not(select){outline:2px solid #09090B;outline-offset:3px;border-radius:12px}
.si-pg input:focus-visible,.si-pg textarea:focus-visible{outline:none}
.si-pg [data-tone="dark"] :focus-visible{outline-color:#F4F3F1}

/* Grades: uma coluna até 1000 px, como no desenho */
.si-hero-grid,.si-2,.si-faq{grid-template-columns:minmax(0,1fr)}
.si-job{grid-template-columns:minmax(0,1fr)}
@media (min-width:1000px){
  .si-hero-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
  .si-2{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
  .si-faq{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
  .si-job{grid-template-columns:140px minmax(0,1.2fr) minmax(0,1fr)}
  .si-gruda{position:sticky;top:110px}
}

/* Hero: botões e planta */
.si-bt-vermelho{transition:transform .6s cubic-bezier(.22,1,.36,1)}
.si-bt-vermelho:hover{transform:translateY(-2px);opacity:1!important}
/* Planta: a mesma do computador em todas as larguras. No celular os nós usam as posições de NOS_CEL
   (--mx/--my) e as curvas da classe si-ar-m, num cartão mais alto que largo. */
.si-plan{display:block;aspect-ratio:1/1.1;max-width:560px;border-radius:26px!important}
.si-no{position:absolute;left:var(--mx);top:var(--my);display:inline-flex;align-items:center;gap:6px;padding:7px 11px;border:none;border-radius:999px;font-family:'Ubuntu',sans-serif;font-size:12px;font-weight:500;white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .5s cubic-bezier(.34,1.5,.5,1),background .45s,color .45s,box-shadow .45s}
.si-ar-d{display:none}
@media (max-width:359px){.si-no{gap:5px;padding:6px 9px;font-size:11px}}
.si-largura{max-width:560px}
@media (min-width:700px){
  .si-plan{aspect-ratio:4/3;border-radius:32px!important}
  .si-no{left:var(--x);top:var(--y);gap:7px;padding:8px 13px;font-size:12.5px}
  .si-ar-d{display:inline}.si-ar-m{display:none}
}
@media (min-width:1000px){.si-plan{aspect-ratio:1/1;max-width:none}.si-largura{max-width:none}}

/* Sites no ar */
.si-mq{animation:siMq 60s linear infinite}
.si-mq:hover{animation-play-state:paused}
.si-print{transition:transform .6s cubic-bezier(.22,1,.36,1)}
.si-print:hover{transform:translateY(-6px)}

/* Três trabalhos: lista no computador, carrossel no celular */
.si-jobs{display:grid;flex-direction:column;grid-auto-flow:column;grid-auto-columns:85%;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;border-top:none}
.si-jobs::-webkit-scrollbar,.si-deps::-webkit-scrollbar{display:none}
.si-job{padding:22px;border-bottom:none;border-radius:24px;background:#FFFFFF}
@media (min-width:700px){
  .si-jobs{display:flex;gap:0;overflow-x:visible;border-top:1px solid rgba(9,9,11,.14)}
  .si-job{padding:clamp(24px,3vw,40px) 0;border-bottom:1px solid rgba(9,9,11,.14);border-radius:0;background:transparent}
}

/* Inovia */
.si-orb{width:150px;height:150px}
@media (min-width:1000px){.si-orb{width:200px;height:200px}}
.si-ia-link{transition:background .4s}
.si-ia-link:hover{background:rgba(255,255,255,.14)!important;opacity:1!important}

/* O que vem na caixa */
.si-ents{grid-template-columns:minmax(0,1fr)}
@media (min-width:700px){.si-ents{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Depois que vai ao ar: carrossel no celular, uma coluna até 1000 px, três depois */
.si-deps{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:82%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
@media (min-width:700px){.si-deps{grid-template-columns:minmax(0,1fr);grid-auto-flow:row;grid-auto-columns:auto;overflow-x:visible}}
@media (min-width:1000px){.si-deps{grid-template-columns:repeat(3,minmax(0,1fr))}}
.si-dep{transition:transform .6s cubic-bezier(.22,1,.36,1)}
.si-dep:hover{transform:translateY(-3px);opacity:1!important}

/* Perguntas (acordeão do desenho) */
.si-fq-r{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s cubic-bezier(.22,1,.36,1)}
.si-fq.on .si-fq-r{grid-template-rows:1fr}
.si-fq-mais{background:#F1F0EE;color:#09090B;transform:rotate(0deg);transition:transform .5s cubic-bezier(.22,1,.36,1),background .4s,color .4s}
.si-fq.on .si-fq-mais{background:#09090B;color:#FFFFFF;transform:rotate(45deg)}

/* Barra fixa no celular (some do 700 em diante) */
.si-barra{display:flex;opacity:0;transform:translateY(20px);pointer-events:none;transition:opacity .4s,transform .6s cubic-bezier(.34,1.5,.5,1)}
.si-barra.on{opacity:1;transform:translateY(0px);pointer-events:auto}
@media (min-width:700px){.si-barra{display:none}}

/* Janela do print */
.si-pv{position:fixed;inset:0;z-index:520;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(9,9,11,.7);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);animation:siIn .4s cubic-bezier(.22,1,.36,1) both}
.si-pv[hidden]{display:none}

@media (prefers-reduced-motion:reduce){.si-pg *{animation:none!important;transition:none!important}}