/* Materiais Venturi · ilustrações animadas de Google, Search Console e Core Web Vitals.
   Regra: o estilo base é o quadro final (é o que aparece no PDF e com movimento reduzido); as animações partem do começo. */

.ga{border:1px solid var(--line2);background:var(--preto2);padding:22px}
.ga-cap{display:block;margin-top:12px}
.ga .rot{font:700 11px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--red-bright)}
.ga .sub{font-size:.9rem;color:var(--sub);max-width:none}

/* ---------- 1. Como o Google funciona: rastrear, indexar, mostrar (14 s) ---------- */
.gf{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
.gf>.col{display:flex;flex-direction:column;gap:12px;padding:0 18px;border-right:1px solid var(--line);min-width:0}
.gf>.col:first-child{padding-left:0}
.gf>.col:last-child{border-right:0;padding-right:0}
.gf .palco{position:relative;height:190px;border:1px solid var(--line);background:#08080a;overflow:hidden}
/* rastrear */
.gf .pg{position:absolute;width:46px;height:56px;border:1.5px solid var(--red);background:var(--panel);display:flex;flex-direction:column;gap:4px;padding:7px 6px}
.gf .pg i{display:block;height:3px;background:var(--line2)}
.gf .pg i:first-child{background:var(--sub);width:70%}
.gf .p1{left:12px;top:16px}.gf .p2{left:96px;top:16px}.gf .p3{left:96px;top:116px}.gf .p4{left:178px;top:66px}
.gf .orfa{position:absolute;right:10px;bottom:10px;width:46px;height:56px;border:1.5px dashed var(--muted);opacity:.55;display:flex;align-items:center;justify-content:center;font:700 8px/1.2 var(--mono);color:var(--muted);text-align:center;text-transform:uppercase}
.gf svg.elos{position:absolute;inset:0;width:100%;height:100%}
.gf svg.elos line{stroke:var(--line2);stroke-width:1.5;stroke-dasharray:4 4}
.gf .robo{position:absolute;width:16px;height:16px;border-radius:50%;background:var(--red-bright);box-shadow:0 0 0 5px rgba(255,46,46,.22),0 0 18px rgba(255,46,46,.7);left:197px;top:86px;animation:gf-robo 14s linear infinite both}
@keyframes gf-robo{0%{left:27px;top:36px;opacity:0}3%{opacity:1}12%{left:27px;top:36px}20%{left:111px;top:36px}30%{left:111px;top:136px}40%{left:197px;top:86px}48%{left:197px;top:86px;opacity:1}52%,100%{left:197px;top:86px;opacity:0}}
.gf .p1{animation:gf-acende1 14s linear infinite both}.gf .p2{animation:gf-acende2 14s linear infinite both}.gf .p3{animation:gf-acende3 14s linear infinite both}.gf .p4{animation:gf-acende4 14s linear infinite both}
@keyframes gf-acende1{0%,4%{border-color:var(--line2);box-shadow:none}6%,96%{border-color:var(--red-bright);box-shadow:0 0 14px rgba(255,46,46,.35)}100%{border-color:var(--line2);box-shadow:none}}
@keyframes gf-acende2{0%,19%{border-color:var(--line2);box-shadow:none}21%,96%{border-color:var(--red-bright);box-shadow:0 0 14px rgba(255,46,46,.35)}100%{border-color:var(--line2);box-shadow:none}}
@keyframes gf-acende3{0%,29%{border-color:var(--line2);box-shadow:none}31%,96%{border-color:var(--red-bright);box-shadow:0 0 14px rgba(255,46,46,.35)}100%{border-color:var(--line2);box-shadow:none}}
@keyframes gf-acende4{0%,39%{border-color:var(--line2);box-shadow:none}41%,96%{border-color:var(--red-bright);box-shadow:0 0 14px rgba(255,46,46,.35)}100%{border-color:var(--line2);box-shadow:none}}
/* indexar */
.gf .fichario{position:absolute;left:50%;bottom:14px;width:150px;margin-left:-75px;display:flex;flex-direction:column;gap:6px}
.gf .gaveta{border:1.5px solid var(--line2);background:var(--panel);padding:8px 10px;font:700 10px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--sub);display:flex;justify-content:space-between;align-items:center}
.gf .gaveta b{font-weight:700;color:var(--muted)}
.gf .gaveta.alvo{animation:gf-gaveta 14s linear infinite both;border-color:var(--red-bright);color:var(--text)}
.gf .gaveta.alvo b{color:var(--red-bright)}
@keyframes gf-gaveta{0%,58%{border-color:var(--line2);color:var(--sub)}61%,96%{border-color:var(--red-bright);color:var(--text)}100%{border-color:var(--line2)}}
.gf .ficha{position:absolute;left:50%;top:14px;width:62px;margin-left:-31px;border:1.5px solid var(--red-bright);background:var(--panel);padding:6px;display:flex;flex-direction:column;gap:4px;opacity:0;animation:gf-ficha 14s linear infinite both}
.gf .ficha span{font:700 7px/1.2 var(--mono);text-transform:uppercase;color:var(--red-bright)}
.gf .ficha i{display:block;height:3px;background:var(--line2)}
@keyframes gf-ficha{0%,44%{opacity:0;transform:translate(-90px,10px) rotate(-8deg)}48%{opacity:1;transform:translate(0,0)}56%{opacity:1;transform:translate(0,62px) scale(.7)}60%,100%{opacity:0;transform:translate(0,70px) scale(.5)}}
/* mostrar */
.gf .busca{position:absolute;left:12px;right:12px;top:12px;border:1px solid var(--line2);background:var(--preto);padding:8px 10px;font:500 10.5px/1 var(--mono);color:var(--text);white-space:nowrap;overflow:hidden}
.gf .busca span{display:inline-block;animation:gf-digita 14s steps(22,end) infinite both}
@keyframes gf-digita{0%,62%{clip-path:inset(0 100% 0 0)}72%,100%{clip-path:inset(0 0 0 0)}}
.gf .resultados{position:absolute;left:12px;right:12px;top:48px;display:flex;flex-direction:column;gap:6px}
.gf .res{border:1px solid var(--line);padding:7px 8px;display:flex;flex-direction:column;gap:4px}
.gf .res i{display:block;height:3px;background:var(--line2)}
.gf .res i.t{height:5px;width:72%;background:var(--sub)}
.gf .res.sua{border-color:var(--red-bright);box-shadow:inset 3px 0 0 var(--red-bright)}
.gf .res.sua b{font:700 8.5px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--red-bright)}
.gf .r1{animation:gf-r1 14s linear infinite both}.gf .r2{animation:gf-r2 14s linear infinite both}.gf .r3{animation:gf-r3 14s linear infinite both}
@keyframes gf-r1{0%,72%{opacity:0;transform:translateY(8px)}75%,97%{opacity:1;transform:none}100%{opacity:0}}
@keyframes gf-r2{0%,76%{opacity:0;transform:translateY(8px)}79%,97%{opacity:1;transform:none}100%{opacity:0}}
@keyframes gf-r3{0%,80%{opacity:0;transform:translateY(8px)}83%,97%{opacity:1;transform:none}100%{opacity:0}}
.gf .passo-t{display:flex;flex-direction:column;gap:6px}
.gf .passo-t h4{font:900 1.15rem/1 var(--sans);text-transform:uppercase;letter-spacing:-.02em;color:var(--text);margin:0}
.gf .passo-t p{font-size:.9rem;margin:0}
.gf .s1 .passo-t{animation:gf-t1 14s linear infinite both}.gf .s2 .passo-t{animation:gf-t2 14s linear infinite both}.gf .s3 .passo-t{animation:gf-t3 14s linear infinite both}
@keyframes gf-t1{0%,1%{opacity:.35}3%,96%{opacity:1}100%{opacity:.35}}
@keyframes gf-t2{0%,43%{opacity:.35}46%,96%{opacity:1}100%{opacity:.35}}
@keyframes gf-t3{0%,61%{opacity:.35}64%,96%{opacity:1}100%{opacity:.35}}

/* ---------- 2. Search Console: o relatório de desempenho (14 s) ---------- */
.gsc-t{background:#fff;color:#202124;font:400 13px/1.4 Arial,Helvetica,sans-serif;border:1px solid var(--line2);overflow:hidden}
.gsc-t .bar{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid #e0e0e0;font-size:14px;color:#5f6368}
.gsc-t .bar b{color:#202124;font-weight:500;font-size:16px}
.gsc-t .bar .lg{width:20px;height:20px;display:grid;grid-template-columns:1fr 1fr;gap:2px}
.gsc-t .bar .lg i{display:block;border-radius:2px}
.gsc-t .tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.gsc-t .tile{padding:12px 14px;color:#fff;min-width:0}
.gsc-t .tile small{display:block;font-size:11.5px;opacity:.9}
.gsc-t .tile b{display:block;font-size:22px;font-weight:400;margin-top:2px;font-variant-numeric:tabular-nums}
.gsc-t .tile.cli{background:#4285f4}.gsc-t .tile.imp{background:#5e35b1}
.gsc-t .tile.ctr{background:#fff;color:#5f6368;border-bottom:1px solid #e0e0e0}.gsc-t .tile.pos{background:#fff;color:#5f6368;border-bottom:1px solid #e0e0e0;border-left:1px solid #e0e0e0}
.gsc-t .tile.ctr b,.gsc-t .tile.pos b{color:#202124}
.gsc-t .tile{animation:gsc-tile 14s linear infinite both}
.gsc-t .tile.imp{animation-name:gsc-tile2}.gsc-t .tile.ctr{animation-name:gsc-tile3}.gsc-t .tile.pos{animation-name:gsc-tile4}
@keyframes gsc-tile{0%,1%{opacity:0}5%,97%{opacity:1}100%{opacity:0}}
@keyframes gsc-tile2{0%,4%{opacity:0}8%,97%{opacity:1}100%{opacity:0}}
@keyframes gsc-tile3{0%,7%{opacity:0}11%,97%{opacity:1}100%{opacity:0}}
@keyframes gsc-tile4{0%,10%{opacity:0}14%,97%{opacity:1}100%{opacity:0}}
.gsc-t .graf{padding:10px 14px 4px;border-bottom:1px solid #e0e0e0}
.gsc-t .graf svg{width:100%;height:120px;display:block}
.gsc-t .graf .grade line{stroke:#eceff1;stroke-width:1}
.gsc-t .graf polyline{fill:none;stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:900;stroke-dashoffset:0}
.gsc-t .graf .l-cli{stroke:#4285f4;animation:gsc-linha 14s ease-out infinite both}
.gsc-t .graf .l-imp{stroke:#5e35b1;animation:gsc-linha2 14s ease-out infinite both}
@keyframes gsc-linha{0%,14%{stroke-dashoffset:900}34%,97%{stroke-dashoffset:0}100%{stroke-dashoffset:900}}
@keyframes gsc-linha2{0%,16%{stroke-dashoffset:900}36%,97%{stroke-dashoffset:0}100%{stroke-dashoffset:900}}
.gsc-t .abas{display:flex;gap:22px;padding:0 14px;border-bottom:1px solid #e0e0e0;font-size:12px;font-weight:500;letter-spacing:.04em;color:#5f6368}
.gsc-t .abas span{padding:10px 0}
.gsc-t .abas span.on{color:#1a73e8;box-shadow:inset 0 -3px 0 #1a73e8}
.gsc-t table{width:100%;border-collapse:collapse;font-size:12.5px}
.gsc-t th{font-weight:500;color:#5f6368;text-align:right;padding:8px 14px;border-bottom:1px solid #e0e0e0}
.gsc-t th:first-child,.gsc-t td:first-child{text-align:left}
.gsc-t td{padding:8px 14px;border-bottom:1px solid #f1f3f4;text-align:right;font-variant-numeric:tabular-nums}
.gsc-t tr.q1{animation:gsc-q1 14s linear infinite both}.gsc-t tr.q2{animation:gsc-q2 14s linear infinite both}.gsc-t tr.q3{animation:gsc-q3 14s linear infinite both}.gsc-t tr.q4{animation:gsc-q4 14s linear infinite both}
@keyframes gsc-q1{0%,38%{opacity:0}41%,97%{opacity:1}100%{opacity:0}}
@keyframes gsc-q2{0%,41%{opacity:0}44%,97%{opacity:1}100%{opacity:0}}
@keyframes gsc-q3{0%,44%{opacity:0}47%,97%{opacity:1}100%{opacity:0}}
@keyframes gsc-q4{0%,47%{opacity:0}50%,97%{opacity:1}100%{opacity:0}}
.gsc-t tr.pauta td{background:#fde8e7;color:#a50e0e;font-weight:500}
.gsc-t tr.pauta{animation:gsc-q4 14s linear infinite both}
.gsc-t tr.pauta td{animation:gsc-pauta 14s linear infinite both}
@keyframes gsc-pauta{0%,58%{background:transparent;color:#202124}62%,97%{background:#fde8e7;color:#a50e0e}100%{background:transparent}}
.gsc-lado{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:24px;align-items:start}
.gsc-leg{list-style:none;display:flex;flex-direction:column;margin:0;padding:0}
.gsc-leg li{display:grid;grid-template-columns:34px 1fr;gap:10px;padding:11px 0;border-bottom:1px solid var(--line);color:var(--text);font-weight:700;font-size:.98rem}
.gsc-leg li:last-child{border-bottom:0}
.gsc-leg li b{font:700 12px/1.6 var(--mono);color:var(--red-bright)}
.gsc-leg li small{display:block;font:400 .88rem/1.45 var(--sans);color:var(--sub);margin-top:3px}
.gsc-leg .g1{animation:gl-1 14s linear infinite both}.gsc-leg .g2{animation:gl-2 14s linear infinite both}.gsc-leg .g3{animation:gl-3 14s linear infinite both}.gsc-leg .g4{animation:gl-4 14s linear infinite both}
@keyframes gl-1{0%,1%{opacity:.3}5%,97%{opacity:1}100%{opacity:.3}}
@keyframes gl-2{0%,14%{opacity:.3}18%,97%{opacity:1}100%{opacity:.3}}
@keyframes gl-3{0%,38%{opacity:.3}42%,97%{opacity:1}100%{opacity:.3}}
@keyframes gl-4{0%,58%{opacity:.3}62%,97%{opacity:1}100%{opacity:.3}}

/* ---------- 3. Core Web Vitals: três medidores (10 s) ---------- */
.cwv{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.cwv .med{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;min-width:0}
.cwv .arco{position:relative;width:100%;max-width:210px;aspect-ratio:2/1;overflow:hidden}
.cwv .arco .faixa{position:absolute;left:0;top:0;width:100%;aspect-ratio:1/1;border-radius:50%;
  background:conic-gradient(from -90deg,#0cce6b 0 var(--g),#ffa400 var(--g) var(--a),#ff4e42 var(--a) 180deg,transparent 180deg);
  -webkit-mask:radial-gradient(circle,transparent 57%,#000 58%);mask:radial-gradient(circle,transparent 57%,#000 58%)}
.cwv .ponteiro{position:absolute;left:50%;bottom:0;width:4px;height:88%;margin-left:-2px;background:var(--text);border-radius:2px;transform-origin:50% 100%;rotate:calc(var(--v) - 90deg);animation:cwv-pont 10s cubic-bezier(.3,1.3,.5,1) infinite both}
.cwv .ponteiro::after{content:'';position:absolute;left:50%;bottom:-7px;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:var(--text)}
@keyframes cwv-pont{0%,8%{rotate:-90deg}30%,94%{rotate:calc(var(--v) - 90deg)}100%{rotate:-90deg}}
.cwv .valor{font:900 1.9rem/1 var(--sans);letter-spacing:-.03em;color:var(--text);font-variant-numeric:tabular-nums}
.cwv .valor small{font:700 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;display:block;margin-top:6px}
.cwv .bom small{color:#0cce6b}.cwv .medio small{color:#ffa400}.cwv .ruim small{color:#ff4e42}
.cwv .valor{animation:cwv-val 10s linear infinite both}
@keyframes cwv-val{0%,26%{opacity:0}32%,94%{opacity:1}100%{opacity:0}}
.cwv h4{font:900 1.05rem/1.05 var(--sans);text-transform:uppercase;letter-spacing:-.01em;color:var(--text);margin:0}
.cwv h4 span{display:block;font:500 10px/1.3 var(--mono);letter-spacing:.12em;color:var(--muted);margin-top:4px}
.cwv p{font-size:.9rem;margin:0;max-width:none}
.cwv .lim{font:500 10.5px/1.5 var(--mono);color:var(--muted);letter-spacing:.04em}
.cwv-veredito{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.cwv-veredito .chip{font:700 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:9px 11px;background:#ff4e42;color:#fff;animation:cwv-ver 10s linear infinite both}
@keyframes cwv-ver{0%,40%{opacity:0;transform:scale(.85)}45%,94%{opacity:1;transform:none}100%{opacity:0}}
.cwv-veredito p{font-size:.92rem;margin:0;max-width:62ch}

@media (max-width:760px){
  .gf{grid-template-columns:1fr;gap:22px}
  .gf>.col{padding:0;border-right:0}
  .gsc-lado{grid-template-columns:1fr}
  .gsc-t .tiles{grid-template-columns:1fr 1fr}
  .gsc-t .tile.pos{border-left:0}
  .gsc-t .abas{gap:14px;overflow-x:auto}
  .gsc-t th,.gsc-t td{padding:7px 8px}
  .cwv{grid-template-columns:1fr;gap:26px}
  .ga{padding:16px}
}
@media (prefers-reduced-motion:reduce){
  .ga *,.ga *::after{animation:none!important}
  .gf .robo,.gf .ficha{display:none}
}
@media print{
  .ga *,.ga *::after{animation:none!important}
  .gf .robo,.gf .ficha{display:none!important}
  .ga{padding:5mm;break-inside:avoid}
  .gf .palco{height:44mm}
  .gsc-t .graf svg{height:30mm}
  .cwv .arco{max-width:46mm}
}