/* ==========================================================================
   05-integracoes.css — bloco centrado + 6 pills flutuantes (≥1440) + 2 pontilhados (≥769)
   Ref: DESIGN_SPEC §4.2/§4.4/§4.9/§5.2(4) · BUILD_PLAN 05-integracoes · 02 §4.5 · 04 §4 · 06 §9
   Alvo 1440: célula y1615→2209 (595px)
   ========================================================================== */

/* ---------- Célula ---------- */
.integ__cell{position:relative}

.integ__wrap{position:relative;display:flex;justify-content:center;align-items:center;overflow:hidden}

/* ---------- Pontilhados decorativos (≥769) ---------- */
.integ__dots{display:none}
@media (min-width:769px){
  /* PADRÃO — recontado no screenshot (banda y1616–1696): passo 9,6px, ponto renderizado
     de 2–3px e luminância mínima ~247. O token global (`--pattern-dots`) ainda está em
     1,6px de raio com cor cheia, o que rende um ponto 2× mais gordo e escuro; o override
     anterior daqui era mais pesado ainda (1,8× a tinta da ref). Override local até o token
     ser corrigido em tokens.css — os valores abaixo são os mesmos propostos para ele. */
  /* MÁSCARA — o campo NÃO é um véu uniforme nem um bolsão elíptico simples. O original é um
     SVG 1180×819 (`dots-pattern`, 06 §6.4) com uma PLUMA: densa no topo (pico em x≈750),
     que afina e apaga descendo — some antes de y≈300 na altura do trilho e desce em um
     "talo" estreito no eixo x≈750 até y≈700. Os dois lados usam o MESMO desenho; o
     espelhamento aparente vem só do offset (−500 à esquerda, −200 à direita), como no
     original. A pluma foi AJUSTADA numericamente contra o render do SVG de referência
     (ref/assets/render/dots-pattern.png). A tinta medida foi convertida em alfa por uma
     CALIBRAÇÃO do próprio pontilhado (20 blocos de alfa .05→1: o ponto só começa a aparecer
     acima de ~.11 e daí a tinta sobe quase reta — sem essa inversão o ajuste sai ~30% claro
     demais). A pluma calibrada foi aproximada por 3 elipses:
       p1  504×633 em (750,−150) alfa 1    — corpo largo do topo
       p2  288×576 em (745,221)  alfa .61  — engrossa e alonga o miolo
       p3  208×279 em (749,647)  alfa .19  — devolve o pé do talo
     A composição padrão de máscara é `add` (source-over): α = a+b−ab, que é como o modelo
     foi ajustado. Raio X fluido (rx/1440·100vw) para a pluma encolher junto com a página
     abaixo de 1440; em ≥1440 o `min()` trava nos px medidos.
     Aferição na linha limpa y4–100 (janelas de 56px em x=100/292/484/612/1060, ref × nosso):
       ref 2604·3720·1350·155·3124 — antes 1996·3345·785·2·2995 (campo curto demais à
       direita e fundo demais no pé); modelo novo 2661·3695·1504·193·3388. */
  .integ__dots{display:block;top:0;opacity:1;
    background-image:radial-gradient(circle at 50% 50%,rgba(76,82,103,.16) .9px,transparent 1.3px);
    background-size:9.6px 9.6px;
    /* fase da grade: a ref tem as linhas de ponto em y local 8,18,28… e as colunas em
       x 208,217,227… — 3px abaixo e 1px à esquerda da nossa. Só o padrão anda; a máscara
       continua ancorada no topo do .integ__wrap. */
    background-position:-1px 3px;
    /* PLATÔ (#000 até 22%): a pluma está centrada em y −150 com ry 633, então ao ENTRAR na
       banda visível já havia decaído para α≈.7–.8 e o ponto mais escuro lia 231 em vez dos
       227 da ref (= rgba(76,82,103,.16) puro sobre branco). O platô faz a máscara saturar
       dentro da banda sem tocar no raio nem na cor do ponto. */
    --plume-1:radial-gradient(min(504px,35vw) 633px at 750px -150px,#000 0%,#000 22%,rgba(0,0,0,.72) 34%,rgba(0,0,0,.35) 62%,rgba(0,0,0,.05) 90%,transparent 100%);
    --plume-2:radial-gradient(min(288px,20vw) 576px at 745px 221px,rgba(0,0,0,.61) 0%,rgba(0,0,0,.44) 30%,rgba(0,0,0,.21) 60%,rgba(0,0,0,.03) 90%,transparent 100%);
    --plume-3:radial-gradient(min(208px,14.4vw) 279px at 749px 647px,rgba(0,0,0,.19) 0%,rgba(0,0,0,.14) 30%,rgba(0,0,0,.07) 60%,rgba(0,0,0,.01) 90%,transparent 100%);
    -webkit-mask-image:var(--plume-1),var(--plume-2),var(--plume-3);
            mask-image:var(--plume-1),var(--plume-2),var(--plume-3)}
  .integ__dots--l{left:-500px}
  .integ__dots--r{right:-200px}
}

/* ---------- Bloco de conteúdo ---------- */
.integ__content{position:relative;z-index:var(--z-content);
  display:flex;flex-direction:column;align-items:flex-start;
  width:100%;padding:var(--sp-16) var(--sp-8);text-align:left}
/* ≥769: bloco centrado. O max-width vale para o CONTEÚDO (580px) — a caixa soma o padding.
   Os 580px medem a coluna de texto (é a quebra do <p>: 2 linhas em 1440); NÃO ancoram as
   pills, que ficam presas ao .integ__wrap em 50% ∓ 410. O H2 transborda essa coluna de
   propósito (ver abaixo). */
@media (min-width:769px){
  .integ__content{align-items:center;text-align:center;
    max-width:calc(580px + var(--sp-8) * 2);padding:var(--sp-25) var(--sp-8)}
}

.integ__eyebrow{margin-bottom:var(--sp-8)}      /* D6: 700/14px, altura 39px, mb 32 */

/* Wrapper do título: flex-column para NÃO colapsar a margem do <p> e manter
   título e parágrafo com a mesma largura (580px) do eixo central */
.integ__title-wrap{position:relative;display:flex;flex-direction:column;width:100%}

.integ__title{margin-bottom:var(--sp-4)}
/* ≥769 o H2 tem 2 linhas fixas: cada <span> é um bloco que não quebra. A caixa do H2 mede
   a linha mais larga (a 2ª, 628px — passa dos 580px da coluna) e precisa transbordar
   SIMETRICAMENTE. `margin-inline:auto` não serve: em flexbox as margens auto só repartem
   espaço LIVRE; com espaço negativo elas viram 0 e o bloco encosta à esquerda, jogando o
   título (628−580)/2 = 24px para a direita. left:50% + translateX(-50%) centra a caixa
   pelo próprio meio, com ou sem transbordo — as duas linhas ficam no eixo 720. */
@media (min-width:769px){
  .integ__title{width:max-content;max-width:none;margin-inline:0;
    position:relative;left:50%;transform:translateX(-50%)}
  .integ__title>span{display:block;white-space:nowrap}
}

.integ__p{margin-bottom:var(--sp-12)}

/* ---------- CTA + link ---------- */
.integ__cta{width:100%;justify-content:center}
@media (min-width:769px){
  .integ__cta{width:fit-content}
}

.integ__llms{position:relative;margin-top:var(--sp-3);
  font:var(--fw-medium) var(--fs-small)/20px var(--font-body);color:var(--c-ink-600);
  text-decoration:underline;text-underline-offset:4px;
  transition:color var(--dur-fast) var(--ease-default)}   /* 04 §7: 150ms */
/* WCAG 2.5.5: o link mede 105×20 em 360/390 — mesma técnica de .pill/.link-u (base.css),
   um pseudo transparente fora de fluxo amplia só a ÁREA DE TOQUE para 44px sem mexer em
   um pixel do render. Os 12px que ele sobe encostam exatamente na base do .integ__cta
   (margin-top --sp-3 = 12px), sem roubar clique dele. */
.integ__llms::after{content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
.integ__llms:hover{color:var(--c-ink-900)}

/* ---------- Pills flutuantes (só ≥1440 · 04 §4 · fora do .reveal, D7) ----------
   Âncoras de largura 0 presas ao .integ__wrap (irmãs de .integ__content, nunca dentro
   dele: 04 §2 — "pills NÃO recebem reveal; elas já pulsam"). x = eixo 720 ∓ 410 e
   y = 293 reproduzem exatamente as posições medidas em 1440. */
.integ__pills{display:none}
.integ__pill{display:none}

@media (min-width:1440px){
  .integ__pills{display:block;position:absolute;top:293px;z-index:var(--z-content);width:0}
  .integ__pills--left {left:calc(50% - 410px)}
  .integ__pills--right{left:calc(50% + 410px)}

  .integ__pill{position:absolute;display:flex;align-items:center;gap:var(--sp-3);
    padding:var(--pill-pad);border:var(--border-pill-float);border-radius:var(--r-pill);
    background:var(--grad-pill);box-shadow:var(--sh-pill);
    font:var(--fw-semibold) var(--fs-float-pill)/1.4 var(--font-display);
    letter-spacing:var(--ls-float-pill);color:var(--c-ink-dash);white-space:nowrap;
    animation:pill-pulse var(--dur,4s) var(--ease-pulse) infinite}
  .integ__pill svg{flex-shrink:0}

  /* posições medidas em 1440 (x,y de página):
     Python 180–308/1757 · n8n 80–176/1930 · Ruby 160–268/2010
     PHP 1128–1230/1767 · Lovable 1250–1380/1877 · Javascript 1128–1288/2000
     SEM `animation-delay`: o site fonte usa `animate-pulse-slow-N` puro (04 §4.1) e a
     dessincronia vem só das 6 durações primas entre si. Os delays negativos que estavam
     aqui eram "opcionais" (SPEC §5 item 4) e desalinhavam a fase em relação à referência:
     medindo a opacidade das 6 pills no screenshot de referência (α .75 .54 .57 .55 .65 .53)
     o conjunto bate com t≈2,3s SEM delay — com delay, cada pill cai numa fase diferente. */
  .integ__pill--python {top:-150px;left:-130px;--dur:var(--dur-pulse-1)}
  .integ__pill--n8n    {top:24px;  left:-230px;--dur:var(--dur-pulse-2)}
  .integ__pill--ruby   {top:104px; left:-150px;--dur:var(--dur-pulse-5)}
  .integ__pill--php    {top:-140px;left:0;     --dur:var(--dur-pulse-3)}
  .integ__pill--lovable{top:-30px; right:-250px;--dur:var(--dur-pulse-4)}
  .integ__pill--js     {top:94px;  left:0;     --dur:var(--dur-pulse-6)}
}

@media (prefers-reduced-motion:reduce){
  .integ__pill{animation:none;opacity:1}
  .integ__llms{transition:none}
}