/* Página Serviços: os seis serviços da NGG Tech e a seção do LLMaaS (painel de cenas, fluxo,
   tokens, segurança, API, planos e perguntas). Usa os tokens de style.css, então segue o tema claro/escuro.
   O palco do painel é sempre escuro (é uma "tela"), nos dois temas. */

.llm-intro{max-width:46rem;margin:0 auto 2.4rem;text-align:center;}
.llm-intro p{font-size:1.1rem;}
.llm-head{max-width:46rem;margin:0 0 2.6rem;}
.llm-head p{margin-top:.9rem;font-size:1.08rem;}
.llm-head .scene-title{font-size:clamp(1.8rem,4vw,3rem);}

/* ---------- abertura do LLMaaS ---------- */
.llm-hero{display:grid;grid-template-columns:1.1fr 1fr;gap:3.5rem;align-items:center;}
.llm-hero h2{font-size:clamp(2rem,4.6vw,3.6rem);}
.llm-hero .llm-sub{margin:1.3rem 0 1.8rem;font-size:1.1rem;max-width:34em;}
.llm-actions{display:flex;flex-wrap:wrap;gap:.9rem;}
.llm-facts{list-style:none;margin:2rem 0 0;padding:0;display:grid;gap:.7rem;}
.llm-facts li{position:relative;padding-left:1.5rem;color:var(--fg-dim);font-size:.98rem;line-height:1.55;}
.llm-facts li::before{content:"";position:absolute;left:0;top:.5em;width:.7rem;height:.7rem;border-radius:50%;border:2px solid var(--teal);}
.llm-facts strong{color:var(--fg);font-weight:600;}
.llm-video{margin:0;}
.llm-video-frame{position:relative;aspect-ratio:16/9;background:#000;overflow:hidden;border:1px solid var(--line);border-radius:4px;box-shadow:0 24px 60px rgba(0,0,0,.35);}
.llm-video-frame video{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:contain;background:#000;}
.llm-video figcaption{margin:.9rem 0 0;font-family:var(--mono);font-size:.78rem;letter-spacing:.03em;line-height:1.6;color:var(--fg-dim);}

/* ---------- painel "peça por peça" ---------- */
.llm-placa{display:grid;grid-template-columns:290px 1fr;gap:1.8rem;align-items:start;}
.llm-placa__pecas{display:grid;gap:.5rem;position:relative;}
.llm-placa__pecas::before{content:"";position:absolute;left:1.35rem;top:1.5rem;bottom:1.5rem;width:2px;background:var(--line);}
.llm-placa__pecas button{
  position:relative;width:100%;min-height:56px;text-align:left;cursor:pointer;
  padding:.8rem 1rem .8rem 3.2rem;border-radius:4px;border:1px solid transparent;
  background:transparent;font:inherit;color:var(--fg);
  transition:background .2s ease,border-color .2s ease;
}
.llm-placa__pecas button::before{
  content:"";position:absolute;left:.85rem;top:50%;width:1.1rem;height:1.1rem;margin-top:-.55rem;
  border-radius:50%;background:var(--bg);border:2px solid var(--fg-dim);transition:all .2s ease;
}
.llm-placa__pecas button:hover{background:var(--bg-raised);}
.llm-placa__pecas button[aria-selected="true"]{background:var(--bg-raised);border-color:var(--gold);}
.llm-placa__pecas button[aria-selected="true"]::before{border-color:var(--teal);background:var(--teal);box-shadow:0 0 0 4px color-mix(in srgb,var(--teal) 25%,transparent);}
.llm-placa__pecas button:focus-visible,.llm-ctrl:focus-visible,.llm-faq summary:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
.llm-peca__nome{display:block;font-family:var(--display);font-size:1.25rem;letter-spacing:.03em;text-transform:uppercase;color:var(--fg);}
.llm-peca__resumo{display:block;font-size:.85rem;color:var(--fg-dim);line-height:1.4;}

.llm-placa__palco{background:#05101f;border:1px solid var(--line);border-radius:4px;padding:1.1rem 1.1rem .9rem;color:#fff;min-width:0;}
.llm-palco__tela{background:radial-gradient(120% 90% at 50% 0%,#0a3a72 0%,#05101f 70%);border-radius:4px;overflow-x:auto;}
.llm-palco__svg{display:block;width:100%;height:auto;}
.llm-palco__legenda{min-height:3.6em;margin:.9rem .2rem .7rem;font-size:1.02rem;line-height:1.55;color:#e7f0fa;}
.llm-palco__controles{display:flex;align-items:center;gap:.5rem;}
.llm-ctrl{
  width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.25);flex:none;
  background:rgba(255,255,255,.06);color:#fff;font-size:1.1rem;cursor:pointer;
}
.llm-ctrl:hover{background:rgba(255,255,255,.14);}
.llm-ctrl--tocar{background:var(--gold);border-color:var(--gold);color:#0a0a0a;font-size:.8rem;}
.llm-palco__barra{flex:1;height:4px;border-radius:2px;background:rgba(255,255,255,.15);overflow:hidden;margin-left:.4rem;}
.llm-palco__barra span{display:block;height:100%;width:0;background:#1fb6a5;}
.llm-palco__passo{font-family:var(--mono);font-size:.75rem;color:#9fb8d6;min-width:4.6em;text-align:right;}

/* elementos desenhados nas cenas (o JS cria os nós SVG) */
.llm-placa .no rect{fill:#0c2f5c;stroke:#2d5f95;stroke-width:2;transition:fill .4s,stroke .4s,opacity .4s;}
.llm-placa .no text{fill:#cfe0f2;font:600 15px var(--body);transition:fill .4s;}
.llm-placa .no .no__sub{fill:#8fb0d6;font:400 12.5px var(--body);}
.llm-placa .no.apagado{opacity:.28;}
.llm-placa .no.aceso rect{fill:#0f3d73;stroke:#1fb6a5;}
.llm-placa .no.aceso text{fill:#fff;}
.llm-placa .no.aceso .no__sub{fill:#bfeeee;}
.llm-placa .aresta{fill:none;stroke:#24507f;stroke-width:3;transition:stroke .4s,opacity .4s;}
.llm-placa .aresta.apagada{opacity:.25;}
.llm-placa .aresta.ativa{stroke:#1fb6a5;}
.llm-placa .pulso{fill:#1fb6a5;filter:drop-shadow(0 0 6px rgba(31,182,165,.9));}
.llm-placa .medidor__fundo{fill:#0c2f5c;stroke:#2d5f95;stroke-width:2;}
.llm-placa .medidor__nivel{fill:#1fb6a5;transition:width 1.2s ease;}
.llm-placa .medidor__nivel.alerta{fill:#f2b63c;}

/* ---------- fluxo: do contrato ao primeiro token ---------- */
.llm-fluxo{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:1.4rem;position:relative;}
.llm-fluxo::before{content:"";position:absolute;top:1.4rem;left:1.4rem;right:1.4rem;height:2px;background:var(--line);}
.llm-fluxo li{position:relative;}
.llm-fluxo__n{
  display:grid;place-items:center;width:2.8rem;height:2.8rem;border-radius:50%;position:relative;
  background:var(--bg);border:2px solid var(--fg);color:var(--fg);
  font-family:var(--display);font-size:1.4rem;margin-bottom:1rem;
}
.llm-fluxo li:last-child .llm-fluxo__n{background:var(--teal);border-color:var(--teal);color:#0a0a0a;}
.llm-fluxo h3{font-size:1.25rem;margin-bottom:.4rem;}
.llm-fluxo p{font-size:.92rem;margin:0;}
.llm-prova{margin-top:2.4rem;padding:1rem 1.2rem;border-left:3px solid var(--gold);background:var(--bg-raised);font-size:1rem;color:var(--fg);}

/* ---------- tabelas ---------- */
.llm-tabela-rolagem{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.llm-tabela{width:100%;border-collapse:collapse;min-width:720px;font-size:.98rem;}
.llm-tabela th,.llm-tabela td{padding:1rem 1.1rem;text-align:left;vertical-align:top;border-bottom:1px solid var(--line);}
.llm-tabela thead th{font-family:var(--display);font-size:1.3rem;letter-spacing:.03em;text-transform:uppercase;font-weight:400;color:var(--fg);border-bottom:2px solid var(--fg);}
.llm-tabela tbody th{font-weight:600;color:var(--fg);width:18%;}
.llm-tabela td{color:var(--fg-dim);line-height:1.55;}
.llm-tabela--planos thead th span{display:block;margin-top:.2rem;font-family:var(--body);font-size:.9rem;letter-spacing:0;text-transform:none;color:var(--fg-dim);}
.llm-tabela--planos .destaque{background:var(--bg-raised);}
.llm-tabela--planos thead .destaque{border-bottom-color:var(--gold);}
.llm-tabela--planos td.destaque{color:var(--fg);font-weight:500;}
.llm-planos-acao{margin-top:1.8rem;display:flex;flex-wrap:wrap;align-items:center;gap:1.2rem;}
.llm-planos-acao p{font-size:.9rem;margin:0;}

/* ---------- segurança ---------- */
.llm-garantias{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:2rem 2.4rem;}
.llm-garantias li{padding-top:1rem;border-top:2px solid var(--teal);}
.llm-garantias h3{font-size:1.3rem;margin-bottom:.4rem;}
.llm-garantias p{font-size:.95rem;margin:0;}

/* ---------- API ---------- */
.llm-api{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:start;}
.llm-codigo{margin:0;min-width:0;}
.llm-codigo figcaption{margin:0 0 .6rem;font-family:var(--mono);font-size:.78rem;letter-spacing:.03em;color:var(--fg-dim);}
.llm-codigo pre{margin:0;padding:1.3rem 1.4rem;background:#05101f;color:#d8e6f5;border:1px solid var(--line);border-radius:4px;overflow-x:auto;font:400 .85rem/1.65 var(--mono);}
.llm-rotas{list-style:none;margin:1.8rem 0 0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:.7rem 2rem;color:var(--fg-dim);font-size:.95rem;line-height:1.5;}
.llm-rotas code,.llm-faq code{font-family:var(--mono);font-size:.88em;color:var(--teal);}

/* ---------- perguntas ---------- */
.llm-faq{max-width:50rem;}
.llm-faq details{border-bottom:1px solid var(--line);padding:1.1rem 0;}
.llm-faq summary{cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1rem;min-height:44px;list-style:none;font-family:var(--display);font-size:1.35rem;letter-spacing:.03em;text-transform:uppercase;color:var(--fg);}
.llm-faq summary::-webkit-details-marker{display:none;}
.llm-faq summary::after{content:"+";flex:none;color:var(--gold);font-size:1.6rem;line-height:1;}
.llm-faq details[open] summary::after{content:"\2212";}
.llm-faq details p{margin:.6rem 0 0;max-width:44em;font-size:.98rem;}

/* ---------- fecho ---------- */
.llm-fecho{text-align:center;}
.llm-fecho .scene-title{max-width:900px;margin:0 auto 1.2rem;}
.llm-fecho p{max-width:36rem;margin:0 auto 2rem;font-size:1.08rem;}
.llm-fecho .llm-actions{justify-content:center;}

/* ---------- telas menores ---------- */
@media (max-width:980px){
  .llm-hero{grid-template-columns:1fr;gap:2.4rem;}
  .llm-placa{grid-template-columns:1fr;}
  .llm-placa__pecas{grid-template-columns:repeat(2,1fr);}
  .llm-placa__pecas::before{display:none;}
  .llm-fluxo{grid-template-columns:1fr;gap:1.4rem;}
  .llm-fluxo::before{top:1.4rem;bottom:1.4rem;left:1.35rem;right:auto;width:2px;height:auto;}
  .llm-fluxo li{display:grid;grid-template-columns:2.8rem 1fr;column-gap:1.1rem;}
  .llm-fluxo__n{grid-row:span 2;margin:0;}
  .llm-garantias{grid-template-columns:repeat(2,1fr);}
  .llm-api{grid-template-columns:1fr;}
}
@media (max-width:640px){
  /* As seis peças viram uma faixa deslizável, para o diagrama aparecer logo abaixo. */
  .llm-placa{gap:1rem;}
  .llm-placa__pecas{display:flex;gap:.5rem;overflow-x:auto;scroll-snap-type:x proximity;scroll-padding:0 5vw;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:.4rem;margin:0 -5vw;padding-left:5vw;padding-right:5vw;}
  .llm-placa__pecas button{flex:none;width:auto;min-height:48px;padding:.6rem 1rem;border-color:var(--line);scroll-snap-align:start;}
  .llm-placa__pecas::-webkit-scrollbar{display:none;}
  .llm-placa__pecas button::before{display:none;}
  .llm-peca__nome{white-space:nowrap;font-size:1.15rem;}
  .llm-peca__resumo{display:none;}
  /* O diagrama vira uma coluna de caixas largas (ver desenharMovel no JS). A legenda e os controles sobem para
     antes dele, para a explicação e o play ficarem na primeira tela, e a legenda tem altura fixa para o
     diagrama não pular de lugar a cada passo. */
  .llm-placa__palco{display:flex;flex-direction:column;padding:.8rem .8rem .9rem;}
  .llm-palco__legenda{order:1;min-height:6.6em;margin:.2rem .1rem .6rem;font-size:1rem;line-height:1.5;}
  .llm-palco__controles{order:2;margin-bottom:.9rem;}
  .llm-palco__tela{order:3;padding:.6rem .2rem;}
  .llm-placa .no--movel text{font-size:17px;}
  .llm-placa .no--movel .no__sub{font-size:14px;}
  .llm-garantias{grid-template-columns:1fr;}
  .llm-rotas{grid-template-columns:1fr;}
  .llm-actions .btn{flex:1 1 100%;text-align:center;}
  .llm-planos-acao .btn{flex:1 1 100%;text-align:center;}
  .llm-faq summary{font-size:1.2rem;}
  .llm-video figcaption{font-size:.8rem;}
}
@media (prefers-reduced-motion:reduce){
  .llm-placa .no rect,.llm-placa .no text,.llm-placa .aresta,.llm-placa .medidor__nivel{transition:none;}
}

.llm-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}